: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;
}
.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;
}
.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;
}
.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%;
}
.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;
    flex-wrap: wrap;
}
.form-inline .form-group {
    margin-bottom: 0;
}
.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;
}
.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;
}
.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 {
    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);
}
.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-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;
}
.modal {
    background: #fff;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    animation: modalIn 0.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 {
    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;
}
.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 {
    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 {
    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;
}
.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-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 {
    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 {
    display: inline-block;
    background: var(--danger, #e74c3c);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    margin-right: 6px;
}
#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;
}
@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;
    }
}
.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);
    }
}
.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);
    }
}
::-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);
}
.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;
}
.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: 0.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: 0.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, 0.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;
    }
}
.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;
}
.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: 0.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;
    }
}
.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;
    }
}
.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 0.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;
}
.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, 0.16);
}
.task-abnormal {
    box-shadow: inset 4px 0 0 #f97316;
}
#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;
}
.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;
}
.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, 0.58),
        0 0 28px rgba(251, 191, 36, 0.45);
    pointer-events: none;
    transition: all 0.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 0.2s ease-out;
}
@keyframes tourCardIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.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;
    }
}
.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, 0.1), 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-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: 0.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;
}
.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(0.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%;
    }
}
.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-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-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, 0.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;
}
.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, 0.18);
    box-shadow: 0 0 0 10px rgba(251, 191, 36, 0.16);
    pointer-events: none;
    animation: tourPointerTap 0.85s ease-in-out;
}
@keyframes tourPointerTap {
    0% {
        transform: scale(0.55);
        opacity: 0;
    }
    35% {
        transform: scale(1);
        opacity: 1;
    }
    70% {
        transform: scale(0.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;
    }
}
.status-pill.is-disabled,
.status-pill:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    filter: grayscale(0.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-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, 0.24);
    background: rgba(220, 38, 38, 0.08);
    color: var(--danger);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    vertical-align: middle;
}
.task-row-busy {
    opacity: 0.55;
    transition: opacity 0.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;
}
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, 0.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: 0.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: 0.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;
}
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-pointer {
    transition:
        transform 0.22s ease,
        opacity 0.22s ease;
}
.tour-pointer.tap {
    transform: scale(0.72);
    opacity: 0.72;
}
body.tour-lock-scroll {
    overflow: hidden !important;
    touch-action: none;
    overscroll-behavior: none;
}
.tour-card {
    max-height: min(72vh, 360px);
    overflow: auto;
}
.routine-limit-box {
    margin-top: 12px;
    padding: 12px;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
}
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);
}
.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;
}
.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, 0.18);
}
.monitor-timeline-legend .legend-shift2:before {
    background: rgba(37, 99, 235, 0.16);
}
.monitor-timeline-legend .legend-shift3:before {
    background: rgba(124, 58, 237, 0.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, 0.35);
}
.timeline-summary-chips .warning-pill {
    border-color: rgba(217, 119, 6, 0.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, 0.07) 0 33.333%,
            rgba(37, 99, 235, 0.065) 33.333% 66.666%,
            rgba(124, 58, 237, 0.065) 66.666% 100%
        ),
        linear-gradient(
            to right,
            transparent 0,
            transparent calc(16.666% - 1px),
            rgba(148, 163, 184, 0.22) 16.666%,
            transparent calc(16.666% + 1px),
            transparent calc(33.333% - 1px),
            rgba(148, 163, 184, 0.22) 33.333%,
            transparent calc(33.333% + 1px),
            transparent calc(50% - 1px),
            rgba(148, 163, 184, 0.22) 50%,
            transparent calc(50% + 1px),
            transparent calc(66.666% - 1px),
            rgba(148, 163, 184, 0.22) 66.666%,
            transparent calc(66.666% + 1px),
            transparent calc(83.333% - 1px),
            rgba(148, 163, 184, 0.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: 0.94;
    box-shadow: 0 1px 2px rgba(0, 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, 0.22),
        rgba(148, 163, 184, 0.22) 5px,
        rgba(148, 163, 184, 0.1) 5px,
        rgba(148, 163, 184, 0.1) 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 .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);
}
.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, 0.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 0.15s ease,
        transform 0.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, 0.25);
    transform: translateY(-1px);
    box-shadow:
        0 0 0 2px var(--bg-primary),
        0 5px 14px rgba(15, 23, 42, 0.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, 0.25);
}
.monitor-task-breakdown .fail {
    border-color: rgba(220, 38, 38, 0.25);
}
.monitor-task-breakdown .overtime {
    border-color: rgba(217, 119, 6, 0.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, 0.06));
}
.permission-override,
.permission-override-row {
    background: rgba(220, 38, 38, 0.08) !important;
}
.permission-override {
    border: 1px solid rgba(220, 38, 38, 0.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, 0.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;
    }
}
.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, 0.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 0.15s ease;
}
.switch-task-card:hover,
.switch-task-card.active {
    border-color: var(--accent);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}
.switch-task-card.active {
    background: rgba(37, 99, 235, 0.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, 0.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, 0.08) !important;
    border-color: rgba(220, 38, 38, 0.45) !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.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, 0.18), rgba(37, 99, 235, 0.12));
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.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;
    }
}
.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, 0.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;
}
.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;
    }
}
@media (min-width: 1024px) {
    .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;
}

.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: 0.88rem;
}
.support-log-item small {
    display: block;
    opacity: 0.7;
    font-size: 0.76rem;
    margin-top: 2px;
}
.support-log-item p {
    margin: 5px 0 0;
    line-height: 1.7;
    font-size: 0.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, 0.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;
}
.ops-quick-form {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 14px;
    background: var(--bg-card);
}
.ops-list .library-list-row {
    grid-template-columns: minmax(240px, 1fr) auto auto auto;
    align-items: center;
}
.ops-taxonomy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.ops-tax-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    background: var(--bg-card);
}
.ops-quality-grid {
    margin-bottom: 16px;
}
.muted-doc {
    opacity: 0.82;
}
.task-sop-block small,
.task-checklist-block small {
    display: block;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 3px;
}
.task-checklist-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}
.task-checklist-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px;
    background: var(--bg-soft);
    cursor: pointer;
}
.task-checklist-item input {
    margin-top: 4px;
}
.task-checklist-item span {
    display: block;
}
.task-checklist-item small {
    display: block;
    color: var(--text-muted);
    margin-top: 4px;
}
.badge-muted {
    background: var(--bg-soft);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.ops-package-panel {
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 14px;
    margin: 12px 0;
    display: grid;
    gap: 12px;
}
.ops-package-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.ops-package-head strong {
    font-size: 14px;
    color: var(--text-primary);
}
.ops-package-head span {
    font-size: 12px;
    color: var(--text-muted);
    max-width: 640px;
    line-height: 1.7;
}
.ops-field-grid,
.ops-message-grid,
.ops-boolean-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 12px;
    align-items: start;
}
.ops-field-grid .wide,
.ops-message-grid .wide {
    grid-column: span 2;
}
.ops-taxonomy-create {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-secondary);
    padding: 12px;
    margin: 10px 0 14px;
}
.ops-package-panel .choice-button-list {
    min-height: 36px;
    background: var(--bg-primary);
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    padding: 7px;
    max-height: 98px;
}
.ops-package-panel .form-group label,
.ops-taxonomy-create label {
    font-size: 12px;
    font-weight: 900;
    color: var(--text-secondary);
}
.ops-package-panel .segmented-control button {
    padding: 7px 10px;
}
@media (max-width: 720px) {
    .ops-field-grid .wide,
    .ops-message-grid .wide {
        grid-column: auto;
    }
    .ops-package-head {
        display: block;
    }
    .ops-package-head span {
        display: block;
        margin-top: 4px;
    }
}
.ops-inline-note {
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.8;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.status-pill.draft-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--warning-bg, rgba(245, 158, 11, 0.12));
    color: var(--warning);
    border: 1px solid rgba(245, 158, 11, 0.28);
    font-weight: 800;
    white-space: nowrap;
}
.ops-document-form .tox-tinymce {
    min-height: 330px;
}
.ops-file-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.ops-file-card {
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 14px;
    padding: 10px;
    display: grid;
    gap: 8px;
}
.ops-file-card strong {
    font-size: 13px;
    word-break: break-word;
}
.ops-file-card small {
    color: var(--text-muted);
}
.ops-image-canvas {
    width: 100%;
    max-height: 320px;
    border-radius: 12px;
    background: #fff;
    border: 1px dashed var(--border-color);
    touch-action: none;
}
.ops-image-tools {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.ops-image-tools .active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.ops-checklist-builder-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 10px;
}
.ops-checklist-builder {
    display: grid;
    gap: 12px;
}
.ops-checklist-row {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-secondary);
    padding: 12px;
}
.ops-checklist-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.mini-segment {
    display: inline-flex;
    gap: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 4px;
}
.mini-segment button {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 7px 10px;
    color: var(--text-secondary);
    cursor: pointer;
}
.mini-segment button.active {
    background: var(--accent);
    color: #fff;
}
.ops-message-package {
    margin-top: 16px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-secondary);
    padding: 14px;
}
.ops-message-package h4 {
    margin: 0 0 4px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.ops-doc-row {
    grid-template-columns: minmax(240px, 1fr) auto auto auto minmax(180px, auto) !important;
}
.ops-document-paper {
    background: #fff;
    color: #111;
    max-width: 920px;
    margin: 0 auto;
    padding: 36px;
    border-radius: 18px;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08);
    line-height: 1.95;
}
.ops-document-paper header {
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 18px;
    padding-bottom: 16px;
}
.ops-document-paper header small {
    color: #64748b;
    font-weight: 800;
}
.ops-document-paper h1 {
    font-size: 26px;
    margin: 6px 0 10px;
}
.ops-document-paper h3 {
    font-size: 17px;
    margin: 20px 0 8px;
}
.ops-doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ops-doc-meta span {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 5px 10px;
    color: #475569;
    font-size: 12px;
}
.ops-rich-output img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}
.ops-doc-attachments {
    display: grid;
    gap: 8px;
}
.ops-doc-attachments a {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    border-radius: 10px;
    padding: 8px 10px;
    color: #0f172a;
    text-decoration: none;
}
.ops-doc-modal .modal-body {
    background: #f3f4f6;
}
.tox .tox-toolbar__group {
    direction: ltr;
}
.tox .tox-edit-area__iframe {
    background: #fff !important;
}
@media (max-width: 760px) {
    .ops-doc-row {
        grid-template-columns: 1fr !important;
    }
    .ops-document-paper {
        padding: 22px;
        border-radius: 12px;
    }
    .ops-field-grid {
        grid-template-columns: 1fr !important;
    }
    .ops-field-grid .wide {
        grid-column: auto !important;
    }
}
.ops-paste-zone {
    border: 1px dashed var(--border-color);
    background: var(--bg-secondary);
    border-radius: 14px;
    padding: 12px 14px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: text;
    min-height: 48px;
    outline: none;
    transition: 0.18s ease;
}
.ops-paste-zone:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    background: var(--bg-primary);
}
.ops-file-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ops-file-head strong {
    line-height: 1.6;
}
.ops-image-editor-shell {
    display: grid;
    gap: 8px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-primary);
    padding: 8px;
    margin-top: 4px;
}
.ops-image-editor-shell .ops-image-canvas {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    cursor: crosshair;
}
.ops-editor-modal .modal {
    max-width: 980px;
}
.ops-editor-card {
    min-height: 320px;
}
.ops-doc-tags,
.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.ops-doc-attachment-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    align-items: center !important;
    text-decoration: none !important;
}
.ops-doc-attachment-main {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.ops-doc-attachment-main strong {
    word-break: break-word;
}
.ops-doc-attachment-main small {
    color: #64748b;
}
.ops-doc-attachment-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.quick-options.open {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.tiny-choice-search {
    margin: 6px 6px 8px;
    width: calc(100% - 12px);
}
.choice-text-button {
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 7px 11px;
    margin: 3px;
    cursor: pointer;
    font-weight: 800;
    transition: 0.15s ease;
}
.choice-text-button:hover,
.choice-text-button.active {
    border-color: var(--accent);
    background: var(--accent-soft, rgba(59, 130, 246, 0.12));
    color: var(--accent);
}
.history-list {
    display: grid;
    gap: 10px;
}
.history-item {
    position: relative;
    background: var(--bg-secondary);
}
.history-dot {
    position: absolute;
    left: 14px;
    top: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}
.history-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 6px;
}
.history-body {
    color: var(--text-secondary);
    line-height: 1.8;
}
@media (max-width: 760px) {
    .ops-doc-attachment-row {
        grid-template-columns: 1fr !important;
    }
    .ops-doc-attachment-actions {
        justify-content: flex-start;
    }
    .ops-paste-zone {
        align-items: flex-start;
    }
}
.ops-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 12px;
}
.ops-list-toolbar .compact-search {
    max-width: 360px;
    min-width: 220px;
}
.ops-mini-links {
    display: grid;
    gap: 4px;
    line-height: 1.6;
    font-size: 12px;
    color: var(--text-secondary);
}
.ops-mini-links span {
    font-weight: 900;
    color: var(--text-primary);
}
.ops-mini-links small {
    color: var(--text-muted);
}
.ops-mini-links em {
    font-style: normal;
    color: var(--accent);
    font-weight: 800;
}
.extra-task-table.compact-table td,
.extra-task-table.compact-table th {
    vertical-align: middle;
    padding: 10px 8px;
}
.extra-title-cell strong {
    display: block;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.extra-title-cell .extra-desc {
    max-width: 420px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ops-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.ops-link-group {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-secondary);
    padding: 12px;
    display: grid;
    gap: 8px;
    min-height: 96px;
}
.ops-link-group h4 {
    margin: 0;
    font-size: 13px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 7px;
}
.ops-link-group h4:before {
    content: "↗";
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--bg-primary);
    color: var(--accent);
    font-size: 12px;
}
.ops-link-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}
.ops-link-group li {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary);
    padding: 8px 9px;
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 12px;
}
.ops-link-group .empty {
    color: var(--text-muted);
    font-size: 12px;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    padding: 8px;
    background: var(--bg-primary);
}
.ops-rich-row {
    gap: 10px;
    min-height: 64px;
}
.ops-rich-row strong small {
    display: block;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 3px;
    line-height: 1.6;
}
.ops-rich-row .tag-row {
    margin-top: 6px;
}
#extraEditModal .modal-body {
    padding-top: 10px;
}
#extraEditModal #extraTaskCreateForm {
    margin: 0;
}
#extraEditModal #extraTaskCreateForm .card-header {
    display: none;
}
#checklistImportActionOptions {
    max-height: 260px;
    overflow: auto;
}
.action-import-preview {
    display: grid;
    gap: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 10px;
    margin-top: 10px;
}
.action-import-preview strong {
    color: var(--text-primary);
}
.action-import-preview small {
    color: var(--text-muted);
    line-height: 1.7;
}
.cl-linked-action-search,
.cl-related-sop-search {
    direction: rtl;
}
@media (max-width: 760px) {
    .ops-list-toolbar {
        align-items: stretch;
    }
    .ops-list-toolbar .compact-search {
        max-width: 100%;
        width: 100%;
    }
    .extra-title-cell strong {
        max-width: 220px;
    }
    .ops-link-grid {
        grid-template-columns: 1fr;
    }
}
#extraEditModal #extraTaskCreateForm button[type="submit"] {
    display: none;
}
.ops-image-fullscreen-modal {
    z-index: 10020;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(4px);
}
.ops-image-fullscreen {
    width: min(96vw, 1280px) !important;
    max-width: 96vw !important;
    height: 94vh !important;
    display: grid !important;
    grid-template-rows: auto auto 1fr auto;
    overflow: hidden;
    border-radius: 22px !important;
}
.ops-image-editor-topbar {
    min-height: 58px;
}
.ops-image-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.ops-pen-control {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.ops-pen-control input[type="color"] {
    width: 34px;
    height: 28px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}
.ops-pen-control input[type="range"] {
    width: 120px;
}
.ops-editor-hint {
    margin-inline-start: auto;
    font-size: 12px;
}
.ops-image-editor-stage {
    min-height: 0;
    height: 100%;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: linear-gradient(45deg, #f8fafc 25%, #eef2f7 25%, #eef2f7 50%, #f8fafc 50%, #f8fafc 75%, #eef2f7 75%);
    background-size: 26px 26px;
}
.ops-image-editor-canvas {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
    touch-action: none;
    cursor: crosshair;
}
.ops-image-editor-canvas.is-crop-mode {
    cursor: crosshair;
}
.ops-image-editor-footer {
    border-top: 1px solid var(--border-color);
    background: var(--bg-primary);
}
.ops-image-preview-shell {
    display: grid;
    gap: 8px;
}
.ops-image-preview {
    width: 100%;
    height: 170px;
    object-fit: contain;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
}
.ops-image-tools {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ops-file-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ops-picker-button {
    margin-top: 4px;
    width: 100%;
    justify-content: space-between;
}
.ops-picker-button.is-empty span {
    color: var(--text-muted);
}
.ops-modal-selected-tags {
    margin: 10px 0 12px;
}
.ops-inline-tags {
    margin-top: 8px;
}
.site-choice.create-choice {
    border-style: dashed;
    color: var(--accent);
    font-weight: 800;
}
.ops-picker-modal .site-choice i {
    margin-left: 6px;
    color: var(--accent);
}
@media (max-width: 760px) {
    .ops-image-fullscreen {
        width: 100vw !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }
    .ops-image-editor-toolbar {
        align-items: stretch;
    }
    .ops-editor-hint {
        display: block;
        width: 100%;
        margin-inline-start: 0;
    }
    .ops-pen-control {
        width: 100%;
        justify-content: space-between;
    }
    .ops-pen-control input[type="range"] {
        flex: 1;
    }
    .ops-image-editor-stage {
        padding: 8px;
    }
    .ops-image-preview {
        height: 140px;
    }
}
.library-page {
    --ops-radius: 18px;
    --ops-radius-sm: 12px;
    --ops-line: var(--border-color);
    gap: 18px;
}
.library-page .card {
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
    overflow: visible;
}
.library-page .card-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 252, 0.72));
    border-bottom: 1px solid rgba(148, 163, 184, 0.24);
}
[data-theme="dark"] .library-page .card-header {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(17, 24, 39, 0.82));
}
.library-tabs {
    position: sticky;
    top: calc(var(--header-height, 60px) + 8px);
    z-index: 20;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.07);
    gap: 8px;
}
[data-theme="dark"] .library-tabs {
    background: rgba(15, 23, 42, 0.88);
}
.library-tabs .tab {
    border-radius: 14px;
    border: 1px solid transparent;
    padding: 10px 13px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.library-tabs .tab i {
    font-size: 14px;
    opacity: 0.86;
}
.library-tabs .tab.active {
    box-shadow: 0 8px 18px rgba(25, 103, 210, 0.18);
}
.ops-overview-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(130px, 1fr));
    gap: 10px;
}
.ops-overview-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 18px;
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    padding: 13px 14px;
    min-height: 88px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045);
}
.ops-overview-card:before {
    content: "";
    position: absolute;
    inset: auto auto -22px -22px;
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: rgba(25, 103, 210, 0.09);
}
.ops-overview-card span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 4px;
}
.ops-overview-card strong {
    display: block;
    font-size: 22px;
    line-height: 1.2;
    color: var(--text-primary);
}
.ops-overview-card small {
    display: block;
    color: var(--text-secondary);
    font-size: 11px;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ops-section-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
}
.ops-section-kicker:before {
    content: "";
    width: 22px;
    height: 3px;
    border-radius: 999px;
    background: var(--accent);
}
.ops-list-toolbar {
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 16px;
    background: var(--bg-tertiary);
}
.ops-list-toolbar .compact-search {
    height: 42px;
    border-radius: 13px;
    background: var(--bg-secondary);
}
.ops-list-toolbar .muted-line {
    font-weight: 800;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 7px 11px;
}
.ops-actionak-list,
.ops-document-list {
    display: grid;
    gap: 10px;
}
.ops-actionak-card,
.ops-doc-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(260px, 1.3fr) minmax(220px, 0.9fr) minmax(150px, 0.55fr) auto;
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 18px;
    background: var(--bg-secondary);
    padding: 13px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.035);
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease;
}
.ops-actionak-card:hover,
.ops-doc-card:hover {
    transform: translateY(-1px);
    border-color: rgba(25, 103, 210, 0.45);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}
