/* EsPark full-site theme — mock red/white + dark. Loads after Vristo style.css */
:root {
  --es-red: #dc1829;
  --es-red-2: #ef3340;
  --es-red-deep: #a3101e;
  --es-red-soft: #fff1f2;
  --es-red-line: #fecdd3;
  --es-ink: #0f172a;
  --es-ink-2: #334155;
  --es-muted: #64748b;
  --es-line: #e2e8f0;
  --es-bg: #f8fafc;
  --es-white: #ffffff;
  --es-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.06);
  --es-radius: 16px;
  --es-side: 260px;
}

html { font-size: 15px; }
body.relative,
body.espark-theme,
.font-nunito {
  font-family: Inter, Nunito, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  color: var(--es-ink) !important;
  background: var(--es-bg) !important;
}

/* ========== Page chrome ========== */
.main-container,
.main-content,
.dark .main-container .main-content {
  background:
    radial-gradient(900px 420px at 100% -10%, rgba(220, 24, 41, 0.08), transparent 55%),
    radial-gradient(700px 380px at -5% 20%, rgba(220, 24, 41, 0.04), transparent 50%),
    var(--es-bg) !important;
}
.main-content > .animate__animated.p-6 {
  padding: 1.1rem 1.3rem 2rem !important;
}
.main-content > p.pt-6.text-center {
  color: var(--es-muted) !important;
  font-size: 0.78rem !important;
}

/* ========== Sidebar ========== */
.sidebar {
  width: var(--es-side) !important;
  box-shadow: none !important;
  border-right: 1px solid var(--es-line) !important;
  background: transparent !important;
}
.sidebar > div.h-full {
  background: var(--es-white) !important;
  display: flex !important;
  flex-direction: column !important;
}
.sidebar .main-logo {
  gap: 0.55rem;
  align-items: center;
  padding: 0.15rem 0;
  border-bottom: none;
}
.sidebar .main-logo img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
  object-fit: cover;
  box-shadow: 0 8px 18px rgba(220, 24, 41, 0.28);
  margin-left: 0 !important;
}
.sidebar .main-logo span {
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--es-ink) !important;
}
.es-brand-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.es-brand-meta small {
  color: var(--es-muted);
  font-size: 0.72rem;
  font-weight: 500;
}
.sidebar .flex.items-center.justify-between.px-4.py-3 {
  padding: 0.9rem 0.75rem 0.85rem !important;
  border-bottom: 1px solid var(--es-line);
  flex-shrink: 0;
}
.sidebar ul.perfect-scrollbar {
  padding: 0.5rem 0.55rem !important;
  height: auto !important;
  flex: 1 !important;
  max-height: none !important;
}
.sidebar h2 {
  background: transparent !important;
  margin: 0.35rem 0 0.15rem !important;
  padding: 0.55rem 0.55rem !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--es-red-deep) !important;
  border-radius: 10px;
}
.sidebar h2:hover { background: var(--es-red-soft) !important; }
.sidebar .nav-item > a,
.sidebar .nav-link,
.sidebar button.nav-link {
  border-radius: 8px !important;
  padding: 0.42rem 0.55rem !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--es-ink-2) !important;
}
.sidebar .nav-link:hover,
.sidebar .nav-item > a:hover {
  background: var(--es-red-soft) !important;
  color: var(--es-red-deep) !important;
}
.sidebar .nav-item > a.active,
.sidebar .nav-item > button.active,
.sidebar .nav-link.active {
  background: var(--es-red) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.sidebar .nav-link.active span,
.sidebar .nav-link.active .text-black,
.sidebar .nav-item > a.active span {
  color: #fff !important;
}
.sidebar .nav-link .text-black,
.sidebar span.text-black {
  color: var(--es-ink-2) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
}
.sidebar ul.sub-menu {
  padding: 0.1rem 0 0.25rem 0.15rem !important;
  margin: 0 !important;
}
.sidebar ul.sub-menu li a,
.sidebar ul.sub-menu li button {
  display: block !important;
  padding: 0.38rem 0.55rem 0.38rem 0.85rem !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: var(--es-ink-2) !important;
  border-left: 2px solid transparent !important;
}
.sidebar ul.sub-menu li a:hover,
.sidebar ul.sub-menu li button:hover {
  background: var(--es-red-soft) !important;
  color: var(--es-red-deep) !important;
}
.sidebar ul.sub-menu li a.active,
.sidebar ul.sub-menu li button.active {
  background: var(--es-red) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-left-color: var(--es-red-deep) !important;
}
.sidebar svg path,
.sidebar svg circle,
.sidebar svg line {
  stroke: currentColor !important;
}
.sidebar .btn.logOut,
.sidebar a.logOut {
  width: calc(100% - 0.5rem) !important;
  margin: 0.5rem 0.25rem 1rem !important;
  border-radius: 8px !important;
  border: 1px solid var(--es-red-line) !important;
  background: var(--es-red-soft) !important;
  color: var(--es-red-deep) !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
}
.sidebar .btn.logOut:hover {
  background: var(--es-red) !important;
  color: #fff !important;
  border-color: var(--es-red) !important;
}
/* Logout pinned bottom-left; tenant/logo stack hidden */
.sidebar li.nav-item[style*="position: fixed"] {
  display: none !important;
}
.sidebar li.text-center[style*="position: fixed"] {
  position: fixed !important;
  left: 0 !important;
  width: 260px !important;
  bottom: 1.1rem !important;
  margin: 0 !important;
  z-index: 40 !important;
  padding: 0 0.75rem !important;
  box-sizing: border-box !important;
}
.sidebar .btn.logOut,
.sidebar a.logOut {
  width: 100% !important;
  max-width: 230px !important;
  margin: 0 auto !important;
  display: block !important;
  border-radius: 10px !important;
  border: 1px solid var(--es-red-line) !important;
  background: var(--es-red-soft) !important;
  color: var(--es-red-deep) !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  padding: 0.55rem 0.85rem !important;
  text-align: center !important;
  box-shadow: none !important;
}
.sidebar .btn.logOut:hover,
.sidebar a.logOut:hover {
  background: var(--es-red) !important;
  color: #fff !important;
  border-color: var(--es-red) !important;
}
.dark .sidebar .btn.logOut,
.dark .sidebar a.logOut {
  background: rgba(196, 91, 101, 0.14) !important;
  border-color: var(--es-red-line) !important;
  color: #d4a1a7 !important;
}
.dark .sidebar .btn.logOut:hover,
.dark .sidebar a.logOut:hover {
  background: #8f4650 !important;
  color: #fff !important;
}
.sidebar .companyName,
.sidebar #Token {
  display: none !important;
}
/* Leave room at bottom of menu scroll so last items aren't under logout */
.sidebar ul.perfect-scrollbar {
  padding-bottom: 7.5rem !important;
}

