/* ============================================================================
   WOOMAIL — THEME BLUE (clean + modern)
   File: appwoomail/public/core/css/theme/blue.css

   Goals:
   - Modern, clean blue UI
   - Cards white, page background unchanged by default
   - Right sidebar / aside areas: light gray (not white)
   - Works with mixed Bootstrap 3/4/5-ish selectors + Select2 + custom checks
   - Dark mode included
============================================================================ */

/* ---------------------------------------------------------------------------
   TOKENS (Light)
--------------------------------------------------------------------------- */
.theme-blue {
  --tb-primary: #3f6df6;
  --tb-primary-hover: #2f5fe6;
  --tb-primary-soft: #edf3ff;
  --tb-primary-soft-2: #dfe9ff;

  --tb-surface: #ffffff;
  --tb-surface-2: #f7f9fc;     /* light gray panels / side areas */
  --tb-border: #e6edf5;
  --tb-border-2: #d9e3ef;

  --tb-text: #0f172a;
  --tb-muted: #667085;

  --tb-radius: 14px;
  --tb-radius-sm: 10px;
  --tb-shadow: 0 16px 40px rgba(16, 24, 40, .08);
  --tb-shadow-sm: 0 8px 22px rgba(16, 24, 40, .06);

  --tb-ring: 0 0 0 .22rem rgba(63, 109, 246, .18);
}

/* ---------------------------------------------------------------------------
   NAVBAR
--------------------------------------------------------------------------- */
.theme-blue .navbar-main {
  background-color: #004a9e !important;
  border-bottom: 1px solid var(--tb-border);
}

/* ---------------------------------------------------------------------------
   CARDS / PANELS
--------------------------------------------------------------------------- */
.theme-blue .card,
.theme-blue .panel,
.theme-blue .content-panel,
.theme-blue .box,
.theme-blue .well {
  background: var(--tb-surface);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius);
  box-shadow: var(--tb-shadow-sm);
}
.theme-blue .card .card-header,
.theme-blue .panel-heading {
  background: transparent;
  border-bottom: 1px solid var(--tb-border);
}

/* ---------------------------------------------------------------------------
   BUTTONS
--------------------------------------------------------------------------- */
.theme-blue .btn { border-radius: 12px; }

.theme-blue .btn-primary {
  background: var(--tb-primary);
  border-color: var(--tb-primary);
  box-shadow: 0 10px 20px rgba(63, 109, 246, .18);
}
.theme-blue .btn-primary:hover,
.theme-blue .btn-primary:focus {
  background: var(--tb-primary-hover);
  border-color: var(--tb-primary-hover);
}
.theme-blue .btn-primary:focus,
.theme-blue .btn-primary:focus-visible {
  outline: 0;
  box-shadow: var(--tb-ring);
}

.theme-blue .btn-outline-primary,
.theme-blue .btn-primary.btn-outline {
  color: var(--tb-primary);
  background: #fff;
  border-color: var(--tb-border-2);
}
.theme-blue .btn-outline-primary:hover,
.theme-blue .btn-outline-primary:focus,
.theme-blue .btn-primary.btn-outline:hover,
.theme-blue .btn-primary.btn-outline:focus {
  background: var(--tb-primary-soft);
  border-color: var(--tb-primary-soft-2);
  color: var(--tb-primary-hover);
  box-shadow: var(--tb-ring);
}

/* Keep .btn-info coherent (many UIs use it for secondary actions) */
.theme-blue .btn-info {
  background: var(--tb-primary-soft);
  border-color: var(--tb-primary-soft-2);
  color: var(--tb-primary);
}
.theme-blue .btn-info:hover,
.theme-blue .btn-info:focus {
  background: var(--tb-primary-soft-2);
  border-color: var(--tb-primary-soft-2);
  color: var(--tb-primary-hover);
  box-shadow: var(--tb-ring);
}

/* ---------------------------------------------------------------------------
   LINKS
--------------------------------------------------------------------------- */
.theme-blue a:not(.btn):not(.dropdown-item):not(.nav-link) {
  color: #3f454f;
}
.theme-blue a:not(.btn):not(.dropdown-item):not(.nav-link):hover {
  color: #0a3173;
}

