/* ============================================================
   Just Calls Admin — shared design system
   One stylesheet, imported by every page rendered in the
   dashboard's content iframe, so the whole product feels like
   a single, deliberately designed app instead of 40 one-offs.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* base surface, matched to the dashboard shell so pages sit
     inside the iframe with zero visual seam */
  --bg:        #0b0f1a;
  --surface:   #121826;
  --surface-2: #182036;
  --surface-3: #1f2a45;
  --border:    rgba(255,255,255,0.08);
  --border-soft: rgba(255,255,255,0.05);

  --text:      #eef1f8;
  --text-dim:  #97a2b8;
  --text-faint:#5c6784;

  /* accent: violet -> cyan, distinct from any other JustCalls surface */
  --accent:       #7c5cff;
  --accent-2:     #22d3ee;
  --accent-soft:  rgba(124,92,255,0.14);
  --accent-grad:  linear-gradient(135deg, var(--accent), var(--accent-2));

  --success: #22c55e;
  --success-soft: rgba(34,197,94,0.14);
  --warning: #f59e0b;
  --warning-soft: rgba(245,158,11,0.14);
  --danger:  #f0475a;
  --danger-soft: rgba(240,71,90,0.14);
  --info:    #3b9eff;
  --info-soft: rgba(59,158,255,0.14);

  --radius-lg: 16px;
  --radius-md: 11px;
  --radius-sm: 8px;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.24);
  --shadow-2: 0 8px 24px -8px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 0 1px rgba(124,92,255,0.35), 0 8px 28px -6px rgba(124,92,255,0.35);

  --font-head: 'Sora', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height:1.5;
  -webkit-font-smoothing: antialiased;
}
::selection{ background: var(--accent-soft); color:#fff; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.12); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.2); }

a{ color: var(--accent-2); text-decoration:none; }
h1,h2,h3,h4{ font-family: var(--font-head); color:#fff; margin:0; letter-spacing:-0.01em; }

/* ---------------- layout shell ---------------- */
.page{
  padding: 22px 26px 40px;
  max-width: 1320px;
  margin: 0 auto;
  animation: fadeUp .35s var(--ease);
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.page-header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin-bottom:22px; flex-wrap:wrap;
}
.page-header .heading{ display:flex; flex-direction:column; gap:4px; }
.page-title{ font-size:22px; font-weight:700; display:flex; align-items:center; gap:10px; }
.page-title .icon-badge{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background: var(--accent-soft); color: var(--accent-2); font-size:16px; flex-shrink:0;
}
.page-subtitle{ color: var(--text-dim); font-size:13px; }
.header-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------------- buttons ---------------- */
.btn{
  appearance:none; border:1px solid var(--border); background: var(--surface-2); color: var(--text);
  padding:9px 16px; border-radius: var(--radius-sm); font: 600 13px/1 var(--font-body);
  cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition: all .15s var(--ease);
  white-space:nowrap;
}
.btn:hover{ background: var(--surface-3); border-color: rgba(255,255,255,0.16); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.btn-primary{ background: var(--accent-grad); border-color: transparent; color:#fff; box-shadow: var(--shadow-1); }
.btn-primary:hover{ filter: brightness(1.08); box-shadow: var(--shadow-glow); }
.btn-danger{ background: var(--danger-soft); border-color: rgba(240,71,90,0.35); color:#ffb3bc; }
.btn-danger:hover{ background: rgba(240,71,90,0.25); }
.btn-ghost{ background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover{ background: var(--surface-2); color:#fff; }
.btn-sm{ padding:6px 11px; font-size:12px; border-radius:7px; }
.btn-icon{ width:34px; height:34px; padding:0; justify-content:center; border-radius:9px; }

/* ---------------- cards / surfaces ---------------- */
.card{
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-lg); padding:20px; box-shadow: var(--shadow-1);
}
.card + .card{ margin-top:18px; }
.card-title{ font-family: var(--font-head); font-weight:700; font-size:15px; color:#fff; margin-bottom:14px; display:flex; align-items:center; gap:8px; }

.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:20px; }
.kpi-card{
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius: var(--radius-lg); padding:16px 18px;
  position:relative; overflow:hidden;
}
.kpi-card::after{ content:''; position:absolute; inset:0 0 auto 0; height:2px; background: var(--accent-grad); opacity:.8; }
.kpi-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color: var(--text-faint); font-weight:600; }
.kpi-value{ font-family: var(--font-head); font-size:26px; font-weight:800; color:#fff; margin-top:6px; }
.kpi-icon{ position:absolute; right:14px; top:14px; font-size:18px; color: var(--accent-2); opacity:.55; }

/* ---------------- forms ---------------- */
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12px; font-weight:600; color: var(--text-dim); }
.field label .req{ color: var(--danger); }
.input, select.input, textarea.input{
  width:100%; background: var(--surface-2); border:1px solid var(--border); color: var(--text);
  padding:10px 12px; border-radius: var(--radius-sm); font: 500 13.5px var(--font-body);
  outline:none; transition: border-color .15s, box-shadow .15s;
}
textarea.input{ resize:vertical; min-height:70px; font-family: var(--font-body); }
.input::placeholder{ color: var(--text-faint); }
.input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input:disabled{ opacity:.55; }
select.input{ appearance:none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%2397a2b8' stroke-width='1.6' fill='none' fill-rule='evenodd'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; padding-right:30px; }
.field-hint{ font-size:11.5px; color: var(--text-faint); }

/* autocomplete suggestion dropdown */
.autocomplete{ position:relative; }
.suggestions{
  position:absolute; z-index:40; top:calc(100% + 4px); left:0; right:0;
  background: var(--surface-3); border:1px solid var(--border); border-radius: var(--radius-sm);
  max-height:220px; overflow:auto; box-shadow: var(--shadow-2); display:none;
}
.suggestions.show{ display:block; }
.suggestions div{ padding:9px 12px; cursor:pointer; font-size:13px; border-bottom:1px solid var(--border-soft); }
.suggestions div:last-child{ border-bottom:none; }
.suggestions div:hover{ background: var(--accent-soft); }

/* ---------------- tables ---------------- */
.table-wrap{ overflow:auto; border:1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
table.data-table{ width:100%; border-collapse:collapse; min-width:600px; }
.data-table thead th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color: var(--text-faint);
  font-weight:700; padding:12px 16px; background: var(--surface-2); border-bottom:1px solid var(--border);
  position:sticky; top:0;
}
.data-table tbody td{ padding:12px 16px; border-bottom:1px solid var(--border-soft); font-size:13.5px; color: var(--text); }
.data-table tbody tr:last-child td{ border-bottom:none; }
.data-table tbody tr{ transition: background .12s; }
.data-table tbody tr:hover{ background: rgba(255,255,255,0.025); }
.cell-dim{ color: var(--text-dim); }
.cell-strong{ color:#fff; font-weight:600; }
.row-actions{ display:flex; gap:6px; }

/* ---------------- badges / pills ---------------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:99px;
  font-size:11.5px; font-weight:700; letter-spacing:.02em;
}
.badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-success{ background: var(--success-soft); color: var(--success); }
.badge-warning{ background: var(--warning-soft); color: var(--warning); }
.badge-danger{ background: var(--danger-soft); color: var(--danger); }
.badge-info{ background: var(--info-soft); color: var(--info); }
.badge-neutral{ background: var(--surface-3); color: var(--text-dim); }

/* ---------------- toolbar / search ---------------- */
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.search-box{ position:relative; flex:1; min-width:220px; max-width:340px; }
.search-box i{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color: var(--text-faint); font-size:13px; }
.search-box .input{ padding-left:34px; }

/* ---------------- tabs ---------------- */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:18px; }
.tab{ padding:10px 4px; margin-right:20px; color: var(--text-dim); font-weight:600; font-size:13px; cursor:pointer; border-bottom:2px solid transparent; }
.tab.active{ color:#fff; border-color: var(--accent); }

/* ---------------- empty / loading states ---------------- */
.empty-state{ text-align:center; padding:48px 20px; color: var(--text-dim); }
.empty-state i{ font-size:30px; color: var(--text-faint); margin-bottom:10px; display:block; }
.empty-state .title{ color:#fff; font-weight:600; margin-bottom:4px; }
.skeleton{ background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size:400% 100%; animation: shimmer 1.4s ease infinite; border-radius:8px; }
@keyframes shimmer{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }
.spin{ animation: spin 0.8s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---------------- modal ---------------- */
.modal-backdrop{
  position:fixed; inset:0; background: rgba(5,7,14,0.6); backdrop-filter: blur(2px);
  display:none; align-items:center; justify-content:center; z-index:200; padding:20px;
}
.modal-backdrop.show{ display:flex; }
.modal{
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-lg);
  width:100%; max-width:520px; max-height:88vh; overflow:auto; box-shadow: var(--shadow-2);
  animation: modalIn .18s var(--ease);
}
.modal.modal-lg{ max-width:760px; }
@keyframes modalIn{ from{ opacity:0; transform: scale(.97) translateY(6px);} to{opacity:1; transform:none;} }
.modal-head{ display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border); }
.modal-head h3{ font-size:15px; }
.modal-body{ padding:20px; }
.modal-foot{ padding:14px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }
.modal-close{ background:none; border:none; color: var(--text-dim); font-size:18px; cursor:pointer; }

/* ---------------- toasts ---------------- */
#toast-stack{ position:fixed; top:16px; right:16px; z-index:400; display:flex; flex-direction:column; gap:8px; }
.toast{
  min-width:240px; max-width:340px; background: var(--surface-3); border:1px solid var(--border);
  border-left:3px solid var(--accent); border-radius:10px; padding:11px 14px; box-shadow: var(--shadow-2);
  font-size:13px; color:#fff; display:flex; gap:9px; align-items:flex-start; animation: toastIn .22s var(--ease);
}
.toast.success{ border-left-color: var(--success); }
.toast.error{ border-left-color: var(--danger); }
.toast.warning{ border-left-color: var(--warning); }
.toast i{ margin-top:1px; }
@keyframes toastIn{ from{opacity:0; transform:translateX(16px);} to{opacity:1; transform:none;} }

/* ---------------- misc ---------------- */
.divider{ height:1px; background: var(--border); margin:18px 0; border:none; }
.muted{ color: var(--text-dim); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:760px){ .grid-2{ grid-template-columns:1fr; } .form-grid{ grid-template-columns:1fr; } }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ padding:6px 12px; border-radius:99px; border:1px solid var(--border); background: var(--surface-2); font-size:12.5px; cursor:pointer; color: var(--text-dim); }
.chip.active{ background: var(--accent-soft); border-color: rgba(124,92,255,0.4); color:#c9bdff; }
.progress-track{ height:6px; border-radius:99px; background: var(--surface-3); overflow:hidden; }
.progress-fill{ height:100%; background: var(--accent-grad); }