/* =========================
   Base + Theme
   - Light is the default in :root
   - Dark overrides live under [data-theme="dark"]
   - Auto follows OS dark mode when available via media query
========================= */

/* ---------- LIGHT (default) ---------- */
:root{
  /* core surfaces & text */
  --bg:        #f7f7fb;
  --panel:     #ffffff;
  --panel-2:   #e9eef7;            /* stronger contrast than #f1f4fa */
  --text:      #111318;
  --muted:     #3f4a62;            /* darker than #5d6576 for readability */

  /* accents */
  --primary:   #3b82f6;
  --primary-2: #2563eb;
  --ok:        #22c55e;
  --danger:    #ef4444;

  /* lines/shadows */
  --border:    rgba(0,0,0,.16);    /* slightly stronger than .12 */
  --shadow:    rgba(0,0,0,.18);

  /* component-specific tokens (light) */
  --input-bg:      #ffffff;
  --input-border:  rgba(0,0,0,.18);
  --table-th-fg:   #0f172a;        /* darker header text */
}

/* ---------- DARK (original palette) ---------- */
[data-theme="dark"]{
  --bg:        #0f1620;
  --panel:     #141c27;
  --panel-2:   #1b2636;
  --text:      #dfe7f5;
  --muted:     #93a0b5;

  --primary:   #3b82f6;
  --primary-2: #2563eb;
  --ok:        #22c55e;
  --danger:    #ef4444;

  --border:    #233043;
  --shadow:    rgba(0,0,0,.35);

  --input-bg:      #0e141c;
  --input-border:  #1f2a3a;
  --table-th-fg:   #cdd7ea;
}

/* ---------- AUTO (follow OS; default to light, flip to dark if OS is dark) ---------- */
/* Auto theme inherits light theme by default, then switches to dark on dark OS */
@media (prefers-color-scheme: dark){
  [data-theme="auto"]{
    --bg:        #0f1620;
    --panel:     #141c27;
    --panel-2:   #1b2636;
    --text:      #dfe7f5;
    --muted:     #93a0b5;

    --primary:   #3b82f6;
    --primary-2: #2563eb;
    --ok:        #22c55e;
    --danger:    #ef4444;

    --border:    #233043;
    --shadow:    rgba(0,0,0,.35);

    --input-bg:      #0e141c;
    --input-border:  #1f2a3a;
    --table-th-fg:   #cdd7ea;
  }
}

/* =========================
   Resets / Base
========================= */
*{ box-sizing: border-box; }

html, body{
  margin:0;
  padding:0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color: var(--primary); text-decoration: none; }
