/* app/static/css/components.css */

/* =========================
   Typography helpers
========================= */
.h1{
  margin:0;
  font-size:22px;
  line-height:1.2;
  font-weight:700;
}
.h2{
  margin:20px 0 10px;
  font-size:14px;
  font-weight:600;
  color:var(--muted);
}
.muted{color:var(--muted); margin:8px 0 0}
.small{font-size:12px}

/* Layout helpers */
.row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.headrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}
.bulkhead{
  align-items:flex-start;
  justify-content:center;
}
.bulkhint{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

/* =========================
   Card
========================= */
.card{
  background:var(--surface);
  border:1px solid var(--line2);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding:22px;
}

/* =========================
   Club box
========================= */
.clubbox{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius: var(--r);
  border:1px solid var(--line2);
  background:var(--surface2);
  margin:12px 0 10px;
}
.clublogo{
  width:44px;
  height:44px;
  border-radius:8px;
  object-fit:cover;
  border:1px solid var(--line2);
  background:var(--surface);
}
.clubmeta{min-width:0; display:flex; flex-direction:column; gap:2px}
.label{
  font-size:12px;
  color:var(--muted);
}
.clubname{
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================
   Buttons (classic)
========================= */
button, input, select, textarea{font-family:inherit; color:inherit}

.btn, .btn2{
  appearance:none;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  border-radius:6px;
  padding:9px 12px;
  font-weight:600;
  font-size:13px;
  line-height:1.1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
}
.btn:hover, .btn2:hover{background:var(--surface2)}
.btn:focus-visible, .btn2:focus-visible{outline:2px solid rgba(11,92,171,.25); outline-offset:2px}
.btn.full, .btn2.full{width:100%}
.btn[disabled], .btn2[disabled], .btn.is-disabled{
  opacity:.55;
  cursor:not-allowed;
  background:var(--surface2);
}

/* Primary (simple corporate) */
.btn{
  border-color: rgba(11,92,171,.35);
  background: rgba(11,92,171,.06);
}
.btn:hover{
  border-color: rgba(11,92,171,.45);
  background: rgba(11,92,171,.10);
}

/* Danger */
.btn2.danger, .btn.danger{
  border-color: rgba(180,35,24,.35);
  background: rgba(180,35,24,.06);
}
.btn2.danger:hover, .btn.danger:hover{
  border-color: rgba(180,35,24,.45);
  background: rgba(180,35,24,.10);
}

/* =========================
   Feedback blocks
========================= */
.err, .ok, .adminhint{
  border-radius:8px;
  border:1px solid var(--line2);
  background:var(--surface2);
  padding:10px 12px;
  margin-top:12px;
}
.err{
  border-color: rgba(180,35,24,.35);
  background: var(--danger-bg);
}
.ok{
  border-color: rgba(6,118,71,.30);
  background: var(--ok-bg);
}
.adminhint{
  border-color: rgba(11,92,171,.18);
}

/* =========================
   Divider
========================= */
.divider{
  height:1px;
  background: var(--line2);
  margin:14px 0;
}

/* =========================
   Forms
========================= */
.form{margin-top:12px}
.form > * + *{margin-top:12px}

label{
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:12px;
  color:var(--muted);
}
.label-row{
  display:inline-flex;
  align-items:center;
}
.label-text{
  flex:1 1 auto;
}
.label-right{
  margin-left:4px;
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
}
.label-err{
  margin-left:4px;
  font-size:11px;
  font-weight:600;
  color: rgba(180,35,24,.75);
}

input, select, textarea{
  width:100%;
  height:40px;
  border-radius:6px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  padding:0 10px;
  outline:none;
  box-sizing:border-box;
}
select.inputlike{
  height:40px !important;
  min-height:40px;
  max-height:40px;
  line-height:38px;
  padding:0 10px !important;
  display:block;
  box-sizing:border-box;
}
select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  height:40px;
  min-height:40px;
  line-height:38px;
  padding:0 10px;
  display:block;
  box-sizing:border-box;
  vertical-align:middle;
}
textarea{min-height:110px; padding:10px; height:auto}
input:focus, select:focus, textarea:focus{
  border-color: rgba(11,92,171,.45);
  outline:2px solid rgba(11,92,171,.18);
  outline-offset:1px;
}
input[type="file"]{
  height:auto;
  padding:10px;
}

/* grid2 used in new/edit */
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width:760px){
  .grid2{grid-template-columns: 1fr}
}

