/* Desktop layout uses a left sidebar by default. If you previously applied
   a horizontal top-nav override, it has been removed to restore the
   original left-sidebar behavior. */
.admin-form.admin-form--centered .admin-table {
  max-width: 720px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .admin-form.admin-form--centered .admin-table { max-width: 100%; margin: 0; }
}

/* Narrow card variant to center the card itself inside the container */
.admin-card.admin-card--narrow {
  max-width: 880px;
  margin: 0 auto;
}
.admin-card.admin-card--narrow .admin-form { padding: 20px; }

/* admin/assets/admin.css
 * Admin Layout styles (sidebar, topbar, content)
 * Variant note (documentation only): a sidebar could link to
 *   Websites & Domains, Mail, Applications, Files, Databases,
 *   Statistics, Users, Account, WordPress, SEO, Laravel, Softaculous.
 * This stylesheet provides the look; actual links are defined in the HTML/PHP.
 *
 * Contains visual styles inspired by or adapted from
 * "Pro Sidebar Template" by Mohamed Azouaoui (MIT License).
 * https://github.com/azouaoui-med/pro-sidebar-template
 * Copyright (c) 2017 Mohamed AZOUAOUI
 */

.admin-footer {
  background:#0f172a;
  color:#cbd5e1;
  padding:12px 16px;
  text-align:center;
}
.admin-footer--fixed { position:fixed; left:0; right:0; bottom:0; z-index:800 }
.admin-footer__inner { max-width:1100px; margin:0 auto; }

/* Reserve space for a fixed footer to avoid overlapping page content. Adjust value if footer sizing changes. */
.admin-shell { padding-bottom:56px }

