/* ================================================================
   MZT ADMIN PANEL — Luxury Operations Design System v4.0
   Petroleum shell + luminous content + accessible micro-interactions
   ================================================================ */

/* ─────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ───────────────────────────────────────────────────────────────── */
:root {
  --mzt-sidebar-width:      272px;
  --mzt-sidebar-width-sm:   76px;
  --mzt-topbar-height:      76px;
  --mzt-petrol-950:         #04171d;
  --mzt-petrol-900:         #07262f;
  --mzt-petrol-800:         #0b3741;
  --mzt-teal-500:           #18a69e;
  --mzt-teal-400:           #3fc4b8;
  --mzt-gold:               #c7a968;
  --mzt-sidebar-bg:         #061f27;
  --mzt-sidebar-border:     rgba(183,230,226,0.10);
  --mzt-item-color:         rgba(226,245,243,0.68);
  --mzt-item-hover-color:   rgba(255,255,255,0.95);
  --mzt-item-hover-bg:      rgba(73,190,179,0.10);
  --mzt-item-active-color:  #ffffff;
  --mzt-item-active-bg:     linear-gradient(135deg, rgba(42,173,162,0.24), rgba(25,116,123,0.16));
  --mzt-sub-border:         rgba(102,205,196,0.18);
  --mzt-sub-item-color:     rgba(216,240,238,0.56);
  --mzt-topbar-bg:          rgba(247,251,251,0.90);
  --mzt-topbar-border:      rgba(7,55,65,0.09);
  --mzt-topbar-text:        #244b53;
  --mzt-content-bg:         #edf4f4;
  --mzt-font:    "Plus Jakarta Sans", 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:    cubic-bezier(.2,.8,.2,1);
  /* Content design tokens */
  --cnt-card-bg:       #ffffff;
  --cnt-card-border:   rgba(12,67,76,0.10);
  --cnt-card-shadow:   0 18px 46px rgba(9,48,56,0.07), 0 2px 8px rgba(9,48,56,0.035);
  --cnt-card-radius:   18px;
  --cnt-text:          #102f36;
  --cnt-text-sm:       #49676d;
  --cnt-text-muted:    #849ca1;
  --cnt-border:        #d6e4e5;
  --cnt-border-light:  #eaf1f2;
  --cnt-tbl-head-bg:   #f2f7f7;
  --cnt-tbl-head-text: #48676d;
  --cnt-tbl-row-even:  #ffffff;
  --cnt-tbl-row-odd:   #fbfdfd;
  --cnt-tbl-row-hover: #edf8f7;
  --cnt-input-border:  #c9dcde;
  --cnt-input-radius:  12px;
  --cnt-input-text:    #17383f;
  --btn-radius:    12px;
  --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;
}
.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; }

/* Buscador global: indexa únicamente las rutas que el menú ya renderizó
   después de aplicar roles y permisos. */
