@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Original SEE and WRM artwork: retain colors, white background and proportions. */
.brand.brand-original {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    flex-shrink: 0;
}
.see-logo {
    display: block;
    object-fit: contain;
    background: #fff;
    border-radius: 12px;
}
.header-brand {
    display: flex;
    flex-shrink: 0;
}
.header-brand img {
    display: block;
    border-radius: 7px;
    object-fit: contain;
    background: #fff;
}
.module-logo {
    display: block;
    width: 100%;
    height: 112px;
    object-fit: contain;
    background: #fff;
    border-radius: 7px;
    margin-bottom: 14px;
}
.wrm-signature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 10px;
}
.wrm-signature img {
    display: block;
    box-sizing: content-box;
    object-fit: contain;
    background: #fff;
    padding: 6px 10px;
    border-radius: 7px;
}
.auth-signature {
    justify-content: center;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.auth-card .brand.brand-original {
    padding: 0 0 24px;
}
.app footer {
    align-items: center;
    gap: 12px;
}
@media (max-width: 650px) {
    .header-brand img { width: 32px; height: 32px; }
    .module-logo { height: 100px; }
    .app footer .wrm-signature span { display: inline; }
}

:root {
    --bg: #eef2f7;
    --panel: #fff;
    --panel-2: #f1f5f9;
    --panel-3: #e2e8f0;
    --border: #d5dde7;
    --border-soft: #e6ecf2;
    --text: #0f172a;
    --text-soft: #334155;
    --text-muted: #64748b;
    --shadow: 0 1px 3px rgba(15, 23, 42, .07), 0 12px 26px -18px rgba(15, 23, 42, .35);
    --green: #059669;
    --blue: #2563eb;
    --amber: #d97706;
    --purple: #7c3aed;
    --teal: #0d9488
}

html.dark {
    --bg: #020617;
    --panel: #0f172a;
    --panel-2: #1e293b;
    --panel-3: #334155;
    --border: #1e293b;
    --border-soft: #334155;
    --text: #f1f5f9;
    --text-soft: #cbd5e1;
    --text-muted: #94a3b8;
    --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 14px 30px -22px rgba(0, 0, 0, .9);
    --green: #34d399;
    --blue: #60a5fa;
    --amber: #fbbf24;
    --purple: #a78bfa;
    --teal: #2dd4bf
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 13px/1.5 Inter, system-ui, sans-serif
}

a {
    color: var(--blue);
    text-decoration: none
}

button,
input,
select,
textarea {
    font: inherit
}

button,
a,
input,
select,
textarea {
    outline-offset: 4px
}

button {
    cursor: pointer
}

h1,
h2,
h3,
p {
    margin: 0
}

h1 {
    font-size: 25px;
    letter-spacing: -.7px;
    font-weight: 700
}

h2 {
    font-size: 20px
}

h3 {
    font-size: 14px;
    font-weight: 700
}

p {
    margin: 8px 0
}

small,
.small {
    font-size: 11px
}

.muted {
    color: var(--text-muted)
}

.eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-muted)
}

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 224px;
    background: var(--panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 30
}

.brand {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 4px;
    color: var(--text);
    padding: 22px 24px 18px
}

.brand-mark {
    color: var(--teal)
}

.brand small {
    display: block;
    font-size: 7px;
    letter-spacing: 1.5px;
    color: var(--text-muted)
}

.workspace {
    background: #eaf5fc;
    border-radius: 10px;
    justify-content: center;
    text-align: center;
    margin: 0 16px 10px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px
}

.workspace strong {
    margin-inline: auto;
    font-size: 11px;
    display: block;
    max-width: 135px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.workspace small {
    display: block;
    color: var(--text-muted);
    font-size: 9px
}

.avatar {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    color: var(--teal);
    font-weight: 700;
    flex-shrink: 0
}

.sidebar nav {
    overflow: auto;
    padding: 0 12px 15px
}

.sidebar nav a {
    display: block;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-soft);
    margin: 2px 0
}

