/* QuizFlame Admin Rich UI (v1)
   ------------------------------------------------------------
   Goal: make every admin page feel like a cohesive "product UI"
   without requiring a full rewrite of every view.

   This stylesheet is intentionally conservative:
   - enhances Bootstrap components
   - adds a few small utility classes
   - avoids breaking existing markup
*/

html[data-qf-role="admin"] body{
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(var(--bs-primary-rgb), .10), transparent 60%),
    radial-gradient(800px 520px at 100% 0%, rgba(var(--bs-warning-rgb), .10), transparent 65%),
    linear-gradient(180deg, #F5F7FB 0%, #F8FAFC 100%);
}

html[data-qf-role="admin"]{
  --qf-radius-sm: 10px;
  --qf-radius-md: 14px;
  --qf-radius-lg: 18px;
  --qf-shadow-sm: 0 6px 16px rgba(2,6,23,.08);
  --qf-shadow-md: 0 12px 28px rgba(2,6,23,.10);
  --qf-border: 1px solid rgba(15,23,42,.10);
  --qf-border-soft: 1px solid rgba(15,23,42,.08);
  --qf-surface: rgba(255,255,255,.92);
  --qf-surface-2: rgba(255,255,255,.75);
  --qf-text-soft: rgba(15,23,42,.72);
}

/* Layout polish */
html[data-qf-role="admin"] .qf-admin-main{
  padding: 18px 18px 26px 18px;
  max-width: 1520px;
  margin: 0 auto;
}

html[data-qf-role="admin"] .qf-admin-topbar{
  backdrop-filter: blur(10px);
}

html[data-qf-role="admin"] .qf-admin-sidebar{
  border-right: var(--qf-border-soft);
  background: linear-gradient(180deg, rgba(248,250,252,.92) 0%, rgba(241,245,249,.92) 100%);
}

/* Typography */
html[data-qf-role="admin"] h1,
html[data-qf-role="admin"] h2,
html[data-qf-role="admin"] h3,
html[data-qf-role="admin"] h4{
  letter-spacing: -0.015em;
}

html[data-qf-role="admin"] .text-muted{
  color: var(--qf-text-soft) !important;
}

html[data-qf-role="admin"] .qf-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Cards */
html[data-qf-role="admin"] .card,
html[data-qf-role="admin"] .qf-card{
  border-radius: var(--qf-radius-lg) !important;
  border: var(--qf-border-soft) !important;
  background: var(--qf-surface);
  box-shadow: var(--qf-shadow-sm);
}

html[data-qf-role="admin"] .card .card-header{
  background: transparent;
  border-bottom: var(--qf-border-soft);
}

html[data-qf-role="admin"] .card .card-body{
  padding: 18px;
}

html[data-qf-role="admin"] .card .card-footer{
  background: transparent;
  border-top: var(--qf-border-soft);
}

/*
 * Performance helper: allow the browser to skip layout/paint for sections
 * until they are about to be shown.
 *
 * Use on below-the-fold cards/lists in the dashboard.
 */
html[data-qf-role="admin"] .qf-cv{
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}

/* Make alerts feel like UI panels */
html[data-qf-role="admin"] .alert{
  border-radius: var(--qf-radius-md);
  border: var(--qf-border-soft);
  box-shadow: 0 8px 20px rgba(2,6,23,.06);
}

/* Buttons */
html[data-qf-role="admin"] .btn{
  border-radius: 12px;
  font-weight: 600;
}

html[data-qf-role="admin"] .btn.btn-sm{
  border-radius: 10px;
  font-weight: 600;
}

html[data-qf-role="admin"] .btn-primary{
  box-shadow: 0 10px 18px rgba(var(--bs-primary-rgb), .18);
}

html[data-qf-role="admin"] .btn-outline-secondary{
  background: rgba(255,255,255,.75);
}

html[data-qf-role="admin"] .btn-group .btn{
  box-shadow: none !important;
}

/* Inputs */
html[data-qf-role="admin"] .form-control,
html[data-qf-role="admin"] .form-select{
  border-radius: 12px;
  border: var(--qf-border-soft);
  background: rgba(255,255,255,.92);
}

html[data-qf-role="admin"] .form-control:focus,
html[data-qf-role="admin"] .form-select:focus{
  box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .14);
  border-color: rgba(var(--bs-primary-rgb), .45);
}

html[data-qf-role="admin"] .form-label{
  font-weight: 700;
}

html[data-qf-role="admin"] .qf-label-required::after{
  content: ' *';
  color: var(--bs-danger);
  font-weight: 800;
}

html[data-qf-role="admin"] .form-text{
  color: rgba(15,23,42,.62);
}

html[data-qf-role="admin"] .input-group .btn{
  border-radius: 0 12px 12px 0;
}

/* Tabs / pills */
html[data-qf-role="admin"] .nav-tabs{
  border-bottom: var(--qf-border-soft);
}

html[data-qf-role="admin"] .nav-tabs .nav-link{
  border-radius: 12px 12px 0 0;
}

html[data-qf-role="admin"] .nav-pills .nav-link{
  border-radius: 999px;
  font-weight: 700;
}

/* Badges */
html[data-qf-role="admin"] .badge{
  border-radius: 999px;
  padding: .38em .58em;
}

/* Tables */
html[data-qf-role="admin"] .table{
  --bs-table-bg: transparent;
}

