/* ════════════════════════════════════════════
   UI UPGRADE — Professional Modern Design
   ════════════════════════════════════════════ */

/* ── CSS Variables (light default) ── */
:root {
    --primary: #4f46e5;
    --primary-light: #6366f1;
    --primary-dark: #3730a3;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --text: #1e293b;
    --text-muted: #64748b;
    --card-bg: #ffffff;
    --col-bg: #f8fafc;
    --border: #e2e8f0;
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
    --radius: 14px;
    --radius-sm: 8px;
    --radius-lg: 20px;
}

/* ── Dark Mode ── */
body.dark-mode {
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --card-bg: #1e293b;
    --col-bg: #0f172a;
    --border: #334155;
    --shadow: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.4);
    background: #0f172a !important;
}

/* ── Base ── */
* { box-sizing: border-box; }
body { font-family: 'Cairo', sans-serif; background: #f1f5f9; color: var(--text); transition: background 0.3s, color 0.3s; }

/* ── Header Upgrade ── */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
    flex-wrap: wrap;
    gap: 8px;
}
.header h2 { font-size: 18px; margin: 0; background: linear-gradient(135deg, var(--primary), #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ── Buttons Upgrade ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    text-decoration: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); filter: brightness(1.05); }
.btn:active { transform: translateY(0); }
.btn-p { background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: white; box-shadow: 0 2px 8px rgba(79,70,229,0.3); }
.btn-del { background: #fee2e2; color: #dc2626; }
.btn-del:hover { background: #fecaca; }

/* ── Task Cards Upgrade ── */
.task-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.task-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 4px;
    height: 100%;
    background: var(--primary);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.task-card:hover { transform: translateY(-2px) translateX(-2px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
.task-card.urgent::before { background: var(--danger); }
.task-card.urgent { border-color: #fecaca; }

/* ── Columns Upgrade ── */
.column {
    background: var(--col-bg);
    border-radius: var(--radius-lg);
    padding: 16px;
    min-height: 200px;
    flex: 1;
    min-width: 220px;
    border: 1px solid var(--border);
    transition: all 0.2s;
}
.column h3 { font-size: 14px; font-weight: 800; margin: 0 0 14px 0; display: flex; align-items: center; gap: 8px; }
.col-count { background: var(--primary); color: white; border-radius: 20px; padding: 1px 10px; font-size: 11px; }

/* ── Board ── */
.board {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 10px;
}

/* ── KPI Stats Cards ── */
.stat-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 18px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    text-align: center;
    transition: all 0.2s;
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ── Modals Upgrade ── */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9000;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 20px;
}
.modal-content {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 28px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    animation: modalIn 0.25s cubic-bezier(0.4,0,0.2,1);
    width: 750px;
}
@keyframes modalIn { from { opacity:0; transform:scale(0.95) translateY(10px); } to { opacity:1; transform:scale(1) translateY(0); } }
.modal-body { }

/* ── Forms ── */
input, select, textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    background: var(--card-bg);
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    margin-bottom: 10px;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
}
input[type="file"] { padding: 7px; }
input[type="checkbox"] { width: auto; transform: scale(1.4); }
input[type="date"], input[type="time"], input[type="month"] { cursor: pointer; }

/* ── Tables ── */
.fin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fin-table thead tr { background: linear-gradient(135deg, var(--primary), #6366f1); }
.fin-table th { color: white; padding: 12px 14px; font-weight: 700; text-align: right; }
.fin-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
.fin-table tr:last-child td { border-bottom: none; }
.fin-table tbody tr { transition: background 0.15s; }
.fin-table tbody tr:hover td { background: var(--col-bg); }
.action-col { text-align: center; }

/* ── Employee Dashboard Widget ── */
.emp-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.emp-widget {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 18px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

/* ── Filter Bar ── */
.filter-bar {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    background: var(--card-bg);
    border-radius: var(--radius);
    margin-bottom: 16px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    flex-wrap: wrap;
    align-items: center;
}

/* ── Notification ── */
.notif-wrapper { position: relative; cursor: pointer; }
.notif-bell { font-size: 22px; }
.notif-badge {
    position: absolute;
    top: -6px; left: -6px;
    background: var(--danger);
    color: white;
    border-radius: 50%;
    width: 18px; height: 18px;
    font-size: 10px;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold;
}
.notif-dropdown {
    position: absolute;
    top: 40px; left: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 300px;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    display: none;
    z-index: 5000;
}
.notif-item { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; cursor: pointer; }
.notif-item:hover { background: var(--col-bg); }
.notif-unread { background: #eff6ff; }
.notif-unread:hover { background: #dbeafe; }

/* ── Announcement Bar ── */
.announcement-bar {
    display: none;
    background: linear-gradient(135deg, rgba(79,70,229,0.08), rgba(124,58,237,0.08));
    border-bottom: 2px solid #7c3aed;
    color: #4c1d95;
    padding: 10px 20px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    position: sticky;
    top: 61px;
    z-index: 999;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: announcementSlideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes announcementSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
body[data-theme="dark"] .announcement-bar,
body.dark .announcement-bar {
    background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(79,70,229,0.18));
    border-bottom-color: #a78bfa;
    color: #e9d5ff;
}
.announce-content { max-width: 800px; margin: 0 auto; }

/* ── Container ── */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* ── Timer Box ── */
.timer-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #1e293b, #334155);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin: 16px 0;
    color: white;
}
.timer-display { font-size: 28px; font-weight: 900; letter-spacing: 3px; font-family: monospace; color: #38bdf8; }

/* ── Chat Box ── */
.chat-box { height: 250px; overflow-y: auto; padding: 10px; background: var(--col-bg); border-radius: var(--radius-sm); margin: 12px 0; border: 1px solid var(--border); }

/* ── Mic Button ── */
.btn-mic { background: none; border: 2px solid var(--border); border-radius: 50%; width: 42px; height: 42px; font-size: 18px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.btn-mic:hover { background: #fee2e2; border-color: #fca5a5; }
.btn-mic.recording { background: #fee2e2; border-color: var(--danger); animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.4)} 50%{box-shadow:0 0 0 8px rgba(239,68,68,0)} }

/* ── Studio Board ── */
.res-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; overflow-x: auto; }
.res-col { background: var(--col-bg); border-radius: var(--radius-sm); padding: 10px; min-height: 100px; border: 1px solid var(--border); }
.res-col h4 { margin: 0 0 8px 0; font-size: 12px; color: var(--text-muted); text-align: center; border-bottom: 1px solid var(--border); padding-bottom: 6px; }

/* ── HR Tabs ── */
.hr-tabs { display: flex; gap: 4px; margin-bottom: 20px; background: var(--col-bg); padding: 4px; border-radius: var(--radius-sm); }
.hr-tab-btn { flex: 1; padding: 9px; border: none; border-radius: var(--radius-sm); font-family: 'Cairo'; font-size: 12px; font-weight: bold; cursor: pointer; background: transparent; color: var(--text-muted); transition: all 0.2s; }
.hr-tab-btn.active { background: var(--primary); color: white; box-shadow: 0 2px 8px rgba(79,70,229,0.3); }
.hr-tab-content { display: none; }
.hr-tab-content.active { display: block; }

/* ── Admin Form ── */
.admin-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── Header Stats ── */
.header-stats { display: flex; gap: 12px; font-size: 13px; font-weight: bold; }
.header-stats div { background: var(--col-bg); padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border); }

/* ── Background Selector ── */
.bg-menu-wrapper { position: relative; }
.bg-selector { display: none; position: absolute; top: 45px; left: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-lg); z-index: 5000; display: grid; grid-template-columns: repeat(4, 40px); gap: 6px; }
.bg-thumb { width: 40px; height: 40px; border-radius: var(--radius-sm); cursor: pointer; border: 2px solid transparent; transition: all 0.2s; }
.bg-thumb:hover { border-color: var(--primary); transform: scale(1.1); }

/* ── Schedule Table (improved) ── */
.schedule-table { width: 100%; border-collapse: separate; border-spacing: 0 3px; }
.schedule-table th { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: white; padding: 11px 12px; font-size: 12px; font-weight: bold; text-align: center; }
.schedule-table th:first-child { border-radius: 10px 0 0 0; text-align: right; }
.schedule-table th:last-child { border-radius: 0 10px 0 0; }
.schedule-table td { padding: 9px 12px; text-align: center; font-size: 12px; background: var(--card-bg); border-bottom: 1px solid var(--border); }
.schedule-table td:first-child { font-weight: bold; color: var(--primary); text-align: right; }
.schedule-table tr:hover td { background: var(--col-bg); }
.sched-off { color: var(--danger) !important; }
.sched-time { color: var(--success); font-weight: bold; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .admin-form { grid-template-columns: 1fr; }
    .board { flex-direction: column; }
    .emp-dashboard { grid-template-columns: 1fr; }
    .header { padding: 8px 12px; }
    .modal-content { padding: 18px; }
    .res-board { grid-template-columns: repeat(4, 1fr); }
    .fin-table th, .fin-table td { padding: 8px 10px; font-size: 12px; }
}

/* ── Login Screen — v52.89 redesign ──
   Previous design relied on rgba glass-panel + backdrop-filter, which collapsed
   to opaque white on browsers that don't support backdrop-filter (older Safari,
   some embedded webviews) — leaving white text invisible on white panel.
   New design: solid dark panel with high-contrast white text, animated gradient
   background, decorative blobs. Works everywhere, no backdrop-filter needed. */
.login-bg {
    background:
        radial-gradient(ellipse at 8% 50%, rgba(99,102,241,0.55) 0%, transparent 55%),
        radial-gradient(ellipse at 92% 85%, rgba(219,39,119,0.50) 0%, transparent 55%),
        linear-gradient(160deg, #0d1117 0%, #1a1040 50%, #1e1b4b 100%);
}
.login-blob { position: absolute; border-radius: 50%; filter: blur(60px); animation: blobFloat 6s ease-in-out infinite; pointer-events: none; z-index: 1; }
.blob-1 { width: 300px; height: 300px; background: rgba(99,102,241,0.4); top: 10%; left: 5%; }
.blob-2 { width: 250px; height: 250px; background: rgba(219,39,119,0.35); bottom: 10%; right: 5%; animation-delay: -3s; }

.glass-panel {
    position: relative;
    z-index: 2;
    /* v52.103: solid dark — no translucency to avoid white-bleed bugs */
    background: #1e1b4b;
    border: 1px solid rgba(99, 102, 241, 0.5);
    border-radius: 28px;
    padding: 44px 38px;
    width: 400px;
    max-width: 90vw;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
/* v52.103: backdrop-filter @supports override removed — was the source of
   white-bleed on browsers that support it. Solid color always. */

.login-logo {
    width: 110px;
    filter: drop-shadow(0 6px 16px rgba(99, 102, 241, 0.4));
    /* v52.104: removed white background — logo sits on dark card */
    padding: 0;
    margin-bottom: 4px;
}

.glass-panel h3 {
    color: #f1f5f9 !important;
    margin: 4px 0 16px 0;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.glass-input {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    color: #ffffff;
    font-family: 'Cairo', sans-serif;
    font-size: 15px;
    font-weight: 500;
    outline: none;
    transition: all 0.25s ease;
    text-align: center;
    box-sizing: border-box;
}
.glass-input::placeholder {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
}
.glass-input:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}
.glass-input:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(139, 92, 246, 0.7);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2);
}

.glass-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    color: white;
    border: none;
    border-radius: 14px;
    font-family: 'Cairo', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 0.5px;
    box-shadow:
        0 8px 20px rgba(99, 102, 241, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    margin-top: 4px;
}
.glass-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 28px rgba(99, 102, 241, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.glass-btn:active {
    transform: translateY(0);
}

@keyframes blobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -20px) scale(1.05); }
}

/* ── Toast ── */
.qaf-toast { font-family: 'Cairo', sans-serif !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--col-bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Print ── */
@media print { body * { visibility: hidden; } #printableLedger, #printableLedger * { visibility: visible; } #printableLedger { position: absolute; top:0; left:0; width:100%; } .no-print { display:none !important; } }

/* ══ CLIENT PORTAL ══ */
.cp-stat-card { border-radius: var(--radius); padding: 20px; text-align: center; color: white; box-shadow: var(--shadow-md); }
.cp-stat-num { font-size: 32px; font-weight: 900; }
.cp-stat-label { font-size: 13px; opacity: 0.9; margin-top: 4px; }
.cp-fin-card { background: var(--card-bg); border-radius: var(--radius); padding: 18px; text-align: center; border: 2px solid var(--border); box-shadow: var(--shadow); }
.cp-fin-label { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.cp-fin-num { font-size: 26px; font-weight: 900; color: var(--primary); }
.cp-fin-curr { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.cp-section-box { background: var(--card-bg); border-radius: var(--radius); padding: 18px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.cp-section-title { font-size: 14px; font-weight: bold; color: var(--text); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--border); }
.cp-task-card { background: var(--col-bg); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--border); transition: transform 0.15s; }
.cp-task-card:hover { transform: translateX(-3px); }
.cp-task-card.cp-task-late { border-right: 4px solid var(--danger); }
.cp-task-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 8px; }
.cp-task-name { font-weight: bold; font-size: 14px; }
.cp-task-meta { display: flex; gap: 10px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.cp-status-badge { font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: bold; white-space: nowrap; }
.cp-status-wait { background: #fef9c3; color: #854d0e; }
.cp-status-work { background: #dbeafe; color: #1e40af; }
.cp-status-review { background: #f3e8ff; color: #6b21a8; }
.cp-status-done { background: #dcfce7; color: #166534; }
.cp-ledger-row { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.cp-ledger-row:last-child { border-bottom: none; }
.cp-ledger-desc { flex: 1; }
.cp-debit { color: var(--danger); font-weight: bold; }
.cp-credit { color: var(--success); font-weight: bold; }
.cp-arch-card { background: var(--col-bg); border-radius: 10px; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; border: 1px solid var(--border); }
.cp-empty { text-align: center; padding: 30px; color: var(--text-muted); font-size: 14px; }

/* 🔴 v52.106 (Tier 2 UX): nicer empty states with icons + actionable hints.
   Use .empty-state with optional .empty-icon (large emoji) + .empty-title + .empty-hint. */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}
.empty-state .empty-icon {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 12px;
    opacity: 0.7;
}
.empty-state .empty-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}
.empty-state .empty-hint {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 380px;
    margin: 0 auto 16px;
    line-height: 1.5;
}
.empty-state button {
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 10px;
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s;
}
.empty-state button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); }

.cp-ann-box.hidden { display: none !important; }

/* ══ OVERVIEW DASHBOARD ══ */
.ov-kpi-card { background: var(--card-bg); border-radius: var(--radius); padding: 16px; text-align: center; box-shadow: var(--shadow); }
.ov-kpi-num { font-size: 28px; font-weight: 900; color: var(--text); }
.ov-kpi-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.ov-section { background: var(--card-bg); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.ov-sec-title { font-weight: bold; font-size: 13px; color: var(--text); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.ov-client-row, .ov-top-row, .ov-act-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.ov-client-row:last-child, .ov-top-row:last-child, .ov-act-row:last-child { border-bottom: none; }
.ov-due { color: var(--danger); font-weight: bold; font-size: 12px; }
.ov-cnt { color: var(--primary); font-weight: bold; font-size: 12px; }
.ov-empty { text-align: center; padding: 20px; color: var(--text-muted); font-size: 13px; }

/* ══ CALENDAR ══ */
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 12px; }
.cal-header-day { text-align: center; font-weight: bold; font-size: 12px; color: var(--text-muted); padding: 8px 0; }
.cal-day { min-height: 80px; max-height: 120px; overflow-y: auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px; cursor: pointer; transition: all 0.15s; }
.cal-day:hover { border-color: var(--primary); background: #eff6ff; }
.cal-day.today { border-color: var(--primary); background: rgba(79,70,229,0.05); }
.cal-day.other-month { opacity: 0.4; }
.cal-day-num { font-size: 11px; font-weight: bold; color: var(--text-muted); margin-bottom: 3px; }
.cal-task-dot { font-size: 10px; padding: 2px 5px; border-radius: 4px; margin-bottom: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-task-urgent { background: #fee2e2; color: #dc2626; }
.cal-task-normal { background: #dbeafe; color: #1d4ed8; }
.cal-task-done { background: #dcfce7; color: #16a34a; }
.cal-nav { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 16px; }
.cal-nav button { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 16px; cursor: pointer; font-family: 'Cairo'; color: var(--text); font-size: 13px; transition: all 0.15s; }
.cal-nav button:hover { background: var(--primary); color: white; }
.cal-month-title { font-size: 16px; font-weight: bold; color: var(--text); min-width: 160px; text-align: center; }

/* ══ PRODUCTIVITY TABLE ══ */
.prod-table { width: 100%; border-collapse: collapse; }
.prod-table th { background: var(--primary); color: white; padding: 10px 12px; font-size: 13px; }
.prod-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.prod-table tr:hover td { background: var(--col-bg); }
.prod-time-bar { display: inline-block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #4f46e5, #06b6d4); margin-right: 6px; vertical-align: middle; }

/* ══ KPI CARDS ══ */
.kpi-card { background: var(--card-bg); border-radius: var(--radius); padding: 16px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.kpi-progress-bar { width: 100%; height: 8px; background: var(--border); border-radius: 10px; overflow: hidden; margin-top: 8px; }
.kpi-progress-fill { height: 100%; border-radius: 10px; transition: width 0.6s ease; }
.kpi-badge { padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: bold; }
.kpi-on-track { background: #dcfce7; color: #16a34a; }
.kpi-behind { background: #fee2e2; color: #dc2626; }
.kpi-exceeded { background: #fef9c3; color: #854d0e; }

/* ══ SEARCH RESULTS ══ */
.search-result-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.15s; }
.search-result-item:hover { background: var(--col-bg); }
.sr-name { display: block; font-weight: bold; font-size: 13px; color: var(--text); }
.sr-meta { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ══ TEMPLATES ══ */
.template-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--col-bg); border-radius: var(--radius-sm); margin-bottom: 6px; font-size: 13px; transition: background 0.15s; }
.template-item:hover { background: var(--border); }

/* ══ BEAUTIFUL CHECK-IN WIDGET (keep) ══ */
#checkinWidget { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border: none !important; border-radius: var(--radius-lg) !important; box-shadow: 0 8px 24px rgba(16,185,129,0.15); padding: 24px !important; align-items: center; gap: 14px; position: relative; overflow: hidden; }
#checkinWidget::before { content: ''; position: absolute; width: 120px; height: 120px; background: rgba(16,185,129,0.1); border-radius: 50%; top: -30px; left: -30px; }
#checkinWidget h4 { font-size: 15px !important; color: #059669 !important; }
#checkinBtn { transition: all 0.25s cubic-bezier(0.4,0,0.2,1); border-radius: 12px !important; font-size: 15px !important; box-shadow: 0 4px 12px rgba(16,185,129,0.3); }
#checkinBtn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,185,129,0.4); }
#checkinInfo { font-size: 12px; color: #047857; background: rgba(16,185,129,0.12); padding: 6px 14px; border-radius: 20px; text-align: center; width: 100%; }
.checkin-time-display { font-size: 30px; font-weight: 900; color: #059669; letter-spacing: 2px; font-family: monospace; text-shadow: 0 2px 4px rgba(16,185,129,0.2); }

/* (Login screen styles moved up to ~line 358 — see "Login Screen v52.89 redesign") */

/* ══ NOTIFICATIONS IMPROVED ══ */
.notif-wrapper { position: relative; cursor: pointer; padding: 5px; }
.notif-bell { font-size: 22px; transition: transform 0.2s; display: inline-block; }
.notif-wrapper:hover .notif-bell { transform: rotate(15deg); }
.notif-badge {
    position: absolute; top: 0; right: 0;
    background: var(--danger); color: white;
    border-radius: 50%; width: 18px; height: 18px;
    font-size: 10px; font-weight: bold;
    display: none; align-items: center; justify-content: center;
    border: 2px solid var(--card-bg);
}
.notif-dropdown {
    position: absolute; top: calc(100% + 10px); left: -260px;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 16px; width: 320px; max-height: 420px;
    overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    display: none; z-index: 5000;
}
.notif-item { transition: background 0.15s; }
.notif-item:hover { background: var(--col-bg) !important; }
.notif-unread { background: #eff6ff !important; }
.notif-unread:hover { background: #dbeafe !important; }
body.dark-mode .notif-unread { background: rgba(79,70,229,0.15) !important; }

/* ════════════════════════════════════════════════════════════════
   ♿ ACCESSIBILITY: respect prefers-reduced-motion
   Users with vestibular disorders / motion sickness can request
   reduced motion via OS settings. Disabling animations + transitions
   prevents triggering symptoms.
   (Round 7 file audit fix)
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   📱 MOBILE: only apply :hover styles on devices that ACTUALLY
   support hover (mouse/trackpad). On touch screens, :hover sticks
   after a tap and confuses users — wrapping in @media (hover: hover)
   makes hover styles desktop-only.
   ════════════════════════════════════════════════════════════════ */
@media (hover: none) {
    /* Disable any sticky :hover effects on touch devices */
    .task-card:hover, .btn:hover, .notif-item:hover {
        transform: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   📱 iPhone safe-area for notch/Dynamic Island
   Pairs with viewport-fit=cover in the meta tag.
   ════════════════════════════════════════════════════════════════ */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ════════════════════════════════════════════════════════════════
   🆕 v52.70 — UI/UX POLISH
   - skeleton loading states
   - improved focus rings for accessibility
   - subtle interactive transitions
   - keyboard shortcut hints
   ════════════════════════════════════════════════════════════════ */
.skeleton {
    background: linear-gradient(90deg, var(--col-bg) 25%, rgba(148,163,184,0.15) 50%, var(--col-bg) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.4s ease-in-out infinite;
    border-radius: 8px;
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-line { height: 14px; margin: 6px 0; }
.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 70%; }
.skeleton-line.long { width: 100%; }

/* Better focus visibility (a11y) */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
    outline: 2px solid var(--primary, #4f46e5);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Smooth interactive transitions on buttons/cards */
.btn, .stat-card, .ov-kpi-card {
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease;
}
.btn:not(:disabled):active { transform: scale(0.97); }

/* Keyboard shortcut hint badges (ex: <kbd>?) */
kbd {
    display: inline-block;
    padding: 1px 6px;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    background: var(--col-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.1);
    color: var(--text);
}

/* Empty state icon */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
}
.empty-state-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.6;
}

/* Modal close button — bigger hit target on mobile */
@media (max-width: 768px) {
    [data-action^="close"], button[data-close-modal] {
        min-width: 36px;
        min-height: 36px;
    }
    /* Force mobile-friendly modals */
    .modal-content, [id$="Modal"] > div {
        margin: 8px !important;
        max-width: calc(100vw - 16px) !important;
    }
    /* Tables can scroll horizontally on mobile */
    .fin-table, table {
        font-size: 12px;
    }
}

/* Disabled button states */
.btn:disabled, button:disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
}

/* Toast stacking (in case multiple show together) */
.toast {
    transition: all 0.3s ease;
}

/* Better scrollbars */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-track {
    background: var(--col-bg);
}
*::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Print-specific cleanup — applies anywhere */
@media print {
    .no-print, button[data-action], .notif-wrapper, #notifBadge,
    .modal-overlay, [id$="Modal"] {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   🆕 v52.74 — MOBILE BOTTOM NAVIGATION + PULL-TO-REFRESH
   - Bottom nav bar visible only on mobile
   - Quick access to: home, search, notifications, profile
   - Pull-to-refresh indicator
   ════════════════════════════════════════════════════════════════ */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    z-index: 90;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}
.mobile-bottom-nav-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.mobile-nav-btn {
    background: none;
    border: none;
    padding: 6px 12px;
    color: var(--text-muted);
    font-size: 11px;
    font-family: 'Cairo', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    position: relative;
    transition: color 0.15s;
    min-height: 48px;
    min-width: 48px;
}
.mobile-nav-btn:active { transform: scale(0.95); }
.mobile-nav-btn .icon { font-size: 22px; }
.mobile-nav-btn.active { color: var(--primary); }
.mobile-nav-btn .badge {
    position: absolute;
    top: 2px;
    right: 8px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
@media (max-width: 768px) {
    .mobile-bottom-nav { display: block; }
    body { padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
}

/* Pull-to-refresh indicator */
.ptr-indicator {
    position: fixed;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: top 0.2s, transform 0.3s;
    font-size: 22px;
}
.ptr-indicator.active {
    top: 12px;
}
.ptr-indicator.refreshing {
    animation: ptr-spin 0.8s linear infinite;
}
@keyframes ptr-spin {
    from { transform: translateX(-50%) rotate(0deg); }
    to { transform: translateX(-50%) rotate(360deg); }
}

/* 🔔 Push notification permission banner */
.push-banner {
    position: fixed;
    bottom: 80px;
    left: 12px;
    right: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark, #3730a3));
    color: white;
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(79,70,229,0.3);
    z-index: 100;
    display: none;
    font-size: 14px;
}
.push-banner.show {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    animation: slideUp 0.4s ease;
}
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.push-banner button {
    background: rgba(255,255,255,0.2);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 6px 14px;
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
}
.push-banner button.dismiss {
    background: transparent;
    border: none;
    font-size: 18px;
    padding: 4px 8px;
}


/* ════════════════════════════════════════════════════════════════
   🆕 v52.76 — POLISH & MICRO-ANIMATIONS
   ════════════════════════════════════════════════════════════════ */

/* Smooth button hover/press */
.btn {
    transition: transform 0.1s, box-shadow 0.15s, background 0.2s;
}
.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* Card hover lift (for kanban cards, list items, etc.) */
.task-card, [class*="-card"] {
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.task-card:hover, [class*="-card"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

/* Loading skeleton (replaces "جاري التحميل..." text) */
.skeleton {
    display: inline-block;
    background: linear-gradient(90deg, var(--col-bg) 0%, var(--border) 50%, var(--col-bg) 100%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.5s linear infinite;
    border-radius: 6px;
    height: 1em;
    width: 100%;
    margin: 4px 0;
}
@keyframes skel-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Modal entrance animation */
[id$="Modal"] > div {
    animation: modal-in 0.25s ease-out;
}
@keyframes modal-in {
    from { transform: scale(0.94) translateY(10px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

/* Toast slide-up */
.toast {
    animation: toast-in 0.3s ease-out;
}
@keyframes toast-in {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Input focus glow */
input, select, textarea {
    transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12) !important;
}

/* Tab buttons smooth */
[id^="psTab"], [id^="invTab"], [id^="intgTab"], [id^="reportsTab"] {
    transition: background 0.2s, color 0.2s, border 0.2s;
}

/* Status badge pulse for new/urgent items */
@keyframes badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.badge-pulse {
    animation: badge-pulse 1.5s ease-in-out infinite;
}

/* Smooth page transitions */
#app, #header {
    animation: page-fade 0.3s ease;
}
@keyframes page-fade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Better disabled state */
button:disabled, .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Smooth dropdown/popup */
.notif-dropdown, .mention-popup, [id$="Popup"] {
    animation: dropdown-in 0.18s ease-out;
    transform-origin: top;
}
@keyframes dropdown-in {
    from { transform: scaleY(0.9); opacity: 0; }
    to { transform: scaleY(1); opacity: 1; }
}

/* Kanban columns subtle gradient on drag-over */
[data-drop-zone].drag-over {
    background: linear-gradient(180deg, rgba(79,70,229,0.08), transparent);
    border: 2px dashed var(--primary);
}

/* Smooth checkbox/radio */
input[type="checkbox"], input[type="radio"] {
    cursor: pointer;
    transition: transform 0.1s;
}
input[type="checkbox"]:active, input[type="radio"]:active {
    transform: scale(0.9);
}

/* Empty state styling */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted, #94a3b8);
    font-size: 14px;
}
.empty-state .icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.6;
}

/* ════════════════════════════════════════════════════════════════
   🎨 v52.77 — PREMIUM POLISH
   لمسات احترافية تخلي السيستم يبان enterprise-grade
   ════════════════════════════════════════════════════════════════ */

/* === Refined CSS Variables === */
:root {
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%);
    --gradient-success: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    --gradient-warning: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    --gradient-danger: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    --shadow-glow: 0 0 0 4px rgba(79, 70, 229, 0.12);
    --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);
    --shadow-card-hover: 0 4px 8px rgba(15, 23, 42, 0.06), 0 12px 24px rgba(15, 23, 42, 0.08);
    --shadow-modal: 0 24px 48px -12px rgba(15, 23, 42, 0.25);
}

/* === Typography refinement === */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* === Login Screen Polish === */
#loginScreen {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}
#loginScreen::before,
#loginScreen::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    pointer-events: none;
}
#loginScreen::before {
    width: 600px;
    height: 600px;
    background: rgba(99, 102, 241, 0.5);
    top: -200px;
    left: -200px;
    animation: float-bg 20s ease-in-out infinite;
}
#loginScreen::after {
    width: 500px;
    height: 500px;
    background: rgba(245, 158, 11, 0.3);
    bottom: -150px;
    right: -150px;
    animation: float-bg 25s ease-in-out infinite reverse;
}
@keyframes float-bg {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(40px, -30px) scale(1.05); }
    66% { transform: translate(-30px, 20px) scale(0.98); }
}
#loginScreen > div {
    position: relative;
    z-index: 1;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255,255,255,0.1) inset !important;
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.97) !important;
}

/* === Header Polish === */
.header {
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.95) 100%) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
body.dark-mode .header {
    background: linear-gradient(180deg, rgba(15, 23, 42, 1) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    border-bottom-color: rgba(51, 65, 85, 0.8);
}

/* === Action Button Polish === */
.btn {
    position: relative;
    overflow: hidden;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 10px;
}
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: background 0.2s;
    pointer-events: none;
}
.btn:hover::after {
    background: rgba(255,255,255,0.08);
}
.btn-p {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25), 0 1px 2px rgba(79, 70, 229, 0.1);
}
.btn-p:hover {
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35), 0 2px 4px rgba(79, 70, 229, 0.15);
}
.btn-del {
    background: var(--gradient-danger) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25);
}

/* === Kanban Column Polish === */
[data-drop-zone] {
    border-radius: 16px;
    transition: all 0.2s ease;
    border: 1px solid var(--border);
    background: var(--col-bg);
}
[data-drop-zone] h3, [data-drop-zone] h2 {
    padding: 12px 16px;
    margin: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, transparent 100%);
    border-bottom: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    font-size: 14px;
    font-weight: 700;
}
body.dark-mode [data-drop-zone] h3,
body.dark-mode [data-drop-zone] h2 {
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
}

/* === Task Cards Polish === */
.task-card {
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
    background: var(--card-bg) !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.task-card:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.12), 0 1px 3px rgba(79, 70, 229, 0.05) !important;
    transform: translateY(-2px);
}
.task-card[draggable="true"]:active {
    cursor: grabbing;
    transform: rotate(1deg) scale(1.02);
    box-shadow: var(--shadow-card-hover);
}

/* === Modal Polish === */
[id$="Modal"] {
    backdrop-filter: blur(8px);
    background: rgba(15, 23, 42, 0.5) !important;
}
[id$="Modal"] > div {
    box-shadow: var(--shadow-modal) !important;
    border: 1px solid rgba(226, 232, 240, 0.5);
}
body.dark-mode [id$="Modal"] > div {
    border-color: rgba(51, 65, 85, 0.5);
}

/* === Modal headers === */
[id$="Modal"] h3 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* === Input/Form Polish === */
input, select, textarea {
    border-radius: 10px !important;
    transition: all 0.15s ease !important;
    font-family: 'Cairo', sans-serif !important;
}
input:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled) {
    border-color: #cbd5e1 !important;
}
input:focus, select:focus, textarea:focus {
    box-shadow: var(--shadow-glow) !important;
}

/* === Checkbox/Radio polish === */
input[type="checkbox"], input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* === Notification badge polish === */
#notifBadge, #mobNavBadge .badge {
    background: var(--gradient-danger) !important;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3), 0 0 0 2px var(--card-bg);
    font-weight: 700;
}

/* === Notif dropdown === */
.notif-dropdown {
    border-radius: 16px !important;
    box-shadow: var(--shadow-modal) !important;
    border: 1px solid var(--border) !important;
    overflow: hidden;
}
.notif-dropdown > div:first-child {
    background: linear-gradient(180deg, var(--col-bg) 0%, var(--card-bg) 100%);
    border-bottom: 1px solid var(--border);
}

/* === Toast polish === */
.toast {
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.1) !important;
    backdrop-filter: blur(12px);
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.1);
}

/* === KPI cards (BI Dashboard) === */
#biKpisGrid > div {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
}
#biKpisGrid > div:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08) !important;
}

/* === Charts container === */
#biModal canvas {
    transition: opacity 0.3s;
}
#biModal canvas:hover {
    opacity: 0.95;
}

/* === Tab buttons polish === */
[id^="psTab"], [id^="invTab"], [id^="intgTab"], [id^="reportsTab"] {
    border-radius: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
}

/* === CRM Kanban polish === */
#crmContent > div > div {
    border-radius: 14px !important;
    transition: all 0.2s;
}
#crmContent > div > div > div[data-action="openLeadDetail"] {
    border-radius: 10px !important;
    transition: all 0.18s ease;
    cursor: pointer;
}
#crmContent > div > div > div[data-action="openLeadDetail"]:hover {
    border-color: var(--primary) !important;
    transform: translateX(-3px);
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.08);
}

/* === Avatar / initials === */
.avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

/* === Smooth scroll === */
html { scroll-behavior: smooth; }

/* === Better scrollbars === */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
    border: 2px solid var(--col-bg);
}
*::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}
body.dark-mode *::-webkit-scrollbar-thumb {
    background: #334155;
    border-color: #0f172a;
}
body.dark-mode *::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* === Status pills polish === */
[style*="border-radius:20px"], [style*="border-radius:14px"], [style*="border-radius:10px"] {
    font-feature-settings: "ss01" on;
}

/* === Loading state polish === */
.btn:disabled {
    position: relative;
}

/* === Focus visible for keyboard navigation === */
button:focus-visible, a:focus-visible, input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* === Selection color === */
::selection {
    background: rgba(79, 70, 229, 0.2);
    color: var(--primary-dark);
}
body.dark-mode ::selection {
    background: rgba(99, 102, 241, 0.4);
    color: white;
}

/* === Drop zone highlight === */
[data-drop-zone].drag-over {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.06), rgba(99, 102, 241, 0.04)) !important;
    border: 2px dashed var(--primary) !important;
    transform: scale(1.01);
}

