:root{
  /* Modern color palette: Deep blue + vibrant teal with warm accents */
  --bg: #f8fafb; /* soft off-white background */
  --surface: #ffffff; /* main surfaces */
  --muted: #64748b; /* secondary text - softer gray */
  --accent: #00d9d9; /* vibrant cyan/teal highlight */
  --brand: #0891b2; /* brand color - deep cyan */
  --brand-dark: #0e7490; /* darker brand for hover states */
  --card-bg: #ffffff;
  --glass: rgba(8,145,178,0.05);
  --navbar-height: 60px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-1: 0 10px 30px rgba(8,145,178,0.08);
  --shadow-2: 0 4px 12px rgba(8,145,178,0.04);
  --muted-strong: #1e293b; /* darker text for white backgrounds */
  --text-primary: #0f172a; /* deep blue-black for best contrast */
  --success: #10b981; /* emerald green */
  --warning: #f59e0b; /* amber */
  --danger: #ef4444; /* red */
}

html,body{height:100%;}
body{
  font-family: 'Inter', 'Roboto', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: var(--text-primary);
  background: var(--bg);
  padding-top: var(--navbar-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Hero section */
.hero-section{
  background: linear-gradient(135deg, rgba(8,145,178,0.02) 0%, rgba(0,217,217,0.02) 100%);
  color: var(--brand);
  padding: 2.4rem 0 1.6rem;
  border-bottom: 1px solid rgba(8,145,178,0.06);
}
.hero-inner{display:flex; gap:1.5rem; align-items:center}
.hero-title{
  font-weight: 800;
  letter-spacing: -0.5px;
  font-size: 2.2rem;
  color: var(--text-primary);
  line-height: 1.1;
}
.hero-sub{color: var(--muted); margin-bottom:0; font-size: 0.95rem;}
.hero-search{min-width:240px; max-width:420px}
.hero-cta .btn{opacity:1}

/* sheet cards */
.sheet-card{
  transition: transform 0.2s cubic-bezier(0.2,0.9,0.3,1), box-shadow 0.2s ease, border-color 0.2s ease;
  background: var(--card-bg);
  border-radius: var(--radius-md);
  border: 1px solid rgba(8,145,178,0.1);
}
.sheet-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(8,145,178,0.12);
  border-color: rgba(8,145,178,0.2);
}
.card-icon .icon-circle{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(8,145,178,0.12), rgba(0,217,217,0.08));
  color: var(--brand);
}
.card-icon .bi, .card-icon .fa{font-size:1.3rem}

/* Add subtle shadows to tracker cards and chart canvases to improve visual depth */
.card.shadow-sm, .card.h-100{
  box-shadow: 0 2px 8px rgba(8,145,178,0.05);
  border: 1px solid rgba(8,145,178,0.08);
  border-radius: 12px;
  transition: all 0.2s ease;
}
.card.shadow-sm:hover, .card.h-100:hover{
  box-shadow: 0 8px 24px rgba(8,145,178,0.1);
}
.card .card-body .chart-canvas{display:block; width:100%; height:320px; box-shadow: 0 4px 12px rgba(8,145,178,0.06); border-radius:12px; background:transparent}

/* cards container spacing for nicer flow */
.sheet-cards-row .col-12{display:flex}
.sheet-cards-row .card{flex:1}

