/* =====================================================
   GLOBAL RESET & BASE
   ===================================================== */

:root {
    --textbox-border-color-focus: rgba(21,183,158,0.45);
    --textbox-box-shadow-focus: 0 0 0 4px rgba(21,183,158,0.12);
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
}

body {
    background: var(--color-bg-page);
    margin: 0;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-400);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-300) transparent;
}

::selection {
    background: rgba(21,183,158,0.18);
    color: inherit;
}

/* =====================================================
   APP SHELL
   ===================================================== */

i-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

.app {
    transition: margin var(--transition-sidebar);
    display: flex;
    flex-direction: column;
    width: auto;
    box-sizing: border-box;
}

.app-shrunk {
    margin-inline-start: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
}

i-router {
    flex: 1;
    padding: var(--space-5) var(--space-6);
    height: calc(100vh - var(--header-height));
    overflow: auto;
    min-width: 0;
    align-self: stretch;
    box-sizing: border-box;
    background: var(--color-bg-page);
}

i-router:has(.gov-dashboard) {
    padding: 0;
}

i-router > .route {
    box-sizing: border-box;
}

.route-dashboard {
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    background: var(--color-bg-page);
}

.route:not([selected]) {
    pointer-events: none;
}

/* =====================================================
   LOADING PANEL
   ===================================================== */

.loading-panel {
    position: absolute;
    z-index: var(--z-loading);
    width: 100%;
    height: 100%;
    background: var(--color-bg-page);
    align-items: center;
    display: flex;
    justify-content: center;
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    transition: all ease-out 0.5s 0.2s;
}

.loading-panel-hidden {
    opacity: 0;
    visibility: hidden;
    transition: all ease-out 0.5s 0.2s;
}

.loading {
    margin: 15vh auto;
    display: flex;
    font-weight: var(--weight-bold);
    align-items: center;
    flex-direction: column;
    color: var(--color-text-inverse);
}

/* =====================================================
   HEADER BAR
   ===================================================== */

.title-bar {
    display: flex;
    color: var(--color-text-primary);
    height: var(--header-height);
    align-items: center;
    background: var(--color-bg-surface);
    margin: 0;
    border-bottom: 1px solid var(--color-border-default);
    padding: 0 var(--space-5);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    box-shadow: var(--shadow-header);
    gap: var(--space-3);
}

.header-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.header-menu-btn:hover {
    background: var(--color-bg-hover);
    color: var(--coda-teal-deep);
}

.header-menu-btn:active {
    transform: scale(0.94);
}

.header-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.logo {
    height: 38px;
    width: 38px;
    padding: 2px;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.header-brand-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.header-system-name {
    font-size: var(--text-md);
    color: var(--color-text-primary);
    font-weight: var(--weight-bold);
    white-space: nowrap;
    letter-spacing: 0.3px;
    line-height: var(--leading-tight);
}

.header-system-subtitle {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    line-height: 1;
}

.header-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-gray-50);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    margin: 0 var(--space-4);
    min-width: 220px;
    max-width: 360px;
    min-height: 38px;
    flex: 1;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.header-search:focus-within {
    border-color: var(--coda-primary);
    box-shadow: var(--shadow-focus);
    background: var(--color-bg-surface);
}

.search-input {
    border: none;
    outline: none;
    font-family: var(--font-family);
    font-size: var(--text-sm);
    background: transparent;
    width: 100%;
    color: var(--color-text-secondary);
}

.search-input::placeholder {
    color: var(--color-text-muted);
}

.header-spacer {
    flex: 1;
}

.header-notification {
    position: relative;
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-text-tertiary);
}

.header-notification:hover {
    background: var(--color-bg-hover);
    color: var(--coda-teal-deep);
}

.notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--color-danger-500);
    color: var(--color-text-inverse);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    min-width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-bg-surface);
    padding: 0 3px;
    line-height: 1;
}

html[dir='rtl'] .notification-badge {
    right: auto;
    left: 2px;
}

/* =====================================================
   HEADER USER IDENTITY
   ===================================================== */

.header-user {
    display: flex;
    align-items: center;
}

.header-user-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    position: relative;
    text-decoration: none;
}

.header-user-info:hover {
    background: var(--color-bg-hover);
}

.header-user-details {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

html[dir='rtl'] .header-user-details {
    align-items: flex-start;
}

.header-user-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
    line-height: var(--leading-tight);
}

.header-user-role {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    line-height: 1;
}

.header-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--color-primary-50);
    color: var(--color-primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--color-primary-200);
}

.header-online-dot {
    position: absolute;
    bottom: 4px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-success-500);
    border: 2px solid var(--color-bg-surface);
}

html[dir='rtl'] .header-online-dot {
    left: auto;
    right: 6px;
}

/* =====================================================
   PROFILE DROPDOWN
   ===================================================== */

.profile-dropdown-wrapper {
    position: relative;
}

.profile-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    min-width: 220px;
    z-index: var(--z-dropdown);
    overflow: hidden;
    border: 1px solid var(--color-border-default);
    padding: var(--space-1) 0;
    animation: dropdown-enter 0.15s ease;
}

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

html[dir='rtl'] .profile-dropdown {
    left: auto;
    right: 0;
}

.profile-dropdown-wrapper:hover .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-4) var(--space-3);
}

.profile-dropdown-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--color-primary-50);
    color: var(--color-primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-1);
}

.profile-dropdown-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.profile-dropdown-role {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.dropdown-divider {
    height: 1px;
    background: var(--color-border-light);
    margin: var(--space-1) 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.dropdown-item:hover {
    background: var(--color-primary-50);
    color: var(--color-primary-600);
}

.dropdown-item-danger:hover {
    background: var(--color-danger-50);
    color: var(--color-danger-600);
}

/* =====================================================
   NETWORK STATUS
   ===================================================== */

.net {
    display: flex;
    gap: var(--space-12);
    padding: 0 var(--space-2);
}

.net span {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    background: var(--color-secondary-400);
    position: relative;
}

.net span::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    background: var(--color-success-500);
    transform: translate(-50%, -50%);
}

.net[status='0'] span::after {
    background: var(--color-text-muted);
}

.net[status='1'] span::after {
    background: var(--color-secondary-400);
    animation: pulse 1.5s infinite;
}

.net[status='3'] span::after {
    background: var(--color-warning-500);
    animation: pulse 1.5s infinite;
}

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

/* =====================================================
   CONNECTION BANNER
   ===================================================== */

.connection-banner {
    text-align: center;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    transition: all var(--transition-slow);
    z-index: var(--z-modal);
    direction: rtl;
}

.connection-banner-hidden { display: none; }
.connection-banner-connected { background: var(--color-success-500); color: var(--color-text-inverse); }
.connection-banner-reconnecting { background: var(--color-warning-500); color: var(--color-text-inverse); animation: banner-pulse 1.5s ease-in-out infinite; }
.connection-banner-disconnected { background: var(--color-danger-500); color: var(--color-text-inverse); }

@keyframes banner-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* =====================================================
   SIDEBAR
   ===================================================== */

.side-bar {
    height: calc(100% - var(--header-height));
    width: 0;
    position: fixed;
    top: var(--header-height);
    left: 0;
    background-color: var(--color-bg-surface);
    transition: width var(--transition-sidebar);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10;
    border-inline-end: 1px solid var(--color-border-default);
    box-shadow: var(--shadow-sidebar);
}

html[dir='rtl'] .side-bar {
    left: initial;
    right: 0;
    border-inline-end: none;
    border-inline-start: 1px solid var(--color-border-default);
}

.side-bar-visible {
    width: var(--sidebar-width);
}

.sidebar-nav-home {
    display: flex;
    flex-direction: column;
    padding: var(--space-3) var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--color-border-default);
    flex-shrink: 0;
}

.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-2) 0;
}

.sidebar-scroll::-webkit-scrollbar {
    width: 4px;
}

.sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: var(--radius-full);
}

.sidebar-section {
    padding: 0 var(--space-2);
}

.sidebar-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3) var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.sidebar-nav-extra {
    display: flex;
    flex-direction: column;
    padding: 0 var(--space-2);
}

.sidebar-extra-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    margin: 2px var(--space-1);
    min-height: 40px;
    line-height: var(--leading-tight);
    position: relative;
}

.sidebar-extra-link:hover {
    color: var(--coda-teal-deep);
    background: var(--color-bg-hover);
}

.sidebar-home-link {
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    color: var(--color-text-primary);
}

.side-bar i-link {
    padding: var(--space-2) var(--space-3);
    text-decoration: none;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    border-radius: var(--radius-md);
    margin: 2px var(--space-1);
    transition: all var(--transition-fast);
    min-height: 40px;
    position: relative;
}

.side-bar span {
    width: 100%;
}

.side-bar i-link:hover {
    color: var(--coda-teal-deep);
    background: var(--color-bg-hover);
}

.side-bar i-link[selected] {
    background: var(--color-bg-active);
    color: var(--coda-primary);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: none;
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
}

.side-bar i-link[selected]::after {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    inset-inline-end: -4px;
    width: 3px;
    border-radius: var(--radius-full);
    background: var(--coda-primary);
}

.side-bar i-link[selected]:hover {
    background: var(--color-primary-100);
    color: var(--coda-primary);
}

.navbar-item img {
    height: 22px;
    width: 22px;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    margin: 0 var(--space-1);
    padding: var(--space-1);
    opacity: 0.85;
}

.navbar-item[level='1'] > .link {
    padding-inline-start: var(--space-4);
}

.navbar-item[level='1'] > .link img {
    height: 20px;
    width: 20px;
    background: none;
}

.sidebar-group {
    margin: 0 0 var(--space-2) 0;
    padding: 0 var(--space-1);
}

.sidebar-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-3) var(--space-2);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast);
    border-radius: var(--radius-md);
    margin: 0;
    min-height: 40px;
}

.sidebar-group-header:hover {
    background: var(--color-bg-hover);
}

.sidebar-group-header-content {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-text-tertiary);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.sidebar-group-chevron {
    color: var(--color-text-secondary);
    transition: transform 0.25s ease;
    flex-shrink: 0;
    opacity: 0.85;
}

.sidebar-group-collapsed .sidebar-group-chevron {
    transform: rotate(-90deg);
}

html[dir='rtl'] .sidebar-group-collapsed .sidebar-group-chevron {
    transform: rotate(90deg);
}

.sidebar-group-items {
    display: flex;
    flex-direction: column;
    padding: var(--space-1) var(--space-1);
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
    opacity: 1;
}

.sidebar-group-collapsed .sidebar-group-items {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    padding: 0 var(--space-1);
}

.sidebar-sub-link {
    padding-inline-start: var(--space-8) !important;
    font-size: var(--text-sm) !important;
    min-height: 36px !important;
    opacity: 0.9;
}

.sidebar-sub-link:hover {
    opacity: 1;
}

.sidebar-footer {
    padding: var(--space-4) var(--space-4);
    border-top: 1px solid var(--color-border-default);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-surface);
}

.coda-footer {
    height: 22px;
    width: auto;
    max-width: calc(100% - 24px);
    object-fit: contain;
    opacity: 0.4;
    transition: opacity var(--transition-fast);
}

.coda-footer:hover {
    opacity: 0.7;
}

/* =====================================================
   BUTTON SYSTEM
   ===================================================== */

.gov-btn {
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: var(--leading-normal);
    text-decoration: none;
    min-height: 42px;
}

.gov-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.gov-btn-primary {
    background: var(--coda-primary);
    color: #FFFFFF;
    border: none;
    box-shadow: 0 2px 8px rgba(21,183,158,0.20);
}

.gov-btn-primary:hover {
    background: var(--coda-teal-deep);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(21,183,158,0.28);
}

.gov-btn-secondary {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-default);
}

.gov-btn-secondary:hover {
    background: var(--color-bg-hover);
    border-color: rgba(22,194,163,0.20);
}

.gov-btn-outline {
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    border-color: var(--color-border-default);
}

.gov-btn-outline:hover {
    background: var(--color-bg-hover);
    border-color: rgba(22,194,163,0.20);
}

.gov-btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
}

.gov-btn-ghost:hover {
    background: var(--color-bg-hover);
}

.gov-btn-danger {
    background: var(--color-bg-surface);
    color: var(--color-danger-500);
    border: 1px solid rgba(181,71,71,0.25);
}

.gov-btn-danger:hover {
    background: var(--color-danger-50);
    border-color: rgba(181,71,71,0.35);
}

.gov-btn-success {
    background: var(--color-success-50);
    color: var(--color-success-500);
    border: 1px solid var(--color-success-100);
}

.gov-btn-success:hover {
    background: var(--color-success-100);
    border-color: var(--color-success-500);
}

.gov-btn-icon {
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.gov-btn-icon:hover {
    background: var(--color-bg-hover);
    color: var(--coda-teal-deep, #0F9F8A);
}

.loading-button {
    position: relative;
    padding: var(--space-3) var(--space-5);
    color: var(--color-text-inverse);
    background-color: var(--color-primary-600);
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.3px;
}

.loading-button:disabled {
    color: transparent;
    cursor: not-allowed;
    pointer-events: none;
}

.loading-button:disabled::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
    border: 3px solid transparent;
    border-top-color: var(--color-text-inverse);
    border-radius: var(--radius-full);
    animation: button-spin 0.6s linear infinite;
}

@keyframes button-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* =====================================================
   FORM INPUTS
   ===================================================== */

.gov-input {
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    background: var(--color-bg-surface);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    line-height: var(--leading-normal);
    min-height: 40px;
    box-sizing: border-box;
}

.gov-input:hover {
    border-color: var(--color-border-strong);
}

.gov-input:focus {
    border-color: var(--coda-primary);
    box-shadow: var(--shadow-focus);
}

.gov-input::placeholder {
    color: var(--color-text-muted);
}

i-input > input {
    width: calc(100% - 10px);
    font-family: var(--font-family);
}

.input > input, .input > textarea, .select, .textbox {
    font-family: var(--font-family);
    border-radius: var(--radius-sm);
}

.select, .multiselect-autocomplete, .select-autocomplete {
    align-items: center;
}

.select-menu-repeat > div, .multiselect-menu-repeat > div, .multiselect-autocomplete-menu-repeat > div {
    border-top: 1px solid var(--color-border-light);
    padding: var(--space-2) var(--space-3);
    transition: background var(--transition-fast);
}

.select-menu-repeat > div:hover, .multiselect-menu-repeat > div:hover, .multiselect-autocomplete-menu-repeat > div:hover {
    background: var(--color-primary-50);
}

.multiselect-footer {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    text-align: center;
    padding: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.mail-form {
    padding: var(--space-5);
    width: 100%;
    background: var(--color-primary-50);
    margin-bottom: var(--space-1);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-primary-100);
}

.mail-form td {
    padding: var(--space-2) var(--space-3);
    vertical-align: middle;
}

.mail-form td:first-child {
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    width: 120px;
    white-space: nowrap;
}

.mail-form i-select, .mail-form i-multi-select, .mail-form i-input, .mail-form input, .mail-form i-radio,
.mail-form .radio-repeat, .mail-form .multiselect-input {
    border-color: var(--color-border-default);
}

.radio-repeat > .radio-selected {
    background: var(--color-primary-600);
    color: var(--color-text-inverse);
    border-radius: var(--radius-sm);
}

/* =====================================================
   TABLES
   ===================================================== */

.table-list {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
}

.table-list thead {
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 2;
}

.table-list td {
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--space-3) var(--space-4);
}

.table-list tr:nth-child(even) {
    background-color: var(--color-bg-subtle);
}

.table-list tbody > tr:hover {
    background-color: var(--color-bg-hover);
}

.table-list thead {
    font-weight: var(--weight-semibold);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    background: linear-gradient(135deg, rgba(22,194,163,0.08) 0%, rgba(95,211,196,0.05) 100%);
    color: var(--color-text-primary);
}

.table-list thead td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-default);
    font-size: var(--text-sm);
    letter-spacing: 0.2px;
}

.table-list thead td:first-child {
    border-radius: var(--radius-md) 0 0 0;
}

.table-list thead td:last-child {
    border-radius: 0 var(--radius-md) 0 0;
}

.table-list td > img {
    max-height: 36px;
    max-width: 36px;
    border-radius: var(--radius-sm);
}

.table-form {
    width: 100%;
    border-collapse: collapse;
}

.table-form > tbody > tr > td:nth-child(1) {
    font-weight: var(--weight-semibold);
    padding: var(--space-2);
    width: 120px;
    color: var(--color-text-secondary);
}

.table-list td, .table-form > tbody > tr > td {
    border: 1px solid var(--color-border-light);
    padding: var(--space-2);
}

.table-print {
    border-collapse: collapse;
    width: 100%;
}

.table-print > thead {
    font-weight: var(--weight-semibold);
    text-align: center;
    background: var(--color-bg-muted);
}

.table-print > tbody > tr > td:first-child {
    font-weight: var(--weight-semibold);
}

.table-print > tfoot {
    background: var(--color-bg-muted);
}

.table-print td {
    padding: var(--space-1);
    border: 1px solid var(--color-border-default);
}

.audit-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
}

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

.audit-table th {
    padding: var(--space-3) var(--space-4);
    text-align: start;
    font-weight: var(--weight-semibold);
    color: var(--color-text-tertiary);
    border-bottom: 2px solid var(--color-border-default);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.audit-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-secondary);
}

.audit-table tbody tr {
    transition: background var(--transition-fast);
}

.audit-table tbody tr:hover {
    background: var(--color-bg-hover);
}

.audit-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-default);
}

.audit-badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    padding: 3px var(--space-3);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.audit-create { background: var(--color-success-100); color: var(--color-success-800); }
.audit-edit { background: var(--color-info-100); color: var(--color-info-800); }
.audit-delete { background: var(--color-danger-50); color: var(--color-danger-800); }
.audit-forward { background: var(--color-orange-50); color: var(--color-orange-800); }
.audit-close { background: var(--color-bg-muted); color: var(--color-text-secondary); }

/* =====================================================
   CARD SYSTEM
   ===================================================== */

.content-card {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border-light);
}

.content-card:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-border-default);
}

.content-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
}

.content-card-header h4 {
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.card-view-all {
    font-size: var(--text-xs);
    color: var(--color-primary-600);
    text-decoration: none;
    font-weight: var(--weight-medium);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
    white-space: nowrap;
}

.card-view-all:hover {
    background: var(--color-primary-50);
}

.content-card-body {
    padding: var(--space-1) 0;
    flex: 1;
}

/* =====================================================
   LAYOUT UTILITIES
   ===================================================== */

.flex { display: flex; }

.row {
    display: flex;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-surface);
    border-radius: var(--radius-md);
}

.row label {
    display: flex;
    align-items: center;
}

.row-wrap {
    display: flex;
    flex-wrap: wrap;
}

.row-wrap > .row {
    flex-grow: 1;
}

.row-wrap > .row > div {
    flex-grow: 1;
    align-items: center;
}

.row-wrap > .row > div > * {
    flex: 1;
}

.row-center {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.row > div:last-child {
    border-left: 0;
}

.row, .row-slim {
    border: 1px solid var(--color-border-default);
    display: flex;
}

.row-slim > div, .row-slim > div {
    border-left: 1px solid var(--color-border-default);
    display: flex;
    align-items: center;
}

.row > div, .row > span {
    border-left: 1px solid var(--color-border-default);
    padding: var(--space-2);
    display: flex;
    align-items: center;
}

.row > .column, .column > .row {
    padding: 0;
}

.row > span, .column > span {
    font-weight: var(--weight-semibold);
}

.column > div, .column > span {
    border-bottom: 1px solid var(--color-border-default);
    padding: var(--space-2);
    display: flex;
}

.column {
    display: flex;
    flex-direction: column;
}

.column > div:last-child {
    border-bottom: 0;
    flex: 1;
}

/* =====================================================
   DASHBOARD
   ===================================================== */

.gov-dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-6);
    width: 100%;
    box-sizing: border-box;
}

.kpi-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
    width: 100%;
}

.kpi-card {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    position: relative;
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(--color-border-default);
}

.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-primary-200);
}

.kpi-card .kpi-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kpi-value {
    font-size: 28px;
    font-weight: var(--weight-extrabold);
    line-height: 1;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.kpi-label {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    text-align: center;
    line-height: var(--leading-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-top: var(--space-1);
}

.kpi-blue .kpi-icon { background: var(--color-primary-50); color: var(--color-info-600); }
.kpi-blue .kpi-value { color: var(--color-info-600); }
.kpi-blue .kpi-indicator { background: var(--color-info-600); }

.kpi-green .kpi-icon { background: var(--color-success-50); color: var(--color-success-600); }
.kpi-green .kpi-value { color: var(--color-success-600); }
.kpi-green .kpi-indicator { background: var(--color-success-600); }

.kpi-orange .kpi-icon { background: var(--color-orange-50); color: var(--color-orange-600); }
.kpi-orange .kpi-value { color: var(--color-orange-600); }
.kpi-orange .kpi-indicator { background: var(--color-orange-600); }

.kpi-red .kpi-icon { background: var(--color-danger-50); color: var(--color-danger-600); }
.kpi-red .kpi-value { color: var(--color-danger-600); }
.kpi-red .kpi-indicator { background: var(--color-danger-600); }

.kpi-purple .kpi-icon { background: var(--color-purple-50); color: var(--color-purple-600); }
.kpi-purple .kpi-value { color: var(--color-purple-600); }
.kpi-purple .kpi-indicator { background: var(--color-purple-600); }

/* --- Quick Actions --- */

.quick-actions-section {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-default);
    transition: box-shadow var(--transition-fast);
}

.quick-actions-section:hover {
    box-shadow: var(--shadow-sm);
}

.section-title-gov {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.quick-actions-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

.quick-action-btn {
    padding: var(--space-3) var(--space-4);
    border: none;
    border-radius: var(--radius-lg);
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.3px;
    color: var(--color-text-inverse);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: transform var(--transition-fast), box-shadow var(--transition-base), filter var(--transition-fast);
    white-space: nowrap;
}

.quick-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    filter: brightness(1.06);
}

.qa-incoming { background: var(--color-primary-700); }
.qa-outgoing { background: var(--color-success-700); }
.qa-internal { background: var(--color-orange-600); }
.qa-admin { background: var(--color-purple-600); }

/* --- Content Grid --- */

.dashboard-content-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

/* =====================================================
   LIST ITEMS
   ===================================================== */

.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
    transition: background var(--transition-fast);
}

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

.list-item:hover {
    background: var(--color-bg-hover);
}

.list-item-urgent {
    border-right: 3px solid var(--color-danger-600);
}

html[dir='rtl'] .list-item-urgent {
    border-right: none;
    border-left: 3px solid var(--color-danger-600);
}

.list-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.list-item-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-item-date {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.list-item-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.list-action-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-tertiary);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.list-action-btn:hover {
    background: var(--color-primary-50);
    color: var(--color-primary-600);
}

/* =====================================================
   STATUS BADGES
   ===================================================== */

.status-badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    line-height: 1.3;
    border: 1px solid transparent;
}

.badge-pending { background: var(--color-warning-100); color: var(--color-warning-800); border-color: rgba(245,158,11,0.2); }
.badge-success { background: var(--color-incoming-soft); color: var(--color-success-700); border-color: rgba(22,163,74,0.15); }
.badge-warning { background: var(--color-warning-100); color: var(--color-warning-800); border-color: rgba(245,158,11,0.2); }
.badge-danger { background: var(--color-danger-50); color: var(--color-danger-700); border-color: rgba(220,38,38,0.15); }
.badge-info { background: var(--color-outgoing-soft); color: var(--color-info-700); border-color: rgba(14,165,233,0.15); }
.badge-draft { background: var(--color-admin-soft); color: var(--color-admin); border-color: var(--color-border-default); }
.badge-archived { background: var(--color-admin-soft); color: var(--color-admin); border-color: var(--color-border-default); }
.badge-awaiting { background: var(--color-secondary-50); color: var(--color-secondary-600); border-color: rgba(37,99,235,0.15); }

/* =====================================================
   MESSAGE STATUS BADGES
   ===================================================== */

.message-status {
    padding: 0 var(--space-3);
    align-self: center;
}

.message-status::before {
    font-weight: var(--weight-semibold);
    padding: 4px var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    display: inline-block;
    line-height: 1.3;
}

.message-status[status="Draft"]::before {
    content: "مسودة";
    background: var(--color-admin-soft);
    color: var(--color-admin);
    border: 1px solid var(--color-border-default);
}

.message-status[status="Active"]::before {
    content: "نشطة";
    background: var(--color-incoming-soft);
    color: var(--color-success-700);
    border: 1px solid rgba(22,163,74,0.15);
}

.message-status[status="Closed"]::before {
    content: "مغلقة";
    background: var(--color-outgoing-soft);
    color: var(--color-info-700);
    border: 1px solid rgba(14,165,233,0.15);
}

.message-status[status="Canceled"]::before {
    content: "ملغية";
    background: var(--color-danger-50);
    color: var(--color-danger-700);
    border: 1px solid rgba(220,38,38,0.15);
}

.direct-memo-status-label {
    font-weight: var(--weight-semibold);
    padding: 4px var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    display: inline-block;
    line-height: 1.3;
}

.direct-memo-status-label[data-status="Draft"] {
    background: var(--color-admin-soft);
    color: var(--color-admin);
    border: 1px solid var(--color-border-default);
}

.direct-memo-status-label[data-status="Sent"] {
    background: var(--color-memo-soft);
    color: var(--color-purple-700);
    border: 1px solid rgba(124,58,237,0.15);
}

.direct-memo-status-label[data-status="Received"] {
    background: var(--color-incoming-soft);
    color: var(--color-success-700);
    border: 1px solid rgba(22,163,74,0.15);
}

.direct-memo-status-label[data-status="UnderReview"] {
    background: var(--color-warning-100);
    color: var(--color-warning-800);
    border: 1px solid rgba(245,158,11,0.15);
}

.direct-memo-status-label[data-status="Replied"] {
    background: var(--color-outgoing-soft);
    color: var(--color-info-700);
    border: 1px solid rgba(14,165,233,0.15);
}

.direct-memo-status-label[data-status="Closed"] {
    background: var(--color-outgoing-soft);
    color: var(--color-info-800);
    border: 1px solid rgba(14,165,233,0.15);
}

@keyframes private-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* =====================================================
   ACTIVITY FEED
   ===================================================== */

.dashboard-bottom-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.activity-feed-section {
    width: 100%;
}

.activity-feed-body {
    max-height: 300px;
    overflow-y: auto;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
    transition: background var(--transition-fast);
}

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

.activity-item:hover {
    background: var(--color-bg-hover);
}

.activity-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon-create { background: var(--color-success-100); color: var(--color-success-600); }
.activity-icon-forward { background: var(--color-info-100); color: var(--color-info-600); }
.activity-icon-close { background: var(--color-warning-100); color: var(--color-warning-600); }
.activity-icon-override { background: var(--color-danger-50); color: var(--color-danger-600); }
.activity-icon-committee { background: var(--color-purple-50); color: var(--color-purple-600); }

.activity-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.activity-text {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-time {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* =====================================================
   EMPTY STATES
   ===================================================== */

.empty-state-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-16) var(--space-6);
    color: var(--color-text-tertiary);
    font-size: var(--text-base);
    text-align: center;
}

.empty-state-card svg {
    opacity: 0.3;
    color: var(--color-text-muted);
}

.empty-state-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
}

.empty-state-subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: 360px;
    line-height: var(--leading-relaxed);
}

.empty-cta {
    padding: var(--space-3) var(--space-6);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-top: var(--space-2);
    min-height: 40px;
}

.empty-cta:hover {
    background: var(--color-primary-50);
    border-color: var(--coda-primary);
    color: var(--coda-teal-deep);
}

/* =====================================================
   SKELETON LOADERS
   ===================================================== */

.skeleton-list {
    padding: var(--space-3) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.skeleton-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.skeleton-line {
    height: 12px;
    background: linear-gradient(90deg, var(--color-bg-muted) 25%, var(--color-border-default) 50%, var(--color-bg-muted) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
    width: 100%;
}

.skeleton-line.short {
    width: 60%;
}

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

/* =====================================================
   MODALS & DIALOGS
   ===================================================== */

.float {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: all ease var(--transition-slow);
    z-index: var(--z-modal);
    backdrop-filter: blur(2px);
}

.float-visible {
    opacity: 1;
    visibility: visible;
}

.float > i-target {
    position: fixed;
    left: 50%;
    max-width: 80vw;
    top: 50%;
    background-color: var(--color-bg-surface);
    padding: var(--space-8);
    box-shadow: var(--shadow-modal);
    border-radius: var(--radius-2xl);
    transform: translateY(-50%) translateX(-50%);
    max-height: calc(100vh - 100px);
    min-width: 60vw;
    border: 1px solid var(--color-border-default);
    overflow-y: auto;
}

.float .route {
    position: unset;
}

.float .route:not([selected]) {
    display: none !important;
}

.select-autocomplete-menu-visible,
.select-menu-visible,
.multiselect-autocomplete-menu-visible {
    z-index: calc(var(--z-modal) + 10);
}

.detail-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: var(--z-modal);
    display: none;
    justify-content: flex-end;
    backdrop-filter: blur(2px);
}

html[dir='rtl'] .detail-drawer {
    justify-content: flex-start;
}

.detail-drawer-visible {
    display: flex;
}

.detail-drawer-panel {
    width: 480px;
    max-width: 90vw;
    height: 100%;
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-xl);
    padding: var(--space-6);
    overflow-y: auto;
    animation: drawer-slide-in 0.3s ease;
}

html[dir='rtl'] .detail-drawer-panel {
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
    animation-name: drawer-slide-in-rtl;
}

@keyframes drawer-slide-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes drawer-slide-in-rtl {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.window, .dialog {
    z-index: initial;
}

/* =====================================================
   TOASTS & ALERTS
   ===================================================== */

.error-toast {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--color-danger-600);
    color: var(--color-text-inverse);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    z-index: var(--z-toast);
    opacity: 0;
    transition: all var(--transition-slow);
    direction: rtl;
    max-width: 90%;
    text-align: center;
    box-shadow: var(--shadow-lg);
    font-weight: var(--weight-medium);
}

.error-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.warning-toast {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--color-warning-600, #d97706);
    color: var(--color-text-inverse);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    z-index: var(--z-toast);
    opacity: 0;
    transition: all var(--transition-slow);
    direction: rtl;
    max-width: 90%;
    text-align: center;
    box-shadow: var(--shadow-lg);
    font-weight: var(--weight-medium);
}

.warning-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.success-toast {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--color-success-600, #059669);
    color: var(--color-text-inverse);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    z-index: var(--z-toast);
    opacity: 0;
    transition: all var(--transition-slow);
    direction: rtl;
    max-width: 90%;
    text-align: center;
    box-shadow: var(--shadow-lg);
    font-weight: var(--weight-medium);
}

.success-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* =====================================================
   MESSAGES & SECTIONS
   ===================================================== */

.message-info {
    border-radius: var(--radius-md);
    font-size: var(--text-lg);
    display: flex;
    background: var(--color-bg-muted);
    padding: var(--space-2) var(--space-3);
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.message-subject {
    font-weight: var(--weight-semibold);
    padding-left: var(--space-3);
    color: var(--color-text-primary);
}

.message-subject::before {
    font-weight: var(--weight-normal);
    content: 'الموضوع: ';
    color: var(--color-text-muted);
}

.message-receiver {
    font-weight: var(--weight-semibold);
    padding-left: var(--space-3);
}

.message-receiver::before {
    font-weight: var(--weight-normal);
    content: 'الى: ';
    color: var(--color-text-muted);
}

.message-type {
    padding-left: var(--space-3);
    color: var(--color-success-700);
    font-weight: var(--weight-medium);
}

.message-description {
    flex: 1;
    color: var(--color-text-tertiary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}

.message-issue {
    padding-left: var(--space-3);
    color: var(--color-text-secondary);
}

.message-date {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.message-date > *:first-child {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.message-date > *:last-child {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}

.message-actions {
    height: calc(100% - 54px);
    overflow-y: auto;
    margin-top: var(--space-3);
    padding-left: var(--space-2);
}

.method-action {
    display: flex;
    gap: var(--space-5);
}

.method-action > *:first-child {
    flex: 1;
}

.sections {
    display: flex;
    flex-flow: column;
    padding-top: var(--space-3);
    gap: var(--space-2);
}

.section {
    gap: var(--space-3);
    position: relative;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-1);
    box-shadow: var(--shadow-xs);
    padding: var(--space-1);
    background: var(--color-bg-surface);
    padding-left: var(--space-2);
    border: 1px solid var(--color-border-light);
}

.section > i-include {
    flex: 1;
}

.section-owner {
    display: flex;
    align-items: center;
    flex: 1;
}

.assignment-from {
    display: flex;
    align-items: center;
    margin-left: var(--space-8);
}

.assignment-to {
    display: flex;
    align-items: center;
    margin-left: var(--space-8);
}

.section-owner-name > div, .assignment-user-name {
    display: flex;
    flex-direction: column;
}

.section-owner-name > div:first-child, .assignment-user-name > div:first-child,
.participant-user-name > div:first-child, .participant-unit-name > div:first-child {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-primary);
}

.section-owner-name > div:last-child, .assignment-user-name > div:last-child,
.participant-user-name > div:last-child, .participant-unit-name > div:last-child {
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-muted);
}

.section-owner > img, .assignment-from > img, .assignment-to > img, .participant-user > img, .participant-unit > img {
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-xs);
    padding: var(--space-1);
    margin: var(--space-2);
    background: var(--color-bg-subtle);
}

.section-header, .assignment-header {
    background: var(--color-bg-subtle);
    display: flex;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
}

.section-unseen .message-info {
    background: var(--color-warning-50);
    border: 1px solid var(--color-warning-200);
}

.section-unseen .assignment-header {
    background: var(--color-bg-surface);
}

.attachment-icon {
    max-width: 28px;
}

.arrow-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
}

.arrow-label {
    text-align: center;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.arrow-rtl {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    width: 100%;
}

.arrow-head {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 12px solid var(--color-primary-600);
    flex-shrink: 0;
}

.arrow-line {
    flex: 1;
    height: 2px;
    background-color: var(--color-primary-400);
    border-radius: 2px;
}

.arrow-subtitle {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.assignment-tools {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-1);
    flex-wrap: wrap;
}

.assignment-tools > * {
    padding: var(--space-3);
    font-weight: var(--weight-medium);
}

.clickable {
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.clickable:hover {
    border-color: var(--color-primary-300);
    box-shadow: var(--shadow-sm);
}

/* =====================================================
   PARTICIPANTS
   ===================================================== */

.participants {
    display: flex;
    flex-wrap: wrap;
    border-radius: var(--radius-lg);
}

.participant-user {
    display: flex;
}

.participant-unit {
    display: flex;
}

.participant-unit-name, .participant-user-name {
    max-width: 130px;
    padding: 0 var(--space-2);
}

.name-separator {
    width: 2px;
    background: var(--color-primary-400);
    margin: var(--space-3) var(--space-1);
    border-radius: 1px;
    opacity: 0.5;
}

/* =====================================================
   SECTIONS
   ===================================================== */

.attachments-section {
    display: flex;
}

.attachments-section > div {
    display: flex;
    height: 100%;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-6);
    font-size: var(--text-sm);
}

.attachment-link {
    text-decoration: none;
    border-left: 2px dashed var(--color-border-strong);
    padding-left: var(--space-4);
    color: var(--color-primary-600);
    transition: color var(--transition-fast);
}

.attachment-link:hover {
    color: var(--color-primary-700);
}

.comment-section {
    padding: var(--space-3);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

.approval-section, .decision-section {
    display: flex;
    padding-right: var(--space-1);
}

.approval-status, .decision-status {
    padding: 0 var(--space-3);
    border-bottom-right-radius: var(--radius-lg);
    line-height: 40px;
    width: 100px;
    font-weight: var(--weight-medium);
}

.approval-status[status="2"] {
    background: linear-gradient(270deg, var(--color-warning-200) 0%, var(--color-bg-surface) 100%);
}

.approval-status[status="1"] {
    background: linear-gradient(270deg, var(--color-success-200) 0%, var(--color-bg-surface) 100%);
}

.decision-status[status="1"] {
    background: linear-gradient(270deg, var(--color-warning-200) 0%, var(--color-bg-surface) 100%);
}

.decision-status[status="2"] {
    background: linear-gradient(270deg, var(--color-success-200) 0%, var(--color-bg-surface) 100%);
}

.decision-status[status="3"] {
    background: linear-gradient(270deg, var(--color-orange-100) 0%, var(--color-bg-surface) 100%);
}

.decision-status[status="4"] {
    background: linear-gradient(270deg, var(--color-danger-200) 0%, var(--color-bg-surface) 100%);
}

.decision-status[status="5"] {
    background: linear-gradient(270deg, var(--color-success-100) 0%, var(--color-bg-surface) 100%);
}

.decision-status[status="6"] {
    background: linear-gradient(270deg, var(--color-success-200) 0%, var(--color-bg-surface) 100%);
}

.approval-comment, .decision-comment {
    padding: var(--space-3);
}

.references-section {
    padding: var(--space-3);
    display: flex;
    gap: var(--space-3);
}

.references-section > i-link {
    border: 1px solid var(--color-primary-300);
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
}

.references-section > i-link:hover {
    background: var(--color-primary-600);
    color: var(--color-text-inverse);
    border-color: var(--color-primary-600);
}

.assignments-section {
    padding: var(--space-3);
    display: flex;
    gap: var(--space-3);
}

.assignments-section > span {
    border: 1px solid var(--color-primary-300);
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-primary-50);
    font-size: var(--text-sm);
}

.destination-section {
    padding: var(--space-3);
}

.destination-section i-repeat {
    display: flex;
    gap: var(--space-3);
}

.destination-section span {
    border: 1px solid var(--color-primary-300);
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-primary-50);
    font-size: var(--text-sm);
}

.source-section {
    padding: var(--space-3);
}

.source-section span {
    border: 1px solid var(--color-primary-300);
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-primary-50);
    font-size: var(--text-sm);
}

/* =====================================================
   ACTIONS BOX
   ===================================================== */

.actions {
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-bg-subtle);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    display: flex;
    gap: var(--space-1);
}

.actions-box {
    text-align: left;
    display: flex;
    flex-direction: row-reverse;
    background: var(--color-bg-subtle);
    padding: var(--space-3);
    margin-top: var(--space-1);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-default);
}

/* =====================================================
   FORMS
   ===================================================== */

.form > * {
    width: calc(100% - 10px);
}

.remove-button, .add-button {
    height: 30px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    cursor: pointer;
}

.add {
    display: flex;
}

.autocomplete-item > img {
    height: 14px;
}

/* =====================================================
   PROGRESS BAR
   ===================================================== */

.progress-bar {
    background: var(--color-bg-muted);
    height: 15px;
    width: 426px;
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress {
    background: var(--color-success-500);
    transition: all 0.3s;
    height: 100%;
    border-radius: var(--radius-full);
}

/* =====================================================
   MISC COMPONENTS
   ===================================================== */

i-modellist > i-repeat {
    max-height: 260px;
    overflow-y: scroll;
    display: block;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-default);
    padding: var(--space-3);
    margin: var(--space-2);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-md);
}

.connection-0 { background: var(--color-danger-500); }
.connection-1 { background: var(--color-warning-500); transition: background 2s; }
.connection-2 { background: var(--color-success-500); transition: background 2s; }

.unit {
    padding: var(--space-5);
    margin: var(--space-3) 0;
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-xl);
    align-items: center;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-light);
}

.unit > .repeat {
    display: flex;
    flex-wrap: wrap;
}

.title {
    text-align: center;
    margin-bottom: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.unit .chart {
    height: 500px;
    width: 800px;
}

.title > div {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    display: flex;
    color: var(--color-text-primary);
}

.title > span {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.title > div > img {
    height: 32px;
    padding-right: var(--space-1);
}

.sub-title {
    align-self: normal;
    border-bottom: 2px solid var(--color-border-default);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    padding: var(--space-2);
    margin: var(--space-3);
    background: var(--color-bg-subtle);
    display: flex;
    margin-bottom: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-weight: var(--weight-semibold);
}

.sub-title > img {
    height: 32px;
    padding-right: var(--space-1);
}

.icon {
    height: 32px;
}

.property-container {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-subtle);
    margin: var(--space-2);
    transition: all var(--transition-fast);
}

.property-container:hover {
    border-color: var(--color-primary-200);
    background: var(--color-primary-50);
    box-shadow: var(--shadow-sm);
}

.property {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: center;
    align-items: center;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-subtle);
    margin: var(--space-2);
    transition: all var(--transition-fast);
}

.property:hover {
    border-color: var(--color-primary-200);
    box-shadow: var(--shadow-sm);
}

.unitproperty {
    display: flex;
    flex-wrap: wrap;
}

.property > div {
    font-size: var(--text-4xl);
    padding: var(--space-2);
    border-radius: var(--radius-full);
    border: 4px solid var(--color-border-strong);
    width: 78px;
    height: 78px;
    line-height: 2.5em;
}

.property > img {
    width: 78px;
    height: 78px;
}

.property-Speed > div {
    background: var(--color-warning-500);
}

.property-DigitalInput-off > img {
    filter: grayscale(1);
}

.icon-offline {
    filter: grayscale(1);
}

.stats-counter {
    display: flex;
}

.stats-counter > div {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: var(--space-3);
    align-items: center;
}

.stats-counter-number {
    border: 4px solid var(--color-primary-200);
    border-radius: var(--radius-full);
    height: 60px;
    width: 60px;
    line-height: 61px;
    font-size: var(--text-3xl);
    color: var(--color-primary-600);
    font-weight: var(--weight-bold);
}

.red {
    background: var(--color-danger-500);
}

.tox-statusbar__right-container, .tox-promotion {
    display: none !important;
}

.corr-form .tox .tox-toolbar__group {
    padding: 0 3px !important;
}

.corr-form .tox .tox-tbtn {
    width: 28px !important;
    height: 28px !important;
    margin: 1px !important;
}

.corr-form .tox .tox-tbtn svg {
    width: 18px !important;
    height: 18px !important;
}

.corr-form .tox .tox-toolbar,
.corr-form .tox .tox-toolbar__overflow,
.corr-form .tox .tox-toolbar__primary {
    min-height: auto !important;
    padding: 2px 0 !important;
}

.corr-form .tox .tox-editor-header {
    box-shadow: none !important;
    border-bottom: 1px solid var(--color-border-light) !important;
}

.corr-form .tox .tox-statusbar {
    min-height: 20px !important;
    padding: 2px 8px !important;
    font-size: var(--text-2xs) !important;
}

.corr-form .tox .tox-tbtn--select {
    width: auto !important;
    padding: 0 4px !important;
}

/* =====================================================
   HOME / DASHBOARD GRID (Legacy)
   ===================================================== */

.home {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 156px auto auto;
    grid-column-gap: var(--space-4);
    grid-row-gap: var(--space-2);
    --window-caption-color: var(--color-text-inverse);
    --window-active-background: linear-gradient(126deg, var(--color-danger-700) 20px, var(--color-bg-surface) 27px);
    --window-header-background: var(--color-primary-600);
    height: calc(100% - 10px);
}

.home > *:nth-child(1) { grid-area: 1 / 1 / 2 / 3; overflow-x: auto; }
.home > *:nth-child(2) { grid-area: 2 / 1 / 3 / 2; overflow-x: auto; }
.home > *:nth-child(3) { grid-area: 2 / 2 / 3 / 3; overflow-x: auto; }
.home > *:nth-child(4) { grid-area: 3 / 1 / 4 / 3; overflow-x: auto; }
.home > *:nth-child(5) { grid-area: 1 / 3 / 4 / 4; }

.dashboard {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.window-tools-close:before {
    content: "\2699";
    line-height: 10px;
    font-size: var(--text-lg);
    padding-top: 3px;
    color: var(--color-text-inverse);
}

.runtime {
    display: flex;
    flex-flow: column;
    width: 100%;
}

.runtime > i-repeat {
    overflow-y: scroll;
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.runtime > i-repeat > div {
    display: flex;
}

.runtime > i-repeat > div > div {
    border: 1px solid var(--color-border-strong);
}

.runtime-lastrun-date {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-2);
    background: var(--color-warning-200);
    color: var(--color-text-primary);
    font-weight: var(--weight-bold);
}

.runtime-lastrun-duration {
    font-size: var(--text-4xl);
    background: var(--color-success-200);
    text-align: center;
    border: 1px solid var(--color-border-default);
}

.footer {
    height: 42px;
    text-align: center;
    background: linear-gradient(0deg, var(--color-bg-muted), var(--color-bg-subtle));
    position: absolute;
    width: 100%;
    bottom: 0;
}

/* =====================================================
   REPORTS & AUDIT PAGES
   ===================================================== */

.reports-page, .audit-page {
    padding: var(--space-1);
}

.page-header-gov {
    margin-bottom: var(--space-5);
}

.page-header-gov h2 {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
}

.report-filters {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-end;
    margin-bottom: var(--space-5);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 160px;
}

.filter-group label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-tertiary);
}

.filter-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.report-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

/* =====================================================
   LOGIN PAGE
   ===================================================== */

i-route[name="login"] {
    padding: 0 !important;
    height: 100vh !important;
    overflow: hidden !important;
}

i-route[name="connecting"],
i-route[name="login"] {
    padding: 0 !important;
}

/* =====================================================
   AUTH PAGE HEADER SIMPLIFICATION
   ===================================================== */

body.auth-page .header-search,
body.auth-page .header-notification,
body.auth-page .header-user,
body.auth-page .header-menu-btn,
body.auth-page .location,
body.auth-page .header-spacer,
body.auth-page .net {
    display: none !important;
}

body.auth-page .title-bar {
    justify-content: center;
    box-shadow: none;
    border-bottom: 1px solid var(--color-border-light);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* =====================================================
   LOGIN SPLIT SCREEN
   ===================================================== */

.login-split-screen {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* =====================================================
   BRANDING PANEL (Right side for RTL)
   ===================================================== */

.login-branding-panel {
    flex: 1.1;
    background:
        linear-gradient(160deg,
            #064D44 0%,
            #096B5E 30%,
            #0C8574 60%,
            #0F9F8A 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.login-branding-pattern {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse at 20% 80%, rgba(22, 194, 163, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 15%, rgba(255, 255, 255, 0.07) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(167, 232, 221, 0.06) 0%, transparent 70%),
        repeating-linear-gradient(
            135deg,
            transparent,
            transparent 40px,
            rgba(255, 255, 255, 0.015) 40px,
            rgba(255, 255, 255, 0.015) 80px
        );
    pointer-events: none;
}

.login-branding-geo {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation: login-geo-fade 1.2s ease-out forwards;
}

.login-branding-geo-1 {
    width: 300px;
    height: 300px;
    bottom: -80px;
    left: -60px;
    border: 1px solid rgba(22, 194, 163, 0.12);
    animation-delay: 0.3s;
}

.login-branding-geo-2 {
    width: 200px;
    height: 200px;
    top: -40px;
    right: -30px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    animation-delay: 0.5s;
}

.login-branding-geo-3 {
    width: 120px;
    height: 120px;
    top: 50%;
    left: 10%;
    border: 1px solid rgba(255, 255, 255, 0.04);
    animation-delay: 0.7s;
}

@keyframes login-geo-fade {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.login-branding-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: var(--color-text-inverse);
    padding: var(--space-10);
    max-width: 460px;
}

.login-branding-icon {
    margin-bottom: var(--space-8);
    opacity: 0.95;
    animation: login-brand-enter 0.8s ease-out both;
}

@keyframes login-brand-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 0.95;
        transform: translateY(0);
    }
}

.login-branding-title {
    font-size: 32px;
    font-weight: var(--weight-bold);
    margin: 0 0 var(--space-3) 0;
    letter-spacing: 0.4px;
    line-height: var(--leading-tight);
    animation: login-brand-enter 0.8s ease-out 0.1s both;
}

.login-branding-subtitle {
    font-size: var(--text-lg);
    opacity: 0.9;
    margin: 0 0 var(--space-8) 0;
    font-weight: var(--weight-normal);
    letter-spacing: 0.2px;
    animation: login-brand-enter 0.8s ease-out 0.2s both;
}

.login-branding-divider {
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--coda-primary, #16C2A3), transparent);
    margin: 0 auto var(--space-8) auto;
    border-radius: 2px;
    animation: login-brand-enter 0.8s ease-out 0.25s both;
}

.login-branding-desc {
    font-size: var(--text-base);
    opacity: 0.85;
    margin: 0 0 var(--space-10) 0;
    line-height: var(--leading-relaxed);
    animation: login-brand-enter 0.8s ease-out 0.3s both;
}

.login-branding-features {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    animation: login-brand-enter 0.8s ease-out 0.4s both;
}

.login-branding-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    opacity: 0.85;
    transition: opacity var(--transition-base);
}

.login-branding-feature:hover {
    opacity: 1;
}

.login-branding-feature svg {
    stroke: var(--coda-primary, #16C2A3);
    opacity: 0.85;
}

.login-branding-feature span {
    font-size: var(--text-xs);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* =====================================================
   LOGIN CARD PANEL
   ===================================================== */

.login-card-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at 70% 20%, rgba(22, 194, 163, 0.04) 0%, transparent 60%),
        linear-gradient(180deg, #FBFCFD 0%, #F7F9FB 100%);
    padding: var(--space-8);
    position: relative;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--color-bg-surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-default);
    padding: var(--space-10) var(--space-8) var(--space-8) var(--space-8);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: login-card-enter 0.6s ease-out both;
}

@keyframes login-card-enter {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-card-logo {
    display: none;
}

.login-card-title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
    letter-spacing: 0.2px;
}

.login-card-subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6) 0;
}

/* =====================================================
   LOGIN FORM STYLES
   ===================================================== */

.login-card i-login {
    width: 100%;
}

.login-card i-login > .body {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.login-card i-login .textbox-with-label {
    position: relative;
    display: block;
    margin-bottom: var(--space-4);
}

.login-card i-login .textbox-with-label input {
    width: 100% !important;
    padding: var(--space-4) var(--space-10) var(--space-4) var(--space-10) !important;
    border: 1px solid var(--color-border-default) !important;
    border-radius: var(--radius-sm) !important;
    font-size: var(--text-base) !important;
    background: var(--color-bg-surface) !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    box-sizing: border-box !important;
    outline: none !important;
    font-family: var(--font-family) !important;
    height: 50px !important;
    color: var(--color-text-primary) !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,0.02) !important;
}

.login-card i-login .textbox-with-label input:focus {
    border-color: rgba(22,194,163,0.45) !important;
    box-shadow: 0 0 0 4px rgba(22,194,163,0.10) !important;
    background: var(--color-bg-surface) !important;
}

.login-card i-login .textbox-with-label span {
    position: absolute;
    top: 50%;
    inset-inline-start: 42px;
    transform: translateY(-50%);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    pointer-events: none;
    transition: all 0.25s ease;
}

.login-card i-login .textbox-with-label input:focus + span,
.login-card i-login .textbox-with-label input:not(:placeholder-shown) + span {
    top: -8px;
    inset-inline-start: 12px;
    font-size: var(--text-xs);
    color: var(--color-primary-600);
    background: var(--color-bg-surface);
    padding: 0 var(--space-1);
    transform: none;
}

.login-card i-login .textbox-with-label::before {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: 14px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    z-index: 1;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.45;
}

.login-card i-login .textbox-with-label:first-child::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.login-card i-login .textbox-with-label:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

.login-card i-login input[name="remember"],
.login-card i-login label[name="labelRemember"],
.login-card i-login input[name="remember"] + label {
    display: none !important;
}

.login-card i-login .body > div:nth-child(2) {
    padding: 0 !important;
}

.login-card i-login .body > div:nth-child(2) > div[style*="display: flex"] {
    display: none !important;
}

.login-card i-login .actions {
    padding: 0 !important;
    margin-top: var(--space-3);
    background: transparent !important;
    border-radius: 0 !important;
}

.login-card i-login .actions .button {
    width: 100% !important;
    height: 48px !important;
    background: var(--brand-gradient) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-size: var(--text-md) !important;
    font-weight: var(--weight-semibold) !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
    position: relative;
    font-family: var(--font-family) !important;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 18px rgba(22,194,163,0.18) !important;
}

.login-card i-login .actions .button:hover {
    filter: brightness(1.02) !important;
    box-shadow: 0 10px 22px rgba(22,194,163,0.22) !important;
    transform: translateY(-1px);
}

.login-card i-login .actions .button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(11, 26, 54, 0.15) !important;
}

.login-card i-login .actions .button:focus-visible {
    outline: 2px solid var(--coda-primary, #16C2A3) !important;
    outline-offset: 2px !important;
}

.login-card i-login .actions .button:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

.login-card i-login .actions .button:disabled::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
    border: 2.5px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--color-text-inverse);
    border-radius: var(--radius-full);
    animation: button-spin 0.7s linear infinite;
}

.login-card i-login div[name="message"] {
    padding: 0 !important;
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
}

.login-card i-login div[name="message"]:empty {
    display: none;
}

/* =====================================================
   SECURITY INDICATOR
   ===================================================== */

.login-security-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    letter-spacing: 0.2px;
}

.login-security-svg {
    stroke: var(--color-text-muted);
    opacity: 0.7;
    flex-shrink: 0;
}

.login-security-icon {
    display: none;
}

.login-with {
    margin-top: var(--space-4);
    width: 100%;
}

.login-error-input input {
    border-color: var(--color-danger-500) !important;
    background: var(--color-danger-50) !important;
}

@keyframes login-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.login-shake {
    animation: login-shake 0.5s ease-in-out;
}

.login-password-toggle {
    position: absolute;
    inset-inline-end: 14px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: var(--text-md);
    z-index: 2;
    background: none;
    border: none;
    padding: var(--space-1);
    line-height: 1;
    user-select: none;
    transition: color var(--transition-fast);
}

.login-password-toggle:hover {
    color: var(--color-text-tertiary);
}

/* =====================================================
   CONNECTING SCREEN
   ===================================================== */

.connecting-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    position: relative;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(22, 194, 163, 0.04) 0%, transparent 60%),
        linear-gradient(180deg, #FBFCFD 0%, #F7F9FB 100%);
}

.connecting-card {
    background: var(--color-bg-surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-default);
    padding: var(--space-12) var(--space-10);
    min-width: 340px;
    z-index: 1;
    animation: login-card-enter 0.6s ease-out both;
}

.connecting-bg-pattern {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 30% 70%, rgba(22, 194, 163, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(15, 23, 42, 0.02) 0%, transparent 50%);
    pointer-events: none;
}

.connecting-content {
    text-align: center;
}

.connecting-brand {
    margin-bottom: var(--space-6);
}

.connecting-logo {
    height: 40px;
    width: 40px;
    object-fit: contain;
    opacity: 0.85;
}

.connecting-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border-default);
    border-top-color: var(--coda-primary, #16C2A3);
    border-radius: var(--radius-full);
    animation: button-spin 0.9s linear infinite;
    margin: 0 auto var(--space-5) auto;
}

.connecting-message {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
    transition: opacity var(--transition-slow);
}

.connecting-sub {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    margin: 0;
}

.connecting-retry {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.connecting-error-msg {
    color: var(--color-text-tertiary);
    font-size: var(--text-sm);
    margin: 0;
}

.connecting-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--coda-primary);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    font-family: var(--font-family);
    cursor: pointer;
    transition: all var(--transition-fast);
    letter-spacing: 0.3px;
}

.connecting-retry-btn:hover {
    background: var(--coda-teal-deep);
    box-shadow: 0 4px 12px rgba(21,183,158,0.25);
    transform: translateY(-1px);
}

.connecting-retry-btn:active {
    transform: translateY(0);
}

.connecting-back-btn {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-family: var(--font-family);
    cursor: pointer;
    text-decoration: underline;
    padding: var(--space-1) var(--space-2);
    transition: color var(--transition-fast);
}

.connecting-back-btn:hover {
    color: var(--color-text-secondary);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media only screen and (max-width: 600px) {
    .desktop, .navbar-search {
        display: none;
    }

    .title-bar {
        padding: 0 var(--space-3);
        gap: var(--space-1);
    }

    .side-bar-visible {
        width: 100%;
    }

    .app-shrunk {
        margin-inline-start: 0;
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .login-branding-panel {
        flex: 0.8;
    }

    .login-branding-features {
        gap: var(--space-4);
    }

    .login-branding-title {
        font-size: var(--text-3xl);
    }
}

@media (max-width: 768px) {
    .login-branding-panel {
        display: none;
    }

    .login-split-screen {
        flex-direction: column;
    }

    .login-card-panel {
        flex: 1;
        padding: var(--space-5);
        background:
            radial-gradient(ellipse at 50% 20%, rgba(22, 194, 163, 0.04) 0%, transparent 60%),
            linear-gradient(180deg, var(--color-bg-page) 0%, var(--color-bg-muted) 100%);
    }

    .login-card {
        padding: var(--space-8) var(--space-6) var(--space-6) var(--space-6);
        max-width: 100%;
    }

    .login-card i-login .textbox-with-label input {
        padding: var(--space-4) var(--space-4) var(--space-4) var(--space-10) !important;
        font-size: var(--text-base) !important;
    }

    .login-card i-login .actions .button {
        height: 50px !important;
        font-size: var(--text-lg) !important;
    }

    .connecting-card {
        min-width: auto;
        margin: 0 var(--space-4);
        padding: var(--space-10) var(--space-8);
    }
}

@media only screen and (min-width: 768px) {
    .kpi-bar {
        grid-template-columns: repeat(5, 1fr) !important;
    }
    .quick-actions-bar {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .dashboard-content-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .dashboard-bottom-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media only screen and (min-width: 641px) and (max-width: 767px) {
    .kpi-bar {
        grid-template-columns: repeat(3, 1fr);
    }
    .quick-actions-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    .dashboard-content-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dashboard-bottom-grid {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 640px) {
    .kpi-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    .kpi-card:last-child {
        grid-column: 1 / -1;
    }
    .dashboard-content-grid {
        grid-template-columns: 1fr;
    }
    .quick-actions-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    .dashboard-bottom-grid {
        grid-template-columns: 1fr;
    }
    .report-charts-grid {
        grid-template-columns: 1fr;
    }
    .report-filters {
        flex-direction: column;
    }
    .gov-dashboard {
        padding: var(--space-3);
        gap: var(--space-3);
    }
    .header-search {
        display: none;
    }
}

/* =====================================================
   INLINE STYLE REPLACEMENT UTILITIES
   ===================================================== */

.empty-state-title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
}

.empty-state-subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.empty-state-card svg {
    stroke: var(--color-text-muted);
}

.context-menu-header {
    text-align: center;
    min-width: 120px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-muted);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border-light);
}

.section-type-label {
    color: var(--color-secondary-500);
}

.priority-pills {
    display: flex;
    gap: 5px;
    background: var(--color-bg-muted);
    border-radius: var(--radius-lg);
    padding: var(--space-1);
}

.priority-pill-selected {
    background: var(--color-warning-200);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-3);
}

.drawer-title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.drawer-close-btn {
    border: none;
    background: none;
    font-size: var(--text-2xl);
    cursor: pointer;
    color: var(--color-text-tertiary);
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-5);
}

.drawer-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.drawer-action-btn {
    margin-top: var(--space-3);
}

.card-header-icon-blue { stroke: var(--color-info-600); }
.card-header-icon-green { stroke: var(--color-success-600); }
.card-header-icon-orange { stroke: var(--color-orange-600); }
.card-header-icon-red { stroke: var(--color-danger-600); }
.card-header-icon-purple { stroke: var(--color-purple-600); }
.card-header-icon-muted { stroke: var(--color-text-muted); }

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--color-primary-600);
    width: var(--space-4);
    height: var(--space-4);
    cursor: pointer;
}

input[type="date"],
input[type="datetime-local"],
input[type="time"] {
    font-family: var(--font-family);
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    transition: border-color var(--transition-fast);
}

input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}

input[type="file"] {
    font-family: var(--font-family);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

input[type="file"]::file-selector-button {
    font-family: var(--font-family);
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

input[type="file"]::file-selector-button:hover {
    background-color: var(--color-bg-hover);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

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

.toggle-slider {
    position: absolute;
    inset: 0;
    background-color: var(--color-gray-300);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast);
    cursor: pointer;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    bottom: 3px;
    right: 3px;
    background-color: var(--color-bg-primary);
    border-radius: var(--radius-full);
    transition: transform var(--transition-fast);
}

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

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(-20px);
}

textarea {
    font-family: var(--font-family);
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    transition: border-color var(--transition-fast);
    resize: vertical;
}

textarea:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}


/* ===== MICRO-INTERACTIONS & TRANSITIONS ===== */

.gov-btn:active {
    transform: scale(0.97);
}

.gov-btn-primary:active {
    background: var(--color-primary-800);
}

.empty-cta:active {
    transform: scale(0.97);
}

.quick-action-btn:active {
    transform: translateY(0) scale(0.98);
}

.kpi-card:active {
    transform: translateY(0) scale(0.98);
}

.sidebar-extra-link:active {
    transform: scale(0.98);
}

.side-bar i-link:active {
    transform: scale(0.98);
}

.list-action-btn:active {
    transform: scale(0.92);
}

.float > i-target {
    animation: modal-enter 0.25s ease;
}

@keyframes modal-enter {
    from { opacity: 0; transform: translateY(-50%) translateX(-50%) scale(0.96); }
    to { opacity: 1; transform: translateY(-50%) translateX(-50%) scale(1); }
}

.references-section > i-link,
.assignments-section > span,
.destination-section span,
.source-section span {
    transition: all 0.15s ease;
}

.references-section > i-link:active,
.assignments-section > span:active {
    transform: scale(0.97);
}

.table-list tbody > tr {
    transition: background-color 0.15s ease;
}

.audit-table tbody tr {
    transition: background-color 0.15s ease;
}

.content-card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.content-card:hover {
    transform: translateY(-1px);
}

.section:hover {
    box-shadow: inset 0 0px 3px 0px var(--color-primary-200);
}

i-input > input,
.input > input,
.input > textarea,
.select,
.textbox {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

i-input > input:focus,
.input > input:focus,
.input > textarea:focus {
    border-color: var(--color-primary-500);
    box-shadow: var(--shadow-focus);
    outline: none;
}

.button, i-link.button {
    transition: all 0.15s ease;
}

.button:hover, i-link.button:hover {
    opacity: 0.85;
}

.button:active, i-link.button:active {
    transform: scale(0.97);
}

.loading-button {
    transition: all 0.2s ease;
}

.loading-button:hover:not(:disabled) {
    filter: brightness(1.08);
}

.loading-button:active:not(:disabled) {
    transform: scale(0.97);
}

.header-notification:active {
    transform: scale(0.92);
}

.side-bar {
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

i-router {
    transition: none;
}

.app {
    transition: margin 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.float {
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.progress {
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-unseen .message-info {
    animation: unseen-pulse 2s ease-in-out 1;
}

@keyframes unseen-pulse {
    0% { background: var(--color-warning-50); }
    50% { background: var(--color-warning-50); }
    100% { background: var(--color-warning-50); }
}

.status-badge {
    transition: all 0.15s ease;
}

.mail-form {
    transition: box-shadow 0.2s ease;
}

.mail-form:focus-within {
    box-shadow: inset 0 0 2px 1px var(--color-primary-200);
}


/* ===== ADDITIONAL RTL FIXES ===== */

html[dir='rtl'] .arrow-head {
    border-right: 12px solid var(--color-primary-600);
    border-left: none;
}

html[dir='rtl'] .approval-status[status="2"] {
    background: linear-gradient(90deg, rgba(199, 197, 87, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

html[dir='rtl'] .approval-status[status="1"] {
    background: linear-gradient(90deg, rgba(87, 199, 133, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

html[dir='rtl'] .decision-status[status="1"] {
    background: linear-gradient(90deg, rgba(199, 197, 87, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

html[dir='rtl'] .decision-status[status="2"] {
    background: linear-gradient(90deg, rgb(143 225 158) 0%, rgba(255, 255, 255, 1) 100%);
}

html[dir='rtl'] .decision-status[status="3"] {
    background: linear-gradient(90deg, rgb(255 174 117) 0%, rgba(255, 255, 255, 1) 100%);
}

html[dir='rtl'] .decision-status[status="4"] {
    background: linear-gradient(90deg, rgb(255 161 161) 0%, rgba(255, 255, 255, 1) 100%);
}

html[dir='rtl'] .decision-status[status="5"] {
    background: linear-gradient(90deg, rgb(204 255 213) 0%, rgba(255, 255, 255, 1) 100%);
}

html[dir='rtl'] .decision-status[status="6"] {
    background: linear-gradient(90deg, rgb(87 199 173) 0%, rgba(255, 255, 255, 1) 100%);
}


/* ===== CONSISTENCY FIXES ===== */

.name-separator {
    background: var(--color-border-default);
}

.actions {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background-color: var(--color-bg-subtle);
    border-top: 1px solid var(--color-border-default);
}

.property-container, .property {
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--color-border-light);
}


/* ===== RESPONSIVE TABLET FIXES ===== */

@media only screen and (min-width: 601px) and (max-width: 1024px) {
    .header-search {
        min-width: 160px;
        max-width: 240px;
    }

    .header-brand-text {
        display: none;
    }
}

@media only screen and (min-width: 641px) and (max-width: 1024px) {
    .message-info {
        flex-wrap: wrap;
    }

    .message-description {
        min-width: 200px;
    }

    .float > i-target {
        min-width: 80vw;
        max-width: 95vw;
    }

    .report-charts-grid {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 640px) {
    .message-info {
        flex-wrap: wrap;
        font-size: 16px;
    }

    .message-description {
        min-width: 0;
        width: 100%;
    }

    .assignment-header {
        flex-wrap: wrap;
    }

    .arrow-container {
        min-width: 100px;
    }

    .float > i-target {
        min-width: 95vw;
        max-width: 98vw;
        padding: 16px;
    }

    .table-list {
        font-size: 14px;
    }

    .table-list td {
        padding: 4px;
    }

    .audit-table th,
    .audit-table td {
        padding: 8px 10px;
        font-size: 13px;
    }

    .reports-page, .audit-page {
        padding: 0;
    }
}

/* =====================================================
   GOV TABLE ENHANCEMENTS
   ===================================================== */

.gov-table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-surface);
}

.gov-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.gov-table thead td,
.gov-table thead th {
    white-space: nowrap;
    font-size: var(--text-sm);
    letter-spacing: 0.2px;
}

.gov-table tbody > tr {
    transition: background-color 0.15s ease;
}

.gov-table tbody > tr:nth-child(odd) {
    background-color: var(--color-bg-surface);
}

.gov-table tbody > tr:nth-child(even) {
    background-color: var(--color-bg-subtle);
}

.gov-table tbody > tr:hover {
    background-color: var(--color-bg-hover) !important;
}

.gov-table td {
    padding: var(--space-3) var(--space-4);
    vertical-align: middle;
    line-height: var(--leading-normal);
}

/* =====================================================
   TABLE CELL STYLES
   ===================================================== */

.cell-primary {
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

.cell-text {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.cell-date {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.cell-truncate {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

.cell-mono {
    font-family: 'Courier New', monospace;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    direction: ltr;
    unicode-bidi: embed;
}

.cell-highlight {
    font-weight: var(--weight-bold);
    color: var(--color-primary-600);
}

.cell-example {
    background: var(--color-primary-50);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-primary-200);
    color: var(--color-primary-700);
}

/* =====================================================
   TABLE ACTION BUTTONS
   ===================================================== */

.table-actions {
    display: flex;
    gap: var(--space-2);
    white-space: nowrap;
    align-items: center;
}

.gov-btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    gap: var(--space-1);
    min-height: 32px;
}

.gov-btn-danger-outline {
    background: var(--color-bg-surface);
    color: var(--color-danger-600);
    border-color: var(--color-danger-200);
}

.gov-btn-danger-outline:hover {
    background: var(--color-danger-50);
    border-color: var(--color-danger-500);
    color: var(--color-danger-700);
}

/* =====================================================
   USER / UNIT CELL STYLES
   ===================================================== */

.user-cell {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.user-avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid var(--color-border-light);
    flex-shrink: 0;
}

.user-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary, #e5e7eb);
    color: var(--color-text-secondary, #6b7280);
}

.unit-icon-sm {
    width: 24px;
    height: 24px;
    padding: 2px;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

/* =====================================================
   GOV TOOLBAR
   ===================================================== */

.gov-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.toolbar-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-3);
    min-width: 200px;
    flex: 1;
    max-width: 320px;
    color: var(--color-text-muted);
}

.toolbar-search:focus-within {
    border-color: rgba(22,194,163,0.4);
    box-shadow: 0 0 0 3px rgba(22,194,163,0.08);
}

.toolbar-search i-input {
    flex: 1;
}

.toolbar-search i-input > input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: var(--space-1) !important;
    width: 100% !important;
}

.toolbar-meta {
    display: flex;
    align-items: center;
}

.toolbar-count {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    padding: 0 var(--space-2);
}

.toolbar-page-size {
    display: flex;
    align-items: center;
}

.toolbar-page-size i-select {
    min-width: 70px;
}

.toolbar-pagination {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto;
}

.toolbar-nav-btn {
    min-width: 60px;
    justify-content: center;
}

/* =====================================================
   FORM ENHANCEMENTS
   ===================================================== */

.form-section-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-5) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-primary-100);
}

.form-fieldset {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    margin-bottom: var(--space-4);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-card);
}

.form-legend {
    font-size: 15px;
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    padding: 0 var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.form-actions {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    margin-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
}

.form-actions .gov-btn {
    min-width: 120px;
    justify-content: center;
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-base);
    gap: var(--space-2);
}

/* =====================================================
   REPORT KPI BAR
   ===================================================== */

.report-kpi-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.report-kpi-card {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.report-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.report-kpi-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.report-kpi-card.kpi-blue::after { background: var(--color-info-600); }
.report-kpi-card.kpi-green::after { background: var(--color-success-600); }
.report-kpi-card.kpi-orange::after { background: var(--color-orange-600); }
.report-kpi-card.kpi-red::after { background: var(--color-danger-600); }
.report-kpi-card.kpi-purple::after { background: var(--color-purple-600); }

.report-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.report-kpi-card.kpi-blue .report-kpi-icon { background: var(--color-primary-50); color: var(--color-info-600); }
.report-kpi-card.kpi-green .report-kpi-icon { background: var(--color-success-50); color: var(--color-success-600); }
.report-kpi-card.kpi-orange .report-kpi-icon { background: var(--color-orange-50); color: var(--color-orange-600); }
.report-kpi-card.kpi-red .report-kpi-icon { background: var(--color-danger-50); color: var(--color-danger-600); }
.report-kpi-card.kpi-purple .report-kpi-icon { background: var(--color-purple-50); color: var(--color-purple-600); }

.report-kpi-value {
    font-size: 28px;
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--color-text-primary);
}

.report-kpi-card.kpi-blue .report-kpi-value { color: var(--color-info-600); }
.report-kpi-card.kpi-green .report-kpi-value { color: var(--color-success-600); }
.report-kpi-card.kpi-orange .report-kpi-value { color: var(--color-orange-600); }
.report-kpi-card.kpi-red .report-kpi-value { color: var(--color-danger-600); }
.report-kpi-card.kpi-purple .report-kpi-value { color: var(--color-purple-600); }

.report-kpi-label {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
    white-space: nowrap;
}

/* =====================================================
   AUDIT ENHANCEMENTS
   ===================================================== */

.audit-count {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    font-weight: var(--weight-medium);
}

.audit-table tbody tr {
    cursor: pointer;
}

/* =====================================================
   DRAWER FIELD STYLES
   ===================================================== */

.drawer-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.drawer-field:last-child {
    border-bottom: none;
}

.drawer-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.drawer-value {
    font-size: var(--text-base);
    color: var(--color-text-primary);
    line-height: var(--leading-relaxed);
}

.drawer-mono {
    font-family: 'Courier New', monospace;
    direction: ltr;
    unicode-bidi: embed;
    color: var(--color-text-secondary);
}

/* =====================================================
   IMPROVED EMPTY STATES
   ===================================================== */

.empty-state-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-16) var(--space-8);
    color: var(--color-text-tertiary);
    font-size: var(--text-sm);
    text-align: center;
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    border: 2px dashed var(--color-border-default);
}

.empty-state-card svg {
    opacity: 0.3;
    stroke: var(--color-text-muted);
}

.empty-state-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text-secondary);
}

.empty-state-subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: 400px;
    line-height: var(--leading-relaxed);
}

/* =====================================================
   CORRESPONDENCE FORM SECTIONS
   ===================================================== */

.corr-form {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: var(--space-6);
}

.corr-form-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) 0 var(--space-2);
}

.corr-form-header-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.corr-form-header-icon.incoming { background: var(--color-success-100); color: var(--color-success-700); }
.corr-form-header-icon.outgoing { background: var(--color-info-100); color: var(--color-info-700); }
.corr-form-header-icon.local { background: var(--color-purple-100); color: var(--color-purple-700); }
.corr-form-header-icon.memo { background: var(--color-warning-100); color: var(--color-warning-700); }
.corr-form-header-icon.order { background: var(--color-danger-100); color: var(--color-danger-700); }

.corr-form-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.corr-form-header-title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.corr-form-header-subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.corr-section {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.corr-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-primary-700);
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-bg-subtle);
    letter-spacing: 0.01em;
}

.corr-section-title svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.85;
}

.corr-section-body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.corr-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.corr-field-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.corr-field-label .required {
    color: var(--color-danger-500);
    font-size: var(--text-lg);
    line-height: 1;
}

.corr-field-row {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.corr-field-row > .corr-field {
    flex: 1;
    min-width: 0;
}

.corr-field i-input,
.corr-field i-select,
.corr-field i-multiselect,
.corr-field i-multi-select {
    width: 100%;
    box-sizing: border-box;
}

.corr-field i-input > input {
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--color-border-default);
    width: calc(100% - var(--space-6) - 3px);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.corr-field i-input > input:focus {
    border-color: var(--color-primary-500);
    box-shadow: var(--shadow-focus);
}

.corr-field i-radio {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.corr-field .radio-repeat {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.corr-field .radio-repeat > div {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--color-border-default);
    cursor: pointer;
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
    background: var(--color-bg-surface);
}

.corr-field .radio-repeat > div:hover {
    border-color: var(--color-primary-400);
    background: var(--color-primary-50);
}

.corr-field .radio-repeat > .radio-selected {
    background: var(--color-primary-600);
    color: var(--color-text-inverse);
    border-color: var(--color-primary-600);
}

.corr-file-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.corr-file-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.corr-file-item .file-name {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.corr-file-item .file-size {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.corr-file-item .file-remove {
    background: none;
    border: none;
    color: var(--color-danger-500);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    transition: background var(--transition-fast);
    font-family: var(--font-family);
}

.corr-file-item .file-remove:hover {
    background: var(--color-danger-50);
}

.corr-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-subtle);
    border: 1.5px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-tertiary);
    transition: all var(--transition-fast);
    font-family: var(--font-family);
}

.corr-upload-btn svg {
    width: 14px;
    height: 14px;
}

.corr-upload-btn:hover {
    border-color: var(--color-primary-400);
    color: var(--color-primary-600);
    background: var(--color-primary-50);
}

.corr-cc-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.corr-cc-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.corr-cc-item .cc-name {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}

.corr-cc-item .cc-reason {
    font-size: var(--text-xs);
    color: var(--color-primary-600);
    background: var(--color-primary-50);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}

.corr-cc-item .cc-remove {
    background: none;
    border: none;
    color: var(--color-danger-500);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    transition: background var(--transition-fast);
    font-family: var(--font-family);
}

.corr-cc-item .cc-remove:hover {
    background: var(--color-danger-50);
}

.corr-cc-add-row {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.corr-cc-add-row i-select {
    flex: 1;
}

.corr-cc-add-row i-input {
    width: 140px;
}

.corr-cc-add-btn {
    padding: var(--space-1) var(--space-3);
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-200);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-primary-600);
    transition: all var(--transition-fast);
    font-family: var(--font-family);
    white-space: nowrap;
}

.corr-cc-add-btn:hover {
    background: var(--color-primary-100);
}

.corr-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-start;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    position: sticky;
    bottom: var(--space-4);
    z-index: var(--z-sticky);
}

.corr-actions .corr-btn-primary {
    padding: var(--space-2) var(--space-5);
    background: var(--color-primary-600);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-family);
}

.corr-actions .corr-btn-primary:hover {
    background: var(--color-primary-700);
    box-shadow: var(--shadow-sm);
}

.corr-actions .corr-btn-success {
    padding: var(--space-2) var(--space-5);
    background: var(--color-success-600);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-family);
}

.corr-actions .corr-btn-success:hover {
    background: var(--color-success-700);
    box-shadow: var(--shadow-sm);
}

.corr-actions .corr-btn-secondary {
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-muted);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-family);
}

/* =====================================================
   RESPONSIVE ADMIN PAGES
   ===================================================== */

@media only screen and (max-width: 1024px) {
    .report-kpi-bar {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (max-width: 768px) {
    .report-kpi-bar {
        grid-template-columns: repeat(2, 1fr);
    }

    .gov-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-search {
        max-width: none;
    }

    .toolbar-pagination {
        margin-inline-start: 0;
        justify-content: center;
        flex-wrap: wrap;
    }

    .table-actions {
        flex-direction: column;
        gap: var(--space-1);
    }

    .form-fieldset {
        padding: var(--space-3);
    }
}

@media only screen and (max-width: 640px) {
    .report-kpi-bar {
        grid-template-columns: 1fr 1fr;
    }

    .report-kpi-bar > :last-child {
        grid-column: 1 / -1;
    }

    .gov-table {
        font-size: var(--text-xs);
    }

    .gov-table td {
        padding: var(--space-2) var(--space-2);
    }
}

.corr-actions .corr-btn-secondary:hover {
    background: var(--color-bg-active);
    border-color: var(--color-border-strong);
}

.corr-actions .corr-btn-cancel {
    padding: var(--space-2) var(--space-4);
    background: transparent;
    color: var(--color-text-tertiary);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-inline-start: auto;
    font-family: var(--font-family);
}

.corr-actions .corr-btn-cancel:hover {
    color: var(--color-danger-600);
    background: var(--color-danger-50);
}

.corr-internal-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-3);
    background: var(--color-purple-50);
    color: var(--color-purple-700);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

@media (max-width: 640px) {
    .corr-form {
        gap: var(--space-3);
    }

    .corr-section-body {
        padding: var(--space-3);
    }

    .corr-field-row {
        flex-direction: column;
        gap: var(--space-3);
    }

    .corr-actions {
        flex-wrap: wrap;
        padding: var(--space-3);
    }

    .corr-cc-add-row {
        flex-wrap: wrap;
    }
}

/* =====================================================
   ADMIN PAGE LAYOUT
   ===================================================== */

.admin-page {
    max-width: 1200px;
}

.page-header-meta {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.page-header-divider {
    color: var(--color-border-default);
    font-weight: var(--weight-medium);
}

/* =====================================================
   REMOVE DIALOG - PREMIUM MODAL
   ===================================================== */

.remove-dialog {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-4) var(--space-6);
    max-width: 440px;
    margin: 0 auto;
}

.remove-dialog-icon {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-full);
    background: var(--color-danger-50);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    color: var(--color-danger-500);
}

.remove-dialog-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.remove-dialog-message {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-1) 0;
    line-height: var(--leading-relaxed);
}

.remove-dialog-hint {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-5) 0;
}

.error-message {
    color: var(--color-danger-600);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-align: center;
    margin-bottom: var(--space-3);
}

.error-message:empty {
    display: none;
}

.remove-dialog-actions {
    display: flex;
    gap: var(--space-3);
    width: 100%;
    justify-content: center;
}

.remove-dialog-actions .gov-btn {
    min-width: 120px;
    justify-content: center;
    padding: var(--space-3) var(--space-5);
}

/* =====================================================
   MONITOR PAGE - PREMIUM STYLING
   ===================================================== */

.monitor-unit-card {
    overflow: visible;
}

.monitor-unit-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* =====================================================
   WELCOME CARD
   ===================================================== */

.welcome-card {
    background: linear-gradient(135deg, var(--color-primary-800), var(--color-primary-600));
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-8);
    color: var(--color-text-inverse);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.welcome-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
    pointer-events: none;
}

.welcome-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
}

.welcome-card-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.welcome-greeting {
    font-size: var(--text-base);
    opacity: 0.9;
    font-weight: var(--weight-medium);
}

.welcome-name {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
}

.welcome-meta {
    font-size: var(--text-sm);
    opacity: 0.85;
    margin-top: var(--space-2);
}

.welcome-summary {
    font-size: var(--text-sm);
    opacity: 0.9;
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: rgba(255,255,255,0.12);
    border-radius: var(--radius-md);
    line-height: var(--leading-relaxed);
}

.welcome-date {
    font-size: var(--text-sm);
    opacity: 0.85;
    white-space: nowrap;
    text-align: left;
    flex-shrink: 0;
    padding-top: var(--space-1);
}

@media (max-width: 640px) {
    .welcome-card {
        flex-direction: column;
        padding: var(--space-4) var(--space-5);
    }
    .welcome-name {
        font-size: var(--text-xl);
    }
}

/* =====================================================
   PRIORITY ACTION CENTER
   ===================================================== */

.priority-action-center {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
    overflow: hidden;
}

.priority-action-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-danger-700);
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-danger-50);
}

.priority-action-header svg {
    color: var(--color-danger-600);
    flex-shrink: 0;
}

.priority-action-items {
    display: flex;
    flex-direction: column;
}

.priority-action-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    cursor: pointer;
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--color-border-light);
}

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

.priority-action-item:hover {
    background: var(--color-bg-hover);
}

.priority-action-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.priority-action-danger .priority-action-icon {
    background: var(--color-danger-50);
    color: var(--color-danger-600);
}

.priority-action-info .priority-action-icon {
    background: var(--color-info-100);
    color: var(--color-info-600);
}

.priority-action-warning .priority-action-icon {
    background: var(--color-warning-100);
    color: var(--color-warning-600);
}

.priority-action-text {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
}

.priority-action-danger .priority-action-text {
    color: var(--color-danger-700);
}

.priority-action-arrow {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* =====================================================
   KPI HINTS
   ===================================================== */

.kpi-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
    margin-top: var(--space-1);
}

.kpi-hint-danger {
    color: var(--color-danger-600);
    font-weight: var(--weight-semibold);
}

/* =====================================================
   QUICK ACTIONS - PRIVATE BUTTON
   ===================================================== */

.qa-private {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
}

/* =====================================================
   CORRESPONDENCE LISTING
   ===================================================== */

.corr-listing {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.corr-list-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-5) var(--space-5);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-base), border-color var(--transition-fast);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: relative;
}

.corr-list-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-primary-200);
}

.corr-list-card-unseen {
    border-inline-start: 3px solid var(--coda-primary);
    background: var(--color-primary-50);
}

.corr-list-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.monitor-icon-online {
    border-radius: var(--radius-sm);
}

.monitor-icon-offline {
    filter: grayscale(1);
    opacity: 0.5;
    border-radius: var(--radius-sm);
}

.monitor-properties-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.monitor-property-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-subtle);
    min-width: 140px;
    transition: all var(--transition-fast);
}

.monitor-property-item:hover {
    border-color: var(--color-primary-200);
    background: var(--color-primary-50);
    box-shadow: var(--shadow-sm);
}

.monitor-property-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
}

.monitor-property-link:hover {
    color: var(--color-primary-600);
}

.monitor-property-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.corr-list-type-badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    padding: 3px var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    white-space: nowrap;
    border: 1px solid rgba(21,183,158,0.15);
}

.corr-list-receiver {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    padding: 3px var(--space-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-light);
}

.corr-list-issue {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-family: var(--font-family);
    font-variant-numeric: tabular-nums;
}

.corr-list-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.corr-list-subject {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: var(--leading-normal);
}

.corr-list-desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.corr-list-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-light);
}

.corr-list-date {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.corr-list-elapsed {
    color: var(--color-text-tertiary);
}

.corr-list-participants {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.corr-list-assignment-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-light);
    flex-wrap: wrap;
}

.corr-list-completed-badge {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-success-600);
    font-weight: var(--weight-semibold);
    background: var(--color-success-50);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
}

/* =====================================================
   CORRESPONDENCE TABLE ROWS (inbox)
   ===================================================== */

.corr-table-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.corr-table-row:hover {
    background: var(--color-bg-hover);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.corr-table-cell {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.corr-table-id {
    width: 60px;
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    flex-shrink: 0;
}

.corr-table-subject {
    flex: 2;
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    min-width: 0;
}

.corr-table-desc {
    flex: 2;
    min-width: 0;
}

.corr-table-priority, .corr-table-type {
    width: 80px;
    flex-shrink: 0;
    text-align: center;
}

.corr-table-date {
    width: 100px;
    flex-shrink: 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.corr-table-actions {
    width: auto;
    flex-shrink: 0;
}

.corr-table-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-primary-600);
    background: var(--color-primary-50);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.corr-table-action-btn:hover {
    background: var(--color-primary-100);
}

/* =====================================================
   CORRESPONDENCE FILTER BAR
   ===================================================== */

.corr-filter-bar {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    align-items: center;
    justify-content: flex-end;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2);
    box-shadow: var(--shadow-xs);
}

.corr-filter-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.corr-filter-option:hover {
    background: var(--color-bg-hover);
}

.corr-filter-label {
    color: var(--color-text-secondary);
    font-weight: var(--weight-medium);
}

/* =====================================================
   CORRESPONDENCE DETAIL VIEW
   ===================================================== */

.corr-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.corr-detail-header {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.corr-detail-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.corr-detail-type-badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
}

.corr-detail-receiver {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    padding: 2px var(--space-2);
    background: var(--color-bg-muted);
    border-radius: var(--radius-sm);
}

.corr-detail-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    line-height: var(--leading-tight);
}

.corr-detail-desc {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.corr-detail-info-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.corr-detail-date {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.corr-detail-elapsed {
    color: var(--color-text-tertiary);
    font-size: var(--text-xs);
}

.corr-detail-issue-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.corr-detail-issue-number {
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.corr-detail-issue-date {
    color: var(--color-text-muted);
}

.corr-detail-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.corr-detail-action-group {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.corr-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: var(--font-family);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    white-space: nowrap;
}

.corr-action-primary {
    background: var(--color-primary-600);
    color: var(--color-text-inverse);
}

.corr-action-primary:hover {
    background: var(--color-primary-700);
    box-shadow: var(--shadow-sm);
}

.corr-action-success {
    background: var(--color-success-100);
    color: var(--color-success-700);
}

.corr-action-success:hover {
    background: var(--color-success-200);
}

.corr-action-warning {
    background: var(--color-warning-100);
    color: var(--color-warning-700);
}

.corr-action-warning:hover {
    background: var(--color-warning-200);
}

.corr-action-danger {
    background: var(--color-danger-50);
    color: var(--color-danger-700);
}

.corr-action-danger:hover {
    background: var(--color-danger-100);
}

.corr-action-info {
    background: var(--color-info-100);
    color: var(--color-info-700);
}

.corr-action-info:hover {
    background: var(--color-info-200);
}

.corr-action-export {
    background: var(--color-bg-muted);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-default);
    margin-inline-start: auto;
}

.corr-action-export:hover {
    background: var(--color-bg-active);
}

/* =====================================================
   MODAL FORMS (assignments sub-views)
   ===================================================== */

.corr-modal-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 400px;
}

.corr-modal-wide {
    min-width: 600px;
}

.corr-modal-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
}

.corr-modal-header svg {
    color: var(--color-primary-600);
    flex-shrink: 0;
}

.corr-modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.corr-modal-body .corr-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.corr-modal-body .corr-field-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
}

.corr-modal-actions {
    display: flex;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
}

.corr-modal-actions .corr-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-5);
    background: var(--color-primary-800);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-family);
}

.corr-modal-actions .corr-btn-primary:hover {
    background: var(--color-primary-700);
    box-shadow: var(--shadow-sm);
}

.corr-modal-actions .corr-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-muted);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-family);
}

.corr-modal-actions .corr-btn-secondary:hover {
    background: var(--color-bg-active);
    border-color: var(--color-border-strong);
}

/* =====================================================
   CLONE FORM FIELDS
   ===================================================== */

.clone-form-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.clone-form-fields .corr-field i-input {
    width: 100%;
}

/* =====================================================
   SUMMARY RESULTS
   ===================================================== */

.summary-results {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    min-height: 100px;
}

.summary-results:empty::after {
    content: 'قم بتحديد فترة زمنية والضغط على استعلام لعرض النتائج';
    display: block;
    text-align: center;
    padding: var(--space-8);
    color: var(--color-text-muted);
    font-style: italic;
}

/* =====================================================
   FORM TABLE PREMIUM POLISH
   ===================================================== */

.form-panel .form-table {
    width: 100%;
    border-collapse: collapse;
}

.form-panel .form-table td {
    padding: var(--space-3) var(--space-2);
    vertical-align: middle;
    border: none;
}

.form-panel .form-table tr td:first-child {
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    white-space: nowrap;
    width: 140px;
    padding-inline-end: var(--space-4);
}

.form-panel .form-table tr td:last-child {
    width: 100%;
}

.form-panel .form-table i-input,
.form-panel .form-table i-select,
.form-panel .form-table i-multiselect {
    width: 100%;
}

/* =====================================================
   TAB ENHANCEMENTS
   ===================================================== */

i-tabs {
    display: flex;
    flex-direction: column;
}

i-tabs > [role="tablist"],
i-tabs > .tab-headers {
    display: flex;
    gap: var(--space-1);
    border-bottom: none;
    margin-bottom: var(--space-4);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-1);
}

i-tab {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
}

i-tab:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

i-tab[selected] {
    background: var(--coda-primary);
    color: var(--color-text-inverse);
    font-weight: var(--weight-semibold);
    box-shadow: var(--shadow-xs);
}

/* =====================================================
   RESPONSIVE ADMIN/MONITOR PAGES
   ===================================================== */

@media only screen and (max-width: 768px) {
    .monitor-properties-grid {
        gap: var(--space-2);
    }

    .monitor-property-item {
        min-width: 120px;
        padding: var(--space-2);
    }

    .remove-dialog {
        padding: var(--space-3);
    }

    .remove-dialog-actions {
        flex-direction: column;
    }

    .page-header-meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media only screen and (max-width: 640px) {
    .monitor-properties-grid {
        flex-direction: column;
    }

    .monitor-property-item {
        min-width: 0;
        width: 100%;
    }
}

/* =====================================================
   DIRECT ADMIN BANNER
   ===================================================== */

.corr-direct-admin-banner {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: white;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    text-align: center;
}

.corr-direct-admin-banner-title {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
}

.corr-direct-admin-banner-subtitle {
    font-size: var(--text-sm);
    margin-top: var(--space-1);
    opacity: 0.9;
}

/* =====================================================
   MEMO MODE SELECTOR
   ===================================================== */

.corr-memo-mode-selector {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

.corr-memo-mode-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    background: var(--color-bg-surface);
}

.corr-memo-mode-option:hover {
    border-color: var(--color-primary-400);
    background: var(--color-primary-50);
}

/* =====================================================
   UPLOAD AREA
   ===================================================== */

.corr-upload-area {
    display: flex;
    align-items: center;
}

/* =====================================================
   EMPTY STATE COMPACT (for dashboard cards)
   ===================================================== */

.empty-state-compact {
    padding: var(--space-6) var(--space-4);
    border: none;
    box-shadow: none;
}

/* =====================================================
   CORR ACTIONS BUTTON ICONS
   ===================================================== */

.corr-actions .corr-btn-primary,
.corr-actions .corr-btn-success {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

@media (max-width: 768px) {
    .corr-modal-form {
        min-width: auto;
    }
    .corr-modal-wide {
        min-width: auto;
    }
    .corr-detail-header {
        padding: var(--space-4);
    }
    .corr-list-card {
        padding: var(--space-3) var(--space-4);
    }
    .corr-table-row {
        flex-wrap: wrap;
    }
    .corr-table-desc {
        display: none;
    }
}

/* =====================================================
   SMART DASHBOARD - FADE-IN TRANSITIONS
   ===================================================== */

@keyframes smart-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.smart-fade-in {
    animation: smart-fade-in 0.4s ease-out both;
}

.smart-fade-in:nth-child(1) { animation-delay: 0s; }
.smart-fade-in:nth-child(2) { animation-delay: 0.06s; }
.smart-fade-in:nth-child(3) { animation-delay: 0.12s; }
.smart-fade-in:nth-child(4) { animation-delay: 0.18s; }
.smart-fade-in:nth-child(5) { animation-delay: 0.24s; }
.smart-fade-in:nth-child(6) { animation-delay: 0.3s; }
.smart-fade-in:nth-child(7) { animation-delay: 0.36s; }

/* =====================================================
   PRIORITY CALM STATE
   ===================================================== */

.priority-calm-state {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: var(--color-success-50);
    border: 1px solid var(--color-success-200);
    border-radius: var(--radius-xl);
    color: var(--color-success-700);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

/* =====================================================
   PRIORITY ACTION ENHANCEMENTS
   ===================================================== */

.priority-action-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.priority-action-explain {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    font-weight: var(--weight-normal);
}

.priority-action-cta {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-primary-600);
    white-space: nowrap;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-primary-50);
    transition: background var(--transition-fast);
}

.priority-action-item:hover .priority-action-cta {
    background: var(--color-primary-100);
}

/* =====================================================
   QUICK ACTION HIGHLIGHT & RECOMMENDATION
   ===================================================== */

.qa-recommendation {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-primary-600);
    background: var(--color-primary-50);
    padding: 2px var(--space-3);
    border-radius: var(--radius-full);
    margin-inline-start: var(--space-2);
}

.qa-recommendation:empty {
    display: none;
}

.qa-highlighted {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.3), 0 0 12px rgba(59, 89, 152, 0.4);
    animation: qa-pulse 2s ease-in-out infinite;
}

@keyframes qa-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.3), 0 0 12px rgba(59, 89, 152, 0.3); }
    50% { box-shadow: 0 0 0 3px rgba(255,255,255,0.4), 0 0 18px rgba(59, 89, 152, 0.5); }
}

/* =====================================================
   PROCESS HEALTH WIDGET
   ===================================================== */

.process-health-widget {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
    overflow: hidden;
}

.process-health-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-light);
}

.process-health-body {
    padding: var(--space-4) var(--space-5);
}

.process-health-bars {
    display: flex;
    height: 32px;
    border-radius: var(--radius-md);
    overflow: hidden;
    gap: 2px;
}

.ph-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    transition: flex var(--transition-base);
}

.ph-segment span {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 var(--space-2);
}

.ph-danger { background: var(--color-danger-100); color: var(--color-danger-800); }
.ph-warning { background: var(--color-warning-100); color: var(--color-warning-800); }
.ph-info { background: var(--color-info-100); color: var(--color-info-800); }
.ph-success { background: var(--color-success-100); color: var(--color-success-800); }

.process-health-status {
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    text-align: center;
}

.ph-status-ok { color: var(--color-success-600); }
.ph-status-warn { color: var(--color-danger-600); }

.process-health-calm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--color-success-600);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    padding: var(--space-2) 0;
}

/* =====================================================
   NOTIFICATION DROPDOWN
   ===================================================== */

.notification-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    min-width: 300px;
    max-width: 360px;
    z-index: var(--z-dropdown);
    border: 1px solid var(--color-border-default);
    overflow: hidden;
    animation: dropdown-enter 0.15s ease;
}

html[dir='rtl'] .notification-dropdown {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

.notif-dropdown-visible {
    display: block;
}

.notif-dropdown-header {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-light);
    text-align: center;
}

.notif-dropdown-body {
    max-height: 280px;
    overflow-y: auto;
}

.notif-dropdown-footer {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-primary-600);
    font-weight: var(--weight-medium);
    text-align: center;
    border-top: 1px solid var(--color-border-light);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.notif-dropdown-footer:hover {
    background: var(--color-primary-50);
}

.notif-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--color-border-light);
}

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

.notif-item:hover {
    background: var(--color-bg-hover);
}

.notif-item-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notif-danger .notif-item-icon { background: var(--color-danger-50); color: var(--color-danger-600); }
.notif-info .notif-item-icon { background: var(--color-info-100); color: var(--color-info-600); }
.notif-warning .notif-item-icon { background: var(--color-warning-100); color: var(--color-warning-600); }

.notif-item-text {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    font-weight: var(--weight-medium);
}

.notif-empty {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

/* =====================================================
   ACTIVITY FEED BADGE
   ===================================================== */

.activity-badge {
    flex-shrink: 0;
    font-size: var(--text-2xs) !important;
}

/* =====================================================
   LIST ITEM NEW HIGHLIGHT
   ===================================================== */

.list-item-new {
    background: var(--color-info-50);
    border-inline-start: 3px solid var(--color-info-500);
}

/* =====================================================
   EMPTY STATE COMPACT
   ===================================================== */

.empty-state-compact {
    padding: var(--space-6) var(--space-4);
}

.empty-state-compact .empty-state-subtitle {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.empty-state-title {
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

/* =====================================================
   LIST PAGE COUNT SUMMARY
   ===================================================== */

.list-count-summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    box-shadow: var(--shadow-xs);
}

.list-count-summary svg {
    color: var(--coda-primary);
    flex-shrink: 0;
}

.list-count-summary .count-number {
    font-weight: var(--weight-bold);
    color: var(--coda-teal-deep);
}

/* =====================================================
   HOVER ENHANCEMENTS ON CARDS
   ===================================================== */

.kpi-card:active {
    transform: translateY(-1px);
}

.content-card {
    transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.content-card:hover {
    transform: translateY(-1px);
}

.priority-action-item {
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.priority-action-item:hover {
    background: var(--color-bg-hover);
    transform: translateX(-2px);
}

html[dir='rtl'] .priority-action-item:hover {
    transform: translateX(2px);
}

/* =====================================================
   FORM CONTEXT HINTS
   ===================================================== */

.form-context-hint {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-info-50);
    border: 1px solid var(--color-info-200);
    border-radius: var(--radius-lg);
    color: var(--color-info-700);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-3);
    animation: smart-fade-in 0.3s ease-out;
}

.form-context-hint svg {
    flex-shrink: 0;
    color: var(--color-info-500);
}

@media (prefers-reduced-motion: reduce) {
    .smart-fade-in {
        animation: none;
    }
    .qa-highlighted {
        animation: none;
    }
    .priority-action-item:hover {
        transform: none;
    }
    .kpi-card:hover {
        transform: none;
    }
    .content-card:hover {
        transform: none;
    }
}

.toast-container {
    position: fixed;
    top: calc(var(--header-height) + var(--space-4));
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border-default);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    max-width: 420px;
    direction: rtl;
}
.toast-visible {
    opacity: 1;
    transform: translateY(0);
}
.toast-exit {
    opacity: 0;
    transform: translateY(-12px);
}
.toast-icon { display: flex; flex-shrink: 0; }
.toast-success { border-right: 3px solid var(--color-success-500); }
.toast-success .toast-icon { color: var(--color-success-500); }
.toast-error { border-right: 3px solid var(--color-danger-500); }
.toast-error .toast-icon { color: var(--color-danger-500); }
.toast-info { border-right: 3px solid var(--color-info-500); }
.toast-info .toast-icon { color: var(--color-info-500); }
.toast-warning { border-right: 3px solid var(--color-warning-500); }
.toast-warning .toast-icon { color: var(--color-warning-500); }

.corr-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    flex-wrap: wrap;
}
.corr-breadcrumb a,
.corr-breadcrumb i-link {
    color: var(--color-primary-500);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition-fast);
}
.corr-breadcrumb a:hover,
.corr-breadcrumb i-link:hover {
    color: var(--color-primary-700);
    text-decoration: underline;
}
.corr-breadcrumb .breadcrumb-sep {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}
.corr-breadcrumb .breadcrumb-current {
    color: var(--color-text-primary);
    font-weight: var(--weight-medium);
}

:focus-visible {
    outline: 2px solid var(--coda-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
button:focus-visible,
.gov-btn:focus-visible,
.quick-action-btn:focus-visible,
.corr-action-btn:focus-visible,
i-button:focus-visible,
i-link:focus-visible {
    outline: 2px solid var(--coda-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.sidebar-extra-link:focus-visible {
    outline: 2px solid var(--coda-primary);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}
.kpi-card:focus-visible {
    outline: 2px solid var(--coda-primary);
    outline-offset: 2px;
}

.message-status[status]::after {
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    margin-right: var(--space-1);
}
.message-status[status="Draft"]::after { content: "مسودة"; }
.message-status[status="Active"]::after { content: "نشط"; }
.message-status[status="Cancelled"]::after { content: "ملغي"; }
.message-status[status="Closed"]::after { content: "مغلق"; }

.corr-list-card-unseen {
    position: relative;
}
.corr-list-card-unseen::before {
    content: "جديد";
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    background: var(--color-info-500);
    color: white;
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

.mail-counts-widget {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.mail-counts-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-gray-100);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
}

.mail-counts-header svg {
    color: var(--color-gray-400);
}

.mail-counts-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.mail-count-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    flex: 1;
    min-width: 150px;
    border-left: 1px solid var(--color-gray-100);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.mail-count-item:last-child {
    border-left: none;
}

.mail-count-item:hover {
    background: var(--color-gray-50);
}

.mail-count-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mail-count-label {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    flex: 1;
}

.mail-count-value {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
}

.mail-count-private {
    background: #fffbeb;
}

.mail-count-private:hover {
    background: #fef3c7;
}

.mail-count-value-private {
    color: #92400e;
}

@media (max-width: 768px) {
    .mail-counts-body {
        flex-direction: column;
    }

    .mail-count-item {
        border-left: none;
        border-top: 1px solid var(--color-gray-100);
        min-width: unset;
    }

    .mail-count-item:first-child {
        border-top: none;
    }
}

.unified-inbox-tabs {
    display: flex;
    gap: var(--space-1);
    margin: 0 0 var(--space-4) 0;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    scrollbar-width: none;
    padding: var(--space-1);
    box-shadow: var(--shadow-xs);
}

.unified-inbox-tabs::-webkit-scrollbar {
    display: none;
}

.inbox-tab {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    flex-shrink: 0;
    position: relative;
    min-height: 40px;
}

.inbox-tab svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.inbox-tab:hover {
    background: var(--color-gray-50);
    color: var(--color-text-primary);
}

.inbox-tab:hover svg { opacity: 0.85; }

.inbox-tab.active {
    background: var(--color-primary-50);
    border-color: var(--coda-primary);
    color: var(--coda-teal-deep);
    font-weight: var(--weight-semibold);
    box-shadow: 0 1px 3px rgba(21,183,158,0.10);
}

.inbox-tab.active svg {
    opacity: 1;
    stroke: var(--coda-teal-deep);
}

.inbox-tab[data-filter="incoming"].active {
    background: var(--color-incoming-soft);
    border-color: var(--color-incoming);
    color: var(--color-incoming-dark);
}
.inbox-tab[data-filter="incoming"].active svg { stroke: var(--color-incoming-dark); }
.inbox-tab[data-filter="incoming"].active .inbox-tab-count { background: var(--color-incoming); }

.inbox-tab[data-filter="outgoing"].active {
    background: var(--color-outgoing-soft);
    border-color: var(--color-outgoing);
    color: var(--color-outgoing-dark);
}
.inbox-tab[data-filter="outgoing"].active svg { stroke: var(--color-outgoing-dark); }
.inbox-tab[data-filter="outgoing"].active .inbox-tab-count { background: var(--color-outgoing); }

.inbox-tab[data-filter="internal"].active {
    background: var(--color-memo-soft);
    border-color: var(--color-memo);
    color: var(--color-memo-dark);
}
.inbox-tab[data-filter="internal"].active svg { stroke: var(--color-memo-dark); }
.inbox-tab[data-filter="internal"].active .inbox-tab-count { background: var(--color-memo); }

.inbox-tab-label {
    line-height: 1.2;
}

.inbox-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    border-radius: var(--radius-full);
    background: var(--color-gray-200);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: 1;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.inbox-tab.active .inbox-tab-count {
    background: var(--coda-primary);
    color: #fff;
}

.inbox-tab-private.active {
    background: var(--color-private-soft);
    border-color: var(--color-private-dark);
    color: var(--color-private-dark);
    box-shadow: 0 1px 3px rgba(212,167,44,0.12);
}

.inbox-tab-private.active svg {
    stroke: var(--color-private-dark);
}

.inbox-tab-private.active .inbox-tab-count {
    background: var(--color-private-dark);
    color: #fff;
}

.inbox-type-legend {
    display: flex;
    gap: var(--space-4);
    margin: 0 0 var(--space-3) 0;
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-dot-incoming { background: var(--color-incoming); }
.legend-dot-outgoing { background: var(--color-outgoing); }
.legend-dot-internal { background: var(--color-memo); }
.legend-dot-private { background: var(--color-private-dark); }

.inbox-filter-bar {
    margin: 0 0 var(--space-4) 0;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-xs);
}

.filter-bar-row {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

.filter-bar-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 200px;
    background: var(--color-gray-50);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    min-height: 38px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.filter-bar-search:focus-within {
    border-color: var(--coda-primary);
    box-shadow: var(--shadow-focus);
    background: var(--color-bg-surface);
}

.filter-bar-search svg {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.filter-input {
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: var(--text-sm);
    width: 100%;
    color: var(--color-text-primary);
}

.filter-input::placeholder {
    color: var(--color-text-muted);
}

.filter-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-full);
    background: var(--color-bg-surface);
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    min-height: 34px;
}

.filter-quick-btn:hover {
    background: var(--color-gray-50);
    border-color: var(--color-border-strong);
}

.filter-quick-btn.active {
    background: var(--color-primary-50);
    border-color: var(--coda-primary);
    color: var(--coda-teal-deep);
    font-weight: var(--weight-semibold);
}

.filter-quick-private {
    color: var(--color-private-dark);
    border-color: var(--color-private-border);
    background: var(--color-private-soft);
}

.filter-quick-private:hover {
    background: var(--color-private-warm);
    border-color: var(--color-private);
}

.filter-quick-private.active {
    background: var(--color-private-warm);
    border-color: var(--color-private-dark);
    color: var(--color-private-dark);
    font-weight: var(--weight-semibold);
}

.filter-quick-clear {
    color: var(--color-danger-600);
    border-color: var(--color-danger-200);
    background: var(--color-danger-50);
}

.filter-quick-clear:hover {
    background: var(--color-danger-100);
}

.corr-list-card-private {
    border-inline-end: 4px solid var(--color-private-dark) !important;
    background: linear-gradient(135deg, var(--color-private-soft) 0%, var(--color-bg-surface) 50%) !important;
    position: relative;
}

.corr-list-card-private::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid var(--color-private-border);
    border-radius: inherit;
    pointer-events: none;
}

.corr-list-card-private .corr-list-type-badge {
    background: var(--color-private-warm);
    color: var(--color-private-dark);
    border-color: var(--color-private-border);
}

.direct-memo-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--color-private-dark);
    color: #fff;
    padding: 3px var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.3px;
}

.direct-memo-badge svg {
    width: 12px;
    height: 12px;
    stroke: #fff;
}

.corr-list-card-private .direct-memo-badge {
    animation: none;
}

.admin-order-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--color-admin);
    color: #fff;
    padding: 3px var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.3px;
}

.admin-order-badge svg {
    width: 12px;
    height: 12px;
    stroke: #fff;
}

.corr-list-card-order {
    border-inline-start: 3px solid var(--color-admin);
}

.corr-list-meta-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-1);
}

.corr-list-attachment-icon {
    display: inline-flex;
    align-items: center;
    color: var(--color-gray-400);
}

.corr-list-attachment-icon svg {
    width: 14px;
    height: 14px;
}

.corr-list-issue-inline {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    background: var(--color-gray-50);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--color-gray-200);
}

.empty-state-private {
    border: 1px solid var(--color-private-border);
    background: linear-gradient(135deg, var(--color-private-soft) 0%, var(--color-bg-surface) 60%);
    border-radius: var(--radius-lg);
}

.empty-state-private svg {
    stroke: var(--color-private-dark);
    opacity: 0.4;
}

@media (max-width: 768px) {
    .unified-inbox-tabs {
        gap: 0;
        padding: var(--space-1);
        -webkit-overflow-scrolling: touch;
    }

    .inbox-tab {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
        min-height: 44px;
    }

    .inbox-tab svg {
        width: 16px;
        height: 16px;
    }

    .inbox-type-legend {
        display: none;
    }

    .filter-bar-row {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-bar-search {
        min-width: unset;
    }

    .filter-quick-btn {
        min-height: 40px;
        padding: var(--space-2) var(--space-4);
    }

    .corr-listing {
        padding: 0 var(--space-1);
    }

    .corr-list-card {
        padding: var(--space-4);
    }

    .empty-cta {
        min-height: 44px;
    }

    .gov-btn {
        min-height: 44px;
    }
}

/* =====================================================
   LOADING SKELETON ANIMATION
   ===================================================== */

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

.skeleton {
    background: linear-gradient(90deg,
        var(--color-gray-100) 25%,
        var(--color-gray-50) 37%,
        var(--color-gray-100) 63%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
    min-height: 16px;
}

.skeleton-text { height: 14px; margin-bottom: var(--space-2); }
.skeleton-text-sm { height: 12px; width: 60%; margin-bottom: var(--space-1); }
.skeleton-title { height: 20px; width: 40%; margin-bottom: var(--space-3); }
.skeleton-avatar { width: 40px; height: 40px; border-radius: var(--radius-full); }
.skeleton-card {
    padding: var(--space-5);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
}

/* =====================================================
   IMPROVED TOAST NOTIFICATIONS
   ===================================================== */

.toast-notification {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    z-index: 10000;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    box-shadow: var(--shadow-xl);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
    opacity: 0;
    pointer-events: none;
    max-width: 90vw;
    text-align: center;
    backdrop-filter: blur(8px);
}

.toast-notification.toast-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.toast-success {
    background: var(--color-success-600);
    color: #fff;
}

.toast-error {
    background: var(--color-danger-600);
    color: #fff;
}

.toast-warning {
    background: var(--color-warning-600);
    color: #fff;
}

.toast-info {
    background: var(--color-info-600);
    color: #fff;
}

/* =====================================================
   SMOOTH PAGE TRANSITIONS
   ===================================================== */

.route {
    animation: route-fade-in 0.25s ease-out;
}

@keyframes route-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =====================================================
   IMPROVED MOBILE TOUCH TARGETS
   ===================================================== */

@media (max-width: 600px) {
    i-link {
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    .gov-btn, button, [role="button"] {
        min-height: 48px;
        padding-inline: var(--space-4);
    }

    input, select, textarea {
        min-height: 48px;
        font-size: 16px !important;
    }

    .kpi-card {
        padding: var(--space-4);
    }

    .quick-action-btn {
        min-height: 52px;
        padding: var(--space-3) var(--space-4);
    }

    .title-bar {
        padding: var(--space-2) var(--space-3);
    }

    i-router {
        padding: var(--space-3) var(--space-2);
    }

    .dialog-overlay .dialog-content {
        width: 95vw;
        max-height: 90vh;
        margin: var(--space-3);
    }
}

/* =====================================================
   IMPROVED SCROLLBAR FOR MOBILE
   ===================================================== */

@media (pointer: coarse) {
    ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }

    * {
        -webkit-overflow-scrolling: touch;
    }
}

/* =====================================================
   FOCUS VISIBLE FOR ACCESSIBILITY
   ===================================================== */

:focus-visible {
    outline: 2px solid var(--coda-primary);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--coda-primary);
    outline-offset: 2px;
}

/* =====================================================
   PRINT STYLES
   ===================================================== */

@media print {
    .side-bar, .title-bar, .connection-banner,
    .toast-notification, .quick-actions-bar { display: none !important; }
    i-router { padding: 0; height: auto; overflow: visible; }
    .app-shrunk { margin-inline-start: 0; width: 100%; }
}