/* ============================================================================
   ENTERPRISE INTELLIGENT INDUSTRIAL ERP CORE SUITE - MASTER STYLESHEET
   Architectural Framework Edition: High Density, MDI Matrix & Autonomous AI Layers
   ============================================================================ */

/* ----------------------------------------------------------------------------
   PART 1: CENTRAL DESIGN TOKEN MATRIX & SYSTEM VARIABLES
   ---------------------------------------------------------------------------- */
:root {
    /* Main Canvas Mechanics & Layout Grids */
    --win-bg: #e4e7eb;
    --win-panel: #ffffff;
    --win-panel-hover: #f8fafc;
    --win-border: #94a3b8;
    --win-border-light: #cbd5e1;
    --win-border-focus: #2563eb;
    --win-header-start: #fdfdfd;
    --win-header-end: #cbd5e1;
    --win-text: #0f172a;
    --win-text-muted: #475569;
    --win-selected-blue: #3875d7;
    --win-selected-bg: #7f7ec5;

    /* Semantic DevExpress Data State Engine Core Colors */
    --state-unreviewed: #e3f2fd;
    --state-unreviewed-txt: #0d47a1;
    --state-full: #d4edda;
    --state-full-txt: #155724;
    --state-partial: #f8d7da;
    --state-partial-txt: #721c24;
    --state-partial-approved: #fff3cd;
    --state-partial-approved-text: #856404;
    --state-block: #7f1d1d;
    --state-block-txt: #ffffff;

    /* Priority, SLA Rails & Functional Assets Indicators */
    --color-sla-complaint: #ef4444;
    --color-sla-24: #f59e0b;
    --color-sla-48: #64748b;
    --color-green-ok: #10b981;

    /* Advanced Autonomous Artificial Intelligence Tokens */
    --ai-accent: #7c3aed;
    --ai-accent-hover: #6d28d9;
    --ai-accent-active: #5b21b6;
    --ai-accent-light: #f5f3ff;
    --ai-border: #ddd6fe;
    --glass-bg: rgba(255, 255, 255, 0.85);
    
    /* Modern Industrial Shadow Hierarchies */
    --card-shadow: 0 4px 20px -2px rgba(148, 163, 184, 0.12), 0 2px 8px -1px rgba(148, 163, 184, 0.08);
    --modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    --panel-glow: 0 0 15px rgba(124, 92, 246, 0.15);
}

/* ----------------------------------------------------------------------------
   PART 2: GLOBAL ELEMENT RESET & ROOT TYPOGRAPHY
   ---------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Tahoma', 'Segoe UI', Arial, sans-serif;
    font-size: 11.5px;
    letter-spacing: -0.015em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--win-bg);
    color: var(--win-text);
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
    direction: rtl;
    touch-action: manipulation;
}

input, select, textarea, button {
    outline: none;
    font-family: inherit;
}

::selection {
    background-color: var(--win-selected-blue);
    color: #ffffff;
}

/* ----------------------------------------------------------------------------
   PART 3: HIGH-DENSITY SCROLLBAR SYSTEM
   ---------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-left: 1px solid var(--win-border-light);
    border-top: 1px solid var(--win-border-light);
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border: 2px solid #f1f5f9;
    border-radius: 4px;
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

::-webkit-scrollbar-corner {
    background: #f1f5f9;
}

/* ----------------------------------------------------------------------------
   PART 4: TOP COMMAND RIBBON & MULTI-TIERED FLYOUTS
   ---------------------------------------------------------------------------- */
#ribbon-layer-wrapper {
    position: relative;
    z-index: 999999;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.win-menu-ribbon {
    background: linear-gradient(to bottom, #ffffff 0%, #edf2f7 100%);
    border-bottom: 1px solid var(--win-border);
    display: flex;
    padding: 2px 10px;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    min-height: 32px;
}

.menu-node-anchor {
    position: relative;
    padding: 5px 12px;
    cursor: pointer;
    font-weight: bold;
    color: #334155;
    border-radius: 4px;
    transition: all 0.15s ease-in-out;
}

.menu-node-anchor:hover {
    background-color: var(--win-selected-bg);
    color: var(--win-selected-blue);
    box-shadow: inset 0 0 0 1px rgba(56, 117, 215, 0.15);
}

/* Dropdown Sub-menus Layout Positioning */
.menu-flyout-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--win-panel);
    border: 1px solid var(--win-border);
    border-radius: 0 0 6px 6px;
    min-width: 260px;
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.15);
    z-index: 9999999;
    overflow: hidden;
    padding: 4px 0;
}

