/* ============================================================
   EMPOWA360 — APP STYLESHEET
   Sections:
     1. Design tokens        (above, in :root)
     2. Reset & base
     3. Typography
     4. Layout shell
     5. Sidebar
     6. Topbar
     7. Page header & breadcrumb
     8. Cards
     9. Stat cards / KPI
    10. Tables
    11. Forms
    12. Buttons
    13. Badges & status pills
    14. Alerts & toasts
    15. Modals & drawers
    16. Dropdowns
    17. Tabs & pills
    18. Pagination
    19. Empty states
    20. Avatars
    21. Progress & loaders
    22. Utilities
    23. Responsive
   ============================================================ */

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: Consolas, 'Liberation Mono', monospace;

  --white: #ffffff;
  --neutral-050: #f7f9fb;
  --neutral-100: #eef2f5;
  --neutral-200: #dce3e8;
  --neutral-300: #c4cfd7;
  --neutral-400: #9aa8b3;
  --neutral-500: #71808c;
  --neutral-600: #52616d;
  --neutral-700: #394852;
  --neutral-800: #26343d;
  --neutral-900: #17232b;

  --brand-100: #dbeafe;
  --brand-700: #1d628f;
  --brand-800: #174a70;
  --brand-900: #12344d;
  --accent-100: #ccfbf1;
  --accent-600: #0f766e;
  --accent-700: #0f665f;
  --accent-800: #115e59;

  --success-100: #dcfce7;
  --success-600: #15803d;
  --warning-100: #fef3c7;
  --warning-600: #b45309;
  --danger-100: #fee2e2;
  --danger-600: #dc2626;
  --info-100: #dbeafe;
  --info-600: #2563eb;

  --bg-app: #f7f9fb;
  --bg-card: #ffffff;
  --bg-hover: #eef2f5;
  --text-primary: #17232b;
  --text-secondary: #52616d;
  --text-muted: #71808c;
  --text-link: #1d628f;
  --border-default: #dce3e8;
  --border-strong: #b7c2cc;
  --border-focus: #1d7aa8;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-base: 1.5;
  --lh-tight: 1.25;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(23, 35, 43, 0.08);
  --shadow-md: 0 8px 24px rgba(23, 35, 43, 0.12);
  --shadow-lg: 0 16px 40px rgba(23, 35, 43, 0.16);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
  --ease: ease;
  --sidebar-width: 256px;
  --sidebar-collapsed-width: 72px;
  --topbar-height: 64px;
  --page-max-width: 1440px;
  --z-sidebar: 1000;
  --z-topbar: 900;
  --z-dropdown: 1100;
  --z-modal-backdrop: 1200;
  --z-modal: 1300;
  --z-toast: 1400;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

hr {
  border: 0;
  border-top: 1px solid var(--border-default);
  margin: var(--space-6) 0;
}

::selection { background: var(--brand-100); color: var(--brand-900); }

/* Focus ring — accessible, consistent */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); }

.text-secondary { color: var(--text-secondary) !important; }
.text-muted     { color: var(--text-muted) !important; }
.text-mono      { font-family: var(--font-mono); font-size: var(--fs-sm); }
.text-xs        { font-size: var(--fs-xs); }
.text-sm        { font-size: var(--fs-sm); }
.text-lg        { font-size: var(--fs-lg); }
.text-right     { text-align: right; }
.text-center    { text-align: center; }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.04em; }
.fw-medium      { font-weight: var(--fw-medium); }
.fw-semibold    { font-weight: var(--fw-semibold); }
.fw-bold        { font-weight: var(--fw-bold); }

.label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}

/* ---------- 4. Layout shell ---------- */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--brand-900);
  color: var(--neutral-300);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: var(--z-sidebar);
  overflow-y: auto;
  transition: width var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.app-main {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--dur-base) var(--ease);
}

.app-content {
  padding: var(--space-6);
  max-width: var(--page-max-width);
  width: 100%;
  margin: 0 auto;
}

