/* ═══════════════════════════════════════════════════════════════════════════
   EGPL Smart Calculator — floating window styles (additive; own namespace)
   Everything is scoped under .egplcalc / #egplcalc-mini so nothing leaks into
   the app. Sits at z-index 10500 — above pages, modals (100), drawers (1500)
   and toasts (9998) so it is usable from inside any workflow.
   ═══════════════════════════════════════════════════════════════════════════ */

.egplcalc {
  position: fixed;
  z-index: 10500;
  display: flex;
  flex-direction: column;
  min-width: 300px;
  min-height: 56px;
  background: var(--surface, #fff);
  color: var(--text, #0f172a);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .22), 0 4px 16px rgba(15, 23, 42, .10);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  overflow: hidden;
  user-select: none;
}

/* ── header ── */
.egplcalc-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px 9px 12px;
  background: var(--bg-subtle, #f1f5f9);
  border-bottom: 1px solid var(--border, #e2e8f0);
  cursor: grab; touch-action: none; flex-shrink: 0;
}
.egplcalc-head:active { cursor: grabbing; }
.egplcalc-grip { color: var(--muted, #64748b); font-size: 11px; letter-spacing: -2px; }
.egplcalc-title { font-weight: 700; font-size: 13px; }
.egplcalc-ctx {
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px;
  background: var(--primary-light, #eef2ff); color: var(--primary, #4f46e5);
}
.egplcalc-headbtns { margin-left: auto; display: flex; gap: 2px; }
.egplcalc-headbtns button {
  width: 24px; height: 24px; border: none; border-radius: 6px; background: transparent;
  color: var(--muted, #64748b); font-size: 12px; line-height: 1; cursor: pointer;
}
.egplcalc-headbtns button:hover { background: var(--border, #e2e8f0); color: var(--text, #0f172a); }

/* ── body ── */
.egplcalc-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 12px; gap: 9px; }
.egplcalc.is-collapsed { min-height: 0; height: auto !important; }

/* smart NL bar */
.egplcalc-smart { display: flex; gap: 6px; flex-shrink: 0; }
.egplcalc-smart input {
  flex: 1; min-width: 0; padding: 9px 11px; border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 9px; font: inherit; background: var(--bg-subtle, #f8fafc); color: inherit; user-select: text;
}
.egplcalc-smart input:focus { outline: none; border-color: var(--primary, #4f46e5); background: var(--surface, #fff); }
.egplcalc-smart button {
  width: 40px; border: none; border-radius: 9px; background: var(--primary, #4f46e5); color: #fff;
  font-size: 16px; font-weight: 700; cursor: pointer; flex-shrink: 0;
}
.egplcalc-smart button:hover { background: var(--primary-h, #4338ca); }

/* result card */
.egplcalc-result {
  border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 10px 12px;
  background: var(--bg-subtle, #f8fafc); flex-shrink: 0;
}
.egplcalc-result-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.egplcalc-result-title { font-size: 11.5px; color: var(--muted, #64748b); font-weight: 600; overflow-wrap: anywhere; }
.egplcalc-result-big { font-size: 22px; font-weight: 700; margin: 2px 0 6px; user-select: text; }
.egplcalc-result-acts { display: flex; gap: 4px; }
.egplcalc-result-acts button {
  width: 26px; height: 26px; border: 1px solid var(--border, #e2e8f0); border-radius: 7px;
  background: var(--surface, #fff); color: var(--muted, #64748b); cursor: pointer; font-size: 12px;
}
.egplcalc-result-acts button:hover { color: var(--primary, #4f46e5); border-color: var(--primary, #4f46e5); }
.egplcalc-line { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 12.5px; border-top: 1px dashed var(--border, #e2e8f0); user-select: text; }
.egplcalc-line:first-of-type { border-top: none; }
.egplcalc-line span { color: var(--muted, #64748b); }
.egplcalc-err { color: #b91c1c; font-size: 12.5px; font-weight: 500; }
.egplcalc-note { margin-top: 6px; font-size: 11px; color: var(--muted, #94a3b8); font-style: italic; }
.egplcalc-ai-tag { display: inline-block; padding: 1px 6px; border-radius: 10px; background: #ede9fe; color: #6d28d9; font-size: 9.5px; font-weight: 700; vertical-align: 1px; }

/* GST slab quick buttons */
.egplcalc-slabs { display: flex; align-items: center; gap: 5px; flex-shrink: 0; flex-wrap: wrap; }
.egplcalc-slabs-label { font-size: 10.5px; font-weight: 700; color: var(--muted, #94a3b8); letter-spacing: .04em; }
.egplcalc-slabs button {
  padding: 4px 11px; border: 1px solid var(--border, #e2e8f0); border-radius: 20px;
  background: var(--surface, #fff); color: var(--text, #334155); font-size: 12px; font-weight: 600; cursor: pointer;
}
.egplcalc-slabs button:hover { border-color: var(--primary, #4f46e5); color: var(--primary, #4f46e5); background: var(--primary-light, #eef2ff); }
.egplcalc-slabs-hint { margin-left: auto; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border, #cbd5e1); color: var(--muted, #94a3b8); font-size: 10px; display: flex; align-items: center; justify-content: center; cursor: help; }

/* tabs */
.egplcalc-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border, #e2e8f0); flex-shrink: 0; overflow-x: auto; scrollbar-width: none; }
.egplcalc-tabs::-webkit-scrollbar { display: none; }
.egplcalc-tabs button {
  padding: 7px 10px; border: none; background: transparent; color: var(--muted, #64748b);
  font-size: 12px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap;
}
.egplcalc-tabs button.is-active { color: var(--primary, #4f46e5); border-bottom-color: var(--primary, #4f46e5); }
.egplcalc-tabs button:hover { color: var(--text, #0f172a); }

/* tab panel + forms */
.egplcalc-panel { display: flex; flex-direction: column; gap: 8px; }
.egplcalc-f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; color: var(--muted, #64748b); }
.egplcalc-f input, .egplcalc-f select, #egplcalc-gst-rate-custom {
  padding: 8px 10px; border: 1.5px solid var(--border, #e2e8f0); border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--text, #0f172a);
  background: var(--surface, #fff); width: 100%; user-select: text;
}
.egplcalc-f input:focus, .egplcalc-f select:focus { outline: none; border-color: var(--primary, #4f46e5); }
.egplcalc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.egplcalc-join { display: flex; gap: 6px; }
.egplcalc-go {
  padding: 9px; border: none; border-radius: 9px; background: var(--primary, #4f46e5); color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 2px;
}
.egplcalc-go:hover { background: var(--primary-h, #4338ca); }
.egplcalc-sep { height: 1px; background: var(--border, #e2e8f0); margin: 4px 0; }
.egplcalc-subhead { font-size: 10.5px; font-weight: 700; color: var(--muted, #94a3b8); text-transform: uppercase; letter-spacing: .05em; }

/* standard keypad */
.egplcalc-expr {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--border, #e2e8f0); border-radius: 9px;
  font-size: 18px; font-weight: 600; text-align: right; background: var(--bg-subtle, #f8fafc); color: inherit; user-select: text;
}
.egplcalc-expr:focus { outline: none; border-color: var(--primary, #4f46e5); }
.egplcalc-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.egplcalc-keys button {
  padding: 11px 0; border: 1px solid var(--border, #e2e8f0); border-radius: 9px;
  background: var(--surface, #fff); color: var(--text, #0f172a); font-size: 15px; font-weight: 600; cursor: pointer;
}
.egplcalc-keys button.is-op { background: var(--bg-subtle, #f1f5f9); }
.egplcalc-keys button.is-eq { background: var(--primary, #4f46e5); color: #fff; border-color: var(--primary, #4f46e5); }
.egplcalc-keys button:hover { border-color: var(--primary, #4f46e5); }

/* history */
.egplcalc-hrow { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-bottom: 1px dashed var(--border, #e2e8f0); }
.egplcalc-hq { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.egplcalc-hrow b { font-size: 12.5px; white-space: nowrap; }
.egplcalc-hacts { display: flex; gap: 2px; }
.egplcalc-hacts button { width: 22px; height: 22px; border: none; border-radius: 5px; background: transparent; color: var(--muted, #94a3b8); cursor: pointer; font-size: 11px; }
.egplcalc-hacts button:hover { background: var(--bg-subtle, #f1f5f9); color: var(--primary, #4f46e5); }
.egplcalc-empty { color: var(--muted, #94a3b8); font-size: 12px; padding: 12px 0; text-align: center; }
.egplcalc-hfoot { display: flex; gap: 8px; margin-top: 8px; }
.egplcalc-hfoot button {
  flex: 1; padding: 7px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
  background: var(--surface, #fff); color: var(--muted, #64748b); font-size: 12px; font-weight: 600; cursor: pointer;
}
.egplcalc-hfoot button:hover { color: var(--primary, #4f46e5); border-color: var(--primary, #4f46e5); }

/* resize handle */
.egplcalc-resize {
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, var(--border, #cbd5e1) 50%);
  border-bottom-right-radius: 14px;
}

/* ── mini mode pill ── */
.egplcalc-mini {
  position: fixed; right: 24px; bottom: 24px; z-index: 10500;
  display: flex; align-items: center; gap: 7px;
  padding: 8px 10px; border-radius: 30px;
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
  box-shadow: 0 12px 40px rgba(15, 23, 42, .20);
  font-family: 'Inter', system-ui, sans-serif; font-size: 13px;
  max-width: min(420px, calc(100vw - 32px));
}
.egplcalc-mini-icon { font-size: 15px; }
.egplcalc-mini input {
  border: none; outline: none; background: transparent; font: inherit; width: 170px; min-width: 0; color: var(--text, #0f172a);
}
.egplcalc-mini-out { font-weight: 700; white-space: nowrap; color: var(--primary, #4f46e5); user-select: text; }
.egplcalc-mini-out.is-err { color: #b91c1c; }
.egplcalc-mini button { border: none; background: transparent; color: var(--muted, #94a3b8); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.egplcalc-mini button:hover { color: var(--text, #0f172a); }

/* ── dark theme (calculator-scoped; the app itself stays light) ── */
.egplcalc.egplcalc-dark, .egplcalc-mini.egplcalc-dark {
  --surface: #1e293b; --bg-subtle: #0f172a; --border: #334155;
  --text: #e2e8f0; --muted: #94a3b8;
  --primary: #818cf8; --primary-h: #6366f1; --primary-light: rgba(129, 140, 248, .14);
  background: #1e293b; color: #e2e8f0; border-color: #334155;
}
.egplcalc.egplcalc-dark .egplcalc-err, .egplcalc-mini.egplcalc-dark .is-err { color: #fca5a5; }
.egplcalc.egplcalc-dark .egplcalc-ai-tag { background: rgba(129, 140, 248, .18); color: #c4b5fd; }
.egplcalc.egplcalc-dark .egplcalc-smart button,
.egplcalc.egplcalc-dark .egplcalc-go,
.egplcalc.egplcalc-dark .egplcalc-keys button.is-eq { color: #0f172a; }

/* ── mobile ── */
@media (max-width: 640px) {
  .egplcalc {
    left: 8px !important; right: 8px !important; top: auto !important; bottom: 8px !important;
    width: auto !important; height: min(78vh, 560px) !important; transform: none !important;
    border-radius: 16px;
  }
  .egplcalc-resize { display: none; }
  .egplcalc-mini { right: 12px; bottom: 76px; } /* clear the bottom-tab bar */
  .egplcalc-mini input { width: 120px; }
}