/* === Bottom nav polish === */
.mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(226, 232, 240, 0.6) !important;
    box-shadow: 0 -2px 24px rgba(15, 23, 42, 0.08);
}
body.dark-mode .mobile-bottom-nav {
    background: rgba(15, 23, 42, 0.95) !important;
    border-top-color: rgba(51, 65, 85, 0.6) !important;
}
.mobile-nav-btn {
    border-radius: 8px;
    transition: all 0.15s ease;
}
.mobile-nav-btn.active {
    background: rgba(79, 70, 229, 0.08);
}
.mobile-nav-btn.active .icon {
    transform: translateY(-2px);
}
.mobile-nav-btn .icon {
    transition: transform 0.18s ease;
}

/* === Page sections fade-in on scroll === */
@media (prefers-reduced-motion: no-preference) {
    .col, [data-drop-zone] {
        animation: section-in 0.4s ease-out backwards;
    }
    .col:nth-child(2), [data-drop-zone]:nth-child(2) { animation-delay: 0.05s; }
    .col:nth-child(3), [data-drop-zone]:nth-child(3) { animation-delay: 0.1s; }
    .col:nth-child(4), [data-drop-zone]:nth-child(4) { animation-delay: 0.15s; }
}
@keyframes section-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === Welcome bar polish === */
#welcomeUser {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* === Settings/announcement bar polish === */
#announceBar {
    background: var(--gradient-primary) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
    font-weight: 600;
}