.ops-actionak-card:before,
.ops-doc-card:before {
    content: "";
    position: absolute;
    inset: 13px auto 13px 0;
    width: 4px;
    border-radius: 999px;
    background: var(--accent);
    opacity: 0.78;
}
.ops-card-main {
    min-width: 0;
    display: grid;
    gap: 7px;
}
.ops-card-titleline {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
}
.ops-card-titleline input[type="checkbox"] {
    margin-top: 5px;
    flex: 0 0 auto;
}
.ops-card-title {
    min-width: 0;
}
.ops-card-title strong {
    display: block;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.65;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ops-card-title small,
.ops-card-desc {
    color: var(--text-muted);
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ops-card-meta,
.ops-chip-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.ops-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}
.ops-meta-chip i {
    font-size: 11px;
    color: var(--accent);
}
.ops-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}
.ops-status-active {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success);
}
.ops-status-draft {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning);
}
.ops-status-pending {
    background: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info);
}
.ops-status-archived {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-muted);
}
.ops-status-critical {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger);
}
.ops-package-summary {
    display: grid;
    gap: 7px;
    min-width: 0;
}
.ops-package-line {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 12px;
}
.ops-package-line i {
    color: var(--accent);
    width: 16px;
    text-align: center;
}
.ops-package-line span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ops-card-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(70px, 1fr));
    gap: 7px;
}
.ops-metric-box {
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 14px;
    background: var(--bg-tertiary);
    padding: 8px;
    min-height: 54px;
}
.ops-metric-box span {
    display: block;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 900;
    margin-bottom: 2px;
}
.ops-metric-box strong {
    display: block;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.4;
}
.ops-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 150px;
}
.ops-card-actions .btn {
    min-height: 32px;
}
.ops-doc-card {
    grid-template-columns: minmax(260px, 1.2fr) minmax(220px, 0.8fr) minmax(170px, 0.6fr) auto;
}
.ops-doc-card.ops-checklist-card:before {
    background: var(--success);
}
.ops-doc-card.ops-sop-card:before {
    background: var(--accent);
}
.ops-doc-secondary {
    display: grid;
    gap: 8px;
}
.ops-doc-counts {
    display: grid;
    grid-template-columns: repeat(2, minmax(72px, 1fr));
    gap: 7px;
}
.ops-mini-count {
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 14px;
    background: var(--bg-tertiary);
    padding: 7px 8px;
    line-height: 1.45;
}
.ops-mini-count span {
    display: block;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 900;
}
.ops-mini-count strong {
    display: block;
    color: var(--text-primary);
    font-size: 13px;
}
.library-page .tag-mini,
.library-page .tag-chip {
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 800;
}
.library-page .form-group label {
    margin-bottom: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 900;
}
.ops-package-panel,
.ops-message-package,
.ops-taxonomy-create,
.ops-checklist-row,
.ops-file-card {
    border-color: rgba(148, 163, 184, 0.3);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.025);
}
.ops-package-head {
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.32);
}
.ops-checklist-row {
    counter-increment: checklistRow;
    position: relative;
    padding-top: 16px;
}
.ops-checklist-row:before {
    content: counter(checklistRow);
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--accent-light);
    color: var(--accent);
    font-size: 11px;
    font-weight: 900;
}
.ops-checklist-builder {
    counter-reset: checklistRow;
}
.ops-checklist-row-head {
    padding-inline-start: 32px;
}
.ops-tax-card {
    min-height: 130px;
    display: grid;
    align-content: start;
    gap: 9px;
}
.ops-tax-card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
}
.ops-tax-card h4:before {
    content: "";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--warning);
}
.ajax-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.ajax-pagination button {
    border-radius: 999px !important;
    min-width: 34px;
}
.ops-loading-card {
    min-height: 130px;
    border-radius: 18px;
    background: linear-gradient(90deg, var(--bg-tertiary), var(--bg-secondary), var(--bg-tertiary));
    background-size: 220% 100%;
    animation: opsLoading 1.2s ease-in-out infinite;
    border: 1px solid var(--border-color);
}
@keyframes opsLoading {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -220% 0;
    }
}
@media (max-width: 1180px) {
    .ops-overview-strip {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
    }
    .ops-actionak-card,
    .ops-doc-card {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
    .ops-card-actions {
        grid-column: 1/-1;
        justify-content: flex-start;
        min-width: 0;
    }
}
@media (max-width: 760px) {
    .library-tabs {
        position: relative;
        top: auto;
        overflow: auto;
        flex-wrap: nowrap;
        scroll-snap-type: x mandatory;
    }
    .library-tabs .tab {
        scroll-snap-align: start;
        flex: 0 0 auto;
    }
    .ops-overview-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ops-overview-card {
        min-height: 82px;
        padding: 11px;
    }
    .ops-overview-card strong {
        font-size: 19px;
    }
    .ops-actionak-card,
    .ops-doc-card {
        grid-template-columns: 1fr;
        padding: 12px;
    }
    .ops-card-metrics,
    .ops-doc-counts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ops-card-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
    .ops-list-toolbar {
        align-items: stretch;
    }
    .ops-list-toolbar .compact-search {
        max-width: 100%;
        width: 100%;
    }
    .ops-package-line span,
    .ops-card-title strong {
        white-space: normal;
    }
}
@media (max-width: 480px) {
    .ops-overview-strip {
        grid-template-columns: 1fr;
    }
    .ops-card-metrics,
    .ops-doc-counts {
        grid-template-columns: 1fr;
    }
}
.ops-ready-package {
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
    background: linear-gradient(180deg, #fff, rgba(248, 250, 252, 0.82));
    margin: 16px 0;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}
.ops-ready-toolbar {
    margin: 10px 0 14px;
    gap: 8px;
    flex-wrap: wrap;
}
.ops-ready-assets {
    display: grid;
    gap: 12px;
}
.ops-ready-row {
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 16px;
    background: #fff;
    padding: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.035);
}
.ops-ready-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.ops-ready-row-head strong {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: var(--text);
}
.ops-ready-row .monospace,
.ready-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    direction: ltr;
    text-align: left;
}
.ready-view-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 12px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}
.ready-view-card h4 {
    margin: 0 0 8px;
    font-size: 1rem;
}
.ready-view-card .actions-wrap {
    margin-top: 10px;
}
.ready-text {
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px;
    line-height: 1.9;
    white-space: normal;
}
.ready-code {
    display: block;
    background: #0f172a;
    color: #f8fafc;
    border-radius: 12px;
    padding: 12px;
    overflow: auto;
    white-space: pre-wrap;
    line-height: 1.7;
}
.ready-view-thumb {
    max-width: 100%;
    max-height: 280px;
    border-radius: 12px;
    border: 1px solid var(--border);
    display: block;
    margin: 8px 0;
    object-fit: contain;
    background: #f8fafc;
}
.quick-options .quick-create {
    font-weight: 700;
    color: var(--primary);
}
.tag-chip button {
    margin-inline-start: 6px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-weight: 800;
}
.ops-actionak-card .ops-card-meta .ops-mini-chip {
    background: #fff7ed;
    color: #9a3412;
    border-color: #fed7aa;
}
.ops-ready-package .ops-package-head strong {
    display: flex;
    align-items: center;
    gap: 8px;
}
@media (max-width: 768px) {
    .ops-ready-row .ops-field-grid {
        grid-template-columns: 1fr;
    }
    .ops-ready-toolbar .btn {
        width: calc(50% - 6px);
        justify-content: center;
    }
    .ready-view-card {
        padding: 12px;
    }
}
.ops-hidden-legacy-tag-field {
    display: none !important;
}
.ops-unified-picker-field {
    display: grid;
    gap: 8px;
}
.ops-unified-picker-field .ops-inline-tags {
    margin-top: 0;
}
.ops-picker-button.is-empty span {
    color: var(--text-muted);
}
.ops-help-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-primary);
    color: var(--accent);
    font-weight: 800;
    cursor: pointer;
    margin-inline-start: 6px;
    vertical-align: middle;
    transition: 0.15s ease;
}
.ops-help-dot:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-1px);
}
.ops-actionak-list-compact {
    display: grid;
    gap: 8px;
}
.ops-actionak-card-compact {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) auto !important;
    gap: 7px 12px !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    background: var(--bg-primary) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.035) !important;
}
.ops-actionak-card-compact:before {
    inset: 10px auto 10px 0 !important;
    width: 3px !important;
}
.ops-actionak-card-compact:hover {
    transform: none !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.075) !important;
}
.ops-actionak-mainline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.ops-actionak-mainline strong {
    font-size: 0.94rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.ops-actionak-subline {
    grid-column: 1/2;
    display: flex;
    align-items: center;
    gap: 6px 12px;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.7;
}
.ops-actionak-subline span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ops-actionak-desc {
    grid-column: 1/-1;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ops-actionak-card-compact .ops-card-actions {
    grid-column: 2/3;
    grid-row: 1/3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    min-width: max-content;
}
.ops-actionak-card-compact .ops-card-actions .btn {
    padding: 6px 8px;
    font-size: 0.75rem;
}
.ops-actionak-card-compact .tag-mini {
    padding: 3px 8px;
    font-size: 0.72rem;
}
.ready-file-preview {
    margin-top: 8px;
}
.ready-file-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    padding: 8px;
}
.ready-file-tile img {
    width: 76px;
    height: 56px;
    border-radius: 9px;
    object-fit: cover;
    background: #fff;
    border: 1px solid var(--border-color);
}
.ready-file-tile i {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 20px;
}
.ready-file-tile div {
    min-width: 0;
    flex: 1;
}
.ready-file-tile strong {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.86rem;
}
.ready-file-tile small {
    color: var(--text-muted);
}
.ready-view-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.ready-view-head h4 {
    margin: 0 !important;
}
.ready-view-head span {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 4px 8px;
    background: var(--bg-tertiary);
    font-size: 0.76rem;
    color: var(--text-muted);
}
.ready-code-card .ready-code {
    font-size: 0.88rem;
    tab-size: 2;
}
.ready-code .tok-key {
    color: #93c5fd;
    font-weight: 700;
}
.ready-code .tok-str {
    color: #86efac;
}
.ready-code .tok-num {
    color: #fde68a;
}
.ready-code .tok-tag {
    color: #f9a8d4;
}
.ops-image-editor-toolbar [data-undo],
.ops-image-editor-toolbar [data-redo] {
    min-width: 68px;
}
.ops-image-editor-toolbar button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.tox .tox-edit-area iframe {
    background: #fff !important;
}
@media (max-width: 900px) {
    .ops-actionak-card-compact {
        grid-template-columns: 1fr !important;
    }
    .ops-actionak-card-compact .ops-card-actions {
        grid-column: 1/-1;
        grid-row: auto;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .ops-actionak-subline {
        grid-column: 1/-1;
    }
    .ops-actionak-subline span {
        max-width: 100%;
    }
}
.ops-import-help-body {
    display: grid;
    gap: 14px;
    line-height: 1.9;
}
.ops-help-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.ops-help-grid > div {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-secondary);
    padding: 10px 12px;
}
.ops-help-grid strong {
    display: block;
    color: var(--text);
    margin-bottom: 4px;
}
.ops-help-grid span {
    display: block;
    color: var(--text-muted);
    font-size: 0.84rem;
}
.ops-import-help-body code {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    padding: 2px 6px;
}
.ops-import-help-body .ready-code {
    max-height: 260px;
    white-space: pre-wrap;
}
#checklistActionOptions,
#checklistImportActionOptions,
.cl-linked-action-options {
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 16px;
    background: var(--bg-primary);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    padding: 8px;
    max-height: 360px;
    overflow: auto;
    z-index: 30;
}
#checklistActionOptions button,
#checklistImportActionOptions button,
.cl-linked-action-options button {
    width: 100%;
    border: 0;
    border-radius: 12px;
    background: transparent;
    text-align: right;
    padding: 10px 12px;
    display: grid;
    gap: 4px;
    cursor: pointer;
    transition: 0.15s ease;
}
#checklistActionOptions button:hover,
#checklistImportActionOptions button:hover,
.cl-linked-action-options button:hover {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.08));
    transform: translateX(-2px);
}
#checklistActionOptions strong,
#checklistImportActionOptions strong,
.cl-linked-action-options strong {
    font-weight: 800;
    color: var(--text);
}
#checklistActionOptions small,
#checklistImportActionOptions small,
.cl-linked-action-options small {
    color: var(--text-muted);
    line-height: 1.7;
}
.checklist-action-option span {
    font-size: 0.76rem;
    color: var(--accent);
    font-weight: 700;
}
.quick-option-clear {
    border: 1px dashed var(--border-color) !important;
    color: var(--text-muted) !important;
    background: var(--bg-secondary) !important;
}
.ops-checklist-row-aligned {
    position: relative;
    border: 1px solid var(--border-color);
    background: linear-gradient(180deg, var(--bg-primary), rgba(248, 250, 252, 0.78));
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
    transition:
        box-shadow 0.15s ease,
        transform 0.15s ease;
}
.ops-checklist-row-aligned:hover {
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.075);
}
.ops-checklist-row.dragging {
    opacity: 0.55;
    box-shadow: 0 18px 40px rgba(59, 130, 246, 0.18);
    transform: scale(0.995);
}
.ops-checklist-row-head {
    gap: 8px;
    flex-wrap: wrap;
}
.ops-drag-handle {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: grab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ops-drag-handle:active {
    cursor: grabbing;
}
.ops-source-pill,
.ops-import-token {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(16, 185, 129, 0.22);
    background: rgba(16, 185, 129, 0.08);
    color: #047857;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 0.75rem;
    font-weight: 800;
}
.ops-import-token {
    border-color: rgba(245, 158, 11, 0.25);
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
}
.ops-imported-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 999px;
    background: #10b981;
    color: #fff;
    font-size: 0.72rem;
    margin-inline-start: 5px;
    vertical-align: middle;
    box-shadow: 0 3px 9px rgba(16, 185, 129, 0.25);
}
.checklist-actionak-aligned-grid .form-group label {
    display: flex;
    align-items: center;
    gap: 4px;
}
.cl-risk-control {
    margin-top: 0;
}
.cl-risk-control button {
    min-width: 58px;
}
.ops-checklist-row .quick-search {
    background: #fff;
}
.ops-create-accordion-card {
    overflow: hidden;
}
.ops-create-accordion-toggle {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.08), rgba(16, 185, 129, 0.06));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    color: var(--text);
    text-align: right;
}
.ops-create-accordion-toggle span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 900;
}
.ops-create-accordion-toggle small {
    margin-inline-start: auto;
    color: var(--text-muted);
    font-size: 0.78rem;
}
.ops-create-accordion-toggle .fa-plus-circle {
    color: var(--accent);
}
.ops-create-accordion-toggle .fa-chevron-down {
    transition: 0.18s ease;
}
.ops-create-accordion-card.open .ops-create-accordion-toggle .fa-chevron-down {
    transform: rotate(180deg);
}
.ops-create-accordion-card.collapsed {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.035);
}
.ops-create-accordion-card.collapsed .card-body {
    display: none !important;
}
.ops-create-accordion-card.open .card-body {
    display: block;
}
.tox .tox-edit-area iframe#sopDocument_ifr {
    background: #fff !important;
}
@media (max-width: 760px) {
    .ops-help-grid {
        grid-template-columns: 1fr;
    }
    .ops-create-accordion-toggle {
        align-items: flex-start;
        flex-direction: column;
    }
    .ops-create-accordion-toggle small {
        margin-inline-start: 0;
    }
    .checklist-actionak-aligned-grid {
        grid-template-columns: 1fr !important;
    }
    .ops-checklist-row-head {
        align-items: flex-start;
    }
}
.ops-inner-create-accordion {
    border: 1px solid var(--border-color);
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-primary);
    margin-bottom: 16px;
    box-shadow: 0 7px 20px rgba(15, 23, 42, 0.035);
}
.ops-inner-create-accordion .ops-create-accordion-toggle {
    border-bottom: 1px solid var(--border-color);
}
.ops-inner-create-accordion.collapsed .ops-inner-create-body {
    display: none !important;
}
.ops-inner-create-accordion.open .ops-inner-create-body {
    display: block;
}
.ops-inner-create-body {
    padding: 16px;
}
.ops-inner-create-accordion.open .ops-create-accordion-toggle .fa-chevron-down {
    transform: rotate(180deg);
}
.ops-actionak-list-compact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    contain: layout paint;
    min-height: 132px;
    transition:
        opacity 0.16s ease,
        filter 0.16s ease;
}
.ops-actionak-loading .ops-actionak-list-compact {
    opacity: 0.76;
    filter: saturate(0.92);
}
.ops-actionak-list-compact.is-ready {
    animation: opsListIn 0.18s ease-out both;
}
.ops-actionak-card-compact {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "top actions" "meta actions" "tags actions" !important;
    gap: 5px 10px !important;
    padding: 9px 11px !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg, var(--bg-primary), rgba(248, 250, 252, 0.84)) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.035) !important;
    min-height: 74px !important;
    transform: none !important;
    will-change: opacity;
}
.ops-actionak-card-compact:hover {
    box-shadow: 0 7px 20px rgba(15, 23, 42, 0.07) !important;
    border-color: rgba(59, 130, 246, 0.24) !important;
    transform: none !important;
}
.ops-actionak-line-top {
    grid-area: top;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.ops-actionak-line-top strong {
    font-size: 0.92rem;
    font-weight: 850;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 420px;
}
.ops-mini-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ops-mini-check input {
    width: 15px;
    height: 15px;
    accent-color: var(--accent);
}
.ops-risk-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.05);
    font-size: 0.72rem;
    font-weight: 750;
    color: var(--text-muted);
    white-space: nowrap;
}
.ops-actionak-line-meta {
    grid-area: meta;
    display: flex;
    align-items: center;
    gap: 5px 12px;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.55;
    min-width: 0;
}
.ops-actionak-line-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ops-actionak-line-meta i {
    opacity: 0.72;
}
.ops-actionak-line-tags {
    grid-area: tags;
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 19px;
}
.ops-actionak-card-compact .ops-card-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    align-self: center;
    min-width: max-content;
}
.ops-actionak-card-compact .ops-card-actions .btn {
    padding: 5px 7px !important;
    font-size: 0.72rem !important;
    border-radius: 9px;
}
.ops-actionak-card-compact .tag-mini {
    padding: 2px 7px;
    font-size: 0.7rem;
}
.ops-skeleton-row {
    height: 74px;
    position: relative;
    overflow: hidden;
}
.ops-skeleton-row:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.66), transparent);
    transform: translateX(100%);
    animation: opsSkel 1.05s infinite;
}
@keyframes opsSkel {
    to {
        transform: translateX(-100%);
    }
}
@keyframes opsListIn {
    from {
        opacity: 0.72;
        transform: translateY(3px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.ops-workflow-link-builder {
    border: 1px solid rgba(59, 130, 246, 0.16);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.055), rgba(16, 185, 129, 0.045));
    border-radius: 18px;
    padding: 14px;
    margin: 12px 0;
}
.ops-workflow-builder-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}
.ops-workflow-builder-title strong {
    font-weight: 900;
    color: var(--text);
    display: flex;
    gap: 7px;
    align-items: center;
}
.ops-workflow-builder-title small {
    color: var(--text-muted);
    line-height: 1.8;
    max-width: 760px;
}
.quick-entity-option {
    display: grid !important;
    gap: 4px !important;
    text-align: right !important;
}
.quick-entity-option.active {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.12), rgba(59, 130, 246, 0.08)) !important;
    border-right: 3px solid var(--success) !important;
}
.ops-fixed-pill {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    font-weight: 800;
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.routine-output-picker .choice-button-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.routine-output-picker .choice-text-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 8px 11px;
}
.routine-output-picker .choice-text-button.active {
    background: linear-gradient(135deg, var(--accent), #10b981);
    color: #fff;
    border-color: transparent;
}
.library-tabs {
    gap: 6px;
    align-items: center;
}
.library-tabs .tab {
    border-radius: 12px;
    font-weight: 800;
}
.library-tabs .tab.active {
    box-shadow: 0 8px 22px rgba(59, 130, 246, 0.16);
}
#checklistActionOptions,
#checklistImportActionOptions,
.cl-linked-action-options,
#workflowSopOptions,
#workflowChecklistOptions,
#workflowActionOptions {
    border: 1px solid rgba(59, 130, 246, 0.16) !important;
    border-radius: 16px !important;
    background: var(--bg-primary) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.13) !important;
    padding: 8px !important;
    max-height: 360px !important;
    overflow: auto !important;
    z-index: 70 !important;
}
#checklistActionOptions button,
#checklistImportActionOptions button,
.cl-linked-action-options button,
#workflowSopOptions button,
#workflowChecklistOptions button,
#workflowActionOptions button button {
    width: 100%;
    border: 0;
    border-radius: 12px;
    background: transparent;
    text-align: right;
    padding: 10px 12px;
    display: grid;
    gap: 4px;
    cursor: pointer;
    transition: 0.14s ease;
    color: var(--text);
}
#checklistActionOptions button:hover,
#checklistImportActionOptions button:hover,
.cl-linked-action-options button:hover,
#workflowSopOptions button:hover,
#workflowChecklistOptions button:hover,
#workflowActionOptions button:hover button:hover {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.08));
    transform: translateX(-2px);
}
@media (max-width: 780px) {
    .ops-actionak-card-compact {
        grid-template-columns: 1fr !important;
        grid-template-areas: "top" "meta" "tags" "actions" !important;
    }
    .ops-actionak-card-compact .ops-card-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .ops-actionak-line-meta span {
        max-width: 100%;
    }
    .ops-workflow-builder-title {
        display: block;
    }
    .library-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .library-tabs .tab {
        white-space: nowrap;
    }
}
.ops-workflow-phase-builder {
    padding: 18px !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(16, 185, 129, 0.05)) !important;
    border: 1px solid rgba(59, 130, 246, 0.18) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.055) !important;
}
.ops-workflow-principles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 14px;
}
.ops-workflow-principles span {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--bg-primary);
    border: 1px solid rgba(148, 163, 184, 0.18);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text);
}
.ops-workflow-phase-list {
    display: grid;
    gap: 12px;
    margin: 12px 0;
}
.ops-workflow-phase-card {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 18px;
    background: var(--bg-primary);
    padding: 13px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}
