/* =====================================================
   MOBILE APP EXPERIENCE + ANIMATIONS + PERFORMANCE
   Enhanced Design for Desktop & Mobile
   ===================================================== */

/* ── Performance: GPU-accelerated defaults ── */
*,
*::before,
*::after {
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    will-change: auto;
    overscroll-behavior-y: contain;
}

/* ── Page Load Animation ── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 24px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translate3d(-30px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translate3d(30px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale3d(0.92, 0.92, 1); }
    to   { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

@keyframes bounceIn {
    0%   { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
    50%  { transform: scale3d(1.05, 1.05, 1.05); }
    70%  { transform: scale3d(0.95, 0.95, 0.95); }
    100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes ripple {
    to { transform: scale(4); opacity: 0; }
}

@keyframes slideDown {
    from { opacity: 0; transform: translate3d(0, -16px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* ── Animated Page Entry ── */
.main-content {
    animation: fadeIn 0.35s ease-out;
}

.topbar {
    animation: slideDown 0.4s ease-out;
}

.content-wrapper {
    animation: fadeInUp 0.5s ease-out;
    animation-fill-mode: both;
}

/* ── Staggered Card/List Loading ── */
.customer-row,
.stat-card,
.card {
    animation: fadeInUp 0.45s ease-out both;
}

.customer-row:nth-child(2)  { animation-delay: 0.04s; }
.customer-row:nth-child(3)  { animation-delay: 0.08s; }
.customer-row:nth-child(4)  { animation-delay: 0.12s; }
.customer-row:nth-child(5)  { animation-delay: 0.16s; }
.customer-row:nth-child(6)  { animation-delay: 0.20s; }
.customer-row:nth-child(7)  { animation-delay: 0.24s; }
.customer-row:nth-child(8)  { animation-delay: 0.28s; }
.customer-row:nth-child(9)  { animation-delay: 0.32s; }
.customer-row:nth-child(10) { animation-delay: 0.36s; }
.customer-row:nth-child(11) { animation-delay: 0.40s; }

.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.10s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.20s; }

/* ── Enhanced Button Interactions ── */
.btn {
    position: relative;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate3d(0, 0, 0);
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10);
    opacity: 0;
    transition: transform 0.5s, opacity 0.8s;
}

.btn:active::after {
    transform: scale(0);
    opacity: 1;
    transition: 0s;
}

.btn:active {
    transform: scale(0.96);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
}

.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    transform: translateY(-2px);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

/* ── Ripple Effect for Touchable Elements ── */
.menu-item,
.customer-card,
.btn-icon {
    position: relative;
    overflow: hidden;
}

.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
    animation: ripple 0.6s linear;
    pointer-events: none;
}

[data-theme='dark'] .ripple-effect {
    background: rgba(255, 255, 255, 0.1);
}

/* ── Enhanced Cards ── */
.card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.customer-list {
    transition: box-shadow 0.3s ease;
}

.customer-card {
    transition: background 0.2s ease, transform 0.15s ease;
}

.customer-card:active {
    transform: scale(0.985);
    background: var(--hover-bg);
}

