/* =========================================================
   ATPBESYO Datacenter — Light Theme
   Modern, professional, mobile-first dashboard CSS
   ========================================================= */

:root{
  /* Brand */
  --brand-1: #10b981;          /* emerald 500 */
  --brand-2: #059669;          /* emerald 600 */
  --brand-3: #14b8a6;          /* teal 500 */
  --brand-grad: linear-gradient(135deg,#10b981 0%,#059669 50%,#0d9488 100%);
  --brand-grad-soft: linear-gradient(135deg, rgba(16,185,129,.10), rgba(13,148,136,.10));

  /* Neutrals */
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --border: #e5e7eb;
  --border-2: #eef2f7;
  --text: #111827;
  --text-2: #4b5563;
  --text-3: #6b7280;
  --muted: #9ca3af;

  /* Semantic */
  --info:    #3b82f6;
  --success: #10b981;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --purple:  #8b5cf6;
  --pink:    #ec4899;

  /* Layout */
  --sidebar-w: 260px;
  --topbar-h: 64px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md: 0 4px 12px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg: 0 10px 30px rgba(15,23,42,.08), 0 6px 12px rgba(15,23,42,.05);
  --transition: 200ms cubic-bezier(.4,0,.2,1);
}

/* ---------- Base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{ color: var(--brand-2); text-decoration: none; transition: color var(--transition); }
a:hover{ color: var(--brand-1); text-decoration: none; }
hr{ border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }

h1,h2,h3,h4,h5,h6{ color: var(--text); font-weight: 600; }

/* ---------- Topbar ---------- */
.app-topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 1030;
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-shadow: var(--shadow-sm);
}
.app-topbar .topbar-left{
  width: var(--sidebar-w);
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 8px;
  flex-shrink: 0;
}
.app-topbar .brand{
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; color: var(--text); font-size: 16px;
}
.app-topbar .brand-logo{
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--brand-grad);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 16px;
  box-shadow: 0 4px 10px rgba(16,185,129,.35);
}
.app-topbar .topbar-mid{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 13px;
  letter-spacing: 1px;
}
.app-topbar .topbar-right{
  display: flex; align-items: center; gap: 6px;
}
.topbar-btn{
  position: relative;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  font-size: 18px;
}
.topbar-btn:hover{
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--brand-2);
}
.topbar-btn .badge-dot{
  position: absolute; top: 8px; right: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger);
  border: 2px solid var(--surface);
}
.menu-toggle{ display: none; }
@media (max-width: 991.98px){
  .menu-toggle{ display: inline-flex; }
  .app-topbar .topbar-left{ width: auto; }
  .app-topbar .topbar-mid{ display: none; }
}