.ops-workflow-phase-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.ops-workflow-phase-head strong {
    font-size: 0.96rem;
    font-weight: 900;
    color: var(--text);
}
.ops-workflow-phase-head small {
    display: block;
    color: var(--text-muted);
    margin-top: 2px;
}
.ops-phase-title {
    margin-bottom: 10px !important;
    font-weight: 800;
}
.ops-phase-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.ops-phase-picker {
    position: relative;
}
.ops-phase-picker label {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 800;
    margin-bottom: 5px;
    display: block;
}
.ops-phase-options {
    z-index: 85 !important;
}
.ops-phase-selected {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px dashed rgba(148, 163, 184, 0.25);
}
.ops-phase-selected > strong {
    font-size: 0.78rem;
    color: var(--text-muted);
}
.ops-phase-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 9px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.14);
    font-size: 0.77rem;
    font-weight: 800;
    color: var(--text);
}
.ops-phase-chip button {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 900;
}
.ops-phase-warn,
.ops-option-warning {
    color: #b45309;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 0.7rem;
    font-weight: 800;
    margin-inline-start: 4px;
}
.ops-workflow-builder-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0;
}
.ops-workflow-preview {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.checklist-action-option.active,
.quick-entity-option.active {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.12), rgba(59, 130, 246, 0.08)) !important;
    border-right: 3px solid var(--success) !important;
}
.ops-actionak-list-compact {
    content-visibility: auto;
    contain-intrinsic-size: 420px;
    transition: none !important;
}
.ops-actionak-list-compact.is-skeleton {
    opacity: 1;
}
.ops-actionak-loading .ops-actionak-list-compact {
    filter: none !important;
    opacity: 1 !important;
}
.ops-actionak-card-compact {
    transition:
        box-shadow 0.12s ease,
        border-color 0.12s ease !important;
}
.ops-actionak-card-compact * {
    direction: rtl;
}
#sopDocument_ifr img,
.tox-edit-area iframe img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
}
@media (max-width: 980px) {
    .ops-workflow-principles,
    .ops-phase-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 680px) {
    .ops-workflow-principles,
    .ops-phase-grid {
        grid-template-columns: 1fr;
    }
    .ops-workflow-phase-head {
        display: block;
    }
    .ops-workflow-phase-head .row-actions {
        margin-top: 8px;
    }
    .ops-workflow-builder-title {
        display: block;
    }
}
.checklist-action-option {
    width: 100%;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: linear-gradient(135deg, var(--bg-primary), rgba(248, 250, 252, 0.78)) !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
    text-align: right !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045) !important;
    color: var(--text) !important;
    transition:
        transform 0.14s ease,
        box-shadow 0.14s ease,
        border-color 0.14s ease,
        background 0.14s ease !important;
}
.checklist-action-option:hover,
.checklist-action-option:focus {
    transform: translateY(-1px) !important;
    border-color: rgba(59, 130, 246, 0.24) !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08) !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.065), rgba(16, 185, 129, 0.055)) !important;
    outline: none !important;
}
.checklist-action-option.active {
    border-color: rgba(16, 185, 129, 0.32) !important;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(59, 130, 246, 0.07)) !important;
}
.checklist-action-option .cao-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent);
}
.checklist-action-option .cao-main {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.checklist-action-option strong {
    font-weight: 850;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.checklist-action-option small {
    color: var(--text-muted);
    line-height: 1.55;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.checklist-action-option .cao-meta,
.checklist-action-option > span:not(.cao-icon):not(.cao-main) {
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--accent);
    white-space: nowrap;
    background: rgba(59, 130, 246, 0.08);
    border-radius: 999px;
    padding: 4px 8px;
}
.quick-empty {
    border: 1px dashed rgba(148, 163, 184, 0.45);
    background: rgba(248, 250, 252, 0.8);
    border-radius: 14px;
    padding: 14px;
    color: var(--text-muted);
    text-align: center;
}
.ops-actionak-list-compact {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    min-height: 64px;
    contain: content;
}
.ops-actionak-list-compact.is-skeleton {
    opacity: 0.68;
}
.ops-actionak-stable-loading .ops-actionak-list-compact {
    opacity: 0.84;
    pointer-events: none;
}
.ops-actionak-card-compact {
    display: grid !important;
    grid-template-columns: minmax(220px, 1.2fr) minmax(260px, 1.4fr) minmax(140px, 0.75fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    border-radius: 14px !important;
    min-height: 56px !important;
    box-shadow: 0 5px 15px rgba(15, 23, 42, 0.045) !important;
    border: 1px solid rgba(15, 23, 42, 0.07) !important;
    background: var(--bg-primary) !important;
}
.ops-actionak-line-top,
.ops-actionak-line-meta,
.ops-actionak-line-tags,
.ops-card-actions {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0;
}
.ops-actionak-line-top strong {
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ops-actionak-line-meta span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
    color: var(--text-muted);
    font-size: 0.82rem;
}
.ops-card-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
}
.ops-card-actions .btn {
    white-space: nowrap;
}
.ops-skeleton-row {
    height: 56px;
    position: relative;
    overflow: hidden;
}
.ops-skeleton-row:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    animation: opsSkeleton 1.1s infinite;
}
@keyframes opsSkeleton {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}
.ops-workflow-phase-builder {
    border: 1px solid rgba(59, 130, 246, 0.14) !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.045), rgba(16, 185, 129, 0.035)) !important;
    border-radius: 20px !important;
    padding: 16px !important;
}
.ops-workflow-principles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 14px;
}
.ops-workflow-principles span {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    background: rgba(255, 255, 255, 0.72);
    border-radius: 13px;
    padding: 9px 10px;
    font-weight: 750;
    color: var(--text);
    font-size: 0.82rem;
}
.ops-phase-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: var(--bg-primary);
    border-radius: 18px;
    padding: 13px;
    margin-bottom: 10px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
}
.ops-phase-card.drag-over {
    border-color: rgba(59, 130, 246, 0.38);
    background: rgba(59, 130, 246, 0.055);
}
.ops-phase-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.ops-phase-head strong {
    display: flex;
    align-items: center;
    gap: 7px;
}
.ops-phase-body {
    display: grid;
    gap: 10px;
}
.ops-phase-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.ops-phase-selected {
    display: grid;
    gap: 6px;
}
.ops-phase-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    padding: 8px 10px;
    background: rgba(248, 250, 252, 0.78);
    cursor: grab;
}
.ops-phase-chip:active {
    cursor: grabbing;
}
.ops-phase-chip.is-dragging {
    opacity: 0.6;
}
.ops-drag-handle {
    color: var(--text-muted);
    cursor: grab;
}
.ops-workflow-builder-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.ops-workflow-preview {
    border-radius: 14px;
    border: 1px dashed rgba(59, 130, 246, 0.24);
    background: rgba(248, 250, 252, 0.8);
    padding: 12px;
    color: var(--text-muted);
}
@media (max-width: 980px) {
    .ops-actionak-card-compact {
        grid-template-columns: 1fr !important;
    }
    .ops-card-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .ops-workflow-principles,
    .ops-phase-picker-grid {
        grid-template-columns: 1fr;
    }
    .checklist-action-option {
        grid-template-columns: 28px minmax(0, 1fr);
    }
}
.ops-workflow-phase-card {
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: var(--bg-primary) !important;
    border-radius: 18px !important;
    padding: 13px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055) !important;
}
.ops-workflow-phase-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.ops-workflow-phase-head strong {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 900;
}
.ops-workflow-phase-head small {
    display: block;
    color: var(--text-muted);
    margin-top: 3px;
}
.ops-phase-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0;
}
.ops-phase-options {
    z-index: 90;
}
.ops-option-warning,
.ops-phase-warn {
    color: #b45309;
    background: rgba(245, 158, 11, 0.12);
    border-radius: 999px;
    padding: 3px 7px;
    font-size: 0.72rem;
    font-weight: 800;
    margin-inline-start: 6px;
}
.ops-phase-selected.drag-over {
    border-color: rgba(59, 130, 246, 0.38) !important;
    background: rgba(59, 130, 246, 0.055) !important;
    border-radius: 14px;
    padding: 8px;
}
@media (max-width: 980px) {
    .ops-phase-grid {
        grid-template-columns: 1fr;
    }
}
.wrap-control {
    flex-wrap: nowrap !important;
}
.tox .tox-edit-area iframe#sopDocument_ifr {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
}
.ops-admin-backup-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(59, 130, 246, 0.16);
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.06), rgba(16, 185, 129, 0.05));
}
.ops-admin-backup-bar small {
    color: var(--text-muted);
    line-height: 1.7;
}
.routine-workflow-picker-modal {
    max-width: 720px !important;
}
.quick-entity-option,
.workflow-run-options .quick-entity-option,
#startWorkflowSelectButtons .quick-entity-option {
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 14px !important;
    background: var(--bg-primary) !important;
    padding: 10px 12px !important;
    margin: 0 0 7px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 3px 10px !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04) !important;
    transition: 0.15s ease !important;
}
.quick-entity-option:hover,
.workflow-run-options .quick-entity-option:hover,
#startWorkflowSelectButtons .quick-entity-option:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(59, 130, 246, 0.32) !important;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.08), rgba(16, 185, 129, 0.05)) !important;
}
.quick-entity-option strong {
    font-weight: 850;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quick-entity-option small {
    color: var(--text-muted);
    line-height: 1.6;
}
.checklist-action-option {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 14px !important;
    background: var(--bg-primary) !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 10px 11px !important;
    margin-bottom: 7px !important;
    text-align: right !important;
    box-shadow: 0 5px 15px rgba(15, 23, 42, 0.035) !important;
    cursor: pointer !important;
    transition: 0.15s ease !important;
}
.checklist-action-option:hover,
.checklist-action-option.active {
    border-color: rgba(16, 185, 129, 0.35) !important;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.1), rgba(59, 130, 246, 0.06)) !important;
}
.cao-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent);
}
.cao-main {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.cao-main strong {
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cao-main small {
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cao-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.04);
    padding: 3px 8px;
}
.routine-plan-choice {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}
.routine-plan-choice button {
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 999px;
    background: var(--bg-primary);
    padding: 8px 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-weight: 800;
}
.routine-plan-choice button.active {
    border-color: rgba(16, 185, 129, 0.45);
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.12), rgba(59, 130, 246, 0.08));
    color: var(--success);
}
.ops-extra-bulk-tools {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.72);
    padding: 10px;
    margin: 10px 0 12px;
}
.ops-workflow-card-list {
    display: grid;
    gap: 9px;
    padding: 10px;
}
.ops-workflow-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    background: var(--bg-primary);
    padding: 12px 14px;
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.045);
}
.ops-workflow-card-main {
    min-width: 0;
}
.ops-workflow-card-main strong {
    display: block;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ops-workflow-card-main p {
    margin: 3px 0 0;
    color: var(--text-muted);
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ops-workflow-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 0.82rem;
}
@media (max-width: 760px) {
    .wrap-control {
        flex-wrap: wrap !important;
    }
    .ops-workflow-card {
        grid-template-columns: 1fr;
    }
    .ops-workflow-card .row-actions {
        justify-content: flex-start;
    }
    .ops-admin-backup-bar {
        display: grid;
    }
    .checklist-action-option {
        grid-template-columns: 30px minmax(0, 1fr);
    }
}
#routineWorkflowPickerModal .routine-workflow-picker-modal {
    max-width: 620px !important;
    width: min(620px, calc(100vw - 28px)) !important;
}
#routineWorkflowPickerModal .quick-options {
    max-height: 390px;
    overflow: auto;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.72);
}
#routineWorkflowPickerModal .quick-entity-option,
.quick-entity-option {
    min-height: 54px;
}
#sopDocument_ifr {
    margin-left: 12px !important;
    margin-right: 12px !important;
    width: calc(100% - 24px) !important;
    box-sizing: border-box !important;
}
.ops-checklist-row .form-group[data-imported="1"] {
    position: relative;
    border-color: rgba(16, 185, 129, 0.22);
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.055), rgba(255, 255, 255, 0.72));
    border-radius: 14px;
    padding: 8px;
}
.ops-checklist-row .form-group[data-imported="1"] label:after {
    content: "✓ وارد شد";
    display: inline-flex;
    margin-right: 7px;
    align-items: center;
    gap: 3px;
    color: #059669;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 0.72rem;
    font-weight: 800;
}
.checklist-risk-control {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    background: rgba(15, 23, 42, 0.035);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    padding: 4px;
}
.checklist-risk-control button {
    border: 0;
    background: transparent;
    border-radius: 10px;
    padding: 7px 9px;
    font-weight: 800;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: 0.15s ease;
}
.checklist-risk-control button.active {
    background: var(--bg-primary);
    color: var(--accent);
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.08);
}
.cl-linked-action-options button,
.checklist-action-option {
    font-family: inherit;
}
.cl-linked-action-options button {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    text-align: right;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: var(--bg-primary);
    padding: 9px 11px;
    margin-bottom: 7px;
    cursor: pointer;
    transition: 0.15s ease;
}
.cl-linked-action-options button:hover {
    border-color: rgba(59, 130, 246, 0.32);
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.08), rgba(16, 185, 129, 0.04));
    transform: translateY(-1px);
}
.cl-linked-action-options button strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cl-linked-action-options button small {
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ops-actionak-list.ops-actionak-list-compact {
    min-height: 96px;
    transition:
        opacity 0.16s ease,
        transform 0.16s ease;
}
.ops-actionak-list.ops-actionak-list-compact.is-skeleton {
    opacity: 0.74;
}
.ops-actionak-list.ops-actionak-list-compact.is-ready {
    opacity: 1;
    transform: none;
}
.ops-skeleton-row {
    height: 74px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        90deg,
        rgba(148, 163, 184, 0.1),
        rgba(148, 163, 184, 0.2),
        rgba(148, 163, 184, 0.1)
    ) !important;
    background-size: 180% 100% !important;
    animation: opsSkeleton 1s linear infinite;
}
.ops-skeleton-row > * {
    visibility: hidden;
}
@keyframes opsSkeleton {
    to {
        background-position: -180% 0;
    }
}
.ops-extra-bulk-tools {
    margin-top: 12px;
    margin-bottom: 12px;
}
.extra-bulk-actions {
    margin-top: 8px;
    justify-content: flex-start;
}
.ops-workflow-card-main p {
    max-width: 760px;
    -webkit-line-clamp: 2;
}
.ops-workflow-card {
    grid-template-columns: minmax(0, 1fr) auto;
}
.ops-workflow-card .row-actions {
    grid-column: auto;
}
.ops-workflow-card-meta span {
    background: rgba(15, 23, 42, 0.04);
    border-radius: 999px;
    padding: 4px 8px;
}
#startWorkflowSelectButtons .quick-entity-option {
    cursor: pointer;
    align-items: center;
}
.workflow-run-options .quick-empty {
    padding: 14px;
    text-align: center;
    color: var(--text-muted);
}
@media (max-width: 720px) {
    #routineWorkflowPickerModal .routine-workflow-picker-modal {
        width: calc(100vw - 16px) !important;
    }
    .checklist-risk-control {
        flex-wrap: wrap !important;
    }
    .ops-workflow-card {
        grid-template-columns: 1fr;
    }
}
.ops-hidden-compat-field {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
}
.checklist-action-option {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    text-align: right !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
    margin: 5px 0 !important;
    color: var(--text) !important;
    cursor: pointer !important;
    transition:
        background 0.14s ease,
        transform 0.14s ease,
        border-color 0.14s ease !important;
}
.checklist-action-option:hover,
.checklist-action-option.active {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.09), rgba(16, 185, 129, 0.07)) !important;
    border-color: rgba(59, 130, 246, 0.22) !important;
    transform: translateX(-2px) !important;
}
.checklist-action-option .cao-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent);
}
.checklist-action-option .cao-main {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.checklist-action-option .cao-main strong,
.checklist-action-option > strong {
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.checklist-action-option .cao-main small,
.checklist-action-option > small {
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.checklist-action-option .cao-meta,
.checklist-action-option > span:last-child {
    font-size: 0.78rem;
    color: var(--text-muted);
    background: rgba(15, 23, 42, 0.05);
    border-radius: 999px;
    padding: 5px 8px;
    white-space: nowrap;
}
.workflow-run-extra-box {
    border: 1px solid rgba(59, 130, 246, 0.12);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.045), rgba(16, 185, 129, 0.035));
    border-radius: 18px;
    padding: 12px;
    margin-top: 12px;
}
.mini-file-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin-top: 8px;
}
.mini-file-preview .ops-file-card {
    padding: 10px;
    border-radius: 14px;
    background: var(--bg-primary);
    border: 1px solid rgba(15, 23, 42, 0.08);
}
.start-workflow-picker-modal {
    max-width: 620px !important;
}
.start-workflow-picker-modal .quick-options {
    position: static !important;
    display: block !important;
    max-height: 56vh !important;
    box-shadow: none !important;
    margin-top: 10px;
}
.start-workflow-picker-modal .quick-entity-option,
.workflow-run-options .quick-entity-option {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    margin: 5px 0 !important;
    padding: 10px 12px !important;
    text-align: right !important;
}
.start-workflow-picker-modal .quick-entity-option strong,
.workflow-run-options .quick-entity-option strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.start-workflow-picker-modal .quick-entity-option small,
.workflow-run-options .quick-entity-option small {
    color: var(--text-muted);
}
.start-workflow-picker-modal .quick-entity-option.active,
.workflow-run-options .quick-entity-option.active {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.12), rgba(59, 130, 246, 0.08)) !important;
    border-color: rgba(16, 185, 129, 0.28) !important;
}
.ops-workflow-card-list {
    display: grid;
    gap: 10px;
    padding: 12px;
}
.ops-workflow-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: var(--bg-primary);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}
.ops-workflow-card-main {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.ops-workflow-card-main strong {
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ops-workflow-card-main p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.84rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 640px;
}
.ops-workflow-card-meta {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
}
.ops-workflow-card-meta span:not(.ops-status-pill) {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.05);
    padding: 6px 9px;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.workflow-view-modal .workflow-view-title {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
}
.workflow-view-modal .workflow-view-phases {
    display: grid;
    gap: 10px;
}
.workflow-view-phase {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 12px;
    background: rgba(248, 250, 252, 0.75);
}
.workflow-view-phase h4 {
    margin: 0 0 8px;
    font-size: 1rem;
}
.workflow-view-phase ol {
    margin: 0;
    padding-right: 20px;
}
.workflow-view-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}
.workflow-view-timeline {
    display: grid;
    gap: 8px;
    max-height: 280px;
    overflow: auto;
}
.workflow-history-row {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    padding: 9px;
    background: var(--bg-primary);
    font-size: 0.85rem;
}
.settings-other-page {
    display: grid;
    gap: 16px;
}
.settings-page-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    border: 0 !important;
    margin: 0 !important;
}
.settings-backup-card {
    margin: 0 !important;
}
.wrap-control {
    flex-wrap: nowrap !important;
}
.ops-workflow-phase-card .row-actions [onclick*="setWorkflowPhaseMode"],
.ops-workflow-phase-card [onclick*="setWorkflowPhaseMode"] {
    display: none !important;
}
@media (max-width: 780px) {
    .ops-workflow-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .ops-workflow-card .row-actions {
        justify-content: flex-start;
    }
    .workflow-view-grid {
        grid-template-columns: 1fr;
    }
    .settings-page-strip {
        display: grid !important;
    }
    .checklist-action-option {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }
    .checklist-action-option .cao-meta {
        grid-column: 2;
    }
}
.ops-unified-upload-field {
    display: grid;
    gap: 8px;
}
.ops-unified-upload {
    display: flex;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
    gap: 10px;
    align-items: stretch;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.92), rgba(255, 255, 255, 0.98));
    padding: 10px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.045);
}
.ops-unified-upload .ops-upload-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.ops-upload-main {
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 16px;
    background: var(--bg-primary);
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 10px;
    text-align: right;
    padding: 13px 14px;
    cursor: pointer;
    color: var(--text);
    transition: 0.16s ease;
    min-height: 76px;
}
.ops-upload-main i {
    grid-row: 1/3;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent);
    font-size: 1.15rem;
}
.ops-upload-main strong {
    font-weight: 900;
    line-height: 1.5;
}
.ops-upload-main span {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.6;
}
.ops-upload-main:hover {
    border-color: rgba(59, 130, 246, 0.36);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(59, 130, 246, 0.08);
}
.ops-unified-upload .ops-paste-zone {
    min-height: 76px;
    margin: 0;
    border-radius: 16px;
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.24);
    align-items: center;
    justify-content: flex-start;
    line-height: 1.7;
}
.ops-unified-upload .ops-paste-zone i {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: rgba(16, 185, 129, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--success);
}
.ops-inline-tags {
    margin-top: 7px;
    min-height: 28px;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.ops-inline-tags .tag-chip {
    margin: 0;
}
.ops-sop-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.ops-sop-meta-grid .form-group {
    min-width: 0;
}
.ops-sop-meta-grid textarea {
    min-height: 76px;
    resize: vertical;
}
#tinymce {
    padding-inline: 0 !important;
}
.tox .tox-edit-area iframe#sopDocument_ifr {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
@media (max-width: 760px) {
    .ops-unified-upload {
        grid-template-columns: 1fr;
    }
    .ops-upload-main {
        min-height: 68px;
    }
    .ops-sop-meta-grid {
        grid-template-columns: 1fr !important;
    }
}
.ops-file-preview {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}
.ops-file-card {
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    background: rgba(255, 255, 255, 0.86) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    gap: 6px !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.035) !important;
}
.ops-file-card .ops-file-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ops-file-card .ops-file-head strong {
    font-size: 0.82rem;
    line-height: 1.6;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ops-file-card label {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-bottom: 0;
}
.ops-file-card .form-control {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 0.82rem;
}
.ops-file-card textarea.form-control {
    min-height: 48px;
}
.ops-file-card small {
    font-size: 0.74rem;
}
.ops-image-preview-shell {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    background: rgba(248, 250, 252, 0.8);
    border: 1px dashed rgba(148, 163, 184, 0.24);
    padding: 6px;
}
.ops-image-preview,
.ops-file-thumb {
    width: 76px !important;
    height: 56px !important;
    max-width: 76px !important;
    max-height: 56px !important;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    cursor: zoom-in;
    background: #fff;
}
.ops-image-preview-shell .ops-image-tools {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.ops-image-preview-shell .ops-image-tools .btn {
    padding: 5px 8px;
    font-size: 0.74rem;
}
.ops-editor-card,
.ops-file-preview-modal .ops-file-card {
    box-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
}
.ops-file-preview-modal .wide-modal {
    max-width: min(980px, 94vw);
}
.ops-large-preview-image {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    margin: auto;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18);
    background: #fff;
}
.mini-file-preview .ops-file-card {
    grid-template-columns: 1fr;
}
.upload-rules-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.upload-rules-head small {
    color: var(--text-muted);
    line-height: 1.8;
}
.upload-rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.upload-rule-card {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.88));
    padding: 10px;
    display: grid;
    gap: 8px;
}
.upload-rule-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 800;
    color: var(--text);
    cursor: pointer;
}
.upload-rule-toggle span {
    font-size: 0.86rem;
}
.upload-rule-toggle small {
    margin-inline-start: auto;
    color: var(--text-muted);
    direction: ltr;
}
.upload-rule-size {
    display: flex;
    align-items: center;
    gap: 6px;
}
.upload-rule-size .form-control {
    height: 34px;
    min-height: 34px;
    padding: 5px 7px;
}
.upload-rule-size em {
    font-style: normal;
    color: var(--text-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}
@media (max-width: 760px) {
    .upload-rules-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .ops-image-preview-shell {
        grid-template-columns: 64px minmax(0, 1fr);
    }
    .ops-image-preview,
    .ops-file-thumb {
        width: 64px !important;
        height: 48px !important;
        max-width: 64px !important;
        max-height: 48px !important;
    }
}
.workflow-run-file-card.ops-file-card-row,
.ops-file-card.ops-file-card-row {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px !important;
    padding: 8px !important;
    min-height: 72px;
}
.ops-file-thumb-button {
    width: 56px;
    height: 46px;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: zoom-in;
}
.ops-file-card-row .ops-file-thumb,
.workflow-run-file-card .ops-file-thumb {
    width: 56px !important;
    height: 46px !important;
    max-width: 56px !important;
    max-height: 46px !important;
    border-radius: 10px;
    object-fit: cover;
    display: block;
}
.ops-file-icon {
    width: 56px;
    height: 46px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, 0.045);
    color: var(--text-muted);
    border: 1px solid rgba(148, 163, 184, 0.22);
}
.ops-file-main {
    min-width: 0;
    display: grid;
    gap: 6px;
}
.ops-file-card-row .ops-file-head {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 8px;
    min-width: 0;
}
.ops-file-card-row .ops-file-head strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ops-file-card-row .ops-file-fields {
    display: grid;
    grid-template-columns: minmax(140px, 0.65fr) minmax(160px, 1fr);
    gap: 6px;
}
.ops-file-card-row .ops-file-fields .form-control {
    min-height: 32px;
    height: 32px;
}
.ops-file-card-row .ops-file-fields textarea.form-control {
    resize: vertical;
    min-height: 32px;
    height: 32px;
}
.ops-file-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex-wrap: wrap;
}
.task-advanced-filters {
    max-width: 100%;
    overflow: clip;
}
.task-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.task-filter-grid .form-control,
.task-filter-grid .site-picker-button,
.task-filter-grid .segmented-control {
    min-width: 0;
    max-width: 100%;
}
@media (max-width: 1100px) {
    .task-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 760px) {
    .task-filter-grid {
        grid-template-columns: 1fr;
    }
    .task-command-bar.mobile-filters-open {
        bottom: 86px;
        max-height: min(66vh, 500px);
    }
    .task-command-bar.mobile-filters-open + #taskMobileCommandDock,
    .task-command-bar.mobile-filters-open ~ #taskMobileCommandDock {
        pointer-events: auto;
    }
    .task-mobile-command-dock.open .task-mobile-command-panel {
        max-height: min(58vh, 420px);
    }
    .workflow-run-file-card.ops-file-card-row,
    .ops-file-card.ops-file-card-row {
        grid-template-columns: 48px minmax(0, 1fr);
    }
    .ops-file-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
    .ops-file-card-row .ops-file-fields {
        grid-template-columns: 1fr;
    }
    .ops-file-thumb-button,
    .ops-file-card-row .ops-file-thumb,
    .workflow-run-file-card .ops-file-thumb,
    .ops-file-icon {
        width: 48px !important;
        height: 42px !important;
        max-width: 48px !important;
        max-height: 42px !important;
    }
}
.muted-line {
    direction: rtl !important;
    text-align: right !important;
}
.role-picker-button {
    width: 100%;
    justify-content: space-between;
}
.role-picker-options {
    display: grid;
    gap: 8px;
}
.role-picker-option {
    align-items: center;
}
.workflow-create-topline,
.ops-workflow-create-card .form-inline {
    gap: 16px 18px !important;
    margin-bottom: 14px;
}
.ops-workflow-phase-card {
    padding: 14px !important;
}
.ops-workflow-phase-card .ops-phase-desc {
    margin-top: 8px;
    min-height: 56px;
}
.extra-task-bulk-card .ops-create-accordion-toggle {
    border-radius: inherit;
}
.extra-task-bulk-card.collapsed .card-body {
    display: none !important;
}
.extra-task-bulk-card.open .card-body {
    display: block !important;
}
.ops-extra-bulk-tools {
    display: grid;
    gap: 10px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.88), rgba(255, 255, 255, 0.94));
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 18px;
    padding: 12px;
}
.ops-extra-bulk-tools .bulk-extra-tags-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.ops-extra-bulk-tools .extra-bulk-actions {
    justify-content: space-between;
    gap: 8px;
    border-top: 1px dashed rgba(148, 163, 184, 0.22);
    padding-top: 10px;
}
.ops-card-metrics {
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}
.ops-actionak-subline .fa-coins,
.ops-actionak-line-meta .fa-coins {
    display: none !important;
}
.tox-tinymce.tox-fullscreen {
    z-index: 999999 !important;
}
.tox .tox-edit-area iframe#sopDocument_ifr {
    background: #fff !important;
}
.workflow-view-title {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
}
.workflow-view-title p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.85;
}
.workflow-view-phase-head {
    display: grid;
    gap: 4px;
    margin-bottom: 10px;
}
.workflow-view-phase-head h4 {
    margin: 0;
}
.workflow-view-phase-head p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.75;
}
.workflow-view-item-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-right: 20px;
}
.workflow-view-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    align-items: center;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    background: #fff;
    padding: 9px;
}
.workflow-view-item-row small {
    grid-column: 1/-1;
    color: var(--text-muted);
    line-height: 1.6;
}
.workflow-view-item-detail {
    margin: 6px 0 10px;
}
.workflow-inline-doc {
    border: 1px solid rgba(59, 130, 246, 0.14);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(255, 255, 255, 0.96));
    padding: 12px;
    display: grid;
    gap: 8px;
}
.workflow-inline-doc h4 {
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 7px;
}
.workflow-inline-doc ol {
    margin: 0;
    padding-right: 20px;
    display: grid;
    gap: 5px;
}
.workflow-inline-doc li small {
    display: block;
    color: var(--text-muted);
    line-height: 1.6;
}
.workflow-inline-doc-body {
    max-height: 360px;
    overflow: auto;
    line-height: 1.9;
}
.workflow-view-run-panel {
    border: 1px solid rgba(16, 185, 129, 0.18);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.07), rgba(59, 130, 246, 0.05));
    padding: 14px;
    margin: 14px 0;
    display: grid;
    gap: 10px;
}
.workflow-view-run-panel h4 {
    margin: 0 !important;
}
.workflow-view-run-panel .form-inline {
    gap: 12px;
}
.workflow-view-run-panel .ops-file-preview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
}
.workflow-view-run-panel .ops-file-card-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
}
.workflow-view-run-panel .ops-file-thumb {
    width: 68px !important;
    height: 50px !important;
}
.workflow-view-run-panel .ops-file-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}
.workflow-view-run-panel .ops-file-actions {
    display: flex;
    gap: 5px;
    align-items: center;
}
.workflow-view-grid {
    align-items: start;
}
.ops-package-summary .ops-package-line:empty {
    display: none;
}
.ops-workflow-card-meta .fa-coins {
    color: var(--warning);
}
@media (max-width: 760px) {
    .ops-extra-bulk-tools .bulk-extra-tags-panel {
        grid-template-columns: 1fr;
    }
    .workflow-view-item-row {
        grid-template-columns: 1fr;
    }
    .workflow-view-run-panel .ops-file-card-row {
        grid-template-columns: 56px minmax(0, 1fr);
    }
    .workflow-view-run-panel .ops-file-actions {
        grid-column: 1/-1;
    }
    .workflow-view-run-panel .ops-file-fields {
        grid-template-columns: 1fr;
    }
    .workflow-create-topline,
    .ops-workflow-create-card .form-inline {
        gap: 10px !important;
    }
}
.task-note-extra-box {
    margin-top: 0;
}
.task-note-extra-box .ops-unified-upload {
    display: flex;
    gap: 8px;
}
.task-desc-trigger.has-files::after {
    content: " • فایل دارد";
    font-size: 0.72rem;
    color: var(--success);
    margin-inline-start: 5px;
}
.workflow-run-extra-box .ops-file-preview,
.mini-file-preview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.ops-file-card.ops-file-card-row,
.workflow-run-file-card,
.task-note-file-card {
    display: flex !important;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    direction: ltr;
    justify-content: space-between;
    grid-template-columns: 56px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 8px 9px !important;
    min-height: 68px !important;
}
.ops-file-card-row .ops-file-thumb-button {
    width: 54px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 10px;
    overflow: hidden;
    cursor: zoom-in;
}
.ops-file-card-row .ops-file-thumb {
    width: 54px !important;
    height: 44px !important;
    max-width: 54px !important;
    max-height: 44px !important;
    object-fit: cover;
    border-radius: 10px;
}
.ops-file-card-row .ops-file-icon {
    width: 54px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.08);
    color: var(--accent);
}
.ops-file-card-row .ops-file-main {
    min-width: 0;
    display: grid;
    gap: 6px;
}
.ops-file-card-row .ops-file-head {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    min-width: 0;
}
.ops-file-card-row .ops-file-head strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-size: 0.82rem;
}
.ops-file-card-row .ops-file-head small {
    white-space: nowrap;
    color: var(--text-muted);
}
.ops-file-card-row .ops-file-fields {
    display: grid;
    grid-template-columns: minmax(120px, 0.75fr) minmax(160px, 1.25fr);
    gap: 6px;
}
.ops-file-card-row .ops-file-fields .form-control {
    min-height: 32px;
    height: 32px;
    padding: 5px 8px;
    font-size: 0.8rem;
}
.ops-file-card-row .ops-file-fields textarea.form-control {
    resize: vertical;
    min-height: 32px;
    height: 32px;
}
.ops-file-card-row .ops-file-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    white-space: nowrap;
}
@media (max-width: 680px) {
    .ops-file-card.ops-file-card-row,
    .workflow-run-file-card,
    .task-note-file-card {
        grid-template-columns: 48px minmax(0, 1fr) !important;
    }
    .ops-file-card-row .ops-file-actions {
        grid-column: 1/-1;
        justify-content: flex-start;
    }
    .ops-file-card-row .ops-file-fields {
        grid-template-columns: 1fr;
    }
}
.task-command-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
.task-scope-tabs,
.task-filter-actions,
.task-status-pills {
    min-width: 0;
    max-width: 100%;
}
.task-scope-tabs .tab,
.task-status-pills .status-pill,
.task-filter-actions .btn {
    white-space: nowrap;
    flex: 0 0 auto;
}
.task-command-bar,
.task-advanced-filters,
.task-filter-grid,
.task-filter-grid > *,
.task-command-topline > * {
    box-sizing: border-box;
}
.task-advanced-filters {
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
}
.task-filter-grid {
    width: 100%;
    min-width: 0;
}
.task-filter-grid .segmented-control.wrap-control {
    flex-wrap: wrap !important;
    gap: 5px;
}
.task-filter-grid .segmented-control.wrap-control button {
    min-width: max-content;
    flex: 1 1 auto;
}
@media (max-width: 1280px) {
    .task-command-bar {
        top: 58px;
        padding: 9px;
    }
    .task-command-topline {
        align-items: stretch;
    }
    .task-scope-tabs {
        flex: 1 1 auto;
        overflow-x: auto;
        scrollbar-width: thin;
        padding-bottom: 2px;
    }
    .task-filter-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}
