/*
* Tyreon Design System v2 — Modern Portal CSS
* Auto-detected dark/light, Arabic RTL-first
* Responsive: Mobile-first (360px+), Tablet (768px+), Desktop (1024px+)
*/
/* ── FONTS ──
Nothing is imported here any more. Tyreon speaks in ONE typeface —
IBM Plex Sans Arabic (owner's decision, 2026-07-28) — loaded once as a
in header.php.
What was here: an @import for Cairo, used by the portals while the public
pages used IBM Plex. Two problems in one line. The product spoke in two
different voices depending on whether you were signed in; and @import is the
slowest way to load a font — the browser has to download and parse this
stylesheet before it can even discover the font request, so the portals
rendered in the system face and then reflowed once Cairo arrived. That flash
is a real part of why the portals felt cheap. */
/* ── TOKENS ── */
:root {
/* ──────────────────────────────────────────────────────────────────────
ALIASES (ADR-027). These names stay — 273 rules plus a lot of inline
styles use them — but they no longer hold values of their own. Each one
resolves to the canonical token declared in style.css.
Why aliases rather than find-and-replace: this is additive. Not one
selector, rule or markup attribute changes, nothing has to migrate in
lockstep, and every existing use inherits dark mode the moment it points
at a token that has one. The names can be retired per surface later,
once usage has drained — the same additive-first rule the plugins follow.
Before this the two families disagreed on SIX of seven concepts: two
brand blues, two borders, two reds, two greens, two ambers, two body
texts. That is why the platform had no single colour to reposition.
────────────────────────────────────────────────────────────────────── */
--pri: var(--c-pri);
--pri-h: var(--c-pri-d);
--pri-l: var(--c-pri-l);
--pri-m: #3B6EEA; /* mid tint — no counterpart, kept */
--sec: #0EA5E9; /* secondary accent — no counterpart, kept */
--suc: var(--c-grn);
--suc-l: var(--c-grn-l);
--war: var(--c-amb);
--war-l: var(--c-amb-l);
--dan: var(--c-red);
--dan-l: var(--c-red-l);
--inf: #0891B2; /* info — no counterpart, kept */
--bg: var(--c-bg);
--bg2: var(--c-sur);
--sur: var(--c-sur);
--sur2: var(--c-sur2);
--bor: var(--c-bor);
--bor2: var(--c-sur3);
--txt: var(--c-txt);
--txt2: var(--c-txt2);
/* S0-3b: #64748B ≈ 4.6:1 on white (the original #94A3B8 was ~2.8:1 and
failed AA). --c-txt3 carries that corrected value and, unlike this name,
already had a dark counterpart. */
--muted: var(--c-txt3);
--sb-bg: #0F1E3C;
--sb-bdr: rgba(255,255,255,.06);
--sb-txt: #94A3B8;
/* #90: the sidebar's own foreground for text that must READ, not recede.
--sb-txt is a muted 3.9:1 on --sb-bg — right for a secondary role badge,
wrong for the name. Named here because the sidebar is dark in both page
themes, so anything reaching for a page-level colour gets it wrong in one
of them. */
--sb-txt-strong: #F1F5F9;
--sb-act: rgba(27,79,216,.9);
--sb-hov: rgba(255,255,255,.06);
--sb-sec: #1E3055;
--rad-s: 4px;
--rad: 8px;
--rad-l: 12px;
--rad-xl: 16px;
--shd-s: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
--shd: 0 4px 16px rgba(0,0,0,.08);
--shd-l: 0 8px 32px rgba(0,0,0,.12);
--tr: .18s ease;
--sb-w: 240px;
--top-h: 56px;
}
/* ──────────────────────────────────────────────────────────────────────────
DARK MODE — there is deliberately no block here.
──────────────────────────────────────────────────────────────────────────
Dark mode is a shipped feature: header.php stamps data-tyreon-theme on
and theme.js toggles it. But style.css's dark block only ever
covered the OTHER token family (--c-*), so of the 40 tokens this file used
to declare, exactly ONE had a dark value. The other 39 kept their light
values on a #0d1117 page — --bg #F0F4FF and --bor #E2E8F0 (152 uses)
rendering near-white on black.
The first fix was to list 13 dark overrides here. Aliasing removed the need
for any of them: a token that resolves to a canonical one inherits that
token's dark value automatically. Adding overrides back would reintroduce a
second source of truth for the same colour — the exact habit that produced
two disagreeing families in the first place.
What remains local to this file is only --pri-m/--sec/--inf (brand accents,
constant across modes, as the canonical hues are), the --sb-* sidebar
palette (dark by design in both modes), and the non-colour tokens.
────────────────────────────────────────────────────────────────────────── */
/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
body.tyreon-portal-page {
/* The same --fnt every other surface uses, so a portal and a public page are
recognisably the same product. */
font-family: var(--fnt);
font-size: 14px;
line-height: 1.65;
color: var(--txt);
background: var(--bg);
-webkit-font-smoothing: antialiased;
}
/* ── LAYOUT ── */
.portal-layout {
display: flex;
min-height: 100vh;
}
.portal-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
/* ── SIDEBAR ── */
/* #90: the sidebar sticks BELOW the site header, not over it.
*
* Measured: .site-header is `position: sticky; top: 0; z-index: 100` and this
* was `position: sticky; top: 0; z-index: 200`. Both pin to the same viewport
* line, and the sidebar had double the stacking, so as soon as the page scrolled
* the sidebar rode over the header — its first child being the user card, which
* is exactly what the owner's screenshot showed sitting on top of the header
* with the search behind it.
*
* top/height offset by the header so the sidebar occupies the space that is
* actually left, and z-index below the header's 100 so the header wins if they
* ever meet again. The mobile rule (max-width:1023px) still makes this a fixed
* full-height drawer at z-index 200 — over everything is correct THERE, because
* it is a drawer with an overlay and a way to close it. */
.portal-sidebar {
width: var(--sb-w);
background: var(--sb-bg);
display: flex;
flex-direction: column;
position: sticky;
top: var(--header-h, 60px);
height: calc(100vh - var(--header-h, 60px));
min-height: calc(100vh - var(--header-h, 60px));
overflow-y: auto;
flex-shrink: 0;
transition: transform var(--tr), width var(--tr);
z-index: 90;
scrollbar-width: none;
}
.portal-sidebar::-webkit-scrollbar { display: none; }
.sidebar-brand {
padding: 0 16px;
height: var(--top-h);
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid var(--sb-bdr);
flex-shrink: 0;
}
.sidebar-brand-logo {
width: 32px; height: 32px;
background: var(--pri);
border-radius: var(--rad);
display: flex; align-items: center; justify-content: center;
font-size: 17px; flex-shrink: 0;
}
.sidebar-brand-name {
font-size: 15px; font-weight: 800;
color: #fff; letter-spacing: -.3px;
}
.sidebar-brand-sub {
font-size: 10px; color: var(--sb-txt);
margin-top: -3px;
}
.sidebar-user {
padding: 14px 16px;
border-bottom: 1px solid var(--sb-bdr);
display: flex; align-items: center; gap: 10px;
}
.sidebar-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: var(--pri);
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #fff; }
.sidebar-user-role {
font-size: 11px; color: var(--sb-txt);
background: var(--sb-sec);
padding: 1px 6px; border-radius: 10px; display: inline-block; margin-top: 2px;
}
.sidebar-nav { flex: 1; padding: 8px 0; overflow-y: auto; scrollbar-width: none; }
.sidebar-section {
font-size: 9px; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: #3D5A8A;
padding: 14px 16px 4px;
}
.portal-sidebar a {
display: flex; align-items: center; gap: 10px;
padding: 9px 16px;
color: var(--sb-txt); text-decoration: none;
font-size: 13px; font-weight: 500;
border-right: 3px solid transparent;
transition: background var(--tr), color var(--tr), border-color var(--tr);
position: relative;
}
.portal-sidebar a:hover {
background: var(--sb-hov); color: #fff;
}
.portal-sidebar a.active {
background: var(--sb-act); color: #fff;
border-right-color: var(--pri-m);
font-weight: 600;
}
.portal-sidebar a .icon {
font-size: 16px; width: 20px; text-align: center; flex-shrink: 0;
}
.portal-sidebar a .badge-count {
margin-right: auto;
background: var(--dan); color: #fff;
font-size: 9px; font-weight: 700; padding: 1px 5px;
border-radius: 10px; min-width: 16px; text-align: center;
}
/* ── TOPBAR ── */
.portal-topbar {
height: var(--top-h);
background: var(--sur);
border-bottom: 1px solid var(--bor);
display: flex; align-items: center;
padding: 0 20px; gap: 12px;
position: sticky; top: 0; z-index: 100;
}
.topbar-toggle {
background: none; border: none; cursor: pointer;
font-size: 18px; color: var(--txt2); padding: 6px;
border-radius: var(--rad); transition: background var(--tr);
display: none;
}
.topbar-title { font-size: 15px; font-weight: 700; color: var(--txt); }
.topbar-spacer { flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.topbar-chip {
display: flex; align-items: center; gap: 8px;
padding: 5px 10px; border-radius: var(--rad-l);
cursor: pointer; transition: background var(--tr);
}
.topbar-chip:hover { background: var(--sur2); }
.topbar-chip-avatar {
width: 30px; height: 30px; border-radius: 50%;
background: var(--pri); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.topbar-chip-name { font-size: 12px; font-weight: 600; }
.topbar-chip-role { font-size: 10px; color: var(--muted); }
.topbar-icon-btn {
position: relative;
background: none; border: none; cursor: pointer;
width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 17px; color: var(--txt2);
transition: background var(--tr);
}
.topbar-icon-btn:hover { background: var(--sur2); }
.topbar-icon-btn .dot {
position: absolute; top: 5px; right: 5px;
width: 7px; height: 7px; border-radius: 50%;
background: var(--dan); border: 2px solid var(--sur);
}
/* ── PAGE BODY ── */
.portal-content { padding: 20px; flex: 1; }
/* ── WELCOME BANNER (Dashboard) ── */
.welcome-banner {
background: linear-gradient(135deg, var(--pri) 0%, var(--pri-m) 50%, var(--sec) 100%);
border-radius: var(--rad-xl);
padding: 24px 28px;
color: #fff;
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
.welcome-banner::after {
content: '';
position: absolute;
top: -40px; left: -40px;
width: 180px; height: 180px;
background: rgba(255,255,255,.06);
border-radius: 50%;
}
.welcome-banner h2 { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.welcome-banner p { font-size: 13px; opacity: .85; }
/* ── KPI CARDS ── */
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px; margin-bottom: 20px;
}
.kpi-card {
background: var(--sur); border: 1px solid var(--bor);
border-radius: var(--rad-l); padding: 16px;
display: flex; flex-direction: column; gap: 6px;
box-shadow: var(--shd-s);
transition: transform var(--tr), box-shadow var(--tr);
animation: fadeUp .3s ease both;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shd); }
.kpi-card .kpi-icon {
width: 40px; height: 40px; border-radius: var(--rad);
display: flex; align-items: center; justify-content: center;
font-size: 20px; margin-bottom: 4px;
}
.kpi-card .kpi-val {
font-size: 28px; font-weight: 800; line-height: 1; color: var(--txt);
}
.kpi-card .kpi-lbl {
font-size: 12px; color: var(--muted); font-weight: 500;
}
.kpi-card.blue .kpi-icon { background: #EEF3FF; color: var(--pri); }
.kpi-card.green .kpi-icon { background: var(--suc-l); color: var(--suc); }
.kpi-card.amber .kpi-icon { background: var(--war-l); color: var(--war); }
.kpi-card.red .kpi-icon { background: var(--dan-l); color: var(--dan); }
.kpi-card.cyan .kpi-icon { background: #E0F7FF; color: var(--inf); }
/* ── QUICK ACTIONS ── */
.quick-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px; margin-bottom: 20px;
}
.qa-card {
background: var(--sur); border: 2px solid var(--bor);
border-radius: var(--rad-l); padding: 18px 14px;
text-align: center; text-decoration: none; color: inherit;
display: flex; flex-direction: column; align-items: center; gap: 8px;
transition: border-color var(--tr), background var(--tr), transform var(--tr), box-shadow var(--tr);
cursor: pointer;
}
.qa-card:hover {
border-color: var(--pri); background: var(--pri-l);
transform: translateY(-3px); box-shadow: var(--shd);
}
.qa-card .qa-icon {
width: 48px; height: 48px; border-radius: var(--rad-l);
display: flex; align-items: center; justify-content: center;
font-size: 24px;
background: var(--pri-l); color: var(--pri);
}
.qa-card h4 { font-size: 12px; font-weight: 600; }
.qa-card p { font-size: 11px; color: var(--muted); }
.qa-card.primary-action { border-color: var(--pri); background: var(--pri-l); }
.qa-card.primary-action .qa-icon { background: var(--pri); color: #fff; }
/* ── CARDS ── */
.tyreon-card {
background: var(--sur); border: 1px solid var(--bor);
border-radius: var(--rad-l); padding: 16px;
box-shadow: var(--shd-s);
}
.card-hdr {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
}
.card-hdr h3 { font-size: 14px; font-weight: 700; }
.card-hdr .card-hdr-action { font-size: 12px; color: var(--pri); text-decoration: none; }
/* ── TABLES ── */
.table-wrap { overflow-x: auto; border-radius: var(--rad); }
.tyreon-table {
width: 100%; border-collapse: collapse; font-size: 13px;
}
.tyreon-table th {
text-align: right; padding: 10px 12px;
font-size: 10px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--muted);
border-bottom: 2px solid var(--bor); background: var(--sur2);
white-space: nowrap;
}
.tyreon-table td {
padding: 11px 12px; border-bottom: 1px solid var(--bor);
vertical-align: middle;
}
.tyreon-table tr:last-child td { border-bottom: none; }
.tyreon-table tr:hover td { background: var(--pri-l); }
/* ── BUTTONS ── */
.tyreon-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px; font-size: 13px; font-weight: 600;
border-radius: var(--rad); border: 1.5px solid transparent;
cursor: pointer; font-family: inherit;
transition: all var(--tr); text-decoration: none;
white-space: nowrap; line-height: 1.4; vertical-align: middle;
}
.tyreon-btn.primary { background:var(--pri); color:#fff; border-color:var(--pri); }
.tyreon-btn.primary:hover { background:var(--pri-h); border-color:var(--pri-h); }
.tyreon-btn.ghost { background:transparent; color:var(--txt2); border-color:var(--bor); }
.tyreon-btn.ghost:hover { background:var(--sur2); color:var(--txt); }
.tyreon-btn.danger { background:var(--dan-l); color:var(--dan); border-color:#FECACA; }
.tyreon-btn.danger:hover { background:var(--dan); color:#fff; }
.tyreon-btn.success { background:var(--suc-l); color:var(--suc); border-color:#A7F3D0; }
.tyreon-btn.info { background:#E0F7FF; color:var(--inf); border-color:#BAE6FD; }
.tyreon-btn.sm { padding: 5px 12px; font-size: 12px; }
.tyreon-btn.xs { padding: 3px 8px; font-size: 11px; border-radius: var(--rad-s); }
.tyreon-btn:disabled { opacity:.5; cursor:not-allowed; }
/* ── BADGES ── */
.badge {
display: inline-flex; align-items: center;
padding: 2px 9px; border-radius: 20px;
font-size: 11px; font-weight: 600; white-space: nowrap;
}
.badge-blue { background:#EEF3FF; color:#1D4ED8; }
.badge-green { background:var(--suc-l); color:#065F46; }
.badge-red { background:var(--dan-l); color:#991B1B; }
.badge-orange { background:var(--war-l); color:#92400E; }
.badge-gray { background:var(--sur2); color:var(--txt2); }
.badge-purple { background:#F5F3FF; color:#5B21B6; }
.badge-cyan { background:#E0F7FF; color:#0E7490; }
/* ── FORMS ── */
.tyreon-input, select.tyreon-input, textarea.tyreon-input {
width: 100%; padding: 9px 12px;
border: 1.5px solid var(--bor);
border-radius: var(--rad); font-size: 13px;
font-family: inherit; background: var(--sur); color: var(--txt);
transition: border-color var(--tr), box-shadow var(--tr);
}
.tyreon-input:focus {
outline: none; border-color: var(--pri);
box-shadow: 0 0 0 3px rgba(27,79,216,.12);
}
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 12px; font-weight: 600; color: var(--txt2); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
/* ── PAGE HEADER ── */
.portal-page-hdr {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 18px; gap: 12px; flex-wrap: wrap;
}
.portal-page-hdr h2 { font-size: 18px; font-weight: 800; color: var(--txt); }
.portal-page-hdr p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.portal-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* ── FILTER BAR ── */
.filter-bar {
display: flex; gap: 8px; align-items: center;
margin-bottom: 14px; flex-wrap: wrap;
padding: 12px 14px;
background: var(--sur); border: 1px solid var(--bor);
border-radius: var(--rad-l);
}
.filter-bar select, .filter-bar input {
padding: 7px 10px; border: 1.5px solid var(--bor);
border-radius: var(--rad); font-size: 12px; font-family: inherit;
background: var(--bg); color: var(--txt); min-width: 130px;
}
.filter-bar select:focus, .filter-bar input:focus {
outline: none; border-color: var(--pri);
}
/* ── GRID LAYOUTS ── */
.tyreon-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.tyreon-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.tyreon-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
/* ── UTILITIES ── */
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }
.text-muted { color: var(--muted); }
.text-pri { color: var(--pri); }
.text-suc { color: var(--suc); }
.text-dan { color: var(--dan); }
.fw-7 { font-weight: 700; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.gap-2 { gap: 8px; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
/* ── LOADING ── */
.tyreon-loading {
display: flex; align-items: center; justify-content: center; padding: 32px;
}
.tyreon-loading::after {
content: '';
width: 26px; height: 26px;
border: 3px solid var(--bor); border-top-color: var(--pri);
border-radius: 50%;
animation: tyreonSpin .7s linear infinite;
}
@keyframes tyreonSpin { to { transform: rotate(360deg); } }
/* ── EMPTY STATE ── */
.empty-state {
text-align: center; padding: 48px 24px; color: var(--muted);
}
.empty-state .icon { font-size: 52px; margin-bottom: 12px; }
.empty-state h3 { font-size: 16px; font-weight: 700; color: var(--txt2); margin-bottom: 6px; }
.empty-state p { font-size: 13px; margin-bottom: 16px; }
.table-empty { text-align: center; padding: 32px; color: var(--muted); font-size: 13px; }
/* ── STORE CARDS ── */
.store-card {
background: var(--sur); border: 1px solid var(--bor);
border-radius: var(--rad-l); padding: 16px;
box-shadow: var(--shd-s);
transition: box-shadow var(--tr), border-color var(--tr);
display: flex; flex-direction: column; gap: 8px;
}
.store-card:hover { box-shadow: var(--shd); border-color: var(--bor2); }
.store-card-hdr { display: flex; justify-content: space-between; align-items: flex-start; }
.store-card-name { font-weight: 700; font-size: 14px; }
.store-card-rating { font-size: 12px; margin: 2px 0; letter-spacing: 1px; }
.store-card-meta { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.store-card-meta span::before { margin-left: 4px; }
.store-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
/* ── MODALS ── */
.tyreon-modal-bg {
position: fixed; inset: 0;
background: rgba(0,0,0,.5); backdrop-filter: blur(2px);
z-index: 998;
}
.tyreon-modal-box {
position: fixed; z-index: 999;
top: 50%; left: 50%; transform: translate(-50%,-50%);
background: var(--sur); border-radius: var(--rad-xl);
width: min(560px, calc(100vw - 32px));
max-height: calc(100vh - 40px); overflow-y: auto;
box-shadow: var(--shd-l);
animation: modalIn .2s ease;
}
@keyframes modalIn {
from { opacity:0; transform: translate(-50%,-48%); }
to { opacity:1; transform: translate(-50%,-50%); }
}
.modal-hdr {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; border-bottom: 1px solid var(--bor);
position: sticky; top: 0; background: var(--sur); z-index: 1;
border-radius: var(--rad-xl) var(--rad-xl) 0 0;
}
.modal-hdr h3 { font-size: 15px; font-weight: 700; }
.modal-close {
background: none; border: none; cursor: pointer; font-size: 18px;
color: var(--muted); padding: 4px; border-radius: var(--rad); line-height: 1;
transition: color var(--tr);
}
.modal-close:hover { color: var(--dan); }
.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
/* ── ALERTS / TOASTS ── */
.tyreon-alert {
border-radius: var(--rad);
padding: 12px 14px; font-size: 13px; font-weight: 500;
display: flex; align-items: flex-start; gap: 8px;
border: 1px solid;
}
.tyreon-alert.info { background:#E0F7FF; border-color:#BAE6FD; color:#0E7490; }
.tyreon-alert.success { background:var(--suc-l); border-color:#A7F3D0; color:#065F46; }
.tyreon-alert.warning { background:var(--war-l); border-color:#FDE68A; color:#92400E; }
.tyreon-alert.danger { background:var(--dan-l); border-color:#FECACA; color:#991B1B; }
.tyreon-toast-wrap {
position: fixed; bottom: 24px; right: 24px;
display: flex; flex-direction: column; gap: 8px; z-index: 10000;
}
.tyreon-toast {
padding: 12px 16px; border-radius: var(--rad-l);
font-size: 13px; font-weight: 600;
box-shadow: var(--shd-l); min-width: 200px; max-width: 320px;
background: var(--sb-bg); color: #fff;
animation: slideUp .25s ease both;
}
.tyreon-toast.success { background: var(--suc); }
.tyreon-toast.error { background: var(--dan); }
.tyreon-toast.info { background: var(--inf); }
@keyframes slideUp { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
/* ── SIDEBAR OVERLAY (mobile) ── */
.sidebar-overlay {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,.5); z-index: 199;
}
/* ── ANIMATIONS ── */
@keyframes fadeUp {
from { opacity:0; transform:translateY(10px); }
to { opacity:1; transform:translateY(0); }
}
.kpi-card:nth-child(1){animation-delay:.0s;}
.kpi-card:nth-child(2){animation-delay:.06s;}
.kpi-card:nth-child(3){animation-delay:.12s;}
.kpi-card:nth-child(4){animation-delay:.18s;}
.qa-card:nth-child(1){animation:fadeUp .3s .0s ease both;}
.qa-card:nth-child(2){animation:fadeUp .3s .06s ease both;}
.qa-card:nth-child(3){animation:fadeUp .3s .12s ease both;}
.qa-card:nth-child(4){animation:fadeUp .3s .18s ease both;}
/* ── RESPONSIVE ── */
@media(max-width:1023px){
.topbar-toggle { display: flex; }
.portal-sidebar {
position: fixed; top:0; right:0; height:100%;
transform: translateX(100%);
box-shadow: var(--shd-l);
z-index: 200;
}
.portal-sidebar.open { transform: translateX(0); }
.sidebar-overlay.show { display: block; }
.portal-content { padding: 14px; }
.tyreon-grid-2,
.tyreon-grid-3,
.tyreon-grid-4 { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.kpi-grid { grid-template-columns: repeat(2,1fr); }
.quick-actions { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:479px){
.kpi-grid { grid-template-columns: 1fr 1fr; }
.quick-actions { grid-template-columns: 1fr 1fr; }
.tyreon-modal-box { width: calc(100vw - 16px); }
.filter-bar { flex-direction: column; align-items: stretch; }
.filter-bar select, .filter-bar input { width: 100%; }
.portal-page-hdr { flex-direction: column; align-items: flex-start; }
.store-card-actions { flex-direction: column; }
}
/* ── MESSAGING WIDGET ── */
.tyreon-chat-fab {
position: fixed; bottom: 24px; left: 24px;
z-index: 5000;
}
.tyreon-chat-btn {
width: 50px; height: 50px;
background: var(--pri); color: #fff;
border: none; border-radius: 50%;
font-size: 20px; cursor: pointer;
box-shadow: var(--shd-l);
display: flex; align-items: center; justify-content: center;
transition: transform var(--tr), background var(--tr);
position: relative;
}
.tyreon-chat-btn:hover { background:var(--pri-h); transform:scale(1.08); }
.chat-unread {
position: absolute; top:-2px; right:-2px;
background:var(--dan); color:#fff;
font-size:9px; font-weight:700;
min-width:16px; height:16px; border-radius:8px; padding:0 3px;
display:flex; align-items:center; justify-content:center;
border:2px solid var(--sur);
}
.tyreon-chat-panel {
position: fixed; bottom: 86px; left: 24px;
width: 340px; max-height: 500px;
background: var(--sur); border:1px solid var(--bor);
border-radius: var(--rad-xl); box-shadow: var(--shd-l);
display: flex; flex-direction: column; z-index: 5000; overflow: hidden;
transform: scale(.95) translateY(8px); opacity: 0; pointer-events: none;
transition: transform .2s ease, opacity .2s ease;
}
.tyreon-chat-panel.open { transform:scale(1) translateY(0); opacity:1; pointer-events:all; }
.chat-panel-hdr {
padding:12px 16px; background:var(--pri); color:#fff;
display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.chat-panel-hdr h4 { font-size:13px; font-weight:700; flex:1; margin:0; }
.chat-panel-hdr button { background:none; border:none; color:rgba(255,255,255,.75); cursor:pointer; font-size:15px; }
.chat-panel-hdr button:hover { color:#fff; }
.chat-tabs { display:flex; border-bottom:1px solid var(--bor); flex-shrink:0; }
.chat-tab {
flex:1; padding:8px; text-align:center; font-size:11px; font-weight:600;
cursor:pointer; border:none; background:none; color:var(--muted);
border-bottom:2px solid transparent; font-family:inherit; transition:color var(--tr);
}
.chat-tab.active { color:var(--pri); border-bottom-color:var(--pri); }
.chat-messages { flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:6px; }
.chat-msg {
background:var(--sur2); border-radius:var(--rad-l); padding:10px 12px;
cursor:pointer; transition:background var(--tr);
border-right:3px solid transparent;
}
.chat-msg:hover { background:var(--pri-l); }
.chat-msg.unread { border-right-color:var(--pri); }
.chat-msg-from { font-size:12px; font-weight:700; margin-bottom:2px; }
.chat-msg-body { font-size:12px; color:var(--txt2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-msg-time { font-size:10px; color:var(--muted); margin-top:3px; }
/* ═══════════════════════════════════════════════════════════════════════
v63.18 — MODERN REFRESH LAYER (غالي: "الثيم محتاج يكون عصري أكتر")
Append-only, token-based. Softer depth, refined gradients, smoother
motion, glassy topbar, polished buttons/cards/inputs. Nothing above is
overridden destructively — this only re-tunes shared surfaces so every
portal inherits the refresh at once.
═══════════════════════════════════════════════════════════════════════ */
:root {
/* Refined shadow scale — lighter, more diffuse, layered (modern depth) */
--shd-s: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
--shd: 0 2px 4px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.08);
--shd-l: 0 4px 8px rgba(15,23,42,.05), 0 16px 48px rgba(15,23,42,.12);
--shd-pri: 0 4px 14px rgba(27,79,216,.28);
/* Slightly larger radii read as more contemporary */
--rad: 10px;
--rad-l: 14px;
--rad-xl: 20px;
/* ── The OTHER half of the scale, which this refresh never reached ──────
style.css declares the same concepts under different names — --rad-lg for
the large radius, --sh-sm/--sh/--sh-lg for the shadows — and those are the
names 33 elements were written against. This block re-tuned --rad/--rad-l/
--shd* and left them alone, so the refresh landed on roughly 166 usages and
skipped 33: a 12px card sitting beside a 14px one, a flat single-layer
shadow beside a layered one, on the same screen.
Measured 2026-07-31 — --rad-lg 18 uses, --sh 6, --sh-sm 2, --sh-lg 7.
Nothing in the codebase distinguishes the two families by intent; they are
two spellings of one scale that drifted because a refresh only knew one.
Aliased rather than rewritten at all 33 call sites: this file already loads
last (functions.php enqueues tyreon-modern after tyreon-theme), so one
block puts every element on the same scale, and neither spelling can go
stale again while both point here. */
--rad-lg: var(--rad-l);
--sh-sm: var(--shd-s);
--sh: var(--shd);
--sh-lg: var(--shd-l);
/* Used once in admin-portal for the largest modal; no counterpart existed,
so it fell through to nothing and that modal rendered flat. */
--sh-xl: var(--shd-l);
--tr: .2s cubic-bezier(.4,0,.2,1);
/* Brand gradient used across heros, primary buttons, avatars */
--grad-pri: linear-gradient(135deg, #1B4FD8 0%, #3B6EEA 55%, #0EA5E9 100%);
--grad-sb: linear-gradient(180deg, #0F1E3C 0%, #12244A 100%);
}
/* App background: subtle gradient wash instead of flat fill */
body.tyreon-portal-page {
background:
radial-gradient(1200px 600px at 100% -10%, rgba(59,110,234,.06), transparent 60%),
radial-gradient(1000px 500px at -10% 110%, rgba(14,165,233,.05), transparent 55%),
var(--bg);
background-attachment: fixed;
}
/* Sidebar: gentle vertical gradient + crisper active pill */
.portal-sidebar { background: var(--grad-sb); }
.portal-sidebar a { border-radius: 0 22px 22px 0; margin-inline-end: 10px; }
.portal-sidebar a.active {
background: var(--grad-pri);
box-shadow: 0 4px 12px rgba(27,79,216,.35);
border-right-color: transparent;
}
.sidebar-brand-logo { background: var(--grad-pri); box-shadow: 0 4px 10px rgba(27,79,216,.35); }
/* Topbar: frosted glass */
.portal-topbar {
background: rgba(255,255,255,.72);
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid rgba(226,232,240,.7);
}
/* Cards: airier, hover-lift, gradient hairline on top */
.tyreon-card {
border-radius: var(--rad-l);
box-shadow: var(--shd-s);
transition: box-shadow var(--tr), transform var(--tr);
}
.tyreon-card:hover { box-shadow: var(--shd); }
.portal-content > .tyreon-card,
.tyreon-grid-2 > .tyreon-card { position: relative; }
/* Buttons: refined padding, primary gets gradient + glow, spring press */
.tyreon-btn {
border-radius: var(--rad);
padding: 9px 18px;
transition: transform var(--tr), box-shadow var(--tr), background var(--tr), border-color var(--tr), color var(--tr);
}
.tyreon-btn:active { transform: translateY(1px) scale(.99); }
.tyreon-btn.primary {
background: var(--grad-pri);
border-color: transparent;
box-shadow: var(--shd-pri);
}
.tyreon-btn.primary:hover {
background: var(--grad-pri);
filter: brightness(1.06);
box-shadow: 0 6px 20px rgba(27,79,216,.38);
transform: translateY(-1px);
}
.tyreon-btn.ghost { border-color: var(--bor2); }
.tyreon-btn.ghost:hover { border-color: var(--pri); color: var(--pri); background: var(--pri-l); }
/* Inputs: bigger tap target, smoother focus ring */
.tyreon-input, select.tyreon-input, textarea.tyreon-input {
border-radius: var(--rad);
padding: 11px 14px;
transition: border-color var(--tr), box-shadow var(--tr), background var(--tr);
}
.tyreon-input:focus {
box-shadow: 0 0 0 4px rgba(27,79,216,.12);
}
/* Badges: pill with soft ring for crisper edges on colored fills */
.badge { box-shadow: inset 0 0 0 1px rgba(15,23,42,.04); }
/* Stat / KPI cards (dashboard): gradient number + lift */
.stat-card, .kpi-card {
border-radius: var(--rad-l);
transition: transform var(--tr), box-shadow var(--tr);
}
.stat-card:hover, .kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shd); }
/* Tables: softer header, rounded container */
.table-wrap { border-radius: var(--rad-l); border: 1px solid var(--bor); }
.tyreon-table th { background: linear-gradient(var(--sur2), var(--sur)); }
.tyreon-table tr:hover td { background: var(--pri-l); }
/* Bottom nav (mobile portals): floating, rounded, frosted */
.portal-bottom-nav, .mobile-bottom-nav {
background: rgba(255,255,255,.82);
-webkit-backdrop-filter: saturate(180%) blur(16px);
backdrop-filter: saturate(180%) blur(16px);
border-top: 1px solid rgba(226,232,240,.6);
box-shadow: 0 -4px 24px rgba(15,23,42,.06);
}
/* Loading spinner: brand-tinted */
.tyreon-loading::after,
.tyreon-loading { accent-color: var(--pri); }
/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
.tyreon-btn, .tyreon-card, .stat-card, .kpi-card { transition: none; }
.tyreon-btn:hover, .tyreon-card:hover, .stat-card:hover, .kpi-card:hover { transform: none; }
}
/* ══════════════════════════════════════════════════════════════════════════
#68 — DEPTH. "البوّابات تحس إنك في الفضا"
══════════════════════════════════════════════════════════════════════════
The portals were technically "modern" — gradients, rounded corners — but sat
on a flat #f8f9fa with a 6% wash, which reads as a spreadsheet with nicer
buttons. What was missing is not more decoration, it is DEPTH and AIR: a
ground that recedes, surfaces that sit above it, and enough room between
things that the eye can find the hierarchy.
Three moves, in order of how much they change the feel:
1. the ground stops being a colour and becomes a space
2. cards stop being outlined boxes and start floating on it
3. the rhythm opens up, because none of it reads without room
Additive on purpose: this block only overrides what it names, so the
existing rules stay revertible in one deletion.
══════════════════════════════════════════════════════════════════════════ */
/* ── 1. THE GROUND ──────────────────────────────────────────────────────────
Four layers, all CSS: two wide auroras in the brand hues, a faint navy
vignette that darkens the far corners so the centre reads as nearer, and a
very low-contrast grid that gives the eye a sense of scale — the thing that
makes a surface feel like a space rather than a colour. No images, no
requests; it is gradients, so it costs nothing to load. */
body.tyreon-portal-page {
background:
/* the grid — 1px lines at 4% so it is felt more than seen */
linear-gradient(rgba(15,30,60,.035) 1px, transparent 1px) 0 0 / 100% 44px,
linear-gradient(90deg, rgba(15,30,60,.035) 1px, transparent 1px) 0 0 / 44px 100%,
/* auroras */
radial-gradient(1100px 620px at 92% -12%, rgba(59,110,234,.16), transparent 62%),
radial-gradient(900px 560px at -8% 108%, rgba(14,165,233,.13), transparent 58%),
radial-gradient(700px 420px at 50% 50%, rgba(27,79,216,.045), transparent 70%),
/* the vignette that gives the page a horizon */
linear-gradient(160deg, #eef2fb 0%, #f4f6fb 45%, #e9eef8 100%);
background-attachment: fixed;
}
html[data-tyreon-theme="dark"] body.tyreon-portal-page {
background:
linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px) 0 0 / 100% 44px,
linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px) 0 0 / 44px 100%,
radial-gradient(1100px 620px at 92% -12%, rgba(59,110,234,.22), transparent 62%),
radial-gradient(900px 560px at -8% 108%, rgba(14,165,233,.15), transparent 58%),
linear-gradient(160deg, #070d1a 0%, #0b1220 50%, #060a14 100%);
background-attachment: fixed;
}
/* ── 2. SURFACES THAT FLOAT ─────────────────────────────────────────────────
A card lifts when its shadow has two parts: a tight contact shadow that says
"it is resting on something", and a wide soft one that says "there is space
underneath". One shadow alone always looks like a border. The 1px inset
highlight on the top edge is the light catching the near corner — it is what
separates "raised" from "pasted on". */
.tyreon-card,
.stat-card,
.kpi-card {
border-radius: 16px;
border: 1px solid rgba(15,30,60,.07);
background: var(--c-sur);
box-shadow:
0 1px 2px rgba(15,30,60,.05),
0 8px 24px -8px rgba(15,30,60,.10),
inset 0 1px 0 rgba(255,255,255,.85);
transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1);
}
.tyreon-card:hover,
.stat-card:hover,
.kpi-card:hover {
transform: translateY(-2px);
box-shadow:
0 2px 4px rgba(15,30,60,.06),
0 18px 40px -12px rgba(27,79,216,.20),
inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-tyreon-theme="dark"] .tyreon-card,
html[data-tyreon-theme="dark"] .stat-card,
html[data-tyreon-theme="dark"] .kpi-card {
border-color: rgba(255,255,255,.07);
box-shadow:
0 1px 2px rgba(0,0,0,.4),
0 10px 30px -10px rgba(0,0,0,.55),
inset 0 1px 0 rgba(255,255,255,.05);
}
/* The sidebar is the deepest plane, so it gets the strongest separation and a
rim of brand light down its inner edge. */
.portal-sidebar {
box-shadow: 1px 0 0 rgba(255,255,255,.06), 8px 0 40px -12px rgba(15,30,60,.30);
}
/* ── 3. ROOM ────────────────────────────────────────────────────────────────
None of the above reads at 28px padding with blocks butting together. The
single biggest change to how "expensive" a dashboard feels is the space
around things, and it is also the cheapest. */
/* #90: prose gets a reading measure; the working surface does not.
*
* Uncapping the portal was right for tables, grids and cards — there the width
* IS the product. It was wrong for the explanatory paragraph that sits under a
* page title: 73 of those across the six portals, each now running the full
* width of a 2560px monitor, which is something like 300 characters to a line.
* Nobody reads that, and it is a defect the uncap introduced rather than one it
* inherited.
*
* Scoped deliberately narrow: a
that is a DIRECT child of the main column
* (that is the page intro, and nothing else is shaped like it) plus the page
* header's own subtitle. Prose inside a card or a table cell is left alone —
* its container already decides its measure, and reaching in there would start
* capping things the width is supposed to serve. */
.portal-main > p,
.portal-page-hdr p { max-width: 78ch; }
.portal-main { padding: 32px 34px 64px; }
@media (min-width: 1280px) { .portal-main { padding: 38px 44px 72px; } }
@media (max-width: 780px) { .portal-main { padding: 18px 15px 44px; } }
.portal-page-hdr {
margin-bottom: 24px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(15,30,60,.07);
}
.portal-page-hdr h2 { font-size: clamp(19px, 2.4vw, 24px); letter-spacing: -.02em; }
html[data-tyreon-theme="dark"] .portal-page-hdr { border-bottom-color: rgba(255,255,255,.07); }
/* Consecutive blocks need a rhythm, not a uniform 12px everywhere. */
.stats-grid { gap: 16px; margin-bottom: 24px; }
.portal-main > .tyreon-card + .tyreon-card,
.portal-main > .table-wrap + .tyreon-card { margin-top: 20px; }
/* An empty state is where a portal feels cheapest — it is a whole screen with
nothing on it. Give it the room to look intentional. */
.empty-state { padding: 48px 24px; }
.empty-state .icon { font-size: 44px; opacity: .55; margin-bottom: 6px; }
/* ── the mascot, wherever it is slotted ─────────────────────────────────── */
.tyreon-mascot { height: auto; display: block; }
.tyreon-mascot--empty { margin: 0 auto 10px; max-width: 60%; }
/* It sits ON the page, so it gets the same contact shadow the cards do —
otherwise it reads as a sticker. */
.tyreon-mascot--hero { filter: drop-shadow(0 18px 30px rgba(11,24,56,.35)); }
@media (prefers-reduced-motion: reduce) {
.tyreon-card, .stat-card, .kpi-card { transition: none; }
.tyreon-card:hover, .stat-card:hover, .kpi-card:hover { transform: none; }
}
/* ══════════════════════════════════════════════════════════════════════════
#69 — the suggestions panel, collapsed by default
══════════════════════════════════════════════════════════════════════════
It used to render as a tall always-open list at the top of every overview.
Helpful once, furniture by the second day. The shape here follows what Google
Ads does with recommendations: a single summary line you can open, category
chips once open, and a link to the full page instead of trying to be it.
══════════════════════════════════════════════════════════════════════════ */
.tws { background: var(--c-sur); border: 1px solid var(--c-bor); border-radius: 14px; overflow: hidden; }
.tws-quiet {
display: flex; gap: 9px; align-items: center; padding: 12px 16px;
background: var(--c-sur); border: 1px solid var(--c-bor); border-radius: 14px;
}
/* the collapsed bar — the whole control when shut */
.tws-bar {
width: 100%; display: flex; align-items: center; gap: 12px;
padding: 13px 16px; background: none; border: 0; cursor: pointer;
font-family: inherit; text-align: start; color: inherit;
}
.tws-bar:hover { background: var(--c-sur2); }
.tws-bar-ico { font-size: 17px; line-height: 1; }
.tws-bar-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tws-bar-head { font-weight: 700; font-size: 14px; color: var(--c-txt); }
/* the one-line preview of the top item — truncated, because the bar must stay
one line at every width or it stops being a bar */
.tws-bar-sub { font-size: 12.5px; color: var(--c-txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tws-pill {
background: var(--c-red-d); color: #fff; font-size: 11px; font-weight: 700;
min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 6px;
}
.tws-caret { color: var(--c-txt3); font-size: 15px; transition: transform .2s; }
.tws.is-open .tws-caret { transform: rotate(180deg); }
/* the body */
.tws-panel { display: none; border-top: 1px solid var(--c-bor); padding: 12px 14px 14px; }
.tws.is-open .tws-panel, .tws.is-full .tws-panel { display: block; }
.tws.is-full { border: 0; background: none; }
.tws.is-full .tws-panel { border-top: 0; padding: 0; }
.tws-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tws-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 11px; border-radius: 100px; cursor: pointer;
border: 1px solid var(--c-bor); background: var(--c-sur);
font-family: inherit; font-size: 12.5px; color: var(--c-txt2);
}
.tws-chip:hover { border-color: var(--c-pri); }
.tws-chip.is-on { background: var(--c-pri-l); border-color: var(--c-pri); color: var(--c-pri-d); font-weight: 600; }
.tws-chip .dot { width: 7px; height: 7px; border-radius: 50%; }
.tws-chip .n { font-variant-numeric: tabular-nums; opacity: .75; }
/* #90, owner 2026-07-29: "في يمين و شمال في جزء فاضي ملهاش استخدام و في المقابل
* البيانات بتكون مضغوطه."
*
* Uncapping .portal-layout handed this page the whole screen, and a
* `flex-direction: column` list spent it the worst possible way: by stretching
* ONE card across all of it — an icon, two short lines, and the rest empty.
* Wider became emptier. That is the complaint, not the fix.
*
* The width now carries MORE items rather than longer ones.
*
* auto-fill, not auto-fit, and the distinction is the whole point here: auto-fit
* collapses the empty tracks, so three suggestions on a 2560px screen would each
* become an ~850px card and we would be back to stretching. auto-fill keeps the
* tracks, so cards stay card-sized and the surplus stays surplus.
*
* Ranking survives: grid flows row-wise in the document's direction, so the
* first item is still the first one read, and the priority stripe on each card
* carries severity wherever it lands. Below ~370px of room it is a single
* column again, which is what the phone gets. */
.tws-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 8px;
}
.tws-item {
background: var(--c-sur2); border-inline-start: 3px solid var(--c-pri);
border-radius: 9px; overflow: hidden;
/* Owner's phone, 2026-07-31: «مش دلوقتي» rendered clipped at the inline edge
* on every card — only the first glyphs visible.
*
* The snooze button was `display:block; margin-inline-start:auto`, which
* relies on a BUTTON keeping its shrink-to-fit width after being made a block
* box. That is not something to depend on: a block-level box with width:auto
* fills its container, auto margins then resolve to zero, and the button's own
* centred text lands wherever the remaining space puts it — with
* `overflow:hidden` above turning any excess into a silent crop rather than
* something anyone would notice in review.
*
* A column flex container with align-self:flex-end says the same intent
* unambiguously and is writing-mode aware, so it lands on the correct edge in
* Arabic without a second rule. The overflow:hidden stays — it is what keeps
* the 3px accent border inside the rounded corner. */
display: flex; flex-direction: column;
}
.tws-link { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px 5px; text-decoration: none; color: inherit; }
.tws-link:hover { text-decoration: none; }
.tws-ico { font-size: 15px; line-height: 1.4; }
.tws-body { flex: 1; min-width: 0; }
.tws-title { display: block; font-weight: 600; font-size: 13.5px; }
.tws-detail { display: block; font-size: 12px; color: var(--c-txt3); line-height: 1.6; margin-top: 2px; }
.tws-chev { color: var(--c-txt3); font-size: 14px; }
.tws-snooze {
align-self: flex-end; /* inline-end, writing-mode aware */
padding: 1px 12px 7px;
background: none; border: 0; cursor: pointer; font-family: inherit;
font-size: 11px; color: var(--c-txt3);
white-space: nowrap; /* two words, never split across a line */
}
.tws-snooze:hover { color: var(--c-pri); }
.tws-all {
display: inline-block; margin-top: 11px; font-size: 12.5px;
font-weight: 600; color: var(--c-pri); text-decoration: none;
}
.tws-all:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .tws-caret { transition: none; } }