/* =================================================================
   RESPONSIVE MOBILE STYLESHEET
   Covers: Dashboard (main_content.php) + Detail Statistics (detailsstatistics.php)
   Breakpoints: 768px (tablet), 576px (phone), 400px (small phone)
   ================================================================= */

/* ===================== GLOBAL MOBILE RESETS ===================== */
@media (max-width: 767px) {

  /* Main content area - full width on mobile, no sidebar offset */
  .main {
    padding: 5px 5px 0 5px !important;
    width: 100% !important;
    margin-left: 0 !important;
    position: relative !important;
    float: none !important;
  }

  .container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Bootstrap column padding fix on mobile */
  .main .row {
    margin-left: -5px;
    margin-right: -5px;
  }

  .main .row > [class*="col-"] {
    padding-left: 5px;
    padding-right: 5px;
  }

  /* ---- FIX: Native <select> dropdowns must not overflow screen ---- */
  select.form-control,
  #main_content_focus,
  #date_range_select,
  #select {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    padding: 8px 10px !important;
    -webkit-appearance: menulist !important;
    appearance: menulist !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Ensure all form inputs respect container width */
  .form-control {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ===================== DASHBOARD PAGE - TOP FILTER ROW ===================== */
/* From/To date inputs + Filter Data button + Period dropdown */
@media (max-width: 767px) {

  /* Dashboard flex filter bar */
  .dashboard-top-filters {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .dashboard-top-filters .dash-filter-item {
    min-width: unset !important;
    max-width: none !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Make date inputs side by side on mobile */
  .dashboard-top-filters .dash-filter-item:nth-child(1),
  .dashboard-top-filters .dash-filter-item:nth-child(2) {
    flex: 1 1 45% !important;
    width: 45% !important;
  }

  /* Filter Data button full width */
  #range {
    width: 100%;
    padding: 10px 16px;
    font-size: 14px;
  }

  /* Date inputs */
  #from_, #to_, #from, #to {
    font-size: 13px;
    padding: 8px 10px;
  }

  /* Period selector full width */
  #main_content_focus, #date_range_select {
    font-size: 13px;
    padding: 8px 10px;
    width: 100% !important;
  }

  /* Ensure the flex row wraps to 2 columns for date fields */
  .dashboard-top-filters {
    display: flex !important;
    flex-wrap: wrap !important;
  }
}

@media (max-width: 400px) {
  /* On very small screens, stack everything single column */
  .dashboard-top-filters .dash-filter-item:nth-child(1),
  .dashboard-top-filters .dash-filter-item:nth-child(2) {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* ===================== DASHBOARD - REVENUE BOXES ===================== */
@media (max-width: 767px) {

  .tag-boxes .col-md-3,
  .tag-boxes .col-lg-3,
  .tag-boxes .col-sm-6 {
    width: 100% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin-bottom: 8px;
  }

  .tag-boxes .panel-heading {
    padding: 10px 8px !important;
  }

  .tag-boxes .panel-heading .row .col-xs-3 {
    display: block !important;
    width: 20% !important;
  }

  .tag-boxes .panel-heading .row .col-xs-9 {
    width: 80% !important;
    float: none !important;
  }

  .tag-boxes .huge {
    font-size: 20px !important;
  }

  .tag-boxes .huge .revenue-decimal {
    font-size: 14px !important;
  }

  .tag-boxes .text-right {
    font-size: 11px;
  }

  .tag-boxes .panel-footer {
    padding: 6px 8px;
    font-size: 10px;
    width: 100%;
    border-top-right-radius: 0;
  }

  .tag-boxes .panel-blue,
  .tag-boxes .panel-red,
  .tag-boxes .panel-yellow,
  .tag-boxes .panel-green {
    min-height: 100px !important;
    border-radius: 8px;
    overflow: hidden;
  }

  /* Boxes overflow fix */
  .tag-boxes.row {
    overflow: visible !important;
  }
}

/* ===================== DASHBOARD - TABLE ===================== */
@media (max-width: 767px) {

  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  #dashboardTable,
  #data {
    min-width: 800px !important;
    font-size: 12px;
  }

  #dashboardTable th,
  #data th {
    font-size: 10px !important;
    padding: 8px 6px !important;
    white-space: nowrap;
  }

  #dashboardTable td,
  #data td {
    padding: 6px !important;
    white-space: nowrap;
    font-size: 12px;
  }

  /* DataTables wrapper on mobile */
  .dataTables_wrapper {
    overflow-x: auto;
  }

  .dt-top-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .dt-bottom-flex {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start !important;
  }

  .dataTables_filter input {
    width: 100% !important;
    max-width: 100% !important;
  }

  .dataTables_paginate {
    margin-top: 10px;
  }

  .dataTables_paginate .paginate_button {
    padding: 4px 8px !important;
    font-size: 12px !important;
  }
}

