/* ==========================================================================
   Billiard Club — Mist / Emerald Design System
   Tokens: "Custom Style" preset (mist base, emerald primary, Inter, 0.625rem radius)
   Faqat dizayn qatlami: PHP/JS mantiqi va klass nomlari o'zgarmagan.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap");

:root {
    /* --- Preset tokens --- */
    --background: oklch(0.2335 0.0276 215.989);
    --foreground: oklch(0.9456 0.0017 247.84);
    --card: oklch(0.3065 0.0256 212.239);
    --card-foreground: oklch(0.9456 0.0017 247.84);
    --popover: oklch(0.271 0.0264 216.308);
    --popover-foreground: oklch(0.9456 0.0017 247.84);
    --primary: oklch(0.596 0.145 163.225);
    --primary-foreground: oklch(0.262 0.051 172.552);
    --secondary: oklch(0.3931 0.0214 214.645);
    --secondary-foreground: oklch(0.9456 0.0017 247.84);
    --muted: oklch(0.271 0.0264 216.308);
    --muted-foreground: oklch(0.8065 0.0068 208.778);
    --accent: oklch(0.408 0.0213 214.62);
    --accent-foreground: oklch(0.9456 0.0017 247.84);
    --border: oklch(0.3774 0.0227 213.697);
    --input: oklch(0.3774 0.0227 213.697);
    --ring: oklch(0.765 0.177 163.223);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-soft: oklch(0.704 0.191 22.216);
    --chart-1: oklch(0.845 0.143 164.978);
    --chart-2: oklch(0.765 0.177 163.223);
    --chart-3: oklch(0.696 0.17 162.48);
    --chart-4: oklch(0.596 0.145 163.225);
    --chart-5: oklch(0.508 0.118 165.612);
    --sidebar: oklch(0.3065 0.0256 212.239);
    --sidebar-accent: oklch(0.3931 0.0214 214.645);
    --sidebar-border: oklch(0.3774 0.0227 213.697);

    /* Holat ranglari uchun qo'shimcha (preset ohangida) */
    --warning: oklch(0.82 0.15 80);
    --info: oklch(0.8 0.09 215);

    /* Radius scale (base 0.625rem) */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-2xl: 18px;
    --radius-3xl: 22px;
    --radius-4xl: 26px;

    --font-sans: "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.25);
    --shadow-lg: 0 16px 40px -12px oklch(0 0 0 / 0.55);

    /* Eski o'zgaruvchilar — sahifalardagi inline style'lar uchun yangi qiymatlarga yo'naltirilgan */
    --bg-main: var(--background);
    --bg-secondary: var(--muted);
    --bg-card: var(--card);
    --bg-card-hover: var(--accent);
    --border-card: var(--border);
    --border-card-hover: var(--secondary);
    --text-primary: var(--foreground);
    --text-secondary: var(--muted-foreground);
    --text-muted: oklch(0.68 0.012 210);
    --neon-green: var(--chart-2);
    --neon-red: var(--destructive-soft);
    --neon-blue: var(--info);
    --neon-amber: var(--warning);
    --card-radius: var(--radius-2xl);
    --btn-radius: var(--radius-4xl);
}

/* ==========================================================================
   1. Asos
   ========================================================================== */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    background-color: var(--background) !important;
    color: var(--foreground) !important;
    font-family: var(--font-sans) !important;
    font-size: 0.875rem;
    line-height: 1.5rem;
    font-feature-settings: "cv11", "ss01";
}

body, .main, .content { background-color: var(--background) !important; }

@media (min-width: 1200px) {
    .main > .container { max-width: 1520px; padding-left: 1.5rem; padding-right: 1.5rem; }
    .navbar-vertical.navbar-expand-xl { width: 15rem !important; max-width: 15rem !important; padding-right: 1.25rem; }
    .navbar-vertical.navbar-expand-xl + .content { margin-left: 15rem !important; }
    .navbar-vertical.navbar-expand-xl .navbar-collapse { width: 100% !important; }
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    color: var(--foreground) !important;
    letter-spacing: -0.01em;
}
h3, .h3 { font-size: 1.5rem; line-height: 1.25; }
h4, .h4 { font-size: 1.25rem; line-height: 1.25; }
h5, .h5 { font-size: 1rem; line-height: 1.5rem; }
h6, .h6 { font-size: 0.875rem; line-height: 1.25rem; }

a { color: var(--chart-2); }
a:hover { color: var(--chart-1); text-decoration: none; }

small, .small { color: var(--muted-foreground); }
.fs--1 { font-size: 0.8125rem !important; }