/* === Empty state polish === */
.empty-state {
    padding: 60px 20px;
}
.empty-state .icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.4;
    filter: grayscale(0.3);
}

/* === Cards in BI === */
[id^="biChart"] {
    transition: opacity 0.3s;
}

/* === Hover preview cards smoother === */
.task-card-popup, .preview-popup {
    box-shadow: var(--shadow-modal) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(12px);
}

/* === Smooth color mode transition === */
body, .header, [data-drop-zone], .task-card, [id$="Modal"] > div, input, select, textarea {
    transition: background-color 0.25s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ✨ PREMIUM UI — v52.114
   ═══════════════════════════════════════════════════════════════════════════
   This layer enhances the base styles with modern, premium aesthetics:
   - Refined color palette (deep indigo + royal purple + emerald accents)
   - Better typography hierarchy
   - Smoother shadows with depth
   - Glass-morphism effects on overlays
   - Animated micro-interactions
   - Better focus states (a11y + polish)
   ═══════════════════════════════════════════════════════════════════════════ */

/* === Refined CSS Variables — Premium Palette === */
:root {
    /* Primary — Deep Indigo (more refined than the original purple-blue) */
    --primary: #4338ca;
    --primary-light: #6366f1;
    --primary-dark: #312e81;
    --primary-soft: rgba(67, 56, 202, 0.08);
    --primary-glow: rgba(99, 102, 241, 0.4);

    /* Accent — Royal Purple */
    --accent: #7c3aed;
    --accent-light: #a78bfa;
    --accent-dark: #5b21b6;

    /* Status colors with gradient endpoints */
    --success: #059669;
    --success-light: #10b981;
    --success-soft: rgba(5, 150, 105, 0.1);
    --warning: #d97706;
    --warning-light: #f59e0b;
    --warning-soft: rgba(217, 119, 6, 0.1);
    --danger: #dc2626;
    --danger-light: #ef4444;
    --danger-soft: rgba(220, 38, 38, 0.1);
    --info: #0284c7;
    --info-light: #0ea5e9;
    --info-soft: rgba(2, 132, 199, 0.1);

    /* Refined neutrals */
    --bg-app: #f5f6fa;
    --bg-elevated: #ffffff;
    --bg-subtle: #f8fafc;
    --bg-muted: #f1f5f9;

    /* Text hierarchy */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #94a3b8;
    --text-on-primary: #ffffff;

    /* Border refinement */
    --border-subtle: #e2e8f0;
    --border-strong: #cbd5e1;
    --border-focus: #6366f1;

    /* Premium shadows (5 levels — Material/Tailwind hybrid) */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    --shadow-modal: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -5px rgba(15, 23, 42, 0.04);

    /* Refined radii */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius: 14px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* Spacing scale (4-64px) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Easing */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* Premium gradients */
    --gradient-primary: linear-gradient(135deg, #4338ca 0%, #7c3aed 100%);
    --gradient-success: linear-gradient(135deg, #059669 0%, #10b981 100%);
    --gradient-warning: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    --gradient-danger: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    --gradient-soft: linear-gradient(135deg, #f5f7ff 0%, #fbf4ff 100%);
    --gradient-card-hover: linear-gradient(135deg, rgba(99, 102, 241, 0.04) 0%, rgba(124, 58, 237, 0.04) 100%);
}

body.dark-mode {
    --bg-app: #0a0e1a;
    --bg-elevated: #151b2c;
    --bg-subtle: #1a2138;
    --bg-muted: #232b44;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #64748b;
    --border-subtle: #2d3552;
    --border-strong: #3f4865;
    --primary: #6366f1;
    --primary-light: #818cf8;
    --primary-soft: rgba(99, 102, 241, 0.15);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.7);
    --gradient-soft: linear-gradient(135deg, #1a2138 0%, #232045 100%);
}

/* === Premium Base Tweaks === */
body {
    background: var(--bg-app);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Custom scrollbar (subtle, modern) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 10px;
    border: 2px solid var(--bg-app);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* Selection color */
::selection {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

/* === Premium Header === */
.header {
    background: var(--bg-elevated);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid var(--border-subtle);
    transition: all 0.3s var(--ease-smooth);
}

.header h2 {
    font-weight: 800;
    letter-spacing: -0.02em;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* === Premium Buttons === */
.btn,
button:not(.no-premium-style),
input[type="submit"]:not(.no-premium-style),
input[type="button"]:not(.no-premium-style) {
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all 0.2s var(--ease-smooth);
    position: relative;
    overflow: hidden;
}

button:not([disabled]):not(.no-premium-style):hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

button:not([disabled]):not(.no-premium-style):active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

button:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Primary button — premium gradient */
button.btn-primary,
button[class*="primary"],
.btn-primary {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px var(--primary-glow);
}

button.btn-primary:hover,
button[class*="primary"]:hover {
    box-shadow: 0 6px 20px var(--primary-glow);
}

/* === Premium Cards (Tasks, Items, etc) === */
.task-card,
.kanban-card,
[data-task-card] {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: all 0.25s var(--ease-smooth);
    position: relative;
    overflow: hidden;
}

.task-card:hover,
.kanban-card:hover,
[data-task-card]:hover {
    border-color: transparent;
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.task-card::before,
.kanban-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-card-hover);
    opacity: 0;
    transition: opacity 0.25s var(--ease-smooth);
    pointer-events: none;
    z-index: 0;
}

.task-card:hover::before,
.kanban-card:hover::before {
    opacity: 1;
}

.task-card > *,
.kanban-card > * {
    position: relative;
    z-index: 1;
}

/* Priority indicator with gradient */
.task-card[data-priority="عاجل"],
.task-card[data-priority="urgent"] {
    border-right: 4px solid;
    border-image: var(--gradient-danger) 1;
}

.task-card[data-priority="عالي"],
.task-card[data-priority="high"] {
    border-right: 4px solid;
    border-image: var(--gradient-warning) 1;
}

/* === Premium Form Inputs === */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="search"],
select,
textarea {
    background: var(--bg-elevated);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'Cairo', sans-serif;
    transition: all 0.2s var(--ease-smooth);
    padding: 10px 14px;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
select:hover,
textarea:hover {
    border-color: var(--border-strong);
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 3px var(--primary-soft) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-tertiary);
    opacity: 1;
}

/* === Premium Modal === */
[id$="Modal"]:not([style*="display: none"]) > div,
.modal-content,
[role="dialog"] {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--border-subtle);
    backdrop-filter: blur(0px);
    animation: modalEnter 0.3s var(--ease-spring);
}

@keyframes modalEnter {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal backdrop with blur */
[id$="Modal"][style*="background"] {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    background: rgba(15, 23, 42, 0.5) !important;
}

body.dark-mode [id$="Modal"][style*="background"] {
    background: rgba(0, 0, 0, 0.6) !important;
}

/* === Premium Tables === */
table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

table thead {
    background: var(--bg-subtle);
}

table thead th {
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--border-subtle);
    padding: 14px 12px;
}

table tbody tr {
    transition: background 0.15s var(--ease-smooth);
}

table tbody tr:hover {
    background: var(--bg-subtle);
}

table tbody td {
    border-bottom: 1px solid var(--border-subtle);
    padding: 12px;
}

table tbody tr:last-child td {
    border-bottom: none;
}

/* === Premium Toast Notifications === */
.toast-notif,
[class*="toast"] {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-xl) !important;
    border: 1px solid var(--border-subtle) !important;
    padding: 14px 18px !important;
    font-weight: 500;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: toastSlideIn 0.4s var(--ease-spring);
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* === Premium Stats Cards (Dashboard KPIs) === */
.kpi-card,
.stat-card,
[class*="kpi-"],
[id^="kpi"] {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    transition: all 0.25s var(--ease-smooth);
    position: relative;
    overflow: hidden;
}

.kpi-card::before,
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    opacity: 0.7;
}

.kpi-card:hover,
.stat-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: transparent;
}

/* === Premium Badges === */
.badge,
[class*="badge"] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* === Premium Sidebar / Tabs === */
.tab,
[class*="tab-button"] {
    transition: all 0.2s var(--ease-smooth);
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.tab.active,
.tab-button.active,
[class*="tab"][class*="active"] {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 12px var(--primary-glow);
}

/* === Premium Login Screen === */
#loginPanel,
.login-panel,
[class*="login-card"] {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--border-subtle);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: var(--space-10);
    animation: loginEnter 0.6s var(--ease-spring);
}

@keyframes loginEnter {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Animated gradient background for login */
body:has(#loginPanel:not([style*="display: none"])) {
    background: linear-gradient(135deg, #4338ca, #7c3aed, #4338ca);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* === Premium Spinner / Loading === */
@keyframes premiumSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner,
.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--border-subtle);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: premiumSpin 0.8s linear infinite;
}

/* === Skeleton Loading (for placeholders while data loads) === */
.skeleton {
    background: linear-gradient(90deg, var(--bg-muted) 25%, var(--bg-subtle) 50%, var(--bg-muted) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease infinite;
    border-radius: var(--radius-xs);
}

@keyframes skeletonShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* === Drop Zone Styling for Drag & Drop === */
[data-drop-zone] {
    transition: all 0.2s var(--ease-smooth);
    border-radius: var(--radius-md);
}

[data-drop-zone].drag-over {
    background: var(--primary-soft);
    box-shadow: inset 0 0 0 2px var(--primary);
}

/* === Empty State Premium === */
.empty-state {
    text-align: center;
    padding: var(--space-16) var(--space-6);
    color: var(--text-tertiary);
}

.empty-state .icon {
    font-size: 80px;
    margin-bottom: var(--space-4);
    opacity: 0.35;
    animation: emptyFloat 3s ease-in-out infinite;
}

@keyframes emptyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.empty-state h3 {
    color: var(--text-secondary);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.empty-state p {
    color: var(--text-tertiary);
    margin-bottom: var(--space-6);
}

/* === Smooth Page Transitions === */
section,
[class*="page-"],
[id$="View"]:not([style*="display: none"]) {
    animation: fadeInUp 0.4s var(--ease-out);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Stagger animations for lists === */
.task-card:nth-child(1) { animation-delay: 0.05s; }
.task-card:nth-child(2) { animation-delay: 0.1s; }
.task-card:nth-child(3) { animation-delay: 0.15s; }
.task-card:nth-child(4) { animation-delay: 0.2s; }
.task-card:nth-child(5) { animation-delay: 0.25s; }
.task-card:nth-child(6) { animation-delay: 0.3s; }

/* === Mobile Touch Targets (44px minimum per Apple HIG) === */
@media (max-width: 768px) {
    button,
    .btn,
    a.button,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 16px;
    }

    .header h2 {
        font-size: 16px;
    }

    /* Mobile bottom safe area */
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* === High contrast focus for accessibility === */
*:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* === Number count-up animation utility === */
.count-up {
    font-variant-numeric: tabular-nums;
    transition: opacity 0.4s var(--ease-smooth);
}

/* === Premium Tooltip (CSS-only) === */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-primary);
    color: var(--bg-elevated);
    padding: 6px 10px;
    border-radius: var(--radius-xs);
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--ease-smooth);
    box-shadow: var(--shadow-md);
    z-index: 1000;
}

[data-tooltip]:hover::after {
    opacity: 1;
}

/* === Reduced motion preference (a11y) === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* === End Premium UI Layer === */

/* ═══════════════════════════════════════════════════════════════════════════
   ✨ PREMIUM UI — PHASE 2 (v52.115)
   ═══════════════════════════════════════════════════════════════════════════
   Adds:
   - Floating labels for forms
   - Notification center polish
   - Bottom navigation for mobile
   - FAB (Floating Action Button)
   - Pull-to-refresh visual cue
   - Page transition refinements
   ═══════════════════════════════════════════════════════════════════════════ */

/* === Floating Labels === */
.field-floating {
    position: relative;
    margin-top: var(--space-4);
}

.field-floating input,
.field-floating textarea,
.field-floating select {
    width: 100%;
    padding: 18px 14px 8px 14px !important;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 15px;
    transition: all 0.2s var(--ease-smooth);
}

.field-floating label {
    position: absolute;
    top: 50%;
    right: 14px;          /* RTL: anchor on right side */
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 14px;
    pointer-events: none;
    transition: all 0.2s var(--ease-smooth);
    background: transparent;
}

.field-floating input:focus + label,
.field-floating input:not(:placeholder-shown) + label,
.field-floating textarea:focus + label,
.field-floating textarea:not(:placeholder-shown) + label,
.field-floating select:focus + label,
.field-floating select:not([value=""]) + label {
    top: 0;
    transform: translateY(-50%) scale(0.85);
    color: var(--primary);
    background: var(--bg-elevated);
    padding: 0 6px;
    font-weight: 600;
}

/* === Notification Center === */
.notif-center {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    max-width: 90vw;
    height: 100vh;
    background: var(--bg-elevated);
    box-shadow: -10px 0 30px rgba(15, 23, 42, 0.2);
    transition: right 0.4s var(--ease-spring);
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

.notif-center.open {
    right: 0;
}

.notif-center-header {
    padding: var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-subtle);
}

.notif-center-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.notif-center-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3);
}

.notif-item {
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
    background: var(--bg-subtle);
    border-right: 3px solid var(--primary);
    transition: all 0.2s var(--ease-smooth);
    cursor: pointer;
    animation: notifSlideIn 0.4s var(--ease-spring);
}

.notif-item:hover {
    background: var(--primary-soft);
    transform: translateX(-4px);  /* RTL: slide left on hover */
}

.notif-item.unread {
    background: var(--primary-soft);
    font-weight: 600;
}

.notif-item.unread::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    margin-left: 8px;
    animation: pulse 2s infinite;
}

