*{box-sizing:border-box}
html{
    zoom:.95;
}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f4f7fb;color:#172b4d}
a{text-decoration:none;color:inherit}

.admin-shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}
.sidebar{background:#fff;border-right:1px solid #e2e8f0;position:sticky;top:0;height:100vh;overflow:auto}
.side-brand{display:flex;gap:10px;align-items:center;padding:20px;border-bottom:1px solid #e2e8f0}
.side-logo{width:42px;height:42px;background:#0b74f1;color:#fff;border-radius:12px;display:grid;place-items:center;font-weight:900;font-size:22px}
.side-menu{padding:12px}
.side-menu .group{color:#94a3b8;text-transform:uppercase;font-size:11px;font-weight:800;padding:14px 12px 7px}
.side-menu a{display:flex;gap:10px;align-items:center;padding:11px 12px;border-radius:8px;margin:2px 0}
.side-menu a:hover,.side-menu a.active{background:#eaf3ff;color:#0b74f1}

.admin-main{min-width:0;overflow:hidden}
.admin-top{height:64px;background:#fff;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:10}
.admin-content{padding:24px;min-width:0}

.page-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.page-title h1{margin:0;font-size:25px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:8px;padding:10px 16px;background:#0b74f1;color:#fff;font-weight:700;cursor:pointer}
.btn.secondary{background:#fff;color:#0b74f1;border:1px solid #0b74f1}
.btn.danger{background:#dc2626}
.btn.success{background:#16a34a}
.btn.gray{background:#64748b}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stat{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:20px;min-width:0}
.stat .label{color:#64748b}
.stat .value{font-size:28px;font-weight:800;margin-top:8px}

.card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px;margin-bottom:20px;min-width:0}
.tabs{display:flex;gap:4px;border-bottom:1px solid #e2e8f0;margin-bottom:14px}
.tabs a{padding:10px 15px;border-radius:8px 8px 0 0}
.tabs a.active{color:#0b74f1;border:1px solid #dbeafe;border-bottom-color:#fff;background:#fff}

.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:15px;flex-wrap:wrap}
.toolbar input,.toolbar select{max-width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:8px}

.admin-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.admin-product{background:#fff;border:1px solid #dce4ee;border-radius:12px;overflow:hidden;min-width:0}
.admin-product .top{display:flex;gap:12px;padding:12px}
.admin-product img{width:98px;height:98px;object-fit:contain;border-radius:8px;background:#f8fafc}
.admin-product h3{font-size:15px;margin:5px 0;height:auto;overflow:visible}

.admin-product .stock{color:#475569;margin-top:7px}
.admin-product .actions{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #e2e8f0}
.admin-product .actions a{padding:11px;text-align:center}
.admin-product .actions a+a{border-left:1px solid #e2e8f0}

.table-wrap{overflow:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px;border-bottom:1px solid #e2e8f0;text-align:left;white-space:nowrap}
.table th{background:#f8fafc}

.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field.full{grid-column:1/-1}
.field input,.field select,.field textarea{display:block;width:100%;min-width:0;max-width:100%;padding:7px 10px;border:1px solid #cbd5e1;border-radius:8px;font:inherit;background:#fff}
.field small{color:#64748b}

.image-preview{width:160px;height:160px;object-fit:contain;border:1px dashed #94a3b8;border-radius:12px;background:#f8fafc}
.variant-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 56px;gap:8px;margin-bottom:8px;align-items:center}
.variant-row input{width:100%;min-width:0;padding:9px;border:1px solid #cbd5e1;border-radius:7px}

.badge{display:inline-block;padding:5px 8px;border-radius:999px;background:#e2e8f0;font-size:12px}
.badge.pending{background:#fef3c7;color:#92400e}
.badge.completed{background:#dcfce7;color:#166534}
.badge.cancelled{background:#fee2e2;color:#991b1b}

.alert{padding:12px 15px;border-radius:8px;margin:10px 0}
.alert.success{background:#dcfce7;color:#166534}
.alert.error{background:#fee2e2;color:#991b1b}

.pos-layout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:18px;align-items:start;min-width:0}
.pos-layout>div{min-width:0}
.pos-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-height:calc(100vh - 190px);overflow-y:auto;overflow-x:hidden}
.pos-product{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:8px;cursor:pointer;min-width:0}
.pos-product:hover{border-color:#0b74f1}
.pos-product img{width:100%;aspect-ratio:1/1;object-fit:contain}

.pos-product h4{font-size:12px;line-height:1.25;margin:5px 0;height:45px;overflow:hidden}



.pos-cart{position:sticky;top:82px;width:100%;min-width:0;max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:hidden;font-size:14px}
.pos-line{display:grid;grid-template-columns:minmax(0,1fr) 75px 90px 28px;gap:6px;align-items:center;padding:9px 0;border-bottom:1px solid #e2e8f0;min-width:0}
.pos-line>*{min-width:0}
.pos-line span{overflow-wrap:anywhere}
.pos-line input{width:100%;min-width:0;padding:7px}

.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#eaf3ff,#f8fafc)}
.login-card{width:min(420px,calc(100% - 30px));background:#fff;padding:30px;border-radius:16px;box-shadow:0 20px 55px #0f172a1f}
.login-card h1{text-align:center}
.login-card .field{margin-bottom:14px}

@media(max-width:1200px){
    .admin-products{grid-template-columns:repeat(3,minmax(0,1fr))}
    .pos-products{grid-template-columns:repeat(3,minmax(0,1fr))}
    .pos-layout{grid-template-columns:minmax(0,1fr) 390px}
}

@media(max-width:1000px){
    .pos-layout{grid-template-columns:1fr}
    .pos-cart{position:static;max-height:none;overflow:visible}
}

@media(max-width:900px){
    .admin-shell{grid-template-columns:1fr}
    .sidebar{display:none}
    .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .admin-products{grid-template-columns:repeat(2,minmax(0,1fr))}
    .form-grid{grid-template-columns:1fr}
    .variant-row{grid-template-columns:1fr 1fr}
    .variant-row>*:first-child{grid-column:1/-1}
}

@media(max-width:560px){
    .admin-content{padding:12px}
    .stats{grid-template-columns:1fr}
    .admin-products{grid-template-columns:1fr}
    .pos-products{grid-template-columns:repeat(2,minmax(0,1fr))}
    .pos-line{grid-template-columns:minmax(0,1fr) 60px 78px 28px}
}