/* 2026-10-29: Sozlamalar → "Shom" (dim) va "Kechgi" (dark) mavzular.
   Ranglar o'zgaruvchilarda; har bir element shu o'zgaruvchilardan oladi. */

html[app-xroot-active="dim"] {
    --bg: #15202b; --card: #192734; --card2: #1f3142; --head: #22303c; --text: #d9dfe5; --muted: #8b98a5;
    --line: rgba(255, 255, 255, .09); --line2: #38536e; --link: #8ab4f8; --input: #15202b; --quote: #22303c;
}
html[app-xroot-active="dark"] {
    --bg: #000; --card: #121212; --card2: #1a1a1a; --head: #1c1c1e; --text: #e6e6e6; --muted: #9a9a9a;
    --line: rgba(255, 255, 255, .08); --line2: #3a3a3c; --link: #8ab4f8; --input: #0a0a0a; --quote: #1c1c1e;
}

/* --- Asosiy fon, matn, havola --- */
html[app-xroot-active="dim"] body, html[app-xroot-active="dark"] body { background: var(--bg) !important; color: var(--text); }
html[app-xroot-active="dim"] a, html[app-xroot-active="dark"] a { color: var(--link); }
html[app-xroot-active="dim"] a:hover, html[app-xroot-active="dark"] a:hover { color: #fff !important; }
html[app-xroot-active="dim"] h1, html[app-xroot-active="dark"] h1,
html[app-xroot-active="dim"] .comm, html[app-xroot-active="dark"] .comm { color: var(--text); }

/* --- Sarlavha, footer, bloklar --- */
html[app-xroot-active="dim"] header, html[app-xroot-active="dark"] header,
html[app-xroot-active="dim"] footer, html[app-xroot-active="dark"] footer,
html[app-xroot-active="dim"] .title, html[app-xroot-active="dark"] .title,
html[app-xroot-active="dim"] .l_bar:hover, html[app-xroot-active="dark"] .l_bar:hover,
html[app-xroot-active="dim"] #loading-layer, html[app-xroot-active="dark"] #loading-layer { background: var(--head); border-color: var(--line2); }
html[app-xroot-active="dim"] .mOm, html[app-xroot-active="dark"] .mOm { box-shadow: none; border-color: var(--head); }

html[app-xroot-active="dim"] .menu, html[app-xroot-active="dark"] .menu,
html[app-xroot-active="dim"] .page, html[app-xroot-active="dark"] .page,
html[app-xroot-active="dim"] .prev, html[app-xroot-active="dark"] .prev,
html[app-xroot-active="dim"] .gb, html[app-xroot-active="dark"] .gb,
html[app-xroot-active="dim"] .m, html[app-xroot-active="dark"] .m,
html[app-xroot-active="dim"] .comments, html[app-xroot-active="dark"] .comments,
html[app-xroot-active="dim"] .link a, html[app-xroot-active="dark"] .link a,
html[app-xroot-active="dim"] .fon_tem, html[app-xroot-active="dark"] .fon_tem { background: var(--card) !important; color: var(--text); border-color: var(--line); }
html[app-xroot-active="dim"] .menu2, html[app-xroot-active="dark"] .menu2,
html[app-xroot-active="dim"] .link a:hover, html[app-xroot-active="dark"] .link a:hover,
html[app-xroot-active="dim"] .switch:hover, html[app-xroot-active="dark"] .switch:hover,
html[app-xroot-active="dim"] .pagination a, html[app-xroot-active="dark"] .pagination a,
html[app-xroot-active="dim"] .pagination b, html[app-xroot-active="dark"] .pagination b { background: var(--card2) !important; color: var(--text); border-color: var(--line); }
html[app-xroot-active="dim"] .menu .menu, html[app-xroot-active="dark"] .menu .menu { background: var(--card2) !important; }

/* --- Chiziqlar (ajratgichlar) --- */
html[app-xroot-active="dim"] .menu, html[app-xroot-active="dark"] .menu,
html[app-xroot-active="dim"] .page, html[app-xroot-active="dark"] .page,
html[app-xroot-active="dim"] .gb, html[app-xroot-active="dark"] .gb { border-bottom: 1px solid var(--line); }
html[app-xroot-active="dim"] .myorder_chiziq1, html[app-xroot-active="dark"] .myorder_chiziq1 { border-right: 1px solid var(--line); }
html[app-xroot-active="dim"] .myorder_chiziq2, html[app-xroot-active="dark"] .myorder_chiziq2 { border-top: 1px solid var(--line); }
html[app-xroot-active="dim"] .pagination, html[app-xroot-active="dark"] .pagination { border-top-color: var(--line); }
html[app-xroot-active="dim"] table.fon_tem, html[app-xroot-active="dark"] table.fon_tem { border-bottom-color: var(--line) !important; }
html[app-xroot-active="dim"] [style*="rgb(0 0 0 / 5%)"], html[app-xroot-active="dark"] [style*="rgb(0 0 0 / 5%)"],
html[app-xroot-active="dim"] [style*="rgba(0, 0, 0, 0.05)"], html[app-xroot-active="dark"] [style*="rgba(0, 0, 0, 0.05)"] { border-color: var(--line) !important; }
html[app-xroot-active="dim"] hr, html[app-xroot-active="dark"] hr { border-color: var(--line); }

/* --- Iqtibos (tiket/yangilik xabari) --- */
html[app-xroot-active="dim"] .st_2, html[app-xroot-active="dark"] .st_2 { background-color: var(--quote); color: var(--text); border-color: var(--line2); }
html[app-xroot-active="dim"] .st_1, html[app-xroot-active="dark"] .st_1 { border-color: transparent transparent var(--line2) transparent; }

/* --- Holat bloklari --- */
html[app-xroot-active="dim"] .good, html[app-xroot-active="dark"] .good { background: rgba(63, 185, 80, .12); color: #4ade80; border-color: rgba(63, 185, 80, .35); }
html[app-xroot-active="dim"] .forbidden, html[app-xroot-active="dark"] .forbidden { background: rgba(248, 81, 73, .12); color: #ff7b72; border-color: rgba(248, 81, 73, .35); }
html[app-xroot-active="dim"] .copy, html[app-xroot-active="dark"] .copy { background: var(--card2); color: var(--text); border-color: var(--line2); }

/* --- Maydonlar, ro'yxatlar, tugmalar --- */
html[app-xroot-active="dim"] input[type=text], html[app-xroot-active="dark"] input[type=text],
html[app-xroot-active="dim"] input[type=password], html[app-xroot-active="dark"] input[type=password],
html[app-xroot-active="dim"] input[type=email], html[app-xroot-active="dark"] input[type=email],
html[app-xroot-active="dim"] input[type=number], html[app-xroot-active="dark"] input[type=number],
html[app-xroot-active="dim"] input[type=tel], html[app-xroot-active="dark"] input[type=tel],
html[app-xroot-active="dim"] textarea, html[app-xroot-active="dark"] textarea,
html[app-xroot-active="dim"] select, html[app-xroot-active="dark"] select,
html[app-xroot-active="dim"] .form-control, html[app-xroot-active="dark"] .form-control { background: var(--input) !important; color: var(--text) !important; border: 1px solid var(--line2) !important; }
html[app-xroot-active="dim"] ::placeholder, html[app-xroot-active="dark"] ::placeholder { color: var(--muted); }
html[app-xroot-active="dim"] .btn-default, html[app-xroot-active="dark"] .btn-default,
html[app-xroot-active="dim"] .okt, html[app-xroot-active="dark"] .okt { background: var(--card2) !important; color: var(--text) !important; border: 1px solid var(--line2) !important; box-shadow: none !important; }
html[app-xroot-active="dim"] .btn-default:hover, html[app-xroot-active="dark"] .btn-default:hover { background: var(--head) !important; }
html[app-xroot-active="dim"] .input-group-addon, html[app-xroot-active="dark"] .input-group-addon { background: var(--card2); color: var(--text); border-color: var(--line2); }
html[app-xroot-active="dim"] .alert-info, html[app-xroot-active="dark"] .alert-info { background: var(--card2); color: var(--text); border-color: var(--line2); }
html[app-xroot-active="dim"] .nav-tabs, html[app-xroot-active="dark"] .nav-tabs { border-bottom-color: var(--line2); }
html[app-xroot-active="dim"] .nav-tabs > li.active > a, html[app-xroot-active="dark"] .nav-tabs > li.active > a,
html[app-xroot-active="dim"] .nav > li > a:hover, html[app-xroot-active="dark"] .nav > li > a:hover { background: var(--card2); border-color: var(--line2); color: var(--text); }
html[app-xroot-active="dim"] .page a, html[app-xroot-active="dark"] .page a { border-color: var(--line2); color: var(--link); }
html[app-xroot-active="dim"] .unsel, html[app-xroot-active="dark"] .unsel { color: var(--link); }
html[app-xroot-active="dim"] .sel, html[app-xroot-active="dark"] .sel { color: var(--text); }
html[app-xroot-active="dim"] input.sw + label, html[app-xroot-active="dark"] input.sw + label { background: var(--card2); box-shadow: inset 0 0 0 2px var(--line2); }

/* --- Qora (eski HTML'da qattiq yozilgan) matnlar --- */
html[app-xroot-active="dim"] font[color="black"], html[app-xroot-active="dark"] font[color="black"],
html[app-xroot-active="dim"] [style*="color:#000"], html[app-xroot-active="dark"] [style*="color:#000"],
html[app-xroot-active="dim"] [style*="color: #000"], html[app-xroot-active="dark"] [style*="color: #000"] { color: var(--text) !important; }
html[app-xroot-active="dim"] font[color="gren"], html[app-xroot-active="dark"] font[color="gren"],
html[app-xroot-active="dim"] font[color="green"], html[app-xroot-active="dark"] font[color="green"] { color: #4ade80; }
html[app-xroot-active="dim"] font[color="red"], html[app-xroot-active="dark"] font[color="red"] { color: #ff7b72; }
html[app-xroot-active="dim"] font[color="blue"], html[app-xroot-active="dark"] font[color="blue"] { color: #79b8ff; }

/* --- Ikonkalar: qora rangli ikonkalar qorong'i fonda ochiq rangga o'tkaziladi --- */
html[app-xroot-active="dim"] img[src^="/storage/icon/adm.png"], html[app-xroot-active="dark"] img[src^="/storage/icon/adm.png"],
html[app-xroot-active="dim"] img[src^="/storage/icon/new.png"], html[app-xroot-active="dark"] img[src^="/storage/icon/new.png"],
html[app-xroot-active="dim"] img[src^="/storage/icon/rule.png"], html[app-xroot-active="dark"] img[src^="/storage/icon/rule.png"] { filter: invert(1) brightness(.9); }
/* To'lov logotiplari (to'q matnli) - oq "plashka" ustida */
html[app-xroot-active="dim"] img[src^="/storage/img/click.png"], html[app-xroot-active="dark"] img[src^="/storage/img/click.png"],
html[app-xroot-active="dim"] img[src^="/storage/img/payme3.png"], html[app-xroot-active="dark"] img[src^="/storage/img/payme3.png"],
html[app-xroot-active="dim"] img[src^="/storage/img/uzum.png"], html[app-xroot-active="dark"] img[src^="/storage/img/uzum.png"],
html[app-xroot-active="dim"] img[src^="/storage/img/paynet2.png"], html[app-xroot-active="dark"] img[src^="/storage/img/paynet2.png"],
html[app-xroot-active="dim"] img[src^="/storage/img/octo.png"], html[app-xroot-active="dark"] img[src^="/storage/img/octo.png"],
html[app-xroot-active="dim"] img[src^="/storage/img/upay4.png"], html[app-xroot-active="dark"] img[src^="/storage/img/upay4.png"] { background: #fff; border-radius: 6px; padding: 3px 6px; }

/* --- Sozlamalar sahifasi --- */
.theme-picker { display: flex; justify-content: flex-start; gap: 18px; padding: 16px 12px !important; }
.apperwanceBlock { cursor: pointer; flex: 0 0 90px; width: 90px; text-align: center; }
.apperwanceBlock img { width: 90px; height: 130px; display: block; }
.apperwanceBlock span { display: block; text-align: center; padding-top: 10px; font-size: 14px; white-space: nowrap; }
@media (max-width: 360px) { .theme-picker { gap: 10px; } }
.footer-settings { float: right; }
.footer-settings img { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; }