:root {
    --wr-primary: #206bc4;
    --wr-primary-dark: #174f91;
    --wr-surface: #ffffff;
    --wr-canvas: #f4f7fb;
    --wr-border: #e6eaf0;
    --wr-text-soft: #667085;
}

html, body { min-height: 100%; }
body {
    background: var(--wr-canvas);
    color: #182433;
    -webkit-font-smoothing: antialiased;
}
.page-wrapper { min-height: calc(100vh - 116px); }
.page-body { padding-top: 1.5rem; padding-bottom: 2rem; }

/* ===== Top bar / branding ===== */
.app-topbar {
    min-height: 64px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--wr-border);
    box-shadow: 0 1px 8px rgba(24,36,51,.04);
    backdrop-filter: blur(10px);
}
.navbar-brand { gap: .7rem; }
.brand-mark {
    width: 38px; height: 38px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #206bc4, #4299e1);
    color: #fff; font-weight: 800; letter-spacing: -.03em; font-size: .9rem;
    box-shadow: 0 6px 16px rgba(32,107,196,.22);
}
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong { font-size: 1rem; color: #182433; letter-spacing: -.01em; }
.brand-copy small { margin-top: .28rem; font-size: .68rem; color: #8391a5; font-weight: 500; letter-spacing: .03em; }
.app-avatar { background: #eaf2fb; color: var(--wr-primary); font-weight: 700; }

/* ===== Main horizontal navigation ===== */
.app-nav-shell { background: #fff; border-bottom: 1px solid var(--wr-border); }
.app-nav-bar { min-height: 50px; background: #fff; padding: 0; }
.app-nav-list { gap: .15rem; }
.app-nav-list .nav-link {
    min-height: 50px;
    padding: .85rem .8rem .7rem;
    color: #5c667a;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.app-nav-list .nav-link:hover { color: var(--wr-primary); background: #f8fbff; }
.app-nav-list .nav-item.active .nav-link { color: var(--wr-primary); border-bottom-color: var(--wr-primary); background: #f8fbff; }

/* ===== Typography / page headings ===== */
h1, h2, h3, h4, h5 { letter-spacing: -.018em; }
h2 { font-size: 1.55rem; font-weight: 700; }
.text-muted, .text-secondary { color: var(--wr-text-soft) !important; }

/* ===== Cards ===== */
.card {
    border: 1px solid var(--wr-border);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(24,36,51,.045);
    background: var(--wr-surface);
}
.card-header { min-height: 52px; border-bottom-color: var(--wr-border); background: transparent; }
.card-title { font-weight: 700; letter-spacing: -.01em; }
.card:hover.card-hover-lift { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(24,36,51,.08); }

/* Existing pages use p-3/p-4 cards. Keep generous but compact spacing. */
.card.p-4 { padding: 1.35rem !important; }
.card.p-3 { padding: 1rem !important; }

/* ===== KPI cards ===== */
.row.g-3 .card .display-5,
.row.g-3 .card .display-6 {
    color: #182433;
    font-size: 2rem;
    line-height: 1.1;
    margin-top: .35rem;
}
.row.g-3 .card > .text-muted:first-child {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .055em;
}

/* ===== Tables ===== */
.table-responsive { border-radius: 9px; }
.table { --tblr-table-bg: transparent; }
.table > :not(caption) > * > * { padding: .75rem .7rem; border-bottom-color: #edf0f4; }
.table thead th {
    white-space: nowrap;
    color: #667085;
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .035em;
    background: #f8fafc;
    border-bottom-width: 1px;
}
.table tbody tr:hover > * { background-color: #f9fbfd; }
.table-bordered { border-color: #e5e9ef; }
.table-bordered > :not(caption) > * { border-width: 0; }
.table-bordered > :not(caption) > * > * { border-width: 0 1px 1px 0; }

/* ===== Buttons ===== */
.btn { border-radius: 8px; font-weight: 600; }
.btn-sm { border-radius: 7px; }
.btn-primary { box-shadow: 0 2px 7px rgba(32,107,196,.18); }
.btn-success { box-shadow: 0 2px 7px rgba(47,179,68,.15); }

/* ===== Forms ===== */
.form-label { font-weight: 600; color: #344054; margin-bottom: .4rem; }
.form-control, .form-select {
    border-color: #dbe1e8;
    border-radius: 8px;
    min-height: 40px;
    box-shadow: none;
}
.form-control:focus, .form-select:focus {
    border-color: #85b7eb;
    box-shadow: 0 0 0 .2rem rgba(32,107,196,.10);
}
textarea.form-control { min-height: 92px; }

/* ===== Status badges / alerts ===== */
.badge { border-radius: 999px; font-weight: 700; padding: .42em .7em; }
.alert { border-radius: 10px; border-width: 1px; }

/* ===== Report tables ===== */
.report-table { font-size: .88rem; }
.report-table th { min-width: 108px; }
.report-table th:nth-child(1) { min-width: 55px; }
.report-table th:nth-child(2) { min-width: 130px; }
.report-table th:nth-child(3) { min-width: 230px; }
.report-table th:nth-child(6) { min-width: 240px; }
.report-sheet { background: #fff; }
.progress { min-width: 110px; }

/* ===== Dashboard ===== */
.dashboard-week-table td, .dashboard-week-table th { vertical-align: top; }
.dashboard-week-table tbody tr:hover td { background-color: #f9fbfd; }

/* ===== V7.7.1 daily work board ===== */
.weekly-task-board > .card { overflow: hidden; }
.weekly-task-board .card-header { border-bottom: 1px solid var(--wr-border); }
.day-task-card { overflow: hidden; }
.day-task-today { border-color: #9ec5f0; box-shadow: 0 0 0 3px rgba(32,107,196,.08); }
.day-date-badge {
    min-width: 58px;
    padding: .45rem .55rem;
    background: #f3f7fc;
    border: 1px solid #dfe8f3;
    border-radius: 9px;
    color: #344054;
}
.daily-task-table th { font-size: .76rem; color: #667085; }
.daily-task-table .task-content-cell { min-width: 300px; max-width: 600px; white-space: normal; }
.day-empty-state { background: #fbfcfe; border-radius: 8px; }
.previous-suggestions {
    padding: 1rem;
    border: 1px dashed #b8cae0;
    border-radius: 10px;
    background: #f7fbff;
}
.task-suggestion { max-width: 360px; white-space: normal; }
.task-entry-card textarea { resize: vertical; }
.copy-task-row { cursor: pointer; }
.copy-task-row:hover { background: #f7fbff; }
.sticky-copy-toolbar { position: sticky; top: .5rem; z-index: 1010; }
.text-truncate-copy { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== Login ===== */
.app-guest .page-body { display: flex; align-items: center; min-height: calc(100vh - 130px); }
.login-panel { max-width: 440px; margin: 2rem auto; }
.login-panel .card { box-shadow: 0 14px 38px rgba(24,36,51,.09); border-color: #e3e9f0; }
.login-logo { width: 52px; height: 52px; border-radius: 14px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#206bc4,#4299e1); color:#fff; font-weight:800; margin:0 auto 1rem; box-shadow:0 8px 22px rgba(32,107,196,.22); }

/* ===== Admin ===== */
.admin-section-title { font-weight: 700; color: #25364a; }

/* ===== Footer ===== */
.app-footer { border-top: 1px solid var(--wr-border); padding: 1.25rem 0; margin-top: 1rem; }

@media (max-width: 767.98px) {
    .page-body { padding-top: 1rem; }
    .app-nav-list { gap: 0; }
    .app-nav-list .nav-link { min-height: 44px; border-bottom: 0; border-left: 3px solid transparent; padding: .7rem .9rem; }
    .app-nav-list .nav-item.active .nav-link { border-left-color: var(--wr-primary); border-bottom-color: transparent; }
    .daily-task-table, .dashboard-week-table { font-size: .85rem; }
    .day-date-badge { min-width: 52px; }
    .sticky-copy-toolbar { position: static; }
    .card.p-4 { padding: 1rem !important; }
}

@media print {
    .app-topbar, .app-nav-shell, .app-footer, .no-print { display: none !important; }
    body { background: #fff; }
    .page-body { padding: 0; }
    .container-xl { max-width: none !important; padding: 0 !important; }
    .card { box-shadow: none; border: 1px solid #ddd; }
    .report-sheet { border: 0 !important; }
    .report-table { font-size: 9pt; }
}

/* ===== V7.7.4 APD visual contrast refinement ===== */
:root {
    --wr-primary: #0f5fa8;
    --wr-primary-dark: #0a467d;
    --wr-primary-soft: #eaf4ff;
    --wr-canvas: #eef4f9;
    --wr-surface: #ffffff;
    --wr-border: #cfd9e5;
    --wr-border-strong: #b5c4d6;
    --wr-text-soft: #59677a;
}

body {
    background:
        linear-gradient(180deg, #eaf2f9 0, #f4f7fb 180px, #f4f7fb 100%);
}

.app-topbar {
    background: linear-gradient(90deg, #0b4f8a 0%, #126db8 58%, #2f86c9 100%);
    border-bottom: 0;
    box-shadow: 0 4px 16px rgba(10,70,125,.22);
}
.app-topbar .navbar-brand,
.app-topbar .nav-link,
.app-topbar .text-body,
.app-topbar .text-secondary { color: #fff !important; }
.app-topbar .text-secondary { opacity: .82; }
.brand-mark {
    width: 42px; height: 42px;
    background: #fff;
    color: var(--wr-primary-dark);
    border: 2px solid rgba(255,255,255,.75);
    box-shadow: 0 5px 14px rgba(0,0,0,.18);
    font-size: .75rem;
}
.brand-copy strong { color: #fff; font-size: 1.08rem; }
.brand-copy small { color: rgba(255,255,255,.78); }
.app-avatar { background: #fff; color: var(--wr-primary-dark); border: 2px solid rgba(255,255,255,.72); }

.app-nav-shell {
    border-bottom: 1px solid #c7d5e3;
    box-shadow: 0 3px 10px rgba(39,71,102,.08);
}
.app-nav-list .nav-link {
    color: #3b4c61;
    font-weight: 700;
    border-bottom-width: 3px;
}
.app-nav-list .nav-link:hover { color: var(--wr-primary-dark); background: #edf6ff; }
.app-nav-list .nav-item.active .nav-link {
    color: #084f8c;
    border-bottom-color: #0f6fbd;
    background: #e8f3fd;
}

.card {
    border-color: var(--wr-border);
    box-shadow: 0 4px 14px rgba(39,71,102,.08);
}
.card-header {
    background: #f7fafc;
    border-bottom-color: var(--wr-border-strong);
}
.card-title { color: #173a59; }

/* Give KPI/stat cards stronger visual hierarchy without changing markup */
.row.g-3 .card {
    border-top: 4px solid #2b7fc2;
}
.row.g-3 > *:nth-child(2n) .card { border-top-color: #2f9e75; }
.row.g-3 > *:nth-child(3n) .card { border-top-color: #f08c46; }
.row.g-3 > *:nth-child(4n) .card { border-top-color: #7950f2; }
.row.g-3 .card .display-5,
.row.g-3 .card .display-6 {
    color: #123c60;
    font-weight: 800;
}
.row.g-3 .card > .text-muted:first-child {
    color: #43556a !important;
}

.table-responsive {
    border: 1px solid #d4deea;
    background: #fff;
}
.table thead th {
    color: #203b55;
    background: #e8f1f8;
    border-bottom: 2px solid #bfd0df;
}
.table > :not(caption) > * > * { border-bottom-color: #dfe7ef; }
.table tbody tr:nth-child(even) > * { background-color: #fbfdff; }
.table tbody tr:hover > * { background-color: #eaf4fd !important; }

.btn-primary {
    background: #0f6fbd;
    border-color: #0f6fbd;
    box-shadow: 0 3px 9px rgba(15,111,189,.28);
}
.btn-primary:hover { background: #0b5e9f; border-color: #0b5e9f; }
.btn-success { background: #238b62; border-color: #238b62; }
.btn-danger { background: #c92a2a; border-color: #c92a2a; }
.btn-outline-primary { color: #0d5f9f; border-color: #73a8d1; }
.btn-outline-primary:hover { background: #0f6fbd; border-color: #0f6fbd; }

.form-control, .form-select {
    border-color: #bfcddd;
    background: #fff;
}
.form-control:focus, .form-select:focus {
    border-color: #3b8dcc;
    box-shadow: 0 0 0 .22rem rgba(29,117,187,.15);
}

.badge.bg-success, .badge.text-bg-success { background-color: #198754 !important; }
.badge.bg-warning, .badge.text-bg-warning { background-color: #d97706 !important; color: #fff !important; }
.badge.bg-danger, .badge.text-bg-danger { background-color: #c92a2a !important; }
.badge.bg-primary, .badge.text-bg-primary { background-color: #0f6fbd !important; }
.badge.bg-info, .badge.text-bg-info { background-color: #1677a8 !important; color: #fff !important; }

.alert-success { background: #e6f5ec; border-color: #8bc9a2; color: #185c35; }
.alert-warning { background: #fff4d6; border-color: #e4bc64; color: #765308; }
.alert-danger { background: #fdeaea; border-color: #e1a1a1; color: #842029; }
.alert-info { background: #e6f3fb; border-color: #9dcbe6; color: #145372; }

.day-task-card { border-left: 4px solid #8fb9da; }
.day-task-today {
    border-color: #2781c4;
    border-left-width: 5px;
    box-shadow: 0 0 0 3px rgba(39,129,196,.12), 0 5px 16px rgba(39,71,102,.09);
}
.day-date-badge {
    background: #e5f1fb;
    border-color: #aac8df;
    color: #184b72;
    font-weight: 700;
}
.previous-suggestions {
    background: #eef7ff;
    border-color: #85b2d6;
}

.login-panel .card {
    border-top: 5px solid #126db8;
    box-shadow: 0 18px 46px rgba(19,69,107,.18);
}
.login-logo {
    width: 60px; height: 60px;
    background: linear-gradient(135deg,#0b4f8a,#2b82c5);
    font-size: .82rem;
    border: 3px solid #d8ebfa;
}

.app-footer {
    background: rgba(255,255,255,.8);
    border-top-color: #cdd9e5;
}

@media (max-width: 767.98px) {
    .app-topbar { background: #0d5d9f; }
    .app-nav-list .nav-item.active .nav-link {
        border-left-color: #0f6fbd;
        background: #e8f3fd;
    }
}

/* ===== V7.7.4 readability hotfix: prevent white text on light surfaces ===== */
.card,
.card-body,
.card-header,
.table,
.table td,
.table th,
.report-sheet,
.dropdown-menu,
.modal-content,
.bg-white,
.bg-light,
.btn-light,
.form-control,
.form-select,
.previous-suggestions,
.day-empty-state {
    color: #182433;
}

.bg-white .text-body,
.bg-light .text-body,
.card .text-body,
.dropdown-menu .text-body {
    color: #182433 !important;
}

.bg-white .text-secondary,
.bg-light .text-secondary,
.card .text-secondary,
.dropdown-menu .text-secondary,
.bg-white .text-muted,
.bg-light .text-muted {
    color: #5b6879 !important;
}

.btn-light,
.btn-light:hover,
.btn-light:focus {
    color: #183247 !important;
    background-color: #ffffff;
    border-color: #c7d3df;
}

.dropdown-menu .dropdown-item {
    color: #25364a;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    color: #0b4f8a;
    background: #edf6ff;
}

.form-control,
.form-select,
.form-control::placeholder {
    color: #25364a;
}
.form-control::placeholder {
    color: #7a8795;
    opacity: 1;
}

/* Keep intentionally dark/colored surfaces readable after the safety rules above. */
.app-topbar,
.app-topbar .nav-link,
.app-topbar .text-body,
.app-topbar .text-secondary,
.btn-primary,
.btn-success,
.btn-danger,
.badge.bg-primary,
.badge.bg-success,
.badge.bg-danger,
.badge.bg-warning,
.badge.bg-info {
    color: #fff !important;
}

/* ===== HOTFIX: account dropdown must stay above the main navigation ===== */
.app-topbar {
    position: relative;
    z-index: 1050;
    overflow: visible !important;
}

.app-topbar .container-xl,
.app-topbar .navbar-nav,
.app-topbar .nav-item.dropdown {
    overflow: visible !important;
}

.app-topbar .nav-item.dropdown {
    position: relative;
    z-index: 1060;
}

.user-account-menu {
    z-index: 1100 !important;
    min-width: 210px;
    box-shadow: 0 12px 30px rgba(24, 36, 51, .20);
}

.app-nav-shell {
    position: relative;
    z-index: 1020;
}

.page-wrapper {
    position: relative;
    z-index: 1;
}