/* ============================================================
   CSS VARIABLES & RESET
   ============================================================ */
:root {
    --bg-primary: #fbfcff;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f6f8fc;
    --text-primary: #1a1a2e;
    --text-secondary: #555770;
    --text-muted: #8e8ea0;
    --border-color: #e0e0e6;
    --accent: #1967d2;
    --accent-hover: #4338ca;
    --accent-light: #eef2ff;
    --success: #059669;
    --success-bg: #ecfdf5;
    --success-border: #a7f3d0;
    --warning: #d97706;
    --warning-bg: #fffbeb;
    --warning-border: #fde68a;
    --danger: #dc2626;
    --danger-bg: #fef2f2;
    --danger-border: #fecaca;
    --info: #2563eb;
    --info-bg: #eff6ff;
    --info-border: #bfdbfe;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 1px 3px rgba(0,0,0,0.1), 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.06);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --font-family: Tahoma, 'Segoe UI', Arial, sans-serif;
    --transition: all 0.2s ease;
    --sidebar-width: 240px;
    --header-height: 60px;
}

[data-theme="dark"] {
    --bg-primary: #05070d;
    --bg-secondary: #0f172a;
    --bg-tertiary: #111827;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: #334155;
    --accent: #818cf8;
    --accent-hover: #6366f1;
    --accent-light: #1e1b4b;
    --success: #34d399;
    --success-bg: #064e3b;
    --success-border: #065f46;
    --warning: #fbbf24;
    --warning-bg: #78350f;
    --warning-border: #92400e;
    --danger: #f87171;
    --danger-bg: #7f1d1d;
    --danger-border: #991b1b;
    --info: #60a5fa;
    --info-bg: #1e3a5f;
    --info-border: #1e40af;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow: 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);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-family);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   LAYOUT
   ============================================================ */
.app-layout {
    display: block;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    z-index: 100;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    box-shadow: var(--shadow);
}

.sidebar-brand {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: bold;
    color: var(--accent);
}

.sidebar-brand i { font-size: 22px; }

.sidebar-nav {
    flex: 1;
    padding: 12px 0;
    overflow-y: auto;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
    border-radius: 0;
    font-size: 13.5px;
}

.sidebar-nav a:hover {
    background: var(--accent-light);
    color: var(--accent);
    text-decoration: none;
}

.sidebar-nav a.active {
    background: var(--accent-light);
    color: var(--accent);
    font-weight: bold;
    border-right: 3px solid var(--accent);
}

.sidebar-nav a i { width: 20px; text-align: center; font-size: 15px; }

.sidebar-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-muted);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.sidebar-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}

.sidebar-user-info { flex: 1; }
.sidebar-user-info .name { font-size: 13px; font-weight: bold; color: var(--text-primary); }
.sidebar-user-info .role { font-size: 11px; color: var(--text-muted); }

.main-content {
    flex: 1;
    margin-right: var(--sidebar-width);
    min-height: 100vh;
}

.top-bar {
    height: var(--header-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: var(--shadow-sm);
}

.top-bar-right { display: flex; align-items: center; gap: 12px; }

.page-content { padding: 24px; max-width: 1400px; }

/* Mobile sidebar toggle */
.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-primary);
    cursor: pointer;
    padding: 4px 8px;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    text-decoration: none;
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { opacity: 0.9; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { opacity: 0.9; }
.btn-warning { background: var(--warning); color: #fff; }
.btn-warning:hover { opacity: 0.9; }
.btn-info { background: var(--info); color: #fff; }
.btn-info:hover { opacity: 0.9; }

.btn-outline {
    background: transparent;
    border: 1.5px solid var(--border-color);
    color: var(--text-secondary);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

.btn-takeover {
    background: #e5e7eb;
    color: #374151;
    border-color: #d1d5db;
}
.btn-takeover:hover {
    background: #d1d5db;
    color: #111827;
}


.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-xs { padding: 3px 8px; font-size: 11px; border-radius: 6px; }
.btn-lg { padding: 12px 24px; font-size: 15px; }
.btn-block { width: 100%; }

.btn-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}
.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: var(--transition);
}
.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(79,70,229,0.15);
}
.form-control::placeholder { color: var(--text-muted); }

select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 80px; }

.form-inline {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
.form-inline .form-group { margin-bottom: 0; flex: 1; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 20px;
}
.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-tertiary);
}
.card-header h3 {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-body { padding: 20px; }
.card-body.p-0 { padding: 0; }

/* ============================================================
   TABLES
   ============================================================ */
.table-responsive { overflow-x: auto; }

table.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
table.table th, table.table td {
    padding: 10px 14px;
    text-align: right;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}
table.table th {
    background: var(--bg-tertiary);
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 12px;
    white-space: nowrap;
}
table.table tbody tr:hover { background: var(--accent-light); }
table.table tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   BADGES & STATUS
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.badge-new { background: var(--info-bg); color: var(--info); border: 1px solid var(--info-border); }
.badge-progress { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
.badge-paused { background: #fdf4ff; color: #a855f7; border: 1px solid #e9d5ff; }
.badge-completed { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.badge-failed { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }
.badge-admin { background: var(--accent-light); color: var(--accent); }
.badge-employee { background: var(--bg-tertiary); color: var(--text-muted); }

/* ============================================================
   TIMER
   ============================================================ */
.timer {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    color: var(--warning);
    direction: ltr;
    display: inline-block;
    min-width: 75px;
    text-align: center;
    background: var(--warning-bg);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--warning-border);
}

.timer.paused { color: var(--text-muted); background: var(--bg-tertiary); border-color: var(--border-color); }
.timer.completed { color: var(--success); background: var(--success-bg); border-color: var(--success-border); }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    border: 1px solid;
}
.alert-success { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.alert-error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.alert-warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.alert-info { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-backdrop,
.modal-overlay {
    position: fixed;
    inset: 0;
    background: #0009;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* حالت فعال: نمایش مودال */
.modal-backdrop.active,
.modal-overlay.active {
    display: flex;
}

/* خود جعبه مودال داخل overlay/backdrop */
.modal {
    background: #fff;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    box-shadow: 0 20px 40px rgba(0,0,0,.25);
    animation: modalIn .2s ease-out;
    position: relative;
    overflow: hidden;
}
@keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-header h3 { font-size: 16px; }
.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
}
.modal-close:hover { color: var(--danger); }
.modal-body { padding: 20px; }
.modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
#switchTaskModal .modal-body p {
    margin-bottom: 10px;
    line-height: 1.7;
}

/* ============================================================
   STATS GRID
   ============================================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}
.stat-card .stat-label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.stat-card .stat-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
    direction: ltr;
    text-align: right;
}
.stat-card .stat-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ============================================================
   LOGIN & INSTALL PAGE
   ============================================================ */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    padding: 20px;
}
.auth-box {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 420px;
    overflow: hidden;
}
.auth-header {
    padding: 30px 30px 20px;
    text-align: center;
}
.auth-header .logo {
    font-size: 28px;
    font-weight: 900;
    color: var(--accent);
    margin-bottom: 8px;
    letter-spacing: 2px;
}
.auth-header p { color: var(--text-muted); font-size: 13px; }
.auth-body { padding: 0 30px 30px; }

.token-display {
    background: var(--bg-primary);
    border: 2px dashed var(--accent);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    margin: 16px 0;
}
.token-display .token-value {
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: bold;
    color: var(--accent);
    letter-spacing: 1px;
    word-break: break-all;
    direction: ltr;
}
.token-display .token-warn {
    font-size: 12px;
    color: var(--danger);
    margin-top: 8px;
}

/* ============================================================
   THEME TOGGLE
   ============================================================ */
.theme-toggle {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 6px;
    cursor: pointer;
    font-size: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: var(--transition);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}
.empty-state i { font-size: 48px; margin-bottom: 12px; opacity: 0.3; }
.empty-state p { font-size: 14px; }

/* ============================================================
   MONITORING
   ============================================================ */
.monitor-section { margin-bottom: 24px; }
.monitor-section h4 {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.monitor-table { font-size: 12px; }
.monitor-table td { padding: 6px 10px; }

.user-table-row.idle { opacity: 0.5; }

.top3-list { margin-top: 8px; }
.top3-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 12px;
}

/* ============================================================
   TOOLTIP
   ============================================================ */
.tooltip-wrap { position: relative; }
.tooltip-wrap .tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    background: var(--text-primary);
    color: var(--bg-secondary);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    transition: 0.15s;
    z-index: 10;
    margin-bottom: 6px;
}
.tooltip-wrap:hover .tooltip-text { visibility: visible; opacity: 1; }

/* Section checkboxes in edit user modal */
.section-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}
.section-checkboxes label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Lock badge on task cards */
.lock-badge {
    display: inline-block;
    background: var(--danger, #e74c3c);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    margin-right: 6px;
}

/* Switch task modal note */
#switchTaskModal .modal-body p {
    margin-bottom: 10px;
    line-height: 1.7;
}

#activeTasksBody span.badge {
    white-space: nowrap;
    margin:auto;
    display:block;
    width: fit-content
}

#activeTasksBody .timer {
    width: 100%
}

#activeTasksBody button.btn  {
    margin: 2px 0;
}




/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(100%);
        box-shadow: none;
    }
    .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .sidebar-overlay.active { display: block; }
    .sidebar-toggle { display: block; }
    .main-content { margin-right: 0; }
    .page-content { padding: 16px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .form-inline { flex-direction: column; }
    .form-inline .form-group { width: 100%; }
    table.table { font-size: 12px; }
    table.table th, table.table td { padding: 8px 8px; }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
.fade-out {
    animation: fadeOut 0.4s ease forwards;
}
@keyframes fadeOut {
    to { opacity: 0; transform: translateY(-10px); height: 0; padding: 0; overflow: hidden; }
}

.highlight-row {
    animation: highlightPulse 1s ease;
}
@keyframes highlightPulse {
    0%, 100% { background: transparent; }
    50% { background: var(--accent-light); }
}

/* Loading spinner */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Tab styles */
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border-color); margin-bottom: 16px; }
.tab {
    padding: 10px 20px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: var(--transition);
    background: none;
    border-top: none; border-left: none; border-right: none;
    font-family: inherit;
}
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ============================================================
   EXTENSIONS: TASK ARCHIVE, SITES, LEAVES, DARK MODALS
   ============================================================ */