html[data-qf-role="admin"] .table thead th{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(15,23,42,.62);
  background: rgba(241,245,249,.65);
  border-bottom: var(--qf-border-soft) !important;
  position: sticky;
  top: 0;
  z-index: 1;
}

html[data-qf-role="admin"] .table tbody td{
  border-bottom: 1px solid rgba(15,23,42,.06);
}

html[data-qf-role="admin"] .table tbody tr:hover{
  background: rgba(var(--bs-primary-rgb), .04);
}

html[data-qf-role="admin"] .table-responsive{
  border-radius: var(--qf-radius-md);
  overflow: auto;
}

/* Consistent table toolbar (replaces native DataTables controls) */
html[data-qf-role="admin"] .qf-tablebar{
  margin: 0 0 12px 0;
  padding: 10px 12px;
  border-radius: var(--qf-radius-md);
  border: var(--qf-border-soft);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}
html[data-qf-role="admin"] .qf-tablebar input[type="search"]{
  background: rgba(255,255,255,.96);
}
html[data-qf-role="admin"] .qf-tablebar [data-qf-count]{
  margin-left: auto;
  white-space: nowrap;
}

/* Hide the built-in DataTables UI to prevent duplicate search bars */
html[data-qf-role="admin"] .dataTables_wrapper .dataTables_filter,
html[data-qf-role="admin"] .dataTables_wrapper .dataTables_length,
html[data-qf-role="admin"] .dataTables_wrapper .dataTables_info,
html[data-qf-role="admin"] .dt-container .dt-search,
html[data-qf-role="admin"] .dt-container .dt-length,
html[data-qf-role="admin"] .dt-container .dt-info{
  display: none !important;
}

/* Dropdown menus */
html[data-qf-role="admin"] .dropdown-menu{
  border-radius: var(--qf-radius-md);
  border: var(--qf-border-soft);
  box-shadow: var(--qf-shadow-md);
}

html[data-qf-role="admin"] .dropdown-item{
  border-radius: 10px;
}

/* Modals */
html[data-qf-role="admin"] .modal-content{
  border-radius: var(--qf-radius-lg);
  border: var(--qf-border-soft);
  box-shadow: var(--qf-shadow-md);
}

html[data-qf-role="admin"] .modal-header{
  border-bottom: var(--qf-border-soft);
}

html[data-qf-role="admin"] .modal-footer{
  border-top: var(--qf-border-soft);
}

/* Accordions */
html[data-qf-role="admin"] .accordion-item{
  border-radius: var(--qf-radius-md) !important;
  border: var(--qf-border-soft) !important;
  overflow: hidden;
}

html[data-qf-role="admin"] .accordion-button{
  font-weight: 700;
}

/* Progress */
html[data-qf-role="admin"] .progress{
  border-radius: 999px;
  background: rgba(15,23,42,.08);
}

html[data-qf-role="admin"] .progress-bar{
  border-radius: 999px;
}

/* Useful small utilities (opt-in) */
.qf-surface{
  background: var(--qf-surface);
  border: var(--qf-border-soft);
  border-radius: var(--qf-radius-lg);
  box-shadow: var(--qf-shadow-sm);
}

.qf-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.qf-section-title h2,
.qf-section-title h3,
.qf-section-title h4{
  margin:0;
}

.qf-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: var(--qf-border-soft);
  background: rgba(255,255,255,.78);
  font-weight: 700;
  font-size: 12px;
}

.qf-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border-radius: var(--qf-radius-md);
  border: var(--qf-border-soft);
  background: rgba(255,255,255,.70);
}

.qf-empty{
  border-radius: var(--qf-radius-lg);
  border: 1px dashed rgba(15,23,42,.18);
  background: rgba(255,255,255,.60);
  padding: 18px;
}

/* Make long pages feel calmer */
html[data-qf-role="admin"] hr{
  border-top: 1px solid rgba(15,23,42,.10);
}

/* Small screens */
@media (max-width: 575.98px){
  html[data-qf-role="admin"] .qf-admin-main{
    padding-left: 12px;
    padding-right: 12px;
  }
  html[data-qf-role="admin"] .card .card-body{
    padding: 14px;
  }
}

/* ---------------------------
   Ticketing layout helpers
   --------------------------- */

/* Ticketing: Ticket types links + Orders rechts = altijd horizontaal.
   Op smalle schermen laten we horizontaal scrollen (i.p.v. stapelen). */
html[data-qf-role="admin"] .qf-ticketing-panels{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:16px;
  overflow-x:auto;
  padding-bottom:6px;
  -webkit-overflow-scrolling:touch;
}

html[data-qf-role="admin"] .qf-ticketing-panel{
  flex:0 0 auto;
}

html[data-qf-role="admin"] .qf-ticketing-panel--types{
  min-width:520px;
  flex-basis:520px;
}

html[data-qf-role="admin"] .qf-ticketing-panel--orders{
  min-width:720px;
  flex-basis:780px;
}

/* Desktop: geen scroll nodig, gewoon 5/7 kolommen */
@media (min-width: 1200px){
  html[data-qf-role="admin"] .qf-ticketing-panels{ overflow-x:visible; }
  html[data-qf-role="admin"] .qf-ticketing-panel--types{ min-width:0; flex:0 0 41.666%; }
  html[data-qf-role="admin"] .qf-ticketing-panel--orders{ min-width:0; flex:0 0 58.333%; }
}