/* Afazari Parts — admin dashboard only (not shared with the public site) */

.admin-tag{
  font-family:'Oswald',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.5px;
  color:var(--accent); border:1px solid var(--line); border-radius:var(--radius);
  padding:4px 10px; text-transform:uppercase;
}
.hidden{display:none !important;}

.admin-main{padding:56px 32px 96px;}

.admin-panel{
  max-width:400px; margin:64px auto 0; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:32px; box-shadow:var(--shadow);
}
.admin-panel h1{font-size:24px; margin-bottom:8px;}
.admin-sub{color:var(--ink-dim); font-size:14.5px; margin-bottom:22px;}
.admin-panel .btn{width:100%; justify-content:center; margin-top:6px;}

.admin-error{
  margin-top:14px; padding:10px 14px; border-radius:var(--radius); font-size:13.5px;
  background:color-mix(in srgb, var(--rust) 14%, var(--bg)); border:1px solid var(--rust); color:var(--ink);
}

.admin-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:28px;}
.admin-head h1{font-size:clamp(24px,3vw,32px);}
.admin-status{color:var(--ink-dim); font-size:14px; margin-bottom:12px; min-height:1.2em;}

.admin-empty{border:1px solid var(--line); border-radius:var(--radius); padding:32px 24px; text-align:center; color:var(--ink-dim);}
.admin-section-title{font-size:20px; margin:48px 0 16px;}
.badge-count{font-family:'IBM Plex Sans',sans-serif; font-size:13px; color:var(--ink-dim); font-weight:500;}
.admin-cat{margin-bottom:28px;}
.admin-cat-title{font-size:13px; text-transform:uppercase; letter-spacing:0.6px; color:var(--accent); margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--line);}
.admin-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px;}

.admin-card{background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;}
.admin-card.is-archived{opacity:0.7;}
.admin-card-thumb{width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border-bottom:1px solid var(--line);}
.admin-card-info{padding:12px 14px; flex-grow:1;}
.admin-card-info h3{font-size:14.5px; font-weight:600;}
.admin-card-info p{font-size:13px; color:var(--ink-dim); margin-top:4px;}
.admin-card-actions{display:flex; gap:8px; padding:0 14px 14px;}
.admin-card-actions .btn{padding:7px 12px; font-size:13px; flex:1; justify-content:center;}

/* -- product form panel (reuses cart-drawer positioning pattern) -- */
.admin-overlay{position:fixed; inset:0; background:rgba(10,8,6,0.55); z-index:60; opacity:0; pointer-events:none; transition:opacity .2s ease;}
.admin-overlay:not(.hidden){opacity:1; pointer-events:auto;}
.admin-form-panel{
  position:fixed; top:0; right:0; height:100%; width:420px; max-width:92vw;
  background:var(--panel); border-left:1px solid var(--line); z-index:61;
  display:flex; flex-direction:column; box-shadow:var(--shadow);
  transform:translateX(100%); transition:transform .25s ease;
}
.admin-form-panel:not(.hidden){transform:translateX(0);}
.admin-form-head{display:flex; justify-content:space-between; align-items:center; padding:22px 24px; border-bottom:1px solid var(--line);}
.admin-form-head h2{font-size:18px;}
.admin-form{padding:20px 24px; overflow-y:auto; flex-grow:1;}
.admin-hint{font-size:12px; color:var(--ink-dim); margin-top:6px;}
.form-actions{margin-top:20px;}
.form-actions .btn{width:100%; justify-content:center;}

.image-preview{margin-top:10px; width:100%; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);}
.image-preview img{width:100%; height:auto; display:block;}

@media (max-width:560px){
  .admin-head{flex-direction:column; align-items:flex-start;}
  .admin-grid{grid-template-columns:repeat(2,1fr);}
}

/* -- dashboard tabs -- */
.admin-tabs{display:flex; gap:6px; margin-bottom:32px; border-bottom:1px solid var(--line);}
.admin-tab{
  font-family:'IBM Plex Sans',sans-serif; font-size:14.5px; font-weight:600; color:var(--ink-dim);
  background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
  padding:10px 16px; cursor:pointer;
}
.admin-tab:hover{color:var(--ink);}
.admin-tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent);}
.admin-tab:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.admin-link{color:var(--accent); text-decoration:underline; text-underline-offset:2px; white-space:nowrap;}

