/* ==========================================================================
   Global + Mobile Responsive Overrides
   Loaded AFTER all other stylesheets.
   ========================================================================== */

/* ColumnControl dark mode — icons, dropdowns, inputs */
[data-bs-theme="dark"] {
  --dtcc-button-icon_color: #dee2e6;
  --dtcc-search-icon_color: #dee2e6;
}
[data-bs-theme="dark"] div.dtcc-dropdown {
  --dtcc-dropdown-button_color: #dee2e6;
  --dtcc-list-buttons_background: #1a1a2e;
  --dtcc-search-input_background-color: #2a2a3e;
  --dtcc-search-input_background: #2a2a3e;
  --dtcc-dropdown_background: #212529;
  color: #dee2e6;
}
[data-bs-theme="dark"] div.dtcc-dropdown button.dtcc-button {
  color: #dee2e6;
}
[data-bs-theme="dark"] div.dtcc-dropdown input,
[data-bs-theme="dark"] div.dtcc-dropdown select {
  color: #dee2e6;
}
[data-bs-theme="dark"] table.dataTable span.dtcc span.dtcc-button-icon,
[data-bs-theme="dark"] table.dataTable span.dtcc span.dtcc-button-icon svg {
  color: #dee2e6;
}


/* ==========================================================================
   Modern Table Styling (all screen sizes)
   Ensures consistent borderless tables across ALL pages -- both
   theme-tokens.css and the compiled index.css.
   Matches the MUI DataGrid aesthetic: no hard borders, subtle
   row separators, uppercase muted headers, clean hover.
   ========================================================================== */

/* Base table reset -- kill all hard borders */
.table,
table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: none !important;
}