/* =========================
   Modal
========================= */
.modal{
  position:fixed;
  inset:0;
  z-index:80;
  display:block;
  opacity:0;
  pointer-events:none;
  transition: opacity .12s ease;
}
.modal[aria-hidden="false"]{
  opacity:1;
  pointer-events:auto;
}
.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(17,24,39,.35);
}
.modal-card{
  position:relative;
  width:min(520px, calc(100% - 28px));
  margin: 84px auto 0;
  border-radius:8px;
  border:1px solid var(--line2);
  background:var(--surface);
  box-shadow: var(--shadow);
}
.modal-card-img{
  width:fit-content;
  max-width:calc(100% - 28px);
  margin: 0 auto;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:0;
  box-shadow:none;
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-bottom:1px solid var(--line2);
}
.modal-title{
  font-weight:600;
  font-size:13px;
  color:var(--muted);
}
.modal-body{padding:12px}

/* admin: create user modal */
.user-new-modal .modal-card{
  width:min(640px, calc(100% - 28px));
  margin:72px auto 0;
}
.user-new-modal .modal-head{
  padding:12px 14px;
}
.user-new-modal .modal-title{
  color:var(--text);
  font-size:15px;
  font-weight:700;
}
.user-new-modal .modal-body{
  padding:12px 14px 14px;
}
.user-new-modal .form .grid2{
  gap:8px 10px;
}
.user-new-modal .form label{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.user-new-modal .field-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-weight:600;
  font-size:12px;
  color:var(--text);
}
.user-new-modal .req{
  color:rgba(180,35,24,.9);
  font-weight:700;
}
.user-new-modal .field-meta{
  font-size:10px;
  color:var(--muted);
  padding:2px 6px;
  border-radius:999px;
  border:1px solid var(--line2);
  background:var(--surface);
}
.user-new-modal .help{
  font-size:10px;
  color:var(--muted);
}
.user-new-modal .user-new-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border-radius:6px;
  background:var(--surface2);
  border:1px solid var(--line2);
}
.user-new-modal .user-new-toggle input{
  width:14px;
  height:14px;
}
.user-new-modal .toggle-text{
  display:flex;
  flex-direction:column;
  gap:0;
}
.user-new-modal .toggle-title{
  font-weight:600;
  font-size:11px;
  color:var(--text);
}
.user-new-modal .user-new-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:8px;
}

.iconbtn{
  width:34px;
  height:34px;
  border-radius:6px;
  border:1px solid var(--line);
  background:var(--surface);
  cursor:pointer;
  display:grid;
  place-items:center;
}
.iconbtn:hover{background:var(--surface2)}
.iconbtn:focus-visible{outline:2px solid rgba(11,92,171,.25); outline-offset:2px}

/* bulk box */
.bulkbox{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-radius:8px;
  border:1px solid var(--line2);
  background:var(--surface2);
}
.bulkbox-compact{
  flex-direction:column;
  align-items:stretch;
}
.bulk-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.bulk-actions .btn2{width:100%}
.bulk-upload-home{margin-top:0}
.bulk-upload-home input[type="file"]{display:none}
.bulktext{min-width:0}
.bulkttl{font-weight:600; font-size:13px}
.bulksub{margin-top:4px; font-size:12px; color:var(--muted)}

/* =========================
   Login page (standalone)
========================= */
.login-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px var(--gutter);
}
.login-shell{
  width:min(460px, 100%);
  padding:26px 22px 20px;
}
.login-logo-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:8px;
}
.login-logo{
  width:min(280px, 72vw);
  height:auto;
  object-fit:contain;
}
.login-title{
  margin:0;
  text-align:center;
  font-size:21px;
  font-weight:700;
}
.login-subtitle{
  margin:8px 0 0;
  text-align:center;
  color:var(--muted);
}
.login-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:14px;
}
.login-submit{
  height:40px;
}
@media (max-width:520px){
  .login-shell{padding:20px 16px 16px}
}