code {
    font-family: var(--font-mono);
    font-size: 0.8em;
    color: var(--chart-1) !important;
    background: oklch(0.596 0.145 163.225 / 0.12);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

hr, .border-300 { border-color: var(--border) !important; }

::selection { background: var(--primary); color: var(--primary-foreground); }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--secondary) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 10px; border: 3px solid var(--background); }
::-webkit-scrollbar-track { background: transparent; }

/* Rang utilitalari */
.text-primary { color: var(--chart-2) !important; }
.text-success { color: var(--chart-2) !important; }
.text-danger { color: var(--destructive-soft) !important; }
.text-warning { color: var(--warning) !important; }
.text-info { color: var(--info) !important; }
.text-secondary, .text-muted { color: var(--muted-foreground) !important; }
.text-900, .text-800, .text-700, .text-white { color: var(--foreground) !important; }
.text-600, .text-500, .text-400 { color: var(--muted-foreground) !important; }
.text-100, .text-200, .text-300 { color: var(--foreground) !important; }

.bg-light, .bg-100, .bg-200, .bg-300, .bg-white {
    background-color: transparent !important;
    color: var(--foreground) !important;
}
.border, .border-200, .border-bottom { border-color: var(--border) !important; }

/* ==========================================================================
   2. Navigatsiya (yon panel + yuqori panel)
   ========================================================================== */
.navbar-glass {
    background-color: oklch(0.2335 0.0276 215.989 / 0.82) !important;
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
    border: 0 !important;
}

.navbar-top {
    /* sticky-kit inline "fixed" qiladi va kontent ostida qoladi — sticky'ga qaytariladi */
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    width: auto !important;
    z-index: 1030;
    border-bottom: 1px solid var(--border) !important;
    min-height: 4rem;
    margin-bottom: 1.5rem;
    box-shadow: none !important;
}

.navbar-brand, .navbar-brand span { color: var(--foreground) !important; }
.navbar-brand .fa-gamepad, .navbar-brand svg {
    color: var(--primary-foreground) !important;
    background: var(--primary);
    width: 2rem !important;
    height: 2rem !important;
    padding: 0.4rem;
    border-radius: var(--radius-lg);
    font-size: 1rem !important;
    margin-right: 0.625rem !important;
    box-sizing: border-box;
}
.navbar-brand .text-sans-serif {
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em;
    font-size: 1.0625rem !important;
}

.navbar-toggler {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-4xl) !important;
    width: 2.5rem; height: 2.5rem;
    padding: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
}
.navbar-toggler:focus { outline: none; box-shadow: 0 0 0 3px oklch(0.765 0.177 163.223 / 0.3); }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9edf1' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M4 7h16M4 12h16M4 17h10'/%3e%3c/svg%3e") !important;
    width: 1.25rem !important; height: 1.25rem !important;
}

/* Vertikal panel */
.navbar-vertical, .navbar-vertical.navbar-glass {
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
.navbar-vertical > .navbar-brand { padding-left: 0.25rem; }
.navbar-vertical .navbar-collapse {
    background: var(--sidebar) !important;
    border: 1px solid var(--sidebar-border) !important;
    border-radius: var(--radius-2xl);
    padding: 0.5rem !important;
    box-shadow: var(--shadow-lg);
}
@media (min-width: 1200px) {
    .navbar-vertical .navbar-collapse { box-shadow: none; margin-top: 0.25rem; }
}
@media (max-width: 1199.98px) {
    .navbar-vertical .navbar-collapse { margin: 0.5rem 0 1rem; }
    .main > .container > .content { margin-top: 0 !important; }
    .navbar-vertical.navbar-expand-xl { z-index: 1040; }
}

.navbar-vertical .navbar-nav .nav-item { margin: 1px 0; }
.navbar-vertical .navbar-nav .nav-link {
    color: var(--muted-foreground) !important;
    font-weight: 500 !important;
    font-size: 0.875rem;
    border-radius: var(--radius-4xl);
    margin: 0 !important;
    padding: 0.5rem 0.875rem !important;
    transition: background-color .15s, color .15s;
}
.navbar-vertical .navbar-nav .nav-link:hover,
.navbar-vertical .navbar-nav .nav-link.active {
    color: var(--foreground) !important;
    background: var(--sidebar-accent) !important;
}
.navbar-vertical .navbar-nav .nav-link .nav-link-icon {
    color: var(--muted-foreground) !important;
    width: 1.25rem;
    margin-right: 0.625rem;
    font-size: 0.875rem;
    display: inline-flex; justify-content: center;
}
.navbar-vertical .navbar-nav .nav-link .nav-link-icon .text-warning { color: inherit !important; }
.navbar-vertical .navbar-nav .nav-link:hover .nav-link-icon,
.navbar-vertical .navbar-nav .nav-link.active .nav-link-icon { color: var(--chart-2) !important; }

.navbar-vertical hr { margin: 0.5rem 0.25rem !important; }

/* Chiqish tugmasi */
.navbar-vertical .btn-outline-danger {
    display: flex; align-items: center; justify-content: center;
    margin: 0.25rem !important;
    width: calc(100% - 0.5rem);
}

/* Qidiruv */
.navbar .search-box { position: relative; }
.navbar .search-box .search-input {
    background: oklch(0.271 0.0264 216.308 / 0.6) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-4xl) !important;
    height: 2.5rem;
    padding-left: 2.5rem !important;
    min-width: 20rem;
    color: var(--foreground) !important;
}
.navbar .search-box .search-box-icon { color: var(--muted-foreground) !important; position: absolute; left: 0.95rem !important; top: 50% !important; transform: translateY(-50%) !important; width: 0.875rem; pointer-events: none; }

