/*
 * Medicus FHIR Admin — Tester white-label overrides.
 *
 * Adapted from deploy/nginx/admin/medicus-overrides.css for the in-WAR Tester
 * overlay. Loaded by tmpl-head.html on every Tester page. Mirrors the same
 * brand tokens so deploy-time and local renders look identical.
 *
 * NEVER reference patient data in any selector, computed value, or content
 * property — this stylesheet ships verbatim to every operator browser.
 */

/*
 * Modern slate palette with cyan brand accents. Inspired by Linear / Vercel /
 * Stripe marketing pages: monochromatic slate base, lots of white space, and
 * the logo tile + brand cyan are the only colour highlights. Solid surfaces
 * everywhere — no gradients.
 */
:root {
    /* Slate scale (neutral) */
    --medicus-slate-900:      #0F172A;
    --medicus-slate-800:      #1F2937;
    --medicus-slate-700:      #334155;
    --medicus-slate-600:      #475569;
    --medicus-slate-500:      #64748B;
    --medicus-slate-300:      #CBD5E1;
    --medicus-slate-200:      #E2E8F0;
    --medicus-slate-100:      #F1F5F9;
    --medicus-slate-50:       #F8FAFC;

    /* Brand accents (from the Medicus logo) */
    --medicus-cyan:           #06E8DB;
    --medicus-cyan-dark:      #0BBFB4;
    --medicus-cyan-soft:      #ECFEFF;
    --medicus-periwinkle:     #919DFC;
    --medicus-periwinkle-soft:#EEF2FF;

    /* Semantic tokens */
    --medicus-primary:        var(--medicus-slate-800);
    --medicus-primary-dark:   var(--medicus-slate-900);
    --medicus-headline:       var(--medicus-slate-900);
    --medicus-text:           var(--medicus-slate-800);
    --medicus-muted:          var(--medicus-slate-500);
    --medicus-border:         var(--medicus-slate-200);
    --medicus-border-strong:  var(--medicus-slate-300);
    --medicus-bg:             var(--medicus-slate-50);
    --medicus-surface:        #FFFFFF;
    --medicus-accent:         var(--medicus-cyan);

    --medicus-success:        #10B981;
    --medicus-warning:        #F59E0B;
    --medicus-danger:         #EF4444;

    --medicus-radius:         10px;
    --medicus-radius-sm:      6px;
    --medicus-shadow-sm:      0 1px 2px rgba(15, 23, 42, 0.04);
    --medicus-shadow-md:      0 4px 12px rgba(15, 23, 42, 0.06);
    --medicus-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html, body {
    background-color: var(--medicus-bg) !important;
    color: var(--medicus-text);
    font-family: var(--medicus-font);
    font-size: 14px;
}

/* Top navbar — light marketing-site style, white background + soft separator,
 * inspired by the medicus.ai header. The logo tile (JPG) provides the only
 * splash of brand colour up here. */
.navbar,
.navbar-dark,
.navbar-default,
.navbar-inverse,
.navbar.bg-dark {
    background-color: var(--medicus-surface) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--medicus-border) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    min-height: 56px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.navbar .navbar-brand {
    color: var(--medicus-headline) !important;
    font-weight: 600;
    font-size: 15px;
    padding-left: 56px;
    background-image: url("../img/logo.jpg");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 32px 32px;
    border-radius: 8px;
}
.navbar a,
.navbar .nav-link,
.navbar-nav > li > a {
    color: var(--medicus-headline) !important;
    font-weight: 500;
}
.navbar .nav-link:hover,
.navbar-nav > li > a:hover,
.navbar-nav > .active > a {
    color: var(--medicus-headline) !important;
    background-color: var(--medicus-slate-100) !important;
    border-radius: 6px;
}
.navbar .topbarIcon { margin-right: 4px; color: var(--medicus-cyan-dark); }
.navbar-toggler { border-color: var(--medicus-border-strong) !important; }
.navbar-toggler-icon {
    /* Replace the dark-mode toggler icon Bootstrap injects so it's visible on white. */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23354745' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* Main container — give the page some breathing room */
body { padding-top: 60px; }
.container-fluid { padding-left: 16px; padding-right: 16px; }
.main { padding-top: 8px; padding-bottom: 32px; }

/* Headings — wordmark charcoal */
h1, h2, h3, h4 {
    color: var(--medicus-headline);
    font-weight: 600;
    letter-spacing: -0.01em;
}
h1 { font-size: 22px; }
h2 { font-size: 19px; }
h3 { font-size: 17px; }
h4 { font-size: 15px; }

/* Hide the legacy upstream banner (sample-logo + HAPI banner) — our Medicus
 * banner is rendered by the project-side tmpl-banner.html override. The
 * project override removed those img tags, but if a default fragment is
 * served (e.g. on resource pages where Thymeleaf hasn't rerouted) it stays
 * out of view. */
#logo[src*="sample-logo"] { display: none !important; }

/* Cards / panels */
.card,
.well {
    background-color: var(--medicus-surface) !important;
    border: 1px solid var(--medicus-border) !important;
    border-radius: var(--medicus-radius) !important;
    box-shadow: var(--medicus-shadow-sm);
    margin-bottom: 16px;
}
.card-header {
    background-color: #F1F5F9 !important;
    border-bottom: 1px solid var(--medicus-border) !important;
    border-radius: var(--medicus-radius) var(--medicus-radius) 0 0 !important;
    padding: 10px 14px !important;
    color: var(--medicus-headline) !important;
    font-weight: 600;
    font-size: 14px;
}
.card-body { padding: 14px !important; }

/* Buttons — Medicus primary tone */
.btn {
    border-radius: var(--medicus-radius-sm) !important;
    font-weight: 500;
    transition: background-color 120ms, border-color 120ms, transform 120ms;
}
.btn-primary {
    background-color: var(--medicus-primary) !important;
    border-color: var(--medicus-primary-dark) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--medicus-primary-dark) !important;
    border-color: var(--medicus-primary-dark) !important;
}
.btn-success {
    background-color: var(--medicus-success) !important;
    border-color: var(--medicus-success) !important;
}
.btn-warning {
    background-color: var(--medicus-warning) !important;
    border-color: var(--medicus-warning) !important;
    color: #fff !important;
}
.btn-danger {
    background-color: var(--medicus-danger) !important;
    border-color: var(--medicus-danger) !important;
}

/* Tables */
.table {
    background-color: var(--medicus-surface);
    font-size: 13px;
}
.table > thead > tr > th {
    background-color: #F1F5F9 !important;
    border-bottom: 2px solid var(--medicus-cyan) !important;
    color: var(--medicus-headline);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.table-bordered { border-color: var(--medicus-border) !important; }

/* Forms */
.form-control,
.form-select,
input[type=text],
input[type=search] {
    border-radius: var(--medicus-radius-sm) !important;
    border-color: var(--medicus-border-strong) !important;
}
.form-control:focus { border-color: var(--medicus-cyan-dark) !important; box-shadow: 0 0 0 3px rgba(11, 191, 180, 0.15) !important; }

/* Left sidebar — quieter background, denser nav.
 * Active state: subtle cyan-tint background with a 3px brand-cyan left
 * border and charcoal text — mirrors the modern "selected item" pattern
 * in Notion / Linear / Vercel sidebars. No more dark-blue fill. */
.col-sm-3.sidebar,
.sidebar {
    background-color: var(--medicus-surface);
    border-right: 1px solid var(--medicus-border);
    padding-top: 8px;
}
.sidebar .nav > li > a,
.sidebar .list-group-item {
    padding: 6px 12px !important;
    font-size: 13px;
    color: var(--medicus-text) !important;
    background-color: transparent !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    border-radius: 0 var(--medicus-radius-sm) var(--medicus-radius-sm) 0 !important;
    margin: 1px 6px 1px 0;
    transition: background-color 120ms, color 120ms, border-color 120ms;
}
.sidebar .nav > li > a:hover,
.sidebar .list-group-item:hover {
    background-color: var(--medicus-slate-100) !important;
    color: var(--medicus-headline) !important;
}
.sidebar .nav > .active > a,
.sidebar .nav > li > a.active,
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:focus,
.sidebar .list-group-item.active:hover {
    background-color: var(--medicus-cyan-soft) !important;
    color: var(--medicus-headline) !important;
    border-left: 3px solid var(--medicus-cyan-dark) !important;
    font-weight: 600;
}

/* ---------------------------------------------------------------- */
/* Medicus Tester home — branded banner + resource grid              */
/* ---------------------------------------------------------------- */

.medicus-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--medicus-slate-900);
    color: #fff;
    border-radius: var(--medicus-radius);
    padding: 18px 20px;
    margin-bottom: 16px;
    box-shadow: var(--medicus-shadow-md);
    border: 1px solid var(--medicus-slate-800);
}
.medicus-banner__logo {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.2);
    object-fit: cover;
}
.medicus-banner__title {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.medicus-banner__subtitle {
    margin: 2px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}
.medicus-banner__chip {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Resource grid */
.medicus-resourcelist { margin-top: 4px; }
.medicus-resourcelist__category { margin-bottom: 18px; }
.medicus-resourcelist__category-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--medicus-muted);
    margin: 0 0 8px;
}
.medicus-resourcelist__category-count {
    font-size: 11px;
    background: var(--medicus-border);
    color: var(--medicus-muted);
    border-radius: 999px;
    padding: 1px 8px;
}
.medicus-resourcelist__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}
.medicus-resourcelist__card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--medicus-surface);
    border: 1px solid var(--medicus-border);
    border-radius: var(--medicus-radius-sm);
    padding: 10px 12px;
    color: var(--medicus-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
.medicus-resourcelist__card:hover {
    border-color: var(--medicus-cyan-dark);
    box-shadow: var(--medicus-shadow-md);
    color: var(--medicus-primary-dark);
    text-decoration: none;
    transform: translateY(-1px);
}
.medicus-resourcelist__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--medicus-cyan-dark);
    flex: 0 0 auto;
}
.medicus-resourcelist__card[data-category="Individuals"]   .medicus-resourcelist__dot { background: var(--medicus-cyan); }
.medicus-resourcelist__card[data-category="Entities"]      .medicus-resourcelist__dot { background: var(--medicus-cyan-dark); }
.medicus-resourcelist__card[data-category="Workflow"]      .medicus-resourcelist__dot { background: var(--medicus-primary); }
.medicus-resourcelist__card[data-category="Summary"]       .medicus-resourcelist__dot { background: #EF4444; }
.medicus-resourcelist__card[data-category="Diagnostics"]   .medicus-resourcelist__dot { background: #F59E0B; }
.medicus-resourcelist__card[data-category="Medications"]   .medicus-resourcelist__dot { background: #EC4899; }
.medicus-resourcelist__card[data-category="Care Provision"].medicus-resourcelist__dot { background: #10B981; }
.medicus-resourcelist__card[data-category="Financial"]     .medicus-resourcelist__dot { background: var(--medicus-periwinkle); }
.medicus-resourcelist__card[data-category="Foundation"]    .medicus-resourcelist__dot { background: #94A3B8; }
.medicus-resourcelist__card[data-category="Other"]         .medicus-resourcelist__dot { background: var(--medicus-muted); }

.medicus-resourcelist__empty {
    background: var(--medicus-surface);
    border: 1px dashed var(--medicus-border-strong);
    border-radius: var(--medicus-radius-sm);
    padding: 16px;
    text-align: center;
    color: var(--medicus-muted);
    font-size: 13px;
}

.medicus-resourcelist__filter {
    width: 100%;
    max-width: 320px;
    border: 1px solid var(--medicus-border-strong);
    border-radius: var(--medicus-radius-sm);
    padding: 8px 12px;
    font-size: 13px;
    margin-bottom: 12px;
}
.medicus-resourcelist__filter:focus {
    outline: none;
    border-color: var(--medicus-cyan-dark);
    box-shadow: 0 0 0 3px rgba(11, 191, 180, 0.15);
}

/* Footer */
.medicus-footer {
    margin-top: 24px;
    padding: 10px 14px;
    border-top: 1px solid var(--medicus-border);
    color: var(--medicus-muted);
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.medicus-footer a {
    color: var(--medicus-primary);
    text-decoration: none;
}
.medicus-footer a:hover { text-decoration: underline; }

/* Hide HAPI's farright "About / SourceCode" links on the navbar — these
 * point to upstream HAPI repos and aren't useful for Medicus operators.
 * The accessible text stays in the DOM. */
.navbar .nav-item a[href*="github.com/hapifhir"],
.navbar .nav-link[href*="hapifhir.io"] {
    display: none !important;
}