.sidebar nav a:hover {
    background: var(--panel-2)
}

.sidebar nav a.selected {
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8)
}

.nav-heading {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: var(--text-muted);
    margin: 19px 12px 7px
}

.sidebar-bottom {
    margin-top: auto;
    padding: 15px 20px;
    border-top: 1px solid var(--border);
    font-size: 9px;
    color: var(--text-muted)
}

.app {
    margin-left: 224px
}

.topbar {
    background: var(--panel);
    border-bottom: 1px solid var(--border)
}

.header-main {
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 12px
}

.header-main>div>strong {
    font-size: 14px
}

.header-actions {
    margin-left: auto;
    display: flex;
    gap: 12px;
    align-items: center
}

.header-actions form {
    margin: 0
}

.context-bar {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    padding: 8px 24px;
    font-size: 10px
}

.status-dot {
    display: inline-block;
    background: var(--green);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px
}

.segmented {
    display: flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--panel-2)
}

.segmented button {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 10px
}

.segmented button.active {
    background: var(--panel-3);
    color: var(--text)
}

.jaica-button {
    color: var(--purple);
    border: 1px solid color-mix(in srgb, var(--purple) 35%, transparent);
    background: color-mix(in srgb, var(--purple) 9%, transparent);
    border-radius: 7px;
    padding: 6px 12px;
    font-weight: 600;
    font-size: 11px
}

.quiet,
.icon-button {
    background: transparent;
    color: var(--text-muted);
    border: 0
}

.icon-button {
    font-size: 18px
}

.header-main>.icon-button {
    display: none
}

main {
    max-width: 1920px;
    margin: auto;
    padding: 24px;
    min-height: calc(100vh - 140px)
}

main>section,
main>div {
    margin-bottom: 20px
}

.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px
}

.page-heading p {
    font-size: 11px
}

.toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    color: var(--text-soft);
    padding: 8px 12px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600
}

.button:hover {
    border-color: var(--blue)
}

.button.primary {
    background: #2563eb;
    border-color: #2563eb;
    color: white;
    box-shadow: 0 6px 18px -10px #2563eb
}

.button.danger {
    color: #f87171
}

.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 18px;
    box-shadow: var(--shadow);
    min-width: 0
}

.card p {
    font-size: 11px
}

.risk-grid {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: 12px
}

.risk-hero {
    display: flex;
    gap: 16px;
    align-items: center;
    background: linear-gradient(135deg, rgba(13, 148, 136, .08), rgba(124, 58, 237, .06)), var(--panel)
}

.gauge {
    height: 94px;
    width: 94px;
    min-width: 94px;
    border-radius: 50%;
    border: 9px solid var(--panel-3);
    display: grid;
    place-items: center
}

.gauge span {
    font-size: 30px;
    font-weight: 800
}

.gauge small {
    font-size: 9px;
    display: block;
    text-align: center;
    color: var(--text-muted)
}

.risk-hero h3 {
    margin: 5px 0 10px
}

.domain {
    position: relative;
    overflow: hidden;
    padding: 15px
}

.domain:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), transparent)
}

.green {
    --accent: var(--green)
}

.blue {
    --accent: var(--blue)
}

.amber {
    --accent: var(--amber)
}

.purple {
    --accent: var(--purple)
}

.domain .metric {
    font-size: 28px;
    font-weight: 800;
    margin-top: 15px;
    line-height: 1
}

.domain p {
    color: var(--text-muted);
    font-size: 10px
}

.card-foot {
    display: block;
    border-top: 1px solid var(--border);
    padding-top: 9px;
    margin-top: 14px;
    font-size: 9px
}

.chip {
    font-size: 9px;
    display: inline-flex;
    padding: 3px 7px;
    border-radius: 5px;
    border: 1px solid var(--border-soft);
    font-weight: 600;
    letter-spacing: 0;
    vertical-align: middle;
    white-space: nowrap
}

.chip.info {
    color: var(--blue);
    background: color-mix(in srgb, var(--blue) 8%, transparent);
    border-color: color-mix(in srgb, var(--blue) 25%, transparent)
}

