/* ═══════════════════════════════════════════════════════════════════════════
   HAWIH THEME — overlay for Rise CRM
   Brand: electric blue (#0000FF / #1F1FFF) + deep navy (#0A0E40) + paper cream
   Font: IBM Plex Sans Arabic (browser-aware: works for AR + LATIN)
   Loaded AFTER Rise's app.all.css so these rules win.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───── 1. Design tokens (single source of truth) ───── */
:root {
    --hawih-primary:        #1F1FFF;
    --hawih-primary-deep:   #0A0E40;
    --hawih-primary-soft:   #9AA6FF;
    --hawih-accent:         #4A52FF;
    --hawih-bg-canvas:      #FAFAFC;
    --hawih-bg-paper:       #F4F1E8;
    --hawih-bg-card:        #FFFFFF;
    --hawih-text-primary:   #0A0E40;
    --hawih-text-body:      #1A1A1A;
    --hawih-text-muted:     #5A5E6B;
    --hawih-text-faint:     #9098A8;
    --hawih-border:         #E5E8F0;
    --hawih-hairline:       #EEF0F5;
    --hawih-success:        #22C55E;
    --hawih-warning:        #F59E0B;
    --hawih-danger:         #EF4444;
    --hawih-radius-sm:      8px;
    --hawih-radius:         12px;
    --hawih-radius-lg:      16px;
    --hawih-shadow-sm:      0 1px 2px rgba(10,14,64,0.05), 0 1px 1px rgba(10,14,64,0.04);
    --hawih-shadow:         0 4px 16px rgba(10,14,64,0.06), 0 1px 4px rgba(10,14,64,0.04);
    --hawih-shadow-lg:      0 12px 40px rgba(10,14,64,0.10), 0 2px 8px rgba(10,14,64,0.05);
    --hawih-trans:          all 0.18s cubic-bezier(0.2, 0, 0.2, 1);
    /* Bootstrap overrides where possible */
    --bs-primary:           #1F1FFF;
    --bs-primary-rgb:       31, 31, 255;
    --bs-body-color:        var(--hawih-text-body);
    --bs-body-bg:           var(--hawih-bg-canvas);
    --bs-link-color:        var(--hawih-primary);
    --bs-border-color:      var(--hawih-border);
}

/* ───── 2. Typography (site-wide IBM Plex Sans Arabic) ───── */
html.hawih-theme-on, html.hawih-theme-on body {
    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'SF Pro Text', Helvetica, Arial, sans-serif !important;
    color: var(--hawih-text-body);
    background: var(--hawih-bg-canvas);
    font-feature-settings: "ss01", "tnum";
    letter-spacing: -0.005em;
}
html.hawih-theme-on h1, html.hawih-theme-on h2, html.hawih-theme-on h3,
html.hawih-theme-on h4, html.hawih-theme-on h5, html.hawih-theme-on h6,
html.hawih-theme-on .page-title h1 {
    color: var(--hawih-text-primary);
    font-weight: 600;
    letter-spacing: -0.02em;
}
html.hawih-theme-on .text-muted { color: var(--hawih-text-muted) !important; }

