/* =====================================================================
   DGA PLATFORMS CODE — FORMAL LAYER (كود المنصات: الطبقة الرسمية)
   يُحمَّل بعد أنماط الصفحات لتوحيد الألوان والبطاقات والبيانات على مستوى النظام.
   ===================================================================== */

/* ---------- Typography & data ---------- */
html { font-size: 14px; }
body { color: var(--dga-neutral-700); font-variant-numeric: tabular-nums; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: 0; }
.page-title h1, .card-title, .section-title, .modal-title, .settings-card-title, .info-card-title, .section-header h2 { color: var(--dga-neutral-900) !important; font-weight: 600 !important; }
/* text placed on dark or coloured surfaces stays light */
[style*="color:white"] :is(h1,h2,h3,h4,h5,h6,p,span,strong,small,div,label), [style*="color: white"] :is(h1,h2,h3,h4,h5,h6,p,span,strong,small,div,label), [style*="color:#fff"] :is(h1,h2,h3,h4,h5,h6,p,span,strong,small,div,label), [style*="color: #fff"] :is(h1,h2,h3,h4,h5,h6,p,span,strong,small,div,label) { color: inherit; }
:is(.report-header, .title-bar, .rpt-title-bar, .pdf-title-bar, .session-date-box, .time-box, .net-profit-box, .brand-panel, .btn, .toolbar-btn, .badge, .nav-cta) :is(h1,h2,h3,h4,h5,h6,p,span,strong,small,div) { color: inherit; }
.report-header, .title-bar, .rpt-title-bar, .pdf-title-bar, .session-date-box, .time-box, .net-profit-box { color: #fff; }
.page-title h1 { font-size: 1.2rem !important; }
.page-title p, .section-header p, .settings-card-desc, .dash-card-label, .stat-label, .stat-box .label, .info-card .label, .info-card h4, .hero-stat .label, .activity-desc, .notif-desc, .search-result-subtitle, .qa-desc, .document-meta { color: var(--dga-neutral-500) !important; font-weight: 400; }
.stat-value, .dash-card-value, .stat-box .value, .info-card .value, .info-card p, .hero-stat .value, .quick-stat .value, .kpi-value { color: var(--dga-neutral-900) !important; font-weight: 600 !important; }
.stat-value { font-size: 1.5rem; }
.dash-card-value { font-size: 1.75rem !important; }
.stat-box.primary .value, .stat-box.success .value, .stat-box.warning .value, .stat-box.danger .value, .stat-box.info .value { color: var(--dga-neutral-900) !important; }
.stat-box.success .value { color: var(--dga-green-800) !important; }
.stat-box.danger .value { color: var(--dga-red-800) !important; }
.stat-box.warning .value { color: var(--dga-yellow-800) !important; }
.text-muted, small, .small { color: var(--dga-neutral-500); }
a { color: inherit; }
.form-label, label { color: var(--dga-neutral-700); font-weight: 500; }
.form-control, input.form-control, select.form-control, textarea.form-control { color: var(--dga-neutral-900); border-color: var(--dga-neutral-300); }
.section-title i, .card-title i, .page-title h1 i, .modal-title i, .section-header h2 i, .detail-section h5 i, .chart-box h5 i, .report-title i, .table-top-title i, .rpt-title i, h4 i, h5 i { color: var(--dga-primary-700) !important; }

/* ---------- Cards & surfaces ---------- */
.card, .dash-card, .section-card, .stat-card, .filters-card, .settings-card, .settings-content, .settings-sidebar, .settings-nav, .list-group, .detail-section, .session-info-card, .table-section, .filters-wrapper, .filters-container, .info-card, .stat-box, .quick-stat, .report-card, .chart-box, .task-card, .voucher-card, .poa-card, .rcard, .timeline-section, .sessions-section, .tabs-container, .notif-panel, .search-results, .search-dropdown, .quick-search, .stats .stat-item, .workflow-step, .summary, .notes, .notice, .question, .box {
  box-shadow: none !important;
  border: 1px solid var(--dga-neutral-200);
  border-radius: 8px;
  background-color: var(--dga-white);
}
.stat-box, .info-card, .detail-section, .session-info-card { background-color: var(--dga-neutral-25) !important; }
.card-header { background: var(--dga-white) !important; }
.card-body, .section-card, .dash-card { color: var(--dga-neutral-700); }
.modal-dialog { border: 1px solid var(--dga-neutral-200); box-shadow: var(--dga-shadow-lg) !important; }
.modal { background: rgba(12, 17, 27, 0.5) !important; }

/* ---------- Icon chips: one restrained style everywhere ---------- */
.stat-icon, .dash-card-icon, .activity-icon, .search-result-icon, .notif-icon, .qa-icon, .hero-icon, .settings-card-icon, .document-icon, .document-list-icon, .notification-icon, .empty-icon, .info-card-icon, .stat-card .icon, .stat-card .stat-icon, .consult-icon, .saudi-item-icon, .card-icon, .rpt-icon, .report-icon, .quick-action i {
  background: var(--dga-primary-50) !important;
  color: var(--dga-primary-700) !important;
  border: 1px solid var(--dga-primary-100);
  border-radius: 8px !important;
}
.stat-danger .stat-icon, .dash-card-icon.red, .notif-icon.task, .stat-card .icon.red { background: var(--dga-red-50) !important; color: var(--dga-red-700) !important; border-color: var(--dga-red-100); }
.stat-warning .stat-icon, .dash-card-icon.yellow, .stat-card .icon.amber, .notif-icon.session { background: var(--dga-yellow-50) !important; color: var(--dga-yellow-700) !important; border-color: var(--dga-yellow-100); }
.stat-success .stat-icon, .dash-card-icon.green, .stat-card .icon.green, .notif-icon.payment { background: var(--dga-green-50) !important; color: var(--dga-green-700) !important; border-color: var(--dga-green-100); }
.dash-card-trend, .trend { border-radius: 4px !important; font-weight: 500 !important; }

/* ---------- Page heroes / banners: white with primary accent ---------- */
.dashboard-hero, .page-hero, .hero-banner, .welcome-banner, .page-banner {
  background: var(--dga-white) !important;
  color: var(--dga-neutral-900) !important;
  border: 1px solid var(--dga-neutral-200);
  border-right: 4px solid var(--dga-primary-600);
  border-radius: 8px !important;
  padding: 24px 28px !important;
}
.dashboard-hero::before, .page-hero::before, .dashboard-hero::after, .page-hero::after { display: none !important; }
.dashboard-hero h1, .page-hero h1, .hero-text h1, .hero-content h1 { color: var(--dga-neutral-900) !important; font-size: 1.35rem !important; }
.dashboard-hero p, .page-hero p, .hero-text p, .hero-content p { color: var(--dga-neutral-500) !important; opacity: 1 !important; }
.hero-stats { gap: 16px !important; margin-top: 20px !important; }
.hero-stat { background: var(--dga-neutral-25) !important; border: 1px solid var(--dga-neutral-200); color: var(--dga-neutral-900) !important; padding: 16px 24px !important; }
.hero-stat .value { color: var(--dga-primary-700) !important; font-size: 1.75rem !important; }
.page-hero .btn, .dashboard-hero .btn { background: var(--dga-primary-600); color: #fff; }
.page-hero .btn.outline, .page-hero .btn-outline, .page-hero .btn-light { background: var(--dga-white); color: var(--dga-neutral-800); border: 1px solid var(--dga-neutral-300); }

/* ---------- Colored headers inside panels ---------- */
.notif-header, .voucher-header, .slip-header, .sessions-table th { background: var(--dga-neutral-50) !important; color: var(--dga-neutral-900) !important; border-bottom: 1px solid var(--dga-neutral-200); }
.notif-header a, .notif-footer a { color: var(--dga-primary-700) !important; }
.notif-item.unread { background: var(--dga-primary-25) !important; border-right: 3px solid var(--dga-primary-600) !important; }
.notif-btn:hover, .quick-search:focus { border-color: var(--dga-primary-600) !important; }
.quick-search:focus { box-shadow: var(--dga-focus-ring) !important; }

/* ---------- In-page navigation (settings nav, tabs, filter pills) ---------- */
.settings-nav .nav-item.active, .settings-menu-item.active, .settings-nav-item.active { background: var(--dga-primary-50) !important; color: var(--dga-primary-700) !important; border-color: var(--dga-primary-200) !important; font-weight: 600; }
.emp-tab.active, .finance-tab.active, .req-tab.active, .view-btn.active { background: var(--dga-primary-600) !important; color: #fff !important; border-color: var(--dga-primary-600) !important; }
.tab-btn.active { background: transparent !important; color: var(--dga-primary-700) !important; }
.count-badge, .rpt-title .count, .today-tag { background: var(--dga-primary-50) !important; color: var(--dga-primary-700) !important; border: 1px solid var(--dga-primary-200); border-radius: 4px !important; font-weight: 500; }

/* ---------- Badges: tinted, semantic, never solid ---------- */
.badge { border-radius: 4px !important; font-weight: 500 !important; }
.badge[style*="#069454"], .badge[style*="#067647"], .badge[style*="#17b169"], .badge[style*="#25935f"], .badge[style*="#1b8354"], .badge[style*="#dcfae6"], .badge[style*="#ecfdf3"] { background: var(--dga-green-50) !important; color: var(--dga-green-700) !important; border: 1px solid var(--dga-green-200) !important; }
.badge[style*="#d92c20"], .badge[style*="#f04437"], .badge[style*="#b42318"], .badge[style*="#fee4e2"], .badge[style*="#fef3f2"] { background: var(--dga-red-50) !important; color: var(--dga-red-700) !important; border: 1px solid var(--dga-red-200) !important; }
.badge[style*="#dc6803"], .badge[style*="#f79009"], .badge[style*="#b54707"], .badge[style*="#fef0c7"], .badge[style*="#fffaeb"] { background: var(--dga-yellow-50) !important; color: var(--dga-yellow-700) !important; border: 1px solid var(--dga-yellow-200) !important; }
.badge[style*="#156fee"], .badge[style*="#2e90fa"], .badge[style*="#175cd3"], .badge[style*="#d1e9ff"], .badge[style*="#eff8ff"] { background: var(--dga-blue-50) !important; color: var(--dga-blue-700) !important; border: 1px solid var(--dga-blue-200) !important; }
.badge[style*="#80519f"], .badge[style*="#6d428f"], .badge[style*="#f2e9f5"], .badge[style*="#f9f5fa"] { background: var(--dga-lavender-50) !important; color: var(--dga-lavender-600) !important; border: 1px solid var(--dga-lavender-200) !important; }
.badge[style*="#9da4ae"], .badge[style*="#6c727e"], .badge[style*="#1f2a37"], .badge[style*="#4d5761"], .badge[style*="#e5e7eb"], .badge[style*="#f3f4f6"] { background: var(--dga-neutral-100) !important; color: var(--dga-neutral-700) !important; border: 1px solid var(--dga-neutral-200) !important; }

/* ---------- Tables ---------- */
table th, .data-table th { background: var(--dga-neutral-50) !important; color: var(--dga-neutral-600) !important; font-weight: 600 !important; font-size: 0.8rem; border-bottom: 1px solid var(--dga-neutral-200) !important; }
table td, .data-table td { color: var(--dga-neutral-700); border-bottom: 1px solid var(--dga-neutral-100); }
table td strong, .data-table td strong, .data-table td b { color: var(--dga-neutral-900); font-weight: 600; }
tbody tr:hover, .data-table tbody tr:hover { background: var(--dga-neutral-25) !important; }
.table-responsive { border: 1px solid var(--dga-neutral-200); border-radius: 8px; }
.card-body.p-0 .table-responsive, .card .table-responsive { border: none; border-radius: 0; }

/* ---------- Sidebar: dark, formal, high-contrast ---------- */
.sidebar { background: var(--dga-neutral-900) !important; border-left: 1px solid var(--dga-neutral-800) !important; box-shadow: none !important; }
.sidebar-header { border-bottom: 1px solid rgba(255,255,255,0.1) !important; background: transparent !important; }
.sidebar .logo, .sidebar-brand h2, .sidebar .logo span { color: #fff !important; font-weight: 600; font-size: 1rem; }
.sidebar .logo i, .sidebar-brand span { color: var(--dga-primary-300) !important; }
.sidebar-logo { background: var(--dga-primary-600) !important; color: #fff !important; }
.sidebar-close { background: rgba(255,255,255,0.1) !important; color: #fff !important; }
.nav-section-title { color: rgba(255,255,255,0.5) !important; }
.sidebar-nav .nav-item, .sidebar .nav-link { color: rgba(255,255,255,0.88) !important; font-weight: 500; font-size: 0.93rem; }
.sidebar-nav .nav-item i, .sidebar .nav-link i { color: rgba(255,255,255,0.72); }
.sidebar-nav .nav-item:hover, .sidebar .nav-link:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; }
.sidebar-nav .nav-item.active, .sidebar .nav-link.active { background: var(--dga-primary-600) !important; color: #fff !important; box-shadow: none !important; font-weight: 600; }
.sidebar-nav .nav-item.active i, .sidebar .nav-link.active i { color: #fff; }
.nav-section-header { color: #fff !important; }
.nav-section-header:hover { background: rgba(255,255,255,0.08) !important; }
.nav-section-header .section-title { color: #fff !important; font-weight: 500; font-size: 0.93rem; }
.nav-section-header .section-title i { color: rgba(255,255,255,0.75) !important; }
.nav-section-header .section-arrow { color: rgba(255,255,255,0.5) !important; }
.nav-section-items .nav-item.sub { color: rgba(255,255,255,0.78) !important; border-right: 2px solid rgba(255,255,255,0.12) !important; }
.nav-section-items .nav-item.sub:hover { color: #fff !important; background: rgba(255,255,255,0.06) !important; border-right-color: rgba(255,255,255,0.35) !important; }
.nav-section-items .nav-item.sub.active { background: rgba(27, 131, 84, 0.35) !important; color: #fff !important; border-right-color: var(--dga-primary-400) !important; box-shadow: none !important; }
.sidebar-nav .nav-item .nav-badge { background: var(--dga-red-600); color: #fff; }
.sidebar-footer { background: rgba(0,0,0,0.2) !important; border-top: 1px solid rgba(255,255,255,0.1) !important; }
.user-info .user-avatar { background: var(--dga-primary-600) !important; color: #fff; }
.user-info .user-name { color: #fff !important; }
.user-info .user-role { color: rgba(255,255,255,0.55) !important; }
.logout-btn { background: rgba(217, 44, 32, 0.2) !important; color: #fca19b !important; border: 1px solid rgba(217, 44, 32, 0.3); }
.logout-btn:hover { background: var(--dga-red-600) !important; color: #fff !important; }
.install-app-sidebar { border-top: 1px solid rgba(255,255,255,0.1) !important; }
.install-app-btn { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.15) !important; }
.install-app-btn:hover { background: rgba(255,255,255,0.1) !important; border-color: var(--dga-primary-400) !important; }
.install-btn-icon { background: var(--dga-primary-600) !important; color: #fff !important; border: none; }
.install-btn-text strong { color: #fff !important; }
.install-btn-text small { color: rgba(255,255,255,0.6) !important; }
.install-app-btn > i { color: var(--dga-primary-300) !important; }
.sidebar-overlay { background: rgba(12, 17, 27, 0.5) !important; }
html.lang-en .sidebar { box-shadow: none !important; border-left: none !important; border-right: 1px solid var(--dga-neutral-800) !important; }

/* ---------- Header ---------- */
.main-header { background: var(--dga-white) !important; border-bottom: 1px solid var(--dga-neutral-200) !important; box-shadow: none !important; }
.user-btn, .notification-btn, .notif-btn, .sidebar-toggle { background: var(--dga-white) !important; border: 1px solid var(--dga-neutral-300) !important; color: var(--dga-neutral-700); }
.user-avatar { background: var(--dga-primary-600) !important; color: #fff !important; }
.dropdown-item { color: var(--dga-neutral-700); }
.dropdown-item:hover { background: var(--dga-neutral-50); color: var(--dga-neutral-900); }
.lang-switch, .lang-toggle, #langToggle { background: var(--dga-white) !important; color: var(--dga-neutral-800) !important; border: 1px solid var(--dga-neutral-300) !important; border-radius: 8px !important; }

/* ---------- Mobile bottom nav ---------- */
.bottom-nav { background: var(--dga-white) !important; border-top: 1px solid var(--dga-neutral-200) !important; box-shadow: none !important; }
.bottom-nav a { color: var(--dga-neutral-500) !important; }
.bottom-nav a.active { color: var(--dga-primary-700) !important; }

/* ---------- Buttons: flat & consistent ---------- */
.btn, button.btn, .toolbar-btn, .print-btn, .save-btn, .submit-btn, .link-btn, .consult-btn { box-shadow: none !important; border-radius: 8px !important; font-weight: 500 !important; }
.btn:hover, .toolbar-btn:hover { transform: none !important; }
.toolbar-btn.primary, .consult-btn.primary, .link-btn.primary, .submit-btn, .save-btn { background: var(--dga-primary-600) !important; color: #fff !important; }
.toolbar-btn.primary:hover, .consult-btn.primary:hover, .link-btn.primary:hover, .submit-btn:hover, .save-btn:hover { background: var(--dga-primary-700) !important; }

/* ---------- Login / landing decorations off ---------- */
.bg-shapes { display: none !important; }
.brand-logo { animation: none !important; border-radius: 8px !important; background: rgba(255,255,255,0.12) !important; border: 1px solid rgba(255,255,255,0.25) !important; }
.brand-feature { border-radius: 8px !important; }
.brand-panel { background: var(--dga-primary-800) !important; }

/* ---------- Misc ---------- */
.quick-action, .quick-action-card { border-width: 1px !important; }
.quick-action:hover, .quick-action-card:hover { border-color: var(--dga-primary-300) !important; background: var(--dga-primary-25) !important; }
.empty-state i, .empty-icon i { color: var(--dga-neutral-400) !important; opacity: 1 !important; }
.pagination-btn.active { background: var(--dga-primary-600) !important; color: #fff !important; }
.calendar-cell.today { background: var(--dga-primary-25) !important; border-color: var(--dga-primary-600) !important; }
hr { border: 0; border-top: 1px solid var(--dga-neutral-200); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--dga-neutral-300); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
@media print { .sidebar, .bottom-nav { display: none !important; } }

/* ---------- Login page: trial box & install card (neutral, formal) ---------- */
.trial-info { background: var(--dga-neutral-25) !important; border: 1px solid var(--dga-neutral-200) !important; border-radius: 8px !important; }
.trial-info h4 { color: var(--dga-neutral-900) !important; }
.trial-info li { color: var(--dga-neutral-600) !important; }
.trial-info li i, .trial-info h4 i { color: var(--dga-primary-700) !important; }
.btn-trial { background: var(--dga-white) !important; color: var(--dga-primary-700) !important; border: 1px solid var(--dga-primary-600) !important; box-shadow: none !important; }
.btn-trial:hover { background: var(--dga-primary-50) !important; }
.install-app-section, .install-app-card { background: var(--dga-white) !important; border: 1px solid var(--dga-neutral-200) !important; border-radius: 8px !important; box-shadow: none !important; }
.install-app-card { border: none !important; }
.install-icon { background: var(--dga-primary-50) !important; color: var(--dga-primary-700) !important; border: 1px solid var(--dga-primary-100) !important; border-radius: 8px !important; box-shadow: none !important; }
.install-icon::before, .install-icon::after { display: none !important; }
.install-icon i { color: var(--dga-primary-700) !important; }
.install-content h4 { color: var(--dga-neutral-900) !important; }
.install-content p { color: var(--dga-neutral-500) !important; }
.pwa-install-btn { background: var(--dga-primary-600) !important; color: #fff !important; box-shadow: none !important; border-radius: 8px !important; }
.pwa-install-btn:hover { background: var(--dga-primary-700) !important; }
.login-footer p { color: var(--dga-neutral-500) !important; }

/* ---------- Case detail header: white card with primary accent ---------- */
.case-header { background: var(--dga-white) !important; color: var(--dga-neutral-900) !important; border: 1px solid var(--dga-neutral-200); border-right: 4px solid var(--dga-primary-600); padding: 24px 28px !important; }
.case-header::before, .case-header::after { display: none !important; }
.case-back { color: var(--dga-neutral-500) !important; }
.case-back:hover { color: var(--dga-primary-700) !important; }
.case-icon { background: var(--dga-primary-50) !important; color: var(--dga-primary-700) !important; border: 1px solid var(--dga-primary-100) !important; }
.case-title h1 { color: var(--dga-neutral-900) !important; font-size: 1.35rem !important; }
.case-title .case-num { background: var(--dga-neutral-100) !important; color: var(--dga-neutral-700) !important; }
.case-meta-item { background: var(--dga-neutral-25) !important; border: 1px solid var(--dga-neutral-200) !important; }
.case-meta-item:hover { background: var(--dga-neutral-50) !important; }
.case-meta-item .meta-icon { background: var(--dga-primary-50) !important; color: var(--dga-primary-700) !important; }
.case-meta-item .meta-label { color: var(--dga-neutral-500) !important; }
.case-meta-item .meta-value { color: var(--dga-neutral-900) !important; }
.case-status-badge { border-radius: 4px !important; font-weight: 500 !important; }
.case-status-badge.active, .case-status-badge.won { background: var(--dga-green-50) !important; color: var(--dga-green-700) !important; border-color: var(--dga-green-200) !important; }
.case-status-badge.pending { background: var(--dga-yellow-50) !important; color: var(--dga-yellow-700) !important; border-color: var(--dga-yellow-200) !important; }
.case-status-badge.closed { background: var(--dga-neutral-100) !important; color: var(--dga-neutral-700) !important; border-color: var(--dga-neutral-200) !important; }
.case-status-badge.lost { background: var(--dga-red-50) !important; color: var(--dga-red-700) !important; border-color: var(--dga-red-200) !important; }
.header-action-btn { background: var(--dga-white) !important; color: var(--dga-neutral-800) !important; border: 1px solid var(--dga-neutral-300) !important; font-weight: 500 !important; }
.header-action-btn:hover { background: var(--dga-neutral-50) !important; transform: none !important; }
.header-action-btn.primary { background: var(--dga-primary-600) !important; color: #fff !important; border-color: var(--dga-primary-600) !important; }
.header-action-btn.primary:hover { background: var(--dga-primary-700) !important; }
.tabs-container .tab-btn.active, .tabs .tab-btn.active { background: var(--dga-primary-50) !important; color: var(--dga-primary-700) !important; }
.tab-btn.active .badge-count { background: var(--dga-primary-100) !important; color: var(--dga-primary-800) !important; }

/* ---------- Trial banner ---------- */
.trial-banner { position: fixed; bottom: 20px; left: 20px; z-index: 9999; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--dga-neutral-900); color: #fff; border: 1px solid var(--dga-neutral-700); border-radius: 8px; box-shadow: var(--dga-shadow-lg); font-family: var(--font-family); }
.trial-banner-icon { font-size: 1.2rem; color: var(--dga-primary-300); }
.trial-banner-text { display: flex; flex-direction: column; line-height: 1.35; }
.trial-banner-text strong { font-size: 0.9rem; font-weight: 600; }
.trial-banner-text span { font-size: 0.78rem; opacity: 0.8; }
.trial-banner-close { width: 32px; height: 32px; margin-right: 4px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); color: #fff; border-radius: 4px; cursor: pointer; font-size: 0.9rem; }
.trial-banner-close:hover { background: var(--dga-primary-600); border-color: var(--dga-primary-600); }
html.lang-en .trial-banner { left: auto; right: 20px; }

/* =====================================================================
   MOBILE (كود المنصات: أهداف لمس 44px، خط 16px في الحقول، مسافات مضبوطة)
   ===================================================================== */
@media (max-width: 768px) {
  html { font-size: 14px; }
  .page-content { padding: 14px !important; }
  .btn, .toolbar-btn, .btn-icon, .pagination-btn, .quick-view-btn, .tab-btn, .header-action-btn { min-height: 44px !important; }
  .btn-sm { min-height: 40px !important; }
  .form-control, input.form-control, select.form-control, textarea.form-control, .quick-search, .searchable-select-input { min-height: 44px !important; font-size: 16px !important; }
  .form-label { font-size: 0.9rem; }
  .card, .dash-card, .section-card, .stat-card, .filters-card { border-radius: 8px !important; }
  .card-header { padding: 14px 16px !important; }
  .card-body { padding: 16px !important; }
  .stats-grid { gap: 10px !important; }
  .stat-card { padding: 14px !important; gap: 10px !important; }
  .stat-icon { width: 40px !important; height: 40px !important; }
  .stat-icon i { font-size: 1.1rem !important; }
  .stat-value { font-size: 1.3rem !important; }
  .dashboard-hero, .page-hero, .case-header { padding: 16px !important; border-right-width: 3px !important; }
  .dashboard-hero h1, .page-hero h1, .case-title h1 { font-size: 1.1rem !important; }
  .hero-stats { gap: 8px !important; margin-top: 14px !important; }
  .hero-stat { padding: 12px !important; text-align: center; }
  .hero-stat .value { font-size: 1.3rem !important; }
  .main-header { min-height: 56px; padding: 8px 12px !important; }
  .sidebar-toggle { width: 44px !important; height: 44px !important; min-width: 44px !important; }
  .user-btn, .notification-btn, .notif-btn { min-height: 40px; }
  .modal { padding: 0 !important; align-items: flex-end !important; }
  .modal-dialog { max-width: 100% !important; margin: 0 !important; border-radius: 12px 12px 0 0 !important; max-height: 94vh !important; }
  .modal-header { border-radius: 12px 12px 0 0 !important; }
  .modal-footer { border-radius: 0 !important; flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 auto; }
  .bottom-nav { min-height: 60px; padding-bottom: env(safe-area-inset-bottom); }
  .bottom-nav a { min-height: 56px; font-size: 0.7rem; }
  .bottom-nav a i { font-size: 1.25rem; }
  /* trial banner: slim one-line strip above the bottom nav */
  .trial-banner { bottom: calc(64px + env(safe-area-inset-bottom)) !important; left: 10px !important; right: 10px !important; padding: 6px 10px 6px 12px !important; gap: 8px !important; border-radius: 8px !important; min-height: 40px; justify-content: space-between; }
  .trial-banner-icon { font-size: 1rem !important; }
  .trial-banner-text { flex: 1; flex-direction: row !important; align-items: baseline; gap: 6px; white-space: nowrap; overflow: hidden; }
  .trial-banner-text strong { font-size: 0.82rem !important; }
  .trial-banner-text span { font-size: 0.78rem !important; }
  .trial-banner-text span::before { content: '·'; margin-left: 6px; opacity: 0.6; }
  .trial-banner-close { width: 30px !important; height: 30px !important; margin: 0 !important; flex-shrink: 0; }
  .page-content { padding-bottom: 60px !important; }
  .toast-container { left: 12px !important; right: 12px !important; top: 12px !important; }
  .toast { min-width: 0 !important; max-width: 100% !important; }
  .tabs { gap: 0 !important; }
  .tab-btn { padding: 10px 14px !important; font-size: 0.85rem !important; }
  .sidebar { width: min(300px, 86vw) !important; }
  .sidebar-nav .nav-item, .nav-section-header { min-height: 46px; }
  .nav-section-items .nav-item.sub { min-height: 42px; }
  table th, table td, .data-table th, .data-table td { padding: 10px 12px !important; font-size: 0.85rem; }
  .dropdown-menu { min-width: 200px; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hero-stats { display: grid !important; grid-template-columns: repeat(2, 1fr); }
  .hero-stat { min-width: 0 !important; }
  .dashboard-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .dash-card { padding: 14px !important; }
  .dash-card-icon { width: 40px !important; height: 40px !important; font-size: 1rem !important; }
  .dash-card-value { font-size: 1.3rem !important; }
  .page-title h1 { font-size: 1rem !important; }
}

/* ---------- Mobile: inputs full width, buttons side by side ---------- */
@media (max-width: 768px) {
  .filters-row, .filters-bar, .filters-wrapper, .filters-container, .filters-card .filters-row, .toolbar, .page-toolbar, .filter-bar, .toolbar-section, .toolbar-actions, .users-filter-bar, .search-filters, .btn-group, .header-actions, .hero-actions, .case-header-actions, .form-actions, .action-buttons, .page-actions, .card-actions, .modal-footer {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: stretch !important; gap: 8px !important; width: 100% !important;
  }
  .users-filter-bar { display: grid !important; grid-template-columns: 1fr !important; }
  /* fields, selects and groups: one per row */
  .filter-group, .filter-box, .filter-item, .search-box, .filters-row > :not(.btn):not(button):not(.btn-group):not(a), .filters-bar > :not(.btn):not(button):not(a), .toolbar > :not(.btn):not(button):not(.btn-group):not(a), .page-toolbar > :not(.btn):not(button):not(.btn-group):not(a), .toolbar-section > :not(.btn):not(button):not(.btn-group):not(a), .filter-bar > :not(.btn):not(button):not(a) {
    flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box !important;
  }
  /* buttons: horizontal, sharing the row */
  .filters-row .btn, .filters-bar .btn, .filters-wrapper .btn, .filters-container .btn, .toolbar .btn, .page-toolbar .btn, .toolbar-section .btn, .toolbar-actions .btn, .toolbar-btn, .filter-btn, .filters-bar .filter-tab, .btn-group .btn, .header-actions .btn, .hero-actions .btn, .case-header-actions .header-action-btn, .form-actions .btn, .action-buttons .btn, .page-actions .btn, .card-actions .btn, .modal-footer .btn, .filters-row > .btn-group {
    flex: 0 1 auto !important; width: auto !important; min-width: calc(50% - 4px) !important; max-width: 100% !important; margin: 0 !important; justify-content: center !important; white-space: nowrap !important;
  }
  .btn-group { width: 100% !important; }
  .btn-group .btn, .btn-group .toolbar-btn { flex: 1 1 0 !important; min-width: 0 !important; }
  .filter-group label { display: block !important; margin-bottom: 4px !important; font-size: 0.8rem !important; color: var(--dga-neutral-600) !important; }
  .filter-group .form-control, .filter-group select, .filters-row select, .filters-row input, .filter-box select, .filter-box input, .filters-bar select, .filters-bar input, .toolbar select, .toolbar input {
    width: 100% !important; min-height: 44px !important; height: 44px !important; font-size: 16px !important; border: 1px solid var(--dga-neutral-300) !important; border-radius: 8px !important; background-color: #fff !important;
  }
  .filter-box { justify-content: flex-start !important; }
  .filter-tabs, .quick-views, .view-toggle, .req-tabs, .emp-tabs, .finance-tabs { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .filter-tabs > *, .quick-views > *, .req-tabs > *, .emp-tabs > *, .finance-tabs > * { width: 100% !important; text-align: center; justify-content: center; }
  .modal-footer .btn { flex: 1 1 0 !important; }
}

/* ---------- Search fields (dashboard quick search + header search): DGA search input ---------- */
.quick-search-container { position: relative; }
.quick-search { height: 40px; min-height: 40px; padding: 8px 40px 8px 14px !important; border: 1px solid var(--dga-neutral-300) !important; border-radius: 8px !important; font-size: 0.9rem !important; background: #fff !important; color: var(--dga-neutral-900); box-shadow: none; }
.quick-search::placeholder { color: var(--dga-neutral-400); }
.quick-search:hover { border-color: var(--dga-neutral-400) !important; }
.quick-search:focus { border-color: var(--dga-primary-600) !important; box-shadow: var(--dga-focus-ring) !important; outline: none; }
.quick-search-icon { position: absolute; right: 14px !important; left: auto !important; top: 50%; transform: translateY(-50%); color: var(--dga-neutral-500) !important; font-size: 1rem !important; line-height: 1; pointer-events: none; }
.quick-search-container:focus-within .quick-search-icon { color: var(--dga-primary-600) !important; }
html.lang-en .quick-search { padding: 8px 14px 8px 40px !important; }
html.lang-en .quick-search-icon { right: auto !important; left: 14px !important; }
.header-search input { padding: 9px 40px 9px 14px !important; border: 1px solid var(--dga-neutral-300) !important; border-radius: 8px !important; background: #fff !important; }
.header-search i { right: 14px !important; left: auto !important; color: var(--dga-neutral-500) !important; }
html.lang-en .header-search input { padding: 9px 14px 9px 40px !important; }
html.lang-en .header-search i { right: auto !important; left: 14px !important; }
.search-results { border: 1px solid var(--dga-neutral-200) !important; box-shadow: var(--dga-shadow-lg) !important; border-radius: 8px !important; margin-top: 6px !important; }
.search-category { background: var(--dga-neutral-50) !important; color: var(--dga-neutral-500) !important; font-weight: 600 !important; font-size: 0.75rem !important; padding: 8px 16px !important; }
.search-result-item { padding: 10px 16px !important; }
.search-result-item:hover { background: var(--dga-neutral-25) !important; }
.search-result-title { color: var(--dga-neutral-900) !important; font-weight: 500 !important; }
@media (max-width: 768px) {
  .mobile-search-section .quick-search { height: 44px; min-height: 44px !important; padding: 8px 42px 8px 14px !important; font-size: 16px !important; }
  .mobile-search-section .quick-search-icon { right: 14px !important; left: auto !important; }
}

/* ---------- Mobile: tab strips wrap instead of scrolling off-screen ---------- */
@media (max-width: 768px) {
  .tabs, .tabs-container, .tab-nav, .page-tabs { display: flex !important; flex-wrap: wrap !important; overflow: visible !important; gap: 6px !important; padding: 6px !important; }
  .tabs .tab-btn, .tabs-container .tab-btn, .tab-nav .tab-btn, .page-tabs .tab-btn { flex: 1 1 calc(33.333% - 6px) !important; min-width: calc(33.333% - 6px) !important; justify-content: center !important; padding: 10px 8px !important; font-size: 0.82rem !important; white-space: nowrap !important; }
  .tab-btn .badge-count, .tab-btn .cnt { margin-right: 4px; }
}

/* ---------- Mobile: every tappable control at least 40px (DGA touch targets) ---------- */
@media (max-width: 768px) {
  button:not(.modal-close):not(.trial-banner-close):not(.sidebar-close):not(.toggle-eye):not(.searchable-select-clear):not(.notif-close):not(.toast button), [role="button"], .emp-tab, .finance-tab, .req-tab, .filter-tab, .view-btn, .tab-btn, .filter-btn, .quick-view-btn, .lang-switch, .lang-toggle, #langToggle, .dropdown-item, .user-btn { min-height: 40px !important; }
  .emp-tab, .finance-tab, .req-tab, .filter-tab, .view-btn { padding: 8px 12px !important; font-size: 0.85rem !important; }
  .btn-icon, .data-table-actions .btn-icon, .action-btn { width: 40px !important; height: 40px !important; min-height: 40px !important; }
  a.btn, .btn { min-height: 44px !important; }
}

/* ---------- Calendar page: formal header + compact mobile grid ---------- */
.calendar-header { background: var(--dga-white) !important; color: var(--dga-neutral-900) !important; border-bottom: 1px solid var(--dga-neutral-200); }
.calendar-title { color: var(--dga-neutral-900) !important; font-weight: 600 !important; }
.calendar-nav button { background: var(--dga-white) !important; border: 1px solid var(--dga-neutral-300) !important; color: var(--dga-neutral-700) !important; border-radius: 8px !important; }
.calendar-nav button:hover { background: var(--dga-neutral-50) !important; border-color: var(--dga-neutral-400) !important; }
.calendar-day-header { background: var(--dga-neutral-50) !important; color: var(--dga-neutral-600) !important; font-weight: 600 !important; }
.calendar-day.today { background: var(--dga-primary-25) !important; }
.calendar-day.today .day-number { background: var(--dga-primary-600) !important; }
.chart-box, .chart-container { min-width: 0 !important; max-width: 100% !important; overflow: hidden; }
.chart-container canvas { max-width: 100% !important; }
.toggle-eye { min-width: 36px !important; min-height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
@media (max-width: 768px) {
  .calendar-day { min-height: 54px !important; padding: 4px !important; font-size: 0.8rem !important; }
  .calendar-day-header { padding: 8px 2px !important; font-size: 0.72rem !important; }
  .calendar-day .day-number { width: 24px !important; height: 24px !important; line-height: 24px !important; font-size: 0.8rem !important; }
  .calendar-wrapper, .calendar-grid { max-width: 100% !important; overflow: hidden !important; }
  .calendar-header { padding: 12px !important; }
  .calendar-title { font-size: 1rem !important; }
}

/* ---------- Layout widths: never use 100vw (it includes the scrollbar and shifts the page) ---------- */
.app-container { width: 100% !important; max-width: 100% !important; }
body .app-container .main-content, body .main-content { width: calc(100% - var(--sidebar-width)) !important; max-width: calc(100% - var(--sidebar-width)) !important; min-width: 0 !important; }
@media (max-width: 1024px) { body .app-container .main-content, body .main-content { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } }
body .app-container, body > .app-container { width: 100% !important; max-width: 100% !important; overflow-x: clip !important; }

/* ---------- Mobile header: actions drop below the title instead of squeezing it ---------- */
@media (max-width: 768px) {
  .main-header { flex-wrap: wrap !important; row-gap: 8px !important; }
  .main-header .header-right { flex: 1 1 auto !important; min-width: 0 !important; }
  .main-header .header-left { flex: 0 0 auto !important; }
  .main-header .header-left .btn, .main-header .header-left .btn-group { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; }
  .main-header .header-left:has(.btn) { flex: 1 1 100% !important; justify-content: flex-start !important; order: 3; }
  .page-title h1 { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.3; }
}

/* ---------- Table row actions: outlined icon buttons with semantic tint (not solid blocks) ---------- */
td .btn.btn-sm, .data-table-actions .btn, .table-actions .btn, .actions-cell .btn, td .btn-icon {
  min-height: 34px !important; height: 34px; width: 34px; padding: 0 !important; border-radius: 6px !important;
  background: var(--dga-white) !important; border: 1px solid var(--dga-neutral-300) !important; color: var(--dga-neutral-700) !important; box-shadow: none !important;
}
td .btn.btn-sm:not(.btn-icon):not([title]):not(:empty) { width: auto; padding: 0 10px !important; }
td .btn.btn-sm i { font-size: 0.95rem; }
td .btn.btn-sm.btn-info, td .btn.btn-view { color: var(--dga-blue-700) !important; border-color: var(--dga-blue-200) !important; background: var(--dga-blue-25) !important; }
td .btn.btn-sm.btn-success { color: var(--dga-green-700) !important; border-color: var(--dga-green-200) !important; background: var(--dga-green-25) !important; }
td .btn.btn-sm.btn-warning { color: var(--dga-yellow-700) !important; border-color: var(--dga-yellow-200) !important; background: var(--dga-yellow-25) !important; }
td .btn.btn-sm.btn-danger, td .btn.btn-sm.text-danger, td .btn-delete { color: var(--dga-red-700) !important; border-color: var(--dga-red-200) !important; background: var(--dga-red-25) !important; }
td .btn.btn-sm.btn-primary, td .btn-edit { color: var(--dga-primary-700) !important; border-color: var(--dga-primary-200) !important; background: var(--dga-primary-25) !important; }
td .btn.btn-sm.btn-secondary, td .btn.btn-sm.btn-outline { color: var(--dga-neutral-700) !important; border-color: var(--dga-neutral-300) !important; background: var(--dga-white) !important; }
td .btn.btn-sm:hover { filter: brightness(0.97); border-color: var(--dga-neutral-400) !important; }
td .btn.btn-sm.btn-info:hover { background: var(--dga-blue-600) !important; color: #fff !important; border-color: var(--dga-blue-600) !important; }
td .btn.btn-sm.btn-success:hover { background: var(--dga-green-600) !important; color: #fff !important; border-color: var(--dga-green-600) !important; }
td .btn.btn-sm.btn-warning:hover { background: var(--dga-yellow-600) !important; color: #fff !important; border-color: var(--dga-yellow-600) !important; }
td .btn.btn-sm.btn-danger:hover, td .btn.btn-sm.text-danger:hover { background: var(--dga-red-600) !important; color: #fff !important; border-color: var(--dga-red-600) !important; }
td .btn.btn-sm.btn-primary:hover { background: var(--dga-primary-600) !important; color: #fff !important; border-color: var(--dga-primary-600) !important; }
td .btn-group, td .d-flex, .data-table-actions { gap: 6px !important; }
.badge-dark { background: var(--dga-neutral-100) !important; color: var(--dga-neutral-800) !important; border: 1px solid var(--dga-neutral-300) !important; }
.badge-secondary { color: var(--dga-neutral-700) !important; }
@media (max-width: 768px) {
  td .btn.btn-sm, .data-table-actions .btn, .actions-cell .btn, td .btn-icon { min-height: 40px !important; height: 40px; width: 40px; }
  .mobile-card .btn.btn-sm, .table-card .btn.btn-sm, .card-actions .btn.btn-sm { min-height: 40px !important; }
}

/* ---------- Narrow phones: keep the primary action label visible (icon-only buttons are not formal) ---------- */
@media (max-width: 400px) {
  .filters-row .btn span, .filters-row .btn-primary span { display: inline !important; }
  .filters-row .btn { font-size: 0.85rem !important; }
}

/* ---------- English (LTR) mode corrections ---------- */
html.lang-en .main-header { flex-direction: row !important; }
html.lang-en .main-header .header-right { order: 1; margin-right: auto; }
html.lang-en .main-header .header-left { order: 2; margin-left: auto; }
html.lang-en select.form-control, html.lang-en .filter-group select, html.lang-en .filters-row select, html.lang-en .filter-box select, html.lang-en .searchable-select-input {
  background-position: right 12px center !important; padding-left: 14px !important; padding-right: 36px !important; text-align: left;
}
html.lang-en .form-label.required::after { margin-right: 0; margin-left: 4px; }
html.lang-en .quick-search-container .quick-search-icon { left: 14px !important; right: auto !important; }
html.lang-en .quick-search { padding: 8px 14px 8px 40px !important; }
html.lang-en .modal-footer { justify-content: flex-end; }
html.lang-en .dropdown-menu { left: auto !important; right: 0 !important; }
html.lang-en .trial-banner { left: auto !important; right: 20px !important; }
html.lang-en .toast-container { left: auto !important; right: 24px !important; }
html.lang-en .nav-section-items .nav-item.sub { border-right: none !important; border-left: 2px solid rgba(255,255,255,0.12) !important; margin-right: 0; margin-left: 8px; }
html.lang-en .nav-section-items .nav-item.sub.active { border-left-color: var(--dga-primary-400) !important; }
html.lang-en .dashboard-hero, html.lang-en .page-hero, html.lang-en .case-header { border-right: 1px solid var(--dga-neutral-200) !important; border-left: 4px solid var(--dga-primary-600) !important; }
html.lang-en .notif-item.unread { border-right: none !important; border-left: 3px solid var(--dga-primary-600) !important; }
html.lang-en .toast.success, html.lang-en .toast.error, html.lang-en .toast.warning, html.lang-en .toast.info { border-right: none !important; border-left: 3px solid currentColor !important; }
@media (max-width: 768px) {
  html.lang-en .filter-group select, html.lang-en .filters-row select, html.lang-en .filter-box select, html.lang-en select.form-control { padding-right: 36px !important; padding-left: 14px !important; background-position: right 12px center !important; }
  html.lang-en #searchInput, html.lang-en input[type="search"] { padding-right: 42px !important; padding-left: 14px !important; }
  html.lang-en .trial-banner { left: 10px !important; right: 10px !important; }
}
html.lang-en .main-header .header-right, html.lang-en .main-header .header-left { flex-direction: row !important; }
html.lang-en .page-title h1 { flex-direction: row !important; }