/* ==========================================================================
   SBBC  ·  Modern UI redesign layer
   A design-system override loaded LAST so it wins the cascade.
   Restyles Bootstrap primitives + the templatemo/admin theme classes.
   Fresh modern palette · Light + Dark · Inter typography.
   Author: redesign pass · single source of truth for the new look.
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * 1. Design tokens
 * ------------------------------------------------------------------ */
:root {
  /* Brand — fresh modern indigo + cyan accent */
  --ui-primary:        #4f46e5;
  --ui-primary-600:    #4338ca;
  --ui-primary-700:    #3730a3;
  --ui-primary-050:    #eef2ff;
  --ui-primary-100:    #e0e7ff;
  --ui-accent:         #06b6d4;
  --ui-accent-600:     #0891b2;

  /* Semantic */
  --ui-success:        #10b981;
  --ui-success-050:    #ecfdf5;
  --ui-warning:        #f59e0b;
  --ui-warning-050:    #fffbeb;
  --ui-danger:         #ef4444;
  --ui-danger-050:     #fef2f2;
  --ui-info:           #3b82f6;

  /* Neutrals (slate) */
  --ui-bg:             #f7f8fb;
  --ui-surface:        #ffffff;
  --ui-surface-2:      #f1f3f9;
  --ui-border:         #e5e8f0;
  --ui-border-strong:  #d3d8e6;
  --ui-text:           #1e2233;
  --ui-text-muted:     #5b6376;
  --ui-text-subtle:    #8a91a6;
  --ui-heading:        #12162a;

  /* Elevation */
  --ui-shadow-sm:  0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --ui-shadow-md:  0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.05);
  --ui-shadow-lg:  0 12px 32px rgba(16,24,40,.12), 0 4px 8px rgba(16,24,40,.06);
  --ui-shadow-primary: 0 8px 20px rgba(79,70,229,.28);

  /* Shape & motion */
  --ui-radius-sm: 8px;
  --ui-radius:    12px;
  --ui-radius-lg: 18px;
  --ui-radius-pill: 999px;
  --ui-ease: cubic-bezier(.4,0,.2,1);
  --ui-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  color-scheme: light;
}

/* ---- Dark theme -------------------------------------------------- */
html[data-theme="dark"] {
  --ui-primary:        #818cf8;
  --ui-primary-600:    #6366f1;
  --ui-primary-700:    #4f46e5;
  --ui-primary-050:    #1e213a;
  --ui-primary-100:    #262a47;
  --ui-accent:         #22d3ee;
  --ui-accent-600:     #06b6d4;

  --ui-success-050:    #10251d;
  --ui-warning-050:    #2a2110;
  --ui-danger-050:     #2a1615;

  --ui-bg:             #0d1017;
  --ui-surface:        #161a24;
  --ui-surface-2:      #1d2230;
  --ui-border:         #272d3d;
  --ui-border-strong:  #333a4d;
  --ui-text:           #e6e8ef;
  --ui-text-muted:     #a2a9bd;
  --ui-text-subtle:    #757d92;
  --ui-heading:        #f4f6fb;

  --ui-shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  --ui-shadow-md:  0 4px 14px rgba(0,0,0,.45);
  --ui-shadow-lg:  0 16px 40px rgba(0,0,0,.55);
  --ui-shadow-primary: 0 8px 20px rgba(79,70,229,.4);

  color-scheme: dark;
}

/* ------------------------------------------------------------------ *
 * 2. Base
 * ------------------------------------------------------------------ */
body {
  font-family: var(--ui-font) !important;
  background-color: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: .1px;
  transition: background-color .3s var(--ui-ease), color .3s var(--ui-ease);
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: var(--ui-font) !important;
  color: var(--ui-heading) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
}

p, span, li, td, th, label, div { font-family: var(--ui-font); }

a { color: var(--ui-primary); text-decoration: none; transition: color .15s var(--ui-ease); }
a:hover { color: var(--ui-primary-600); }

:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; }