.modal {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.modal-header,
.modal-footer {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.modal-body {
    background: var(--bg-secondary);
    color: var(--text-primary);
    max-height: 72vh;
    overflow-y: auto;
}
.modal-body::-webkit-scrollbar-thumb,
.history-modal::-webkit-scrollbar-thumb { background: var(--border-color); }
.modal-close { color: var(--text-muted); }
.modal-close:hover { color: var(--danger); background: var(--danger-bg); border-radius: 50%; }
#toastStack {
    position: fixed;
    left: 18px;
    bottom: 18px;
    display: grid;
    gap: 8px;
    z-index: 10000;
    width: min(360px, calc(100vw - 32px));
}
.toast-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: var(--shadow);
    transform: translateY(10px);
    opacity: 0;
    transition: .22s ease;
}
.toast-item.show { transform: translateY(0); opacity: 1; }
.toast-success { border-color: var(--success-border); background: var(--success-bg); color: var(--success); }
.toast-error { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger); }
.toast-warning { border-color: var(--warning-border); background: var(--warning-bg); color: var(--warning); }
.mini-confirm { max-width: 420px; }

.task-create-card { border-top: 3px solid var(--accent); }
.task-create-grid {
    display: flex;
    gap: 18px 24px;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
}
.task-create-grid > * { min-width: calc(33.333% - 18px); }
.task-create-grid .form-group { margin-bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.task-create-grid label { width: 100%; }
.task-title-field { min-width: calc(50% - 12px); flex: 1 1 calc(50% - 12px); }
.task-create-grid .form-group:nth-child(2) { min-width: calc(40% - 12px); flex: 1 1 calc(40% - 12px); }
.task-create-grid .form-group:nth-child(3),
.task-create-grid .form-group:nth-child(4) { flex: 1 1 calc(30% - 18px); }
.task-submit { height: 42px; min-width: unset; margin-right: auto; border-radius: 8px; }
.inline-message { margin-top: 10px; min-height: 20px; }
.alert-inline { display: inline-flex; padding: 5px 10px; border-radius: var(--radius); font-size: 12px; }
.alert-inline.success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }

.task-tabs-wrap { margin: 18px 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tabs, .task-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab {
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    transition: var(--transition);
}
.tab:hover { color: var(--accent); border-color: var(--accent); }
.tab.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--shadow); }
.primary-tabs .tab { font-size: 14px; padding: 10px 18px; }
.secondary-tabs .tab { opacity: .85; font-size: 12px; }
.mini-tabs .tab { font-size: 12px; padding: 5px 10px; }

