/* Google Fonts */
@import url('../vendor/fonts/tajawal/tajawal.css');

:root {
    --primary-color: #3f1053; /* Core color */
    --primary-dark: #2a0b38;
    --primary-light: #5d1e7a;
    --secondary-color: #f1f2f6;
    --accent-color: #e63946;
    --success-color: #1e8a5f;
    --warning-color: #c07a1e;
    --light-bg: #ffffff; /* Saisid background white */
    --body-bg: #f7f6fb;
    --dark-text: #23202b; /* Ink with a faint purple bias, matches the brand instead of a neutral grey */
    --light-text: #756e80; /* Secondary text, same purple-leaning family as --dark-text */
    --sidebar-width: 280px;
    --header-height: 60px;

    /* Elevation scale — one consistent set of shadows used everywhere instead of
       ad-hoc rgba() values repeated (and slightly re-invented) across the file. */
    --shadow-xs: 0 1px 2px rgba(42, 11, 56, 0.06);
    --shadow-sm: 0 2px 8px rgba(42, 11, 56, 0.06);
    --shadow-md: 0 8px 24px rgba(42, 11, 56, 0.08);
    --shadow-lg: 0 16px 40px rgba(42, 11, 56, 0.12);

    /* Radius scale — replaces the mix of 8/12/14/16/18/20px used interchangeably
       for the same kind of element (cards vs. controls vs. pills). */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;

    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.4);
    --border-radius: var(--radius-lg);
    --border-radius-sm: var(--radius-sm);
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Tajawal', sans-serif;
}

body {
    background-color: var(--body-bg);
    color: var(--dark-text);
    direction: rtl;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

a, button, [tabindex] {
    outline-offset: 2px;
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

::-webkit-scrollbar { 
    display: none; /* Chrome, Safari, and Opera */
}

* {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Glassmorphism Panel */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
}

/* App Layout */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: #fdf8ff; /* Subtle light purple/lavender tint */
    color: var(--dark-text);
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    transition: var(--transition);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(63, 16, 83, 0.06); 
    border-left: 1.5px solid rgba(63, 16, 83, 0.12); 
}

.sidebar-header {
    height: 70px; /* Slightly taller for the new stacked logo */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
}

.sidebar-header img {
    height: 55px; /* Increased height for legibility of stacked logo */
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(63, 16, 83, 0.1));
}

.sidebar-header h2 {
    font-size: 1.15rem; /* Smaller font */
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: 1px;
}

.content-area {
    flex: 1;
    padding: 0 25px 25px 25px;
    overflow-y: auto;
    background: #f8fafc;
}

/* عند تجاوز عناصر القائمة ارتفاع الشاشة، يجب أن تُصبح هذه المنطقة وحدها القابلة
   للتمرير عمودياً (وليس الشريط الجانبي كاملاً) حتى يبقى الرأس والتذييل ثابتين
   وتظل كل العناصر (بما فيها الأخيرة) قابلة للوصول دون Scroll أفقي غير مرغوب. */
.sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-nav ul { list-style: none; }

.nav-section-title {
    padding: 14px 18px 4px;
    font-size: 0.73rem;
    color: var(--light-text);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 4px;
}

.sidebar-nav li:not(.nav-section-title) {
    padding: 14px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    color: #444;
    margin: 4px 14px;
    border-radius: 12px;
    white-space: nowrap;
    overflow: hidden;
    font-size: 0.98rem;
    font-weight: 500;
    border-bottom: 2px solid rgba(63, 16, 83, 0.04); /* More visible purple divider */
}

.sidebar-nav li:not(.nav-section-title):last-child {
    border-bottom: none;
}

.sidebar-nav li:not(.nav-section-title) i {
    font-size: 1.15rem;
    color: var(--primary-color);
    transition: var(--transition);
    width: 26px;
    text-align: center;
    flex-shrink: 0;
}

/* Text takes available space to push badge to left */
.sidebar-nav li:not(.nav-section-title) span {
    flex: 1;
}

.sidebar-nav li:not(.nav-section-title):hover {
    background: rgba(63, 16, 83, 0.08);
    color: var(--primary-color);
    transform: scale(1.05); /* Hover effect scale up */
    box-shadow: 0 4px 12px rgba(63, 16, 83, 0.1);
    z-index: 5;
}

.sidebar-nav li:not(.nav-section-title):hover i {
    color: var(--primary-color);
}

.sidebar-nav li.active {
    background: var(--primary-color);
    color: white;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(63, 16, 83, 0.35);
    letter-spacing: 0.3px;
    border-bottom: none;
    transform: scale(1.02);
}

.sidebar-nav li.active i {
    color: white;
}

.sidebar-nav li.active .badge {
    background: rgba(255,255,255,0.25);
    color: white;
}

.badge {
    background-color: var(--primary-color);
    color: white;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important; /* Force same width for ALL badges */
    height: 22px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 6px !important;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    line-height: 1;
    margin-right: 10px !important;
}

.new-badge { background-color: #e63946 !important; }
.warning-badge { background-color: #e67e22 !important; }

.sidebar-footer {
    padding: 15px;
    background: #fdf8ff;
    border-top: 1px solid #f0f0f0;
    margin-top: auto; /* Push to bottom */
}

/* User Card Bottom Sidebar */
.sidebar-user-card {
    background: white;
    border: 1px solid rgba(63, 16, 83, 0.15);
    border-radius: 40px; /* Pillow shape from screenshot */
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 15px rgba(63, 16, 83, 0.05);
    transition: all 0.3s ease;
    cursor: default;
}

.sidebar-user-card:hover {
    border-color: var(--primary-light);
    box-shadow: 0 8px 25px rgba(63, 16, 83, 0.1);
}

.user-card-logout-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 2px 4px;
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
    width: auto;
    height: auto;
    gap: 3px;
    transition: all 0.25s ease;
}

.user-card-logout-btn .logout-icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fee2e2;
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.15);
}

.user-card-logout-btn .logout-btn-label {
    font-size: 0.62rem;
    font-weight: 700;
    color: #ef4444;
    line-height: 1.2;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.user-card-logout-btn:hover {
    transform: translateY(-1px);
}

.user-card-logout-btn:hover .logout-icon-circle {
    background: #ef4444;
    color: #ffffff;
    transform: scale(1.08);
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35);
}

.user-card-logout-btn:hover .logout-btn-label {
    color: #b91c1c;
}

.user-card-logout-btn:active .logout-icon-circle {
    transform: scale(0.95);
}

