/*
 * App-specific styles on top of OneUI + the "modern" colour theme.
 * Theme palette: primary #0c91cf, primary-dark #323a47, primary-darker #262d3b.
 */

/* ---------- Login ---------- */
.auth-brand {
    background: linear-gradient(135deg, #262d3b 0%, #323a47 55%, #0b6e9c 100%);
    color: #e4e6e7;
}
.auth-brand .auth-mark {
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 145, 207, .2);
    color: #5ec2f0;
    font-size: 1.35rem;
}
.auth-brand .auth-steps li {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.auth-brand .auth-steps i {
    color: #5ec2f0;
    margin-top: .2rem;
}
.auth-form {
    max-width: 380px;
}

/* ---------- Sidebar brand ---------- */
.brand-mark {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0c91cf;
    color: #fff;
    font-size: .9rem;
}

/* ---------- Dashboard home ---------- */
.step-number {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 145, 207, .12);
    color: #0c91cf;
    font-weight: 600;
}

/* ---------- P9: employer year page ---------- */
.month-card.is-uploaded {
    border-left: 3px solid #139a52;
}
.month-card.is-missing {
    border-left: 3px dashed #cbd2dc;
    background: #fafbfc;
}
/* 12-letter strip: one box per month, filled when the employee appears that month */
.month-strip {
    display: inline-flex;
    gap: 2px;
}
.month-strip span {
    width: 1.15rem;
    height: 1.15rem;
    line-height: 1.15rem;
    font-size: .6rem;
    text-align: center;
    border-radius: 3px;
    background: #eef0f3;
    color: #a3abb7;
}
.month-strip span.on {
    background: #0c91cf;
    color: #fff;
}

/* ---------- P9: card preview (screen). PDF styles are in views/p9/cards/_print.php ---------- */
.p9a {
    min-width: 1150px;
    font-size: .72rem;
    color: #1f2937;
}
.p9a table {
    width: 100%;
    border-collapse: collapse;
}
.p9a-logo { text-align: center; margin-bottom: .5rem; }
.p9a-logo img { height: 42px; }
.p9a-title td { vertical-align: top; }
.p9a-left { width: 20%; font-weight: 600; }
.p9a-center { width: 60%; text-align: center; }
.p9a-right { width: 20%; text-align: right; font-size: .9rem; }
.p9a-kra { font-size: 1rem; font-weight: 700; letter-spacing: .03em; }
.p9a-details { margin-top: .75rem; }
.p9a-details th { width: 14%; padding: .2rem 0; font-weight: 600; }
.p9a-details td { padding: .2rem .4rem; }
.p9a-fill { border-bottom: 1px dotted #6b7280; }
.p9a-pin { font-family: var(--bs-font-monospace); }
.p9a-grid { margin-top: .75rem; }
.p9a-grid th,
.p9a-grid td {
    border: 1px solid #9ca3af;
    padding: .25rem .3rem;
}
.p9a-grid thead th {
    background: #eef0f3;
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
    line-height: 1.2;
}
.p9a-grid .p9a-sub th { font-weight: 500; color: #4b5563; }
.p9a-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.p9a-month { text-align: left; font-weight: 600; }
.p9a-grid tfoot td { font-weight: 700; background: #f8f9fa; }
.p9a-endyear { margin-top: .9rem; }
.p9a-endyear th { width: 22%; font-weight: 600; }
.p9a-endyear td { width: 28%; padding: .2rem .4rem; }
.p9a-notes { margin-top: .9rem; font-size: .66rem; color: #4b5563; line-height: 1.45; }

/* Screenshot confirm page (uploads/confirm) */
.ocr-picture { max-height: 420px; overflow: auto; border: 1px solid #e5e7eb; border-radius: .375rem; background: #f8f9fa; }
.ocr-picture img { display: block; max-width: none; }
.ocr-doubtful { background-color: #fff3cd !important; border-color: #f0ad4e !important; }
.ocr-table td { padding: .2rem; }
.ocr-table .form-control-sm { min-width: 6.5rem; font-variant-numeric: tabular-nums; }
.ocr-table .ocr-kra-pin { min-width: 8rem; font-family: var(--bs-font-monospace); text-transform: uppercase; }
.ocr-table .ocr-employee-name { min-width: 13rem; }
.ocr-table .ocr-resident-status,
.ocr-table .ocr-employee-type { min-width: 9rem; }
.ocr-checks td { background: #fffbeb; font-size: .78rem; border-top: 0; }