@media (max-width: 980px) and (min-width: 761px) {
    .task-command-topline {
        display: grid;
        grid-template-columns: 1fr;
    }
    .task-filter-actions {
        justify-content: flex-start;
    }
    .task-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 760px) {
    body.task-filters-open,
    body.task-mobile-dock-open {
        overflow: hidden;
        touch-action: none;
    }
    .task-mobile-command-dock {
        position: fixed !important;
        inset-inline: 10px !important;
        right: 10px !important;
        left: 10px !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        width: auto !important;
        z-index: 24000 !important;
        display: flex !important;
        flex-direction: column-reverse;
        align-items: stretch;
        pointer-events: none;
    }
    .task-mobile-command-fab {
        width: 100%;
        min-height: 50px;
        border-radius: 18px !important;
        justify-content: center;
        pointer-events: auto;
        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.2);
    }
    .task-mobile-command-panel {
        display: block !important;
        width: 100%;
        margin: 0 0 10px !important;
        padding: 12px !important;
        border-radius: 22px 22px 18px 18px !important;
        max-height: min(72vh, 520px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        opacity: 0;
        transform: translateY(16px) scale(0.98);
        visibility: hidden;
        transition:
            transform 0.2s ease,
            opacity 0.2s ease,
            visibility 0.2s ease;
        pointer-events: none;
    }
    .task-mobile-command-dock.open .task-mobile-command-panel {
        opacity: 1;
        transform: translateY(0) scale(1);
        visibility: visible;
        pointer-events: auto;
    }
    .task-mobile-command-dock.open::before,
    body.task-filters-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.22);
        backdrop-filter: blur(2px);
        z-index: -1;
        pointer-events: none;
    }
    .task-mobile-command-grid,
    .task-mobile-command-grid.status-grid,
    .task-mobile-command-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .task-mobile-command-grid button,
    .task-mobile-command-actions .btn {
        width: 100%;
        min-width: 0;
        white-space: normal;
        line-height: 1.5;
    }
    .task-command-bar.mobile-filters-open {
        display: block !important;
        position: fixed !important;
        inset-inline: 10px !important;
        right: 10px !important;
        left: 10px !important;
        top: auto !important;
        bottom: max(74px, calc(env(safe-area-inset-bottom) + 72px)) !important;
        width: auto !important;
        max-height: min(74vh, 560px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
        border-radius: 22px !important;
        z-index: 24002 !important;
        padding: 12px !important;
        margin: 0 !important;
    }
    .task-command-bar.mobile-filters-open .task-advanced-filters {
        display: grid !important;
        gap: 12px;
        padding: 0 !important;
        overflow: visible;
    }
    .task-command-bar.mobile-filters-open .task-filter-grid,
    .task-filter-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .task-command-bar.mobile-filters-open .form-group,
    .task-command-bar.mobile-filters-open .site-picker-button,
    .task-command-bar.mobile-filters-open .segmented-control,
    .task-command-bar.mobile-filters-open .form-control {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .task-command-bar.mobile-filters-open .task-status-pills {
        display: none !important;
    }
    .task-filter-color-row {
        flex-wrap: wrap;
        max-width: 100%;
    }
}
@media (max-width: 430px) {
    .task-mobile-command-grid,
    .task-mobile-command-grid.status-grid,
    .task-mobile-command-actions {
        grid-template-columns: 1fr !important;
    }
    .task-command-bar.mobile-filters-open {
        inset-inline: 8px !important;
        right: 8px !important;
        left: 8px !important;
        bottom: max(70px, calc(env(safe-area-inset-bottom) + 68px)) !important;
        max-height: min(76vh, 560px) !important;
    }
}
.modal-content,
.modal-box,
.modal-card,
[class*="modal"] .card,
.card,
.panel,
.ops-library-section,
.ops-workflow-card,
.ops-actionak-card,
.workflow-run-extra-box {
    max-width: 100%;
    box-sizing: border-box;
}
.modal,
.modal-backdrop {
    overflow-x: hidden;
}
.modal-content,
.modal-box,
.modal-card {
    max-height: calc(100dvh - 24px);
    overflow: auto;
    overscroll-behavior: contain;
}
.form-inline,
.ops-field-grid,
.ops-extra-bulk-tools,
.ops-workflow-phase-row,
.workflow-builder-shell,
.ops-file-preview,
.ops-file-card-row {
    min-width: 0;
    max-width: 100%;
}
.form-inline > *,
.ops-field-grid > *,
.ops-extra-bulk-tools > * {
    min-width: 0;
}
@media (max-width: 900px) {
    .form-inline,
    .ops-field-grid,
    .ops-extra-bulk-tools {
        grid-template-columns: 1fr !important;
        flex-wrap: wrap !important;
    }
    .modal-content,
    .modal-box,
    .modal-card {
        width: min(96vw, 720px) !important;
    }
}
@media (max-width: 560px) {
    .btn,
    button,
    .site-picker-button,
    .ops-picker-button {
        max-width: 100%;
    }
    .modal-content,
    .modal-box,
    .modal-card {
        width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        border-radius: 18px !important;
    }
    .actions-wrap,
    .row-actions,
    .task-filter-actions {
        flex-wrap: wrap;
    }
}
.task-filter-bottom-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px dashed rgba(148, 163, 184, 0.24);
}
.task-doc-compact-panel {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgba(59, 130, 246, 0.14);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.045), rgba(255, 255, 255, 0.96));
    display: grid;
    gap: 8px;
}
.task-doc-compact-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.task-doc-states {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
}
.task-doc-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: #fff;
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
}
.task-doc-state.has-doc {
    color: var(--success);
    border-color: rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.08);
}
.task-doc-state.muted {
    color: var(--text-muted);
    background: var(--bg-tertiary);
}
.task-doc-open-btn {
    white-space: nowrap;
}
.task-doc-quick-note {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    padding: 8px 10px;
}
.task-doc-quick-note strong {
    display: block;
    font-size: 12px;
    margin-bottom: 3px;
    color: var(--text-primary);
}
.task-doc-quick-note p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.8;
}
.task-learning-backdrop.active,
.workflow-task-backdrop.active,
.workflow-fullscreen-backdrop.active {
    z-index: 70050 !important;
}
.task-learning-modal {
    width: min(1180px, calc(100vw - 24px)) !important;
    max-width: none !important;
    height: min(92dvh, 980px) !important;
    max-height: calc(100dvh - 18px) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}
.task-learning-header {
    flex: 0 0 auto;
}
.task-learning-body {
    overflow: auto;
    padding: 14px !important;
    background: linear-gradient(180deg, #fff, var(--bg-secondary));
}
.task-learning-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
    gap: 12px;
    align-items: start;
}
.task-learning-card {
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 18px;
    background: #fff;
    padding: 14px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
    display: grid;
    gap: 10px;
    min-width: 0;
}
.task-learning-card.muted-doc {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}
.task-learning-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.22);
    padding-bottom: 8px;
}
.task-learning-card h4,
.task-learning-card h5 {
    margin: 0;
    color: var(--text-primary);
}
.task-learning-card h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
}
.task-learning-card h5 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.task-learning-card p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.9;
}
.task-learning-doc-section {
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.72);
    display: grid;
    gap: 7px;
    line-height: 1.95;
    min-width: 0;
    overflow-wrap: anywhere;
}
.task-learning-doc-section img,
.task-learning-card img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}
.task-learning-checklist {
    display: grid;
    gap: 8px;
}
.task-learning-check-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    padding: 10px;
    background: rgba(248, 250, 252, 0.78);
}
.task-learning-check-item input {
    margin-top: 4px;
    accent-color: var(--success);
}
.task-learning-check-item strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 3px;
}
.task-learning-check-item small {
    display: block;
    color: var(--text-muted);
    line-height: 1.7;
}
.task-learning-check-item p {
    margin-top: 5px;
}
.modal-backdrop.active,
.modal-overlay.active {
    z-index: 70000 !important;
}
.ops-image-editor-backdrop.active,
.ops-file-preview-modal.active {
    z-index: 71000 !important;
}
@media (max-width: 760px) {
    .task-command-bar.mobile-filters-open {
        z-index: 30000 !important;
        box-shadow: 0 22px 60px rgba(15, 23, 42, 0.26);
    }
    .task-mobile-command-dock {
        z-index: 29000 !important;
    }
    body.task-filters-open .task-create-card,
    body.task-filters-open .task-table-card,
    body.task-mobile-dock-open .task-create-card {
        position: relative;
        z-index: 1 !important;
    }
    .modal-backdrop.active,
    .modal-overlay.active {
        z-index: 70000 !important;
    }
    .task-learning-modal {
        width: calc(100vw - 12px) !important;
        height: calc(100dvh - 12px) !important;
        max-height: calc(100dvh - 12px) !important;
        border-radius: 18px !important;
    }
    .task-learning-grid {
        grid-template-columns: 1fr;
    }
    .task-doc-compact-head {
        align-items: stretch;
    }
    .task-doc-open-btn {
        width: 100%;
        justify-content: center;
    }
    .task-doc-state {
        white-space: normal;
    }
    .task-filter-bottom-actions .btn {
        flex: 1 1 120px;
    }
}
@media (max-width: 520px) {
    .task-doc-states {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }
    .task-learning-body {
        padding: 10px !important;
    }
    .task-learning-card {
        padding: 11px;
        border-radius: 15px;
    }
}
:root {
    --font-family: Vazirmatn, IRANSans, "Yekan Bakh", Tahoma, "Segoe UI", Arial, sans-serif;
}
html {
    direction: rtl;
    width: 100%;
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    direction: rtl;
    text-align: right;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}