/* ---------------------------------------------------------------------------
   INPUTS / SELECTS
--------------------------------------------------------------------------- */
.theme-blue .form-control,
.theme-blue .form-select,
.theme-blue input[type="text"],
.theme-blue input[type="email"],
.theme-blue input[type="password"],
.theme-blue input[type="search"],
.theme-blue textarea,
.theme-blue select {
  background: #fff;
  color: var(--tb-text);
  border: 1px solid var(--tb-border);
  border-radius: 12px;
}

.theme-blue .form-control:focus,
.theme-blue .form-select:focus,
.theme-blue input:focus,
.theme-blue textarea:focus,
.theme-blue select:focus {
  outline: 0;
  border-color: rgba(63, 109, 246, .55);
  box-shadow: var(--tb-ring);
}

/* ---------------------------------------------------------------------------
   TABS (legacy + modern)
--------------------------------------------------------------------------- */
.theme-blue .nav-tabs { border-bottom: 1px solid var(--tb-border); }

/* Legacy */
.theme-blue .nav-tabs > li > a {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--tb-muted);
}
.theme-blue .nav-tabs > li.active > a,
.theme-blue .nav-tabs > li.active > a:hover,
.theme-blue .nav-tabs > li.active > a:focus {
  color: var(--tb-text);
  border-bottom-color: var(--tb-primary);
}

/* Modern */
.theme-blue .nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--tb-muted);
}
.theme-blue .nav-tabs .nav-link:hover,
.theme-blue .nav-tabs .nav-link:focus {
  color: var(--tb-text);
  border-bottom-color: rgba(63, 109, 246, .30);
}
.theme-blue .nav-tabs .nav-link.active,
.theme-blue .nav-tabs .nav-link.active:hover,
.theme-blue .nav-tabs .nav-link.active:focus {
  color: var(--tb-text);
  border-bottom-color: var(--tb-primary);
}

/* ---------------------------------------------------------------------------
   DROPDOWNS
--------------------------------------------------------------------------- */
.theme-blue .dropdown-menu {
  border-radius: var(--tb-radius);
  border: 1px solid var(--tb-border);
  box-shadow: var(--tb-shadow);
}
.theme-blue .dropdown-menu li:hover > a,
.theme-blue .dropdown-menu .dropdown-item:hover {
  background: var(--tb-primary-soft);
}
.theme-blue .dropdown-menu > .active > a,
.theme-blue .dropdown-menu > .active > a:hover,
.theme-blue .dropdown-menu > .active > a:focus,
.theme-blue .dropdown-menu .dropdown-item.active,
.theme-blue .dropdown-menu .dropdown-item.active:hover,
.theme-blue .dropdown-menu .dropdown-item.active:focus {
  background: var(--tb-primary-soft-2);
  color: #3f454f;
}

/* ---------------------------------------------------------------------------
   PAGINATION
--------------------------------------------------------------------------- */
.theme-blue .page-link {
  border-radius: 10px;
  border-color: var(--tb-border);
}
.theme-blue .page-link:focus { box-shadow: var(--tb-ring); }
.theme-blue .page-item.active .page-link {
  background: var(--tb-primary-soft);
  border-color: var(--tb-primary);
  color: var(--tb-text);
}

/* ---------------------------------------------------------------------------
   PROGRESS
--------------------------------------------------------------------------- */
.theme-blue .progress {
  border-radius: 999px;
  background: rgba(16, 24, 40, .06);
}
.theme-blue .progress-bar,
.theme-blue .progress-bar-info {
  background: linear-gradient(90deg, var(--tb-primary), #7a5cf8);
  border-radius: 999px;
}

/* ---------------------------------------------------------------------------
   SELECT2
--------------------------------------------------------------------------- */
.theme-blue .select2-container .select2-selection--single,
.theme-blue .select2-container .select2-selection--multiple {
  border-radius: 12px;
  border: 1px solid var(--tb-border);
  min-height: 40px;
}
.theme-blue .select2-results__option[aria-selected=false]:hover {
  background-color: var(--tb-primary-soft) !important;
}
.theme-blue .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--tb-primary-soft-2) !important;
  color: var(--tb-text) !important;
}

/* ---------------------------------------------------------------------------
   CHECKBOX / RADIO (Switchery / Styled)
--------------------------------------------------------------------------- */
.theme-blue .switchery[type="checkbox"]:checked ~ .check-symbol:before,
.theme-blue .styled[type="checkbox"]:checked ~ .check-symbol:before {
  background-color: var(--tb-primary);
  border-color: var(--tb-primary);
}
.theme-blue .styled[type="radio"]:checked ~ .check-symbol:after {
  background-color: var(--tb-primary);
}

