/* ===========================================================
   Hostraj SMS Gateway — Brand Identity System
   Loaded after style.css. Defines the palette, wordmark and
   brand accents used across the dashboard and login screen.
   =========================================================== */

:root {
  /* Brand palette */
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-800: #3730a3;
  --brand-grad: linear-gradient(135deg, #6366f1 0%, #7c3aed 55%, #8b5cf6 100%);
  --brand-grad-soft: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);

  --accent-teal:   #06b6d4;
  --accent-emerald:#10b981;
  --accent-amber:  #f59e0b;
  --accent-rose:   #ef4444;

  /* Neutrals (slate) */
  --ink-900:#0f172a;
  --ink-800:#1e293b;
  --ink-700:#334155;
  --ink-600:#475569;
  --ink-500:#64748b;
  --ink-400:#94a3b8;
  --line:#e2e8f0;
  --line-soft:#f1f5f9;
  --surface:#ffffff;
  --bg:#f1f5f9;

  /* Shape & depth */
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
  --shadow-sm:0 1px 3px rgba(15,23,42,0.06);
  --shadow:0 4px 14px rgba(15,23,42,0.06);
  --shadow-lg:0 18px 50px rgba(15,23,42,0.14);
}

/* ── Wordmark ── */
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand .brand-logo {
  width: 34px; height: 34px; border-radius: 10px; display: block;
  box-shadow: 0 4px 12px rgba(99,102,241,0.35);
}
.brand .brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand .brand-name {
  font-family: 'Outfit','Inter',system-ui,sans-serif;
  font-weight: 800; font-size: 18px; letter-spacing: -0.3px;
}
.brand .brand-name .b1 { color: var(--brand-500); }
.brand .brand-name .b2 { color: var(--ink-900); }
.brand .brand-sub {
  font-size: 9px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--ink-400); margin-top: 3px;
}
/* On the dark sidebar */
.sidebar .brand .brand-name .b2 { color: #f1f5f9; }
.sidebar .brand .brand-sub { color: var(--brand-300); }

/* ── Brand accents on the sidebar ── */
.sidebar-header {
  background: linear-gradient(180deg, rgba(124,58,237,0.18), transparent);
}
.sidebar-item.active {
  background: linear-gradient(90deg, rgba(99,102,241,0.20), rgba(124,58,237,0.05));
  border-left-color: var(--brand-500);
  color: #fff;
}
.sidebar-item.active i { color: var(--brand-400); }
.sidebar-footer { border-top: 1px solid rgba(124,58,237,0.18); }
.sidebar-footer .user-credits { color: var(--accent-amber); }

/* ── Brand gradient helpers ── */
.brand-gradient-text {
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.brand-bar { height: 4px; background: var(--brand-grad); border-radius: 4px; }

/* ── Buttons tinted with brand ── */
button.primary, button[type="submit"], .btn { background: var(--brand-500); color: #fff; }
button.primary:hover, button[type="submit"]:hover, .btn:hover { background: var(--brand-600); }
button.secondary { background: var(--line); color: var(--ink-600); }
button.secondary:hover { background: #cbd5e1; color: var(--ink-900); }
button.danger { background: var(--accent-rose); }
button.danger:hover { background: #dc2626; }

/* ── Cost summary cards (SemySMS) ── */
.cost-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 12px; }
.cost-card {
    border-radius: 10px; padding: 14px; text-align: center;
    background: var(--surface); border: 1px solid var(--line);
}
.cost-card.green  { background: #f0fdf4; border-color: #bbf7d0; }
.cost-card.amber  { background: #fffbeb; border-color: #fde68a; }
.cost-card.purple { background: #f5f3ff; border-color: #ddd6fe; }
.cost-card .cost-lbl {
    font-size: 11px; color: var(--ink-500);
    margin-bottom: 4px; font-weight: 600; letter-spacing: .5px;
}
.cost-card .cost-val {
    font-size: 22px; font-weight: 800; line-height: 1.1;
}
.cost-card.green  .cost-val { color: #16a34a; }
.cost-card.amber  .cost-val { color: #d97706; }
.cost-card.purple .cost-val { color: #7c3aed; }
.cost-card .cost-val small { font-size: 13px; font-weight: 600; }
.cost-card .cost-sub {
    font-size: 11px; color: var(--ink-500); margin-top: 4px;
}

/* ── Compact KPI header strip ── */
.kpi-strip { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.kpi {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 18px;
  flex: 1; min-width: 180px; box-shadow: var(--shadow-sm);
}
.kpi-ico {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.kpi-ico.blue { background: var(--brand-50); color: var(--brand-500); }
.kpi-ico.green { background: #d1fae5; color: #10b981; }
.kpi-ico.red { background: #fce7f3; color: #ef4444; }
.kpi-val { font-size: 22px; font-weight: 800; color: var(--ink-900); line-height: 1.1; letter-spacing: -0.5px; }
.kpi-lbl { font-size: 11px; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; }
.kpi-delta { font-size: 10.5px; font-weight: 600; margin-top: 2px; }
.kpi-delta.up { color: #10b981; }
.kpi-delta.down { color: #ef4444; }
.kpi-delta.neutral { color: var(--ink-500); background: var(--line); padding: 1px 8px; border-radius: 4px; display: inline-block; }

/* ── Login screen (self-contained) ── */
.login-wrapper {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(124,58,237,0.35), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(99,102,241,0.30), transparent 55%),
    linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
.login-box {
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: var(--shadow-lg);
}
.login-brand { text-align: center; margin-bottom: 26px; }
.login-brand img { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 10px 30px rgba(99,102,241,0.45); }
.login-brand h2 {
  font-family: 'Outfit','Inter',system-ui,sans-serif;
  font-size: 24px; font-weight: 800; color: var(--ink-900); margin-top: 16px;
}
.login-brand h2 .b1 { color: var(--brand-500); }
.login-brand p { font-size: 13px; color: var(--ink-500); margin-top: 6px; }
.login-box button[type="submit"] { background: var(--brand-grad); }
.login-box button[type="submit"]:hover { filter: brightness(1.06); }