/* ═══════════════════════════════════════════════════════════════
   Bukanako Design System
   "Open your schedule. Open for business."
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ── Brand ─────────────────────────────────────────────────── */
  --bk-primary:         #0A0A0A;
  --bk-accent:          #FACC15;
  --bk-accent-hover:    #EAB308;
  --bk-accent-subtle:   rgba(250, 204, 21, 0.1);

  /* ── Neutrals ──────────────────────────────────────────────── */
  --bk-dark:            #18181B;
  --bk-gray:            #71717A;
  --bk-gray-light:      #A1A1AA;
  --bk-border:          #E4E4E7;
  --bk-surface:         #F4F4F5;
  --bk-bg:              #FAFAFA;
  --bk-white:           #FFFFFF;

  /* ── Semantic ──────────────────────────────────────────────── */
  --bk-success:         #22C55E;
  --bk-success-bg:      rgba(34, 197, 94, 0.1);
  --bk-warning:         #F59E0B;
  --bk-warning-bg:      rgba(245, 158, 11, 0.1);
  --bk-danger:          #EF4444;
  --bk-danger-bg:       rgba(239, 68, 68, 0.1);
  --bk-info:            #3B82F6;
  --bk-info-bg:         rgba(59, 130, 246, 0.1);

  /* ── Typography ────────────────────────────────────────────── */
  --font-heading:       'Outfit', -apple-system, sans-serif;
  --font-body:          'Instrument Sans', -apple-system, sans-serif;
  --font-mono:          'Geist Mono', 'SF Mono', ui-monospace, monospace;

  /* ── Radii ─────────────────────────────────────────────────── */
  --radius-sm:          4px;
  --radius-md:          6px;
  --radius-lg:          8px;
  --radius-xl:          10px;
  --radius-2xl:         16px;

  /* ── Shadows ───────────────────────────────────────────────── */
  --shadow-xs:          0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:          0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg:          0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ── Base ─────────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background: var(--bk-bg);
  color: var(--bk-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--bk-dark);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* ── Links ────────────────────────────────────────────────────── */
a { color: var(--bk-dark); text-decoration: none; }
a:hover { color: var(--bk-primary); }

