/* ─── Blacksword brand font ──────────────────────────────────── */
@font-face {
  font-family: 'Blacksword';
  font-style: normal;
  font-weight: normal;
  src: local('Blacksword Regular'), url('/fonts/Blacksword.woff') format('woff');
  font-display: swap;
}

/* ─── macOS / iOS 2020+ design tokens ────────────────────────── */
:root {
  --c-bg:        #f5f5f7;
  --c-surface:   #ffffff;
  --c-sidebar:   #1c1c1e;
  --c-border:    rgba(0,0,0,.1);
  --c-blue:      #0071e3;
  --c-blue-hov:  #0077ed;
  --c-text:      #1d1d1f;
  --c-muted:     #6e6e73;
  --c-green:     #30d158;
  --c-red:       #ff453a;
  --c-orange:    #ff9f0a;
  --c-yellow:    #ffd60a;
  --c-indigo:    #5e5ce6;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.07), 0 4px 12px rgba(0,0,0,.04);
  --shadow-md:   0 2px 8px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
  --shadow-lg:   0 4px 16px rgba(0,0,0,.1),  0 16px 48px rgba(0,0,0,.08);
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Brand font ─────────────────────────────────────────────── */
.brand-font {
  font-family: 'Blacksword', -apple-system, sans-serif !important;
  font-weight: normal !important;
  letter-spacing: 0.01em;
  line-height: 1;
}
/* Ensure mac-sidebar-brand also inherits Blacksword */
.mac-sidebar-brand,
.mac-sidebar-brand * {
  font-family: 'Blacksword', -apple-system, sans-serif !important;
}

/* ─── DaisyUI primary color override (macOS blue) ────────────── */
[data-theme="light"] {
  --p:  51.02% 0.1765 250.14;
  --pf: 46.00% 0.180  250.00;
  --pc: 100% 0 0;
  --b1: 100% 0 0;
  --b2: 97.78% 0.004 264.54;
  --b3: 93.19% 0.007 264.54;
  --bc: 13.38% 0.025 264.00;
}

/* ─── Global base ────────────────────────────────────────────── */
body { color: var(--c-text); background: var(--c-bg); }
*, *::before, *::after { box-sizing: border-box; }

/* ─── Glass Navbar ───────────────────────────────────────────── */
.mac-navbar {
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.07);
}

/* ─── Dark Sidebar ───────────────────────────────────────────── */
.mac-sidebar { background: var(--c-sidebar); width: 240px; min-width: 240px; }

.mac-sidebar .menu a,
.mac-sidebar .menu summary {
  color: rgba(255,255,255,.72);
  border-radius: var(--radius-sm);
  font-size: .875rem;
  line-height: 1.4;
  transition: background .15s, color .15s;
  padding: .5rem .75rem;
}
.mac-sidebar .menu a:hover,
.mac-sidebar .menu summary:hover {
  background: rgba(255,255,255,.1); color: #fff;
}
.mac-sidebar .menu li > a.active,
.mac-sidebar .menu a.active {
  background: var(--c-blue) !important; color: #fff !important;
}
.mac-sidebar .menu details > summary { cursor: pointer; list-style: none; }
.mac-sidebar .menu details > summary::-webkit-details-marker { display: none; }
.mac-sidebar .menu details[open] > summary { color: rgba(255,255,255,.9); }
.mac-sidebar .menu details > summary::after {
  content: '›';
  float: right;
  font-size: 1rem;
  opacity: .4;
  transition: transform .2s;
}
.mac-sidebar .menu details[open] > summary::after { transform: rotate(90deg); }

.mac-sidebar-brand {
  font-family: 'Blacksword', sans-serif;
  font-size: 1.5rem;
  color: #fff;
  padding: 1.125rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  gap: .5rem;
  user-select: none;
  text-decoration: none;
}
.mac-sidebar-label {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  padding: .875rem 1rem .25rem;
  display: block;
}

/* ─── Cards ──────────────────────────────────────────────────── */
.mac-card {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
}
.mac-card-sm  { border-radius: var(--radius-md); }
.mac-card-xl  { border-radius: var(--radius-xl); }

/* ─── Section header inside page ────────────────────────────── */
.mac-section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: -.015em;
}