.tasks-table td { vertical-align: top; }
.task-title-cell strong { display: block; line-height: 1.7; }
.task-main-row { cursor: pointer; }
.task-main-row:hover { background: var(--accent-light); }
.task-detail-row td { background: var(--bg-tertiary); }
.task-alert-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    color: var(--danger);
}
.task-abnormal .task-title-cell strong { color: var(--danger); }
.task-meta-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; align-items: center; }
.task-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.info-pill { cursor: help; }
.task-title-cell strong {
    cursor: help;
}
.task-doc-block {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--info-border);
    border-radius: var(--radius);
    background: var(--info-bg);
    color: var(--text-primary);
    line-height: 1.85;
}
.task-doc-block strong {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
}
.task-doc-block p {
    margin: 0;
    white-space: normal;
    color: var(--text-secondary);
}
.muted-line { font-size: 11px; color: var(--text-muted); margin-top: 3px; direction: ltr; }
.actions-cell { white-space: nowrap; }
.actions-wrap { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.time-unit-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
}
.badge-priority-normal { background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border-color); }
.badge-priority-important { background: var(--info-bg); color: var(--info); border: 1px solid var(--info-border); }
.badge-priority-urgent { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
.badge-priority-urgent-important { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }

.site-badge,
.site-empty {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid transparent;
    white-space: nowrap;
}
.site-empty { background: var(--bg-tertiary); color: var(--text-muted); border-color: var(--border-color); }
.site-blue { background: #dbeafe; color: #1d4ed8; border-color: #60a5fa; }
.site-emerald { background: #d1fae5; color: #047857; border-color: #34d399; }
.site-violet { background: #ede9fe; color: #6d28d9; border-color: #a78bfa; }
.site-amber { background: #fef3c7; color: #b45309; border-color: #f59e0b; }
.site-rose { background: #ffe4e6; color: #be123c; border-color: #fb7185; }
.site-fuchsia { background: #fae8ff; color: #a21caf; border-color: #e879f9; }
.site-teal { background: #ccfbf1; color: #0f766e; border-color: #2dd4bf; }
.site-sky { background: #e0f2fe; color: #0369a1; border-color: #38bdf8; }
.site-slate { background: #e2e8f0; color: #334155; border-color: #94a3b8; }
.site-lime { background: #ecfccb; color: #4d7c0f; border-color: #a3e635; }
.site-green { background: #d1fae5; color: #047857; border-color: #34d399; }
.site-purple { background: #ede9fe; color: #6d28d9; border-color: #a78bfa; }
.site-orange { background: #fef3c7; color: #b45309; border-color: #f59e0b; }
.site-red { background: #ffe4e6; color: #be123c; border-color: #fb7185; }
.site-pink { background: #fae8ff; color: #a21caf; border-color: #e879f9; }
.site-cyan { background: #e0f2fe; color: #0369a1; border-color: #38bdf8; }
.site-gray { background: #e2e8f0; color: #334155; border-color: #94a3b8; }
.site-yellow { background: #ecfccb; color: #4d7c0f; border-color: #a3e635; }
[data-theme="dark"] .site-blue { background: #172554; color: #bfdbfe; border-color: #2563eb; }
[data-theme="dark"] .site-emerald { background: #022c22; color: #a7f3d0; border-color: #059669; }
[data-theme="dark"] .site-violet { background: #2e1065; color: #ddd6fe; border-color: #7c3aed; }
[data-theme="dark"] .site-amber { background: #451a03; color: #fde68a; border-color: #d97706; }
[data-theme="dark"] .site-rose { background: #4c0519; color: #fecdd3; border-color: #e11d48; }
[data-theme="dark"] .site-fuchsia { background: #4a044e; color: #f5d0fe; border-color: #c026d3; }
[data-theme="dark"] .site-teal { background: #042f2e; color: #99f6e4; border-color: #0d9488; }
[data-theme="dark"] .site-sky { background: #082f49; color: #bae6fd; border-color: #0284c7; }
[data-theme="dark"] .site-slate { background: #0f172a; color: #cbd5e1; border-color: #475569; }
[data-theme="dark"] .site-lime { background: #1a2e05; color: #d9f99d; border-color: #65a30d; }
[data-theme="dark"] .site-green { background: #022c22; color: #a7f3d0; border-color: #059669; }
[data-theme="dark"] .site-purple { background: #2e1065; color: #ddd6fe; border-color: #7c3aed; }
[data-theme="dark"] .site-orange { background: #451a03; color: #fde68a; border-color: #d97706; }
[data-theme="dark"] .site-red { background: #4c0519; color: #fecdd3; border-color: #e11d48; }
[data-theme="dark"] .site-pink { background: #4a044e; color: #f5d0fe; border-color: #c026d3; }
[data-theme="dark"] .site-cyan { background: #082f49; color: #bae6fd; border-color: #0284c7; }
[data-theme="dark"] .site-gray { background: #0f172a; color: #cbd5e1; border-color: #475569; }
[data-theme="dark"] .site-yellow { background: #1a2e05; color: #d9f99d; border-color: #65a30d; }

.color-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.color-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: var(--transition);
}
.color-dot.active { outline: 3px solid var(--accent); transform: scale(1.08); }
.compact-search { max-width: 240px; padding: 7px 10px; }
.quick-picker { display: flex; gap: 8px; width: 100%; align-items: flex-start; justify-content: space-between; }
.quick-search { min-width: 180px; }
.site-picker .quick-search { min-width: min(70%, 320px); flex: 1 1 70%; }
.quick-options { display: flex; flex-wrap: wrap; gap: 6px; max-height: 92px; overflow-y: auto; padding-bottom: 1px; }
.quick-option,
.segmented-control button {
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 7px 11px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.site-picker-button {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 8px 10px;
    cursor: pointer;
    transition: var(--transition);
}
.site-picker-button:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.site-picker-button span { flex: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-picker-button.is-empty { color: var(--text-muted); }
.mini-site-modal { width: min(520px, calc(100vw - 24px)); }
.site-picker-section { margin-top: 12px; }
.site-picker-label {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-secondary);
    margin-bottom: 7px;
}
.site-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
    gap: 7px;
    max-height: 260px;
    overflow: auto;
}
.site-choice {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 7px 9px;
    cursor: pointer;
    text-align: right;
    overflow: hidden;
}
.site-choice:hover,
.site-choice.active { border-color: var(--accent); background: var(--accent-light); }
.site-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 10px;
}
.compact-extra-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    padding: 10px 12px !important;
}
.compact-extra-row .card-title,
.compact-extra-row h4 {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.extra-desc {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.quick-option:hover,
.segmented-control button:hover { border-color: var(--accent); color: var(--accent); }
.quick-option.active,
.segmented-control button.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: var(--shadow);
}
.segmented-control { display: flex; flex-wrap: wrap; gap: 6px; }
.jalali-date-input { direction: ltr; text-align: center; font-weight: 800; letter-spacing: 0; }
.jalali-datepicker {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 278px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-lg, 0 18px 40px rgba(15,23,42,.16));
    padding: 10px;
}
.jalali-datepicker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-weight: 900; }
.jalali-datepicker-head button,
.jalali-day {
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 8px;
    min-height: 32px;
    cursor: pointer;
    font-family: inherit;
}
.jalali-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.jalali-weekday { color: var(--text-muted); font-size: 11px; text-align: center; padding: 4px 0; }
.jalali-day:hover,
.jalali-day.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.compact-color-picker .color-dot { width: 26px; height: 26px; }
.token-row { margin: 10px 0; }

.history-modal { max-width: 760px; width: min(94vw, 760px); overflow: hidden; }
.history-timeline { border-right: 3px solid var(--border-color); padding-right: 16px; margin-right: 8px; }
.history-item { margin-bottom: 14px; position: relative; }
.history-dot { position: absolute; right: -24px; top: 4px; width: 12px; height: 12px; background: var(--accent); border-radius: 50%; border: 2px solid var(--bg-secondary); }
.history-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 11px; color: var(--text-muted); flex-wrap: wrap; }
.history-body { font-size: 12px; color: var(--text-secondary); line-height: 1.8; padding: 0 0 4px; }
.history-body em { color: var(--text-primary); }
.ajax-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; color: var(--text-muted); }
.permissions-grid { max-height: 340px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.compact-permissions-grid { max-height: 260px; }
.permission-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.permission-toolbar label { font-weight:900; color:var(--text-primary); }
.permission-actions { display:flex; gap:6px; flex-wrap:wrap; }
.permissions-create-block { margin-top:14px; padding-top:12px; border-top:1px dashed var(--border-color); }
.permissions-grid .permission-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 10px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 8px;
    align-items: start;
}
.permission-title { font-weight: 900; color: var(--text-primary); }
.permission-desc { grid-column: 2; color: var(--text-secondary); font-size: 12px; line-height: 1.7; }
.permission-group-title {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--accent-light);
    color: var(--accent);
    font-weight: 900;
}
.monitor-filter-card { margin-bottom: 14px; }
.monitor-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.monitor-custom-range { display: flex; gap: 8px; flex-wrap: wrap; }
.mini-chart { display: grid; gap: 8px; margin-bottom: 14px; }
.mini-bar {
    display: grid;
    grid-template-columns: minmax(90px, 160px) 1fr auto;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}
.mini-bar b {
    display: block;
    height: 9px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--info));
    min-width: 6px;
}
.compact-number { max-width: 120px; }

@media (max-width: 1100px) {
    .task-create-grid > *,
    .task-title-field,
    .task-create-grid .form-group:nth-child(2),
    .task-create-grid .form-group:nth-child(3),
    .task-create-grid .form-group:nth-child(4) { flex-basis: calc(50% - 12px); min-width: calc(50% - 12px); }
}
@media (max-width: 640px) {
    .task-create-grid > *,
    .task-title-field,
    .task-create-grid .form-group:nth-child(2),
    .task-create-grid .form-group:nth-child(3),
    .task-create-grid .form-group:nth-child(4) { flex-basis: 100%; min-width: 100%; }
    .task-submit { width: 100%; }
    .task-tabs-wrap { display: block; }
    .secondary-tabs { margin-top: 8px; }
    .compact-search { max-width: 100%; margin-top: 8px; }
    .tasks-table,
    .tasks-table thead,
    .tasks-table tbody,
    .tasks-table tr,
    .tasks-table th,
    .tasks-table td { display: block; width: 100%; }
    .tasks-table thead { display: none; }
    .tasks-table tr {
        padding: 10px 12px;
        border-bottom: 1px solid var(--border-color);
    }
    .tasks-table td {
        border-bottom: 0 !important;
        padding: 5px 0 !important;
    }
    .tasks-table td:first-child {
        width: auto;
        color: var(--text-muted);
        font-size: 11px;
    }
    .actions-wrap { justify-content: flex-start; }
    .task-meta-badges { gap: 5px; }
    .task-meta-pill,
    .site-badge,
    .site-empty,
    .time-unit-pill,
    .badge { font-size: 10px; padding: 4px 7px; }
    .quick-options { max-height: 138px; }
    .segmented-control button,
    .quick-option { flex: 1 1 auto; text-align: center; }
}
/* Task library, workflows and routines */
.library-page { display: flex; flex-direction: column; gap: 16px; }
.library-tabs { margin-bottom: 0; border:none; }
.library-tab-content { display: none; flex-direction: column; gap: 16px; }
.library-tab-content.active { display: flex; }
.library-filters { display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1fr); gap: 12px; align-items: start; }
.form-group.wide { flex: 1 1 360px; }
.library-tags, .tag-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.selected-tags { min-height: 38px; padding: 6px; border: 1px dashed var(--border-color); border-radius: var(--radius); background: var(--bg-tertiary); }
.tag-chip, .tag-mini {
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 5px 10px;
    font: inherit;
    font-size: 12px;
}
.tag-chip { cursor: pointer; }
.tag-chip.active { background: var(--accent-light); color: var(--accent); border-color: var(--accent); font-weight: 700; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 16px; }
.library-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-secondary);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 150px;
}
.library-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.library-card-head strong { line-height: 1.7; }
.library-card-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.similar-box { margin-top: 12px; display: grid; gap: 8px; }
.similar-item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border: 1px solid var(--warning-border);
    background: var(--warning-bg);
    color: var(--text-primary);
    border-radius: var(--radius);
    padding: 8px 10px;
    cursor: pointer;
    font: inherit;
    text-align: right;
}
.library-list { display: grid; gap: 0; }
.library-list-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(100px, auto));
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}
.task-source-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.source-pill { background: var(--accent-light); color: var(--accent); }
.workflow-inline {
    margin-top: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 10px;
    background: var(--bg-tertiary);
}
.workflow-inline-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; }
.mini-progress { height: 6px; background: var(--border-color); border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.mini-progress span { display: block; height: 100%; background: var(--success); }
.workflow-step-list { display: grid; gap: 6px; }
.workflow-step {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-secondary);
}
.workflow-step.done span { text-decoration: line-through; color: var(--text-muted); }
.workflow-step.locked { opacity: .55; }
.workflow-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--accent);
    cursor: pointer;
}
@media (max-width: 760px) {
    .library-filters { grid-template-columns: 1fr; }
    .library-list-row { grid-template-columns: 1fr; }
    .library-card-actions { flex-wrap: wrap; }
}

/* Final workflow/task UX refinements */
.task-settings-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-secondary);
}
.task-settings-strip label { font-weight: 800; color: var(--text-secondary); }
.task-settings-strip input { max-width: 110px; }
.monitor-filter-card {
    position: sticky;
    top: 76px;
    z-index: 35;
    box-shadow: var(--shadow-md);
}
.monitor-mode-tabs { margin: 0 0 14px; }
.monitor-user-row { cursor: pointer; }
.monitor-user-row.active,
.monitor-user-row:hover { background: var(--accent-light); }
.monitor-user-details { padding: 14px; border-top: 1px solid var(--border-color); }
.routine-schedule-box {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
}
.routine-schedule-controls { margin-top: 10px; }
.weekday-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.monthday-picker .tag-chip {
    width: 38px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.routine-preview {
    margin-top: 10px;
    padding: 9px 10px;
    border-radius: var(--radius);
    background: var(--accent-light);
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
}
.site-blue { background: #1d4ed8 !important; color: #fff !important; border-color: #1e40af !important; }
.site-emerald { background: #047857 !important; color: #fff !important; border-color: #065f46 !important; }
.site-violet { background: #7c3aed !important; color: #fff !important; border-color: #5b21b6 !important; }
.site-amber { background: #d97706 !important; color: #fff !important; border-color: #b45309 !important; }
.site-rose { background: #e11d48 !important; color: #fff !important; border-color: #be123c !important; }
.site-slate { background: #334155 !important; color: #fff !important; border-color: #1e293b !important; }

@media (max-width: 640px) {
    .tasks-table .task-main-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px;
        padding: 6px 8px !important;
        min-height: 42px;
    }
    .tasks-table .task-main-row td {
        border: 0 !important;
        padding: 0 !important;
        width: auto !important;
        min-width: 0;
    }
    .tasks-table .task-main-row td:nth-child(1),
    .tasks-table .task-main-row td:nth-child(3),
    .tasks-table .task-main-row td:nth-child(4),
    .tasks-table .task-main-row td:nth-child(5) {
        display: none !important;
    }
    .tasks-table .task-main-row td:nth-child(2) {
        display: block !important;
        min-width: 0;
    }
    .tasks-table .task-main-row td:nth-child(6) {
        display: flex !important;
        justify-content: flex-end;
        align-items: center;
    }
    .task-title-cell strong {
        font-size: 12px;
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .task-source-row { display: none !important; }
    .tasks-table .actions-wrap {
        gap: 4px;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }
    .tasks-table .actions-wrap .btn {
        min-height: 28px;
        padding: 4px 6px;
        font-size: 10px;
    }
    .task-detail-row {
        padding: 0 !important;
    }
    .task-detail-row td {
        padding: 8px !important;
    }
    .workflow-inline {
        margin-top: 6px;
        padding: 7px;
    }
    .monitor-filter-card { top: 58px; }
}

/* Minimal task command center */
.task-create-card {
    border-top: 0;
    overflow: hidden;
}
.task-create-card.collapsed {
    box-shadow: none;
}
.task-create-toggle {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 0;
    background: var(--bg-secondary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}
.task-create-toggle span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.task-create-toggle .fa-chevron-down {
    transition: transform .18s ease;
}
.task-create-card:not(.collapsed) .task-create-toggle .fa-chevron-down {
    transform: rotate(180deg);
}
.task-create-body {
    border-top: 1px solid var(--border-color);
}
.task-command-bar {
    position: sticky;
    top: 70px;
    z-index: 30;
    margin: 12px 0;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    display: grid;
    gap: 8px;
}
.task-scope-tabs,
.task-status-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.task-scope-tabs .tab,
.status-pill {
    white-space: nowrap;
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 12px;
}
.status-pill {
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    font-weight: 800;
}
.status-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.status-pill.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.badge-reserved {
    background: #ecfeff;
    color: #0e7490;
    border: 1px solid #67e8f9;
}

/* Better task alerts without shouting at the title */
.task-abnormal .task-title-cell strong {
    color: var(--text-primary);
}
.task-alert-dot {
    width: 22px;
    height: 22px;
    margin-left: 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fff7ed, #fee2e2);
    color: #ea580c;
    border: 1px solid #fdba74;
    box-shadow: 0 3px 10px rgba(234,88,12,.16);
}
.task-abnormal {
    box-shadow: inset 4px 0 0 #f97316;
}

/* Narrow Dooloop automation rows */
#libTabExtra .library-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
}
#libTabExtra .library-card {
    min-height: 0;
    padding: 8px 10px;
    border-radius: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
}
#libTabExtra .library-card-head {
    min-width: 0;
}
#libTabExtra .library-card-head strong {
    font-size: 13px;
    line-height: 1.45;
}
#libTabExtra .library-card p,
#libTabExtra .library-card .muted-line {
    margin: 0;
    font-size: 11px;
    color: var(--text-muted);
}
#libTabExtra .library-card .tag-row {
    margin-top: 0;
    grid-column: 1 / -1;
}
#libTabExtra .library-card-actions {
    margin-top: 0;
    justify-content: flex-end;
}

/* Persian 24-hour time picker */
.time-picker-popover {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%);
    z-index: 2200;
    width: min(330px, calc(100vw - 24px));
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-lg);
    display: grid;
    gap: 10px;
}
.time-picker-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-secondary);
}
.time-picker-head,
.time-picker-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-secondary);
}
.time-picker-head strong {
    direction: ltr;
    color: var(--text-primary);
    font-size: 16px;
}
.time-picker-label {
    justify-content: flex-start;
}
.time-picker-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
}
.time-picker-grid.minutes,
.time-picker-grid.minute-grid {
    grid-template-columns: repeat(4, 1fr);
}
.time-picker-option,
.time-picker-grid button {
    min-height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    font-weight: 800;
}
.time-picker-option:hover,
.time-picker-option.active,
.time-picker-grid button:hover,
.time-picker-grid button.active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}
.time-picker-actions {
    display: flex;
    gap: 6px;
    justify-content: space-between;
}

.sortable-th {
    position: relative;
    cursor: pointer;
    user-select: none;
    padding-left: 22px !important;
}
.sortable-th::after {
    content: "↕";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 11px;
}
.sortable-th[data-sort-dir="asc"]::after { content: "↑"; color: var(--accent); }
.sortable-th[data-sort-dir="desc"]::after { content: "↓"; color: var(--accent); }
.value-updated { animation: valuePulse 0.55s ease; }
@keyframes valuePulse {
    0% { background: var(--accent-light); transform: translateY(-1px); }
    100% { background: transparent; transform: translateY(0); }
}
.monitor-management {
    display: grid;
    gap: 14px;
    margin-bottom: 16px;
}
.monitor-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.monitor-kpi {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-secondary);
}
.monitor-kpi i {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
}
.monitor-kpi span {
    display: block;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
}
.monitor-kpi strong {
    display: block;
    margin-top: 3px;
    color: var(--text-primary);
    font-size: 18px;
}
.monitor-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}
.monitor-panel {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-secondary);
    padding: 12px;
    min-width: 0;
}
.monitor-panel h4 {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--text-primary);
}
.soft-chart { display: grid; gap: 8px; }
.soft-bar {
    display: grid;
    grid-template-columns: 86px minmax(40px, 1fr) auto;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.soft-bar span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
}
.soft-bar b {
    height: 8px;
    min-width: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--info));
    transition: width 0.35s ease;
}
.soft-bar em {
    font-style: normal;
    color: var(--text-primary);
    font-weight: 800;
}

/* Guided tour */
.tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 3002;
}
.tour-highlight {
    position: fixed;
    z-index: 3001;
    border: 2px solid #fbbf24;
    border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(2,6,23,.58), 0 0 28px rgba(251,191,36,.45);
    pointer-events: none;
    transition: all .22s ease;
}
.tour-card {
    position: fixed;
    z-index: 3002;
    width: min(360px, calc(100vw - 24px));
    padding: 14px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    animation: tourCardIn .2s ease-out;
}
@keyframes tourCardIn {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.tour-card h4 {
    margin: 0 0 6px;
    font-size: 14px;
}
.tour-step {
    display: inline-flex;
    margin-bottom: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--accent-light);
    color: var(--accent);
    font-size: 11px;
    font-weight: 900;
}
.tour-card p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 12px;
}
.tour-progress {
    margin-top: 10px;
    font-size: 11px;
    color: var(--text-muted);
}
.tour-actions {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-top: 12px;
}
.cron-report-grid {
    display: grid;
    gap: 14px;
}
.cron-report-grid h4 {
    margin: 0 0 8px;
    font-size: 13px;
}

@media (max-width: 640px) {
    .task-command-bar {
        top: 56px;
        margin: 8px 0;
        padding: 7px;
        border-radius: 10px;
    }
    .task-scope-tabs .tab,
    .status-pill {
        min-height: 31px;
        padding: 6px 9px;
        font-size: 11px;
    }
    .tasks-table .task-main-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
        min-height: 34px;
        padding: 5px 7px !important;
    }
    .tasks-table .task-main-row td:nth-child(6) {
        display: flex !important;
        justify-content: flex-end;
        align-items: center;
    }
    .task-title-cell strong {
        font-size: 11px;
        line-height: 1.25;
    }
    .task-alert-dot {
        width: 18px;
        height: 18px;
        margin-left: 5px;
    }
    .tasks-table .actions-wrap .btn {
        min-height: 24px;
        padding: 3px 5px;
    }
    #libTabExtra .library-card {
        grid-template-columns: minmax(0, 1fr);
    }
    #libTabExtra .library-card-actions {
        justify-content: flex-start;
    }
}