@keyframes notifSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

.notif-item-time {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

.notif-empty {
    padding: var(--space-12) var(--space-6);
    text-align: center;
    color: var(--text-tertiary);
}

.notif-empty .icon {
    font-size: 64px;
    opacity: 0.3;
    margin-bottom: var(--space-4);
}

/* Backdrop for notif center */
.notif-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-smooth);
}

.notif-backdrop.show {
    opacity: 1;
    pointer-events: all;
}

/* === Notification Badge (the bell with count) === */
.notif-bell {
    position: relative;
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-pill);
    transition: all 0.2s var(--ease-smooth);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notif-bell:hover {
    background: var(--primary-soft);
}

.notif-bell .badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--gradient-danger);
    color: white;
    border-radius: var(--radius-pill);
    min-width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.4);
    animation: badgePop 0.4s var(--ease-spring);
}

@keyframes badgePop {
    0% { transform: scale(0); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* === Mobile Bottom Navigation === */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-subtle);
    box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: none;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 100;
}

@media (max-width: 768px) {
    .bottom-nav {
        display: flex;
    }
    /* Add bottom padding to body so content isn't hidden */
    body {
        padding-bottom: 70px;
    }
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s var(--ease-smooth);
    cursor: pointer;
    min-width: 60px;
    text-align: center;
}

.bottom-nav-item .icon {
    font-size: 22px;
    transition: transform 0.2s var(--ease-spring);
}

.bottom-nav-item.active {
    color: var(--primary);
}

.bottom-nav-item.active .icon {
    transform: translateY(-2px) scale(1.15);
}

.bottom-nav-item:active {
    background: var(--primary-soft);
}

/* === Floating Action Button (FAB) === */
.fab {
    position: fixed;
    bottom: 80px;
    left: 20px;  /* RTL: bottom-left in RTL = bottom-right visually */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: white;
    border: none;
    box-shadow: 0 6px 16px var(--primary-glow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 100;
    transition: all 0.3s var(--ease-spring);
    animation: fabPop 0.5s var(--ease-spring);
}

@keyframes fabPop {
    from { transform: scale(0) rotate(-180deg); }
    to { transform: scale(1) rotate(0); }
}

.fab:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px var(--primary-glow);
}

.fab:active {
    transform: scale(0.95);
}

@media (max-width: 768px) {
    .fab {
        bottom: 90px; /* Above bottom nav */
    }
}

/* === Pull-to-refresh visual === */
.ptr-indicator {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    background: var(--bg-elevated);
    color: var(--primary);
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-lg);
    font-size: 14px;
    font-weight: 600;
    z-index: 9999;
    transition: transform 0.3s var(--ease-spring);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ptr-indicator.show {
    transform: translateX(-50%) translateY(8px);
}

.ptr-indicator .spinner {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

/* === Activity Timeline === */
.timeline {
    position: relative;
    padding: var(--space-4) 0;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 16px; /* RTL: vertical line on right */
    width: 2px;
    background: var(--border-subtle);
}

.timeline-item {
    position: relative;
    padding: var(--space-3) var(--space-12) var(--space-3) var(--space-3);
    margin-right: 8px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    top: 18px;
    right: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gradient-primary);
    box-shadow: 0 0 0 3px var(--bg-elevated), 0 0 0 4px var(--primary-soft);
}

.timeline-item-time {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.timeline-item-text {
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.5;
}

/* === Search Bar Premium === */
.search-bar-premium {
    position: relative;
    max-width: 600px;
}

.search-bar-premium input {
    width: 100%;
    padding: 12px 44px 12px 14px !important;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    font-size: 15px;
    transition: all 0.2s var(--ease-smooth);
}

.search-bar-premium input:focus {
    box-shadow: 0 0 0 4px var(--primary-soft), var(--shadow-lg) !important;
    border-color: var(--primary) !important;
}

.search-bar-premium .search-icon {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
}

.search-bar-premium .search-shortcut {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    background: var(--bg-muted);
    color: var(--text-tertiary);
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    font-size: 11px;
    font-family: monospace;
    border: 1px solid var(--border-subtle);
}

/* === Switches/Toggles === */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--border-strong);
    border-radius: 26px;
    transition: 0.3s var(--ease-smooth);
}

.toggle-switch .slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    right: 3px;  /* RTL */
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s var(--ease-smooth);
    box-shadow: var(--shadow-sm);
}

.toggle-switch input:checked + .slider {
    background: var(--gradient-primary);
}

.toggle-switch input:checked + .slider::before {
    transform: translateX(-22px);  /* RTL: move left when checked */
}

/* === Print styles refinement === */
@media print {
    .header, .bottom-nav, .fab, .notif-center, .notif-bell, button {
        display: none !important;
    }
    body {
        background: white !important;
        color: black !important;
    }
}

/* === End Premium Phase 2 === */

/* ═══════════════════════════════════════════════════════════════════════════
   ✨ PREMIUM UI — PHASE 3 (v52.115)
   ═══════════════════════════════════════════════════════════════════════════
   Adds:
   - Calendar view styles
   - Multi-step wizard / progress indicator
   - Sortable table columns
   - Sticky table headers
   - Tabbed content polish
   - Accordion / collapsible sections
   ═══════════════════════════════════════════════════════════════════════════ */

/* === Calendar View === */
.calendar {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.calendar-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
}

.calendar-nav {
    display: flex;
    gap: var(--space-2);
}

.calendar-nav button {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s var(--ease-smooth);
    color: var(--text-secondary);
    font-size: 16px;
}

.calendar-nav button:hover {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: var(--primary);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-day-name {
    padding: var(--space-3);
    text-align: center;
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.calendar-day {
    min-height: 90px;
    padding: var(--space-2);
    border-right: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
    cursor: pointer;
    transition: all 0.15s var(--ease-smooth);
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

.calendar-day:hover {
    background: var(--primary-soft);
}

.calendar-day.today {
    background: var(--primary-soft);
    box-shadow: inset 0 0 0 2px var(--primary);
}

.calendar-day.today .calendar-day-num {
    color: var(--primary);
    font-weight: 800;
}

.calendar-day.outside-month {
    background: var(--bg-muted);
    opacity: 0.5;
}

.calendar-day-num {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.calendar-event {
    padding: 3px 6px;
    border-radius: var(--radius-xs);
    font-size: 11px;
    background: var(--gradient-primary);
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s var(--ease-smooth);
}

.calendar-event:hover {
    transform: translateY(-1px);
}

.calendar-event.success { background: var(--gradient-success); }
.calendar-event.warning { background: var(--gradient-warning); }
.calendar-event.danger  { background: var(--gradient-danger); }

@media (max-width: 768px) {
    .calendar-day {
        min-height: 60px;
        padding: 4px;
    }
    .calendar-event {
        font-size: 10px;
        padding: 2px 4px;
    }
}

/* === Multi-Step Wizard Progress === */
.wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-8);
    gap: 0;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    position: relative;
}

.wizard-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18px;
    right: -50%;  /* RTL */
    width: 100%;
    height: 2px;
    background: var(--border-subtle);
    z-index: 0;
}

.wizard-step.completed:not(:last-child)::after {
    background: var(--gradient-success);
}

.wizard-step.active:not(:last-child)::after {
    background: linear-gradient(to left, var(--border-subtle), var(--primary));
}

.wizard-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 2px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-tertiary);
    transition: all 0.3s var(--ease-spring);
    z-index: 1;
    position: relative;
}

.wizard-step.active .wizard-step-circle {
    background: var(--gradient-primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 0 0 6px var(--primary-soft);
    transform: scale(1.1);
}

.wizard-step.completed .wizard-step-circle {
    background: var(--gradient-success);
    border-color: var(--success);
    color: white;
}

.wizard-step-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
    text-align: center;
}

.wizard-step.active .wizard-step-label {
    color: var(--primary);
}

.wizard-step.completed .wizard-step-label {
    color: var(--success);
}

/* === Sticky Table Headers === */
.table-sticky-header thead th {
    position: sticky;
    top: 0;
    background: var(--bg-subtle);
    z-index: 10;
    box-shadow: 0 1px 0 var(--border-subtle);
}

/* === Sortable Columns === */
th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-left: 24px !important; /* RTL: room for sort arrow on left */
}

th.sortable::after {
    content: '⇅';
    position: absolute;
    left: 8px;  /* RTL */
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 12px;
    opacity: 0.5;
}

th.sortable:hover {
    background: var(--primary-soft);
}

th.sortable:hover::after {
    opacity: 1;
    color: var(--primary);
}

th.sortable.sort-asc::after {
    content: '↑';
    color: var(--primary);
    opacity: 1;
}

th.sortable.sort-desc::after {
    content: '↓';
    color: var(--primary);
    opacity: 1;
}

/* === Tabs Premium === */
.tabs-premium {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-5);
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs-premium::-webkit-scrollbar { display: none; }

.tabs-premium .tab {
    padding: var(--space-3) var(--space-5);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s var(--ease-smooth);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    font-family: inherit;
    font-size: 14px;
}

.tabs-premium .tab:hover {
    color: var(--primary);
    background: var(--primary-soft);
}

.tabs-premium .tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.tab-content {
    animation: fadeInUp 0.3s var(--ease-out);
}

/* === Accordion / Collapsible === */
.accordion {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-elevated);
}

.accordion-item {
    border-bottom: 1px solid var(--border-subtle);
}

.accordion-item:last-child {
    border-bottom: none;
}

.accordion-header {
    padding: var(--space-4);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.15s var(--ease-smooth);
    font-weight: 600;
    color: var(--text-primary);
}

