/* ═══════════════════════════════════════════════════════════════
   NEKOTAB — Mobile-First Responsive Foundation
   ═══════════════════════════════════════════════════════════════
   Import BEFORE page-specific styles.
   Breakpoints (mobile-first):
     base: 0–479px
     sm:   480px+
     md:   768px+
     lg:   1024px+
   ═══════════════════════════════════════════════════════════════ */

/* ── 0. RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, svg, canvas { display: block; max-width: 100%; height: auto; }
table { max-width: 100%; }

/* ── 1. TOKENS ────────────────────────────────────────────── */
:root {
  /* ─ Spacing scale ─ */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  40px;
  --sp-2xl: 64px;

  /* ─ Font sizes (fluid via clamp) ─ */
  --fs-xs:   clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);   /* ~11–12px */
  --fs-sm:   clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);     /* ~12–13px */
  --fs-base: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);   /* ~13–14px */
  --fs-md:   clamp(0.9375rem, 0.88rem + 0.25vw, 1rem);      /* ~15–16px */
  --fs-lg:   clamp(1.125rem, 1rem + 0.5vw, 1.375rem);       /* ~18–22px */
  --fs-xl:   clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);     /* ~22–28px */
  --fs-2xl:  clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);        /* ~28–40px */

  /* ─ Font families ─ */
  --font-sans: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ─ Line heights ─ */
  --lh-tight:  1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* ─ Radii ─ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ─ Brand colors ─ */
  --c-primary:      #6366f1;
  --c-primary-hover: #4f46e5;
  --c-primary-soft: rgba(99,102,241,.09);
  --c-primary-mid:  rgba(99,102,241,.18);
  --c-primary-text: #4f46e5;

  /* ─ Surfaces ─ */
  --c-bg:        #F0F2F8;
  --c-surface:   #FFFFFF;
  --c-surface-2: #F7F8FC;
  --c-surface-3: #EEF0F8;
  --c-border:    #E4E7F2;
  --c-border-2:  #D8DCF0;

  /* ─ Text ─ */
  --c-ink:    #0F1020;
  --c-ink-2:  #2A2D48;
  --c-ink-3:  #5A5E80;
  --c-muted:  #9498BC;
  --c-ghost:  #C8CCE4;

  /* ─ Status ─ */
  --c-green:      #16A36A;
  --c-green-soft: rgba(22,163,106,.09);
  --c-amber:      #C98A00;
  --c-amber-soft: rgba(201,138,0,.09);
  --c-red:        #D63B5A;
  --c-red-soft:   rgba(214,59,90,.09);

  /* ─ Shadows ─ */
  --shadow-xs:  0 1px 2px rgba(15,16,32,.04);
  --shadow-sm:  0 1px 3px rgba(15,16,32,.05), 0 1px 2px rgba(15,16,32,.04);
  --shadow-md:  0 3px 12px rgba(15,16,32,.07), 0 1px 4px rgba(15,16,32,.05);
  --shadow-lg:  0 10px 20px rgba(15,16,32,.08), 0 4px 8px rgba(15,16,32,.05);
  --shadow-primary: 0 4px 18px rgba(99,102,241,.22), 0 1px 4px rgba(99,102,241,.14);

  /* ─ Z-index layers ─ */
  --z-base:    1;
  --z-sticky:  10;
  --z-header:  50;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;

  /* ─ Safe area insets (iOS notch) ─ */
  --sai-top:    env(safe-area-inset-top, 0px);
  --sai-right:  env(safe-area-inset-right, 0px);
  --sai-bottom: env(safe-area-inset-bottom, 0px);
  --sai-left:   env(safe-area-inset-left, 0px);
}

/* ── 2. TYPOGRAPHY ────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* break-word (not anywhere) so long words/URLs wrap WITHOUT collapsing the
     min-content width of table cells — `anywhere` was shrinking data tables to
     one character per column on mobile instead of letting them scroll. */
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Tables must size to their content and scroll, never break mid-word. */
.table, .table th, .table td {
  overflow-wrap: normal;
  word-break: normal;
}

/* ── 3. LAYOUT PRIMITIVES ─────────────────────────────────── */

