@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap');

/* ===================================
   Global Styles & Variables
   =================================== */
:root {
  --bg-page: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-alt: #f1f5f9;
  --primary-green: #059669;
  --primary-green-hover: #047857;
  --primary-green-active: #036049;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --border-color: #e2e8f0;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #3b82f6;
  --danger-hover: #dc2626;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radius scale */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Elevation (shadow) scale */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 20px -6px rgba(15, 23, 42, 0.10), 0 2px 6px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, 0.18), 0 6px 16px -6px rgba(15, 23, 42, 0.08);
  --shadow-focus: 0 0 0 3px rgba(5, 150, 105, 0.20);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 380ms;
}

/* Dark Mode Variables */
html.dark {
  --bg-page: #0b1220;
  --bg-card: #1e293b;
  --bg-card-alt: #17233a;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --border-color: #2f3e57;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 24px -8px rgba(0, 0, 0, 0.55), 0 2px 8px -2px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.65), 0 8px 20px -6px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 3px rgba(16, 185, 129, 0.28);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Tajawal', sans-serif !important;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  display: flex;
  height: 100vh;
  overflow: hidden;
  transition: background-color var(--duration-base) var(--ease-in-out), color var(--duration-base) var(--ease-in-out);
}

/* Smooth, curated theme-switch transition — not applied via a blanket `*`
   selector, which would fight layout/animation performance elsewhere. */
.sidebar, .top-navbar, .card-panel, .kpi-card, .modal-card, .dropdown-menu,
.form-control, .search-input, .select-input, .nav-item, .btn-add, .btn-action,
.btn-save, .btn-outline, table, th, td, .tenant-card, .mode-card, .product-card,
.login-card, .cart-section, .cart-item, .pos-header {
  transition-property: background-color, border-color, color, box-shadow, transform, opacity;
  transition-duration: var(--duration-base);
  transition-timing-function: var(--ease-in-out);
}

/* ===================================
   Layout: Sidebar & Main Wrapper
   =================================== */
.sidebar {
  width: 260px;
  background-color: var(--bg-card);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 12px;
  flex-shrink: 0;
  transition: transform var(--duration-slow) var(--ease-out), background-color var(--duration-base) var(--ease-in-out), border-color var(--duration-base) var(--ease-in-out);
  animation: sidebar-in var(--duration-slow) var(--ease-out) both;
}

@keyframes sidebar-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

.sidebar > div:first-of-type {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main-wrapper {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ===================================
   Component: Sidebar Navigation
   =================================== */
.sidebar-brand {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary-green);
  text-align: center;
  margin-bottom: 24px;
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 4px;
}

.nav-item {
  position: relative;
  padding: 12px 16px 12px 20px;
  border-radius: 10px;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  border: none;
  background: transparent;
  width: 100%;
  text-align: right;
  font-size: 14px;
  display: block;
}

.nav-item::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--primary-green);
  border-radius: 4px;
  transform: translateY(-50%);
  transition: height var(--duration-base) var(--ease-out);
}

.nav-item.active,
.nav-item:hover {
  background: rgba(5, 150, 105, 0.1);
  color: var(--primary-green);
}

/* The accent bar + horizontal shift are a sidebar-list affordance — they
   only make sense there. Scoped explicitly so they never bleed into the
   top-navbar's reused .nav-item class (dropdown triggers, icon buttons),
   which needs a completely different, toolbar-appropriate treatment. */
.nav-menu .nav-item:hover {
  transform: translateX(-2px);
}

.nav-menu .nav-item.active::before {
  height: 60%;
}

/* ===================================
   Component: Top Navbar (Header)
   =================================== */
.top-navbar {
  padding: 20px 32px;
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.page-title {
  font-weight: 700;
  font-size: 18px;
}

.top-navbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Toolbar chips (company switcher, theme toggle, user menu) get their own
   treatment — a clean pill with a visible border at rest, a subtle tint on
   hover, no sidebar-style shift or accent bar, and consistent height so
   icon-only and icon+label buttons line up. */
.top-navbar-actions .nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  font-size: 13px;
  white-space: nowrap;
  width: auto;
}

