/* ==========================================================================
   THEME — the single source of truth for colour on this site.
   --------------------------------------------------------------------------
   To re-brand the whole site, edit ONLY the values in section 1 and 2 below.
   Every page CSS, button, card, band and inline style reads from here.

   HOW IT IS WIRED
     bootstrap.min.css  (vendor, must stay first)
     AdminLTE.min.css    (vendor, admin panel)
     _all-skins.min.css  (vendor, admin skin)
     admin.css           (admin shell LAYOUT - no raw colours)
     theme.css           (this file - defines every token, then paints them
                          onto Bootstrap + AdminLTE in section 14)
     <page>.css          (uses var(--c-*) only, no raw colours)

   Section 11 keeps the old ad-hoc names (--cat-*, --hero-*, --primary-orange*
   ...) alive as aliases so nothing that still references them breaks.

   THE TWO EDIT POINTS
     Section  1  brand primary   -> every button, link, badge, active tab
     Section 13  app chrome      -> admin top bar + sidebar
   Section 14 is the machinery that applies them. You should never need to
   touch anything from section 14 down.
   ========================================================================== */

:root {

	/* ======================================================================
	   1. BRAND - PRIMARY
	   Change these six values to re-colour every button and accent.
	   ====================================================================== */
	--c-primary: #fa7901;
	--c-primary-hover: #d88106;
	--c-primary-active: #d97900;
	--c-primary-dark: #b86900;
	--c-primary-darker-alt: #8a4f00;
	--c-primary-contrast: #ffffff; /* text/icon colour on a primary fill */

	/* Tints of the primary, used for soft fills, rings and overlays. */
	--c-primary-soft: rgba(238, 147, 16, 0.08);
	--c-primary-light: rgba(238, 147, 16, 0.16);
	--c-primary-ring: rgba(238, 147, 16, 0.22);
	--c-primary-overlay: rgba(238, 147, 16, 0.35);
	--c-primary-shadow: rgba(238, 147, 16, 0.20);

	/* ======================================================================
	   2. BRAND - SECONDARY / ACCENT
	   ====================================================================== */
	--c-secondary: #0f172a; /* deep navy - dark sections, footer */
	--c-secondary-hover: #1e293b;
	--c-secondary-contrast: #ffffff;

	--c-accent: #ff3368; /* the pink accent used by the legacy menu/blog styles */
	--c-accent-soft: rgba(255, 51, 104, 0.18);

	/* ======================================================================
	   3. TEXT RAMP  (darkest -> lightest)
	   ====================================================================== */
	--c-text-strong: #111827; /* h3/h4, highest emphasis          */
	--c-text-heading: #2f2a26; /* warm heading brown, design accent */
	--c-text: #374151; /* strong body                         */
	--c-text-body: #4b5563; /* default body                        */
	--c-text-muted: #6b7280; /* captions, meta                     */
	--c-text-subtle: #9ca3af; /* disabled, least emphasis           */
	--c-text-inverse: #ffffff; /* text on dark fills                 */
	--c-text-hero: rgba(255, 255, 255, 0.92); /* body text over imagery */
	--c-text-hero-muted: rgba(255, 255, 255, 0.72);

	/* ======================================================================
	   4. SURFACES
	   ====================================================================== */
	--c-bg: #ffffff; /* page background                        */
	--c-bg-page: #f8fafc; /* page background behind cards         */
	--c-surface: #f8fafc; /* inputs, inset panels                  */
	--c-surface-alt: #f7f8fa;
	--c-row-selected: #3c8dbc; /* DataTables selected row (AdminLTE bg-blue) */
	--c-surface-muted: #f1f1f1;
	--c-surface-dark: #151515;
	--c-surface-inverse: #111827;

	/* ======================================================================
	   5. BORDERS
	   ====================================================================== */
	--c-border: #e5e7eb; /* default                                */
	--c-border-soft: #e8eced;
	--c-border-muted: #edf1f5; /* card hairlines                       */
	--c-border-strong: #dee2e6;
	--c-border-subtle: #dddddd;
	--c-border-input: #d5d8dc;

	/* ======================================================================
	   6. HOME SECTION BANDS  (the gray gradient -> white rhythm)
   ====================================================================== */
	--c-band-from: #fafbfb;
	--c-band-via: #f1f3f5;
	--c-band-to: #e2e5e9;
	--c-band-text: #2f2a26;
	--c-band-body: #334155;

	/* ======================================================================
	   7. STATUS
   ====================================================================== */
	--c-success: #16a34a;
	--c-success-soft-alt: #f0fdf4;
	--c-warning: #fbbf24;
	--c-warning-soft-alt: #fffbeb;
	--c-danger: #dc2626;
	--c-danger-soft-alt: #fef2f2;
	--c-info: #428bca;
	--c-info-soft: #ecfdff;

	/* ======================================================================
	   8. NEUTRAL RAMP  (legacy template greys)
   ====================================================================== */
	--c-gray-900-alt: #151515;
	--c-gray-800-alt: #212529;
	--c-gray-700-alt: #2a2a2a;
	--c-gray-600: #555555;
	--c-gray-500-alt: #797979;
	--c-gray-400-alt: #999999;
	--c-gray-300-alt: #cccccc;
	--c-gray-200: #dddddd;
	--c-gray-100: #eeeeee;

	/* ======================================================================
	   9. OVERLAYS, SHADOWS, SHAPE
   ====================================================================== */
	--c-overlay: rgba(0, 0, 0, 0.5);
	--c-hairline: rgba(0, 0, 0, 0.06);
	--c-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
	--c-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.12);
	--c-shadow-card-hover: 0 16px 38px rgba(0, 0, 0, 0.18);

	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--radius-pill: 999px;

	/* ======================================================================
	   10. COMPONENT TOKENS
	   Buttons everywhere read these, so one edit re-skins every button.
   ====================================================================== */

	/* Primary button (the default call to action) */
	--btn-primary-bg: var(--c-primary);
	--btn-primary-bg-hover: var(--c-primary-hover);
	--btn-primary-bg-active: var(--c-primary-dark);
	--btn-primary-fg: var(--c-primary-contrast);
	--btn-primary-border: transparent;

	/* Secondary button (dark fill) */
	--btn-secondary-bg: var(--c-secondary);
	--btn-secondary-bg-hover: var(--c-secondary-hover);
	--btn-secondary-fg: var(--c-secondary-contrast);

	/* Ghost / outline button (transparent fill, coloured border) */
	--btn-ghost-bg: transparent;
	--btn-ghost-border: var(--c-primary);
	--btn-ghost-fg: var(--c-primary-dark);
	--btn-ghost-bg-hover: var(--c-primary);
	--btn-ghost-fg-hover: var(--c-primary-contrast);

	/* Link */
	--link-fg: var(--c-primary-dark);
	--link-hover: var(--c-primary-hover);

	/* Card */
	--card-bg: var(--c-bg);
	--card-border: var(--c-border-muted);
	--card-shadow: var(--c-shadow-card);
	--card-shadow-hover: var(--c-shadow-card-hover);
	--card-radius: 18px;

	/* Input / form control */
	--input-bg: var(--c-surface);
	--input-fg: var(--c-text-heading);
	--input-border: var(--c-border);
	--input-border-focus: var(--c-primary);
	--input-ring: var(--c-primary-ring);
	--input-placeholder: var(--c-text-subtle);

	/* Pill / badge / kicker */
	--pill-bg: var(--c-primary);
	--pill-fg: var(--c-primary-contrast);
	--pill-bg-hover: var(--c-primary-hover);
	--kicker-fg: var(--c-primary-dark);
	--kicker-rule: var(--c-primary);

	/* ======================================================================
	   11. BACK-COMPAT ALIASES
	   The site previously declared these same colours in 10 separate
   :root blocks (--cat-*, --hero-*, --primary-orange* ...). They are
   mapped to the tokens above so existing selectors keep working while
   the definitions live in exactly one place.

   Two legacy names were declared with slightly different values in two
   files; they are now unified, which is the point of this file:
     --primary-dark  home.css #d97900 / technicianDetails.css #d9830b
                    -> --c-primary-active (#d97900)
     --border        home.css #e9e9e9 / technicianDetails.css #e5e7eb
                    -> --c-border (#e5e7eb)
   ====================================================================== */

	/* home.css / categories.css naming */
	--cat-orange: var(--c-primary);
	--cat-orange-hover: var(--c-primary-hover);
	--cat-orange-dark: var(--c-primary-dark);
	--cat-orange-soft: var(--c-primary-soft);
	--cat-orange-light: var(--c-primary-light);
	--cat-navy: var(--c-secondary);
	--cat-text-heading: var(--c-text-strong);
	--cat-text-body: var(--c-text-body);
	--cat-text-muted: var(--c-text-muted);
	--cat-border: var(--c-border-soft);
	--cat-card-bg: var(--c-bg);

	/* contactView.css / table views / login.css / registerForm.css naming */
	--primary-orange: var(--c-primary);
	--primary-orange-hover: var(--c-primary-hover);
	--primary-orange-dark: var(--c-primary-dark);
	--primary-orange-soft: var(--c-primary-soft);
	--primary-orange-ring: var(--c-primary-ring);
	--primary-orange-shadow: var(--c-primary-shadow);
	--text-heading: var(--c-text-strong);
	--text-body: var(--c-text);
	--text-muted: var(--c-text-muted);
	--border-color: var(--c-border);
	--bg-card: var(--c-bg);
	--bg-surface: var(--c-bg);
	--bg-page: var(--c-bg-page);

	/* hero.css naming */
	--hero-orange: var(--c-primary);
	--hero-orange-hover: var(--c-primary-hover);
	--hero-orange-dark: var(--c-primary-dark);
	--hero-orange-soft: var(--c-primary-soft);
	--hero-orange-light: var(--c-primary-light);
	--hero-orange-ring: var(--c-primary-ring);
	--hero-orange-shadow: var(--c-primary-shadow);
	--hero-navy: var(--c-secondary);
	--hero-text-heading: var(--c-text-strong);
	--hero-text-body: var(--c-text);
	--hero-text-muted: var(--c-text-muted);
	--hero-border: var(--c-border);
	--hero-card-bg: var(--c-bg);

	/* short names used by price_rangs.css / login.css / feedback.php */
	--primary: var(--c-primary);
	--primary-dark: var(--c-primary-active);
	--ink: #1a1f2b;
	--muted: var(--c-text-muted);
	--surface: var(--c-bg);
	--surface-alt: var(--c-surface-alt);
	--border: var(--c-border);
	--dark: var(--c-surface-dark);
	--light: #f7f7f7;
	--text: #555;
	--radius: var(--radius-lg);
	--shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -12px rgba(16, 24, 40, 0.12);
}

   /* ======================================================================
      12. CENTRALISED PALETTE
      Every remaining colour that the site used to hard-code lives here, so
      switching one of these to a new colour re-skins that whole family.

      A token is declared here ONLY if sections 1-8 do not already declare
      it. The base colours (--c-primary, --c-text, --c-bg, --c-border,
      --c-info, --c-warning, --c-danger, --c-accent, --c-secondary and the
      grey ramp) are declared once in sections 1-8 and are NOT repeated
      here, so editing a base colour in section 1 can never be silently
      overridden further down this file.

      What remains here are the derived shades that exist nowhere else:
      --c-primary-200, --c-tint-7, --c-blue-11, --c-warm-400 and friends.
   ====================================================================== */