/* ───── 3. Sidebar — clean white with blue accents (matches Hawih portfolio aesthetic) ───── */
html.hawih-theme-on .sidebar {
    background: var(--hawih-bg-card) !important;
    border-right: 1px solid var(--hawih-hairline);
    box-shadow: 0 0 0 transparent !important;
    transition: width 0.25s ease;
}
html.hawih-theme-on[dir="rtl"] .sidebar,
html.hawih-theme-on.hawih-force-rtl .sidebar {
    border-right: none;
    border-left: 1px solid var(--hawih-hairline);
}
/* default text color */
html.hawih-theme-on .sidebar-menu li > a {
    color: var(--hawih-text-body) !important;
    font-weight: 500;
    letter-spacing: 0;
    transition: var(--hawih-trans);
    padding: 10px 12px !important;
    margin: 1px 8px !important;
    border-radius: var(--hawih-radius-sm) !important;
    display: flex; align-items: center; gap: 10px;
}
html.hawih-theme-on .sidebar-menu li > a .menu-text {
    color: inherit;
    font-weight: 500;
}
/* hover state — subtle blue tint */
html.hawih-theme-on .sidebar-menu li > a:hover,
html.hawih-theme-on .sidebar-menu li > a:focus {
    background: rgba(31, 31, 255, 0.06) !important;
    color: var(--hawih-primary) !important;
}
/* active / open state — blue gradient pill */
html.hawih-theme-on .sidebar-menu li.active > a,
html.hawih-theme-on .sidebar-menu li.open > a {
    background: linear-gradient(135deg, var(--hawih-primary) 0%, var(--hawih-accent) 100%) !important;
    color: white !important;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(31, 31, 255, 0.28);
}
html.hawih-theme-on .sidebar-menu li.active > a .menu-text,
html.hawih-theme-on .sidebar-menu li.open > a .menu-text { color: white !important; }
/* icons in inactive items take muted color, active items inherit white */
html.hawih-theme-on .sidebar-menu i.icon,
html.hawih-theme-on .sidebar [data-feather] {
    stroke-width: 1.8;
    width: 18px; height: 18px;
    flex-shrink: 0;
    color: var(--hawih-text-muted);
}
html.hawih-theme-on .sidebar-menu li.active > a [data-feather],
html.hawih-theme-on .sidebar-menu li.open > a [data-feather],
html.hawih-theme-on .sidebar-menu li > a:hover [data-feather] { color: inherit; }
/* badges (notification counters) */
html.hawih-theme-on .sidebar-menu .badge {
    background: var(--hawih-primary-soft) !important;
    color: var(--hawih-primary-deep) !important;
    border-radius: 100px; font-weight: 600;
    padding: 2px 8px; font-size: 11px;
    margin-inline-start: auto;
}
/* sub-menu (expanded items) */
html.hawih-theme-on .sidebar-menu li ul {
    background: var(--hawih-bg-canvas);
    border-radius: var(--hawih-radius-sm);
    padding: 2px 0; margin: 2px 8px;
}
html.hawih-theme-on .sidebar-menu li ul li > a {
    padding-inline-start: 36px !important;
    font-size: 13px;
    color: var(--hawih-text-muted) !important;
}
html.hawih-theme-on .sidebar-menu li ul li > a:hover {
    background: rgba(31, 31, 255, 0.04) !important;
    color: var(--hawih-primary) !important;
}
html.hawih-theme-on .sidebar-menu li ul li.active > a {
    background: rgba(31, 31, 255, 0.10) !important;
    color: var(--hawih-primary) !important;
    font-weight: 600;
    box-shadow: none;
}
/* logo area — clean hairline below */
html.hawih-theme-on .sidebar .logo,
html.hawih-theme-on .sidebar #app-logo {
    padding: 16px 14px !important;
    border-bottom: 1px solid var(--hawih-hairline);
    margin-bottom: 8px;
}

/* ───── 4. Top bar — minimalist white with blue accent ───── */
html.hawih-theme-on .navbar-custom {
    background: var(--hawih-bg-card) !important;
    border-bottom: 1px solid var(--hawih-hairline);
    box-shadow: 0 1px 0 rgba(10, 14, 64, 0.03);
    height: 64px;
    padding: 0 24px;
}
html.hawih-theme-on .navbar-custom .nav-link {
    color: var(--hawih-text-muted);
    border-radius: var(--hawih-radius-sm);
    padding: 8px 12px;
    transition: var(--hawih-trans);
}
html.hawih-theme-on .navbar-custom .nav-link:hover {
    color: var(--hawih-primary);
    background: rgba(31, 31, 255, 0.06);
}
html.hawih-theme-on .navbar-custom .dropdown-menu {
    border: 1px solid var(--hawih-border);
    border-radius: var(--hawih-radius);
    box-shadow: var(--hawih-shadow-lg);
    padding: 8px;
    margin-top: 8px;
}
html.hawih-theme-on .navbar-custom .dropdown-item {
    border-radius: var(--hawih-radius-sm);
    padding: 8px 12px;
    color: var(--hawih-text-body);
}
html.hawih-theme-on .navbar-custom .dropdown-item:hover {
    background: var(--hawih-bg-canvas);
    color: var(--hawih-primary);
}
html.hawih-theme-on .navbar-custom .dropdown-item.active {
    background: var(--hawih-primary);
    color: white;
}

