/* =========================================================
   Admin – Bootstrap 5.3 Unified Theme
========================================================= */

:root{
  --gs-primary: #4f46e5;
  --gs-accent:  #4338ca;
  --gs-primary-rgb: 79,70,229;
}

/* =========================================================
   LIGHT THEME
========================================================= */

html[data-theme="light"]{

  /* Body */
  --bs-body-bg: #f8fafc;              /* jemne chladnejšie než pôvodné */
  --bs-body-color: #0f172a;
  --bs-secondary-color: #64748b;
  --bs-border-color: rgba(15,23,42,.10);

  /* Surfaces */
  --bs-tertiary-bg: #eef2ff;          /* jemný indigo nádych */
  --bs-tertiary-bg-rgb: 238,242,255;

  /* Theme */
  --bs-primary: var(--gs-primary);
  --bs-primary-rgb: var(--gs-primary-rgb);

  --bs-link-color: var(--gs-primary);
  --bs-link-hover-color: var(--gs-accent);
}
/* =========================================================
   DARK THEME – Indigo SaaS
========================================================= */

html[data-theme="dark"]{

  /* Body */
  --bs-body-bg: #0f172a;              /* menej modrý, viac neutrálny */
  --bs-body-color: #e2e8f0;
  --bs-secondary-color: #94a3b8;
  --bs-border-color: rgba(148,163,184,.15);

  --bs-body-bg-rgb: 15,23,42;
  --bs-body-color-rgb: 226,232,240;

  /* Surfaces */
  --bs-tertiary-bg: #1e293b;          /* tmavý slate, ladí s indigo */
  --bs-tertiary-bg-rgb: 30,41,59;

  /* Theme */
  --bs-primary: var(--gs-primary);
  --bs-primary-rgb: var(--gs-primary-rgb);

  --bs-link-color: #818cf8;           /* svetlejší indigo pre dark */
  --bs-link-hover-color: #a5b4fc;
}

/* =========================================================
   CARDS / SURFACE
========================================================= */

.card{
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}

/* =========================================================
   BUTTONS
========================================================= */

.btn-primary{
  --bs-btn-bg: var(--gs-primary);
  --bs-btn-border-color: var(--gs-primary);

  --bs-btn-hover-bg: var(--gs-accent);
  --bs-btn-hover-border-color: var(--gs-accent);

  --bs-btn-active-bg: var(--gs-accent);
  --bs-btn-active-border-color: var(--gs-accent);

  --bs-btn-disabled-bg: var(--gs-primary);
  --bs-btn-disabled-border-color: var(--gs-primary);
  --bs-btn-disabled-color: #fff;
}

.btn-outline-primary{
  --bs-btn-color: var(--gs-primary);
  --bs-btn-border-color: var(--gs-primary);

  --bs-btn-hover-bg: var(--gs-primary);
  --bs-btn-hover-border-color: var(--gs-primary);
  --bs-btn-hover-color: #fff;

  --bs-btn-active-bg: var(--gs-primary);
  --bs-btn-active-border-color: var(--gs-primary);
  --bs-btn-active-color: #fff;
}

/* =========================================================
   NAVIGATION
========================================================= */

.nav-link{
  color: var(--bs-link-color);
}

.nav-link.active{
  color: var(--gs-primary);
}

.nav-pills .nav-link.active{
  background-color: var(--gs-primary);
  color:#fff;
}

/* =========================================================
   LIST GROUP
========================================================= */

.list-group{
  --bs-list-group-active-bg: var(--gs-primary);
  --bs-list-group-active-border-color: var(--gs-primary);
  --bs-list-group-active-color: #fff;
}

/* =========================================================
   TABLES
========================================================= */

html[data-theme="dark"] .table{
  --bs-table-bg: var(--bs-body-bg);
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-hover-bg: rgba(255,255,255,.06);
  --bs-table-border-color: var(--bs-border-color);
}

html[data-theme="dark"] .table-light{
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color);
}

/* =========================================================
   BADGES
========================================================= */

.badge{
  font-weight: 500;
}

html[data-theme="dark"] .text-bg-secondary{
  background-color: #24324d !important;
  color: #e5e7eb !important;
}

/* =========================================================
   SWITCH
========================================================= */

.form-check-input:checked{
  background-color: var(--gs-primary);
  border-color: var(--gs-primary);
}

.form-check-input:focus{
  box-shadow: 0 0 0 .25rem rgba(var(--gs-primary-rgb), .25);
}
/* =========================================================
   TABLE FIX – DARK MODE
========================================================= */

html[data-theme="dark"] .table{
  color: var(--bs-body-color);

  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: transparent;

  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-bg: rgba(255,255,255,.04);
  --bs-table-hover-bg: rgba(255,255,255,.06);
    --bs-table-hover-bg: rgba(255,255,255,.05);
  --bs-table-hover-color: var(--bs-body-color);
}
html[data-theme="dark"] .list-group-item:hover{
  color: var(--bs-body-color);
}
html[data-theme="dark"] .table thead{
  color: var(--bs-body-color);
}
html[data-theme="dark"] .table-light{
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color);
}
html[data-theme="dark"] .table thead th{
  background-color: transparent;
  color: var(--bs-secondary-color);
  font-weight: 600;
  
}
/* ================= SWITCH DARK FIX ================= */

