/* ============================================================
   Durable Me — design system
   Loaded after Bootstrap, so anything set here wins.
   ============================================================ */

:root {
    /* Brand palette (blue-forward, healthcare SaaS) */
    --db-navy:      #0b2f52;
    --db-navy-700:  #0e3f6e;
    --db-blue:      #1668d8;  /* primary */
    --db-blue-600:  #1157bd;
    --db-blue-50:   #eaf2fe;
    --db-sky:       #7fb2ee;

    /* Neutrals / surfaces */
    --db-bg:        #eef3f9;
    --db-surface:   #ffffff;
    --db-border:    #dbe3ee;
    --db-text:      #1b2a3b;
    --db-muted:     #667588;

    /* Shape & depth */
    --db-radius:     12px;
    --db-radius-sm:  8px;
    --db-shadow-sm:  0 1px 2px rgba(11, 47, 82, .06);
    --db-shadow:     0 1px 2px rgba(11, 47, 82, .05), 0 8px 24px rgba(11, 47, 82, .07);

    /* Nudge Bootstrap links toward our brand blue */
    --bs-link-color-rgb: 22, 104, 216;
    --bs-link-hover-color-rgb: 17, 87, 189;
}

html { height: 100%; }

body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
    background-color: var(--db-bg);
    color: var(--db-text);
    min-height: 100vh;
    margin: 0;
}

/* ---------- Navbar ---------- */
.bg-navy {
    background: linear-gradient(90deg, var(--db-navy) 0%, var(--db-navy-700) 100%);
}
.navbar.bg-navy {
    box-shadow: 0 2px 12px rgba(11, 47, 82, .18);
    padding-top: .6rem;
    padding-bottom: .6rem;
}
.navbar-brand-custom {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: .2px;
    color: #ffffff !important;
}
.navbar-brand-custom .brand-mark {
    display: inline-flex;
    width: 30px;
    height: 30px;
}
.navbar-brand-custom .brand-mark svg {
    width: 30px;
    height: 30px;
    display: block;
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .82);
    font-weight: 500;
    border-radius: 8px;
    padding: .4rem .8rem;
    transition: background-color .15s ease, color .15s ease;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link.show {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}
/* Divider between the regular nav and the elevated-permission section.
   Deliberately understated -- a hairline, not a labeled boundary. */
.navbar-nav .nav-divider {
    display: flex;
    align-items: center;
}
.navbar-nav .nav-divider::before {
    content: "";
    display: block;
}
@media (min-width: 992px) {
    .navbar-nav .nav-divider::before {
        width: 1px;
        height: 22px;
        background: rgba(255, 255, 255, .18);
        margin: 0 .4rem;
    }
}

/* Collapsed (mobile) menu: a compact panel that drops from the hamburger and
   hugs the top-right, instead of Bootstrap's full-width vertical push-down. */
@media (max-width: 991.98px) {
    .navbar .container-fluid { position: relative; }

    #navMain.navbar-collapse {
        position: absolute;
        top: calc(100% + 10px);
        right: 12px;
        width: min(264px, calc(100vw - 24px));
        background: var(--db-surface);
        border: 1px solid var(--db-border);
        border-radius: 14px;
        box-shadow: var(--db-shadow);
        padding: 8px;
        /* Explicit stacking order: page content can otherwise paint above this
           (e.g. Bootstrap table cells set position: relative for their border
           trick, which without this promotes them ahead of this panel since
           they come later in the DOM -- an explicit z-index always wins over
           a positioned-but-auto-z-index element regardless of DOM order). */
        z-index: 1030;
    }
    #navMain .navbar-nav { width: 100%; }
    #navMain .navbar-nav .nav-link {
        color: var(--db-text);
        font-weight: 500;
        border-radius: 8px;
        padding: .6rem .8rem;
    }
    #navMain .navbar-nav .nav-link:hover,
    #navMain .navbar-nav .nav-link:focus,
    #navMain .navbar-nav .nav-link.show {
        color: var(--db-blue-600);
        background: var(--db-blue-50);
    }
    /* Divider collapses to a full-width hairline between the regular and
       elevated-permission nav items when the menu stacks vertically. */
    #navMain .nav-divider {
        width: 100%;
    }
    #navMain .nav-divider::before {
        width: 100%;
        height: 1px;
        background: var(--db-border);
        margin: .3rem 0;
    }
    /* Account row, divided off at the bottom of the panel. */
    #navMain form.d-flex {
        width: 100%;
        margin-top: 8px;
        padding-top: 10px;
        border-top: 1px solid var(--db-border);
        align-items: center;
        justify-content: space-between;
    }
    #navMain .navbar-text {
        color: var(--db-text) !important;
        margin: 0 !important;
    }
    #navMain form .btn-outline-light {
        color: var(--db-blue);
        border-color: var(--db-blue);
    }
    #navMain form .btn-outline-light:hover {
        color: #fff;
        background: var(--db-blue);
    }
}