pre,
code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
:where(
        .main-content,
        .page-content,
        .top-bar,
        .card,
        .card-body,
        .card-header,
        .modal,
        .modal-body,
        .modal-header,
        .modal-footer,
        .table-responsive,
        .task-create-grid,
        .task-command-bar,
        .task-filter-grid,
        .task-mobile-command-panel,
        .library-grid,
        .library-list-row,
        .library-card,
        .library-card-head,
        .workflow-step,
        .monitor-panel,
        .monitor-chart-grid,
        .permissions-grid,
        .task-learning-grid,
        .task-learning-card,
        .task-learning-doc-section,
        .task-title-cell,
        .sidebar-user-info,
        .actions-wrap,
        .quick-picker,
        .quick-options,
        .site-choice,
        .compact-extra-row,
        .soft-bar,
        .mini-bar,
        [class^="ops-"],
        [class*=" ops-"]
    ) {
    min-width: 0;
}
:where(
        p,
        span,
        strong,
        small,
        td,
        th,
        a,
        label,
        button,
        .form-control,
        .badge,
        .task-meta-pill,
        .site-badge,
        .site-empty,
        .library-card-head strong,
        .task-doc-block,
        .task-learning-doc-section
    ) {
    overflow-wrap: anywhere;
    word-break: normal;
}
:where(
        input:not([type="email"]):not([type="url"]):not([type="tel"]):not([type="time"]):not([type="date"]):not(
                [type="datetime-local"]
            ):not([type="number"]),
        textarea,
        select
    ) {
    direction: rtl;
    text-align: right;
}
:where(
        input[type="email"],
        input[type="url"],
        input[type="tel"],
        input[type="time"],
        input[type="date"],
        input[type="datetime-local"],
        input[type="number"],
        .timer,
        .token-value,
        .jalali-date-input,
        .time-picker-head strong,
        .muted-line,
        .compact-number,
        code,
        pre
    ) {
    direction: ltr;
    unicode-bidi: plaintext;
}
:where(
        input[type="email"],
        input[type="url"],
        input[type="tel"],
        input[type="time"],
        input[type="date"],
        input[type="datetime-local"],
        input[type="number"]
    ) {
    text-align: left;
}
.table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
table.table {
    max-width: 100%;
}
.modal {
    max-width: calc(100vw - 24px);
}
.toast-item,
.alert {
    max-width: 100%;
    overflow-wrap: anywhere;
}
.btn,
.tab,
.status-pill,
.quick-option,
.segmented-control button {
    max-width: 100%;
}
@media (max-width: 768px) {
    .top-bar {
        padding-inline: 12px;
    }
    .card-header,
    .modal-header,
    .modal-footer {
        gap: 10px;
        flex-wrap: wrap;
    }
    .page-content {
        max-width: 100%;
        overflow-x: hidden;
    }
    .form-inline,
    .task-create-grid,
    .quick-picker {
        align-items: stretch;
    }
    .btn {
        white-space: normal;
    }
    .table-responsive {
        margin-inline: -1px;
    }
}
/* Stage 2: task description assets, document hints, and Ajax-ready asset index */
.task-doc-state {
    cursor: help;
    user-select: none;
}
.task-doc-state:focus {
    outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
    outline-offset: 2px;
}
.task-doc-mini-hint {
    position: fixed;
    z-index: 90000;
    max-width: 260px;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.94);
    color: #fff;
    font-size: 11.5px;
    line-height: 1.7;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.24);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition:
        opacity 0.14s ease,
        transform 0.14s ease;
}
.task-doc-mini-hint.visible {
    opacity: 1;
    transform: translateY(0);
}
.task-desc-assets-box {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.72);
    padding: 10px;
    min-width: 0;
}
.task-desc-assets-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.task-desc-assets-head strong {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
}
.task-desc-assets-head span {
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: #fff;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
}
.task-desc-assets-box p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.8;
}
.task-desc-assets-box small {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
}
.task-desc-assets-preview {
    display: grid;
    gap: 8px;
    min-width: 0;
}
.task-desc-assets-preview.collapsed {
    display: none;
}
.task-desc-asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    align-items: start;
}
.task-desc-asset-card {
    display: grid;
    gap: 8px;
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}
.task-desc-asset-card.text-only {
    background: linear-gradient(180deg, #fff, rgba(248, 250, 252, 0.86));
}
.task-desc-asset-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.22);
    padding-bottom: 6px;
}
.task-desc-asset-head strong {
    font-size: 12.5px;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.task-desc-asset-head span {
    font-size: 10.5px;
    color: var(--text-muted);
    white-space: nowrap;
}
.ops-asset-preview-media {
    width: 100%;
    min-height: 112px;
    border: 1px dashed rgba(148, 163, 184, 0.32);
    border-radius: 12px;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    overflow: hidden;
}
.ops-asset-preview-media.image {
    border-style: solid;
    background: #fff;
    padding: 0;
}
.ops-asset-preview-media.image img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    background: var(--bg-tertiary);
}
.ops-asset-preview-media.document i {
    font-size: 24px;
    color: var(--accent);
}
.task-desc-asset-card video,
.task-desc-asset-card audio {
    width: 100%;
    border-radius: 12px;
}
.ops-asset-text-preview {
    max-height: 180px;
    overflow: auto;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    background: #0f172a;
    color: #e5e7eb;
    padding: 10px;
    direction: ltr;
    text-align: left;
    font-size: 12px;
    line-height: 1.7;
    cursor: pointer;
}
.inline-loader {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 12px;
    padding: 8px 0;
}
.ops-attachment-preview-modal .wide-modal {
    width: min(1040px, calc(100vw - 28px));
    max-width: none;
}
.ops-large-preview-image {
    display: block;
    max-width: 100%;
    max-height: 76dvh;
    margin: auto;
    border-radius: 14px;
    background: var(--bg-tertiary);
    object-fit: contain;
}
.ops-large-preview-video {
    display: block;
    width: 100%;
    max-height: 76dvh;
    border-radius: 14px;
    background: #000;
}
.ops-large-preview-audio {
    width: 100%;
}
.ops-large-preview-text {
    max-height: 76dvh;
    overflow: auto;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: #0f172a;
    color: #e5e7eb;
    padding: 14px;
    direction: ltr;
    text-align: left;
    line-height: 1.8;
}
.ops-preview-frame {
    width: 100%;
    height: 76dvh;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 14px;
    background: #fff;
}
.ops-asset-index-card .card-body {
    display: grid;
    gap: 12px;
}
.ops-asset-index-filters {
    display: grid;
    grid-template-columns: minmax(240px, 1.6fr) repeat(4, minmax(150px, 1fr));
    gap: 10px;
    align-items: end;
}
.ops-asset-index-filters .wide {
    min-width: 0;
}
.ops-asset-index-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 12px;
}
.ops-asset-index-results {
    display: grid;
    gap: 10px;
    min-height: 80px;
}
.ops-asset-index-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    background: #fff;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045);
    min-width: 0;
}
.ops-asset-index-main {
    display: grid;
    gap: 8px;
    min-width: 0;
}
.ops-asset-index-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.ops-asset-index-head strong {
    font-size: 13px;
    color: var(--text-primary);
}
.ops-asset-index-head span {
    font-size: 11px;
    color: var(--text-muted);
}
.ops-asset-index-row p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.8;
}
.ops-asset-index-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.ops-asset-mini-preview {
    width: 100%;
    min-height: 72px;
    border: 1px dashed rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--text-secondary);
    cursor: pointer;
    overflow: hidden;
}
.ops-asset-mini-preview.image {
    max-width: 220px;
    min-height: 110px;
    border-style: solid;
    background: #fff;
    padding: 0;
}
.ops-asset-mini-preview.image img {
    width: 100%;
    height: 110px;
    object-fit: contain;
    background: var(--bg-tertiary);
}
.ops-asset-mini-preview.doc i {
    font-size: 20px;
    color: var(--accent);
}
.ops-asset-mini-text {
    max-height: 120px;
    overflow: auto;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    background: #0f172a;
    color: #e5e7eb;
    padding: 10px;
    direction: ltr;
    text-align: left;
    font-size: 11.5px;
    line-height: 1.7;
}
.ops-asset-link-preview {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 7px 10px;
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 999px;
    background: var(--info-bg);
    color: var(--info);
    overflow-wrap: anywhere;
}
.ajax-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 8px;
}
.ajax-pagination span {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 700;
}
.ops-asset-index-results .spinner,
.task-desc-assets-preview .spinner {
    margin: auto;
}
@media (max-width: 1100px) {
    .ops-asset-index-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ops-asset-index-filters .wide {
        grid-column: 1/-1;
    }
}
@media (max-width: 720px) {
    .task-desc-asset-grid {
        grid-template-columns: 1fr;
    }
    .ops-asset-index-filters {
        grid-template-columns: 1fr;
    }
    .ops-asset-index-row {
        grid-template-columns: 1fr;
    }
    .ops-asset-index-actions {
        justify-content: flex-start;
    }
    .ops-preview-frame {
        height: 68dvh;
    }
}
[data-theme="dark"] .task-desc-assets-box,
[data-theme="dark"] .task-doc-quick-note {
    background: rgba(15, 23, 42, 0.62);
}
[data-theme="dark"] .task-desc-assets-head span,
[data-theme="dark"] .task-desc-asset-card,
[data-theme="dark"] .ops-asset-index-row,
[data-theme="dark"] .ops-asset-preview-media.image,
[data-theme="dark"] .ops-asset-mini-preview.image {
    background: var(--bg-secondary);
}
[data-theme="dark"] .ops-asset-preview-media,
[data-theme="dark"] .ops-asset-mini-preview {
    background: var(--bg-tertiary);
}

/* Stage 3: global UI resilience for small desktop and modal stacking */
body.modal-open {
    overflow: hidden;
}
.modal-backdrop,
.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    isolation: isolate;
}
.modal-backdrop.active,
.modal-overlay.active {
    z-index: 80000 !important;
}
.modal-backdrop:not(.workflow-fullscreen-backdrop):not(.workflow-task-backdrop):not(.task-learning-backdrop) {
    overflow: auto !important;
    padding: clamp(10px, 2vw, 18px);
    align-items: flex-start !important;
}
.modal-backdrop:not(.workflow-fullscreen-backdrop):not(.workflow-task-backdrop):not(.task-learning-backdrop) > .modal {
    margin-block: clamp(10px, 3vh, 34px);
    max-height: calc(100dvh - 24px);
    display: flex;
    flex-direction: column;
}
.modal > .modal-body {
    min-height: 0;
    overflow: auto;
}
.modal > .modal-header,
.modal > .modal-footer {
    flex: 0 0 auto;
}
.workflow-task-backdrop.active,
.workflow-fullscreen-backdrop.active,
.task-learning-backdrop.active {
    z-index: 80030 !important;
}
#historyModal.over-workflow-modal,
#historyModal.over-workflow-modal.active,
#workflowViewModal.active {
    z-index: 80120 !important;
}
#historyModal.over-workflow-modal .modal,
#workflowViewModal.active .modal {
    z-index: 80121 !important;
}
.ops-image-editor-backdrop.active,
.ops-file-preview-modal.active,
.ops-attachment-preview-modal.active {
    z-index: 80200 !important;
}
:where(
        .app-layout,
        .main-content,
        .page-content,
        .card,
        .card-body,
        .card-header,
        .library-page,
        .library-tab-content,
        .library-list,
        .library-grid,
        .table-responsive,
        .modal,
        .modal-body,
        [class^="ops-"],
        [class*=" ops-"],
        .workflow-step-card,
        .workflow-step-content,
        .workflow-view-item-row,
        .workflow-view-run-panel,
        .support-review-grid,
        .monitor-timeline-toolbar,
        .task-command-bar,
        .task-advanced-filters,
        .task-filter-grid
    ) {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.page-content {
    overflow-x: clip;
}
.card {
    overflow: visible;
}
.card-header {
    gap: 10px;
    flex-wrap: wrap;
}
.card-header h3 {
    min-width: 0;
    overflow-wrap: anywhere;
}
.card-header > .btn,
.card-header > .row-actions {
    flex: 0 0 auto;
}
.card-body {
    overflow-wrap: anywhere;
}
:where(
        .row-actions,
        .actions-wrap,
        .library-card-actions,
        .ops-card-actions,
        .task-filter-actions,
        .workflow-task-header-actions,
        .workflow-modal-header-actions,
        .ops-workflow-builder-actions,
        .ajax-pagination
    ) {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    gap: 6px;
}
:where(.row-actions, .actions-wrap, .library-card-actions, .ops-card-actions) .btn {
    min-width: 0;
    white-space: normal;
}
:where(.badge, .ops-status-pill, .ops-meta-chip, .tag-mini, .task-meta-pill, .site-badge, .status-pill) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}
:where(.segmented-control, .wrap-control, .task-scope-tabs, .task-status-pills, .library-tabs) {
    max-width: 100%;
    min-width: 0;
}
:where(.segmented-control.wrap-control, .wrap-control) {
    flex-wrap: wrap !important;
}
:where(
        .form-inline,
        .workflow-create-topline,
        .ops-field-grid,
        .ops-message-grid,
        .ops-boolean-row,
        .ops-link-grid,
        .ops-unified-upload,
        .ops-phase-grid,
        .ops-phase-picker-grid,
        .ops-workflow-principles
    ) {
    min-width: 0;
    max-width: 100%;
}
:where(.form-inline) > .form-group {
    min-width: min(220px, 100%);
    max-width: 100%;
}
:where(.form-group.wide, .form-inline .wide) {
    min-width: 0;
    flex: 1 1 260px;
}
:where(.form-control, .site-picker-button, .ops-picker-button, .task-filter-site-button, .task-filter-user-button) {
    min-width: 0;
    max-width: 100%;
}
.ops-asset-index-card {
    overflow: visible;
}
.ops-asset-index-card .card-body {
    min-width: 0;
}
.ops-asset-index-filters {
    grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)) !important;
}
.ops-asset-index-filters > * {
    min-width: 0;
}
.ops-asset-index-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) !important;
}
.ops-asset-index-main,
.ops-asset-index-head,
.ops-asset-index-actions {
    min-width: 0;
}
.ops-asset-index-head strong,
.ops-asset-index-row p {
    overflow-wrap: anywhere;
}
.ops-asset-mini-preview.image {
    max-width: 100%;
    width: 100%;
}
.ops-asset-link-preview {
    white-space: normal;
    border-radius: 14px;
}
.ops-workflow-card,
.ops-list .library-list-row,
.library-list-row {
    min-width: 0;
}
.ops-workflow-card-main strong,
.ops-workflow-card-main p,
.ops-actionak-line-top strong,
.ops-actionak-subline span,
.ops-actionak-line-meta span,
.ops-card-title strong,
.ops-package-line span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.ops-workflow-card-meta {
    white-space: normal;
    min-width: 0;
}
.ops-actionak-card-compact .ops-card-actions {
    min-width: 0 !important;
}
.ops-card-actions {
    min-width: 0 !important;
}
.workflow-step-card {
    grid-template-columns: 42px minmax(0, 1fr) minmax(0, 210px) !important;
}
.workflow-step-top {
    min-width: 0;
    flex-wrap: wrap;
}
.workflow-step-top strong {
    white-space: normal !important;
}
.workflow-status-chip {
    white-space: normal;
}
.workflow-view-item-row {
    grid-template-columns: minmax(0, 1fr) auto;
}
.workflow-view-run-panel .ops-file-card-row {
    min-width: 0;
}
.monitor-timeline-toolbar .form-group {
    flex: 1 1 130px;
}
.support-review-grid {
    min-width: 0;
}
.task-site-pulse-tooltip {
    white-space: normal !important;
}
.timeline-grid {
    max-width: 100%;
}
@media (max-width: 1320px) {
    .page-content {
        padding-inline: 18px;
    }
    .ops-asset-index-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .ops-asset-index-filters .wide {
        grid-column: 1/-1;
    }
    .ops-asset-index-row {
        grid-template-columns: 1fr !important;
    }
    .ops-asset-index-actions {
        justify-content: flex-start;
    }
    .ops-workflow-card {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch;
    }
    .ops-workflow-card .row-actions {
        grid-column: 1/-1;
        justify-content: flex-start;
    }
    .ops-workflow-card-main p {
        white-space: normal !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .ops-workflow-card-meta {
        white-space: normal !important;
    }
    .ops-actionak-card,
    .ops-doc-card {
        grid-template-columns: 1fr 1fr !important;
        align-items: stretch;
    }
    .ops-actionak-card-compact {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "top" "meta" "tags" "actions" !important;
        align-items: stretch !important;
    }
    .ops-actionak-card-compact .ops-card-actions {
        grid-area: actions !important;
        grid-column: 1/-1 !important;
        grid-row: auto !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
    .ops-actionak-line-meta span {
        white-space: normal !important;
    }
    .ops-list .library-list-row,
    .library-list-row {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch;
    }
    .ops-doc-row {
        grid-template-columns: 1fr !important;
    }
    .workflow-step-card {
        grid-template-columns: 34px minmax(0, 1fr) !important;
    }
    .workflow-step-side {
        grid-column: 1/-1;
    }
    .support-review-grid {
        grid-template-columns: 1fr !important;
    }
    .timeline-range-head {
        grid-template-columns: 1fr !important;
    }
    .monitor-timeline-toolbar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .monitor-timeline-toolbar .btn {
        width: 100%;
    }
}
@media (max-width: 980px) {
    .page-content {
        padding-inline: 14px;
    }
    .ops-asset-index-filters,
    .monitor-timeline-toolbar,
    .workflow-view-grid,
    .ops-actionak-card,
    .ops-doc-card,
    .ops-workflow-principles,
    .ops-phase-picker-grid,
    .ops-phase-grid {
        grid-template-columns: 1fr !important;
    }
    .ops-actionak-card,
    .ops-doc-card,
    .ops-workflow-card,
    .ops-asset-index-row {
        padding: 12px;
    }
    .card-header > .btn {
        width: 100%;
        justify-content: center;
    }
    .modal-backdrop:not(.workflow-fullscreen-backdrop):not(.workflow-task-backdrop):not(.task-learning-backdrop) {
        padding: 8px;
    }
    .modal-backdrop:not(.workflow-fullscreen-backdrop):not(.workflow-task-backdrop):not(.task-learning-backdrop)
        > .modal {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin-block: 8px;
    }
    .workflow-view-item-row {
        grid-template-columns: 1fr;
    }
    .workflow-view-item-row .btn {
        width: 100%;
        justify-content: center;
    }
    .workflow-view-run-panel .ops-file-card-row {
        grid-template-columns: 56px minmax(0, 1fr) !important;
    }
    .workflow-view-run-panel .ops-file-actions {
        grid-column: 1/-1;
        justify-content: flex-start;
    }
    .workflow-view-run-panel .ops-file-fields {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 760px) {
    .card-header > .btn {
        width: auto;
    }
    .card-header {
        align-items: stretch;
    }
    .card-header h3 {
        width: 100%;
    }
    .ops-asset-index-filters {
        grid-template-columns: 1fr !important;
    }
    .ops-actionak-card,
    .ops-doc-card,
    .ops-actionak-card-compact,
    .ops-workflow-card,
    .ops-asset-index-row {
        grid-template-columns: 1fr !important;
    }
    .ops-card-actions,
    .row-actions,
    .actions-wrap {
        justify-content: flex-start !important;
    }
    .ops-card-actions .btn,
    .row-actions .btn {
        flex: 1 1 120px;
    }
    .workflow-step-card {
        grid-template-columns: 1fr !important;
    }
    .workflow-check,
    .workflow-step-index {
        justify-self: start;
    }
    .modal > .modal-footer {
        justify-content: stretch;
    }
    .modal > .modal-footer .btn {
        flex: 1 1 120px;
    }
}

/* Stage 3.1: remove remaining fixed-width pressure points on compact desktop */
@media (max-width: 1320px) {
    .actions-wrap,
    .row-actions,
    .library-card-actions,
    .ops-card-actions {
        flex-wrap: wrap !important;
        white-space: normal !important;
        min-width: 0 !important;
    }
    .actions-wrap .btn,
    .row-actions .btn,
    .library-card-actions .btn,
    .ops-card-actions .btn {
        white-space: normal !important;
    }
    .timeline-grid {
        grid-template-columns: 1fr !important;
        overflow: visible !important;
    }
    .timeline-track,
    .timeline-user-label {
        min-width: 0 !important;
    }
    .timeline-user-label {
        position: relative;
        z-index: auto;
    }
    .timeline-row {
        grid-template-columns: 1fr !important;
    }
    .timeline-axis {
        display: none;
    }
    .task-command-topline {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .task-command-topline > * {
        min-width: 0;
    }
    .task-scope-tabs,
    .task-status-pills {
        flex-wrap: wrap !important;
        overflow: visible !important;
    }
    .task-scope-tabs .tab,
    .status-pill {
        white-space: normal !important;
    }
    .workflow-step-list,
    .workflow-modal-steps {
        min-width: 0;
    }
    .workflow-step,
    .workflow-modal-step {
        grid-template-columns: 32px minmax(0, 1fr) !important;
    }
    .workflow-step > *:last-child,
    .workflow-modal-step > *:last-child {
        grid-column: 1/-1;
        justify-self: start;
    }
    .library-tabs {
        flex-wrap: wrap !important;
        overflow: visible !important;
    }
    .library-tabs .tab {
        white-space: normal !important;
        flex: 1 1 130px;
        justify-content: center;
    }
    .ops-list-toolbar {
        flex-wrap: wrap;
    }
    .ops-list-toolbar .compact-search {
        min-width: 0 !important;
        flex: 1 1 220px;
    }
    .mini-bar {
        grid-template-columns: 1fr !important;
    }
    .mini-bar > * {
        min-width: 0;
    }
    .support-review-grid > * {
        min-width: 0;
    }
}
@media (max-width: 1100px) {
    .ops-asset-index-card .card-header {
        align-items: stretch;
    }
    .ops-asset-index-card .card-header .btn {
        width: 100%;
        justify-content: center;
    }
    .ops-asset-index-summary {
        align-items: flex-start;
    }
    .ops-overview-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .monitor-chart-grid,
    .monitor-kpi-grid,
    .stats-grid,
    .permissions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 640px) {
    .ops-overview-strip,
    .monitor-chart-grid,
    .monitor-kpi-grid,
    .stats-grid,
    .permissions-grid {
        grid-template-columns: 1fr !important;
    }
    .library-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .library-tabs .tab {
        width: 100%;
    }
    .table-responsive {
        overflow-x: auto;
    }
    .tasks-table .actions-wrap {
        flex-wrap: wrap !important;
    }
}

/* Stage 4: requested UI/UX fixes */
#toastStack {
    z-index: 2147483647 !important;
    position: fixed !important;
    isolation: isolate;
    pointer-events: none;
}
#toastStack .toast-item {
    pointer-events: auto;
}
.jalali-datepicker {
    z-index: 2147483000 !important;
}
.jalali-datepicker-head .jalali-nav-btn,
.jalali-datepicker-head button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    aspect-ratio: 1/1;
    padding: 0 !important;
    border-radius: 10px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.jalali-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 900;
}
.jalali-current:hover {
    background: var(--accent-light);
    color: var(--accent);
}
.jalali-year-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    max-height: min(62vh, 420px);
    overflow: auto;
    padding-inline: 1px;
}
.jalali-month-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}
.jalali-year-grid button,
.jalali-month-grid button {
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 10px;
    min-height: 36px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 800;
}
.jalali-year-grid button:hover:not(:disabled),
.jalali-year-grid button.active,
.jalali-month-grid button:hover:not(:disabled),
.jalali-month-grid button.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.jalali-year-grid button:disabled,
.jalali-month-grid button:disabled,
.jalali-day:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border-color: var(--border-color);
}
.monitor-day-nav {
    display: inline-flex;
    align-items: flex-end;
    gap: 6px;
    min-width: 0;
}
.monitor-day-shift-btn {
    width: 36px;
    height: 36px;
    padding: 0 !important;
    border-radius: 10px !important;
}
.monitor-timeline-toolbar .monitor-day-nav .btn-primary {
    height: 36px;
}
.timeline-day-card .empty-state.compact-empty {
    grid-column: 1/-1;
}
.task-mobile-command-filter-slot {
    margin-top: 12px;
    border-top: 1px dashed rgba(148, 163, 184, 0.28);
    padding-top: 12px;
    max-height: min(52vh, 460px);
    overflow: auto;
    overscroll-behavior: contain;
}
.task-mobile-command-filter-slot[hidden] {
    display: none !important;
}
.task-mobile-command-panel .task-advanced-filters {
    position: static !important;
    display: grid !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}