.sidebar-user-card .user-info {
    flex: 1;
    overflow: hidden;
}

.sidebar-user-card .user-name {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--primary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-card .user-role {
    display: block;
    font-size: 0.7rem;
    color: #99aab5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Main Content */
.main-content {
    margin-right: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    width: calc(100% - var(--sidebar-width));
    height: 100vh; /* Lock to full screen height */
    transition: var(--transition);
    overflow: hidden;
}

.content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Header */
.top-header {
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 30px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 900;
    gap: 15px;
}

.header-left { display: flex; align-items: center; gap: 20px; }

/* Center slot for the new outgoing button */
.header-center { display: flex; align-items: center; justify-content: center; }

/* New outgoing button - smaller size */
.header-new-outgoing-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 3px 10px rgba(63, 16, 83, 0.25);
    white-space: nowrap;
}
.header-new-outgoing-btn i { font-size: 0.8rem; }
.header-new-outgoing-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(63, 16, 83, 0.35);
}
.header-new-outgoing-btn:active { transform: translateY(0); }

.menu-toggle {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--primary-color);
    transition: var(--transition);
}

.menu-toggle:hover { transform: scale(1.1); }

.header-left h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color);
}

.header-right { display: flex; align-items: center; justify-content: flex-end; gap: 0; }

/* Pill-shaped user info frame */
.user-profile-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f5f0f8;
    border: 1.5px solid rgba(63, 16, 83, 0.12);
    border-radius: 50px;
    padding: 6px 14px 6px 8px;
    transition: var(--transition);
    cursor: default;
}
.user-profile-header:hover {
    border-color: rgba(63, 16, 83, 0.28);
    box-shadow: 0 3px 12px rgba(63, 16, 83, 0.08);
}

/* Header Logout Icon Button */
.header-logout-btn {
    background: rgba(230, 57, 70, 0.1);
    border: none;
    color: var(--accent-color);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}
.header-logout-btn:hover {
    background: var(--accent-color);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(230, 57, 70, 0.35);
}

.datetime-display {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(63, 16, 83, 0.05);
    padding: 8px 15px;
    border-radius: 20px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9rem;
}

.icon-group { display: flex; gap: 20px; }

.icon-item {
    position: relative;
    cursor: pointer;
    font-size: 1.3rem;
    color: var(--light-text);
    transition: var(--transition);
    background: #fff;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.icon-item:hover {
    color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(63, 16, 83, 0.1);
}

.notification-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background-color: var(--primary-color);
    border-radius: 50%;
    border: 2px solid white;
}
.notification-dot.orange { background-color: var(--warning-color); }

.user-profile-header .text-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.user-profile-header .name { font-weight: 700; font-size: 0.88rem; color: var(--primary-color); }
.user-profile-header .role { font-size: 0.72rem; color: var(--light-text); }

/* Content Area */
.content-area {
    padding: 15px 25px 25px 25px !important;
    flex: 1;
}

/* Dashboard Stats */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--light-bg);
    padding: 20px 22px;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-xs);
    border: 1px solid rgba(63, 16, 83, 0.1);
    transition: var(--transition);
    position: relative;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(63, 16, 83, 0.18);
}

.stat-info {
    flex: 1;
    text-align: center;
}