/* toolbar and table niceties */
.sheet-toolbar .form-control{min-width:220px; border-color: rgba(8,145,178,0.15); transition: all 0.2s ease;}
.sheet-toolbar .form-control:focus{border-color: var(--brand); box-shadow: 0 0 0 3px rgba(8,145,178,0.1);}
.table-wrap{border-radius:12px; overflow:visible; max-height:none}
.table thead th{
  background: linear-gradient(180deg, rgba(8,145,178,0.06) 0%, rgba(8,145,178,0.03) 100%);
  border-bottom: 2px solid rgba(8,145,178,0.12);
}
/* Tighten and normalize header sizing to avoid large/heavy thead height */
.table thead th{
  padding:0.55rem 0.75rem; /* slightly smaller than body cells */
  vertical-align:middle;
  line-height:1.15;
  font-weight:600;
  border-bottom:1px solid #e6e6e6; /* thinner divider */
  white-space:nowrap; /* keep headers on single line for consistent height */
  overflow:hidden;
  text-overflow:ellipsis;
}
.table.compact td, .table.compact th{padding:0.45rem 0.5rem}
.temp-tooltip{position:fixed; background:#111; color:#fff; padding:6px 8px; border-radius:6px; font-size:0.8rem; opacity:0; transform:translateY(-6px); transition:all .16s ease; pointer-events:none}
.temp-tooltip.visible{opacity:0.95; transform:translateY(0)}

/* subtle sticky header shadow when user scrolls */
.table thead th.sticky-shadow{box-shadow:0 6px 12px rgba(0,0,0,0.06)}

/* Full-width toolbar outer bar */
.sheet-toolbar-outer{width:100%; background:linear-gradient(90deg, rgba(0,0,0,0.02), rgba(255,255,255,0.01)); box-shadow:inset 0 -1px 0 rgba(0,0,0,0.04); padding:0.45rem 0; margin-top:1.2rem}
.sheet-toolbar-outer .sheet-toolbar{padding:0}
.sheet-toolbar-outer .brand-heading{margin-right:1rem}
.sheet-toolbar-outer .text-start{ /* ensure title anchors left */ text-align:left}

/* Table should take more vertical space and become scrollable while header remains sticky beneath navbar+toolbar */
.table-wrap{/* allow the table to size naturally and scroll with the page */ border-radius:10px; overflow:visible; max-height:none}
.table thead th{position:static; top:auto; z-index:auto}

/* Force proper table display model to avoid header/tr/ths accidentally becoming block-level
   (some layout changes earlier may have caused unexpected wrapping). These rules re-assert
   table layout defaults and make the header behave as expected inside the scrollable wrapper. */
.table{
  display:table;
  width:100%;
  table-layout:auto; /* allow columns to size naturally */
  border-collapse:separate;
}
.table thead{display:table-header-group}
.table tbody{display:table-row-group}
.table thead tr{display:table-row}
.table tbody tr{display:table-row}
.table thead th, .table tbody td{display:table-cell}

/* give the table a little breathing room */
.table-responsive{padding-bottom:0.5rem}

/* responsive */
@media (max-width:767px){
  .hero-inner{gap:1rem}
  .hero-search{max-width:180px}
  /* allow header cells to wrap on narrow screens so content doesn't overflow */
  .table thead th{white-space:normal}
}

.navbar-brand{
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--brand);
  text-align: left;
  letter-spacing: -0.3px;
}
.navbar-brand span{display:block; font-size: 0.6rem; letter-spacing: 0.15em; color: var(--muted); font-weight: 600}
.nav-link{color: var(--muted); font-weight: 600; transition: all 0.2s ease; border-radius: 8px}

/* icons in nav links */
.nav-link .bi{font-size:0.95rem; vertical-align:baseline}
.nav-link .me-1{margin-right:0.35rem}

.card.sheet-card{border-radius: var(--radius-md)}
.card.sheet-card .card-body{min-height:110px}
.btn-ghost{background:transparent; border: 1.5px solid rgba(8,145,178,0.2); color: var(--brand); padding: 0.4rem 0.75rem; border-radius: 8px; font-weight: 600; transition: all 0.2s ease;}
.btn-ghost:hover{background: rgba(8,145,178,0.06); border-color: var(--brand);}

/* Primary / accent button */
.btn-primary, .btn-accent{
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand) 100%);
  color: #fff;
  border: 1px solid var(--brand);
  padding: 0.45rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(8,145,178,0.25);
}
.btn-primary:hover, .btn-accent:hover{
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  box-shadow: 0 6px 16px rgba(8,145,178,0.35);
  transform: translateY(-2px);
}

/* Links and brand colors */
a, .navbar-brand, .nav-link.active, .text-accent{color: var(--brand)}

/* Ensure nav background stays white and subtle border */
.nav-bar-outer{
  background: var(--surface);
  color: var(--text-primary);
  border-bottom: 1px solid rgba(8,145,178,0.08);
  box-shadow: 0 4px 12px rgba(8,145,178,0.04);
  backdrop-filter: blur(10px);
}
.nav-bar-outer .navbar-brand{color: var(--brand)}

