/* Table spacing + alignment tweaks */
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table thead th { text-align: left; font-weight: 600; background: #fafafa; }
.table th, .table td { padding: 12px 16px; vertical-align: middle; border-bottom: 1px solid #e5e7eb; }
.table tbody tr:hover { background: #fffdf3; }

/* Card spacing */
.card { padding: 16px; border-radius: 8px; }

/* Grid spacing utilities */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-2-compact { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Topbar/logo spacing */
.topbar { display:flex; align-items:center; justify-content:space-between; padding: 8px 12px; }
.brand-row { display:flex; align-items:center; gap:10px; }
.brand-logo img { height:32px; width:auto; display:block; }

/* Buttons */
.btn { padding: 8px 14px; }
.btn-ghost { padding: 6px 10px; }

/* Imported theme based on performancetracking/client/src/index.css */
:root {
  --bg: #fff4ec;
  --panel: #ffffff;
  --sidebar: #fff7ef;
  --border: #f2e8df;
  --primary: #ffc107;
  --primary-600: #e0a106;
  --danger: #e11d48;
  --text: #0f172a;
  --muted: #64748b;
  --card-radius: 12px;
  --shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); }

/* Layout */
.topbar { background: var(--sidebar); border-top: none; border-bottom: 2px solid var(--border); border-left: none; border-right: none; border-radius: 8px; display:flex; align-items:center; justify-content: space-between; padding: 8px 16px; margin: 8px; position: sticky; top: 0; z-index: 50; overflow-x: auto; }
.layout { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 72px); padding-left: 8px; padding-right: 8px; }
.sidebar { background: var(--sidebar); border: 2px solid var(--border); padding: 16px; margin: 8px; margin-bottom: 20px; border-radius: 8px; }
.content { padding: 20px; }

/* Sidebar nav */
.brand { font-weight: 800; font-size: 18px; margin-bottom: 4px; }
.brand-tagline { font-size: 12px; margin-bottom: 16px; color: var(--muted); }
.nav { list-style: none; padding: 0; margin: 0; }
.nav li { margin-bottom: 6px; }
.nav button { width: 100%; text-align: left; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text); display:flex; align-items:center; gap:8px; }
.nav button:hover { background: #fafafa; border-color: var(--border); }
.nav button.active { background: #fff7ed; border-color: #fed7aa; color: var(--primary); }

/* Cards */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 8px 30px rgba(15,23,42,0.05); overflow: visible; }
.card-header { padding: 14px 18px; border-bottom: 1px solid var(--border); display:flex; align-items:center; justify-content: space-between; }
.card-body { padding: 16px; }

/* Controls */
.input, select { height: 40px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text); }
.input:focus, select:focus { outline: none; border-color: #c7d2fe; box-shadow: 0 0 0 3px #eef2ff; }

/* Buttons (yellow default, hover black) */
.btn { border: 1px solid #f5d565; border-radius: 10px; padding: 10px 14px; background: var(--primary); color:#111; cursor: pointer; transition: transform .06s ease, box-shadow .15s ease, filter .15s ease, background .15s ease, color .15s ease; }
.btn:hover, .btn:focus { background:#000 !important; color:#fff !important; border-color:#000 !important; box-shadow: 0 4px 14px rgba(15,23,42,0.10); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #111; border-color: #f5d565; }
.btn-primary:hover, .btn-primary:focus { background:#000 !important; color:#fff !important; border-color:#000 !important; }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover, .btn-ghost:focus { background:#000 !important; color:#fff !important; border-color:#000 !important; }
.btn-danger { background: var(--danger); color: #fff; border-color: transparent; }

/* Table (Behance-like) */
.table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(15,23,42,0.06); overflow: hidden; }
.table thead th { background: #f8fafc; font-weight: 600; font-size: 12px; color: var(--muted); position: sticky; top: 0; z-index: 1; }
.table th, .table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.table tbody tr:nth-child(odd) { background: #fff; }
.table tbody tr:nth-child(even) { background: #fffdfa; }
.table tbody tr:hover { background: #fff7e6; }
.table tr:last-child td { border-bottom: none; }
.table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Chips */
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; line-height: 18px; border: 1px solid var(--border); background: #f8fafc; color: #111; white-space: nowrap; vertical-align: middle; }
.chip-returned { background: #fff7ed; border-color: #fdba74; color: #b45309; }
.muted { color: #6b7280; font-size: 12px; }
.icon-clip { font-size: 14px; color: #6b7280; vertical-align: middle; margin-right: 4px; }
.icon-pill { display:inline-flex; align-items:center; gap:4px; padding:2px 6px; border:1px solid var(--border); border-radius:999px; background:#f9fafb; color:#374151; font-size:12px; }

/* Thumbnails */
.thumb { height: 28px; width: 28px; object-fit: cover; border-radius: 4px; border: 1px solid #e5e7eb; }

/* Status bar */
.statusbar { height: 8px; border-radius: 999px; background: #f3f4f6; overflow:hidden; }
.statusbar > span { display:block; height:100%; border-radius:999px; }
.statusbar.pending > span { width:30%; background:#fde68a; }
.statusbar.inprogress > span { width:60%; background:#f59e0b; }
.statusbar.resolved > span { width:100%; background:#10b981; }
.chip-green { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.chip-yellow { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.chip-red { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.chip-gray { background: #f3f4f6; border-color: #e5e7eb; color: #374151; }

/* Loader overlay */
.loader-overlay{position:fixed;inset:0;background:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;z-index:1000}
.loader-center{position:relative;display:flex;align-items:center;justify-content:center}
.loader-logo{position:absolute;width:48px;height:auto}
.ring-a{animation:spin 1.6s linear infinite; transform-origin:50% 50%}
.ring-b{animation:spin-rev 1.4s linear infinite; transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin-rev{to{transform:rotate(-360deg)}}

/* Toast */
.toast-container{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:.5rem;z-index:60}
.toast{background:#111827;color:#fff;padding:.6rem .8rem;border-radius:6px;box-shadow:0 10px 20px rgba(0,0,0,.2)}

/* Brand in topbar */
.brand-row{display:flex;align-items:center;gap:10px}
.brand-logo img{height:28px;display:block}
.brand-name{font-weight:800}

/* Topbar navigation - hidden on desktop, visible on mobile */
.topbar-nav { display: none; }
.topbar-nav a, .topbar-nav button { color: var(--text); text-decoration: none; font-size: 14px; white-space: nowrap; padding: 6px 12px; border-radius: 8px; transition: background .2s ease; background: transparent; border: none; cursor: pointer; }
.topbar-nav a:hover, .topbar-nav button:hover { background: rgba(0,0,0,0.05); }

/* Backdrop for mobile sidebar */
.backdrop { position: fixed; inset: 0; background: rgba(2,6,23,0.45); display: none; z-index: 58; opacity: 0; transition: opacity .25s ease-in-out; }
.backdrop.show { display: block; opacity: 1; }

/* Responsive breakpoints */
@media (max-width: 768px) {
  /* Layout becomes single column */
  .layout {
    grid-template-columns: 1fr;
    padding-left: 0;
    padding-right: 0;
  }
  
  /* Hide sidebar on mobile */
  .sidebar { display: none; }
  
  /* Topbar adjustments - match content width, allow horizontal scroll */
  .topbar {
    margin: 0;
    padding: 8px 12px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    width: auto;
    min-width: 950px;
    overflow-x: auto;
  }
  
  /* Logo on left */
  .brand-row { flex-shrink: 0; }
  .brand-logo img { height: 24px; }
  
  /* Links centered with 10px gaps */
  .topbar-nav { 
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }
  .topbar-nav a, .topbar-nav button, .topbar-nav form { padding: 6px 10px; font-size: 13px; flex-shrink: 0; margin: 0; }
  .topbar-nav button { padding: 6px 10px; }
  
  /* User info on right */
  .user-info { flex-shrink: 0; font-size: 13px; white-space: nowrap; }
  
  /* Content spacing - match header padding */
  .content { padding: 12px; }
  
  /* Cards stack better */
  .cards { grid-template-columns: 1fr; gap: 12px; }
  .card { border-radius: 12px; }
  .card-body { padding: 12px; }
  
  /* Table wrapper for horizontal scroll */
  .table-responsive { 
    width: 100%; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    padding-bottom: 6px; 
  }
  
  .table-responsive .table { min-width: 720px; }
  
  /* Forms and inputs */
  .input, select, button, .btn { max-width: 100%; font-size: 14px; }
  
  /* Grid adjustments */
  .grid-2 { grid-template-columns: 1fr; }
  .grid-2-compact { grid-template-columns: 1fr; }
  
  /* Hide brand name on very small screens */
  .brand-name { display: none; }
  
  /* Mobile nav (if used) */
  .mobile-nav { display: flex; gap: 8px; flex-wrap: wrap; }
}

@media (max-width: 480px) {
  /* Even tighter spacing on very small screens */
  .content { padding: 8px; }
  .card { padding: 12px; }
  .table th, .table td { padding: 8px 10px; font-size: 13px; }
  .topbar { padding: 6px 8px; }
  .btn, button { padding: 8px 12px; font-size: 13px; }
  .brand-name { display: none; }
  .topbar-nav { gap: 10px; }
  .topbar-nav a, .topbar-nav button { padding: 5px 8px; font-size: 12px; }
  .user-info { font-size: 12px; }
  .brand-logo img { height: 22px; }
}