/* ============================================================
   TERBAGUS — admin.css
   Admin-area + shared-component styles. Consumes the tokens from
   app.css (loaded before this file).
   ============================================================ */

/* ---------- form fields ---------- */
.tb-field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:var(--tb-space-2)}
.tb-label{font:600 var(--tb-size-label)/1 var(--tb-font-display);letter-spacing:.12em;
  text-transform:uppercase;color:var(--tb-text-dim)}
.tb-input{min-width:0;max-width:100%;background:var(--tb-bg-0);color:var(--tb-text);border:1px solid var(--tb-line-strong);
  border-radius:var(--tb-radius);padding:.65rem .9rem;font:400 var(--tb-size-body)/1.5 var(--tb-font-body);
  width:100%;transition:border-color var(--tb-speed)}
.tb-input:focus{outline:none;border-color:var(--tb-accent);box-shadow:0 0 0 1px var(--tb-accent)}
select.tb-input{appearance:none;cursor:pointer}
textarea.tb-input{resize:vertical}
.tb-field-error{color:var(--tb-danger);font-size:var(--tb-size-small);margin:.2rem 0 0}
.tb-field-hint{color:var(--tb-text-dim);font-size:var(--tb-size-small);margin:.2rem 0 0}
.tb-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--tb-space-3)}
/* inputs have an intrinsic min width; without this the column refuses to
   shrink and the modal grows a horizontal scrollbar */
.tb-form-grid > *{min-width:0}
.tb-form-grid .full{grid-column:1 / -1}
@media (max-width:700px){.tb-form-grid{grid-template-columns:1fr}}

/* validation (EditForm + DataAnnotationsValidator) */
.validation-message{color:var(--tb-danger);font-size:var(--tb-size-small);margin-top:.2rem}
.tb-validation-summary{border:1px solid rgba(255,93,93,.4);background:rgba(255,93,93,.08);
  border-radius:var(--tb-radius);padding:.7rem 1rem;margin-bottom:var(--tb-space-2);
  color:var(--tb-danger);font-size:var(--tb-size-small)}
.tb-validation-summary ul{margin:0;padding-left:1.1rem}

/* ---------- modal ---------- */
.tb-modal-backdrop{position:fixed;inset:0;z-index:var(--tb-z-modal);
  background:rgba(6,9,14,.72);backdrop-filter:blur(4px);
  display:grid;place-items:center;padding:var(--tb-space-2);
  animation:tb-fade-in var(--tb-speed) ease}
.tb-modal{width:100%;max-width:min(96vw,68rem);background:var(--tb-bg-1);border:1px solid var(--tb-line-strong);
  border-radius:var(--tb-radius-lg);box-shadow:var(--tb-shadow);
  display:flex;flex-direction:column;max-height:calc(100vh - 4rem);
  animation:tb-rise var(--tb-speed) ease}
.tb-modal-sm{max-width:28rem}
.tb-modal-md{max-width:46rem}
.tb-modal-lg{max-width:68rem}
.tb-modal-head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--tb-space-2);padding:var(--tb-space-2) var(--tb-space-3);
  border-bottom:1px solid var(--tb-line)}
.tb-modal-head h3{font-size:var(--tb-size-h3);letter-spacing:.04em;text-transform:uppercase;margin:0}
.tb-modal-close{background:none;border:0;color:var(--tb-text-dim);cursor:pointer;
  display:grid;place-items:center;padding:.35rem;border-radius:6px}
.tb-modal-close:hover{color:var(--tb-text);background:var(--tb-bg-2)}
.tb-modal-body{padding:var(--tb-space-3);overflow-y:auto;overflow-x:hidden}
.tb-modal-foot{display:flex;justify-content:flex-end;gap:var(--tb-space-1);
  padding:var(--tb-space-2) var(--tb-space-3);border-top:1px solid var(--tb-line)}
@keyframes tb-fade-in{from{opacity:0}}
@keyframes tb-rise{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){.tb-modal-backdrop,.tb-modal{animation:none}}

/* confirm dialog */
.tb-confirm-body{display:flex;gap:var(--tb-space-2);align-items:flex-start}
.tb-confirm-body p{margin:0;color:var(--tb-text-dim)}
.tb-confirm-icon{color:var(--tb-danger);flex-shrink:0;margin-top:.1rem}

