/* =====================================================================
   SearchFish Brand Theme  —  searchfish-theme.css
   ---------------------------------------------------------------------
   VISUAL RESTYLE ONLY. This file changes appearance, never behaviour.
   It contains no JavaScript, no markup, no data — only styling rules.

   Everything is driven by the brand variables in the :root block below,
   so colors and fonts live in ONE place. Change a value there and it
   updates everywhere.

   TO UNDO THE WHOLE RESTYLE: remove the two "SearchFish Brand Theme"
   <link> lines from php/template_scripts.php and login.php (see the
   SEARCHFISH THEME comment markers there). Nothing else is touched.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. BRAND TOKENS  (single source of truth)
   --------------------------------------------------------------------- */
:root {
    /* Brand palette (from marketing site) */
    --sf-navy:      #0A2A5E;   /* default text colour: body, data, headings */
    --sf-blue:      #006EFE;   /* primary buttons + key accents */
    --sf-royal:     #0A3FB0;   /* bold numbers / emphasis */
    --sf-cyan:      #34C2FF;   /* accents only (never small text) */
    --sf-lavender:  #8F96F5;   /* secondary accent */
    --sf-gold:      #EFA90B;   /* rare accent / warnings */

    /* Functional shades derived from the palette */
    --sf-blue-hover:   #005AD6;  /* darker blue for button hover */
    --sf-blue-active:  #0049B0;
    --sf-navy-soft:    #41557D;  /* muted navy for secondary text (still readable) */
    --sf-success:      #1FA971;  /* semantic success (green) */
    --sf-success-hover:#178A5C;
    --sf-danger:       #E5484D;  /* semantic danger (red) */
    --sf-danger-hover: #C93B40;

    /* Surfaces & lines — calm, light, no heavy glass */
    --sf-bg:        #F3F6FC;   /* page background */
    --sf-surface:   #FFFFFF;   /* cards, boxes, modals, inputs */
    --sf-surface-2: #F7FAFF;   /* subtle striping / table headers */
    --sf-border:    #E3E9F4;   /* hairline borders */
    --sf-border-strong: #CDD7EA;

    /* Typography */
    --sf-font-head: 'Quicksand', 'Segoe UI', ui-rounded, system-ui, sans-serif;
    --sf-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Shape & depth — soft, rounded, premium */
    --sf-radius-lg: 16px;
    --sf-radius:    12px;
    --sf-radius-sm: 9px;
    --sf-shadow-sm: 0 1px 2px rgba(10,42,94,.06), 0 1px 3px rgba(10,42,94,.05);
    --sf-shadow:    0 6px 18px rgba(10,42,94,.08);
    --sf-shadow-lg: 0 18px 40px rgba(10,42,94,.14);
    --sf-ring:      0 0 0 3px rgba(0,110,254,.18);

    --sf-speed: .18s;
}

/* ---------------------------------------------------------------------
   2. TYPOGRAPHY & BASE
   --------------------------------------------------------------------- */
