/* ============================================================
   Eye Society Employee Portal — Brand Stylesheet v2
   Final brand (Colour & Type reference): minimal · warm · nude-toned
   Palette: Bone, Ivory, Sand, Camel, Ink, Stone, Taupe + hairlines
   Typography: Jost (display, light, wide tracking) + Inter (body)
   Structure: flat surfaces, 1px hairline rules, square corners
   ============================================================ */

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

:root {
    /* Colours — final brand */
    --bone: #F5F0E9;
    --ivory: #FCFAF6;
    --sand: #E9DDCD;
    --camel: #B9986E;
    --ink: #1B1A18;
    --stone: #6B6155;
    --taupe: #A2917E;
    --hair: rgba(27, 26, 24, 0.14);

    /* Functional states (dusty, tuned to the nude palette) */
    --sage: #5D7C5F;
    --rust: #A04040;
    --tint-sage: #E7EDE4;
    --tint-camel: #F0E5D3;
    --tint-rust: #F6E4E0;
    --tint-stone: #ECE7E0;

    /* Legacy aliases — inline template styles still resolve */
    --espresso: var(--ink);
    --dark-mocha: #2C2A26;
    --gold: var(--camel);
    --gold-hover: #C7A87E;
    --cream: var(--sand);
    --warm-white: var(--bone);
    --amber: var(--camel);
    --slate-blue: var(--stone);
    --border-light: var(--hair);
    --table-stripe: #FAF7F1;

    /* Typography */
    --font-display: 'Jost', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Shape — square, architectural */
    --radius-card: 0;
    --radius-pill: 999px;
    --radius-sm: 0;
    --shadow: none;
    --shadow-hover: none;
}

/* ---- Base ---- */

body {
    font-family: var(--font-body);
    font-weight: 300;
    background: var(--bone) !important;
    color: var(--ink);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 300;
    letter-spacing: 0.06em;
    color: var(--ink);
}

strong, b { font-weight: 500; }

/* ---- Navbar: light, closed by a hairline ---- */

.navbar.brand-nav {
    background: var(--bone) !important;
    border-bottom: 1px solid var(--hair);
    padding-top: 14px;
    padding-bottom: 14px;
}

.brand-nav .navbar-brand {
    font-family: var(--font-display) !important;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 1.25rem !important;
    color: var(--ink) !important;
}

.brand-nav .navbar-text {
    color: var(--taupe) !important;
    font-family: var(--font-display);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
}

.brand-nav .nav-link {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--stone) !important;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    transition: color 0.2s;
}

.brand-nav .nav-link:hover,
.brand-nav .nav-link.active {
    color: var(--camel) !important;
}

.brand-nav .navbar-toggler {
    border: none;
    padding: 4px 6px;
    border-radius: 0;
}

.brand-nav .navbar-toggler:focus { box-shadow: none; }

/* Mobile drawer: generous hairline-separated touch rows on bone */
@media (max-width: 991px) {
    .brand-nav .navbar-collapse {
        border-top: 1px solid var(--hair);
        margin-top: 12px;
        padding-top: 4px;
    }

    .brand-nav .nav-link {
        padding: 15px 0;
        border-bottom: 1px solid var(--hair);
    }

    .brand-nav .nav-item:last-child .nav-link { border-bottom: none; }

    .brand-nav .navbar-text {
        display: block;
        padding: 14px 0 6px;
    }
}

/* ---- Cards: ivory cells, hairline borders, flat ---- */

.card {
    border: 1px solid var(--hair);
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--ivory);
}

.shadow-sm { box-shadow: none !important; }

.card-header {
    background: var(--ivory) !important;
    border-bottom: 1px solid var(--hair) !important;
    border-radius: 0 !important;
    padding: 18px 26px;
}

.card-header h5,
.card-header h4 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.26em;
    color: var(--ink);
    margin-bottom: 0;
}

.card-body { padding: 26px; }

/* ---- KPI stat cells (former colored stat cards → quiet ivory) ---- */

