/* ═══════════════════════════════════════════
   Digital Corner RE — Refined Minimal Sidebar
═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   Dashboard Stat Cards
═══════════════════════════════════════════ */
.dc-stat-card {
    border-radius: 12px;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.dc-stat-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.dc-stat-label  { font-size: 11px; color: #9ca3af; margin-bottom: 2px; }
.dc-stat-value  { font-size: 28px; font-weight: 800; line-height: 1; }
.dc-stat-sub    { font-size: 11px; color: #6b7280; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Light mode card backgrounds */
.dc-stat-overdue    { background: rgba(239,68,68,.07);   border: 1px solid rgba(239,68,68,.2);   border-right: 4px solid #ef4444; }
.dc-stat-due        { background: rgba(245,158,11,.07);  border: 1px solid rgba(245,158,11,.2);  border-right: 4px solid #f59e0b; }
.dc-stat-collected  { background: rgba(34,197,94,.07);   border: 1px solid rgba(34,197,94,.2);   border-right: 4px solid #22c55e; }
.dc-stat-postponed  { background: rgba(139,92,246,.07);  border: 1px solid rgba(139,92,246,.2);  border-right: 4px solid #8b5cf6; }
.dc-stat-pending    { background: rgba(59,130,246,.07);  border: 1px solid rgba(59,130,246,.2);  border-right: 4px solid #3b82f6; }
.dc-stat-remaining  { background: rgba(14,165,233,.07);  border: 1px solid rgba(14,165,233,.2);  border-right: 4px solid #0ea5e9; }

/* Dark mode card backgrounds */
.dark .dc-stat-overdue    { background: rgba(239,68,68,.13)  !important; border-color: rgba(239,68,68,.3)  !important; }
.dark .dc-stat-due        { background: rgba(245,158,11,.13) !important; border-color: rgba(245,158,11,.3) !important; }
.dark .dc-stat-collected  { background: rgba(34,197,94,.13)  !important; border-color: rgba(34,197,94,.3)  !important; }
.dark .dc-stat-postponed  { background: rgba(139,92,246,.13) !important; border-color: rgba(139,92,246,.3) !important; }
.dark .dc-stat-pending    { background: rgba(59,130,246,.13) !important; border-color: rgba(59,130,246,.3) !important; }
.dark .dc-stat-remaining  { background: rgba(14,165,233,.13) !important; border-color: rgba(14,165,233,.3) !important; }

/* Dark mode text */
.dark .dc-stat-label { color: #6b7280 !important; }
.dark .dc-stat-sub   { color: #4b5563 !important; }

/* Filter bar */
.dc-filter-bar {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(0,0,0,.03);
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 12px; padding: 8px 12px; flex-wrap: wrap;
}
.dark .dc-filter-bar {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.08) !important;
}
.dc-filter-label { font-size: 11px; color: #9ca3af; font-weight: 600; margin-left: 4px; white-space: nowrap; }
.dc-filter-btn {
    display: inline-flex; align-items: center; gap: 7px;
    border-radius: 8px; font-size: 12px;
    cursor: pointer; outline: none; transition: all .15s; white-space: nowrap;
}
.dc-filter-btn:not(.dc-filter-active) { color: #6b7280; }
.dark .dc-filter-btn:not(.dc-filter-active) { color: #9ca3af !important; }
.dc-filter-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 18px; padding: 0 5px;
    border-radius: 999px; font-size: 11px; font-weight: 700;
}

/* ── Hide logo from sidebar ──────────────── */
.fi-sidebar-header {
    display: none !important;
}

/* ── Sidebar container ───────────────────── */
.fi-sidebar {
    background: #FFFFFF !important;
    border-right: 1px solid #EEEFF1 !important;
    border-left: none !important;
    box-shadow: none !important;
}

/* ── Nav scroll area ─────────────────────── */
.fi-sidebar-nav {
    padding: 4px 8px 12px !important;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #EEEFF1 transparent;
}
.fi-sidebar-nav::-webkit-scrollbar { width: 3px; }
.fi-sidebar-nav::-webkit-scrollbar-thumb { background: #EEEFF1; border-radius: 4px; }

/* ── Navigation Groups ───────────────────── */
.fi-sidebar-group {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* Remove all internal spacing from group wrappers */
.fi-sidebar-group > div,
.fi-sidebar-group > ul,
.fi-sidebar-group-items,
.fi-sidebar-group [x-show],
.fi-sidebar-group [x-collapse],
.fi-sidebar-nav > ul,
.fi-sidebar-nav > div,
.fi-sidebar-nav ul,
.fi-sidebar-nav > * > li {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

/* Group label */
.fi-sidebar-group-label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 8px !important;
    margin: 2px 0 1px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    color: #374151 !important;
    background: #F3F4F6 !important;
    border: none !important;
    border-radius: 5px !important;
    cursor: pointer;
    transition: background .15s, color .15s;
    user-select: none;
}
.fi-sidebar-group-label:hover {
    color: #111827 !important;
    background: #E5E7EB !important;
}
.fi-sidebar-group-label svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0;
    opacity: .5;
    stroke-width: 1.4 !important;
}

/* ── Dashboard item — sidebar header ─────── */
.fi-sidebar-nav > ul > li:first-child .fi-sidebar-item-button,
.fi-sidebar-nav > div > ul > li:first-child .fi-sidebar-item-button {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    padding: 14px 12px 12px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid #EEEFF1 !important;
    border-radius: 0 !important;
    letter-spacing: -.02em !important;
    background: transparent !important;
    cursor: default;
}
.fi-sidebar-nav > ul > li:first-child .fi-sidebar-item-button:hover,
.fi-sidebar-nav > div > ul > li:first-child .fi-sidebar-item-button:hover {
    background: transparent !important;
    color: #111827 !important;
}
.fi-sidebar-nav > ul > li:first-child .fi-sidebar-item-button svg,
.fi-sidebar-nav > div > ul > li:first-child .fi-sidebar-item-button svg {
    width: 20px !important;
    height: 20px !important;
    opacity: 1 !important;
    color: #111827 !important;
}

/* ── Navigation Items ────────────────────── */
.fi-sidebar-item {
    margin: 0 !important;
}

.fi-sidebar-item-button {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #6B7280 !important;
    text-decoration: none !important;
    transition: all .15s !important;
    position: relative;
    border: none !important;
    background: transparent !important;
    letter-spacing: .01em;
}

.fi-sidebar-item-button:hover {
    background: #F3F4F6 !important;
    color: #111827 !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── Active item ─────────────────────────── */
.fi-sidebar-item-button.fi-active,
.fi-sidebar-item-button[aria-current="page"],
.fi-active .fi-sidebar-item-button {
    background: #F3F4F6 !important;
    color: #111827 !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Left accent line on active */
.fi-sidebar-item-button.fi-active::before,
.fi-active .fi-sidebar-item-button::before {
    content: '';
    position: absolute;
    right: 0;
    top: 25%;
    bottom: 25%;
    width: 3px;
    background: #080808;
    border-radius: 2px 0 0 2px;
}

.fi-sidebar-item-button.fi-active::after,
.fi-active .fi-sidebar-item-button::after {
    display: none !important;
}

/* ── Icons — badge style (colored bg + white icon) ── */
.fi-sidebar-item-button svg {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0;
    transition: all .15s;
    stroke-width: 1.5 !important;
    padding: 5px !important;
    border-radius: 7px !important;
}

/* Dashboard icon — no badge */
.fi-sidebar-nav > ul > li:first-child .fi-sidebar-item-button svg,
.fi-sidebar-nav > div > ul > li:first-child .fi-sidebar-item-button svg {
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    color: #111827 !important;
    opacity: 1 !important;
}

/* contracts — بنفسجي */
.fi-sidebar-group:nth-child(1) .fi-sidebar-item-button svg,
.fi-sidebar-group:nth-child(2) .fi-sidebar-item-button svg {
    color: #fff !important;
    background: #6366f1 !important;
    box-shadow: 0 2px 5px rgba(99,102,241,.35) !important;
}

/* finance — أخضر */
.fi-sidebar-group:nth-child(3) .fi-sidebar-item-button svg {
    color: #fff !important;
    background: #059669 !important;
    box-shadow: 0 2px 5px rgba(5,150,105,.35) !important;
}

/* properties — أزرق */
.fi-sidebar-group:nth-child(4) .fi-sidebar-item-button svg {
    color: #fff !important;
    background: #2563eb !important;
    box-shadow: 0 2px 5px rgba(37,99,235,.35) !important;
}

/* clients — فيولت */
.fi-sidebar-group:nth-child(5) .fi-sidebar-item-button svg {
    color: #fff !important;
    background: #7c3aed !important;
    box-shadow: 0 2px 5px rgba(124,58,237,.35) !important;
}

/* maintenance — برتقالي */
.fi-sidebar-group:nth-child(6) .fi-sidebar-item-button svg {
    color: #fff !important;
    background: #d97706 !important;
    box-shadow: 0 2px 5px rgba(217,119,6,.35) !important;
}

/* reports — سماوي */
.fi-sidebar-group:nth-child(7) .fi-sidebar-item-button svg {
    color: #fff !important;
    background: #0891b2 !important;
    box-shadow: 0 2px 5px rgba(8,145,178,.35) !important;
}

/* marketing — وردي */
.fi-sidebar-group:nth-child(8) .fi-sidebar-item-button svg {
    color: #fff !important;
    background: #db2777 !important;
    box-shadow: 0 2px 5px rgba(219,39,119,.35) !important;
}

/* support — أحمر */
.fi-sidebar-group:nth-child(9) .fi-sidebar-item-button svg {
    color: #fff !important;
    background: #dc2626 !important;
    box-shadow: 0 2px 5px rgba(220,38,38,.35) !important;
}

/* content — تيل */
.fi-sidebar-group:nth-child(10) .fi-sidebar-item-button svg {
    color: #fff !important;
    background: #0d9488 !important;
    box-shadow: 0 2px 5px rgba(13,148,136,.35) !important;
}

/* settings — رمادي غامق */
.fi-sidebar-group:nth-child(11) .fi-sidebar-item-button svg,
.fi-sidebar-group:nth-child(12) .fi-sidebar-item-button svg {
    color: #fff !important;
    background: #475569 !important;
    box-shadow: 0 2px 5px rgba(71,85,105,.35) !important;
}

/* Active item — slightly brighter badge */
.fi-sidebar-item-button.fi-active svg,
.fi-active .fi-sidebar-item-button svg {
    filter: brightness(1.1) !important;
    opacity: 1 !important;
}

/* ── Badges ──────────────────────────────── */
.fi-sidebar-item-badge {
    margin-right: auto !important;
    margin-left: 0 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 1px 6px !important;
    border-radius: 999px !important;
    background: #A8202C !important;
    color: #ffffff !important;
    border: none !important;
}

/* ── Divider between groups ──────────────── */
.fi-sidebar-group + .fi-sidebar-group::before {
    display: none !important;
}

/* ── Collapse button ─────────────────────── */
.fi-sidebar-close-overlay-btn,
.fi-sidebar-collapse-btn {
    color: #9CA3AF !important;
}
.fi-sidebar-collapse-btn:hover {
    color: #111827 !important;
}

/* ── Account widget at bottom ────────────── */
.fi-sidebar footer,
.fi-sidebar .fi-account-widget {
    background: #FFFFFF !important;
    border-top: 1px solid #F3F4F6 !important;
    padding: 8px 10px !important;
}

/* ── Canvas (page background) ────────────── */
.fi-main {
    background: #F8F9FB !important;
}

/* ── Topbar ──────────────────────────────── */
.fi-topbar {
    background: #FFFFFF !important;
    border-bottom: 1px solid #EEEFF1 !important;
    box-shadow: none !important;
}
.fi-topbar nav {
    position: relative !important;
}

/* ── Quick Nav ──────────────────────────── */
.dc-quick-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}
.dc-qn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 5px 6px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s;
    cursor: pointer;
    border: none;
    width: 72px;
    min-width: 72px;
    max-width: 72px;
}
.dc-qn-item:hover {
    background: rgba(0,0,0,.05);
}
.dc-qn-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dc-qn-label {
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
    width: 100%;
    text-align: center;
}
.dc-qn-item:hover .dc-qn-label {
    color: #111827;
}

/* dark mode quick nav */
.dark .dc-qn-item:hover {
    background: rgba(255,255,255,.07) !important;
}
.dark .dc-qn-label {
    color: #6b7280 !important;
}
.dark .dc-qn-item:hover .dc-qn-label {
    color: #e5e7eb !important;
}

/* ── Brand link in topbar ────────────────── */
.dc-brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px 0 20px;
    text-decoration: none;
    white-space: nowrap;
    border-left: 1px solid #EEEFF1;
    height: 100%;
    flex-shrink: 0;
}
.dc-brand-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #080808;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dc-brand-name {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -.01em;
    line-height: 1.2;
}
.dc-brand-sub {
    font-size: 10px;
    font-weight: 400;
    color: #9CA3AF;
    letter-spacing: .04em;
    line-height: 1.2;
}

/* ═══════════════════════════════════════════
   DARK MODE
═══════════════════════════════════════════ */

/* ── Sidebar ── */
.dark .fi-sidebar {
    background: #0f1117 !important;
    border-right: 1px solid #1e2130 !important;
}

/* ── Nav scroll ── */
.dark .fi-sidebar-nav {
    scrollbar-color: #2a2d3a transparent;
}
.dark .fi-sidebar-nav::-webkit-scrollbar-thumb { background: #2a2d3a; }

/* ── Group label ── */
.dark .fi-sidebar-group-label {
    color: #9ca3af !important;
    background: #1a1d27 !important;
}
.dark .fi-sidebar-group-label:hover {
    color: #e5e7eb !important;
    background: #252836 !important;
}

/* ── Dashboard item ── */
.dark .fi-sidebar-nav > ul > li:first-child .fi-sidebar-item-button,
.dark .fi-sidebar-nav > div > ul > li:first-child .fi-sidebar-item-button {
    color: #f9fafb !important;
    border-bottom-color: #1e2130 !important;
}
.dark .fi-sidebar-nav > ul > li:first-child .fi-sidebar-item-button:hover,
.dark .fi-sidebar-nav > div > ul > li:first-child .fi-sidebar-item-button:hover {
    color: #f9fafb !important;
}
.dark .fi-sidebar-nav > ul > li:first-child .fi-sidebar-item-button svg,
.dark .fi-sidebar-nav > div > ul > li:first-child .fi-sidebar-item-button svg {
    color: #f9fafb !important;
}

/* ── Nav items ── */
.dark .fi-sidebar-item-button {
    color: #9ca3af !important;
}
.dark .fi-sidebar-item-button:hover {
    background: #1a1d27 !important;
    color: #f9fafb !important;
}

/* ── Active item ── */
.dark .fi-sidebar-item-button.fi-active,
.dark .fi-sidebar-item-button[aria-current="page"],
.dark .fi-active .fi-sidebar-item-button {
    background: #1a1d27 !important;
    color: #f9fafb !important;
}
.dark .fi-sidebar-item-button.fi-active::before,
.dark .fi-active .fi-sidebar-item-button::before {
    background: #6366f1 !important;
}

/* ── Account widget ── */
.dark .fi-sidebar footer,
.dark .fi-sidebar .fi-account-widget {
    background: #0f1117 !important;
    border-top-color: #1e2130 !important;
}

/* ── Collapse btn ── */
.dark .fi-sidebar-close-overlay-btn,
.dark .fi-sidebar-collapse-btn {
    color: #4b5563 !important;
}
.dark .fi-sidebar-collapse-btn:hover {
    color: #e5e7eb !important;
}

/* ── Topbar ── */
.dark .fi-topbar {
    background: #0f1117 !important;
    border-bottom-color: #1e2130 !important;
}

/* ── Brand link dark mode ── */
.dark .dc-brand-link {
    border-left-color: #1e2130 !important;
}
.dark .dc-brand-name {
    color: #f1f5f9 !important;
}
.dark .dc-brand-sub {
    color: #6b7280 !important;
}

/* ── Page background ── */
.dark .fi-main {
    background: #0d0f18 !important;
}

/* ── Force dark on ALL white backgrounds ── */
.dark .bg-white {
    background-color: #131620 !important;
}
.dark .dark\:bg-gray-900 {
    background-color: #131620 !important;
}
.dark .dark\:bg-gray-800 {
    background-color: #1a1d27 !important;
}

/* ── Ring/border colors ── */
.dark .ring-gray-950\/5,
.dark .dark\:ring-white\/10 {
    --tw-ring-color: rgba(255,255,255,0.06) !important;
}

/* ── Text colors in dark ── */
.dark .dark\:text-white {
    color: #f1f5f9 !important;
}
.dark .dark\:text-gray-400 {
    color: #9ca3af !important;
}
.dark .text-gray-950 {
    color: #f1f5f9 !important;
}
.dark .text-gray-500 {
    color: #9ca3af !important;
}

/* ── Page header / breadcrumbs ── */
.dark .fi-header,
.dark .fi-simple-header {
    background: transparent !important;
}
.dark .fi-breadcrumbs ol li a,
.dark .fi-breadcrumbs ol li span {
    color: #6b7280 !important;
}
.dark .fi-breadcrumbs ol li:last-child span {
    color: #d1d5db !important;
}

/* ── Sections / Cards ── */
.dark .fi-section {
    background: #131620 !important;
    border-color: #1e2130 !important;
}
.dark .fi-section-header {
    background: #131620 !important;
    border-bottom-color: #1e2130 !important;
}
.dark .fi-section-content {
    background: #131620 !important;
}

/* ── Widgets ── */
.dark .fi-wi-stats-overview-stat {
    background: #131620 !important;
    border-color: #1e2130 !important;
}
.dark [class*="fi-wi-"] {
    background: #131620 !important;
    border-color: #1e2130 !important;
}

/* ── Tables ── */
.dark .fi-ta-table {
    background: #131620 !important;
}
.dark .fi-ta-header-cell {
    background: #0f1117 !important;
    color: #9ca3af !important;
    border-bottom-color: #1e2130 !important;
}
.dark .fi-ta-row {
    border-bottom-color: #1a1d27 !important;
}
.dark .fi-ta-row:hover td {
    background: #1a1d27 !important;
}
.dark .fi-ta-cell {
    color: #d1d5db !important;
}
.dark .fi-ta-empty-state {
    background: #131620 !important;
    color: #6b7280 !important;
}
.dark .fi-ta-filters-form {
    background: #0f1117 !important;
    border-color: #1e2130 !important;
}

/* ── Table wrapper / content ── */
.dark .fi-ta-content {
    background: #131620 !important;
    border-color: #1e2130 !important;
}
.dark .fi-ta-header {
    background: #0f1117 !important;
    border-bottom-color: #1e2130 !important;
}
.dark .fi-ta-footer {
    background: #0f1117 !important;
    border-top-color: #1e2130 !important;
    color: #6b7280 !important;
}

/* ── Form inputs ── */
.dark .fi-input,
.dark .fi-select-input,
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="number"],
.dark select,
.dark textarea {
    background: #1a1d27 !important;
    border-color: #2a2d3a !important;
    color: #e5e7eb !important;
}
.dark .fi-input-wrapper {
    background: #1a1d27 !important;
    border-color: #2a2d3a !important;
}

/* ── Modals ── */
.dark .fi-modal-window {
    background: #131620 !important;
    border-color: #1e2130 !important;
}
.dark .fi-modal-header {
    background: #131620 !important;
    border-bottom-color: #1e2130 !important;
}
.dark .fi-modal-footer {
    background: #131620 !important;
    border-top-color: #1e2130 !important;
}

/* ── Dropdown menus ── */
.dark .fi-dropdown-panel {
    background: #131620 !important;
    border-color: #1e2130 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.5) !important;
}
.dark .fi-dropdown-list-item-label {
    color: #d1d5db !important;
}
.dark .fi-dropdown-list-item:hover {
    background: #1a1d27 !important;
}

/* ── Topbar elements ── */
.dark .fi-topbar-breadcrumbs {
    color: #6b7280 !important;
}
.dark .fi-icon-btn {
    color: #9ca3af !important;
}
.dark .fi-icon-btn:hover {
    background: #1a1d27 !important;
    color: #e5e7eb !important;
}

/* ── Notifications / Alert banners ── */
.dark .fi-notification {
    background: #131620 !important;
    border-color: #1e2130 !important;
}

/* ── Pagination ── */
.dark .fi-pagination {
    background: #0f1117 !important;
    border-color: #1e2130 !important;
    color: #9ca3af !important;
}
.dark .fi-pagination-item-btn {
    color: #9ca3af !important;
}
.dark .fi-pagination-item-btn:hover {
    background: #1a1d27 !important;
    color: #e5e7eb !important;
}
.dark .fi-pagination-item-btn.fi-active {
    background: #6366f1 !important;
    color: #fff !important;
}

/* ── Action buttons ── */
.dark .fi-btn-color-gray {
    background: #1a1d27 !important;
    border-color: #2a2d3a !important;
    color: #d1d5db !important;
}
.dark .fi-btn-color-gray:hover {
    background: #252836 !important;
}

/* ── Tabs ── */
.dark .fi-tabs-tab {
    color: #6b7280 !important;
}
.dark .fi-tabs-tab:hover {
    color: #d1d5db !important;
}
.dark .fi-tabs-tab[aria-selected="true"] {
    color: #818cf8 !important;
    border-color: #818cf8 !important;
}

/* ── HR dividers ── */
.dark hr,
.dark .fi-hr {
    border-color: #1e2130 !important;
}

/* ── Scrollbars in content ── */
.dark * {
    scrollbar-color: #2a2d3a transparent;
}
.dark *::-webkit-scrollbar-thumb {
    background: #2a2d3a !important;
    border-radius: 4px;
}
.dark *::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

/* ═══════════════════════════════════════════
   📱 Mobile / Tablet Responsive Fixes
   Ensures Filament's hamburger menu is reachable
═══════════════════════════════════════════ */

/* ── Tablet & below (≤ 1024px) ── */
@media (max-width: 1024px) {
    /* Hide the centered custom quick-nav — it overlaps the hamburger button */
    .dc-qn-wrap {
        display: none !important;
    }

    /* Make sure Filament's sidebar toggle (hamburger) is always visible & on top */
    .fi-topbar button[x-on\:click*="sidebar"],
    .fi-topbar .fi-icon-btn,
    .fi-sidebar-open-btn,
    .fi-sidebar-close-btn {
        display: inline-flex !important;
        z-index: 50 !important;
    }
}

/* ── Phones (≤ 640px) ── */
@media (max-width: 640px) {
    /* Hide the clock to save space */
    .dc-clock {
        display: none !important;
    }

    /* Brand: keep the icon, hide the long company name text */
    .dc-brand-name,
    .dc-brand-sub {
        display: none !important;
    }
    .dc-brand-link {
        padding: 0 10px !important;
    }

    /* Topbar: prevent horizontal overflow */
    .fi-topbar {
        overflow-x: hidden !important;
    }
    .fi-topbar > * {
        min-width: 0 !important;
    }

    /* Dashboard welcome banner: stack vertically on small screens */
    .dc-stat-card {
        padding: 14px 12px !important;
    }

    /* Make tables horizontally scrollable instead of breaking layout */
    .fi-ta-content {
        overflow-x: auto !important;
    }
}

/* ── Small phones (≤ 400px) ── */
@media (max-width: 400px) {
    .dc-brand-link {
        padding: 0 6px !important;
    }
    .dc-brand-icon {
        width: 28px !important;
        height: 28px !important;
    }
}

/* ═══════════════════════════════════════════
   📱 Dashboard Mobile Layout
═══════════════════════════════════════════ */

/* Tablet: collapse 4/5-column grids to 2 columns */
@media (max-width: 1024px) {
    .dc-dashboard [style*="grid-template-columns:repeat(4"],
    .dc-dashboard [style*="grid-template-columns:repeat(5"],
    .dc-dashboard [style*="grid-template-columns: repeat(4"],
    .dc-dashboard [style*="grid-template-columns: repeat(5"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Phone: everything becomes a single column */
@media (max-width: 640px) {
    .dc-dashboard [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Welcome banner: stack greeting above the stat pills */
    .dc-welcome-banner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 18px !important;
        padding: 22px 20px !important;
    }
    .dc-welcome-banner > div:last-child {
        width: 100% !important;
        justify-content: space-between !important;
    }
    .dc-welcome-banner > div:last-child > div {
        flex: 1 !important;
        min-width: 0 !important;
    }
}