.avatar img {
    border: 2px solid var(--border);
    background: var(--muted);
}

/* ==========================================================================
   3. Kartalar va sahifa sarlavhalari
   ========================================================================== */
.card {
    background-color: var(--card) !important;
    border: 1px solid var(--border) !important;
    color: var(--card-foreground) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden;
}
.card .card { box-shadow: none !important; background-color: oklch(0.271 0.0264 216.308 / 0.55) !important; }

.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--foreground) !important;
    padding: 1rem 1.25rem !important;
}
.card-header h5, .card-header h6, .card-header .h5, .card-header .h6 {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: var(--foreground) !important;
}
.card-header svg, .card-header .fas { color: var(--muted-foreground); }
.card-header .text-primary, .card-header svg.text-primary { color: var(--chart-2) !important; }

.card-body { padding: 1.25rem !important; }
.card-body.p-0 { padding: 0 !important; }
.card-body.bg-light { background: transparent !important; }

/* Sahifa boshidagi "hero" karta (bg-holder bilan) */
.bg-holder.bg-card {
    background-image: radial-gradient(120% 140% at 100% 0%, oklch(0.596 0.145 163.225 / 0.22) 0%, transparent 55%) !important;
    background-size: auto !important;
    opacity: 1 !important;
}
.card:has(> .bg-holder) {
    background: var(--card) !important;
}
.card:has(> .bg-holder) h3 {
    font-size: 1.75rem !important;
    line-height: 1.15;
    letter-spacing: -0.025em;
}
.card:has(> .bg-holder) h3::before {
    content: "Billiard Club";
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--muted-foreground);
    margin-bottom: 0.75rem;
}
.card:has(> .bg-holder) p, .card:has(> .bg-holder) small, .panel-body small {
    color: var(--muted-foreground) !important;
    font-size: 0.875rem;
    line-height: 1.5rem;
}

/* Eski Bootstrap 3 qoldiqlari: panel / well / label */
.panel { background: transparent; border: 0; }
.panel-heading { color: var(--foreground); font-weight: 600; margin-bottom: .5rem; }
.panel-body { padding: 0; }
.well, .well-sm {
    background: var(--muted) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-xl) !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 1rem;
    box-shadow: none !important;
}
.well font[color="red"], font[color="red"] { color: var(--destructive-soft) !important; }
.well font[color="green"], font[color="green"] { color: var(--chart-2) !important; }
font[color="blue"] { color: var(--chart-2) !important; font-weight: 600; }

.label {
    display: inline-flex; align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-4xl);
    font-size: 0.75rem; font-weight: 500;
    border: 1px solid transparent;
}
.label-primary, .label-success { background: oklch(0.596 0.145 163.225 / 0.16); color: var(--chart-1); border-color: oklch(0.596 0.145 163.225 / 0.35); }
.label-danger { background: oklch(0.577 0.245 27.325 / 0.16); color: var(--destructive-soft); border-color: oklch(0.577 0.245 27.325 / 0.35); }

/* ==========================================================================
   4. Tugmalar
   ========================================================================== */
