/* ============================================================
   BRANCH MANAGEMENT MODULE THEME
   Blue / Indigo Accent — matching LTE_HR_RECRUIT_THEME pattern
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* ─────────────────────────────────────────────────────────────
   MODULE COLOR SYSTEM
───────────────────────────────────────────────────────────── */
.content-wrapper[data-module="branch-mgmt"] {
  --br-primary:        #1d4ed8;
  --br-primary-rgb:    29, 78, 216;
  --br-accent:         #1e40af;
  --br-accent-rgb:     30, 64, 175;
  --br-cyan:           #0ea5e9;
  --br-cyan-rgb:       14, 165, 233;
  --br-cyan-soft:      #e0f2fe;
  --br-surface:        #f8faff;
  --br-surface-tint:   #eff6ff;
  --br-border:         #e5e7eb;
  --br-border-focus:   #1d4ed8;
  --br-text-primary:   #0f172a;
  --br-text-secondary: #6b7280;
  --br-glow:           rgba(29, 78, 216, 0.10);

  /* LTE_TABLE_LIST.css accent tokens */
  --tbl-accent:        #1d4ed8;
  --tbl-accent-rgb:    29, 78, 216;

  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
}

/* ─────────────────────────────────────────────────────────────
   PAGE BASE
───────────────────────────────────────────────────────────── */
.content-wrapper[data-module="branch-mgmt"] {
  background: var(--br-surface);
}

/* ─────────────────────────────────────────────────────────────
   CONTENT HEADER
───────────────────────────────────────────────────────────── */
[data-module="branch-mgmt"] .content-header {
  background: #fff;
  border-bottom: 1px solid var(--br-border);
  padding: 18px 28px;
}

[data-module="branch-mgmt"] .content-header h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--br-text-primary);
  letter-spacing: -0.02em;
  margin: 0;
}