a:hover{ color: var(--primary-2); }
/* keep links neutral in dark */
[data-theme="dark"] a{ color: var(--text); }
[data-theme="dark"] a:hover{ color: #fff; }

.container{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Utility helpers used across pages */
.hint{ color: var(--muted); font-size: .95rem; line-height: 1.35; }
.mono{ font-family: ui-monospace, Menlo, Consolas, monospace; }

/* =========================
   App Bar (Header/Nav)
========================= */
.appbar{
  position: sticky; top:0; z-index: 1000;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-100%);
  animation: headerSlideDown 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}

@keyframes headerSlideDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Single line by default (desktop) */
.appbar .container{
  display:flex; align-items:center; gap:14px;
  min-height: 56px;
  height: auto;
  flex-wrap: nowrap;            /* keep one row by default */
  max-width: 100%;              /* header spans full width */
  padding: 8px 16px;
}
.appbar .container > *{ flex-shrink: 0; }

/* Brand (left) */
.brand{
  display:flex; align-items:center; gap:10px;
  min-width: 0;                 /* don't reserve extra width */
  flex-shrink: 1;               /* allow brand to shrink if needed */
}
.logo-box{
  width:28px; height:28px; border-radius:7px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display:grid; place-items:center; color:#fff;
  box-shadow: 0 3px 10px var(--shadow);
  flex-shrink: 0;               /* logo should never shrink */
}
.brand-title{ 
  font-weight: 700; 
  letter-spacing:.2px; 
  white-space: nowrap;          /* prevent title wrapping */
  overflow: hidden;             /* hide overflow */
  text-overflow: ellipsis;      /* show ... if text is too long */
}

/* Centered nav area: single row by default */
.nav{
  flex: 1 1 auto; display:flex; justify-content:center; gap:14px;
  flex-wrap: nowrap;            /* keep one row by default */
  min-width: 0;                 /* allow shrinking */
  max-width: 100%;              /* prevent overflow */
}
.nav-link{
  padding: 8px 12px; border-radius: 8px; color: var(--muted);
  white-space: nowrap;          /* prevent text wrapping */
  font-size: 14px;              /* slightly smaller for better fit */
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
  opacity: 0;
}

.nav-link:hover{ 
  color: var(--text); 
  background: rgba(0,0,0,.06);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.nav-link:hover::before {
  transform: translateX(100%);
  opacity: 1;
}

.nav-link.active{
  color: var(--text);
  background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(59,130,246,.18));
  border: 1px solid rgba(59,130,246,.22);
  box-shadow: 0 2px 12px rgba(59,130,246,.15);
}

/* dark-specific hover/active feel */
[data-theme="dark"] .nav-link:hover{ 
  background: rgba(255,255,255,.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

[data-theme="dark"] .nav-link::before {
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
}

[data-theme="dark"] .nav-link.active{
  background: linear-gradient(135deg, rgba(59,130,246,.20), rgba(59,130,246,.25));
  border-color: rgba(59,130,246,.28);
  box-shadow: 0 2px 12px rgba(59,130,246,.25);
}

/* Tab navigation styles */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
  padding: 8px;
  background: var(--panel-2);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
}

.tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
  opacity: 0;
}

.tab:hover {
  color: var(--text);
  background: color-mix(in oklab, var(--panel) 80%, var(--primary));
  border-color: color-mix(in oklab, var(--border) 70%, var(--primary));
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.tab:hover::before {
  transform: translateX(100%);
  opacity: 1;
}

.tab.active {
  color: var(--primary);
  background: var(--panel);
  border-color: var(--primary);
  box-shadow: 0 2px 12px color-mix(in oklab, var(--primary) 25%, transparent);
}

/* Dark theme adjustments for tabs */
[data-theme="dark"] .tab:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

[data-theme="dark"] .tab::before {
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
}

[data-theme="dark"] .tab.active {
  box-shadow: 0 2px 12px color-mix(in oklab, var(--primary) 35%, transparent);
}

/* Right-side nav (theme toggle, user controls) */
.nav-right{
  display:flex; justify-content:flex-end; gap: 8px;
  flex-shrink: 0;               /* prevent shrinking */
  min-width: fit-content;       /* only as wide as needed */
}
.nav-right .btn{ 
  white-space: nowrap; 
  padding: 8px 12px;            /* more compact padding */
  font-size: 13px;              /* smaller font */
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 16px; border-radius: 10px; border: 1px solid color-mix(in oklab, var(--primary-2) 25%, transparent);
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff; font-weight: 600; box-shadow: 0 6px 18px color-mix(in oklab, var(--primary) 35%, transparent);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  white-space: nowrap;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.btn:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in oklab, var(--primary) 45%, transparent);
  background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 90%, white), color-mix(in oklab, var(--primary-2) 90%, white));
}

.btn:hover::before {
  transform: translateX(100%);
}

.btn:active{ 
  transform: translateY(0); 
  transition: transform 0.1s ease;
}

.btn-small{ 
  padding: 8px 12px; 
  font-size: .9rem; 
  border-radius: 8px; 
}

