/* =========================================================
   ★★★ THIS IS APP.CSS — THE NEW FILE ★★★
   KKP LAW FIRM — Shared stylesheet v2
   ========================================================= */

:root {
  /* Color tokens — matched to reference screenshot */
  --color-primary: #1B86C6;      /* Top bar blue / primary links & buttons */
  --color-primary-dark: #123A52; /* Deep navy for headings/emphasis text */
  --sidebar-bg: #16232E;         /* Dark navy sidebar */
  --sidebar-text: #AEBAC4;       /* Sidebar label color (inactive) */
  --sidebar-active: #27C28B;     /* Green active-item accent stripe */
  --color-bg: #F4F6F8;           /* App background, light grey */
  --color-bg-alt: #ECEEF1;       /* Secondary section background */
  --color-accent: #27C28B;       /* Green — success/positive */
  --color-accent-soft: #EAF8F0;  /* Mint highlight boxes (Balance/Trust panels) */
  --color-highlight: #EAF3FA;    /* Light blue — hover/subtle highlight */
  --color-surface: #FFFFFF;      /* White — cards, panels */
  --color-border: #E1E4E8;
  --color-text: #26313A;
  --color-text-muted: #6B7683;
  --color-danger: #C0392B;
  --budget-fill: #A8CF45;        /* Progress bar green */

  /* Typography */
  --font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-size-base: 14px;

  /* Layout */
  --radius: 5px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06);
  --sidebar-width: 210px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  background: var(--color-bg);
  color: var(--color-text);
}

a { color: var(--color-primary); text-decoration: none; }

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--radius);
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn-primary:hover { background: var(--color-primary-dark); }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.input-field {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-base);
  font-size: 14px;
  margin-bottom: 16px;
}

.input-field:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-highlight);
}

.alert-error {
  background: #FBEAEA;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 14px;
}

/* Login page layout */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
}

.login-box {
  width: 100%;
  max-width: 380px;
}

.login-box h1 {
  font-size: 22px;
  margin-bottom: 4px;
  color: var(--color-primary-dark);
}

.login-box p.subtitle {
  color: var(--color-text-muted);
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 14px;
}

/* =========================================================
   App shell: dark sidebar + blue top bar (v2 layout)
   ========================================================= */