/* ───── 5. Cards — premium with rounded corners + hairline border ───── */
html.hawih-theme-on .card {
    background: var(--hawih-bg-card);
    border: 1px solid var(--hawih-hairline);
    border-radius: var(--hawih-radius);
    box-shadow: var(--hawih-shadow-sm);
    transition: var(--hawih-trans);
}
html.hawih-theme-on .card:hover {
    box-shadow: var(--hawih-shadow);
}
html.hawih-theme-on .card-header {
    background: transparent;
    border-bottom: 1px solid var(--hawih-hairline);
    padding: 16px 20px;
    font-weight: 600;
    color: var(--hawih-text-primary);
}
html.hawih-theme-on .card-body { padding: 20px; }
html.hawih-theme-on .card-footer {
    background: var(--hawih-bg-canvas);
    border-top: 1px solid var(--hawih-hairline);
    border-radius: 0 0 var(--hawih-radius) var(--hawih-radius);
    padding: 14px 20px;
}
/* Dashboard widget cards — extra polish */
html.hawih-theme-on .card.dashboard-icon-widget {
    background: linear-gradient(135deg, var(--hawih-bg-card) 0%, var(--hawih-bg-canvas) 100%);
    border: 1px solid var(--hawih-hairline);
}
html.hawih-theme-on .card.dashboard-icon-widget:hover {
    border-color: var(--hawih-primary-soft);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(31, 31, 255, 0.10);
}

/* ───── 6. Buttons — premium with gradients on primary ───── */
html.hawih-theme-on .btn {
    border-radius: var(--hawih-radius-sm);
    padding: 8px 16px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: var(--hawih-trans);
    border-width: 1px;
}
html.hawih-theme-on .btn-primary {
    background: linear-gradient(135deg, var(--hawih-primary) 0%, var(--hawih-accent) 100%);
    border-color: var(--hawih-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(31, 31, 255, 0.25);
}
html.hawih-theme-on .btn-primary:hover, html.hawih-theme-on .btn-primary:focus {
    background: linear-gradient(135deg, var(--hawih-primary-deep) 0%, var(--hawih-primary) 100%);
    border-color: var(--hawih-primary-deep);
    box-shadow: 0 4px 14px rgba(31, 31, 255, 0.4);
    transform: translateY(-1px);
}
html.hawih-theme-on .btn-primary:active { transform: translateY(0); }
html.hawih-theme-on .btn-default {
    background: var(--hawih-bg-card);
    border-color: var(--hawih-border);
    color: var(--hawih-text-body);
}
html.hawih-theme-on .btn-default:hover {
    background: var(--hawih-bg-canvas);
    border-color: var(--hawih-primary-soft);
    color: var(--hawih-primary);
}
html.hawih-theme-on .btn-success {
    background: linear-gradient(135deg, var(--hawih-success) 0%, #16a34a 100%);
    border-color: var(--hawih-success);
}
html.hawih-theme-on .btn-danger {
    background: linear-gradient(135deg, var(--hawih-danger) 0%, #dc2626 100%);
    border-color: var(--hawih-danger);
}
html.hawih-theme-on .btn-info {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border-color: #06b6d4; color: white;
}
html.hawih-theme-on .btn-warning {
    background: linear-gradient(135deg, var(--hawih-warning) 0%, #d97706 100%);
    border-color: var(--hawih-warning); color: white;
}

/* ───── 7. Form controls — subtle blue focus rings ───── */
html.hawih-theme-on .form-control, html.hawih-theme-on .form-select {
    background: var(--hawih-bg-card);
    border: 1px solid var(--hawih-border);
    border-radius: var(--hawih-radius-sm);
    padding: 9px 14px;
    color: var(--hawih-text-body);
    transition: var(--hawih-trans);
    font-family: inherit;
}
html.hawih-theme-on .form-control:focus, html.hawih-theme-on .form-select:focus {
    border-color: var(--hawih-primary);
    box-shadow: 0 0 0 4px rgba(31, 31, 255, 0.10);
    outline: none;
}
html.hawih-theme-on label, html.hawih-theme-on .col-form-label {
    color: var(--hawih-text-primary);
    font-weight: 500;
}
html.hawih-theme-on .select2-container--default .select2-selection--single,
html.hawih-theme-on .select2-container--default .select2-selection--multiple {
    border: 1px solid var(--hawih-border);
    border-radius: var(--hawih-radius-sm);
    min-height: 38px;
}
html.hawih-theme-on .select2-container--default.select2-container--focus .select2-selection--multiple,
html.hawih-theme-on .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--hawih-primary);
    box-shadow: 0 0 0 4px rgba(31, 31, 255, 0.10);
}

/* ───── 8. Tables — hairline + blue header text ───── */
html.hawih-theme-on table.dataTable thead th,
html.hawih-theme-on .table thead th {
    background: var(--hawih-bg-canvas);
    color: var(--hawih-primary) !important;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1.5px solid var(--hawih-primary);
    padding: 12px 14px;
}
html.hawih-theme-on table.dataTable tbody td,
html.hawih-theme-on .table tbody td {
    border-bottom: 1px solid var(--hawih-hairline);
    padding: 14px 14px;
    vertical-align: middle;
    color: var(--hawih-text-body);
}
html.hawih-theme-on table.dataTable tbody tr:hover {
    background: var(--hawih-bg-canvas);
}
html.hawih-theme-on .dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--hawih-border);
    border-radius: var(--hawih-radius-sm);
    padding: 7px 12px;
    margin-inline-start: 8px;
    transition: var(--hawih-trans);
}
html.hawih-theme-on .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--hawih-primary);
    box-shadow: 0 0 0 4px rgba(31, 31, 255, 0.10);
    outline: none;
}
html.hawih-theme-on .dataTables_wrapper .dataTables_paginate .pagination .page-link {
    border-radius: var(--hawih-radius-sm) !important;
    border-color: var(--hawih-border);
    color: var(--hawih-text-body);
    margin: 0 2px;
}
html.hawih-theme-on .dataTables_wrapper .dataTables_paginate .pagination .active .page-link {
    background: var(--hawih-primary);
    border-color: var(--hawih-primary);
}