.task-mobile-command-panel .task-advanced-filters.collapsed {
    display: none !important;
}
.task-mobile-command-dock.filters-open .task-mobile-command-panel {
    max-height: min(86vh, 760px);
    overflow: auto;
}
.task-command-bar.mobile-filters-open {
    position: static !important;
    inset: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-height: none !important;
    box-shadow: none !important;
}
@media (max-width: 760px) {
    .monitor-day-nav {
        width: 100%;
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) 36px;
    }
    .monitor-day-nav .btn-primary {
        width: 100%;
    }
    .jalali-datepicker {
        width: min(340px, calc(100vw - 24px));
    }
    .jalali-year-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .jalali-month-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Stage 5: skeleton loading, import/bulk modernization and chart value visibility */
.skeleton-card-grid,
.skeleton-list,
.skeleton-table {
    display: grid;
    gap: 12px;
    width: 100%;
}
.skeleton-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.skeleton-card,
.skeleton-list-item,
.skeleton-row {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 14px;
    min-height: 92px;
    padding: 14px;
}
.skeleton-row {
    min-height: 46px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.8fr 0.5fr;
    gap: 10px;
    align-items: center;
}
.skeleton-card span,
.skeleton-card b,
.skeleton-card em,
.skeleton-list-item span,
.skeleton-list-item b,
.skeleton-list-item em,
.skeleton-row span {
    display: block;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--bg-tertiary), rgba(148, 163, 184, 0.22), var(--bg-tertiary));
    background-size: 220% 100%;
    animation: dooloopSkeleton 1.15s ease-in-out infinite;
}
.skeleton-card span,
.skeleton-list-item span {
    width: 72%;
    height: 16px;
}
.skeleton-card b,
.skeleton-list-item b {
    width: 92%;
    margin-top: 14px;
}
.skeleton-card em,
.skeleton-list-item em {
    width: 44%;
    margin-top: 12px;
}
.skeleton-row span:nth-child(2) {
    width: 86%;
}
.skeleton-row span:nth-child(3) {
    width: 62%;
}
.skeleton-row span:nth-child(4) {
    width: 40%;
}
@keyframes dooloopSkeleton {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}
.soft-bar-clickable {
    cursor: pointer;
    outline: none;
}
.soft-bar-clickable:hover span,
.soft-bar-clickable:focus span {
    text-decoration: underline;
}
.soft-bar-clickable:focus {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
    border-radius: 10px;
}
.ops-modern-import-panel {
    display: grid;
    gap: 12px;
}
.ops-import-headerline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.ops-import-headerline strong {
    display: block;
    font-weight: 900;
}
.ops-import-headerline small {
    display: block;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.8;
}
.compact-select {
    max-width: 210px;
}
.ops-import-textarea {
    font-family: ui-monospace, Consolas, Tahoma, monospace;
    line-height: 1.9;
    direction: rtl;
}
.ops-import-actions {
    justify-content: flex-start;
}
.ops-import-preview {
    border: 1px dashed var(--border-color);
    border-radius: 14px;
    padding: 12px;
    background: var(--bg-tertiary);
}
.ops-import-summary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.ops-import-summary span {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
}
.ops-import-preview-list {
    display: grid;
    gap: 8px;
}
.ops-import-preview-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 8px;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px;
}
.ops-import-preview-row.bad {
    border-color: var(--danger-border);
    background: var(--danger-bg);
}
.ops-import-preview-row > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ops-import-preview-row b {
    color: var(--text-muted);
}
.ops-import-preview-row small,
.ops-import-preview-row em {
    color: var(--text-muted);
    font-style: normal;
}
.ops-import-errors {
    margin-top: 8px;
    display: grid;
    gap: 4px;
    color: var(--danger);
}
.ops-extra-bulk-tools {
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    border-radius: 14px;
    padding: 12px;
    margin: 12px 0;
}
.extra-bulk-actions {
    align-items: center;
    justify-content: flex-start;
}
.mini-file-preview {
    margin-top: 8px;
}
.ops-unified-upload-field .ops-paste-zone {
    margin-top: 8px;
}
@media (max-width: 760px) {
    .ops-import-headerline,
    .ops-import-preview-row {
        grid-template-columns: 1fr;
        display: grid;
    }
    .compact-select {
        max-width: none;
    }
    .ops-import-preview-row > * {
        white-space: normal;
    }
    .skeleton-row {
        grid-template-columns: 1fr;
    }
}

/* v12 settings, connector diagnostics and task details */
.settings-pro-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.settings-hero .card-body {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.settings-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 8px;
}
.settings-hero h2 {
    margin: 0 0 8px;
    font-size: 1.35rem;
}
.settings-health-strip {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.settings-grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.settings-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.settings-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 14px;
    align-items: start;
}
.connector-form-grid {
    grid-template-columns: repeat(4, minmax(170px, 1fr));
}
.settings-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.settings-checkbox {
    margin-top: 0;
}
.connector-doc-note {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    background: var(--surface-soft, rgba(127, 127, 127, 0.06));
}
.connector-doc-note p {
    margin: 6px 0 0;
    line-height: 1.9;
}
.connector-test-results {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 12px;
    background: var(--card-bg);
    min-height: 80px;
}
.connector-result-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}
.connector-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.75fr);
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    margin-top: 10px;
}
.connector-step.ok {
    border-color: rgba(39, 174, 96, 0.35);
}
.connector-step.fail {
    border-color: rgba(231, 76, 60, 0.35);
}
.connector-step i {
    margin-left: 6px;
}
.connector-step.ok i {
    color: var(--success);
}
.connector-step.fail i {
    color: var(--danger);
}
.connector-step p {
    margin: 6px 0 0;
    color: var(--text-secondary);
    line-height: 1.8;
}
.connector-step pre {
    direction: ltr;
    text-align: left;
    white-space: pre-wrap;
    overflow: auto;
    max-height: 180px;
    margin: 0;
    padding: 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.05);
    font-size: 0.78rem;
}
.settings-doc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.settings-doc-grid > div {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    background: var(--surface-soft, rgba(127, 127, 127, 0.06));
}
.settings-doc-grid h4 {
    margin: 0 0 8px;
}
.tasks-table th:nth-child(5),
.tasks-table td:nth-child(5),
.timer {
    white-space: nowrap;
    min-width: 92px;
}
.task-detail-row > td {
    background: linear-gradient(180deg, rgba(127, 127, 127, 0.04), transparent);
    padding: 16px 18px !important;
}
.task-detail-row .task-meta-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.task-detail-row .task-doc-compact-panel,
.task-detail-row .task-desc-assets-box,
.task-learning-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    background: var(--card-bg);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.04);
}
.task-desc-assets-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}
.task-desc-asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.task-desc-asset-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px;
    background: var(--surface-soft, rgba(127, 127, 127, 0.05));
}
.task-desc-asset-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.ops-asset-preview-media {
    width: 100%;
    min-height: 120px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
}
.ops-asset-preview-media.image img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}
.ops-preview-frame {
    width: 100%;
    height: min(72vh, 720px);
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
}
.ops-large-preview-image {
    max-width: 100%;
    max-height: 75vh;
    display: block;
    margin: auto;
    border-radius: 12px;
}
.ops-large-preview-text {
    direction: ltr;
    text-align: left;
    white-space: pre-wrap;
    max-height: 70vh;
    overflow: auto;
}
@media (max-width: 1100px) {
    .settings-grid-two,
    .settings-doc-grid {
        grid-template-columns: 1fr;
    }
    .connector-form-grid,
    .settings-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .connector-step {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .connector-form-grid,
    .settings-form-grid {
        grid-template-columns: 1fr;
    }
    .settings-actions-row .btn {
        width: 100%;
        justify-content: center;
    }
}
/* v13 task list/detail performance and layout fixes */
.tasks-table {
    min-width: 860px;
    table-layout: auto;
}
.tasks-table th:nth-child(5),
.tasks-table td:nth-child(5) {
    white-space: nowrap;
}
.tasks-table .timer {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
}
.tasks-table .actions-cell {
    white-space: nowrap;
    min-width: 210px;
}
.tasks-table .actions-wrap,
.tasks-table .task-mobile-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.tasks-table .actions-wrap .btn,
.tasks-table .task-mobile-actions .btn {
    white-space: nowrap;
    flex: 0 0 auto;
}
.task-detail-lazy {
    min-height: 54px;
}
.task-detail-lazy-content {
    display: grid;
    gap: 10px;
}
.timeline-tooltip-floating {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: min(420px, calc(100vw - 24px));
    pointer-events: auto;
}
.monitor-custom-range input[type="time"] {
    min-width: 112px;
}
.task-doc-states .task-doc-state:nth-child(n + 3) {
    display: none !important;
}
@media (max-width: 768px) {
    .tasks-table .actions-cell {
        min-width: 230px;
    }
    .tasks-table .task-mobile-actions {
        overflow-x: auto;
        max-width: 100%;
        padding-bottom: 2px;
    }
    .task-mobile-command-filter-slot {
        scroll-margin-top: 80px;
    }
}

/* v14 unified connectivity notice */
.connection-notice {
    position: fixed;
    inset: auto 50% 18px auto;
    transform: translateX(50%) translateY(20px);
    width: min(560px, calc(100vw - 24px));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.98), rgba(255, 255, 255, 0.98));
    color: #7f1d1d;
    box-shadow: 0 18px 48px rgba(127, 29, 29, 0.2);
    z-index: 2147483646;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
    direction: rtl;
    text-align: right;
}
.connection-notice.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(50%) translateY(0);
}
.connection-notice-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: rgba(220, 38, 38, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
    font-size: 16px;
}
.connection-notice-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.connection-notice-text strong {
    font-size: 13px;
    color: #7f1d1d;
}
.connection-notice-text span {
    font-size: 12px;
    line-height: 1.65;
    color: #991b1b;
}
.connection-notice-action {
    border: 1px solid rgba(220, 38, 38, 0.24);
    background: #fff;
    color: #991b1b;
    border-radius: 999px;
    padding: 7px 10px;
    font-family: inherit;
    font-weight: 800;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}
.connection-notice-action:hover {
    background: #fef2f2;
}
@media (max-width: 560px) {
    .connection-notice {
        grid-template-columns: auto minmax(0, 1fr);
        bottom: 10px;
    }
    .connection-notice-action {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
    }
}