.mzt-nav-finder { position: relative; padding: 10px 12px 4px; z-index: 20; }
.mzt-nav-search-box {
  min-height: 42px; display: flex; align-items: center; gap: 9px;
  padding: 0 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px;
  color: rgba(255,255,255,.62); background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: .2s ease;
}
.mzt-nav-search-box:focus-within { border-color: rgba(77,191,217,.72); background: rgba(255,255,255,.11); box-shadow: 0 0 0 3px rgba(77,191,217,.12); }
.mzt-nav-search-box svg { width: 17px; height: 17px; flex: 0 0 17px; }
.mzt-nav-search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: #fff; background: transparent; font-size: 12px; font-weight: 600; }
.mzt-nav-search-box input::placeholder { color: rgba(255,255,255,.48); }
.mzt-nav-search-box input::-webkit-search-cancel-button { filter: invert(1); opacity: .58; }
.mzt-nav-search-box kbd { flex: 0 0 auto; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; padding: 3px 5px; color: rgba(255,255,255,.56); background: rgba(3,31,42,.45); font-family: inherit; font-size: 9px; font-weight: 700; line-height: 1.1; }
.mzt-nav-search-results {
  position: absolute; top: calc(100% + 4px); left: 12px; right: 12px;
  max-height: min(430px, 58vh); overflow-y: auto; padding: 7px;
  border: 1px solid rgba(141,219,212,.2); border-radius: 15px;
  background: rgba(3,31,42,.98); box-shadow: 0 24px 60px rgba(0,0,0,.38);
  backdrop-filter: blur(18px);
}
.mzt-nav-search-state { padding: 14px 12px; color: rgba(255,255,255,.58); font-size: 11px; line-height: 1.45; }
.mzt-nav-search-result { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 11px; border-radius: 10px; color: rgba(255,255,255,.86) !important; transition: .16s ease; }
.mzt-nav-search-result:hover,.mzt-nav-search-result:focus { outline: none; color: #fff !important; background: rgba(77,191,217,.14); transform: translateX(2px); }
.mzt-nav-search-result > span:first-child { min-width: 0; display: grid; gap: 3px; }
.mzt-nav-search-result strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.mzt-nav-search-description { display: -webkit-box; overflow: hidden; color: rgba(255,255,255,.63); font-size: 10px; font-weight: 500; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mzt-nav-search-result small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8ddbd4; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mzt-nav-search-arrow { flex: 0 0 auto; color: #8ddbd4; font-weight: 800; }
html[data-sidebar-size="condensed"] .mzt-nav-finder { display: none; }
.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 and the complete logo copy. */
html[data-sidebar-size="condensed"] .mzt-logo-copy,
html[data-sidebar-size="condensed"] .mzt-logo-name,
html[data-sidebar-size="condensed"] .mzt-logo-caption,
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; }

/* x-modal / x-modal-lg / x-modal-xl / x-plain-modal wrapper: the Tailwind
   arbitrary value z-[1050] in those blade files has no rule in the
   precompiled app.css bundle (mix build predates that class), so it is
   declared here instead — this file loads after app.css and already owns
   the rest of the shell z-index scale (topbar 1005, backdrop 1009,
   sidebar 1010, profile dropdown 1020). Must stay above all of those or
   every admin CRUD modal's close button renders under the sticky topbar. */
.z-\[1050\] { z-index: 1050 !important; }

/* ─────────────────────────────────────────────────────────────────
   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 mzt-page-wrapper"><div class="flex items-center w-full mb-2 text-2xl font-semibold">
   Scoped to .mzt-page-wrapper only — the previous selector
   (.page-content .px-4) matched every px-4 element anywhere on any
   admin page (buttons, cards, form wrappers, modal bodies, table
   cells), silently zeroing their horizontal padding panel-wide.
   ───────────────────────────────────────────────────────────────── */
.page-content .mzt-page-wrapper { 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, #073B4C) !important;
  box-shadow: 0 0 0 3px rgba(17,138,178,0.16) !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;
  accent-color: var(--mzt-primary, #073B4C);
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.page-content select[wire\:model="perPage"]:focus,
.page-content select#perPage:focus {
  border-color: var(--mzt-primary, #073B4C) !important;
  box-shadow: 0 0 0 3px rgba(17,138,178,0.16) !important;
  outline: none !important;
}

/* 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: keep icon actions on one compact row. The table wrapper
   already provides horizontal scrolling when the viewport is too narrow. */
.page-content tbody td > :is(
  .mzt-action-group,
  .flex.items-center.gap-x-1,
  .flex.items-center.gap-x-2
) {
  display: inline-flex !important;
  align-items: center !important;
  flex-flow: row nowrap !important;
  gap: 5px !important;
  width: max-content;
  max-width: none;
}
.page-content tbody td:has(.mzt-action-group),
.page-content tbody td:has(> :is(
  .mzt-action-group,
  .flex.items-center.gap-x-1,
  .flex.items-center.gap-x-2
)) {
  width: 1%;
  white-space: nowrap;
  padding-inline: 10px !important;
}

/* ─────────────────────────────────────────────────────────────────
   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,
.page-content nav button:hover {
  background-color: rgba(17,138,178,0.08) !important;
  color: var(--mzt-primary, #073B4C) !important;
  border-color: rgba(17,138,178,0.22) !important;
}
.page-content nav button:focus,
.page-content nav a:focus {
  border-color: var(--mzt-primary, #073B4C) !important;
  box-shadow: 0 0 0 3px rgba(17,138,178,0.16) !important;
  outline: none !important;
}
.page-content nav [aria-current="page"],
.page-content nav span[aria-current="page"],
.page-content nav [aria-current="page"] > span {
  background-color: var(--mzt-primary, #073B4C) !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, #073B4C) !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, #073B4C) !important;
  box-shadow: 0 0 0 3px rgba(17,138,178,0.16) !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, #073B4C) !important;
  box-shadow: 0 0 0 3px rgba(17,138,178,0.16) !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, #073B4C) !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; }

/* ================================================================
   21. MZTCITY LUXURY LAYER
   A semantic layer shared by every administrative surface.
   ================================================================ */

html { scroll-behavior: smooth; }
body.mzt-admin-body {
  color: var(--cnt-text);
  background:
    radial-gradient(circle at 82% 3%, rgba(63,196,184,.10), transparent 28rem),
    linear-gradient(145deg, #f3f8f8 0%, var(--mzt-content-bg) 52%, #e9f1f2 100%);
}
body.mzt-admin-body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  opacity: .28;
  background-image: linear-gradient(rgba(10,70,78,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(10,70,78,.035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.35), transparent 72%);
}
::selection { color: #fff; background: var(--mzt-petrol-800); }

/* Luxury shell */
.app-sidebar {
  background:
    radial-gradient(circle at 10% 2%, rgba(63,196,184,.15), transparent 19rem),
    linear-gradient(180deg, #082a33 0%, #061f27 46%, #04181f 100%);
  box-shadow: 20px 0 60px rgba(4,32,39,.12);
}
.app-sidebar::after {
  content: ""; position: absolute; inset: 0 0 0 auto; width: 1px;
  background: linear-gradient(transparent, rgba(75,195,184,.30), transparent);
  pointer-events: none;
}
.app-sidebar .logo-box {
  height: var(--mzt-topbar-height); min-height: var(--mzt-topbar-height);
  padding: 0 18px; border-bottom-color: rgba(205,240,237,.09);
}
.app-sidebar .logo-box a { gap: 12px; }
.mzt-logo-mark {
  width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center;
  border: 1px solid rgba(185,233,229,.17); border-radius: 13px;
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px rgba(0,0,0,.14);
}
.app-sidebar .logo-box .logo-lg { width: 30px; height: 30px; max-width: 30px; object-fit: contain; }
.mzt-logo-copy { display: flex; min-width: 0; flex-direction: column; line-height: 1.15; }
.app-sidebar .logo-box .mzt-logo-name {
  font-size: .92rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.mzt-logo-caption {
  margin-top: 5px; color: rgba(210,239,236,.46); font-size: .59rem;
  font-weight: 700; letter-spacing: .115em; text-transform: uppercase;
}
.mzt-sidebar-scroll { padding: 14px 0 28px; }
.mzt-sidebar-scroll > ul { padding: 0 11px !important; }
.app-sidebar li.relative > a.inline-flex,
.app-sidebar div.relative > p.flex {
  min-height: 43px; border: 1px solid transparent !important;
  border-radius: 12px !important; padding: 9px 12px !important;
  font-size: .82rem !important; letter-spacing: .005em;
  transition: transform .22s var(--mzt-ease), color .22s var(--mzt-ease),
              background .22s var(--mzt-ease), border-color .22s var(--mzt-ease) !important;
}
.app-sidebar li.relative > a.inline-flex:hover,
.app-sidebar div.relative > p.flex:hover {
  transform: translateX(2px); border-color: rgba(111,211,201,.10) !important;
}
.app-sidebar li.relative > a.text-white {
  position: relative; background: var(--mzt-item-active-bg) !important;
  border-color: rgba(96,209,198,.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 8px 18px rgba(0,0,0,.10);
}
.app-sidebar li.relative > a.text-white::before {
  content: ""; width: 3px; height: 18px; border-radius: 99px;
  background: linear-gradient(180deg, #7de1d7, var(--mzt-teal-500));
  box-shadow: 0 0 15px rgba(63,196,184,.58); flex: 0 0 3px;
}
.app-sidebar li.relative > a svg,
.app-sidebar div.relative > p.flex svg { color: #8ddbd4; }
.app-sidebar div.relative > div[x-show],
.app-sidebar div.relative > div[style*="display"] {
  border-left-color: rgba(87,197,187,.22) !important;
  margin-left: 21px !important; padding: 3px 0 3px 11px !important;
}

.app-topbar {
  background: var(--mzt-topbar-bg); color: var(--cnt-text);
  border-color: var(--mzt-topbar-border);
  box-shadow: 0 8px 30px rgba(11,58,66,.055);
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
}
.app-topbar .container-fluid { padding: 0 28px; }
.button-toggle-menu {
  width: 42px; height: 42px; color: var(--mzt-petrol-800);
  border: 1px solid rgba(13,73,82,.10); border-radius: 13px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 5px 16px rgba(16,62,69,.06);
}
.button-toggle-menu:hover {
  color: #fff; background: var(--mzt-petrol-800); border-color: var(--mzt-petrol-800);
  transform: translateY(-1px); box-shadow: 0 9px 22px rgba(7,55,65,.18);
}
.app-topbar .mzt-site-label {
  color: #5b777c; font-size: .7rem; font-weight: 800;
  letter-spacing: .115em; text-transform: uppercase;
}
.app-topbar .mzt-topbar-right { gap: 9px; }
.app-topbar select {
  min-height: 40px; color: #3a5c62; background: rgba(255,255,255,.78);
  border-color: rgba(13,73,82,.11); border-radius: 12px; padding: 7px 34px 7px 12px;
  box-shadow: 0 4px 13px rgba(16,62,69,.04);
}
.app-topbar select:hover, .app-topbar select:focus {
  color: var(--mzt-petrol-800); border-color: rgba(24,166,158,.46);
  box-shadow: 0 0 0 4px rgba(24,166,158,.09);
}
.app-topbar .mzt-profile-btn {
  min-height: 48px; padding: 6px 9px 6px 13px; gap: 10px;
  color: var(--cnt-text); background: rgba(255,255,255,.72);
  border: 1px solid rgba(13,73,82,.10); border-radius: 15px;
  box-shadow: 0 5px 16px rgba(16,62,69,.055);
}
.app-topbar .mzt-profile-btn:hover {
  color: var(--cnt-text); background: #fff; border-color: rgba(24,166,158,.25);
  transform: translateY(-1px); box-shadow: 0 10px 25px rgba(16,62,69,.10);
}
.mzt-profile-copy { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.mzt-profile-copy small { color: #91a4a8; font-size: .56rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.app-topbar .mzt-profile-name { margin-top: 3px; color: #183a41; font-size: .78rem; }
.app-topbar .mzt-avatar {
  width: 36px; height: 36px; border-color: rgba(24,166,158,.26);
  box-shadow: 0 0 0 3px rgba(24,166,158,.07);
}
.mzt-profile-chevron { color: #7b959a; font-size: 16px; }
.mzt-profile-dropdown {
  top: calc(100% + 12px); min-width: 220px; padding: 8px;
  color: var(--cnt-text); background: rgba(255,255,255,.98);
  border: 1px solid rgba(12,67,76,.11); border-radius: 16px;
  box-shadow: 0 24px 70px rgba(4,32,39,.20);
  transform-origin: top right; animation: mzt-dropdown-in .2s var(--mzt-ease) both;
}
.mzt-profile-dropdown a, .mzt-profile-dropdown .mzt-dropdown-item {
  min-height: 42px; color: #416168; border-radius: 10px;
}
.mzt-profile-dropdown a:hover, .mzt-profile-dropdown .mzt-dropdown-item:hover {
  color: var(--mzt-petrol-800); background: #edf8f7; transform: translateX(2px);
}
.mzt-profile-dropdown .mzt-dropdown-divider { border-color: #e8f0f1; }

/* Content rhythm and page headers */
.page-content { overflow: clip; background: transparent; }
.page-content::before {
  content: ""; position: absolute; top: -180px; right: -130px; width: 430px; height: 430px;
  border: 80px solid rgba(41,172,162,.035); border-radius: 50%; pointer-events: none;
}
.page-content > .container-fluid { position: relative; z-index: 1; padding: 30px 32px 42px; }
.mzt-page-wrapper { width: 100%; animation: mzt-page-enter .42s var(--mzt-ease) both; }
.mzt-page-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 78px; margin-bottom: 18px; padding: 4px 2px;
}
.mzt-page-title-group { min-width: 0; }
.mzt-page-kicker {
  display: block; margin-bottom: 5px; color: var(--mzt-teal-500);
  font-size: .62rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
}
.mzt-page-title-group h1 {
  margin: 0; color: #0a3038; font-size: clamp(1.48rem, 2vw, 2rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.15;
}
.mzt-page-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.mzt-page-actions > div:empty { display: none; }
.mzt-page-note {
  margin: -7px 0 18px; padding: 11px 14px; color: #5d777c; font-size: .76rem;
  border: 1px solid rgba(24,166,158,.14); border-radius: 12px; background: rgba(255,255,255,.58);
}

/* Buttons and action language */
.mzt-btn {
  position: relative; isolation: isolate; display: inline-flex !important;
  min-height: 42px; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 17px !important; overflow: hidden; border: 1px solid transparent !important;
  border-radius: var(--btn-radius) !important; font: 700 .79rem/1 var(--cnt-font) !important;
  letter-spacing: .01em; text-align: center; text-decoration: none !important; white-space: nowrap;
  transition: transform .2s var(--mzt-ease), box-shadow .2s var(--mzt-ease),
              background .2s var(--mzt-ease), border-color .2s var(--mzt-ease) !important;
}
.mzt-btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.22) 48%, transparent 76%);
  transform: translateX(-100%); transition: opacity .2s;
}
.mzt-btn:hover { transform: translateY(-2px); }
.mzt-btn:hover::after { opacity: 1; animation: mzt-sheen .75s var(--mzt-ease); }
.mzt-btn:active { transform: translateY(0) scale(.985); }
.mzt-btn:focus-visible, .mzt-icon-btn:focus-visible {
  outline: none !important; box-shadow: 0 0 0 4px rgba(24,166,158,.18) !important;
}
.mzt-btn:disabled, .mzt-icon-btn:disabled { cursor: wait !important; opacity: .62; transform: none !important; }
.mzt-btn-primary {
  color: #fff !important; background: linear-gradient(135deg, #0b4852, #087b7b) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 10px 24px rgba(7,76,82,.20), inset 0 1px 0 rgba(255,255,255,.15);
}
.mzt-btn-primary:hover {
  color: #fff !important; background: linear-gradient(135deg, #0a3d47, #07918b) !important;
  box-shadow: 0 14px 30px rgba(7,76,82,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.mzt-btn-secondary {
  color: #31565d !important; background: #fff !important; border-color: #d4e2e3 !important;
  box-shadow: 0 5px 15px rgba(12,58,65,.055);
}
.mzt-btn-secondary:hover { color: #092f37 !important; background: #f5fafa !important; border-color: #adcacc !important; }
.mzt-btn-danger { color: #fff !important; background: linear-gradient(135deg, #9f334a, #c44a5e) !important; }
.mzt-btn svg { width: 17px !important; height: 17px !important; }
.mzt-btn-loader {
  width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.38);
  border-top-color: #fff; border-radius: 50%; animation: mzt-spin .7s linear infinite;
}
.mzt-action-group {
  display: inline-flex;
  align-items: center;
  flex-flow: row nowrap;
  gap: 5px;
  width: max-content;
  max-width: none;
}
.mzt-action-group > * { flex: 0 0 auto; }
.mzt-action-group-icons > :is(button,a) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
}
.mzt-icon-btn {
  display: inline-flex !important; width: 36px; height: 36px; min-width: 36px;
  align-items: center; justify-content: center; gap: 5px; padding: 0 9px !important;
  color: #3f6167 !important; background: #f4f8f8 !important;
  border: 1px solid #dae6e7 !important; border-radius: 11px !important;
  box-shadow: 0 3px 10px rgba(14,55,62,.035);
  transition: transform .18s var(--mzt-ease), color .18s, background .18s,
              border-color .18s, box-shadow .18s !important;
}
.mzt-icon-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 17px rgba(14,55,62,.10); }
.mzt-icon-btn:active { transform: scale(.96); }
.mzt-icon-btn svg { width: 17px !important; height: 17px !important; }
.mzt-icon-btn-neutral:hover { color: #fff !important; background: #315f68 !important; border-color: #315f68 !important; }
.mzt-icon-btn-accent { color: #0c716f !important; background: #eaf8f6 !important; border-color: #c7eae6 !important; }
.mzt-icon-btn-accent:hover { color: #fff !important; background: #0b827d !important; border-color: #0b827d !important; }
.mzt-icon-btn-success { color: #19725b !important; background: #ecf8f3 !important; border-color: #cdeadd !important; }
.mzt-icon-btn-success:hover { color: #fff !important; background: #18725d !important; border-color: #18725d !important; }
.mzt-icon-btn-warning { color: #8c6e27 !important; background: #faf6e9 !important; border-color: #eadfb9 !important; }
.mzt-icon-btn-warning:hover { color: #fff !important; background: #8c7438 !important; border-color: #8c7438 !important; }
.mzt-icon-btn-danger { color: #a43b51 !important; background: #fdf0f3 !important; border-color: #f1cdd5 !important; }
.mzt-icon-btn-danger:hover { color: #fff !important; background: #aa3f55 !important; border-color: #aa3f55 !important; }

/* Cards, panels, tabs and dropdowns */
.page-content .bg-white.rounded-xl,
.page-content .bg-white.rounded-lg,
.page-content .shadow,
.page-content .shadow-md,
.page-content .shadow-lg {
  border-color: var(--cnt-card-border) !important; border-radius: var(--cnt-card-radius) !important;
  box-shadow: var(--cnt-card-shadow) !important;
}
.page-content .bg-white.rounded-xl,
.page-content .bg-white.rounded-lg {
  background: linear-gradient(155deg, rgba(255,255,255,.99), rgba(251,254,254,.96)) !important;
}
.page-content .space-y-4:not(:has(table)) {
  overflow: visible !important; background: transparent !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important;
}
.page-content .space-y-4:has(table) {
  overflow: hidden !important; border: 1px solid var(--cnt-card-border) !important;
  border-radius: var(--cnt-card-radius) !important; box-shadow: var(--cnt-card-shadow) !important;
}
.page-content [role="menu"], .page-content .dropdown-menu {
  padding: 7px !important; background: rgba(255,255,255,.98) !important;
  border: 1px solid var(--cnt-card-border) !important; border-radius: 14px !important;
  box-shadow: 0 20px 55px rgba(5,41,48,.17) !important;
  animation: mzt-dropdown-in .18s var(--mzt-ease) both;
}
.page-content [role="menu"] a, .page-content [role="menu"] button,
.page-content .dropdown-menu a, .page-content .dropdown-menu button {
  border-radius: 9px !important; transition: color .15s, background .15s, transform .15s !important;
}
.page-content [role="menu"] a:hover, .page-content [role="menu"] button:hover,
.page-content .dropdown-menu a:hover, .page-content .dropdown-menu button:hover {
  color: var(--mzt-petrol-800) !important; background: #edf8f7 !important; transform: translateX(2px);
}
.page-content [role="tablist"] {
  display: flex; gap: 5px; padding: 5px; border: 1px solid var(--cnt-card-border);
  border-radius: 14px; background: rgba(255,255,255,.70); box-shadow: 0 6px 18px rgba(13,57,64,.045);
}
.page-content [role="tab"] {
  min-height: 38px; padding: 8px 14px !important; border-radius: 10px !important;
  color: #617b80 !important; font-size: .77rem !important; font-weight: 700 !important;
  transition: color .18s, background .18s, box-shadow .18s !important;
}
.page-content [role="tab"][aria-selected="true"],
.page-content [role="tab"].active {
  color: #fff !important; background: linear-gradient(135deg, #0b4852, #087b7b) !important;
  box-shadow: 0 7px 16px rgba(7,76,82,.18);
}

/* Universal form language */
.mzt-field { position: relative; }
.mzt-label, .page-content label:not(.mzt-check-card) {
  display: block; margin-bottom: 7px; color: #48676d;
  font-size: .73rem !important; font-weight: 750 !important; letter-spacing: .012em;
}
.mzt-input, .mzt-select, .mzt-textarea,
.page-content input[type="text"], .page-content input[type="email"],
.page-content input[type="password"], .page-content input[type="number"],
.page-content input[type="search"], .page-content input[type="tel"],
.page-content input[type="url"], .page-content input[type="date"],
.page-content input[type="time"], .page-content input[type="datetime-local"],
.page-content textarea, .page-content select {
  min-height: 44px; padding: 10px 13px !important; color: var(--cnt-input-text) !important;
  background-color: #fbfdfd !important; border: 1px solid var(--cnt-input-border) !important;
  border-radius: var(--cnt-input-radius) !important; font: 500 .84rem/1.4 var(--cnt-font) !important;
  box-shadow: inset 0 1px 2px rgba(14,60,67,.025);
  transition: border-color .18s, box-shadow .18s, background .18s !important;
}
.page-content textarea, .mzt-textarea { min-height: 108px; resize: vertical; }
.mzt-input:hover, .mzt-select:hover, .mzt-textarea:hover,
.page-content input:hover, .page-content textarea:hover, .page-content select:hover {
  border-color: #aac8ca !important; background-color: #fff !important;
}
.mzt-input:focus, .mzt-select:focus, .mzt-textarea:focus,
.page-content input:focus, .page-content textarea:focus, .page-content select:focus {
  outline: none !important; border-color: var(--mzt-teal-500) !important; background-color: #fff !important;
  box-shadow: 0 0 0 4px rgba(24,166,158,.10), 0 8px 20px rgba(12,77,82,.055) !important;
}
.page-content input:disabled, .page-content textarea:disabled, .page-content select:disabled {
  color: #89a0a4 !important; background: #edf2f3 !important; cursor: not-allowed;
}
.mzt-field-hint { display: block; margin-top: 6px; color: #80979b; font-size: .7rem; font-style: normal; }
.mzt-field-error { display: block; margin-top: 6px; color: #b4364d !important; font-size: .7rem; font-weight: 650; }
.mzt-search-control { position: relative; display: block; }
.mzt-search-control > svg {
  position: absolute; top: 50%; left: 13px; z-index: 1; width: 18px; height: 18px;
  color: #769095; pointer-events: none; transform: translateY(-50%);
}
.mzt-search-control > input { padding-left: 41px !important; }
.mzt-check-card {
  padding: 12px 13px; color: var(--cnt-text-sm); cursor: pointer;
  border: 1px solid #dce7e8; border-radius: 12px; background: #fafdfd;
  transition: border-color .18s, background .18s, transform .18s;
}
.mzt-check-card:hover { border-color: #b8d4d5; background: #fff; transform: translateY(-1px); }
.mzt-checkbox, .page-content input[type="checkbox"], .page-content input[type="radio"] {
  width: 18px; height: 18px; color: var(--mzt-teal-500) !important;
  border-color: #b8ced0 !important; border-radius: 5px !important;
}
.page-content input[type="radio"] { border-radius: 50% !important; }
.mzt-checkbox:focus, .page-content input[type="checkbox"]:focus, .page-content input[type="radio"]:focus {
  box-shadow: 0 0 0 4px rgba(24,166,158,.12) !important;
}

/* Tables and bulk controls */
.page-content thead th {
  height: 48px; padding: 12px 17px !important; color: #557076 !important;
  background: linear-gradient(180deg, #f7fafa, #f1f6f6) !important;
  border-bottom: 1px solid #dce8e9 !important; font-size: .63rem !important;
  letter-spacing: .105em !important;
}
.page-content tbody tr { position: relative; transition: background .16s, box-shadow .16s !important; }
.page-content tbody tr:hover {
  background: #eef9f7 !important; box-shadow: inset 3px 0 0 var(--mzt-teal-500);
}
.page-content tbody td { height: 58px; padding: 12px 17px !important; color: #315159 !important; font-size: .82rem !important; }
.page-content tbody td img { max-height: 44px !important; border-radius: 11px; box-shadow: 0 4px 12px rgba(7,53,61,.10); }
.page-content tbody td[colspan] {
  background: radial-gradient(circle at 50% 0, rgba(24,166,158,.07), transparent 16rem), #fff !important;
}
.page-content tbody td[colspan] svg { color: #9bc2c2 !important; }
.page-content nav[role="navigation"] a,
.page-content nav[role="navigation"] button,
.page-content nav[role="navigation"] span {
  border-radius: 10px !important; transition: transform .15s, background .15s, color .15s !important;
}
.page-content nav[role="navigation"] a:hover,
.page-content nav[role="navigation"] button:hover { transform: translateY(-1px); }

/* Status pills */
.page-content [class*="rounded-full"][class*="bg-green"],
.page-content [class*="rounded-xl"][class*="bg-green"] {
  color: #17634f !important; background: #e9f7f1 !important; border: 1px solid #c9e9dc !important;
}
.page-content [class*="rounded-full"][class*="bg-red"],
.page-content [class*="rounded-xl"][class*="bg-red"] {
  color: #963a50 !important; background: #fceef1 !important; border: 1px solid #efcbd3 !important;
}
.page-content [class*="rounded-full"][class*="bg-yellow"],
.page-content [class*="rounded-xl"][class*="bg-yellow"] {
  color: #7e672c !important; background: #faf6e8 !important; border: 1px solid #e9deb7 !important;
}
.page-content [class*="rounded-full"][class*="bg-blue"],
.page-content [class*="rounded-xl"][class*="bg-blue"],
.page-content .rounded-full.bg-primary-600 {
  color: #116a68 !important; background: #e8f7f5 !important; border: 1px solid #c3e7e3 !important;
}

/* Dashboard cards */
.mzt-stat-card {
  position: relative; min-height: 116px; overflow: hidden;
  border: 1px solid var(--cnt-card-border) !important; border-radius: 18px !important;
  background: linear-gradient(145deg, #fff 20%, #f8fcfc 100%) !important;
  box-shadow: var(--cnt-card-shadow) !important;
  transition: transform .24s var(--mzt-ease), box-shadow .24s var(--mzt-ease) !important;
}
.mzt-stat-card::after {
  content: ""; position: absolute; right: -35px; top: -45px; width: 115px; height: 115px;
  border: 20px solid rgba(24,166,158,.055); border-radius: 50%;
}
.mzt-stat-card:hover { transform: translateY(-4px); box-shadow: 0 24px 55px rgba(9,48,56,.12) !important; }
.mzt-stat-icon {
  position: relative; z-index: 1; display: grid; width: 52px; height: 52px; place-items: center;
  border: 1px solid rgba(24,166,158,.15); border-radius: 15px !important;
  background: linear-gradient(145deg, #eaf8f6, #f8fcfc) !important;
  box-shadow: inset 0 1px 0 #fff, 0 8px 20px rgba(8,91,91,.08);
}
.mzt-stat-label { color: #728b90; font-size: .62rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.mzt-stat-value { margin-top: 4px; color: #10353d; font-size: 1.7rem; font-weight: 800; letter-spacing: -.04em; }

/* Modal experience */
.mzt-modal { padding: 20px 0; }
.mzt-modal-backdrop {
  background: rgba(3,27,33,.72); opacity: 1 !important;
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.mzt-modal-dialog {
  overflow: hidden !important; border: 1px solid rgba(188,224,222,.24) !important;
  border-radius: 20px !important; background: #fff !important;
  box-shadow: 0 35px 100px rgba(2,25,31,.34), inset 0 1px 0 #fff !important;
  animation: mzt-modal-in .28s var(--mzt-ease) both;
}
.mzt-modal-body { padding: 27px 28px 24px !important; background: #fff !important; }
.mzt-modal-body p.text-xl.font-semibold,
.mzt-modal-body h1, .mzt-modal-body h2, .mzt-modal-body h3 {
  margin: 0 46px 20px 0 !important; padding: 0 0 15px !important;
  color: #102f36 !important; border-bottom: 1px solid #e5eeee;
  font-size: 1.16rem !important; font-weight: 800 !important; letter-spacing: -.02em;
}
.mzt-modal-footer {
  gap: 8px; padding: 15px 20px !important; background: #f3f8f8 !important;
  border-top: 1px solid #dce8e9 !important;
}
.mzt-modal-close {
  z-index: 3; display: grid; width: 34px; height: 34px; place-items: center;
  padding: 0 !important; color: #56747a !important; background: #eef4f4 !important;
  border: 1px solid #d7e4e5 !important; border-radius: 11px !important;
  transition: transform .18s, color .18s, background .18s !important;
}
.mzt-modal-close:hover { color: #fff !important; background: #a53d53 !important; border-color: #a53d53 !important; transform: rotate(5deg) scale(1.04); }
.mzt-modal-close svg { width: 17px !important; height: 17px !important; }

/* Notifications and progress */
.fixed.top-0.right-0.z-50 > * {
  border: 1px solid rgba(255,255,255,.45) !important; border-radius: 16px !important;
  box-shadow: 0 22px 60px rgba(4,33,40,.20) !important;
  backdrop-filter: blur(16px); animation: mzt-toast-in .3s var(--mzt-ease) both;
}
.mzt-loading-backdrop { background: rgba(3,28,34,.68); backdrop-filter: blur(8px); }
.mzt-loading-card {
  position: relative; display: flex; min-width: 190px; flex-direction: column; align-items: center;
  padding: 25px 30px; color: #dff5f2; border: 1px solid rgba(156,223,217,.18);
  border-radius: 20px; background: linear-gradient(145deg, rgba(9,48,57,.97), rgba(4,30,37,.97));
  box-shadow: 0 26px 75px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08);
  animation: mzt-modal-in .25s var(--mzt-ease) both;
}
.mzt-loading-ring {
  width: 38px; height: 38px; margin-bottom: 14px; border: 3px solid rgba(116,211,202,.20);
  border-top-color: #62d3c8; border-radius: 50%; box-shadow: 0 0 20px rgba(63,196,184,.14);
  animation: mzt-spin .75s linear infinite;
}
.mzt-loading-card strong { font-size: .84rem; letter-spacing: .02em; }
.mzt-loading-card small { margin-top: 4px; color: rgba(221,244,241,.55); font-size: .66rem; }

/* Authentication */
.mzt-auth-body {
  min-height: 100vh; overflow-x: hidden; color: var(--cnt-text);
  background:
    radial-gradient(circle at 12% 18%, rgba(56,193,181,.18), transparent 28rem),
    radial-gradient(circle at 88% 78%, rgba(199,169,104,.09), transparent 24rem),
    linear-gradient(145deg, #04171d 0%, #082f38 46%, #061f27 100%);
}
.account-pages { position: relative; isolation: isolate; min-height: 100vh; padding: 38px 20px; }
.account-pages::before {
  content: ""; position: absolute; inset: 0; z-index: -2; opacity: .18;
  background-image: linear-gradient(rgba(173,226,221,.12) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(173,226,221,.12) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(circle at center, #000, transparent 74%);
}
.mzt-auth-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.mzt-auth-orb-one { top: 8%; left: 8%; width: 220px; height: 220px; border: 42px solid rgba(69,198,187,.055); }
.mzt-auth-orb-two { right: 5%; bottom: 4%; width: 300px; height: 300px; border: 60px solid rgba(202,176,115,.035); }
.mzt-auth-container { width: min(100%, 520px); margin: auto; }
.mzt-auth-container .row { display: flex; justify-content: center; }
.mzt-auth-container [class*="col-"] { width: 100%; }
.mzt-auth-brand { display: flex; flex-direction: column; align-items: center; }
.mzt-auth-brand .auth-logo {
  display: grid; min-width: 78px; min-height: 70px; place-items: center; padding: 10px 18px;
  border: 1px solid rgba(196,235,232,.15); border-radius: 19px;
  background: rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 20px 50px rgba(0,0,0,.16);
}
.mzt-auth-brand .auth-logo img { max-width: 150px; object-fit: contain; }
.mzt-auth-brand > span {
  margin-top: 12px; color: rgba(217,241,239,.54); font-size: .62rem;
  font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.mzt-auth-card {
  overflow: hidden; border: 1px solid rgba(215,238,236,.48) !important; border-radius: 24px !important;
  background: rgba(255,255,255,.96) !important; box-shadow: 0 35px 100px rgba(0,0,0,.32), inset 0 1px 0 #fff !important;
  backdrop-filter: blur(22px); animation: mzt-auth-enter .55s var(--mzt-ease) both;
}
.mzt-auth-card .card-body { padding: 34px !important; }
.mzt-auth-heading .mzt-auth-kicker {
  display: inline-flex; margin-bottom: 10px; color: #14847f; font-size: .62rem;
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.mzt-auth-heading h1 { color: #0b3038; font-size: 1.65rem; font-weight: 800; letter-spacing: -.035em; }
.mzt-auth-heading p { margin-top: 8px; color: #70898e; font-size: .76rem; line-height: 1.6; }
.mzt-auth-card .mzt-input, .mzt-auth-card input[type="email"], .mzt-auth-card input[type="password"],
.mzt-auth-card input[type="text"], .mzt-auth-card select {
  width: 100%; min-height: 48px; padding: 11px 14px !important; color: #17383f;
  border: 1px solid #c9dcde !important; border-radius: 13px !important; background: #f8fbfb !important;
  transition: border-color .18s, box-shadow .18s, background .18s !important;
}
.mzt-auth-card input:focus, .mzt-auth-card select:focus {
  outline: none !important; border-color: var(--mzt-teal-500) !important; background: #fff !important;
  box-shadow: 0 0 0 4px rgba(24,166,158,.11), 0 8px 22px rgba(9,71,76,.06) !important;
}
.mzt-auth-card .mb-3 { margin-bottom: 1rem; }
.mzt-auth-card .mb-4 { margin-bottom: 1.4rem; }
.mzt-auth-card .d-flex { display: flex; }
.mzt-auth-card .d-grid { display: grid; }
.mzt-auth-card .d-none { display: none; }
.mzt-auth-card .align-items-center { align-items: center; }
.mzt-auth-card .justify-content-between { justify-content: space-between; }
.mzt-auth-card .justify-content-end { justify-content: flex-end; }
.mzt-auth-card .justify-content-center { justify-content: center; }
.mzt-auth-card .gap-2 { gap: .5rem; }
.mzt-auth-card .flex-grow-1 { flex: 1; }
.mzt-auth-card a { color: #0c7774; font-weight: 700; }
.mzt-auth-card a:hover { color: #07514f; }
.mzt-auth-card .btn {
  min-height: 40px; padding: 9px 12px; color: #3d5e65; border: 1px solid #d2e0e1;
  border-radius: 11px; background: #f9fcfc; font-size: .75rem; font-weight: 700;
  transition: transform .18s, color .18s, border-color .18s, background .18s;
}
.mzt-auth-card .btn:hover { color: #0c514f; border-color: #a8cfcc; background: #eef8f7; transform: translateY(-1px); }
.mzt-auth-card hr { border-color: #dce8e9; }
.mzt-auth-version { color: rgba(218,241,239,.50) !important; font-size: .64rem !important; letter-spacing: .08em; }

/* Active production login (v2). */
.mzt-auth-v2 { background: #edf4f4 !important; }
.mzt-auth-visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(4,23,29,.12), transparent 45%, rgba(24,166,158,.10));
}
.mzt-auth-visual-shade {
  opacity: .74 !important; background: linear-gradient(145deg, #03171d 0%, rgba(5,34,41,.92) 52%, rgba(4,25,31,.78) 100%) !important;
}
.mzt-auth-visual-tint {
  opacity: .36 !important; background: radial-gradient(circle at 75% 35%, rgba(54,196,184,.54), transparent 28rem) !important;
}
.mzt-auth-v2-logo {
  border: 1px solid rgba(210,242,239,.25); border-radius: 14px;
  background: rgba(255,255,255,.12) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 30px rgba(0,0,0,.16);
  backdrop-filter: blur(12px);
}
.mzt-auth-form-panel {
  background:
    radial-gradient(circle at 100% 0, rgba(43,178,168,.11), transparent 24rem),
    linear-gradient(150deg, #f6fafa, #edf4f4) !important;
}
.mzt-auth-v2-card {
  border: 1px solid rgba(10,73,81,.10); border-radius: 22px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 25px 70px rgba(5,43,50,.12), inset 0 1px 0 #fff;
  animation: mzt-auth-enter .5s var(--mzt-ease) both;
}
.mzt-auth-v2-card input[type="email"], .mzt-auth-v2-card input[type="password"],
.mzt-auth-v2-card input[type="text"], .mzt-auth-v2-card select {
  border-color: #c8dbdd !important; border-radius: 12px !important; background: #f8fbfb !important;
}
.mzt-auth-v2-card input:focus, .mzt-auth-v2-card select:focus {
  border-color: var(--mzt-teal-500) !important; background: #fff !important;
  box-shadow: 0 0 0 4px rgba(24,166,158,.11), 0 8px 20px rgba(9,66,72,.05) !important;
}
.mzt-auth-submit {
  border-radius: 12px !important; color: #fff !important;
  background: linear-gradient(135deg, #0b4852, #087b7b) !important;
  box-shadow: 0 12px 27px rgba(7,76,82,.22);
}
.mzt-auth-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(7,76,82,.28); }
.mzt-auth-join { border-radius: 13px !important; }
.mzt-auth-join:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(8,69,74,.08); }
.mzt-remember-control {
  display: inline-flex; min-height: 48px; align-items: center; gap: 11px;
  color: #294b52; cursor: pointer; user-select: none;
}
.mzt-remember-input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.mzt-remember-toggle {
  position: relative; flex: 0 0 auto; width: 50px; height: 28px;
  border: 1px solid #b8cdd0; border-radius: 999px; background: #dce7e8;
  box-shadow: inset 0 2px 5px rgba(5,43,50,.10);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.mzt-remember-toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(5,43,50,.22);
  transition: transform .22s var(--mzt-ease);
}
.mzt-remember-input:checked + .mzt-remember-toggle {
  border-color: #087b7b; background: linear-gradient(135deg, #0b4852, #0c8d87);
  box-shadow: 0 7px 16px rgba(7,76,82,.20), inset 0 1px 1px rgba(255,255,255,.20);
}
.mzt-remember-input:checked + .mzt-remember-toggle::after { transform: translateX(22px); }
.mzt-remember-input:focus-visible + .mzt-remember-toggle {
  outline: 0; box-shadow: 0 0 0 4px rgba(24,166,158,.16), 0 7px 16px rgba(7,76,82,.18);
}
.mzt-remember-copy { display: grid; gap: 1px; font-size: .875rem; font-weight: 650; line-height: 1.2; }
.mzt-remember-status { color: #7a9196; font-size: .68rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.mzt-remember-status-on { display: none; color: #08736f; }
.mzt-remember-input:checked ~ .mzt-remember-copy .mzt-remember-status-off { display: none; }
.mzt-remember-input:checked ~ .mzt-remember-copy .mzt-remember-status-on { display: inline; }
.mzt-register-cover {
  border: 1px solid rgba(10,73,81,.14);
  box-shadow: 0 22px 55px rgba(5,43,50,.16), inset 0 1px 0 rgba(255,255,255,.22);
  animation: mzt-auth-enter .5s var(--mzt-ease) both;
}
.mzt-register-cover > img { object-position: center 72%; }

/* Registration, password recovery and two-factor screens. */
.mzt-auth-body .min-h-screen.bg-gray-50,
.mzt-auth-body .min-h-screen.bg-white {
  background:
    radial-gradient(circle at 8% 8%, rgba(35,176,166,.12), transparent 24rem),
    radial-gradient(circle at 92% 92%, rgba(199,169,104,.07), transparent 22rem),
    linear-gradient(145deg, #f6fafa, #eaf2f3) !important;
}
.mzt-auth-body .bg-white.rounded-lg.shadow-xl,
.mzt-auth-body .bg-white.shadow.rounded,
.mzt-auth-body .border.bg-white.shadow {
  border: 1px solid rgba(10,73,81,.10) !important; border-radius: 20px !important;
  box-shadow: 0 25px 70px rgba(5,43,50,.13), inset 0 1px 0 #fff !important;
}
.mzt-auth-body input[type="text"], .mzt-auth-body input[type="email"],
.mzt-auth-body input[type="password"], .mzt-auth-body input[type="number"],
.mzt-auth-body input[type="tel"], .mzt-auth-body input[type="date"],
.mzt-auth-body textarea, .mzt-auth-body select {
  min-height: 44px; color: #17383f !important; background: #f9fcfc !important;
  border: 1px solid #c8dbdd !important; border-radius: 12px !important;
  transition: border-color .18s, background .18s, box-shadow .18s !important;
}
.mzt-auth-body input:focus, .mzt-auth-body textarea:focus, .mzt-auth-body select:focus {
  outline: none !important; border-color: var(--mzt-teal-500) !important; background: #fff !important;
  box-shadow: 0 0 0 4px rgba(24,166,158,.11) !important;
}
.mzt-auth-body :is(button,a):is([class^="bg-primary-"],[class*=" bg-primary-"]) {
  color: #fff !important; border-radius: 12px !important;
  background: linear-gradient(135deg, #0b4852, #087b7b) !important;
  box-shadow: 0 10px 24px rgba(7,76,82,.18);
  transition: transform .18s var(--mzt-ease), box-shadow .18s !important;
}
.mzt-auth-body :is(button,a):is([class^="bg-primary-"],[class*=" bg-primary-"]):hover {
  transform: translateY(-2px); box-shadow: 0 14px 30px rgba(7,76,82,.26);
}

/* Motion */
@keyframes mzt-page-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mzt-dropdown-in { from { opacity: 0; transform: translateY(-7px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes mzt-modal-in { from { opacity: 0; transform: translateY(18px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes mzt-toast-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes mzt-auth-enter { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes mzt-sheen { to { transform: translateX(100%); } }
@keyframes mzt-spin { to { transform: rotate(360deg); } }

/* Responsive refinement */
@media (max-width: 1140px) {
  .app-sidebar { box-shadow: 24px 0 70px rgba(3,29,35,.28); }
  .page-content > .container-fluid { padding: 24px 22px 36px; }
}
@media (max-width: 768px) {
  :root { --mzt-topbar-height: 68px; }
  .app-topbar .container-fluid { padding: 0 14px; }
  .app-topbar .mzt-site-label, .mzt-profile-copy, .mzt-profile-chevron { display: none; }
  .app-topbar .mzt-profile-btn { min-height: 44px; padding: 4px; border: 0; background: transparent; box-shadow: none; }
  .page-content > .container-fluid { padding: 19px 14px 30px; }
  .mzt-page-heading { min-height: auto; align-items: flex-start; flex-direction: column; gap: 13px; margin-bottom: 16px; }
  .mzt-page-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .mzt-page-actions .mzt-btn { flex: 1; }
  .mzt-modal { padding: 0; }
  .mzt-modal-dialog { border-radius: 20px 20px 0 0 !important; }
  .mzt-modal-body { padding: 24px 20px 20px !important; }
  .mzt-modal-footer { padding: 13px 15px !important; }
  .page-content [role="tablist"] { width: 100%; overflow-x: auto; }
  .page-content [role="tab"] { flex: 0 0 auto; }
  .mzt-auth-card .card-body { padding: 27px 22px !important; }
}
@media (max-width: 480px) {
  .page-content > .container-fluid { padding: 16px 11px 26px; }
  .mzt-page-title-group h1 { font-size: 1.4rem; }
  .account-pages { padding: 24px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Legacy actions inherit the same system without changing Livewire contracts. */
.page-content :is(button,a):is([class^="bg-primary-"],[class*=" bg-primary-"],[class^="bg-blue-"],[class*=" bg-blue-"]) {
  border: 1px solid rgba(255,255,255,.09) !important; border-radius: var(--btn-radius) !important;
  color: #fff !important; background: linear-gradient(135deg, #0b4852, #087b7b) !important;
  box-shadow: 0 8px 20px rgba(7,76,82,.16);
  transition: transform .18s var(--mzt-ease), box-shadow .18s var(--mzt-ease), filter .18s !important;
}
.page-content :is(button,a):is([class^="bg-primary-"],[class*=" bg-primary-"],[class^="bg-blue-"],[class*=" bg-blue-"]):hover {
  transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 12px 27px rgba(7,76,82,.23);
}
.page-content :is(button,a):is([class^="bg-green-"],[class*=" bg-green-"]) {
  color: #fff !important; background: linear-gradient(135deg, #176854, #23866d) !important;
  border-color: #176854 !important; border-radius: var(--btn-radius) !important;
  box-shadow: 0 8px 20px rgba(23,104,84,.15);
}
.page-content :is(button,a):is([class^="bg-red-"],[class*=" bg-red-"]) {
  color: #fff !important; background: linear-gradient(135deg, #963a50, #bd4a60) !important;
  border-color: #963a50 !important; border-radius: var(--btn-radius) !important;
  box-shadow: 0 8px 20px rgba(150,58,80,.15);
}
.page-content :is(button,a):is([class^="bg-yellow-"],[class*=" bg-yellow-"]) {
  color: #fff !important; background: linear-gradient(135deg, #77622d, #9b8140) !important;
  border-color: #77622d !important; border-radius: var(--btn-radius) !important;
}
.page-content :is(button,a):is([class^="bg-gray-"],[class*=" bg-gray-"]) {
  color: #fff !important; background: linear-gradient(135deg, #365b63, #52747a) !important;
  border-color: #365b63 !important; border-radius: var(--btn-radius) !important;
}
.page-content button:is([class^="bg-green-"],[class*=" bg-green-"],[class^="bg-red-"],[class*=" bg-red-"],[class^="bg-yellow-"],[class*=" bg-yellow-"],[class^="bg-gray-"],[class*=" bg-gray-"]):hover {
  transform: translateY(-2px); filter: brightness(1.06);
}

/* Switches */
.page-content input[type="checkbox"].sr-only + div,
.page-content input[type="checkbox"].peer + div {
  border: 1px solid #c6d7d9 !important; background-color: #dce7e8 !important;
  box-shadow: inset 0 2px 5px rgba(10,56,63,.09);
  transition: background .22s var(--mzt-ease), border-color .22s, box-shadow .22s !important;
}
.page-content input[type="checkbox"].sr-only:checked + div,
.page-content input[type="checkbox"].peer:checked + div {
  border-color: #168d87 !important; background: linear-gradient(135deg, #168d87, #29aaa0) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08), 0 0 0 4px rgba(24,166,158,.08);
}

/* Third-party controls */
.page-content .select2-container--default .select2-selection,
.page-content .choices__inner,
.page-content .filepond--panel-root {
  border-color: var(--cnt-input-border) !important; border-radius: var(--cnt-input-radius) !important;
  background: #fbfdfd !important;
}
.page-content .select2-dropdown, .page-content .choices__list--dropdown {
  border: 1px solid var(--cnt-card-border) !important; border-radius: 14px !important;
  box-shadow: 0 20px 50px rgba(4,34,40,.16) !important; overflow: hidden;
}
.page-content .filepond--drop-label { color: #5a777c; }

/* Dense table actions stay quiet until the user interacts with them. */
.page-content tbody button:is([class^="bg-gray-"],[class*=" bg-gray-"]) {
  color: #46636a !important; background: #f2f6f7 !important; border-color: #d9e5e6 !important; box-shadow: none;
}
.page-content tbody button:is([class^="bg-blue-"],[class*=" bg-blue-"],[class^="bg-primary-"],[class*=" bg-primary-"]) {
  color: #0d716e !important; background: #eaf8f6 !important; border-color: #c6e9e5 !important; box-shadow: none;
}
.page-content tbody button:is([class^="bg-green-"],[class*=" bg-green-"]) {
  color: #17634f !important; background: #eaf7f2 !important; border-color: #cbe8dc !important; box-shadow: none;
}
.page-content tbody button:is([class^="bg-yellow-"],[class*=" bg-yellow-"]) {
  color: #7c652c !important; background: #faf6e9 !important; border-color: #e9deb8 !important; box-shadow: none;
}
.page-content tbody button:is([class^="bg-red-"],[class*=" bg-red-"]) {
  color: #9a3b50 !important; background: #fceef1 !important; border-color: #efcbd3 !important; box-shadow: none;
}
.page-content tbody button:is([class^="bg-"],[class*=" bg-"]):hover { color: #fff !important; filter: none; }
.page-content tbody button:is([class^="bg-gray-"],[class*=" bg-gray-"]):hover { background: #365b63 !important; border-color: #365b63 !important; }
.page-content tbody button:is([class^="bg-blue-"],[class*=" bg-blue-"],[class^="bg-primary-"],[class*=" bg-primary-"]):hover { background: #0b827d !important; border-color: #0b827d !important; }
.page-content tbody button:is([class^="bg-green-"],[class*=" bg-green-"]):hover { background: #18725d !important; border-color: #18725d !important; }
.page-content tbody button:is([class^="bg-yellow-"],[class*=" bg-yellow-"]):hover { background: #887237 !important; border-color: #887237 !important; }
.page-content tbody button:is([class^="bg-red-"],[class*=" bg-red-"]):hover { background: #a53d53 !important; border-color: #a53d53 !important; }