:root {
   /* --c-accent */
   --c-accent-100: #ffc2d2;
   --c-accent-200: #e66686;
   --c-accent-300: #f13d80;
   --c-accent-700: #b8024c;

   /* --c-blue */
   --c-blue-1: #212529;
   --c-blue-10: #94a3b8;
   --c-blue-11: #cbd5e1;
   --c-blue-12: #ced4da;
   --c-blue-13: #d1d5db;
   --c-blue-14: #d7dce4;
   --c-blue-15: #dfe4ea;
   --c-blue-16: #e9ecef;
   --c-blue-2: #3b5998;
   --c-blue-3: #415094;
   --c-blue-4: #495057;
   --c-blue-5: #55acee;
   --c-blue-6: #6382e6;
   --c-blue-7: #667085;
   --c-blue-8: #828bb2;
   --c-blue-9: #8a94a6;

   /* --c-border-cool */
   --c-border-cool: #b8bcc4;

   /* --c-border-faint */
   --c-border-faint: #e0e0e0;

   /* --c-border-pale */
   --c-border-pale: #e2e8f0;

   /* --c-border-pale-alt */
   --c-border-pale-alt: #e3e8ef;

   /* --c-brand */
   --c-brand-1: #8a7358;
   --c-brand-10: #ff6600;
   --c-brand-11: #ff8b23;
   --c-brand-12: #ffe3b3;
   --c-brand-13: #ffe9c8;
   --c-brand-14: #ffebca;
   --c-brand-15: #fff0d8;
   --c-brand-2: #b06a00;
   --c-brand-3: #b36500;
   --c-brand-4: #ec8756;
   --c-brand-5: #ecd9bb;
   --c-brand-6: #f09359;
   --c-brand-7: #f4e9da;
   --c-brand-8: #f5790b;
   --c-brand-9: #fdf0dc;

   /* --c-cyan */
   --c-cyan: #4cd3e3;
   --c-cyan-1: #232b2b;
   --c-cyan-2: #cad7dc;
   --c-cyan-3: #cde8eb;
   --c-cyan-4: #e8eff1;

   /* --c-danger-bg */
   --c-danger-bg: #fef2f2;

   /* --c-danger-bright */
   --c-danger-bright: #ef4444;

   /* --c-danger-deep */
   --c-danger-deep: #b91c1c;

   /* --c-danger-deepest */
   --c-danger-deepest: #7a2020;

   /* --c-danger-soft */
   --c-danger-soft: #f0b6b6;

   /* --c-gold */
   --c-gold-1: #fbd600;

   /* --c-gray */
   --c-gray-1: #111111;
   --c-gray-10: #dfdfdf;
   --c-gray-11: #e5e5e5;
   --c-gray-12: #f0f2f1;
   --c-gray-13: #f5f5f5;
   --c-gray-14: #f6f6f6;
   --c-gray-15: #f8f8f8;
   --c-gray-16: #fafafa;
   --c-gray-2: #222222;
   --c-gray-250: #d5d5d5;
   --c-gray-3: #333333;
   --c-gray-300: #c3c3c3;
   --c-gray-350: #acacac;
   --c-gray-4: #7f7f7f;
   --c-gray-400: #979797;
   --c-gray-425: #8f9195;
   --c-gray-450: #777777;
   --c-gray-5: #888888;
   --c-gray-500: #666666;
   --c-gray-6: #8a8a8a;
   --c-gray-650: #4a4a4a;
   --c-gray-7: #aaaaaa;
   --c-gray-700: #292929;
   --c-gray-8: #cccccc;
   --c-gray-800: #1f2937;
   --c-gray-850: #1f2a37;
   --c-gray-9: #cdcdcd;
   --c-gray-900: #1a1a1a;
   --c-gray-950: #000000;

   /* --c-gray-350-alt */
   --c-gray-350-alt: #adadad;

   /* --c-gray-450-alt */
   --c-gray-450-alt: #797979;

   /* --c-gray-950-alt */
   --c-gray-950-alt: #020202;

   /* --c-green */
   --c-green-1: #249344;
   --c-green-2: #bbf7d0;

   /* --c-info-bright */
   --c-info-bright: #38a4ff;

   /* --c-mint */
   --c-mint: #73fbaf;

    /* --c-primary */
   --c-primary-200: #ffb23e;
   --c-primary-300: #f7941d;
   --c-primary-600: #d97f0a;
   --c-primary-700: #c97100;
   --c-primary-950: #2a1b06;

   /* --c-primary-950-alt */
   --c-primary-950-alt: #2b1c05;

   /* --c-primary-active-alt */
   --c-primary-active-alt: #d87900;

   /* --c-primary-dark-alt */
   --c-primary-dark-alt: #b86800;

   /* --c-primary-darker */
   --c-primary-darker: #a05c00;

   /* --c-red */
   --c-red-1: #991b1b;
   --c-red-2: #d63a3a;
   --c-red-3: #eb6b55;
   --c-red-4: #f44a40;
   --c-red-5: #fecaca;

   /* --c-secondary */
   --c-secondary-800: #10202b;

   /* --c-success-bg */
   --c-success-bg: #f0fdf4;

   /* --c-success-bright */
   --c-success-bright: #22c55e;

   /* --c-success-deep */
   --c-success-deep: #166534;

   /* --c-success-deepest */
   --c-success-deepest: #173d25;

   /* --c-success-soft */
   --c-success-soft: #b9e5c6;

   /* --c-surface-raised */
   --c-surface-raised: #f8f9fa;

   /* --c-surface-soft */
   --c-surface-soft: #f3f4f6;

   /* --c-surface-sunken */
   --c-surface-sunken: #eef0f3;

   /* --c-surface-sunken-alt */
   --c-surface-sunken-alt: #eef1f4;

   /* --c-surface-sunken-alt2 */
   --c-surface-sunken-alt2: #eef2f7;

   /* --c-text-alt */
   --c-text-alt: #334155;

   /* --c-text-body-muted */
   --c-text-body-muted: #536074;

   /* --c-text-body-muted-alt */
   --c-text-body-muted-alt: #55607a;

   /* --c-text-body-muted-alt2 */
   --c-text-body-muted-alt2: #556170;

   /* --c-text-body-muted-alt3 */
   --c-text-body-muted-alt3: #556172;

   /* --c-text-subtle-alt */
   --c-text-subtle-alt: #99a4ac;

   /* --c-tint */
   --c-tint-1: #eceff2;
   --c-tint-10: #f9f9ff;
   --c-tint-11: #f9fafb;
   --c-tint-12: #fbf9ff;
   --c-tint-13: #fdf8f1;
   --c-tint-14: #fff2dc;
   --c-tint-15: #fff2df;
   --c-tint-16: #fff3e0;
   --c-tint-17: #fff4e2;
   --c-tint-18: #fff7e8;
   --c-tint-19: #fff7ec;
   --c-tint-2: #eceff3;
   --c-tint-20: #fff7ed;
   --c-tint-21: #fff8ec;
   --c-tint-22: #fff8ed;
   --c-tint-23: #fffdf8;
   --c-tint-3: #edeff2;
   --c-tint-4: #edf3fd;
   --c-tint-5: #f1f5f9;
   --c-tint-6: #f3f1ef;
   --c-tint-7: #f6f8fc;
   --c-tint-8: #f8fbff;
   --c-tint-9: #f9f9fe;

   /* --c-tint-cool */
   --c-tint-cool: #ecfdff;

   /* --c-tint-violet */
   --c-tint-violet: #f0e9ff;

   /* --c-violet */
   --c-violet-1: #3b1d82;
   --c-violet-2: #a367e7;

   /* --c-warm */
   --c-warm-100: #eee9e4;
   --c-warm-200: #e4e0dc;
   --c-warm-300: #f2e6d5;
   --c-warm-400: #e9cfa4;
   --c-warm-50: #fffaf3;
   --c-warm-500: #e0b877;
   --c-warm-600: #9c8b74;
   --c-warm-700: #7a6a55;
   --c-warm-800: #5c5142;

   /* --c-warm-200-alt */
   --c-warm-200-alt: #e5e1dd;

   /* --c-warm-50-alt */
   --c-warm-50-alt: #fffbf5;

   /* --c-warning-bright */
   --c-warning-bright: #f4e700;

   /* --c-warning-soft */
   --c-warning-soft: #fef3c7;
}