.btn {
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    border-radius: var(--radius-4xl) !important;
    border: 1px solid transparent;
    height: 2.5rem;
    padding: 0 0.875rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    white-space: nowrap;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: background-color .15s, border-color .15s, color .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn.focus { outline: none; box-shadow: 0 0 0 3px oklch(0.765 0.177 163.223 / 0.3) !important; }
.btn-block { display: flex !important; width: 100%; }
.btn-sm, .btn-group-sm > .btn { height: 2rem; padding: 0 0.75rem !important; font-size: 0.8125rem !important; }
.btn-lg { height: 3rem; padding: 0 1.25rem !important; font-size: 1rem !important; }
.btn .mr-1, .btn .mr-2 { margin-right: 0 !important; }

/* default (primary) */
.btn-primary, .btn-success, .btn-neon-start {
    background: var(--primary) !important;
    color: var(--primary-foreground) !important;
    border-color: transparent !important;
}
.btn-primary:hover, .btn-success:hover, .btn-neon-start:hover {
    background: oklch(0.596 0.145 163.225 / 0.8) !important;
    color: var(--primary-foreground) !important;
    transform: none;
}

/* Band stolni yakunlash — asosiy amal, shuning uchun to'liq rang */
.btn-neon-stop {
    background: var(--destructive) !important;
    color: oklch(0.985 0.002 197) !important;
    border-color: transparent !important;
}
.btn-neon-stop:hover { background: oklch(0.577 0.245 27.325 / 0.85) !important; color: oklch(0.985 0.002 197) !important; transform: none; }

/* destructive */
.btn-danger {
    background: oklch(0.577 0.245 27.325 / 0.2) !important;
    color: var(--destructive-soft) !important;
    border-color: transparent !important;
}
.btn-danger:hover {
    background: oklch(0.577 0.245 27.325 / 0.3) !important;
    color: var(--destructive-soft) !important;
    transform: none;
}

/* secondary */
.btn-secondary, .btn-default, .btn-info, .btn-gaming-secondary, .btn-light {
    background: var(--secondary) !important;
    color: var(--secondary-foreground) !important;
    border-color: transparent !important;
}
.btn-secondary:hover, .btn-default:hover, .btn-info:hover, .btn-gaming-secondary:hover, .btn-light:hover {
    background: oklch(0.3931 0.0214 214.645 / 0.6) !important;
    color: var(--secondary-foreground) !important;
}
.btn-gaming-secondary.active, .btn-group > .btn-gaming-secondary.active {
    background: var(--accent) !important;
    color: var(--foreground) !important;
}

/* outline */
.btn-outline-primary, .btn-outline-success, .btn-outline-secondary,
.btn-outline-info, .btn-outline-warning {
    background: transparent !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}
.btn-outline-primary:hover, .btn-outline-success:hover, .btn-outline-secondary:hover,
.btn-outline-info:hover, .btn-outline-warning:hover {
    background: oklch(0.271 0.0264 216.308 / 0.5) !important;
    color: var(--foreground) !important;
}
.btn-outline-success svg, .btn-outline-success .fas { color: var(--chart-2); }
.btn-outline-warning svg, .btn-outline-warning .fas { color: var(--warning); }
.btn-outline-info svg, .btn-outline-info .fas { color: var(--info); }

.btn-outline-danger {
    background: oklch(0.577 0.245 27.325 / 0.12) !important;
    color: var(--destructive-soft) !important;
    border-color: transparent !important;
}
.btn-outline-danger:hover { background: oklch(0.577 0.245 27.325 / 0.22) !important; color: var(--destructive-soft) !important; }

.btn-link { color: var(--chart-2) !important; background: transparent !important; }

/* Segmentli guruh (Kartalar / Jadval) */
.btn-group { gap: 0; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-4xl); padding: 3px; }
.btn-group > .btn { border-radius: var(--radius-4xl) !important; margin: 0 !important; }
.btn-group > .btn-gaming-secondary { background: transparent !important; color: var(--muted-foreground) !important; }
.btn-group > .btn-gaming-secondary:hover { color: var(--foreground) !important; background: oklch(0.408 0.0213 214.62 / 0.5) !important; }
.btn-group > .btn-gaming-secondary.active { background: var(--accent) !important; color: var(--foreground) !important; }
.table-actions .btn-group { background: transparent; border: 0; padding: 0; gap: 0.375rem; }
.table-actions .btn-group > .btn-gaming-secondary { background: var(--secondary) !important; color: var(--secondary-foreground) !important; }

/* ==========================================================================
   5. Formalar
   ========================================================================== */
label, .control-label {
    color: var(--foreground) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    margin-bottom: 0.375rem !important;
    padding-left: 0 !important;
    max-width: none !important;
    flex: none !important;
    width: auto !important;
}
label, .control-label { letter-spacing: 0 !important; }
.form-group { margin-bottom: 1rem; }
.content > .card > .card-body form:not([style]) { max-width: 40rem; }