.accordion-header:hover {
    background: var(--bg-subtle);
}

.accordion-header::after {
    content: '▾';
    color: var(--text-tertiary);
    transition: transform 0.3s var(--ease-spring);
}

.accordion-item.open .accordion-header {
    background: var(--primary-soft);
    color: var(--primary);
}

.accordion-item.open .accordion-header::after {
    transform: rotate(180deg);
    color: var(--primary);
}

.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s var(--ease-smooth);
}

.accordion-item.open .accordion-body {
    max-height: 1000px;
    padding: var(--space-4);
}

/* === Stat with delta indicator === */
.stat-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    margin-right: 8px;
}

.stat-delta.up {
    background: var(--success-soft);
    color: var(--success);
}

.stat-delta.up::before {
    content: '↗';
}

.stat-delta.down {
    background: var(--danger-soft);
    color: var(--danger);
}

.stat-delta.down::before {
    content: '↘';
}

.stat-delta.neutral {
    background: var(--bg-muted);
    color: var(--text-tertiary);
}

.stat-delta.neutral::before {
    content: '→';
}

/* === Avatar (user circle) === */
.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.avatar-sm { width: 28px; height: 28px; font-size: 12px; }
.avatar-lg { width: 48px; height: 48px; font-size: 18px; }
.avatar-xl { width: 64px; height: 64px; font-size: 24px; }

.avatar-stack {
    display: inline-flex;
    flex-direction: row-reverse;
}

.avatar-stack .avatar {
    margin-right: -8px;
    border: 2px solid var(--bg-elevated);
}

/* === Progress Ring (for KPIs) === */
.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring-bg {
    fill: none;
    stroke: var(--bg-muted);
    stroke-width: 8;
}

.progress-ring-value {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s var(--ease-out);
}

.progress-ring-value.success { stroke: var(--success); }
.progress-ring-value.primary { stroke: url(#gradientPrimary); }
.progress-ring-value.warning { stroke: var(--warning); }
.progress-ring-value.danger  { stroke: var(--danger); }

/* === Toast variants === */
.toast-notif.success {
    border-right: 4px solid var(--success);
}
.toast-notif.success::before {
    content: '✅';
    margin-left: 8px;
}

.toast-notif.error {
    border-right: 4px solid var(--danger);
}
.toast-notif.error::before {
    content: '❌';
    margin-left: 8px;
}

.toast-notif.warning {
    border-right: 4px solid var(--warning);
}
.toast-notif.warning::before {
    content: '⚠️';
    margin-left: 8px;
}

.toast-notif.info {
    border-right: 4px solid var(--info);
}
.toast-notif.info::before {
    content: 'ℹ️';
    margin-left: 8px;
}

/* === Confirmation dialog (replacing browser confirm()) === */
.confirm-dialog {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-2xl);
    max-width: 400px;
    width: 90%;
    text-align: center;
    animation: modalEnter 0.3s var(--ease-spring);
}

.confirm-dialog .icon {
    font-size: 48px;
    margin-bottom: var(--space-4);
}

.confirm-dialog h3 {
    margin: 0 0 var(--space-2) 0;
    color: var(--text-primary);
    font-size: 18px;
}

.confirm-dialog p {
    color: var(--text-secondary);
    margin-bottom: var(--space-5);
    line-height: 1.5;
}

.confirm-dialog .actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

.confirm-dialog button {
    flex: 1;
    max-width: 140px;
    padding: 10px !important;
    font-weight: 600 !important;
}

/* === End Premium Phase 3 === */

/* ═══════════════════════════════════════════════════════════════════════════
   ✨ PREMIUM UI — PHASE 5 (v52.119)
   ═══════════════════════════════════════════════════════════════════════════
   Universal Empty State Premium Upgrade
   ───────────────────────────────────────
   Instead of touching all 36+ empty state code sites, this stylesheet
   upgrades ALL empty states (regardless of which component renders them)
   via CSS-only enhancements:
   - .empty-state → SVG illustration support, premium typography
   - .ov-empty   → upgraded with subtle gradient + icon
   - .notif-empty → already premium from Phase 2
   - Generic "color:#94a3b8" placeholders → softer tone, larger icons
   ═══════════════════════════════════════════════════════════════════════════ */

/* === Universal Empty State === */
.empty-state {
    text-align: center;
    padding: 60px 24px;
    color: var(--text-tertiary);
    animation: fadeInUp 0.5s var(--ease-spring);
}

.empty-state .empty-icon,
.empty-state .icon {
    font-size: 72px;
    margin: 0 auto 18px;
    display: block;
    opacity: 0.45;
    filter: grayscale(0.2);
    animation: emptyFloat 3s ease-in-out infinite;
}

.empty-state .empty-title,
.empty-state h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}

.empty-state .empty-hint,
.empty-state p {
    font-size: 14px;
    color: var(--text-tertiary);
    line-height: 1.6;
    max-width: 420px;
    margin: 0 auto;
}

/* Add a subtle gradient backdrop to empty states for depth */
.empty-state::before {
    content: '';
    display: block;
    width: 200px;
    height: 200px;
    margin: -50px auto -150px;
    background: radial-gradient(circle, var(--primary-soft) 0%, transparent 70%);
    pointer-events: none;
}

/* === Compact Empty States (for sidebar/inline contexts) === */
.ov-empty {
    text-align: center;
    padding: 24px 16px;
    color: var(--text-tertiary);
    font-size: 14px;
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border-subtle);
    transition: all 0.2s var(--ease-smooth);
}

.ov-empty:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--text-secondary);
}

/* === Generic placeholder spans (color:#94a3b8) — softer treatment === */
[style*="color:#94a3b8"] {
    color: var(--text-tertiary) !important;
}

/* === Empty <td> in tables — center, softer === */
td[colspan][style*="text-align:center"][style*="#94a3b8"] {
    padding: 32px 16px !important;
    font-size: 14px !important;
    background: linear-gradient(180deg, transparent 0%, var(--bg-subtle) 100%);
}

/* === Empty list — icon-prefixed text === */
.empty-list-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    color: var(--text-tertiary);
    font-size: 14px;
    font-weight: 500;
}

.empty-list-msg::before {
    content: '✨';
    font-size: 20px;
    opacity: 0.6;
}

/* === End Premium Phase 5 === */

/* ═══════════════════════════════════════════════════════════════
   v52.133 — Pill Header (text + icon) + Mobile Fixes + Premium Polish
   ═══════════════════════════════════════════════════════════════ */

/* ── Pill button: icon + label, compact, color-tinted ── */
.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    height: 34px;
    min-height: 34px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.btn-pill-icon {
    font-size: 14px;
    line-height: 1;
    display: inline-block;
}
.btn-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -4px rgba(0,0,0,0.12);
}
.btn-pill:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* ── Color tints via data-color attribute ── */
/* Each color: subtle gradient bg, matching border, semantic text color */

.btn-pill[data-color="indigo"] {
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border-color: #c7d2fe;
    color: #3730a3;
}
.btn-pill[data-color="indigo"]:hover {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    border-color: #6366f1;
}

.btn-pill[data-color="violet"] {
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    border-color: #ddd6fe;
    color: #5b21b6;
}
.btn-pill[data-color="violet"]:hover {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    border-color: #8b5cf6;
}