.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 0;
}
.app-sidebar .brand { display:flex; align-items:center; gap:10px; padding: 10px 18px 20px; color:#fff; font-weight:700; font-size:15px; }
.app-sidebar .brand .dot { width:26px; height:26px; border-radius:50%; background: var(--sidebar-active); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.app-sidebar nav { flex:1; }
.app-sidebar a.nav-item {
  display:flex; align-items:center; gap:12px; padding: 10px 18px;
  color: var(--sidebar-text); font-size: 13.5px; font-weight: 500;
  border-left: 3px solid transparent;
}
.app-sidebar a.nav-item svg { width:16px; height:16px; flex-shrink:0; opacity:0.85; }
.app-sidebar a.nav-item:hover { color: #fff; background: rgba(255,255,255,0.04); }
.app-sidebar a.nav-item.active { color: #fff; border-left-color: var(--sidebar-active); background: rgba(255,255,255,0.05); }
.app-sidebar .sidebar-footer { padding: 14px 18px; display:flex; align-items:center; gap:10px; color: var(--sidebar-text); font-size:13px; border-top: 1px solid rgba(255,255,255,0.08); margin-top:10px; }
.app-sidebar .sidebar-footer .avatar { width:26px; height:26px; border-radius:50%; background:#3A4B59; color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }

.app-main { flex:1; min-width:0; display:flex; flex-direction:column; }

.app-topbar {
  background: var(--color-primary);
  padding: 10px 20px;
  display:flex; align-items:center; gap:14px;
}
.app-topbar form { flex:1; max-width: 420px; display:flex; }
.app-topbar input[type=text] {
  flex:1; padding: 8px 14px; border:none; border-radius: 4px 0 0 4px;
  font-family: var(--font-base); font-size: 13px;
}
.app-topbar .search-btn { background:#fff; border:none; border-radius:0 4px 4px 0; padding:0 14px; color: var(--color-primary); cursor:pointer; }
.app-topbar .topbar-spacer { flex:1; }
.app-topbar .topbar-link { color: rgba(255,255,255,0.92); font-size:13px; font-weight:600; }

.app-content { padding: 24px 28px 60px; flex:1; }

/* Panels (replace old .card in shell pages when a tighter, squarer look is wanted) */
.panel-v2 { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 20px 22px; }
.panel-v2 h3 { margin:0 0 16px; font-size:15px; font-weight:700; color: var(--color-text); display:flex; justify-content:space-between; align-items:center; }

/* Mint highlight boxes, e.g. Balance Outstanding / Trust Funds */
.mint-box { background: var(--color-accent-soft); border-radius: var(--radius); padding:16px 20px; }
.mint-box .mint-label { font-size:12px; font-weight:700; color:#3A5F4F; margin-bottom:6px; }
.mint-box .mint-amount { font-size:22px; font-weight:700; color: var(--color-primary-dark); }
.mint-box .mint-amount a { color: inherit; text-decoration: underline; }

/* Budget-style progress bar */
.budget-track { background: var(--color-bg-alt); border-radius:6px; height:10px; overflow:hidden; }
.budget-fill { background: var(--budget-fill); height:100%; }

/* Details key/value grid */
.kv-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.kv-grid .kv-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color: var(--color-text-muted); margin-bottom:3px; }
.kv-grid .kv-value { font-size:14px; color: var(--color-text); }

/* Contact panel */
.contact-avatar { width:42px; height:42px; border-radius:50%; background:#D6368F; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex-shrink:0; }
.contact-row { display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; }
.contact-row .name { font-weight:700; color: var(--color-primary); font-size:14.5px; }
.contact-row .role { font-size:12px; color: var(--color-text-muted); }
.contact-field { font-size:13px; margin-bottom:8px; }
.contact-field .cf-label { font-size:11px; color: var(--color-text-muted); text-transform:uppercase; letter-spacing:.03em; }

/* Timeline */
.timeline-item { padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size:13px; }
.timeline-item:last-child { border-bottom:none; }
.timeline-item .t-time { font-size:11px; color: var(--color-text-muted); margin-top:2px; }
.timeline-date-header { font-size:11px; font-weight:700; text-transform:uppercase; color: var(--color-text-muted); background: var(--color-bg-alt); padding:6px 10px; margin: 10px -10px 4px; }

/* Tabs, v2 styling to match reference (flat underline, blue active) */
.tabs-v2 { display:flex; gap:22px; border-bottom: 1px solid var(--color-border); margin-bottom: 22px; }
.tabs-v2 a { padding: 10px 0; font-size: 13.5px; font-weight: 600; color: var(--color-text-muted); border-bottom: 2px solid transparent; }
.tabs-v2 a.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* Topbar action button (Create New, etc.) */
.topbar-btn {
  background: var(--sidebar-active); color:#fff; font-weight:700; font-size:13px;
  padding: 9px 16px; border-radius: 6px; display:inline-flex; align-items:center; gap:6px;
}
.topbar-btn:hover { filter: brightness(0.95); }

/* Dashboard v3: Today's Agenda + Firm Metrics */
.agenda-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 30px; }
.agenda-panel .agenda-count { font-size: 26px; font-weight: 800; color: var(--color-primary-dark); display:inline-block; margin-right:8px; }
.agenda-panel .agenda-title { font-size: 13px; font-weight:700; color: var(--color-text); }
.agenda-panel .agenda-sub { font-size:11px; color: var(--color-text-muted); }
.agenda-item { display:flex; align-items:center; gap:10px; padding: 9px 0; border-bottom: 1px solid var(--color-border); font-size:13.5px; }
.agenda-item:last-child { border-bottom:none; }
.agenda-item .chk { width:16px; height:16px; border-radius:50%; border:2px solid var(--color-border); flex-shrink:0; }
.agenda-item .chk.done { background: var(--color-accent); border-color: var(--color-accent); }
.agenda-item .a-time { color: var(--color-primary); font-weight:700; font-size:12.5px; width:60px; flex-shrink:0; }
.overdue-note { color: var(--color-danger); font-size:12.5px; font-weight:600; margin-top:8px; }

.firm-metrics-title { font-size:15px; font-weight:700; color: var(--color-text); margin: 6px 0 16px; }
.metrics-layout { display:grid; grid-template-columns: 280px 1fr; gap: 20px; }
.donut-panel { display:flex; flex-direction:column; align-items:center; text-align:center; }
.donut-panel .donut-num { font-size: 26px; font-weight:800; color: var(--color-primary); }
.donut-panel .donut-sub { font-size:12px; color: var(--color-text-muted); }
.metric-tiles { display:grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 14px; }
.metric-tile { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius); padding: 16px 18px; }
.metric-tile .mt-label { font-size:12.5px; font-weight:600; color: var(--color-text); margin-bottom:8px; }
.metric-tile .mt-num { font-size:19px; font-weight:700; color: var(--color-primary); }
.metric-tile.danger .mt-num { color: var(--color-danger); }

/* Mobile-responsive sidebar: collapses to icon-only under 860px */
@media (max-width: 860px) {
  :root { --sidebar-width: 60px; }
  .app-sidebar .brand img { display: none; }
  .app-sidebar .brand::after { content: "K"; color: var(--sidebar-active); font-weight: 800; font-size: 18px; }
  .app-sidebar a.nav-item span { display: none; }
  .app-sidebar a.nav-item { justify-content: center; padding: 12px 0; }
  .app-sidebar .sidebar-footer > div { display: none; }
  .app-sidebar .sidebar-footer { justify-content: center; }
  .app-topbar { flex-wrap: wrap; gap: 8px; }
  .app-topbar form { max-width: none; flex: 1 1 100%; order: 2; }
  .app-content { padding: 16px; }
}

/* Phone-width sidebar: horizontal icon bar instead of a narrow vertical strip */
@media (max-width: 480px) {
  .app-shell { flex-direction: column; }
  .app-sidebar { width: 100%; height: auto; flex-direction: row; overflow-x: auto; padding: 6px 4px; white-space: nowrap; }
  .app-sidebar .brand { display: none; }
  .app-sidebar nav { display: flex; flex: none; }
  .app-sidebar a.nav-item { flex-direction: column; padding: 8px 10px; border-left: none; border-bottom: 3px solid transparent; gap: 2px; font-size: 10px; }
  .app-sidebar a.nav-item.active { border-left: none; border-bottom-color: var(--sidebar-active); }
  .app-sidebar .sidebar-footer { flex: none; border-top: none; margin: 0; padding: 8px 10px; }
}

/* Language switcher (top-right of the top bar) */
.lang-switch { display:flex; gap:2px; background: rgba(255,255,255,0.15); border-radius: 999px; padding: 3px; }
.lang-switch a { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.85); }
.lang-switch a.active { background: #fff; color: var(--color-primary); }

/* Free Help Assistant widget (no API, local knowledge base) */
.help-bubble {
  position: fixed; bottom: 24px; right: 24px; z-index: 100;
  width: 52px; height: 52px; border-radius: 50%; background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px; border: none; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.help-bubble:hover { background: var(--color-primary-dark); }
.help-panel {
  position: fixed; bottom: 88px; right: 24px; z-index: 100;
  width: 340px; max-height: 460px; background: #fff; border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.22); display: none; flex-direction: column; overflow: hidden;
}
.help-panel.open { display: flex; }
.help-panel-head { background: var(--color-primary); color: #fff; padding: 14px 16px; font-weight: 700; font-size: 14px; display:flex; justify-content:space-between; align-items:center; }
.help-panel-head button { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; }
.help-panel-body { flex: 1; overflow-y: auto; padding: 14px 16px; font-size: 13px; }
.help-msg { margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; line-height: 1.5; }
.help-msg.bot { background: var(--color-bg); color: var(--color-text); }
.help-msg.user { background: var(--color-highlight); color: var(--color-primary-dark); margin-left: 30px; }
.help-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.help-suggestions button { font-size: 11.5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--color-border); background: #fff; cursor: pointer; color: var(--color-text-muted); }
.help-suggestions button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.help-categories { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.help-categories button { font-size: 11.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--color-primary); background: var(--color-highlight); cursor: pointer; color: var(--color-primary); font-weight: 600; }
.help-categories button:hover { background: var(--color-primary); color: #fff; }
.help-panel-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--color-border); }
.help-panel-input input { flex: 1; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; font-family: var(--font-base); font-size: 13px; }
.help-panel-input button { background: var(--color-primary); color: #fff; border: none; border-radius: 8px; padding: 0 14px; cursor: pointer; font-weight: 700; }