/* Navbar and tab layout improvements */
.navbar{height:auto}
.nav-tabs{border-bottom: 0;}
.nav-tabs .nav-link{
  padding: 0.45rem 0.85rem;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.nav-tabs .nav-link:hover{
  background: rgba(8,145,178,0.08);
  color: var(--brand);
}
.nav-tabs .nav-link.active{
  background: linear-gradient(135deg, rgba(8,145,178,0.12) 0%, rgba(0,217,217,0.06) 100%);
  border-bottom: 3px solid var(--brand);
  color: var(--brand);
  font-weight: 700;
}
.tabs-wrapper{display:flex; justify-content:flex-start; align-items:center; min-width:0; gap:0.25rem}
.tabs-scroll{flex:1; overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; white-space:nowrap; min-width:0}
.tabs-scroll ul.nav{display:flex; gap:0.25rem; align-items:center}
.tabs-scroll::-webkit-scrollbar{height:6px}
.tabs-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12); border-radius:6px}

/* dark full-width nav outer */
.nav-bar-outer{
  background: var(--surface);
  color: var(--text-primary);
  border-bottom: 1px solid rgba(8,145,178,0.08);
  box-shadow: 0 4px 12px rgba(8,145,178,0.05);
}
.nav-bar-outer .navbar-brand{color: var(--brand)}

/* subtle glass effect and extra padding for header */
.nav-bar-outer{backdrop-filter: blur(10px);}
.nav-inner-fluid{padding-top: 0.35rem; padding-bottom: 0.35rem}
/* reduce navbar height to avoid content overlapping */