/* Container: full-width mobile, max-width desktop */
.nk-container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(var(--sp-md), 4vw, var(--sp-xl));
}

/* Stack: vertical spacing */
.nk-stack       { display: flex; flex-direction: column; }
.nk-stack-xs    { gap: var(--sp-xs); }
.nk-stack-sm    { gap: var(--sp-sm); }
.nk-stack-md    { gap: var(--sp-md); }
.nk-stack-lg    { gap: var(--sp-lg); }
.nk-stack-xl    { gap: var(--sp-xl); }

/* Responsive grid: auto-fit */
.nk-grid {
  display: grid;
  gap: var(--sp-md);
  grid-template-columns: 1fr;
}
@media (min-width: 480px) {
  .nk-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .nk-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .nk-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .nk-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

/* Card */
.nk-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: clamp(var(--sp-md), 3vw, var(--sp-lg));
  box-shadow: var(--shadow-sm);
}

/* ── 4. COMPONENT PRIMITIVES ──────────────────────────────── */

/* Button */
.nk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
  white-space: nowrap;
  text-decoration: none;
  min-height: 44px; /* accessibility: tap target */
  line-height: 1.4;
}
.nk-btn:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.nk-btn--primary {
  background: var(--c-primary);
  color: #fff;
  box-shadow: var(--shadow-primary);
}
.nk-btn--primary:hover {
  background: var(--c-primary-hover);
  color: #fff;
  text-decoration: none;
}
.nk-btn--ghost {
  background: var(--c-surface-2);
  color: var(--c-ink-3);
  border: 1px solid var(--c-border);
}
.nk-btn--ghost:hover {
  background: var(--c-surface-3);
  color: var(--c-ink-2);
  text-decoration: none;
}
.nk-btn--block { width: 100%; }

/* Input */
.nk-input {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-base);
  padding: 10px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  min-height: 44px; /* accessibility */
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nk-input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}

/* Badge */
.nk-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nk-badge--primary { background: var(--c-primary-soft); color: var(--c-primary-text); }
.nk-badge--green   { background: var(--c-green-soft);   color: var(--c-green); }
.nk-badge--amber   { background: var(--c-amber-soft);   color: var(--c-amber); }
.nk-badge--red     { background: var(--c-red-soft);     color: var(--c-red); }

/* ── 5. ACCESSIBILITY ─────────────────────────────────────── */

/* Focus-visible global */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Skip link */
.nk-skip-link {
  position: absolute;
  left: -9999px;
  top: var(--sp-sm);
  z-index: var(--z-toast);
  background: var(--c-primary);
  color: #fff;
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.nk-skip-link:focus {
  left: var(--sp-md);
}

/* Tap targets — only on nk-* / pti-* components; avoids breaking Bootstrap */
.nk-btn, .nk-input,
[class^="pti-"] > a,
[class^="pti-"] > button,
[class^="pti-"] > summary {
  min-height: 44px;
}

/* ── 6. RESPONSIVE TABLE WRAPPER ──────────────────────────── */
.nk-table-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-inline: calc(-1 * var(--sp-md));
  padding-inline: var(--sp-md);
}
/* Scroll hint gradient */
.nk-table-scroll::after {
  content: '';
  position: sticky;
  right: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  background: linear-gradient(to left, var(--c-surface), transparent);
  pointer-events: none;
}

/* Card-style table rows on mobile */
.nk-table-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.nk-table-card-row {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-md);
}
.nk-table-card-row dt {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nk-table-card-row dd {
  margin: 0 0 var(--sp-sm) 0;
  font-size: var(--fs-base);
  color: var(--c-ink-2);
}
.nk-table-card-row dd:last-child { margin-bottom: 0; }

/* ── 7. FORM LAYOUT ──────────────────────────────────────── */
.nk-form-grid {
  display: grid;
  gap: var(--sp-md);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .nk-form-grid--2col {
    grid-template-columns: repeat(2, 1fr);
  }
}
.nk-form-group label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink-2);
  margin-bottom: var(--sp-xs);
}
.nk-form-error {
  font-size: var(--fs-xs);
  color: var(--c-red);
  margin-top: var(--sp-xs);
}