/* ---------- Buttons ---------- */
.btn { border-radius: 9px; }
.btn-primary {
    --bs-btn-bg: var(--db-blue);
    --bs-btn-border-color: var(--db-blue);
    --bs-btn-hover-bg: var(--db-blue-600);
    --bs-btn-hover-border-color: var(--db-blue-600);
    --bs-btn-active-bg: var(--db-blue-600);
    --bs-btn-active-border-color: var(--db-blue-600);
    --bs-btn-disabled-bg: var(--db-blue);
    --bs-btn-disabled-border-color: var(--db-blue);
    font-weight: 600;
}
.btn-outline-primary {
    --bs-btn-color: var(--db-blue);
    --bs-btn-border-color: var(--db-blue);
    --bs-btn-hover-bg: var(--db-blue);
    --bs-btn-hover-border-color: var(--db-blue);
    --bs-btn-active-bg: var(--db-blue-600);
    --bs-btn-active-border-color: var(--db-blue-600);
    font-weight: 600;
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
    border-color: var(--db-border);
    border-radius: var(--db-radius-sm);
    padding: .5rem .75rem;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--db-sky);
    box-shadow: 0 0 0 .2rem rgba(22, 104, 216, .18);
}

/* ---------- Cards / surfaces ---------- */
.card {
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    box-shadow: var(--db-shadow-sm);
    background: var(--db-surface);
}

/* ---------- Tables ---------- */
.table > thead th {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .5px;
    color: var(--db-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--db-border);
}

/* ---------- Headings ---------- */
h1, .h1 { font-weight: 700; letter-spacing: -.01em; }
main h1 { font-size: 1.6rem; }

/* ---------- Auth (login) ---------- */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(1100px 480px at 50% -10%, rgba(22, 104, 216, .12), transparent 60%),
        var(--db-bg);
}
.auth-card { width: 100%; max-width: 400px; }
.auth-logo { text-align: center; margin-bottom: 22px; }
.auth-logo img {
    width: 220px;
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(11, 47, 82, .14));
}
.auth-panel {
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: 16px;
    box-shadow: var(--db-shadow);
    padding: 34px 32px;
}
.auth-title {
    text-align: center;
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 2px;
}
.auth-sub {
    text-align: center;
    color: var(--db-muted);
    font-size: .9rem;
    margin-bottom: 22px;
}
.auth-tagline {
    text-align: center;
    color: rgba(255, 255, 255, .76);
    font-size: .95rem;
    line-height: 1.5;
    margin-top: 26px;
    max-width: 360px;
    font-weight: 500;
}

/* ---------- Dashboard ---------- */
.dash-hero { margin-bottom: 1.5rem; }
.dash-hero h1 { margin-bottom: .15rem; }
.dash-hero p { color: var(--db-muted); margin: 0; }

.stat-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    box-shadow: var(--db-shadow-sm);
    padding: 1.1rem 1.2rem;
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
a.stat-card:hover {
    box-shadow: var(--db-shadow);
    transform: translateY(-2px);
    border-color: var(--db-sky);
    color: inherit;
}
.stat-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--db-blue-50);
    color: var(--db-blue);
}
.stat-icon svg { width: 22px; height: 22px; }
.stat-text { display: flex; flex-direction: column; }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.stat-label { color: var(--db-muted); font-size: .85rem; margin-top: .2rem; }

.section-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--db-muted);
    font-weight: 600;
    margin: 1.6rem 0 .7rem;
}

.quick-card {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    box-shadow: var(--db-shadow-sm);
    padding: 1.1rem 1.2rem;
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.quick-card:hover {
    box-shadow: var(--db-shadow);
    transform: translateY(-2px);
    border-color: var(--db-sky);
    color: inherit;
}
.quick-card .qc-title { font-weight: 600; }
.quick-card .qc-desc { color: var(--db-muted); font-size: .85rem; }
.quick-card.is-soon { opacity: .65; pointer-events: none; }
.quick-card .qc-badge {
    align-self: flex-start;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--db-muted);
    background: var(--db-blue-50);
    border-radius: 999px;
    padding: .1rem .5rem;
    margin-top: .2rem;
}

/* ---------- Placeholder empty state ---------- */
.empty-state {
    max-width: 520px;
    margin: 3rem auto;
    text-align: center;
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    box-shadow: var(--db-shadow-sm);
    padding: 2.5rem 2rem;
}
.empty-state .es-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--db-blue-50);
    color: var(--db-blue);
    display: grid;
    place-items: center;
    margin: 0 auto 1rem;
}
.empty-state .es-icon svg { width: 28px; height: 28px; }
.empty-state h1 { font-size: 1.4rem; }
.empty-state p { color: var(--db-muted); margin-bottom: 0; }