.menu-node-anchor:hover .menu-flyout-dropdown {
    display: block;
    animation: menuAnchorFadeIn 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes menuAnchorFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.menu-flyout-row {
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: all 0.1s ease;
    color: #1e293b;
    font-weight: normal;
}

.menu-flyout-row:last-child {
    border-bottom: none;
}

.menu-flyout-row:hover {
    background-color: var(--win-selected-blue);
    color: #ffffff;
}

/* Nested Cascading Context Matrices */
.cascading-menu-node {
    position: relative;
}

.cascading-sub-dropdown {
    display: none;
    position: absolute;
    right: 100%;
    top: -4px;
    background-color: var(--win-panel);
    border: 1px solid var(--win-border);
    border-radius: 4px;
    min-width: 240px;
    box-shadow: -4px 4px 15px rgba(0,0,0,0.12);
    padding: 4px 0;
}

.cascading-menu-node:hover .cascading-sub-dropdown {
    display: block;
    animation: menuAnchorFadeIn 0.14s ease;
}

/* ----------------------------------------------------------------------------
   PART 5: SYSTEM TOOLBAR & ACTION SUB-HEADERS
   ---------------------------------------------------------------------------- */
.system-action-bar {
    background-color: #f8fafc;
    border-bottom: 1px solid #cbd5e1;
    padding: 6px 16px;
    display: flex;
    gap: 8px;
    align-items: center;
    box-shadow: inset 0 1px 0 #ffffff;
    min-height: 40px;
}

#system-environment-label-badge {
    margin-right: auto;
    font-size: 11px;
    font-weight: bold;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #f1f5f9;
    padding: 4px 12px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.active-status-dot-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--color-green-ok);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--color-green-ok);
}