/* ── Cards ────────────────────────────────────────────────────── */
.bk-card {
  background: var(--bk-white);
  border: 1px solid var(--bk-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.bk-card:hover {
  border-color: var(--bk-gray-light);
  box-shadow: var(--shadow-sm);
}
.bk-card-header {
  background: var(--bk-surface);
  color: var(--bk-dark);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bk-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.bk-card-body { padding: 1rem; }

/* ── Stat Cards ───────────────────────────────────────────────── */
.bk-stat {
  background: var(--bk-white);
  border: 1px solid var(--bk-border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  text-align: center;
}
.bk-stat-value {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bk-dark);
  letter-spacing: -0.03em;
}
.bk-stat-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--bk-gray);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.35rem;
}
.bk-stat-change { font-size: 0.75rem; font-weight: 600; margin-top: 0.25rem; }
.bk-stat-change.up { color: var(--bk-success); }
.bk-stat-change.down { color: var(--bk-danger); }

/* ── Buttons ──────────────────────────────────────────────────── */
.bk-btn {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
  transition: all 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  text-decoration: none;
}
.bk-btn-accent { background: var(--bk-accent); color: var(--bk-primary); }
.bk-btn-accent:hover { background: var(--bk-accent-hover); color: var(--bk-primary); }
.bk-btn-dark { background: var(--bk-dark); color: var(--bk-white); }
.bk-btn-dark:hover { background: var(--bk-primary); color: var(--bk-white); }
.bk-btn-outline {
  background: transparent; border: 1px solid var(--bk-border); color: var(--bk-dark);
}
.bk-btn-outline:hover { background: var(--bk-surface); }
.bk-btn-sm { padding: 0.3rem 0.65rem; font-size: 0.75rem; }
.bk-btn-danger { background: var(--bk-danger-bg); color: #DC2626; }
.bk-btn-danger:hover { background: rgba(239,68,68,0.15); color: #DC2626; }
.bk-btn-success { background: var(--bk-success-bg); color: #16A34A; }
.bk-btn-success:hover { background: rgba(34,197,94,0.15); color: #16A34A; }

/* ── Status Badges ────────────────────────────────────────────── */
.bk-badge {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
  letter-spacing: 0.01em;
}
.bk-badge-requested  { background: var(--bk-warning-bg); color: #D97706; }
.bk-badge-confirmed  { background: var(--bk-success-bg); color: #16A34A; }
.bk-badge-completed  { background: var(--bk-dark); color: var(--bk-white); }
.bk-badge-cancelled  { background: rgba(113,113,122,0.1); color: var(--bk-gray); }
.bk-badge-noshow     { background: var(--bk-danger-bg); color: #DC2626; }
.bk-badge-declined   { background: var(--bk-danger-bg); color: #DC2626; }
.bk-badge-waiting    { background: var(--bk-info-bg); color: #2563EB; }
.bk-badge-called     { background: var(--bk-accent-subtle); color: #A16207; }
.bk-badge-serving    { background: var(--bk-dark); color: var(--bk-white); }

/* ── Queue Numbers ────────────────────────────────────────────── */
.bk-queue-number {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--bk-dark);
  background: var(--bk-surface);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
}

/* ── Tables ───────────────────────────────────────────────────── */
.bk-table { width: 100%; border-collapse: collapse; }
.bk-table thead th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bk-gray);
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--bk-border);
  background: var(--bk-surface);
}
.bk-table tbody td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--bk-border);
  vertical-align: middle;
  font-size: 0.875rem;
}
.bk-table tbody tr:last-child td { border-bottom: none; }
.bk-table tbody tr:hover { background: var(--bk-bg); }

/* ── Now Serving ──────────────────────────────────────────────── */
.bk-now-serving {
  background: var(--bk-primary);
  color: var(--bk-white);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bk-now-serving .bk-queue-number {
  background: rgba(250,204,21,0.15);
  color: var(--bk-accent);
  font-size: 1.25rem;
}
.bk-now-serving-empty {
  background: var(--bk-white);
  border: 1px solid var(--bk-border);
  color: var(--bk-gray);
  border-radius: var(--radius-xl);
  padding: 1rem 1.5rem;
  text-align: center;
}

/* ── Chat Bubbles (Inbox) ─────────────────────────────────────── */
.bk-msg-inbound {
  background: var(--bk-surface);
  color: var(--bk-dark);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 2px;
  padding: 0.65rem 0.85rem;
  max-width: 75%;
  font-size: 0.875rem;
}
.bk-msg-outbound {
  background: var(--bk-dark);
  color: var(--bk-white);
  border-radius: var(--radius-lg) var(--radius-lg) 2px var(--radius-lg);
  padding: 0.65rem 0.85rem;
  max-width: 75%;
  font-size: 0.875rem;
}
.bk-msg-meta {
  font-size: 0.6875rem;
  color: var(--bk-gray-light);
  margin-bottom: 0.2rem;
}

/* ── Heatmap ──────────────────────────────────────────────────── */
.bk-heatmap td {
  width: 3rem; height: 2rem; text-align: center;
  font-size: 0.6875rem; font-family: var(--font-mono); border-radius: 3px;
}
.bk-heat-quiet  { background: var(--bk-success-bg); color: #16A34A; }
.bk-heat-busy   { background: var(--bk-warning-bg); color: #D97706; }
.bk-heat-peak   { background: var(--bk-danger-bg); color: #DC2626; }
.bk-heat-empty  { background: var(--bk-surface); color: var(--bk-gray-light); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .bk-stat-value { font-size: 1.25rem; }
}

/* EasyAdmin overrides are in assets/styles/easyadmin.css (loaded via configureAssets) */