/* ============================================================
   DOOLOOP UX PATCHES - 2026-05
   ============================================================ */
.badge-cancelled {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}
.badge-completed { font-weight: 700; }
.site-badge.color-only {
    width: 28px;
    min-width: 28px;
    height: 18px;
    padding: 0;
    color: transparent;
    overflow: hidden;
    display: inline-flex;
    border-radius: 999px;
}
.site-picker-button.is-empty[data-hide-empty="1"] { display: none !important; }
.text-button-filter {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    background: transparent;
    border: 0;
    padding: 0;
}
.text-button-filter button {
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 6px 10px;
    cursor: pointer;
}
.text-button-filter button.active {
    border-color: var(--accent);
    background: var(--accent-light);
    color: var(--accent);
    font-weight: 700;
}
.extra-task-create-card.collapsed .extra-task-create-body { display: none; }
.task-create-toggle { min-width: 30px; }
.extra-task-table.compact-table th,
.extra-task-table.compact-table td {
    padding: 6px 8px;
    line-height: 1.35;
    vertical-align: middle;
}
.extra-task-table .extra-title-cell { max-width: 320px; }
.extra-task-table .extra-title-cell strong,
.task-title-cell strong {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.extra-task-table .extra-desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.tasks-table th:nth-child(2),
.tasks-table td:nth-child(2) {
    width: 30%;
    max-width: 360px;
}
.tasks-table th:nth-child(3),
.tasks-table td:nth-child(3) { width: 88px; }
.tasks-table th:nth-child(4),
.tasks-table td:nth-child(4) { width: 125px; }
.tasks-table th:nth-child(5),
.tasks-table td:nth-child(5) { width: 112px; }
.task-title-cell strong { cursor: pointer; }
.task-mobile-meta,
.task-mobile-actions { display: none; }
tr.task-row-alert,
.task-main-row.task-row-alert {
    background: linear-gradient(90deg, rgba(220,38,38,.10), transparent 70%);
}
.monitor-pause-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.monitor-pause-breakdown .tag-mini,
.tag-mini {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 11px;
    margin: 1px 2px;
}
.routine-output-picker {
    display: flex;
    gap: 8px;
    align-items: center;
}
.routine-output-picker select { flex: 1; }
.workflow-modal-steps {
    display: grid;
    gap: 8px;
    margin: 10px 0;
}
.workflow-modal-step {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
}
.workflow-modal-step input { min-width: 0; }
.leave-duration-field {
    padding: 10px 12px;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    font-weight: 700;
    color: var(--accent);
}
.task-command-bar {
    overflow: visible;
}
@media (max-width: 760px) {
    .task-command-bar {
        padding: 8px;
        gap: 8px;
    }
    .task-scope-tabs,
    .task-status-pills {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 6px;
        overflow: visible;
    }
    .task-scope-tabs .tab,
    .status-pill {
        width: 100%;
        min-width: 0;
        justify-content: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .tasks-table .task-main-row {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 8px !important;
        gap: 4px;
    }
    .tasks-table .task-main-row td:nth-child(1),
    .tasks-table .task-main-row td:nth-child(3),
    .tasks-table .task-main-row td:nth-child(4),
    .tasks-table .task-main-row td:nth-child(5),
    .tasks-table .task-main-row td:nth-child(6) {
        display: none !important;
    }
    .tasks-table .task-main-row td:nth-child(2) {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
    }
    .task-mobile-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 5px;
    }
    .task-mobile-meta .badge,
    .task-mobile-meta .timer,
    .task-mobile-meta .task-mobile-person {
        font-size: 10.5px;
        padding: 2px 6px;
        border-radius: 999px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
    }
    .task-mobile-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 6px;
    }
    .task-mobile-actions .btn {
        min-height: 26px;
        padding: 4px 7px;
        font-size: 10.5px;
    }
    .extra-task-table.compact-table,
    .extra-task-table.compact-table thead,
    .extra-task-table.compact-table tbody,
    .extra-task-table.compact-table tr,
    .extra-task-table.compact-table th,
    .extra-task-table.compact-table td {
        display: block;
        width: 100%;
    }
    .extra-task-table.compact-table thead { display: none; }
    .extra-task-table.compact-table tr {
        border: 1px solid var(--border-color);
        border-radius: var(--radius);
        padding: 7px;
        margin-bottom: 8px;
        background: var(--bg-secondary);
    }
    .extra-task-table.compact-table td {
        border: 0;
        padding: 4px 0;
    }
    .workflow-modal-step {
        grid-template-columns: 34px minmax(0, 1fr);
    }
    .workflow-modal-step .btn { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
    .task-scope-tabs,
    .task-status-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.workflow-builder-shell {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    overflow: hidden;
}
.workflow-builder-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}
.workflow-builder-list {
    display: grid;
    gap: 8px;
    padding: 10px;
}
.workflow-builder-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1.2fr) auto auto auto;
    gap: 7px;
    align-items: start;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-primary);
}
.workflow-builder-step .step-number {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    font-weight: 800;
}
.workflow-builder-step textarea { min-height: 38px; }
.workflow-step-list {
    display: grid;
    gap: 7px;
    margin-top: 8px;
}
.workflow-step {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-primary);
}
.workflow-step.done {
    background: var(--success-bg);
    border-color: var(--success-border);
}
.workflow-step.locked { opacity: .62; }
.workflow-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--accent);
    cursor: pointer;
}
.workflow-progress {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 999px;
    overflow: hidden;
    margin: 8px 0 4px;
}
.workflow-progress > span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: inherit;
}
@media (max-width: 760px) {
    .workflow-builder-step {
        grid-template-columns: 34px minmax(0, 1fr);
    }
    .workflow-builder-step textarea,
    .workflow-builder-step .btn {
        grid-column: 2;
    }
}