html[data-theme="dark"] .form-check-input{
  background-color: #24324d; /* svetlejší podklad */
  border-color: #2f3f5f;
}

html[data-theme="dark"] .form-check-input:checked{
  background-color: var(--gs-primary);
  border-color: var(--gs-primary);
}

html[data-theme="dark"] .form-check-input:focus{
  box-shadow: 0 0 0 .25rem rgba(var(--gs-primary-rgb), .35);
}

/* =========================================================
   APEXCHARTS – DARK MODE FIX (text/axis/tooltip/legend)
========================================================= */

html[data-theme="dark"] .apexcharts-canvas{
  font-family: inherit !important;
}

html[data-theme="dark"] .apexcharts-text,
html[data-theme="dark"] .apexcharts-title-text,
html[data-theme="dark"] .apexcharts-subtitle-text,
html[data-theme="dark"] .apexcharts-xaxis-label,
html[data-theme="dark"] .apexcharts-yaxis-label,
html[data-theme="dark"] .apexcharts-datalabel,
html[data-theme="dark"] .apexcharts-legend-text{
  fill: var(--bs-body-color) !important;
}

html[data-theme="dark"] .apexcharts-yaxis-title-text,
html[data-theme="dark"] .apexcharts-xaxis-title-text{
  fill: var(--bs-secondary-color) !important;
}

html[data-theme="dark"] .apexcharts-gridline,
html[data-theme="dark"] .apexcharts-xaxis line,
html[data-theme="dark"] .apexcharts-yaxis line{
  stroke: rgba(226,232,240,.14) !important;
}

html[data-theme="dark"] .apexcharts-xaxis-tick,
html[data-theme="dark"] .apexcharts-yaxis-tick{
  stroke: rgba(226,232,240,.18) !important;
}

html[data-theme="dark"] .apexcharts-tooltip{
  background: #0b1220 !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  color: var(--bs-body-color) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.35) !important;
}

html[data-theme="dark"] .apexcharts-tooltip *,
html[data-theme="dark"] .apexcharts-tooltip-title{
  color: var(--bs-body-color) !important;
}

html[data-theme="dark"] .apexcharts-tooltip-title{
  background: rgba(148,163,184,.10) !important;
  border-bottom: 1px solid rgba(148,163,184,.18) !important;
}



html[data-theme="dark"] .apexcharts-xaxistooltip,
html[data-theme="dark"] .apexcharts-yaxistooltip{
  background: #0b1220 !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  color: var(--bs-body-color) !important;
}

html[data-theme="dark"] .apexcharts-menu{
  background: #0b1220 !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  color: var(--bs-body-color) !important;
}
html[data-theme="dark"] .apexcharts-legend-text,
html[data-theme="dark"] .apexcharts-menu-item{
  color: var(--bs-body-color) !important;
}

html[data-theme="dark"] .apexcharts-menu-item:hover{
  background: rgba(148,163,184,.10) !important;
}

html[data-theme="dark"] .apexcharts-toolbar svg,
html[data-theme="dark"] .apexcharts-zoom-icon svg,
html[data-theme="dark"] .apexcharts-reset-icon svg,
html[data-theme="dark"] .apexcharts-menu-icon svg{
  fill: var(--bs-secondary-color) !important;
}

html[data-theme="dark"] .apexcharts-toolbar svg:hover,
html[data-theme="dark"] .apexcharts-zoom-icon svg:hover,
html[data-theme="dark"] .apexcharts-reset-icon svg:hover,
html[data-theme="dark"] .apexcharts-menu-icon svg:hover{
  fill: var(--bs-body-color) !important;
}

/* Heatmap data labels – aby boli čitateľné aj na svetlých bunkách */
html[data-theme="dark"] .apexcharts-heatmap-rect + .apexcharts-datalabel{
  fill: #0b1220 !important;
}

html[data-theme="dark"] .btnmenu {
  filter: invert(1) sepia(1) saturate(5) hue-rotate(90deg);
}















/* small polish */
.nav-pills .nav-link{ border-radius: 0.75rem; }
.card{ border-radius: 0.9rem; }
.btn{ border-radius: 0.75rem; }

.admin-toast-wrap{
  position: fixed;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
  z-index: 1080;
  width: min(520px, calc(100vw - 24px));
  pointer-events: none;
}
.admin-toast-wrap .toast{ pointer-events: auto; }

.dashChartBox{ position: relative; width:100%; }
.dashChartBox--hourly{ height: 220px; }
@media (max-width: 600px){ .dashChartBox--hourly{ height: 180px; } }
.dashChartBox--donut{ height: 240px; }
@media (max-width: 600px){ .dashChartBox--donut{ height: 210px; } }
.dashChart canvas{ width:100% !important; height:160px !important; display:block; }

.dashChart canvas, #chartDailyOrders, #chartDailyRevenue{
  width:100% !important;
  height:160px !important;
  display:block;
}