/* =========================
   Bulk preview helpers
========================= */
.bulklist{display:flex; flex-direction:column; gap:12px; margin-top:10px}
.bulk-upload{margin-top:10px}
.bulkfile{
  display:flex;
  align-items:center;
  gap:10px;
}
.modal-close{
  position:absolute;
  top:10px;
  right:10px;
  background:transparent;
  border:0;
  box-shadow:none;
  font-size:16px;
  line-height:1;
  color:rgba(17,24,39,.8);
  cursor:pointer;
  padding:0;
}
.modal-close:hover{color:rgba(17,24,39,1)}
.modal-close:focus-visible{outline:2px solid rgba(11,92,171,.25); outline-offset:2px}
.modal-close-left{
  left:10px;
  right:auto;
}
.bulkfile input[type="file"]{display:none}
.bulkfile-btn{
  border:1px solid var(--line);
  background:var(--surface);
  padding:8px 12px;
  border-radius:6px;
  font-weight:600;
  font-size:12px;
  cursor:pointer;
}
.bulkfile-name{
  font-size:12px;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.bulkrow{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  border-radius:8px;
  border:1px solid var(--line2);
  background:var(--surface);
}
.bulkrow-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid var(--line2);
  padding-bottom:8px;
}
.bulkrow-title{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}
.bulkrow-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.bulkrow-head-wide{
  border-bottom:0;
  padding-bottom:0;
}
.bulkrow-actions-wide{
  width:100%;
  justify-content:flex-end;
}
.bulkrow-actions-wide .btn,
.bulkrow-actions-wide .btn2{
  min-width:120px;
}
.bulkexists{
  margin-left:auto;
  font-size:11px;
  color: rgba(180,35,24,.9);
  background: rgba(180,35,24,.08);
  border:1px solid rgba(180,35,24,.18);
  padding:4px 8px;
  border-radius:999px;
  white-space:nowrap;
}
.bulkexists-wide{
  width:100%;
  justify-content:center;
  text-align:center;
}
.bulkbody{display:block}
.bulkcols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.bulkcols label{font-size:11px}
.bulkcols input{
  height:30px;
  font-size:12px;
  padding:0 8px;
}
.bulkgroup{
  border:1px solid var(--line2);
  border-radius:8px;
  padding:8px;
  background:var(--surface2);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:6px;
}
.bulkgroup .full-row{
  grid-column:1/-1;
}
.bulkgroup-photos{
  grid-column:1/-1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bulkttl{
  grid-column:1/-1;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
}
.bulkimgcard{
  display:grid;
  grid-template-rows: auto auto 1fr;
  align-items:start;
  gap:6px;
  padding:6px;
  border:1px dashed var(--line2);
  border-radius:6px;
  background:var(--surface);
}
.bulkimghead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.bulkimgcard.is-loaded{
  border-color: rgba(6,118,71,.35);
  background: rgba(6,118,71,.04);
}
.img-btn.is-loaded{
  border-color: rgba(6,118,71,.35);
  background: rgba(6,118,71,.06);
}
.bulkimglabel{
  font-size:11px;
  color:var(--muted);
  font-weight:600;
}
.img-clear{
  width:auto;
  height:auto;
  border:0;
  background:transparent;
  font-size:12px;
  line-height:1;
  padding:0;
  display:inline-block;
  cursor:pointer;
  color:var(--muted);
}
.img-clear:hover{color:var(--text)}
.img-clear:focus-visible{outline:2px solid rgba(11,92,171,.25); outline-offset:2px}
.bulkfile-input{display:none}
.bulkpopup{
  width:min(74vw, 520px);
  height:auto;
  border-radius:10px;
  border:1px solid var(--line2);
  background:var(--surface);
  max-height:70vh;
  object-fit:contain;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
@media (max-width:900px){
  .bulkcols{grid-template-columns: 1fr}
  .bulkgroup{grid-template-columns: 1fr 1fr}
  .bulkgroup-photos{grid-template-columns: 1fr}
  .bulkexists{white-space:normal}
}

/* =========================
   Players list (migrado de user_home.css)
========================= */
.plist{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.prow{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--line2);
  background:var(--surface);
}

.linkrow{cursor:pointer}
.linkrow:hover{background:var(--surface2)}
.linkrow:focus-visible{outline:2px solid rgba(11,92,171,.25); outline-offset:2px}

.pimg{
  width:40px;
  height:40px;
  border-radius:8px;
  border:1px solid var(--line2);
  background:var(--surface2);
  object-fit:cover;
  flex:0 0 auto;
}
.pimg.ph{
  display:grid;
  place-items:center;
  font-size:16px;
  color:var(--muted);
}

.pmeta{min-width:0; display:flex; flex-direction:column; gap:2px}
.pname{
  font-weight:600;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pmuted{
  font-size:12px;
  color:var(--muted);
}
/* =========================
   Player edit (corporate classic)
========================= */

.player-edit{
  display:grid;
  grid-template-columns: 200px 1fr;
  gap:28px;
  align-items:start;
}

/* Foto */
.player-photo{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.player-photo img,
.photo-placeholder{
  width:140px;
  height:180px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid var(--line2);
  background:var(--surface2);
}

.photo-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  color:var(--muted);
}

/* Foto form */
.photo-form input[type="file"]{
  margin-top:4px;
}

/* Datos */
.player-data{
  max-width:420px;
}

/* Acción principal */
.primary-action{
  margin-top:22px;
}

/* Acción secundaria */
.secondary-action{
  margin-top:18px;
}

/* Responsive */
@media (max-width:720px){
  .player-edit{
    grid-template-columns: 1fr;
  }

  .player-photo{
    align-items:flex-start;
  }
}
/* =========================
   Player edit — centered classic layout
========================= */

.player-edit-card{
  max-width:520px;
  margin:0 auto;
}

.player-photo-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}

.player-photo{
  width:120px;
  height:150px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--line2);
  background:var(--surface2);
}

.player-photo.placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  color:var(--muted);
}