.top-navbar-actions .nav-item:hover {
  background: var(--bg-page);
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

.top-navbar-actions .nav-item.active {
  background: transparent;
  color: var(--text-primary);
}

/* The one primary action in the toolbar (POS) — filled, so it reads as
   the "go do the main thing" button against the otherwise neutral chips. */
.nav-item-primary {
  background: var(--primary-green);
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow-xs);
}

.top-navbar-actions .nav-item-primary:hover {
  background: var(--primary-green-hover);
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

/* Icon-only chip (theme toggle) — square instead of a wide pill. */
.nav-item-icon {
  width: 38px;
  padding: 0;
  justify-content: center;
  font-size: 15px;
}

.chevron {
  display: inline-block;
  font-size: 10px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.dropdown:has(.dropdown-menu.show) .chevron {
  transform: rotate(180deg);
}

.hamburger-btn {
  display: none; /* Hidden on desktop */
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

/* Dropdown Menu Styles */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  width: 220px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), visibility 0s var(--duration-fast);
  transform-origin: top left;
}

.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), visibility 0s;
}

.dropdown-header {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 700;
}

.dropdown-item {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.dropdown-item:hover {
  background-color: var(--bg-page);
  transform: translateX(-2px);
}

/* ===================================
   Main Content Area
   =================================== */
.content-area {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.content-area > *:not(.kpi-row):not(.dashboard-grid) {
  animation: content-in var(--duration-slow) var(--ease-out) both;
}

.content-area > *:nth-child(2) { animation-delay: 40ms; }
.content-area > *:nth-child(3) { animation-delay: 80ms; }
.content-area > *:nth-child(4) { animation-delay: 120ms; }

@keyframes content-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.card-panel {
  background-color: var(--bg-card);
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-xs);
}

/* ===================================
   Dashboard Specific Styles
   =================================== */

/* KPI Cards Grid */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.kpi-card {
  background: var(--bg-card);
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-xs);
}

.kpi-row .kpi-card {
  animation: content-in var(--duration-slow) var(--ease-out) both;
}

.kpi-row .kpi-card:nth-child(1) { animation-delay: 0ms; }
.kpi-row .kpi-card:nth-child(2) { animation-delay: 60ms; }
.kpi-row .kpi-card:nth-child(3) { animation-delay: 120ms; }
.kpi-row .kpi-card:nth-child(4) { animation-delay: 180ms; }

.kpi-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.kpi-val {
  font-size: 26px;
  font-weight: 800;
  margin-top: 4px;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.badge-growth {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(5,150,105,0.1);
  color: var(--primary-green);
  transition: transform var(--duration-fast) var(--ease-out);
}

.kpi-card:hover .badge-growth {
  transform: scale(1.05);
}

/* Dashboard Main Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.dashboard-grid > * {
  animation: content-in var(--duration-slow) var(--ease-out) both;
}

.dashboard-grid > *:nth-child(2) { animation-delay: 80ms; }

/* Table Styles */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  text-align: right;
  font-size: 14px;
}

th {
  padding: 12px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid var(--border-color);
  text-align: right;
  white-space: nowrap;
}

td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--border-color);
  transition: background-color var(--duration-fast) var(--ease-out);
}

tbody tr {
  transition: background-color var(--duration-fast) var(--ease-out);
}

tbody tr:hover td {
  background-color: var(--bg-page);
}

tbody tr:last-child td {
  border-bottom: none;
}

/* ===================================
   Forms & Inputs
   =================================== */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.form-group label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}

.form-control, .search-input, .select-input {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-page);
  color: var(--text-primary);
  outline: none;
  width: 100%;
  font-size: 14px;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background-color var(--duration-base) var(--ease-in-out);
}

.form-control:focus, .search-input:focus, .select-input:focus {
  border-color: var(--primary-green);
  box-shadow: var(--shadow-focus);
}