/* Final refinement patch: requested interaction and responsive fixes */
.actions-wrap {
    flex-wrap: nowrap !important;
    white-space: nowrap;
}
.tasks-table th:nth-child(2),
.tasks-table td:nth-child(2) {
    max-width: 320px;
    width: min(32vw, 320px);
}
.tasks-table td:nth-child(2) .task-title-cell,
.task-title-cell strong {
    min-width: 0;
}
.tag-chip {
    gap: 6px;
}
.tag-chip .tag-delete {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--danger);
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    font-size: 10px;
    margin-inline-start: 3px;
}
.tag-chip .tag-delete:hover {
    filter: brightness(.96);
}
.choice-button-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 168px;
    overflow-y: auto;
    padding: 2px;
}
.choice-button-list.compact-choice-list {
    max-height: 120px;
}
.choice-text-button {
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 7px 11px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    transition: var(--transition);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.choice-text-button.active,
.choice-text-button:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light);
}
.wrap-control {
    flex-wrap: wrap;
}
.task-status-mobile-filter {
    display: none;
    position: relative;
    width: 100%;
}
.task-status-mobile-button {
    width: 100%;
    justify-content: space-between;
    min-height: 38px;
}
.task-status-mobile-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 30;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}
.task-status-mobile-filter.open .task-status-mobile-menu {
    display: grid;
}
.task-status-mobile-menu button {
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: var(--radius);
    padding: 8px 6px;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}
.task-status-mobile-menu button.active {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 700;
}
.history-section-title {
    margin: 12px 0 8px;
    font-size: 13px;
    color: var(--text-secondary);
}
.compact-history-table th,
.compact-history-table td {
    padding: 7px 9px !important;
    font-size: 12px;
}
.compact-empty {
    padding: 10px !important;
}
.site-deactivation-field,
.edit-site-deactivation-field {
    min-width: min(100%, 220px);
}
@media (max-width: 760px) {
    .task-status-mobile-filter {
        display: block;
    }
    .task-status-pills {
        display: none !important;
    }
    .task-mobile-actions {
        justify-content: space-evenly !important;
    }
    .task-mobile-meta {
        justify-content: end !important;
    }
    .actions-wrap {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 2px;
    }
    .tasks-table th:nth-child(2),
    .tasks-table td:nth-child(2) {
        max-width: none;
        width: 100%;
    }
    .choice-button-list,
    .routine-output-picker {
        width: 100%;
    }
    .routine-output-picker {
        flex-direction: column;
        align-items: stretch;
    }
    .choice-text-button {
        flex: 1 1 calc(50% - 6px);
        text-align: center;
    }
    .site-deactivation-field,
    .edit-site-deactivation-field {
        width: 100%;
    }
}

/* ============================================================
   Jalali routine controls + richer workflow task UX
   ============================================================ */
.routine-picker-section {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    margin-bottom: 10px;
}
.routine-picker-section > strong {
    font-size: 13px;
    color: var(--text-primary);
}
.month-picker .tag-chip,
.monthday-picker .tag-chip { min-width: 42px; justify-content: center; }

.workflow-run-panel {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
}
.workflow-run-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.workflow-run-title div { display: grid; gap: 2px; }
.workflow-run-title strong { font-size: 14px; }
.workflow-run-title span { font-size: 12px; color: var(--text-muted); }
.workflow-run-title b {
    min-width: 48px;
    text-align: center;
    border-radius: 999px;
    padding: 4px 8px;
    background: var(--accent-light);
    color: var(--accent);
}
.workflow-run-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.workflow-run-stats span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-secondary);
}
.workflow-step-timeline {
    display: grid;
    gap: 9px;
    position: relative;
}
.workflow-step-card {
    grid-template-columns: 42px minmax(0, 1fr) minmax(210px, auto);
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    border-right: 4px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}
.workflow-step-card.done span { text-decoration: none; }
.workflow-step-card.status-done { border-right-color: var(--success); background: var(--success-bg); }
.workflow-step-card.status-in_progress { border-right-color: var(--info); background: var(--info-bg); }
.workflow-step-card.status-paused { border-right-color: var(--warning); background: var(--warning-bg); }
.workflow-step-card.status-rejected { border-right-color: var(--danger); background: var(--danger-bg); }
.workflow-step-card.status-skipped { border-right-color: var(--text-muted); }
.workflow-step-index span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-light);
    color: var(--accent);
    font-weight: 800;
}
.workflow-step-content { min-width: 0; display: grid; gap: 6px; }
.workflow-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.workflow-step-top strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.workflow-step-desc {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.7;
}
.workflow-step-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    font-size: 11.5px;
    color: var(--text-muted);
}
.workflow-step-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.workflow-step-note {
    color: var(--text-secondary);
    max-width: 100%;
}
.workflow-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11.5px;
    font-weight: 700;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
}
.workflow-status-done { color: var(--success); background: var(--success-bg); border-color: var(--success-border); }
.workflow-status-progress { color: var(--info); background: var(--info-bg); border-color: var(--info-border); }
.workflow-status-paused { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); }
.workflow-status-rejected { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); }
.workflow-status-skipped { color: var(--text-muted); background: var(--bg-tertiary); }
.workflow-status-pending { color: var(--text-secondary); }
.workflow-step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
}
.workflow-locked-note {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    font-size: 12px;
}
@media (max-width: 760px) {
    .workflow-run-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workflow-run-stats span { justify-content: center; }
    .workflow-step-card {
        grid-template-columns: 34px minmax(0, 1fr);
        align-items: start;
    }
    .workflow-step-actions {
        grid-column: 1 / -1;
        justify-content: space-evenly;
        padding-top: 6px;
        border-top: 1px dashed var(--border-color);
    }
    .workflow-step-top { align-items: flex-start; flex-direction: column; }
    .workflow-status-chip { width: fit-content; }
}
.routine-list-row strong { display: grid; gap: 3px; }
.routine-list-row strong small { color: var(--text-muted); font-weight: 500; font-size: 11.5px; }

/* Task command bar refinements */
.task-command-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.task-scope-tabs { padding-block: 2px; }
.task-filter-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.task-clear-filters-btn.has-filters {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light);
}
.task-filter-toggle.active {
    border-color: var(--accent);
    color: var(--accent);
}
.task-advanced-filters {
    display: grid;
    gap: 10px;
    padding: 10px;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
}
.task-advanced-filters.collapsed { display: none; }
.task-filter-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) minmax(190px, 1fr) minmax(220px, 1.1fr) minmax(190px, .9fr);
    gap: 10px;
    align-items: end;
}
.task-filter-grid .form-group { margin-bottom: 0; }
.task-filter-site-button,
.task-advanced-filters .site-picker-button {
    width: 100%;
    min-height: 41px;
}
.task-user-filter-hidden { display: none !important; }
.task-filter-user-button { width: 100%; }
.user-choice-grid .site-choice { justify-content: flex-start; }
.task-site-pulse-tooltip {
    position: absolute;
    z-index: 25000;
    max-width: min(320px, calc(100vw - 16px));
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.7;
    pointer-events: none;
    white-space: nowrap;
}
.tasks-table .badge {
    white-space: nowrap;
    text-align: center;
    justify-content: center;
}
.task-type-inline {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 7px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-muted);
    vertical-align: middle;
    font-size: 11px;
}
.task-type-inline.workflow { color: #7c3aed; background: #f5f3ff; border-color: #ddd6fe; }
.task-type-inline.dooloop { color: #0f766e; background: #ecfdf5; border-color: #99f6e4; }
.task-type-inline.routine { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.task-type-inline.manual { color: var(--text-muted); }
.task-status-mobile-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-family: inherit;
    font-weight: 800;
    padding: 8px 12px;
    cursor: pointer;
}
.workflow-task-backdrop,
.workflow-fullscreen-backdrop {
    z-index: 12000;
}
.workflow-task-modal,
.workflow-fullscreen-modal {
    width: min(1180px, calc(100vw - 28px));
    max-width: none;
    height: min(92vh, 920px);
    max-height: 92vh;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    background: #fff;
}
.workflow-task-header,
.workflow-modal-header {
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(135deg, #ffffff, #f8fbff);
}
.workflow-modal-kicker {
    color: var(--accent);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 4px;
}
.workflow-task-body,
.workflow-modal-body {
    flex: 1;
    max-height: none;
    overflow: auto;
    background: #fff;
}
.workflow-modal-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, #f8fbff, #ffffff);
    margin-bottom: 12px;
}
.workflow-modal-summary { display: flex; align-items: center; gap: 12px; min-width: 0; }
.workflow-modal-summary p { margin: 4px 0 0; color: var(--text-secondary); font-size: 12px; }
.workflow-modal-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), #7c3aed);
    box-shadow: var(--shadow-md);
}
.workflow-modal-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.workflow-modal-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}
#historyModal.over-workflow-modal { z-index: 13000; }
#historyModal.over-workflow-modal .modal { z-index: 13001; }

/* Guided tour upgrade */
.tour-overlay { z-index: 20002; pointer-events: auto; }
.tour-highlight { z-index: 20001; }
.tour-card { z-index: 20003; }
.tour-pointer {
    position: fixed;
    z-index: 20004;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 3px solid #f59e0b;
    background: rgba(251,191,36,.18);
    box-shadow: 0 0 0 10px rgba(251,191,36,.16);
    pointer-events: none;
    animation: tourPointerTap .85s ease-in-out;
}
@keyframes tourPointerTap {
    0% { transform: scale(.55); opacity: 0; }
    35% { transform: scale(1); opacity: 1; }
    70% { transform: scale(.82); opacity: 1; }
    100% { transform: scale(1.15); opacity: 0; }
}
.task-tour-demo {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid var(--info-border);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--info-bg), var(--bg-secondary));
    box-shadow: var(--shadow-sm);
}
.task-tour-demo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.task-tour-demo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.task-tour-demo-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 10px;
    display: grid;
    gap: 8px;
    position: relative;
}
.task-tour-demo-card strong { display: flex; align-items: center; gap: 6px; }
.task-tour-demo-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.task-tour-demo-menu {
    display: none;
    position: absolute;
    top: 52px;
    left: 10px;
    right: 10px;
    z-index: 3;
    padding: 8px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-lg);
    gap: 5px;
}
.task-tour-demo-menu.open { display: grid; }
.task-tour-demo-menu button { justify-content: flex-start; }
.task-tour-demo-modal {
    position: fixed;
    inset: 5vh 5vw;
    z-index: 19990;
    display: none;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
    padding: 18px;
    overflow: auto;
}
.task-tour-demo-modal.open { display: block; }
@media (max-width: 900px) {
    .task-command-topline { align-items: stretch; flex-direction: column; }
    .task-filter-actions { justify-content: space-between; }
    .task-filter-grid { grid-template-columns: 1fr; }
    .workflow-modal-hero { grid-template-columns: 1fr; }
    .workflow-modal-meta { justify-content: flex-start; }
    .task-tour-demo-grid { grid-template-columns: 1fr; }
    .workflow-task-modal,
    .workflow-fullscreen-modal { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
}

/* Task/status workflow refinements */
.status-pill.is-disabled,
.status-pill:disabled {
    opacity: .42;
    cursor: not-allowed;
    filter: grayscale(.35);
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border-color: var(--border-color);
}
.status-pill.is-disabled:hover,
.status-pill:disabled:hover {
    color: var(--text-muted);
    border-color: var(--border-color);
}
.cron-compact-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 12px;
}
.cron-report-grid.compact {
    grid-template-columns: 1fr;
}
.task-mobile-command-dock {
    display: none;
}
.workflow-step-meta .fa-stopwatch,
.workflow-run-stats .fa-stopwatch {
    color: var(--accent);
}