.photo-form{
  width:100%;
  max-width:280px;
}

.photo-form input[type="file"]{
  margin-top:4px;
}

.player-form{
  max-width:420px;
  margin:0 auto;
}

.primary-action{
  margin-top:24px;
}

.danger-zone{
  max-width:420px;
  margin:24px auto 0;
}
/* =========================
   Player edit — desktop layout
========================= */

.player-edit-desktop{
  max-width:900px;
  margin:0 auto;
}

.player-edit-grid{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:40px;
  align-items:flex-start;
}

/* FOTO */
.player-edit-photo{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.player-edit-photo img,
.photo-placeholder{
  width:160px;
  height:200px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--line2);
  background:var(--surface2);
}

.photo-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:36px;
  color:var(--muted);
}

.photo-form input[type="file"]{
  margin-top:4px;
}

/* FORMULARIO */
.player-edit-data{
  max-width:520px;
}

.primary-action{
  margin-top:28px;
}

/* ACCIÓN PELIGROSA */
.danger-zone{
  margin-top:20px;
}
.player-view-danger{
  max-width:none;
  margin:14px 0 0;
  width:100%;
}
.bulkrow-exists .bulkrow-head{
  border-bottom:0;
  padding-bottom:0;
}

/* =========================
   Player view (read-only)
========================= */
.player-view-grid{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:16px 24px;
  align-items:stretch;
}
.player-view-photo{
  display:flex;
  flex-direction:column;
  gap:8px;
  height:100%;
}
.player-view-info{
  display:flex;
  flex-direction:column;
  gap:8px;
  height:100%;
}
.player-view-ci{
  grid-column:1/-1;
  border:1px solid var(--line2);
  border-radius:8px;
  background:var(--surface2);
  padding:10px;
}
.player-view-tutor{
  grid-column:1/-1;
  border:1px solid var(--line2);
  border-radius:8px;
  background:var(--surface2);
  padding:10px;
}
.view-section-title{
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  margin-bottom:6px;
}
.view-field{
  border:1px solid var(--line2);
  border-radius:6px;
  background:var(--surface);
  padding:6px 8px;
}
.view-label{
  font-size:10px;
  color:var(--muted);
  margin-bottom:3px;
}
.view-value{
  font-size:12px;
  font-weight:600;
}
.view-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.view-actions-full{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
}
.view-actions-full .btn2{
  width:100%;
}
.remove-btn{
  width:100%;
}
.remove-full{
  width:100%;
}
@media (max-width:760px){
  .view-actions-full{grid-template-columns: 1fr}
}
.photo-box{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  height:100%;
}
.player-view-img{
  width:100%;
  height:100%;
  min-height:200px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid var(--line2);
  background:var(--surface2);
}
.photo-box .photo-placeholder{
  width:100%;
  height:100%;
  min-height:200px;
  border-radius:6px;
}
.ci-box{
  flex:0 0 auto;
}
.player-view-info .view-field{
  display:grid;
  grid-template-columns: 1fr;
}
.player-view-tutor .bulkcols{
  gap:6px;
}
.player-view-tutor .view-field{
  padding:6px 8px;
}
@media (max-width:900px){
  .player-view-grid{grid-template-columns: 1fr}
  .player-view-tutor{grid-column:auto}
}

