:root {
    --navy: #0b2f50;
    --blue: #155c91;
    --light-blue: #e8f2f8;
    --gold: #d6a72f;
    --text: #17212b;
    --muted: #667484;
    --border: #d8e1e8;
    --surface: #ffffff;
    --background: #f3f6f8;
    --success: #16845b;
    --warning: #b7791f;
    --danger: #b42318;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--text);
    background: var(--background);
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: var(--blue);
}

.app-header {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 5%;
    color: #fff;
    background: linear-gradient(135deg, var(--navy), var(--blue));
}

.app-header h1 {
    margin: 4px 0 0;
    font-size: 30px;
}

.app-kicker {
    color: #cde5f4;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.header-actions,
.form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 17px;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.button.primary {
    color: #fff;
    background: var(--blue);
}

.app-header .button.primary {
    color: var(--navy);
    background: #fff;
}

.button.secondary {
    color: var(--navy);
    background: #eaf1f6;
}

.register-shell,
.form-shell {
    width: min(1180px, 92%);
    margin: 34px auto;
}

.empty-state {
    max-width: 650px;
    margin: 70px auto;
    padding: 48px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(11, 47, 80, .08);
}

.empty-icon {
    width: 80px;
    height: 80px;
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
    color: #fff;
    background: var(--blue);
    border-radius: 18px;
    font-size: 26px;
    font-weight: 800;
}

.register-summary {
    margin-bottom: 16px;
    color: var(--muted);
}

.employee-table-wrap {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.employee-table {
    width: 100%;
    border-collapse: collapse;
}

.employee-table th,
.employee-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.employee-table th {
    color: #445261;
    background: #f7f9fb;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.employee-table td strong,
.employee-table td span {
    display: block;
}

.employee-table td span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 13px;
}

.table-photo {
    width: 48px;
    height: 58px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.table-actions {
    white-space: nowrap;
}

.table-actions a {
    margin-right: 10px;
    font-size: 13px;
    font-weight: 700;
}

.status-pill,
.card-status {
    display: inline-block !important;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px !important;
    font-weight: 800;
}

.success {
    color: #086344;
    background: #dff5eb;
}

.warning {
    color: #8a5408;
    background: #fff0c8;
}

.danger {
    color: #8d1710;
    background: #fde7e5;
}

.secondary {
    color: #4b5563;
    background: #edf0f2;
}

.employee-form {
    padding: 30px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 14px 38px rgba(11, 47, 80, .07);
}

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

.employee-form label {
    display: grid;
    gap: 7px;
    font-weight: 700;
}

.employee-form label span {
    font-size: 13px;
}

.employee-form input,
.employee-form select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    color: var(--text);
    background: #fff;
    border: 1px solid #bfcbd5;
    border-radius: 7px;
    font: inherit;
}

.full-width {
    grid-column: 1 / -1;
}

.existing-photo {
    width: 110px;
    height: 135px;
    object-fit: cover;
    margin-top: 24px;
    border-radius: 8px;
}

.form-actions {
    justify-content: flex-end;
    margin-top: 28px;
}

.card-page {
    display: flex;
    gap: 28px;
    justify-content: center;
    align-items: flex-start;
    padding: 42px 20px;
    flex-wrap: wrap;
}

.id-card {
    width: 85.6mm;
    height: 54mm;
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 3mm;
    box-shadow: 0 16px 36px rgba(11, 47, 80, .2);
}

.id-front {
    color: var(--text);
    border: .35mm solid #cfd9e1;
}

.id-front::after {
    content: "";
    position: absolute;
    right: -16mm;
    bottom: -25mm;
    width: 60mm;
    height: 60mm;
    border: 8mm solid rgba(21, 92, 145, .08);
    border-radius: 50%;
}

.card-top {
    height: 13mm;
    display: flex;
    align-items: center;
    gap: 3mm;
    padding: 2.4mm 4mm;
    color: #fff;
    background: linear-gradient(135deg, var(--navy), var(--blue));
}

.card-logo {
    width: 9mm;
    height: 9mm;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--navy);
    background: #fff;
    border-radius: 2mm;
    font-size: 3.6mm;
    font-weight: 900;
}

.company-name {
    font-size: 4.2mm;
    font-weight: 900;
    letter-spacing: .04em;
}

.company-subtitle {
    margin-top: .3mm;
    color: #cfe4f1;
    font-size: 2.3mm;
    letter-spacing: .18em;
}

.card-body {
    display: grid;
    grid-template-columns: 23mm 1fr;
    gap: 3.5mm;
    padding: 3.4mm 4mm 2.2mm;
}

.photo-frame {
    width: 23mm;
    height: 29mm;
    overflow: hidden;
    background: #e9eef2;
    border: .35mm solid #b7c5cf;
    border-radius: 1.5mm;
}

.photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #8493a1;
    font-size: 2.5mm;
    font-weight: 800;
}

