@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

:root {
    --ink: #16212b;
    --muted: #687786;
    --paper: #f4f6f3;
    --surface: #ffffff;
    --line: #dfe5e1;
    --navy: #132d3a;
    --navy-soft: #1c4050;
    --teal: #167d78;
    --teal-dark: #0f6561;
    --amber: #e9a23b;
    --danger: #b84242;
}

/* 2026 interface refresh */
:root {
    --ink: #10233c;
    --muted: #637996;
    --paper: #f4f8fc;
    --surface: #ffffff;
    --line: #dfe9f3;
    --navy: #082b40;
    --navy-soft: #0b6273;
    --teal: #0597a3;
    --teal-dark: #047c87;
    --amber: #f59e0b;
    --danger: #ef4451;
    --blue: #1473e6;
    --green: #18b681;
    --violet: #6554e8;
    --shadow: 0 8px 30px rgba(26, 72, 111, .055);
}

* { box-sizing: border-box; }

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: var(--teal-dark); }

.login-page {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(500px, .92fr);
    overflow: hidden;
    background: #06283e;
}

.login-visual {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: clamp(3rem, 7vw, 7rem);
    color: white;
    background:
        radial-gradient(circle at 24% 30%, rgba(0, 123, 164, .26), transparent 34%),
        radial-gradient(circle at 78% 66%, rgba(0, 107, 163, .2), transparent 30%),
        linear-gradient(145deg, #063551 0%, #031b2e 78%, #041829 100%);
}

.login-visual::before {
    content: "";
    position: absolute;
    top: -23%;
    right: -16%;
    width: 58%;
    aspect-ratio: 1;
    border: 1px solid rgba(17, 170, 214, .2);
    border-radius: 50%;
    box-shadow: 0 0 0 70px rgba(6, 91, 133, .04), 0 0 0 140px rgba(6, 91, 133, .025);
}

.login-wave { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.login-wave path { vector-effect: non-scaling-stroke; stroke-width: 1.2; }
.login-wave .wave-dots { opacity: .72; }
.login-copy { position: relative; z-index: 1; width: 100%; max-width: 650px; transform: translateY(-9vh); }
.login-copy .eyebrow { margin-left: .4rem; color: #29d4df; font-size: clamp(.68rem, .85vw, .82rem); font-weight: 700; letter-spacing: .26em; text-transform: uppercase; }
.login-product { display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, 1.15rem); margin-top: 1rem; }
.login-product img { width: clamp(78px, 9vw, 128px); height: auto; filter: drop-shadow(0 14px 24px rgba(0, 8, 18, .32)); }
.login-copy h1 { margin: 0; color: #f7fbff; font-size: clamp(3.8rem, 7.7vw, 7.4rem); font-weight: 300; line-height: .9; letter-spacing: -.055em; text-shadow: 0 4px 20px rgba(0,0,0,.15); }
.login-accent { display: block; width: 72px; height: 8px; margin-top: 1.9rem; border-radius: 1px; background: linear-gradient(90deg, #13b8cf, #36e1e4); box-shadow: 0 0 18px rgba(28, 220, 228, .35); }
.login-site { position: absolute; z-index: 2; bottom: clamp(2.5rem, 6vh, 5.5rem); left: clamp(3rem, 7vw, 7rem); color: rgba(255,255,255,.78); font-size: .9rem; text-decoration: none; }
.login-site:hover { color: #54e3e8; }

.login-panel {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 5vw, 5rem);
    background:
        radial-gradient(circle at 20% 18%, rgba(162, 211, 239, .28), transparent 32%),
        linear-gradient(145deg, #f5faff 0%, #fff 55%, #edf6fc 100%);
}

.login-panel::before,
.login-panel::after { content: ""; position: absolute; pointer-events: none; border: 1px solid rgba(104, 175, 216, .14); border-radius: 50%; }
.login-panel::before { top: -20%; right: -25%; width: 90%; aspect-ratio: 1; box-shadow: 0 0 0 85px rgba(127, 195, 232, .035); }
.login-panel::after { bottom: -34%; left: -31%; width: 105%; aspect-ratio: 1; box-shadow: 0 0 0 100px rgba(127, 195, 232, .035); }
.login-card { position: relative; z-index: 1; width: min(100%, 520px); padding: clamp(2.5rem, 4.2vw, 4rem); border: 1px solid rgba(205, 220, 234, .9); border-radius: 24px; background: rgba(255,255,255,.94); box-shadow: 0 26px 70px rgba(28, 77, 113, .12); }
.login-logo { display: block; width: min(215px, 62vw); height: auto; margin: 0 auto; }
.brand-mark { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; color: white; background: var(--teal); font-weight: 800; letter-spacing: -.04em; box-shadow: 0 12px 28px rgba(22,125,120,.24); }
.login-card h2 { margin: 2.3rem 0 .35rem; color: #102a4b; font-size: clamp(1.8rem, 2.2vw, 2.15rem); font-weight: 760; letter-spacing: -.04em; }
.login-card .lead { margin: 0; color: #6e80a0; font-size: .98rem; }
.login-card .alert { margin: 1.3rem 0 -1rem; border: 0; border-radius: 11px; font-size: .84rem; }
.login-form { display: grid; gap: 1rem; margin-top: 2rem; }
.login-field { position: relative; }
.login-field > i { position: absolute; z-index: 1; top: 50%; left: 1.25rem; color: #172c69; font-size: 1.28rem; transform: translateY(-50%); }
.login-field .form-control { width: 100%; min-height: 62px; padding: .8rem 3.35rem .8rem 3.6rem; border: 1px solid #d4e0ec; border-radius: 13px; color: #17284a; background: #fff; font-size: .97rem; }
.login-field .form-control::placeholder { color: #71819e; opacity: 1; }
.login-field .form-control:focus { border-color: #1499ae; box-shadow: 0 0 0 .22rem rgba(20, 153, 174, .11); }
.password-toggle { position: absolute; z-index: 2; top: 50%; right: .8rem; display: grid; width: 42px; height: 42px; padding: 0; place-items: center; border: 0; border-radius: 9px; color: #162b68; background: transparent; font-size: 1.25rem; transform: translateY(-50%); }
.password-toggle:hover { color: #0797a4; background: #edf8fa; }
.password-toggle:focus-visible { outline: 3px solid rgba(5, 151, 163, .22); outline-offset: 1px; }
.login-submit { display: flex; width: 100%; min-height: 62px; align-items: center; justify-content: center; gap: .9rem; margin-top: .45rem; border: 0; border-radius: 13px; background: linear-gradient(105deg, #09a7b7, #057387); box-shadow: 0 13px 25px rgba(5, 126, 143, .2); font-size: 1rem; transition: transform .18s ease, box-shadow .18s ease; }
.login-submit:hover, .login-submit:focus { background: linear-gradient(105deg, #079aa9, #045f73); box-shadow: 0 15px 28px rgba(5, 126, 143, .27); transform: translateY(-1px); }
.login-submit i { font-size: 1.15rem; }
.login-note { margin: 2rem 0 0; padding-top: 1.45rem; border-top: 1px solid #dfe8f0; color: #7585a0; font-size: .77rem; text-align: center; }

.form-control, .form-select {
    min-height: 48px;
    border-color: #d6ddd8;
    border-radius: 10px;
}

.form-control:focus, .form-select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 .22rem rgba(22,125,120,.12);
}

.btn { min-height: 42px; border-radius: 9px; font-weight: 650; }
.btn-primary { --bs-btn-bg: var(--teal); --bs-btn-border-color: var(--teal); --bs-btn-hover-bg: var(--teal-dark); --bs-btn-hover-border-color: var(--teal-dark); }
.btn-outline-primary { --bs-btn-color: var(--teal-dark); --bs-btn-border-color: var(--teal); --bs-btn-hover-bg: var(--teal); --bs-btn-hover-border-color: var(--teal); }

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1030;
    width: 264px;
    padding: 1.25rem;
    color: white;
    background: var(--navy);
}

.sidebar-brand { display: flex; align-items: center; gap: .8rem; padding: .35rem .45rem 1.4rem; color: white; text-decoration: none; }
.sidebar-brand strong { display: block; font-size: 1rem; }
.sidebar-brand small { color: rgba(255,255,255,.5); font-size: .72rem; }
.sidebar .brand-mark { width: 40px; height: 40px; border-radius: 12px; }
.brand-logo { flex: 0 0 auto; width: 40px; height: 40px; object-fit: contain; }
.sidebar-label { margin: 1.35rem .75rem .5rem; color: rgba(255,255,255,.38); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sidebar-nav { display: grid; gap: .3rem; }
.sidebar-nav a { display: flex; align-items: center; gap: .8rem; padding: .72rem .8rem; border-radius: 9px; color: rgba(255,255,255,.68); text-decoration: none; font-weight: 600; font-size: .92rem; }
.sidebar-nav a:hover, .sidebar-nav a.active { color: white; background: var(--navy-soft); }
.nav-icon { width: 1.4rem; text-align: center; opacity: .9; }
.mobile-logout { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.12); }
.mobile-logout-button { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .72rem .8rem; border: 0; border-radius: 9px; color: white; background: rgba(255,255,255,.08); font-weight: 650; text-align: left; }
.mobile-logout-button:hover { background: var(--navy-soft); }

.app-main { min-height: 100vh; margin-left: 264px; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.86); backdrop-filter: blur(14px); }
.topbar-user { color: var(--muted); font-size: .9rem; }
.content { padding: clamp(1.25rem, 3vw, 2.5rem); }
.content-wrap { max-width: 1320px; margin: 0 auto; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.7rem; }
.page-heading h1 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.4rem); letter-spacing: -.04em; }
.page-heading p { margin: .4rem 0 0; color: var(--muted); }

.panel { border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 8px 26px rgba(21,45,55,.04); }
.panel-header { padding: 1.15rem 1.3rem; border-bottom: 1px solid var(--line); }
.panel-body { padding: 1.35rem; }

.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.metric-card { position: relative; overflow: hidden; min-height: 150px; padding: 1.4rem; border: 1px solid var(--line); border-radius: 15px; background: white; }
.metric-card::after { content: ""; position: absolute; width: 95px; height: 95px; right: -30px; top: -32px; border-radius: 50%; background: rgba(22,125,120,.08); }
.metric-label { color: var(--muted); font-size: .82rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.metric-value { margin-top: .65rem; font-size: 2.5rem; line-height: 1; font-weight: 780; letter-spacing: -.05em; }
.metric-note { margin-top: .8rem; color: var(--muted); font-size: .82rem; }

.table { margin: 0; }
.table > :not(caption) > * > * { padding: .95rem 1rem; border-bottom-color: var(--line); vertical-align: middle; }
.table thead th { color: var(--muted); background: #fafbf9; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; }
.badge-soft-success { color: #176b4a; background: #e5f5ec; }
.badge-soft-danger { color: #9a3535; background: #f9e7e7; }
.badge-soft-neutral { color: #4f6170; background: #edf1f3; }
.role-badge { display: inline-block; margin: .12rem; padding: .28rem .5rem; border-radius: 6px; color: #225c62; background: #e4f1f1; font-size: .72rem; font-weight: 700; }
.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }

.checkbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.choice-card { display: block; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfa; cursor: pointer; }
.choice-card:hover { border-color: #aacbc8; }
.choice-card .form-check-input { margin-right: .55rem; }
.choice-title { font-weight: 680; }
.choice-desc { display: block; margin: .25rem 0 0 1.6rem; color: var(--muted); font-size: .8rem; }
.pagination .page-link { color: var(--teal-dark); }
.pagination .active > .page-link { border-color: var(--teal); background: var(--teal); }

@media (max-width: 991.98px) {
    .login-page { display: block; overflow: auto; background: #edf5fb; }
    .login-visual { display: none; }
    .login-panel {
        min-height: 100vh;
        min-height: 100svh;
        padding: clamp(1.25rem, 5vw, 3rem);
        background:
            radial-gradient(circle at 5% 8%, rgba(91, 184, 222, .26), transparent 29%),
            radial-gradient(circle at 98% 0, rgba(55, 104, 166, .15), transparent 32%),
            linear-gradient(155deg, #f8fcff 0%, #edf4fa 60%, #e7f1f8 100%);
    }
    .login-panel::before { top: -120px; right: -120px; width: 320px; box-shadow: 0 0 0 52px rgba(100, 172, 211, .045); }
    .login-panel::after { bottom: -170px; left: -170px; width: 380px; box-shadow: 0 0 0 60px rgba(100, 172, 211, .035); }
    .login-card {
        width: min(100%, 480px);
        padding: clamp(1.75rem, 7vw, 3rem);
        border-color: rgba(255,255,255,.88);
        border-radius: 22px;
        background: rgba(255,255,255,.93);
        box-shadow: 0 22px 60px rgba(31, 65, 96, .14), 0 3px 12px rgba(31, 65, 96, .05);
        backdrop-filter: blur(18px);
    }
    .login-header { text-align: center; }
    .login-logo { width: min(185px, 55vw); }
    .login-card h2 { margin-top: 1.8rem; font-size: clamp(1.75rem, 7vw, 2.05rem); }
    .login-card .lead { font-size: .92rem; line-height: 1.5; }
    .login-form { margin-top: 1.7rem; }
    .login-field .form-control, .login-submit { min-height: 58px; }
    .sidebar { display: none; }
    .app-main { margin-left: 0; }
    .topbar { height: 64px; padding: 0 1rem; }
    .metric-grid { grid-template-columns: 1fr; }
    .offcanvas { color: white; background: var(--navy); }
}

@media (max-width: 767.98px) {
    .page-heading { align-items: stretch; flex-direction: column; }
    .page-heading .btn { width: 100%; }
    .checkbox-grid { grid-template-columns: 1fr; }
    .responsive-table thead { display: none; }
    .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; }
    .responsive-table tr { padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
    .responsive-table td { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border: 0; text-align: right; }
    .responsive-table td::before { content: attr(data-label); flex: 0 0 38%; color: var(--muted); font-size: .72rem; font-weight: 700; text-align: left; text-transform: uppercase; }
    .responsive-table td.actions-cell { display: block; padding-top: .8rem; }
    .responsive-table td.actions-cell::before { display: none; }
    .actions { justify-content: stretch; }
    .actions .btn, .actions form { flex: 1; }
    .actions form .btn { width: 100%; }
}

/* --- Teren: krupni elementi za rad na telefonu --- */
.big-action {
    display: block;
    width: 100%;
    padding: 1.15rem 1.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    border-radius: 14px;
}
.pick-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    text-align: left;
    padding: 1rem 1.15rem;
    margin-bottom: .65rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
}
.pick-card:hover, .pick-card:focus { border-color: var(--teal); color: var(--ink); }
.pick-card .pick-title { font-size: 1.1rem; font-weight: 700; line-height: 1.25; }
.pick-card .pick-sub { font-size: .9rem; color: var(--muted); }
.pick-card .pick-go { font-size: 1.6rem; color: var(--muted); line-height: 1; }
.pick-card.is-done { opacity: .62; }

.check-item { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.check-item:last-child { border-bottom: 0; }
.check-item .check-label { font-size: 1.05rem; font-weight: 600; margin-bottom: .6rem; }
.answer-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.answer-buttons .btn { flex: 1 1 auto; min-width: 8.5rem; padding: .7rem .8rem; font-size: 1rem; font-weight: 600; }

.step-bar {
    position: sticky; bottom: 0; z-index: 5;
    background: var(--paper);
    border-top: 1px solid var(--line);
    padding: .85rem 0;
    margin-top: 1rem;
}
.section-head {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    width: 100%; text-align: left; border: 0; background: transparent;
    padding: 1rem 0; font-size: 1.05rem; font-weight: 700; color: var(--ink);
}
.section-head .section-state { font-size: .85rem; font-weight: 600; color: var(--muted); }

@media (max-width: 575.98px) {
    .answer-buttons .btn { flex: 1 1 100%; }
}

/* Shared application shell */
body { background: #f3f8fc; font-size: 14px; }
a { transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease; }
.sidebar {
    display: flex; flex-direction: column; width: 252px; padding: 18px 20px 16px; overflow-y: auto;
    background: linear-gradient(180deg, #082b40 0%, #092f45 55%, #082a3d 100%);
    box-shadow: inset -1px 0 rgba(255,255,255,.035);
}
.sidebar-brand { gap: 13px; padding: 3px 7px 24px; border-bottom: 1px solid rgba(255,255,255,.045); }
.sidebar-brand .brand-logo { width: 42px; height: 42px; filter: drop-shadow(0 7px 12px rgba(0,0,0,.2)); }
.sidebar-brand strong { font-size: 18px; line-height: 1.2; letter-spacing: -.02em; }
.sidebar-brand small { margin-top: 3px; color: #8ea7ba; font-size: 12px; }
.sidebar-label { margin: 24px 7px 7px; color: #88a3b7; font-size: 10px; letter-spacing: .14em; }
.sidebar-nav { gap: 3px; }
.sidebar-nav a { gap: 11px; padding: 10px 12px; border-radius: 11px; color: #bfd0dc; font-size: 14px; font-weight: 520; }
.sidebar-nav a:hover { color: #fff; background: rgba(255,255,255,.065); }
.sidebar-nav a.active { color: #fff; background: linear-gradient(90deg, #08768a, #0b697b); box-shadow: 0 8px 18px rgba(0,0,0,.13); }
.sidebar-nav .nav-icon { width: 20px; color: #a7c2d3; font-size: 17px; opacity: 1; }
.sidebar-nav a.active .nav-icon { color: #87eaf0; }
.sidebar-logout { display: flex; align-items: center; gap: 11px; padding: 10px 12px; color: #bfd0dc; font-size: 14px; font-weight: 520; }
.sidebar-footer { position: relative; min-height: 94px; margin-top: auto; padding: 54px 7px 0; color: #7592a6; font-size: 12px; overflow: hidden; }
.sidebar-footer span, .sidebar-footer small { position: relative; z-index: 1; display: block; }
.sidebar-footer small { margin-top: 4px; }
.sidebar-wave { position: absolute; top: 15px; left: -30px; width: 260px; height: 55px; border-top: 1px solid rgba(3, 203, 218, .5); border-radius: 50%; transform: rotate(-8deg); }
.sidebar-wave::after { content: ""; position: absolute; top: 10px; left: 0; width: 260px; height: 44px; border-top: 1px solid rgba(3, 203, 218, .12); border-radius: 50%; }

.app-main { margin-left: 252px; }
.topbar {
    position: sticky; top: 0; z-index: 1020; height: 62px; padding: 0 28px 0 32px;
    border-color: #dde8f2; background: rgba(255,255,255,.94); box-shadow: 0 1px 8px rgba(22,68,105,.025);
}
.topbar-search { display: flex; align-items: center; width: min(485px, 48vw); height: 38px; padding: 0 11px; border: 1px solid #dce7f2; border-radius: 10px; background: #f8fbfe; }
.topbar-search > i { margin-right: 10px; color: #102a43; font-size: 16px; }
.topbar-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.topbar-search input::placeholder { color: #7187a1; }
.topbar-search kbd { padding: 2px 5px; border: 1px solid #dbe6f0; border-radius: 5px; color: #6d8299; background: #f1f6fa; box-shadow: none; font: 10px/1.3 inherit; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.notification-button { position: relative; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: #18324b; background: #f5f9fc; font-size: 17px; }
.notification-button:hover { color: var(--teal); background: #eaf5f7; }
.notification-button span { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: var(--danger); }
.user-menu { display: flex; align-items: center; gap: 11px; padding: 0; border: 0; color: var(--ink); background: transparent; text-align: left; }
.user-avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: #fff; background: #5f748b; font-size: 12px; font-weight: 700; }
.user-copy strong, .user-copy small { display: block; white-space: nowrap; }
.user-copy strong { font-size: 12px; line-height: 1.25; }
.user-copy small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.user-menu > i { margin-left: 12px; font-size: 11px; }
.user-dropdown { min-width: 190px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 35px rgba(20,57,88,.13); }
.user-dropdown .dropdown-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px; color: var(--ink); font-size: 13px; }
.mobile-menu-button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fff; font-size: 20px; }

.content { padding: 22px 32px 34px; }
.content-wrap { max-width: 1460px; }
.page-heading { margin-bottom: 22px; }
.page-heading h1 { color: #10233c; font-size: clamp(26px, 2.5vw, 34px); font-weight: 760; letter-spacing: -.035em; }
.page-heading p { margin-top: 4px; color: #657b98; font-size: 14px; }
.eyebrow { color: #28a7b4; font-size: 11px; letter-spacing: .105em; }
.panel { border-color: #dfe9f3; border-radius: 13px; box-shadow: var(--shadow); }
.panel-header { padding: 15px 18px; border-color: #e5edf5; }
.panel-body { padding: 18px; }
.btn { min-height: 38px; border-radius: 9px; font-size: 13px; font-weight: 650; }
.btn-primary { box-shadow: 0 5px 12px rgba(5,151,163,.15); }
.form-control, .form-select { min-height: 44px; border-color: #d9e4ee; border-radius: 9px; background-color: #fbfdff; font-size: 13px; }
.table > :not(caption) > * > * { padding: 13px 15px; border-bottom-color: #e8eff5; }
.table thead th { color: #6b8097; background: #f8fbfd; font-size: 10px; }
.table tbody tr:hover { background: #fbfdff; }
.badge { padding: 6px 9px; font-weight: 650; }
.role-badge { border-radius: 7px; color: #08727b; background: #e6f6f6; }

/* Dashboard */
.dashboard-content { padding-top: 20px; }
.dashboard-hero { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; min-height: 104px; margin-bottom: 15px; }
.dashboard-hero h1 { margin: 4px 0 0; color: #10233c; font-size: 35px; font-weight: 770; letter-spacing: -.04em; }
.dashboard-hero > div > p { margin: 3px 0 0; color: #657b98; font-size: 14px; }
.welcome-card { position: relative; min-height: 104px; padding: 15px 110px 12px 22px; overflow: hidden; border-radius: 0 0 14px 14px; }
.welcome-card::before, .welcome-card::after { content: ""; position: absolute; right: 10px; bottom: -30px; width: 210px; height: 100px; border-radius: 50% 50% 0 0; background: linear-gradient(145deg, rgba(60,160,201,.08), rgba(60,160,201,.18)); transform: rotate(-8deg); }
.welcome-card::after { right: -65px; bottom: -20px; width: 180px; height: 115px; background: rgba(75,165,203,.1); transform: rotate(6deg); }
.welcome-date { display: flex; align-items: center; gap: 8px; color: #607995; font-size: 11px; }
.welcome-card h2 { position: relative; z-index: 1; margin: 8px 0 0; font-size: 20px; font-weight: 740; letter-spacing: -.025em; }
.welcome-card p { position: relative; z-index: 1; margin: 2px 0 0; color: #6b8099; font-size: 11px; }
.welcome-art { position: absolute; z-index: 1; right: 47px; top: 20px; color: rgba(37,157,193,.42); font-size: 54px; }
.password-notice { display: flex; align-items: center; gap: 16px; min-height: 74px; margin-bottom: 15px; padding: 12px 20px; border: 1px solid #f8d28a; border-radius: 12px; background: linear-gradient(90deg, #fff7e5, #fffbef); }
.notice-icon { display: grid; flex: 0 0 44px; height: 44px; place-items: center; border-radius: 50%; color: #dd7400; background: #ffebbd; font-size: 19px; }
.password-notice > div { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.password-notice strong { color: #b55200; font-size: 13px; }
.password-notice div span { color: #4d6176; font-size: 11px; }
.notice-button { min-width: 132px; border: 1px solid #e97b13; border-radius: 20px; color: #ad4b00; background: transparent; font-size: 11px; }
.notice-button:hover { color: #fff; background: #e97b13; }
.notice-close { margin-left: 8px; color: #7b8792; font-size: 13px; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 15px; }
.dashboard-metric { display: flex; align-items: center; gap: 14px; min-width: 0; min-height: 108px; padding: 14px 16px; border: 1px solid #dfe8f1; border-radius: 12px; color: var(--ink); background: #fff; box-shadow: var(--shadow); text-decoration: none; }
a.dashboard-metric:hover { color: var(--ink); border-color: #bcdde2; transform: translateY(-2px); }
.metric-icon, .section-icon { display: grid; flex: 0 0 54px; height: 54px; place-items: center; border-radius: 50%; font-size: 23px; }
.icon-blue { color: #1372e6; background: linear-gradient(145deg,#e8f3ff,#cce4ff); }
.icon-green { color: #05a875; background: linear-gradient(145deg,#e6fbf2,#c4f1de); }
.icon-red { color: #f04450; background: linear-gradient(145deg,#ffeded,#ffd4d8); }
.icon-violet { color: #5945e6; background: linear-gradient(145deg,#f1efff,#dcd6ff); }
.metric-copy { min-width: 0; flex: 1; }
.metric-copy strong, .metric-copy b, .metric-copy small { display: block; }
.metric-copy strong { font-size: 11px; }
.metric-copy b { margin: 5px 0 3px; font-size: 30px; line-height: 1; letter-spacing: -.04em; }
.metric-copy small { overflow: hidden; color: #7085a0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.metric-arrow { color: #66809c; font-size: 12px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.32fr) minmax(390px,1fr); gap: 15px; margin-bottom: 15px; }
.dashboard-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 17px 13px; }
.panel-title { display: flex; align-items: center; gap: 11px; }
.title-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #102f49; background: #f2f7fb; font-size: 17px; }
.panel-title h2 { margin: 0; font-size: 15px; font-weight: 740; letter-spacing: -.02em; }
.panel-title p { margin: 2px 0 0; color: #6a809c; font-size: 10px; }
.month-switcher { display: flex; align-items: center; height: 36px; border: 1px solid #dfe8f2; border-radius: 9px; overflow: hidden; }
.month-switcher a { display: grid; width: 35px; height: 100%; place-items: center; color: #15314c; text-decoration: none; }
.month-switcher a:hover { background: #f1f7fb; }
.month-switcher span { padding: 0 13px; border-right: 1px solid #edf1f5; border-left: 1px solid #edf1f5; font-size: 11px; font-weight: 650; white-space: nowrap; }
.month-summary { display: grid; grid-template-columns: repeat(4,1fr); margin: 0 17px; padding: 14px 0; border-top: 1px solid #e7eef5; }
.month-summary > div { padding: 0 14px; border-right: 1px solid #e5edf4; }
.month-summary > div:first-child { padding-left: 0; }.month-summary > div:last-child { border: 0; }
.month-summary b { display: block; margin-bottom: 5px; font-size: 25px; line-height: 1; }
.month-summary span { display: flex; align-items: center; gap: 6px; color: #657b97; font-size: 10px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }.dot-blue { background: #1473e6; }.dot-green { background: #18b681; }.dot-red { background: #f05a62; }.dot-violet { background: #6554e8; }
.bar-chart { position: relative; display: flex; align-items: stretch; gap: 15px; height: 178px; margin: 0 17px; padding: 17px 5px 24px; border-top: 1px solid #edf2f6; }
.chart-grid-lines { position: absolute; inset: 17px 0 24px; display: flex; flex-direction: column; justify-content: space-between; }
.chart-grid-lines span { border-top: 1px solid #e8eff5; }
.week-column { position: relative; z-index: 1; display: flex; min-width: 0; flex: 1; flex-direction: column; justify-content: flex-end; }
.bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; }
.bar { width: min(19px,28%); height: var(--bar-height); min-height: 0; border-radius: 4px 4px 1px 1px; }
.bar.planned { background: linear-gradient(#d7eaff 25%,#8fc5ff 25%); }.bar.completed { background: #2bc195; }.bar.overdue { background: #f26a70; }
.week-label { position: absolute; right: 0; bottom: -20px; left: 0; color: #667d97; font-size: 10px; text-align: center; }
.chart-legend, .calendar-legend { display: flex; align-items: center; justify-content: center; gap: 28px; padding: 8px 15px 14px; color: #667d97; font-size: 10px; }
.chart-legend span, .calendar-legend span { display: flex; align-items: center; gap: 6px; }
.calendar-panel .dashboard-panel-header { padding-bottom: 10px; }
.calendar-panel .btn { min-height: 34px; border-radius: 9px; font-size: 10px; }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; margin: 0 16px; padding: 8px; border-radius: 9px 9px 0 0; background: #f7fafe; }
.calendar-toolbar > a { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; color: #284662; text-decoration: none; }
.calendar-toolbar > a:hover { color: #087f8b; background: #e8f3f7; }
.calendar-toolbar > div { display: flex; align-items: center; gap: 9px; }
.calendar-toolbar strong { font-size: 13px; }
.calendar-today { padding: 3px 7px; border: 1px solid #cce0ec; border-radius: 12px; color: #087e89; font-size: 9px; font-weight: 700; line-height: 1; text-decoration: none; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7,1fr); margin: 0 16px; }
.calendar-weekdays span { padding: 6px 0; color: #516983; font-size: 9px; text-align: center; }
.calendar-grid { overflow: hidden; border-top: 1px solid #e7eef5; border-left: 1px solid #e7eef5; border-radius: 8px; }
.calendar-day { position: relative; display: flex; min-width: 0; min-height: 44px; align-items: flex-start; justify-content: space-between; padding: 6px; border: 0; border-right: 1px solid #e7eef5; border-bottom: 1px solid #e7eef5; color: #18334f; background: #fff; font-size: 10px; text-decoration: none; }
a.calendar-day:hover { z-index: 1; color: #102d49; background: #f1f8fb; box-shadow: inset 0 0 0 1px #8dcbd2; }
a.calendar-day:focus-visible { z-index: 2; outline: 3px solid rgba(5,151,163,.3); outline-offset: -3px; }
.calendar-day > span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; }
.calendar-day > b { display: grid; min-width: 18px; height: 18px; padding: 0 5px; place-items: center; border-radius: 9px; color: #fff; background: #1473e6; font-size: 9px; line-height: 1; }
.calendar-day.planned { background: #f6faff; }.calendar-day.active { background: #f8f6ff; }.calendar-day.completed { background: #f3fcf8; }.calendar-day.overdue { background: #fff7f7; }.calendar-day.outcome { background: #f7f8fa; }
.calendar-day.active > b { background: #6554e8; }.calendar-day.completed > b { background: #18a978; }.calendar-day.overdue > b { background: #ef4451; }.calendar-day.outcome > b { background: #8593a2; }
.calendar-day.today > span { color: #fff; background: #0796a2; box-shadow: 0 4px 10px rgba(7,150,162,.22); font-weight: 750; }
.calendar-day.selected { z-index: 1; box-shadow: inset 0 0 0 2px #0796a2; }
.calendar-day.outside { color: #a4b0bd; background: #f7f9fc; }
.dot-gray { background: #8593a2; }
.calendar-legend { flex-wrap: wrap; gap: 7px 14px; padding-top: 11px; }
.calendar-unscheduled { display: flex; align-items: center; gap: 10px; margin: 0 16px 14px; padding: 10px 12px; border: 1px solid #f2d39c; border-radius: 9px; background: #fffaf0; }
.calendar-unscheduled-icon { display: grid; flex: 0 0 30px; height: 30px; place-items: center; border-radius: 50%; color: #bd6908; background: #ffedc8; font-size: 14px; }
.calendar-unscheduled > div { min-width: 0; flex: 1; }.calendar-unscheduled strong, .calendar-unscheduled small { display: block; }.calendar-unscheduled strong { color: #8e5009; font-size: 10px; }.calendar-unscheduled small { margin-top: 2px; color: #7b6a55; font-size: 9px; }
.calendar-unscheduled > a { color: #9d5909; font-size: 9px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.calendar-details { margin: 0 16px 16px; padding-top: 13px; border-top: 1px solid #e5edf4; scroll-margin-top: 76px; }
.calendar-details:focus { outline: 0; }
.calendar-details-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.calendar-details-heading span { color: #7589a0; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.calendar-details-heading h3 { margin: 2px 0 0; font-size: 13px; font-weight: 740; }.calendar-details-heading > b { display: grid; min-width: 28px; height: 28px; padding: 0 8px; place-items: center; border-radius: 14px; color: #087c87; background: #e6f6f7; font-size: 11px; }
.calendar-visit-list { display: grid; gap: 7px; }
.calendar-visit { position: relative; display: grid; grid-template-columns: 4px minmax(0,1fr) auto 28px; align-items: center; gap: 10px; min-height: 58px; padding: 8px 8px 8px 0; overflow: hidden; border: 1px solid #e1eaf2; border-radius: 9px; background: #fff; }
.calendar-visit-state { align-self: stretch; border-radius: 0 4px 4px 0; background: #1473e6; }.calendar-visit-state.is-active { background: #6554e8; }.calendar-visit-state.is-completed { background: #18b681; }.calendar-visit-state.is-overdue { background: #ef4451; }.calendar-visit-state.is-outcome { background: #8593a2; }
.calendar-visit-copy { min-width: 0; }.calendar-visit-copy strong, .calendar-visit-copy > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.calendar-visit-copy strong { color: #17314b; font-size: 11px; }.calendar-visit-copy > span { margin-top: 2px; color: #71859a; font-size: 9px; }.calendar-visit-copy i { margin-right: 2px; }
.calendar-status { padding: 4px 7px; border-radius: 10px; color: #526a81; background: #eff4f8; font-size: 8px; font-weight: 700; white-space: nowrap; }
.calendar-open { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: #087f8a; text-decoration: none; }.calendar-open:hover { color: #fff; background: #0796a2; }
.calendar-day-empty { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; padding: 12px; border: 1px dashed #d8e4ed; border-radius: 9px; color: #73879b; background: #f9fbfd; font-size: 10px; }.calendar-day-empty i { color: #0796a2; font-size: 16px; }
.admin-overview { margin-bottom: 8px; }
.admin-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 0 17px 16px; }
.admin-metrics > a { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 13px 15px; border: 1px solid #dfe9f3; border-radius: 11px; color: var(--ink); text-decoration: none; }
.admin-metrics > a:hover { border-color: #bddde2; transform: translateY(-1px); }
.admin-metrics > a > span:nth-child(2) { min-width: 0; flex: 1; }.admin-metrics small,.admin-metrics b,.admin-metrics em { display: block; }.admin-metrics small { color: #3f5873; font-size: 10px; }.admin-metrics b { margin: 2px 0; font-size: 25px; line-height: 1; }.admin-metrics em { overflow: hidden; color: #70859e; font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }.admin-metrics > a > i { color: #66809c; font-size: 11px; }
.admin-metrics .metric-icon { flex-basis: 46px; height: 46px; font-size: 20px; }

/* Global search */
.search-page { max-width: 1050px; }
.search-hero { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; margin-bottom: 26px; }
.search-hero > i { color: #627b94; font-size: 18px; }.search-hero input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 14px; }.search-hero button { min-width: 100px; }
.search-section { margin-bottom: 26px; }.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }.section-title > div { display: flex; align-items: center; gap: 10px; }.section-title h2 { margin: 0; font-size: 16px; }.section-title a { font-size: 12px; text-decoration: none; }.section-icon { flex-basis: 36px; height: 36px; font-size: 16px; }
.search-results-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }.search-result { position: relative; display: flex; flex-direction: column; padding: 14px 42px 14px 16px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fff; text-decoration: none; box-shadow: var(--shadow); }.search-result:hover { color: var(--ink); border-color: #acd5da; transform: translateY(-1px); }.search-result strong { font-size: 13px; }.search-result span { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.search-result > i { position: absolute; right: 16px; top: 50%; color: #7890a7; transform: translateY(-50%); }
.empty-state { padding: 55px 20px; color: var(--muted); text-align: center; }.empty-state > i { display: block; margin-bottom: 10px; font-size: 30px; }.empty-state h2 { color: var(--ink); font-size: 18px; }.empty-state p { margin: 0; }

/* Field workflow, login and system pages */
.big-action { border-radius: 12px; box-shadow: 0 8px 18px rgba(5,151,163,.16); }
.pick-card { border-color: #dfe9f3; border-radius: 12px; box-shadow: 0 5px 18px rgba(26,72,111,.035); }
.pick-card:hover, .pick-card:focus { border-color: #80cbd1; box-shadow: 0 9px 24px rgba(26,72,111,.07); transform: translateY(-1px); }
.pick-card .pick-go { color: #0c929d; }.check-item { border-color: #e7eef5; }
.step-bar { border-color: #dae6ef; background: rgba(243,248,252,.94); backdrop-filter: blur(10px); }
.error-page { display: grid; min-height: 100vh; padding: 24px; place-items: center; background: radial-gradient(circle at 12% 10%,rgba(10,157,169,.14),transparent 30%),radial-gradient(circle at 90% 90%,rgba(31,102,169,.1),transparent 28%),#f3f8fc; }
.error-card { width: min(100%,560px); text-align: center; }.error-card .panel-body { padding: clamp(35px,7vw,62px); }.error-icon { display: grid; width: 66px; height: 66px; margin: 0 auto 20px; place-items: center; border-radius: 50%; color: #087f89; background: #e3f6f7; font-size: 28px; }.error-card h1 { margin: 8px 0 12px; font-size: 28px; }.error-card p { margin: 0 auto 24px; color: var(--muted); line-height: 1.65; }

@media (max-width: 1199.98px) {
    .dashboard-metrics { grid-template-columns: repeat(2,1fr); }
    .dashboard-grid { grid-template-columns: 1fr; }
    .calendar-day { min-height: 44px; }
}
@media (max-width: 991.98px) {
    .sidebar { display: none; }.app-main { margin-left: 0; }
    .topbar { height: 64px; padding: 0 16px; gap: 12px; }.topbar-search { width: min(520px,70vw); }.user-copy,.user-menu > i,.topbar-search kbd { display: none; }.topbar-actions { gap: 8px; }
    .offcanvas { background: linear-gradient(180deg,#082b40,#092f45); }.offcanvas-body { padding: 16px 20px; }.mobile-sidebar-nav { gap: 4px; }
    .dashboard-hero { grid-template-columns: 1fr; }.welcome-card { display: none; }
}
@media (max-width: 767.98px) {
    .content { padding: 18px 15px 28px; }.dashboard-hero h1 { font-size: 29px; }
    .password-notice { align-items: flex-start; flex-wrap: wrap; }.password-notice > div { min-width: calc(100% - 65px); }.notice-button { margin-left: 60px; }.notice-close { display: none; }
    .dashboard-metrics { grid-template-columns: 1fr 1fr; gap: 10px; }.dashboard-metric { min-height: 102px; padding: 12px; }.metric-icon { flex-basis: 44px; height: 44px; font-size: 19px; }.metric-copy small { display: none; }
    .dashboard-panel-header { align-items: flex-start; flex-direction: column; }.calendar-panel .dashboard-panel-header { flex-direction: row; }.month-switcher { align-self: stretch; justify-content: space-between; }.month-switcher span { flex: 1; text-align: center; }
    .month-summary > div { padding: 0 8px; }.month-summary b { font-size: 21px; }.month-summary span { font-size: 9px; }
    .admin-metrics { grid-template-columns: 1fr; }.search-results-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .login-panel { align-items: center; padding: 16px; }
    .login-card { padding: 28px 22px 24px; border-radius: 19px; }
    .login-logo { width: min(165px, 52vw); }
    .login-card h2 { margin-top: 1.55rem; }
    .login-card .lead { font-size: .88rem; }
    .login-card .alert { margin-top: 1rem; font-size: .8rem; }
    .login-form { gap: .85rem; margin-top: 1.45rem; }
    .login-field .form-control { min-height: 56px; padding-left: 3.25rem; font-size: .93rem; }
    .login-field > i { left: 1.1rem; }
    .login-submit { min-height: 56px; margin-top: .25rem; }
    .login-note { margin-top: 1.55rem; padding-top: 1.2rem; font-size: .72rem; }
    .topbar-search { flex: 1; width: auto; }.topbar-search input::placeholder { color: transparent; }.notification-button { display: none; }.user-avatar { width: 34px; height: 34px; }
    .dashboard-metrics { grid-template-columns: 1fr; }.dashboard-metric { min-height: 88px; }.metric-copy small { display: block; }
    .month-summary { grid-template-columns: repeat(2,1fr); row-gap: 14px; }.month-summary > div:nth-child(2) { border: 0; }.month-summary > div:nth-child(3) { padding-left: 0; }.bar-chart { gap: 6px; }
    .calendar-panel .dashboard-panel-header { flex-direction: column; }.calendar-panel .btn { width: 100%; }
    .calendar-toolbar, .calendar-weekdays, .calendar-grid { margin-right: 10px; margin-left: 10px; }
    .calendar-day { min-height: 44px; padding: 5px 4px; }
    .calendar-day > span { width: 21px; height: 21px; }.calendar-day > b { min-width: 17px; height: 17px; padding: 0 4px; }
    .calendar-legend { gap: 7px 11px; padding-right: 10px; padding-left: 10px; }
    .calendar-unscheduled, .calendar-details { margin-right: 10px; margin-left: 10px; }
    .calendar-unscheduled { align-items: flex-start; }.calendar-unscheduled small { line-height: 1.35; }.calendar-unscheduled > a { align-self: center; }
    .calendar-visit { grid-template-columns: 4px minmax(0,1fr) 28px; gap: 8px; min-height: 68px; }
    .calendar-visit-state { grid-row: 1 / 3; }
    .calendar-visit-copy { grid-column: 2; grid-row: 1; }
    .calendar-status { grid-column: 2; grid-row: 2; justify-self: start; }
    .calendar-open { grid-column: 3; grid-row: 1 / 3; }
    .chart-legend { gap: 14px; }.search-hero { flex-wrap: wrap; }.search-hero input { width: calc(100% - 35px); }.search-hero button { width: 100%; }
}

@media (max-width: 350px) {
    .login-panel { padding: 10px; }
    .login-card { padding-right: 18px; padding-left: 18px; }
    .calendar-toolbar, .calendar-weekdays, .calendar-grid { margin-right: 6px; margin-left: 6px; }
    .calendar-day { padding-right: 3px; padding-left: 3px; }
    .calendar-day > b { min-width: 15px; padding: 0 3px; }
}

@media (max-width: 991.98px) and (max-height: 680px) {
    .login-panel { align-items: flex-start; }
    .login-card { margin: 12px 0; }
    .login-logo { width: 145px; }
    .login-card h2 { margin-top: 1.2rem; }
    .login-form { margin-top: 1.2rem; }
    .login-note { margin-top: 1.25rem; padding-top: 1rem; }
}