/* =========================================================
   ITR Filing Dashboard — Premium Theme (Dark + Light)
   ========================================================= */

/* ---- Dark theme (default) -------------------------------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #07091a;
  --panel:         rgba(12, 18, 42, 0.78);
  --panel-solid:   #0c1228;
  --border:        rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.13);

  --ink:   #dde6f7;
  --ink-2: #c0cfea;
  --muted: #6b7fa8;

  --brand:       #3b82f6;
  --brand-dark:  #2563eb;
  --brand-light: rgba(59, 130, 246, 0.14);

  --success: #10b981;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --cyan:    #06b6d4;

  --grad-brand:   linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  --grad-accent:  linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
  --grad-success: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  --grad-warm:    linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  --grad-text:    linear-gradient(135deg, #dde6f7 0%, #8ca9d4 100%);
  --grad-eyebrow: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);

  --bg-mesh:
    radial-gradient(ellipse at 15% 20%,  rgba(59,130,246,0.09)  0%, transparent 50%),
    radial-gradient(ellipse at 85% 75%,  rgba(139,92,246,0.07)  0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%,  rgba(6,182,212,0.04)   0%, transparent 65%);

  --shadow-sm:   0 2px  8px  rgba(0,0,0,.45);
  --shadow:      0 8px  32px rgba(0,0,0,.55);
  --shadow-lg:   0 20px 60px rgba(0,0,0,.65);
  --glow-brand:  0 0   28px  rgba(59,130,246,.18);

  --input-bg:       rgba(255,255,255,.04);
  --input-bg-hover: rgba(59,130,246,.04);
  --input-bg-focus: rgba(59,130,246,.06);
  --th-bg:          rgba(8, 11, 28, .96);
  --row-hover:      rgba(59,130,246,.055);
  --toast-bg:       rgba(10, 15, 40, .96);
  --topbar-bg:      rgba(7, 9, 26, .88);
  --select-bg:      #0d1228;
  --lh-bg:          rgba(12, 18, 45, 0.98);

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --t:    all .18s cubic-bezier(.4,0,.2,1);
  --ts:   all .36s cubic-bezier(.4,0,.2,1);
}

/* ---- Light theme ----------------------------------------- */
[data-theme="light"] {
  color-scheme: light;

  --bg:            #eef2fa;
  --panel:         rgba(255, 255, 255, 0.95);
  --panel-solid:   #ffffff;
  --border:        rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.14);

  --ink:   #182132;
  --ink-2: #344054;
  --muted: #667085;

  --brand:       #1d4f91;
  --brand-dark:  #143866;
  --brand-light: rgba(29, 79, 145, 0.08);

  --success: #0a7a5a;
  --warning: #92400e;
  --danger:  #991b1b;

  --grad-brand:   linear-gradient(135deg, #1d4f91 0%, #5b21b6 100%);
  --grad-accent:  linear-gradient(135deg, #0e7490 0%, #1d4f91 100%);
  --grad-success: linear-gradient(135deg, #0a7a5a 0%, #0e7490 100%);
  --grad-warm:    linear-gradient(135deg, #92400e 0%, #991b1b 100%);
  --grad-text:    linear-gradient(135deg, #182132 0%, #344054 100%);
  --grad-eyebrow: linear-gradient(135deg, #0e7490 0%, #1d4f91 100%);

  --bg-mesh:
    radial-gradient(ellipse at 15% 20%, rgba(29,79,145,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 75%, rgba(91,33,182,0.04) 0%, transparent 50%);

  --shadow-sm:   0 1px  4px  rgba(0,0,0,.08);
  --shadow:      0 4px  20px rgba(0,0,0,.10);
  --shadow-lg:   0 12px 40px rgba(0,0,0,.14);
  --glow-brand:  0 0   20px  rgba(29,79,145,.10);

  --input-bg:       #ffffff;
  --input-bg-hover: rgba(29,79,145,.03);
  --input-bg-focus: rgba(29,79,145,.05);
  --th-bg:          #f8fafc;
  --row-hover:      rgba(29,79,145,.04);
  --toast-bg:       rgba(18, 27, 55, .96);
  --topbar-bg:      rgba(255, 255, 255, .92);
  --select-bg:      #ffffff;
  --lh-bg:          #ffffff;
}

/* ---- Reset ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, p { margin: 0; }

/* ---- Scrollbar -------------------------------------------- */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: rgba(127,127,127,.06); }
::-webkit-scrollbar-thumb        { background: rgba(127,127,127,.22); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(127,127,127,.36); }

/* ---- Body ------------------------------------------------- */
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg) var(--bg-mesh);
  color: var(--ink);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  transition: background .25s ease, color .25s ease;
}

button, input, select, textarea { font: inherit; }

/* ============================================================
   BUTTONS
   ============================================================ */
button, .file-button {
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 9px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  transition: var(--t);
  letter-spacing: .01em;
  position: relative;
  overflow: hidden;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.file-button:focus-within {
  outline: 2px solid rgba(59,130,246,.6);
  outline-offset: 2px;
}

/* Primary */
.primary {
  background: var(--grad-brand);
  color: #fff;
  border: none;
  box-shadow: 0 4px 18px rgba(59,130,246,.28);
}
.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(59,130,246,.42);
  filter: brightness(1.08);
}
.primary:active { transform: translateY(0); }

/* Secondary */
.secondary, .file-button {
  background: var(--input-bg);
  color: var(--ink-2);
  border-color: var(--border-strong);
  backdrop-filter: blur(8px);
}
.secondary:hover, .file-button:hover {
  background: var(--brand-light);
  border-color: var(--brand);
  color: var(--brand);
}

/* Danger */
.danger {
  background: rgba(239,68,68,.08);
  color: var(--danger);
  border-color: rgba(239,68,68,.22);
}
.danger:hover {
  background: rgba(239,68,68,.16);
  border-color: rgba(239,68,68,.38);
}

.file-button input { display: none; }

/* Theme toggle icon button */
.icon-btn {
  background: var(--input-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 8px 11px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: var(--t);
  backdrop-filter: blur(8px);
}
.icon-btn:hover {
  background: var(--brand-light);
  border-color: var(--brand);
  transform: rotate(20deg) scale(1.08);
}

/* Login button (per-row) */
.login-btn {
  background: rgba(16,185,129,.1);
  color: #10b981;
  border: 1px solid rgba(16,185,129,.28);
  border-radius: var(--r-sm);
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--t);
}
.login-btn:hover {
  background: rgba(16,185,129,.2);
  border-color: rgba(16,185,129,.5);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16,185,129,.2);
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  padding: 22px 32px 18px;
  background: var(--topbar-bg);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 1px;
  background: var(--grad-brand);
  opacity: .22;
}

.eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--grad-eyebrow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.025em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.top-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  max-width: 820px;
}

/* ============================================================
   SHELL
   ============================================================ */
.shell { padding: 22px 32px 40px; }

/* ============================================================
   METRIC CARDS
   ============================================================ */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.metric {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 20px 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
  transition: var(--ts);
  cursor: default;
}

.metric::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--r) var(--r) 0 0;
}
.metric:nth-child(1)::before { background: var(--grad-brand);   }
.metric:nth-child(2)::before { background: var(--grad-warm);    }
.metric:nth-child(3)::before { background: var(--grad-success); }
.metric:nth-child(4)::before { background: var(--grad-warm);    }
.metric:nth-child(5)::before { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.metric:nth-child(6)::before { background: var(--grad-success); }

.metric::after {
  content: '';
  position: absolute;
  top: -30px; right: -20px;
  width: 90px; height: 90px;
  border-radius: 50%;
  opacity: .35;
  transition: var(--ts);
  pointer-events: none;
}
.metric:nth-child(1)::after { background: radial-gradient(circle, rgba(59,130,246,.22) 0%, transparent 70%); }
.metric:nth-child(2)::after { background: radial-gradient(circle, rgba(245,158,11,.18) 0%, transparent 70%); }
.metric:nth-child(3)::after { background: radial-gradient(circle, rgba(16,185,129,.18) 0%, transparent 70%); }
.metric:nth-child(4)::after { background: radial-gradient(circle, rgba(239,68,68,.18)  0%, transparent 70%); }
.metric:nth-child(5)::after { background: radial-gradient(circle, rgba(245,158,11,.22) 0%, transparent 70%); }
.metric:nth-child(6)::after { background: radial-gradient(circle, rgba(16,185,129,.22)  0%, transparent 70%); }

.metric:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg), var(--glow-brand);
}
.metric:hover::after { transform: scale(1.6); opacity: .7; }