/* ── Enhanced Stat Cards ── */
.stat-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    opacity: 0;
    transition: opacity 0.3s;
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* ── Sidebar Enhancements ── */
.sidebar {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-header {
    animation: slideInLeft 0.4s ease-out 0.1s both;
}

.menu-item {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-item:hover {
    transform: translateX(6px);
}

.menu-item.active {
    position: relative;
    border-radius: 0 12px 12px 0;
    margin-right: 0.5rem;
}

.menu-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: var(--primary-color);
    border-radius: 0 4px 4px 0;
}

/* ── Enhanced Topbar ── */
.topbar {
    transition: box-shadow 0.3s ease, background 0.3s ease;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}

/* ── Form Enhancements ── */
.form-control {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-control:focus {
    transform: scale(1.005);
    box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.12);
}

/* ── Enhanced Modal ── */
.modal-overlay {
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Spinner Enhancement ── */
.spinner {
    border-width: 3px;
    border-color: rgba(37, 211, 102, 0.15);
    border-top-color: var(--primary-color);
    animation: spin 0.65s linear infinite;
}

/* ── Loading Skeleton ── */
.skeleton {
    background: linear-gradient(90deg,
        var(--border-color) 25%,
        var(--hover-bg) 50%,
        var(--border-color) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
}

/* ── Badge Animations ── */
.status-badge,
.priority-badge,
.transaction-badge {
    transition: transform 0.2s ease;
}

.status-badge:hover,
.priority-badge:hover {
    transform: scale(1.05);
}

/* ── Tooltip Fade ── */
[title] {
    position: relative;
}

/* ── Enhanced Search Box ── */
.search-box input {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-box input:focus {
    width: 300px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ── Enhanced Scrollbar ── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

[data-theme='dark'] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ── Desktop Hover Enhancements ── */
@media (hover: hover) {
    .customer-card:hover {
        background: var(--hover-bg);
        box-shadow: inset 3px 0 0 var(--primary-color);
    }

    .menu-item:hover .menu-icon {
        transform: scale(1.15);
        transition: transform 0.2s ease;
    }

    .btn-icon:hover {
        background: var(--primary-light);
        color: var(--primary-color);
        transform: scale(1.1);
        transition: all 0.2s ease;
    }

    /* ── Glow hover on primary buttons ── */
    .btn-primary:hover {
        box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45);
        transform: translateY(-2px) scale(1.02);
    }

    .btn-secondary:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .btn-success:hover {
        box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
        transform: translateY(-2px);
    }

    .btn-danger:hover {
        box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
        transform: translateY(-2px);
    }

    /* ── Card 3D tilt on hover ── */
    .card:hover,
    .customer-list:hover {
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
    }

    .customer-card {
        transition: background 0.25s ease, transform 0.25s ease,
                    box-shadow 0.25s ease;
    }

    .customer-card:hover {
        transform: translateX(4px);
    }

    /* ── Stat card lift + glow ── */
    .stat-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
    }

    .stat-card:hover .dash-stat-icon,
    .stat-card:hover .stat-label {
        transform: scale(1.08);
        transition: transform 0.3s ease;
    }

    .stat-card:hover .dash-stat-value,
    .stat-card:hover .stat-value {
        color: var(--primary-color);
        transition: color 0.3s ease;
    }

    /* ── Dashboard elements ── */
    .dash-stat:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .dash-stat:hover .dash-stat-icon {
        animation: float 1.5s ease-in-out infinite;
    }

    .quick-action:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

    .quick-action:hover .quick-action-icon {
        animation: bounceIn 0.5s ease;
    }

    .recent-item:hover {
        background: var(--hover-bg);
        transform: translateX(4px);
        transition: all 0.2s ease;
    }

    .recent-item:hover .recent-avatar {
        transform: scale(1.1);
        transition: transform 0.25s ease;
    }

    .role-bars:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
        transition: box-shadow 0.3s ease;
    }

    .role-bar-fill {
        transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                    filter 0.3s ease;
    }

    .role-bar-item:hover .role-bar-fill {
        filter: brightness(1.15);
    }

    /* ── Menu item shine sweep ── */
    .menu-item::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.06),
            transparent
        );
        transition: left 0.5s ease;
        pointer-events: none;
    }

    .menu-item:hover::after {
        left: 100%;
    }

    /* ── Form focus glow ── */
    .form-control:hover {
        border-color: var(--primary-color);
        box-shadow: 0 2px 8px rgba(37, 211, 102, 0.08);
    }

    /* ── Table row hover ── */
    .perm-table tbody tr {
        transition: background 0.2s ease;
    }
    .perm-table tbody tr:hover {
        background: var(--hover-bg);
    }

    /* ── Logo icon hover spin ── */
    .logo-icon {
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sidebar-header:hover .logo-icon {
        transform: rotate(15deg) scale(1.1);
    }

    /* ── Close button hover ── */
    .close-modal:hover {
        background: var(--danger);
        color: white;
        transform: rotate(90deg);
        transition: all 0.3s ease;
    }

    /* ── Section link hover ── */
    .section-link {
        transition: color 0.2s ease, transform 0.2s ease;
    }
    .section-link:hover {
        transform: translateX(3px);
    }
}

/* ── Login Page Enhancements ── */
.login-container {
    animation: fadeInUp 0.6s ease-out;
}