/* ───── 9. Badges — pill-shaped with vivid brand colors ───── */
html.hawih-theme-on .badge {
    border-radius: 100px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    font-size: 11px;
}
html.hawih-theme-on .badge.bg-primary { background: var(--hawih-primary) !important; }
html.hawih-theme-on .badge.bg-success { background: var(--hawih-success) !important; }
html.hawih-theme-on .badge.bg-warning { background: var(--hawih-warning) !important; color: white !important; }
html.hawih-theme-on .badge.bg-danger { background: var(--hawih-danger) !important; }
html.hawih-theme-on .badge.bg-secondary, html.hawih-theme-on .badge.bg-default {
    background: var(--hawih-bg-canvas) !important;
    color: var(--hawih-text-body) !important;
    border: 1px solid var(--hawih-border);
}

/* ───── 10. Modals — premium with gradient header ───── */
html.hawih-theme-on .modal-content {
    border: none;
    border-radius: var(--hawih-radius-lg);
    box-shadow: var(--hawih-shadow-lg);
    overflow: hidden;
}
html.hawih-theme-on .modal-header {
    background: var(--hawih-bg-canvas);
    border-bottom: 1px solid var(--hawih-hairline);
    padding: 16px 24px;
}
html.hawih-theme-on .modal-title {
    color: var(--hawih-text-primary);
    font-weight: 600;
}
html.hawih-theme-on .modal-body { padding: 24px; }
html.hawih-theme-on .modal-footer {
    background: var(--hawih-bg-canvas);
    border-top: 1px solid var(--hawih-hairline);
    padding: 16px 24px;
}

/* ───── 11. Tabs (Bootstrap nav-tabs) ───── */
html.hawih-theme-on .nav-tabs {
    border-bottom: 1px solid var(--hawih-hairline);
}
html.hawih-theme-on .nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--hawih-text-muted);
    padding: 12px 16px;
    font-weight: 500;
    transition: var(--hawih-trans);
}
html.hawih-theme-on .nav-tabs .nav-link:hover {
    color: var(--hawih-primary);
    border-bottom-color: var(--hawih-primary-soft);
}
html.hawih-theme-on .nav-tabs .nav-link.active {
    color: var(--hawih-primary);
    border-bottom: 2px solid var(--hawih-primary);
    background: transparent;
}

/* ───── 12. Page wrapper + scrollbars ───── */
html.hawih-theme-on .page-container, html.hawih-theme-on .page-wrapper {
    background: var(--hawih-bg-canvas);
}
html.hawih-theme-on .page-title h1 {
    font-size: 22px;
    margin: 0;
    color: var(--hawih-text-primary);
}
html.hawih-theme-on ::-webkit-scrollbar { width: 10px; height: 10px; }
html.hawih-theme-on ::-webkit-scrollbar-thumb {
    background: var(--hawih-border);
    border-radius: 100px;
}
html.hawih-theme-on ::-webkit-scrollbar-thumb:hover { background: var(--hawih-primary-soft); }
html.hawih-theme-on ::-webkit-scrollbar-track { background: transparent; }

