/* ==========================================================================
   Global + Mobile Responsive Overrides
   Loaded AFTER all other stylesheets (both legacy and new_static paths).
   ========================================================================== */

/* ==========================================================================
   Modern Table Styling (all screen sizes)
   Ensures consistent borderless tables across ALL pages — both
   legacy Bootstrap (theme-tokens.css) and new_static (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;
}

/* 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;
}

/* ==========================================================================
   Filmstrip Preview (Playlist Listing — all screen sizes)
   Loaded here so filmstrip works on both legacy and new_static CSS paths.
   ========================================================================== */
.filmstrip-container {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 12px 16px;
  scrollbar-width: thin;
  max-width: 100%;
}

.filmstrip-item {
  flex-shrink: 0;
  text-align: center;
  width: 160px;
}

.filmstrip-item img {
  width: 150px;
  height: 84px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border-color, #333);
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.filmstrip-item img:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.3));
}

.filmstrip-item .name {
  font-size: 0.72rem;
  color: var(--text-secondary, #a0a0a0);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}

/* ==========================================================================
   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 "Dominate:" 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 md breakpoint (phones & small tablets) --- */
@media (max-width: 767.98px) {

  /* ── 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 */
  .text-end,
  .text-start {
    text-align: center !important;
    margin-bottom: 0.75rem;
  }

  .text-end .btn,
  .text-start .btn,
  section > .btn,
  section > a.btn {
    display: block;
    width: 100%;
  }

  /* Stack inline button groups */
  .text-end .dropdown {
    display: block !important;
    margin-top: 0.5rem;
  }

  .text-end .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;
  }

  /* ── Filmstrip (playlist preview) ────────────────────────── */

  .filmstrip-item {
    width: 120px;
  }

  .filmstrip-item img {
    width: 110px;
    height: 62px;
  }

  /* ── Flash messages: full width ──────────────────────────── */

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

  /* ── Mobile card search ─────────────────────────────────── */

  .mobile-card-search {
    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 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 ──────────────────── */

  #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;
  }

  /* ── MUI DataGrid mobile fixes ───────────────────────────── */

  .MuiDataGrid-root {
    font-size: 0.8rem !important;
  }

  .MuiDataGrid-toolbarContainer {
    padding: 0.25rem 0 !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
  }

  .MuiDataGrid-toolbarContainer .MuiFormControl-root {
    width: 100% !important;
  }
}

/* --- 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;
  }
}