/* ==========================================================================
   13. APPLICATION CHROME
   Tokens for the AdminLTE shell (top bar, sidebar, boxes). These were
   previously hard-coded inside the <style> block of
   application/views/includes/header.php - they are now editable here.
   ========================================================================== */

:root {
	--ui-page-bg: #f4f6f9; /* <body> behind the admin shell          */
	--ui-chrome-bg: #ffffff; /* top bar + sidebar surface                */
	--ui-chrome-fg: #55595c; /* top bar nav links, sidebar toggle         */
	--ui-chrome-fg-strong: #2c3e50; /* page title, hover text             */
	--ui-chrome-border: #eef1f4; /* hairline under/next to the top bar     */
	--ui-chrome-hover-bg: #f4f6f9; /* top bar link hover                   */
	--ui-nav-fg: #3d4652; /* sidebar item text                          */
	--ui-nav-active-bg: #00a65a; /* sidebar active item fill              */
	--ui-nav-active-fg: #ffffff; /* sidebar active item text              */
	--ui-nav-hover-border: #00a65a; /* sidebar left accent on hover        */
	--ui-panel-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); /* .box / .info-box    */
	--ui-header-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); /* top bar drop shadow */
}

/* ==========================================================================
   13b. GHOST / OUTLINE BUTTONS
   --------------------------------------------------------------------------
   The navbar buttons (Dashboard, Login/Register, Register as Technician) are
   OUTLINE buttons: a pale tinted fill, a 1px brand border, and darker brand
   text. They used to hard-code #FFF7EC / #C96F00 / #EE9310 inside the inline
   <style> block of navbar_v2.php, so changing --c-primary did nothing to them.

   Edit these three to re-tint every outline button on the site.
   ========================================================================== */