body,
.content-wrapper,
.skin-black .wrapper {
    font-family: var(--sf-font-body);
    color: var(--sf-navy);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.content-wrapper {
    background-color: var(--sf-bg);
}

h1, h2, h3, h4, h5, h6,
.box-title,
.modal-title {
    font-family: var(--sf-font-head);
    color: var(--sf-navy);
    font-weight: 600;
}

/* Keep links on-brand without using blue for body copy */
a { color: var(--sf-blue); }
a:hover, a:focus, a:active { color: var(--sf-blue-hover); }

/* Emphasis / bold numbers use royal */
.text-emphasis,
.small-box .inner h3,
.info-box-number,
.description-block .description-header,
b.sf-stat, strong.sf-stat {
    color: var(--sf-royal);
}

/* Brand accent helpers (large accents only) */
.text-sf-blue  { color: var(--sf-blue)  !important; }
.text-sf-navy  { color: var(--sf-navy)  !important; }
.text-sf-royal { color: var(--sf-royal) !important; }

/* ---------------------------------------------------------------------
   3. BUTTONS  — rounded, soft shadow, brand blue primary
   --------------------------------------------------------------------- */
.btn {
    font-family: var(--sf-font-body);
    font-weight: 600;
    border-radius: var(--sf-radius-sm);
    border-width: 1px;
    padding: 8px 18px;
    transition: background-color var(--sf-speed) ease,
                box-shadow var(--sf-speed) ease,
                border-color var(--sf-speed) ease,
                transform var(--sf-speed) ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn.focus { outline: none; box-shadow: var(--sf-ring); }

/* Primary = brand blue */
.btn-primary,
.btn-primary-practice {
    background-color: var(--sf-blue);
    border-color: var(--sf-blue);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,110,254,.25);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.active,
.btn-primary-practice:hover, .btn-primary-practice:focus {
    background-color: var(--sf-blue-hover);
    border-color: var(--sf-blue-hover);
    color: #fff;
}
.btn-primary:active { background-color: var(--sf-blue-active); border-color: var(--sf-blue-active); }

/* Success (semantic, refined green) */
.btn-success {
    background-color: var(--sf-success);
    border-color: var(--sf-success);
    color: #fff;
}
.btn-success:hover, .btn-success:focus, .btn-success.active {
    background-color: var(--sf-success-hover);
    border-color: var(--sf-success-hover);
    color: #fff;
}

/* Danger (semantic red) */
.btn-danger {
    background-color: var(--sf-danger);
    border-color: var(--sf-danger);
    color: #fff;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger.active {
    background-color: var(--sf-danger-hover);
    border-color: var(--sf-danger-hover);
    color: #fff;
}

/* Warning = gold, with navy text for contrast */
.btn-warning {
    background-color: var(--sf-gold);
    border-color: var(--sf-gold);
    color: var(--sf-navy);
}
.btn-warning:hover, .btn-warning:focus, .btn-warning.active {
    background-color: #d9970a;
    border-color: #d9970a;
    color: var(--sf-navy);
}

/* Info = cyan accent, navy text (cyan fails as small text on white, but
   navy-on-cyan inside a filled button is high-contrast and on brand) */
.btn-info {
    background-color: var(--sf-cyan);
    border-color: var(--sf-cyan);
    color: var(--sf-navy);
}
.btn-info:hover, .btn-info:focus, .btn-info.active {
    background-color: #14b3f6;
    border-color: #14b3f6;
    color: var(--sf-navy);
}

/* Default / secondary = light surface with navy text */
.btn-default {
    background-color: var(--sf-surface);
    border-color: var(--sf-border-strong);
    color: var(--sf-navy);
}
.btn-default:hover, .btn-default:focus, .btn-default.active {
    background-color: var(--sf-surface-2);
    border-color: var(--sf-blue);
    color: var(--sf-navy);
}

/* ---------------------------------------------------------------------
   4. CARDS / BOXES  — rounded, soft shadow, light surface
   --------------------------------------------------------------------- */
.box {
    background: var(--sf-surface);
    border-radius: var(--sf-radius);
    border: 1px solid var(--sf-border);
    border-top: 1px solid var(--sf-border);
    box-shadow: var(--sf-shadow-sm);
    overflow: hidden;
}
.box.box-primary  { border-top: 3px solid var(--sf-blue); }
.box.box-info     { border-top: 3px solid var(--sf-cyan); }
.box.box-success  { border-top: 3px solid var(--sf-success); }
.box.box-warning  { border-top: 3px solid var(--sf-gold); }
.box.box-danger   { border-top: 3px solid var(--sf-danger); }

.box-header { color: var(--sf-navy); }
.box-header .box-title { font-size: 18px; }
.box-footer { background: var(--sf-surface-2); border-top: 1px solid var(--sf-border); }

/* AdminLTE small-box / info-box accents */
.small-box {
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow-sm);
}
.info-box {
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow-sm);
    background: var(--sf-surface);
}

/* ---------------------------------------------------------------------
   5. TABLES  — calm, light, readable. No heavy glass behind data.
   --------------------------------------------------------------------- */
.table { color: var(--sf-navy); }
.table > thead > tr > th {
    font-family: var(--sf-font-head);
    font-weight: 600;
    color: var(--sf-navy);
    background-color: var(--sf-surface-2);
    border-bottom: 2px solid var(--sf-border-strong);
}
.table > tbody > tr > td,
.table > tbody > tr > th {
    border-top: 1px solid var(--sf-border);
    color: var(--sf-navy);
    vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--sf-surface-2); }
.table-hover > tbody > tr:hover { background-color: rgba(0,110,254,.06); }