.form-control, .custom-select, select.form-control, input[type="search"].form-control {
    background-color: oklch(0.271 0.0264 216.308 / 0.6) !important;
    border: 1px solid var(--border) !important;
    color: var(--foreground) !important;
    border-radius: var(--radius-3xl) !important;
    height: 2.5rem;
    padding: 0.25rem 0.875rem !important;
    font-family: var(--font-sans) !important;
    font-size: 0.875rem !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.form-control::placeholder { color: var(--muted-foreground) !important; opacity: .75; }
.form-control:focus {
    border-color: var(--ring) !important;
    box-shadow: 0 0 0 3px oklch(0.765 0.177 163.223 / 0.3) !important;
    background-color: oklch(0.271 0.0264 216.308 / 0.8) !important;
}
.form-control-sm { height: 2rem; padding: 0 0.75rem !important; font-size: 0.8125rem !important; }
.form-control-lg { height: 3rem; font-size: 1rem !important; }
textarea.form-control { height: auto; min-height: 4rem; border-radius: var(--radius-2xl) !important; padding: 0.75rem !important; }

select.form-control:not([multiple]) {
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3cbcf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1rem !important;
    padding-right: 2.25rem !important;
}
select.form-control[multiple], select[multiple] {
    height: auto;
    border-radius: var(--radius-2xl) !important;
    padding: 0.375rem !important;
}
select[multiple] option { padding: 0.375rem 0.625rem; border-radius: var(--radius-lg); }
select[multiple] option:checked { background: var(--accent) linear-gradient(0deg, var(--accent), var(--accent)); color: var(--foreground); }
select option { background: var(--popover); color: var(--popover-foreground); }

input[type="date"].form-control { color-scheme: dark; }
input[type="number"].form-control { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   6. Jadvallar
   ========================================================================== */
.table { color: var(--foreground) !important; margin-bottom: 0; border-collapse: separate; border-spacing: 0; }
.table thead th, .table th {
    border-top: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--muted-foreground) !important;
    background: transparent !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.75rem 1rem !important;
    white-space: nowrap;
}
.table td {
    border-top: 0 !important;
    border-bottom: 1px solid oklch(0.3774 0.0227 213.697 / 0.6) !important;
    color: var(--foreground) !important;
    background: transparent !important;
    padding: 0.75rem 1rem !important;
    vertical-align: middle !important;
}
.table tbody tr:last-child td { border-bottom: 0 !important; }
.table-sm td, .table-sm th { padding: 0.625rem 1rem !important; }
.table thead.bg-200, .table thead.bg-light, .table thead { background: oklch(0.271 0.0264 216.308 / 0.5) !important; }
.table-striped tbody tr:nth-of-type(odd), .table-striped tbody tr:nth-of-type(even) { background-color: transparent !important; }
.table tbody tr { background: transparent !important; transition: background-color .12s; }
.table tbody tr:hover { background-color: oklch(0.408 0.0213 214.62 / 0.35) !important; }
.table-bordered, .table-bordered td, .table-bordered th { border: 0 !important; }
.table-bordered th { width: 40%; }
.table-bordered tr:not(:last-child) td, .table-bordered tr:not(:last-child) th { border-bottom: 1px solid oklch(0.3774 0.0227 213.697 / 0.6) !important; }
.table td strong { font-weight: 600; }
.table-responsive { border-radius: inherit; }

/* Semantic UI jadvali (tarix sahifasi) */
.ui.table, table.ui.celled.table {
    background: transparent !important;
    border: 0 !important;
    color: var(--foreground) !important;
    border-radius: 0 !important;
    width: 100% !important;
}
.ui.table thead th, .ui.celled.table thead th {
    background: oklch(0.271 0.0264 216.308 / 0.5) !important;
    color: var(--muted-foreground) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
    padding: 0.75rem 1rem !important;
}
.ui.table td, .ui.celled.table td, .ui.celled.table tr td {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid oklch(0.3774 0.0227 213.697 / 0.6) !important;
    color: var(--foreground) !important;
    padding: 0.75rem 1rem !important;
}
.ui.table td.dataTables_empty, td.dataTables_empty {
    color: var(--muted-foreground) !important;
    text-align: center;
    padding: 2rem 1rem !important;
}

/* ==========================================================================
   7. DataTables
   ========================================================================== */
.dataTables_wrapper { color: var(--muted-foreground) !important; font-size: 0.8125rem; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate { color: var(--muted-foreground) !important; margin: 0.75rem 0; }
.dataTables_wrapper .dataTables_filter label { color: var(--muted-foreground) !important; display: inline-flex !important; align-items: center; gap: .5rem; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background-color: oklch(0.271 0.0264 216.308 / 0.6) !important;
    border: 1px solid var(--border) !important;
    color: var(--foreground) !important;
    border-radius: var(--radius-4xl) !important;
    height: 2.25rem;
    padding: 0 0.875rem !important;
    outline: none;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--ring) !important; box-shadow: 0 0 0 3px oklch(0.765 0.177 163.223 / 0.3); }
.dataTables_scrollHead, .dataTables_scrollBody, .dataTables_scroll { background: transparent !important; border: 0 !important; }
.dataTables_wrapper .dataTables_scrollBody table.dataTable thead tr,
.dataTables_wrapper .dataTables_scrollBody table.dataTable thead th {
    padding-top: 0 !important; padding-bottom: 0 !important;
    border: 0 !important; height: 0 !important; line-height: 0 !important;
    background: transparent !important;
}
.dataTables_scrollBody > table { margin-top: 0 !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button,
.page-item .page-link {
    color: var(--foreground) !important;
    border: 1px solid var(--border) !important;
    background: transparent !important;
    border-radius: var(--radius-4xl) !important;
    margin: 0 2px;
    min-width: 2rem; height: 2rem;
    padding: 0 0.75rem !important;
    display: inline-flex; align-items: center; justify-content: center;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.page-item.active .page-link {
    color: var(--primary-foreground) !important;
    background: var(--primary) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.page-item.disabled .page-link {
    color: var(--muted-foreground) !important;
    background: transparent !important;
    border-color: var(--border) !important;
    opacity: .5;
}

/* ==========================================================================
   8. Badge'lar
   ========================================================================== */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--font-sans);
    font-weight: 500 !important;
    font-size: 0.75rem !important;
    line-height: 1;
    padding: 0.3125rem 0.625rem !important;
    border-radius: var(--radius-4xl) !important;
    border: 1px solid transparent;
}
.badge-success, .badge-primary {
    background: oklch(0.596 0.145 163.225 / 0.16) !important;
    color: var(--chart-1) !important;
    border-color: oklch(0.596 0.145 163.225 / 0.35) !important;
}
.badge-danger {
    background: oklch(0.577 0.245 27.325 / 0.16) !important;
    color: var(--destructive-soft) !important;
    border-color: oklch(0.577 0.245 27.325 / 0.35) !important;
}
.badge-warning {
    background: oklch(0.82 0.15 80 / 0.14) !important;
    color: var(--warning) !important;
    border-color: oklch(0.82 0.15 80 / 0.32) !important;
}
.badge-secondary, .badge-light, .badge-info {
    background: var(--secondary) !important;
    color: var(--secondary-foreground) !important;
}

/* ==========================================================================
   9. Asosiy kassa — statistika va stol kartalari
   ========================================================================== */
.stat-metric-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: 1.125rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s;
}
.stat-metric-card:hover { border-color: var(--secondary); transform: none; box-shadow: var(--shadow-sm); }

.stat-metric-icon {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    border-radius: var(--radius-4xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-right: 0;
    background: var(--muted) !important;
    border: 1px solid var(--border);
}

.stat-metric-title {
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted-foreground);
    font-weight: 500;
    line-height: 1;
    margin-bottom: 0.5rem;
    text-transform: lowercase;
}
.stat-metric-title::first-letter { text-transform: uppercase; }
.stat-metric-value {
    font-size: 1.625rem;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.stat-metric-value small { color: var(--muted-foreground); font-weight: 500; letter-spacing: 0; }

/* Stol kartasi */
.billiard-card {
    background: var(--card);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: border-color .2s, box-shadow .2s;
}
.billiard-card:hover { transform: none; border-color: var(--secondary); box-shadow: var(--shadow-lg); }
.billiard-card.table-free { border-color: var(--border); }
.billiard-card.table-free:hover { border-color: oklch(0.596 0.145 163.225 / 0.55); box-shadow: var(--shadow-lg); }
.billiard-card.table-active {
    border-color: oklch(0.577 0.245 27.325 / 0.5);
    background:
        radial-gradient(120% 80% at 50% 0%, oklch(0.577 0.245 27.325 / 0.12), transparent 60%),
        var(--card);
    box-shadow: var(--shadow-sm);
}
.billiard-card.table-active:hover { border-color: var(--destructive-soft); box-shadow: var(--shadow-lg); }

.card-top-bar { display: none; }

.table-header {
    padding: 1rem 1.125rem 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 0;
}
.table-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--foreground);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    line-height: 1.25;
}
.table-title svg.fa-circle, .table-title .fa-circle { font-size: 0.5rem !important; margin-right: 0 !important; }
.table-free .table-title svg.fa-circle { color: var(--chart-2) !important; }
.table-active .table-title svg.fa-circle { color: var(--destructive-soft) !important; }