/* Collapsed sidebar state (desktop) */
body.sidebar-collapsed .app-sidebar { width: var(--sidebar-collapsed-width); }
body.sidebar-collapsed .app-main    { margin-left: var(--sidebar-collapsed-width); }
body.sidebar-collapsed .sidebar-label,
body.sidebar-collapsed .sidebar-group-title,
body.sidebar-collapsed .sidebar-section-title { display: none; }
body.sidebar-collapsed .sidebar-brand { justify-content:center; gap:0; padding-inline:11px; }
body.sidebar-collapsed .sidebar-brand .brand-text,
body.sidebar-collapsed .sidebar-profile-copy,
body.sidebar-collapsed .sidebar-profile-chevron { display:none; }
body.sidebar-collapsed .sidebar-profile { justify-content:center; margin-inline:8px; padding:6px; }

/* ---------- 5. Sidebar ---------- */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  min-height: 76px;
}
.sidebar-brand img { display:block; flex:0 0 50px; width:50px; height:50px; object-fit:contain; padding:3px; border-radius:13px; background:rgba(255,255,255,.96); }
.sidebar-brand .brand-text {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--white);
  letter-spacing: -0.01em;
}

.sidebar-section { padding: var(--space-3) 0; }
.sidebar-section-title {
  font-size: 10px;
  font-weight: var(--fw-semibold);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-3) var(--space-5) var(--space-1);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5);
  color: var(--neutral-300);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  border-left: 3px solid transparent;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sidebar-link:hover {
  background: rgba(255,255,255,0.04);
  color: var(--white);
  text-decoration: none;
}
.sidebar-link.active {
  background: rgba(255,255,255,0.06);
  color: var(--white);
  border-left-color: var(--accent-600);
}
.sidebar-link i { font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; }
.sidebar-link .badge { margin-left: auto; }

.sidebar-group > .sidebar-link { cursor: pointer; }
.sidebar-group > .sidebar-link .chevron {
  margin-left: auto;
  transition: transform var(--dur-fast) var(--ease);
}
.sidebar-group.open > .sidebar-link .chevron { transform: rotate(90deg); }
.sidebar-submenu { display: none; padding: var(--space-1) 0; }
.sidebar-group.open > .sidebar-submenu { display: block; }
.sidebar-submenu .sidebar-link { padding-left: var(--space-10); font-size: var(--fs-sm); }

/* ============================================================
   Sidebar extensions — branch badge, sublinks, group chevron
   ============================================================ */

/* Active branch indicator under the brand */
.sidebar-branch {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sidebar-branch-label {
  font-size: 10px;
  font-weight: var(--fw-semibold);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.sidebar-branch-name {
  font-size: var(--fs-sm);
  color: var(--neutral-200);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.sidebar-branch-name i {
  font-size: 12px;
  color: var(--accent-600);
}

/* Sidebar group chevron */
.sidebar-group > .sidebar-link {
  cursor: pointer;
}
.sidebar-group > .sidebar-link .chevron {
  margin-left: auto;
  font-size: 12px;
  transition: transform var(--dur-fast) var(--ease);
  opacity: 0.6;
}
.sidebar-group.open > .sidebar-link .chevron {
  transform: rotate(90deg);
  opacity: 1;
}

/* Sublink indent */
.sidebar-sublink {
  padding-left: var(--space-10) !important;
  font-size: var(--fs-sm);
  color: var(--neutral-400);
}
.sidebar-sublink:hover {
  color: var(--white);
}
.sidebar-sublink.active {
  color: var(--white);
  border-left-color: var(--accent-600);
}

/* Session block pinned to the bottom */
.sidebar-session {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: var(--space-4);
  padding-bottom: var(--space-5);
}
.sidebar-profile {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  min-width:0;
  margin:0 var(--space-3) var(--space-3);
  padding:var(--space-3);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg);
  color:var(--neutral-100);
  background:rgba(255,255,255,.035);
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.sidebar-profile:hover { color:var(--white); text-decoration:none; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); transform:translateY(-1px); }
.sidebar-profile .avatar { width:38px; height:38px; }
.sidebar-profile-copy { display:flex; flex-direction:column; min-width:0; gap:2px; }
.sidebar-profile-copy strong,
.sidebar-profile-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-profile-copy strong { font-size:var(--fs-xs); font-weight:var(--fw-semibold); }
.sidebar-profile-copy small { color:var(--neutral-400); font-size:10px; }
.sidebar-profile-chevron { margin-left:auto; color:var(--neutral-500); font-size:11px; }

/* Sidebar layout — ensure nav fills height so the session block stays at bottom */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--topbar-height) - 80px);
}

