/* ============================================================== */
/* GROWCRM — Responsive System (Mobile / Tablet / Desktop)       */
/* ============================================================== */

/* ---------- UTILITY: visibility helpers ---------- */
@media (min-width: 768px) { .hidden-md-up { display: none !important; } }
@media (max-width: 767.98px) { .hidden-sm-down { display: none !important; } }

/* ---------- MOBILE (< 768px) ---------- */
@media (max-width: 767.98px) {
  /* --- Sidebar: off-screen, overlays when toggled --- */
  .left-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -280px !important;
    width: 280px !important;
    height: 100vh !important;
    z-index: 1050 !important;
    transition: left 0.3s ease !important;
    overflow-y: auto !important;
    box-shadow: 2px 0 20px rgba(0,0,0,0.15) !important;
  }
  /* Dark sidebar only for midnight/dark theme */
  [data-bs-theme="midnight"] .left-sidebar,
  html.midnight .left-sidebar {
    background: #333d54 !important;
    color: #cbd5e1 !important;
  }
  [data-bs-theme="midnight"] .left-sidebar .sidebar-nav,
  html.midnight .left-sidebar .sidebar-nav { background: #333d54 !important; }
  [data-bs-theme="midnight"] .left-sidebar #sidebarnav > li > a,
  html.midnight .left-sidebar #sidebarnav > li > a { color: #cbd5e1 !important; }
  [data-bs-theme="midnight"] .left-sidebar .sidebar-nav > ul > li > a i,
  html.midnight .left-sidebar .sidebar-nav > ul > li > a i { color: #8d95a9 !important; }
  /* Light sidebar for default theme (theme CSS forces dark, override it) */
  [data-bs-theme="default"] .left-sidebar,
  html.default .left-sidebar {
    background: #ffffff !important;
    color: #526066 !important;
    border-right: 1px solid #e2e8f0 !important;
  }
  [data-bs-theme="default"] .left-sidebar .sidebar-nav,
  html.default .left-sidebar .sidebar-nav { background: #ffffff !important; }
  [data-bs-theme="default"] .left-sidebar #sidebarnav > li > a,
  html.default .left-sidebar #sidebarnav > li > a { color: #526066 !important; }
  [data-bs-theme="default"] .left-sidebar .sidebar-nav > ul > li > a i,
  html.default .left-sidebar .sidebar-nav > ul > li > a i { color: #64748b !important; }
  body.show-sidebar .left-sidebar {
    left: 0 !important;
  }
  /* Overlay behind sidebar when open */
  .sidebar-overlay {
    display: none;
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 1040;
  }
  body.show-sidebar .sidebar-overlay { display: block; }

  /* --- Page wrapper: full width, clear fixed header --- */
  .page-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    padding-top: 70px !important;
    padding-right: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 0.5rem !important;
  }

  /* --- Top nav: compact --- */
  .top-navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1020 !important;
    padding: 0.25rem 0.5rem !important;
  }
  .top-navbar .navbar-top-right { gap: 0.25rem !important; }
  .top-navbar .nav-link { padding: 0.35rem 0.4rem !important; font-size: 1.1rem !important; }
  /* Hide less critical topbar items on mobile */
  .top-navbar #topnav-language-icon,
  .top-navbar a[href="/app/settings"] { display: none !important; }
  /* Search: full-width when focused */
  #top-search-container { width: 140px !important; }
  #top-search-container input { font-size: 0.8rem !important; padding: 0.3rem 0.5rem !important; }

  /* --- Page headings: stack vertically --- */
  .page-titles {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
  .page-titles .text-right { text-align: left !important; }
  .page-titles h3 { font-size: 1.1rem !important; }
  .page-titles .breadcrumb { font-size: 0.75rem !important; margin-bottom: 0 !important; }

  /* --- Cards: full width, reduced padding --- */
  .card { margin-bottom: 0.75rem !important; }
  .card-body { padding: 0.75rem !important; }
  .card-title { font-size: 1rem !important; }

  /* --- Tables: horizontal scroll --- */
  .table-responsive, table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  table { font-size: 0.78rem !important; }
  table th, table td { white-space: nowrap !important; padding: 0.4rem 0.5rem !important; }

  /* --- Forms: full-width inputs --- */
  .form-control, .form-select, input[type="text"], input[type="email"],
  input[type="password"], input[type="date"], input[type="number"],
  textarea, select { width: 100% !important; font-size: 16px !important; }
  .input-group { flex-wrap: wrap !important; }

  /* --- Grid: single column --- */
  .row > [class*="col-"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 0.75rem !important;
  }
  /* Exception: inline form groups stay side by side */
  .row > [class*="col-"][class*="col-auto"],
  .form-inline .row > [class*="col-"] { width: auto !important; flex: initial !important; max-width: none !important; }

  /* --- Buttons: full width on mobile --- */
  .page-titles .btn, .parent-page-actions .btn,
  .card-header .btn, .filter-panel .btn {
    width: 100% !important;
    margin-bottom: 0.35rem !important;
  }

  /* --- Modals: fit screen --- */
  .modal-dialog {
    margin: 0.5rem !important;
    max-width: calc(100vw - 1rem) !important;
    width: auto !important;
  }
  .modal-body { padding: 0.75rem !important; max-height: 70vh !important; overflow-y: auto !important; }

  /* --- Dropdowns: scrollable on mobile --- */
  .dropdown-menu {
    max-height: 80vh !important;
    overflow-y: auto !important;
  }

  /* --- Sidebar menu items: bigger touch targets --- */
  #sidebarnav a {
    padding: 0.65rem 1rem !important;
    font-size: 0.9rem !important;
  }

  /* --- Tabs: scrollable --- */
  .nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .nav-tabs .nav-item { white-space: nowrap !important; flex-shrink: 0 !important; }
  .nav-tabs .nav-link { font-size: 0.8rem !important; padding: 0.4rem 0.65rem !important; }

  /* --- Footer/Stacks --- */
  footer, .footer { text-align: center !important; padding: 0.5rem !important; font-size: 0.75rem !important; }

  /* --- Mini-sidebar: disabled on mobile --- */
  body.mini-sidebar .left-sidebar { width: 280px !important; }
  body.mini-sidebar .page-wrapper { margin-left: 0 !important; }
}

/* ---------- TABLET (768px - 1024px) ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Sidebar: collapsed by default, wider on hover/toggle */
  .left-sidebar {
    width: 70px !important;
    overflow: hidden !important;
    transition: width 0.3s ease !important;
  }
  .left-sidebar:hover,
  body.show-sidebar .left-sidebar {
    width: 250px !important;
    box-shadow: 2px 0 20px rgba(0,0,0,0.1) !important;
    z-index: 1040 !important;
  }
  .left-sidebar .hide-menu { opacity: 0; transition: opacity 0.2s; }
  .left-sidebar:hover .hide-menu,
  body.show-sidebar .left-sidebar .hide-menu { opacity: 1; }

  .page-wrapper {
    margin-left: 70px !important;
    transition: margin-left 0.3s ease !important;
  }
  body.show-sidebar .page-wrapper,
  .left-sidebar:hover ~ .page-wrapper { margin-left: 250px !important; }

  /* Grid: 2 columns on tablet */
  .row > [class*="col-md-6"],
  .row > [class*="col-lg-4"],
  .row > [class*="col-lg-3"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  /* Full-width for single-col layouts */
  .row > [class*="col-md-12"],
  .row > [class*="col-lg-12"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .page-wrapper { padding: 1rem !important; }
  table { font-size: 0.82rem !important; }
}

/* ---------- DESKTOP (> 1024px) ---------- */
@media (min-width: 1025px) {
  .sidebar-overlay { display: none !important; }
  .page-wrapper { margin-left: 250px !important; }
  body.mini-sidebar .page-wrapper { margin-left: 70px !important; }
}

/* ---------- SETTINGS PAGE ---------- */
/* Settings sidebar follows theme */
.settings-sidebar { background: #1e293b; color: #e2e8f0; border-right: 1px solid rgba(255,255,255,0.06); }
.settings-sidebar .settings-nav-group > a { color: #cbd5e1; }
.settings-sidebar .settings-nav-group > a:hover { background: rgba(255,255,255,.05); color: #f1f5f9; }
.settings-sidebar .settings-submenu a { color: #94a3b8; }
.settings-sidebar .settings-submenu a:hover { background: rgba(255,255,255,.04); color: #e2e8f0; }
[data-bs-theme="default"] .settings-sidebar,
html.default .settings-sidebar { background: #ffffff; color: #334155; border-right: 1px solid #e2e8f0; }
[data-bs-theme="default"] .settings-sidebar .settings-nav-group > a,
html.default .settings-sidebar .settings-nav-group > a { color: #475569; }
[data-bs-theme="default"] .settings-sidebar .settings-nav-group > a:hover,
html.default .settings-sidebar .settings-nav-group > a:hover { background: #f1f5f9; color: #1e293b; }
[data-bs-theme="default"] .settings-sidebar .settings-submenu a,
html.default .settings-sidebar .settings-submenu a { color: #64748b; }
[data-bs-theme="default"] .settings-sidebar .settings-submenu a:hover,
html.default .settings-sidebar .settings-submenu a:hover { background: #f8fafc; color: #334155; }
/* Settings mobile toggle button follows theme */
#settings-mobile-toggle { background: #1e293b; color: #e2e8f0; }
[data-bs-theme="default"] #settings-mobile-toggle,
html.default #settings-mobile-toggle { background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; }
/* Original design preserved. Mobile: sidebar scrolls independently, content below. */
@media (max-width: 767.98px) {
  .settings-layout { flex-direction: column !important; }
  .settings-sidebar {
    width: 100% !important; max-height: 35vh !important;
    overflow-y: auto !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  }
  #settings-wrapper { padding: 0.75rem !important; min-height: auto !important; }
}

/* Mobile: settings sidebar hidden by default, toggle via button */
@media (max-width: 767.98px) {
  .settings-layout { flex-direction: column !important; }
  .settings-sidebar {
    width: 100% !important;
    max-height: 0 !important;
    overflow: hidden !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    transition: max-height 0.3s ease !important;
  }
  .settings-sidebar.open {
    max-height: 60vh !important;
    overflow-y: auto !important;
  }
  .settings-sidebar-close { display: block !important; }
  .settings-mobile-toggle { display: block !important; }
  #settings-wrapper { padding: 0.75rem !important; min-height: auto !important; }
  /* Larger touch targets for settings nav items */
  .settings-sidebar .settings-nav-group > a {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.9rem !important;
  }
  .settings-sidebar .settings-submenu a {
    padding: 0.6rem 1.25rem 0.6rem 3rem !important;
    font-size: 0.82rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .settings-sidebar { width: 200px !important; }
}

/* ---------- DASHBOARD WIDGETS ---------- */
@media (max-width: 767.98px) {
  .stats-widget, .dashboard-widget, .widget-card,
  .card-stats, .earning-widget, .project-stats-card {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .c3 svg, .chart-container svg, canvas {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ---------- KANBAN BOARDS ---------- */
@media (max-width: 767.98px) {
  .kanban-board, .kanban-wrapper {
    flex-direction: column !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .kanban-column {
    min-width: 85vw !important;
    max-width: 85vw !important;
    margin-right: 0.5rem !important;
  }
}

/* ---------- LOGIN / AUTH PAGES ---------- */
@media (max-width: 767.98px) {
  .login-box, .register-box, .auth-box, .signup-box {
    width: 95% !important;
    max-width: 400px !important;
    margin: 1rem auto !important;
    padding: 1.25rem !important;
  }
  .login-logo img { max-height: 40px !important; }
}

/* ---------- FILE UPLOAD / DROPZONE ---------- */
@media (max-width: 767.98px) {
  .dropzone, .file-upload-area {
    min-height: 120px !important;
    padding: 1rem !important;
  }
  .dropzone .dz-message { font-size: 0.85rem !important; }
}

/* ---------- NOTIFICATIONS / TOASTS ---------- */
@media (max-width: 767.98px) {
  .toast, .notification-toast {
    width: 90vw !important;
    right: 5vw !important;
    left: 5vw !important;
  }
}

/* ---------- PRINT ---------- */
@media print {
  .left-sidebar, .top-navbar, .sidebartoggler, .no-print,
  .settings-sidebar, #settings-sidebar-nav, .btn, button,
  .driver-overlay, .driver-popover { display: none !important; }
  .page-wrapper { margin-left: 0 !important; width: 100% !important; }
  .card { border: 1px solid #ddd !important; box-shadow: none !important; break-inside: avoid !important; }
  body { font-size: 12px !important; color: #000 !important; background: #fff !important; }
}