@media (max-width: 760px) {
    .form-group.wide {
        flex: 1 1 auto;
        width: 100%;
    }
    .task-command-bar {
        display: none !important;
    }
    .task-mobile-command-dock {
        display: block;
        position: fixed;
        right: 14px;
        bottom: 14px;
        z-index: 80;
        width: min(340px, calc(100vw - 28px));
        pointer-events: none;
    }
    .task-mobile-command-fab {
        pointer-events: auto;
        margin-right: auto;
        min-height: 46px;
        max-width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 14px;
        border: 1px solid var(--accent);
        border-radius: 999px;
        background: var(--accent);
        color: #fff;
        box-shadow: var(--shadow-lg);
        font-family: inherit;
        font-weight: 800;
        cursor: pointer;
    }
    .task-mobile-command-panel {
        display: none;
        pointer-events: auto;
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--bg-secondary);
        box-shadow: var(--shadow-lg);
        max-height: min(72vh, 520px);
        overflow: auto;
    }
    .task-mobile-command-dock.open .task-mobile-command-panel {
        display: block;
    }
    .task-mobile-command-title,
    .task-mobile-command-subtitle {
        font-weight: 900;
        font-size: 12px;
        color: var(--text-secondary);
        margin: 2px 2px 8px;
    }
    .task-mobile-command-subtitle {
        margin-top: 10px;
    }
    .task-mobile-command-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }
    .task-mobile-command-grid.status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .task-mobile-command-grid button {
        min-height: 36px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius);
        background: var(--bg-tertiary);
        color: var(--text-secondary);
        font-family: inherit;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
    }
    .task-mobile-command-grid button.active {
        border-color: var(--accent);
        color: var(--accent);
        background: var(--accent-light);
    }
    .task-mobile-command-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        margin-top: 10px;
    }
    body:has(#taskMobileCommandDock) {
        padding-bottom: 74px;
    }
}
@media (max-width: 760px) {
    .task-command-bar.mobile-filters-open {
        display: block !important;
        position: fixed;
        top: auto;
        right: 14px;
        left: 14px;
        bottom: 76px;
        z-index: 82;
        max-height: min(70vh, 520px);
        overflow: auto;
        margin: 0;
        padding: 10px;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
    }
    .task-command-bar.mobile-filters-open .task-command-topline,
    .task-command-bar.mobile-filters-open .task-status-pills,
    .task-command-bar.mobile-filters-open .task-status-mobile-filter {
        display: none !important;
    }
    .task-command-bar.mobile-filters-open .task-advanced-filters {
        display: grid;
        padding: 0;
        border: 0;
        background: transparent;
    }
}

/* Task action/priority refinements */
.task-title-cell strong.task-title-important {
    font-weight: 800;
}
.task-urgency-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 7px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(220, 38, 38, .24);
    background: rgba(220, 38, 38, .08);
    color: var(--danger);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    vertical-align: middle;
}
.task-row-busy {
    opacity: .55;
    transition: opacity .15s ease;
}
.task-row-busy button {
    pointer-events: none;
}

.task-title-cell strong:not(.task-title-important) {
 font-weight: 500;
 color: #54595f
}
.fas.fa-align-center.task-doc-icon {
    margin-right: 4px;
}
/* Final task/customer/monitoring refinements */
body.tour-lock-scroll { overflow: hidden !important; position: fixed; inset: 0; width: 100%; }
.connection-problem::after { content: 'ارتباط شما قطع یا ناپایدار است'; position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 30000; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--warning-border); background: var(--warning-bg); color: var(--warning); box-shadow: var(--shadow-md); font-weight: 800; font-size: 12px; pointer-events: none; }
.task-filter-color-row { align-items: center; display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.task-filter-colors,.task-color-filter-group { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.task-color-filter { width:24px; height:24px; border-radius:50%; border:2px solid var(--border-color); box-shadow:var(--shadow-sm); cursor:pointer; transition:var(--transition); display:inline-flex; align-items:center; justify-content:center; overflow:hidden; }
.task-color-filter[data-site-color-filter="all"] { width:auto; height:26px; border-radius:999px; padding:0 10px; min-width:auto; font-size:11px; background:var(--bg-secondary); color:var(--text-secondary); }
.task-color-filter:hover,.task-color-filter.active { transform: translateY(-1px) scale(1.08); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(25,103,210,.12); }
.task-number-wrap { display:inline-flex; align-items:center; gap:6px; direction:ltr; }
.task-site-pulse { width:9px; height:9px; min-width:9px; border-radius:999px; border:1px solid currentColor; display:inline-block; animation:taskSiteBlink 1.35s ease-in-out infinite; box-shadow:0 0 0 0 currentColor; }
@keyframes taskSiteBlink { 0%,100%{opacity:.45;box-shadow:0 0 0 0 currentColor;} 50%{opacity:1;box-shadow:0 0 0 4px transparent;} }
.history-item.history-compact .history-body { white-space:normal; line-height:1.9; }
.monitor-task-breakdown { margin-top:12px; padding-top:12px; border-top:1px dashed var(--border-color); }
.monitor-breakdown-chips,.monitor-recent-tasks,.monitor-history-summary { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.monitor-breakdown-chips .task-meta-pill,.monitor-history-summary .task-meta-pill { background:var(--bg-tertiary); }
.monitor-recent-tasks { margin-top:10px; }
.monitor-recent-task { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border-color); border-radius:999px; background:var(--bg-secondary); color:var(--text-secondary); font-size:12px; }
.monitor-history-users { display:grid; gap:14px; margin-top:14px; }
.monitor-user-history-card { border:1px solid var(--border-color); border-radius:var(--radius-lg); background:var(--bg-secondary); padding:12px; }
.monitor-user-history-card h4 { margin:0 0 10px; font-size:14px; }
.monitor-timeline { display:grid; gap:8px; margin-top:10px; }
.monitor-timeline-item { display:grid; grid-template-columns:58px 1fr auto; gap:10px; align-items:center; padding:8px 10px; border:1px solid var(--border-color); border-radius:var(--radius); background:var(--bg-tertiary); }
.monitor-timeline-item .time { font-weight:800; color:var(--accent); }
.monitor-timeline-item .title { font-weight:700; color:var(--text-primary); }
.monitor-timeline-item .desc { color:var(--text-secondary); font-size:12px; }
.monitor-timeline-item .duration { color:var(--text-muted); white-space:nowrap; font-size:12px; }
.portal-summary-grid,.customer-portal-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:14px 0; }
.portal-summary-card,.customer-portal-card { border:1px solid var(--border-color); border-radius:var(--radius-lg); background:var(--bg-secondary); padding:14px; box-shadow:var(--shadow-sm); }
.portal-summary-card span,.customer-portal-card span { display:block; color:var(--text-muted); font-size:12px; margin-bottom:6px; }
.portal-summary-card strong,.customer-portal-card strong { font-size:22px; color:var(--text-primary); }
.portal-task-groups { display:grid; gap:14px; }
.portal-task-group { border:1px solid var(--border-color); border-radius:var(--radius-lg); background:var(--bg-secondary); overflow:hidden; }
.portal-task-group h3 { margin:0; padding:12px 14px; border-bottom:1px solid var(--border-color); background:var(--bg-tertiary); font-size:15px; }
.portal-task-row { display:grid; grid-template-columns:1fr auto; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border-color); }
.portal-task-row:last-child { border-bottom:0; }
.portal-task-row strong { color:var(--text-primary); }
.portal-task-row small { color:var(--text-muted); }
.portal-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.wide-modal { width:min(960px, calc(100vw - 24px)); }
.row-actions { display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap; }
@media (max-width:680px){ .monitor-timeline-item,.portal-task-row{grid-template-columns:1fr;} }
.monitor-timeline-item.is-idle { opacity:.72; border-style:dashed; }

.monitor-timeline-item.aggregate { border-right:4px solid var(--user-line,#64748b); }
.monitor-timeline-item .user-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--user-line,#64748b); margin-left:6px; vertical-align:middle; }
.user-color-1{--user-line:#2563eb}.user-color-2{--user-line:#16a34a}.user-color-3{--user-line:#9333ea}.user-color-4{--user-line:#ea580c}.user-color-5{--user-line:#dc2626}.user-color-6{--user-line:#0891b2}.user-color-7{--user-line:#4f46e5}.user-color-8{--user-line:#65a30d}.user-color-9{--user-line:#be123c}.user-color-10{--user-line:#7c3aed}.user-color-11{--user-line:#0f766e}.user-color-12{--user-line:#b45309}


/* Customer portal: standalone, minimal shell using existing tokens */
body.customer-portal-minimal { background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary)); min-height: 100vh; }
.customer-portal-shell { min-height: 100vh; display:flex; align-items:flex-start; justify-content:center; padding:32px 16px; }
.customer-portal-minimal .customer-portal-box { width:min(980px, 100%); background:var(--bg-primary); border:1px solid var(--border-color); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); overflow:hidden; }
.customer-portal-minimal .auth-header { padding:22px 24px 14px; border-bottom:1px solid var(--border-color); background:var(--bg-secondary); text-align:right; }
.customer-portal-minimal .auth-header .logo { justify-content:flex-start; font-size:20px; color:var(--text-primary); }
.customer-portal-minimal .auth-header p { margin:6px 0 0; color:var(--text-muted); }
.customer-portal-minimal .auth-body { padding:20px 24px 24px; }
.customer-portal-minimal .card { box-shadow:none; border-color:var(--border-color); }
.customer-portal-minimal .portal-task-group { background:var(--bg-primary); border:1px solid var(--border-color); border-radius:var(--radius-lg); margin-top:14px; overflow:hidden; }
.customer-portal-minimal .portal-task-group h3 { margin:0; padding:12px 14px; font-size:15px; background:var(--bg-secondary); border-bottom:1px solid var(--border-color); }
.customer-portal-minimal .portal-task-row { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--border-color); }
.customer-portal-minimal .portal-task-row:last-child { border-bottom:0; }