::selection { background: var(--ui-primary-100); color: var(--ui-heading); }

/* Scrollbar polish */
* { scrollbar-width: thin; scrollbar-color: var(--ui-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--ui-border-strong); border-radius: var(--ui-radius-pill); border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ui-text-subtle); background-clip: content-box; }

/* ------------------------------------------------------------------ *
 * 3. Buttons  (Bootstrap + template .main-btn / .btn)
 * ------------------------------------------------------------------ */
.btn, .main-btn, button.btn {
  font-family: var(--ui-font) !important;
  font-weight: 600 !important;
  border-radius: var(--ui-radius-sm) !important;
  padding: .6rem 1.15rem !important;
  border: 1px solid transparent !important;
  transition: transform .12s var(--ui-ease), box-shadow .2s var(--ui-ease), background-color .2s var(--ui-ease), color .2s var(--ui-ease) !important;
  box-shadow: var(--ui-shadow-sm);
  letter-spacing: .01em;
}
.btn:hover, .main-btn:hover { transform: translateY(-1px); box-shadow: var(--ui-shadow-md); }
.btn:active, .main-btn:active { transform: translateY(0); }
.btn:focus, .main-btn:focus { box-shadow: 0 0 0 3px var(--ui-primary-100) !important; }

.btn-primary, .main-btn, .main-btn.primary {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: #fff !important;
}
.btn-primary:hover, .main-btn:hover { background: var(--ui-primary-600) !important; border-color: var(--ui-primary-600) !important; box-shadow: var(--ui-shadow-primary) !important; color:#fff !important; }

.btn-success {
  background: var(--ui-success) !important;
  border-color: var(--ui-success) !important;
  color: #fff !important;
}
.btn-success:hover { filter: brightness(.94); color:#fff !important; }

.btn-danger { background: var(--ui-danger) !important; border-color: var(--ui-danger) !important; color:#fff !important; }
.btn-danger:hover { filter: brightness(.94); }
.btn-warning { background: var(--ui-warning) !important; border-color: var(--ui-warning) !important; color:#3a2a00 !important; }
.btn-info { background: var(--ui-info) !important; border-color: var(--ui-info) !important; color:#fff !important; }
.btn-secondary { background: var(--ui-surface-2) !important; border-color: var(--ui-border-strong) !important; color: var(--ui-text) !important; }
.btn-secondary:hover { background: var(--ui-border) !important; }

.btn-outline-primary { color: var(--ui-primary) !important; border-color: var(--ui-primary) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--ui-primary) !important; color:#fff !important; }
.btn-outline-secondary { color: var(--ui-text-muted) !important; border-color: var(--ui-border-strong) !important; background: transparent !important; }
.btn-outline-secondary:hover { background: var(--ui-surface-2) !important; color: var(--ui-text) !important; }

.btn-link { color: var(--ui-primary) !important; box-shadow: none; text-decoration: none; }
.btn-link:hover { color: var(--ui-primary-600) !important; text-decoration: underline; }

.btn-sm { padding: .35rem .75rem !important; font-size: .82rem !important; }
.btn-lg { padding: .8rem 1.6rem !important; font-size: 1.05rem !important; border-radius: var(--ui-radius) !important; }

/* ------------------------------------------------------------------ *
 * 4. Forms
 * ------------------------------------------------------------------ */
.form-control, .form-select, textarea, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="tel"], input[type="date"],
input[type="search"], select {
  font-family: var(--ui-font) !important;
  background-color: var(--ui-surface) !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  padding: .6rem .85rem !important;
  transition: border-color .15s var(--ui-ease), box-shadow .15s var(--ui-ease) !important;
  box-shadow: none !important;
}
.form-control::placeholder, textarea::placeholder, input::placeholder { color: var(--ui-text-subtle) !important; opacity: 1; }
.form-control:focus, .form-select:focus, textarea:focus,
input:focus, select:focus {
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 3px var(--ui-primary-100) !important;
  outline: none !important;
}
.form-control:disabled, .form-select:disabled { background: var(--ui-surface-2) !important; color: var(--ui-text-subtle) !important; }

/* Theme plain labels, but never clobber labels that carry their own inline
   colour (the app's red "required" / green "success" status messages). */
.form-label, label:not([style*="color"]) { color: var(--ui-text) !important; font-weight: 500 !important; margin-bottom: .35rem; }
.form-text, small, .text-muted { color: var(--ui-text-muted) !important; }

.form-check-input { border: 1.5px solid var(--ui-border-strong) !important; }
.form-check-input:checked { background-color: var(--ui-primary) !important; border-color: var(--ui-primary) !important; }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--ui-primary-100) !important; }

.input-group-text { background: var(--ui-surface-2) !important; border: 1px solid var(--ui-border-strong) !important; color: var(--ui-text-muted) !important; border-radius: var(--ui-radius-sm) !important; }

/* ------------------------------------------------------------------ *
 * 5. Cards / panels / surfaces
 * ------------------------------------------------------------------ */
.card, .panel, .x_panel, .tile, .widget {
  background-color: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow-sm) !important;
  transition: box-shadow .2s var(--ui-ease), transform .2s var(--ui-ease) !important;
}
.card:hover, .x_panel:hover { box-shadow: var(--ui-shadow-md) !important; }
.card-header, .x_title {
  background: transparent !important;
  border-bottom: 1px solid var(--ui-border) !important;
  color: var(--ui-heading) !important;
  font-weight: 600 !important;
  border-radius: var(--ui-radius) var(--ui-radius) 0 0 !important;
  padding: 1rem 1.25rem !important;
}
.card-body { padding: 1.25rem !important; }
.card-footer { background: var(--ui-surface-2) !important; border-top: 1px solid var(--ui-border) !important; }

/* ------------------------------------------------------------------ *
 * 6. Tables
 * ------------------------------------------------------------------ */
.table, table.dataTable {
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}
.table thead th, table.dataTable thead th {
  background: var(--ui-surface-2) !important;
  color: var(--ui-text-muted) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--ui-border-strong) !important;
  padding: .8rem 1rem !important;
}
.table td, .table th { border-color: var(--ui-border) !important; padding: .75rem 1rem !important; vertical-align: middle; }
.table tbody tr { transition: background-color .12s var(--ui-ease); }
.table-hover tbody tr:hover, .table tbody tr:hover { background: var(--ui-primary-050) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: var(--ui-surface-2) !important; }