/* ---------- Data list (card-wrapped tables) ---------- */
.list-count {
    font-size: .9rem;
}
.list-card {
    padding: 0;
    overflow: hidden;
}
.list-card .table {
    margin-bottom: 0;
}
.list-card .table > thead th {
    background: var(--db-blue-50);
    padding: .8rem 1.15rem;
    border-bottom: 1px solid var(--db-border);
}
.list-card .table > tbody td {
    padding: .85rem 1.15rem;
    border-color: #eef1f6;
}
.list-card .table > tbody tr:last-child td {
    border-bottom: 0;
}
.list-card .table-hover > tbody > tr:hover > * {
    background-color: var(--db-blue-50);
}
.item-name {
    font-weight: 600;
    color: var(--db-text);
    text-decoration: none;
}
.item-name:hover {
    color: var(--db-blue);
}

/* Soft status pills */
.pill {
    display: inline-block;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .2px;
    padding: .24rem .62rem;
    border-radius: 999px;
    line-height: 1.45;
    white-space: nowrap;
}
.pill-success { background: #e6f6ec; color: #1a7f43; }
.pill-warning { background: #fdf1d6; color: #986a00; }
.pill-muted   { background: #eef1f6; color: #64717f; }

/* ---------- Patient profile ---------- */
.profile-hero {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.25rem 1.4rem;
}
.profile-avatar {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: .5px;
    color: #fff;
    background: linear-gradient(135deg, var(--db-sky), var(--db-blue));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.profile-identity { min-width: 0; }
.profile-name {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.profile-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: .25rem;
    color: var(--db-muted);
    font-size: .92rem;
}
.profile-meta .pm-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
}
.profile-meta .pm-sep { opacity: .5; }
.profile-branch {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .4rem;
    font-size: .9rem;
    color: var(--db-text);
}
.profile-branch svg { width: 15px; height: 15px; color: var(--db-blue); flex: 0 0 auto; }

/* Physical snapshot tiles */
.snapshot-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.6rem;
}
@media (max-width: 575.98px) {
    .snapshot-row { grid-template-columns: repeat(2, 1fr); }
}
.snap-tile {
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    box-shadow: var(--db-shadow-sm);
    padding: .9rem 1rem;
}
.snap-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
    color: var(--db-muted);
}
.snap-value {
    margin-top: .15rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
}
.snap-value small { font-size: .8rem; font-weight: 500; color: var(--db-muted); }

/* Definition grids inside the profile cards */
.profile-card { padding: 1.1rem 1.3rem; height: 100%; }
.data-grid { margin: 0; }
.data-grid .dg-row {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: .5rem;
    padding: .55rem 0;
    border-top: 1px solid #eef1f6;
}
.data-grid .dg-row:first-child { border-top: 0; padding-top: 0; }
.data-grid dt {
    color: var(--db-muted);
    font-weight: 500;
    font-size: .88rem;
}
.data-grid dd {
    margin: 0;
    color: var(--db-text);
    font-weight: 500;
    font-size: .92rem;
    word-break: break-word;
}

/* "Coming soon" placeholder panels (equipment / notes / history) */
.soon-panel {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 1.3rem;
}
.soon-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--db-blue-50);
    color: var(--db-blue);
}
.soon-icon svg { width: 22px; height: 22px; }
.soon-body { min-width: 0; }
.soon-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
}
.soon-desc { margin-top: .1rem; color: var(--db-muted); font-size: .88rem; }
.soon-badge {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--db-muted);
    background: var(--db-blue-50);
    border-radius: 999px;
    padding: .1rem .5rem;
}

/* ---------- Navigation progress bar ---------- */
#nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--db-blue), var(--db-sky));
    box-shadow: 0 0 8px rgba(22, 104, 216, .5);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: width .25s ease, opacity .3s ease;
}
/* Creep slowly toward 75% while the request is in flight... */
#nav-progress.active {
    opacity: 1;
    width: 75%;
    transition: width 6s cubic-bezier(.1, .7, .2, 1), opacity .1s ease;
}
/* ...then snap to 100% and fade out once the response lands. */
#nav-progress.done {
    width: 100%;
    transition: width .2s ease, opacity .3s ease .15s;
}

/* ---------- Skeleton loading (lazy dashboard stats) ---------- */
.skeleton-icon,
.skeleton-line {
    background: linear-gradient(90deg, #e7edf5 25%, #f2f6fb 37%, #e7edf5 63%);
    background-size: 400% 100%;
    animation: db-shimmer 1.4s ease infinite;
    border-radius: 6px;
    display: block;
}
.skeleton-icon { width: 44px; height: 44px; border-radius: 11px; flex: 0 0 auto; }
.skeleton-line { height: 12px; }
@keyframes db-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}