:root { --bg: #0f1115; --bg-elev: #171a21; --bg-elev-2: #1e222b; --bg-hover: #232732; --border: #2a2f3a; --text: #e7ebf0; --text-dim: #97a0ad; --text-faint: #6b7480; --accent: #3b82f6; --accent-hover: #2f6fe0; --green: #22c55e; --red: #ef4444; --orange: #f59e0b; --radius: 12px; --shadow: 0 8px 30px rgba(0,0,0,.35); --header-h: 60px; --login-glow: #1b2330; --player-track: #2a3140; --player-buffer: #4a5d7a; --player-played: #3b82f6; --player-thumb: #ffffff; --player-thumb-ring: #3b82f6; font-synthesis: none; } /* ---------- Light theme ---------- */ :root[data-theme="light"] { --bg: #f3f5f9; --bg-elev: #ffffff; --bg-elev-2: #eef1f6; --bg-hover: #e6eaf1; --border: #dde2ec; --text: #1b2230; --text-dim: #5a6473; --text-faint: #8b95a4; --accent: #2f6fe0; --accent-hover: #2560c8; --shadow: 0 10px 30px rgba(23,38,66,.12); --login-glow: #dbe6fb; --player-track: #d8dee9; --player-buffer: #a8b8d4; --player-played: #2f6fe0; --player-thumb: #ffffff; --player-thumb-ring: #2f6fe0; } * { box-sizing: border-box; } /* Smooth, flicker-free theme switching. Transitions are enabled only for the brief moment a theme toggle happens (the .theme-transition class is added to by JS and removed right after), so every surface — backgrounds, borders, text and icons — fades together instead of snapping element by element. Keeping it scoped to the toggle avoids interfering with normal hover/UI animations and the initial page load. */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color .3s ease, border-color .3s ease, color .3s ease, fill .3s ease, stroke .3s ease, box-shadow .3s ease, opacity .3s ease, transform .3s ease !important; transition-delay: 0s !important; } @media (prefers-reduced-motion: reduce) { html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: none !important; } } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; transition: background .2s ease, color .2s ease; } .hidden { display: none !important; } /* The `hidden` attribute must win over class-level display:flex/grid. */ [hidden] { display: none !important; } /* ---------- Login ---------- */ .login-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(1200px 600px at 50% -10%, var(--login-glow) 0%, var(--bg) 55%); padding: 20px; } .login-card { width: 100%; max-width: 360px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 16px; padding: 32px 28px; box-shadow: var(--shadow); text-align: center; animation: pop .25s ease; } @keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } } .login-logo { font-size: 28px; font-weight: 700; letter-spacing: -.5px; margin-bottom: 6px; } .login-logo span { color: var(--accent); } .login-card h1 { font-size: 18px; margin: 4px 0 2px; } .login-sub { color: var(--text-dim); margin: 0 0 22px; font-size: 13px; } .login-card input { width: 100%; padding: 13px 14px; margin-bottom: 14px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 15px; outline: none; transition: border-color .15s; } .login-card input:focus { border-color: var(--accent); } .login-card button { width: 100%; padding: 13px; border: none; border-radius: 10px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s; } .login-card button:hover { background: var(--accent-hover); } .login-error { color: var(--red); font-size: 13px; min-height: 18px; margin-top: 12px; } /* ---------- App shell ---------- */ .app { display: flex; height: 100%; overflow: hidden; } .backdrop { display: none; } .sidebar { width: 320px; flex-shrink: 0; background: var(--bg-elev); border-right: 1px solid var(--border); display: flex; flex-direction: column; } .sidebar-header { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding: 0 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); flex-shrink: 0; transition: background .2s, box-shadow .2s; } .brand-dot.online { background: var(--green); box-shadow: 0 0 0 4px rgba(34,197,94,.15); } .brand-dot.connecting { background: #eab308; box-shadow: 0 0 0 4px rgba(234,179,8,.15); } .brand-dot.offline { background: var(--red); box-shadow: 0 0 0 4px rgba(239,68,68,.15); } .brand-text h1 { font-size: 16px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .icon-btn { background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text-dim); width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; transition: .15s; } .icon-btn:hover { background: var(--bg-hover); color: var(--text); } .icon-btn-danger { color: #ff8b8b; border-color: rgba(239,68,68,.35); } .icon-btn-danger:hover { background: rgba(239,68,68,.14); color: #ff9090; } .wipe-all-btn { color: #ff8b8b; border-color: rgba(239,68,68,.35); } .wipe-all-btn:hover { background: rgba(239,68,68,.16); color: #ff9090; border-color: rgba(239,68,68,.6); } /* Theme toggle: show the icon of the theme you can switch to. The two icons are stacked and cross-fade with a small rotate so switching looks smooth instead of snapping. */ .theme-toggle { position: relative; } .theme-toggle .icon-sun, .theme-toggle .icon-moon { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; transition: opacity .3s ease, transform .3s ease; } .theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(.5); } .theme-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); } :root[data-theme="light"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(.5); } :root[data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); } .search-box { padding: 12px 14px; flex-shrink: 0; } .search-box input { width: 100%; padding: 10px 12px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 9px; color: var(--text); outline: none; } .search-box input:focus { border-color: var(--accent); } .branch-list { flex: 1; overflow-y: auto; padding: 4px 8px 12px; } .branch-item { padding: 10px 12px; border-radius: 10px; cursor: pointer; margin-bottom: 4px; transition: background .12s; position: relative; display: flex; align-items: center; gap: 11px; } .branch-item:hover { background: var(--bg-hover); } .branch-item.active { background: linear-gradient(90deg, rgba(59,130,246,.18), rgba(59,130,246,.06)); border: 1px solid rgba(59,130,246,.35); padding: 9px 11px; } .branch-avatar { position: relative; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: #fff; background: linear-gradient(135deg, #4f8cff, #7c5cff); text-transform: uppercase; user-select: none; } .presence { position: absolute; bottom: -1px; right: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg-elev); } .presence.on { background: var(--green); } .presence.off { background: #9aa4b2; } .branch-body { min-width: 0; flex: 1; } .branch-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .branch-preview { color: var(--text-dim); font-size: 12.5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .branch-time { color: var(--text-faint); font-size: 11px; margin-top: 3px; } /* ---------- Content ---------- */ .content { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg); } .content-header { display: flex; align-items: center; gap: 14px; height: var(--header-h); padding: 0 20px; border-bottom: 1px solid var(--border); background: var(--bg-elev); flex-shrink: 0; } .header-info { flex: 1; min-width: 0; } .header-info h2 { font-size: 17px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .branch-meta { font-size: 12.5px; color: var(--text-dim); } .header-actions { display: flex; gap: 8px; } .menu-toggle { display: none; } .btn-ghost, .btn-danger { border: 1px solid var(--border); background: var(--bg-elev-2); color: var(--text); padding: 8px 14px; border-radius: 9px; cursor: pointer; font-size: 13px; transition: .15s; } .btn-ghost:hover { background: var(--bg-hover); } .btn-danger { color: #ff8b8b; border-color: rgba(239,68,68,.4); } .btn-danger:hover { background: rgba(239,68,68,.14); } .log-list { flex: 1; overflow: hidden; padding: 0; display: flex; flex-direction: column; min-height: 0; } /* The table is split into a non-scrolling header and a scrolling body so the scrollbar stays beside the rows only (never over the header). Both reserve an identical scrollbar gutter so the columns line up, and the header's reserved gutter is header-coloured so the header visually reaches the right edge. */ .log-table-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; } .log-thead-scroll { flex: 0 0 auto; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; background: var(--bg-elev); } .log-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; } /* ---------- Log table ---------- */ .log-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; } .log-table col.col-time { width: 11%; } .log-table col.col-number { width: 26%; } .log-table col.col-account { width: 18%; } .log-table col.col-status { width: 19%; } .log-table col.col-dur { width: 13%; } .log-table col.col-rec { width: 13%; } .log-table thead th { background: var(--bg-elev); text-align: center; font-weight: 600; color: var(--text-dim); font-size: 12px; padding: 11px 10px; border-bottom: 1px solid var(--border); white-space: normal; line-height: 1.25; } .log-table tbody td { padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; text-align: center; } .log-table tbody tr { animation: slideIn .18s ease; } .log-table tbody tr:hover { background: var(--bg-hover); } .log-table .c-number { font-weight: 600; word-break: break-word; } .num-cell { display: inline-flex; align-items: center; gap: 7px; justify-content: center; } .call-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .call-ico.incoming { color: var(--green); } .call-ico.outgoing { color: var(--accent); } .call-ico.missed { color: var(--red); } .call-ico.other { color: var(--text-faint); } .log-table .c-sub { color: var(--text-faint); font-size: 11.5px; font-weight: 400; margin-top: 2px; } .log-table .c-time, .log-table .c-dur { white-space: nowrap; color: var(--text-dim); } .log-table .c-account, .log-table .c-status { color: var(--text-dim); word-break: break-word; } .status-error { display: inline-block; padding: 2px 9px; border: 1px solid var(--red); border-radius: 999px; background: rgba(239, 68, 68, .12); color: var(--red); font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; } .log-loader { text-align: center; color: var(--text-faint); font-size: 12.5px; padding: 12px; } /* ---------- Empty / loading states ---------- */ .empty-state { margin: auto; text-align: center; color: var(--text-dim); max-width: 400px; padding: 32px 24px; } .empty-icon { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text-faint); } .empty-icon svg { width: 34px; height: 34px; } .empty-title { font-size: 15.5px; color: var(--text); font-weight: 600; margin: 0 0 6px; } .empty-sub { font-size: 13px; color: var(--text-dim); margin: 0; line-height: 1.5; } .empty-emoji { font-size: 44px; margin-bottom: 10px; } .log-loading { margin: auto; display: flex; align-items: center; justify-content: center; padding: 40px; } .spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes slideIn { from { opacity: 0; transform: translateY(6px); } } .log-play { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; cursor: pointer; transition: .15s; } .log-play:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--accent); } .log-play svg { color: var(--accent); } .log-play.active { border-color: var(--accent); background: rgba(59,130,246,.12); } .log-play:disabled { opacity: .45; cursor: default; color: var(--text-faint); } .log-play:disabled svg { color: var(--text-faint); } /* Play + download buttons side by side in the "Запись" column. */ .rec-actions { display: inline-flex; align-items: center; gap: 6px; } .log-download { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--accent); border-radius: 8px; cursor: pointer; transition: .15s; } .log-download:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--accent); } .log-download:disabled { opacity: .45; cursor: default; color: var(--text-faint); } .log-download:disabled svg { color: var(--text-faint); } /* ---------- Live "in call" indicator ---------- */ .call-live { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; color: var(--green); vertical-align: middle; } .call-live > svg { animation: callShake 1s ease-in-out infinite; transform-origin: center; } .call-live-wave { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; } /* --ad is a negative delay set per element from wall-clock time, so a freshly re-rendered icon picks up the animation mid-cycle (in phase) instead of restarting from zero — the wave looks continuous across re-renders. */ .call-live-wave i { width: 2px; height: 4px; border-radius: 2px; background: currentColor; animation: callWave 1s ease-in-out infinite; animation-delay: var(--ad, 0ms); } .call-live-wave i:nth-child(2) { animation-delay: calc(var(--ad, 0ms) + .15s); } .call-live-wave i:nth-child(3) { animation-delay: calc(var(--ad, 0ms) + .3s); } h2 .call-live { color: var(--green); } @keyframes callShake { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-12deg) scale(1.08); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(5deg); } } @keyframes callWave { 0%, 100% { height: 4px; opacity: .55; } 50% { height: 12px; opacity: 1; } } /* ---------- Active calls indicator (header) ---------- */ .active-calls-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 10px; } .active-calls-btn .ac-ico { display: inline-flex; align-items: center; gap: 3px; color: var(--text-dim); } .active-calls-btn .ac-wave { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; } .active-calls-btn .ac-wave i { width: 2px; height: 4px; border-radius: 2px; background: currentColor; opacity: .5; } .active-calls-btn .ac-count { min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text-dim); font-size: 11.5px; font-weight: 700; line-height: 1; } .active-calls-btn.has-calls .ac-ico { color: var(--green); } .active-calls-btn.has-calls .ac-ico > svg { animation: callShake 1s ease-in-out infinite; transform-origin: center; } .active-calls-btn.has-calls .ac-wave i { animation: callWave 1s ease-in-out infinite; } .active-calls-btn.has-calls .ac-wave i:nth-child(2) { animation-delay: .15s; } .active-calls-btn.has-calls .ac-wave i:nth-child(3) { animation-delay: .3s; } .active-calls-btn.has-calls .ac-count { background: rgba(34, 197, 94, .15); border-color: var(--green); color: var(--green); } /* ---------- Active calls modal list ---------- */ /* Fixed height of ~5 rows so the modal never resizes/jumps as calls come and go; anything beyond simply scrolls. */ .active-calls-list { display: flex; flex-direction: column; gap: 8px; height: 330px; max-height: 62vh; overflow-y: auto; /* Cards span the full modal width: no side padding and no reserved gutter. Scrolling still works, but the scrollbar itself is fully hidden (rules below) so it never takes width or shifts the cards. */ padding: 0; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* legacy Edge/IE */ } .active-calls-list::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Chromium/WebKit */ /* Trailing flex spacer so the last card is fully visible when scrolled to the bottom (works around the flex padding-bottom scroll bug). */ .active-calls-list::after { content: ''; display: block; flex: 0 0 8px; } .ac-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); } .ac-item .ac-avatar { position: relative; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-elev-2); color: var(--text); font-weight: 700; font-size: 14px; } .ac-item .ac-body { flex: 1 1 auto; min-width: 0; } .ac-item .ac-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 7px; } .ac-item .ac-sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; } .ac-item .ac-timer { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; color: var(--green); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--green); background: rgba(34, 197, 94, .12); white-space: nowrap; } .ac-empty { text-align: center; color: var(--text-faint); font-size: 13px; padding: 22px 8px; } /* ---------- Player ---------- */ .player { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--border); background: var(--bg-elev); } .player-info { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 13px; white-space: nowrap; flex: 0 0 auto; max-width: 28%; overflow: hidden; text-overflow: ellipsis; } .player-info svg { color: var(--accent); flex-shrink: 0; } .player-controls { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .player-play-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; flex-shrink: 0; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 50%; color: var(--accent); cursor: pointer; transition: .15s; } .player-play-btn:hover { background: var(--bg-hover); border-color: var(--accent); } .player-play-btn.is-playing .icon-play { display: none; } .player-play-btn.is-playing .icon-pause { display: block !important; } .player-scrubber { position: relative; flex: 1; height: 28px; min-width: 80px; display: flex; align-items: center; } .player-scrubber-track { position: absolute; left: 0; right: 0; height: 6px; border-radius: 999px; background: var(--player-track); overflow: hidden; pointer-events: none; } .player-scrubber-buffer, .player-scrubber-played { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; transition: width .08s linear; } .player-scrubber-buffer { background: var(--player-buffer); z-index: 1; } .player-scrubber-played { background: var(--player-played); z-index: 2; } .player-seek { -webkit-appearance: none; appearance: none; position: relative; z-index: 3; width: 100%; height: 28px; margin: 0; padding: 0; background: transparent; cursor: pointer; } .player-seek:focus { outline: none; } .player-seek:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(59,130,246,.35); } .player-seek::-webkit-slider-runnable-track { height: 6px; background: transparent; border: none; } .player-seek::-moz-range-track { height: 6px; background: transparent; border: none; } .player-seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -4px; border-radius: 50%; border: 2px solid var(--player-thumb-ring); background: var(--player-thumb); box-shadow: 0 1px 4px rgba(0,0,0,.28); opacity: 1; } .player-seek::-moz-range-thumb { width: 14px; height: 14px; border: none; border-radius: 50%; border: 2px solid var(--player-thumb-ring); background: var(--player-thumb); box-shadow: 0 1px 4px rgba(0,0,0,.28); } .player-time { flex: 0 0 auto; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---------- Composer ---------- */ .composer { display: flex; align-items: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); background: var(--bg-elev); } .composer textarea { flex: 1; resize: none; min-height: 44px; max-height: 140px; height: 44px; padding: 11px 14px; border-radius: 14px; background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 14.5px; line-height: 1.4; outline: none; overflow-y: hidden; scrollbar-width: none; } .composer textarea::-webkit-scrollbar { width: 0; height: 0; } .composer textarea:focus { border-color: var(--accent); } .send-btn { width: 44px; height: 44px; flex-shrink: 0; border: none; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: .15s; } .send-btn:hover { background: var(--accent-hover); transform: scale(1.05); } .send-btn:disabled { background: var(--bg-hover); color: var(--text-faint); cursor: default; transform: none; } /* ---------- Toast (top, auto-dismiss) ---------- */ .toast { position: fixed; top: 22px; left: 50%; transform: translateX(-50%) translateY(-24px); display: flex; align-items: center; gap: 9px; background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text); padding: 12px 18px; border-radius: 12px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s; z-index: 200; font-size: 14px; max-width: calc(100vw - 32px); } .toast::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.error { border-color: rgba(239,68,68,.5); } .toast.error::before { background: var(--red); } .toast.success { border-color: rgba(34,197,94,.5); } .toast.success::before { background: var(--green); } /* ---------- Modal ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; animation: fade .15s ease; } @keyframes fade { from { opacity: 0; } } .modal { width: 100%; max-width: 390px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); animation: pop .2s ease; } .modal h3 { margin: 0 0 8px; font-size: 17px; } .modal p { margin: 0 0 16px; color: var(--text-dim); font-size: 14px; line-height: 1.5; } /* ---------- Statistics modal ---------- */ .stats-modal { max-width: 480px; } .stats-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .stats-head h3 { margin: 0; font-size: 16px; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .stats-loading { grid-column: 1 / -1; text-align: center; color: var(--text-dim); padding: 20px; } .stat-card { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 12px; text-align: center; } .stat-value { font-size: 22px; font-weight: 700; color: var(--text); } .stat-label { font-size: 12px; color: var(--text-dim); margin-top: 4px; } .stat-sub { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; } .modal input { width: 100%; padding: 11px 13px; margin-bottom: 18px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 15px; outline: none; } .modal input:focus { border-color: var(--accent); } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; } .btn-primary { border: none; background: var(--accent); color: #fff; padding: 9px 18px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 400; transition: .15s; } .btn-primary:hover { background: var(--accent-hover); } .btn-primary.danger { background: var(--red); } .btn-primary.danger:hover { background: #dc2626; } /* ---------- Scrollbars ---------- */ /* Straight (no rounded ends) everywhere there is scrolling. */ ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; border-radius: 0; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 0; } ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); } * { scrollbar-color: var(--border) transparent; } /* ---------- Responsive ---------- */ @media (max-width: 980px) { .sidebar { width: 280px; } } @media (max-width: 760px) { .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 86%; max-width: 340px; transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow); } .app.sidebar-open .sidebar { transform: translateX(0); } .app.sidebar-open .backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 20; } .menu-toggle { display: inline-flex; } /* No branch selected: the list fills the screen, the empty content is hidden. */ .app.no-branch .sidebar { position: static; transform: none; width: 100%; max-width: none; box-shadow: none; border-right: none; } .app.no-branch .content { display: none; } .app.no-branch .backdrop { display: none; } .content-header { padding: 0 14px; } .header-actions { gap: 6px; } .header-actions .icon-btn { width: 32px; height: 32px; } .log-table thead th, .log-table tbody td { padding: 9px 8px; } .log-table { font-size: 12px; } .player, .composer { padding-left: 12px; padding-right: 12px; } .player-info { max-width: 22%; } .player-time { font-size: 11px; } } @media (max-width: 560px) { /* Hide the telephony/account column to keep the table readable on phones. */ .log-table col.col-account { width: 0; } .log-table thead th:nth-child(3), .log-table tbody td:nth-child(3) { display: none; } .header-info h2 { font-size: 16px; } .branch-meta { font-size: 11.5px; } .empty-icon { width: 64px; height: 64px; } .empty-icon svg { width: 28px; height: 28px; } .modal { padding: 20px; } .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 380px) { .log-table col.col-status { width: 0; } .log-table thead th:nth-child(4), .log-table tbody td:nth-child(4) { display: none; } .stats-grid { grid-template-columns: 1fr; } }