.employee-card-details {
    min-width: 0;
    position: relative;
    z-index: 1;
}

.card-label {
    display: block;
    margin-bottom: .5mm;
    color: #647482;
    font-size: 1.8mm;
    font-weight: 800;
    letter-spacing: .08em;
}

.employee-card-details h2 {
    margin: 0 0 2.2mm;
    overflow: hidden;
    color: var(--navy);
    font-size: 4.3mm;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-role {
    margin: 0 0 2.7mm;
    font-size: 3mm;
    font-weight: 700;
}

.card-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.8mm 3mm;
    font-size: 2.5mm;
}

.card-data-grid strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-footer {
    height: 7.5mm;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4mm;
    color: #fff;
    background: var(--navy);
    font-size: 2.2mm;
    font-weight: 800;
    letter-spacing: .08em;
}

.id-back {
    padding: 4mm;
    color: #fff;
    background:
        linear-gradient(rgba(11, 47, 80, .97), rgba(21, 92, 145, .97));
}

.back-heading {
    display: flex;
    align-items: center;
    gap: 3mm;
}

.back-heading h2 {
    margin: 0;
    font-size: 4mm;
}

.qr-area {
    display: grid;
    grid-template-columns: 24mm 1fr;
    gap: 4mm;
    align-items: center;
    margin-top: 4mm;
}

.qr-area img {
    width: 24mm;
    height: 24mm;
    padding: 1.5mm;
    background: #fff;
    border-radius: 2mm;
}

.qr-area h3 {
    margin: 0 0 1.5mm;
    color: #fff;
    font-size: 4mm;
}

.qr-area p,
.instructions p {
    margin: 0;
    color: #d9e8f2;
    font-size: 2.35mm;
    line-height: 1.35;
}

.instructions {
    margin-top: 3mm;
}

.instructions p + p {
    margin-top: 1.2mm;
}

.back-contact {
    position: absolute;
    right: 4mm;
    bottom: 3mm;
    left: 4mm;
    display: flex;
    justify-content: space-between;
    padding-top: 2mm;
    border-top: .3mm solid rgba(255, 255, 255, .28);
    color: #fff;
    font-size: 2.1mm;
    font-weight: 700;
}

.test-link {
    width: min(900px, 92%);
    margin: 0 auto 40px;
    padding: 14px;
    overflow-wrap: anywhere;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
}

.verification-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at top, #eaf4fa, transparent 45%),
        #eef2f5;
}

.verification-card {
    width: min(470px, 100%);
    padding: 36px;
    text-align: center;
    background: #fff;
    border-top: 8px solid var(--success);
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(11, 47, 80, .16);
}

.verification-card.warning {
    border-top-color: var(--warning);
}

.verification-card.danger,
.verification-card.invalid {
    border-top-color: var(--danger);
}

.company-mark {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    color: #fff;
    background: var(--navy);
    border-radius: 16px;
    font-size: 21px;
    font-weight: 900;
}

.eyebrow {
    margin: 0 0 5px;
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.verification-card h1 {
    margin: 0 0 25px;
    font-size: 25px;
}

.verification-photo {
    width: 126px;
    height: 154px;
    object-fit: cover;
    border: 4px solid #fff;
    border-radius: 12px;
    box-shadow: 0 8px 26px rgba(11, 47, 80, .18);
}

.verification-card h2 {
    margin: 20px 0 5px;
    color: var(--navy);
}

.verification-role {
    margin: 0 0 24px;
    color: var(--muted);
    font-weight: 700;
}

.verification-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0 0 22px;
}

.verification-details div {
    padding: 12px 7px;
    background: #f5f8fa;
    border-radius: 8px;
}

