@import url('https://fonts.googleapis.com/css2?family=Anton&family=Work+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --pine-deep:#0a0a0a;
  --pine:#141414;
  --pine-light:#2b2b2b;
  --sand:#f4f3f0;
  --sand-deep:#e9e6df;
  --card:#ffffff;
  --ink:#161311;
  --ink-soft:#5c564d;
  --amber:#c8a13c;
  --red:#e0161a;
  --red-deep:#a30f13;
  --line:#e3ddd0;
  --ok:#1e8e3e;
  --shadow:0 2px 4px rgba(20,20,20,.06), 0 12px 28px -14px rgba(20,20,20,.25);
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
}
input,select,button{font-family:inherit;}
.mono{font-family:'IBM Plex Mono',monospace;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;border-radius:2px;border:1px solid transparent;
  font-weight:600;font-size:.86rem;cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
  white-space:nowrap;
}
.btn-red{background:var(--red);color:#fff;}
.btn-red:hover{background:var(--red-deep);}
.btn-outline{background:transparent;border-color:var(--line);color:var(--ink);}
.btn-outline:hover{border-color:var(--ink);}
.btn-ghost{background:transparent;border:none;color:var(--ink-soft);}
.btn-ghost:hover{color:var(--ink);}
.btn-sm{padding:7px 12px;font-size:.78rem;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ================= LOGIN ================= */
.login-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:20px;background:var(--pine-deep);
  background-image:radial-gradient(circle at 20% 20%, rgba(224,22,26,.15), transparent 40%);
}
.login-card{
  width:100%;max-width:380px;background:var(--card);
  padding:36px 32px;border-radius:3px;box-shadow:var(--shadow);
}
.login-logo{display:flex;align-items:center;gap:12px;margin-bottom:28px;}
.login-logo-mark{
  width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:.9rem;flex-shrink:0;
}
.login-logo-text .name{display:block;font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1rem;color:var(--pine-deep);}
.login-logo-text small{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.08em;color:var(--red);}
#login-form{display:flex;flex-direction:column;gap:16px;}
#login-form label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:600;color:var(--ink);}
#login-form input{
  padding:11px 12px;border:1px solid var(--line);border-radius:2px;font-size:.92rem;
  background:#fff;color:var(--ink);
}
#login-form input:focus{outline:none;border-color:var(--red);}
.login-error{
  background:#fdecec;color:var(--red-deep);border:1px solid #f6c6c6;
  padding:10px 12px;border-radius:2px;font-size:.82rem;
}

/* ================= DASHBOARD HEADER ================= */
.admin-header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;}
.admin-header-inner{
  max-width:1300px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.admin-brand{display:flex;align-items:center;gap:12px;}
.admin-brand-mark{
  width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:.72rem;
}
.admin-brand-text .name{display:block;font-family:'Anton',sans-serif;text-transform:uppercase;font-size:.92rem;color:var(--pine-deep);}
.admin-brand-text small{font-family:'IBM Plex Mono',monospace;font-size:.6rem;color:var(--ink-soft);letter-spacing:.05em;}
.admin-header-actions{display:flex;align-items:center;gap:12px;}
.admin-user{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--ink-soft);}
.admin-tabs{max-width:1300px;margin:0 auto;padding:0 24px;display:flex;gap:4px;}
.admin-tab{
  background:none;border:none;padding:12px 18px;font-weight:600;font-size:.86rem;
  color:var(--ink-soft);cursor:pointer;border-bottom:2px solid transparent;
}
.admin-tab.active{color:var(--red);border-bottom-color:var(--red);}
.admin-tab:hover:not(.active){color:var(--ink);}

.admin-main{max-width:1300px;margin:0 auto;padding:24px;}
.admin-panel[hidden]{display:none;}

/* ================= TOOLBAR ================= */
.panel-toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;
}
.tb-input, .tb-select{
  padding:9px 12px;border:1px solid var(--line);border-radius:2px;
  font-size:.84rem;background:#fff;color:var(--ink);
}
.tb-input{flex:1;min-width:180px;}
.tb-count{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--ink-soft);margin-left:auto;}