/* ghost button variant (for nav / theme toggle) */
.btn.ghost{
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.btn.ghost::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(0,0,0,0.05) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

[data-theme="dark"] .btn.ghost::before {
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
}

.btn.ghost:hover {
  background: color-mix(in oklab, var(--panel) 90%, var(--primary));
  border-color: color-mix(in oklab, var(--border) 70%, var(--primary));
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

[data-theme="dark"] .btn.ghost:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.btn.ghost:hover::before {
  transform: translateX(100%);
}

/* primary button variant */
.btn.primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border-color: color-mix(in oklab, var(--primary-2) 30%, transparent);
  box-shadow: 0 6px 20px color-mix(in oklab, var(--primary) 40%, transparent);
}

.btn.primary:hover {
  background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 85%, white), color-mix(in oklab, var(--primary-2) 85%, white));
  box-shadow: 0 8px 28px color-mix(in oklab, var(--primary) 50%, transparent);
}

/* danger button variant */
.btn.danger {
  background: linear-gradient(135deg, var(--danger), color-mix(in oklab, var(--danger) 80%, black));
  border-color: color-mix(in oklab, var(--danger) 30%, transparent);
  box-shadow: 0 6px 20px color-mix(in oklab, var(--danger) 40%, transparent);
}

.btn.danger::before {
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
}

.btn.danger:hover {
  background: linear-gradient(135deg, color-mix(in oklab, var(--danger) 85%, white), color-mix(in oklab, var(--danger) 70%, black));
  box-shadow: 0 8px 28px color-mix(in oklab, var(--danger) 50%, transparent);
}

/* success/ok button variant */
.btn.success {
  background: linear-gradient(135deg, var(--ok), color-mix(in oklab, var(--ok) 80%, black));
  border-color: color-mix(in oklab, var(--ok) 30%, transparent);
  box-shadow: 0 6px 20px color-mix(in oklab, var(--ok) 40%, transparent);
}

.btn.success::before {
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
}

.btn.success:hover {
  background: linear-gradient(135deg, color-mix(in oklab, var(--ok) 85%, white), color-mix(in oklab, var(--ok) 70%, black));
  box-shadow: 0 8px 28px color-mix(in oklab, var(--ok) 50%, transparent);
}

/* Enhanced styling for all button-like elements */
button[type="submit"], 
button[type="button"], 
input[type="submit"], 
input[type="button"], 
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--primary-2) 25%, transparent);
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-weight: 600;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 18px color-mix(in oklab, var(--primary) 35%, transparent);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  transform: translateY(0);
}

button[type="submit"]::before, 
button[type="button"]::before, 
input[type="submit"]::before, 
input[type="button"]::before,
.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

button[type="submit"]:hover, 
button[type="button"]:hover, 
input[type="submit"]:hover, 
input[type="button"]:hover,
.action-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in oklab, var(--primary) 45%, transparent);
  background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 90%, white), color-mix(in oklab, var(--primary-2) 90%, white));
  color: #fff;
}

button[type="submit"]:hover::before, 
button[type="button"]:hover::before, 
input[type="submit"]:hover::before, 
input[type="button"]:hover::before,
.action-btn:hover::before {
  transform: translateX(100%);
}

button[type="submit"]:active, 
button[type="button"]:active, 
input[type="submit"]:active, 
input[type="button"]:active,
.action-btn:active {
  transform: translateY(0);
  transition: transform 0.1s ease;
}

/* Special styling for primary action buttons */
.action-btn.primary,
button[type="submit"].primary,
input[type="submit"].primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 6px 20px color-mix(in oklab, var(--primary) 40%, transparent);
}

.action-btn.primary:hover,
button[type="submit"].primary:hover,
input[type="submit"].primary:hover {
  background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 85%, white), color-mix(in oklab, var(--primary-2) 85%, white));
  box-shadow: 0 8px 28px color-mix(in oklab, var(--primary) 50%, transparent);
}

/* ---------- Wrap only when space is genuinely tight ---------- */
@media (max-width: 1200px){
  .appbar .container{ flex-wrap: wrap; }
  .nav{ flex-wrap: wrap; width:100%; justify-content:center; }
}