/* Tour polish */
.tour-pointer { transition: transform .22s ease, opacity .22s ease; }
.tour-pointer.tap { transform: scale(.72); opacity:.72; }
body.tour-lock-scroll { overflow: hidden !important; touch-action:none; overscroll-behavior:none; }
.tour-card { max-height:min(72vh, 360px); overflow:auto; }

/* Routine limits */
.routine-limit-box { margin-top:12px; padding:12px; border:1px dashed var(--border-color); border-radius:var(--radius-lg); background:var(--bg-secondary); }

/* Connectivity notice */
html[data-connection="offline"] body::before { content:'ارتباط اینترنت یا سرور قطع است'; position:fixed; top:10px; left:50%; transform:translateX(-50%); z-index:30000; background:var(--danger); color:white; padding:8px 14px; border-radius:999px; font-size:13px; box-shadow:var(--shadow-lg); }

/* Compact helper text for validation guidance */
.form-hint { display:block; margin-top:6px; font-size:12px; color:var(--text-muted); line-height:1.8; }
.quick-empty { padding:8px 10px; color:var(--text-muted); font-size:13px; }

/* Range monitoring timeline */
.monitor-timeline-modal { width:min(98vw, 1280px); max-width:1280px; }
.monitor-timeline-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; padding:10px; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:var(--radius-lg); margin-bottom:10px; }
.monitor-timeline-toolbar .form-group { min-width:130px; margin:0; }
.monitor-timeline-toolbar input[type="time"] { direction:ltr; text-align:center; }
.monitor-timeline-legend { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:8px 0 12px; color:var(--text-secondary); font-size:12px; }
.monitor-timeline-legend span { display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:999px; background:var(--bg-tertiary); border:1px solid var(--border-color); font-weight:700; }
.monitor-timeline-legend span:before { content:""; width:18px; height:8px; border-radius:999px; display:inline-block; }
.monitor-timeline-legend .legend-normal:before { background:var(--success); }
.monitor-timeline-legend .legend-extra:before { background:var(--warning); }
.monitor-timeline-legend .legend-leave:before { background:var(--danger); }
.monitor-timeline-legend .legend-leisure:before { background:var(--border-color); }
.monitor-timeline-legend .legend-shift1:before { background:rgba(5,150,105,.18); }
.monitor-timeline-legend .legend-shift2:before { background:rgba(37,99,235,.16); }
.monitor-timeline-legend .legend-shift3:before { background:rgba(124,58,237,.16); }
.monitor-timeline-legend small { color:var(--text-muted); }
.timeline-range-head { display:grid; grid-template-columns:minmax(180px, 260px) 1fr; gap:12px; align-items:center; padding:12px; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:var(--radius-lg); margin-bottom:10px; }
.timeline-range-head strong { display:block; color:var(--text-primary); margin-bottom:4px; }
.timeline-range-head span { color:var(--text-muted); font-size:12px; }
.timeline-summary-chips { margin:0; }
.timeline-summary-chips .danger-pill { border-color:rgba(239,68,68,.35); }
.timeline-summary-chips .warning-pill { border-color:rgba(217,119,6,.42); background:var(--warning-bg); }
.timeline-day-card { border:1px solid var(--border-color); border-radius:var(--radius-lg); background:var(--bg-secondary); margin:12px 0; overflow:hidden; }
.timeline-day-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:12px; border-bottom:1px solid var(--border-color); background:var(--bg-tertiary); }
.timeline-day-head h4 { margin:0; font-size:15px; }
.timeline-grid { display:grid; grid-template-columns:210px minmax(520px,1fr); gap:0; overflow:auto; padding:10px; }
.timeline-user-row { display:contents; }
.timeline-user-label { min-height:42px; padding:7px 8px; border-bottom:1px solid var(--border-color); color:var(--text-primary); background:var(--bg-secondary); position:sticky; right:0; z-index:2; border-left:1px solid var(--border-color); }
.timeline-user-label strong { display:block; font-size:12px; border-right:4px solid var(--user-line, var(--accent)); padding-right:6px; }
.timeline-user-label small { display:block; color:var(--text-muted); margin-top:3px; line-height:1.5; font-size:10.5px; }
.timeline-axis-spacer { font-weight:800; color:var(--text-muted); }
.timeline-track { position:relative; min-width:640px; min-height:42px; border-bottom:1px solid var(--border-color); background:linear-gradient(to right, rgba(5,150,105,.07) 0 33.333%, rgba(37,99,235,.065) 33.333% 66.666%, rgba(124,58,237,.065) 66.666% 100%), linear-gradient(to right, transparent 0, transparent calc(16.666% - 1px), rgba(148,163,184,.22) 16.666%, transparent calc(16.666% + 1px), transparent calc(33.333% - 1px), rgba(148,163,184,.22) 33.333%, transparent calc(33.333% + 1px), transparent calc(50% - 1px), rgba(148,163,184,.22) 50%, transparent calc(50% + 1px), transparent calc(66.666% - 1px), rgba(148,163,184,.22) 66.666%, transparent calc(66.666% + 1px), transparent calc(83.333% - 1px), rgba(148,163,184,.22) 83.333%, transparent calc(83.333% + 1px)); direction:ltr; }
.axis-track { min-height:42px; background:var(--bg-secondary); }
.timeline-shifts { position:absolute; inset:0 0 auto 0; height:18px; font-size:10px; color:var(--text-muted); pointer-events:none; }
.timeline-shifts span { position:absolute; top:2px; transform:translateX(-50%); font-weight:800; }
.timeline-shifts .shift-one { left:16.666%; }
.timeline-shifts .shift-two { left:50%; }
.timeline-shifts .shift-three { left:83.333%; }
.timeline-axis { position:absolute; inset:0; font-size:10px; color:var(--text-muted); }
.timeline-axis span { position:absolute; top:22px; transform:translateX(-50%); white-space:nowrap; }
.timeline-bar { position:absolute; top:8px; bottom:8px; min-width:2px; border-radius:3px; overflow:hidden; text-indent:-9999px; white-space:nowrap; font-size:0; line-height:0; color:transparent; opacity:.94; box-shadow:0 1px 2px rgba(0,0,0,.18); }
.timeline-bar.normal { background:var(--success); }
.timeline-bar.extra { background:var(--warning); animation:pulseExtraWork 1.4s infinite; }
.timeline-bar.leave { background:var(--danger); }
.timeline-bar.leisure { background:repeating-linear-gradient(45deg, rgba(148,163,184,.22), rgba(148,163,184,.22) 5px, rgba(148,163,184,.10) 5px, rgba(148,163,184,.10) 10px); box-shadow:none; color:transparent; }
.monitor-json-box { margin-top:12px; min-height:190px; direction:ltr; text-align:left; font-family:monospace; font-size:11px; }
@keyframes pulseExtraWork { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.25)} }
@media (max-width:860px){ .timeline-range-head{grid-template-columns:1fr;} .timeline-grid{grid-template-columns:150px minmax(460px,1fr);} .timeline-user-label{min-width:150px;} }

/* Customer portal: minimal task registration and read-only task list */
.customer-portal-minimal .portal-entry-card { margin-bottom: 14px; }
.customer-portal-minimal .portal-entry-card .card-body { display: grid; gap: 10px; }
.customer-portal-minimal .portal-create-card { margin: 14px 0; }
.customer-portal-minimal .portal-creator { display: block; margin-top: 3px; color: var(--text-muted); }

/* Update: task descriptions, task switch, roles, contact access and timeline tooltip */
.task-desc-trigger { white-space:nowrap; }
.switch-task-picker { display:flex; gap:8px; align-items:center; }
.switch-task-picker .quick-search { flex:1; }
.switch-task-options .switch-task-option { display:block; width:100%; text-align:right; padding:9px 10px; }
.switch-task-options .switch-task-option strong { display:block; font-size:13px; }
.switch-task-options .switch-task-option small { display:block; margin-top:3px; color:var(--text-muted); }
.timeline-tooltip-floating { position:fixed; z-index:50000; max-width:min(360px, calc(100vw - 24px)); padding:8px 10px; border-radius:10px; background:rgba(15,23,42,.96); color:white; box-shadow:var(--shadow-lg); font-size:12px; line-height:1.8; opacity:0; pointer-events:none; transform:translateY(4px); transition:opacity .15s ease, transform .15s ease; direction:rtl; text-align:right; }
.timeline-tooltip-floating.show { opacity:1; transform:translateY(0); }
.multi-color-picker { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.multi-color-picker .task-color-filter.active { outline:3px solid rgba(37,99,235,.25); transform:translateY(-1px); box-shadow:0 0 0 2px var(--bg-primary), 0 5px 14px rgba(15,23,42,.18); }
.monitor-task-breakdown { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.monitor-task-breakdown .tag-mini { border:1px solid var(--border-color); background:var(--bg-secondary); }
.monitor-task-breakdown .done { border-color:rgba(22,163,74,.25); }
.monitor-task-breakdown .fail { border-color:rgba(220,38,38,.25); }
.monitor-task-breakdown .overtime { border-color:rgba(217,119,6,.35); background:var(--warning-bg); }
.roles-manage-card { margin-top:14px; }
.role-create-inline { align-items:flex-end; gap:10px; }
.role-list-box { display:grid; gap:8px; margin-top:12px; }
.role-row { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--border-color); border-radius:var(--radius-lg); background:var(--bg-secondary); }
.role-row small { display:block; color:var(--text-muted); margin-top:4px; direction:ltr; text-align:right; }
.role-row.system-role { background:linear-gradient(135deg, var(--bg-secondary), rgba(37,99,235,.06)); }
.permission-override, .permission-override-row { background:rgba(220,38,38,.08) !important; }
.permission-override { border:1px solid rgba(220,38,38,.35); border-radius:var(--radius-lg); padding:10px; }
.override-mark { display:inline-flex; margin-right:6px; padding:2px 7px; border-radius:999px; background:rgba(220,38,38,.13); color:var(--danger); font-size:11px; font-weight:800; }
.contact-access-all { margin:10px 0; }
.contact-site-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; max-height:360px; overflow:auto; padding:8px; border:1px solid var(--border-color); border-radius:var(--radius-lg); background:var(--bg-secondary); margin-top:8px; }
.contact-site-choice { display:flex; align-items:center; gap:7px; padding:7px 8px; border:1px solid var(--border-color); border-radius:10px; background:var(--bg-primary); font-size:12px; cursor:pointer; }
.contact-site-choice input { margin:0; }
.history-task-ref { margin-bottom:5px; color:var(--text-secondary); }
.time-picker-popover { z-index:50001; }
@media (max-width:640px){ .switch-task-picker{flex-direction:column;align-items:stretch;} .role-row{align-items:flex-start;flex-direction:column;} .contact-site-grid{grid-template-columns:1fr;} }