/* ------------------------------------------------------------------ *
 * 7. Badges, alerts, pills
 * ------------------------------------------------------------------ */
.badge { font-weight: 600 !important; border-radius: var(--ui-radius-pill) !important; padding: .35em .7em !important; letter-spacing: .01em; }
.badge.bg-primary, .badge-primary { background: var(--ui-primary) !important; color:#fff !important; }
.badge.bg-success, .badge-success { background: var(--ui-success) !important; color:#fff !important; }
.badge.bg-danger,  .badge-danger  { background: var(--ui-danger)  !important; color:#fff !important; }
.badge.bg-warning, .badge-warning { background: var(--ui-warning) !important; color:#3a2a00 !important; }

.alert { border-radius: var(--ui-radius) !important; border: 1px solid transparent !important; font-weight: 500; padding: .9rem 1.1rem !important; }
.alert-success { background: var(--ui-success-050) !important; color: #0f766e !important; border-color: rgba(16,185,129,.3) !important; }
.alert-danger  { background: var(--ui-danger-050)  !important; color: #b91c1c !important; border-color: rgba(239,68,68,.3) !important; }
.alert-warning { background: var(--ui-warning-050) !important; color: #b45309 !important; border-color: rgba(245,158,11,.3) !important; }
.alert-info    { background: var(--ui-primary-050) !important; color: var(--ui-primary-700) !important; border-color: rgba(79,70,229,.25) !important; }

/* ------------------------------------------------------------------ *
 * 8. Navbar (bootstrap) + admin topbar
 * ------------------------------------------------------------------ */
.navbar {
  background: var(--ui-surface) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  box-shadow: var(--ui-shadow-sm) !important;
  backdrop-filter: saturate(180%) blur(6px);
}
.navbar-brand { font-weight: 800 !important; color: var(--ui-heading) !important; letter-spacing: -.02em; }
.navbar .nav-link, .topmenuul .nav-link { color: var(--ui-text-muted) !important; font-weight: 500 !important; border-radius: var(--ui-radius-sm); transition: color .15s var(--ui-ease), background .15s var(--ui-ease); }
.navbar .nav-link:hover, .topmenuul .nav-link:hover { color: var(--ui-primary) !important; }
.navbar .nav-link.active, .topmenuul .nav-link.active { color: var(--ui-primary) !important; font-weight: 600 !important; }

/* Dropdown menus */
.dropdown-menu, .sub-menu {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow-lg) !important;
  padding: .4rem !important;
}
.dropdown-item, .sub-menu li a { color: var(--ui-text) !important; border-radius: var(--ui-radius-sm) !important; padding: .5rem .75rem !important; }
.dropdown-item:hover, .sub-menu li a:hover { background: var(--ui-primary-050) !important; color: var(--ui-primary) !important; }

/* ------------------------------------------------------------------ *
 * 9. Admin sidebar (gentelella-style .nav_menu / .left_col)
 * ------------------------------------------------------------------ */
.left_col, .nav-sm .left_col, .sidebar {
  background: var(--ui-surface) !important;
  border-right: 1px solid var(--ui-border) !important;
}
.nav_menu, .top_nav .nav_menu { background: var(--ui-surface) !important; border-bottom: 1px solid var(--ui-border) !important; }
.nav.side-menu > li > a, .side-menu li a { color: var(--ui-text-muted) !important; border-radius: var(--ui-radius-sm); font-weight: 500; }
.nav.side-menu > li > a:hover, .nav.side-menu > li.active > a {
  background: var(--ui-primary-050) !important;
  color: var(--ui-primary) !important;
}
.nav.side-menu > li.active > a { box-shadow: inset 3px 0 0 var(--ui-primary); }

/* ------------------------------------------------------------------ *
 * 10. Modals
 * ------------------------------------------------------------------ */
.modal-content { background: var(--ui-surface) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius-lg) !important; box-shadow: var(--ui-shadow-lg) !important; }
.modal-header, .modal-footer { border-color: var(--ui-border) !important; }
.modal-title { color: var(--ui-heading) !important; }
.modal-backdrop.show { opacity: .55; }

/* ------------------------------------------------------------------ *
 * 11. Templatemo landing theme overrides (_HomeLayout)
 * ------------------------------------------------------------------ */
.header-area, .sticky-area, .navigation { background: var(--ui-surface) !important; box-shadow: var(--ui-shadow-sm); }
.header-inner-box { padding: .5rem 0; }
.footer-area { background: var(--ui-surface-2) !important; color: var(--ui-text) !important; border-top: 1px solid var(--ui-border); }
.footer-area h6 { color: var(--ui-heading) !important; text-transform: uppercase; font-size: .8rem; letter-spacing: .06em; }
.footer-area a, .footer-bottom a { color: var(--ui-text-muted) !important; }
.footer-area a:hover, .footer-bottom a:hover { color: var(--ui-primary) !important; }
.footer-bottom { background: var(--ui-surface) !important; border-top: 1px solid var(--ui-border); color: var(--ui-text-muted) !important; }
.subscribe-form input { border-radius: var(--ui-radius-pill) !important; }
.subscribe-form button { border-radius: var(--ui-radius-pill) !important; background: var(--ui-primary) !important; border-color: var(--ui-primary) !important; color:#fff !important; }
.social-area a { color: var(--ui-text-muted) !important; transition: color .15s var(--ui-ease); }
.social-area a:hover { color: var(--ui-primary) !important; }
.go-top { background: var(--ui-primary) !important; color:#fff !important; border-radius: var(--ui-radius-sm) !important; box-shadow: var(--ui-shadow-md); }

/* Generic hero / section headings inside landing */
.section-title h2, .hero-text h1 { color: var(--ui-heading) !important; }

/* ------------------------------------------------------------------ *
 * 12. Utility surface helpers (so custom pages inherit theme)
 * ------------------------------------------------------------------ */
.bg-white { background: var(--ui-surface) !important; }
.bg-light { background: var(--ui-surface-2) !important; }
.text-dark { color: var(--ui-text) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--ui-border) !important; }
hr { border-color: var(--ui-border) !important; opacity: 1; }

/* Pagination */
.page-link { color: var(--ui-primary) !important; border-color: var(--ui-border) !important; background: var(--ui-surface) !important; }
.page-item.active .page-link { background: var(--ui-primary) !important; border-color: var(--ui-primary) !important; color:#fff !important; }

/* List groups */
.list-group-item { background: var(--ui-surface) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; }
.list-group-item.active { background: var(--ui-primary) !important; border-color: var(--ui-primary) !important; }

/* Nav tabs / pills */
.nav-tabs { border-bottom: 1px solid var(--ui-border) !important; }
.nav-tabs .nav-link { color: var(--ui-text-muted) !important; border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; }
.nav-tabs .nav-link.active { color: var(--ui-primary) !important; background: transparent !important; border-bottom: 2px solid var(--ui-primary) !important; }
.nav-pills .nav-link.active { background: var(--ui-primary) !important; color:#fff !important; border-radius: var(--ui-radius-pill) !important; }

/* ------------------------------------------------------------------ *
 * 13. Theme toggle floating control (injected by modern-ui.js)
 * ------------------------------------------------------------------ */
#ui-theme-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1080;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-lg);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: transform .15s var(--ui-ease), background .2s var(--ui-ease), color .2s var(--ui-ease);
}
#ui-theme-toggle:hover { transform: translateY(-2px) scale(1.05); background: var(--ui-primary-050); color: var(--ui-primary); }
#ui-theme-toggle svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------------ *
 * 14. Dark-mode legibility layer
 *     Some legacy template surfaces (bootstrap .panel/.well, the admin
 *     theme's panels, login/tile boxes) keep a hard-coded light
 *     background. In dark mode that traps the now-light label text and
 *     makes it invisible. Force those surfaces dark and re-assert
 *     readable text so nothing disappears.
 * ------------------------------------------------------------------ */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .panel-default,
html[data-theme="dark"] .well,
html[data-theme="dark"] .x_panel,
html[data-theme="dark"] .x_content,
html[data-theme="dark"] .tile_count,
html[data-theme="dark"] .tile,
html[data-theme="dark"] .white-box,
html[data-theme="dark"] .dashboard_graph,
html[data-theme="dark"] .login_box,
html[data-theme="dark"] .login_wrapper,
html[data-theme="dark"] .form-horizontal,
html[data-theme="dark"] .jumbotron,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .well-lg,
html[data-theme="dark"] .thumbnail {
  background-color: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
}

/* Big structural wrappers that the admin/bootstrap theme paints light. */
html[data-theme="dark"] body,
html[data-theme="dark"] .main_container,
html[data-theme="dark"] .right_col,
html[data-theme="dark"] .container.body,
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .page-content {
  background-color: var(--ui-bg) !important;
}

/* Re-assert readable foreground colours in dark mode. Inline-coloured
   status labels (red/green) are deliberately left untouched. */
html[data-theme="dark"] label:not([style*="color"]),
html[data-theme="dark"] .control-label,
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] dt,
html[data-theme="dark"] dd,
html[data-theme="dark"] .form-group > label,
html[data-theme="dark"] .checkbox,
html[data-theme="dark"] .radio {
  color: var(--ui-text) !important;
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 { color: var(--ui-heading) !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}