/* ========== Primary color remap ========== */
.text-primary, a.text-primary, .hover\:text-primary:hover { color: var(--es-red) !important; }
.bg-primary, .\!bg-primary { background-color: var(--es-red) !important; }
.bg-primary-light { background-color: var(--es-red-soft) !important; }
.bg-primary\/10 { background-color: rgba(220, 24, 41, 0.1) !important; }
.bg-primary\/20 { background-color: rgba(220, 24, 41, 0.2) !important; }
.bg-primary\/80 { background-color: rgba(220, 24, 41, 0.8) !important; }
.border-primary, .\!border-primary, .border-l-primary, .\!border-l-primary,
.peer-checked\:border-primary:checked { border-color: var(--es-red) !important; }
.peer-checked\:before\:bg-primary:checked::before { background-color: var(--es-red) !important; }
.from-\[\#4361ee\] { --tw-gradient-from: #dc1829 !important; }
.bg-\[\#4361ee\], .hover\:bg-\[\#4361ee\]:hover { background-color: var(--es-red) !important; }

.btn-primary {
  border-color: var(--es-red) !important;
  background: linear-gradient(135deg, var(--es-red-2), var(--es-red)) !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 18px rgba(220, 24, 41, 0.25) !important;
  font-weight: 600 !important;
}
.btn-outline-primary {
  border-color: var(--es-red-line) !important;
  color: var(--es-red) !important;
  background: #fff !important;
  border-radius: 10px !important;
}
.btn-outline-primary:hover {
  background: var(--es-red) !important;
  color: #fff !important;
  border-color: var(--es-red) !important;
}
.btn { border-radius: 10px !important; font-weight: 600 !important; }

/* ========== Panels / cards ========== */
.panel {
  background: var(--es-white) !important;
  border: 1px solid var(--es-line) !important;
  border-radius: var(--es-radius) !important;
  box-shadow: var(--es-shadow) !important;
  padding: 1rem 1.05rem !important;
}
.panel h5, .panel .text-lg.font-semibold {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* ========== Forms ========== */
.form-control, .form-input, input.form-input, select.form-select,
.nice-select, .select2-container--default .select2-selection--single {
  border-radius: 10px !important;
  border-color: var(--es-line) !important;
  font-weight: 500 !important;
}
.form-control:focus, .form-input:focus {
  border-color: var(--es-red) !important;
  box-shadow: 0 0 0 3px rgba(220, 24, 41, 0.15) !important;
  outline: none !important;
}

/* ========== Tables ========== */
.table > :not(caption) > * > * {
  border-bottom-color: var(--es-line) !important;
  padding: 0.62rem 0.5rem !important;
}
.table thead th {
  color: #94a3b8 !important;
  font-size: 0.68rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-weight: 600 !important;
  background: transparent !important;
  border-bottom: 1px solid var(--es-line) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(248, 250, 252, 0.8) !important;
}
table.dataTable thead th, table.dataTable.no-footer {
  border-bottom: 1px solid var(--es-line) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.pagination .page-item.active .page-link,
.page-link.active, .active > .page-link {
  background: var(--es-red) !important;
  border-color: var(--es-red) !important;
  color: #fff !important;
}
.dt-buttons .dt-button, .buttons-html5, .buttons-print {
  border-radius: 8px !important;
  border: 1px solid var(--es-red-line) !important;
  background: var(--es-red-soft) !important;
  color: var(--es-red-deep) !important;
  font-weight: 600 !important;
}

/* ========== Badges / misc ========== */
.badge-outline-primary { border-color: var(--es-red) !important; color: var(--es-red) !important; }
.screen_loader svg { fill: var(--es-red) !important; }
.screen_loader { background: var(--es-bg) !important; }

/* ========== Dashboard tabs ========== */
.es-dash-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
}
.es-dash-head h1 {
  margin: 0; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; color: var(--es-ink);
}
.es-dash-head .es-sub {
  margin: 0.28rem 0 0; color: var(--es-muted); font-size: 0.88rem;
}
.es-eyebrow {
  display: inline-flex; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--es-red); background: var(--es-red-soft);
  border: 1px solid var(--es-red-line); padding: 0.25rem 0.6rem; border-radius: 999px; margin-bottom: 0.4rem;
}
.es-tabs {
  display: flex; gap: 0.3rem; padding: 0.28rem; background: #fff;
  border: 1px solid var(--es-line); border-radius: 999px; box-shadow: var(--es-shadow);
}
.es-tab {
  border: 0; background: transparent; padding: 0.5rem 0.95rem; border-radius: 999px;
  cursor: pointer; font-weight: 600; color: var(--es-muted); font-family: inherit; font-size: 0.82rem;
}
.es-tab.on { background: var(--es-red); color: #fff; }
.es-subtabs { display: flex; gap: 0.35rem; margin: 0 0 0.9rem; flex-wrap: wrap; }
.es-subtab {
  border: 1px solid var(--es-line); background: #fff; padding: 0.38rem 0.8rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; color: var(--es-ink-2); cursor: pointer; font-family: inherit;
}
.es-subtab.on { border-color: var(--es-red); background: var(--es-red-soft); color: var(--es-red-deep); }
.es-panel { display: none; }
.es-panel.on { display: block; animation: es-up 0.22s ease; }
@keyframes es-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.es-kpi-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.9rem; margin-bottom: 1rem; }
.es-kpi {
  grid-column: span 3; background: #fff; border: 1px solid var(--es-line);
  border-radius: var(--es-radius); box-shadow: var(--es-shadow); padding: 1rem 1.05rem;
}
.es-kpi.accent {
  background: linear-gradient(145deg, #fff, #fff7f8); border-color: var(--es-red-line);
}
.es-kpi .label {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--es-muted); font-size: 0.76rem; font-weight: 500;
}
.es-kpi .ico {
  width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  background: var(--es-red-soft); color: var(--es-red); font-size: 0.8rem; font-weight: 700;
}
.es-kpi .value {
  font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em;
  margin: 0.3rem 0 0.1rem; font-variant-numeric: tabular-nums; color: var(--es-ink);
}
.es-kpi .meta { font-size: 0.76rem; color: var(--es-muted); }
.es-note {
  margin: 0 0 1rem; padding: 0.9rem 1rem; border-radius: 12px;
  background: linear-gradient(135deg, var(--es-red-soft), #fff);
  border: 1px solid var(--es-red-line); color: var(--es-red-deep); font-size: 0.84rem;
}
@media (max-width: 1100px) {
  .es-kpi { grid-column: span 6; }
}
@media (max-width: 640px) {
  .es-kpi { grid-column: span 12; }
  .es-tabs { width: 100%; overflow: auto; }
  .es-dash-head h1 { font-size: 1.2rem; }
}

/* ========== DARK ========== */
.dark {
  --es-red: #c45b65;
  --es-red-2: #d97880;
  --es-red-deep: #a84852;
  --es-red-soft: rgba(196, 91, 101, 0.14);
  --es-red-line: rgba(196, 91, 101, 0.32);
  --es-ink: #e8eef7;
  --es-ink-2: #cbd5e1;
  --es-muted: #8b9bb0;
  --es-line: #1c2740;
  --es-bg: #0b1220;
  --es-white: #121a2b;
  --es-shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.28);
}
.dark body.relative,
.dark,
.dark .main-container,
.dark .main-content {
  background:
    radial-gradient(900px 420px at 100% -10%, rgba(196, 91, 101, 0.07), transparent 55%),
    radial-gradient(700px 380px at -5% 20%, rgba(56, 189, 248, 0.04), transparent 50%),
    #080c16 !important;
  color: var(--es-ink) !important;
}
.dark .sidebar > div.h-full { background: #0d1424 !important; }
.dark .sidebar { border-right-color: var(--es-line) !important; }
.dark .sidebar .main-logo span { color: var(--es-ink) !important; }
.dark .sidebar h2 { color: #d4a1a7 !important; }
.dark .sidebar h2:hover { background: rgba(196, 91, 101, 0.1) !important; }
.dark .sidebar .nav-link, .dark .sidebar .nav-item > a,
.dark .sidebar .nav-link .text-black, .dark .sidebar span.text-black {
  color: var(--es-ink-2) !important;
}
.dark .sidebar .nav-link:hover { background: rgba(196, 91, 101, 0.12) !important; color: #e8c4c8 !important; }
.dark .sidebar .nav-item > a.active,
.dark .sidebar .nav-link.active,
.dark .sidebar ul.sub-menu li a.active {
  background: #8f4650 !important; color: #fff !important;
}
.dark .sidebar .btn.logOut, .dark .sidebar a.logOut {
  background: rgba(196, 91, 101, 0.12) !important;
  border-color: var(--es-red-line) !important;
  color: #d4a1a7 !important;
}
.dark .panel { background: #121a2b !important; border-color: var(--es-line) !important; }
.dark .es-tabs { background: #0f172a; border-color: var(--es-line); }
.dark .es-tab.on { background: #8f4650; }
.dark .es-subtab { background: #0f172a; border-color: var(--es-line); color: var(--es-ink-2); }
.dark .es-subtab.on { background: rgba(196, 91, 101, 0.14); color: #e0b4b9; border-color: var(--es-red-line); }
.dark .es-kpi { background: #121a2b; border-color: var(--es-line); }
.dark .es-kpi.accent {
  background: linear-gradient(145deg, #141c2e, #161822); border-color: var(--es-red-line);
}
.dark .es-kpi .value { color: var(--es-ink); }
.dark .es-note {
  background: #141a28; border-color: var(--es-line); color: #c7d2e0;
}
.dark .es-dash-head h1 { color: var(--es-ink); }
.dark .btn-primary {
  background: linear-gradient(135deg, #a85862, #8f4650) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3) !important;
}
.dark .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(15, 23, 42, 0.45) !important;
}
.dark .table thead th { color: #64748b !important; }
.dark .form-control, .dark .form-input {
  background: #0f172a !important; border-color: var(--es-line) !important; color: var(--es-ink) !important;
}
.dark .screen_loader { background: #080c16 !important; }
.dark .screen_loader svg { fill: #c45b65 !important; }
.dark .text-primary { color: #c45b65 !important; }

/* ========== Login ========== */
body.espark-theme .panel.max-w-lg,
body.espark-theme .panel.sm\:w-\[480px\] {
  border-radius: 16px !important;
  border: 1px solid var(--es-line) !important;
  box-shadow: var(--es-shadow) !important;
}
body.espark-theme .main-container .grid.min-h-screen {
  background:
    radial-gradient(900px 420px at 100% -10%, rgba(220, 24, 41, 0.12), transparent 55%),
    radial-gradient(700px 380px at -5% 40%, rgba(220, 24, 41, 0.06), transparent 50%),
    var(--es-bg) !important;
}

/* ========== EsPark DataTables skin ========== */
.dataTables_wrapper {
  font-family: Inter, Nunito, "Segoe UI", sans-serif !important;
  color: var(--es-ink) !important;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  font-size: 0.82rem !important;
  color: var(--es-muted) !important;
  margin-bottom: 0.75rem !important;
}
.dataTables_wrapper .dataTables_filter {
  float: right;
}
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
  font-weight: 500 !important;
  color: var(--es-muted) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
.panel .dataTables_filter input {
  border: 1px solid var(--es-line) !important;
  border-radius: 10px !important;
  padding: 0.45rem 0.75rem !important;
  background: #fff !important;
  color: var(--es-ink) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  margin-left: 0.35rem !important;
  min-height: 36px;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--es-red) !important;
  box-shadow: 0 0 0 3px rgba(220, 24, 41, 0.15) !important;
  outline: none !important;
}

/* Table shell */
table.dataTable,
.table.table-striped.table-bordered,
.table.dt-responsive {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
}
table.dataTable thead th,
.table thead th,
table.dataTable > thead > tr > th {
  background: transparent !important;
  color: #94a3b8 !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-bottom: 1px solid var(--es-line) !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  padding: 0.7rem 0.65rem !important;
  white-space: nowrap;
}
table.dataTable tbody td,
.table tbody td {
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--es-line) !important;
  padding: 0.68rem 0.65rem !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  color: var(--es-ink-2) !important;
  vertical-align: middle !important;
  background: transparent !important;
}
table.dataTable.no-footer,
table.dataTable.table-bordered,
.table-bordered > :not(caption) > * {
  border: 0 !important;
}
table.dataTable.table-bordered th,
table.dataTable.table-bordered td,
.table-bordered > :not(caption) > * > * {
  border-left: 0 !important;
  border-right: 0 !important;
}
table.dataTable.stripe tbody tr.odd > *,
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(248, 250, 252, 0.85) !important;
}
table.dataTable.hover tbody tr:hover > *,
table.dataTable tbody tr:hover > *,
.table tbody tr:hover > * {
  background-color: var(--es-red-soft) !important;
  color: var(--es-red-deep) !important;
}
table.dataTable tbody tr.selected > * {
  background-color: rgba(220, 24, 41, 0.12) !important;
  box-shadow: inset 3px 0 0 var(--es-red) !important;
}

/* Sorting icons */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before {
  opacity: 0.45 !important;
}
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  color: var(--es-red-deep) !important;
}

/* Buttons (export / print / colvis) */
.dt-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.65rem !important;
}
.dt-buttons .dt-button,
.dt-button,
a.dt-button,
button.dt-button,
div.dt-buttons button,
.buttons-html5,
.buttons-print,
.buttons-colvis,
.btn.buttons-html5 {
  border-radius: 8px !important;
  border: 1px solid var(--es-red-line) !important;
  background: var(--es-red-soft) !important;
  color: var(--es-red-deep) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  padding: 0.4rem 0.75rem !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.dt-buttons .dt-button:hover,
.dt-button:hover,
a.dt-button:hover {
  background: var(--es-red) !important;
  color: #fff !important;
  border-color: var(--es-red) !important;
}
.dt-button-collection {
  border-radius: 12px !important;
  border: 1px solid var(--es-line) !important;
  box-shadow: var(--es-shadow) !important;
  padding: 0.35rem !important;
}
.dt-button-collection .dt-button {
  width: 100%;
  text-align: left;
  margin-bottom: 0.2rem !important;
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate {
  padding-top: 0.35rem !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--es-muted) !important;
  padding: 0.35rem 0.65rem !important;
  margin: 0 0.12rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--es-red-soft) !important;
  color: var(--es-red-deep) !important;
  border-color: var(--es-red-line) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--es-red) !important;
  color: #fff !important;
  border-color: var(--es-red) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  opacity: 0.4 !important;
  background: transparent !important;
  color: var(--es-muted) !important;
  border-color: transparent !important;
}
/* Bootstrap pagination used alongside DT */
.pagination .page-link {
  border-radius: 8px !important;
  margin: 0 0.12rem !important;
  border-color: var(--es-line) !important;
  color: var(--es-muted) !important;
  font-weight: 600 !important;
}
.pagination .page-item.active .page-link,
.page-link.active,
.active > .page-link {
  background: var(--es-red) !important;
  border-color: var(--es-red) !important;
  color: #fff !important;
}
.pagination .page-link:hover {
  background: var(--es-red-soft) !important;
  color: var(--es-red-deep) !important;
  border-color: var(--es-red-line) !important;
}

/* Processing / empty */
.dataTables_processing,
#report_table_processing,
#detail_table_processing,
#cash_table_processing,
div.dataTables_wrapper div.dataTables_processing {
  background: #fff !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--es-shadow) !important;
  color: var(--es-ink) !important;
  font-weight: 600 !important;
  padding: 1rem 1.25rem !important;
}
table.dataTable td.dataTables_empty {
  color: var(--es-muted) !important;
  font-weight: 500 !important;
  padding: 1.5rem !important;
}

/* Responsive child */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  background-color: var(--es-red) !important;
  border: 0 !important;
  box-shadow: none !important;
}
table.dataTable > tbody > tr.child ul.dtr-details > li {
  border-bottom-color: var(--es-line) !important;
}
table.dataTable > tbody > tr.child span.dtr-title {
  color: var(--es-muted) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

/* Scroll body inside panels */
.dataTables_scrollHeadInner,
.dataTables_scrollHead table,
.dataTables_scrollBody table {
  background: transparent !important;
}
.dataTables_scrollBody {
  border-bottom: 1px solid var(--es-line) !important;
}

/* Panel containing tables — tighter card feel */
.panel .table-responsive,
.panel .dataTables_wrapper {
  margin-top: 0.25rem;
}
.panel table.dataTable thead th:first-child,
.panel .table thead th:first-child {
  padding-left: 0.85rem !important;
}

/* Dark */
.dark .dataTables_wrapper .dataTables_filter input,
.dark .dataTables_wrapper .dataTables_length select {
  background: #0f172a !important;
  border-color: var(--es-line) !important;
  color: var(--es-ink) !important;
}
.dark table.dataTable thead th,
.dark .table thead th {
  color: #64748b !important;
  border-bottom-color: var(--es-line) !important;
}
.dark table.dataTable tbody td,
.dark .table tbody td {
  color: var(--es-ink-2) !important;
  border-bottom-color: var(--es-line) !important;
}
.dark table.dataTable.stripe tbody tr.odd > *,
.dark .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(15, 23, 42, 0.45) !important;
}
.dark table.dataTable tbody tr:hover > *,
.dark .table tbody tr:hover > * {
  background-color: rgba(196, 91, 101, 0.14) !important;
  color: #e8c4c8 !important;
}
.dark .dt-buttons .dt-button,
.dark .dt-button {
  background: rgba(196, 91, 101, 0.14) !important;
  border-color: var(--es-red-line) !important;
  color: #d4a1a7 !important;
}
.dark .dt-buttons .dt-button:hover {
  background: #8f4650 !important;
  color: #fff !important;
}
.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #8f4650 !important;
  border-color: #8f4650 !important;
}
.dark .dataTables_processing,
.dark #report_table_processing,
.dark #detail_table_processing,
.dark #cash_table_processing {
  background: #121a2b !important;
  border-color: var(--es-line) !important;
  color: var(--es-ink) !important;
}
.dark .pagination .page-link {
  background: #0f172a !important;
  border-color: var(--es-line) !important;
  color: var(--es-muted) !important;
}
.dark .pagination .page-item.active .page-link {
  background: #8f4650 !important;
  border-color: #8f4650 !important;
  color: #fff !important;
}

/* ========== DT processing + expand control (force theme, beat plugin CSS) ========== */
:root,
html,
body,
.dataTables_wrapper,
table.dataTable {
  --dt-row-selected: 220, 24, 41;
  --dt-row-selected-text: 255, 255, 255;
  --dt-row-selected-link: 163, 16, 30;
}
.dark,
.dark .dataTables_wrapper,
.dark table.dataTable {
  --dt-row-selected: 143, 70, 80;
  --dt-row-selected-text: 255, 255, 255;
  --dt-row-selected-link: 232, 196, 200;
}

/* Processing card */
div.dataTables_wrapper div.dataTables_processing,
.dataTables_processing,
#report_table_processing,
#detail_table_processing,
#cash_table_processing {
  top: 50% !important;
  left: 50% !important;
  width: min(280px, 90%) !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  transform: translate(-50%, -50%) !important;
  padding: 1.1rem 1.35rem 1rem !important;
  text-align: center !important;
  background: linear-gradient(145deg, #ffffff, #fff7f8) !important;
  border: 1px solid var(--es-red-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 36px rgba(220, 24, 41, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06) !important;
  color: var(--es-red-deep) !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  letter-spacing: -0.01em !important;
  z-index: 20 !important;
}
.dark div.dataTables_wrapper div.dataTables_processing,
.dark .dataTables_processing,
.dark #report_table_processing,
.dark #detail_table_processing,
.dark #cash_table_processing {
  background: linear-gradient(145deg, #141c2e, #161822) !important;
  border-color: var(--es-red-line) !important;
  color: #e0b4b9 !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
}

/* Spinner dots — override blue rgb(13,110,253) / --dt-row-selected */
div.dataTables_processing > div:last-child > div,
div.dataTables_wrapper div.dataTables_processing > div:last-child > div {
  background: var(--es-red) !important;
  background-color: var(--es-red) !important;
  box-shadow: 0 0 0 1px rgba(220, 24, 41, 0.15) !important;
}
.dark div.dataTables_processing > div:last-child > div {
  background: #c45b65 !important;
  background-color: #c45b65 !important;
}

/* Responsive + / − control (both dtr-control and dt-control) */
table.dataTable td.dt-control,
table.dataTable th.dt-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control,
table.dataTable.dtr-column > tbody > tr > td.dtr-control,
table.dataTable.dtr-column > tbody > tr > th.dtr-control {
  cursor: pointer !important;
}
table.dataTable td.dt-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before,
table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-column > tbody > tr > th.dtr-control:before,
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control:before {
  background: linear-gradient(145deg, var(--es-red-2), var(--es-red)) !important;
  background-color: var(--es-red) !important;
  border: 0 !important;
  border-radius: 9px !important;
  box-shadow: 0 4px 12px rgba(220, 24, 41, 0.28) !important;
  color: #fff !important;
  font-weight: 700 !important;
  line-height: 1.1em !important;
  height: 1.15em !important;
  width: 1.15em !important;
  margin-top: -0.55em !important;
}
table.dataTable tr.dt-hasChild td.dt-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before,
table.dataTable.dtr-column > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-column > tbody > tr.parent > th.dtr-control:before {
  content: "−" !important;
  background: linear-gradient(145deg, var(--es-red-deep), #7a0c16) !important;
  background-color: var(--es-red-deep) !important;
  box-shadow: 0 2px 8px rgba(163, 16, 30, 0.35) !important;
}
.dark table.dataTable td.dt-control:before,
.dark table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
.dark table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  background: linear-gradient(145deg, #d97880, #8f4650) !important;
  background-color: #8f4650 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
.dark table.dataTable tr.dt-hasChild td.dt-control:before,
.dark table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
.dark table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
  background: linear-gradient(145deg, #a84852, #6e3038) !important;
  background-color: #a84852 !important;
}

/* Child detail row */
table.dataTable > tbody > tr.child {
  background: linear-gradient(180deg, var(--es-red-soft), transparent) !important;
}
table.dataTable > tbody > tr.child td.child {
  padding: 0.85rem 1rem 1rem 2.25rem !important;
}
table.dataTable > tbody > tr.child ul.dtr-details {
  display: grid !important;
  gap: 0.35rem !important;
  width: 100% !important;
}
table.dataTable > tbody > tr.child ul.dtr-details > li {
  border: 0 !important;
  border-bottom: 1px dashed var(--es-line) !important;
  padding: 0.4rem 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}
table.dataTable > tbody > tr.child span.dtr-title {
  color: var(--es-muted) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.04em !important;
}
table.dataTable > tbody > tr.child span.dtr-data {
  color: var(--es-ink) !important;
  font-weight: 600 !important;
  font-size: 0.84rem !important;
}
.dark table.dataTable > tbody > tr.child {
  background: rgba(196, 91, 101, 0.08) !important;
}
.dark table.dataTable > tbody > tr.child span.dtr-data {
  color: var(--es-ink) !important;
}
/* Shift cards — full bleed like original, red theme */
#shiftDiv .es-shift-card {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: 0 8px 22px rgba(220, 24, 41, 0.22) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
#shiftDiv .es-shift-card.panel,
#shiftDiv .panel.es-shift-card {
  padding: 0 !important;
  background: transparent !important;
}
#shiftDiv .es-shift-card__body {
  background: linear-gradient(160deg, #ef3340 0%, #c41222 55%, #8a0e18 100%) !important;
  padding: 2rem 1.15rem 1.1rem !important;
  min-height: 250px !important;
  margin: 0 !important;
}
#shiftDiv .es-shift-card__foot {
  background: #f3f4f6 !important;
  padding: 0.55rem 0.65rem !important;
}
#shiftDiv .es-shift-card__foot .btn {
  background: #dc1829 !important;
  border-color: #dc1829 !important;
  color: #fff !important;
}
.dark #shiftDiv .es-shift-card__body {
  background: linear-gradient(160deg, #d97880, #8f4650, #5c2a32) !important;
}
.dark #shiftDiv .es-shift-card__foot {
  background: #1a2234 !important;
}

/* Shift cards - full bleed like original, red theme */
#shiftDiv {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.85rem !important;
  align-items: stretch !important;
}
/* Outer white panel frame -> gone */
#shiftDiv > .panel,
#shiftDiv > div.panel,
#shiftDiv .es-shift-card.panel,
#shiftDiv .panel.es-shift-card {
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  flex: 0 0 200px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: #c41222 !important;
  box-shadow: 0 6px 18px rgba(220, 24, 41, 0.28) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
#shiftDiv > .es-shift-card {
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  flex: 0 0 200px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: #c41222 !important;
  box-shadow: 0 6px 18px rgba(220, 24, 41, 0.28) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
/* Force red body (kills red->navy gradient) */
#shiftDiv .es-shift-card__body,
#shiftDiv > .panel > div:first-child,
#shiftDiv > .panel > .relative,
#shiftDiv > .panel > [class*="bg-gradient"],
#shiftDiv > .panel > [class*="from-"] {
  background: linear-gradient(160deg, #ef3340 0%, #c41222 55%, #8a0e18 100%) !important;
  background-image: linear-gradient(160deg, #ef3340 0%, #c41222 55%, #8a0e18 100%) !important;
  color: #fff !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding-top: 1.75rem !important;
  min-height: 220px !important;
}
#shiftDiv .es-shift-card__foot,
#shiftDiv > .panel > div:last-child {
  background: #eceff3 !important;
  margin: 0 !important;
  padding: 0.5rem 0.55rem !important;
  border: 0 !important;
}
/* Purple Detaylar -> red */
#shiftDiv .btn,
#shiftDiv button,
#shiftDiv .btn-secondary,
#shiftDiv .btn-outline-primary,
#shiftDiv .btn-primary,
#shiftDiv a.btn {
  background: #dc1829 !important;
  background-color: #dc1829 !important;
  border: 1px solid #dc1829 !important;
  border-color: #dc1829 !important;
  color: #fff !important;
  box-shadow: none !important;
  width: 100% !important;
  font-weight: 700 !important;
}
#shiftDiv .btn:hover,
#shiftDiv button:hover {
  background: #a3101e !important;
  border-color: #a3101e !important;
  color: #fff !important;
}
/* Battery white box -> clear */
#shiftDiv .batarya {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
#shiftDiv .batarya span {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff !important;
  font-weight: 900 !important;
}
.dark #shiftDiv > .panel,
.dark #shiftDiv > .es-shift-card {
  background: #8a3038 !important;
}
.dark #shiftDiv .es-shift-card__body,
.dark #shiftDiv > .panel > div:first-child {
  background: linear-gradient(160deg, #c45b65 0%, #8a3038 55%, #5c1c22 100%) !important;
  background-image: linear-gradient(160deg, #c45b65 0%, #8a3038 55%, #5c1c22 100%) !important;
}
.dark #shiftDiv .es-shift-card__foot,
.dark #shiftDiv > .panel > div:last-child {
  background: #1a2234 !important;
}

/* Cadde map full width - no left summary */
#esCaddeMapRow {
  display: block !important;
  width: 100% !important;
}
#esCaddeMapRow .panel {
  width: 100% !important;
  max-width: 100% !important;
}
#map {
  width: 100% !important;
  min-height: 420px !important;
  height: min(70vh, 640px) !important;
}
#esCaddeSummarySources {
  display: none !important;
}