.chip.ok {
    color: var(--green);
    background: color-mix(in srgb, var(--green) 8%, transparent);
    border-color: color-mix(in srgb, var(--green) 25%, transparent)
}

.chip.warn {
    color: var(--amber);
    background: color-mix(in srgb, var(--amber) 8%, transparent);
    border-color: color-mix(in srgb, var(--amber) 25%, transparent)
}

.chip.neutral {
    color: var(--text-muted);
    background: var(--panel-2)
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px
}

.kpi {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--text);
    padding: 14px
}

.kpi strong {
    font-size: 25px;
    line-height: 1.2
}

.amber-text {
    color: var(--amber)
}

.tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 15px;
    overflow: auto
}

.tabs button,
.tabs a {
    white-space: nowrap;
    border-radius: 7px;
    background: var(--panel-2);
    color: var(--text-muted);
    padding: 9px 17px;
    border: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600
}

.tabs .active {
    color: white;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: transparent
}

.overview-grid {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 16px;
    margin-bottom: 20px
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px
}

.section-heading a {
    font-size: 10px
}

.section-heading .chip {
    font-size: 8px
}

.coverage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    min-height: 190px
}

.coverage-center {
    width: 140px;
    height: 140px;
    border: 10px solid var(--panel-3);
    border-top-color: var(--teal);
    border-right-color: var(--blue);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.coverage-center strong {
    font-size: 32px
}

.coverage-center>span:last-child {
    font-size: 10px;
    color: var(--text-muted)
}

.coverage-legend {
    flex: 1;
    max-width: 220px
}

.coverage-legend p {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    border-bottom: 1px solid var(--border);
    padding: 8px 0
}

.coverage-legend strong {
    margin-left: auto;
    font-size: 10px;
    font-weight: 500
}

.dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 5px
}

.green-bg {
    background: var(--green)
}

.blue-bg {
    background: var(--blue)
}

.amber-bg {
    background: var(--amber)
}

.purple-bg {
    background: var(--purple)
}

.empty {
    text-align: center;
    padding: 35px 20px;
    color: var(--text-muted)
}

.empty h3 {
    color: var(--text);
    margin: 10px 0
}

.empty p {
    font-size: 12px;
    max-width: 440px;
    margin: 10px auto 18px
}

.empty-icon {
    font-size: 30px;
    color: var(--teal);
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    background: color-mix(in srgb, var(--teal) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--teal) 25%, transparent);
    border-radius: 15px
}

.alert-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    color: var(--text)
}

.alert-symbol {
    background: color-mix(in srgb, var(--amber) 10%, transparent);
    color: var(--amber);
    border-radius: 5px;
    padding: 3px 9px
}

.alert-row small {
    display: block;
    color: var(--text-muted);
    font-size: 10px
}

.alert-row>span:last-child {
    margin-left: auto;
    font-size: 10px
}

.table-scroll {
    overflow: auto
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left
}

th {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap
}

th,
td {
    padding: 13px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 11px
}

tbody tr:hover {
    background: var(--panel-2)
}

td.row-actions {
    white-space: nowrap
}

td.row-actions a {
    margin-right: 12px
}

.search-form {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px
}

.search-form input {
    max-width: 400px
}

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    font-size: 11px
}

.action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px
}

.subcard {
    padding: 24px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
}

.field label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-soft);
    font-size: 11px
}

.field small {
    display: block;
    margin-top: 7px
}

input,
textarea,
select {
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    border-radius: 7px;
    padding: 9px 11px;
    color: var(--text);
    width: 100%;
    min-width: 0
}

input[type=checkbox] {
    width: auto
}

input:focus,
textarea:focus,
select:focus {
    outline: 1px solid var(--blue)
}

.required {
    color: var(--blue)
}

.form-actions {
    margin-top: 25px;
    border-top: 1px solid var(--border);
    padding-top: 20px;
    display: flex;
    gap: 10px
}

.errorlist {
    color: #f87171;
    padding-left: 16px;
    font-size: 11px
}

