/**
 * Compact UI & Theme Text Contrast Fixes
 * Ensures readable text across all theme colors
 */

/* ===== COMPACT UI IMPROVEMENTS ===== */

/* Reduce overall page padding */
.container-fluid {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Compact page containers */
.container-fluid.py-4 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* Compact page titles */
.page-title {
    font-size: 1.25rem !important;
    margin-bottom: 0.25rem !important;
    font-weight: 600 !important;
}

.page-title i {
    font-size: 1.1rem !important;
}

/* Tighter card spacing - EXTRA COMPACT */
.card {
    margin-bottom: 0.5rem !important;
}

/* Card with dropdowns - allow overflow for action menus */
.card.az-card-dropdown {
    overflow: visible !important;
}

/* Card body should also allow overflow when parent card has dropdowns */
.card.az-card-dropdown .card-body {
    overflow: visible !important;
}

.card-body {
    padding: 0.5rem !important;
}

.card-header {
    padding: 0.35rem 0.5rem !important;
    font-size: 0.85rem !important;
}

/* Statistics cards - super compact */
.card.bg-primary.bg-opacity-10 .card-body,
.card.bg-success.bg-opacity-10 .card-body,
.card.bg-info.bg-opacity-10 .card-body,
.card.bg-secondary.bg-opacity-10 .card-body,
.card.bg-warning.bg-opacity-10 .card-body,
.card.bg-danger.bg-opacity-10 .card-body {
    padding: 0.4rem 0.5rem !important;
}

/* Compact form controls */
.form-control, 
.form-select {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
}

.form-control-sm, 
.form-select-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8rem !important;
}

/* ===== TEXT CONTRAST FIXES ===== */

/* Ensure text-muted is always readable */
.text-muted {
    color: var(--az-text-muted) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--az-text-muted) !important;
}

/* Badge text contrast - ensure white text on colored backgrounds */
.badge {
    color: var(--az-text-white) !important;
    font-weight: 500 !important;
}

.badge.bg-warning,
.badge.bg-light {
    color: var(--az-text-primary) !important;
}

/* Ensure table text is readable - EXTRA COMPACT */
.table {
    font-size: 0.8rem !important;
}

/* Allow dropdown menus inside tables to escape table clipping.
   We keep the global `.table { overflow: hidden; }` elsewhere for rounded corners,
   but for action dropdowns we need overflow visible. */
.table.az-dropdown-table {
    overflow: visible !important;
}

/* Ensure dropdown overlays elements below the table (e.g. info banners/alerts). */
.table.az-dropdown-table .dropdown {
    position: relative;
    z-index: 9998;
}

.table.az-dropdown-table .dropdown-menu {
    z-index: 9999 !important;
}

/* ===== DROPDOWN VISIBILITY FIX (TABLES) =====
   Bootstrap dropdowns inside `.table-responsive` can appear "behind" or become unclickable
   due to overflow/stacking context. We scope this fix to tables that opt-in via class. 
   
   SOLUTION: Let dropdowns render OUTSIDE the container boundaries (like Bootstrap, MUI, Ant Design).
   Both overflow-x and overflow-y must be visible to allow dropdown menus to escape container. */
.table-responsive.az-table-responsive {
    overflow: visible !important;
    position: relative;
    z-index: 50;
}

.table-responsive.az-table-responsive .dropdown-menu {
    z-index: 2000;
}

/* Appointments page: keep the info banner below action dropdowns */
.az-appointments-info-banner {
    position: relative;
    z-index: 1;
}

.table td,
.table th {
    padding: 0.35rem 0.5rem !important;
    vertical-align: middle !important;
    line-height: 1.2 !important;
}