/* KPI stacked amounts */
.es-kpi { overflow: hidden; min-width: 0; }
.es-kpi .value {
  font-size: clamp(1.05rem, 1.6vw, 1.55rem);
  line-height: 1.25;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}
.es-kpi .value.es-kpi-stack {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin-top: 0.45rem;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0;
}
.es-kpi .value.es-kpi-stack .es-kpi-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}
.es-kpi .value.es-kpi-stack .es-kpi-row span {
  color: var(--es-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.es-kpi .value.es-kpi-stack .es-kpi-row b {
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}
.es-kpi .value.es-kpi-stack .es-kpi-count {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.15rem;
}
.es-kpi .meta {
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Dashboard date nav */
.es-dash-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; justify-content: space-between; }
.es-dash-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.65rem; }

/* Theme toggle next to date */
.es-dash-tools { display: inline-flex; align-items: center; gap: 0.45rem; }
.es-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.35rem; border-radius: 12px;
  background: #fff; border: 1px solid var(--es-line); box-shadow: var(--es-shadow);
}
.es-theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  color: var(--es-ink); text-decoration: none;
}
.es-theme-btn:hover { color: var(--es-red); background: rgba(220,24,41,0.06); }
.dark .es-theme-toggle { background: #121a2b; border-color: var(--es-line); }
.dark .es-theme-btn { color: var(--es-ink); }

.es-date-nav {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.45rem; border-radius: 12px;
  background: #fff; border: 1px solid var(--es-line); box-shadow: var(--es-shadow);
}
.es-date-btn, .es-date-today {
  border: 1px solid var(--es-line); background: #fff; color: var(--es-ink);
  border-radius: 8px; min-width: 34px; height: 34px; font-weight: 700; cursor: pointer;
}
.es-date-btn:hover, .es-date-today:hover { border-color: var(--es-red); color: var(--es-red); }
.es-date-today { padding: 0 0.7rem; font-size: 0.8rem; min-width: auto; }
.es-date-input {
  border: 1px solid var(--es-line); border-radius: 8px; height: 34px;
  padding: 0 0.5rem; font-weight: 600; color: var(--es-ink); background: #fff;
}

/* Dashboard tarih aralığı (Bugün / Yarın / Bu hafta / Bu ay / Özel) */
.es-range-nav {
  flex-wrap: wrap;
  gap: 0.45rem;
  max-width: min(100%, 720px);
}
.es-range-presets {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.es-range-btn {
  border: 1px solid var(--es-line);
  background: #fff;
  color: var(--es-ink);
  border-radius: 8px;
  height: 34px;
  padding: 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.es-range-btn:hover { border-color: var(--es-red); color: var(--es-red); }
.es-range-btn.on {
  background: var(--es-red);
  border-color: var(--es-red);
  color: #fff;
}
.es-range-custom {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.es-range-custom[hidden] { display: none !important; }
.es-range-sep { color: var(--es-muted, #888); font-weight: 700; }
.es-range-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--es-muted, #666);
  padding: 0 0.35rem;
  white-space: nowrap;
}
.es-date-nav.is-busy { opacity: 0.65; pointer-events: none; }

.dark .es-date-nav, .dark .es-date-btn, .dark .es-date-today, .dark .es-date-input {
  background: #121a2b; border-color: var(--es-line); color: var(--es-ink);
}

/* Dashboard loading */
.es-dash-loading {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.28); backdrop-filter: blur(2px);
}
.es-dash-loading[hidden] { display: none !important; }
.es-dash-loading-card {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.9rem 1.25rem; border-radius: 14px;
  background: #fff; border: 1px solid var(--es-line); box-shadow: var(--es-shadow);
  font-weight: 600; color: var(--es-ink);
}
.dark .es-dash-loading-card { background: #121a2b; }
.es-dash-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid #f1d0d3; border-top-color: var(--es-red);
  animation: es-spin 0.7s linear infinite;
}
@keyframes es-spin { to { transform: rotate(360deg); } }
.es-date-nav.is-busy { opacity: 0.65; pointer-events: none; }
body.es-dash-loading-on .es-panel { opacity: 0.55; transition: opacity 0.15s ease; }


/* EsPark form-checkbox / DataTables checkboxes + switches */
/* Exclude custom_switch toggles from square checkbox skin */
table.dataTable input[type="checkbox"]:not(.custom_switch),
table.dataTable input[type="radio"]:not(.custom_switch),
.dataTables_wrapper input[type="checkbox"]:not(.custom_switch),
.dataTables_wrapper input[type="radio"]:not(.custom_switch),
.form-checkbox:not(.custom_switch),
.form-radio:not(.custom_switch) {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  min-width: 1.15rem !important;
  min-height: 1.15rem !important;
  max-width: 1.15rem !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
  border: 1.5px solid #94a3b8 !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--es-red) !important;
}
.form-checkbox:not(.custom_switch),
table.dataTable input[type="checkbox"]:not(.custom_switch),
.dataTables_wrapper input[type="checkbox"]:not(.custom_switch) {
  border-radius: 4px !important;
}
.form-radio:not(.custom_switch),
table.dataTable input[type="radio"]:not(.custom_switch),
.dataTables_wrapper input[type="radio"]:not(.custom_switch) {
  border-radius: 999px !important;
}
.form-checkbox:not(.custom_switch):hover,
.form-radio:not(.custom_switch):hover,
table.dataTable input[type="checkbox"]:not(.custom_switch):hover,
table.dataTable input[type="radio"]:not(.custom_switch):hover {
  border-color: var(--es-red) !important;
}
.form-checkbox:not(.custom_switch):focus,
.form-radio:not(.custom_switch):focus,
table.dataTable input[type="checkbox"]:not(.custom_switch):focus,
table.dataTable input[type="radio"]:not(.custom_switch):focus {
  outline: none !important;
  border-color: var(--es-red) !important;
  box-shadow: 0 0 0 3px rgba(220, 24, 41, 0.2) !important;
}
.form-checkbox:not(.custom_switch):checked,
.form-radio:not(.custom_switch):checked,
table.dataTable input[type="checkbox"]:not(.custom_switch):checked,
table.dataTable input[type="radio"]:not(.custom_switch):checked {
  background-color: var(--es-red) !important;
  border-color: var(--es-red) !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.form-checkbox:not(.custom_switch):checked,
table.dataTable input[type="checkbox"]:not(.custom_switch):checked {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E") !important;
}
.form-radio:not(.custom_switch):checked,
table.dataTable input[type="radio"]:not(.custom_switch):checked {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E") !important;
}
.form-checkbox.outline-primary:not(.custom_switch):checked,
.form-checkbox.text-warning:not(.custom_switch):checked {
  background-color: var(--es-red) !important;
  border-color: var(--es-red) !important;
  color: var(--es-red) !important;
}
.form-checkbox:not(.custom_switch):disabled,
.form-radio:not(.custom_switch):disabled,
table.dataTable input[type="checkbox"]:not(.custom_switch):disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}
.dark .form-checkbox:not(.custom_switch),
.dark .form-radio:not(.custom_switch),
.dark table.dataTable input[type="checkbox"]:not(.custom_switch),
.dark table.dataTable input[type="radio"]:not(.custom_switch) {
  background-color: #121a2b !important;
  border-color: #475569 !important;
}
.dark .form-checkbox:not(.custom_switch):checked,
.dark .form-radio:not(.custom_switch):checked,
.dark table.dataTable input[type="checkbox"]:not(.custom_switch):checked,
.dark table.dataTable input[type="radio"]:not(.custom_switch):checked {
  background-color: var(--es-red) !important;
  border-color: var(--es-red) !important;
}

/* Label spacing — text was glued to the box */
.form-checkbox:not(.custom_switch) + label,
.form-radio:not(.custom_switch) + label,
input[type="checkbox"]:not(.custom_switch) + label,
input[type="radio"]:not(.custom_switch) + label,
label .form-checkbox:not(.custom_switch),
label .form-radio:not(.custom_switch),
label > input[type="checkbox"]:not(.custom_switch),
label > input[type="radio"]:not(.custom_switch) {
  margin-inline-end: 0.55rem !important;
}
label:has(> .form-checkbox:not(.custom_switch)),
label:has(> .form-radio:not(.custom_switch)),
label:has(> input[type="checkbox"]:not(.custom_switch)),
label:has(> input[type="radio"]:not(.custom_switch)) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  cursor: pointer;
}
.form-check {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
}
.form-check .form-check-input,
.form-check .form-checkbox,
.form-check .form-radio {
  margin: 0 !important;
}
.form-check-label,
label.form-check-label {
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
}
/* Common filter row: checkbox then bare text / sibling label */
table.dataTable td label,
.dataTables_wrapper label {
  gap: 0.55rem;
}
table.dataTable td label:has(input[type="checkbox"]:not(.custom_switch)),
table.dataTable td label:has(input[type="radio"]:not(.custom_switch)) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
}

/* custom_switch — restore toggle (do not look like square checkbox) */
input.custom_switch {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}
label.w-12.h-6.relative,
label.w-12.h-6.relative.inline-block,
table.dataTable label.w-12.h-6.relative,
.dataTables_wrapper label.w-12.h-6.relative {
  display: inline-block !important;
  width: 3rem !important;
  height: 1.5rem !important;
  min-width: 3rem !important;
  vertical-align: middle !important;
  margin: 0.15rem 0.35rem 0.15rem 0 !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
/* Track — off = muted gray, clearly "pasif" */
.outline_checkbox,
span.outline_checkbox,
label.w-12.h-6.relative > span,
table.dataTable label.w-12.h-6.relative > span {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 999px !important;
  border: 2px solid #94a3b8 !important;
  background: #cbd5e1 !important;
  box-sizing: border-box !important;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  pointer-events: none !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12) !important;
}
.dark .outline_checkbox,
.dark label.w-12.h-6.relative > span,
.dark table.dataTable label.w-12.h-6.relative > span {
  background: #334155 !important;
  border-color: #64748b !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
/* Knob */
label.w-12.h-6.relative > span::before,
.outline_checkbox::before {
  content: "" !important;
  position: absolute !important;
  left: 0.2rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1rem !important;
  height: 1rem !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.35) !important;
  transition: left 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
}
/* On — strong EsPark red = aktif */
input.custom_switch.peer:checked ~ span,
input.custom_switch.peer:checked + span {
  background: var(--es-red) !important;
  border-color: #a3101e !important;
  box-shadow: 0 0 0 3px rgba(220, 24, 41, 0.28), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
input.custom_switch.peer:checked ~ span::before,
input.custom_switch.peer:checked + span::before {
  left: calc(100% - 1.2rem) !important;
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(127, 10, 20, 0.45) !important;
}
.dark input.custom_switch.peer:checked ~ span,
.dark input.custom_switch.peer:checked + span {
  background: #e11d2e !important;
  border-color: #fecaca !important;
  box-shadow: 0 0 0 3px rgba(225, 29, 46, 0.35) !important;
}

/* Tailwind peer helpers used by some switch spans */
.peer:checked ~ .outline_checkbox,
.peer:checked + .outline_checkbox,
.peer:checked ~ span.bg-icon,
.peer:checked + span.bg-icon {
  background-color: var(--es-red) !important;
  border-color: #a3101e !important;
}
.peer:checked ~ .border-primary,
.peer:checked ~ .peer-checked\:border-primary {
  border-color: #a3101e !important;
}

/* DataTable switches — force aktif/pasif (overrides Tailwind before:/peer-checked utilities) */
table.dataTable label.w-12.h-6.relative,
.dataTables_wrapper label.w-12.h-6.relative {
  display: inline-block !important;
  width: 3rem !important;
  height: 1.5rem !important;
  min-width: 3rem !important;
  position: relative !important;
  vertical-align: middle !important;
  margin: 0.2rem 0 !important;
}
table.dataTable label.w-12.h-6.relative > span,
table.dataTable label.w-12.h-6.relative > span.outline_checkbox,
table.dataTable label.w-12.h-6.relative > span.bg-icon,
.dataTables_wrapper label.w-12.h-6.relative > span {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 999px !important;
  border: 2px solid #94a3b8 !important;
  background: #cbd5e1 !important;
  background-image: none !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12) !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}
table.dataTable label.w-12.h-6.relative > span::before,
table.dataTable label.w-12.h-6.relative > span.outline_checkbox::before,
.dataTables_wrapper label.w-12.h-6.relative > span::before {
  content: "" !important;
  position: absolute !important;
  left: 0.2rem !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 1rem !important;
  height: 1rem !important;
  border-radius: 999px !important;
  background: #fff !important;
  background-image: none !important;
  background-color: #fff !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.35) !important;
  transition: left 0.2s ease !important;
}
table.dataTable input.custom_switch.peer:checked + span,
table.dataTable input.custom_switch.peer:checked ~ span,
table.dataTable input.custom_switch:checked + span,
.dataTables_wrapper input.custom_switch.peer:checked + span,
.dataTables_wrapper input.custom_switch.peer:checked ~ span {
  background: #dc1829 !important;
  background-image: none !important;
  border-color: #a3101e !important;
  box-shadow: 0 0 0 3px rgba(220, 24, 41, 0.3), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
table.dataTable input.custom_switch.peer:checked + span::before,
table.dataTable input.custom_switch.peer:checked ~ span::before,
table.dataTable input.custom_switch:checked + span::before,
.dataTables_wrapper input.custom_switch.peer:checked + span::before,
.dataTables_wrapper input.custom_switch.peer:checked ~ span::before {
  left: calc(100% - 1.2rem) !important;
  background: #fff !important;
  background-image: none !important;
  background-color: #fff !important;
  box-shadow: 0 2px 6px rgba(127, 10, 20, 0.45) !important;
}
.dark table.dataTable label.w-12.h-6.relative > span {
  background: #334155 !important;
  border-color: #64748b !important;
}
.dark table.dataTable input.custom_switch.peer:checked + span,
.dark table.dataTable input.custom_switch:checked + span {
  background: #e11d2e !important;
  border-color: #fecaca !important;
}

/* Login page */
.es-login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: #f8fafc;
}
.es-login-brand {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #7f0a14 0%, #dc1829 42%, #a3101e 100%);
  color: #fff;
  padding: 3rem 3.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.es-login-brand::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 10% 20%, rgba(255,255,255,0.18), transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 80%, rgba(0,0,0,0.2), transparent 50%);
  pointer-events: none;
}
.es-login-brand-inner { position: relative; z-index: 1; max-width: 34rem; }
.es-login-brand .es-login-logo {
  width: min(220px, 55%);
  filter: brightness(0) invert(1);
  margin-bottom: 2rem;
}
.es-login-brand h1 {
  font-size: clamp(1.65rem, 2.8vw, 2.25rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0.75rem 0 1.1rem;
}
.es-login-lead {
  font-size: 0.95rem;
  line-height: 1.65;
  opacity: 0.93;
  margin: 0 0 0.85rem;
}
.es-login-lead-last { margin-bottom: 0; opacity: 0.88; }
.es-login-brand-foot {
  position: relative; z-index: 1;
  font-size: 0.8rem;
  opacity: 0.75;
  margin-top: 2rem;
}
.es-login-panel-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  background: #f8fafc;
  overflow: hidden;
}
.es-login-bg { /* parking entrance */
  position: absolute;
  inset: 0;
  background-image: url('../images/espark-login-parking.png');
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  filter: grayscale(0.15) contrast(1.05);
  pointer-events: none;
  z-index: 0;
}
.es-login-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(248,250,252,0.35), rgba(248,250,252,0.72));
  pointer-events: none;
}
.es-login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--es-line, #e2e8f0);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
  padding: 2rem 1.75rem 1.75rem;
}
.es-login-card .es-eyebrow {
  margin: 0 0 0.65rem;
  display: inline-flex;
}
.es-login-card h2 {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--es-ink, #0f172a);
  margin: 0 0 0.35rem;
  letter-spacing: -0.02em;
}
.es-login-card .es-login-sub {
  color: var(--es-muted, #64748b);
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
}
.es-login-card label {
  display: block;
  font-weight: 600;
  color: var(--es-ink-2, #334155);
  margin-bottom: 0.4rem;
}
.es-login-card .form-input {
  border-radius: 12px !important;
  border: 1px solid var(--es-line, #e2e8f0) !important;
  min-height: 44px;
  padding: 0.65rem 0.9rem !important;
  width: 100%;
}
.es-login-card .form-input:focus {
  border-color: var(--es-red, #dc1829) !important;
  box-shadow: 0 0 0 3px rgba(220, 24, 41, 0.15) !important;
}
.es-login-card .btn-primary {
  min-height: 46px;
  border-radius: 12px !important;
  font-weight: 700 !important;
  margin-top: 0.35rem;
}
.es-login-card .es-login-meta {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.78rem;
  color: #94a3b8;
}
@media (max-width: 900px) {
  .es-login-page { grid-template-columns: 1fr; }
  .es-login-brand { min-height: auto; padding: 2rem 1.5rem; }
  .es-login-brand .es-login-logo { width: 140px; margin-bottom: 1rem; }
  .es-login-brand h1 { font-size: 1.45rem; }
  .es-login-bg { opacity: 0.12; }
}

/* Carparks PTS tabs in toolbar */
#esPtsTabs { width: auto; flex: 0 0 auto; overflow: visible; }
#esPtsTabs .es-tab { white-space: nowrap; }

/* EsParkPTS otopark wizard */
.es-otopark-modal {
  max-width: 46rem !important;
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  border: 1px solid var(--es-line);
}
.es-wiz-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.35rem 0.85rem;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border-bottom: 1px solid var(--es-line);
  position: relative;
}
.es-wiz-header::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--es-red), #9f1239);
}
.es-wiz-header-text { padding-left: 0.35rem; }
.es-wiz-header .es-eyebrow { margin-bottom: 0.35rem; }
.es-wiz-title {
  font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--es-ink); line-height: 1.25;
}
.es-wiz-close {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--es-line);
  background: #fff; color: var(--es-muted); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex: 0 0 auto;
}
.es-wiz-close:hover { color: var(--es-red); border-color: var(--es-red); background: var(--es-red-soft); }
.es-wiz-chrome {
  padding: 1rem 1.35rem 0.35rem;
  background: #f8fafc;
  border-bottom: 1px solid var(--es-line);
}
.es-wiz-steps {
  display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0;
  flex-wrap: nowrap; overflow-x: auto;
}
.es-wiz-step {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.75rem; border-radius: 999px;
  border: 1px solid transparent; background: transparent;
  color: var(--es-muted); font-size: 0.8rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: 0.15s ease;
  user-select: none;
}
.es-wiz-step .n {
  width: 1.55rem; height: 1.55rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e2e8f0; color: #475569; font-size: 0.72rem; font-weight: 800;
}
.es-wiz-step.on {
  background: #fff; border-color: var(--es-red-line, #fecdd3);
  color: var(--es-red-deep, #9f1239);
  box-shadow: 0 4px 14px rgba(220, 24, 41, 0.12);
}
.es-wiz-step.on .n { background: var(--es-red); color: #fff; }
.es-wiz-step.done .n { background: #16a34a; color: #fff; }
.es-wiz-rail {
  flex: 1 1 18px; min-width: 12px; height: 2px; margin: 0 0.15rem;
  background: #e2e8f0; border-radius: 999px; list-style: none;
}
.es-wiz-step.on ~ .es-wiz-rail { /* no-op */ }
.es-wiz-hint {
  margin: 0.65rem 0 0.25rem; font-size: 0.84rem; color: var(--es-muted);
  font-weight: 500;
}
.es-wiz-body { padding-top: 1rem !important; background: #fff; }
.es-wiz-form {
  padding-right: 0.25rem;
  scrollbar-width: thin;
}
#otoparkModal.es-wiz-active #modal-form .grid.grid-cols-2 > .form-label,
#otoparkModal.es-wiz-active #modal-form .grid.grid-cols-2 > label.form-label {
  text-align: left !important;
  justify-self: start;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--es-ink-2, #334155);
}
#otoparkModal.es-wiz-active #modal-form .grid.grid-cols-1.gap-4 > .grid,
#otoparkModal.es-wiz-active #modal-form .grid.grid-cols-1.gap-4 > .card {
  background: #f8fafc;
  border: 1px solid var(--es-line);
  border-radius: 14px;
  padding: 0.85rem 0.95rem;
  margin: 0 !important;
}
#otoparkModal.es-wiz-active #modal-form .form-input,
#otoparkModal.es-wiz-active #modal-form select.form-input {
  border-radius: 10px !important;
  min-height: 40px;
  border-color: var(--es-line) !important;
  background: #fff !important;
}
#otoparkModal.es-wiz-active #modal-form .form-input:focus {
  border-color: var(--es-red) !important;
  box-shadow: 0 0 0 3px rgba(220, 24, 41, 0.12) !important;
}
#otoparkModal.es-wiz-active #map {
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--es-line);
  margin-top: 0.5rem;
}
.es-wiz-summary {
  border: 1px solid var(--es-line); border-radius: 16px; padding: 1.15rem 1.2rem;
  background: linear-gradient(180deg, #fff, #f8fafc);
  box-shadow: var(--es-shadow);
}
.es-wiz-summary h3 {
  margin: 0 0 0.9rem; font-size: 1.05rem; font-weight: 800; color: var(--es-ink);
  letter-spacing: -0.02em;
}
.es-wiz-dl { display: grid; gap: 0.5rem; margin: 0; }
.es-wiz-dl > div {
  display: grid; grid-template-columns: 7.2rem 1fr; gap: 0.55rem;
  padding: 0.55rem 0.7rem; border-radius: 10px; background: #fff;
  border: 1px solid var(--es-line); font-size: 0.88rem;
}
.es-wiz-dl dt { color: var(--es-muted); font-weight: 600; margin: 0; }
.es-wiz-dl dd { margin: 0; color: var(--es-ink); font-weight: 700; word-break: break-word; }
.es-wiz-note {
  margin: 1rem 0 0; font-size: 0.82rem; color: var(--es-muted); line-height: 1.5;
  padding: 0.7rem 0.85rem; border-radius: 12px; background: var(--es-red-soft);
  border: 1px solid var(--es-red-line, #fecdd3); color: var(--es-red-deep, #9f1239);
}
.es-wiz-footer {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.65rem;
  margin: 0 !important; padding: 0.9rem 1.25rem 1.1rem;
  border-top: 1px solid var(--es-line); background: #f8fafc;
}
.es-wiz-footer .btn { border-radius: 11px !important; min-height: 40px; font-weight: 700 !important; padding-left: 1rem; padding-right: 1rem; }
.es-wiz-footer .btn-primary { box-shadow: 0 8px 18px rgba(220, 24, 41, 0.22); }
.dark .es-wiz-header, .dark .es-wiz-chrome, .dark .es-wiz-footer { background: #0f172a; border-color: var(--es-line); }
.dark .es-wiz-title { color: var(--es-ink); }
.dark .es-wiz-step.on { background: #121a2b; }
.dark .es-wiz-summary, .dark .es-wiz-dl > div { background: #121a2b; }
.dark #otoparkModal.es-wiz-active #modal-form .grid.grid-cols-1.gap-4 > .grid,
.dark #otoparkModal.es-wiz-active #modal-form .grid.grid-cols-1.gap-4 > .card {
  background: #121a2b;
}

/* Collapsible dashboard widgets */
.es-wid { position: relative; }
.es-wid-tools {
  position: absolute; top: 0.45rem; right: 0.45rem; z-index: 3;
  display: inline-flex; gap: 0.2rem; opacity: 0; transition: opacity .15s ease;
}
.es-wid:hover .es-wid-tools, .es-wid:focus-within .es-wid-tools { opacity: 1; }
.es-wid-btn {
  width: 1.55rem; height: 1.55rem; border-radius: 8px; border: 1px solid var(--es-line);
  background: #fff; color: var(--es-muted); font-weight: 800; font-size: 0.85rem; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.es-wid-btn:hover { color: var(--es-red); border-color: var(--es-red); background: var(--es-red-soft); }
.es-wid-collapsed .value,
.es-wid-collapsed .meta,
.es-wid-collapsed .es-stat-list,
.es-wid-collapsed .min-h-\[280px\],
.es-wid-collapsed .apexcharts-canvas { display: none !important; }
.es-wid-collapsed { min-height: 0 !important; padding-bottom: 0.55rem !important; }
.es-wid-hidden { display: none !important; }
.es-wid-restore {
  border: 1px solid var(--es-line); background: #fff; color: var(--es-ink);
  border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.78rem; font-weight: 700; cursor: pointer;
  margin-right: 0.5rem;
}
.es-wid-restore:hover { border-color: var(--es-red); color: var(--es-red); }
.dark .es-wid-btn, .dark .es-wid-restore { background: #121a2b; border-color: var(--es-line); color: var(--es-ink); }

/* Otopark haftalik kiysalama: tam genislik paneller */
.es-dash-charts .es-chart-wide {
  grid-column: 1 / -1;
}

.es-dash-wid { position: relative; margin-bottom: 0.25rem; }
.es-wid-dragging { opacity: 0.55; outline: 2px dashed var(--es-red); outline-offset: 4px; }
.es-wid-drop { outline: 2px solid var(--es-red); outline-offset: 2px; }
.es-wid-btn.es-wid-drag { cursor: grab; letter-spacing: -1px; font-weight: 700; }
.es-wid-btn.es-wid-drag:active { cursor: grabbing; }
.es-wid-collapsed .panel,
.es-wid-collapsed .es-kpi-grid,
.es-wid-collapsed .mb-6.grid,
.es-wid-collapsed #map,
.es-wid-collapsed .table-responsive,
.es-wid-collapsed #revenueChart,
.es-wid-collapsed #salesByCategory,
.es-wid-collapsed #otoRevenueChart,
.es-wid-collapsed #otoCountChart,
.es-wid-collapsed #otoDolulukChart,
.es-wid-collapsed #otoPtsChart { display: none !important; }
.es-dash-wid.es-wid-collapsed { min-height: 0; }
.es-kpi.es-wid { cursor: grab; }
.es-kpi.es-wid:active { cursor: grabbing; }

.es-kpi .value.es-oran-good { color: #16a34a; }
.es-kpi .value.es-oran-mid { color: #d97706; }
.es-kpi .value.es-oran-bad { color: var(--es-red); }


/* Dark: dashboard date/range/PDF buttons — keep text readable (white bg + light ink was invisible) */
.dark .es-date-nav { background: #121a2b; border-color: var(--es-line); box-shadow: none; }
.dark .es-date-btn,
.dark .es-date-today,
.dark .es-date-input,
.dark .es-range-btn,
.dark .es-pdf-btn,
.dark .es-fin-excel-btn {
  background: #0f172a;
  border-color: var(--es-line);
  color: var(--es-ink);
}
.dark .es-date-btn:hover,
.dark .es-date-today:hover,
.dark .es-range-btn:hover,
.dark .es-pdf-btn:hover,
.dark .es-fin-excel-btn:hover {
  border-color: var(--es-red);
  color: #e0b4b9;
}
.dark .es-range-btn.on {
  background: #8f4650;
  border-color: #8f4650;
  color: #fff;
}
/* Dashboard PDF export */
.es-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 34px;
  padding: 0 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--es-line);
  background: #fff;
  color: var(--es-ink);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--es-shadow);
  white-space: nowrap;
}
.es-pdf-btn:hover { border-color: var(--es-red); color: var(--es-red); }
.es-pdf-btn.is-busy,
.es-pdf-btn:disabled {
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}

/* PDF export sırasında gereksiz UI’yi gizle */
body.es-pdf-exporting .es-wid-tools,
body.es-pdf-exporting .es-pdf-btn,
body.es-pdf-exporting #esDashLoading,
body.es-pdf-exporting .es-dash-loading {
  display: none !important;
}

#esPdfLiveCapture, #esPdfLiveCapture * { opacity: 1 !important; visibility: visible !important; }
.es-panel.on { opacity: 1 !important; }

/* PDF capture: sıkı yerleşim, haritasız */
#esPdfLiveCapture .es-kpi-grid {
  gap: 8px !important;
}
#esPdfLiveCapture .es-kpi {
  padding: 8px 10px !important;
}
#esPdfLiveCapture [data-wid="cadde-map"],
#esPdfLiveCapture #esCaddeMapRow,
#esPdfLiveCapture #map {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.es-dash-head .es-dash-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--es-red, #c62828);
  line-height: 1.2;
}

.es-fin-excel-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  height: 30px; padding: 0 0.7rem; border-radius: 8px;
  border: 1px solid var(--es-line); background: #fff; color: var(--es-ink);
  font-size: 0.75rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.es-fin-excel-btn:hover { border-color: #16a34a; color: #16a34a; }
.es-fin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }