/* ============================================================
   LM Book Admin — Design System v2
   ============================================================ */

/* ---------- Google Font: Inter ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ---------- CSS Variables ---------- */
:root {
  --primary:        #4361ee;
  --primary-dark:   #3451d1;
  --primary-light:  #ebefff;
  --secondary:      #6c757d;
  --success:        #10b981;
  --success-light:  #d1fae5;
  --danger:         #ef4444;
  --danger-light:   #fee2e2;
  --warning:        #f59e0b;
  --warning-light:  #fef3c7;
  --info:           #06b6d4;
  --info-light:     #cffafe;
  --purple:         #8b5cf6;
  --purple-light:   #ede9fe;
  --orange:         #f97316;
  --orange-light:   #ffedd5;

  --sidebar-bg:     #0f172a;
  --sidebar-hover:  rgba(67,97,238,0.15);
  --sidebar-active: rgba(67,97,238,0.25);
  --sidebar-text:   rgba(255,255,255,0.6);
  --sidebar-text-active: #fff;

  --bg:             #f1f5f9;
  --card-bg:        #ffffff;
  --border:         #e2e8f0;
  --border-light:   #f1f5f9;

  --text-primary:   #1e293b;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;

  --topbar-height:  60px;
  --sidebar-width:  240px;
  --radius:         10px;
  --radius-sm:      6px;
  --radius-lg:      14px;
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:         0 4px 16px rgba(0,0,0,0.07);
  --shadow-lg:      0 10px 40px rgba(0,0,0,0.12);
  --transition:     all 0.2s ease;
}

/* ============================================================
   GLOBAL
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', 'Nunito', sans-serif !important;
  font-size: 0.875rem;
  background: var(--bg) !important;
  color: var(--text-primary);
  width: 100% !important;
  -webkit-font-smoothing: antialiased;
}

a { transition: var(--transition); }
.hide { display: none !important; }
img[src=""], img[src="#"] { display: none; }

::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ============================================================
   TOPBAR
   ============================================================ */
.navbar-custom {
  background: #fff !important;
  box-shadow: 0 1px 0 var(--border), var(--shadow-sm) !important;
  height: var(--topbar-height);
  padding: 0 20px;
  display: flex;
  align-items: center;
}
.navbar-custom .container-fluid {
  padding: 0;
}
.navbar-custom .noti-icon {
  color: var(--text-secondary);
  font-size: 1.25rem;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
}
.navbar-custom .noti-icon:hover {
  background: var(--primary-light);
  color: var(--primary);
}
.account-user-name {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text-primary);
}
.nav-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px !important;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.nav-user:hover { background: var(--primary-light); }
.nav-user .account-user-avatar img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--primary-light);
}
.topbar-dropdown-menu {
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: var(--radius) !important;
  padding: 6px !important;
  min-width: 180px;
}
.topbar-dropdown-menu .dropdown-item {
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  padding: 8px 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-dropdown-menu .dropdown-item:hover {
  background: var(--primary-light);
  color: var(--primary);
}
.topbar-dropdown-menu .dropdown-item i { font-size: 1rem; }

/* Check PAN button */
.navbar-custom .btn-success.pancard-btn {
  font-size: 0.78rem;
  padding: 5px 14px;
  border-radius: 20px;
  font-weight: 600;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.leftside-menu {
  background: var(--sidebar-bg) !important;
  box-shadow: 1px 0 20px rgba(0,0,0,0.18);
  width: var(--sidebar-width);
}
.leftside-menu .logo {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 8px;
}
.leftside-menu .logo img { height: 32px; }

/* Sidebar hover toggle */
.button-sm-hover { color: rgba(255,255,255,0.3) !important; }

/* Nav items */
.side-nav { padding: 0 10px 20px; }

.side-nav .side-nav-link {
  color: var(--sidebar-text) !important;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  transition: var(--transition);
}
.side-nav .side-nav-link:hover {
  color: #fff !important;
  background: var(--sidebar-hover);
}
.side-nav .side-nav-link.active {
  color: #fff !important;
  background: var(--sidebar-active);
}
.side-nav .side-nav-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
}
.side-nav .side-nav-link i {
  font-size: 1.05rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  color: var(--sidebar-text);
  transition: var(--transition);
}
.side-nav .side-nav-link:hover i,
.side-nav .side-nav-link.active i {
  color: var(--primary);
  filter: drop-shadow(0 0 6px rgba(67,97,238,0.5));
}
.menu-arrow {
  margin-left: auto;
  font-size: 0.7rem;
  transition: transform 0.25s ease;
  color: var(--sidebar-text);
}
[aria-expanded="true"] .menu-arrow { transform: rotate(90deg); }

/* Submenu */
.side-nav-second-level {
  background: rgba(0,0,0,0.2);
  border-radius: var(--radius-sm);
  margin: 2px 0 4px;
  padding: 4px 0;
  overflow: hidden;
}
.side-nav-second-level li a {
  color: var(--sidebar-text) !important;
  font-size: 0.8rem;
  padding: 7px 14px 7px 42px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: var(--transition);
  position: relative;
}
.side-nav-second-level li a::before {
  content: '';
  position: absolute;
  left: 26px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: var(--transition);
}
.side-nav-second-level li a:hover,
.side-nav-second-level li a.active {
  color: #fff !important;
  background: rgba(67,97,238,0.15);
}
.side-nav-second-level li a:hover::before,
.side-nav-second-level li a.active::before {
  background: var(--primary);
  box-shadow: 0 0 6px var(--primary);
}

/* Sidebar section divider */
.side-nav-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.25);
  padding: 16px 14px 6px;
}

