@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');:root{--bg:#060a12;--panel:#101827;--text:#f8fafc;--muted:#a7b0c0;--gold:#ffd44d;--line:#263247;--danger:#ff5b6b;--ok:#23d18b}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:radial-gradient(circle at top left,#17150c 0,#08111f 35%,#050914 100%);color:var(--text)}a{color:inherit;text-decoration:none}.app-shell{display:flex;min-height:100vh}.sidebar{width:270px;background:#070b12;border-right:1px solid var(--line);padding:26px 20px;position:fixed;inset:0 auto 0 0}.brand-logo{width:190px;margin-bottom:32px}.sidebar nav{display:grid;gap:10px}.sidebar a{padding:14px 16px;border-radius:14px;color:#d9deea;font-weight:800}.sidebar a.active,.sidebar a:hover{background:linear-gradient(90deg,rgba(255,212,77,.18),rgba(255,212,77,.03));border:1px solid rgba(255,212,77,.35);color:#fff}.main-content{margin-left:270px;padding:34px 44px;width:calc(100% - 270px)}.page-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:28px}.eyebrow{margin:0 0 8px;color:var(--gold);font-weight:900;letter-spacing:.12em;text-transform:uppercase}.page-head h1{font-size:42px;line-height:1;margin:0;letter-spacing:-.04em}.pill{border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:999px;padding:12px 18px;font-weight:800}.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}.stat-card{background:rgba(16,24,39,.86);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.2)}.stat-card span{display:block;color:var(--muted);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.stat-card strong{display:block;margin-top:8px;font-size:30px;letter-spacing:-.04em}.panel{background:rgba(16,24,39,.9);border:1px solid var(--line);border-radius:24px;padding:24px;margin-bottom:22px}.panel h2{margin:0 0 16px}.quick-actions,.actions{display:flex;flex-wrap:wrap;gap:10px}.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#202838;color:#fff;border-radius:14px;padding:11px 16px;font-weight:900;cursor:pointer;font-family:inherit;font-size:14px}.btn.primary{background:linear-gradient(180deg,#ffe47a,#e8b52e);color:#17130a;border:none}.btn.danger{background:rgba(255,91,107,.14);border-color:rgba(255,91,107,.35);color:#ffd8dc}.notice{background:rgba(35,209,139,.12);border:1px solid rgba(35,209,139,.32);border-radius:16px;padding:14px 16px;margin-bottom:16px}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{text-align:left;border-bottom:1px solid var(--line);padding:14px 12px;vertical-align:middle}.data-table th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.badge{display:inline-flex;border-radius:999px;border:1px solid var(--line);padding:6px 10px;background:rgba(255,255,255,.06);font-weight:800;font-size:12px}.badge-approved,.badge-active{color:var(--ok);border-color:rgba(35,209,139,.35)}.badge-pending{color:var(--gold);border-color:rgba(255,212,77,.35)}.badge-rejected,.badge-blocked{color:var(--danger);border-color:rgba(255,91,107,.35)}.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:min(760px,100%);background:rgba(16,24,39,.94);border:1px solid var(--line);border-radius:28px;padding:36px;box-shadow:0 30px 90px rgba(0,0,0,.35)}.auth-card img{width:190px;margin-bottom:24px}.auth-card h1{font-size:38px;margin:0 0 10px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{display:grid;gap:7px}.field label{font-size:12px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}input,select,textarea{width:100%;border:1px solid var(--line);background:#080d17;color:#fff;border-radius:14px;padding:13px 14px;font:inherit}textarea{min-height:90px}.full{grid-column:1/-1}@media(max-width:900px){.app-shell{display:block}.sidebar{position:relative;width:auto}.main-content{margin:0;width:auto;padding:22px}.stat-grid,.form-grid{grid-template-columns:1fr}.page-head{align-items:flex-start;flex-direction:column}}

/* 24HRBETTING MOBILE OPTIMIZATION V10 */
:root{
  --m24-bg:#070b13;
  --m24-card:#101827;
  --m24-card2:#121c2e;
  --m24-gold:#f5c542;
  --m24-text:#f8fafc;
  --m24-muted:#aab6ca;
  --m24-border:rgba(245,197,66,.18);
}

*{box-sizing:border-box}
img{max-width:100%;height:auto}

/* Global responsive containers */
.container,
.admin-container,
.agent-container,
.page,
.main,
.content,
.dashboard,
.panel,
.wrapper{
  max-width:100%;
}

/* Prevent horizontal page overflow */
body{
  overflow-x:hidden;
}