/* ---------- toasts ---------- */
.tb-toast-host{position:fixed;bottom:1.2rem;right:1.2rem;z-index:var(--tb-z-toast);
  display:flex;flex-direction:column;gap:.6rem;max-width:min(92vw,22rem)}
.tb-toast{display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;
  border-radius:var(--tb-radius);border:1px solid var(--tb-line-strong);
  background:var(--tb-bg-2);color:var(--tb-text);font-size:var(--tb-size-small);
  box-shadow:var(--tb-shadow);animation:tb-rise var(--tb-speed) ease}
.tb-toast-success{border-color:rgba(61,220,151,.5)}
.tb-toast-success .tb-icon{color:var(--tb-success)}
.tb-toast-error{border-color:rgba(255,93,93,.5)}
.tb-toast-error .tb-icon{color:var(--tb-danger)}
.tb-toast-info{border-color:rgba(31,143,255,.5)}
.tb-toast-info .tb-icon{color:var(--tb-accent)}
.tb-toast-close{margin-left:auto;background:none;border:0;color:var(--tb-text-dim);
  cursor:pointer;display:grid;place-items:center;padding:.2rem}
.tb-toast-close:hover{color:var(--tb-text)}

/* ---------- pagination ---------- */
.tb-pagination{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;
  justify-content:center;margin-top:var(--tb-space-3)}
.tb-page-btn{min-width:2.3rem;height:2.3rem;display:inline-grid;place-items:center;
  padding:0 .5rem;background:transparent;border:1px solid var(--tb-line-strong);
  border-radius:var(--tb-radius);color:var(--tb-text-dim);cursor:pointer;
  font:600 var(--tb-size-small)/1 var(--tb-font-display);
  transition:border-color var(--tb-speed),color var(--tb-speed)}
.tb-page-btn:hover:not(:disabled){border-color:var(--tb-accent);color:var(--tb-accent)}
.tb-page-btn.active{background:var(--tb-accent);border-color:var(--tb-accent);color:#fff}
.tb-page-btn:disabled{opacity:.4;cursor:default}
.tb-page-gap{color:var(--tb-text-dim);padding:0 .2rem}

/* ---------- image uploader ---------- */
.tb-uploader{display:flex;flex-direction:column;gap:var(--tb-space-2)}
.tb-uploader-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.6rem}
.tb-uploader-thumb{position:relative;aspect-ratio:4/3;border-radius:var(--tb-radius);
  overflow:hidden;border:1px solid var(--tb-line-strong);background:var(--tb-bg-0)}
.tb-uploader-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tb-uploader-thumb.pending{border-style:dashed;border-color:rgba(31,143,255,.55)}
.tb-uploader-name{display:grid;place-items:center;height:100%;padding:.4rem;
  font-size:.7rem;color:var(--tb-text-dim);word-break:break-all;text-align:center}
.tb-uploader-remove{position:absolute;top:.35rem;right:.35rem;width:1.35rem;height:1.35rem;
  display:grid;place-items:center;padding:0;line-height:0;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);border-radius:50%;
  background:rgba(6,9,14,.78);color:var(--tb-text);backdrop-filter:blur(2px);
  transition:background var(--tb-speed),border-color var(--tb-speed)}
.tb-uploader-remove:hover{background:var(--tb-danger);border-color:var(--tb-danger);color:#fff}
.tb-uploader-remove svg{display:block}
.tb-uploader-pick{align-self:flex-start}

/* ---------- localized text fields ---------- */
.tb-localized-head{display:flex;align-items:center;justify-content:space-between;gap:var(--tb-space-2)}
.tb-localized-tabs{display:flex;gap:.25rem}
.tb-tab{background:transparent;border:1px solid var(--tb-line-strong);color:var(--tb-text-dim);
  border-radius:6px;padding:.22rem .6rem;cursor:pointer;
  font:600 var(--tb-size-label)/1 var(--tb-font-body)}
.tb-tab:hover{color:var(--tb-text)}
.tb-tab.active{background:var(--tb-accent);border-color:var(--tb-accent);color:#fff}

.tb-icon.rot90{transform:rotate(90deg)}

/* ---------- admin page scaffolding ---------- */
.tb-admin-head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--tb-space-2);flex-wrap:wrap;margin-bottom:var(--tb-space-3)}
.tb-admin-head h1{font-size:var(--tb-size-h2);margin:0}
.tb-admin-toolbar{display:flex;align-items:center;gap:var(--tb-space-2);flex-wrap:wrap;
  margin-bottom:var(--tb-space-2)}