/* Clickable metric cards */
.metric--clickable {
  cursor: pointer;
  user-select: none;
}
.metric--clickable:hover { border-color: var(--brand); }

/* Active metric filter highlight */
.metric--active {
  border-color: var(--brand) !important;
  box-shadow: var(--shadow-lg), 0 0 0 2px var(--brand-light), var(--glow-brand) !important;
}
.metric--active::before { opacity: 1 !important; height: 3px !important; }

.metric span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.metric strong {
  display: block;
  margin-top: 10px;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  overflow-wrap: break-word;
}
.metric:nth-child(1) strong { background: var(--grad-brand);   -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.metric:nth-child(2) strong { background: var(--grad-warm);    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.metric:nth-child(3) strong { background: var(--grad-success); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.metric:nth-child(4) strong { background: var(--grad-warm);    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.metric:nth-child(5) strong { background: linear-gradient(135deg, #f59e0b, #d97706); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.metric:nth-child(6) strong { background: var(--grad-success); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ============================================================
   WORKSPACE
   ============================================================ */
.workspace {
  display: grid;
  grid-template-columns: minmax(780px, 1fr) 360px;
  gap: 18px;
  align-items: start;
}

/* ============================================================
   PANELS
   ============================================================ */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.panel-head.compact { padding-bottom: 12px; }

.panel-head h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.panel-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

/* ============================================================
   TOOLBAR
   ============================================================ */
.toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 160px 150px;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}

/* ============================================================
   INPUTS
   ============================================================ */
input, select, textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--input-bg);
  color: var(--ink);
  padding: 9px 11px;
  transition: var(--t);
}

input:hover, select:hover, textarea:hover {
  border-color: rgba(59,130,246,.32);
  background: var(--input-bg-hover);
}

input:focus, select:focus, textarea:focus {
  border-color: rgba(59,130,246,.6);
  background: var(--input-bg-focus);
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}

input::placeholder { color: var(--muted); }

select option {
  background: var(--select-bg);
  color: var(--ink);
}

textarea { resize: vertical; }

/* ============================================================
   TABLE
   ============================================================ */
.table-wrap {
  overflow: auto;
  max-height: calc(100vh - 300px);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px;
}

th, td {
  border-bottom: 1px solid var(--border);
  padding: 10px 10px;
  text-align: left;
  vertical-align: middle;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--th-bg);
  backdrop-filter: blur(12px);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

tbody tr { transition: background .14s ease; }
tbody tr:hover { background: var(--row-hover); }
tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   INLINE STATUS SELECT
   ============================================================ */
.status-inline {
  background: var(--input-bg);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  width: auto;
}
.status-inline:focus {
  border-color: rgba(59,130,246,.5);
  box-shadow: 0 0 0 2px rgba(59,130,246,.12);
  outline: none;
}

/* ============================================================
   PILLS
   ============================================================ */
.code-pill, .status-pill, .priority-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid transparent;
}

.code-pill {
  min-width: 34px;
  background: var(--brand-light);
  color: var(--brand);
  border-color: rgba(59,130,246,.25);
}

/* Status pills */
.status-pill.not-started,
.status-pill.documents-pending,
.status-pill.pending {
  background: rgba(245,158,11,.12);
  color: #d97706;
  border-color: rgba(245,158,11,.28);
}
[data-theme="dark"] .status-pill.not-started,
[data-theme="dark"] .status-pill.documents-pending,
[data-theme="dark"] .status-pill.pending { color: #fbbf24; }

.status-pill.data-ready {
  background: var(--brand-light);
  color: var(--brand);
  border-color: rgba(59,130,246,.25);
}
.status-pill.computation-done,
.status-pill.return-filed {
  background: rgba(6,182,212,.1);
  color: #0891b2;
  border-color: rgba(6,182,212,.25);
}
[data-theme="dark"] .status-pill.computation-done,
[data-theme="dark"] .status-pill.return-filed,
[data-theme="dark"] .status-pill.filed { color: #67e8f9; }

.status-pill.filed {
  background: rgba(6,182,212,.1);
  color: #0891b2;
  border-color: rgba(6,182,212,.25);
}

/* E-Verified = green (same as verified) */
.status-pill.e-verified {
  background: rgba(16,185,129,.1);
  color: #059669;
  border-color: rgba(16,185,129,.25);
}
[data-theme="dark"] .status-pill.e-verified { color: #6ee7b7; }



.status-pill.verified,
.status-pill.done,
.status-pill.not-required {
  background: rgba(16,185,129,.1);
  color: #059669;
  border-color: rgba(16,185,129,.25);
}
[data-theme="dark"] .status-pill.verified,
[data-theme="dark"] .status-pill.done,
[data-theme="dark"] .status-pill.not-required { color: #6ee7b7; }

.status-pill.on-hold {
  background: rgba(100,116,139,.1);
  color: var(--muted);
  border-color: rgba(100,116,139,.2);
}

/* Client Status Pills (Active / Discontinued) */
.cs-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid transparent;
}
.cs-pill.active {
  background: rgba(16,185,129,.1);
  color: #059669;
  border-color: rgba(16,185,129,.25);
}
[data-theme="dark"] .cs-pill.active { color: #6ee7b7; }

.cs-pill.discontinued {
  background: rgba(239,68,68,.1);
  color: #dc2626;
  border-color: rgba(239,68,68,.25);
}
[data-theme="dark"] .cs-pill.discontinued { color: #fca5a5; }

/* Priority pills */
.priority-pill.urgent {
  background: rgba(239,68,68,.1);
  color: #dc2626;
  border-color: rgba(239,68,68,.25);
}
[data-theme="dark"] .priority-pill.urgent { color: #fca5a5; }

.priority-pill.high {
  background: rgba(245,158,11,.1);
  color: #d97706;
  border-color: rgba(245,158,11,.25);
}
[data-theme="dark"] .priority-pill.high { color: #fcd34d; }

.priority-pill.normal {
  background: var(--brand-light);
  color: var(--brand);
  border-color: rgba(59,130,246,.2);
}

.priority-pill.low {
  background: rgba(100,116,139,.1);
  color: var(--muted);
  border-color: rgba(100,116,139,.2);
}

/* ============================================================
   CLIENT INFO IN TABLE
   ============================================================ */
.client-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
}

.client-sub {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

/* ============================================================
   ROW ACTION BUTTONS
   ============================================================ */
.row-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.row-actions button {
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 600;
}

/* Bigger, more prominent Edit button */
.edit-btn {
  padding: 7px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  background: var(--brand-light) !important;
  color: var(--brand) !important;
  border-color: rgba(59,130,246,.3) !important;
}
.edit-btn:hover {
  background: rgba(59,130,246,.2) !important;
  border-color: var(--brand) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59,130,246,.2);
}

/* ============================================================
   FORM PANEL
   ============================================================ */
.form-panel {
  position: sticky;
  top: 82px;
}

form {
  display: grid;
  gap: 11px;
  padding: 16px 20px;
}

label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.form-grid          { display: grid; gap: 10px; }
.form-grid.two      { grid-template-columns: 1fr 1fr; }
.form-grid.three    { grid-template-columns: .7fr .7fr 1fr; }

.form-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 2px;
}

/* ============================================================
   ATTENTION PANEL
   ============================================================ */
.attention {
  border-top: 1px solid var(--border);
  padding: 14px 20px 18px;
}

.attention h3 {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}

.attention ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.attention li {
  margin: 5px 0;
  font-size: 12px;
  line-height: 1.5;
}

/* ============================================================
   TOAST
   ============================================================ */
#toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  max-width: min(420px, calc(100vw - 48px));
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: var(--toast-bg);
  backdrop-filter: blur(24px);
  border: 1px solid var(--border-strong);
  color: #e2e8f5;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: all .22s cubic-bezier(.4,0,.2,1);
  font-size: 13px;
  font-weight: 500;
  z-index: 9000;
}

#toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   LOGIN HELPER MODAL
   ============================================================ */
.lh-overlay {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  width: min(420px, calc(100vw - 32px));
  animation: lh-slide-in .28s cubic-bezier(.4,0,.2,1);
}

.lh-overlay[hidden] { display: none; }

@keyframes lh-slide-in {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)     scale(1);   }
}

.lh-card {
  background: var(--lh-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(16,185,129,.12);
  overflow: hidden;
}

.lh-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(16,185,129,.06);
}

.lh-eyebrow {
  font-size: 12px;
  font-weight: 800;
  color: #10b981;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.lh-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.lh-close {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 13px;
  cursor: pointer;
  color: var(--muted);
  transition: var(--t);
  flex-shrink: 0;
}
.lh-close:hover {
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.3);
  color: #ef4444;
}

.lh-steps {
  margin: 0;
  padding: 14px 18px 10px 34px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}
.lh-steps li { margin-bottom: 3px; }
.lh-steps strong { color: var(--ink); }

.lh-creds {
  display: grid;
  gap: 8px;
  padding: 10px 18px 14px;
}

.lh-cred-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  background: var(--input-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}

.lh-cred-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  display: block;
  grid-column: 1 / -1;
}

.lh-cred-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  font-family: 'Courier New', monospace;
  letter-spacing: .04em;
  word-break: break-all;
}

.lh-copy-btn {
  padding: 5px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.lh-note {
  margin: 0;
  padding: 10px 18px 14px;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  line-height: 1.5;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .topbar { display: block; }
  .top-actions {
    justify-content: flex-start;
    margin-top: 14px;
  }
  .workspace { display: block; }
  .form-panel {
    position: static;
    margin-top: 18px;
  }
}

@media (max-width: 760px) {
  .topbar, .shell {
    padding-left: 16px;
    padding-right: 16px;
  }
  .summary-grid,
  .toolbar,
  .form-grid.two,
  .form-grid.three { grid-template-columns: 1fr; }

  .lh-overlay {
    bottom: 0;
    right: 0;
    width: 100%;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .lh-card { border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

/* ============================================================
   FIREBASE — LOGIN SCREEN
   ============================================================ */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 50% at 30% 20%, rgba(59,130,246,.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 75% 80%, rgba(139,92,246,.10) 0%, transparent 60%);
}

.login-screen[hidden] {
  display: none !important;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  padding: 44px 40px 40px;
  text-align: center;
  box-shadow: 0 32px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(20px);
  animation: loginFadeIn .4s ease both;
}

@keyframes loginFadeIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.login-logo {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 18px;
  filter: drop-shadow(0 4px 12px rgba(59,130,246,.4));
}

.login-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -.03em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.login-sub {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.login-divider {
  height: 1px;
  background: var(--border);
  margin: 28px 0;
}

/* Google sign-in button */
.google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: rgba(255,255,255,.06);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ts);
  letter-spacing: .01em;
}
.google-btn:hover {
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.google-btn:active { transform: translateY(0); }

[data-theme="light"] .google-btn {
  background: #fff;
  border-color: #dadce0;
  color: #202124;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
[data-theme="light"] .google-btn:hover { background: #f8f9fa; box-shadow: 0 4px 12px rgba(0,0,0,.15); }

.login-note {
  margin: 18px 0 0;
  font-size: 11px;
  color: var(--muted);
}

/* ============================================================
   FIREBASE — USER BADGE (topbar)
   ============================================================ */
.user-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 40px;
  padding: 5px 14px 5px 6px;
  backdrop-filter: blur(12px);
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brand);
  flex-shrink: 0;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.user-email {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-role {
  font-size: 10px;
  color: var(--success);
  font-weight: 600;
  letter-spacing: .04em;
}

.sign-out-btn {
  padding: 4px 10px !important;
  font-size: 11px !important;
  border-radius: 20px !important;
}

/* ============================================================
   FIREBASE — SYNC STATUS BADGE
   ============================================================ */
.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--panel);
  white-space: nowrap;
  transition: var(--ts);
}

.sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
  transition: background .3s;
}

.sync-live .sync-dot     { background: var(--success); box-shadow: 0 0 6px var(--success); animation: pulseDot 2s infinite; }
.sync-connecting .sync-dot { background: var(--warning); }
.sync-saving .sync-dot   { background: var(--brand); animation: pulseDot 1s infinite; }
.sync-error .sync-dot    { background: var(--danger); }
.sync-offline .sync-dot  { background: var(--muted); }

@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

/* ============================================================
   FIREBASE — LOADING DOTS
   ============================================================ */
.loading-dots {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.loading-dots span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  animation: dotBounce 1.2s infinite ease-in-out;
}
.loading-dots span:nth-child(2) { animation-delay: .2s; }
.loading-dots span:nth-child(3) { animation-delay: .4s; }

@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(.6); opacity: .4; }
  40%           { transform: scale(1);  opacity: 1; }
}

/* sync-by attribution in table */
.sync-by { color: var(--brand); }

/* ============================================================
   RESPONSIVE — user badge on small screens
   ============================================================ */
@media (max-width: 700px) {
  .user-email { display: none; }
  .user-role  { display: none; }
  .sync-badge { display: none; }
}

/* ============================================================
   DEADLINE BANNER & BIRTHDAY WIDGET & WHATSAPP
   ============================================================ */
.deadline-banner {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--bg-alt);
  color: var(--text-2);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}
