/* ============================================================
   ANTRIAN MULTI-LOKET — DESIGN SYSTEM
   Bootstrap 5 + CSS Custom Properties
   3 Tema: blue (default) | green | red
   ============================================================ */

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

/* ── CSS Variables per tema ─────────────────────────────── */

:root,
[data-theme="blue"] {
  --color-primary:      #1E40AF;
  --color-primary-rgb:  30, 64, 175;
  --color-accent:       #3B82F6;
  --color-accent-rgb:   59, 130, 246;
  --color-secondary:    #0EA5E9;
  --color-dark:         #0F172A;
  --color-sidebar-bg:   #0F172A;
  --color-sidebar-text: #94A3B8;
  --color-sidebar-act:  #3B82F6;
  --color-gradient:     linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
  --color-gradient-hero:linear-gradient(135deg, #0F172A 0%, #1E3A8A 50%, #1E40AF 100%);
}

[data-theme="green"] {
  --color-primary:      #065F46;
  --color-primary-rgb:  6, 95, 70;
  --color-accent:       #10B981;
  --color-accent-rgb:   16, 185, 129;
  --color-secondary:    #34D399;
  --color-dark:         #022C22;
  --color-sidebar-bg:   #022C22;
  --color-sidebar-text: #6EE7B7;
  --color-sidebar-act:  #10B981;
  --color-gradient:     linear-gradient(135deg, #065F46 0%, #10B981 100%);
  --color-gradient-hero:linear-gradient(135deg, #022C22 0%, #064E3B 50%, #065F46 100%);
}

[data-theme="red"] {
  --color-primary:      #7F1D1D;
  --color-primary-rgb:  127, 29, 29;
  --color-accent:       #DC2626;
  --color-accent-rgb:   220, 38, 38;
  --color-secondary:    #F87171;
  --color-dark:         #450A0A;
  --color-sidebar-bg:   #1A0A0A;
  --color-sidebar-text: #FECACA;
  --color-sidebar-act:  #DC2626;
  --color-gradient:     linear-gradient(135deg, #7F1D1D 0%, #DC2626 100%);
  --color-gradient-hero:linear-gradient(135deg, #1A0A0A 0%, #450A0A 50%, #7F1D1D 100%);
}

/* ── Global Reset & Base ─────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  background-color: #F1F5F9;
  color: #334155;
  margin: 0;
  padding: 0;
}

/* ── Bootstrap Overrides ─────────────────────────────────── */

.btn-primary {
  background:    var(--color-gradient);
  border-color:  transparent;
  font-weight:   600;
  letter-spacing: 0.02em;
  border-radius: 10px;
  transition:    all 0.25s ease;
  box-shadow:    0 4px 15px rgba(var(--color-primary-rgb), 0.35);
}

.btn-primary:hover,
.btn-primary:focus {
  background:   var(--color-gradient);
  filter:       brightness(1.12);
  transform:    translateY(-2px);
  box-shadow:   0 8px 25px rgba(var(--color-primary-rgb), 0.45);
  border-color: transparent;
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-outline-primary {
  border-color: var(--color-accent);
  color:        var(--color-accent);
  border-radius: 10px;
  font-weight:  600;
  transition:   all 0.2s ease;
}
.btn-outline-primary:hover {
  background:   var(--color-accent);
  border-color: var(--color-accent);
  transform:    translateY(-1px);
}

/* Nav pills override */
.nav-pills .nav-link.active {
  background: var(--color-gradient);
}

/* Badge override */
.badge.bg-primary-theme {
  background: var(--color-gradient) !important;
}

/* ── App Wrapper / Layout ────────────────────────────────── */

.app-wrapper {
  display:   flex;
  min-height: 100vh;
  overflow:  hidden;
}

/* ── Sidebar ─────────────────────────────────────────────── */

.app-sidebar {
  width:            260px;
  min-height:       100vh;
  background:       var(--color-sidebar-bg);
  display:          flex;
  flex-direction:   column;
  flex-shrink:      0;
  transition:       width 0.3s ease, transform 0.3s ease;
  position:         fixed;
  top:              0;
  left:             0;
  bottom:           0;
  z-index:          1050;
  overflow-y:       auto;
  overflow-x:       hidden;
}

.sidebar-brand {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     24px 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sidebar-brand .brand-icon {
  width:           40px;
  height:          40px;
  border-radius:   12px;
  background:      var(--color-gradient);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       18px;
  color:           #fff;
  flex-shrink:     0;
  box-shadow:      0 4px 12px rgba(var(--color-accent-rgb), 0.4);
}

.sidebar-brand .brand-text {
  display:    flex;
  flex-direction: column;
}

.sidebar-brand .brand-name {
  font-size:   13px;
  font-weight: 700;
  color:       #F8FAFC;
  line-height: 1.2;
}

.sidebar-brand .brand-sub {
  font-size:  11px;
  color:      var(--color-sidebar-text);
  line-height: 1;
}

.sidebar-nav {
  flex:    1;
  padding: 16px 12px;
}

.sidebar-section-label {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.3);
  padding:        12px 8px 6px;
  margin-bottom:  4px;
}

.sidebar-nav .nav-item {
  margin-bottom: 2px;
}

.sidebar-nav .nav-link {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       10px 12px;
  border-radius: 10px;
  color:         var(--color-sidebar-text);
  font-size:     13.5px;
  font-weight:   500;
  text-decoration: none;
  transition:    all 0.2s ease;
  cursor:        pointer;
}

.sidebar-nav .nav-link i {
  font-size:   17px;
  flex-shrink: 0;
  width:       20px;
  text-align:  center;
}

.sidebar-nav .nav-link:hover {
  background: rgba(255,255,255,0.07);
  color:      #F8FAFC;
}

.sidebar-nav .nav-link.active {
  background: rgba(var(--color-accent-rgb), 0.18);
  color:      var(--color-sidebar-act);
  font-weight: 600;
}

.sidebar-nav .nav-link.active i {
  color: var(--color-sidebar-act);
}

.sidebar-footer {
  padding:       16px 12px;
  border-top:    1px solid rgba(255,255,255,0.06);
}

.sidebar-user {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     10px 12px;
  border-radius: 10px;
  background:  rgba(255,255,255,0.05);
}

.sidebar-user .avatar {
  width:           36px;
  height:          36px;
  border-radius:   10px;
  background:      var(--color-gradient);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #fff;
  font-size:       14px;
  font-weight:     700;
  flex-shrink:     0;
}

.sidebar-user .user-info {
  flex:     1;
  overflow: hidden;
}

.sidebar-user .user-name {
  font-size:   13px;
  font-weight: 600;
  color:       #F1F5F9;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.sidebar-user .user-role {
  font-size: 11px;
  color:     var(--color-sidebar-text);
}

/* ── Main Content Area ───────────────────────────────────── */

.app-content {
  flex:        1;
  min-width:   0; /* CRITICAL for datatables responsive in flexbox */
  margin-left: 260px;
  display:     flex;
  flex-direction: column;
  min-height:  100vh;
  transition:  margin-left 0.3s ease;
  background:  #F1F5F9;
}

/* ── Top Navbar ──────────────────────────────────────────── */

.app-topbar {
  height:       64px;
  background:   #fff;
  border-bottom: 1px solid #E2E8F0;
  display:      flex;
  align-items:  center;
  padding:      0 24px;
  gap:          16px;
  position:     sticky;
  top:          0;
  z-index:      1000;
}

.app-topbar .page-title {
  flex:        1;
  font-size:   16px;
  font-weight: 700;
  color:       #0F172A;
}

.app-topbar .topbar-actions {
  display:     flex;
  align-items: center;
  gap:         8px;
}

/* ── Page Content ────────────────────────────────────────── */

.app-page {
  flex:      1;
  min-width: 0; /* CRITICAL for datatables responsive */
  padding:   28px 24px;
}

/* ── Cards ───────────────────────────────────────────────── */

.card-app {
  background:    #fff;
  border-radius: 16px;
  border:        1px solid #E2E8F0;
  box-shadow:    0 2px 12px rgba(0,0,0,0.04);
  overflow:      hidden;
  transition:    box-shadow 0.2s ease;
}

.card-app:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.card-app .card-header-app {
  padding:       20px 24px 16px;
  border-bottom: 1px solid #F1F5F9;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           12px;
}

.card-app .card-title {
  font-size:   16px;
  font-weight: 700;
  color:       #0F172A;
  margin:      0;
}

.card-app .card-body-app {
  padding: 24px;
}

/* ── Stats Card ──────────────────────────────────────────── */

.stat-card {
  background:    #fff;
  border-radius: 16px;
  border:        1px solid #E2E8F0;
  padding:       20px;
  display:       flex;
  align-items:   center;
  gap:           16px;
  transition:    all 0.25s ease;
  box-shadow:    0 2px 8px rgba(0,0,0,0.04);
}

.stat-card:hover {
  transform:  translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}

.stat-card .stat-icon {
  width:           52px;
  height:          52px;
  border-radius:   14px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       22px;
  flex-shrink:     0;
}

.stat-card .stat-icon.primary { background: rgba(var(--color-primary-rgb),0.1); color: var(--color-primary); }
.stat-card .stat-icon.accent  { background: rgba(var(--color-accent-rgb),0.12); color: var(--color-accent); }
.stat-card .stat-icon.success { background: rgba(16,185,129,0.1);  color: #059669; }
.stat-card .stat-icon.warning { background: rgba(245,158,11,0.12); color: #D97706; }
.stat-card .stat-icon.danger  { background: rgba(239,68,68,0.1);   color: #DC2626; }

.stat-card .stat-value {
  font-size:   28px;
  font-weight: 800;
  color:       #0F172A;
  line-height: 1;
}

.stat-card .stat-label {
  font-size: 12px;
  color:     #64748B;
  margin-top: 2px;
}

/* ── DataTables Card Wrapper ─────────────────────────────── */

.dt-card-wrapper {
  background:    #fff;
  border-radius: 16px;
  border:        1px solid #E2E8F0;
  box-shadow:    0 2px 12px rgba(0,0,0,0.04);
}

.dt-card-header {
  padding:         18px 22px;
  background:      var(--color-gradient);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
}

.dt-card-header h5 {
  color:       #fff;
  font-weight: 700;
  margin:      0;
  font-size:   15px;
}

.dt-card-body { padding: 0; }

/* DataTables table overrides */
table.dataTable {
  width: 100% !important;
}

table.dataTable thead th {
  background:    #F8FAFC;
  color:         #475569;
  font-weight:   600;
  font-size:     12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid #E2E8F0;
  padding:       12px 14px;
}

table.dataTable tbody td {
  padding:     12px 14px;
  vertical-align: middle;
  border-bottom: 1px solid #F1F5F9;
  font-size:   13.5px;
}

table.dataTable tbody tr:hover td {
  background: #F8FAFC;
}

.dataTables_wrapper .dataTables_filter input {
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  padding: 6px 14px;
  font-size: 13px;
}

.dataTables_wrapper .dataTables_length select {
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  padding: 4px 8px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 8px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--color-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ── DataTables Responsive Child Row (Card Style) ────────── */

table.dataTable > tbody > tr.child > td {
  padding: 12px 14px 20px;
  background: #F8FAFC !important;
  border-bottom: 2px solid #E2E8F0;
}

table.dataTable > tbody > tr.child ul.dtr-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 16px 20px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid #E2E8F0;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
  display: flex;
  flex-direction: column;
  border-bottom: 1px dashed #E2E8F0;
  padding: 8px 0;
}

table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

table.dataTable > tbody > tr.child span.dtr-title {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748B;
  font-weight: 700;
  margin-bottom: 4px;
  display: block;
}

table.dataTable > tbody > tr.child span.dtr-data {
  font-size: 14px;
  color: #0F172A;
  font-weight: 500;
  white-space: normal;
  word-break: break-word;
}

/* ── Flash Messages ──────────────────────────────────────── */

.flash-alert {
  border-radius: 12px;
  border:        none;
  padding:       14px 18px;
  font-size:     14px;
  font-weight:   500;
  box-shadow:    0 4px 12px rgba(0,0,0,0.08);
  display:       flex;
  align-items:   center;
  gap:           10px;
}

/* ── Mobile Responsive Sidebar ───────────────────────────── */

.sidebar-toggle {
  display: none;
  border:  none;
  background: none;
  font-size: 22px;
  color: #475569;
  cursor: pointer;
}

.sidebar-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,0.5);
  z-index:    1049;
}

@media (max-width: 991.98px) {
  .sidebar-toggle     { display: block; }
  .app-sidebar        { transform: translateX(-100%); }
  .app-sidebar.open   { transform: translateX(0); }
  .sidebar-overlay.show { display: block; }
  .app-content        { margin-left: 0; }
}

/* ── Page Header ─────────────────────────────────────────── */

.page-header {
  display:     flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap:   wrap;
  gap:         12px;
  margin-bottom: 24px;
}

.page-header-title h2 {
  font-size:   22px;
  font-weight: 800;
  color:       #0F172A;
  margin:      0;
}

.page-header-title p {
  font-size: 13px;
  color:     #64748B;
  margin:    4px 0 0;
}

/* ── Breadcrumb ──────────────────────────────────────────── */

.breadcrumb-app {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   12.5px;
  color:       #64748B;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.breadcrumb-app a {
  color:           var(--color-accent);
  text-decoration: none;
  font-weight:     500;
}
.breadcrumb-app a:hover { text-decoration: underline; }
.breadcrumb-app .separator { color: #CBD5E1; }
.breadcrumb-app .current   { color: #334155; font-weight: 600; }

/* ── Animations ──────────────────────────────────────────── */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-ring {
  0%   { transform: scale(0.8); opacity: 1; }
  80%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes numberFlip {
  0%   { opacity: 0; transform: scale(0.7) rotateX(-90deg); }
  100% { opacity: 1; transform: scale(1) rotateX(0); }
}

.animate-fade-in-up  { animation: fadeInUp 0.5s ease both; }
.animate-slide-left  { animation: slideInLeft 0.4s ease both; }
.animate-number-flip { animation: numberFlip 0.5s cubic-bezier(.175,.885,.32,1.275) both; }

/* ── Modal Overrides ─────────────────────────────────────── */

.modal-app .modal-content {
  border-radius: 20px;
  border:        none;
  box-shadow:    0 25px 60px rgba(0,0,0,0.18);
  overflow:      hidden;
}

.modal-app .modal-header {
  background: var(--color-gradient);
  border-bottom: none;
  padding:    20px 24px;
}

.modal-app .modal-title {
  color:       #fff;
  font-weight: 700;
  font-size:   16px;
}

.modal-app .btn-close { filter: invert(1); }
.modal-app .modal-body { padding: 24px; }
.modal-app .modal-footer { padding: 16px 24px; border-top: 1px solid #F1F5F9; }

.modal-app .form-control,
.modal-app .form-select {
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  padding: 10px 14px;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.modal-app .form-control:focus,
.modal-app .form-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);
}

/* ── Theme Switcher Pills ────────────────────────────────── */

.theme-switcher {
  display:   flex;
  gap:       10px;
  flex-wrap: wrap;
}

.theme-option {
  width:         36px;
  height:        36px;
  border-radius: 50%;
  border:        3px solid transparent;
  cursor:        pointer;
  transition:    all 0.2s ease;
  position:      relative;
}

.theme-option.blue  { background: linear-gradient(135deg,#1E40AF,#3B82F6); }
.theme-option.green { background: linear-gradient(135deg,#065F46,#10B981); }
.theme-option.red   { background: linear-gradient(135deg,#7F1D1D,#DC2626); }

.theme-option.active { border-color: #0F172A; transform: scale(1.15); }
.theme-option:hover  { transform: scale(1.1); }

/* ── Utility ─────────────────────────────────────────────── */

.text-primary-theme { color: var(--color-primary) !important; }
.bg-primary-theme   { background: var(--color-gradient) !important; }
.border-primary-theme { border-color: var(--color-accent) !important; }

.rounded-xl { border-radius: 12px !important; }
.rounded-2xl{ border-radius: 16px !important; }
.rounded-3xl{ border-radius: 24px !important; }

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

.shadow-soft { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.shadow-md   { box-shadow: 0 8px 30px rgba(0,0,0,0.1); }

/* ── Loading State ───────────────────────────────────────── */

.loading-shimmer {
  background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}