/* ── Inter font (must precede all other rules to be valid) ──────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); /* ═══════════════════════════════════════════════════════════════════ FTO PORTAL — RESTYLED VISUAL SYSTEM Dark = .dark on (default). Light fully supported. Structure, class names, selectors & JS unchanged — visual only. ═══════════════════════════════════════════════════════════════════ */ /* ── Reset & Base ───────────────────────────────────────────────── */ *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} :root{ /* Light theme (default when .dark absent) */ --bg: #f3f5fb; --bg2: #ffffff; --bg3: #eef1f9; --bg4: #e4e8f4; --bg5: #d7ddee; --border: #e6e9f4; --border2: #cdd4e6; --shadow: 0 1px 2px rgba(24,39,75,.05), 0 4px 14px -6px rgba(24,39,75,.08); --shadow-md: 0 10px 30px -10px rgba(24,39,75,.18), 0 2px 6px rgba(24,39,75,.06); --text: #131829; --text2: #545c76; --text3: #8c93ac; --blue: #3d63e6; --blue-bg: rgba(61,99,230,.10); --blue-light: rgba(61,99,230,.06); --green: #0fa85a; --green-bg:rgba(15,168,90,.11); --amber: #d97706; --amber-bg:rgba(217,119,6,.11); --red: #e0435a; --red-bg: rgba(224,67,90,.10); --purple: #7c3aed; --purple-bg:rgba(124,58,237,.10); --teal: #0891b2; --teal-bg: rgba(8,145,178,.11); /* Semantic tokens (map onto the palette above) */ --primary: var(--blue); --primary-bg: var(--blue-bg); --secondary: var(--purple); --accent: var(--teal); --success: var(--green); --danger: var(--red); --warning: var(--amber); /* Glass surface (solid in light, translucent in dark) */ --glass: var(--bg2); --glass-brd: var(--border); /* Radius scale */ --r: 9px; --rl: 13px; --rx: 18px; /* Spacing scale (4/8/12/16/24/32) */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.5; } /* Dark theme override (class applied to or ) — DEFAULT */ .dark{ --bg: #090b11; --bg2: #10131c; --bg3: #161a25; --bg4: #1d2231; --bg5: #262c3e; --border: rgba(255,255,255,.075); --border2: rgba(255,255,255,.145); --shadow: 0 1px 2px rgba(0,0,0,.45); --shadow-md: 0 20px 55px -16px rgba(0,0,0,.78); --text: #eaedf5; --text2: #98a0b5; --text3: #626b81; --blue: #7c8bff; --blue-bg: rgba(124,139,255,.15); --blue-light: rgba(124,139,255,.07); --green: #2ee6a0; --green-bg:rgba(46,230,160,.15); --amber: #fbbf24; --amber-bg:rgba(251,191,36,.15); --red: #fb7185; --red-bg: rgba(251,113,133,.15); --purple: #a78bfa; --purple-bg:rgba(167,139,250,.15); --teal: #22d3ee; --teal-bg: rgba(34,211,238,.15); --glass: rgba(255,255,255,.028); --glass-brd: rgba(255,255,255,.08); } html,body{height:100%;overflow:hidden} body{ background:var(--bg);color:var(--text); display:flex;flex-direction:column; letter-spacing:-.011em; transition:background-color .3s ease, color .25s ease; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } /* Ambient depth glows — dark only */ .dark body{ background: radial-gradient(1200px 620px at 8% -10%, rgba(124,139,255,.11), transparent 60%), radial-gradient(1000px 560px at 108% 2%, rgba(34,211,238,.06), transparent 55%), var(--bg); background-attachment:fixed; } .dark .landing{ background: radial-gradient(1200px 620px at 8% -10%, rgba(124,139,255,.11), transparent 60%), radial-gradient(1000px 560px at 102% 108%, rgba(46,230,160,.07), transparent 55%), var(--bg); } /* ── Global Nav ─────────────────────────────────────────────────── */ .global-nav{ display:flex;align-items:stretch;background:var(--bg2); border-bottom:1px solid var(--border);flex-shrink:0;height:50px; box-shadow:var(--shadow);backdrop-filter:blur(12px); transition:background-color .3s ease,border-color .3s ease; } .gnav-brand{ display:flex;align-items:center;padding:0 18px 0 14px; font-size:15px;font-weight:800;letter-spacing:-.4px;color:var(--blue); text-decoration:none;border-right:1px solid var(--border);flex-shrink:0;gap:6px; white-space:nowrap; } .gnav-btn{ flex:1;background:none;border:none;border-bottom:3px solid transparent; color:var(--text3);cursor:pointer;font-size:12.5px;font-weight:600; display:flex;align-items:center;justify-content:center;gap:6px; transition:color .16s ease,background-color .16s ease,border-color .16s ease; margin-bottom:-1px;text-decoration:none; } .gnav-btn:hover{color:var(--text2);background:var(--bg3)} .gnav-btn.active{color:var(--blue);border-bottom-color:var(--blue)} .gnav-btn.active.purple{color:var(--purple);border-bottom-color:var(--purple)} .gnav-btn.active.teal{color:var(--teal);border-bottom-color:var(--teal)} .gnav-emoji{font-size:16px} .gnav-right{display:flex;align-items:center;gap:2px;padding:0 10px;border-left:1px solid var(--border)} .theme-toggle{ background:none;border:1px solid var(--border);border-radius:20px; color:var(--text2);cursor:pointer;font-size:16px; width:32px;height:32px;display:flex;align-items:center;justify-content:center; transition:background-color .16s ease,border-color .16s ease,transform .16s ease; } .theme-toggle:hover{background:var(--bg3);border-color:var(--border2);transform:rotate(-12deg)} .global-nav .theme-toggle{align-self:center;margin:0 8px;flex:0 0 auto} .gnav-user{font-size:12px;color:var(--text3);padding:0 6px;white-space:nowrap} .gnav-logout{ background:none;border:1px solid var(--border);border-radius:var(--r); color:var(--text3);cursor:pointer;font-size:11.5px;padding:4px 9px; text-decoration:none;transition:all .15s; } .gnav-logout:hover{background:var(--red-bg);color:var(--red);border-color:var(--red)} /* ── Subtabs ─────────────────────────────────────────────────────── */ .subtabs{ display:flex;background:var(--bg2);border-bottom:1px solid var(--border); flex-shrink:0;overflow-x:auto;scrollbar-width:none;align-items:center; transition:background-color .3s ease,border-color .3s ease; } .dark .subtabs{background:rgba(14,17,25,.55);backdrop-filter:blur(12px)} .subtabs::-webkit-scrollbar{display:none} .stab{ background:none;border:none;border-bottom:2px solid transparent; color:var(--text3);cursor:pointer;font-size:12.5px;font-weight:500; padding:11px 14px;white-space:nowrap;transition:color .15s ease,border-color .15s ease;flex-shrink:0; text-decoration:none;display:inline-flex;align-items:center;gap:5px; } .stab:hover{color:var(--text2)} .stab.on{color:var(--blue);border-bottom-color:var(--blue);font-weight:600} .stab.on.teal{color:var(--teal);border-bottom-color:var(--teal)} .stab.on.purple{color:var(--purple);border-bottom-color:var(--purple)} /* Inner tabs */ .itabs{ display:flex;gap:2px;padding:10px 16px 0; border-bottom:1px solid var(--border); background:var(--bg2);flex-shrink:0; transition:background-color .3s ease,border-color .3s ease; } .dark .itabs{background:rgba(14,17,25,.45);backdrop-filter:blur(10px)} .itab{ background:none;border:none;border-bottom:2px solid transparent; color:var(--text3);cursor:pointer;font-size:12px;font-weight:500; padding:7px 13px;white-space:nowrap;transition:color .15s ease,border-color .15s ease;margin-bottom:-1px; } .itab:hover{color:var(--text2)} .itab.on{color:var(--blue);border-bottom-color:var(--blue);font-weight:600} /* ── App shell + Sidebar (hover-expand rail) ─────────────────────── */ body.app-shell{display:flex;flex-direction:row;height:100vh;height:100dvh;overflow:hidden} .sidebar{width:76px;flex-shrink:0;overflow:visible;background:transparent;border:none;z-index:20} .app-main{flex:1;min-width:0;height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column} .sidebar-inner{ position:fixed;left:0;top:0;bottom:0;width:76px;z-index:60; display:flex;flex-direction:column; background:var(--bg2);border-right:1px solid var(--border); overflow:hidden; transition:width .34s cubic-bezier(.22,1,.36,1), box-shadow .34s ease, background-color .3s ease; } .dark .sidebar-inner{background:rgba(13,16,24,.82);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)} .sidebar-inner:hover{width:256px;box-shadow:28px 0 70px -24px rgba(0,0,0,.55)} .dark .sidebar-inner:hover{box-shadow:28px 0 80px -24px rgba(0,0,0,.75)} .side-brand{ display:flex;align-items:center;height:68px;padding:0;gap:0; text-decoration:none;border-bottom:1px solid var(--border);flex-shrink:0; } .side-brand-mark{ width:34px;height:34px;border-radius:11px;flex-shrink:0;margin-left:21px; background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff;font-weight:900;font-size:18px; display:flex;align-items:center;justify-content:center;letter-spacing:-1px; box-shadow:0 8px 20px -6px color-mix(in srgb,var(--primary) 65%,transparent); } .side-brand-text{font-size:14.5px;font-weight:700;color:var(--text);letter-spacing:-.2px;white-space:nowrap;margin-left:12px} .side-brand-text b{color:var(--primary);font-weight:800} .side-nav{display:flex;flex-direction:column;gap:4px;padding:12px 13px;flex:1;overflow-y:auto;overflow-x:hidden} .side-link{ display:flex;align-items:center;height:46px;padding:0;gap:0;border-radius:12px; text-decoration:none;color:var(--text2);font-size:13.5px;font-weight:600; transition:background-color .16s ease,color .16s ease; position:relative;white-space:nowrap;overflow:hidden; } .side-link:hover{background:var(--bg3);color:var(--text)} .side-link.on{color:var(--primary);background:linear-gradient(90deg,color-mix(in srgb,currentColor 15%,transparent),transparent)} .side-link.on.purple{color:var(--purple)} .side-link.on.teal{color:var(--teal)} .side-link.on::before{ content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px; border-radius:0 3px 3px 0;background:currentColor; } .side-ic{font-size:18px;width:48px;min-width:48px;text-align:center;display:flex;align-items:center;justify-content:center;flex-shrink:0} .side-lbl{opacity:0;white-space:nowrap;transition:opacity .18s ease} .sidebar-inner:hover .side-lbl{opacity:1;transition-delay:.08s} .side-foot{display:flex;align-items:center;gap:8px;padding:12px 13px;border-top:1px solid var(--border);flex-shrink:0} .side-foot .theme-toggle{min-width:48px;width:48px;height:38px;border:none;background:transparent;margin:0;font-size:17px;border-radius:11px} .side-foot .theme-toggle:hover{background:var(--bg3)} .side-user{flex:1;min-width:0;line-height:1.25;display:block} a.side-user:hover .side-user-name{color:var(--primary)} .side-user-name{font-size:12.5px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .side-user-role{font-size:10.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px} .side-logout{ width:34px;height:34px;border-radius:10px;flex-shrink:0; display:flex;align-items:center;justify-content:center;text-decoration:none; color:var(--text3);border:1px solid var(--border);font-size:16px;transition:all .14s; } .side-logout:hover{background:var(--red-bg);color:var(--red);border-color:var(--red)} /* ── Page Layout ────────────────────────────────────────────────── */ .page{display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0} .scroll{flex:1;overflow-y:auto;padding:26px 28px;-webkit-overflow-scrolling:touch} .twrap{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:0 22px 16px} .tab-pane{padding:24px 4px} /* ── KPI Cards ──────────────────────────────────────────────────── */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:22px} .kpi{ background:var(--glass);border:1px solid var(--glass-brd); border-left:3px solid var(--blue);border-radius:16px; padding:15px 17px;box-shadow:var(--shadow); -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2); transition:transform .18s ease,box-shadow .18s ease,background-color .3s ease,border-color .3s ease; } .kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} .kpi.g{border-left-color:var(--green)}.kpi.a{border-left-color:var(--amber)} .kpi.r{border-left-color:var(--red)}.kpi.p{border-left-color:var(--purple)} .kpi.t{border-left-color:var(--teal)} .kpi-v{font-size:25px;font-weight:800;line-height:1;letter-spacing:-.03em} .kpi-l{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-top:6px;font-weight:600} /* ── Filters Bar ─────────────────────────────────────────────────── */ .filters-bar{ display:flex;align-items:center;gap:8px;padding:11px 22px; border-bottom:1px solid var(--border);background:var(--bg2); flex-shrink:0;flex-wrap:wrap;transition:background-color .3s ease,border-color .3s ease; } .dark .filters-bar{background:rgba(14,17,25,.45);backdrop-filter:blur(10px)} .filters-bar2{padding:8px 22px;gap:8px;background:var(--bg3)} .dark .filters-bar2{background:rgba(20,23,31,.5)} .filter-label{font-size:12px;color:var(--text3);white-space:nowrap;font-weight:500} .srch{position:relative;flex:1;min-width:180px} .srch svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.45;pointer-events:none;color:var(--text2)} .srch input{ width:100%;background:var(--glass);border:1.5px solid var(--glass-brd); color:var(--text);padding:8px 11px 8px 32px;border-radius:10px; font-size:13px;outline:none;transition:border-color .15s,box-shadow .15s,background-color .15s; } .srch input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light);background:var(--bg2)} .srch input::placeholder{color:var(--text3)} .sel{ background:var(--glass);border:1.5px solid var(--glass-brd);color:var(--text); padding:8px 9px;border-radius:10px;font-size:13px;outline:none;cursor:pointer; transition:border-color .15s,box-shadow .15s; } .sel:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light)} .finput-sm{ background:var(--glass);border:1.5px solid var(--glass-brd);color:var(--text); padding:7px 9px;border-radius:10px;font-size:12.5px;outline:none;width:130px; transition:border-color .15s,box-shadow .15s; } .finput-sm:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light)} /* ── Multi-select dropdown (checkbox filters) ────────────────────── */ .msel{position:relative} .msel-btn{ background:var(--glass);border:1.5px solid var(--glass-brd);color:var(--text); padding:8px 10px;border-radius:10px;font-size:13px;outline:none;cursor:pointer; display:inline-flex;align-items:center;gap:7px;max-width:260px;min-height:36px; transition:border-color .15s,box-shadow .15s,background-color .15s; } .msel-btn:focus,.msel.open .msel-btn{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light)} .msel-btn.active{border-color:var(--blue);color:var(--blue);font-weight:600} .msel-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .msel-arrow{font-size:9px;color:var(--text3);flex-shrink:0} .msel-pop{ display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:120; width:min(460px,calc(100vw - 32px));min-width:240px;max-width:520px;max-height:360px;overflow-y:auto; background:var(--bg2);border:1px solid var(--border2);border-radius:12px; box-shadow:var(--shadow-md);padding:8px; } .dark .msel-pop{background:#141824} .msel.open .msel-pop{display:block;animation:fadeIn .15s ease} .msel-search-wrap{ position:sticky;top:-8px;z-index:2;background:var(--bg2); padding:8px 0 9px;border-bottom:1px solid var(--border);margin-bottom:6px; } .dark .msel-search-wrap{background:#141824} .msel-search{ width:100%;background:var(--glass);border:1.5px solid var(--glass-brd);color:var(--text); border-radius:9px;padding:9px 11px;font-size:13px;outline:none; } .msel-search:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light)} .msel-search-meta{font-size:11px;color:var(--text3);padding:6px 3px 0} .msel-empty{padding:14px 10px;color:var(--text3);font-size:12.5px;text-align:center} .msel-hidden{display:none!important} .msel-opt{ display:flex;align-items:flex-start;gap:9px;padding:9px 10px;border-radius:8px; font-size:13px;line-height:1.3;color:var(--text);cursor:pointer;white-space:normal; overflow-wrap:anywhere;word-break:break-word; } .msel-opt:hover{background:var(--bg3)} .msel-opt input{accent-color:var(--blue);flex-shrink:0;cursor:pointer;margin-top:2px} .msel-clear{ display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer; padding:7px 10px;border-radius:8px;font-size:12px;color:var(--text3); border-bottom:1px solid var(--border);border-radius:8px 8px 0 0;margin-bottom:4px; } .msel-clear:hover{background:var(--bg3);color:var(--red)} .cnt{font-size:12px;color:var(--text3);margin-left:auto;white-space:nowrap;font-weight:500} .date-col{min-width:118px;width:118px;white-space:nowrap} /* ── Buttons ─────────────────────────────────────────────────────── */ .btn{ background:var(--glass);border:1.5px solid var(--glass-brd);color:var(--text2); padding:7px 13px;border-radius:10px;cursor:pointer;font-size:12.5px; font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:5px; transition:background-color .15s,color .15s,border-color .15s,transform .15s;white-space:nowrap; } .btn:hover{background:var(--bg4);color:var(--text);border-color:var(--border2)} .btn:active{transform:translateY(1px)} .btn-primary{ background:linear-gradient(180deg,var(--blue),color-mix(in srgb,var(--blue) 82%,#000)); border:1.5px solid transparent;color:#fff; padding:8px 18px;border-radius:10px;cursor:pointer; font-size:13px;font-weight:600;text-decoration:none; display:inline-flex;align-items:center;gap:6px;white-space:nowrap; box-shadow:0 8px 22px -8px color-mix(in srgb,var(--blue) 70%,transparent); transition:filter .15s,transform .15s,box-shadow .15s; } .btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 12px 28px -10px color-mix(in srgb,var(--blue) 75%,transparent)} .btn-primary:active{transform:translateY(0)} .btn-danger{background:var(--glass);border-color:var(--red);color:var(--red);box-shadow:none} .btn-danger:hover{background:var(--red-bg);filter:none;transform:translateY(-1px)} .btn-success{background:linear-gradient(180deg,var(--green),color-mix(in srgb,var(--green) 82%,#000));border-color:transparent;color:#fff;box-shadow:0 8px 22px -8px color-mix(in srgb,var(--green) 65%,transparent)} .btn-success:hover{filter:brightness(1.07);transform:translateY(-1px)} /* ── Table ───────────────────────────────────────────────────────── */ table{width:100%;border-collapse:separate;border-spacing:0 7px;font-size:13px} thead th{ background:var(--bg3);color:var(--text3);text-align:left; font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:600; padding:10px 14px;border-bottom:1px solid var(--border); white-space:nowrap;position:sticky;top:0;z-index:1; } /* Column alignment: .tc centers one column (th+td); table.tstat centers every column except the first (name/city) so values sit exactly under their headers in numeric grids. */ th.tc,td.tc{text-align:center} table.tstat th:not(:first-child),table.tstat td:not(:first-child){text-align:center} .dark thead th{background:rgba(11,13,19,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} thead th a{color:inherit;text-decoration:none} thead th.srt{color:var(--blue)} tbody tr{ cursor:pointer;background:var(--glass); box-shadow:inset 0 0 0 1px var(--glass-brd); transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease; } tbody tr:nth-child(even){background:var(--glass)} tbody td{padding:12px 14px;border-bottom:none;vertical-align:middle} tbody td:first-child{border-radius:12px 0 0 12px} tbody td:last-child{border-radius:0 12px 12px 0} tbody tr:hover{background:var(--blue-light);transform:translateX(4px);box-shadow:inset 0 0 0 1px var(--border2),-6px 0 22px -14px rgba(0,0,0,.55)} tbody tr:hover td{background:transparent} .archived-row{opacity:.5} .archived-row:hover{opacity:.75} .empty-state{ text-align:center;padding:56px 20px;color:var(--text3); font-size:14px;display:flex;flex-direction:column;align-items:center;gap:8px; } .empty-state .es-icon{font-size:40px;line-height:1;opacity:.8} .empty-state .es-title{font-size:15px;font-weight:700;color:var(--text2)} .empty-state .es-hint{font-size:12.5px;color:var(--text3);max-width:340px} td > .empty-state{width:100%} tbody td.td-nowrap{white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis} /* ── Pagination ──────────────────────────────────────────────────── */ .pager{ display:flex;align-items:center;justify-content:space-between; padding:11px 22px;border-top:1px solid var(--border); background:var(--bg2);flex-shrink:0;transition:background-color .3s ease,border-color .3s ease; } .dark .pager{background:rgba(14,17,25,.45);backdrop-filter:blur(10px)} .pager-info{font-size:12px;color:var(--text3);font-weight:500} .pager-btns{display:flex;gap:4px} .pgb{ background:var(--glass);border:1px solid var(--glass-brd);color:var(--text2); cursor:pointer;padding:6px 11px;border-radius:9px;font-size:12px; text-decoration:none;transition:all .12s; } .pgb:hover{background:var(--bg4);color:var(--text)} .pgb.on{background:var(--blue-bg);border-color:var(--blue);color:var(--blue);font-weight:700} /* ── Badges ──────────────────────────────────────────────────────── */ .badge,.b{ display:inline-flex;align-items:center;padding:3px 9px; border:1px solid var(--glass-brd);border-radius:8px; font-size:11px;font-weight:600;white-space:nowrap; } .bg{background:var(--green-bg);color:var(--green);border-color:color-mix(in srgb,var(--green) 30%,transparent)} .ba{background:var(--amber-bg);color:var(--amber);border-color:color-mix(in srgb,var(--amber) 30%,transparent)} .br{background:var(--red-bg);color:var(--red);border-color:color-mix(in srgb,var(--red) 30%,transparent)} .bb{background:var(--blue-bg);color:var(--blue);border-color:color-mix(in srgb,var(--blue) 30%,transparent)} .bd{background:var(--bg5);color:var(--text3);border-color:transparent} .bp{background:var(--purple-bg);color:var(--purple);border-color:color-mix(in srgb,var(--purple) 30%,transparent)} .bt{background:var(--teal-bg);color:var(--teal);border-color:color-mix(in srgb,var(--teal) 30%,transparent)} .tag-soft{font-size:10px;color:var(--text3);background:var(--bg4);padding:1px 5px;border-radius:5px;font-weight:600;vertical-align:middle} /* ── Value Pills ─────────────────────────────────────────────────── */ .wp{ display:inline-flex;align-items:center;justify-content:center; min-width:30px;padding:2px 7px;border-radius:8px;font-size:13px;font-weight:700; } .wp.b{background:var(--blue-bg);color:var(--blue)} .wp.g{background:var(--green-bg);color:var(--green)} .wp.a{background:var(--amber-bg);color:var(--amber)} .wp.r{background:var(--red-bg);color:var(--red)} .wp.p{background:var(--purple-bg);color:var(--purple)} .wp.t{background:var(--teal-bg);color:var(--teal)} /* ── Forms ───────────────────────────────────────────────────────── */ .form-card{ background:var(--glass);border:1px solid var(--glass-brd); border-radius:var(--rl);padding:26px;max-width:920px;box-shadow:var(--shadow); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); transition:background-color .3s ease,border-color .3s ease; } .form-title{font-size:18px;font-weight:700;margin-bottom:22px;letter-spacing:-.03em} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .span2{grid-column:span 2} .field-group{display:flex;flex-direction:column;gap:6px} .field-label{font-size:11.5px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.4px} .finput{ background:var(--glass);border:1.5px solid var(--glass-brd);color:var(--text); padding:9px 12px;border-radius:10px;font-size:13px;outline:none; width:100%;transition:border-color .15s,box-shadow .15s,background-color .15s; } .finput:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light);background:var(--bg2)} textarea.finput{resize:vertical;min-height:80px} .form-actions{ display:flex;gap:10px;align-items:center;margin-top:22px; padding-top:22px;border-top:1px solid var(--border);flex-wrap:wrap; } /* ── Landing Page ────────────────────────────────────────────────── */ .landing{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;flex:1;width:100%;min-width:0} .landing-nav{ display:flex;align-items:center;background:var(--bg2); border-bottom:1px solid var(--border);height:52px; padding:0 24px;gap:12px;flex-shrink:0;box-shadow:var(--shadow); } .landing-brand{font-size:17px;font-weight:800;color:var(--blue);letter-spacing:-.4px;display:flex;align-items:center;gap:8px} .landing-nav-right{margin-left:auto;display:flex;align-items:center;gap:10px} .landing-topbar{ display:flex;align-items:center;justify-content:space-between; height:58px;padding:0 28px;background:var(--bg2); border-bottom:1px solid var(--border);flex-shrink:0;box-shadow:var(--shadow); transition:background-color .3s ease,border-color .3s ease; } .dark .landing-topbar{background:rgba(14,17,25,.6);backdrop-filter:blur(14px)} .landing-topbar-right{display:flex;align-items:center;gap:12px} .lt-user{font-size:13px;color:var(--text2);font-weight:600} .landing-body{flex:1;overflow-y:auto;padding:30px 30px 44px} .landing-hero{text-align:center;padding-bottom:40px} /* Green→teal gradient hero banner (premium) */ .hero-banner{ position:relative;overflow:hidden;border-radius:26px;margin-bottom:30px; padding:44px 44px 48px;isolation:isolate; background: linear-gradient(180deg,rgba(255,255,255,.14),transparent 32%), linear-gradient(125deg,#0ea371 0%,#0fa85a 40%,#0a9284 70%,#0891b2 100%); box-shadow: 0 24px 60px -22px rgba(15,168,90,.5), 0 8px 24px -12px rgba(8,145,178,.4), inset 0 1px 0 rgba(255,255,255,.22); } .hero-banner::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px); background-size:22px 22px;opacity:.35; -webkit-mask:linear-gradient(115deg,#000,transparent 62%);mask:linear-gradient(115deg,#000,transparent 62%); } .hero-blob{position:absolute;border-radius:50%;filter:blur(10px);opacity:.5;z-index:-1} .hero-blob-1{width:300px;height:300px;top:-130px;right:-70px; background:radial-gradient(circle,rgba(255,255,255,.5),transparent 70%); animation:heroFloat 15s ease-in-out infinite} .hero-blob-2{width:360px;height:360px;bottom:-190px;left:-90px; background:radial-gradient(circle,rgba(30,230,170,.6),transparent 70%); animation:heroFloat 19s ease-in-out infinite reverse} .hero-video{position:absolute;right:14px;bottom:0;height:96%;width:44%; object-fit:contain;object-position:right bottom;z-index:0;pointer-events:none; filter:drop-shadow(0 10px 24px rgba(0,0,0,.25)); opacity:1;transition:opacity .9s ease} .hero-video.hv-hidden{opacity:0} canvas.hero-video{width:auto;height:96%} .hero-content{position:relative;z-index:1;max-width:780px} .hero-eyebrow{ display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:1px; text-transform:uppercase;color:#eafff4;background:rgba(255,255,255,.16); padding:6px 13px;border-radius:20px;margin-bottom:18px;backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.2); } .hero-title{font-size:37px;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1.16;text-shadow:0 2px 20px rgba(0,0,0,.14)} .hero-version{background:var(--blue-bg);color:var(--blue);padding:0 9px;border-radius:9px;font-weight:800} .hero-banner .hero-version{background:rgba(255,255,255,.24);color:#fff} .landing-brand .hero-version{font-size:13px;padding:2px 9px} .hero-sub{color:rgba(255,255,255,.92);margin-top:15px;font-size:15px;letter-spacing:.2px} .hero-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px} .hero-chip{ font-size:12.5px;font-weight:600;color:#fff; background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.24); padding:8px 14px;border-radius:11px;backdrop-filter:blur(4px); transition:background-color .15s,transform .15s; } .hero-chip:hover{background:rgba(255,255,255,.24);transform:translateY(-1px)} .status-head{ font-size:13px;font-weight:700;color:var(--text3); text-transform:uppercase;letter-spacing:.8px;margin:10px 0 16px; display:flex;align-items:center;gap:9px; } .status-head::before{ content:"";width:9px;height:9px;border-radius:50%; background:var(--green);box-shadow:0 0 0 4px var(--green-bg); } .landing .status-card{border-left:3px solid var(--green)} .section-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:30px} .section-card{ position:relative;background:var(--glass);border:1px solid var(--glass-brd);border-radius:20px; padding:28px 24px;text-decoration:none;color:var(--text); display:flex;flex-direction:column;gap:12px;overflow:hidden; box-shadow:var(--shadow);cursor:pointer; -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease,border-color .22s ease,background-color .3s ease; } .section-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--border2);transition:opacity .22s} .section-card:hover{transform:translateY(-5px);border-color:var(--border2);box-shadow:var(--shadow-md)} .section-card.blue::before{background:var(--blue)} .section-card.purple::before{background:var(--purple)} .section-card.teal::before{background:var(--teal)} .section-card.blue:hover{box-shadow:0 26px 55px -22px color-mix(in srgb,var(--blue) 55%,transparent),var(--shadow-md)} .section-card.purple:hover{box-shadow:0 26px 55px -22px color-mix(in srgb,var(--purple) 55%,transparent),var(--shadow-md)} .section-card.teal:hover{box-shadow:0 26px 55px -22px color-mix(in srgb,var(--teal) 55%,transparent),var(--shadow-md)} .sc-icon{font-size:34px;line-height:1} .sc-title{font-size:19px;font-weight:700;letter-spacing:-.03em} .sc-desc{font-size:13px;color:var(--text2);line-height:1.65;flex:1} .sc-footer{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;font-weight:600} .sc-arrow{font-size:18px;color:var(--text3);align-self:flex-end;transition:transform .2s} .section-card:hover .sc-arrow{transform:translateX(3px);color:var(--text2)} .status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:30px} .status-card{ background:var(--glass);border:1px solid var(--glass-brd);border-radius:16px; padding:20px 22px;display:flex;flex-direction:column;gap:7px; box-shadow:var(--shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); transition:transform .18s ease,box-shadow .18s ease,background-color .3s ease,border-color .3s ease; } .status-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} .sc-stat-icon{font-size:26px;line-height:1;margin-bottom:2px} .sc-stat-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;font-weight:600} .sc-stat-value{font-size:23px;font-weight:800;letter-spacing:-.03em;color:var(--text);line-height:1.15} .sc-stat-value.ok{color:var(--green)} .sc-stat-value.err{color:var(--red)} .sc-stat-sub{font-size:11.5px;color:var(--text3)} .sc-stat-sub.ok{color:var(--green)} .sc-stat-sub.err{color:var(--red)} /* ── Login ───────────────────────────────────────────────────────── */ .login-wrap{display:flex;align-items:center;justify-content:center;flex:1;padding:20px;background:var(--bg)} .login-box{ background:var(--glass);border:1px solid var(--glass-brd); border-radius:20px;padding:38px 34px;width:100%;max-width:400px; box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); } .login-logo{font-size:44px;text-align:center;margin-bottom:10px} .login-title{font-size:21px;font-weight:800;text-align:center;margin-bottom:5px;letter-spacing:-.03em} .login-sub{font-size:13px;color:var(--text3);text-align:center;margin-bottom:26px} /* ── Alerts ──────────────────────────────────────────────────────── */ .alert{padding:11px 14px;border-radius:10px;font-size:13px;margin-bottom:14px;display:flex;align-items:center;gap:8px;font-weight:500} .alert.err{background:var(--red-bg);border:1px solid color-mix(in srgb,var(--red) 40%,transparent);color:var(--red)} .alert.ok{background:var(--green-bg);border:1px solid color-mix(in srgb,var(--green) 40%,transparent);color:var(--green)} .alert.info{background:var(--blue-bg);border:1px solid color-mix(in srgb,var(--blue) 40%,transparent);color:var(--blue)} /* ── Detail Page ─────────────────────────────────────────────────── */ .detail-grid{display:grid;grid-template-columns:1fr 360px;gap:20px} .detail-main{ background:var(--glass);border:1px solid var(--glass-brd); border-radius:var(--rl);padding:26px;box-shadow:var(--shadow); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); } .detail-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px;flex-wrap:wrap;gap:12px} .detail-number{font-size:23px;font-weight:800;letter-spacing:-.03em} .detail-cp{color:var(--text2);font-size:15px;margin-top:3px} .detail-badges{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .detail-fields{border:1px solid var(--border);border-radius:12px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr} .df-row{padding:11px 14px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:3px;background:var(--bg2)} .dark .df-row{background:transparent} .df-row:nth-child(even){background:var(--bg3)} .dark .df-row:nth-child(even){background:rgba(255,255,255,.02)} .df-full{grid-column:span 2} .df-label{font-size:11px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.4px} .df-val{font-size:13.5px;color:var(--text);font-weight:500} .detail-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap} .detail-history{ background:var(--glass);border:1px solid var(--glass-brd); border-radius:var(--rl);padding:20px; overflow-y:auto;max-height:calc(100vh - 200px);box-shadow:var(--shadow); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); } .history-title{font-size:12px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px} .history-list{display:flex;flex-direction:column;gap:8px} .history-item{background:var(--bg3);border-radius:10px;padding:11px 13px;border:1px solid var(--border)} .dark .history-item{background:rgba(255,255,255,.02)} .hi-meta{display:flex;align-items:center;gap:7px;margin-bottom:6px;font-size:11.5px} .hi-author{font-weight:700;color:var(--text)} .hi-ts{color:var(--text3);flex:1;font-size:11px} .hi-field{font-size:12px;display:flex;flex-wrap:wrap;gap:5px;align-items:center} .hi-fname{color:var(--text3);font-style:italic} .hi-old{color:var(--red);text-decoration:line-through;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hi-new{color:var(--green);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ── Table Card ──────────────────────────────────────────────────── */ .table-card{ background:var(--glass);border:1px solid var(--glass-brd); border-radius:var(--rl);overflow-x:auto;overflow-y:hidden;box-shadow:var(--shadow); -webkit-overflow-scrolling:touch; -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); transition:background-color .3s ease,border-color .3s ease; } .table-card table{padding:0 14px 12px} .table-card table thead th{top:0} /* ── B2B Weekly ──────────────────────────────────────────────────── */ .b2b-hint{font-size:12px;color:var(--text3);padding:6px 0 12px;font-style:italic} .b2b-cell.editable{cursor:pointer} .b2b-cell.editable:hover td{background:var(--blue-light)!important} .wcell.editable{cursor:pointer;transition:background .12s} .wcell.editable:hover{background:var(--primary-bg)!important;box-shadow:inset 0 0 0 1px var(--primary)} .b2b-meta{font-size:11px;color:var(--text3);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .auto-tag{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--teal);background:var(--teal-bg);padding:1px 4px;border-radius:4px;vertical-align:middle} /* ── Weekly FWA surveys ─────────────────────────────────────────── */ .itabs{overflow-x:auto;scrollbar-width:none} .itabs::-webkit-scrollbar{display:none} .fwa-pane-head{ display:flex;align-items:center;justify-content:space-between;gap:12px; margin-bottom:14px; } .fwa-pane-title{font-size:14px;font-weight:700;color:var(--text)} .fwa-summary-table{min-width:680px} .fwa-summary-table .fwa-city-row{cursor:default} .fwa-summary-table .fwa-city-row.open{ background:var(--blue-light);box-shadow:inset 0 0 0 1px var(--border2); } .fwa-city-button{ display:inline-flex;align-items:center;gap:9px;width:100%; background:none;border:none;color:var(--text);cursor:pointer; font:inherit;text-align:left;padding:0;min-height:26px; } .fwa-city-button:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:5px} .fwa-chevron{ width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center; color:var(--text3);font-size:20px;line-height:1;flex:0 0 18px; transition:transform .16s ease,color .16s ease; } .fwa-city-row.open .fwa-chevron{transform:rotate(90deg);color:var(--blue)} .fwa-detail-row[hidden]{display:none} .fwa-summary-table .fwa-detail-row, .fwa-summary-table .fwa-detail-row:hover{ cursor:default;background:transparent;box-shadow:none;transform:none; } .fwa-summary-table .fwa-detail-row > td{ padding:0 14px 18px;border-radius:0!important;background:transparent; } .fwa-city-detail{ border-top:1px solid var(--border);padding:16px 2px 2px; } .fwa-detail-toolbar{ display:flex;align-items:center;justify-content:space-between;gap:12px; margin-bottom:12px; } .fwa-detail-heading{display:flex;align-items:baseline;gap:9px;white-space:nowrap} .fwa-detail-heading strong{font-size:13px} .fwa-detail-heading span{font-size:11px;color:var(--text3)} .fwa-detail-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap} .fwa-search{width:240px} .fwa-status-filter{min-width:145px} .fwa-add-btn{padding:7px 13px;font-size:12.5px} .fwa-detail-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .fwa-detail-table{ min-width:960px;border-collapse:collapse;border-spacing:0;padding:0!important; table-layout:fixed;font-size:12.5px; } .fwa-detail-table thead th{ position:static;background:var(--bg3);padding:9px 11px;text-align:left; } .fwa-detail-table th:nth-child(1){width:150px} .fwa-detail-table th:nth-child(2){width:130px} .fwa-detail-table th:nth-child(3){width:270px} .fwa-detail-table th:nth-child(4){width:135px} .fwa-detail-table th:nth-child(5){width:auto} .fwa-detail-table .fwa-actions-head{width:76px} .fwa-detail-table tbody tr, .fwa-detail-table tbody tr:nth-child(even), .fwa-detail-table tbody tr:hover{ cursor:default;background:transparent;box-shadow:none;transform:none; } .fwa-detail-table tbody td{ padding:12px 11px;border-bottom:1px solid var(--border); border-radius:0!important;vertical-align:top;background:transparent; overflow-wrap:anywhere;word-break:break-word; } .fwa-detail-table tbody tr:last-child td{border-bottom:none} .fwa-group-cell{ background:color-mix(in srgb,var(--bg3) 72%,transparent)!important; border-right:1px solid var(--border); } .fwa-manager-cell strong{font-size:12.5px} .fwa-site-number{ display:inline-block;font-family:'JetBrains Mono',ui-monospace,monospace; color:var(--blue);font-size:12px;font-weight:600; } .fwa-address{color:var(--text);font-weight:600;line-height:1.4} .fwa-contact{color:var(--text2);font-size:11.5px;line-height:1.45;margin-top:5px} .fwa-status{ display:inline-flex;align-items:center;border-radius:6px;padding:4px 7px; font-size:10.5px;font-weight:700;white-space:nowrap; } .fwa-status.approved{color:var(--green);background:var(--green-bg)} .fwa-status.proposal{color:var(--amber);background:var(--amber-bg)} .fwa-status.refused{color:var(--red);background:var(--red-bg)} .fwa-comment{color:var(--text2);white-space:pre-wrap;line-height:1.45} .fwa-meta{font-size:10.5px;color:var(--text3);margin-top:6px} .fwa-muted{color:var(--text3)} .fwa-actions-cell{width:76px} .fwa-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px} .fwa-icon-btn{ width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--border);border-radius:7px;background:transparent; color:var(--text2);cursor:pointer;font-size:15px;line-height:1; transition:background .14s,color .14s,border-color .14s; } .fwa-icon-btn:hover{background:var(--blue-bg);border-color:var(--blue);color:var(--blue)} .fwa-icon-btn.danger:hover{background:var(--red-bg);border-color:var(--red);color:var(--red)} .fwa-empty{ padding:28px 16px;text-align:center;color:var(--text3);font-size:12.5px; border-top:1px solid var(--border); } .fwa-modal-box{max-width:760px} /* ── Quality Check ───────────────────────────────────────────────── */ .qc-section{ background:var(--glass);border:1px solid var(--glass-brd); border-radius:var(--rl);padding:20px;margin-bottom:16px;box-shadow:var(--shadow); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); } .qc-title{font-size:13.5px;font-weight:700;margin-bottom:12px} .qc-group{margin-bottom:14px} .qc-group-key{font-size:11px;color:var(--text3);margin-bottom:6px;font-weight:600} .qc-item{ display:flex;gap:14px;padding:9px 12px;background:var(--bg3); border-radius:10px;margin-bottom:5px;text-decoration:none;color:var(--text); border:1px solid var(--border);transition:background-color .12s,border-color .12s,transform .12s; } .dark .qc-item{background:rgba(255,255,255,.02)} .qc-item:hover{background:var(--blue-light);border-color:var(--blue);transform:translateX(3px)} .qc-num{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;color:var(--blue);white-space:nowrap} .qc-cp{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .qc-bin{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;color:var(--text2);white-space:nowrap} .qc-bin.qc-err{color:var(--red);font-weight:700} .qc-reason{font-size:11.5px;color:var(--red);white-space:nowrap} .qc-city{font-size:11.5px;color:var(--text3);white-space:nowrap} .qc-city-summary{padding-bottom:12px} .qc-mini-wrap{overflow-x:auto} .qc-mini-table{min-width:620px;border-spacing:0 5px;font-size:12.5px} .qc-mini-table th,.qc-mini-table td{padding:8px 10px} .qc-mini-table th:first-child,.qc-mini-table td:first-child{text-align:left} .qc-mini-table tbody td:first-child{font-weight:600;color:var(--text)} .qc-mini-table tbody td strong{color:var(--red)} /* Export */ .export-form{padding:6px 0} .export-cols{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px} .export-col-check{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--text2);cursor:pointer;padding:5px 9px;border-radius:8px} .export-col-check:hover{background:var(--bg3)} /* ── Charts ──────────────────────────────────────────────────────── */ .charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px} .chart-card{ background:var(--glass);border:1px solid var(--glass-brd); border-radius:var(--rl);padding:20px;box-shadow:var(--shadow); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); transition:background-color .3s ease,border-color .3s ease; } .chart-title{font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px} .hbar-row{display:flex;align-items:center;gap:9px;margin-bottom:7px} .hbar-label{font-size:12px;color:var(--text2);width:130px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0} .hbar-track{flex:1;height:18px;background:var(--bg4);border-radius:6px;position:relative;overflow:hidden} .hbar-fill{height:100%;position:absolute;left:0;top:0;border-radius:6px;transition:width .5s cubic-bezier(.22,1,.36,1)} .hbar-val{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:700;color:var(--text2)} .donut{width:96px;height:96px;border-radius:50%;flex-shrink:0; -webkit-mask:radial-gradient(circle 26px at center,transparent 98%,#000 100%); mask:radial-gradient(circle 26px at center,transparent 98%,#000 100%);} .pie-wrap{display:flex;align-items:center;gap:18px;justify-content:center;padding:8px 0} .pie-leg{display:flex;flex-direction:column;gap:8px} .pie-row{display:flex;align-items:center;gap:8px;font-size:12.5px} .pie-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0} .pie-v{color:var(--text3);margin-left:auto;padding-left:10px;font-weight:700} .line-chart{height:100px;display:flex;align-items:flex-end;gap:2px;overflow-x:auto;padding-top:6px} .lc-col{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;min-width:32px} .lc-bar{width:22px;border-radius:4px 4px 0 0;min-height:2px;transition:height .4s cubic-bezier(.22,1,.36,1)} .lc-label{font-size:9px;color:var(--text3);text-align:center;line-height:1.2} .lc-val{font-size:9px;color:var(--text3)} .stack{width:24px;display:flex;flex-direction:column;justify-content:flex-end;border-radius:4px 4px 0 0;overflow:hidden} .stack span{display:block;width:100%;min-height:0} /* ── Admin Panel ─────────────────────────────────────────────────── */ .admin-grid{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start} .admin-users-table tbody tr{cursor:default} .admin-users-table tbody tr:hover{background:var(--blue-light);transform:none} .admin-users-table tbody tr:hover td{background:transparent} .admin-users-table td{vertical-align:middle} .admin-users-table form{margin:0} .row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .admin-create-grid{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px;align-items:end} .admin-create-grid .btn-primary{height:38px} .activity-card{padding:16px;overflow-x:auto;overflow-y:visible} .activity-card .chart-title{position:sticky;left:0;width:max-content;max-width:100%;background:transparent} .activity-card table{width:max-content;min-width:100%;table-layout:auto;padding:0;border-spacing:0 6px} .activity-table th,.activity-table td{ font-size:12px;line-height:1.35;vertical-align:top;white-space:normal; overflow-wrap:anywhere;word-break:break-word; } .activity-table th{white-space:normal} .activity-table .num{width:70px;text-align:center} .activity-time{width:132px;color:var(--text3);font-variant-numeric:tabular-nums} .activity-user{width:160px} .activity-type{width:150px} .activity-section{width:150px;color:var(--text3)} .activity-detail{white-space:normal;overflow-wrap:anywhere;word-break:break-word;color:var(--text2);min-width:180px;max-width:360px} .activity-table .badge{white-space:normal;line-height:1.2} /* ── Modal ───────────────────────────────────────────────────────── */ .modal{ position:fixed;inset:0;background:rgba(0,0,0,.4); display:flex;align-items:center;justify-content:center;z-index:1000; backdrop-filter:blur(3px); } .modal[hidden]{display:none!important} .dark .modal{background:rgba(4,5,8,.62);backdrop-filter:blur(6px)} .modal-box{ background:var(--bg2);border:1px solid var(--border2); border-radius:var(--rl);padding:28px;width:100%;max-width:480px; max-height:90vh;max-height:88dvh;overflow-y:auto;box-shadow:var(--shadow-md); } .dark .modal-box{background:#12151f} .modal-title{font-size:17px;font-weight:700;margin-bottom:18px;letter-spacing:-.03em} .export-modal-box{max-width:760px} .modal-body{display:flex;flex-direction:column;gap:12px} .modal-footer{display:flex;gap:10px;margin-top:20px;padding-top:20px;border-top:1px solid var(--border)} /* ── Animations ──────────────────────────────────────────────────── */ @keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes slideUp{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}} @keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}} @keyframes heroFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(16px,-20px)}} .page,.landing-body{animation:fadeIn .28s ease} .modal-box{animation:slideUp .24s cubic-bezier(.16,1,.3,1)} /* Staggered entrance for dashboard blocks */ .scroll > .kpis,.scroll > .charts-grid,.scroll > .table-card,.scroll > .qc-section, .scroll > .chart-card,.tab-pane > .table-card,.section-cards,.status-grid,.hero-banner, .detail-grid,.form-card{animation:fadeUp .45s cubic-bezier(.22,1,.36,1) both} .kpis > *{animation:fadeUp .5s both} .kpis > *:nth-child(1){animation-delay:.03s}.kpis > *:nth-child(2){animation-delay:.08s} .kpis > *:nth-child(3){animation-delay:.13s}.kpis > *:nth-child(4){animation-delay:.18s} .kpis > *:nth-child(5){animation-delay:.23s}.kpis > *:nth-child(6){animation-delay:.28s} .status-grid > *{animation:fadeUp .5s both} .status-grid > *:nth-child(1){animation-delay:.05s}.status-grid > *:nth-child(2){animation-delay:.12s} .status-grid > *:nth-child(3){animation-delay:.19s}.status-grid > *:nth-child(4){animation-delay:.26s} .section-cards > *{animation:fadeUp .55s both} .section-cards > *:nth-child(1){animation-delay:.08s}.section-cards > *:nth-child(2){animation-delay:.17s} .section-cards > *:nth-child(3){animation-delay:.26s} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ── Skeleton loaders ────────────────────────────────────────────── */ .skeleton{ background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 37%,var(--bg3) 63%); background-size:800px 100%;animation:shimmer 1.3s infinite linear;border-radius:8px; } .sk-row{height:40px;margin-bottom:8px;border-radius:12px} .sk-kpi{height:76px;border-radius:16px} .sk-line{height:14px;margin:6px 0;border-radius:5px} .sk-hidden{display:none!important} /* ── Breadcrumbs ─────────────────────────────────────────────────── */ .crumbs{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text3);flex-wrap:wrap} .crumbs a{color:var(--text2);text-decoration:none;font-weight:500} .crumbs a:hover{color:var(--primary)} .crumbs .sep{opacity:.5} .crumbs .cur{color:var(--text);font-weight:600} /* ── Misc ────────────────────────────────────────────────────────── */ .ext-link{color:var(--blue);text-decoration:none;font-size:14px;font-weight:500} .ext-link:hover{color:var(--text)} code{background:var(--bg4);padding:2px 6px;border-radius:5px;font-size:12px;font-family:'JetBrains Mono',ui-monospace,monospace;color:var(--blue)} .divider{height:1px;background:var(--border);margin:16px 0} /* Scrollbars */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:20px;border:2px solid transparent;background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{background:var(--text3);background-clip:padding-box} .dark ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1)} .dark ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18)} /* ── Responsive ──────────────────────────────────────────────────── */ @media(max-width:900px){ .section-cards{grid-template-columns:1fr} .status-grid{grid-template-columns:1fr 1fr} .form-grid{grid-template-columns:1fr} .span2{grid-column:span 1} .detail-grid{grid-template-columns:1fr} .charts-grid{grid-template-columns:1fr} .admin-grid{grid-template-columns:1fr} .admin-create-grid{grid-template-columns:1fr 1fr} .hero-banner{padding:32px 26px 34px;border-radius:22px} .hero-title{font-size:27px} .hero-video{display:none} } /* ── Mobile: sidebar becomes a top icon bar ──────────────────────── */ @media(max-width:760px){ body.app-shell{flex-direction:column} .sidebar{width:100%;flex-shrink:0} .sidebar-inner{ position:static;width:100%;flex-direction:row;align-items:center; height:56px;border-right:none;border-bottom:1px solid var(--border); overflow-x:auto;scrollbar-width:none; } .sidebar-inner:hover{width:100%;box-shadow:none} .sidebar-inner::-webkit-scrollbar{display:none} .side-lbl{display:none} .side-brand{border-bottom:none;border-right:1px solid var(--border);height:100%;padding:0} .side-brand-mark{margin-left:14px;margin-right:14px} .side-brand-text{display:none} .side-nav{flex-direction:row;padding:0 6px;gap:4px;flex:1;overflow-x:auto;overflow-y:hidden} .side-link{height:auto;padding:8px 4px;flex-shrink:0} .side-link .side-ic{width:44px;min-width:44px;font-size:19px} .side-link.on::before{display:none} .side-foot{border-top:none;border-left:1px solid var(--border);padding:0 10px;height:100%} .side-user{display:none} .app-main{height:auto;flex:1;min-height:0} .status-grid{grid-template-columns:1fr} .scroll{padding:16px 14px calc(24px + env(safe-area-inset-bottom))} .twrap{padding:0 12px 12px} /* Поля ввода ≥16px — иначе iOS Safari принудительно зумит страницу */ .srch input,.finput-sm,.finput,.sel,.msel-btn, input[type=text],input[type=number],input[type=date],input[type=password],select,textarea{ font-size:16px; } /* Фильтры: вместо высокой «простыни» — компактные строки с боковой прокруткой */ .filters-bar{ flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:10px 14px; scrollbar-width:none;-webkit-overflow-scrolling:touch; } .filters-bar::-webkit-scrollbar{display:none} .filters-bar > *{flex-shrink:0} .srch{flex:0 0 210px;min-width:210px} .msel-btn{max-width:190px} /* Выпадающий список фильтра — шторка снизу, иначе его обрежет прокручиваемая строка фильтров. backdrop-filter у бара снимаем, т.к. он ломает position:fixed у потомков */ .dark .filters-bar{backdrop-filter:none} .msel-pop{ position:fixed;left:10px;right:10px;top:auto;bottom:10px; width:auto;min-width:0;max-width:none;max-height:55dvh; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); box-shadow:0 -10px 40px rgba(0,0,0,.35); } .msel-search-wrap{top:-8px;padding:8px 0 9px} .msel-search{font-size:16px;padding:11px 12px} .msel-opt{padding:11px 12px;font-size:14px} .msel-clear{padding:11px 12px;font-size:13px} /* Таблицы: не сжимать колонки в кашу — листаются вбок */ .twrap table{min-width:840px} .table-card table{min-width:560px} table{font-size:12.5px} /* Пагинация: крупные кнопки под палец */ .pager{flex-wrap:wrap;gap:8px;padding:10px 14px;justify-content:center} .pager-info{width:100%;text-align:center} .pgb{padding:9px 14px;font-size:13px;min-width:40px;text-align:center} /* Вкладки и модалки */ .stab{padding:13px 14px;font-size:13px} .tab-pane{padding:16px 0} .modal{padding:10px;align-items:flex-end} .modal-box{padding:20px;border-radius:18px 18px 14px 14px;max-width:none} .modal-footer{position:sticky;bottom:0;background:inherit} .modal-footer .btn,.modal-footer .btn-primary,.modal-footer .btn-danger,.modal-footer .btn-success{ flex:1;justify-content:center;padding:11px 13px;font-size:14px; } /* Главная страница */ .landing-topbar{padding:0 14px} .landing-body{padding:18px 14px calc(28px + env(safe-area-inset-bottom))} .hero-banner{padding:26px 20px 28px;border-radius:18px} .hero-title{font-size:23px} .hero-sub{font-size:13px} .kpis{grid-template-columns:repeat(2,1fr);gap:10px} .kpi-v{font-size:21px} /* Крупнее зоны нажатия у кнопок */ .btn,.btn-primary,.btn-danger,.btn-success{padding:9px 14px;font-size:13px} .fwa-pane-head{align-items:flex-start} .fwa-pane-head .btn-primary{flex-shrink:0} .fwa-summary-table{min-width:650px} .fwa-summary-table .fwa-detail-row > td{padding:0 10px 14px} .fwa-city-detail{padding-top:13px} .fwa-detail-toolbar{align-items:stretch;flex-direction:column} .fwa-detail-controls{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px} .fwa-search{width:220px;flex:0 0 220px} .fwa-status-filter{flex:0 0 155px} .fwa-add-btn{flex:0 0 auto} .fwa-detail-heading{justify-content:space-between} .fwa-detail-table{min-width:900px} .fwa-modal-box{max-height:92dvh} }