.btn-add, .btn-action, .btn-save {
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  background: var(--primary-green);
  color: white;
  border: none;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  text-decoration: none;
  display: inline-block;
  box-shadow: var(--shadow-xs);
}

.btn-add:hover, .btn-action:hover, .btn-save:hover {
  background: var(--primary-green-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-add:active, .btn-action:active, .btn-save:active {
  transform: translateY(0);
  background: var(--primary-green-active);
  box-shadow: var(--shadow-xs);
}

.btn-add:disabled, .btn-action:disabled, .btn-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-action {
  background: none;
  border: 1px solid var(--border-color);
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12px;
  box-shadow: none;
}

.btn-action:hover {
  background: var(--bg-page);
  border-color: var(--primary-green);
  color: var(--primary-green);
}

.btn-action.delete {
  border-color: var(--danger);
  color: var(--danger);
}

.btn-action.delete:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: var(--danger);
  color: var(--danger-hover);
}

/* Action Badges */
.badge-action { padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: bold; }
.action-create { background: rgba(5, 150, 105, 0.1); color: var(--primary-green); }
.action-update { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.action-delete { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
.action-login { background: rgba(245, 158, 11, 0.1); color: var(--warning); }

/* ===================================
   Responsive Design
   =================================== */
@media (max-width: 992px) {
  .dashboard-grid {
    grid-template-columns: 1fr; /* Stack grid on tablets */
  }
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    transform: translateX(100%); /* Hide sidebar off-screen */
    z-index: 1000;
  }

  .sidebar.show {
    transform: translateX(0); /* Show sidebar */
  }

  .hamburger-btn {
    display: block; /* Show hamburger on mobile */
  }

  .top-navbar-actions {
    gap: 8px;
  }
  .top-navbar-actions .nav-item { padding: 8px 10px; }

  .top-navbar {
    padding: 16px;
  }

  .content-area {
    padding: 16px;
  }
}

/* ===================================
   Table Action Bars (search + add button)
   =================================== */
.table-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.table-actions .search-input {
  flex: 1;
  min-width: 220px;
  max-width: 360px;
}

/* ===================================
   Modals
   =================================== */
.modal-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.55);
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out), visibility 0s var(--duration-base);
}

.modal-overlay.show {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-base) var(--ease-out), visibility 0s;
}

.modal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  transform: scale(0.94) translateY(8px);
  transition: transform var(--duration-base) var(--ease-out);
}

.modal-overlay.show .modal-card {
  transform: scale(1) translateY(0);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

@media (max-width: 640px) {
  .form-row,
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.section-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===================================
   Badges (status / type)
   =================================== */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.badge-paid, .badge-collected, .badge-active, .badge-posted {
  background: rgba(5, 150, 105, 0.1);
  color: var(--primary-green);
}

.badge-pending, .badge-draft {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.badge-unpaid, .badge-closed {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

.type-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

.type-asset { background: rgba(59, 130, 246, 0.1); color: var(--info); }
.type-liability { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
.type-income { background: rgba(5, 150, 105, 0.1); color: var(--primary-green); }
.type-expense { background: rgba(245, 158, 11, 0.1); color: var(--warning); }

.has-debt { color: var(--danger); font-weight: 800; }
.no-debt { color: var(--primary-green); font-weight: 800; }

/* ===================================
   Journal Entry Summary
   =================================== */
.summary-box {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--bg-page);
  padding: 16px 20px;
  border-radius: 12px;
  margin-top: 20px;
  font-weight: 700;
}

.balanced { color: var(--primary-green); }
.unbalanced { color: var(--danger); }

.btn-remove {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  border: none;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.btn-remove:hover {
  background: rgba(239, 68, 68, 0.18);
  transform: scale(1.06);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  box-shadow: none;
}

.btn-outline:hover {
  background: var(--bg-page);
  border-color: var(--text-secondary);
  color: var(--text-primary);
  transform: none;
}

/* ===================================
   Stats / Analytics
   =================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.stat-title {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.stat-value {
  font-size: 26px;
  font-weight: 800;
}

/* ===================================
   Loading / Empty / Toast states
   =================================== */
.loading-row td {
  text-align: center;
  padding: 32px 12px;
  color: var(--text-secondary);
  position: relative;
  overflow: hidden;
}

.loading-row td::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.10), transparent);
  background-size: 200% 100%;
  animation: skeleton-sweep 1.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes skeleton-sweep {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color);
  border-top-color: var(--primary-green);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-inline-end: 8px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Standalone skeleton bar utility — available for any page that wants a
   true skeleton block instead of a spinner (e.g. a stat tile placeholder). */
.skeleton-bar {
  display: block;
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-card-alt) 25%, var(--border-color) 50%, var(--bg-card-alt) 75%);
  background-size: 200% 100%;
  animation: skeleton-sweep 1.6s ease-in-out infinite;
}

.empty-row td {
  text-align: center;
  padding: 40px 12px;
  color: var(--text-secondary);
  animation: content-in var(--duration-base) var(--ease-out) both;
}

.error-row td {
  color: var(--danger);
}

.error-row .retry-btn {
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--text-primary);
}