.btn-pill[data-color="purple"] {
    background: linear-gradient(135deg, #faf5ff, #f3e8ff);
    border-color: #e9d5ff;
    color: #6b21a8;
}
.btn-pill[data-color="purple"]:hover {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    border-color: #a855f7;
}

.btn-pill[data-color="emerald"] {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-color: #a7f3d0;
    color: #065f46;
}
.btn-pill[data-color="emerald"]:hover {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border-color: #10b981;
}

.btn-pill[data-color="green"] {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-color: #bbf7d0;
    color: #166534;
}
.btn-pill[data-color="green"]:hover {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border-color: #16a34a;
}

.btn-pill[data-color="rose"] {
    background: linear-gradient(135deg, #fff1f2, #ffe4e6);
    border-color: #fecdd3;
    color: #9f1239;
}
.btn-pill[data-color="rose"]:hover {
    background: linear-gradient(135deg, #ffe4e6, #fecdd3);
    border-color: #f43f5e;
}

.btn-pill[data-color="pink"] {
    background: linear-gradient(135deg, #fdf2f8, #fce7f3);
    border-color: #fbcfe8;
    color: #9d174d;
}
.btn-pill[data-color="pink"]:hover {
    background: linear-gradient(135deg, #fce7f3, #fbcfe8);
    border-color: #ec4899;
}

.btn-pill[data-color="orange"] {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border-color: #fed7aa;
    color: #9a3412;
}
.btn-pill[data-color="orange"]:hover {
    background: linear-gradient(135deg, #ffedd5, #fed7aa);
    border-color: #f97316;
}

.btn-pill[data-color="amber"] {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-color: #fde68a;
    color: #92400e;
}
.btn-pill[data-color="amber"]:hover {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-color: #f59e0b;
}

.btn-pill[data-color="cyan"] {
    background: linear-gradient(135deg, #ecfeff, #cffafe);
    border-color: #a5f3fc;
    color: #155e75;
}
.btn-pill[data-color="cyan"]:hover {
    background: linear-gradient(135deg, #cffafe, #a5f3fc);
    border-color: #06b6d4;
}

.btn-pill[data-color="teal"] {
    background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
    border-color: #99f6e4;
    color: #115e59;
}
.btn-pill[data-color="teal"]:hover {
    background: linear-gradient(135deg, #ccfbf1, #99f6e4);
    border-color: #14b8a6;
}

.btn-pill[data-color="sky"] {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-color: #bae6fd;
    color: #075985;
}
.btn-pill[data-color="sky"]:hover {
    background: linear-gradient(135deg, #e0f2fe, #bae6fd);
    border-color: #0284c7;
}

.btn-pill[data-color="slate"] {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-color: #e2e8f0;
    color: #334155;
}
.btn-pill[data-color="slate"]:hover {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border-color: #64748b;
}

.btn-pill[data-color="gray"] {
    background: linear-gradient(135deg, #f9fafb, #f3f4f6);
    border-color: #e5e7eb;
    color: #374151;
}
.btn-pill[data-color="gray"]:hover {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    border-color: #6b7280;
}

/* ── Logout: distinct red, slightly emphasized ── */
.btn-pill-logout {
    background: linear-gradient(135deg, #fef2f2, #fee2e2) !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
    font-weight: 700;
}
.btn-pill-logout:hover {
    background: linear-gradient(135deg, #fee2e2, #fecaca) !important;
    border-color: #ef4444 !important;
    box-shadow: 0 6px 14px -4px rgba(239,68,68,0.25) !important;
}

/* ── Utility icon buttons (theme/dark — 36×36 squares) ── */
.btn-utility {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 9px;
    background: var(--col-bg);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.btn-utility:hover {
    transform: translateY(-1px);
    background: var(--card-bg);
    border-color: var(--primary);
    box-shadow: 0 4px 10px rgba(79,70,229,0.15);
}

/* ── Header divider (subtle separator between groups) ── */
.header-divider {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: linear-gradient(to bottom, transparent, var(--border), transparent);
    margin: 0 3px;
    flex-shrink: 0;
}

/* ── Header layout: ensure proper flex behavior ── */
.header-actions {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px !important;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    row-gap: 8px;
}

/* ── Header refinements ── */
.header {
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    background: rgba(255, 255, 255, 0.92);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* ═══ DARK MODE: pill button overrides ═══ */
body[data-theme="dark"] .btn-pill,
body.dark .btn-pill {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e2e8f0 !important;
}
body[data-theme="dark"] .btn-pill:hover,
body.dark .btn-pill:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.2) !important;
    box-shadow: 0 6px 14px -4px rgba(0,0,0,0.3);
}
/* In dark mode, retain a hint of color via the icon's emoji */
body[data-theme="dark"] .btn-pill[data-color="indigo"]:hover,
body.dark .btn-pill[data-color="indigo"]:hover { border-color: #818cf8 !important; }
body[data-theme="dark"] .btn-pill[data-color="violet"]:hover,
body.dark .btn-pill[data-color="violet"]:hover { border-color: #a78bfa !important; }
body[data-theme="dark"] .btn-pill[data-color="purple"]:hover,
body.dark .btn-pill[data-color="purple"]:hover { border-color: #c084fc !important; }
body[data-theme="dark"] .btn-pill[data-color="emerald"]:hover,
body.dark .btn-pill[data-color="emerald"]:hover { border-color: #34d399 !important; }
body[data-theme="dark"] .btn-pill[data-color="green"]:hover,
body.dark .btn-pill[data-color="green"]:hover { border-color: #4ade80 !important; }
body[data-theme="dark"] .btn-pill[data-color="rose"]:hover,
body.dark .btn-pill[data-color="rose"]:hover { border-color: #fb7185 !important; }
body[data-theme="dark"] .btn-pill[data-color="pink"]:hover,
body.dark .btn-pill[data-color="pink"]:hover { border-color: #f472b6 !important; }
body[data-theme="dark"] .btn-pill[data-color="orange"]:hover,
body.dark .btn-pill[data-color="orange"]:hover { border-color: #fb923c !important; }
body[data-theme="dark"] .btn-pill[data-color="amber"]:hover,
body.dark .btn-pill[data-color="amber"]:hover { border-color: #fbbf24 !important; }
body[data-theme="dark"] .btn-pill[data-color="cyan"]:hover,
body.dark .btn-pill[data-color="cyan"]:hover { border-color: #22d3ee !important; }
body[data-theme="dark"] .btn-pill[data-color="teal"]:hover,
body.dark .btn-pill[data-color="teal"]:hover { border-color: #2dd4bf !important; }
body[data-theme="dark"] .btn-pill[data-color="sky"]:hover,
body.dark .btn-pill[data-color="sky"]:hover { border-color: #38bdf8 !important; }
body[data-theme="dark"] .btn-pill[data-color="slate"]:hover,
body.dark .btn-pill[data-color="slate"]:hover { border-color: #94a3b8 !important; }
body[data-theme="dark"] .btn-pill[data-color="gray"]:hover,
body.dark .btn-pill[data-color="gray"]:hover { border-color: #9ca3af !important; }

body[data-theme="dark"] .btn-pill-logout,
body.dark .btn-pill-logout {
    background: rgba(239,68,68,0.15) !important;
    border-color: rgba(239,68,68,0.4) !important;
    color: #fca5a5 !important;
}
body[data-theme="dark"] .btn-pill-logout:hover,
body.dark .btn-pill-logout:hover {
    background: rgba(239,68,68,0.25) !important;
    border-color: #ef4444 !important;
}

body[data-theme="dark"] .header,
body.dark .header {
    background: rgba(15, 23, 42, 0.92);
}

/* ═══ MOBILE: Live Monitoring Dashboard fix ═══ */
@media (max-width: 768px) {
    /* KPIs: 5 cols → 2 cols */
    #adminOverviewBox > div:nth-child(2) {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    /* Sections: 3 cols → 1 col */
    #adminOverviewBox > div:nth-child(3) {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .ov-kpi-card {
        padding: 12px 8px !important;
        border-radius: 12px !important;
    }
    .ov-kpi-num {
        font-size: 22px !important;
    }
    .ov-kpi-label {
        font-size: 10.5px !important;
        line-height: 1.3 !important;
    }
    .ov-section {
        padding: 12px !important;
    }
    .ov-sec-title {
        font-size: 12px !important;
    }
    /* Header on mobile */
    .header {
        padding: 8px 10px !important;
        gap: 6px !important;
    }
    .header-actions {
        gap: 5px !important;
    }
    .btn-pill {
        padding: 5px 10px !important;
        font-size: 11.5px !important;
        height: 30px !important;
        min-height: 30px !important;
    }
    .btn-pill-icon {
        font-size: 13px !important;
    }
    .btn-utility {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 14px !important;
    }
    .header-divider {
        height: 18px;
        margin: 0 1px;
    }
    .header-stats {
        font-size: 11px !important;
        gap: 6px !important;
    }
    .header-stats div {
        padding: 3px 8px !important;
    }
    #welcomeUser {
        font-size: 11px;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .header img {
        height: 28px !important;
    }
    .header h2 {
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {
    .modal-content {
        padding: 14px !important;
        margin: 10px !important;
        max-height: 95vh !important;
    }
    .modal input,
    .modal select,
    .modal textarea {
        font-size: 16px !important;
    }
    .ov-kpi-num {
        font-size: 19px !important;
    }
    .ov-kpi-label {
        font-size: 9.5px !important;
    }
    /* On very small screens, hide labels and show icon-only */
    .btn-pill span:not(.btn-pill-icon) {
        display: none;
    }
    .btn-pill {
        padding: 0 !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        justify-content: center;
    }
    .btn-pill-logout span:not(.btn-pill-icon) {
        display: inline; /* keep خروج visible — too important to hide */
    }
    .btn-pill-logout {
        padding: 5px 10px !important;
        width: auto !important;
        height: 32px !important;
    }
}

/* ═══ MOBILE: Tighter layouts ═══ */
@media (max-width: 768px) {
    .hr-stat-grid,
    .stat-grid,
    .kpi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .modal-content table {
        font-size: 12px;
    }
    .modal-body {
        overflow-x: auto;
    }
    .hr-form-row,
    .form-row {
        flex-direction: column !important;
    }
    .hr-form-row > *,
    .form-row > * {
        width: 100% !important;
    }
}

/* ═══ PREMIUM POLISH: Modal refinements ═══ */
.modal-content {
    border-radius: 20px;
    box-shadow:
        0 25px 60px -15px rgba(0,0,0,0.25),
        0 0 0 1px rgba(255,255,255,0.06);
    animation: modalSlideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ═══ PREMIUM POLISH: Card hover refinement ═══ */
.task-card,
.stat-card,
.ov-kpi-card,
.ov-section {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s ease,
                border-color 0.2s ease;
}
.task-card:hover,
.stat-card:hover,
.ov-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -10px rgba(0,0,0,0.18);
}

/* ═══ PREMIUM POLISH: Enhanced focus states (a11y) ═══ */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[data-action]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.btn-pill:focus-visible,
.btn-utility:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* ═══ PREMIUM POLISH: Smoother scrollbar ═══ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--col-bg);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #cbd5e1, #94a3b8);
    border-radius: 10px;
    border: 2px solid var(--col-bg);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #94a3b8, #64748b);
}
body[data-theme="dark"] ::-webkit-scrollbar-thumb,
body.dark ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #475569, #334155);
}

/* ═══ PREMIUM POLISH: Better notif bell ═══ */
.notif-wrapper {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 9px;
    background: var(--col-bg);
    border: 1px solid var(--border);
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.16s ease;
    flex-shrink: 0;
}
.notif-wrapper:hover {
    background: var(--card-bg);
    border-color: var(--primary);
    box-shadow: 0 4px 10px rgba(79,70,229,0.15);
    transform: translateY(-1px);
}
.notif-bell {
    font-size: 16px;
    line-height: 1;
}
@media (max-width: 768px) {
    .notif-wrapper {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }
    .notif-bell {
        font-size: 14px;
    }
}

/* ═══ PREMIUM POLISH: Color theme consistency ═══ */
body[data-theme="dark"] [style*="color:#1e293b"],
body[data-theme="dark"] [style*="color:#0f172a"],
body[data-theme="dark"] [style*="color: #1e293b"],
body[data-theme="dark"] [style*="color: #0f172a"],
body.dark [style*="color:#1e293b"],
body.dark [style*="color:#0f172a"] {
    color: var(--text) !important;
}
body[data-theme="dark"] [style*="background:white"],
body[data-theme="dark"] [style*="background:#fff"],
body[data-theme="dark"] [style*="background: white"],
body.dark [style*="background:white"] {
    background: var(--card-bg) !important;
}

/* ═══ Backdrop blur for the bg-menu ═══ */
.bg-selector {
    backdrop-filter: blur(8px) saturate(1.3);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);
    border-radius: 14px;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.18);
}

/* ═══ End v52.133 UI overhaul ═══ */

/* ═══════════════════════════════════════════════════════════════
   v52.135 — Welcome Modal (PREMIUM redesign)
   ═══════════════════════════════════════════════════════════════ */

.welcome-modal {
    --welcome-accent: #8b5cf6;
}
.welcome-content {
    max-width: 600px;
    width: 94%;
    padding: 0;
    border-radius: 28px;
    overflow: hidden;
    background: var(--card-bg);
    box-shadow:
        0 30px 80px -20px rgba(0,0,0,0.35),
        0 0 0 1px rgba(255,255,255,0.06);
    animation: welcomeFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
@keyframes welcomeFadeUp {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ── */
.welcome-header {
    background: linear-gradient(135deg, #fb923c, #f97316, #ec4899);
    color: white;
    padding: 32px 32px 36px;
    position: relative;
    overflow: hidden;
}
.welcome-header-deco {
    position: absolute;
    top: -80px;
    right: -50px;
    width: 280px;
    height: 280px;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(255,255,255,0.15) 0%, transparent 50%);
    pointer-events: none;
    animation: decoFloat 12s ease-in-out infinite;
}
@keyframes decoFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33%      { transform: translate(-15px, 10px) rotate(5deg); }
    66%      { transform: translate(10px, -8px) rotate(-3deg); }
}

.welcome-close {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s, transform 0.18s;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: 'Cairo', sans-serif;
}
.welcome-close:hover {
    background: rgba(255,255,255,0.35);
    transform: rotate(90deg);
}

.welcome-greeting {
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    z-index: 1;
}
.welcome-icon {
    font-size: 56px;
    line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.18));
    animation: iconBounce 2.5s ease-in-out infinite;
}
@keyframes iconBounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.08) rotate(-5deg); }
}
.welcome-greeting-text {
    flex: 1;
}
.welcome-greeting h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.welcome-name-line {
    margin: 6px 0 0;
    font-size: 16px;
    opacity: 0.95;
    font-weight: 500;
}
.welcome-name-line b {
    font-weight: 800;
}
.welcome-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    opacity: 0.85;
    font-weight: 400;
}
.welcome-date {
    margin-top: 16px;
    font-size: 12px;
    opacity: 0.85;
    position: relative;
    z-index: 1;
    font-weight: 500;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.2);
}

/* ── Body ── */
.welcome-body {
    flex: 1;
    overflow-y: auto;
    padding: 22px 24px 24px;
    background: var(--card-bg);
}

.welcome-loading {
    text-align: center;
    padding: 32px 20px;
    color: var(--text-muted);
}
.welcome-spinner {
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--welcome-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 12px;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.welcome-error {
    text-align: center;
    padding: 32px 20px;
    color: #dc2626;
    font-weight: 700;
}

/* ── Summary pills ── */
.welcome-summary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px dashed var(--border);
}
.ws-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
    border: 1px solid transparent;
}
.ws-pill-overdue {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-color: #fca5a5;
    color: #991b1b;
}
.ws-pill-today {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-color: #fde68a;
    color: #92400e;
}
.ws-pill-tomorrow {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-color: #bfdbfe;
    color: #1e40af;
}

/* ── Sections ── */
.welcome-sections {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.welcome-section {
    /* nothing — content flows */
}
.welcome-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.welcome-section-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    flex-shrink: 0;
}
.welcome-section-text {
    flex: 1;
}
.welcome-section-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 2px;
}
.welcome-section-count {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}

/* ── Task cards ── */
.welcome-task-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.welcome-task {
    background: var(--col-bg);
    border-radius: 12px;
    padding: 12px 14px;
    border-right: 3px solid var(--border);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}
.welcome-task:hover {
    transform: translateX(-3px);
    box-shadow: 0 4px 12px -2px rgba(0,0,0,0.08);
}
.welcome-task-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
}
.welcome-task-name {
    font-weight: 700;
    color: var(--text);
    flex: 1;
    font-size: 13.5px;
    line-height: 1.4;
}
.welcome-task-badge {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}
.welcome-task-badge.urgent {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.welcome-task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.welcome-meta-chip {
    font-size: 11px;
    padding: 3px 8px;
    background: var(--card-bg);
    border-radius: 8px;
    color: var(--text-muted);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.welcome-meta-chip.overdue-badge {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fca5a5;
    font-weight: 700;
}

/* Color accents per task type */
.welcome-task.is-overdue {
    border-right-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, var(--col-bg) 60%);
}
.welcome-task.is-today {
    border-right-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, var(--col-bg) 60%);
}
.welcome-task.is-tomorrow {
    border-right-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, var(--col-bg) 60%);
}

.welcome-more {
    text-align: center;
    font-size: 11.5px;
    color: var(--text-muted);
    padding: 6px;
    margin-top: 4px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    font-weight: 600;
}

/* ── All-clear celebration state ── */
.welcome-allclear,
.welcome-quietday {
    text-align: center;
    padding: 24px 16px 12px;
}
.welcome-allclear-icon,
.welcome-quietday-icon {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 12px;
    display: inline-block;
    animation: celebrationBounce 1.5s ease-in-out infinite;
}
@keyframes celebrationBounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.1) rotate(8deg); }
}
.welcome-allclear h3,
.welcome-quietday h3 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 900;
    color: var(--text);
}
.welcome-allclear h3 {
    background: linear-gradient(135deg, #10b981, #059669);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.welcome-quietday h3 {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.welcome-allclear p,
.welcome-quietday p {
    color: var(--text-muted);
    font-size: 13.5px;
    margin: 0;
    line-height: 1.5;
    max-width: 400px;
    margin-inline: auto;
}
.welcome-task-summary {
    margin-top: 16px;
    padding: 10px 16px;
    background: var(--col-bg);
    border-radius: 12px;
    font-size: 13px;
    display: inline-block;
    border: 1px solid var(--border);
}
.welcome-task-summary b {
    color: var(--text);
    font-weight: 800;
    font-size: 16px;
}

/* ── Dismiss button ── */
.welcome-dismiss-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 18px;
    border: none;
    background: linear-gradient(135deg, var(--welcome-accent, #8b5cf6) 0%, #ec4899 100%);
    color: white;
    font-family: 'Cairo', sans-serif;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: filter 0.16s ease, transform 0.1s ease;
    flex-shrink: 0;
}
.welcome-dismiss-btn:hover {
    filter: brightness(1.1);
}
.welcome-dismiss-btn:active {
    transform: scale(0.98);
}

/* ── Dark mode ── */
body[data-theme="dark"] .welcome-task,
body.dark .welcome-task {
    background: rgba(255,255,255,0.04);
}
body[data-theme="dark"] .welcome-task.is-overdue,
body.dark .welcome-task.is-overdue {
    background: linear-gradient(135deg, rgba(239,68,68,0.18) 0%, rgba(255,255,255,0.04) 60%);
}
body[data-theme="dark"] .welcome-task.is-today,
body.dark .welcome-task.is-today {
    background: linear-gradient(135deg, rgba(245,158,11,0.18) 0%, rgba(255,255,255,0.04) 60%);
}
body[data-theme="dark"] .welcome-task.is-tomorrow,
body.dark .welcome-task.is-tomorrow {
    background: linear-gradient(135deg, rgba(59,130,246,0.18) 0%, rgba(255,255,255,0.04) 60%);
}
body[data-theme="dark"] .ws-pill-overdue,
body.dark .ws-pill-overdue {
    background: rgba(239,68,68,0.18);
    color: #fca5a5;
    border-color: rgba(239,68,68,0.4);
}
body[data-theme="dark"] .ws-pill-today,
body.dark .ws-pill-today {
    background: rgba(245,158,11,0.18);
    color: #fcd34d;
    border-color: rgba(245,158,11,0.4);
}
body[data-theme="dark"] .ws-pill-tomorrow,
body.dark .ws-pill-tomorrow {
    background: rgba(59,130,246,0.18);
    color: #93c5fd;
    border-color: rgba(59,130,246,0.4);
}
body[data-theme="dark"] .welcome-meta-chip,
body.dark .welcome-meta-chip {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
}
body[data-theme="dark"] .welcome-meta-chip.overdue-badge,
body.dark .welcome-meta-chip.overdue-badge {
    background: rgba(239,68,68,0.18);
    color: #fca5a5;
    border-color: rgba(239,68,68,0.4);
}
body[data-theme="dark"] .welcome-task-badge.urgent,
body.dark .welcome-task-badge.urgent {
    background: rgba(239,68,68,0.2);
    color: #fca5a5;
    border-color: rgba(239,68,68,0.4);
}

/* ── Mobile ── */
@media (max-width: 600px) {
    .welcome-content {
        max-width: 100%;
        width: 96%;
        margin: 8px auto;
        max-height: 92vh;
        border-radius: 22px;
    }
    .welcome-header {
        padding: 24px 20px 28px;
    }
    .welcome-icon {
        font-size: 44px;
    }
    .welcome-greeting h2 {
        font-size: 23px;
    }
    .welcome-greeting {
        gap: 14px;
    }
    .welcome-body {
        padding: 18px 18px 20px;
    }
    .welcome-section-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    .welcome-task-list {
        gap: 6px;
    }
    .welcome-task {
        padding: 10px 12px;
    }
    .welcome-allclear-icon,
    .welcome-quietday-icon {
        font-size: 52px;
    }
    .welcome-allclear h3,
    .welcome-quietday h3 {
        font-size: 19px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   v52.138 — Keyboard shortcuts overlay
   ═══════════════════════════════════════════════════════════════ */

.kbd-overlay-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: kbdFadeIn 0.18s ease-out;
}
@keyframes kbdFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.kbd-overlay-content {
    background: var(--card-bg);
    border-radius: 22px;
    width: 100%; max-width: 540px;
    max-height: 88vh;
    overflow: hidden;
    box-shadow: 0 30px 70px -10px rgba(0,0,0,0.4);
    animation: kbdSlideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}
@keyframes kbdSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.kbd-overlay-header {
    background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
    color: white;
    padding: 18px 22px;
    display: flex; align-items: center; justify-content: space-between;
}
.kbd-overlay-header h2 {
    margin: 0; font-size: 17px; font-weight: 800;
}
.kbd-close {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.25);
    color: white; font-size: 22px; line-height: 1;
    cursor: pointer; padding: 0;
    transition: background 0.18s, transform 0.18s;
    display: flex; align-items: center; justify-content: center;
}
.kbd-close:hover {
    background: rgba(255,255,255,0.32);
    transform: rotate(90deg);
}
.kbd-overlay-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 22px;
}
.kbd-row {
    display: flex; align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border);
}
.kbd-row:last-child { border-bottom: none; }
.kbd-keys {
    display: flex; gap: 4px; flex-shrink: 0;
    min-width: 110px;
    justify-content: flex-end;
}
.kbd-desc {
    flex: 1;
    font-size: 13.5px;
    color: var(--text);
    font-weight: 500;
    line-height: 1.5;
}
.kbd-when {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 400;
}
.kbd-key {
    display: inline-block;
    padding: 3px 10px;
    background: var(--col-bg);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 6px;
    font-family: 'SF Mono', 'Cairo', monospace;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text);
    min-width: 24px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.kbd-overlay-footer {
    padding: 12px 22px;
    background: var(--col-bg);
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

body[data-theme="dark"] .kbd-key,
body.dark .kbd-key {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    color: #e2e8f0;
}

/* Mobile: stack and shrink */
@media (max-width: 480px) {
    .kbd-overlay-content {
        border-radius: 18px;
    }
    .kbd-row {
        flex-direction: column;
        gap: 6px;
        padding: 8px 0;
    }
    .kbd-keys {
        min-width: 0;
        justify-content: flex-start;
    }
    .kbd-desc {
        font-size: 12.5px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   v52.139 — Accessibility + Final Performance Polish
   ═══════════════════════════════════════════════════════════════ */

/* ── Respect users' motion preferences (vestibular disorders, focus aids) ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── High-contrast mode support (Windows accessibility) ── */
@media (prefers-contrast: more) {
    .btn-pill,
    .btn-utility,
    .btn-icon {
        border-width: 2px;
    }
    .header-divider {
        background: var(--text);
        opacity: 0.3;
    }
}

/* ── Print styles (admin reports + receipts) ── */
@media print {
    /* Hide interactive elements */
    .header,
    .modal,
    button,
    .btn,
    nav,
    .notif-wrapper,
    #welcomeModal,
    #offlineBanner,
    #kbdOverlayBackdrop {
        display: none !important;
    }
    /* Make content fit on paper */
    body {
        background: white !important;
        color: black !important;
        font-size: 11pt !important;
        line-height: 1.4 !important;
    }
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
    /* Cards become flat */
    .stat-card,
    .ov-kpi-card,
    .ov-section,
    .task-card {
        box-shadow: none !important;
        border: 1px solid #999 !important;
        page-break-inside: avoid;
    }
    /* No links underlined */
    a {
        color: black !important;
        text-decoration: none !important;
    }
    /* Tables print clean */
    table {
        border-collapse: collapse !important;
        page-break-inside: auto;
    }
    table tr { page-break-inside: avoid; page-break-after: auto; }
    table thead { display: table-header-group; }
    table tfoot { display: table-footer-group; }
}

/* ── Focus indicators visible on keyboard navigation ── */
*:focus-visible {
    outline-offset: 2px;
}

/* ── Accessibility: skip-to-content link ── */
.skip-to-content {
    position: absolute;
    top: -100px;
    right: 8px;
    background: var(--primary);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 6px;
    z-index: 100001;
    font-weight: 700;
    transition: top 0.2s ease;
    font-family: 'Cairo', sans-serif;
}
.skip-to-content:focus {
    top: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   v52.140 — Bulk Actions + Undo Toast + Global Search + Theme Picker
   ═══════════════════════════════════════════════════════════════ */

/* ── Bulk action bar ── */
#bulkActionBar {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    padding: 12px 20px;
    border-radius: 14px;
    box-shadow: 0 12px 36px -8px rgba(0,0,0,0.35);
    z-index: 9998;
    align-items: center;
    gap: 12px;
    font-family: 'Cairo', sans-serif;
    animation: bulkBarSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes bulkBarSlideUp {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.bulk-count-badge {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    padding: 4px 12px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 13px;
}
.bulk-action-btn {
    padding: 8px 14px;
    border: none;
    border-radius: 9px;
    font-family: 'Cairo', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.16s, transform 0.1s;
}
.bulk-action-btn:hover { filter: brightness(1.1); }
.bulk-action-btn:active { transform: scale(0.96); }
.bulk-action-btn.danger { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; }
.bulk-action-btn.success { background: linear-gradient(135deg, #10b981, #059669); color: white; }
.bulk-action-btn.warning { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; }
.bulk-action-btn.cancel { background: rgba(255,255,255,0.15); color: white; }

/* Bulk-selected task cards */
.task-card.bulk-selected {
    box-shadow: 0 0 0 3px var(--primary), 0 8px 16px -4px rgba(79,70,229,0.25) !important;
    background: linear-gradient(135deg, rgba(79,70,229,0.05), rgba(124,58,237,0.05)) !important;
}
body.bulk-mode .task-card {
    cursor: pointer;
}
body.bulk-mode .task-card::before {
    content: '☐';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 22px;
    height: 22px;
    background: white;
    border: 2px solid var(--border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: transparent;
    z-index: 5;
}
body.bulk-mode .task-card.bulk-selected::before {
    content: '✓';
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* ── Undo toast ── */
.undo-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    background: #1e293b;
    color: white;
    padding: 14px 16px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 16px 40px -8px rgba(0,0,0,0.4);
    min-width: 320px;
    max-width: 460px;
    font-family: 'Cairo', sans-serif;
    animation: undoSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes undoSlideIn {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
.undo-icon { font-size: 22px; flex-shrink: 0; }
.undo-content { flex: 1; }
.undo-msg { font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.undo-progress {
    height: 3px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    overflow: hidden;
}
.undo-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #ef4444, #f59e0b);
    width: 100%;
    transition: width 10s linear;
}
.undo-btn {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    flex-shrink: 0;
    transition: filter 0.15s, transform 0.1s;
}
.undo-btn:hover { filter: brightness(1.15); }
.undo-btn:active { transform: scale(0.96); }

/* ── Global Search Overlay ── */
.global-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 100000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 20px 20px;
    animation: kbdFadeIn 0.18s ease-out;
}
.global-search-content {
    background: var(--card-bg);
    border-radius: 18px;
    width: 100%;
    max-width: 640px;
    overflow: hidden;
    box-shadow: 0 30px 70px -10px rgba(0,0,0,0.4);
    animation: kbdSlideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}
.global-search-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.global-search-icon {
    font-size: 22px;
    opacity: 0.7;
}
.global-search-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: 'Cairo', sans-serif;
    font-size: 16px;
    font-weight: 600;
    outline: none;
    padding: 4px 0;
}
.global-search-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}
.global-search-kbd {
    display: inline-block;
    padding: 3px 10px;
    background: var(--col-bg);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 6px;
    font-family: 'SF Mono', 'Cairo', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}
.global-search-results {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}
.global-search-hint,
.global-search-empty,
.global-search-loading {
    text-align: center;
    color: var(--text-muted);
    padding: 32px 20px;
    font-size: 14px;
}
.gs-section { padding: 4px 0 12px; }
.gs-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 20px;
    margin-bottom: 4px;
}
.gs-item {
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.12s;
    border-right: 3px solid transparent;
}
.gs-item:hover {
    background: var(--col-bg);
    border-right-color: var(--primary);
}
.gs-item-title {
    font-weight: 700;
    color: var(--text);
    font-size: 13.5px;
    margin-bottom: 4px;
}
.gs-item-title mark {
    background: linear-gradient(180deg, transparent 50%, #fde047 50%);
    color: inherit;
    padding: 0 1px;
    font-weight: 800;
}
.gs-item-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--text-muted);
}
.gs-item-meta span { display: inline-flex; align-items: center; gap: 3px; }
.gs-status {
    background: var(--col-bg);
    padding: 2px 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-weight: 700;
}

/* ── Theme picker overlay ── */
.theme-picker {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: kbdFadeIn 0.18s ease-out;
}
.theme-picker-content {
    background: var(--card-bg);
    border-radius: 22px;
    padding: 24px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 30px 70px -10px rgba(0,0,0,0.4);
    animation: kbdSlideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.theme-picker-title {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 18px;
    color: var(--text);
    text-align: center;
}
.theme-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.theme-option {
    padding: 22px 16px;
    border: none;
    border-radius: 14px;
    color: white;
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 6px 14px -4px rgba(0,0,0,0.18);
}
.theme-option:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -8px rgba(0,0,0,0.32);
}
.theme-option.active {
    box-shadow: 0 0 0 4px var(--primary), 0 8px 20px -4px rgba(0,0,0,0.25);
}

/* Mobile */
@media (max-width: 600px) {
    #bulkActionBar { left: 10px; right: 10px; transform: none; flex-wrap: wrap; }
    .undo-toast { right: 10px; left: 10px; min-width: 0; }
    .global-search-overlay { padding-top: 20px; }
    .theme-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   v52.141 — Pins + Recent + Saved Filters + Mentions
   ═══════════════════════════════════════════════════════════════ */

/* ── Pinned task indicator ── */
.task-card.is-pinned {
    box-shadow: 0 0 0 2px #f59e0b, 0 4px 12px -4px rgba(245,158,11,0.3) !important;
    position: relative;
}
.task-card.is-pinned::after {
    content: '📌';
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 14px;
    z-index: 5;
    animation: pinBounce 2s ease-in-out infinite;
}
@keyframes pinBounce {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-12deg); }
}
.task-pin-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.task-pin-btn:hover {
    background: #fef3c7;
    border-color: #f59e0b;
    transform: scale(1.1);
}
.task-pin-btn.is-pinned {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-color: #f59e0b;
    color: white;
}

/* ── Recent items widget ── */
.recent-widget {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 16px;
}
.recent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.recent-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
}
.recent-clear-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 7px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-muted);
    transition: all 0.15s;
}
.recent-clear-btn:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fca5a5;
}
.recent-list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-behavior: smooth;
}
.recent-list::-webkit-scrollbar { height: 4px; }
.recent-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.recent-item {
    flex-shrink: 0;
    background: var(--col-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    max-width: 200px;
}
.recent-item:hover {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(79,70,229,0.05), transparent);
    transform: translateY(-2px);
}
.recent-icon { font-size: 14px; flex-shrink: 0; }
.recent-label {
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recent-extra {
    font-size: 10.5px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.recent-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    padding: 16px;
}

/* ── Saved filters dropdown ── */
.saved-filters-panel {
    display: none;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 8px 24px -6px rgba(0,0,0,0.12);
    min-width: 240px;
    max-width: 320px;
}
.saved-filter-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}
.saved-filter-apply {
    flex: 1;
    background: var(--col-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    text-align: right;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    font-size: 12.5px;
    color: var(--text);
    transition: all 0.15s;
}
.saved-filter-apply:hover {
    background: linear-gradient(135deg, rgba(79,70,229,0.08), transparent);
    border-color: var(--primary);
}
.saved-filter-del {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-muted);
    transition: all 0.15s;
}
.saved-filter-del:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fca5a5;
}

/* ── @mention dropdown ── */
.mention-dropdown {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px -4px rgba(0,0,0,0.18);
    overflow: hidden;
    min-width: 220px;
    max-width: 320px;
    max-height: 240px;
    overflow-y: auto;
    animation: mentionFadeIn 0.15s ease-out;
}
@keyframes mentionFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mention-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.12s;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}
.mention-item:last-child { border-bottom: none; }
.mention-item:hover,
.mention-item.active {
    background: linear-gradient(135deg, rgba(79,70,229,0.08), rgba(124,58,237,0.05));
}
.mention-at {
    color: var(--primary);
    font-weight: 800;
    flex-shrink: 0;
}
.mention-name {
    font-weight: 700;
    color: var(--text);
    flex: 1;
}
.mention-full {
    font-size: 11.5px;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Highlighted @mentions inside displayed comments */
.comment-mention,
.mention-tag {
    background: linear-gradient(135deg, rgba(79,70,229,0.12), rgba(124,58,237,0.12));
    color: var(--primary);
    padding: 1px 6px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════
   v52.142 — Smart Suggestions (Deadlines + Auto-categorize)
   ═══════════════════════════════════════════════════════════════ */

/* ── Deadline suggestion card ── */
.suggestion-card {
    background: linear-gradient(135deg, rgba(139,92,246,0.05), rgba(236,72,153,0.05));
    border: 1px solid #c084fc;
    border-radius: 14px;
    padding: 14px 18px;
    margin-top: 10px;
    animation: suggestionSlideIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes suggestionSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.suggestion-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.suggestion-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
}
.suggestion-content {
    /* spacious */
}
.suggestion-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.suggestion-date {
    font-size: 22px;
    font-weight: 900;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.suggestion-days {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
}
.suggestion-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    margin-bottom: 6px;
}
.suggestion-meta-item {
    color: var(--text-muted);
}
.suggestion-basis {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
    font-style: italic;
}
.suggestion-apply-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    padding: 9px 16px;
    border-radius: 10px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
}
.suggestion-apply-btn:hover {
    filter: brightness(1.1);
}
.suggestion-apply-btn:active {
    transform: scale(0.97);
}
.suggestion-loading,
.suggestion-warning,
.suggestion-empty {
    background: var(--col-bg);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}
.suggestion-warning {
    background: linear-gradient(135deg, #fef3c7, transparent);
    border-color: #fbbf24;
    color: #92400e;
}

/* ── Expense category auto-suggestion pill ── */
.cat-suggestion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(59,130,246,0.06));
    border: 1px dashed #10b981;
    border-radius: 10px;
    animation: suggestionSlideIn 0.25s ease-out;
}
.cat-suggestion-icon {
    font-size: 18px;
}
.cat-suggestion-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}
.cat-suggestion-pill {
    background: var(--col-bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 5px 12px;
    font-family: 'Cairo', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cat-suggestion-pill:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}
.cat-suggestion-conf {
    font-size: 10.5px;
    background: rgba(255,255,255,0.7);
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 800;
}
.cat-suggestion-meta {
    font-size: 11px;
    color: var(--text-muted);
}

/* Dark mode adjustments */
body[data-theme="dark"] .suggestion-card,
body.dark .suggestion-card {
    background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(236,72,153,0.12));
    border-color: #a855f7;
}
body[data-theme="dark"] .cat-suggestion,
body.dark .cat-suggestion {
    background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(59,130,246,0.12));
}
body[data-theme="dark"] .cat-suggestion-pill,
body.dark .cat-suggestion-pill {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.15);
}

/* ═══════════════════════════════════════════════════════════════
   v52.143 — Analytics Dashboard + Quotations
   ═══════════════════════════════════════════════════════════════ */

/* ── Analytics modal header ── */
.analytics-header {
    background: linear-gradient(135deg, #4338ca 0%, #6d28d9 50%, #db2777 100%);
    color: white;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    border-radius: 18px 18px 0 0;
}
.analytics-date {
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.15);
    color: white;
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    font-weight: 600;
}
.analytics-date::-webkit-calendar-picker-indicator { filter: invert(1); }
.analytics-refresh-btn {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    padding: 6px 14px;
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.analytics-refresh-btn:hover { background: rgba(255,255,255,0.3); }
.analytics-close-btn {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: transform 0.18s;
    padding: 0;
}
.analytics-close-btn:hover { transform: rotate(90deg); }

/* ── Analytics sections ── */
.analytics-section {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 18px;
}
.analytics-section-title {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border);
}

/* ── KPI cards ── */
.analytics-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.ana-kpi-card {
    background: var(--col-bg);
    padding: 14px;
    border-radius: 12px;
    border-top: 4px solid var(--border);
    text-align: center;
}
.ana-kpi-num {
    font-size: 22px;
    font-weight: 900;
    color: var(--text);
    line-height: 1.2;
}
.ana-kpi-label {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 600;
}

/* ── Burn-by-category ── */
.ana-cat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ana-cat-row {
    display: grid;
    grid-template-columns: 32px 120px 1fr 100px 50px;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    background: var(--col-bg);
    border-radius: 10px;
}
.ana-cat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.ana-cat-name {
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
}
.ana-cat-bar {
    height: 8px;
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
    overflow: hidden;
}
.ana-cat-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}
.ana-cat-amount {
    font-weight: 700;
    font-size: 12.5px;
    text-align: left;
    color: var(--text);
}
.ana-cat-pct {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-align: left;
}

/* ── Tables ── */
.ana-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.ana-table thead th {
    background: var(--col-bg);
    padding: 10px;
    text-align: right;
    font-weight: 800;
    color: var(--text);
    border-bottom: 2px solid var(--border);
    font-size: 12px;
}
.ana-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border);
}
.ana-table tbody tr:hover { background: var(--col-bg); }
.ana-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 28px;
    font-style: italic;
    background: var(--col-bg);
    border-radius: 10px;
}