.verification-details dt {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.verification-details dd {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 800;
}

.status-banner {
    padding: 13px;
    border-radius: 9px;
    font-weight: 900;
    letter-spacing: .1em;
}

.verification-time {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.verification-icon {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    margin: 0 auto 22px;
    color: #fff;
    background: var(--danger);
    border-radius: 50%;
    font-size: 35px;
    font-weight: 900;
}

@media (max-width: 700px) {
    .app-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .full-width {
        grid-column: auto;
    }

    .verification-details {
        grid-template-columns: 1fr;
    }
}

@media print {
    @page {
        size: A4 landscape;
        margin: 12mm;
    }

    body {
        background: #fff;
    }

    .no-print {
        display: none !important;
    }

    .card-page {
        gap: 15mm;
        padding: 0;
    }

    .id-card {
        box-shadow: none;
        break-inside: avoid;
    }
}

/* Urgent ID layout corrections */
.id-card {
    position: relative;
}

.id-front .card-top {
    height: 12mm;
    padding-top: 2mm;
    padding-bottom: 2mm;
}

.id-front .card-body {
    height: 34.5mm;
    padding: 2.5mm 4mm 8mm;
}

.id-front .photo-frame {
    height: 27mm;
}

.id-front .card-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 7.5mm;
    z-index: 5;
}

.id-front::after {
    z-index: 0;
}

.id-back {
    padding-bottom: 9mm;
}

.id-back .qr-area {
    margin-top: 3mm;
}

.id-back .qr-area img {
    width: 27mm;
    height: 27mm;
    padding: 2mm;
}

.id-back .instructions {
    margin-top: 2mm;
}

.id-back .instructions p {
    font-size: 2.05mm;
    line-height: 1.25;
}

.id-back .back-contact {
    background: rgba(11, 47, 80, .95);
    z-index: 5;
}

@media print {
    .id-front .card-footer {
        position: absolute;
    }
}

/* Urgent back-card spacing correction */
.id-back {
    padding-bottom: 10mm;
}

.id-back .instructions {
    margin-top: 1.5mm;
}

.id-back .instructions p {
    font-size: 1.8mm;
    line-height: 1.15;
}

.id-back .back-contact {
    height: 6.5mm;
    align-items: center;
    padding: 0 4mm;
    background: #0b3f68;
    z-index: 10;
}


/* =========================================================
   Clean Jannet ID card rebuild
   ========================================================= */

.current-jannet-front,
.current-jannet-back {
    width: 85.6mm;
    height: 54mm;
    position: relative;
    overflow: hidden;
    border-radius: 2.5mm;
    box-shadow: 0 14px 34px rgba(11, 47, 80, 0.18);
}

.current-jannet-front {
    color: #12324a;
    background: #ffffff;
    border: 0.65mm solid #1498d0;
}

.current-id-header {
    height: 15mm;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.4mm 4mm 0.8mm;
    background: #ffffff;
    border-bottom: 1.2mm solid #1498d0;
}

.current-id-logo {
    display: block;
    width: 50mm;
    max-height: 9mm;
    margin: 0 auto;
    object-fit: contain;
}

.current-id-phone {
    margin-top: 0.2mm;
    color: #163d61;
    font-size: 2.8mm;
    font-weight: 900;
    text-align: center;
    letter-spacing: 0.03em;
}

.current-id-main {
    height: 33mm;
    display: grid;
    grid-template-columns: 1fr 24mm;
    gap: 3mm;
    padding: 2.2mm 3mm 2mm;
}

.current-id-information {
    min-width: 0;
}

.current-id-name {
    padding-bottom: 0.8mm;
    color: #123f6d;
    border-bottom: 0.55mm solid #1498d0;
    font-size: 4.8mm;
    font-weight: 900;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.current-id-role {
    margin-top: 1.2mm;
    color: #2e6a31;
    font-size: 3.1mm;
    font-weight: 900;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.current-id-reference {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2mm;
    margin-top: 2mm;
    padding: 1.1mm 1.8mm;
    background: #ffffff;
    border: 0.4mm solid #b8deec;
    border-radius: 1.8mm;
    font-size: 2.3mm;
}

.current-id-reference span,
.current-id-dates span {
    color: #174f75;
    font-weight: 800;
}

.current-id-reference strong {
    color: #195f3a;
    font-size: 2.9mm;
}

.current-id-dates {
    margin-top: 1.3mm;
    padding: 1.1mm 1.8mm;
    background: #ffffff;
    border: 0.4mm solid #b8deec;
    border-radius: 1.8mm;
}

.current-id-dates > div {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2mm;
    font-size: 2.25mm;
}

.current-id-dates > div + div {
    margin-top: 0.9mm;
}

.current-id-dates strong {
    color: #195f3a;
    font-size: 2.8mm;
}

.current-id-photo {
    width: 24mm;
    height: 29mm;
    overflow: hidden;
    align-self: center;
    background: #e8f3f8;
    border: 0.55mm solid #1498d0;
    border-radius: 1.2mm;
}

.current-id-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.current-id-footer {
    position: absolute;
    right: 2.5mm;
    bottom: 1.4mm;
    left: 2.5mm;
    height: 4.7mm;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #174f75;
    background: #ffffff;
    border: 0.4mm solid #b8deec;
    border-radius: 1.5mm;
    font-size: 1.85mm;
    font-weight: 700;
    white-space: nowrap;
}

/* Back */

.current-jannet-back {
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            #0b4f80 0%,
            #1186bc 55%,
            #0a5f93 100%
        );
    border: 0.65mm solid #0a5f93;
}

.current-back-header {
    height: 12.5mm;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5mm 4mm 1mm;
    background: #ffffff;
    border-bottom: 0.8mm solid rgba(255, 255, 255, 0.5);
}

.current-back-logo {
    width: 48mm;
    max-height: 9mm;
    object-fit: contain;
}

.current-back-content {
    display: grid;
    grid-template-columns: 28mm 1fr;
    gap: 4mm;
    align-items: center;
    padding: 2.8mm 4mm 0;
}

.current-back-qr img {
    width: 28mm;
    height: 28mm;
    display: block;
    padding: 2.2mm;
    background: #ffffff;
    border: 0.45mm solid #d5eef7;
    border-radius: 1.6mm;
}

.current-back-message h2 {
    margin: 0 0 1.6mm;
    color: #ffffff;
    font-size: 3.5mm;
    text-transform: uppercase;
}

.current-back-message h3 {
    margin: 0 0 1mm;
    color: #ffffff;
    font-size: 3.8mm;
}

.current-back-message p {
    margin: 0;
    color: #e8f7fc;
    font-size: 2.1mm;
    line-height: 1.25;
}

.current-back-notice {
    margin: 2mm 4mm 0;
    padding-top: 1.5mm;
    border-top: 0.35mm solid rgba(255, 255, 255, 0.55);
}

.current-back-notice p {
    margin: 0;
    color: #ffffff;
    font-size: 1.75mm;
    line-height: 1.2;
}

.current-back-notice p + p {
    margin-top: 0.7mm;
}

.current-back-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 6.5mm;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4mm;
    color: #ffffff;
    background: #08496f;
    border-top: 0.45mm solid rgba(255, 255, 255, 0.7);
    font-size: 2.2mm;
    font-weight: 900;
}

@media print {
    .current-jannet-front,
    .current-jannet-back {
        box-shadow: none;
    }
}


/* =========================================================
   Jannet ID typography enhancement
   ========================================================= */

.current-jannet-front,
.current-jannet-back {
    font-family:
        "Eras Medium ITC",
        "Trebuchet MS",
        Arial,
        sans-serif;
}

.current-id-name,
.current-id-role,
.current-back-message h2,
.current-back-message h3,
.current-id-phone,
.current-back-footer {
    font-family:
        "Eras Bold ITC",
        "Eras Medium ITC",
        "Trebuchet MS",
        Arial,
        sans-serif;
}

.current-id-name {
    font-size: 5.2mm;
    letter-spacing: 0.01em;
}

.current-id-role {
    font-size: 3.25mm;
    letter-spacing: 0.025em;
}

.current-id-reference,
.current-id-dates {
    font-family:
        "Eras Medium ITC",
        "Trebuchet MS",
        Arial,
        sans-serif;
}

.current-id-reference span,
.current-id-dates span {
    font-family:
        "Eras Bold ITC",
        "Eras Medium ITC",
        "Trebuchet MS",
        Arial,
        sans-serif;
}

.current-id-reference strong,
.current-id-dates strong {
    font-family:
        "Eras Bold ITC",
        "Eras Medium ITC",
        "Trebuchet MS",
        Arial,
        sans-serif;
}

.current-id-footer {
    font-family:
        "Eras Medium ITC",
        "Trebuchet MS",
        Arial,
        sans-serif;
    letter-spacing: 0.025em;
}

.current-back-message h2 {
    font-size: 3.6mm;
    letter-spacing: 0.025em;
}

.current-back-message h3 {
    font-size: 4mm;
    letter-spacing: 0.02em;
}


/* =========================================================
   Premium Jannet ID visual refinement
   ========================================================= */

.current-jannet-front,
.current-jannet-back {
    border-radius: 3mm;
    box-shadow: 0 16px 38px rgba(10, 63, 105, 0.20);
}

/* ---------- FRONT ---------- */

.current-jannet-front {
    background:
        radial-gradient(
            circle at 82% 30%,
            rgba(24, 151, 207, 0.12) 0,
            rgba(24, 151, 207, 0.05) 22%,
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 78%,
            #eef9fd 100%
        );
    border: 0.55mm solid #168fc8;
}

.current-id-header {
    position: relative;
    height: 14.5mm;
    padding: 1.2mm 4mm 0.8mm;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7fcff 70%,
            #e9f7fd 100%
        );
    border-bottom: 0.8mm solid #1598d0;
}