/* Badge inside sidebar link sits on the right */
.sidebar-link .badge {
  margin-left: auto;
  font-size: 10px;
  padding: 1px 6px;
}

/* Collapsed sidebar — hide chevron and submenu indicator */
body.sidebar-collapsed .sidebar-group > .sidebar-link .chevron {
  display: none;
}
body.sidebar-collapsed .sidebar-branch {
  display: none;
}
body.sidebar-collapsed .sidebar-section-title {
  display: none;
}
body.sidebar-collapsed .sidebar-session form button span,
body.sidebar-collapsed .sidebar-session form button i {
  display: inline;
}
body.sidebar-collapsed .sidebar-link .badge {
  display: none;
}

/* ---------- 6. Topbar ---------- */
.app-topbar {
  height: var(--topbar-height);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
}

.topbar-toggle {
  background: none;
  border: 0;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-md);
}
.topbar-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
.topbar-brand { display:none; align-items:center; gap:var(--space-2); min-width:0; color:var(--text-primary); font-weight:var(--fw-semibold); }
.topbar-brand:hover { color:var(--brand-700); text-decoration:none; }
.topbar-brand img { width:30px; height:30px; object-fit:contain; border-radius:8px; }
.topbar-brand span { max-width:34vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.topbar-search {
  flex: 1;
  max-width: 480px;
  position: relative;
}
.topbar-search input {
  width: 100%;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-10);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  background: var(--neutral-050);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.topbar-search input:focus {
  background: var(--white);
  border-color: var(--border-focus);
  outline: none;
}
.topbar-search .search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
}

.topbar-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

.topbar-icon-btn {
  position: relative;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
}
.topbar-icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.topbar-language-trigger { width: auto; gap: 6px; padding: 0 8px; font-size: 14px; }
.topbar-language-trigger span { font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.language-option-form { margin: 0; }
.language-option-form .dropdown-item { width: 100%; border: 0; background: transparent; text-align: left; font-family: inherit; }
.topbar-icon-btn .dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  background: var(--danger-600);
  border-radius: 50%;
  border: 2px solid var(--bg-card);
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 0;
  background: transparent;
}
.topbar-user:hover { background: var(--bg-hover); }
.topbar-user .avatar { width: 28px; height: 28px; }
.topbar-user .avatar img { display:block; }
.topbar-user .user-name { font-size: var(--fs-sm); font-weight: var(--fw-medium); }

/* ---------- 7. Page header & breadcrumb ---------- */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.page-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-1);
  letter-spacing: -0.01em;
}
.page-subtitle { color: var(--text-secondary); font-size: var(--fs-sm); margin: 0; }
.page-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  list-style: none;
  padding: 0;
}
.breadcrumb li + li::before {
  content: "/";
  margin: 0 var(--space-1);
  color: var(--neutral-300);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text-primary); }