/* Final UX polish for role permissions, switch-task picker, multi-color scope and mobile task header */
.task-card-header-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.task-mobile-history-btn { display:none; }
.filter-button-options { max-height:180px; overflow:auto; padding:6px; border:1px solid var(--border-color); border-radius:var(--radius-lg); background:var(--bg-secondary); }
.filter-button-options .filter-button { justify-content:center; min-width:92px; }
.switch-task-panel { border:1px solid var(--border-color); border-radius:var(--radius-xl); background:linear-gradient(135deg,var(--bg-secondary),rgba(37,99,235,.04)); padding:12px; }
.switch-task-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px; }
.switch-task-head label { margin:0; font-weight:800; }
.switch-task-toolbar { display:grid; grid-template-columns:minmax(180px,1fr) minmax(160px,220px); gap:8px; align-items:center; margin-bottom:8px; }
.compact-site-picker { min-height:42px; }
.mini-status-pills { margin:6px 0 10px; gap:6px; }
.mini-status-pills .status-pill { padding:6px 10px; font-size:12px; }
.switch-task-card-list { display:grid; gap:8px; max-height:360px; overflow:auto; padding:4px; }
.switch-task-card { width:100%; text-align:right; border:1px solid var(--border-color); border-radius:var(--radius-lg); background:var(--bg-primary); padding:10px 12px; cursor:pointer; transition:all .15s ease; }
.switch-task-card:hover, .switch-task-card.active { border-color:var(--accent); box-shadow:0 8px 22px rgba(15,23,42,.08); transform:translateY(-1px); }
.switch-task-card.active { background:rgba(37,99,235,.08); }
.switch-task-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.switch-task-card-top strong { color:var(--text-primary); font-size:13px; line-height:1.8; }
.switch-task-card-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; color:var(--text-muted); font-size:12px; }
.task-create-modal-body .site-picker-button { width:100%; }
.multi-color-picker { gap:10px; padding:8px; border:1px solid var(--border-color); border-radius:var(--radius-lg); background:var(--bg-secondary); }
.multi-color-picker .task-color-filter { width:auto; min-width:76px; height:36px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid rgba(15,23,42,.14); font-weight:800; color:var(--text-primary); background-color:var(--bg-primary); }
.multi-color-picker .task-color-filter::after { content:attr(title); margin-inline-start:0; font-size:12px; }
.multi-color-picker .task-color-filter.active::before { content:'✓'; margin-inline-end:6px; font-weight:900; }
.permission-override { background:transparent !important; border-color:var(--border-color); }
.permission-card.permission-override-card { background:rgba(220,38,38,.08) !important; border-color:rgba(220,38,38,.45) !important; box-shadow:0 0 0 2px rgba(220,38,38,.06); }
.collaboration-badge { display:inline-flex; align-items:center; gap:4px; margin-left:6px; margin-inline-end:0; padding:2px 7px; border-radius:999px; background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(37,99,235,.12)); color:#b45309; border:1px solid rgba(245,158,11,.38); font-size:11px; font-weight:900; vertical-align:middle; }
.modal-header-actions { display:flex; align-items:center; gap:8px; }
.role-choice-group { min-width:180px; }
.role-choice-group .choice-btn { min-width:84px; }
@media (max-width:640px) {
  .task-refresh-btn { display:none; }
  .task-mobile-history-btn { display:inline-flex; }
  .switch-task-head, .switch-task-toolbar { grid-template-columns:1fr; flex-direction:column; align-items:stretch; }
  .switch-task-toolbar { display:grid; }
  .switch-task-card-top { flex-direction:column; }
  .multi-color-picker .task-color-filter { flex:1 1 92px; }
}

/* Polish added controls to match existing UI */
.choice-button-list .choice-btn {
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 8px 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    transition: var(--transition);
    min-height: 34px;
}
.choice-button-list .choice-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.choice-button-list .choice-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 8px 18px rgba(37,99,235,.18); }
.role-choice-group { padding: 6px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-secondary); min-width: 220px; }
.role-choice-group .choice-btn { flex: 1 1 96px; justify-content: center; }
.color-rename-preview { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--border-color); border-radius:var(--radius-lg); background:var(--bg-tertiary); margin-bottom:12px; }
.color-rename-preview strong { color:var(--text-primary); font-size:14px; }
.color-rename-preview small { color:var(--text-muted); margin-inline-start:auto; font-size:11px; }
.compact-modal { max-width: 480px; }
#siteHistoryModal .history-modal { width:min(96vw,920px); max-width:920px; }
#siteHistoryContent .table-responsive { border:1px solid var(--border-color); border-radius:var(--radius-lg); overflow:auto; background:var(--bg-secondary); }
#siteHistoryContent .history-section-title { margin-top:14px; }
#siteHistoryContent .history-section-title:first-child { margin-top:0; }
.monitor-table .timer { white-space:nowrap; }

/* ============================================================
   SUPPORT REQUESTS / PLANS - PHASE 1
   ============================================================ */
.plan-chip {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border-radius:999px;
    background:var(--accent-light);
    color:var(--accent);
    font-size:12px;
    font-weight:700;
    line-height:1.4;
    white-space:nowrap;
}
.support-request-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}
.support-summary-grid,
.portal-summary-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:12px;
    margin-top:14px;
}
.support-summary-card,
.portal-summary-card {
    background:var(--bg-tertiary);
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    padding:12px;
}
.support-summary-card span,
.portal-summary-card span { display:block; color:var(--text-muted); font-size:12px; }
.support-summary-card strong,
.portal-summary-card strong { font-size:20px; color:var(--text-primary); }
.support-request-table td { vertical-align:top; }
.clamp-line {
    max-width:420px;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.support-review-grid {
    display:grid;
    grid-template-columns:260px minmax(0,1fr) 300px;
    gap:16px;
    align-items:start;
}
.support-plan-panel,
.support-request-main,
.support-decision-panel,
.portal-plan-card {
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    background:var(--bg-secondary);
    padding:14px;
}
.support-request-main { min-height:260px; }
.support-desc {
    margin:12px 0;
    padding:12px;
    background:var(--bg-tertiary);
    border-radius:var(--radius);
    white-space:pre-wrap;
}
.support-meta-row {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    color:var(--text-muted);
    font-size:12px;
}
.support-meta-row span {
    background:var(--bg-tertiary);
    border:1px solid var(--border-color);
    border-radius:999px;
    padding:4px 8px;
}
.support-metrics {
    display:grid;
    gap:8px;
    margin-top:12px;
}
.support-metrics span {
    display:flex;
    justify-content:space-between;
    background:var(--bg-tertiary);
    border-radius:var(--radius);
    padding:8px 10px;
    font-size:12px;
}
.quota-meter {
    height:8px;
    background:var(--bg-tertiary);
    border-radius:999px;
    overflow:hidden;
    margin:12px 0;
    border:1px solid var(--border-color);
}
.quota-meter span { display:block; height:100%; background:var(--accent); border-radius:999px; }
.support-action-bar { position:sticky; bottom:0; background:var(--bg-secondary); z-index:2; flex-wrap:wrap; }
.phase-next-card p { margin:8px 0 0; color:var(--text-secondary); }
.portal-plan-card { margin:14px 0; }
.portal-plan-card > div:first-child { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.portal-plan-card strong { color:var(--text-primary); }
.portal-plan-card small { color:var(--text-muted); }
.compact-alert { padding:10px 12px; margin-bottom:12px; }
@media (max-width: 1100px) {
    .support-review-grid { grid-template-columns:1fr; }
    .support-action-bar { position:static; }
}

/* Support phase 1b: full-width review modal, token UX, timeline and attachments */
@media (min-width: 1024px) {
  .wide-modal { width: calc(100vw - 32px) !important; max-width: none !important; }
  .wide-modal .modal-body { max-height: calc(100vh - 158px); overflow:auto; }
}
.support-attachment-list { display:grid; gap:8px; margin:8px 0 14px; }
.support-attachment-list a { display:flex; align-items:center; gap:8px; padding:9px 10px; border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--bg-secondary); color:var(--text-primary); text-decoration:none; }
.support-attachment-list a small { margin-right:auto; color:var(--text-muted); }
.support-log-list { display:grid; gap:10px; margin-top:8px; }
.support-log-item { border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:10px 12px; background:var(--bg-secondary); }
.support-log-item > div:first-child { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.support-log-item strong { color:var(--text-primary); }
.support-log-item small { color:var(--text-muted); font-size:11px; }
.support-log-item p { margin:8px 0 0; color:var(--text-secondary); white-space:pre-wrap; }
.inline-footer { justify-content:flex-start; border-top:0; padding-right:0; padding-left:0; }
.checkbox-label { display:inline-flex; align-items:center; gap:8px; color:var(--text-secondary); margin:8px 0 12px; }

/* Phase 1.3 support UX refinements */
@media (min-width: 1024px) {
    .modal.wide-modal {
        width: calc(100vw - 32px) !important;
        max-width: none !important;
    }
}
.support-log-list.compact-timeline,
.support-log-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.support-log-item {
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--card-bg, #fff);
}
.support-log-item strong {
    font-size: .88rem;
}
.support-log-item small {
    display: block;
    opacity: .7;
    font-size: .76rem;
    margin-top: 2px;
}
.support-log-item p {
    margin: 5px 0 0;
    line-height: 1.7;
    font-size: .86rem;
}
.row-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.support-plan-help {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(59,130,246,.08);
    color: var(--text-color, #1f2937);
}
.field-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.switch-label,.compact-checkbox{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--text-secondary);font-size:13px;}
.switch-label input,.compact-checkbox input{margin:0;}
.support-attachment-card img{width:48px;height:48px;object-fit:cover;border-radius:10px;border:1px solid var(--border-color);background:var(--bg-primary)}
.support-plan-choice{max-width:100%;gap:8px;justify-content:flex-start}
.support-plan-choice button{display:inline-flex;align-items:center;gap:6px}
.plan-chip .site-badge{margin-left:6px;vertical-align:middle}
#libTabExtra .card + .card + .card {order: -1;}