:root {
	--c-primary-ghost: #fff7ec; /* pale fill behind an outline button      */
	--c-primary-ghost-alt: #f8f8f8; /* neutral pale fill (Register btn)    */
	--c-primary-ghost-fg: #c96f00; /* brand text on the pale fill           */
}

/* ==========================================================================
   14. COMPONENT SKIN - THE CENTRAL BUTTON / CHROME LAYER
   --------------------------------------------------------------------------
   Sections 1-13 only DECLARE colours. This section is what actually PAINTS
   them onto the third-party frameworks, which ship their own hard-coded
   hex values:

     assets/bootstrap/css/bootstrap.min.css   (buttons, links, panels, forms)
     assets/dist/css/AdminLTE.min.css         (boxes, tabs, labels)
     assets/dist/css/skins/_all-skins.min.css (the blue skin)
     layout/css/admin.css                     (the admin shell)

   Those files are never edited. Everything below re-points their rules at the
   tokens above, so changing --c-primary in section 1 re-skins EVERY button on
   the site - public pages and admin panel alike.

   WHY EVERY SELECTOR IS PREFIXED WITH `html`
   theme.css is linked BEFORE the framework CSS, so an equal-specificity rule
   would lose on order. Prefixing with `html` adds one class-level of weight,
   which makes these overrides win regardless of link order and regardless of
   whether the framework used !important. That is what lets this file stay the
   single source of truth without touching a single <link> tag.

   TO RE-BRAND: edit section 1 (primary) and section 13 (admin chrome).
   Nothing below this line needs to change.
   ========================================================================== */