/* =========================
   Player select
========================= */
.select-search{
  display:flex;
  gap:8px;
  margin:12px 0 8px;
}
.select-search input{flex:1 1 auto}
.selectlist .selectrow{
  display:grid;
  grid-template-columns: 1fr 200px;
  gap:12px;
  padding:10px;
  align-items:center;
  min-height:70px;
}
.select-main{
  display:grid;
  grid-template-columns: minmax(200px, 1fr) minmax(240px, 1.2fr);
  gap:12px;
  align-items:center;
}
.selectmeta{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
  padding:6px 8px;
  border:1px solid var(--line2);
  border-radius:8px;
  background:var(--surface2);
  min-height:44px;
}
.selectrow-line{
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.select-actions{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-end;
  white-space:nowrap;
  min-height:34px;
}
.select-actions .btn{
  min-width:120px;
}
.select-name{
  display:flex;
  align-items:center;
  gap:8px;
}
.select-name .avail-tag{
  font-size:10px;
  padding:3px 8px;
}
.avail-tag{
  border-radius:999px;
  padding:4px 8px;
  font-size:10px;
  font-weight:600;
  border:1px solid var(--line2);
  background:var(--surface2);
  white-space:nowrap;
  text-align:center;
}
.avail-tag.is-ok{
  border-color: rgba(6,118,71,.35);
  background: rgba(6,118,71,.08);
  color: rgba(6,118,71,.95);
}
.avail-tag.is-bad{
  border-color: rgba(180,35,24,.35);
  background: rgba(180,35,24,.08);
  color: rgba(180,35,24,.95);
}
@media (max-width:900px){
  .selectlist .selectrow{grid-template-columns: 1fr}
  .select-main{grid-template-columns: 1fr}
  .select-actions{justify-content:flex-start}
  .selectrow-line{justify-content:flex-start}
}

/* =========================
   Admin home
========================= */
.admin-actions{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
  margin:12px 0 6px;
}
.admin-actions .btn,
.admin-actions .btn2{
  width:100%;
  justify-content:center;
}
.admin-actions-full{
  grid-column:1 / -1;
}
.admin-users .admin-user-row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:12px;
  align-items:center;
}
.admin-user-title{
  display:flex;
  align-items:center;
  gap:8px;
}
.admin-user-actions{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
@media (max-width:900px){
  .admin-actions{grid-template-columns: 1fr 1fr}
}
@media (max-width:600px){
  .admin-actions{grid-template-columns: 1fr}
  .admin-users .admin-user-row{grid-template-columns: 1fr}
  .admin-user-actions{justify-content:flex-start}
}

/* =========================
   Requests module
========================= */
.headrow-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.request-modal-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.request-list .request-row{
  justify-content:space-between;
}
.request-list .request-row .avail-tag{
  flex:0 0 auto;
}
.request-list .request-row .avail-tag:not(.is-ok){
  border-color: rgba(11,92,171,.22);
  background: rgba(11,92,171,.08);
  color: var(--text);
}
.request-field-picks{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.request-field-item{
  border:1px solid var(--line2);
  border-radius:8px;
  background:var(--surface2);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.request-field-check{
  display:flex;
  align-items:center;
  gap:8px;
}
.request-field-check input[type="checkbox"]{
  width:auto;
  height:auto;
}
.request-form-grid{
  max-width:560px;
  display:grid;
  gap:10px;
}
.form-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.form-actions-end{
  justify-content:flex-end;
}
.request-radio-row input[type="radio"]{
  width:auto;
  height:auto;
}
.request-check-row input[type="checkbox"]{
  width:auto;
  height:auto;
}
.request-json{
  margin:0;
  padding:12px;
  border-radius:8px;
  border:1px solid var(--line2);
  background:var(--surface2);
  overflow:auto;
  font-size:12px;
  line-height:1.4;
}
.admin-shell{
  display:grid;
  grid-template-columns:270px 1fr;
  gap:12px;
  align-items:start;
}
.admin-side{
  position:sticky;
  top:74px;
}
.admin-requests-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.admin-requests-nav summary{
  cursor:pointer;
  font-weight:700;
  margin-bottom:4px;
}
.admin-req-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  text-decoration:none;
  color:inherit;
  border:1px solid var(--line2);
  border-radius:8px;
  padding:8px;
  background:var(--surface);
}
.admin-req-link:hover{
  background:var(--surface2);
}
.admin-request-filters{
  margin:10px 0 12px;
  border:1px solid var(--line2);
  border-radius:10px;
  background:var(--surface2);
  padding:12px;
}
.admin-request-filters-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  align-items:end;
}
.admin-filter-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.admin-filter-field span{
  font-size:12px;
  color:var(--muted);
}
.admin-filter-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.admin-filter-actions .btn,
.admin-filter-actions .btn2{
  width:100%;
  justify-content:center;
}
.admin-request-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
}
@media (max-width:980px){
  .request-field-picks{grid-template-columns:1fr}
  .admin-shell{grid-template-columns:1fr}
  .admin-side{position:static}
  .admin-request-filters-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .admin-request-filters-grid{grid-template-columns:1fr}
}