.badge-neon-free, .badge-neon-busy {
    display: inline-flex; align-items: center;
    padding: 0.3125rem 0.625rem;
    border-radius: var(--radius-4xl);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    border: 1px solid transparent;
}
.badge-neon-free {
    background: oklch(0.596 0.145 163.225 / 0.16);
    color: var(--chart-1);
    border-color: oklch(0.596 0.145 163.225 / 0.35);
}
.badge-neon-busy {
    background: oklch(0.577 0.245 27.325 / 0.18);
    color: var(--destructive-soft);
    border-color: oklch(0.577 0.245 27.325 / 0.4);
    animation: busyPulse 2s ease-out infinite;
}
@keyframes busyPulse {
    0% { box-shadow: 0 0 0 0 oklch(0.704 0.191 22.216 / 0.45); }
    70% { box-shadow: 0 0 0 7px oklch(0.704 0.191 22.216 / 0); }
    100% { box-shadow: 0 0 0 0 oklch(0.704 0.191 22.216 / 0); }
}
@media (prefers-reduced-motion: reduce) { .badge-neon-busy { animation: none; } }

.table-body-content { padding: 0.5rem 1.125rem 1rem; text-align: left; flex: 1; }

.table-timer-display {
    font-family: var(--font-mono);
    font-size: clamp(1.5rem, 2.1vw, 2.125rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
    margin: 0.75rem 0 0.5rem;
    font-variant-numeric: tabular-nums;
}
.table-active .table-timer-display { color: var(--foreground); text-shadow: none; }
.table-free .table-timer-display { color: oklch(0.68 0.012 210 / 0.45); }

.table-sum-display {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--chart-1);
    text-shadow: none;
    margin-bottom: 0.75rem;
    font-variant-numeric: tabular-nums;
}
.table-free .table-sum-display { color: var(--muted-foreground); opacity: .55; }