.current-id-header::before {
    content: "";
    position: absolute;
    top: -19mm;
    right: -4mm;
    width: 44mm;
    height: 30mm;
    border: 2.2mm solid rgba(24, 151, 207, 0.12);
    border-radius: 50%;
    transform: rotate(-8deg);
}

.current-id-logo {
    position: relative;
    z-index: 2;
    width: 54mm;
    max-height: 8.8mm;
}

.current-id-phone {
    position: relative;
    z-index: 2;
    margin-top: 0;
    color: #173f63;
    font-size: 2.65mm;
    letter-spacing: 0.06em;
}

.current-id-main {
    height: 32.8mm;
    grid-template-columns: 1fr 25mm;
    gap: 3.2mm;
    padding: 2.4mm 3.2mm 2mm;
}

.current-id-name {
    padding-bottom: 0.9mm;
    color: #103f6f;
    border-bottom: 0.55mm solid #1598d0;
    font-size: 5.2mm;
    font-weight: 900;
    text-shadow: 0 0.15mm 0 rgba(16, 63, 111, 0.15);
}

.current-id-role {
    margin-top: 1.3mm;
    margin-bottom: 1.6mm;
    color: #24703a;
    font-size: 3.15mm;
    letter-spacing: 0.035em;
}

.current-id-reference,
.current-id-dates {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(242, 250, 253, 0.98)
        );
    border: 0.35mm solid #a9d9eb;
    border-radius: 2mm;
    box-shadow: 0 0.8mm 2mm rgba(13, 92, 138, 0.08);
}