.table thead th {
    padding: 0.4rem 0.5rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

/* Table small text even smaller */
.table td small,
.table th small {
    font-size: 0.7rem !important;
}

.table td strong,
.table th strong {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

/* Statistics cards - ensure readable text */
.card .text-primary,
.card .text-success,
.card .text-info,
.card .text-warning,
.card .text-danger,
.card .text-secondary {
    opacity: 1 !important;
}

/* Ensure small text is readable */
small {
    font-size: 0.8rem !important;
}

.small {
    font-size: 0.875rem !important;
}

/* Button sizing - more compact */
.btn-sm {
    padding: 0.25rem 0.75rem !important;
    font-size: 0.8rem !important;
}

.btn {
    font-size: 0.875rem !important;
}

/* ===== THEME-SPECIFIC TEXT FIXES ===== */

/* Ensure text is visible on all theme backgrounds */
[data-theme="dark"] .card {
    color: var(--az-text-primary, #e5e7eb) !important;
}

[data-theme="dark"] .card-header {
    color: var(--az-text-primary, #e5e7eb) !important;
}

/* Fix white text issues on colored backgrounds */
.bg-primary .text-muted,
.bg-success .text-muted,
.bg-info .text-muted,
.bg-warning .text-muted,
.bg-danger .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Ensure modal text is readable */
.modal-body {
    color: var(--az-text-primary, #374151) !important;
}

[data-theme="dark"] .modal-body {
    color: var(--az-text-primary, #e5e7eb) !important;
}

/* ===== SPECIFIC FIXES FOR PRODUCTS PAGE ===== */

/* Statistics cards text */
.card.bg-primary.bg-opacity-10 .text-muted,
.card.bg-success.bg-opacity-10 .text-muted,
.card.bg-info.bg-opacity-10 .text-muted,
.card.bg-secondary.bg-opacity-10 .text-muted,
.card.bg-warning.bg-opacity-10 .text-muted {
    color: #6c757d !important;
}

[data-theme="dark"] .card.bg-primary.bg-opacity-10 .text-muted,
[data-theme="dark"] .card.bg-success.bg-opacity-10 .text-muted,
[data-theme="dark"] .card.bg-info.bg-opacity-10 .text-muted,
[data-theme="dark"] .card.bg-secondary.bg-opacity-10 .text-muted,
[data-theme="dark"] .card.bg-warning.bg-opacity-10 .text-muted {
    color: #adb5bd !important;
}

/* Force dark text colors on light colored backgrounds */
.card.bg-warning.bg-opacity-10 .text-warning,
.card.bg-warning .text-warning {
    color: #856404 !important; /* Dark warning color */
}

.card.bg-primary.bg-opacity-10 .text-primary,
.card.bg-primary .text-primary {
    color: #084298 !important; /* Dark primary */
}

.card.bg-success.bg-opacity-10 .text-success,
.card.bg-success .text-success {
    color: #0f5132 !important; /* Dark success */
}

.card.bg-info.bg-opacity-10 .text-info,
.card.bg-info .text-info {
    color: #055160 !important; /* Dark info */
}

.card.bg-danger.bg-opacity-10 .text-danger,
.card.bg-danger .text-danger {
    color: #842029 !important; /* Dark danger */
}

.card.bg-secondary.bg-opacity-10 .text-secondary,
.card.bg-secondary .text-secondary {
    color: #41464b !important; /* Dark secondary */
}

/* Ensure icons are visible */
.fas, .far, .fab {
    opacity: 1 !important;
}

/* ===== SPACING IMPROVEMENTS ===== */

/* Reduce heading margins */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.5rem !important;
}

.h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 0.5rem !important;
}

.h1 { font-size: 1.5rem !important; }
.h2 { font-size: 1.35rem !important; }
.h3 { font-size: 1.2rem !important; }
.h4 { font-size: 1.1rem !important; }
.h5 { font-size: 1rem !important; }
.h6 { font-size: 0.9rem !important; }

/* Tighter row gutters */
.row {
    --bs-gutter-x: 0.75rem !important;
    --bs-gutter-y: 0.75rem !important;
}

/* Reduce margin utilities - AGGRESSIVE */
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.6rem !important; }
.mb-4 { margin-bottom: 0.75rem !important; }
.mb-5 { margin-bottom: 1rem !important; }

.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.6rem !important; }
.mt-4 { margin-top: 0.75rem !important; }
.mt-5 { margin-top: 1rem !important; }

.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 0.6rem !important; padding-bottom: 0.6rem !important; }
.py-4 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.py-5 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 0.6rem !important; padding-right: 0.6rem !important; }
.px-4 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

/* Gap utilities */
/* IMPORTANT: Bootstrap `.g-*` controls gutters via CSS variables, not `gap`.
   Using `gap` on `.row` can force columns to wrap (e.g. 8/4 + gap > 100%). */