/* ── 8. MODAL / DIALOG ───────────────────────────────────── */
/* Mobile: bottom sheet; Desktop: centered */
.nk-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,16,32,.45);
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end; /* bottom sheet by default */
  justify-content: center;
}
.nk-dialog {
  background: var(--c-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  padding: var(--sp-lg);
  padding-bottom: calc(var(--sp-lg) + var(--sai-bottom));
}
@media (min-width: 768px) {
  .nk-dialog-backdrop {
    align-items: center;
  }
  .nk-dialog {
    max-width: 560px;
    border-radius: var(--radius-lg);
    max-height: 80vh;
    padding-bottom: var(--sp-lg);
  }
}

/* ── 9. UTILITY CLASSES ───────────────────────────────────── */
.nk-sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0,0,0,0); overflow: hidden;
}

/* Hide/show at breakpoints (mobile-first) */
.nk-hide-sm  { display: none !important; }
.nk-hide-md  { display: initial; }
.nk-hide-lg  { display: initial; }
@media (min-width: 480px) {
  .nk-show-sm  { display: initial !important; }
  .nk-hide-sm  { display: initial !important; }
}
@media (max-width: 479px) {
  .nk-show-sm { display: none !important; }
}
@media (min-width: 768px) {
  .nk-show-md { display: initial !important; }
}
@media (max-width: 767px) {
  .nk-show-md { display: none !important; }
  .nk-hide-md { display: initial !important; }
}
@media (min-width: 1024px) {
  .nk-show-lg { display: initial !important; }
}
@media (max-width: 1023px) {
  .nk-show-lg { display: none !important; }
  .nk-hide-lg { display: initial !important; }
}

/* Full-width buttons on mobile */
@media (max-width: 479px) {
  .nk-btn--mobile-block {
    width: 100%;
    justify-content: center;
  }
}

/* Text truncation */
.nk-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nk-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 10. PRINT ─────────────────────────────────────────────── */
@media print {
  .nk-no-print { display: none !important; }
}

/* ── 11. BASE NAV MOBILE ──────────────────────────────────── */
/* Back button for base.html inner pages (hidden on desktop) */
.nk-back-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: none; background: transparent;
  cursor: pointer; border-radius: 8px; color: inherit; flex-shrink: 0;
  transition: background 0.2s;
}
.nk-back-btn:hover { background: rgba(0,0,0,0.05); }
.nk-back-btn svg { flex-shrink: 0; }