/* ───── 13. Alerts ───── */
html.hawih-theme-on .alert {
    border: none;
    border-inline-start: 4px solid var(--hawih-primary);
    border-radius: var(--hawih-radius-sm);
    padding: 12px 16px;
    background: rgba(31, 31, 255, 0.06);
    color: var(--hawih-text-primary);
}
html.hawih-theme-on .alert-success { background: rgba(34, 197, 94, 0.08); border-inline-start-color: var(--hawih-success); color: #14532d; }
html.hawih-theme-on .alert-warning { background: rgba(245, 158, 11, 0.08); border-inline-start-color: var(--hawih-warning); color: #78350f; }
html.hawih-theme-on .alert-danger { background: rgba(239, 68, 68, 0.08); border-inline-start-color: var(--hawih-danger); color: #7f1d1d; }
html.hawih-theme-on .alert-info { background: rgba(6, 182, 212, 0.08); border-inline-start-color: #06b6d4; color: #155e75; }

/* ───── 14. Links ───── */
html.hawih-theme-on a {
    color: var(--hawih-primary);
    text-decoration: none;
    transition: var(--hawih-trans);
}
html.hawih-theme-on a:hover { color: var(--hawih-primary-deep); text-decoration: underline; }
html.hawih-theme-on .breadcrumb a, html.hawih-theme-on .page-title a {
    color: var(--hawih-text-muted);
}
html.hawih-theme-on .breadcrumb a:hover { color: var(--hawih-primary); }

/* ───── 15. Settings sidebar ───── */
html.hawih-theme-on #settings-left-menu-accordion {
    background: var(--hawih-bg-card);
    border: 1px solid var(--hawih-hairline);
    border-radius: var(--hawih-radius);
    padding: 8px;
}
html.hawih-theme-on #settings-left-menu-accordion .settings-anchor {
    color: var(--hawih-text-primary);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 11px;
    padding: 10px 12px;
    cursor: pointer;
}
html.hawih-theme-on #settings-left-menu-accordion .list-group-item {
    border: none;
    color: var(--hawih-text-muted);
    padding: 9px 12px;
    border-radius: var(--hawih-radius-sm);
    margin: 1px 0;
    background: transparent;
}
html.hawih-theme-on #settings-left-menu-accordion .list-group-item:hover {
    background: var(--hawih-bg-canvas);
    color: var(--hawih-primary);
}
html.hawih-theme-on #settings-left-menu-accordion .list-group-item.active {
    background: var(--hawih-primary);
    color: white;
}

/* ─────────────────────────────────────────────────────────────────────
   RTL — Arabic version overrides
   When html[dir="rtl"] or html.hawih-force-rtl, flip directional rules.
   ───────────────────────────────────────────────────────────────────── */

html.hawih-theme-on.hawih-force-rtl,
html.hawih-theme-on.hawih-force-rtl body { direction: rtl; text-align: right; }

html.hawih-theme-on[dir="rtl"] .sidebar,
html.hawih-theme-on.hawih-force-rtl .sidebar {
    box-shadow: -4px 0 24px rgba(10, 14, 64, 0.06);
}
html.hawih-theme-on[dir="rtl"] body.sidebar-toggled .sidebar,
html.hawih-theme-on.hawih-force-rtl body.sidebar-toggled .sidebar { right: 0; left: auto; }
html.hawih-theme-on[dir="rtl"] body, html.hawih-theme-on.hawih-force-rtl body {
    direction: rtl;
}

/* In RTL, Rise's left-side sidebar should appear on the right */
html.hawih-theme-on[dir="rtl"] .sidebar,
html.hawih-theme-on.hawih-force-rtl .sidebar {
    right: 0; left: auto;
}
html.hawih-theme-on[dir="rtl"] .page-container,
html.hawih-theme-on.hawih-force-rtl .page-container {
    margin-right: 250px; margin-left: 0;
}
html.hawih-theme-on[dir="rtl"] body.sidebar-toggled .page-container,
html.hawih-theme-on.hawih-force-rtl body.sidebar-toggled .page-container {
    margin-right: 70px;
}

/* ─────────────────────────────────────────────────────────────────────
   RTL POLISH — fixes for common Rise components when html[dir="rtl"]
   ───────────────────────────────────────────────────────────────────── */

/* Modal close button — Bootstrap's .btn-close has hard-coded margin that breaks in RTL */
html.hawih-theme-on[dir="rtl"] .modal-header .btn-close,
html.hawih-theme-on.hawih-force-rtl .modal-header .btn-close {
    margin-left: 0 !important;
    margin-right: auto !important;
}
/* Modal title spacing */
html.hawih-theme-on[dir="rtl"] .modal-header .modal-title,
html.hawih-theme-on.hawih-force-rtl .modal-header .modal-title { text-align: right; }

