/* Yashil Bino: the actual admin workspace in index.html. Only active CentralAdmin sections receive this theme. No application logic is changed. Leaving admin for the map, surveys or login restores their original styles. The existing light/dark switch continues to control the palette. */ body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) { --bg: #edf3ec; --bg-2: #e3eee3; --surface: #fffefb; --surface-2: #f1f6ef; --surface-solid: #fffefb; --surface-hover: #f0f7eb; --text: #163a2d; --text-2: #5a7266; --text-3: #73897d; --text-muted: #73897d; --accent: #26734f; --accent-light: #3c9266; --accent-bg: #76b98b12; --accent-border: #64a97b38; --accent-glow: #90c87b25; --stroke: #dce7dc; --stroke-2: #ebf0e8; --input-bg: #f4f7f0; --input-border: #dce6d7; --table-head: #f2f6ed; --badge-bg: #e5f1d9; --badge-border: #c9dcb6; --topbar-bg: #f8fbf5ed; --shadow-sm: 0 3px 10px #183d2b05; --shadow-md: 0 10px 35px #183d2b06; --shadow-lg: 0 18px 45px #183d2b0b; --radius-md: 22px; --radius-lg: 27px; background: var(--bg); color: var(--text); font-family: 'Manrope', 'Segoe UI', sans-serif; } html[data-theme="dark"] body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) { color-scheme: dark; --bg: #17191c; --bg-2: #1b1e21; --surface: #202327; --surface-solid: #202327; --surface-2: #26292e; --surface-hover: #2b2f34; --text: #e3e5e8; --text-2: #b4b9bf; --text-3: #8b9198; --text-muted: #969ca3; --accent: #8fcf9c; --accent-light: #a8dcb2; --accent-bg: #8fcf9c14; --accent-border: #8fcf9c33; --accent-glow: #8fcf9c1a; --stroke: #ffffff12; --stroke-2: #ffffff0a; --input-bg: #1b1e21; --input-border: #383c42; --table-head: #24272b; --badge-bg: #8fcf9c14; --badge-border: #8fcf9c33; --topbar-bg: #1b1e21ee; --shadow-sm: 0 3px 10px #0000001a; --shadow-md: 0 10px 35px #00000026; --shadow-lg: 0 18px 45px #00000030; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion))::before { background: radial-gradient(ellipse at 90% 0%, #87b96e14, transparent 60%), var(--bg); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) > .bg-shape { opacity: 0; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .topbar { height: 76px; padding: 0 27px; background: var(--topbar-bg); border-color: var(--stroke); box-shadow: none; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .topbar-left { gap: 14px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .brand-logo { border-radius: 15px; border-color: #bdd6b480; box-shadow: 0 3px 12px #253e2c0a; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .brand { color: var(--text); letter-spacing: .06em; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .brand span { color: var(--accent); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .brand-sub { color: var(--text-3); letter-spacing: .14em; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .controls { gap: 10px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hamburger, body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .theme-toggle { color: var(--text-2); background: var(--surface); border: 1px solid var(--stroke); border-radius: 12px; width: 38px; height: 38px; padding: 0; box-shadow: none; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hamburger span { background: var(--text-2); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) #langSelect, body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) #logoutBtn { background: var(--surface); color: var(--text-2); border: 1px solid var(--stroke); border-radius: 12px; height: 38px; font-size: 12px; box-shadow: none; } /* Forest-green navigation. Keep the original collapse/open behavior. */ body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .app-shell { --sidebar-width: 276px; grid-template-columns: var(--sidebar-width) minmax(0,1fr); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .app-shell.collapsed { --sidebar-width: 0px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .sidebar { width: calc(var(--sidebar-width) - 28px); margin: 18px 14px; top: 94px; height: calc(100vh - 112px); border: 1px solid #b4d89b20; border-radius: 25px; padding: 19px 13px; background: radial-gradient(ellipse at 100% 0%, #2d76554d, transparent 65%), linear-gradient(165deg, #104c3b, #082d24 82%); box-shadow: 0 15px 35px #11372620; scrollbar-color: #458267 transparent; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .app-shell.collapsed .sidebar { width: 0; margin: 0; padding: 0; border: 0; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .sidebar-badge { display: flex; align-items: center; min-height: 57px; color: #e0efce; background: #c9eca60c; border: 1px solid #c3e9a31c; border-radius: 16px; padding: 13px 15px; margin: 0 0 28px; font-size: 12px; font-weight: 600; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .sidebar-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #d0efa2; box-shadow: 0 0 0 5px #d0efa20c; margin-right: 13px; flex: 0 0 auto; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn { display: flex; align-items: center; gap: 11px; color: #b6ceba; border-radius: 13px; padding: 14px 13px; margin-bottom: 7px; font-size: 12px; line-height: 1.4; font-weight: 500; border: 1px solid transparent; box-shadow: none; transition: background .22s, color .22s, transform .22s, box-shadow .22s; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn:hover { color: #f1fbe9; background: #fffefb07; border-color: #fffefb06; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn::after { display: none; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn.active { color: #153e29; font-weight: 700; background: linear-gradient(115deg, #dbf79d, #b8e878); border-color: #e4ffbe30; box-shadow: 0 5px 20px #c6ec8610; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn.active::before { content: ""; display: inline-block; vertical-align: middle; width: 18px; height: 18px; margin: -2px 11px 0 0; border-radius: 0; background: currentColor; } /* Admin surfaces. */ body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .layout { width: 100%; max-width: 1480px; margin: 26px auto 40px; padding: 0 30px 24px; gap: 23px; min-width: 0; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .page-section { gap: 22px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .card { padding: 28px; border: 1px solid var(--stroke); border-radius: 25px; box-shadow: 0 8px 30px #1b4b2c06; background: var(--surface); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .card:hover { transform: none; border-color: var(--stroke); box-shadow: var(--shadow-md); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .card h2 { color: var(--text); font-size: 23px; letter-spacing: -.8px; font-weight: 700; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .card h3 { color: var(--text); font-weight: 700; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hero { isolation: isolate; min-height: 192px; padding: 36px 40px; border: 1px solid #aedc8530; background: radial-gradient(ellipse at 84% 15%, #37794570, transparent 65%), linear-gradient(115deg, #103f32, #1c5337); color: #f4f9e8; box-shadow: 0 15px 38px #163e2718; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hero h1 { position: relative; z-index: 2; color: #f5fae9; font-size: clamp(32px, 3.25vw, 52px); line-height: 1.12; letter-spacing: -1.8px; margin: 0 0 18px; font-weight: 700; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hero p { position: relative; z-index: 2; color: #bfd3b7; max-width: 690px; font-size: 13px; line-height: 1.9; margin: 0; padding-right: 0; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hero::before { content: ""; position: absolute; width: 500px; height: 500px; border-radius: 50%; right: -45px; top: -165px; left: auto; background: radial-gradient(circle, #c6e58522, transparent 68%); box-shadow: none; pointer-events: none; animation: eco-aurora 12s ease-in-out infinite alternate; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hero::after { content: ""; position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; background: linear-gradient(#dcf5c306 1px, transparent 1px), linear-gradient(90deg, #dcf5c306 1px, transparent 1px); background-size: 38px 38px; transform: none; opacity: 1; border: 0; box-shadow: none; pointer-events: none; mask-image: linear-gradient(90deg, transparent 20%, #000); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-panel-head { margin: 0 0 24px; gap: 18px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-toolbar { gap: 13px; margin-bottom: 17px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-toolbar input, body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-toolbar select { min-height: 48px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-toolbar input { flex: 2 1 280px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-toolbar select { flex: 1 1 190px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .status-box { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--stroke); border-radius: 12px; padding: 12px 15px; font-size: 12px; box-shadow: none; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) #adminUsersStatus { color: var(--accent); background: var(--accent-bg); border-color: var(--accent-border); display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 10px; margin: 0 0 18px; padding: 8px 13px; font-size: 11px; font-weight: 600; border-radius: 9px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) #adminUsersStatus::before { content: ''; width: 7px; height: 7px; background: currentColor; border-radius: 50%; flex-shrink: 0; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .status-box.error { color: #cb5067; background: #ef8a9a10; border-color: #df6e8740; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .table-wrap { border: 1px solid var(--stroke); border-radius: 16px; overflow-x: auto; max-width: 100%; scrollbar-color: var(--text-3) transparent; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .data-table { font-size: 13px; background: var(--surface); color: var(--text); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .data-table th { background: var(--table-head); color: var(--text-2); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 15px 16px; border-bottom: 1px solid var(--stroke); white-space: nowrap; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .data-table td { color: var(--text-2); padding: 16px; font-size: 12px; border-bottom: 1px solid var(--stroke-2); line-height: 1.65; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .data-table tr:last-child td { border-bottom: 0; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .data-table tbody tr:hover { background: var(--surface-hover); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table { min-width: 900px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table td:first-child { min-width: 180px; width: 22%; color: var(--text); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table td:nth-child(2) { font-family: 'Segoe UI', sans-serif; color: var(--text-2); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .user-cell { gap: 12px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .user-cell > span:last-child { word-break: normal; overflow-wrap: break-word; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .user-avatar { width: 39px; height: 39px; border-radius: 14px; color: #3c6a39; background: linear-gradient(145deg, #e7f5d1, #d8ebbb); border: 1px solid #cedfac; font-size: 11px; box-shadow: inset 0 1px 0 #fff8; transition: transform .25s, border-radius .25s; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table tr:nth-child(3n+2) .user-avatar { color: #356f66; background: #dff1e9; border-color: #cae2d6; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table tr:nth-child(3n) .user-avatar { color: #907042; background: #f8efd7; border-color: #ece0bd; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .password-text { white-space: nowrap; color: var(--text-2); min-width: 68px; letter-spacing: .04em; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .password-cell { gap: 5px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .role-badge { border-radius: 8px; font-weight: 600; padding: 5px 9px; font-size: 10px; letter-spacing: 0; } html[data-theme="dark"] body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .role-badge { filter: brightness(1.65) saturate(.7); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .row-actions { gap: 6px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .icon-btn { width: 31px; height: 31px; border: 1px solid var(--stroke); background: var(--surface-2); color: var(--text-2); border-radius: 9px; box-shadow: none; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .icon-btn:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-border); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .icon-btn.danger:hover { color: #dc5d79; border-color: #dc5d7955; background: #dc5d7910; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) #adminSectionUsers > article.card { position: relative; overflow: hidden; margin-top: 26px !important; background: linear-gradient(120deg, var(--surface-2), var(--surface)); border: 1px solid var(--stroke); border-left: 3px solid #7fac68; border-radius: 18px; padding: 25px; box-shadow: none; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) #adminSectionUsers > article.card h3 { margin-top: 0; font-size: 16px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .list-empty { color: var(--text-3); font-size: 12px; line-height: 1.7; } /* Reuse all existing form controls and handlers. */ body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) input, body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) select, body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) textarea { color: var(--text); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 12px; padding: 12px 14px; font-size: 13px; box-shadow: none; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) input::placeholder, body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) textarea::placeholder { color: var(--text-3); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) input:focus, body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) select:focus, body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) textarea:focus { border-color: #9cb276; box-shadow: 0 0 0 3px #a5be790d; outline: none; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .btn { color: #244528; background: linear-gradient(110deg, #d4f48b, #bfe879); border: 1px solid #accb6c60; border-radius: 12px; padding: 12px 17px; font-size: 12px; font-weight: 700; box-shadow: 0 4px 12px #7bb23b20; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .btn:hover { background: #def8a1; box-shadow: 0 5px 17px #739e4430; transform: translateY(-1px); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .btn.ghost { color: var(--text-2); background: var(--surface-2); border-color: var(--stroke); box-shadow: none; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .btn.ghost:hover { color: var(--text); border-color: var(--accent-border); background: var(--surface-hover); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) :is(button, a, input, select, textarea):focus-visible { outline: 2px solid #93b865; outline-offset: 3px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .modal-overlay { background: #031e16a6; backdrop-filter: blur(10px); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .modal-box { max-width: 530px; border-radius: 25px; background: var(--surface); border: 1px solid var(--stroke); box-shadow: 0 30px 100px #03180f50; animation: eco-modal-in .32s cubic-bezier(.2,.8,.2,1); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .modal-box-head { padding: 25px; border-color: #b9dd9e30; background: radial-gradient(ellipse at 100% 0, #60893d55, transparent 65%), #123e2e; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .modal-box-head h3 { font-size: 21px; letter-spacing: -.5px; color: #f0f8e2; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .modal-box form { padding: 24px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .modal-close-btn { color: var(--text-2); background: var(--surface-2); border-radius: 10px; width: 32px; height: 32px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .field-label { color: var(--text-2); font-size: 12px; font-weight: 600; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .password-input-wrap input { padding-right: 48px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .password-input-wrap .icon-btn { background: transparent; border: 0; } @media (max-width:1250px) { body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .app-shell { --sidebar-width: 245px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .app-shell.collapsed { --sidebar-width: 0px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .layout { padding: 0 23px 25px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .card { padding: 22px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hero { padding: 32px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hero p { max-width: 76%; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hero::after { right: 48px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hero::before { right: 47px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn { font-size: 11px; padding: 12px; } } @media (max-width:980px) { body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .app-shell { grid-template-columns: minmax(0,1fr); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .sidebar { position: fixed; top: 76px; left: 0; width: 250px; height: calc(100dvh - 102px); margin: 12px; z-index: 1200; transform: translateX(calc(-100% - 16px)); transition: transform .22s ease; box-shadow: 0 20px 70px #00000030; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .sidebar.open { transform: translateX(0); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .layout { padding: 0 22px 24px; margin-top: 22px; } } @media (max-width:600px) { body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .topbar { height: 66px; padding: 0 13px; gap: 9px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .topbar-left { gap: 8px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .brand-logo { width: 33px; height: 33px; border-radius: 10px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .brand { font-size: 12px; white-space: nowrap; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .brand-sub { font-size: 6px; letter-spacing: .06em; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .controls { gap: 5px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hamburger, body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .theme-toggle { width: 31px; height: 33px; flex: 0 0 auto; border-radius: 10px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) #langSelect { min-width: 68px; max-width: 82px; font-size: 10px; padding: 5px; height: 33px; border-radius: 10px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) #logoutBtn { font-size: 10px; padding: 6px 8px; height: 33px; border-radius: 10px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .sidebar { top: 66px; height: calc(100dvh - 90px); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .layout { padding: 0 13px 24px; margin-top: 15px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .page-section { gap: 16px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .card { padding: 17px; border-radius: 19px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hero { min-height: 188px; padding: 26px 23px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hero h1 { font-size: 28px; max-width: 82%; margin-bottom: 13px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hero p { font-size: 11px; line-height: 1.8; max-width: 100%; padding-right: 0; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hero::after { width: 37px; height: 37px; border-radius: 12px; right: 25px; top: 29px; opacity: .55; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hero::before { width: 150px; height: 150px; right: -44px; top: -80px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .card h2 { font-size: 20px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-panel-head { margin-bottom: 19px; gap: 14px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-panel-head .btn { width: 100%; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-toolbar { gap: 10px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-toolbar input, body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-toolbar select { width: 100%; min-width: 0; flex-basis: 100%; min-height: 45px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) #adminUsersStatus { padding: 12px; font-size: 11px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .data-table td { padding: 14px 12px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) #adminSectionUsers > article.card { padding: 17px; margin-top: 19px !important; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .toolbar { flex-wrap: wrap; gap: 9px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .toolbar select { max-width: 100%; min-width: 0 !important; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .modal-box { border-radius: 20px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .modal-box-head, body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .modal-box form { padding: 20px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .modal-box input, body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .modal-box select { font-size: 16px; } } @media (max-width:380px) { body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .brand-logo { display: none; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .topbar { padding: 0 10px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .brand { font-size: 11px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .brand-sub { font-size: 5px; } } /* Keep controls within the narrowest supported viewport. */ body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) #langSelect { padding: 0 10px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .toolbar .btn { max-width: 100%; white-space: normal; } @media (max-width:380px) { body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .controls { gap: 4px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .topbar { gap: 6px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hamburger, body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .theme-toggle { width: 28px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) #langSelect { width: 64px; min-width: 64px; padding: 0 3px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) #logoutBtn { padding: 5px; width: 42px; } } /* Branded green architecture: decorative only, with no new application state. */ body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) { --eco-lime: #d4f48b; --eco-forest: #103f32; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion))::before { background: radial-gradient(ellipse at 95% 0%, #dceccfa6, transparent 55%), var(--bg); } html[data-theme="dark"] body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion))::before { background: var(--bg); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .topbar { backdrop-filter: blur(20px); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .brand-logo { background: #fcfff5; border-radius: 15px 15px 15px 4px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .brand { letter-spacing: -.025em; font-size: 18px; font-weight: 800; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .brand span { color: #47833b; } html[data-theme="dark"] body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .brand span { color: var(--accent); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .brand-sub { letter-spacing: .12em; font-size: 8px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .sidebar::after { content: 'YASHIL BINO\A ENERGY PASSPORT PLATFORM'; display: block; white-space: pre-line; padding: 82px 18px 22px; margin: 45px 6px 0; border-radius: 17px; border: 1px solid #bddd9a20; color: #cce1bb; font-size: 10px; font-weight: 700; line-height: 2; letter-spacing: .10em; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23badc92%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%203c-9-1-16%203-16%2010a7%207%200%200%200%207%207c7%200%2010-8%209-17Z%22%2F%3E%3Cpath%20d%3D%22m3%2021%2012-12m-7%207h6m-3-3V8%22%2F%3E%3C%2Fsvg%3E") 18px 22px / 42px 42px no-repeat, radial-gradient(ellipse at 90% 0, #bee4851a, transparent 70%); pointer-events: none; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn::before { content: ''; display: inline-block; vertical-align: middle; width: 18px; height: 18px; flex: 0 0 18px; margin: -2px 11px 0 0; background: currentColor; mask: var(--eco-icon, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22%2F%3E%3C%2Fsvg%3E")) center / contain no-repeat; border-radius: 0; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn.active { box-shadow: 0 6px 20px #021e2240, inset 0 1px 0 #e9ffbd70; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn.active::after { content: ''; display: block; position: absolute; left: auto; right: 13px; top: 50%; width: 5px; height: 5px; margin: 0; border-radius: 50%; background: #32623b; opacity: 1; transform: translateY(-50%); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn:hover { transform: translateX(3px); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn.active:hover { color: #173a25; background: #ddf6a5; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn[data-target="pageXarita"] { --eco-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%206%206-3%206%203%206-3v15l-6%203-6-3-6%203Zm6-3v15m6-12v15%22%2F%3E%3C%2Fsvg%3E"); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn[data-target="pageAdmin"] { --eco-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2021v-3a6%206%200%200%201%2012%200v3M16%205a3%203%200%200%201%200%206m2%204a5%205%200%200%201%203%205%22%2F%3E%3C%2Fsvg%3E"); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn[data-target="pageAdminCitizenData"] { --eco-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H5v18h14V8Zm0%200v5h5M8%2012h8m-8%204h5%22%2F%3E%3C%2Fsvg%3E"); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn[data-target="pageAdminAnalytics"], body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) #pageKuzatuvchiBtn { --eco-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%203v17h17M9%2015v-4m5%204V7m5%208V4%22%2F%3E%3C%2Fsvg%3E"); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn[data-target="pageEsmaTestRegion"] { --eco-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%206-8%2012-8%2012S4%2016%204%2010a8%208%200%201%201%2016%200Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn[data-target="pageAdminDeleteRating"] { --eco-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18M9%206V3h6v3M5%206l1%2015h12l1-15M10%2010v7m4-7v7%22%2F%3E%3C%2Fsvg%3E"); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn[data-target="pageAdminChangeRating"] { --eco-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%204%205%205M4%2020l5-1L21%207a2%202%200%200%200-4-4L5%2015ZM13%2021h8%22%2F%3E%3C%2Fsvg%3E"); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn[data-target="pageAdminAuditImport"] { --eco-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%208%203v6c0%205-8%209-8%209s-8-4-8-9V6Z%22%2F%3E%3Cpath%20d%3D%22m8%2012%203%203%205-6%22%2F%3E%3C%2Fsvg%3E"); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-hero { min-height: 310px; padding: 36px 40px 32px; display: flex; flex-direction: column; justify-content: center; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-hero h1 { margin-top: 23px; max-width: 55%; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-hero p { max-width: 48%; font-size: 13px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-eyebrow { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; color: #dcedc6; font-size: 9px; font-weight: 700; letter-spacing: .14em; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-leaf { width: 28px; height: 28px; border: 1px solid #cae99235; border-radius: 9px 9px 9px 2px; background: #d8f3a514; display: grid; place-items: center; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-leaf::before { content: ''; width: 17px; height: 17px; background: #d7f39f; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%203c-9-1-16%203-16%2010a7%207%200%200%200%207%207c7%200%2010-8%209-17Z%22%2F%3E%3Cpath%20d%3D%22m3%2021%2012-12m-7%207h6m-3-3V8%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-divider { width: 1px; height: 12px; background: #c7e2b838; margin: 0 1px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-signature { display: flex; align-items: center; gap: 5px; margin-top: 27px; position: relative; z-index: 2; color: #afc79e; font-size: 8px; font-weight: 500; letter-spacing: .12em; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-signature > span { display: block; height: 12px; width: 12px; border-radius: 4px; background: #d5ef98; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-signature > span:nth-child(2) { background: #98cb82; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-signature > span:nth-child(3) { background: #5a9c70; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-signature > span:nth-child(4) { background: #347154; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-signature > i { height: 12px; width: 1px; background: #bed6a738; margin: 0 8px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-art { position: absolute; right: 8px; top: 50%; width: 50%; height: 100%; max-width: 555px; z-index: 1; transform: translateY(-50%); pointer-events: none; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-art img { display: block; width: 100%; height: 100%; object-fit: contain; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-panel-head h2 { display: flex; align-items: center; gap: 12px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-panel-head h2::before { content: ''; display: block; width: 24px; height: 24px; flex-shrink: 0; background: var(--accent); mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2021v-3a6%206%200%200%201%2012%200v3M16%205a3%203%200%200%201%200%206m2%204a5%205%200%200%201%203%205%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-toolbar { background: var(--surface-2); padding: 10px; border: 1px solid var(--stroke-2); border-radius: 16px; gap: 10px; margin-bottom: 16px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-toolbar :is(input,select) { background-color: var(--surface); border-color: var(--stroke); border-radius: 11px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) #adminUsersSearchInput { padding-left: 44px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236d8a73%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%226%22%2F%3E%3Cpath%20d%3D%22m15%2015%206%206%22%2F%3E%3C%2Fsvg%3E"); background-position: 15px center; background-size: 18px; background-repeat: no-repeat; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table td:first-child { font-weight: 600; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table td:nth-child(2) { font-size: 11px; letter-spacing: .01em; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .data-table tbody tr { transition: background-color .2s, box-shadow .2s; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .data-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 28%, transparent); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .data-table tbody tr:hover { background: var(--surface-hover); box-shadow: inset 3px 0 0 #9bc775; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table tr:hover .user-avatar { transform: rotate(-5deg) scale(1.06); border-radius: 14px 14px 14px 4px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table tr:nth-child(4n) .user-avatar { background: #e1edf0; color: #52777c; border-color: #cee0e4; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .role-badge { border-radius: 7px; border-width: 1px; padding: 5px 8px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .password-cell .icon-btn, body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .row-actions .icon-btn { font-size: 0; padding: 0; display: inline-grid; place-items: center; transition: background .2s, color .2s, transform .2s, border-color .2s; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .password-cell .icon-btn::before, body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .row-actions .icon-btn::before { content: ''; width: 14px; height: 14px; background: currentColor; mask: var(--eco-icon) center / contain no-repeat; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .toggle-password-btn { --eco-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012s4-7%2010-7%2010%207%2010%207-4%207-10%207-10-7-10-7Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .copy-password-btn { --eco-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M15%208V4H4v11h4%22%2F%3E%3C%2Fsvg%3E"); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .edit-user-btn { --eco-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%204%205%205M4%2020l5-1L21%207a2%202%200%200%200-4-4L5%2015ZM13%2021h8%22%2F%3E%3C%2Fsvg%3E"); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .delete-user-btn { --eco-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18M9%206V3h6v3M5%206l1%2015h12l1-15M10%2010v7m4-7v7%22%2F%3E%3C%2Fsvg%3E"); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .icon-btn:hover { transform: translateY(-2px); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .btn { position: relative; overflow: hidden; transition: background .2s, box-shadow .2s, transform .2s, border-color .2s; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .btn:not(.ghost)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, #fff8 50%, transparent 75%); transform: translateX(-140%) skewX(-15deg); pointer-events: none; transition: transform .65s ease; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .btn:not(.ghost):hover::after { transform: translateX(140%) skewX(-15deg); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .btn:active, body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .icon-btn:active { transform: scale(.97); } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) #adminSectionUsers > article.card h3 { display: flex; align-items: center; gap: 10px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) #adminSectionUsers > article.card h3::before { content: ''; width: 22px; height: 22px; background: var(--accent); mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%208%203v6c0%205-8%209-8%209s-8-4-8-9V6Z%22%2F%3E%3Cpath%20d%3D%22m8%2012%203%203%205-6%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .modal-box-head .modal-close-btn { color: #dceccf; background: #d1ebbd12; border: 1px solid #d1ebbd24; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) :is(button, a, input, select, textarea):focus-visible { outline: 2px solid #80ac52; outline-offset: 3px; } /* Motion stays decorative. The existing controls and handlers are unchanged. */ body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .page-section.active { animation: eco-page-in .55s cubic-bezier(.2,.7,.2,1) both; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .page-section.active > .card { animation: eco-page-in .6s cubic-bezier(.2,.7,.2,1) both; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .page-section.active > .card:nth-child(2) { animation-delay: .08s; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table tbody tr { animation: eco-row-in .45s ease both; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table tbody tr:nth-child(2) { animation-delay: .04s; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table tbody tr:nth-child(3) { animation-delay: .08s; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table tbody tr:nth-child(4) { animation-delay: .12s; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table tbody tr:nth-child(5) { animation-delay: .16s; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table tbody tr:nth-child(6) { animation-delay: .20s; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table tbody tr:nth-child(7) { animation-delay: .24s; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table tbody tr:nth-child(n+8) { animation-delay: .28s; } @keyframes eco-page-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes eco-row-in { from { opacity: 0; } to { opacity: 1; } } @keyframes eco-modal-in { from { opacity: 0; transform: translateY(15px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes eco-aurora { from { transform: translate(0,0) scale(1); opacity: .65; } to { transform: translate(-50px,40px) scale(1.15); opacity: 1; } } @media (min-width: 1700px) { body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-hero { min-height: 330px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-art { right: 35px; max-width: 575px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .data-table td { padding-top: 18px; padding-bottom: 18px; font-size: 13px; } } @media (max-width: 1250px) { body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-hero { min-height: 294px; padding: 30px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-hero h1 { font-size: 42px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-hero p { max-width: 51%; font-size: 12px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-art { right: -18px; width: 54%; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-eyebrow { font-size: 8px; gap: 7px; letter-spacing: .07em; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn { padding: 13px 10px; gap: 9px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .card h2 { font-size: 20px; } } @media (max-width: 980px) { body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-hero { min-height: 288px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .sidebar { background: radial-gradient(ellipse at 100% 0%, #2d76554d, transparent 65%), #0b392c; } } @media (max-width: 600px) { body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .brand { font-size: 12px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .brand-sub { font-size: 6px; letter-spacing: .06em; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-hero { min-height: 395px; padding: 25px 23px 220px; justify-content: flex-start; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-hero h1 { max-width: 100%; font-size: 34px; margin: 18px 0 12px; letter-spacing: -1px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-hero p { max-width: 100%; font-size: 11px; line-height: 1.8; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-eyebrow { font-size: 7px; gap: 8px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-leaf { width: 24px; height: 24px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-art { width: 330px; height: 230px; max-width: 100%; top: auto; bottom: -5px; right: -4px; transform: none; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-signature { position: absolute; left: 23px; bottom: 23px; max-width: 60px; flex-wrap: wrap; font-size: 0; z-index: 3; gap: 4px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-signature > span { width: 10px; height: 10px; border-radius: 3px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-signature > i { display: none; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hero::after { inset: 0; width: auto; height: auto; border-radius: 0; opacity: 1; transform: none; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-panel-head h2 { font-size: 19px; letter-spacing: -.65px; gap: 9px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-panel-head h2::before { width: 21px; height: 21px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-toolbar { padding: 8px; border-radius: 13px; gap: 8px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) #adminUsersStatus { font-size: 10px; padding: 8px 11px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) #adminOpenCreateUserBtn { min-height: 45px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-toolbar input { font-size: 11px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .sidebar::after { margin-top: 24px; padding-top: 68px; } } @media (max-width: 380px) { body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .brand { font-size: 11px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .brand-sub { font-size: 5px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-eyebrow { font-size: 6px; gap: 6px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-hero { padding-left: 20px; padding-right: 20px; padding-bottom: 195px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .admin-eco-art { width: 295px; height: 205px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-panel-head h2 { font-size: 17px; } } @media (prefers-reduced-motion: reduce) { body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) *, body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) *::before, body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .btn:not(.ghost)::after { display: none; } } /* Keep the original role-driven display property on menu buttons. */ body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn { min-height: 46px; padding-right: 22px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) #adminSectionUsers > article.card .toolbar { justify-content: flex-start; margin-top: 12px; gap: 10px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table { table-layout: auto; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table th:first-child { width: 21%; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table th:nth-child(3) { min-width: 148px; } body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table td { padding-top: 14px; padding-bottom: 14px; } /* Tahlil bo'limi — "hududlar / tarmoqlar kesimida": compact rows so each table fits on one screen (overrides the roomier admin .data-table padding above, hence !important). */ #anRegionTableSection .data-table th, #anRegionTableSection .data-table td, #anSectorSection .data-table th, #anSectorSection .data-table td { padding: 8px 12px !important; line-height: 1.35 !important; } #anRegionTableSection .table-wrap, #anSectorSection .table-wrap { margin-top: 0.5rem; } /* "Tarmoqlar kesimida": guruh sarlavhasi (Ijtimoiy soha, ...) — bosilsa guruh yig'iladi/ochiladi; guruh "Jami" qatorlari yashil qalin (maket bo'yicha). */ .an-group-toggle { cursor: pointer; user-select: none; white-space: nowrap; } .an-group-toggle:hover { color: var(--accent, #16a34a); } .an-group-toggle[hidden] { display: none; } #anSectorBody tr[style*="font-weight:700"] td:nth-child(2) { color: var(--accent, #15803d); } /* A..G rating badges in the "hududlar / tarmoqlar kesimida" headers — colours match AN_CAT_COLORS in app.js. */ .an-cat-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px; color: #fff; font-weight: 800; font-size: 11px; letter-spacing: 0; } .an-cat-A { background: #00a651; } .an-cat-B { background: #50b848; } .an-cat-C { background: #bfd730; color: #1f2937; } .an-cat-D { background: #fff200; color: #1f2937; } .an-cat-E { background: #fdb913; color: #1f2937; } .an-cat-F { background: #f37021; } .an-cat-G { background: #ed1c24; } /* "Hududlar kesimida" — ikki qatorli sarlavha: "Jami ijtimoiy soha muassasalari" (Reja / Amalda), "%" va "Energiya samaradorlik toifasi" (A..G katta badge + izoh). */ .an-region-table thead th { vertical-align: middle; } /* Reja/Amalda/% faqat "Noturar" filtrida — boshqa holatda sarlavha ustunlari yashiriladi (tbody qatorlarida bu ustunlar app.js'da umuman qo'shilmaydi). */ .an-region-table.an-hide-plan .an-rh-plan, .an-region-table.an-hide-plan .an-rh-pct { display: none; } /* Noturar filtrida "Jami obyekt" o'rniga Amalda ko'rsatiladi */ .an-region-table.an-plan-mode .an-rh-total { display: none; } .an-region-table .an-rh-center, .an-region-table .an-rh-group, .an-region-table .an-rh-sub, .an-region-table .an-rh-pct, .an-region-table .an-rh-cat { text-align: center; } .an-region-table .an-rh-group { font-size: 0.95rem; font-weight: 800; } .an-region-table .an-rh-plan { background: #e8f1fd; color: #1e3a8a; } .an-region-table .an-rh-pct { background: #dbe9fb; color: #1e3a8a; font-size: 1.15rem; font-weight: 800; } .an-region-table .an-rh-cats { background: #eaf6ec; color: #14532d; } .an-region-table .an-rh-cat { min-width: 56px; } .an-region-table .an-rh-cat .an-cat-badge { display: flex; width: 100%; height: 30px; font-size: 1.05rem; border-radius: 8px; } .an-region-table .an-rh-cat-A { background: #ecf8ef; } .an-region-table .an-rh-cat-B { background: #eef8ec; } .an-region-table .an-rh-cat-C { background: #f6faea; } .an-region-table .an-rh-cat-D { background: #fffde6; } .an-region-table .an-rh-cat-E { background: #fff6e6; } .an-region-table .an-rh-cat-F { background: #fff0e8; } .an-region-table .an-rh-cat-G { background: #fdecec; } /* ===== Tahlil bo'limi: "Ijtimoiy soha muassasalarining energiya samaradorligi ko'rsatkichlari va tejash imkoniyatlari" (index.html #anSocialPassportTable, app.js renderSocialPassportCard). Ekranda zamonaviy ko'rinish; Excel yuklab olish (exportSocialPassportExcel) asl faylning ko'rinishini saqlaydi. ===== */ /* Manrope has no Uzbek Cyrillic (Қ Ҳ Ў Ғ) — those letters fell back to another font mid-word; these fonts have them all. */ .sp-table { --sp-radius: 14px; width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0; font-family: "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; } .sp-table th, .sp-table td { padding: 8px 5px; text-align: center; vertical-align: middle; line-height: 1.3; border-bottom: 1px solid var(--stroke); border-right: 1px solid var(--stroke-2); } .sp-table tr > :last-child { border-right: 0; } /* — sarlavha — */ .sp-table thead th { background: var(--surface-2); color: var(--text-2); font-size: 11px; font-weight: 700; letter-spacing: .01em; } .sp-table thead tr:first-child > :first-child { border-top-left-radius: var(--sp-radius); } .sp-table thead tr:first-child > :last-child { border-top-right-radius: var(--sp-radius); } .sp-table .sp-h-main { position: sticky; left: 0; z-index: 2; width: 150px; text-align: left; padding-left: 14px; font-size: 12px; color: var(--text); } .sp-table .sp-h-group { font-size: 10.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--text); } .sp-table .sp-h-plain { font-weight: 600; color: var(--text-3); } .sp-table .sp-h-small { font-weight: 600; font-size: 10.5px; color: var(--text-3); } .sp-table .sp-h-red { color: #c2410c; } .sp-table .sp-cat { min-width: 0; } .sp-table .sp-cat small { display: block; margin-top: 5px; font-size: 10px; font-weight: 600; color: var(--text-3); white-space: nowrap; } .sp-pill { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; background: var(--c); color: var(--ink); font-family: "Space Grotesk", sans-serif; font-size: 14px; font-weight: 800; line-height: 1; border-radius: 6px; } .sp-cat-a { --c: #00a651; --ink: #fff; --tint: rgba(0, 166, 81, .08); } .sp-cat-b { --c: #50b848; --ink: #fff; --tint: rgba(80, 184, 72, .08); } .sp-cat-c { --c: #bfd730; --ink: #1f2937; --tint: rgba(191, 215, 48, .12); } .sp-cat-d { --c: #ffe600; --ink: #1f2937; --tint: rgba(255, 230, 0, .12); } .sp-cat-e { --c: #fdb913; --ink: #1f2937; --tint: rgba(253, 185, 19, .12); } .sp-cat-f { --c: #f37021; --ink: #fff; --tint: rgba(243, 112, 33, .1); } .sp-cat-g { --c: #ed1c24; --ink: #fff; --tint: rgba(237, 28, 36, .08); } .sp-table .sp-below-c { background: rgba(243, 112, 33, .1); color: #9a3412; } /* ustun guruhlari orasidagi ajratgich (toifalar | holati | prognoz | tambur) */ .sp-table .sp-gs { border-left: 2px solid var(--stroke); } /* — tana — */ .sp-table tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; padding-left: 14px; font-weight: 700; font-size: 13px; color: var(--text); } .sp-table tbody td { font-size: 13px; font-weight: 600; white-space: nowrap; } .sp-table tbody td[class*="sp-cat-"] { background: var(--tint); } .sp-table tbody td.sp-cat-d, .sp-table tbody td.sp-cat-e { color: #b45309; } .sp-table tbody td.sp-cat-f, .sp-table tbody td.sp-cat-g { color: #c2410c; } .sp-table tbody td.sp-pct { color: var(--text-3); font-weight: 700; } .sp-table tbody td.sp-pct::after { content: "%"; margin-left: 1px; font-size: 11px; } .sp-table tbody td.sp-zero { color: var(--text-3); font-weight: 500; } .sp-table tbody tr { transition: background .15s ease; } .sp-table tbody tr:hover > * { background-image: linear-gradient(var(--surface-hover), var(--surface-hover)); } .sp-table tbody tr:last-child > * { border-bottom: 0; } .sp-table tbody tr.sp-total > * { background-color: var(--accent-bg); font-weight: 800; font-size: 14px; border-bottom: 2px solid var(--accent-border); } .sp-table tbody tr.sp-total th { color: var(--accent); text-transform: uppercase; letter-spacing: .04em; font-size: 13px; } .sp-section .table-wrap { border: 1px solid var(--stroke); border-radius: var(--radius-md, 16px); overflow: auto; } /* — chop etish (printSocialPassportTable) — */ .sp-print .sp-table { min-width: 0; font-size: 9pt; } .sp-print .sp-table th, .sp-print .sp-table td { padding: 4px 4px; font-size: 9pt; border: 1px solid #9aa79f; } .sp-print .sp-table .sp-h-main, .sp-print .sp-table tbody th { position: static; } .sp-print .sp-table * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* ===== "Toifalangan binolar va xonadonlar": toifalar kartochkalari (index.html #citizenStatCards, app.js renderCitizenStatShares) — chapda jami, o'ngda A—G energiya yorlig'i ranglarida. ===== */ .cs-panel { display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: 12px; margin-bottom: 0.25rem; } .cs-total { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 22px 24px; border-radius: 20px; color: #fff; background: radial-gradient(circle at 85% 15%, #2f7a52 0, transparent 55%), linear-gradient(140deg, #1d5a3c, #0d3624); box-shadow: 0 10px 30px -12px rgba(13, 54, 36, .55); } .cs-total::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 130px; height: 130px; border-radius: 50%; border: 18px solid rgba(198, 238, 149, .12); } .cs-total-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #c6ee95; } .cs-total-value { font-family: "Space Grotesk", sans-serif; font-size: 44px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; white-space: nowrap; } .cs-total-sub { font-size: 13px; color: rgba(255, 255, 255, .72); } .cs-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; } .cs-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 14px 13px; border: 1px solid var(--stroke); border-radius: 18px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04)); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease; } .cs-card:hover { transform: translateY(-2px); border-color: var(--cs-color); box-shadow: 0 10px 22px -14px var(--cs-color); } .cs-card:focus-visible { outline: 2px solid var(--cs-color); outline-offset: 2px; } .cs-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .cs-badge { display: inline-grid; place-items: center; width: 34px; height: 30px; padding-right: 6px; background: var(--cs-color); color: var(--cs-ink); font-family: "Space Grotesk", sans-serif; font-size: 17px; font-weight: 800; clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%); border-radius: 6px 0 0 6px; } .cs-share { font-size: 12px; font-weight: 700; color: var(--text-3); white-space: nowrap; } .cs-value { font-family: "Space Grotesk", sans-serif; font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.01em; white-space: nowrap; } .cs-bar { display: block; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .cs-bar > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--cs-color); transition: width .6s cubic-bezier(.22, 1, .36, 1); } .cs-panel.has-active .cs-card:not(.is-active) { opacity: .5; } .cs-card.is-active { border-color: var(--cs-color); box-shadow: inset 0 0 0 1px var(--cs-color), 0 10px 22px -14px var(--cs-color); opacity: 1; } .cs-dist { grid-column: 1 / -1; display: flex; gap: 2px; height: 10px; border-radius: 99px; overflow: hidden; background: var(--surface-2); } .cs-dist > span { min-width: 3px; transition: flex-grow .6s ease; } @media (max-width: 1280px) { .cs-panel { grid-template-columns: 1fr; } .cs-total { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding: 18px 22px; } .cs-total-value { font-size: 38px; } } @media (max-width: 1100px) { .cs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 560px) { .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-value { font-size: 22px; } } /* Жами (Мактаб, МТТ, Тиббиёт) va yig'iladigan "Бошқалар" (app.js spLayout) */ .sp-table tbody tr.sp-subtotal > *, .sp-table tbody tr.sp-others > * { background-color: var(--surface-2); font-weight: 800; } .sp-table tbody tr.sp-subtotal > * { border-bottom: 2px solid var(--stroke); } .sp-table tbody tr.sp-subtotal th { color: var(--text-2); font-size: 12.5px; } .sp-table .sp-toggle { display: inline-flex; width: auto; min-height: 0; border-radius: 6px; box-shadow: none; text-align: left; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 800; cursor: pointer; } .sp-table .sp-toggle:hover { color: var(--accent); } .sp-caret { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--accent-bg); color: var(--accent); font-size: 11px; transition: transform .2s ease; } .sp-table .sp-toggle[aria-expanded="true"] .sp-caret { transform: rotate(90deg); } .sp-table tbody tr.sp-child th { padding-left: 40px; font-weight: 600; font-size: 13px; color: var(--text-2); } .sp-table tbody tr.sp-child td { font-size: 13px; } .sp-table tbody tr.sp-child[hidden] { display: none; } .sp-print .sp-caret { display: none; } .sp-table .sp-toggle:focus:not(:focus-visible) { outline: none; } /* Bitta ekranga sig'ishi uchun: torroq ekranlarda yanada ixchamroq (juda tor bo'lsa — gorizontal aylantirish qoladi). */ @media (max-width: 1500px) { .sp-table th, .sp-table td { padding: 7px 4px; } .sp-table thead th { font-size: 10px; } .sp-table .sp-h-group { font-size: 9.5px; } .sp-table tbody td, .sp-table tbody th { font-size: 12px; } .sp-table tbody tr.sp-total > * { font-size: 13px; } .sp-table .sp-h-main { width: 125px; padding-left: 10px; } .sp-table tbody th { padding-left: 10px; } .sp-table tbody tr.sp-child th { padding-left: 30px; } .sp-pill { width: 22px; height: 22px; font-size: 12px; } } /* Mahalla loginlari: "Yangi parol" tugmasi (mahalla-accounts.js) — kalit belgisi */ body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .mh-reset-pass-btn { --eco-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2215.5%22%20r%3D%224.5%22%2F%3E%3Cpath%20d%3D%22m10.7%2012.3%209.3-9.3M16%207l3%203M14%209l2%202%22%2F%3E%3C%2Fsvg%3E"); } /* Soft graphite dark mode: neutral surfaces, muted green accent, easy on the eyes. */ html[data-theme="dark"] body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .sidebar { background: #1d2024; border-color: var(--stroke); box-shadow: none; } html[data-theme="dark"] body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .sidebar-badge { color: var(--text); background: #ffffff08; border-color: var(--stroke); } html[data-theme="dark"] body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .sidebar-badge::before { background: var(--accent); box-shadow: 0 0 0 5px #8fcf9c14; } html[data-theme="dark"] body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .sidebar::after { color: var(--text-3); border-color: var(--stroke); background: #ffffff05; } html[data-theme="dark"] body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn { color: var(--text-2); } html[data-theme="dark"] body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn:hover { color: var(--text); background: #ffffff0a; border-color: transparent; } html[data-theme="dark"] body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .menu-btn.active { color: #15241a; background: var(--accent); border-color: transparent; box-shadow: none; } html[data-theme="dark"] body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hero { background: linear-gradient(115deg, #23272b, #262b2d); border-color: var(--stroke); color: var(--text); box-shadow: none; } html[data-theme="dark"] body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hero h1 { color: var(--text); } html[data-theme="dark"] body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hero p { color: var(--text-2); } html[data-theme="dark"] body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hero::before { background: radial-gradient(circle, #8fcf9c12, transparent 68%); } html[data-theme="dark"] body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .hero::after { background: linear-gradient(#ffffff04 1px, transparent 1px), linear-gradient(90deg, #ffffff04 1px, transparent 1px); background-size: 38px 38px; } html[data-theme="dark"] body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .card { box-shadow: none; } html[data-theme="dark"] body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .brand-logo { border-color: var(--stroke); box-shadow: none; } html[data-theme="dark"] body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .user-avatar, html[data-theme="dark"] body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table tr:nth-child(3n+2) .user-avatar, html[data-theme="dark"] body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .users-table tr:nth-child(3n) .user-avatar { color: var(--accent); background: #8fcf9c14; border-color: #8fcf9c2e; box-shadow: none; } html[data-theme="dark"] body:not(.gate-locked):has(#pageAdmin:not(.hidden)):has(.page-section.active:is([id^="pageAdmin"], #pageEsmaTestRegion)) .status-box.error { color: #e8959f; background: #e8959f12; border-color: #e8959f40; }