/* ===================================================================
   Modern Interior CMS - Stylesheet
   =================================================================== */
:root{
  --bg:#f1f5f9; --surface:#ffffff; --surface-2:#f8fafc; --border:#e2e8f0;
  --text:#0f172a; --muted:#64748b; --muted-2:#94a3b8;
  --primary:#4f46e5; --primary-600:#4338ca; --primary-50:#eef2ff;
  --green:#16a34a; --amber:#d97706; --red:#dc2626; --blue:#2563eb;
  --purple:#7c3aed; --emerald:#059669; --slate:#64748b; --gray:#6b7280;
  --shadow:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);
  --shadow-lg:0 10px 25px -5px rgba(15,23,42,.15);
  --radius:12px; --radius-sm:8px;
  --sidebar-w:248px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .4em; font-weight:650; line-height:1.25}
h1{font-size:22px} h2{font-size:18px} h3{font-size:15px}
img{max-width:100%}
small{font-size:11px}

/* ---------- App shell ---------- */
.app{display:flex; min-height:100vh}
.sidebar{
  width:var(--sidebar-w); background:#0f172a; color:#cbd5e1;
  position:fixed; top:0; left:0; bottom:0; display:flex; flex-direction:column;
  z-index:40; transition:transform .2s ease;
}
.brand{display:flex; align-items:center; gap:10px; padding:18px 18px; border-bottom:1px solid rgba(255,255,255,.07)}
.brand-logo{font-size:22px}
.brand-name{font-weight:700; color:#fff; font-size:15px; display:flex; flex-direction:column; line-height:1.1}
.brand-name small{color:#64748b; font-weight:600; letter-spacing:.12em}
.nav{flex:1; overflow-y:auto; padding:10px 10px}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:var(--radius-sm);
  color:#cbd5e1; margin-bottom:2px; font-weight:520; font-size:13.5px;
}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff; text-decoration:none}
.nav-item.active{background:var(--primary); color:#fff}
.nav-icon{width:20px; text-align:center; font-size:15px; opacity:.95}
.sidebar-foot{padding:12px; border-top:1px solid rgba(255,255,255,.07)}
.user-chip{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.avatar{width:34px; height:34px; border-radius:50%; background:var(--primary); color:#fff; display:grid; place-items:center; font-weight:700}
.user-name{color:#fff; font-size:13px; font-weight:600}
.user-role{color:#64748b; font-size:11px; text-transform:capitalize}
.logout{display:block; text-align:center; padding:8px; border-radius:var(--radius-sm); background:rgba(255,255,255,.06); color:#cbd5e1; font-size:13px}
.logout:hover{background:rgba(255,255,255,.12); text-decoration:none; color:#fff}

.main{flex:1; margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-width:0}
.topbar{
  height:60px; background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:14px; padding:0 20px; position:sticky; top:0; z-index:30;
}
.hamburger{display:none; background:none; border:none; font-size:22px; cursor:pointer; color:var(--text)}
.global-search{flex:1; max-width:520px}
.global-search input{width:100%; padding:9px 14px; border:1px solid var(--border); border-radius:20px; background:var(--surface-2); font-size:13.5px}
.global-search input:focus{outline:none; border-color:var(--primary); background:#fff}
.topbar-actions{margin-left:auto}
.content{padding:24px; max-width:1400px; width:100%; margin:0 auto}

/* ---------- Page header ---------- */
.page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap}
.page-head .subtitle{color:var(--muted); font-size:13px; margin-top:2px}
.page-head-actions{display:flex; gap:8px; flex-wrap:wrap}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:9px 15px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:13.5px;
  font-weight:560; cursor:pointer; transition:all .12s; white-space:nowrap; text-decoration:none;
}
.btn:hover{background:var(--surface-2); text-decoration:none}
.btn-primary{background:var(--primary); border-color:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-600)}
.btn-danger{background:var(--red); border-color:var(--red); color:#fff}
.btn-danger:hover{filter:brightness(.94)}
.btn-ghost{background:transparent; border-color:transparent}
.btn-ghost:hover{background:var(--surface-2)}
.btn-sm{padding:6px 11px; font-size:12.5px}
.btn-xs{padding:4px 8px; font-size:11.5px}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-block{width:100%; justify-content:center}

/* ---------- Cards / stat grid ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; margin-bottom:24px}
.stat-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow)}
.stat-card .stat-label{color:var(--muted); font-size:12px; font-weight:560; text-transform:uppercase; letter-spacing:.04em}
.stat-card .stat-value{font-size:28px; font-weight:720; margin-top:6px; line-height:1}
.stat-card .stat-foot{font-size:11.5px; color:var(--muted-2); margin-top:6px}
.stat-card.accent-green .stat-value{color:var(--green)}
.stat-card.accent-amber .stat-value{color:var(--amber)}
.stat-card.accent-red .stat-value{color:var(--red)}
.stat-card.accent-blue .stat-value{color:var(--blue)}
.stat-card.accent-purple .stat-value{color:var(--purple)}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:20px}
.card-head{padding:15px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:10px}
.card-head h3{margin:0}
.card-body{padding:18px}
.card-body.tight{padding:0}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto}
table.data{width:100%; border-collapse:collapse; font-size:13px}
table.data th{text-align:left; padding:11px 14px; color:var(--muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--border); background:var(--surface-2); white-space:nowrap}
table.data td{padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:middle}
table.data tr:last-child td{border-bottom:none}
table.data tr:hover td{background:var(--surface-2)}
.thumb{width:44px; height:44px; border-radius:var(--radius-sm); object-fit:cover; background:var(--surface-2); border:1px solid var(--border)}
.thumb.placeholder{display:grid; place-items:center; color:var(--muted-2); font-size:18px}
.cell-title{font-weight:600; color:var(--text)}
.cell-sub{color:var(--muted); font-size:11.5px}
.ref-code{font-family:ui-monospace,monospace; font-size:11px; color:var(--muted)}

/* ---------- Badges ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px; font-size:11.5px; font-weight:600; white-space:nowrap}
.badge-slate{background:#f1f5f9; color:#475569} .badge-blue{background:#dbeafe; color:#1d4ed8}
.badge-amber{background:#fef3c7; color:#b45309} .badge-purple{background:#ede9fe; color:#6d28d9}
.badge-green{background:#dcfce7; color:#15803d} .badge-emerald{background:#d1fae5; color:#047857}
.badge-gray{background:#f3f4f6; color:#4b5563} .badge-red{background:#fee2e2; color:#b91c1c}
.badge-type-simple{background:#e0f2fe; color:#0369a1}
.badge-type-variable{background:#fae8ff; color:#a21caf}

/* status dropdown */
.status-select{border:1px solid var(--border); border-radius:20px; padding:4px 8px; font-size:11.5px; font-weight:600; background:var(--surface); cursor:pointer}

/* ---------- Forms ---------- */
.form-row{margin-bottom:16px}
.form-row label{display:block; font-weight:600; font-size:12.5px; margin-bottom:6px; color:var(--text)}
.form-row .req{color:var(--red)}
.form-row .hint{color:var(--muted); font-size:11.5px; font-weight:400; margin-top:4px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=date],select,textarea{
  width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
  font-size:13.5px; font-family:inherit; background:var(--surface); color:var(--text);
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-50)}
textarea{resize:vertical; min-height:80px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}}
.checkbox{display:flex; align-items:center; gap:8px; font-size:13px}
.checkbox input{width:auto}
.radio-cards{display:flex; gap:12px; flex-wrap:wrap}
.radio-card{flex:1; min-width:160px; border:2px solid var(--border); border-radius:var(--radius); padding:14px 16px; cursor:pointer; transition:.12s}
.radio-card:hover{border-color:var(--muted-2)}
.radio-card.selected{border-color:var(--primary); background:var(--primary-50)}
.radio-card input{display:none}
.radio-card .rc-title{font-weight:650; font-size:14px}
.radio-card .rc-desc{color:var(--muted); font-size:12px; margin-top:3px}

/* ---------- Toolbar / filters ---------- */
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
.toolbar .search-box{flex:1; min-width:220px; position:relative}
.toolbar .search-box input{padding-left:34px}
.toolbar .search-box::before{content:"🔍"; position:absolute; left:11px; top:9px; font-size:13px; opacity:.6}
.toolbar select{width:auto; min-width:120px}
.filters-bar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
.filters-bar select,.filters-bar input{width:auto; min-width:130px}
.chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; background:var(--primary-50); color:var(--primary-600); border-radius:20px; font-size:12px; font-weight:600}
.chip a{color:inherit; font-weight:700}

/* ---------- Tabs ---------- */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:20px; overflow-x:auto}
.tab{padding:10px 16px; border:none; background:none; cursor:pointer; font-size:13.5px; font-weight:560; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.active{color:var(--primary); border-bottom-color:var(--primary)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ---------- Image manager ---------- */
.dropzone{border:2px dashed var(--border); border-radius:var(--radius); padding:30px; text-align:center; color:var(--muted); cursor:pointer; transition:.15s; background:var(--surface-2)}
.dropzone.drag{border-color:var(--primary); background:var(--primary-50); color:var(--primary-600)}
.dropzone .dz-icon{font-size:32px}
.image-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; margin-top:16px}
.image-tile{position:relative; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface-2); aspect-ratio:1}
.image-tile img{width:100%; height:100%; object-fit:cover; display:block}
.image-tile.featured{border-color:var(--primary); box-shadow:0 0 0 2px var(--primary)}
.image-tile .img-actions{position:absolute; top:4px; right:4px; display:flex; gap:3px; opacity:0; transition:.15s}
.image-tile:hover .img-actions{opacity:1}
.img-btn{width:26px; height:26px; border-radius:6px; border:none; background:rgba(15,23,42,.75); color:#fff; cursor:pointer; font-size:13px; display:grid; place-items:center}
.img-btn:hover{background:rgba(15,23,42,.95)}
.image-tile .featured-badge{position:absolute; bottom:4px; left:4px; background:var(--primary); color:#fff; font-size:10px; padding:2px 6px; border-radius:5px; font-weight:600}
.image-tile .drag-handle{position:absolute; top:4px; left:4px; background:rgba(15,23,42,.6); color:#fff; width:22px; height:22px; border-radius:5px; display:grid; place-items:center; cursor:grab; font-size:12px}
.image-tile.dragging{opacity:.4}

/* ---------- Attributes / variations ---------- */
.attr-block{border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px; margin-bottom:12px; background:var(--surface-2)}
.attr-head{display:flex; gap:10px; margin-bottom:10px}
.attr-head input{flex:1}
.values-input{display:flex; flex-wrap:wrap; gap:6px; padding:6px; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; min-height:40px}
.value-tag{display:inline-flex; align-items:center; gap:5px; background:var(--primary-50); color:var(--primary-600); padding:3px 9px; border-radius:6px; font-size:12.5px; font-weight:600}
.value-tag button{border:none; background:none; cursor:pointer; color:inherit; font-weight:700; padding:0}
.values-input input{border:none; flex:1; min-width:100px; padding:4px; background:none}
.values-input input:focus{box-shadow:none}

/* ---------- Completeness ---------- */
.completeness{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px}
.progress{height:9px; background:var(--border); border-radius:20px; overflow:hidden; margin:8px 0 14px}
.progress-bar{height:100%; background:var(--green); transition:width .3s}
.check-list{list-style:none; margin:0; padding:0; font-size:13px}
.check-list li{display:flex; align-items:center; gap:8px; padding:4px 0}
.check-yes{color:var(--green)} .check-no{color:var(--red)}

/* ---------- Pagination ---------- */
.pagination{display:flex; gap:4px; align-items:center; justify-content:center; margin-top:20px; flex-wrap:wrap}
.pagination a,.pagination span{padding:7px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); font-size:13px}
.pagination a:hover{background:var(--surface-2); text-decoration:none}
.pagination .active{background:var(--primary); color:#fff; border-color:var(--primary)}
.pagination .disabled{opacity:.4; pointer-events:none}
.list-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; flex-wrap:wrap; color:var(--muted); font-size:12.5px}

/* ---------- Empty states ---------- */
.empty-state{text-align:center; padding:60px 20px; color:var(--muted)}
.empty-state .empty-icon{font-size:52px; margin-bottom:12px}
.empty-state h2{color:var(--text)}
.empty-state p{max-width:420px; margin:0 auto 18px}

/* ---------- Toasts ---------- */
#toast-container{position:fixed; top:74px; right:20px; z-index:100; display:flex; flex-direction:column; gap:8px; max-width:340px}
.toast{padding:12px 16px; border-radius:var(--radius-sm); background:var(--surface); box-shadow:var(--shadow-lg); border-left:4px solid var(--slate); font-size:13.5px; font-weight:520; animation:slideIn .2s}
.toast-success{border-left-color:var(--green)} .toast-error{border-left-color:var(--red)}
.toast-warning{border-left-color:var(--amber)} .toast-info{border-left-color:var(--blue)}
@keyframes slideIn{from{transform:translateX(20px); opacity:0}to{transform:none; opacity:1}}

/* ---------- Modal ---------- */
.modal-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:80; display:none; align-items:center; justify-content:center; padding:20px}
.modal-backdrop.open{display:flex}
.modal{background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-lg); max-width:480px; width:100%; max-height:90vh; overflow:auto}
.modal-head{padding:16px 20px; border-bottom:1px solid var(--border); font-weight:650; font-size:16px}
.modal-body{padding:20px}
.modal-foot{padding:14px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px}

/* ---------- Auth ---------- */
.auth-wrap{min-height:100vh; display:grid; place-items:center; background:linear-gradient(135deg,#1e1b4b,#0f172a); padding:20px}
.auth-card{background:var(--surface); border-radius:16px; box-shadow:var(--shadow-lg); width:100%; max-width:400px; padding:36px 32px}
.auth-card .brand{border:none; justify-content:center; padding:0 0 20px; color:var(--text)}
.auth-card .brand-name{color:var(--text)}
.auth-title{text-align:center; margin-bottom:6px}
.auth-sub{text-align:center; color:var(--muted); margin-bottom:24px; font-size:13px}
.auth-err{background:#fee2e2; color:#b91c1c; padding:10px 14px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:16px}

/* ---------- Misc ---------- */
.muted{color:var(--muted)}
.text-right{text-align:right}
.text-center{text-align:center}
.mt{margin-top:16px} .mb{margin-bottom:16px}
.flex{display:flex; gap:10px; align-items:center}
.flex-between{display:flex; gap:10px; align-items:center; justify-content:space-between}
.wrap-gap{display:flex; gap:8px; flex-wrap:wrap}
.actions-menu{position:relative; display:inline-block}
.actions-btn{padding:5px 9px; border:1px solid var(--border); border-radius:6px; background:var(--surface); cursor:pointer; font-size:14px; line-height:1}
.actions-dropdown{position:absolute; right:0; top:calc(100% + 4px); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); min-width:170px; z-index:20; display:none; overflow:hidden}
.actions-dropdown.open{display:block}
.actions-dropdown a,.actions-dropdown button{display:block; width:100%; text-align:left; padding:9px 14px; font-size:13px; border:none; background:none; cursor:pointer; color:var(--text)}
.actions-dropdown a:hover,.actions-dropdown button:hover{background:var(--surface-2); text-decoration:none}
.actions-dropdown .danger{color:var(--red)}
.view-toggle{display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden}
.view-toggle button{padding:7px 12px; border:none; background:var(--surface); cursor:pointer; font-size:13px}
.view-toggle button.active{background:var(--primary); color:#fff}
.star{cursor:pointer; font-size:16px; background:none; border:none; color:var(--muted-2)}
.star.on{color:#f59e0b}
.bulk-bar{position:sticky; bottom:0; background:var(--text); color:#fff; padding:12px 18px; border-radius:var(--radius); display:none; align-items:center; gap:12px; margin-top:16px; box-shadow:var(--shadow-lg)}
.bulk-bar.show{display:flex}
.bulk-bar select{width:auto; color:var(--text)}
.product-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px}
.p-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.p-card .p-img{aspect-ratio:4/3; background:var(--surface-2); display:grid; place-items:center; color:var(--muted-2); font-size:28px; position:relative}
.p-card .p-img img{width:100%; height:100%; object-fit:cover}
.p-card .p-body{padding:12px 14px}
.p-card .p-title{font-weight:640; font-size:13.5px; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.p-card .p-meta{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px}
.progress-mini{height:5px; background:var(--border); border-radius:20px; overflow:hidden}
.progress-mini > span{display:block; height:100%; background:var(--green)}
.kv{display:grid; grid-template-columns:130px 1fr; gap:8px 14px; font-size:13px}
.kv dt{color:var(--muted); font-weight:560}
.autosave-status{font-size:12px; color:var(--muted); display:inline-flex; align-items:center; gap:6px}
.dot{width:7px; height:7px; border-radius:50%; background:var(--muted-2)}
.dot.saving{background:var(--amber)} .dot.saved{background:var(--green)}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:none; box-shadow:var(--shadow-lg)}
  .main{margin-left:0}
  .hamburger{display:block}
}
@media(max-width:640px){
  .content{padding:16px}
  table.data thead{display:none}
  table.data,table.data tbody,table.data tr,table.data td{display:block; width:100%}
  table.data tr{border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; padding:6px}
  table.data td{border:none; padding:6px 10px; display:flex; justify-content:space-between; gap:12px}
  table.data td::before{content:attr(data-label); font-weight:600; color:var(--muted); font-size:11.5px}
  table.data td[data-label=""]::before{content:""}
}