.deadline-banner.amber {
  background: rgba(217, 119, 6, 0.1);
  color: #b45309;
  border-color: rgba(217, 119, 6, 0.2);
}
.deadline-banner.red {
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.2);
}

[data-theme="dark"] .deadline-banner.amber { color: #f59e0b; }
[data-theme="dark"] .deadline-banner.red { color: #f87171; }

.birthday-section h3 {
  color: #d946ef; /* Bright fuchsia for birthday */
}
.birthday-section li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bday-date {
  font-size: 11px;
  color: var(--text-3);
}

/* Row coloring based on urgency */
tr.row-amber { background-color: rgba(217, 119, 6, 0.03) !important; }
tr.row-red   { background-color: rgba(220, 38, 38, 0.04) !important; }
[data-theme="dark"] tr.row-amber { background-color: rgba(217, 119, 6, 0.08) !important; }
[data-theme="dark"] tr.row-red   { background-color: rgba(220, 38, 38, 0.08) !important; }

/* Row action layout tweak to avoid squishing */
.row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* WhatsApp Button */
.wa-btn {
  background: #25D366 !important;
  color: white !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wa-btn.icon-only {
  padding: 6px 8px !important;
}
.wa-btn:hover { 
  background: #128C7E !important; 
  transform: scale(1.05); 
}

/* Adjust Client Column Width */
th:nth-child(2), td:nth-child(2) {
  max-width: 200px;
}
.client-name {
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.2;
}
.client-sub {
  white-space: normal;
  word-wrap: break-word;
}

/* ============================================================
   MOBILE RESPONSIVENESS (PHONES & TABLETS)
   ============================================================ */
@media (max-width: 1024px) {
  /* Stack the main workspace so Sidebar goes below the Table */
  .workspace {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  /* Stack the topbar elements */
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px 12px;
  }
  .top-actions {
    justify-content: flex-start;
  }
  
  /* Adjust app shell padding */
  .shell {
    padding: 16px 20px 24px;
  }

  /* Stack toolbar */
  .toolbar {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  /* Adjust table wrapping so it's swipeable */
  .table-wrap {
    max-height: 55vh;
  }
  
  /* Form inputs stacking */
  .form-grid.two, .form-grid.three {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  /* Metrics grid stacking for small phones */
  .summary-grid {
    grid-template-columns: 1fr 1fr;
  }
}