/* ---------- 8. Cards ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-default);
}
.card-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: 0; }
.card-body { padding: 0; }
.card-footer {
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: 1px solid var(--border-default);
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}
.card-flush { padding: 0; }
.card-flush .card-header { padding: var(--space-4) var(--space-5); margin: 0; }
.card-flush .card-body { padding: 0; }

/* ---------- 9. Stat cards / KPI ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.stat-card {
  min-width: 0;
  container-type: inline-size;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.stat-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}
.stat-value {
  min-width: 0;
  max-width: 100%;
  font-size: clamp(1.125rem, 2vw, var(--fs-3xl));
  font-size: clamp(1.125rem, 11cqw, var(--fs-3xl));
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.stat-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.stat-meta .delta { font-weight: var(--fw-semibold); }
.stat-meta .delta.up   { color: var(--success-600); }
.stat-meta .delta.down { color: var(--danger-600); }

/* ---------- 10. Tables ---------- */
.table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.table-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-default);
  flex-wrap: wrap;
}
.table-toolbar .search-input {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.data-table thead th {
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-3) var(--space-4);
  background: var(--neutral-050);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.data-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-primary);
  vertical-align: middle;
}
.data-table tbody tr:hover { background: var(--neutral-050); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .mono { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); }
.data-table .row-actions {
  display: flex;
  gap: var(--space-1);
  justify-content: flex-end;
  opacity: 0.6;
  transition: opacity var(--dur-fast) var(--ease);
}
.data-table tbody tr:hover .row-actions { opacity: 1; }

/* Keep wide catalogue tables scrollable without clipping their action column. */
.products-table-scroll {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.products-table { min-width: 980px; }
.products-table th.products-actions-heading,
.products-table td.products-actions-cell {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--bg-card);
  box-shadow: -8px 0 12px -12px var(--text-primary);
  white-space: nowrap;
}
.products-table th.products-actions-heading {
  background: var(--neutral-050);
  z-index: 3;
}
.products-table tbody tr:hover td.products-actions-cell { background: var(--neutral-050); }

.table-empty {
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

/* ---------- 11. Forms ---------- */
.form-group { margin-bottom: var(--space-4); }
.form-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.form-label .required { color: var(--danger-600); margin-left: 2px; }
.form-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-1); }
.form-error { font-size: var(--fs-xs); color: var(--danger-600); margin-top: var(--space-1); }

.form-control,
.form-select,
textarea.form-control {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--text-primary);
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.form-control:disabled,
.form-select:disabled {
  background: var(--neutral-100);
  color: var(--text-muted);
  cursor: not-allowed;
}
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--danger-600);
}
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px var(--danger-100);
}
.form-control::placeholder { color: var(--neutral-400); }

textarea.form-control { min-height: 80px; resize: vertical; }

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.form-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.form-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.form-row.cols-4 { grid-template-columns: repeat(4, 1fr); }

.form-section {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border-default);
}
.form-section:last-child { border-bottom: 0; }
.form-section-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-4);
}
.form-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-default);
  margin-top: var(--space-5);
}

/* Checkbox & radio */
.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: var(--brand-700);
  cursor: pointer;
}