/* Bootstrap utility classes that have hard-coded LTR direction */
html.hawih-theme-on[dir="rtl"] .text-end,
html.hawih-theme-on.hawih-force-rtl .text-end { text-align: left !important; }
html.hawih-theme-on[dir="rtl"] .text-start,
html.hawih-theme-on.hawih-force-rtl .text-start { text-align: right !important; }
html.hawih-theme-on[dir="rtl"] .float-end,
html.hawih-theme-on.hawih-force-rtl .float-end { float: left !important; }
html.hawih-theme-on[dir="rtl"] .float-start,
html.hawih-theme-on.hawih-force-rtl .float-start { float: right !important; }
html.hawih-theme-on[dir="rtl"] .ms-auto,
html.hawih-theme-on.hawih-force-rtl .ms-auto { margin-right: auto !important; margin-left: 0 !important; }
html.hawih-theme-on[dir="rtl"] .me-auto,
html.hawih-theme-on.hawih-force-rtl .me-auto { margin-left: auto !important; margin-right: 0 !important; }

/* Rise's Old-school float utilities */
html.hawih-theme-on[dir="rtl"] .pull-right,
html.hawih-theme-on.hawih-force-rtl .pull-right { float: left !important; }
html.hawih-theme-on[dir="rtl"] .pull-left,
html.hawih-theme-on.hawih-force-rtl .pull-left { float: right !important; }

/* Tables — number columns naturally flow LTR even in RTL context, but the cell text-align should mirror */
html.hawih-theme-on[dir="rtl"] table.dataTable thead th,
html.hawih-theme-on.hawih-force-rtl table.dataTable thead th { text-align: right; }
html.hawih-theme-on[dir="rtl"] table.dataTable .text-end,
html.hawih-theme-on.hawih-force-rtl table.dataTable .text-end { text-align: left !important; }

/* DataTables filter input + length select alignment */
html.hawih-theme-on[dir="rtl"] .dataTables_wrapper .dataTables_filter,
html.hawih-theme-on.hawih-force-rtl .dataTables_wrapper .dataTables_filter { float: left; text-align: left; }
html.hawih-theme-on[dir="rtl"] .dataTables_wrapper .dataTables_length,
html.hawih-theme-on.hawih-force-rtl .dataTables_wrapper .dataTables_length { float: right; }
html.hawih-theme-on[dir="rtl"] .dataTables_wrapper .dataTables_info,
html.hawih-theme-on.hawih-force-rtl .dataTables_wrapper .dataTables_info { float: right; }
html.hawih-theme-on[dir="rtl"] .dataTables_wrapper .dataTables_paginate,
html.hawih-theme-on.hawih-force-rtl .dataTables_wrapper .dataTables_paginate { float: left; }

/* Form group label positioning — Rise uses col-md-3 + col-md-9 grid; Bootstrap RTL handles flip naturally
   but icon-buttons next to inputs may need explicit treatment */
html.hawih-theme-on[dir="rtl"] .input-group > .form-control:not(:first-child),
html.hawih-theme-on.hawih-force-rtl .input-group > .form-control:not(:first-child) {
    border-radius: var(--hawih-radius-sm) 0 0 var(--hawih-radius-sm);
}
html.hawih-theme-on[dir="rtl"] .input-group > .input-group-text:not(:first-child),
html.hawih-theme-on.hawih-force-rtl .input-group > .input-group-text:not(:first-child) {
    border-radius: 0 var(--hawih-radius-sm) var(--hawih-radius-sm) 0;
}

/* ─── Sidebar menu items — RTL ───
   Rise's defaults:
     .sidebar-menu li a    { display: block }
     .sidebar-menu li a span { margin-left: 10px }   <-- breaks RTL spacing
   We force flex with !important so order is controlled by RTL flow.
   HTML source: <a><i icon></i><span menu-text></span><span badge?></span></a>
   In RTL flex `row` (default): first child (icon) on RIGHT, then text, then badge.
   That's the correct Arabic UI convention (icon at start = right). */
