*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid rgba(139,92,246,0.7); outline-offset: 2px; border-radius: 4px; }
:root {
color-scheme: dark;
--bg: #07070A;
--c-code: 56, 189, 248;
--surface: #0E0E13;
--border: rgba(255,255,255,0.06);
--border2: rgba(255,255,255,0.1);
--accent: #8B5CF6;
--accent-rgb: 139,92,246;
--accent2: #8B5CF6;
--accent3: #d161ff;
--c-link: 34, 211, 117;
--c-note: 79, 172, 254;
--c-checklist: 245, 158, 11;
--c-page: 209, 97, 255;
--c-server: 251, 146, 60;
--c-command: 139, 92, 246;
--c-quicktext: 236, 72, 153;
--c-countdown: 234, 179, 8;
--c-status: 20, 184, 166;
--c-linkgroup: 59, 130, 246;
--c-markdown: 168, 85, 247;
--c-reminder: 239, 100, 80;
--c-subscription: 52, 211, 153;
--c-document: 251, 146, 60;
--c-fields: 129, 140, 248;
--c-tracker: 6, 182, 212;
--c-wifi: 34, 197, 94;
--c-counter: 251, 191, 36;
--c-contact: 244, 114, 182;
--c-expense: 74, 222, 128;
--c-routine: 251, 113, 133;
--text: #ffffff;
--muted: #8c8c9a;
--danger: #ef4444;
--radius: 20px;
--font-en: 'Inter', 'Syne', sans-serif;
--font-ar: 'Cairo', sans-serif;
--font-mono: 'IBM Plex Mono', monospace;
--accent-light: rgba(139, 92, 246, 0.1);
}
html {
scroll-behavior: smooth;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
::selection { background: rgba(139,92,246,0.35); color: #fff; }
::-moz-selection { background: rgba(139,92,246,0.35); color: #fff; }
html,body{min-height:100vh;background-color:var(--bg);background-image:linear-gradient(to right, rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.018) 1px, transparent 1px);background-size:48px 48px;background-position: center center;color:var(--text);font-family:var(--font-ar);overflow-x:hidden;position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.hidden{display:none!important;}
/* ─── Aurora background glow (animated blobs) ─────────────
* Three soft radial blobs that float in the page background,
* creating a subtle depth/ambiance without distracting from cards.
* Respects prefers-reduced-motion. */
body::before, body::after {
content: '';
position: fixed;
pointer-events: none;
z-index: -1;
filter: blur(60px);
opacity: 0.38;
will-change: transform;
}
body::before {
top: -180px; right: -180px;
width: 620px; height: 620px;
background: radial-gradient(circle, rgba(139,92,246,0.45) 0%, transparent 62%);
animation: auroraFloat1 22s ease-in-out infinite;
}
body::after {
bottom: -200px; left: -200px;
width: 680px; height: 680px;
background: radial-gradient(circle, rgba(56,189,248,0.3) 0%, transparent 62%);
animation: auroraFloat2 28s ease-in-out infinite;
}
@keyframes auroraFloat1 {
0%,100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(-80px, 60px) scale(1.1); }
66% { transform: translate(60px, -40px) scale(0.95); }
}
@keyframes auroraFloat2 {
0%,100% { transform: translate(0, 0) scale(1); }
40% { transform: translate(80px, -60px) scale(1.15); }
75% { transform: translate(-50px, 30px) scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
body::before, body::after { animation: none; }
}
/* Time-based accent tweaks */
body[data-time="morning"] { --accent-rgb: 251, 191, 36; /* warm sun */ }
body[data-time="afternoon"] { --accent-rgb: 139, 92, 246; /* default purple */ }
body[data-time="evening"] { --accent-rgb: 244, 114, 182; /* sunset pink */ }
body[data-time="night"] { --accent-rgb: 56, 189, 248; /* cool blue */ }
/* ─── Today hero strip (greeting + quick chips) ─────────── */
.hero-strip {
position: relative;
margin: 8px 22px 14px;
padding: 18px 22px;
border-radius: 18px;
background: linear-gradient(135deg,
rgba(139,92,246,0.08) 0%,
rgba(56,189,248,0.05) 50%,
rgba(244,114,182,0.04) 100%);
border: 1px solid rgba(255,255,255,0.06);
overflow: hidden;
opacity: 0; transform: translateY(-8px);
animation: heroStripIn .55s cubic-bezier(.2,.8,.25,1) forwards;
}
.hero-strip:empty { display: none; }
@keyframes heroStripIn {
to { opacity: 1; transform: translateY(0); }
}
.hero-strip-inner {
display: flex; align-items: center; justify-content: space-between;
gap: 18px; flex-wrap: wrap;
position: relative; z-index: 1;
}
.hero-strip-left {
display: flex; flex-direction: column; gap: 2px;
min-width: 0;
}
.hero-strip-greet {
font-size: 1.2rem; font-weight: 800;
background: linear-gradient(135deg, #fff 0%, #c4b5fd 80%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.01em;
}
.hero-strip-date {
font-size: 0.8rem; color: var(--muted);
font-weight: 500;
}
.hero-strip-chips {
display: flex; gap: 8px; flex-wrap: wrap;
align-items: center;
}
.hero-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
border-radius: 999px;
font-size: 0.82rem; font-weight: 600;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.07);
color: var(--text);
transition: transform .12s, background .12s;
}
.hero-chip:hover { transform: translateY(-1px); background: rgba(255,255,255,0.08); }
.hero-chip[onclick] { cursor: pointer; }
.hero-chip-icon { font-size: 0.95rem; line-height: 1; }
.hero-chip-warn {
background: rgba(239,68,68,0.1);
border-color: rgba(239,68,68,0.2);
color: #fca5a5;
}
.hero-chip-ok {
background: rgba(34,197,94,0.1);
border-color: rgba(34,197,94,0.22);
color: #86efac;
}
.hero-chip-prog {
background: rgba(139,92,246,0.12);
border-color: rgba(139,92,246,0.22);
color: #c4b5fd;
}
.hero-chip-trip {
background: rgba(56,189,248,0.12);
border-color: rgba(56,189,248,0.22);
color: #7dd3fc;
}
.hero-chip-streak {
background: linear-gradient(135deg, rgba(251,146,60,0.15), rgba(239,68,68,0.12));
border-color: rgba(251,146,60,0.25);
color: #fdba74;
}
.hero-strip-aurora {
position: absolute; inset: 0;
background:
radial-gradient(circle at 15% 20%, rgba(139,92,246,0.15) 0%, transparent 40%),
radial-gradient(circle at 85% 80%, rgba(56,189,248,0.1) 0%, transparent 40%);
pointer-events: none;
z-index: 0;
}
@media (max-width: 640px) {
.hero-strip { margin: 6px 12px 10px; padding: 14px 16px; }
.hero-strip-greet { font-size: 1.05rem; }
.hero-strip-date { font-size: 0.75rem; }
.hero-strip-inner { gap: 10px; }
.hero-chip { padding: 5px 10px; font-size: 0.76rem; }
}
/* ─── Stagger entrance animations for dashboard cards ───── */
@keyframes cardStaggerIn {
from { opacity: 0; transform: translateY(14px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.dash-grid > .card-container:not(.card-stagger-done) {
opacity: 0;
animation: cardStaggerIn .5s cubic-bezier(.2,.8,.25,1) forwards;
}
.dash-grid > .card-container:nth-child(1) { animation-delay: 0.02s; }
.dash-grid > .card-container:nth-child(2) { animation-delay: 0.06s; }
.dash-grid > .card-container:nth-child(3) { animation-delay: 0.1s; }
.dash-grid > .card-container:nth-child(4) { animation-delay: 0.14s; }
.dash-grid > .card-container:nth-child(5) { animation-delay: 0.18s; }
.dash-grid > .card-container:nth-child(6) { animation-delay: 0.22s; }
.dash-grid > .card-container:nth-child(7) { animation-delay: 0.26s; }
.dash-grid > .card-container:nth-child(8) { animation-delay: 0.3s; }
.dash-grid > .card-container:nth-child(9) { animation-delay: 0.34s; }
.dash-grid > .card-container:nth-child(10) { animation-delay: 0.38s; }
.dash-grid > .card-container:nth-child(n+11) { animation-delay: 0.42s; }
@media (prefers-reduced-motion: reduce) {
.dash-grid > .card-container { animation: none !important; opacity: 1 !important; }
}
/* Custom scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; }
/* CRT scanlines removed */
.login-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center, rgba(139,92,246,0.06) 0%, var(--bg) 70%);z-index:100;overflow:hidden;}
.login-box{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;padding:48px 56px;background:var(--surface);border:1px solid rgba(139,92,246,0.15);border-radius:24px;box-shadow:0 24px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(139,92,246,0.08);animation:fadeUp .6s cubic-bezier(0.16, 1, 0.3, 1);}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.login-logo, .dash-logo { font-family: var(--font-en); font-weight: 800; cursor: pointer; display: flex; align-items: baseline; letter-spacing: 2px; }
.login-logo { font-size: 2.8rem; }
.dash-logo { font-size: 1.4rem; letter-spacing: 1px; }
.logo-letter { color: var(--text); background: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.logo-dot { color: var(--accent2); margin: 0 1px; opacity: 0.8; }
.login-sub{color:var(--muted);font-size:1rem;letter-spacing:1px;font-weight:500;}
.pin-inputs{display:flex;gap:12px;direction:ltr;}
.pin-digit{width:56px;height:68px;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:12px;color:var(--text);font-family:var(--font-mono);font-size:2rem;font-weight:600;text-align:center;outline:none;transition:all .2s;}
.pin-digit:focus{border-color:var(--accent);background:rgba(255,255,255,0.06);}
.pin-error{color:var(--danger);font-size:.9rem;opacity:0;transition:opacity .3s;font-weight:600;}
.pin-error.show{opacity:1;}
.login-box.shake{animation:shake .4s ease;}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.dashboard { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(circle at 15% 15%, rgba(139,92,246,0.07), transparent 50%), radial-gradient(circle at 85% 85%, rgba(139,92,246,0.04), transparent 50%); }
/* Desktop: lock the dashboard to viewport height so .main-content (overflow-y:auto)
becomes the sole scroller. This keeps the header (sticky top:0), the sidebar
(sticky top:58), and the floating FAB visually pinned during scroll. The mobile
layout (which uses .dash-body { display: block } + bottom-nav) is intentionally
excluded because it relies on body-level scrolling. */
@media (min-width: 901px) {
.dashboard {
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
overflow: hidden;
}
}
/* ─── HEADER ──────────────────────────────────────────────── */
.dash-header {
height: 74px;
min-height: 74px;
width: 100%;
background: rgba(7,7,10,0.97);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
position: sticky;
top: 0;
z-index: 60;
backdrop-filter: blur(24px);
}
.dash-header-right { display: flex; align-items: center; gap: 16px; }
.dash-header-left { display: flex; align-items: center; gap: 14px; }
.dash-header-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex; align-items: center; gap: 8px;
z-index: 2;
pointer-events: auto;
}
@media (max-width: 900px) {
.dash-header-center {
position: static;
transform: none;
margin-inline: 6px;
gap: 4px;
}
.dash-header-center .header-home-lbl,
.dash-header-center .header-today-lbl { display: none; }
.dash-header-center .header-today-btn,
.dash-header-center .header-home-btn { padding: 5px 8px; gap: 3px; }
}
/* Header "الرئيسية" home button */
.header-home-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px 5px 10px;
height: 30px;
background: linear-gradient(135deg, rgba(45,212,191,0.12), rgba(20,184,166,0.06));
border: 1px solid rgba(45,212,191,0.22);
border-radius: 999px;
color: var(--text, #fff);
font-family: var(--font-ar);
font-size: 0.82rem; font-weight: 700;
cursor: pointer;
transition: transform .14s, background .14s, border-color .14s, box-shadow .14s;
flex-shrink: 0;
}
.header-home-btn:hover {
background: linear-gradient(135deg, rgba(45,212,191,0.22), rgba(20,184,166,0.1));
border-color: rgba(45,212,191,0.4);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(20,184,166,0.22);
}
.header-home-btn.active {
background: linear-gradient(135deg, rgba(45,212,191,0.35), rgba(20,184,166,0.2));
border-color: rgba(45,212,191,0.55);
box-shadow: 0 0 0 1px rgba(45,212,191,0.3), 0 0 14px rgba(20,184,166,0.25);
}
.header-home-btn svg { color: #5eead4; flex-shrink: 0; }
.header-home-btn.active svg { color: #ccfbf1; }
.header-home-lbl { line-height: 1; }
.header-divider { width: 1px; height: 24px; background: var(--border2); }
.header-section-label { font-size: 0.85rem; color: var(--muted); font-family: var(--font-ar); font-weight: 500; }
/* Header "اليوم" quick-access button */
.header-today-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px 5px 10px;
height: 30px;
background: linear-gradient(135deg, rgba(167,139,250,0.12), rgba(139,92,246,0.06));
border: 1px solid rgba(167,139,250,0.22);
border-radius: 999px;
color: var(--text, #fff);
font-family: var(--font-ar);
font-size: 0.82rem; font-weight: 700;
cursor: pointer;
transition: transform .14s, background .14s, border-color .14s, box-shadow .14s;
flex-shrink: 0;
position: relative;
}
.header-today-btn:hover {
background: linear-gradient(135deg, rgba(167,139,250,0.22), rgba(139,92,246,0.1));
border-color: rgba(167,139,250,0.4);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(139,92,246,0.2);
}
.header-today-btn.active {
background: linear-gradient(135deg, rgba(167,139,250,0.35), rgba(139,92,246,0.2));
border-color: rgba(167,139,250,0.55);
box-shadow: 0 0 0 1px rgba(167,139,250,0.3), 0 0 14px rgba(139,92,246,0.25);
}
.header-today-btn svg { color: #c4b5fd; flex-shrink: 0; }
.header-today-btn.active svg { color: #e9e4ff; }
.header-today-lbl { line-height: 1; }
.header-today-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 6px;
border-radius: 999px;
background: var(--danger); color: #fff;
font-family: var(--font-mono, monospace);
font-size: 0.68rem; font-weight: 800;
margin-inline-start: 2px;
box-shadow: 0 0 10px rgba(239,68,68,0.45);
}
.header-today-count.hidden { display: none; }
@media (max-width: 640px) {
.header-today-lbl { display: none; }
.header-today-btn { padding: 5px 8px; gap: 4px; }
}
/* Smart Feed toggle button */
.smart-feed-btn {
width: 28px; height: 28px; border-radius: 8px;
background: none; border: 1px solid transparent;
color: var(--muted); cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .25s; position: relative; flex-shrink: 0;
}
.smart-feed-btn:hover { background: rgba(139,92,246,0.08); color: var(--accent); }
.smart-feed-btn.active {
color: var(--accent);
background: rgba(139,92,246,0.12);
border-color: rgba(139,92,246,0.25);
box-shadow: 0 0 12px rgba(139,92,246,0.15);
}
.smart-feed-btn.active::after {
content: '';
position: absolute;
top: -2px; right: -2px;
width: 7px; height: 7px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 6px var(--accent);
}
/* Smart feed empty state */
.smart-empty-state {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 12px; padding: 60px 20px; text-align: center;
}
.smart-empty-icon { font-size: 3rem; opacity: 0.8; }
.smart-empty-title { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.smart-empty-sub { font-size: 0.85rem; color: var(--muted); line-height: 1.6; max-width: 320px; }
.smart-show-all-btn {
margin-top: 8px; padding: 8px 20px;
background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.25);
border-radius: 12px; color: var(--accent);
font-family: var(--font-ar); font-size: 0.85rem; font-weight: 700;
cursor: pointer; transition: all .2s;
}
.smart-show-all-btn:hover { background: rgba(139,92,246,0.2); }
/* Unified time pill: icon + stacked clock/date */
.header-time-pill {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px 8px 14px;
background: linear-gradient(135deg, rgba(139,92,246,0.06), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.07);
border-radius: 14px;
transition: all 0.2s ease;
line-height: 1;
}
.header-time-pill:hover {
background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(255,255,255,0.04));
border-color: rgba(139,92,246,0.22);
}
.header-time-icon {
color: var(--accent);
opacity: 0.75;
flex-shrink: 0;
}
.header-time-stack {
display: flex;
flex-direction: column;
gap: 5px;
align-items: flex-start;
}
.header-clock {
font-family: var(--font-mono);
font-size: 1.02rem;
color: var(--text);
font-weight: 700;
letter-spacing: 0.4px;
line-height: 1;
display: inline-flex;
align-items: baseline;
gap: 0;
direction: ltr;
}
.header-clock .hc-hh,
.header-clock .hc-mm {
font-variant-numeric: tabular-nums;
min-width: 1.1em;
text-align: center;
}
.header-clock .hc-sep {
opacity: 1;
padding: 0 1px;
transition: opacity 0.35s ease;
color: rgba(168, 131, 255, 0.95);
}
.header-clock .hc-mer {
font-family: var(--font-ar);
font-size: 0.62rem;
font-weight: 700;
padding: 2px 5px;
margin-inline-start: 6px;
border-radius: 6px;
background: linear-gradient(135deg, rgba(139,92,246,0.22), rgba(45,212,191,0.18));
color: #e9e4ff;
line-height: 1;
letter-spacing: 0;
box-shadow: 0 0 0 1px rgba(139,92,246,0.22) inset;
transform: translateY(-1px);
}
.header-date {
font-size: 0.66rem;
color: rgba(232, 238, 247, 0.5);
font-family: var(--font-ar);
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1;
white-space: nowrap;
transition: color 0.3s ease, opacity 0.3s ease;
}
.header-date.is-hijri {
color: rgba(45, 212, 191, 0.75);
}
/* Header alert badge */
.header-alert-badge {
display: flex;
align-items: center;
gap: 4px;
background: none;
border: none;
color: var(--muted);
cursor: pointer;
padding: 4px 8px;
border-radius: 8px;
transition: all .2s;
position: relative;
font-family: var(--font-mono);
}
.header-alert-badge:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.alert-badge-count {
font-size: 0.65rem;
font-weight: 800;
background: rgba(234,179,8,0.2);
color: #eab308;
border-radius: 99px;
padding: 1px 6px;
min-width: 16px;
text-align: center;
line-height: 1.4;
}
.alert-badge-count.alert-badge-danger {
background: rgba(239,68,68,0.2);
color: var(--danger);
animation: pulseBadge 1.5s ease infinite;
}
/* Header search */
.header-search-wrap { position: relative; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; height: 34px; min-width: 200px; transition: border-color .2s; }
.header-search-wrap:focus-within { border-color: var(--border2); background: rgba(255,255,255,0.06); }
.header-search-icon { color: var(--muted); flex-shrink: 0; }
.header-search-input { background: none; border: none; outline: none; color: var(--text); font-family: var(--font-ar); font-size: 0.85rem; width: 100%; }
.header-search-input::placeholder { color: rgba(255,255,255,0.2); }
.search-clear-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.75rem; padding: 0; line-height: 1; transition: color .15s; flex-shrink: 0; }
.search-clear-btn:hover { color: var(--text); }
/* Search history dropdown */
.search-history-drop {
position: absolute;
top: calc(100% + 6px);
right: 0;
left: 0;
background: #0F0F16;
border: 1px solid var(--border2);
border-radius: 12px;
padding: 6px;
z-index: 999;
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
display: flex;
flex-direction: column;
gap: 2px;
}
.search-hist-item {
background: none;
border: none;
color: var(--muted);
font-family: var(--font-ar);
font-size: 0.82rem;
text-align: right;
padding: 7px 12px;
border-radius: 8px;
cursor: pointer;
transition: all .15s;
}
.search-hist-item::before { content: '🕐 '; }
.search-hist-item:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.search-hist-header {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--muted);
padding: 4px 12px 2px;
opacity: 0.6;
}
.search-type-sug {
display: flex !important;
align-items: center;
gap: 8px;
}
.search-type-sug::before { content: none !important; }
.sug-icon { font-size: 0.9rem; flex-shrink: 0; }
.sug-label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); flex-shrink: 0; }
.sug-label-ar { font-size: 0.78rem; color: var(--muted); flex: 1; text-align: right; }
.sug-count { font-size: 0.68rem; font-family: var(--font-mono); color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.05); padding: 0 5px; border-radius: 4px; flex-shrink: 0; }
.search-hist-clear {
background: none;
border: none;
border-top: 1px solid var(--border);
color: var(--muted);
font-family: var(--font-ar);
font-size: 0.75rem;
padding: 7px 12px;
margin-top: 2px;
cursor: pointer;
text-align: right;
transition: color .15s;
}
.search-hist-clear:hover { color: var(--danger); }
.header-icon-btn {
width: 34px; height: 34px; border-radius: 10px;
background: none; border: none; color: var(--muted);
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
position: relative;
}
.header-icon-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.header-icon-btn:active { transform: none !important; background: rgba(255,255,255,0.08); }
.header-icon-btn.active { background: rgba(139,92,246,0.12); color: var(--accent2); }
#settings-btn { margin-inline-start: 8px; }
/* Header button tooltip — appears below */
.header-icon-btn::before {
content: attr(title);
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: #0F0F16;
border: 1px solid var(--border2);
color: var(--text);
font-size: 0.72rem;
font-weight: 700;
font-family: var(--font-ar);
padding: 5px 10px;
border-radius: 8px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .15s;
z-index: 200;
}
.header-icon-btn:hover::before { opacity: 1; }
/* ─── BODY ROW ─────────────────────────────────────────────── */
.dash-body { display: flex; flex-direction: row; flex: 1; min-height: 0; }
.main-content { flex: 1; padding: 28px 32px; overflow-y: auto; }
/* ─── SIDEBAR ──────────────────────────────────────────────── */
.sidebar {
width: 68px;
height: calc(100vh - 58px);
background: rgba(7,7,10,0.97);
border-inline-start: 1px solid var(--border);
display: flex;
flex-direction: column;
align-items: center;
padding: 16px 0;
position: sticky;
top: 58px;
flex-shrink: 0;
backdrop-filter: blur(24px);
z-index: 50;
gap: 4px;
transition: width .25s cubic-bezier(0.16,1,0.3,1);
overflow: hidden;
}
/* Expanded sidebar */
.sidebar.expanded {
width: 210px;
align-items: flex-start;
}
/* In expanded mode: let buttons own their padding — containers just center */
.sidebar.expanded .sidebar-top { padding-right: 12px; padding-left: 12px; }
.sidebar.expanded .sidebar-nav-btn,
.sidebar.expanded .sidebar-icon-btn {
width: calc(100% - 16px);
margin-right: 8px;
margin-left: 8px;
justify-content: flex-start;
gap: 10px;
padding: 0 10px;
border-radius: 10px;
height: 40px;
}
.sidebar-label {
display: none;
font-family: var(--font-ar);
font-size: 0.82rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar.expanded .sidebar-label { display: block; }
/* Hide tooltip when expanded */
.sidebar.expanded .sidebar-icon-btn::before,
.sidebar.expanded .sidebar-nav-btn::before { display: none; }
.sidebar-top { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border); width: 100%; }
.sidebar-logo { font-family: var(--font-en); font-weight: 800; font-size: 0.65rem; color: var(--text); letter-spacing: 1px; cursor: pointer; display: flex; align-items: baseline; gap: 1px; padding: 8px 0; }
.sidebar-logo .logo-dot { color: var(--accent2); }
/* Primary navigation — no flex-grow, stays compact */
.sidebar-nav {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 10px 0 8px;
width: 100%;
}
/* Keep backward-compat alias */
.sidebar-filters { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0 8px; width: 100%; }
/* Compact status badges below nav */
.sidebar-status-bar {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 4px 0 6px;
width: 100%;
}
.sidebar.expanded .sidebar-status-bar {
align-items: flex-start;
padding-right: 20px;
padding-left: 20px;
}
.sb-badge {
display: inline-flex;
align-items: center;
font-size: 0.62rem;
font-family: var(--font-ar);
font-weight: 700;
padding: 2px 8px;
border-radius: 99px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
color: var(--muted);
white-space: nowrap;
max-width: 100%;
}
.sb-badge-danger {
background: rgba(239,68,68,0.1);
border-color: rgba(239,68,68,0.25);
color: #f87171;
}
.sb-badge-success {
background: rgba(34,197,94,0.1);
border-color: rgba(34,197,94,0.25);
color: #4ade80;
}
/* Spacer pushes bottom section to the bottom */
.sidebar-spacer { flex: 1; min-height: 8px; }
/* Bottom tool buttons */
.sidebar-bottom {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 10px 0 8px;
border-top: 1px solid var(--border);
width: 100%;
}
.sidebar-bottom-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: 100%;
}
.sidebar-bottom-divider {
width: 28px;
height: 1px;
background: rgba(255,255,255,0.07);
margin: 3px auto;
}
.sidebar-clock-wrap { display: flex; flex-direction: column; align-items: center; }
.sidebar-clock { font-family: var(--font-mono); font-size: 0.58rem; color: var(--muted); letter-spacing: 0.5px; font-weight: 700; }
.sidebar-icon-btn {
width: 44px;
height: 44px;
border-radius: 14px;
background: none;
border: none;
color: var(--muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all .2s;
position: relative;
}
.sidebar-icon-btn:hover { background: rgba(255,255,255,0.07); color: var(--text); }
.sidebar-icon-btn.active {
background: rgba(139,92,246,0.18);
color: #c4b5fd;
box-shadow: inset 0 0 0 1px rgba(139,92,246,0.35), 0 0 12px rgba(139,92,246,0.12);
}
.sidebar-danger { color: rgba(239,68,68,0.6); }
.sidebar-danger:hover { background: rgba(239,68,68,0.1) !important; color: var(--danger) !important; }
/* Tooltip on hover */
.sidebar-icon-btn::before, .sidebar-nav-btn::before {
content: attr(title);
position: absolute;
right: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
background: #0F0F16;
border: 1px solid var(--border2);
color: var(--text);
font-size: 0.72rem;
font-weight: 700;
font-family: var(--font-ar);
padding: 5px 10px;
border-radius: 8px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .15s;
z-index: 100;
}
.sidebar-icon-btn:hover::before, .sidebar-nav-btn:hover::before { opacity: 1; }
.sidebar-nav-btn {
width: 44px;
height: 44px;
border-radius: 14px;
background: none;
border: none;
color: var(--muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all .2s;
position: relative;
}
.sidebar-nav-btn:hover { background: rgba(255,255,255,0.07); color: var(--text); }
.sidebar-nav-btn.active {
background: rgba(139,92,246,0.18);
color: #c4b5fd;
box-shadow: inset 0 0 0 1px rgba(139,92,246,0.35), 0 0 12px rgba(139,92,246,0.12);
}
/* Search bar */
.sidebar-search-bar {
position: fixed;
top: 58px;
right: 68px;
left: 0;
height: 52px;
background: rgba(7,7,10,0.97);
border-bottom: 1px solid var(--border2);
backdrop-filter: blur(24px);
display: flex;
align-items: center;
gap: 12px;
padding: 0 24px;
z-index: 49;
animation: slideDown .2s cubic-bezier(0.16,1,0.3,1);
color: var(--muted);
}
.sidebar-search-bar.hidden { display: none; }
@keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.sidebar-search-input { flex: 1; background: none; border: none; color: var(--text); font-family: var(--font-ar); font-size: 0.95rem; font-weight: 500; outline: none; }
.sidebar-search-input::placeholder { color: rgba(255,255,255,0.2); }
.sidebar-search-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; padding: 4px 8px; border-radius: 6px; transition: color .2s; }
.sidebar-search-close:hover { color: var(--danger); }
/* quick-add-trigger in sidebar */
.quick-add-trigger { color: var(--accent2) !important; }
.quick-add-trigger.active { background: rgba(139,92,246,0.12) !important; }
.dash-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-auto-flow: dense;
grid-auto-rows: min-content;
align-items: stretch;
align-content: start;
gap: 20px;
width: 100%;
}
/* Card type colors */
.card[data-type="link"] { --card-color: var(--c-link); }
.card[data-type="note"] { --card-color: var(--c-note); }
.card[data-type="checklist"] { --card-color: var(--c-checklist); }
.card[data-type="page"] { --card-color: var(--c-page); }
.card[data-type="server"] { --card-color: var(--c-server); }
.card[data-type="command"] { --card-color: var(--c-command); }
.card[data-type="quicktext"] { --card-color: var(--c-quicktext); }
.card[data-type="countdown"] { --card-color: var(--c-countdown); }
.card[data-type="status"] { --card-color: var(--c-status); }
.card[data-type="linkgroup"] { --card-color: var(--c-linkgroup); }
.card[data-type="markdown"] { --card-color: var(--c-markdown); }
.card[data-type="reminder"] { --card-color: var(--c-reminder); }
.card[data-type="tracker"] { --card-color: var(--c-tracker); }
.card[data-type="wifi"] { --card-color: var(--c-wifi); }
.card[data-type="subscription"] { --card-color: var(--c-subscription); }
.card[data-type="document"] { --card-color: var(--c-document); }
.card[data-type="fields"] { --card-color: var(--c-fields); }
.card[data-type="routine"] { --card-color: var(--c-routine); }
.card[data-type="counter"] { --card-color: var(--c-counter); }
.card[data-type="contact"] { --card-color: var(--c-contact); }
.card[data-type="expense"] { --card-color: var(--c-expense); }
.card[data-type="code"] { --card-color: var(--c-code); }
.card[data-type="quran"] { --card-color: 34, 197, 94; }
.card[data-type="zakat"] { --card-color: 251, 191, 36; }
.card[data-type="fasting"] { --card-color: 139, 92, 246; }
.card[data-type="iou"] { --card-color: 89, 216, 255; }
.card[data-type="savings_goal"] { --card-color: 45, 212, 191; }
.card[data-type="gold"] { --card-color: 251, 191, 36; }
.card[data-type="net_worth"] { --card-color: 94, 234, 212; }
.card[data-type="purchase_decision"] { --card-color: 249, 115, 22; }
.card[data-type="appliance"] { --card-color: 148, 163, 184; }
.card[data-type="gift"] { --card-color: 244, 114, 182; }
.card[data-type="chore"] { --card-color: 6, 182, 212; }
.card[data-type="pomodoro"] { --card-color: 239, 68, 68; }
.card[data-type="project"] { --card-color: 139, 92, 246; }
.card[data-type="inbox"] { --card-color: 100, 116, 139; }
.card[data-type="mood"] { --card-color: 251, 191, 36; }
.card[data-type="workout"] { --card-color: 239, 68, 68; }
.card[data-type="meditation"] { --card-color: 167, 139, 250; }
.card[data-type="vitals"] { --card-color: 244, 63, 94; }
.card[data-type="course"] { --card-color: 59, 130, 246; }
.card[data-type="language"] { --card-color: 20, 184, 166; }
.card[data-type="idea"] { --card-color: 251, 191, 36; }
.card[data-type="quote"] { --card-color: 167, 139, 250; }
.card[data-type="recipe"] { --card-color: 249, 115, 22; }
.card[data-type="goal"] { --card-color: 34, 197, 94; }
.card[data-type="meeting"] { --card-color: 59, 130, 246; }
.card[data-type="loan"] { --card-color: 239, 68, 68; }
.card[data-type="crypto"] { --card-color: 245, 158, 11; }
.card[data-type="plant"] { --card-color: 34, 197, 94; }
.card[data-type="journal"] { --card-color: 236, 72, 153; }
.card[data-type="week_plan"] { --card-color: 99, 102, 241; }
.card[data-type="review"] { --card-color: 6, 182, 212; }
.card[data-type="meals"] { --card-color: 249, 115, 22; }
.card[data-type="podcast"] { --card-color: 167, 139, 250; }
.card[data-type="playlist"] { --card-color: 34, 197, 94; }
.card[data-type="trip"] { --card-color: 6, 182, 212; }
/* ─── BENTO BOX CARD BASE ────────────────────────────────────── */
.card {
position: relative;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.07);
border-top: 2px solid rgba(var(--card-color, 255,255,255), 0.3);
border-radius: 20px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 8px;
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 30px rgba(var(--card-color, 255,255,255), 0.05);
}
/* ─── NOTIFICATION HUB BENTO CARD ──────────────────────────── */
.notification-hub-card {
cursor: default !important;
background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(20,10,10,0.4) 100%) !important;
border-color: rgba(239, 68, 68, 0.2) !important;
}
.hub-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.hub-icon { font-size: 1.5rem; }
.hub-title { font-size: 1.2rem; font-weight: 800; color: var(--text); flex: 1; }
.hub-badge { background: var(--danger); color: #fff; font-size: 0.75rem; font-weight: 800; padding: 4px 10px; border-radius: 99px; }
.crit-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
}
.crit-item {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 14px;
padding: 12px 14px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
gap: 8px;
}
.crit-item:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.12);
transform: translateY(-2px);
}
.crit-header { display: flex; align-items: center; gap: 8px; }
.crit-icon { font-size: 1.1rem; }
.crit-title { font-size: 0.88rem; font-weight: 700; color: var(--text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crit-badge { font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.crit-badge-danger { background: rgba(239,68,68,0.15); color: var(--danger); }
.crit-badge-warn { background: rgba(245,158,11,0.15); color: #f59e0b; }
.crit-badge-info { background: rgba(59,130,246,0.15); color: #3b82f6; }
.crit-badge-success { background: rgba(34,211,117,0.15); color: #22d375; }
.crit-bar-track { width: 100%; height: 4px; background: rgba(255,255,255,0.05); border-radius: 2px; overflow: hidden; }
.crit-bar-fill { height: 100%; transition: width 0.4s ease; }
.card::before {
content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(var(--card-color,255,255,255), 0.15), transparent 70%); pointer-events: none; opacity: 0.5; transition: opacity 0.3s;
}
.dash-grid { perspective: 1200px; }
.card {
transform-style: preserve-3d;
}
.card:hover {
will-change: transform;
border-color: rgba(var(--card-color,255,255,255), 0.3);
transform: translateY(-4px) scale(1.01)
rotateX(var(--tilt-x, 0deg))
rotateY(var(--tilt-y, 0deg));
box-shadow:
calc(var(--tilt-y-px, 0) * -1px) calc(var(--tilt-x-px, 0) * 1px + 20px)
50px rgba(0, 0, 0, 0.6),
0 0 60px rgba(var(--card-color, 255,255,255), 0.2);
}
.card:hover::before { opacity: 1; }
/* Shine sweep on hover — disabled per user request */
/* (was: .card::after linear-gradient sliding from -100% to 100% on hover) */
.card-compact {
min-height: auto;
padding: 16px 20px;
display: grid !important;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto;
column-gap: 16px;
row-gap: 4px;
align-items: center;
}
.card-compact .card-type-badge { display: none; }
.card-compact .card-icon { grid-row: 1 / span 2; grid-column: 1; margin: 0 !important; width: 44px; height: 44px; font-size: 1.5rem; border-radius: 14px; }
.card-compact .card-title { grid-row: 1; grid-column: 2; align-self: end; font-size: 1.1rem; }
.card-compact .card-meta { grid-row: 2; grid-column: 2; align-self: start; font-size: 0.8rem; }
.card-compact .status-meta { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.card-compact .status-dot { width: 10px; height: 10px; box-shadow: 0 0 10px rgba(var(--card-color,255,255,255), 0.4); }
.card-compact .card-actions { position: static; opacity: 1; transform: none; background: none; grid-row: 1 / span 2; grid-column: 3; padding: 0; pointer-events: auto; }
.card-compact .card-actions button { background: none !important; opacity: 0; }
.card-compact:hover .card-actions button { opacity: 1; }
.card-wide {
grid-column: span 2;
padding: 24px;
}
.card-wide .subs-preview-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
width: 100%;
}
.sub-item-preview {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 14px;
padding: 12px 16px;
display: flex !important;
align-items: center;
gap: 12px;
position: relative;
overflow: hidden;
}
/* Burn-meter: thin bar at the bottom indicating cycle progress */
.sub-item-preview::after {
content: '';
position: absolute;
left: 0; right: auto;
bottom: 0;
height: 2px;
width: var(--burn-pct, 0%);
background: linear-gradient(90deg, rgba(34,197,94,0.8), rgba(245,158,11,0.8));
border-radius: 0 2px 2px 0;
transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.sub-item-preview.sub-burn-cool::after { background: linear-gradient(90deg, #22c55e, #22d3ee); }
.sub-item-preview.sub-burn-warm::after { background: linear-gradient(90deg, #f59e0b, #f97316); }
.sub-item-preview.sub-burn-hot::after {
background: linear-gradient(90deg, #ef4444, #f97316);
box-shadow: 0 0 8px rgba(239,68,68,0.5);
animation: burnMeterPulse 1.4s ease-in-out infinite;
}
.sub-item-preview.sub-burn-none::after { display: none; }
@keyframes burnMeterPulse {
0%, 100% { opacity: 0.85; }
50% { opacity: 1; filter: brightness(1.15); }
}
@media (prefers-reduced-motion: reduce) {
.sub-item-preview.sub-burn-hot::after { animation: none; }
}
.sub-preview-icon {
font-size: 1.4rem;
background: rgba(255,255,255,0.05);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
.sub-item-preview-content {
flex: 1;
display: flex;
flex-direction: column;
}
.sub-name { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.sub-price { font-size: 0.85rem; color: var(--muted); }
/* Wide Card Checklist/Routine Preview */
.card-wide .card-checklist-preview {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
width: 100%;
}
.card-wide .preview-item {
background: rgba(255,255,255,0.03);
padding: 10px 14px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.04);
}
.card-wide .card-progress-container {
height: 8px;
margin-top: 15px;
}
.card-tall { grid-row: span 2; min-height: 280px; justify-content: space-between; align-items: center; text-align: center; }
.card-tall .card-icon { width: 50px; height: 50px; font-size: 1.8rem; border-radius: 16px; margin: 10px auto 0; }
.card-tall .card-title { font-size: 1.25rem; font-weight: 800; margin-top: 5px; }
.card-tall .card-meta { display: flex; flex-direction: column; justify-content: center; flex: 1; padding: 10px 0; width: 100%; }
/* Tall Card Inside Elements */
.tracker-value-big, .counter-number {
font-size: 3.5rem;
font-weight: 900;
font-family: var(--font-mono);
color: var(--text);
line-height: 1;
text-shadow: 0 0 30px rgba(var(--card-color, 255,255,255), 0.3);
}
.tracker-unit, .counter-max {
font-size: 1.1rem;
font-weight: 700;
color: var(--muted);
margin-right: 4px;
}
.tracker-progress-wrap {
width: 100%;
height: 12px;
background: rgba(255,255,255,0.05);
border-radius: 99px;
margin: 15px 0 8px;
overflow: hidden;
}
.tracker-progress-fill {
height: 100%;
background: rgb(var(--card-color));
box-shadow: 0 0 15px rgba(var(--card-color), 0.5);
transition: width 0.4s ease;
}
.tracker-target-label {
font-size: 0.8rem;
color: var(--muted);
font-weight: 600;
}
.card-auto-height { height: auto !important; }
/* ─── FEATURED CARD (#31) — Hero/oversized variant for first pinned card ── */
.card.card-featured {
grid-column: span 2;
grid-row: span 2;
min-height: 320px;
padding: 28px 30px;
border-top-width: 3px;
background:
radial-gradient(circle at 20% 0%, rgba(var(--card-color, 167,139,250), 0.18) 0%, transparent 55%),
linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
border-color: rgba(var(--card-color, 167,139,250), 0.28);
box-shadow:
0 18px 50px rgba(0,0,0,0.55),
0 0 60px rgba(var(--card-color, 167,139,250), 0.18),
inset 0 1px 0 rgba(255,255,255,0.06);
position: relative;
}
.card.card-featured.pinned-card { border-color: rgba(var(--card-color, 167,139,250), 0.4); }
.card.card-featured::after,
.card.card-featured.pinned-card::after {
/* Subtle "FEATURED" ribbon corner */
content: '✦ مميز';
position: absolute;
top: 14px;
inset-inline-start: 16px;
padding: 4px 12px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(var(--card-color, 167,139,250), 0.32), rgba(var(--card-color, 167,139,250), 0.12));
border: 1px solid rgba(var(--card-color, 167,139,250), 0.45);
color: #fff;
font-family: var(--font-ar);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
z-index: 5;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
pointer-events: none;
animation: featRibbonShine 4s ease-in-out infinite;
}
@keyframes featRibbonShine {
0%, 100% { box-shadow: 0 0 0 0 rgba(var(--card-color, 167,139,250), 0); }
50% { box-shadow: 0 0 16px 2px rgba(var(--card-color, 167,139,250), 0.35); }
}
@media (prefers-reduced-motion: reduce) {
.card-featured { animation: none; }
}
.card-featured .card-icon {
width: 56px;
height: 56px;
font-size: 2rem;
border-radius: 18px;
background: rgba(var(--card-color, 167,139,250), 0.15);
border-color: rgba(var(--card-color, 167,139,250), 0.35);
box-shadow: 0 0 24px rgba(var(--card-color, 167,139,250), 0.3);
}
.card-featured .card-title {
font-size: 1.45rem;
font-weight: 800;
letter-spacing: -0.01em;
margin-top: 8px;
}
.card-featured .card-meta {
font-size: 0.92rem;
line-height: 1.65;
}
.card-featured .card-type-badge {
top: 20px;
inset-inline-end: 20px;
inset-inline-start: auto;
font-size: 0.68rem;
}
/* Hover treatment is more pronounced on featured */
.card-featured:hover {
transform: translateY(-6px) scale(1.005);
box-shadow:
0 26px 70px rgba(0,0,0,0.65),
0 0 80px rgba(var(--card-color, 167,139,250), 0.28);
}
@media (max-width: 700px) {
.card-featured {
grid-column: span 1;
grid-row: auto;
min-height: 220px;
padding: 20px 22px;
}
.card-featured::after { font-size: 0.62rem; padding: 3px 9px; }
.card-featured .card-icon { width: 46px; height: 46px; font-size: 1.6rem; }
.card-featured .card-title { font-size: 1.2rem; }
}
/* ─── BENTO MAGAZINE LAYOUT (#30) — varied rhythm ─────────── */
/* Larger min-height for tall cards; gives more vertical contrast */
.dash-grid .card-tall { min-height: 320px; }
/* Wider gap on desktop for clearer separation between bento blocks */
@media (min-width: 1100px) {
.dash-grid { gap: 22px; }
}
/* Every 7th non-featured card (when many cards exist) gets a subtle row span
to create magazine-style visual rhythm — but only on desktop */
@media (min-width: 1200px) {
.dash-grid .card-auto-height:nth-child(7n+5):not(.card-featured):not(.card-tall):not(.card-wide):not([data-type="link"]):not([data-type="status"]) {
grid-row: span 2;
min-height: 280px;
}
}
.card-icon{width:34px;height:34px;background:rgba(var(--card-color), 0.1);border:1px solid rgba(var(--card-color), 0.15);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:rgb(var(--card-color));line-height:1;}
.card-title{font-size:1.05rem;font-weight:700;color:var(--text);line-height:1.2;letter-spacing:0.2px;overflow-wrap:anywhere;word-break:break-word;}
.card-meta{font-size:0.75rem;color:var(--muted);font-weight:500;font-family:var(--font-ar);display:block;overflow-y:auto;white-space:normal;line-height:1.5;flex:1;scrollbar-width:none;padding-inline-end:2px;}
.card-meta::-webkit-scrollbar{display:none;}
.card-type-badge{position:absolute;top:24px;left:24px;font-size:.62rem;font-weight:600;font-family:var(--font-mono);letter-spacing:0.5px;text-transform:uppercase;color:rgb(var(--card-color));background:transparent;border:none;opacity:0.7;transition:opacity .2s;}
.card-type-badge::after { content: ' /'; opacity: 0.4; }
.card:hover .card-type-badge { opacity: 1; }
.card-actions{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:flex-end;gap:6px;opacity:0;transition:all .2s;background:linear-gradient(transparent, rgba(12,12,18,0.8) 40%);padding:20px 18px 14px;transform:translateY(10px);pointer-events:none;z-index:10;}
.card:hover .card-actions{opacity:1;transform:translateY(0);pointer-events:auto;}
/* Touch/coarse-pointer devices: action buttons reveal on hover/focus only,
so they never cover the card title. */
@media (hover: none), (pointer: coarse) {
.card-actions {
opacity: 0 !important;
transform: none !important;
pointer-events: none !important;
transition: opacity .18s ease !important;
}
.card:hover .card-actions,
.card:focus-within .card-actions,
.card.card-expanded .card-actions {
opacity: 1 !important;
pointer-events: auto !important;
}
}
/* Buttons inherit their .card-actions row's pointer-events — clickable only while the row is revealed */
.card-actions button { pointer-events: inherit; }
.card-more-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1rem;padding:4px 8px;border-radius:8px;transition:all .15s;letter-spacing:2px;line-height:1;}
.card-more-btn:hover{color:var(--text);background:rgba(255,255,255,0.08);}
.card-more-btn.active{color:var(--accent);background:rgba(139,92,246,0.12);}
.card-delete, .card-edit, .card-reset, .card-copy{background:rgba(var(--card-color),0.05);border:none;border-radius:6px;color:rgba(var(--card-color), 0.8);font-size:.7rem;cursor:pointer;transition:all .2s;padding:5px 12px;font-family:var(--font-ar);font-weight:600;}
.card-delete{color:var(--danger);background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.15);}
.card-delete:hover{color:#fff;background:rgba(239,68,68,0.7);}
.card-edit:hover, .card-reset:hover, .card-copy:hover{color:rgb(var(--card-color));background:rgba(var(--card-color), 0.15);}
.card-status-check-btn{
width: 34px;
min-width: 34px;
height: 34px;
padding: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
.card-status-check-btn svg { flex-shrink: 0; }
/* Card meta special types */
.card-meta-mono { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.countdown-live { color: rgb(var(--c-countdown)); font-weight: 700; font-size: 0.85rem; font-family: var(--font-mono); }
.countdown-hidden-text { display: none; }
.countdown-expired { color: var(--muted); font-style: italic; }
.countdown-progress { background: linear-gradient(90deg, rgb(var(--c-countdown)), rgba(var(--c-countdown),0.4)) !important; }
/* Countdown flip-clock tiles (days / hours / mins) */
.cd-flip-wrap {
display: inline-flex; align-items: center;
gap: 4px;
margin: 4px 0 2px;
}
.cd-flip-tile {
display: inline-flex; flex-direction: column; align-items: center;
padding: 4px 8px;
min-width: 38px;
background: linear-gradient(180deg,
rgba(234,179,8,0.14) 0%,
rgba(234,179,8,0.06) 50%,
rgba(234,179,8,0.1) 100%);
border: 1px solid rgba(234,179,8,0.22);
border-radius: 6px;
position: relative;
overflow: hidden;
}
.cd-flip-tile::after {
content: '';
position: absolute;
top: 50%; left: 0; right: 0; height: 1px;
background: rgba(0,0,0,0.4);
pointer-events: none;
}
.cd-flip-val {
font-family: var(--font-mono);
font-size: 1.05rem;
font-weight: 800;
color: rgb(var(--c-countdown));
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
transition: transform .3s;
}
.cd-flip-val.cd-flip-anim {
animation: cdFlipFlash .5s cubic-bezier(.2,.8,.25,1);
}
@keyframes cdFlipFlash {
0% { transform: rotateX(-80deg); opacity: 0; }
50% { transform: rotateX(0deg); opacity: 1; }
100% { transform: rotateX(0deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.cd-flip-val.cd-flip-anim { animation: none; opacity: 1; }
}
.cd-flip-lbl {
font-size: 0.55rem;
color: var(--muted);
font-weight: 600;
margin-top: 1px;
text-transform: lowercase;
letter-spacing: 0.02em;
}
.cd-flip-sep {
color: rgb(var(--c-countdown));
font-weight: 700;
font-size: 1rem;
opacity: 0.5;
animation: cdFlipColonBlink 1s ease-in-out infinite;
}
@keyframes cdFlipColonBlink {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.cd-flip-sep { animation: none; opacity: 0.7; }
}
.status-meta { display: flex; align-items: center; gap: 6px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.status-dot.online { background: rgb(var(--c-status)); box-shadow: 0 0 6px rgba(20, 184, 166, 0.7); }
.status-dot.offline { background: var(--danger); box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }
.status-dot.unknown { background: var(--muted); animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
@media (prefers-reduced-motion: reduce) {
.status-dot.unknown { animation: none; opacity: 0.5; }
}
.fab{position:fixed;bottom:32px;left:32px;width:60px;height:60px;border-radius:18px;background:var(--accent2);color:#fff;border:none;cursor:pointer;transition:all .4s cubic-bezier(0.16, 1, 0.3, 1);z-index:60;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 25px rgba(139, 92, 246, 0.4);}
.fab svg { width: 22px; height: 22px; }
.fab:hover{
transform: scale(1.08) rotate(90deg);
background: var(--accent2);
box-shadow: 0 14px 34px rgba(79, 172, 254, 0.34);
}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:200;animation:fadeIn .3s ease;cursor:pointer;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{background:rgba(11, 11, 17, 0.98);border:1px solid rgba(255,255,255,0.08);border-radius:24px;padding:24px;width:100%;max-width:460px;display:flex;flex-direction:column;gap:20px;box-shadow:0 40px 80px rgba(0,0,0,0.7);animation:fadeUp .4s cubic-bezier(0.16, 1, 0.3, 1);max-height:85vh;overflow-y:auto;backdrop-filter:blur(20px);}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.modal-header{border-bottom:1px solid var(--border);padding-bottom:16px;margin-bottom:-4px;}
.modal-header-actions{display:flex;align-items:center;gap:10px;}
.modal-box-sm { max-width: 380px; }
.modal-box-md { max-width: 420px; }
.modal-box-mdl { max-width: 440px; }
.modal-box-lg { max-width: 560px; }
.modal-field-hint { opacity: .55; font-weight: 400; }
.dim-hint { opacity: .55; }
.sep-muted { color: var(--muted); }
.caption-muted { color: var(--muted); font-size: 0.75rem; }
.muted { color: var(--muted); }
.form-note { font-size: 0.78rem; color: var(--muted); margin: 6px 0 12px; line-height: 1.55; }
.form-note-top { font-size: 0.78rem; color: var(--muted); margin-top: 4px; }
.info-box-accent { padding: 10px 14px; background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.2); border-radius: 10px; color: var(--text); font-size: 0.82rem; line-height: 1.8; }
.modal-header-row { display: flex; justify-content: space-between; align-items: flex-start; }
.loan-details { margin-top: 10px; }
.loan-details summary { font-size: 0.78rem; color: var(--muted); cursor: pointer; padding: 6px 0; }
.label-mt { margin-top: 8px; }
.text-teal { color: #59d8ff; }
.modal-input-stacked { margin-bottom: 8px; }
.btn-full { width: 100%; }
.modal-wc{font-size:0.72rem;}
.modal-title{font-size:1.4rem;font-weight:800;color:var(--text);margin-bottom:4px;}
.modal-subtitle{font-size:0.85rem;color:var(--muted);font-weight:500;}
.field-group{display:flex;flex-direction:column;gap:8px;text-align:right;}
.field-row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;}
.flex-1{flex:1 1 auto;min-width:0;}
.flex-2{flex:2 1 auto;min-width:0;}
.mt-md{margin-top:12px;}
.width-auto{width:auto;}
.fg-narrow{flex:0 1 clamp(80px,28vw,100px);min-width:0;}
.fg-narrow-wide{flex:0 1 clamp(100px,32vw,140px);min-width:0;}
@media (max-width:520px){
.field-row{gap:10px;}
.fg-narrow,.fg-narrow-wide{flex:1 1 100%;}
}
.center-align{align-items:center;text-align:center;}
.field-group label{font-size:.85rem;font-weight:700;color:#a1a1aa;font-family:var(--font-ar);letter-spacing:0.5px;}
.modal-label-spaced { margin-top: 12px; }
.modal-checkbox-label{ display: flex; align-items: center; gap: 8px; margin-top: 8px; cursor: pointer; }
.modal-input-row { display: flex; gap: 8px; align-items: center; }
.modal-input-flex { flex: 1; }
.modal-link-accent { color: #a78bfa; }
.modal-input{background:rgba(255,255,255,0.02);border:1px solid var(--border2);border-radius:14px;color:var(--text);padding:12px 16px;font-family:var(--font-ar);font-size:0.95rem;font-weight:500;outline:none;transition:border-color .2s, box-shadow .2s;width:100%;resize:none;}
.modal-input:focus{border-color:var(--accent2);background:rgba(79, 172, 254, 0.05);box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);}
.modal-input::placeholder{color:rgba(255,255,255,0.2);}
select.modal-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;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='%238c8c9a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 14px center;padding-left:36px;cursor:pointer;}
select.modal-input option{background:#1a1c23;color:var(--text);}
select.modal-input:focus{border-color:var(--accent2);background-color:rgba(139,92,246,0.05);}
.mono-input { font-family: var(--font-mono); font-size: 0.85rem; }
/* Filter dropdown */
.filter-select { background: rgba(255,255,255,0.03); border: 1px solid var(--border2); border-radius: 12px; color: var(--text); font-family: var(--font-ar); font-size: 0.9rem; font-weight: 700; padding: 8px 16px; cursor: pointer; outline: none; transition: all .2s; appearance: none; -webkit-appearance: none; 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='%238c8c9a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 10px center; padding-left: 32px; }
.filter-select:hover { border-color: var(--accent2); background-color: rgba(139,92,246,0.05); }
.filter-select:focus { border-color: var(--accent2); box-shadow: 0 0 0 3px rgba(139,92,246,0.1); background-color: rgba(139,92,246,0.05); }
.filter-select option { background: #18181c; color: var(--text); }
.icon-selection-wrapper { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.icon-display-btn {
width: 50px;
height: 50px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--border2);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
cursor: pointer;
transition: all .2s;
}
.icon-display-btn:hover { border-color: var(--accent2); background: rgba(79, 172, 254, 0.08); transform: translateY(-2px); }
.checklist-inputs-list { display: flex; flex-direction: column; gap: 8px; }
.checklist-input-row { display: flex; gap: 8px; align-items: center; animation: slideUp .2s ease; background: rgba(255,255,255,0.01); border: 1px solid transparent; padding: 4px; border-radius: 12px; transition: all 0.2s; }
.checklist-input-row:hover { background: rgba(255,255,255,0.03); border-color: var(--border); }
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.drag-handle { width: 28px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: grab; opacity: 0.3; transition: opacity 0.2s, color 0.2s; flex-shrink: 0; }
.checklist-input-row:hover .drag-handle { opacity: 0.8; }
.drag-handle:hover { opacity: 1 !important; color: var(--text); }
.drag-handle:active { cursor: grabbing; color: var(--accent2); }
.drag-handle svg { width: 14px; height: 14px; }
.checklist-input-row.sortable-ghost { opacity: 0.4; outline: 2px dashed var(--accent2); background: var(--surface); border-color: transparent; }
.checklist-input-row.sortable-drag { opacity: 1 !important; box-shadow: 0 10px 25px rgba(0,0,0,0.5); border-color: var(--accent2); cursor: grabbing; }
.btn-remove-item { width: 32px; height: 32px; flex-shrink: 0; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 8px; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: all .2s; }
.btn-remove-item:hover { color: var(--danger); border-color: var(--danger); background: rgba(239, 68, 68, 0.08); }
.btn-add-item { width: 100%; padding: 12px; background: none; border: 2px dashed var(--border2); border-radius: 14px; color: var(--accent2); font-family: var(--font-ar); font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px;}
.btn-add-item svg { width: 16px; height: 16px; }
.btn-add-item:hover { border-color: var(--accent2); background: rgba(79, 172, 254, 0.05); }
/* Subscription Multi-items */
.sub-item-row:hover .btn-remove-sub { opacity: 1; transform: scale(1.1); }
.sub-item-top { display: flex; gap: 8px; align-items: center; }
.btn-sub-icon-picker { width: 38px; height: 38px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer; transition: all 0.2s; flex-shrink: 0; }
.btn-sub-icon-picker:hover { background: rgba(255,255,255,0.08); border-color: var(--accent2); }
.sub-item-row .modal-input { padding: 8px 12px; font-size: 0.85rem; }
/* Dashboard Subscription Preview */
.subs-preview-list { display: flex; flex-direction: column; gap: 6px; width: 100%; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 8px; margin-top: 4px; }
.sub-item-preview { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 0.8rem; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.sub-item-preview:last-child { border-bottom: none; }
.sub-item-preview-empty { color: var(--muted); justify-content: center; }
.checklist-more-label { color: var(--muted); font-size: 0.72rem; }
.srv-port-dim { opacity: 0.5; }
.form-label-hint { color: var(--muted); font-size: 0.72rem; }
.label-optional { color: var(--muted); font-weight: 400; font-size: 0.78rem; }
.sub-preview-icon { width: 22px; height: 22px; background: rgba(255,255,255,0.04); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; }
.sub-item-preview-content { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sub-name { font-weight: 700; color: var(--text); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub-price { font-family: var(--font-mono); color: var(--accent2); font-weight: 700; align-self: flex-start; }
.sub-urgency { font-size: 0.7rem; font-weight: 800; padding: 2px 8px; border-radius: 6px; }
.sub-urgency.ok { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.sub-urgency.soon30 { background: rgba(234, 179, 8, 0.1); color: #eab308; }
.sub-urgency.soon7 { background: rgba(249, 115, 22, 0.1); color: #f97316; }
.sub-urgency.soon3 { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
.sub-urgency.overdue { background: var(--danger); color: white; }
/* Document Multi-items */
.doc-item-row { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; position: relative; animation: slideDown 0.3s ease; }
.btn-remove-doc { position: absolute; top: -8px; left: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--danger); border: none; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3); opacity: 0; transition: all 0.2s; z-index: 5; }
.doc-item-row:hover .btn-remove-doc { opacity: 1; transform: scale(1.1); }
.doc-item-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.vehicle-item-grid { display: grid; grid-template-columns: 0.9fr 1.3fr 1fr; gap: 10px; }
.medicine-item-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 10px; }
/* Dashboard Document Preview */
.docs-preview-list { display: flex; flex-direction: column; gap: 6px; width: 100%; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 8px; margin-top: 4px; }
.doc-item-preview { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.8rem; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.doc-item-preview:last-child { border-bottom: none; }
.doc-name { font-weight: 700; color: var(--text); text-align: right; width: 100%; white-space: normal; line-height: 1.3; }
.doc-urgency { font-size: 0.7rem; font-weight: 800; padding: 2px 8px; border-radius: 6px; }
.doc-urgency.safe { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.doc-urgency.warning { background: rgba(234, 179, 8, 0.1); color: #eab308; }
.doc-urgency.critical { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
.doc-urgency.expired { background: var(--danger); color: white; }
.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:16px;padding-top:16px;border-top:1px solid var(--border);}
.btn-cancel{padding:12px 24px;background:none;border:none;color:var(--muted);font-weight:700;cursor:pointer;font-family:var(--font-ar);font-size:0.95rem;transition:all .2s;}
.btn-cancel:hover{color:var(--text);}
.btn-save{padding:12px 36px;background:var(--accent2);border:none;border-radius:14px;color:#fff;font-family:var(--font-ar);font-size:1rem;font-weight:800;cursor:pointer;transition:all .2s;box-shadow:0 8px 20px rgba(79, 172, 254, 0.25);}
.btn-save:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 12px 28px rgba(79, 172, 254, 0.35);}
@media (max-width: 720px) {
.vehicle-item-grid,
.medicine-item-grid {
grid-template-columns: 1fr;
}
}
.emoji-picker-container {
background: #111116 !important;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--border2);
box-shadow: 0 30px 90px rgba(0,0,0,0.9);
width: 352px;
min-height: 450px;
line-height: 1.35;
animation: fadeUp .2s cubic-bezier(0.16,1,0.3,1);
display: flex;
flex-direction: column;
z-index: 99999 !important;
backdrop-filter: blur(20px);
}
/* Emoji Mart dark theme overrides */
em-emoji-picker {
--rgb-background: 26, 28, 35;
--rgb-input: 16, 16, 20;
--rgb-color: 255, 255, 255;
--rgb-accent: 79, 172, 254;
--border-radius: 12px;
width: 352px;
height: 420px;
}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--border2);}
/* Reorder mode — pick & place style */
@keyframes card-wiggle {
0% { transform: rotate(-0.6deg); }
50% { transform: rotate(0.6deg); }
100% { transform: rotate(-0.6deg); }
}
.card.reorder-active {
cursor: pointer;
border-color: rgba(139,92,246,0.35);
box-shadow: 0 2px 12px rgba(139,92,246,0.08);
position: relative;
user-select: none;
animation: card-wiggle 0.8s ease-in-out infinite;
transform-origin: center center;
}
/* Stagger so cards don't all wiggle in sync — feels more organic */
.card.reorder-active:nth-child(2n) { animation-delay: -0.18s; }
.card.reorder-active:nth-child(3n) { animation-delay: -0.38s; }
.card.reorder-active:nth-child(4n) { animation-delay: -0.10s; }
.card.reorder-active:nth-child(5n) { animation-delay: -0.52s; }
.card.reorder-active:nth-child(6n) { animation-delay: -0.25s; }
.card.reorder-active:hover {
border-color: var(--accent2);
box-shadow: 0 4px 20px rgba(139,92,246,0.2);
animation-play-state: paused; /* freeze wiggle on hover */
transform: translateY(-2px);
}
.card.reorder-active .card-actions,
.card.reorder-active:hover .card-actions { opacity: 0 !important; pointer-events: none; }
/* The card being "held" — stops wiggling, scales up */
.card.reorder-picked {
border-color: var(--accent2) !important;
box-shadow:
0 0 0 3px rgba(139,92,246,0.45),
0 0 0 6px rgba(139,92,246,0.18),
0 12px 36px rgba(139,92,246,0.32),
0 0 60px rgba(139,92,246,0.2) !important;
transform: scale(1.05) translateY(-2px) !important;
animation: reorder-picked-float 2.4s ease-in-out infinite !important;
z-index: 3;
position: relative;
}
.card.reorder-picked::before {
content: '';
position: absolute;
inset: -3px;
border-radius: inherit;
background: conic-gradient(from 0deg, rgba(139,92,246,0.4), rgba(45,212,191,0.4), rgba(139,92,246,0.4));
z-index: -1;
filter: blur(6px);
opacity: 0.7;
animation: reorder-picked-spin 3s linear infinite;
}
@keyframes reorder-picked-float {
0%, 100% { transform: scale(1.05) translateY(-2px) rotate(0deg) !important; }
50% { transform: scale(1.05) translateY(-5px) rotate(0.3deg) !important; }
}
@keyframes reorder-picked-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Target cards pulse when a card is picked */
.dash-grid.has-picked .card.reorder-active:not(.reorder-picked) {
border-color: rgba(139,92,246,0.5);
animation: card-wiggle 0.55s ease-in-out infinite, reorder-pulse 1.6s ease-in-out infinite;
cursor: cell;
}
.dash-grid.has-picked .card.reorder-active:not(.reorder-picked):hover {
border-color: #2dd4bf !important;
box-shadow:
0 0 0 2px rgba(45,212,191,0.45),
0 8px 28px rgba(45,212,191,0.28) !important;
transform: translateY(-3px) scale(1.02) !important;
animation-play-state: paused !important;
}
.dash-grid.has-picked .card.reorder-active:not(.reorder-picked):hover::after {
content: '⇄';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.2rem;
font-weight: 900;
color: #2dd4bf;
text-shadow: 0 0 18px rgba(45,212,191,0.6), 0 2px 6px rgba(0,0,0,0.5);
pointer-events: none;
z-index: 10;
animation: reorder-swap-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes reorder-swap-pop {
from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes reorder-pulse {
0%,100% { box-shadow: 0 2px 10px rgba(139,92,246,0.08); }
50% { box-shadow: 0 2px 18px rgba(139,92,246,0.22); }
}
@media (prefers-reduced-motion: reduce) {
.card.reorder-active { animation: none; }
.card.reorder-picked { animation: none !important; transform: scale(1.03) !important; }
.card.reorder-picked::before { animation: none; }
.dash-grid.has-picked .card.reorder-active:not(.reorder-picked) { animation: none; }
.dash-grid.has-picked .card.reorder-active:not(.reorder-picked):hover::after { animation: none; }
}
/* Position number badge */
.reorder-pos-badge {
position: absolute;
top: 8px;
left: 8px;
background: linear-gradient(135deg, rgba(139,92,246,0.22), rgba(45,212,191,0.12));
border: 1px solid rgba(139,92,246,0.35);
color: var(--accent2);
font-size: 0.68rem;
font-weight: 800;
border-radius: 6px;
padding: 2px 7px;
pointer-events: none;
box-shadow: 0 2px 8px rgba(139,92,246,0.18);
letter-spacing: 0.05em;
}
.card.reorder-picked .reorder-pos-badge {
background: linear-gradient(135deg, #8b5cf6, #2dd4bf);
color: #fff;
border-color: rgba(255,255,255,0.3);
box-shadow: 0 4px 12px rgba(45,212,191,0.4);
}
.sortable-ghost {
opacity: 0.45;
outline: 2px dashed var(--accent2);
outline-offset: -4px;
background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(45,212,191,0.05)) !important;
transform: scale(0.98);
box-shadow: none;
border-color: transparent;
animation: sortable-ghost-pulse 1.4s ease-in-out infinite;
}
.sortable-chosen { z-index: 100; }
.sortable-drag {
box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 2px var(--accent2) !important;
opacity: 0.94 !important;
transform: rotate(1.5deg) scale(1.03) !important;
cursor: grabbing !important;
}
@keyframes sortable-ghost-pulse {
0%, 100% { opacity: 0.35; }
50% { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
.sortable-ghost { animation: none; opacity: 0.45; }
}
/* Page view */
.page-view{position:fixed;inset:0;background:var(--bg);z-index:80;display:flex;flex-direction:column;animation:slideIn .4s cubic-bezier(0.16, 1, 0.3, 1);}
@keyframes slideIn{from{transform:translateX(60px);opacity:0}to{transform:translateX(0);opacity:1}}
@media (prefers-reduced-motion: reduce) {
.page-view { animation: none; }
.modal-overlay { animation: none; }
.modal-box { animation: none; }
}
.page-header {
position: relative;
display: flex;
align-items: center;
gap: 16px;
padding: 16px 24px 16px 130px; /* extra padding-left reserves space for the absolute back btn */
border-bottom: 1px solid var(--border);
background: var(--surface);
}
/* ─── BACK BUTTON RULE ─────────────────────────────────────────
Always pinned to the LEFT edge of the screen (regardless of RTL/LTR).
Chevron points right (RTL convention: "back" = الجهة اليمنى).
─────────────────────────────────────────────────────────────── */
.back-btn {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
/* Force LTR so the layout is icon-then-text regardless of RTL parent.
Result: [ < رجوع ] — chevron on the left, text on the right. */
direction: ltr;
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--text);
padding: 9px 16px;
border-radius: 10px;
cursor: pointer;
font-family: var(--font-ar);
font-weight: 600;
font-size: 0.92rem;
letter-spacing: 0;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease, color 0.18s ease;
}
.back-btn svg { flex-shrink: 0; opacity: 0.85; }
.back-btn:hover {
background: rgba(167, 139, 250, 0.10);
border-color: rgba(167, 139, 250, 0.35);
color: #f3f0ff;
}
.back-btn:hover svg { opacity: 1; }
.back-btn:active { transform: translateY(-50%) scale(0.96); }
.back-btn:focus-visible {
outline: 2px solid rgba(167, 139, 250, 0.7);
outline-offset: 3px;
}
@media (max-width: 640px) {
.page-header { padding: 12px 16px 12px 100px; gap: 10px; }
.back-btn { left: 10px; padding: 8px 12px; font-size: 0.85rem; }
.back-btn span { display: none; } /* icon-only on small screens to save space */
}
.page-heading{font-size:1.4rem;font-weight:800;color:var(--text);}
.page-empty { grid-column: 1/-1; text-align: center; color: var(--muted); font-size: 1rem; font-weight: 600; padding: 80px 0; }
.page-content{flex:1;padding:48px 40px;overflow-y:auto;background:var(--bg);}
.page-placeholder{color:var(--muted);font-size:1.1rem;font-weight:600;text-align:center;margin-top:120px;}
/* Checklist cards */
.card-checklist-preview{display:flex;flex-direction:column;gap:4px;margin-top:4px;}
.preview-item{font-size:.75rem;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.preview-item.done{text-decoration:line-through;opacity:0.5;}
.preview-dot{width:6px;height:6px;border-radius:50%;border:1px solid var(--muted);}
.preview-item.done .preview-dot{background:var(--accent);border-color:var(--accent);}
.card-progress-container{width:100%;height:4px;background:rgba(255,255,255,0.05);border-radius:2px;margin-top:auto;}
.card-container[data-type="countdown"] .card-progress-container { margin-top: 4px; }
.expense-live-preview .card-progress-container { margin: 6px 0 0; }
.card-progress-bar{height:100%;background:rgb(var(--card-color));border-radius:2px;transition:width .3s ease;}
.card-checklist-count { font-size: 0.7rem; color: var(--muted); margin-top: 4px; }
/* Checklist modal */
.checklist-items-container{display:flex;flex-direction:column;gap:12px;max-width:600px;margin:0 auto;}
.checklist-label-item{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--surface);border:1px solid var(--border);border-radius:16px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;}
.checklist-label-item:hover{border-color:var(--border2);background:rgba(255,255,255,0.02);}
.checklist-cb{width:22px;height:22px;border:2px solid var(--border2);border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;}
.checklist-label-item.done .checklist-cb{background:rgb(var(--c-checklist));border-color:rgb(var(--c-checklist));}
.checklist-cb::after{content:'✓';color:#000;font-size:14px;display:none;font-weight:900;}
.checklist-label-item.done .checklist-cb::after{display:block;}
.checklist-text{font-size:1.1rem;font-weight:500;color:var(--text);transition:all .2s;position:relative;}
.checklist-label-item.done .checklist-text{color:var(--muted);}
/* Strikethrough animation: draw a line from start to end */
.checklist-label-item .checklist-text::after {
content: '';
position: absolute;
top: 50%; inset-inline-start: 0;
height: 2px;
width: 0;
background: currentColor;
transform: translateY(-1px);
transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
opacity: 0.75;
}
.checklist-label-item.done .checklist-text::after {
width: 100%;
}
/* Just-toggled: pop checkbox + faint row flash */
.checklist-label-item.just-toggled.done .checklist-cb {
animation: cbCheck 0.42s cubic-bezier(0.22, 1.4, 0.36, 1);
}
.checklist-label-item.just-toggled.done {
animation: clRowFlash 0.5s ease-out;
}
@keyframes cbCheck {
0% { transform: scale(1); }
50% { transform: scale(1.35); }
100% { transform: scale(1); }
}
@keyframes clRowFlash {
0% { background: rgba(34, 197, 94, 0.08); }
100% { background: var(--surface); }
}
/* Ripple: expanding circle from click point */
.cl-ripple {
position: absolute;
top: 50%; inset-inline-start: 50%;
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(34, 197, 94, 0.35);
transform: translate(-50%, -50%);
pointer-events: none;
animation: clRippleExpand 0.55s ease-out forwards;
}
@keyframes clRippleExpand {
0% { opacity: 0.8; width: 8px; height: 8px; }
100% { opacity: 0; width: 320px; height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
.checklist-label-item.just-toggled.done .checklist-cb,
.checklist-label-item.just-toggled.done,
.cl-ripple { animation: none !important; }
.checklist-label-item .checklist-text::after { transition: none; }
}
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.close-btn { background: rgba(255,255,255,0.05); border: none; color: var(--muted); cursor: pointer; padding: 8px; border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.close-btn:hover { background: rgba(239, 68, 68, 0.15); color: var(--danger); transform: scale(1.05); }
.checklist-modal-box { max-width: 600px !important; padding: 24px 32px !important; }
.modal-content { max-height: 60vh; overflow-y: auto; padding-right: 8px; margin-top: 16px; margin-right: -8px; }
.modal-content::-webkit-scrollbar { width: 6px; }
.modal-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
.modal-content-center { align-items: center; text-align: center; gap: 12px; }
.modal-content-flush { padding: 0; gap: 0; }
.modal-intro-hint { color: var(--muted); font-size: 0.85rem; margin-bottom: 12px; }
.flex-row-gap-sm { display: flex; align-items: center; gap: 10px; }
.flex-row-gap-md { display: flex; align-items: center; gap: 12px; }
.modal-title-centered { min-width: 160px; text-align: center; }
.si-empty-hint { grid-column: 1/-1; text-align: center; color: var(--muted); padding: 20px; }
.icon-lg { font-size: 1.2rem; }
/* ─── SERVER MODAL ─────────────────────────────────────────── */
.server-fields { display: flex; flex-direction: column; gap: 12px; }
.server-field-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 12px; }
.server-field-label { font-size: 0.78rem; font-weight: 700; color: var(--muted); font-family: var(--font-ar); min-width: 64px; text-align: right; }
.server-field-val { flex: 1; font-family: var(--font-mono); font-size: 0.88rem; color: var(--text); word-break: break-all; }
.server-field-val.server-field-desc { font-family: var(--font-ar); font-size: 0.9rem; }
.copy-field-btn { background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.2); border-radius: 8px; color: var(--accent2); font-family: var(--font-ar); font-size: 0.75rem; font-weight: 700; padding: 5px 12px; cursor: pointer; transition: all .2s; flex-shrink: 0; }
.copy-field-btn:hover { background: rgba(139,92,246,0.2); border-color: var(--accent2); }
.server-ssh-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(139,92,246,0.06); border: 1px solid rgba(139,92,246,0.2); border-radius: 12px; }
.server-ssh-cmd { flex: 1; font-family: var(--font-mono); font-size: 0.88rem; color: rgb(var(--c-command)); word-break: break-all; }
/* ─── LINKGROUP MODAL ──────────────────────────────────────── */
.linkgroup-item { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 12px; text-decoration: none; transition: all .2s; margin-bottom: 8px; }
.linkgroup-item:hover { border-color: rgba(var(--c-linkgroup), 0.4); background: rgba(var(--c-linkgroup), 0.05); transform: translateX(-3px); }
.linkgroup-item-label { font-size: 1rem; font-weight: 700; color: var(--text); }
.linkgroup-item-url { font-size: 0.75rem; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ─── MARKDOWN MODAL ───────────────────────────────────────── */
.markdown-modal-box { max-width: 700px !important; }
.markdown-content { color: var(--text); line-height: 1.8; font-family: var(--font-ar); text-align: right; }
.markdown-content h1,.markdown-content h2,.markdown-content h3,.markdown-content h4,.markdown-content h5,.markdown-content h6 { color: var(--text); font-weight: 800; margin: 1.2em 0 0.5em; line-height: 1.3; }
.markdown-content h1 { font-size: 1.8rem; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.markdown-content h2 { font-size: 1.4rem; }
.markdown-content h3 { font-size: 1.15rem; }
.markdown-content p { margin: 0.8em 0; color: rgba(255,255,255,0.85); }
.markdown-content a { color: var(--accent2); text-decoration: underline; }
.markdown-content a:hover { color: var(--accent); }
.markdown-content strong { color: var(--text); font-weight: 800; }
.markdown-content em { color: rgba(255,255,255,0.7); font-style: italic; }
.markdown-content ul,.markdown-content ol { padding-inline-start: 1.5em; margin: 0.8em 0; }
.markdown-content li { margin: 0.4em 0; }
.markdown-content code { font-family: var(--font-mono); font-size: 0.85em; background: rgba(255,255,255,0.07); border: 1px solid var(--border2); border-radius: 6px; padding: 2px 6px; color: rgb(var(--c-command)); }
.markdown-content pre { background: rgba(0,0,0,0.4); border: 1px solid var(--border2); border-radius: 12px; padding: 16px; overflow-x: auto; margin: 1em 0; }
.markdown-content pre code { background: none; border: none; padding: 0; font-size: 0.88rem; color: rgb(var(--c-command)); }
.markdown-content blockquote { border-inline-start: 3px solid var(--accent2); padding-inline-start: 16px; color: var(--muted); margin: 1em 0; font-style: italic; }
.markdown-content hr { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; }
.markdown-content table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.markdown-content th,.markdown-content td { padding: 10px 14px; border: 1px solid var(--border2); text-align: right; }
.markdown-content th { background: rgba(255,255,255,0.04); font-weight: 700; }
/* ─── TOAST ────────────────────────────────────────────────── */
/* ─── QUICK ADD ────────────────────────────────────────────── */
.quick-add-trigger { display: flex; align-items: center; gap: 6px; color: var(--accent2) !important; border-color: rgba(139,92,246,0.3) !important; }
.quick-add-trigger.active { background: rgba(139,92,246,0.1) !important; border-color: var(--accent2) !important; }
.quick-add-trigger svg { flex-shrink: 0; }
.quick-add-panel {
position: fixed;
bottom: 80px;
right: 76px;
width: 300px;
background: #1a1a1f;
border: 1px solid var(--border2);
border-radius: 20px;
padding: 16px;
z-index: 300;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: 0 20px 50px rgba(0,0,0,0.6);
animation: fadeUp .25s cubic-bezier(0.16,1,0.3,1);
}
.quick-add-tabs { display: flex; gap: 4px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 12px; padding: 3px; }
.quick-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px; background: none; border: none; border-radius: 9px; color: var(--muted); font-family: var(--font-ar); font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: all .2s; }
.quick-tab:hover { color: var(--text); }
.quick-tab.active { background: var(--surface); color: var(--accent2); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.quick-input { background: rgba(255,255,255,0.03); border: 1px solid var(--border2); border-radius: 12px; color: var(--text); padding: 10px 14px; font-family: var(--font-ar); font-size: 0.9rem; font-weight: 500; outline: none; transition: all .2s; width: 100%; resize: none; }
.quick-input:focus { border-color: var(--accent2); background: rgba(139,92,246,0.05); }
.quick-input::placeholder { color: rgba(255,255,255,0.2); }
.quick-textarea { min-height: 64px; }
.quick-add-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 4px; }
.quick-cancel { background: none; border: none; color: var(--muted); font-family: var(--font-ar); font-size: 0.85rem; font-weight: 700; cursor: pointer; padding: 8px 12px; transition: color .2s; }
.quick-cancel:hover { color: var(--text); }
.quick-save { background: var(--accent2); border: none; border-radius: 10px; color: #fff; font-family: var(--font-ar); font-size: 0.88rem; font-weight: 800; padding: 8px 20px; cursor: pointer; transition: all .2s; box-shadow: 0 4px 14px rgba(139,92,246,0.3); }
.quick-save:hover { background: #7C3AED; transform: translateY(-1px); }
/* FAB stays bottom-left (already defined above with fixed positioning) */
.toast { position: fixed; bottom: 32px; right: 32px; background: var(--accent2); color: #fff; font-family: var(--font-ar); font-weight: 700; font-size: 0.9rem; padding: 12px 24px; border-radius: 14px; z-index: 9000; box-shadow: 0 8px 24px rgba(139,92,246,0.4); opacity: 0; transform: translateY(10px); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; max-width: 300px; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.celebration { background: linear-gradient(135deg, #f59e0b, #ef4444, #8b5cf6) !important; box-shadow: 0 8px 30px rgba(245,158,11,0.5) !important; animation: toastCelebrate .6s ease !important; font-size: 1rem !important; }
@keyframes toastCelebrate { 0%{transform:scale(0.8) translateY(10px)} 60%{transform:scale(1.05) translateY(-2px)} 100%{transform:scale(1) translateY(0)} }
@media (prefers-reduced-motion: reduce) {
.toast.celebration { animation: none !important; }
}
/* Reminder card urgency */
.reminder-info { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.reminder-urgency-badge { font-size: 0.65rem; font-weight: 800; font-family: var(--font-mono); padding: 2px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; }
.reminder-urgency-badge.overdue { background: rgba(239,68,68,0.2); color: var(--danger); border: 1px solid rgba(239,68,68,0.3); }
.reminder-urgency-badge.today { background: rgba(245,158,11,0.2); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }
.reminder-urgency-badge.tomorrow { background: rgba(34,211,117,0.15); color: #22d375; border: 1px solid rgba(34,211,117,0.25); }
.reminder-urgency-badge.soon { background: rgba(139,92,246,0.15); color: #8B5CF6; border: 1px solid rgba(139,92,246,0.25); }
.reminder-urgency-badge.future { background: rgba(255,255,255,0.05); color: var(--muted); border: 1px solid var(--border); }
.reminder-date { font-size: 0.7rem; color: var(--muted); font-family: var(--font-mono); }
.reminder-details-preview { font-size: 0.73rem; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Reminder done state */
.card-reminder-done { opacity: 0.45; }
.card-reminder-done .card-title { text-decoration: line-through; color: var(--muted); }
/* Subscription urgency */
.sub-badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:6px; font-size:0.7rem; font-weight:700; font-family:var(--font-mono); }
.sub-badge.overdue,.sub-badge.soon3 { background:rgba(239,68,68,0.15); color:var(--danger); }
.sub-badge.soon7 { background:rgba(249,115,22,0.15); color:#f97316; }
.sub-badge.soon30 { background:rgba(234,179,8,0.15); color:#eab308; }
.sub-badge.ok { background:rgba(52,211,153,0.15); color:#34d399; }
/* Document urgency */
.doc-badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:6px; font-size:0.7rem; font-weight:700; font-family:var(--font-mono); }
.doc-badge.expired,.doc-badge.critical { background:rgba(239,68,68,0.15); color:var(--danger); }
.doc-badge.warning { background:rgba(249,115,22,0.15); color:#f97316; }
.doc-badge.caution { background:rgba(234,179,8,0.15); color:#eab308; }
.doc-badge.safe { background:rgba(52,211,153,0.15); color:#34d399; }
.doc-holder { font-size:0.78rem; color:var(--muted); margin-top:2px; }
.sub-amount { font-family:var(--font-mono); font-size:0.85rem; color:var(--text); }
.sub-cycle { font-size:0.72rem; color:var(--muted); }
/* Document progress bar */
.doc-progress-wrap { width:100%; height:5px; background:rgba(255,255,255,0.06); border-radius:99px; overflow:hidden; margin-top:8px; }
.doc-progress-fill { height:100%; border-radius:99px; transition:width .4s ease; }
.doc-progress-fill.safe { background:#34d399; }
.doc-progress-fill.caution { background:#eab308; }
.doc-progress-fill.warning { background:#f97316; }
.doc-progress-fill.critical,.doc-progress-fill.expired { background:var(--danger); }
.doc-progress-pct { font-family:var(--font-mono); font-size:0.65rem; color:var(--muted); margin-top:3px; display:block; }
/* ─── Fields card ────────────────────────────────────────────── */
.card[data-type="fields"] .card-meta { display: block; overflow-y: auto; flex: 1; padding-right: 4px; }
.card[data-type="fields"] .card-meta::-webkit-scrollbar { width: 4px; }
.card[data-type="fields"] .card-meta::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
.card-fields-list { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
.card-field-row { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.card-field-label { font-size: 0.7rem; color: var(--muted); min-width: 72px; max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.card-field-value { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-field-copy { flex-shrink: 0; padding: 2px 9px; background: rgba(129,140,248,0.1); border: 1px solid rgba(129,140,248,0.25); border-radius: 6px; color: rgba(129,140,248,0.9); font-size: 0.68rem; font-family: var(--font-ar); cursor: pointer; transition: all .15s; line-height: 1.6; }
.card-field-copy:hover { background: rgba(129,140,248,0.25); border-color: rgba(129,140,248,0.6); color: #fff; }
/* Modal: fields input rows */
.fi-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.fi-row .modal-input { flex: 1; }
.fi-row .fi-label { flex: 0 0 130px; }
.fi-row .btn-remove-item { flex-shrink: 0; }
/* ─── Fields mode toggle ─── */
.fmode-bar { display: flex; gap: 6px; margin-bottom: 12px; }
.fmode-tab {
flex: 1;
-webkit-appearance: none; appearance: none;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 10px;
color: var(--muted);
font-family: var(--font-ar);
font-size: 0.83rem;
font-weight: 600;
padding: 7px 10px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.fmode-tab.active {
background: rgba(139,92,246,0.18);
border-color: rgba(139,92,246,0.5);
color: #c4b5fd;
}
/* ─── Grouped fields form ─── */
.fg-groups-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.fg-group { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 10px 12px; }
.fg-group-header { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.fg-group-name { flex: 1; font-weight: 700 !important; font-size: 0.92rem !important; padding: 8px 12px !important; }
.fg-group-remove { -webkit-appearance: none; appearance: none; background: none; border: none; color: rgba(239,68,68,0.55); cursor: pointer; padding: 4px 7px; border-radius: 7px; font-size: 0.85rem; flex-shrink: 0; }
.fg-group-remove:hover { background: rgba(239,68,68,0.1); color: var(--danger); }
.fg-group-remove:disabled { opacity: 0.2; pointer-events: none; }
.fg-sub-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.fg-sub-row { display: flex; gap: 6px; align-items: center; }
.fg-sub-row .fg-sub-label { flex: 0 0 120px; font-size: 0.83rem !important; padding: 7px 10px !important; }
.fg-sub-row .fg-sub-value { flex: 1; font-size: 0.83rem !important; padding: 7px 10px !important; }
.fg-sub-remove { -webkit-appearance: none; appearance: none; background: none; border: none; color: rgba(239,68,68,0.4); cursor: pointer; padding: 3px 6px; border-radius: 6px; font-size: 0.8rem; flex-shrink: 0; }
.fg-sub-remove:hover { color: var(--danger); background: rgba(239,68,68,0.08); }
.fg-sub-remove:disabled { opacity: 0.2; pointer-events: none; }
.fg-add-sub { -webkit-appearance: none; appearance: none; background: none; border: 1px dashed rgba(255,255,255,0.12); border-radius: 7px; color: var(--muted); font-family: var(--font-ar); font-size: 0.78rem; padding: 4px 12px; cursor: pointer; width: 100%; transition: border-color 0.15s, color 0.15s; }
.fg-add-sub:hover { border-color: rgba(139,92,246,0.4); color: #c4b5fd; }
.fg-preview-body { padding: 4px 0; }
.fg-preview-group { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.fg-preview-name { font-size: 0.8rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.fg-preview-fields { font-size: 0.72rem; color: var(--muted); }
.fv-group-section { margin-bottom: 12px; }
.fv-group-name { font-size: 0.82rem; font-weight: 700; color: #c4b5fd; padding: 4px 0 6px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 6px; text-align: right; }
/* ─── Records form ─── */
.fr-section-hdr {
font-size: 0.8rem;
font-weight: 600;
color: var(--muted);
margin-bottom: 7px;
margin-top: 12px;
text-align: right;
}
.fr-cols-list { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.fr-col-item { display: flex; align-items: center; gap: 5px; min-width: 120px; flex: 1; }
.fr-col-input { font-size: 0.85rem !important; padding: 8px 12px !important; }
.fr-col-remove {
-webkit-appearance: none; appearance: none;
background: none; border: none; color: rgba(239,68,68,0.6);
cursor: pointer; font-size: 0.85rem; padding: 4px 6px; border-radius: 6px;
flex-shrink: 0;
}
.fr-col-remove:hover { background: rgba(239,68,68,0.1); color: var(--danger); }
.fr-col-remove:disabled { opacity: 0.25; pointer-events: none; }
.fr-add-col { margin-bottom: 4px; }
.fr-rows-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.fr-row-item {
display: grid;
gap: 6px;
align-items: center;
grid-template-columns: var(--fr-cols-def, repeat(1, 1fr) 28px);
}
.fr-row-item .fr-cell { font-size: 0.88rem !important; padding: 8px 12px !important; }
.fr-row-remove {
-webkit-appearance: none; appearance: none;
background: none; border: none; color: rgba(239,68,68,0.5);
cursor: pointer; font-size: 0.85rem; padding: 4px; border-radius: 6px;
width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.fr-row-remove:hover { background: rgba(239,68,68,0.1); color: var(--danger); }
.fr-row-remove:disabled { opacity: 0.2; pointer-events: none; }
/* ─── Fields card preview (records mode) ─── */
.fr-preview-body { padding: 6px 0; }
.fr-preview-meta {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 6px; gap: 8px;
}
.fr-cols-preview { font-size: 0.72rem; color: var(--muted); }
.fr-count-badge {
font-size: 0.72rem; font-weight: 700; padding: 2px 7px;
background: rgba(139,92,246,0.15); border-radius: 999px; color: #c4b5fd;
white-space: nowrap;
}
.fr-preview-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.fr-preview-cell { display: flex; flex-direction: column; min-width: 70px; }
.fr-pcell-k { font-size: 0.68rem; color: var(--muted); font-weight: 600; }
.fr-pcell-v { font-size: 0.82rem; font-weight: 700; color: var(--text); }
/* ─── Fields detail view table ─── */
.fv-table-row {
display: grid;
gap: 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.fv-header-row { background: rgba(255,255,255,0.03); border-radius: 8px 8px 0 0; }
.fv-th {
padding: 8px 12px; font-size: 0.75rem; font-weight: 700;
color: var(--muted); text-align: right;
}
.fv-td {
padding: 9px 12px; font-size: 0.88rem; color: var(--text);
text-align: right; word-break: break-word;
}
.fv-data-row:hover { background: rgba(255,255,255,0.025); }
.fv-copy-row { font-size: 0.75rem !important; padding: 4px 8px !important; align-self: center; margin: 4px; }
/* Reminder overdue/today card glow + ambient pulse */
.card[data-urgency="overdue"] { border-color: rgba(239,68,68,0.25); animation: reminderPulseOverdue 2.6s ease-in-out infinite; }
.card[data-urgency="overdue"]:hover { border-color: rgba(239,68,68,0.5); box-shadow: 0 10px 24px rgba(0,0,0,0.4), 0 0 16px rgba(239,68,68,0.2); }
.card[data-urgency="today"] { border-color: rgba(245,158,11,0.25); animation: reminderPulseToday 3.4s ease-in-out infinite; }
.card[data-urgency="today"]:hover { border-color: rgba(245,158,11,0.5); box-shadow: 0 10px 24px rgba(0,0,0,0.4), 0 0 16px rgba(245,158,11,0.2); }
@keyframes reminderPulseOverdue {
0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.0), 0 6px 16px rgba(0,0,0,0.25); }
50% { box-shadow: 0 0 0 6px rgba(239,68,68,0.08), 0 6px 16px rgba(0,0,0,0.25), 0 0 24px rgba(239,68,68,0.25); }
}
@keyframes reminderPulseToday {
0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.0), 0 6px 16px rgba(0,0,0,0.25); }
50% { box-shadow: 0 0 0 4px rgba(245,158,11,0.06), 0 6px 16px rgba(0,0,0,0.25), 0 0 18px rgba(245,158,11,0.18); }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.card[data-urgency="overdue"],
.card[data-urgency="today"] { animation: none; }
}
/* Done button - always visible on reminder cards */
.reminder-done-row { margin-top: auto; padding-top: 8px; display: flex; justify-content: flex-end; }
.card-done-btn { background: rgba(34,211,117,0.1); border: 1px solid rgba(34,211,117,0.25); border-radius: 8px; color: #22d375; font-size: 0.72rem; font-weight: 800; font-family: var(--font-ar); padding: 5px 14px; cursor: pointer; transition: all .2s; }
.card-done-btn:hover { background: rgba(34,211,117,0.2); border-color: rgba(34,211,117,0.5); }
.card-undone-btn { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-size: 0.72rem; font-weight: 700; font-family: var(--font-ar); padding: 5px 14px; cursor: pointer; transition: all .2s; }
.card-undone-btn:hover { color: var(--text); background: rgba(255,255,255,0.08); }
/* ─── TRACKER CARD ──────────────────────────────────────────── */
.tracker-value-big { font-size: 2rem; font-weight: 800; color: rgb(var(--c-tracker)); font-family: var(--font-mono); line-height: 1; }
.tracker-unit { font-size: 0.8rem; color: var(--muted); margin-right: 4px; font-family: var(--font-ar); }
.tracker-progress-wrap { width: 100%; height: 6px; background: rgba(255,255,255,0.06); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.tracker-progress-fill { height: 100%; background: rgb(var(--c-tracker)); border-radius: 99px; transition: width .4s ease; }
.tracker-target-label { font-size: 0.7rem; color: var(--muted); margin-top: 3px; font-family: var(--font-mono); }
/* ─── WIFI CARD ─────────────────────────────────────────────── */
.wifi-name { font-size: 0.9rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.wifi-password-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.wifi-password-dots { font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); flex: 1; letter-spacing: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wifi-toggle-btn, .wifi-copy-btn { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.25); border-radius: 6px; color: rgb(var(--c-wifi)); font-size: 0.68rem; font-family: var(--font-ar); font-weight: 700; padding: 3px 8px; cursor: pointer; transition: all .2s; flex-shrink: 0; }
.wifi-toggle-btn:hover, .wifi-copy-btn:hover { background: rgba(34,197,94,0.2); border-color: rgb(var(--c-wifi)); }
/* ─── SEARCH HIGHLIGHT ──────────────────────────────────────── */
mark { background: rgba(139,92,246,0.25); color: var(--text); border-radius: 3px; padding: 0 2px; }
/* ─── MOBILE SIDEBAR BACKDROP ───────────────────────────────── */
.mobile-sidebar-backdrop {
position: fixed;
inset: 0;
background: rgba(5,6,12,0.55);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease;
z-index: 58; /* below header (60), above content */
}
body.mobile-sidebar-open .mobile-sidebar-backdrop {
opacity: 1;
pointer-events: auto;
}
@media (min-width: 901px) {
.mobile-sidebar-backdrop { display: none !important; }
}
/* ─── LOADING STATES ────────────────────────────────────────── */
/* Shared spinner — use anywhere via .
Inherits current font-color for the top arc so it blends with context. */
.ana-spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid rgba(255,255,255,0.18);
border-top-color: currentColor;
border-radius: 50%;
animation: anaSpin 0.75s linear infinite;
vertical-align: middle;
flex-shrink: 0;
}
.ana-spinner.ana-spinner-sm { width: 12px; height: 12px; border-width: 1.5px; }
.ana-spinner.ana-spinner-lg { width: 28px; height: 28px; border-width: 2.5px; }
@keyframes anaSpin { to { transform: rotate(360deg); } }
/* Inline loading row: جارٍ التحميل…
*/
.ana-loading {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--muted);
font-size: 0.88rem;
padding: 10px 14px;
border-radius: 10px;
background: rgba(255,255,255,0.03);
}
/* Shimmer skeleton blocks — use .ana-skel + a width class or inline style */
.ana-skel {
position: relative;
overflow: hidden;
background: rgba(255,255,255,0.06);
border-radius: 8px;
min-height: 14px;
}
.ana-skel::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.08) 45%,
rgba(255,255,255,0.14) 50%,
rgba(255,255,255,0.08) 55%,
rgba(255,255,255,0) 100%
);
animation: anaSkelShine 1.25s ease-in-out infinite;
transform: translateX(100%);
}
@keyframes anaSkelShine {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.ana-skel-line { height: 12px; }
.ana-skel-line-lg { height: 18px; }
.ana-skel-circle { border-radius: 50%; }
.ana-skel-block { min-height: 80px; border-radius: 12px; }
.ana-skel-stack { display: flex; flex-direction: column; gap: 10px; }
@media (prefers-reduced-motion: reduce) {
.ana-spinner, .ana-skel::after { animation: none; }
}
/* ─── EMPTY STATE ───────────────────────────────────────────── */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 64px 22px;
grid-column: 1 / -1;
text-align: center;
border-radius: 18px;
background:
radial-gradient(ellipse 60% 50% at 50% 0%, rgba(139,92,246,0.09), transparent 70%),
radial-gradient(ellipse 40% 40% at 80% 80%, rgba(45,212,191,0.06), transparent 70%),
linear-gradient(180deg, rgba(139,92,246,0.04) 0%, rgba(139,92,246,0) 70%);
animation: emptyStateIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
position: relative;
overflow: hidden;
}
.empty-state-pushed { margin-top: 40px; }
/* Soft orbiting halo behind the icon */
.empty-state::before {
content: '';
position: absolute;
top: 58px;
left: 50%;
width: 160px;
height: 160px;
margin-left: -80px;
border-radius: 50%;
background:
conic-gradient(from 0deg, rgba(139,92,246,0) 0deg, rgba(139,92,246,0.12) 90deg, rgba(45,212,191,0.12) 180deg, rgba(139,92,246,0) 270deg, rgba(139,92,246,0) 360deg);
filter: blur(18px);
animation: emptyStateHalo 9s linear infinite;
pointer-events: none;
opacity: 0.9;
}
@keyframes emptyStateHalo {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.empty-icon {
font-size: 2.8rem;
width: 76px;
height: 76px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 22px;
background:
radial-gradient(circle at 30% 30%, rgba(139,92,246,0.22), rgba(139,92,246,0.08) 60%),
rgba(139,92,246,0.06);
border: 1px solid rgba(139,92,246,0.26);
color: var(--accent2, #a78bfa);
box-shadow:
0 8px 24px rgba(139,92,246,0.18),
0 0 0 1px rgba(255,255,255,0.02) inset;
margin-bottom: 6px;
position: relative;
animation: emptyIconFloat 4s ease-in-out infinite;
z-index: 1;
}
.empty-icon::after {
content: '';
position: absolute;
inset: -6px;
border-radius: 26px;
background: radial-gradient(circle, rgba(139,92,246,0.2), transparent 65%);
filter: blur(10px);
opacity: 0.6;
z-index: -1;
animation: emptyIconPulse 3s ease-in-out infinite;
}
@keyframes emptyIconFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@keyframes emptyIconPulse {
0%, 100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
.empty-state,
.empty-icon, .empty-icon::after, .empty-state::before {
animation: none !important;
}
}
.empty-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--text);
margin: 0;
opacity: 0.82;
}
.empty-sub {
font-size: 0.85rem;
color: var(--muted);
margin: 0;
max-width: 360px;
line-height: 1.6;
}
.empty-state > button,
.empty-state .empty-cta {
margin-top: 14px;
padding: 10px 22px;
border-radius: 12px;
border: none;
background: var(--accent2, #8b5cf6);
color: #fff;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.empty-state > button:hover,
.empty-state .empty-cta:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(139,92,246,0.35);
}
@keyframes emptyStateIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Small / inline empty variants */
.empty-state.empty-state-sm { padding: 32px 16px; }
.empty-state.empty-state-compact { padding: 24px 12px; }
.empty-state.empty-state-sm .empty-icon { width: 56px; height: 56px; font-size: 2rem; border-radius: 16px; }
.empty-state.empty-state-sm .empty-title { font-size: 0.98rem; }
.empty-state.empty-state-sm .empty-sub { font-size: 0.8rem; }
/* ─── COLOR SWATCHES ────────────────────────────────────────── */
.color-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.color-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all .2s; }
.color-swatch:hover, .color-swatch.active { border-color: white; transform: scale(1.15); }
/* ─── MOBILE BOTTOM NAV ─────────────────────────────────────── */
.mobile-bottom-nav { display: none; }
/* ─── MOBILE SIDEBAR OVERLAY ────────────────────────────────── */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 49; backdrop-filter: blur(4px); }
.sidebar-overlay.show { display: block; }
/* ─── MODAL SCROLLING ───────────────────────────────────────── */
.modal-overlay { overflow-y: auto; }
/* ═══════════════════════════════════════════════════════════════
MOBILE REDESIGN — max-width: 768px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ─── 1. HEADER — simplified ──────────────────────────────── */
.dash-header {
height: 48px;
min-height: 48px;
padding: 0 10px;
}
.dash-header-right { gap: 6px; }
.dash-header-left { gap: 4px; }
/* Hide non-essential header items */
.header-section-label,
.header-section-label + .header-divider,
.header-date,
.header-time-pill,
.header-time-pill + div,
#edit-order-btn,
#quick-add-btn { display: none !important; }
/* Keep hamburger visible */
.mobile-menu-btn { display: flex; }
/* Logo smaller */
.dash-logo { font-size: 1.1rem; letter-spacing: 0.5px; }
/* Search: compact, expandable feel */
.header-search-wrap {
min-width: 0;
flex: 1;
height: 32px;
border-radius: 10px;
padding: 0 10px;
background: rgba(255,255,255,0.05);
}
.header-search-input { font-size: 0.82rem; }
.header-search-input::placeholder { font-size: 0.75rem; }
/* Dividers thinner on mobile */
.header-divider { height: 14px; margin: 0 2px; }
/* Settings/command buttons smaller */
.header-icon-btn { width: 32px; height: 32px; border-radius: 8px; }
/* ─── 2. BOTTOM NAV — app-style ───────────────────────────── */
.mobile-bottom-nav {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 64px;
z-index: 55;
background: rgba(13,13,17,0.98);
border-top: 1px solid var(--border);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
align-items: stretch;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mob-nav-btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
background: none;
border: none;
color: var(--muted);
font-family: var(--font-ar);
font-size: 0.68rem;
font-weight: 700;
cursor: pointer;
transition: color .15s;
padding: 6px 2px;
-webkit-tap-highlight-color: transparent;
position: relative;
}
.mob-nav-btn svg { width: 22px; height: 22px; }
.mob-nav-btn.active {
color: var(--accent2);
}
.mob-nav-btn.active::after {
content: '';
position: absolute;
top: 4px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 3px;
background: var(--accent2);
border-radius: 99px;
}
/* ─── 3. SIDEBAR — wider, cleaner ─────────────────────────── */
.sidebar {
position: fixed;
top: 0;
right: -300px;
height: 100vh;
height: 100dvh;
width: 280px;
z-index: 56;
transition: right .3s cubic-bezier(0.16,1,0.3,1);
padding-top: 56px;
padding-bottom: env(safe-area-inset-bottom, 16px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.sidebar.mobile-open { right: 0; }
.sidebar.expanded { width: 280px; }
/* Always show labels in mobile sidebar */
.sidebar .sidebar-label { display: block; }
.sidebar .sidebar-nav-btn,
.sidebar .sidebar-icon-btn {
width: 100%;
justify-content: flex-start;
gap: 14px;
padding: 0 18px;
border-radius: 12px;
height: 48px;
font-size: 0.9rem;
}
.sidebar .sidebar-nav-btn svg,
.sidebar .sidebar-icon-btn svg { width: 20px; height: 20px; }
/* Hide sidebar tooltips on mobile */
.sidebar .sidebar-icon-btn::before,
.sidebar .sidebar-nav-btn::before { display: none; }
.sidebar-top { display: none; }
.sidebar-filters { padding: 12px 10px; gap: 4px; }
.sidebar-bottom { padding: 12px 10px; gap: 4px; }
/* Show sidebar stats on mobile */
.sidebar .sidebar-stats { display: flex; }
/* Sidebar overlay better */
.sidebar-overlay { z-index: 55; }
.sidebar-overlay.show { display: block; }
/* ─── 4. MAIN CONTENT ─────────────────────────────────────── */
.main-content {
padding: 12px 10px;
padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px);
-webkit-overflow-scrolling: touch;
}
/* ─── 5. CARDS — single column, full width on mobile ──────── */
.dash-grid {
grid-template-columns: 1fr;
gap: 8px;
}
.card {
height: auto;
min-height: 160px;
padding: 14px;
border-radius: 16px;
-webkit-tap-highlight-color: transparent;
}
/* Active press effect instead of hover */
.card:active {
transform: scale(0.97);
transition: transform .1s;
}
.card:hover {
transform: none;
box-shadow: 0 12px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}
.card-icon { width: 30px; height: 30px; border-radius: 8px; font-size: 1.1rem; }
.card-title { font-size: 0.9rem; }
.card-meta { font-size: 0.72rem; }
.card-type-badge { font-size: 0.58rem; top: 16px; left: 16px; }
/* Card actions: always visible, compact */
.card-actions {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
padding: 12px 14px 10px;
}
.card-delete, .card-edit, .card-reset, .card-copy {
font-size: 0.68rem;
padding: 5px 10px;
border-radius: 6px;
}
/* ─── 6. MODALS — bottom sheet style ──────────────────────── */
.modal-overlay {
align-items: flex-end;
padding: 0;
}
.modal-box {
max-width: 100%;
width: 100%;
margin: 0;
border-radius: 20px 20px 0 0;
max-height: 92vh;
max-height: 92dvh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 20px 16px;
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
animation: mobileSlideUp .35s cubic-bezier(0.16,1,0.3,1);
}
@keyframes mobileSlideUp {
from { transform: translateY(100%); opacity: 0.5; }
to { transform: translateY(0); opacity: 1; }
}
/* Drag handle visual cue */
.modal-box::before {
content: '';
display: block;
width: 40px;
height: 4px;
background: rgba(255,255,255,0.15);
border-radius: 99px;
margin: 0 auto 14px;
}
/* Input fields bigger touch targets */
.modal-input {
padding: 14px 16px;
font-size: 0.95rem;
border-radius: 12px;
min-height: 46px;
}
select.modal-input { min-height: 46px; }
/* Modal actions sticky at bottom */
.modal-actions {
position: sticky;
bottom: 0;
background: rgba(24,24,28,0.98);
backdrop-filter: blur(12px);
margin: 16px -16px -16px;
padding: 14px 16px;
padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--border);
border-radius: 0;
z-index: 5;
}
.btn-save { width: 100%; text-align: center; padding: 14px; border-radius: 12px; font-size: 1rem; }
.btn-cancel { padding: 14px 20px; font-size: 0.95rem; }
/* Checklist modal */
.checklist-modal-box { max-width: 100% !important; padding: 20px 16px !important; }
/* ─── 7. QUICK ADD — bottom sheet ─────────────────────────── */
.quick-add-panel {
position: fixed !important;
right: 0 !important;
left: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100% !important;
border-radius: 20px 20px 0 0;
padding: 20px 16px;
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -10px 40px rgba(0,0,0,0.6);
animation: mobileSlideUp .3s cubic-bezier(0.16,1,0.3,1);
z-index: 200 !important;
}
.quick-add-panel::before {
content: '';
display: block;
width: 40px;
height: 4px;
background: rgba(255,255,255,0.15);
border-radius: 99px;
margin: 0 auto 12px;
}
.quick-input { padding: 14px; font-size: 0.95rem; border-radius: 12px; }
.quick-save { padding: 12px 24px; font-size: 0.95rem; border-radius: 12px; }
.quick-cancel { padding: 12px 16px; font-size: 0.9rem; }
.quick-tab { padding: 10px 14px; font-size: 0.85rem; }
/* ─── 8. PAGE VIEW ────────────────────────────────────────── */
.page-header { padding: 14px 16px; }
.page-content {
padding: 16px 10px;
padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px);
}
.page-heading { font-size: 1.2rem; }
.back-btn { padding: 8px 16px; font-size: 0.85rem; border-radius: 10px; }
/* ─── 9. FAB — hidden (bottom nav has add) ────────────────── */
.fab { display: none; }
/* ─── 10. TOASTS — top of screen ──────────────────────────── */
.toast {
bottom: auto !important;
top: 12px;
right: 12px;
left: 12px;
max-width: none;
text-align: center;
border-radius: 12px;
font-size: 0.85rem;
padding: 12px 16px;
}
/* ─── 11. EMOJI PICKER — full width ───────────────────────── */
.emoji-picker-container {
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100% !important;
border-radius: 16px 16px 0 0 !important;
}
em-emoji-picker { width: 100% !important; }
/* ─── 12. SETTINGS DRAWER — full width (now full-page, no-op) ── */
/* .settings-drawer { width: 100%; } — replaced by .settings-page */
/* ─── 13. TOOLBAR — simplified ────────────────────────────── */
.cards-toolbar { padding: 0 2px 6px; gap: 6px; }
.toolbar-btn { padding: 4px 6px; font-size: 0.7rem; }
.toolbar-btn span { display: none; }
.sort-select { font-size: 0.72rem; padding: 4px 6px; }
.toolbar-label { font-size: 0.68rem; }
/* ─── 14. CRITICAL ALERTS BAR — compact ───────────────────── */
.daily-summary { margin-bottom: 12px; border-radius: 12px; }
.crit-items-scroll { padding: 10px 12px; gap: 8px; }
.crit-item { width: 160px; padding: 8px 10px; border-radius: 10px; }
.crit-title { font-size: 0.72rem; }
/* ─── 15. SUBSCRIPTION / DOCUMENT VIEWS — bottom sheet ───── */
.sub-view-box,
.note-modal-box,
.markdown-modal-box { max-width: 100% !important; }
.sub-view-item { padding: 10px 12px; }
.sub-view-item-name { font-size: 0.88rem; }
.sub-view-amount { font-size: 0.95rem; }
/* ─── 16. CONTEXT MENU — full width bottom sheet ──────────── */
#card-context-menu {
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100%;
border-radius: 16px 16px 0 0;
padding-bottom: env(safe-area-inset-bottom, 8px);
}
/* ─── 17. SEARCH HISTORY ──────────────────────────────────── */
.search-history-drop { border-radius: 10px; }
/* ─── 18. SIDEBAR SEARCH BAR ──────────────────────────────── */
.sidebar-search-bar {
right: 0;
top: 48px;
height: 48px;
padding: 0 14px;
}
/* ─── 19. LOGIN — mobile friendly ─────────────────────────── */
.login-box { padding: 32px 24px; border-radius: 20px; }
.login-logo { font-size: 2.2rem; }
.pin-digit { width: 48px; height: 58px; font-size: 1.6rem; border-radius: 10px; }
.pin-inputs { gap: 8px; }
/* ─── 20. MISC TOUCH IMPROVEMENTS ─────────────────────────── */
/* Checklist items bigger */
.checklist-label-item { padding: 14px 16px; }
.checklist-cb { width: 24px; height: 24px; }
.checklist-text { font-size: 1rem; }
/* Scrollbar hidden on mobile */
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }
/* Disable hover effects (touch devices) */
@media (hover: none) {
.card:hover { transform: none; border-color: rgba(var(--card-color,255,255,255), 0.04); }
.sidebar-icon-btn:hover, .sidebar-nav-btn:hover { background: none; }
}
}
/* ─── EXTRA SMALL PHONES (< 380px) ──────────────────────────── */
@media (max-width: 380px) {
.dash-grid { grid-template-columns: 1fr; }
.card { min-height: 140px; }
.mob-nav-btn span { font-size: 0.6rem; }
.mob-nav-btn.mob-nav-add svg { width: 40px; height: 40px; margin-top: -12px; }
}
.mobile-menu-btn { display: none; width: 34px; height: 34px; border-radius: 10px; background: none; border: none; color: var(--muted); cursor: pointer; align-items: center; justify-content: center; transition: all .2s; }
.mobile-menu-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.mobile-sidebar-head { display: none; }
/* ─── NEW v19 STYLES ─────────────────────────────────────── */
/* Routine card type color */
:root { --c-routine: 251, 113, 133; --c-expense: 251, 113, 133; --c-contact: 168, 85, 247; }
.card[data-type="routine"] { --card-color: var(--c-routine); }
.card[data-type="expense"] { --card-color: var(--c-expense); }
.card[data-type="contact"] { --card-color: var(--c-contact); }
/* Tracker controls */
.tracker-controls { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; padding:6px 0 2px; border-top:1px solid var(--border); }
.tracker-btn { width:32px; height:32px; border-radius:10px; background:rgba(6,182,212,0.1); border:1px solid rgba(6,182,212,0.2); color:rgb(6,182,212); font-size:1.2rem; font-weight:700; cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:center; }
.tracker-btn:hover { background:rgba(6,182,212,0.25); }
.tracker-val-display { font-family:var(--font-mono); font-size:1rem; font-weight:700; color:var(--text); flex:1; text-align:center; }
/* Tracker card height auto */
.card[data-type="tracker"] { height:auto; min-height:185px; }
.card[data-type="tracker"] .card-meta { display:block; overflow:visible; }
/* Routine card height auto */
.card[data-type="routine"] { height:auto; min-height:185px; }
.card[data-type="routine"] .card-meta { display:block; overflow:visible; }
/* Pinned cards (.card already has position:relative at line 594) */
.card.pinned-card { border-color: rgba(251,191,36,0.3); }
.card.pinned-card::after { content:'📌'; position:absolute; top:10px; left:10px; font-size:0.75rem; opacity:0.7; pointer-events:none; }
.card-pin-btn { background:none; border:none; color:var(--muted); cursor:pointer; font-size:0.8rem; padding:4px 8px; border-radius:8px; transition:all .15s; }
.card-pin-btn:hover, .card-pin-btn.active { color:#fbbf24; }
/* Shortcuts overlay */
.shortcuts-overlay {
position: fixed; inset: 0;
background: rgba(5,6,12,0.72);
z-index: 9600;
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 20px;
animation: shortcutsFade 0.2s ease-out;
}
.shortcuts-overlay.hidden { display: none !important; }
@keyframes shortcutsFade { from { opacity: 0; } to { opacity: 1; } }
.shortcuts-box {
background: linear-gradient(180deg, rgba(24,22,36,0.98), rgba(15,13,26,0.98));
border: 1px solid rgba(139,92,246,0.22);
border-radius: 20px;
padding: 22px 24px 18px;
width: min(720px, 100%);
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
animation: shortcutsIn 0.25s ease-out;
}
@keyframes shortcutsIn {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.shortcuts-overlay { animation: none; }
.shortcuts-box { animation: none; }
}
.shortcuts-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.shortcuts-title {
display: inline-flex; align-items: center; gap: 10px;
font-weight: 700; font-size: 1.02rem; color: var(--text);
}
.shortcuts-title svg { color: var(--accent2, #a78bfa); }
.shortcuts-close {
width: 30px; height: 30px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
color: var(--muted); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: all 0.15s;
}
.shortcuts-close:hover {
background: rgba(239,68,68,0.14);
border-color: rgba(239,68,68,0.3);
color: #fca5a5;
}
.shortcuts-groups {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px 28px;
}
.shortcuts-group-title {
margin: 0 0 10px;
font-size: 0.78rem;
font-weight: 700;
color: var(--accent2, #a78bfa);
letter-spacing: 0.04em;
text-transform: none;
opacity: 0.85;
}
.shortcuts-list {
display: flex; flex-direction: column; gap: 8px;
}
.shortcut-row {
display: flex; justify-content: space-between; align-items: center; gap: 14px;
padding: 7px 10px;
border-radius: 9px;
transition: background 0.14s;
}
.shortcut-row:hover { background: rgba(139,92,246,0.06); }
.shortcut-row span {
color: var(--muted);
font-size: 0.86rem;
text-align: start;
flex: 1;
}
.shortcuts-foot {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.06);
font-size: 0.78rem;
color: var(--muted);
text-align: center;
opacity: 0.75;
}
kbd {
display: inline-block;
background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));
border: 1px solid rgba(255,255,255,0.14);
border-bottom-width: 2px;
border-radius: 6px;
padding: 2px 8px;
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 600;
color: var(--text);
min-width: 24px;
text-align: center;
line-height: 1.4;
box-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
/* Search count */
.search-count { font-size:0.72rem; color:var(--muted); white-space:nowrap; }
/* Sidebar count badges */
.sidebar-count { font-size:0.6rem; background:rgba(255,255,255,0.1); border-radius:99px; padding:1px 5px; color:var(--muted); font-family:var(--font-mono); min-width:16px; text-align:center; transition: background .3s, color .3s; }
.sidebar-count-urgent { background: rgba(239,100,80,0.25) !important; color: #ef6450 !important; font-weight:700; animation: pulseBadge 1.5s ease infinite; }
@keyframes pulseBadge { 0%,100%{opacity:1} 50%{opacity:0.5} }
@media (prefers-reduced-motion: reduce) {
.sidebar-count-urgent { animation: none; }
}
/* WiFi modal eye button */
.wifi-modal-eye-btn { width:42px; height:42px; flex-shrink:0; background:rgba(255,255,255,0.03); border:1px solid var(--border2); border-radius:12px; color:var(--muted); cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.wifi-modal-eye-btn:hover { border-color:rgb(var(--c-wifi)); color:rgb(var(--c-wifi)); }
/* ─── NEW v20 STYLES ─────────────────────────────────────── */
/* Counter card color */
:root { --c-counter: 251, 191, 36; }
.card[data-type="counter"] { --card-color: var(--c-counter); }
.card[data-type="counter"] { height:auto; min-height:185px; }
.card[data-type="counter"] .card-meta { display:block; overflow:visible; -webkit-line-clamp:unset; }
/* Counter display */
.counter-display { display:flex; align-items:baseline; gap:6px; justify-content:center; padding:12px 0 8px; cursor:pointer; user-select:none; }
.counter-number { font-family:var(--font-mono); font-size:2.8rem; font-weight:700; color:var(--text); line-height:1; transition:transform .1s; }
.counter-display:active .counter-number { transform:scale(0.92); }
.counter-max { font-family:var(--font-mono); font-size:1rem; color:var(--muted); }
/* Card duplicate button */
.card-text-copy { background:none; border:none; color:var(--muted); cursor:pointer; font-size:0.78rem; padding:5px 10px; border-radius:8px; transition:all .15s; white-space:nowrap; }
.card-text-copy:hover { color:var(--text); background:rgba(255,255,255,0.06); }
/* Card timestamp */
.card-timestamp { font-size:0.62rem; color:rgba(255,255,255,0.15); font-family:var(--font-mono); text-align:left; padding:4px 14px 6px; margin-top:-4px; }
.card-word-count { display:inline-block; font-size:0.6rem; color:rgba(255,255,255,0.2); font-family:var(--font-mono); margin-right:6px; vertical-align:middle; border:1px solid rgba(255,255,255,0.08); border-radius:4px; padding:0 4px; }
/* Card new highlight animation */
@keyframes cardHighlight { 0% { box-shadow:0 0 0 2px var(--accent2), 0 8px 30px rgba(0,0,0,0.3); } 100% { box-shadow:0 8px 30px rgba(0,0,0,0.3); } }
.card-new-highlight { animation:cardHighlight 1.2s ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
.card-new-highlight { animation: none; }
}
/* PIN Change Panel */
.pin-change-panel { position:fixed; z-index:200; background:var(--surface); border:1px solid var(--border2); border-radius:16px; padding:20px; width:280px; box-shadow:0 20px 50px rgba(0,0,0,0.7); display:flex; flex-direction:column; gap:10px; }
.pin-change-header { display:flex; justify-content:space-between; align-items:center; font-weight:700; margin-bottom:4px; }
.pin-change-header button { background:none; border:none; color:var(--muted); cursor:pointer; font-size:1.1rem; }
.pin-change-error { color:var(--danger); font-size:0.82rem; text-align:center; }
.settings-overlay { display: none; }
/* ══════════════════════════════════════════════════════════
Settings — macOS-style window (backdrop + centered shell)
══════════════════════════════════════════════════════════ */
/* Backdrop overlay */
.settings-page {
position: fixed;
inset: 0;
z-index: 9500;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 16px;
box-sizing: border-box;
}
.settings-page.hidden { display: none !important; }
/* Floating window */
.sp-shell {
display: flex;
flex-direction: row;
direction: rtl;
width: 100%;
max-width: 1120px; /* ↑ from 860 — more room for sidebar nav editor with chips */
height: min(760px, 92dvh); /* ↑ from 700 — taller for content */
background: var(--surface, #111118);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 0.5px rgba(255,255,255,0.05);
animation: spShellIn 0.2s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}
@keyframes spShellIn {
from { opacity: 0; transform: scale(0.95) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* ── Sidebar ──────────────────────────────────────── */
.sp-sidebar {
width: 210px;
flex-shrink: 0;
display: flex;
flex-direction: column;
border-left: 1px solid rgba(255,255,255,0.07);
background: rgba(255,255,255,0.025);
}
.sp-sidebar-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 14px 12px;
flex-shrink: 0;
}
.sp-sidebar-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--text);
margin: 0;
}
.sp-close-btn {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 7px;
color: var(--muted);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s;
flex-shrink: 0;
}
.sp-close-btn:hover { background: rgba(255,255,255,0.1); color: var(--text); }
/* Vertical nav list */
.sp-nav {
display: flex;
flex-direction: column;
gap: 2px;
padding: 4px 10px;
flex: 1;
}
.sp-tab {
display: flex;
flex-direction: row;
align-items: center;
gap: 9px;
padding: 9px 11px;
background: none;
border: none;
border-radius: 9px;
color: var(--muted);
font-family: var(--font-ar);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: background 0.12s, color 0.12s;
text-align: right;
width: 100%;
}
.sp-tab svg { opacity: 0.55; flex-shrink: 0; }
.sp-tab:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.sp-tab.active {
background: rgba(139, 92, 246, 0.13);
color: var(--accent2, #8b5cf6);
}
.sp-tab.active svg { opacity: 1; }
.sp-sidebar-footer {
padding: 12px 14px;
font-family: var(--font-en, monospace);
font-size: 0.7rem;
color: rgba(255,255,255,0.2);
border-top: 1px solid rgba(255,255,255,0.05);
flex-shrink: 0;
}
/* ── Content area ─────────────────────────────────── */
.sp-content {
flex: 1;
overflow-y: auto;
padding: 24px 26px;
direction: rtl;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.1) transparent;
min-width: 0;
}
.sp-content::-webkit-scrollbar { width: 5px; }
.sp-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 99px; }
/* Panes */
.sp-pane { display: none; }
.sp-pane.active { display: block; }
.sp-pane-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--text);
margin: 0 0 18px;
}
/* Section dividers */
.sp-section-title {
font-size: 0.7rem;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 22px 0 10px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sp-section-title:first-of-type { margin-top: 0; }
.sp-danger-title { color: rgba(239,68,68,0.55); }
/* Action cards grid (data tab) */
.sp-action-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 4px;
}
.sp-action-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 16px 10px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
color: var(--text);
font-family: var(--font-ar);
cursor: pointer;
transition: all 0.15s;
text-align: center;
}
.sp-action-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.15); }
.sp-action-card span { font-size: 0.82rem; font-weight: 600; }
.sp-action-card small { font-size: 0.67rem; color: var(--muted); }
.sp-action-card svg { opacity: 0.7; }
/* Drag handle for sidebar editor */
.sn-drag-handle {
cursor: grab;
color: rgba(255,255,255,0.2);
font-size: 1.1rem;
line-height: 1;
padding: 0 2px;
flex-shrink: 0;
user-select: none;
-webkit-user-select: none;
}
.sn-drag-handle:active { cursor: grabbing; }
.sn-item-ghost { opacity: 0.4; background: rgba(139,92,246,0.1) !important; }
/* ═══════════════════════════════════════════════════════════════
🔐 API KEYS MANAGEMENT — settings/apis tab
═══════════════════════════════════════════════════════════════ */
.sp-apis-intro {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(45,212,191,0.06));
border: 1px solid rgba(139,92,246,0.18);
border-radius: 14px;
margin-bottom: 16px;
}
.sp-apis-intro-icon {
font-size: 1.6rem;
filter: drop-shadow(0 0 8px rgba(139,92,246,0.4));
}
.sp-apis-intro-title {
font-size: 0.92rem;
font-weight: 700;
color: var(--text);
margin-bottom: 3px;
}
.sp-apis-intro-desc {
font-size: 0.74rem;
color: var(--muted);
line-height: 1.55;
}
.sp-apis-toolbar {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 14px;
}
.sp-apis-search-wrap {
position: relative;
display: flex;
align-items: center;
}
.sp-apis-search-icon {
position: absolute;
right: 12px;
color: var(--muted);
pointer-events: none;
}
.sp-apis-search {
flex: 1;
padding: 10px 38px 10px 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
font-family: var(--font-ar);
font-size: 0.82rem;
color: var(--text);
outline: none;
transition: all 0.15s;
}
.sp-apis-search:focus {
border-color: rgba(139,92,246,0.45);
background: rgba(255,255,255,0.07);
}
.sp-apis-cats {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.sp-apis-cat {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 999px;
color: var(--muted);
font-family: var(--font-ar);
font-size: 0.74rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.sp-apis-cat:hover {
background: rgba(255,255,255,0.06);
color: var(--text);
}
.sp-apis-cat.active {
background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(139,92,246,0.1));
border-color: rgba(139,92,246,0.45);
color: #fff;
}
.sp-apis-cat-icon { font-size: 0.85rem; }
.sp-apis-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.sp-apis-empty {
text-align: center;
padding: 40px 20px;
color: var(--muted);
}
.sp-apis-empty-icon { font-size: 2.4rem; margin-bottom: 10px; opacity: 0.5; }
.sp-apis-empty-title { font-size: 0.92rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.sp-apis-empty-desc { font-size: 0.74rem; }
.sp-api-card {
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 14px;
padding: 14px;
transition: all 0.2s;
}
.sp-api-card:hover {
border-color: rgba(255,255,255,0.12);
background: rgba(255,255,255,0.04);
}
.sp-api-card.enabled {
border-color: rgba(34,211,117,0.25);
box-shadow: 0 0 0 1px rgba(34,211,117,0.08), 0 6px 20px -12px rgba(34,211,117,0.3);
}
.sp-api-card.custom {
border-style: dashed;
}
.sp-api-head {
display: grid;
grid-template-columns: 40px 1fr auto;
gap: 12px;
align-items: flex-start;
margin-bottom: 12px;
}
.sp-api-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
}
.sp-api-meta { min-width: 0; }
.sp-api-name {
font-size: 0.93rem;
font-weight: 700;
color: var(--text);
margin-bottom: 3px;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.sp-api-custom-badge {
display: inline-block;
padding: 2px 7px;
background: rgba(167,139,250,0.18);
border: 1px solid rgba(167,139,250,0.35);
border-radius: 999px;
color: #c4b5fd;
font-size: 0.62rem;
font-weight: 700;
}
.sp-api-desc {
font-size: 0.73rem;
color: var(--muted);
line-height: 1.5;
margin-bottom: 4px;
}
.sp-api-usage {
font-size: 0.67rem;
color: rgba(139,92,246,0.9);
font-weight: 600;
}
.sp-api-status-wrap {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.sp-api-dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex-shrink: 0;
}
.sp-api-dot-ok {
background: #22d375;
box-shadow: 0 0 0 2px rgba(34,211,117,0.15), 0 0 8px rgba(34,211,117,0.5);
}
.sp-api-dot-fail {
background: #ef6450;
box-shadow: 0 0 0 2px rgba(239,100,80,0.18), 0 0 8px rgba(239,100,80,0.5);
}
.sp-api-dot-pending {
background: #f59e0b;
box-shadow: 0 0 0 2px rgba(245,158,11,0.18);
}
.sp-api-dot-empty {
background: rgba(255,255,255,0.12);
}
.sp-api-toggle {
position: relative;
display: inline-block;
width: 34px;
height: 18px;
flex-shrink: 0;
}
.sp-api-toggle input { opacity: 0; width: 0; height: 0; }
.sp-api-toggle-slider {
position: absolute;
inset: 0;
background: rgba(255,255,255,0.12);
border-radius: 999px;
cursor: pointer;
transition: background 0.18s;
}
.sp-api-toggle-slider::before {
content: '';
position: absolute;
top: 2px;
right: 2px;
width: 14px;
height: 14px;
background: #fff;
border-radius: 50%;
transition: transform 0.18s;
}
.sp-api-toggle input:checked + .sp-api-toggle-slider {
background: #22d375;
}
.sp-api-toggle input:checked + .sp-api-toggle-slider::before {
transform: translateX(-16px);
}
.sp-api-toggle input:disabled + .sp-api-toggle-slider {
opacity: 0.4;
cursor: not-allowed;
}
.sp-api-keyrow {
display: flex;
gap: 6px;
align-items: stretch;
margin-bottom: 10px;
}
.sp-api-input-wrap {
position: relative;
flex: 1;
}
.sp-api-input {
width: 100%;
padding: 9px 38px 9px 14px;
background: rgba(0,0,0,0.28);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 9px;
font-family: var(--font-mono);
font-size: 0.82rem;
color: var(--text);
outline: none;
letter-spacing: 0.02em;
transition: all 0.15s;
direction: ltr;
text-align: left;
}
.sp-api-input:focus {
border-color: rgba(139,92,246,0.5);
background: rgba(0,0,0,0.4);
box-shadow: 0 0 0 3px rgba(139,92,246,0.12);
}
.sp-api-eye {
position: absolute;
left: 6px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 6px;
color: var(--muted);
cursor: pointer;
transition: all 0.15s;
}
.sp-api-eye:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.sp-api-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 9px 12px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 9px;
color: var(--text);
font-family: var(--font-ar);
font-size: 0.77rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.sp-api-btn:hover:not(:disabled) {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.16);
}
.sp-api-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.sp-api-btn-test:hover:not(:disabled) {
background: rgba(34,211,117,0.1);
border-color: rgba(34,211,117,0.35);
color: #22d375;
}
.sp-api-btn-del {
padding: 9px 10px;
color: rgba(239,100,80,0.85);
}
.sp-api-btn-del:hover {
background: rgba(239,100,80,0.1);
border-color: rgba(239,100,80,0.35);
color: #ef6450;
}
.sp-api-foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.sp-api-status-msg {
font-size: 0.7rem;
color: var(--muted);
line-height: 1.4;
flex: 1;
min-width: 140px;
}
.sp-api-status-msg.ok { color: #22d375; font-weight: 600; }
.sp-api-status-msg.fail { color: #ef6450; font-weight: 600; }
.sp-api-status-msg.pending { color: #f59e0b; font-weight: 600; }
.sp-api-links {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.sp-api-link {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 10px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 7px;
color: var(--muted);
font-family: var(--font-ar);
font-size: 0.7rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.15s;
}
.sp-api-link:hover {
background: rgba(255,255,255,0.07);
color: var(--text);
border-color: rgba(255,255,255,0.12);
}
.sp-api-link-danger:hover {
background: rgba(239,100,80,0.1);
border-color: rgba(239,100,80,0.3);
color: #ef6450;
}
.sp-apis-add-custom {
width: 100%;
margin-top: 14px;
padding: 12px;
background: rgba(139,92,246,0.08);
border: 1px dashed rgba(139,92,246,0.35);
border-radius: 12px;
color: #c4b5fd;
font-family: var(--font-ar);
font-size: 0.84rem;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.18s;
}
.sp-apis-add-custom:hover {
background: rgba(139,92,246,0.14);
border-color: rgba(139,92,246,0.55);
color: #fff;
}
/* Custom API dialog */
.custom-api-dialog {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 9800;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.custom-api-dialog.hidden { display: none !important; }
.custom-api-shell {
width: 100%;
max-width: 440px;
background: var(--card, #15121e);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7);
animation: customApiIn 0.22s cubic-bezier(0.25, 1, 0.5, 1) both;
}
@keyframes customApiIn {
from { transform: translateY(12px) scale(0.97); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.custom-api-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 18px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.custom-api-head h3 {
font-size: 1.02rem;
font-weight: 700;
color: var(--text);
margin: 0;
}
.custom-api-close {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
color: var(--muted);
cursor: pointer;
transition: all 0.15s;
}
.custom-api-close:hover { background: rgba(255,255,255,0.1); color: var(--text); }
.custom-api-body {
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
max-height: 70vh;
overflow-y: auto;
}
.custom-api-label {
display: flex;
flex-direction: column;
gap: 5px;
}
.custom-api-label span {
font-size: 0.76rem;
font-weight: 600;
color: var(--muted);
}
.custom-api-label input {
padding: 9px 12px;
background: rgba(0,0,0,0.28);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 9px;
font-family: var(--font-ar);
font-size: 0.84rem;
color: var(--text);
outline: none;
transition: all 0.15s;
}
.custom-api-label input:focus {
border-color: rgba(139,92,246,0.5);
background: rgba(0,0,0,0.4);
box-shadow: 0 0 0 3px rgba(139,92,246,0.12);
}
.custom-api-foot {
display: flex;
gap: 10px;
padding: 14px 18px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.custom-api-cancel, .custom-api-save {
flex: 1;
padding: 10px;
border-radius: 9px;
font-family: var(--font-ar);
font-size: 0.84rem;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
}
.custom-api-cancel {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: var(--text);
}
.custom-api-cancel:hover { background: rgba(255,255,255,0.08); }
.custom-api-save {
background: linear-gradient(135deg, #a78bfa, #8b5cf6);
border: 1px solid rgba(139,92,246,0.5);
color: #fff;
box-shadow: 0 4px 12px -4px rgba(139,92,246,0.5);
}
.custom-api-save:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px -4px rgba(139,92,246,0.6);
}
@media (max-width: 640px) {
.sp-api-head { grid-template-columns: 36px 1fr; }
.sp-api-status-wrap { grid-column: 1 / -1; justify-self: flex-end; }
.sp-api-keyrow { flex-wrap: wrap; }
.sp-api-btn { flex: 1; justify-content: center; }
}
/* ── Mobile: full-screen, sidebar becomes top tab strip ── */
@media (max-width: 640px) {
.settings-page { padding: 0; align-items: flex-end; }
.sp-shell {
flex-direction: column;
max-width: 100%;
width: 100%;
height: 94dvh;
border-radius: 20px 20px 0 0;
animation: spShellInMobile 0.25s cubic-bezier(0.25, 1, 0.5, 1) both;
}
@keyframes spShellInMobile {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.sp-sidebar {
width: 100%;
border-left: none;
border-bottom: 1px solid rgba(255,255,255,0.07);
flex-direction: row;
align-items: center;
background: var(--surface);
}
.sp-sidebar-top { padding: 14px 14px 14px; border-bottom: none; flex-shrink: 0; }
.sp-sidebar-title { font-size: 0.88rem; }
.sp-nav {
flex-direction: row;
flex: 1;
padding: 6px 4px;
gap: 2px;
overflow-x: auto;
scrollbar-width: none;
}
.sp-nav::-webkit-scrollbar { display: none; }
.sp-tab {
flex-direction: column;
gap: 3px;
padding: 6px 10px;
font-size: 0.7rem;
white-space: nowrap;
flex-shrink: 0;
border-radius: 8px;
}
.sp-sidebar-footer { display: none; }
.sp-content { padding: 16px; }
.sp-action-grid { grid-template-columns: repeat(2, 1fr); }
}
.settings-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.settings-header span { font-size:1.1rem; font-weight:700; }
.settings-header button { background:none; border:none; color:var(--muted); cursor:pointer; font-size:1.1rem; }
.settings-list { display:flex; flex-direction:column; gap:4px; flex:1; }
.settings-item { display:flex; align-items:center; gap:12px; padding:14px 16px; background:none; border:none; border-radius:12px; color:var(--text); font-family:var(--font-ar); font-size:0.95rem; cursor:pointer; transition:all .15s; width:100%; text-align:right; }
.settings-item:hover { background:rgba(255,255,255,0.06); }
.settings-item.danger { color:var(--danger); }
.settings-item.danger:hover { background:rgba(239,68,68,0.08); }
.settings-footer { border-top:1px solid var(--border); padding-top:16px; display:flex; justify-content:space-between; align-items:center; }
.settings-footer span { font-family:var(--font-en); font-weight:700; font-size:0.9rem; }
.settings-section-title { font-size:0.72rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:1px; padding: 14px 16px 6px; border-top:1px solid var(--border); margin-top:4px; }
.settings-accent-row { display:flex; gap:10px; padding:6px 16px 12px; flex-wrap:wrap; }
.settings-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.flex-wrap-gap { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-label { font-size:0.9rem; color:var(--text); }
.settings-select-sm { width:auto; min-width:140px; padding:6px 14px; }
.settings-hint-flush { margin: 0 0 12px; }
.settings-hint-bottom { margin: 0 0 14px; }
.settings-hint-between { margin: 6px 0 14px; }
.settings-hint-top { margin: 8px 0 0; }
.settings-hint-sm { font-size: 0.78rem; margin: 8px 0 0; }
.accent-swatch {
width: 28px; height: 28px; border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
transition: all .2s;
position: relative;
}
.accent-swatch:hover { transform: scale(1.15); }
.accent-swatch.active { border-color: white; box-shadow: 0 0 0 3px rgba(255,255,255,0.15); }
.accent-swatch.active::after { content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:0.75rem; color:#fff; font-weight:900; }
/* ─── NEW v21 STYLES ─────────────────────────────────────── */
/* Expense card */
.expense-summary { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
.expense-row { display:flex; justify-content:space-between; align-items:center; font-size:0.8rem; }
.expense-row span:first-child { color:var(--muted); }
.expense-spent { font-family:var(--font-mono); font-weight:700; color:#f97316; }
.expense-remaining { font-family:var(--font-mono); font-weight:700; color:#34d399; }
.expense-remaining.negative { color:var(--danger); }
.card[data-type="expense"] { height:auto; min-height:185px; }
.card[data-type="expense"] .card-meta { display:block; overflow:visible; -webkit-line-clamp:unset; }
/* Progress bar urgency states */
.card-progress-bar.warning { background:#eab308; }
.card-progress-bar.critical { background:var(--danger); }
.card-progress-bar.safe { background:rgb(var(--card-color)); }
/* Contact card */
.contact-info { display:flex; flex-direction:column; gap:6px; }
.contact-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.contact-phone { font-family:var(--font-mono); font-size:0.9rem; direction:ltr; }
.contact-email { font-size:0.78rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.contact-note { font-size:0.75rem; color:var(--muted); }
.card[data-type="contact"] { height:auto; min-height:145px; }
.card[data-type="contact"] .card-meta { display:block; overflow:visible; -webkit-line-clamp:unset; }
/* Empty state quick create */
.empty-quick-create { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.empty-quick-btn { padding:8px 16px; background:rgba(255,255,255,0.05); border:1px solid var(--border2); border-radius:12px; color:var(--muted); font-family:var(--font-ar); font-size:0.85rem; cursor:pointer; transition:all .2s; }
.empty-quick-btn:hover { background:rgba(255,255,255,0.1); color:var(--text); }
/* ─── Pinned section separator ─────────────────────────────── */
.pinned-section-sep {
grid-column: 1 / -1;
height: 1px;
background: linear-gradient(to right, transparent, rgba(139,92,246,0.3), transparent);
margin: 4px 0;
position: relative;
}
.pinned-section-sep::before {
content: '📌 مثبّت';
position: absolute;
top: -9px;
right: 0;
font-size: 0.64rem;
font-weight: 700;
color: rgba(139,92,246,0.6);
font-family: var(--font-ar);
letter-spacing: 0.5px;
background: var(--bg);
padding: 0 8px;
}
/* ─── CRITICAL INFO BAR / NOTIFICATIONS ────────────────────────── */
/* Notifications Dropdown (Popover) */
.notif-dropdown {
position: fixed;
width: 340px;
max-height: 500px;
background: var(--surface);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 14px;
z-index: 9500;
display: flex;
flex-direction: column;
box-shadow: 0 18px 48px rgba(0,0,0,0.7);
font-family: var(--font-ar);
animation: notifIn 0.14s ease-out both;
bottom: auto;
top: auto;
left: auto;
right: auto;
}
.notif-dropdown.hidden { display: none !important; }
@keyframes notifIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.notif-dropdown { animation: none; }
}
.notif-dropdown-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
border-bottom: 1px solid rgba(255,255,255,0.08);
font-weight: 600;
font-size: 0.95rem;
}
.notif-close-btn {
background: none;
border: none;
color: var(--text);
font-size: 1.2rem;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.6;
transition: opacity 0.15s;
}
.notif-close-btn:hover { opacity: 1; }
.notif-dropdown-body {
flex: 1;
overflow-y: auto;
padding: 8px;
display: flex;
flex-direction: column;
gap: 4px;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.notif-dropdown-body::-webkit-scrollbar { width: 6px; }
.notif-dropdown-body::-webkit-scrollbar-track { background: transparent; }
.notif-dropdown-body::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.12);
border-radius: 3px;
}
.notif-dropdown-body::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.2);
}
.notif-empty {
text-align: center;
padding: 24px 12px;
color: var(--muted);
font-size: 0.85rem;
}
.notif-item {
width: 100% !important;
margin: 0 !important;
}
/* Individual alert card */
.crit-item {
flex-shrink: 0;
width: 190px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
padding: 10px 12px;
cursor: pointer;
transition: transform .15s, border-color .15s, box-shadow .15s;
}
.crit-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.crit-header {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 8px;
}
.crit-icon { font-size: 1rem; flex-shrink: 0; }
.crit-title {
flex: 1;
font-size: 0.78rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crit-badge {
font-size: 0.68rem;
font-weight: 700;
font-family: var(--font-mono);
padding: 2px 7px;
border-radius: 99px;
white-space: nowrap;
flex-shrink: 0;
}
/* Progress bar */
.crit-bar-track {
height: 5px;
background: rgba(255,255,255,0.06);
border-radius: 99px;
overflow: hidden;
}
.crit-bar-fill {
height: 100%;
border-radius: 99px;
transition: width .8s cubic-bezier(.16,1,.3,1);
background: var(--crit-bar-color, var(--accent));
}
/* Urgency color variants */
.crit-danger { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.05); }
.crit-danger:hover { border-color: rgba(239,68,68,0.5); box-shadow: 0 6px 20px rgba(239,68,68,0.12); }
.crit-danger .crit-title { color: #fca5a5; }
.crit-badge-danger { background: rgba(239,68,68,0.18); color: #f87171; }
.crit-warn { border-color: rgba(234,179,8,0.3); background: rgba(234,179,8,0.04); }
.crit-warn:hover { border-color: rgba(234,179,8,0.5); box-shadow: 0 6px 20px rgba(234,179,8,0.1); }
.crit-warn .crit-title { color: #fde68a; }
.crit-badge-warn { background: rgba(234,179,8,0.18); color: #fbbf24; }
.crit-info { border-color: rgba(59,130,246,0.3); background: rgba(59,130,246,0.04); }
.crit-info:hover { border-color: rgba(59,130,246,0.5); }
.crit-badge-info { background: rgba(59,130,246,0.18); color: #93c5fd; }
.crit-success { border-color: rgba(34,211,117,0.3); background: rgba(34,211,117,0.04); }
.crit-success:hover { border-color: rgba(34,211,117,0.5); box-shadow: 0 6px 20px rgba(34,211,117,0.1); }
.crit-success .crit-title { color: #6ee7b7; }
.crit-badge-success { background: rgba(34,211,117,0.18); color: var(--accent); }
.crit-muted { border-color: var(--border); }
.crit-badge-muted { background: rgba(255,255,255,0.06); color: var(--muted); }
/* Legacy chip classes kept for backward compatibility */
.summary-chip { display: none; }
.chip-danger,.chip-warn,.chip-success,.chip-info,.chip-muted { display: none; }
/* ─── Link Card Favicon ────────────────────────────────────── */
.link-meta-row { display: flex; align-items: center; gap: 6px; }
.link-favicon { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; opacity: 0.85; }
.link-url-text { font-size: 0.82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-meta-card { display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 0; position: relative; }
.link-domain-chip {
width: fit-content;
max-width: 100%;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(118, 149, 188, 0.12);
background: rgba(255,255,255,0.03);
color: rgba(191, 202, 219, 0.8);
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.05em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
}
.link-path-chip {
margin-inline-start: 4px;
opacity: 0.55;
font-size: 0.64rem;
}
.link-proto-dot {
width: 6px; height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.link-proto-dot.link-proto-secure { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.5); }
.link-proto-dot.link-proto-insecure { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.5); }
/* ── LINK HOVER PREVIEW (desktop only) ────────────────────── */
.link-hover-preview {
position: absolute;
bottom: calc(100% + 12px);
inset-inline-start: 0;
min-width: 220px;
max-width: 320px;
padding: 14px 16px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(20, 18, 32, 0.96), rgba(30, 26, 46, 0.96));
border: 1px solid rgba(139, 92, 246, 0.35);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(139, 92, 246, 0.2);
display: flex;
align-items: center;
gap: 12px;
opacity: 0;
transform: translateY(8px) scale(0.96);
pointer-events: none;
transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1.3, 0.36, 1);
z-index: 50;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.link-preview-fav {
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
padding: 4px;
flex-shrink: 0;
}
.link-preview-text { flex: 1; min-width: 0; }
.link-preview-domain {
font-size: 0.84rem;
font-weight: 700;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.link-preview-path {
font-size: 0.68rem;
color: rgba(191, 202, 219, 0.6);
font-family: var(--font-mono);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 2px;
}
.link-preview-cta {
font-size: 0.7rem;
color: #a78bfa;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
background: rgba(139, 92, 246, 0.12);
white-space: nowrap;
}
/* Desktop hover reveal */
@media (hover: hover) and (min-width: 900px) {
.card[data-type="link"]:hover .link-hover-preview,
.card.link-dash-card:hover .link-hover-preview {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Position for dashboard-style link card (tooltip appears above card) */
.card.link-dash-card .link-hover-preview {
top: 100%;
bottom: auto;
inset-inline-start: 50%;
transform: translate(-50%, 8px) scale(0.96);
margin-top: 10px;
}
@media (hover: hover) and (min-width: 900px) {
.card.link-dash-card:hover .link-hover-preview {
transform: translate(-50%, 0) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.link-hover-preview { transition: none; }
}
.card.link-dash-card .card-actions {
position: absolute;
top: 10px;
left: 10px;
right: auto;
bottom: auto;
z-index: 4;
display: flex;
gap: 4px;
opacity: 0;
transition: opacity 0.18s;
background: none;
padding: 0;
pointer-events: none;
}
.card.link-dash-card:hover .card-actions {
opacity: 1;
pointer-events: auto;
}
.card.link-dash-card .card-actions button {
background: rgba(0,0,0,0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
border-radius: 8px;
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
padding: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
cursor: pointer;
}
.card.link-dash-card .card-actions .card-delete:hover { background: rgba(239,68,68,0.6); }
.card.link-dash-card .card-actions .card-edit:hover { background: rgba(139,92,246,0.7); }
.card.link-dash-card .card-actions .card-more-btn,
.card.link-dash-card .card-actions .card-move-btn {
letter-spacing: 0;
}
/* ─── Note View Modal ──────────────────────────────────────── */
.note-modal-box { max-width: 500px; }
.note-view-content {
white-space: pre-wrap;
font-family: var(--font-ar);
font-size: 0.95rem;
line-height: 1.8;
color: var(--text);
background: rgba(255,255,255,0.03);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px;
max-height: 400px;
overflow-y: auto;
direction: rtl;
text-align: right;
}
.modal-footer-actions {
padding: 12px 20px 16px;
border-top: 1px solid var(--border);
display: flex;
justify-content: flex-end;
}
.btn-copy-all-fields {
background: rgba(139,92,246,0.1);
border: 1px solid rgba(139,92,246,0.25);
color: var(--accent2);
border-radius: 10px;
padding: 8px 18px;
font-family: var(--font-ar);
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
transition: all .15s;
}
.btn-copy-all-fields:hover { background: rgba(139,92,246,0.2); }
/* ─── Contact Card Meta ────────────────────────────────────── */
.contact-meta { display: flex; flex-direction: column; gap: 4px; }
.contact-phone-meta { font-family: var(--font-mono); font-size: 0.88rem; direction: ltr; unicode-bidi: embed; }
.contact-email-meta { font-size: 0.78rem; color: var(--muted); }
.contact-action-btn { text-decoration: none; display: inline-flex; align-items: center; }
/* ─── Expense Card Meta ────────────────────────────────────── */
.expense-summary-meta { display: flex; align-items: baseline; gap: 4px; }
.expense-spent-meta { font-size: 1.3rem; font-weight: 800; color: var(--text); font-family: var(--font-mono); }
.expense-sep-meta { color: var(--muted); font-size: 0.85rem; }
.expense-budget-meta { font-size: 0.82rem; color: var(--muted); }
.card-progress-bar.expense-over { background: var(--danger); }
/* ─── Expense Modal ────────────────────────────────────────── */
.expense-view-header { padding: 4px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.expense-view-header ~ .card-progress-container,
.expense-view-totals ~ .card-progress-container { margin: 10px 0; }
.expense-view-totals { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.expense-view-spent { font-size: 2rem; font-weight: 800; color: var(--text); font-family: var(--font-mono); }
.expense-view-slash { color: var(--muted); }
.expense-view-budget { font-size: 1rem; color: var(--muted); }
.expense-view-remaining { font-size: 0.85rem; color: var(--accent); font-weight: 600; }
.expense-view-remaining.over { color: var(--danger); }
.expense-items-list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.expense-item-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: rgba(255,255,255,0.03); border-radius: 8px; border: 1px solid var(--border); }
.expense-item-name { font-size: 0.88rem; color: var(--text); }
.expense-item-amount { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent2); font-weight: 600; }
/* ─── EXPENSE LIVE PREVIEW ────────────────────────────────── */
.expense-live-preview {
background: rgba(74,222,128,0.06);
border: 1px solid rgba(74,222,128,0.15);
border-radius: 10px;
padding: 10px 14px;
margin-top: 6px;
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
}
.expense-live-spent { font-weight: 700; color: var(--accent); }
.expense-live-budget { color: var(--muted); }
/* ─── DRAFT INDICATOR ────────────────────────────────────── */
.draft-indicator {
font-size: 0.68rem;
color: var(--accent2);
opacity: 0.7;
font-family: var(--font-ar);
padding: 2px 6px;
border-radius: 5px;
background: rgba(139,92,246,0.08);
border: 1px solid rgba(139,92,246,0.2);
animation: pulseFade 2s ease infinite;
}
@keyframes pulseFade { 0%,100%{opacity:.5} 50%{opacity:1} }
/* ─── SIDEBAR STATS ──────────────────────────────────────── */
.sidebar-stats {
padding: 10px 14px;
border-top: 1px solid var(--border);
margin-top: auto;
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
}
.sidebar-stat-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 8px;
border-radius: 8px;
font-size: 0.75rem;
gap: 8px;
}
.sidebar-stat-row.danger { background: rgba(239,100,80,0.08); }
.sidebar-stat-row.success { background: rgba(34,211,117,0.06); }
.sidebar-stat-label { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.sidebar-stat-val { font-family: var(--font-mono); color: var(--text); font-size: 0.72rem; flex-shrink: 0; }
.sidebar-stat-row.danger .sidebar-stat-val { color: #ef6450; }
.sidebar-stat-row.success .sidebar-stat-val { color: var(--accent); }
/* When sidebar is collapsed, hide stats */
.sidebar:not(.expanded) .sidebar-stats { display: none; }
/* ─── FOCUS MODE ─────────────────────────────────────────── */
body.focus-mode .dash-header { transform: translateY(-100%); opacity: 0; transition: all .4s ease; pointer-events: none; }
body.focus-mode .sidebar { transform: translateX(100%); opacity: 0; transition: all .4s ease; pointer-events: none; }
body.focus-mode .main-content { margin-right: 0 !important; padding-top: 20px; transition: all .4s ease; }
body.focus-mode .fab { bottom: 24px; }
body:not(.focus-mode) .dash-header,
body:not(.focus-mode) .sidebar { transition: all .3s ease; }
/* ─── CARDS TOOLBAR ──────────────────────────────────────── */
.cards-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4px 8px;
gap: 10px;
}
.cards-toolbar-right { display: flex; align-items: center; gap: 8px; }
.cards-toolbar-left { display: flex; align-items: center; gap: 6px; }
.toolbar-label { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.sort-select {
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--muted);
font-size: 0.75rem;
font-family: var(--font-ar);
padding: 4px 8px;
cursor: pointer;
outline: none;
transition: border-color .2s, color .2s;
direction: rtl;
}
.sort-select:hover { border-color: var(--border2); color: var(--text); }
.sort-select:focus { border-color: var(--accent); color: var(--text); }
.sort-select option { background: #1e1e24; }
.toolbar-btn {
display: flex;
align-items: center;
gap: 5px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--muted);
font-size: 0.73rem;
font-family: var(--font-ar);
padding: 4px 10px;
cursor: pointer;
transition: all .2s;
white-space: nowrap;
}
.toolbar-btn:hover { border-color: var(--border2); color: var(--text); background: rgba(255,255,255,0.07); }
.toolbar-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(34,211,117,0.08); }
@media(max-width:600px) {
.toolbar-btn span, .sort-select { display: none; }
.toolbar-btn { padding: 5px 7px; }
}
/* ─── MOVE TO PAGE MODAL ─────────────────────────────────── */
.move-page-list { display: flex; flex-direction: column; gap: 6px; }
.move-page-btn {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 16px;
color: var(--text);
font-size: 0.88rem;
font-family: var(--font-ar);
cursor: pointer;
transition: all .2s;
text-align: right;
width: 100%;
}
.move-page-btn:hover { background: rgba(139,92,246,0.08); border-color: rgba(139,92,246,0.3); color: var(--accent2); }
.move-page-icon { font-size: 1.1rem; }
.move-page-name { flex: 1; }
.move-page-arrow { color: var(--muted); font-size: 1rem; }
.move-no-pages { color: var(--muted); font-size: 0.82rem; text-align: center; padding: 20px; line-height: 1.7; }
/* ─── NOTE EDIT ──────────────────────────────────────────── */
.note-edit-area {
width: 100%;
min-height: 200px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--border);
border-radius: 12px;
color: var(--text);
font-family: var(--font-ar);
font-size: 0.9rem;
line-height: 1.75;
padding: 14px;
resize: vertical;
outline: none;
transition: border-color .2s;
}
.note-edit-area:focus { border-color: var(--accent2); }
.note-word-count {
font-size: 0.7rem;
color: var(--muted);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.note-edit-toggle-btn {
background: rgba(255,255,255,0.06);
border: 1px solid var(--border);
border-radius: 7px;
color: var(--muted);
font-size: 0.85rem;
padding: 3px 8px;
cursor: pointer;
transition: all .2s;
}
.note-edit-toggle-btn:hover { color: var(--accent2); border-color: var(--accent2); background: rgba(139,92,246,0.08); }
.btn-note-save {
background: rgba(34,211,117,0.12);
border: 1px solid rgba(34,211,117,0.3);
border-radius: 8px;
color: var(--accent);
font-size: 0.8rem;
font-family: var(--font-ar);
padding: 6px 14px;
cursor: pointer;
transition: all .2s;
}
.btn-note-save:hover { background: rgba(34,211,117,0.22); }
/* ─── CARD TAGS ──────────────────────────────────────────── */
.card-tags-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 5px;
}
.card-tag {
font-size: 0.65rem;
padding: 2px 7px;
border-radius: 99px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
color: var(--muted);
cursor: pointer;
transition: all .15s;
font-family: var(--font-ar);
}
.card-tag:hover { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.3); color: var(--accent2); }
/* Tags bar */
.type-filters-bar {
display: flex;
align-items: center;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding: 0 0 10px;
}
.type-filters-bar::-webkit-scrollbar { display: none; }
.type-filter-chip {
display: inline-flex;
align-items: center;
gap: 7px;
flex-shrink: 0;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
border-radius: 99px;
color: var(--muted);
font-size: 0.74rem;
font-family: var(--font-ar);
font-weight: 600;
padding: 6px 12px;
cursor: pointer;
transition: all .15s;
}
.type-filter-chip:hover {
background: rgba(59,130,246,0.08);
border-color: rgba(59,130,246,0.25);
color: var(--text);
}
.type-filter-chip.active {
background: rgba(59,130,246,0.12);
border-color: rgba(59,130,246,0.38);
color: #c8ecff;
box-shadow: 0 10px 24px rgba(7, 15, 30, 0.22);
}
.type-filter-icon {
font-size: 0.85rem;
line-height: 1;
opacity: 0.9;
}
.type-filter-label {
white-space: nowrap;
}
.type-filter-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
padding: 2px 7px;
border-radius: 999px;
background: rgba(255,255,255,0.07);
color: var(--text);
font-size: 0.68rem;
font-family: var(--font-mono);
line-height: 1;
}
.type-filter-chip.active .type-filter-count {
background: rgba(68, 200, 255, 0.16);
color: #7dd3fc;
}
.tags-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
padding: 0 4px 10px;
}
.tags-bar-label { font-size: 0.72rem; color: var(--muted); padding-left: 2px; flex-shrink: 0; }
.tag-filter-chip {
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
border-radius: 99px;
color: var(--muted);
font-size: 0.72rem;
font-family: var(--font-ar);
padding: 3px 10px;
cursor: pointer;
transition: all .15s;
}
.tag-filter-chip:hover { background: rgba(139,92,246,0.1); border-color: rgba(139,92,246,0.3); color: var(--accent2); }
.tag-filter-chip.active { background: rgba(139,92,246,0.15); border-color: var(--accent2); color: var(--accent2); font-weight: 700; }
.tag-filter-clear {
background: rgba(239,68,68,0.08);
border: 1px solid rgba(239,68,68,0.2);
border-radius: 99px;
color: var(--danger);
font-size: 0.7rem;
font-family: var(--font-ar);
padding: 3px 10px;
cursor: pointer;
transition: all .15s;
}
.tag-filter-clear:hover { background: rgba(239,68,68,0.15); }
/* Tag suggestions */
.tag-suggestions {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 6px 0 2px;
}
.tag-sug-btn {
background: rgba(255,255,255,0.05);
border: 1px solid var(--border);
border-radius: 99px;
color: var(--muted);
font-size: 0.75rem;
font-family: var(--font-ar);
padding: 3px 10px;
cursor: pointer;
transition: all .15s;
}
.tag-sug-btn:hover { background: rgba(139,92,246,0.1); border-color: rgba(139,92,246,0.3); color: var(--accent2); }
/* Tags field in modal */
.tags-field-group { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 4px; }
/* ─── CARD MOVE BTN ──────────────────────────────────────── */
.card-move-btn {
background: rgba(139,92,246,0.08);
border: 1px solid rgba(139,92,246,0.2);
border-radius: 6px;
color: var(--accent2);
font-size: 0.7rem;
padding: 3px 7px;
cursor: pointer;
transition: all .15s;
font-family: var(--font-en);
}
.card-move-btn:hover { background: rgba(139,92,246,0.18); }
/* ─── LIST VIEW MODE ─────────────────────────────────────── */
/* ─── COMPACT DENSITY MODE ──────────────────────────────── */
.dash-grid.compact-mode {
gap: 8px !important;
}
.dash-grid.compact-mode .card {
padding: 10px 14px;
}
.dash-grid.compact-mode .card-icon { font-size: 1.1rem; }
.dash-grid.compact-mode .card-title { font-size: 0.83rem; }
.dash-grid.compact-mode .card-meta { font-size: 0.72rem; }
.dash-grid.compact-mode .card-type-badge { font-size: 0.6rem; padding: 1px 5px; }
.dash-grid.compact-mode .card-timestamp { display: none; }
.dash-grid.compact-mode .card-actions button { font-size: 0.68rem !important; padding: 3px 6px !important; }
/* Spacious mode — generous breathing room */
.dash-grid.spacious-mode,
#page-grid.spacious-mode {
gap: 28px !important;
padding: 8px 4px;
}
.dash-grid.spacious-mode .card,
#page-grid.spacious-mode .card {
padding: 26px 28px;
border-radius: 22px;
min-height: 200px;
}
.dash-grid.spacious-mode .card-icon,
#page-grid.spacious-mode .card-icon {
font-size: 1.7rem;
margin-bottom: 8px;
}
.dash-grid.spacious-mode .card-title,
#page-grid.spacious-mode .card-title {
font-size: 1.18rem;
line-height: 1.4;
margin-bottom: 8px;
}
.dash-grid.spacious-mode .card-meta,
#page-grid.spacious-mode .card-meta {
font-size: 0.92rem;
line-height: 1.55;
}
.dash-grid.spacious-mode .card-type-badge,
#page-grid.spacious-mode .card-type-badge {
font-size: 0.74rem;
padding: 4px 10px;
}
@media (min-width: 1100px) {
.dash-grid.spacious-mode { gap: 32px !important; }
.dash-grid.spacious-mode .card-auto-height { min-height: 220px; }
}
body.density-spacious .dash-grid {
max-width: 1500px;
margin: 0 auto;
}
/* ─── WiFi QR Modal ────────────────────────────────────────── */
.wifi-qr-box { max-width: 320px; }
.wifi-qr-canvas { display: flex; justify-content: center; align-items: center; padding: 12px; background: rgba(255,255,255,0.04); border-radius: 16px; border: 1px solid var(--border); }
.wifi-qr-canvas img, .wifi-qr-canvas canvas { border-radius: 8px; }
.wifi-qr-ssid { font-weight: 700; font-size: 1rem; color: var(--text); margin-top: 4px; }
.wifi-qr-hint { font-size: 0.78rem; color: var(--muted); max-width: 220px; line-height: 1.5; }
.wifi-qr-btn { font-size: 0.72rem !important; padding: 3px 8px !important; background: rgba(34,197,94,0.1) !important; border: 1px solid rgba(34,197,94,0.3) !important; color: #22c55e !important; border-radius: 6px !important; }
.wifi-qr-btn:hover { background: rgba(34,197,94,0.2) !important; }
/* ─── Reminder Detail Modal ────────────────────────────────── */
.reminder-detail-date {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
color: var(--accent2);
background: rgba(139,92,246,0.08);
border: 1px solid rgba(139,92,246,0.2);
border-radius: 10px;
padding: 6px 14px;
margin-bottom: 12px;
font-family: var(--font-ar);
}
.reminder-detail-date::before { content: '📅 '; }
.reminder-detail-body {
font-size: 0.9rem;
line-height: 1.75;
color: var(--text);
white-space: pre-wrap;
background: rgba(255,255,255,0.03);
border-radius: 10px;
padding: 14px;
border: 1px solid var(--border);
}
/* ─── CODE CARD ──────────────────────────────────────────── */
.card[data-type="code"] { border-right-color: rgba(var(--c-code), 0.7) !important; }
.card[data-type="code"] .card-type-badge { background: rgba(var(--c-code), 0.12); color: rgb(var(--c-code)); }
.code-preview-wrap { margin-top: 4px; }
.code-lang-tag {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.65rem;
padding: 1px 7px;
border-radius: 6px;
background: rgba(var(--c-code), 0.15);
color: rgb(var(--c-code));
margin-bottom: 5px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.code-preview {
font-family: var(--font-mono);
font-size: 0.72rem;
line-height: 1.55;
color: rgba(255,255,255,0.75);
white-space: pre;
overflow: hidden;
max-height: 64px;
text-overflow: ellipsis;
direction: ltr;
text-align: left;
}
.code-more { color: var(--muted); font-style: italic; font-size: 0.65rem; }
.code-modal-textarea {
font-family: var(--font-mono) !important;
font-size: 0.82rem !important;
direction: ltr;
text-align: left;
line-height: 1.6;
resize: vertical;
}
/* ─── COMMAND PALETTE ─────────────────────────────────────── */
.cmd-palette {
position: fixed; inset: 0; z-index: 9000;
background: rgba(0,0,0,0.6);
display: flex; align-items: flex-start; justify-content: center;
padding-top: clamp(60px, 10vh, 120px);
backdrop-filter: blur(4px);
animation: fadeInFast .12s ease;
}
@keyframes fadeInFast { from { opacity:0 } to { opacity:1 } }
.cmd-box {
width: min(680px, 94vw);
background: #1a1a20;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
animation: cmdSlideIn .15s cubic-bezier(0.16,1,0.3,1);
}
@keyframes cmdSlideIn { from { transform:translateY(-14px) scale(0.98); opacity:0 } to { transform:none; opacity:1 } }
@media (prefers-reduced-motion: reduce) {
.cmd-palette { animation: none; }
.cmd-box { animation: none; }
}
.cmd-search-row {
display: flex; align-items: center; gap: 10px;
padding: 14px 18px;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.cmd-search-icon { flex-shrink: 0; color: var(--muted); }
.cmd-input {
flex: 1; background: transparent; border: none; outline: none;
color: var(--text); font-size: 1.05rem; font-family: var(--font-ar);
direction: rtl;
}
.cmd-esc-hint {
font-size: 0.68rem; padding: 2px 7px; border-radius: 5px;
background: rgba(255,255,255,0.06); color: var(--muted);
font-family: var(--font-mono); flex-shrink: 0;
}
.cmd-results {
max-height: 380px; overflow-y: auto;
padding: 6px 0;
}
.cmd-group-label {
font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
color: var(--muted); text-transform: uppercase;
padding: 8px 18px 4px;
}
.cmd-item {
display: flex; align-items: center; gap: 12px;
padding: 9px 18px; cursor: pointer;
transition: background .12s;
}
.cmd-item:hover, .cmd-active {
background: rgba(255,255,255,0.05);
}
.cmd-icon {
font-size: 1.1rem; width: 26px; text-align: center; flex-shrink: 0;
}
.cmd-label { font-size: 0.9rem; flex: 1; }
.cmd-item-body { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.cmd-sub { font-size: 0.73rem; color: var(--muted); }
.cmd-kbd {
font-size: 0.65rem; padding: 2px 6px; border-radius: 5px;
background: rgba(255,255,255,0.06); color: var(--muted);
font-family: var(--font-mono); flex-shrink: 0;
}
.cmd-type-badge {
font-size: 0.65rem; padding: 2px 8px; border-radius: 99px;
background: rgba(255,255,255,0.07); color: var(--muted);
flex-shrink: 0;
}
.cmd-empty {
padding: 24px 18px; text-align: center;
color: var(--muted); font-size: 0.9rem;
}
.cmd-footer {
display: flex; gap: 16px; padding: 8px 18px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.cmd-hint { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--muted); }
.cmd-hint kbd { font-size: 0.65rem; padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,0.07); font-family: var(--font-mono); }
/* ─── BULK SELECT ─────────────────────────────────────────── */
.bulk-bar {
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
z-index: 800; display: flex; align-items: center; gap: 12px;
background: #0F0F16; border: 1px solid rgba(255,255,255,0.12);
border-radius: 50px; padding: 10px 16px;
box-shadow: 0 8px 32px rgba(0,0,0,0.6);
animation: slideUpIn .2s cubic-bezier(0.16,1,0.3,1);
}
@keyframes slideUpIn { from { transform: translateX(-50%) translateY(20px); opacity:0 } to { transform: translateX(-50%) translateY(0); opacity:1 } }
.bulk-close-btn {
background: transparent; border: none; color: var(--muted);
cursor: pointer; font-size: 0.85rem; padding: 2px 4px;
border-radius: 50%; transition: color .15s;
}
.bulk-close-btn:hover { color: var(--text); }
.bulk-count { font-size: 0.82rem; color: var(--text); white-space: nowrap; font-weight: 600; }
.bulk-actions { display: flex; gap: 8px; }
.bulk-act-btn {
background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
color: var(--text); border-radius: 50px; padding: 5px 14px;
font-size: 0.8rem; cursor: pointer; transition: all .15s;
font-family: var(--font-ar);
}
.bulk-act-btn:hover:not(:disabled) { background: rgba(255,255,255,0.15); }
.bulk-act-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.bulk-act-danger { color: #f87171 !important; border-color: rgba(248,113,113,0.25) !important; }
.bulk-act-danger:hover:not(:disabled) { background: rgba(248,113,113,0.12) !important; }
.card.bulk-selectable { cursor: crosshair !important; }
.card.card-selected {
border-color: var(--accent) !important;
box-shadow: 0 0 0 2px var(--accent), 0 4px 24px rgba(0,0,0,0.3) !important;
background: rgba(34,211,117,0.06) !important;
}
.card.card-selected::before {
content: '✓'; position: absolute; top: 8px; left: 10px;
width: 20px; height: 20px; background: var(--accent);
border-radius: 50%; font-size: 0.7rem; color: #000;
display: flex; align-items: center; justify-content: center;
font-weight: 800; line-height: 1;
}
/* duplicate `.card { position:relative }` removed — already declared at base rule */
/* ─── AUTO-LOCK SETTINGS ──────────────────────────────────── */
.autolock-row {
display: flex; gap: 6px; flex-wrap: wrap;
padding: 8px 16px 12px;
}
.autolock-opt {
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
color: var(--muted); border-radius: 50px; padding: 4px 14px;
font-size: 0.78rem; cursor: pointer; transition: all .15s;
font-family: var(--font-ar);
}
.autolock-opt:hover { background: rgba(255,255,255,0.1); color: var(--text); }
.autolock-opt.active {
background: rgba(34,211,117,0.15); border-color: var(--accent);
color: var(--accent); font-weight: 600;
}
/* ─── PHANTOM "ADD" CARD ─────────────────────────────────── */
.card-phantom {
background: transparent !important;
border: 2px dashed rgba(255,255,255,0.08) !important;
box-shadow: none !important;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: border-color .2s, background .2s;
}
.card-phantom:hover {
border-color: rgba(255,255,255,0.2) !important;
background: rgba(255,255,255,0.03) !important;
}
.phantom-inner {
display: flex; flex-direction: column; align-items: center; gap: 8px;
color: rgba(255,255,255,0.25);
}
.phantom-inner svg { opacity: 0.5; }
.phantom-inner span { font-size: 0.78rem; }
.card-phantom:hover .phantom-inner { color: rgba(255,255,255,0.4); }
/* ─── STATISTICS MODAL ───────────────────────────────────── */
.stats-modal-box { max-width: 500px; max-height: 88vh; overflow-y: auto; }
.stats-summary-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
padding: 16px 18px 12px;
}
.stats-summary-card {
background: rgba(255,255,255,0.04); border-radius: 12px;
padding: 12px 10px; text-align: center;
border: 1px solid rgba(255,255,255,0.06);
}
.stats-summary-card.danger { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.07); }
.stats-big-num { font-size: 1.7rem; font-weight: 800; color: var(--text); line-height: 1; margin-bottom: 4px; }
.stats-big-label { font-size: 0.68rem; color: var(--muted); }
.stats-section-title {
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--muted);
padding: 10px 18px 6px;
}
.stats-types-list { padding: 0 18px 8px; display: flex; flex-direction: column; gap: 7px; }
.stats-type-row { display: flex; align-items: center; gap: 8px; }
.stats-type-icon { font-size: 1rem; width: 22px; text-align: center; flex-shrink: 0; }
.stats-type-body { flex: 1; }
.stats-type-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.stats-type-label { font-size: 0.82rem; }
.stats-type-count { font-size: 0.75rem; color: var(--muted); font-family: var(--font-mono); }
.stats-type-bar-bg { height: 4px; background: rgba(255,255,255,0.06); border-radius: 99px; }
.stats-type-bar { height: 100%; background: rgb(var(--card-color, 255,255,255)); border-radius: 99px; transition: width .4s ease; }
.stats-reminders-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; }
.stats-rem-chip { font-size: 0.78rem; padding: 4px 12px; border-radius: 99px; border: 1px solid; }
.stats-rem-chip.danger { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #f87171; }
.stats-rem-chip.warn { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.3); color: #fbbf24; }
.stats-rem-chip.success{ background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.3); color: #34d399; }
.stats-recent-list { padding: 0 18px 8px; display: flex; flex-direction: column; gap: 5px; }
.stats-recent-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; }
.stats-recent-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-recent-type { font-size: 0.68rem; color: var(--muted); white-space: nowrap; }
.stats-recent-time { font-size: 0.68rem; color: var(--muted); white-space: nowrap; }
.stats-footer-note { font-size: 0.7rem; color: var(--muted); text-align: center; padding: 10px 18px 14px; }
/* ─── INLINE TITLE EDIT ──────────────────────────────────────── */
.inline-title-input {
background: rgba(255,255,255,0.06);
border: 1px solid var(--accent);
border-radius: 6px;
padding: 2px 8px;
font-family: var(--font-ar);
font-size: inherit;
font-weight: 700;
color: var(--text);
width: 100%;
outline: none;
box-shadow: 0 0 0 3px rgba(var(--accent-rgb,34,211,117),0.15);
}
/* ─── SETTINGS TAGS ──────────────────────────────────────────── */
.settings-tags-list { padding: 0 12px 8px; display: flex; flex-direction: column; gap: 4px; }
.settings-tag-row {
display: flex; align-items: center; gap: 6px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 8px;
padding: 5px 10px;
}
.settings-tag-name { flex: 1; font-size: 0.82rem; color: var(--accent); font-family: var(--font-ar); }
.settings-tag-count { font-size: 0.7rem; color: var(--muted); font-family: var(--font-mono); min-width: 18px; text-align: center; }
.settings-tag-filter, .settings-tag-del {
background: none; border: none; cursor: pointer; padding: 2px 5px;
font-size: 0.78rem; border-radius: 5px; transition: background .15s;
}
.settings-tag-filter:hover { background: rgba(255,255,255,0.08); }
.settings-tag-del { color: var(--muted); }
.settings-tag-del:hover { background: rgba(239,68,68,0.12); color: #f87171; }
/* Untagged-cards row — pinned at top, button-style, opens filtered view */
.settings-untagged-row {
width: 100%;
background: linear-gradient(135deg, rgba(245, 158, 11, 0.10), rgba(245, 158, 11, 0.04));
border: 1px solid rgba(245, 158, 11, 0.32);
cursor: pointer;
font-family: var(--font-ar);
text-align: start;
margin-bottom: 8px;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.settings-untagged-row:hover {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.08));
border-color: rgba(245, 158, 11, 0.55);
transform: translateY(-1px);
}
.settings-untagged-row:active { transform: scale(0.98); }
.settings-untagged-row .settings-tag-name {
color: rgba(252, 211, 77, 0.95);
font-weight: 700;
}
.settings-untagged-icon { font-size: 1rem; line-height: 1; }
.settings-untagged-count {
background: rgba(245, 158, 11, 0.18);
border: 1px solid rgba(245, 158, 11, 0.4);
border-radius: 999px;
padding: 2px 9px;
color: #fde68a;
font-weight: 700;
min-width: 28px;
}
.settings-untagged-row .settings-tag-filter {
color: rgba(252, 211, 77, 0.7);
font-family: var(--font-mono);
pointer-events: none;
}
/* ─── SIDEBAR TAG CLOUD ──────────────────────────────────────── */
.sidebar-tags-section {
padding: 10px 14px 8px;
border-top: 1px solid rgba(255,255,255,0.05);
margin-top: 4px;
width: 100%;
}
/* Hide tags when sidebar is collapsed */
.sidebar:not(.expanded) .sidebar-tags-section { display: none; }
.sidebar-tags-label {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
display: block;
margin-bottom: 8px;
font-weight: 700;
}
.sidebar-tags-cloud {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.sidebar-tag-chip {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 99px;
padding: 3px 10px;
font-size: 0.72rem;
color: var(--muted);
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-tag-chip:hover {
background: rgba(255,255,255,0.1);
border-color: var(--accent);
color: var(--accent);
}
/* ─── PAGE BREADCRUMBS ───────────────────────────────────── */
.breadcrumb-root {
color: var(--muted);
font-size: 0.85rem;
font-weight: 400;
cursor: pointer;
transition: color .2s;
}
.breadcrumb-root:hover { color: var(--accent); }
.breadcrumb-sep {
color: var(--muted);
font-size: 0.75rem;
margin: 0 6px;
opacity: 0.5;
}
.breadcrumb-current {
font-size: 1rem;
font-weight: 700;
color: var(--text);
}
.page-header {
position: relative;
display: flex;
align-items: center;
gap: 16px;
padding: 16px 24px 16px 130px; /* reserve space for the absolute back-btn at left:16px */
border-bottom: 1px solid rgba(255,255,255,0.06);
background: var(--bg-card);
}
/* margin-right:auto pushes the actions area to the LEFT side of the header in RTL flex layout */
.page-header-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.page-search-input {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
padding: 5px 12px;
font-family: var(--font-ar);
font-size: 0.82rem;
color: var(--text);
outline: none;
width: 160px;
transition: border-color .2s, width .3s;
direction: rtl;
}
.page-search-input::placeholder { color: var(--muted); }
.page-search-input:focus { border-color: var(--accent); width: 220px; }
.page-cards-count {
font-size: 0.75rem;
color: var(--muted);
background: rgba(255,255,255,0.06);
padding: 3px 10px;
border-radius: 99px;
}
/* ─── ARCHIVE VIEW ──────────────────────────────────────── */
.card.card-archived {
opacity: 0.9;
border-inline-start: 2px solid rgba(148,163,184,0.3);
}
.card.card-archived:hover { opacity: 1; }
.dash-grid .card.card-archived,
#page-grid .card.card-archived {
display: flex !important;
flex-direction: column !important;
min-height: 320px !important;
height: 320px !important;
overflow: hidden !important;
}
.archive-card-preview {
display: flex;
flex-direction: column;
gap: 10px;
}
.archive-card-line,
.archive-card-empty {
display: block;
padding: 10px 12px;
border-radius: 12px;
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.06);
color: rgba(225,232,243,0.72);
line-height: 1.6;
}
.archive-card-line.primary {
color: rgba(245,247,251,0.92);
font-weight: 700;
}
.archive-card-empty {
color: var(--muted);
text-align: center;
}
.archive-card-chip {
background: rgba(148,163,184,0.12) !important;
border-color: rgba(148,163,184,0.22) !important;
color: #cbd5e1 !important;
}
.card-restore-btn {
background: rgba(16,185,129,0.12);
color: #34d399;
border: 1px solid rgba(16,185,129,0.25);
border-radius: 6px;
padding: 3px 10px;
font-size: 0.73rem;
cursor: pointer;
transition: background .2s;
white-space: nowrap;
}
.card-restore-btn:hover { background: rgba(16,185,129,0.25); }
.card-archive-btn {
background: none;
border: none;
color: var(--muted);
cursor: pointer;
padding: 3px 5px;
font-size: 0.8rem;
border-radius: 5px;
transition: color .2s, background .2s;
opacity: 0;
}
.card:hover .card-archive-btn { opacity: 1; }
.card-archive-btn:hover { background: rgba(245,158,11,0.12); color: #fbbf24; }
.sidebar-nav-archive { margin-top: auto; }
/* ─── CLOUD SYNC DOT ─────────────────────────────────────── */
.cloud-dot {
width: 7px; height: 7px;
border-radius: 50%;
display: none !important;
margin: 0 6px;
flex-shrink: 0;
transition: background 0.4s;
background: var(--muted);
}
.cloud-dot.syncing {
background: #3b82f6;
animation: cloudPulse 0.9s ease-in-out infinite;
}
.cloud-dot.synced { background: #10b981; }
.cloud-dot.error { background: var(--danger); }
@keyframes cloudPulse {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
.cloud-dot.syncing { animation: none; opacity: 0.6; }
}
/* ─── KEYBOARD FOCUS NAVIGATION ─────────────────────────────── */
.card.kb-focus {
outline: 2.5px solid var(--accent2);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(139,92,246,0.18), 0 8px 28px rgba(0,0,0,0.5);
}
/* ─── ONLINE / OFFLINE INDICATOR ────────────────────────────── */
body.is-offline::after {
content: '⚡ بدون إنترنت';
position: fixed;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
background: #f59e0b;
color: #000;
font-size: 0.75rem;
font-weight: 700;
padding: 5px 14px;
border-radius: 20px;
z-index: 9999;
pointer-events: none;
}
/* ─── CARD HOVER PREVIEW ─────────────────────────────────────── */
.card-hover-preview {
display: none;
position: absolute;
bottom: calc(100% + 8px);
right: 0; left: 0;
background: #1e2028;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 12px;
padding: 12px 14px;
font-size: 0.78rem;
color: var(--muted);
line-height: 1.6;
z-index: 50;
max-height: 100px;
overflow: hidden;
pointer-events: none;
white-space: pre-wrap;
word-break: break-word;
box-shadow: 0 8px 24px rgba(0,0,0,0.55);
-webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}
.card:hover .card-hover-preview { display: block; animation: fadeUp .15s ease; }
/* ─── STAT MODAL CHARTS ──────────────────────────────────────── */
.stat-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.stat-box { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 12px; padding: 14px; text-align: center; }
.stat-box-value { font-size: 1.8rem; font-weight: 800; color: var(--accent); line-height: 1; }
.stat-box-label { font-size: 0.72rem; color: var(--muted); margin-top: 4px; }
.stat-box.danger .stat-box-value { color: var(--danger); }
.stat-box.warn .stat-box-value { color: #f59e0b; }
.stat-type-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.stat-type-name { font-size: 0.78rem; color: var(--text); min-width: 90px; text-align: right; }
.stat-bar-track { flex: 1; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.stat-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .6s cubic-bezier(.16,1,.3,1); }
.stat-bar-count { font-size: 0.72rem; color: var(--muted); min-width: 24px; text-align: left; }
.stat-section-title { font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; margin: 16px 0 8px; }
.stat-section-title-top { margin-top: 14px; }
.stats-title-block { margin-bottom: 14px; }
/* ─── Scroll reveal (cards fade-rise into viewport) ─── */
.card.scroll-reveal-pending {
opacity: 0;
transform: translateY(18px) scale(0.98);
transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.card.scroll-reveal-pending.scroll-revealed {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Respect above-the-fold cards — they already animate via card-animate-in */
.card.card-animate-in.scroll-revealed { transform: none; }
@media (prefers-reduced-motion: reduce) {
.card.scroll-reveal-pending { opacity: 1; transform: none; transition: none; }
}
/* ─── Pull-to-refresh indicator ─── */
.ptr-indicator {
position: fixed;
top: -60px;
left: 50%;
transform: translateX(-50%) translateY(0);
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 10px 18px;
background: rgba(20, 18, 30, 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(139, 92, 246, 0.25);
border-radius: 14px;
color: #fff;
font-size: 0.78rem;
font-family: var(--font-ar);
z-index: 10000;
opacity: 0;
pointer-events: none;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.ptr-spinner {
width: 26px;
height: 26px;
color: #a78bfa;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.ptr-indicator.ptr-ready .ptr-spinner {
transform: rotate(180deg);
color: #22d3ee;
}
.ptr-indicator.ptr-refreshing .ptr-spinner {
animation: ptrSpin 0.8s linear infinite;
color: #22d3ee;
}
@keyframes ptrSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.ptr-indicator.ptr-refreshing .ptr-spinner { animation: none; opacity: 0.6; }
}
.ptr-label {
letter-spacing: 0.03em;
color: var(--muted);
}
.ptr-indicator.ptr-ready .ptr-label { color: #22d3ee; }
@media (hover: hover) and (pointer: fine) {
.ptr-indicator { display: none !important; }
}
/* ─── Mobile swipe indicators (left=delete, right=edit) ─── */
.swipe-indicator {
position: absolute;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 90px;
color: #fff;
font-weight: 700;
pointer-events: none;
opacity: 0;
transition: opacity 0.18s ease;
z-index: 0;
}
/* Left = archive (amber/orange — safe), Right = options (blue/indigo) */
.swipe-indicator-delete,
.swipe-indicator-archive {
left: 0;
background: linear-gradient(90deg, rgba(245, 158, 11, 0.9), rgba(245, 158, 11, 0.04));
}
.swipe-indicator-edit {
right: 0;
background: linear-gradient(-90deg, rgba(99, 102, 241, 0.85), rgba(99, 102, 241, 0.04));
}
/* Green variant for type-specific right-swipe (done/count/log/open) */
.swipe-indicator-action {
right: 0;
background: linear-gradient(-90deg, rgba(34, 197, 94, 0.88), rgba(34, 197, 94, 0.04));
}
.card.swipe-left-active .swipe-indicator-delete,
.card.swipe-left-active .swipe-indicator-archive { opacity: 1; }
.card.swipe-right-active .swipe-indicator-edit,
.card.swipe-right-active .swipe-indicator-action { opacity: 1; }
.card.swipe-left-active .swipe-indicator-delete .swipe-ind-ico,
.card.swipe-left-active .swipe-indicator-archive .swipe-ind-ico,
.card.swipe-right-active .swipe-indicator-edit .swipe-ind-ico,
.card.swipe-right-active .swipe-indicator-action .swipe-ind-ico {
animation: swipeIndicatorBounce 0.5s cubic-bezier(0.4, -0.3, 0.3, 1.4);
}
.swipe-ind-ico {
font-size: 1.8rem;
line-height: 1;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
.swipe-ind-txt {
font-size: 0.72rem;
letter-spacing: 0.05em;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
font-family: var(--font-ar);
}
@keyframes swipeIndicatorBounce {
0% { transform: scale(1); }
50% { transform: scale(1.3) rotate(-8deg); }
100% { transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
.card.swipe-left-active .swipe-indicator-delete .swipe-ind-ico,
.card.swipe-right-active .swipe-indicator-edit .swipe-ind-ico,
.card.swipe-right-active .swipe-indicator-action .swipe-ind-ico { animation: none; }
}
.card .swipe-indicator { display: none; }
@media (max-width: 768px) {
.card .swipe-indicator { display: flex; }
}
/* ─── Header achievements chip ─── */
.header-achiev-btn {
position: relative;
}
.header-achiev-icon {
font-size: 1rem;
line-height: 1;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.header-achiev-count {
position: absolute;
top: -4px;
left: -4px;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #0a0a0a;
border-radius: 10px;
font-size: 0.62rem;
font-weight: 800;
line-height: 16px;
text-align: center;
box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
animation: achievCountPulse 2s ease-in-out infinite;
}
.header-achiev-count.hidden { display: none; }
@keyframes achievCountPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
.header-achiev-count { animation: none; }
}
/* ─── Achievement badges grid (in stats modal) ─── */
.stat-achiev-count {
display: inline-block;
margin-right: 8px;
padding: 2px 8px;
background: rgba(139, 92, 246, 0.15);
color: #a78bfa;
border-radius: 12px;
font-size: 0.68rem;
font-weight: 700;
text-transform: none;
letter-spacing: 0.02em;
vertical-align: middle;
}
.stat-achievements-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 10px;
margin-bottom: 16px;
}
.stat-achiev-badge {
position: relative;
padding: 14px 10px 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border);
border-radius: 12px;
text-align: center;
overflow: hidden;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.stat-achiev-badge:hover {
transform: translateY(-2px);
border-color: rgba(139, 92, 246, 0.35);
}
.stat-achiev-badge.locked {
opacity: 0.55;
filter: grayscale(80%);
}
.stat-achiev-badge.unlocked.stat-achiev-bronze {
background: linear-gradient(135deg, rgba(180, 83, 9, 0.15), rgba(120, 53, 15, 0.06));
border-color: rgba(251, 146, 60, 0.3);
}
.stat-achiev-badge.unlocked.stat-achiev-silver {
background: linear-gradient(135deg, rgba(148, 163, 184, 0.18), rgba(71, 85, 105, 0.07));
border-color: rgba(203, 213, 225, 0.35);
}
.stat-achiev-badge.unlocked.stat-achiev-gold {
background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(161, 98, 7, 0.08));
border-color: rgba(250, 204, 21, 0.4);
box-shadow: 0 0 22px rgba(250, 204, 21, 0.12);
}
.stat-achiev-badge.unlocked::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
animation: achievShine 4s ease-in-out infinite;
pointer-events: none;
}
@keyframes achievShine {
0%, 100% { transform: translate(-60%, -60%) rotate(0deg); opacity: 0.5; }
50% { transform: translate(-40%, -40%) rotate(180deg); opacity: 1; }
}
.stat-achiev-icon {
font-size: 2rem;
line-height: 1;
margin-bottom: 6px;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.stat-achiev-badge.unlocked .stat-achiev-icon {
animation: achievPop 0.6s cubic-bezier(0.4, -0.3, 0.3, 1.5);
}
@keyframes achievPop {
0% { transform: scale(0.2) rotate(-15deg); }
60% { transform: scale(1.2) rotate(8deg); }
100% { transform: scale(1) rotate(0deg); }
}
.stat-achiev-title {
font-size: 0.85rem;
font-weight: 700;
color: var(--text);
margin-bottom: 2px;
font-family: var(--font-ar);
}
.stat-achiev-desc {
font-size: 0.68rem;
color: var(--muted);
line-height: 1.3;
min-height: 1.75em;
}
.stat-achiev-check {
position: absolute;
top: 6px;
right: 8px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #22c55e;
color: #000;
font-size: 0.7rem;
font-weight: 900;
line-height: 18px;
text-align: center;
box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}
.stat-achiev-bar {
margin-top: 8px;
height: 4px;
background: rgba(255, 255, 255, 0.08);
border-radius: 2px;
overflow: hidden;
}
.stat-achiev-fill {
height: 100%;
background: linear-gradient(90deg, #8b5cf6, #a78bfa);
border-radius: 2px;
transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
.stat-achiev-badge.unlocked::before,
.stat-achiev-badge.unlocked .stat-achiev-icon { animation: none; }
}
.stat-tags-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.stat-tag-chip { background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; font-size: 0.75rem; color: var(--muted); }
.stat-tag-chip span { color: var(--accent); font-weight: 700; margin-inline-end: 4px; }
.stat-empty { color: var(--muted); font-size: 0.8rem; }
.stat-empty-subs { color: var(--muted); font-size: 0.8rem; padding: 4px 0; }
.stat-empty-center { color: var(--muted); font-size: 0.82rem; padding: 10px 0; text-align: center; }
.qr-error-msg { padding: 20px; color: var(--muted); font-size: 0.85rem; text-align: center; }
.stat-finance-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.stat-finance-row:last-child { border-bottom: none; }
.stat-finance-amount { font-weight: 700; color: var(--accent); }
.stat-week-row { display: flex; align-items: flex-end; gap: 4px; height: 40px; margin-top: 4px; }
.stat-week-bar { flex: 1; background: rgba(var(--accent-rgb), var(--bar-opacity, 0.2)); border-radius: 4px 4px 0 0; min-height: 3px; position: relative; transition: background .2s; }
.stat-week-bar.stat-week-empty { background: rgba(255,255,255,0.05); }
.stat-week-bar:hover { background: var(--accent); }
.stat-week-bar::after { content: attr(data-label); position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); font-size: 0.6rem; color: var(--muted); white-space: nowrap; }
.stat-week-labels { display: flex; gap: 4px; padding-top: 20px; }
.stat-week-labels span { flex: 1; text-align: center; font-size: 0.62rem; color: var(--muted); }
/* ─── CUSTOM DATE PICKER (CDP) ───────────────────────────────── */
.cdp-wrap {
position: relative;
display: inline-flex;
align-items: center;
width: 100%;
}
.cdp-trigger {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 7px;
width: 100%;
padding: 9px 12px;
background: var(--input-bg, rgba(255,255,255,0.05));
border: 1.5px solid var(--border);
border-radius: 10px;
color: var(--text);
font-size: 0.9rem;
font-family: inherit;
cursor: pointer;
transition: border-color .2s, box-shadow .2s;
text-align: right;
direction: rtl;
min-height: 48px;
}
.cdp-trigger:hover {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 99,102,241), 0.12);
}
.cdp-trigger svg:first-child { flex-shrink: 0; color: var(--accent); }
.cdp-display {
flex: 1;
min-width: 0;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.25;
font-family: var(--font-ar);
font-size: 0.92rem;
font-weight: 600;
}
.cdp-placeholder { color: var(--muted); }
.cdp-caret { flex-shrink: 0; color: var(--muted); transition: transform .2s; }
/* popup */
.cdp-popup {
position: fixed;
z-index: 10500;
width: 300px;
background: #1e2028;
border: 1.5px solid rgba(255,255,255,0.1);
border-radius: 18px;
box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);
overflow: hidden;
direction: rtl;
font-family: inherit;
backdrop-filter: none;
}
.cdp-popup.hidden { display: none; }
/* header */
.cdp-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 8px;
background: rgba(255,255,255,0.04);
border-bottom: 1px solid rgba(255,255,255,0.08);
gap: 4px;
}
.cdp-nav {
background: none;
border: none;
color: var(--muted);
cursor: pointer;
width: 30px;
height: 30px;
border-radius: 8px;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s;
flex-shrink: 0;
}
.cdp-nav:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.cdp-hd-center {
display: flex;
align-items: center;
gap: 4px;
flex: 1;
justify-content: center;
}
.cdp-hd-btn {
background: none;
border: 1px solid transparent;
color: var(--text);
cursor: pointer;
padding: 4px 8px;
border-radius: 8px;
font-size: 0.88rem;
font-weight: 600;
font-family: inherit;
transition: background .15s, border-color .15s;
}
.cdp-hd-btn:hover {
background: rgba(var(--accent-rgb, 99,102,241), 0.12);
border-color: rgba(var(--accent-rgb, 99,102,241), 0.3);
color: var(--accent);
}
/* body */
#cdp-body { padding: 8px 10px; }
/* weekday headers */
.cdp-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
margin-bottom: 4px;
}
.cdp-weekdays span {
text-align: center;
font-size: 0.72rem;
font-weight: 600;
color: var(--muted);
padding: 3px 0;
}
/* days grid */
.cdp-days-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
}
.cdp-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.82rem;
border-radius: 8px;
cursor: pointer;
border: none;
background: none;
color: var(--text);
font-family: inherit;
transition: background .12s, color .12s, transform .1s;
width: 100%;
}
.cdp-day:hover:not(.cdp-other) {
background: rgba(var(--accent-rgb, 99,102,241), 0.15);
color: var(--accent);
transform: scale(1.08);
}
.cdp-day.cdp-other { color: var(--muted); opacity: 0.45; cursor: default; }
.cdp-day.cdp-today {
border: 1.5px solid var(--accent);
color: var(--accent);
font-weight: 700;
}
.cdp-day.cdp-selected {
background: var(--accent);
color: #fff;
font-weight: 700;
transform: scale(1.08);
}
.cdp-day.cdp-selected:hover { opacity: 0.9; transform: scale(1.1); }
/* months grid */
.cdp-month-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
padding: 4px 0;
}
.cdp-month-cell {
padding: 9px 4px;
border-radius: 10px;
border: 1.5px solid transparent;
background: rgba(255,255,255,0.05);
color: var(--text);
font-size: 0.82rem;
font-family: inherit;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
text-align: center;
}
.cdp-month-cell:hover {
background: rgba(var(--accent-rgb, 99,102,241), 0.12);
border-color: rgba(var(--accent-rgb, 99,102,241), 0.3);
color: var(--accent);
}
.cdp-month-cell.cdp-selected {
background: var(--accent);
border-color: var(--accent);
color: #fff;
font-weight: 600;
}
/* years grid */
.cdp-year-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
padding: 4px 0;
}
.cdp-year-cell {
padding: 9px 4px;
border-radius: 10px;
border: 1.5px solid transparent;
background: rgba(255,255,255,0.05);
color: var(--text);
font-size: 0.85rem;
font-family: inherit;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
text-align: center;
}
.cdp-year-cell:hover {
background: rgba(var(--accent-rgb, 99,102,241), 0.12);
border-color: rgba(var(--accent-rgb, 99,102,241), 0.3);
color: var(--accent);
}
.cdp-year-cell.cdp-selected {
background: var(--accent);
border-color: var(--accent);
color: #fff;
font-weight: 600;
}
/* time section */
.cdp-time {
border-top: 1px solid rgba(255,255,255,0.08);
padding: 10px 14px 6px;
background: rgba(255,255,255,0.03);
}
.cdp-time.hidden { display: none; }
.cdp-time-label {
text-align: center;
font-size: 0.72rem;
font-weight: 600;
color: var(--muted);
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 8px;
}
.cdp-time-row {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
direction: ltr;
}
.cdp-time-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.cdp-t-arr {
background: none;
border: none;
color: var(--muted);
cursor: pointer;
font-size: 1rem;
width: 32px;
height: 26px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s;
font-family: inherit;
}
.cdp-t-val,
.cdp-t-sep {
direction: ltr;
}
.cdp-t-arr:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.cdp-t-val {
font-size: 1.4rem;
font-weight: 700;
color: var(--text);
min-width: 44px;
text-align: center;
background: rgba(255,255,255,0.04);
border-radius: 8px;
padding: 4px 6px;
letter-spacing: 0.04em;
}
.cdp-t-sep {
font-size: 1.4rem;
font-weight: 700;
color: var(--accent);
margin: 0 2px;
padding-bottom: 4px;
}
/* footer */
.cdp-footer {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 10px 10px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.cdp-btn-clear {
background: none;
border: 1px solid var(--border);
color: var(--muted);
cursor: pointer;
padding: 6px 10px;
border-radius: 8px;
font-size: 0.78rem;
font-family: inherit;
transition: background .15s, border-color .15s, color .15s;
}
.cdp-btn-clear:hover { background: rgba(239,68,68,0.08); border-color: var(--danger); color: var(--danger); }
.cdp-btn-today {
flex: 1;
background: rgba(255,255,255,0.05);
border: 1px solid var(--border);
color: var(--text);
cursor: pointer;
padding: 6px 10px;
border-radius: 8px;
font-size: 0.8rem;
font-family: inherit;
transition: background .15s;
text-align: center;
}
.cdp-btn-today:hover { background: rgba(255,255,255,0.1); }
.cdp-btn-confirm {
background: var(--accent);
border: none;
color: #fff;
cursor: pointer;
padding: 6px 14px;
border-radius: 8px;
font-size: 0.82rem;
font-weight: 600;
font-family: inherit;
transition: opacity .15s, transform .1s;
}
.cdp-btn-confirm:hover { opacity: 0.88; transform: scale(1.03); }
/* ─── SNOOZE / REMINDER MODAL ENHANCEMENTS ─────────────────── */
.reminder-snooze-section {
margin: 12px 0 4px;
padding: 12px;
background: rgba(255,255,255,0.03);
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.07);
}
.snooze-label {
font-size: 0.78rem;
color: var(--muted);
margin-bottom: 8px;
text-align: center;
}
.snooze-btns-row {
display: flex;
gap: 8px;
justify-content: center;
}
.snooze-btn {
flex: 1;
padding: 7px 4px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
color: var(--text);
border-radius: 8px;
cursor: pointer;
font-size: 0.82rem;
font-family: inherit;
transition: background .15s, border-color .15s, transform .1s;
}
.snooze-btn:hover {
background: rgba(var(--accent-rgb), 0.15);
border-color: var(--accent);
transform: translateY(-1px);
}
.reminder-detail-recurrence {
display: inline-block;
font-size: 0.78rem;
background: rgba(var(--accent-rgb), 0.12);
color: var(--accent);
border-radius: 6px;
padding: 3px 8px;
margin-bottom: 8px;
}
.reminder-detail-actions {
display: flex;
gap: 8px;
margin-top: 14px;
}
.reminder-detail-actions .btn-primary {
flex: 1;
padding: 9px;
background: var(--accent);
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
font-family: inherit;
font-weight: 600;
transition: opacity .15s, transform .1s;
}
.reminder-detail-actions .btn-primary:hover { opacity: .88; transform: scale(1.02); }
.reminder-detail-actions .btn-secondary {
padding: 9px 16px;
background: rgba(255,255,255,0.06);
color: var(--text);
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
font-family: inherit;
transition: background .15s;
}
.reminder-detail-actions .btn-secondary:hover { background: rgba(255,255,255,0.1); }
/* ─── RECURRENCE & SNOOZE BADGES ───────────────────────────── */
.recurrence-badge {
display: inline-block;
font-size: 0.68rem;
background: rgba(99,102,241,0.15);
color: #818cf8;
border-radius: 4px;
padding: 1px 5px;
margin-right: 4px;
}
.snooze-active-badge {
display: inline-block;
font-size: 0.68rem;
background: rgba(251,191,36,0.15);
color: #fbbf24;
border-radius: 4px;
padding: 1px 5px;
margin-right: 4px;
}
/* ─── CONTEXT MENU ─────────────────────────────────────────── */
.card-context-menu {
position: fixed;
z-index: 9999;
background: #1e2028;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px;
box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
min-width: 170px;
padding: 4px;
animation: ctx-in .12s ease;
}
.card-context-menu:not(.hidden) { display: block; }
@keyframes ctx-in {
from { opacity: 0; transform: scale(0.95) translateY(-4px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes ctx-sheet-in {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.card-context-menu { animation: none; }
}
.card-context-menu.hidden { display: none; }
.ctx-sheet-head { display: none; }
.ctx-sheet-title {
font-size: 0.82rem;
font-weight: 800;
color: rgba(255,255,255,0.72);
}
.ctx-sheet-close {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 11px;
background: rgba(255,255,255,0.04);
color: var(--text);
font-size: 0.92rem;
cursor: pointer;
}
.ctx-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 9px 12px;
background: none;
border: none;
color: var(--text);
font-size: 0.86rem;
font-family: inherit;
text-align: right;
cursor: pointer;
border-radius: 7px;
transition: background .12s;
}
.ctx-item:hover { background: rgba(255,255,255,0.08); }
.ctx-item.ctx-danger { color: #f87171; }
.ctx-item.ctx-danger:hover { background: rgba(248,113,113,0.12); }
.ctx-separator {
height: 1px;
background: rgba(255,255,255,0.08);
margin: 3px 6px;
}
/* ─── ROUTINE STREAK ────────────────────────────────────────── */
.routine-streak {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 0.76rem;
font-weight: 700;
color: #f59e0b;
background: rgba(245,158,11,0.12);
border-radius: 6px;
padding: 1px 6px;
}
/* ─── EXPORT DIALOG ─────────────────────────────────────────── */
.export-dialog {
position: fixed;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
z-index: 9998;
background: #1e2028;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 14px;
box-shadow: 0 12px 48px rgba(0,0,0,0.5);
padding: 14px;
width: 280px;
animation: ctx-in .15s ease;
}
.export-dialog-title {
font-size: 0.88rem;
font-weight: 700;
color: var(--text);
margin-bottom: 10px;
text-align: center;
}
.export-fmt-btn {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 10px 12px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
cursor: pointer;
text-align: right;
color: var(--text);
font-family: inherit;
margin-bottom: 7px;
transition: background .15s, border-color .15s;
}
.export-fmt-btn:hover { background: rgba(var(--accent-rgb),0.1); border-color: var(--accent); }
.export-fmt-btn-primary {
background: linear-gradient(135deg, rgba(139,92,246,0.14), rgba(45,212,191,0.08));
border-color: rgba(139,92,246,0.35);
}
.export-fmt-btn-primary:hover {
background: linear-gradient(135deg, rgba(139,92,246,0.22), rgba(45,212,191,0.14));
border-color: rgba(139,92,246,0.55);
box-shadow: 0 4px 16px rgba(139,92,246,0.2);
}
.export-fmt-btn-primary .export-fmt-icon {
background: rgba(139,92,246,0.22);
color: #c4b5fd;
font-size: 1.1rem;
}
.export-fmt-btn-primary .export-fmt-name { color: #e9e4ff; }
.export-fmt-icon {
width: 36px;
height: 36px;
background: rgba(var(--accent-rgb),0.12);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.78rem;
font-weight: 700;
color: var(--accent);
flex-shrink: 0;
font-family: 'IBM Plex Mono', monospace;
}
.export-fmt-name { font-size: 0.88rem; font-weight: 600; }
.export-fmt-desc { font-size: 0.74rem; color: var(--muted); margin-top: 1px; }
.export-fmt-close {
width: 100%;
padding: 8px;
background: none;
border: 1px solid rgba(255,255,255,0.08);
color: var(--muted);
border-radius: 8px;
cursor: pointer;
font-family: inherit;
font-size: 0.82rem;
margin-top: 2px;
transition: background .15s;
}
.export-fmt-close:hover { background: rgba(255,255,255,0.06); }
/* ─── ENHANCED STATS ────────────────────────────────────────── */
.stat-prod-wrap {
background: rgba(255,255,255,0.03);
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.07);
padding: 14px;
margin-bottom: 14px;
text-align: center;
}
.stat-prod-score {
font-size: 2.2rem;
font-weight: 800;
line-height: 1;
color: var(--prod-color, var(--accent));
}
.stat-prod-label {
font-size: 0.85rem;
font-weight: 600;
color: var(--text);
margin: 4px 0 10px;
}
.stat-prod-bar-track {
height: 6px;
background: rgba(255,255,255,0.07);
border-radius: 4px;
overflow: hidden;
margin-top: 10px;
}
.stat-prod-bar-fill {
height: 100%;
border-radius: 4px;
transition: width .6s cubic-bezier(0.4,0,0.2,1);
background: var(--prod-color, var(--accent));
}
.stat-prod-sub {
font-size: 0.72rem;
color: var(--muted);
margin-top: 6px;
}
.stat-streaks { margin-bottom: 10px; }
.stat-streak-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px 4px;
border-bottom: 1px solid rgba(255,255,255,0.05);
font-size: 0.84rem;
}
.stat-streak-val {
font-weight: 700;
color: #f59e0b;
font-size: 0.82rem;
}
/* ─── ACTIVITY HEATMAP ──────────────────────────────────────── */
.stat-heatmap {
display: grid;
grid-template-columns: repeat(15, 1fr);
gap: 4px;
margin-bottom: 8px;
}
/* Hour-of-day chart */
.stat-hour-wrap { padding: 8px 0 4px; }
.stat-hour-row {
display: flex;
align-items: flex-end;
gap: 4px;
height: 80px;
padding: 4px 0 18px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.stat-hour-col {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
position: relative;
}
.stat-hour-bar {
width: 80%;
background: linear-gradient(to top, rgba(167,139,250,0.5), rgba(167,139,250,0.2));
border-radius: 3px 3px 0 0;
align-self: flex-end;
min-height: 4px;
transition: height 0.6s cubic-bezier(.2,.8,.25,1);
}
.stat-hour-bar.is-peak {
background: linear-gradient(to top, #a78bfa, #7c3aed);
box-shadow: 0 0 12px rgba(167,139,250,0.5);
}
.stat-hour-lbl {
position: absolute;
bottom: -16px;
font-size: 0.6rem;
color: var(--muted);
font-family: var(--font-mono, monospace);
}
.stat-hour-foot {
margin-top: 8px;
font-size: 0.78rem;
color: var(--muted);
text-align: center;
}
.stat-hour-foot strong { color: #c4b5fd; font-family: var(--font-mono, monospace); }
/* Day-of-week bars */
.stat-dow-wrap {
display: flex;
flex-direction: column;
gap: 6px;
padding: 4px 0;
}
.stat-dow-row {
display: grid;
grid-template-columns: 70px 1fr 32px;
align-items: center;
gap: 10px;
}
.stat-dow-lbl {
font-size: 0.78rem;
color: var(--muted);
font-family: var(--font-ar);
}
.stat-dow-track {
height: 8px;
background: rgba(255,255,255,0.05);
border-radius: 99px;
overflow: hidden;
}
.stat-dow-fill {
height: 100%;
background: linear-gradient(90deg, rgba(45,212,191,0.6), rgba(45,212,191,0.9));
border-radius: 99px;
transition: width 0.8s cubic-bezier(.2,.8,.25,1);
}
.stat-dow-row.is-peak .stat-dow-fill {
background: linear-gradient(90deg, #2dd4bf, #14b8a6);
box-shadow: 0 0 12px rgba(45,212,191,0.5);
}
.stat-dow-row.is-peak .stat-dow-lbl { color: #5eead4; font-weight: 700; }
.stat-dow-val {
font-family: var(--font-mono, monospace);
font-size: 0.8rem;
color: var(--text);
text-align: end;
}
.stat-dow-foot {
margin-top: 8px;
font-size: 0.78rem;
color: var(--muted);
text-align: center;
}
.stat-dow-foot strong { color: #5eead4; }
/* Completion donut */
.stat-donut-wrap {
display: flex;
align-items: center;
gap: 18px;
padding: 8px 0;
}
.stat-donut-svg { width: 110px; height: 110px; flex-shrink: 0; }
.stat-donut-arc {
stroke: var(--donut-c, var(--accent));
transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.25,1);
}
.stat-donut-side { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.stat-donut-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.84rem;
color: var(--text);
}
.stat-donut-row .dot {
width: 10px; height: 10px; border-radius: 50%;
flex-shrink: 0;
background: var(--dot-c, var(--muted));
}
.stat-donut-row span:nth-child(2) { flex: 1; color: var(--muted); font-size: 0.78rem; }
.stat-donut-row strong { font-family: var(--font-mono, monospace); }
.stat-donut-foot {
margin-top: 6px;
padding-top: 8px;
border-top: 1px solid rgba(255,255,255,0.06);
font-size: 0.76rem;
color: var(--muted);
}
.heatmap-cell {
aspect-ratio: 1;
border-radius: 3px;
cursor: default;
background: var(--hm-cell-bg, rgba(255,255,255,0.04));
}
.stat-heatmap-legend {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.stat-heatmap-legend > div {
display: flex;
align-items: center;
gap: 3px;
}
.stat-heatmap-legend .heatmap-cell {
width: 10px;
height: 10px;
}
/* ─── PRODUCTIVITY SPARKLINE ────────────────────────────────── */
.prod-sparkline-wrap {
width: 100%;
}
.prod-sparkline-svg {
width: 100%;
height: 50px;
display: block;
}
.prod-sparkline-labels {
display: flex;
justify-content: space-between;
font-size: 0.66rem;
color: var(--muted);
margin-top: 2px;
}
.prod-sparkline-empty {
font-size: 0.75rem;
color: var(--muted);
text-align: center;
padding: 12px 0;
}
/* ─── AGENDA VIEW ────────────────────────────────────────────── */
.agenda-wrap {
display: flex;
flex-direction: column;
gap: 16px;
padding-bottom: 20px;
grid-column: 1 / -1; /* span full width in grid */
}
.agenda-section {
background: rgba(255,255,255,0.02);
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.06);
overflow: hidden;
}
.agenda-section-label {
padding: 10px 16px 8px;
font-size: 0.82rem;
font-weight: 700;
color: var(--muted);
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid rgba(255,255,255,0.05);
background: rgba(255,255,255,0.02);
}
.agenda-count {
background: rgba(var(--accent-rgb),0.15);
color: var(--accent);
border-radius: 10px;
padding: 1px 7px;
font-size: 0.72rem;
}
.agenda-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid rgba(255,255,255,0.04);
cursor: pointer;
transition: background .15s;
}
.agenda-item:last-child { border-bottom: none; }
.agenda-item:hover { background: rgba(255,255,255,0.04); }
.agenda-item.agenda-done { opacity: 0.5; }
.agenda-icon {
font-size: 1.4rem;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.agenda-body {
flex: 1;
min-width: 0;
}
.agenda-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.agenda-date {
font-size: 0.74rem;
color: var(--muted);
margin-top: 2px;
}
.agenda-sub {
font-size: 0.72rem;
color: var(--muted);
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.agenda-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex-shrink: 0;
}
.agenda-badge {
font-size: 0.72rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 6px;
white-space: nowrap;
background: color-mix(in srgb, var(--badge-c, var(--accent)) 13%, transparent);
color: var(--badge-c, var(--accent));
border: 1px solid color-mix(in srgb, var(--badge-c, var(--accent)) 27%, transparent);
}
.agenda-type-chip {
font-size: 0.66rem;
color: var(--muted);
background: rgba(255,255,255,0.05);
padding: 1px 6px;
border-radius: 4px;
}
/* ─── SEARCH ARCHIVE TOGGLE ─────────────────────────────────── */
.search-archive-toggle {
background: none;
border: none;
cursor: pointer;
font-size: 0.78rem;
padding: 2px 4px;
border-radius: 6px;
opacity: 0.4;
transition: opacity .15s, background .15s;
flex-shrink: 0;
}
.search-archive-toggle:hover { opacity: 0.8; background: rgba(255,255,255,0.08); }
.search-archive-toggle.active {
opacity: 1;
background: rgba(var(--accent-rgb),0.15);
}
/* ─── ARCHIVED CARD IN SEARCH RESULTS ───────────────────────── */
.card.card-archived-result {
opacity: 0.65;
border: 1px dashed rgba(255,255,255,0.15) !important;
}
.card.card-archived-result::before {
content: '📦 مؤرشف';
position: absolute;
top: 6px;
left: 6px;
font-size: 0.62rem;
color: var(--muted);
background: rgba(255,255,255,0.06);
padding: 1px 5px;
border-radius: 4px;
}
.card.card-archived-result { position: relative; }
/* ─── AGENDA SIDEBAR BUTTON ─────────────────────────────────── */
.sidebar-nav-agenda {
border-top: 1px solid rgba(255,255,255,0.06);
margin-top: 2px;
padding-top: 4px;
}
/* Agenda mode: single column full-width */
.dash-grid.agenda-mode {
display: block;
max-width: 720px;
margin: 0 auto;
}
/* ─── AUTH LAYER ────────────────────────────────────────────── */
/* Biometric button on login screen */
.biometric-btn {
display: flex;
align-items: center;
gap: 10px;
background: var(--accent);
color: var(--bg);
border: none;
border-radius: 12px;
padding: 14px 32px;
font-size: 1rem;
font-family: 'Tajawal', sans-serif;
font-weight: 700;
cursor: pointer;
margin: 0 auto 16px;
transition: transform .15s, opacity .15s;
box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 40%, transparent);
}
.biometric-btn:hover { transform: translateY(-2px); opacity: .9; }
.biometric-btn:active { transform: scale(.97); }
/* Divider between biometric and PIN */
.pin-or-divider {
color: var(--muted);
font-size: 0.8rem;
margin: 0 0 14px;
text-align: center;
letter-spacing: 1px;
}
/* Passkey registration banner */
.passkey-banner {
display: flex;
align-items: center;
gap: 12px;
background: color-mix(in srgb, var(--accent) 12%, var(--surface));
border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
padding: 10px 20px;
font-size: 0.85rem;
color: var(--text);
position: relative;
z-index: 10;
}
.passkey-banner svg { color: var(--accent); flex-shrink: 0; }
.passkey-banner span { flex: 1; }
.passkey-banner-btn {
background: var(--accent);
color: var(--bg);
border: none;
border-radius: 8px;
padding: 6px 16px;
font-family: 'Tajawal', sans-serif;
font-weight: 700;
font-size: 0.82rem;
cursor: pointer;
white-space: nowrap;
transition: opacity .15s;
}
.passkey-banner-btn:hover { opacity: .85; }
.passkey-banner-dismiss {
background: none;
border: none;
color: var(--muted);
font-size: 0.8rem;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
font-family: 'Tajawal', sans-serif;
transition: color .15s;
}
.passkey-banner-dismiss:hover { color: var(--text); }
/* Trusted Devices / Passkeys list in settings */
.trusted-devices-list {
padding: 4px 16px 12px;
display: flex;
flex-direction: column;
gap: 6px;
}
.trusted-device-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 10px;
padding: 10px 14px;
}
.trusted-device-item.current-device {
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.trusted-device-info {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.trusted-device-name {
font-size: 0.85rem;
color: var(--text);
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.device-current-badge {
background: var(--accent);
color: var(--bg);
font-size: 0.65rem;
padding: 1px 6px;
border-radius: 4px;
font-weight: 700;
}
.trusted-device-date {
font-size: 0.75rem;
color: var(--muted);
}
.trusted-device-revoke {
background: rgba(239,68,68,0.12);
color: var(--danger);
border: 1px solid rgba(239,68,68,0.2);
border-radius: 7px;
padding: 5px 12px;
font-size: 0.75rem;
font-family: 'Tajawal', sans-serif;
cursor: pointer;
white-space: nowrap;
transition: background .15s;
flex-shrink: 0;
}
.trusted-device-revoke:hover { background: rgba(239,68,68,0.22); }
.trusted-device-empty,
.trusted-device-loading {
font-size: 0.78rem;
color: var(--muted);
padding: 6px 0;
}
/* ─── END AUTH LAYER ─────────────────────────────────────────── */
/* ─── DEVICE APPROVAL SYSTEM ────────────────────────────────── */
/* Device name input on login screen */
.device-name-input {
width: 100%;
background: rgba(255,255,255,0.06);
border: 1.5px solid rgba(255,255,255,0.12);
border-radius: 12px;
padding: 13px 16px;
color: var(--text);
font-family: 'Tajawal', sans-serif;
font-size: 1rem;
text-align: center;
outline: none;
margin-bottom: 12px;
transition: border-color .2s;
box-sizing: border-box;
}
.device-name-input:focus {
border-color: var(--accent);
}
.device-name-input::placeholder { color: var(--muted); }
/* Request Access button */
.request-access-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
background: var(--accent);
color: var(--bg);
border: none;
border-radius: 12px;
padding: 13px 20px;
font-family: 'Tajawal', sans-serif;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: transform .15s, opacity .15s;
box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 35%, transparent);
margin-bottom: 14px;
}
.request-access-btn:hover { transform: translateY(-1px); opacity: .9; }
.request-access-btn:active { transform: scale(.97); }
/* PIN fallback link */
.pin-fallback-link {
background: none;
border: none;
color: var(--muted);
font-size: 0.78rem;
font-family: 'Tajawal', sans-serif;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
transition: color .15s;
display: block;
margin: 0 auto;
text-align: center;
text-decoration: underline;
text-underline-offset: 3px;
}
.pin-fallback-link:hover { color: var(--text); }
/* Waiting for approval screen */
#waiting-approval {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 10px 0;
}
.approval-waiting-icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: color-mix(in srgb, var(--accent) 12%, transparent);
border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
animation: pulse-ring 2s ease-in-out infinite;
}
@keyframes pulse-ring {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 25%, transparent); }
50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); }
}
.approval-waiting-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--text);
margin: 0;
}
.approval-waiting-sub {
font-size: 0.82rem;
color: var(--muted);
margin: 0;
text-align: center;
}
/* Animated dots */
.approval-dots {
display: flex;
gap: 6px;
margin: 4px 0 6px;
}
.approval-dots span {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
animation: dot-bounce 1.2s ease-in-out infinite;
}
.approval-dots span:nth-child(2) { animation-delay: .2s; }
.approval-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dot-bounce {
0%, 80%, 100% { transform: scale(.6); opacity: .4; }
40% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.approval-waiting-icon { animation: none; }
.approval-dots span { animation: none; opacity: 0.7; }
}
/* Approval Popup (on trusted device / phone) */
.approval-popup {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(6px);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
animation: fadeInUp .25s ease;
}
.approval-popup.hidden { display: none; }
.approval-popup-inner {
background: var(--surface);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 32px 28px 24px;
max-width: 340px;
width: 90%;
text-align: center;
box-shadow: 0 24px 60px rgba(0,0,0,.5);
animation: scaleIn .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes scaleIn {
from { transform: scale(.85); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.approval-popup-icon {
font-size: 2.4rem;
margin-bottom: 10px;
animation: swing .6s ease;
}
@keyframes swing {
0%,100% { transform: rotate(0); }
25% { transform: rotate(-15deg); }
75% { transform: rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) {
.approval-popup { animation: none; }
.approval-popup-inner { animation: none; }
.approval-popup-icon { animation: none; }
}
.approval-popup-title {
font-size: 1.15rem;
font-weight: 800;
color: var(--text);
margin-bottom: 14px;
}
.approval-popup-device {
font-size: 1rem;
font-weight: 700;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
border-radius: 10px;
padding: 10px 18px;
margin-bottom: 6px;
}
.approval-popup-time {
font-size: 0.75rem;
color: var(--muted);
margin-bottom: 22px;
}
.approval-popup-actions {
display: flex;
gap: 10px;
}
.approval-approve-btn,
.approval-reject-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
border: none;
border-radius: 12px;
padding: 13px 16px;
font-family: 'Tajawal', sans-serif;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: transform .15s, opacity .15s;
}
.approval-approve-btn {
background: var(--accent);
color: var(--bg);
box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 35%, transparent);
}
.approval-approve-btn:hover { transform: translateY(-1px); opacity: .9; }
.approval-reject-btn {
background: rgba(239,68,68,0.12);
color: var(--danger);
border: 1px solid rgba(239,68,68,0.2);
}
.approval-reject-btn:hover { background: rgba(239,68,68,0.2); }
/* ─── END DEVICE APPROVAL SYSTEM ────────────────────────────── */
/* ─── DOCUMENT VIEW MODAL ───────────────────────────────────── */
.doc-view-box { max-width: 460px; }
.doc-view-header-info {
display: flex;
align-items: center;
gap: 12px;
}
.doc-view-card-icon { font-size: 2rem; line-height: 1; }
.doc-view-count {
font-size: 0.75rem;
color: var(--muted);
margin-top: 2px;
}
.btn-doc-edit {
display: flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
color: var(--text);
padding: 7px 14px;
font-size: 0.82rem;
font-family: 'Tajawal', sans-serif;
cursor: pointer;
transition: background .15s;
}
.btn-doc-edit:hover { background: rgba(255,255,255,0.1); }
/* Document list in popup */
.doc-view-list {
display: flex;
flex-direction: column;
gap: 10px;
padding: 4px 0;
}
.doc-view-empty { color: var(--muted); font-size: 0.85rem; text-align: center; padding: 24px 0; }
.doc-view-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.07);
background: rgba(255,255,255,0.03);
transition: background .15s;
}
.doc-view-item-safe { border-inline-start: 3px solid #22c55e; }
.doc-view-item-caution { border-inline-start: 3px solid #eab308; }
.doc-view-item-warning { border-inline-start: 3px solid #f97316; }
.doc-view-item-critical { border-inline-start: 3px solid var(--danger); background: rgba(239,68,68,0.04); }
.doc-view-item-expired { border-inline-start: 3px solid var(--danger); background: rgba(239,68,68,0.08); }
.doc-view-item-info { flex: 1; min-width: 0; }
.doc-view-item-name {
font-size: 0.95rem;
font-weight: 700;
color: var(--text);
margin-bottom: 4px;
}
.doc-view-item-date {
font-size: 0.75rem;
color: var(--muted);
}
/* Countdown bubble */
.doc-view-countdown {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 54px;
padding: 8px 10px;
border-radius: 10px;
flex-shrink: 0;
}
.doc-view-countdown.safe { background: rgba(34,197,94,0.1); color: #22c55e; }
.doc-view-countdown.caution { background: rgba(234,179,8,0.1); color: #eab308; }
.doc-view-countdown.warning { background: rgba(249,115,22,0.1); color: #f97316; }
.doc-view-countdown.critical { background: rgba(239,68,68,0.12); color: var(--danger); }
.doc-view-countdown.expired { background: var(--danger); color: #fff; }
.doc-cd-num { font-size: 1.3rem; font-weight: 800; line-height: 1; font-family: 'IBM Plex Mono', monospace; }
.doc-cd-lbl { font-size: 0.65rem; font-weight: 600; opacity: .8; }
.doc-view-no-expiry { font-size: 0.75rem; color: var(--muted); }
/* ─── DOCUMENT CARD PREVIEW (dashboard) ─────────────────────── */
.docs-preview-list {
display: flex;
flex-direction: column;
gap: 5px;
width: 100%;
border-top: 1px solid rgba(255,255,255,0.05);
padding-top: 8px;
margin-top: 4px;
}
.doc-summary-badge {
font-size: 0.7rem;
font-weight: 800;
padding: 3px 10px;
border-radius: 20px;
display: inline-flex;
align-items: center;
gap: 4px;
margin-bottom: 2px;
align-self: flex-start;
}
.doc-summary-badge.expired { background: rgba(239,68,68,0.15); color: var(--danger); border: 1px solid rgba(239,68,68,0.25); }
.doc-summary-badge.critical { background: rgba(249,115,22,0.12); color: #f97316; border: 1px solid rgba(249,115,22,0.2); }
.doc-item-preview {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
font-size: 0.8rem;
padding: 5px 6px;
border-radius: 7px;
}
.doc-item-preview:last-child { border-bottom: none; }
.doc-item-critical { background: rgba(239,68,68,0.06); }
.doc-item-expired { background: rgba(239,68,68,0.1); }
.doc-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.doc-item-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
flex-shrink: 0;
}
.doc-urgency { font-size: 0.68rem; font-weight: 800; padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
.doc-urgency.safe { background: rgba(34,197,94,0.1); color: #22c55e; }
.doc-urgency.caution { background: rgba(234,179,8,0.1); color: #eab308; }
.doc-urgency.warning { background: rgba(249,115,22,0.1); color: #f97316; }
.doc-urgency.critical { background: rgba(239,68,68,0.12); color: var(--danger); }
.doc-urgency.expired { background: var(--danger); color: white; }
.doc-expiry-date { font-size: 0.65rem; color: var(--muted); white-space: nowrap; }
/* ─── SUBSCRIPTION VIEW MODAL ───────────────────────────────── */
.sub-view-box { max-width: 480px; }
.sub-view-list {
display: flex;
flex-direction: column;
gap: 8px;
padding: 4px 0;
}
.sub-view-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 16px;
border-radius: 12px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-inline-start: 3px solid rgba(255,255,255,0.12);
}
.sub-view-ok { border-right-color: var(--accent); }
.sub-view-soon30 { border-right-color: #eab308; }
.sub-view-soon7 { border-right-color: #f97316; }
.sub-view-soon3 { border-right-color: var(--danger); background: rgba(239,68,68,0.05); }
.sub-view-overdue{ border-right-color: var(--danger); background: rgba(239,68,68,0.08); }
.sub-view-item-info { flex: 1; min-width: 0; }
.sub-view-item-name {
font-size: 0.95rem;
font-weight: 700;
color: var(--text);
margin-bottom: 5px;
}
.sub-view-item-meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.sub-view-cycle {
font-size: 0.72rem;
background: rgba(255,255,255,0.07);
border-radius: 5px;
padding: 2px 8px;
color: var(--muted);
}
.sub-view-date {
font-size: 0.72rem;
color: var(--muted);
}
.sub-view-item-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
flex-shrink: 0;
}
.sub-view-amount {
font-size: 1.05rem;
font-weight: 800;
color: var(--accent);
font-family: 'IBM Plex Mono', monospace;
}
.sub-view-currency { font-size: 0.75rem; font-weight: 600; opacity: .7; }
.sub-urgency-badge {
font-size: 0.68rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 5px;
white-space: nowrap;
}
.sub-urgency-badge.ok { background: rgba(34,197,94,0.1); color: #22c55e; }
.sub-urgency-badge.soon30 { background: rgba(234,179,8,0.1); color: #eab308; }
.sub-urgency-badge.soon7 { background: rgba(249,115,22,0.12);color: #f97316; }
.sub-urgency-badge.soon3 { background: rgba(239,68,68,0.12); color: var(--danger); }
.sub-urgency-badge.overdue { background: var(--danger); color: white; }
/* Totals section */
.sub-view-totals {
margin-top: 14px;
padding: 14px 16px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
}
.sub-totals-title {
font-size: 0.75rem;
color: var(--muted);
font-weight: 700;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: .5px;
}
.sub-total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
color: var(--text);
padding: 4px 0;
}
.sub-total-row b { color: var(--accent); font-family: 'IBM Plex Mono', monospace; }
/* ─── END SUBSCRIPTION VIEW MODAL ───────────────────────────── */
/* ─── HIDDEN FROM ALL ───────────────────────────────────────── */
/* Small eye-slash badge on cards hidden from "all" view */
.card-hidden-all {
position: relative;
}
.card-hidden-all::after {
content: '👁';
position: absolute;
top: 7px;
left: 8px;
font-size: 0.65rem;
opacity: 0.35;
filter: grayscale(1);
pointer-events: none;
line-height: 1;
}
.card-hidden-all:hover::after {
opacity: 0.65;
}
/* ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
body.mobile-sidebar-open {
overflow: hidden;
}
.dash-header {
height: auto !important;
min-height: 0 !important;
padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 12px !important;
gap: 10px;
background: rgba(9,9,14,0.94) !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
box-shadow: 0 12px 28px rgba(0,0,0,0.32);
}
.dash-header-right {
gap: 10px !important;
flex: 1;
min-width: 0;
}
.dash-header-left {
gap: 8px !important;
flex-shrink: 0;
}
.header-section-label,
.header-section-label + .header-divider,
.header-date,
.header-time-pill,
.header-time-pill + div,
#edit-order-btn,
#quick-add-btn,
.dash-header-left button[onclick="openCmdPalette()"] {
display: none !important;
}
.mobile-menu-btn {
display: flex !important;
width: 42px !important;
height: 42px !important;
border-radius: 16px !important;
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
color: var(--text) !important;
}
.dash-logo {
font-size: 1.32rem !important;
letter-spacing: 1.2px !important;
}
.header-search-wrap {
flex: 1;
min-width: 0;
height: 42px !important;
border-radius: 16px !important;
padding: 0 14px !important;
gap: 8px !important;
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
}
.header-icon-btn,
.header-alert-badge {
width: 40px !important;
height: 40px !important;
border-radius: 14px !important;
padding: 0 !important;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
}
.header-icon-btn::before {
display: none !important;
}
#settings-btn {
margin-right: 0 !important;
}
.sidebar {
position: fixed !important;
top: 0 !important;
right: 0 !important;
width: min(88vw, 320px) !important;
height: 100dvh !important;
padding: calc(env(safe-area-inset-top, 0px) + 14px) 12px calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
background: linear-gradient(180deg, rgba(12,12,18,0.99), rgba(9,9,14,0.98)) !important;
border-left: 1px solid rgba(255,255,255,0.08) !important;
box-shadow: -28px 0 70px rgba(0,0,0,0.48) !important;
transform: translateX(108%) !important;
opacity: 0;
pointer-events: none;
overflow-y: auto;
z-index: 220 !important;
}
.sidebar.mobile-open {
transform: translateX(0) !important;
opacity: 1;
pointer-events: auto;
}
.sidebar.expanded {
width: min(88vw, 320px) !important;
}
.mobile-sidebar-head {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
padding: 0 4px 14px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-sidebar-close {
width: 42px;
height: 42px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
background: rgba(255,255,255,0.05);
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
}
.sidebar-top {
display: none !important;
}
.sidebar-filters,
.sidebar-bottom {
width: 100%;
align-items: stretch;
padding: 0 !important;
gap: 8px !important;
}
.sidebar-stats {
display: flex !important;
width: 100%;
flex-direction: column;
gap: 8px;
margin: 14px 0 12px;
padding: 14px;
border-radius: 18px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
}
.sidebar-nav-btn,
.sidebar-icon-btn {
width: 100% !important;
min-height: 50px;
justify-content: flex-start !important;
gap: 12px !important;
padding: 0 14px !important;
border-radius: 14px !important;
}
.sidebar-label {
display: block !important;
font-size: 0.92rem !important;
font-weight: 700;
}
.sidebar .sidebar-count {
margin-inline-start: auto;
}
.sidebar .sidebar-icon-btn::before,
.sidebar .sidebar-nav-btn::before {
display: none !important;
}
.sidebar-overlay {
z-index: 210 !important;
background: rgba(3,3,5,0.72) !important;
backdrop-filter: blur(6px) !important;
}
.dash-body {
display: block !important;
}
.main-content {
padding: 14px 12px calc(104px + env(safe-area-inset-bottom, 0px)) !important;
margin-right: 0 !important;
}
.cards-toolbar {
position: sticky !important;
top: 0;
z-index: 40;
margin: 0 0 14px;
padding: 0 0 8px;
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 10px;
background: linear-gradient(180deg, rgba(7,7,11,0.98), rgba(7,7,11,0.82) 70%, rgba(7,7,11,0));
backdrop-filter: blur(16px);
}
.cards-toolbar-left {
gap: 8px !important;
overflow-x: auto;
padding: 2px 0 4px;
scrollbar-width: none;
}
.cards-toolbar-left::-webkit-scrollbar {
display: none;
}
.toolbar-btn,
.sort-select {
flex: 0 0 auto;
height: 40px !important;
padding: 0 12px !important;
border-radius: 14px !important;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.05);
color: var(--text);
}
.toolbar-btn span {
display: inline !important;
}
.dash-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.card,
.card-compact,
.card-wide,
.card-tall,
.card-auto-height {
grid-column: span 1 !important;
grid-row: auto !important;
min-height: 0 !important;
height: auto !important;
display: grid !important;
grid-template-columns: 44px minmax(0, 1fr);
grid-auto-rows: min-content;
align-items: start;
gap: 8px 12px !important;
padding: 16px !important;
border-radius: 22px !important;
background: linear-gradient(180deg, rgba(13,13,18,0.96), rgba(10,10,15,0.92)) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
box-shadow: 0 14px 28px rgba(0,0,0,0.34), 0 0 0 1px rgba(255,255,255,0.02) inset !important;
transform: none !important;
}
.card-icon,
.card-compact .card-icon,
.card-tall .card-icon {
grid-column: 1;
grid-row: 1 / span 3;
width: 44px !important;
height: 44px !important;
margin: 0 !important;
border-radius: 16px !important;
font-size: 1.35rem !important;
align-self: start;
}
.card-type-badge {
position: static !important;
grid-column: 2;
grid-row: 1;
justify-self: start;
font-size: 0.66rem !important;
opacity: 0.92;
}
.card-title,
.card-compact .card-title,
.card-tall .card-title {
grid-column: 2;
grid-row: 2;
font-size: 1.02rem !important;
line-height: 1.3 !important;
margin: -2px 0 0 !important;
}
.card-meta,
.card-compact .card-meta,
.card-tall .card-meta {
grid-column: 2;
grid-row: 3;
flex: none !important;
padding: 0 !important;
font-size: 0.82rem !important;
line-height: 1.6 !important;
max-height: none !important;
overflow: visible !important;
}
.card-actions,
.card-compact .card-actions {
position: static !important;
grid-column: 1 / -1;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
justify-content: flex-end !important;
flex-wrap: nowrap;
gap: 6px;
width: 100%;
margin-top: 6px;
padding: 8px 0 0 !important;
background: none !important;
border-top: 1px solid rgba(255,255,255,0.04);
}
.card-compact .card-actions button {
opacity: 1 !important;
}
.card-actions button,
.card-delete,
.card-edit,
.card-reset,
.card-copy,
.card-more-btn {
min-width: 36px;
min-height: 36px;
padding: 0 10px !important;
border-radius: 10px !important;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.8rem !important;
border: 1px solid rgba(255,255,255,0.06);
background: rgba(255,255,255,0.04);
}
.card-delete {
color: var(--danger) !important;
background: rgba(239,68,68,0.1) !important;
border-color: rgba(239,68,68,0.2) !important;
}
.card-more-btn {
background: rgba(139,92,246,0.08) !important;
border-color: rgba(139,92,246,0.15) !important;
color: var(--accent) !important;
font-size: 1.1rem !important;
}
.card-hover-preview {
display: none !important;
}
.card-wide .subs-preview-list,
.card-wide .card-checklist-preview {
grid-template-columns: 1fr !important;
}
.tracker-value-big,
.counter-number {
font-size: 2.4rem !important;
}
.mobile-bottom-nav {
display: flex !important;
position: fixed !important;
left: 12px !important;
right: 12px !important;
bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
height: 72px !important;
padding: 8px !important;
border-radius: 24px !important;
background: rgba(12,12,18,0.92) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
box-shadow: 0 20px 50px rgba(0,0,0,0.45) !important;
gap: 4px !important;
z-index: 180 !important;
transition: transform 0.24s ease, opacity 0.24s ease !important;
}
.mob-nav-btn {
gap: 4px !important;
padding: 8px 2px !important;
border-radius: 18px !important;
color: rgba(255,255,255,0.42) !important;
font-size: 0.63rem !important;
}
.mob-nav-btn svg {
width: 21px !important;
height: 21px !important;
}
.mob-nav-btn.active {
color: #f3efff !important;
background: linear-gradient(180deg, rgba(139,92,246,0.24), rgba(139,92,246,0.08));
}
.mob-nav-btn.active::after {
bottom: 8px !important;
width: 16px !important;
background: var(--accent) !important;
}
.mob-nav-add {
width: 56px !important;
height: 56px !important;
margin: 0 6px !important;
border-radius: 20px !important;
background: linear-gradient(180deg, #2ddb78, #1fcb68) !important;
color: #09110d !important;
box-shadow: 0 14px 32px rgba(45,219,120,0.32) !important;
}
.mob-nav-add svg {
width: 24px !important;
height: 24px !important;
}
body:has(.modal-overlay:not(.hidden)) .mobile-bottom-nav,
body:has(.quick-add-panel:not(.hidden)) .mobile-bottom-nav,
body:has(.sidebar-overlay.show) .mobile-bottom-nav,
body:has(.notifications-drawer.open) .mobile-bottom-nav,
body.nav-hidden .mobile-bottom-nav {
display: flex !important;
opacity: 0;
pointer-events: none;
transform: translateY(24px);
}
}
@media (max-width: 400px) {
.mobile-bottom-nav {
left: 10px !important;
right: 10px !important;
height: 68px !important;
}
.mob-nav-btn {
font-size: 0.58rem !important;
}
.mob-nav-add {
width: 44px !important;
height: 44px !important;
margin: 0 4px !important;
}
}
/* Final mobile UX pass: resolves earlier mobile rule conflicts */
@media (max-width: 768px) {
html,
body {
background-size: 36px 36px;
overscroll-behavior-y: none;
}
body.mobile-sidebar-open {
overflow: hidden;
}
.dashboard {
background:
radial-gradient(circle at 12% 0%, rgba(139,92,246,0.14), transparent 36%),
radial-gradient(circle at 100% 10%, rgba(79,172,254,0.08), transparent 30%),
linear-gradient(180deg, rgba(9,9,14,0.98), rgba(7,7,11,0.98));
}
.dash-header {
height: auto !important;
min-height: 0 !important;
padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 12px !important;
gap: 10px;
background: rgba(9,9,14,0.94) !important;
border-bottom: 1px solid rgba(255,255,255,0.06);
box-shadow: 0 12px 28px rgba(0,0,0,0.32);
}
.dash-header-right {
gap: 10px;
flex: 1;
min-width: 0;
}
.dash-header-left {
gap: 8px;
flex-shrink: 0;
}
.header-section-label,
.header-section-label + .header-divider,
.header-date,
.header-time-pill,
.header-time-pill + div,
#edit-order-btn,
#quick-add-btn,
.dash-header-left button[onclick="openCmdPalette()"] {
display: none !important;
}
.mobile-menu-btn {
display: flex !important;
width: 42px !important;
height: 42px !important;
border-radius: 16px !important;
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
color: var(--text) !important;
box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}
.mobile-menu-btn svg {
width: 20px;
height: 20px;
}
.dash-logo {
font-size: 1.32rem !important;
letter-spacing: 1.2px !important;
flex-shrink: 0;
}
.header-search-wrap {
flex: 1;
min-width: 0;
height: 42px !important;
border-radius: 16px !important;
padding: 0 14px !important;
gap: 8px !important;
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.header-search-wrap:focus-within {
border-color: rgba(79,172,254,0.34) !important;
box-shadow: 0 0 0 3px rgba(79,172,254,0.08);
}
.header-search-icon {
color: rgba(255,255,255,0.48);
}
.header-search-input {
font-size: 0.92rem !important;
}
.header-search-input::placeholder {
color: rgba(255,255,255,0.24);
font-size: 0.78rem;
}
.search-archive-toggle {
width: 28px;
height: 28px;
border-radius: 10px;
font-size: 0.78rem;
}
.header-icon-btn,
.header-alert-badge {
width: 40px !important;
height: 40px !important;
border-radius: 14px !important;
padding: 0 !important;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
}
.header-alert-badge {
justify-content: center;
}
.header-icon-btn::before {
display: none !important;
}
#settings-btn {
margin-right: 0 !important;
}
.sidebar {
position: fixed !important;
top: 0 !important;
right: 0 !important;
width: min(88vw, 320px) !important;
height: 100dvh !important;
padding: calc(env(safe-area-inset-top, 0px) + 14px) 12px calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
background: linear-gradient(180deg, rgba(12,12,18,0.99), rgba(9,9,14,0.98)) !important;
border-left: 1px solid rgba(255,255,255,0.08) !important;
box-shadow: -28px 0 70px rgba(0,0,0,0.48) !important;
transform: translateX(108%);
opacity: 0;
pointer-events: none;
transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
overflow-y: auto;
z-index: 220 !important;
gap: 0 !important;
}
.sidebar.mobile-open {
transform: translateX(0);
opacity: 1;
pointer-events: auto;
}
.sidebar.expanded {
width: min(88vw, 320px) !important;
}
.mobile-sidebar-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
padding: 0 4px 14px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-sidebar-copy {
display: flex;
flex-direction: column;
gap: 4px;
}
.mobile-sidebar-kicker {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
}
.mobile-sidebar-title {
font-size: 1.08rem;
font-weight: 800;
color: var(--text);
}
.mobile-sidebar-close {
width: 42px;
height: 42px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
background: rgba(255,255,255,0.05);
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
}
.sidebar-top {
display: none !important;
}
.sidebar-filters,
.sidebar-bottom {
width: 100%;
align-items: stretch;
padding: 0 !important;
gap: 8px !important;
}
.sidebar-stats {
display: flex !important;
width: 100%;
flex-direction: column;
gap: 8px;
margin: 14px 0 12px;
padding: 14px;
border-radius: 18px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
}
.sidebar-nav-btn,
.sidebar-icon-btn {
width: 100% !important;
min-height: 50px;
justify-content: flex-start !important;
gap: 12px !important;
padding: 0 14px !important;
border-radius: 14px !important;
}
.sidebar-nav-btn {
margin: 0 !important;
background: rgba(255,255,255,0.03);
border: 1px solid transparent;
}
.sidebar-nav-btn.active {
background: linear-gradient(180deg, rgba(139,92,246,0.24), rgba(139,92,246,0.12));
border-color: rgba(139,92,246,0.22);
box-shadow: 0 14px 30px rgba(139,92,246,0.12);
}
.sidebar-label {
display: block !important;
font-size: 0.92rem !important;
font-weight: 700;
}
.sidebar .sidebar-count {
margin-inline-start: auto;
font-size: 0.68rem;
}
.sidebar .sidebar-icon-btn::before,
.sidebar .sidebar-nav-btn::before {
display: none !important;
}
.sidebar-overlay {
z-index: 210 !important;
background: rgba(3,3,5,0.72) !important;
backdrop-filter: blur(6px) !important;
opacity: 0;
transition: opacity 0.2s ease;
}
.sidebar-overlay.show {
display: block !important;
opacity: 1;
}
.dash-body {
display: block;
}
.main-content {
padding: 14px 12px calc(104px + env(safe-area-inset-bottom, 0px)) !important;
margin-right: 0 !important;
}
.cards-toolbar {
position: sticky;
top: 0;
z-index: 40;
margin: 0 0 14px;
padding: 0 0 8px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
background: linear-gradient(180deg, rgba(7,7,11,0.98), rgba(7,7,11,0.82) 70%, rgba(7,7,11,0));
backdrop-filter: blur(16px);
}
.cards-toolbar-right {
display: flex;
align-items: center;
justify-content: space-between;
}
.toolbar-label {
font-size: 0.82rem !important;
font-weight: 700;
color: rgba(255,255,255,0.78);
padding: 0 4px;
}
.cards-toolbar-left {
gap: 8px !important;
overflow-x: auto;
padding: 2px 0 4px;
scrollbar-width: none;
scroll-snap-type: x proximity;
}
.cards-toolbar-left::-webkit-scrollbar {
display: none;
}
.toolbar-btn,
.sort-select {
flex: 0 0 auto;
height: 40px !important;
padding: 0 12px !important;
border-radius: 14px !important;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.05);
color: var(--text);
scroll-snap-align: start;
}
.toolbar-btn span {
display: inline !important;
}
.sort-select {
min-width: 132px;
font-size: 0.8rem !important;
}
.dash-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.card,
.card-compact,
.card-wide,
.card-tall,
.card-auto-height {
grid-column: span 1 !important;
grid-row: auto !important;
min-height: 0 !important;
height: auto !important;
display: grid !important;
grid-template-columns: 44px minmax(0, 1fr);
grid-auto-rows: min-content;
align-items: start;
gap: 8px 12px !important;
padding: 16px !important;
border-radius: 22px !important;
background: linear-gradient(180deg, rgba(13,13,18,0.96), rgba(10,10,15,0.92)) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
box-shadow: 0 14px 28px rgba(0,0,0,0.34), 0 0 0 1px rgba(255,255,255,0.02) inset !important;
transform: none !important;
}
.card::before {
opacity: 0.74;
}
.card:hover {
transform: none !important;
border-color: rgba(var(--card-color,255,255,255), 0.14) !important;
}
.card:active {
transform: scale(0.985) !important;
}
.card-icon,
.card-compact .card-icon,
.card-tall .card-icon {
grid-column: 1;
grid-row: 1 / span 3;
width: 44px !important;
height: 44px !important;
margin: 0 !important;
border-radius: 16px !important;
font-size: 1.35rem !important;
align-self: start;
}
.card-type-badge {
position: static !important;
top: auto !important;
left: auto !important;
grid-column: 2;
grid-row: 1;
justify-self: start;
font-size: 0.66rem !important;
opacity: 0.92;
}
.card-title,
.card-compact .card-title,
.card-tall .card-title {
grid-column: 2;
grid-row: 2;
align-self: start;
font-size: 1.02rem !important;
line-height: 1.3 !important;
margin: -2px 0 0 !important;
}
.card-meta,
.card-compact .card-meta,
.card-tall .card-meta {
grid-column: 2;
grid-row: 3;
align-self: start;
flex: none !important;
padding: 0 !important;
font-size: 0.82rem !important;
line-height: 1.6 !important;
max-height: none !important;
overflow: visible !important;
}
.card-tags-row,
.reminder-done-row,
.card-timestamp,
.card-actions {
grid-column: 1 / -1;
}
.card-actions,
.card-compact .card-actions {
position: static !important;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
justify-content: flex-start !important;
flex-wrap: wrap;
gap: 8px;
width: 100%;
margin-top: 4px;
padding: 10px 0 0 !important;
background: none !important;
}
.card-compact .card-actions button {
opacity: 1 !important;
}
.card-actions button,
.card-delete,
.card-edit,
.card-reset,
.card-copy,
.card-pin-btn,
.card-text-copy,
.card-archive-btn,
.card-move-btn {
min-width: 38px;
min-height: 38px;
padding: 0 12px !important;
border-radius: 12px !important;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.82rem !important;
border: 1px solid rgba(255,255,255,0.06);
background: rgba(255,255,255,0.05);
}
.card-delete {
background: rgba(239,68,68,0.1) !important;
border-color: rgba(239,68,68,0.16) !important;
}
.card-hover-preview {
display: none !important;
}
.card-wide .subs-preview-list,
.card-wide .card-checklist-preview {
grid-template-columns: 1fr !important;
}
.sub-item-preview,
.preview-item {
border-radius: 12px;
}
.tracker-value-big,
.counter-number {
font-size: 2.4rem !important;
}
.mobile-bottom-nav {
display: flex !important;
position: fixed !important;
left: 12px !important;
right: 12px !important;
bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
height: 72px !important;
padding: 8px !important;
border-radius: 24px !important;
background: rgba(12,12,18,0.92) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
box-shadow: 0 20px 50px rgba(0,0,0,0.45) !important;
gap: 4px !important;
z-index: 180 !important;
transition: transform 0.24s ease, opacity 0.24s ease !important;
}
.mob-nav-btn {
gap: 4px !important;
padding: 8px 2px !important;
border-radius: 18px !important;
color: rgba(255,255,255,0.42) !important;
font-size: 0.63rem !important;
}
.mob-nav-btn svg {
width: 21px !important;
height: 21px !important;
}
.mob-nav-btn.active {
color: #f3efff !important;
background: linear-gradient(180deg, rgba(139,92,246,0.24), rgba(139,92,246,0.08));
}
.mob-nav-btn.active::after {
bottom: 8px !important;
width: 16px !important;
background: var(--accent) !important;
}
.mob-nav-add {
width: 56px !important;
height: 56px !important;
margin: 0 6px !important;
border-radius: 20px !important;
background: linear-gradient(180deg, #2ddb78, #1fcb68) !important;
color: #09110d !important;
box-shadow: 0 14px 32px rgba(45,219,120,0.32) !important;
}
.mob-nav-add svg {
width: 24px !important;
height: 24px !important;
}
body:has(.modal-overlay:not(.hidden)) .mobile-bottom-nav,
body:has(.quick-add-panel:not(.hidden)) .mobile-bottom-nav,
body:has(.sidebar-overlay.show) .mobile-bottom-nav,
body:has(.notifications-drawer.open) .mobile-bottom-nav,
body.nav-hidden .mobile-bottom-nav {
display: flex !important;
opacity: 0;
pointer-events: none;
transform: translateY(24px);
}
.modal-box,
.note-modal-box,
.markdown-modal-box,
.quick-add-panel,
.notifications-drawer {
border-radius: 28px 28px 0 0 !important;
}
}
@media (max-width: 400px) {
.mobile-bottom-nav {
left: 10px !important;
right: 10px !important;
height: 68px !important;
}
.mob-nav-btn {
font-size: 0.58rem !important;
}
.mob-nav-add {
width: 44px !important;
height: 44px !important;
margin: 0 4px !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
MOBILE REDESIGN v2 — إعادة تصميم كاملة لنسخة الهاتف
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ── Body ──────────────────────────────────────────────────── */
body {
background-size: 28px 28px;
}
/* ══════════════════════════════════════════════════════════════
HEADER — رأس الصفحة
══════════════════════════════════════════════════════════════ */
.dash-header {
height: 56px;
min-height: 56px;
padding: 0 14px;
background: rgba(14, 14, 19, 0.98);
border-bottom: 1px solid rgba(255,255,255,0.07);
backdrop-filter: blur(28px);
}
.dash-header-right {
gap: 10px;
flex: 1;
min-width: 0;
}
.dash-header-left {
gap: 4px;
flex-shrink: 0;
}
/* أخفِ العناصر التي تزحم الهيدر على الهاتف */
.header-section-label,
.header-section-label + .header-divider,
.header-date,
.header-time-pill,
.header-divider,
#edit-order-btn,
.dash-header-left button[onclick="openCmdPalette()"] {
display: none !important;
}
/* زر القائمة الجانبية */
.mobile-menu-btn {
display: flex !important;
width: 38px;
height: 38px;
border-radius: 12px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
color: var(--muted);
flex-shrink: 0;
transition: all .2s;
}
.mobile-menu-btn:hover {
background: rgba(255,255,255,0.09);
color: var(--text);
}
.mobile-menu-btn:active {
transform: scale(0.94);
}
/* الشعار */
.dash-logo {
font-size: 1.25rem;
flex-shrink: 0;
letter-spacing: 1.5px;
}
/* شريط البحث */
.header-search-wrap {
flex: 1;
min-width: 0;
height: 38px;
border-radius: 12px;
padding: 0 12px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
gap: 6px;
}
.header-search-wrap:focus-within {
border-color: rgba(79,172,254,0.35);
background: rgba(255,255,255,0.07);
box-shadow: 0 0 0 3px rgba(79,172,254,0.08);
}
.header-search-input {
font-size: 0.88rem;
}
/* أزرار الهيدر */
.header-icon-btn {
width: 38px;
height: 38px;
border-radius: 11px;
}
/* أخفِ tooltip في الهاتف */
.header-icon-btn::before {
display: none !important;
}
/* ══════════════════════════════════════════════════════════════
SIDEBAR — القائمة الجانبية
══════════════════════════════════════════════════════════════ */
.sidebar {
position: fixed;
top: 0;
right: -280px;
height: 100dvh;
width: 260px;
z-index: 200;
transition: right 0.32s cubic-bezier(0.16, 1, 0.3, 1);
padding-top: 68px;
padding-bottom: 24px;
background: rgba(16, 16, 22, 0.99);
border-left: 1px solid rgba(255,255,255,0.09);
backdrop-filter: blur(28px);
box-shadow: -24px 0 80px rgba(0,0,0,0.55);
overflow-y: auto;
}
.sidebar.mobile-open {
right: 0;
}
.sidebar.expanded {
width: 260px;
}
/* أزرار القائمة الجانبية — أكبر وأسهل للضغط */
.sidebar-nav-btn {
padding: 11px 14px;
border-radius: 12px;
margin: 1px 8px;
}
.sidebar-label {
font-size: 0.9rem;
}
.sidebar-top {
display: none !important;
}
/* ══════════════════════════════════════════════════════════════
MAIN CONTENT — المحتوى الرئيسي
══════════════════════════════════════════════════════════════ */
.main-content {
padding: 14px 12px 96px !important;
margin-right: 0 !important;
}
/* ══════════════════════════════════════════════════════════════
TOOLBAR — شريط الأدوات
══════════════════════════════════════════════════════════════ */
.cards-toolbar {
padding: 0 2px 10px;
gap: 8px;
flex-wrap: wrap;
}
.cards-toolbar-left {
gap: 6px;
}
.toolbar-label {
font-size: 0.78rem;
color: rgba(255,255,255,0.3);
font-weight: 600;
}
.toolbar-btn {
padding: 6px 10px;
border-radius: 10px;
font-size: 0.75rem;
height: 32px;
gap: 4px;
}
.toolbar-btn span {
display: inline;
}
.sort-select {
height: 32px;
padding: 4px 10px;
border-radius: 10px;
font-size: 0.78rem;
display: block;
}
/* ══════════════════════════════════════════════════════════════
CARDS — الكروت
══════════════════════════════════════════════════════════════ */
.dash-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.card {
border-radius: 18px;
padding: 15px 15px 12px;
/* تحسين shadow للهاتف */
box-shadow: 0 4px 20px rgba(0,0,0,0.25),
0 1px 3px rgba(0,0,0,0.3);
}
/* أظهر أزرار الكرت دائماً على الهاتف */
.card-actions {
opacity: 1 !important;
transform: translateY(0) !important;
pointer-events: auto !important;
}
.card-title {
font-size: 0.97rem;
}
/* أزرار الكرت أكبر للضغط */
.card-edit-btn,
.card-copy-btn,
.card-del-btn,
.card-pin-btn,
.card-archive-btn,
.card-text-copy {
padding: 6px 10px !important;
min-height: 30px;
font-size: 0.8rem;
}
/* ══════════════════════════════════════════════════════════════
NOTIFICATIONS DRAWER — درج التنبيهات
══════════════════════════════════════════════════════════════ */
.notifications-drawer {
width: 100%;
max-width: 380px;
}
/* ══════════════════════════════════════════════════════════════
MODALS — النوافذ (تصميم Bottom Sheet)
══════════════════════════════════════════════════════════════ */
.modal-overlay {
align-items: flex-end !important;
padding: 0 !important;
background: rgba(0,0,0,0.72) !important;
backdrop-filter: blur(10px) !important;
}
.modal-box {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
border-radius: 26px 26px 0 0 !important;
max-height: 93dvh !important;
overflow-y: auto;
border: none !important;
border-top: 1px solid rgba(255,255,255,0.1) !important;
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
animation: slideUpSheet 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes slideUpSheet {
from { transform: translateY(60px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* Handle bar فوق المودال */
.modal-box::before {
content: '';
display: block;
width: 44px;
height: 4px;
background: rgba(255,255,255,0.14);
border-radius: 99px;
margin: 12px auto 4px;
flex-shrink: 0;
}
.modal-header {
padding: 12px 18px 16px;
}
.modal-title {
font-size: 1.1rem;
}
/* محتوى المودال */
.modal-body {
padding: 0 18px 16px;
}
/* Note modal */
.note-modal-box {
max-width: 100% !important;
}
/* ══════════════════════════════════════════════════════════════
QUICK ADD PANEL — لوحة الإضافة السريعة
══════════════════════════════════════════════════════════════ */
.quick-add-panel {
right: 0 !important;
left: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100% !important;
border-radius: 24px 24px 0 0 !important;
border: none !important;
border-top: 1px solid rgba(255,255,255,0.1) !important;
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
max-height: 85dvh;
overflow-y: auto;
box-shadow: 0 -20px 60px rgba(0,0,0,0.5);
animation: slideUpSheet 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* ══════════════════════════════════════════════════════════════
PAGE VIEW — عرض الصفحة
══════════════════════════════════════════════════════════════ */
.page-header {
padding: 14px 16px;
}
.page-content {
padding: 14px 12px 96px;
}
/* ══════════════════════════════════════════════════════════════
FAB — زر الإضافة العائم (مخفي على الهاتف)
══════════════════════════════════════════════════════════════ */
.fab {
display: none !important;
}
/* ══════════════════════════════════════════════════════════════
MOBILE BOTTOM NAVIGATION — شريط التنقل السفلي
══════════════════════════════════════════════════════════════ */
.mobile-bottom-nav {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 68px;
z-index: 150;
background: rgba(12, 12, 17, 0.98);
border-top: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(28px);
-webkit-backdrop-filter: blur(28px);
align-items: center;
padding: 0 10px;
padding-bottom: env(safe-area-inset-bottom, 0px);
gap: 0;
}
/* زر التنقل الأساسي */
.mob-nav-btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
background: none;
border: none;
color: rgba(255,255,255,0.3);
font-family: var(--font-ar);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
transition: color 0.2s ease, transform 0.15s ease;
padding: 8px 4px;
border-radius: 14px;
position: relative;
-webkit-tap-highlight-color: transparent;
}
.mob-nav-btn svg {
width: 22px;
height: 22px;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* حالة hover */
.mob-nav-btn:hover {
color: rgba(255,255,255,0.6);
}
/* حالة الضغط */
.mob-nav-btn:active svg {
transform: scale(0.88);
}
/* الزر المفعّل */
.mob-nav-btn.active {
color: var(--accent2);
}
.mob-nav-btn.active svg {
transform: translateY(-1px) scale(1.08);
filter: drop-shadow(0 0 8px rgba(79,172,254,0.45));
}
/* نقطة المؤشر للزر المفعّل */
.mob-nav-btn.active::after {
content: '';
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
width: 18px;
height: 3px;
background: var(--accent2);
border-radius: 99px;
opacity: 0.8;
animation: navDotIn 0.25s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes navDotIn {
from { width: 6px; opacity: 0; }
to { width: 18px; opacity: 0.8; }
}
/* ─── BENTO MOBILE RESETS ──────────────────────── */
.card-wide { grid-column: span 1 !important; }
.card-tall { grid-row: auto !important; min-height: auto !important; }
.card-wide .subs-preview-list,
.card-wide .card-checklist-preview {
grid-template-columns: 1fr !important;
}
.card-compact { padding: 12px 14px !important; gap: 10px !important; }
.card-compact .card-icon { width: 38px !important; height: 38px !important; font-size: 1.2rem !important; }
/* ── زر الإضافة المميز في المنتصف ──────────────── */
.mob-nav-add {
flex: 0 0 auto;
width: 54px;
height: 54px;
background: var(--accent) !important;
color: #0a0e0a !important;
border-radius: 18px !important;
margin: 0 8px;
box-shadow: 0 6px 24px rgba(34,211,117,0.38),
0 2px 8px rgba(0,0,0,0.3);
transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1),
box-shadow 0.18s ease !important;
font-size: 0 !important; /* أخفِ النص */
padding: 0 !important;
gap: 0 !important;
}
.mob-nav-add:hover {
transform: scale(1.06) translateY(-1px) !important;
box-shadow: 0 8px 28px rgba(34,211,117,0.5),
0 2px 8px rgba(0,0,0,0.3) !important;
color: #0a0e0a !important;
}
.mob-nav-add:active {
transform: scale(0.93) !important;
box-shadow: 0 3px 14px rgba(34,211,117,0.3) !important;
}
.mob-nav-add svg {
width: 26px;
height: 26px;
stroke-width: 2.8;
transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1) !important;
filter: none !important;
}
/* Hide the bottom navigation securely when modals, panels, or sidebars are open (prevents keyboards overlap issue) */
body:has(.modal-overlay:not(.hidden)) .mobile-bottom-nav,
body:has(.quick-add-panel:not(.hidden)) .mobile-bottom-nav,
body:has(.sidebar-overlay.show) .mobile-bottom-nav,
body:has(.notifications-drawer.open) .mobile-bottom-nav,
body.nav-hidden .mobile-bottom-nav {
display: none !important;
}
/* Forcefully kill any cached old button */
#mob-btn-add {
display: none !important;
}
.mob-nav-add::after {
display: none !important;
}
/* ══════════════════════════════════════════════════════════════
SIDEBAR OVERLAY — خلفية القائمة الجانبية
══════════════════════════════════════════════════════════════ */
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
cursor: pointer;
background: rgba(0,0,0,0.65);
z-index: 199;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
animation: fadeOverlay 0.25s ease;
}
@keyframes fadeOverlay {
from { opacity: 0; }
to { opacity: 1; }
}
.sidebar-overlay.show {
display: block;
}
/* ══════════════════════════════════════════════════════════════
PASSKEY BANNER — شريط البصمة
══════════════════════════════════════════════════════════════ */
.passkey-banner {
padding: 12px 14px;
font-size: 0.8rem;
gap: 8px;
flex-wrap: wrap;
}
/* ══════════════════════════════════════════════════════════════
SETTINGS DRAWER — replaced by .settings-page (full screen)
══════════════════════════════════════════════════════════════ */
/* .settings-drawer { width: 100%; max-width: 320px; } — no longer needed */
/* ══════════════════════════════════════════════════════════════
EMPTY STATE — حالة الفراغ
══════════════════════════════════════════════════════════════ */
.empty-quick-create {
gap: 8px;
justify-content: flex-start;
padding: 0 2px;
}
.empty-quick-btn {
font-size: 0.82rem;
padding: 9px 14px;
border-radius: 14px;
}
/* ══════════════════════════════════════════════════════════════
PINNED SEPARATOR — فاصل المثبّت
══════════════════════════════════════════════════════════════ */
.pinned-section-sep {
margin: 6px 0;
}
/* ══════════════════════════════════════════════════════════════
SEARCH HISTORY — سجل البحث
══════════════════════════════════════════════════════════════ */
.search-history-drop {
border-radius: 16px;
box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.search-hist-item {
padding: 9px 12px;
font-size: 0.85rem;
}
/* ══════════════════════════════════════════════════════════════
MOVE TO PAGE MODAL — نافذة النقل
══════════════════════════════════════════════════════════════ */
.move-page-btn {
padding: 14px 16px;
font-size: 0.9rem;
}
/* ══════════════════════════════════════════════════════════════
APPROVAL POPUP — نافذة الموافقة
══════════════════════════════════════════════════════════════ */
.approval-popup-inner {
border-radius: 20px;
padding: 24px 20px;
margin: 16px;
max-width: calc(100vw - 32px);
}
} /* END @media (max-width: 768px) */
/* ══════════════════════════════════════════════════════════════════
TABLET — شاشة بين 480px و768px: عمودان
══════════════════════════════════════════════════════════════════ */
@media (min-width: 480px) and (max-width: 768px) {
.dash-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
}
/* ══════════════════════════════════════════════════════════════════
SMALL PHONES — هواتف صغيرة (أقل من 400px)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
.dash-header {
padding: 0 10px;
}
.toolbar-btn span {
display: none;
}
.sort-select {
display: none;
}
.mob-nav-add {
width: 48px;
height: 48px;
border-radius: 16px !important;
margin: 0 4px;
}
.mob-nav-add svg {
width: 24px;
height: 24px;
}
.mob-nav-btn {
font-size: 0.55rem;
}
.mob-nav-btn svg {
width: 20px;
height: 20px;
}
.sidebar {
width: 240px;
right: -250px;
}
}
/* ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
html,
body {
overscroll-behavior-y: auto !important;
width: 100%;
max-width: 100vw;
overflow-x: hidden !important;
}
body.mobile-sidebar-open { overflow: hidden; }
.dashboard,
.dash-body,
.main-content,
.dash-header,
.dash-header-right,
.header-search-wrap,
.dash-grid,
.tags-bar,
.page-content {
width: 100%;
max-width: 100vw;
overflow-x: hidden;
}
.dash-header {
height: auto !important;
min-height: 0 !important;
padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 12px !important;
gap: 10px;
background: rgba(9,9,14,0.94) !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.dash-header-right { gap: 10px !important; flex: 1; min-width: 0; }
.dash-header-left { gap: 8px !important; flex-shrink: 0; }
.header-section-label,
.header-section-label + .header-divider,
.header-date,
.header-time-pill,
.header-time-pill + div,
#edit-order-btn,
#quick-add-btn,
.dash-header-left button[onclick="openCmdPalette()"] { display: none !important; }
.mobile-menu-btn {
display: flex !important;
width: 42px !important;
height: 42px !important;
border-radius: 16px !important;
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
color: var(--text) !important;
}
.dash-logo { font-size: 1.32rem !important; letter-spacing: 1.2px !important; }
.header-search-wrap {
flex: 1;
min-width: 0;
height: 42px !important;
border-radius: 16px !important;
padding: 0 14px !important;
gap: 8px !important;
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
}
.header-icon-btn,
.header-alert-badge {
width: 40px !important;
height: 40px !important;
border-radius: 14px !important;
padding: 0 !important;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
}
.header-icon-btn::before { display: none !important; }
#settings-btn { margin-right: 0 !important; }
.sidebar {
position: fixed !important;
top: 0 !important;
right: 0 !important;
width: min(88vw, 320px) !important;
height: 100dvh !important;
padding: calc(env(safe-area-inset-top, 0px) + 14px) 12px calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
background: linear-gradient(180deg, rgba(12,12,18,0.99), rgba(9,9,14,0.98)) !important;
border-left: 1px solid rgba(255,255,255,0.08) !important;
box-shadow: -28px 0 70px rgba(0,0,0,0.48) !important;
transform: translateX(108%) !important;
opacity: 0;
pointer-events: none;
overflow-y: auto;
z-index: 220 !important;
visibility: hidden;
display: none !important;
}
.sidebar.mobile-open { transform: translateX(0) !important; opacity: 1; pointer-events: auto; visibility: visible; display: flex !important; }
.sidebar.expanded { width: min(88vw, 320px) !important; }
.mobile-sidebar-head { display: flex !important; }
.sidebar-top { display: none !important; }
.sidebar-filters,
.sidebar-bottom { width: 100%; align-items: stretch; padding: 0 !important; gap: 8px !important; }
.sidebar-stats { display: flex !important; width: 100%; }
.sidebar-nav-btn,
.sidebar-icon-btn { width: 100% !important; min-height: 50px; justify-content: flex-start !important; gap: 12px !important; padding: 0 14px !important; border-radius: 14px !important; }
.sidebar-label { display: block !important; font-size: 0.92rem !important; font-weight: 700; }
.sidebar .sidebar-count { margin-inline-start: auto; }
.sidebar .sidebar-icon-btn::before,
.sidebar .sidebar-nav-btn::before { display: none !important; }
.sidebar-overlay { z-index: 210 !important; background: rgba(3,3,5,0.72) !important; backdrop-filter: blur(6px) !important; }
.notifications-drawer {
top: auto !important;
right: 12px !important;
left: 12px !important;
bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
width: auto !important;
max-width: none !important;
height: min(68dvh, 560px) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 28px !important;
background: linear-gradient(180deg, rgba(13,13,18,0.98), rgba(9,9,14,0.98)) !important;
box-shadow: 0 24px 60px rgba(0,0,0,0.5) !important;
z-index: 230 !important;
transform: translateY(calc(100% + 24px));
opacity: 0;
transition: transform .28s cubic-bezier(0.16,1,0.3,1), opacity .2s ease !important;
overflow: hidden;
display: none !important;
}
.notifications-drawer.open {
right: 12px !important;
transform: translateY(0);
opacity: 1;
display: flex !important;
}
.notifications-header {
padding: 16px 16px 12px !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
background: rgba(255,255,255,0.02);
}
.notifications-body {
padding: 14px !important;
gap: 10px !important;
overscroll-behavior: contain;
}
.drawer-crit-item {
width: 100% !important;
border-radius: 16px !important;
padding: 12px 14px !important;
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
}
/* .settings-overlay / .settings-drawer mobile overrides — replaced by .settings-page */
.settings-header {
position: sticky;
top: 0;
z-index: 3;
margin: 0 !important;
padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 14px;
background: rgba(10,10,15,0.92);
backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.settings-header span {
font-size: 1rem;
font-weight: 800;
}
.settings-header button {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
background: rgba(255,255,255,0.04);
}
.settings-list {
flex: none !important;
padding: 12px 12px 4px;
gap: 8px;
}
.settings-item {
min-height: 52px;
padding: 14px 16px;
border-radius: 16px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
}
.settings-section-title {
padding: 16px 16px 8px;
margin-top: 8px;
}
.autolock-row {
padding: 0 12px 12px;
flex-wrap: wrap;
gap: 8px;
}
.autolock-opt {
min-height: 42px;
border-radius: 14px;
padding: 0 14px;
}
.settings-accent-row {
padding: 8px 16px 14px;
}
.settings-tags-list,
.trusted-devices-list {
padding: 0 12px 12px;
}
.settings-footer {
margin-top: 10px;
padding: 16px;
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.dash-body { display: block !important; }
.main-content {
padding: 14px 12px calc(104px + env(safe-area-inset-bottom, 0px)) !important;
margin-right: 0 !important;
overflow-y: visible !important;
}
.cards-toolbar {
position: static !important;
top: auto !important;
z-index: auto !important;
margin: 0 !important;
padding: 0 !important;
display: none !important;
background: transparent !important;
backdrop-filter: none !important;
}
.cards-toolbar-right { display: none !important; }
.cards-toolbar-left { display: none !important; }
.cards-toolbar-left::-webkit-scrollbar { display: none; }
.toolbar-btn,
.sort-select {
flex: 0 0 auto;
height: 40px !important;
padding: 0 12px !important;
border-radius: 14px !important;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.05);
color: var(--text);
}
.toolbar-btn span { display: inline !important; }
.dash-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
.card,
.card-compact,
.card-wide,
.card-tall,
.card-auto-height {
grid-column: span 1 !important;
grid-row: auto !important;
min-height: 0 !important;
height: auto !important;
display: grid !important;
grid-template-columns: 44px minmax(0, 1fr);
grid-auto-rows: min-content;
align-items: start;
gap: 8px 12px !important;
padding: 16px !important;
border-radius: 22px !important;
background: linear-gradient(180deg, rgba(13,13,18,0.96), rgba(10,10,15,0.92)) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
box-shadow: 0 14px 28px rgba(0,0,0,0.34), 0 0 0 1px rgba(255,255,255,0.02) inset !important;
transform: none !important;
}
.card-icon,
.card-compact .card-icon,
.card-tall .card-icon {
grid-column: 1;
grid-row: 1 / span 3;
width: 44px !important;
height: 44px !important;
margin: 0 !important;
border-radius: 16px !important;
font-size: 1.35rem !important;
align-self: start;
}
.card-type-badge { position: static !important; grid-column: 2; grid-row: 1; justify-self: start; font-size: 0.64rem !important; }
.card-title,
.card-compact .card-title,
.card-tall .card-title { grid-column: 2; grid-row: 2; font-size: 0.98rem !important; line-height: 1.3 !important; margin: -2px 0 0 !important; }
.card-meta,
.card-compact .card-meta,
.card-tall .card-meta { grid-column: 2; grid-row: 3; flex: none !important; padding: 0 !important; font-size: 0.8rem !important; line-height: 1.55 !important; max-height: none !important; overflow: visible !important; }
/* Hide wifi/server large icons on mobile — card-icon col handles it */
.wifi-signal-icon { display: none !important; }
.server-terminal-header { padding: 2px 0 !important; }
/* Compact type-specific bodies on mobile */
.wifi-ssid-big { font-size: 0.95rem !important; }
.tracker-num-huge { font-size: 1.6rem !important; }
.counter-big-num { font-size: 2rem !important; }
.countdown-ring-svg { width: 52px !important; height: 52px !important; }
.counter-tap-area { width: 72px !important; height: 72px !important; }
.card-actions,
.card-compact .card-actions {
position: static !important;
grid-column: 1 / -1;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
justify-content: flex-start !important;
flex-wrap: wrap;
gap: 8px;
width: 100%;
margin-top: 4px;
padding: 10px 0 0 !important;
background: none !important;
}
.card-actions > :not(.card-more-btn),
.card-compact .card-actions > :not(.card-more-btn) {
display: none !important;
}
.card-compact .card-actions button { opacity: 1 !important; }
.card-actions button,
.card-delete,
.card-edit,
.card-reset,
.card-copy,
.card-pin-btn,
.card-text-copy,
.card-archive-btn,
.card-move-btn {
min-width: 38px;
min-height: 38px;
padding: 0 12px !important;
border-radius: 12px !important;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.82rem !important;
border: 1px solid rgba(255,255,255,0.06);
background: rgba(255,255,255,0.05);
}
.card-more-btn {
display: inline-flex !important;
min-width: 44px !important;
min-height: 44px !important;
padding: 0 !important;
border-radius: 14px !important;
font-size: 1.2rem !important;
line-height: 1 !important;
color: rgba(255,255,255,0.94) !important;
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
box-shadow: 0 14px 28px rgba(0,0,0,0.22);
}
.card-context-menu.mobile-sheet {
left: 12px !important;
right: 12px !important;
top: auto !important;
bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
width: auto !important;
min-width: 0 !important;
border-radius: 22px !important;
padding: 8px !important;
background: rgba(15,16,24,0.96) !important;
border-color: rgba(255,255,255,0.08) !important;
box-shadow: 0 24px 54px rgba(0,0,0,0.5) !important;
backdrop-filter: blur(20px);
animation: ctx-sheet-in .18s ease !important;
}
.card-context-menu.mobile-sheet .ctx-item {
min-height: 48px;
padding: 12px 14px;
border-radius: 14px;
font-size: 0.94rem;
}
.card-delete { background: rgba(239,68,68,0.1) !important; border-color: rgba(239,68,68,0.16) !important; }
.card-hover-preview { display: none !important; }
.card-wide .subs-preview-list,
.card-wide .card-checklist-preview { grid-template-columns: 1fr !important; }
.tracker-value-big,
.counter-number { font-size: 2.4rem !important; }
.mobile-bottom-nav {
display: flex !important;
position: fixed !important;
left: 12px !important;
right: 12px !important;
bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
height: 72px !important;
padding: 8px !important;
border-radius: 24px !important;
background: rgba(12,12,18,0.92) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
box-shadow: 0 20px 50px rgba(0,0,0,0.45) !important;
gap: 4px !important;
z-index: 180 !important;
transition: transform 0.24s ease, opacity 0.24s ease !important;
}
.mob-nav-btn { gap: 4px !important; padding: 8px 2px !important; border-radius: 18px !important; color: rgba(255,255,255,0.42) !important; font-size: 0.63rem !important; }
.mob-nav-btn svg { width: 21px !important; height: 21px !important; }
.mob-nav-btn.active { color: #f3efff !important; background: linear-gradient(180deg, rgba(139,92,246,0.24), rgba(139,92,246,0.08)); }
.mob-nav-btn.active::after { bottom: 8px !important; width: 16px !important; background: var(--accent) !important; }
.mob-nav-add { width: 56px !important; height: 56px !important; margin: 0 6px !important; border-radius: 20px !important; background: linear-gradient(180deg, #2ddb78, #1fcb68) !important; color: #09110d !important; box-shadow: 0 14px 32px rgba(45,219,120,0.32) !important; }
.mob-nav-add svg { width: 24px !important; height: 24px !important; }
body:has(.modal-overlay:not(.hidden)) .mobile-bottom-nav,
body:has(.quick-add-panel:not(.hidden)) .mobile-bottom-nav,
body:has(.sidebar-overlay.show) .mobile-bottom-nav,
body:has(.notifications-drawer.open) .mobile-bottom-nav,
body:has(.settings-page:not(.hidden)) .mobile-bottom-nav,
body.nav-hidden .mobile-bottom-nav {
display: flex !important;
opacity: 0;
pointer-events: none;
transform: translateY(24px);
}
}
@media (max-width: 400px) {
.notifications-drawer {
left: 10px !important;
right: 10px !important;
bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
height: min(72dvh, 520px) !important;
}
.mobile-bottom-nav { left: 10px !important; right: 10px !important; height: 68px !important; }
.mob-nav-btn { font-size: 0.58rem !important; }
.mob-nav-add { width: 50px !important; height: 50px !important; margin: 0 4px !important; }
}
@media (max-width: 768px) {
.card,
.card-compact,
.card-wide,
.card-tall,
.card-auto-height {
grid-template-columns: 36px minmax(0, 1fr) 44px !important;
gap: 4px 8px !important;
padding: 12px 12px 10px !important;
}
.card-icon,
.card-compact .card-icon,
.card-tall .card-icon {
grid-column: 3 !important;
grid-row: 1 / span 3 !important;
width: 40px !important;
height: 40px !important;
border-radius: 14px !important;
font-size: 0.98rem !important;
}
.card-type-badge {
grid-column: 2 !important;
grid-row: 1 !important;
align-self: start;
justify-self: start;
margin: 1px 0 0 !important;
font-size: 0.68rem !important;
}
.card-title,
.card-compact .card-title,
.card-tall .card-title {
grid-column: 2 !important;
grid-row: 2 !important;
margin: 0 !important;
font-size: 1.03rem !important;
line-height: 1.24 !important;
min-width: 0;
}
.card-meta,
.card-compact .card-meta,
.card-tall .card-meta {
grid-column: 2 !important;
grid-row: 3 !important;
min-width: 0;
font-size: 0.8rem !important;
line-height: 1.5 !important;
}
.card[data-type="note"] .card-meta,
.card[data-type="quicktext"] .card-meta,
.card[data-type="markdown"] .card-meta {
display: -webkit-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden !important;
}
.card-tags-row {
grid-column: 2 / 4 !important;
grid-row: 4 !important;
margin-top: 4px !important;
}
.card-actions,
.card-compact .card-actions {
grid-column: 1 !important;
grid-row: 1 / span 3 !important;
align-self: start !important;
justify-self: start !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.card-more-btn {
min-width: 34px !important;
min-height: 34px !important;
border-radius: 11px !important;
font-size: 0.92rem !important;
background: rgba(255,255,255,0.06) !important;
box-shadow: none !important;
}
.card-more-btn.active {
background: rgba(255,255,255,0.12) !important;
border-color: rgba(255,255,255,0.16) !important;
}
.reminder-done-row {
grid-column: 2 / 4 !important;
margin-top: 6px !important;
padding-top: 0 !important;
justify-content: flex-start !important;
}
.card-timestamp {
grid-column: 2 / 4 !important;
padding: 0 !important;
margin-top: 8px !important;
font-size: 0.68rem !important;
text-align: right !important;
color: rgba(255,255,255,0.24) !important;
}
.card.pinned-card::after,
.card-hidden-all::after {
display: none !important;
}
.card.pinned-card .card-type-badge::before {
content: '📌 ';
opacity: 0.9;
}
.docs-preview-compact {
gap: 4px !important;
margin-top: 2px !important;
padding-top: 6px !important;
}
.docs-preview-compact .doc-summary-badge {
font-size: 0.62rem !important;
padding: 2px 7px !important;
margin-bottom: 0 !important;
}
.docs-preview-compact .doc-item-preview {
padding: 4px 0 !important;
border-radius: 0 !important;
background: none !important;
border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.docs-preview-compact .doc-item-preview:last-child {
border-bottom: none !important;
}
.docs-preview-compact .doc-name {
font-size: 0.74rem !important;
font-weight: 600 !important;
}
.docs-preview-compact .doc-urgency {
font-size: 0.58rem !important;
padding: 1px 5px !important;
border-radius: 999px !important;
}
.docs-preview-compact .doc-expiry-date {
display: none !important;
}
.doc-item-more {
justify-content: center !important;
color: rgba(255,255,255,0.46) !important;
font-size: 0.68rem !important;
border-bottom: none !important;
}
.card-context-menu.mobile-sheet {
padding: 10px 8px 8px !important;
}
.card-context-menu.mobile-sheet .ctx-sheet-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 2px 6px 10px;
}
.card-context-menu.mobile-sheet .ctx-sheet-title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: rgba(255,255,255,0.8);
}
.card-context-menu.mobile-sheet .ctx-item {
justify-content: space-between;
}
.dash-grid.compact-mode {
gap: 10px !important;
}
.dash-grid.compact-mode .card,
.dash-grid.compact-mode .card-compact,
.dash-grid.compact-mode .card-wide,
.dash-grid.compact-mode .card-tall,
.dash-grid.compact-mode .card-auto-height {
grid-template-columns: 30px minmax(0, 1fr) 38px !important;
gap: 2px 7px !important;
padding: 10px 10px 9px !important;
border-radius: 16px !important;
}
.dash-grid.compact-mode .card-icon,
.dash-grid.compact-mode .card-compact .card-icon,
.dash-grid.compact-mode .card-tall .card-icon {
width: 34px !important;
height: 34px !important;
border-radius: 12px !important;
font-size: 0.9rem !important;
}
.dash-grid.compact-mode .card-type-badge {
font-size: 0.6rem !important;
opacity: 0.74 !important;
}
.dash-grid.compact-mode .card-title,
.dash-grid.compact-mode .card-compact .card-title,
.dash-grid.compact-mode .card-tall .card-title {
font-size: 0.94rem !important;
line-height: 1.16 !important;
}
.dash-grid.compact-mode .card-meta,
.dash-grid.compact-mode .card-compact .card-meta,
.dash-grid.compact-mode .card-tall .card-meta {
font-size: 0.72rem !important;
line-height: 1.3 !important;
}
.dash-grid.compact-mode .card[data-type="note"] .card-meta,
.dash-grid.compact-mode .card[data-type="quicktext"] .card-meta,
.dash-grid.compact-mode .card[data-type="markdown"] .card-meta {
-webkit-line-clamp: 1;
}
.dash-grid.compact-mode .card-more-btn {
min-width: 30px !important;
min-height: 30px !important;
border-radius: 10px !important;
font-size: 0.82rem !important;
}
.dash-grid.compact-mode .card-tags-row,
.dash-grid.compact-mode .card-timestamp {
display: none !important;
}
.dash-grid.compact-mode .docs-preview-list {
gap: 3px !important;
margin-top: 1px !important;
padding-top: 4px !important;
}
.dash-grid.compact-mode .doc-summary-badge {
font-size: 0.58rem !important;
padding: 1px 6px !important;
}
.dash-grid.compact-mode .doc-item-preview {
padding: 3px 0 !important;
}
.dash-grid.compact-mode .doc-name {
font-size: 0.7rem !important;
}
.dash-grid.compact-mode .doc-urgency {
font-size: 0.54rem !important;
padding: 1px 5px !important;
}
.dash-grid.compact-mode .doc-expiry-date {
display: none !important;
}
.dash-grid.compact-mode .reminder-done-row {
margin-top: 4px !important;
}
.dash-grid.compact-mode .tracker-value-big,
.dash-grid.compact-mode .counter-number {
font-size: 1.8rem !important;
}
}
@media (max-width: 768px) {
html,
body {
height: 100%;
overflow: hidden !important;
}
#dashboard.dashboard.hidden {
display: none !important;
}
#dashboard.dashboard:not(.hidden) {
height: 100dvh !important;
min-height: 100dvh !important;
max-height: 100dvh !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
#dashboard.dashboard:not(.hidden) .dash-header {
position: relative !important;
flex: 0 0 auto !important;
z-index: 185 !important;
}
#dashboard.dashboard:not(.hidden) .dash-body {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow: hidden !important;
display: block !important;
}
#dashboard.dashboard:not(.hidden) .main-content {
height: 100% !important;
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain !important;
padding-top: 10px !important;
padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
}
#dashboard .main-content::-webkit-scrollbar,
#page-view .page-content::-webkit-scrollbar {
display: none;
}
#page-view.page-view {
height: 100dvh !important;
max-height: 100dvh !important;
overflow: hidden !important;
}
#page-view .page-header {
flex: 0 0 auto !important;
}
#page-view .page-content {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain !important;
padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
}
}
@media (min-width: 769px) {
.dash-grid {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
grid-auto-flow: dense !important;
grid-auto-rows: auto !important;
align-items: start !important;
align-content: start !important;
gap: 18px !important;
}
.dash-grid.compact-mode {
grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)) !important;
gap: 14px !important;
}
.dash-grid .card,
.dash-grid .card-compact,
.dash-grid .card-wide,
.dash-grid .card-tall,
.dash-grid .card-auto-height,
.dash-grid .card-phantom {
grid-column: span 1 !important;
grid-row: span 1 !important;
}
.dash-grid .card,
.dash-grid .card-compact,
.dash-grid .card-wide,
.dash-grid .card-tall,
.dash-grid .card-auto-height {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
grid-column: span 1 !important;
grid-row: span 1 !important;
height: auto !important;
min-height: 190px !important;
max-height: none !important;
padding: 18px 18px 20px !important;
overflow: hidden !important;
border-radius: 24px !important;
background:
linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.012)),
linear-gradient(135deg, rgba(var(--card-color,255,255,255),0.085), transparent 52%),
rgba(12, 14, 22, 0.94) !important;
border: 1px solid rgba(255,255,255,0.075) !important;
box-shadow:
0 18px 44px rgba(0,0,0,0.34),
inset 0 1px 0 rgba(255,255,255,0.04) !important;
text-align: right !important;
}
/* Phantom card fixed height */
.dash-grid .card-phantom {
height: 190px !important;
min-height: 190px !important;
max-height: 190px !important;
}
.dash-grid.compact-mode .card,
.dash-grid.compact-mode .card-compact,
.dash-grid.compact-mode .card-wide,
.dash-grid.compact-mode .card-tall,
.dash-grid.compact-mode .card-auto-height {
min-height: 198px !important;
padding: 18px 18px 16px !important;
gap: 8px 14px !important;
border-radius: 22px !important;
}
.dash-grid .card::before {
background: radial-gradient(circle at top right, rgba(var(--card-color,255,255,255), 0.16), transparent 62%) !important;
opacity: 0.34 !important;
}
.dash-grid .card:hover {
transform: translateY(-3px) !important;
border-color: rgba(var(--card-color,255,255,255), 0.18) !important;
box-shadow:
0 24px 56px rgba(0,0,0,0.4),
0 0 0 1px rgba(var(--card-color,255,255,255),0.08),
inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.dash-grid .bento-glow-bg {
position: absolute;
inset: auto auto -28% -18%;
width: 180px;
height: 180px;
border-radius: 999px;
opacity: 0.08;
filter: blur(42px);
pointer-events: none;
}
.dash-grid .card-type-badge {
font-size: 0.68rem !important;
letter-spacing: 0.08em;
opacity: 0.78;
}
.dash-grid .card.pinned-card::after,
.dash-grid .card-hidden-all::after {
display: none !important;
}
.dash-grid .card.pinned-card .card-type-badge::before {
content: '📌';
opacity: 0.92;
}
.dash-grid .card-icon,
.dash-grid .card-compact .card-icon,
.dash-grid .card-tall .card-icon {
width: 34px !important;
height: 34px !important;
border-radius: 10px !important;
font-size: 1.1rem !important;
}
.dash-grid.compact-mode .card-icon,
.dash-grid.compact-mode .card-compact .card-icon,
.dash-grid.compact-mode .card-tall .card-icon {
width: 52px !important;
height: 52px !important;
border-radius: 16px !important;
font-size: 1.15rem !important;
}
.dash-grid .card-title,
.dash-grid .card-compact .card-title,
.dash-grid .card-tall .card-title {
font-size: 1.05rem !important;
line-height: 1.2 !important;
font-weight: 700 !important;
}
.dash-grid.compact-mode .card-title,
.dash-grid.compact-mode .card-compact .card-title,
.dash-grid.compact-mode .card-tall .card-title {
font-size: 1.08rem !important;
}
.dash-grid .card-meta,
.dash-grid .card-compact .card-meta,
.dash-grid .card-tall .card-meta {
display: block !important;
flex: none !important;
min-width: 0;
padding: 0 !important;
overflow: visible !important;
color: rgba(241, 245, 249, 0.72) !important;
font-size: 0.88rem !important;
line-height: 1.6 !important;
width: 100% !important;
}
/* Text-heavy types: clamp long content so cards don't get excessively tall */
.dash-grid .card[data-type="note"] .card-meta,
.dash-grid .card[data-type="quicktext"] .card-meta,
.dash-grid .card[data-type="markdown"] .card-meta,
.dash-grid .card[data-type="command"] .card-meta {
display: -webkit-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 7;
overflow: hidden !important;
max-height: none !important;
}
.dash-grid .card[data-type="tracker"],
.dash-grid .card[data-type="counter"],
.dash-grid .card[data-type="expense"] {
text-align: right !important;
justify-content: initial !important;
align-items: stretch !important;
}
.dash-grid .card-tall .card-meta {
display: flex !important;
flex-direction: column;
gap: 12px;
justify-content: flex-start !important;
width: 100%;
}
.dash-grid .tracker-value-big,
.dash-grid .counter-number {
font-size: 2.7rem !important;
text-shadow: none !important;
}
.dash-grid.compact-mode .tracker-value-big,
.dash-grid.compact-mode .counter-number {
font-size: 2.1rem !important;
}
.dash-grid .counter-display {
justify-content: flex-start !important;
padding: 0 !important;
}
.dash-grid .tracker-controls {
margin-top: auto;
padding-top: 12px;
}
.dash-grid .card-checklist-preview,
.dash-grid .card-wide .card-checklist-preview {
display: flex !important;
flex-direction: column;
gap: 8px !important;
width: 100%;
}
.dash-grid .preview-item {
padding: 10px 12px;
border-radius: 12px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.05);
}
.dash-grid .subs-preview-list,
.dash-grid .card-wide .subs-preview-list {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
width: 100%;
margin-top: 8px !important;
padding-top: 12px !important;
border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.dash-grid .sub-item-preview {
padding: 12px 14px !important;
border-radius: 16px !important;
border: 1px solid rgba(255,255,255,0.06) !important;
background: rgba(255,255,255,0.03) !important;
gap: 12px !important;
}
.dash-grid .sub-preview-icon {
width: 40px !important;
height: 40px !important;
border-radius: 12px !important;
font-size: 1.05rem !important;
}
.dash-grid .sub-name {
font-size: 0.95rem !important;
}
.dash-grid .sub-price {
font-size: 0.84rem !important;
color: #c4b5fd !important;
}
.dash-grid .sub-urgency {
border-radius: 999px !important;
padding: 3px 10px !important;
font-size: 0.68rem !important;
white-space: nowrap;
}
.dash-grid .docs-preview-list {
gap: 10px !important;
width: 100%;
margin-top: 8px !important;
padding-top: 12px !important;
border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.dash-grid .docs-preview-desktop .doc-summary-badge,
.dash-grid .docs-preview-compact .doc-summary-badge {
margin-bottom: 2px !important;
border-radius: 999px !important;
}
.dash-grid .docs-preview-desktop .doc-item-preview,
.dash-grid .docs-preview-compact .doc-item-preview {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
padding: 12px 14px !important;
border-radius: 16px !important;
border: 1px solid rgba(255,255,255,0.06) !important;
background: rgba(255,255,255,0.03) !important;
}
.dash-grid .docs-preview-desktop .doc-name,
.dash-grid .docs-preview-compact .doc-name {
flex: 1;
min-width: 0;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.35 !important;
}
.dash-grid .docs-preview-desktop .doc-item-right,
.dash-grid .docs-preview-compact .doc-item-right {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
}
.dash-grid .docs-preview-desktop .doc-urgency,
.dash-grid .docs-preview-compact .doc-urgency {
font-size: 0.7rem !important;
padding: 3px 10px !important;
border-radius: 999px !important;
}
.dash-grid .docs-preview-desktop .doc-item-more,
.dash-grid .docs-preview-compact .doc-item-more {
justify-content: center !important;
padding: 10px 14px !important;
border-radius: 14px !important;
border: 1px dashed rgba(255,255,255,0.08) !important;
background: rgba(255,255,255,0.02) !important;
color: rgba(255,255,255,0.48) !important;
}
.dash-grid .card-tags-row {
gap: 6px !important;
margin-top: 2px !important;
}
.dash-grid .card-tag {
padding: 4px 10px !important;
border-radius: 999px !important;
background: rgba(255,255,255,0.045) !important;
}
.dash-grid .card-timestamp {
align-self: end !important;
padding: 0 !important;
margin-top: auto !important;
color: rgba(255,255,255,0.24) !important;
text-align: right !important;
font-size: 0.68rem !important;
}
.dash-grid .card-actions {
position: absolute !important;
top: 12px !important;
left: 12px !important;
right: auto !important;
bottom: auto !important;
display: flex !important;
justify-content: flex-start !important;
align-items: center;
gap: 5px;
padding: 5px 7px !important;
border-radius: 12px !important;
border: 1px solid rgba(255,255,255,0.08) !important;
background: rgba(8, 10, 18, 0.88) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
opacity: 0;
transform: translateY(-4px) scale(0.96) !important;
transform-origin: top left;
pointer-events: none;
z-index: 14;
}
.dash-grid .card:hover .card-actions,
.dash-grid .card.card-expanded .card-actions {
opacity: 1;
transform: translateY(0) scale(1) !important;
pointer-events: auto;
}
/* hide badge when actions are visible so they don't overlap */
.dash-grid .card:hover .card-type-badge {
opacity: 0 !important;
pointer-events: none;
}
.dash-grid .card-actions button,
.dash-grid .card-compact .card-actions button {
opacity: 1 !important;
background: rgba(255,255,255,0.05) !important;
padding: 5px 9px !important;
border-radius: 8px !important;
white-space: nowrap;
font-size: 0.78rem !important;
}
.dash-grid .card-phantom {
min-height: 220px !important;
border-radius: 24px !important;
border: 1.5px dashed rgba(255,255,255,0.12) !important;
background:
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
rgba(12, 14, 22, 0.7) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.dash-grid .card-phantom::before {
display: none !important;
}
.dash-grid .phantom-inner {
gap: 10px !important;
color: rgba(255,255,255,0.36) !important;
}
.dash-grid .phantom-inner span {
font-size: 0.92rem !important;
font-weight: 700;
}
.dash-grid .card-phantom:hover {
border-color: rgba(255,255,255,0.2) !important;
background:
linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.015)),
rgba(16, 18, 28, 0.82) !important;
}
}
/* ─── REFERENCE-INSPIRED TECH SKIN ───────────────────────── */
:root {
--bg: #050a12;
--surface: #0b1119;
--border: rgba(111, 142, 181, 0.09);
--border2: rgba(141, 179, 225, 0.15);
--accent: #59d8ff;
--accent-rgb: 89, 216, 255;
--accent2: #59d8ff;
--accent3: #ff4faa;
--text: #f4f7fb;
--muted: #8b95a7;
--c-link: 87, 198, 255;
--c-note: 87, 180, 255;
--c-checklist: 255, 176, 72;
--c-page: 245, 88, 178;
--c-server: 255, 101, 86;
--c-command: 255, 78, 145;
--c-quicktext: 255, 76, 112;
--c-countdown: 255, 182, 76;
--c-status: 90, 217, 255;
--c-linkgroup: 94, 196, 255;
--c-markdown: 213, 113, 255;
--c-reminder: 255, 77, 95;
--c-subscription: 255, 92, 143;
--c-document: 255, 157, 73;
--c-fields: 111, 171, 255;
--c-tracker: 89, 214, 255;
--c-wifi: 80, 225, 167;
--c-counter: 255, 178, 59;
--c-contact: 255, 112, 188;
--c-expense: 80, 225, 167;
--c-routine: 255, 92, 122;
}
html,
body {
background-color: var(--bg) !important;
background-image:
radial-gradient(circle at 12% 100%, rgba(72, 180, 255, 0.14), transparent 24%),
radial-gradient(circle at 100% 0%, rgba(255, 76, 165, 0.13), transparent 26%),
linear-gradient(to right, rgba(108, 140, 180, 0.09) 1px, transparent 1px),
linear-gradient(to bottom, rgba(108, 140, 180, 0.09) 1px, transparent 1px) !important;
background-size: auto, auto, 56px 56px, 56px 56px !important;
background-position: center center !important;
}
.dashboard,
.login-screen {
position: relative;
isolation: isolate;
}
.login-screen {
background:
linear-gradient(180deg, rgba(5,10,18,0.9), rgba(5,10,18,0.98)) !important;
}
.login-box {
background:
linear-gradient(90deg, rgba(89,216,255,0.8), rgba(255,79,170,0.3)) top/100% 2px no-repeat,
linear-gradient(180deg, rgba(255,255,255,0.024), rgba(255,255,255,0.01)),
rgba(10, 14, 22, 0.94) !important;
border-color: rgba(125, 164, 212, 0.12) !important;
box-shadow:
0 26px 70px rgba(0,0,0,0.62),
inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
@media (min-width: 769px) {
.dashboard {
background:
linear-gradient(180deg, rgba(4,8,14,0.92), rgba(5,9,15,0.98)) !important;
}
.dash-header {
height: 74px !important;
min-height: 74px !important;
background: rgba(5, 9, 15, 0.82) !important;
border-bottom: 1px solid rgba(118, 149, 188, 0.12) !important;
box-shadow: 0 14px 34px rgba(0,0,0,0.24);
backdrop-filter: blur(20px) saturate(120%) !important;
}
.dash-header-right,
.dash-header-left {
gap: 10px !important;
}
.header-divider {
background: rgba(118, 149, 188, 0.18) !important;
}
.header-section-label,
.search-count,
.toolbar-label,
.tags-bar-label {
font-family: var(--font-mono) !important;
letter-spacing: 0.08em;
}
.header-section-label,
.search-count {
color: rgba(196, 208, 224, 0.72) !important;
font-size: 0.72rem !important;
}
.header-clock {
font-family: var(--font-mono) !important;
font-size: 1.02rem !important;
color: var(--text) !important;
font-weight: 700 !important;
letter-spacing: 0.4px !important;
}
.header-date {
font-family: var(--font-ar) !important;
font-size: 0.66rem !important;
color: rgba(232, 238, 247, 0.5) !important;
font-weight: 500 !important;
letter-spacing: 0.02em;
}
.header-search-wrap {
min-width: 260px !important;
height: 40px !important;
border-radius: 16px !important;
background: rgba(10, 14, 22, 0.84) !important;
border: 1px solid rgba(118, 149, 188, 0.12) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}
.header-search-wrap:focus-within {
border-color: rgba(89,216,255,0.24) !important;
box-shadow:
0 0 0 1px rgba(89,216,255,0.08),
inset 0 1px 0 rgba(255,255,255,0.04) !important;
background: rgba(8, 17, 28, 0.95) !important;
}
.header-search-input,
.search-hist-item,
.search-hist-clear {
font-family: var(--font-mono) !important;
}
.header-icon-btn,
.header-alert-badge {
width: 38px !important;
height: 38px !important;
border-radius: 14px !important;
background: rgba(255,255,255,0.02) !important;
border: 1px solid rgba(118, 149, 188, 0.1) !important;
color: rgba(188, 200, 217, 0.7) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.header-icon-btn:hover,
.header-alert-badge:hover,
.header-icon-btn.active {
color: var(--text) !important;
border-color: rgba(89,216,255,0.2) !important;
background: rgba(11, 24, 36, 0.92) !important;
}
.header-time-pill {
background:
linear-gradient(135deg, rgba(89,216,255,0.06), rgba(255,255,255,0.02)) !important;
border: 1px solid rgba(118, 149, 188, 0.14) !important;
border-radius: 14px !important;
padding: 7px 14px 7px 12px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.header-time-pill:hover {
background:
linear-gradient(135deg, rgba(89,216,255,0.10), rgba(255,255,255,0.04)) !important;
border-color: rgba(89,216,255,0.25) !important;
}
.header-time-icon {
color: var(--accent) !important;
}
.sidebar {
background:
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
rgba(7, 11, 18, 0.92) !important;
border-left: 1px solid rgba(118, 149, 188, 0.12) !important;
box-shadow:
inset 1px 0 0 rgba(255,255,255,0.03),
18px 0 32px rgba(0,0,0,0.16) !important;
}
.sidebar-top,
.sidebar-bottom {
border-color: rgba(118, 149, 188, 0.1) !important;
}
.sidebar-nav,
.sidebar-bottom,
.sidebar-bottom-group {
gap: 6px !important;
}
.sidebar-nav-btn,
.sidebar-icon-btn,
.toolbar-btn,
.tag-filter-chip,
.tag-filter-clear {
background: rgba(255,255,255,0.018) !important;
border: 1px solid rgba(118, 149, 188, 0.1) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}
.sidebar-nav-btn,
.sidebar-icon-btn {
border-radius: 12px !important;
}
.sidebar-nav-btn.active,
.sidebar-icon-btn.active,
.toolbar-btn.active,
.tag-filter-chip.active,
.search-archive-toggle.active {
border-color: rgba(89,216,255,0.22) !important;
background: rgba(10, 33, 47, 0.7) !important;
color: #75ddff !important;
box-shadow: inset 0 0 0 1px rgba(89,216,255,0.05) !important;
}
.sidebar-nav-btn:hover,
.sidebar-icon-btn:hover,
.toolbar-btn:hover,
.tag-filter-chip:hover,
.tag-filter-clear:hover {
border-color: rgba(118, 149, 188, 0.18) !important;
background: rgba(255,255,255,0.04) !important;
}
.sidebar-stats {
gap: 8px !important;
}
.sidebar-stat-row {
border-radius: 14px !important;
border: 1px solid rgba(118, 149, 188, 0.08);
background: rgba(255,255,255,0.018) !important;
}
.sidebar-stat-label {
color: rgba(196, 208, 224, 0.68) !important;
}
.sidebar-stat-val {
font-family: var(--font-mono) !important;
color: var(--text) !important;
}
.main-content {
padding: 26px 30px 36px !important;
}
.cards-toolbar {
padding: 0 2px 10px !important;
}
.toolbar-label,
.tags-bar-label {
color: rgba(190, 201, 218, 0.52) !important;
text-transform: uppercase;
font-size: 0.68rem !important;
}
.toolbar-btn,
.tag-filter-chip,
.tag-filter-clear {
border-radius: 999px !important;
min-height: 36px;
padding-inline: 14px !important;
color: rgba(191, 202, 219, 0.74) !important;
}
.dash-grid {
gap: 20px !important;
}
.dash-grid .card,
.dash-grid .card-compact,
.dash-grid .card-wide,
.dash-grid .card-tall,
.dash-grid .card-auto-height {
border-radius: 26px !important;
background:
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.008)),
linear-gradient(180deg, rgba(10,14,22,0.98), rgba(8,12,18,0.97)) !important;
border: 1px solid rgba(118, 149, 188, 0.11) !important;
box-shadow:
0 18px 40px rgba(0,0,0,0.34),
inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.dash-grid .card::before {
background:
radial-gradient(circle at 78% 18%, rgba(var(--card-color), 0.12), transparent 24%),
radial-gradient(circle at 14% 100%, rgba(var(--card-color), 0.07), transparent 20%) !important;
opacity: 0.8 !important;
}
.dash-grid .card:hover {
border-color: rgba(var(--card-color), 0.22) !important;
box-shadow:
0 22px 54px rgba(0,0,0,0.4),
inset 0 1px 0 rgba(255,255,255,0.05),
0 0 0 1px rgba(var(--card-color),0.08) !important;
}
.dash-grid .card-type-badge,
.dash-grid .card-meta-mono,
.dash-grid .card-word-count,
.dash-grid .card-tag,
.dash-grid .card-timestamp,
.dash-grid .sub-price,
.dash-grid .sub-urgency,
.dash-grid .doc-urgency,
.dash-grid .doc-expiry-date {
font-family: var(--font-mono) !important;
}
.dash-grid .card-type-badge {
color: rgba(var(--card-color), 0.92) !important;
opacity: 0.84 !important;
font-size: 0.66rem !important;
}
.dash-grid .card-icon,
.dash-grid .card-compact .card-icon,
.dash-grid .card-tall .card-icon {
background:
linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)),
rgba(11, 16, 24, 0.9) !important;
border: 1px solid rgba(118, 149, 188, 0.12) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.04),
0 10px 20px rgba(0,0,0,0.18) !important;
}
.dash-grid .card-title,
.dash-grid .card-compact .card-title,
.dash-grid .card-tall .card-title {
font-size: 1.26rem !important;
line-height: 1.14 !important;
}
.dash-grid .card-meta,
.dash-grid .card-compact .card-meta,
.dash-grid .card-tall .card-meta {
padding-top: 14px !important;
border-top: 1px solid rgba(118, 149, 188, 0.09) !important;
color: rgba(215, 223, 235, 0.7) !important;
}
.dash-grid .card-word-count {
color: rgba(198, 208, 221, 0.36) !important;
border-color: rgba(118, 149, 188, 0.12) !important;
border-radius: 999px !important;
padding: 1px 8px !important;
margin-right: 8px !important;
}
.dash-grid .preview-item,
.dash-grid .sub-item-preview,
.dash-grid .docs-preview-desktop .doc-item-preview,
.dash-grid .docs-preview-compact .doc-item-preview {
background:
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.012)) !important;
border-color: rgba(118, 149, 188, 0.08) !important;
}
.dash-grid .sub-price {
color: rgba(255,255,255,0.78) !important;
}
.dash-grid .sub-urgency,
.dash-grid .doc-urgency,
.dash-grid .doc-summary-badge {
border-radius: 999px !important;
letter-spacing: 0.04em;
}
.dash-grid .doc-expiry-date {
color: rgba(186, 197, 212, 0.46) !important;
}
.dash-grid .card-tag {
color: rgba(191, 202, 219, 0.74) !important;
border-color: rgba(118, 149, 188, 0.1) !important;
background: rgba(255,255,255,0.02) !important;
}
.dash-grid .card-actions {
background: rgba(8, 13, 20, 0.88) !important;
border-color: rgba(118, 149, 188, 0.12) !important;
}
.dash-grid .card-actions button,
.dash-grid .card-compact .card-actions button {
color: rgba(198, 207, 220, 0.76) !important;
border: 1px solid rgba(118, 149, 188, 0.08) !important;
}
.dash-grid .card-actions button:hover {
color: var(--text) !important;
border-color: rgba(var(--card-color), 0.16) !important;
background: rgba(255,255,255,0.06) !important;
}
}
/* ─── LINKS VIEW MODE ─────────────────────────────────────── */
@media (min-width: 769px) {
.dashboard.filter-links .dash-grid {
grid-template-columns: repeat(auto-fill, minmax(360px, 420px)) !important;
justify-content: start !important;
align-content: start !important;
gap: 18px !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] {
width: 100% !important;
max-width: 420px !important;
min-height: 136px !important;
grid-template-columns: 56px minmax(0, 1fr) auto !important;
grid-template-rows: auto auto !important;
gap: 10px 16px !important;
align-items: center !important;
padding: 20px 22px !important;
border-radius: 24px !important;
background:
linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.008)),
rgba(9, 14, 22, 0.96) !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .card-type-badge {
display: none !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .card-icon {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
width: 56px !important;
height: 56px !important;
border-radius: 18px !important;
font-size: 1.2rem !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .card-title {
grid-column: 2 !important;
grid-row: 1 !important;
font-size: 1.06rem !important;
line-height: 1.2 !important;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .card-meta {
grid-column: 2 !important;
grid-row: 2 !important;
border-top: none !important;
padding-top: 0 !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .link-meta-card {
gap: 8px !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .link-domain-chip {
background: rgba(11, 26, 34, 0.95) !important;
border-color: rgba(89,216,255,0.14) !important;
color: #79ddff !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .link-meta-row {
min-width: 0;
gap: 10px !important;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(118, 149, 188, 0.08);
background: rgba(255,255,255,0.024);
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .link-favicon {
width: 18px !important;
height: 18px !important;
border-radius: 4px !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .link-url-text {
font-family: var(--font-mono) !important;
font-size: 0.78rem !important;
color: rgba(191, 202, 219, 0.66) !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .card-actions {
grid-column: 3 !important;
grid-row: 1 / span 2 !important;
position: static !important;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
padding: 0 !important;
background: none !important;
border: none !important;
box-shadow: none !important;
justify-self: end;
align-self: center;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .card-actions button {
opacity: 0.9 !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .card-tags-row,
.dashboard.filter-links .dash-grid .card[data-type="link"] .card-timestamp {
display: none !important;
}
}
@media (max-width: 768px) {
.dashboard.filter-links .dash-grid .card[data-type="link"] .link-domain-chip {
font-size: 0.62rem !important;
padding: 3px 8px !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .link-meta-row {
padding: 8px 10px;
border-radius: 12px;
border: 1px solid rgba(118, 149, 188, 0.08);
background: rgba(255,255,255,0.02);
}
}
/* ─── LOGIN / AUTH VISUAL UNIFICATION ────────────────────── */
.login-screen.hidden {
display: none !important;
}
.login-screen {
display: grid !important;
place-items: center !important;
align-content: center !important;
justify-content: center !important;
width: 100% !important;
height: 100dvh !important;
min-height: 100dvh !important;
padding: 24px;
overflow: auto !important;
}
.login-grid,
.login-noise {
position: absolute;
inset: 0;
pointer-events: none;
}
.login-grid {
background-image:
linear-gradient(to right, rgba(108, 140, 180, 0.1) 1px, transparent 1px),
linear-gradient(to bottom, rgba(108, 140, 180, 0.1) 1px, transparent 1px);
background-size: 56px 56px;
opacity: 0.22;
mask-image: linear-gradient(180deg, rgba(0,0,0,0.34), rgba(0,0,0,0.78));
}
.login-noise {
opacity: 0.05;
background-image:
radial-gradient(circle at 20% 20%, rgba(255,255,255,0.8) 0 0.6px, transparent 0.8px),
radial-gradient(circle at 80% 30%, rgba(255,255,255,0.6) 0 0.7px, transparent 0.9px),
radial-gradient(circle at 35% 75%, rgba(255,255,255,0.5) 0 0.6px, transparent 0.8px);
background-size: 160px 160px, 220px 220px, 190px 190px;
}
.login-box {
width: min(100%, 460px) !important;
margin: auto !important;
gap: 16px !important;
padding: 28px 28px 24px !important;
border-radius: 28px !important;
overflow: hidden;
}
.login-box::before {
content: '';
position: absolute;
top: 88px;
left: 0;
right: 0;
height: 1px;
background: rgba(118, 149, 188, 0.09);
pointer-events: none;
}
.login-box::after {
content: '';
position: absolute;
width: 220px;
height: 220px;
left: -80px;
bottom: -110px;
border-radius: 999px;
background: radial-gradient(circle, rgba(89,216,255,0.22), transparent 70%);
filter: blur(38px);
pointer-events: none;
}
.login-logo {
font-size: clamp(2.5rem, 5vw, 3.2rem) !important;
margin-bottom: 2px;
}
#request-access-wrap,
#waiting-approval {
width: min(100%, 360px);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
padding: 18px;
border-radius: 22px;
background:
linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.008)),
rgba(6, 12, 20, 0.72);
border: 1px solid rgba(118, 149, 188, 0.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.login-sub,
.pin-or-divider {
font-family: var(--font-mono) !important;
font-size: 0.74rem !important;
letter-spacing: 0.08em;
color: rgba(191, 202, 219, 0.62) !important;
text-align: center;
}
.pin-or-divider {
margin: 0 !important;
}
.device-name-input {
min-height: 56px;
margin-bottom: 0 !important;
border-radius: 18px !important;
background: rgba(4, 10, 18, 0.78) !important;
border: 1px solid rgba(118, 149, 188, 0.12) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
font-family: var(--font-mono) !important;
font-size: 0.95rem !important;
letter-spacing: 0.02em;
}
.device-name-input:focus {
border-color: rgba(89,216,255,0.28) !important;
box-shadow:
0 0 0 3px rgba(89,216,255,0.07),
inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.biometric-btn,
.request-access-btn {
width: min(100%, 360px);
min-height: 56px;
justify-content: center;
gap: 10px;
margin: 0 auto;
padding: 0 24px !important;
border-radius: 18px !important;
border: 1px solid rgba(103, 215, 255, 0.22) !important;
background: linear-gradient(180deg, #77e0ff 0%, #58d7ff 100%) !important;
color: #03111b !important;
box-shadow:
0 12px 30px rgba(43, 145, 255, 0.24),
inset 0 1px 0 rgba(255,255,255,0.34) !important;
font-family: var(--font-ar) !important;
font-size: 1rem !important;
font-weight: 800 !important;
}
.biometric-btn:hover,
.request-access-btn:hover {
transform: translateY(-2px) !important;
opacity: 1 !important;
box-shadow:
0 16px 38px rgba(43, 145, 255, 0.3),
inset 0 1px 0 rgba(255,255,255,0.34) !important;
}
.pin-fallback-link {
width: fit-content;
padding: 0 0 2px !important;
margin-top: 2px !important;
border-radius: 0 !important;
color: rgba(191, 202, 219, 0.66) !important;
font-family: var(--font-mono) !important;
font-size: 0.74rem !important;
letter-spacing: 0.04em;
text-decoration: none !important;
border-bottom: 1px dashed rgba(118, 149, 188, 0.34);
}
.pin-fallback-link:hover {
color: var(--text) !important;
border-bottom-color: rgba(89,216,255,0.42);
}
#waiting-approval {
align-items: center;
text-align: center;
}
.approval-waiting-icon {
width: 80px !important;
height: 80px !important;
border-radius: 24px !important;
background:
linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01)),
rgba(7, 18, 29, 0.95) !important;
border: 1px solid rgba(118, 149, 188, 0.14) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.04),
0 14px 28px rgba(0,0,0,0.22) !important;
color: var(--accent) !important;
}
.approval-waiting-title {
font-size: 1.08rem !important;
font-weight: 800 !important;
}
.approval-waiting-sub {
font-size: 0.8rem !important;
line-height: 1.7;
color: rgba(191, 202, 219, 0.62) !important;
}
.approval-dots {
gap: 8px !important;
margin: 2px 0 4px !important;
}
.approval-dots span {
width: 8px !important;
height: 8px !important;
background: linear-gradient(180deg, #77e0ff, #58d7ff) !important;
box-shadow: 0 0 12px rgba(89,216,255,0.34);
}
.approval-popup-inner {
background:
linear-gradient(90deg, rgba(89,216,255,0.8), rgba(255,79,170,0.24)) top/100% 2px no-repeat,
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.008)),
rgba(10, 14, 22, 0.96) !important;
border-color: rgba(118, 149, 188, 0.12) !important;
box-shadow:
0 26px 60px rgba(0,0,0,0.56),
inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.approval-popup-device {
font-family: var(--font-mono) !important;
border-radius: 14px !important;
}
@media (max-width: 768px) {
.login-screen {
padding: 18px 16px;
}
.login-box {
width: 100% !important;
max-width: 380px;
padding: 24px 18px 18px !important;
border-radius: 24px !important;
}
.login-box::before {
top: 78px;
}
#request-access-wrap,
#waiting-approval,
.biometric-btn,
.request-access-btn {
width: 100% !important;
}
#request-access-wrap,
#waiting-approval {
padding: 16px;
border-radius: 18px;
}
.device-name-input,
.biometric-btn,
.request-access-btn {
min-height: 54px;
}
.login-sub,
.pin-or-divider,
.pin-fallback-link {
font-size: 0.72rem !important;
}
}
/* ─── CARD SHELL SYSTEM ───────────────────────────────────── */
.dash-grid .card,
#page-grid .card {
height: 320px !important;
min-height: 320px !important;
padding: 18px !important;
display: block !important;
}
.dash-grid .card.card-tall,
#page-grid .card.card-tall {
height: 320px !important;
min-height: 320px !important;
}
.dash-grid .card.card-wide,
#page-grid .card.card-wide {
height: 320px !important;
min-height: 320px !important;
}
.dash-grid .card-shell,
#page-grid .card-shell {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
gap: 10px;
}
.dash-grid .card-header,
#page-grid .card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
min-height: 40px;
}
.dash-grid .card-header .card-type-badge,
#page-grid .card-header .card-type-badge {
position: static !important;
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0;
margin: 0;
}
.dash-grid .card-header .card-icon,
#page-grid .card-header .card-icon {
flex-shrink: 0;
width: 42px;
height: 42px;
border-radius: 14px;
}
.dash-grid .card-body,
#page-grid .card-body {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 10px;
padding: 4px 0 0;
overflow: visible;
clip-path: inset(-40px -20px 0 -20px);
}
.dash-grid .card-title,
.dash-grid .card-compact .card-title,
.dash-grid .card-tall .card-title,
#page-grid .card-title {
display: -webkit-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: visible !important;
text-overflow: ellipsis;
line-height: 1.5 !important;
min-height: 0;
padding: 6px 0 4px !important;
margin: 0 !important;
color: #f5f7fb !important;
font-weight: 700 !important;
letter-spacing: 0.01em;
}
.dash-grid .card-meta,
.dash-grid .card-compact .card-meta,
.dash-grid .card-tall .card-meta,
#page-grid .card-meta {
flex: 1 1 auto !important;
min-height: 0;
display: block !important;
overflow-y: auto !important;
overflow-x: hidden !important;
scrollbar-width: none !important;
line-height: 1.65 !important;
padding: 0 !important;
margin: 0 !important;
color: rgba(225, 232, 243, 0.82) !important;
font-size: 0.82rem !important;
}
.dash-grid .card-meta::-webkit-scrollbar,
#page-grid .card-meta::-webkit-scrollbar {
display: none !important;
}
/* Text cards: clamp to avoid wall of text */
.dash-grid .card[data-type="note"] .card-meta,
.dash-grid .card[data-type="quicktext"] .card-meta,
.dash-grid .card[data-type="markdown"] .card-meta,
.dash-grid .card[data-type="command"] .card-meta,
#page-grid .card[data-type="note"] .card-meta,
#page-grid .card[data-type="quicktext"] .card-meta,
#page-grid .card[data-type="markdown"] .card-meta,
#page-grid .card[data-type="command"] .card-meta {
display: -webkit-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden !important;
}
/* ── Note paper texture: subtle ruled lines + warm paper hue (respects dark theme) ── */
.card[data-type="note"] .card-meta {
position: relative;
}
.card[data-type="note"] .card-meta::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 23px,
rgba(255, 206, 145, 0.045) 23px,
rgba(255, 206, 145, 0.045) 24px
);
border-radius: inherit;
opacity: 0.9;
}
.card[data-type="note"]::after {
/* Faint left margin line like a real notebook */
content: '';
position: absolute;
top: 56px; bottom: 16px;
inset-inline-start: 22px;
width: 1px;
background: linear-gradient(to bottom, transparent, rgba(239, 68, 68, 0.22), transparent);
pointer-events: none;
opacity: 0.6;
}
.dash-grid .card-footer,
#page-grid .card-footer {
margin-top: auto;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.05);
min-height: 50px;
display: flex;
align-items: stretch;
}
.dash-grid .card-footer-main,
#page-grid .card-footer-main {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 10px;
}
.dash-grid .card-footer-meta,
#page-grid .card-footer-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
min-height: 24px;
}
.dash-grid .card-footer-meta-empty,
#page-grid .card-footer-meta-empty {
min-height: 24px;
}
.dash-grid .card-footer-chip,
#page-grid .card-footer-chip {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 22px;
max-width: 100%;
padding: 3px 9px;
border-radius: 999px;
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.06);
color: rgba(229, 234, 243, 0.68);
font-size: 0.68rem;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dash-grid .card-footer-bottom,
#page-grid .card-footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.dash-grid .card-footer-action,
#page-grid .card-footer-action {
display: flex;
align-items: center;
}
.dash-grid .card-timestamp,
#page-grid .card-timestamp {
padding: 0 !important;
margin: 0 !important;
color: rgba(255,255,255,0.34) !important;
font-size: 0.68rem !important;
flex-shrink: 0;
}
.dash-grid .card-actions,
.dash-grid .card-compact .card-actions,
#page-grid .card-actions {
position: absolute !important;
left: 10px !important;
right: auto !important;
bottom: auto !important;
top: 10px !important;
padding: 0 !important;
background: none !important;
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
}
.dash-grid .card:hover .card-actions,
.dash-grid .card.card-expanded .card-actions,
#page-grid .card:hover .card-actions {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.dash-grid .card-actions button,
.dash-grid .card-compact .card-actions button,
#page-grid .card-actions button {
min-width: 30px;
min-height: 30px;
padding: 0 10px !important;
}
.dash-grid .reminder-done-row,
.dash-grid .card-tags-row,
#page-grid .reminder-done-row,
#page-grid .card-tags-row {
display: none !important;
}
.dash-grid .card[data-type="document"] .card-meta,
.dash-grid .card[data-type="subscription"] .card-meta,
.dash-grid .card[data-type="routine"] .card-meta,
#page-grid .card[data-type="document"] .card-meta,
#page-grid .card[data-type="subscription"] .card-meta,
#page-grid .card[data-type="routine"] .card-meta {
-webkit-line-clamp: unset;
display: block;
}
.dash-grid .card[data-type="document"] .card-body,
.dash-grid .card[data-type="subscription"] .card-body,
.dash-grid .card[data-type="routine"] .card-body,
.dash-grid .card[data-type="checklist"] .card-body,
#page-grid .card[data-type="document"] .card-body,
#page-grid .card[data-type="subscription"] .card-body,
#page-grid .card[data-type="routine"] .card-body,
#page-grid .card[data-type="checklist"] .card-body {
gap: 14px;
}
/* Reminder cards should stay aligned with the normal desktop grid height,
so compact the inner layout instead of enlarging the whole card. */
.dash-grid .card[data-type="reminder"],
#page-grid .card[data-type="reminder"] {
height: 320px !important;
min-height: 320px !important;
}
.dash-grid .card[data-type="reminder"] .card-body,
#page-grid .card[data-type="reminder"] .card-body {
gap: 8px !important;
}
.dash-grid .card[data-type="reminder"] .card-title,
#page-grid .card[data-type="reminder"] .card-title {
padding: 2px 0 !important;
line-height: 1.35 !important;
}
.dash-grid .card[data-type="reminder"] .reminder-card-body,
#page-grid .card[data-type="reminder"] .reminder-card-body {
gap: 6px;
padding-top: 0;
}
.dash-grid .card[data-type="reminder"] .reminder-countdown,
#page-grid .card[data-type="reminder"] .reminder-countdown {
padding: 10px 10px 8px;
margin-bottom: 0;
}
.dash-grid .card[data-type="reminder"] .reminder-countdown .rc-big,
#page-grid .card[data-type="reminder"] .reminder-countdown .rc-big {
font-size: 1.95rem;
}
.dash-grid .card[data-type="reminder"] .reminder-countdown .rc-lbl,
#page-grid .card[data-type="reminder"] .reminder-countdown .rc-lbl {
font-size: 0.68rem;
}
.dash-grid .card[data-type="reminder"] .reminder-date-row,
#page-grid .card[data-type="reminder"] .reminder-date-row {
padding: 5px 10px;
font-size: 0.76rem;
}
.dash-grid .card[data-type="reminder"] .reminder-badges-row,
#page-grid .card[data-type="reminder"] .reminder-badges-row {
gap: 3px;
}
.dash-grid .card[data-type="reminder"] .reminder-details-preview,
#page-grid .card[data-type="reminder"] .reminder-details-preview {
display: none !important;
}
.dash-grid .card[data-type="reminder"] .card-footer,
#page-grid .card[data-type="reminder"] .card-footer {
min-height: 42px;
padding-top: 8px;
}
.dash-grid .card[data-type="reminder"] .card-footer-main,
#page-grid .card[data-type="reminder"] .card-footer-main {
justify-content: flex-end;
gap: 6px;
}
.dash-grid .card[data-type="reminder"] .card-footer-meta,
#page-grid .card[data-type="reminder"] .card-footer-meta {
gap: 5px;
}
.dash-grid .card[data-type="reminder"] .card-footer-bottom,
#page-grid .card[data-type="reminder"] .card-footer-bottom {
min-height: 34px;
}
.dash-grid .card[data-type="reminder"] .card-footer-chip,
#page-grid .card[data-type="reminder"] .card-footer-chip {
padding: 3px 8px;
font-size: 0.66rem;
}
.dash-grid .card[data-type="reminder"] .card-done-btn,
.dash-grid .card[data-type="reminder"] .card-undone-btn,
#page-grid .card[data-type="reminder"] .card-done-btn,
#page-grid .card[data-type="reminder"] .card-undone-btn {
padding: 4px 12px;
}
.dash-grid .card[data-type="reminder"] .card-actions,
#page-grid .card[data-type="reminder"] .card-actions {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
bottom: auto !important;
z-index: 12 !important;
display: flex;
gap: 4px;
opacity: 0;
transition: opacity 0.18s;
transform: none !important;
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
pointer-events: none;
}
.dash-grid .card[data-type="reminder"]:hover .card-actions,
.dash-grid .card[data-type="reminder"].card-expanded .card-actions,
#page-grid .card[data-type="reminder"]:hover .card-actions {
opacity: 1;
pointer-events: auto;
}
.dash-grid .card[data-type="reminder"] .card-actions .card-more-btn,
.dash-grid .card[data-type="reminder"] .card-actions .card-move-btn,
#page-grid .card[data-type="reminder"] .card-actions .card-more-btn,
#page-grid .card[data-type="reminder"] .card-actions .card-move-btn {
letter-spacing: 0;
}
.dash-grid .card[data-type="reminder"] .card-actions button,
#page-grid .card[data-type="reminder"] .card-actions button {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
border-radius: 10px !important;
}
.dash-grid .card[data-type="document"] .card-meta > *,
.dash-grid .card[data-type="subscription"] .card-meta > *,
.dash-grid .card[data-type="routine"] .card-meta > *,
#page-grid .card[data-type="document"] .card-meta > *,
#page-grid .card[data-type="subscription"] .card-meta > *,
#page-grid .card[data-type="routine"] .card-meta > * {
max-height: 100%;
}
.dash-grid .card .card-checklist-preview,
.dash-grid .card .subs-preview-list,
.dash-grid .card .link-meta-card,
.dash-grid .card .contact-meta,
.dash-grid .card .expense-summary-meta,
.dash-grid .card .code-preview-wrap,
#page-grid .card .card-checklist-preview,
#page-grid .card .subs-preview-list,
#page-grid .card .link-meta-card,
#page-grid .card .contact-meta,
#page-grid .card .expense-summary-meta,
#page-grid .card .code-preview-wrap {
background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
border: 1px solid rgba(255,255,255,0.05);
border-radius: 14px;
padding: 12px 12px 10px;
}
.dash-grid .card .tracker-value-big,
.dash-grid .card .counter-number,
#page-grid .card .tracker-value-big,
#page-grid .card .counter-number {
text-shadow: 0 0 20px rgba(var(--card-color,255,255,255),0.24);
}
.dash-grid .card .sub-name,
.dash-grid .card .contact-phone-meta,
.dash-grid .card .contact-email-meta,
#page-grid .card .sub-name,
#page-grid .card .contact-phone-meta,
#page-grid .card .contact-email-meta {
color: #f1f5fb;
}
.dash-grid .card .link-url-text,
.dash-grid .card .card-meta-mono,
#page-grid .card .link-url-text,
#page-grid .card .card-meta-mono {
color: rgba(214, 223, 238, 0.8);
}
.dash-grid .card-phantom,
#page-grid .card-phantom {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.dash-grid .card-phantom .phantom-inner,
#page-grid .card-phantom .phantom-inner {
width: 100%;
height: 100%;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 12px !important;
margin: 0 auto;
}
.header-date,
.header-section-label,
.header-search-input,
.modal-input,
.card-title,
.card-meta {
font-family: var(--font-ar) !important;
}
.header-date {
font-weight: 500 !important;
font-size: 0.66rem !important;
letter-spacing: 0.02em !important;
color: rgba(232, 238, 247, 0.5) !important;
}
/* ── Subscription & Document scroll-snap ────────────────────── */
/* card-meta becomes flex column so inner list can fill it */
.dash-grid .card[data-type="subscription"] .card-meta,
.dash-grid .card[data-type="document"] .card-meta,
#page-grid .card[data-type="subscription"] .card-meta,
#page-grid .card[data-type="document"] .card-meta {
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
padding: 0 !important;
}
/* the list = the scroll-snap container, fills all available meta space */
.dash-grid .card .subs-preview-list,
#page-grid .card .subs-preview-list {
flex: 0 0 auto !important;
height: 120px !important;
min-height: 120px !important;
max-height: 120px !important;
/* reset conflicting styles */
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
padding: 4px 0 !important;
margin: 0 !important;
border: 1px solid rgba(255,255,255,0.06) !important;
border-radius: 12px !important;
background: rgba(255,255,255,0.03) !important;
/* scroll-snap */
overflow-y: scroll !important;
overflow-x: hidden !important;
scroll-snap-type: y mandatory !important;
scroll-padding-top: 0px !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
}
.dash-grid .card .subs-preview-list::-webkit-scrollbar,
#page-grid .card .subs-preview-list::-webkit-scrollbar {
display: none !important;
}
/* each item = fixed height, snaps to start */
.dash-grid .card .sub-item-preview,
#page-grid .card .sub-item-preview {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 10px !important;
flex-shrink: 0 !important;
height: 56px !important;
min-height: 56px !important;
max-height: 56px !important;
padding: 0 12px !important;
border-radius: 0 !important;
background: none !important;
border: none !important;
border-bottom: 1px solid rgba(255,255,255,0.04) !important;
scroll-snap-align: start !important;
scroll-snap-stop: always !important;
}
.dash-grid .card .sub-item-preview:first-child,
#page-grid .card .sub-item-preview:first-child {
border-radius: 10px 10px 0 0 !important;
}
.dash-grid .card .sub-item-preview:last-child,
#page-grid .card .sub-item-preview:last-child {
border-radius: 0 0 10px 10px !important;
}
.dash-grid .card .sub-item-preview:only-child,
#page-grid .card .sub-item-preview:only-child {
border-radius: 10px !important;
}
.dash-grid .card .sub-item-preview:last-child,
#page-grid .card .sub-item-preview:last-child {
border-bottom: none !important;
}
.dash-grid .card .sub-preview-icon,
#page-grid .card .sub-preview-icon {
width: 28px !important;
height: 28px !important;
font-size: 1rem !important;
flex-shrink: 0 !important;
}
.dash-grid .card .sub-item-preview-content,
#page-grid .card .sub-item-preview-content {
flex: 1 !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
.dash-grid .card .sub-name,
#page-grid .card .sub-name {
font-size: 0.84rem !important;
font-weight: 700 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dash-grid .card .sub-price,
#page-grid .card .sub-price {
font-size: 0.74rem !important;
white-space: nowrap !important;
}
.dash-grid .card .sub-urgency,
#page-grid .card .sub-urgency {
font-size: 0.66rem !important;
padding: 2px 7px !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
}
/* ── Document scroll-snap ────────────────────────────────────── */
/* Document list scroll-snap container */
.dash-grid .card .docs-preview-list,
.dash-grid .card .docs-preview-desktop,
.dash-grid .card .docs-preview-compact,
#page-grid .card .docs-preview-list,
#page-grid .card .docs-preview-desktop,
#page-grid .card .docs-preview-compact {
flex: 0 0 auto !important;
height: 120px !important;
min-height: 120px !important;
max-height: 120px !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
padding: 4px 0 !important;
margin: 0 !important;
border: 1px solid rgba(255,255,255,0.06) !important;
border-radius: 12px !important;
background: rgba(255,255,255,0.03) !important;
overflow-y: scroll !important;
overflow-x: hidden !important;
scroll-snap-type: y mandatory !important;
scroll-padding-top: 4px !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
}
.dash-grid .card .docs-preview-list::-webkit-scrollbar,
.dash-grid .card .docs-preview-desktop::-webkit-scrollbar,
.dash-grid .card .docs-preview-compact::-webkit-scrollbar,
#page-grid .card .docs-preview-list::-webkit-scrollbar {
display: none !important;
}
/* each doc item = fixed height, snaps to start */
.dash-grid .card .doc-item-preview,
#page-grid .card .doc-item-preview {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
flex-shrink: 0 !important;
height: 56px !important;
min-height: 56px !important;
max-height: 56px !important;
padding: 0 12px !important;
border-radius: 0 !important;
background: none !important;
border: none !important;
border-bottom: 1px solid rgba(255,255,255,0.04) !important;
scroll-snap-align: start !important;
scroll-snap-stop: always !important;
}
.dash-grid .card .doc-item-preview:first-child,
#page-grid .card .doc-item-preview:first-child {
border-radius: 10px 10px 0 0 !important;
}
.dash-grid .card .doc-item-preview:last-child,
#page-grid .card .doc-item-preview:last-child {
border-radius: 0 0 10px 10px !important;
border-bottom: none !important;
}
.dash-grid .card .doc-item-preview:only-child,
#page-grid .card .doc-item-preview:only-child {
border-radius: 10px !important;
}
.dash-grid .card .doc-name,
#page-grid .card .doc-name {
font-size: 0.84rem !important;
font-weight: 700 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
flex: 1 !important;
min-width: 0 !important;
}
.dash-grid .card .doc-item-right,
#page-grid .card .doc-item-right {
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-shrink: 0 !important;
}
.dash-grid .card .doc-urgency,
#page-grid .card .doc-urgency {
font-size: 0.66rem !important;
padding: 2px 7px !important;
white-space: nowrap !important;
}
/* ═══════════════════════════════════════════════════════════
─── SMART RADAR BAR ──────────────────────────────────────
═══════════════════════════════════════════════════════════ */
.smart-radar {
display: flex;
align-items: center;
gap: 0;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 16px;
padding: 12px 18px;
margin: 0 0 14px;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
animation: radarIn 0.4s cubic-bezier(0.16,1,0.3,1) both;
overflow: hidden;
position: relative;
}
.smart-radar::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(99,102,241,0.05) 0%,
transparent 50%,
rgba(245,158,11,0.04) 100%);
pointer-events: none;
}
@keyframes radarIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.sr-tile {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
padding: 2px 14px;
min-width: 0;
cursor: default;
transition: background 0.2s;
border-radius: 10px;
}
.sr-tile:hover { background: rgba(255,255,255,0.04); }
.sr-icon {
font-size: 1.4rem;
line-height: 1;
flex-shrink: 0;
filter: drop-shadow(0 0 6px rgba(255,255,255,0.15));
}
.sr-content {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.sr-value {
font-size: 1.05rem;
font-weight: 800;
color: var(--text);
font-family: var(--font-mono);
letter-spacing: -0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.35s;
}
.sr-label {
font-size: 0.68rem;
color: rgba(200,210,240,0.45);
font-family: var(--font-ar);
white-space: nowrap;
}
.sr-sep {
width: 1px;
height: 30px;
background: rgba(255,255,255,0.06);
flex-shrink: 0;
}
.sr-value.sr-danger { color: #f87171; }
.sr-value.sr-warn { color: #fbbf24; }
.sr-value.sr-ok { color: #4ade80; }
/* Hide tiles + separators with no data */
#smart-radar .sr-tile.sr-hidden,
#smart-radar .sr-sep.sr-hidden { display: none !important; }
.sr-future-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: 10px;
background: rgba(99,102,241,0.12);
border: 1px solid rgba(99,102,241,0.25);
color: rgba(180,185,250,0.9);
font-size: 0.78rem;
font-family: var(--font-ar);
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
flex-shrink: 0;
margin-inline-start: auto;
}
.sr-future-btn:hover {
background: rgba(99,102,241,0.22);
color: #c7d2fe;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(99,102,241,0.2);
}
@keyframes countUp {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.sr-value.animating { animation: countUp 0.35s cubic-bezier(0.16,1,0.3,1) both; }
/* ═══════════════════════════════════════════════════════════
─── FUTURE PANEL MODAL ───────────────────────────────────
═══════════════════════════════════════════════════════════ */
.future-panel {
position: fixed;
inset: 0;
z-index: 9998;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.future-panel.hidden { display: none; }
.fp-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.65);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
cursor: pointer;
}
.fp-sheet {
position: relative;
width: 100%;
max-width: 860px;
max-height: 82vh;
background: rgba(13,14,22,0.98);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 24px 24px 0 0;
display: flex;
flex-direction: column;
overflow: hidden;
animation: fpSlideUp 0.4s cubic-bezier(0.16,1,0.3,1) both;
box-shadow: 0 -20px 60px rgba(0,0,0,0.5);
}
@keyframes fpSlideUp {
from { transform: translateY(60px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.fp-header {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 22px 24px 16px;
border-bottom: 1px solid rgba(255,255,255,0.06);
flex-shrink: 0;
}
.fp-header-info { flex: 1; }
.fp-title {
font-size: 1.1rem;
font-weight: 800;
color: var(--text);
font-family: var(--font-ar);
margin: 0 0 3px;
}
.fp-subtitle {
font-size: 0.78rem;
color: rgba(200,210,240,0.45);
font-family: var(--font-ar);
margin: 0;
}
.fp-header-stats {
display: flex;
gap: 10px;
align-items: center;
flex-shrink: 0;
}
.fp-stat-pill {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding: 6px 14px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.07);
background: rgba(255,255,255,0.03);
min-width: 64px;
}
.fp-stat-num {
font-size: 1rem;
font-weight: 800;
font-family: var(--font-mono);
color: var(--text);
letter-spacing: -0.02em;
}
.fp-stat-lbl {
font-size: 0.64rem;
color: rgba(200,210,240,0.4);
font-family: var(--font-ar);
white-space: nowrap;
}
.fp-close {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255,255,255,0.07);
border: none;
color: rgba(200,210,240,0.6);
font-size: 0.85rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s;
margin-top: 2px;
}
.fp-close:hover { background: rgba(255,255,255,0.14); color: white; }
.fp-body {
flex: 1;
overflow-y: auto;
padding: 18px 24px 24px;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.1) transparent;
direction: rtl;
}
/* ── Timeline groups ── */
.fp-group {
margin-bottom: 28px;
}
.fp-group-label {
font-size: 0.72rem;
font-weight: 700;
color: rgba(200,210,240,0.35);
font-family: var(--font-ar);
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0 4px 8px;
border-bottom: 1px solid rgba(255,255,255,0.04);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.fp-group-label::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
opacity: 0.6;
}
/* ── Event cards ── */
.fp-events {
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
padding-right: 20px;
}
.fp-events::before {
content: '';
position: absolute;
right: 7px;
top: 8px;
bottom: 8px;
width: 2px;
background: linear-gradient(to bottom,
rgba(255,255,255,0.08) 0%,
rgba(255,255,255,0.03) 100%);
border-radius: 2px;
}
.fp-event {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
border-radius: 14px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
cursor: pointer;
transition: all 0.2s;
position: relative;
animation: fpEventIn 0.3s ease both;
animation-delay: calc(var(--fp-i, 0) * 0.04s);
}
.fp-event::before {
content: '';
position: absolute;
right: -18px;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.15);
background: rgba(13,14,22,0.98);
z-index: 1;
}
@keyframes fpEventIn {
from { opacity: 0; transform: translateX(10px); }
to { opacity: 1; transform: translateX(0); }
}
.fp-event:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.1);
transform: translateX(-3px);
}
.fp-event.fp-danger { border-color: rgba(239,68,68,0.25); }
.fp-event.fp-danger::before { border-color: var(--danger); background: rgba(239,68,68,0.2); }
.fp-event.fp-warn { border-color: rgba(245,158,11,0.25); }
.fp-event.fp-warn::before { border-color: #f59e0b; background: rgba(245,158,11,0.15); }
.fp-event.fp-info { border-color: rgba(59,130,246,0.2); }
.fp-event.fp-info::before { border-color: #3b82f6; background: rgba(59,130,246,0.12); }
.fp-event.fp-ok { border-color: rgba(255,255,255,0.07); }
.fp-event-icon {
font-size: 1.6rem;
line-height: 1;
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(255,255,255,0.05);
}
.fp-event-body { flex: 1; min-width: 0; }
.fp-event-name {
font-size: 0.88rem;
font-weight: 700;
color: var(--text);
font-family: var(--font-ar);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 3px;
}
.fp-event-meta {
font-size: 0.72rem;
color: rgba(200,210,240,0.5);
font-family: var(--font-ar);
}
.fp-event-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex-shrink: 0;
}
.fp-event-countdown {
font-size: 0.85rem;
font-weight: 800;
font-family: var(--font-mono);
letter-spacing: -0.02em;
white-space: nowrap;
}
.fp-event-countdown.danger { color: #f87171; }
.fp-event-countdown.warn { color: #fbbf24; }
.fp-event-countdown.info { color: #60a5fa; }
.fp-event-countdown.ok { color: rgba(200,210,240,0.7); }
.fp-event-type-badge {
font-size: 0.62rem;
padding: 2px 7px;
border-radius: 6px;
font-family: var(--font-ar);
opacity: 0.8;
}
.fp-event-type-badge.sub { background: rgba(139,92,246,0.2); color: rgb(167,139,250); }
.fp-event-type-badge.doc { background: rgba(245,158,11,0.2); color: rgb(252,196,80); }
.fp-event-type-badge.rem { background: rgba(59,130,246,0.2); color: rgb(96,165,250); }
.fp-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 60px 24px;
color: rgba(200,210,240,0.35);
font-family: var(--font-ar);
font-size: 0.88rem;
text-align: center;
}
.fp-empty-icon { font-size: 3rem; opacity: 0.4; }
/* mobile */
@media (max-width: 768px) {
.smart-radar {
flex-wrap: wrap;
gap: 8px;
padding: 12px;
}
.sr-sep { display: none; }
.sr-tile {
flex: 1 1 40%;
padding: 6px 10px;
background: rgba(255,255,255,0.03);
border-radius: 10px;
}
.sr-future-btn { flex: 0 0 100%; justify-content: center; margin-right: 0; }
.fp-header-stats { display: none; }
}
/* ─── QUICK RENEW BUTTON ─────────────────────────────────── */
.sub-renew-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 8px;
background: rgba(74,222,128,0.15);
border: 1px solid rgba(74,222,128,0.3);
color: #4ade80;
font-size: 0.72rem;
font-family: var(--font-ar);
font-weight: 700;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: all 0.2s;
}
.sub-renew-btn:hover {
background: rgba(74,222,128,0.25);
transform: scale(1.05);
}
.fab,
.fab:hover,
.fab:focus-visible {
background: var(--accent2) !important;
}
.btn-save,
.btn-save:hover,
.btn-save:focus-visible {
background: var(--accent2) !important;
}
/* ─── LINK CARD ALIGNMENT WITH GLOBAL CARD SYSTEM ────────── */
.dashboard.filter-links .dash-grid .card[data-type="link"] {
background:
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
rgba(12, 14, 22, 0.94) !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .card-type-badge {
display: inline-flex !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .card-icon {
grid-column: auto !important;
grid-row: auto !important;
width: 42px !important;
height: 42px !important;
border-radius: 14px !important;
font-size: 1rem !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .card-title {
grid-column: auto !important;
grid-row: auto !important;
white-space: normal !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.35 !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .card-meta {
grid-column: auto !important;
grid-row: auto !important;
padding-top: 0 !important;
border-top: none !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .link-meta-card {
gap: 10px !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .link-domain-chip {
background: rgba(255,255,255,0.03) !important;
border-color: rgba(118, 149, 188, 0.12) !important;
color: rgba(191, 202, 219, 0.8) !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .link-meta-row {
min-width: 0;
gap: 8px !important;
padding: 12px 12px 10px !important;
border-radius: 14px !important;
border: 1px solid rgba(255,255,255,0.05) !important;
background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)) !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .link-favicon {
width: 16px !important;
height: 16px !important;
border-radius: 3px !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .link-url-text {
font-family: var(--font-mono) !important;
font-size: 0.78rem !important;
color: rgba(214, 223, 238, 0.8) !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .card-actions {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
opacity: 0 !important;
transform: translateY(-4px) !important;
pointer-events: none !important;
padding: 0 !important;
background: none !important;
border: none !important;
box-shadow: none !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"]:hover .card-actions,
.dashboard.filter-links .dash-grid .card[data-type="link"].card-expanded .card-actions {
opacity: 1 !important;
transform: translateY(0) !important;
pointer-events: auto !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .card-actions button {
opacity: 1 !important;
}
.dashboard.filter-links .dash-grid .card[data-type="link"] .card-timestamp {
display: block !important;
}
button,
.fab,
.btn-save,
.header-icon-btn,
.header-alert-badge,
.mob-nav-btn,
.card-actions button,
.card-more-btn {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
-webkit-user-drag: none;
}
.fab svg,
.fab svg * {
pointer-events: none;
-webkit-user-select: none;
user-select: none;
-webkit-user-drag: none;
}
/* ─── NOTES VIEW CARD SIZING ─────────────────────────────── */
@media (min-width: 769px) {
.dashboard.filter-notes .dash-grid {
grid-template-columns: repeat(auto-fill, minmax(360px, 520px)) !important;
justify-content: start !important;
align-content: start !important;
}
.dashboard.filter-notes .dash-grid .card[data-type="note"],
.dashboard.filter-notes .dash-grid .card[data-type="quicktext"],
.dashboard.filter-notes .dash-grid .card[data-type="markdown"],
.dashboard.filter-notes .dash-grid .card[data-type="code"] {
width: 100% !important;
max-width: 520px !important;
}
.dashboard.filter-notes .dash-grid .card[data-type="note"] .card-meta,
.dashboard.filter-notes .dash-grid .card[data-type="quicktext"] .card-meta,
.dashboard.filter-notes .dash-grid .card[data-type="markdown"] .card-meta,
.dashboard.filter-notes .dash-grid .card[data-type="code"] .card-meta {
-webkit-line-clamp: 6;
}
}
/* ─── PAGES VIEW CARD SIZING ─────────────────────────────── */
@media (min-width: 769px) {
.dashboard.filter-pages .dash-grid {
grid-template-columns: repeat(auto-fill, minmax(340px, 420px)) !important;
justify-content: start !important;
align-content: start !important;
gap: 18px !important;
}
.dashboard.filter-pages .dash-grid .card[data-type="page"] {
width: 100% !important;
max-width: 420px !important;
min-height: 220px !important;
}
}
/* ─── UNIFIED FILTER/PAGE CARD SIZING ───────────────────── */
@media (min-width: 769px) {
.dashboard.filtered-cards-view .dash-grid,
#page-grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 452px)) !important;
justify-content: start !important;
align-content: start !important;
gap: 18px !important;
}
.dashboard.filtered-cards-view .dash-grid .card,
.dashboard.filtered-cards-view .dash-grid .card-compact,
.dashboard.filtered-cards-view .dash-grid .card-wide,
.dashboard.filtered-cards-view .dash-grid .card-tall,
.dashboard.filtered-cards-view .dash-grid .card-auto-height,
#page-grid .card,
#page-grid .card-compact,
#page-grid .card-wide,
#page-grid .card-tall,
#page-grid .card-auto-height {
width: 100% !important;
max-width: none !important;
grid-column: span 1 !important;
}
}
/* ═══════════════════════════════════════════════════════════
─── MOBILE iOS-NATIVE REDESIGN — v124 ────────────────────
═══════════════════════════════════════════════════════════
COMPLETE REBUILD from scratch — new philosophy:
• iOS-native feel: deep dark bg, gradient cards, soft shadows
• Generous spacing: 18px card padding, 14px gap between cards
• Large touch targets: 56px list rows (Apple HIG compliant)
• Breathable typography: 1.05rem titles, 0.9rem body text
• Flat stack layout: no nested "box in box" feel
• Safe-area: 44px fallback when env() returns 0 (iOS edge case)
• Row-reverse header for RTL: icon visually on the right
• Dark theme: #07080c base, gradient cards, soft dividers only
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ─── DESIGN TOKENS — single source of truth ───────────
44px fallback covers iOS cases where env() returns 0
max() picks whichever is larger */
:root {
--m-safe-top: max(env(safe-area-inset-top, 0px), 44px);
--m-safe-bot: max(env(safe-area-inset-bottom, 0px), 0px);
--m-gap: 14px;
--m-card-pad: 18px;
--m-radius: 22px;
--m-radius-inner: 14px;
--m-touch: 56px;
--m-border: rgba(255,255,255,0.06);
--m-divider: rgba(255,255,255,0.05);
--m-bg: #07080c;
--m-text: #f4f5f8;
--m-text-dim: rgba(230,232,240,0.72);
--m-text-faint: rgba(200,205,220,0.5);
--m-card-grad: linear-gradient(180deg, rgba(20,22,30,0.98) 0%, rgba(13,15,22,0.98) 100%);
--m-inner-bg: rgba(0,0,0,0.24);
}
/* deep iOS dark background */
body { background: var(--m-bg) !important; }
/* ─── DASH HEADER — real gap from notch/Dynamic Island ─ */
.dash-header {
height: auto !important;
min-height: 0 !important;
padding: calc(var(--m-safe-top) + 14px) 18px 18px !important;
gap: 12px !important;
}
.dash-header h1,
.dash-header .greeting {
font-size: 1.4rem !important;
font-weight: 800 !important;
letter-spacing: -0.01em !important;
}
.dash-header .header-subtitle,
.dash-header .dash-subtitle {
font-size: 0.8rem !important;
color: var(--m-text-dim) !important;
}
.dash-header .header-icon-btn,
.dash-header .header-btn,
.dash-header button {
min-width: 44px !important;
min-height: 44px !important;
border-radius: 14px !important;
}
/* ─── GRID — single column, generous breathing room ──── */
.dash-grid,
#page-grid {
grid-template-columns: 1fr !important;
gap: var(--m-gap) !important;
padding: 0 14px !important;
padding-bottom: calc(84px + var(--m-safe-bot) + 16px) !important;
}
/* ─── CARD — iOS-native gradient block ────────────────── */
.dash-grid .card,
.dash-grid .card.card-tall,
.dash-grid .card.card-wide,
#page-grid .card {
display: block !important;
height: auto !important;
min-height: unset !important;
max-height: none !important;
padding: var(--m-card-pad) !important;
border-radius: var(--m-radius) !important;
background: var(--m-card-grad) !important;
border: 1px solid var(--m-border) !important;
box-shadow:
0 10px 28px rgba(0,0,0,0.4),
0 1px 0 rgba(255,255,255,0.04) inset !important;
}
/* ─── CARD SHELL — flat stack (no nested flex stretch) ── */
.dash-grid .card-shell,
#page-grid .card-shell {
display: flex !important;
flex-direction: column !important;
height: auto !important;
gap: 14px !important;
}
/* ─── HEADER — row-reverse: icon on visual right (RTL) ── */
.dash-grid .card-header,
#page-grid .card-header {
display: flex !important;
flex-direction: row-reverse !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
padding: 0 !important;
margin: 0 !important;
min-height: unset !important;
}
.dash-grid .card-header .card-icon,
#page-grid .card-header .card-icon {
width: 44px !important;
height: 44px !important;
border-radius: 13px !important;
font-size: 1.3rem !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.04) !important;
}
.dash-grid .card-header .card-type-badge,
#page-grid .card-header .card-type-badge {
font-size: 0.62rem !important;
padding: 4px 10px !important;
border-radius: 8px !important;
letter-spacing: 0.04em !important;
font-weight: 700 !important;
}
/* ─── BODY — natural height, no forced stretch ────────── */
.dash-grid .card-body,
#page-grid .card-body {
flex: 0 0 auto !important;
min-height: unset !important;
gap: 6px !important;
padding: 0 !important;
overflow: visible !important;
clip-path: none !important;
}
/* ─── TITLE — larger, bolder, iOS weight ─────────────── */
.dash-grid .card-title,
.dash-grid .card-compact .card-title,
#page-grid .card-title {
font-size: 1.05rem !important;
font-weight: 800 !important;
line-height: 1.35 !important;
letter-spacing: -0.01em !important;
padding: 0 !important;
margin: 0 !important;
color: var(--m-text) !important;
}
/* ─── META — 2 lines, readable body text ─────────────── */
.dash-grid .card-meta,
.dash-grid .card-compact .card-meta,
.dash-grid .card-tall .card-meta,
#page-grid .card-meta {
flex: 0 0 auto !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
overflow: hidden !important;
font-size: 0.88rem !important;
line-height: 1.55 !important;
max-height: 2.75em !important;
color: var(--m-text-dim) !important;
padding: 0 !important;
margin: 0 !important;
}
/* note/text cards: allow 3 lines */
.dash-grid .card[data-type="note"] .card-meta,
.dash-grid .card[data-type="quicktext"] .card-meta,
.dash-grid .card[data-type="markdown"] .card-meta {
-webkit-line-clamp: 3 !important;
max-height: 4.1em !important;
}
/* ─── SUB/DOC META — no clamp (contains full list) ──── */
body .dash-grid .card[data-type="subscription"] .card-meta,
body .dash-grid .card[data-type="document"] .card-meta,
body #page-grid .card[data-type="subscription"] .card-meta,
body #page-grid .card[data-type="document"] .card-meta {
max-height: none !important;
-webkit-line-clamp: unset !important;
display: flex !important;
flex-direction: column !important;
overflow: visible !important;
padding: 0 !important;
flex: 0 0 auto !important;
}
/* ─── FOOTER — minimal, integrated, no wasted space ─── */
.dash-grid .card-footer,
#page-grid .card-footer {
flex: 0 0 auto !important;
margin-top: 2px !important;
min-height: 0 !important;
padding: 12px 0 0 !important;
border-top: 1px solid var(--m-divider) !important;
gap: 0 !important;
}
.dash-grid .card-footer-main,
#page-grid .card-footer-main {
gap: 0 !important;
display: flex !important;
flex-direction: column !important;
}
/* empty meta row: hide completely */
.dash-grid .card-footer-meta-empty,
#page-grid .card-footer-meta-empty {
display: none !important;
min-height: 0 !important;
}
.dash-grid .card-footer-meta,
#page-grid .card-footer-meta {
min-height: 0 !important;
gap: 6px !important;
padding: 0 !important;
margin: 0 0 8px !important;
}
.dash-grid .card-footer-bottom,
#page-grid .card-footer-bottom {
gap: 10px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.dash-grid .card-timestamp,
#page-grid .card-timestamp {
font-size: 0.7rem !important;
color: var(--m-text-faint) !important;
font-weight: 500 !important;
}
.dash-grid .card-footer-chip,
#page-grid .card-footer-chip {
font-size: 0.7rem !important;
padding: 5px 11px !important;
border-radius: 9px !important;
font-weight: 600 !important;
}
/* ─── ACTIONS — visible on mobile (tap + long-press both work) ── */
.dash-grid .card-actions,
.dash-grid .card-compact .card-actions,
#page-grid .card-actions {
display: flex !important;
opacity: 1 !important;
pointer-events: auto !important;
position: static !important;
transform: none !important;
background: none !important;
padding: 10px 0 0 !important;
justify-content: flex-end !important;
gap: 6px !important;
}
/* Dash-card variants keep absolute positioning but still visible + clickable */
.dash-grid .card.page-dash-card .card-actions,
.dash-grid .card.trip-dash-card .card-actions,
.dash-grid .card.status-dash-card .card-actions,
.dash-grid .card.doc-dash-card .card-actions,
.dash-grid .card.sub-dash-card .card-actions,
.dash-grid .card.checklist-dash-card .card-actions,
.dash-grid .card.note-dash-card .card-actions,
.dash-grid .card.wifi-dash-card .card-actions,
.dash-grid .card.link-dash-card .card-actions,
.dash-grid .card[data-type="reminder"]:not(.nc-dash-card) .card-actions,
.dash-grid .card.stocks-dash-card .card-actions,
.dash-grid .card.vehicle-dash-card .card-actions,
.dash-grid .card.medicine-dash-card .card-actions,
#page-grid .card.page-dash-card .card-actions,
#page-grid .card.trip-dash-card .card-actions,
#page-grid .card.status-dash-card .card-actions,
#page-grid .card.link-dash-card .card-actions,
#page-grid .card[data-type="reminder"]:not(.nc-dash-card) .card-actions,
#page-grid .card.stocks-dash-card .card-actions {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
bottom: auto !important;
z-index: 6 !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity .18s ease !important;
background: none !important;
padding: 0 !important;
}
.dash-grid .card.nc-dash-card .card-actions,
#page-grid .card.nc-dash-card .card-actions {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
bottom: auto !important;
z-index: 8 !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity .18s ease !important;
background: none !important;
padding: 0 !important;
justify-content: flex-end !important;
}
/* Dash-card variants: action row reveals on hover/focus only */
.dash-grid .card:hover .card-actions,
.dash-grid .card:focus-within .card-actions,
.dash-grid .card.card-expanded .card-actions,
#page-grid .card:hover .card-actions,
#page-grid .card:focus-within .card-actions {
opacity: 1 !important;
pointer-events: auto !important;
}
/* ─── SUBSCRIPTION LIST — 56px rows, soft divider lines ─
iOS Contacts/Reminders pattern: one container, soft
dividers between rows, no harsh inner borders.
specificity 0,3,1 beats CARD SHELL 0,3,0 */
body .dash-grid .card .subs-preview-list,
body #page-grid .card .subs-preview-list {
height: auto !important;
min-height: var(--m-touch) !important;
max-height: calc(var(--m-touch) * 3) !important;
overflow-y: auto !important;
scroll-snap-type: none !important;
flex: 0 0 auto !important;
padding: 0 !important;
gap: 0 !important;
background: var(--m-inner-bg) !important;
border-radius: var(--m-radius-inner) !important;
border: 1px solid rgba(255,255,255,0.04) !important;
-webkit-overflow-scrolling: touch !important;
}
body .dash-grid .card .sub-item-preview,
body #page-grid .card .sub-item-preview {
height: var(--m-touch) !important;
min-height: var(--m-touch) !important;
max-height: var(--m-touch) !important;
padding: 0 14px !important;
gap: 12px !important;
scroll-snap-align: none !important;
border-bottom: 1px solid var(--m-divider) !important;
background: transparent !important;
display: flex !important;
align-items: center !important;
}
body .dash-grid .card .sub-item-preview:last-child {
border-bottom: 0 !important;
}
body .dash-grid .card .sub-name {
font-size: 0.92rem !important;
font-weight: 700 !important;
color: var(--m-text) !important;
line-height: 1.3 !important;
}
body .dash-grid .card .sub-price {
font-size: 0.78rem !important;
color: var(--m-text-dim) !important;
font-weight: 500 !important;
}
body .dash-grid .card .sub-urgency {
font-size: 0.66rem !important;
padding: 3px 9px !important;
border-radius: 7px !important;
font-weight: 700 !important;
}
body .dash-grid .card .sub-preview-icon {
font-size: 1.25rem !important;
width: 36px !important;
height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(255,255,255,0.06) !important;
border-radius: 10px !important;
flex-shrink: 0 !important;
}
body .sub-renew-btn {
font-size: 0.74rem !important;
padding: 6px 12px !important;
border-radius: 9px !important;
min-height: 34px !important;
}
/* ─── DOCUMENT LIST — same iOS-native row pattern ────── */
body .dash-grid .card .docs-preview-list,
body .dash-grid .card .docs-preview-desktop,
body .dash-grid .card .docs-preview-compact,
body #page-grid .card .docs-preview-list,
body #page-grid .card .docs-preview-desktop,
body #page-grid .card .docs-preview-compact {
height: auto !important;
min-height: var(--m-touch) !important;
max-height: calc(var(--m-touch) * 3) !important;
overflow-y: auto !important;
scroll-snap-type: none !important;
flex: 0 0 auto !important;
padding: 0 !important;
gap: 0 !important;
background: var(--m-inner-bg) !important;
border-radius: var(--m-radius-inner) !important;
border: 1px solid rgba(255,255,255,0.04) !important;
-webkit-overflow-scrolling: touch !important;
}
body .dash-grid .card .doc-item-preview,
body #page-grid .card .doc-item-preview {
height: var(--m-touch) !important;
min-height: var(--m-touch) !important;
max-height: var(--m-touch) !important;
padding: 0 14px !important;
gap: 12px !important;
scroll-snap-align: none !important;
border-bottom: 1px solid var(--m-divider) !important;
background: transparent !important;
display: flex !important;
align-items: center !important;
}
body .dash-grid .card .doc-item-preview:last-child {
border-bottom: 0 !important;
}
body .dash-grid .card .doc-name {
font-size: 0.92rem !important;
font-weight: 700 !important;
color: var(--m-text) !important;
line-height: 1.3 !important;
}
body .dash-grid .card .doc-urgency {
font-size: 0.66rem !important;
padding: 3px 9px !important;
border-radius: 7px !important;
font-weight: 700 !important;
}
/* ─── SMART RADAR — iOS hero card feel ─────────────── */
.smart-radar {
border-radius: var(--m-radius) !important;
margin: 0 0 var(--m-gap) !important;
padding: 18px !important;
background: var(--m-card-grad) !important;
border: 1px solid var(--m-border) !important;
box-shadow: 0 10px 28px rgba(0,0,0,0.4) !important;
}
.sr-value { font-size: 1rem !important; font-weight: 800 !important; }
.sr-icon { font-size: 1.3rem !important; }
.sr-label { font-size: 0.7rem !important; color: var(--m-text-dim) !important; }
.sr-future-btn {
font-size: 0.84rem !important;
padding: 11px 18px !important;
border-radius: 12px !important;
min-height: 44px !important;
font-weight: 700 !important;
}
/* ─── FUTURE PANEL — iOS bottom sheet ─────────────── */
.fp-sheet {
max-width: 100% !important;
max-height: 88dvh !important;
border-radius: 24px 24px 0 0 !important;
padding-bottom: var(--m-safe-bot) !important;
}
.fp-header { padding: 18px 18px 14px !important; gap: 14px !important; }
.fp-title { font-size: 1.05rem !important; font-weight: 800 !important; }
.fp-subtitle { font-size: 0.78rem !important; }
.fp-close { width: 36px !important; height: 36px !important; border-radius: 11px !important; }
.fp-body { padding: 16px 18px 28px !important; }
.fp-events { padding-right: 18px !important; }
.fp-event { padding: 14px !important; gap: 12px !important; border-radius: var(--m-radius-inner) !important; }
.fp-event-icon { width: 42px !important; height: 42px !important; font-size: 1.35rem !important; border-radius: 12px !important; flex-shrink: 0 !important; }
.fp-event-name { font-size: 0.92rem !important; font-weight: 700 !important; }
.fp-event-meta { font-size: 0.72rem !important; }
.fp-event-countdown { font-size: 0.86rem !important; font-weight: 700 !important; }
.fp-event-type-badge { font-size: 0.62rem !important; padding: 3px 8px !important; border-radius: 7px !important; }
.fp-group-label { font-size: 0.74rem !important; }
.fp-stat-pill { padding: 8px 14px !important; min-width: 60px !important; border-radius: 11px !important; }
.fp-stat-num { font-size: 1rem !important; font-weight: 800 !important; }
.fp-stat-lbl { font-size: 0.62rem !important; }
/* ─── TOOLBAR & TAGS — breathable chips ─────────────── */
.cards-toolbar {
padding: 0 0 10px !important;
gap: 8px !important;
}
.tags-bar {
gap: 8px !important;
margin-bottom: var(--m-gap) !important;
padding: 0 !important;
}
.tags-bar .tag-chip,
.tag-chip {
padding: 8px 14px !important;
font-size: 0.78rem !important;
border-radius: 11px !important;
min-height: 36px !important;
font-weight: 600 !important;
}
}
/* ── Extra-small phones (< 360px) — slight shrink only ── */
@media (max-width: 359px) {
:root {
--m-card-pad: 16px;
--m-radius: 20px;
--m-touch: 52px;
--m-gap: 12px;
}
.dash-grid .card-title,
#page-grid .card-title { font-size: 0.98rem !important; }
.dash-grid .card-header .card-icon,
#page-grid .card-header .card-icon {
width: 40px !important;
height: 40px !important;
}
body .dash-grid .card .sub-name,
body .dash-grid .card .doc-name {
font-size: 0.88rem !important;
}
}
/* ─── Long-press pulse (mobile card feedback) ─────────────── */
@keyframes lp-pulse {
0% { box-shadow: 0 0 0 0 rgba(139,92,246,0.5); }
60% { box-shadow: 0 0 0 10px rgba(139,92,246,0); }
100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
}
.card.lp-pulse {
animation: lp-pulse 0.4s ease-out !important;
}
@media (prefers-reduced-motion: reduce) {
.card.lp-pulse { animation: none !important; }
}
/* ─── MOBILE POLISH — header, search, inner card density ─── */
@media (max-width: 768px) {
:root {
--m-safe-top: max(env(safe-area-inset-top, 0px), 14px);
--m-card-pad: 20px;
--m-gap: 16px;
--m-touch: 62px;
--m-card-height: 196px;
}
.dash-header {
padding: calc(var(--m-safe-top) + 6px) 14px 14px !important;
gap: 10px !important;
}
.dash-header-right {
position: relative !important;
gap: 8px !important;
overflow: visible !important;
}
.dash-header-left {
gap: 6px !important;
}
.dash-logo {
font-size: 1.28rem !important;
letter-spacing: 0.08em !important;
}
.header-search-wrap {
position: relative !important;
flex: 0 0 44px !important;
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
padding: 0 !important;
justify-content: center !important;
gap: 0 !important;
overflow: hidden !important;
cursor: pointer;
transition: width .22s ease, min-width .22s ease, box-shadow .22s ease, background .22s ease !important;
}
.header-search-wrap .header-search-icon {
margin: 0 !important;
color: rgba(230, 236, 245, 0.78) !important;
}
.header-search-wrap .header-search-input,
.header-search-wrap .search-clear-btn,
.header-search-wrap .search-archive-toggle,
.header-search-wrap #search-count {
opacity: 0;
pointer-events: none;
}
.header-search-wrap .header-search-input {
width: 0 !important;
min-width: 0 !important;
padding: 0 !important;
}
.header-search-wrap .search-archive-toggle,
.header-search-wrap #search-count {
display: none !important;
}
.header-search-wrap.mobile-active {
position: absolute !important;
left: 14px !important;
right: 14px !important;
top: calc(100% - 2px) !important;
width: auto !important;
min-width: 0 !important;
height: 48px !important;
padding: 0 14px !important;
gap: 10px !important;
justify-content: flex-start !important;
background: rgba(16, 18, 26, 0.98) !important;
border-color: rgba(255,255,255,0.1) !important;
box-shadow: 0 18px 36px rgba(0,0,0,0.38) !important;
z-index: 35 !important;
}
.header-search-wrap.mobile-active .header-search-input,
.header-search-wrap.mobile-active .search-clear-btn {
opacity: 1;
pointer-events: auto;
}
.header-search-wrap.mobile-active .header-search-input {
width: 100% !important;
font-size: 0.9rem !important;
}
.header-search-wrap.mobile-active .search-clear-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
min-height: 28px;
}
.search-history-drop {
top: calc(100% + 10px) !important;
left: 0 !important;
right: 0 !important;
border-radius: 16px !important;
}
.dash-grid,
#page-grid {
gap: 16px !important;
padding: 0 12px !important;
}
.dash-grid .card,
.dash-grid .card.card-tall,
.dash-grid .card.card-wide,
.dash-grid .card.card-compact,
.dash-grid .card.card-auto-height,
#page-grid .card {
height: var(--m-card-height) !important;
min-height: var(--m-card-height) !important;
max-height: var(--m-card-height) !important;
overflow: hidden !important;
}
.dash-grid .card-shell,
#page-grid .card-shell {
gap: 16px !important;
height: 100% !important;
min-height: 0 !important;
}
.dash-grid .card-header,
#page-grid .card-header {
align-items: flex-start !important;
justify-content: space-between !important;
gap: 14px !important;
}
.dash-grid .card-body,
#page-grid .card-body {
flex: 1 1 auto !important;
min-height: 0 !important;
width: 100% !important;
gap: 10px !important;
overflow: hidden !important;
}
.dash-grid .card-title,
.dash-grid .card-compact .card-title,
#page-grid .card-title {
font-size: 1.08rem !important;
line-height: 1.4 !important;
}
.dash-grid .card-meta,
.dash-grid .card-compact .card-meta,
.dash-grid .card-tall .card-meta,
#page-grid .card-meta {
flex: 1 1 auto !important;
width: 100% !important;
max-height: none !important;
overflow-x: hidden !important;
overflow-y: auto !important;
scrollbar-width: none !important;
font-size: 0.9rem !important;
line-height: 1.6 !important;
}
.dash-grid .card-meta::-webkit-scrollbar,
#page-grid .card-meta::-webkit-scrollbar {
display: none !important;
}
.dash-grid .card[data-type="note"] .card-meta,
.dash-grid .card[data-type="quicktext"] .card-meta,
.dash-grid .card[data-type="markdown"] .card-meta,
#page-grid .card[data-type="note"] .card-meta,
#page-grid .card[data-type="quicktext"] .card-meta,
#page-grid .card[data-type="markdown"] .card-meta {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 4 !important;
overflow: hidden !important;
max-height: 6.4em !important;
}
body .dash-grid .card .subs-preview-list,
body .dash-grid .card .docs-preview-list,
body .dash-grid .card .docs-preview-desktop,
body .dash-grid .card .docs-preview-compact,
body #page-grid .card .subs-preview-list,
body #page-grid .card .docs-preview-list,
body #page-grid .card .docs-preview-desktop,
body #page-grid .card .docs-preview-compact {
width: 100% !important;
max-height: calc(var(--m-touch) * 1.95) !important;
border-radius: 16px !important;
}
body .dash-grid .card .sub-item-preview,
body .dash-grid .card .doc-item-preview,
body #page-grid .card .sub-item-preview,
body #page-grid .card .doc-item-preview {
height: var(--m-touch) !important;
min-height: var(--m-touch) !important;
max-height: var(--m-touch) !important;
width: 100% !important;
padding: 0 16px !important;
gap: 14px !important;
}
body .dash-grid .card .sub-item-preview-content,
body #page-grid .card .sub-item-preview-content {
min-width: 0 !important;
gap: 4px !important;
}
body .dash-grid .card .sub-name,
body .dash-grid .card .doc-name,
body #page-grid .card .sub-name,
body #page-grid .card .doc-name {
font-size: 0.94rem !important;
line-height: 1.35 !important;
}
body .dash-grid .card .doc-item-right,
body #page-grid .card .doc-item-right {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
flex-shrink: 0 !important;
}
body .dash-grid .card .doc-item-preview,
body #page-grid .card .doc-item-preview {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
}
body .dash-grid .card .sub-item-preview,
body #page-grid .card .sub-item-preview {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto !important;
align-items: center !important;
}
.dash-grid .card-footer,
#page-grid .card-footer {
flex: 0 0 auto !important;
margin-top: auto !important;
}
.dash-grid .card[data-type="document"] .card-meta::after,
.dash-grid .card[data-type="subscription"] .card-meta::after,
#page-grid .card[data-type="document"] .card-meta::after,
#page-grid .card[data-type="subscription"] .card-meta::after {
content: '';
position: sticky;
inset-inline-start: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 18px;
background: linear-gradient(180deg, rgba(10,12,18,0), rgba(10,12,18,0.92));
pointer-events: none;
}
.smart-radar {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
padding: 16px !important;
}
.sr-tile {
flex: 1 1 calc(50% - 5px) !important;
min-height: 76px !important;
padding: 12px 14px !important;
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(255,255,255,0.05) !important;
border-radius: 14px !important;
align-items: center !important;
}
.sr-content {
gap: 4px !important;
}
.sr-value {
font-size: 1.02rem !important;
line-height: 1.2 !important;
}
.sr-label {
font-size: 0.72rem !important;
}
.sr-future-btn {
flex: 1 1 100% !important;
min-height: 48px !important;
justify-content: center !important;
}
}
/* ─── PAGE MODE SELECTOR BUTTONS ─────────────────────────────── */
.page-mode-selector {
display: none;
align-items: center;
gap: 2px;
}
.page-mode-btn {
background: none;
border: 1px solid transparent;
border-radius: 8px;
padding: 5px 8px;
cursor: pointer;
font-size: 16px;
opacity: 0.45;
transition: all 0.18s ease;
color: var(--fg);
line-height: 1;
}
.page-mode-btn:hover {
opacity: 0.85;
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.1);
}
.page-mode-btn.active {
opacity: 1;
background: rgba(139,92,246,0.2);
border-color: rgba(139,92,246,0.45);
}
/* ═══════════════════════════════════════════════════════════
─── MOBILE OVERHAUL v2 — iOS Premium Feel ─────────────────
═══════════════════════════════════════════════════════════ */
/* ─── 1. Mobile Header ─────────────────────────────────────── */
@media (max-width: 768px) {
/* Hide clutter elements */
.smart-feed-btn { display: none !important; }
.header-time-pill { display: none !important; }
#header-date { display: none !important; }
.header-alert-badge { display: none !important; }
#edit-order-btn { display: none !important; }
#quick-add-btn { display: none !important; }
#search-wrap .search-archive-toggle { display: none !important; }
.cloud-dot { display: none !important; }
#page-mode-selector { display: none !important; }
/* Clean header */
.dash-header {
padding: calc(max(env(safe-area-inset-top,0px), 50px) + 8px) 16px 12px !important;
height: auto !important;
min-height: 0 !important;
justify-content: space-between !important;
align-items: center !important;
background: rgba(7,8,12,0.95) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
position: sticky !important;
top: 0 !important;
z-index: 40 !important;
}
/* Hide right section overflow */
.dash-header-right {
flex: 1 !important;
gap: 10px !important;
overflow: hidden !important;
min-width: 0 !important;
}
/* Section label - prominent */
#header-section-label {
font-size: 1.15rem !important;
font-weight: 800 !important;
color: var(--text) !important;
letter-spacing: -0.02em !important;
flex: 1 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* Search bar - hidden by default on mobile */
.header-search-wrap {
display: none !important;
}
/* Settings button stays */
#settings-btn {
display: flex !important;
min-width: 40px !important;
min-height: 40px !important;
}
/* Left side compact */
.dash-header-left {
gap: 6px !important;
flex-shrink: 0 !important;
}
/* Header buttons - smaller on mobile */
.header-icon-btn {
min-width: 40px !important;
min-height: 40px !important;
border-radius: 12px !important;
}
}
/* ─── 2. Bottom Navigation ──────────────────────────────────── */
@media (max-width: 768px) {
.mobile-bottom-nav {
height: calc(62px + max(env(safe-area-inset-bottom,0px), 0px)) !important;
padding: 0 16px !important;
padding-bottom: max(env(safe-area-inset-bottom,0px), 0px) !important;
background: rgba(10,11,18,0.97) !important;
backdrop-filter: blur(24px) !important;
-webkit-backdrop-filter: blur(24px) !important;
border-top: 1px solid rgba(255,255,255,0.06) !important;
display: grid !important;
grid-template-columns: 1fr 1fr 72px 1fr 1fr !important;
align-items: center !important;
gap: 0 !important;
}
.mob-nav-btn {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
height: 62px !important;
border: none !important;
background: transparent !important;
cursor: pointer !important;
position: relative !important;
color: rgba(200,205,220,0.45) !important;
transition: color 0.2s !important;
padding: 0 !important;
}
.mob-nav-btn svg {
width: 22px !important;
height: 22px !important;
stroke-width: 2 !important;
transition: all 0.2s !important;
}
.mob-nav-btn span {
font-size: 0.62rem !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
transition: all 0.2s !important;
}
.mob-nav-btn.active {
color: #a78bfa !important;
}
.mob-nav-btn.active svg {
stroke-width: 2.5 !important;
filter: drop-shadow(0 0 6px rgba(167,139,250,0.5)) !important;
}
/* Center ADD button - premium feel */
.mob-nav-btn.mob-nav-add {
background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
border-radius: 20px !important;
width: 52px !important;
height: 52px !important;
margin: 0 auto !important;
box-shadow: 0 4px 20px rgba(139,92,246,0.5), 0 0 0 1px rgba(255,255,255,0.1) inset !important;
color: white !important;
transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.mob-nav-btn.mob-nav-add:active {
transform: scale(0.92) !important;
box-shadow: 0 2px 12px rgba(139,92,246,0.4) !important;
}
.mob-nav-btn.mob-nav-add svg {
width: 24px !important;
height: 24px !important;
stroke-width: 2.8 !important;
}
/* Active indicator dot */
.mob-nav-btn.active::after {
content: '' !important;
position: absolute !important;
bottom: 6px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 4px !important;
height: 4px !important;
background: #a78bfa !important;
border-radius: 50% !important;
opacity: 1 !important;
}
.mob-nav-btn.mob-nav-add::after {
display: none !important;
}
}
/* ─── 3. Cards - Visual Overhaul ───────────────────────────── */
@media (max-width: 768px) {
/* Card container */
.dash-grid,
#page-grid {
padding: 0 14px !important;
gap: 14px !important;
padding-bottom: calc(82px + max(env(safe-area-inset-bottom,0px), 12px) + 12px) !important;
}
/* Cards - gradient & glow */
.dash-grid .card,
#page-grid .card {
border-radius: 24px !important;
padding: 20px !important;
background: linear-gradient(160deg, rgba(22,24,34,1) 0%, rgba(14,15,24,1) 100%) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
box-shadow:
0 2px 0 rgba(255,255,255,0.04) inset,
0 12px 32px rgba(0,0,0,0.5) !important;
overflow: hidden !important;
position: relative !important;
transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
/* Subtle top highlight */
.dash-grid .card::before,
#page-grid .card::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 1px !important;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent) !important;
pointer-events: none !important;
}
/* Card press effect */
.dash-grid .card:active,
#page-grid .card:active {
transform: scale(0.985) !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
/* Icon - bigger, more prominent */
.dash-grid .card-header .card-icon,
#page-grid .card-header .card-icon {
width: 48px !important;
height: 48px !important;
border-radius: 14px !important;
font-size: 1.4rem !important;
background: rgba(255,255,255,0.07) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Title - iOS weight & size */
.dash-grid .card-title,
#page-grid .card-title {
font-size: 1.08rem !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: var(--text) !important;
letter-spacing: -0.01em !important;
}
/* Type badge - refined */
.dash-grid .card-type-badge,
#page-grid .card-type-badge {
font-size: 0.6rem !important;
font-weight: 700 !important;
padding: 4px 10px !important;
border-radius: 8px !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
opacity: 0.85 !important;
}
/* Pinned indicator */
.dash-grid .card[data-pinned="true"]::after,
.dash-grid .card.card-pinned::after {
content: '📌' !important;
position: absolute !important;
top: 14px !important;
left: 14px !important;
font-size: 0.7rem !important;
opacity: 0.6 !important;
}
}
/* ─── 4. Cards Toolbar ──────────────────────────────────────── */
@media (max-width: 768px) {
.cards-toolbar {
padding: 10px 14px !important;
margin: 0 !important;
gap: 8px !important;
}
#cards-count-label {
font-size: 0.75rem !important;
font-weight: 600 !important;
color: rgba(200,205,220,0.5) !important;
}
.toolbar-btn {
font-size: 0.75rem !important;
padding: 6px 12px !important;
border-radius: 10px !important;
min-height: 34px !important;
}
.sort-select {
font-size: 0.75rem !important;
padding: 6px 10px !important;
border-radius: 10px !important;
min-height: 34px !important;
}
}
/* ─── 5. Empty State ────────────────────────────────────────── */
@media (max-width: 768px) {
.empty-state,
.smart-empty-state {
padding: 60px 24px 40px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 10px !important;
}
.empty-icon,
.smart-empty-icon {
font-size: 3rem !important;
margin-bottom: 8px !important;
filter: drop-shadow(0 4px 12px rgba(139,92,246,0.3)) !important;
}
.empty-title,
.smart-empty-title {
font-size: 1.2rem !important;
font-weight: 800 !important;
color: var(--text) !important;
letter-spacing: -0.02em !important;
}
.empty-sub,
.smart-empty-sub {
font-size: 0.85rem !important;
color: rgba(200,205,220,0.55) !important;
line-height: 1.6 !important;
max-width: 240px !important;
}
.smart-show-all-btn {
margin-top: 8px !important;
padding: 12px 24px !important;
border-radius: 14px !important;
font-size: 0.9rem !important;
font-weight: 700 !important;
background: rgba(139,92,246,0.15) !important;
border: 1px solid rgba(139,92,246,0.3) !important;
color: #a78bfa !important;
min-height: 46px !important;
}
}
/* ─── 6. Page Mode Selector (toolbar context) ───────────────── */
@media (max-width: 768px) {
/* Page mode selector hidden from header; will be placed in toolbar */
#page-mode-selector {
/* Managed via display:none above; JS can re-insert into toolbar */
}
}
/* ─── 7. Card Entrance Animations (global) ──────────────────── */
@keyframes cardSlideIn {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.dash-grid .card,
#page-grid .card {
animation: cardSlideIn 0.3s cubic-bezier(0.16,1,0.3,1) both !important;
}
.dash-grid .card:nth-child(1),
#page-grid .card:nth-child(1) { animation-delay: 0.02s !important; }
.dash-grid .card:nth-child(2),
#page-grid .card:nth-child(2) { animation-delay: 0.05s !important; }
.dash-grid .card:nth-child(3),
#page-grid .card:nth-child(3) { animation-delay: 0.08s !important; }
.dash-grid .card:nth-child(4),
#page-grid .card:nth-child(4) { animation-delay: 0.11s !important; }
.dash-grid .card:nth-child(5),
#page-grid .card:nth-child(5) { animation-delay: 0.14s !important; }
.dash-grid .card:nth-child(n+6),
#page-grid .card:nth-child(n+6) { animation-delay: 0.17s !important; }
}
/* ─── 8. Login Screen ───────────────────────────────────────── */
@media (max-width: 768px) {
.login-screen {
background: radial-gradient(ellipse at 30% 20%, rgba(139,92,246,0.12) 0%, transparent 60%),
radial-gradient(ellipse at 80% 80%, rgba(59,130,246,0.08) 0%, transparent 60%),
#07080c !important;
}
.login-box {
width: calc(100% - 32px) !important;
max-width: 380px !important;
padding: 36px 28px !important;
border-radius: 28px !important;
background: rgba(18,19,28,0.95) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
box-shadow: 0 24px 64px rgba(0,0,0,0.7) !important;
}
.login-logo {
font-size: 2.2rem !important;
margin-bottom: 24px !important;
letter-spacing: 0.12em !important;
}
.device-name-input {
padding: 16px 20px !important;
border-radius: 16px !important;
font-size: 1rem !important;
min-height: 52px !important;
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
color: var(--text) !important;
width: 100% !important;
box-sizing: border-box !important;
margin-bottom: 12px !important;
}
.device-name-input:focus {
/* Removed outline-killer; the broadened :focus-visible rule above handles keyboard focus,
while non-keyboard focus still gets the border-color highlight below. */
border-color: rgba(139,92,246,0.5) !important;
background: rgba(255,255,255,0.07) !important;
}
.request-access-btn {
width: 100% !important;
padding: 16px !important;
border-radius: 16px !important;
font-size: 1rem !important;
font-weight: 700 !important;
min-height: 52px !important;
background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
border: none !important;
color: white !important;
cursor: pointer !important;
box-shadow: 0 4px 20px rgba(139,92,246,0.4) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
.biometric-btn {
width: 100% !important;
padding: 16px !important;
border-radius: 16px !important;
font-size: 1rem !important;
font-weight: 700 !important;
min-height: 52px !important;
}
}
/* ─── 9. Smart Radar ────────────────────────────────────────── */
@media (max-width: 768px) {
.smart-radar {
margin: 0 0 14px !important;
border-radius: 24px !important;
padding: 16px !important;
background: linear-gradient(160deg, rgba(22,24,34,1) 0%, rgba(14,15,24,1) 100%) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
box-shadow: 0 12px 32px rgba(0,0,0,0.5) !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
}
.sr-tile {
flex: 1 1 calc(50% - 5px) !important;
background: rgba(0,0,0,0.2) !important;
border-radius: 16px !important;
padding: 14px !important;
border: 1px solid rgba(255,255,255,0.04) !important;
min-height: 72px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.sr-icon {
font-size: 1.4rem !important;
flex-shrink: 0 !important;
}
.sr-value {
font-size: 1rem !important;
font-weight: 800 !important;
color: var(--text) !important;
line-height: 1.2 !important;
}
.sr-label {
font-size: 0.68rem !important;
color: rgba(200,205,220,0.55) !important;
font-weight: 500 !important;
margin-top: 2px !important;
}
.sr-future-btn {
flex: 1 1 100% !important;
min-height: 46px !important;
border-radius: 14px !important;
font-size: 0.88rem !important;
font-weight: 700 !important;
background: rgba(139,92,246,0.12) !important;
border: 1px solid rgba(139,92,246,0.25) !important;
color: #c4b5fd !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
}
/* ─── 10. Sidebar Overlay ───────────────────────────────────── */
@media (max-width: 768px) {
.sidebar {
border-radius: 0 !important;
width: min(85vw, 300px) !important;
padding-top: max(env(safe-area-inset-top, 0px), 44px) !important;
}
.mobile-sidebar-head {
padding: 20px 20px 16px !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
margin-bottom: 12px !important;
}
.mobile-sidebar-title {
font-size: 1.1rem !important;
font-weight: 800 !important;
color: var(--text) !important;
}
.sidebar-nav-btn {
padding: 12px 16px !important;
border-radius: 14px !important;
font-size: 0.9rem !important;
min-height: 48px !important;
transition: background 0.15s, color 0.15s !important;
}
.sidebar-nav,
.sidebar-filters {
gap: 10px !important;
padding: 4px 16px 10px !important;
}
.sidebar-bottom {
gap: 14px !important;
padding: 10px 16px 18px !important;
}
.sidebar-bottom-group {
gap: 12px !important;
}
.sidebar-bottom-divider {
width: 44px !important;
margin: 2px auto 6px !important;
background: rgba(255,255,255,0.09) !important;
}
.sidebar-bottom .sidebar-icon-btn,
.sidebar-bottom .sidebar-nav-btn {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) !important;
align-items: center !important;
column-gap: 16px !important;
justify-content: initial !important;
min-height: 56px !important;
padding: 0 18px !important;
}
.sidebar-bottom .sidebar-icon-btn svg,
.sidebar-bottom .sidebar-nav-btn svg {
width: 22px !important;
height: 22px !important;
flex-shrink: 0 !important;
}
.sidebar-bottom .sidebar-icon-btn .sidebar-label,
.sidebar-bottom .sidebar-nav-btn .sidebar-label {
min-width: 0 !important;
text-align: right !important;
padding-inline-start: 2px !important;
}
.sidebar-nav-btn.active {
background: rgba(139,92,246,0.15) !important;
color: #c4b5fd !important;
}
.sidebar-nav-btn svg {
width: 20px !important;
height: 20px !important;
flex-shrink: 0 !important;
}
}
/* ═══════════════════════════════════════════════════════════
END MOBILE OVERHAUL v2
═══════════════════════════════════════════════════════════ */
/* ─── MOBILE SEARCH BUTTON (visible only on mobile) ───────── */
.mobile-search-btn {
display: none;
}
@media (max-width: 768px) {
.mobile-search-btn {
display: flex !important;
min-width: 40px !important;
min-height: 40px !important;
border-radius: 12px !important;
align-items: center !important;
justify-content: center !important;
}
/* Search wrap — hidden by default on mobile, shown when active */
#search-wrap {
position: fixed !important;
top: max(env(safe-area-inset-top,0px), 50px) !important;
left: 0 !important;
right: 0 !important;
padding: 10px 14px !important;
background: rgba(7,8,12,0.97) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-bottom: 1px solid rgba(255,255,255,0.07) !important;
z-index: 50 !important;
display: none !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
#search-wrap.mobile-active {
display: flex !important;
animation: slideDownSubtle 0.22s cubic-bezier(0.16,1,0.3,1) !important;
}
#search-wrap .header-search-input {
font-size: 0.95rem !important;
padding: 12px 14px !important;
min-height: 44px !important;
border-radius: 14px !important;
width: 100% !important;
}
@keyframes slideDownSubtle {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
}
/* ─── PAGE MODE SELECTOR — shown in toolbar on mobile ─────── */
@media (max-width: 768px) {
/* Show page mode selector at top of content area, not in header */
#page-mode-selector {
display: none !important; /* handled by JS per filter */
}
/* When shown as toolbar row */
.page-mode-toolbar {
display: flex;
gap: 8px;
padding: 6px 14px 10px;
align-items: center;
}
.page-mode-toolbar .page-mode-btn {
padding: 8px 16px !important;
border-radius: 12px !important;
font-size: 0.82rem !important;
font-weight: 700 !important;
border: 1px solid rgba(255,255,255,0.1) !important;
background: rgba(255,255,255,0.04) !important;
color: rgba(200,205,220,0.7) !important;
height: 36px !important;
min-height: 36px !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
.page-mode-toolbar .page-mode-btn.active {
background: rgba(139,92,246,0.18) !important;
border-color: rgba(139,92,246,0.4) !important;
color: #c4b5fd !important;
}
}
/* ─── GLOBAL IMPROVEMENTS — both mobile & desktop ─────────── */
/* Smoother card hover on desktop */
@media (min-width: 769px) {
.card {
transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s ease !important;
}
.card:hover {
transform: translateY(-2px) scale(1.005) !important;
}
}
/* Improved focus rings — broadened to all interactive elements */
:where(
button,
[role="button"],
a,
input,
select,
textarea,
[tabindex]:not([tabindex="-1"])
):focus-visible {
outline: 2px solid rgba(var(--accent-rgb),0.75) !important;
outline-offset: 2px !important;
border-radius: 4px;
}
/* Tag chips - nicer */
.card-footer-tag {
transition: background 0.15s, color 0.15s !important;
}
.card-footer-tag:hover {
background: rgba(139,92,246,0.2) !important;
color: #c4b5fd !important;
}
/* Toast - better mobile positioning handled */
@media (max-width: 768px) {
.toast {
bottom: calc(74px + max(env(safe-area-inset-bottom,0px), 0px) + 8px) !important;
left: 14px !important;
right: 14px !important;
top: auto !important;
border-radius: 16px !important;
text-align: center !important;
font-size: 0.88rem !important;
}
}
/* ─── MODAL IMPROVEMENTS ON MOBILE ────────────────────────── */
@media (max-width: 768px) {
/* Modal handle bar */
.modal-box::before {
content: '';
display: block;
width: 36px;
height: 4px;
background: rgba(255,255,255,0.15);
border-radius: 99px;
margin: 0 auto 16px;
flex-shrink: 0;
}
/* Modal title */
.modal-title {
font-size: 1.1rem !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
}
/* Type tabs scrollable row */
.type-tabs-bar {
overflow-x: auto !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
padding-bottom: 4px !important;
flex-wrap: nowrap !important;
}
.type-tabs-bar::-webkit-scrollbar { display: none !important; }
/* Form inputs */
.modal-input {
min-height: 44px !important;
border-radius: 16px !important;
font-size: 0.95rem !important;
padding: 14px 16px !important;
}
/* Save button full-width */
.btn-save {
min-height: 52px !important;
border-radius: 16px !important;
font-size: 1rem !important;
font-weight: 800 !important;
letter-spacing: 0.01em !important;
}
}
/* ─── SETTINGS PANEL ON MOBILE ─────────────────────────────── */
@media (max-width: 768px) {
.settings-panel {
border-radius: 28px 28px 0 0 !important;
padding-bottom: max(env(safe-area-inset-bottom,0px), 0px) !important;
max-height: 92dvh !important;
}
.settings-section {
border-radius: 20px !important;
padding: 18px !important;
margin-bottom: 12px !important;
}
.settings-section h3 {
font-size: 0.85rem !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: rgba(200,205,220,0.55) !important;
margin-bottom: 14px !important;
}
}
/* ─── CARDS TOOLBAR HIDE ON MOBILE (minimal) ───────────────── */
@media (max-width: 768px) {
/* Hide density and focus mode buttons on mobile — they don't fit */
#density-btn,
#focus-btn,
#bulk-toggle-btn {
display: none !important;
}
/* Sort select - compact */
#sort-select {
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 12px !important;
color: rgba(200,205,220,0.7) !important;
font-size: 0.78rem !important;
padding: 6px 10px !important;
min-height: 34px !important;
cursor: pointer !important;
}
}
/* ─── SMART RADAR SEPARATOR HIDE ON MOBILE ──────────────────── */
@media (max-width: 768px) {
.sr-sep {
display: none !important;
}
}
/* ─── PINNED BADGE ON MOBILE CARDS ─────────────────────────── */
@media (max-width: 768px) {
.pinned-card .card-type-badge::before {
content: '📌 ' !important;
}
}
/* ─── IMPROVE CARD COLORS PER TYPE ─────────────────────────── */
@media (max-width: 768px) {
.dash-grid .card[data-type="reminder"] {
border-inline-end: 3px solid rgba(251,146,60,0.4) !important;
}
.dash-grid .card[data-type="note"],
.dash-grid .card[data-type="markdown"] {
border-inline-end: 3px solid rgba(59,130,246,0.4) !important;
}
.dash-grid .card[data-type="link"] {
border-inline-end: 3px solid rgba(34,197,94,0.4) !important;
}
.dash-grid .card[data-type="subscription"] {
border-inline-end: 3px solid rgba(168,85,247,0.4) !important;
}
.dash-grid .card[data-type="document"] {
border-inline-end: 3px solid rgba(245,158,11,0.4) !important;
}
.dash-grid .card[data-type="page"] {
border-inline-end: 3px solid rgba(139,92,246,0.5) !important;
background: linear-gradient(160deg, rgba(26,22,45,1) 0%, rgba(16,13,28,1) 100%) !important;
}
.dash-grid .card[data-type="routine"] {
border-inline-end: 3px solid rgba(20,184,166,0.4) !important;
}
}
/* ═══════════════════════════════════════════════════════════
─── POMODORO TIMER ─────────────────────────────────────────
═══════════════════════════════════════════════════════════ */
.pomodoro-modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: flex-end;
justify-content: center;
}
.pomodoro-modal.hidden { display: none !important; }
.pomodoro-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(4px);
}
.pomodoro-sheet {
position: relative;
z-index: 1;
width: min(100%, 420px);
background: linear-gradient(180deg, rgba(18,20,32,0.99) 0%, rgba(10,11,18,0.99) 100%);
border-radius: 28px 28px 0 0;
padding: 12px 24px 40px;
animation: mobileSlideUp 0.35s cubic-bezier(0.16,1,0.3,1);
border: 1px solid rgba(255,255,255,0.07);
border-bottom: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.pomodoro-handle {
width: 36px;
height: 4px;
background: rgba(255,255,255,0.12);
border-radius: 99px;
margin-bottom: 4px;
flex-shrink: 0;
}
.pomodoro-header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.pomodoro-mode-tabs {
display: flex;
gap: 6px;
background: rgba(255,255,255,0.04);
padding: 4px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.06);
}
.pomo-mode-btn {
padding: 7px 14px;
border-radius: 10px;
border: none;
background: transparent;
color: rgba(200,205,220,0.5);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
font-family: var(--font-ar);
}
.pomo-mode-btn.active {
background: rgba(255,255,255,0.1);
color: var(--text);
}
.pomodoro-close {
background: rgba(255,255,255,0.06);
border: none;
width: 32px;
height: 32px;
border-radius: 10px;
color: rgba(200,205,220,0.6);
cursor: pointer;
font-size: 0.85rem;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
flex-shrink: 0;
}
.pomodoro-close:hover { background: rgba(255,255,255,0.1); }
/* Ring */
.pomodoro-ring-wrap {
position: relative;
width: 200px;
height: 200px;
flex-shrink: 0;
}
.pomodoro-ring {
width: 200px;
height: 200px;
transform: rotate(-90deg);
}
.pomo-ring-bg {
fill: none;
stroke: rgba(255,255,255,0.06);
stroke-width: 8;
}
.pomo-ring-fill {
fill: none;
stroke: var(--danger);
stroke-width: 8;
stroke-linecap: round;
stroke-dasharray: 552.92 552.92; /* full circumference */
transition: stroke-dasharray 1s linear, stroke 0.4s ease;
}
.pomodoro-time-display {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 2.8rem;
font-weight: 700;
color: var(--text);
letter-spacing: 0.02em;
gap: 2px;
}
.pomo-colon {
opacity: 0.5;
font-size: 2.2rem;
animation: pomoBlink 1s step-end infinite;
}
@keyframes pomoBlink {
0%, 100% { opacity: 0.5; }
50% { opacity: 0.15; }
}
@media (prefers-reduced-motion: reduce) {
.pomo-colon { animation: none; opacity: 0.5; }
}
/* Task label */
.pomodoro-task-label {
font-size: 0.88rem;
color: rgba(200,205,220,0.55);
font-weight: 500;
text-align: center;
}
/* Controls */
.pomodoro-controls {
display: flex;
align-items: center;
gap: 20px;
}
.pomo-ctrl-btn {
border: none;
background: rgba(255,255,255,0.06);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
color: rgba(200,205,220,0.7);
}
.pomo-ctrl-btn:hover { background: rgba(255,255,255,0.1); }
.pomo-reset, .pomo-skip {
width: 48px;
height: 48px;
}
.pomo-play {
width: 72px;
height: 72px;
background: var(--danger) !important;
color: white !important;
box-shadow: 0 6px 24px rgba(239,68,68,0.4);
transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.pomo-play:active {
transform: scale(0.92) !important;
}
/* Sessions dots */
.pomodoro-sessions {
display: flex;
align-items: center;
gap: 12px;
}
.pomo-session-dots {
display: flex;
gap: 8px;
}
.pomo-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255,255,255,0.12);
transition: all 0.3s;
}
.pomo-dot.active {
background: var(--danger);
box-shadow: 0 0 8px rgba(239,68,68,0.5);
}
.pomo-dot.done {
background: rgba(34,211,117,0.7);
}
.pomo-session-label {
font-size: 0.78rem;
color: rgba(200,205,220,0.5);
font-weight: 600;
}
/* Stats row */
.pomodoro-stats-row {
display: flex;
gap: 24px;
width: 100%;
justify-content: center;
}
.pomo-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.pomo-stat span:first-child {
font-size: 1.4rem;
font-weight: 800;
color: var(--text);
font-family: var(--font-mono);
}
.pomo-stat span:last-child {
font-size: 0.72rem;
color: rgba(200,205,220,0.5);
font-weight: 500;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.pomodoro-sheet {
padding-bottom: calc(32px + max(env(safe-area-inset-bottom,0px), 0px));
border-radius: 32px 32px 0 0;
}
.pomodoro-ring-wrap {
width: 180px;
height: 180px;
}
.pomodoro-ring {
width: 180px;
height: 180px;
}
.pomodoro-time-display {
font-size: 2.4rem;
}
}
/* ═══════════════════════════════════════════════════════════
─── THEME COLOR SWATCHES ───────────────────────────────────
═══════════════════════════════════════════════════════════ */
.theme-swatches-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 4px 16px 12px;
}
.theme-swatch {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
position: relative;
outline: none;
background: var(--swatch-color, var(--accent));
box-shadow: 0 0 0 0px var(--swatch-color, var(--accent));
}
.theme-swatch:hover {
transform: scale(1.18);
box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
.theme-swatch.active {
border-color: white !important;
transform: scale(1.12);
box-shadow: 0 0 0 3px rgba(255,255,255,0.2) !important;
}
.theme-swatch.active::after {
content: '✓';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.85rem;
font-weight: 800;
}
@media (max-width: 768px) {
.theme-swatch {
width: 42px;
height: 42px;
}
}
/* ═══════════════════════════════════════════════════════════
─── PULL TO REFRESH INDICATOR ──────────────────────────────
═══════════════════════════════════════════════════════════ */
#ptr-indicator {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 16px;
opacity: 0;
transform: translateY(-20px);
transition: transform 0.2s ease, opacity 0.2s ease;
color: rgba(200,205,220,0.6);
font-size: 0.82rem;
font-weight: 600;
pointer-events: none;
}
#ptr-indicator svg {
transition: transform 0.1s ease;
}
#ptr-indicator.ready {
color: #a78bfa;
}
#ptr-indicator.ready svg {
stroke: #a78bfa;
}
.ptr-spin {
animation: spin 0.8s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ═══════════════════════════════════════════════════════════
─── CARD QUICK PREVIEW TOOLTIP (Desktop) ──────────────────
═══════════════════════════════════════════════════════════ */
.card-preview-tooltip {
position: fixed;
z-index: 500;
width: 260px;
background: rgba(18,20,32,0.98);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 18px;
padding: 14px 16px;
box-shadow: 0 16px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04) inset;
backdrop-filter: blur(20px);
animation: previewFadeIn 0.15s ease;
pointer-events: none;
}
@keyframes previewFadeIn {
from { opacity: 0; transform: translateX(-6px) scale(0.97); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
.cprev-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.cprev-icon {
font-size: 1.2rem;
flex-shrink: 0;
}
.cprev-title {
font-size: 0.9rem;
font-weight: 700;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cprev-body {
margin-bottom: 8px;
}
.cprev-note {
font-size: 0.78rem;
color: rgba(200,205,220,0.65);
line-height: 1.55;
margin: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
.cprev-url {
font-size: 0.72rem;
color: #60a5fa;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cprev-meta {
font-size: 0.78rem;
color: rgba(200,205,220,0.65);
margin: 0;
}
.cprev-sub-item {
display: flex;
justify-content: space-between;
font-size: 0.78rem;
color: rgba(200,205,220,0.7);
padding: 3px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cprev-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 8px;
}
.cprev-tag {
font-size: 0.68rem;
font-weight: 600;
color: #a78bfa;
background: rgba(139,92,246,0.12);
padding: 3px 8px;
border-radius: 7px;
border: 1px solid rgba(139,92,246,0.2);
}
.cprev-hint {
font-size: 0.68rem;
color: rgba(200,205,220,0.3);
text-align: center;
padding-top: 8px;
border-top: 1px solid rgba(255,255,255,0.04);
margin-top: 4px;
}
/* ═══════════════════════════════════════════════════════════
─── CARD NEW HIGHLIGHT ─────────────────────────────────────
═══════════════════════════════════════════════════════════ */
@keyframes cardNewPulse {
0% { box-shadow: 0 0 0 0 rgba(139,92,246,0.5); }
50% { box-shadow: 0 0 0 8px rgba(139,92,246,0); }
100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
}
.card-new-highlight {
animation: cardNewPulse 1.2s ease !important;
}
/* ═══════════════════════════════════════════════════════════
─── SIDEBAR STATS IMPROVEMENTS ─────────────────────────────
═══════════════════════════════════════════════════════════ */
.sidebar-stats {
padding: 8px 12px;
}
.sidebar-stat-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 10px;
border-radius: 10px;
font-size: 0.78rem;
font-weight: 600;
color: rgba(200,205,220,0.6);
transition: background 0.15s;
}
.sidebar-stat-item:hover {
background: rgba(255,255,255,0.04);
color: rgba(200,205,220,0.9);
}
.sidebar-stat-item .stat-count {
font-weight: 700;
color: rgba(200,205,220,0.85);
font-family: var(--font-mono);
font-size: 0.82rem;
}
.sidebar-stat-item.danger .stat-count {
color: #f87171;
}
.sidebar-stat-item.success .stat-count {
color: #4ade80;
}
/* ═══════════════════════════════════════════════════════════
─── IMPROVED CARD TYPE BADGES ──────────────────────────────
═══════════════════════════════════════════════════════════ */
/* Ensure bento-glow has higher opacity on desktop hover */
@media (min-width: 769px) {
.card:hover .bento-glow-bg {
opacity: 0.14 !important;
transition: opacity 0.3s ease;
}
}
/* ═══════════════════════════════════════════════════════════
─── BETTER TAGS BAR ────────────────────────────────────────
═══════════════════════════════════════════════════════════ */
.tag-chip {
transition: all 0.18s !important;
}
.tag-chip:hover {
background: rgba(139,92,246,0.18) !important;
border-color: rgba(139,92,246,0.35) !important;
color: #c4b5fd !important;
transform: translateY(-1px) !important;
}
/* ═══════════════════════════════════════════════════════════
─── FILTER HIGHLIGHT ON MOBILE ─────────────────────────────
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Pill for section label */
#header-section-label {
background: rgba(139,92,246,0.12);
border: 1px solid rgba(139,92,246,0.2);
border-radius: 10px;
padding: 4px 12px;
font-size: 0.9rem !important;
}
}
/* ═══════════════════════════════════════════════════════════
─── ACTIVITY FEED ──────────────────────────────────────────
═══════════════════════════════════════════════════════════ */
.activity-feed-modal {
position: fixed;
inset: 0;
z-index: 180;
display: flex;
align-items: flex-end;
justify-content: center;
}
.activity-feed-modal.hidden { display: none !important; }
.act-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(4px);
}
.act-sheet {
position: relative;
z-index: 1;
width: min(100%, 460px);
max-height: 80dvh;
background: linear-gradient(180deg, rgba(18,20,32,0.99) 0%, rgba(10,11,18,0.99) 100%);
border-radius: 28px 28px 0 0;
border: 1px solid rgba(255,255,255,0.07);
border-bottom: none;
display: flex;
flex-direction: column;
animation: mobileSlideUp 0.3s cubic-bezier(0.16,1,0.3,1);
overflow: hidden;
}
.act-handle {
width: 36px;
height: 4px;
background: rgba(255,255,255,0.12);
border-radius: 99px;
margin: 12px auto 0;
flex-shrink: 0;
}
.act-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px 12px;
border-bottom: 1px solid rgba(255,255,255,0.06);
flex-shrink: 0;
}
.act-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 1rem;
font-weight: 800;
color: var(--text);
letter-spacing: -0.02em;
}
.act-close {
width: 30px;
height: 30px;
border-radius: 9px;
border: none;
background: rgba(255,255,255,0.06);
color: rgba(200,205,220,0.6);
cursor: pointer;
font-size: 0.8rem;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
.act-close:hover { background: rgba(255,255,255,0.1); }
.act-body {
flex: 1;
overflow-y: auto;
padding: 12px 20px 24px;
-webkit-overflow-scrolling: touch;
}
.act-empty {
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 20px;
text-align: center;
}
.act-group {
margin-bottom: 16px;
}
.act-day-label {
font-size: 0.72rem;
font-weight: 700;
color: rgba(200,205,220,0.4);
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 6px 0;
margin-bottom: 6px;
}
.act-entry {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.act-entry:last-child { border-bottom: none; }
.act-dot {
width: 34px;
height: 34px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-weight: 800;
flex-shrink: 0;
background: color-mix(in srgb, var(--act-c, var(--accent)) 13%, transparent);
color: var(--act-c, var(--accent));
}
.act-content {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
font-size: 0.85rem;
color: rgba(200,205,220,0.8);
overflow: hidden;
}
.act-card-icon {
font-size: 1rem;
flex-shrink: 0;
}
.act-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.act-text b {
color: var(--text);
font-weight: 700;
margin-left: 2px;
}
.act-time {
font-size: 0.72rem;
color: rgba(200,205,220,0.35);
font-family: var(--font-mono);
flex-shrink: 0;
}
@media (max-width: 768px) {
.act-sheet {
max-height: 88dvh;
padding-bottom: max(env(safe-area-inset-bottom,0px), 0px);
}
}
/* ═══════════════════════════════════════════════════════════
─── GOALS TRACKER ──────────────────────────────────────────
═══════════════════════════════════════════════════════════ */
.goals-modal {
position: fixed;
inset: 0;
z-index: 190;
display: flex;
align-items: flex-end;
justify-content: center;
}
.goals-modal.hidden { display: none !important; }
@media (max-width: 768px) {
#stats-modal.modal-overlay,
#calendar-modal.modal-overlay,
.pomodoro-modal,
.activity-feed-modal,
.goals-modal {
z-index: 260 !important;
}
}
.goals-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(4px);
}
.goals-sheet {
position: relative;
z-index: 1;
width: min(100%, 460px);
max-height: 85dvh;
background: linear-gradient(180deg, rgba(18,20,32,0.99) 0%, rgba(10,11,18,0.99) 100%);
border-radius: 28px 28px 0 0;
border: 1px solid rgba(255,255,255,0.07);
border-bottom: none;
display: flex;
flex-direction: column;
animation: mobileSlideUp 0.3s cubic-bezier(0.16,1,0.3,1);
overflow: hidden;
padding-bottom: max(env(safe-area-inset-bottom,0px), 0px);
}
.goals-handle {
width: 36px;
height: 4px;
background: rgba(255,255,255,0.12);
border-radius: 99px;
margin: 12px auto 0;
flex-shrink: 0;
}
.goals-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px 12px;
border-bottom: 1px solid rgba(255,255,255,0.06);
flex-shrink: 0;
}
.goals-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 1rem;
font-weight: 800;
color: var(--text);
}
.goals-close {
width: 30px;
height: 30px;
border-radius: 9px;
border: none;
background: rgba(255,255,255,0.06);
color: rgba(200,205,220,0.6);
cursor: pointer;
font-size: 0.8rem;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
.goals-close:hover { background: rgba(255,255,255,0.1); }
.goals-body {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
-webkit-overflow-scrolling: touch;
}
.goals-empty {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 20px;
text-align: center;
}
.goals-progress-wrap {
margin-bottom: 16px;
background: rgba(255,255,255,0.03);
border-radius: 16px;
padding: 14px 16px;
border: 1px solid rgba(255,255,255,0.05);
}
.goals-progress-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.goals-progress-label {
font-size: 0.78rem;
font-weight: 600;
color: rgba(200,205,220,0.6);
}
.goals-progress-pct {
font-size: 1.1rem;
font-weight: 800;
color: #a78bfa;
font-family: var(--font-mono);
}
.goals-progress-track {
height: 6px;
background: rgba(255,255,255,0.07);
border-radius: 99px;
overflow: hidden;
margin-bottom: 8px;
}
.goals-progress-fill {
height: 100%;
background: linear-gradient(90deg, #7c3aed, #a78bfa);
border-radius: 99px;
transition: width 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.goals-progress-sub {
font-size: 0.74rem;
color: rgba(200,205,220,0.45);
text-align: center;
}
.goals-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.goal-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(255,255,255,0.03);
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.05);
transition: all 0.2s;
}
.goal-item.done {
opacity: 0.55;
background: rgba(34,197,94,0.04);
border-color: rgba(34,197,94,0.1);
}
.goal-check {
width: 26px;
height: 26px;
border-radius: 8px;
border: 2px solid rgba(255,255,255,0.15);
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #4ade80;
flex-shrink: 0;
transition: all 0.2s;
}
.goal-item.done .goal-check {
background: rgba(34,197,94,0.15);
border-color: rgba(34,197,94,0.3);
}
.goal-text {
flex: 1;
font-size: 0.88rem;
font-weight: 600;
color: var(--text);
transition: all 0.2s;
}
.goal-item.done .goal-text {
text-decoration: line-through;
color: rgba(200,205,220,0.5);
}
.goal-delete {
width: 26px;
height: 26px;
border-radius: 7px;
border: none;
background: transparent;
color: rgba(200,205,220,0.25);
cursor: pointer;
font-size: 0.78rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
flex-shrink: 0;
}
.goal-delete:hover {
background: rgba(239,68,68,0.12);
color: #f87171;
}
.goals-add-wrap {
display: flex;
gap: 10px;
padding: 12px 20px 16px;
border-top: 1px solid rgba(255,255,255,0.06);
flex-shrink: 0;
}
.goals-input {
flex: 1;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 12px 16px;
color: var(--text);
font-size: 0.9rem;
font-family: var(--font-ar);
outline: none;
transition: border-color 0.15s;
}
.goals-input:focus {
border-color: rgba(139,92,246,0.4);
background: rgba(255,255,255,0.07);
}
.goals-add-btn {
width: 46px;
height: 46px;
border-radius: 14px;
border: none;
background: rgba(139,92,246,0.2);
color: #a78bfa;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
flex-shrink: 0;
}
.goals-add-btn:hover {
background: rgba(139,92,246,0.3);
transform: scale(1.05);
}
@media (max-width: 768px) {
.sidebar.mobile-open {
z-index: 320 !important;
isolation: isolate;
}
.sidebar.mobile-open .sidebar-bottom,
.sidebar.mobile-open .sidebar-bottom-group,
.sidebar.mobile-open .sidebar-icon-btn,
.sidebar.mobile-open .sidebar-nav-btn {
position: relative;
z-index: 1;
pointer-events: auto !important;
}
.sidebar.mobile-open ~ .mobile-bottom-nav,
body.mobile-sidebar-open .mobile-bottom-nav {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(24px) !important;
}
}
/* ─── BOTTOM NAV: 6 items now ───────────────────────────────── */
@media (max-width: 768px) {
.mobile-bottom-nav {
grid-template-columns: 1fr 1fr 1fr 60px 1fr 1fr !important;
}
}
/* ═══════════════════════════════════════════════════════════
─── SPEED DIAL (Mobile FAB) ───────────────────────────────
═══════════════════════════════════════════════════════════ */
.speed-dial-overlay {
position: fixed;
inset: 0;
z-index: 59;
pointer-events: none;
}
.speed-dial-overlay:not(.hidden) {
pointer-events: all;
}
.speed-dial-overlay.hidden { display: none !important; }
.speed-dial-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.35);
backdrop-filter: blur(2px);
}
.speed-dial-actions {
position: absolute;
bottom: calc(74px + max(env(safe-area-inset-bottom,0px), 0px) + 80px);
left: 14px;
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.speed-dial-item {
display: flex;
align-items: center;
gap: 12px;
animation: sdItemIn 0.2s cubic-bezier(0.34,1.56,0.64,1) both;
cursor: pointer;
}
.speed-dial-item:nth-child(1) { animation-delay: 0.05s; }
.speed-dial-item:nth-child(2) { animation-delay: 0.08s; }
.speed-dial-item:nth-child(3) { animation-delay: 0.11s; }
.speed-dial-item:nth-child(4) { animation-delay: 0.14s; }
@keyframes sdItemIn {
from { opacity: 0; transform: translateY(12px) scale(0.9); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.sd-label {
background: rgba(10,11,18,0.92);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
padding: 6px 14px;
font-size: 0.82rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.sd-btn {
width: 50px;
height: 50px;
border-radius: 16px;
border: none;
font-size: 1.3rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0,0,0,0.4);
transition: transform 0.15s;
flex-shrink: 0;
}
.sd-btn:active { transform: scale(0.9); }
.sd-goals { background: linear-gradient(135deg, #7c3aed, #8b5cf6); color: white; }
.sd-pomo { background: linear-gradient(135deg, #dc2626, #ef4444); color: white; }
.sd-add { background: linear-gradient(135deg, #059669, #10b981); color: white; font-size: 1.4rem; font-weight: 800; }
.sd-activity { background: linear-gradient(135deg, #0369a1, #3b82f6); color: white; }
/* ═══════════════════════════════════════════════════
FOCUS / ZEN MODE
═══════════════════════════════════════════════════ */
body.focus-mode .sidebar,
body.focus-mode #mobile-sidebar-overlay {
display: none !important;
}
body.focus-mode .dash-header {
padding: 6px 20px !important;
height: 44px !important;
min-height: 44px !important;
}
body.focus-mode .dash-header .dash-header-right > *:not(.dash-logo):not(.mobile-menu-btn) {
display: none !important;
}
body.focus-mode .dash-header .dash-header-left > *:not(#focus-mode-btn) {
display: none !important;
}
body.focus-mode .dash-body {
margin-right: 0 !important;
padding-right: 0 !important;
}
body.focus-mode .main-content {
padding-top: 4px !important;
}
/* Focus mode subtle indicator */
body.focus-mode::after {
content: 'فوكس';
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(139, 92, 246, 0.25);
border: 1px solid rgba(139, 92, 246, 0.4);
color: #a78bfa;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
padding: 4px 12px;
border-radius: 20px;
pointer-events: none;
z-index: 9999;
animation: focusBadgeIn 0.3s ease;
}
@keyframes focusBadgeIn {
from { opacity: 0; transform: translateX(-50%) translateY(8px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
#focus-mode-btn.active {
color: #a78bfa;
background: rgba(139, 92, 246, 0.15);
border-color: rgba(139, 92, 246, 0.3);
}
/* ═══════════════════════════════════════════════════
AMOLED DARK THEME
═══════════════════════════════════════════════════ */
body.amoled-mode {
--bg: #000000;
--surface: #080808;
--surface2: #101010;
--border: rgba(255,255,255,0.06);
}
body.amoled-mode .card {
background: #0c0c0c !important;
border-color: rgba(255,255,255,0.07) !important;
}
body.amoled-mode .sidebar {
background: #060606 !important;
border-color: rgba(255,255,255,0.05) !important;
}
body.amoled-mode .dash-header {
background: rgba(0,0,0,0.95) !important;
border-color: rgba(255,255,255,0.06) !important;
}
body.amoled-mode .modal-box {
background: #0a0a0a !important;
}
/* ═══════════════════════════════════════════════════
CALENDAR MODAL
═══════════════════════════════════════════════════ */
.calendar-modal-box {
width: calc(100vw - 24px);
max-width: 620px;
box-sizing: border-box;
}
.calendar-modal-header {
display: grid;
grid-template-columns: 132px minmax(0, 1fr) 132px;
align-items: center;
column-gap: 18px;
min-height: 72px;
padding-bottom: 12px;
}
.cal-header-side {
display: flex;
align-items: center;
gap: 10px;
justify-self: start;
}
.cal-header-spacer {
width: 132px;
height: 1px;
justify-self: end;
}
.cal-month-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
min-width: 0;
width: 100%;
justify-self: center;
flex-wrap: nowrap;
direction: ltr;
}
.cal-nav-btn {
width: 44px;
height: 44px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.11);
background: rgba(255,255,255,0.045);
color: var(--text);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.cal-nav-btn:hover {
background: rgba(89, 216, 255, 0.10);
border-color: rgba(89, 216, 255, 0.28);
transform: translateY(-1px);
}
.cal-today-btn {
min-height: 44px;
padding: 0 18px;
border-radius: 14px;
border: 1px solid rgba(89, 216, 255, 0.26);
background: rgba(89, 216, 255, 0.10);
color: var(--text);
font-family: var(--font-ar);
font-size: 0.98rem;
font-weight: 700;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.cal-today-btn:hover {
background: rgba(89, 216, 255, 0.16);
border-color: rgba(89, 216, 255, 0.38);
transform: translateY(-1px);
}
.calendar-modal-header .modal-title {
margin: 0;
font-size: 1.15rem;
font-weight: 800;
white-space: nowrap;
min-width: 0;
flex: 0 1 auto;
direction: rtl;
}
.calendar-modal-header .close-btn {
min-width: 44px;
min-height: 44px;
}
@media (max-width: 640px) {
.calendar-modal-header {
grid-template-columns: 1fr;
row-gap: 14px;
min-height: auto;
padding-bottom: 12px;
}
.cal-month-nav {
order: 1;
}
.cal-header-spacer {
display: none;
}
.cal-header-side {
order: 2;
justify-self: start;
}
}
.cal-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
padding: 12px 16px 4px;
gap: 2px;
}
.cal-weekday {
text-align: center;
font-size: 0.72rem;
font-weight: 700;
color: var(--muted);
letter-spacing: 0.05em;
padding: 4px 0;
}
.cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 3px;
padding: 4px 16px 12px;
}
.cal-cell {
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 10px;
cursor: pointer;
position: relative;
transition: background 0.15s, transform 0.1s;
background: transparent;
gap: 2px;
}
.cal-cell:hover { background: rgba(255,255,255,0.07); }
.cal-cell:active { transform: scale(0.9); }
.cal-cell-empty { pointer-events: none; }
.cal-day-num {
font-size: 0.85rem;
font-weight: 600;
color: var(--text);
line-height: 1;
}
.cal-today {
background: rgba(139, 92, 246, 0.18) !important;
box-shadow: 0 0 0 1.5px rgba(139, 92, 246, 0.5);
}
.cal-today .cal-day-num {
color: #a78bfa;
font-weight: 800;
}
.cal-selected {
background: rgba(139, 92, 246, 0.3) !important;
box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.7);
}
.cal-selected .cal-day-num { color: #c4b5fd; font-weight: 800; }
.cal-dots {
display: flex;
gap: 2px;
align-items: center;
justify-content: center;
}
.cal-dot {
width: 4px; height: 4px;
border-radius: 50%;
flex-shrink: 0;
background: var(--cal-dot-c, var(--muted));
}
.cal-day-detail {
border-top: 1px solid rgba(255,255,255,0.07);
padding: 14px 16px;
max-height: 220px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px;
}
.cal-detail-header {
font-size: 0.78rem;
font-weight: 700;
color: var(--muted);
letter-spacing: 0.05em;
margin-bottom: 4px;
}
.cal-detail-empty {
font-size: 0.82rem;
color: var(--muted);
text-align: center;
padding: 16px 0;
}
.cal-detail-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: rgba(255,255,255,0.04);
border-radius: 10px;
border-inline-start: 3px solid var(--cal-item-color, #6366f1);
animation: calItemIn 0.2s ease;
}
@keyframes calItemIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.cal-detail-item { animation: none; }
}
.cal-detail-icon { font-size: 1.1rem; flex-shrink: 0; }
.cal-detail-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-detail-title { font-size: 0.85rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-detail-sub { font-size: 0.73rem; color: var(--muted); }
@media (max-width: 600px) {
.cal-day-num { font-size: 0.78rem; }
.cal-cell { border-radius: 8px; }
.calendar-modal-box { max-height: 90vh; overflow-y: auto; }
}
/* ═══════════════════════════════════════════════════
SMART BAR (unified: stats + events in one row)
═══════════════════════════════════════════════════ */
.smart-bar-wrap {
margin-bottom: 6px;
}
.smart-bar {
display: flex;
align-items: center;
gap: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease, margin 0.3s ease;
max-height: 80px;
}
.smart-bar.collapsed {
max-height: 0;
opacity: 0;
pointer-events: none;
margin: 0;
}
/* Left: stat chips (goals + productivity) */
.sb-stats {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.sb-stat {
display: flex;
align-items: center;
gap: 7px;
padding: 7px 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
cursor: pointer;
transition: background 0.15s, transform 0.1s;
white-space: nowrap;
}
.sb-stat:hover { background: rgba(255,255,255,0.07); transform: translateY(-1px); }
.sb-stat:active { transform: scale(0.96); }
.sb-stat-icon { font-size: 1.05rem; line-height: 1; }
.sb-stat-body { display: flex; flex-direction: column; gap: 1px; }
.sb-stat-val {
font-size: 1rem;
font-weight: 800;
color: var(--text);
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.sb-stat-total { font-size: 0.68em; color: var(--muted); font-weight: 500; }
.sb-stat-label { font-size: 0.68rem; color: var(--muted); font-weight: 600; }
.sb-goal-bar {
width: 44px; height: 3px;
background: rgba(255,255,255,0.1);
border-radius: 2px;
overflow: hidden;
margin-top: 3px;
}
.sb-goal-fill {
height: 100%;
background: linear-gradient(90deg, #7c3aed, #a78bfa);
border-radius: 2px;
transition: width 0.5s ease;
}
/* Divider between stats and events */
.sb-divider {
width: 1px; height: 28px;
background: rgba(255,255,255,0.1);
margin: 0 8px;
flex-shrink: 0;
}
/* Right: scrollable event pills */
.sb-events {
display: flex;
align-items: center;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
flex: 1;
min-width: 0;
}
.sb-events::-webkit-scrollbar { display: none; }
/* Collapse toggle */
.smart-bar-toggle {
display: block;
margin: 2px auto 8px;
width: 44px;
height: 16px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
transition: background 0.15s;
}
.smart-bar-toggle:hover { background: rgba(255,255,255,0.1); }
.smart-bar-toggle svg { transition: transform 0.3s ease; }
@media (max-width: 600px) {
.sb-stat { padding: 6px 10px; }
.sb-stat-val { font-size: 0.9rem; }
.sb-stat-icon { font-size: 0.95rem; }
.smart-bar { max-height: 120px; flex-wrap: nowrap; }
}
/* ═══════════════════════════════════════════════════
UPCOMING EVENTS RIBBON
═══════════════════════════════════════════════════ */
.events-ribbon {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
overflow: hidden;
}
.events-ribbon-label {
font-size: 0.72rem;
font-weight: 800;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.07em;
white-space: nowrap;
flex-shrink: 0;
}
.events-ribbon-scroll {
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 2px;
}
.events-ribbon-scroll::-webkit-scrollbar { display: none; }
.event-pill {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 20px;
white-space: nowrap;
cursor: default;
flex-shrink: 0;
border: 1px solid transparent;
transition: transform 0.15s;
animation: pillIn 0.3s ease both;
}
.event-pill:hover { transform: translateY(-2px); }
@keyframes pillIn {
from { opacity: 0; transform: scale(0.85) translateY(4px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.event-pill-icon { font-size: 0.9rem; }
.event-pill-title { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.event-pill-badge {
font-size: 0.68rem;
font-weight: 800;
padding: 1px 6px;
border-radius: 8px;
letter-spacing: 0.02em;
}
/* Color variants */
.ev-overdue {
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.25);
}
.ev-overdue .event-pill-badge { background: rgba(239,68,68,0.2); color: #f87171; }
.ev-today {
background: rgba(245, 158, 11, 0.12);
border-color: rgba(245, 158, 11, 0.3);
}
.ev-today .event-pill-badge { background: rgba(245,158,11,0.2); color: #fbbf24; }
.ev-tomorrow {
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.25);
}
.ev-tomorrow .event-pill-badge { background: rgba(59,130,246,0.2); color: #60a5fa; }
.ev-soon {
background: rgba(99, 102, 241, 0.1);
border-color: rgba(99, 102, 241, 0.25);
}
.ev-soon .event-pill-badge { background: rgba(99,102,241,0.2); color: #818cf8; }
.ev-later {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.08);
}
.ev-later .event-pill-badge { background: rgba(255,255,255,0.08); color: var(--muted); }
.ev-far { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); opacity: 0.75; }
.ev-far .event-pill-badge { background: rgba(255,255,255,0.06); color: var(--muted); }
@media (max-width: 600px) {
.events-ribbon-label { display: none; }
.event-pill { padding: 5px 10px; }
.event-pill-title { font-size: 0.75rem; }
}
/* ═══════════════════════════════════════════════════
STATS CANVAS CHART
═══════════════════════════════════════════════════ */
.stat-canvas-wrap {
width: 100%;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
padding: 12px 10px 6px;
margin-bottom: 4px;
}
.stat-activity-canvas {
width: 100%;
height: 110px;
display: block;
}
/* ═══════════════════════════════════════════════════
EXPORT / IMPORT BUTTONS
═══════════════════════════════════════════════════ */
.settings-export-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
color: var(--text);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, transform 0.1s;
flex: 1;
justify-content: center;
font-family: var(--font-ar);
}
.settings-export-btn:hover {
background: rgba(255,255,255,0.09);
transform: translateY(-1px);
}
.settings-export-btn:active { transform: scale(0.97); }
.settings-import-btn {
background: rgba(139,92,246,0.08);
border-color: rgba(139,92,246,0.2);
color: #a78bfa;
}
.settings-import-btn:hover {
background: rgba(139,92,246,0.15);
}
/* ═══════════════════════════════════════════════════
CONTENT HEADER — unified bar above cards grid
═══════════════════════════════════════════════════ */
.content-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 4px 0 12px;
min-height: 38px;
direction: rtl;
}
/* Left side: stats + sep + controls */
.ch-left {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
min-width: 0;
direction: rtl;
}
.ch-controls {
display: flex;
align-items: center;
gap: 6px;
margin-inline-start: auto;
flex-shrink: 0;
}
/* ── Stat chips row ── */
.ch-stats-row {
display: flex;
align-items: center;
gap: 4px;
}
.ch-stat {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px 4px 8px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.1);
background: rgba(255,255,255,0.04);
font-size: 0.72rem;
cursor: default;
transition: border-color 0.2s, background 0.2s;
white-space: nowrap;
}
.ch-stat svg { opacity: 0.55; flex-shrink: 0; }
.ch-stat-val {
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 700;
color: var(--text);
line-height: 1;
}
.ch-stat-lbl {
font-size: 0.68rem;
color: var(--muted);
font-weight: 500;
}
/* zero state — dim everything */
.ch-stat.cs-zero {
opacity: 0.45;
}
/* pinned — purple */
.ch-stat.cs-accent {
border-color: rgba(139,92,246,0.3);
background: rgba(139,92,246,0.07);
}
.ch-stat.cs-accent .ch-stat-val { color: #c4b5fd; }
.ch-stat.cs-accent svg { opacity: 0.8; }
/* due today — red */
.ch-stat.cs-danger {
border-color: rgba(239,68,68,0.35);
background: rgba(239,68,68,0.07);
}
.ch-stat.cs-danger .ch-stat-val { color: #f87171; }
.ch-stat.cs-danger svg { opacity: 0.8; }
/* upcoming — blue */
.ch-stat.cs-info {
border-color: rgba(59,130,246,0.3);
background: rgba(59,130,246,0.07);
}
.ch-stat.cs-info .ch-stat-val { color: #93c5fd; }
.ch-stat.cs-info svg { opacity: 0.8; }
/* legacy count span — kept for compat, now hidden */
.ch-count { display: none; }
.ch-sep {
width: 1px;
height: 14px;
background: rgba(255,255,255,0.12);
flex-shrink: 0;
}
.ch-sort {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
color: var(--text);
font-size: 0.75rem;
font-family: var(--font-ar);
padding: 4px 8px;
cursor: pointer;
outline: none;
transition: background 0.15s, border-color 0.15s;
-webkit-appearance: none;
appearance: none;
}
.ch-sort:hover,
.ch-sort:focus {
background: rgba(255,255,255,0.09);
border-color: rgba(255,255,255,0.2);
}
.ch-sort option {
background: #1a1a2e;
color: var(--text);
}
.ch-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
color: var(--muted);
font-size: 0.74rem;
font-family: var(--font-ar);
font-weight: 600;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
white-space: nowrap;
}
.ch-btn:hover {
background: rgba(255,255,255,0.1);
color: var(--text);
border-color: rgba(255,255,255,0.2);
}
.ch-btn:active { transform: scale(0.95); }
.ch-btn.active {
background: rgba(139,92,246,0.18);
border-color: rgba(139,92,246,0.4);
color: #c4b5fd;
}
/* Right side: event pills — scrollable */
.ch-right {
display: flex;
align-items: center;
gap: 6px;
overflow-x: auto;
flex: 0 1 auto;
max-width: 48%;
min-width: 0;
scrollbar-width: none;
-ms-overflow-style: none;
justify-content: flex-end;
direction: rtl;
}
.ch-right::-webkit-scrollbar { display: none; }
/* ── Mobile: content-header 2-row layout ── */
@media (max-width: 768px) {
.content-header {
flex-direction: column;
align-items: stretch;
gap: 5px;
padding: 4px 0 8px;
}
/* Outer ch-left: column layout = chips on top, controls below */
.ch-left {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 5px;
width: 100%;
flex: unset;
}
/* Row 1: stat chips — horizontal scroll */
.ch-stats-row {
display: flex;
flex-direction: row;
gap: 5px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
width: 100%;
padding-bottom: 1px;
}
.ch-stats-row::-webkit-scrollbar { display: none; }
.ch-stat {
flex-shrink: 0;
padding: 5px 10px;
font-size: 0.72rem;
}
.ch-stat-lbl { display: inline; }
/* Row 2: controls — sort compact, right-aligned in RTL */
.ch-controls {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
width: 100%;
margin-right: 0;
justify-content: flex-start; /* RTL: flex-start = right side */
}
.ch-sep { display: none; }
.ch-sort {
flex: unset;
width: auto;
font-size: 0.75rem;
padding: 5px 10px;
}
.ch-btn { font-size: 0.75rem; padding: 5px 10px; flex-shrink: 0; }
/* Hide event pills on mobile */
.ch-right { display: none; }
/* Tags bar — horizontal scroll, no wrap */
.type-filters-bar {
overflow-x: auto;
scrollbar-width: none;
padding: 0 0 8px;
gap: 6px;
}
.type-filters-bar::-webkit-scrollbar { display: none; }
.type-filter-chip {
padding: 7px 12px;
min-height: 36px;
font-size: 0.76rem;
}
.type-filter-count { min-width: 20px; font-size: 0.66rem; }
.tags-bar {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
padding: 0 0 6px;
gap: 5px;
}
.tags-bar::-webkit-scrollbar { display: none; }
.tags-bar-label { display: none; }
/* Phantom card — smaller on mobile */
.card-phantom {
min-height: 72px !important;
height: 72px !important;
}
.phantom-inner { gap: 5px; }
.phantom-inner svg { width: 18px; height: 18px; }
.phantom-inner span { font-size: 0.72rem; }
}
/* ═══════════════════════════════════════════════════
CARD TYPE REDESIGNS — GROUP D (contact/code/document/linkgroup)
═══════════════════════════════════════════════════ */
/* ── CONTACT CARD ── */
.contact-card-body {
display: flex;
flex-direction: column;
gap: 8px;
direction: rtl;
}
.contact-avatar-row {
display: flex;
align-items: center;
gap: 10px;
}
.contact-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 700;
color: #fff;
flex-shrink: 0;
letter-spacing: 0;
position: relative;
overflow: hidden;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
transition: transform .2s cubic-bezier(.2,.8,.25,1);
}
.contact-avatar-gradient {
background: var(--ct-avatar-bg, var(--accent));
box-shadow:
0 4px 12px -2px rgba(0,0,0,0.35),
inset 0 0 0 1px rgba(255,255,255,0.12);
}
.contact-avatar-gradient::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.22) 0%, transparent 55%);
pointer-events: none;
border-radius: 50%;
}
.card-container:hover .contact-avatar {
transform: scale(1.06) rotate(-3deg);
}
.contact-name-label {
font-size: 0.82rem;
font-weight: 600;
color: var(--text);
opacity: 0.9;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.contact-info-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.contact-info-row {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.78rem;
color: var(--muted);
direction: rtl;
}
.contact-info-icon {
width: 13px;
height: 13px;
flex-shrink: 0;
color: rgba(var(--c-contact), 0.8);
}
.contact-info-val {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text);
opacity: 0.8;
}
.contact-email-truncate {
max-width: 140px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
.contact-copy-btn {
background: rgba(255,255,255,0.07);
border: 1px solid var(--border2);
color: var(--muted);
border-radius: 4px;
padding: 1px 5px;
font-size: 0.72rem;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s, color 0.15s;
}
.contact-copy-btn:hover {
background: rgba(var(--c-contact), 0.2);
color: rgb(var(--c-contact));
}
.contact-note {
font-size: 0.72rem;
color: var(--muted);
margin-top: 2px;
line-height: 1.4;
}
/* ── CODE CARD ── */
.code-card-body {
position: relative;
direction: ltr;
}
.code-lang-badge {
position: absolute;
top: 0;
left: 0;
background: rgba(var(--c-code), 0.18);
color: rgb(var(--c-code));
border: 1px solid rgba(var(--c-code), 0.3);
font-size: 0.65rem;
font-family: var(--font-mono);
font-weight: 600;
padding: 1px 7px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.6;
z-index: 1;
}
.code-inner-block {
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 8px;
padding: 8px 8px 6px;
margin-top: 22px;
overflow: hidden;
}
.code-line-row {
display: flex;
align-items: flex-start;
gap: 8px;
min-height: 1.4em;
direction: ltr;
}
.code-line-num {
color: rgba(255,255,255,0.2);
font-family: var(--font-mono);
font-size: 0.67rem;
min-width: 14px;
text-align: right;
user-select: none;
padding-top: 1px;
flex-shrink: 0;
}
.code-line-text {
font-family: var(--font-mono);
font-size: 0.71rem;
color: rgba(255,255,255,0.78);
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
line-height: 1.5;
}
.code-more-badge {
font-family: var(--font-mono);
font-size: 0.65rem;
color: rgba(var(--c-code), 0.7);
margin-top: 4px;
padding: 1px 0;
}
/* ── LINKGROUP CARD ── */
.linkgroup-card-body {
display: flex;
flex-direction: column;
gap: 6px;
direction: rtl;
}
.lg-links-grid {
display: flex;
flex-wrap: wrap;
gap: 5px;
direction: rtl;
}
.lg-chip {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(255,255,255,0.05);
border: 1px solid var(--border2);
border-radius: 20px;
padding: 2px 8px 2px 4px;
font-size: 0.72rem;
color: var(--text);
opacity: 0.9;
max-width: 110px;
overflow: hidden;
white-space: nowrap;
}
.lg-chip-icon {
width: 18px;
height: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 700;
color: #fff;
flex-shrink: 0;
background: var(--lg-chip-bg, var(--accent));
}
.lg-chip-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
font-size: 0.71rem;
}
.lg-overflow {
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(var(--c-linkgroup), 0.15);
border: 1px solid rgba(var(--c-linkgroup), 0.3);
color: rgb(var(--c-linkgroup));
border-radius: 20px;
padding: 2px 9px;
font-size: 0.71rem;
font-weight: 600;
}
.lg-count {
font-size: 0.7rem;
color: var(--muted);
padding-right: 2px;
}
/* ── DOCUMENT CARD (redesign classes) ── */
.docs-preview-redesign {
display: flex;
flex-direction: column;
gap: 5px;
direction: rtl;
}
.card-documents-list {
display: flex;
flex-direction: column;
gap: 5px;
max-height: 132px;
overflow-y: auto;
padding-inline-end: 2px;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.card-documents-list::-webkit-scrollbar { width: 6px; }
.card-documents-list::-webkit-scrollbar-track { background: transparent; }
.card-documents-list::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.1);
border-radius: 3px;
}
.doc-summary-row {
margin-bottom: 2px;
}
.doc-summary-next {
font-size: 0.68rem;
color: var(--muted);
background: rgba(255,255,255,0.04);
border-radius: 5px;
padding: 1px 6px;
}
.doc-summary-badge.expired {
background: rgba(239,68,68,0.15);
color: #f87171;
border: 1px solid rgba(239,68,68,0.3);
font-size: 0.68rem;
border-radius: 5px;
padding: 1px 6px;
}
.doc-row-redesign {
display: flex;
align-items: center;
gap: 7px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--border);
border-radius: 8px;
padding: 5px 8px;
direction: rtl;
}
.doc-row-icon {
font-size: 0.95rem;
flex-shrink: 0;
}
.doc-row-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 1px;
overflow: hidden;
}
.doc-row-holder {
font-size: 0.78rem;
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.doc-row-date {
font-size: 0.65rem;
color: var(--muted);
}
.doc-urgency-badge {
font-size: 0.65rem;
font-weight: 700;
padding: 2px 7px;
border-radius: 12px;
flex-shrink: 0;
white-space: nowrap;
}
.doc-urg-expired {
background: rgba(239,68,68,0.18);
color: #f87171;
border: 1px solid rgba(239,68,68,0.35);
}
.doc-urg-soon {
background: rgba(251,146,60,0.18);
color: #fb923c;
border: 1px solid rgba(251,146,60,0.35);
}
.doc-urg-safe {
background: rgba(16,185,129,0.13);
color: #34d399;
border: 1px solid rgba(16,185,129,0.28);
font-weight: 400;
font-size: 0.62rem;
}
/* ═══════════════════════════════════════════════════
CARD TYPE REDESIGNS — GROUP A (status/wifi/server/command)
═══════════════════════════════════════════════════ */
/* ── Status card ───────────────────────────────── */
@keyframes status-pulse {
0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
50% { box-shadow: 0 0 0 5px transparent; opacity: 0.7; }
}
.status-card-body {
display: flex;
flex-direction: column;
gap: 8px;
font-family: var(--font-ar);
}
.status-indicator-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.status-indicator-main {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
min-width: 0;
}
.status-inline-action {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.status-dot-big {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
animation: status-pulse 2s ease-in-out infinite;
}
.status-dot-big.online { background: #22c55e; color: #22c55e; }
.status-dot-big.offline { background: var(--danger); color: var(--danger); }
.status-dot-big.unknown { background: #6b7280; color: #6b7280; animation: none; }
.ping-bars {
display: flex;
align-items: flex-end;
gap: 2px;
height: 13px;
}
.ping-bar {
width: 4px;
border-radius: 1px;
background: rgba(255,255,255,0.15);
transition: background 0.3s;
}
.ping-bar.filled { background: #22c55e; }
.pb-sm { height: 5px; }
.pb-md { height: 8px; }
.pb-lg { height: 11px; }
.pg-bar-full { height: 100%; }
.status-label {
font-size: 0.78rem;
font-weight: 600;
color: var(--text);
}
.status-latency {
font-size: 0.7rem;
font-family: var(--font-mono);
color: rgb(var(--c-status));
background: rgba(20,184,166,0.1);
padding: 1px 5px;
border-radius: 4px;
margin-right: 0;
}
.status-url {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
direction: ltr;
text-align: right;
}
/* ── WiFi card ─────────────────────────────────── */
.wifi-card-body {
display: flex;
flex-direction: column;
gap: 5px;
}
.wifi-signal-icon {
width: 48px;
height: 32px;
margin-bottom: 2px;
}
.wifi-signal-icon svg {
width: 100%;
height: 100%;
}
/* Animated WiFi waves: 3 arcs pulse outward sequentially */
.wifi-signal-icon svg path:nth-of-type(2),
.wifi-signal-icon svg path:nth-of-type(3),
.wifi-signal-icon svg path:nth-of-type(4) {
transform-origin: 24px 30px;
animation: wifiWavePulse 2.2s ease-in-out infinite;
}
.wifi-signal-icon svg path:nth-of-type(2) { animation-delay: 0s; }
.wifi-signal-icon svg path:nth-of-type(3) { animation-delay: 0.35s; }
.wifi-signal-icon svg path:nth-of-type(4) { animation-delay: 0.7s; }
@keyframes wifiWavePulse {
0% { opacity: 0.25; }
40% { opacity: 1; }
70% { opacity: 0.55; }
100% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
.wifi-signal-icon svg path { animation: none !important; opacity: 1 !important; }
}
.wifi-ssid-big {
font-size: 0.95rem;
font-weight: 700;
color: var(--text);
font-family: var(--font-ar);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.wifi-pass-row {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: nowrap;
}
.wifi-pass-row .wifi-password-dots {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--muted);
letter-spacing: 2px;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wifi-note {
font-size: 0.7rem;
color: var(--muted);
font-family: var(--font-ar);
}
/* ── Server card ───────────────────────────────── */
.server-card-body {
display: flex;
flex-direction: column;
gap: 4px;
font-family: var(--font-mono);
}
.server-terminal-header {
display: flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,0.04);
border-radius: 6px 6px 0 0;
padding: 3px 7px;
margin-bottom: 2px;
}
.server-terminal-dots {
display: flex;
gap: 4px;
align-items: center;
}
.server-terminal-dots span {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
opacity: 0.85;
}
.server-terminal-dots span:nth-child(1) { background: #ff5f57; }
.server-terminal-dots span:nth-child(2) { background: #febc2e; }
.server-terminal-dots span:nth-child(3) { background: #28c840; }
.server-terminal-title {
font-size: 0.65rem;
font-family: var(--font-mono);
color: var(--muted);
margin-inline-start: auto;
letter-spacing: 0.05em;
}
.server-host-display {
font-size: 0.9rem;
font-weight: 700;
color: rgb(var(--c-server));
font-family: var(--font-mono);
direction: ltr;
text-align: right;
letter-spacing: -0.01em;
line-height: 1.3;
}
.server-user-display {
font-size: 0.72rem;
color: var(--muted);
font-family: var(--font-mono);
direction: ltr;
text-align: right;
}
/* ── Command card ──────────────────────────────── */
.cmd-block {
display: flex;
align-items: baseline;
gap: 6px;
background: rgba(139,92,246,0.06);
border: 1px solid rgba(139,92,246,0.2);
border-radius: 7px;
padding: 6px 9px;
font-family: var(--font-mono);
direction: ltr;
text-align: left;
overflow: hidden;
}
.cmd-prompt {
color: var(--accent);
font-weight: 700;
font-size: 0.85rem;
flex-shrink: 0;
user-select: none;
}
.cmd-text {
font-size: 0.78rem;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.cmd-linecount {
font-size: 0.65rem;
color: var(--muted);
flex-shrink: 0;
background: rgba(255,255,255,0.06);
padding: 1px 5px;
border-radius: 4px;
}
/* ═══════════════════════════════════════════════════
CARD TYPE REDESIGNS — GROUP C (checklist/routine/expense/subscription)
═══════════════════════════════════════════════════ */
/* ── Checklist ─────────────────────────────────── */
.checklist-card-body {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
width: 100%;
direction: rtl;
}
.checklist-items-col {
flex: 1;
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.checklist-item-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 7px;
font-size: 0.78rem;
color: var(--text);
}
.checklist-item-dot {
flex-shrink: 0;
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.25);
background: transparent;
transition: background 0.2s, border-color 0.2s;
}
.checklist-item-dot.done {
background: #22c55e;
border-color: #22c55e;
}
.checklist-item-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text);
}
.checklist-item-text.done {
text-decoration: line-through;
color: var(--muted);
}
.checklist-ring-col {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.checklist-ring-svg {
display: block;
transform: rotate(-90deg);
}
.checklist-ring-track {
fill: none;
stroke: rgba(255,255,255,0.08);
stroke-width: 4;
}
.checklist-ring-fill {
fill: none;
stroke-width: 4;
stroke-linecap: round;
transition: stroke-dasharray 0.4s ease;
}
.checklist-ring-pct {
position: absolute;
font-size: 0.62rem;
font-weight: 700;
line-height: 1;
pointer-events: none;
color: var(--ring-c, var(--accent));
}
.checklist-ring-col .checklist-ring-fill,
.ring-wrap .checklist-ring-fill { stroke: var(--ring-c, var(--accent)); }
.ring-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.ring-pct-label { position: absolute; font-size: 0.6rem; font-weight: 700; color: var(--ring-c, var(--accent)); }
.mob-quote-body { font-style: italic; border-inline-start: 3px solid var(--accent2); padding-inline-start: 10px; }
.mob-quote-attr { text-align: end; opacity: 0.7; }
/* ── Routine ────────────────────────────────────── */
.routine-card-body {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
direction: rtl;
}
.routine-habits-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 6px;
}
.routine-habit-dot {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid rgba(251,113,133,0.35);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
cursor: pointer;
color: var(--muted);
transition: background 0.18s, border-color 0.18s, color 0.18s;
user-select: none;
}
.routine-habit-dot.done {
background: rgba(251,113,133,0.8);
border-color: rgba(251,113,133,0.9);
color: #fff;
}
.routine-habit-dot.more {
border-style: dashed;
font-size: 0.65rem;
cursor: default;
}
.routine-progress-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
justify-content: flex-end;
}
.routine-streak-badge {
font-size: 0.85rem;
font-weight: 700;
color: #f97316;
letter-spacing: 0.02em;
}
/* Routine heatmap: 14 tiny cells showing recent days */
.routine-heat-row {
display: flex; gap: 2px;
padding: 2px 0;
direction: ltr; /* oldest → newest left to right */
}
.routine-heat-cell {
flex: 1;
height: 12px;
border-radius: 2px;
background: rgba(255,255,255,0.04);
transition: transform .15s, background .15s;
}
.routine-heat-cell:hover { transform: scaleY(1.3); }
.routine-heat-lvl-0 { background: rgba(255,255,255,0.04); }
.routine-heat-lvl-1 { background: rgba(251,113,133,0.25); }
.routine-heat-lvl-2 { background: rgba(251,113,133,0.5); }
.routine-heat-lvl-3 { background: rgba(251,113,133,0.75); }
.routine-heat-lvl-4 {
background: #fb7185;
box-shadow: 0 0 4px rgba(251,113,133,0.45);
}
/* ── Expense ────────────────────────────────────── */
.expense-card-body {
display: flex;
flex-direction: column;
gap: 7px;
width: 100%;
direction: rtl;
}
/* Expense donut chart (category breakdown) */
.expense-donut-row {
display: flex; align-items: center; gap: 10px;
padding: 4px 0;
}
.expense-donut {
flex-shrink: 0;
color: var(--text);
}
.expense-donut-arc {
transition: stroke-dasharray .8s cubic-bezier(.2,.8,.25,1);
animation: expenseDonutDraw .8s cubic-bezier(.2,.8,.25,1);
}
@keyframes expenseDonutDraw {
from { stroke-dasharray: 0 999; }
}
.expense-donut-legend {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 2px;
}
.expense-donut-leg {
display: flex; align-items: center; gap: 6px;
font-size: 0.7rem;
color: var(--muted);
}
.expense-donut-dot {
width: 7px; height: 7px;
border-radius: 50%;
flex-shrink: 0;
background: var(--dot-c, var(--muted));
}
.expense-donut-name {
flex: 1; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
color: var(--text);
font-weight: 500;
}
.expense-donut-pct {
font-weight: 700;
color: var(--muted);
font-size: 0.65rem;
}
.expense-amounts-row {
display: flex;
flex-direction: row;
align-items: baseline;
gap: 5px;
}
.expense-spent-big {
font-size: 1.15rem;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.expense-sep {
font-size: 0.85rem;
color: var(--muted);
}
.expense-budget-big {
font-size: 0.85rem;
font-weight: 600;
color: var(--muted);
}
.expense-currency-badge {
font-size: 0.7rem;
font-weight: 700;
padding: 1px 6px;
border-radius: 5px;
background: rgba(255,255,255,0.07);
color: var(--muted);
margin-right: 2px;
}
.expense-meter {
width: 100%;
height: 7px;
border-radius: 99px;
background: rgba(255,255,255,0.07);
overflow: hidden;
}
.expense-meter-fill {
height: 100%;
border-radius: 99px;
transition: width 0.4s ease, background 0.3s;
}
.expense-meter-fill.green { background: #22c55e; }
.expense-meter-fill.orange { background: #f97316; }
.expense-meter-fill.red { background: var(--danger); }
.expense-warning {
font-size: 0.72rem;
font-weight: 700;
color: var(--danger);
background: rgba(239,68,68,0.1);
border-radius: 6px;
padding: 2px 8px;
display: inline-block;
}
/* ── Subscription total row ─────────────────────── */
.subs-total-row {
font-size: 0.75rem;
font-weight: 700;
color: rgba(52,211,153,0.9);
background: rgba(52,211,153,0.07);
border-radius: 7px;
padding: 4px 10px;
margin-bottom: 4px;
direction: rtl;
text-align: right;
}
/* ═══════════════════════════════════════════════════
CARD TYPE REDESIGNS — GROUP B (reminder/countdown/tracker/counter)
═══════════════════════════════════════════════════ */
/* ── REMINDER ── */
.reminder-card-body {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 4px;
position: relative;
overflow: hidden;
}
.reminder-card-body {
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
min-height: 0;
padding-top: 2px;
}
/* Big countdown hero block — dominant visual element */
.reminder-countdown {
display: flex;
align-items: baseline;
justify-content: center;
gap: 8px;
padding: 14px 10px 10px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.06);
font-family: var(--font-ar);
line-height: 1;
margin-bottom: 2px;
position: relative;
overflow: hidden;
}
.reminder-countdown::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center top, var(--rc-glow, rgba(139,92,246,0.15)) 0%, transparent 65%);
opacity: 0.8;
pointer-events: none;
}
.reminder-countdown .rc-big {
font-size: 2.2rem;
font-weight: 800;
font-family: var(--font-mono, 'IBM Plex Mono', monospace);
letter-spacing: -0.02em;
color: var(--rc-color, #fff);
text-shadow: 0 2px 12px var(--rc-glow, rgba(139,92,246,0.35));
position: relative;
z-index: 1;
}
.reminder-countdown .rc-lbl {
font-size: 0.72rem;
color: rgba(255,255,255,0.7);
font-weight: 600;
position: relative;
z-index: 1;
}
.reminder-countdown.rc-overdue {
--rc-color: #fca5a5;
--rc-glow: rgba(239,68,68,0.3);
background: linear-gradient(135deg, rgba(239,68,68,0.1), rgba(239,68,68,0.02));
border-color: rgba(239,68,68,0.2);
animation: rcPulseOverdue 2s ease-in-out infinite;
}
.reminder-countdown.rc-today {
--rc-color: #fde68a;
--rc-glow: rgba(245,158,11,0.28);
background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(245,158,11,0.02));
border-color: rgba(245,158,11,0.2);
}
.reminder-countdown.rc-soon {
--rc-color: #c4b5fd;
--rc-glow: rgba(139,92,246,0.25);
background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(139,92,246,0.02));
border-color: rgba(139,92,246,0.2);
}
.reminder-countdown.rc-far {
--rc-color: #86efac;
--rc-glow: rgba(34,197,94,0.22);
background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(34,197,94,0.02));
border-color: rgba(34,197,94,0.18);
}
.reminder-countdown.rc-done {
--rc-color: #86efac;
--rc-glow: rgba(34,197,94,0.3);
background: linear-gradient(135deg, rgba(34,197,94,0.14), rgba(34,197,94,0.04));
border-color: rgba(34,197,94,0.3);
}
.reminder-countdown.rc-done .rc-big {
font-size: 1.8rem;
font-family: var(--font-ar);
}
@keyframes rcPulseOverdue {
0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.35); }
50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
@media (prefers-reduced-motion: reduce) {
.reminder-countdown.rc-overdue { animation: none; }
}
.reminder-strip {
height: 5px;
border-radius: 3px;
width: 100%;
margin-bottom: 2px;
background: rgba(255,255,255,0.08);
overflow: hidden;
position: relative;
}
.reminder-strip-fill {
height: 100%;
width: 0;
border-radius: inherit;
transition: width 0.5s ease, background 0.3s;
background: var(--rem-color, rgba(255,255,255,0.35));
box-shadow: 0 0 8px color-mix(in srgb, var(--rem-color, transparent) 47%, transparent);
}
.reminder-strip.rs-overdue .reminder-strip-fill { background: var(--rem-color, var(--danger)); }
.reminder-strip.rs-soon .reminder-strip-fill { background: var(--rem-color, rgb(var(--c-reminder))); }
.reminder-strip.rs-done .reminder-strip-fill { background: #22c55e; box-shadow: none; }
.reminder-strip.rs-normal .reminder-strip-fill { background: var(--rem-color, rgba(255,255,255,0.35)); }
.reminder-date-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
color: rgba(255,255,255,0.82);
direction: rtl;
padding: 6px 10px;
background: rgba(255,255,255,0.03);
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.05);
}
.reminder-date-row svg {
opacity: 0.7;
flex-shrink: 0;
color: var(--accent2, #a78bfa);
}
.reminder-date-row .rdr-date {
font-family: var(--font-mono, monospace);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.reminder-badges-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
.reminder-done-overlay {
font-size: 0.72rem;
color: #22c55e;
font-weight: 600;
letter-spacing: 0.03em;
}
/* ── COUNTDOWN ── */
.countdown-card-body {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 4px 0;
}
.countdown-ring {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
}
.countdown-ring-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.countdown-ring-track {
fill: none;
stroke: rgba(255,255,255,0.08);
stroke-width: 4;
}
.countdown-ring-fill {
fill: none;
stroke: rgb(var(--c-countdown));
stroke-width: 4;
stroke-linecap: round;
transition: stroke-dashoffset 0.6s ease;
}
.countdown-remaining-big {
position: relative;
z-index: 1;
font-size: 0.78rem;
font-weight: 700;
color: var(--text);
text-align: center;
line-height: 1.2;
max-width: 60px;
word-break: break-all;
}
.countdown-target-date {
font-size: 0.68rem;
color: var(--muted);
text-align: center;
}
.countdown-expired-big {
font-size: 2rem;
line-height: 1;
}
/* ── TRACKER ── */
.tracker-card-body {
display: flex;
flex-direction: column;
gap: 6px;
align-items: center;
padding: 2px 0;
}
.tracker-main-row {
display: flex;
align-items: baseline;
gap: 5px;
justify-content: center;
}
.tracker-num-huge {
font-size: 2.2rem;
font-weight: 800;
color: rgb(var(--c-tracker));
line-height: 1;
letter-spacing: -0.02em;
}
.tracker-unit-small {
font-size: 0.8rem;
color: var(--muted);
font-weight: 500;
}
.tracker-note-text {
font-size: 0.7rem;
color: var(--muted);
text-align: center;
}
.tracker-btn-row {
display: flex;
gap: 14px;
align-items: center;
justify-content: center;
margin-top: 4px;
}
.tracker-btn-circle {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid rgba(var(--c-tracker), 0.5);
background: rgba(var(--c-tracker), 0.1);
color: rgb(var(--c-tracker));
font-size: 1.3rem;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, transform 0.1s;
line-height: 1;
}
.tracker-btn-circle:active {
transform: scale(0.9);
background: rgba(var(--c-tracker), 0.25);
}
/* Sparkline inside tracker card body */
.tracker-spark {
display: flex; align-items: center; gap: 6px;
justify-content: center;
margin: 2px 0;
}
.spark-svg {
display: block;
filter: drop-shadow(0 1px 3px rgba(6,182,212,0.25));
}
.tracker-spark-trend {
font-size: 0.7rem;
font-weight: 700;
padding: 1px 6px;
border-radius: 6px;
line-height: 1.2;
}
.tracker-trend-up {
color: #22c55e;
background: rgba(34,197,94,0.12);
}
.tracker-trend-down {
color: var(--danger);
background: rgba(239,68,68,0.12);
}
.tracker-trend-flat {
color: #06b6d4;
background: rgba(6,182,212,0.1);
}
.spark-empty {
background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.06), rgba(255,255,255,0.03));
border-radius: 4px;
width: var(--spark-w, 100%);
height: var(--spark-h, 40px);
}
/* ── COUNTER ── */
.counter-card-body {
display: flex;
flex-direction: column;
align-items: center;
padding: 2px 0;
}
.counter-tap-area {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(var(--c-counter), 0.08);
border: 2px solid rgba(var(--c-counter), 0.25);
transition: background 0.15s, transform 0.1s;
user-select: none;
-webkit-user-select: none;
}
.counter-tap-area:active {
transform: scale(0.93);
background: rgba(var(--c-counter), 0.2);
}
.counter-tap-area .countdown-ring-svg {
position: absolute;
inset: -6px;
width: calc(100% + 12px);
height: calc(100% + 12px);
}
.counter-tap-area .countdown-ring-fill {
stroke: rgb(var(--c-counter));
}
.counter-big-num {
font-size: 1.9rem;
font-weight: 800;
color: rgb(var(--c-counter));
line-height: 1;
position: relative;
z-index: 1;
font-variant-numeric: tabular-nums;
transition: color .2s;
}
.counter-big-num.counter-bump {
animation: counterBump .4s cubic-bezier(.25,1.5,.5,1);
}
@keyframes counterBump {
0% { transform: scale(1); }
40% { transform: scale(1.22); color: #fde68a; }
100% { transform: scale(1); }
}
.counter-max-frac {
font-size: 0.65rem;
color: var(--muted);
position: relative;
z-index: 1;
margin-top: 1px;
}
/* ═══════════════════════════════════════════════════
CARD TYPE REDESIGNS — GROUP E (note/page/quicktext/markdown/fields)
═══════════════════════════════════════════════════ */
/* ── NOTE CARD ── */
.note-card-body {
display: flex;
flex-direction: column;
gap: 3px;
}
.note-line {
font-size: 0.8rem;
color: var(--text);
opacity: 0.85;
line-height: 1.55;
white-space: pre-wrap;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.note-more-lines {
font-size: 0.7rem;
color: var(--muted);
margin-top: 2px;
}
.note-wordcount-badge {
display: inline-block;
margin-top: 6px;
font-size: 0.68rem;
font-family: var(--font-mono);
color: var(--muted);
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 6px;
padding: 2px 7px;
}
/* ── PAGE CARD ── */
.page-card-body {
display: flex;
align-items: center;
gap: 12px;
padding: 4px 0;
}
.page-folder-svg {
width: 32px;
height: 32px;
color: rgba(var(--card-color, 209,97,255), 0.7);
flex-shrink: 0;
}
.page-info-col {
display: flex;
flex-direction: column;
gap: 3px;
}
.page-name-display {
font-family: var(--font-mono);
font-size: 0.82rem;
font-weight: 700;
color: var(--text);
letter-spacing: 0.3px;
}
.page-card-count {
font-size: 0.69rem;
color: var(--muted);
}
/* ── QUICKTEXT CARD ── */
.quicktext-card-body {
display: flex;
flex-direction: column;
gap: 6px;
}
.qt-preview {
font-size: 0.78rem;
color: var(--text);
opacity: 0.8;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
border-inline-start: 2px solid rgba(var(--card-color, 236,72,153), 0.5);
padding-inline-start: 8px;
}
.qt-meta-row {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
.qt-badge {
font-size: 0.68rem;
font-family: var(--font-mono);
padding: 2px 7px;
border-radius: 6px;
background: rgba(var(--card-color, 236,72,153), 0.1);
border: 1px solid rgba(var(--card-color, 236,72,153), 0.2);
color: rgb(var(--card-color, 236,72,153));
}
.qt-badge-muted {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.08);
color: var(--muted);
}
.qt-copy-btn {
font-size: 0.72rem;
}
/* ── MARKDOWN CARD ── */
.markdown-card-body {
display: flex;
flex-direction: column;
gap: 4px;
}
.md-type-badge {
display: inline-block;
font-size: 0.6rem;
font-family: var(--font-mono);
font-weight: 700;
letter-spacing: 1px;
padding: 1px 6px;
border-radius: 4px;
background: rgba(168,85,247,0.15);
border: 1px solid rgba(168,85,247,0.3);
color: #c084fc;
align-self: flex-start;
margin-bottom: 2px;
}
.md-title-line {
font-size: 0.85rem;
font-weight: 700;
color: var(--text);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.md-preview-line {
font-size: 0.74rem;
color: var(--muted);
line-height: 1.4;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.md-line-count {
font-size: 0.65rem;
font-family: var(--font-mono);
color: var(--muted);
margin-top: 2px;
}
/* ── FIELDS CARD ── */
.fields-card-body {
display: flex;
flex-direction: column;
gap: 5px;
flex: 1 1 auto;
min-height: 0;
max-height: 132px;
overflow-y: auto;
padding-inline-end: 2px;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.fields-card-body::-webkit-scrollbar { width: 6px; }
.fields-card-body::-webkit-scrollbar-track { background: transparent; }
.fields-card-body::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.1);
border-radius: 3px;
}
.fields-empty {
font-size: 0.78rem;
color: var(--muted);
}
.field-row-redesign {
display: flex;
align-items: center;
gap: 8px;
min-height: 34px;
padding: 6px 8px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.055);
border-radius: 9px;
min-width: 0;
}
.field-label-redesign {
font-size: 0.68rem;
color: var(--muted);
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
min-width: 60px;
}
.field-value-redesign {
font-size: 0.74rem;
color: var(--text);
font-family: var(--font-mono);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.field-copy-btn-redesign {
background: rgba(255,255,255,0.045);
border: 1px solid rgba(255,255,255,0.06);
color: var(--muted);
cursor: pointer;
font-size: 0.72rem;
padding: 3px 6px;
border-radius: 7px;
opacity: 1;
transition: background 0.15s, color 0.15s, border-color 0.15s;
flex-shrink: 0;
}
.field-copy-btn-redesign:hover {
background: rgba(96,211,255,0.12);
border-color: rgba(96,211,255,0.28);
color: #7dd3fc;
}
.field-more-row {
font-size: 0.68rem;
color: var(--muted);
text-align: center;
padding-top: 4px;
}
/* ─── FLAT CARD LOOK — remove glow/effects ───────────────── */
.dash-grid .card::before,
#page-grid .card::before {
display: none !important;
background: none !important;
opacity: 0 !important;
}
.dash-grid .bento-glow-bg,
#page-grid .bento-glow-bg {
display: none !important;
opacity: 0 !important;
}
.dash-grid .card,
#page-grid .card {
box-shadow: 0 10px 24px rgba(0,0,0,0.22) !important;
}
.dash-grid .card:hover,
#page-grid .card:hover,
.dash-grid .card:active,
#page-grid .card:active {
transform: none !important;
box-shadow: 0 10px 24px rgba(0,0,0,0.22) !important;
border-color: rgba(118, 149, 188, 0.11) !important;
}
@media (min-width: 769px) {
.dash-grid .card,
#page-grid .card {
overflow: hidden !important;
}
.dash-grid .card-body,
#page-grid .card-body,
.dash-grid .card-meta,
#page-grid .card-meta {
overflow: hidden !important;
clip-path: none !important;
}
.dash-grid .card[data-type="checklist"] .checklist-card-body,
#page-grid .card[data-type="checklist"] .checklist-card-body {
overflow: hidden !important;
}
}
/* ═══════════════════════════════════════════════════
SIDEBAR NAV EDITOR (Settings)
═══════════════════════════════════════════════════ */
.settings-hint {
font-size: 0.75rem;
color: var(--muted);
margin: -6px 0 12px;
line-height: 1.5;
opacity: 0.8;
}
.sidebar-editor-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 12px;
}
.sn-item {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
padding: 10px 12px;
transition: border-color 0.2s;
}
.sn-item:hover { border-color: rgba(255,255,255,0.12); }
.sn-item-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.sn-item-icon {
opacity: 0.45;
flex-shrink: 0;
display: flex;
align-items: center;
}
.sn-label-input {
flex: 1;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 7px;
color: var(--text);
font-family: var(--font-ar);
font-size: 0.85rem;
font-weight: 600;
padding: 5px 9px;
outline: none;
transition: border-color 0.15s, background 0.15s;
direction: rtl;
}
.sn-label-input:focus {
border-color: var(--accent2);
background: rgba(255,255,255,0.08);
}
.sn-delete-btn {
background: none;
border: none;
color: rgba(239,68,68,0.5);
cursor: pointer;
padding: 4px;
border-radius: 6px;
display: flex;
align-items: center;
transition: color 0.15s, background 0.15s;
flex-shrink: 0;
}
.sn-delete-btn:hover {
color: var(--danger);
background: rgba(239,68,68,0.1);
}
/* Sidebar item icon picker button (custom items) */
.sn-icon-btn {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
color: var(--text);
cursor: pointer;
padding: 4px 6px;
font-size: 1rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-width: 30px;
min-height: 30px;
transition: background 0.15s, border-color 0.15s;
}
.sn-icon-btn:hover {
background: rgba(139,92,246,0.15);
border-color: rgba(139,92,246,0.4);
}
.sn-icon-btn svg { opacity: 0.55; }
.sn-emoji-icon { font-size: 1.05rem; line-height: 1; }
/* Card type chips grid */
.sn-types-grid {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.sn-type-chip {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 99px;
color: rgba(255,255,255,0.35);
font-size: 0.7rem;
font-family: var(--font-ar);
padding: 3px 9px;
cursor: pointer;
transition: all 0.15s;
-webkit-tap-highlight-color: transparent;
}
.sn-type-chip:hover {
border-color: var(--accent2);
color: var(--accent2);
background: rgba(139,92,246,0.08);
}
.sn-type-chip.assigned {
background: rgba(139,92,246,0.15);
border-color: var(--accent2);
color: var(--accent2);
font-weight: 700;
}
.sn-type-chip.assigned:hover {
background: rgba(239,68,68,0.1);
border-color: rgba(239,68,68,0.4);
color: #f87171;
}
/* Orphan = type not in ANY category. Red highlight so user notices. */
.sn-type-chip.orphan {
background: rgba(239, 68, 68, 0.10);
border-color: rgba(239, 68, 68, 0.45);
color: #fca5a5;
animation: sn-orphan-pulse 2.4s ease-in-out infinite;
}
.sn-type-chip.orphan:hover {
background: rgba(239, 68, 68, 0.22);
border-color: rgba(239, 68, 68, 0.7);
color: #fff;
}
.sn-type-chip.orphan.assigned {
/* Should never happen logically (if assigned to current item, typeMap covers it),
but if it does, prefer assigned look */
background: rgba(139, 92, 246, 0.15);
border-color: var(--accent2);
color: var(--accent2);
animation: none;
}
@keyframes sn-orphan-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
50% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }
}
@media (prefers-reduced-motion: reduce) {
.sn-type-chip.orphan { animation: none; }
}
/* Banner alerting the user about orphan types */
.sn-orphan-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
margin-bottom: 14px;
background: linear-gradient(135deg, rgba(239, 68, 68, 0.10), rgba(239, 68, 68, 0.04));
border: 1px solid rgba(239, 68, 68, 0.32);
border-radius: 12px;
font-family: var(--font-ar);
font-size: 0.86rem;
color: rgba(252, 165, 165, 0.92);
}
.sn-orphan-banner .sn-orphan-icon { font-size: 1.05rem; }
.sn-orphan-banner strong {
color: #fca5a5;
font-weight: 800;
font-family: var(--font-mono, monospace);
margin: 0 2px;
}
/* Action buttons row */
.sidebar-editor-actions {
display: flex;
gap: 8px;
margin-bottom: 20px;
}
.sn-add-btn, .sn-reset-btn {
display: flex;
align-items: center;
gap: 5px;
padding: 7px 14px;
border-radius: 8px;
font-family: var(--font-ar);
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
border: 1px solid;
transition: all 0.15s;
}
.sn-add-btn {
background: rgba(139,92,246,0.1);
border-color: rgba(139,92,246,0.3);
color: var(--accent2);
}
.sn-add-btn:hover {
background: rgba(139,92,246,0.2);
border-color: var(--accent2);
}
.sn-reset-btn {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.1);
color: var(--muted);
}
.sn-reset-btn:hover {
background: rgba(255,255,255,0.08);
color: var(--text);
}
/* ═══════════════════════════════════════════════════════════════
✈️ TRAVEL PAGE — standalone trip planner
═══════════════════════════════════════════════════════════════ */
/* Backdrop overlay */
/* ═══════════════════════════════════════════════════════════
TRAVEL PAGE — Full-page redesign (hero + list)
═══════════════════════════════════════════════════════════ */
.travel-page {
position: fixed; inset: 0; z-index: 95;
background: var(--bg, #0e0c15);
display: flex; flex-direction: column;
direction: rtl;
animation: slideIn 0.32s cubic-bezier(0.16,1,0.3,1) both;
}
.travel-page.hidden { display: none !important; }
.tp-shell { display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; }
/* ── Header ── */
.tp-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 24px;
border-bottom: 1px solid rgba(255,255,255,0.07);
flex-shrink: 0; gap: 12px;
}
.tp-header-right { display: flex; align-items: center; gap: 10px; }
.tp-header-icon { font-size: 1.3rem; }
.tp-header-title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--text); }
.tp-header-left { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.tp-new-btn {
display: inline-flex; align-items: center; gap: 6px;
background: var(--accent2, #8b5cf6); color: #fff;
border: none; border-radius: 9px; padding: 8px 14px;
font-family: var(--font-ar); font-size: 0.84rem; font-weight: 700;
cursor: pointer; transition: filter .15s, transform .15s;
}
.tp-new-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.tp-back-btn {
display: flex; align-items: center; gap: 5px;
background: transparent; border: 1px solid rgba(255,255,255,0.09);
color: var(--muted); font-family: var(--font-ar); font-size: 0.82rem;
cursor: pointer; padding: 6px 12px; border-radius: 8px; transition: all .15s;
}
.tp-back-btn:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.tp-back-btn svg { transform: scaleX(-1); }
/* ── Scrollable body ── */
.tp-body { flex: 1; overflow-y: auto; }
.tp-body::-webkit-scrollbar { width: 5px; }
.tp-body::-webkit-scrollbar-track { background: transparent; }
.tp-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
/* ── Hero — next upcoming/ongoing trip ── */
.tp-hero {
position: relative; width: 100%;
height: clamp(200px, 32vh, 320px);
background: linear-gradient(135deg, #1a1030, #2a1850);
background-size: cover; background-position: center;
flex-shrink: 0; overflow: hidden;
}
.tp-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.72) 100%);
display: flex; flex-direction: column; justify-content: flex-end;
padding: 24px 28px; gap: 6px;
}
.tp-hero-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.tp-hero-countdown {
font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.75);
background: rgba(255,255,255,0.12); border-radius: 999px;
padding: 3px 10px; backdrop-filter: blur(4px);
}
.tp-hero-title {
margin: 0; font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 800; color: #fff; line-height: 1.1;
text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.tp-hero-dest { color: rgba(255,255,255,0.75); font-size: 0.9rem; }
.tp-hero-dates { color: rgba(255,255,255,0.6); font-size: 0.82rem; }
.tp-hero-btn {
margin-top: 10px; align-self: flex-start;
background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
color: #fff; font-family: var(--font-ar); font-size: 0.84rem; font-weight: 600;
padding: 8px 16px; border-radius: 10px; cursor: pointer;
backdrop-filter: blur(6px); transition: background .15s;
}
.tp-hero-btn:hover { background: rgba(255,255,255,0.25); }
/* ─── Grand stats summary (top of travel page) ─────────────── */
.tp-grand-stats {
padding: 22px 24px 6px;
}
.tp-grand-greeting {
margin-bottom: 16px;
opacity: 0; transform: translateY(8px);
animation: tpFadeUp .55s cubic-bezier(.2,.8,.25,1) forwards;
}
.tp-grand-greeting-hi {
font-size: 1.5rem; font-weight: 800;
background: linear-gradient(135deg, #fff 0%, #a78bfa 50%, #38bdf8 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.02em;
margin: 0 0 4px;
}
.tp-grand-greeting-sub {
font-size: 0.88rem; color: var(--muted);
font-weight: 500;
}
.tp-grand-stats-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.tp-grand-stat {
position: relative;
padding: 18px 16px 16px;
border-radius: 18px;
background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid rgba(255,255,255,0.06);
overflow: hidden;
opacity: 0; transform: translateY(14px) scale(.96);
animation: tpStatIn .6s cubic-bezier(.2,.8,.25,1) forwards;
transition: transform .2s, border-color .2s, box-shadow .2s;
}
.tp-grand-stat:hover {
transform: translateY(-3px);
border-color: rgba(255,255,255,0.12);
box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}
.tp-grand-stat::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 100% 0%, var(--glow) 0%, transparent 60%);
opacity: 0.18;
pointer-events: none;
}
.tp-grand-stat-km { --glow: #38bdf8; animation-delay: 0ms; }
.tp-grand-stat-countries { --glow: #a78bfa; animation-delay: 80ms; }
.tp-grand-stat-hotels { --glow: #f59e0b; animation-delay: 160ms; }
.tp-grand-stat-trips { --glow: #2dd4bf; animation-delay: 240ms; }
.tp-grand-stat-ico {
font-size: 1.4rem; margin-bottom: 8px;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.tp-grand-stat-val {
font-size: 1.85rem; font-weight: 800;
color: var(--text); line-height: 1; margin-bottom: 4px;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.tp-grand-stat-lbl {
font-size: 0.78rem; color: var(--muted); font-weight: 600;
margin-bottom: 4px;
}
.tp-grand-stat-sub {
font-size: 0.7rem; color: rgba(255,255,255,0.4); font-weight: 500;
}
@keyframes tpFadeUp {
to { opacity: 1; transform: translateY(0); }
}
@keyframes tpStatIn {
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ─── Upcoming trips section ──────────────────────────────── */
.tp-upcoming-section {
padding: 22px 24px 10px;
}
.tp-sect-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
flex-wrap: wrap; gap: 10px;
}
.tp-sect-title {
display: flex; align-items: center; gap: 8px;
font-size: 1rem; font-weight: 700; color: var(--text);
}
.tp-sect-icon { font-size: 1.15rem; }
.tp-sect-count {
background: rgba(139,92,246,0.15);
color: #c4b5fd;
padding: 2px 9px;
border-radius: 999px;
font-size: 0.72rem; font-weight: 700;
}
.tp-sect-action {
background: linear-gradient(135deg, #8b5cf6, #6366f1);
color: white; border: none;
padding: 7px 14px; border-radius: 10px;
font-family: var(--font-ar); font-size: 0.8rem; font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 14px -4px rgba(139,92,246,0.5);
transition: transform .15s, box-shadow .15s;
}
.tp-sect-action:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px -4px rgba(139,92,246,0.7);
}
.tp-upcoming-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
.tp-up-card {
position: relative;
aspect-ratio: 16 / 10;
min-height: 200px;
border-radius: 18px;
background-size: cover; background-position: center;
background-color: #1a1025;
overflow: hidden;
cursor: pointer;
opacity: 0; transform: translateY(16px);
animation: tpUpCardIn .55s cubic-bezier(.2,.8,.25,1) forwards;
animation-delay: calc(var(--up-i, 0) * 100ms);
transition: transform .25s;
box-shadow: 0 8px 24px -8px rgba(0,0,0,0.6);
}
.tp-up-card:hover { transform: translateY(-4px) scale(1.02); }
.tp-up-card:hover .tp-up-title { transform: translateY(-2px); }
@keyframes tpUpCardIn {
to { opacity: 1; transform: translateY(0); }
}
.tp-up-overlay {
position: absolute; inset: 0;
background: linear-gradient(0deg,
rgba(10,6,20,0.95) 0%,
rgba(10,6,20,0.75) 30%,
rgba(10,6,20,0.15) 60%,
rgba(10,6,20,0.35) 100%);
}
.tp-up-inner {
position: relative; height: 100%;
display: flex; flex-direction: column; justify-content: space-between;
padding: 16px;
color: white;
}
.tp-up-top {
display: flex; justify-content: space-between; align-items: flex-start;
}
.tp-up-flag {
font-size: 2.2rem; line-height: 1;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.tp-up-countdown {
background: rgba(255,255,255,0.18);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 5px 11px;
border-radius: 999px;
font-size: 0.72rem; font-weight: 700;
color: white;
white-space: nowrap;
}
.tp-up-ongoing .tp-up-countdown {
background: linear-gradient(135deg, #10b981, #059669);
box-shadow: 0 0 14px rgba(16,185,129,0.5);
animation: tpOngoingPulse 2s ease-in-out infinite;
}
@keyframes tpOngoingPulse {
0%,100% { box-shadow: 0 0 14px rgba(16,185,129,0.5); }
50% { box-shadow: 0 0 22px rgba(16,185,129,0.9); }
}
@media (prefers-reduced-motion: reduce) {
.tp-upcoming-card.tp-ongoing { animation: none; }
}
.tp-up-bottom { display: flex; flex-direction: column; gap: 4px; }
.tp-up-title {
font-size: 1.25rem; font-weight: 800;
color: white; margin: 0;
letter-spacing: -0.01em;
line-height: 1.2;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
transition: transform .25s;
}
.tp-up-dest {
font-size: 0.82rem; color: rgba(255,255,255,0.82);
font-weight: 500;
}
.tp-up-meta {
font-size: 0.75rem; color: rgba(255,255,255,0.7);
display: flex; gap: 6px; align-items: center;
margin-top: 4px;
}
.tp-up-dot { opacity: 0.5; }
.tp-up-icons {
display: flex; gap: 10px;
margin-top: 6px;
font-size: 0.78rem; color: rgba(255,255,255,0.85);
font-weight: 600;
}
.tp-upcoming-empty {
padding: 40px 24px;
text-align: center;
border-radius: 18px;
background: linear-gradient(145deg, rgba(139,92,246,0.06) 0%, rgba(139,92,246,0.02) 100%);
border: 1px dashed rgba(139,92,246,0.25);
margin: 22px 24px 0;
}
.tp-upcoming-empty-icon { font-size: 2.4rem; opacity: 0.55; margin-bottom: 10px; }
.tp-upcoming-empty-title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.tp-upcoming-empty-sub { font-size: 0.85rem; color: var(--muted); margin-bottom: 14px; }
.tp-upcoming-empty-btn {
background: linear-gradient(135deg, #8b5cf6, #6366f1);
color: white; border: none;
padding: 9px 20px; border-radius: 11px;
font-family: var(--font-ar); font-size: 0.88rem; font-weight: 700;
cursor: pointer;
box-shadow: 0 6px 18px -4px rgba(139,92,246,0.5);
transition: transform .15s;
}
.tp-upcoming-empty-btn:hover { transform: translateY(-1px); }
/* Mobile: stats strip becomes 2x2 */
@media (max-width: 720px) {
.tp-grand-stats-grid { grid-template-columns: repeat(2, 1fr); }
.tp-grand-stat-val { font-size: 1.55rem; }
.tp-grand-greeting-hi { font-size: 1.25rem; }
.tp-upcoming-grid { grid-template-columns: 1fr; }
.tp-up-card { aspect-ratio: 16 / 9; }
}
/* ─── Per-trip dashboard page (overlay) ─────────────────── */
.trip-dashboard-page {
position: fixed; inset: 0;
background: var(--bg, #07070A);
z-index: 9200;
overflow: hidden;
opacity: 0; transform: translateX(-20px);
transition: opacity .24s ease, transform .3s cubic-bezier(.2,.8,.25,1);
pointer-events: none;
}
.trip-dashboard-page.visible {
opacity: 1; transform: translateX(0);
pointer-events: auto;
}
.trip-dashboard-page.hidden { display: none; }
.tdp-shell {
display: flex; flex-direction: column;
width: 100%; height: 100%;
overflow: hidden;
}
.tdp-header {
flex-shrink: 0;
display: flex; align-items: center; justify-content: space-between;
padding: 14px 22px;
background: linear-gradient(180deg, rgba(14,14,20,0.95), rgba(14,14,20,0.75));
border-bottom: 1px solid rgba(255,255,255,0.06);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
z-index: 10;
}
.tdp-back {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,0.05);
color: var(--text);
border: 1px solid rgba(255,255,255,0.08);
padding: 7px 13px; border-radius: 10px;
font-family: var(--font-ar); font-size: 0.82rem; font-weight: 600;
cursor: pointer; transition: all .13s;
}
.tdp-back:hover { background: rgba(255,255,255,0.1); transform: translateX(-2px); }
.tdp-back svg { transform: scaleX(-1); }
.tdp-header-title {
font-size: 1rem; font-weight: 700; color: var(--text);
flex: 1; text-align: center;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
padding: 0 14px;
}
.tdp-header-actions { display: flex; gap: 6px; }
.tdp-edit, .tdp-export {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(139,92,246,0.12);
color: #c4b5fd;
border: 1px solid rgba(139,92,246,0.2);
padding: 7px 12px; border-radius: 10px;
font-family: var(--font-ar); font-size: 0.8rem; font-weight: 600;
cursor: pointer; transition: all .13s;
}
.tdp-edit:hover, .tdp-export:hover {
background: rgba(139,92,246,0.22);
border-color: rgba(139,92,246,0.35);
}
.tdp-body {
flex: 1; overflow-y: auto; overflow-x: hidden;
padding: 14px 20px 40px;
}
@media (max-width: 720px) {
.tdp-header { padding: 10px 14px; }
.tdp-header-title { display: none; }
.tdp-body { padding: 8px 12px 30px; }
.tdp-edit span, .tdp-back span { display: none; }
.tdp-edit, .tdp-back, .tdp-export { padding: 7px 9px; }
}
/* ── List section ── */
.tp-list-section { padding: 0 0 40px; }
.tp-list-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 24px 0; flex-wrap: wrap; gap: 8px;
}
.tp-list-head-title {
font-size: 0.78rem; font-weight: 700; color: var(--muted);
letter-spacing: 0.06em; text-transform: uppercase;
}
.tp-list-filters { display: flex; gap: 4px; }
.tp-list-filter {
background: none; border: none; color: var(--muted);
font-family: var(--font-ar); font-size: 0.78rem; font-weight: 600;
padding: 5px 11px; border-radius: 999px; cursor: pointer; transition: all .15s;
}
.tp-list-filter:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.tp-list-filter.active {
color: var(--accent2, #8b5cf6);
background: rgba(139,92,246,0.12);
}
.tp-list { display: flex; flex-direction: column; padding: 10px 16px 0; gap: 4px; }
/* ── Trip row ── */
.tp-row {
display: flex; align-items: center; gap: 14px;
padding: 12px 10px; border-radius: 12px;
cursor: pointer; transition: background .13s;
}
.tp-row:hover { background: rgba(255,255,255,0.04); }
.tp-row-thumb {
width: 52px; height: 52px; border-radius: 10px;
background: rgba(139,92,246,0.15);
background-size: cover; background-position: center;
flex-shrink: 0; overflow: hidden;
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem; position: relative;
}
.tp-row-thumb-empty { background: linear-gradient(135deg, #2a1850, #1a0f3a); }
.tp-row-flag {
position: absolute; bottom: 3px; left: 3px;
font-size: 0.8rem; line-height: 1;
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}
.tp-row-info { flex: 1; min-width: 0; }
.tp-row-title {
font-weight: 600; font-size: 0.92rem; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp-row-meta { font-size: 0.75rem; color: var(--muted); margin-top: 3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-row-right { text-align: left; flex-shrink: 0; }
.tp-row-dates { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.tp-row-dur { font-size: 0.7rem; color: var(--muted); opacity: 0.7; margin-top: 2px; }
.tp-row-status {
font-size: 0.68rem; font-weight: 600; white-space: nowrap;
padding: 3px 9px; border-radius: 999px; flex-shrink: 0;
}
.tp-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
.tp-row-btn {
background: transparent; border: none; color: var(--muted);
width: 30px; height: 30px; border-radius: 7px;
font-size: 0.8rem; cursor: pointer; transition: all .13s;
display: flex; align-items: center; justify-content: center;
}
.tp-row-btn:hover { background: rgba(255,255,255,0.07); color: var(--text); }
.tp-row-del:hover { background: rgba(239,68,68,0.12); color: #f87171; }
/* ── Divider between rows ── */
.tp-row + .tp-row { border-top: 1px solid rgba(255,255,255,0.04); }
/* ── Zero / Empty states ── */
.tp-zero-state {
display: flex; flex-direction: column; align-items: center;
padding: 80px 20px; text-align: center; color: var(--muted);
}
.tp-zero-icon { font-size: 3.5rem; opacity: 0.35; margin-bottom: 16px; }
.tp-zero-title { font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.tp-zero-sub { font-size: 0.88rem; max-width: 380px; line-height: 1.6; margin: 0 0 20px; }
.tp-zero-btn {
background: var(--accent2, #8b5cf6); color: #fff; border: none;
padding: 10px 22px; border-radius: 10px;
font-family: var(--font-ar); font-size: 0.9rem; font-weight: 700; cursor: pointer;
}
.tp-zero-btn:hover { filter: brightness(1.1); }
.tp-list-empty {
padding: 30px 10px; text-align: center;
color: var(--muted); font-size: 0.88rem;
}
/* ── Mobile ── */
@media (max-width: 700px) {
.tp-header { padding: 12px 16px; }
.tp-header-title { font-size: 1rem; }
.tp-new-btn { padding: 7px 11px; font-size: 0.78rem; }
.tp-hero { height: clamp(170px, 40vw, 220px); }
.tp-hero-overlay { padding: 16px; }
.tp-hero-title { font-size: 1.3rem; }
.tp-list-head { padding: 14px 16px 0; }
.tp-list { padding: 8px 6px 0; }
.tp-row { gap: 10px; padding: 10px 6px; }
.tp-row-thumb { width: 44px; height: 44px; }
.tp-row-right, .tp-row-status { display: none; } /* hide dates+status on narrow screens */
}
/* ═══════════════════════════════════════════════════════════
TRAVEL DASHBOARD v3 — matches user reference design
Layout: Hero · Stats (4) · Weather + Daily Plan + FlightMap
· Quick Info · Boarding Passes (2-up)
Palette: deep purple bg + teal accents
═══════════════════════════════════════════════════════════ */
.travel-page {
--accent-teal: #2dd4bf;
--accent-teal-glow: rgba(45,212,191,0.45);
--accent-purple: #a78bfa;
--accent-purple-glow: rgba(167,139,250,0.45);
--accent-gold: #f59e0b;
--accent-pink: #f472b6;
--accent-green: #34d399;
--panel-bg: rgba(255,255,255,0.035);
--panel-bd: rgba(255,255,255,0.07);
}
.tp-dashboard {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
padding: 16px 20px 10px;
}
.tp-widget {
position: relative;
background: var(--panel-bg);
border: 1px solid var(--panel-bd);
border-radius: 20px;
overflow: hidden;
opacity: 0;
transform: translateY(14px);
animation: widgetIn 0.55s cubic-bezier(0.16,1,0.3,1) forwards;
}
.tp-widget:nth-child(1) { animation-delay: 0.03s; }
.tp-widget:nth-child(2) { animation-delay: 0.09s; }
.tp-widget:nth-child(3) { animation-delay: 0.15s; }
.tp-widget:nth-child(4) { animation-delay: 0.21s; }
.tp-widget:nth-child(5) { animation-delay: 0.27s; }
.tp-widget:nth-child(6) { animation-delay: 0.33s; }
.tp-widget:nth-child(7) { animation-delay: 0.39s; }
@keyframes widgetIn { to { opacity: 1; transform: translateY(0); } }
.tp-w-title {
font-size: 0.95rem; font-weight: 700; color: var(--text);
margin-bottom: 14px;
display: flex; align-items: center; gap: 8px;
}
.tp-w-title-icon { font-size: 1.05rem; }
@keyframes dashFlow { to { stroke-dashoffset: -30; } }
/* ══════ Hero (span 12) ══════ */
.tp-w-hero {
grid-column: span 12;
min-height: 280px;
background: linear-gradient(135deg, #2a1850, #1a0f3a);
background-size: cover; background-position: center;
padding: 0;
}
.tp-w-hero-overlay {
position: absolute; inset: 0;
background:
linear-gradient(90deg, rgba(12,8,24,0.72) 0%, rgba(12,8,24,0.3) 50%, rgba(12,8,24,0.15) 100%),
linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.6) 100%);
}
.tp-w-hero-content {
position: relative; z-index: 2;
height: 100%;
padding: 28px 32px;
display: flex; justify-content: space-between; align-items: flex-end;
gap: 20px; min-height: 280px;
}
.tp-w-hero-main { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.tp-w-hero-badge {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 6px;
background: rgba(139,92,246,0.25);
border: 1px solid rgba(139,92,246,0.5);
color: #e9d5ff; font-size: 0.78rem; font-weight: 700;
padding: 5px 12px; border-radius: 999px;
backdrop-filter: blur(8px);
margin-bottom: 4px;
}
.tp-w-hero-title {
margin: 0; font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 800; color: #fff; line-height: 1;
letter-spacing: -0.01em;
text-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
.tp-w-hero-route {
display: flex; align-items: center; gap: 10px;
color: #fff; font-size: 1rem; font-weight: 600;
}
.tp-w-hero-flag { font-size: 1.6rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
.tp-w-hero-arrow { color: var(--accent-purple); font-size: 1.1rem; }
.tp-w-hero-meta {
display: inline-flex; align-items: center; gap: 6px;
color: rgba(255,255,255,0.85); font-size: 0.9rem;
font-weight: 500;
}
.tp-w-hero-meta span { opacity: 0.75; }
.tp-w-hero-actions {
display: flex; flex-direction: column; gap: 10px;
align-items: flex-end;
}
.tp-w-hero-btn {
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25);
color: #fff; font-family: var(--font-ar);
font-size: 0.88rem; font-weight: 700;
padding: 10px 18px; border-radius: 12px; cursor: pointer;
backdrop-filter: blur(8px);
display: inline-flex; align-items: center; gap: 8px;
transition: transform .15s, background .15s;
min-width: 150px; justify-content: center;
}
.tp-w-hero-btn:hover { background: rgba(255,255,255,0.2); transform: translateY(-1px); }
.tp-w-hero-btn.primary {
background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
border-color: transparent;
box-shadow: 0 6px 20px rgba(139,92,246,0.45);
}
.tp-w-hero-btn.primary:hover { box-shadow: 0 10px 26px rgba(139,92,246,0.55); }
.tp-w-hero-btn-arrow { font-size: 1.05rem; }
/* ══════ Stats strip (4 pills, span 12) ══════ */
.tp-stats-strip {
grid-column: span 12;
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 14px; padding: 0;
background: transparent; border: 0;
opacity: 1; transform: none; animation: none;
overflow: visible;
}
.tp-stat-pill {
position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 18px 20px;
border-radius: 16px;
background: var(--panel-bg);
border: 1px solid var(--panel-bd);
transition: transform .15s, border-color .15s;
}
.tp-stat-pill:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.15); }
.tp-stat-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tp-stat-big {
font-size: 1.9rem; font-weight: 800; color: var(--text);
line-height: 1.05;
font-family: var(--font-mono, monospace);
letter-spacing: -0.02em;
display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.tp-stat-unit {
font-size: 0.72rem; color: var(--muted); font-weight: 700;
letter-spacing: 0.06em;
}
.tp-stat-label {
font-size: 0.82rem; color: rgba(255,255,255,0.6);
font-weight: 500;
}
.tp-stat-icon {
width: 44px; height: 44px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem; flex-shrink: 0;
}
.tp-stat-teal .tp-stat-icon {
background: rgba(45,212,191,0.14);
box-shadow: 0 0 18px rgba(45,212,191,0.2);
}
.tp-stat-teal .tp-stat-big { color: var(--accent-teal); text-shadow: 0 0 20px rgba(45,212,191,0.35); }
.tp-stat-purple .tp-stat-icon {
background: rgba(167,139,250,0.14);
box-shadow: 0 0 18px rgba(167,139,250,0.2);
}
.tp-stat-purple .tp-stat-big { color: var(--accent-purple); text-shadow: 0 0 20px rgba(167,139,250,0.35); }
/* ══════ Weather (span 3) ══════ */
.tp-w-weather {
grid-column: span 3;
padding: 18px 20px;
min-height: 300px;
}
.tp-wx-mount { display: flex; flex-direction: column; gap: 18px; }
.tp-wx-skeleton { display: flex; flex-direction: column; gap: 10px; }
.tp-wx-sk-big {
height: 72px; border-radius: 12px;
background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 100%);
background-size: 200% 100%; animation: skShimmer 1.6s linear infinite;
}
.tp-wx-sk-line {
height: 50px; border-radius: 10px;
background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 100%);
background-size: 200% 100%; animation: skShimmer 1.6s linear infinite 0.2s;
}
@keyframes skShimmer { to { background-position: -200% 0; } }
.tp-wx-current {
display: flex; align-items: center; gap: 14px;
padding: 8px 0 14px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tp-wx-icon {
font-size: 3.4rem; line-height: 1;
filter: drop-shadow(0 0 14px rgba(45,212,191,0.25));
animation: wxFloat 3.4s ease-in-out infinite;
}
@keyframes wxFloat {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
.tp-wx-icon { animation: none; }
}
.tp-wx-current-info { flex: 1; min-width: 0; }
.tp-wx-temp {
font-size: 3.2rem; font-weight: 800;
color: #fff; line-height: 1;
font-family: var(--font-mono, monospace);
display: inline-flex; align-items: baseline; gap: 2px;
}
.tp-wx-temp-unit {
font-size: 1rem; color: var(--muted); margin-right: 2px;
}
.tp-wx-status {
font-size: 0.82rem; color: rgba(255,255,255,0.7);
margin-top: 4px; font-weight: 500;
}
.tp-wx-days {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
padding-top: 4px;
}
.tp-wx-day {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 10px 6px; border-radius: 10px;
background: rgba(255,255,255,0.03);
transition: background .15s, transform .15s;
}
.tp-wx-day:hover { background: rgba(45,212,191,0.08); transform: translateY(-2px); }
.tp-wx-day-name {
font-size: 0.78rem; color: rgba(255,255,255,0.7); font-weight: 600;
}
.tp-wx-day-icon { font-size: 1.4rem; line-height: 1; }
.tp-wx-day-temps {
font-family: var(--font-mono, monospace); font-size: 0.76rem;
display: flex; gap: 4px;
}
.tp-wx-hi { color: #fff; font-weight: 700; }
.tp-wx-lo { color: var(--muted); }
/* ══════ Daily Plan (span 4) ══════ */
.tp-w-dailyplan {
grid-column: span 4;
padding: 18px 20px;
min-height: 300px;
}
.tp-dp-list {
display: flex; flex-direction: column; gap: 10px;
}
.tp-dp-row {
position: relative;
display: grid;
grid-template-columns: 40px 1fr auto;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(139,92,246,0.1) 0%, rgba(99,102,241,0.04) 100%);
border: 1px solid rgba(139,92,246,0.2);
border-inline-end: 3px solid var(--accent-purple);
transition: transform .15s, background .15s;
overflow: hidden;
}
.tp-dp-row:hover { transform: translateX(-2px); background: rgba(139,92,246,0.14); }
.tp-dp-num {
width: 34px; height: 34px; border-radius: 50%;
background: linear-gradient(135deg, #8b5cf6, #6366f1);
color: #fff; font-weight: 800; font-size: 1rem;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono, monospace);
box-shadow: 0 4px 12px rgba(139,92,246,0.4);
flex-shrink: 0;
}
.tp-dp-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; order: 2; }
.tp-dp-title {
font-size: 0.92rem; font-weight: 700; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
text-align: right;
}
.tp-dp-sub {
font-size: 0.76rem; color: rgba(255,255,255,0.6);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
text-align: right;
}
.tp-dp-tag {
display: inline-flex; align-items: center; gap: 4px;
background: rgba(139,92,246,0.2);
color: #c4b5fd;
font-size: 0.7rem; font-weight: 700;
padding: 4px 10px; border-radius: 999px;
flex-shrink: 0; order: 3;
}
.tp-dp-arrow { opacity: 0.6; }
/* ══════ Flight Map (span 5) ══════ */
.tp-w-flightmap {
grid-column: span 5;
padding: 18px 20px;
min-height: 300px;
background:
radial-gradient(ellipse at 50% 120%, rgba(167,139,250,0.1), transparent 60%),
var(--panel-bg);
}
.tp-fm-head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 10px; margin-bottom: 0;
}
.tp-fm-head-left { flex: 1; min-width: 0; }
.tp-fm-route {
font-family: var(--font-mono, monospace);
font-size: 0.88rem; font-weight: 700;
color: var(--muted); letter-spacing: 0.04em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-top: -8px;
}
.tp-fm-head-right { display: none; }
.tp-map {
width: 100%; height: 230px; display: block;
margin-top: 12px; border-radius: 14px;
background: transparent;
}
.tp-map-bg { fill: transparent; }
.tp-map-dot { fill: rgba(167,139,250,0.28); }
.tp-map-land {
fill: rgba(167,139,250,0.09);
stroke: rgba(167,139,250,0.45);
stroke-width: 0.8;
stroke-linejoin: round;
}
.tp-map-route {
stroke: var(--accent-teal);
stroke-width: 2; fill: none;
stroke-dasharray: none;
filter: drop-shadow(0 0 8px var(--accent-teal-glow));
stroke-linecap: round;
}
.tp-map-pin {
fill: var(--accent-teal);
stroke: #0e0c15; stroke-width: 1.5;
filter: drop-shadow(0 0 10px var(--accent-teal-glow));
}
.tp-map-pin-halo {
fill: rgba(45,212,191,0.4);
animation: pinHaloPulse 2s ease-out infinite;
}
@keyframes pinHaloPulse {
0% { r: 5.5; opacity: 0.7; }
100% { r: 16; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.tp-map-pin-halo { animation: none; opacity: 0; }
}
.tp-map-pin-label {
fill: #e2e8f0; font-size: 10px; font-weight: 800;
font-family: var(--font-mono, monospace);
paint-order: stroke; stroke: rgba(0,0,0,0.85); stroke-width: 3; stroke-linejoin: round;
}
.tp-map-plane { filter: drop-shadow(0 0 8px rgba(255,255,255,0.9)); }
.tp-map-plane text { fill: #fff; }
/* ══════ Quick Info (span 12) ══════ */
.tp-w-quickinfo {
grid-column: span 12;
padding: 18px 20px 22px;
}
.tp-qi-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 12px;
}
.tp-qi-card {
display: grid;
grid-template-columns: 48px 1fr;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.06);
transition: transform .18s, border-color .18s, background .18s;
min-height: 72px;
}
.tp-qi-card:hover {
transform: translateY(-2px);
border-color: rgba(255,255,255,0.14);
background: linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
}
.tp-qi-card .tp-qi-icon {
width: 48px; height: 48px; border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.4rem;
flex-shrink: 0;
}
.tp-qi-card-teal .tp-qi-icon {
background: linear-gradient(135deg, rgba(45,212,191,0.22), rgba(45,212,191,0.08));
box-shadow: inset 0 0 0 1px rgba(45,212,191,0.28), 0 0 18px rgba(45,212,191,0.1);
}
.tp-qi-card-purple .tp-qi-icon {
background: linear-gradient(135deg, rgba(167,139,250,0.25), rgba(139,92,246,0.08));
box-shadow: inset 0 0 0 1px rgba(167,139,250,0.32), 0 0 18px rgba(167,139,250,0.12);
}
.tp-qi-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tp-qi-label {
color: rgba(255,255,255,0.55); font-size: 0.72rem; font-weight: 600;
letter-spacing: 0.02em;
}
.tp-qi-value {
color: var(--text); font-weight: 700; font-size: 0.95rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp-qi-card-teal .tp-qi-value { color: #5eead4; }
.tp-qi-card-purple .tp-qi-value { color: #c4b5fd; }
/* ══════ Boarding Passes (span 12, 2-up grid) ══════ */
.tp-w-passes {
grid-column: span 12;
padding: 18px 20px 22px;
background: transparent;
border: 0;
}
.tp-passes-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
/* Ticket: main body (left) + perforated stub with barcode (right) */
.tp-pass {
position: relative;
display: flex;
flex-direction: row-reverse; /* main on RIGHT visually in RTL, stub on LEFT */
background: linear-gradient(135deg, #ffffff 0%, #f1f3f7 100%);
color: #1a1a1a;
border-radius: 18px;
cursor: pointer;
min-height: 230px;
box-shadow: 0 10px 28px rgba(0,0,0,0.38), 0 2px 6px rgba(139,92,246,0.1);
transition: transform .18s, box-shadow .18s;
overflow: hidden;
isolation: isolate;
}
.tp-pass:hover {
transform: translateY(-3px);
box-shadow: 0 16px 36px rgba(0,0,0,0.45), 0 2px 8px rgba(139,92,246,0.18);
}
.tp-pass-outbound { border-top: 3px solid #10b981; }
.tp-pass-return { border-top: 3px solid #8b5cf6; }
.tp-pass-main {
flex: 1; min-width: 0;
padding: 18px 22px 16px;
display: flex; flex-direction: column; gap: 16px;
}
.tp-pass-header {
display: flex; justify-content: space-between; align-items: center;
gap: 10px;
}
.tp-pass-airline {
display: flex; align-items: center; gap: 10px; min-width: 0;
}
.tp-pass-logo {
width: 42px; height: 30px; object-fit: contain;
background: #fff; border-radius: 6px;
border: 1px solid #e5e7eb;
padding: 2px;
flex-shrink: 0;
}
.tp-pass-airline-name {
font-size: 0.92rem; font-weight: 800; color: #1a1a1a;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp-pass-kind {
display: inline-flex; align-items: center; gap: 4px;
font-size: 0.72rem; font-weight: 800;
padding: 5px 12px; border-radius: 999px;
flex-shrink: 0;
white-space: nowrap;
}
.tp-pass-kind-outbound {
background: rgba(16,185,129,0.14);
color: #059669;
border: 1px solid rgba(16,185,129,0.38);
}
.tp-pass-kind-return {
background: rgba(139,92,246,0.14);
color: #7c3aed;
border: 1px solid rgba(139,92,246,0.4);
}
.tp-pass-route {
display: grid;
grid-template-columns: 1fr 80px 1fr;
align-items: center; gap: 10px;
padding: 8px 0 14px;
border-bottom: 1px dashed #cbd5e1;
}
.tp-pass-point {
display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.tp-pass-point-from { text-align: right; }
.tp-pass-point-to { text-align: left; }
.tp-pass-label {
font-size: 0.68rem; color: #6b7280;
font-weight: 600;
}
.tp-pass-city {
font-size: 1rem; font-weight: 800; color: #1a1a1a;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp-pass-iata {
font-family: var(--font-mono, monospace);
font-size: 1.4rem; font-weight: 900;
color: #4f46e5; letter-spacing: 0.06em;
line-height: 1.1;
}
.tp-pass-arrow {
position: relative;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px;
}
.tp-pass-arrow-line { width: 100%; height: 6px; display: block; }
.tp-pass-plane {
font-size: 1.4rem;
animation: passPlaneBob 3s ease-in-out infinite;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
@keyframes passPlaneBob {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
.tp-pass-plane { animation: none; }
}
.tp-pass-foot {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: auto;
}
.tp-pass-field {
display: flex; flex-direction: column; gap: 3px; min-width: 0;
text-align: right;
}
.tp-pass-field-label {
font-size: 0.66rem; color: #6b7280;
font-weight: 600;
}
.tp-pass-field-value {
font-size: 0.84rem; font-weight: 800; color: #1a1a1a;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp-pass-pnr {
color: #4f46e5; letter-spacing: 0.05em;
font-family: var(--font-mono, monospace);
}
/* Stub (left edge visually): perforated line + vertical barcode */
.tp-pass-stub {
position: relative;
flex: 0 0 72px;
background: #fafbfc;
border-inline-end: 2px dashed #d1d5db; /* perforation line between stub and main (RTL-aware) */
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 14px 6px;
gap: 8px;
}
.tp-pass-stub::before,
.tp-pass-stub::after {
content:''; position: absolute;
width: 18px; height: 18px;
background: var(--bg, #0f0a1f);
border-radius: 50%;
inset-inline-start: -10px; /* on the perforation side (inner edge of stub) */
z-index: 3;
}
.tp-pass-stub::before { top: -9px; }
.tp-pass-stub::after { bottom: -9px; }
.tp-pass-barcode {
width: 30px; height: 100%; max-height: 170px;
display: block;
}
.tp-pass-stub-code {
position: absolute;
bottom: 12px; inset-inline-start: 50%;
transform: translateX(-50%) rotate(-90deg);
transform-origin: center;
font-family: var(--font-mono, monospace);
font-size: 0.66rem; font-weight: 700;
color: #6b7280;
letter-spacing: 0.18em;
white-space: nowrap;
pointer-events: none;
}
/* Empty & inline states */
.tp-w-empty {
padding: 18px 20px;
min-height: 150px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; text-align: center;
}
.tp-w-empty-icon { font-size: 2rem; opacity: 0.45; }
.tp-w-empty-msg { color: var(--muted); font-size: 0.85rem; }
.tp-w-empty-inline {
text-align: center; color: var(--muted); opacity: 0.6;
font-size: 0.82rem; padding: 30px 10px;
}
/* Empty-state spans */
.tp-w-empty.tp-w-flightmap { grid-column: span 5; }
.tp-w-empty.tp-w-weather { grid-column: span 3; }
.tp-w-empty.tp-w-dailyplan { grid-column: span 4; }
/* ══════ Mobile (< 900px) ══════ */
@media (max-width: 900px) {
.tp-dashboard { padding: 12px 12px 6px; gap: 12px; }
.tp-w-hero, .tp-w-weather, .tp-w-dailyplan, .tp-w-flightmap,
.tp-w-quickinfo, .tp-w-passes, .tp-w-empty {
grid-column: span 12 !important;
}
.tp-stats-strip { grid-template-columns: repeat(2, 1fr); }
.tp-w-hero-content { flex-direction: column; align-items: flex-start; padding: 20px; }
.tp-w-hero-actions { flex-direction: row; align-self: stretch; }
.tp-w-hero-btn { flex: 1; }
.tp-w-hero-title { font-size: 2rem; }
.tp-map { height: 220px; }
.tp-qi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tp-qi-card { padding: 10px 12px; min-height: 64px; }
.tp-passes-grid { grid-template-columns: 1fr; }
.tp-pass { min-height: 210px; }
.tp-pass-main { padding: 14px 16px; gap: 12px; }
.tp-pass-stub { flex-basis: 60px; }
.tp-pass-iata { font-size: 1.2rem; }
.tp-pass-city { font-size: 0.9rem; }
.tp-pass-route { grid-template-columns: 1fr 60px 1fr; }
}
/* ══════ Budget section in trip editor ══════ */
.te-section-budget {
margin-top: 16px;
padding: 14px 16px;
background: rgba(245,158,11,0.04);
border: 1px solid rgba(245,158,11,0.15);
border-radius: 12px;
}
.te-section-budget .te-section-head {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin-bottom: 10px;
}
.te-section-title {
font-weight: 700; color: var(--text); font-size: 0.95rem;
display: flex; align-items: center; gap: 6px;
}
.te-section-icon { font-size: 1.05rem; }
.te-section-hint {
font-size: 0.74rem; color: var(--muted); font-weight: 500;
}
.te-budget-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.te-budget-label {
display: flex; flex-direction: column; gap: 5px;
font-size: 0.76rem; color: var(--muted); font-weight: 600;
}
.te-budget-label input {
width: 100%;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 8px;
padding: 8px 10px;
color: var(--text);
font-family: var(--font-mono, monospace);
font-size: 0.9rem;
transition: border-color .15s, background .15s;
}
.te-budget-label input:focus {
outline: none;
border-color: rgba(245,158,11,0.5);
background: rgba(245,158,11,0.06);
}
@media (max-width: 900px) {
.te-budget-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ══════ Booking form IATA row ══════ */
.te-booking-route-row {
display: flex; align-items: center; gap: 10px;
}
.te-iata-input {
flex: 1; min-width: 0;
text-transform: uppercase;
text-align: center;
font-family: var(--font-mono, monospace);
font-size: 1rem; font-weight: 700;
letter-spacing: 0.1em;
}
.te-iata-arrow {
color: var(--muted); font-size: 1.1rem; flex-shrink: 0;
}
/* Flight number + fetch button */
.te-booking-flightnum-row {
display: flex; align-items: stretch; gap: 8px;
}
.te-flightnum-input {
flex: 1; min-width: 0;
text-transform: uppercase;
font-family: var(--font-mono, monospace);
letter-spacing: 0.08em;
}
.te-flight-fetch-btn {
flex-shrink: 0;
width: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(45,212,191,0.12), rgba(45,212,191,0.05));
border: 1px solid rgba(45,212,191,0.35);
border-radius: 9px;
color: #2dd4bf;
font-size: 1rem;
cursor: pointer;
transition: all 0.18s;
}
.te-flight-fetch-btn:hover:not(:disabled) {
background: rgba(45,212,191,0.2);
transform: rotate(90deg);
}
.te-flight-fetch-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Trip card */
.trip-card {
position: relative;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 14px;
padding: 0;
overflow: hidden;
cursor: pointer;
transition: all 0.15s;
display: flex; flex-direction: column;
min-height: 260px;
}
.trip-card:hover {
transform: translateY(-2px);
border-color: rgba(139,92,246,0.4);
background: rgba(139,92,246,0.04);
}
/* Hero image */
.trip-card-hero {
position: relative;
height: 120px;
flex-shrink: 0;
background-color: #1a1525;
overflow: hidden;
}
.trip-card-hero-img {
background-size: cover;
background-position: center;
}
.trip-card-hero-empty {
background: linear-gradient(135deg, #2a2238 0%, #1a1525 55%, #231a33 100%);
}
.trip-card-hero-gradient {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.2) 55%, rgba(20,20,26,0.85) 100%);
pointer-events: none;
}
.trip-card .trip-status-badge {
position: absolute; top: 10px; right: 10px; z-index: 2;
background: rgba(0,0,0,0.45);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
color: #fff;
}
.trip-card .trip-status-upcoming { color: #4ade80; }
.trip-card .trip-status-ongoing { color: #c4b5fd; }
.trip-card .trip-status-past { color: rgba(255,255,255,0.75); }
.trip-card-flag {
position: absolute; top: 10px; left: 12px; z-index: 2;
font-size: 1.55rem;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.trip-card-icon-big {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 2.6rem; opacity: 0.55;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}
/* Body */
.trip-card-body {
padding: 13px 15px 11px;
display: flex; flex-direction: column; gap: 7px;
flex: 1;
}
.trip-card-head {
display: flex; justify-content: space-between; align-items: flex-start;
}
.trip-card-icon { font-size: 1.35rem; }
.trip-status-badge {
font-size: 0.7rem; font-weight: 700;
padding: 3px 8px; border-radius: 99px;
background: rgba(255,255,255,0.05);
}
.trip-status-upcoming { color: #22c55e; background: rgba(34,197,94,0.1); }
.trip-status-ongoing { color: var(--accent2, #8b5cf6); background: rgba(139,92,246,0.13); }
.trip-status-past { color: rgba(255,255,255,0.35); }
.trip-status-draft { color: #f59e0b; background: rgba(245,158,11,0.1); }
.trip-card-title {
margin: 0; font-size: 1rem; font-weight: 700; color: var(--text);
line-height: 1.3;
overflow: hidden; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.trip-card-dest { font-size: 0.82rem; color: var(--muted); }
.trip-card-dates {
display: flex; align-items: center; gap: 6px;
font-size: 0.78rem; color: var(--muted);
font-family: var(--font-mono);
}
.trip-card-arrow { color: var(--accent2); opacity: 0.6; }
.trip-card-dur { color: rgba(255,255,255,0.4); }
.trip-card-hotel {
font-size: 0.8rem; color: rgba(255,255,255,0.7);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trip-card-more {
font-size: 0.7rem; color: var(--muted);
background: rgba(255,255,255,0.08);
padding: 1px 6px; border-radius: 99px;
margin-right: 4px;
}
.trip-card-foot {
margin-top: auto;
display: flex; justify-content: space-between; align-items: center;
padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.05);
font-size: 0.78rem; color: var(--muted);
}
.trip-card-foot span { margin-left: 10px; }
.trip-card-del {
background: none; border: none;
color: rgba(255,255,255,0.25);
cursor: pointer; font-size: 0.85rem;
padding: 4px 8px; border-radius: 6px;
transition: all 0.15s;
}
.trip-card-del:hover { color: var(--danger); background: rgba(239,68,68,0.1); }
.trip-card-export {
background: none; border: none;
color: rgba(255,255,255,0.3);
cursor: pointer; font-size: 0.85rem;
padding: 4px 8px; border-radius: 6px;
transition: all 0.15s;
margin-inline-start: auto;
}
.trip-card-export:hover { color: var(--accent2, #8b5cf6); background: rgba(139,92,246,0.12); }
/* ─── Trip Editor Modal ─── */
.trip-editor {
position: fixed; inset: 0;
z-index: 9495;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
padding: 16px; box-sizing: border-box;
}
.trip-editor.hidden { display: none !important; }
.te-shell {
position: relative;
display: flex; flex-direction: row; direction: rtl;
width: 100%; max-width: 1120px;
height: min(840px, 94dvh);
background: var(--surface);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 32px 80px rgba(0,0,0,0.75);
animation: tpShellIn 0.2s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}
.te-sidebar {
width: 200px; flex-shrink: 0;
display: flex; flex-direction: column;
border-left: 1px solid rgba(255,255,255,0.07);
background: rgba(255,255,255,0.025);
}
.te-sidebar-top {
display: flex; align-items: center; justify-content: flex-start;
padding: 16px 14px 10px; flex-shrink: 0;
}
.te-sidebar-title { margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--text); }
.te-close {
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
color: var(--muted); width: 26px; height: 26px; border-radius: 7px;
display: flex; align-items: center; justify-content: center; cursor: pointer;
transition: all 0.15s;
}
.te-close:hover { background: rgba(255,255,255,0.1); color: var(--text); }
.te-close-window {
position: absolute;
top: 16px;
left: 16px;
z-index: 8;
width: 34px;
height: 34px;
border-radius: 10px;
background: rgba(20,24,34,0.82);
border-color: rgba(255,255,255,0.12);
box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}
.te-tabs {
display: flex; flex-direction: column; gap: 2px;
padding: 4px 10px;
}
.te-tab {
display: flex; align-items: center; gap: 9px;
padding: 9px 11px;
background: none; border: none; border-radius: 9px;
color: var(--muted);
font-family: var(--font-ar); font-size: 0.84rem; font-weight: 600;
cursor: pointer; transition: all 0.12s;
text-align: right; width: 100%;
}
.te-tab svg { opacity: 0.55; flex-shrink: 0; }
.te-tab:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.te-tab.active { background: rgba(139,92,246,0.13); color: var(--accent2, #8b5cf6); }
.te-tab.active svg { opacity: 1; }
.te-sidebar-footer {
margin-top: auto;
padding: 12px 10px 14px;
border-top: 1px solid rgba(255,255,255,0.06);
flex-shrink: 0;
}
.te-export-btn {
display: flex; align-items: center; justify-content: center;
gap: 8px;
width: 100%;
padding: 10px 12px;
background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(139,92,246,0.08));
border: 1px solid rgba(139,92,246,0.3);
color: var(--accent2, #8b5cf6);
border-radius: 9px;
font-family: var(--font-ar);
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
}
.te-export-btn:hover {
background: var(--accent2, #8b5cf6);
color: #fff;
border-color: var(--accent2, #8b5cf6);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(139,92,246,0.35);
}
.te-export-btn svg { flex-shrink: 0; }
.te-content {
flex: 1;
overflow-y: auto;
padding: 24px 26px;
direction: rtl;
min-width: 0;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.te-content::-webkit-scrollbar { width: 5px; }
.te-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 99px; }
.te-pane-title {
margin: 0 0 18px; font-size: 1.1rem; font-weight: 700; color: var(--text);
}
.te-title-count { color: var(--muted); font-size: 0.85rem; font-weight: 500; }
.te-hint {
font-size: 0.78rem; color: var(--muted);
margin: -10px 0 14px; line-height: 1.5;
}
.te-hint-warn { color: #f59e0b; }
.te-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.te-field label { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.te-field input, .te-field select, .te-field textarea {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 9px;
padding: 10px 12px;
color: var(--text);
font-family: var(--font-ar);
font-size: 0.92rem;
outline: none;
transition: border-color 0.15s;
direction: rtl;
}
.te-field input:focus, .te-field select:focus, .te-field textarea:focus {
border-color: var(--accent2, #8b5cf6);
background: rgba(139,92,246,0.04);
}
.te-field input[type="date"] { font-family: var(--font-mono); font-size: 0.88rem; }
.te-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.te-summary {
display: flex; gap: 18px; align-items: center;
padding: 14px 16px; margin: 0 0 16px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
}
.te-summary > div { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.te-summary strong { font-size: 1.3rem; color: var(--text); font-family: var(--font-mono); }
.te-summary span { font-size: 0.72rem; color: var(--muted); }
.te-summary-status { margin-inline-start: auto; font-size: 0.8rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; }
.te-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.te-action-btn {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
color: var(--text);
border-radius: 9px;
padding: 9px 14px;
font-family: var(--font-ar); font-size: 0.82rem; font-weight: 600;
cursor: pointer; transition: all 0.15s;
position: relative;
}
.te-action-btn:hover { background: rgba(255,255,255,0.09); border-color: rgba(139,92,246,0.4); }
.te-action-btn.warn { color: #f59e0b; border-color: rgba(245,158,11,0.25); }
.te-action-btn.warn:hover { background: rgba(245,158,11,0.1); }
.te-upload-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* Days table */
.trip-days-table { display: flex; flex-direction: column; gap: 10px; }
.trip-day-row {
display: grid;
grid-template-columns: 70px 1fr 1fr 2fr 34px;
gap: 8px;
padding: 10px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 10px;
align-items: start;
}
.trip-day-num { display: flex; flex-direction: column; gap: 2px; padding: 8px 2px; }
.trip-day-idx {
display: inline-block; width: 24px; height: 24px; line-height: 24px;
text-align: center; background: rgba(139,92,246,0.15);
color: var(--accent2, #8b5cf6); font-weight: 700; border-radius: 50%;
font-size: 0.78rem; font-family: var(--font-mono);
}
.trip-day-date { font-size: 0.7rem; color: var(--muted); font-family: var(--font-mono); text-align: center; }
.trip-day-input {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 7px;
padding: 8px 10px;
color: var(--text);
font-family: var(--font-ar);
font-size: 0.85rem;
outline: none;
direction: rtl;
transition: border-color 0.15s;
resize: vertical;
}
.trip-day-input:focus { border-color: var(--accent2, #8b5cf6); }
.trip-day-act { min-height: 54px; font-size: 0.82rem; line-height: 1.5; }
.trip-day-del {
background: none; border: none; color: rgba(255,255,255,0.25);
font-size: 0.95rem; cursor: pointer;
padding: 8px; border-radius: 6px; transition: all 0.15s;
align-self: start;
}
.trip-day-del:hover { color: var(--danger); background: rgba(239,68,68,0.08); }
/* Bookings */
.te-booking-add-form {
display: flex; flex-direction: column; gap: 8px;
padding: 14px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
margin-bottom: 16px;
}
.te-booking-add-form input,
.te-booking-add-form select,
.te-select {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 8px; padding: 8px 10px;
color: var(--text); font-family: var(--font-ar); font-size: 0.88rem;
outline: none; direction: rtl;
}
.te-booking-add-form input:focus, .te-select:focus { border-color: var(--accent2, #8b5cf6); }
.te-input-error,
.input-error {
border-color: var(--danger) !important;
box-shadow: 0 0 0 3px rgba(239,68,68,0.18);
animation: teShake 0.35s ease;
}
@keyframes teShake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
.te-booking-add-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.te-upload-status { font-size: 0.78rem; color: var(--muted); min-height: 18px; }
.te-empty-msg { color: var(--muted); font-size: 0.85rem; text-align: center; padding: 20px; }
.te-empty-msg-padded { padding: 10px; }
.te-action-start { align-self: flex-start; }
.input-uppercase { text-transform: uppercase; }
.trip-booking-list { display: flex; flex-direction: column; gap: 8px; }
.trip-booking-item {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
}
.trip-booking-icon { font-size: 1.3rem; }
.trip-booking-body { flex: 1; min-width: 0; }
.trip-booking-title { font-weight: 700; font-size: 0.9rem; color: var(--text); margin-bottom: 2px; }
.trip-booking-meta { display: flex; gap: 10px; font-size: 0.74rem; color: var(--muted); flex-wrap: wrap; }
.trip-booking-type { padding: 1px 6px; background: rgba(255,255,255,0.06); border-radius: 99px; color: var(--booking-type-color, var(--muted)); }
.trip-booking-type-flight .trip-booking-title { color: #60a5fa; }
.trip-booking-type-hotel .trip-booking-title { color: #f472b6; }
.trip-booking-open, .trip-booking-del {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
color: var(--muted);
width: 30px; height: 30px; border-radius: 7px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all 0.15s; font-size: 0.9rem;
}
.trip-booking-open:hover { background: rgba(139,92,246,0.15); color: var(--accent2, #8b5cf6); border-color: rgba(139,92,246,0.3); }
.trip-booking-del:hover { background: rgba(239,68,68,0.12); color: var(--danger); border-color: rgba(239,68,68,0.3); }
/* Notes textarea */
.te-notes-area {
width: 100%; box-sizing: border-box;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 10px;
padding: 12px 14px;
color: var(--text);
font-family: var(--font-ar);
font-size: 0.9rem; line-height: 1.6;
outline: none; resize: vertical;
min-height: 320px; direction: rtl;
}
.te-notes-area:focus { border-color: var(--accent2, #8b5cf6); }
/* ─── Mobile ─── */
@media (max-width: 700px) {
/* travel-page is already full-screen — nothing to override */
.tp-header { padding: 14px 16px; }
.tp-header-title { font-size: 1.05rem; }
.tp-new-btn { padding: 7px 11px; font-size: 0.78rem; }
.tp-stats { padding: 10px 14px; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.tp-stats::-webkit-scrollbar { display: none; }
.tp-stat { padding: 5px 12px; min-width: 62px; flex-shrink: 0; }
.tp-stat-num { font-size: 1.05rem; }
.tp-filter-tabs { padding: 6px 14px 0; overflow-x: auto; scrollbar-width: none; }
.tp-filter-tabs::-webkit-scrollbar { display: none; }
.tp-filter-tab { padding: 8px 10px; font-size: 0.76rem; flex-shrink: 0; }
.tp-trips-grid { grid-template-columns: 1fr; padding: 14px; gap: 10px; }
.tp-upcoming-section { padding: 10px 14px 0; }
.tp-upcoming-scroll .trip-card { flex: 0 0 200px; }
/* Editor mobile */
.trip-editor { padding: 0; align-items: flex-end; }
.te-shell {
flex-direction: column; max-width: 100%; height: 96dvh;
border-radius: 20px 20px 0 0;
}
.te-close-window {
top: 12px;
left: 12px;
width: 36px;
height: 36px;
border-radius: 12px;
}
.te-sidebar {
width: 100%;
border-left: none;
border-bottom: 1px solid rgba(255,255,255,0.07);
flex-direction: row;
align-items: center;
background: var(--surface);
}
.te-sidebar-top { padding: 12px 14px; flex-shrink: 0; }
.te-sidebar-title { font-size: 0.82rem; }
.te-sidebar-footer {
margin-top: 0; margin-inline-start: auto;
padding: 8px 10px;
border-top: none;
border-inline-start: 1px solid rgba(255,255,255,0.06);
}
.te-export-btn { padding: 7px 10px; font-size: 0.72rem; white-space: nowrap; }
.te-export-btn span { display: none; }
.te-tabs { flex-direction: row; padding: 4px 6px; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.te-tabs::-webkit-scrollbar { display: none; }
.te-tab { flex-direction: column; gap: 3px; padding: 6px 10px; font-size: 0.68rem; white-space: nowrap; flex-shrink: 0; border-radius: 7px; }
.te-content { padding: 16px; }
.te-row { grid-template-columns: 1fr; }
/* Day row stacks on mobile */
.trip-day-row {
grid-template-columns: 1fr 28px;
grid-template-areas:
"num del"
"region region"
"hotel hotel"
"act act";
gap: 7px;
}
.trip-day-row > .trip-day-num { grid-area: num; flex-direction: row; gap: 8px; align-items: center; padding: 2px 0; }
.trip-day-row > .trip-day-input:nth-of-type(1) { grid-area: region; }
.trip-day-row > .trip-day-input:nth-of-type(2) { grid-area: hotel; }
.trip-day-row > .trip-day-act { grid-area: act; }
.trip-day-row > .trip-day-del { grid-area: del; }
}
/* ═══ Travel v2: destinations + airline logos + new booking types ═══ */
/* Destination chips list */
.trip-dest-list {
display: flex; flex-direction: column; gap: 6px;
margin-bottom: 8px;
}
.trip-dest-chip {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 9px;
transition: border-color 0.15s;
}
.trip-dest-chip:focus-within { border-color: var(--accent2, #8b5cf6); }
.trip-dest-num {
display: inline-block;
min-width: 22px; height: 22px; line-height: 22px;
text-align: center;
background: rgba(139,92,246,0.15);
color: var(--accent2, #8b5cf6);
font-family: var(--font-mono);
font-size: 0.72rem; font-weight: 700;
border-radius: 50%;
flex-shrink: 0;
}
.trip-dest-input {
flex: 1;
background: transparent;
border: none; outline: none;
color: var(--text);
font-family: var(--font-ar);
font-size: 0.92rem;
direction: rtl;
}
.trip-icon-input { width: 70px; text-align: center; font-size: 1.3rem; }
.trip-dest-del {
background: none; border: none;
color: rgba(255,255,255,0.3);
font-size: 0.85rem;
cursor: pointer;
padding: 4px 8px; border-radius: 6px;
transition: all 0.15s;
}
.trip-dest-del:hover { color: var(--danger); background: rgba(239,68,68,0.08); }
/* Country button inside destination chip */
.trip-dest-country-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 10px;
background: rgba(139,92,246,0.08);
border: 1px solid rgba(139,92,246,0.22);
border-radius: 8px;
color: var(--text);
font-family: var(--font-ar);
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
flex-shrink: 0;
}
.trip-dest-country-btn:hover {
background: rgba(139,92,246,0.18);
border-color: rgba(139,92,246,0.4);
}
.trip-dest-country-btn.placeholder {
color: rgba(255,255,255,0.45);
background: transparent;
border-style: dashed;
border-color: rgba(255,255,255,0.15);
font-weight: 500;
}
.trip-dest-country-btn .tdp-caret {
font-size: 0.68rem;
opacity: 0.6;
}
/* Country picker popover */
#country-picker {
position: fixed;
z-index: 9520;
width: 330px;
max-height: 440px;
background: var(--surface, #14141a);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 14px;
box-shadow: 0 18px 48px rgba(0,0,0,0.7);
padding: 10px;
direction: rtl;
display: flex; flex-direction: column;
animation: tdpIn 0.14s ease-out both;
}
#country-picker.hidden { display: none !important; }
.cp-search {
padding: 8px 11px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 8px;
color: var(--text);
font-family: var(--font-ar);
font-size: 0.86rem;
width: 100%;
margin-bottom: 8px;
outline: none;
direction: rtl;
}
.cp-search:focus { border-color: var(--accent2, #8b5cf6); }
.cp-list {
flex: 1;
overflow-y: auto;
display: flex; flex-direction: column; gap: 2px;
scrollbar-width: thin;
scrollbar-color: rgba(139,92,246,0.3) transparent;
}
.cp-list::-webkit-scrollbar { width: 6px; }
.cp-list::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.3); border-radius: 3px; }
.cp-item {
display: flex; align-items: center; gap: 11px;
padding: 8px 10px;
background: transparent;
border: none;
border-radius: 8px;
color: var(--text);
cursor: pointer;
text-align: right;
direction: rtl;
transition: background 0.1s;
width: 100%;
}
.cp-item:hover { background: rgba(139,92,246,0.12); }
.cp-item.cp-selected {
background: rgba(139,92,246,0.22);
box-shadow: inset 0 0 0 1px rgba(139,92,246,0.45);
}
.cp-flag {
font-size: 1.35rem;
flex-shrink: 0;
line-height: 1;
}
.cp-names {
flex: 1;
display: flex; flex-direction: column; gap: 1px;
min-width: 0;
}
.cp-name-ar {
font-weight: 700; font-size: 0.88rem;
font-family: var(--font-ar);
color: var(--text);
}
.cp-name-en {
font-size: 0.68rem;
color: var(--muted);
font-family: var(--font-mono);
opacity: 0.75;
}
.cp-empty {
text-align: center;
padding: 24px 10px;
color: var(--muted);
font-size: 0.85rem;
}
.cp-footer {
display: flex; gap: 6px;
padding-top: 8px; margin-top: 6px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.cp-footer > .tdp-footer-btn { flex: 1; }
/* Mobile tweaks */
@media (max-width: 640px) {
.trip-card-hero { height: 100px; }
.trip-card-flag { font-size: 1.35rem; }
.trip-card-icon-big { font-size: 2.2rem; }
.trip-card { min-height: 230px; }
#country-picker {
width: calc(100vw - 24px);
max-width: 360px;
max-height: 60vh;
}
.trip-dest-country-btn {
max-width: 130px;
overflow: hidden; text-overflow: ellipsis;
font-size: 0.72rem;
}
}
.te-field-hint {
font-weight: 400;
color: rgba(255,255,255,0.35);
font-size: 0.72rem;
margin-right: 4px;
}
.te-action-btn-sm {
padding: 6px 12px !important;
font-size: 0.78rem !important;
margin-top: 4px;
}
/* Day region select */
.trip-day-select {
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: left 10px center;
padding-left: 28px !important;
}
.trip-day-select:focus { border-color: var(--accent2, #8b5cf6); }
/* Booking form rows */
.te-booking-row {
display: flex; gap: 8px; align-items: center;
}
.te-booking-row > select { flex: 0 0 140px; }
.te-booking-row > input[type="text"] { flex: 1; }
/* Airline row + live preview */
.te-booking-airline-row {
gap: 10px;
padding: 4px 0;
}
.te-airline-input-wrap { position: relative; }
.te-airline-preview {
display: flex; align-items: center; gap: 6px;
min-width: 68px; height: 36px;
padding: 3px 10px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 8px;
}
.te-airline-preview:empty {
background: transparent;
border-style: dashed;
border-color: rgba(255,255,255,0.1);
}
.te-airline-preview img {
max-width: 44px; max-height: 22px;
object-fit: contain;
display: block;
}
.te-airline-code {
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 700;
color: var(--accent2, #8b5cf6);
background: rgba(139,92,246,0.12);
padding: 1px 6px;
border-radius: 4px;
}
.te-airline-miss {
color: var(--muted);
font-size: 0.95rem;
font-weight: 700;
opacity: 0.5;
}
/* Booking item — airline logo display */
.trip-booking-logo-wrap {
display: inline-flex; align-items: center; justify-content: center;
min-width: 50px; height: 32px;
background: rgba(255,255,255,0.04);
border-radius: 6px;
padding: 2px 6px;
flex-shrink: 0;
}
.trip-booking-logo {
max-width: 44px; max-height: 24px;
object-fit: contain;
display: block;
}
.trip-booking-airline {
color: rgba(255,255,255,0.75);
font-weight: 600;
font-size: 0.74rem;
}
/* Type badges — colored per booking type */
.trip-booking-type-flight .trip-booking-title,
.trip-booking-type-internal_flight .trip-booking-title { color: #60a5fa; }
.trip-booking-type-hotel .trip-booking-title { color: #f472b6; }
.trip-booking-type-train .trip-booking-title { color: #22c55e; }
.trip-booking-type-cruise .trip-booking-title { color: #06b6d4; }
.trip-booking-type-tour .trip-booking-title { color: #f59e0b; }
.trip-booking-type-other .trip-booking-title { color: var(--text); }
/* Mobile */
@media (max-width: 700px) {
.te-booking-row { flex-direction: column; align-items: stretch; }
.te-booking-row > select { flex: 1; }
.te-booking-airline-row { flex-direction: row; }
.te-airline-preview { flex-shrink: 0; }
}
/* ═══ Custom date picker (matches site calendar style) ═══ */
.te-date-trigger {
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
width: 100%;
padding: 10px 12px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 9px;
color: var(--text);
font-family: var(--font-ar);
font-size: 0.92rem;
cursor: pointer;
transition: all 0.15s;
text-align: right;
direction: rtl;
}
.te-date-trigger:hover { border-color: var(--accent2, #8b5cf6); background: rgba(255,255,255,0.05); }
.te-date-trigger.placeholder { color: rgba(255,255,255,0.4); }
.te-date-trigger .tdp-icon {
flex-shrink: 0; color: var(--accent2, #8b5cf6); opacity: 0.75;
}
#trip-date-picker {
position: fixed;
z-index: 9510;
width: 296px;
background: var(--surface, #14141a);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 14px;
box-shadow: 0 18px 48px rgba(0,0,0,0.7);
padding: 12px;
direction: rtl;
animation: tdpIn 0.14s ease-out both;
}
#trip-date-picker.hidden { display: none !important; }
@keyframes tdpIn {
from { opacity: 0; transform: translateY(-6px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.tdp-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
}
.tdp-nav {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
color: var(--text);
width: 28px; height: 28px;
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all 0.12s;
font-size: 0.9rem;
}
.tdp-nav:hover { background: rgba(139,92,246,0.15); border-color: var(--accent2, #8b5cf6); }
.tdp-title {
font-family: var(--font-ar);
font-size: 0.9rem; font-weight: 700;
color: var(--text);
cursor: pointer;
padding: 4px 10px; border-radius: 7px;
transition: background 0.12s;
}
.tdp-title:hover { background: rgba(255,255,255,0.05); }
.tdp-dow-row {
display: grid; grid-template-columns: repeat(7, 1fr);
gap: 2px; margin-bottom: 4px;
}
.tdp-dow {
text-align: center;
font-family: var(--font-ar);
font-size: 0.66rem;
font-weight: 700;
color: var(--muted);
padding: 4px 0;
}
.tdp-grid {
display: grid; grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.tdp-cell {
aspect-ratio: 1;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
color: var(--text);
font-family: var(--font-mono);
font-size: 0.78rem;
cursor: pointer;
transition: all 0.1s;
padding: 0;
}
.tdp-cell:hover:not(.tdp-empty) {
background: rgba(139,92,246,0.12);
border-color: rgba(139,92,246,0.3);
}
.tdp-cell.tdp-empty { cursor: default; opacity: 0; }
.tdp-cell.tdp-other { color: rgba(255,255,255,0.2); }
.tdp-cell.tdp-today {
color: var(--accent2, #8b5cf6);
font-weight: 700;
border-color: rgba(139,92,246,0.3);
}
.tdp-cell.tdp-selected {
background: var(--accent2, #8b5cf6);
color: #fff;
font-weight: 700;
border-color: var(--accent2, #8b5cf6);
}
.tdp-footer {
display: flex; justify-content: space-between; gap: 6px;
margin-top: 10px; padding-top: 8px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.tdp-footer-btn {
flex: 1;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: var(--text);
padding: 6px 10px;
border-radius: 7px;
font-family: var(--font-ar);
font-size: 0.76rem;
cursor: pointer;
transition: all 0.12s;
}
.tdp-footer-btn:hover { background: rgba(139,92,246,0.12); border-color: var(--accent2, #8b5cf6); }
.tdp-footer-btn.tdp-clear:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.4); color: var(--danger); }
/* ═══ Booking form v3 — PNR + bottom-aligned action buttons ═══ */
.te-pane-head-row {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
margin-bottom: 14px;
}
.te-pane-head-row .te-pane-title { margin: 0; }
.te-booking-new-btn {
font-size: 0.82rem !important;
padding: 8px 14px !important;
white-space: nowrap;
}
.te-booking-form-head {
display: flex; align-items: center; justify-content: space-between;
padding-bottom: 8px;
margin-bottom: 2px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.te-booking-form-title {
font-family: var(--font-ar);
font-size: 0.84rem;
font-weight: 700;
color: var(--accent2, #8b5cf6);
}
.te-booking-form-close {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: var(--muted);
width: 26px; height: 26px;
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.12s;
font-size: 0.8rem;
}
.te-booking-form-close:hover {
background: rgba(239,68,68,0.1); color: var(--danger);
border-color: rgba(239,68,68,0.3);
}
.te-booking-add-form {
gap: 10px;
}
.te-booking-pnr-row { display: flex; gap: 8px; }
.te-booking-pnr-row > input { flex: 1; }
.te-booking-actions-bar {
display: flex; gap: 10px;
padding-top: 8px;
border-top: 1px dashed rgba(255,255,255,0.08);
margin-top: 4px;
}
.te-booking-actions-bar .te-action-btn {
flex: 1;
justify-content: center;
padding: 11px 14px !important;
font-size: 0.88rem !important;
font-weight: 700;
}
.te-booking-actions-bar .te-action-btn.te-btn-primary {
background: var(--accent2, #8b5cf6);
border-color: var(--accent2, #8b5cf6);
color: #fff;
}
.te-booking-actions-bar .te-action-btn.te-btn-primary:hover {
background: #7c4ee6; border-color: #7c4ee6;
}
@media (max-width: 700px) {
.te-booking-actions-bar { flex-direction: column; }
#trip-date-picker { width: calc(100vw - 24px); max-width: 320px; }
}
/* ─── Trip dashboard card (hero-first immersive) ───────── */
.card.trip-dash-card {
padding: 0 !important;
overflow: hidden;
border-radius: 16px;
position: relative;
display: flex;
flex-direction: column;
min-height: 280px;
transition: transform 0.22s cubic-bezier(.2,.9,.3,1), box-shadow 0.22s;
}
.card.trip-dash-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(139,92,246,0.25);
}
.trip-dash-shell {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
.trip-dash-hero {
position: relative;
height: 160px;
background-size: cover;
background-position: center;
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 12px 14px;
transition: background-size 0.4s ease;
}
.trip-dash-hero-empty {
background: linear-gradient(135deg, #6d45e6 0%, #8b5cf6 50%, #b490f2 100%);
}
.trip-dash-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.1) 35%, rgba(0,0,0,0.55) 75%, rgba(12,10,18,0.95) 100%);
pointer-events: none;
z-index: 1;
}
.trip-dash-hero-top,
.trip-dash-hero-bottom {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 8px;
}
.trip-dash-hero-top {
justify-content: space-between;
}
.trip-dash-hero-bottom {
gap: 10px;
}
.trip-dash-type-badge {
font-family: var(--font-mono, monospace);
font-size: 0.7rem;
letter-spacing: 0.08em;
padding: 4px 9px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 999px;
color: #fff;
text-transform: uppercase;
}
.trip-dash-status {
font-family: var(--font-ar);
font-size: 0.72rem;
padding: 4px 10px;
border-radius: 999px;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);
color: #fff;
font-weight: 600;
}
.trip-dash-status.trip-status-upcoming { color: #fbbf24; border-color: rgba(251,191,36,0.35); }
.trip-dash-status.trip-status-ongoing { color: #34d399; border-color: rgba(52,211,153,0.35); }
.trip-dash-status.trip-status-past { color: #d1d5db; border-color: rgba(209,213,219,0.2); }
.trip-dash-status.trip-status-draft { color: #c4b5fd; border-color: rgba(196,181,253,0.3); }
.trip-dash-flag {
font-size: 2rem;
filter: drop-shadow(0 3px 8px rgba(0,0,0,0.6));
line-height: 1;
}
.trip-dash-title {
flex: 1;
margin: 0;
font-family: var(--font-ar);
font-size: 1.35rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.7);
line-height: 1.2;
word-break: break-word;
}
.trip-dash-body {
padding: 12px 14px 10px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
background: linear-gradient(180deg, rgba(139,92,246,0.05) 0%, transparent 60%);
}
.trip-dash-row {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-ar);
font-size: 0.82rem;
color: var(--text);
}
.trip-dash-icon {
font-size: 0.9rem;
opacity: 0.7;
flex-shrink: 0;
}
.trip-dash-row-text {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: rgba(255,255,255,0.85);
}
.trip-dash-chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 4px;
}
.trip-dash-chip {
font-family: var(--font-ar);
font-size: 0.72rem;
padding: 3px 9px;
background: rgba(139,92,246,0.12);
border: 1px solid rgba(139,92,246,0.22);
border-radius: 999px;
color: rgba(255,255,255,0.85);
}
.trip-dash-chip strong {
color: #c4b5fd;
font-weight: 700;
margin-left: 2px;
}
.trip-packing-chip { background: rgba(59,130,246,0.12) !important; border-color: rgba(59,130,246,0.22) !important; }
.trip-packing-chip strong { color: #93c5fd !important; }
.trip-packing-done { background: rgba(34,197,94,0.12) !important; border-color: rgba(34,197,94,0.22) !important; }
.trip-packing-done strong { color: #86efac !important; }
.trip-dash-foot {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 14px 10px;
border-top: 1px dashed rgba(255,255,255,0.06);
font-family: var(--font-mono, monospace);
font-size: 0.7rem;
color: var(--muted);
}
.trip-dash-time { opacity: 0.7; }
.trip-dash-open {
color: #c4b5fd;
opacity: 0.8;
transition: opacity 0.15s;
}
.card.trip-dash-card:hover .trip-dash-open { opacity: 1; }
.card.trip-dash-card .card-actions {
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
display: flex;
gap: 4px;
opacity: 0;
transition: opacity 0.18s;
}
.card.trip-dash-card:hover .card-actions { opacity: 1; }
.card.trip-dash-card .card-actions button {
background: rgba(0,0,0,0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.12);
color: #fff;
border-radius: 8px;
width: 28px; height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
cursor: pointer;
}
.card.trip-dash-card .card-actions button:hover {
background: rgba(239,68,68,0.6);
}
.card.trip-dash-card .card-edit:hover {
background: rgba(139,92,246,0.7) !important;
}
@media (max-width: 640px) {
.card.trip-dash-card { min-height: 240px; }
.trip-dash-hero { height: 130px; }
.trip-dash-title { font-size: 1.15rem; }
.trip-dash-flag { font-size: 1.6rem; }
}
/* ─── Status dashboard card (live hero) ─────────────────── */
.card.status-dash-card {
padding: 0 !important;
overflow: hidden;
border-radius: 16px;
position: relative;
display: flex;
flex-direction: column;
min-height: 320px;
transition: transform 0.22s cubic-bezier(.2,.9,.3,1), box-shadow 0.22s;
}
.card.status-dash-card:hover {
transform: translateY(-3px);
}
.card.status-dash-card.status-state-online:hover {
box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(16,185,129,0.4);
}
.card.status-dash-card.status-state-offline:hover {
box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(239,68,68,0.4);
}
.card.status-dash-card.status-state-checking:hover {
box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(139,92,246,0.35);
}
.status-dash-shell {
display: flex; flex-direction: column; flex: 1;
}
/* Hero band — gradient reflects state */
.status-dash-hero {
position: relative;
height: 140px;
padding: 14px 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
flex-shrink: 0;
}
.status-state-online .status-dash-hero {
background: linear-gradient(135deg, #0a2920 0%, #164030 60%, #1f5a45 100%);
animation: sdPulseBg 3.5s ease-in-out infinite;
}
.status-state-offline .status-dash-hero {
background: linear-gradient(135deg, #2a0808 0%, #5a1414 60%, #7a2525 100%);
animation: sdShakeBg 6s ease-in-out infinite;
}
.status-state-checking .status-dash-hero {
background: linear-gradient(135deg, #1f1f23 0%, #2e2e33 50%, #3d3d44 100%);
background-size: 200% 200%;
animation: sdShimmer 2.2s ease-in-out infinite;
}
.sd-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.2) 60%, rgba(12,10,18,0.85) 100%);
pointer-events: none;
z-index: 1;
}
@keyframes sdPulseBg {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.12); }
}
@media (prefers-reduced-motion: reduce) {
.status-state-warning .status-dash-hero,
.status-state-offline .status-dash-hero,
.status-state-checking .status-dash-hero { animation: none; }
}
@keyframes sdShakeBg {
0%, 92%, 100% { transform: translateX(0); }
93% { transform: translateX(-1.5px); }
95% { transform: translateX(1.5px); }
97% { transform: translateX(-1px); }
}
@keyframes sdShimmer {
0% { background-position: 0% 0%; }
50% { background-position: 100% 100%; }
100% { background-position: 0% 0%; }
}
.sd-hero-top, .sd-hero-bottom {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
}
.sd-state-row {
display: flex; align-items: center; gap: 8px;
}
.sd-dot {
width: 12px; height: 12px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
animation: sdDotPulse 1.8s ease-out infinite;
}
.status-state-online .sd-dot { background: #d1fae5; }
.status-state-offline .sd-dot { background: #fecaca; }
.status-state-checking .sd-dot { background: #e4e4e7; animation-duration: 0.9s; }
@keyframes sdDotPulse {
0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
70% { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.sd-state-label {
font-family: var(--font-ar);
font-size: 0.95rem;
font-weight: 700;
color: #fff;
text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
/* Latency glass chip */
.sd-latency-chip {
display: inline-flex;
align-items: baseline;
gap: 3px;
padding: 6px 12px;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 999px;
font-family: var(--font-mono, monospace);
color: #fff;
}
.sd-lat-num {
font-size: 1.25rem;
font-weight: 800;
line-height: 1;
}
.sd-lat-unit {
font-size: 0.7rem;
opacity: 0.7;
}
.sd-latency-chip.sd-lat-fast .sd-lat-num { color: #a7f3d0; }
.sd-latency-chip.sd-lat-med .sd-lat-num { color: #fde68a; }
.sd-latency-chip.sd-lat-slow .sd-lat-num { color: #fca5a5; }
.sd-latency-chip.sd-lat-fail .sd-lat-num { color: #fca5a5; opacity: 0.7; }
.sd-latency-chip.sd-checking { padding: 8px 14px; }
.sd-spinner {
width: 16px; height: 16px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: sdSpin 0.7s linear infinite;
}
@keyframes sdSpin { to { transform: rotate(360deg); } }
/* Sparkline */
.sd-spark {
display: flex;
align-items: flex-end;
gap: 3px;
height: 32px;
width: 100%;
}
.sd-spark-bar {
flex: 1;
height: var(--h, 20%);
border-radius: 2px;
min-height: 4px;
transition: opacity 0.2s, transform 0.2s;
cursor: help;
}
.sd-spark-ok {
background: linear-gradient(180deg, #34d399, #10b981);
box-shadow: 0 0 6px rgba(52,211,153,0.4);
}
.sd-spark-fail {
background: linear-gradient(180deg, #f87171, #dc2626);
box-shadow: 0 0 6px rgba(239,68,68,0.4);
}
.sd-spark-empty {
background: rgba(255,255,255,0.08);
height: 18%;
}
.sd-spark-bar:hover {
transform: scaleY(1.08);
opacity: 0.9;
}
/* Body */
.status-dash-body {
padding: 12px 14px 10px;
display: flex;
flex-direction: column;
gap: 7px;
flex: 1;
}
.sd-title-row {
display: flex;
align-items: center;
gap: 10px;
}
.sd-favicon {
width: 22px; height: 22px;
border-radius: 5px;
background: rgba(255,255,255,0.06);
padding: 2px;
flex-shrink: 0;
}
.sd-favicon-fallback {
width: 22px; height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
background: rgba(255,255,255,0.06);
border-radius: 5px;
flex-shrink: 0;
}
.sd-title {
flex: 1;
margin: 0;
font-family: var(--font-ar);
font-size: 1.05rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sd-url-row {
display: flex; align-items: center; gap: 7px;
font-family: var(--font-mono, monospace);
font-size: 0.78rem;
color: rgba(255,255,255,0.65);
}
.sd-url-icon { opacity: 0.6; font-size: 0.75rem; }
.sd-url-domain {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sd-credentials-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.sd-credential {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
padding: 5px 8px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
background: rgba(255,255,255,0.035);
color: rgba(255,255,255,0.78);
font-family: var(--font-ar);
font-size: 0.72rem;
}
.sd-credential-password {
background: rgba(139,92,246,0.08);
border-color: rgba(139,92,246,0.16);
}
.sd-cred-label {
color: rgba(255,255,255,0.48);
white-space: nowrap;
}
.sd-cred-value {
max-width: 95px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--font-mono, monospace);
color: rgba(255,255,255,0.88);
}
.sd-cred-btn {
border: 0;
border-radius: 999px;
padding: 2px 7px;
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.86);
font-family: var(--font-ar);
font-size: 0.68rem;
cursor: pointer;
}
.sd-cred-btn:hover {
background: rgba(96,211,255,0.16);
color: #7dd3fc;
}
.sd-chips {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 3px;
}
.sd-chip {
font-family: var(--font-ar);
font-size: 0.72rem;
padding: 3px 9px;
background: rgba(139,92,246,0.1);
border: 1px solid rgba(139,92,246,0.2);
border-radius: 999px;
color: rgba(255,255,255,0.85);
}
.sd-chip strong {
color: #c4b5fd;
font-weight: 700;
margin: 0 2px;
font-family: var(--font-mono, monospace);
}
.sd-chip-tag {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.1);
font-family: var(--font-mono, monospace);
}
.status-state-online .sd-chip strong { color: #6ee7b7; }
.status-state-offline .sd-chip strong { color: #fca5a5; }
/* Footer */
.status-dash-foot {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 14px 10px;
border-top: 1px dashed rgba(255,255,255,0.08);
font-family: var(--font-mono, monospace);
font-size: 0.72rem;
}
.sd-last-checked {
color: var(--muted);
opacity: 0.75;
}
.sd-recheck-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: rgba(139,92,246,0.12);
border: 1px solid rgba(139,92,246,0.3);
border-radius: 999px;
color: #c4b5fd;
font-family: var(--font-ar);
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.sd-recheck-btn:hover {
background: rgba(139,92,246,0.22);
border-color: rgba(139,92,246,0.5);
color: #fff;
}
.sd-recheck-ico {
display: inline-block;
font-size: 0.9rem;
line-height: 1;
}
.sd-recheck-loading .sd-recheck-ico {
animation: sdSpin 0.7s linear infinite;
}
/* Actions (hover) */
.card.status-dash-card .card-actions {
position: absolute;
top: 10px; left: 10px;
z-index: 4;
display: flex;
gap: 4px;
opacity: 0;
transition: opacity 0.18s;
}
.card.status-dash-card:hover .card-actions { opacity: 1; }
.card.status-dash-card .card-actions button {
background: rgba(0,0,0,0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
border-radius: 8px;
width: 28px; height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
cursor: pointer;
}
.card.status-dash-card .card-actions .card-delete:hover {
background: rgba(239,68,68,0.6);
}
.card.status-dash-card .card-actions .card-edit:hover {
background: rgba(139,92,246,0.7);
}
@media (max-width: 640px) {
.card.status-dash-card { min-height: 240px; }
.status-dash-hero { height: 120px; padding: 12px; }
.sd-lat-num { font-size: 1.1rem; }
.sd-state-label { font-size: 0.85rem; }
.sd-recheck-label { display: none; }
.sd-recheck-btn { padding: 5px 9px; }
}
/* ─── Document dashboard card (expiry hero) ─────────────── */
.card.doc-dash-card {
padding: 0 !important;
gap: 0 !important;
overflow: hidden;
border-radius: 16px;
position: relative;
display: flex !important;
flex-direction: column;
height: 320px !important;
min-height: 320px !important;
transition: transform 0.22s cubic-bezier(.2,.9,.3,1), box-shadow 0.22s;
}
.card.doc-dash-card:hover {
transform: none !important;
}
.card.doc-dash-card.doc-sev-expired:hover,
.card.doc-dash-card.doc-sev-critical:hover {
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(239,68,68,0.4);
}
.card.doc-dash-card.doc-sev-warning:hover {
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(245,158,11,0.4);
}
.card.doc-dash-card.doc-sev-caution:hover,
.card.doc-dash-card.doc-sev-safe:hover {
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(16,185,129,0.4);
}
.card.doc-dash-card.doc-sev-none:hover {
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(139,92,246,0.35);
}
.doc-dash-shell { display:flex; flex-direction:column; flex:1; min-height: 0; height: 100%; }
/* Hero — gradient color reflects severity */
.doc-dash-hero {
position: relative;
height: 150px;
padding: 12px 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
flex-shrink: 0;
}
.doc-sev-expired .doc-dash-hero { background: linear-gradient(135deg, #2a0808 0%, #5a1414 60%, #7a2525 100%); animation: ddAlert 3.5s ease-in-out infinite; }
.doc-sev-critical .doc-dash-hero { background: linear-gradient(135deg, #2e1608 0%, #5a2d12 60%, #7a4520 100%); }
.doc-sev-warning .doc-dash-hero { background: linear-gradient(135deg, #2a1e08 0%, #4d3810 60%, #6b5020 100%); }
.doc-sev-caution .doc-dash-hero { background: linear-gradient(135deg, #0a2825 0%, #1a4540 60%, #276660 100%); }
.doc-sev-safe .doc-dash-hero { background: linear-gradient(135deg, #0a2920 0%, #164030 60%, #1f5a45 100%); }
.doc-sev-none .doc-dash-hero { background: linear-gradient(135deg, #1a1530 0%, #2d2450 60%, #3f3570 100%); }
@keyframes ddAlert {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.15) saturate(1.1); }
}
@media (prefers-reduced-motion: reduce) {
.doc-sev-expired .doc-dash-hero { animation: none; }
}
.dd-hero-noise {
position: absolute; inset: 0;
background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.07) 0, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(255,255,255,0.05) 0, transparent 45%);
pointer-events: none;
z-index: 1;
}
.dd-hero-overlay {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 75%),
linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.55) 80%, rgba(12,10,18,0.9) 100%);
pointer-events: none;
z-index: 1;
}
/* Decorative art layer — big emoji behind countdown + country flag corner */
.dd-hero-art {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.dd-art-emoji {
position: absolute;
top: 50%;
left: 14px;
transform: translateY(-50%) rotate(-12deg);
font-size: 5.5rem;
line-height: 1;
opacity: 0.22;
filter: drop-shadow(0 4px 18px rgba(0,0,0,0.55));
user-select: none;
}
.dd-art-flag {
position: absolute;
top: 50%;
right: 18px;
transform: translateY(-50%);
font-size: 4.2rem;
line-height: 1;
opacity: 0.28;
filter: drop-shadow(0 4px 16px rgba(0,0,0,0.6)) saturate(1.1);
user-select: none;
}
.dd-hero-top, .dd-hero-center, .dd-hero-bottom {
position: relative;
z-index: 2;
}
.dd-hero-top {
display: flex; justify-content: space-between; align-items: center;
}
.dd-type-badge {
font-family: var(--font-mono, monospace);
font-size: 0.7rem;
padding: 4px 9px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 999px;
color: #fff;
letter-spacing: 0.05em;
}
.dd-sev-badge {
font-family: var(--font-ar);
font-size: 0.72rem;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
}
.dd-sev-expired { color: #fecaca; border-color: rgba(239,68,68,0.5); }
.dd-sev-critical { color: #fed7aa; border-color: rgba(251,146,60,0.5); }
.dd-sev-warning { color: #fde68a; border-color: rgba(251,191,36,0.5); }
.dd-sev-caution { color: #99f6e4; border-color: rgba(45,212,191,0.5); }
.dd-sev-safe { color: #bbf7d0; border-color: rgba(52,211,153,0.5); }
.dd-sev-none { color: #ddd6fe; border-color: rgba(167,139,250,0.5); }
/* Countdown hero */
.dd-hero-center {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.dd-countdown {
display: flex;
align-items: baseline;
gap: 8px;
line-height: 1;
}
.dd-cd-num {
font-family: var(--font-mono, monospace);
font-size: 2.8rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 20px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.75), 0 0 1px rgba(0,0,0,0.5);
letter-spacing: -0.02em;
}
.dd-cd-unit {
font-family: var(--font-ar);
font-size: 1rem;
font-weight: 600;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.7);
}
.dd-cd-tail {
font-family: var(--font-ar);
font-size: 0.78rem;
color: rgba(255,255,255,0.9);
text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.7);
margin-top: 2px;
}
/* Hero bottom — title + count */
.dd-hero-bottom {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 10px;
}
.dd-title {
margin: 0;
flex: 1;
font-family: var(--font-ar);
font-size: 1.25rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.6);
line-height: 1.15;
word-break: break-word;
}
.dd-count-chip {
font-family: var(--font-ar);
font-size: 0.72rem;
padding: 4px 10px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 999px;
color: rgba(255,255,255,0.95);
white-space: nowrap;
flex-shrink: 0;
}
.dd-count-chip strong {
color: #fff;
font-weight: 700;
font-family: var(--font-mono, monospace);
margin-left: 2px;
}
.dd-count-expired { color: #fca5a5; }
/* Body rows */
.doc-dash-body {
padding: 8px 12px;
display: flex;
flex-direction: column;
gap: 5px;
flex: 1 1 auto;
min-height: 0;
max-height: none;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.doc-dash-body::-webkit-scrollbar { width: 6px; }
.doc-dash-body::-webkit-scrollbar-track { background: transparent; }
.doc-dash-body::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.1);
border-radius: 3px;
}
.doc-dash-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
.dd-row {
display: flex;
align-items: center;
gap: 10px;
min-height: 38px;
padding: 6px 10px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 9px;
transition: background 0.15s, border-color 0.15s;
}
.dd-row:hover {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.1);
}
.dd-row-icon {
font-size: 1rem;
flex-shrink: 0;
opacity: 0.85;
}
.dd-row-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.dd-row-holder {
font-family: var(--font-ar);
font-size: 0.85rem;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dd-row-date {
font-family: var(--font-mono, monospace);
font-size: 0.7rem;
color: var(--muted);
opacity: 0.75;
}
.dd-row-badge {
font-family: var(--font-ar);
font-size: 0.7rem;
font-weight: 600;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid transparent;
white-space: nowrap;
flex-shrink: 0;
}
.dd-badge-expired { background: rgba(220,38,38,0.18); border-color: rgba(220,38,38,0.4); color: #fca5a5; }
.dd-badge-critical { background: rgba(251,146,60,0.18); border-color: rgba(251,146,60,0.4); color: #fed7aa; }
.dd-badge-warning { background: rgba(251,191,36,0.15); border-color: rgba(251,191,36,0.35); color: #fde68a; }
.dd-badge-caution { background: rgba(45,212,191,0.15); border-color: rgba(45,212,191,0.35); color: #99f6e4; }
.dd-badge-safe { background: rgba(52,211,153,0.15); border-color: rgba(52,211,153,0.35); color: #bbf7d0; }
.dd-badge-none { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.3); color: #ddd6fe; }
.dd-row-expired .dd-row-holder,
.dd-row-critical .dd-row-holder { color: #fff; }
.dd-row-expired { border-inline-end: 3px solid #dc2626; }
.dd-row-critical { border-inline-end: 3px solid #fb923c; }
.dd-row-warning { border-inline-end: 3px solid #fbbf24; }
.dd-row-caution { border-inline-end: 3px solid #2dd4bf; }
.dd-row-safe { border-inline-end: 3px solid #34d399; }
.dd-row-none { border-inline-end: 3px solid #8b5cf6; }
[dir="rtl"] .dd-row-expired,
[dir="rtl"] .dd-row-critical,
[dir="rtl"] .dd-row-warning,
[dir="rtl"] .dd-row-caution,
[dir="rtl"] .dd-row-safe,
[dir="rtl"] .dd-row-none {
border-left: none;
}
[dir="rtl"] .dd-row-expired { border-inline-start: 3px solid #dc2626; }
[dir="rtl"] .dd-row-critical { border-inline-start: 3px solid #fb923c; }
[dir="rtl"] .dd-row-warning { border-inline-start: 3px solid #fbbf24; }
[dir="rtl"] .dd-row-caution { border-inline-start: 3px solid #2dd4bf; }
[dir="rtl"] .dd-row-safe { border-inline-start: 3px solid #34d399; }
[dir="rtl"] .dd-row-none { border-inline-start: 3px solid #8b5cf6; }
.dd-row-more {
padding: 5px 10px;
font-family: var(--font-ar);
font-size: 0.72rem;
color: var(--muted);
text-align: center;
opacity: 0.8;
}
.dd-empty {
padding: 16px;
text-align: center;
color: var(--muted);
font-family: var(--font-ar);
font-size: 0.82rem;
}
/* Footer */
.doc-dash-foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
min-height: 48px;
padding: 8px 14px;
border-top: 1px dashed rgba(255,255,255,0.08);
flex-shrink: 0;
}
.dd-time {
font-family: var(--font-mono, monospace);
font-size: 0.72rem;
color: var(--muted);
opacity: 0.8;
}
.dd-foot-actions { display: flex; align-items: center; gap: 6px; }
.dd-foot-btn {
padding: 5px 11px;
background: transparent;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 999px;
color: rgba(255,255,255,0.88);
font-family: var(--font-ar);
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dd-foot-btn:hover {
background: rgba(139,92,246,0.12);
border-color: rgba(139,92,246,0.35);
color: #fff;
}
/* Hover actions */
.card.doc-dash-card .card-actions {
position: absolute;
top: 10px; left: 10px;
z-index: 4;
display: flex;
gap: 4px;
opacity: 0;
transition: opacity 0.18s;
}
.card.doc-dash-card:hover .card-actions { opacity: 1; }
.card.doc-dash-card .card-actions button {
background: rgba(0,0,0,0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
border-radius: 8px;
width: 28px; height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
cursor: pointer;
}
.card.doc-dash-card .card-actions .card-delete:hover { background: rgba(239,68,68,0.6); }
.card.doc-dash-card .card-actions .card-edit:hover { background: rgba(139,92,246,0.7); }
@media (max-width: 640px) {
.card.doc-dash-card { height: 340px !important; min-height: 340px !important; }
.doc-dash-body { max-height: none; }
.doc-dash-hero { height: 155px; padding: 11px 13px; }
.dd-art-emoji { font-size: 4.4rem; left: 10px; }
.dd-art-flag { font-size: 3.4rem; right: 12px; }
.dd-cd-num { font-size: 2.2rem; }
.dd-cd-unit { font-size: 0.85rem; }
.dd-title { font-size: 1.1rem; }
.dd-count-chip { font-size: 0.68rem; padding: 3px 8px; }
}
/* ─── Subscription dashboard card (cost hero) ───────────── */
.card.sub-dash-card {
padding: 0 !important;
overflow: hidden;
border-radius: 16px;
position: relative;
display: flex;
flex-direction: column;
min-height: 360px;
height: 360px;
transition: box-shadow 0.22s, border-color 0.22s;
}
.card.sub-dash-card:hover { transform: none !important; }
.card.sub-dash-card.sub-sev-overdue:hover { box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(239,68,68,0.45); }
.card.sub-dash-card.sub-sev-urgent:hover { box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(251,146,60,0.45); }
.card.sub-dash-card.sub-sev-soon:hover { box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(251,191,36,0.45); }
.card.sub-dash-card.sub-sev-upcoming:hover { box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(139,92,246,0.4); }
.card.sub-dash-card.sub-sev-ok:hover { box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(16,185,129,0.35); }
.card.sub-dash-card.sub-sev-none:hover { box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(139,92,246,0.3); }
.sub-dash-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
/* Hero — gradient reflects nearest renewal urgency */
.sub-dash-hero {
position: relative;
height: 160px;
padding: 12px 14px 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
flex-shrink: 0;
}
.sub-sev-overdue .sub-dash-hero { background: linear-gradient(135deg, #2a0808 0%, #5a1414 60%, #7a2525 100%); animation: sd2Pulse 2.5s ease-in-out infinite; }
.sub-sev-urgent .sub-dash-hero { background: linear-gradient(135deg, #2e1608 0%, #5a2d12 60%, #7a4520 100%); }
.sub-sev-soon .sub-dash-hero { background: linear-gradient(135deg, #2a1e08 0%, #4d3810 60%, #6b5020 100%); }
.sub-sev-upcoming .sub-dash-hero { background: linear-gradient(135deg, #1a1530 0%, #2d2450 60%, #3f3570 100%); }
.sub-sev-ok .sub-dash-hero { background: linear-gradient(135deg, #0a2920 0%, #164030 60%, #1f5a45 100%); }
.sub-sev-none .sub-dash-hero { background: linear-gradient(135deg, #1f1f23 0%, #2e2e33 60%, #3d3d44 100%); }
@keyframes sd2Pulse {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.15); }
}
@media (prefers-reduced-motion: reduce) {
.sub-sev-overdue .sub-dash-hero { animation: none; }
}
.sd2-hero-noise {
position: absolute; inset: 0;
background-image: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 0, transparent 40%),
radial-gradient(circle at 15% 80%, rgba(255,255,255,0.05) 0, transparent 45%);
pointer-events: none; z-index: 1;
}
.sd2-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.55) 85%, rgba(12,10,18,0.92) 100%);
pointer-events: none; z-index: 1;
}
.sd2-hero-top, .sd2-hero-center, .sd2-hero-bottom {
position: relative;
z-index: 2;
}
.sd2-hero-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.sd2-type-badge {
font-family: var(--font-mono, monospace);
font-size: 0.7rem;
padding: 4px 10px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 999px;
color: #fff;
letter-spacing: 0.04em;
}
.sd2-sev-badge {
font-family: var(--font-ar);
font-size: 0.72rem;
font-weight: 700;
padding: 4px 11px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 999px;
color: #fff;
}
.sd2-sev-overdue { color: #fecaca; border-color: rgba(239,68,68,0.55); }
.sd2-sev-urgent { color: #fed7aa; border-color: rgba(251,146,60,0.55); }
.sd2-sev-soon { color: #fde68a; border-color: rgba(251,191,36,0.5); }
.sd2-sev-upcoming { color: #ddd6fe; border-color: rgba(167,139,250,0.5); }
.sd2-sev-ok { color: #99f6e4; border-color: rgba(45,212,191,0.45); }
.sd2-sev-none { color: #d4d4d8; border-color: rgba(161,161,170,0.4); }
/* Hero center — total cost */
.sd2-hero-center {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
}
.sd2-total-row {
display: flex;
align-items: baseline;
gap: 6px;
line-height: 1;
}
.sd2-total-num {
font-family: var(--font-ar);
font-size: 2.3rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 14px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.5);
letter-spacing: -0.02em;
}
.sd2-total-cur {
font-family: var(--font-mono, monospace);
font-size: 1rem;
font-weight: 700;
color: rgba(255,255,255,0.88);
text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.sd2-total-period {
font-family: var(--font-ar);
font-size: 0.84rem;
color: rgba(255,255,255,0.72);
font-weight: 600;
}
.sd2-total-sub {
font-family: var(--font-ar);
font-size: 0.7rem;
color: rgba(255,255,255,0.7);
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
/* Hero bottom — title + next renewal */
.sd2-hero-bottom {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 10px;
}
.sd2-title-col {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.sd2-title {
margin: 0;
font-family: var(--font-ar);
font-size: 1.14rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.6);
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sd2-count-line {
font-family: var(--font-ar);
font-size: 0.72rem;
color: rgba(255,255,255,0.7);
}
.sd2-next-chip {
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 5px 10px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 10px;
flex-shrink: 0;
}
.sd2-next-label {
font-family: var(--font-ar);
font-size: 0.74rem;
font-weight: 700;
color: #fff;
}
.sd2-next-sub {
font-family: var(--font-ar);
font-size: 0.65rem;
color: rgba(255,255,255,0.7);
max-width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Body rows */
.sub-dash-body {
padding: 8px 12px;
display: flex;
flex-direction: column;
gap: 5px;
flex: 1 1 auto;
min-height: 0;
max-height: none;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.sub-dash-body::-webkit-scrollbar { width: 6px; }
.sub-dash-body::-webkit-scrollbar-track { background: transparent; }
.sub-dash-body::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.1);
border-radius: 3px;
}
.sub-dash-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
.sd2-row {
display: flex;
align-items: center;
gap: 10px;
min-height: 52px; /* ↑ from 38px — room for content + breathing space above bar */
padding: 8px 10px 12px; /* ↑ bottom padding reserves clear space for the burn-meter */
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 10px;
transition: background 0.15s, border-color 0.15s;
position: relative;
overflow: hidden;
}
.sd2-row:hover {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.1);
}
/* Burn-meter bar (cycle elapsed) — sits in a dedicated 4px lane at the bottom edge,
never overlaps content. Track stays visible at low opacity so the bar reads as a meter. */
.sd2-row::before {
content: '';
position: absolute;
inset-inline: 0;
bottom: 0;
height: 3px;
background: rgba(255,255,255,0.04);
pointer-events: none;
}
.sd2-row::after {
content: '';
position: absolute;
bottom: 0;
inset-inline-start: 0;
height: 3px;
width: var(--burn-pct, 0%);
background: linear-gradient(90deg, rgba(34,197,94,0.9), rgba(34,211,238,0.9));
border-radius: 0;
pointer-events: none;
transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.sd2-row.sd2-burn-cool::after { background: linear-gradient(90deg, #22c55e, #22d3ee); }
.sd2-row.sd2-burn-warm::after { background: linear-gradient(90deg, #f59e0b, #f97316); }
.sd2-row.sd2-burn-hot::after {
background: linear-gradient(90deg, #ef4444, #f97316);
box-shadow: 0 0 6px rgba(239,68,68,0.4);
animation: burnMeterPulse 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.sd2-row.sd2-burn-hot::after { animation: none; }
}
.sd2-row-icon {
font-size: 1.1rem;
flex-shrink: 0;
width: 30px; height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.05);
border-radius: 8px;
}
.sd2-row-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.sd2-row-name {
font-family: var(--font-ar);
font-size: 0.88rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sd2-row-price {
display: flex;
align-items: baseline;
gap: 4px;
font-family: var(--font-mono, monospace);
font-size: 0.75rem;
color: rgba(255,255,255,0.7);
}
.sd2-amt { color: rgba(255,255,255,0.9); font-weight: 700; }
.sd2-cur { color: rgba(255,255,255,0.7); }
.sd2-cyc { color: var(--muted); opacity: 0.8; font-family: var(--font-ar); }
.sd2-row-side {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.sd2-row-badge {
font-family: var(--font-ar);
font-size: 0.7rem;
font-weight: 600;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid transparent;
white-space: nowrap;
}
.sd2-badge-overdue { background: rgba(220,38,38,0.18); border-color: rgba(220,38,38,0.4); color: #fca5a5; }
.sd2-badge-urgent { background: rgba(251,146,60,0.18); border-color: rgba(251,146,60,0.4); color: #fed7aa; }
.sd2-badge-soon { background: rgba(251,191,36,0.15); border-color: rgba(251,191,36,0.35); color: #fde68a; }
.sd2-badge-upcoming { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.3); color: #ddd6fe; }
.sd2-badge-ok { background: rgba(45,212,191,0.12); border-color: rgba(45,212,191,0.3); color: #99f6e4; }
.sd2-badge-none { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); color: var(--muted); }
.sd2-row-overdue { border-color: rgba(220,38,38,0.25); background: rgba(220,38,38,0.04); }
.sd2-row-urgent { border-color: rgba(251,146,60,0.2); }
.sd2-renew-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px; height: 26px;
background: rgba(139,92,246,0.15);
border: 1px solid rgba(139,92,246,0.3);
border-radius: 7px;
color: #c4b5fd;
cursor: pointer;
font-size: 0.85rem;
transition: all 0.15s;
}
.sd2-renew-btn:hover {
background: rgba(139,92,246,0.3);
color: #fff;
transform: rotate(180deg);
}
.sd2-row-more {
padding: 5px 10px;
font-family: var(--font-ar);
font-size: 0.72rem;
color: var(--muted);
text-align: center;
opacity: 0.8;
}
.sd2-empty {
padding: 16px;
text-align: center;
color: var(--muted);
font-family: var(--font-ar);
font-size: 0.82rem;
}
/* Footer */
.sub-dash-foot {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 50px;
padding: 8px 14px 10px;
border-top: 1px dashed rgba(255,255,255,0.08);
font-family: var(--font-mono, monospace);
font-size: 0.7rem;
color: var(--muted);
}
.sd2-time { opacity: 0.75; }
.sd2-open {
color: #c4b5fd;
opacity: 0.85;
transition: opacity 0.15s;
}
.card.sub-dash-card:hover .sd2-open { opacity: 1; }
.sub-sev-overdue .sd2-open { color: #fca5a5; }
.sub-sev-urgent .sd2-open { color: #fed7aa; }
.sub-sev-soon .sd2-open { color: #fde68a; }
.sub-sev-ok .sd2-open { color: #99f6e4; }
/* Hover actions */
.card.sub-dash-card .card-actions {
position: absolute;
top: 10px; left: 10px;
z-index: 4;
display: flex; gap: 4px;
opacity: 0;
transition: opacity 0.18s;
}
.card.sub-dash-card:hover .card-actions { opacity: 1; }
.card.sub-dash-card .card-actions button {
background: rgba(0,0,0,0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
border-radius: 8px;
width: 28px; height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
cursor: pointer;
}
.card.sub-dash-card .card-actions .card-delete:hover { background: rgba(239,68,68,0.6); }
.card.sub-dash-card .card-actions .card-edit:hover { background: rgba(139,92,246,0.7); }
@media (max-width: 640px) {
.card.sub-dash-card { min-height: 340px; height: 340px; }
.sub-dash-hero { height: 140px; padding: 11px 13px; }
.sub-dash-body { max-height: none; }
.sd2-total-num { font-size: 2.1rem; }
.sd2-total-cur { font-size: 0.95rem; }
.sd2-title { font-size: 1.08rem; }
.sd2-next-chip { padding: 5px 9px; }
.sd2-next-label { font-size: 0.72rem; }
.sd2-next-sub { font-size: 0.6rem; max-width: 90px; }
}
/* ─── Checklist dashboard card (hero-first immersive) ───── */
.card.checklist-dash-card {
padding: 0 !important;
gap: 0 !important;
overflow: hidden;
border-radius: 16px;
position: relative;
display: flex;
flex-direction: column;
min-height: 360px;
height: 360px;
box-shadow: 0 14px 34px rgba(0,0,0,0.48);
transition: box-shadow 0.22s ease, border-color 0.22s ease;
}
.card.checklist-dash-card:hover {
transform: none !important;
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08);
}
.card.checklist-dash-card > .bento-glow-bg {
display: none !important;
}
.card.checklist-dash-card.checklist-sev-critical:hover {
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(251,146,60,0.45);
}
.card.checklist-dash-card.checklist-sev-warning:hover {
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(251,191,36,0.42);
}
.card.checklist-dash-card.checklist-sev-caution:hover {
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(39,102,96,0.46);
}
.card.checklist-dash-card.checklist-sev-safe:hover {
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(52,211,153,0.42);
}
.card.checklist-dash-card.checklist-sev-none:hover {
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(167,139,250,0.4);
}
.checklist-dash-shell {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
height: 100%;
}
.checklist-dash-hero {
position: relative;
height: 172px;
padding: 12px 14px 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
flex-shrink: 0;
}
.checklist-sev-critical .checklist-dash-hero { background: linear-gradient(135deg, #2e1608 0%, #5a2d12 60%, #7a4520 100%); animation: cldAlertPulse 3.5s ease-in-out infinite; }
.checklist-sev-warning .checklist-dash-hero { background: linear-gradient(135deg, #2a1e08 0%, #4d3810 60%, #6b5020 100%); }
.checklist-sev-caution .checklist-dash-hero { background: linear-gradient(135deg, #0a2825 0%, #1a4540 60%, #276660 100%); }
.checklist-sev-safe .checklist-dash-hero { background: linear-gradient(135deg, #0a2920 0%, #164030 60%, #1f5a45 100%); }
.checklist-sev-none .checklist-dash-hero { background: linear-gradient(135deg, #1f1f23 0%, #2e2e33 60%, #3d3d44 100%); }
@keyframes cldAlertPulse {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.15) saturate(1.1); }
}
@media (prefers-reduced-motion: reduce) {
.checklist-sev-critical .checklist-dash-hero { animation: none; }
}
.cld-hero-noise {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.07) 0, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(255,255,255,0.05) 0, transparent 45%);
pointer-events: none;
z-index: 1;
}
.cld-hero-overlay {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 75%),
linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.55) 80%, rgba(12,10,18,0.9) 100%);
pointer-events: none;
z-index: 1;
}
.cld-hero-top,
.cld-hero-center,
.cld-hero-bottom {
position: relative;
z-index: 2;
}
.cld-hero-glyphs {
position: absolute;
inset-inline-start: 15px;
inset-block-end: 18px;
display: flex;
flex-direction: column;
gap: 8px;
opacity: 0.24;
z-index: 2;
pointer-events: none;
}
.cld-glyph-row {
position: relative;
display: block;
width: 110px;
height: 12px;
}
.cld-glyph-row::before,
.cld-glyph-row::after {
content: "";
position: absolute;
}
.cld-glyph-row::before {
inset-inline-start: 0;
inset-block-start: 1px;
width: 10px;
height: 10px;
border-radius: 3px;
border: 1px solid rgba(255,255,255,0.26);
background: rgba(0,0,0,0.18);
}
.cld-glyph-row::after {
inset-inline-start: 18px;
inset-block-start: 4px;
width: 72px;
height: 2px;
border-radius: 999px;
background: rgba(255,255,255,0.2);
}
.cld-glyph-row-done::before {
border-color: rgba(167,243,208,0.55);
background: rgba(52,211,153,0.2);
}
.cld-glyph-row-done::after {
background: linear-gradient(90deg, rgba(167,243,208,0.55), rgba(255,255,255,0.12));
}
.cld-glyph-row-pending::before {
border-color: rgba(253,230,138,0.55);
background: rgba(251,191,36,0.18);
}
.cld-glyph-row-pending::after {
background: linear-gradient(90deg, rgba(251,191,36,0.45), rgba(255,255,255,0.1));
}
.cld-hero-top,
.cld-hero-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.cld-hero-center {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
text-align: center;
}
.cld-top-badge {
padding: 4px 10px;
border-radius: 999px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
font-size: 0.72rem;
line-height: 1.2;
}
.cld-type-badge {
font-family: var(--font-ar);
font-weight: 700;
}
.cld-sev-badge {
font-family: var(--font-ar);
font-weight: 700;
}
.cld-sev-critical { color: #fed7aa; border-color: rgba(251,146,60,0.5); }
.cld-sev-warning { color: #fde68a; border-color: rgba(251,191,36,0.5); }
.cld-sev-caution { color: #99f6e4; border-color: rgba(39,102,96,0.55); }
.cld-sev-safe { color: #a7f3d0; border-color: rgba(52,211,153,0.5); }
.cld-sev-none { color: #ddd6fe; border-color: rgba(167,139,250,0.45); }
.cld-metric-row {
display: flex;
align-items: baseline;
gap: 7px;
line-height: 1;
}
.cld-metric-num {
font-family: var(--font-ar);
font-size: 2.65rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 20px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.75), 0 0 1px rgba(0,0,0,0.5);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.cld-metric-unit {
font-family: var(--font-ar);
font-size: 1rem;
font-weight: 600;
color: rgba(255,255,255,0.95);
text-shadow: 0 2px 12px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.7), 0 0 1px rgba(0,0,0,0.45);
}
.cld-metric-tail {
font-family: var(--font-ar);
font-size: 0.76rem;
font-weight: 400;
color: rgba(255,255,255,0.9);
text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.7), 0 0 1px rgba(0,0,0,0.45);
}
.cld-progress-rail {
width: min(100%, 220px);
display: flex;
align-items: center;
gap: 4px;
margin-top: 3px;
}
.cld-progress-seg {
flex: 1 1 0;
min-width: 0;
height: 7px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.cld-progress-seg.is-done {
background: linear-gradient(180deg, rgba(52,211,153,0.95), rgba(22,163,74,0.78));
border-color: rgba(167,243,208,0.28);
box-shadow: 0 0 10px rgba(52,211,153,0.18);
}
.cld-progress-seg.is-pending {
background: linear-gradient(180deg, rgba(251,191,36,0.65), rgba(217,119,6,0.48));
border-color: rgba(251,191,36,0.2);
}
.cld-progress-empty {
display: block;
width: 100%;
height: 7px;
border-radius: 999px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.08);
}
.cld-title-wrap {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.cld-title {
margin: 0;
min-width: 0;
font-family: var(--font-ar);
font-size: 1.25rem;
font-weight: 800;
line-height: 1.2;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.6), 0 0 1px rgba(0,0,0,0.4);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cld-summary-chips {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.cld-summary-chip {
padding: 3px 7px;
border-radius: 999px;
background: rgba(0,0,0,0.36);
border: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.86);
font-family: var(--font-ar);
font-size: 0.7rem;
line-height: 1.2;
}
.cld-summary-chip strong {
font-family: var(--font-mono, monospace);
font-weight: 700;
margin-left: 2px;
}
.cld-summary-pending {
color: #fed7aa;
border-color: rgba(251,146,60,0.26);
}
.cld-summary-done {
color: #bbf7d0;
border-color: rgba(52,211,153,0.26);
}
.cld-summary-empty {
color: rgba(255,255,255,0.62);
}
.cld-count-chip {
padding: 4px 10px;
border-radius: 999px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.18);
color: rgba(255,255,255,0.95);
font-family: var(--font-ar);
font-size: 0.72rem;
white-space: nowrap;
flex-shrink: 0;
}
.cld-count-chip strong {
color: #fff;
font-family: var(--font-mono, monospace);
font-weight: 700;
margin-left: 2px;
}
.checklist-dash-body {
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 5px;
flex: 1 1 auto;
min-height: 0;
max-height: none;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.checklist-dash-body::-webkit-scrollbar { width: 6px; }
.checklist-dash-body::-webkit-scrollbar-track { background: transparent; }
.checklist-dash-body::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.1);
border-radius: 3px;
}
.cld-row {
min-height: 42px;
padding: 7px 10px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 9px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
cursor: pointer;
user-select: none;
transition: background 0.15s, border-color 0.15s, transform 0.08s;
}
.cld-row:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.12);
}
.cld-row:active { transform: scale(0.985); }
.cld-row:focus-visible {
outline: 2px solid rgba(139,92,246,0.55);
outline-offset: -2px;
}
.cld-row.row-urgent {
border-inline-start: 3px solid rgba(251,146,60,0.6);
}
.cld-row-main {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
flex: 1;
}
.cld-row-order {
min-width: 34px;
height: 22px;
padding: 0 8px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.66);
font-family: var(--font-mono, monospace);
font-size: 0.72rem;
flex-shrink: 0;
}
.cld-row-pending .cld-row-order {
color: #fed7aa;
border-color: rgba(251,146,60,0.22);
background: rgba(251,146,60,0.09);
}
.cld-row-done .cld-row-order {
color: #bbf7d0;
border-color: rgba(52,211,153,0.2);
background: rgba(52,211,153,0.08);
}
.cld-row-side {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.cld-row-check {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.84);
font-family: var(--font-mono, monospace);
font-size: 0.7rem;
flex-shrink: 0;
}
.cld-row-pending .cld-row-check {
color: #fed7aa;
background: rgba(251,146,60,0.14);
}
.cld-row-done .cld-row-check {
color: #bbf7d0;
background: rgba(52,211,153,0.16);
}
.cld-row-text {
min-width: 0;
flex: 1;
font-family: var(--font-ar);
font-size: 0.81rem;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cld-row-empty-label {
color: rgba(255,255,255,0.45);
font-style: normal;
}
.cld-row-done .cld-row-text {
color: rgba(255,255,255,0.5);
text-decoration: line-through;
}
.cld-row-state {
padding: 2px 8px;
border-radius: 999px;
border: 1px solid transparent;
white-space: nowrap;
flex-shrink: 0;
font-family: var(--font-ar);
font-size: 0.66rem;
font-weight: 600;
}
.cld-row-state-pending {
background: rgba(251,146,60,0.14);
border-color: rgba(251,146,60,0.32);
color: #fed7aa;
}
.cld-row-state-done {
background: rgba(52,211,153,0.14);
border-color: rgba(52,211,153,0.3);
color: #bbf7d0;
}
.cld-empty {
padding: 16px;
text-align: center;
color: var(--muted);
font-family: var(--font-ar);
font-size: 0.82rem;
}
.checklist-dash-foot {
min-height: 52px;
padding: 8px 14px 10px;
border-top: 1px dashed rgba(255,255,255,0.08);
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.cld-foot-time {
font-family: var(--font-mono, monospace);
font-size: 0.72rem;
color: var(--muted);
opacity: 0.8;
}
.cld-foot-actions {
display: flex;
align-items: center;
gap: 6px;
direction: ltr;
}
.cld-foot-btn {
padding: 5px 11px;
background: transparent;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 999px;
color: rgba(255,255,255,0.88);
font-family: var(--font-ar);
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cld-foot-btn:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.18);
color: #fff;
}
.card.checklist-dash-card .card-actions {
position: absolute;
top: 10px;
left: 10px;
z-index: 4;
display: flex;
gap: 4px;
opacity: 0;
transition: opacity 0.18s;
}
.card.checklist-dash-card:hover .card-actions { opacity: 1; }
.card.checklist-dash-card .card-actions button {
background: rgba(0,0,0,0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
border-radius: 8px;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
cursor: pointer;
}
.card.checklist-dash-card .card-actions .card-delete:hover {
background: rgba(239,68,68,0.6);
}
.card.checklist-dash-card .card-actions .card-edit:hover {
background: rgba(139,92,246,0.7);
}
@media (max-width: 640px) {
.card.checklist-dash-card {
min-height: 340px;
height: 340px;
}
.checklist-dash-hero {
height: 145px;
padding: 11px 13px;
}
.cld-metric-num { font-size: 2.2rem; }
.cld-metric-unit { font-size: 0.88rem; }
.cld-title { font-size: 1.1rem; }
.cld-hero-glyphs { inset-inline-start: 13px; inset-block-end: 16px; transform: scale(0.9); transform-origin: right bottom; }
.cld-progress-rail { width: min(100%, 210px); }
.checklist-dash-body { max-height: 125px; }
}
/* ─── Vehicle dashboard card (service / expiry hero) ────── */
.card.vehicle-dash-card {
padding: 0 !important;
overflow: hidden;
border-radius: 16px;
position: relative;
display: flex !important;
flex-direction: column;
height: 320px !important;
min-height: 320px !important;
box-shadow: 0 14px 34px rgba(0,0,0,0.48);
transition: box-shadow 0.22s ease, border-color 0.22s ease;
}
.card.vehicle-dash-card:hover {
transform: none !important;
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08);
}
.card.vehicle-dash-card.vehicle-sev-expired:hover {
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(239,68,68,0.42);
}
.card.vehicle-dash-card.vehicle-sev-critical:hover {
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(251,146,60,0.42);
}
.card.vehicle-dash-card.vehicle-sev-warning:hover {
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(251,191,36,0.42);
}
.card.vehicle-dash-card.vehicle-sev-caution:hover,
.card.vehicle-dash-card.vehicle-sev-safe:hover {
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(39,102,96,0.44);
}
.card.vehicle-dash-card.vehicle-sev-none:hover {
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(167,139,250,0.35);
}
.card.vehicle-dash-card > .bento-glow-bg { display: none !important; }
.vehicle-dash-shell { display:flex; flex-direction:column; flex:1; min-height:0; height:100%; }
.vehicle-dash-hero {
position: relative;
height: 150px;
padding: 12px 14px 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
flex-shrink: 0;
}
.vehicle-sev-expired .vehicle-dash-hero { background: linear-gradient(135deg, #2a0808 0%, #5a1414 60%, #7a2525 100%); animation: vdAlertPulse 3.5s ease-in-out infinite; }
.vehicle-sev-critical .vehicle-dash-hero { background: linear-gradient(135deg, #2e1608 0%, #5a2d12 60%, #7a4520 100%); }
.vehicle-sev-warning .vehicle-dash-hero { background: linear-gradient(135deg, #2a1e08 0%, #4d3810 60%, #6b5020 100%); }
.vehicle-sev-caution .vehicle-dash-hero { background: linear-gradient(135deg, #0a2825 0%, #1a4540 60%, #276660 100%); }
.vehicle-sev-safe .vehicle-dash-hero { background: linear-gradient(135deg, #0a2920 0%, #164030 60%, #1f5a45 100%); }
.vehicle-sev-none .vehicle-dash-hero { background: linear-gradient(135deg, #1f1f23 0%, #2e2e33 60%, #3d3d44 100%); }
@keyframes vdAlertPulse {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.12) saturate(1.08); }
}
@media (prefers-reduced-motion: reduce) {
.vehicle-sev-expired .vehicle-dash-hero { animation: none; }
}
.vd-hero-noise,
.vd-hero-overlay { position: absolute; inset: 0; }
.vd-hero-noise {
background-image:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.07) 0, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(255,255,255,0.05) 0, transparent 45%);
pointer-events: none;
z-index: 1;
}
.vd-hero-art {
position: absolute;
top: 50%;
left: 14px;
transform: translateY(-50%) rotate(-8deg);
font-size: 5rem;
opacity: 0.22;
filter: drop-shadow(0 4px 18px rgba(0,0,0,0.55));
pointer-events: none;
z-index: 0;
line-height: 1;
}
/* ─── Vehicle odometer + fuel gauge widget ────────────── */
.vd-odometer-widget {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 16px;
padding: 14px 16px;
margin: 6px 4px 10px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(16,185,129,.07), rgba(59,130,246,.04));
border: 1px solid rgba(255,255,255,.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 10px rgba(0,0,0,.15);
}
.vd-odom-label {
grid-column: 1 / -1;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
font-family: var(--font-mono, monospace);
margin-bottom: -4px;
}
.vd-odom-digits {
display: inline-flex;
gap: 3px;
align-items: center;
font-family: var(--font-mono, monospace);
}
.vd-odom-digit {
position: relative;
display: inline-block;
width: 1.1em;
height: 1em;
font-size: 2.4rem;
line-height: 1;
overflow: hidden;
background: linear-gradient(180deg, #0f172a, #1e293b);
border: 1px solid rgba(255,255,255,.1);
border-radius: 4px;
padding: 0 .18em;
color: #f0f9ff;
text-shadow: 0 0 8px rgba(255,255,255,.25);
vertical-align: middle;
box-shadow: inset 0 0 8px rgba(0,0,0,.6);
}
.vd-odom-digit::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,.15) 0%, transparent 45%, transparent 55%, rgba(0,0,0,.2) 100%);
pointer-events: none;
z-index: 2;
}
.vd-odom-reel {
display: inline-block;
line-height: 1em;
transition: transform .9s cubic-bezier(.45,.05,.15,1);
animation: vdOdomRoll 1.2s cubic-bezier(.45,.05,.15,1) both;
animation-delay: var(--digit-delay, 0ms);
}
@keyframes vdOdomRoll {
0% { transform: translateY(0); }
100% { /* applied via inline style */ }
}
.vd-odom-unit {
font-size: 0.85rem;
color: var(--muted);
font-family: var(--font-ar);
margin-right: 6px;
}
.vd-gauge {
position: relative;
width: 88px;
}
.vd-gauge-svg {
display: block;
width: 100%;
height: auto;
}
.vd-gauge-arc {
transition: stroke-dashoffset 1s ease-out;
}
.vd-gauge-needle {
transform-origin: 50px 50px;
transition: transform .9s cubic-bezier(.6,-0.2,.4,1.2);
animation: vdNeedleSwing 1.4s cubic-bezier(.6,-0.2,.4,1.2);
}
@keyframes vdNeedleSwing {
0% { transform: rotate(-90deg); }
60% { transform: rotate(var(--swing-to, 60deg)); }
100% { /* applied via inline transform */ }
}
.vd-gauge-label {
text-align: center;
margin-top: 2px;
}
.vd-gauge-pct {
display: block;
font-family: var(--font-mono, monospace);
font-size: 1.05rem;
font-weight: 700;
line-height: 1;
}
.vd-gauge-txt {
display: block;
font-size: 0.62rem;
color: var(--muted);
letter-spacing: 0.05em;
margin-top: 2px;
}
.vd-gauge-safe .vd-gauge-pct { color: #10b981; }
.vd-gauge-soon .vd-gauge-pct { color: #f59e0b; }
.vd-gauge-urgent .vd-gauge-pct { color: var(--danger); }
@media (prefers-reduced-motion: reduce) {
.vd-odom-reel, .vd-gauge-needle, .vd-gauge-arc { animation: none; transition: none; }
}
.vehicle-brand-select {
width: 100%;
padding: 10px 12px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
color: var(--text);
font-family: var(--font-ar);
font-size: 0.9rem;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: left 12px center;
padding-left: 32px;
}
.vehicle-brand-select:focus { outline: none; border-color: rgba(139,92,246,0.5); background: rgba(255,255,255,0.06); }
.vd-brand-badge {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
z-index: 2;
pointer-events: none;
font-family: var(--font-mono, monospace);
font-size: 1rem;
font-weight: 900;
letter-spacing: 0.08em;
color: #ffffff;
background: var(--brand-color, rgba(139,92,246,0.9));
padding: 6px 14px;
border-radius: 999px;
border: 1.5px solid rgba(255,255,255,0.25);
box-shadow: 0 4px 14px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.3);
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
backdrop-filter: blur(4px);
}
@media (max-width: 640px) {
.vd-brand-badge { font-size: 0.85rem; padding: 5px 11px; right: 12px; }
}
.vd-hero-overlay {
background:
radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 75%),
linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.55) 80%, rgba(12,10,18,0.9) 100%);
pointer-events: none;
z-index: 1;
}
.vd-hero-top,
.vd-hero-center,
.vd-hero-bottom {
position: relative;
z-index: 2;
}
.vd-hero-top,
.vd-hero-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.vd-hero-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
text-align: center;
}
.vd-top-badge {
padding: 4px 10px;
border-radius: 999px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
font-size: 0.72rem;
line-height: 1.2;
}
.vd-type-badge { font-family: var(--font-ar); font-weight: 700; }
.vd-sev-badge { font-family: var(--font-ar); font-weight: 700; }
.vd-sev-expired { color: #fecaca; border-color: rgba(239,68,68,0.5); }
.vd-sev-critical { color: #fed7aa; border-color: rgba(251,146,60,0.5); }
.vd-sev-warning { color: #fde68a; border-color: rgba(251,191,36,0.5); }
.vd-sev-caution { color: #99f6e4; border-color: rgba(45,212,191,0.46); }
.vd-sev-safe { color: #a7f3d0; border-color: rgba(52,211,153,0.5); }
.vd-sev-none { color: #ddd6fe; border-color: rgba(167,139,250,0.45); }
.vd-metric-row {
display: flex;
align-items: baseline;
gap: 7px;
line-height: 1;
}
.vd-metric-num {
font-family: var(--font-mono, monospace);
font-size: 2.8rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 20px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.75), 0 0 1px rgba(0,0,0,0.5);
letter-spacing: -0.03em;
}
.vd-metric-unit {
font-family: var(--font-ar);
font-size: 1rem;
font-weight: 600;
color: rgba(255,255,255,0.95);
text-shadow: 0 2px 12px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.7), 0 0 1px rgba(0,0,0,0.45);
}
.vd-metric-tail {
font-family: var(--font-ar);
font-size: 0.78rem;
color: rgba(255,255,255,0.9);
text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.7), 0 0 1px rgba(0,0,0,0.45);
}
.vd-title-wrap { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.vd-title {
margin:0;
font-family: var(--font-ar);
font-size: 1.25rem;
font-weight: 800;
line-height: 1.2;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.6), 0 0 1px rgba(0,0,0,0.4);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.vd-title mark { background: transparent; color: inherit; box-shadow: none; padding: 0; }
.vd-hero-sub {
font-family: var(--font-ar);
font-size: 0.74rem;
color: rgba(255,255,255,0.78);
text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.7), 0 0 1px rgba(0,0,0,0.45);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vd-count-chip {
padding: 4px 10px;
border-radius: 999px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.18);
color: rgba(255,255,255,0.95);
font-family: var(--font-ar);
font-size: 0.72rem;
white-space: nowrap;
flex-shrink: 0;
}
.vd-count-chip strong {
font-family: var(--font-mono, monospace);
font-weight: 700;
color: #fff;
margin-left: 2px;
}
.vehicle-dash-body {
padding: 16px 12px 8px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1 1 auto;
min-height: 0;
max-height: none;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.12) transparent;
border-top: 1px solid rgba(255,255,255,0.06);
}
.vehicle-dash-body::-webkit-scrollbar { width: 6px; }
.vehicle-dash-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.vd-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
min-height: 38px;
padding: 6px 10px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 10px;
transition: background 0.15s, border-color 0.15s;
}
.vd-row:hover {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.1);
}
.vd-row-expired { border-inline-start: 3px solid rgba(239,68,68,0.55); }
.vd-row-critical { border-inline-start: 3px solid rgba(251,146,60,0.55); }
.vd-row-warning { border-inline-start: 3px solid rgba(251,191,36,0.55); }
.vd-row-caution { border-inline-start: 3px solid rgba(45,212,191,0.55); }
.vd-row-safe { border-inline-start: 3px solid rgba(52,211,153,0.55); }
.vd-row-none { border-inline-start: 3px solid rgba(167,139,250,0.45); }
.vd-row-main { min-width:0; flex:1; display:flex; align-items:flex-start; gap:8px; }
.vd-row-order {
min-width: 34px;
height: 22px;
padding: 0 8px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.66);
font-family: var(--font-mono, monospace);
font-size: 0.72rem;
flex-shrink: 0;
}
.vd-row-copy { min-width:0; display:flex; flex-direction:column; gap:3px; flex:1; }
.vd-row-title {
font-family: var(--font-ar);
font-size: 0.84rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vd-row-meta {
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.vd-row-meta-sep {
color: rgba(255,255,255,0.32);
font-size: 0.68rem;
line-height: 1;
}
.vd-row-date {
font-family: var(--font-mono, monospace);
font-size: 0.68rem;
color: var(--muted);
opacity: 0.8;
white-space: nowrap;
}
.vd-row-side {
display:flex;
align-items:center;
justify-content:flex-end;
gap:7px;
flex-shrink:0;
padding-top: 2px;
}
.vd-row-cat {
font-family: var(--font-ar);
font-size: 0.7rem;
color: rgba(255,255,255,0.78);
white-space: nowrap;
max-width: 100%;
}
.vd-row-badge {
font-family: var(--font-ar);
font-size: 0.7rem;
font-weight: 600;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid transparent;
white-space: nowrap;
}
.vd-badge-expired { background: rgba(220,38,38,0.18); border-color: rgba(220,38,38,0.4); color: #fca5a5; }
.vd-badge-critical { background: rgba(251,146,60,0.18); border-color: rgba(251,146,60,0.4); color: #fed7aa; }
.vd-badge-warning { background: rgba(251,191,36,0.15); border-color: rgba(251,191,36,0.35); color: #fde68a; }
.vd-badge-caution { background: rgba(45,212,191,0.15); border-color: rgba(45,212,191,0.35); color: #99f6e4; }
.vd-badge-safe { background: rgba(52,211,153,0.15); border-color: rgba(52,211,153,0.35); color: #bbf7d0; }
.vd-badge-none { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.3); color: #ddd6fe; }
.vd-empty {
padding: 16px;
text-align: center;
color: var(--muted);
font-family: var(--font-ar);
font-size: 0.82rem;
}
.vehicle-dash-foot {
min-height: 48px;
padding: 8px 14px;
border-top: 1px dashed rgba(255,255,255,0.08);
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.vd-foot-time {
font-family: var(--font-mono, monospace);
font-size: 0.72rem;
color: var(--muted);
opacity: 0.8;
}
.vd-foot-actions { display:flex; align-items:center; gap:6px; }
.vd-foot-btn {
padding: 5px 11px;
background: transparent;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 999px;
color: rgba(255,255,255,0.88);
font-family: var(--font-ar);
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.vd-foot-btn:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.18);
color: #fff;
}
.card.vehicle-dash-card .card-actions {
position: absolute;
top: 10px;
left: 10px;
z-index: 4;
display: flex;
gap: 4px;
opacity: 0;
transition: opacity 0.18s;
}
.card.vehicle-dash-card:hover .card-actions { opacity: 1; }
.card.vehicle-dash-card .card-actions button {
background: rgba(0,0,0,0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
border-radius: 8px;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
cursor: pointer;
}
.card.vehicle-dash-card .card-actions .card-delete:hover { background: rgba(239,68,68,0.6); }
.card.vehicle-dash-card .card-actions .card-edit:hover { background: rgba(139,92,246,0.7); }
/* ─── Medicine dashboard card (therapy / refill hero) ───── */
.card.medicine-dash-card {
padding: 0 !important;
overflow: hidden;
border-radius: 16px;
position: relative;
display: flex !important;
flex-direction: column;
height: 320px !important;
min-height: 320px !important;
box-shadow: 0 14px 34px rgba(0,0,0,0.48);
transition: box-shadow 0.22s ease, border-color 0.22s ease;
}
.card.medicine-dash-card:hover {
transform: none !important;
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08);
}
.card.medicine-dash-card.medicine-sev-expired:hover {
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(239,68,68,0.42);
}
.card.medicine-dash-card.medicine-sev-critical:hover {
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(251,146,60,0.42);
}
.card.medicine-dash-card.medicine-sev-warning:hover {
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(251,191,36,0.42);
}
.card.medicine-dash-card.medicine-sev-caution:hover,
.card.medicine-dash-card.medicine-sev-safe:hover {
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(39,102,96,0.44);
}
.card.medicine-dash-card.medicine-sev-none:hover {
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(167,139,250,0.35);
}
.card.medicine-dash-card > .bento-glow-bg { display: none !important; }
.medicine-dash-shell { display:flex; flex-direction:column; flex:1; min-height:0; height:100%; }
.medicine-dash-hero {
position: relative;
height: 150px;
padding: 12px 14px 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
flex-shrink: 0;
}
.medicine-sev-expired .medicine-dash-hero { background: linear-gradient(135deg, #2a0808 0%, #5a1414 60%, #7a2525 100%); animation: medAlertPulse 3.5s ease-in-out infinite; }
.medicine-sev-critical .medicine-dash-hero { background: linear-gradient(135deg, #2e1608 0%, #5a2d12 60%, #7a4520 100%); }
.medicine-sev-warning .medicine-dash-hero { background: linear-gradient(135deg, #2a1e08 0%, #4d3810 60%, #6b5020 100%); }
.medicine-sev-caution .medicine-dash-hero { background: linear-gradient(135deg, #0a2825 0%, #1a4540 60%, #276660 100%); }
.medicine-sev-safe .medicine-dash-hero { background: linear-gradient(135deg, #0a2920 0%, #164030 60%, #1f5a45 100%); }
.medicine-sev-none .medicine-dash-hero { background: linear-gradient(135deg, #1f1f23 0%, #2e2e33 60%, #3d3d44 100%); }
@keyframes medAlertPulse {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.12) saturate(1.08); }
}
@media (prefers-reduced-motion: reduce) {
.medicine-sev-expired .medicine-dash-hero { animation: none; }
}
.med-hero-noise {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 18% 26%, rgba(255,255,255,0.08) 0, transparent 40%),
radial-gradient(circle at 82% 72%, rgba(255,255,255,0.05) 0, transparent 46%);
pointer-events: none;
z-index: 1;
}
.med-hero-art {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%) rotate(-8deg);
z-index: 0;
pointer-events: none;
}
.med-art-pill {
display: inline-flex;
font-size: 4.4rem;
opacity: 0.24;
filter: drop-shadow(0 4px 16px rgba(0,0,0,0.55));
}
.med-art-pill-alt {
position: absolute;
left: 40px;
top: -4px;
font-size: 1.8rem;
opacity: 0.18;
}
/* Animated pill capsules (svg-like via pseudo elements) */
.med-art-capsule {
position: absolute;
width: 34px;
height: 14px;
border-radius: 999px;
overflow: hidden;
opacity: 0.32;
filter: drop-shadow(0 3px 8px rgba(0,0,0,.4));
animation: medCapFloat 3.6s ease-in-out infinite;
}
.med-art-capsule::before,
.med-art-capsule::after {
content: '';
position: absolute;
inset: 0;
width: 50%;
}
.med-art-capsule::before { background: linear-gradient(180deg, #fef3c7, #fbbf24); }
.med-art-capsule::after { background: linear-gradient(180deg, #dbeafe, #60a5fa); left: 50%; }
.med-cap-1 { left: 58px; top: 4px; transform: rotate(18deg); animation-delay: 0s; }
.med-cap-2 { left: 78px; top: 38px; transform: rotate(-12deg); animation-delay: 1s;
width: 28px; height: 12px; opacity: 0.22;
}
.med-cap-2::before { background: linear-gradient(180deg, #fce7f3, #f472b6); }
.med-cap-2::after { background: linear-gradient(180deg, #e0e7ff, #818cf8); }
.med-cap-3 { left: 10px; top: 44px; transform: rotate(32deg); animation-delay: 2s;
width: 24px; height: 10px; opacity: 0.18;
}
.med-cap-3::before { background: linear-gradient(180deg, #d1fae5, #34d399); }
.med-cap-3::after { background: linear-gradient(180deg, #fef3c7, #fbbf24); }
.med-art-dot {
position: absolute;
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(255,255,255,.3);
animation: medDotBlink 2.8s ease-in-out infinite;
}
.med-dot-1 { left: 98px; top: 12px; animation-delay: .5s; }
.med-dot-2 { left: 48px; top: 54px; animation-delay: 1.5s; background: rgba(245,158,11,.4); }
.med-dot-3 { left: 88px; top: 56px; animation-delay: 2s; background: rgba(96,165,250,.4); }
@keyframes medCapFloat {
0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
50% { transform: translateY(-4px) rotate(calc(var(--r, 0deg) + 8deg)); }
}
.med-cap-1 { --r: 18deg; }
.med-cap-2 { --r: -12deg; }
.med-cap-3 { --r: 32deg; }
@keyframes medDotBlink {
0%, 100% { opacity: .2; transform: scale(1); }
50% { opacity: .7; transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) {
.med-art-capsule, .med-art-dot { animation: none; }
}
/* Pill inventory strip (at top of body) */
.med-pills-strip {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding: 10px 12px;
margin: 6px 4px 8px;
border-radius: 12px;
background: linear-gradient(180deg, rgba(236,72,153,.06), rgba(236,72,153,.02));
border: 1px solid rgba(236,72,153,.12);
}
.med-pill-capsule {
position: relative;
display: inline-block;
width: 26px;
height: 10px;
border-radius: 999px;
background: rgba(255,255,255,.08);
overflow: hidden;
cursor: default;
transition: transform .2s ease;
}
.med-pill-capsule:hover { transform: scale(1.3); }
.med-pill-capsule::after {
content: '';
position: absolute;
inset: 0;
width: var(--pill-fill, 50%);
border-radius: 999px;
}
.med-cap-safe::after { background: linear-gradient(90deg, #10b981, #34d399); }
.med-cap-soon::after { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.med-cap-urgent::after { background: linear-gradient(90deg, #ef4444, #f87171); animation: medPillPulse 1.2s ease-in-out infinite; }
.med-cap-overdue::after { background: linear-gradient(90deg, #dc2626, #ef4444); animation: medPillPulse 0.8s ease-in-out infinite; }
.med-cap-none::after { background: linear-gradient(90deg, #64748b, #94a3b8); }
@keyframes medPillPulse {
0%, 100% { opacity: 1; }
50% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
.med-cap-urgent::after, .med-cap-overdue::after { animation: none; }
}
/* Urgency bar inside each row (uses --med-urgency) */
.med-row {
position: relative;
overflow: hidden;
}
.med-row::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: var(--med-urgency, 0%);
height: 2px;
background: linear-gradient(90deg, transparent, currentColor);
opacity: .4;
transition: width .4s ease;
pointer-events: none;
}
.med-row-overdue::before { color: var(--danger); }
.med-row-urgent::before { color: #f87171; }
.med-row-soon::before { color: #f59e0b; }
.med-row-safe::before { color: #10b981; }
.med-row-none::before { color: #64748b; }
.med-hero-overlay {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 75%),
linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.55) 80%, rgba(12,10,18,0.9) 100%);
pointer-events: none;
z-index: 1;
}
.med-hero-top,
.med-hero-center,
.med-hero-bottom { position: relative; z-index: 2; }
.med-hero-top,
.med-hero-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.med-hero-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
text-align: center;
}
.med-top-badge {
padding: 4px 10px;
border-radius: 999px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
font-size: 0.72rem;
line-height: 1.2;
}
.med-type-badge { font-family: var(--font-ar); font-weight: 700; }
.med-sev-badge { font-family: var(--font-ar); font-weight: 700; }
.med-sev-expired { color: #fecaca; border-color: rgba(239,68,68,0.5); }
.med-sev-critical { color: #fed7aa; border-color: rgba(251,146,60,0.5); }
.med-sev-warning { color: #fde68a; border-color: rgba(251,191,36,0.5); }
.med-sev-caution { color: #99f6e4; border-color: rgba(45,212,191,0.46); }
.med-sev-safe { color: #a7f3d0; border-color: rgba(52,211,153,0.5); }
.med-sev-none { color: #ddd6fe; border-color: rgba(167,139,250,0.45); }
.med-metric-row {
display: flex;
align-items: baseline;
gap: 7px;
line-height: 1;
}
.med-metric-num {
font-family: var(--font-mono, monospace);
font-size: 2.8rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 20px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.75), 0 0 1px rgba(0,0,0,0.5);
letter-spacing: -0.03em;
}
.med-metric-unit {
font-family: var(--font-ar);
font-size: 1rem;
font-weight: 600;
color: rgba(255,255,255,0.95);
text-shadow: 0 2px 12px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.7), 0 0 1px rgba(0,0,0,0.45);
}
.med-metric-tail {
font-family: var(--font-ar);
font-size: 0.78rem;
color: rgba(255,255,255,0.9);
text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.7), 0 0 1px rgba(0,0,0,0.45);
}
.med-title-wrap { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.med-title {
margin:0;
font-family: var(--font-ar);
font-size: 1.25rem;
font-weight: 800;
line-height: 1.2;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.6), 0 0 1px rgba(0,0,0,0.4);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.med-title mark { background: transparent; color: inherit; box-shadow: none; padding: 0; }
.med-hero-sub {
font-family: var(--font-ar);
font-size: 0.74rem;
color: rgba(255,255,255,0.78);
text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.7), 0 0 1px rgba(0,0,0,0.45);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.med-count-chip {
padding: 4px 10px;
border-radius: 999px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.18);
color: rgba(255,255,255,0.95);
font-family: var(--font-ar);
font-size: 0.72rem;
white-space: nowrap;
flex-shrink: 0;
}
.medicine-dash-body {
padding: 8px 12px;
display: flex;
flex-direction: column;
gap: 5px;
flex: 1 1 auto;
min-height: 0;
max-height: none;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.medicine-dash-body::-webkit-scrollbar { width: 6px; }
.medicine-dash-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.medicine-dose-foot {
min-height: 54px;
padding: 8px 12px;
border-top: 1px solid rgba(255,255,255,0.07);
background:
radial-gradient(circle at 90% 0%, rgba(16,185,129,0.14), transparent 40%),
linear-gradient(180deg, rgba(7,11,18,0.82), rgba(5,8,12,0.96));
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-shrink: 0;
}
.medicine-dose-foot.is-done {
background:
radial-gradient(circle at 92% 0%, rgba(34,197,94,0.18), transparent 42%),
linear-gradient(180deg, rgba(6,25,15,0.88), rgba(5,12,8,0.98));
}
.medicine-dose-meta {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.medicine-dose-status {
font-family: var(--font-ar);
font-size: 0.78rem;
font-weight: 800;
color: rgba(236,253,245,0.94);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.medicine-dose-update {
font-family: var(--font-ar);
font-size: 0.68rem;
color: rgba(148,163,184,0.78);
white-space: nowrap;
}
.medicine-dose-actions {
display: flex;
align-items: center;
gap: 7px;
flex-shrink: 0;
}
.medicine-dose-btn,
.medicine-dose-details {
height: 32px;
border-radius: 999px;
padding: 0 13px;
font-family: var(--font-ar);
font-size: 0.76rem;
font-weight: 900;
cursor: pointer;
transition: transform .12s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.medicine-dose-btn {
border: 1px solid rgba(74,222,128,0.45);
color: #052e16;
background: linear-gradient(135deg, #bbf7d0, #22c55e);
box-shadow: 0 8px 20px rgba(34,197,94,0.22);
}
.medicine-dose-btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(34,197,94,0.32);
}
.medicine-dose-btn.is-done {
color: #dcfce7;
background: rgba(34,197,94,0.17);
border-color: rgba(74,222,128,0.30);
box-shadow: none;
cursor: default;
}
.medicine-dose-details {
border: 1px solid rgba(148,163,184,0.20);
color: rgba(226,232,240,0.88);
background: rgba(15,23,42,0.72);
}
.medicine-dose-details:hover {
border-color: rgba(226,232,240,0.28);
background: rgba(30,41,59,0.92);
}
.medicine-dose-btn:active,
.medicine-dose-details:active { transform: scale(0.97); }
.med-dose-panel {
margin: 0 12px 6px;
padding: 7px 9px;
border-radius: 12px;
border: 1px solid rgba(16,185,129,0.18);
background:
radial-gradient(circle at 95% 0%, rgba(16,185,129,0.18), transparent 42%),
linear-gradient(135deg, rgba(6,78,59,0.34), rgba(15,23,42,0.72));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 16px rgba(0,0,0,0.18);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-shrink: 0;
}
.med-dose-panel.is-done {
border-color: rgba(34,197,94,0.30);
background:
radial-gradient(circle at 96% 8%, rgba(34,197,94,0.22), transparent 42%),
linear-gradient(135deg, rgba(20,83,45,0.42), rgba(5,46,22,0.52));
}
.med-dose-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.med-dose-k {
font-family: var(--font-ar);
font-size: 0.72rem;
font-weight: 800;
color: rgba(236,253,245,0.96);
}
.med-dose-v {
font-family: var(--font-ar);
font-size: 0.64rem;
color: rgba(209,250,229,0.70);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.med-dose-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.med-dose-btn,
.med-dose-secondary {
height: 28px;
border-radius: 999px;
padding: 0 10px;
font-family: var(--font-ar);
font-size: 0.72rem;
font-weight: 800;
cursor: pointer;
transition: transform .12s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.med-dose-btn {
border: 0;
color: #052e16;
background: linear-gradient(135deg, #6ee7b7, #22c55e);
box-shadow: 0 8px 18px rgba(34,197,94,0.24);
}
.med-dose-btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(34,197,94,0.34);
}
.med-dose-btn:active,
.med-dose-secondary:active { transform: scale(0.97); }
.med-dose-btn:disabled {
cursor: default;
transform: none;
color: #dcfce7;
background: rgba(34,197,94,0.18);
border: 1px solid rgba(34,197,94,0.28);
box-shadow: none;
}
.med-dose-secondary {
border: 1px solid rgba(255,255,255,0.12);
color: rgba(226,232,240,0.86);
background: rgba(15,23,42,0.46);
}
.med-dose-secondary:hover {
border-color: rgba(255,255,255,0.24);
background: rgba(255,255,255,0.07);
color: #fff;
}
.med-dose-empty-action {
border-color: rgba(148,163,184,0.16);
background: linear-gradient(135deg, rgba(15,23,42,0.70), rgba(30,41,59,0.46));
}
.med-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 38px;
padding: 6px 10px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 10px;
transition: background 0.15s, border-color 0.15s;
}
.med-row:hover {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.1);
}
.med-row-expired { border-inline-start: 3px solid rgba(239,68,68,0.55); }
.med-row-critical { border-inline-start: 3px solid rgba(251,146,60,0.55); }
.med-row-warning { border-inline-start: 3px solid rgba(251,191,36,0.55); }
.med-row-caution { border-inline-start: 3px solid rgba(45,212,191,0.55); }
.med-row-safe { border-inline-start: 3px solid rgba(52,211,153,0.55); }
.med-row-none { border-inline-start: 3px solid rgba(167,139,250,0.45); }
.med-row-main { min-width:0; flex:1; display:flex; align-items:center; gap:8px; }
.med-row-index {
min-width: 34px;
height: 22px;
padding: 0 8px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.66);
font-family: var(--font-mono, monospace);
font-size: 0.72rem;
flex-shrink: 0;
}
.med-row-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.med-row-name {
font-family: var(--font-ar);
font-size: 0.84rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.med-row-dose {
font-family: var(--font-ar);
font-size: 0.68rem;
color: rgba(255,255,255,0.68);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.med-row-side { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.med-row-date {
font-family: var(--font-mono, monospace);
font-size: 0.68rem;
color: var(--muted);
opacity: 0.8;
}
.med-row-badge {
font-family: var(--font-ar);
font-size: 0.7rem;
font-weight: 600;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid transparent;
white-space: nowrap;
}
.med-badge-expired { background: rgba(220,38,38,0.18); border-color: rgba(220,38,38,0.4); color: #fca5a5; }
.med-badge-critical { background: rgba(251,146,60,0.18); border-color: rgba(251,146,60,0.4); color: #fed7aa; }
.med-badge-warning { background: rgba(251,191,36,0.15); border-color: rgba(251,191,36,0.35); color: #fde68a; }
.med-badge-caution { background: rgba(45,212,191,0.15); border-color: rgba(45,212,191,0.35); color: #99f6e4; }
.med-badge-safe { background: rgba(52,211,153,0.15); border-color: rgba(52,211,153,0.35); color: #bbf7d0; }
.med-badge-none { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.3); color: #ddd6fe; }
.med-empty {
padding: 16px;
text-align: center;
color: var(--muted);
font-family: var(--font-ar);
font-size: 0.82rem;
}
.medicine-dash-foot {
min-height: 48px;
padding: 8px 14px;
border-top: 1px dashed rgba(255,255,255,0.08);
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.med-foot-time {
font-family: var(--font-mono, monospace);
font-size: 0.72rem;
color: var(--muted);
opacity: 0.8;
}
.med-foot-actions { display:flex; align-items:center; gap:6px; }
.med-foot-btn {
padding: 5px 11px;
background: transparent;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 999px;
color: rgba(255,255,255,0.88);
font-family: var(--font-ar);
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.med-foot-btn:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.18);
color: #fff;
}
.card.medicine-dash-card .card-actions {
position: absolute;
top: 10px;
left: 10px;
z-index: 4;
display: flex;
gap: 4px;
opacity: 0;
transition: opacity 0.18s;
}
.card.medicine-dash-card:hover .card-actions { opacity: 1; }
.card.medicine-dash-card .card-actions button {
background: rgba(0,0,0,0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
border-radius: 8px;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
cursor: pointer;
}
.card.medicine-dash-card .card-actions .card-delete:hover { background: rgba(239,68,68,0.6); }
.card.medicine-dash-card .card-actions .card-edit:hover { background: rgba(139,92,246,0.7); }
@media (max-width: 640px) {
.card.vehicle-dash-card,
.card.medicine-dash-card {
height: 340px !important;
min-height: 340px !important;
}
.vehicle-dash-hero,
.medicine-dash-hero {
height: 155px;
padding: 11px 13px;
}
.vd-metric-num,
.med-metric-num { font-size: 2.2rem; }
.vd-metric-unit,
.med-metric-unit { font-size: 0.88rem; }
.vd-title,
.med-title { font-size: 1.1rem; }
.vehicle-dash-body,
.medicine-dash-body { max-height: none; }
.vd-row,
.med-row {
padding: 7px 9px;
gap: 8px;
}
.vd-row-side,
.med-row-side {
gap: 6px;
}
.medicine-dose-foot {
min-height: 50px;
padding: 7px 10px;
gap: 8px;
}
.medicine-dose-update,
.medicine-dose-actions .dash-foot-state {
display: none;
}
.medicine-dose-status {
font-size: 0.72rem;
}
.medicine-dose-btn,
.medicine-dose-details {
height: 29px;
padding: 0 10px;
font-size: 0.7rem;
}
.med-dose-panel {
align-items: center;
flex-direction: row;
gap: 7px;
margin: 0 10px 6px;
padding: 7px 8px;
}
.med-dose-copy { flex: 1 1 auto; }
.med-dose-v { display: none; }
.med-dose-actions {
width: auto;
}
.med-dose-btn,
.med-dose-secondary {
flex: 0 0 auto;
height: 27px;
padding: 0 9px;
font-size: 0.7rem;
}
}
/* ─── Stocks dashboard card (portfolio / quote hero) ────── */
.card.stocks-dash-card {
padding: 0 !important;
overflow: hidden;
border-radius: 16px;
position: relative;
display: flex !important;
flex-direction: column;
height: 320px !important;
min-height: 320px !important;
box-shadow: 0 14px 34px rgba(0,0,0,0.48);
transition: box-shadow 0.22s ease, border-color 0.22s ease;
}
.card.stocks-dash-card:hover {
transform: none !important;
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08);
}
.card.stocks-dash-card.stocks-sev-up:hover {
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(16,185,129,0.38);
}
.card.stocks-dash-card.stocks-sev-down:hover {
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(248,113,113,0.38);
}
.card.stocks-dash-card.stocks-sev-flat:hover,
.card.stocks-dash-card.stocks-sev-none:hover {
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(167,139,250,0.34);
}
.card.stocks-dash-card > .bento-glow-bg { display: none !important; }
.stocks-dash-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
.stocks-dash-hero {
position: relative;
height: 150px;
padding: 12px 14px 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
flex-shrink: 0;
}
.stocks-sev-up .stocks-dash-hero { background: linear-gradient(135deg, #082219 0%, #123a31 60%, #19614f 100%); }
.stocks-sev-down .stocks-dash-hero { background: linear-gradient(135deg, #2b0a10 0%, #55161c 60%, #7a262a 100%); }
.stocks-sev-flat .stocks-dash-hero { background: linear-gradient(135deg, #1a1530 0%, #2d2450 60%, #3f3570 100%); }
.stocks-sev-none .stocks-dash-hero { background: linear-gradient(135deg, #1f1f23 0%, #2e2e33 60%, #3d3d44 100%); }
.sd-hero-noise,
.sd-hero-overlay { position: absolute; inset: 0; }
.sd-hero-noise {
background-image:
radial-gradient(circle at 18% 26%, rgba(255,255,255,0.08) 0, transparent 38%),
radial-gradient(circle at 82% 72%, rgba(255,255,255,0.05) 0, transparent 46%);
pointer-events: none;
z-index: 1;
}
.sd-hero-art {
position: absolute;
left: 14px;
top: 50%;
width: 126px;
height: 86px;
transform: translateY(-50%);
opacity: 0.28;
pointer-events: none;
z-index: 0;
}
.sd-art-grid {
position: absolute;
inset: 0;
border-radius: 18px;
background:
linear-gradient(transparent 95%, rgba(255,255,255,0.14) 95%),
linear-gradient(90deg, transparent 95%, rgba(255,255,255,0.12) 95%);
background-size: 100% 18px, 24px 100%;
mask-image: linear-gradient(90deg, rgba(0,0,0,0.65), transparent 100%);
}
.sd-art-bar {
position: absolute;
bottom: 10px;
width: 16px;
border-radius: 8px 8px 3px 3px;
background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.14));
box-shadow: 0 0 18px rgba(255,255,255,0.18);
}
.sd-bar-1 { left: 12px; height: 42px; }
.sd-bar-2 { left: 40px; height: 28px; }
.sd-bar-3 { left: 68px; height: 54px; }
.sd-art-line {
position: absolute;
height: 3px;
border-radius: 999px;
background: rgba(255,255,255,0.82);
box-shadow: 0 0 12px rgba(255,255,255,0.3);
}
.sd-line-a {
left: 18px;
top: 48px;
width: 38px;
transform: rotate(-18deg);
}
.sd-line-b {
left: 50px;
top: 35px;
width: 44px;
transform: rotate(14deg);
}
.sd-art-dot {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.92);
box-shadow: 0 0 14px rgba(255,255,255,0.4);
}
.sd-dot-1 { left: 18px; top: 46px; }
.sd-dot-2 { left: 56px; top: 35px; }
.sd-dot-3 { left: 92px; top: 45px; }
.sd-hero-overlay {
background:
radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.24) 45%, rgba(0,0,0,0) 74%),
linear-gradient(180deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.04) 42%, rgba(0,0,0,0.54) 82%, rgba(12,10,18,0.9) 100%);
pointer-events: none;
z-index: 1;
}
.sd-hero-top,
.sd-hero-center,
.sd-hero-bottom { position: relative; z-index: 2; }
.sd-hero-top,
.sd-hero-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.sd-hero-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
text-align: center;
}
.sd-top-badge {
padding: 4px 10px;
border-radius: 999px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
font-size: 0.72rem;
line-height: 1.2;
}
.sd-type-badge,
.sd-sev-badge { font-family: var(--font-ar); font-weight: 700; }
.sd-sev-up { color: #a7f3d0; border-color: rgba(52,211,153,0.48); }
.sd-sev-down { color: #fecaca; border-color: rgba(248,113,113,0.46); }
.sd-sev-flat { color: #ddd6fe; border-color: rgba(167,139,250,0.42); }
.sd-sev-none { color: rgba(255,255,255,0.84); border-color: rgba(255,255,255,0.18); }
.sd-metric-row {
display: flex;
align-items: baseline;
gap: 7px;
line-height: 1;
}
.sd-metric-num {
font-family: var(--font-mono, monospace);
font-size: 2.75rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 20px rgba(0,0,0,0.84), 0 1px 3px rgba(0,0,0,0.72), 0 0 1px rgba(0,0,0,0.45);
letter-spacing: -0.03em;
}
.stocks-sev-up .sd-metric-num,
.stocks-sev-up .sd-metric-unit { color: #a7f3d0; }
.stocks-sev-down .sd-metric-num,
.stocks-sev-down .sd-metric-unit { color: #fecaca; }
.stocks-sev-flat .sd-metric-num,
.stocks-sev-flat .sd-metric-unit { color: #ddd6fe; }
.sd-metric-unit {
font-family: var(--font-mono, monospace);
font-size: 1rem;
font-weight: 700;
color: rgba(255,255,255,0.94);
text-shadow: 0 2px 12px rgba(0,0,0,0.82), 0 1px 2px rgba(0,0,0,0.68);
}
.sd-metric-tail {
font-family: var(--font-ar);
font-size: 0.78rem;
color: rgba(255,255,255,0.88);
text-shadow: 0 2px 10px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.68);
}
.sd-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sd-title {
margin: 0;
font-family: var(--font-ar);
font-size: 1.25rem;
font-weight: 800;
line-height: 1.2;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.58), 0 0 1px rgba(0,0,0,0.4);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sd-title mark,
.sd-row-title mark {
background: transparent;
color: inherit;
box-shadow: none;
padding: 0;
}
.sd-hero-sub {
font-family: var(--font-ar);
font-size: 0.74rem;
color: rgba(255,255,255,0.78);
text-shadow: 0 2px 10px rgba(0,0,0,0.84), 0 1px 2px rgba(0,0,0,0.68);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sd-hero-sub-sep { opacity: 0.5; margin: 0 4px; }
.sd-hero-sub-more {
font-family: var(--font-mono, monospace);
color: rgba(255,255,255,0.92);
}
.sd-count-chip {
padding: 4px 10px;
border-radius: 999px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.18);
color: rgba(255,255,255,0.95);
font-family: var(--font-ar);
font-size: 0.72rem;
white-space: nowrap;
flex-shrink: 0;
}
.stocks-dash-body {
padding: 10px 12px 8px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.12) transparent;
border-top: 1px solid rgba(255,255,255,0.06);
}
.stocks-dash-body::-webkit-scrollbar { width: 6px; }
.stocks-dash-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.sd-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 40px;
padding: 7px 10px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 10px;
transition: background 0.15s, border-color 0.15s;
}
.sd-row:hover {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.1);
}
.sd-row-up { border-inline-start: 3px solid rgba(52,211,153,0.55); }
.sd-row-down { border-inline-start: 3px solid rgba(248,113,113,0.55); }
.sd-row-flat { border-inline-start: 3px solid rgba(167,139,250,0.46); }
.sd-row-error { border-inline-start: 3px solid rgba(239,68,68,0.46); }
.sd-row-main { min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px; }
.sd-row-order {
min-width: 34px;
height: 22px;
padding: 0 8px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.66);
font-family: var(--font-mono, monospace);
font-size: 0.72rem;
flex-shrink: 0;
}
.sd-row-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sd-row-title {
font-family: var(--font-mono, monospace);
font-size: 0.9rem;
font-weight: 800;
color: var(--text);
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sd-row-meta {
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.sd-row-note {
font-family: var(--font-ar);
font-size: 0.68rem;
color: rgba(255,255,255,0.66);
}
.sd-row-meta-sep {
color: rgba(255,255,255,0.32);
font-size: 0.68rem;
line-height: 1;
}
.sd-row-price {
font-family: var(--font-mono, monospace);
font-size: 0.76rem;
color: rgba(255,255,255,0.9);
direction: ltr;
}
.sd-row-side { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.sd-row-badge {
font-family: var(--font-mono, monospace);
font-size: 0.72rem;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid transparent;
direction: ltr;
white-space: nowrap;
}
.sd-badge-up { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.32); color: #86efac; }
.sd-badge-down { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.32); color: #fca5a5; }
.sd-badge-flat { background: rgba(139,92,246,0.14); border-color: rgba(139,92,246,0.3); color: #ddd6fe; }
.sd-badge-error { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.28); color: #fca5a5; font-family: var(--font-ar); }
.sd-row-error-note {
font-family: var(--font-ar);
font-size: 0.7rem;
color: rgba(255,255,255,0.62);
}
.sd-row-more {
text-align: center;
font-size: 0.78rem;
color: var(--muted);
padding: 8px;
font-family: var(--font-ar);
}
.sd-empty {
padding: 18px 14px;
text-align: center;
color: var(--muted);
font-family: var(--font-ar);
font-size: 0.82rem;
}
.stocks-dash-foot {
min-height: 48px;
padding: 8px 14px;
border-top: 1px dashed rgba(255,255,255,0.08);
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.sd-foot-time {
font-family: var(--font-mono, monospace);
font-size: 0.72rem;
color: var(--muted);
opacity: 0.82;
}
.sd-foot-actions { display: flex; align-items: center; gap: 6px; }
.sd-foot-btn {
padding: 5px 11px;
background: transparent;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 999px;
color: rgba(255,255,255,0.88);
font-family: var(--font-ar);
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sd-foot-btn:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.18);
color: #fff;
}
.sd-foot-btn-refresh {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(139,92,246,0.1);
border-color: rgba(139,92,246,0.28);
}
.sd-foot-btn-refresh:hover {
background: rgba(139,92,246,0.18);
border-color: rgba(167,139,250,0.42);
}
.sd-foot-btn-refresh svg { transition: transform 0.35s ease; }
.sd-foot-btn-refresh:hover svg { transform: rotate(-180deg); }
.sd-foot-btn-refresh.is-fetching svg { animation: sdSpinReverse 0.9s linear infinite; }
@keyframes sdSpinReverse {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
.card.stocks-dash-card .card-actions {
position: absolute;
top: 10px;
left: 10px;
z-index: 4;
display: flex;
gap: 4px;
opacity: 0;
transition: opacity 0.18s;
background: none;
padding: 0;
}
.card.stocks-dash-card:hover .card-actions { opacity: 1; }
.card.stocks-dash-card .card-actions button {
background: rgba(0,0,0,0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
border-radius: 8px;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
cursor: pointer;
}
.card.stocks-dash-card .card-actions .card-delete:hover { background: rgba(239,68,68,0.6); }
.card.stocks-dash-card .card-actions .card-edit:hover { background: rgba(139,92,246,0.7); }
@media (max-width: 640px) {
.card.stocks-dash-card {
height: 340px !important;
min-height: 340px !important;
}
.stocks-dash-hero {
height: 155px;
padding: 11px 13px;
}
.sd-metric-num { font-size: 2.2rem; }
.sd-metric-unit { font-size: 0.88rem; }
.sd-title { font-size: 1.1rem; }
.stocks-dash-body { max-height: none; }
.sd-row { padding: 7px 9px; gap: 8px; }
.sd-row-side { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
.sd-foot-btn-refresh svg,
.sd-foot-btn-refresh:hover svg { transition: none; transform: none; }
.sd-foot-btn-refresh.is-fetching svg { animation: none; }
}
/* ─── LOAN DASH CARD (desktop) ──────────────────────────────────────────────── */
.card.loan-dash-card {
padding: 0 !important;
overflow: hidden;
border-radius: 16px;
position: relative;
display: flex !important;
flex-direction: column;
height: 320px !important;
min-height: 320px !important;
box-shadow: 0 14px 34px rgba(0,0,0,0.48);
transition: box-shadow 0.22s ease, border-color 0.22s ease;
}
.card.loan-dash-card > .bento-glow-bg { display: none !important; }
.card.loan-dash-card:hover { transform: none !important; box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(239,68,68,0.3); }
.card.loan-dash-card.loan-sev-done:hover { box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(34,197,94,0.3); }
.loan-dash-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
.loan-dash-hero {
position: relative;
height: 160px;
padding: 12px 14px 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
flex-shrink: 0;
}
.loan-sev-active .loan-dash-hero { background: linear-gradient(135deg, #2b0a10 0%, #55161c 58%, #7a262a 100%); }
.loan-sev-overdue .loan-dash-hero { background: linear-gradient(135deg, #3b0505 0%, #7a0808 58%, #9e1010 100%); }
.loan-sev-done .loan-dash-hero { background: linear-gradient(135deg, #062212 0%, #0f3a28 58%, #1a5c3a 100%); }
.ld-hero-art { position: absolute; inset: 0; }
.ld-art-bars {
position: absolute;
bottom: 8px;
left: 12px;
display: flex;
align-items: flex-end;
gap: 5px;
opacity: 0.55;
}
.ld-art-bar {
width: 10px;
border-radius: 3px 3px 1px 1px;
background: rgba(255,255,255,0.18);
}
.ld-art-bar.ld-bar-filled {
background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.18));
box-shadow: 0 0 8px rgba(255,255,255,0.15);
}
.loan-dash-hero .ld-hero-overlay {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.15) 50%, transparent 75%),
linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 82%, rgba(10,5,15,0.92) 100%);
pointer-events: none; z-index: 1;
}
.ld-hero-top, .ld-hero-center, .ld-hero-bottom { position: relative; z-index: 2; }
.ld-hero-top, .ld-hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ld-hero-center { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.ld-top-badge {
padding: 4px 10px; border-radius: 999px;
background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
font-size: 0.7rem; font-weight: 600; color: rgba(255,255,255,0.9);
font-family: var(--font-ar); white-space: nowrap;
}
.ld-status-badge.ld-sev-active { color: #fca5a5; background: rgba(239,68,68,0.2); }
.ld-status-badge.ld-sev-overdue { color: #f87171; background: rgba(220,38,38,0.28); }
.ld-status-badge.ld-sev-done { color: #86efac; background: rgba(34,197,94,0.2); }
.ld-metric-row { display: flex; align-items: baseline; gap: 6px; }
.ld-metric-num {
font-size: 2rem; font-weight: 800; font-family: var(--font-en);
letter-spacing: -0.03em; color: #fff; direction: ltr;
}
.loan-sev-active .ld-metric-num { color: #fecaca; }
.loan-sev-overdue .ld-metric-num { color: #f87171; }
.loan-sev-done .ld-metric-num { color: #86efac; }
.ld-metric-unit { font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.6); font-family: var(--font-ar); }
.ld-metric-tail { font-size: 0.68rem; color: rgba(255,255,255,0.45); font-family: var(--font-ar); }
.ld-progress-wrap { position: relative; z-index: 2; padding: 0 2px; }
.ld-progress-bar {
width: 100%; height: 4px;
background: rgba(255,255,255,0.12);
border-radius: 999px; overflow: hidden;
}
.ld-progress-fill {
height: 100%; border-radius: 999px;
transition: width 0.5s ease;
}
.ld-fill-active { background: linear-gradient(90deg, #f87171, #ef4444); box-shadow: 0 0 8px rgba(239,68,68,0.5); }
.ld-fill-overdue { background: linear-gradient(90deg, #dc2626, #b91c1c); box-shadow: 0 0 8px rgba(220,38,38,0.5); }
.ld-fill-done { background: linear-gradient(90deg, #4ade80, #22c55e); box-shadow: 0 0 8px rgba(34,197,94,0.5); }
.ld-title { font-size: 0.95rem; font-weight: 700; color: rgba(255,255,255,0.92); margin: 0; font-family: var(--font-ar); }
.ld-hero-sub { font-size: 0.65rem; color: rgba(255,255,255,0.45); font-family: var(--font-mono); direction: ltr; }
.ld-count-chip {
padding: 3px 9px; border-radius: 999px;
background: rgba(0,0,0,0.45); font-size: 0.68rem; font-weight: 600;
color: rgba(255,255,255,0.75); font-family: var(--font-ar); white-space: nowrap;
}
.loan-dash-body {
flex: 1; padding: 14px 16px;
display: flex; flex-direction: column; justify-content: center;
background: rgba(10,5,15,0.97);
}
.ld-stat-row {
display: flex;
gap: 28px;
justify-content: center;
align-items: flex-start;
}
.ld-stat {
display: flex;
flex-direction: column;
gap: 3px;
align-items: center;
text-align: center;
}
.ld-sk { font-size: 0.67rem; color: rgba(255,255,255,0.38); font-family: var(--font-ar); }
.ld-sv { font-size: 0.95rem; font-weight: 700; color: rgba(255,255,255,0.9); font-family: var(--font-ar); }
.loan-dash-foot {
padding: 8px 16px; border-top: 1px solid rgba(255,255,255,0.05);
display: flex; align-items: center; justify-content: flex-end;
background: rgba(10,5,15,0.97);
}
.ld-foot-time { font-size: 0.65rem; color: rgba(255,255,255,0.28); font-family: var(--font-ar); }
/* ─── NET WORTH DASH CARD (desktop) ─────────────────────────────────────────── */
.card.nw-dash-card {
padding: 0 !important;
overflow: hidden;
border-radius: 16px;
position: relative;
display: flex !important;
flex-direction: column;
height: 320px !important;
min-height: 320px !important;
box-shadow: 0 14px 34px rgba(0,0,0,0.48);
transition: box-shadow 0.22s ease, border-color 0.22s ease;
}
.card.nw-dash-card > .bento-glow-bg { display: none !important; }
.card.nw-dash-card:hover { transform: none !important; box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(167,139,250,0.3); }
.card.nw-dash-card.nw-sev-positive:hover { box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(34,197,94,0.3); }
.nw-dash-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
.nw-dash-hero {
position: relative;
height: 160px;
padding: 12px 14px 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
flex-shrink: 0;
}
.nw-sev-negative .nw-dash-hero { background: linear-gradient(135deg, #1a0a2e 0%, #2e1a54 58%, #1a0a3a 100%); }
.nw-sev-positive .nw-dash-hero { background: linear-gradient(135deg, #062212 0%, #0f3a28 58%, #1a5c3a 100%); }
.nw-hero-art { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 12px; padding: 0 16px 8px; opacity: 0.4; }
.nw-art-bar {
width: 28px;
border-radius: 3px 3px 0 0;
min-height: 8px;
}
.nw-bar-assets { background: linear-gradient(180deg, rgba(34,197,94,0.9), rgba(34,197,94,0.25)); }
.nw-bar-liab { background: linear-gradient(180deg, rgba(239,68,68,0.9), rgba(239,68,68,0.25)); }
.nw-dash-hero .nw-hero-overlay {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.15) 50%, transparent 75%),
linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 82%, rgba(10,5,15,0.92) 100%);
pointer-events: none; z-index: 1;
}
.nw-hero-top, .nw-hero-center, .nw-hero-bottom { position: relative; z-index: 2; }
.nw-hero-top, .nw-hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nw-hero-center { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.nw-top-badge {
padding: 4px 10px; border-radius: 999px;
background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
font-size: 0.7rem; font-weight: 600; color: rgba(255,255,255,0.9);
font-family: var(--font-ar); white-space: nowrap;
}
.nw-status-badge.nw-sev-negative { color: #c4b5fd; background: rgba(139,92,246,0.22); }
.nw-status-badge.nw-sev-positive { color: #86efac; background: rgba(34,197,94,0.2); }
.nw-metric-row { display: flex; align-items: baseline; gap: 6px; }
.nw-metric-num {
font-size: 2rem; font-weight: 800; font-family: var(--font-en);
letter-spacing: -0.03em; color: #fff; direction: ltr;
}
.nw-sev-negative .nw-metric-num { color: #c4b5fd; }
.nw-sev-positive .nw-metric-num { color: #86efac; }
.nw-metric-unit { font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.6); font-family: var(--font-ar); }
.nw-metric-tail { font-size: 0.68rem; color: rgba(255,255,255,0.45); font-family: var(--font-ar); }
.nw-title { font-size: 0.95rem; font-weight: 700; color: rgba(255,255,255,0.92); margin: 0; font-family: var(--font-ar); }
.nw-hero-sub { font-size: 0.65rem; color: rgba(255,255,255,0.45); font-family: var(--font-mono); }
.nw-count-chip {
padding: 3px 9px; border-radius: 999px;
background: rgba(0,0,0,0.45); font-size: 0.68rem; font-weight: 600;
color: rgba(255,255,255,0.75); font-family: var(--font-ar); white-space: nowrap;
}
.nw-dash-body {
flex: 1; padding: 14px 16px;
display: flex; flex-direction: column; justify-content: center;
background: rgba(10,5,15,0.97);
}
.nw-stat-row { display: flex; gap: 28px; }
.nw-stat { display: flex; flex-direction: column; gap: 3px; }
.nw-sk { font-size: 0.67rem; color: rgba(255,255,255,0.38); font-family: var(--font-ar); }
.nw-sv { font-size: 0.95rem; font-weight: 700; color: rgba(255,255,255,0.9); font-family: var(--font-ar); }
.nw-sv-up { color: #4ade80 !important; }
.nw-sv-down { color: #f87171 !important; }
.nw-dash-foot {
padding: 8px 16px; border-top: 1px solid rgba(255,255,255,0.05);
display: flex; align-items: center; justify-content: flex-end;
background: rgba(10,5,15,0.97);
}
.nw-foot-time { font-size: 0.65rem; color: rgba(255,255,255,0.28); font-family: var(--font-ar); }
/* ─── IOU DASH CARD (desktop) ───────────────────────────────────────────────── */
.card.iou-dash-card {
padding: 0 !important;
overflow: hidden;
border-radius: 16px;
position: relative;
display: flex !important;
flex-direction: column;
height: 320px !important;
min-height: 320px !important;
box-shadow: 0 14px 34px rgba(0,0,0,0.48);
transition: box-shadow 0.22s ease, border-color 0.22s ease;
}
.card.iou-dash-card > .bento-glow-bg { display: none !important; }
.card.iou-dash-card:hover { transform: none !important; box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(249,115,22,0.3); }
.card.iou-dash-card.iou-sev-positive:hover { box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(34,197,94,0.3); }
.iou-dash-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
.iou-dash-hero {
position: relative;
height: 160px;
padding: 12px 14px 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
flex-shrink: 0;
}
.iou-sev-positive .iou-dash-hero { background: linear-gradient(135deg, #062212 0%, #0f3a28 55%, #1a5c3a 100%); }
.iou-sev-negative .iou-dash-hero { background: linear-gradient(135deg, #1e0b04 0%, #5c2010 55%, #7a2a10 100%); }
.iou-sev-balanced .iou-dash-hero { background: linear-gradient(135deg, #0a0a1e 0%, #1a1a4a 55%, #202050 100%); }
.iou-hero-art {
position: absolute;
bottom: 8px; left: 14px;
display: flex;
align-items: flex-end;
gap: 8px;
opacity: 0.4;
}
.iou-art-bar { width: 22px; border-radius: 3px 3px 0 0; min-height: 4px; }
.iou-bar-tome { background: linear-gradient(180deg, rgba(34,197,94,0.9), rgba(34,197,94,0.2)); }
.iou-bar-iowe { background: linear-gradient(180deg, rgba(249,115,22,0.9), rgba(249,115,22,0.2)); }
.iou-dash-hero .iou-hero-overlay {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.15) 50%, transparent 75%),
linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 82%, rgba(10,5,15,0.92) 100%);
pointer-events: none; z-index: 1;
}
.iou-hero-top, .iou-hero-center, .iou-hero-bottom { position: relative; z-index: 2; }
.iou-hero-top, .iou-hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.iou-hero-center { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.iou-top-badge {
padding: 4px 10px; border-radius: 999px;
background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
font-size: 0.7rem; font-weight: 600; color: rgba(255,255,255,0.9);
font-family: var(--font-ar); white-space: nowrap;
}
.iou-status-badge.iou-sev-positive { color: #86efac; background: rgba(34,197,94,0.2); }
.iou-status-badge.iou-sev-negative { color: #fdba74; background: rgba(249,115,22,0.22); }
.iou-status-badge.iou-sev-balanced { color: #a5b4fc; background: rgba(99,102,241,0.2); }
.iou-metric-row { display: flex; align-items: baseline; gap: 6px; }
.iou-metric-num {
font-size: 2rem; font-weight: 800; font-family: var(--font-en);
letter-spacing: -0.03em; color: #fff; direction: ltr;
}
.iou-sev-positive .iou-metric-num { color: #86efac; }
.iou-sev-negative .iou-metric-num { color: #fdba74; }
.iou-sev-balanced .iou-metric-num { color: #c7d2fe; }
.iou-metric-unit { font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.6); font-family: var(--font-ar); }
.iou-metric-tail { font-size: 0.68rem; color: rgba(255,255,255,0.45); font-family: var(--font-ar); }
.iou-title { font-size: 0.95rem; font-weight: 700; color: rgba(255,255,255,0.92); margin: 0; font-family: var(--font-ar); }
.iou-hero-sub { font-size: 0.65rem; color: rgba(255,255,255,0.45); font-family: var(--font-ar); }
.iou-bal-chips { display: flex; gap: 5px; flex-shrink: 0; }
.iou-bal-chip {
padding: 2px 8px; border-radius: 999px;
font-size: 0.65rem; font-weight: 600; font-family: var(--font-ar); white-space: nowrap;
}
.iou-chip-pos { background: rgba(34,197,94,0.18); color: #86efac; }
.iou-chip-neg { background: rgba(249,115,22,0.18); color: #fdba74; }
.iou-dash-body {
flex: 1; padding: 12px 16px;
display: flex; flex-direction: column; justify-content: center; gap: 6px;
background: rgba(10,5,15,0.97);
}
.iou-dash-row {
display: flex; align-items: center; justify-content: space-between;
padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.iou-dash-row:last-child { border-bottom: none; }
.iou-row-name { font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.82); font-family: var(--font-ar); }
.iou-row-amt { font-size: 0.82rem; font-weight: 700; font-family: var(--font-en); direction: ltr; }
.iou-amt-positive { color: #4ade80; }
.iou-amt-negative { color: #fb923c; }
.iou-empty { font-size: 0.8rem; color: rgba(255,255,255,0.3); font-family: var(--font-ar); text-align: center; }
.iou-dash-foot {
padding: 8px 16px; border-top: 1px solid rgba(255,255,255,0.05);
display: flex; align-items: center; justify-content: flex-end;
background: rgba(10,5,15,0.97);
}
.iou-foot-time { font-size: 0.65rem; color: rgba(255,255,255,0.28); font-family: var(--font-ar); }
/* ─── New-card dash (wave 1/2/3 shared template) ──────── */
.card.nc-dash-card {
height: 230px !important;
overflow: hidden;
border-radius: 16px;
padding: 0 !important;
border: none !important;
position: relative;
display: flex;
flex-direction: column;
}
.card.nc-dash-card[data-type="reminder"],
.card.nc-dash-card[data-type="meeting"] {
height: 320px !important;
min-height: 320px !important;
}
.card.nc-dash-card.card-featured {
height: auto !important;
min-height: 320px;
}
.card.nc-dash-card.card-featured .ncd-hero { flex-basis: 200px; }
.ncd-shell { display: flex; flex-direction: column; height: 100%; }
.ncd-hero {
flex: 0 0 130px;
padding: 14px 16px 10px;
position: relative;
overflow: hidden;
}
.ncd-art-glow {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--ncd-accent, var(--accent)) 16%, transparent), transparent 55%),
radial-gradient(circle at 5% 90%, color-mix(in srgb, var(--ncd-accent, var(--accent)) 8%, transparent), transparent 45%);
}
.ncd-top-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.ncd-icon-wrap { font-size: 1.25rem; line-height: 1; }
.ncd-title-txt {
font-size: 0.85rem;
font-weight: 700;
color: rgba(255,255,255,0.9);
font-family: var(--font-ar);
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ncd-kind-badge {
font-size: 0.64rem;
padding: 2px 8px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.28);
color: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(255, 255, 255, 0.09);
white-space: nowrap;
font-family: var(--font-ar);
font-weight: 700;
}
.ncd-badge {
font-size: 0.65rem;
padding: 2px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--ncd-accent, rgba(255,255,255,0.8)) 14%, transparent);
color: var(--ncd-accent, rgba(255,255,255,0.8));
border: 1px solid color-mix(in srgb, var(--ncd-accent, rgba(255,255,255,0.8)) 28%, transparent);
white-space: nowrap;
font-family: var(--font-ar);
font-weight: 600;
}
.ncd-metric-row {
display: flex;
align-items: baseline;
gap: 5px;
margin-bottom: 8px;
}
.ncd-metric-num {
font-size: 2.2rem;
font-weight: 800;
line-height: 1;
color: #fff;
font-family: var(--font-en);
}
.ncd-emoji-hero { font-size: 2rem; line-height: 1; }
.ncd-text-hero-lg { font-size: 1.2rem; font-weight: 700; line-height: 1.2; font-family: var(--font-ar); }
.ncd-text-hero-md { font-size: 1.1rem; font-weight: 600; line-height: 1.2; font-family: var(--font-ar); }
.ncd-text-hero-sm { font-size: 0.9rem; font-weight: 600; line-height: 1.3; font-family: var(--font-mono, monospace); letter-spacing: 0.02em; }
.ncd-hero-emoji-2xl { font-size: 2.6rem; line-height: 1; }
.ncd-hero-emoji-xl { font-size: 2.4rem; line-height: 1; }
.ncd-hero-emoji-sm { font-size: 1.6rem; line-height: 1; }
.ncd-hero-empty { opacity: .35; font-size: 1.2rem; }
.ncd-hero-empty-lg { opacity: .35; font-size: 1.4rem; }
.ncd-muted-sub { opacity: .4; font-size: 1.1rem; }
.ncd-no-data { opacity: .3; }
.ncv-rating-empty { opacity: .4; }
.ncv-title-icon { font-size: 1.4rem; margin-inline-end: 8px; }
.ncv-type-label { font-size: 0.72rem; color: var(--muted); font-weight: 500; margin-inline-start: 10px; }
.tab-icon { font-size: 1.2rem; }
.heatmap-label { font-size: 0.7rem; color: var(--muted); }
.stats-header-title { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.stats-header-date { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.search-hint-text { font-size: 0.78rem; opacity: 0.7; }
.widget-empty-hint { font-size: 0.75rem; opacity: 0.6; }
.empty-state-title { font-weight: 700; color: var(--text); margin-bottom: 4px; }
.empty-state-sub { font-size: 0.82rem; color: rgba(200,205,220,0.5); }
.pd-score-denom { font-size: 1.5rem; color: rgba(255,255,255,0.4); }
.network-error-hint { font-size: 0.8rem; opacity: 0.6; margin-top: 6px; }
.mob-empty-icon-lg { font-size: 36px; opacity: 0.4; margin-bottom: 8px; }
.ncd-metric-unit {
font-size: 0.72rem;
color: rgba(255,255,255,0.55);
font-family: var(--font-ar);
}
.ncd-progress-wrap {
height: 4px;
background: rgba(255,255,255,0.08);
border-radius: 2px;
overflow: hidden;
}
.ncd-progress-fill {
height: 100%;
border-radius: 2px;
transition: width 0.4s ease;
background: var(--ncd-progress-c, var(--ncd-accent, var(--accent)));
}
.ncd-body {
flex: 1;
background: rgba(8,5,15,0.97);
padding: 8px 14px 8px;
display: flex;
flex-direction: column;
gap: 4px;
overflow: hidden;
position: relative;
border-top: 1px solid rgba(255,255,255,0.05);
}
.ncd-body::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: color-mix(in srgb, var(--ncd-accent, var(--accent)) 22%, transparent);
pointer-events: none;
}
.ncd-body::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 12px;
background: linear-gradient(to bottom, transparent, rgba(8,5,15,0.9));
pointer-events: none;
}
.ncd-stat {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 6px;
font-size: 11.5px;
line-height: 1.35;
}
.ncd-stat-k { color: rgba(255,255,255,0.42); font-family: var(--font-ar); flex-shrink: 0; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ncd-stat-v {
color: rgba(255,255,255,0.9);
font-family: var(--font-en), var(--font-ar);
font-weight: 600;
text-align: start;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ncd-foot {
background: rgba(6,4,12,0.98);
border-top: 1px solid rgba(255,255,255,0.05);
padding: 5px 12px;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.ncd-time { font-size: 10.5px; color: rgba(255,255,255,0.28); font-family: var(--font-ar); }
.card.nc-dash-card .card-actions {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
bottom: auto !important;
z-index: 8 !important;
display: flex;
justify-content: flex-end;
gap: 6px;
padding: 0 !important;
background: none !important;
transform: none !important;
opacity: 0;
pointer-events: none;
}
.card.nc-dash-card:hover .card-actions,
.card.nc-dash-card.card-expanded .card-actions {
opacity: 1;
pointer-events: auto;
}
.card.nc-dash-card .card-actions button {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
border-radius: 10px !important;
}
/* ─── NCD interactive elements (tracker / counter / routine / reminder) ─ */
.ncd-tracker-ctrl {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
background: rgba(255,255,255,0.04);
border-radius: 10px;
margin-bottom: 4px;
}
.ncd-tc-btn {
width: 34px; height: 34px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.07);
color: var(--text);
font-size: 1.25rem; font-weight: 700;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .14s;
flex-shrink: 0;
}
.ncd-tc-btn:hover { background: rgba(255,255,255,0.16); }
.ncd-tc-btn:active { transform: scale(.91); }
.ncd-tc-val { font-size: 1rem; font-weight: 700; color: var(--text); font-family: var(--font-en); }
.ncd-tc-unit { font-size: 0.72rem; opacity: 0.5; margin-inline-start: 3px; }
.ncd-counter-tap {
display: flex;
align-items: center; justify-content: center;
padding: 16px 12px;
background: rgba(255,255,255,0.04);
border: 1px dashed rgba(255,255,255,0.1);
border-radius: 10px;
cursor: pointer;
transition: background .14s, transform .1s;
}
.ncd-counter-tap:hover { background: rgba(255,255,255,0.09); }
.ncd-counter-tap:active { transform: scale(.97); }
.ncd-ctr-hint { font-size: 0.78rem; color: rgba(255,255,255,0.35); font-family: var(--font-ar); }
.ncd-metric-num.ncd-counter-bump { animation: counterBump .4s cubic-bezier(.25,1.5,.5,1); }
.ncd-habit-row {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 6px;
border-radius: 7px;
cursor: pointer;
transition: background .12s;
min-height: 28px;
}
.ncd-habit-row:hover { background: rgba(255,255,255,0.06); }
.ncd-habit-dot {
width: 14px; height: 14px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.22);
flex-shrink: 0;
transition: background .15s, border-color .15s;
}
.ncd-habit-done .ncd-habit-dot {
background: #22c55e;
border-color: #22c55e;
}
.ncd-habit-txt {
font-size: 0.78rem;
color: rgba(255,255,255,0.72);
font-family: var(--font-ar);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ncd-habit-done .ncd-habit-txt {
color: rgba(255,255,255,0.35);
text-decoration: line-through;
}
.ncd-reminder-done-btn {
display: block;
width: 100%;
margin-top: 6px;
padding: 7px;
background: rgba(34,197,94,0.12);
border: 1px solid rgba(34,197,94,0.28);
border-radius: 8px;
color: #22c55e;
font-size: 0.8rem; font-weight: 600;
cursor: pointer;
font-family: var(--font-ar);
transition: background .14s, transform .1s;
}
.ncd-reminder-done-btn:hover { background: rgba(34,197,94,0.22); }
.ncd-reminder-done-btn:active { transform: scale(0.97); }
.ncd-reminder-done-btn:disabled, .ncd-done-today { opacity: 0.5; cursor: default; }
.ncd-water-btn { background: rgba(14,165,233,0.12) !important; border-color: rgba(14,165,233,0.28) !important; color: #0ea5e9 !important; }
.ncd-water-btn:hover { background: rgba(14,165,233,0.22) !important; }
.ncd-quran-btn { background: rgba(16,185,129,0.12) !important; border-color: rgba(16,185,129,0.28) !important; color: #10b981 !important; }
.ncd-quran-btn:hover { background: rgba(16,185,129,0.22) !important; }
.ncd-workout-btn { background: rgba(239,68,68,0.1) !important; border-color: rgba(239,68,68,0.24) !important; color: #f87171 !important; }
.ncd-workout-btn:hover { background: rgba(239,68,68,0.18) !important; }
.ncd-meditate-btn { background: rgba(20,184,166,0.1) !important; border-color: rgba(20,184,166,0.24) !important; color: #14b8a6 !important; }
.ncd-meditate-btn:hover { background: rgba(20,184,166,0.18) !important; }
.ncd-meals-btn { background: rgba(251,146,60,0.1) !important; border-color: rgba(251,146,60,0.24) !important; color: #fb923c !important; }
.ncd-meals-btn:hover { background: rgba(251,146,60,0.18) !important; }
.ncd-book-btn { background: rgba(245,158,11,0.1) !important; border-color: rgba(245,158,11,0.24) !important; color: #fcd34d !important; }
.ncd-book-btn:hover { background: rgba(245,158,11,0.18) !important; }
.ncd-pomo-btn { background: rgba(239,68,68,0.1) !important; border-color: rgba(239,68,68,0.22) !important; color: #fca5a5 !important; }
.ncd-pomo-btn:hover { background: rgba(239,68,68,0.18) !important; }
.ncd-pomo-running { background: rgba(239,68,68,0.22) !important; border-color: rgba(239,68,68,0.45) !important; color: #f87171 !important; animation: ncdPomoPulse 2s ease-in-out infinite; }
@keyframes ncdPomoPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
@media (prefers-reduced-motion: reduce) { .ncd-pomo-running { animation: none !important; } }
.ncd-recipe-btn { background: rgba(245,158,11,0.1) !important; border-color: rgba(245,158,11,0.24) !important; color: #fcd34d !important; }
.ncd-recipe-btn:hover { background: rgba(245,158,11,0.18) !important; }
.ncd-inbox-btn { background: rgba(129,140,248,0.1) !important; border-color: rgba(129,140,248,0.24) !important; color: #a5b4fc !important; }
.ncd-inbox-btn:hover { background: rgba(129,140,248,0.18) !important; }
.ncd-lang-btn { background: rgba(20,184,166,0.1) !important; border-color: rgba(20,184,166,0.24) !important; color: #2dd4bf !important; }
.ncd-lang-btn:hover { background: rgba(20,184,166,0.18) !important; }
.ncd-course-btn { background: rgba(59,130,246,0.1) !important; border-color: rgba(59,130,246,0.24) !important; color: #93c5fd !important; }
.ncd-course-btn:hover { background: rgba(59,130,246,0.18) !important; }
.ncd-watch-btn { background: rgba(168,85,247,0.1) !important; border-color: rgba(168,85,247,0.24) !important; color: #c084fc !important; }
.ncd-watch-btn:hover { background: rgba(168,85,247,0.18) !important; }
.ncd-idea-btn { background: rgba(250,204,21,0.08) !important; border-color: rgba(250,204,21,0.22) !important; color: #fde68a !important; }
.ncd-idea-btn:hover { background: rgba(250,204,21,0.14) !important; }
.ncd-savings-btn { background: rgba(34,197,94,0.1) !important; border-color: rgba(34,197,94,0.24) !important; color: #86efac !important; }
.ncd-savings-btn:hover { background: rgba(34,197,94,0.18) !important; }
.ncd-project-btn { background: rgba(129,140,248,0.1) !important; border-color: rgba(129,140,248,0.24) !important; color: #a5b4fc !important; text-align: right !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.ncd-project-btn:hover { background: rgba(129,140,248,0.18) !important; }
.ncd-review-btn { background: rgba(20,184,166,0.08) !important; border-color: rgba(20,184,166,0.2) !important; color: #5eead4 !important; }
.ncd-review-btn:hover { background: rgba(20,184,166,0.14) !important; }
.ncd-purchase-btn { background: rgba(34,197,94,0.1) !important; border-color: rgba(34,197,94,0.24) !important; color: #4ade80 !important; }
.ncd-purchase-btn:hover { background: rgba(34,197,94,0.18) !important; }
.ncd-gift-btn { background: rgba(244,63,94,0.08) !important; border-color: rgba(244,63,94,0.22) !important; color: #fda4af !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.ncd-gift-btn:hover { background: rgba(244,63,94,0.14) !important; }
.ncd-goal-btn { background: rgba(129,140,248,0.08) !important; border-color: rgba(129,140,248,0.22) !important; color: #a5b4fc !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.ncd-goal-btn:hover { background: rgba(129,140,248,0.16) !important; }
.ncd-birthday-btn { background: rgba(244,114,182,0.1) !important; border-color: rgba(244,114,182,0.28) !important; color: #f9a8d4 !important; }
.ncd-birthday-btn:hover { background: rgba(244,114,182,0.18) !important; }
.ncd-journal-btn { background: rgba(236,72,153,0.08) !important; border-color: rgba(236,72,153,0.22) !important; color: #f472b6 !important; }
.ncd-journal-btn:hover { background: rgba(236,72,153,0.16) !important; }
.ncd-vitals-btn { background: rgba(239,68,68,0.08) !important; border-color: rgba(239,68,68,0.22) !important; color: #fca5a5 !important; }
.ncd-vitals-btn:hover { background: rgba(239,68,68,0.16) !important; }
.ncd-gold-btn { background: rgba(234,179,8,0.08) !important; border-color: rgba(234,179,8,0.22) !important; color: #fde047 !important; }
.ncd-gold-btn:hover { background: rgba(234,179,8,0.16) !important; }
.ncd-appliance-btn { background: rgba(100,116,139,0.1) !important; border-color: rgba(100,116,139,0.25) !important; color: #94a3b8 !important; }
.ncd-appliance-btn:hover { background: rgba(100,116,139,0.18) !important; }
.ncd-md-copy-btn { background: rgba(6,182,212,0.08) !important; border-color: rgba(6,182,212,0.22) !important; color: #67e8f9 !important; }
.ncd-md-copy-btn:hover { background: rgba(6,182,212,0.16) !important; }
.ncd-expense-btn { background: rgba(249,115,22,0.08) !important; border-color: rgba(249,115,22,0.22) !important; color: #fdba74 !important; }
.ncd-expense-btn:hover { background: rgba(249,115,22,0.16) !important; }
.ncd-cyan-btn { background: rgba(6,182,212,0.09) !important; border-color: rgba(6,182,212,0.24) !important; color: #67e8f9 !important; }
.ncd-cyan-btn:hover { background: rgba(6,182,212,0.17) !important; }
.ncd-blue-btn { background: rgba(59,130,246,0.09) !important; border-color: rgba(59,130,246,0.24) !important; color: #93c5fd !important; }
.ncd-blue-btn:hover { background: rgba(59,130,246,0.17) !important; }
.ncd-pink-btn { background: rgba(236,72,153,0.08) !important; border-color: rgba(236,72,153,0.22) !important; color: #f9a8d4 !important; }
.ncd-pink-btn:hover { background: rgba(236,72,153,0.16) !important; }
.ncd-green-btn { background: rgba(34,197,94,0.09) !important; border-color: rgba(34,197,94,0.24) !important; color: #86efac !important; }
.ncd-green-btn:hover { background: rgba(34,197,94,0.17) !important; }
.ncd-networth-btn { background: rgba(16,185,129,0.08) !important; border-color: rgba(16,185,129,0.22) !important; color: #6ee7b7 !important; }
.ncd-networth-btn:hover { background: rgba(16,185,129,0.16) !important; }
.ncd-zakat-btn { background: rgba(20,184,166,0.08) !important; border-color: rgba(20,184,166,0.22) !important; color: #5eead4 !important; }
.ncd-zakat-btn:hover { background: rgba(20,184,166,0.16) !important; }
.ncd-mood-row { display:flex; justify-content:space-between; padding:4px 0 2px; gap:2px; }
.ncd-mood-btn { background:none; border:1.5px solid rgba(255,255,255,0.1); border-radius:7px; padding:3px 1px; font-size:1.1rem; cursor:pointer; transition:background .12s, border-color .12s, transform .08s; flex:1; line-height:1; }
.ncd-mood-btn:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.2); }
.ncd-mood-btn.ncd-mood-active { background:rgba(167,139,250,0.18); border-color:rgba(167,139,250,0.45); transform:scale(1.1); }
.ncd-mood-btn:active { transform:scale(.92); }
/* NCD command card body */
.ncd-cmd-block { display:flex; align-items:flex-start; gap:6px; background:rgba(0,0,0,0.32); border:1px solid rgba(255,255,255,0.08); border-radius:9px; padding:8px 10px; font-family:var(--font-en); position:relative; }
.ncd-cmd-prompt { font-size:0.85rem; font-weight:700; color:#22c55e; flex-shrink:0; padding-top:1px; user-select:none; }
.ncd-cmd-text { margin:0; font-size:0.76rem; color:rgba(255,255,255,0.8); white-space:pre-wrap; word-break:break-all; flex:1; line-height:1.45; }
.ncd-cmd-copy { position:absolute; top:6px; inset-inline-end:6px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); border-radius:5px; color:rgba(255,255,255,0.5); font-size:0.78rem; cursor:pointer; padding:2px 5px; transition:background .14s, color .14s; }
.ncd-cmd-copy:hover { background:rgba(255,255,255,0.15); color:var(--text); }
/* NCD quicktext card body */
.ncd-qt-block { display:flex; flex-direction:column; gap:6px; }
.ncd-qt-preview { font-size:0.78rem; color:rgba(255,255,255,0.7); line-height:1.5; font-family:var(--font-ar); white-space:pre-wrap; word-break:break-word; max-height:60px; overflow:hidden; }
.ncd-qt-copy { align-self:flex-end; background:rgba(20,184,166,0.12); border:1px solid rgba(20,184,166,0.28); border-radius:7px; color:#14b8a6; font-size:0.78rem; font-weight:600; cursor:pointer; padding:4px 10px; font-family:var(--font-ar); transition:background .14s; }
.ncd-qt-copy:hover { background:rgba(20,184,166,0.24); }
/* NCD code block (extends cmd block) */
.ncd-code-block { padding-inline-start:10px; }
/* NCD content preview (journal, idea) */
.ncd-content-prev { font-size:0.78rem; color:rgba(255,255,255,0.65); line-height:1.5; font-family:var(--font-ar); overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; margin-bottom:4px; }
/* NCD quote block */
.ncd-quote-block { display:flex; flex-direction:column; gap:5px; }
.ncd-quote-text { font-size:0.79rem; color:rgba(255,255,255,0.75); line-height:1.55; font-family:var(--font-ar); margin:0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; border-inline-start:2px solid rgba(167,139,250,0.4); padding-inline-start:8px; }
.ncd-quote-author { font-size:0.7rem; color:rgba(255,255,255,0.38); font-family:var(--font-ar); }
.ncd-quote-copy { align-self:flex-end; margin-top:2px; }
/* NCD week plan list */
.ncd-wp-list { display:flex; flex-direction:column; gap:3px; }
.ncd-wp-item { display:flex; align-items:baseline; gap:5px; }
.ncd-wp-num { font-size:0.68rem; color:rgba(99,102,241,0.7); font-weight:700; flex-shrink:0; min-width:12px; font-family:var(--font-ar); }
.ncd-wp-text { font-size:0.78rem; color:rgba(255,255,255,0.78); font-family:var(--font-ar); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ncd-wp-more { font-size:0.68rem; color:rgba(255,255,255,0.3); margin-top:2px; font-family:var(--font-ar); }
/* NCD contact chips */
.ncd-contact-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.ncd-contact-chip { display:inline-flex; align-items:center; gap:4px; padding:5px 10px; background:rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.24); border-radius:7px; color:#22c55e; font-size:0.78rem; font-weight:600; text-decoration:none; font-family:var(--font-ar); transition:background .14s; cursor:pointer; }
.ncd-contact-chip:hover { background:rgba(34,197,94,0.22); }
.ncd-chip-wa { background:rgba(37,211,102,0.1) !important; border-color:rgba(37,211,102,0.22) !important; color:#25d366 !important; }
.ncd-chip-wa:hover { background:rgba(37,211,102,0.2) !important; }
/* NCD password block */
.ncd-pw-block { display:flex; flex-direction:column; gap:5px; }
.ncd-pw-row { display:flex; align-items:center; gap:6px; padding:5px 8px; background:rgba(255,255,255,0.04); border-radius:7px; }
.ncd-pw-label { font-size:0.72rem; color:rgba(255,255,255,0.4); font-family:var(--font-ar); flex-shrink:0; min-width:52px; }
.ncd-pw-val { font-size:0.78rem; color:var(--text); font-family:var(--font-en); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ncd-pw-dots { font-size:0.78rem; color:rgba(255,255,255,0.5); font-family:var(--font-en); flex:1; letter-spacing:2px; }
.ncd-pw-eye, .ncd-pw-copy { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:5px; color:rgba(255,255,255,0.5); font-size:0.72rem; cursor:pointer; padding:2px 6px; transition:background .14s; flex-shrink:0; }
.ncd-pw-eye:hover, .ncd-pw-copy:hover { background:rgba(255,255,255,0.14); color:var(--text); }
/* ─── NCD: respect prefers-reduced-motion ─────────────── */
@media (prefers-reduced-motion: reduce) {
.ncd-progress-fill,
.ncd-counter-tap,
.ncd-habit-row,
.ncd-habit-dot,
.ncd-tc-btn,
.ncd-cmd-copy,
.ncd-qt-copy,
.ncd-pw-eye, .ncd-pw-copy,
.ncd-reminder-done-btn,
.ncd-contact-chip,
.ncd-mood-btn,
.cld-row { transition: none !important; }
.ncd-counter-tap:active,
.ncd-tc-btn:active,
.ncd-mood-btn.ncd-mood-active,
.ncd-mood-btn:active,
.cld-row:active { transform: none !important; }
.ncd-metric-num.ncd-counter-bump { animation: none !important; }
}
/* ─── Note dashboard card (editor-sheet immersive) ──────── */
.card.note-dash-card {
padding: 0 !important;
overflow: hidden;
border-radius: 16px;
position: relative;
display: flex;
flex-direction: column;
min-height: 310px;
box-shadow: 0 14px 34px rgba(0,0,0,0.48);
transition: box-shadow 0.22s ease, border-color 0.22s ease;
}
.card.note-dash-card:hover {
transform: none !important;
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(139,92,246,0.4);
}
.card.note-dash-card > .bento-glow-bg {
display: none !important;
}
.note-dash-shell {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
height: 100%;
}
.note-dash-hero {
position: relative;
height: 150px;
padding: 12px 15px 10px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 0;
overflow: hidden;
flex-shrink: 0;
}
.note-sev-upcoming .note-dash-hero { background: linear-gradient(135deg, #1a1530 0%, #2d2450 60%, #3f3570 100%); }
.note-sev-none .note-dash-hero { background: linear-gradient(135deg, #1f1f23 0%, #2e2e33 60%, #3d3d44 100%); }
.nd-hero-noise {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 18% 28%, rgba(255,255,255,0.08) 0, transparent 38%),
radial-gradient(circle at 82% 72%, rgba(255,255,255,0.05) 0, transparent 46%);
pointer-events: none;
z-index: 1;
}
.nd-hero-overlay {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 58% 52% at 54% 48%, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.18) 44%, rgba(0,0,0,0) 76%),
linear-gradient(180deg, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.04) 36%, rgba(0,0,0,0.52) 84%, rgba(12,10,18,0.92) 100%);
pointer-events: none;
z-index: 1;
}
.nd-hero-top,
.nd-hero-center,
.nd-hero-bottom {
position: relative;
z-index: 2;
}
.nd-hero-top,
.nd-hero-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.nd-top-badge {
padding: 4px 10px;
border-radius: 999px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
font-size: 0.72rem;
line-height: 1.2;
}
.nd-type-badge {
font-family: var(--font-ar);
font-weight: 700;
}
.nd-meta-badge {
font-family: var(--font-mono, monospace);
color: #c4b5fd;
border-color: rgba(139,92,246,0.4);
}
.nd-hero-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 8px;
text-align: center;
flex: 1;
}
.nd-hero-title {
margin: 0;
font-family: var(--font-ar);
font-size: 1.75rem;
font-weight: 800;
line-height: 1.18;
color: #fff;
letter-spacing: -0.01em;
text-shadow: 0 2px 20px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.75), 0 0 1px rgba(0,0,0,0.5);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.nd-hero-title-empty {
color: rgba(255,255,255,0.55);
font-weight: 600;
font-size: 1.4rem;
}
.nd-hero-tail {
font-family: var(--font-ar);
font-size: 0.78rem;
color: rgba(255,255,255,0.88);
text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.7);
}
.nd-hero-bottom {
align-items: center;
justify-content: flex-start;
min-height: 0;
}
.nd-hero-bottom:empty,
.nd-hero-bottom:has(.nd-preview:empty) { display: none; }
.nd-preview {
flex: 1;
min-width: 0;
font-family: var(--font-ar);
font-size: 0.85rem;
color: rgba(255,255,255,0.82);
text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.7);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.92;
}
.nd-preview:empty { display: none; }
.nd-line-empty {
color: rgba(255,255,255,0.45);
}
.note-dash-body {
padding: 10px 12px 8px;
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-height: 0;
max-height: 180px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.note-dash-body::-webkit-scrollbar { width: 6px; }
.note-dash-body::-webkit-scrollbar-track { background: transparent; }
.note-dash-body::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.1);
border-radius: 3px;
}
.nd-row {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 10px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 9px;
transition: background 0.15s, border-color 0.15s;
}
.nd-row:hover {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.1);
}
.nd-row-text {
flex: 1;
min-width: 0;
font-family: var(--font-ar);
font-size: 0.84rem;
color: rgba(255,255,255,0.88);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nd-empty {
padding: 16px;
text-align: center;
color: var(--muted);
font-family: var(--font-ar);
font-size: 0.82rem;
}
.note-dash-foot {
padding: 8px 14px 10px;
border-top: 1px dashed rgba(255,255,255,0.08);
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.nd-foot-time {
font-family: var(--font-mono, monospace);
font-size: 0.72rem;
color: var(--muted);
opacity: 0.8;
}
.nd-foot-actions {
display: flex;
align-items: center;
gap: 6px;
}
.nd-foot-btn {
padding: 5px 11px;
background: transparent;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 999px;
color: rgba(255,255,255,0.88);
font-family: var(--font-ar);
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.nd-foot-btn:hover {
background: rgba(139,92,246,0.12);
border-color: rgba(139,92,246,0.35);
color: #fff;
}
.card.note-dash-card .card-actions {
position: absolute;
top: 10px;
left: 10px;
z-index: 4;
display: flex;
gap: 4px;
opacity: 0;
transition: opacity 0.18s;
}
.card.note-dash-card:hover .card-actions { opacity: 1; }
.card.note-dash-card .card-actions button {
background: rgba(0,0,0,0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
border-radius: 8px;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
cursor: pointer;
}
.card.note-dash-card .card-actions .card-delete:hover {
background: rgba(239,68,68,0.6);
}
.card.note-dash-card .card-actions .card-edit:hover {
background: rgba(139,92,246,0.7);
}
@media (max-width: 640px) {
.card.note-dash-card {
height: 372px;
min-height: 372px;
}
.note-dash-hero {
height: 170px;
padding: 11px 13px;
}
.nd-hero-title { font-size: 1.4rem; }
.nd-hero-tail { font-size: 0.72rem; }
.nd-preview { font-size: 0.78rem; }
.note-dash-body { max-height: 180px; }
}
/* ════════════════════════════════════════════════════════
WiFi Dash Card (hero-first)
════════════════════════════════════════════════════════ */
.card.wifi-dash-card {
padding: 0 !important;
overflow: hidden;
border-radius: 16px;
position: relative;
display: flex;
flex-direction: column;
min-height: 360px;
box-shadow: 0 14px 34px rgba(0,0,0,0.48);
transition: box-shadow 0.22s ease;
}
.card.wifi-dash-card:hover {
transform: none !important;
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(20,184,166,0.35);
}
.card.wifi-dash-card > .bento-glow-bg { display: none !important; }
.wifi-dash-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
.wifi-dash-hero {
position: relative;
height: 180px;
padding: 13px 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
flex-shrink: 0;
}
.wifi-sev-ok .wifi-dash-hero { background: linear-gradient(135deg, #0a2825 0%, #1a4540 60%, #276660 100%); }
.wifi-sev-none .wifi-dash-hero { background: linear-gradient(135deg, #1f1f23 0%, #2e2e33 60%, #3d3d44 100%); }
.wd-hero-noise {
position: absolute; inset: 0; pointer-events: none; z-index: 1;
background-image:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.07) 0, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(255,255,255,0.05) 0, transparent 45%);
}
.wd-hero-art {
position: absolute;
top: 50%;
left: 16px;
transform: translateY(-50%);
z-index: 0;
pointer-events: none;
color: #5eead4;
opacity: 0.28;
filter: drop-shadow(0 4px 16px rgba(0,0,0,0.55));
}
.wd-art-wave { width: 128px; height: 128px; }
.wd-hero-overlay {
position: absolute; inset: 0; pointer-events: none; z-index: 1;
background:
radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 75%),
linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.55) 80%, rgba(12,10,18,0.9) 100%);
}
.wd-hero-top, .wd-hero-center, .wd-hero-bottom { position: relative; z-index: 2; }
.wd-hero-top {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.wd-top-badge {
padding: 4px 10px; border-radius: 999px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff; font-family: var(--font-ar);
font-size: 0.72rem; line-height: 1.2;
}
.wd-sec-locked { color: #99f6e4; border-color: rgba(20,184,166,0.45); }
.wd-sec-open { color: #fde68a; border-color: rgba(251,191,36,0.45); }
.wd-hero-center {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px; padding: 0 8px; text-align: center;
}
.wd-ssid {
margin: 0;
font-family: var(--font-mono, monospace);
font-size: 1.75rem; font-weight: 800; line-height: 1.15;
color: #fff;
letter-spacing: 0.01em;
word-break: break-all;
text-shadow: 0 2px 10px rgba(0,0,0,0.18);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wd-ssid mark {
background: transparent;
color: inherit;
padding: 0;
border-radius: 0;
box-shadow: none;
}
.wd-note {
font-family: var(--font-ar); font-size: 0.78rem;
color: rgba(255,255,255,0.88);
text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.7);
}
.wd-hero-bottom {
display: flex; justify-content: center; align-items: center; min-height: 20px;
}
.wd-hint {
font-family: var(--font-ar); font-size: 0.72rem;
color: rgba(255,255,255,0.7);
text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.wifi-dash-body {
padding: 12px 14px;
display: flex; flex-direction: column; gap: 6px;
flex: 1;
}
.wd-pass-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
}
.wd-pass-label {
font-family: var(--font-ar); font-size: 0.72rem;
color: rgba(255,255,255,0.6);
flex-shrink: 0;
}
.wd-pass-dots {
flex: 1;
font-family: var(--font-mono, monospace);
font-size: 0.95rem;
color: #fff;
letter-spacing: 0.05em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wd-pass-btn {
padding: 5px 10px;
background: rgba(20,184,166,0.1);
border: 1px solid rgba(20,184,166,0.25);
border-radius: 7px;
color: #99f6e4; cursor: pointer; font-size: 0.85rem;
transition: background 0.15s;
}
.wd-pass-btn:hover { background: rgba(20,184,166,0.2); }
.wd-empty {
padding: 14px; text-align: center;
color: rgba(255,255,255,0.5);
font-family: var(--font-ar); font-size: 0.82rem;
}
.wifi-dash-foot {
padding: 10px 14px;
border-top: 1px dashed rgba(255,255,255,0.08);
display: flex; justify-content: space-between; align-items: center;
gap: 8px; flex-shrink: 0; min-height: 52px;
}
.wd-foot-actions { display: flex; gap: 6px; }
.wd-foot-btn {
padding: 5px 12px;
background: transparent;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 999px;
color: rgba(255,255,255,0.88);
font-family: var(--font-ar); font-size: 0.78rem; font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.wd-foot-btn:hover {
background: rgba(20,184,166,0.12);
border-color: rgba(20,184,166,0.4);
color: #fff;
}
.wd-foot-time {
font-family: var(--font-mono, monospace); font-size: 0.72rem;
color: var(--muted); opacity: 0.8;
}
.card.wifi-dash-card .card-actions {
position: absolute; top: 10px; left: 10px; z-index: 4;
display: flex; gap: 4px; opacity: 0; transition: opacity 0.18s;
}
.card.wifi-dash-card:hover .card-actions { opacity: 1; }
.card.wifi-dash-card .card-actions button {
background: rgba(0,0,0,0.55);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff; border-radius: 8px;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.8rem; cursor: pointer;
}
/* ════════════════════════════════════════════════════════
Link Dash Card · Spec-compliant (2025-04)
─────────────────────────────────────────────────────
Header Zone : 44px — badges (type + domain)
Hero Zone : flex:1 — favicon art + title + url
Footer Zone : 52px — actions (فتح / نسخ) + time
Horizontal padding : 16px throughout
Border radius : 20px card / 20px badges (pill)
Typography : title 26px/900 · url 12px/400
════════════════════════════════════════════════════════ */
.card.link-dash-card {
padding: 0 !important;
overflow: hidden;
border-radius: 16px;
position: relative;
display: flex;
flex-direction: column;
min-height: 360px;
box-shadow: 0 14px 34px rgba(0,0,0,0.48);
transition: box-shadow 0.22s ease;
}
.card.link-dash-card:hover {
transform: none !important;
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(139,92,246,0.35);
}
.card.link-dash-card > .bento-glow-bg { display: none !important; }
.link-dash-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
/* ── Hero Zone (matches .wifi-dash-hero pattern) ── */
.link-dash-hero {
position: relative;
height: 180px;
padding: 13px 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
flex-shrink: 0;
}
.link-sev-upcoming .link-dash-hero { background: linear-gradient(135deg, #1a1530 0%, #2d2450 60%, #3a3060 100%); }
.link-sev-none .link-dash-hero { background: linear-gradient(135deg, #1c1c22 0%, #28282f 60%, #323238 100%); }
.ld-hero-noise {
position: absolute; inset: 0; pointer-events: none; z-index: 1;
background-image:
radial-gradient(circle at 15% 25%, rgba(255,255,255,0.07) 0, transparent 38%),
radial-gradient(circle at 82% 72%, rgba(255,255,255,0.05) 0, transparent 42%);
}
.ld-hero-art {
position: absolute;
top: 50%;
left: 16px;
transform: translateY(-50%);
z-index: 0; pointer-events: none;
opacity: 0.28;
filter: drop-shadow(0 4px 16px rgba(0,0,0,0.55));
}
.ld-art-favicon {
width: 128px; height: 128px;
border-radius: 22px;
object-fit: contain;
background: rgba(255,255,255,0.03);
}
.ld-hero-overlay {
position: absolute; inset: 0; pointer-events: none; z-index: 1;
background:
radial-gradient(ellipse 60% 55% at 42% 50%, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.22) 48%, transparent 76%),
linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.55) 80%, rgba(12,10,18,0.9) 100%);
}
.ld-hero-top, .ld-hero-center, .ld-hero-bottom { position: relative; z-index: 2; }
.ld-hero-top {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.ld-top-badge {
padding: 4px 10px; border-radius: 999px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff; font-family: var(--font-ar);
font-size: 0.72rem; line-height: 1.2;
font-weight: 700;
white-space: nowrap;
}
.ld-type-badge { color: #ddd6fe; border-color: rgba(139,92,246,0.45); }
.ld-domain-badge {
color: #c4b5fd;
font-family: var(--font-mono, monospace);
font-size: 0.7rem;
max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}
.ld-hero-center {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px;
text-align: center;
padding: 0 8px;
}
.ld-title {
margin: 0;
font-family: var(--font-ar);
font-size: 1.75rem;
font-weight: 900;
line-height: 1.15;
color: #fff;
letter-spacing: 0.01em;
text-shadow: 0 2px 10px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.7);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
word-break: break-word;
}
.ld-hero-bottom {
display: flex; justify-content: center; align-items: center; min-height: 20px;
}
.ld-hint {
font-family: var(--font-ar);
font-size: 0.72rem;
color: rgba(255,255,255,0.7);
text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
/* ── Body Zone (mirrors .wifi-dash-body + .wd-pass-row) ── */
.link-dash-body {
padding: 12px 14px;
display: flex; flex-direction: column; gap: 6px;
flex: 1;
}
.ld-url-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
}
.ld-url-label {
font-family: var(--font-ar);
font-size: 0.78rem;
font-weight: 600;
color: rgba(255,255,255,0.55);
flex-shrink: 0;
}
.ld-url-val {
flex: 1;
font-family: var(--font-mono, monospace);
font-size: 0.82rem;
font-weight: 500;
color: #c4b5fd;
direction: ltr;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.ld-url-btn {
flex-shrink: 0;
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(139,92,246,0.12);
border: 1px solid rgba(139,92,246,0.3);
color: #ddd6fe;
border-radius: 8px;
font-size: 0.95rem; font-weight: 700;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.ld-url-btn:hover {
background: rgba(139,92,246,0.22);
border-color: rgba(139,92,246,0.5);
color: #fff;
}
/* ── Footer Zone (mirrors .wifi-dash-foot) ── */
.link-dash-foot {
padding: 10px 14px;
border-top: 1px dashed rgba(255,255,255,0.08);
display: flex; justify-content: space-between; align-items: center;
gap: 8px;
flex-shrink: 0;
min-height: 52px;
}
.ld-foot-actions { display: flex; gap: 6px; }
.ld-foot-btn {
padding: 5px 12px;
background: transparent;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 999px;
color: rgba(255,255,255,0.88);
font-family: var(--font-ar); font-size: 0.78rem; font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.ld-foot-btn:hover {
background: rgba(139,92,246,0.12);
border-color: rgba(139,92,246,0.4);
color: #fff;
}
.ld-foot-btn-primary {
background: rgba(139,92,246,0.2);
border-color: rgba(139,92,246,0.45);
color: #ddd6fe;
}
.ld-foot-btn-primary:hover {
background: rgba(139,92,246,0.32);
border-color: rgba(139,92,246,0.65);
color: #fff;
}
.ld-foot-time {
font-family: var(--font-mono, monospace);
font-size: 0.72rem;
color: var(--muted); opacity: 0.8;
}
/* ── Card actions (hover) ── */
.card.link-dash-card .card-actions {
position: absolute; top: 10px; left: 10px; z-index: 4;
display: flex; gap: 4px; opacity: 0; transition: opacity 0.18s;
}
.card.link-dash-card:hover .card-actions { opacity: 1; }
.card.link-dash-card .card-actions button {
background: rgba(0,0,0,0.6);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff; border-radius: 8px;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.8rem; cursor: pointer;
}
/* Link page parity: old .filter-links rules used to compress link cards.
Keep link cards on the exact same shell measurements as Wi-Fi cards. */
.dashboard.filter-links .dash-grid .card.link-dash-card[data-type="link"] {
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
min-height: 320px !important;
height: 320px !important;
max-width: none !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
gap: 0 !important;
align-items: stretch !important;
border-radius: 16px !important;
}
.dashboard.filter-links .dash-grid .card.link-dash-card[data-type="link"] .link-dash-shell {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
height: 100% !important;
width: 100% !important;
}
.dashboard.filter-links .dash-grid .card.link-dash-card[data-type="link"] .link-dash-hero {
height: 152px !important;
min-height: 152px !important;
padding: 12px 14px !important;
flex-shrink: 0 !important;
}
.dashboard.filter-links .dash-grid .card.link-dash-card[data-type="link"] .ld-art-favicon {
width: 104px !important;
height: 104px !important;
border-radius: 18px !important;
}
.dashboard.filter-links .dash-grid .card.link-dash-card[data-type="link"] .ld-title {
font-size: 1.55rem !important;
}
.dashboard.filter-links .dash-grid .card.link-dash-card[data-type="link"] .link-dash-body {
padding: 10px 14px !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
flex: 1 1 auto !important;
}
.dashboard.filter-links .dash-grid .card.link-dash-card[data-type="link"] .ld-url-row {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 9px 11px !important;
border-radius: 10px !important;
}
.dashboard.filter-links .dash-grid .card.link-dash-card[data-type="link"] .link-dash-foot {
min-height: 48px !important;
padding: 8px 14px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 8px !important;
flex-shrink: 0 !important;
}
.dashboard.filter-links .dash-grid .card.link-dash-card[data-type="link"] .card-actions {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
bottom: auto !important;
display: flex !important;
gap: 4px !important;
opacity: 0 !important;
transform: none !important;
pointer-events: none !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
justify-self: auto !important;
align-self: auto !important;
}
.dashboard.filter-links .dash-grid .card.link-dash-card[data-type="link"]:hover .card-actions,
.dashboard.filter-links .dash-grid .card.link-dash-card[data-type="link"].card-expanded .card-actions {
opacity: 1 !important;
pointer-events: auto !important;
}
.dashboard.filter-links .dash-grid .card.link-dash-card[data-type="link"] .card-type-badge,
.dashboard.filter-links .dash-grid .card.link-dash-card[data-type="link"] .card-icon,
.dashboard.filter-links .dash-grid .card.link-dash-card[data-type="link"] .card-title,
.dashboard.filter-links .dash-grid .card.link-dash-card[data-type="link"] .card-meta,
.dashboard.filter-links .dash-grid .card.link-dash-card[data-type="link"] .card-timestamp {
display: none !important;
}
/* ════════════════════════════════════════════════════════
Page Dash Card (hero-first)
════════════════════════════════════════════════════════ */
.card.page-dash-card {
padding: 0 !important;
overflow: hidden;
border-radius: 16px;
position: relative;
display: flex;
flex-direction: column;
min-height: 340px;
box-shadow: 0 14px 34px rgba(0,0,0,0.48);
transition: box-shadow 0.22s ease;
}
.card.page-dash-card:hover {
transform: none !important;
box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(251,191,36,0.35);
}
.card.page-dash-card > .bento-glow-bg { display: none !important; }
.page-dash-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
.page-dash-hero {
position: relative;
height: 190px;
padding: 13px 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
flex-shrink: 0;
}
.page-sev-none .page-dash-hero { background: linear-gradient(135deg, #2a1e08 0%, #4d3810 60%, #6b5020 100%); }
.page-sev-upcoming .page-dash-hero { background: linear-gradient(135deg, #1a1530 0%, #2d2450 60%, #3f3570 100%); }
.pd-hero-noise {
position: absolute; inset: 0; pointer-events: none; z-index: 1;
background-image:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.07) 0, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(255,255,255,0.05) 0, transparent 45%);
}
.pd-hero-art {
position: absolute;
top: 50%;
left: 14px;
transform: translateY(-50%) rotate(-8deg);
z-index: 0;
pointer-events: none;
color: #fbbf24;
opacity: 0.18;
filter: drop-shadow(0 4px 18px rgba(0,0,0,0.6));
}
.pd-art-folder { width: 140px; height: 112px; }
.pd-hero-overlay {
position: absolute; inset: 0; pointer-events: none; z-index: 1;
background:
radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 75%),
linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.55) 80%, rgba(12,10,18,0.9) 100%);
}
.pd-hero-top, .pd-hero-center, .pd-hero-bottom { position: relative; z-index: 2; }
.pd-hero-top {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.pd-top-badge {
padding: 4px 10px; border-radius: 999px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff; font-size: 0.72rem; line-height: 1.2;
font-family: var(--font-ar);
}
.pd-count-badge {
color: #fde68a; border-color: rgba(251,191,36,0.4);
font-family: var(--font-mono, monospace);
}
.pd-hero-center {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; padding: 0 8px; text-align: center;
}
.pd-title {
margin: 0;
font-family: var(--font-ar);
font-size: 1.9rem; font-weight: 800; line-height: 1.15;
color: #fff;
letter-spacing: -0.01em;
text-shadow: 0 2px 20px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.75), 0 0 1px rgba(0,0,0,0.5);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
word-break: break-word;
direction: ltr;
}
.pd-tail {
font-family: var(--font-ar); font-size: 0.78rem;
color: rgba(255,255,255,0.88);
text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.7);
}
.pd-hero-bottom {
display: flex; justify-content: flex-end; align-items: center; min-height: 24px;
}
.pd-breakdown { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.pd-type-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 999px;
font-size: 0.68rem;
color: rgba(255,255,255,0.88);
}
.pd-type-icon { font-size: 0.85rem; }
.pd-type-n { font-family: var(--font-mono, monospace); font-weight: 700; }
.page-dash-body {
padding: 10px 12px 8px;
display: flex; flex-direction: column; gap: 4px;
flex: 1;
max-height: 200px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.page-dash-body::-webkit-scrollbar { width: 6px; }
.page-dash-body::-webkit-scrollbar-track { background: transparent; }
.page-dash-body::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.1); border-radius: 3px;
}
.pd-row {
display: flex; align-items: center; gap: 10px;
padding: 7px 10px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 9px;
transition: background 0.15s, border-color 0.15s;
}
.pd-row:hover {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.1);
}
.pd-row-icon {
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 7px;
background: rgba(251,191,36,0.1);
border: 1px solid rgba(251,191,36,0.18);
flex-shrink: 0;
font-size: 0.9rem;
}
.pd-row-title {
flex: 1; min-width: 0;
font-family: var(--font-ar);
font-size: 0.84rem;
color: rgba(255,255,255,0.88);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pd-empty {
padding: 16px; text-align: center;
color: var(--muted);
font-family: var(--font-ar); font-size: 0.82rem;
}
.page-dash-foot {
padding: 10px 14px;
border-top: 1px dashed rgba(255,255,255,0.08);
display: flex; justify-content: space-between; align-items: center;
gap: 8px; flex-shrink: 0; min-height: 52px;
}
.pd-foot-actions { display: flex; gap: 6px; }
.pd-foot-btn {
padding: 5px 12px;
background: transparent;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 999px;
color: rgba(255,255,255,0.88);
font-family: var(--font-ar); font-size: 0.78rem; font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.pd-foot-btn:hover {
background: rgba(251,191,36,0.12);
border-color: rgba(251,191,36,0.4);
color: #fff;
}
.pd-foot-btn-primary {
background: rgba(251,191,36,0.18);
border-color: rgba(251,191,36,0.45);
color: #fde68a;
}
.pd-foot-btn-primary:hover {
background: rgba(251,191,36,0.3);
border-color: rgba(251,191,36,0.65);
}
.pd-foot-time {
font-family: var(--font-mono, monospace); font-size: 0.72rem;
color: var(--muted); opacity: 0.8;
}
.card.page-dash-card .card-actions {
position: absolute; top: 10px; left: 10px; z-index: 4;
display: flex; gap: 4px; opacity: 0; transition: opacity 0.18s;
}
.card.page-dash-card:hover .card-actions { opacity: 1; }
.card.page-dash-card .card-actions button {
background: rgba(0,0,0,0.55);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff; border-radius: 8px;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.8rem; cursor: pointer;
}
/* ─── Dashboard Card Size Parity ───────────────────────────
Desktop cards must keep the same footprint in every filter.
The shell stays fixed; inner bodies adapt with scroll. */
@media (min-width: 769px) {
.dash-grid .card.trip-dash-card,
.dash-grid .card.status-dash-card,
.dash-grid .card.sub-dash-card,
.dash-grid .card.checklist-dash-card,
.dash-grid .card.note-dash-card,
.dash-grid .card.wifi-dash-card,
.dash-grid .card.link-dash-card,
.dash-grid .card.page-dash-card,
.dash-grid .card.doc-dash-card,
.dash-grid .card.stocks-dash-card,
.dash-grid .card.vehicle-dash-card,
.dash-grid .card.medicine-dash-card,
#page-grid .card.trip-dash-card,
#page-grid .card.status-dash-card,
#page-grid .card.sub-dash-card,
#page-grid .card.checklist-dash-card,
#page-grid .card.note-dash-card,
#page-grid .card.wifi-dash-card,
#page-grid .card.link-dash-card,
#page-grid .card.page-dash-card,
#page-grid .card.doc-dash-card,
#page-grid .card.stocks-dash-card,
#page-grid .card.vehicle-dash-card,
#page-grid .card.medicine-dash-card {
display: flex !important;
flex-direction: column !important;
height: 320px !important;
min-height: 320px !important;
align-self: start !important;
}
.dash-grid .trip-dash-shell,
.dash-grid .status-dash-shell,
.dash-grid .sub-dash-shell,
.dash-grid .checklist-dash-shell,
.dash-grid .note-dash-shell,
.dash-grid .wifi-dash-shell,
.dash-grid .link-dash-shell,
.dash-grid .page-dash-shell,
.dash-grid .doc-dash-shell,
.dash-grid .stocks-dash-shell,
.dash-grid .vehicle-dash-shell,
.dash-grid .medicine-dash-shell,
#page-grid .trip-dash-shell,
#page-grid .status-dash-shell,
#page-grid .sub-dash-shell,
#page-grid .checklist-dash-shell,
#page-grid .note-dash-shell,
#page-grid .wifi-dash-shell,
#page-grid .link-dash-shell,
#page-grid .page-dash-shell,
#page-grid .doc-dash-shell,
#page-grid .stocks-dash-shell,
#page-grid .vehicle-dash-shell,
#page-grid .medicine-dash-shell {
flex: 1 1 auto !important;
min-height: 0 !important;
height: 100% !important;
}
.dash-grid .trip-dash-body,
.dash-grid .status-dash-body,
.dash-grid .sub-dash-body,
.dash-grid .checklist-dash-body,
.dash-grid .note-dash-body,
.dash-grid .wifi-dash-body,
.dash-grid .link-dash-body,
.dash-grid .page-dash-body,
.dash-grid .doc-dash-body,
.dash-grid .stocks-dash-body,
.dash-grid .vehicle-dash-body,
.dash-grid .medicine-dash-body,
#page-grid .trip-dash-body,
#page-grid .status-dash-body,
#page-grid .sub-dash-body,
#page-grid .checklist-dash-body,
#page-grid .note-dash-body,
#page-grid .wifi-dash-body,
#page-grid .link-dash-body,
#page-grid .page-dash-body,
#page-grid .doc-dash-body,
#page-grid .stocks-dash-body,
#page-grid .vehicle-dash-body,
#page-grid .medicine-dash-body {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: none !important;
overflow-y: auto !important;
}
}
/* Mobile tweaks */
@media (max-width: 640px) {
.card.wifi-dash-card { min-height: 320px; }
.wifi-dash-hero { height: 160px; padding: 11px 13px; }
.wd-ssid { font-size: 1.4rem; }
.wd-art-wave { width: 108px; height: 108px; }
.card.link-dash-card { min-height: 320px; }
.link-dash-hero { height: 160px; padding: 11px 13px; }
.ld-title { font-size: 1.4rem; }
.ld-url-val { font-size: 0.74rem; }
.ld-art-favicon { width: 108px; height: 108px; }
.card.page-dash-card { min-height: 310px; }
.page-dash-hero { height: 170px; padding: 11px 13px; }
.pd-title { font-size: 1.5rem; }
.pd-art-folder { width: 116px; height: 92px; }
.page-dash-body { max-height: 170px; }
}
/* ─── Global window close + delete consistency ────────────────────────── */
.modal-box,
.fp-sheet,
.pomodoro-sheet,
.sp-panel,
.ctx-sheet,
.tp-shell,
.te-shell,
.approval-popup-inner,
.act-sheet,
.goals-sheet {
position: relative;
}
.modal-header,
.fp-header,
.pomodoro-header,
.sp-head,
.ctx-sheet-head,
.tp-header,
.act-header,
.goals-header {
position: relative;
padding-left: 58px;
}
.close-btn,
.fp-close,
.pomodoro-close,
.sp-close-btn,
.ctx-sheet-close,
.tp-close,
.te-close-window,
.act-close,
.goals-close {
position: absolute !important;
top: 16px;
left: 16px;
z-index: 12;
width: 34px;
height: 34px;
padding: 0;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(239,68,68,0.14) !important;
border: 1px solid rgba(239,68,68,0.26) !important;
color: #fca5a5 !important;
box-shadow: 0 10px 24px rgba(0,0,0,0.22);
transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.close-btn:hover,
.fp-close:hover,
.pomodoro-close:hover,
.sp-close-btn:hover,
.ctx-sheet-close:hover,
.tp-close:hover,
.te-close-window:hover,
.act-close:hover,
.goals-close:hover {
background: rgba(239,68,68,0.22) !important;
border-color: rgba(239,68,68,0.45) !important;
color: #fff !important;
transform: scale(1.04);
}
.card-delete,
.btn-remove-item,
.btn-remove-doc,
.btn-remove-sub,
.trip-card-del,
.trip-booking-del,
.trip-dest-del,
.goal-delete,
.sn-delete-btn,
.settings-tag-del,
.bulk-act-danger,
.ctx-item.ctx-danger {
color: #fca5a5 !important;
border-color: rgba(239,68,68,0.28) !important;
background: rgba(239,68,68,0.12) !important;
}
.card-delete:hover,
.btn-remove-item:hover,
.btn-remove-doc:hover,
.btn-remove-sub:hover,
.trip-card-del:hover,
.trip-booking-del:hover,
.trip-dest-del:hover,
.goal-delete:hover,
.sn-delete-btn:hover,
.settings-tag-del:hover,
.bulk-act-danger:hover,
.ctx-item.ctx-danger:hover {
color: #fff !important;
background: rgba(239,68,68,0.22) !important;
border-color: rgba(239,68,68,0.46) !important;
}
/* ─── Secure Portal Login Landing ─────────────────────────────────────── */
.login-screen {
display: grid !important;
place-items: center !important;
min-height: 100dvh !important;
padding: clamp(20px, 4vw, 48px) !important;
background:
radial-gradient(circle at 50% 42%, rgba(89,216,255,0.12), transparent 18%),
radial-gradient(circle at 18% 92%, rgba(48,213,160,0.12), transparent 24%),
radial-gradient(circle at 86% 8%, rgba(139,92,246,0.12), transparent 26%),
linear-gradient(180deg, rgba(3, 8, 14, 0.96), rgba(4, 9, 15, 0.99)) !important;
overflow: hidden !important;
}
.login-screen::before,
.login-screen::after {
content: '';
position: absolute;
pointer-events: none;
}
.login-screen::before {
inset: 0;
background:
linear-gradient(to right, rgba(108,140,180,0.09) 1px, transparent 1px),
linear-gradient(to bottom, rgba(108,140,180,0.09) 1px, transparent 1px);
background-size: 64px 64px;
opacity: 0.34;
mask-image: radial-gradient(circle at 50% 48%, rgba(0,0,0,0.92), transparent 72%);
}
.login-screen::after {
width: min(76vw, 920px);
height: min(76vw, 920px);
border-radius: 999px;
left: 50%;
top: 50%;
transform: translate(-50%, -48%);
background:
radial-gradient(circle, rgba(89,216,255,0.08), transparent 58%),
radial-gradient(circle at 66% 34%, rgba(255,79,170,0.06), transparent 42%);
filter: blur(18px);
}
.login-grid {
opacity: 0 !important;
}
.login-noise {
opacity: 0.07 !important;
mix-blend-mode: screen;
}
.login-box {
width: min(92vw, 540px) !important;
min-height: 430px;
padding: 34px 38px 30px !important;
gap: 16px !important;
align-items: center !important;
justify-content: center;
border-radius: 34px !important;
background:
linear-gradient(90deg, rgba(89,216,255,0.85), rgba(255,79,170,0.28)) top/100% 2px no-repeat,
radial-gradient(circle at 50% 0%, rgba(89,216,255,0.11), transparent 34%),
linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)),
rgba(8, 14, 22, 0.9) !important;
border: 1px solid rgba(125,164,212,0.18) !important;
box-shadow:
0 36px 90px rgba(0,0,0,0.68),
0 0 0 1px rgba(89,216,255,0.05),
inset 0 1px 0 rgba(255,255,255,0.06) !important;
backdrop-filter: blur(22px) saturate(118%);
-webkit-backdrop-filter: blur(22px) saturate(118%);
z-index: 1;
}
.login-box::before {
top: 128px !important;
background: linear-gradient(90deg, transparent, rgba(118,149,188,0.18), transparent) !important;
}
.login-box::after {
width: 280px !important;
height: 280px !important;
left: -96px !important;
bottom: -142px !important;
background: radial-gradient(circle, rgba(89,216,255,0.22), transparent 68%) !important;
}
.login-portal-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 13px;
border-radius: 999px;
background: rgba(0,0,0,0.34);
border: 1px solid rgba(125,164,212,0.16);
color: rgba(210,222,240,0.74);
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.14em;
direction: ltr;
}
.login-portal-kicker span {
width: 7px;
height: 7px;
border-radius: 50%;
background: #36d399;
box-shadow: 0 0 16px rgba(54,211,153,0.8);
}
.login-logo {
font-size: clamp(2rem, 2.9vw, 2.55rem) !important;
line-height: 1;
margin: 12px 0 4px !important;
letter-spacing: 0.06em !important;
padding: 0;
border-radius: 0;
background: transparent;
border: 0;
text-shadow: none;
cursor: pointer;
transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.login-logo:hover {
transform: translateY(-2px) scale(1.015);
filter: brightness(1.08);
}
.login-logo:active {
transform: translateY(0) scale(0.99);
}
.login-logo:focus-visible {
outline: 2px solid rgba(89,216,255,0.7);
outline-offset: 8px;
border-radius: 18px;
}
.login-logo img {
display: block;
width: clamp(320px, 42vw, 460px);
height: auto;
user-select: none;
-webkit-user-drag: none;
filter:
drop-shadow(0 18px 34px rgba(0,0,0,0.5))
drop-shadow(0 0 18px rgba(255,255,255,0.05));
}
.login-logo .logo-letter {
background: linear-gradient(180deg, #f4f6fb 0%, #b5bcc8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.login-logo .logo-dot {
color: var(--accent);
margin: 0 2px;
opacity: 0.95;
text-shadow: 0 0 18px rgba(139,92,246,0.34);
}
.login-portal-subtitle {
margin: -4px 0 10px;
color: rgba(218,226,238,0.78);
font-family: var(--font-ar);
font-size: 0.98rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.login-box #request-access-wrap,
.login-box #waiting-approval {
width: min(100%, 390px) !important;
margin-top: 4px;
background:
linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01)),
rgba(3, 10, 18, 0.56) !important;
border-color: rgba(125,164,212,0.13) !important;
}
.login-box .biometric-btn,
.login-box .request-access-btn {
width: min(100%, 390px) !important;
min-height: 60px !important;
border-radius: 20px !important;
}
.login-box .pin-fallback-link {
margin-top: 4px !important;
}
@media (max-width: 768px) {
.login-screen {
padding: 20px 16px !important;
overflow: auto !important;
}
.login-box {
width: min(100%, 390px) !important;
min-height: 390px;
padding: 28px 20px 22px !important;
border-radius: 28px !important;
}
.login-box::before {
top: 116px !important;
}
.login-portal-kicker {
font-size: 0.62rem;
padding: 6px 11px;
}
.login-logo {
font-size: clamp(1.9rem, 9.5vw, 2.45rem) !important;
margin-bottom: 0 !important;
padding: 0;
}
.login-logo img {
width: clamp(270px, 78vw, 350px);
}
.login-portal-subtitle {
font-size: 0.9rem;
margin-bottom: 8px;
}
}
/* Header brand mark uses the uploaded A.N.A logo instead of text. */
.dash-logo {
/* Strip native