:root{
  --bg:#f6f7f8;
  --card:#ffffff;
  --muted:#9aa0a6;
  --text-primary:#222222;
  --accent:#ff6b48;
  --radius:12px;
}

:root[data-theme='dark'] {
  --bg:#070707;
  --card:#1F1F1F;
  --muted:#8D8D8D;
  --text-primary:#FFFFFF;
  --accent:#FF6839;
}

:root[data-theme='dark'] .login-page {
  background: var(--bg);
}

:root[data-theme='dark'] .login-card {
  background: #1F1F1F;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

:root[data-theme='dark'] .login-title,
:root[data-theme='dark'] .form-label,
:root[data-theme='dark'] .text-sfmedium,
:root[data-theme='dark'] .text-sfregular,
:root[data-theme='dark'] .text-sfsemibold {
  color: #FFFFFF;
}

:root[data-theme='dark'] .login-input {
  background-color: #363636 !important;
  background: #363636 !important;
  color: #FFFFFF;
  border-color: transparent;
  min-height: 50px;
  padding: 10px;
  border-radius: 12px;
  font-family: 'SF Pro Text', SFRegular, Inter, Segoe UI, system-ui, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 130%;
}

:root[data-theme='dark'] .login-input:-webkit-autofill,
:root[data-theme='dark'] .login-input:-webkit-autofill:hover,
:root[data-theme='dark'] .login-input:-webkit-autofill:focus,
:root[data-theme='dark'] .login-input:-webkit-autofill:active {
  -webkit-text-fill-color: #FFFFFF;
  caret-color: #FFFFFF;
  -webkit-box-shadow: 0 0 0px 1000px #363636 inset;
  box-shadow: 0 0 0px 1000px #363636 inset;
  transition: background-color 9999s ease-in-out 0s;
}

:root[data-theme='dark'] .login-input::placeholder {
  color: #8D8D8D;
}

:root[data-theme='dark'] .validation-message {
  color: #F54848;
  font-size: 12px;
  line-height: 130%;
}

:root[data-theme='dark'] .login-input:focus {
  box-shadow: 0 0 0 3px rgba(255,104,57,0.16);
  border-color: rgba(255,104,57,0.35);
}

:root[data-theme='dark'] .help-link {
  color: #FF6839;
}

:root[data-theme='dark'] .sidebar {
  background: #1F1F1F;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
}

:root[data-theme='dark'] .nav-item {
  color: #E6E6E6;
}

:root[data-theme='dark'] .nav-item.active {
  background: #2A2A2A;
}

:root[data-theme='dark'] .top-search,
:root[data-theme='dark'] .search {
  background: #2A2A2A;
  border-color: rgba(255,255,255,0.08);
  color: #FFFFFF;
}

:root[data-theme='dark'] .top-search::placeholder,
:root[data-theme='dark'] .search::placeholder {
  color: #8D8D8D;
}

:root[data-theme='dark'] .card {
  background: #1F1F1F;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.05);
}

:root[data-theme='dark'] .card h1,
:root[data-theme='dark'] .card h2,
:root[data-theme='dark'] .card h3,
:root[data-theme='dark'] .card h4,
:root[data-theme='dark'] .card h5,
:root[data-theme='dark'] .card h6,
:root[data-theme='dark'] .card .title,
:root[data-theme='dark'] .content,
:root[data-theme='dark'] .main {
  color: #FFFFFF;
}

:root[data-theme='dark'] .factory-table td {
  border-top-color: rgba(255,255,255,0.06);
}

:root[data-theme='dark'] .factory-table th,
:root[data-theme='dark'] .actions,
:root[data-theme='dark'] .sidebar-footer {
  color: #8D8D8D;
}

:root[data-theme='dark'] .icon {
  color: #CFCFCF;
}

body { margin:0; font-family: Inter,Segoe UI,system-ui,Arial; background:var(--bg); color:var(--text-primary); }
.layout { display:flex; min-height:100vh; }
.sidebar { width:220px; background:#fff; padding:24px; box-shadow:0 0 0 1px rgba(0,0,0,0.02); display:flex; flex-direction:column; }
.brand { font-weight:700; color:var(--accent); margin-bottom:18px; }
.nav { display:flex; flex-direction:column; gap:10px; }
.nav-item { padding-left:10px; padding-top:4px; padding-bottom:4px; border-radius:10px; color:#333; text-decoration:none; display:flex; justify-content:space-between; overflow:hidden; }
.nav-item.active { background:#EFEFEF; border-radius:30px; }
.notif { color:#fff; background:#c94a4a; border-radius:10px; padding:2px 6px; margin-left:8px; font-size:12px; }

.sidebar-footer { margin-top:auto; display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--muted); }
.logout{ color:var(--accent); }

.main { flex:1; display:flex; flex-direction:column; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:18px 28px; background:transparent; }
.top-search { width:420px; padding:10px 14px; border-radius:12px; border:1px solid #e6e6e6; background:#fff; }
.top-actions { display:flex; gap:10px; align-items:center; }
.icon{ background:none;border:none; font-size:18px; cursor:pointer; }
.avatar{ width:36px;height:36px;border-radius:50%; }

.content{ padding:20px 32px; }

.card { background:var(--card); border-radius:14px; padding:18px; box-shadow:0 8px 18px rgba(28,33,41,0.06); }
.card-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:12px; }
.card-header .left{ display:flex; gap:12px; align-items:center;}
.search { padding:10px 12px; border-radius:10px; border:1px solid #eee; width:360px; }
.btn.primary { background:var(--accent); color:#fff; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; }
.factory-table { width:100%; border-collapse:collapse; }
.factory-table th { text-align:left; font-weight:600; padding:12px 8px; color:var(--muted); font-size:13px; }
.factory-table td { padding:14px 8px; border-top:1px solid #f0f0f0; vertical-align:middle; }
.factory-cell { display:flex; align-items:center; gap:10px; }
.thumb{ width:48px; height:48px; border-radius:8px; object-fit:cover; }
.meta .title{ font-weight:600; }

.badge { padding:6px 10px; border-radius:6px; font-size:13px; display:inline-block; }
.badge--green { background: rgba(52, 199, 89, 0.15); color: rgba(40, 155, 69, 1); }
.badge--yellow { background: rgba(255, 213, 107, 1); color: rgba(82, 69, 37, 1); }
.badge--purple { background: #f3efff; color: #6b49d6; }
.badge--red{ background:#ffecec; color:#c94a4a; }
.badge--gray{ background:#f0f0f0; color:#777; }

:root[data-theme='dark'] .badge--green,
.layout.dark .badge--green {
    background: rgba(84, 213, 116, 0.15);
    color: rgba(84, 213, 116, 1);
}

:root[data-theme='dark'] .badge--purple,
.layout.dark .badge--purple {
    background: rgba(156, 114, 255, 0.15);
    color: rgba(156, 114, 255, 1);
}

:root[data-theme='dark'] .badge--red,
.layout.dark .badge--red {
    background: rgba(245, 72, 72, 0.15);
    color: rgba(245, 72, 72, 1);
}

:root[data-theme='dark'] .badge--gray,
.layout.dark .badge--gray {
    background: rgba(180, 180, 180, 0.15);
    color: rgba(180, 180, 180, 1);
}

.actions { text-align:right; color:var(--muted); }

@font-face {
    font-family: "SFMedium";
    src: url('css/fonts/SFProText-Medium.ttf') format('truetype');
}

.text-sfmedium {
    font-family: SFMedium;
    font-weight: 500;
    color: rgba(7, 7, 7, 1);
}

@font-face {
    font-family: "SFRegular";
    src: url('css/fonts/SFProText-Regular.ttf') format('truetype');
}

.text-sfregular {
    font-family: SFRegular;
    font-weight: 400;
    color: rgba(7, 7, 7, 1);
}

@font-face {
    font-family: "SFSemibold";
    src: url('css/fonts/SFProText-Semibold.ttf') format('truetype');
}

.text-sfsemibold {
    font-family: SFSemibold;
    font-weight: 600;
    color: rgba(7, 7, 7, 1);
}

/* Hamburger button — hidden on desktop, shown on mobile */
.hamburger-btn {
    display: none;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
}
.hamburger-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-primary, #222);
    border-radius: 2px;
}
.hamburger-btn:hover { background: rgba(0,0,0,0.05); }
:root[data-theme='dark'] .hamburger-btn:hover,
.layout.dark .hamburger-btn:hover { background: rgba(255,255,255,0.08); }

.mobile-nav-backdrop { display: none; }

@media (max-width:900px){
    .users-table {
        min-width: 700px;
    }

    .card-body {
        padding: 12px;
    }

    .filter-panel {
        width: 100%;
    }

    .top-search{ width:200px; }
    .search-input {
        width: 180px;
        max-width: 40vw;
    }
    .create-factory-btn span {
        display: none;
    }
    .create-factory-btn {
        padding: 8px;
        width: 44px;
        justify-content: center;
    }

    /* Show hamburger on mobile */
    .hamburger-btn { display: inline-flex; }

    /* Convert sidebar to slide-in drawer */
    .layout .sidebar {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px;
        max-width: 80vw;
        z-index: 1001;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
        box-shadow: 2px 0 12px rgba(0,0,0,0.15);
    }
    .layout.mobile-nav-open .sidebar {
        transform: translateX(0);
    }

    /* Backdrop overlay when drawer is open */
    .layout.mobile-nav-open .mobile-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 1000;
    }

    /* Lock body scroll-ish: prevent main from being too wide */
    .topbar { padding: 10px 14px !important; gap: 8px !important; }
    .content { padding: 14px !important; }

    /* Tighten topbar controls */
    .header-center > div { max-width: 100% !important; }

    .top-search { width: 100% !important; }

    /* Cards / tables breathing room */
    .card { padding: 12px; }
    .factory-table th, .factory-table td { padding: 10px 6px; }
}

@media (max-width:600px){
    .header-center { display: none !important; }
    .topbar { padding: 8px 10px !important; }
    .content { padding: 10px !important; }
    .card-header { flex-wrap: wrap; }
}

/* =====================================================================
   Mobile overrides for content pages: Factories, Challenges, Clips,
   Users, Admins, Payments, etc. CSS-only — works against the inline
   grid/flex styles each page uses.
   ===================================================================== */
@media (max-width:900px){

    /* Page-level containers shouldn't force horizontal overflow */
    .page-container,
    .statistics-section,
    .statistics-panel,
    .factories-page,
    .users-page,
    .admins-page,
    .payments-page,
    .clips-page,
    .challenges-page {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Metric cards: collapse 5-col grids to 2 cols on tablet, 1 on phone */
    .metrics-grid,
    [style*="grid-template-columns:repeat(5"],
    [style*="grid-template-columns: repeat(5"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .metric-card { padding: 12px !important; }

    /* Toolbar / filter rows wrap instead of overflow */
    .statistics-section > div,
    .card-header,
    .filters-row,
    .toolbar,
    .table-toolbar {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Pill dropdowns and buttons shrink */
    .pill-dropdown-toggle,
    .pill-dropdown,
    .export-btn,
    .create-factory-btn,
    .create-btn {
        font-size: 13px !important;
    }

    /* Tables: horizontal scroll inside their container */
    .table-container,
    .factories-table-wrap,
    .users-table-wrap,
    .clips-table-wrap,
    .payments-table-wrap,
    .admins-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .factory-table,
    .users-table,
    .clips-table,
    .payments-table,
    .admins-table,
    .challenges-table {
        min-width: 720px;
    }

    /* Search inputs full-width */
    .search,
    .search-input,
    .search-pill,
    .search-pill input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Modals/dialogs: full-screen sheet on mobile */
    .modal,
    .dialog,
    .modal-content,
    .dialog-content,
    .create-clip-popup,
    .challenge-create-modal,
    .challenge-edit-modal,
    .challenge-details-modal,
    .factory-details-modal,
    .clip-details-modal,
    .post-details-modal,
    .edit-admin-dialog,
    .create-admin-dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        height: auto !important;
        border-radius: 0 !important;
        margin: 0 !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
        position: fixed !important;
        inset: 0 !important;
        overflow-y: auto !important;
    }

    /* Two-column form layouts inside modals collapse */
    .form-grid,
    .form-row {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }

    /* Pagination wraps */
    .pagination,
    .pagination-row {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    /* Avatar / thumbnail cells stay compact */
    .thumb { width: 40px !important; height: 40px !important; }
}

@media (max-width:600px){
    /* On phones, drop metric grids to a single column */
    .metrics-grid,
    [style*="grid-template-columns:repeat(5"],
    [style*="grid-template-columns: repeat(5"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }

    /* Hide non-essential columns on phones — pages mark them with these */
    .factory-table .col-optional,
    .users-table .col-optional,
    .clips-table .col-optional,
    .payments-table .col-optional,
    .admins-table .col-optional,
    .challenges-table .col-optional,
    .col-hide-mobile {
        display: none !important;
    }

    /* Topbar buttons: smaller icon buttons */
    .circle-btn,
    .notif-btn { width: 38px !important; height: 38px !important; }
}

/* =====================================================================
   Factory tabs page (FactoryInfo) and its tab components.
   These use heavy inline styles, so we override structurally.
   ===================================================================== */
@media (max-width:900px){
    /* FactoryInfo tab strip: 6-column grid → horizontal scroll */
    .card > div[style*="grid-template-columns: repeat(6"],
    .card > div[style*="grid-template-columns:repeat(6"] {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .card > div[style*="grid-template-columns: repeat(6"]::-webkit-scrollbar,
    .card > div[style*="grid-template-columns:repeat(6"]::-webkit-scrollbar { display: none; }
    .card > div[style*="grid-template-columns: repeat(6"] > .tab,
    .card > div[style*="grid-template-columns: repeat(6"] > .tab-selected,
    .card > div[style*="grid-template-columns:repeat(6"] > .tab,
    .card > div[style*="grid-template-columns:repeat(6"] > .tab-selected {
        flex: 0 0 auto;
        min-width: 110px;
        padding: 0 14px !important;
    }

    /* Tab toolbar row (search + create + filter/sort) — wrap */
    div[style*="width:stretch"][style*="justify-content:space-between"],
    div[style*="width: stretch"][style*="justify-content: space-between"] {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    /* Search pill in tabs: shrink min-width */
    .search-pill[style*="min-width:320px"],
    .search-pill[style*="min-width: 320px"] {
        min-width: 0 !important;
        width: 100% !important;
        flex: 1 1 200px !important;
    }

    /* Tables inside tabs — wrap row that holds the table */
    div[style*="align-self:stretch"] > div[style*="flex:1"],
    div[style*="align-self: stretch"] > div[style*="flex: 1"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    div[style*="align-self:stretch"] > div[style*="flex:1"] > table,
    div[style*="align-self: stretch"] > div[style*="flex: 1"] > table {
        min-width: 720px;
    }

    /* Filter side panel (FactoryClipsTabFilter / Challenges filter) */
    .filter,
    .filter-panel {
        width: 100% !important;
        max-width: 100% !important;
        top: 0 !important;
        height: 100vh !important;
    }

    /* Factory details modal — already 380px wide, ensure full margin */
    .factory-details-modal {
        max-width: calc(100% - 24px) !important;
    }

    /* SubmissionViewModal: stack image + info */
    .modal-content[style*="max-width:800px"] > div > div[style*="gap:16px"]:first-child,
    .modal-content[style*="max-width: 800px"] > div > div[style*="gap: 16px"]:first-child {
        flex-direction: column !important;
    }
    .modal-content[style*="max-width:800px"] img[style*="width:200px"],
    .modal-content[style*="max-width: 800px"] img[style*="width: 200px"] {
        width: 100% !important;
        height: auto !important;
        max-height: 240px;
    }

    /* FactoryEditModal: it has its own @media (max-width:760px) but
       reinforce here so the modal fills the screen on tablets too */
    .modal[style*="width: 690px"],
    .modal[style*="width:690px"] {
        width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }

    /* Multi-select action rows (Run / Cancel / Finished / Approve / Reject) */
    div[style*="display:flex;gap:8px;align-items:center"][style*="cursor:pointer"],
    div[style*="display: flex; gap: 8px; align-items: center"] {
        flex-wrap: wrap !important;
    }

    /* Banner image inside FactoryEditModal: shrink fixed 390x200 */
    div[style*="width:390px;height:200px"],
    div[style*="width: 390px; height: 200px"] {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9;
    }

    /* Visibility/category panels: 361px fixed → full width */
    div[style*="width:361px"],
    div[style*="width: 361px"] {
        width: 100% !important;
    }

    /* Budget input forced 500px wide — stop horizontal overflow */
    input[type="number"][style*="width:500px"],
    input[type="number"][style*="width: 500px"] {
        width: 100% !important;
    }

    /* FactoryCreateWizard / large fixed-width inner panels */
    div[style*="max-width:720px"],
    div[style*="max-width: 720px"] {
        max-width: 100% !important;
    }

    /* Tabs row inside FactoryEditModal (.tabs uses width:100% per .tab) */
    .tabs { overflow-x: auto !important; }
    .tabs .tab { flex: 0 0 auto; min-width: 100px; padding: 0 12px !important; }
}

@media (max-width:600px){
    /* Hide less-critical table columns on phones for factory tabs.
       Strategy: hide 4th, 5th, 7th, 8th <th>/<td> on these tables. */
    div[style*="align-self:stretch"] > div[style*="flex:1"] > table thead th:nth-child(n+5):not(:last-child),
    div[style*="align-self:stretch"] > div[style*="flex:1"] > table tbody td:nth-child(n+5):not(:last-child) {
        /* keep visible — table already scrolls; hiding columns can hide critical info */
    }

    /* Smaller text in tab strip */
    .card > div[style*="grid-template-columns:repeat(6"] > .tab span,
    .card > div[style*="grid-template-columns: repeat(6"] > .tab-selected span {
        font-size: 13px !important;
    }

    /* Mini stats row in factory details modal */
    .mini-stats-row { flex-wrap: wrap !important; }
    .mini-stat-card { flex: 1 1 calc(50% - 8px) !important; }

    /* Statistics grid: 1 col on phones */
    .statistics-grid { grid-template-columns: 1fr !important; }
}

/* --- Login specific styles --- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px;
  box-sizing: border-box;
}

.login-card {
  width: 454px;
  max-width: calc(100% - 48px);
  background: var(--card);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 8px 18px rgba(28,33,41,0.06);
  border: 1px solid rgba(0,0,0,0.04);
  box-sizing: border-box;
}

.logo-row { display:flex; justify-content:center; }
.logo-badge {
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background: linear-gradient(90deg, #FF6839 0%, #FF5346 100%);
  padding:6px;
}
.logo-badge img { max-width:100%; height:auto; display:block; }

.login-title {
  text-align:center;
  margin-top:12px;
  font-size:17px;
  line-height:20px;
  color: rgba(7,7,7,1);
  font-weight:600;
}

.login-form { display:flex; flex-direction:column; gap:12px; }

.form-group { display:block; }

.form-label { font-size:15px; color: rgba(7,7,7,1); display:block; margin-bottom:6px; }

.login-input {
  width: 100%;
  margin-top:4px;
  background: rgba(239,239,239,1);
  border-radius:12px;
  padding:10px;
  font-size:15px;
  font-weight:400;
  border:1px solid transparent;
  box-sizing:border-box;
  outline:none;
}
.login-input:focus { box-shadow: 0 0 0 3px rgba(255,104,57,0.08); border-color: rgba(255,104,57,0.12); }

.validation-message {
  margin-top:6px;
  font-weight:400;
  font-size:13px;
  color: rgba(255,47,47,1);
  display:block;
}

.error-box {
  margin-top:6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-radius:8px;
  background:#fff0f0;
  padding:10px;
  color:#b02a2a;
  border:1px solid rgba(176,42,42,0.08);
}

.error-close {
  background:#f36a6a;
  color:#fff;
  border:none;
  padding:6px 8px;
  border-radius:6px;
  cursor:pointer;
}

.help-row { display:flex; justify-content:center; margin-top:8px; }
.help-link { font-size:15px; color: var(--accent); font-weight:600; text-decoration:none; }

.login-submit {
  width:100%;
  border-radius:12px;
  padding:10px 20px;
  background: linear-gradient(90deg, #FF6839 0%, #FF5346 100%);
  margin-top:8px;
  font-weight:500;
  font-size:15px;
  color:#fff;
  border:none;
  cursor:pointer;
}

/* ── Global dark-mode overrides for dropdowns, filter panels, and related controls ── */

/* Sort menus */
:root[data-theme='dark'] .sort-menu,
.layout.dark .sort-menu {
    background: #363636 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

:root[data-theme='dark'] .sort-item,
.layout.dark .sort-item {
    color: #fff !important;
}

:root[data-theme='dark'] .sort-item.active,
.layout.dark .sort-item.active {
    background: #585858 !important;
}

/* Filter panels */
:root[data-theme='dark'] .filter-panel,
.layout.dark .filter-panel {
    background: #363636 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

:root[data-theme='dark'] .filter-panel label,
:root[data-theme='dark'] .filter-panel h4,
:root[data-theme='dark'] .filter-panel .range-caption,
:root[data-theme='dark'] .filter-panel .filters-header h4,
.layout.dark .filter-panel label,
.layout.dark .filter-panel h4,
.layout.dark .filter-panel .range-caption,
.layout.dark .filter-panel .filters-header h4 {
    color: #fff !important;
}

:root[data-theme='dark'] .filter-panel span,
.layout.dark .filter-panel span {
    color: #fff !important;
}

:root[data-theme='dark'] .filter-panel input,
.layout.dark .filter-panel input {
    background: #363636 !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

:root[data-theme='dark'] .filter-panel input::placeholder,
.layout.dark .filter-panel input::placeholder {
    color: #9b9b9b !important;
}

:root[data-theme='dark'] .filter-panel .pill-input,
.layout.dark .filter-panel .pill-input {
    background: #363636 !important;
}

:root[data-theme='dark'] .filter-panel .clear-all-btn,
.layout.dark .filter-panel .clear-all-btn {
    color: #6bb8ff !important;
}

/* Chips inside filter panels */
:root[data-theme='dark'] .filter-panel .chip,
:root[data-theme='dark'] .filter-panel .platform-chip,
.layout.dark .filter-panel .chip,
.layout.dark .filter-panel .platform-chip {
    background: #363636 !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

:root[data-theme='dark'] .filter-panel .chip.active,
:root[data-theme='dark'] .filter-panel .platform-chip.active,
.layout.dark .filter-panel .chip.active,
.layout.dark .filter-panel .platform-chip.active {
    background: #585858 !important;
    color: #fff !important;
    border-color: #585858 !important;
}

/* Standalone chips (outside filter panels) */
:root[data-theme='dark'] .chip-filter.active,
.layout.dark .chip-filter.active {
    background: #585858 !important;
    color: #fff !important;
    border-color: #585858 !important;
}

/* Icon buttons (filter & sort toggle buttons) */
:root[data-theme='dark'] .icon-btn[style*="background:#EFEFEF"],
:root[data-theme='dark'] .icon-btn[style*="background:transparent"],
.layout.dark .icon-btn[style*="background:#EFEFEF"],
.layout.dark .icon-btn[style*="background:transparent"] {
    background: #363636 !important;
    border-color: #363636 !important;
}

/* Native select elements */
:root[data-theme='dark'] select,
.layout.dark select {
    background: #363636 !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px;
}

:root[data-theme='dark'] select option,
.layout.dark select option {
    background: #363636;
    color: #fff;
}

/* Select wrapper divs with hardcoded light bg */
:root[data-theme='dark'] div[style*="background: rgba(239, 239, 239"],
.layout.dark div[style*="background: rgba(239, 239, 239"] {
    background: #363636 !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

/* Search pills */
:root[data-theme='dark'] .search-pill,
.layout.dark .search-pill {
    background: var(--search-pill-bg, #363636) !important;
}

:root[data-theme='dark'] .search-pill input,
.layout.dark .search-pill input {
    color: #fff !important;
}

:root[data-theme='dark'] .search-pill input::placeholder,
.layout.dark .search-pill input::placeholder {
    color: #9b9b9b !important;
}

/* Table headers */
:root[data-theme='dark'] thead,
.layout.dark thead {
    background: var(--card-bg, #1A1A1A) !important;
    color: var(--table-header-text, #7E8792) !important;
}

/* Filter panel close button */
:root[data-theme='dark'] .filter-panel button[style*="font-size:20px"],
:root[data-theme='dark'] .filter-panel button[style*="font-size:22px"],
.layout.dark .filter-panel button[style*="font-size:20px"],
.layout.dark .filter-panel button[style*="font-size:22px"] {
    color: #fff !important;
}

/* Panel/dropdown backdrops */
:root[data-theme='dark'] .panel-backdrop,
.layout.dark .panel-backdrop {
    background: rgba(0, 0, 0, 0.5) !important;
}

:root[data-theme='dark'] .dropdown-backdrop,
.layout.dark .dropdown-backdrop {
    background: transparent !important;
}

/* Chip filters (Clients page dropdown filters) */
:root[data-theme='dark'] .chip-filter,
.layout.dark .chip-filter {
    background: #363636 !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Pagination buttons */
:root[data-theme='dark'] .pagination-btn,
.layout.dark .pagination-btn {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Tab styles for dark mode */
:root[data-theme='dark'] .tab,
:root[data-theme='dark'] .tab-selected,
:root[data-theme='dark'] .clients-tab,
.layout.dark .tab,
.layout.dark .tab-selected,
.layout.dark .clients-tab {
    color: var(--text, #fff) !important;
}

/* Checkboxes in dark mode */
:root[data-theme='dark'] input[type='checkbox'],
.layout.dark input[type='checkbox'] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 2px solid #363636;
    border-radius: 6px;
    position: relative;
    cursor: pointer;
}

:root[data-theme='dark'] input[type='checkbox']:checked,
.layout.dark input[type='checkbox']:checked {
    background: #7565D0;
    border-color: #7565D0;
}

:root[data-theme='dark'] input[type='checkbox']:checked::after,
.layout.dark input[type='checkbox']:checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid #FFFFFF;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

/* Custom search-type dropdown (replaces native <select>) */
.search-type-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 12px;
    border: 0;
    background: rgba(239, 239, 239, 1);
    border-radius: 12px;
    cursor: pointer;
    font-size: 15px;
    color: inherit;
    white-space: nowrap;
    font-family: inherit;
}

.search-type-menu {
    position: absolute;
    left: 0;
    top: 48px;
    background: #fff;
    border-radius: 12px;
    padding: 8px 0;
    min-width: 200px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    z-index: 20000;
    border: 1px solid rgba(0,0,0,0.04);
}

.search-type-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 16px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 15px;
    color: inherit;
    font-family: inherit;
}

.search-type-item:hover {
    background: rgba(0,0,0,0.04);
}

.search-type-item.active {
    font-weight: 600;
}

:root[data-theme='dark'] .search-type-btn,
.layout.dark .search-type-btn {
    background: #363636 !important;
    color: #fff !important;
}

:root[data-theme='dark'] .search-type-menu,
.layout.dark .search-type-menu {
    background: #363636 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

:root[data-theme='dark'] .search-type-item,
.layout.dark .search-type-item {
    color: #fff !important;
}

:root[data-theme='dark'] .search-type-item:hover,
.layout.dark .search-type-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

:root[data-theme='dark'] .search-type-item.active,
.layout.dark .search-type-item.active {
    background: #585858 !important;
}

:root[data-theme='dark'] img[src*="filter_small"],
.layout.dark img[src*="filter_small"],
:root[data-theme='dark'] img[src*="sort_small"],
.layout.dark img[src*="sort_small"] {
    filter: brightness(0) invert(55%);
}

/* Clients panel dark mode */
:root[data-theme='dark'] .clients-panel,
.layout.dark .clients-panel {
    background: rgba(26, 26, 26, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* =====================================================================
   Mobile overrides for Payments / Users / Clips / Challenges screens.
   Targets recurring patterns (modals with fixed widths, two-column
   side-by-side panels, header rows, stat tables).
   ===================================================================== */
@media (max-width:900px){

    /* Account-info row on Payments page: stack the two side-by-side panels */
    .account-info-panel {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        flex-wrap: wrap;
        gap: 12px;
    }

    /* Transactions / clip submissions / challenge submissions header rows */
    .transactions-panel > div[style*="justify-content:space-between"],
    .transactions-panel > div[style*="justify-content: space-between"] {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    /* Pagination block in Payments header → wrap and shrink */
    .pagination-btn { padding: 6px 10px !important; }

    /* TransferFundsModal three-tab row */
    .transfer-modal { width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; padding: 16px !important; }
    .transfer-modal input[type="number"][style*="width:160px"],
    .transfer-modal input[type="number"][style*="width: 160px"] { width: 100% !important; max-width: 220px !important; font-size: 36px !important; }
    .transfer-modal span[style*="font-size:48px"] { font-size: 36px !important; }
    .transfer-modal input[type="text"][style*="width:300px"],
    .transfer-modal input[type="text"][style*="width: 300px"] { width: 100% !important; }
    .transfer-modal select[style*="min-width:100px"] { min-width: 0 !important; }

    /* Generic modal-container (Deposit / Withdrawal / PayPal / Success) */
    .modal-container {
        max-width: calc(100% - 24px) !important;
    }
    .modal-body { padding: 24px 20px !important; }

    /* TransactionDetailsModal info-card grids look fine; just ensure padding */
    .info-card { padding: 12px !important; }

    /* AddUserDialog */
    .add-user-dialog {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
        max-height: calc(100vh - 32px) !important;
        overflow: auto;
        padding: 16px !important;
    }
    .modal-backdrop { padding: 16px !important; }
    .add-user-dialog .dialog-row { flex-direction: column !important; align-items: stretch !important; }
    .add-user-dialog .dialog-row > div[style*="width:50%"] { width: 100% !important; }
    .factory-item { max-width: 100% !important; }

    /* Users page toolbar */
    .toolbar { flex-wrap: wrap !important; }
    .toolbar .left,
    .toolbar .right { flex-wrap: wrap !important; }
    .users-table { min-width: 700px; }

    /* Clip details / Challenge details modals */
    .clip-details-modal,
    .challenge-details-modal {
        max-width: calc(100% - 24px) !important;
        width: calc(100% - 24px) !important;
        max-height: calc(100vh - 24px) !important;
    }

    /* Stats grids inside modals: keep 2 cols on tablet, 1 col on phone */
    .clip-details-modal div[style*="grid-template-columns:repeat(2,1fr)"],
    .challenge-details-modal div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    /* Filter side panels common pattern (.filter, .filter-panel) */
    .filter, .filter-panel {
        width: 100% !important;
        max-width: 100% !important;
        top: 0 !important;
        height: 100vh !important;
    }

    /* SubmissionReviewPopup2 fixed 420px */
    .modal-panel[style*="width:420px"],
    .modal-panel[style*="width: 420px"] {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
    }

    /* ChallengeEditModal .modal width:760px */
    .modal[style*="width:760px"],
    .modal[style*="width: 760px"] {
        width: 100% !important;
        max-width: calc(100% - 24px) !important;
    }
    /* Banner box in challenge edit (361x200) */
    .modal div[style*="width:361px"],
    .modal div[style*="width: 361px"] { width: 100% !important; max-width: 100% !important; }

    /* ChallengeSubmissions stats table — collapse 4 cols to 2 */
    .stats-table td.label { width: 25% !important; padding: 10px 8px !important; }
    .stats-table td.value { padding: 10px 8px !important; }

    /* ClipStatisticsTab grid columns */
    .stat-div {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    /* Clip Submissions toolbar wrap */
    .search-pill[style*="min-width:320px"],
    .search-pill[style*="min-width: 320px"] {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Filter-panel pill-input rows: stack min/max */
    .filter-panel section > div[style*="display:flex"][style*="gap:12px"],
    .filter-panel section > div[style*="display: flex"][style*="gap: 12px"] {
        flex-direction: column !important;
        gap: 8px !important;
    }
}

@media (max-width:600px){
    /* Stats table: stack rows so labels/values aren't squashed */
    .stats-table tr { display: grid; grid-template-columns: 1fr 1fr; }
    .stats-table td.label { width: auto !important; }

    /* ClipStatisticsTab → 1 column */
    .stat-div { grid-template-columns: 1fr !important; }

    /* Transfer modal tab buttons shrink */
    .transfer-modal .tab-btn { font-size: 13px !important; padding: 8px 10px !important; }

    /* Side-by-side stats grids in details modals → single column */
    .clip-details-modal div[style*="grid-template-columns:repeat(2,1fr)"],
    .challenge-details-modal div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Three-stat row in clip details modal */
    .clip-details-modal div[style*="display:flex;gap:12px"][style*="margin-bottom:20px"] {
        flex-wrap: wrap !important;
    }
    .clip-details-modal div[style*="display:flex;gap:12px"][style*="margin-bottom:20px"] > div {
        flex: 1 1 calc(50% - 6px) !important;
    }

    /* AddUserDialog: full screen sheet on phones */
    .add-user-dialog {
        border-radius: 0 !important;
        height: 100vh;
        max-height: 100vh !important;
    }
    .modal-backdrop { padding: 0 !important; }

    /* Banner-image inside ClipDetailsModal: shorter */
    .clip-details-modal img[style*="height:200px"] { height: 160px !important; }
    .challenge-details-modal img[style*="height:200px"] { height: 160px !important; }
}

/* =====================================================================
   Mobile overrides for Clients page + Admins dialogs.
   ===================================================================== */
@media (max-width:900px){
    /* Clients page: Clients.razor toolbar rows */
    .clients-panel > div[style*="justify-content:space-between"],
    .clients-panel > div[style*="justify-content: space-between"] {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    .clients-panel .search-pill[style*="min-width:320px"],
    .clients-panel .search-pill[style*="min-width: 320px"] {
        min-width: 0 !important;
        width: 100% !important;
    }
    .clients-tab { padding: 10px 14px !important; font-size: 14px !important; }

    /* ClientTransferFundsModal */
    .ctfm-overlay { padding: 12px !important; }
    .ctfm-modal { max-width: calc(100% - 24px) !important; padding: 16px !important; }
    .ctfm-modal span[style*="font-size:48px"] { font-size: 36px !important; }
    .ctfm-modal input[type="number"][style*="width:160px"],
    .ctfm-modal input[type="number"][style*="width: 160px"] {
        width: 100% !important;
        max-width: 220px !important;
        font-size: 36px !important;
    }
    /* From/To row: stack vertically and rotate switch indicator */
    .ctfm-modal div[style*="display:flex;align-items:center;gap:12px;padding:16px"][style*="border-radius:12px"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .ctfm-modal div[style*="text-align:right"] { text-align: left !important; }

    /* CreateClientModal / EditClientModal containers */
    .ccm-container,
    .ecm-container {
        max-width: calc(100% - 24px) !important;
        max-height: calc(100vh - 24px) !important;
    }
    .ccm-overlay,
    .ecm-overlay { padding: 12px !important; }
    .ccm-body,
    .ecm-body { padding: 8px 16px 12px 16px !important; }
    .ccm-header,
    .ecm-header,
    .ccm-footer,
    .ecm-footer { padding-left: 16px !important; padding-right: 16px !important; }
    /* Name + Surname / DOB triple-select rows: stack */
    .ccm-body > div[style*="display:flex;gap:12px"],
    .ecm-body > div[style*="display:flex;gap:12px"] {
        flex-direction: column !important;
    }

    /* EditClientModal confirm popups */
    .ecm-confirm-popup { max-width: calc(100% - 32px) !important; }

    /* Admins dialogs (.ea-modal / .create-admin-modal) */
    .ea-backdrop,
    .create-admin-backdrop { padding: 8px !important; }
    .ea-modal,
    .create-admin-modal {
        max-width: calc(100% - 16px) !important;
        max-height: calc(100vh - 16px) !important;
        padding: 16px 16px 0 16px !important;
    }
    /* Name + Surname grid → stack */
    .ea-modal div[style*="grid-template-columns:1fr 1fr"],
    .create-admin-modal div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* DOB year/month/day stays as 3 cols but tighter */
    .ea-modal div[style*="grid-template-columns:2fr 1fr 1fr"],
    .create-admin-modal div[style*="grid-template-columns:2fr 1fr 1fr"] {
        gap: 6px !important;
    }
    .ea-confirm-popup { max-width: calc(100% - 32px) !important; }

    /* ClientTransactionDetailsModal already uses .modal-container — covered earlier */
}

@media (max-width:600px){
    /* Clients tabs row */
    .clients-tab { padding: 10px 10px !important; font-size: 13px !important; }

    /* Transfer modal full-screen sheet on phones */
    .ctfm-modal {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        overflow-y: auto;
    }
    .ctfm-overlay { padding: 0 !important; }

    /* CreateClient/EditClient → full-screen */
    .ccm-container,
    .ecm-container {
        height: 100vh !important;
        max-height: 100vh !important;
        max-width: 100% !important;
        border-radius: 0 !important;
    }
    .ccm-overlay,
    .ecm-overlay { padding: 0 !important; }

    /* Admin dialogs → full screen */
    .ea-modal,
    .create-admin-modal {
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        padding: 14px 14px 0 14px !important;
    }
    .ea-backdrop,
    .create-admin-backdrop { padding: 0 !important; }

    /* Permission/factory rows: tighten */
    .ea-perm-row,
    .ea-factory-row,
    .ca-perm-row { padding: 8px 10px !important; }

    /* DOB triple select on phones → stack vertically */
    .ea-modal div[style*="grid-template-columns:2fr 1fr 1fr"],
    .create-admin-modal div[style*="grid-template-columns:2fr 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
    }
}