/* DataTables controls */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--sf-blue) !important;
    border-color: var(--sf-blue) !important;
    color: #fff !important;
    border-radius: var(--sf-radius-sm);
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--sf-border-strong);
    border-radius: var(--sf-radius-sm);
    color: var(--sf-navy);
}

/* ---------------------------------------------------------------------
   6. FORMS
   --------------------------------------------------------------------- */
.form-control {
    border-radius: var(--sf-radius-sm);
    border: 1px solid var(--sf-border-strong);
    color: var(--sf-navy);
    box-shadow: none;
    transition: border-color var(--sf-speed) ease, box-shadow var(--sf-speed) ease;
}
.form-control:focus {
    border-color: var(--sf-blue);
    box-shadow: var(--sf-ring);
}
.form-control::placeholder { color: var(--sf-navy-soft); opacity: .8; }
label, .control-label { color: var(--sf-navy); font-family: var(--sf-font-body); }

/* Keep the existing tall login/search inputs but on brand */
.has-feedback .form-control {
    border-radius: var(--sf-radius-sm) !important;
    border-color: var(--sf-border-strong);
}

/* ---------------------------------------------------------------------
   7. SIDEBAR + HEADER (default SearchFish skin)
   Per-client white-label skins still override these via inline <style>.
   --------------------------------------------------------------------- */
.skin-black .main-header {
    background: var(--sf-surface) !important;
    background-image: none !important;
    box-shadow: 0 1px 0 var(--sf-border), var(--sf-shadow-sm);
}
.skin-black .main-header .navbar { background-color: transparent !important; }
.skin-black .main-header > .logo {
    background-color: transparent !important;
}
.skin-black .main-header > .navbar .nav > li > a { color: var(--sf-navy); }
.skin-black .main-header > .navbar .nav > li > a:hover,
.skin-black .main-header > .navbar .nav > li > a:focus { color: var(--sf-blue) !important; }
.skin-black .main-header > .navbar > .sidebar-toggle { color: var(--sf-blue); }

/* Sidebar: deep navy, white text, brand-blue active item */
.skin-black .main-sidebar {
    background-color: var(--sf-navy) !important;
    background-image: none !important;
}
.skin-black .sidebar a { color: #E7EEFB; }
.skin-black .sidebar-menu > li > a {
    border-left: 3px solid transparent;
    transition: background-color var(--sf-speed) ease, border-color var(--sf-speed) ease;
}
.skin-black .sidebar-menu > li:hover > a,
.skin-black .sidebar-menu > li.active > a {
    background: var(--sf-blue) !important;
    color: #fff !important;
    border-left: 3px solid var(--sf-cyan);
}

/* ---------------------------------------------------------------------
   8. LABELS / BADGES  — rounded pills, on-brand, readable
   --------------------------------------------------------------------- */
.label, .badge {
    font-family: var(--sf-font-body);
    font-weight: 600;
    border-radius: 999px;
    padding: .28em .7em;
}
.label-primary { background-color: var(--sf-blue); color: #fff; }
.label-success { background-color: var(--sf-success); color: #fff; }
.label-danger  { background-color: var(--sf-danger); color: #fff; }
.label-warning { background-color: var(--sf-gold); color: var(--sf-navy); }
.label-info    { background-color: var(--sf-cyan); color: var(--sf-navy); }
.badge         { background-color: var(--sf-blue); }
.badge.bg-yellow { background-color: var(--sf-gold) !important; color: var(--sf-navy) !important; }

/* ---------------------------------------------------------------------
   9. MODALS
   --------------------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--sf-radius-lg);
    box-shadow: var(--sf-shadow-lg);
    overflow: hidden;
}
.modal-header {
    border-bottom: 1px solid var(--sf-border);
    background: var(--sf-surface);
}
.modal-header .modal-title { color: var(--sf-navy); }
.modal-footer { border-top: 1px solid var(--sf-border); background: var(--sf-surface-2); }

/* Nav tabs / pills on brand */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus { border-top: 2px solid var(--sf-blue); color: var(--sf-navy); }
.nav-pills > li.active > a { background-color: var(--sf-blue); }

/* Pagination */
.pagination > .active > a,
.pagination > .active > a:hover { background-color: var(--sf-blue); border-color: var(--sf-blue); }

/* ---------------------------------------------------------------------
   10. MOTION  — keep it minimal, and respect reduced-motion preference
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}