/* --- 14.1 Buttons ------------------------------------------------------- */

html .btn-primary,
html .btn-primary:hover,
html .btn-primary:focus,
html .btn-primary:active,
html .btn-primary.hover,
html .btn-primary:active:focus,
html .btn-primary:active:hover,
html .btn-primary:focus:active,
html .open > .btn-primary.dropdown-toggle {
	background-color: var(--c-primary);
	border-color: var(--c-primary);
	color: var(--c-primary-contrast);
}

html .btn-primary:hover,
html .btn-primary:focus,
html .btn-primary.hover,
html .btn-primary:active,
html .open > .btn-primary.dropdown-toggle {
	background-color: var(--c-primary-hover);
	border-color: var(--c-primary-hover);
	color: var(--c-primary-contrast);
}

html .btn-primary:active,
html .btn-primary:active:focus,
html .btn-primary:active:hover {
	background-color: var(--c-primary-active);
	border-color: var(--c-primary-active);
}

html .btn-primary.disabled,
html .btn-primary[disabled],
html fieldset[disabled] .btn-primary {
	background-color: var(--c-primary-light);
	border-color: var(--c-primary-light);
	color: var(--c-primary-contrast);
}

html .btn-secondary,
html .btn-secondary:hover,
html .btn-secondary:focus,
html .btn-secondary:active,
html .btn-secondary.hover {
	background-color: var(--c-secondary);
	border-color: var(--c-secondary);
	color: var(--c-secondary-contrast);
}

html .btn-secondary:hover,
html .btn-secondary:focus,
html .btn-secondary.hover,
html .btn-secondary:active {
	background-color: var(--c-secondary-hover);
	border-color: var(--c-secondary-hover);
	color: var(--c-secondary-contrast);
}

/* .btn-default is intentionally unthemed: it keeps its pre-theme.css Bootstrap look */

/* Contextual buttons keep their meaning, just read from the status tokens */
html .btn-success,
html .btn-success:hover,
html .btn-success:focus,
html .btn-success:active,
html .btn-success.hover {
	background-color: var(--c-success);
	border-color: var(--c-success);
	color: var(--c-text-inverse);
}

html .btn-success:hover,
html .btn-success:focus,
html .btn-success.hover,
html .btn-success:active {
	background-color: var(--c-success-deep);
	border-color: var(--c-success-deep);
}

html .btn-info,
html .btn-info:hover,
html .btn-info:focus,
html .btn-info:active,
html .btn-info.hover {
	background-color: var(--c-info);
	border-color: var(--c-info);
	color: var(--c-text-inverse);
}

html .btn-info:hover,
html .btn-info:focus,
html .btn-info.hover,
html .btn-info:active {
	background-color: var(--c-info-bright);
	border-color: var(--c-info-bright);
}

html .btn-warning,
html .btn-warning:hover,
html .btn-warning:focus,
html .btn-warning:active,
html .btn-warning.hover {
	background-color: var(--c-warning);
	border-color: var(--c-warning);
	color: var(--c-text-strong);
}

html .btn-warning:hover,
html .btn-warning:focus,
html .btn-warning.hover,
html .btn-warning:active {
	background-color: var(--c-warning-bright);
	border-color: var(--c-warning-bright);
}

html .btn-danger,
html .btn-danger:hover,
html .btn-danger:focus,
html .btn-danger:active,
html .btn-danger.hover {
	background-color: var(--c-danger);
	border-color: var(--c-danger);
	color: var(--c-text-inverse);
}

html .btn-danger:hover,
html .btn-danger:focus,
html .btn-danger.hover,
html .btn-danger:active {
  	background-color: var(--c-danger-deep);
  	border-color: var(--c-danger-deep);
  }
  
  /* Listing action icons (edit pen / delete bin) must always match their
     button text colour and never inherit a colour from the row or link state. */
  html .btn-info > .fa,
  html .btn-danger > .fa {
  	color: var(--c-text-inverse) !important;
  }
  
  html .btn-link,
html .btn-link:hover,
html .btn-link:focus {
	color: var(--link-fg);
	text-decoration: none;
}

html .btn-link:hover,
html .btn-link:focus {
	color: var(--link-hover);
	text-decoration: underline;
}

/* --- 14.2 Links and text helpers ---------------------------------------- */

html a,
html a:visited,
html a:focus,
html a:hover {
	color: var(--link-fg);
}

html a:hover,
html a:focus {
	color: var(--link-hover);
}