/* tighter nav item spacing and hover for better visual polish */
.nav .nav-item .nav-link{
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.nav .nav-item .nav-link:hover{background: rgba(8,145,178,0.08); color: var(--brand)}

/* Make the More button stand out slightly */
#moreTabsLi .nav-link{border-radius:10px}

/* Ensure dropdown menus from inside the scroll area are visible */
.tabs-scroll .dropdown-menu{z-index:2050}
.dropdown-menu{z-index:2050}
.nav-outer-fullwidth{position:fixed; top:0; left:0; right:0; z-index:1030}

/* ensure the nav inner fluid uses the full width but keeps inner content readable */
.nav-inner-fluid{padding-left:1rem; padding-right:1rem}
.nav-inner-fluid .tabs-wrapper{flex:1}

/* Table readability */
.table tbody td, .table tbody th{padding: 1rem 0.85rem; vertical-align:middle; color: var(--text-primary);}
.table tbody tr:nth-child(odd){background: #ffffff}
.table tbody tr:nth-child(even){background: rgba(8,145,178,0.02)}
.table tbody tr:hover{background: rgba(8,145,178,0.04);}
.table-responsive{border-radius: 12px; overflow:auto; border: 1px solid rgba(8,145,178,0.08);}


/* Constrain content width for readability */
.app-container{max-width:1180px; margin:0 auto; padding:1rem}

.value-cell{max-width:20rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lead{color:var(--muted)}

/* responsive tweaks */
@media (min-width:1200px){
  .container{max-width:1100px}
}

@media (max-width:767px){
  .nav-tabs .nav-link{padding:0.32rem 0.5rem; font-size:0.85rem}
  .navbar-brand{font-size:0.95rem}
  body{padding-top:72px}
  .hero-title{font-size:1.2rem}
  .sheet-card .card-body{min-height:96px}
}

/* Consider light adjustments for table and toolbar on light background */
.table thead th{
  background: linear-gradient(180deg, rgba(8,145,178,0.08) 0%, rgba(8,145,178,0.04) 100%);
  color: var(--text-primary);
  font-weight: 700;
}
.table tbody tr:nth-child(odd){background: #ffffff}
.table tbody tr:nth-child(even){background: rgba(8,145,178,0.02)}
.btn-outline-light{color: var(--brand); border-color: rgba(8,145,178,0.15)}
.lead{color: var(--muted)}

/* Make table headers pop a bit more with teal accent */
.table thead th{
  background: linear-gradient(180deg, rgba(8,145,178,0.08) 0%, rgba(8,145,178,0.04) 100%);
  color: var(--text-primary);
  font-weight: 700;
  border-bottom: 2px solid rgba(8,145,178,0.12);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
}

/* Stronger variant: teal solid header with white text for small header bars */
.table.table-accent thead th{
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(8,145,178,0.1) inset;
}

/* Hero title: gradient teal text and subtle underline accent */
.hero-title{
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1.1;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  position: relative;
}
.hero-title::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.5rem;
  width: 64px;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);
  box-shadow: 0 2px 8px rgba(8,145,178,0.2);
}

.hero-title:hover::after{
  width: 100%;
  transition: width 280ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* Also animate expansion smoothly from the initial state */
.hero-title::after{
  transition: width 280ms cubic-bezier(0.2, 0.9, 0.3, 1);
  transform-origin: left center;
}

/* Slightly increase hero subtitle contrast */
.hero-sub{color: var(--muted); font-weight: 500;}

/* ===== Form Controls & Inputs ===== */
.form-control, .form-select {
  border: 1px solid rgba(8,145,178,0.15);
  border-radius: 8px;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  background-color: #fff;
}

.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(8,145,178,0.1), inset 0 1px 2px rgba(0,0,0,0.05);
  background-color: #fff;
}

.form-control::placeholder {
  color: rgba(100,116,139,0.6);
  font-weight: 500;
}

.form-label {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

/* ===== Links ===== */
a {
  color: var(--brand);
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover {
  color: var(--brand-dark);
  text-decoration: underline;
}

/* ===== Badge styling ===== */
.badge {
  padding: 0.45rem 0.75rem;
  font-weight: 600;
  border-radius: 6px;
  font-size: 0.8rem;
}

.badge.bg-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important;
}

/* ===== Alert styling ===== */
.alert {
  border-radius: 10px;
  border: none;
  font-weight: 500;
}

.alert-info {
  background-color: rgba(8,145,178,0.08);
  color: var(--brand);
}

.alert-success {
  background-color: rgba(16,185,129,0.08);
  color: var(--success);
}

.alert-warning {
  background-color: rgba(245,158,11,0.08);
  color: var(--warning);
}

.alert-danger {
  background-color: rgba(239,68,68,0.08);
  color: var(--danger);
}

/* ===== Dropdown styling ===== */
.dropdown-menu {
  border: 1px solid rgba(8,145,178,0.12);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(8,145,178,0.1);
  backdrop-filter: blur(10px);
}

.dropdown-item {
  color: var(--text-primary);
  font-weight: 500;
  transition: all 0.2s ease;
}

.dropdown-item:hover, .dropdown-item.active {
  background-color: rgba(8,145,178,0.08);
  color: var(--brand);
}

/* CSS-only dropdown for sheet-group items (Jobs, Finance, etc.) */
.tabs-scroll {
  overflow: visible !important;
}

.sheet-group {
  position: relative;
  display: inline-block;
}

.sheet-group > .nav-link {
  position: relative;
  display: inline-block;
  padding: 0.45rem 0.85rem;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.sheet-group > .nav-link:hover {
  background: rgba(8,145,178,0.08);
  color: var(--brand);
}

.sheet-group .dropdown-menu {
  display: none;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  background: var(--surface);
  transform: translateY(-8px);
  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
  z-index: 2100;
  pointer-events: none;
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
}

.sheet-group:hover .dropdown-menu,
.sheet-group .dropdown-menu:hover {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.sheet-group .dropdown-menu li {
  list-style: none;
}

.sheet-group .dropdown-menu .dropdown-item {
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.sheet-group .dropdown-menu .dropdown-item:hover {
  background-color: rgba(8,145,178,0.1);
  color: var(--brand);
  padding-left: 1.2rem;
}

.sheet-group .dropdown-menu .dropdown-item.active {
  background-color: rgba(8,145,178,0.12);
  color: var(--brand);
  font-weight: 600;
}
/* ===== Pagination styling ===== */
.pagination .page-link {
  color: var(--brand);
  border-color: rgba(8,145,178,0.15);
  border-radius: 6px;
  transition: all 0.2s ease;
  margin: 0 2px;
}

.pagination .page-link:hover {
  background-color: rgba(8,145,178,0.08);
  border-color: var(--brand);
}

.pagination .page-item.active .page-link {
  background-color: var(--brand);
  border-color: var(--brand);
}

/* ===== Loading indicator animations ===== */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
}

/* ===== Scrollbar styling ===== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(8,145,178,0.03);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(8,145,178,0.2);
  border-radius: 10px;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(8,145,178,0.35);
}

/* Sheet table enhancements */
#tableSearch {
  border: 1px solid rgba(8,145,178,0.2);
  transition: all 0.2s ease;
}

#tableSearch:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(8,145,178,0.1);
}

/* Sortable header styling */
.sortable-header {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
}

.sortable-header:hover {
  background-color: rgba(8,145,178,0.05);
}

/* Toggle button active state */
#toggleCompact.active {
  background-color: rgba(8,145,178,0.1);
  border-color: var(--brand);
  color: var(--brand);
}

/* Compact table mode */
table.compact td,
table.compact th {
  padding: 0.35rem 0.5rem !important;
  font-size: 0.85rem;
}

table.compact .value-cell {
  line-height: 1.2;
}

/* Enhanced empty state */
tbody tr td[colspan] {
  padding: 2rem 1rem !important;
}

/* Button group styling */
.btn-group .btn:not(.disabled) {
  transition: all 0.15s ease;
}

.btn-group .btn:not(.disabled):hover {
  background-color: rgba(8,145,178,0.1);
  border-color: var(--brand);
}

/* Export button hover */
#exportBtn {
  transition: all 0.2s ease;
}

#exportBtn:hover {
  background-color: rgba(8,145,178,0.1);
  border-color: var(--brand);
  color: var(--brand);
}