/* Tables: make all large tables usable on mobile */
table{
  width:100%;
}
.table-wrap,
.table-responsive,
.card table,
.panel table,
.content table,
.main table{
  display:block;
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

th,td{
  white-space:nowrap;
}

/* Forms */
form{
  max-width:100%;
}
input,select,textarea,button,.btn{
  max-width:100%;
}
textarea{
  min-height:110px;
}

/* Buttons */
.btn,
button,
input[type="submit"]{
  touch-action:manipulation;
}

/* Cards / stats */
.card,
.stat-card,
.kpi-card,
.panel,
.box,
.auth-card{
  overflow:hidden;
}

/* Better mobile login/signup/reset pages */
@media (max-width: 720px){
  body{
    font-size:15px;
  }

  .auth-card{
    width:min(94vw,520px)!important;
    padding:22px!important;
    border-radius:22px!important;
  }

  .auth-logo{
    width:160px!important;
  }

  .auth-card h1{
    font-size:26px!important;
    line-height:1.15!important;
  }

  .links{
    flex-direction:column!important;
  }

  .links .btn,
  .links a.btn{
    width:100%!important;
    min-width:0!important;
  }
}

/* Admin/agent layout mobile normalization */
@media (max-width: 900px){
  .layout,
  .admin-layout,
  .agent-layout,
  .dashboard-layout,
  .app-layout{
    display:block!important;
  }

  .sidebar,
  aside,
  .nav-sidebar,
  .admin-sidebar,
  .agent-sidebar{
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    min-height:auto!important;
    height:auto!important;
    display:block!important;
    border-right:0!important;
    border-bottom:1px solid var(--m24-border)!important;
    padding:14px!important;
    margin:0 0 16px!important;
    overflow-x:auto!important;
    white-space:nowrap!important;
  }

  .sidebar nav,
  aside nav,
  .nav-sidebar nav,
  .admin-sidebar nav,
  .agent-sidebar nav,
  .menu,
  .nav,
  .sidebar-menu{
    display:flex!important;
    gap:10px!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:4px!important;
  }

  .sidebar a,
  aside a,
  .nav-sidebar a,
  .admin-sidebar a,
  .agent-sidebar a,
  .menu a,
  .nav a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:42px!important;
    padding:10px 13px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.04)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    white-space:nowrap!important;
    text-decoration:none!important;
  }

  .main,
  main,
  .admin-main,
  .agent-main,
  .content,
  .page-content{
    width:100%!important;
    margin:0!important;
    padding:14px!important;
  }

  .header,
  .topbar,
  .page-header,
  .admin-header,
  .agent-header{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:12px!important;
  }

  .header h1,
  .topbar h1,
  .page-header h1,
  h1{
    font-size:26px!important;
    line-height:1.15!important;
  }

  h2{font-size:21px!important}
  h3{font-size:18px!important}

  .grid,
  .cards,
  .stats-grid,
  .kpi-grid,
  .dashboard-grid,
  .form-grid,
  .row,
  .columns{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  .card,
  .panel,
  .box,
  .stat-card,
  .kpi-card{
    padding:16px!important;
    border-radius:18px!important;
  }

  .actions,
  .form-actions,
  .button-row{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    align-items:stretch!important;
  }

  .actions .btn,
  .form-actions .btn,
  .button-row .btn,
  .actions button,
  .form-actions button,
  .button-row button{
    width:100%!important;
  }

  input,
  select,
  textarea{
    width:100%!important;
    font-size:16px!important; /* avoids iOS zoom */
  }
}

/* Mobile table as cards where possible */
@media (max-width: 640px){
  .mobile-card-table table,
  table.mobile-card-table{
    display:block!important;
    overflow:visible!important;
  }

  .mobile-card-table thead,
  table.mobile-card-table thead{
    display:none!important;
  }

  .mobile-card-table tbody,
  .mobile-card-table tr,
  .mobile-card-table td,
  table.mobile-card-table tbody,
  table.mobile-card-table tr,
  table.mobile-card-table td{
    display:block!important;
    width:100%!important;
  }

  .mobile-card-table tr,
  table.mobile-card-table tr{
    background:rgba(255,255,255,.035)!important;
    border:1px solid var(--m24-border)!important;
    border-radius:16px!important;
    padding:12px!important;
    margin-bottom:12px!important;
  }

  .mobile-card-table td,
  table.mobile-card-table td{
    border:0!important;
    padding:8px 0!important;
    white-space:normal!important;
  }

  .mobile-card-table td::before,
  table.mobile-card-table td::before{
    content:attr(data-label);
    display:block;
    color:var(--m24-muted);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:2px;
  }
}

/* Make regular tables scrollable without breaking desktop */
@media (max-width: 640px){
  table:not(.mobile-card-table){
    min-width:720px;
  }

  .table-wrap table,
  .table-responsive table{
    min-width:720px;
  }

  .btn,
  button,
  input[type="submit"]{
    min-height:44px!important;
  }
}

/* Small utility classes for future pages */
.mobile-only{display:none!important}
@media (max-width: 720px){
  .desktop-only{display:none!important}
  .mobile-only{display:block!important}
}
@import url('mobile-v11.css?v=11');