/* ------------------------------------------------------------------
   Shared Tailwind-esque utility layer for admin-style pages
   (Player Management, Leadership Console, and any future one).
   Colours are sourced from the shared /theme.css tokens — link this
   file alongside theme.css. Class NAMES here may be referenced
   directly by page JS templates (e.g. innerHTML strings) — keep them
   stable; only recolour/adjust values.
------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

/* Layout */
.flex { display: flex; }
.grid { display: grid; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-grow { flex-grow: 1; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.self-end { align-self: flex-end; }
.hidden { display: none !important; }
.overflow-hidden { overflow: hidden; }
.block { display: block; }

.h-full { height: 100%; }
.w-full { width: 100%; }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }

/* Grid columns */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }

/* Gaps */
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }

/* Spacing */
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-4 { margin-bottom: 1rem; }
.mt-2 { margin-top: 0.5rem; }
.ml-1 { margin-left: 0.25rem; }

/* Typography */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.font-bold { font-weight: 700; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.tracking-widest { letter-spacing: 0.1em; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.resize-none { resize: none; }
.outline-none { outline: none; }

/* Text colours — mapped to shared theme tokens */
.text-white   { color: var(--text); }
.text-gray-300{ color: var(--text-muted); }
.text-gray-400{ color: var(--text-muted); }
.text-gray-500{ color: var(--text-muted); }
.text-gray-600{ color: var(--text-muted); opacity: 0.75; }
.text-red-500 { color: var(--status-hosp); }
.text-red-600 { color: var(--status-hosp); }
.text-blue-400{ color: var(--abroad); }
.text-yellow-400{ color: var(--idle); }
.text-purple-400{ color: #b98cf0; }
.text-black   { color: #000000; }
.text-primary { color: var(--primary); }

/* Backgrounds — mapped to shared theme tokens */
.bg-black    { background-color: var(--surface-2); }
.bg-gray-700 { background-color: var(--surface-3); }
.bg-blue-700 { background-color: var(--primary); }
.bg-green-700{ background-color: var(--primary); }
.bg-yellow-600{ background-color: var(--idle); }
.bg-red-900  { background-color: #5c231d; }

/* Borders */
.border      { border: 1px solid var(--border); }
.border-b    { border-bottom: 1px solid transparent; }
.rounded     { border-radius: var(--radius-sm); }
.border-gray-600{ border-color: var(--border); }
.border-gray-700{ border-color: var(--border); }
.border-gray-800{ border-color: var(--border); }
.border-yellow-500{ border-color: var(--idle); }
.border-collapse{ border-collapse: collapse; }

.cursor-pointer { cursor: pointer; }
.transition { transition: background-color 0.15s ease, color 0.15s ease; }

/* Hover / focus variants */
.hover\:text-white:hover { color: var(--text); }
.hover\:bg-blue-600:hover { background-color: #e8850f; }
.hover\:bg-green-600:hover { background-color: #e8850f; }
.focus\:border-red-600:focus { border-color: var(--primary-dim); }
.focus\:border-blue-600:focus { border-color: var(--primary-dim); }

/* ------------------------------------------------------------------
   Shared layout components
------------------------------------------------------------------ */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}

/* Toolbar row (mirrors the pattern used on War/Faction Monitor —
   not part of the shared theme.css, so defined locally here). */
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.sort-group { display: flex; align-items: center; gap: 4px; }
.action-group { display: flex; gap: 6px; align-items: center; }

/* Scrollable table wrapper with a sticky header */
.table-container { max-height: 70vh; overflow-y: auto; }
.table-container thead th {
    position: sticky;
    top: 0;
    background: var(--surface-2);
    z-index: 10;
}

/* Row interaction */
.pm-row { transition: background-color 0.15s ease; }
.pm-row:hover { background-color: var(--surface-2); }
.pm-row-selected { background-color: var(--surface-3); }

/* Checkbox accent to match the site's orange primary */
input[type="checkbox"] { accent-color: var(--primary); }

/* Small status/role pill badges */
.badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 999px;
}
.badge-primary { background: rgba(247, 148, 29, 0.15); color: var(--primary); border: 1px solid rgba(247,148,29,0.3); }
.badge-online   { background: rgba(46, 204, 113, 0.15); color: var(--online); border: 1px solid rgba(46,204,113,0.3); }
.badge-muted    { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.badge-danger   { background: rgba(231, 76, 60, 0.15); color: var(--status-hosp); border: 1px solid rgba(231,76,60,0.3); }
.badge-warning  { background: rgba(241, 196, 15, 0.15); color: var(--idle); border: 1px solid rgba(241,196,15,0.3); }

/* ------------------------------------------------------------------
   Mobile: collapse fixed grid column counts to a single column so
   panels stack instead of squashing. Generic/safe for any admin page.
------------------------------------------------------------------ */
@media (max-width: 700px) {
    .grid-cols-2, .grid-cols-3, .grid-cols-12 { grid-template-columns: 1fr; }
    .col-span-1, .col-span-2, .col-span-3, .col-span-4, .col-span-5 { grid-column: auto; }
}