/* Organisation features: company sign-in, import, certificate designer and view, skills, requests, report emails. */

/* Company sign-in on the sign-in page */
.corpsso { margin-top: 10px; }
.corpsso__form { display: grid; gap: 8px; margin-top: 4px; }
.corpsso__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Forms of the organisation tabs */
.corpform { display: grid; gap: 10px; max-width: 760px; }
.corpform__choice { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.corpform__callback { display: grid; gap: 4px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface-2); }
.corpform__callback code { word-break: break-all; font-size: 13px; }

/* Bulk import */
.corpimport { display: grid; gap: 12px; }
.corpimport__pick { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 14px; }
.corpimport__summary { font-size: 14px; }
.corpimport__error td { background: var(--tint-danger); }
.corpimport__rows td { vertical-align: top; }

/* Certificate designer */
.certdesign { display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); gap: 18px; align-items: start; }
.certdesign__form { display: grid; gap: 10px; }
.certdesign__images { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.certdesign__preview { position: sticky; top: 12px; min-width: 0; }
@media (max-width: 900px) {
    .certdesign { grid-template-columns: minmax(0, 1fr); }
    .certdesign__preview { position: static; }
}

/* A certificate drawn in the page */
.certview { --cv-primary: #4b4fe0; --cv-accent: #0f766e; position: relative; display: flex; background: #fff; color: #374151; aspect-ratio: 297 / 210;
    width: 100%; max-width: 760px; margin: 0 auto; overflow: hidden; border-radius: 6px; box-shadow: 0 6px 24px rgba(22, 22, 31, .12); font-size: clamp(9px, 1.6vw, 14px); }
.certview__body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .5em; padding: 4% 6%; min-width: 0; }
.certview__top { display: flex; align-items: center; gap: .8em; }
.certview__logo { max-height: 3.4em; max-width: 9em; object-fit: contain; }
.certview__issuer { font-weight: 600; color: var(--cv-primary); }
.certview__heading { font-size: 2.1em; font-weight: 700; color: #16161f; line-height: 1.15; }
.certview__learner { font-size: 2em; font-weight: 600; color: #16161f; overflow-wrap: anywhere; }
.certview__course { font-size: 1.5em; font-weight: 600; color: var(--cv-accent); overflow-wrap: anywhere; }
.certview__dates { margin-top: .6em; }
.certview__sign { margin-top: .4em; width: 14em; max-width: 100%; border-top: 1px solid #d1d5db; padding-top: .3em; }
.certview__signature { display: block; max-height: 3em; max-width: 100%; object-fit: contain; margin-top: -3.2em; }
.certview__signer { font-weight: 600; }
.certview__signertitle, .certview__code, .certview__footer { font-size: .8em; color: #5b6270; }
.certview__footer { font-style: italic; }
.certview__stamp { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-14deg); border: .25em solid #b91c1c; color: #b91c1c;
    font-size: 2.4em; font-weight: 800; letter-spacing: .1em; padding: .1em .6em; text-transform: uppercase; background: rgba(255, 255, 255, .85); }
.certview--expired .certview__body { opacity: .55; }

.certview--classic { border: .35em solid var(--cv-primary); }
.certview--classic .certview__body { align-items: center; text-align: center; }
.certview--classic .certview__top { flex-direction: column; gap: .3em; }
.certview--classic .certview__sign { text-align: center; }

.certview--modern .certview__band { flex: 0 0 22%; background: var(--cv-primary); color: #fff; display: flex; flex-direction: column; gap: .8em; padding: 5% 3%; }
.certview--modern .certview__band .certview__issuer { color: #fff; }
.certview--modern .certview__band .certview__logo { background: #fff; padding: .3em; border-radius: 4px; max-width: 100%; }
.certview--modern .certview__heading { text-transform: uppercase; letter-spacing: .05em; color: var(--cv-primary); border-bottom: .2em solid var(--cv-accent); padding-bottom: .2em; }

.certview--minimal .certview__top { justify-content: space-between; }
.certview--minimal .certview__issuer { color: #5b6270; font-weight: 500; }
.certview--minimal .certview__heading { font-weight: 400; color: var(--cv-primary); }
.certview--minimal .certview__heading::after { content: ""; display: block; width: 3em; height: .15em; margin-top: .3em; background: var(--cv-accent); }
.certview--minimal .certview__course { color: #16161f; }

.checkoutdone--wide { max-width: 820px; }

/* Recertification counters */
.corpstats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.corpstat { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.corpstat strong { color: var(--ink); font-size: 16px; margin-right: 4px; }
.corpstat--ok strong { color: var(--success-ink); }
.corpstat--warn strong { color: var(--warn-ink); }
.corpstat--bad strong { color: var(--danger-ink); }
.corpstat--on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--focus-ring); }

/* Course editor panel */
.corpcourse { display: grid; gap: 6px; }
.corpcourse__months { max-width: 110px; }
.corpcourse__skill { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.corpcourse__skill > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Skills on the Achievements page */
.skilllist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.skilllist__item { display: grid; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.skilllist__name { font-weight: 600; color: var(--ink); }
.skilllist__dots { display: flex; gap: 4px; }
.skilllist__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-4); }
.skilllist__dot--on { background: var(--brand); }

/* Skills matrix */
.skillsmx { display: grid; gap: 12px; }
.skillsmx__targets { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.skillsmx__targets .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.skillsmx__table td.skillsmx__cell { text-align: center; white-space: nowrap; }
.skillsmx__cell--gap { background: var(--tint-danger); color: var(--danger-ink); font-weight: 600; }
.skillsmx__cell--met { background: var(--tint-success); color: var(--success-ink); }

/* Requests and training */
.orgreq__note { max-width: 180px; }
.corptraining { padding: 12px 14px; margin-bottom: 12px; }
.corptraining summary { cursor: pointer; font-weight: 600; }
.corptraining form { margin-top: 10px; }
.corptraining__hours { max-width: 100px; }
.trainrec { display: grid; gap: 10px; }
.trainrec__list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.corpreq { display: grid; gap: 8px; padding: 12px 14px; margin: 10px 0; text-align: left; }
.corpreq__head { font-size: 13px; color: var(--muted); }
.corpreq__status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.corpfile { padding: 6px; font-size: 13px; max-width: 100%; }