/* ================================================================
   MZT ADMIN PANEL — Professional Admin CSS System v3.0
   Full UI/UX overhaul — dark shell + professional light content
   ================================================================ */

/* ─────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ───────────────────────────────────────────────────────────────── */
:root {
  --mzt-sidebar-width:      250px;
  --mzt-sidebar-width-sm:   64px;
  --mzt-topbar-height:      64px;
  --mzt-sidebar-bg:         #1a1f2e;
  --mzt-sidebar-border:     rgba(255,255,255,0.07);
  --mzt-item-color:         rgba(255,255,255,0.60);
  --mzt-item-hover-color:   rgba(255,255,255,0.95);
  --mzt-item-hover-bg:      rgba(255,255,255,0.07);
  --mzt-item-active-color:  #ffffff;
  --mzt-item-active-bg:     rgba(255,255,255,0.13);
  --mzt-sub-border:         rgba(255,255,255,0.09);
  --mzt-sub-item-color:     rgba(255,255,255,0.48);
  --mzt-topbar-bg:          #1e2433;
  --mzt-topbar-border:      rgba(255,255,255,0.07);
  --mzt-topbar-text:        rgba(255,255,255,0.70);
  --mzt-content-bg:         #f1f5f9;
  --mzt-font:    "Play", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --cnt-font:    "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mzt-speed:   0.22s;
  --mzt-ease:    ease;
  /* Content design tokens */
  --cnt-card-bg:       #ffffff;
  --cnt-card-border:   #e2e8f0;
  --cnt-card-shadow:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --cnt-card-radius:   10px;
  --cnt-text:          #1e293b;
  --cnt-text-sm:       #475569;
  --cnt-text-muted:    #94a3b8;
  --cnt-border:        #e2e8f0;
  --cnt-border-light:  #f1f5f9;
  --cnt-tbl-head-bg:   #f8fafc;
  --cnt-tbl-head-text: #475569;
  --cnt-tbl-row-even:  #ffffff;
  --cnt-tbl-row-odd:   #fafafa;
  --cnt-tbl-row-hover: #eff6ff;
  --cnt-input-border:  #cbd5e1;
  --cnt-input-radius:  7px;
  --cnt-input-text:    #1e293b;
  --btn-radius:    7px;
  --btn-icon-size: 1.1rem;
}

/* ─────────────────────────────────────────────────────────────────
   2. GLOBAL BASE
   ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--mzt-font);
  margin: 0; padding: 0; min-height: 100vh;
  background-color: var(--mzt-content-bg);
  -webkit-font-smoothing: antialiased;
}
.app-sidebar ul, .app-sidebar ol { list-style: none; margin: 0; padding: 0; }

/* ─────────────────────────────────────────────────────────────────
   3. APP WRAPPER
   ───────────────────────────────────────────────────────────────── */
.app-wrapper { position: relative; min-height: 100vh; }

/* ─────────────────────────────────────────────────────────────────
   4. SIDEBAR
   ───────────────────────────────────────────────────────────────── */
.app-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 1010;
  width: var(--mzt-sidebar-width);
  background-color: var(--mzt-sidebar-bg);
  border-right: 1px solid var(--mzt-sidebar-border);
  display: flex; flex-direction: column;
  transition: transform var(--mzt-speed) var(--mzt-ease),
              width var(--mzt-speed) var(--mzt-ease);
  overflow: hidden;
}
.app-sidebar .logo-box {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; height: var(--mzt-topbar-height);
  min-height: var(--mzt-topbar-height);
  border-bottom: 1px solid var(--mzt-sidebar-border);
  flex-shrink: 0; white-space: nowrap; overflow: hidden;
}
.app-sidebar .logo-box a {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; overflow: hidden; flex: 1; min-width: 0;
}
.app-sidebar .logo-box .logo-lg {
  height: 34px; width: auto; max-width: 110px; object-fit: contain; flex-shrink: 0;
}
.app-sidebar .logo-box .mzt-logo-name {
  font-size: 0.975rem; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-sidebar .button-close-fullsidebar {
  background: transparent; border: none; color: var(--mzt-item-color);
  cursor: pointer; padding: 5px; border-radius: 6px; font-size: 20px;
  display: flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0;
  transition: color var(--mzt-speed), background-color var(--mzt-speed);
}
.app-sidebar .button-close-fullsidebar:hover { color: #fff; background-color: var(--mzt-item-hover-bg); }

.mzt-sidebar-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0 24px; }
.mzt-sidebar-scroll::-webkit-scrollbar { width: 3px; }
.mzt-sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.mzt-sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }

/* menu.blade.php ul */
.mzt-sidebar-scroll > ul { margin: 0 !important; padding: 0 8px !important; }
.app-sidebar hr { border: none; border-top: 1px solid var(--mzt-sidebar-border); margin: 8px 16px !important; }

/* ─────────────────────────────────────────────────────────────────
   5. MENU ITEMS — x-menu-item
   ───────────────────────────────────────────────────────────────── */
.app-sidebar li.relative { position: relative !important; padding: 1px 0 !important; list-style: none; }
.app-sidebar li.relative > span.absolute { display: none !important; }
.app-sidebar li.relative > a.inline-flex {
  display: flex !important; align-items: center !important;
  width: 100% !important; padding: 8px 12px !important; margin: 0 !important;
  border-radius: 8px !important; text-decoration: none !important;
  font-size: 0.845rem !important; font-weight: 500 !important; line-height: 1.5 !important;
  color: var(--mzt-item-color) !important; white-space: nowrap; overflow: hidden; gap: 9px;
  transition: color var(--mzt-speed), background-color var(--mzt-speed) !important;
}
.app-sidebar li.relative > a.inline-flex:hover {
  color: var(--mzt-item-hover-color) !important; background-color: var(--mzt-item-hover-bg);
}
.app-sidebar li.relative > a.text-white {
  color: var(--mzt-item-active-color) !important;
  background-color: var(--mzt-item-active-bg); font-weight: 600 !important;
}
.app-sidebar li.relative > a svg { width: 17px !important; height: 17px !important; min-width: 17px; flex-shrink: 0; opacity: 0.7; }
.app-sidebar li.relative > a.text-white svg, .app-sidebar li.relative > a:hover svg { opacity: 1; }
.app-sidebar li.relative > a > span { overflow: hidden; text-overflow: ellipsis; margin-left: 0 !important; flex: 1; }

/* ─────────────────────────────────────────────────────────────────
   6. GROUP MENU ITEMS — x-group-menu-item
   ───────────────────────────────────────────────────────────────── */
.mzt-sidebar-scroll div.relative { position: relative; padding: 1px 0; }
.app-sidebar div.relative > p.flex {
  display: flex !important; align-items: center !important;
  padding: 8px 12px !important; margin: 0 !important; border-radius: 8px !important;
  cursor: pointer; font-size: 0.845rem !important; font-weight: 500 !important;
  line-height: 1.5 !important; color: var(--mzt-item-color) !important;
  user-select: none; white-space: nowrap; overflow: hidden; gap: 9px;
  transition: color var(--mzt-speed), background-color var(--mzt-speed) !important;
}
.app-sidebar div.relative > p.flex:hover { color: var(--mzt-item-hover-color) !important; background-color: var(--mzt-item-hover-bg); }
.app-sidebar div.relative > p.flex svg { width: 17px !important; height: 17px !important; min-width: 17px; flex-shrink: 0; opacity: 0.7; }
.app-sidebar div.relative > p.flex:hover svg { opacity: 1; }
.app-sidebar div.relative > p.flex [class*="ml-auto"] { margin-left: auto !important; flex-shrink: 0; }
.app-sidebar div.relative > p.flex > span svg { width: 13px !important; height: 13px !important; opacity: 0.5; }
/* Submenu panel */
.app-sidebar div.relative > div[x-show],
.app-sidebar div.relative > div[style*="display"] {
  background: transparent !important; background-color: transparent !important;
  margin: 2px 0 4px 18px !important; padding: 0 0 0 10px !important;
  border-left: 1.5px solid var(--mzt-sub-border) !important;
}
.app-sidebar div.relative > div li.relative > a.inline-flex {
  padding: 6px 10px !important; font-size: 0.82rem !important;
  color: var(--mzt-sub-item-color) !important; border-radius: 6px !important; gap: 7px;
}
.app-sidebar div.relative > div li.relative > a.inline-flex:hover { color: rgba(255,255,255,0.86) !important; background-color: rgba(255,255,255,0.05); }
.app-sidebar div.relative > div li.relative > a.text-white { color: rgba(255,255,255,0.90) !important; background-color: rgba(255,255,255,0.07); font-weight: 600 !important; }
.app-sidebar div.relative > div li.relative > a svg { width: 13px !important; height: 13px !important; min-width: 13px; }

/* ─────────────────────────────────────────────────────────────────
   7. TOPBAR
   ───────────────────────────────────────────────────────────────── */