/* All cells (including table-bordered) -- only subtle bottom separator */
.table > :not(caption) > * > *,
.table.table-bordered > :not(caption) > * > *,
table.dataTable > :not(caption) > * > * {
  background-color: transparent !important;
  color: var(--text-primary) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--table-border, var(--border-subtle, #333333)) !important;
  box-shadow: none !important;
  padding: 0.75rem 1rem;
  vertical-align: middle;
}

/* Header cells -- uppercase, small, muted */
.table > thead > tr > th,
.table > thead > tr > td,
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
  background-color: transparent !important;
  color: var(--text-secondary, #a0a0a0) !important;
  border-bottom: 1px solid var(--table-border, var(--border-subtle, #333333)) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  white-space: nowrap;
  padding: 0.625rem 1rem !important;
}

/* Body rows -- transparent, no striping */
.table > tbody > tr > *,
.table-striped > tbody > tr:nth-of-type(odd) > *,
table.dataTable > tbody > tr > * {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Selected rows -- DataTables Select adds .selected class */
table.dataTable > tbody > tr.selected > * {
  background-color: rgba(var(--color-primary-rgb, 251, 122, 1), 0.15) !important;
  color: var(--text-primary) !important;
}

/* Hover -- subtle highlight */
.table > tbody > tr:hover > *,
.table-hover > tbody > tr:hover > *,
table.dataTable > tbody > tr:hover > * {
  background-color: var(--table-row-hover, var(--bg-tertiary, #2a2a2a)) !important;
}

/* Last row -- no bottom border */
.table > tbody > tr:last-child > *,
table.dataTable > tbody > tr:last-child > * {
  border-bottom-color: transparent !important;
}

/* DataTables no-footer bottom border */
table.dataTable.no-footer {
  border-bottom: none !important;
}

/* DataTables row background */
table.dataTable tbody tr {
  background-color: transparent !important;
}

/* ==========================================================================
   Sidebar -- mobile drawer behavior
   ========================================================================== */

/* Below lg breakpoint: sidebar becomes slide-out drawer */
@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width-expanded) !important; /* always show labels on mobile */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }

  .sidebar.open .sidebar-label {
    opacity: 1;
  }

  /* Content takes full width on mobile -- clamp overflow */
  .app-content {
    margin-left: 0 !important;
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Show hamburger button */
  .sidebar-toggle {
    display: flex !important;
  }

  /* Hide role badges from topbar on mobile -- moved to sidebar */
  .topbar-brand .role-badge {
    display: none !important;
  }

  /* Hide "MyNoda:" on mobile, show only customer name with ellipsis */
  .topbar-brand .brand-app-name {
    display: none;
  }

  .topbar-brand .brand-customer-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 45vw;
  }

  /* Hide Help dropdown from topbar on mobile -- moved to sidebar */
  .topbar-right .dropdown:has(#navbarHelpDropdown) {
    display: none !important;
  }

  /* User dropdown: show only icon on mobile */
  #navbarUserDropdown {
    font-size: 0 !important;
  }
  #navbarUserDropdown .fa-user {
    font-size: var(--text-sm, 0.875rem) !important;
  }
}

@media (min-width: 992px) {
  .sidebar-toggle {
    display: none !important;
  }
}

/* --- Below Bootstrap lg breakpoint (phones & tablets) --- */
@media (max-width: 991.98px) {

  /* -- Card / Table toggle ------------------------------------------------ */
  /* Force mobile cards visible and DataTables hidden below lg */
  .mobile-card-list {
    display: block !important;
  }
  .mobile-card-list + .d-none,
  .mobile-card-list ~ .d-none {
    display: none !important;
  }

  /* -- Layout & spacing -------------------------------------------------- */

  /* Professional side margins on mobile */
  main.mx-4 {
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
  }

  main > .py-4,
  main .py-4 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  main .mt-1 {
    margin-top: 0 !important;
  }

  main.pt-4 {
    padding-top: 0.5rem !important;
  }

  /* Content section: clean, no border on mobile */
  section.border.rounded,
  section.p-4 {
    padding: 0.5rem 0.75rem !important;
    border: none !important;
    border-radius: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* -- Vertical rhythm -- breathing room between elements ---------------- */

  /* Page headings */
  section h2,
  section h3 {
    font-size: 1.25rem;
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
  }

  /* Button groups above content — 2-up grid, odd last item spans full */
  .text-end,
  .text-start {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .text-end .btn,
  .text-start .btn,
  .text-end .dropdown,
  .text-start .dropdown,
  section > .btn,
  section > a.btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: calc(50% - 0.25rem);
    max-width: 100%;
  }

  /* If a button/dropdown is the only child or the last odd one, span full width */
  .text-end > :only-child,
  .text-start > :only-child,
  .text-end > :last-child:nth-child(odd),
  .text-start > :last-child:nth-child(odd) {
    flex: 1 1 100%;
  }

  .text-end .dropdown .btn,
  .text-start .dropdown .btn {
    width: 100%;
  }

  /* Tab headers */
  .nav-tabs {
    margin-bottom: 0.75rem;
  }

  .nav-tabs .nav-link {
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
  }

  /* Tab content panes */
  .tab-content {
    padding-top: 0.5rem;
  }

  /* Alerts & info cards */
  .alert {
    font-size: 0.85rem;
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.75rem;
  }

  /* Form groups -- space between fields */
  .form-group,
  .mb-3 {
    margin-bottom: 0.875rem !important;
  }

  /* Dropdown menus -- full-width on mobile */
  .dropdown-menu {
    width: 100%;
  }

  /* -- Tables ------------------------------------------------------------ */

  .table > :not(caption) > * > * {
    padding: 0.4rem 0.5rem !important;
    font-size: 0.8rem !important;
  }

  /* Shrink content thumbnails */
  .table td[style*="width: 150px"] {
    width: 80px !important;
  }
  .table .img-thumbnail[style*="max-width: 150px"] {
    max-width: 80px !important;
  }

  /* -- DataTables controls ----------------------------------------------- */

  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length {
    float: none !important;
    text-align: left !important;
    margin-bottom: 0.5rem;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .dataTables_wrapper .dataTables_info {
    float: none !important;
    text-align: center !important;
    padding-top: 0.5rem;
  }

  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: center !important;
    margin-top: 0.5rem;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.3rem 0.6rem !important;
    font-size: 0.75rem !important;
  }

  /* -- Forms: override inline max-width styles --------------------------- */

  form[style*="max-width"] {
    max-width: 100% !important;
  }

  .modal-body[style*="max-width"] {
    max-width: 100% !important;
  }

  /* -- Upload status indicator ------------------------------------------- */

  #uploadStatus {
    width: auto !important;
    left: 0.5rem;
    right: 0.5rem;
  }

  /* -- Flash messages: full width ---------------------------------------- */

  .d-flex.justify-content-center .alert {
    width: 100%;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  /* -- Mobile card header (search + columns) ------------------------------ */

  .mobile-card-header {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .mobile-card-search {
    flex: 1;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }

  .mobile-card-search::placeholder {
    color: var(--text-muted);
  }

  .mobile-card-search:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 99, 102, 241), 0.15);
    outline: none;
  }

  /* -- Mobile filter tabs ------------------------------------------------ */

  .mobile-filter-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
  }

  .mobile-filter-btn {
    padding: 0.3rem 0.85rem;
    border-radius: 20px;
    border: 1.5px solid var(--border-subtle);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
  }

  .mobile-filter-btn.active {
    border-color: var(--text-primary);
    font-weight: 600;
  }

  .mobile-filter-btn.filter-online {
    color: #198754;
    border-color: #198754;
  }

  .mobile-filter-btn.filter-online.active {
    background: #198754;
    color: #fff;
  }

  .mobile-filter-btn.filter-offline {
    color: #dc3545;
    border-color: #dc3545;
  }

  .mobile-filter-btn.filter-offline.active {
    background: #dc3545;
    color: #fff;
  }

  /* -- Mobile card layouts (used instead of tables) ---------------------- */

  .mobile-card {
    display: block;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 0.875rem;
    margin-bottom: 0.625rem;
    text-decoration: none;
    color: var(--text-primary);
    overflow: hidden;
    transition: border-color 0.15s;
  }

  .mobile-card:hover {
    border-color: var(--color-primary);
    color: var(--text-primary);
  }

  a.mobile-card {
    color: var(--text-primary) !important;
  }

  .mobile-card .d-flex > div:first-child {
    min-width: 0;
    flex: 1;
  }

  .mobile-card .d-flex.align-items-center > .ms-2 {
    min-width: 0;
    flex: 1;
  }

  .mobile-card .d-flex.align-items-center > .ms-2 .small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-card-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-card-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-card-status {
    font-size: 0.75rem;
    white-space: nowrap;
    flex-shrink: 0;
    padding-left: 0.5rem;
  }

  .mobile-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.375rem;
  }

  .mobile-card-meta span {
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* -- Mobile card thumbnail -- fixed 16:9 ratio ------------------------- */

  .mobile-card .mobile-thumb {
    width: 80px;
    min-width: 80px;
    height: 45px;       /* 80 / 16 * 9 = 45 -> 16:9 */
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
  }

  /* -- Mobile column visibility dropdown --------------------------------- */

  .mobile-col-menu {
    min-width: 180px;
  }

  .mobile-col-menu .dropdown-item {
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
  }

  #mobileColMenu .dropdown-item {
    color: var(--dropdown-text, var(--text-primary)) !important;
  }

  #mobileColMenu .dropdown-item.active,
  #mobileColMenu .dropdown-item:active {
    background-color: var(--dropdown-hover, rgba(255, 255, 255, 0.08)) !important;
    color: var(--dropdown-text, var(--text-primary)) !important;
  }

  #mobileColMenu .dropdown-item .fa-check {
    color: var(--dropdown-text, var(--text-primary)) !important;
  }

  #mobileColvisMenu label {
    font-size: 0.85rem;
    padding: 0.25rem 0.75rem;
  }

  #mobileColvisMenu input[type="checkbox"] {
    accent-color: var(--color-primary);
  }

  /* -- Dashboard stat cards ---------------------------------------------- */

  .dashboard-stat-card .card-body {
    gap: 0.75rem;
    padding: 0.75rem 1rem;
  }

  .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .stat-value {
    font-size: 1.25rem;
  }

  .stat-label {
    font-size: 0.72rem;
  }
}

/* --- Below Bootstrap lg breakpoint (tablets in portrait) --- */
@media (max-width: 991.98px) {

  /* Hamburger button appears before the logo */
  .sidebar-toggle {
    order: -1;
  }

  /* Compact role badges */
  .role-badge {
    font-size: 0.6rem !important;
    padding: 0.15rem 0.4rem !important;
  }

  /* Top bar right-side: truncate long user/customer names */
  #navbarUserDropdown {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Compact top bar brand */
  .topbar-brand > span:first-of-type {
    font-size: 0.9rem;
  }
}

/* --- Very small screens (< 400px) --- */
@media (max-width: 399.98px) {

  main.mx-4 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }

  .topbar-brand img {
    height: 28px !important;
  }

  .topbar-brand > span:first-of-type {
    font-size: 0.8rem;
  }
}