.tb-admin-toolbar .tb-input{max-width:20rem}
.tb-admin-section{margin-bottom:var(--tb-space-5)}

/* ---------- data table ---------- */
.tb-table-wrap{border:1px solid var(--tb-line);border-radius:var(--tb-radius-lg);
  background:var(--tb-bg-1)}
/* only a real table needs to scroll sideways; panels holding forms must not */
.tb-table-wrap:has(> .tb-table){overflow-x:auto}
.tb-table{width:100%;border-collapse:collapse;font-size:var(--tb-size-small)}
.tb-table th{font:600 var(--tb-size-label)/1.2 var(--tb-font-display);letter-spacing:.12em;
  text-transform:uppercase;color:var(--tb-text-dim);text-align:left;
  padding:.85rem 1rem;border-bottom:1px solid var(--tb-line-strong);white-space:nowrap}
.tb-table td{padding:.7rem 1rem;border-bottom:1px solid var(--tb-line);vertical-align:middle}
.tb-table tbody tr:last-child td{border-bottom:0}
.tb-table tbody tr:hover{background:rgba(31,143,255,.05)}
.tb-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* keep the currency symbol on the same line as the amount — without this a
   4-figure price wraps to "RM" / "1,680.00" and the row grows taller */
.tb-price{white-space:nowrap;font-variant-numeric:tabular-nums}
.tb-table-img{width:52px;height:40px;object-fit:cover;border-radius:6px;
  border:1px solid var(--tb-line-strong);display:block}
.tb-table-imgcount{display:inline-flex;align-items:center;gap:.3rem;color:var(--tb-text-dim);
  font-size:var(--tb-size-label)}
.tb-row-actions{display:flex;gap:.4rem;justify-content:flex-end}
.tb-icon-btn{width:2rem;height:2rem;display:inline-grid;place-items:center;
  background:transparent;border:1px solid var(--tb-line-strong);border-radius:var(--tb-radius);
  color:var(--tb-text-dim);cursor:pointer;transition:border-color var(--tb-speed),color var(--tb-speed)}
.tb-icon-btn:hover{border-color:var(--tb-accent);color:var(--tb-accent)}
.tb-icon-btn.danger:hover{border-color:var(--tb-danger);color:var(--tb-danger)}
.tb-empty{padding:var(--tb-space-4);text-align:center;color:var(--tb-text-dim)}

/* stacked "cards" below the small breakpoint — single markup tree */
@media (max-width:700px){
  .tb-table thead{display:none}
  .tb-table,.tb-table tbody,.tb-table tr,.tb-table td{display:block;width:100%}
  .tb-table tr{border-bottom:1px solid var(--tb-line-strong);padding:.5rem 0}
  .tb-table td{border-bottom:0;padding:.35rem 1rem;display:flex;gap:.6rem;align-items:center}
  .tb-table td[data-th]::before{content:attr(data-th);flex:0 0 7rem;
    font:600 var(--tb-size-label)/1.2 var(--tb-font-display);letter-spacing:.1em;
    text-transform:uppercase;color:var(--tb-text-dim)}
  .tb-row-actions{justify-content:flex-start}
}

/* migrations page */
.tb-danger-text{color:var(--tb-danger)}
.tb-field strong{font-family:var(--tb-font-body);font-weight:600;color:var(--tb-text);
  word-break:break-all}

/* thumbnail with photo-count badge */
.tb-thumb-wrap{position:relative;display:inline-block;line-height:0}
.tb-thumb-empty{display:grid;place-items:center;color:var(--tb-text-dim);background:var(--tb-bg-2)}
.tb-thumb-badge{position:absolute;bottom:-4px;right:-6px;min-width:1.15rem;height:1.15rem;
  padding:0 .25rem;display:grid;place-items:center;border-radius:999px;
  background:var(--tb-accent);color:#fff;border:2px solid var(--tb-bg-1);
  font:600 .625rem/1 var(--tb-font-body);font-variant-numeric:tabular-nums}