.login-card {
    animation: scaleIn 0.5s ease-out;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.login-logo {
    animation: bounceIn 0.7s ease-out 0.2s both;
}

.login-title {
    animation: fadeInUp 0.5s ease-out 0.3s both;
}

.login-body .form-group:nth-child(1) { animation: fadeInUp 0.4s ease-out 0.35s both; }
.login-body .form-group:nth-child(2) { animation: fadeInUp 0.4s ease-out 0.45s both; }
.login-body .btn { animation: fadeInUp 0.4s ease-out 0.55s both; }

/* =====================================================
   MOBILE APP EXPERIENCE (< 768px)
   ===================================================== */
@media (max-width: 768px) {

    /* Allow natural page scrolling on mobile */
    html, body {
        overscroll-behavior-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y pinch-zoom;
    }

    /* ── Smoother sidebar drawer ── */
    .sidebar {
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
        backface-visibility: hidden;
    }

    .sidebar-overlay {
        transition: opacity 0.35s ease;
    }

    /* ── Pull-to-feel scrolling ── */
    .content-wrapper {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
    }

    /* ── App-like topbar ── */
    .topbar {
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        box-shadow: 0 1px 0 var(--border-color);
        transition: all 0.3s ease;
    }

    .topbar.scrolled {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* ── Mobile Bottom Safe Area ── */
    .content-wrapper {
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }

    /* ── Modal: Bottom Sheet Style ── */
    .modal-overlay {
        align-items: flex-end;
        backdrop-filter: blur(6px);
    }

    .modal {
        border-radius: 20px 20px 0 0 !important;
        max-height: 95vh !important;
        height: auto !important;
        animation: mobileSlideUp 0.4s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    @keyframes mobileSlideUp {
        from { transform: translate3d(0, 100%, 0); }
        to   { transform: translate3d(0, 0, 0); }
    }

    /* ── Drag handle on modal ── */
    .modal-header::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: var(--border-color);
        border-radius: 4px;
        margin: 0 auto 0.75rem;
    }

    /* ── Mobile card press feedback ── */
    .customer-card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

    /* ── Touch feedback for all interactive elements ── */
    .dash-stat:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }

    .quick-action:active {
        transform: scale(0.92);
        transition: transform 0.08s ease;
    }

    .recent-item:active {
        background: var(--hover-bg);
        transform: scale(0.98);
        transition: all 0.1s ease;
    }

    .role-bar-item:active {
        opacity: 0.7;
        transition: opacity 0.1s ease;
    }

    .menu-item:active {
        transform: scale(0.97);
        background: var(--hover-bg);
        transition: all 0.1s ease;
    }

    .btn:active {
        transform: scale(0.94) !important;
        transition: transform 0.08s ease !important;
    }

    .btn-icon:active {
        transform: scale(0.85);
        background: var(--primary-light);
        transition: all 0.1s ease;
    }

    .close-modal:active {
        transform: scale(0.85) rotate(90deg);
        transition: all 0.1s ease;
    }

    .card:active {
        transform: scale(0.99);
        transition: transform 0.1s ease;
    }

    .section-link:active {
        opacity: 0.6;
        transition: opacity 0.1s ease;
    }

    .logo-icon:active {
        transform: scale(0.9);
        transition: transform 0.1s ease;
    }

    .sidebar-header:active .logo-icon {
        transform: rotate(15deg) scale(0.9);
        transition: transform 0.15s ease;
    }

    /* ── Large touch targets ── */
    .btn-icon {
        min-width: 44px;
        min-height: 44px;
    }

    .menu-item {
        min-height: 48px;
        padding: 0.75rem 1rem;
    }

    /* ── Mobile-specific animations ── */
    .content-wrapper {
        animation: fadeInUp 0.4s ease-out 0.1s both;
    }

    .customer-list {
        animation: scaleIn 0.4s ease-out 0.15s both;
    }

    /* ── Swipe-like card transitions ── */
    .customer-card {
        transition: transform 0.2s ease, background 0.15s ease, opacity 0.2s ease;
    }

    /* ── Full-width login on mobile ── */
    .login-container {
        padding: 0.5rem;
    }

    .login-card {
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }

    .login-header {
        padding: 1.75rem 1.5rem;
    }

    .login-body {
        padding: 1.5rem;
    }

    .login-logo {
        width: 56px;
        height: 56px;
        font-size: 1.75rem;
    }

    /* ── Stats horizontal scroll with snap ── */
    .stats-grid {
        scroll-snap-type: x mandatory;
    }

    .stat-card {
        scroll-snap-align: start;
    }

    /* ── Floating action hint ── */
    .btn-primary.btn-sm {
        border-radius: 24px;
        padding: 0.5rem 1rem;
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
    }

    /* ── Better form experience ── */
    .form-control:focus {
        transform: none;
    }

    /* ── Permission table mobile scrollable ── */
    .perm-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =====================================================
   TABLET ENHANCEMENTS (769px – 1024px)
   ===================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .stat-card:hover {
        transform: translateY(-3px);
    }

    .search-box input:focus {
        width: 260px;
    }
}

/* =====================================================
   DESKTOP ENHANCEMENTS (> 1024px)
   ===================================================== */
@media (min-width: 1025px) {
    /* subtle parallax-feel on card hover */
    .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
    }

    .customer-list:hover {
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
    }

    /* sidebar menu smooth active indicator */
    .menu-item.active {
        background: linear-gradient(90deg, var(--primary-light), transparent);
    }

    /* wider hover lift on dashboard cards */
    .dash-stat:hover {
        transform: translateY(-6px) scale(1.02);
    }

    .quick-action:hover {
        transform: translateY(-5px) scale(1.03);
    }

    .recent-list:hover {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
        transition: box-shadow 0.3s ease;
    }
}