/* ---------- 12. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn i { font-size: 14px; }

.btn-primary {
  background: var(--brand-700);
  color: var(--white);
  border-color: var(--brand-700);
}
.btn-primary:hover:not(:disabled) { background: var(--brand-800); border-color: var(--brand-800); color: var(--white); text-decoration: none; }

.btn-accent {
  background: var(--accent-700);
  color: var(--white);
  border-color: var(--accent-700);
}
.btn-accent:hover:not(:disabled) { background: var(--accent-800); border-color: var(--accent-800); color: var(--white); text-decoration: none; }

.btn-outline {
  background: var(--white);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.btn-outline:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text-primary); text-decoration: none; }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }

.btn-danger {
  background: var(--danger-600);
  color: var(--white);
  border-color: var(--danger-600);
}
.btn-danger:hover:not(:disabled) { background: #991B1B; border-color: #991B1B; color: var(--white); text-decoration: none; }

.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--fs-xs); }
.btn-lg { padding: var(--space-3) var(--space-5); font-size: var(--fs-md); }
.btn-icon { padding: var(--space-2); width: 34px; height: 34px; }

/* ---------- 13. Badges & status pills ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  border-radius: var(--radius-pill);
  background: var(--neutral-100);
  color: var(--text-secondary);
  white-space: nowrap;
}
.badge-success { background: var(--success-100); color: var(--success-600); }
.badge-warning { background: var(--warning-100); color: var(--warning-600); }
.badge-danger  { background: var(--danger-100);  color: var(--danger-600); }
.badge-info    { background: var(--info-100);    color: var(--info-600); }
.badge-brand   { background: var(--brand-100);   color: var(--brand-800); }
.badge-accent  { background: var(--accent-100);  color: var(--accent-800); }
.badge-neutral { background: var(--neutral-100); color: var(--neutral-700); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- 14. Alerts & toasts ---------- */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--neutral-050);
  font-size: var(--fs-sm);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-4);
}
.alert i { font-size: 16px; margin-top: 1px; flex-shrink: 0; }
.alert-success { background: var(--success-100); border-color: #A7F3D0; color: var(--success-600); }
.alert-warning { background: var(--warning-100); border-color: #FDE68A; color: var(--warning-600); }
.alert-danger  { background: var(--danger-100);  border-color: #FECACA; color: var(--danger-600); }
.alert-info    { background: var(--info-100);    border-color: #BFDBFE; color: var(--info-600); }

.toast-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 360px;
}
.toast {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--brand-700);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-sm);
  display: flex;
  gap: var(--space-3);
  animation: toastIn var(--dur-base) var(--ease);
}
.toast.success { border-left-color: var(--success-600); }
.toast.warning { border-left-color: var(--warning-600); }
.toast.danger  { border-left-color: var(--danger-600); }
.toast .close { background: none; border: 0; color: var(--text-muted); cursor: pointer; padding: 0; font-size: 14px; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 15. Modals & drawers ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: var(--z-modal-backdrop);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  overflow-y: auto;
}
.modal-backdrop.open { display: flex; }

.modal {
  /* Bootstrap also defines `.modal` and hides it until its own JS opens it.
     These are app-managed modals, so override Bootstrap's dialog positioning. */
  position: relative;
  inset: auto;
  z-index: auto;
  display: block;
  height: auto;
  overflow: visible;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  animation: modalIn var(--dur-base) var(--ease);
}
.modal-lg { max-width: 800px; }
.modal-xl { max-width: 1100px; }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0; }
.modal-body { padding: var(--space-6); }
.modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-default);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  max-width: 100%;
  background: var(--bg-card);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-modal);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
  display: flex;
  flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-body { padding: var(--space-6); overflow-y: auto; flex: 1; }
.drawer-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-default);
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* ---------- 16. Dropdowns ---------- */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-1);
  z-index: var(--z-dropdown);
  display: none;
}
.dropdown.open .dropdown-menu { display: block; }
.topbar-language .dropdown-menu { max-height: min(70vh, 520px); overflow-y: auto; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.dropdown-item:hover { background: var(--bg-hover); text-decoration: none; }
.dropdown-item.danger { color: var(--danger-600); }
.dropdown-divider { height: 1px; background: var(--border-default); margin: var(--space-1) 0; }

/* ---------- 17. Tabs & pills ---------- */
.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--space-5);
}
.tab {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  background: none;
  border-top: 0; border-left: 0; border-right: 0;
}
.tab:hover { color: var(--text-primary); text-decoration: none; }
.tab.active { color: var(--brand-700); border-bottom-color: var(--brand-700); }

/* ---------- 18. Pagination ---------- */
.pagination {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-default);
}
.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
}
.pagination .page-link:hover { background: var(--bg-hover); text-decoration: none; }
.pagination .page-link.active {
  background: var(--brand-700);
  color: var(--white);
  border-color: var(--brand-700);
}
.pagination .page-link:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination .page-info { font-size: var(--fs-xs); color: var(--text-muted); margin-right: auto; }