.message {
    padding: 12px 16px;
    border: 1px solid var(--border-soft);
    background: var(--panel-2);
    border-radius: 7px;
    font-size: 12px;
    margin-bottom: 15px
}

.message.success {
    border-color: var(--green)
}

.message.error {
    border-color: #f87171
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.details-grid dt {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 6px
}

.details-grid dd {
    margin: 0;
    font-size: 12px;
    overflow-wrap: anywhere
}

.iframe-card {
    padding: 0;
    overflow: hidden
}

footer {
    padding: 18px 24px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 10px;
    display: flex;
    justify-content: space-between
}

dialog {
    width: min(1100px, 92vw);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: var(--panel);
    color: var(--text);
    padding: 25px
}

dialog::backdrop {
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(5px)
}

.auth-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: radial-gradient(ellipse at top, rgba(37, 99, 235, .12), transparent 60%), var(--bg);
    padding: 30px
}

.auth-card.onboarding-card {
  width: min(1000px, 100%);
  max-width: 1000px;
}

.auth-card {
    width: min(480px, 100%);
    padding: 35px
}

.auth-card .brand {
    display: block;
    padding: 0 0 25px
}

.auth-card form p {
    margin: 16px 0
}

.auth-card label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px
}

.auth-card .button {
    width: 100%;
    margin-top: 10px
}

.auth-card .registration-errors ul,
.auth-card ul.errorlist {
    color: #f87171;
    font-size: 13px;
}

.auth-card ul {
    font-size: 11px;
    color: var(--text-muted);
    padding-left: 18px
}

.auth-links {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    margin-top: 22px
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px
}

::-webkit-scrollbar-thumb {
    background: var(--border-soft);
    border-radius: 6px
}

[hidden] {
    display: none !important
}

@media(min-width:1700px) {
    .risk-grid {
        grid-template-columns: 2fr repeat(4, 1fr)
    }
}

@media(max-width:1300px) {
    .risk-grid {
        grid-template-columns: repeat(4, 1fr)
    }

    .risk-hero {
        grid-column: 1/-1
    }

    .coverage {
        gap: 15px
    }

    .coverage-center {
        width: 110px;
        height: 110px;
        flex-shrink: 0
    }

    .form-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:1000px) {
    .sidebar {
        transform: translateX(-100%)
    }

    .sidebar.open {
        transform: translateX(0)
    }

    .app {
        margin-left: 0
    }

    .header-main>.icon-button {
        display: block
    }

    .overview-grid {
        grid-template-columns: 1fr
    }

    .page-heading {
        align-items: flex-start
    }

    .details-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:650px) {
    main {
        padding: 15px
    }

    .header-main {
        padding: 12px
    }

    .context-bar {
        padding: 8px 12px
    }

    .header-actions {
        gap: 7px
    }

    .segmented {
        display: none
    }

    .header-main .eyebrow {
        font-size: 7px
    }

    .header-main>div>strong {
        font-size: 12px
    }

    .page-heading {
        flex-direction: column
    }

    .risk-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .kpi-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .kpi-grid .kpi:last-child {
        grid-column: 1/-1
    }

    .form-grid,
    .details-grid,
    .action-grid {
        grid-template-columns: 1fr
    }

    .context-bar>span:last-child {
        display: none
    }

    .pagination {
        align-items: flex-start;
        gap: 12px;
        flex-direction: column
    }

    footer span {
        display: none
    }

    h1 {
        font-size: 22px
    }
}

@media print {

    .sidebar,
    .header-actions,
    .toolbar,
    .tabs,
    footer {
        display: none
    }

    .app {
        margin: 0
    }

    .card {
        break-inside: avoid
    }

    body {
        background: white;
        color: black
    }

    .risk-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

.area-brand img { width: 100%; height: 90px; object-fit: contain; background: white; border-radius: 10px; }
.area-intro { display: flex; align-items: center; gap: 24px; }
.area-intro img { object-fit: contain; background: white; border-radius: 12px; }
a.domain:hover, a.domain:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-width: 650px) { .area-intro { flex-direction: column; align-items: flex-start; } }