/* =====================================================
   REDUCED MOTION: respect user preferences
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================
   MOBILE COMPACT MODE (Ref: customer_dashboard.php)
   Tighter spacing, smaller fonts, denser layout
   ===================================================== */
@media (max-width: 768px) {

    /* ── Topbar: more compact ── */
    .topbar {
        height: 46px;
        min-height: 46px;
        padding: env(safe-area-inset-top, 0px) 0.5rem 0;
    }

    .page-title {
        font-size: 0.95rem;
    }

    .mobile-menu-btn {
        width: 36px;
        height: 36px;
        font-size: 1.25rem;
    }

    /* ── Content wrapper: tighter padding ── */
    .content-wrapper {
        padding: 0.5rem 0.6rem;
    }

    .content-header {
        margin-bottom: 0.6rem;
    }

    .content-title {
        font-size: 1rem;
    }

    .content-subtitle {
        font-size: 0.75rem;
    }

    /* ── Dashboard: compact greeting ── */
    .greeting-section {
        padding: 0.6rem 0 0.4rem;
    }

    .greeting-hello {
        font-size: 0.75rem;
    }

    .greeting-name {
        font-size: 1.2rem !important;
    }

    .greeting-date {
        font-size: 0.7rem;
    }

    /* ── Dashboard stat cards: compact ── */
    .dash-stats {
        gap: 0.45rem !important;
        margin-bottom: 0.75rem;
    }

    .dash-stat {
        padding: 0.65rem 0.7rem !important;
        border-radius: 12px;
    }

    .dash-stat-icon {
        font-size: 1.15rem;
        margin-bottom: 0.25rem;
    }

    .dash-stat-value {
        font-size: 1.25rem !important;
        line-height: 1.1;
    }

    .dash-stat-label {
        font-size: 0.62rem;
        margin-top: 0.15rem;
        letter-spacing: 0.03em;
    }

    /* ── Quick actions: compact ── */
    .quick-actions {
        gap: 0.4rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.15rem;
    }

    .quick-action {
        padding: 0.55rem 0.7rem;
        min-width: 72px;
        border-radius: 10px;
        gap: 0.2rem;
    }

    .quick-action-icon {
        font-size: 1.15rem;
    }

    .quick-action-label {
        font-size: 0.62rem;
    }

    /* ── Section title: compact ── */
    .section-title {
        font-size: 0.82rem;
        margin-bottom: 0.45rem;
    }

    .section-link {
        font-size: 0.72rem;
    }

    /* ── Role bars: compact ── */
    .role-bars {
        padding: 0.65rem 0.7rem;
        margin-bottom: 0.75rem;
        border-radius: 12px;
    }

    .role-bar-item {
        margin-bottom: 0.55rem;
    }

    .role-bar-name {
        font-size: 0.78rem;
    }

    .role-bar-count {
        font-size: 0.72rem;
    }

    .role-bar-track {
        height: 6px;
    }

    .role-bar-top {
        margin-bottom: 0.25rem;
    }

    /* ── Recent list: compact ── */
    .recent-list {
        border-radius: 12px;
        margin-bottom: 0.75rem;
    }

    .recent-item {
        gap: 0.55rem;
        padding: 0.55rem 0.7rem;
    }

    .recent-avatar {
        width: 34px;
        height: 34px;
        font-size: 0.8rem;
    }

    .recent-name {
        font-size: 0.82rem;
    }

    .recent-username {
        font-size: 0.65rem;
    }

    .recent-role {
        font-size: 0.62rem;
        padding: 0.1rem 0.4rem;
    }

    .recent-date {
        font-size: 0.6rem;
    }

    /* ── Calendar: compact ── */
    .dash-calendar-card,
    .dash-date-details {
        padding: 0.6rem;
        border-radius: 12px;
    }

    .dash-calendar-title {
        font-size: 0.82rem;
    }

    .dash-day-btn {
        min-height: 42px;
        border-radius: 8px;
    }

    .dash-day-number {
        font-size: 0.78rem;
    }

    .dash-day-count {
        font-size: 0.6rem;
    }

    .dash-date-title {
        font-size: 0.82rem;
    }

    .dash-date-summary {
        font-size: 0.68rem;
    }

    .dash-date-item {
        padding: 0.35rem 0.45rem;
        font-size: 0.7rem;
        border-radius: 6px;
    }

    .dash-date-meta {
        font-size: 0.62rem;
    }

    /* ── Cards: compact ── */
    .card {
        border-radius: 12px;
    }

    .card-header {
        padding: 0.6rem 0.75rem;
    }

    .card-title {
        font-size: 0.85rem;
    }

    .card-body {
        padding: 0.6rem 0.75rem;
    }

    /* ── Stats grid: compact ── */
    .stat-card {
        padding: 0.65rem;
        border-radius: 10px;
        min-width: 90px;
    }

    .stat-label {
        font-size: 0.62rem;
        margin-bottom: 0.15rem;
    }

    .stat-value {
        font-size: 1.2rem;
    }

    /* ── Customer toolbar: compact ── */
    .customer-toolbar {
        padding: 0.5rem 0.65rem;
        gap: 0.35rem;
        margin-bottom: 0.5rem;
        border-radius: 10px;
    }

    /* ── Customer list rows: compact ── */
    .customer-list {
        border-radius: 10px;
    }

    .customer-row:not(.customer-row-header) {
        padding: 0.55rem 0.7rem;
        gap: 0.1rem 0.35rem;
    }

    .col-name {
        font-size: 0.88rem;
    }

    .col-mobile {
        font-size: 0.72rem;
    }

    .col-email {
        font-size: 0.72rem;
    }

    .col-date {
        font-size: 0.65rem;
    }

    /* ── Lead rows: compact ── */
    .lead-row:not(.lead-row-header) {
        padding: 0.55rem 0.7rem;
    }

    .col-lead-name {
        font-size: 0.88rem;
    }

    .col-lead-date {
        font-size: 0.65rem;
    }

    .col-lead-mobile {
        font-size: 0.72rem;
    }

    .col-lead-service {
        font-size: 0.72rem;
    }

    /* ── Buttons: compact but still touch-friendly ── */
    .btn {
        min-height: 40px;
        padding: 0.45rem 0.85rem;
        font-size: 0.82rem;
        border-radius: 8px;
    }

    .btn-sm {
        min-height: 36px;
        padding: 0.35rem 0.7rem;
        font-size: 0.78rem;
    }

    .btn-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    /* ── Forms: compact ── */
    .form-group {
        margin-bottom: 0.75rem;
    }

    .form-label {
        font-size: 0.75rem;
        margin-bottom: 0.3rem;
    }

    .form-control {
        min-height: 42px;
        padding: 0.55rem 0.75rem;
        font-size: 0.88rem;
        border-radius: 8px;
    }

    /* ── Modals: compact header/body ── */
    .modal-header {
        padding: 0.65rem 0.85rem;
        min-height: 48px;
    }

    .modal-title {
        font-size: 1rem;
    }

    .close-modal {
        width: 34px;
        height: 34px;
        font-size: 1.4rem;
    }

    .modal-body {
        padding: 0.7rem 0.85rem;
    }

    /* ── Transaction items: compact ── */
    .transaction-item {
        padding: 0.55rem 0.7rem;
        gap: 0.35rem;
    }

    .transaction-desc {
        font-size: 0.82rem;
    }

    .transaction-date {
        font-size: 0.65rem;
    }

    .transaction-amount {
        font-size: 0.82rem;
    }

    .transaction-badge {
        font-size: 0.6rem;
        padding: 0.1rem 0.35rem;
    }

    /* ── Balance section: compact ── */
    .balance-section {
        padding-top: 0.35rem;
        margin-top: 0.35rem;
    }

    .balance-label {
        font-size: 0.65rem;
    }

    .balance-amount {
        font-size: 0.88rem;
    }

    /* ── Status / priority badges: compact ── */
    .status-badge,
    .priority-badge {
        font-size: 0.6rem;
        padding: 0.15rem 0.4rem;
    }

    /* ── Kanban: compact ── */
    .kanban-board {
        padding: 0.35rem;
        gap: 0.5rem;
    }

    .kanban-column {
        flex: 0 0 220px;
        min-width: 200px;
    }

    .kanban-column-header {
        padding: 0.6rem 0.7rem;
    }

    .kanban-col-title {
        font-size: 0.78rem;
    }

    /* ── Permission table: compact ── */
    .perm-table th,
    .perm-table td {
        padding: 0.4rem 0.5rem;
        font-size: 0.75rem;
    }

    /* ── Footer: compact ── */
    .app-footer {
        padding: 0.5rem 0.75rem;
        font-size: 0.65rem;
    }

    /* ── Lead detail grid ── */
    .lead-detail-label {
        font-size: 0.6rem;
    }

    .lead-detail-val {
        font-size: 0.78rem;
    }

    /* ── Sidebar menu items: slightly tighter ── */
    .sidebar .menu-item {
        min-height: 42px;
        padding: 0.55rem 0.85rem;
        font-size: 0.85rem;
    }

    /* ── Sidebar header: compact ── */
    .sidebar-header {
        padding: 0.55rem 0.85rem;
    }

    .logo {
        font-size: 0.95rem;
    }

    .logo-icon {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }

    /* ── Action modal buttons: compact ── */
    .customer-action-btn {
        padding: 0.55rem 0.75rem;
        font-size: 0.82rem;
        border-radius: 8px;
    }

    /* ── Dash header card: compact ── */
    .dash-header-card {
        padding: 0.55rem 0.7rem;
        margin-bottom: 0.5rem;
        border-radius: 10px;
    }

    /* ── Lead options tabs: compact ── */
    .lead-opt-tab {
        padding: 0.4rem 0.85rem;
        font-size: 0.78rem;
    }
}

/* ── Extra compact for very small screens ── */
@media (max-width: 380px) {
    .content-wrapper {
        padding: 0.4rem 0.45rem;
    }

    .dash-stats {
        gap: 0.35rem !important;
    }

    .dash-stat {
        padding: 0.5rem 0.55rem !important;
    }

    .dash-stat-value {
        font-size: 1.1rem !important;
    }

    .dash-stat-label {
        font-size: 0.58rem;
    }

    .quick-action {
        padding: 0.45rem 0.55rem;
        min-width: 64px;
    }

    .quick-action-icon {
        font-size: 1rem;
    }

    .quick-action-label {
        font-size: 0.58rem;
    }

    .recent-item {
        padding: 0.45rem 0.55rem;
    }

    .recent-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.72rem;
    }

    .recent-name {
        font-size: 0.78rem;
    }

    .customer-row:not(.customer-row-header) {
        padding: 0.45rem 0.55rem;
    }

    .col-name {
        font-size: 0.82rem;
    }
}

/* =====================================================
   PRINT: clean output
   ===================================================== */
@media print {
    .no-print,
    .sidebar,
    .sidebar-overlay,
    .topbar,
    .mobile-menu-btn,
    .btn {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    body {
        background: white !important;
        color: black !important;
    }
}