@import url("dashboard/cards.css"); @import url("dashboard/responsive.css"); @import url("dashboard/tickets.css"); @import url("settings/configuration.css"); @import url("ticket_template/template.css"); @import url("transcripts/public.css"); * { box-sizing: border-box; } :root { --accent-cyan: #18cbea; --accent-silver: #d8d8d8; --background: #050709; --card: rgba(11, 18, 24, 0.92); --card-border: rgba(24, 203, 234, 0.28); --danger: #ff6666; --muted: #9fb3bc; --success: #6dffcf; --text: #f7fbff; --warning: #ffd166; } a { color: var(--accent-cyan); text-decoration: none; } body { background: radial-gradient( circle at top left, rgba(24, 203, 234, 0.18), transparent 34% ), var(--background); color: var(--text); font-family: Inter, Segoe UI, Arial, sans-serif; margin: 0; min-height: 100vh; } button { cursor: pointer; font: inherit; } dd { color: var(--text); margin: 0; } details { margin-top: 1rem; } dl { margin: 0; } dt { color: var(--muted); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } input, select { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(24, 203, 234, 0.24); border-radius: 14px; color: var(--text); min-height: 44px; padding: 0.75rem 0.9rem; } option { background: #071016; color: var(--text); } summary { color: var(--accent-cyan); cursor: pointer; font-weight: 800; } table { border-collapse: collapse; width: 100%; } td { border-bottom: 1px solid rgba(255, 255, 255, 0.07); color: var(--muted); padding: 1rem; vertical-align: middle; } th { border-bottom: 1px solid rgba(24, 203, 234, 0.25); color: var(--text); padding: 1rem; text-align: left; } .action-row { align-items: center; display: flex; flex-wrap: wrap; gap: 0.45rem; } .app-layout { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; } .brand { align-items: center; color: var(--text); display: flex; font-size: 1.15rem; font-weight: 800; gap: 0.8rem; letter-spacing: 0.04em; } .brand-logo { height: 54px; object-fit: contain; width: 54px; } .content-panel { padding: 2rem; } .copy-button { background: transparent; border: 0; color: var(--accent-cyan); padding: 0; } .error-banner { background: rgba(255, 73, 73, 0.16); border: 1px solid rgba(255, 73, 73, 0.4); border-radius: 14px; color: #ffdada; padding: 0.8rem; } .eyebrow { color: var(--accent-cyan); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; margin: 0 0 0.4rem; text-transform: uppercase; } .ghost-action { align-items: center; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; color: var(--muted); display: inline-flex; font-weight: 800; min-height: 44px; padding: 0 1rem; } .header-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: flex-end; } .login-card { align-items: center; background: linear-gradient(155deg, rgba(12, 18, 24, 0.98), rgba(0, 0, 0, 0.98)); border: 1px solid var(--card-border); border-radius: 28px; box-shadow: 0 0 50px rgba(24, 203, 234, 0.16); display: flex; flex-direction: column; gap: 1rem; margin: 8vh auto 0; max-width: 420px; padding: 2.3rem; text-align: center; } .login-card h1 { font-size: 2.6rem; line-height: 1; margin: 0; } .login-logo { height: 120px; object-fit: contain; width: 120px; } .login-page { display: block; } .muted-text { color: var(--muted); line-height: 1.6; } .navigation-bar { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 2rem; } .navigation-bar a { border: 1px solid transparent; border-radius: 16px; color: var(--muted); padding: 0.9rem 1rem; } .navigation-bar a.active, .navigation-bar a:hover { background: rgba(24, 203, 234, 0.1); border-color: var(--card-border); color: var(--text); } .page-header { align-items: center; display: flex; gap: 1rem; justify-content: space-between; } .page-header h1 { font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1; margin: 0; } .page-subtitle { color: var(--muted); margin: 0.8rem 0 0; } .primary-action { background: linear-gradient(90deg, var(--accent-cyan), #ffffff); border: 0; border-radius: 999px; color: #031216; display: inline-flex; font-weight: 800; padding: 0.9rem 1.4rem; } .secondary-action { align-items: center; background: rgba(24, 203, 234, 0.1); border: 1px solid var(--card-border); border-radius: 999px; color: var(--text); display: inline-flex; font-weight: 800; min-height: 44px; padding: 0 1rem; } .section-heading { align-items: center; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; } .section-heading h2 { margin: 0; } .session-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; display: grid; gap: 0.35rem; margin-top: 2rem; padding: 1rem; } .session-card span { color: var(--muted); font-size: 0.8rem; } .sidebar { background: linear-gradient(180deg, rgba(4, 9, 12, 0.98), rgba(0, 0, 0, 0.98)); border-right: 1px solid var(--card-border); padding: 2rem 1.25rem; } .small-action { align-items: center; background: rgba(24, 203, 234, 0.08); border: 1px solid rgba(24, 203, 234, 0.2); border-radius: 999px; color: var(--text); display: inline-flex; font-size: 0.82rem; font-weight: 800; min-height: 34px; padding: 0 0.75rem; } .status-closed { background: rgba(216, 216, 216, 0.12); color: var(--accent-silver); } .status-open { background: rgba(24, 203, 234, 0.12); color: var(--accent-cyan); } .status-pill { border-radius: 999px; display: inline-block; font-size: 0.82rem; font-weight: 800; padding: 0.35rem 0.7rem; } .text-button { font-weight: 800; } .toast { background: rgba(2, 8, 12, 0.96); border: 1px solid var(--card-border); border-radius: 999px; bottom: 1rem; color: var(--text); opacity: 0; padding: 0.75rem 1rem; pointer-events: none; position: fixed; right: 1rem; transform: translateY(14px); transition: opacity 0.2s ease, transform 0.2s ease; } .toast.visible { opacity: 1; transform: translateY(0); } .dashboard-server-bar { align-items: center; background: rgba(17, 26, 42, 0.78); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; display: flex; gap: 18px; justify-content: space-between; margin-bottom: 20px; padding: 12px 16px; } .dashboard-server-bar > div { display: grid; gap: 2px; } .dashboard-server-bar span { color: var(--muted-text, #91a0b8); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; } .dashboard-server-bar strong { color: #ffffff; } .dashboard-server-bar select { min-width: 240px; } .sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } @media (max-width: 760px) { .dashboard-server-bar { align-items: stretch; flex-direction: column; } .dashboard-server-bar select { width: 100%; } }