html.hawih-theme-on[dir="rtl"] .sidebar-menu li > a,
html.hawih-theme-on.hawih-force-rtl .sidebar-menu li > a,
html.hawih-theme-on[dir="rtl"] #sidebar-menu li a,
html.hawih-theme-on.hawih-force-rtl #sidebar-menu li a {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;   /* start = right in RTL */
    align-items: center !important;
    gap: 10px !important;
    text-align: right !important;
    direction: rtl !important;
}
/* Wipe Rise's hard-coded margin-left on the text span — `gap` controls spacing now */
html.hawih-theme-on[dir="rtl"] .sidebar-menu li a span,
html.hawih-theme-on.hawih-force-rtl .sidebar-menu li a span,
html.hawih-theme-on[dir="rtl"] #sidebar-menu li a span,
html.hawih-theme-on.hawih-force-rtl #sidebar-menu li a span {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
html.hawih-theme-on[dir="rtl"] .sidebar-menu li a [data-feather],
html.hawih-theme-on.hawih-force-rtl .sidebar-menu li a [data-feather],
html.hawih-theme-on[dir="rtl"] .sidebar-menu li a i.icon,
html.hawih-theme-on.hawih-force-rtl .sidebar-menu li a i.icon {
    margin: 0 !important;
    flex-shrink: 0;
}

/* Card actions / page-title button group — float to left in RTL */
html.hawih-theme-on[dir="rtl"] .title-button-group,
html.hawih-theme-on.hawih-force-rtl .title-button-group {
    float: left;
    text-align: left;
}

/* ─── Modal footer — primary action (Save) should be on the RIGHT in RTL ───
   Rise's modal source order is [Upload, Close, Save]. In RTL with default
   flex `row`, that visually becomes [Upload(right), Close, Save(left)] —
   wrong (primary on left). row-reverse + !important to win Bootstrap. */
html.hawih-theme-on[dir="rtl"] .modal-footer,
html.hawih-theme-on.hawih-force-rtl .modal-footer,
html.hawih-theme-on[dir="rtl"] body .modal .modal-footer,
html.hawih-theme-on.hawih-force-rtl body .modal .modal-footer {
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
}
/* Rise's `.modal-footer .btn + .btn { margin-left: 10px }` — flip to right in RTL */
html.hawih-theme-on[dir="rtl"] .modal-footer .btn + .btn,
html.hawih-theme-on.hawih-force-rtl .modal-footer .btn + .btn {
    margin-left: 0 !important;
    margin-right: 10px !important;
}
html.hawih-theme-on[dir="rtl"] .card-footer.text-end,
html.hawih-theme-on.hawih-force-rtl .card-footer.text-end {
    text-align: right !important;
}

/* ─── Dropdown items — in RTL we WANT icon on the right of text ───
   Important insight: in RTL the default `display: flex; flex-direction: row` already
   places the first HTML child (the icon) on the RIGHT — which is what we want.
   So we DON'T add row-reverse. We just ensure flex is enabled and margins flip. */
html.hawih-theme-on[dir="rtl"] .dropdown-menu .dropdown-item,
html.hawih-theme-on.hawih-force-rtl .dropdown-menu .dropdown-item {
    display: flex !important;
    flex-direction: row !important;       /* default — first child on right in RTL */
    align-items: center;
    gap: 10px;
    text-align: right;
    direction: rtl;
}
/* Bootstrap's `.me-2` is margin-right (LTR semantic) — flip to margin-left in RTL */
html.hawih-theme-on[dir="rtl"] .dropdown-menu .dropdown-item .me-2,
html.hawih-theme-on.hawih-force-rtl .dropdown-menu .dropdown-item .me-2,
html.hawih-theme-on[dir="rtl"] .dropdown-menu .dropdown-item [data-feather],
html.hawih-theme-on.hawih-force-rtl .dropdown-menu .dropdown-item [data-feather] {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* ─── Generic button-with-icon flip ───
   Most Rise buttons follow the pattern: `<icon> text`. In LTR icon ends up on the left.
   In RTL we want icon on the right (start of reading). Default flex behavior handles
   this IF the button uses flex. But Rise's .btn defaults to inline-block, so the icon
   stays on the LEFT visually even in RTL (because inline elements flow with text but
   icons aren't strong-direction characters).
   Fix: convert all icon-containing buttons to flex with default RTL row. */
html.hawih-theme-on[dir="rtl"] .btn,
html.hawih-theme-on.hawih-force-rtl .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-direction: row;  /* RTL puts first child (icon) on right */
}
/* Force any margin classes on icons inside buttons to be neutral — gap handles spacing */
html.hawih-theme-on[dir="rtl"] .btn [data-feather],
html.hawih-theme-on.hawih-force-rtl .btn [data-feather],
html.hawih-theme-on[dir="rtl"] .btn .icon-14,
html.hawih-theme-on[dir="rtl"] .btn .icon-16,
html.hawih-theme-on.hawih-force-rtl .btn .icon-14,
html.hawih-theme-on.hawih-force-rtl .btn .icon-16 {
    margin: 0 !important;
}

/* The "Ask Claude to fill" button — icon should be on right in RTL */
html.hawih-theme-on[dir="rtl"] .hawih-form-assist-btn,
html.hawih-theme-on.hawih-force-rtl .hawih-form-assist-btn {
    flex-direction: row;  /* RTL default: icon on right */
}

/* Topbar profile pill — the user's name showed as a blue underlined LINK because my generic
   a:hover/a underline rule was catching the dropdown-toggle anchor. Suppress it. */
html.hawih-theme-on .navbar-custom .nav-link,
html.hawih-theme-on .navbar-custom .nav-link:hover,
html.hawih-theme-on .navbar-custom a.dropdown-toggle,
html.hawih-theme-on .navbar-custom a.dropdown-toggle:hover {
    text-decoration: none !important;
}
/* Profile chip styling — make it a clean button-shaped element */
html.hawih-theme-on .navbar-custom .dropdown-toggle.profile-link,
html.hawih-theme-on .navbar-custom #profile-dropdown {
    background: transparent;
    color: var(--hawih-text-body);
    font-weight: 500;
}