.user-pill{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--transition);
}
.user-pill:hover{ background: #fff; box-shadow: var(--shadow-sm); }
.user-pill img{ width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.user-pill .user-name{ font-weight: 600; color: var(--text); font-size: 13px; }
.user-pill .user-role{ font-size: 11px; color: var(--text-3); display: block; line-height: 1; }
@media (max-width: 575.98px){
  .user-pill .user-info{ display: none; }
  .user-pill{ padding: 4px; }
}

/* ---------- Sidebar ---------- */
.app-sidebar{
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1020;
  padding: 16px 12px 80px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.app-sidebar::-webkit-scrollbar{ width: 6px; }
.app-sidebar::-webkit-scrollbar-thumb{ background: #cbd5e1; border-radius: 6px; }
.app-sidebar::-webkit-scrollbar-thumb:hover{ background: #94a3b8; }

.sidebar-user{
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: var(--brand-grad-soft);
  border: 1px solid rgba(16,185,129,.2);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.sidebar-user .avatar{
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--brand-grad);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700;
  box-shadow: 0 2px 6px rgba(16,185,129,.3);
}
.sidebar-user .avatar img{ width: 100%; height: 100%; object-fit: cover; }
.sidebar-user .avatar .online{
  position: absolute; bottom: -2px; right: -2px;
  width: 12px; height: 12px;
  background: #22c55e;
  border: 2px solid #fff;
  border-radius: 50%;
}
.sidebar-user .info h6{ margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.sidebar-user .info small{ color: var(--text-3); font-size: 11px; }

.nav-section-title{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
  padding: 16px 12px 8px;
}

.nav-list{ list-style: none; padding: 0; margin: 0; }
.nav-list li{ margin: 2px 0; }
.nav-list > li > a,
.nav-list > li > .nav-toggle{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  border: 1px solid transparent;
}
.nav-list > li > a > i,
.nav-list > li > .nav-toggle > i{
  font-size: 18px;
  width: 22px;
  text-align: center;
  color: var(--text-3);
  transition: color var(--transition);
}
.nav-list > li > a:hover,
.nav-list > li > .nav-toggle:hover{
  background: var(--surface-2);
  color: var(--brand-2);
}
.nav-list > li > a:hover > i,
.nav-list > li > .nav-toggle:hover > i{ color: var(--brand-2); }

.nav-list > li.active > a,
.nav-list > li.active > .nav-toggle{
  background: var(--brand-grad-soft);
  color: var(--brand-2);
  font-weight: 600;
  border-color: rgba(16,185,129,.2);
}
.nav-list > li.active > a > i,
.nav-list > li.active > .nav-toggle > i{ color: var(--brand-2); }

.nav-list .nav-arrow{ margin-left: auto; font-size: 14px; transition: transform var(--transition); }
.nav-list li.open > .nav-toggle .nav-arrow,
.nav-list li.active > .nav-toggle .nav-arrow{ transform: rotate(90deg); }

.nav-sub{
  list-style: none;
  padding: 4px 0 4px 36px;
  margin: 2px 0 6px;
  display: none;
}
.nav-list li.open > .nav-sub,
.nav-list li.active > .nav-sub{ display: block; }
.nav-sub li a{
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-2);
  border-radius: var(--radius-sm);
  position: relative;
  transition: all var(--transition);
}
.nav-sub li a::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--muted);
  transform: translate(-12px,-50%);
  transition: all var(--transition);
}
.nav-sub li a:hover{ background: var(--surface-2); color: var(--brand-2); }
.nav-sub li a:hover::before{ background: var(--brand-1); }
.nav-sub li.active a{ color: var(--brand-2); font-weight: 600; }
.nav-sub li.active a::before{ background: var(--brand-1); }

.nav-divider{
  height: 1px; background: var(--border-2);
  margin: 8px 12px;
}

/* Mobile drawer */
.sidebar-backdrop{
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,23,42,.4);
  backdrop-filter: blur(2px);
  z-index: 1019;
}
@media (max-width: 991.98px){
  .app-sidebar{
    transform: translateX(-100%);
    transition: transform var(--transition);
    box-shadow: var(--shadow-lg);
  }
  body.sidebar-open .app-sidebar{ transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop{ display: block; }
}

/* ---------- Main content ---------- */
.app-main{
  padding-top: var(--topbar-h);
  padding-left: var(--sidebar-w);
  min-height: 100vh;
  transition: padding-left var(--transition);
}
@media (max-width: 991.98px){
  .app-main{ padding-left: 0; }
}
.app-content{
  padding: 24px;
}
@media (max-width: 575.98px){
  .app-content{ padding: 16px; }
}

.page-head{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-bottom: 20px;
}
.page-head h1{
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  display: inline-flex; align-items: center; gap: 10px;
}
.page-head h1 i{
  width: 36px; height: 36px;
  background: var(--brand-grad);
  color: #fff; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(16,185,129,.3);
}
.page-head .breadcrumb-trail{
  font-size: 13px; color: var(--text-3);
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.page-head .breadcrumb-trail a{ color: var(--text-3); }
.page-head .breadcrumb-trail a:hover{ color: var(--brand-2); }
.page-head .breadcrumb-trail .sep{ color: var(--muted); }

/* ---------- Cards (overrides Bootstrap) ---------- */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover{ box-shadow: var(--shadow-md); }
.card .card-body{ padding: 20px; }
.card .card-header,
.card-header{
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  font-weight: 600;
}

/* ---------- KPI cards (dashboard) ---------- */
.kpi-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.kpi-card{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.kpi-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kpi-card::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--brand-grad);
}
.kpi-card.kpi-info::before{ background: linear-gradient(180deg,#3b82f6,#2563eb); }
.kpi-card.kpi-warning::before{ background: linear-gradient(180deg,#f59e0b,#d97706); }
.kpi-card.kpi-danger::before{ background: linear-gradient(180deg,#ef4444,#dc2626); }
.kpi-card.kpi-purple::before{ background: linear-gradient(180deg,#8b5cf6,#7c3aed); }
.kpi-card.kpi-pink::before{ background: linear-gradient(180deg,#ec4899,#db2777); }

.kpi-card .kpi-head{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
}
.kpi-card .kpi-label{
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.kpi-card .kpi-icon{
  width: 42px; height: 42px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-grad-soft);
  color: var(--brand-2);
  font-size: 20px;
  flex-shrink: 0;
}
.kpi-card.kpi-info .kpi-icon{ background: rgba(59,130,246,.1); color: var(--info); }
.kpi-card.kpi-warning .kpi-icon{ background: rgba(245,158,11,.1); color: var(--warning); }
.kpi-card.kpi-danger .kpi-icon{ background: rgba(239,68,68,.1); color: var(--danger); }
.kpi-card.kpi-purple .kpi-icon{ background: rgba(139,92,246,.1); color: var(--purple); }
.kpi-card.kpi-pink .kpi-icon{ background: rgba(236,72,153,.1); color: var(--pink); }

.kpi-card .kpi-value{
  margin-top: 10px;
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  word-break: break-word;
}
.kpi-card .kpi-foot{
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-3);
}
.kpi-card .kpi-foot .kpi-trend{
  display: inline-flex; align-items: center; gap: 2px;
  font-weight: 600; padding: 2px 6px; border-radius: 6px;
  background: rgba(16,185,129,.1); color: var(--success);
}
.kpi-card .kpi-foot .kpi-trend.down{ background: rgba(239,68,68,.1); color: var(--danger); }

.kpi-card.kpi-live .kpi-icon{
  background: var(--brand-grad);
  color: #fff;
  box-shadow: 0 4px 10px rgba(16,185,129,.4);
  animation: pulse-live 2s infinite;
}
@keyframes pulse-live{
  0%,100%{ box-shadow: 0 4px 10px rgba(16,185,129,.4); }
  50%   { box-shadow: 0 4px 18px rgba(16,185,129,.7); }
}

/* ---------- Tables ---------- */
.table{
  color: var(--text);
  background: transparent;
  margin-bottom: 0;
}
.table thead th{
  background: var(--surface-2);
  border-top: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-3);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 12px;
}
.table tbody td{
  padding: 12px;
  vertical-align: middle;
  border-top: 1px solid var(--border-2);
  font-size: 13px;
}
.table-hover tbody tr:hover{ background: var(--surface-2); }
.table-striped tbody tr:nth-of-type(odd){ background: rgba(244,247,251,.5); }

.table-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.table-card .table-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap; gap: 8px;
}
.table-card .table-head h5{
  margin: 0; font-size: 15px; font-weight: 600; color: var(--text);
}
.table-card .table-wrap{ overflow-x: auto; }

/* ---------- Badges & buttons ---------- */
.badge{
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: .2px;
}
.badge-info    { background: rgba(59,130,246,.12); color: var(--info); }
.badge-success { background: rgba(16,185,129,.12); color: var(--success); }
.badge-warning { background: rgba(245,158,11,.15); color: #b45309; }
.badge-danger  { background: rgba(239,68,68,.12);  color: var(--danger); }
.badge-dark    { background: rgba(17,24,39,.08);   color: var(--text); }
.badge-secondary{ background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }

.btn{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 500;
  font-size: 13.5px;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}
.btn:focus, .btn:active{ outline: none; box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
.btn-primary, .btn-success{
  background: var(--brand-grad);
  color: #fff !important;
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(16,185,129,.3);
}
.btn-primary:hover, .btn-success:hover{ filter: brightness(1.05); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(16,185,129,.4); }
.btn-info{ background: var(--info); color: #fff; }
.btn-info:hover{ background: #2563eb; color: #fff; }
.btn-warning{ background: var(--warning); color: #fff; }
.btn-warning:hover{ background: #d97706; color: #fff; }
.btn-danger{ background: var(--danger); color: #fff; }
.btn-danger:hover{ background: #dc2626; color: #fff; }
.btn-secondary{ background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-secondary:hover{ background: var(--border-2); color: var(--text); }
.btn-outline-success{ background: transparent; color: var(--brand-2); border: 1px solid var(--brand-2); }
.btn-outline-success:hover{ background: var(--brand-2); color: #fff; }
.btn-outline-primary{ background: transparent; color: var(--info); border: 1px solid var(--info); }
.btn-outline-primary:hover{ background: var(--info); color: #fff; }

.btn-sm{ padding: 6px 12px; font-size: 12.5px; }
.btn-lg{ padding: 12px 22px; font-size: 15px; }

/* ---------- Forms ---------- */
.form-control{
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  height: calc(2.4rem + 2px);
  padding: 6px 12px;
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus{
  border-color: var(--brand-1);
  box-shadow: 0 0 0 3px rgba(16,185,129,.15);
  outline: none;
}
.form-control::placeholder{ color: var(--muted); }
label{ font-weight: 500; color: var(--text-2); font-size: 13px; }

/* ---------- Footer ---------- */
.app-footer{
  padding: 16px 24px;
  font-size: 12px;
  color: var(--text-3);
  border-top: 1px solid var(--border);
  margin-top: 24px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  background: var(--surface);
}

/* ---------- DataTables overrides ---------- */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 5px 10px !important;
  font-size: 13px !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  height: auto !important;
  line-height: 1.4 !important;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus{
  border-color: var(--brand-1) !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,.15) !important;
  outline: none !important;
}
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info{
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 12px;
}
.dataTables_wrapper .dataTables_paginate{
  margin-top: 12px;
  font-size: 12.5px;
}
/* Legacy plain paginate_button (no bootstrap4 plugin) */
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  margin: 0 2px !important;
  font-size: 12.5px !important;
  color: var(--text-2) !important;
  padding: 4px 10px !important;
  background: var(--surface) !important;
  min-width: 0 !important;
  line-height: 1.4 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background: var(--brand-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background: var(--surface-2) !important;
  color: var(--brand-2) !important;
  border-color: var(--border) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{
  color: var(--muted) !important;
  background: var(--surface) !important;
  border-color: var(--border) !important;
  cursor: not-allowed !important;
}

/* Bootstrap4-styled DataTables (.pagination/.page-item/.page-link) — make compact + theme-aware */
.dataTables_wrapper .pagination{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  margin: 0;
  border-radius: 0;
  list-style: none;
}
.dataTables_wrapper .pagination .page-item{ margin: 0; }
.dataTables_wrapper .pagination .page-link{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm) !important;
  margin: 0;
  transition: all var(--transition);
  text-decoration: none;
  box-shadow: none;
}
.dataTables_wrapper .pagination .page-link:hover{
  z-index: 2;
  color: var(--brand-2);
  background: var(--surface-2);
  border-color: var(--border);
  text-decoration: none;
}
.dataTables_wrapper .pagination .page-link:focus{
  z-index: 3;
  outline: none;
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}
.dataTables_wrapper .pagination .page-item.active .page-link{
  background: var(--brand-grad);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(16,185,129,.25);
}
.dataTables_wrapper .pagination .page-item.disabled .page-link{
  color: var(--muted);
  background: var(--surface);
  border-color: var(--border);
  pointer-events: none;
  opacity: .55;
}
/* Override Bootstrap default rounded-edge collapsing */
.dataTables_wrapper .pagination .page-item:first-child .page-link,
.dataTables_wrapper .pagination .page-item:last-child .page-link{
  border-radius: var(--radius-sm) !important;
}
/* Top toolbar row: filter/length spacing */
.dataTables_wrapper .row{ align-items: center; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label{
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 0;
  font-weight: 500;
  color: var(--text-3);
  font-size: 12.5px;
}
.dataTables_wrapper .dataTables_length select{
  margin: 0 4px;
  min-width: 70px;
}
.dataTables_wrapper .dataTables_filter input{
  margin-left: 6px;
  min-width: 200px;
}
.dataTables_wrapper .dataTables_processing{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text-2) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 14px 22px !important;
  font-weight: 500;
}

/* ---------- Modal ---------- */
.modal-content{
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.modal-header{
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
}
.modal-header .modal-title{ font-size: 16px; font-weight: 600; }
.modal-footer{
  border-top: 1px solid var(--border);
  padding: 12px 20px;
}

/* ---------- Misc helpers ---------- */
.text-muted{ color: var(--text-3) !important; }
.text-success{ color: var(--success) !important; }
.text-danger{ color: var(--danger) !important; }
.text-warning{ color: #b45309 !important; }
.text-info{ color: var(--info) !important; }
.text-dark{ color: var(--text) !important; }
.text-light{ color: #fff !important; }

.bg-success-soft{ background: rgba(16,185,129,.1); }
.bg-info-soft{ background: rgba(59,130,246,.1); }
.bg-warning-soft{ background: rgba(245,158,11,.12); }
.bg-danger-soft{ background: rgba(239,68,68,.1); }

/* legacy classes still used by existing pages */
.float-right{ float: right; }
.float-left{ float: left; }
.font-weight-bold{ font-weight: 700 !important; }

/* Chart cards */
.chart-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.chart-card .chart-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap; gap: 6px;
}
.chart-card .chart-head h5{
  margin: 0; font-size: 14px; font-weight: 600; color: var(--text);
}
.chart-card .chart-head .chart-sub{ font-size: 12px; color: var(--text-3); }

/* Toastr override (light) */
#toast-container > .toast{ box-shadow: var(--shadow-md) !important; opacity: 1 !important; }

/* Fix select2 height in light theme */
.select2-container--default .select2-selection--single{
  height: calc(2.4rem + 2px) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: calc(2.4rem) !important;
  color: var(--text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
  height: calc(2.4rem) !important;
}
.select2-dropdown{
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.select2-results__option{ color: var(--text); }
.select2-results__option--highlighted[aria-selected]{ background: var(--brand-1) !important; color: #fff !important; }
.select2-search--dropdown .select2-search__field{
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ===========================================================
   DARK THEME — overrides via [data-theme="dark"]
   =========================================================== */
:root[data-theme="dark"]{
  --bg:        #0f172a;   /* slate-900 */
  --surface:   #1e293b;   /* slate-800 */
  --surface-2: #273548;   /* between 700/800 */
  --border:    #334155;   /* slate-700 */
  --border-2:  #2a3a52;
  --text:      #f1f5f9;   /* slate-100 */
  --text-2:    #cbd5e1;   /* slate-300 */
  --text-3:    #94a3b8;   /* slate-400 */
  --muted:     #64748b;   /* slate-500 */

  --brand-grad-soft: linear-gradient(135deg, rgba(16,185,129,.18), rgba(13,148,136,.18));
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.55), 0 6px 12px rgba(0,0,0,.4);
}

[data-theme="dark"] body{ background: var(--bg); color: var(--text); }
[data-theme="dark"] .app-topbar{ background: var(--surface); border-bottom-color: var(--border); }
[data-theme="dark"] .app-sidebar{ background: var(--surface); border-right-color: var(--border); }
[data-theme="dark"] .card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .table-card,
[data-theme="dark"] .modal-content{
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .card-header{ border-bottom-color: var(--border); background: transparent; }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer{ border-color: var(--border); }
[data-theme="dark"] .table thead th{ background: var(--surface-2); border-bottom-color: var(--border); color: var(--text-3); }
[data-theme="dark"] .table tbody td{ border-top-color: var(--border-2); color: var(--text); }
[data-theme="dark"] .table-hover tbody tr:hover{ background: var(--surface-2); }
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd){ background: rgba(39,53,72,.4); }

[data-theme="dark"] .kpi-card .kpi-icon{ background: rgba(16,185,129,.2); color: #34d399; }
[data-theme="dark"] .kpi-card.kpi-info .kpi-icon{ background: rgba(59,130,246,.2); color: #60a5fa; }
[data-theme="dark"] .kpi-card.kpi-warning .kpi-icon{ background: rgba(245,158,11,.2); color: #fbbf24; }
[data-theme="dark"] .kpi-card.kpi-danger .kpi-icon{ background: rgba(239,68,68,.2); color: #f87171; }
[data-theme="dark"] .kpi-card.kpi-purple .kpi-icon{ background: rgba(139,92,246,.2); color: #a78bfa; }
[data-theme="dark"] .kpi-card.kpi-pink .kpi-icon{ background: rgba(236,72,153,.2); color: #f472b6; }

[data-theme="dark"] .badge-info    { background: rgba(96,165,250,.18); color: #93c5fd; }
[data-theme="dark"] .badge-success { background: rgba(52,211,153,.18); color: #6ee7b7; }
[data-theme="dark"] .badge-warning { background: rgba(251,191,36,.18); color: #fcd34d; }
[data-theme="dark"] .badge-danger  { background: rgba(248,113,113,.18); color: #fca5a5; }
[data-theme="dark"] .badge-dark    { background: rgba(255,255,255,.08); color: var(--text); }
[data-theme="dark"] .badge-secondary{ background: var(--surface-2); color: var(--text-2); border-color: var(--border); }

[data-theme="dark"] .form-control{ background: var(--surface-2); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .form-control::placeholder{ color: var(--muted); }
[data-theme="dark"] .form-control:focus{ background: var(--surface); border-color: var(--brand-1); }

[data-theme="dark"] .topbar-btn{ color: var(--text-2); }
[data-theme="dark"] .topbar-btn:hover{ background: var(--surface-2); border-color: var(--border); color: #34d399; }
[data-theme="dark"] .user-pill{ background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .user-pill:hover{ background: var(--surface); }

[data-theme="dark"] .nav-list > li > a,
[data-theme="dark"] .nav-list > li > .nav-toggle{ color: var(--text-2); }
[data-theme="dark"] .nav-list > li > a:hover,
[data-theme="dark"] .nav-list > li > .nav-toggle:hover,
[data-theme="dark"] .nav-list > li.active > a,
[data-theme="dark"] .nav-list > li.active > .nav-toggle{ color: #6ee7b7; background: var(--surface-2); }
[data-theme="dark"] .nav-list > li > a > i,
[data-theme="dark"] .nav-list > li > .nav-toggle > i{ color: var(--text-3); }
[data-theme="dark"] .nav-list > li.active > a > i,
[data-theme="dark"] .nav-list > li.active > .nav-toggle > i,
[data-theme="dark"] .nav-list > li > a:hover > i,
[data-theme="dark"] .nav-list > li > .nav-toggle:hover > i{ color: #6ee7b7; }
[data-theme="dark"] .nav-sub li a{ color: var(--text-2); }
[data-theme="dark"] .nav-sub li a:hover{ background: var(--surface-2); color: #6ee7b7; }
[data-theme="dark"] .nav-sub li.active a{ color: #6ee7b7; }

[data-theme="dark"] .nav-divider{ background: var(--border); }
[data-theme="dark"] .app-footer{ background: var(--surface); border-top-color: var(--border); }

[data-theme="dark"] .dropdown-menu{
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
[data-theme="dark"] .dropdown-item{ color: var(--text-2); }
[data-theme="dark"] .dropdown-item:hover{ background: var(--surface-2); color: var(--text); }
[data-theme="dark"] .dropdown-divider{ border-color: var(--border); }

/* DataTables dark */
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select{
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button{
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background: var(--surface) !important;
  color: #6ee7b7 !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-theme="dark"] .dataTables_wrapper .dataTables_length{ color: var(--text-3); }

/* Bootstrap4-styled DataTables pagination — dark */
[data-theme="dark"] .dataTables_wrapper .pagination .page-link{
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-2);
}
[data-theme="dark"] .dataTables_wrapper .pagination .page-link:hover{
  background: var(--surface);
  color: #6ee7b7;
  border-color: var(--border);
}
[data-theme="dark"] .dataTables_wrapper .pagination .page-item.active .page-link{
  background: var(--brand-grad);
  color: #fff;
  border-color: transparent;
}
[data-theme="dark"] .dataTables_wrapper .pagination .page-item.disabled .page-link{
  background: var(--surface-2);
  color: var(--muted);
  border-color: var(--border);
}
[data-theme="dark"] .dataTables_wrapper .dataTables_processing{
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}

/* Select2 dark */
[data-theme="dark"] .select2-container--default .select2-selection--single{
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered{
  color: var(--text) !important;
}
[data-theme="dark"] .select2-dropdown{
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .select2-results__option{ color: var(--text); }
[data-theme="dark"] .select2-search--dropdown .select2-search__field{
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Theme toggle button (in topbar) */
.theme-toggle .icon-light{ display: inline-block; }
.theme-toggle .icon-dark{ display: none; }
[data-theme="dark"] .theme-toggle .icon-light{ display: none; }
[data-theme="dark"] .theme-toggle .icon-dark{ display: inline-block; }

/* Sidebar collapse toggle button (in topbar, after brand) */
.sidebar-collapse-btn{
  width: 32px; height: 32px;
  margin-left: 6px;
  font-size: 16px;
}
.sidebar-collapse-btn .icon-expand{ display: inline-block; }
.sidebar-collapse-btn .icon-collapse{ display: none; }
[data-sidebar="collapsed"] .sidebar-collapse-btn .icon-expand{ display: none; }
[data-sidebar="collapsed"] .sidebar-collapse-btn .icon-collapse{ display: inline-block; }

/* ===========================================================
   COLLAPSED SIDEBAR (desktop only — mobile drawer is separate)
   =========================================================== */
@media (min-width: 992px){
  :root[data-sidebar="collapsed"]{
    --sidebar-w-collapsed: 72px;
  }
  [data-sidebar="collapsed"] .app-sidebar{
    width: var(--sidebar-w-collapsed);
    padding: 12px 8px 80px;
    overflow-x: visible; /* allow flyout submenu to escape */
  }
  [data-sidebar="collapsed"] .app-main{
    padding-left: var(--sidebar-w-collapsed);
  }
  [data-sidebar="collapsed"] .app-topbar .topbar-left{
    width: var(--sidebar-w-collapsed);
  }
  [data-sidebar="collapsed"] .app-topbar .brand .brand-text{
    display: none !important;
  }

  /* Hide labels, section titles, arrows, sub-menus */
  [data-sidebar="collapsed"] .app-sidebar .nav-section-title,
  [data-sidebar="collapsed"] .app-sidebar .nav-toggle > span,
  [data-sidebar="collapsed"] .app-sidebar .nav-list > li > a > span,
  [data-sidebar="collapsed"] .app-sidebar .nav-arrow,
  [data-sidebar="collapsed"] .app-sidebar .nav-divider{
    display: none !important;
  }
  [data-sidebar="collapsed"] .app-sidebar .sidebar-user .info{
    display: none;
  }
  [data-sidebar="collapsed"] .app-sidebar .sidebar-user{
    justify-content: center;
    padding: 8px;
    margin-bottom: 8px;
  }
  [data-sidebar="collapsed"] .app-sidebar .sidebar-user .avatar{
    width: 38px; height: 38px;
  }

  /* Center icons */
  [data-sidebar="collapsed"] .app-sidebar .nav-list > li > a,
  [data-sidebar="collapsed"] .app-sidebar .nav-list > li > .nav-toggle{
    justify-content: center;
    padding: 11px 6px;
    border-radius: var(--radius-sm);
    gap: 0;
  }
  [data-sidebar="collapsed"] .app-sidebar .nav-list > li > a > i,
  [data-sidebar="collapsed"] .app-sidebar .nav-list > li > .nav-toggle > i{
    font-size: 19px;
    width: auto;
  }

  /* Sub-menu hidden by default; flyout on hover */
  [data-sidebar="collapsed"] .app-sidebar .nav-list > li{
    position: relative;
  }
  [data-sidebar="collapsed"] .app-sidebar .nav-list > li > .nav-sub{
    display: none !important;
  }
  [data-sidebar="collapsed"] .app-sidebar .nav-list > li:hover > .nav-sub,
  [data-sidebar="collapsed"] .app-sidebar .nav-list > li:focus-within > .nav-sub{
    display: block !important;
    position: absolute;
    left: calc(100% + 6px);
    top: 0;
    min-width: 220px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index: 1100;
  }
  /* Add a small label header inside flyout (the parent's title) — pseudo via data-attr is hard; keep without */
  [data-sidebar="collapsed"] .app-sidebar .nav-list > li > .nav-sub li a{
    padding: 8px 12px;
    border-radius: var(--radius-sm);
  }
  [data-sidebar="collapsed"] .app-sidebar .nav-list > li > .nav-sub li a::before{
    display: none; /* drop the bullet for cleaner flyout */
  }

  /* Flyout tooltip for items WITHOUT submenu */
  [data-sidebar="collapsed"] .app-sidebar .nav-list > li > a{
    position: relative;
  }
  [data-sidebar="collapsed"] .app-sidebar .nav-list > li > a::after{
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 500;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
    z-index: 1100;
  }
  [data-sidebar="collapsed"] .app-sidebar .nav-list > li > a:hover::after{
    opacity: 1;
  }
  /* Tooltip for nav-toggle (parents) — only when no submenu hover handled separately, but harmless to add */
  [data-sidebar="collapsed"] .app-sidebar .nav-list > li > .nav-toggle{
    position: relative;
  }
  [data-sidebar="collapsed"] .app-sidebar .nav-list > li > .nav-toggle::after{
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
    z-index: 1099;
  }
  [data-sidebar="collapsed"] .app-sidebar .nav-list > li:hover > .nav-toggle::after{
    opacity: 1;
  }
  /* When the flyout submenu is showing, hide the toggle's own tooltip to avoid overlap */
  [data-sidebar="collapsed"] .app-sidebar .nav-list > li:hover > .nav-sub ~ .nav-toggle::after{
    opacity: 0;
  }
}

/* Filter pill tabs (used in siparisler list) */
.filter-tabs{
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 16px;
}
.filter-tabs .tab{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
}
.filter-tabs .tab:hover{ border-color: var(--brand-1); color: var(--brand-2); }
.filter-tabs .tab.active{
  background: var(--brand-grad);
  color: #fff !important;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(16,185,129,.3);
}
.filter-tabs .tab .count{
  background: rgba(255,255,255,.2);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.filter-tabs .tab:not(.active) .count{
  background: var(--surface-2);
  color: var(--text-3);
}

/* Toolbar row above DataTables */
.list-toolbar{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  margin-bottom: 14px;
}
.list-toolbar .left, .list-toolbar .right{
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}

/* Status pills (orders) */
.pill{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
}
.pill-ok    { background: rgba(16,185,129,.12); color: var(--success); }
.pill-warn  { background: rgba(245,158,11,.15); color: #b45309; }
.pill-fail  { background: rgba(239,68,68,.12);  color: var(--danger); }
.pill-info  { background: rgba(59,130,246,.12); color: var(--info); }
.pill-muted { background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border); }
[data-theme="dark"] .pill-warn{ color: #fcd34d; }
[data-theme="dark"] .pill-muted{ background: var(--surface-2); color: var(--text-3); }

/* Alerts (legacy bootstrap-style) */
.alert{
  position: relative;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 13.5px;
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 16px;
}
.alert .close{ background: transparent; border:0; color: inherit; opacity: .6; cursor: pointer; padding: 0 4px; }
.alert .close:hover{ opacity: 1; }
.alert-success{
  background: rgba(16,185,129,.10);
  border-color: rgba(16,185,129,.25);
  color: var(--brand-2);
}
.alert-danger{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.25);
  color: var(--danger);
}
.alert-warning{
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.3);
  color: #b45309;
}
.alert-info{
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.25);
  color: var(--info);
}
[data-theme="dark"] .alert-success{ color: #6ee7b7; background: rgba(16,185,129,.15); }
[data-theme="dark"] .alert-danger{ color: #fca5a5; background: rgba(239,68,68,.15); }
[data-theme="dark"] .alert-warning{ color: #fcd34d; background: rgba(245,158,11,.15); }
[data-theme="dark"] .alert-info{ color: #93c5fd; background: rgba(59,130,246,.15); }

/* Header title (legacy) — used in many add/edit pages */
.header-title{
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  text-transform: none;
}
.header-title small{
  font-size: 13px;
  color: var(--text-3);
  font-weight: 400;
  margin-left: 4px;
}

/* Form switch (legacy on/off) */
.form-switch{
  position: relative;
  display: inline-block;
  width: 38px; height: 20px;
  margin: 0;
}
.form-switch input[type=checkbox]{
  position: absolute; opacity: 0;
  width: 100%; height: 100%; margin: 0;
  cursor: pointer; z-index: 2;
}
.form-switch i{
  display: block;
  width: 100%; height: 100%;
  background: var(--border);
  border-radius: 999px;
  position: relative;
  transition: background var(--transition);
}
.form-switch i::after{
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.form-switch input[type=checkbox]:checked + i{ background: var(--brand-1); }
.form-switch input[type=checkbox]:checked + i::after{ transform: translateX(18px); }
[data-theme="dark"] .form-switch i{ background: var(--surface-2); }
[data-theme="dark"] .form-switch input[type=checkbox]:checked + i{ background: var(--brand-1); }

/* Bootstrap col-form-label adjustments */
.col-form-label{ padding-top: calc(.45rem + 1px); padding-bottom: calc(.45rem + 1px); margin-bottom: 0; line-height: 1.5; font-size: 13px; font-weight: 500; color: var(--text-2); }
.form-group{ margin-bottom: 16px; }

/* Bootstrap dropdown menu (so inline dropdown-menus look right) */
.dropdown-menu{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 6px !important;
  font-size: 13px !important;
}
.dropdown-item{
  padding: 7px 12px !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-2) !important;
  font-size: 13px !important;
}
.dropdown-item:hover, .dropdown-item:focus{
  background: var(--surface-2) !important;
  color: var(--brand-2) !important;
}
.dropdown-divider{ border-color: var(--border) !important; margin: 4px 2px !important; }
[data-theme="dark"] .dropdown-item{ color: var(--text-2) !important; }
[data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus{
  background: var(--surface-2) !important; color: #6ee7b7 !important;
}

/* Action button pack */
.action-btn{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  text-decoration: none;
  transition: all var(--transition);
}
.action-btn:hover{ background: var(--brand-1); color: #fff !important; border-color: transparent; }
.action-btn.action-warn{ background: rgba(245,158,11,.1); color: #b45309; border-color: rgba(245,158,11,.3); }
.action-btn.action-warn:hover{ background: var(--warning); color: #fff !important; }
.action-btn.action-success{ background: rgba(16,185,129,.1); color: var(--brand-2); border-color: rgba(16,185,129,.3); }
[data-theme="dark"] .action-btn.action-warn{ color: #fcd34d; }
[data-theme="dark"] .action-btn.action-success{ color: #6ee7b7; }