/* ============================================================
   CONTENT AREA
   ============================================================ */
.content-page { background: var(--bg); }
.content      { padding-bottom: 40px; }
.container-fluid { padding: 0 24px; }

/* Page title box */
.page-title-box {
  padding: 20px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-title-box h4.page-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-title-box h4.page-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 22px;
  background: linear-gradient(180deg, var(--primary), var(--purple));
  border-radius: 4px;
}
.page-title-right { display: flex; align-items: center; gap: 8px; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow 0.25s ease;
}
.card:hover { box-shadow: var(--shadow) !important; }

.card-header {
  background: var(--card-bg) !important;
  border-bottom: 1px solid var(--border-light) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  padding: 14px 20px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-body { padding: 20px; }

/* Card color variants */
.card-primary { border-top: 3px solid var(--primary) !important; }
.card-success  { border-top: 3px solid var(--success) !important; }
.card-danger   { border-top: 3px solid var(--danger) !important; }
.card-warning  { border-top: 3px solid var(--warning) !important; }

/* ============================================================
   STAT / DASHBOARD CARDS
   ============================================================ */
.stat-card {
  border-radius: var(--radius) !important;
  padding: 22px 22px 18px;
  position: relative;
  overflow: hidden;
  border: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg) !important;
}
.stat-card .stat-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 14px;
}
.stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}
.stat-card .stat-label {
  font-size: 0.78rem;
  font-weight: 500;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stat-card .stat-footer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.78rem;
  opacity: 0.75;
}
.stat-card.stat-blue   { background: linear-gradient(135deg,#4361ee,#3a0ca3); color:#fff; }
.stat-card.stat-green  { background: linear-gradient(135deg,#10b981,#059669); color:#fff; }
.stat-card.stat-red    { background: linear-gradient(135deg,#ef4444,#dc2626); color:#fff; }
.stat-card.stat-orange { background: linear-gradient(135deg,#f97316,#ea580c); color:#fff; }
.stat-card.stat-purple { background: linear-gradient(135deg,#8b5cf6,#7c3aed); color:#fff; }
.stat-card.stat-teal   { background: linear-gradient(135deg,#06b6d4,#0891b2); color:#fff; }

.stat-card .stat-icon.icon-blue   { background:rgba(255,255,255,0.2); color:#fff; }
.stat-card .stat-icon.icon-green  { background:rgba(255,255,255,0.2); color:#fff; }
.stat-card .stat-icon.icon-red    { background:rgba(255,255,255,0.2); color:#fff; }
.stat-card .stat-icon.icon-orange { background:rgba(255,255,255,0.2); color:#fff; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: 0 4px 12px rgba(67,97,238,0.35);
  transform: translateY(-1px);
}
.btn-success {
  background: var(--success);
  border-color: var(--success);
}
.btn-success:hover {
  background: #059669;
  box-shadow: 0 4px 12px rgba(16,185,129,0.3);
  transform: translateY(-1px);
}
.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover {
  background: #dc2626;
  box-shadow: 0 4px 12px rgba(239,68,68,0.3);
  transform: translateY(-1px);
}
.btn-warning {
  background: var(--warning);
  border-color: var(--warning);
  color: #fff;
}
.btn-warning:hover {
  background: #d97706;
  color: #fff;
  transform: translateY(-1px);
}
.btn-info {
  background: var(--info);
  border-color: var(--info);
  color: #fff;
}
.btn-info:hover {
  background: #0891b2;
  color: #fff;
  transform: translateY(-1px);
}
.btn-secondary {
  background: #f1f5f9;
  border-color: var(--border);
  color: var(--text-secondary);
}
.btn-secondary:hover {
  background: #e2e8f0;
  color: var(--text-primary);
}
.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-primary:hover {
  background: var(--primary);
  border-color: var(--primary);
}

/* Table action buttons */
.tbl-btn {
  padding: 4px 10px !important;
  font-size: 0.75rem !important;
  margin: 0 2px;
  border-radius: 5px !important;
}
.tbl-btn i { font-size: 0.85rem; }

/* ============================================================
   FORMS
   ============================================================ */
.form-control,
.form-select {
  font-family: 'Inter', sans-serif;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  padding: 8px 12px;
  color: var(--text-primary);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(67,97,238,0.1);
  outline: none;
}
.form-control::placeholder { color: #cbd5e1; }
.form-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.form-text { font-size: 0.75rem; color: var(--text-muted); }
.text-danger { color: var(--danger) !important; }

.input-group-text {
  background: var(--bg);
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  font-size: 0.85rem;
}
.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

/* ============================================================
   SELECT2
   ============================================================ */
.select2-container--default .select2-selection--single {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  height: 38px !important;
  background: #fff !important;
  display: flex;
  align-items: center;
  transition: border-color 0.2s;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 12px;
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 36px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(67,97,238,0.1) !important;
}
.select2-container--default .select2-selection--multiple {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  min-height: 38px;
}
.select2-dropdown {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 0.85rem;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--primary);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1.5px solid var(--border);
  border-radius: 5px;
  padding: 6px 10px;
  font-size: 0.82rem;
}

/* ============================================================
   TABLES
   ============================================================ */
.table {
  font-size: 0.82rem;
  color: var(--text-primary);
  margin: 0;
}
.table thead th {
  background: var(--bg) !important;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 2px solid var(--border);
  padding: 10px 14px;
  white-space: nowrap;
}
.table tbody td {
  padding: 10px 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
}
.table tbody td:first-child { color: var(--text-primary); font-weight: 500; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: rgba(67,97,238,0.03); }

/* DataTables */
.dataTables_wrapper .dataTables_length { margin-bottom: 12px; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 0.82rem;
  color: var(--text-primary);
  background: #fff;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(67,97,238,0.1);
  outline: none;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { padding-top: 12px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--radius-sm) !important;
  font-size: 0.8rem !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary-light) !important;
  color: var(--primary) !important;
}
table.dataTable.nowrap th,
table.dataTable.nowrap td { white-space: initial !important; }

/* ============================================================
   BADGES & STATUS PILLS
   ============================================================ */
.badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.status-approved {
  background: var(--success-light);
  color: #065f46;
}
.status-pending {
  background: var(--warning-light);
  color: #92400e;
}
.status-rejected {
  background: var(--danger-light);
  color: #991b1b;
}
.status-draft {
  background: #f1f5f9;
  color: var(--text-muted);
}
.badge.bg-success { background: var(--success-light) !important; color: #065f46 !important; }
.badge.bg-danger  { background: var(--danger-light) !important;  color: #991b1b !important; }
.badge.bg-warning { background: var(--warning-light) !important; color: #92400e !important; }
.badge.bg-info    { background: var(--info-light) !important;    color: #164e63 !important; }

/* ============================================================
   MODALS
   ============================================================ */
.modal-content {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
}
.modal-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-light) !important;
  background: #fff;
}
.modal-header .modal-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-header .btn-close { opacity: 0.5; }
.modal-header .btn-close:hover { opacity: 1; }
.modal-body { padding: 22px; }
.modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border-light) !important;
  gap: 8px;
}

/* Confirmation modals */
.modal-confirm .modal-body {
  padding: 32px 24px;
  text-align: center;
}
.modal-confirm .confirm-icon {
  width: 68px; height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 18px;
}
.modal-confirm .confirm-icon.icon-danger  { background: var(--danger-light);  color: var(--danger);  }
.modal-confirm .confirm-icon.icon-success { background: var(--success-light); color: var(--success); }
.modal-confirm .confirm-icon.icon-warning { background: var(--warning-light); color: var(--warning); }
.modal-confirm h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.modal-confirm p {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 22px;
}
.modal-confirm .btn-group-confirm {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.modal-confirm .btn-group-confirm .btn { min-width: 100px; justify-content: center; }

/* ============================================================
   ALERTS & NOTIFICATIONS
   ============================================================ */
.alert {
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.alert-success {
  background: var(--success-light) !important;
  color: #065f46 !important;
  --ct-alert-bg: var(--success-light) !important;
  --ct-alert-color: #065f46 !important;
}
.alert-danger {
  background: var(--danger-light) !important;
  color: #991b1b !important;
  --ct-alert-bg: var(--danger-light) !important;
  --ct-alert-color: #991b1b !important;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.authentication-bg {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f2847 100%) !important;
  min-height: 100vh;
}
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  z-index: 1;
}
.login-wrapper {
  display: flex;
  width: 100%;
  max-width: 920px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.login-left {
  flex: 1;
  background: linear-gradient(145deg, #0f172a 0%, #1e3a5f 60%, #0f2847 100%);
  padding: 52px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.login-left::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(67,97,238,0.2), transparent 70%);
}
.login-left::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.15), transparent 70%);
}
.login-left .brand-logo {
  margin-bottom: 40px;
  position: relative; z-index: 1;
}
.login-left .brand-logo img {
  height: 40px;
  filter: brightness(0) invert(1);
}
.login-left h2 {
  color: #fff;
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: 12px;
  position: relative; z-index: 1;
  line-height: 1.2;
}
.login-left .tagline {
  color: rgba(255,255,255,0.55);
  font-size: 0.88rem;
  line-height: 1.7;
  margin-bottom: 36px;
  position: relative; z-index: 1;
}
.login-features {
  list-style: none;
  padding: 0; margin: 0;
  position: relative; z-index: 1;
}
.login-features li {
  color: rgba(255,255,255,0.7);
  font-size: 0.84rem;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.login-features li .feat-icon {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: rgba(67,97,238,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a5b4fc;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.login-right {
  width: 400px;
  background: #fff;
  padding: 52px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-right .login-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.login-right .login-subtitle {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 32px;
}
.login-right .form-group { margin-bottom: 18px; }
.login-right .form-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.input-with-icon { position: relative; }
.input-with-icon .field-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #cbd5e1;
  font-size: 1rem;
  z-index: 5;
  pointer-events: none;
}
.logininput {
  padding: 11px 16px 11px 40px !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--border) !important;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  height: auto;
}
.logininput:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(67,97,238,0.12) !important;
}
.loginbtn {
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  font-weight: 700;
  padding: 12px 20px !important;
  width: 100%;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  border: none;
  box-shadow: 0 4px 16px rgba(67,97,238,0.35);
  margin-top: 8px;
  letter-spacing: 0.02em;
}
.loginbtn:hover {
  background: linear-gradient(135deg, var(--primary-dark), #6d28d9);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(67,97,238,0.4);
  color: #fff;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.login-right .form-group { animation: fadeInUp 0.3s ease both; }
.login-right .form-group:nth-child(1) { animation-delay: 0.05s; }
.login-right .form-group:nth-child(2) { animation-delay: 0.1s; }
.login-right .form-group:nth-child(3) { animation-delay: 0.15s; }
@media (max-width: 700px) {
  .login-left { display: none; }
  .login-right { width: 100%; padding: 40px 28px; }
  .login-wrapper { border-radius: 14px; }
}

/* ============================================================
   ACCORDION (approval chain)
   ============================================================ */
.accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm) !important;
  margin-bottom: 8px;
  overflow: hidden;
}
.accordion-button {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
  background: #fff;
  padding: 12px 16px;
}
.accordion-button:not(.collapsed) {
  color: var(--primary);
  background: var(--primary-light);
  box-shadow: none;
}
.accordion-button::after { filter: none; }
.accordion-button:focus { box-shadow: none; }
.accordion .card-header .accordion-button {
  border: 1px dashed var(--primary);
  border-radius: var(--radius-sm);
}

/* ============================================================
   DROPZONE
   ============================================================ */
.dropzone {
  border: 2px dashed var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--bg) !important;
  transition: var(--transition);
}
.dropzone:hover, .dropzone.dz-drag-hover {
  border-color: var(--primary) !important;
  background: var(--primary-light) !important;
}
.dropzone .dz-message h3 { font-size: 0.85rem; color: var(--text-muted); margin: 0; }
.dropzone .dz-message i  { color: var(--text-muted); }

/* ============================================================
   DATERANGEPICKER
   ============================================================ */
.daterangepicker.show-calendar { z-index: 1060; }
.daterangepicker {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
}
.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: var(--primary);
}
.daterangepicker .btn-primary { background: var(--primary); border-color: var(--primary); }

/* ============================================================
   MISC
   ============================================================ */
.addbankdiv {
  border: 1.5px solid var(--border);
  padding: 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  background: var(--bg);
  transition: border-color 0.2s;
}
.addbankdiv:hover { border-color: var(--primary); }
.imgtagfont { font-size: xx-large; }
.ck-editor__editable_inline { min-height: 300px; max-height: 500px; overflow: auto !important; }
.PanDetails td { padding: 4px 8px; font-size: 0.85rem; }

/* Progress bar */
#nprogress .bar {
  position: fixed; z-index: 9999; top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--purple));
}
#nprogress .spinner {
  display: block; position: fixed; z-index: 9999; top: 14px; right: 14px;
}
#nprogress .spinner-icon {
  width: 16px; height: 16px;
  border: solid 2px transparent;
  border-top-color: var(--primary); border-left-color: var(--primary);
  border-radius: 50%;
  animation: nprogress-spinner 400ms linear infinite;
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

/* Image preview modal */
#imageModal {
  display: none; position: fixed;
  top:0; left:0; width:100%; height:100%;
  background: rgba(15,23,42,0.85);
  justify-content: center; align-items: center;
  z-index: 9999;
}
#previewImage {
  max-width: 90%; max-height: 88%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

/* Form section divider */
.form-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0 0 8px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 16px;
}

/* ============================================================
   RESPONSIVE — tablet + mobile
   ============================================================ */
@media (max-width: 768px) {
  .container-fluid { padding: 0 14px; }
  .card-body { padding: 14px; }
  .modal-body { padding: 16px; }
  .page-title-box { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ============================================================
   iOS / MOBILE FIXES
   ============================================================ */

/* 1. Prevent iOS auto-zoom on input focus (requires font-size >= 16px) */
input, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="search"],
input[type="date"], input[type="time"], input[type="url"],
select, textarea, .form-control, .form-select {
  font-size: 16px !important;
}
/* Keep labels/placeholders visually small */
.form-label { font-size: 0.82rem; }
input::placeholder, textarea::placeholder { font-size: 0.875rem; }

/* 2. Fast tap — removes 300ms delay on iOS */
a, button, .btn, label, .side-nav-link, .dropdown-item,
.dataTables_wrapper .paginate_button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 3. Minimum touch target size (Apple HIG: 44px) */
@media (max-width: 991px) {
  .btn { min-height: 40px; }
  .side-nav .side-nav-link { min-height: 44px; padding: 10px 14px; }
  .navbar-custom { height: 56px; }
  .dropdown-item { padding: 10px 16px; min-height: 44px; display: flex; align-items: center; }
}

/* 4. Responsive tables — horizontal scroll instead of overflow */
.dataTables_wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-responsive, .dataTables_scroll {
  -webkit-overflow-scrolling: touch;
}
/* Ensure tables don't force page-wide scroll */
@media (max-width: 768px) {
  .card { overflow: hidden; }
  .card .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.dataTable { min-width: 600px; }
}

/* 5. Safe-area insets for notched iPhones (X, 11, 12, 13, 14, 15…) */
.navbar-custom {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
.leftside-menu {
  padding-bottom: env(safe-area-inset-bottom);
}
.content-page {
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}
/* Bottom-anchored modals */
@media (max-width: 576px) {
  .modal-dialog {
    margin: 0;
    margin-top: auto;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
  }
  .modal.fade .modal-dialog { transform: translateY(100%); }
  .modal.show  .modal-dialog { transform: translateY(0); }
  .modal-content {
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal-dialog-centered {
    margin: auto;
    border-radius: var(--radius);
  }
  .modal-dialog-centered .modal-content { border-radius: var(--radius); }
}

/* 6. Smooth momentum scrolling on iOS */
.leftside-menu, .modal-body, .content-page, body {
  -webkit-overflow-scrolling: touch;
}

/* 7. Prevent horizontal page scroll */
body { overflow-x: hidden; max-width: 100vw; }

/* 8. Select2 — bigger touch targets on mobile */
@media (max-width: 768px) {
  .select2-container--default .select2-selection--single {
    height: 42px;
    line-height: 42px;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
    font-size: 16px;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px;
  }
  .select2-dropdown { font-size: 15px; }
  .select2-results__option { padding: 10px 12px; min-height: 44px; display: flex; align-items: center; }
}

/* 9. Daterangepicker — full width on small screens */
@media (max-width: 768px) {
  .daterangepicker {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  .daterangepicker .drp-calendar { max-width: 100%; }
  .daterangepicker.show-calendar .drp-buttons { padding: 10px; }
}

/* 10. Topbar — tighten on small phones */
@media (max-width: 480px) {
  .navbar-custom { padding: 0 12px; }
  .logo-topbar .logo-lg { display: none; }
  .logo-topbar .logo-sm { display: inline-flex !important; }
  .pancard-btn { display: none !important; }
  .account-user-name { display: none; }
  .container-fluid { padding: 0 10px; }
}

/* 11. DataTable controls stack on mobile */
@media (max-width: 576px) {
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    float: none;
    text-align: left;
    margin-bottom: 8px;
  }
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none;
    text-align: center;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 6px 10px;
  }
}

/* 12. Form rows — single column on phone */
@media (max-width: 576px) {
  .row > [class*="col-sm-"] { width: 100%; }
  .offset-3 { margin-left: 0 !important; }
}

/* 13. Fix position:fixed flickering on iOS during scroll */
.leftside-menu {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.navbar-custom {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* ── BANK DETAILS MINI MODAL ── */
.bank-mini-dialog {
    max-width: 80%;
    width: 80%;
}
.bank-mini-dialog .modal-content {
    max-height: 60vh;
}
.bank-mini-dialog .modal-body {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.bank-mini-dialog .dash-table {
    font-size: 0.78rem;
    white-space: nowrap;
}
.bank-mini-dialog .dash-table th,
.bank-mini-dialog .dash-table td {
    padding: 6px 10px;
}
@media (max-width: 576px) {
    .bank-mini-dialog {
        max-width: 92%;
        width: 92%;
    }
}

/* ── DATATABLES — MOBILE CARD LAYOUT (same boxy style as dashboard) ── */
@media (max-width: 767px) {
    /* Wrapper: no horizontal scroll */
    .dataTables_wrapper { overflow-x: visible !important; }
    #datatable_wrapper .table-responsive { overflow: visible !important; }

    /* Hide the normal table structure */
    table.dataTable thead { display: none !important; }
    table.dataTable.dtr-inline.collapsed tbody tr,
    table.dataTable tbody tr {
        display: block !important;
        background: var(--card-bg);
        border: 1px solid var(--border) !important;
        border-radius: 10px !important;
        margin-bottom: 10px !important;
        padding: 10px 12px !important;
        box-shadow: var(--shadow-sm);
    }
    table.dataTable tbody tr:hover {
        border-color: var(--primary) !important;
    }
    /* Each cell = label + value row */
    table.dataTable tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 5px 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--border-light) !important;
        font-size: 0.8rem !important;
        white-space: normal !important;
    }
    table.dataTable tbody td:last-child {
        border-bottom: none !important;
        justify-content: flex-end !important;
        padding-top: 8px !important;
    }
    /* Label from data-label (set via DataTables columnDefs) */
    table.dataTable tbody td::before {
        content: attr(data-label);
        font-size: 0.68rem;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        white-space: nowrap;
        flex-shrink: 0;
        min-width: 80px;
    }
    /* No label on hidden/action cells */
    table.dataTable tbody td.d-none { display: none !important; }
    table.dataTable tbody td:last-child::before { display: none; }

    /* DataTables responsive child row — style same as card */
    table.dataTable > tbody > tr.child {
        background: var(--card-bg);
        border: 1px dashed var(--border) !important;
        border-radius: 10px !important;
        margin-bottom: 10px !important;
        padding: 10px 12px !important;
    }
    table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }
    table.dataTable > tbody > tr.child ul.dtr-details li {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 5px 0;
        border-bottom: 1px solid var(--border-light);
        font-size: 0.8rem;
        gap: 8px;
    }
    table.dataTable > tbody > tr.child ul.dtr-details li:last-child { border-bottom: none; }
    table.dataTable > tbody > tr.child ul.dtr-details li span.dtr-title {
        font-size: 0.68rem;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        white-space: nowrap;
        flex-shrink: 0;
        min-width: 80px;
    }
    table.dataTable > tbody > tr.child ul.dtr-details li span.dtr-data {
        text-align: right;
        flex: 1;
    }
}