/* ===========================================================================
   Navigator themes (22 Sep 2026)

   Four light themes, chosen per request by <html data-theme="...">:
     classic  - white bar, thin green line, navy actions        (the default)
     fiori    - SAP-like slate shell bar, flat, underline tabs
     civic    - formal navy bar with a gold line, serif headings, square corners
     soft     - light page, rounded panels, pill buttons and tabs, teal

   The site default is OCONF UI:Theme; a user may choose their own on the Profile page
   (USR4 'Theme'). Resolved by IThemeService in _Layout.

   STRUCTURE. Every theme first sets the same tokens; the shared rules below use only tokens.
   A theme's own section then adds what makes it a *style* (bar, fonts, corners, tabs).
   Page-level styles (for example My Delivery) read the tokens, so they follow the theme.
   =========================================================================== */

/* ---------------------------------------------------------------- tokens: classic (default) */
:root {
    --nav-primary:        #1d4f7a;
    --nav-primary-hover:  #163d5f;
    --nav-primary-soft:   #e8eff6;
    --nav-primary-line:   #c5d5e4;
    --nav-accent:         #1f8a43;
    --nav-heading:        #1b3a57;
    --nav-head-bg:        #eef3f8;
    --nav-head-text:      #25425e;
    --nav-focus:          rgba(29, 79, 122, .25);
    --nav-bar-bg:         #ffffff;
    --nav-bar-text:       #212529;
    --nav-bar-brand:      var(--nav-primary);
    --nav-page-bg:        #ffffff;
}

/* ---------------------------------------------------------------- tokens: fiori */
html[data-theme="fiori"] {
    --nav-primary:        #0a6ed1;
    --nav-primary-hover:  #085caf;
    --nav-primary-soft:   #eaf1f9;
    --nav-primary-line:   #bcd4ee;
    --nav-accent:         #354a5f;
    --nav-heading:        #32363a;
    --nav-head-bg:        #f2f4f5;
    --nav-head-text:      #32363a;
    --nav-focus:          rgba(10, 110, 209, .25);
    --nav-bar-bg:         #354a5f;
    --nav-bar-text:       #e6ecf2;
    --nav-bar-brand:      #ffffff;
    --nav-page-bg:        #f5f6f7;
}

/* ---------------------------------------------------------------- tokens: civic */
html[data-theme="civic"] {
    --nav-primary:        #13294b;
    --nav-primary-hover:  #0c1c35;
    --nav-primary-soft:   #eef1f6;
    --nav-primary-line:   #c8d0dd;
    --nav-accent:         #c9a227;
    --nav-heading:        #13294b;
    --nav-head-bg:        #13294b;
    --nav-head-text:      #ffffff;
    --nav-focus:          rgba(19, 41, 75, .25);
    --nav-bar-bg:         #13294b;
    --nav-bar-text:       #e8ecf3;
    --nav-bar-brand:      #ffffff;
    --nav-page-bg:        #ffffff;
}

/* ---------------------------------------------------------------- tokens: soft modern */
html[data-theme="soft"] {
    --nav-primary:        #0f766e;
    --nav-primary-hover:  #0b5d57;
    --nav-primary-soft:   #e6f3f1;
    --nav-primary-line:   #b9ddd8;
    --nav-accent:         #0f766e;
    --nav-heading:        #12343b;
    --nav-head-bg:        #eef6f5;
    --nav-head-text:      #35545a;
    --nav-focus:          rgba(15, 118, 110, .25);
    --nav-bar-bg:         #ffffff;
    --nav-bar-text:       #212529;
    --nav-bar-brand:      #0f766e;
    --nav-page-bg:        #f3f6f8;
}

/* ===========================================================================
   Shared rules - tokens only
   =========================================================================== */

body { background-color: var(--nav-page-bg); }

/* navigation bar */
header .navbar {
    background-color: var(--nav-bar-bg) !important;
    border-top: 3px solid var(--nav-accent);
    border-bottom: 1px solid var(--nav-primary-line) !important;
}
header .navbar .navbar-brand,
header .navbar .navbar-brand b { color: var(--nav-bar-brand); }
header .navbar .nav-link,
header .navbar .nav-link.text-dark { color: var(--nav-bar-text) !important; }
header .navbar .nav-link:hover { color: var(--nav-primary) !important; }

/* headings and links */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { color: var(--nav-heading); }
a { color: var(--nav-primary); }
a:hover { color: var(--nav-primary-hover); }
.breadcrumb-item a { text-decoration: none; }

/* primary colour */
.btn-primary { background-color: var(--nav-primary); border-color: var(--nav-primary); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--nav-primary-hover) !important;
    border-color: var(--nav-primary-hover) !important;
}
.btn-outline-primary { color: var(--nav-primary); border-color: var(--nav-primary); }
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active {
    background-color: var(--nav-primary); border-color: var(--nav-primary); color: #fff;
}
.bg-primary     { background-color: var(--nav-primary) !important; }
.text-primary   { color: var(--nav-primary) !important; }
.border-primary { border-color: var(--nav-primary) !important; }
.link-primary   { color: var(--nav-primary) !important; }
.form-check-input:checked { background-color: var(--nav-primary); border-color: var(--nav-primary); }
.page-item.active .page-link { background-color: var(--nav-primary); border-color: var(--nav-primary); }
.page-link { color: var(--nav-primary); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--nav-primary); }
.list-group-item.active { background-color: var(--nav-primary); border-color: var(--nav-primary); }