.card.text-white {
    border: 1px solid var(--hair) !important;
    border-radius: 0 !important;
    overflow: hidden;
    box-shadow: none !important;
    color: var(--ink) !important;
}

.card.text-white.bg-primary,
.card.text-white.bg-success,
.card.text-white.bg-info,
.card.text-white.bg-warning {
    background: var(--ivory) !important;
    color: var(--ink) !important;
}

.card.text-white .card-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: var(--camel) !important;
    opacity: 1 !important;
}

.card.text-white h2 {
    font-family: var(--font-display);
    font-weight: 300;
    letter-spacing: 0.08em;
    color: var(--ink) !important;
}

/* Sand-emphasized cell keeps ink text (set inline via background: var(--sand)) */
.card.bg-warning h2 { color: var(--ink) !important; }

/* ---- Buttons: ink rectangles, Jost caps ---- */

.btn {
    border-radius: 0 !important;
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
}

.btn-primary {
    background: var(--ink) !important;
    border: 1px solid var(--ink) !important;
    color: var(--ivory) !important;
    transition: background 0.2s;
}

.btn-primary:hover {
    background: var(--dark-mocha) !important;
    border-color: var(--dark-mocha) !important;
}

.btn-outline-primary {
    color: var(--ink) !important;
    border-color: var(--ink) !important;
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--ink) !important;
    color: var(--ivory) !important;
}

.btn-outline-secondary {
    color: var(--stone) !important;
    border-color: var(--hair) !important;
}

.btn-outline-secondary:hover {
    background: var(--sand) !important;
    color: var(--ink) !important;
    border-color: var(--hair) !important;
}

.btn-outline-success {
    color: var(--sage) !important;
    border-color: var(--sage) !important;
}

.btn-outline-success:hover { background: var(--sage) !important; color: #fff !important; }

.btn-outline-danger {
    color: var(--rust) !important;
    border-color: var(--rust) !important;
}

.btn-outline-danger:hover { background: var(--rust) !important; color: #fff !important; }

.btn-lg {
    font-size: 0.78rem !important;
    padding: 14px 32px !important;
}

/* ---- Badges: understated tinted chips ---- */

.badge {
    font-family: var(--font-body);
    font-size: 0.72rem;
    padding: 0.35em 0.9em;
    border-radius: var(--radius-pill);
    font-weight: 500;
    letter-spacing: 0.04em;
}

.badge.bg-success   { background: var(--tint-sage) !important;  color: var(--sage) !important; }
.badge.bg-warning   { background: var(--tint-camel) !important; color: #8A6F4A !important; }
.badge.bg-danger    { background: var(--tint-rust) !important;  color: var(--rust) !important; }
.badge.bg-info      { background: var(--tint-stone) !important; color: var(--stone) !important; }
.badge.bg-secondary { background: var(--tint-stone) !important; color: var(--taupe) !important; }

/* ---- Tables: light architecture, no dark header ---- */

.table {
    margin-bottom: 0;
    color: var(--ink);
    font-weight: 300;
}

.table thead.table-dark,
.table thead.table-dark th {
    background-color: var(--bone) !important;
    color: var(--taupe) !important;
}

.table thead.table-dark th {
    font-family: var(--font-display);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-weight: 500;
    border: none;
    border-bottom: 1px solid var(--hair);
    padding: 14px 16px;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--table-stripe) !important;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--sand) !important;
}

.table td {
    padding: 15px 16px;
    border-bottom: 1px solid var(--hair);
    font-size: 0.88rem;
    color: var(--stone);
    vertical-align: middle;
}

.table td strong, .table td a { color: var(--ink); }

/* ---- Forms: quiet fields, hairline focus ---- */

.form-control, .form-select {
    border: 1px solid var(--hair);
    border-radius: 0;
    padding: 11px 14px;
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--ink);
    background: var(--ivory);
    transition: border-color 0.2s;
}

.form-control:focus, .form-select:focus {
    border-color: var(--ink);
    box-shadow: none;
    background: var(--ivory);
}