/* ---------- Fine-grain mobile tweaks ---------- */
@media (max-width: 900px){
  .appbar .container{
    row-gap: 8px;
  }
  .brand{
    order: 1;
    min-width: 0;
    flex: 0 0 auto;
  }
  .nav-right{
    order: 2;
    margin-left: auto;
    gap: 6px;
  }
  .nav{
    order: 3;
    width: 100%;
    justify-content: center;
    gap: 8px;
  }
  .nav-link{ padding: 6px 10px; }
  .btn{ padding: 9px 12px; }
}

/* =========================
   Page Content
========================= */
.page-content{
  padding: 28px 0 60px;
  opacity: 0;
  animation: pageContentFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

@keyframes pageContentFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced page transitions */
.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Smooth transitions for interactive elements */
.card, .collapsible-card {
  transform: translateY(10px);
  opacity: 0;
  animation: cardSlideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }

.collapsible-card:nth-child(1) { animation-delay: 0.1s; }
.collapsible-card:nth-child(2) { animation-delay: 0.2s; }
.collapsible-card:nth-child(3) { animation-delay: 0.3s; }
.collapsible-card:nth-child(4) { animation-delay: 0.4s; }
.collapsible-card:nth-child(5) { animation-delay: 0.5s; }

@keyframes cardSlideUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Table animations */
.table {
  opacity: 0;
  animation: tableSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

@keyframes tableSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Form animations */
form {
  opacity: 0;
  animation: formFadeIn 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}

@keyframes formFadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .page-content,
  .card,
  .collapsible-card,
  .table,
  form {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Cards / Panels / Tables */
.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 30px var(--shadow);
  padding: 18px;
}

/* Responsive table wrapper */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
}

.table{
  width: 100%;
  min-width: 600px; /* Minimum width before horizontal scroll */
  border-collapse: collapse;
  overflow: hidden;
  background: var(--panel);
  border: none; /* Remove border since wrapper has it */
}
.table th, .table td{ 
  padding: 12px 14px; 
  white-space: nowrap; /* Prevent text wrapping in cells */
}
.table th{
  text-align: left; 
  color: var(--table-th-fg); 
  background: var(--panel-2);
  font-weight: 600;
}
.table td{ color: var(--text); }
.table .right{ text-align:right; }
.table tr + tr td{ border-top: 1px solid var(--border); }

.badge{
  display:inline-block; padding:4px 9px; border-radius: 999px; font-size: .78rem;
  background: color-mix(in oklab, var(--panel-2) 60%, transparent);
  border:1px solid var(--border);
  color: color-mix(in oklab, var(--text) 90%, transparent);
}

/* =========================
   Auth (Login)
========================= */
.auth-wrap{
  display:grid; place-items:center;
  min-height: calc(100vh - 56px - 80px);
  padding: 20px 16px;
}
.auth-card{
  width: 100%; max-width: 560px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 30px var(--shadow);
  padding: 22px;
}
.auth-card h1{
  margin: 0 0 8px 0; font-size: 1.9rem;
}
.auth-subtitle{
  color: var(--muted); margin-bottom: 18px;
}

/* Form fields stack vertically */
.field{ margin-bottom: 14px; }
label{ display:block; font-weight: 600; margin-bottom: 6px; }
.input{
  display:block; width:100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
  outline: none;
}
.input:focus{
  border-color: color-mix(in oklab, var(--primary) 60%, var(--input-border));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent);
}

/* Footer */
footer{
  border-top: 1px solid var(--border);
  color: var(--muted);
  text-align: center;
  padding: 24px 12px 40px;
}

/* Utilities */
@media (max-width: 540px){
  .hide-on-mobile{ display:none; }
}

/* =========================================================
   Header: Compact brand (logo-only) override
========================================================= */
.brand.brand-compact{
  min-width: 0;
  gap: 0;
}
.brand.brand-compact img{
  width: 28px;
  height: 28px;
  display: block;
  border-radius: 6px;
}

/* === PT patch: single-line header + scrollable nav (keep one row) === */
/* Removed !important to allow mobile.css and media queries to override */
.appbar .container{ flex-wrap: nowrap; }