.admin-flash {
    max-width:1100px;
    margin:12px auto;
    padding:10px 12px;
    border-radius:6px;
    color:#0f172a;
}
.admin-flash--success { background:#dcfce7; border:1px solid #86efac; }
.admin-flash--error { background:#fee2e2; border:1px solid #fecaca; color:#7f1d1d; }
.admin-flash--info { background:#e6f0ff; border:1px solid #b6d4ff; color:#022c6b; }

/* Forms */
.admin-form { background:#fff; padding:16px; border-radius:6px; box-shadow:0 1px 2px rgba(0,0,0,0.05); }
.admin-form label { display:block; font-weight:600; margin-bottom:6px; }
.admin-form input[type="text"],
.admin-form input[type="email"],
.admin-form input[type="password"],
.admin-form textarea,
.admin-form select {
    width:100%; padding:8px 10px; border:1px solid #d1d5db; border-radius:4px; margin-bottom:10px;
}
.help-text{font-size:12px;color:#64748b;margin-top:4px;line-height:1.4}
html.admin-dark .help-text{color:#94a3b8}
.help-icon{display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;background:#1e293b;color:#fff;font-size:11px;border-radius:50%;cursor:help;margin-left:6px;vertical-align:baseline;font-weight:700}
html.admin-dark .help-icon{background:#334155}
.admin-btn { display:inline-inline; display:inline-block; padding:8px 14px; background:#111827; color:#fff; text-decoration:none; border-radius:6px; border:0; cursor:pointer; font-weight:600; line-height:1.25; letter-spacing:.3px; transition:background .18s, color .18s, box-shadow .18s, transform .18s; }
.admin-btn:hover { background:#1f2937; }
.admin-btn:active { background:#0f172a; transform:translateY(1px); }
.admin-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.admin-btn[disabled], .admin-btn.disabled { opacity:.55; cursor:not-allowed; pointer-events:none; }
/* Primary & semantic variants */
.admin-btn--primary { background:var(--accent); color:#fff; }
.admin-btn--primary:hover { background:var(--accent-hover); }
.admin-btn--primary:active { background:#1d4ed8; }
.admin-btn--secondary { background:#e5e7eb; color:#111; }
.admin-btn--secondary:hover { background:#d1d5db; }
.admin-btn--secondary:active { background:#cbd5e1; }
.admin-btn--danger { background:var(--danger); color:#fff; }
.admin-btn--danger:hover { background:var(--danger-hover); }
.admin-btn--danger:active { background:#b91c1c; }
/* Outline & subtle styles */
.admin-btn--outline { background:transparent; color:var(--accent); border:2px solid var(--accent); }
.admin-btn--outline:hover { background:var(--accent); color:#fff; }
.admin-btn--outline:active { background:var(--accent-hover); }
.admin-btn--ghost { background:transparent; color:#111; }
.admin-btn--ghost:hover { background:#f1f5f9; }
.admin-btn--ghost:active { background:#e2e8f0; }
html.admin-dark .admin-btn { background:var(--accent); }
html.admin-dark .admin-btn:hover { background:var(--accent-hover); }
html.admin-dark .admin-btn:active { background:#1d4ed8; }
html.admin-dark .admin-btn--secondary { background:#374151; color:#e5e7eb; }
html.admin-dark .admin-btn--secondary:hover { background:#4b5563; }
html.admin-dark .admin-btn--secondary:active { background:#525f6b; }
html.admin-dark .admin-btn--outline { color:var(--accent); border-color:var(--accent); }
html.admin-dark .admin-btn--outline:hover { background:var(--accent); color:#fff; }
html.admin-dark .admin-btn--ghost { color:var(--text-main); }
html.admin-dark .admin-btn--ghost:hover { background:#24324a; }
.admin-btn--tiny { padding:4px 10px; font-size:12px; border-radius:999px; }

@media (prefers-reduced-motion:reduce){
  .admin-btn{transition:none}
}


/* Flash messages */
.admin-flash {
  padding: 10px 14px;
  border-radius: 4px;
  margin: 10px 0;
  font-size: 0.9rem;
  font-weight: 500;
}
.admin-flash--info { background: #e0f2fe; color: #0369a1; }
.admin-flash--success { background: #dcfce7; color: #166534; }
.admin-flash--warning { background: #fef9c3; color: #854d0e; }
.admin-flash--error { background: #fee2e2; color: #991b1b; }

/* Modal overlay */
.modal {
  display: none;
  position: fixed;
  z-index: 1200;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
}
.modal.show { display: flex; }

/* Modal box */
.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 320px;
  max-width: 90%;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  animation: fadeIn 0.3s ease;
}
.modal-content h3 { margin-top: 0; margin-bottom: 10px; }
.modal-actions {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

/* Buttons */
.btn {
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
}
.btn.cancel { background: #e5e7eb; color: #111; }
.btn.cancel:hover { background: #d1d5db; }
.btn.confirm { background: #dc2626; color: #fff; }
.btn.confirm:hover { background: #b91c1c; }

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== Layout & Sidebar (migrated from inline header style block) ===== */
:root{
  --bg-main:#f8f8f8;--text-main:#111;--bg-alt:#111827;--text-light:#fff;--text-muted:#cbd5e1;
  /* Brand accent aligned with public site (logo orange) */
  --accent:#FF7A00;--accent-hover:#E6A06A;--danger:#ef4444;--danger-hover:#dc2626;
  --panel-bg:#fff;--card-shadow:rgba(0,0,0,.08);
  --footer-height:52px;
}
/* Dark theme override when html.admin-dark present */
html.admin-dark {
  --bg-main:#0f172a;
  --text-main:#e2e8f0;
  --bg-alt:#1e293b;
  --text-light:#f1f5f9;
  --text-muted:#94a3b8;
  --accent:#FF7A00;
  --accent-hover:#E6A06A;
  --danger:#ef4444;
  --danger-hover:#dc2626;
  --panel-bg:#1e293b;
  --card-shadow:rgba(0,0,0,.5);
}
html.admin-dark body.admin-body { background:var(--bg-main); color:var(--text-main); }
html.admin-dark .sidebar { background:var(--bg-alt); color:var(--text-light); }
html.admin-dark .admin-nav a { color:var(--text-muted); }
html.admin-dark .admin-nav a:hover { background:rgba(255,255,255,0.06); color:var(--text-light); }
html.admin-dark .admin-nav a.active { background:var(--accent); color:var(--text-light); }
html.admin-dark .content-body { background:transparent; }
html.admin-dark .table-wrap { background:var(--panel-bg); }
html.admin-dark .admin-table thead th { background:#24324a; color:var(--text-muted); }
html.admin-dark .admin-table th, html.admin-dark .admin-table td { border-bottom:1px solid #2e3c52; }
html.admin-dark .admin-form { background:var(--panel-bg); }
html.admin-dark .admin-form input, html.admin-dark .admin-form select, html.admin-dark .admin-form textarea { background:#0f172a; color:var(--text-main); border:1px solid #334155; }
html.admin-dark .admin-btn { background:var(--accent); }
html.admin-dark .admin-footer { background:#0b1322; color:var(--text-muted); }
html.admin-dark .modal-content { background:var(--panel-bg); color:var(--text-main); }
html.admin-dark .account-menu { background:var(--panel-bg) !important; border-color:#334155 !important; }
html.admin-dark .account-menu { background:var(--panel-bg); border-color:#334155; }
html.admin-dark .account-menu a { color:var(--text-main); }
html.admin-dark .account-menu a:hover { background:#24324a; }
html.admin-dark .sidebar-toggle { background:var(--accent); }
/* Dark mode: initial badge colors */
html.admin-dark .brand .logo{background:#0b1322}
html.admin-dark .brand .logo .logo-initial{color:#60a5fa}
body.admin-body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg-main);color:var(--text-main);padding-bottom:var(--footer-height)}
.admin-layout{display:flex;min-height:100vh}
.admin-nav{display:flex;flex-direction:column;gap:10px}
.admin-nav a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text-muted);padding:10px 14px;border-radius:6px;position:relative;font-weight:500;letter-spacing:.2px;transition:background .18s,color .18s,box-shadow .18s}
.admin-sidebar .admin-nav a:first-child{padding-top:10px;margin-top:0}
/* Sticky admin sidebar (mirrors public filter sidebar structure) */
.admin-sidebar{position:sticky;top:0;height:100vh;width:240px;min-width:240px;background:var(--panel-bg);border-right:1px solid #e5e7eb;display:flex;flex-direction:column;margin:0;padding:0}
html.admin-dark .admin-sidebar{border-right-color:#334155}
.admin-sidebar .admin-nav{padding:8px 6px 12px;display:flex;flex-direction:column;gap:2px}
.admin-nav a i{width:20px;text-align:center}
.admin-nav a:hover{background:rgba(255,122,0,.10);color:#111}
html.admin-dark .admin-nav a:hover{background:rgba(255,255,255,.06);color:var(--text-light)}
.admin-nav a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.admin-nav a.active{background:var(--accent);color:var(--text-light);font-weight:600;box-shadow:inset 3px 0 0 0 var(--accent-hover)}
/* Optional left indicator for hover (light) */
html:not(.admin-dark) .admin-nav a:hover::before, html.admin-dark .admin-nav a:hover::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); border-top-left-radius:6px; border-bottom-left-radius:6px; opacity:.6 }
html:not(.admin-dark) .admin-nav a.active::before, html.admin-dark .admin-nav a.active::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent-hover); border-top-left-radius:6px; border-bottom-left-radius:6px }
/* Improve light theme hover (original was too subtle) */
html:not(.admin-dark) .admin-nav a:hover{color:#111}
.logout-link{margin-top:auto}
.logout-link a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--danger);padding:10px 14px;border-radius:4px}
.logout-link a:hover{background:var(--danger);color:var(--text-light)}

/* (filter sidebar removed) */
/* ===== Brand utility (used in sidebar and topbar) ===== */
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{font-weight:700;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:#1f2c3a}
.brand .logo .logo-initial{font-weight:800;color:#7dd3fc;font-size:18px;line-height:1}
.brand .title{font-weight:700;letter-spacing:.2px}
.topbar .brand{margin-left:8px;color:inherit;text-decoration:none;font-weight:600}


/* Add breathing room between role chips and the theme/account controls */
.topbar-right .role-perm-chips { margin-right: 14px; }
@media (max-width:900px){ .topbar-right .role-perm-chips { margin-right: 6px; } }



/* Light theme variant inspired by mock */
html:not(.admin-dark){
  --ps-bg:#ffffff;--ps-text:#334155;--ps-muted:#94a3b8;--ps-active-start:#60a5fa;--ps-active-end:#22d3ee;--ps-hover:#f3f4f6;
}
html:not(.admin-dark) .pro-sidebar{border-right:1px solid #eef2f7;box-shadow:none}
html:not(.admin-dark) .pro-sidebar .brand .logo{background:linear-gradient(135deg,#60a5fa,#22d3ee)}
/* Tooltip for collapsed nav icons */
.nav-tooltip{position:absolute;left:34px;top:50%;transform:translateY(-50%);background:#1f2937;color:#f8fafc;font-size:12px;padding:4px 8px;border-radius:4px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.25);pointer-events:none;z-index:960;opacity:0;animation:navTipIn .15s forwards}
@keyframes navTipIn{from{opacity:0;transform:translateY(-50%) scale(.95)}to{opacity:1;transform:translateY(-50%) scale(1)}}
html.admin-dark .nav-tooltip{background:#0f2030;color:#e2e8f0;box-shadow:0 2px 6px rgba(0,0,0,.5)}

/* ===== Tables ===== */
.table-wrap{background:#fff;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.06);overflow:auto}
.admin-table{width:100%;border-collapse:collapse}
.admin-table thead th{background:#f8fafc;color:#6b7280;position:sticky;top:0;z-index:1;text-align:left}
.admin-table th,.admin-table td{padding:10px 12px;border-bottom:1px solid #eef2f7;text-align:left;vertical-align:top}
.admin-table tr:last-child td{border-bottom:none}
.table-fixed{table-layout:fixed}
.table-fixed th:first-child,.table-fixed td:first-child{width:50%}

/* Override for employee list: keep global fixed layout but make the first
  column narrow (checkbox column). Applied via `table-employees` class. */
.table-employees th:first-child,
.table-employees td:first-child,
.table-employees .col-checkbox { width:36px; min-width:36px; max-width:36px; text-align:center }

/* Override for logs table: ensure Date column keeps its intended width
  even when `table-fixed` globally sets the first column to 50%. */
.table-logs th:first-child,
.table-logs td:first-child,
.table-logs .col-date { width:160px; min-width:160px; max-width:160px }

/* Override for inventory table: keep the leading icon column narrow so
  the table doesn't allocate 50% width to the first cell (global .table-fixed). */
.table-inventory th:first-child,
.table-inventory td:first-child,
.table-inventory .col-icon { width:28px; min-width:28px; max-width:28px; text-align:center; vertical-align:middle }

/* Override for transactions table: ensure Date/Time column keeps an appropriate width
  rather than being stretched by the global .table-fixed rule. */
.table-transactions th:first-child,
.table-transactions td:first-child { width:160px; min-width:160px; max-width:160px }

/* Authors table: truncate long author names to keep layout tidy */
.table-authors td:first-child,
.table-authors th:first-child {
  max-width:720px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Ensure name cell (added class `col-name`) is constrained and shows ellipsis earlier */
.table-authors td.col-name { max-width:360px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* Manager-style table variant (Plesk-like) */
.table-manager{font-size:14px}
.table-manager thead th{background:#f6f7fb;color:#667085;font-weight:600;text-transform:none;border-bottom:1px solid #e5e7eb}
.table-manager tbody tr{height:44px}
.table-manager tbody tr:nth-child(odd){background:#fcfdff}
.table-manager tbody tr:hover{background:#f3f6fb}
.table-manager th,.table-manager td{padding:10px 14px;border-bottom:1px solid #e5e7eb;vertical-align:middle}
.table-manager td:first-child{font-weight:500;color:#1f2937}
.table-manager .col-checkbox{width:36px;text-align:center}
.table-manager .col-icon{width:28px}
.table-manager .col-size{width:100px;text-align:right;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.table-manager .col-modified{width:180px;color:#64748b}
.table-manager .col-perms{width:140px;color:#64748b;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.table-manager .col-user,.table-manager .col-group{width:140px;color:#64748b}
.table-manager .row-active{box-shadow:inset 2px 0 0 0 #60a5fa;background:#eef6ff}
/* Inventory-specific column helpers */
.table-manager .col-year{width:80px}
.table-manager .col-qty{width:70px;text-align:right;font-variant-numeric:tabular-nums}
.table-manager .col-price{width:110px;text-align:right;font-variant-numeric:tabular-nums}
.table-manager .col-category{min-width:160px}
/* Logs-specific column helpers */
.table-manager .col-date{width:160px}
.table-manager .col-type{width:90px}
.table-manager .col-code{width:100px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace}
.table-manager .col-source{width:120px}
.table-manager .col-ip{width:130px;font-variant-numeric:tabular-nums}
.table-manager .col-size{width:100px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.table-manager .col-employees{width:120px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Sort indicators */
.sort-indicator{display:inline-block;margin-left:6px;width:0;height:0;vertical-align:middle;border-left:4px solid transparent;border-right:4px solid transparent;opacity:.75}
.sort-indicator.sort-asc{border-bottom:6px solid #64748b}
.sort-indicator.sort-desc{border-top:6px solid #64748b}
html.admin-dark .sort-indicator.sort-asc{border-bottom-color:#9aa4b2}
html.admin-dark .sort-indicator.sort-desc{border-top-color:#9aa4b2}
/* Clickable header link style */
.th-sort{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.th-sort:hover{text-decoration:underline}
/* Badges (severity/status) */
.badge{display:inline-block;line-height:1;border-radius:14px;padding:4px 10px;font-size:12px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;background:#e2e8f0;color:#1e293b;vertical-align:middle}
.badge--mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.badge--info{background:#dbeafe;color:#1e3a8a}
.badge--success{background:#dcfce7;color:#065f46}
.badge--warning{background:#fef9c3;color:#854d0e}
.badge--error{background:#fee2e2;color:#7f1d1d}
.badge--debug{background:#f3f4f6;color:#374151}
.badge--neutral{background:#e5e7eb;color:#374151}
html.admin-dark .badge{background:#1e293b;color:#e2e8f0}
html.admin-dark .badge--info{background:#1e3a8a;color:#bfdbfe}
html.admin-dark .badge--success{background:#065f46;color:#bbf7d0}
html.admin-dark .badge--warning{background:#854d0e;color:#fef3c7}
html.admin-dark .badge--error{background:#7f1d1d;color:#fecaca}
html.admin-dark .badge--debug{background:#374151;color:#d1d5db}
html.admin-dark .badge--neutral{background:#374151;color:#d1d5db}
/* Sticky toolbar for filters */
.sticky-toolbar{position:sticky;top:0;background:var(--panel-bg);z-index:550;padding:8px 12px;margin:-4px -4px 12px -4px;box-shadow:0 2px 4px rgba(0,0,0,.08);border-bottom:1px solid #e5e7eb}
.sticky-toolbar--below-topbar{top:48px}
html.admin-dark .sticky-toolbar{box-shadow:0 2px 6px rgba(0,0,0,.5);border-bottom-color:#2a3a50}
/* Dark mode tweaks */
html.admin-dark .table-manager thead th{background:#152238;color:#9aa4b2;border-color:#2a3a50}
html.admin-dark .table-manager th, html.admin-dark .table-manager td{border-color:#2a3a50}
html.admin-dark .table-manager tbody tr:nth-child(odd){background:#0f172a}
html.admin-dark .table-manager tbody tr:hover{background:#172235}
html.admin-dark .table-manager td:first-child{color:#e2e8f0}
html.admin-dark .table-manager .col-size,
html.admin-dark .table-manager .col-modified,
html.admin-dark .table-manager .col-perms,
html.admin-dark .table-manager .col-user,
html.admin-dark .table-manager .col-group{color:#9aa4b2}
html.admin-dark .table-manager .row-active{box-shadow:inset 2px 0 0 0 #60a5fa;background:#112033}
/* ===== Utilities & Components for inline-style cleanup ===== */
.u-min-h-100vh{min-height:100vh}
.w-360{width:360px}
.mb-12{margin-bottom:12px}
.mb-14{margin-bottom:14px}
.mb-18{margin-bottom:18px}
.text-danger{color:#b91c1c}
.text-center{text-align:center}
.ml-12{margin-left:12px}
.max-w-600{max-width:600px;margin:20px auto}
.flex{display:flex}
.flex-1{flex:1}
.gap-8{gap:8px}
.gap-10{gap:10px}
.gap-12{gap:12px}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-end{justify-content:flex-end}
.page-pad{flex:1;padding:24px 32px}

/* Centered wrapper used to align page titles with narrow content cards */
.page-title-wrap{max-width:880px;margin:0 auto}
.page-title{margin:8px 0 14px;font-size:20px}
.admin-form{max-width:100%;box-sizing:border-box}

@media (max-width:900px){
  .page-pad{padding:12px 16px}
}
.section-title{margin:0 0 10px;font-size:16px}
.admin-card{background:var(--panel-bg);padding:12px;border-radius:8px;box-shadow:0 6px 18px var(--card-shadow)}
.admin-stats{display:flex;gap:12px;margin-bottom:18px}
.stat-value{font-size:1.25rem;font-weight:600;margin-top:6px}
.admin-toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.admin-input{padding:6px 10px;border:1px solid #e5e7eb;border-radius:6px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end}
/* Grid used for inline filter forms (inventory) - keep stable 3-column layout */
.grid-filter{display:grid;grid-template-columns:1fr 260px auto;gap:12px;align-items:center}
.grid-filter>div{min-width:0}
.grid-filter .filter-actions{justify-self:end;display:flex;gap:8px;align-items:center}
.form-label-compact{display:block;font-weight:600;margin-bottom:6px}
.span-all{grid-column:1/-1}
.text-right{text-align:right}
html.admin-dark .admin-card{background:var(--panel-bg)}
html.admin-dark .admin-input{background:#0f172a;color:var(--text-main);border:1px solid #334155}
/* ===== New refactored elements (search, account, icons) ===== */
.topbar.admin-topbar{position:sticky;top:0;z-index:980;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 12px;background:var(--panel-bg);border-bottom:1px solid #e5e7eb}
html.admin-dark .topbar.admin-topbar{border-bottom-color:#2a3a50}
.admin-content{display:block}
.content-body{padding:12px 16px}

/* Prevent content from visually overlapping the sticky topbar.
   Adds extra top padding so page content (filters, tables) appears
   below the topbar on larger viewports. Adjust values if your topbar
   height changes. */
.content-body{padding-top:64px}
@media (max-width:900px){
  /* Smaller top spacing on mobile to preserve vertical space */
  .content-body{padding-top:36px}
}

/* Notifications create form: three-column layout (left / middle / right) */
.notifications-form{
  display:grid;
  grid-template-columns:1fr 220px 1fr;
  grid-template-areas:
    "title start severity"
    "message end ."
    ". . button";
  gap:16px;align-items:start
}
.notifications-form .fld-title{grid-area:title}
.notifications-form .fld-start{grid-area:start}
.notifications-form .fld-severity{grid-area:severity}
.notifications-form .fld-message{grid-area:message}
.notifications-form .fld-end{grid-area:end}
.notifications-form .fld-button{grid-area:button;justify-self:end;align-self:end}
.notifications-form .admin-input{width:100%}
.notifications-form select[multiple]{height:160px}

@media (max-width:900px){
  .notifications-form{grid-template-columns:1fr;grid-template-areas:
    "title"
    "message"
    "severity"
    "pinned"
    "roles"
    "employees"
    "button";gap:12px}
  .notifications-form .fld-button{justify-self:flex-start}
}
/* Removed negative margin hack; sticky sidebar ensures visual flush */
.topbar .search{margin-left:16px;flex:0 1 520px;max-width:520px;display:flex;min-width:0}
.topbar .search input{width:100%;padding:8px 10px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;color:#111;font-size:14px;box-sizing:border-box;max-width:100%}
html.admin-dark .topbar .search input{background:#0f172a;border-color:#334155;color:var(--text-main)}
.account{margin-left:auto;position:relative;display:flex;align-items:center}
.topbar .role-perm-chips{margin-left:0;margin-right:8px;max-width:18rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.topbar-right{justify-self:end;display:flex;align-items:center;gap:10px}
.topbar .account{margin-left:0}
.topbar-username{background:#f3f4f6;padding:6px 10px;border-radius:8px;font-weight:600;color:#0f172a}
html.admin-dark .topbar-username{background:transparent;color:var(--text-main);opacity:0.9}
.sidebar-toggle.btn-icon{background:#111827;display:inline-flex;align-items:center;justify-content:center;border:none;color:#fff;border-radius:8px;width:36px;height:36px;cursor:pointer}
html.admin-dark .sidebar-toggle.btn-icon{color:#fff}
html.admin-dark .sidebar-toggle.btn-icon{background:var(--accent)}
.account-menu{display:none;position:absolute;right:0;top:40px;background:#fff;border:1px solid #e5e7eb;border-radius:6px;min-width:200px;box-shadow:0 6px 18px rgba(0,0,0,.08);z-index:1300}
.account-menu__heading{padding:10px 12px;border-bottom:1px solid #f3f4f6;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.account-menu__link{display:block;padding:10px 12px;text-decoration:none;color:#111;font-size:14px}
.account-menu__link:hover{background:#f1f5f9}
.account-menu__link--danger{color:#b91c1c}
.account-menu__link--danger:hover{background:#fee2e2}
html.admin-dark .account-menu{background:var(--panel-bg);border-color:#334155}
html.admin-dark .account-menu__heading{border-bottom:1px solid #334155;color:var(--text-main)}
html.admin-dark .account-menu__link{color:var(--text-main)}
html.admin-dark .account-menu__link:hover{background:#24324a}
html.admin-dark .account-menu__link--danger{color:#ef4444}
html.admin-dark .account-menu__link--danger:hover{background:#3f2121}
/* Section inside account dropdown (e.g., Roles) */
.account-menu__section{padding:8px 12px;border-top:1px solid #f3f4f6}
.account-menu__section-title{font-size:12px;color:#64748b;margin-bottom:6px;text-transform:uppercase;letter-spacing:.6px}
html.admin-dark .account-menu__section{border-top-color:#334155}
html.admin-dark .account-menu__section-title{color:#94a3b8}

/* Icon-only button refinement (shared) */
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:#111827;color:#fff;border:none;cursor:pointer;transition:background .18s,color .18s}
.btn-icon:hover{background:#1f2937}
.btn-icon:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
html.admin-dark .btn-icon{background:var(--accent);color:#fff}
html.admin-dark .btn-icon:hover{background:var(--accent-hover)}
html.admin-dark .btn-icon:active{background:#1d4ed8}


/* Overlay used by layouts when needed */
#overlay.overlay{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.35);z-index:970;display:none}

/* ===== Dashboard layout (admin-index) ===== */
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
@media (max-width: 992px){.dashboard-grid{grid-template-columns:1fr}}
.panel-title{font-weight:700;margin:0 0 10px;padding-bottom:6px;border-bottom:2px solid #111}
html.admin-dark .panel-title{border-bottom-color:#e2e8f0}
.dashboard-heading{
  display:block;
  width: calc(100% + 36px); /* extend to container edges (container padding 18px) */
  margin-left: -18px;
  padding: 18px 18px 12px;
  font-size:32px;
  line-height:1.2;
  margin:0 0 20px;
  font-weight:700;
  letter-spacing:.5px;
}
/* Centered form helper for pages that need the form/table centered */
.admin-form.admin-form--centered{max-width:900px;margin:0 auto}
.admin-form.admin-form--centered .admin-table{width:100%}
@media (max-width: 640px){.dashboard-heading{font-size:26px;margin-bottom:16px}}
.form-actions{display:flex;justify-content:flex-end;align-items:flex-end;margin-top:4px}
/* Extra spacing between Start and End date inputs */
.grid-4 .end-field{margin-left:24px}
@media (max-width:640px){.grid-4 .end-field{margin-left:3px}}

/* Collapsible filter panel helpers (used by inventory filters) */
.filter-panel{overflow:hidden;max-height:1200px;transition:max-height .28s ease,padding .22s ease;margin-bottom:12px}
.filter-panel.collapsed{max-height:0;padding-top:0;padding-bottom:0;margin-bottom:0}
.filter-toggle{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:transparent;border:1px solid transparent;cursor:pointer;font-weight:600}
.filter-toggle:hover{background:rgba(0,0,0,0.03)}
.filter-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.filter-toggle .chev{display:inline-block;transform:rotate(0);transition:transform .22s}
.filter-toggle[aria-expanded="false"] .chev{transform:rotate(-90deg)}

/* Ensure the page content below moves smoothly when filters toggle */
.page-pad .filter-placeholder{transition:height .28s ease}

/* Ensure topbar/header spans full viewport width (avoid being constrained) */
.topbar.admin-topbar{left:0;right:0;width:100%;box-sizing:border-box}
/* Prevent horizontal scroll from 100vw when vertical scrollbars present */
.topbar.admin-topbar .brand{max-width:calc(100% - 200px)}

/* Mobile menu button: hidden by default, shown only on small screens.
  Use high-specificity rules to avoid being overridden by .btn-icon. */
.topbar.admin-topbar .mobile-menu-btn { display: none !important; }


/* Admin pages compatibility: ensure admin sidebar does not overlap admin content.
   The admin templates use `.admin-sidebar` and `.admin-main` so provide the same
   push/overlay behavior used by the public sidebar rules above. */
.admin-shell { display: flex; align-items: stretch; overflow-x: hidden; }
.admin-sidebar { flex: 0 0 260px; width: 260px; }
.admin-main { flex: 1 1 auto; transition: margin-left 0.3s ease; }
/* Desktop: push admin-main to the right when sidebar is present/active */
.admin-sidebar + .admin-main, .admin-sidebar.active + .admin-main { margin-left: 260px; }
/* Small screens: keep overlay behavior (no left margin) */
@media (max-width: 768px) {
  .admin-sidebar + .admin-main, .admin-sidebar.active + .admin-main { margin-left: 0; }
  .admin-sidebar { position: fixed; z-index: 900; left: 0; top: 0; height: 100%; }
}

/* Mobile sidebar toggle behavior */
@media (max-width: 900px) {
  /* Hide the sidebar off-canvas by default and slide it in when active */
  #adminSidebar.sidebar { transform: translateX(-110%); transition: transform .22s ease; will-change: transform; }
  #adminSidebar.sidebar.active { transform: translateX(0); box-shadow: 0 8px 28px rgba(0,0,0,.28); }

  /* Ensure page content doesn't get a left margin on small screens */
  .admin-shell > .page-pad { margin-left: 0 !important; }

  /* Mobile menu button (visible only on small screens) */
  .topbar.admin-topbar .mobile-menu-btn { display: inline-flex !important; align-items:center; justify-content:center; width:40px; height:40px; border-radius:8px; background:var(--panel-bg); border:1px solid #e5e7eb; color:var(--text-main); }
  .mobile-menu-btn .fa-bars{font-size:16px}

  /* Overlay: default hidden, shown when toggled */
  #overlay.overlay { display:none; }
  #overlay.overlay.show { display:block; }

  /* Prevent scrolling while sidebar is open */
  body.no-scroll { overflow: hidden; }
}



/* Mobile improvements: make inline filter grids collapse, improve table scrolling and touch targets */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: 1fr; align-items:stretch; }
  .grid-4 > div { width:100%; }
  .grid-4 .span-all { display:flex; gap:8px; flex-direction:row; justify-content:flex-start; }
  /* Ensure action buttons are easy to tap on mobile */
  .grid-4 .admin-btn, .grid-4 a.admin-btn { padding:10px 14px; font-size:15px; }
  /* Make inputs slightly larger for touch */
  .admin-input { padding:10px 12px; font-size:15px; }
}

/* Improve table scrolling on touch devices */
.table-wrap { -webkit-overflow-scrolling: touch; overflow:auto; }
/* Allow table cells to wrap where appropriate (messages, referers) */
.table-wrap th, .table-wrap td { word-break: break-word; }
/* Prevent overly narrow columns from collapsing on small screens by allowing a reasonable min-width.
   Use responsive breakpoints to balance horizontal scrolling vs wrapping for long message/referer cells. */
.table-wrap table { min-width:720px; }

@media (max-width:900px) {
  .table-wrap table { min-width:640px; }
}

@media (max-width:420px) {
  /* On very small devices prefer wrapping and avoid forcing horizontal scroll. */
  .table-wrap table { min-width:0; }
}

/* Ensure page padding is compact on smaller phones */
@media (max-width:420px) {
  .page-pad { padding:10px 12px; }
  .page-title { font-size:18px; }
}

/* Very-narrow screen adjustments: reduce paddings, font sizes, and card spacing
   to maximize visible content on small phones (<=420px). */
@media (max-width:420px) {
  .page-pad { padding:8px 10px; }
  .page-title { font-size:16px; margin:6px 0 10px; }
  .admin-card { padding:10px; }
  .admin-input { padding:8px 10px; font-size:14px; }
  .admin-btn { padding:8px 12px; font-size:14px; }
  .admin-table th, .admin-table td { padding:8px 10px; font-size:13px; }
  .table-manager tbody tr{height:40px}
  .topbar.admin-topbar { padding:8px 10px; gap:8px }
  .topbar-right { gap:8px }
  .topbar-username { max-width:8.5rem; padding:4px 8px; font-size:13px }
  .role-perm-chips { max-width:8rem; }
  .mobile-menu-btn { width:36px; height:36px; }
  .badge { padding:4px 6px; font-size:11px; }
  /* Slightly reduce panel shadows to save vertical space */
  .admin-card { box-shadow: 0 4px 12px var(--card-shadow); }
  /* Fine-tune inputs in filter grid */
  .grid-4 { gap:8px }
  .grid-4 .span-all { gap:6px }
}