.current-id-reference {
    margin-top: 1.2mm;
    padding: 1.2mm 1.8mm;
}

.current-id-dates {
    margin-top: 1.1mm;
    padding: 1.05mm 1.8mm;
}

.current-id-reference span,
.current-id-dates span {
    color: #17577f;
    font-size: 2.1mm;
}

.current-id-reference strong,
.current-id-dates strong {
    color: #17643a;
    font-size: 2.75mm;
}

.current-id-photo {
    width: 25mm;
    height: 29.5mm;
    border: 0.55mm solid #148fc7;
    border-radius: 1.8mm;
    box-shadow:
        0 1mm 2.5mm rgba(11, 65, 105, 0.18),
        0 0 0 0.5mm rgba(255, 255, 255, 0.8);
}

.current-id-footer {
    right: 0;
    bottom: 0;
    left: 0;
    height: 6.1mm;
    padding: 0 3mm;
    color: #ffffff;
    background:
        linear-gradient(
            90deg,
            #0c4f7b 0%,
            #0e78ad 55%,
            #159fd0 100%
        );
    border: 0;
    border-radius: 0;
    font-size: 1.95mm;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* ---------- BACK ---------- */

.current-jannet-back {
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(48, 178, 225, 0.22),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #0a3f68 0%,
            #0b6696 48%,
            #0f86b7 100%
        );
    border: 0.55mm solid #0a5d8c;
}

