/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f0f2f5;
    color: #333;
    line-height: 1.6;
}

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

/* Sidebar */
.sidebar {
    width: 260px;
    background: #1a1a2e;
    color: #fff;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    transition: transform 0.3s ease;
    z-index: 1000;
}

.sidebar-header {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-header h2 {
    font-size: 20px;
    color: #fff;
    margin: 0;
}

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

.sidebar-nav li {
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.sidebar-nav a {
    display: block;
    padding: 14px 20px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: all 0.3s;
    font-size: 15px;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-right: 3px solid #2563eb;
}

.sidebar-nav a.logout {
    color: #ef4444;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 10px;
}

.sidebar-nav a.logout:hover {
    background: rgba(239, 68, 68, 0.1);
}

.badge {
    background: #ef4444;
    color: #fff;
    border-radius: 50%;
    padding: 2px 8px;
    font-size: 12px;
    margin-right: 5px;
}

/* Main Content */
.main-content {
    flex: 1;
    margin-right: 260px;
    min-height: 100vh;
}

/* Top Header */
.top-header {
    background: #fff;
    padding: 15px 30px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

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

.header-left h1 {
    font-size: 20px;
    color: #1a1a2e;
    margin: 0;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-name {
    font-weight: 600;
    color: #1a1a2e;
}

.notification-badge {
    background: #ef4444;
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 14px;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #1a1a2e;
}

/* Content Wrapper */
.content-wrapper {
    padding: 20px 30px;
}

.dashboard-content {
    padding: 20px 30px;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.2s;
}

.stat-card:hover {
    transform: translateY(-3px);
}

.stat-icon {
    font-size: 32px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f4ff;
    border-radius: 10px;
}

.stat-info h3 {
    font-size: 24px;
    margin: 0;
    color: #1a1a2e;
}

.stat-info p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

.stat-card.green .stat-icon { background: #d1fae5; }
.stat-card.red .stat-icon { background: #fee2e2; }
.stat-card.yellow .stat-icon { background: #fef3c7; }
.stat-card.blue .stat-icon { background: #dbeafe; }
.stat-card.orange .stat-icon { background: #fed7aa; }
.stat-card.purple .stat-icon { background: #ede9fe; }
.stat-card.teal .stat-icon { background: #ccfbf1; }

/* Charts Grid */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.chart-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.chart-card h3 {
    font-size: 16px;
    color: #1a1a2e;
    margin-bottom: 15px;
}

.chart-card canvas {
    max-height: 250px;
}

/* Tables */
.table-container {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-top: 15px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.data-table thead {
    background: #f8fafc;
}

.data-table th {
    padding: 12px 15px;
    text-align: right;
    font-weight: 600;
    color: #1a1a2e;
    border-bottom: 2px solid #e5e7eb;
}

.data-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #f1f5f9;
}

.data-table tbody tr:hover {
    background: #f8fafc;
}

.data-table .actions {
    display: flex;
    gap: 5px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
}

.btn-primary {
    background: #2563eb;
    color: #fff;
}

.btn-primary:hover {
    background: #1d4ed8;
}

.btn-success {
    background: #10b981;
    color: #fff;
}

.btn-success:hover {
    background: #059669;
}

.btn-danger {
    background: #ef4444;
    color: #fff;
}

.btn-danger:hover {
    background: #dc2626;
}

.btn-warning {
    background: #f59e0b;
    color: #fff;
}

.btn-warning:hover {
    background: #d97706;
}

.btn-secondary {
    background: #6b7280;
    color: #fff;
}

.btn-secondary:hover {
    background: #4b5563;
}

.btn-sm {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 7px;
}

.btn-sm.btn-primary { background: #2563eb; }
.btn-sm.btn-warning { background: #f59e0b; }
.btn-sm.btn-success { background: #10b981; }

/* Filter Section */
.filter-section {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 20px;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.filter-group {
    flex: 1;
    min-width: 150px;
}

.filter-group input,
.filter-group select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.filter-group input:focus,
.filter-group select:focus {
    border-color: #2563eb;
    outline: none;
}

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.active {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.inactive {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.pending {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.approved {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.rejected {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.working {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge.on_break {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.finished {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.inactive {
    background: #f1f5f9;
    color: #475569;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 10px;
}

.pagination a {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #1a1a2e;
    text-decoration: none;
    transition: all 0.3s;
}

.pagination a:hover {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.pagination a.active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.pagination .pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    color: #64748b;
    font-weight: 700;
    user-select: none;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    max-width: 700px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f1f5f9;
}

.modal-header h2 {
    margin: 0;
    color: #1a1a2e;
}

.close-btn {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #6b7280;
}

.close-btn:hover {
    color: #1a1a2e;
}

/* Form */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

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

.form-group label {
    font-weight: 600;
    margin-bottom: 5px;
    color: #374151;
    font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 10px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #2563eb;
    outline: none;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 2px solid #f1f5f9;
}

/* Attendance Buttons */
.attendance-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 25px 0;
}

.attendance-btn {
    flex: 1;
    min-width: 150px;
    padding: 16px 24px;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    color: #fff;
}

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

.attendance-btn.start {
    background: #2563eb;
}

.attendance-btn.start:hover:not(:disabled) {
    background: #1d4ed8;
}

.attendance-btn.break {
    background: #f59e0b;
}

.attendance-btn.break:hover:not(:disabled) {
    background: #d97706;
}

.attendance-btn.resume {
    background: #10b981;
}

.attendance-btn.resume:hover:not(:disabled) {
    background: #059669;
}

.attendance-btn.finish {
    background: #ef4444;
}

.attendance-btn.finish:hover:not(:disabled) {
    background: #dc2626;
}

/* Employee Welcome */
.employee-welcome {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.employee-welcome h2 {
    color: #1a1a2e;
    margin-bottom: 15px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-item .label {
    font-weight: 600;
    color: #6b7280;
}

.info-item .value {
    color: #1a1a2e;
    font-weight: 500;
}

/* Today Stats */
.today-stats {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-top: 20px;
}

.today-stats h3 {
    color: #1a1a2e;
    margin-bottom: 15px;
}

.today-stats .stats-grid {
    margin-bottom: 0;
}

.today-stats .stat-card {
    padding: 15px;
}

.today-stats .stat-label {
    color: #6b7280;
    font-size: 14px;
}

.today-stats .stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a2e;
    margin-top: 5px;
}

/* Info Cards */
.info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.info-card {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.info-card h4 {
    color: #1a1a2e;
    margin-bottom: 10px;
}

.info-card p {
    color: #6b7280;
    margin-bottom: 15px;
}

/* Alert */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.alert-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-danger {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-warning {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.alert-info {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

/* Utility Classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.mr-10 { margin-right: 10px; }
.ml-10 { margin-left: 10px; }
.p-20 { padding: 20px; }

/* Responsive */
@media (max-width: 992px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.active {
        transform: translateX(0);
    }
    .main-content {
        margin-right: 0;
    }
    .menu-toggle {
        display: block;
    }
    .charts-grid {
        grid-template-columns: 1fr;
    }
    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .filter-row {
        flex-direction: column;
    }
    .filter-group {
        width: 100%;
    }
    .data-table {
        font-size: 12px;
    }
    .data-table th,
    .data-table td {
        padding: 8px 10px;
    }
    .top-header {
        padding: 10px 15px;
    }
    .content-wrapper {
        padding: 10px 15px;
    }
    .attendance-buttons {
        flex-direction: column;
    }
    .attendance-btn {
        min-width: 100%;
    }
    .info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .modal-content {
        padding: 15px;
    }
}
/* تحسينات إضافية للتجاوب */
* {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.main-content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.content-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 15px;
    overflow-x: hidden;
}

.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    min-width: 600px;
    width: 100%;
}

@media (max-width: 768px) {
    .data-table {
        font-size: 12px;
        min-width: 500px;
    }
    
    .content-wrapper {
        padding: 10px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group {
        width: 100%;
    }
    
    .top-header {
        flex-wrap: wrap;
        padding: 10px;
    }
    
    .header-left h1 {
        font-size: 16px;
    }
    
    .sidebar {
        width: 280px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .sidebar.active {
        transform: translateX(0);
    }
    
    .main-content {
        margin-right: 0;
    }
    
    .menu-toggle {
        display: block;
        font-size: 24px;
        background: none;
        border: none;
        cursor: pointer;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .data-table {
        font-size: 11px;
        min-width: 400px;
    }
    
    .btn {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .attendance-btn {
        font-size: 14px;
        padding: 10px;
    }
    
    .modal-content {
        width: 95%;
        padding: 15px;
    }
}

/* الإصدار 4: تثبيت التطبيق + إشعارات الجهاز + شارات الإشعارات */
.pwa-install-banner {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    right: 12px;
    left: 12px;
    z-index: 2147483000;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #111827;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    padding: 10px 12px;
    direction: rtl;
}
.pwa-install-icon img { width: 44px; height: 44px; border-radius: 10px; display: block; }
.pwa-install-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pwa-install-text strong { font-size: 14px; }
.pwa-install-message { font-size: 12px; color: #4b5563; line-height: 1.5; }
.pwa-install-btn { border: 0; border-radius: 9px; padding: 9px 14px; background: #2563eb; color: #fff; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pwa-install-close { border: 0; background: transparent; color: #6b7280; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px; }
.notification-permission-card { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:16px; padding:14px 16px; border:1px solid #bfdbfe; border-radius:14px; background:#eff6ff; }
.notification-permission-card p { margin:4px 0 0; color:#475569; font-size:13px; }
.notification-permission-card[hidden] { display:none; }
.live-notification-toast { position:fixed; top:max(70px, calc(env(safe-area-inset-top) + 60px)); right:12px; left:12px; z-index:2147482000; transform:translateY(-20px); opacity:0; pointer-events:none; transition:.2s ease; background:#111827; color:#fff; padding:12px 14px; border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.25); display:flex; flex-direction:column; gap:3px; direction:rtl; }
.live-notification-toast.show { opacity:1; transform:translateY(0); pointer-events:auto; cursor:pointer; }
.badge-live { margin-inline-start:6px; }
@media (max-width: 768px) {
    .pwa-install-banner { grid-template-columns:auto 1fr auto auto; right:8px; left:8px; }
    .pwa-install-text strong { font-size:13px; }
    .pwa-install-message { font-size:11px; }
    .pwa-install-btn { padding:8px 12px; font-size:13px; }
    .notification-permission-card { align-items:flex-start; flex-direction:column; }
}

/* v9 report print layout */
@media print {
    html, body { background: #fff !important; width: 100% !important; overflow: visible !important; }
    .app-container, .main-content { width: 100% !important; margin: 0 !important; }
    .content-wrapper { padding: 0 !important; }
    .table-container { width: 100% !important; max-width: none !important; overflow: visible !important; border: 1px solid #d1d5db !important; }
    .data-table { width: 100% !important; min-width: 0 !important; table-layout: fixed !important; direction: rtl !important; font-size: 11pt !important; }
    .data-table th, .data-table td { white-space: normal !important; overflow: visible !important; word-break: normal !important; overflow-wrap: anywhere !important; }
    .data-table thead { display: table-header-group !important; }
    .data-table tbody tr { display: table-row !important; page-break-inside: avoid; }
    .data-table td, .data-table th { display: table-cell !important; }
}

/* v12: install prompt must stay clickable above all page layers */
.pwa-install-banner { z-index: 2147483646 !important; pointer-events: auto !important; }
.pwa-install-banner * { pointer-events: auto !important; }
.pwa-install-btn { position: relative; z-index: 2147483647 !important; cursor: pointer !important; touch-action: manipulation; }
.pwa-install-help-modal[hidden] { display:none !important; }
.pwa-install-help-modal { position:fixed; inset:0; z-index:2147483647; display:grid; place-items:center; padding:20px; direction:rtl; }
.pwa-install-help-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.58); }
.pwa-install-help-dialog { position:relative; z-index:1; width:min(420px,100%); background:#fff; border-radius:18px; padding:22px; box-shadow:0 22px 60px rgba(0,0,0,.28); }
.pwa-install-help-dialog h3 { margin:0 0 14px; }
.pwa-install-help-dialog ol { margin:0 0 18px; padding-right:22px; line-height:1.9; }
.pwa-install-help-close { position:absolute; top:10px; left:10px; border:0; background:transparent; font-size:28px; cursor:pointer; }
.pwa-install-help-ok { min-width:100px; }


/* V21: consistent admin controls and per-account password editing */
.form-note.account-password-note {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    color: #1e3a8a;
    font-size: 13px;
    line-height: 1.6;
}
.btn[disabled], button[disabled] {
    opacity: .6;
    cursor: not-allowed;
}
.admin-toolbar, .toolbar-actions, .form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.admin-toolbar .btn, .toolbar-actions .btn, .form-actions .btn {
    min-width: 108px;
}

/* ===== V24 Admin UI consistency ===== */
:root { --ui-primary:#2563eb; --ui-surface:#ffffff; --ui-border:#e2e8f0; --ui-muted:#64748b; --ui-bg:#f5f8fc; --ui-radius:16px; }
.content-wrapper { max-width: 1440px; margin: 0 auto; width:100%; }
.content-wrapper > * + * { margin-top: 18px; }
.table-container, .filter-section, .chart-card, .stat-card { border-radius:var(--ui-radius); border:1px solid var(--ui-border); box-shadow:0 8px 28px rgba(15,23,42,.06); }
.data-table { width:100%; border-collapse:separate; border-spacing:0; table-layout:auto; }
.data-table td { overflow-wrap:anywhere; word-break:break-word; }
.data-table .table-cell-value { min-width:0; overflow-wrap:anywhere; word-break:break-word; line-height:1.55; }
.data-table th, .data-table td { padding:12px 14px; vertical-align:middle; }
.data-table th { white-space:nowrap; font-size:13px; font-weight:800; }
.data-table td { font-size:13px; }
.data-table tbody tr:hover { background:#f8fafc; }
.btn { min-height:40px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-weight:700; white-space:nowrap; }
.btn-sm { min-height:34px; padding:7px 11px; font-size:12px; }
.btn-outline { background:#fff; border:1px solid var(--ui-border); color:#334155; }
.btn-secondary { background:#475569; border-color:#475569; color:#fff; }
input, select, textarea { min-height:42px; border:1px solid #cbd5e1; border-radius:10px; padding:9px 11px; font:inherit; background:#fff; color:#0f172a; box-sizing:border-box; }
input:focus, select:focus, textarea:focus { outline:3px solid rgba(37,99,235,.12); border-color:#60a5fa; }
.form-row { gap:16px !important; align-items:start; }
.form-group label { display:block; margin-bottom:7px; font-weight:800; font-size:13px; color:#334155; }
.notification-search { width:100%; margin-bottom:9px; }
.notification-recipient-group { min-width:0; }
.recipient-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:9px; }
.recipient-count { margin-inline-start:auto; color:var(--ui-primary); font-weight:800; font-size:12px; }
.notification-recipient-list { max-height:280px; overflow:auto; border:1px solid var(--ui-border); border-radius:14px; padding:8px; background:#f8fafc; }
.recipient-option { display:flex; align-items:center; gap:10px; padding:10px; border-radius:11px; cursor:pointer; transition:.15s; }
.recipient-option:hover { background:#eaf2ff; }
.recipient-option[hidden] { display:none; }
.recipient-option input { min-height:18px; width:18px; accent-color:var(--ui-primary); }
.recipient-avatar { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:#dbeafe; color:#1d4ed8; font-weight:900; flex:0 0 auto; }
.recipient-main { display:flex; flex-direction:column; gap:2px; min-width:0; }
.recipient-main strong { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recipient-main small, .form-hint { color:var(--ui-muted); font-size:11px; }
.leave-actions { display:flex; gap:7px; align-items:center; flex-wrap:wrap; min-width:290px; }
.leave-status-form { display:flex; gap:5px; align-items:center; }
.leave-status-form input[type=text] { width:155px; min-height:34px; font-size:11px; }
.status-badge { min-width:88px; text-align:center; }
@media (max-width: 900px) { .data-table { min-width:1000px; } .table-container { overflow-x:auto; } .leave-actions { min-width:250px; } .leave-status-form { width:100%; } .leave-status-form input[type=text] { flex:1; width:auto; } }
body { background:var(--ui-bg); }
.sidebar { border-inline-end:1px solid rgba(148,163,184,.16); box-shadow:10px 0 30px rgba(15,23,42,.04); }
.top-header { backdrop-filter:blur(12px); background:rgba(255,255,255,.9); border-bottom:1px solid var(--ui-border); }

/* ===== V25 Admin UI: unified, lightweight and responsive ===== */
:root {
    --ui-primary: #0f766e;
    --ui-primary-strong: #115e59;
    --ui-accent: #d97706;
    --ui-bg: #f5f7fa;
    --ui-surface: #ffffff;
    --ui-border: #dbe3ea;
    --ui-text: #172033;
    --ui-muted: #64748b;
    --ui-radius: 14px;
}
body { background: var(--ui-bg); color: var(--ui-text); }
.sidebar { background: linear-gradient(180deg,#132a3a 0%,#102432 100%); box-shadow: 10px 0 28px rgba(15,23,42,.08); }
.sidebar-nav a:hover,.sidebar-nav a.active { background: rgba(45,212,191,.09); border-right-color:#d6a33d; }
.top-header { background: rgba(255,255,255,.96); border-bottom:1px solid var(--ui-border); box-shadow:0 4px 18px rgba(15,23,42,.04); }
.header-left h1 { color:var(--ui-text); font-weight:800; }
.content-wrapper,.dashboard-content { max-width:1480px; margin-inline:auto; }
.filter-section,.table-container,.chart-card,.stat-card { border:1px solid var(--ui-border); box-shadow:0 8px 24px rgba(15,23,42,.045); border-radius:var(--ui-radius); }
.filter-section { padding:18px; }
.filter-row { align-items:end; gap:12px; }
.filter-group { min-width:0; }
.filter-group > label { display:block; margin-bottom:6px; color:var(--ui-muted); font-size:12px; font-weight:800; }
input,select,textarea { border-color:#ccd7e1; }
input:focus,select:focus,textarea:focus { border-color:#14b8a6; outline:3px solid rgba(20,184,166,.12); }
.btn { border-radius:10px; min-height:40px; }
.btn-primary { background:var(--ui-primary); border-color:var(--ui-primary); }
.btn-primary:hover { background:var(--ui-primary-strong); }
.btn-success { background:#0f9f78; border-color:#0f9f78; }
.btn-warning { background:#c27808; border-color:#c27808; }
.btn-outline { background:#fff; border:1px solid #cbd5e1; color:#334155; }
.btn-outline:hover { background:#f8fafc; }
.data-table { table-layout:auto; }
.data-table th { color:#334155; background:#f6f8fb; }
.data-table td,.data-table th { padding:11px 12px; }
.table-container { overflow-x:auto; }
.actions,.leave-actions { align-items:center; }
.admin-toolbar,.filter-actions-admin,.form-actions { display:flex; gap:8px; flex-wrap:nowrap; align-items:center; }
.filter-actions-admin { flex:0 0 auto; min-width:max-content; }
.filter-actions-admin .btn { min-width:112px; }
.employee-table { min-width:1180px; }
.employee-table th,.employee-table td { white-space:nowrap; }
.employee-table td:nth-child(3) { min-width:170px; }
.employee-table td:nth-child(5) { max-width:220px; overflow:hidden; text-overflow:ellipsis; }
.employee-table td:last-child { min-width:115px; }
.employee-table-scroll { width:100%; overflow-x:auto; }

/* Leave table: never force the full page to overflow; only the table scrolls. */
.leave-table-container { width:100%; overflow-x:auto; }
.leave-table { min-width:1180px; }
.leave-table th,.leave-table td { white-space:nowrap; }
.leave-table td:nth-child(7) { white-space:normal; min-width:220px; width:280px; max-width:320px; }
.leave-table .leave-reason-cell .table-cell-value { max-height:110px; overflow:auto; white-space:pre-wrap; }
.leave-actions { min-width:150px; justify-content:flex-start; }
.leave-edit-panel { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; padding-top:8px; border-top:1px dashed #dbe3ea; }
.leave-edit-panel[hidden] { display:none !important; }
.leave-edit-panel .leave-status-form { display:flex; gap:5px; }
.leave-edit-panel input[type=text] { width:155px; min-height:34px; font-size:11px; }
.leave-edit-btn { min-width:88px; }

/* Notifications: search and recipients live side-by-side. */
.notification-recipient-layout { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(280px,1.4fr); gap:12px; align-items:start; }
.notification-recipient-panel { min-width:0; }
.notification-search-wrap { display:flex; flex-direction:column; gap:7px; }
.notification-recipient-list { max-height:300px; overflow-y:auto; background:#f8fafc; border:1px solid var(--ui-border); border-radius:12px; padding:6px; }
.notification-search { margin:0; }
.recipient-toolbar { margin-top:8px; }

/* Dashboard priority order: people needing attention first. */
.dashboard-content .stats-grid { gap:14px; }
.dashboard-content .stat-card { min-height:96px; }
.dashboard-content .stat-card:nth-child(6) { order:1; }
.dashboard-content .stat-card:nth-child(7) { order:2; }
.dashboard-content .stat-card:nth-child(8) { order:3; }
.dashboard-content .stat-card:nth-child(3) { order:4; }
.dashboard-content .stat-card:nth-child(2) { order:5; }
.dashboard-content .stat-card:nth-child(1) { order:6; }
.dashboard-content .stat-card:nth-child(4) { order:7; }
.dashboard-content .stat-card:nth-child(5) { order:8; }

@media (max-width: 1100px) {
    .notification-recipient-layout { grid-template-columns:1fr; }
}
@media (max-width: 900px) {
    .admin-toolbar,.filter-actions-admin { flex-wrap:wrap; }
    .filter-actions-admin .btn { min-width:0; flex:1 1 auto; }
    .employee-table { min-width:1100px; }
    .leave-table { min-width:1100px; }
}
@media (max-width: 700px) {
    .content-wrapper { padding-inline:12px; }
    .filter-section { padding:14px; }
    .filter-row { align-items:stretch; }
    .filter-group { flex:1 1 100%; }
    .filter-actions-admin { width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
    .filter-actions-admin .btn { width:100%; min-width:0; }
    .leave-table { min-width:980px; }
    .leave-edit-panel { flex-direction:column; }
    .leave-edit-panel .leave-status-form { width:100%; }
    .leave-edit-panel input[type=text] { width:100%; flex:1; }
}


/* V26 compact notification picker and leave action layout */
.notification-picker{position:relative;max-width:100%;}
.notification-search-line{display:flex;gap:10px;align-items:center;}
.notification-search-line .notification-search{flex:1;min-width:0;}
.notification-search-results{position:relative;margin-top:8px;border:1px solid var(--border-color,#d7dee8);border-radius:12px;background:#fff;max-height:220px;overflow:auto;box-shadow:0 8px 24px rgba(15,23,42,.08);z-index:10;}
.notification-result{width:100%;border:0;background:#fff;padding:10px 12px;display:flex;align-items:center;gap:10px;text-align:right;cursor:pointer;}
.notification-result:hover,.notification-result.selected{background:#f1f5f9;}
.notification-result span:last-child{display:flex;flex-direction:column;gap:2px;}
.notification-result small{color:#64748b;}
.selected-employees-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;}
.recipient-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;background:#eef4ff;border:1px solid #d7e3ff;border-radius:999px;color:#1e3a8a;font-size:13px;}
.recipient-chip small{color:#64748b;margin-right:3px;}
.recipient-chip button{border:0;background:transparent;color:#64748b;font-size:18px;line-height:1;cursor:pointer;padding:0;}
.search-loading,.search-empty{padding:14px;color:#64748b;text-align:center;}
.leave-table-container{overflow-x:auto;}
.leave-table{min-width:980px;}
.leave-actions-compact{display:flex;align-items:center;justify-content:flex-start;gap:7px;flex-wrap:wrap;min-width:180px;}
.leave-actions-compact .leave-edit-panel{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.leave-actions-compact .leave-status-form{display:flex;gap:5px;align-items:center;margin:0;}
.leave-actions-compact input[name="manager_note"]{width:150px;min-width:120px;}
@media (max-width:900px){.leave-table{min-width:880px}.leave-actions-compact{min-width:160px}}


/* Offline attendance status */
.offline-attendance-status{display:block;margin:0 0 14px;padding:10px 14px;border-radius:12px;background:#f8fafc;border:1px solid #e2e8f0;color:#334155;font-size:13px;font-weight:700;text-align:center}
@media(max-width:640px){.offline-attendance-status{font-size:12px;padding:9px 10px}}

/* V31 leave decision modal */
.leave-decision-modal[hidden] { display:none !important; }
.leave-decision-modal { display:flex; padding:18px; background:rgba(15,23,42,.62); backdrop-filter:blur(3px); }
.leave-decision-content { max-width:560px; width:min(560px, 96vw); padding:22px; border:1px solid #e2e8f0; box-shadow:0 24px 70px rgba(15,23,42,.28); }
.leave-decision-summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.leave-decision-summary > div { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:11px 12px; display:flex; flex-direction:column; gap:4px; }
.leave-decision-summary span { color:#64748b; font-size:12px; }
.leave-decision-summary strong { color:#0f172a; font-size:14px; }
.leave-decision-form { display:flex; flex-direction:column; gap:9px; }
.leave-decision-form > label { font-weight:700; color:#334155; }
.leave-decision-form textarea { width:100%; min-height:110px; resize:vertical; border:1px solid #cbd5e1; border-radius:12px; padding:11px 12px; font:inherit; background:#fff; color:#0f172a; }
.leave-decision-actions { display:grid; grid-template-columns:1fr 1fr 110px; gap:9px; margin-top:6px; }
.leave-decision-actions .btn { min-height:42px; }
body.modal-open { overflow:hidden; }
@media (max-width:600px) {
  .leave-decision-summary { grid-template-columns:1fr; }
  .leave-decision-actions { grid-template-columns:1fr 1fr; }
  .leave-decision-actions .btn:last-child { grid-column:1 / -1; }
}


/* V35 — universal data-table wrapping/column containment */
.data-table-v34, .data-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}
.data-table th, .data-table td {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    vertical-align: top;
    min-width: 0;
    max-width: none;
}
.data-table th {
    line-height: 1.35;
}
.data-table td {
    line-height: 1.55;
}
.data-table .table-cell-value,
.data-table td > div,
.data-table td > span {
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}
.employee-table th, .employee-table td,
.leave-table th, .leave-table td {
    white-space: normal !important;
}
.employee-table { min-width: 980px; }
.leave-table { min-width: 1080px; }
.employee-table td:nth-child(3) { min-width: 170px; }
.employee-table td:last-child { min-width: 115px; }
.leave-table td:nth-child(7) { min-width: 220px; width: 260px; max-width: 320px; }
.leave-table .leave-reason-cell .table-cell-value {
    max-height: none !important;
    overflow: visible !important;
    white-space: pre-wrap !important;
}
.table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}


/* V35: administrator sidebar is always positioned on the left; content uses left margin on desktop. */
@media (min-width: 769px) {
  body:has(.sidebar-collapse-btn) .sidebar { left:0 !important; right:auto !important; border-inline-end:0; border-right:1px solid rgba(148,163,184,.16); border-left:0; box-shadow:10px 0 28px rgba(15,23,42,.08); }
  body:has(.sidebar-collapse-btn) .main-content { margin-right:0 !important; margin-left:250px !important; }
  html.sidebar-collapsed body:has(.sidebar-collapse-btn) .main-content { margin-left:80px !important; }
}
@media (max-width: 768px) {
  body:has(.sidebar-collapse-btn) .sidebar { left:0 !important; right:auto !important; transform:translateX(-100%); }
  body:has(.sidebar-collapse-btn) .sidebar.active { transform:translateX(0); }
  body:has(.sidebar-collapse-btn) .main-content { margin-left:0 !important; margin-right:0 !important; }
}
/* V35: safe wrapping for every data table. */
.data-table { width:100%; table-layout:fixed !important; }
.data-table th, .data-table td { white-space:normal !important; overflow-wrap:anywhere !important; word-break:break-word !important; max-width:0; vertical-align:middle !important; }
.data-table th { line-height:1.35; text-align:center; }
.data-table td { line-height:1.5; }
.data-table .actions { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; overflow:visible; max-width:none; }
.field-error { display:block; min-height:18px; margin-top:4px; color:#dc2626; font-size:12px; font-weight:700; }
.field-invalid { border-color:#dc2626 !important; outline:3px solid rgba(220,38,38,.12) !important; background:#fff7f7 !important; }
.report-employee-filter { min-width:260px; flex:1 1 280px; }

.reports-table th, .reports-table td { text-align:center; word-break:break-word; overflow-wrap:anywhere; }
.reports-table td:first-child, .reports-table th:first-child { font-weight:700; }
.reports-table .status-badge { display:inline-flex; align-items:center; justify-content:center; max-width:100%; white-space:normal; }
@media (max-width: 900px) { .reports-table { min-width:760px; } }


/* ===== V37 Admin navigation and viewport behavior ===== */
html { direction: ltr; }
html body { direction: rtl; }
@media (min-width: 769px) {
  body:has(.sidebar-collapse-btn) .sidebar {
    left: auto !important;
    right: 0 !important;
    width: 260px !important;
    transform: none !important;
    overflow-y: auto;
    overflow-x: hidden;
  }
  body:has(.sidebar-collapse-btn) .main-content {
    margin-left: 0 !important;
    margin-right: 260px !important;
  }
  html.sidebar-collapsed body:has(.sidebar-collapse-btn) .sidebar {
    width: 80px !important;
  }
  html.sidebar-collapsed body:has(.sidebar-collapse-btn) .main-content {
    margin-right: 80px !important;
  }
}
@media (max-width: 768px) {
  body:has(.sidebar-collapse-btn) .sidebar {
    left: auto !important;
    right: 0 !important;
    width: min(88vw, 320px) !important;
    min-width: 280px !important;
    transform: translateX(100%) !important;
    overflow-y: auto;
    overflow-x: hidden;
  }
  body:has(.sidebar-collapse-btn) .sidebar.active {
    transform: translateX(0) !important;
  }
  body:has(.sidebar-collapse-btn) .main-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  body:has(.sidebar-collapse-btn) .menu-toggle { display:block !important; }
}
/* Keep the browser/page scrollbar on the left while all app content remains Arabic RTL. */
html { overflow-y: scroll; }
body { min-height: 100vh; }
.audit-table { min-width: 1180px; table-layout: fixed !important; }
.audit-table th, .audit-table td { text-align:center; vertical-align:middle !important; white-space:normal !important; overflow-wrap:anywhere !important; word-break:break-word !important; }
.audit-table th:nth-child(1), .audit-table td:nth-child(1) { width:58px; }
.audit-table th:nth-child(2), .audit-table td:nth-child(2) { width:170px; }
.audit-table th:nth-child(3), .audit-table td:nth-child(3) { width:170px; }
.audit-table th:nth-child(4), .audit-table td:nth-child(4) { width:120px; }
.audit-table th:nth-child(5), .audit-table td:nth-child(5) { width:80px; }
.audit-table th:nth-child(6), .audit-table td:nth-child(6) { width:360px; }
.audit-table th:nth-child(7), .audit-table td:nth-child(7) { width:130px; direction:ltr; }
.audit-table th:nth-child(8), .audit-table td:nth-child(8) { width:150px; }
.audit-details { white-space: pre-wrap !important; }

/* ===== V40: Unified professional admin tabs ===== */
.admin-toolbar,
.filter-section .filter-row,
.report-actions,
.form-actions {
    width: 100%;
}

.filter-section {
    padding: 16px;
}

.filter-section form,
.report-filters {
    display: block;
}

.filter-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.filter-group,
.filter-actions,
.filter-actions-admin {
    min-width: 0;
}

.filter-group > label,
.form-group > label {
    color: #475569;
}

.filter-actions,
.filter-actions-admin {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-actions .btn,
.filter-actions-admin .btn {
    flex: 0 0 auto;
}

.page-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 8px 24px rgba(15,23,42,.045);
}

.page-hero-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #ecfeff;
    font-size: 23px;
}

.page-hero h2 {
    margin: 0 0 3px;
    color: var(--ui-text);
    font-size: 18px;
    line-height: 1.4;
}

.page-hero p {
    margin: 0;
    color: var(--ui-muted);
    font-size: 13px;
}

.page-hero-danger .page-hero-icon {
    background: #fef2f2;
}

.table-container {
    margin-top: 0;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
}

.data-table {
    width: 100%;
    min-width: 760px;
    table-layout: fixed !important;
}

.data-table thead th {
    height: 48px;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    vertical-align: middle !important;
    border-bottom: 1px solid #e2e8f0;
}

.data-table tbody td {
    min-height: 52px;
    padding: 11px 10px;
    text-align: center;
    vertical-align: middle !important;
    color: #334155;
    border-bottom: 1px solid #eef2f7;
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table tbody tr:hover {
    background: #fbfdff;
}

.data-table .actions,
.action-btn-group,
.leave-actions-compact {
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.data-table .actions .btn,
.action-btn-group .btn,
.leave-actions-compact .btn {
    min-width: 36px;
}

.status-badge {
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
}

/* Per-tab table geometry */
.attendance-table { min-width: 900px; }
.attendance-table tbody tr.attendance-row-warning>td{background:#fee2e2!important;color:#7f1d1d}.attendance-table tbody tr.attendance-row-overtime>td{background:#dcfce7!important;color:#14532d}

/* V76: قياسات صريحة للأعمدة العشرة بعد إضافة عمود الحالة. استخدام colgroup
   يمنع قواعد nth-child القديمة من إزاحة أحجام الوقت والقسم. */
.attendance-table{min-width:1260px!important;table-layout:fixed!important}
.attendance-table col.attendance-col-index{width:56px}
.attendance-table col.attendance-col-employee{width:200px}
.attendance-table col.attendance-col-date{width:112px}
.attendance-table col.attendance-col-status{width:175px}
.attendance-table col.attendance-col-time{width:112px}
.attendance-table col.attendance-col-overtime{width:135px}
.attendance-table col.attendance-col-department{width:160px}
.attendance-table th,.attendance-table td{white-space:nowrap!important;text-align:center!important;vertical-align:middle!important}
.attendance-table th:nth-child(2),.attendance-table td:nth-child(2),
.attendance-table th:nth-child(10),.attendance-table td:nth-child(10){white-space:normal!important;overflow-wrap:anywhere!important}
.attendance-table th:nth-child(1), .attendance-table td:nth-child(1) { width: 58px; }
.attendance-table th:nth-child(2), .attendance-table td:nth-child(2) { width: 190px; }
.attendance-table th:nth-child(3), .attendance-table td:nth-child(3) { width: 150px; }
.attendance-table th:nth-child(4), .attendance-table td:nth-child(4) { width: 175px; }
.attendance-table th:nth-child(5), .attendance-table td:nth-child(5) { width: 150px; }
.attendance-table th:nth-child(6), .attendance-table td:nth-child(6) { width: 175px; }

.departments-table { min-width: 760px; }
.departments-table th:nth-child(1), .departments-table td:nth-child(1) { width: 58px; }
.departments-table th:nth-child(2), .departments-table td:nth-child(2) { width: 210px; }
.departments-table th:nth-child(3), .departments-table td:nth-child(3) { width: 260px; }
.departments-table th:nth-child(4), .departments-table td:nth-child(4) { width: 120px; }
.departments-table th:nth-child(5), .departments-table td:nth-child(5) { width: 145px; }
.departments-table th:nth-child(6), .departments-table td:nth-child(6) { width: 145px; }

.leave-table { min-width: 1180px; }
.leave-table th:nth-child(1), .leave-table td:nth-child(1) { width: 54px; }
.leave-table th:nth-child(2), .leave-table td:nth-child(2) { width: 160px; }
.leave-table th:nth-child(3), .leave-table td:nth-child(3) { width: 135px; }
.leave-table th:nth-child(4), .leave-table td:nth-child(4) { width: 100px; }
.leave-table th:nth-child(5), .leave-table td:nth-child(5) { width: 100px; }
.leave-table th:nth-child(6), .leave-table td:nth-child(6) { width: 90px; }
.leave-table th:nth-child(7), .leave-table td:nth-child(7) { width: 250px; }
.leave-table th:nth-child(8), .leave-table td:nth-child(8) { width: 110px; }
.leave-table th:nth-child(9), .leave-table td:nth-child(9) { width: 125px; }
.leave-table th:nth-child(10), .leave-table td:nth-child(10) { width: 220px; }

.absences-table { min-width: 760px; }
.absences-table th:nth-child(1), .absences-table td:nth-child(1) { width: 240px; }
.absences-table th:nth-child(2), .absences-table td:nth-child(2) { width: 190px; }
.absences-table th:nth-child(3), .absences-table td:nth-child(3) { width: 130px; }
.absences-table th:nth-child(4), .absences-table td:nth-child(4) { width: 145px; }
.absences-table th:nth-child(5), .absences-table td:nth-child(5) { width: 135px; }

.departed-table { min-width: 980px; }
.departed-table th:nth-child(1), .departed-table td:nth-child(1) { width: 55px; }
.departed-table th:nth-child(2), .departed-table td:nth-child(2) { width: 175px; }
.departed-table th:nth-child(3), .departed-table td:nth-child(3) { width: 120px; }
.departed-table th:nth-child(4), .departed-table td:nth-child(4) { width: 155px; }
.departed-table th:nth-child(5), .departed-table td:nth-child(5) { width: 180px; }
.departed-table th:nth-child(6), .departed-table td:nth-child(6) { width: 120px; }
.departed-table th:nth-child(7), .departed-table td:nth-child(7) { width: 175px; }
.departed-table th:nth-child(8), .departed-table td:nth-child(8) { width: 175px; }

.excused-table { min-width: 980px; }
.excused-table th:nth-child(1), .excused-table td:nth-child(1) { width: 55px; }
.excused-table th:nth-child(2), .excused-table td:nth-child(2) { width: 180px; }
.excused-table th:nth-child(3), .excused-table td:nth-child(3) { width: 160px; }
.excused-table th:nth-child(4), .excused-table td:nth-child(4) { width: 115px; }
.excused-table th:nth-child(5), .excused-table td:nth-child(5) { width: 150px; }
.excused-table th:nth-child(6), .excused-table td:nth-child(6) { width: 110px; }
.excused-table th:nth-child(7), .excused-table td:nth-child(7) { width: 110px; }
.excused-table th:nth-child(8), .excused-table td:nth-child(8) { width: 180px; }
.excused-table th:nth-child(9), .excused-table td:nth-child(9) { width: 120px; }

.notifications-table { min-width: 980px; }
.notifications-table th:nth-child(1), .notifications-table td:nth-child(1) { width: 55px; }
.notifications-table th:nth-child(2), .notifications-table td:nth-child(2) { width: 180px; }
.notifications-table th:nth-child(3), .notifications-table td:nth-child(3) { width: 290px; }
.notifications-table th:nth-child(4), .notifications-table td:nth-child(4) { width: 105px; }
.notifications-table th:nth-child(5), .notifications-table td:nth-child(5) { width: 140px; }
.notifications-table th:nth-child(6), .notifications-table td:nth-child(6) { width: 160px; }
.notifications-table th:nth-child(7), .notifications-table td:nth-child(7) { width: 150px; }
.notifications-table th:nth-child(8), .notifications-table td:nth-child(8) { width: 110px; }

.reports-table { min-width: 900px; }
.audit-table { min-width: 1180px; }

.settings-section {
    padding: 20px;
    margin-bottom: 0;
}

.import-help {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

.import-help h3 {
    margin: 0 0 5px;
    color: var(--ui-text);
    font-size: 16px;
}

.import-help p {
    margin: 0;
    color: var(--ui-muted);
    font-size: 13px;
}

.import-form {
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    padding: 18px;
}

.notification-recipient-layout {
    grid-template-columns: minmax(260px,.85fr) minmax(320px,1.15fr);
    gap: 16px;
}

.notification-recipient-list {
    min-height: 120px;
}

.empty-state {
    padding: 28px 18px;
    text-align: center;
    color: var(--ui-muted);
}

/* Never convert admin data tables into cramped cards on small screens. Scroll the table itself. */
@media (max-width: 768px) {
    .content-wrapper {
        padding: 12px;
    }

    .top-header {
        min-height: 58px;
        gap: 8px;
    }

    .top-header .header-right {
        gap: 8px;
        min-width: 0;
    }

    .user-name {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .page-hero {
        padding: 14px;
        align-items: flex-start;
    }

    .page-hero h2 {
        font-size: 16px;
    }

    .page-hero p {
        font-size: 12px;
    }

    .filter-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .filter-actions,
    .filter-actions-admin,
    .form-actions,
    .report-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .filter-actions .btn,
    .filter-actions-admin .btn,
    .report-actions .btn,
    .form-actions .btn {
        flex: 1 1 150px;
    }

    .table-container {
        border-radius: 12px;
    }

    .data-table {
        font-size: 12px;
        min-width: 760px !important;
    }

    .data-table thead {
        display: table-header-group !important;
    }

    .data-table tbody tr {
        display: table-row !important;
        margin: 0 !important;
        border: 0 !important;
        padding: 0 !important;
    }

    .data-table tbody td {
        display: table-cell !important;
        padding: 10px 8px;
        border-bottom: 1px solid #eef2f7;
    }

    .data-table tbody td::before {
        content: none !important;
    }

    .data-table .actions,
    .action-btn-group,
    .leave-actions-compact {
        flex-wrap: wrap;
        justify-content: center;
    }

    .import-help {
        grid-template-columns: 1fr;
    }

    .settings-section,
    .import-form {
        padding: 14px;
    }

    .notification-recipient-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .content-wrapper {
        padding: 10px;
    }

    .filter-section {
        padding: 12px;
    }

    .page-hero-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        font-size: 20px;
    }

    .data-table {
        min-width: 680px !important;
        font-size: 11.5px;
    }

    .data-table thead th,
    .data-table tbody td {
        padding: 8px 7px;
    }

    .btn {
        min-height: 40px;
    }
}


/* Fardows HR v48 — professional visual theme */
:root {
    --fhr-navy: #0f2f4f;
    --fhr-navy-2: #163f66;
    --fhr-blue: #2563eb;
    --fhr-blue-2: #1d4ed8;
    --fhr-gold: #d4a72c;
    --fhr-bg: #f5f8fc;
    --fhr-text: #152238;
    --fhr-muted: #64748b;
    --fhr-border: #dbe4ef;
    --fhr-card: #ffffff;
}
body { background: var(--fhr-bg); color: var(--fhr-text); }
.sidebar {
    background: linear-gradient(180deg, var(--fhr-navy) 0%, #07152a 100%);
    box-shadow: 0 18px 45px rgba(11,31,58,.22);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    opacity: 1 !important;
    isolation: isolate;
}
.sidebar-nav a { color: rgba(255,255,255,.82); }
.sidebar-nav a:hover, .sidebar-nav a.active {
    background: linear-gradient(90deg, rgba(37,99,235,.34), rgba(212,167,44,.12));
    color: #fff;
    border-right-color: var(--fhr-gold);
}
.sidebar-brand-icon {
    box-shadow: 0 8px 22px rgba(212,167,44,.18);
}
.top-header {
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--fhr-border);
    box-shadow: 0 6px 24px rgba(15,23,42,.06);
}
.header-left h1, .user-name { color: var(--fhr-text); }
.content-wrapper, .dashboard-content { color: var(--fhr-text); }
.filter-section, .table-container, .chart-card, .stat-card, .modal-content, .page-hero {
    border: 1px solid rgba(203,213,225,.7);
    box-shadow: 0 10px 30px rgba(15,23,42,.06);
}
.btn-primary {
    background: linear-gradient(135deg, var(--fhr-blue), var(--fhr-blue-2));
    box-shadow: 0 8px 18px rgba(37,99,235,.22);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--fhr-blue-2), #1e40af); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: rgba(37,99,235,.75);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.data-table th { background: #eef3f9; color: #24364f; }
.data-table tbody tr:hover { background: #f8fbff; }
.status-badge { box-shadow: none; }
.notification-badge, .badge { box-shadow: 0 4px 12px rgba(239,68,68,.22); }
.sidebar-collapse-btn { border-color: rgba(255,255,255,.16); color: #fff; }
@media (max-width: 768px) {
    .sidebar { box-shadow: 12px 0 36px rgba(7,21,42,.3); }
}

/* ===== V48 Enterprise visual system ===== */
:root {
    --fhr-navy: #0a1f33;
    --fhr-navy-2: #123a5a;
    --fhr-blue: #1f5eff;
    --fhr-blue-2: #1649d8;
    --fhr-teal: #0f9f9a;
    --fhr-gold: #d6a84f;
    --fhr-bg: #f4f7fb;
    --fhr-text: #172236;
    --fhr-muted: #64748b;
    --fhr-border: #d9e2ec;
    --fhr-card: #ffffff;
    --fhr-danger: #c53d4c;
    --fhr-success: #158a67;
    --ui-primary: var(--fhr-blue);
    --ui-primary-strong: var(--fhr-blue-2);
    --ui-accent: var(--fhr-gold);
    --ui-bg: var(--fhr-bg);
    --ui-surface: var(--fhr-card);
    --ui-border: var(--fhr-border);
    --ui-text: var(--fhr-text);
    --ui-muted: var(--fhr-muted);
    --ui-radius: 14px;
}
html { background: var(--fhr-bg); }
body { background: radial-gradient(circle at top right, #ffffff 0%, var(--fhr-bg) 48%, #eef3f8 100%); color: var(--fhr-text); }
.sidebar {
    background: linear-gradient(180deg, #0a1f33 0%, #071827 58%, #05131f 100%);
    border-inline-end: 1px solid rgba(255,255,255,.08);
    box-shadow: 12px 0 34px rgba(4, 18, 30, .22);
}
.sidebar-header { border-bottom: 1px solid rgba(255,255,255,.07); }
.sidebar-nav a {
    margin: 4px 10px;
    border-radius: 10px;
    color: rgba(255,255,255,.78);
    border-right: 3px solid transparent;
    transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
.sidebar-nav a:hover { background: rgba(255,255,255,.055); color: #fff; transform: translateX(-2px); }
.sidebar-nav a.active {
    background: linear-gradient(90deg, rgba(31,94,255,.26), rgba(214,168,79,.12));
    color: #fff;
    border-right-color: var(--fhr-gold);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 6px 16px rgba(0,0,0,.12);
}
.nav-icon, .ui-icon {
    width: 22px; height: 22px; min-width: 22px;
    display: inline-grid; place-items: center;
    color: currentColor;
    vertical-align: middle;
}
.ui-icon svg, .nav-icon svg { width: 18px; height: 18px; display:block; stroke: currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.sidebar-nav .nav-icon { color: #a9bfd3; }
.sidebar-nav a:hover .nav-icon, .sidebar-nav a.active .nav-icon { color: #ffffff; }
.top-header {
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid var(--fhr-border);
    box-shadow: 0 8px 24px rgba(15,23,42,.055);
}
.header-left h1 { color: var(--fhr-text); letter-spacing: -.2px; }
.user-name { color: #314258; }
.filter-section, .table-container, .chart-card, .stat-card, .modal-content, .page-hero {
    background: rgba(255,255,255,.94);
    border: 1px solid var(--fhr-border);
    box-shadow: 0 10px 30px rgba(15,35,55,.06);
}
.page-hero { position: relative; overflow: hidden; }
.page-hero::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:linear-gradient(180deg,var(--fhr-blue),var(--fhr-gold)); }
input, select, textarea {
    background: #fff; color: var(--fhr-text); border-color: #cbd7e4;
    box-shadow: inset 0 1px 1px rgba(15,23,42,.025);
}
input:focus, select:focus, textarea:focus { border-color: rgba(31,94,255,.72); outline: 3px solid rgba(31,94,255,.11); }
.btn-primary { background: linear-gradient(135deg,var(--fhr-blue),var(--fhr-blue-2)); border-color: transparent; box-shadow: 0 7px 16px rgba(31,94,255,.20); }
.btn-primary:hover { background: linear-gradient(135deg,var(--fhr-blue-2),#0f3cae); }
.btn-success { background: linear-gradient(135deg,#158a67,#0e7356); border-color: transparent; }
.btn-warning { background: linear-gradient(135deg,#bf8d32,#a9751f); border-color: transparent; }
.btn-danger { background: linear-gradient(135deg,#c53d4c,#a92e3e); border-color: transparent; }
.btn-secondary { background: linear-gradient(135deg,#385169,#293d52); border-color: transparent; }
.btn-outline { color:#2c3e52; background:#fff; border-color:#cbd7e4; }
.btn-outline:hover { background:#f4f7fb; border-color:#aebfd0; }
.data-table th { background: linear-gradient(180deg,#f4f7fb,#edf2f7); color:#26384c; border-bottom-color:#d6e0ea; }
.data-table tbody tr:hover { background:#f7faff; }
.stat-card { overflow:hidden; position:relative; }
.stat-card::after { content:""; position:absolute; inset:auto 0 0 0; height:3px; background:linear-gradient(90deg,var(--fhr-blue),var(--fhr-gold)); opacity:.7; }
.notification-badge, .badge { box-shadow:0 5px 14px rgba(197,61,76,.20); }
.alert { border-radius:12px; box-shadow:0 6px 18px rgba(15,35,55,.05); }
.sidebar-collapse-btn { border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.035); }
.page-hero-icon { color:var(--fhr-blue); background:#f4f7fb; }
.recipient-avatar { background:#eaf0ff; color:#1649d8; }
.recipient-chip { background:#eef3ff; border-color:#d4defb; color:#173f9f; }

/* Replace remaining emoji-only icons with a unified vector appearance. */
.emoji-icon, .ui-icon { font-family: inherit; }

/* ===== V48 Professional SVG navigation icons ===== */
.sidebar-nav a { display:flex; align-items:center; gap:12px; }
.nav-icon,.ui-icon { width:22px; height:22px; min-width:22px; display:inline-flex; align-items:center; justify-content:center; color:currentColor; }
.nav-icon svg,.ui-icon svg { width:19px; height:19px; display:block; stroke:currentColor; fill:none; stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round; }
.nav-label { min-width:0; }
.sidebar-nav a.active .nav-icon { color:#f1c968; }
.sidebar-brand-icon img { object-fit:contain; }

/* V61 attendance table + employee picker */
.attendance-table{min-width:1180px!important;table-layout:fixed!important;}
.attendance-table th,.attendance-table td{max-width:none!important;word-break:normal!important;overflow-wrap:normal!important;text-align:center;}
.attendance-table th:nth-child(1),.attendance-table td:nth-child(1){width:55px;}
.attendance-table th:nth-child(2),.attendance-table td:nth-child(2){width:190px;}
.attendance-table th:nth-child(3),.attendance-table td:nth-child(3){width:120px;}
.attendance-table th:nth-child(4),.attendance-table td:nth-child(4),.attendance-table th:nth-child(5),.attendance-table td:nth-child(5),.attendance-table th:nth-child(6),.attendance-table td:nth-child(6),.attendance-table th:nth-child(7),.attendance-table td:nth-child(7){width:135px;white-space:nowrap!important;}
.attendance-table th:nth-child(8),.attendance-table td:nth-child(8){width:150px;}
.attendance-employee-picker{flex:1 1 360px!important;min-width:min(100%,320px);}
.attendance-picker-line{display:flex;gap:8px;align-items:center;}
.attendance-picker-line input{flex:1;min-width:0;}
.attendance-picker-line .btn{flex:0 0 auto;white-space:nowrap;}
@media(max-width:600px){.attendance-picker-line{align-items:stretch}.attendance-picker-line .btn{padding-inline:12px}}

/* V76 final attendance column contract (must remain after legacy table rules). */
table.attendance-table{width:1260px!important;min-width:1260px!important;table-layout:fixed!important}
table.attendance-table th,table.attendance-table td{min-width:0!important;width:auto!important}
table.attendance-table col.attendance-col-index{width:56px!important}
table.attendance-table col.attendance-col-employee{width:200px!important}
table.attendance-table col.attendance-col-date{width:112px!important}
table.attendance-table col.attendance-col-status{width:175px!important}
table.attendance-table col.attendance-col-time{width:112px!important}
table.attendance-table col.attendance-col-overtime{width:135px!important}
table.attendance-table col.attendance-col-department{width:160px!important}

/* V77: نافذة تعديل النازل ومواءمة جداول الهاتف فقط. */
.modal-overlay[hidden]{display:none!important}
.modal-overlay{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(2,12,27,.68);backdrop-filter:blur(3px)}
.modal-card{position:relative;width:min(100%,480px);max-height:calc(100dvh - 36px);overflow:auto;padding:24px;border-radius:18px;background:var(--card-bg,#fff);color:var(--text-primary,#172033);box-shadow:0 24px 70px rgba(0,0,0,.28)}
.modal-card form,.modal-card label{display:grid;gap:8px}.modal-card form{gap:16px}.modal-card select{width:100%;min-height:44px}.modal-close{position:absolute;top:10px;left:12px;width:38px;height:38px;border:0;border-radius:50%;font-size:26px;cursor:pointer}.modal-actions{display:flex;gap:10px;justify-content:flex-end}.modal-open{overflow:hidden}
.departed-date-filter{align-items:end}.departed-date-filter .filter-group:last-child{display:flex;gap:10px;flex-wrap:wrap}

@media(max-width:768px){
  /* تبقى الجداول أفقية قابلة للتمرير، لكن عرض كل عنوان يطابق محتواه الفعلي. */
  body .table-container table.reports-table{width:max-content!important;table-layout:fixed!important}
  body .table-container table.reports-table th,body .table-container table.reports-table td{padding:9px 6px!important;font-size:12px!important;line-height:1.3!important}
  body .table-container table.reports-table th{white-space:normal!important;overflow-wrap:normal!important}
  body .table-container table.reports-table.report-type-daily{min-width:870px!important}
  body .table-container table.reports-table.report-type-daily col:nth-child(1){width:145px!important}
  body .table-container table.reports-table.report-type-daily col:nth-child(2){width:82px!important}
  body .table-container table.reports-table.report-type-daily col:nth-child(3),body .table-container table.reports-table.report-type-daily col:nth-child(4){width:82px!important}
  body .table-container table.reports-table.report-type-daily col:nth-child(n+5):nth-child(-n+9){width:78px!important}
  body .table-container table.reports-table.report-type-daily col:nth-child(10){width:95px!important}
  body .table-container table.reports-table.report-type-monthly{min-width:770px!important}
  body .table-container table.reports-table.report-type-monthly col:nth-child(1){width:145px!important}
  body .table-container table.reports-table.report-type-monthly col:nth-child(2),body .table-container table.reports-table.report-type-monthly col:nth-child(3){width:78px!important}
  body .table-container table.reports-table.report-type-monthly col:nth-child(n+4){width:100px!important}
  body .table-container table.reports-table.report-type-leaves{min-width:650px!important}
  body .table-container table.reports-table.report-type-leaves col:nth-child(1){width:145px!important}
  body .table-container table.reports-table.report-type-leaves col:nth-child(2){width:112px!important}
  body .table-container table.reports-table.report-type-leaves col:nth-child(3),body .table-container table.reports-table.report-type-leaves col:nth-child(4){width:92px!important}
  body .table-container table.reports-table.report-type-leaves col:nth-child(5){width:78px!important}
  body .table-container table.reports-table.report-type-leaves col:nth-child(6){width:95px!important}
  body .table-container table.reports-table.report-type-overtime{min-width:330px!important}
  body .table-container table.reports-table.report-type-overtime col:nth-child(1){width:180px!important}
  body .table-container table.reports-table.report-type-overtime col:nth-child(2){width:150px!important}
  body .table-container table.reports-table.report-type-absences{min-width:310px!important}
  body .table-container table.reports-table.report-type-absences col:nth-child(1){width:180px!important}
  body .table-container table.reports-table.report-type-absences col:nth-child(2){width:130px!important}
  .modal-card{padding:22px 16px}.modal-actions{display:grid;grid-template-columns:1fr 1fr}.departed-date-filter .filter-group{width:100%}.departed-date-filter .filter-group:last-child .btn{flex:1}
}
.departure-convert-form{display:grid;grid-template-columns:minmax(145px,1fr) minmax(125px,.8fr) minmax(155px,1fr) auto;gap:8px;align-items:end;min-width:620px}
.departure-convert-form label{display:grid;gap:5px;font-size:.78rem;font-weight:700;color:var(--text-muted,#64748b)}
.departure-convert-form input,.departure-convert-form select{min-height:40px;width:100%}
.departure-convert-form .btn{min-height:40px;white-space:nowrap}
@media(max-width:760px){.departure-convert-form{min-width:0;grid-template-columns:1fr}.departure-convert-form .btn{width:100%}}

/* ===== V62 table readability/performance hotfix =====
   Keep table text readable: never split Arabic/Latin words into narrow vertical columns.
   Wide tables scroll horizontally instead of compressing their cells. */
.table-container,
.employee-table-scroll {
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    contain: layout paint;
}
.data-table {
    table-layout: auto !important;
}
.data-table th,
.data-table td,
.data-table .table-cell-value {
    max-width: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}
.data-table th { white-space: nowrap !important; }

/* Attendance is intentionally wide. Preserve normal words and use horizontal scroll. */
.attendance-table {
    width: 100% !important;
    min-width: 1180px !important;
    table-layout: auto !important;
}
.attendance-table th,
.attendance-table td,
.attendance-table .table-cell-value {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    min-width: 105px;
}
.attendance-table th:nth-child(1), .attendance-table td:nth-child(1) { min-width:55px; width:55px; }
.attendance-table th:nth-child(2), .attendance-table td:nth-child(2) { min-width:210px; }
.attendance-table th:nth-child(3), .attendance-table td:nth-child(3) { min-width:125px; }
.attendance-table th:nth-child(4), .attendance-table td:nth-child(4),
.attendance-table th:nth-child(5), .attendance-table td:nth-child(5),
.attendance-table th:nth-child(6), .attendance-table td:nth-child(6),
.attendance-table th:nth-child(7), .attendance-table td:nth-child(7) { min-width:145px; }
.attendance-table th:nth-child(8), .attendance-table td:nth-child(8) { min-width:180px; }

/* Employee list: keep service-termination reason readable and in a sensible column. */
.employee-table { min-width: 1120px !important; table-layout:auto !important; }
.employee-table th,
.employee-table td { white-space: nowrap !important; word-break:normal !important; overflow-wrap:normal !important; }
.employee-table .termination-reason {
    display:block;
    min-width:220px;
    max-width:360px;
    margin-top:6px;
    font-size:12px;
    line-height:1.7;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
}

/* V63 attendance selected employee chips: horizontal, compact and responsive */
.attendance-employee-picker{flex:1 1 100%;min-width:0;}
.attendance-employee-picker .selected-employees-chips{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    align-content:flex-start;
    justify-content:flex-start;
    gap:8px;
    width:100%;
    margin-top:10px;
}
.attendance-employee-picker .recipient-chip{
    display:inline-flex;
    flex:0 0 auto;
    width:auto;
    max-width:100%;
    align-items:center;
    white-space:nowrap;
    word-break:normal;
    overflow-wrap:normal;
    padding:7px 11px;
}
.attendance-employee-picker .recipient-chip button{flex:0 0 auto;}
@media (max-width:640px){
    .attendance-employee-picker .selected-employees-chips{gap:6px;}
    .attendance-employee-picker .recipient-chip{font-size:12px;padding:6px 9px;}
}

/* V64 - attendance picker occupies a real full-width row; chips flow horizontally. */
.filter-row > .attendance-employee-picker{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:100% !important;
}
.attendance-employee-picker .selected-employees-chips{
    display:flex !important;
    flex-flow:row wrap !important;
    width:100% !important;
    max-width:none !important;
    gap:8px !important;
    align-items:center !important;
}
.attendance-employee-picker .recipient-chip{
    display:inline-flex !important;
    flex:0 0 auto !important;
    width:max-content !important;
    max-width:100% !important;
    white-space:nowrap !important;
}

/* V64 - permanent employee administrative notes */
.employee-notes-modal{max-width:760px;max-height:90vh;overflow:auto;}
.employee-note-add{padding-bottom:14px;border-bottom:1px solid #e2e8f0;}
.employee-note-add textarea{width:100%;resize:vertical;margin-top:7px;}
.employee-notes-list{display:grid;gap:10px;margin-top:14px;}
.employee-note-card{border:1px solid #dbe3ea;border-radius:12px;padding:12px;background:#fff;}
.employee-note-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px;}
.employee-note-head time,.employee-note-author{font-size:12px;color:#64748b;white-space:nowrap;}
.employee-note-text{white-space:pre-wrap;word-break:normal;overflow-wrap:break-word;line-height:1.8;}
.employee-note-author{margin-top:8px;}
.employee-notes-empty{text-align:center;color:#64748b;padding:22px;}


/* ==========================================================
   Fardows HR v69 — balanced admin filter toolbars
   Keeps controls stable with sidebar expanded or collapsed.
   ========================================================== */
.admin-filter-toolbar .filter-row{width:100%;gap:14px!important;align-items:end!important;}
.admin-filter-toolbar .filter-group{margin:0!important;min-width:0!important;}
.admin-filter-toolbar .filter-group input,
.admin-filter-toolbar .filter-group select{width:100%!important;height:46px!important;min-height:46px!important;}
.admin-filter-toolbar .btn{min-height:46px!important;height:46px;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;}
.admin-filter-toolbar .filter-actions,
.admin-filter-toolbar .filter-actions-admin{margin:0!important;align-self:end;}

/* Employees: filters stay on one balanced line; actions use a compact 2x2 block. */
.employees-filter-toolbar .filter-row{grid-template-columns:minmax(230px,1.35fr) minmax(190px,1fr) minmax(160px,.8fr) minmax(270px,1.35fr)!important;}
.employees-filter-toolbar .filter-actions-admin{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;width:100%;min-width:0!important;}
.employees-filter-toolbar .filter-actions-admin .btn{width:100%;min-width:0!important;padding-inline:10px!important;}

/* Attendance: deliberate two-row layout instead of controls drifting with sidebar width. */
.attendance-filter-toolbar .filter-row{grid-template-columns:repeat(12,minmax(0,1fr))!important;}
.attendance-filter-toolbar .attendance-employee-picker{grid-column:span 4!important;}
.attendance-filter-toolbar .filter-row>.filter-group:nth-child(2){grid-column:span 3;}
.attendance-filter-toolbar .filter-row>.filter-group:nth-child(3),
.attendance-filter-toolbar .filter-row>.filter-group:nth-child(4){grid-column:span 2;}
.attendance-filter-toolbar .filter-row>.filter-group:nth-child(5){grid-column:span 3;}
.attendance-filter-toolbar .filter-row>.filter-group:nth-child(6){grid-column:span 3;}
.attendance-filter-toolbar .filter-row>.filter-group:nth-child(7){grid-column:span 3;}
.attendance-filter-toolbar .filter-row>.filter-group:nth-child(8){grid-column:span 6;}
.attendance-filter-toolbar .filter-row>.filter-group:nth-child(8){display:flex!important;gap:8px!important;align-items:end!important;justify-content:flex-start!important;}
.attendance-filter-toolbar .filter-row>.filter-group:nth-child(8) .btn{flex:1 1 0;min-width:0!important;}
.attendance-filter-toolbar .attendance-picker-line{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;}
.attendance-filter-toolbar .attendance-picker-line .btn{min-width:92px;}

/* Absence: date/department and actions share the available width cleanly. */
.absences-filter-toolbar .filter-row{grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) minmax(300px,1.15fr)!important;}
.absences-filter-toolbar .filter-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;width:100%;}
.absences-filter-toolbar .filter-actions .btn{width:100%;min-width:0!important;}

@media (max-width:1180px){
  .employees-filter-toolbar .filter-row{grid-template-columns:repeat(6,minmax(0,1fr))!important;}
  .employees-filter-toolbar .filter-row>.filter-group:nth-child(1),
  .employees-filter-toolbar .filter-row>.filter-group:nth-child(2){grid-column:span 2;}
  .employees-filter-toolbar .filter-row>.filter-group:nth-child(3){grid-column:span 2;}
  .employees-filter-toolbar .filter-actions-admin{grid-column:1/-1!important;grid-template-columns:repeat(4,minmax(0,1fr));}
  .attendance-filter-toolbar .attendance-employee-picker{grid-column:span 6!important;}
  .attendance-filter-toolbar .filter-row>.filter-group:nth-child(2){grid-column:span 6;}
  .attendance-filter-toolbar .filter-row>.filter-group:nth-child(3),
  .attendance-filter-toolbar .filter-row>.filter-group:nth-child(4),
  .attendance-filter-toolbar .filter-row>.filter-group:nth-child(5),
  .attendance-filter-toolbar .filter-row>.filter-group:nth-child(6){grid-column:span 3;}
  .attendance-filter-toolbar .filter-row>.filter-group:nth-child(7){grid-column:span 4;}
  .attendance-filter-toolbar .filter-row>.filter-group:nth-child(8){grid-column:span 8;}
}
@media (max-width:760px){
  .admin-filter-toolbar .filter-row{grid-template-columns:1fr!important;gap:11px!important;}
  .admin-filter-toolbar .filter-row>.filter-group,
  .attendance-filter-toolbar .attendance-employee-picker{grid-column:1/-1!important;}
  .employees-filter-toolbar .filter-actions-admin{grid-column:1/-1!important;grid-template-columns:repeat(2,minmax(0,1fr));}
  .attendance-filter-toolbar .filter-row>.filter-group:nth-child(8){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));}
  .attendance-filter-toolbar .filter-row>.filter-group:nth-child(8) .btn:last-child{grid-column:1/-1;}
  .absences-filter-toolbar .filter-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:430px){
  .employees-filter-toolbar .filter-actions-admin,
  .attendance-filter-toolbar .filter-row>.filter-group:nth-child(8),
  .absences-filter-toolbar .filter-actions{grid-template-columns:1fr!important;}
  .attendance-filter-toolbar .filter-row>.filter-group:nth-child(8) .btn:last-child{grid-column:auto;}
}

/* V76 authoritative widths — intentionally last to override legacy V62 rules. */
table.attendance-table{width:1260px!important;min-width:1260px!important;table-layout:fixed!important}
table.attendance-table th,table.attendance-table td{min-width:0!important;width:auto!important}
table.attendance-table col.attendance-col-index{width:56px!important}
table.attendance-table col.attendance-col-employee{width:200px!important}
table.attendance-table col.attendance-col-date{width:112px!important}
table.attendance-table col.attendance-col-status{width:175px!important}
table.attendance-table col.attendance-col-time{width:112px!important}
table.attendance-table col.attendance-col-overtime{width:135px!important}
table.attendance-table col.attendance-col-department{width:160px!important}

/* V77 authoritative mobile widths; intentionally after desktop widths. */
@media(max-width:768px){
  table.attendance-table{width:900px!important;min-width:900px!important}
  table.attendance-table col.attendance-col-index{width:42px!important}
  table.attendance-table col.attendance-col-employee{width:150px!important}
  table.attendance-table col.attendance-col-date{width:86px!important}
  table.attendance-table col.attendance-col-status{width:132px!important}
  table.attendance-table col.attendance-col-time{width:78px!important}
  table.attendance-table col.attendance-col-overtime{width:88px!important}
  table.attendance-table col.attendance-col-department{width:90px!important}
  table.attendance-table th,table.attendance-table td{padding:9px 6px!important;font-size:12px!important;line-height:1.3!important}
  table.attendance-table th{white-space:normal!important;overflow-wrap:normal!important}
}