/* ---------------------------------------------------------------------------
   RIGHT SIDEBAR / ASIDE AREAS (fix "white sidebar")
   Covers common right-rail patterns in admin dashboards.
   If your wrapper has a specific class/id, add it to this list.
--------------------------------------------------------------------------- */
.theme-blue .sidebar,
.theme-blue .sidebar-right,
.theme-blue .right-sidebar,
.theme-blue .aside,
.theme-blue aside,
.theme-blue .app-sidebar,
.theme-blue .dashboard-sidebar,
.theme-blue .wmd-sidebar,
.theme-blue #sidebar,
.theme-blue #right-sidebar {
  background: var(--tb-surface-2);
}

/* If it’s a column container, add spacing + separator (only when appropriate) */
.theme-blue .sidebar-right,
.theme-blue .right-sidebar,
.theme-blue .dashboard-sidebar,
.theme-blue .wmd-sidebar,
.theme-blue #right-sidebar {
  border-left: 1px solid var(--tb-border);
  padding: 16px;
}

/* Cards inside sidebar stay white */
.theme-blue .sidebar .card,
.theme-blue .sidebar-right .card,
.theme-blue .right-sidebar .card,
.theme-blue aside .card,
.theme-blue #right-sidebar .card {
  background: #fff;
  border-color: var(--tb-border);
  box-shadow: var(--tb-shadow-sm);
}

/* ---------------------------------------------------------------------------
   DARK MODE
--------------------------------------------------------------------------- */
body.mode-dark.theme-blue {
  --tb-surface: #0f172a;
  --tb-surface-2: #0b1324;
  --tb-border: rgba(148, 163, 184, .18);
  --tb-border-2: rgba(148, 163, 184, .24);

  --tb-text: rgba(226, 232, 240, .96);
  --tb-muted: rgba(226, 232, 240, .68);

  --tb-ring: 0 0 0 .22rem rgba(95, 160, 221, .22);
}

body.mode-dark.theme-blue .navbar-main {
  background-color: rgba(15, 23, 42, .92) !important;
  border-bottom: 1px solid var(--tb-border);
}

body.mode-dark.theme-blue .card,
body.mode-dark.theme-blue .panel,
body.mode-dark.theme-blue .content-panel,
body.mode-dark.theme-blue .box,
body.mode-dark.theme-blue .well {
  background: var(--tb-surface);
  border-color: var(--tb-border);
  box-shadow: none;
}

body.mode-dark.theme-blue .form-control,
body.mode-dark.theme-blue .form-select,
body.mode-dark.theme-blue input,
body.mode-dark.theme-blue textarea,
body.mode-dark.theme-blue select {
  background: rgba(255,255,255,.03);
  border-color: var(--tb-border);
  color: var(--tb-text);
}

body.mode-dark.theme-blue a:not(.btn):not(.dropdown-item):not(.nav-link) {
  color: #8bb7ff;
}
body.mode-dark.theme-blue a:not(.btn):not(.dropdown-item):not(.nav-link):hover {
  color: #cfe2ff;
}

body.mode-dark.theme-blue .dropdown-menu {
  background: var(--tb-surface);
  border-color: var(--tb-border);
}

body.mode-dark.theme-blue .sidebar,
body.mode-dark.theme-blue .sidebar-right,
body.mode-dark.theme-blue .right-sidebar,
body.mode-dark.theme-blue .aside,
body.mode-dark.theme-blue aside,
body.mode-dark.theme-blue .app-sidebar,
body.mode-dark.theme-blue .dashboard-sidebar,
body.mode-dark.theme-blue .wmd-sidebar,
body.mode-dark.theme-blue #sidebar,
body.mode-dark.theme-blue #right-sidebar {
  background: var(--tb-surface-2);
  border-left-color: var(--tb-border);
}

body.mode-dark.theme-blue .progress {
  background: rgba(226,232,240,.08);
}
body.mode-dark.theme-blue .progress-bar,
body.mode-dark.theme-blue .progress-bar-info {
  background: linear-gradient(90deg, #8bb7ff, #7a5cf8);
}

/* ---------------------------------------------------------------------------
   Compatibility token (kept, but coherent)
--------------------------------------------------------------------------- */
.theme-blue.bg-slate-800 {
  background-color: #0b2b3a;
  border-color: #0b2b3a;
}