/* ---------- 19. Empty states ---------- */
.empty-state {
  padding: var(--space-12) var(--space-6);
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
}
.empty-state img,
.empty-state svg { width: 96px; height: 96px; margin-bottom: var(--space-5); opacity: 0.9; }
.empty-state h3 { font-size: var(--fs-lg); margin: 0 0 var(--space-2); }
.empty-state p { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0 0 var(--space-5); }

/* ---------- 20. Avatars ---------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-800);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  overflow: hidden;
  flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 24px; height: 24px; font-size: var(--fs-xs); }
.avatar-lg { width: 48px; height: 48px; font-size: var(--fs-lg); }
.avatar-xl { width: 72px; height: 72px; font-size: var(--fs-2xl); }

/* ---------- 21. Progress & loaders ---------- */
.progress {
  height: 6px;
  background: var(--neutral-100);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: var(--brand-700);
  border-radius: var(--radius-pill);
  transition: width var(--dur-base) var(--ease);
}
.progress-bar.success { background: var(--success-600); }
.progress-bar.warning { background: var(--warning-600); }
.progress-bar.danger  { background: var(--danger-600); }

.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--neutral-200);
  border-top-color: var(--brand-700);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  background: linear-gradient(90deg, var(--neutral-100) 0%, var(--neutral-200) 50%, var(--neutral-100) 100%);
  background-size: 200% 100%;
  animation: skeleton 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- 22. Utilities ---------- */
.flex       { display: flex; }
.flex-col   { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

.p-0 { padding: 0; }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }

.w-full { width: 100%; }
.h-full { height: 100%; }
.hidden { display: none !important; }
.visible { display: block !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relative { position: relative; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 22. Profile ---------- */
.company-logo-uploader { display:flex; align-items:center; gap:var(--space-5); }
.company-logo-preview { display:grid; place-items:center; width:84px; height:84px; flex:0 0 84px; overflow:hidden; border:1px solid var(--border-default); border-radius:var(--radius-lg); background:var(--neutral-050); }
.company-logo-preview img { width:100%; height:100%; padding:8px; object-fit:contain; }
.company-logo-field { min-width:0; flex:1; }
.profile-layout { display:grid; grid-template-columns:minmax(0, 1fr) 280px; gap:var(--space-5); align-items:start; }
.profile-card { overflow:hidden; }
.profile-card-cover { height:116px; background:radial-gradient(circle at 85% 18%, rgba(255,255,255,.28), transparent 25%), linear-gradient(120deg, var(--brand-900), var(--brand-700) 58%, var(--accent-700)); }
.profile-card-content { padding:0 var(--space-6) var(--space-6); }
.profile-identity { display:flex; align-items:flex-end; gap:var(--space-4); margin-top:-43px; padding-bottom:var(--space-6); border-bottom:1px solid var(--border-default); }
.profile-photo { width:92px; height:92px; border:4px solid var(--bg-card); box-shadow:var(--shadow-md); font-size:var(--fs-2xl); }
.profile-photo-copy,
.profile-identity-copy { min-width:0; padding-bottom:3px; }
.profile-identity-copy h2 { margin:5px 0 2px; font-size:var(--fs-xl); letter-spacing:-.025em; }
.profile-identity-copy p { margin:0; color:var(--text-secondary); font-size:var(--fs-sm); }
.profile-status { display:inline-flex; align-items:center; gap:5px; color:var(--success-700); font-size:var(--fs-xs); font-weight:var(--fw-semibold); text-transform:capitalize; }
.profile-status i { font-size:13px; }
.profile-photo-form { padding-top:var(--space-6); }
.profile-details-form { margin-top:var(--space-6); padding-top:var(--space-6); border-top:1px solid var(--border-default); }
.profile-form-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-4); }
.profile-form-heading h3 { margin:0 0 3px; font-size:var(--fs-md); }
.profile-form-heading p { margin:0; color:var(--text-secondary); font-size:var(--fs-sm); }
.profile-form-heading > i { color:var(--brand-600); font-size:24px; }
.profile-upload-zone { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4); border:1px dashed var(--border-strong); border-radius:var(--radius-lg); background:var(--neutral-050); cursor:pointer; transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.profile-upload-zone:hover { border-color:var(--brand-500); background:var(--brand-050); }
.profile-upload-icon { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; border-radius:var(--radius-md); background:var(--white); color:var(--brand-700); font-size:21px; box-shadow:var(--shadow-sm); }
.profile-upload-copy { display:flex; flex-direction:column; gap:3px; min-width:0; margin-right:auto; }
.profile-upload-copy strong { font-size:var(--fs-sm); }
.profile-upload-copy small { color:var(--text-secondary); font-size:var(--fs-xs); }
.profile-upload-selection { display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-3); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); background:var(--brand-050); color:var(--brand-800); font-size:var(--fs-sm); }
.profile-upload-selection[hidden] { display:none; }
.profile-upload-selection span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.profile-remove-option { display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-4); color:var(--text-secondary); font-size:var(--fs-sm); cursor:pointer; }
.profile-remove-option input { accent-color:var(--danger-600); }
.profile-form-footer { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-top:var(--space-6); padding-top:var(--space-4); border-top:1px solid var(--border-default); }
.profile-form-footer > span { display:inline-flex; align-items:center; gap:6px; color:var(--text-muted); font-size:var(--fs-xs); }
.profile-help-card { padding:var(--space-5); border:1px solid var(--border-default); border-radius:var(--radius-lg); background:linear-gradient(160deg,var(--bg-card),var(--neutral-050)); }
.profile-help-icon { display:grid; place-items:center; width:40px; height:40px; margin-bottom:var(--space-4); border-radius:12px; color:var(--brand-700); background:var(--brand-100); font-size:20px; }
.profile-help-card h3 { margin:0 0 var(--space-2); font-size:var(--fs-md); }
.profile-help-card p { margin:0 0 var(--space-4); color:var(--text-secondary); font-size:var(--fs-sm); line-height:1.6; }
.profile-help-card a { display:inline-flex; gap:var(--space-2); color:var(--brand-700); font-size:var(--fs-sm); font-weight:var(--fw-medium); }