.ok-toast{
  margin-top:10px;
  padding:8px 12px;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  opacity:1;
  transition:opacity .25s ease, transform .25s ease;
}
.ok-toast.is-fading{
  opacity:0;
  transform:translateY(-3px);
}

/* =========================
   Side panel
========================= */
.sidebtn{
  appearance:none;
  border:1px solid var(--line2);
  background:var(--surface);
  border-radius:8px;
  padding:6px 10px;
  font-size:12px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.sidebtn:hover{background:var(--surface2)}
.sidepanel{
  position:fixed;
  inset:0;
  z-index:90;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease;
}
.sidepanel[aria-hidden="false"]{
  opacity:1;
  pointer-events:auto;
}
.sidepanel-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.25);
}
.sidepanel-card{
  position:absolute;
  top:0;
  left:0;
  width:min(320px, 86vw);
  height:100%;
  background:var(--surface);
  border-right:1px solid var(--line2);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
}
.sidepanel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--line2);
}
.sidepanel-body{
  padding:12px 14px;
  overflow:auto;
}
.sidepanel-section{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sidepanel-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  text-decoration:none;
  color:inherit;
  border:1px solid var(--line2);
  border-radius:8px;
  padding:8px;
  background:var(--surface);
}
.sidepanel-link:hover{background:var(--surface2)}

/* Shared spacing utilities */
.mt-0{margin-top:0 !important}
.mt-8{margin-top:8px !important}
.mt-10{margin-top:10px !important}
.mb-6{margin-bottom:6px !important}
.mb-8{margin-bottom:8px !important}
.mb-10{margin-bottom:10px !important}
.full-span{grid-column:1 / -1}
.media-preview{
  width:100%;
  height:auto;
  border-radius:6px;
  border:1px solid var(--line2);
  background:var(--surface);
}

@media (max-width:760px){
  .card{
    padding:16px;
  }
  .h1{
    font-size:20px;
  }
}