.app-topbar {
  position: sticky; top: 0; z-index: 1005;
  height: var(--mzt-topbar-height);
  background-color: var(--mzt-topbar-bg);
  border-bottom: 1px solid var(--mzt-topbar-border);
  margin-left: var(--mzt-sidebar-width);
  transition: margin-left var(--mzt-speed) var(--mzt-ease);
  display: flex; align-items: stretch; font-family: var(--mzt-font);
}
.app-topbar .container-fluid { display: flex; align-items: center; width: 100%; padding: 0 20px; }
.app-topbar .navbar-header { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; }
.app-topbar .mzt-topbar-left { display: flex; align-items: center; gap: 10px; overflow: hidden; flex-shrink: 0; }
.app-topbar .mzt-topbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.button-toggle-menu {
  background: transparent; border: none; cursor: pointer; color: var(--mzt-topbar-text);
  padding: 8px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: color var(--mzt-speed), background-color var(--mzt-speed);
}
.button-toggle-menu:hover { color: #fff; background-color: rgba(255,255,255,0.08); }
.button-toggle-menu .bx { font-size: 22px; line-height: 1; display: block; }
.app-topbar .mzt-site-label { font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-topbar .mzt-profile-btn {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: none; cursor: pointer;
  padding: 5px 10px; border-radius: 7px; color: var(--mzt-topbar-text);
  font-family: var(--mzt-font); font-size: 0.875rem; font-weight: 600;
  transition: color var(--mzt-speed), background-color var(--mzt-speed);
}
.app-topbar .mzt-profile-btn:hover { color: #fff; background-color: rgba(255,255,255,0.08); }
.app-topbar .mzt-profile-name { color: rgba(255,255,255,0.78); font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.app-topbar .mzt-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.16); flex-shrink: 0; }
.app-topbar .mzt-profile-wrapper { position: relative; }
.mzt-profile-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 196px;
  background: #1e2433; border: 1px solid rgba(255,255,255,0.09); border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.40); z-index: 1020; overflow: hidden; padding: 5px;
}
.mzt-profile-dropdown a, .mzt-profile-dropdown .mzt-dropdown-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: 7px;
  color: rgba(255,255,255,0.72); font-size: 0.875rem; font-weight: 500;
  text-decoration: none; cursor: pointer; font-family: var(--mzt-font);
  transition: color var(--mzt-speed), background-color var(--mzt-speed);
}
.mzt-profile-dropdown a:hover, .mzt-profile-dropdown .mzt-dropdown-item:hover { color: #fff; background-color: rgba(255,255,255,0.08); }
.mzt-profile-dropdown .mzt-dropdown-divider { border: none; border-top: 1px solid rgba(255,255,255,0.07); margin: 3px 0; }
.mzt-profile-dropdown .bx { font-size: 17px; opacity: 0.7; flex-shrink: 0; line-height: 1; display: block; }
.app-topbar select {
  background-color: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.70); border-radius: 6px; padding: 5px 10px; font-size: 0.8rem;
  font-family: var(--mzt-font); cursor: pointer; outline: none;
  transition: border-color var(--mzt-speed), color var(--mzt-speed);
}
.app-topbar select:hover, .app-topbar select:focus { border-color: rgba(255,255,255,0.25); color: #fff; }

/* ─────────────────────────────────────────────────────────────────
   8. PAGE CONTENT LAYOUT
   ───────────────────────────────────────────────────────────────── */
.page-content {
  position: relative; min-height: calc(100vh - var(--mzt-topbar-height));
  margin-left: var(--mzt-sidebar-width); background-color: var(--mzt-content-bg);
  transition: margin-left var(--mzt-speed) var(--mzt-ease);
  font-family: var(--cnt-font);
}
.page-content > .container-fluid { padding: 24px; max-width: 100%; }

/* ─────────────────────────────────────────────────────────────────
   9. SIDEBAR SIZE MODES
   ───────────────────────────────────────────────────────────────── */
html[data-sidebar-size="default"] .app-sidebar { width: var(--mzt-sidebar-width); transform: translateX(0); }
html[data-sidebar-size="default"] .app-topbar,
html[data-sidebar-size="default"] .page-content { margin-left: var(--mzt-sidebar-width); }
html[data-sidebar-size="condensed"] .app-sidebar { width: var(--mzt-sidebar-width-sm); transform: translateX(0); }
html[data-sidebar-size="condensed"] .app-topbar,
html[data-sidebar-size="condensed"] .page-content { margin-left: var(--mzt-sidebar-width-sm); }
/* Condensed — hide all text labels, arrows, logo name, close button */
html[data-sidebar-size="condensed"] .mzt-logo-name,
html[data-sidebar-size="condensed"] .button-close-fullsidebar,
html[data-sidebar-size="condensed"] .app-sidebar li.relative > a > span,
html[data-sidebar-size="condensed"] .app-sidebar .mzt-nav-text,
html[data-sidebar-size="condensed"] .app-sidebar .mzt-nav-arrow { display: none !important; }
/* Condensed — force-hide open submenus (overrides Alpine.js x-show inline style) */
html[data-sidebar-size="condensed"] .app-sidebar div.relative > div { display: none !important; }
/* Condensed — logo: center the image within the link */
html[data-sidebar-size="condensed"] .logo-box { justify-content: center; padding: 0; }
html[data-sidebar-size="condensed"] .logo-box a { justify-content: center; }
html[data-sidebar-size="condensed"] .logo-box .logo-lg { max-width: 36px; max-height: 36px; object-fit: contain; }
/* Condensed — menu items: center icons, remove padding/gap */
html[data-sidebar-size="condensed"] .mzt-sidebar-scroll > ul { padding: 0 4px !important; }
html[data-sidebar-size="condensed"] li.relative > a.inline-flex { justify-content: center !important; padding: 10px 6px !important; gap: 0; }
html[data-sidebar-size="condensed"] div.relative > p.flex { justify-content: center !important; padding: 10px 6px !important; gap: 0; }
/* Condensed — zero icon margins so they center perfectly inside the 64px strip */
html[data-sidebar-size="condensed"] .app-sidebar li.relative > a svg { margin: 0 !important; }
html[data-sidebar-size="condensed"] .app-sidebar div.relative > p svg { margin: 0 !important; }
html[data-sidebar-size="hidden"] .app-sidebar { transform: translateX(-100%); }
html[data-sidebar-size="hidden"] .app-topbar, html[data-sidebar-size="hidden"] .page-content { margin-left: 0; }
html.sidebar-enable .app-sidebar { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,0.35); }
.offcanvas-backdrop { position: fixed; inset: 0; z-index: 1009; background-color: rgba(0,0,0,0.45); }
.offcanvas-backdrop.fade { opacity: 0; transition: opacity 0.2s; }
.offcanvas-backdrop.show { opacity: 1; }