.bar-orders-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: oklch(0.82 0.15 80 / 0.12);
    color: var(--warning);
    border: 1px solid oklch(0.82 0.15 80 / 0.3);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-4xl);
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.table-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    border-top: 1px solid oklch(0.3774 0.0227 213.697 / 0.7);
    padding-top: 0.75rem;
    margin-top: 0.25rem;
}
.table-meta-row svg { opacity: .7; }

.table-actions {
    padding: 0 1.125rem 1.125rem;
    background: transparent;
    border-top: 0;
}
.table-actions .btn-block { height: 2.5rem; }
.table-actions .d-flex { gap: 0.375rem; }
.table-actions .d-flex > .btn { margin: 0 !important; flex: 1 1 0; min-width: 0; padding: 0 0.5rem !important; }
.table-meta-row > span { white-space: nowrap; }

/* Kartalar oralig'i */
#viewCardsContainer > [class*="col-"] { display: flex; flex-direction: column; }
#viewCardsContainer > [class*="col-"] > .billiard-card { flex: 1; }

/* ==========================================================================
   10. Modallar va bildirishnomalar
   ========================================================================== */
.modal-backdrop.show { background: oklch(0.148 0.004 228.8); opacity: .7; }
.modal-content {
    background: var(--popover) !important;
    border: 1px solid var(--border) !important;
    color: var(--popover-foreground) !important;
    border-radius: var(--radius-3xl) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
}
.modal-header {
    border-bottom: 0 !important;
    background: transparent !important;
    padding: 1.25rem 1.5rem 0.5rem !important;
    align-items: center;
}
.modal-title { font-size: 1.0625rem !important; font-weight: 600 !important; }
.modal-body { padding: 1rem 1.5rem !important; }
.modal-footer {
    border-top: 0 !important;
    background: transparent !important;
    padding: 0.5rem 1.5rem 1.5rem !important;
    gap: 0.5rem;
}
.modal-footer > * { margin: 0 !important; }
.close {
    color: var(--muted-foreground) !important;
    text-shadow: none !important;
    opacity: 1 !important;
    width: 2rem; height: 2rem;
    border-radius: var(--radius-4xl);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 400 !important;
    padding: 0 !important; margin: 0 0 0 auto !important;
}
.close:hover { color: var(--foreground) !important; background: var(--muted); }