.current-back-header {
    height: 12.5mm;
    padding: 1.3mm 4mm 1mm;
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f6fbfe 70%,
            #e7f5fb 100%
        );
    border-bottom: 0.7mm solid #27a7d8;
}

.current-back-logo {
    width: 52mm;
    max-height: 9mm;
}

.current-back-content {
    grid-template-columns: 28.5mm 1fr;
    gap: 4mm;
    padding: 2.6mm 4mm 0;
}

.current-back-qr img {
    width: 28.5mm;
    height: 28.5mm;
    padding: 2.3mm;
    border: 0.45mm solid #c7eaf6;
    border-radius: 2mm;
    box-shadow: 0 1mm 2.5mm rgba(0, 0, 0, 0.18);
}

.current-back-message h2 {
    margin-bottom: 1.2mm;
    color: #ffffff;
    font-size: 3.65mm;
    letter-spacing: 0.025em;
}

.current-back-message h3 {
    margin-bottom: 0.9mm;
    color: #5bd5ff;
    font-size: 4mm;
}

.current-back-message p {
    color: #edfaff;
    font-size: 2.05mm;
    line-height: 1.28;
}

.current-back-notice {
    margin: 1.8mm 4mm 0;
    padding-top: 1.4mm;
    border-top: 0.35mm solid rgba(116, 219, 255, 0.55);
}

.current-back-notice p {
    font-size: 1.68mm;
    line-height: 1.18;
}

.current-back-footer {
    height: 6.4mm;
    padding: 0 4mm;
    background:
        linear-gradient(
            90deg,
            #073a5d 0%,
            #07547c 100%
        );
    border-top: 0.4mm solid rgba(100, 214, 255, 0.75);
    font-size: 2.15mm;
    letter-spacing: 0.025em;
}

/* Printed appearance */