/* tabs */
.nav-tabs .nav-link { color: #4a5b6c; }
.nav-tabs .nav-link:hover { color: var(--nav-primary); }
.nav-tabs .nav-link.active {
    color: var(--nav-primary);
    font-weight: 600;
    border-top: 2px solid var(--nav-primary);
}

/* tables */
.table-light,
.table-light > th,
.table-light > td,
thead.table-light th {
    --bs-table-bg: var(--nav-head-bg);
    background-color: var(--nav-head-bg);
    color: var(--nav-head-text);
    border-color: var(--nav-primary-line);
}
thead.table-light th { font-weight: 600; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--nav-primary-soft); }

/* cards */
.card-header:not([class*="bg-"]) {
    background-color: var(--nav-head-bg);
    color: var(--nav-head-text);
    border-bottom-color: var(--nav-primary-line);
}

/* focus */
.btn:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .2rem var(--nav-focus);
}
.form-control:focus, .form-select:focus { border-color: var(--nav-primary-line); }

/* ===========================================================================
   Per-theme style
   =========================================================================== */

/* ---------------------------------------------------------------- fiori: flat shell, underline tabs */
html[data-theme="fiori"] body { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; color: #32363a; }
html[data-theme="fiori"] header .navbar { border-top: 0; border-bottom: 0 !important; }
html[data-theme="fiori"] header .navbar .nav-link:hover { color: #ffffff !important; }
html[data-theme="fiori"] h1, html[data-theme="fiori"] h2,
html[data-theme="fiori"] h3, html[data-theme="fiori"] h4 { font-weight: 600; }
html[data-theme="fiori"] .btn, html[data-theme="fiori"] .card { border-radius: .25rem; }
html[data-theme="fiori"] .card { border-color: #e5e5e5; }
html[data-theme="fiori"] .nav-tabs { border-bottom: 1px solid #d9d9d9; }
html[data-theme="fiori"] .nav-tabs .nav-link { border: 0 !important; color: #6a6d70; }
html[data-theme="fiori"] .nav-tabs .nav-link.active {
    border: 0 !important;
    border-bottom: 3px solid var(--nav-primary) !important;
    background: transparent;
}

/* ---------------------------------------------------------------- civic: formal, serif, square */
html[data-theme="civic"] h1, html[data-theme="civic"] h2, html[data-theme="civic"] h3,
html[data-theme="civic"] h4, html[data-theme="civic"] h5,
html[data-theme="civic"] .navbar-brand { font-family: "Merriweather", Georgia, "Times New Roman", serif; }
html[data-theme="civic"] header .navbar { border-top: 0; border-bottom: 3px solid var(--nav-accent) !important; }
html[data-theme="civic"] header .navbar .nav-link:hover { color: #ffffff !important; }
html[data-theme="civic"] .btn, html[data-theme="civic"] .form-control, html[data-theme="civic"] .form-select,
html[data-theme="civic"] .card, html[data-theme="civic"] .badge, html[data-theme="civic"] .input-group-text,
html[data-theme="civic"] .dropdown-menu, html[data-theme="civic"] .nav-tabs .nav-link,
html[data-theme="civic"] .alert { border-radius: 0 !important; }
html[data-theme="civic"] .nav-tabs .nav-link.active { border-top: 3px solid var(--nav-accent); font-weight: 700; }

/* ---------------------------------------------------------------- soft modern: rounded, pills */
html[data-theme="soft"] body { font-family: "Inter", "Segoe UI", system-ui, sans-serif; }
html[data-theme="soft"] header .navbar { border-top: 0; border-bottom: 0 !important; box-shadow: 0 1px 8px rgba(15, 40, 60, .08); }
html[data-theme="soft"] h1, html[data-theme="soft"] h2,
html[data-theme="soft"] h3, html[data-theme="soft"] h4 { font-weight: 700; }
html[data-theme="soft"] .btn { border-radius: 999px; padding-left: .9rem; padding-right: .9rem; }
html[data-theme="soft"] .form-control, html[data-theme="soft"] .form-select { border-radius: 10px; }
html[data-theme="soft"] .card { border: 0; border-radius: 12px; box-shadow: 0 2px 10px rgba(15, 40, 60, .06); }
html[data-theme="soft"] .card-header:not([class*="bg-"]) { background: #ffffff; border-radius: 12px 12px 0 0 !important; }
html[data-theme="soft"] .nav-tabs { border: 0; gap: .25rem; }
html[data-theme="soft"] .nav-tabs .nav-link { border: 0 !important; border-radius: 999px; color: #4b5b63; }
html[data-theme="soft"] .nav-tabs .nav-link.active { background: var(--nav-primary); color: #ffffff; }
html[data-theme="soft"] thead.table-light th { text-transform: uppercase; font-size: .72rem; letter-spacing: .05em; }
html[data-theme="soft"] .badge { border-radius: 999px; }
html[data-theme="soft"] .table-responsive { border-radius: 12px; background: #ffffff; }