/* -- work gallery list -- */
.awork-card-media{position:relative;}
.awork-card .admin-card-thumb{aspect-ratio:4/3;}
.awork-badge{
  position:absolute; top:8px; left:8px; font-family:'Oswald',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:0.5px; color:var(--accent-ink); background:var(--accent); padding:3px 8px; border-radius:var(--radius);
}

/* -- work post form -- */
.awork-types{border:0; margin:0 0 18px; padding:0; display:flex; gap:6px; flex-wrap:wrap;}
.awork-types legend{font-size:13px; color:var(--ink-dim); font-weight:500; padding:0; margin-bottom:7px;}
.awork-types label{
  display:flex; align-items:center; gap:6px; font-size:13.5px; padding:9px 10px; cursor:pointer; white-space:nowrap;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg);
}
.awork-types label:has(input:checked){border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--bg));}
.awork-types label:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px;}
.awork-types input{accent-color:var(--accent); margin:0;}
.awork-shapes{margin-bottom:6px;}
:is(.awork-cropper, .photo-cropper) .awork-shapes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));}
:is(.awork-cropper, .photo-cropper) .awork-shapes label{min-width:0; white-space:normal; font-size:12px; padding:9px 6px; min-height:44px;}
.awork-shape{display:inline-block; height:14px; border:1.5px solid currentColor; border-radius:2px; flex-shrink:0;}
.awork-shape-hint{margin:0 0 18px;}
.awork-label{display:block; font-size:13px; color:var(--ink-dim); margin-bottom:7px; font-weight:500;}

.awork-slots{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.awork-slot{display:flex; flex-direction:column; gap:6px; min-width:0;}
.awork-thumb{position:relative; aspect-ratio:var(--ar, 4 / 3); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-alt);}
.awork-thumb img{width:100%; height:100%; object-fit:cover;}
.awork-slot-label{
  position:absolute; left:6px; bottom:6px; font-size:11.5px; font-weight:600; color:#fff;
  background:rgba(15,12,9,0.7); padding:2px 8px; border-radius:var(--radius);
}
.awork-slot-actions{display:flex; gap:4px; flex-wrap:wrap;}
.awork-slot-actions button{
  font:inherit; font-size:12px; color:var(--ink); background:transparent; border:1px solid var(--line);
  border-radius:var(--radius); padding:5px 8px; cursor:pointer; min-height:30px;
}
.awork-slot-actions button:hover:not(:disabled){border-color:var(--accent);}
.awork-slot-actions button:disabled{opacity:0.4; cursor:default;}
.awork-add{
  width:100%; aspect-ratio:var(--ar, 4 / 3); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font:inherit; font-size:13px; color:var(--ink-dim); background:var(--bg); cursor:pointer;
  border:2px dashed var(--line); border-radius:var(--radius); padding:8px; text-align:center;
}
.awork-add span{font-size:24px; line-height:1; color:var(--accent);}
.awork-add:hover{border-color:var(--accent); color:var(--ink);}

.awork-cropper, .photo-cropper{margin-top:14px; padding:12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-alt);}
:is(.awork-cropper, .photo-cropper) canvas{
  width:100%; display:block; border:2px dashed var(--accent); border-radius:var(--radius);
  background:var(--bg); cursor:grab; touch-action:none;
}
:is(.awork-cropper, .photo-cropper) canvas:active{cursor:grabbing;}
:is(.awork-cropper, .photo-cropper) input[type=range]{width:100%; margin-top:10px; padding:0; border:0; background:none; accent-color:var(--accent);}
.awork-crop-actions{display:flex; gap:8px; margin-top:12px;}
.awork-crop-actions .btn{flex:1; justify-content:center; padding:10px 12px;}
.admin-form .form-actions .admin-hint{min-height:1.2em; text-align:center;}