/* ─── Inputs ─────────────────────────────────────────────────── */
.mac-input {
  width: 100%;
  padding: .625rem .875rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(0,0,0,.12);
  background: #fff;
  font-size: .9375rem;
  color: var(--c-text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.mac-input:focus {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3.5px rgba(0,113,227,.18);
}
.mac-input::placeholder { color: var(--c-muted); }
.mac-input:disabled, .mac-input[readonly] {
  background: var(--c-bg); color: var(--c-muted); cursor: default;
}
.mac-input-sm { padding: .4rem .7rem; font-size: .875rem; }
.mac-label {
  display: block;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--c-muted);
  margin-bottom: .375rem;
  letter-spacing: .01em;
}

/* ─── Buttons ────────────────────────────────────────────────── */
.mac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .625rem 1.125rem;
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  border: none;
  outline: none;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, box-shadow .15s, transform .1s, opacity .15s;
  font-family: inherit;
}
.mac-btn:active { transform: scale(.97); }
.mac-btn:disabled, .mac-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; pointer-events: none; }
.mac-btn-sm  { padding: .4rem .8rem; font-size: .8125rem; border-radius: 7px; }
.mac-btn-lg  { padding: .8rem 1.5rem; font-size: 1rem; }
.mac-btn-full { width: 100%; }