[data-module="branch-mgmt"] .breadcrumb-item a {
  color: var(--br-primary);
  font-size: 0.813rem;
  text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────
   PAGE ICON
───────────────────────────────────────────────────────────── */
.br-page-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(29, 78, 216, 0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1d4ed8;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   FILTER CARD
───────────────────────────────────────────────────────────── */
[data-module="branch-mgmt"] .br-filter-card {
  background: #fff;
  border: 1px solid var(--br-border);
  border-left: 3px solid var(--br-primary);
  border-radius: 10px;
  margin-bottom: 18px;
  overflow: hidden;
}

[data-module="branch-mgmt"] .br-filter-card .card-header {
  background: transparent;
  border-bottom: 1px solid #f3f4f6;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--br-text-primary);
}

[data-module="branch-mgmt"] .br-filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid rgba(var(--br-primary-rgb), 0.35);
  background: rgba(var(--br-primary-rgb), 0.05);
  color: var(--br-primary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

[data-module="branch-mgmt"] .br-filter-toggle-btn:not(.collapsed) {
  background: var(--br-primary);
  border-color: var(--br-primary);
  color: #fff;
}

[data-module="branch-mgmt"] .br-filter-toggle-btn .ftb-chevron {
  font-size: 0.60rem;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-module="branch-mgmt"] .br-filter-toggle-btn:not(.collapsed) .ftb-chevron {
  transform: rotate(180deg);
}

[data-module="branch-mgmt"] .br-filter-card .card-body {
  background: rgba(var(--br-primary-rgb), 0.01);
  border-top: 1px dashed rgba(var(--br-primary-rgb), 0.18);
  padding: 18px;
  animation: br-fade-in 0.2s ease;
}

@keyframes br-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────
   DATA TABLE CARD
───────────────────────────────────────────────────────────── */
[data-module="branch-mgmt"] .br-table-card {
  background: #fff;
  border: 1px solid var(--br-border);
  border-radius: 10px;
  overflow: hidden;
}

[data-module="branch-mgmt"] .br-table-card .card-header {
  background: transparent;
  border-bottom: 1px solid #f3f4f6;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Table base, hover, and DataTables chrome → LTE_TABLE_LIST.css */

/* ─────────────────────────────────────────────────────────────
   STATUS BADGES
───────────────────────────────────────────────────────────── */
.br-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.br-badge.active   { background: #dcfce7; color: #15803d; }
.br-badge.inactive { background: #fee2e2; color: #b91c1c; }
.br-badge.default  { background: #dbeafe; color: #1d4ed8; }

/* ─────────────────────────────────────────────────────────────
   CURRENCY TAG
───────────────────────────────────────────────────────────── */
.br-currency {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  background: #f1f5f9;
  color: #334155;
  border-radius: 6px;
  padding: 2px 8px;
}

/* ─────────────────────────────────────────────────────────────
   ACTION BUTTONS
───────────────────────────────────────────────────────────── */
[data-module="branch-mgmt"] .br-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 7px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

[data-module="branch-mgmt"] .br-action-btn.edit       { color: var(--br-primary); }
[data-module="branch-mgmt"] .br-action-btn.edit:hover { border-color: var(--br-primary); background: rgba(var(--br-primary-rgb), 0.06); }
[data-module="branch-mgmt"] .br-action-btn.del        { color: #dc2626; }
[data-module="branch-mgmt"] .br-action-btn.del:hover  { border-color: #dc2626; background: rgba(220, 38, 38, 0.06); }

/* ─────────────────────────────────────────────────────────────
   TOGGLE SWITCH
───────────────────────────────────────────────────────────── */
.br-toggle { position: relative; width: 44px; height: 24px; display: inline-block; }
.br-toggle input { opacity: 0; width: 0; height: 0; }

.br-toggle-slider {
  position: absolute; inset: 0;
  border-radius: 24px;
  background: #d1d5db;
  cursor: pointer;
  transition: background 0.2s ease;
}

.br-toggle-slider::before {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}

.br-toggle input:checked + .br-toggle-slider { background: #16a34a; }
.br-toggle input:checked + .br-toggle-slider::before { transform: translateX(20px); }

/* ─────────────────────────────────────────────────────────────
   MODAL — Add / Edit
───────────────────────────────────────────────────────────── */
.br-modal .modal-content {
  border: 1px solid #e5e7eb;
  border-top: 3px solid #1d4ed8;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(29, 78, 216, 0.15);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.br-modal .modal-header {
  border-bottom: 1px solid #f3f4f6;
  padding: 18px 22px 14px;
  background: transparent;
}

.br-modal .modal-header .modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.br-modal .modal-header .modal-title .mod-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(29, 78, 216, 0.10);
  color: #1d4ed8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.br-modal .modal-body  { padding: 20px 22px; }
.br-modal .modal-footer { border-top: 1px solid #f3f4f6; padding: 14px 22px; gap: 8px; }

.br-modal .btn-br-primary {
  background: #1d4ed8;
  border: none;
  color: #fff;
  border-radius: 7px;
  padding: 8px 20px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: all 0.18s ease;
}

.br-modal .btn-br-primary:hover {
  background: #1e40af;
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.30);
  transform: translateY(-1px);
}

.br-modal .btn-br-secondary {
  background: transparent;
  border: 1.5px solid #e5e7eb;
  color: #6b7280;
  border-radius: 7px;
  padding: 8px 18px;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: all 0.18s ease;
}

.br-modal .btn-br-secondary:hover {
  border-color: #9ca3af;
  color: #374151;
}

/* Section label — mirrors .hr-section-label exactly, blue tint */
.br-modal .hr-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1d4ed8;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(29, 78, 216, 0.20);
}

.br-modal .form-control,
.br-modal .form-select {
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  font-size: 0.875rem;
  padding: 8px 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: all 0.18s ease;
}

.br-modal .form-control:focus,
.br-modal .form-select:focus {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.08);
  outline: none;
}

.br-modal .form-label {
  font-size: 0.80rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 5px;
}

/* ─────────────────────────────────────────────────────────────
   DELETE CONFIRM MODAL
───────────────────────────────────────────────────────────── */
.br-del-modal .modal-content {
  border-radius: 12px;
  border: none;
  border-top: 3px solid #dc2626;
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-shadow: 0 20px 60px rgba(220, 38, 38, 0.15);
}

.br-del-modal .modal-header {
  background: #fff5f5;
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid #fee2e2;
}

.br-del-modal .modal-title {
  color: #dc2626;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ─────────────────────────────────────────────────────────────
   SEMANTIC TABLE CELL CLASSES
───────────────────────────────────────────────────────────── */
.br-cell-name        { font-weight: 600; color: #0f172a; }
.br-cell-mono        { font-family: 'DM Mono', monospace; font-size: 0.78rem; color: #374151; }
.br-cell-muted       { font-size: 0.78rem; color: #6b7280; }
.br-cell-empty       { color: #cbd5e1; }
.br-table-card-title { font-size: 0.875rem; font-weight: 700; color: #0f172a; }

/* ─────────────────────────────────────────────────────────────
   PRIMARY BUTTON  (page header)
───────────────────────────────────────────────────────────── */
[data-module="branch-mgmt"] .btn-primary {
  background: var(--br-primary);
  border: none;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 7px 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: all 0.18s ease;
}

[data-module="branch-mgmt"] .btn-primary:hover {
  background: var(--br-accent);
  box-shadow: 0 4px 14px rgba(var(--br-primary-rgb), 0.30);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE — Complete Coverage
   -----------------------------------------------------------------------
   Dark palette (Blue module — cooler than HR's violet):
     bg        #0d0f1a   page background
     surface   #151828   cards, headers, modals
     raised    #1c1f33   thead, elevated inputs
     border    #252840   all borders / dividers
     text      #e2e8f0   primary text
     muted     #9ca3af   secondary / label text
     subtle    #d1d5db   table cell body text
   -----------------------------------------------------------------------
   WHY !important on table cells:
     Bootstrap applies background-color directly on <td>/<th> via .table.
     Without !important these hardcoded values always win over our rules.
═══════════════════════════════════════════════════════════════════════ */

/* ── CSS variable overrides ── */
body.dark-mode .content-wrapper[data-module="branch-mgmt"] {
  --br-surface:        #0d0f1a;
  --br-surface-tint:   #151828;
  --br-border:         #252840;
  --br-border-focus:   #1d4ed8;
  --br-text-primary:   #e2e8f0;
  --br-text-secondary: #9ca3af;
  --br-cyan-soft:      rgba(14, 165, 233, 0.12);

  background: #0d0f1a;
}

body.dark-mode [data-module="branch-mgmt"] { color: #e2e8f0; }

/* ── Content header ── */
body.dark-mode [data-module="branch-mgmt"] .content-header                          { background: #151828; border-bottom-color: #252840; }
body.dark-mode [data-module="branch-mgmt"] .content-header h1                       { color: #f0f4ff; }
body.dark-mode [data-module="branch-mgmt"] .breadcrumb-item                         { color: #9ca3af; }
body.dark-mode [data-module="branch-mgmt"] .breadcrumb-item.active                  { color: #9ca3af; }
body.dark-mode [data-module="branch-mgmt"] .breadcrumb-item a                       { color: #93c5fd; }
body.dark-mode [data-module="branch-mgmt"] .breadcrumb-item + .breadcrumb-item::before { color: #374155; }

/* ── Page icon ── */
body.dark-mode .br-page-icon {
  background: rgba(29, 78, 216, 0.18);
  color: #93c5fd;
}

/* ── Filter card ── */
body.dark-mode [data-module="branch-mgmt"] .br-filter-card                        { background: #151828; border-color: #252840; border-left-color: #1d4ed8; }
body.dark-mode [data-module="branch-mgmt"] .br-filter-card .card-header           { background: transparent; border-bottom-color: #252840; color: #e2e8f0; }
body.dark-mode [data-module="branch-mgmt"] .br-filter-card .card-body             { background: rgba(29, 78, 216, 0.04); border-top-color: rgba(29, 78, 216, 0.22); }
body.dark-mode [data-module="branch-mgmt"] .br-filter-toggle-btn                  { border-color: rgba(29, 78, 216, 0.40); background: rgba(29, 78, 216, 0.08); color: #93c5fd; }
body.dark-mode [data-module="branch-mgmt"] .br-filter-toggle-btn:not(.collapsed)  { background: #1d4ed8; color: #fff; }
body.dark-mode [data-module="branch-mgmt"] .br-filter-card .form-control          { background: #0d0f1a; border-color: #252840; color: #e2e8f0; }
body.dark-mode [data-module="branch-mgmt"] .br-filter-card .form-select           { background: #0d0f1a; border-color: #252840; color: #e2e8f0; }
body.dark-mode [data-module="branch-mgmt"] .br-filter-card .form-control:focus    { background: #151828; border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15); }
body.dark-mode [data-module="branch-mgmt"] .br-filter-card .form-select:focus     { background: #151828; border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15); }
body.dark-mode [data-module="branch-mgmt"] .br-filter-card .form-control::placeholder { color: #374155; }
body.dark-mode [data-module="branch-mgmt"] .br-filter-card .form-label            { color: #9ca3af; }
body.dark-mode [data-module="branch-mgmt"] .br-filter-card label                  { color: #9ca3af; }
body.dark-mode [data-module="branch-mgmt"] .br-filter-card select option          { background: #151828; color: #e2e8f0; }

/* ── Table card ── */
body.dark-mode [data-module="branch-mgmt"] .br-table-card               { background: #151828; border-color: #252840; }
body.dark-mode [data-module="branch-mgmt"] .br-table-card .card-header  { background: transparent; border-bottom-color: #252840; color: #e2e8f0; }
body.dark-mode [data-module="branch-mgmt"] .br-table-card-title         { color: #e2e8f0; }
body.dark-mode [data-module="branch-mgmt"] .br-table-card .card-body    { background: #151828; }
body.dark-mode [data-module="branch-mgmt"] .br-table-card .table-responsive { background: #151828; }

/* records count badge */
body.dark-mode [data-module="branch-mgmt"] .br-table-card .card-header .badge {
  background: rgba(29, 78, 216, 0.18) !important;
  color: #93c5fd !important;
}

/* ── Table rows / cells ── */
/* Dark mode table, hover, DataTables chrome → LTE_TABLE_LIST.css */

/* ── Semantic cell classes ── */
body.dark-mode [data-module="branch-mgmt"] .br-cell-name  { color: #f0f4ff !important; }
body.dark-mode [data-module="branch-mgmt"] .br-cell-mono  { color: #d1d5db !important; }
body.dark-mode [data-module="branch-mgmt"] .br-cell-muted { color: #9ca3af !important; }
body.dark-mode [data-module="branch-mgmt"] .br-cell-empty { color: #252840 !important; }
body.dark-mode [data-module="branch-mgmt"] .text-muted    { color: #4b5563 !important; }

/* ── Status badges ── */
body.dark-mode .br-badge.active   { background: rgba(22, 163, 74, 0.18);  color: #4ade80; }
body.dark-mode .br-badge.inactive { background: rgba(220, 38, 38, 0.18);  color: #f87171; }
body.dark-mode .br-badge.default  { background: rgba(29, 78, 216, 0.20);  color: #93c5fd; }

/* ── Currency tag ── */
body.dark-mode .br-currency { background: #1c1f33; color: #94a3b8; }

/* ── Action buttons ── */
body.dark-mode [data-module="branch-mgmt"] .br-action-btn             { background: #1c1f33; border-color: #252840; color: #9ca3af; }
body.dark-mode [data-module="branch-mgmt"] .br-action-btn.edit        { color: #93c5fd; }
body.dark-mode [data-module="branch-mgmt"] .br-action-btn.edit:hover  { border-color: #1d4ed8; background: rgba(29, 78, 216, 0.15); color: #93c5fd; }
body.dark-mode [data-module="branch-mgmt"] .br-action-btn.del         { color: #f87171; }
body.dark-mode [data-module="branch-mgmt"] .br-action-btn.del:hover   { background: rgba(220, 38, 38, 0.15); border-color: #dc2626; color: #f87171; }

/* ── Toggle switch ── */
body.dark-mode .br-toggle-slider { background: #374151; }
body.dark-mode .br-toggle input:checked + .br-toggle-slider { background: #16a34a; }

/* ── Modal — Add / Edit ── */
body.dark-mode .br-modal .modal-content                { background: #151828; border-color: #252840; border-top-color: #1d4ed8; box-shadow: 0 20px 60px rgba(0,0,0,0.50); }
body.dark-mode .br-modal .modal-header                 { border-bottom-color: #252840; }
body.dark-mode .br-modal .modal-header .modal-title    { color: #f0f4ff; }
body.dark-mode .br-modal .modal-header .modal-title .mod-icon { background: rgba(29, 78, 216, 0.20); color: #93c5fd; }
body.dark-mode .br-modal .modal-body                   { background: #151828; }
body.dark-mode .br-modal .modal-footer                 { border-top-color: #252840; background: #151828; }
body.dark-mode .br-modal .hr-section-label             { color: #93c5fd; border-bottom-color: rgba(29, 78, 216, 0.25); }
body.dark-mode .br-modal .form-label                   { color: #9ca3af; }
body.dark-mode .br-modal .form-control                 { background: #0d0f1a; border-color: #252840; color: #e2e8f0; }
body.dark-mode .br-modal .form-select                  { background: #0d0f1a; border-color: #252840; color: #e2e8f0; }
body.dark-mode .br-modal .form-control:focus           { background: #151828; border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15); }
body.dark-mode .br-modal .form-select:focus            { background: #151828; border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15); }
body.dark-mode .br-modal .form-control::placeholder    { color: #374155; }
body.dark-mode .br-modal textarea                      { background: #0d0f1a; border-color: #252840; color: #e2e8f0; }
body.dark-mode .br-modal textarea:focus                { background: #151828; border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15); }
body.dark-mode .br-modal textarea::placeholder         { color: #374155; }
body.dark-mode .br-modal .text-muted                   { color: #4b5563 !important; }
body.dark-mode .br-modal select option                 { background: #151828; color: #e2e8f0; }
body.dark-mode .br-modal .btn-br-secondary             { border-color: #252840; color: #9ca3af; background: transparent; }
body.dark-mode .br-modal .btn-br-secondary:hover       { border-color: #374155; color: #e2e8f0; }
body.dark-mode .br-modal .btn-close                    { filter: invert(1) grayscale(1); }

/* ── Modal — Delete ── */
body.dark-mode .br-del-modal .modal-content   { background: #151828; border-top-color: #dc2626; border-color: #252840; box-shadow: 0 20px 60px rgba(0,0,0,0.50); }
body.dark-mode .br-del-modal .modal-header    { background: rgba(220, 38, 38, 0.15); border-bottom-color: rgba(220, 38, 38, 0.25); }
body.dark-mode .br-del-modal .modal-body      { background: #151828; color: #e2e8f0; }
body.dark-mode .br-del-modal .modal-footer    { background: #151828; border-top-color: #252840; }
body.dark-mode .br-del-modal .text-muted      { color: #4b5563 !important; }
body.dark-mode .br-del-modal .btn-close       { filter: invert(1) grayscale(1); }

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  [data-module="branch-mgmt"] table.dataTable { font-size: 0.75rem; }
}