/* ===== COMPREHENSIVE MOBILE RESPONSIVE STYLES ===== */

/* Mobile-first approach: Stack and simplify on smaller screens */
@media (max-width: 576px) {
  /* Adjust root variables for smaller screens */
  :root {
    --navbar-height: 55px;
  }

  /* Body padding adjusted for mobile navbar */
  body {
    padding-top: var(--navbar-height);
    font-size: 0.9rem;
  }

  /* ===== Topbar and Navigation ===== */
  .navbar {
    padding: 0.35rem 0;
  }

  .navbar-brand {
    font-size: 1rem;
    margin-right: 0.5rem !important;
  }

  .navbar-brand span {
    display: none;
  }

  /* Hide tabs wrapper on mobile, show hamburger (Bootstrap handles this) */
  .navbar-collapse {
    max-height: calc(100vh - 55px);
  }

  .nav-inner-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .tabs-wrapper {
    flex-direction: column;
    gap: 0;
  }

  .tabs-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    flex: 1;
  }

  .tabs-scroll ul.nav {
    flex-direction: column;
    gap: 0;
  }

  .nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    border-radius: 4px;
  }

  .sheet-group .dropdown-menu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    background: rgba(8,145,178,0.04);
    transform: none;
    box-shadow: none;
    border: none;
  }

  .sheet-group:hover .dropdown-menu {
    display: block;
  }

  .sheet-group .dropdown-menu .dropdown-item {
    padding: 0.5rem 1.5rem;
    font-size: 0.85rem;
  }

  /* User info and auth buttons */
  .d-md-block {
    display: none !important;
  }

  .btn-sm {
    padding: 0.35rem 0.65rem;
    font-size: 0.8rem;
  }

  /* ===== Hero Section ===== */
  .hero-section {
    padding: 1.2rem 0 0.8rem;
  }

  .hero-inner {
    flex-direction: column;
    gap: 1rem;
  }

  .hero-title {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .hero-title::after {
    width: 48px;
    height: 3px;
  }

  .hero-search {
    min-width: auto;
    max-width: 100%;
    width: 100%;
  }

  /* ===== Cards and Stats ===== */
  .stat-card {
    min-width: 140px;
    padding: 12px;
    font-size: 0.85rem;
  }

  .stat-value {
    font-size: 1.1rem;
  }

  .stat-label {
    font-size: 0.7rem;
  }

  .stats-row {
    gap: 8px;
    margin-bottom: 1rem;
  }

  .sheet-card {
    margin-bottom: 1rem;
  }

  .card.sheet-card .card-body {
    min-height: 140px;
    padding: 12px;
  }

  .card.sheet-card .card-title {
    font-size: 0.95rem;
  }

  /* ===== Forms and Inputs ===== */
  .form-control,
  .form-select {
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
  }

  .form-label {
    font-size: 0.85rem;
  }

  /* ===== Toolbar and Controls ===== */
  .sheet-toolbar {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .sheet-toolbar .form-control {
    min-width: auto;
    max-width: 100%;
    flex: 1;
    min-width: 150px;
  }

  .sheet-toolbar-outer {
    padding: 0.3rem 0;
  }

  .d-flex.align-items-center.mb-3.sheet-toolbar {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .sheet-toolbar .brand-heading {
    margin-right: 0;
    margin-bottom: 0.5rem;
    width: 100%;
  }

  .sheet-toolbar h1 {
    font-size: 1.2rem;
  }

  .ms-auto {
    margin-left: 0 !important;
    width: 100%;
  }

  /* ===== Tables ===== */
  .table-responsive {
    border: none;
    border-radius: 8px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table {
    font-size: 0.85rem;
  }

  .table thead th {
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    white-space: normal;
  }

  .table tbody td,
  .table tbody th {
    padding: 0.6rem 0.5rem;
    font-size: 0.85rem;
  }

  .table.compact td,
  .table.compact th {
    padding: 0.3rem 0.4rem !important;
    font-size: 0.75rem;
  }

  .value-cell {
    max-width: 120px;
    word-break: break-word;
    white-space: normal;
  }

  /* Make table columns narrower on mobile */
  .table thead th,
  .table tbody td {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ===== Badges ===== */
  .badge {
    padding: 0.35rem 0.55rem;
    font-size: 0.7rem;
  }

  /* ===== Pagination and Controls ===== */
  .btn-group {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .pagination .page-link {
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
  }

  /* ===== Info Bar ===== */
  .container-fluid.px-4.mt-2.mb-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .d-flex.align-items-center.justify-content-between.flex-wrap {
    gap: 0.75rem;
  }

  /* ===== Recent Rows Table ===== */
  .recent-rows thead th {
    padding: 0.5rem 0.4rem;
    font-size: 0.75rem;
  }

  .recent-rows td {
    padding: 0.5rem 0.4rem;
    font-size: 0.8rem;
  }

  .recent-rows .row-title {
    max-width: 120px;
  }

  /* ===== Index Page Specific ===== */
  .app-container.index-fullwidth {
    padding: 12px;
  }

  .sheet-cards-row {
    margin-top: 16px;
  }

  .card-footer-stats {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .card-stats-items {
    gap: 8px;
  }

  /* ===== Tracker Page Specific ===== */
  .tracker-header-controls {
    width: 100%;
  }

  .tracker-header-controls .d-flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .tracker-week-select {
    min-width: 150px;
  }

  /* Charts should be 100% width on mobile */
  .chart-canvas {
    height: 250px !important;
    max-height: 280px;
  }

  .card-body.chart-body {
    min-height: 280px;
  }

  /* ===== Buttons ===== */
  .btn {
    font-size: 0.9rem;
    padding: 0.4rem 0.75rem;
  }

  .btn-sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
  }

  .btn-accent,
  .btn-primary {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
  }

  .btn-ghost {
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
  }
}

/* Tablet view: 577px to 991px */
@media (min-width: 577px) and (max-width: 991px) {
  :root {
    --navbar-height: 58px;
  }

  .navbar-brand {
    font-size: 1.05rem;
  }

  .navbar-brand span {
    display: block;
    font-size: 0.55rem;
  }

  .hero-title {
    font-size: 1.8rem;
  }

  .hero-search {
    min-width: auto;
    max-width: 100%;
  }

  .sheet-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .sheet-toolbar .ms-auto {
    margin-left: 0 !important;
    width: 100%;
  }

  .sheet-toolbar-outer .d-flex {
    flex-wrap: wrap;
  }

  .table {
    font-size: 0.9rem;
  }

  .table thead th,
  .table tbody td {
    padding: 0.65rem 0.6rem;
  }

  .form-control,
  .form-select {
    font-size: 0.95rem;
    padding: 0.45rem 0.65rem;
  }

  /* Charts slightly smaller on tablet */
  .chart-canvas {
    height: 300px !important;
    max-height: 340px;
  }

  /* Single column for chart cards on smaller tablets */
  .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  @media (max-width: 768px) {
    .col-lg-6 {
      flex: 0 0 100%;
      max-width: 100%;
    }

    .sheet-cards-row > .col-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }
}

/* Desktop view: maintain original styling at 992px and above */
@media (min-width: 992px) {
  .app-container {
    max-width: 1180px;
  }

  .chart-canvas {
    height: 320px !important;
    max-height: 360px;
  }

  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Tracker stats cards in 2-4 columns */
  #summaries .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  #summaries .col-md-2 {
    flex: 0 0 16.666%;
    max-width: 16.666%;
  }
}

/* Extra small screens (less than 360px - very small phones) */
@media (max-width: 359px) {
  .navbar-brand {
    font-size: 0.9rem;
  }

  .hero-title {
    font-size: 1.2rem;
  }

  .btn {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
  }

  .table {
    font-size: 0.75rem;
  }

  .table thead th,
  .table tbody td {
    padding: 0.4rem 0.3rem;
  }
}

/* Mobile navbar menu fixes */
@media (max-width: 991px) {
  /* Hide navbar-toggler icon styling */
  .navbar-toggler {
    border: none;
    padding: 0.25rem 0.5rem;
  }

  .navbar-toggler:focus {
    box-shadow: none;
    outline: none;
  }

  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230891b2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 7h18M6 15h18M6 23h18'/%3e%3c/svg%3e");
  }

  /* Mobile-specific nav list styling */
  .tabs-wrapper {
    order: 100;
    width: 100%;
    margin-top: 0.5rem;
  }

  .tabs-scroll {
    overflow: visible !important;
    display: block;
    width: 100%;
  }

  .sheet-tabs {
    display: flex !important;
    flex-direction: column;
    gap: 0 !important;
  }

  .sheet-tab {
    display: block !important;
    width: 100%;
  }

  .sheet-tab > a {
    display: block;
    padding: 0.75rem 1rem;
    width: 100%;
  }

  /* Mobile dropdown menu styling */
  .sheet-group {
    display: block;
    width: 100%;
    position: static;
  }

  .sheet-group > .nav-link {
    display: block;
    padding: 0.75rem 1rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    position: relative;
  }

  .sheet-group > .nav-link::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid var(--muted);
  }

  .sheet-group > .nav-link[aria-expanded="true"]::after {
    border-top: none;
    border-bottom: 4px solid var(--muted);
  }

  .sheet-group .dropdown-menu {
    position: static !important;
    display: none !important;
    opacity: 1;
    visibility: visible;
    background: rgba(8,145,178,0.05);
    transform: none;
    box-shadow: none;
    border: none;
    padding: 0 0 0 1rem;
    min-width: auto;
    margin: 0;
  }

  .sheet-group .dropdown-menu.show {
    display: block !important;
  }

  .sheet-group .dropdown-menu .dropdown-item {
    padding: 0.5rem 1rem;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
  }

  .sheet-group .dropdown-menu .dropdown-item:hover {
    padding-left: 1rem;
    border-left-color: var(--brand);
    background-color: rgba(8,145,178,0.08);
  }

  .sheet-group .dropdown-menu .dropdown-item.active {
    background-color: rgba(8,145,178,0.1);
    border-left-color: var(--brand);
  }

  /* Nav links on mobile */
  .nav-link {
    padding: 0.75rem 1rem;
    display: block;
    width: 100%;
  }

  .nav-link.active {
    background: rgba(8,145,178,0.08);
  }

  /* Hide duplicate tracker nav on mobile */
  .ms-3.d-flex {
    display: none !important;
  }
}

/* Large desktop view optimization */
@media (min-width: 1400px) {
  .app-container {
    max-width: 1320px;
  }

  .container {
    max-width: 1320px;
  }
}