@media print {
    .current-jannet-front,
    .current-jannet-back {
        box-shadow: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}


/* =========================================================
   Final production card refinements
   ========================================================= */

/* Remove phone from front */
.current-id-phone {
    display: none !important;
}

/* Larger front logo area */
.current-id-header {
    height: 17mm !important;
    padding: 1mm 1.5mm !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.current-id-logo {
    width: 78mm !important;
    max-width: 98% !important;
    max-height: 15mm !important;
    object-fit: contain;
}

/* Stronger front typography */
.current-id-name {
    font-family:
        "Eras Bold ITC",
        "Eras Medium ITC",
        "Trebuchet MS",
        Arial,
        sans-serif;
    font-size: 5.8mm !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.current-id-role {
    font-family:
        "Eras Bold ITC",
        "Eras Medium ITC",
        "Trebuchet MS",
        Arial,
        sans-serif;
    font-size: 3.5mm !important;
    font-weight: 900 !important;
}

/* Slightly rebalance body after larger logo */
.current-id-main {
    height: 30.5mm !important;
    padding-top: 2mm !important;
}

/* Larger back logo */
.current-back-header {
    height: 15mm !important;
    padding: 1mm 1.5mm !important;
}

.current-back-logo {
    width: 74mm !important;
    max-width: 98% !important;
    max-height: 13mm !important;
    object-fit: contain;
}


/* =========================================================
   Final spacing and visibility corrections
   ========================================================= */

/* FRONT: preserve large logo but restore usable content space */
.current-id-header {
    height: 15.5mm !important;
}

.current-id-logo {
    max-height: 13.5mm !important;
}

.current-id-main {
    height: 32.5mm !important;
    grid-template-columns: 1fr 25mm !important;
    gap: 3mm !important;
    padding: 1.8mm 3mm 6.8mm !important;
}

.current-id-name {
    font-size: 5.2mm !important;
    margin-bottom: 0.8mm !important;
}

.current-id-role {
    font-size: 3.2mm !important;
    margin-top: 0.8mm !important;
    margin-bottom: 1.1mm !important;
}

.current-id-reference {
    margin-top: 0.8mm !important;
    padding: 0.9mm 1.5mm !important;
}

.current-id-dates {
    margin-top: 0.8mm !important;
    padding: 0.8mm 1.5mm !important;
}

.current-id-reference span,
.current-id-dates span {
    font-size: 1.9mm !important;
}

.current-id-reference strong,
.current-id-dates strong {
    font-size: 2.55mm !important;
}

.current-id-photo {
    height: 27.5mm !important;
    align-self: start !important;
}

.current-id-footer {
    height: 5.8mm !important;
    font-size: 1.75mm !important;
}

/* BACK: keep logo large but restore room for QR and text */
.current-back-header {
    height: 13.5mm !important;
}

.current-back-logo {
    max-height: 11.5mm !important;
}

.current-back-content {
    grid-template-columns: 27mm 1fr !important;
    gap: 3.2mm !important;
    padding: 2mm 4mm 0 !important;
}

.current-back-qr img {
    width: 27mm !important;
    height: 27mm !important;
}

.current-back-message h2 {
    font-size: 3.3mm !important;
    margin-bottom: 0.8mm !important;
}

.current-back-message h3 {
    font-size: 3.7mm !important;
    margin-bottom: 0.6mm !important;
}

.current-back-message p {
    font-size: 1.9mm !important;
    line-height: 1.18 !important;
}

.current-back-notice {
    margin-top: 1.2mm !important;
    padding-top: 1mm !important;
}

.current-back-notice p {
    font-size: 1.5mm !important;
    line-height: 1.12 !important;
}

.current-back-footer {
    height: 5.8mm !important;
    font-size: 1.9mm !important;
}


/* Front ID status badge */
.current-id-footer {
    justify-content: space-between !important;
    padding: 0 3mm !important;
    font-size: 1.8mm !important;
}

.current-id-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15mm;
    padding: 0.8mm 2mm;
    border-radius: 999px;
    font-family:
        "Eras Bold ITC",
        "Eras Medium ITC",
        "Trebuchet MS",
        Arial,
        sans-serif;
    font-size: 2.2mm;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.current-id-status.success {
    color: #ffffff;
    background: #16834d;
}

.current-id-status.warning {
    color: #ffffff;
    background: #b7791f;
}

.current-id-status.danger {
    color: #ffffff;
    background: #b42318;
}


/* Slightly larger company name in front footer */
.current-id-footer{
    font-size:2.1mm !important;
    font-weight:700 !important;
}

.current-id-footer span{
    font-size:2.15mm !important;
    font-weight:700 !important;
    letter-spacing:.02em;
}


/* =========================================================
   Meeting-ready front-card readability polish
   ========================================================= */

.current-jannet-front {
    background:
        radial-gradient(
            circle at 82% 34%,
            rgba(24, 151, 207, 0.045) 0,
            rgba(24, 151, 207, 0.02) 22%,
            transparent 40%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 80%,
            #f2fbfe 100%
        ) !important;
}

/* Stronger employee name */
.current-id-name {
    color: #0b345d !important;
    font-size: 5.45mm !important;
    font-weight: 900 !important;
    letter-spacing: 0.015em !important;
    text-shadow: none !important;
}

/* Stronger role */
.current-id-role {
    color: #0f6531 !important;
    font-size: 3.3mm !important;
    font-weight: 900 !important;
    letter-spacing: 0.045em !important;
}

/* Cleaner, brighter information panels */
.current-id-reference,
.current-id-dates {
    background: rgba(255, 255, 255, 0.99) !important;
    border: 0.45mm solid #72bfe0 !important;
    box-shadow: 0 0.7mm 1.6mm rgba(14, 92, 137, 0.10) !important;
}

/* Darker and bolder labels */
.current-id-reference span,
.current-id-dates span {
    color: #103f68 !important;
    font-family:
        "Eras Bold ITC",
        "Eras Medium ITC",
        "Trebuchet MS",
        Arial,
        sans-serif !important;
    font-size: 2.05mm !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
}

/* Larger values */
.current-id-reference strong,
.current-id-dates strong {
    color: #0f5e32 !important;
    font-family:
        "Eras Bold ITC",
        "Eras Medium ITC",
        "Trebuchet MS",
        Arial,
        sans-serif !important;
    font-size: 2.8mm !important;
    font-weight: 900 !important;
}

/* Slightly stronger photo frame */
.current-id-photo {
    border: 0.65mm solid #128fc8 !important;
    box-shadow:
        0 0 0 0.4mm #ffffff,
        0 1mm 2.5mm rgba(11, 65, 105, 0.22) !important;
}

/* Make footer company name clearer */
.current-id-footer span {
    color: #ffffff !important;
    font-size: 2.2mm !important;
    font-weight: 900 !important;
    letter-spacing: 0.025em !important;
}