/* NOTE: there is deliberately no blanket `html a.btn { color: ... }` rule here.
   Anchor buttons such as .navbar .login-btn and .navbar .tech-register-btn
   are GHOST buttons - a pale fill with a coloured border and coloured text -
   and forcing --c-primary-contrast on them paints white text on a pale fill,
   which makes the button look blank. Only the contextual .btn-* rules below
   set a text colour, and they set the fill to match. */

html .text-primary,
html .text-primary:hover,
html .text-primary:focus {
	color: var(--c-primary) !important;
}

html .text-success,
html .text-success:hover,
html .text-success:focus {
	color: var(--c-success) !important;
}

html .text-info,
html .text-info:hover,
html .text-info:focus {
	color: var(--c-info) !important;
}

html .text-warning,
html .text-warning:hover,
html .text-warning:focus {
	color: var(--c-warning) !important;
}

html .text-danger,
html .text-danger:hover,
html .text-danger:focus {
	color: var(--c-danger) !important;
}

html .text-muted {
	color: var(--c-text-muted) !important;
}

html .bg-primary,
html .bg-primary:hover,
html .bg-primary:focus {
	background-color: var(--c-primary) !important;
	color: var(--c-primary-contrast) !important;
}

html .bg-success,
html .bg-success:hover,
html .bg-success:focus {
	background-color: var(--c-success) !important;
	color: var(--c-text-inverse) !important;
}

html .bg-info,
html .bg-info:hover,
html .bg-info:focus {
	background-color: var(--c-info) !important;
	color: var(--c-text-inverse) !important;
}

html .bg-warning,
html .bg-warning:hover,
html .bg-warning:focus {
	background-color: var(--c-warning) !important;
	color: var(--c-text-strong) !important;
}

html .bg-danger,
html .bg-danger:hover,
html .bg-danger:focus {
	background-color: var(--c-danger) !important;
	color: var(--c-text-inverse) !important;
}

html hr,
html .hr {
	background-color: var(--c-border);
	border: 0;
	color: inherit;
	height: 1px;
	margin: 20px 0;
	opacity: 1;
}

/* --- 14.3 Forms ---------------------------------------------------------- */

html .form-control,
html select.form-control,
html textarea.form-control {
	background-color: var(--input-bg);
	color: var(--input-fg);
	border-color: var(--input-border);
}

html .form-control:focus,
html select.form-control:focus,
html textarea.form-control:focus,
html .form-control:focus:hover,
html .form-control:hover {
	background-color: var(--input-bg);
	border-color: var(--input-border-focus);
	box-shadow: 0 0 0 3px var(--input-ring);
	color: var(--input-fg);
}

html .form-control::placeholder {
	color: var(--input-placeholder);
}

html .form-control[disabled],
html .form-control[readonly],
html fieldset[disabled] .form-control {
	background-color: var(--c-surface-muted);
	color: var(--c-text-subtle);
}

html .has-success .form-control:focus {
	border-color: var(--c-success);
	box-shadow: 0 0 0 3px var(--c-success-soft);
}

html .has-error .form-control:focus,
html .has-danger .form-control:focus {
	border-color: var(--c-danger);
	box-shadow: 0 0 0 3px var(--c-danger-soft);
}

html .has-warning .form-control:focus {
	border-color: var(--c-warning);
	box-shadow: 0 0 0 3px var(--c-warning-soft);
}

html .help-block,
html .form-control-feedback {
	color: var(--c-text-muted);
}

html .control-label,
html .bootstrap-tagsinput .badge {
	color: var(--c-text-body);
}

/* --- 14.4 Panels, boxes and AdminLTE cards -------------------------------- */

html .panel {
	background-color: var(--card-bg);
	border-color: var(--card-border);
	box-shadow: none;
}

html .panel-default > .panel-heading,
html .panel-primary > .panel-heading,
html .panel-info > .panel-heading,
html .panel-success > .panel-heading,
html .panel-warning > .panel-heading,
html .panel-danger > .panel-heading {
	background-color: var(--c-surface-alt);
	border-bottom-color: var(--card-border);
	color: var(--c-text-heading);
}

html .panel-title,
html .panel-heading h3,
html .panel-heading h4 {
	color: inherit;
}

html .panel-footer {
	background-color: var(--c-surface-alt);
	border-top-color: var(--card-border);
	color: var(--c-text-muted);
}

html .panel-default,
html .panel-default > .panel-heading,
html .panel-default > .panel-footer {
	border-color: var(--card-border);
}

html .box {
	background-color: var(--card-bg);
	border-color: var(--card-border);
	border-radius: var(--radius-sm);
	box-shadow: var(--ui-panel-shadow);
}

html .box.box-solid > .box-header {
	background-color: var(--c-primary);
	color: var(--c-primary-contrast);
}

html .box.box-solid > .box-header a,
html .box.box-solid > .box-header .btn {
	color: var(--c-primary-contrast);
}

html .box-header {
	background-color: var(--card-bg);
	border-bottom-color: var(--card-border);
	color: var(--c-text-heading);
}

html .box-footer,
html .box-body {
	border-color: var(--card-border);
	color: var(--c-text-body);
}

html .box-title,
html .box-header h3,
html .box-header .box-title {
	color: var(--c-text-strong);
}

html .info-box {
	background-color: var(--card-bg);
	border-radius: var(--radius-sm);
	box-shadow: var(--ui-panel-shadow);
	color: var(--c-text-body);
}

html .info-box-icon {
	color: var(--c-primary);
}

html .info-box-text {
	color: var(--c-text-muted);
}

