:root{ --bg: #fbfbfd; --bg2:#f6f3ff; --text:#0f172a; --muted:#475569; --border:#e6e1f2; --card:#ffffff; --soft:#f7f6fb; --soft-2:#eef2ff; --accent:#7c3aed; --accent2:#ec4899; --accent3:#22c55e; --shadow:0 14px 34px rgba(2, 6, 23, 0.09); --radius:18px; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color-scheme: light; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background: radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,.10), transparent 60%), radial-gradient(1000px 600px at 90% 0%, rgba(236,72,153,.10), transparent 55%), linear-gradient(180deg, var(--bg2), var(--bg)); color:var(--text); } .wrap{ max-width:1100px; margin:0 auto; padding:18px 18px 56px; } .wrap--stacked{ display:flex; flex-direction:column; gap:22px; } .wrap--stacked > section{ margin:0; } /* Global: nothing selectable */ body{ -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } /* Allow text selection on admin and portal pages (server adds .allow-text-select to ) */ body.allow-text-select, body.allow-text-select * { -webkit-user-select: text; user-select: text; } /* Header */ header{ position: sticky; top: 0; z-index: 50; background: rgba(251,251,253,0.86); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(124,58,237,.12); } .header-inner{ max-width:1100px; margin:0 auto; padding:12px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; } .brand{ display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit; min-width: 220px; } .logo{ width:46px;height:46px;border-radius:14px; background: linear-gradient(135deg, rgba(124,58,237,.16), rgba(236,72,153,.14)); border:1px solid rgba(124,58,237,.22); display:grid;place-items:center; font-weight:900; color:var(--accent); box-shadow: 0 10px 24px rgba(124,58,237,.12); } .brand strong{font-size:16px} .brand .sub{font-size:12px;color:var(--muted);margin-top:2px} .navwrap{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; } .btn-logout{ background:linear-gradient(135deg, var(--accent2), #f472b6); box-shadow:0 12px 26px rgba(236,72,153,.25); } .btn-logout:hover{ transform:translateY(-1px); } .portal-admin-switch{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:18px; border:1px solid rgba(124,58,237,.16); background:rgba(255,255,255,0.9); font-size:13px; color:var(--muted); } .portal-admin-switch label{ font-weight:700; letter-spacing:.04em; text-transform:uppercase; } .portal-admin-switch select{ border:1px solid rgba(148,163,184,0.45); border-radius:14px; padding:6px 10px; font-size:13px; background:#fff; color:var(--text); min-width:180px; } nav.nav{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:8px; background: rgba(238,242,255,.9); border:1px solid rgba(124,58,237,.14); border-radius: 999px; } .chip{ font-size:13px; text-decoration:none; color:var(--text); background:#ffffff; border:1px solid rgba(124,58,237,.12); padding:8px 10px; border-radius:999px; transition: transform 160ms ease, box-shadow 160ms ease; } .chip:hover{ transform: translateY(-1px); box-shadow:0 12px 24px rgba(124,58,237,.10); } .btn{ border:0; background: linear-gradient(135deg, var(--accent), var(--accent2)); color:#fff; padding:10px 14px; border-radius:14px; font-weight:800; cursor:pointer; box-shadow:0 12px 26px rgba(124,58,237,.18); white-space:nowrap; line-height:1; /* normalize height */ text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } html[data-theme="dark"] .btn{ background: linear-gradient(135deg, #8ba7ff, #ef7ca8); box-shadow:0 12px 26px rgba(0,0,0,.32); color:#EEF3ff; font-weight:900; } .btn--danger, .btn.btn-danger{ background: linear-gradient(135deg, #dc2626, #b91c1c); box-shadow:none; } .btn--danger:hover, .btn.btn-danger:hover{ box-shadow:0 12px 26px rgba(220,38,38,.18); } .btn--success, .btn.btn-success{ background: linear-gradient(135deg, #16a34a, #15803d); box-shadow:0 12px 26px rgba(22,163,74,.25); } .btn:focus,.chip:focus,input:focus,select:focus,textarea:focus,button:focus,.ghost:focus{ outline:3px solid rgba(124,58,237,.18); outline-offset:2px; } /* ===== Mobile header fix ===== */ .menuBtn{ display:none; border:1px solid rgba(124,58,237,.16); background:#fff; color:var(--text); padding:10px 12px; border-radius:14px; font-weight:900; cursor:pointer; line-height:1; /* normalize height */ } /* Mobile drawer */ .drawer{ position:fixed; inset:0; display:none; z-index:90; background: rgba(15,23,42,0.48); } .drawer.open{display:block} .drawer-panel{ position:absolute; top:0; right:0; width:min(360px, 92vw); height:100%; background: rgba(255,255,255,0.96); /* Two-factor toggle in admin user modal */ .two-factor-row { align-items: center; } .two-factor-text { line-height:1; } .two-factor-title { font-weight:700; font-size:14px; } .two-factor-hint { font-size:13px; color:var(--muted); margin-top:4px; } .switch { display:inline-block; position:relative; width:52px; height:30px; } .switch-input { position:absolute; opacity:0; width:0; height:0; } .switch-slider { position:absolute; cursor:pointer; inset:0; border-radius:999px; background: linear-gradient(180deg, #f0f3ff, #ffffff); border:1px solid rgba(124,58,237,.12); transition: background .18s ease, box-shadow .18s ease; box-shadow: inset 0 -6px 18px rgba(2,6,23,0.03); } .switch-slider:before { content:''; position:absolute; left:4px; top:4px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 6px 18px rgba(2,6,23,0.08); transition: transform .18s ease; } .switch-input:checked + .switch-slider { background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: rgba(124,58,237,.28); box-shadow: 0 8px 28px rgba(124,58,237,.12); } .switch-input:checked + .switch-slider:before { transform: translateX(22px); } /* Badges for 2FA status */ .badge { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; font-weight:700; font-size:13px; white-space:nowrap; line-height:1; } .badge--ok { background: linear-gradient(135deg,#d1fae5,#bbf7d0); color:#064e3b; border:1px solid rgba(16,185,129,.12); } .badge--pending { background: linear-gradient(135deg,#fffbeb,#fff7cc); color:#92400e; border:1px solid rgba(245,158,11,.08); } .badge--muted { background: linear-gradient(135deg,#f8fafc,#f1f5f9); color:var(--muted); border:1px solid rgba(148,163,184,.06); } border-left: 1px solid rgba(124,58,237,.14); box-shadow: 0 24px 80px rgba(2,6,23,0.28); padding: 14px; transform: translateX(10px); animation: slideIn 180ms ease forwards; } @keyframes slideIn{ from{transform: translateX(16px); opacity:0.85} to{transform: translateX(0); opacity:1} } .drawer-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom: 10px; border-bottom: 1px solid rgba(124,58,237,.12); margin-bottom: 12px; } .drawer-title{font-weight:900} .drawer-nav{ display:flex; flex-direction:column; gap:10px; } .drawer-link{ text-decoration:none; color:var(--text); background: rgba(238,242,255,.9); border: 1px solid rgba(124,58,237,.12); padding: 12px 12px; border-radius: 14px; font-weight:800; display:flex; justify-content:space-between; align-items:center; gap:10px; } .drawer-actions{ margin-top:12px; display:flex; flex-direction:column; gap:10px; } /* FIX: ghost buttons matched sizing with .btn */ .ghost{ border:1px solid rgba(124,58,237,.16); background:#fff; padding:10px 14px; /* match .btn */ border-radius:14px; font-weight:800; cursor:pointer; text-decoration:none; color:var(--text); text-align:center; display:inline-flex; /* normalize height */ align-items:center; justify-content:center; gap:8px; line-height:1; /* normalize height */ white-space:nowrap; } .ghost--soft{ background:rgba(255,255,255,0.96); border-color:rgba(124,58,237,.12); } .ghost--inline{ background:#fff; } .ghost--danger{ border-color:rgba(220,38,38,.4); background:rgba(254,242,242,.96); color:#991b1b; } .ghost--danger:hover{ border-color:rgba(220,38,38,.7); background:rgba(254,226,226,.98); } .confirm-overlay{ position:fixed; inset:0; z-index:1700; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(15,23,42,.55); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .2s ease; } .confirm-overlay.is-visible{ opacity:1; pointer-events:auto; } .confirm-dialog{ width:min(420px,calc(100vw - 48px)); background:rgba(255,255,255,.98); border-radius:22px; padding:26px; box-shadow:0 24px 60px rgba(15,23,42,.25); display:flex; flex-direction:column; gap:16px; } .confirm-title{ margin:0; font-size:1.05rem; font-weight:800; color:var(--text); } .confirm-detail{ margin:0; color:var(--muted); font-size:.92rem; } .confirm-actions{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; } /* Layout */ .hero{ display:grid; grid-template-columns: 1fr 420px; gap:18px; align-items:stretch; margin:22px 0 26px; } .card{ background: rgba(255,255,255,.92); border:1px solid rgba(124,58,237,.10); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); } .integration-list{display:grid;gap:12px} details.faq-item.integration-item{ border:1px solid rgba(124,58,237,.10); border-radius:18px; background: rgba(247,246,251,.85); box-shadow: var(--shadow); padding:12px 14px; } details.faq-item.integration-item summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; } details.faq-item.integration-item summary::-webkit-details-marker{display:none;} .integration-q{ display:flex; align-items:center; gap:12px; min-width:0; } .integration-icon{ width:34px;height:34px;border-radius:12px; display:grid;place-items:center; background: #fff; border:1px solid rgba(124,58,237,.12); flex:0 0 auto; } .integration-text strong{display:block;font-weight:900;color:var(--text)} .integration-text span{display:block;color:var(--muted);font-size:13px} details.faq-item .faq-content{overflow:hidden;height:0;} details.faq-item[open] .faq-content{height:auto;} details.faq-item summary .faq-toggle{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:22px;height:22px; font-weight:900; font-size:16px; line-height:1; color:var(--text); user-select:none; } details.faq-item summary .faq-toggle::before{content:"+";} details.faq-item[open] summary .faq-toggle::before{content:"-";} .logo-grid{ display:flex; flex-wrap:wrap; gap:8px; padding:10px 2px 2px; } .logo-chip{ font-size:12px; font-weight:700; color:#3b1a7a; background: rgba(124,58,237,.08); border:1px solid rgba(124,58,237,.14); padding:6px 10px; border-radius:999px; } html[data-theme="dark"] details.faq-item.integration-item{ background: rgba(12,16,36,.85); border:1px solid rgba(167,139,250,.22); box-shadow:none; } html[data-theme="dark"] .integration-icon{ background: rgba(12,16,36,.65); border:1px solid rgba(167,139,250,.22); } html[data-theme="dark"] .integration-text span{ color: rgba(226,232,240,.75); } html[data-theme="dark"] details.faq-item summary .faq-toggle{ color: var(--text); } html[data-theme="dark"] .logo-chip{ color:#e9d5ff; background: rgba(167,139,250,.16); border:1px solid rgba(167,139,250,.28); } .how-works h3{ margin:0 0 10px 0; } .how-works .steps{ list-style:none; padding:0; margin:0; display:grid; gap:10px; counter-reset:step; } .how-works .steps li{ display:flex; gap:12px; align-items:flex-start; background: rgba(247,246,251,.85); border: 1px solid rgba(124,58,237,.12); border-radius:14px; padding:10px 12px; color:var(--text); line-height:1.35; font-size:.95rem; } .how-works .steps li::before{ counter-increment:step; content: counter(step); width:26px; height:26px; border-radius:999px; background: rgba(124,58,237,.16); color:#3b2f63; font-weight:800; display:flex; align-items:center; justify-content:center; flex:0 0 26px; margin-top:1px; } /* KPI cards (stats tiles) */ .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; } .mini-card{ background: rgba(247,246,251,.85); border: 1px solid rgba(124,58,237,.12); border-radius: 16px; padding: 14px; box-shadow: 0 10px 26px rgba(15,23,42,.08); display:flex; flex-direction:column; gap:6px; } .mini-card-label{ font-size: 12px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); } .mini-card-value{ font-size: 22px; font-weight: 900; color: var(--text); line-height: 1.1; } .auth-card .lede{max-width:520px;color:var(--muted)} .auth-panels{ margin-top:18px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; } .auth-actions{ display:flex; gap:10px; flex-wrap:wrap; } .auth-panel{ border:1px solid rgba(124,58,237,.14); border-radius:18px; background:rgba(247,246,251,.9); padding:18px; display:flex; flex-direction:column; gap:12px; } [data-reset-panel][hidden]{display:none} .auth-panel-head h2{margin:0} .auth-panel-head p{margin:4px 0 0;font-size:13px;color:var(--muted)} .auth-form{display:flex;flex-direction:column;gap:10px} .auth-form .actions{margin-top:6px} .auth-panel .notice{margin-top:4px} .auth-panel--reset{justify-content:flex-start} .auth-panel--reset button[data-reset-toggle]{align-self:flex-start;margin-top:6px} .auth-panel--reset [data-reset-form]{margin-top:10px} .reset-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .reset-actions .ghost{background:rgba(255,255,255,0.92)} .reset-hint{font-size:12px;color:var(--muted);margin-top:8px} [data-reset-panel][data-reset-expanded="false"] .reset-hint{display:none} .notice.notice--success{ background:rgba(236,253,245,.95); border-color:rgba(16,185,129,.35); color:#065f46; } .kicker{ font-size:12px; font-weight:800; color:var(--accent); letter-spacing:.02em; text-transform:uppercase; } h1,h2,h3{margin:10px 0 8px} h1{font-size:28px;line-height:1.12} p{margin:0 0 10px;color:var(--muted);line-height:1.6} .pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px} .pill{ font-size:13px; background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.14); color:#3b1a7a; padding:8px 10px; border-radius:999px; font-weight:800; } .benefit-list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; } .benefit-list li{ background: rgba(247,246,251,.85); border: 1px solid rgba(124,58,237,.12); border-radius:14px; padding:10px 12px; color:var(--text); line-height:1.35; font-size:.88rem; font-weight:600; box-shadow:0 8px 20px rgba(15,23,42,.06); } .benefit-bubbles{ list-style:none; padding:0; margin:10px 0 0; display:grid; gap:10px; } .benefit-bubbles li{ background: rgba(247,246,251,.9); border: 1px solid rgba(124,58,237,.14); border-radius:16px; padding:10px 12px; color:var(--text); box-shadow:0 8px 20px rgba(15,23,42,.06); } .benefit-bubbles strong{ display:block; font-weight:900; margin-bottom:4px; } .benefit-bubbles span{ display:block; color:var(--muted); font-size:13px; line-height:1.4; } html[data-theme="dark"] .benefit-bubbles li{ background: rgba(12,16,36,.85); border: 1px solid rgba(167,139,250,.22); color: var(--text); box-shadow: none; } html[data-theme="dark"] .benefit-bubbles span{ color: rgba(226,232,240,.75); } html[data-theme="dark"] .benefit-list li{ background: rgba(12,16,36,.85); border: 1px solid rgba(167,139,250,.22); color: var(--text); box-shadow: none; } html[data-theme="dark"] .benefit-list li span, html[data-theme="dark"] .benefit-list li small{ color: rgba(226,232,240,.75); } html[data-theme="dark"] .device{ background: rgba(12,16,36,.85); border: 1px solid rgba(167,139,250,.22); box-shadow: none; } html[data-theme="dark"] .device span{ color: rgba(226,232,240,.75); } .mock .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px} .badge{ font-size:12px; padding:6px 10px; background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.20); color:#0f4a25; border-radius:999px; font-weight:800; display:inline-flex; align-items:center; white-space:nowrap; line-height:1; } .device{ display:flex; gap:12px; align-items:flex-start; background: rgba(247,246,251,.8); border:1px solid rgba(124,58,237,.10); border-radius:14px; padding:12px; margin-top:10px; } .icon{ width:42px;height:42px;border-radius:14px; display:grid;place-items:center; background:#fff; border:1px solid rgba(124,58,237,.10); font-size:20px; flex:0 0 auto; } .device strong{display:block} .device span{font-size:13px;color:var(--muted)} .section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:26px 0 10px} .section-title .hint{font-size:13px;color:var(--muted)} @media (max-width:720px){ .section-title{flex-direction:column;align-items:flex-start;gap:6px} .section-title .hint{margin-top:4px} } .grid{display:grid;grid-template-columns: repeat(3, 1fr);gap:14px;margin-bottom:18px} #services .services-grid{grid-template-columns: repeat(4, 1fr);} @media (max-width: 720px){ #services .services-grid{grid-template-columns: 1fr;} } /* Packages section styling */ #packages .card{ position:relative; overflow:hidden; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,246,251,.95)); border:1px solid rgba(124,58,237,.18); box-shadow:0 18px 46px rgba(15,23,42,.12); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; display:flex; flex-direction:column; cursor:pointer; } #packages .card::before{ content:""; position:absolute; inset:0; background: radial-gradient(220px 120px at 0% 0%, rgba(124,58,237,.16), transparent 60%), radial-gradient(220px 120px at 100% 0%, rgba(236,72,153,.14), transparent 60%); opacity:.9; pointer-events:none; } #packages .card::after{ content:""; position:absolute; left:0;right:0;top:0;height:4px; background:linear-gradient(90deg, rgba(124,58,237,.95), rgba(236,72,153,.85)); } #packages .card > *{position:relative;z-index:1;} #packages .card:hover{ transform: translateY(-4px); box-shadow:0 24px 60px rgba(15,23,42,.18); border-color: rgba(124,58,237,.35); } #packages .card h3{display:flex;align-items:center;gap:8px;} #packages .card h3::before{ content:"★"; font-size:14px; color:var(--accent); } #packages .card .lede{color:#3b2f63;} #packages .uc-lines{ list-style:none; padding-left:0; margin-top:10px; } #packages .uc-lines li{ position:relative; padding-left:22px; } #packages .uc-lines li::before{ content:"✓"; position:absolute; left:0;top:0; color:var(--accent); font-weight:900; } #packages .notice{ background: rgba(124,58,237,.08); border:1px solid rgba(124,58,237,.18); margin-top:0; } #packages .actions{ margin-top:auto; margin-bottom:10px; } #packages .actions .btn{ width:100%; justify-content:center; } ul{margin:10px 0 0;padding-left:18px;color:var(--muted);line-height:1.6} li{margin:6px 0} .features-list{display:flex;flex-direction:column;gap:10px} .feature{ display:flex;gap:12px;align-items:flex-start; background: rgba(247,246,251,.85); border:1px solid rgba(124,58,237,.10); border-radius:14px;padding:12px; } .feature .icon{font-size:18px} .feature strong{display:block} .feature span{font-size:13px;color:var(--muted)} .contact{display:grid;grid-template-columns: 1fr 360px;gap:14px;margin-top:18px} form{display:flex;flex-direction:column;gap:10px} .ref-carousel{ position:relative; display:grid; grid-template-columns: 44px 1fr 44px; align-items:center; gap:10px; } .ref-dots{ position:absolute; top:-6px; right:0; display:flex; gap:6px; align-items:center; } .ref-dot{ width:8px; height:8px; border-radius:999px; background: rgba(124,58,237,.25); border:1px solid rgba(124,58,237,.35); } .ref-dot.active{ background: rgba(124,58,237,.95); border-color: rgba(124,58,237,.95); } .ref-track{ position:relative; display:grid; grid-template-columns: 1fr; overflow:hidden; padding:6px 6px 10px; perspective: 1200px; } .ref-card{ width:100%; background: rgba(247,246,251,.92); border:1px solid rgba(124,58,237,.12); border-radius:18px; padding:20px; box-shadow: none; min-height:180px; display:flex; flex-direction:column; gap:8px; transform-style: preserve-3d; backface-visibility:hidden; } .ref-card.is-flipping{ animation: refFlip 600ms ease; } @keyframes refFlip{ 0%{transform: rotateY(0deg)} 50%{transform: rotateY(180deg)} 100%{transform: rotateY(360deg)} } html[data-theme="dark"] .ref-card{ background: rgba(12,16,36,.72); border-color: rgba(167,139,250,.18); } .ref-meta{ font-weight:800; } .ref-meta span{ display:block; font-weight:600; color:var(--muted); font-size:13px; } .ref-quote{ color:var(--text); line-height:1.6; } .ref-nav{ width:44px;height:44px;border-radius:12px; border:1px solid rgba(124,58,237,.18); background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(236,72,153,.10)); display:grid;place-items:center; font-size:22px;font-weight:900; cursor:pointer; box-shadow: none; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; } html[data-theme="dark"] .ref-nav{ background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(236,72,153,.18)); border-color: rgba(167,139,250,.32); color:var(--text); } .ref-nav:hover{ transform: translateY(-1px) scale(1.03); border-color: rgba(124,58,237,.35); } .ref-nav:active{ transform: translateY(0) scale(.98); } @media (max-width:720px){ .ref-carousel{grid-template-columns:36px 1fr 36px;} .ref-nav{ display:grid; width:36px; height:36px; font-size:18px; border-radius:10px; } .ref-dots{top:-4px;right:0;} } label{font-size:13px;color:var(--muted);font-weight:700} input:not([type="checkbox"]):not([type="radio"]), select, textarea{ width:100%; padding:12px; border-radius:14px; border:1px solid rgba(124,58,237,.14); background:#fff; color:var(--text); font-size:14px; } .field-hint{ margin:4px 0 0; font-size:12px; color:var(--muted); } .portal-selection-single{ margin:10px 0 14px; padding:12px 16px; border-radius:18px; border:1px solid rgba(124,58,237,0.18); background:linear-gradient(135deg, rgba(124,58,237,0.06), rgba(236,72,153,0.04)); display:flex; align-items:center; justify-content:space-between; gap:14px; } .portal-selection-single strong{ font-size:16px; font-weight:800; color:var(--text); } .portal-selection-hint, .portal-checkbox-empty{ margin:6px 0 0; font-size:12px; color:var(--muted); } .portal-choice{ display:flex; flex-direction:column; gap:6px; } .portal-choice--role-hidden{ display:none!important; } .portal-checkbox-grid{ margin-top:8px; display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:10px; } .portal-checkbox{ position:relative; display:block; } .portal-checkbox input{ position:absolute; inset:0; opacity:0; cursor:pointer; } .portal-checkbox span{ display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:16px; border:1px solid rgba(148,163,184,0.45); background:rgba(248,250,252,0.94); min-height:78px; transition:border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, transform 160ms ease; } .portal-checkbox strong{ font-size:14px; font-weight:700; color:var(--text); } .portal-checkbox small{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .portal-checkbox input:checked + span{ border-color:rgba(124,58,237,0.45); background:linear-gradient(130deg, rgba(124,58,237,0.12), rgba(236,72,153,0.08)); box-shadow:0 14px 28px rgba(124,58,237,0.16); transform:translateY(-1px); } .portal-choice--invalid .portal-checkbox span{ border-color:rgba(248,113,113,.6); background:rgba(248,113,113,.04); } .portal-key-pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; border:1px solid rgba(124,58,237,0.28); background:rgba(124,58,237,0.10); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#5b21b6; } .portal-selection-error{ margin:4px 0 0; font-size:12px; font-weight:600; color:#b91c1c; background:rgba(248,113,113,.08); border:1px solid rgba(248,113,113,.25); padding:8px 10px; border-radius:12px; } .admin-table{ width:100%; border-collapse:collapse; table-layout:auto; font-size:14px; } .ticket-table{ width:100%; border-collapse:collapse; font-size:14px; border-radius:18px; overflow:hidden; } /* Admin users/accounts mobile optimizations */ @media (max-width:720px){ .admin-users-controls{ flex-direction:column; align-items:stretch; } .admin-users-controls input[type="search"]{ max-width:100% !important; width:100%; } .admin-users-pagination{ flex-direction:column; align-items:flex-start; gap:10px; } .admin-users-page-links{ width:100%; flex-wrap:wrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; } .admin-users-page-links .chip{flex:0 0 auto} /* Convert the users table to stacked cards */ .admin-users-table-wrap{overflow-x:visible !important} table.admin-users-table thead{display:none} table.admin-users-table, table.admin-users-table tbody, table.admin-users-table tr, table.admin-users-table td{ display:block; width:100%; } table.admin-users-table tbody tr{ border:1px solid rgba(148,163,184,0.30); border-radius:16px; overflow:hidden; background:rgba(248,250,252,0.95); margin-bottom:10px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.65); } html[data-theme="dark"] table.admin-users-table tbody tr{ background:rgba(15,23,42,0.60); border-color:rgba(148,163,184,0.18); box-shadow:none; } table.admin-users-table tbody td{ padding:10px 12px !important; border-bottom:1px solid rgba(148,163,184,0.18) !important; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; } table.admin-users-table tbody td::before{ content:attr(data-label); font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } table.admin-users-table tbody td.admin-users-actions::before{display:none} table.admin-users-table tbody td.admin-users-actions{ border-bottom:0 !important; justify-content:flex-end; } table.admin-users-table tbody td.admin-users-actions .btn{ width:100%; justify-content:center; } } .admin-table thead th{ background:transparent; border-bottom:1px solid rgba(124,58,237,0.18); padding:10px 14px; font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--muted); text-align:left; white-space:nowrap; } .ticket-table thead th{ text-align:left; padding:10px 12px; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; background:rgba(124,58,237,0.06); color:var(--muted); border-bottom:1px solid rgba(124,58,237,0.18); } .admin-table tbody td{ padding:12px 14px; vertical-align:middle; border-bottom:1px solid rgba(226,232,240,0.9); text-align:left; } .admin-table tbody tr:hover td{background:rgba(248,250,252,0.6);} /* Dark-mode: avoid bright white hover on log rows */ html[data-theme="dark"] .admin-table tbody tr:hover td{background:rgba(255,255,255,0.02);} .admin-table thead th:last-child, .admin-table tbody td:last-child{text-align:right;} .audit-row{ cursor:pointer; transition:background 120ms ease; } .audit-row:hover td{ background:rgba(124,58,237,0.06); } html[data-theme="dark"] .audit-row:hover td{background:rgba(124,58,237,0.06);} .audit-row:focus-visible{ outline:2px solid rgba(124,58,237,0.5); outline-offset:-2px; } .audit-row:focus-visible td{ background:rgba(124,58,237,0.08); } .audit-log-action-label{ font-weight:700; font-size:13px; color:var(--text); } .audit-log-actor{ font-weight:600; font-size:13px; color:var(--text); } .audit-log-target{ font-weight:600; font-size:13px; color:var(--text); } .audit-log-meta{ font-size:11px; color:var(--muted); margin-top:2px; } .audit-log-detail-list{ display:flex; flex-wrap:nowrap; gap:4px; overflow:hidden; } .audit-log-detail{ display:inline-flex; align-items:center; padding:3px 6px; border-radius:999px; background:rgba(148,163,184,0.16); font-size:11px; color:var(--muted); white-space:nowrap; flex-shrink:0; } .audit-detail-overlay{ position:fixed; inset:0; z-index:1400; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(15,23,42,0.55); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity 160ms ease; } .audit-detail-overlay.is-visible{ opacity:1; pointer-events:auto; } .audit-detail-dialog{ width:min(640px,calc(100vw - 32px)); max-height:90vh; background:#fff; border-radius:22px; border:1px solid rgba(148,163,184,0.25); box-shadow:0 24px 60px rgba(15,23,42,0.3); padding:20px; display:flex; flex-direction:column; gap:16px; outline:none; } .audit-detail-eyebrow{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .audit-detail-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:4px; } .audit-detail-body{ display:flex; flex-direction:column; gap:16px; overflow:auto; } .audit-detail-summary{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; } .audit-detail-label{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .audit-detail-value{ font-weight:700; color:var(--text); margin-top:4px; } .audit-detail-story{ border:1px solid rgba(148,163,184,0.25); border-radius:18px; padding:16px; background:linear-gradient(135deg, rgba(124,58,237,0.05), rgba(236,72,153,0.05)); display:flex; flex-direction:column; gap:14px; } .audit-detail-story-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; } .audit-detail-story-title{ font-size:18px; font-weight:800; margin-top:6px; } .audit-story-pills{ display:flex; flex-wrap:wrap; gap:8px; } .audit-story-pills:empty{display:none} .audit-story-pill{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:14px; border:1px solid rgba(148,163,184,0.35); background:#fff; font-size:13px; min-width:110px; } .audit-story-pill span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .audit-story-pill strong{font-size:14px;font-weight:800;color:var(--text)} .audit-story-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; } .audit-story-step{ background:#fff; border-radius:16px; border:1px solid rgba(148,163,184,0.25); padding:12px; box-shadow:0 10px 20px rgba(15,23,42,0.08); } .audit-story-step-title{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; } .audit-story-step-text{margin:0;font-size:13px;color:var(--text);line-height:1.4} .audit-story-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; } .audit-story-facts:empty{display:none} .audit-story-fact{ border-radius:14px; padding:10px 12px; background:rgba(255,255,255,0.8); border:1px dashed rgba(124,58,237,0.3); } .audit-story-fact-label{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .audit-story-fact-value{ margin-top:4px; font-weight:700; color:var(--text); font-size:14px; } .audit-detail-json{ background:rgba(148,163,184,0.16); border-radius:16px; padding:12px; max-height:40vh; overflow:auto; border-left:4px solid rgba(124,58,237,0.12); /* subtle accent */ } .audit-detail-json pre{ margin:0; font-family:"SFMono-Regular",Menlo,Consolas,monospace; font-size:12px; line-height:1.4; color:var(--text); } /* Summary fields: visible outlines and slight color accent */ .audit-detail-summary > *{ padding:10px 12px; border-radius:12px; border:1px solid rgba(124,58,237,0.10); background:transparent; } .audit-detail-label{ color:rgba(15,23,42,0.65); /* stronger than muted */ } .audit-detail-value{ font-weight:800; color:var(--text); margin-top:6px; font-size:15px; } /* Make pills and facts use accent borders for clarity */ .audit-story-pill{ border:1px solid rgba(124,58,237,0.22); } .audit-story-fact{ border:1px dashed rgba(124,58,237,0.20); background:rgba(255,255,255,0.9); } /* Dark-mode specific overrides: avoid bright whites and add stronger outlines */ html[data-theme="dark"] .audit-detail-dialog{ background: var(--card) !important; border: 1px solid rgba(189,205,255,0.10) !important; box-shadow: 0 24px 60px rgba(0,0,0,0.6) !important; color: var(--text) !important; } /* Summary fields: ensure they are clearly panelled in dark mode */ html[data-theme="dark"] .audit-detail-summary > *{ background: rgba(6,8,18,0.94) !important; /* distinct panel */ border: 1px solid rgba(124,58,237,0.34) !important; /* stronger purple accent */ border-left:6px solid rgba(124,58,237,0.34) !important; /* left accent */ padding-left:14px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); } html[data-theme="dark"] .audit-detail-label{ color: rgba(226,232,240,0.72) !important; } html[data-theme="dark"] .audit-detail-value{ color: rgba(255,255,255,0.96) !important; font-weight:900; } /* Pills, steps and facts: remove any white backgrounds and apply purple outlines */ html[data-theme="dark"] .audit-story-pill{ background: rgba(8,10,18,0.96) !important; border:1px solid rgba(124,58,237,0.30) !important; /* stronger */ border-left:4px solid rgba(124,58,237,0.22) !important; color: var(--text) !important; box-shadow:none !important; } html[data-theme="dark"] .audit-story-step{ background: rgba(8,12,24,0.94) !important; border:1px solid rgba(124,58,237,0.12) !important; box-shadow:none !important; color: var(--text) !important; } html[data-theme="dark"] .audit-story-fact{ background: rgba(10,14,32,0.92) !important; border:1px dashed rgba(124,58,237,0.12) !important; color: var(--text) !important; } /* Ensure textual elements inside pills/facts are readable and not muted excessively */ html[data-theme="dark"] .audit-story-pill span, html[data-theme="dark"] .audit-story-step-title, html[data-theme="dark"] .audit-story-fact-label{ color: rgba(226,232,240,0.72) !important; } html[data-theme="dark"] .audit-detail-json{ background: rgba(8,10,18,0.94) !important; border-left:6px solid rgba(124,58,237,0.32) !important; /* wider, stronger accent */ } html[data-theme="dark"] .audit-detail-json{ background: rgba(8,10,18,0.94) !important; border-left:6px solid rgba(124,58,237,0.32) !important; } .table-actions{ display:flex; gap:8px; flex-wrap:wrap; } .admin-table tbody tr:hover, .ticket-table tbody tr:hover{ background:rgba(124,58,237,0.05); } /* Dark-mode: make table row hover subtle (used by portal list, tickets, admin) */ html[data-theme="dark"] .admin-table tbody tr:hover, html[data-theme="dark"] .ticket-table tbody tr:hover{ background: rgba(255,255,255,0.02); } .admin-table tbody tr[data-ticket-open], .ticket-table tbody tr[data-ticket-open]{ cursor:pointer; transition:background 160ms ease, box-shadow 160ms ease; position:relative; } .admin-table tbody tr[data-ticket-open]:focus-visible, .ticket-table tbody tr[data-ticket-open]:focus-visible{ outline:2px solid rgba(124,58,237,0.55); outline-offset:-2px; box-shadow:0 0 0 2px rgba(124,58,237,0.25); background:rgba(124,58,237,0.08); } html[data-theme="dark"] .admin-table tbody tr[data-ticket-open]:focus-visible, html[data-theme="dark"] .ticket-table tbody tr[data-ticket-open]:focus-visible{ outline-color:rgba(199,210,254,0.9); box-shadow:0 0 0 2px rgba(199,210,254,0.45); background:rgba(79,70,229,0.25); } .admin-table tbody tr:last-child td, .ticket-table tbody tr:last-child td{ border-bottom:none; } .admin-table .ghost, .ticket-table .ghost{padding:6px 10px;font-size:12px} .password-field{display:flex;flex-direction:column;gap:8px} .password-input{position:relative;display:block} .password-input input{padding-right:44px} /* Clickable admin rows (users table) */ .ticket-table tbody tr[data-admin-modal-trigger]{ cursor: pointer; } .ticket-table tbody tr[data-admin-modal-trigger]:focus{ outline:3px solid rgba(124,58,237,.14); outline-offset: -3px; } .ticket-table tbody tr[data-admin-modal-trigger]:hover{background: rgba(124,58,237,0.03);} .ticket-table tbody tr.is-hidden{display:none} .password-toggle{ position:absolute; top:50%; right:10px; transform:translateY(-50%); border:1px solid rgba(124,58,237,.18); background:#fff; color:var(--text); padding:4px; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; } .password-toggle[aria-pressed="true"]{ background:rgba(124,58,237,.08); border-color:rgba(124,58,237,.34); box-shadow:0 6px 16px rgba(124,58,237,.18); } .password-toggle:focus{outline:none;border-color:rgba(124,58,237,.6)} .eye-icon{width:18px;height:18px;display:block;fill:currentColor} .password-meter{ margin-top:6px; display:flex; flex-direction:column; gap:6px; } .password-meter-track{ width:100%; height:6px; border-radius:999px; background:rgba(148,163,184,0.35); overflow:hidden; } .password-meter-bar{ height:100%; width:0; border-radius:inherit; background:#f87171; transition:width 200ms ease, background-color 200ms ease; } .password-meter-bar[data-strength="0"], .password-meter-bar[data-strength="1"]{background:#f87171} .password-meter-bar[data-strength="2"]{background:#fb923c} .password-meter-bar[data-strength="3"]{background:#facc15} .password-meter-bar[data-strength="4"], .password-meter-bar[data-strength="5"]{background:#34d399} .password-meter-label{ font-size:12px; color:var(--muted); font-weight:600; } .password-meter-reqs, [data-password-reqs]{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); } .password-meter-reqs li, [data-password-reqs] li{ display:flex; align-items:center; gap:8px; } .password-meter-reqs li::before, [data-password-reqs] li::before{ content:''; width:16px; height:16px; border-radius:999px; border:1px solid rgba(148,163,184,.45); background:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:11px; color:#0f172a; } .password-meter-reqs li[data-passed="true"], [data-password-reqs] li[data-passed="true"]{ color:var(--accent3); font-weight:700; } .password-meter-reqs li[data-passed="true"]::before, [data-password-reqs] li[data-passed="true"]::before{ content:'✓'; background:var(--accent3); border-color:var(--accent3); } .password-note{font-size:12px;color:var(--muted);margin:4px 0 0} textarea{min-height:120px;resize:vertical} .actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .status{font-size:13px;color:var(--muted);margin-top:4px} .showcase{display:grid;grid-template-columns:1fr;gap:12px;margin:10px 0 0} .showcase figure{margin:0} .showcase img{ width:100%; height:auto; display:block; border-radius:16px; border:1px solid rgba(124,58,237,.14); box-shadow: var(--shadow); background: var(--soft); cursor: zoom-in; transition: transform 220ms ease, box-shadow 220ms ease; } .caption{color:var(--muted);font-size:13px;line-height:1.5} .lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(15,23,42,0.55);z-index:100;padding:16px} .lightbox.open{display:flex} .lightbox-inner{ width:min(1100px, 96vw); max-height:92vh; background: rgba(255,255,255,0.94); border:1px solid rgba(255,255,255,0.35); border-radius:18px; box-shadow:0 18px 60px rgba(2,6,23,0.30); overflow:hidden; transform:scale(0.98); opacity:0; transition:transform 220ms ease, opacity 220ms ease; } .lightbox.open .lightbox-inner{transform:scale(1);opacity:1} .lightbox-top{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#ffffff;border-bottom:1px solid rgba(124,58,237,.10);gap:10px} .lightbox-title{font-size:13px;color:var(--muted);font-weight:800} .close{border:1px solid rgba(124,58,237,.16);background:#fff;border-radius:14px;padding:8px 10px;cursor:pointer;font-weight:900;color:var(--text);flex:0 0 auto} .lightbox-body{background: var(--soft);display:grid;place-items:center;padding:10px} .lightbox-body img{max-width:100%;max-height:calc(92vh - 64px);height:auto;border-radius:14px;border:1px solid rgba(124,58,237,.12)} .notice{background: rgba(255, 247, 237, .95);border:1px solid rgba(251, 191, 36, .25);padding:12px;border-radius:14px;color:#92400e;font-size:14px} footer{margin-top:34px;padding-top:18px;border-top:1px solid rgba(124,58,237,.12);color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap} footer a{color:var(--accent);text-decoration:none;font-weight:800} footer .footer-legal-note{margin:8px 0 0;font-size:12px;color:var(--muted)} /* Ticket modal */ .ticket-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(15,23,42,0.55);z-index:110;padding:16px} .ticket-modal.open{display:flex} .ticket-modal-inner{ width:min(960px, 96vw); max-height:92vh; background:rgba(255,255,255,0.96); border:1px solid rgba(255,255,255,0.35); border-radius:18px; box-shadow:0 18px 60px rgba(2,6,23,0.30); padding:18px 18px 16px; display:flex; flex-direction:column; } .ticket-modal-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex:0 0 auto} .ticket-modal-title{font-size:14px;font-weight:800;color:var(--muted)} .ticket-modal-body{font-size:14px;color:var(--text);line-height:1.6;flex:1 1 auto;overflow:auto;display:flex;flex-direction:column} .ticket-modal-body>.ticket-detail{display:flex;flex-direction:column;flex:1 1 auto;min-height:0} .ticket-modal-body .ticket-detail-head{ position:sticky; top:0; z-index:2; margin-top:-6px; padding-top:6px; padding-bottom:10px; background:rgba(255,255,255,0.96); border-bottom:1px solid rgba(124,58,237,.10); backdrop-filter:saturate(160%) blur(10px); } html[data-theme="dark"] .ticket-modal-body .ticket-detail-head{ background:#101829; border-bottom:1px solid rgba(189,205,255,0.24); } html[data-theme="dark"] .ticket-modal-inner{ background:#0f1726; border:1px solid rgba(189,205,255,0.12); box-shadow:0 20px 60px rgba(0,0,0,0.55); } /* Admin modals */ .admin-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,0.55);z-index:1600;padding:16px} .admin-modal[hidden]{display:none !important} .admin-modal-inner{ /* Stronger modal variant for 2FA setup */ } .admin-modal--2fa{background:rgba(15,23,42,0.95)} .admin-modal--2fa .admin-modal-inner{max-width:760px;width:100%;border-radius:16px;background:var(--card);padding:20px;box-shadow:var(--shadow);max-height:90vh;overflow:auto} #qr-container{display:flex;align-items:center;justify-content:center;padding:18px} #qr-container img{max-width:260px;height:auto} #setup-code-container{margin-top:6px;font-family:monospace;letter-spacing:2px;color:var(--muted)} .admin-modal--2fa .btn{width:100%;} .admin-modal-inner{ width:min(640px, 96vw); max-height:90vh; background:rgba(255,255,255,0.97); border:1px solid rgba(255,255,255,0.35); border-radius:18px; box-shadow:0 18px 60px rgba(2,6,23,0.30); padding:18px; display:flex; flex-direction:column; overflow:hidden; } .admin-modal-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:8px;border-bottom:1px solid rgba(148,163,184,0.45)} .admin-modal-title{font-size:16px;font-weight:800;color:var(--text)} .admin-modal-body{flex:1 1 auto;overflow:auto;padding-top:12px} .admin-modal-form{ display:flex; flex-direction:column; gap:10px; padding:0 8px 12px; } .admin-modal-form label{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.01em} .admin-modal-form input, .admin-modal-form select{ width:100%; border-radius:14px; border:1px solid rgba(148,163,184,0.55); padding:8px 10px; font-size:14px; background:#fff; } .admin-modal-form select[multiple]{min-height:110px} .admin-modal-form .actions{margin-top:6px;display:flex;justify-content:flex-end} .portal-modal{display:flex;flex-direction:column;gap:18px} /* Portal settings modal */ .portal-settings-modal{display:grid;grid-template-columns:1fr;gap:16px} @media (min-width: 860px){ .portal-settings-modal{grid-template-columns:1fr 1fr} } .portal-settings-modal .auth-panel{margin:0} .portal-settings-modal .admin-modal-form{padding:0} .portal-settings-modal .actions{justify-content:flex-start} .portal-settings-modal .notice{margin-top:10px} /* Offer builder */ .admin-modal-inner.admin-modal-inner--offer{width:min(1200px, 96vw)} .offer-builder-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap} .offer-builder-shell{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:16px;align-items:start} @media (max-width: 980px){ .offer-builder-shell{grid-template-columns:1fr} } .offer-editor{background:var(--soft);border:1px solid rgba(124,58,237,.12);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:12px} .offer-editor-section h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)} .offer-editor-section textarea{min-height:80px} .offer-input-grid{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center} .offer-input-grid input{width:100%} .offer-input-grid--compact{grid-template-columns:1fr 1fr} .offer-input-inline{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)} .offer-preview{display:flex;flex-direction:column;gap:12px} .offer-card{background:#fff;border:1px solid rgba(124,58,237,.12);border-radius:16px;padding:14px;box-shadow:0 12px 30px rgba(15,23,42,0.08)} .offer-card h2{margin:0 0 4px;font-size:18px} .offer-card h3{margin:0 0 6px;font-size:14px;color:#6d28d9} .offer-card p{white-space:pre-wrap;word-break:break-word} .offer-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start} .offer-meta{font-size:12px;color:var(--muted)} .offer-date{font-size:12px;color:var(--muted);text-align:right} .offer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} @media (max-width: 820px){ .offer-grid{grid-template-columns:1fr} } .offer-list{display:flex;flex-direction:column;gap:6px} .offer-row{display:flex;justify-content:space-between;gap:12px;font-size:13px} .offer-row strong{font-weight:800} .offer-total{margin-top:10px;padding:10px;border-radius:12px;background:rgba(124,58,237,.08)} .offer-muted{font-size:12px;color:var(--muted);margin-top:6px} .offer-footer p{margin:0} .offer-contact{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--muted)} html[data-theme="dark"] .offer-editor{background:#0f1726;border-color:rgba(189,205,255,0.12)} html[data-theme="dark"] .offer-card{background:#0f1726;border-color:rgba(189,205,255,0.12);box-shadow:0 20px 60px rgba(0,0,0,0.35)} html[data-theme="dark"] .offer-card h3{color:#a78bfa} body.print-offer *{visibility:hidden} body.print-offer .offer-preview, body.print-offer .offer-preview *{visibility:visible} body.print-offer .offer-preview{position:absolute;left:0;top:0;width:100%} @media print{ @page{margin:14mm} body{background:#fff !important} .offer-card{box-shadow:none !important;page-break-inside:avoid} } html[data-theme="dark"] .admin-modal-inner{ background:#0f1726; border:1px solid rgba(189,205,255,0.12); box-shadow:0 20px 60px rgba(0,0,0,0.55); } html[data-theme="dark"] .admin-modal-header{border-bottom:1px solid rgba(189,205,255,0.18)} html[data-theme="dark"] .admin-modal-form input, html[data-theme="dark"] .admin-modal-form select, html[data-theme="dark"] .admin-modal-form textarea{ background:#111b2e; border:1px solid rgba(189,205,255,0.22); color:var(--text); } .portal-modal-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px} .portal-summary-card{border:1px solid rgba(148,163,184,0.35);border-radius:16px;padding:12px 14px;background:rgba(248,250,252,0.9);display:flex;flex-direction:column;gap:4px} .portal-summary-label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase} .portal-summary-value{font-size:20px;font-weight:800;color:var(--text)} .portal-summary-key{letter-spacing:.12em} .portal-summary-sub{font-size:11px;color:var(--muted)} .portal-handoff-card{border:1px dashed rgba(124,58,237,0.35);border-radius:16px;padding:14px;background:rgba(255,255,255,0.9);display:flex;flex-direction:column;gap:8px} .portal-handoff-actions{display:flex;gap:10px;flex-wrap:wrap} .portal-handoff-link{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;font-size:13px;padding:8px 10px;border-radius:12px;background:rgba(15,23,42,0.85);color:#f8fafc;word-break:break-all} /* Portal assigned users — reuse user-multiselect styles to match Add user access */ .portal-members-card{border:1px solid rgba(148,163,184,0.35);border-radius:16px;padding:14px;background:rgba(255,255,255,0.95)} .portal-members-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:10px} .portal-members-head input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent);/* align visual weight with options */} .portal-members-card .user-multiselect-list{max-height:180px;overflow-y:auto;border:1px solid rgba(148,163,184,0.35);border-radius:10px;background:#fff;padding:0} .portal-members-card .user-multiselect-option{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;transition:background 100ms ease;border-bottom:1px solid rgba(148,163,184,0.15)} .portal-members-card .user-multiselect-option:last-child{border-bottom:none} .portal-members-card .user-multiselect-name{font-weight:600;font-size:13px;color:var(--text)} .portal-members-card .user-multiselect-email{font-size:12px;color:var(--muted);margin-left:auto} .portal-member-empty{margin:0;font-size:13px;color:var(--muted)} .portal-add-card{border:1px solid rgba(148,163,184,0.35);border-radius:16px;padding:14px;background:rgba(248,250,252,0.9);display:flex;flex-direction:column;gap:8px} .portal-add-card h4{margin:0;font-size:15px} .portal-add-card p{margin:0;font-size:13px;color:var(--muted)} .portal-add-card .admin-modal-form{margin-top:6px} .portal-add-empty{font-size:13px;color:var(--muted)} /* Dark-mode: portal popup cards */ html[data-theme="dark"] .portal-summary-card, html[data-theme="dark"] .portal-members-card, html[data-theme="dark"] .portal-handoff-card, html[data-theme="dark"] .portal-add-card, html[data-theme="dark"] .portal-danger-card{ background: rgba(15,23,42,0.94) !important; border: 1px solid rgba(148,163,184,0.10) !important; box-shadow: none !important; color: var(--text) !important; } html[data-theme="dark"] .portal-handoff-card{border-style:dashed;border-color:rgba(148,163,184,0.08)} /* Dark mode: portal assigned users reuse user-multiselect dark rules */ html[data-theme="dark"] .portal-members-card .user-multiselect-list{background:rgba(15,23,42,0.92);border-color:rgba(148,163,184,0.08);} html[data-theme="dark"] .portal-members-card .user-multiselect-option{background:transparent;border-bottom:1px solid rgba(148,163,184,0.06);color:var(--text)} html[data-theme="dark"] .portal-members-card .user-multiselect-name{color:var(--text)} html[data-theme="dark"] .portal-members-card .user-multiselect-email{color:rgba(226,232,240,0.65)} html[data-theme="dark"] .portal-handoff-link{background:rgba(10,14,32,0.85);color:var(--text)} /* User multi-select for portal assignment */ .user-multiselect{display:flex;flex-direction:column;gap:8px} .user-multiselect-search{ width:100%; padding:10px 12px; border:1px solid rgba(148,163,184,0.5); border-radius:10px; font:inherit; font-size:14px; } .user-multiselect-search:focus{ outline:none; border-color:rgba(124,58,237,0.5); box-shadow:0 0 0 3px rgba(124,58,237,0.1); } .user-multiselect-selected{ display:flex; flex-wrap:wrap; gap:6px; min-height:0; } .user-multiselect-selected:empty{display:none} .user-multiselect-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#fff; font-size:12px; font-weight:600; border-radius:999px; } .user-multiselect-chip button{ background:none; border:none; color:#fff; cursor:pointer; font-size:14px; line-height:1; padding:0; opacity:0.8; } .user-multiselect-chip button:hover{opacity:1} .user-multiselect-list{ max-height:180px; overflow-y:auto; border:1px solid rgba(148,163,184,0.35); border-radius:10px; background:#fff; } .user-multiselect-option{ display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; transition:background 100ms ease; border-bottom:1px solid rgba(148,163,184,0.15); } .user-multiselect-option:last-child{border-bottom:none} .user-multiselect-option:hover{background:rgba(124,58,237,0.05)} .user-multiselect-option.is-selected{background:rgba(124,58,237,0.1)} .user-multiselect-option.is-hidden{display:none} /* Dark-mode: user multiselect */ html[data-theme="dark"] .user-multiselect-search{ background:rgba(15,23,42,0.96); border:1px solid rgba(148,163,184,0.12); color:var(--text); } html[data-theme="dark"] .user-multiselect-list{ background:rgba(15,23,42,0.92); border:1px solid rgba(148,163,184,0.08); } html[data-theme="dark"] .user-multiselect-option{ border-bottom:1px solid rgba(148,163,184,0.06); background:transparent; color:var(--text); } html[data-theme="dark"] .user-multiselect-option:hover{background:rgba(148,163,184,0.04)} html[data-theme="dark"] .user-multiselect-option.is-selected{background:rgba(124,58,237,0.12)} html[data-theme="dark"] .user-multiselect-name{color:var(--text)} html[data-theme="dark"] .user-multiselect-email{color:rgba(226,232,240,0.65)} html[data-theme="dark"] .user-multiselect-option input[type="checkbox"]{accent-color:var(--accent)} .user-multiselect-option input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--accent); flex-shrink:0; } .user-multiselect-name{font-weight:600;font-size:13px;color:var(--text)} .user-multiselect-email{font-size:12px;color:var(--muted);margin-left:auto} .portal-role-note{margin:0;font-size:13px;color:var(--muted)} .portal-danger-card{border-top:1px solid rgba(148,163,184,0.35);padding-top:12px} .portal-warning{font-size:13px;color:#92400e;margin-bottom:12px} .ticket-column{min-height:0} .ticket-column-main{ display:flex; flex-direction:column; gap:12px; padding-right:10px; flex:1 1 auto; min-height:0; } .ticket-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;font-size:12px;color:var(--muted)} .ticket-meta span{padding:4px 8px;border-radius:999px;background:rgba(148,163,184,0.15)} .ticket-code-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px} .ticket-code-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:14px; border:1px solid rgba(124,58,237,0.2); background:linear-gradient(135deg, rgba(124,58,237,0.12), rgba(236,72,153,0.08)); font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#5b21b6; } .ticket-status-chip{ display:inline-flex; align-items:center; padding:6px 14px; border-radius:14px; border:1px solid currentColor; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:none; background:rgba(148,163,184,0.12); } .ticket-priority-chip{ display:inline-flex; align-items:center; padding:6px 14px; border-radius:14px; border:1px solid currentColor; font-size:12px; font-weight:700; letter-spacing:.04em; background:rgba(148,163,184,0.12); } .ticket-code-main{ font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--text); } .ticket-code-sub{ font-size:11px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; margin-top:2px; } .ticket-project-name{font-weight:700;color:var(--text)} .ticket-project-key{font-size:11px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-top:4px} .ticket-table{ width:100%; border-collapse:collapse; font-size:14px; table-layout:fixed; } .ticket-table th{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ticket-table td{ word-break:break-word; } .ticket-sort{ appearance:none; border:0; background:transparent; padding:0; width:100%; display:flex; align-items:center; justify-content:flex-start; gap:4px; font:inherit; color:inherit; text-align:left; cursor:pointer; } .ticket-sort:focus-visible{ outline:2px solid rgba(124,58,237,0.45); outline-offset:2px; border-radius:10px; } .ticket-sort-icons{ display:flex; flex-direction:column; gap:2px; align-items:center; flex-shrink:0; } .ticket-sort-arrow{ width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; opacity:.45; transition:opacity 160ms ease,border-color 160ms ease; } .ticket-sort-arrow--up{border-bottom:6px solid rgba(71,85,105,0.75)} .ticket-sort-arrow--down{border-top:6px solid rgba(71,85,105,0.75)} .ticket-sort:hover .ticket-sort-arrow{opacity:.75} .ticket-sort.is-active[data-sort-state="asc"] .ticket-sort-arrow--up{border-bottom-color:#5b21b6;opacity:1} .ticket-sort.is-active[data-sort-state="desc"] .ticket-sort-arrow--down{border-top-color:#5b21b6;opacity:1} .ticket-comments{margin-top:16px;border-top:1px solid rgba(148,163,184,0.35);padding-top:10px;display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-height:0} .ticket-comment{padding:8px 10px;border-radius:12px;background:rgba(248,250,252,0.95);border:1px solid rgba(148,163,184,0.35)} .ticket-comment-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:4px} .ticket-attachments{margin-top:10px;font-size:13px} .ticket-attachments ul{margin:4px 0 0;padding-left:18px} .ticket-attachments li{margin:2px 0} .ticket-comment-form{margin-top:14px;border-top:1px dashed rgba(148,163,184,0.5);padding-top:10px;display:flex;flex-direction:column;gap:8px;flex:0 0 auto} .ticket-comment-form label{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em;text-transform:uppercase} .ticket-comment-form textarea{ min-height:90px; font-size:13px; border-radius:16px; border:1px solid rgba(148,163,184,0.55); padding:8px 10px; background:rgba(248,250,252,0.96); transition:border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; resize:vertical; } .ticket-rich-editor-wrap{display:flex;flex-direction:column;gap:6px} .ticket-rich-editor{ min-height:90px; font-size:13px; border-radius:16px; border:1px solid rgba(148,163,184,0.55); padding:8px 10px; background:rgba(248,250,252,0.96); transition:border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; outline:none; white-space:pre-wrap; } .ticket-rich-editor:focus{ border-color:rgba(124,58,237,0.5); box-shadow:0 0 0 3px rgba(124,58,237,0.20); background:#fff; } html[data-theme="dark"] .ticket-rich-editor{ background:rgba(15,23,42,0.85); border-color:rgba(148,163,184,0.35); color:var(--text); } html[data-theme="dark"] .ticket-rich-editor:focus{ background:rgba(24,34,55,1); } .ticket-rich-editor a{color:var(--accent);text-decoration:underline} .ticket-rich-editor ul, .ticket-rich-editor ol{margin:6px 0 6px 18px} .ticket-rich-editor li{margin:2px 0} .ticket-rich-editor-hidden{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; } .ticket-editor-toolbar{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; } .ticket-pagination{ margin-top:12px; display:flex; justify-content:flex-end; gap:6px; flex-wrap:wrap; align-items:center; } .ticket-page{ border:1px solid rgba(148,163,184,0.45); background:#fff; color:var(--muted); border-radius:12px; padding:6px 12px; min-width:38px; text-align:center; font-size:13px; font-weight:700; cursor:pointer; transition:background 160ms ease,border-color 160ms ease,color 160ms ease; } .ticket-page:hover{border-color:rgba(124,58,237,0.45);color:#5b21b6} .ticket-page.is-active{ background:rgba(124,58,237,0.12); border-color:rgba(124,58,237,0.55); color:#5b21b6; cursor:default; } .ticket-editor-button{ border:1px solid rgba(124,58,237,0.18); background:#fff; color:var(--text); font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:4px 8px; border-radius:8px; cursor:pointer; transition:background 140ms ease, border-color 140ms ease, color 140ms ease; } .ticket-editor-button:hover{ background:rgba(124,58,237,0.08); border-color:rgba(124,58,237,0.32); } html[data-theme="dark"] .ticket-editor-button{ background:rgba(15,23,42,0.85); border-color:rgba(167,139,250,0.24); color:var(--text); } .ticket-textarea-wrap{display:flex;flex-direction:column;gap:4px} .ticket-char-count{font-size:11px;color:var(--muted);text-align:right;font-weight:700;letter-spacing:.04em} .ticket-char-count.is-error{color:#b91c1c} .ticket-char-error{font-size:12px;color:#b91c1c;margin:0} .ticket-char-error[hidden]{display:none} .ticket-field{ margin-top:14px; border:1px solid rgba(148,163,184,0.35); border-radius:14px; padding:12px 14px; background:rgba(248,250,252,0.95); box-shadow:inset 0 1px 0 rgba(255,255,255,0.65); } /* Dark mode: ticket panels, attachments and controls */ html[data-theme="dark"] .ticket-field{ /* Baseline field panel */ background: rgba(18,22,38,0.94); border:1px solid rgba(124,58,237,0.10); box-shadow:none; color:var(--text); } /* Stronger left-column (main) panels to stand out from the modal */ html[data-theme="dark"] .ticket-layout--split .ticket-column-main .ticket-field{ background: rgba(22,28,44,0.96); /* slightly lighter than modal */ border:1px solid rgba(124,58,237,0.26); /* medium purple accent */ border-left:6px solid rgba(124,58,237,0.32); /* visible accent bar */ padding-left:16px; /* allow space for accent */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); } html[data-theme="dark"] .ticket-layout--split .ticket-column-main .ticket-field:hover{ box-shadow:0 10px 30px rgba(124,58,237,0.06); } html[data-theme="dark"] .ticket-layout--split .ticket-column-main .ticket-field:focus-within{ outline:2px solid rgba(124,58,237,0.30); outline-offset:0; } html[data-theme="dark"] .ticket-comment{ background: rgba(20,28,48,0.94); border:1px solid rgba(124,58,237,0.12); color:var(--text); box-shadow:none; } html[data-theme="dark"] .ticket-comments{border-top-color:rgba(124,58,237,0.08)} html[data-theme="dark"] .ticket-attachment-chip{background:rgba(20,28,48,0.92);border:1px solid rgba(124,58,237,0.12);color:var(--text);box-shadow:none} html[data-theme="dark"] .ticket-attachment-chip:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(0,0,0,0.6)} html[data-theme="dark"] .ticket-description-edit, html[data-theme="dark"] .ticket-description-redact{ background:rgba(20,28,48,0.92); border:1px solid rgba(124,58,237,0.12); color:var(--text); } /* Make labels and bodies more readable on left column */ html[data-theme="dark"] .ticket-layout--split .ticket-column-main .ticket-field-label{color:rgba(226,232,240,0.86)} html[data-theme="dark"] .ticket-layout--split .ticket-column-main .ticket-field-body{color:rgba(226,232,240,0.98)} html[data-theme="dark"] .ticket-field-empty{color:rgba(226,232,240,0.66)} .ticket-field-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px} .ticket-field-label{ font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; margin-bottom:6px; } .ticket-field-head .ticket-field-label{margin-bottom:0} .ticket-field-body{font-size:13px;color:var(--text);line-height:1.55} .ticket-field-text{white-space:pre-wrap} .ticket-field-empty{margin:0;color:var(--muted);font-style:italic} .ticket-attachments-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px} .ticket-attachment-chip{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--text); padding:8px 10px; border-radius:12px; border:1px solid rgba(124,58,237,.15); background:#fff; font-size:13px; font-weight:600; transition:transform 140ms ease, box-shadow 140ms ease; } .ticket-attachment-chip:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(124,58,237,.12); } .ticket-attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .ticket-description-edit{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:8px 14px; border-radius:16px; border:1px solid rgba(124,58,237,.18); background:#fff; color:var(--text); } .ticket-description-redact{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:8px 14px; border-radius:16px; border:1px solid rgba(220,38,38,0.25); background:#fff; color:#b42318; } .ticket-field--description.is-editing .ticket-description-edit{opacity:0.45;pointer-events:none} .ticket-description{display:flex;flex-direction:column;gap:6px;position:relative} .ticket-description-text{white-space:pre-wrap} .ticket-description.is-collapsible .ticket-description-text{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; overflow:hidden; } .ticket-description.is-expanded .ticket-description-text{ -webkit-line-clamp:unset; max-height:none; } .ticket-description-toggle{ border:none; background:rgba(124,58,237,0.08); color:var(--text); padding:4px 10px; border-radius:10px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; align-self:flex-start; display:inline-flex; align-items:center; gap:6px; } .ticket-description-toggle .ticket-description-arrow{transition:transform 160ms ease} .ticket-description-toggle.is-expanded .ticket-description-arrow{transform:rotate(180deg)} .ticket-description-form{ margin-top:12px; border-top:1px dashed rgba(148,163,184,0.45); padding-top:12px; display:none; flex-direction:column; gap:10px; } .ticket-field--description.is-editing .ticket-description-form{display:flex} /* Hide read-only preview and helpers when editing */ .ticket-field--description.is-editing [data-description-view], .ticket-field--description.is-editing [data-description-toggle], .ticket-field--description.is-editing [data-description-empty]{display:none} .ticket-description-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap} .ticket-description-tip{margin:0;font-size:12px;color:var(--muted)} .ticket-field--description textarea[name="ticket_description"]{ min-height:120px; border-radius:16px; border:1px solid rgba(148,163,184,0.55); padding:8px 10px; font-size:13px; background:rgba(248,250,252,0.96); } .ticket-field--description{ display:flex; flex-direction:column; gap:10px; min-height:0; } .ticket-field--description .ticket-field-body{ flex:1 1 auto; min-height:0; } .ticket-field--description .ticket-description{ max-height:clamp(220px, 35vh, 380px); overflow:auto; padding-right:8px; } html[data-theme="dark"] .ticket-comment-form textarea{ background:rgba(15,23,42,0.96); border-color:rgba(148,163,184,0.7); } html[data-theme="dark"] .ticket-field--description textarea[name="ticket_description"]{ background:rgba(15,23,42,0.96); border-color:rgba(148,163,184,0.7); color:var(--text); } .ticket-comment-form textarea:focus{ outline:none; border-color:rgba(129,140,248,0.95); box-shadow:0 0 0 1px rgba(129,140,248,0.85); background:#ffffff; } .ticket-field--description textarea[name="ticket_description"]:focus{ outline:none; border-color:rgba(129,140,248,0.95); box-shadow:0 0 0 1px rgba(129,140,248,0.85); background:#ffffff; } html[data-theme="dark"] .ticket-comment-form textarea:focus{ background:rgba(24,34,55,1); } html[data-theme="dark"] .ticket-field--description textarea[name="ticket_description"]:focus{ background:rgba(24,34,55,1); } .ticket-comment-tip{font-size:12px;color:var(--muted);margin:0} .ticket-comment-body{margin-bottom:4px} .ticket-comment-attachments{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:4px;font-size:12px} .ticket-comment-attachments li{margin:0} .ticket-comment-attachments a:not(.ticket-attachment-chip){text-decoration:none;color:var(--accent);font-weight:700} .ticket-comment-attachments a:not(.ticket-attachment-chip):hover{text-decoration:underline} .ticket-file-wrap{margin-top:2px;display:flex;flex-direction:column;gap:6px} body.allow-text-select .ticket-safety-tip{ margin-bottom:8px; } .ticket-file{ position:relative; display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-radius:14px; border:1px dashed rgba(244,114,182,0.6); background:linear-gradient(135deg, rgba(251,113,133,0.04), rgba(59,130,246,0.03)); cursor:pointer; font-size:12px; } html[data-theme="dark"] .ticket-file{ border-color:rgba(244,114,182,0.8); background:linear-gradient(135deg, rgba(248,113,113,0.12), rgba(59,130,246,0.10)); } .ticket-file-main{font-weight:600;color:var(--text)} .ticket-file-sub{font-size:11px;color:var(--muted)} .ticket-file-input{ position:absolute; inset:0; opacity:0; cursor:pointer; } .ticket-file-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; } .ticket-file-item{ padding:6px 10px; border-radius:12px; background:rgba(148,163,184,0.16); font-size:12px; font-weight:700; color:var(--text); border:1px solid rgba(148,163,184,0.32); display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .ticket-file-preview{ width:44px; height:44px; border-radius:14px; background:rgba(148,163,184,0.25); border:1px solid rgba(148,163,184,0.35); display:flex; align-items:center; justify-content:center; font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:800; color:#0f172a; overflow:hidden; } .ticket-file-preview img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; } .ticket-file-name{flex:1 1 auto;min-width:0;word-break:break-word} .ticket-file-remove{ border:none; background:rgba(239,68,68,0.12); color:#b91c1c; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:4px 10px; border-radius:999px; cursor:pointer; transition:background 140ms ease, color 140ms ease; } .ticket-file-remove:hover{background:rgba(239,68,68,0.2)} .ticket-layout{display:grid;grid-template-columns:1fr;gap:18px;align-items:stretch;flex:0 0 auto;min-height:0;height:auto} .ticket-side{display:flex;flex-direction:column;flex:0 0 auto;min-height:0} .ticket-side .ticket-field{flex:0 0 auto;min-height:0;display:flex;flex-direction:column;overflow:visible} .ticket-modal-body.ticket-modal-body--split{overflow:hidden} .ticket-layout--split{grid-template-columns:minmax(0,1fr) 320px;align-items:stretch;flex:1 1 auto;min-height:0} .ticket-layout--split .ticket-column-main{overflow:auto;padding-right:14px} .ticket-layout--split .ticket-column-main > .ticket-field{flex:0 0 auto} .ticket-layout--split .ticket-side{position:sticky;top:0;align-self:stretch;min-height:0;max-height:100%;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .ticket-layout--split .ticket-side .ticket-field{margin-top:14px} .ticket-comments-list{ display:flex; flex-direction:column; gap:10px; flex:0 0 auto; min-height:0; overflow:visible; padding-right:0; max-height:none; } .ticket-inline-error{ margin:4px 0 0; font-size:12px; font-weight:700; color:#b91c1c; } .ticket-inline-error[hidden]{display:none} .ticket-filters{ margin:16px 0 18px; padding:18px; border-radius:22px; border:1px solid rgba(124,58,237,0.12); background:linear-gradient(135deg, rgba(124,58,237,0.08), rgba(236,72,153,0.06)); box-shadow:0 18px 32px rgba(15,23,42,0.12); display:flex; flex-direction:column; gap:16px; } html[data-theme="dark"] .ticket-filters{ border-color:rgba(189,205,255,0.16); background:linear-gradient(135deg, rgba(59,130,246,0.10), rgba(17,24,39,0.85)); box-shadow:0 18px 32px rgba(0,0,0,0.35); } .ticket-filter-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap} .ticket-filter-kicker{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)} .ticket-filter-sub{margin:4px 0 0;font-size:12px;color:var(--muted);max-width:420px} .ticket-filter-reset{padding:8px 12px;font-size:12px;line-height:1;font-weight:600} .ticket-templates{display:flex;flex-direction:column;gap:6px;margin-bottom:4px} .ticket-template-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .ticket-template-hint{margin:0;font-size:12px;color:var(--muted)} .ticket-template-row select{min-width:220px} .request-type{ padding:14px; border-radius:16px; border:1px solid rgba(124,58,237,.16); background: rgba(248,250,252,0.9); grid-column: 1 / -1; width: 100%; } .request-type label{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .request-type .ticket-template-row{ display:flex; align-items:center; gap:10px; } .request-dropdown{ position:relative; width:100%; } .request-dropdown-toggle{ width:100%; min-height:46px; border-radius:14px; border:1px solid rgba(124,58,237,.16); background:#fff; padding:12px 44px 12px 14px; text-align:left; font-weight:800; color:var(--text); cursor:pointer; box-shadow:0 10px 24px rgba(124,58,237,.08); position:relative; } .request-dropdown-toggle::after{ content:""; position:absolute; right:16px; top:50%; width:8px; height:8px; border-right:2px solid rgba(124,58,237,.85); border-bottom:2px solid rgba(124,58,237,.85); transform:translateY(-60%) rotate(45deg); } .request-dropdown-menu{ position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border:1px solid rgba(124,58,237,.18); border-radius:14px; box-shadow:0 18px 40px rgba(15,23,42,.18); padding:6px; display:flex; flex-direction:column; gap:4px; z-index:20; } .request-dropdown-menu[hidden]{ display:none; } .request-dropdown-option{ width:100%; text-align:left; border:0; background:transparent; padding:10px 12px; border-radius:10px; font-weight:700; color:var(--text); cursor:pointer; } .request-dropdown-option:hover, .request-dropdown-option:focus-visible{ background:rgba(124,58,237,.10); outline:none; } .request-type .ticket-template-hint{ font-size:12px; color:var(--muted); margin:0; } .request-type .ticket-char-error{ margin:0; } .request-title{ padding:12px 14px; border-radius:14px; border:1px solid rgba(124,58,237,.12); background: rgba(255,255,255,0.85); display:flex; flex-direction:column; gap:6px; } .request-title-label{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .request-title-value{ font-size:16px; font-weight:800; color:var(--text); } .request-fields{ margin-top:12px; } .request-fields .formgrid{ row-gap:14px; column-gap:14px; } .request-fields .formgrid > div{ gap:8px; } .ticket-template-row button.ghost--soft{padding-inline:10px} .ticket-filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px} .ticket-filter-control{ width:100%; border-radius:14px; border:1px solid rgba(148,163,184,0.55); background:rgba(255,255,255,0.92); padding:10px 14px; font-size:13px; font-weight:600; color:var(--text); transition:border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; min-height:44px; line-height:1.2; } html[data-theme="dark"] .ticket-filter-control{ border-color:rgba(189,205,255,0.26); background:rgba(16,22,36,0.92); color:var(--text); box-shadow:inset 0 1px 0 rgba(255,255,255,0.02); } .audit-multiselect{position:relative;} .audit-multiselect-toggle{ display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; padding-right:40px; position:relative; } .audit-multiselect.is-open .audit-multiselect-toggle{ border-color:rgba(124,58,237,0.5); box-shadow:0 0 0 3px rgba(124,58,237,0.20); background:#fff; } /* Dark-mode override: keep the audit multiselect toggle dark when open */ html[data-theme="dark"] .audit-multiselect.is-open .audit-multiselect-toggle{ border-color:rgba(124,58,237,0.36); box-shadow:0 0 0 3px rgba(124,58,237,0.12); background:rgba(16,22,36,0.96); color:var(--text); } /* Dark-mode: style checkboxes inside audit multiselect options */ html[data-theme="dark"] .audit-multiselect-option input{ background:rgba(255,255,255,0.03); border:1px solid rgba(148,163,184,0.06); } html[data-theme="dark"] .audit-multiselect-option input:checked{ background:var(--accent); border-color:transparent; } .audit-multiselect-toggle::after{ content:''; position:absolute; right:16px; top:50%; width:12px; height:12px; transform:translateY(-50%); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:12px 12px; pointer-events:none; } .audit-multiselect-menu{ position:absolute; left:0; right:0; top:calc(100% + 6px); background:#fff; border:1px solid rgba(148,163,184,0.45); border-radius:16px; box-shadow:0 20px 40px rgba(15,23,42,0.18); padding:12px; z-index:30; } html[data-theme="dark"] .audit-multiselect-menu{ background:#0f1726; border:1px solid rgba(189,205,255,0.22); box-shadow:0 22px 44px rgba(0,0,0,0.45); } .audit-multiselect.is-open .audit-multiselect-menu{display:block;} .audit-multiselect-menu[hidden]{display:none;} .audit-multiselect-options{ display:flex; flex-direction:column; gap:8px; max-height:220px; overflow:auto; } .audit-multiselect-option{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:12px; border:1px solid transparent; font-size:13px; font-weight:600; color:var(--text); cursor:pointer; } .audit-multiselect-option:hover{ border-color:rgba(124,58,237,0.25); background:rgba(124,58,237,0.06); } html[data-theme="dark"] .audit-multiselect-option{ color:var(--text); } html[data-theme="dark"] .audit-multiselect-option:hover{ border-color:rgba(189,205,255,0.28); background:rgba(24,34,55,0.85); } .audit-multiselect-option input{ width:16px; height:16px; margin:0; accent-color:var(--accent); } [data-audit-results]{ overflow:hidden; } .audit-table-wrapper{ overflow:hidden; } .audit-multiselect-option span{pointer-events:none;} .audit-multiselect-option input:checked + span{color:var(--accent);} .ticket-filter-reset{ align-self:flex-end; } .ticket-filter-reset .ghost{ width:100%; justify-content:center; } [data-audit-filter-shell].is-loading, [data-audit-results].is-loading{ opacity:0.45; pointer-events:none; } .ticket-filter-control::placeholder{color:rgba(71,85,105,0.7);font-weight:500} html[data-theme="dark"] .ticket-filter-control::placeholder{color:rgba(226,232,240,0.55)} .ticket-filter-control:focus{ border-color:rgba(124,58,237,0.5); box-shadow:0 0 0 3px rgba(124,58,237,0.20); background:#fff; outline:none; } /* Dark-mode: make focused filter inputs match dark background */ html[data-theme="dark"] .ticket-filter-control:focus{ background:rgba(15,23,42,0.96); border-color:rgba(124,58,237,0.28); box-shadow:0 0 0 3px rgba(124,58,237,0.12); } .ticket-filter-select{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:var(--muted)} .ticket-filter-control--select{ appearance:none; -webkit-appearance:none; padding-right:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:12px 12px; } @media (max-width:700px){ .ticket-filter-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));} } .ticket-table thead tr{background:transparent} .ticket-table td:first-child{min-width:120px} .ticket-key-legend{ margin:18px 0; padding:16px 20px; border-radius:22px; border:1px solid rgba(124,58,237,0.12); background:linear-gradient(135deg, rgba(37,99,235,0.06), rgba(236,72,153,0.05)); box-shadow:0 14px 30px rgba(15,23,42,0.08); } .ticket-key-legend-title{ font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } .ticket-key-legend ul{ list-style:none; padding:0; margin:12px 0 0; display:flex; flex-direction:column; gap:10px; } .ticket-key-legend li{ display:grid; grid-template-columns:110px minmax(0,1fr) minmax(0,180px) 80px; gap:14px; font-size:13px; align-items:center; } .ticket-key-code{ font-weight:900; letter-spacing:.2em; text-transform:uppercase; color:#5b21b6; } .ticket-key-name{font-weight:700;color:var(--text)} .ticket-key-meta{font-size:12px;color:var(--muted)} .ticket-key-count{ font-size:12px; font-weight:700; text-align:right; color:var(--muted); } @media (max-width:720px){ .ticket-key-legend li{ grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:6px; padding:10px 0; border-bottom:1px solid rgba(148,163,184,0.2); } .ticket-key-legend li:last-child{border-bottom:none} .ticket-key-count{text-align:left} } .status-pill{display:inline-flex;align-items:center;justify-content:center;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;min-width:96px} .status-open{background:rgba(59,130,246,0.24);color:#0f172a} .status-waiting{background:rgba(147,51,234,0.24);color:#2e1065} .status-progress{background:rgba(250,204,21,0.26);color:#78350f} .status-resolved{background:rgba(34,197,94,0.26);color:#064e3b} .status-closed, .status-rejected{background:rgba(15,118,110,0.24);color:#0f172a} .status-cancelled{background:rgba(239,68,68,0.20);color:#7f1d1d} .status-reopened{background:rgba(71,85,105,0.26);color:#0f172a} .priority-pill{display:inline-flex;align-items:center;justify-content:center;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700} .priority-pill{white-space:nowrap} .priority-low{background:rgba(71,85,105,0.24);color:#0f172a} .priority-medium{background:rgba(250,204,21,0.26);color:#78350f} .priority-high{background:rgba(249,115,22,0.26);color:#7c2d12} .priority-critical{background:rgba(239,68,68,0.28);color:#7f1d1d} .sla-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:12px;font-weight:800;font-size:13px;line-height:1.2;border:1px solid rgba(148,163,184,0.4);background:rgba(248,250,252,0.9);white-space:normal;max-width:240px;transition:background 160ms ease,border-color 160ms ease,color 160ms ease;box-shadow:0 4px 10px rgba(15,23,42,0.12);} .sla-in_progress{background:linear-gradient(135deg, rgba(59,130,246,0.18), rgba(59,130,246,0.05));border-color:rgba(59,130,246,0.5);color:#0f3c96} .sla-breached{background:linear-gradient(135deg, rgba(239,68,68,0.2), rgba(239,68,68,0.05));border-color:rgba(239,68,68,0.7);color:#b91c1c} .sla-met{background:linear-gradient(135deg, rgba(34,197,94,0.22), rgba(34,197,94,0.06));border-color:rgba(34,197,94,0.6);color:#11653a} .sla-not_set{background:linear-gradient(135deg, rgba(148,163,184,0.2), rgba(248,250,252,0.4));border-color:rgba(148,163,184,0.6);color:#475569} .sla-paused{background:linear-gradient(135deg, rgba(148,163,184,0.25), rgba(226,232,240,0.5));border-color:rgba(148,163,184,0.7);color:#374151} .sla-warning{background:linear-gradient(135deg, rgba(234,179,8,0.25), rgba(254,240,138,0.4));border-color:rgba(234,179,8,0.7);color:#92400e} .ticket-sla-relative{font-weight:800;} .ticket-sla-absolute{font-size:12px;color:var(--muted);margin-top:4px;white-space:nowrap} .ticket-sla-countdown{font-size:12px;color:#0f172a;font-weight:800;margin-top:4px;} .ticket-sla-none{color:var(--muted);font-weight:700;display:inline-block;min-width:48px;text-align:left;} /* Dark-mode: improve contrast for priority/status badges and SLA chip */ html[data-theme="dark"] .priority-pill{background:rgba(255,255,255,0.03);color:#f8fafc;border:1px solid rgba(148,163,184,0.06)} html[data-theme="dark"] .priority-low{background:rgba(148,163,184,0.12);color:#0f172a} html[data-theme="dark"] .priority-medium{background:rgba(245,158,11,0.12);color:#fff} html[data-theme="dark"] .priority-high{background:rgba(249,115,22,0.12);color:#fff} html[data-theme="dark"] .priority-critical{background:rgba(239,68,68,0.12);color:#fff} html[data-theme="dark"] .status-pill{background:rgba(255,255,255,0.03);color:#f8fafc} html[data-theme="dark"] .status-open{background:rgba(59,130,246,0.12);color:#e6f2ff} html[data-theme="dark"] .status-waiting{background:rgba(124,58,237,0.12);color:#efe6ff} html[data-theme="dark"] .status-progress{background:rgba(250,204,21,0.12);color:#fff3cc} html[data-theme="dark"] .status-resolved{background:rgba(34,197,94,0.12);color:#dcfce7} html[data-theme="dark"] .status-cancelled{background:rgba(239,68,68,0.12);color:#fee2e2} html[data-theme="dark"] .sla-chip{background:rgba(255,255,255,0.03);border-color:rgba(148,163,184,0.12);color:#f8fafc;box-shadow:0 6px 18px rgba(0,0,0,0.6)} html[data-theme="dark"] .sla-not_set{background:linear-gradient(135deg, rgba(148,163,184,0.06), rgba(255,255,255,0.03));border-color:rgba(148,163,184,0.12);color:#e6eef6} html[data-theme="dark"] .ticket-sla-relative{color:#f8fafc} html[data-theme="dark"] .ticket-sla-absolute{color:rgba(226,232,240,0.75)} html[data-theme="dark"] .ticket-sla-countdown{color:#f8fafc} /* Dark-mode: SLA KPI cards and empty state */ html[data-theme="dark"] .sla-kpi{ background: rgba(10,14,24,0.95) !important; border: 1px solid rgba(148,163,184,0.06) !important; color: var(--text) !important; box-shadow: none !important; } html[data-theme="dark"] .sla-empty{ background: rgba(10,14,24,0.94) !important; border-color: rgba(148,163,184,0.06) !important; color: rgba(226,232,240,0.72) !important; } .ticket-table--modern{ width:100%; border-collapse:collapse; table-layout:auto; font-size:14px; } .ticket-table--modern thead th{ background:transparent; border-bottom:1px solid rgba(124,58,237,0.18); padding:10px 14px; font-size:12px; letter-spacing:.02em; color:var(--muted); text-align:left; } .ticket-table--modern tbody td{ padding:12px 14px; vertical-align:middle; border-bottom:1px solid rgba(226,232,240,0.9); text-align:left; } .ticket-table--modern tbody tr:hover td{background:rgba(248,250,252,0.6);} /* Smooth background transitions and dark-mode overrides so hover doesn't flash bright white */ .ticket-table--modern tbody tr td{transition:background 140ms ease, border-color 140ms ease;} html[data-theme="dark"] .ticket-table--modern tbody tr:hover td{background:rgba(255,255,255,0.02);} html[data-theme="dark"] .ticket-table--modern tbody td{border-bottom-color:rgba(148,163,184,0.08);} .ticket-table--modern thead th:last-child, .ticket-cell--actions{text-align:right;} .ticket-cell--sla{min-width:170px;} .ticket-cell--code{white-space:nowrap;} .due-form{display:flex;flex-direction:column;gap:6px;} .due-form input[type="datetime-local"]{width:100%;max-width:220px;padding:8px 10px;border:1px solid rgba(148,163,184,0.6);border-radius:10px;font:inherit;} .due-actions{display:flex;gap:8px;align-items:center;} .status-picker{position:relative;margin:8px 0 4px} .status-picker-toggle{ width:100%; border-radius:16px; padding:12px 16px; border:1px solid rgba(124,58,237,0.18); background:linear-gradient(120deg,#ffffff,rgba(247,246,251,0.9)); display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); cursor:pointer; transition:box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease, background 160ms ease; position:relative; } .status-picker-value{ flex:1 1 auto; min-width:0; text-align:left; color:inherit; text-transform:none; font-size:14px; letter-spacing:.04em; } .status-picker-caret{ width:12px; height:12px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform 160ms ease; flex:0 0 auto; } .status-picker.is-open .status-picker-caret{transform:rotate(-135deg)} .status-picker.is-open .status-picker-toggle{ box-shadow:0 16px 30px rgba(15,23,42,0.16); transform:translateY(-1px); } .status-picker-toggle--open{ background:linear-gradient(120deg,rgba(59,130,246,0.22),rgba(59,130,246,0.08)); border-color:rgba(59,130,246,0.45); color:#1d4ed8; } .status-picker-toggle--progress{ background:linear-gradient(120deg,rgba(250,204,21,0.26),rgba(251,191,36,0.08)); border-color:rgba(251,191,36,0.65); color:#8b3d02; } .status-picker-toggle--waiting{ background:linear-gradient(120deg,rgba(167,139,250,0.26),rgba(167,139,250,0.1)); border-color:rgba(167,139,250,0.55); color:#5b21b6; } .status-picker-toggle--resolved{ background:linear-gradient(120deg,rgba(34,197,94,0.26),rgba(34,197,94,0.08)); border-color:rgba(34,197,94,0.55); color:#15803d; } .status-picker-toggle--closed, .status-picker-toggle--rejected{ background:linear-gradient(120deg,rgba(15,118,110,0.25),rgba(15,118,110,0.08)); border-color:rgba(20,184,166,0.55); color:#0f766e; } .priority-picker{position:relative;margin:10px 0 6px} .priority-picker-toggle{ width:100%; border-radius:16px; padding:12px 16px; border:1px solid rgba(124,58,237,0.18); background:linear-gradient(120deg,#ffffff,rgba(247,246,251,0.9)); display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); cursor:pointer; transition:box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease, background 160ms ease; position:relative; } .priority-picker-label{flex:0 0 auto} .priority-picker-value{flex:1 1 auto;min-width:0;text-align:left;color:inherit;text-transform:none;font-size:14px;letter-spacing:.04em} .priority-picker-caret{ width:12px; height:12px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform 160ms ease; flex:0 0 auto; } .priority-picker.is-open .priority-picker-caret{transform:rotate(-135deg)} .priority-picker.is-open .priority-picker-toggle{box-shadow:0 16px 30px rgba(15,23,42,0.16);transform:translateY(-1px)} .priority-picker-toggle--low{background:linear-gradient(120deg,rgba(71,85,105,0.18),rgba(71,85,105,0.06));border-color:rgba(71,85,105,0.35);color:#0f172a} .priority-picker-toggle--medium{background:linear-gradient(120deg,rgba(250,204,21,0.26),rgba(251,191,36,0.08));border-color:rgba(251,191,36,0.65);color:#8b3d02} .priority-picker-toggle--high{background:linear-gradient(120deg,rgba(249,115,22,0.22),rgba(249,115,22,0.08));border-color:rgba(249,115,22,0.55);color:#9a3412} .priority-picker-toggle--critical{background:linear-gradient(120deg,rgba(239,68,68,0.24),rgba(239,68,68,0.08));border-color:rgba(239,68,68,0.55);color:#b91c1c} .priority-picker-menu{ position:absolute; left:0; right:0; top:calc(100% + 8px); padding:10px; border-radius:16px; background:rgba(255,255,255,0.97); border:1px solid rgba(124,58,237,0.18); box-shadow:0 22px 44px rgba(15,23,42,0.18); display:none; z-index:20; } .priority-picker.is-open .priority-picker-menu{display:block} .priority-picker-option{ width:100%; border:none; background:transparent; text-align:left; padding:10px 10px; border-radius:14px; display:flex; align-items:center; gap:10px; cursor:pointer; font-weight:800; color:var(--text); } .priority-picker-option:hover{background:rgba(124,58,237,0.08)} .priority-picker-option.is-active{background:rgba(124,58,237,0.12)} .priority-picker-dot{width:10px;height:10px;border-radius:999px;flex:0 0 auto;background:rgba(148,163,184,0.6)} .priority-picker-dot.priority-low{background:#0f172a} .priority-picker-dot.priority-medium{background:#92400e} .priority-picker-dot.priority-high{background:#9a3412} .priority-picker-dot.priority-critical{background:#b91c1c} html[data-theme="dark"] .priority-picker-toggle{background:linear-gradient(120deg,rgba(30,41,59,0.95),rgba(15,23,42,0.92));border-color:rgba(148,163,184,0.22)} html[data-theme="dark"] .priority-picker-menu{background:rgba(15,23,42,0.96);border-color:rgba(148,163,184,0.24)} html[data-theme="dark"] .priority-picker-option{color:var(--text)} html[data-theme="dark"] .priority-picker-option:hover{background:rgba(148,163,184,0.12)} html[data-theme="dark"] .priority-picker-option.is-active{background:rgba(148,163,184,0.18)} .status-picker-toggle--reopened{ background:linear-gradient(120deg,rgba(71,85,105,0.24),rgba(15,23,42,0.08)); border-color:rgba(100,116,139,0.5); color:#0f172a; } .status-picker-toggle--custom{ background:linear-gradient(120deg,rgba(148,163,184,0.2),rgba(248,250,252,0.95)); border-color:rgba(148,163,184,0.45); color:#0f172a; } .status-picker-menu{ position:absolute; left:0; right:0; top:calc(100% + 6px); background:#fff; border:1px solid rgba(15,23,42,0.12); border-radius:18px; box-shadow:0 24px 60px rgba(15,23,42,0.20); padding:10px; display:flex; flex-direction:column; gap:8px; z-index:30; max-height:260px; overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(4px); pointer-events:none; transition:opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms; } .status-picker.is-open .status-picker-menu{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; transition:opacity 140ms ease, transform 140ms ease; } /* Dark mode: status picker dropdown and options */ html[data-theme="dark"] .status-picker-toggle{ background:linear-gradient(120deg,rgba(30,41,59,0.95),rgba(15,23,42,0.92)); border-color:rgba(148,163,184,0.22); color:var(--muted); } html[data-theme="dark"] .status-picker-menu{ background:rgba(15,23,42,0.96); border-color:rgba(148,163,184,0.24); box-shadow:0 22px 44px rgba(0,0,0,0.45); } html[data-theme="dark"] .status-picker-option{ background:rgba(24,34,55,0.92); color:var(--text); } html[data-theme="dark"] .status-picker-option:hover{ background:rgba(148,163,184,0.08); } html[data-theme="dark"] .status-picker-option.is-active{ background:rgba(148,163,184,0.12); box-shadow:0 12px 24px rgba(0,0,0,0.6); transform:translateY(-1px); } .status-picker-option{ border:none; border-radius:14px; padding:10px 14px; display:flex; align-items:center; justify-content:flex-start; gap:10px; font-size:13px; font-weight:800; background:rgba(247,246,251,0.9); color:var(--text); cursor:pointer; transition:background 140ms ease, box-shadow 140ms ease, transform 140ms ease; width:100%; text-align:left; } .status-picker-option::before{ content:''; width:12px; height:12px; border-radius:999px; background:rgba(148,163,184,0.8); box-shadow:0 0 0 4px rgba(148,163,184,0.15); flex:0 0 auto; } .status-picker-option-name{flex:1 1 auto;min-width:0} .status-picker-option.is-active{ background:rgba(124,58,237,0.08); box-shadow:0 12px 24px rgba(124,58,237,0.18); transform:translateY(-1px); } .status-picker-option--open::before{background:#1d4ed8;box-shadow:0 0 0 4px rgba(59,130,246,0.18)} .status-picker-option--progress::before{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,0.2)} .status-picker-option--waiting::before{background:#7c3aed;box-shadow:0 0 0 4px rgba(124,58,237,0.18)} .status-picker-option--resolved::before{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,0.2)} .status-picker-option--closed::before, .status-picker-option--rejected::before{background:#0f766e;box-shadow:0 0 0 4px rgba(15,118,110,0.2)} .status-picker-option--reopened::before{background:#0f172a;box-shadow:0 0 0 4px rgba(15,23,42,0.18)} .status-picker.is-loading .status-picker-toggle{ cursor:progress; opacity:0.75; } .status-picker.is-loading .status-picker-toggle::after{ content:''; width:12px; height:12px; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; position:absolute; right:18px; top:50%; margin-top:-6px; animation:spin 0.8s linear infinite; } .status-picker.is-loading .status-picker-caret{opacity:0.2} .status-picker-note{ font-size:12px; color:#b45309; font-weight:700; margin:6px 0 0; } @keyframes spin{to{transform:rotate(360deg)}} @media (max-width: 900px){ .ticket-modal-inner{width:min(100%, 100vw);border-radius:0;max-height:100vh} .admin-modal-inner{width:min(100%, 100vw);border-radius:0;max-height:100vh} .ticket-modal-body.ticket-modal-body--split{overflow:auto} .ticket-layout{grid-template-columns:1fr} .ticket-column-main{overflow:visible;padding-right:0;max-height:none} .ticket-layout--split{grid-template-columns:1fr;flex:0 0 auto} .ticket-layout--split .ticket-side{position:static} } /* Checkbox grid */ .checkgrid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; margin-top:6px; } .check{ display:flex; align-items:center; gap:10px; padding:12px 12px; border-radius:14px; border:1px solid rgba(124,58,237,.14); background:#fff; cursor:pointer; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } .profile-pic{ width:86px; height:86px; border-radius:24px; object-fit:cover; border:1px solid rgba(124,58,237,.22); box-shadow: 0 10px 24px rgba(124,58,237,.12); background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(236,72,153,.08)); flex:0 0 auto; } .check:hover{ transform: translateY(-1px); box-shadow:0 14px 30px rgba(124,58,237,.10); } .check input{ width:18px;height:18px; accent-color: var(--accent); margin:0; flex:0 0 auto; } .check span{ font-weight:800; color:var(--text); font-size:14px; line-height:1.2; } .check small{ display:block; font-weight:600; color:var(--muted); font-size:12px; margin-top:4px; } .check.checked{ border-color: rgba(124,58,237,.32); box-shadow:0 16px 38px rgba(124,58,237,.14); } /* About section */ .about{ display:grid; grid-template-columns: 360px 1fr; gap:14px; margin-top:18px; } .about .avatar{ width:86px;height:86px;border-radius:24px; background: linear-gradient(135deg, rgba(124,58,237,.16), rgba(236,72,153,.14)); border:1px solid rgba(124,58,237,.22); display:grid;place-items:center; font-weight:900; color:var(--accent); box-shadow: 0 10px 24px rgba(124,58,237,.12); flex:0 0 auto; } .about-top{display:flex;gap:14px;align-items:center;margin-bottom:10px} .about-name{font-weight:900;font-size:18px} .about-role{color:var(--muted);font-size:13px;margin-top:2px} .about-bullets{ margin:10px 0 0; padding-left:18px; color:var(--muted); line-height:1.6; } .about-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px} .mini{ font-size:13px; background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.14); color:#3b1a7a; padding:8px 10px; border-radius:999px; font-weight:800; display:inline-flex; align-items:center; gap:8px; text-decoration:none; } /* Back to top */ .toTop{ position: fixed; right: 16px; bottom: 16px; width: 46px; height: 46px; border-radius: 16px; border: 1px solid rgba(124,58,237,.16); background: rgba(255,255,255,.92); backdrop-filter: blur(10px); box-shadow: 0 14px 34px rgba(2, 6, 23, 0.12); display: none; align-items:center; justify-content:center; cursor:pointer; z-index: 120; font-weight: 900; color: var(--text); } .toTop.show{display:flex} .toTop:hover{transform: translateY(-1px)} .toTop:active{transform: translateY(0)} .toTop svg{width:18px;height:18px} /* Mobile layout */ @media (max-width: 960px){ .wrap{padding:14px 14px 48px} .header-inner{padding:10px 14px} .hero{grid-template-columns:1fr} .contact{grid-template-columns:1fr} .about{grid-template-columns:1fr} .grid{grid-template-columns:1fr} .brand{min-width:unset} nav.nav{display:none} .btn#ctaTop{display:none} .menuBtn{display:inline-flex;align-items:center;gap:8px} input:not([type="checkbox"]):not([type="radio"]), select, textarea{ font-size:16px; } .checkgrid{grid-template-columns:1fr} } @media (max-width: 960px){ html{scroll-padding-top:96px;} [id]{scroll-margin-top:96px;} } @media (max-width: 600px){ form > div[style*="grid-template-columns"]{display:block !important} form > div[style*="grid-template-columns"] > div{margin-bottom:10px} } /* Admin + portal: mobile compatibility pass */ @media (max-width: 960px){ .header-inner{flex-direction:column;align-items:stretch;gap:10px} .navwrap{width:100%;justify-content:space-between;gap:8px} .portal-admin-switch{width:100%;flex-wrap:wrap;justify-content:space-between} .portal-admin-switch select{width:100%;min-width:0} .admin-table, .ticket-table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } .admin-table thead th, .admin-table td, .ticket-table thead th, .ticket-table td{ white-space:nowrap; } } @media (max-width: 720px){ .actions, .table-actions, .ticket-description-actions, .admin-modal-form .actions, .portal-handoff-actions{ flex-direction:column; align-items:stretch; } .actions .btn, .actions .ghost, .table-actions .btn, .table-actions .ghost, .ticket-description-actions .btn, .ticket-description-actions .ghost, .portal-handoff-actions .btn, .portal-handoff-actions .ghost{ width:100%; justify-content:center; } .ticket-filter-grid{grid-template-columns:1fr} .ticket-filter-reset{align-self:stretch} } /* Segment switcher (Personal / Enterprise) */ .segment-bar{ background: rgba(15,23,42,0.85); color: #e5e7eb; font-size: 13px; } .segment-inner{ max-width:1100px; margin:0 auto; padding:6px 18px; display:flex; gap:16px; align-items:center; } .segment{ color:#cbd5f5; text-decoration:none; font-weight:700; padding:4px 10px; border-radius:999px; } .segment:hover{ background: rgba(124,58,237,0.25); color:#fff; } .segment.active{ background: rgba(124,58,237,0.45); color:#fff; } .segment-left{ display:flex; gap:16px; align-items:center; } .segment-right{ margin-left:auto; display:flex; gap:10px; align-items:center; } /* ===== Dark mode (VALID + brand-matching) ===== */ html[data-theme="dark"]{ color-scheme: dark; /* Brand */ --accent:#b9c9ff; --accent2:#f7b3c0; --accent3:#7ce7b5; /* Base */ --bg:#0c111d; --bg2:#0f1626; --text:#eef3ff; --muted:#b9c7df; /* Surfaces */ --card: rgba(19, 25, 41, 0.95); --soft: rgba(15, 22, 36, 0.88); --soft-2: rgba(24, 32, 52, 0.82); /* Lines + depth */ --border: rgba(189,205,255,.24); --shadow: 0 18px 60px rgba(0,0,0,.42); } /* Mobile Menu/Meny button (dark mode) */ html[data-theme="dark"] .menuBtn{ background: rgba(10,14,32,.78) !important; border: 1px solid rgba(167,139,250,.18) !important; color: var(--text) !important; } /* Checkbox cards (form options) — dark mode */ html[data-theme="dark"] .check{ background: rgba(10,14,32,.78) !important; border: 1px solid rgba(167,139,250,.18) !important; } html[data-theme="dark"] .check span{ color: var(--text) !important; } html[data-theme="dark"] .check small{ color: var(--muted) !important; } /* About → LinkedIn / Facebook pills — dark mode */ html[data-theme="dark"] .mini{ background: rgba(18,24,48,.70) !important; border: 1px solid rgba(167,139,250,.22) !important; color: var(--text) !important; } html[data-theme="dark"] .mini:hover{ background: rgba(18,24,48,.90) !important; } /* Checked state stays visible */ html[data-theme="dark"] .check.checked{ border-color: rgba(167,139,250,.38) !important; box-shadow: 0 16px 38px rgba(167,139,250,.22) !important; } /* Background */ html[data-theme="dark"] body{ background: radial-gradient(1200px 600px at 10% -10%, rgba(167,139,250,.24), transparent 60%), radial-gradient(1000px 600px at 90% 0%, rgba(251,113,133,.18), transparent 55%), linear-gradient(180deg, var(--bg2), var(--bg)) !important; color: var(--text) !important; } /* Header glass */ html[data-theme="dark"] header{ background: rgba(7,9,20,0.72) !important; border-bottom: 1px solid rgba(167,139,250,.18) !important; } /* Cards + text */ html[data-theme="dark"] .card{ background: var(--card) !important; border: 1px solid rgba(167,139,250,.18) !important; box-shadow: var(--shadow) !important; } html[data-theme="dark"] .mini-card{ background: rgba(10,14,32,.70) !important; border: 1px solid rgba(167,139,250,.16) !important; box-shadow: 0 12px 30px rgba(0,0,0,.25) !important; } html[data-theme="dark"] p, html[data-theme="dark"] .brand .sub, html[data-theme="dark"] .hint, html[data-theme="dark"] .caption, html[data-theme="dark"] label, html[data-theme="dark"] .status{ color: var(--muted) !important; } /* Nav capsule + chips */ html[data-theme="dark"] nav.nav{ background: rgba(18,24,48,.55) !important; border: 1px solid rgba(167,139,250,.18) !important; } html[data-theme="dark"] .chip{ background: rgba(10,14,32,.78) !important; border: 1px solid rgba(167,139,250,.18) !important; color: var(--text) !important; } html[data-theme="dark"] .chip:hover{ box-shadow: 0 14px 34px rgba(167,139,250,.14) !important; } /* Pills */ html[data-theme="dark"] .pill{ background: rgba(167,139,250,.12) !important; border: 1px solid rgba(167,139,250,.22) !important; color: #ddd6fe !important; } /* Device + feature rows */ html[data-theme="dark"] .device, html[data-theme="dark"] .feature{ background: rgba(10,14,32,.70) !important; border: 1px solid rgba(167,139,250,.16) !important; } html[data-theme="dark"] .auth-panel{ background: rgba(10,14,32,.75) !important; border-color: rgba(167,139,250,.22) !important; } html[data-theme="dark"] .icon{ background: rgba(12,16,36,.85) !important; border: 1px solid rgba(167,139,250,.18) !important; } html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"] select, html[data-theme="dark"] textarea{ background: #131c2e !important; border: 1px solid rgba(189,205,255,.24) !important; color: var(--text) !important; } /* Ghost buttons */ html[data-theme="dark"] .ghost{ background: rgba(19,28,46,.85) !important; border: 1px solid rgba(189,205,255,.24) !important; color: var(--text) !important; } html[data-theme="dark"] .ghost--soft{ background: rgba(21,31,52,.82) !important; border-color: rgba(189,205,255,.28) !important; } html[data-theme="dark"] .ghost--danger{ background: rgba(127,29,29,.38) !important; border-color: rgba(248,113,113,.42) !important; color: #fecaca !important; } html[data-theme="dark"] .confirm-dialog{ background: rgba(19,28,46,.94) !important; box-shadow: 0 30px 60px rgba(0,0,0,.50) !important; } html[data-theme="dark"] .confirm-title{ color: #f8fafc !important; } html[data-theme="dark"] .confirm-detail{ color: rgba(226,232,240,.85) !important; } /* Notice (warm, readable) */ html[data-theme="dark"] .notice{ background: rgba(19,28,46,0.92) !important; border: 1px solid rgba(189,205,255,.24) !important; color: #e6ebff !important; } html[data-theme="dark"] .notice.notice--success{ background: rgba(16,185,129,.16) !important; border-color: rgba(16,185,129,.36) !important; color: #bbf7d0 !important; } html[data-theme="dark"] .portal-selection-error{ background: rgba(248,113,113,.18) !important; border-color: rgba(248,113,113,.35) !important; color: #fecaca !important; } html[data-theme="dark"] .portal-choice--invalid .portal-checkbox span{ border-color: rgba(248,113,113,.6) !important; background: rgba(248,113,113,.16) !important; } /* Badge */ html[data-theme="dark"] .badge{ background: rgba(34,197,94,.14) !important; border: 1px solid rgba(34,197,94,.22) !important; color: #86efac !important; } /* Drawer */ html[data-theme="dark"] .drawer{ background: rgba(0,0,0,0.62) !important; } html[data-theme="dark"] .drawer-panel{ background: rgba(7,9,20,0.92) !important; border-left: 1px solid rgba(167,139,250,.18) !important; } html[data-theme="dark"] .drawer-link{ background: rgba(18,24,48,.55) !important; border: 1px solid rgba(167,139,250,.18) !important; color: var(--text) !important; } /* Back to top */ html[data-theme="dark"] .toTop{ background: rgba(7,9,20,0.78) !important; border: 1px solid rgba(167,139,250,.18) !important; color: var(--text) !important; } /* Segment bar */ html[data-theme="dark"] .segment-bar{ background: rgba(10,14,32,0.92) !important; } /* Theme toggle keeps segment styling */ .themeToggle{ border:0; background: transparent; cursor:pointer; font: inherit; } /* Make the top segment bar sticky like the main menu bar */ .segment-bar{ position: sticky; top: 0; z-index: 60; /* above header (header is 50) */ } /* Ensure header sits right under the segment bar when both are sticky */ header{ top: 34px; /* matches the segment bar height; adjust +/-2px if needed */ } .segment-bar{ position: sticky; top: 0; z-index: 60; } header{ top: 34px; /* adjust +/-2px if needed */ } /* ===== Generic text helpers ===== */ .lede{ font-size:15px; margin-top:6px; margin-bottom:12px; } .sep{ color: rgba(203,213,245,.55); padding:0 2px; } /* ===== Generic icon list ===== */ .uc-lines{ margin:10px 0 0; padding-left:18px; color:var(--muted); line-height:1.6; } .uc-lines li{ margin:6px 0; } /* ===== Tile / feature card ===== */ .tile{ display:flex; gap:14px; align-items:flex-start; background: rgba(247,246,251,.85); border:1px solid rgba(124,58,237,.10); border-radius:16px; padding:14px; } .tile strong{ display:block; font-weight:900; } .tile span{ display:block; font-size:13px; color:var(--muted); margin-top:4px; line-height:1.35; } .ico{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background: rgba(124,58,237,.10); border:1px solid rgba(124,58,237,.14); font-size:20px; flex:0 0 auto; } /* ===== Simple form grid ===== */ .formgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } /* ADD THIS: makes each field stack with the same spacing as the form gap */ .formgrid > div{ display:flex; flex-direction:column; gap:10px; } @media (max-width:960px){ .formgrid{ grid-template-columns:1fr; } } /* ===== Dark mode support ===== */ html[data-theme="dark"] .tile{ background: rgba(12,16,36,0.85); border: 1px solid rgba(148,163,184,0.06); box-shadow: 0 6px 18px rgba(0,0,0,0.45); } html[data-theme="dark"] .tile strong{ color: var(--text); } html[data-theme="dark"] .tile span{ color: rgba(226,232,240,0.78); } html[data-theme="dark"] .ico{ background: rgba(18,22,40,0.92); border: 1px solid rgba(148,163,184,0.08); } /* ===== Segment bar: mobile-safe breadcrumbs ===== */ .segment-inner{ overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ } .segment-inner::-webkit-scrollbar{ display:none; } .segment-inner{ white-space: nowrap; gap: 10px; /* a bit tighter */ padding: 6px 14px; /* mobile-friendly default */ } .sep{ padding: 0; opacity: .7; } /* Make breadcrumb items smaller on narrow screens */ @media (max-width: 600px){ .segment-bar{ font-size: 12px; } .segment{ padding: 4px 8px; } } /* ===== Media inside cards (Office Automation preview) ===== */ .shot{ width:100%; height:auto; display:block; border-radius:16px; border:1px solid rgba(124,58,237,.18); box-shadow: var(--shadow); background: var(--soft); cursor: zoom-in; } /* ===== Select (dropdown) — make it match inputs ===== */ select{ -webkit-appearance: none; appearance: none; /* match input sizing */ width: 100%; min-height: 46px; padding: 12px 44px 12px 12px; /* extra right padding for the caret */ line-height: 1.2; /* keep your theme variables */ background-color: #fff; /* light mode base */ color: var(--text); /* custom caret */ background-image: linear-gradient(45deg, transparent 50%, rgba(71,85,105,.9) 50%), linear-gradient(135deg, rgba(71,85,105,.9) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } input:not([type="checkbox"]):not([type="radio"]), select{ border-radius:14px; } /* Dark mode select surface */ html[data-theme="dark"] select{ background-color: rgba(10,14,32,.85) !important; border: 1px solid rgba(167,139,250,.18) !important; color: var(--text) !important; background-image: linear-gradient(45deg, transparent 50%, rgba(238,242,255,.85) 50%), linear-gradient(135deg, rgba(238,242,255,.85) 50%, transparent 50%); } html[data-theme="dark"] .portal-selection-single{ border-color:rgba(167,139,250,0.28); background:linear-gradient(135deg, rgba(59,130,246,0.18), rgba(167,139,250,0.12)); } html[data-theme="dark"] .portal-checkbox span{ border-color:rgba(167,139,250,0.24); background:rgba(10,14,32,0.86); } html[data-theme="dark"] .portal-checkbox input:checked + span{ background:linear-gradient(135deg, rgba(167,139,250,0.30), rgba(59,130,246,0.22)); border-color:rgba(167,139,250,0.48); } html[data-theme="dark"] .portal-key-pill{ background:rgba(167,139,250,0.16); border-color:rgba(167,139,250,0.32); color:#c4b5fd; } html[data-theme="dark"] .admin-table thead th, html[data-theme="dark"] .ticket-table thead th{ background:rgba(17,24,39,0.92); border-color:rgba(189,205,255,0.22); } html[data-theme="dark"] .admin-table td, html[data-theme="dark"] .ticket-table td{ border-bottom:1px solid rgba(189,205,255,0.16); background:rgba(16,22,36,0.62); } html[data-theme="dark"] .admin-table tbody tr:hover, html[data-theme="dark"] .ticket-table tbody tr:hover{ background:rgba(185,201,255,0.10); } html[data-theme="dark"] .ticket-key-legend{ border-color:rgba(59,130,246,0.25); background:linear-gradient(135deg, rgba(59,130,246,0.16), rgba(15,23,42,0.78)); box-shadow:0 18px 30px rgba(2,6,23,0.55); } html[data-theme="dark"] .ticket-key-code{color:#c4b5fd} html[data-theme="dark"] .ticket-code-chip{ background:linear-gradient(135deg, rgba(59,130,246,0.18), rgba(167,139,250,0.22)); border-color:rgba(167,139,250,0.4); color:#c4b5fd; } html[data-theme="dark"] .ticket-sort-arrow--up{border-bottom-color:rgba(226,232,240,0.8)} html[data-theme="dark"] .ticket-sort-arrow--down{border-top-color:rgba(226,232,240,0.8)} html[data-theme="dark"] .ticket-sort.is-active[data-sort-state="asc"] .ticket-sort-arrow--up{border-bottom-color:rgba(196,181,253,0.95)} html[data-theme="dark"] .ticket-sort.is-active[data-sort-state="desc"] .ticket-sort-arrow--down{border-top-color:rgba(196,181,253,0.95)} html[data-theme="dark"] .ticket-page{ background:rgba(15,23,42,0.82); border-color:rgba(148,163,184,0.55); color:var(--text); } html[data-theme="dark"] .ticket-page.is-active{ background:rgba(124,58,237,0.35); border-color:rgba(124,58,237,0.75); color:#f5f3ff; } html[data-theme="dark"] .ticket-status-chip{ background:rgba(15,23,42,0.65); } html[data-theme="dark"] .ticket-file-item{ background:rgba(30,41,59,0.6); border-color:rgba(71,85,105,0.8); } html[data-theme="dark"] .ticket-file-preview{ background:rgba(30,41,59,0.9); border-color:rgba(71,85,105,0.7); color:var(--text); } html[data-theme="dark"] .password-meter-track{background:rgba(71,85,105,0.8)} /* (Optional but usually helps) options readable in dark dropdown list */ html[data-theme="dark"] option{ background: #0a0e20; color: var(--text); } /* Keep all single-line fields the same height */ input:not([type="checkbox"]):not([type="radio"]), select{ min-height: 46px; padding: 12px; line-height: 1.2; } /* select needs extra right padding for caret */ select{ padding-right: 44px; } /* Hero CTA spacing (applies across pages) */ .hero .actions{ margin-top:12px; } .hero .notice{ margin-top:12px; } /* Tile CTA spacing (description -> buttons) */ .tile .actions, .tile .biglink{ margin-top: 10px; } /* ===== SV Enterprise: make the Choose tiles truly mobile ===== */ /* 1) Force the Choose grid to 1 column on phones (your current breakpoint is too late) */ @media (max-width: 820px){ #valj .grid{ grid-template-columns: 1fr !important; } } /* 2) Add the missing spacing between copy and the CTA row (EN has this) */ #valj .actions, #valj .biglink{ margin-top: 12px; } /* 3) Keep the mobile CTA stack/wrap fix you already applied */ @media (max-width: 720px){ #valj .actions, #valj .biglink{ flex-direction: column; align-items: stretch; } #valj .actions .btn, #valj .actions .ghost, #valj .biglink .btn, #valj .biglink .ghost{ width: 100%; justify-content: center; white-space: normal; } } /* Lightbox close button: keep black text even in dark mode (because the button is white) */ html[data-theme="dark"] .lightbox .close, html[data-theme="dark"] .ticket-modal .close, html[data-theme="dark"] .admin-modal .close{ /* Dark-mode close buttons — low contrast, not bright white */ background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(148,163,184,0.06) !important; color: var(--text) !important; box-shadow: none !important; } html[data-theme="dark"] .lightbox .close:hover, html[data-theme="dark"] .ticket-modal .close:hover, html[data-theme="dark"] .admin-modal .close:hover{ background: rgba(255,255,255,0.06) !important; } html{ scroll-padding-top: 120px; /* adjust if needed */ } /* Make tiles full-card clickable (like choice cards) */ .tile.tile-click{ position:relative; } /* Full-card clickable overlay */ .tile-hit{ position:absolute; inset:0; z-index:1; border-radius:inherit; text-decoration:none; } /* Keep the real buttons clickable above the overlay */ .tile.tile-click .actions, .tile.tile-click .actions a{ position:relative; z-index:2; } /* Tile hover glow + slight lift (same feel as the homepage choice cards) */ .tile.tile-click{ transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } .tile.tile-click:hover{ transform: translateY(-1px); box-shadow: 0 18px 44px rgba(124,58,237,.12); border-color: rgba(124,58,237,.22); } /* Dark mode: stronger, deeper shadow and slightly brighter border */ html[data-theme="dark"] .tile.tile-click:hover{ box-shadow: 0 20px 60px rgba(0,0,0,.45); border-color: rgba(167,139,250,.32); } /* Optional: keyboard focus glow when tabbing to the overlay link */ .tile-hit:focus{ outline: 3px solid rgba(124,58,237,.18); outline-offset: 2px; border-radius: inherit; } html[data-theme="dark"] .tile-hit:focus{ outline: 3px solid rgba(167,139,250,.22); } /* ================================================== Example dashboard (mock) - FULL CSS (base + polish) ================================================== */ /* Layout grid inside the outer .card */ .dash-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; } /* Inner dashboard panels */ .dash-card{ border-radius:20px; padding:16px; background: rgba(255,255,255,.94); border:1px solid rgba(124,58,237,.10); box-shadow: var(--shadow); transition: transform 180ms ease, box-shadow 180ms ease; } .dash-card:hover{ transform: translateY(-2px); box-shadow: 0 18px 44px rgba(124,58,237,.18); } html[data-theme="dark"] .dash-card{ background: rgba(12,16,36,.78); border:1px solid rgba(167,139,250,.18); } html[data-theme="dark"] .dash-card:hover{ box-shadow: 0 22px 60px rgba(0,0,0,.45); } /* Titles + subtext */ .dash-title{ font-weight:900; margin-bottom:10px; letter-spacing:-.01em; } .dash-sub{ display:block; font-size:13px; color:var(--muted); margin-top:2px; font-weight:800; } /* ------------------------- Weather ------------------------- */ .dash-weather{ background: linear-gradient(135deg, rgba(96,165,250,.12), rgba(124,58,237,.06)); border-radius:16px; padding:14px; } .dash-weather-main{ display:flex; align-items:center; gap:14px; } .dash-weather-ico{ font-size:28px; opacity:.9; animation: floatCloud 4s ease-in-out infinite; } @keyframes floatCloud{ 0%{ transform: translateY(0); } 50%{ transform: translateY(-4px); } 100%{ transform: translateY(0); } } .dash-temp{ font-size:30px; font-weight:900; letter-spacing:-.02em; color:#2563eb; /* blue */ } html[data-theme="dark"] .dash-temp{ color:#93c5fd; /* lighter blue */ } .dash-forecast{ margin:12px 0 0; padding:0; list-style:none; } .dash-forecast li{ display:flex; justify-content:space-between; font-size:13px; color:var(--muted); padding:4px 0; } /* ------------------------- Home actions tiles ------------------------- */ .dash-actions{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; } .dash-tile{ width:100%; border-radius:16px; padding:12px; border:1px solid rgba(124,58,237,.12); background: rgba(124,58,237,.06); text-align:left; color:var(--text); cursor:pointer; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } html[data-theme="dark"] .dash-tile{ background: rgba(167,139,250,.10); border:1px solid rgba(167,139,250,.18); } .dash-tile:hover{ box-shadow: 0 18px 44px rgba(124,58,237,.10); border-color: rgba(124,58,237,.22); } /* Active (ON / ARMED / RUNNING) */ .dash-tile.active{ background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(16,185,129,.12)); border-color: rgba(34,197,94,.35); box-shadow: 0 10px 28px rgba(34,197,94,.25); } /* Alarm danger (DISARMED) */ .dash-tile.alarm-disarmed{ background: linear-gradient(135deg, rgba(239,68,68,.20), rgba(220,38,38,.14)); border-color: rgba(239,68,68,.45); box-shadow: 0 12px 30px rgba(239,68,68,.30); } .dash-tile.alarm-disarmed strong{ color:#7f1d1d; } html[data-theme="dark"] .dash-tile.alarm-disarmed strong{ color:#fecaca; } /* ------------------------- Home status layout ------------------------- */ .dash-status{ list-style:none; margin:0; padding:0; } .dash-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid rgba(124,58,237,.10); } html[data-theme="dark"] .dash-row{ border-top:1px solid rgba(167,139,250,.14); } .dash-row:first-child{ border-top:0; padding-top:0; } /* Status pill (e.g., Locked) */ .dash-pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:900; border:1px solid rgba(124,58,237,.14); background: rgba(124,58,237,.08); color:var(--text); } .dash-pill.on{ border-color: rgba(34,197,94,.30); background: linear-gradient(135deg, rgba(34,197,94,.25), rgba(16,185,129,.18)); color:#065f46; } /* ------------------------- Lists (bins etc.) ------------------------- */ .dash-list{ list-style:none; margin:0; padding:0; } .dash-list li{ display:flex; justify-content:space-between; padding:8px 0; font-size:14px; color:var(--text); } /* ------------------------- Battery bars (instead of dots) Requires .dash-battery HTML with .battery-bar/.battery-fill ------------------------- */ .dash-battery li{ display:flex; align-items:center; gap:10px; } .dash-battery .battery-bar{ flex:1; height:8px; border-radius:999px; background: rgba(148,163,184,.25); overflow:hidden; } .dash-battery .battery-fill{ height:100%; border-radius:999px; background: linear-gradient(90deg, #22c55e, #16a34a); transition: width 300ms ease; } .dash-battery .battery-fill.mid{ background: linear-gradient(90deg, #facc15, #eab308); } .dash-battery .battery-fill.low{ background: linear-gradient(90deg, #ef4444, #dc2626); } /* Dashboard note */ .dash-note{ margin-top:14px; color:var(--muted); font-size:13px; line-height:1.6; } /* Responsive */ @media (max-width: 960px){ .dash-grid{ grid-template-columns: 1fr; } } /* ========================= Dashboard switch (single source of truth) ========================= */ .dash-switch{ width:44px; height:24px; border-radius:999px; border:1px solid rgba(124,58,237,.20); background: rgba(148,163,184,.35); position:relative; cursor:pointer; padding:0; appearance:none; -webkit-appearance:none; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } html[data-theme="dark"] .dash-switch{ background: rgba(255,255,255,.10); } .dash-switch::after{ content:""; position:absolute; top:50%; left:3px; width:18px; height:18px; transform: translateY(-50%); border-radius:999px; background:#fff; box-shadow: 0 1px 3px rgba(0,0,0,.20); transition: left 160ms ease; } .dash-switch.on{ background: linear-gradient(135deg, #22c55e, #16a34a); border-color: rgba(34,197,94,.60); } .dash-switch.on::after{ left:23px; /* perfect: 44 - 3 - 18 = 23 */ } .dash-switch:hover{ box-shadow: 0 0 0 4px rgba(34,197,94,.20); } .dash-switch:focus-visible{ outline:none; box-shadow: 0 0 0 4px rgba(124,58,237,.22); } /* Bin collection polish */ .dash-bins li{ padding:10px 0; border-top:1px solid rgba(124,58,237,.10); } html[data-theme="dark"] .dash-bins li{ border-top:1px solid rgba(167,139,250,.14); } html[data-theme="dark"] .dash-bins li:first-child{ border-top:0; padding-top:0; } .dash-bins li:first-child{ border-top:0; padding-top:0; } .dash-bins .bin-left{ display:flex; align-items:center; gap:10px; min-width:0; } .dash-bins .bin-ico{ width:34px; height:34px; border-radius:14px; display:grid; place-items:center; font-size:16px; background: rgba(124,58,237,.08); border:1px solid rgba(124,58,237,.12); flex:0 0 auto; } html[data-theme="dark"] .dash-bins .bin-ico{ background: rgba(167,139,250,.10); border:1px solid rgba(167,139,250,.18); } .dash-bins .bin-title{ font-weight:900; } .dash-bins .bin-sub{ display:block; color:var(--muted); font-size:13px; font-weight:800; margin-top:2px; } .dash-bins .bin-date{ display:inline-flex; align-items:center; justify-content:center; min-height: 42px; /* ensures vertical centering feels right */ padding: 0 14px; /* vertical handled by min-height */ border-radius:999px; font-weight:900; font-size:13px; background: rgba(96,165,250,.12); border:1px solid rgba(96,165,250,.18); color: var(--text); white-space:nowrap; } /* Warning box under dashboard */ .dash-warning{ margin-top:14px; padding:12px 14px; border-radius:16px; border:1px solid rgba(245,158,11,.28); background: rgba(245,158,11,.10); color: var(--text); font-weight:800; line-height:1.6; } .dash-warning strong{ font-weight:900; } html[data-theme="dark"] .dash-warning{ border:1px solid rgba(245,158,11,.22); background: rgba(245,158,11,.14); } /* Lights list - full row clickable with icon bubble */ .dash-lights{ list-style:none; margin:0; padding:0; } .dash-lights li + li{ border-top:1px solid rgba(124,58,237,.10); margin-top:10px; padding-top:10px; } html[data-theme="dark"] .dash-lights li + li{ border-top:1px solid rgba(167,139,250,.14); } .dash-light-row{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 8px; border-radius:16px; border:1px solid rgba(124,58,237,.10); background: rgba(124,58,237,.04); cursor:pointer; text-align:left; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } html[data-theme="dark"] .dash-light-row{ border:1px solid rgba(167,139,250,.16); background: rgba(167,139,250,.08); } .dash-light-row:hover{ transform: translateY(-1px); box-shadow: 0 18px 44px rgba(124,58,237,.10); border-color: rgba(124,58,237,.22); } html[data-theme="dark"] .dash-light-row:hover{ box-shadow: 0 20px 60px rgba(0,0,0,.35); border-color: rgba(167,139,250,.28); } .dash-light-ico{ width:36px; height:36px; border-radius:16px; display:grid; place-items:center; flex:0 0 auto; font-size:16px; background: rgba(255,255,255,.70); border:1px solid rgba(124,58,237,.12); } html[data-theme="dark"] .dash-light-ico{ background: rgba(12,16,36,.55); border:1px solid rgba(167,139,250,.18); } .dash-light-txt{ min-width:0; flex:1 1 auto; } .dash-light-txt strong{ display:block; } /* Lights ON/OFF state styling */ .dash-light-pill{ margin-left:auto; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:900; border:1px solid rgba(124,58,237,.14); background: rgba(124,58,237,.08); color:var(--text); white-space:nowrap; } /* ON: bubble + pill go “lit” */ .dash-light-row.is-on .dash-light-ico{ background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.28); box-shadow: 0 10px 24px rgba(34,197,94,.18); } .dash-light-row.is-on .dash-light-pill{ border-color: rgba(34,197,94,.30); background: rgba(34,197,94,.14); color:#065f46; } /* ================================================== Fake macOS browser (tabs + URL bar) - REPLACES old .mac-* block ================================================== */ .mac-frame{ border-radius: 22px; overflow: hidden; border: 1px solid rgba(124,58,237,.14); box-shadow: var(--shadow); background: rgba(255,255,255,.92); } html[data-theme="dark"] .mac-frame{ background: rgba(12,16,36,.78); border: 1px solid rgba(167,139,250,.18); box-shadow: var(--shadow); } /* -------- Tabs row -------- */ .mac-top{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom: 1px solid rgba(124,58,237,.10); background: linear-gradient(180deg, rgba(248,250,255,.94), rgba(238,242,255,.88)); } html[data-theme="dark"] .mac-top{ border-bottom: 1px solid rgba(167,139,250,.14); background: linear-gradient(180deg, rgba(10,14,32,.90), rgba(7,9,20,.82)); } .mac-dots{ display:inline-flex; gap:8px; align-items:center; flex:0 0 auto; margin-right:6px; } .mac-dot{ width:12px; height:12px; border-radius:999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); } .mac-dot.red{ background:#ff5f57; } .mac-dot.yellow{ background:#febc2e; } .mac-dot.green{ background:#28c840; } /* Tabs */ .mac-tab{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:14px; border:1px solid rgba(124,58,237,.10); background: rgba(124,58,237,.04); color: var(--text); min-width: 220px; max-width: 320px; } html[data-theme="dark"] .mac-tab{ border:1px solid rgba(167,139,250,.16); background: rgba(167,139,250,.08); } /* Active tab */ .mac-tab.is-active{ background:#fff; border-color: rgba(124,58,237,.16); box-shadow: 0 10px 26px rgba(124,58,237,.10); } html[data-theme="dark"] .mac-tab.is-active{ background: rgba(12,16,36,.92); border-color: rgba(167,139,250,.18); box-shadow: 0 14px 40px rgba(0,0,0,.35); } .mac-fav{ width:22px; height:22px; border-radius:8px; display:grid; place-items:center; font-size:11px; font-weight:900; border:1px solid rgba(124,58,237,.16); background: rgba(124,58,237,.10); flex:0 0 auto; } .mac-title{ font-weight:900; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 1 auto; color: var(--text); opacity:.9; } .mac-x{ font-weight:900; opacity:.55; flex:0 0 auto; } .mac-plus{ margin-left:auto; width:30px; height:30px; border-radius:12px; display:grid; place-items:center; border:1px solid rgba(124,58,237,.10); background: rgba(124,58,237,.04); font-weight:900; color: var(--text); } /* -------- Address bar row -------- */ .mac-bar{ display:flex; align-items:center; gap:12px; padding:10px 12px; background: rgba(255,255,255,.88); border-bottom: 1px solid rgba(124,58,237,.10); } html[data-theme="dark"] .mac-bar{ background: rgba(12,16,36,.78); border-bottom: 1px solid rgba(167,139,250,.14); } .mac-nav{ display:flex; gap:8px; } .mac-btn{ width:30px; height:30px; border-radius:12px; display:grid; place-items:center; border:1px solid rgba(124,58,237,.10); background: rgba(124,58,237,.04); color: var(--text); font-weight:900; opacity:.9; } .mac-url{ flex:1 1 auto; display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px; border:1px solid rgba(124,58,237,.12); background: rgba(238,242,255,.70); min-width: 0; } html[data-theme="dark"] .mac-url{ background: rgba(18,24,48,.55); border:1px solid rgba(167,139,250,.18); } .mac-lock{ opacity:.8; } .mac-urltext{ font-size:13px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: var(--text); opacity:.85; } .mac-actions{ display:flex; gap:8px; } .mac-ico{ width:30px; height:30px; border-radius:12px; display:grid; place-items:center; border:1px solid rgba(124,58,237,.10); background: rgba(124,58,237,.04); color: var(--text); font-weight:900; opacity:.9; } /* -------- Content area -------- */ .mac-body{ padding:0; background: radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,.08), transparent 60%), radial-gradient(1000px 600px at 90% 0%, rgba(236,72,153,.08), transparent 55%), linear-gradient(180deg, rgba(246,243,255,.92), rgba(251,251,253,.92)); } html[data-theme="dark"] .mac-body{ background: radial-gradient(1200px 600px at 10% -10%, rgba(167,139,250,.18), transparent 60%), radial-gradient(1000px 600px at 90% 0%, rgba(251,113,133,.12), transparent 55%), linear-gradient(180deg, rgba(10,14,32,.78), rgba(7,9,20,.78)); } /* padding inside the frame */ .dash-pad{ padding:18px; } /* Responsive: hide extra tab on narrow screens */ @media (max-width: 720px){ .mac-tab:not(.is-active){ display:none; } /* only keep active tab */ .mac-urltext{ font-size:12px; } } /* ================================================== Fake macOS browser (tabs + URL bar) - matches .browser-* HTML ================================================== */ .browser-frame{ border-radius: 22px; overflow: hidden; border: 1px solid rgba(124,58,237,.14); box-shadow: var(--shadow); background: rgba(255,255,255,.92); } html[data-theme="dark"] .browser-frame{ background: rgba(12,16,36,.78); border: 1px solid rgba(167,139,250,.18); } /* Tabs row */ .browser-tabs{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom: 1px solid rgba(124,58,237,.10); background: linear-gradient(180deg, rgba(248,250,255,.94), rgba(238,242,255,.88)); } html[data-theme="dark"] .browser-tabs{ border-bottom: 1px solid rgba(167,139,250,.14); background: linear-gradient(180deg, rgba(10,14,32,.90), rgba(7,9,20,.82)); } .browser-dots{ display:inline-flex; gap:8px; align-items:center; flex:0 0 auto; margin-right:6px; } .browser-dot{ width:12px; height:12px; border-radius:999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); } .browser-dot.red{ background:#ff5f57; } .browser-dot.yellow{ background:#febc2e; } .browser-dot.green{ background:#28c840; } /* Tabs */ .browser-tab{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:14px; border:1px solid rgba(124,58,237,.10); background: rgba(124,58,237,.04); color: var(--text); min-width: 220px; max-width: 320px; } html[data-theme="dark"] .browser-tab{ border:1px solid rgba(167,139,250,.16); background: rgba(167,139,250,.08); } /* Active tab */ .browser-tab.active{ background:#fff; border-color: rgba(124,58,237,.16); box-shadow: 0 10px 26px rgba(124,58,237,.10); } html[data-theme="dark"] .browser-tab.active{ background: rgba(12,16,36,.92); border-color: rgba(167,139,250,.18); box-shadow: 0 14px 40px rgba(0,0,0,.35); } .browser-fav{ width:22px; height:22px; border-radius:8px; display:grid; place-items:center; font-size:11px; font-weight:900; border:1px solid rgba(124,58,237,.16); background: rgba(124,58,237,.10); flex:0 0 auto; } .browser-tabtext{ font-weight:900; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 1 auto; color: var(--text); opacity:.9; } .browser-x{ font-weight:900; opacity:.55; flex:0 0 auto; } .browser-plus{ margin-left:auto; width:30px; height:30px; border-radius:12px; display:grid; place-items:center; border:1px solid rgba(124,58,237,.10); background: rgba(124,58,237,.04); font-weight:900; color: var(--text); } /* Address bar row */ .browser-bar{ display:flex; align-items:center; gap:12px; padding:10px 12px; background: rgba(255,255,255,.88); border-bottom: 1px solid rgba(124,58,237,.10); } html[data-theme="dark"] .browser-bar{ background: rgba(12,16,36,.78); border-bottom: 1px solid rgba(167,139,250,.14); } .browser-nav{ display:flex; gap:8px; } .browser-btn{ width:30px; height:30px; border-radius:12px; display:grid; place-items:center; border:1px solid rgba(124,58,237,.10); background: rgba(124,58,237,.04); color: var(--text); font-weight:900; opacity:.9; } .browser-url{ flex:1 1 auto; display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px; border:1px solid rgba(124,58,237,.12); background: rgba(238,242,255,.70); min-width: 0; } html[data-theme="dark"] .browser-url{ background: rgba(18,24,48,.55); border:1px solid rgba(167,139,250,.18); } .browser-lock{ opacity:.8; } .browser-urltext{ font-size:13px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: var(--text); opacity:.85; } .browser-actions{ display:flex; gap:8px; } .browser-ico{ width:30px; height:30px; border-radius:12px; display:grid; place-items:center; border:1px solid rgba(124,58,237,.10); background: rgba(124,58,237,.04); color: var(--text); font-weight:900; opacity:.9; } /* Content area */ .browser-body{ padding:0; background: radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,.08), transparent 60%), radial-gradient(1000px 600px at 90% 0%, rgba(236,72,153,.08), transparent 55%), linear-gradient(180deg, rgba(246,243,255,.92), rgba(251,251,253,.92)); } html[data-theme="dark"] .browser-body{ background: radial-gradient(1200px 600px at 10% -10%, rgba(167,139,250,.18), transparent 60%), radial-gradient(1000px 600px at 90% 0%, rgba(251,113,133,.12), transparent 55%), linear-gradient(180deg, rgba(10,14,32,.78), rgba(7,9,20,.78)); } /* padding inside the frame */ .dash-pad{ padding:18px; } /* ================================================== Browser frame - mobile formatting (clean + logical) ================================================== */ @media (max-width: 720px){ /* Tabs row: keep dots, active tab, plus all on one line */ .browser-tabs{ padding: 10px 10px; gap: 10px; flex-wrap: nowrap; align-items: center; } /* Hide any non-active tabs completely */ .browser-tab{ display:none; } /* Active tab grows */ .browser-tab.active{ display:flex; flex: 1 1 auto; min-width: 0; max-width: 100%; } /* Plus sits right next to active tab (not below) */ .browser-plus{ margin-left: 0; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 14px; } /* Keep title from pushing layout */ .browser-tabtext{ max-width: 100%; } /* Address row: single clean URL + actions */ .browser-bar{ display:grid; grid-template-columns: 1fr auto; grid-template-areas: "url url" "actions actions"; gap: 10px; } /* Kill nav arrows on mobile */ .browser-nav{ display:none; } .browser-url{ grid-area: url; padding: 10px 12px; } .browser-actions{ grid-area: actions; justify-content:flex-end; } /* Make buttons slightly larger for thumb */ .browser-ico{ width: 34px; height: 34px; border-radius: 14px; } /* Less padding inside the preview */ .dash-pad{ padding: 14px; } } @media (max-width: 420px){ .browser-lock{ display:none; } .browser-urltext{ font-size: 12px; } .dash-pad{ padding: 12px; } } /* ================================================== Dashboard - dark mode contrast fixes (PATCH) ================================================== */ /* 1) Locked pill unreadable in dark mode */ html[data-theme="dark"] .dash-pill.on{ color:#d1fae5 !important; /* readable green */ background: linear-gradient(135deg, rgba(34,197,94,.22), rgba(16,185,129,.14)) !important; border-color: rgba(34,197,94,.35) !important; } /* 2) Home action tiles: ensure text is NEVER dark in dark mode */ html[data-theme="dark"] .dash-tile, html[data-theme="dark"] .dash-tile strong, html[data-theme="dark"] .dash-tile .dash-sub{ color: var(--text) !important; } /* Inactive tiles: subtle neutral */ html[data-theme="dark"] .dash-tile{ background: rgba(167,139,250,.10) !important; border-color: rgba(167,139,250,.18) !important; } /* Active tiles (On / Cleaning / Armed): green accent + readable text */ html[data-theme="dark"] .dash-tile.active{ background: linear-gradient(135deg, rgba(34,197,94,.22), rgba(16,185,129,.14)) !important; border-color: rgba(34,197,94,.35) !important; box-shadow: 0 12px 30px rgba(34,197,94,.18) !important; } html[data-theme="dark"] .dash-tile.active strong{ color:#d1fae5 !important; } html[data-theme="dark"] .dash-tile.active .dash-sub{ color: rgba(209,250,229,.82) !important; } /* Alarm disarmed stays red + readable */ html[data-theme="dark"] .dash-tile.alarm-disarmed{ background: linear-gradient(135deg, rgba(239,68,68,.24), rgba(220,38,38,.16)) !important; border-color: rgba(239,68,68,.40) !important; box-shadow: 0 12px 30px rgba(239,68,68,.20) !important; } html[data-theme="dark"] .dash-tile.alarm-disarmed strong{ color:#fecaca !important; } html[data-theme="dark"] .dash-tile.alarm-disarmed .dash-sub{ color: rgba(254,202,202,.85) !important; } /* 3) Switches: improve contrast in dark mode */ html[data-theme="dark"] .dash-switch{ border-color: rgba(167,139,250,.22) !important; background: rgba(238,242,255,.08) !important; } html[data-theme="dark"] .dash-switch::after{ background: rgba(255,255,255,.92) !important; } html[data-theme="dark"] .dash-switch.on{ background: linear-gradient(135deg, #22c55e, #16a34a) !important; border-color: rgba(34,197,94,.55) !important; } /* 4) Lights (bottom-right card): make state obvious + text readable */ html[data-theme="dark"] .dash-light-row{ border-color: rgba(167,139,250,.18) !important; background: rgba(167,139,250,.08) !important; color: var(--text) !important; } html[data-theme="dark"] .dash-light-row .dash-sub{ color: var(--muted) !important; } /* On: green highlight */ html[data-theme="dark"] .dash-light-row.is-on{ border-color: rgba(34,197,94,.35) !important; background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(16,185,129,.10)) !important; } html[data-theme="dark"] .dash-light-row.is-on .dash-sub{ color: rgba(209,250,229,.82) !important; } /* Icon bubble: readable both states */ html[data-theme="dark"] .dash-light-ico{ background: rgba(12,16,36,.65) !important; border-color: rgba(167,139,250,.22) !important; } html[data-theme="dark"] .dash-light-row.is-on .dash-light-ico{ background: rgba(34,197,94,.18) !important; border-color: rgba(34,197,94,.30) !important; } /* Pill text: readable */ html[data-theme="dark"] .dash-light-pill{ border-color: rgba(167,139,250,.22) !important; background: rgba(18,24,48,.70) !important; color: rgba(238,242,255,.90) !important; } html[data-theme="dark"] .dash-light-row.is-on .dash-light-pill{ border-color: rgba(34,197,94,.35) !important; background: rgba(34,197,94,.16) !important; color:#d1fae5 !important; } /* Optional: make OFF bulb clearly OFF in dark mode */ html[data-theme="dark"] .dash-light-row:not(.is-on) .dash-light-ico{ opacity:.55; filter: grayscale(1); }