.stat-info h3 {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 2px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.stat-info p {
    color: var(--light-text);
    font-size: 0.88rem;
    font-weight: 600;
}

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.icon-new { background: #fff1f2; color: #e11d48; }
.icon-incoming { background: #eef2ff; color: #4f46e5; }
.icon-outgoing { background: #f0fdf4; color: #16a34a; }
.icon-signature { background: #faf5ff; color: #9333ea; }

/* Dashboard Grid Layout Fix */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    width: 100%;
}

.table-section {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.table-section .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.table-section .section-title h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 5px;
    display: inline-block;
}

.table-card {
    background: white;
    border-radius: 18px;
    border: 1px solid #f0f2f5;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    width: 100%;
}

/* Dashboard Specific Table Styling */
.app-table {
    width: 100%;
    border-collapse: collapse;
}

.app-table th, .data-table th {
    background: #f3e8ff !important;
    padding: 14px 15px;
    text-align: right;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--primary-color) !important;
    border-bottom: 2px solid rgba(63, 16, 83, 0.1);
    position: relative;
    z-index: 1;
}

.data-table, .app-table {
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    overflow: hidden;
}

.data-table th:not(:last-child), .app-table th:not(:last-child) {
    border-left: 1px solid rgba(63, 16, 83, 0.1);
}

.data-table th:first-child, .app-table th:first-child { border-radius: 0 12px 0 0; }
.data-table th:last-child, .app-table th:last-child { border-radius: 12px 0 0 0; }

.search-bar-inline {
    display: flex !important;
    gap: 10px;
    width: 100%;
    align-items: center;
    background: white;
    padding: 10px 15px !important;
    border-radius: 12px;
    border: 1px solid #eee;
    margin-bottom: 15px !important;
    box-shadow: 0 4px 12px rgba(63, 16, 83, 0.04);
}

.search-bar-inline .form-control {
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
}

.app-table td {
    padding: 14px 15px;
    font-size: 0.9rem;
    color: #334155;
    border-bottom: 1px dashed #f1f5f9;
    transition: all 0.2s;
}

.app-table tr:last-child td { border-bottom: none; }
.app-table tr:hover td { background: #fdf8ff; cursor: pointer; }

.dashboard-view-all {
    margin-top: 15px;
    margin-right: auto; /* Push to LEFT in RTL */
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-color);
    background: white;
    border: 1.5px solid var(--primary-color);
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
}

.dashboard-view-all:hover {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 12px rgba(63, 16, 83, 0.2);
}

/* Components */
.section-title {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.section-title h3 { color: var(--primary-color); font-weight: 700; font-size: 1.2rem; }

.action-btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition);
    background: white;
    color: var(--dark-text);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.action-btn.primary {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 15px rgba(63, 16, 83, 0.3);
}

.action-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.action-btn:active { transform: translateY(0); }

/* Diagram Action Styles */
.action-tray {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(63, 16, 83, 0.05) !important;
    border-radius: 14px !important;
    padding: 12px 25px !important;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}
.action-tray .tray-label {
    font-weight: 800;
    font-size: 0.95rem;
    margin-left: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.action-tray .action-btn {
    padding: 8px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    background: white;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.action-tray .action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Tables - Premium Aesthetic Design */
.table-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    overflow: hidden;
    border: 1px solid #f0f2f5;
    margin-top: 10px;
}

.app-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.app-table th {
    background: #fdf8ff; /* Lavender tint for header */
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.88rem;
    padding: 18px 25px;
    text-align: right;
    border-bottom: 2px solid #f0e6f5;
}
.app-table td {
    padding: 16px 25px;
    text-align: right;
    border-bottom: 1px solid #f8f9fa;
    color: #444;
    font-size: 0.95rem;
    vertical-align: middle;
}

.app-table tr { transition: all 0.2s ease; }
.app-table tbody tr:hover {
    background-color: rgba(63, 16, 83, 0.02);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

/* حالة فارغة موحّدة: أيقونة + رسالة رئيسية + شرح مختصر، بدل نص "لا توجد بيانات" المجرد.
   عنصر اختياري يمكن لأي صفحة تبنّيه بدون أي تغيير على ما هو موجود حالياً. */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 24px;
    text-align: center;
    color: var(--light-text);
}
.empty-state .empty-state-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fdf8ff;
    color: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 4px;
}
.empty-state .empty-state-title {
    font-weight: 700;
    color: var(--dark-text);
    font-size: 0.98rem;
}
.empty-state .empty-state-desc {
    font-size: 0.85rem;
    max-width: 32ch;
}

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

/* Enhanced Badges */
.status-badge {
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
}
.status-badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; display: inline-block;
}

.status-new { 
    background: rgba(52, 152, 219, 0.08); color: #2980b9; border-color: rgba(52, 152, 219, 0.15); 
}
.status-new::before { background: #3498db; }

.status-pending { 
    background: rgba(230, 126, 34, 0.08); color: #d35400; border-color: rgba(230, 126, 34, 0.15);
}
.status-pending::before { background: #e67e22; }

.status-done { 
    background: rgba(46, 204, 113, 0.08); color: #27ae60; border-color: rgba(46, 204, 113, 0.15);
}
.status-done::before { background: #2ecc71; }

.status-ended { 
    background: rgba(149, 165, 166, 0.12); color: #616e70; border-color: rgba(149, 165, 166, 0.2);
}
.status-ended::before { background: #95a5a6; }

.priority-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: bold;
    color: white;
}
.prio-normal { background: #3498db; }
.prio-important { background: #e67e22; }
.prio-secret { background: #e74c3c; }


/* Forms */
.form-group { margin-bottom: 22px; }
.form-label {
    display: block; margin-bottom: 8px; font-weight: 600; color: var(--dark-text); font-size: 0.95rem;
}
.form-control {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    transition: var(--transition);
    background: #fafafa;
    color: var(--dark-text);
}
.form-control:focus {
    border-color: var(--primary-color);
    background: white;
    outline: none;
    box-shadow: 0 0 0 3px rgba(63, 16, 83, 0.1);
}

/* Login Page */
.login-body {
    background: linear-gradient(135deg, var(--body-bg) 0%, #e9ecef 100%);
    display: flex; justify-content: center; align-items: center; min-height: 100vh;
}
.login-container { width: 100%; max-width: 450px; padding: 20px; }
.login-card { padding: 40px; border-radius: 24px; text-align: center; }
.login-header { margin-bottom: 35px; }
.login-header h2 { font-size: 1.2rem; color: var(--light-text); margin-top: 15px; font-weight: 500;}
.login-header h1 { font-size: 2.5rem; color: var(--primary-color); font-weight: 800; }
.input-icon-wrapper { position: relative; }
.input-icon-wrapper i {
    position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--light-text);
}
.input-icon-wrapper .form-control { padding-right: 45px; }
.login-btn { padding: 15px; font-size: 1.1rem; margin-top: 10px; border-radius: 12px; }
.login-footer { margin-top: 30px; font-size: 0.85rem; color: var(--light-text); }
.w-100 { width: 100%; }

/* Outgoing specifics */
.type-selector { display: flex; gap: 15px; margin-bottom: 25px; }
.type-btn {
    flex: 1; padding: 20px; border: 2px solid #eee; border-radius: var(--border-radius);
    background: white; cursor: pointer; display: flex; flex-direction: column; align-items: center;
    gap: 12px; transition: var(--transition);
}
.type-btn.active {
    border-color: var(--primary-color);
    background-color: rgba(63, 16, 83, 0.05);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(63,16,83,0.1);
}
.type-btn i { font-size: 1.8rem; }
.type-btn span { font-weight: 600; font-size: 1.05rem; }

/* A4 Paper Editor / Viewer */
.paper-wrapper {
    background: #e5e7eb; padding: 40px; border-radius: var(--border-radius);
    display: flex; flex-direction: column; align-items: center; max-height: 800px; overflow-y: auto;
    position: relative;
}
.a4-paper {
    width: 210mm; min-height: 297mm; background: white; padding: 25mm !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); box-sizing: border-box; position: relative;
    font-size: 14pt; line-height: 1.8; color: #000;
}
.a4-paper:focus { outline: none; }
.a4-header {
    border-bottom: 2px solid var(--primary-dark); padding-bottom: 20px; margin-bottom: 30px;
}
.kalisha-img { width: 100%; height: auto; max-height: 150px; object-fit: contain; }
.quill-editor-container { min-height: 400px; margin-bottom: 40px; }
.ql-toolbar.ql-snow { border: none !important; border-bottom: 1px solid #ccc !important; background: #f9f9f9; }
.ql-container.ql-snow { border: none !important; font-size: 14pt; font-family: 'Tajawal', sans-serif;}

/* Signatures inside paper */
.paper-signatures-area {
    margin-top: 50px; display: flex; justify-content: space-around; flex-wrap: wrap; gap: 40px;
}
.sig-box {
    text-align: center; min-width: 150px; position: relative; cursor: pointer;
}
.sig-role { font-weight: bold; display: block; margin-bottom: 60px; font-size: 12pt;}
.sig-name { font-size: 12pt; display: block; border-top: 1px dashed #ccc; padding-top: 5px; }
.sig-image { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); height: 60px; }

/* Draggable Directive/Signature */
.draggable-item {
    position: absolute; cursor: move; border: 1px dashed transparent; user-select: none;
    z-index: 100;
}
.draggable-item:hover { border-color: var(--primary-color); }
.draggable-item .content { padding: 5px; }
.directive-box {
    font-family: inherit; font-weight: bold; color: var(--primary-color); font-style: italic; font-size: 14px;
}

/* Modals */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6);
    display: none; align-items: center; justify-content: center; z-index: 2000;
    opacity: 0; transition: opacity 0.3s;
}
.modal-overlay.active { opacity: 1; display: flex; }
.modal-content {
    background: white; padding: 30px; border-radius: var(--border-radius);
    width: 600px; max-width: 90%; transform: scale(0.9); transition: transform 0.3s;
    position: relative; max-height: 90vh; overflow-y: auto;
}
.modal-overlay.active .modal-content { transform: scale(1); }
.close-modal {
    position: absolute; top: 20px; left: 20px; background: rgba(0,0,0,0.05); border: none;
    width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--light-text); transition: var(--transition);
}
.close-modal:hover { background: rgba(230,57,70,0.1); color: var(--accent-color); transform: rotate(90deg); }

/* Messages / Chat - Enhanced Premium Design */
.chat-container {
    display: flex; height: calc(100vh - 120px); background: #fff; border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); overflow: hidden; margin-top: 10px;
}
.chat-sidebar {
    width: 320px; border-left: 1px solid #f0f2f5; display: flex; flex-direction: column; background: #fff;
}
.chat-search { padding: 20px; border-bottom: 1px solid #f0f2f5; }
.chat-search .form-control { border-radius: 12px; background: #f0f2f5; border: none; padding: 12px 15px; }
.chat-list { flex: 1; overflow-y: auto; }
.chat-item {
    padding: 15px 20px; display: flex; align-items: center; gap: 12px; cursor: pointer;
    transition: all 0.2s ease; border-bottom: 1px solid #f8f9fa; position: relative;
}
.chat-item:hover { background: #f8f9fa; }
.chat-item.active { background: rgba(63, 16, 83, 0.05); border-right: 4px solid var(--primary-color); }
.chat-item.unread::after {
    content: ''; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
    width: 8px; height: 8px; background: var(--primary-color); border-radius: 50%;
}
.chat-avatar-wrapper { position: relative; }
.chat-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.status-indicator {
    position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px;
    border-radius: 50%; border: 2px solid white; background: #bdbdbd;
}
.status-indicator.online { background: #2ecc71; }

.chat-main { 
    flex: 1; display: flex; flex-direction: column; 
    background: radial-gradient(circle at center, #fdfdfd 0%, #f0f2f5 100%); 
}
.chat-header { 
    padding: 12px 25px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px); 
    border-bottom: 1px solid #eef0f2; display: flex; align-items: center; gap: 15px; z-index: 10;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.chat-messages { flex: 1; padding: 25px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }

/* Enhanced Bubbles - Tailored Style */
.msg-bubble { 
    max-width: 65%; padding: 12px 18px; font-size: 0.92rem; line-height: 1.5; 
    position: relative; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.2s ease;
}
.msg-bubble:hover { transform: translateY(-1px); }
.msg-bubble.sent { 
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); 
    color: white; align-self: flex-end; 
    border-radius: 20px 20px 4px 20px; 
}
.msg-bubble.received { 
    background: white; color: var(--dark-text); align-self: flex-start; 
    border-radius: 20px 20px 20px 4px; border: 1px solid #eff1f3;
}
.msg-time { font-size: 0.65rem; margin-top: 6px; display: block; opacity: 0.6; }
.sent .msg-time { color: rgba(255,255,255,0.7); text-align: left; }
.received .msg-time { text-align: right; }

.chat-input-area { 
    padding: 15px 30px; background: white; display: flex; gap: 15px; align-items: center; 
    border-top: 1px solid #f0f2f5;
}
.chat-input { 
    flex: 1; padding: 12px 22px; border: 1px solid #f0f2f5; border-radius: 14px; 
    background: #f8f9fa; outline: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}
.chat-input:focus { border-color: var(--primary-color); background: white; box-shadow: 0 4px 12px rgba(63, 16, 83, 0.08); }
.chat-action-btn { 
    width: 42px; height: 42px; border-radius: 10px; background: #f0f2f5; 
    color: var(--primary-color); border: none; cursor: pointer; transition: all 0.2s ease;
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.chat-action-btn:hover { background: var(--primary-light); color: var(--primary-color); transform: translateY(-2px); }
.chat-send-btn { 
    width: 42px; height: 42px; border-radius: 10px; background: var(--primary-color); 
    color: white; border: none; cursor: pointer; transition: all 0.2s ease;
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.chat-send-btn:hover { background: var(--primary-dark); transform: scale(1.05) rotate(-10deg); }

/* Timeline */
.timeline { position: relative; padding: 20px 0; margin-top: 20px;}
.timeline::before {
    content: ''; position: absolute; top: 0; bottom: 0; right: 20px; width: 2px; background: #e0e0e0;
}
.timeline-item { padding-right: 50px; position: relative; margin-bottom: 30px; }
.timeline-item::after {
    content: ''; position: absolute; width: 16px; height: 16px; right: 13px; top: 5px;
    background: white; border: 3px solid var(--primary-light); border-radius: 50%; z-index: 1;
}
.timeline-item.done::after { background: var(--primary-color); border-color: var(--primary-color); }
.timeline-content {
    background: #f9f9f9; padding: 15px 20px; border-radius: var(--border-radius-sm); border: 1px solid #eee;
}
.timeline-content h4 { font-size: 1rem; color: var(--primary-color); margin-bottom: 5px; }
.timeline-content p { font-size: 0.9rem; color: var(--dark-text); }
.timeline-time { display: block; font-size: 0.8rem; color: var(--light-text); margin-top: 10px; }

/* Utilities */
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-10 { gap: 10px; }
.gap-20 { gap: 20px; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.glass-effect { background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); }

/* Responsive */
@media (max-width: 992px) {
    .sidebar { transform: translateX(100%); }
    .sidebar.active { transform: translateX(0); box-shadow: 0 0 50px rgba(0,0,0,0.5); }
    .main-content { margin-right: 0; width: 100%; }
}

/* حاجز خلفي شفاف خلف القائمة الجانبية عند فتحها كـ Drawer على الجوال/التابلت */
#sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 20, 0.45);
    z-index: 999; /* تحت .sidebar (z-index:1000) وفوق باقي المحتوى */
}
@media (max-width: 992px) {
    #sidebar-backdrop.active { display: block; }
}

/* Flatpickr Custom Arabic Styling */
.flatpickr-calendar {
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    border: 1px solid #eee;
    font-family: 'Tajawal', sans-serif;
}
.flatpickr-day.selected {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.flatpickr-day:hover {
    background: rgba(63, 16, 83, 0.1) !important;
}
.flatpickr-months .flatpickr-month {
    color: var(--primary-color);
    fill: var(--primary-color);
}

/* Add calendar icon to date-picker */
.date-picker {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'%3E%3Cpath fill='%236B46C1' d='M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zM329 305c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-95 95-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L329 305z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 16px;
    padding-left: 35px !important; /* Make room for the icon on the left in RTL */
}

/* Pagination Controls */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
    padding: 0 5px;
}
.pagination-info {
    font-size: 0.88rem;
    color: var(--light-text);
}
.pagination-controls {
    display: flex;
    gap: 8px;
}
.pag-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid #eee;
    background: white;
    color: var(--dark-text);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
    font-weight: 600;
}
.pag-btn:hover {
    background: #fdf8ff;
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
}
.pag-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(63, 16, 83, 0.2);
}
.pag-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f5f5f5;
}
.pag-btn i { font-size: 0.8rem; }

/* Command Center - Vertical Actions Sidebar */
.command-center {
    width: 220px;
    background: white;
    border-radius: 20px;
    padding: 25px 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    border: 1px solid #f0f2f5;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 20px;
    height: fit-content;
}
.command-center .tray-label {
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
}
.command-center .action-btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 700;
    background: white;
    border: 1.5px solid #eef0f2;
    border-radius: 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse; /* Put icon on the left of text in RTL */
    color: #333;
}
.command-center .action-btn i { font-size: 1.1rem; }
.command-center .action-btn:hover {
    transform: translateX(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Scrollable Layout - RESTORED */
.main-content {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-light);
    position: relative;
}
.content-area {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 5px 20px 65px 20px; /* Reduced bottom padding since footer is shorter */
}
.content-area > * { flex-shrink: 0; }
.table-card {
    height: auto;
    overflow: visible;
}

/* Help Icon Styling - Refined */
.help-trigger {
    background: white;
    color: #3498db;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: help;
    transition: all 0.2s ease;
    border: 2px solid #3498db;
    flex-shrink: 0;
    font-weight: 700;
}
.help-trigger:hover {
    background: #3498db;
    color: white;
    transform: scale(1.1);
}

/* Updated Workspace Layout - RTL STrict */
.workspace-layout {
    display: flex;
    gap: 25px;
    align-items: flex-start; /* Strictly align to top */
    width: 100%;
    height: 100%;
    justify-content: space-between;
}
/* Clickable Tables - Luxury Edition */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px; /* Space between rows */
    margin-top: -10px;
}

.data-table thead th {
    background: #f8faff;
    color: #888;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 15px 20px;
    text-align: right;
    border: none;
}

.data-table tbody tr {
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.data-table tbody tr td {
    padding: 18px 20px;
    border: none;
    font-size: 0.9rem;
    color: #444;
}

.data-table tbody tr td:first-child { border-radius: 0 15px 15px 0; }
.data-table tbody tr td:last-child { border-radius: 15px 0 0 15px; }

.data-table tbody tr:hover {
    transform: scale(1.01);
    background: #fdfdff !important;
    box-shadow: 0 10px 25px rgba(52, 152, 219, 0.1);
    z-index: 10;
}

.data-table tbody tr:active {
    transform: scale(0.99);
}

/* Badge Alignment in Table */
.data-table td .status-badge,
.data-table td .priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    padding: 6px 12px;
}
.attachments-sidebar, .command-center {
    width: 320px;
    flex-shrink: 0;
    background: #ffffff !important; /* Force white background */
    border: 1px solid #eef2f7;
    border-radius: 30px; 
    padding: 25px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    margin: 0 !important;
    height: fit-content;
}
.attachment-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.attachment-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background: #f8faff;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.attachment-item:hover {
    background: white;
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.attachment-item i {
    font-size: 1.5rem;
    color: #e74c3c;
    flex-shrink: 0;
}

.attachment-info {
    flex: 1;
    overflow: hidden;
}

.attachment-info p {
    font-size: 0.82rem;
    font-weight: 700;
    color: #333;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-info small {
    font-size: 0.72rem;
    color: #999;
}

/* Paper Wrapper - Final Perfection */
.paper-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center the container content */
    height: 100%;
    overflow: hidden;
    background: #f8faff;
    border-radius: 15px;
    border: 1px solid #e0e6ed;
    position: relative;
    padding: 5px;
}

.a4-paper-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex: 1;
    width: 100%;
    overflow: hidden;
}

/* Modern Vertical Timeline - FROM SCREENSHOT */
.sidebar-card-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0 0 25px 0 !important; /* Ensure no top margin */
    border-bottom: 1px solid #f0f2f5;
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.modern-vertical-timeline {
    position: relative;
    padding-right: 15px;
}

.modern-vertical-timeline::before {
    content: '';
    position: absolute;
    right: 7px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: #e9ecef;
}

.timeline-step {
    position: relative;
    margin-bottom: 30px;
    display: flex;
    align-items: flex-start;
}

.step-dot {
    position: absolute;
    right: 0;
    top: 22px;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 4px solid #adb5bd;
    border-radius: 50%;
    z-index: 2;
    transition: all 0.3s;
}

.step-dot.active {
    background: var(--primary-color);
    border-color: #dee2e6;
    box-shadow: 0 0 0 4px rgba(63, 16, 83, 0.15);
}

.step-card {
    background: #f8faff; /* Slightly off-white/blue for cards inside the white container */
    border-radius: 16px;
    padding: 18px 22px;
    border: 1px solid #f1f3f5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    margin-right: 35px;
    flex: 1;
    transition: all 0.3s ease;
}

.step-card:hover {
    background: #fff;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    transform: translateX(-5px);
}

.step-card h4 {
    margin: 0 0 8px 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary-color);
}

.step-user {
    font-size: 0.88rem;
    color: #868e96;
    margin-bottom: 12px;
    font-weight: 500;
}

.step-comment {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--primary-color);
    border-top: 1px dashed #dee2e6;
    padding-top: 10px;
    margin-top: 10px;
    margin-bottom: 12px;
}

.step-footer {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    font-size: 0.8rem;
    color: #adb5bd;
    font-weight: 600;
}

.doc-pagination {
    position: absolute;
    bottom: 25px; /* Directly inside the paper */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border: 1px solid #fff;
    z-index: 100;
}

.pagination-info {
    font-size: 0.85rem;
    font-weight: 700;
    color: #555;
    white-space: nowrap;
}

.page-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: var(--primary-color);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.page-nav-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

.page-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#incoming-paper, #outgoing-paper, .a4-paper {
    width: 210mm;
    min-height: 297mm;
    zoom: 0.52; /* Fits the full A4 height into the viewport with the footer present */
    box-shadow: 0 40px 100px rgba(0,0,0,0.15);
    background: white;
    flex-shrink: 0;
    
    /* Frame Styling */
    border: 2px solid #ced4da;
    outline: 1px solid #dee2e6;
    outline-offset: -8px;
    padding: 0;
    position: relative; /* Container for internal elements */
}

/* Global Action Buttons - Luxury Edition */
.action-btn {
    width: 100%;
    height: 40px; /* Reduced from 48px */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.88rem; /* Slightly smaller font */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
    border: 1.5px solid #e0e6ed;
    color: #444;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    cursor: pointer;
}

.action-btn > * {
    flex: none !important; /* Prevent icons or text from stretching */
    margin: 0 !important;
    display: inline-block;
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    background: #f8faff;
}

.action-btn i {
    font-size: 1.1rem;
    opacity: 0.8;
}

/* Specific colored variants for high-end look */
.action-btn.primary { border-color: #3498db; color: #2980b9; background: rgba(52, 152, 219, 0.05); }
.action-btn.success { border-color: #2ecc71; color: #27ae60; background: rgba(46, 204, 113, 0.05); }
.action-btn.danger { border-color: #e74c3c; color: #c0392b; background: rgba(231, 76, 60, 0.05); }
.action-btn.warning { border-color: #f39c12; color: #d35400; background: rgba(243, 156, 18, 0.05); }

.action-btn.primary:hover { background: #3498db; color: white; }
.action-btn.success:hover { background: #2ecc71; color: white; }
.action-btn.danger:hover { background: #e74c3c; color: white; }
.action-btn.warning:hover { background: #f39c12; color: white; }

/* Wrapper Refinement */
.action-item-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    margin-bottom: 8px; /* Balanced spacing */
}
/* Printing Logic - Final Mastery */
@media print {
    /* Hide everything except the document itself */
    .sidebar, .top-header, .command-center, .attachments-sidebar, .doc-pagination, .help-trigger, .action-item-wrapper, .modal-overlay {
        display: none !important;
    }

    body, .app-container, .main-content, .content-area, .workspace-layout, .paper-wrapper {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        width: 100% !important;
        background: white !important;
        overflow: visible !important;
        display: block !important;
        box-shadow: none !important;
        border: none !important;
    }

    .paper-wrapper {
        display: block !important;
    }

    #incoming-paper, #outgoing-paper, .a4-paper {
        transform: none !important; /* CRITICAL: Reset scale for real printing */
        margin: 0 auto !important;
        box-shadow: none !important;
        border: none !important;
        outline: none !important;
        width: 210mm !important;
        min-height: 297mm !important;
        position: relative !important;
        page-break-after: always;
    }

    /* Ensure specific content is visible if hidden by JS simulation */
    #page-content {
        display: block !important;
        min-height: auto !important;
    }
}
.top-header .header-left h2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.help-feature-title {
    color: var(--primary-color);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Bottom Actions Bar Tray */
.horizontal-actions-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 10px 30px;
    background: transparent;
    border: none;
    z-index: 1000;
    flex-shrink: 0;
    width: 100%;
}
.horizontal-actions-bar .action-btn {
    width: auto;
    height: 38px;
    padding: 0 20px;
    font-size: 0.85rem;
}

/* Modern Timeline Styles (Matching Screenshot) */
.timeline-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.timeline-title {
    color: var(--primary-color);
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 25px;
    text-align: center;
}
.modern-timeline {
    position: relative;
    padding-right: 30px;
}
.timeline-line {
    position: absolute;
    right: 7px;
    top: 5px;
    bottom: 5px;
    width: 2px;
    background: #e2e8f0;
}
.timeline-event {
    position: relative;
    margin-bottom: 25px;
}
.event-node {
    position: absolute;
    right: -30px;
    top: 15px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e2e8f0;
    z-index: 2;
    border: 3px solid #fff;
    transform: translateX(50%);
}
.event-node.active {
    background: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(63, 16, 83, 0.1);
}
.event-card {
    background: #f8faff;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    padding: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.timeline-event:hover .event-card {
    transform: translateX(-5px);
    background: white;
    box-shadow: 0 8px 20px rgba(63, 16, 83, 0.08);
    border-color: var(--primary-light);
}
.event-type {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 5px;
}
.event-user {
    font-size: 0.82rem;
    color: #718096;
    margin-bottom: 3px;
}
.event-note {
    font-size: 0.78rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 10px;
    padding-top: 5px;
    border-top: 1px dashed #e2e8f0;
}
.event-footer {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    font-size: 0.72rem;
    color: #a0aec0;
}

/* Zoom Controls */
.zoom-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 110;
}
.zoom-controls button {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    color: var(--primary-color);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zoom-controls button:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

/* Document Container with Zoom */
.a4-paper-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 10px;
}
#incoming-paper {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
}

/* Footer Actions & Tooltip */
.footer-actions-container {
    position: fixed;
    bottom: 0;
    right: var(--sidebar-width);
    left: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(63, 16, 83, 0.12);
    box-shadow: 0 -15px 50px rgba(0, 0, 0, 0.1);
    z-index: 900;
    padding: 0 40px; /* Increased side padding */
    height: 60px;
    transition: var(--transition);
}

@media (max-width: 992px) {
    .footer-actions-container {
        right: 0;
    }
}

.horizontal-actions-bar {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex;
    gap: 15px;
    order: 2; /* Forces to the LEFT in RTL row */
    flex-shrink: 0; /* Prevents buttons from squeezing */
}
.action-tooltip {
    font-size: 1rem;
    color: var(--primary-color);
    padding: 0;
    font-weight: 700;
    flex: 1; /* Takes all available space to push buttons to the left */
    text-align: right; /* Keeps text aligned to the right */
    white-space: nowrap; /* Prevents vertical wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.3s;
    opacity: 0.9;
    order: 1; /* Forces to the RIGHT in RTL row */
}
.action-tooltip.active {
    color: var(--primary-color);
    font-weight: 700;
    opacity: 1;
}
/* ============================================================
   الجوال والتابلت الصغير (SCRUM-244 / SCRUM-137): طبقة استجابة موحّدة لكل الصفحات.
   بعض الصفحات تعرّف أنماطها inline، لذا تُستخدم !important هنا عمداً على الشاشات الصغيرة فقط.
   ============================================================ */
@media (max-width: 768px) {
    /* الرأس: أزرار أيقونية مضغوطة بدل النص الذي كان يُقص */
    .top-header { display: flex !important; justify-content: space-between; padding: 0 10px !important; gap: 8px !important; }
    .top-header #page-title { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45vw; }
    .header-left { gap: 10px !important; min-width: 0; }
    .header-right { gap: 10px !important; }
    .header-btn-label { display: none !important; }
    .header-new-outgoing-btn { padding: 8px 11px !important; }
    .notifications-dropdown { position: fixed !important; left: 8px !important; right: 8px !important; top: 64px !important; width: auto !important; max-height: 75vh; }

    /* المحتوى */
    .content-area { padding: 10px 10px 80px 10px !important; }
    .dashboard-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-bottom: 16px !important; }
    .stat-card { padding: 12px 10px !important; gap: 8px !important; }
    .stat-icon { width: 38px !important; height: 38px !important; font-size: 1rem !important; }
    .stat-info h3 { font-size: 1.4rem !important; }
    .stat-info p { font-size: 0.78rem !important; }
    .dashboard-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; }
    .table-section { min-width: 0; }

    /* الجداول: تمرير أفقي داخل البطاقة بدل قص الأعمدة */
    .table-card, .table-container, .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .table-card table, .table-container table { min-width: 560px; }

    /* النوافذ المنبثقة بعرض الشاشة */
    .modal-box, .modal-content { width: 94vw !important; max-width: 94vw !important; max-height: 88vh; overflow-y: auto; padding: 18px !important; }

    /* ورقة المذكرة: تُصغَّر لعرض الشاشة (--paper-fit يُحسب في app.js)، والتكبير بإصبعين يبقى متاحاً */
    .a4-paper-container .a4-paper, #outgoing-paper, #incoming-paper { zoom: var(--paper-fit, 0.44) !important; }
    .a4-paper-container { padding: 6px 0 !important; justify-content: flex-start !important; }
    .zoom-controls { display: none !important; }

    /* الأزرار العائمة (معلومات/المسار/المرفقات/التواقيع): صف أيقونات مضغوط بدل أزرار كبيرة تغطي المذكرة */
    .floating-side-buttons { left: 50% !important; top: auto !important; bottom: calc(var(--footer-h, 64px) + 10px) !important; transform: translateX(-50%) !important; flex-direction: row !important; gap: 8px !important; background: rgba(255,255,255,0.92); padding: 6px 8px; border-radius: 30px; box-shadow: 0 4px 18px rgba(0,0,0,0.15); }
    .float-btn { min-width: 44px !important; height: 44px !important; padding: 0 12px !important; font-size: 0.95rem !important; }
    .floating-side-buttons { max-width: 96vw; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .float-btn { flex: 0 0 auto; }
    .float-btn > span { display: none; }
    /* في إنشاء الصادر تعرض هذه الأزرار القيمة المختارة (النوع/الأهمية/الإدارة) فتبقى ظاهرة بخط أصغر */
    .float-btn > #btn-type-text, .float-btn > #btn-importance-text, .float-btn > #btn-dept-text { display: inline; font-size: 0.8rem; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }

    /* شريط الإجراءات السفلي: الأزرار تلتف ولا تخرج خارج الشاشة */
    .footer-actions-container { height: auto !important; padding: 8px 10px !important; left: 0 !important; right: 0 !important; }
    .horizontal-actions-bar { flex-wrap: wrap !important; width: 100% !important; gap: 8px !important; flex-shrink: 1 !important; }
    .horizontal-actions-bar .action-btn { flex: 1 1 calc(50% - 8px) !important; min-width: 0 !important; padding: 9px 8px !important; font-size: 0.85rem !important; white-space: normal; }
    .horizontal-actions-bar > div[style*="width: 2px"] { display: none !important; }
    .action-tooltip { display: none !important; }
    .route-intermediate-banner { font-size: 0.82rem !important; }

    /* الحقول: 16px تمنع التكبير التلقائي المزعج عند التركيز على iOS */
    input, select, textarea { font-size: 16px; }
}

@media (max-width: 340px) {
    .stat-info p { font-size: 0.72rem !important; }
    .horizontal-actions-bar .action-btn { flex-basis: 100% !important; }
}

@media (max-width: 768px) {
    /* تبويبات (التواقيع وغيرها): سطر واحد قابل للتمرير بدل الالتفاف على ثلاثة أسطر وقص آخر تبويب */
    .tabs-header { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 4px; }
    .tabs-header .tab-btn { white-space: nowrap; flex: 0 0 auto !important; padding: 10px 12px !important; font-size: 0.85rem !important; }

    /* المحادثات: القائمة بعرض الشاشة، وعند فتح محادثة تأخذ الشاشة كاملة مع زر رجوع */
    .chat-container { position: relative; }
    .chat-container .chat-sidebar { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; }
    .chat-container .chat-main { display: none !important; }
    .chat-container.chat-open .chat-sidebar { display: none !important; }
    .chat-container.chat-open .chat-main { display: flex !important; width: 100% !important; flex: 1 1 100% !important; }
    .chat-back-btn { display: inline-flex !important; }
}
.chat-back-btn { display: none; background: transparent; border: none; font-size: 1.1rem; color: var(--primary-color); cursor: pointer; padding: 6px 8px; margin-left: 6px; }

/* التفويض: زر العمل بالنيابة وشريط التنبيه أثناء العمل بالنيابة */
.acting-switch-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 20px; border: 1.5px solid #b45309; background: #fffbeb; color: #92400e; font-weight: 700; font-size: 0.85rem; cursor: pointer; font-family: inherit; white-space: nowrap; }
.acting-menu { display: none; position: absolute; left: 0; top: 120%; min-width: 260px; background: #fff; border-radius: 12px; box-shadow: 0 10px 35px rgba(0,0,0,0.15); border: 1px solid #eee; z-index: 1001; padding: 8px; }
.acting-menu.open { display: block; }
.acting-menu-title { font-size: 0.8rem; color: #64748b; padding: 4px 8px 8px; font-weight: 700; }
.acting-menu-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: right; background: transparent; border: none; border-radius: 8px; padding: 8px 10px; cursor: pointer; font-family: inherit; color: #1e293b; }
.acting-menu-item:hover, .acting-menu-item.current { background: #fff7ed; }
.acting-menu-item small { color: #94a3b8; font-size: 0.75rem; }
.acting-menu-item.home { flex-direction: row; color: #b45309; font-weight: 700; border-top: 1px solid #f1f5f9; margin-top: 4px; }
.acting-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: linear-gradient(90deg, #fffbeb, #fef3c7); border-bottom: 1px solid #fcd34d; color: #78350f; padding: 8px 20px; font-size: 0.9rem; }
.acting-banner span { flex: 1; min-width: 200px; }
.acting-banner button { background: #b45309; color: #fff; border: none; border-radius: 16px; padding: 5px 14px; font-family: inherit; font-weight: 700; cursor: pointer; }
@media (max-width: 768px) {
    .acting-switch-btn { padding: 8px 10px; }
    .acting-menu { position: fixed; left: 8px; right: 8px; top: 64px; min-width: 0; }
    .acting-banner { padding: 8px 10px; font-size: 0.8rem; }
}

/* زرا الانتقال لأعلى/أسفل الصفحة في القوائم الطويلة */
#scroll-jump { position: fixed; left: 18px; bottom: 90px; display: none; flex-direction: column; gap: 6px; z-index: 950; }
#scroll-jump.visible { display: flex; }
#scroll-jump button { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--primary-color); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.2); cursor: pointer; opacity: 0.85; }
#scroll-jump button:hover { opacity: 1; }
@media (max-width: 768px) { #scroll-jump { left: 10px; bottom: calc(var(--footer-h, 0px) + 80px); } }

/* أنماط الجولة التعريفية وعلامات الشرح تُحقن من assets/js/guide.js نفسه (تعمل حتى مع نسخة style.css قديمة في ذاكرة المتصفح) */

/* زر الإدخال الصوتي داخل حقول البحث */
.voice-mic-wrap { position: relative; display: inline-flex; align-items: center; width: 100%; }
.voice-mic-wrap > input, .voice-mic-wrap > textarea { width: 100%; padding-left: 34px; }
.voice-mic-btn { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: #64748b; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; }
.voice-mic-btn:hover { background: #eef2ff; color: #4f46e5; }
.voice-mic-btn.listening { background: #fee2e2; color: #dc2626; animation: voice-pulse 1.1s infinite; }
@keyframes voice-pulse { 50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.15); } }

/* بحث الهيدر */
.header-center { flex: 1; min-width: 0; padding: 0 16px; }
.global-search { position: relative; width: 100%; max-width: 440px; }
.global-search input { width: 100%; height: 40px; box-sizing: border-box; padding: 0 14px 0 38px; border: 1px solid #e2deea; border-radius: 12px; background: #f7f6fb; font: inherit; color: var(--dark-text); }
.global-search input:focus { outline: 2px solid var(--primary-light); background: #fff; }
.global-search-results { position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 1200; max-height: 60vh; overflow-y: auto; background: #fff; border: 1px solid #ece9f2; border-radius: 14px; box-shadow: var(--shadow-md); }
.global-search-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--dark-text); text-decoration: none; border-bottom: 1px solid #f3f0f7; }
.global-search-item:hover, .global-search-item:focus { background: #f7f6fb; }
.global-search-kind { flex: none; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #f1ecf6; color: var(--primary-color); }
.global-search-kind.out { background: #e6e9fb; color: #2f3a9e; }
.global-search-kind.draft { background: #f1f2f6; color: #5b5468; }
.global-search-text { min-width: 0; }
.global-search-text b { display: block; font-weight: 700; }
.global-search-text small { color: var(--light-text); }
.global-search-empty { padding: 16px; text-align: center; color: var(--light-text); }
@media (max-width: 768px) {
    #page-title { display: none; }
    .header-center { padding: 0 8px; }
}

/* ختم المذكرة: مكانه ومظهره محفوظان في نص المذكرة نفسه، والباركود خارج طبقة الحبر فلا تؤثر فيه الشفافية */
.memo-stamp { position: absolute; width: 240px; height: 100px; box-sizing: border-box; z-index: 5; direction: rtl;
              font-family: 'Tajawal', sans-serif; line-height: 1.3; color: #111; }
.memo-stamp-ink { position: absolute; inset: 0; box-sizing: border-box; padding: 3px 6px; border: 1.5px solid #111;
                  mix-blend-mode: multiply; opacity: var(--stamp-opacity, 1); filter: contrast(var(--stamp-contrast, 1)); }
.memo-stamp-title { font-size: 10.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.memo-stamp-fields { display: flex; justify-content: space-between; gap: 6px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.memo-stamp-code { position: absolute; left: 6px; right: 6px; bottom: 4px; height: 62px; background: #fff; direction: ltr; text-align: center; }
.memo-stamp-code:empty { background: repeating-linear-gradient(90deg, #cbd5e1 0 2px, #fff 2px 5px); }
.memo-stamp-code svg { height: 50px !important; }
.memo-stamp-code div { font-family: monospace; font-size: 8px; letter-spacing: 1px; line-height: 12px; color: #000; }
.memo-stamp-edit { cursor: move; touch-action: none; outline: 1px dashed #7c3aed; outline-offset: 2px; display: none; }
.memo-stamp-edit:focus { outline-style: solid; }
#outgoing-paper.memo-stamp-on .memo-stamp-edit { display: block; }
#outgoing-paper.memo-stamp-on .memo-ref-line { visibility: hidden; }
#outgoing-paper.memo-stamp-other-page .memo-stamp-edit { display: none; }
#outgoing-paper.memo-stamp-other-page .memo-ref-line { visibility: visible; }
.memo-stamp-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; background: #fff; border-radius: 12px; padding: 10px 64px 10px 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
.memo-stamp-toggle { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.memo-stamp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 0.85rem; }
.memo-stamp-controls label { display: flex; align-items: center; gap: 6px; }
.memo-stamp-controls input[type="range"] { width: 100px; accent-color: #2b124c; }
@media print { .memo-stamp-panel { display: none !important; } }

/* فوتر المذكرة: خط بألوان العلم اليمني تحته بيانات الوزارة، ويقع في هامش الصفحة السفلي */
.a4-paper:has(> .memo-footer) { overflow: clip !important; }
.memo-footer { position: absolute; left: 20mm; right: 20mm; bottom: 3mm; text-align: center; font-family: 'Tajawal', sans-serif; font-size: 9pt; line-height: 1.5; color: #333; }
.memo-footer p { margin: 0; }
.memo-footer-flag { height: 6px; margin-bottom: 5px; background: linear-gradient(#ce1126 0 2px, #fff 2px 4px, #000 4px 6px); -webkit-print-color-adjust: exact; print-color-adjust: exact; }