/* ===================== UNIFIED ANALYTICS PANEL (Line/Pie Charts) ===================== */
@media (max-width: 767px) {

  .unified-analytics-panel {
    border-radius: 12px !important;
    margin-top: 15px !important;
  }

  .unified-master-header {
    padding: 12px 14px !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  .unified-master-header h3 {
    font-size: 14px !important;
  }

  .unified-body {
    padding: 12px !important;
  }

  /* ---- Filter Container ---- */
  .minimal-filter-container {
    padding: 12px !important;
    height: auto !important;
    margin-bottom: 20px !important;
  }

  /* Filter grid - stack vertically */
  .filter-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Filter group header */
  .filter-group-header {
    height: auto !important;
    margin-bottom: 8px !important;
  }

  .filter-label-minimal {
    font-size: 12px !important;
  }

  /* ---- Dropdown Containers ---- */
  .custom-dropdown-container {
    width: 100% !important;
  }

  .dropdown-trigger {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  .trigger-text {
    max-width: calc(100% - 24px) !important;
  }

  /* Dropdown menu list */
  .dropdown-menu-list {
    max-height: 220px !important;
    border-radius: 10px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    position: absolute !important;
    z-index: 1050 !important;
  }

  .dropdown-search-input {
    font-size: 14px !important;
    height: 38px !important;
    padding: 8px 12px !important;
  }

  .dropdown-item {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }

  .dropdown-item label {
    font-size: 13px !important;
  }

  .dropdown-item input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin-right: 10px !important;
  }

  /* ---- Filter Pill Buttons (Metric selectors) ---- */
  #categoryLabels,
  #pieCategoryLabels,
  .lc-pills,
  #lcMetricPills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .filter-pill label,
  .filter-pill-cat label,
  .lc-pill label {
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: 20px !important;
  }

  /* ---- Date Range Dropdown on mobile ---- */
  #lineDateDropdown,
  #pieDateDropdown {
    width: 100% !important;
  }

  /* Custom date inputs */
  .custom-date-inputs {
    gap: 6px !important;
    border-radius: 8px !important;
  }

  .custom-date-inputs.show-custom {
    height: 40px !important;
    padding: 6px 10px !important;
    margin-top: 8px !important;
  }

  .date-input-minimal {
    font-size: 12px !important;
    width: 80px !important;
  }

  /* ---- Line Chart ---- */
  .line-chart-wrap {
    height: 280px !important;
    padding-top: 28px !important;
  }

  .line-chart-metric-title {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }

  /* ---- Pie Charts Grid ---- */
  .pie-charts-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .pie-chart-card {
    min-height: auto !important;
    padding: 16px !important;
    border-radius: 14px !important;
  }

  .pie-chart-card-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 6px;
    margin-bottom: 15px !important;
  }

  .pie-chart-card-title {
    font-size: 15px !important;
  }

  .pie-chart-card-total {
    font-size: 20px !important;
  }

  .pie-chart-canvas-wrap {
    max-width: 260px !important;
  }
}

/* ===================== DETAIL STATISTICS PAGE ===================== */
@media (max-width: 767px) {

  /* Detail stats flex filter bar */
  .ds-top-filters {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .ds-top-filters .ds-filter-item {
    min-width: unset !important;
    max-width: none !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Detail stats: date range select full width */
  #date_range_select {
    width: 100% !important;
  }

  /* Detail stats: custom date popup - switch to relative so it pushes buttons down */
  #custom_date_inputs {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 8px !important;
    z-index: 1 !important;
    box-shadow: none !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 10px !important;
    background: #f8fafc !important;
  }

  /* Filter Data + Download CSV buttons */
  .btn-success,
  .btn-warning {
    width: 100%;
    padding: 10px 14px;
    font-size: 13px;
  }

  /* Custom multiselect dropdown */
  .custom-multiselect-dropdown {
    width: 100% !important;
  }

  .dropdown-toggle-btn {
    width: 100% !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  #ds-table-domain-menu {
    width: 100% !important;
    max-height: 200px !important;
    z-index: 1100 !important;
  }

  /* Revenue section */
  #rev .clearfix {
    text-align: left !important;
  }

  #rev p {
    margin-right: 10px !important;
    font-size: 13px;
  }

  #rev .custom_font {
    font-size: 16px !important;
  }

  /* Sticky table scroll */
  .sticky-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===================== DETAIL STATS - CHART SECTIONS ===================== */