.form-label {
    font-family: var(--font-display);
    font-size: 0.62rem;
    color: var(--taupe);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.28em;
}

/* ---- Login ---- */

.login-card {
    background: var(--ivory);
    border: 1px solid var(--hair);
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

.login-card .card-body { padding: 44px 40px; }

.login-card h2 {
    font-family: var(--font-display);
    font-weight: 200;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

/* ---- Quiz ---- */

.form-check-label {
    font-size: 0.92rem;
    font-weight: 300;
    color: var(--ink);
    cursor: pointer;
}

.form-check-input { border-color: var(--taupe); }

.form-check-input:checked {
    background-color: var(--ink);
    border-color: var(--ink);
}

.form-check-input:focus {
    border-color: var(--ink);
    box-shadow: none;
}

/* ---- Progress: a thin rule that fills, not a chunky pill ---- */

.progress {
    height: 4px;
    border-radius: 0;
    background: var(--sand);
    overflow: hidden;
}

.progress-bar { background: var(--camel) !important; }
.progress-bar.bg-success { background: var(--sage) !important; }

/* ---- Manual content ---- */

.manual-content {
    font-family: var(--font-body);
    font-weight: 300;
    color: var(--stone);
    line-height: 1.8;
    font-size: 0.95rem;
}

.manual-content h1,
.manual-content h2,
.manual-content h3 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.1em;
    margin-top: 2.2rem;
    margin-bottom: 1rem;
    color: var(--ink);
}

.manual-content h1 {
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    border-bottom: 1px solid var(--hair);
    padding-bottom: 12px;
}

.manual-content h2 { font-size: 1.15rem; }
.manual-content h3 { font-size: 1rem; }

.manual-content p { margin-bottom: 1rem; }

.manual-content table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.manual-content th,
.manual-content td {
    padding: 0.75rem;
    border: 1px solid var(--hair);
    font-size: 0.9rem;
}

.manual-content th {
    background: var(--bone);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--stone);
}

.manual-content ul,
.manual-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.manual-content li { margin-bottom: 0.5rem; }
.manual-content strong { color: var(--ink); font-weight: 500; }

/* ---- Alerts ---- */

.alert {
    border-radius: 0;
    border: 1px solid var(--hair);
    font-size: 0.9rem;
    font-weight: 300;
}

.alert-danger  { background: var(--tint-rust);  color: var(--rust);  border-color: var(--tint-rust); }
.alert-success { background: var(--tint-sage);  color: var(--sage);  border-color: var(--tint-sage); }

/* ---- Misc ---- */

.text-muted { color: var(--taupe) !important; }

hr { border-color: var(--hair); opacity: 1; }

code {
    background: var(--sand);
    color: var(--ink);
    padding: 2px 6px;
    border-radius: 0;
    font-size: 0.85em;
}

/* ---- Page headers ---- */

h1 {
    font-size: 1.55rem;
    font-weight: 300;
    letter-spacing: 0.12em;
}

.lead {
    font-family: var(--font-body);
    font-weight: 300;
    font-style: normal;
    color: var(--stone);
    font-size: 0.95rem;
}

.display-4 {
    font-family: var(--font-display);
    font-weight: 200 !important;
    letter-spacing: 0.08em;
    font-size: 3rem !important;
    color: var(--ink) !important;
}

.text-primary { color: var(--ink) !important; }

/* ---- Work-ethic timeline ---- */

.incident-timeline {
    max-height: 260px;
    overflow-y: auto;
}

.incident-timeline li {
    border-left: 2px solid var(--rust);
    padding: 4px 0 4px 12px;
    margin-bottom: 10px;
    font-size: 0.85rem;
    font-weight: 300;
    color: var(--stone);
}

.incident-timeline .incident-date {
    display: inline-block;
    min-width: 48px;
    font-weight: 500;
    color: var(--rust);
    margin-right: 6px;
}

/* ---- Eyebrow overline (signature detail, available to templates) ---- */

.eyebrow {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.62rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--camel);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--camel);
}