/* v16 notification engine settings */
.notification-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1rem;
    align-items: start;
}
.notification-rule-editor,
.notification-side-panel,
.notification-rules-wrap {
    background: rgba(15, 23, 42, 0.025);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 16px;
    padding: 1rem;
}
.notification-channel-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    background: var(--card-bg, #fff);
}
.notification-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.55rem;
    max-height: 180px;
    overflow: auto;
}
.notif-chip {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    background: var(--card-bg, #fff);
    font-size: 0.78rem;
    direction: ltr;
    cursor: pointer;
}
.notif-chip.muted {
    cursor: default;
    background: rgba(100, 116, 139, 0.08);
    direction: rtl;
}
.notif-chip small {
    opacity: 0.65;
    margin-inline-start: 0.25rem;
}
.notification-manual-box {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}
.notification-vars-box strong,
.notification-manual-box strong {
    display: block;
    margin-bottom: 0.4rem;
}
.notification-rules-list,
.notification-log-list {
    display: grid;
    gap: 0.55rem;
}
.notification-rule-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    background: var(--card-bg, #fff);
    padding: 0.75rem;
}
.notification-rule-item.off {
    opacity: 0.62;
}
.notification-rule-item strong {
    display: block;
}
.notification-rule-item small {
    display: block;
    color: var(--muted, #64748b);
    margin-top: 0.15rem;
}
.notification-rule-item p {
    margin: 0.25rem 0 0;
    color: var(--muted, #64748b);
    font-size: 0.85rem;
}
.notification-rule-actions {
    display: flex;
    gap: 0.35rem;
    white-space: nowrap;
}
.notification-log-item {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 0.25rem 0.7rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 0.55rem;
    background: var(--card-bg, #fff);
}
.notification-log-item span {
    grid-row: 1/3;
    border-radius: 999px;
    text-align: center;
    padding: 0.15rem 0.45rem;
    height: max-content;
    background: rgba(100, 116, 139, 0.12);
}
.notification-log-item.sent span {
    background: rgba(34, 197, 94, 0.15);
}
.notification-log-item.failed span {
    background: rgba(239, 68, 68, 0.15);
}
.notification-log-item p {
    grid-column: 2;
    margin: 0;
    color: var(--danger, #dc2626);
    font-size: 0.82rem;
}
.notification-log-item small {
    color: var(--muted, #64748b);
}
@media (max-width: 980px) {
    .notification-admin-grid {
        grid-template-columns: 1fr;
    }
    .notification-rule-item {
        align-items: flex-start;
        flex-direction: column;
    }
    .notification-rule-actions {
        overflow-x: auto;
        max-width: 100%;
    }
}

/* v17 compact notification SMS UI */
.notification-settings-card .card-body {
    gap: 12px;
}
.notification-doc-note p {
    margin-top: 4px;
}
.notification-rule-editor {
    padding: 14px;
}
.notification-side-panel {
    position: sticky;
    top: 78px;
}
.notification-sms-args-field {
    align-self: stretch;
}
.sms-args-builder {
    display: grid;
    gap: 8px;
    margin-bottom: 8px;
}
.sms-arg-row {
    display: grid;
    grid-template-columns: 34px minmax(180px, 1fr) minmax(150px, 0.65fr) auto;
    gap: 8px;
    align-items: center;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 8px;
    background: var(--bg-secondary, #fff);
}
.sms-arg-index {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary, #f8fafc);
    color: var(--text-muted, #64748b);
    font-weight: 800;
    font-size: 12px;
}
.notification-sms-arg-select {
    min-width: 0;
}
.notification-sms-arg-custom[hidden] {
    display: none !important;
}
.notification-chip-list .notif-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    white-space: normal;
    text-align: right;
}
.notification-chip-list .notif-chip span {
    font-weight: 700;
}
.notification-chip-list .notif-chip small {
    direction: ltr;
    unicode-bidi: plaintext;
    color: var(--text-muted, #64748b);
    font-size: 10px;
}
.notification-manual-box.compact {
    border: 1px dashed var(--border-color, #e5e7eb);
    border-radius: 14px;
    padding: 12px;
    background: var(--bg-secondary, #fff);
}
.notification-manual-modal {
    width: min(680px, calc(100vw - 24px));
    max-width: none;
}
.manual-notification-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sms-payload-preview {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.sms-payload-chip {
    display: inline-flex;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 999px;
    padding: 4px 9px;
    background: var(--bg-secondary, #fff);
    direction: rtl;
}
.notification-rule-actions {
    flex-wrap: wrap;
}
.notification-log-list {
    max-height: 420px;
    overflow: auto;
    padding-inline-end: 2px;
}
@media (max-width: 1100px) {
    .notification-side-panel {
        position: static;
    }
    .sms-arg-row {
        grid-template-columns: 30px minmax(0, 1fr) auto;
    }
    .sms-arg-row .notification-sms-arg-custom {
        grid-column: 2 / -1;
    }
    .manual-notification-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .notification-rule-editor,
    .notification-side-panel,
    .notification-rules-wrap {
        padding: 10px;
        border-radius: 14px;
    }
    .sms-arg-row {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 6px;
    }
    .sms-arg-row .btn {
        grid-column: 1 / -1;
        width: 100%;
    }
    .sms-arg-row .notification-sms-arg-custom {
        grid-column: 1 / -1;
    }
    .notification-rule-actions .btn {
        flex: 1 1 90px;
    }
    .notification-manual-modal {
        width: calc(100vw - 12px);
    }
}

/* v18 tabbed connector/notification settings and responsive rule editor */
.settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 14px;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
}
.settings-tab-btn {
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--card-bg, #fff);
    color: var(--text-primary, #0f172a);
    border-radius: 999px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.88rem;
}
.settings-tab-btn.active {
    border-color: var(--accent, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
}
.settings-tab-panel {
    display: none;
    min-width: 0;
    max-width: 100%;
}
.settings-tab-panel.active {
    display: block;
}
.connector-settings-card,
.notification-settings-card,
.notification-rule-editor,
.notification-side-panel,
.notification-rules-wrap {
    min-width: 0;
    max-width: 100%;
}
.connector-settings-card .card-body,
.notification-settings-card .card-body {
    display: block;
    min-width: 0;
    overflow: hidden;
}
.connector-form-grid,
.notification-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    min-width: 0;
    width: 100%;
}
.connector-form-grid.slim-grid,
.notification-form-grid.slim-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.notification-admin-grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    min-width: 0;
}
.notification-rule-editor .form-control,
.connector-settings-card .form-control {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}
.notification-rule-editor textarea,
.connector-settings-card input[readonly] {
    overflow: auto;
}
.notification-main-actions,
.connector-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.notification-main-actions .btn,
.connector-actions .btn {
    min-width: 0;
    white-space: normal;
}
.sms-args-builder,
.notification-condition-builder {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 8px 0;
}
.sms-arg-row,
.notification-condition-row {
    display: grid;
    grid-template-columns: 34px minmax(150px, 1fr) minmax(120px, 0.65fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 8px;
    background: var(--bg-secondary, #fff);
}
.notification-condition-row {
    grid-template-columns: 34px minmax(155px, 1fr) minmax(145px, 1fr) minmax(130px, 0.55fr) minmax(140px, 0.85fr) auto;
}
.notification-condition-left-custom[hidden],
.notification-sms-arg-custom[hidden] {
    display: none !important;
}
.notification-condition-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.notification-test-box {
    border: 1px dashed var(--border-color, #e5e7eb);
    border-radius: 14px;
    padding: 12px;
    margin-top: 14px;
    background: var(--bg-secondary, #fff);
    min-width: 0;
}
.notification-channel-toggle {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    background: var(--bg-secondary, #fff);
}
.connector-step {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr);
    min-width: 0;
    overflow: hidden;
}
.connector-step pre {
    max-width: 100%;
    overflow: auto;
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}
.notification-rule-item {
    min-width: 0;
}
.notification-rule-item > div:first-child {
    min-width: 0;
}
.notification-rule-item strong,
.notification-rule-item small,
.notification-rule-item p {
    overflow-wrap: anywhere;
}
@media (max-width: 1280px) {
    .notification-admin-grid {
        grid-template-columns: 1fr;
    }
    .notification-side-panel {
        position: static;
    }
    .notification-condition-row {
        grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr);
    }
    .notification-condition-row .notification-condition-op,
    .notification-condition-row .notification-condition-right {
        grid-column: auto;
    }
    .notification-condition-row .btn {
        grid-column: auto;
    }
    .connector-step {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 900px) {
    .settings-tabs {
        flex-wrap: nowrap;
    }
    .settings-tab-btn {
        flex: 0 0 auto;
    }
    .connector-form-grid,
    .notification-form-grid,
    .connector-form-grid.slim-grid,
    .notification-form-grid.slim-grid {
        grid-template-columns: 1fr;
    }
    .notification-condition-row {
        grid-template-columns: 28px minmax(0, 1fr);
    }
    .notification-condition-row .notification-condition-left-custom,
    .notification-condition-row .notification-condition-op,
    .notification-condition-row .notification-condition-right,
    .notification-condition-row .btn {
        grid-column: 1 / -1;
    }
    .sms-arg-row {
        grid-template-columns: 28px minmax(0, 1fr);
    }
    .sms-arg-row .notification-sms-arg-custom,
    .sms-arg-row .btn {
        grid-column: 1 / -1;
    }
    .notification-main-actions .btn,
    .connector-actions .btn {
        width: 100%;
        justify-content: center;
    }
    .notification-rule-editor,
    .notification-side-panel,
    .notification-rules-wrap {
        padding: 10px;
        border-radius: 14px;
    }
}
@media (min-width: 901px) and (max-width: 1180px) {
    .sms-arg-row {
        grid-template-columns: 30px minmax(0, 1fr) auto;
    }
    .sms-arg-row .notification-sms-arg-custom {
        grid-column: 2 / -1;
    }
    .notification-condition-row {
        grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr);
    }
    .notification-condition-row .notification-condition-right {
        grid-column: 2 / -1;
    }
    .notification-condition-row .btn {
        grid-column: auto;
    }
}

/* v19 notification console */
.notification-console-card .card-body {
    overflow: visible;
}
.notification-console-intro {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 18px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(245, 158, 11, 0.05));
    margin-bottom: 14px;
}
.notification-console-intro p {
    margin: 4px 0 0;
    color: var(--text-muted, #64748b);
    line-height: 1.8;
}
.notification-status-pill {
    display: inline-flex;
    align-items: center;
    max-width: 420px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 999px;
    background: var(--card-bg, #fff);
    padding: 7px 12px;
    color: var(--text-muted, #64748b);
    font-size: 0.84rem;
    line-height: 1.6;
    white-space: normal;
}
.notification-console-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 14px;
    align-items: start;
}
.notification-composer-panel {
    display: grid;
    gap: 14px;
    background: rgba(15, 23, 42, 0.02);
}
.notification-composer-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    padding-bottom: 12px;
}
.notification-composer-head strong {
    display: block;
    font-size: 1.02rem;
}
.notification-composer-head small {
    display: block;
    color: var(--text-muted, #64748b);
    margin-top: 3px;
}
.notification-active-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 999px;
    background: var(--card-bg, #fff);
    padding: 7px 12px;
    white-space: nowrap;
}
.notification-section-card,
.notification-channel-card {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 16px;
    background: var(--card-bg, #fff);
    padding: 13px;
    min-width: 0;
}
.notification-section-head,
.notification-channel-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.notification-section-head h4 {
    margin: 0;
}
.notification-section-head small,
.notification-channel-head small {
    display: block;
    color: var(--text-muted, #64748b);
    font-size: 0.82rem;
    margin-top: 2px;
    line-height: 1.6;
}
.notification-core-grid {
    align-items: end;
}
.notification-recipient-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.recipient-chip {
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-secondary, #fff);
    border-radius: 999px;
    padding: 7px 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    color: var(--text-color, #111827);
    font-weight: 700;
    font-size: 0.84rem;
}
.recipient-chip.active {
    border-color: var(--accent, #2563eb);
    background: rgba(37, 99, 235, 0.09);
    color: var(--accent, #2563eb);
}
.notification-explicit-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.8fr) minmax(140px, 0.8fr) auto;
    gap: 8px;
    margin-top: 10px;
}
.notification-explicit-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
}
.explicit-recipient-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.04);
    padding: 5px 9px;
}
.explicit-recipient-pill small {
    color: var(--text-muted, #64748b);
}
.explicit-recipient-pill button {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--danger, #dc2626);
}
.notification-channel-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.notification-channel-card {
    opacity: 0.78;
}
.notification-channel-card.active {
    opacity: 1;
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
}
.notification-channel-toggle {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    border: 0;
    background: transparent;
    padding: 0;
}
.notification-sms-args-field {
    margin-top: 10px;
}
.notification-sms-args-field > label {
    display: block;
    margin-bottom: 7px;
    font-weight: 700;
}
.sms-arg-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
}
.sms-arg-tools {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: nowrap;
}
.sms-arg-tools .btn {
    padding: 6px 8px;
}
.notification-test-inline {
    align-items: end;
    margin-top: 10px;
}
.notification-test-checkbox {
    align-self: center;
    margin-top: 22px;
}
.notification-side-panel {
    display: grid;
    gap: 12px;
}
.notification-vars-box {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 16px;
    background: var(--card-bg, #fff);
    padding: 13px;
}
.notification-vars-box .form-control {
    margin: 8px 0;
}
.notification-chip-list {
    max-height: 360px;
    display: grid;
    gap: 7px;
    overflow: auto;
    padding-inline-end: 3px;
}
.notif-var-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
}
.notif-var-row .notif-chip {
    width: 100%;
    justify-content: space-between;
    border-radius: 12px;
    padding: 8px 10px;
}
.notif-var-row .notif-chip small {
    direction: ltr;
    unicode-bidi: plaintext;
}
.btn-xs {
    font-size: 0.72rem;
    padding: 5px 8px;
    min-height: auto;
}
.notification-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    max-height: 120px;
    overflow: auto;
}
.filter-chip {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.025);
    padding: 6px 8px;
    display: inline-grid;
    gap: 2px;
    text-align: right;
    cursor: pointer;
}
.filter-chip code {
    direction: ltr;
    color: var(--accent, #2563eb);
}
.filter-chip span {
    font-size: 0.72rem;
    color: var(--text-muted, #64748b);
}
.notification-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: 14px;
    margin-top: 14px;
}
.notification-rule-item {
    cursor: pointer;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}
.notification-rule-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}
.notification-rule-item.off {
    filter: grayscale(0.25);
}
.notification-rules-wrap .notification-section-head .form-control {
    max-width: 260px;
}
.notification-log-list {
    max-height: 520px;
}
.connector-test-results.compact {
    margin-top: 10px;
}
@media (max-width: 1280px) {
    .notification-console-layout,
    .notification-bottom-grid {
        grid-template-columns: 1fr;
    }
    .notification-side-panel {
        position: static;
    }
    .notification-channel-cards {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 760px) {
    .notification-console-intro,
    .notification-composer-head {
        flex-direction: column;
    }
    .notification-status-pill {
        max-width: none;
        width: 100%;
        border-radius: 14px;
    }
    .notification-explicit-row {
        grid-template-columns: 1fr;
    }
    .notification-section-head .form-control {
        max-width: none;
        width: 100%;
    }
    .notification-rules-wrap .notification-section-head .form-control {
        max-width: none;
    }
    .sms-arg-row {
        grid-template-columns: 28px minmax(0, 1fr);
    }
    .sms-arg-tools {
        grid-column: 1 / -1;
    }
    .sms-arg-tools .btn {
        flex: 1;
    }
    .notification-main-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Dooloop v21 task-list and cron polish */
.tasks-table {
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
}
.tasks-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-tertiary);
    font-size: 12px;
    color: var(--text-secondary);
}
.tasks-table td {
    border-bottom: 1px solid var(--border-color);
}
.task-title-cell strong {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.task-title-cell .task-title-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}
.task-number-wrap {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 800;
    color: var(--text-secondary);
}
.task-owner-cell {
    color: var(--text-secondary);
    font-weight: 600;
}
.tasks-table .timer {
    direction: ltr;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-tertiary);
    font-weight: 800;
    color: var(--text-secondary);
}
.tasks-table .timer[data-running="1"] {
    border-color: var(--warning-border);
    background: var(--warning-bg);
    color: var(--warning);
}
.tasks-table .actions-wrap {
    justify-content: flex-start;
    gap: 5px;
}
.tasks-table .btn-xs {
    min-height: 28px;
}
.cron-status-panel {
    display: grid;
    grid-template-columns: minmax(140px, 0.7fr) minmax(220px, 1fr) minmax(220px, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
.cron-status-card {
    display: grid;
    gap: 6px;
    align-content: start;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
}
.cron-status-card small {
    color: var(--text-muted);
    font-weight: 800;
}
.cron-status-card strong {
    font-size: 16px;
    color: var(--text-primary);
}
.cron-status-card code,
.cron-compact-note code {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    padding: 3px 6px;
    color: var(--text-secondary);
}
@media (max-width: 900px) {
    .cron-status-panel {
        grid-template-columns: 1fr;
    }
    .cron-status-card.wide {
        min-width: 0;
    }
}
@media (max-width: 760px) {
    body {
        overflow-x: hidden;
    }
    .page-content {
        padding: 12px 10px 96px;
    }
    .card {
        border-radius: 14px;
    }
    .card-header {
        padding: 12px 14px;
        gap: 8px;
        align-items: flex-start;
    }
    .card-header h3 {
        line-height: 1.7;
    }
    .card-body > .table-responsive {
        overflow: visible;
    }
    .tasks-table {
        display: block;
        width: 100%;
        border-spacing: 0;
        background: transparent;
    }
    .tasks-table thead {
        display: none !important;
    }
    .tasks-table tbody {
        display: grid;
        gap: 10px;
        width: 100%;
    }
    .tasks-table .task-main-row {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 12px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 16px;
        background: var(--bg-secondary);
        box-shadow: var(--shadow-sm);
        cursor: pointer;
    }
    .tasks-table .task-main-row:hover {
        background: var(--bg-secondary);
    }
    .tasks-table .task-main-row.task-abnormal {
        border-color: var(--warning-border) !important;
        background: linear-gradient(135deg, var(--bg-secondary), rgba(217, 119, 6, 0.06));
    }
    .tasks-table .task-main-row td {
        display: none !important;
        border: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    .tasks-table .task-main-row td.task-title-cell {
        display: block !important;
    }
    .tasks-table .task-title-cell strong {
        display: flex !important;
        align-items: flex-start;
        gap: 6px;
        line-height: 1.9;
        font-size: 13px;
        color: var(--text-primary);
        white-space: normal;
    }
    .tasks-table .task-title-cell .task-title-text {
        flex: 1;
        min-width: 0;
        word-break: break-word;
    }
    .task-mobile-meta {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
        color: var(--text-muted);
        font-size: 11px;
    }
    .task-mobile-meta > span,
    .task-mobile-meta .site-badge,
    .task-mobile-meta .site-empty {
        max-width: 100%;
        min-height: 24px;
    }
    .task-mobile-id {
        direction: ltr;
        unicode-bidi: embed;
        padding: 3px 7px;
        border: 1px solid var(--border-color);
        border-radius: 999px;
        background: var(--bg-tertiary);
        font-weight: 800;
    }
    .task-mobile-actions {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 10px;
    }
    .task-mobile-actions .btn {
        flex: 1 1 auto;
        min-width: 78px;
        min-height: 32px;
    }
    .tasks-table .task-detail-row {
        display: block !important;
        width: 100%;
        margin-top: -6px;
        border: 1px solid var(--border-color);
        border-radius: 14px;
        background: var(--bg-tertiary);
        overflow: hidden;
    }
    .tasks-table .task-detail-row[style*="none"] {
        display: none !important;
    }
    .tasks-table .task-detail-row td {
        display: block !important;
        width: 100% !important;
        padding: 10px !important;
        border: 0 !important;
        background: transparent !important;
    }
    .task-doc-compact-head {
        display: grid;
        gap: 8px;
    }
    .task-doc-states {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .task-desc-assets-box {
        padding: 10px;
    }
    .ajax-pagination {
        padding: 12px 0;
        gap: 8px;
    }
    .ajax-pagination .btn {
        min-height: 34px;
    }
    .task-mobile-command-dock {
        right: 10px !important;
        left: 10px !important;
        bottom: 10px !important;
        width: auto !important;
        z-index: 120 !important;
    }
    .task-mobile-command-fab {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }
    .task-mobile-command-panel {
        max-height: min(68vh, 520px);
        border-radius: 16px;
    }
    .task-mobile-command-grid,
    .task-mobile-command-grid.status-grid {
        grid-template-columns: 1fr 1fr;
    }
    .task-mobile-command-grid button {
        min-height: 38px;
    }
    .task-mobile-command-filter-slot .task-advanced-filters {
        max-height: 52vh;
        overflow: auto;
    }
    .task-filter-grid {
        grid-template-columns: 1fr !important;
    }
    .task-filter-actions {
        display: none;
    }
    .task-status-mobile-filter {
        display: block;
    }
    .task-scope-tabs,
    .task-status-pills {
        padding-bottom: 2px;
    }
    .task-card-header-actions {
        display: none;
    }
    .task-mobile-history-btn {
        display: inline-flex;
    }
}
@media (max-width: 380px) {
    .task-mobile-command-grid,
    .task-mobile-command-grid.status-grid {
        grid-template-columns: 1fr;
    }
    .task-mobile-actions .btn {
        flex-basis: 100%;
    }
    .task-mobile-meta {
        gap: 5px;
    }
    .page-content {
        padding-left: 8px;
        padding-right: 8px;
    }
}
@media (min-width: 768px) {
     .task-mobile-actions {display:none !important;}
}
/* Dooloop v23 mobile task-list fit + unified cron visibility */
.cron-last-run-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
}
.cron-last-run-banner div {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.cron-last-run-banner small {
    color: var(--text-muted);
    font-weight: 800;
}
.cron-last-run-banner strong {
    font-size: 17px;
    color: var(--text-primary);
}
.cron-last-run-banner span {
    color: var(--text-secondary);
    font-size: 12px;
}
.cron-last-run-banner code {
    direction: ltr;
    white-space: nowrap;
    color: var(--text-secondary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 5px 8px;
}
.task-action-btn .task-action-text {
    display: inline;
}

@media (max-width: 760px) {
    .card-body > .table-responsive:has(.tasks-table),
    .table-responsive:has(.tasks-table) {
        width: 100%;
        max-width: 100%;
        overflow: visible !important;
    }
    .tasks-table {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .tasks-table tbody {
        min-width: 0 !important;
        max-width: 100%;
    }
    .tasks-table .task-main-row {
        max-width: 100% !important;
        overflow: hidden;
        padding: 10px !important;
    }
    .tasks-table .task-title-cell,
    .tasks-table .task-title-cell strong,
    .tasks-table .task-title-cell .task-title-text {
        min-width: 0 !important;
        max-width: 100%;
    }
    .tasks-table .task-title-cell strong {
        align-items: flex-start;
        gap: 5px;
    }
    .tasks-table .task-title-cell .task-title-text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .task-mobile-meta {
        gap: 5px !important;
        margin-top: 7px !important;
        max-width: 100%;
    }
    .task-mobile-meta > span {
        flex: 0 1 auto;
    }
    .task-mobile-owner,
    .task-mobile-site {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-width: 0;
        max-width: 100%;
        min-height: 24px;
        padding: 3px 7px;
        border: 1px solid var(--border-color);
        border-radius: 999px;
        background: var(--bg-tertiary);
        color: var(--text-secondary);
        font-size: 11px;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .task-mobile-owner {
        max-width: 45%;
    }
    .task-mobile-site {
        max-width: 58%;
    }
    .task-mobile-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center;
        justify-content: flex-start;
        gap: 4px !important;
        max-width: 100%;
        margin-top: 8px !important;
        overflow: visible !important;
        white-space: normal !important;
    }
    .task-mobile-actions .task-action-btn,
    .tasks-table .task-mobile-actions .btn {
        flex: 0 0 31px !important;
        width: 31px !important;
        min-width: 31px !important;
        max-width: 31px !important;
        height: 31px !important;
        min-height: 31px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        justify-content: center !important;
        font-size: 0 !important;
        line-height: 1 !important;
    }
    .task-mobile-actions .task-action-text {
        display: none !important;
    }
    .task-mobile-actions .task-action-btn i,
    .tasks-table .task-mobile-actions .btn i {
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }
    .tasks-table .timer {
        min-width: 66px;
        padding: 3px 6px;
        font-size: 11px;
        border-radius: 999px;
    }
    .task-detail-row,
    .task-detail-row td,
    .task-detail-lazy,
    .task-detail-lazy-content {
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }
    .cron-last-run-banner {
        align-items: stretch;
        flex-direction: column;
    }
    .cron-last-run-banner code {
        width: 100%;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 380px) {
    .task-mobile-actions .btn,
    .task-mobile-actions .task-action-btn {
        flex-basis: 30px !important;
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
    }
    .task-mobile-owner,
    .task-mobile-site {
        max-width: 100%;
    }
}

/* Dooloop v23.1 task mobile single-line title and horizontal meta */
@media (max-width: 760px) {
    #taskSectionBody {
        gap: 12px !important;
        padding: 4px !important;
        box-sizing: border-box;
    }

    .tasks-table .task-title-cell strong {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        line-height: 1.8 !important;
    }

    .tasks-table .task-title-cell strong > :not(.task-title-text) {
        flex: 0 0 auto !important;
        max-width: none !important;
    }

    .tasks-table .task-title-cell .task-title-text,
    .task-title-text {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
    }

    .task-mobile-meta {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        margin-top: 7px !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .task-mobile-meta > *,
    .task-mobile-meta > span,
    .task-mobile-meta .badge,
    .task-mobile-meta .timer,
    .task-mobile-meta .site-badge,
    .task-mobile-meta .site-empty,
    .task-mobile-meta .task-mobile-person,
    .task-mobile-meta .task-mobile-owner,
    .task-mobile-meta .task-mobile-site {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        min-width: max-content !important;
        max-width: none !important;
    }

    .task-detail-row,
    .tasks-table .task-detail-row {
        margin-top: -12px !important;
    }
}


/* Dooloop v24 task title + mobile meta hard overrides */
.tasks-table .task-title-cell {
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: right !important;
}
.tasks-table .task-title-cell strong {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-align: right !important;
}
.tasks-table .task-title-cell strong > :not(.task-title-text) {
    flex: 0 0 auto !important;
    max-width: none !important;
}
.tasks-table .task-title-cell .task-title-text,
.task-title-text {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
}

@media (min-width: 761px) {
    .tasks-table th:nth-child(2),
    .tasks-table td:nth-child(2) {
        width: 30% !important;
        max-width: 360px !important;
    }
}

@media (max-width: 760px) {
    #taskSectionBody {
        gap: 12px !important;
        padding: 4px !important;
        box-sizing: border-box !important;
    }
    .tasks-table .task-main-row,
    .tasks-table .task-title-cell {
        direction: rtl !important;
        text-align: right !important;
    }
    .tasks-table .task-title-cell strong {
        line-height: 1.8 !important;
        direction: rtl !important;
    }
    .task-mobile-meta {
        display: flex !important;
        direction: rtl !important;
        text-align: right !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        margin-top: 7px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
        overscroll-behavior-x: contain !important;
        scrollbar-width: thin !important;
        padding-bottom: 2px !important;
    }
    .task-mobile-meta > *,
    .task-mobile-meta > span,
    .task-mobile-meta .badge,
    .task-mobile-meta .timer,
    .task-mobile-meta .site-badge,
    .task-mobile-meta .site-empty,
    .task-mobile-meta .task-mobile-person,
    .task-mobile-meta .task-mobile-owner,
    .task-mobile-meta .task-mobile-site {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
    }
    .task-mobile-meta .timer {
        direction: ltr !important;
        unicode-bidi: embed !important;
    }
    .task-detail-row,
    .tasks-table .task-detail-row {
        margin-top: -12px !important;
    }
}

/* v25: task rows must remain single-line; archive pagination must not visually reflow rows. */
.task-main-row,
.task-main-row > td,
.task-main-row > td * {
    white-space: nowrap !important;
}
.tasks-table .task-main-row > td {
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.tasks-table .task-main-row .task-title-cell,
.tasks-table .task-main-row .task-title-cell strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tasks-table .task-main-row .actions-cell,
.tasks-table .task-main-row .actions-wrap {
    overflow: visible;
}

/* v26: unified uploads, recorder, support review and settings refinements */
.ops-unified-upload-field {
    width: 100%;
}
.ops-unified-upload {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
    align-items: stretch;
    gap: 10px;
    width: 100%;
}
.ops-unified-upload .ops-upload-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.ops-upload-main,
.ops-upload-paste-zone {
    min-height: 76px;
    border-radius: 16px;
}
.form-group > .ops-unified-upload + .ops-paste-zone,
.form-group > .ops-unified-upload + .ops-paste-zone + .ops-file-preview {
    margin-top: 10px;
}
.form-group > .ops-unified-upload + .ops-paste-zone:not(.ops-upload-paste-zone) {
    display: none !important;
}
@media (max-width: 720px) {
    .ops-unified-upload { grid-template-columns: 1fr; }
}

.voice-recorder-backdrop { z-index: 99999; }
.voice-recorder-modal {
    width: min(520px, calc(100vw - 24px));
    border-radius: 24px;
    overflow: hidden;
}
.voice-recorder-body { text-align: center; }
.voice-recorder-status { font-weight: 800; margin-bottom: 14px; }
.voice-wave {
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 12px;
    border-radius: 20px;
    background: rgba(59,130,246,.08);
    border: 1px solid rgba(59,130,246,.18);
    direction: ltr;
}
.voice-wave span {
    width: 5px;
    height: 48px;
    border-radius: 99px;
    background: currentColor;
    opacity: .42;
    transform: scaleY(.25);
    transform-origin: center;
    transition: transform .12s ease;
}
.voice-recorder-timer {
    direction: ltr;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 1px;
    margin: 16px 0 8px;
}
.voice-recorder-hint { color: var(--text-muted); font-size: 12px; }
.voice-recorder-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px 18px;
    border-top: 1px solid var(--border-color);
}
.voice-recorder-controls .btn { flex: 1 1 145px; justify-content: center; }

#supportRequestReviewModal.active {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
}
#supportRequestReviewModal .modal {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}
#supportRequestReviewModal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 16px;
}
.support-review-grid {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(360px, 1fr) minmax(300px, 380px);
    gap: 14px;
    align-items: start;
    max-width: 100%;
}
.support-plan-panel,
.support-request-main,
.support-decision-panel {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.support-decision-panel .segmented-control,
.support-action-bar,
#supportRequestActionBar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#supportRequestActionBar .support-action-step {
    flex: 1 1 165px;
    min-height: 64px;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    border-width: 2px;
}
#supportRequestActionBar .support-action-step small {
    font-size: 10px;
    opacity: .78;
    line-height: 1.4;
    font-weight: 600;
}
#supportRequestActionBar .support-action-step.active {
    box-shadow: 0 0 0 3px rgba(59,130,246,.16);
    transform: translateY(-1px);
}
.support-request-main {
    display: grid;
    gap: 14px;
}
.support-request-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(16,185,129,.10));
    border: 1px solid rgba(59,130,246,.18);
}
.support-request-hero h4 { margin: 4px 0 0; }
.support-request-hero small { color: var(--text-muted); font-weight: 700; }
.support-glance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 10px;
}
.glance-card {
    padding: 12px;
    border-radius: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    min-width: 0;
}
.glance-card strong,
.glance-card .badge { display: inline-flex; margin-bottom: 6px; }
.glance-card small { display: block; color: var(--text-muted); font-size: 11px; }
.support-desc {
    padding: 14px;
    margin: 0;
    border-radius: 16px;
    background: var(--muted-bg, rgba(148,163,184,.10));
    line-height: 1.9;
}
.support-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.support-meta-row span {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(148,163,184,.12);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}
.support-task-code-link {
    display: inline-flex;
    margin-top: 6px;
    border: 0;
    border-radius: 999px;
    padding: 4px 8px;
    background: rgba(59,130,246,.12);
    color: var(--primary-color);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.support-task-frame-modal {
    width: min(1280px, calc(100vw - 24px));
    height: min(860px, calc(100dvh - 24px));
    max-width: none;
    display: flex;
    flex-direction: column;
}
.support-task-frame-modal .modal-body { flex: 1; min-height: 0; padding: 14px; overflow: auto; }
.support-task-manager-content { min-height: 100%; }
.support-task-manager-loading { min-height: 320px; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--text-muted); }
.support-task-inline-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 18px; background: var(--card-bg); }
.support-task-inline-head small { display: block; color: var(--text-muted); font-weight: 700; margin-bottom: 4px; }
.support-task-inline-head strong { font-size: 18px; }
.support-task-inline-table-wrap { border: 1px solid var(--border-color); border-radius: 18px; background: var(--card-bg); overflow: auto; }
.support-task-inline-table { margin-bottom: 0; }
.support-task-inline-table .task-detail-row > td { background: var(--body-bg); }
.support-task-inline-table .task-detail-lazy-content { margin: 0; }
.support-task-inline-table .actions-wrap { flex-wrap: wrap; justify-content: flex-start; }
body.dooloop-embedded-task-page .sidebar,
body.dooloop-embedded-task-page .topbar,
body.dooloop-embedded-task-page .global-header,
body.dooloop-embedded-task-page .page-header:not(.tasks-page-header) {
    display: none !important;
}
body.dooloop-embedded-task-page .app-layout,
body.dooloop-embedded-task-page .main-content,
body.dooloop-embedded-task-page .content-wrapper {
    margin: 0 !important;
    padding: 10px !important;
    width: 100% !important;
    max-width: none !important;
}
@media (max-width: 1240px) {
    .support-review-grid { grid-template-columns: minmax(240px, 320px) minmax(320px, 1fr); }
    .support-request-main { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 820px) {
    .support-review-grid { grid-template-columns: 1fr; }
    .support-request-hero { flex-direction: column; align-items: stretch; }
    .support-glance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .support-glance-grid { grid-template-columns: 1fr; }
}

.notification-steps-box { display: grid; gap: 10px; }
.notification-variable-step-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    margin-top: 4px;
}
.notification-variable-step-title span {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: var(--primary-color);
    color: #fff;
    font-size: 12px;
}
.notif-var-row.active .notif-chip,
.filter-chip.active {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.notification-insert-preview {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px dashed var(--primary-color);
    border-radius: 14px;
    background: rgba(59,130,246,.08);
}
.notification-insert-preview code { direction: ltr; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.notification-filter-grid { display: grid; gap: 8px; }
.notification-step-empty {
    padding: 12px;
    border-radius: 14px;
    background: rgba(148,163,184,.10);
    color: var(--text-muted);
    font-weight: 700;
}
@media (max-width: 1180px) {
    .settings-card,
    .settings-page .card.settings-card,
    .settings-card:first-of-type {
        max-width: 100%;
        overflow: visible;
    }
    .notification-console-layout,
    .settings-grid,
    .connector-grid {
        grid-template-columns: 1fr !important;
    }
    .notification-side-panel { order: -1; }
}

html[data-connection="offline"] body::before,
.connection-problem::after,
.realtime-offline-banner,
.dooloop-offline-toast,
#connectionStatusNotice,
#realtimeConnectionNotice {
    content: none !important;
    display: none !important;
}
.badge-warning {
    background: rgba(245,158,11,.14);
    color: #b45309;
    border-color: rgba(245,158,11,.28);
}


/* Support request operation pickers */
.support-operation-picker-field {
    border: 1px solid rgba(59, 130, 246, 0.12);
    border-radius: 16px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(59,130,246,.06), rgba(16,185,129,.04));
}
.support-operation-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}
.support-operation-picker-grid .site-picker-button {
    min-height: 52px;
    border-radius: 14px;
}
.support-operation-picker-grid .site-picker-button > i {
    width: 26px;
    text-align: center;
    color: var(--accent);
}
.support-operation-selected-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.support-review-selection-summary {
    min-height: 32px;
    align-items: center;
    padding: 6px 8px;
    border: 1px dashed rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    background: rgba(255,255,255,.46);
}
.support-review-selection-summary .tag-chip {
    max-width: 100%;
}
.support-review-picker-modal {
    width: min(720px, calc(100vw - 28px)) !important;
    max-width: 720px !important;
}
.support-review-picker-modal .modal-body {
    display: grid;
    gap: 12px;
}
.support-review-picker-modal .quick-search {
    width: 100%;
    min-width: 0;
}
.support-review-picker-modal .quick-options.support-review-picker-options {
    display: block;
    max-height: min(56vh, 430px);
    overflow: auto;
    padding: 8px;
    margin-top: 8px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.72);
}
.support-review-picker-modal .quick-entity-option {
    width: 100%;
    text-align: right;
}
.support-review-picker-modal .quick-entity-option.active {
    border-color: rgba(16, 185, 129, 0.48) !important;
    background: linear-gradient(90deg, rgba(16,185,129,.12), rgba(59,130,246,.08)) !important;
}
.support-review-picker-selected {
    min-height: 38px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(148, 163, 184, 0.08);
}
@media (max-width: 640px) {
    .support-operation-picker-grid,
    .support-operation-selected-grid {
        grid-template-columns: 1fr;
    }
    .support-review-picker-modal {
        width: calc(100vw - 12px) !important;
    }
}

/* v28: upload icon-only tiles and support decision responsive controls */
.ops-upload-main {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 0 !important;
    padding: 12px !important;
}
.ops-upload-main strong,
.ops-upload-main span {
    display: none !important;
}
.ops-upload-main i.fa-cloud-arrow-up {
    grid-row: auto !important;
    margin: auto !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
}
.support-decision-panel {
    display: grid;
    gap: 12px;
    overflow: visible;
}
.support-decision-panel .form-group,
.support-decision-panel .field-head,
.support-operation-picker-field,
.support-operation-selected-grid,
.support-operation-picker-grid {
    min-width: 0;
    max-width: 100%;
}
.support-decision-panel .segmented-control,
.support-decision-panel .segmented-control.wrap-control,
.support-plan-coverage-toggle {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch;
    gap: 8px;
    max-width: 100%;
}
.support-decision-panel .segmented-control button {
    flex: 1 1 118px;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.55;
}
.support-plan-coverage-toggle button {
    flex-basis: 145px;
    font-weight: 900;
}
#supportOutOfPlanWrap {
    border: 1px dashed rgba(245, 158, 11, 0.38);
    border-radius: 14px;
    padding: 10px;
    background: rgba(245, 158, 11, 0.07);
}
#supportOutOfPlanWrap textarea {
    min-width: 0;
    width: 100%;
}
.support-decision-panel textarea,
.support-decision-panel input,
.support-decision-panel .site-picker-button,
.support-decision-panel .ops-picker-button {
    max-width: 100%;
}
@media (max-width: 1380px) {
    .support-review-grid {
        grid-template-columns: minmax(220px, 285px) minmax(300px, 1fr) minmax(260px, 340px);
    }
    .support-operation-picker-grid,
    .support-operation-selected-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 1120px) {
    .support-review-grid {
        grid-template-columns: minmax(220px, 320px) minmax(320px, 1fr);
    }
    .support-decision-panel {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
    .support-decision-panel > h4,
    .support-operation-picker-field,
    #supportOutOfPlanWrap,
    .support-decision-panel .form-group:has(#supportReviewCustomerMessage),
    .support-decision-panel .form-group:has(#supportReviewStaffNote),
    .support-decision-panel .form-group:has(#supportReviewAttachments) {
        grid-column: 1 / -1;
    }
}
@media (max-width: 720px) {
    .support-decision-panel {
        grid-template-columns: 1fr;
    }
    .support-decision-panel .segmented-control button {
        flex-basis: 100%;
    }
}

/* v201: glossary, terminology and modal stacking fixes */
.voice-recorder-backdrop.active {
    z-index: 120000 !important;
}
.voice-recorder-backdrop.active .voice-recorder-modal {
    z-index: 120001 !important;
}
.ops-definition-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.ops-definition-panel > div {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    background: var(--bg-soft, rgba(148,163,184,.08));
}
.ops-definition-panel strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
}
.ops-definition-panel span {
    display: block;
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 13px;
}
.ops-glossary-form,
.ops-glossary-tools,
.ops-glossary-list,
.ops-scan-results {
    margin-top: 16px;
}
.ops-glossary-row strong small {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-weight: 500;
}
.ops-glossary-tools {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.ops-glossary-tools .form-control {
    max-width: 420px;
}
.ops-scan-results h4 {
    margin: 0 0 10px;
}
a.glossary-link {
    border-bottom: 1px dashed currentColor;
    text-decoration: none;
    cursor: help;
}
.glossary-modal-body,
.glossary-page-body {
    line-height: 1.9;
}
.glossary-standalone {
    min-height: 100vh;
    background: var(--bg);
    padding: 28px;
}
.glossary-page-card {
    max-width: 880px;
    margin: 0 auto;
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 24px;
    box-shadow: var(--shadow-lg, 0 20px 45px rgba(15,23,42,.12));
}
.glossary-page-card h1 {
    margin: 18px 0 10px;
}

/* Team access tags (v203) */
.team-access-field { min-width: 150px; max-width: 300px; margin-bottom: 8px; }
.team-access-field label { font-size: 11px; margin-bottom: 4px; color: var(--text-muted); font-weight: 600; }
.team-tag-picker { position: relative; min-height: 34px; border: 1px solid var(--border-color, var(--border)); border-radius: 10px; background: var(--card-bg, #fff); padding: 4px; display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.team-selected-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.team-selected-chip { border: 1px solid var(--border-color, var(--border)); background: var(--bg-secondary); border-radius: 999px; padding: 2px 6px; font-size: 11px; color: var(--text-primary); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.team-selected-chip i { font-size: 10px; opacity: .65; }
.team-tag-entry { border: 0 !important; box-shadow: none !important; min-width: 70px; flex: 1; padding: 2px 4px !important; height: 24px !important; background: transparent !important; font-size: 11px; }
.team-tag-menu { position: absolute; z-index: 1100; top: calc(100% + 5px); right: 0; left: 0; display: none; max-height: 190px; overflow: auto; border: 1px solid var(--border-color, var(--border)); border-radius: 12px; background: var(--card-bg, #fff); box-shadow: var(--shadow-md, 0 10px 24px rgba(15,23,42,.12)); padding: 5px; }
.team-tag-picker.open .team-tag-menu { display: grid; gap: 3px; }
.team-menu-option { width: 100%; border: 0; background: transparent; border-radius: 9px; padding: 7px 8px; text-align: right; font-size: 12px; color: var(--text-primary); cursor: pointer; display: flex; gap: 7px; align-items: center; }
.team-menu-option:hover, .team-menu-option.active { background: var(--bg-secondary); }
.team-menu-empty { padding: 8px; color: var(--text-muted); font-size: 12px; }
.task-action-history .task-action-text, .task-action-archive .task-action-text, .task-action-edit .task-action-text { display: none; }
.task-action-history, .task-action-archive, .task-action-edit { min-width: 30px; width: 30px; padding-inline: 0 !important; justify-content: center; }
.task-urgency-inline { width: 18px; height: 18px; padding: 0; font-size: 0; }
.task-urgency-inline::before { content: "⚡"; font-size: 13px; font-weight: 900; line-height: 1; }
.task-title-team-filter { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-right: 8px; vertical-align: middle; }
.task-title-team-chip { border: 1px solid var(--border-color, var(--border)); background: rgba(255,255,255,.76); border-radius: 999px; padding: 3px 8px; font-size: 11px; color: var(--text-secondary); cursor: pointer; }
.task-title-team-chip.active { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.task-title-team-chip.colorize-active { box-shadow: inset 0 0 0 1px rgba(15,23,42,.08); }
.team-color-green { --team-color-bg: rgba(34,197,94,.09); --team-color-border: rgba(34,197,94,.33); --team-color-fg: #16803a; }
.team-color-blue { --team-color-bg: rgba(59,130,246,.09); --team-color-border: rgba(59,130,246,.33); --team-color-fg: #1d4ed8; }
.team-color-red { --team-color-bg: rgba(239,68,68,.08); --team-color-border: rgba(239,68,68,.30); --team-color-fg: #b91c1c; }
.team-color-amber { --team-color-bg: rgba(245,158,11,.10); --team-color-border: rgba(245,158,11,.35); --team-color-fg: #b45309; }
.team-color-violet { --team-color-bg: rgba(139,92,246,.09); --team-color-border: rgba(139,92,246,.33); --team-color-fg: #6d28d9; }
.team-color-teal { --team-color-bg: rgba(20,184,166,.09); --team-color-border: rgba(20,184,166,.33); --team-color-fg: #0f766e; }
.team-color-rose { --team-color-bg: rgba(244,63,94,.08); --team-color-border: rgba(244,63,94,.30); --team-color-fg: #be123c; }
.team-color-slate { --team-color-bg: rgba(100,116,139,.08); --team-color-border: rgba(100,116,139,.28); --team-color-fg: #475569; }
.task-title-team-chip[class*="team-color-"], .team-tag-chip[class*="team-color-"] { background: var(--team-color-bg); border-color: var(--team-color-border); color: var(--team-color-fg); }
.task-main-row.team-row-colorized { background: var(--team-row-bg, rgba(255,255,255,.92)); }
.task-main-row.team-row-colorized.team-color-green { --team-row-bg: rgba(34,197,94,.045); }
.task-main-row.team-row-colorized.team-color-blue { --team-row-bg: rgba(59,130,246,.045); }
.task-main-row.team-row-colorized.team-color-red { --team-row-bg: rgba(239,68,68,.04); }
.task-main-row.team-row-colorized.team-color-amber { --team-row-bg: rgba(245,158,11,.045); }
.task-main-row.team-row-colorized.team-color-violet { --team-row-bg: rgba(139,92,246,.045); }
.task-main-row.team-row-colorized.team-color-teal { --team-row-bg: rgba(20,184,166,.045); }
.task-main-row.team-row-colorized.team-color-rose { --team-row-bg: rgba(244,63,94,.04); }
.task-main-row.team-row-colorized.team-color-slate { --team-row-bg: rgba(100,116,139,.04); }
.monitor-team-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.monitor-team-card { border: 1px solid var(--border-color, var(--border)); border-radius: var(--radius-lg); background: var(--card-bg, #fff); padding: 14px; box-shadow: var(--shadow-sm, 0 6px 16px rgba(15,23,42,.06)); }
.monitor-team-card h4 { margin: 0 0 10px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.monitor-team-kpis { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.monitor-team-kpis span { background: var(--bg-secondary); border-radius: 10px; padding: 8px; font-size: 12px; color: var(--text-secondary); }
.monitor-team-kpis strong { display:block; color: var(--text-primary); font-size: 14px; margin-top: 3px; }


.task-action-btn.icon-only .task-action-text { display: none !important; }
.task-action-btn.icon-only { min-width: 30px; width: 30px; padding-inline: 0 !important; justify-content: center; }
.team-menu-option.create-option { color: var(--accent); font-weight: 700; }
.monitor-team-workspace { margin-bottom: 14px; }
.monitor-team-selector { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.monitor-team-card { cursor:pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.monitor-team-card.active { border-color: var(--team-color-border); box-shadow: 0 0 0 2px var(--team-color-bg), var(--shadow-sm, 0 6px 16px rgba(15,23,42,.06)); }
.monitor-team-card:hover { transform: translateY(-1px); }
.monitor-team-overview-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; }
.monitor-team-focus { border:1px solid var(--team-color-border, var(--border)); background:linear-gradient(180deg, var(--team-color-bg, rgba(255,255,255,.9)), rgba(255,255,255,.92)); border-radius:16px; padding:14px; }
.monitor-team-focus-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.monitor-team-focus-head h4, .monitor-team-focus h4 { margin:0; color:var(--team-color-fg, var(--text-primary)); }
.monitor-team-focus-head span { color:var(--text-secondary); font-size:12px; }
.monitor-team-kpis.wide { grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); }
.monitor-team-member-table { margin-top:12px; }

/* v204 users + monitoring refinement */
.team-access-field { max-width: none; min-width: 0; margin: 0; }
.team-access-field .team-tag-picker { min-height: 32px; }
.team-access-field label { display: none !important; }
.users-page-grid {
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(280px, 1.1fr);
    gap: 16px;
    align-items: start;
    width: 100%;
}
.users-page-grid > .card { max-width: none !important; width: 100%; margin: 0; }
.users-create-card { grid-column: 1 / 2; }
.users-role-card { grid-column: 2 / 3; }
.users-list-card { grid-column: 1 / -1; }
.users-create-card .form-inline,
.users-role-card .form-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; align-items: end; }
.users-create-card .form-inline .btn[type="submit"] { width: max-content; min-width: 110px; }
.users-page-table { min-width: 980px; table-layout: auto; }
.users-page-table th,
.users-page-table td,
#usersListBody td {
    white-space: nowrap;
    vertical-align: middle;
}
.users-page-table .team-tag-list {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 4px;
    max-width: 320px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.users-page-table .actions-cell {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
}
.users-page-table .override-mark { margin-inline-start: 6px; white-space: nowrap; }
@media (max-width: 1100px) {
    .users-page-grid { grid-template-columns: 1fr; }
    .users-create-card,
    .users-role-card { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
    .users-create-card .form-inline,
    .users-role-card .form-inline { grid-template-columns: 1fr; }
    .users-create-card .form-inline .btn[type="submit"] { width: 100%; }
}
.monitor-overall-header,
.monitor-card-actions,
.monitor-scope-actions,
.monitor-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.monitor-overall-header { justify-content: space-between; }
.monitor-card-actions { justify-content: flex-end; }
.monitor-row-actions { margin-top: 5px; }
.monitor-row-actions .btn { width: 28px; height: 28px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
.monitor-scope-modal .modal-body { display: grid; gap: 12px; }
.monitor-scope-actions { justify-content: flex-start; padding-bottom: 4px; border-bottom: 1px solid var(--border-color, var(--border)); }
.monitor-scope-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
.monitor-scope-tabs .tab { white-space: nowrap; }
.monitor-user-row { cursor: pointer; }
.monitor-user-row.active td { background: rgba(59,130,246,.045); }
.monitor-team-card { cursor: pointer; }
.monitor-team-card .tag-chip { white-space: nowrap; }
.monitor-table th,
.monitor-table td { white-space: nowrap; }


/* v205 library glossary and task alert refinements */
.ops-definition-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.ops-definition-panel > div {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    background: var(--bg-soft, rgba(148,163,184,.08));
}
.ops-definition-panel strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
}
.ops-definition-panel span {
    display: block;
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 13px;
}
.left-align-input,
.ops-glossary-form input[dir="ltr"] {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}
.task-urgency-inline {
    width: auto;
    min-width: 24px;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid rgba(185, 28, 28, .55);
    background: linear-gradient(135deg, #dc2626, #991b1b);
    color: #fff;
    aspect-ratio: 1;
}
.task-urgency-inline::before {
    content: "⚡";
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}
.task-alert-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    margin-left: 6px;
    border-radius: 50%;
    background: #facc15;
    border: 1px solid #eab308;
    color: transparent;
    box-shadow: none;
    padding: 0;
}
.task-alert-dot i { display: none; }


/* Comprehensive operation-library tour */
.tour-card {
    width: min(420px, calc(100vw - 24px));
    max-height: min(78vh, 520px);
}
.tour-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.tour-card-meta .tour-step {
    margin-bottom: 0;
}
.tour-section {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
}
.tour-card p {
    white-space: pre-line;
    font-size: 13px;
    line-height: 2;
}
.tour-progress {
    height: 5px;
    overflow: hidden;
    margin-top: 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border-color) 75%, transparent);
}
.tour-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
    transition: width .2s ease;
}
@media (max-width: 640px) {
    .tour-card {
        width: calc(100vw - 20px);
        max-height: min(80vh, 560px);
    }
    .tour-card p {
        font-size: 12px;
        line-height: 1.9;
    }
}

/* v208: permission scenarios and complete task-tour guidance */
.permission-presets-wrap{margin:12px 0 18px;padding:14px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--card) 88%,var(--primary) 12%)}
.permission-preset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:10px}
.permission-preset-card{display:flex;flex-direction:column;align-items:flex-start;text-align:right;gap:5px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);cursor:pointer;transition:.18s ease}
.permission-preset-card:hover,.permission-preset-card.active{border-color:var(--primary);box-shadow:0 5px 18px rgba(0,0,0,.08);transform:translateY(-1px)}
.permission-preset-card strong{font-size:14px}.permission-preset-card span{font-size:12px;line-height:1.8;color:var(--muted)}.permission-preset-card small{font-size:11px;color:var(--primary);font-weight:700}
.task-tour-guide-host{position:fixed;inset:auto 18px 18px 18px;z-index:100001;display:grid;grid-template-columns:2fr 1fr;gap:12px;pointer-events:none}
.task-tour-legend-card,.task-tour-team-card{pointer-events:auto;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:0 16px 50px rgba(0,0,0,.2)}
.task-tour-legend-card h4{margin:0 0 10px}.task-tour-legend-grid{display:grid;gap:10px}.task-tour-legend-grid>div{display:flex;flex-wrap:wrap;align-items:center;gap:7px}.task-tour-legend-grid>div>strong{min-width:70px}
.task-tour-team-card{display:flex;align-items:center;gap:12px}.task-tour-team-card>i{font-size:28px;color:var(--success)}.task-tour-team-card p{margin:5px 0 0;color:var(--muted);line-height:1.8}
.task-priority-chip{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:11px;border:1px solid var(--border)}
.task-priority-chip.important{font-weight:700}.task-priority-chip.urgent{border-color:var(--warning)}.task-priority-chip.urgent-important{border-color:var(--danger);font-weight:800}
@media(max-width:800px){.task-tour-guide-host{grid-template-columns:1fr;max-height:48vh;overflow:auto}.permission-preset-grid{grid-template-columns:1fr}}