.nav{
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  padding-bottom: 2px;
}
.nav::-webkit-scrollbar{ height: 6px; }
.nav::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 999px; }
.nav::-webkit-scrollbar-track{ background: transparent; }

.nav-link{
  white-space: nowrap;
  scroll-snap-align: start;
}
/* === end patch === */

/* =========================================================
   Header hotfix v2025-08-25: keep theme+logout on right; prevent overlap
========================================================= */

/* Allow nav to shrink on mobile Safari/Chrome and not push over buttons */
.nav{
  min-width: 0; /* critical for Safari flexbox shrink */
}

/* Keep the button cluster pinned to the far right and clickable above scrolled nav */
.nav-right{
  margin-left: auto;
  flex: 0 0 auto;     /* don't grow/shrink */
  position: relative;
  z-index: 2;
}

/* Mobile ordering: nav before buttons; remove width:100% so it doesn't steal the row */
@media (max-width: 900px){
  .appbar .container{
    flex-wrap: wrap;
  }
  .nav{
    order: 2 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    overflow-x: visible;
    justify-content: center;
    gap: 6px;                    /* tighter spacing */
  }
  .nav-link{
    padding: 6px 8px;            /* smaller padding */
    font-size: 13px;             /* smaller font */
  }
  .nav-right{
    order: 3 !important;
    margin-left: 0;
    gap: 6px;
    width: 100%;
    justify-content: flex-end;
  }
}

/* Tablet and medium screens - even more compact navigation */
@media (max-width: 768px){
  .appbar .container{
    padding: 6px 12px;           /* tighter container padding */
    gap: 8px;                    /* smaller gaps */
  }
  .nav{
    gap: 4px;                    /* very tight spacing */
    overflow-x: auto;            /* allow horizontal scroll if needed */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;       /* hide scrollbar */
  }
  .nav::-webkit-scrollbar{
    display: none;               /* hide webkit scrollbar */
  }
  .nav-link{
    padding: 6px 8px;
    font-size: 12px;             /* even smaller font */
    min-width: fit-content;      /* only as wide as needed */
  }
  .brand-title{
    font-size: 16px;             /* smaller brand title */
  }
}