/* Datatables top toolbar — search + buttons should align together; in RTL their floats flip
   correctly via earlier rules. Also: the action buttons (Print, Excel) should sit beside the
   search input, not float to the opposite side */
html.hawih-theme-on .dataTables_wrapper .dt-buttons {
    margin: 0;
}
html.hawih-theme-on[dir="rtl"] .dataTables_wrapper .dt-buttons,
html.hawih-theme-on.hawih-force-rtl .dataTables_wrapper .dt-buttons {
    float: right !important;
    text-align: right;
}
html.hawih-theme-on[dir="rtl"] .dataTables_wrapper .dt-buttons .btn,
html.hawih-theme-on.hawih-force-rtl .dataTables_wrapper .dt-buttons .btn {
    margin-left: 4px;
    margin-right: 0;
}

/* Dropdown caret on profile + language dropdowns: hide it (cleaner) */
html.hawih-theme-on .navbar-custom .dropdown-toggle::after { display: none; }

/* Settings sidebar accordion icon alignment */
html.hawih-theme-on[dir="rtl"] #settings-left-menu-accordion .settings-anchor::after,
html.hawih-theme-on.hawih-force-rtl #settings-left-menu-accordion .settings-anchor::after {
    margin-left: 0 !important; margin-right: auto !important;
    float: left !important;
}

/* Datepicker RTL hint — Rise uses bootstrap-datepicker; class .datepicker-rtl needs to be toggled by JS,
   but as a minimum, force RTL on its container when active */
html.hawih-theme-on[dir="rtl"] .datepicker,
html.hawih-theme-on.hawih-force-rtl .datepicker { direction: rtl; }

/* Select2 dropdown arrow positioning */
html.hawih-theme-on[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow,
html.hawih-theme-on.hawih-force-rtl .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: auto; left: 6px;
}

/* Dropdown caret alignment */
html.hawih-theme-on[dir="rtl"] .dropdown-toggle::after,
html.hawih-theme-on.hawih-force-rtl .dropdown-toggle::after {
    margin-left: 0; margin-right: 0.5em;
}

/* ─────────────────────────────────────────────────────────────────────
   MISC POLISH
   ───────────────────────────────────────────────────────────────────── */

/* Smooth focus visible for accessibility */
html.hawih-theme-on *:focus-visible {
    outline: 2px solid var(--hawih-primary);
    outline-offset: 2px;
}
/* Feather icons polish */
html.hawih-theme-on [data-feather] { stroke-width: 1.8; vertical-align: -2px; }
/* Page title spacing */
html.hawih-theme-on .page-title {
    padding: 18px 24px;
    background: var(--hawih-bg-card);
    border-bottom: 1px solid var(--hawih-hairline);
    margin-bottom: 16px;
    border-radius: var(--hawih-radius);
    box-shadow: var(--hawih-shadow-sm);
}
/* Sign-in page upgrade */
html.hawih-theme-on .signin-form {
    background: var(--hawih-bg-card);
    border: 1px solid var(--hawih-hairline);
    border-radius: var(--hawih-radius-lg);
    box-shadow: var(--hawih-shadow-lg);
    padding: 32px;
}