/* ================= TABLE ================= */
.table-wrap{background:var(--card);border:1px solid var(--line);border-radius:2px;overflow:hidden;}
.admin-table{width:100%;border-collapse:collapse;}
.admin-table thead th{
  text-align:left;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft);padding:12px 14px;border-bottom:1px solid var(--line);background:var(--sand);
}
.admin-table td{padding:10px 14px;border-bottom:1px solid var(--line);font-size:.86rem;vertical-align:middle;}
.admin-table tbody tr:last-child td{border-bottom:none;}
.admin-table tbody tr:hover{background:var(--sand);}
.admin-table tbody tr.row-hidden{opacity:.5;}
.col-img{width:56px;}
.col-center{text-align:center;}
.col-actions{width:120px;text-align:right;}
.col-order{width:70px;}
.row-thumb{width:44px;height:44px;object-fit:cover;border:1px solid var(--line);background:#fff;}
.row-name{font-weight:600;}
.row-sizes{color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;font-size:.74rem;}
.row-cat-tag{
  display:inline-block;background:var(--sand-deep);color:var(--ink-soft);
  font-size:.7rem;padding:3px 8px;border-radius:20px;
}
.table-loading, .table-empty{padding:40px 20px;text-align:center;color:var(--ink-soft);font-size:.86rem;}

/* toggle switch */
.switch{position:relative;display:inline-block;width:38px;height:21px;}
.switch input{opacity:0;width:0;height:0;}
.switch .slider{
  position:absolute;cursor:pointer;inset:0;background:var(--line);transition:.15s;border-radius:20px;
}
.switch .slider::before{
  content:"";position:absolute;width:15px;height:15px;left:3px;top:3px;background:#fff;
  transition:.15s;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.3);
}
.switch input:checked + .slider{background:var(--ok);}
.switch input:checked + .slider::before{transform:translateX(17px);}

/* row action icon buttons */
.icon-action{
  background:none;border:none;color:var(--ink-soft);cursor:pointer;padding:6px;
  border-radius:2px;
}
.icon-action:hover{color:var(--ink);background:var(--sand-deep);}
.icon-action.danger:hover{color:var(--red);}
.icon-action svg{width:16px;height:16px;display:block;}

/* order arrows */
.order-btns{display:flex;flex-direction:column;gap:2px;}
.order-btns button{background:none;border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;width:22px;height:18px;line-height:1;padding:0;}
.order-btns button:hover{background:var(--sand-deep);}
.order-btns button[disabled]{opacity:.3;cursor:not-allowed;}

/* ================= MODAL ================= */
.modal-overlay{
  position:fixed;inset:0;background:rgba(10,10,10,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .15s;z-index:100;
}
.modal-overlay.open{opacity:1;pointer-events:auto;}
.modal-box{
  background:#fff;width:100%;max-width:480px;border-radius:3px;
  max-height:90vh;overflow-y:auto;
}
.modal-box-sm{max-width:400px;}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--line);
}
.modal-head h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.05rem;margin:0;color:var(--pine-deep);}
.modal-close{background:none;border:none;font-size:1.4rem;line-height:1;color:var(--ink-soft);cursor:pointer;}
#product-form, #category-form{padding:20px 22px;display:flex;flex-direction:column;gap:16px;}
#product-form label, #category-form label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:600;}
#product-form input[type=text], #product-form select, #category-form input{
  padding:10px 12px;border:1px solid var(--line);border-radius:2px;font-size:.88rem;font-weight:400;
}
.hint{font-weight:400 !important;color:var(--ink-soft);font-size:.74rem !important;}
.checkbox-row{flex-direction:row !important;align-items:center;gap:8px !important;}
.checkbox-row input{width:16px;height:16px;}
.modal-error{
  background:#fdecec;color:var(--red-deep);border:1px solid #f6c6c6;
  padding:9px 12px;border-radius:2px;font-size:.8rem;
}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px;}
.confirm-message{padding:0 22px 4px;color:var(--ink-soft);font-size:.88rem;}
#confirm-overlay .modal-actions{padding:18px 22px 22px;}

/* image picker */
.image-picker{
  border:1px dashed var(--line);padding:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;
}
#pf-image-preview{width:100px;height:100px;object-fit:cover;border:1px solid var(--line);background:var(--sand);}
.image-picker-empty{
  width:100px;height:100px;display:flex;align-items:center;justify-content:center;
  background:var(--sand);color:var(--ink-soft);font-size:.72rem;text-align:center;border:1px solid var(--line);
}
.image-picker-status{font-size:.72rem;color:var(--ink-soft);}

/* toast */
.toast{
  position:fixed;bottom:24px;right:24px;background:var(--pine-deep);color:#fff;
  padding:12px 18px;border-radius:3px;font-size:.85rem;
  transform:translateY(20px);opacity:0;transition:all .2s;z-index:150;pointer-events:none;
}
.toast.show{transform:translateY(0);opacity:1;}
.toast.toast-error{background:var(--red-deep);}

@media (max-width:720px){
  .admin-table thead{display:none;}
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td{display:block;width:100%;}
  .admin-table tr{border-bottom:1px solid var(--line);padding:10px 14px;}
  .admin-table td{border-bottom:none;padding:4px 0;}
  .col-actions{text-align:left;}
}