/* ---------- 23. Responsive ---------- */
@media (max-width: 1024px) {
  .app-sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width);
  }
  body.sidebar-open .app-sidebar { transform: translateX(0); }
  .app-main { margin-left: 0; }
  body.sidebar-collapsed .app-main { margin-left: 0; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .profile-layout { grid-template-columns:1fr; }
  .profile-help-card { display:grid; grid-template-columns:auto 1fr; column-gap:var(--space-3); align-items:center; }
  .profile-help-icon { grid-row:span 2; margin:0; }
  .profile-help-card h3 { align-self:end; }
  .profile-help-card p { margin-bottom:0; }
  .profile-help-card a { grid-column:2; margin-top:var(--space-3); }
}

@media (max-width: 768px) {
  .app-content { padding: var(--space-4); }
  .page-header { flex-direction: column; align-items: stretch; }
  .page-actions { justify-content: stretch; }
  .page-actions .btn { flex: 1; }
  .topbar-search { display: none; }
  .topbar-brand { display:inline-flex; }
  .topbar-user .user-name,
  .topbar-user > .bi-chevron-down { display:none; }
  .form-row.cols-2,
  .form-row.cols-3,
  .form-row.cols-4 { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .modal { max-width: 100%; }
  .drawer { width: 100%; }

  /* Tables become scrollable, first column sticky */
  .table-wrap { overflow-x: auto; }
  .data-table { min-width: 640px; }
}

@media (max-width: 480px) {
  .stat-value { font-size: var(--fs-2xl); }
  .page-title { font-size: var(--fs-xl); }
  .profile-card-content { padding-inline:var(--space-4); }
  .profile-form-footer { align-items:stretch; flex-direction:column; }
  .profile-form-footer .btn { width:100%; }
  .profile-identity-copy h2 { font-size:var(--fs-lg); }
  .company-logo-uploader { align-items:flex-start; flex-direction:column; }
}