/* LCG Comms Center — shared UI styles. Layers on top of /brand.css tokens + Tailwind Play CDN. Dark mode via `.dark` on . */ :root { color-scheme: light; } .dark { color-scheme: dark; } html, body { height: 100%; } body { background: var(--lcg-bg); color: var(--lcg-text); font-family: var(--lcg-font-sans); font-weight: 400; margin: 0; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.01em; } /* ---- Surfaces ---- */ .lcg-surface { background: var(--lcg-bg); border: 1px solid var(--lcg-border); } .lcg-panel { background: var(--lcg-surface); } .lcg-muted { color: var(--lcg-text-muted); } .lcg-border-c { border-color: var(--lcg-border) !important; } /* ---- Top nav ---- */ .lcg-topnav { background: var(--lcg-forrest); color: #fff; } .lcg-topnav a.navlink { color: rgba(255,255,255,0.78); font-weight: 600; padding: 0.45rem 0.85rem; border-radius: 0.5rem; transition: background .15s, color .15s; white-space: nowrap; } .lcg-topnav a.navlink:hover { color: #fff; background: rgba(255,255,255,0.10); } .lcg-topnav a.navlink.active { color: #fff; background: rgba(64,166,113,0.30); box-shadow: inset 0 -2px 0 var(--lcg-lime); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-weight: 600; font-size: .875rem; line-height: 1; padding: .6rem .95rem; border-radius: .6rem; cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s, opacity .15s; white-space: nowrap; } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn-primary { background: var(--lcg-primary); color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--lcg-primary-hover); } .dark .btn-primary { color: var(--lcg-ink); } .btn-ghost { background: transparent; color: var(--lcg-text); border-color: var(--lcg-border); } .btn-ghost:hover:not(:disabled) { background: var(--lcg-surface); } .btn-danger { background: var(--lcg-danger); color: #fff; } .btn-danger:hover:not(:disabled) { background: #b91c1c; } .btn-sm { padding: .4rem .7rem; font-size: .8rem; border-radius: .5rem; } /* ---- Inputs ---- */ .field { width: 100%; background: var(--lcg-bg); color: var(--lcg-text); border: 1px solid var(--lcg-border); border-radius: .6rem; padding: .6rem .8rem; font-size: .9rem; font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s; } .field:focus { border-color: var(--lcg-primary); box-shadow: 0 0 0 3px rgba(12,108,58,0.18); } .dark .field:focus { box-shadow: 0 0 0 3px rgba(64,166,113,0.22); } .field::placeholder { color: var(--lcg-gray-2); } label.lbl { display:block; font-size:.78rem; font-weight:600; margin-bottom:.3rem; color: var(--lcg-text-muted); } /* ---- Badges / chips ---- */ .badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.7rem; font-weight:600; padding:.18rem .5rem; border-radius:999px; border:1px solid var(--lcg-border); } .badge-open { background: rgba(64,166,113,.15); color: var(--lcg-moss); border-color: rgba(64,166,113,.4); } .badge-snoozed { background: rgba(229,180,34,.15); color: var(--lcg-gold-dark);border-color: rgba(229,180,34,.45); } .badge-closed { background: rgba(128,130,133,.18); color: var(--lcg-gray-1); border-color: var(--lcg-gray-3); } .dark .badge-open { color: var(--lcg-lime); } .dark .badge-closed { color: var(--lcg-gray-3); } .chip { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:600; padding:.2rem .55rem; border-radius:999px; background: rgba(64,166,113,.14); color: var(--lcg-moss); border:1px solid rgba(64,166,113,.35); } .dark .chip { color: var(--lcg-lime); } .chip button { line-height:1; opacity:.7; } .chip button:hover { opacity:1; } /* ---- Channel pills ---- */ .pill-ch { font-size:.68rem; font-weight:700; padding:.12rem .45rem; border-radius:.4rem; text-transform:uppercase; letter-spacing:.03em; } .pill-sms { background: rgba(64,166,113,.16); color: var(--lcg-moss); } .pill-email { background: rgba(1,68,33,.12); color: var(--lcg-forrest); } .pill-voice { background: rgba(229,180,34,.18); color: var(--lcg-gold-dark); } .pill-teams { background: rgba(88,89,91,.16); color: var(--lcg-gray-1); } .dark .pill-sms { color: var(--lcg-lime); } .dark .pill-email { color: var(--lcg-lime); } .dark .pill-teams { color: var(--lcg-gray-3); } /* ---- Conversation list ---- */ .conv-item { cursor:pointer; border-bottom:1px solid var(--lcg-border); padding:.75rem .85rem; transition:background .12s; } .conv-item:hover { background: var(--lcg-surface); } .conv-item.active { background: rgba(64,166,113,.12); box-shadow: inset 3px 0 0 var(--lcg-primary); } .conv-item .dot-unread { width:.5rem; height:.5rem; border-radius:999px; background: var(--lcg-lime); } /* ---- Message bubbles ---- */ .msg-row { display:flex; margin-bottom:.7rem; } .msg-row.out { justify-content:flex-end; } .bubble { max-width: 72%; padding:.6rem .8rem; border-radius:1rem; font-size:.9rem; line-height:1.4; word-break: break-word; white-space: pre-wrap; } .bubble.in { background: var(--lcg-surface); color: var(--lcg-text); border-bottom-left-radius:.25rem; border:1px solid var(--lcg-border); } .bubble.out { background: var(--lcg-primary); color:#fff; border-bottom-right-radius:.25rem; } .dark .bubble.out { color: var(--lcg-ink); } .msg-meta { font-size:.66rem; margin-top:.2rem; opacity:.85; } /* ---- Table ---- */ .lcg-table { width:100%; border-collapse:collapse; font-size:.875rem; } .lcg-table th { text-align:left; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--lcg-text-muted); padding:.6rem .8rem; border-bottom:1px solid var(--lcg-border); background: var(--lcg-surface); } .lcg-table td { padding:.65rem .8rem; border-bottom:1px solid var(--lcg-border); vertical-align:middle; } .lcg-table tbody tr:hover { background: var(--lcg-surface); } /* ---- Modal ---- */ .modal-backdrop { position:fixed; inset:0; background:rgba(35,31,32,.55); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; z-index:60; padding:1rem; } .modal-card { background: var(--lcg-bg); color: var(--lcg-text); border:1px solid var(--lcg-border); border-radius:1rem; width:100%; max-width:34rem; max-height:90vh; overflow:auto; box-shadow: 0 20px 60px rgba(0,0,0,.35); } /* ---- Toast ---- */ #lcg-toasts { position:fixed; bottom:1.25rem; right:1.25rem; z-index:90; display:flex; flex-direction:column; gap:.5rem; } .toast { padding:.7rem 1rem; border-radius:.6rem; font-size:.85rem; font-weight:600; color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.25); animation: toastin .2s ease; } .toast-ok { background: var(--lcg-moss); } .toast-err { background: var(--lcg-danger); } .toast-info { background: var(--lcg-gray-1); } @keyframes toastin { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } /* ---- Stat cards ---- */ .stat-card { background: var(--lcg-bg); border:1px solid var(--lcg-border); border-radius:.85rem; padding:1rem 1.1rem; } .stat-num { font-size:1.65rem; font-weight:800; line-height:1; color: var(--lcg-primary); } .stat-lbl { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color: var(--lcg-text-muted); margin-top:.4rem; } /* ---- Tabs ---- */ .tab { font-weight:600; font-size:.85rem; padding:.55rem .9rem; border-radius:.55rem; cursor:pointer; color: var(--lcg-text-muted); } .tab:hover { background: var(--lcg-surface); } .tab.active { background: var(--lcg-primary); color:#fff; } .dark .tab.active { color: var(--lcg-ink); } /* ---- Toggle switch ---- */ .switch { position:relative; display:inline-block; width:2.6rem; height:1.45rem; } .switch input { opacity:0; width:0; height:0; } .switch .track { position:absolute; inset:0; background: var(--lcg-gray-3); border-radius:999px; transition:.18s; } .switch .track:before { content:""; position:absolute; height:1.05rem; width:1.05rem; left:.2rem; bottom:.2rem; background:#fff; border-radius:999px; transition:.18s; } .switch input:checked + .track { background: var(--lcg-primary); } .switch input:checked + .track:before { transform: translateX(1.15rem); } /* ---- Scrollbars ---- */ .scroll-y { overflow-y:auto; } .scroll-y::-webkit-scrollbar { width:9px; } .scroll-y::-webkit-scrollbar-thumb { background: var(--lcg-gray-3); border-radius:999px; } .dark .scroll-y::-webkit-scrollbar-thumb { background: #4a4647; } .empty { color: var(--lcg-text-muted); font-size:.9rem; text-align:center; padding:2rem 1rem; } .spinner { width:1.1rem; height:1.1rem; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:999px; animation:spin .7s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }