/* Mobile-First Responsive CSS */
/* This file contains mobile-specific overrides and responsive adjustments */
/* Load this after all other CSS files for proper override behavior */

/* CSS Custom Properties for Mobile */
:root {
    --mobile-header-height: 70px;
    --mobile-sidebar-width: 260px;
    --mobile-content-padding: 10px;
    --mobile-button-height: 44px;
    --mobile-touch-target: 44px;
    --mobile-border-radius: 8px;
    --mobile-transition: 0.3s ease;
    --vh: 1vh;
    --sidebar-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Base Mobile Optimizations */
@media (max-width: 768px) {
    /* Global mobile adjustments */
    html {
        font-size: 14px;
        -webkit-text-size-adjust: 100%;
    }
    
    body {
      overflow-x: hidden;
    }
    
    /* Mobile Offcanvas Sidebar Styling */
    .offcanvas.offcanvas-start {
  background: var(--sidebar-gradient) !important;
 width: var(--mobile-sidebar-width) !important;
   color: white !important;
    }
    
    .offcanvas-header {
 background: transparent !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
 padding: 15px 20px !important;
    }
    
.offcanvas-body {
background: transparent !important;
    padding: 0 !important;
    }
    
    /* Force white text on all mobile sidebar content */
   
 
    /* Mobile Navigation Styling */
    .offcanvas .navbar-nav {
  padding: 0 !important;
    }
    
    .offcanvas .nav-link {
        color: white !important;
     min-height: var(--mobile-touch-target) !important;
     transition: background var(--mobile-transition) !important;
 padding: 15px 20px !important;
  display: flex !important;
   align-items: center !important;
        font-size: 14px !important;
    }
    
    .offcanvas .nav-link:hover,
    .offcanvas .nav-link:focus {
        background: rgba(255, 255, 255, 0.1) !important;
        color: white !important;
        text-decoration: none !important;
    }
    
    .offcanvas .nav-link.active {
        background: rgba(255, 255, 255, 0.15) !important;
    }
    
    .offcanvas .nav-link i {
        margin-right: 12px !important;
  width: 18px !important;
        text-align: center !important;
        color: white !important;
   font-size: 14px !important;
    }
    
    .offcanvas .nav-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Mobile Dropdown/Collapse Styling */
.offcanvas .navbar-nav .ms-3 {
      background: rgba(0, 0, 0, 0.1) !important;
        margin-left: 0 !important;
  }
    
    .offcanvas .navbar-nav .ms-3 .nav-link {
        padding: 12px 15px 12px 45px !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.9) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        min-height: 40px !important;
    }
    
    .offcanvas .navbar-nav .ms-3 .nav-link:hover,
    .offcanvas .navbar-nav .ms-3 .nav-link:focus {
        background: rgba(255, 255, 255, 0.08) !important;
        color: white !important;
    }
    
    .offcanvas .navbar-nav .ms-3 .nav-link i {
      margin-right: 10px !important;
        width: 16px !important;
        font-size: 12px !important;
    }
    
   
    
    /* Mobile Sidebar Bottom Controls */
    .offcanvas .mt-auto {
        background: rgba(0, 0, 0, 0.1) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
        padding: 10px 15px !important;
    }
    
    .offcanvas .mt-auto > div {
        padding: 8px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .offcanvas .mt-auto > div:last-child {
        border-bottom: none !important;
    }
    
    .offcanvas .mt-auto .form-label {
   color: rgba(255, 255, 255, 0.7) !important;
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }
    
    .offcanvas .form-select {
     background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
   color: white !important;
    font-size: 12px !important;
    }
    
    .offcanvas .form-select:focus {
   background: rgba(255, 255, 255, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.4) !important;
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25) !important;
    }
    
    .offcanvas .form-select option {
        background: #343a40 !important;
        color: white !important;
    }
    
    .offcanvas .btn-outline-light {
        border-color: rgba(255, 255, 255, 0.3) !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
    
    .offcanvas .btn-outline-light:hover {
 background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.5) !important;
    }
    
    .offcanvas .btn-outline-danger {
  border-color: rgba(220, 53, 69, 0.6) !important;
      color: rgba(220, 53, 69, 0.9) !important;
     font-size: 11px !important;
        padding: 6px 10px !important;
    }
    
  .offcanvas .btn-outline-danger:hover {
  background: rgba(220, 53, 69, 0.1) !important;
border-color: rgba(220, 53, 69, 0.8) !important;
    }
    
    /* Admin Layout Mobile Adjustments */
    .admin-sidebar {
      display: none !important;
    }
    
    .admin-main {
        width: 100%;
  margin-left: 0;
    }
 
    .admin-header {
        position: fixed;
        top: 0;
        left: 0;
    right: 0;
        z-index: 1040;
        height: var(--mobile-header-height);
    }
    
    .admin-content {
        margin-top: var(--mobile-header-height);
        padding: var(--mobile-content-padding);
    }
    
    /* Mobile Dashboard Grid - Use Bootstrap Grid */
    .admin-content .row {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
    }
    
    /* Mobile Dashboard Cards - Compact */
    .admin-content .admin-card {
  padding: 10px !important;
        margin-bottom: 8px !important;
        min-height: 140px !important;
    }
    
  .admin-content .admin-card-header i {
   font-size: 1.25rem !important;
    }
    
    .admin-content .admin-card-title {
        font-size: 0.85rem !important;
        line-height: 1.1 !important;
    }
    
    .admin-content .admin-card .h2 {
        font-size: 1.5rem !important;
        margin: 4px 0 !important;
    }
    
    .admin-content .admin-card p.text-muted {
     font-size: 0.75rem !important;
        margin: 2px 0 6px 0 !important;
    }
    
    .admin-content .admin-card .admin-btn {
     padding: 4px 8px !important;
        font-size: 0.7rem !important;
   min-height: 28px !important;
    }
    
    /* System Status Tile Mobile */
    .admin-content .system-status-tile .status-carousel {
   min-height: 50px !important;
    }
 
    .admin-content .system-status-tile .group-name {
  font-size: 0.7rem !important;
    }
    
 .admin-content .system-status-tile .service-status-row {
    font-size: 0.55rem !important;
    }
    
    .admin-content .system-status-tile .status-indicator {
        font-size: 0.5rem !important;
     padding: 1px 2px !important;
    }
    
    /* Table Responsive */
    .admin-content .admin-table {
   font-size: 0.75rem !important;
    }
    
    .admin-content .admin-table th,
    .admin-content .admin-table td {
        padding: 6px 4px !important;
    }
    
 .admin-content .admin-table th {
        font-size: 0.65rem !important;
    }
    
    .admin-content .admin-table .status-badge {
        font-size: 0.6rem !important;
        padding: 2px 3px !important;
    }
}

/* Desktop Layout (Large screens and up) */
@media (min-width: 992px) {
 /* Desktop Sidebar */
    .admin-container .admin-sidebar,
 nav.admin-sidebar {
        display: flex !important;
flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        width: var(--mobile-sidebar-width) !important;
        z-index: 1000 !important;
      background: var(--sidebar-gradient) !important;
        overflow-y: auto !important;
        color: white !important;
    }
    
    /* Force white text on all sidebar content */
    .admin-sidebar,
    .admin-sidebar .language-selector *,
    .admin-sidebar .site-selector * {
        color: white;
    }
            .admin-sidebar .language-selector select option {
                color: black;
            }
            .admin-main {
                margin-left: var(--mobile-sidebar-width) !important;
            }
    
    .admin-container.sidebar-collapsed .admin-sidebar {
        margin-left: calc(-1 * var(--mobile-sidebar-width) + 60px) !important;
    }
    
    .admin-container.sidebar-collapsed .admin-main {
        margin-left: 60px !important;
    }
    
    /* Desktop sidebar styling */
    .admin-sidebar .sidebar-header,
    nav.admin-sidebar .sidebar-header {
        padding: 15px 20px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
        background: transparent !important;
    }
    
    .admin-sidebar .sidebar-menu,
    nav.admin-sidebar .sidebar-menu {
        padding: 0 !important;
   margin: 0 !important;
        list-style: none !important;
        background: transparent !important;
    }
    
    .admin-sidebar .menu-item,
    nav.admin-sidebar .menu-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
   background: transparent !important;
    }
    
    /* Desktop sidebar menu styling */
    .admin-sidebar .menu-item .menu-link,
    nav.admin-sidebar .menu-item .menu-link {
 padding: 15px 20px !important;
 color: #ffffff !important;
   transition: background var(--mobile-transition) !important;
 display: flex !important;
        align-items: center !important;
   text-decoration: none !important;
        background: transparent !important;
    }
    
    .admin-sidebar .menu-item .menu-link:hover,
    nav.admin-sidebar .menu-item .menu-link:hover {
        background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    text-decoration: none !important;
  }
    
    .admin-sidebar .menu-item .menu-link i,
    nav.admin-sidebar .menu-item .menu-link i {
 margin-right: 12px !important;
    width: 18px !important;
        text-align: center !important;
        color: white !important;
        font-size: 14px !important;
    }
    
    .admin-sidebar .submenu,
    nav.admin-sidebar .submenu {
        background: rgba(0, 0, 0, 0.1) !important;
      list-style: none !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    
  .admin-sidebar .submenu .submenu-link,
    nav.admin-sidebar .submenu .submenu-link {
        padding: 12px 15px 12px 50px !important;
        color: rgba(255, 255, 255, 0.9) !important;
  font-size: 13px !important;
        min-height: 40px !important;
     display: flex !important;
     align-items: center !important;
        text-decoration: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        background: transparent !important;
    }
    
    .admin-sidebar .submenu .submenu-link:hover,
    nav.admin-sidebar .submenu .submenu-link:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
     text-decoration: none !important;
    }
    
    .admin-sidebar .submenu .submenu-link i,
  nav.admin-sidebar .submenu .submenu-link i {
        margin-right: 10px !important;
 width: 16px !important;
        text-align: center !important;
      color: white !important;
        font-size: 12px !important;
    }
    
    .admin-sidebar .submenu-arrow,
    nav.admin-sidebar .submenu-arrow {
        margin-left: auto !important;
        transition: transform 0.3s ease !important;
    font-size: 12px !important;
    color: white !important;
    }
    
    .admin-sidebar .menu-link[aria-expanded="true"] .submenu-arrow,
    nav.admin-sidebar .menu-link[aria-expanded="true"] .submenu-arrow {
        transform: rotate(180deg) !important;
    }
    
    /* Desktop sidebar bottom controls */
    .admin-sidebar .mt-auto,
    nav.admin-sidebar .mt-auto {
     background: rgba(0, 0, 0, 0.1) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
  
    .admin-sidebar .form-select,
nav.admin-sidebar .form-select {
      background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: white !important;
    }
    
    .admin-sidebar .btn-outline-light,
    nav.admin-sidebar .btn-outline-light {
        border-color: rgba(255, 255, 255, 0.3) !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }
    
  .admin-sidebar .btn-outline-danger,
    nav.admin-sidebar .btn-outline-danger {
   border-color: rgba(220, 53, 69, 0.6) !important;
        color: rgba(220, 53, 69, 0.9) !important;
    }
}

/* Small Mobile Devices (max-width: 480px) - Single Column */
@media (max-width: 480px) {
    :root {
     --mobile-content-padding: 8px;
        --mobile-header-height: 60px;
        --mobile-sidebar-width: 240px;
    }
    
    .admin-header {
      height: var(--mobile-header-height);
    }
    
    .admin-content {
        margin-top: var(--mobile-header-height);
        padding: var(--mobile-content-padding);
    }
    
    /* Even more compact cards */
    .admin-content .admin-card {
        padding: 8px !important;
        min-height: 120px !important;
    }
    
    .admin-content .admin-card-title {
font-size: 0.8rem !important;
    }
    
    .admin-content .admin-card .h2 {
        font-size: 1.3rem !important;
    }
    
    .admin-content .admin-card .admin-btn {
font-size: 0.65rem !important;
        min-height: 26px !important;
    }
}

/* Touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .nav-link,
    .menu-link {
        min-height: var(--mobile-touch-target);
    }
}

/* Performance optimizations */
@media (max-width: 768px) {
  .admin-content,
    .offcanvas-body,
    .modal-body,
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .form-control,
    .form-select {
        -webkit-appearance: none;
  }
    
    .form-control,
    .form-select,
 input,
    textarea {
        font-size: 16px !important;
 }
}

/* Print styles */
@media print {
    .admin-sidebar,
    .admin-header,
    .btn,
    .modal,
  .offcanvas {
        display: none !important;
  }
    
    .admin-main {
        width: 100% !important;
        margin: 0 !important;
    }
    
    .admin-content {
        margin: 0 !important;
        padding: 0 !important;
    }
}