/* DevExpress Dense Command Buttons */
.dx-btn {
    background: linear-gradient(to bottom, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid #cbd5e1;
    padding: 6px 16px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
    color: #334155;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dx-btn:hover {
    background: linear-gradient(to bottom, #f8fafc 0%, #e2e8f0 100%);
    border-color: #94a3b8;
    color: #0f172a;
}

.dx-btn:focus {
    box-shadow: 0 0 0 2px rgba(56, 117, 215, 0.2);
    border-color: var(--win-border-focus);
}

.dx-btn:active {
    background: #e2e8f0;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.dx-btn-blue {
    background: linear-gradient(to bottom, #4ba2ea 0%, #1d65b6 100%);
    color: #ffffff;
    border-color: #1d65b6;
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.dx-btn-blue:hover {
    background: linear-gradient(to bottom, #3b8ed8 0%, #17549c 100%);
    border-color: #17549c;
    color: #ffffff;
}

/* ----------------------------------------------------------------------------
   PART 6: INTEGRATED RUNNING TICKER ALERT CHANNEL
   ---------------------------------------------------------------------------- */
.system-integrated-ticker-hub {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 4px 12px;
    border-radius: 6px;
    margin-right: 12px;
    flex: 1;
    max-width: 600px;
    overflow: hidden;
    height: 28px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}

.ticker-badge-pulse {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: white;
    font-size: 9.5px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

.ticker-text-wrapper-track {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}

.ticker-text-wrapper-track span {
    display: inline-block;
    color: #4c1d95;
    font-weight: 600;
    font-size: 11px;
}

/* ----------------------------------------------------------------------------
   PART 7: MDI WORKSPACE CANVAS & BACKDROP WATERMARKS
   ---------------------------------------------------------------------------- */
.mdi-desktop-canvas {
    flex: 1;
    position: relative;
    background: radial-gradient(circle at 50% 50%, #f8fafc 0%, #e2e8f0 100%) !important;
    padding: 24px !important;
    overflow-y: auto !important;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.amisa-backdrop-active {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%) !important;
}

.dashboard-header-summary {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.dashboard-welcome-title h1 {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 2px;
}

.dashboard-welcome-title p {
    color: #64748b;
    font-size: 11.5px;
}

/* Desktop Log Backdrop Overlays */
.amisa-logo-watermark {
    position: absolute;
    bottom: 60px;
    right: 40px;
    pointer-events: none;
    opacity: 0.12;
    z-index: 1;
}

.amisa-logo-text {
    font-size: 40px;
    font-weight: 900;
    color: #1e293b;
    font-family: 'Century Gothic', sans-serif;
}

.amisa-logo-sub {
    font-size: 12px;
    color: #334155;
    letter-spacing: 2px;
}

.amisa-system-parameters-wall {
    position: absolute;
    top: 20px;
    left: 20px;
    font-family: 'Consolas', monospace;
    color: #475569;
    font-size: 11px;
    line-height: 16px;
    pointer-events: none;
    opacity: 0.3;
    z-index: 1;
}

/* ----------------------------------------------------------------------------
   PART 8: PREMIUM METRIC GRID & GLASSMORPHIC GLOW CARDS
   ---------------------------------------------------------------------------- */
.premium-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 100%;
    z-index: 2;
}

.premium-erp-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    min-height: 250px;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s ease, box-shadow 0.22s ease;
}

.premium-erp-card:hover {
    transform: translateY(-4px);
    border-color: #cbd5e1;
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
}

/* Interactive Card Top Color Indicator Strips */
.card-glow-element {
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 4px;
    background: #cbd5e1;
    transition: background 0.22s ease;
}

.premium-erp-card:hover .card-glow-element { background: var(--win-selected-blue); }
.premium-erp-card.ai-card-highlight .card-glow-element { background: linear-gradient(90deg, #7c3aed, #a78bfa); }

.card-main-content-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.card-header-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-header-icon-bullet {
    width: 6px; height: 6px;
    border-radius: 50%;
}
.bullet-persons { background: #3b82f6; }
.bullet-companies { background: #10b981; }
.bullet-projects { background: #f59e0b; }
.bullet-ai { background: #8b5cf6; }

.card-caption-text { font-weight: 800; color: #1e293b; font-size: 12px; }
.card-status-dot { font-size: 10px; font-weight: bold; padding: 2px 8px; border-radius: 20px; }
.status-online { background: #dcfce7; color: #15803d; }
.status-sync { background: #dbeafe; color: #1d4ed8; }
.status-ai { background: #f3e8ff; color: #6b21a8; }

.card-counter-display {
    font-size: 36px;
    font-weight: 900;
    color: #0f172a;
    font-family: 'Consolas', sans-serif;
    margin-bottom: 10px;
    line-height: 1;
}
.card-counter-display small { font-size: 11.5px; color: #64748b; font-weight: normal; margin-right: 4px; }

.card-insights-box {
    font-size: 11.5px;
    color: #475569;
    line-height: 1.6;
    background: #f8fafc;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #f1f5f9;
}

.card-launcher-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: auto; }
.card-btn-link {
    background: #ffffff; border: 1px solid #cbd5e1; padding: 8px; border-radius: 6px;
    text-align: center; font-weight: bold; color: #475569; cursor: pointer; transition: all 0.15s ease;
}
.card-btn-link:hover { background: #f8fafc; border-color: #94a3b8; color: #0f172a; }

/* ----------------------------------------------------------------------------
   PART 9: GLASSMORPHIC AI ASSISTANT PANEL & DIALOGUE SYSTEM
   ---------------------------------------------------------------------------- */
.ai-agent-sidebar {
    position: fixed;
    top: 85px;
    left: 24px;
    width: 350px;
    height: calc(100vh - 165px);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(124, 92, 246, 0.15);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.ai-agent-sidebar.ai-collapsed-state {
    transform: translateX(-400px);
    opacity: 0;
    pointer-events: none;
}

.ai-sidebar-header {
    background: linear-gradient(135deg, #6d28d9 0%, #4c1d95 100%);
    padding: 16px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ai-header-title-text { display: flex; flex-direction: column; }
.ai-header-subtitle-status { font-size: 9px; opacity: 0.7; font-family: monospace; }

.ai-pulse-dot {
    width: 8px; height: 8px; background: #10b981; border-radius: 50%;
    box-shadow: 0 0 8px #10b981; animation: aiPulseRingTrack 2s infinite;
}
@keyframes aiPulseRingTrack {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.ai-toggle-minimize-btn {
    font-size: 11px; font-weight: bold; cursor: pointer;
    background: rgba(255, 255, 255, 0.2); width: 22px; height: 22px;
    display: flex; justify-content: center; align-items: center; border-radius: 6px;
}
.ai-toggle-minimize-btn:hover { background: rgba(255, 255, 255, 0.3); }

/* Chat Subsystem Elements Area */
.ai-chat-scroller {
    flex: 1; padding: 16px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 14px;
    background: rgba(248, 250, 252, 0.5);
}

.chat-message-row { display: flex; gap: 10px; width: 100%; }
.row-agent { align-items: flex-start; }

.chat-avatar-badge-icon {
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 9px; flex-shrink: 0;
}
.badge-icon-ai { background: #ddd6fe; color: #6d28d9; }

.chat-bubble { max-width: 80%; padding: 10px 14px; border-radius: 12px; font-size: 11.5px; line-height: 1.6; }
.bubble-agent { background: #ffffff; color: #1e293b; border: 1px solid #e2e8f0; border-top-right-radius: 0; }
.bubble-user { background: #6d28d9; color: #ffffff; margin-right: auto; border-top-left-radius: 0; }

.ai-quick-chips-wrapper { padding: 10px 14px; background: #ffffff; border-top: 1px solid #f1f5f9; display: flex; gap: 6px; overflow-x: auto; }
.ai-action-chip { background: #f1f5f9; border: 1px solid #e2e8f0; padding: 6px 12px; border-radius: 20px; font-weight: bold; color: #475569; cursor: pointer; white-space: nowrap; }
.ai-action-chip:hover { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }

.ai-input-form-wrapper { padding: 12px; background: #ffffff; border-top: 1px solid #e2e8f0; display: flex; gap: 8px; }
.ai-chat-input { flex: 1; height: 32px !important; border-radius: 6px !important; border: 1px solid #cbd5e1 !important; padding: 0 12px !important; }
.ai-send-btn { background: #6d28d9; color: #ffffff; border: none; padding: 0 16px; border-radius: 6px; font-weight: bold; cursor: pointer; }
.ai-send-btn:hover { background: #5b21b6; }

/* Re-open Launcher Floating Badge Trigger */
.ai-floating-reopen-trigger-badge {
    position: fixed; left: 24px; bottom: 50px;
    background: linear-gradient(135deg, #6d28d9 0%, #4c1d95 100%);
    color: white; padding: 12px 20px; border-radius: 30px; font-weight: bold; cursor: pointer;
    box-shadow: 0 10px 25px rgba(109, 40, 217, 0.3); display: flex; align-items: center; gap: 8px;
    z-index: 99998; transform: translateY(150px); opacity: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
}
.ai-floating-reopen-trigger-badge.badge-active { transform: translateY(0); opacity: 1; }

/* ----------------------------------------------------------------------------
   PART 10: CLASSIC MDI FORM WINDOW FRAMES & MANAGEMENT CONTROLS
   ---------------------------------------------------------------------------- */
.winforms-window-frame {
    position: absolute;
    background-color: var(--win-bg);
    border: 1px solid #475569;
    border-radius: 6px;
    box-shadow: var(--modal-shadow);
    display: flex;
    flex-direction: column;
    resize: both; /* Browser Native Grip Engine Trigger */
    overflow: hidden;
    padding-bottom: 2px;
}

.winforms-window-frame.window-maximized-state {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0;
    resize: none !important;
}

/* Corner Grip Informational Hash */
.winforms-window-frame::after {
    content: "▰";
    position: absolute;
    bottom: 1px;
    left: 2px;
    font-size: 10px;
    color: #94a3b8;
    pointer-events: none;
    z-index: 99999;
    transform: rotate(90deg);
}
.winforms-window-frame.window-maximized-state::after { display: none; }

.window-caption-title-strip {
    background: linear-gradient(to bottom, var(--win-header-start) 0%, var(--win-header-end) 100%);
    padding: 8px 12px;
    font-weight: bold;
    color: #0f172a;
    border-bottom: 1px solid var(--win-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    touch-action: none;
}

.window-caption-title-strip span::after {
    content: " (قابل تغییر سایز)";
    font-size: 9px;
    color: var(--win-text-muted);
    font-weight: normal;
}

.window-action-buttons {
    display: flex;
    gap: 4px;
}

.win-min-btn, .win-max-btn, .win-close-btn {
    width: 24px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    font-size: 11px;
}
.win-min-btn:hover, .win-max-btn:hover { background-color: rgba(0,0,0,0.08); }
.win-close-btn:hover { background-color: #ef4444; color: #ffffff; }

.window-body-container-viewport {
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: auto;
    background-color: #f8fafc;
}

/* ----------------------------------------------------------------------------
   PART 11: SPLITTER SYSTEM & MULTI-PANE VIEWPORTS
   ---------------------------------------------------------------------------- */
.splitter-wrapper-horizontal {
    display: flex;
    flex: 1;
    gap: 8px;
    height: 100%;
    min-height: 0;
}

.splitter-inner-panel-block {
    background-color: var(--win-panel);
    border: 1px solid var(--win-border);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.splitter-inner-caption {
    background: linear-gradient(to bottom, #ffffff 0%, #edf2f7 100%);
    padding: 6px 12px;
    font-weight: bold;
    border-bottom: 1px solid var(--win-border);
    color: #1e293b;
    font-size: 11.5px;
}

/* ----------------------------------------------------------------------------
   PART 12: DEVEXPRESS-STYLE DENSE DATA TABLES (DATAGRIDS)
   ---------------------------------------------------------------------------- */
.dx-grid-holder {
    border: 1px solid var(--win-border);
    background-color: var(--win-panel);
    overflow: auto;
    flex: 1;
    border-radius: 4px;
}

.dx-drag-and-drop-group-bar {
    background: linear-gradient(to bottom, #ffffff 0%, #edf2f7 100%);
    padding: 8px 12px;
    border-bottom: 1px solid var(--win-border);
    color: #64748b;
    font-style: italic;
}

.dx-data-matrix-table {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
    white-space: nowrap;
}

.dx-data-matrix-table th {
    background: linear-gradient(to bottom, #ffffff 0%, #e2e8f0 100%);
    padding: 8px 10px;
    font-weight: bold;
    color: #1e293b;
    border-left: 1px solid var(--win-border-light);
    border-bottom: 2px solid var(--win-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.dx-data-matrix-table td {
    padding: 7px 10px;
    border-left: 1px solid var(--win-border-light);
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.dx-data-matrix-table tr:nth-child(even) { background-color: #f8fafc; }
.dx-data-matrix-table tr:hover { background-color: var(--win-selected-bg); }

.dx-data-matrix-table tr.active-selected-row {
    background-color: var(--win-selected-blue) !important;
    color: #ffffff !important;
}
.dx-data-matrix-table tr.active-selected-row td { color: #ffffff !important; }

/* ----------------------------------------------------------------------------
   PART 13: STATUS TAG PILLS & PRIORITIZATION INDICATORS
   ---------------------------------------------------------------------------- */
.state-tag-pill {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    display: inline-block;
}

.pill-state-0 { background-color: var(--state-unreviewed); color: var(--state-unreviewed-txt); }
.pill-state-1 { background-color: var(--state-partial-approved); color: var(--state-partial-approved-text); }
.pill-state-2 { background-color: var(--state-partial); color: var(--state-partial-txt); }
.pill-state-3 { background-color: var(--state-full); color: var(--state-full-txt); }
.pill-state-4 { background-color: var(--state-block); color: var(--state-block-txt); }

/* High Priority SLA Row indicators */
.row-indicator-complaint { border-right: 4px solid var(--color-sla-complaint) !important; background-color: #fef2f2; }
.row-indicator-24 { border-right: 4px solid var(--color-sla-24) !important; background-color: #fffbeb; }
.row-indicator-48 { border-right: 4px solid var(--color-sla-48) !important; }

/* ----------------------------------------------------------------------------
   PART 14: GRANULAR INPUT COMPONENTS & VEHICLE PLATFORMS
   ---------------------------------------------------------------------------- */
.filter-ribbon-group-box {
    background-color: var(--win-panel);
    border: 1px solid var(--win-border);
    padding: 6px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    border-radius: 4px;
}

.filter-item-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.filter-item-cell label { font-weight: bold; color: #475569; }

.win-form-input {
    padding: 4px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    height: 28px;
    background-color: #ffffff;
    color: #0f172a;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.win-form-input:focus { border-color: var(--win-border-focus); box-shadow: 0 0 0 2px rgba(56, 117, 215, 0.12); }
.win-form-input[readonly] { background-color: #f1f5f9; color: #64748b; cursor: not-allowed; }

/* Iranian National License Plate Widget Components */
.ir-plate-container {
    display: inline-flex;
    align-items: center;
    border: 1px solid #94a3b8;
    background-color: #ffffff;
    height: 28px;
    border-radius: 4px;
    direction: ltr;
    overflow: hidden;
}

.ir-plate-blue-band { width: 14px; height: 100%; background-color: #1d4ed8; }
.ir-plate-input-2 { width: 28px; text-align: center; border: none; height: 100%; font-weight: bold; font-size: 13px; }
.ir-plate-letter { width: 36px; border: none; font-weight: bold; font-size: 13px; text-align: center; background: #f8fafc; height: 100%; }
.ir-plate-input-3 { width: 36px; text-align: center; border: none; font-weight: bold; font-size: 13px; height: 100%; }
.ir-plate-divider { width: 1px; background-color: #0f172a; height: 100%; }

/* ----------------------------------------------------------------------------
   PART 15: HIERARCHICAL ACCESS TREE VIEWS WITH PSEUDO-LINES
   ---------------------------------------------------------------------------- */
.tree-view-viewport {
    padding: 10px;
    overflow-y: auto;
    background-color: #ffffff;
    flex: 1;
    border: 1px solid var(--win-border);
    border-radius: 4px;
}

.tree-node-item {
    margin-right: 20px;
    margin-top: 6px;
    position: relative;
}

.tree-node-caption { cursor: pointer; color: #334155; }
.tree-node-caption:hover { color: var(--win-selected-blue); }
.tree-node-caption.has-children { font-weight: bold; color: #991b1b; }

.tree-node-item::before {
    content: "";
    position: absolute;
    right: -12px;
    top: 8px;
    width: 10px;
    height: 1px;
    background-color: #cbd5e1;
}

/* ----------------------------------------------------------------------------
   PART 16: DYNAMIC PROGRESS BARS & SEGMENTED INDICATORS
   ---------------------------------------------------------------------------- */
.dx-progress-bar-container {
    width: 100%;
    height: 16px;
    background-color: #e2e8f0;
    border: 1px solid #cbd5e1;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.dx-progress-bar-fill {
    height: 100%;
    background: linear-gradient(to bottom, #10b981 0%, #059669 100%);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dx-progress-bar-text {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    text-align: center; font-size: 10px; font-weight: bold; color: #0f172a; line-height: 14px;
}

/* ----------------------------------------------------------------------------
   PART 17: TELEMETRY RASTER GRAPH PILLARS & DIAGRAM LEGENDS
   ---------------------------------------------------------------------------- */
.telemetry-bars-frame-container {
    height: 90px;
    background-color: #f8fafc;
    border: 1px solid var(--win-border-light);
    border-radius: 6px;
    display: flex;
    align-items: flex-end;
    padding: 4px;
    gap: 2px;
    position: relative;
}

.telemetry-raster-gridline-y {
    position: absolute; left: 0; right: 0;
    border-top: 1px dashed #cbd5e1; z-index: 1;
}

.telemetry-day-pillar-fill {
    flex: 1; z-index: 2; position: relative; border-radius: 2px 2px 0 0;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer;
}
.telemetry-day-pillar-fill:hover { filter: brightness(0.88); }

.color-legend-container-strip {
    display: flex; border: 1px solid var(--win-border); background-color: #edf2f7; padding: 3px; gap: 3px; border-radius: 4px;
}

.legend-node-block {
    flex: 1; text-align: center; padding: 6px; font-weight: bold; border-radius: 2px;
}

/* ----------------------------------------------------------------------------
   PART 18: TOAST NOTIFICATION HUB & CONTEXT ALERTS
   ---------------------------------------------------------------------------- */
#toast-alert-hub {
    position: fixed;
    bottom: 42px;
    left: 24px;
    z-index: 999999;
}

.hub-toast-card {
    background-color: #fffbeb;
    border-right: 4px solid var(--color-sla-24) !important;
    border: 1px solid var(--win-border);
    border-radius: 4px;
    padding: 10px 18px;
    margin-top: 6px;
    box-shadow: var(--card-shadow);
    animation: toastSliderNotificationTrackIn 0.25s ease-out;
    font-weight: bold;
    color: #78350f;
}

@keyframes toastSliderNotificationTrackIn {
    from { transform: translateX(-110%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ----------------------------------------------------------------------------
   PART 19: MDI RUNNING FORMS TASKBAR CHIP STRIP
   ---------------------------------------------------------------------------- */
.mdi-bottom-taskbar-strip {
    background: linear-gradient(to bottom, #f8fafc 0%, #cbd5e1 100%);
    border-top: 1px solid var(--win-border);
    display: flex;
    padding: 4px 8px 0 8px;
    gap: 4px;
    overflow-x: auto;
    min-height: 34px;
}

.tab-chip-item {
    padding: 6px 18px;
    background: linear-gradient(to bottom, #ffffff 0%, #e2e8f0 100%);
    border: 1px solid var(--win-border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    font-weight: bold;
    transition: all 0.15s ease;
}
.tab-chip-item:hover { background: #ffffff; color: var(--win-selected-blue); }
.tab-chip-item.chip-item-active { background: #f8fafc; color: #000000; border-top: 3px solid var(--win-selected-blue); padding-bottom: 7px; }

/* ----------------------------------------------------------------------------
   PART 20: UNIFIED DARK FOOTER STATUS BAR & LED INDICATORS
   ---------------------------------------------------------------------------- */
.desktop-footer-strip-bar {
    background-color: #0f172a;
    color: #f1f5f9;
    border-top: 1px solid #1e293b;
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    z-index: 999999;
}

.footer-cell-segment { display: flex; gap: 16px; align-items: center; }
.footer-cell-segment strong { color: #94a3b8; }

.led-indicator-box {
    padding: 3px 10px; border: 1px solid #334155; background-color: #1e293b;
    color: #64748b; border-radius: 4px; font-weight: bold; font-size: 10px;
}
.led-indicator-box.led-active {
    background-color: #10b981; color: #0f172a; border-color: #059669;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

/* ----------------------------------------------------------------------------
   PART 21: UI MICRO-INTERACTIONS & BREAKPOINTS
   ---------------------------------------------------------------------------- */
.dragging-active * {
    user-select: none !important;
    pointer-events: none !important;
}

/* Medium Screens (Tablets / Small Laptops Layout Overrides) */
@media screen and (max-width: 1150px) {
    .ai-agent-sidebar {
        height: 300px;
        width: calc(100% - 48px);
        position: relative;
        top: 0; left: 0;
        margin-top: 10px;
    }
    .ai-agent-sidebar.ai-collapsed-state { display: none; }
    .ai-floating-reopen-trigger-badge { bottom: 45px; left: auto; right: 24px; }
}

/* Small Screens (Mobile Layout Rails) */
@media screen and (max-width: 768px) {
    .winforms-window-frame { width: 96% !important; left: 2% !important; }
    .splitter-wrapper-horizontal { flex-direction: column !important; overflow-y: auto; }
    .splitter-inner-panel-block { flex: none !important; min-height: 250px; }
    .menu-flyout-dropdown { width: 100%; position: fixed; top: 40px; left: 0; }
    .system-action-bar { flex-wrap: wrap; }
    .system-integrated-ticker-hub { max-width: 100%; order: 2; width: 100%; margin-right: 0; }
}