@media (max-width: 767px) {

  /* Line chart panel */
  .lc-panel {
    border-radius: 12px !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }

  .lc-header {
    padding: 12px 14px !important;
    border-radius: 12px 12px 0 0 !important;
    flex-wrap: wrap;
  }

  .lc-header h3 {
    font-size: 14px !important;
    gap: 6px !important;
  }

  .lc-body {
    padding: 12px !important;
  }

  /* Filter box */
  .lc-filter-box {
    padding: 12px !important;
    margin-bottom: 14px !important;
    border-radius: 12px !important;
  }

  /* Filter grid stacking */
  .lc-filter-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Dropdown buttons */
  .lc-drop {
    width: 100% !important;
  }

  .lc-drop-btn {
    padding: 10px 14px !important;
    font-size: 13px !important;
    min-height: 42px !important;
  }

  .lc-drop-menu {
    max-height: 200px !important;
    z-index: 9999 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  .lc-drop-search-input {
    font-size: 14px !important;
    height: 38px !important;
  }

  .lc-drop-item {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  /* Metric pills */
  .lc-pill label {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  /* Custom date inputs */
  .lc-custom-dates {
    grid-template-columns: 1fr auto 1fr !important;
  }

  .lc-custom-dates.lc-show-dates {
    height: 44px !important;
    padding: 8px 10px !important;
  }

  .lc-date-input {
    font-size: 12px !important;
  }

  /* Chart area */
  .lc-chart-wrap {
    height: 280px !important;
    padding-top: 28px !important;
  }

  .lc-metric-title {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }

  /* ---- Graphical Analytics Section (Bar Charts) ---- */
  .charts-section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 14px 16px !important;
    gap: 10px !important;
    border-radius: 10px !important;
  }

  .charts-section-title {
    font-size: 16px !important;
    gap: 8px !important;
  }

  .chart-controls {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .chart-toggle-group {
    width: 100%;
    justify-content: center;
  }

  .chart-toggle-btn {
    padding: 7px 12px !important;
    font-size: 12px !important;
    flex: 1;
    text-align: center;
  }

  .chart-period-select,
  .styled-select {
    width: 100% !important;
    min-width: unset !important;
    font-size: 13px !important;
  }

  .chart-period-select.dark {
    min-width: unset !important;
    width: 100% !important;
  }

  .metric-filter-group {
    min-width: unset !important;
    width: 100% !important;
  }

  /* Chart cards grid */
  .charts-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .chart-card {
    border-radius: 10px !important;
  }

  .chart-card-header {
    padding: 12px 14px 0 !important;
  }

  .chart-card-title {
    font-size: 13px !important;
    gap: 6px !important;
  }

  .chart-card-body canvas {
    min-height: 160px !important;
  }

  /* Metric filter pills in graphical section */
  .filter-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Custom range fields */
  .custom-range-fields {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .chart-date-input {
    font-size: 12px !important;
    padding: 8px 10px !important;
  }
}

/* ===================== DATEPICKER POPUP ON MOBILE ===================== */
@media (max-width: 767px) {

  /* Ensure datepicker popup is visible on small screens */
  .datepicker {
    z-index: 1200 !important;
    max-width: 280px;
  }

  .datepicker table {
    width: 100% !important;
  }

  .datepicker table tr td,
  .datepicker table tr th {
    padding: 6px 4px !important;
    font-size: 12px !important;
  }
}

/* ===================== EXTRA SMALL PHONE (< 400px) ===================== */
@media (max-width: 400px) {

  .unified-master-header h3,
  .lc-header h3 {
    font-size: 12px !important;
  }

  .unified-master-header h3 svg,
  .lc-header h3 svg {
    width: 16px !important;
    height: 16px !important;
  }

  .filter-pill label,
  .filter-pill-cat label,
  .lc-pill label {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }

  .dropdown-trigger {
    font-size: 12px !important;
  }

  .lc-drop-btn {
    font-size: 12px !important;
  }

  .line-chart-wrap,
  .lc-chart-wrap {
    height: 220px !important;
  }

  .chart-toggle-btn {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }

  .charts-section-title {
    font-size: 14px !important;
  }

  /* Detail stats filter buttons */
  .main > .container-fluid > .row > .col-md-12 > .col-md-2 {
    width: 100% !important;
  }

  .main > .container-fluid > .row > .col-md-12 > .col-md-2.col-xs-12 {
    width: 100% !important;
  }

  .pie-chart-canvas-wrap {
    max-width: 200px !important;
  }
}

/* ===================== TABLET (768-991px) ===================== */
@media (min-width: 768px) and (max-width: 991px) {

  .filter-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  .lc-filter-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  .pie-charts-grid {
    grid-template-columns: 1fr !important;
  }

  .charts-grid {
    grid-template-columns: 1fr !important;
  }

  .custom-dropdown-container {
    width: 100% !important;
  }

  #lineDateDropdown,
  #pieDateDropdown {
    width: 100% !important;
  }

  .minimal-filter-container {
    height: auto !important;
  }

  .line-chart-wrap {
    height: 350px !important;
  }
}

/* ===================== PREVENT OVERFLOW ON ALL SCREENS ===================== */
html, body {
  overflow-x: hidden;
}

.container-fluid {
  overflow-x: hidden;
}

/* Ensure dropdowns don't go outside viewport */
.dropdown-menu-list,
.lc-drop-menu {
  max-width: calc(100vw - 30px);
}