/* ==========================================================================
   Responsive Core CSS - Mobile First Premium Design
   ========================================================================== */
:root {
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --bg-light: #f8fafc;
    --border-color: #e2e8f0;
    --primary-color: #10b981;
    --primary-hover: #059669;
    --font-primary: 'Inter', 'Roboto', 'Open Sans', sans-serif;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    font-family: var(--font-primary);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { line-height: 1.3; font-weight: 700; color: #0f172a; }
p { margin-bottom: var(--spacing-md); color: var(--text-secondary); }

/* Z-INDEX SYSTEM */
.z-header { z-index: 50; }
.z-dropdown { z-index: 100; }
.z-overlay { z-index: 9990; }
.z-offcanvas { z-index: 9999; }

/* TOUCH TARGETS */
@media (pointer: coarse) {
    button, .btn, .nav-link, .mobile-dropdown-toggle, a.touch-target {
        min-height: 44px; min-width: 44px;
        padding-top: 10px; padding-bottom: 10px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    p a { min-height: auto; min-width: auto; padding: 0; display: inline; }
}

/* HORIZONTAL SCROLL TABEL */
.table-responsive-wrapper {
    width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin-bottom: var(--spacing-md); border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); background: white;
    border: 1px solid var(--border-color);
}
.table-responsive-wrapper table { width: 100%; min-width: 600px; border-collapse: collapse; }
.table-responsive-wrapper th, .table-responsive-wrapper td {
    padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-color); white-space: nowrap;
}
.table-responsive-wrapper th { background-color: var(--bg-light); font-weight: 600; }

/* OFF-CANVAS MENU & OVERLAY */
body.menu-open { overflow: hidden; }
.mobile-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px); z-index: 9998; opacity: 0; visibility: hidden;
    transition: var(--transition-smooth);
}
.mobile-overlay.active { opacity: 1; visibility: visible; }