/* ─────────────────────────────────────────────────────────────────
   10. RESPONSIVE
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 1140px) {
  .app-sidebar { transform: translateX(-100%); }
  .app-topbar, .page-content { margin-left: 0 !important; }
  html.sidebar-enable .app-sidebar { transform: translateX(0); width: var(--mzt-sidebar-width); }
}
@media (min-width: 1141px) {
  html[data-sidebar-size="default"] .app-sidebar { transform: translateX(0); width: var(--mzt-sidebar-width); }
  html[data-sidebar-size="condensed"] .app-sidebar { transform: translateX(0); width: var(--mzt-sidebar-width-sm); }
}
@media (max-width: 768px) {
  .page-content > .container-fluid { padding: 14px; }
  .app-topbar .mzt-site-label, .app-topbar .mzt-profile-name { display: none; }
}
@media (max-width: 480px) { .page-content > .container-fluid { padding: 10px; } }

/* ═══════════════════════════════════════════════════════════════════
   ═══   CONTENT AREA — PROFESSIONAL ADMIN STYLES   ═══
   ═══════════════════════════════════════════════════════════════════ */

/* Scoped font for all inner content */
.page-content { font-family: var(--cnt-font), ui-sans-serif, system-ui, sans-serif; }

/* ─────────────────────────────────────────────────────────────────
   11. PAGE HEADER (baseview component)
   baseview renders: <div class="px-4"><div class="flex items-center w-full mb-2 text-2xl font-semibold">
   ───────────────────────────────────────────────────────────────── */
.page-content .px-4 { padding-left: 0 !important; padding-right: 0 !important; }