/* Very small screens - minimal navigation */
@media (max-width: 480px){
  .appbar .container{
    padding: 4px 8px;
    flex-wrap: wrap;             /* allow wrapping if absolutely necessary */
  }
  .nav{
    order: 3;                    /* move nav to bottom */
    width: 100%;                 /* full width on small screens */
    justify-content: space-around; /* distribute evenly */
    margin-top: 4px;
    padding: 4px 0;
  }
  .nav-link{
    padding: 4px 6px;
    font-size: 11px;
    flex: 1;                     /* distribute space evenly */
    text-align: center;
    max-width: 80px;             /* prevent links from getting too wide */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-right{
    order: 2;
    margin-left: auto;
  }
  .brand{
    order: 1;
    min-width: 120px;            /* ensure brand has minimum space */
  }
}

/* =========================
   Enhanced Responsive Design
========================= */

/* Large screens - optimize for desktop */
@media (min-width: 1400px) {
  .container {
    max-width: 1400px;
  }
  
  .table th, .table td {
    padding: 16px 18px;
  }
  
  .card {
    padding: 24px;
  }
}

/* Medium screens - tablets and small desktops */
@media (max-width: 1200px) {
  .container {
    max-width: 100%;
    padding: 0 12px;
  }
  
  .page-content {
    padding: 20px 0 40px;
  }
  
  .card {
    padding: 16px;
    border-radius: 12px;
  }
  
  .table {
    min-width: 500px;
  }
  
  .table th, .table td {
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* Small screens - phones in landscape */
@media (max-width: 768px) {
  .container {
    padding: 0 8px;
  }
  
  .page-content {
    padding: 16px 0 32px;
  }
  
  .card {
    padding: 12px;
    border-radius: 8px;
  }
  
  .table {
    min-width: 400px;
    font-size: 13px;
  }
  
  .table th, .table td {
    padding: 8px 10px;
  }
  
  /* Stack form elements on small screens */
  .form-row {
    flex-direction: column;
    gap: 8px;
  }
  
  .form-group {
    margin-bottom: 12px;
  }
  
  /* Responsive buttons */
  .btn {
    padding: 12px 16px;
    width: 100%;
    margin-bottom: 8px;
  }
  
  .btn-group {
    flex-direction: column;
    width: 100%;
  }
  
  .btn-group .btn {
    margin: 0 0 8px 0;
  }
}

/* Extra small screens - phones in portrait */
@media (max-width: 480px) {
  html {
    font-size: 14px;
  }
  
  .container {
    padding: 0 4px;
  }
  
  .appbar .container {
    padding: 8px 8px;
  }
  
  .brand-title {
    font-size: 16px;
  }
  
  .page-content {
    padding: 12px 0 24px;
  }
  
  .card {
    padding: 8px;
    margin-bottom: 12px;
  }
  
  .table {
    min-width: 320px;
    font-size: 12px;
  }
  
  .table th, .table td {
    padding: 6px 8px;
  }
  
  /* Hide less important table columns on very small screens */
  .table .hide-mobile {
    display: none;
  }
  
  /* Compact form inputs */
  input, select, textarea {
    padding: 8px 10px;
    font-size: 14px;
  }
  
  /* Responsive typography */
  h1 { font-size: 20px; }
  h2 { font-size: 18px; }
  h3 { font-size: 16px; }
  h4 { font-size: 14px; }
}

/* Utility classes for responsive design */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }

@media (max-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
}

@media (max-width: 480px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex { display: flex !important; }
}

/* Responsive text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

@media (max-width: 768px) {
  .text-md-center { text-align: center; }
  .text-md-left { text-align: left; }
}

/* Responsive spacing */
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }

/* Responsive flex utilities */
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

@media (max-width: 768px) {
  .flex-md-column { flex-direction: column; }
  .flex-md-row { flex-direction: row; }
  
  /* Financial dashboard specific responsive improvements */
  .charts-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Financial table responsive behavior */
  .financial-table th:nth-child(3),
  .financial-table td:nth-child(3),
  .financial-table th:nth-child(4),
  .financial-table td:nth-child(4),
  .financial-table th:nth-child(6),
  .financial-table td:nth-child(6) {
    display: none;
  }
  
  /* Make chart containers more mobile friendly */
  .card canvas {
    max-width: 100%;
    height: auto !important;
  }
}

/* ========================================
   GLOBAL RESPONSIVE TABLE/BUTTON SCALING
   Applied to all tables and buttons across the site
   ======================================== */

/* Base responsive scaling - only scale tables, not buttons */
@media (max-width: 1400px) {
  .data-table,
  .table {
    font-size: 0.85em;
  }
  .data-table th, .data-table td,
  .table th, .table td {
    padding: 7px 9px;
    font-size: 0.85em;
  }
  .btn.xs {
    padding: 4px 8px;
    font-size: 0.75em;
  }
}

@media (max-width: 1200px) {
  .data-table,
  .table {
    font-size: 0.8em;
  }
  .data-table th, .data-table td,
  .table th, .table td {
    padding: 6px 8px;
    font-size: 0.8em;
  }
  .btn.xs {
    padding: 3px 6px;
    font-size: 0.7em;
  }
  .badge, .chip {
    padding: 1px 4px;
    font-size: 0.7em;
  }
}

@media (max-width: 1000px) {
  .data-table,
  .table {
    font-size: 0.75em;
  }
  .data-table th, .data-table td,
  .table th, .table td {
    padding: 5px 6px;
    font-size: 0.75em;
  }
  .btn.xs {
    padding: 2px 4px;
    font-size: 0.65em;
  }
  .input, .select {
    padding: 8px 10px;
    font-size: 0.85em;
  }
}