@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Cormorant+Garamond:wght@600;700&display=swap');

:root{--w:#68152f;--d:#220913;--g:#c6a16b;--bg:#f6efe9;--line:#e5d7ca;--text:#241b1d}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:Cairo,sans-serif;color:var(--text)}
button,input,textarea,select{font:inherit}
.hidden{display:none!important}
.message{min-height:22px;color:var(--w)}

.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle,#fff,#e7d2c1);padding:20px}
.loginBox{width:min(420px,92vw);background:#fff;padding:35px;border-radius:22px;box-shadow:0 25px 70px #3d132440;text-align:center}
.loginBox img{width:150px;height:90px;object-fit:cover;border-radius:8px;margin:auto}
.eyebrow{font-size:11px;letter-spacing:3px;color:var(--g);font-weight:700}
.loginBox h1{font:700 50px "Cormorant Garamond";color:var(--w);margin:5px}
.loginBox input{width:100%;padding:12px;margin:8px 0;border:1px solid var(--line);border-radius:9px;font-family:inherit}
.primary{background:var(--w);color:#fff;border:0;border-radius:9px;padding:11px 17px;cursor:pointer;font-family:inherit}
.primary:hover{filter:brightness(1.08)}
.loginBox .primary{width:100%}

.app{display:flex;min-height:100vh}
.side{position:fixed;right:0;top:0;width:245px;height:100vh;background:var(--d);color:#fff;padding:20px 14px}
.sideBrand{display:flex;align-items:center;gap:10px;padding:8px;margin-bottom:20px;font:700 26px "Cormorant Garamond"}
.sideBrand img{width:55px;height:40px;object-fit:cover;border-radius:6px}
.nav{width:100%;border:0;background:transparent;color:#ddd;padding:13px;border-radius:9px;margin:2px 0;text-align:right;cursor:pointer;font-family:inherit}
.nav.active,.nav:hover{background:#7b2344;color:#fff}
.logout{position:absolute;bottom:20px;right:14px;width:calc(100% - 28px);padding:10px;border:1px solid #fff2;background:#fff1;color:#fff;border-radius:9px;cursor:pointer}
.main{margin-right:245px;width:calc(100% - 245px);padding:30px 4%}
.dashHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}
.dashHead h1{font:700 52px "Cormorant Garamond";color:var(--w);margin:5px 0}
.view{background:#fff;padding:10px 15px;border-radius:9px;text-decoration:none;color:#222;border:1px solid var(--line)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{background:#fff;border:1px solid var(--line);padding:22px;border-radius:15px}
.stat small{color:#8d7a7c}
.stat strong{display:block;font:700 38px "Cormorant Garamond";color:var(--w);margin-top:8px}
.panel{background:#fff;border:1px solid var(--line);padding:20px;border-radius:15px;margin-top:20px;overflow:hidden}
.panelHead{display:flex;justify-content:space-between;align-items:center;gap:15px}
.tableWrap{overflow:auto}
table{width:100%;border-collapse:collapse;margin-top:15px}
th,td{padding:12px;border-bottom:1px solid #eee;text-align:right;white-space:nowrap;vertical-align:middle}
select{padding:8px;border:1px solid var(--line);border-radius:7px;background:#fff}
.danger{border:0;background:#fee;color:#a21d3d;padding:7px 10px;border-radius:7px;cursor:pointer}
.tableImg{width:48px;height:48px;object-fit:cover;border-radius:7px}
.messageCell{white-space:normal;min-width:250px;max-width:450px}
.form{display:grid;gap:10px}
.form input,.form select,.form textarea{width:100%;padding:11px;border:1px solid var(--line);border-radius:9px;font-family:inherit}
.form textarea{min-height:100px;resize:vertical}
.modal{position:fixed;inset:0;background:#15070caa;z-index:30;display:grid;place-items:center;padding:20px}
.modalBox{position:relative;background:#fff;width:min(600px,92vw);padding:25px;border-radius:17px;max-height:90vh;overflow:auto}
.close{position:absolute;left:15px;top:9px;border:0;background:none;font-size:28px;cursor:pointer}
.notice{background:#f6ebe2;padding:15px;border-radius:10px;line-height:1.9}
.error{color:#a21d3d}

.stock{display:inline-block;padding:5px 9px;border-radius:999px;font-size:12px}
.stock.low{background:#fff0f0;color:#a21d3d}
.stock.ok{background:#eef8f0;color:#28633a}

@media(max-width:850px){
  .side{width:70px}
  .sideBrand b,.nav span{display:none}
  .nav{text-align:center}
  .main{margin-right:70px;width:calc(100% - 70px)}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .stats{grid-template-columns:1fr}
  .dashHead h1{font-size:40px}
  .main{padding:20px 3%}
  .panel{padding:14px}
  .side{padding:15px 8px}
  .logout{right:8px;width:calc(100% - 16px)}
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form label{display:block;font-size:13px;font-weight:700;color:#4c3b40}.form label input,.form label textarea,.form label select{margin-top:5px}.form small{display:block;color:#8d7a7c;font-weight:400;margin-top:4px}.existingImgs{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.existingImgs img{width:100%;height:70px;object-fit:cover;border-radius:7px}.check{display:flex!important;align-items:center;gap:8px}.check input{width:auto!important}.mini{padding:7px 10px}.notice{background:#f8eee7;padding:14px;border-radius:9px;line-height:1.9}@media(max-width:700px){.grid2{grid-template-columns:1fr}.existingImgs{grid-template-columns:repeat(3,1fr)}th,td{font-size:12px}}