.mac-btn-primary { background: var(--c-blue); color: #fff; box-shadow: 0 1px 4px rgba(0,113,227,.25); }
.mac-btn-primary:hover { background: var(--c-blue-hov); color: #fff; box-shadow: 0 2px 8px rgba(0,113,227,.35); }
.mac-btn-ghost  { background: rgba(0,0,0,.05); color: var(--c-text); }
.mac-btn-ghost:hover { background: rgba(0,0,0,.09); color: var(--c-text); }
.mac-btn-outline { background: transparent; color: var(--c-blue); border: 1.5px solid var(--c-blue); }
.mac-btn-outline:hover { background: rgba(0,113,227,.06); color: var(--c-blue); }
.mac-btn-danger  { background: var(--c-red); color: #fff; }
.mac-btn-danger:hover { background: #ff3128; color: #fff; }
.mac-btn-success { background: var(--c-green); color: #fff; }
.mac-btn-success:hover { background: #28c147; color: #fff; }
.mac-btn-neutral { background: #1c1c1e; color: #fff; }
.mac-btn-neutral:hover { background: #2c2c2e; color: #fff; }

/* ─── Badges ─────────────────────────────────────────────────── */
.mac-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border-radius: 20px;
  padding: .15rem .55rem;
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.mac-badge-blue   { background: #e1f0ff; color: #0058b8; }
.mac-badge-green  { background: #e3f9e8; color: #1a7f3c; }
.mac-badge-orange { background: #fff3e0; color: #a05800; }
.mac-badge-red    { background: #ffe5e3; color: #c41a14; }
.mac-badge-gray   { background: #f0f0f2; color: var(--c-muted); }
.mac-badge-dark   { background: #2c2c2e; color: var(--c-yellow); }
.mac-badge-indigo { background: #ededff; color: #3b38a8; }

/* ─── Alert / feedback ───────────────────────────────────────── */
.mac-alert {
  padding: .75rem 1rem;
  border-radius: var(--radius-md);
  font-size: .875rem;
  line-height: 1.5;
  border: 1px solid;
  margin-bottom: 1rem;
}
.mac-alert-error   { background: #fff1f0; border-color: #ffccc7; color: #cf1322; }
.mac-alert-success { background: #f6ffed; border-color: #b7eb8f; color: #135200; }
.mac-alert-info    { background: #e6f4ff; border-color: #91caff; color: #0958d9; }
.mac-alert-warn    { background: #fffbe6; border-color: #ffe58f; color: #874d00; }

/* ─── Table ──────────────────────────────────────────────────── */
.mac-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.mac-table th {
  padding: .625rem 1rem;
  font-weight: 600;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-muted);
  border-bottom: 1.5px solid rgba(0,0,0,.08);
  white-space: nowrap;
  text-align: left;
}
.mac-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,.05);
  color: var(--c-text);
  vertical-align: middle;
}
.mac-table tr:last-child td { border-bottom: none; }
.mac-table tr:hover td { background: rgba(0,0,0,.025); }
.mac-table-sm th, .mac-table-sm td { padding: .45rem .75rem; }

/* ─── Pill tabs ──────────────────────────────────────────────── */
.mac-tabs {
  display: flex;
  gap: .25rem;
  background: rgba(0,0,0,.05);
  border-radius: var(--radius-md);
  padding: .25rem;
  width: fit-content;
}
.mac-tab {
  padding: .375rem .875rem;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--c-muted);
  transition: background .15s, color .15s, box-shadow .15s;
  font-family: inherit;
}
.mac-tab.active {
  background: #fff;
  color: var(--c-text);
  box-shadow: var(--shadow-sm);
}

/* ─── Stat card ──────────────────────────────────────────────── */
.mac-stat {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,.06);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.mac-stat-label { font-size: .75rem; font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: .06em; }
.mac-stat-value { font-size: 1.75rem; font-weight: 700; color: var(--c-text); margin-top: .25rem; letter-spacing: -.02em; }

/* ─── Notification dot ───────────────────────────────────────── */
.nav-dot {
  position: absolute;
  top: 3px; right: 1px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-red);
  border: 1.5px solid rgba(255,255,255,.85);
}

/* ─── Preloader ──────────────────────────────────────────────── */
#loading {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-bg);
}
.mac-spinner {
  width: 28px; height: 28px;
  border: 2.5px solid rgba(0,0,0,.12);
  border-top-color: var(--c-blue);
  border-radius: 50%;
  animation: spin .65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.3); }

/* ─── Page header ────────────────────────────────────────────── */
.mac-page-header {
  margin-bottom: 1.5rem;
}
.mac-page-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -.025em;
  margin: 0;
}
.mac-page-header p {
  color: var(--c-muted);
  font-size: .9rem;
  margin-top: .25rem;
}

/* ─── DataTables ─────────────────────────────────────────────── */
.dataTables_wrapper { font-size: .875rem; color: var(--c-text); }
.dataTables_wrapper .dataTables_filter input { border-radius: var(--radius-sm); border: 1.5px solid rgba(0,0,0,.12); padding: .375rem .75rem; outline: none; }
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--c-blue); }
.dataTables_wrapper .dataTables_length select { border-radius: var(--radius-sm); border: 1.5px solid rgba(0,0,0,.12); padding: .25rem .5rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 7px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--c-blue) !important; color: #fff !important; border-color: var(--c-blue) !important; }

/* ─── Select2 ────────────────────────────────────────────────── */
.select2-container--default .select2-selection--single {
  border-radius: var(--radius-sm) !important;
  border: 1.5px solid rgba(0,0,0,.12) !important;
  height: 38px !important;
  background: #fff !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px !important; color: var(--c-text) !important; padding-left: .75rem !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; }

/* ─── daisyUI menu dark override ────────────────────────────── */
.mac-sidebar ul.menu { gap: 2px; }
.mac-sidebar .menu ul { margin-left: .75rem; padding-left: .5rem; border-left: 1px solid rgba(255,255,255,.1); }

/* ─── Mobile sidebar (drawer overlay mode) ──────────────────── */
.drawer-side > .mac-sidebar { width: 280px; min-width: 280px; }

/* ─── Notifications popup ─────────────────────────────────────── */
.notifications-popup { max-height: 400px; overflow-y: auto; }
.toast-container .toast { border-radius: var(--radius-md); box-shadow: var(--shadow-md); }

/* ─── Chat messages ──────────────────────────────────────────── */
#chatMessagesContainer li { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .875rem; }
#chatMessagesContainer li img { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
#chatMessagesContainer li .message-content { flex: 1; background: var(--c-bg); padding: .625rem .875rem; border-radius: var(--radius-md); font-size: .875rem; }
/* Legacy one-line helpers (some bundled scripts still toggle .d-none) */
.d-none { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Metro / gamification accents (flat tiles, XP vibe) ───────── */
.game-surface {
  background: linear-gradient(180deg, #fafafa 0%, #f0f0f3 100%);
}
.metro-tile {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  min-height: 7rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 1.125rem;
  color: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.metro-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.metro-tile .metro-tile-value {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.metro-tile .metro-tile-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .92;
}
.metro-tile .metro-tile-icon {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  width: 3rem;
  height: 3rem;
  opacity: .22;
}
.metro-tile-footer {
  display: block;
  margin: 0 -1.125rem -1rem;
  padding: .5rem 1rem;
  font-size: .75rem;
  font-weight: 600;
  text-align: center;
  background: rgba(0,0,0,.12);
  color: inherit;
  text-decoration: none;
  transition: background .15s;
}
.metro-tile-footer:hover {
  background: rgba(0,0,0,.2);
  color: inherit;
}
.metro-tile--green { background: linear-gradient(135deg, #1a7f3c 0%, #30d158 100%); }
.metro-tile--red   { background: linear-gradient(135deg, #b31220 0%, #ff453a 100%); }
.metro-tile--blue  { background: linear-gradient(135deg, #0058b8 0%, #0071e3 100%); }
.metro-tile--cyan  { background: linear-gradient(135deg, #0a6b7a 0%, #32ade6 100%); }
.metro-tile--slate { background: linear-gradient(135deg, #3a3a3c 0%, #6e6e73 100%); }
.metro-tile--amber { background: linear-gradient(135deg, #a05800 0%, #ff9f0a 100%); }

.xp-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(0,113,227,.12);
  color: #0058b8;
  border: 1px solid rgba(0,113,227,.2);
}