.quick-chip {
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: var(--radius-4xl);
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    margin: 3px;
    display: inline-flex;
    transition: background-color .15s, color .15s, border-color .15s;
    background: transparent;
    color: var(--foreground);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    user-select: none;
}
.quick-chip:hover { background: var(--muted); border-color: var(--secondary); color: var(--foreground); box-shadow: none; }
.quick-chip.active { background: var(--primary); color: var(--primary-foreground); border-color: transparent; box-shadow: none; }

.alert {
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--border) !important;
    background: var(--muted) !important;
    color: var(--foreground) !important;
}
.alert-success { background: oklch(0.596 0.145 163.225 / 0.14) !important; border-color: oklch(0.596 0.145 163.225 / 0.35) !important; color: var(--chart-1) !important; }
.alert-danger { background: oklch(0.577 0.245 27.325 / 0.14) !important; border-color: oklch(0.577 0.245 27.325 / 0.35) !important; color: var(--destructive-soft) !important; }
.alert-warning, .alert-info { background: oklch(0.82 0.15 80 / 0.1) !important; border-color: oklch(0.82 0.15 80 / 0.3) !important; color: var(--warning) !important; }

.alertify-notifier .ajs-message {
    font-family: var(--font-sans);
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--border) !important;
    background: var(--popover) !important;
    color: var(--foreground) !important;
    box-shadow: var(--shadow-lg) !important;
    text-shadow: none !important;
}
.alertify-notifier .ajs-message.ajs-success { border-color: oklch(0.596 0.145 163.225 / 0.5) !important; color: var(--chart-1) !important; }
.alertify-notifier .ajs-message.ajs-error { border-color: oklch(0.577 0.245 27.325 / 0.5) !important; color: var(--destructive-soft) !important; }

.sweet-overlay { background: oklch(0.148 0.004 228.8 / 0.7) !important; }
.sweet-alert {
    font-family: var(--font-sans) !important;
    background-color: var(--popover) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-3xl) !important;
    box-shadow: var(--shadow-lg) !important;
}
.sweet-alert h2 { color: var(--foreground) !important; font-weight: 600 !important; font-size: 1.25rem !important; }
.sweet-alert p { color: var(--muted-foreground) !important; }
.sweet-alert button {
    border-radius: var(--radius-4xl) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    box-shadow: none !important;
    padding: 0.625rem 1.25rem !important;
}
.sweet-alert button.confirm { background-color: var(--primary) !important; color: var(--primary-foreground) !important; }
.sweet-alert button.cancel { background-color: var(--secondary) !important; color: var(--foreground) !important; }
.sweet-alert input { background: var(--muted) !important; border: 1px solid var(--border) !important; color: var(--foreground) !important; border-radius: var(--radius-3xl) !important; }

/* Kontekst menyu */
.context-menu-list {
    background: var(--popover) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 0.375rem !important;
    font-family: var(--font-sans);
}
.context-menu-item { background: transparent !important; color: var(--foreground) !important; border-radius: var(--radius-lg); }
.context-menu-item.context-menu-hover { background: var(--accent) !important; }

/* ==========================================================================
   11. Footer
   ========================================================================== */
footer { border-top: 1px solid var(--border); margin-top: 2rem; }
footer p { font-size: 0.75rem; color: var(--muted-foreground) !important; }

/* ==========================================================================
   12. Tarix sahifasi
   ========================================================================== */
.history-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ==========================================================================
   13. Mobil moslashuv
   ========================================================================== */
@media (max-width: 575.98px) {
    .stat-metric-card { padding: 0.875rem; gap: 0.75rem; }
    .stat-metric-icon { width: 2.25rem; height: 2.25rem; flex-basis: 2.25rem; font-size: .9rem; }
    .stat-metric-value { font-size: 1.25rem; }
    .card-header { padding: 0.875rem 1rem !important; }
    .card-body { padding: 1rem !important; }
    .card:has(> .bg-holder) h3 { font-size: 1.375rem !important; }
    .search-box .search-input { min-width: 0; }
    .card-header.d-flex { flex-wrap: wrap; gap: 0.75rem; }
    .table td, .table th, .table-sm td, .table-sm th { padding: 0.625rem 0.75rem !important; }
    .table td { white-space: nowrap; }
    .navbar-top { margin-bottom: 1.25rem !important; }
}