#assistant-dialog { width: min(1200px, 96vw); max-width:96vw; max-height:96dvh; padding:16px; }
#assistant-dialog .section-heading { margin-bottom:10px; }
.assistant-frame { display:block; width:100%; height:min(740px, calc(94dvh - 100px)); border:0; border-radius:10px; background:var(--panel); }
@media(max-width:600px) { #assistant-dialog { padding:8px; } .assistant-frame { height:calc(94dvh - 85px); } }

/* Employee detail: legacy profile/document layout with SEE themes. */
.employee-layout { display:grid; grid-template-columns:minmax(270px, .85fr) minmax(0, 2fr); gap:24px; align-items:start; }
.employee-summary, .employee-documents { display:grid; gap:20px; min-width:0; }
.employee-layout .card { margin:0; min-width:0; }
.employee-profile h2, .employee-profile > p { text-align:center; overflow-wrap:anywhere; }
.employee-avatar { margin:0 auto 16px; display:grid; place-items:center; width:72px; height:72px; border-radius:20px; background:var(--panel-2); color:var(--blue); font-size:24px; font-weight:700; }
.employee-facts { margin:16px 0; display:grid; gap:12px; }
.employee-facts > div { display:grid; gap:4px; border-bottom:1px solid var(--border-soft); padding-bottom:10px; }
.employee-facts dt { color:var(--text-muted); font-size:12px; }
.employee-facts dd { margin:0; overflow-wrap:anywhere; }
.employee-profile summary { cursor:pointer; color:var(--blue); padding:12px 0; }
.employee-tabs, .employee-history-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.employee-history-actions form { margin:0; }
.employee-pdf { display:block; border:1px solid var(--border); border-radius:10px; width:100%; height:670px; background:var(--panel-2); }
.employee-empty { min-height:300px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:24px; }
.certificate-progress { width:100%; height:9px; accent-color:var(--green); }
.certificate-alert { padding:12px; border:1px solid var(--amber); border-radius:8px; color:var(--amber); }
.certificate-selected { background:var(--panel-2); }
.employee-layout .section-heading { gap:12px; flex-wrap:wrap; }
.employee-layout .section-heading h2 { font-size:16px; }
.employee-layout .table-wrap { overflow-x:auto; }
@media(max-width:1050px) { .employee-layout { grid-template-columns:1fr; } .employee-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .employee-summary { grid-template-columns:1fr; } .employee-pdf { height:480px; } }

/* Dedicated Certificates iframe: labels, controls and review fields never overlap. */
/* JAICA Certificates: upload cards, compact register and explicit review dialog. */
.certificates-workspace { --accent:var(--blue); padding:24px; min-width:0; }
.certificate-upload-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.certificate-upload-card { padding:24px; min-width:0; }
.certificate-upload-card h2 { margin:12px 0 6px; font-size:18px; }
.certificate-type-icon { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px; background:var(--panel-2); color:var(--green); font-size:25px; }
.certificate-type-icon.training { color:var(--accent); }
.certificate-upload-form, #certificate-upload { display:grid; gap:16px; margin:18px 0 0; }
.certificate-type-icon svg { width:27px; height:27px; }
.certificate-drop-zone { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:210px; padding:24px 16px; border:2px dashed var(--border-soft); border-radius:12px; background:var(--panel-2); font-size:13px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s; }
.certificate-drop-zone:hover, .certificate-drop-zone.dragging, .certificate-drop-zone:focus-within { border-color:var(--accent); background:var(--panel); }
.certificate-drop-zone:focus-within { outline:2px solid var(--accent); outline-offset:3px; }
.certificate-drop-zone > span, .certificate-drop-zone > strong, .certificate-drop-zone > small { pointer-events:none; }
.certificate-upload-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:14px; color:var(--accent); background:var(--panel); margin-bottom:4px; }
.certificate-upload-icon svg { width:32px; height:32px; }
.certificate-browse-link { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.certificate-drop-zone input[type=file] { position:absolute; inset:0; width:100%; height:100%; min-width:0; margin:0; padding:0; opacity:0; cursor:pointer; z-index:1; }
.certificate-drop-zone:has(input:disabled) { opacity:.55; cursor:wait; }
.certificate-drop-zone input:disabled { cursor:wait; }
.certificate-file-selection { font-size:12px; color:var(--text-muted); min-width:0; overflow-wrap:anywhere; }
.certificate-file-selection ul { margin:8px 0 0; padding-left:18px; max-height:100px; overflow:auto; }
.certificate-upload-form .button { justify-self:start; }
.certificate-upload-note { margin:16px 0 8px; line-height:1.6; }
.certificate-register { padding:0; overflow:hidden; margin-top:24px; }
.certificate-toolbar, .certificate-pagination { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; padding:20px 24px; }
.certificate-toolbar h2 { margin:0 0 6px; font-size:18px; }
.certificate-toolbar p { margin:0; }
.certificate-list-controls { display:flex; align-items:end; flex-wrap:wrap; gap:14px; }
#certificate-page-size { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
#certificate-page-size label { font-size:12px; }
#certificate-page-size select { width:76px; min-height:38px; margin:0; }
#certificate-page-size #status-filter { width:auto; max-width:100%; }
.certificate-table-wrap { overflow-x:auto; }
.certificate-table { width:100%; border-collapse:collapse; }
.certificate-table th { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); background:var(--panel-2); text-align:left; }
.certificate-table th, .certificate-table td { padding:16px 20px; border-bottom:1px solid var(--border-soft); }
.certificate-table td { font-size:12px; }
.certificate-name { min-width:160px; max-width:320px; overflow-wrap:anywhere; font-weight:600; }
.certificate-actions { display:flex; gap:8px; flex-wrap:wrap; min-width:130px; }
.certificates-workspace [hidden] { display:none !important; }
.job-status { display:inline-block; padding:6px 9px; border-radius:6px; background:var(--panel-2); }
[data-state=review] .job-status { color:var(--amber); }
[data-state=error] .job-status, .certificate-field-error { color:#f87171; }
[data-state=imported] .job-status, [data-state=unmatched] .job-status { color:var(--green); }
.certificate-empty { text-align:center; padding:40px !important; }
.certificate-pagination nav { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.certificate-pagination .button { min-width:36px; justify-content:center; }
#certificate-review-dialog { width:min(1240px,96vw); max-width:96vw; max-height:94dvh; padding:24px; overflow:auto; }
.certificate-review-heading { display:flex; justify-content:space-between; align-items:start; gap:16px; }
.certificate-review-heading h2 { margin:6px 0; }
#review-document-name { overflow-wrap:anywhere; }
#review-status, #review-fiscal-suggestion { padding:12px; border-radius:8px; }
#review-status { background:var(--panel-2); }
#review-fiscal-suggestion { background:#fef3c7; color:#713f12; overflow-wrap:anywhere; }
.certificate-copy-link { appearance:none; display:inline; border:0; padding:2px 4px; margin-left:4px; background:transparent; color:inherit; font:inherit; font-weight:600; text-decoration:underline; cursor:pointer; }
.certificate-copy-link:focus-visible { outline:2px solid currentColor; outline-offset:2px; border-radius:3px; }
.certificate-copy-link:disabled { opacity:.6; cursor:wait; }
.certificate-copy-buffer { position:fixed; top:0; left:0; width:1px; height:1px; padding:0; opacity:0; pointer-events:none; }
.certificate-review-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.certificate-saving { position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:18px; padding:18px; margin:12px 0; border:1px solid var(--blue); border-radius:12px; background:var(--panel-2); box-shadow:0 8px 24px #0002; }
.certificate-saving strong { display:block; font-size:15px; }
.certificate-saving p { margin:5px 0 0; color:var(--text-muted); font-size:13px; line-height:1.5; }
.certificate-saving-brand { position:relative; display:grid; place-items:center; flex:0 0 64px; height:64px; border-radius:50%; background:#fff; }
.certificate-saving-brand img { object-fit:contain; }
.certificate-saving-brand::after { content:""; position:absolute; inset:-3px; border:3px solid transparent; border-top-color:var(--blue); border-right-color:var(--blue); border-radius:50%; animation:certificate-saving-spin 1s linear infinite; }
@keyframes certificate-saving-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .certificate-saving-brand::after { animation:none; } }
.certificate-review-preview iframe { width:100%; height:65vh; min-height:320px; border:1px solid var(--border); border-radius:8px; background:white; }
.certificate-review-preview .button { margin-top:10px; }
.certificate-review-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.certificate-review-fields .field { min-width:0; display:flex; flex-direction:column; gap:7px; }
.certificate-review-fields label { font-size:12px; }
.certificate-review-fields input, .certificate-review-fields textarea { margin:0; width:100%; }
.certificate-review-fields [aria-invalid=true] { border-color:#f87171; }
@media(max-width:900px) { .certificate-review-layout { grid-template-columns:1fr; } .certificate-review-preview iframe { height:40vh; } }
@media(max-width:650px) {
 .certificates-workspace { padding:16px; }
 .certificate-upload-cards, .certificate-review-fields { grid-template-columns:1fr; }
 .certificate-upload-card, .certificate-toolbar, .certificate-pagination { padding:16px; }
 .certificate-list-controls, #certificate-page-size { width:100%; }
 #certificate-review-dialog { padding:16px; }
}

.certificate-table-feedback { min-height:18px; margin:0; padding:0 24px 8px; font-size:12px; }

/* Language names remain readable on Windows, where flag emoji are not reliable. */
.language-picker {display:flex;align-items:center;gap:7px;margin:0;min-width:0}
.language-picker select {margin:0;width:auto;max-width:118px;padding:7px 24px 7px 8px;font-size:12px}
.language-flag {display:inline-block;width:22px;height:15px;border-radius:2px;box-shadow:0 0 0 1px var(--border);flex-shrink:0;background-size:cover;background-position:center}
.language-flag[data-language-flag="it"] {background:linear-gradient(90deg,#009246 33.33%,#fff 33.33%,#fff 66.66%,#ce2b37 66.66%)}
.language-flag[data-language-flag="fr"] {background:linear-gradient(90deg,#002395 33.33%,#fff 33.33%,#fff 66.66%,#ed2939 66.66%)}
.language-flag[data-language-flag="de"] {background:linear-gradient(#111 33.33%,#dd0000 33.33%,#dd0000 66.66%,#ffce00 66.66%)}
.language-flag[data-language-flag="es"] {background:linear-gradient(#aa151b 25%,#f1bf00 25%,#f1bf00 75%,#aa151b 75%)}
.language-flag[data-language-flag="pt"] {background:linear-gradient(90deg,#006600 40%,#ff0000 40%)}
.language-flag[data-language-flag="en"] {background-image:url("flags/en.svg")}
@media(max-width:750px){.header-actions{flex-wrap:wrap}.language-picker select{max-width:108px}.header-main{flex-wrap:wrap}}

.language-picker{position:relative}
.language-trigger{display:flex;align-items:center;gap:7px;padding:7px 10px;font-size:12px;white-space:nowrap;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:8px}
.language-options{position:absolute;z-index:100;top:calc(100% + 6px);right:0;min-width:170px;list-style:none;margin:0;padding:6px;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 28px #0003}
.language-options[hidden]{display:none}
.language-options [role=option]{display:flex;align-items:center;gap:10px;padding:10px;border-radius:6px;cursor:pointer;font-size:13px;white-space:nowrap}
.language-options [role=option]:hover,.language-options [role=option]:focus{outline:2px solid var(--blue);outline-offset:-2px;background:var(--panel-2)}
.language-options [aria-selected=true]{font-weight:700;color:var(--blue)}

/* A subtle blue surface also on dark navigation backgrounds. */
.dark .sidebar .workspace { background: #20343f; }