/* ── Productivity rows ── */
.ana-prod-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ana-prod-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--col-bg);
    padding: 12px 14px;
    border-radius: 10px;
    border-right: 3px solid var(--border);
}
.ana-prod-info { flex: 1; }
.ana-prod-name {
    font-weight: 800;
    color: var(--text);
    font-size: 14px;
    margin-bottom: 4px;
}
.ana-prod-stats {
    font-size: 11.5px;
    color: var(--text-muted);
}
.ana-prod-score {
    text-align: center;
    min-width: 80px;
}
.ana-prod-num {
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
}
.ana-prod-grade {
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}

/* ── Quotations modal ── */
.quotations-header {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    padding: 16px 20px;
    border-radius: 18px 18px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.qot-new-btn {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    padding: 7px 14px;
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s;
}
.qot-new-btn:hover { background: rgba(255,255,255,0.3); }
.qot-card {
    background: var(--col-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.qot-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px -8px rgba(0,0,0,0.18);
}
.qot-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.qot-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    margin-top: 4px;
}
.qot-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}
.qot-btn {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    transition: filter 0.15s, transform 0.1s;
}
.qot-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.qot-btn-blue { background: #3b82f6; color: white; border-color: #3b82f6; }
.qot-btn-green { background: #10b981; color: white; border-color: #10b981; }
.qot-btn-red { background: #ef4444; color: white; border-color: #ef4444; }
.qot-btn-purple { background: #7c3aed; color: white; border-color: #7c3aed; }
.qot-btn-del {
    background: transparent;
    color: #dc2626;
    border-color: #fca5a5;
}
.qot-btn-del:hover { background: #fef2f2; }

/* Quotation form */
.qot-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.qot-form-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.qot-form input,
.qot-form textarea {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    flex: 1;
    min-width: 120px;
    background: var(--card-bg);
    color: var(--text);
}
.qot-item-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}
.qot-item-row input {
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: 'Cairo', sans-serif;
    font-size: 12.5px;
    background: var(--card-bg);
    color: var(--text);
}
.qot-item-row .qot-item-desc { flex: 1; }

/* ═══════════════════════════════════════════════════════════════
   v52.144 — Pomodoro + Onboarding + Skeleton Loading + Empty States
   ═══════════════════════════════════════════════════════════════ */

/* ── Pomodoro modal ── */
.pomo-content {
    max-width: 420px;
    width: 92%;
    padding: 32px 24px;
    border-radius: 24px;
    text-align: center;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    position: relative;
    overflow: hidden;
}
.pomo-content.mode-work { background: linear-gradient(135deg, #ef4444, #dc2626); }
.pomo-content.mode-short { background: linear-gradient(135deg, #10b981, #059669); }
.pomo-content.mode-long { background: linear-gradient(135deg, #3b82f6, #1e40af); }
.pomo-content::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 60%);
    pointer-events: none;
    animation: pomoFloat 20s ease-in-out infinite;
}
@keyframes pomoFloat {
    0%, 100% { transform: translate(0,0) rotate(0); }
    50% { transform: translate(-30px,20px) rotate(180deg); }
}
.pomo-close {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    font-size: 22px;
    cursor: pointer;
    transition: transform 0.18s;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.pomo-close:hover { transform: rotate(90deg); }
.pomo-header { position: relative; z-index: 1; }
.pomo-emoji { font-size: 48px; display: block; margin-bottom: 8px; animation: pomoTomato 3s ease-in-out infinite; }
@keyframes pomoTomato {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}
.pomo-subtitle {
    margin: 8px 0 0;
    font-size: 13px;
    opacity: 0.9;
}
.pomo-display {
    position: relative;
    margin: 28px auto 24px;
    width: 220px;
    height: 220px;
    z-index: 1;
}
.pomo-circle {
    transform: rotate(-90deg);
}
.pomo-time {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'SF Mono', monospace;
    font-size: 48px;
    font-weight: 900;
    letter-spacing: -2px;
}
.pomo-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}
.pomo-btn {
    background: rgba(255,255,255,0.2);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 10px 20px;
    border-radius: 12px;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.pomo-btn:hover { background: rgba(255,255,255,0.3); }
.pomo-btn:active { transform: scale(0.96); }
.pomo-btn-primary {
    background: white;
    color: #dc2626;
}
.pomo-btn-primary:hover { background: #f1f5f9; }
.pomo-modes {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}
.pomo-mode-btn {
    background: rgba(255,255,255,0.1);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 6px 12px;
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s, background 0.15s;
}
.pomo-mode-btn.active {
    background: rgba(255,255,255,0.3);
    opacity: 1;
}
.pomo-stats {
    font-size: 12px;
    opacity: 0.85;
    position: relative;
    z-index: 1;
}

/* ── Onboarding wizard ── */
.onboarding-modal { z-index: 100100; }
.onboarding-content {
    background: var(--card-bg);
    border-radius: 22px;
    padding: 36px 28px 28px;
    max-width: 480px;
    width: 92%;
    text-align: center;
    box-shadow: 0 30px 70px -10px rgba(0,0,0,0.4);
    animation: kbdSlideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}
.onb-skip {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--col-bg);
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 18px;
    color: var(--text-muted);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s;
}
.onb-skip:hover { background: var(--border); }
.onb-progress {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 18px;
}
.onb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    transition: all 0.3s;
}
.onb-dot.active {
    background: var(--primary);
    transform: scale(1.4);
}
.onb-dot.done {
    background: var(--primary);
    opacity: 0.5;
}
.onb-emoji {
    font-size: 56px;
    margin-bottom: 12px;
    animation: pomoTomato 2.5s ease-in-out infinite;
    display: inline-block;
}
.onb-title {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 900;
    color: var(--text);
    line-height: 1.3;
}
.onb-text {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 16px;
}
.onb-tip {
    background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(239,68,68,0.05));
    border: 1px dashed #f59e0b;
    border-radius: 10px;
    padding: 10px 14px;
    color: #92400e;
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 22px;
}
body[data-theme="dark"] .onb-tip,
body.dark .onb-tip {
    background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(239,68,68,0.1));
    color: #fcd34d;
}
.onb-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.onb-btn {
    padding: 11px 22px;
    border: none;
    border-radius: 10px;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
}
.onb-btn-primary {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
}
.onb-btn-secondary {
    background: var(--col-bg);
    color: var(--text);
    border: 1px solid var(--border);
}
.onb-btn:hover { filter: brightness(1.05); }
.onb-btn:active { transform: scale(0.97); }

/* ── Skeleton loading ── */
.skeleton {
    background: linear-gradient(90deg, var(--col-bg) 25%, rgba(255,255,255,0.5) 50%, var(--col-bg) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
    color: transparent !important;
    user-select: none;
}
@keyframes skeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-card {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 16px;
    border: 1px solid var(--border);
}
.skeleton-line {
    height: 12px;
    background: var(--col-bg);
    border-radius: 6px;
    margin-bottom: 8px;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    background: linear-gradient(90deg, var(--col-bg) 25%, rgba(255,255,255,0.4) 50%, var(--col-bg) 75%);
    background-size: 200% 100%;
}
.skeleton-line.skeleton-title { height: 16px; width: 60%; }
.skeleton-line.skeleton-short { width: 40%; }

body[data-theme="dark"] .skeleton-line,
body.dark .skeleton-line {
    background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.05) 75%);
    background-size: 200% 100%;
}

/* ── Empty states ── */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
}
.empty-state-illustration {
    width: 100px;
    height: 100px;
    margin: 0 auto 16px;
    opacity: 0.6;
}
.empty-state-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 6px;
}
.empty-state-text {
    font-size: 13px;
    line-height: 1.6;
    max-width: 320px;
    margin: 0 auto 14px;
}
.empty-state-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
}
.empty-state-btn:hover { filter: brightness(1.05); }
.empty-state-btn:active { transform: scale(0.97); }

/* ═══════════════════════════════════════════════════════════════
   v52.145 — Phase 6 Integrations (Email Templates, Excel Import)
   ═══════════════════════════════════════════════════════════════ */

/* Reuses .qot-card, .qot-form, .quotations-header from v52.143 — those classes
   are generic enough. Excel import file input gets a hover style. */

#excelImportFile {
    background: var(--col-bg);
    color: var(--text);
    transition: border-color 0.15s, background 0.15s;
}
#excelImportFile:hover {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(16,185,129,0.05), transparent);
}