/* Bootstrap navbar mobile touch-target improvements */
@media (max-width:991px) {
  .navbar-toggler {
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
  }
  .navbar .dropdown-item {
    min-height: 44px; display: flex; align-items: center;
  }
  .navbar .nav-link,
  .navbar .btn.nav-link,
  .navbar .btn-link.nav-link {
    min-height: 44px; display: flex; align-items: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   12. ADMIN LAYOUT — MOBILE (≤ md / 767.98px)
   ───────────────────────────────────────────────────────────────
   Tabbycat's admin pages put an always-on left sidebar that, on
   phones, is squashed into a ~32px `col-1` icon rail with 12px
   icons and no labels. Below we turn it into a proper off-canvas
   DRAWER opened by a hamburger in a slim sticky topbar, and give
   the page content the full viewport width.
   Markup added in base.html: `.nk-admin-topbar` (+ `.nk-hamburger`,
   `.nk-topbar-title`) and `.nk-drawer-backdrop`. Toggle adds the
   `nk-drawer-open` class to <body>.
   ═══════════════════════════════════════════════════════════════ */

.nk-admin-topbar   { display: none; }
.nk-drawer-backdrop { display: none; }

@media (max-width: 767.98px) {

  /* ── Sticky topbar with hamburger ── */
  .nk-admin-topbar {
    display: flex;
    align-items: center;
    gap: 6px;
    position: sticky;
    top: 0;
    z-index: 1020;
    margin: 0 -15px 6px;                       /* span container-fluid padding */
    padding: 6px 8px;
    padding-top: calc(6px + var(--sai-top));
    min-height: 52px;
    background: #333c47;                        /* $sidebar-bg */
    color: #fff;
    box-shadow: var(--shadow-sm);
  }
  .nk-hamburger {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: #fff;
    border-radius: 8px; cursor: pointer;
  }
  .nk-hamburger:active { background: rgba(255,255,255,.14); }
  .nk-hamburger svg { width: 24px; height: 24px; }
  .nk-topbar-title {
    flex: 1 1 auto; min-width: 0;
    font-weight: 600; font-size: 16px; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* ── Hide the desktop sidebar spacer ── */
  .fake-sidebar { display: none !important; }

  /* ── Page content takes the full width ── */
  .main {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  /* ── Sidebar becomes an off-canvas drawer ── */
  .admin-sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 286px !important;
    max-width: 86vw !important;
    margin: 0 !important;
    padding: 0 0 calc(24px + var(--sai-bottom)) !important;
    z-index: 1050;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #333c47;                        /* $sidebar-bg */
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 2px 0 18px rgba(0,0,0,.28);
  }
  body.nk-drawer-open .admin-sidebar { transform: translateX(0); }

  /* layout the inner nav as a normal full-width, left-aligned list */
  .admin-sidebar .list-group,
  .admin-sidebar nav.list-group { width: 100%; }
  .admin-sidebar .text-center { text-align: left !important; }
  .admin-sidebar > .list-group > .list-group-item,
  .admin-sidebar .list-group-item {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }

  /* reveal labels + give comfortable 48px tap targets */
  .admin-sidebar .list-group-item a,
  .admin-sidebar .list-group-item form > button {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    font-size: 15px !important;
    padding: 0.7rem 1rem !important;
    text-align: left;
  }
  .admin-sidebar .list-group-item a .feather,
  .admin-sidebar .list-group-item button .feather {
    width: 18px !important; height: 18px !important;
    flex: 0 0 auto; margin: 0 !important; padding: 0 !important;
  }
  /* un-hide the labels / tournament name / chevrons that are d-none on phones */
  .admin-sidebar .d-none { display: inline-block !important; }
  .admin-sidebar .tournament-title .mx-auto {
    margin-left: 0 !important; margin-right: 4px !important;
  }
  .admin-sidebar .sidebar-expand { margin-left: auto !important; }
  /* expanded sub-menus: full width (override the 150px overlay) + indent */
  .admin-sidebar .list-group .collapse,
  .admin-sidebar .list-group .collapse.show,
  .admin-sidebar .list-group .collapsing {
    width: 100% !important;
    text-align: left !important;
  }
  .admin-sidebar .collapse .list-group-item a,
  .admin-sidebar .collapsing .list-group-item a { padding-left: 1.6rem !important; }
  .admin-sidebar .tournament-areas-title { padding-left: 1rem !important; }

  /* ── Dim backdrop behind the open drawer ── */
  .nk-drawer-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1040;
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
  }
  body.nk-drawer-open .nk-drawer-backdrop { opacity: 1; visibility: visible; }
  body.nk-drawer-open { overflow: hidden; }     /* lock background scroll */

  /* ═══ Shared content tweaks (admin + public) ═══ */

  /* Page title: reclaim the wasted 100px min-height + huge margins */
  #pageTitle .col-md { margin: 0.5rem 0 !important; }
  #pageTitle [style*="min-height"] { min-height: 0 !important; }
  #pageTitle.h2, #pageTitle .h2 { font-size: 1.5rem !important; }
  #pageTitle .emoji { font-size: 1.4rem; }

  /* Sub-nav action rows: stack instead of overflowing off-screen */
  .page-navs .col > .d-lg-flex { display: block; }
  .page-navs .btn-group { display: flex; flex-wrap: wrap; }
  .page-navs .btn-group + .btn-group { margin-top: 0.5rem; }
  .page-navs .btn-group > .btn { flex: 1 1 auto; }

  /* Every responsive table wrapper scrolls horizontally on phones */
  .table-responsive,
  .table-responsive-sm,
  .table-responsive-md,
  .table-responsive-lg,
  .table-responsive-xl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}