.g-1 { --bs-gutter-x: 0.25rem !important; --bs-gutter-y: 0.25rem !important; }
.g-2 { --bs-gutter-x: 0.4rem !important;  --bs-gutter-y: 0.4rem !important; }
.g-3 { --bs-gutter-x: 0.6rem !important;  --bs-gutter-y: 0.6rem !important; }
.g-4 { --bs-gutter-x: 0.75rem !important; --bs-gutter-y: 0.75rem !important; }

.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.4rem !important; }
.gap-3 { gap: 0.6rem !important; }

/* ===== RESPONSIVE IMPROVEMENTS ===== */

@media (max-width: 768px) {
    .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .card-body {
        padding: 0.5rem !important;
    }
    
    .table {
        font-size: 0.8rem !important;
    }
    
    /* Disable sidebar resizing on mobile/tablet */
    .sidebar {
        width: 180px !important;
        flex: 0 0 180px !important;
    }
    
    .sidebar-resize-handle {
        display: none;
    }
    
    .sidebar + div {
        max-width: calc(100% - 180px) !important;
    }
}

/* ===== COMPACT SIDEBAR ===== */

/* Logo container - full width */
.sidebar .logo-container {
    padding: 1.25rem 0.75rem !important;
    min-height: 60px;
}

.sidebar .logo-container img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Compact sidebar navigation */
.sidebar .flex-grow-1.p-2 {
    padding: 0.5rem !important;
}

/* Compact nav links */
.sidebar .nav-link {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.6rem !important;
    margin: 0.5px 2px !important;
    border-radius: 5px !important;
}

/* Compact nav icons */
.sidebar .nav-link i {
    font-size: 0.85rem !important;
    width: 16px !important;
    text-align: center;
}

.sidebar .nav-link .me-3 {
    margin-right: 0.5rem !important;
}

.sidebar .nav-link .me-2 {
    margin-right: 0.4rem !important;
}

/* Compact section headers */
.sidebar .nav-section-header {
    font-size: 0.65rem !important;
    margin: 0.75rem 0.5rem 0.35rem 0.5rem !important;
    letter-spacing: 0.05em !important;
    font-weight: 600 !important;
}

/* Compact sub-menu items */
.sidebar .nav .ms-3 {
    margin-left: 0.75rem !important;
}

.sidebar .nav .ms-3 .nav-link {
    padding: 0.3rem 0.5rem !important;
    font-size: 0.75rem !important;
}

.sidebar .nav .ms-3 .nav-link i {
    font-size: 0.75rem !important;
}

/* Compact collapse icon */
.sidebar .collapse-icon {
    font-size: 0.7rem !important;
}

/* Compact sidebar footer */
.sidebar .sidebar-footer {
    padding: 0.5rem !important;
    font-size: 0.75rem !important;
}

.sidebar .sidebar-footer .btn {
    padding: 0.35rem 0.65rem !important;
    font-size: 0.75rem !important;
}

/* Reduce nav-item bottom margin */
.sidebar .nav-item.mb-1 {
    margin-bottom: 0.15rem !important;
}

/* Theme-aware sidebar (maintain existing gradient logic) */
/* Resizable sidebar */
.sidebar {
    min-height: 100vh;
    width: var(--sidebar-width, 220px);
    min-width: 180px;
    max-width: 400px;
    flex: 0 0 var(--sidebar-width, 220px);
    position: relative;
}

.sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    z-index: 1000;
    transition: background 0.2s;
}

.sidebar-resize-handle:hover {
    background: rgba(124, 90, 155, 0.3);
    width: 8px;
}

.sidebar-resize-handle.resizing {
    background: rgba(124, 90, 155, 0.5);
    width: 8px;
}

/* Adjust main content to accommodate narrower sidebar */
.sidebar + div {
    flex: 1;
    max-width: calc(100% - var(--sidebar-width, 220px));
}

/* Ensure sidebar text is readable on theme backgrounds */
.sidebar .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

.sidebar .nav-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.sidebar .nav-link.active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

.sidebar .nav-section-header {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Compact sidebar border */
.sidebar .border-bottom {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ===== COMPACT NAVBAR ===== */

/* Compact top navbar */
.navbar {
    min-height: 45px !important;
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
}

.navbar-brand {
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
}

.navbar .btn {
    padding: 0.25rem 0.6rem !important;
    font-size: 0.8rem !important;
}

.navbar .dropdown-menu {
    font-size: 0.85rem !important;
}

.navbar .dropdown-item {
    padding: 0.35rem 1rem !important;
}