.toast-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-inline-start: 4px solid var(--primary-green);
  color: var(--text-primary);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  font-weight: 600;
  min-width: 240px;
  animation: toast-in var(--duration-base) var(--ease-out);
}

.toast.toast-leaving {
  animation: toast-out var(--duration-fast) var(--ease-in-out) forwards;
}

.toast.error { border-inline-start-color: var(--danger); }
.toast.info { border-inline-start-color: var(--info); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(6px) scale(0.97); }
}

.form-error {
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
  margin-top: -10px;
  margin-bottom: 4px;
  display: none;
}

.form-error.show { display: block; }

.form-control.invalid, .search-input.invalid {
  border-color: var(--danger);
}

fieldset:disabled { opacity: 0.6; }

.skeleton-row td {
  padding: 10px 12px;
}

/* ===================================
   Accessibility
   =================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.nav-item:focus-visible,
.tenant-card:focus-visible,
.mode-card:focus-visible {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary-green);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 3000;
  font-weight: 700;
}

.skip-link:focus {
  left: 0;
}

/* Hides the page while auth-guard.js resolves the Firebase auth state, so
   protected content never flashes before a redirect to login.html. */
html.auth-checking body {
  visibility: hidden;
}

@media print {
  .sidebar, .top-navbar, .table-actions, .hamburger-btn, .toast-container,
  .card-panel .btn-print, .btn-add, button.btn-action {
    display: none !important;
  }
  .main-wrapper, .content-area { padding: 0 !important; overflow: visible !important; }
  body { overflow: visible !important; height: auto !important; }
}

/* ===================================
   Responsive table polish
   =================================== */
.card-panel {
  overflow-x: auto;
}

.card-panel table {
  min-width: 560px;
}

@media (max-width: 768px) {
  th, td {
    padding: 10px 8px;
    font-size: 13px;
  }

  .card-panel {
    padding: 16px;
  }

  .modal-card {
    padding: 20px;
  }

  .kpi-row, .stats-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  th, td {
    padding: 10px 6px;
    font-size: 12.5px;
  }
}

/* ===================================
   Cross-page navigation transitions (progressive enhancement)
   Chromium/Safari-supporting browsers get a soft crossfade between full
   page loads when clicking between sidebar links; unsupported browsers
   silently ignore this and navigate exactly as before.
   =================================== */
@view-transition {
  navigation: auto;
}

/* ===================================
   Users & Roles permission grid (moved out of users-roles.html's inline
   <style> so it lives with the rest of the shared design system)
   =================================== */
.permissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.permission-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background-color: var(--bg-page);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  transition: background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.permission-toggle:has(input:checked) {
  box-shadow: 0 0 0 1px var(--primary-green) inset;
  background-color: rgba(5, 150, 105, 0.08);
}

/* ===================================
   Reduced motion
   =================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}