/* Stat cards keep their pre-theme.css colours; background still comes from AdminLTE bg-* */
html .small-box {
	background-color: var(--card-bg);
	border-radius: var(--radius-sm);
	box-shadow: var(--ui-panel-shadow);
}

/* --- 14.5 Tabs, pagination, dropdowns ------------------------------------ */

html .nav-tabs,
html .nav-pills {
	border-bottom-color: var(--c-border);
}

html .nav-tabs-custom {
	background-color: var(--card-bg);
	border-radius: var(--radius-sm);
	box-shadow: var(--ui-panel-shadow);
	overflow: hidden;
}

html .nav-tabs-custom > .nav-tabs {
	border-bottom-color: var(--c-border);
}

html .nav-tabs > li > a {
	color: var(--link-fg);
}

html .nav-tabs > li.active > a,
html .nav-tabs > li.active > a:hover,
html .nav-tabs > li.active > a:focus,
html .nav-tabs-custom > .nav-tabs > li.active,
html .nav-tabs-custom > .nav-tabs > li.active > a,
html .nav-tabs-custom > .nav-tabs > li.active > a:hover,
html .nav-tabs-custom > .nav-tabs > li.active > a:focus {
	background-color: var(--c-primary) !important;
	border-bottom-color: var(--c-primary) !important;
	border-top-color: var(--c-primary) !important;
	color: var(--c-primary-contrast) !important;
}

html .nav-tabs-custom > .nav-tabs > li > a {
	color: var(--link-fg);
}

html .pagination {
	border-color: var(--c-border);
	color: var(--c-text-muted);
}

html .pagination > li > a,
html .pagination > li > span {
	border-color: var(--c-border);
	color: var(--link-fg);
}

html .pagination > li.active > a,
html .pagination > li.active > span,
html .pagination > li.active > a:hover,
html .pagination > li.active > span:hover,
html .pagination > li.active > a:focus,
html .pagination > li.active > span:focus {
	background-color: var(--c-primary);
	border-color: var(--c-primary);
	color: var(--c-primary-contrast);
}

html .dropdown-menu {
	background-color: var(--card-bg);
	border-color: var(--c-border);
	box-shadow: var(--c-shadow-sm);
	color: var(--c-text-body);
}

html .dropdown-menu > li > a {
	color: var(--c-text-body);
}

html .dropdown-menu > li > a:hover,
html .dropdown-menu > li > a:focus {
	background-color: var(--c-primary-soft);
	color: var(--c-primary-dark);
}

html .dropdown-menu .divider {
	background-color: var(--c-border);
	opacity: 1;
}

html .dropdown-submenu:hover,
html .dropdown-submenu:focus {
	background-color: var(--c-primary-soft);
}

html .modal-content,
html .modal-header,
html .modal-footer {
	border-color: var(--c-border);
	color: var(--c-text-body);
}

html .modal-header {
	border-bottom-color: var(--c-border);
}

html .modal-footer {
	border-top-color: var(--c-border);
}

/* --- 14.6 Labels, badges, callouts, alerts, progress --------------------- */

html .label-primary,
html .label-info,
html .callout-info,
html .modal-primary .modal-body,
html .modal-primary .modal-header,
html .modal-primary .modal-footer {
	background-color: var(--c-primary) !important;
	color: var(--c-primary-contrast) !important;
}

html .label-light-blue,
html .bg-light-blue {
	background-color: var(--c-primary) !important;
	color: var(--c-primary-contrast) !important;
}

html .label-success,
html .callout-success,
html .modal-success .modal-body,
html .modal-success .modal-header,
html .modal-success .modal-footer {
	background-color: var(--c-success) !important;
	color: var(--c-text-inverse) !important;
}

html .label-info,
html .callout-info {
	background-color: var(--c-info) !important;
	color: var(--c-text-inverse) !important;
}

html .label-warning,
html .label-waring,
html .callout-warning,
html .modal-warning .modal-body,
html .modal-warning .modal-header,
html .modal-warning .modal-footer {
	background-color: var(--c-warning) !important;
	color: var(--c-text-strong) !important;
}

html .label-danger,
html .callout-danger,
html .modal-danger .modal-body,
html .modal-danger .modal-header,
html .modal-danger .modal-footer {
	background-color: var(--c-danger) !important;
	color: var(--c-text-inverse) !important;
}

html .alert {
	border-radius: var(--radius-sm);
}

html .alert-success {
	background-color: var(--c-success-bg);
	border-color: var(--c-success);
	color: var(--c-success-deepest);
}

html .alert-info {
	background-color: var(--c-info-soft);
	border-color: var(--c-info);
	color: var(--c-text-body);
}

html .alert-warning {
	background-color: var(--c-warning-soft);
	border-color: var(--c-warning);
	color: var(--c-text-body);
}

html .alert-danger {
	background-color: var(--c-danger-bg);
	border-color: var(--c-danger);
	color: var(--c-danger-deepest);
}

html .badge {
	background-color: var(--c-primary);
	color: var(--c-primary-contrast);
}

html .badge:hover,
html .badge:focus {
	background-color: var(--c-primary-hover);
	color: var(--c-primary-contrast);
}

html .progress {
	background-color: var(--c-surface-muted);
}

html .progress-bar {
	background-color: var(--c-primary);
	color: var(--c-primary-contrast);
}

html .progress-bar-success {
	background-color: var(--c-success);
}

html .progress-bar-info {
	background-color: var(--c-info);
}

html .progress-bar-warning {
	background-color: var(--c-warning);
}

html .progress-bar-danger {
	background-color: var(--c-danger);
}