/* Inline code styling for placeholder hints */
.qot-form code {
    font-family: 'SF Mono', 'Cairo', monospace;
    font-size: 11.5px;
}

/* ═══════════════════════════════════════════════════════════════
   v52.145 — Phase 6 Integrations polish
   ═══════════════════════════════════════════════════════════════ */

/* ── Code blocks in help text (Excel import) ── */
code {
    font-family: 'SF Mono', 'Menlo', 'Cairo', monospace;
    font-size: 0.9em;
    padding: 2px 6px;
    background: rgba(255,255,255,0.7);
    border-radius: 4px;
    color: #4338ca;
    font-weight: 700;
    border: 1px solid rgba(99,102,241,0.2);
}

body[data-theme="dark"] code,
body.dark code {
    background: rgba(255,255,255,0.1);
    color: #c084fc;
    border-color: rgba(255,255,255,0.15);
}

/* ── Email template placeholder hints (used in template body editor) ── */
.template-placeholder-hint {
    display: inline-block;
    background: linear-gradient(135deg, rgba(14,165,233,0.1), rgba(59,130,246,0.05));
    border: 1px dashed #0ea5e9;
    border-radius: 8px;
    padding: 4px 10px;
    margin: 2px;
    font-size: 11.5px;
    color: #0369a1;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.template-placeholder-hint:hover {
    background: linear-gradient(135deg, rgba(14,165,233,0.2), rgba(59,130,246,0.1));
    transform: translateY(-1px);
}

/* ── Excel import preview table polish ── */
#excelImportPreview table {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.06);
    margin-top: 10px;
}
#excelImportPreview table thead {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}
#excelImportPreview table tbody tr:nth-child(even) {
    background: var(--col-bg);
}

/* ── WhatsApp quick action button (when added to task/client cards) ── */
.wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
}
.wa-btn:hover { filter: brightness(1.1); }
.wa-btn:active { transform: scale(0.96); }

/* ═══════════════════════════════════════════════════════════════
   v52.148 — Drag-drop dashboard + Pull-to-refresh + Empty state SVGs
   ═══════════════════════════════════════════════════════════════ */

/* ── Draggable widget styling ── */
[data-widget-id] {
    cursor: move;
    transition: transform 0.18s, box-shadow 0.18s, opacity 0.2s;
    position: relative;
}
[data-widget-id]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -4px rgba(0,0,0,0.08);
}
.widget-drag-handle {
    float: left;
    color: var(--text-muted);
    font-size: 14px;
    letter-spacing: -2px;
    cursor: grab;
    padding: 0 4px;
    user-select: none;
    transition: color 0.15s;
}
.widget-drag-handle:hover {
    color: var(--primary);
}
.widget-drag-handle:active {
    cursor: grabbing;
}
.widget-dragging {
    opacity: 0.4;
    transform: scale(0.97);
}
.widget-drop-target {
    box-shadow: 0 0 0 2px var(--primary), 0 4px 12px -4px rgba(79,70,229,0.3) !important;
    background: linear-gradient(135deg, rgba(79,70,229,0.05), rgba(124,58,237,0.05)) !important;
}

/* ── Pull-to-refresh indicator (mobile) ── */
.ptr-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50px);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 6px 16px -4px rgba(0,0,0,0.18);
    padding: 12px 22px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 9999;
    pointer-events: none;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    opacity: 0;
}
.ptr-icon {
    font-size: 18px;
    transition: transform 0.2s;
    display: inline-block;
}
.ptr-indicator.ptr-loading .ptr-icon {
    animation: ptrSpin 1s linear infinite;
}
@keyframes ptrSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Mobile widget reordering (touch fallback — drag works less well on mobile) ── */
@media (max-width: 600px) {
    .widget-drag-handle {
        font-size: 18px;
        padding: 4px 8px;
    }
    [data-widget-id] {
        cursor: default;
    }
    /* On mobile, prefer the existing card hover instead of drag */
    [data-widget-id]:hover {
        transform: none;
    }
}

/* ── Empty state with SVG illustration polish ── */
.empty-state-illustration svg {
    transition: transform 0.3s ease;
}
.empty-state:hover .empty-state-illustration svg {
    transform: scale(1.05);
}