.page-content .flex.items-center.w-full.mb-2 {
  display: flex !important; align-items: center !important;
  background: var(--cnt-card-bg);
  border: 1px solid var(--cnt-card-border);
  border-bottom: none;
  border-radius: var(--cnt-card-radius) var(--cnt-card-radius) 0 0;
  padding: 14px 20px !important;
  margin-bottom: 0 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.page-content .flex.items-center.w-full.mb-2 > p {
  font-size: 1.05rem !important; font-weight: 700 !important;
  color: var(--cnt-text) !important; margin: 0 !important; letter-spacing: -0.01em;
}
.page-content .flex.items-center.w-full.mb-2 > .mx-auto { flex: 1; }

/* Info note under title */
.page-content .mb-4.text-xs.font-light {
  background: var(--cnt-card-bg);
  border-left: 1px solid var(--cnt-card-border); border-right: 1px solid var(--cnt-card-border);
  padding: 6px 20px !important; color: var(--cnt-text-sm) !important;
  font-size: 0.78rem !important; margin: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────
   12. DATA TABLE TOOLBAR (rappasoft outer container)
   .space-y-4 wraps: toolbar row + table + pagination row
   ───────────────────────────────────────────────────────────────── */
.page-content .space-y-4 {
  background: var(--cnt-card-bg) !important;
  border: 1px solid var(--cnt-card-border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--cnt-card-radius) var(--cnt-card-radius) !important;
  overflow: hidden !important;
  --tw-space-y-reverse: 0 !important;
}
.page-content .space-y-4 > * + * { margin-top: 0 !important; }

/* Toolbar controls row */
.page-content .space-y-4 .px-6.py-2,
.page-content .space-y-4 [class*="justify-between"] {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--cnt-border-light) !important;
  align-items: center;
}

/* Search input */
.page-content input[placeholder="Search"],
.page-content input[wire\:model\\.debounce\\.300ms="filters.search"] {
  height: 36px !important; font-size: 0.84rem !important;
  border-color: var(--cnt-input-border) !important;
  border-radius: var(--cnt-input-radius) !important;
  background-color: #ffffff !important; color: var(--cnt-input-text) !important;
  padding: 0 12px !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.page-content input[placeholder="Search"]:focus,
.page-content input[wire\:model\\.debounce\\.300ms="filters.search"]:focus {
  border-color: var(--mzt-primary, #4f46e5) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.10) !important;
  outline: none !important;
}

/* Per-page select */
.page-content select[wire\:model="perPage"],
.page-content select#perPage {
  height: 36px !important; font-size: 0.84rem !important;
  border-color: var(--cnt-input-border) !important;
  border-radius: var(--cnt-input-radius) !important;
  background-color: #ffffff !important; color: var(--cnt-input-text) !important;
  padding: 0 10px !important; min-width: 76px; cursor: pointer;
}

/* Inner table container — no extra border/shadow */
.page-content .space-y-4 .align-middle.min-w-full {
  border-radius: 0 !important; border: none !important;
  border-top: 1px solid var(--cnt-border-light) !important;
  box-shadow: none !important; overflow-x: auto !important;
}

/* ─────────────────────────────────────────────────────────────────
   13. TABLES — professional light theme
   Rappasoft classes on actual elements:
   <th class="px-3 py-2 md:px-6 md:py-3 bg-gray-50 dark:bg-gray-800">
   <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-none">
   <tr class="bg-white dark:bg-gray-700"> / <tr class="bg-gray-50 dark:bg-gray-800">
   ───────────────────────────────────────────────────────────────── */
.page-content table { min-width: 100%; border-collapse: collapse !important; }

/* Header cells */
.page-content thead th {
  background-color: var(--cnt-tbl-head-bg) !important;
  color: var(--cnt-tbl-head-text) !important;
  font-size: 0.68rem !important; font-weight: 700 !important;
  letter-spacing: 0.07em !important; text-transform: uppercase !important;
  padding: 11px 16px !important;
  border-bottom: 2px solid var(--cnt-card-border) !important;
  white-space: nowrap; vertical-align: middle !important;
}
/* Sort button */
.page-content thead th button {
  color: var(--cnt-tbl-head-text) !important; font-size: 0.68rem !important;
  font-weight: 700 !important; letter-spacing: 0.07em !important;
  text-transform: uppercase !important; background: none !important;
  border: none !important; padding: 0 !important; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.page-content thead th button:hover { color: var(--cnt-text) !important; }
.page-content thead th button svg { width: 10px !important; height: 10px !important; }

/* Table body */
.page-content tbody { background-color: var(--cnt-card-bg) !important; }

/* Rows — force light, override dark: variants */
.page-content tbody tr {
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background-color 0.12s ease !important;
}
.page-content tbody tr.bg-white,
.page-content tbody tr[class*="bg-white"] {
  background-color: var(--cnt-tbl-row-even) !important; color: var(--cnt-text) !important;
}
.page-content tbody tr.bg-gray-50,
.page-content tbody tr[class*="bg-gray-50"] {
  background-color: var(--cnt-tbl-row-odd) !important; color: var(--cnt-text) !important;
}
.page-content tbody tr:hover { background-color: var(--cnt-tbl-row-hover) !important; }

/* Cells */
.page-content tbody td {
  padding: 11px 16px !important; color: var(--cnt-text) !important;
  font-size: 0.875rem !important; vertical-align: middle !important; border-bottom: none !important;
}

/* Images in cells */
.page-content tbody td img {
  max-height: 42px !important; width: auto; border-radius: 6px;
  object-fit: cover; vertical-align: middle;
}

/* Empty state row */
.page-content tbody td[colspan] {
  padding: 56px 24px !important; text-align: center !important;
  background-color: var(--cnt-card-bg) !important; color: var(--cnt-text-muted) !important;
}
.page-content tbody td[colspan] .flex.justify-center {
  flex-direction: column !important; align-items: center !important;
  gap: 12px !important; padding: 0 !important;
}
.page-content tbody td[colspan] svg { width: 52px !important; height: 52px !important; color: #cbd5e1 !important; }
.page-content tbody td[colspan] span { font-size: 0.9rem !important; font-weight: 500 !important; color: #94a3b8 !important; }

/* ─────────────────────────────────────────────────────────────────
   14. ACTION BUTTONS — softer, icon-only, professional
   ───────────────────────────────────────────────────────────────── */
/* Normalize all small action buttons in table cells */
.page-content tbody td button,
.page-content tbody td a[role="button"] {
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: 4px !important;
  padding: 6px 8px !important; border-radius: var(--btn-radius) !important;
  font-size: 0.8rem !important; font-weight: 500 !important; line-height: 1 !important;
  border: 1px solid transparent !important; cursor: pointer !important;
  transition: background-color 0.13s, color 0.13s, border-color 0.13s !important;
  white-space: nowrap; text-decoration: none !important;
}
.page-content tbody td button svg, .page-content tbody td a svg {
  width: var(--btn-icon-size) !important; height: var(--btn-icon-size) !important; flex-shrink: 0;
}

/* Edit: slate */
.page-content tbody td button.bg-gray-600,
.page-content tbody td button[class*="bg-gray-6"],
.page-content tbody td button[class*="bg-gray-7"] {
  background-color: #f1f5f9 !important; color: #475569 !important; border-color: #e2e8f0 !important;
}
.page-content tbody td button.bg-gray-600:hover,
.page-content tbody td button[class*="bg-gray-6"]:hover,
.page-content tbody td button[class*="bg-gray-7"]:hover {
  background-color: #e2e8f0 !important; color: #1e293b !important;
}

/* Show/view: amber */
.page-content tbody td button.bg-yellow-600,
.page-content tbody td button[class*="bg-yellow"] {
  background-color: #fffbeb !important; color: #92400e !important; border-color: #fde68a !important;
}
.page-content tbody td button.bg-yellow-600:hover,
.page-content tbody td button[class*="bg-yellow"]:hover {
  background-color: #fef3c7 !important; color: #78350f !important;
}

/* Activate / Go Online: green */
.page-content tbody td button.bg-green-600,
.page-content tbody td button[class*="bg-green-6"],
.page-content tbody td button.bg-green-500,
.page-content tbody td button[class*="bg-green-5"] {
  background-color: #f0fdf4 !important; color: #15803d !important; border-color: #bbf7d0 !important;
}
.page-content tbody td button.bg-green-600:hover,
.page-content tbody td button[class*="bg-green"]:hover {
  background-color: #dcfce7 !important; color: #166534 !important;
}

/* Delete / Danger: red */
.page-content tbody td button.bg-red-600,
.page-content tbody td button[class*="bg-red-6"] {
  background-color: #fff1f2 !important; color: #be123c !important; border-color: #fecdd3 !important;
}
.page-content tbody td button.bg-red-600:hover,
.page-content tbody td button[class*="bg-red-6"]:hover {
  background-color: #ffe4e6 !important; color: #9f1239 !important;
}

/* Deactivate / Go Offline: orange-red */
.page-content tbody td button.bg-red-500,
.page-content tbody td button[class*="bg-red-5"] {
  background-color: #fff7ed !important; color: #c2410c !important; border-color: #fed7aa !important;
}
.page-content tbody td button.bg-red-500:hover,
.page-content tbody td button[class*="bg-red-5"]:hover {
  background-color: #ffedd5 !important; color: #9a3412 !important;
}

/* Primary actions: blue */
.page-content tbody td button.bg-primary-500,
.page-content tbody td button[class*="bg-primary-5"],
.page-content tbody td button.bg-primary-600,
.page-content tbody td button[class*="bg-primary-6"] {
  background-color: #eff6ff !important; color: #1d4ed8 !important; border-color: #bfdbfe !important;
}
.page-content tbody td button[class*="bg-primary"]:hover {
  background-color: #dbeafe !important; color: #1e40af !important;
}

/* Indigo (loginas) */
.page-content tbody td button.bg-indigo-500,
.page-content tbody td button[class*="bg-indigo"] {
  background-color: #eef2ff !important; color: #4338ca !important; border-color: #c7d2fe !important;
}
.page-content tbody td button[class*="bg-indigo"]:hover {
  background-color: #e0e7ff !important; color: #3730a3 !important;
}

/* Action group layout */
.page-content tbody td .flex.items-center.gap-x-2 { gap: 4px !important; flex-wrap: wrap; }

/* ─────────────────────────────────────────────────────────────────
   15. PAGINATION
   ───────────────────────────────────────────────────────────────── */
.page-content .space-y-4 > .px-6.py-2:last-child,
.page-content .space-y-4 > div:last-child {
  padding: 10px 16px !important; border-top: 1px solid var(--cnt-border-light) !important;
}
.page-content p.text-sm.text-gray-700,
.page-content p.text-sm.leading-5 {
  font-size: 0.82rem !important; color: var(--cnt-text-sm) !important;
}
.page-content p.text-sm span.font-medium { font-weight: 700 !important; color: var(--cnt-text) !important; }
.page-content nav[role="navigation"],
.page-content [aria-label*="Pagination"] {
  display: flex; align-items: center; gap: 2px;
}
.page-content nav span, .page-content nav a {
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; min-width: 32px !important; height: 32px !important;
  padding: 0 8px !important; border-radius: 7px !important; font-size: 0.82rem !important;
  font-weight: 500 !important; text-decoration: none !important;
  border: 1px solid transparent !important; color: var(--cnt-text-sm);
  transition: background-color 0.12s, color 0.12s !important;
}
.page-content nav a:hover { background-color: var(--cnt-border-light) !important; color: var(--cnt-text) !important; }
.page-content nav [aria-current="page"],
.page-content nav span[aria-current="page"] {
  background-color: var(--mzt-primary, #4f46e5) !important;
  color: #fff !important; border-color: transparent !important;
}

/* ─────────────────────────────────────────────────────────────────
   16. MODALS
   ───────────────────────────────────────────────────────────────── */
/* Modal dialog card */
div.fixed.inset-0.z-20 [role="dialog"] {
  border-radius: 12px !important; overflow: hidden !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.18), 0 10px 25px rgba(0,0,0,0.10) !important;
}
/* Modal body area */
div.fixed.inset-0.z-20 [role="dialog"] .bg-white.sm\:p-6 {
  background: #ffffff !important; padding: 20px 24px !important;
}
/* Modal title */
div.fixed.inset-0.z-20 [role="dialog"] p.text-xl.font-semibold {
  font-size: 1rem !important; font-weight: 700 !important; color: var(--cnt-text) !important;
  margin-bottom: 16px !important; padding-bottom: 12px !important;
  border-bottom: 1px solid var(--cnt-border-light);
}
/* Modal footer */
div.fixed.inset-0.z-20 [role="dialog"] .bg-gray-50.sm\:px-6 {
  background: #f8fafc !important; border-top: 1px solid var(--cnt-card-border) !important;
  padding: 14px 20px !important;
}
/* Modal close button */
div.fixed.inset-0.z-20 button.absolute.bg-red-500 {
  background-color: #f1f5f9 !important; color: #64748b !important;
  border: 1px solid #e2e8f0 !important; border-radius: 50% !important;
  width: 28px !important; height: 28px !important; padding: 4px !important;
  top: 14px !important;
}
div.fixed.inset-0.z-20 button.absolute.bg-red-500:hover {
  background-color: #fee2e2 !important; color: #b91c1c !important; border-color: #fecaca !important;
}
/* Save button */
div.fixed.inset-0.z-20 button.bg-primary-600,
div.fixed.inset-0.z-20 button[type="submit"].bg-primary-600 {
  background-color: var(--mzt-primary, #4f46e5) !important; color: #ffffff !important;
  border-radius: 8px !important; font-size: 0.85rem !important; font-weight: 600 !important;
  padding: 8px 18px !important; border: none !important;
}
div.fixed.inset-0.z-20 button.bg-primary-600:hover { filter: brightness(0.90) !important; }
/* Cancel button */
div.fixed.inset-0.z-20 button.bg-white.border.border-gray-300 {
  background-color: #ffffff !important; color: var(--cnt-text-sm) !important;
  border: 1px solid var(--cnt-card-border) !important; border-radius: 8px !important;
  font-size: 0.85rem !important; font-weight: 500 !important; padding: 8px 18px !important;
}
div.fixed.inset-0.z-20 button.bg-white.border.border-gray-300:hover { background-color: var(--cnt-border-light) !important; }
/* HR inside modals */
div.fixed.inset-0.z-20 hr { border-color: var(--cnt-border-light) !important; margin: 14px 0 !important; }
/* Gray bg inside modals (address block) */
div.fixed.inset-0.z-20 .bg-gray-100 {
  background-color: #f8fafc !important; border-color: var(--cnt-card-border) !important; border-radius: 8px !important;
}

/* ─────────────────────────────────────────────────────────────────
   17. FORMS & INPUTS (inside modals)
   ───────────────────────────────────────────────────────────────── */
div.fixed.inset-0.z-20 label,
div.fixed.inset-0.z-20 .block.text-sm {
  color: var(--cnt-text-sm) !important; font-size: 0.8rem !important;
  font-weight: 600 !important; display: block; margin-bottom: 4px !important;
}
div.fixed.inset-0.z-20 input[type="text"],
div.fixed.inset-0.z-20 input[type="email"],
div.fixed.inset-0.z-20 input[type="number"],
div.fixed.inset-0.z-20 input[type="password"],
div.fixed.inset-0.z-20 input[type="tel"],
div.fixed.inset-0.z-20 textarea {
  background: #ffffff !important; border: 1px solid var(--cnt-input-border) !important;
  border-radius: var(--cnt-input-radius) !important; color: var(--cnt-input-text) !important;
  font-size: 0.875rem !important; width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
div.fixed.inset-0.z-20 input:focus,
div.fixed.inset-0.z-20 textarea:focus {
  border-color: var(--mzt-primary, #4f46e5) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.10) !important; outline: none !important;
}
div.fixed.inset-0.z-20 select {
  background: #ffffff !important; border: 1px solid var(--cnt-input-border) !important;
  border-radius: var(--cnt-input-radius) !important; color: var(--cnt-input-text) !important;
  font-size: 0.875rem !important; cursor: pointer;
}
div.fixed.inset-0.z-20 select:focus {
  border-color: var(--mzt-primary, #4f46e5) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.10) !important; outline: none !important;
}
div.fixed.inset-0.z-20 span.text-xs.text-red-700 { font-size: 0.74rem !important; color: #dc2626 !important; }

/* ─────────────────────────────────────────────────────────────────
   18. BADGES & STATUS
   ───────────────────────────────────────────────────────────────── */
.page-content .px-2.py-1.text-sm.font-medium,
.page-content .rounded-xl.text-sm,
.page-content .rounded-full.text-sm {
  font-size: 0.71rem !important; font-weight: 600 !important;
  padding: 3px 9px !important; border-radius: 999px !important;
  display: inline-block; line-height: 1.4;
}
.page-content tbody td .text-green-500,
.page-content tbody td [class*="text-green"] { color: #16a34a !important; }
.page-content tbody td .text-red-500 { color: #dc2626 !important; }
.page-content .rounded-full.bg-primary-600 { background-color: var(--mzt-primary, #4f46e5) !important; color: #fff !important; }

/* ─────────────────────────────────────────────────────────────────
   19. DASHBOARD CARDS
   ───────────────────────────────────────────────────────────────── */
.page-content .flex.items-center.p-6.bg-white.border.border-gray-100 {
  border-radius: 10px !important; border-color: var(--cnt-card-border) !important;
  box-shadow: var(--cnt-card-shadow) !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
}
.page-content .flex.items-center.p-6.bg-white.border:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.09) !important; transform: translateY(-1px) !important;
}
.page-content p.text-sm.font-medium.text-gray-500.uppercase.tracking-wider {
  font-size: 0.67rem !important; letter-spacing: 0.06em !important;
  color: #94a3b8 !important; font-weight: 700 !important;
}
.page-content p.text-2xl.font-bold.text-gray-800 {
  font-size: 1.55rem !important; font-weight: 800 !important; color: var(--cnt-text) !important; line-height: 1.2 !important;
}
.page-content .bg-white.rounded-xl,
.page-content .bg-white.rounded-lg {
  background: var(--cnt-card-bg) !important;
  border: 1px solid var(--cnt-card-border) !important;
  box-shadow: var(--cnt-card-shadow) !important;
}

/* ─────────────────────────────────────────────────────────────────
   20. EMPTY STATES
   ───────────────────────────────────────────────────────────────── */
.page-content .text-center.py-8 { padding: 48px 24px; }
.page-content .text-center.py-8 svg { color: #cbd5e1 !important; width: 56px !important; height: 56px !important; margin: 0 auto 14px; display: block; }
.page-content .text-center.py-8 p { color: var(--cnt-text-sm) !important; font-size: 0.9rem !important; }

/* ─────────────────────────────────────────────────────────────────
   UTILITY PATCHES
   ───────────────────────────────────────────────────────────────── */
.page-content .overflow-x-auto { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
[x-cloak] { display: none !important; }