/* ═══════════════════════════════════════════════════════════════ QuApp - Unified Dark Theme CSS Supports brand theming via data-brand attribute on ═══════════════════════════════════════════════════════════════ */ /* ── 1. CSS Variables & Reset ─────────────────────────────── */ *{margin:0;padding:0;box-sizing:border-box} :root{ /* Core palette — Navy theme (same as TIG/BB) */ --bg:#1a1a2e; --bg2:#16213e; --bg3:#0f3460; --surface:#16213e; --card:#1e2a4a; --card2:#233150; --text:#e8e8f0; --text2:#c4cbdf; --muted:#c4cbdf; --border:#2a3a5c; --radius:10px; --shadow:0 4px 20px rgba(0,0,0,0.4); /* Default accent (red/pink — same as TIG) */ --accent:#e94560; --accent2:#ff6b6b; --accent-dark:#c2185b; --accent-light:#ff6b6b; --accent-rgb:233,69,96; /* Semantic colors */ --success:#00d2a0; --green:#00d2a0; --green2:#00b894; --warning:#ffd166; --danger:#e74c3c; --orange:#f5a623; --yellow:#ffd166; --blue:#5f9df7; --purple:#a855f7; } /* Brand: Bergenbier (gold/yellow on navy) */ html[data-brand="BB"], body[data-division="BB"]{ --accent:#FFD700; --accent2:#ffe14d; --accent-dark:#ccac00; --accent-light:#ffe14d; --accent-rgb:255,215,0; } /* Brand: Ursus (blue on navy) */ html[data-brand="URS"], body[data-division="URS"]{ --accent:#42a5f5; --accent2:#64b5f6; --accent-dark:#1976d2; --accent-light:#90caf9; --accent-rgb:66,165,245; } html{overflow:hidden;width:100%;height:100%} body{ font-family:'Inter',Arial,system-ui,sans-serif; background:var(--bg); color:var(--text); font-size:14px; overflow:hidden; height:100vh; width:100vw; max-width:100vw; overflow-x:hidden; } /* ── 2. Login Page ────────────────────────────────────────── */ .login-page{ display:flex;align-items:center;justify-content:center;height:100vh; background:linear-gradient(135deg,#0d1117 0%,#161b22 50%,#1c2128 100%); } .login-card{ background:var(--card);padding:40px;border-radius:16px;width:380px; box-shadow:var(--shadow);text-align:center;border:1px solid var(--border); } .login-logo{font-size:48px;margin-bottom:12px;position:relative;display:inline-block} .login-card h1{font-size:24px;margin-bottom:4px} .login-sub{color:var(--muted);margin-bottom:24px;font-size:15px} .login-card input{ width:100%;padding:12px 16px;border-radius:8px;border:1px solid var(--border); background:var(--bg2);color:var(--text);margin-bottom:12px;font-size:14px;outline:none; } .login-card input:focus{border-color:var(--accent)} .login-card button{ width:100%;padding:12px;border-radius:8px;border:none;background:var(--accent); color:#fff;font-weight:600;font-size:15px;cursor:pointer;margin-top:4px;transition:background .2s; } html[data-brand="BB"] .login-card button, html[data-brand="URS"] .login-card button{color:#000} .login-card button:hover{opacity:.9} .login-error{color:var(--danger);margin-top:12px;font-size:14px} /* ── 3. Home Grid Menu ────────────────────────────────────── */ .home-grid{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);z-index:900;overflow-y:auto;display:flex;flex-direction:column} .home-grid-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1} .home-grid-title{font-size:1.3rem;font-weight:700;color:var(--accent)} .home-user-label{font-size:.82rem;color:var(--muted)} .home-grid-scroll{padding:12px 16px 32px;flex:1} .home-grid-section-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin:18px 0 10px 4px} .home-grid-section-label:first-child{margin-top:6px} .home-grid-items{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .grid-icon-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 6px 12px;background:var(--card);border:1px solid var(--border);border-radius:14px;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent} .grid-icon-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.4);border-color:var(--accent)} .grid-icon-card:active{transform:scale(.96)} .grid-icon-circle{width:52px;height:52px;border-radius:14px;background:var(--icon-bg,linear-gradient(135deg,var(--accent),var(--accent-dark)));display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(0,0,0,.3)} .grid-icon-circle svg{width:26px;height:26px;color:#fff;stroke-width:2} .grid-icon-card span{font-size:.95rem;font-weight:700;text-align:center;color:var(--text);line-height:1.2;max-width:120px;overflow:hidden;text-overflow:ellipsis} .back-to-menu-btn{background:var(--accent)!important;color:#fff!important;border:none!important;padding:.45rem 1rem!important;border-radius:8px!important;font-size:.85rem!important;font-weight:700!important;cursor:pointer;line-height:1;letter-spacing:.3px;white-space:nowrap;animation:pulseBack 2s ease-in-out 3} .back-to-menu-btn:hover{opacity:.85;transform:scale(1.05)} @keyframes pulseBack{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5)}50%{box-shadow:0 0 0 8px rgba(var(--accent-rgb),0)}} @media(min-width:600px){ .home-grid-items{grid-template-columns:repeat(4,1fr);gap:14px} .grid-icon-circle{width:58px;height:58px;border-radius:16px} .grid-icon-circle svg{width:28px;height:28px} .grid-icon-card span{font-size:.82rem} .home-grid-scroll{padding:16px 24px 40px;max-width:700px;margin:0 auto} } @media(min-width:1024px){ .home-grid-items{grid-template-columns:repeat(5,1fr);gap:16px} .home-grid-scroll{max-width:900px} } /* ── 4. Topbar ────────────────────────────────────────────── */ .topbar{background:#010409;color:#e6edf3;padding:.6rem 1rem;display:flex;align-items:center;gap:.8rem;position:sticky;top:0;z-index:1100;border-bottom:1px solid var(--border)} .topbar h1{font-size:1.1rem;white-space:nowrap;color:var(--accent)} .topbar .user{font-size:.8rem;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px} .topbar button{background:rgba(255,255,255,.08);color:#e6edf3;border:1px solid var(--border);padding:.4rem .8rem;border-radius:6px;cursor:pointer;font-size:.8rem;touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:relative;z-index:1;transition:background .15s} .topbar button:hover{background:rgba(255,255,255,.15)} /* Division selector */ .division-selector{display:flex;align-items:center;gap:.4rem} .division-selector select{background:var(--bg2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:.35rem .6rem;font-size:.82rem;cursor:pointer;outline:none} .division-selector select:focus{border-color:var(--accent)} /* ── 5. Tab Dropdown & Groups ─────────────────────────────── */ .tab-dropdown-wrap{position:relative;flex:1;display:flex;justify-content:center} .tab-dropdown-btn{background:var(--accent);color:#fff;border:none;padding:.45rem 1.4rem;border-radius:6px;cursor:pointer;font-size:.88rem;font-weight:700;letter-spacing:.5px;min-width:140px;text-align:center} html[data-brand="BB"] .tab-dropdown-btn, html[data-brand="URS"] .tab-dropdown-btn{color:#000} .tab-dropdown-btn:active{opacity:.85} .tab-dropdown-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:4px;background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.6);z-index:2000;min-width:220px;max-width:280px;max-height:80vh;overflow-y:auto;overflow-x:hidden;padding:4px 0} .tab-dropdown-menu.open{display:block} .tab-dropdown-menu::-webkit-scrollbar{width:4px} .tab-dropdown-menu::-webkit-scrollbar-track{background:transparent} .tab-dropdown-menu::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px} .tab-menu-item{display:block;width:100%;background:none;border:none;color:var(--text);padding:.65rem 1rem;font-size:.88rem;font-weight:600;text-align:left;cursor:pointer;letter-spacing:.3px;transition:background .1s} .tab-menu-item:hover{background:var(--bg2)} .tab-menu-item.active{color:var(--accent);background:var(--bg)} .tab-menu-home{font-weight:700;color:var(--accent)!important;border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:4px} /* Tab badge (notification count) */ .tab-badge{display:inline-block;background:var(--danger);color:#fff;font-size:.6rem;font-weight:700;padding:1px 5px;border-radius:10px;min-width:16px;text-align:center;line-height:1.3;margin-left:.4rem;vertical-align:middle} /* Tab groups (collapsible sections) */ .tab-group{margin:2px 0} .tab-group-header{padding:8px 12px;font-size:.78rem;font-weight:700;color:var(--muted);cursor:pointer;display:flex;justify-content:space-between;align-items:center;border-radius:6px;transition:all .15s;text-transform:uppercase;letter-spacing:.5px;user-select:none} .tab-group-header:hover{background:rgba(255,255,255,.05);color:var(--text)} .tab-group-header .tg-arrow{font-size:.7rem;transition:transform .2s;color:var(--muted)} .tab-group.open .tab-group-header{color:var(--accent)} .tab-group.open .tab-group-header .tg-arrow{transform:rotate(90deg);color:var(--accent)} .tab-group-items{max-height:0;overflow:hidden;transition:max-height .25s ease;padding-left:8px} .tab-group.open .tab-group-items{max-height:500px} .tab-group-items .tab-menu-item{font-size:.82rem;padding:6px 12px;border-left:2px solid transparent;margin:1px 0} .tab-group-items .tab-menu-item:hover{border-left-color:var(--accent);padding-left:14px} .tab-group-items .tab-menu-item.active{border-left-color:var(--accent);color:var(--accent);font-weight:600} .tab-group.has-active .tab-group-header{color:var(--accent-light)} /* ── 6. Layout: Sidebar + Map ─────────────────────────────── */ .layout{display:flex;height:calc(100vh - 44px)} .sidebar{width:250px;overflow-y:auto;background:var(--card);border-right:1px solid var(--border);flex-shrink:0} .main-content{flex:1;overflow-y:auto;background:var(--bg)} .map-wrap{flex:1;position:relative} #map{width:100%;height:100%;z-index:1} /* Map toggle */ .layout.map-hidden .map-wrap{display:none} .layout.map-hidden .sidebar{width:100%;height:100%;max-width:100%;flex:1;border-right:none} #btnToggleMap{transition:all .15s} .map-hidden-active{background:var(--accent)!important;color:#fff!important} /* ── 7. Panels ────────────────────────────────────────────── */ .panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.6rem} .panel-header{padding:.7rem 1rem;font-weight:bold;font-size:.9rem;color:var(--text);border-bottom:1px solid var(--border)} .panel-inner{padding:.8rem 1rem} .tab-panel{display:none;padding:16px} .tab-panel.active{display:block} .panel-section{margin-bottom:16px} .panel-section h3{font-size:15px;margin-bottom:8px;color:var(--text)} /* Collapsible panels (details/summary) */ details.panel{border-bottom:1px solid var(--border);border-radius:0;margin-bottom:0} details.panel>summary{padding:.7rem 1rem;font-weight:bold;cursor:pointer;background:var(--bg2);font-size:.9rem;user-select:none;list-style:none;color:var(--text)} details.panel>summary::before{content:'\25B6';display:inline-block;margin-right:.5rem;transition:transform .2s;font-size:.7rem} details.panel[open]>summary::before{transform:rotate(90deg)} /* ── 8. Filters & Forms ───────────────────────────────────── */ .filter-row{margin-bottom:.6rem} .filter-row label,.label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:.2rem} .filter-row input[type="search"]{width:100%;padding:.45rem .6rem;border:1px solid var(--border);border-radius:6px;font-size:.85rem;background:var(--bg);color:var(--text)} .filter-row input[type="search"]::placeholder{color:var(--muted)} .checklist{max-height:160px;overflow-y:auto;border:1px solid var(--border);border-radius:6px;padding:.3rem;background:var(--bg)} .check-item{display:flex;align-items:center;gap:.4rem;padding:.25rem .4rem;cursor:pointer;border-radius:4px;font-size:.82rem;color:var(--text);transition:background .1s} .check-item:hover{background:var(--bg2)} .check-item em{margin-left:auto;font-style:normal;font-size:.72rem;color:var(--muted);background:var(--bg2);padding:0 .4rem;border-radius:8px} .split{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;align-items:start} .filter-input{width:100%;padding:8px 12px;border-radius:6px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:14px;outline:none;margin-bottom:8px} .filter-input:focus{border-color:var(--accent)} .filter-label{display:block;font-size:13px;color:var(--muted);margin:8px 0 4px;font-weight:600;text-transform:uppercase;letter-spacing:.3px} .filter-select{width:100%;padding:6px 8px;border-radius:6px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:13px;margin-bottom:4px;height:70px} .filter-select-single{width:100%;padding:6px 8px;border-radius:6px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:13px;margin-bottom:4px} /* General form inputs */ input[type="date"],input[type="month"],input[type="number"],input[type="file"],select{ background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:.4rem .6rem;font-size:.85rem; } input[type="date"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator{filter:invert(1)} input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none} /* Searchable dropdown */ .sd-wrap{position:relative;width:100%} .sd-input{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg2);color:var(--text);font-size:.85rem;box-sizing:border-box} .sd-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.15)} .sd-input::placeholder{color:var(--muted)} .sd-list{position:absolute;top:100%;left:0;right:0;max-height:220px;overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:6px;margin-top:2px;z-index:100;box-shadow:0 4px 12px rgba(0,0,0,.3)} .sd-item{padding:8px 10px;cursor:pointer;display:flex;flex-direction:column;gap:1px;border-bottom:1px solid rgba(255,255,255,.04);transition:background .1s} .sd-item:hover{background:var(--bg2)} .sd-item:last-child{border-bottom:none} .sd-item-label{font-size:.84rem;color:var(--text)} .sd-item-sub{font-size:.72rem;color:var(--muted)} .sd-item.sd-empty{color:var(--muted);font-style:italic;cursor:default;font-size:.82rem} .sd-item.sd-empty:hover{background:transparent} /* ── 9. Buttons ───────────────────────────────────────────── */ .btn{padding:.45rem .8rem;border:none;border-radius:6px;cursor:pointer;font-size:.8rem;display:inline-flex;align-items:center;gap:.3rem;transition:all .15s} .btn-primary,.btn.primary{background:var(--accent);color:#fff} .btn-primary:hover,.btn.primary:hover{background:var(--accent-light)} .btn-success,.btn.success{background:var(--success);color:#fff} .btn-success:hover,.btn.success:hover{opacity:.9} .btn-danger,.btn.danger{background:var(--danger);color:#fff} .btn-danger:hover,.btn.danger:hover{opacity:.9} .btn-warning,.btn.warning{background:var(--warning);color:#000} .btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--border)} .btn.ghost:hover{background:var(--bg2)} .btn-sm,.btn.small{padding:.3rem .6rem;font-size:.75rem} .btn-row{display:flex;gap:.4rem;flex-wrap:wrap;margin:.5rem 0} html[data-brand="BB"] .btn-primary, html[data-brand="BB"] .btn.primary{color:#000} html[data-brand="URS"] .btn-primary, html[data-brand="URS"] .btn.primary{color:#000} /* ── 10. Data Tables ──────────────────────────────────────── */ .data-table{width:100%;border-collapse:collapse;font-size:.82rem} .data-table th{ background:var(--bg3);color:var(--text);font-weight:600;padding:5px 4px; text-align:left;border-bottom:2px solid var(--border);font-size:11px; text-transform:uppercase;letter-spacing:.3px;cursor:pointer;user-select:none; position:sticky;top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .data-table th:hover{color:#fff} .data-table th.sort-asc::after{content:' \25B2';font-size:.6rem;color:var(--accent)} .data-table th.sort-desc::after{content:' \25BC';font-size:.6rem;color:var(--accent)} .data-table td{padding:.4rem;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text)} .data-table tbody tr:hover{background:var(--bg2)} .data-table tbody tr:nth-child(even){background:rgba(255,255,255,.02)} .data-table .total-row{background:var(--bg2);font-weight:700} .data-table .total-row td{border-top:2px solid var(--accent);color:var(--accent);padding:.5rem .4rem} .report-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} /* Legacy tables */ .missing-table{width:100%;border-collapse:collapse;font-size:.78rem;margin-top:.5rem} .missing-table th{background:#010409;color:var(--accent);padding:.4rem;text-align:left;border-bottom:1px solid var(--border)} .missing-table td{padding:.3rem .4rem;border-bottom:1px solid var(--border);color:var(--text)} .missing-table tr:hover{background:var(--bg)} .daily-table{width:100%;border-collapse:collapse;font-size:.78rem} .daily-table th{background:var(--bg2);color:var(--muted);font-weight:600;padding:.4rem .3rem;text-align:right;border-bottom:1px solid var(--border);font-size:.7rem;text-transform:uppercase;letter-spacing:.3px} .daily-table th:first-child{text-align:left} .daily-table td{padding:.4rem .3rem;text-align:right;border-bottom:1px solid rgba(255,255,255,.04)} .daily-table td:first-child{text-align:left;font-weight:600;color:var(--text)} /* ── 11. Cards: Stat & KPI ────────────────────────────────── */ .stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:.8rem;text-align:center;transition:border-color .2s} .stat-card:hover{border-color:var(--accent)} .stat-card .stat-value{font-size:1.4rem;font-weight:800;color:var(--text);line-height:1.2} .stat-card .stat-label{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:.3rem} .kpi-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;text-align:center} .kpi-card .kpi-label{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px} .kpi-card .kpi-value{font-size:.95rem;font-weight:700;color:var(--text)} .report-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin-bottom:.8rem} .report-card h4{font-size:.9rem;margin-bottom:.5rem;color:var(--accent)} .report-stat{display:flex;justify-content:space-between;padding:.2rem 0;font-size:.85rem} .report-stat .val{font-weight:bold;color:#e6edf3} /* ── 12. Chips & Badges ───────────────────────────────────── */ .chip{display:inline-block;padding:.1rem .4rem;border-radius:8px;font-size:.7rem;font-weight:bold} .chip.ok{background:#1a4731;color:#2ecc71} .chip.warn{background:#4a3800;color:#f1c40f} .chip.bad{background:#4a1a1a;color:#e74c3c} .chip-btn{background:var(--bg2);border:1px solid var(--border);padding:.2rem .5rem;border-radius:12px;font-size:.72rem;cursor:pointer;color:var(--text);transition:all .15s} .chip-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)} .chip-btn.active{background:var(--success);color:#fff;border-color:var(--success)} .status-chip{padding:.25rem .5rem;border-radius:12px;font-size:.72rem;cursor:pointer;border:1px solid var(--border);background:var(--bg);color:var(--muted);transition:all .15s} .status-chip:hover{border-color:var(--accent);color:var(--text)} .status-chip.active{background:var(--accent);color:#fff;border-color:var(--accent)} .score-badge{display:inline-block;padding:.15rem .5rem;border-radius:8px;font-weight:bold;font-size:.8rem} .score-100{background:#1a6b3c;color:#2ecc71} .score-80{background:#7d6608;color:#f1c40f} .score-60{background:#a04000;color:#e67e22} .score-low{background:#8b1a1a;color:#e74c3c} .score-na{background:#3d444d;color:#8b949e} .search-match{background:#4a3800;padding:0 2px;border-radius:2px} /* ── 13. Client List ──────────────────────────────────────── */ .client-list{list-style:none;padding:0} .client-item{padding:.6rem 1rem;border-bottom:1px solid var(--border);transition:background .15s} .client-item:hover{background:var(--bg2)} .client-title{font-weight:bold;font-size:.9rem;color:#e6edf3} .client-meta{font-size:.78rem;color:var(--muted);margin-top:.15rem} .tiny-actions{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.4rem} .stats-bar{padding:.5rem 1rem;background:var(--bg2);font-size:.8rem;color:var(--muted);border-bottom:1px solid var(--border);display:flex;justify-content:space-between} /* ── 14. Dialogs / Modals ─────────────────────────────────── */ dialog{border:none;border-radius:var(--radius);box-shadow:0 4px 30px rgba(0,0,0,.6);padding:0;max-width:95vw;width:500px;background:var(--card);color:var(--text)} dialog::backdrop{background:rgba(0,0,0,.7)} .dialog-header{padding:1rem;background:#010409;color:#e6edf3;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)} .dialog-header h3{font-size:1rem;color:var(--accent)} .dialog-close{background:none;border:none;color:#e6edf3;font-size:1.5rem;cursor:pointer} .dialog-body{padding:1rem;max-height:70vh;overflow-y:auto} .dialog-footer{padding:.8rem 1rem;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:.5rem} /* Generic modal overlay */ .modal-overlay,.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:9999;display:none;align-items:center;justify-content:center;padding:1rem} .modal-overlay.active,.overlay.active{display:flex} .modal-content,.overlay .modal{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.2rem;width:100%;max-width:560px;max-height:85vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.5)} /* ── 15. Toast Notifications ──────────────────────────────── */ .toast{position:fixed;bottom:20px;right:20px;background:var(--accent);color:#fff;padding:.7rem 1.2rem;border-radius:8px;font-size:.85rem;z-index:10000;box-shadow:0 4px 20px rgba(0,0,0,.5);animation:slideUp .3s ease;max-width:350px} .toast-info,.toast.info{background:var(--accent);color:#fff} .toast-success,.toast.success{background:var(--success);color:#000} .toast-error,.toast.error{background:var(--danger);color:#fff} .toast-warning,.toast.warning{background:var(--warning);color:#000} @keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}} /* ── 16. Progress Bars ────────────────────────────────────── */ .progress-bar{height:10px;background:var(--bg2);border-radius:5px;overflow:hidden;width:100%} .progress-bar .progress-fill{height:100%;border-radius:5px;transition:width .6s ease;min-width:2px;background:var(--accent)} .progress-fill.green{background:linear-gradient(90deg,#27ae60,#2ecc71)} .progress-fill.yellow{background:linear-gradient(90deg,#f39c12,#f1c40f)} .progress-fill.orange{background:linear-gradient(90deg,#e67e22,#f39c12)} .progress-fill.red{background:linear-gradient(90deg,#c0392b,#e74c3c)} .progress-fill.blue{background:linear-gradient(90deg,#2980b9,#3498db)} /* Obiective progress */ .obj-progress-bar{height:8px;background:var(--bg);border-radius:4px;overflow:hidden;width:100%} .obj-progress-fill{height:100%;border-radius:4px;transition:width .4s ease} .obj-green{color:#2ecc71} .obj-green.obj-progress-fill{background:#2ecc71} .obj-yellow{color:#f1c40f} .obj-yellow.obj-progress-fill{background:#f1c40f} .obj-orange{color:#e67e22} .obj-orange.obj-progress-fill{background:#e67e22} .obj-red{color:#e74c3c} .obj-red.obj-progress-fill{background:#e74c3c} /* ── 17. Loading & Spinner ────────────────────────────────── */ .spinner{display:inline-block;width:20px;height:20px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite} .spinner.lg{width:36px;height:36px;border-width:4px} @keyframes spin{to{transform:rotate(360deg)}} .loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(13,17,23,.95);display:flex;align-items:center;justify-content:center;z-index:9999;flex-direction:column;gap:.5rem;color:var(--text)} /* ── 18. Notifications ────────────────────────────────────── */ .notif-badge{position:absolute;top:-4px;right:-4px;background:var(--danger);color:#fff;font-size:.6rem;font-weight:700;padding:1px 5px;border-radius:10px;min-width:16px;text-align:center;line-height:1.2} .notif-panel{position:absolute;top:100%;right:0;margin-top:6px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.6);z-index:3000;width:340px;max-width:calc(100vw - 20px)} .notif-item{padding:.5rem .7rem;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;transition:background .1s} .notif-item:hover{background:var(--bg2)} .notif-item.unread{background:rgba(var(--accent-rgb),.08);border-left:3px solid var(--accent)} .notif-item .notif-title{font-weight:600;font-size:.82rem;margin-bottom:2px} .notif-item .notif-msg{color:var(--muted);font-size:.78rem;word-wrap:break-word;overflow-wrap:break-word} .notif-item .notif-time{color:var(--muted);font-size:.7rem;margin-top:3px} /* ── 19. Dashboard (Ziua Mea) ─────────────────────────────── */ .zm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:16px} .zm-card{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--card);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:all .2s} .zm-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.3);border-color:var(--accent)} .zm-card-icon{font-size:1.8rem;flex-shrink:0} .zm-card-info{flex:1;min-width:0} .zm-card-value{font-size:1.2rem;font-weight:700;color:var(--text);line-height:1.3} .zm-card-label{font-size:.75rem;color:var(--muted);margin-top:2px} .zm-progress{height:4px;background:var(--border);border-radius:2px;margin-top:6px;overflow:hidden} .zm-progress-bar{height:100%;background:var(--success);border-radius:2px;transition:width .5s ease} /* ── 20. Obiective Cards ──────────────────────────────────── */ .obj-summary-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:.8rem;margin-bottom:.6rem} .obj-summary-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem;font-weight:700;font-size:.9rem} .obj-days{font-size:.75rem;color:var(--muted);font-weight:400;background:var(--bg);padding:.2rem .5rem;border-radius:8px} .obj-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem} .obj-metric-box{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.6rem;text-align:center} .obj-metric-box-label{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.3rem} .obj-metric-box-value{font-size:1.1rem;font-weight:700} .obj-agent-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:.6rem;margin-bottom:.4rem;transition:border-color .2s} .obj-agent-card:hover{border-color:var(--accent)} .obj-medal-1{border-left:3px solid #ffd700} .obj-medal-2{border-left:3px solid #c0c0c0} .obj-medal-3{border-left:3px solid #cd7f32} .obj-agent-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem} .obj-rank{font-size:.72rem;font-weight:700;color:var(--muted);min-width:24px} .obj-agent-name{font-weight:600;font-size:.85rem;flex:1} .obj-agent-pct{font-size:1rem;font-weight:700} .obj-needed{font-size:.72rem;color:var(--muted);margin-top:.2rem;padding:.3rem .5rem;background:var(--bg);border-radius:4px;text-align:center} /* ── 21. Dashboard Hero & Rings ───────────────────────────── */ .dash-hero{text-align:center;padding:1rem .6rem;border-radius:14px;margin-bottom:.7rem;position:relative;overflow:hidden} .dash-hero.gold{background:linear-gradient(135deg,rgba(255,215,0,.18),rgba(255,179,0,.1));border:1.5px solid rgba(255,215,0,.35);animation:dashPulseGold 2.2s ease-in-out infinite} .dash-hero.silver{background:linear-gradient(135deg,rgba(192,192,192,.14),rgba(158,158,158,.08));border:1.5px solid rgba(192,192,192,.3);animation:dashPulseSilver 2.2s ease-in-out infinite} .dash-hero.bronze{background:linear-gradient(135deg,rgba(205,127,50,.14),rgba(160,82,45,.08));border:1.5px solid rgba(205,127,50,.3);animation:dashPulseBronze 2.2s ease-in-out infinite} .dash-hero-rank{font-size:2.8rem;margin-bottom:.2rem} .dash-hero-msg{font-size:1.08rem;font-weight:700;line-height:1.6;animation:dashTextPulse 2.2s ease-in-out infinite} .dash-hero.gold .dash-hero-msg{color:#ffd700} .dash-hero.silver .dash-hero-msg{color:#e0e0e0} .dash-hero.bronze .dash-hero-msg{color:#e8a862} .dash-hero-sub{font-size:.78rem;color:var(--muted);margin-top:.4rem} @keyframes dashPulseGold{0%,100%{box-shadow:0 0 8px rgba(255,215,0,.15)}50%{box-shadow:0 0 24px rgba(255,215,0,.4),0 0 48px rgba(255,215,0,.15)}} @keyframes dashPulseSilver{0%,100%{box-shadow:0 0 8px rgba(192,192,192,.1)}50%{box-shadow:0 0 20px rgba(192,192,192,.35)}} @keyframes dashPulseBronze{0%,100%{box-shadow:0 0 8px rgba(205,127,50,.1)}50%{box-shadow:0 0 20px rgba(205,127,50,.35)}} @keyframes dashTextPulse{0%,100%{opacity:.85}50%{opacity:1}} .dash-ring-wrap{display:flex;justify-content:center;gap:1.4rem;padding:.5rem 0;margin:.6rem 0} .dash-ring{position:relative;width:90px;height:90px} .dash-ring svg{transform:rotate(-90deg)} .dash-ring-bg{fill:none;stroke:var(--bg2);stroke-width:6} .dash-ring-fill{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .8s ease} .dash-ring-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center} .dash-ring-pct{font-size:1.1rem;font-weight:800;display:block;line-height:1.1} .dash-ring-name{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;display:block;margin-top:1px} .dash-bar-section{margin:.6rem 0;padding:.7rem;background:var(--bg);border-radius:10px} .dash-bar-title{font-size:.82rem;color:var(--accent);font-weight:700;margin-bottom:.6rem;text-transform:uppercase;letter-spacing:.4px} .dash-bar-row{margin-bottom:.6rem} .dash-bar-row:last-child{margin-bottom:0} .dash-bar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem} .dash-bar-label{font-size:.85rem;color:var(--muted)} .dash-bar-values{font-size:.85rem;font-weight:600} .dash-bar-track{height:10px;background:var(--bg2);border-radius:5px;overflow:hidden} .dash-bar-fill{height:100%;border-radius:5px;transition:width .6s ease;min-width:2px} .dash-bar-fill.green{background:linear-gradient(90deg,#27ae60,#2ecc71)} .dash-bar-fill.yellow{background:linear-gradient(90deg,#f39c12,#f1c40f)} .dash-bar-fill.red{background:linear-gradient(90deg,#c0392b,#e74c3c)} .dash-bar-fill.blue{background:linear-gradient(90deg,#2980b9,#3498db)} .dash-section{margin:.5rem 0;padding:.6rem;background:var(--bg);border-radius:10px} .dash-section-title{font-size:.7rem;color:var(--accent);font-weight:700;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.4px} .dash-spv-row{display:flex;align-items:center;padding:.4rem .3rem;border-bottom:1px solid rgba(255,255,255,.04);font-size:.78rem;gap:.3rem} .dash-spv-row:last-child{border-bottom:none} .dash-spv-rank{font-weight:800;min-width:28px;font-size:.82rem} .dash-spv-name{flex:1} .dash-spv-bar-wrap{width:90px;height:6px;background:var(--bg2);border-radius:3px;overflow:hidden} .dash-spv-bar{height:100%;border-radius:3px} .dash-spv-pct{font-weight:700;min-width:48px;text-align:right;font-size:.78rem} /* ── 22. Route Mode ───────────────────────────────────────── */ .route-bar{padding:.5rem .75rem;background:#1a3a5c;border-bottom:2px solid #00b894;display:flex;flex-direction:column;gap:.4rem;font-size:.82rem} .route-bar-top{display:flex;align-items:center;gap:.5rem} .route-bar .count{background:var(--accent);color:#fff;padding:.15rem .5rem;border-radius:10px;font-weight:bold;font-size:.78rem} .route-list{overflow-x:auto;white-space:nowrap;font-size:.78rem;padding:2px 0} .route-selected{outline:3px solid #00b894!important;outline-offset:1px;z-index:500!important} .route-chip{display:inline-block;background:var(--bg2);border:1px solid var(--border);padding:2px 6px;border-radius:4px;font-size:.75rem;margin:1px;white-space:nowrap} /* ── 23. Calendar Grid ────────────────────────────────────── */ .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-top:.5rem} .cal-header{font-size:.7rem;font-weight:700;text-align:center;color:var(--muted);padding:4px} .cal-day{font-size:.75rem;text-align:center;padding:6px 2px;border-radius:6px;cursor:pointer;background:var(--bg2);border:1px solid transparent;transition:all .15s;min-height:32px} .cal-day:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.1)} .cal-day.today{border-color:var(--accent);background:rgba(var(--accent-rgb),.15);font-weight:700} .cal-day.selected{background:var(--accent);color:#fff;font-weight:700} .cal-day.other-month{opacity:.3} .cal-day.empty{cursor:default;background:transparent} /* ── 24. Leaflet Map Dark Theme ───────────────────────────── */ .leaflet-tile-pane{filter:brightness(.85) contrast(1.1) saturate(.9)} .leaflet-control-zoom a{background:var(--card)!important;color:var(--text)!important;border-color:var(--border)!important} .leaflet-popup-content-wrapper{background:var(--card)!important;color:var(--text)!important;box-shadow:0 3px 14px rgba(0,0,0,.5)!important} .leaflet-popup-tip{background:var(--card)!important} .leaflet-popup-close-button{color:var(--muted)!important} .leaflet-popup-close-button:hover{color:var(--text)!important} .leaflet-popup-content{font-size:.92rem!important;line-height:1.5!important} .leaflet-control-attribution{background:rgba(13,17,23,.7)!important;color:var(--muted)!important} .leaflet-control-attribution a{color:var(--accent)!important} .leaflet-tooltip{background:rgba(13,17,23,.92)!important;color:#e6edf3!important;border:1px solid var(--border)!important;font-size:12px!important;padding:4px 8px!important;box-shadow:0 2px 8px rgba(0,0,0,.5)!important;border-radius:6px!important} /* MarkerCluster */ .marker-cluster{background:none!important} .marker-cluster div{background:var(--accent)!important;color:#fff!important;font-weight:700!important;font-size:13px!important;border-radius:50%!important;border:3px solid #fff!important;box-shadow:0 2px 8px rgba(0,0,0,.6)!important;display:flex!important;align-items:center!important;justify-content:center!important} .marker-cluster-small{background:none!important} .marker-cluster-small div{background:#00b894!important;width:36px!important;height:36px!important} .marker-cluster-medium{background:none!important} .marker-cluster-medium div{background:#fdcb6e!important;color:#000!important;width:44px!important;height:44px!important} .marker-cluster-large{background:none!important} .marker-cluster-large div{background:#e17055!important;width:52px!important;height:52px!important} .gps-marker,.vizite-marker{background:transparent!important;border:none!important} /* ── 25. Help Overlay ─────────────────────────────────────── */ .help-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem} .help-content{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.2rem;max-width:560px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.5)} .help-section{margin-bottom:.8rem} .help-section h4{color:var(--accent);font-size:.88rem;margin-bottom:.3rem} .help-section p,.help-section li{color:var(--muted);font-size:.82rem;line-height:1.5} .help-btn{background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--muted);width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:.8rem;display:inline-flex;align-items:center;justify-content:center} .help-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)} /* ── 26. Animations ───────────────────────────────────────── */ @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}} .pulse{animation:pulse 2s ease-in-out infinite} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .fade-in{animation:fadeIn .3s ease} /* ── 27. Custom Scrollbars ────────────────────────────────── */ .sidebar::-webkit-scrollbar, .checklist::-webkit-scrollbar, .dialog-body::-webkit-scrollbar, .main-content::-webkit-scrollbar, .report-table-scroll::-webkit-scrollbar{width:6px} .sidebar::-webkit-scrollbar-track, .checklist::-webkit-scrollbar-track, .main-content::-webkit-scrollbar-track{background:transparent} .sidebar::-webkit-scrollbar-thumb{background:#3d444d;border-radius:3px} .sidebar::-webkit-scrollbar-thumb:hover{background:#545d68} .checklist::-webkit-scrollbar-thumb, .dialog-body::-webkit-scrollbar-thumb, .main-content::-webkit-scrollbar-thumb{background:#3d444d;border-radius:3px} /* ── 28. Product Checklist & Delivery ─────────────────────── */ .product-group{margin-bottom:.8rem} .product-group-title{font-size:.8rem;font-weight:bold;color:var(--accent);margin-bottom:.3rem;padding:.3rem .5rem;background:var(--bg2);border-radius:4px} .product-item{display:flex;align-items:center;gap:.5rem;padding:.35rem .5rem;border-bottom:1px solid var(--border)} .product-item label{flex:1;font-size:.85rem;cursor:pointer;color:var(--text)} .product-item input[type="checkbox"]{width:18px;height:18px;accent-color:var(--success)} .req-badge{font-size:.65rem;padding:.1rem .4rem;border-radius:4px;font-weight:bold} .req-m{background:#1a4731;color:#2ecc71} .req-mo{background:#4a3800;color:#f1c40f} .req-minim{background:#4a2800;color:#e67e22} .req-x{background:#4a1a1a;color:#e74c3c} .delivery-legend{font-size:.72rem;color:var(--muted);padding:.4rem .5rem;margin-bottom:.5rem;background:var(--bg2);border-radius:6px;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap} .delivery-badge{font-size:.65rem;padding:.1rem .35rem;border-radius:4px;cursor:help;white-space:nowrap} .delivery-badge.delivered{background:#1a3a1a;color:#4ade80} .delivery-badge.not-delivered{background:#3a2a1a;color:#fb923c} /* ── 29. Filter Checkbox Groups ───────────────────────────── */ .filter-checkbox-group{max-height:160px;overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:6px;padding:4px 0;margin-bottom:4px} .filter-checkbox-group .fcb-item{display:flex;align-items:center;gap:6px;padding:4px 10px;cursor:pointer;font-size:14px;color:var(--text);transition:background .15s} .filter-checkbox-group .fcb-item:hover{background:var(--bg2)} .filter-checkbox-group .fcb-item input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex-shrink:0} .filter-checkbox-group .fcb-item label{cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .filter-checkbox-group .fcb-item .fcb-count{font-size:12px;color:var(--muted);margin-left:auto;flex-shrink:0;background:var(--bg);padding:0 6px;border-radius:8px} .filter-split{display:grid;grid-template-columns:1fr 1fr;gap:8px} .filter-split section{min-width:0} .filter-search-mini{width:100%;padding:6px 10px;border-radius:6px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:13px;margin-bottom:4px} .filter-checklist{max-height:180px} .audit-status-filters,.vizite-status-filters{display:flex;gap:4px;flex-wrap:wrap;margin:.5rem 0} /* ── 30. Daily Sales History ──────────────────────────────── */ .daily-history-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:.8rem;margin-bottom:1rem} .daily-history-title{font-size:.88rem;font-weight:700;color:var(--accent);margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem} .daily-cum{color:var(--muted);font-size:.7rem} .daily-engros{color:#e67e22;font-size:.72rem;font-style:italic} /* ── 31. Incasari (Cash Collections) ──────────────────────── */ .incasari-today-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:.8rem;margin-bottom:.8rem;text-align:center} .incasari-today-card p{margin-bottom:.5rem;font-size:.9rem} .incasari-today-card input[type="number"]{width:100%;max-width:250px;padding:.5rem .8rem;border:1px solid var(--border);border-radius:6px;background:var(--bg2);color:var(--text);font-size:1.1rem;text-align:center;margin:.5rem 0} .incasari-today-card input[type="number"]:focus{border-color:var(--accent);outline:none} .incasari-today-card .btn{margin-top:.3rem} /* ── 32. Client Nou B2B (Wizard Steps) ────────────────────── */ .cn-step{flex:1;text-align:center;padding:.3rem .2rem;font-size:.7rem;font-weight:600;background:var(--bg2);border-radius:4px;color:var(--muted);cursor:pointer;transition:all .2s} .cn-step.active{background:var(--accent);color:#fff} .cn-step.done{background:var(--success);color:#fff} .cn-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.5rem 0} .cn-form-grid .cn-field{display:flex;flex-direction:column;gap:.15rem} .cn-form-grid .cn-field:not(.half){grid-column:1/-1} .cn-form-grid .cn-field label{font-size:.75rem;font-weight:600;color:var(--muted);text-transform:uppercase} .cn-form-grid .cn-field input{padding:.4rem .6rem;border:1px solid var(--border);border-radius:6px;background:var(--bg2);color:var(--text);font-size:.85rem} .cn-form-grid .cn-field input:focus{border-color:var(--accent);outline:none} /* ── 33. Comanda Optima KPIs ──────────────────────────────── */ .co-kpi-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;text-align:center} .co-kpi-label{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px} .co-kpi-value{font-size:.95rem;font-weight:700;color:var(--text)} .co-cfg-input{width:90px;padding:4px 6px;border:1px solid var(--border);border-radius:5px;background:var(--bg2);color:var(--text);font-size:.8rem;text-align:right} .co-cfg-input:focus{border-color:var(--accent);outline:none} /* ── 34. Ziua Mea Extended ────────────────────────────────── */ .zm-badge-urgent{font-size:.7rem;background:var(--danger);color:#fff;padding:1px 6px;border-radius:8px;font-weight:600} .zm-badge-warn{font-size:.8rem;color:var(--warning);font-weight:600} .zm-section{margin-top:16px} .zm-section h3{font-size:.85rem;font-weight:700;color:var(--accent);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px} .zm-list{display:flex;flex-direction:column;gap:4px} .zm-list-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--bg2);border-radius:8px;cursor:pointer;transition:background .15s;border-left:3px solid transparent} .zm-list-item:hover{background:var(--card)} .zm-list-item.zm-prio-urgent{border-left-color:var(--danger)} .zm-list-item.zm-prio-high{border-left-color:var(--warning)} .zm-list-title{font-size:.85rem;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px} .zm-list-date{font-size:.75rem;color:var(--muted);white-space:nowrap} .zm-list-date.zm-overdue{color:var(--danger);font-weight:600} .zm-list-more{font-size:.8rem;color:var(--accent);cursor:pointer;padding:4px 12px;text-align:right} .zm-list-more:hover{text-decoration:underline} .zm-actions{display:flex;flex-wrap:wrap;gap:8px} .zm-action-btn{padding:8px 16px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.82rem;cursor:pointer;transition:all .15s} .zm-action-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff} /* ── 35. Dashboard Days & Needed ──────────────────────────── */ .dash-days{text-align:center;padding:.4rem;margin-bottom:.5rem} .dash-days-bar{height:5px;background:var(--bg2);border-radius:3px;overflow:hidden;margin:.4rem 0} .dash-days-fill{height:100%;background:linear-gradient(90deg,var(--accent),#e74c3c);border-radius:3px} .dash-days-text{font-size:.82rem;color:var(--muted)} .dash-needed{text-align:center;margin:.5rem 0;padding:.6rem;background:var(--bg);border-radius:10px} .dash-needed-val{font-size:1.3rem;font-weight:800;color:var(--accent)} .dash-needed-sub{font-size:.8rem;color:var(--muted)} .dash-trend{display:inline-flex;align-items:center;gap:.2rem;font-size:.82rem;font-weight:700;padding:.2rem .55rem;border-radius:12px} .dash-trend.over{background:rgba(var(--accent-rgb),.15);color:var(--accent)} .dash-spv-val{font-size:.65rem;color:var(--muted);min-width:65px;text-align:right} .dash-spv-row.top3{background:rgba(255,215,0,.04);border-radius:6px} /* ── 36. Calendar Extended ────────────────────────────────── */ .cal-client-row{display:flex;align-items:center;gap:.4rem;padding:.4rem .5rem;border-bottom:1px solid rgba(255,255,255,.04);font-size:.8rem} .cal-client-row:hover{background:var(--bg2)} .cal-client-row input[type="checkbox"]{accent-color:var(--accent)} .cal-client-row .purchase-icon{cursor:pointer;font-size:.9rem;margin-left:auto;padding:0 4px} .cal-nealocat{background:rgba(241,196,15,.06);border-left:2px solid var(--warning)} /* ── 37. Metric Rows (shared) ─────────────────────────────── */ .obj-agent-metrics{display:flex;flex-direction:column;gap:.3rem} .obj-metric-row{display:flex;align-items:center;gap:.5rem} .obj-metric-label{font-size:.72rem;color:var(--muted);min-width:72px;text-align:right} .obj-progress-wrap{flex:1;display:flex;flex-direction:column;gap:2px} .obj-metric-val{font-size:.7rem;color:var(--muted)} .obj-metric-box-target{font-size:.7rem;color:var(--muted);margin-top:.1rem} .obj-metric-box-pct{font-size:.85rem;font-weight:700;margin-top:.2rem} .obj-import-info{font-size:.72rem;color:var(--muted);margin-top:.5rem;text-align:center} /* ── 38. Module Cards ─────────────────────────────────────── */ .module-card{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:.6rem .8rem;margin-bottom:.5rem;transition:background .15s} .module-card:hover{background:var(--bg)} /* ══════════════════════════════════════════════════════════════ 39. RESPONSIVE - Tablet (768px) ══════════════════════════════════════════════════════════════ */ @media(max-width:768px){ body{font-size:15px} /* Topbar */ .topbar{flex-wrap:wrap;padding:.4rem .6rem;gap:.4rem} .topbar h1{font-size:1rem} .tab-dropdown-btn{font-size:.92rem;min-width:130px;padding:.45rem 1rem} .topbar .user{font-size:.82rem;max-width:140px} .topbar button{padding:.35rem .6rem;font-size:.85rem} /* Layout: stack sidebar under map */ .layout{flex-direction:column-reverse} .sidebar{width:100%;height:50vh;border-right:none;border-top:1px solid var(--border)} .map-wrap{height:50vh} .layout.map-hidden .sidebar{height:100%;border-top:none} /* Dialogs */ dialog{width:95vw;max-height:90vh} .dialog-header h3{font-size:1.05rem} .dialog-body{max-height:60vh;font-size:.92rem} /* Filters */ .split{grid-template-columns:1fr;gap:.4rem} .filter-row label,.label{font-size:.82rem} .filter-row input[type="search"]{font-size:.92rem;padding:.5rem .6rem} .checklist{max-height:140px} .check-item{font-size:.9rem;padding:.3rem .5rem} /* Tables */ .report-table-scroll{margin:0 -.8rem;padding:0 .8rem} .data-table{font-size:.78rem} /* Buttons */ .btn{font-size:.88rem;padding:.5rem .8rem} .btn.small{font-size:.82rem} /* Client list */ .client-title{font-size:.95rem} .client-meta{font-size:.85rem} .chip-btn{font-size:.8rem;padding:.25rem .55rem} /* Panels */ details.panel>summary{font-size:.95rem;padding:.7rem .8rem} /* Obiective */ .obj-metrics{grid-template-columns:1fr} .obj-metric-box-value{font-size:.95rem} .obj-agent-name{font-size:.82rem} /* Ziua mea */ .zm-grid{grid-template-columns:1fr 1fr} .zm-card{padding:10px 12px} .zm-card-icon{font-size:1.4rem} .zm-card-value{font-size:1rem} } /* ══════════════════════════════════════════════════════════════ 40. RESPONSIVE - Mobile (600px) ══════════════════════════════════════════════════════════════ */ @media(max-width:600px){ .home-grid-items{grid-template-columns:repeat(3,1fr);gap:10px} .zm-grid{grid-template-columns:1fr} .obj-metrics{grid-template-columns:1fr 1fr} .division-selector select{font-size:.78rem;padding:.3rem .4rem} .topbar .user{display:none} } /* ══════════════════════════════════════════════════════════════ 41. RESPONSIVE - Small Mobile (480px) ══════════════════════════════════════════════════════════════ */ @media(max-width:480px){ .home-grid-items{grid-template-columns:repeat(2,1fr);gap:8px} .topbar h1{font-size:.9rem} .tab-dropdown-btn{font-size:.82rem;min-width:100px;padding:.4rem .7rem} .sidebar{height:60vh} .map-wrap{height:40vh} .login-card{width:calc(100vw - 32px);padding:24px} .dash-ring-wrap{gap:.8rem} .dash-ring{width:72px;height:72px} .dash-ring-pct{font-size:.9rem} } /* ══════════════════════════════════════════════════════════════ 42. PRINT STYLES ══════════════════════════════════════════════════════════════ */ @media print{ body{background:#fff;color:#000;font-size:12px} .topbar,.sidebar,.map-wrap,#map,.back-to-menu-btn,.home-grid,.toast,.btn,.help-btn{display:none!important} .layout{display:block;height:auto} .main-content{overflow:visible} .data-table th{background:#eee;color:#000;border-bottom:2px solid #000} .data-table td{border-bottom:1px solid #ccc;color:#000} .card,.stat-card,.kpi-card,.report-card,.panel{border:1px solid #ccc;box-shadow:none;background:#fff} a{color:#000;text-decoration:underline} }