/* --- 14.7 Tables --------------------------------------------------------- */

html .table {
	background-color: transparent;
	color: var(--c-text-body);
}

html .table > thead > tr > th,
html .table > thead > tr > td,
html .table > tbody > tr > th,
html .table > tbody > tr > td,
html .table > tfoot > tr > th,
html .table > tfoot > tr > td {
	border-top-color: var(--c-border);
}

html .table > thead > tr > th {
	border-bottom: 2px solid var(--c-border);
	color: var(--c-text-heading);
}

html .table-striped > tbody > tr:nth-of-type(odd),
html .table-striped > tbody > tr:nth-of-type(even) {
	background-color: var(--c-surface-alt);
}

/* DataTables marks a clicked row tr.selected. Its own rule ties on specificity
   with the striped rule above and is loaded earlier, so restate it here to win
   on source order. Without this a selected row never turns blue. */
html .table-striped > tbody > tr.selected,
html .table > tbody > tr.selected {
	background-color: var(--c-row-selected);
}

/* Row highlight (:hover and .active) is intentionally unthemed so selected
   rows keep their pre-theme.css grey instead of an orange tint */

/* --- 14.8 AdminLTE shell (top bar + sidebar) ----------------------------- */
/* Repaints the blue skin and the shell rules that live in admin.css.      */

html .main-header,
html .main-sidebar,
html .main-footer,
html .left-side,
html .right-side {
	background-color: var(--ui-chrome-bg);
	color: var(--c-text-body);
}

html .main-header {
	box-shadow: var(--ui-header-shadow);
}

html .main-header > .logo,
html .main-header > .navbar {
	background-color: var(--ui-chrome-bg);
	border-right-color: var(--ui-chrome-border);
	color: var(--ui-chrome-fg);
}

html .main-header > .navbar .sidebar-toggle {
	border-right-color: var(--ui-chrome-border);
	color: var(--ui-chrome-fg);
}

html .main-header > .navbar .sidebar-toggle:hover {
	background-color: var(--ui-chrome-hover-bg);
	color: var(--ui-chrome-fg-strong);
}

html .main-header .navbar .navbar-nav > li > a {
	color: var(--ui-chrome-fg);
}

html .main-header .navbar .navbar-nav > li > a:hover,
html .main-header .navbar .navbar-nav > li > a:focus,
html .main-header .navbar .navbar-nav > .open > a,
html .main-header .navbar .navbar-nav > .open > a:hover,
html .main-header .navbar .navbar-nav > .open > a:focus {
	background-color: var(--ui-chrome-hover-bg);
	color: var(--ui-chrome-fg-strong);
}

html .navbar-title .inner-title {
	color: var(--ui-chrome-fg-strong);
}

html .sidebar-menu > li > a {
	background: transparent;
	border-left: 3px solid transparent;
	color: var(--ui-nav-fg);
}

html .sidebar-menu > li > a > span {
	color: var(--ui-nav-fg) !important;
}

html .sidebar-menu > li > a:hover {
	background-color: var(--ui-chrome-hover-bg);
	border-left-color: var(--ui-nav-hover-border);
	color: var(--ui-chrome-fg-strong);
}

html .sidebar-menu > li > a:hover > span {
	color: var(--ui-chrome-fg-strong) !important;
}

html .sidebar-menu > li.active > a {
	background-color: var(--ui-nav-active-bg);
	border-left-color: var(--ui-nav-active-fg);
	color: var(--ui-nav-active-fg);
}

html .sidebar-menu > li.active > a > span {
	color: var(--ui-nav-active-fg) !important;
}

html .sidebar-menu > li.header {
	background-color: var(--c-secondary);
	color: var(--c-text-inverse);
}

/* The _all-skins "blue" skin, neutralised so it follows the tokens */
html [class*="skin-"] .sidebar a,
html [class*="skin-"] .treeview-menu > li > a {
	color: var(--ui-nav-fg);
}

html [class*="skin-"] .sidebar-menu > li > a {
	border-left-color: transparent;
}

html [class*="skin-"] .sidebar-menu > li:hover > a,
html [class*="skin-"] .sidebar-menu > li.active > a {
	background-color: var(--ui-nav-active-bg);
	border-left-color: var(--ui-nav-active-fg);
	color: var(--ui-nav-active-fg);
}

html [class*="skin-"] .main-header .navbar {
	background-color: var(--ui-chrome-bg);
}

html [class*="skin-"] .main-header .navbar .nav > li > a {
	color: var(--ui-chrome-fg);
}

html [class*="skin-"] .main-header .navbar .nav > li > a:hover,
html [class*="skin-"] .main-header .navbar .nav > li > a:focus,
html [class*="skin-"] .main-header .navbar .nav > li > a:active,
html [class*="skin-"] .main-header .navbar .nav .open > a {
	background-color: var(--ui-chrome-hover-bg);
	color: var(--ui-chrome-fg-strong);
}

html [class*="skin-"] .user-menu > li > a,
html [class*="skin-"] .user-menu .dropdown-menu {
	color: var(--ui-chrome-fg);
}

/* --- 14.9 Admin shell page furniture ------------------------------------- */

html .content-wrapper {
	background-color: var(--ui-page-bg);
}

html .content-header {
	background-color: transparent;
	color: var(--c-text-body);
}

html .content-header h1,
html .content-header h1 small {
	color: var(--ui-chrome-fg-strong);
}

html .content-header h1 small {
	color: var(--c-text-muted);
}

html .error {
	color: var(--c-danger);
	font-weight: normal;
}