.tb-cell-strong{color:var(--tb-text);font-weight:600}
.tb-table td:last-child{text-align:right}

/* single-photo slot with its own remove button (Site content) */
.tb-photo-slot{position:relative;display:inline-block;line-height:0;
  border:1px solid var(--tb-line-strong);border-radius:var(--tb-radius);overflow:hidden}
.tb-photo-slot img{display:block;width:170px;height:106px;object-fit:cover}
.tb-photo-remove{position:absolute;top:.35rem;right:.35rem;width:1.5rem;height:1.5rem;
  display:grid;place-items:center;padding:0;line-height:0;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);border-radius:50%;
  background:rgba(6,9,14,.78);color:var(--tb-text);backdrop-filter:blur(2px);
  transition:background var(--tb-speed),border-color var(--tb-speed)}
.tb-photo-remove:hover{background:var(--tb-danger);border-color:var(--tb-danger);color:#fff}
.tb-photo-remove svg{display:block}

/* ---------- car fitment editor ---------- */
.tb-fitment-list{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.6rem}
.tb-fitment{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .4rem .3rem .7rem;
  border:1px solid var(--tb-line-strong);border-radius:999px;background:var(--tb-bg-0);
  font-size:var(--tb-size-small)}
.tb-fitment strong{color:var(--tb-text);font-weight:600}
.tb-fitment-years{color:var(--tb-text-dim);font-variant-numeric:tabular-nums}
/* ---------- bulk actions ---------- */
.tb-bulkbar{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin:0 0 var(--tb-space-1);
  padding:.7rem .9rem;border:1px solid rgba(69,227,255,.35);border-radius:var(--tb-radius);
  background:rgba(69,227,255,.07)}
.tb-bulkbar-count{font-weight:600;color:var(--tb-text);white-space:nowrap}
.tb-bulkbar-sep{flex:1 1 auto}
.tb-bulkbar .tb-label{margin:0;white-space:nowrap}
.tb-linkbtn{background:none;border:0;padding:0;cursor:pointer;color:var(--tb-glow);
  font:inherit;font-size:var(--tb-size-small);text-decoration:underline;text-underline-offset:2px}
.tb-linkbtn:hover{color:var(--tb-text)}
.tb-check-col{text-align:center;padding-left:.5rem;padding-right:.5rem}
.tb-check-col input[type=checkbox]{width:1rem;height:1rem;cursor:pointer;accent-color:var(--tb-glow)}
tr.tb-row-selected > td{background:rgba(69,227,255,.08)}

@media (max-width:820px){
  /* the table collapses to cards on mobile; keep the checkbox with the row */
  .tb-bulkbar{position:sticky;top:.5rem;z-index:5;backdrop-filter:blur(6px)}
  .tb-bulkbar-sep{display:none}
  .tb-check-col{display:block;text-align:left}
}

.tb-sku{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:var(--tb-size-label);
  color:var(--tb-text);background:var(--tb-bg-2);border:1px solid var(--tb-line);
  border-radius:.35rem;padding:.15rem .45rem;white-space:nowrap}
.tb-fitment-note{color:var(--tb-glow);font-size:var(--tb-size-label);text-transform:uppercase;
  letter-spacing:.06em;border-left:1px solid var(--tb-line);padding-left:.45rem}
.tb-fitment button{width:1.25rem;height:1.25rem;display:grid;place-items:center;padding:0;
  border:0;border-radius:50%;cursor:pointer;background:var(--tb-bg-2);color:var(--tb-text-dim)}
.tb-fitment button:hover{background:var(--tb-danger);color:#fff}
.tb-fitment-add{display:grid;grid-template-columns:1.1fr 1.1fr .6fr .6fr 1fr auto;gap:.5rem;align-items:center}
.tb-fitment-add .tb-input{min-width:0}
@media (max-width:700px){
  .tb-fitment-add{grid-template-columns:1fr 1fr;}
  .tb-fitment-add > :last-child{grid-column:1 / -1}
}