@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@500;700;800&family=Tajawal:wght@400;500;700&display=swap');

:root{
    --bg: #f4f5f7;
    --panel: #ffffff;
    --ink: #1c2333;
    --ink-soft: #5b6478;
    --line: #e4e6ec;
    --navy: #182035;
    --navy-soft: #2a3552;
    --gold: #b8862f;
    --gold-soft: #f2e4c8;
    --teal: #2f6f6f;
    --danger: #b3453f;
    --danger-soft: #f6e2e0;
    --radius: 10px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Tajawal', sans-serif;
    direction: rtl;
    font-size: 15px;
}
h1,h2,h3,.brand,button,.btn{font-family:'Cairo', sans-serif}

.layout{display:flex; min-height:100vh}

/* ---------- الشريط الجانبي ---------- */
.sidebar{
    width: 240px;
    background: var(--navy);
    color: #dfe3ee;
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    padding: 22px 16px;
}
.sidebar .brand{
    font-weight:800;
    font-size: 19px;
    color:#fff;
    margin-bottom: 4px;
}
.sidebar .brand span{color:var(--gold)}
.sidebar .sub{font-size:12px; color:#8b93ab; margin-bottom:26px}
.sidebar nav{display:flex; flex-direction:column; gap:3px; flex:1}
.sidebar nav a{
    color:#c4cadd;
    text-decoration:none;
    padding:10px 12px;
    border-radius:8px;
    font-size:14.5px;
    display:flex;
    align-items:center;
    gap:10px;
    transition: background .15s, color .15s;
}
.sidebar nav a:hover{background: var(--navy-soft); color:#fff}
.sidebar nav a.active{background: var(--gold); color:#241a05; font-weight:700}
.sidebar .userbox{
    border-top:1px solid #2c3554;
    padding-top:14px;
    margin-top:14px;
    font-size:13px;
    color:#9aa2ba;
}
.sidebar .userbox a{color:#e6b95e; text-decoration:none}

/* ---------- المحتوى ---------- */
.content{flex:1; padding: 26px 32px; max-width: 100%}
.page-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px}
.page-head h1{font-size:21px; margin:0; font-weight:800}
.page-head .desc{color:var(--ink-soft); font-size:13px; margin-top:4px}

.panel{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom:20px;
}

/* ---------- أزرار ---------- */
.btn{
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 16px;
    border-radius:8px;
    border:1px solid transparent;
    font-size:14px; font-weight:700;
    cursor:pointer;
    text-decoration:none;
    background:var(--navy); color:#fff;
}
.btn:hover{background:var(--navy-soft)}
.btn-gold{background:var(--gold); color:#241a05}
.btn-gold:hover{background:#a5761f}
.btn-outline{background:transparent; border-color:var(--line); color:var(--ink)}
.btn-outline:hover{border-color:var(--ink-soft)}
.btn-danger{background:var(--danger-soft); color:var(--danger); border-color:#eccac7}
.btn-danger:hover{background:#f0d3d0}
.btn-sm{padding:5px 10px; font-size:12.5px; border-radius:6px}

/* ---------- نماذج ---------- */
label{display:block; font-size:13px; font-weight:700; color:var(--ink-soft); margin:0 0 6px}
input[type=text], input[type=number], input[type=date], input[type=password], select, textarea{
    width:100%;
    padding:9px 11px;
    border:1px solid var(--line);
    border-radius:8px;
    font-family:'Tajawal', sans-serif;
    font-size:14px;
    background:#fff;
    color:var(--ink);
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold)}
.field{margin-bottom:14px}
.row{display:flex; gap:14px; flex-wrap:wrap}
.row > .field{flex:1; min-width:180px}

/* ---------- جداول ---------- */
table{width:100%; border-collapse:collapse; font-size:14px}
thead th{
    text-align:right;
    color:var(--ink-soft);
    font-size:12.5px;
    font-weight:700;
    border-bottom:2px solid var(--line);
    padding:10px 8px;
}
tbody td{padding:11px 8px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:hover{background:#fafbfc}
.num{font-variant-numeric: tabular-nums; text-align:right}

/* ---------- شارات الحالة ---------- */
.badge{display:inline-block; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:700}
.badge-active{background:#e3f1e9; color:#2c7a4b}
.badge-paused{background:var(--gold-soft); color:#8a5f10}
.badge-stopped{background:var(--danger-soft); color:var(--danger)}

.item-thumb{width:40px; height:40px; border-radius:8px; object-fit:cover; border:1px solid var(--line); background:#f0f1f4}

.muted{color:var(--ink-soft); font-size:13px}
.alert{padding:12px 14px; border-radius:8px; font-size:13.5px; margin-bottom:16px}
.alert-error{background:var(--danger-soft); color:var(--danger)}
.alert-ok{background:#e3f1e9; color:#2c7a4b}

.unit-row, .barcode-row{display:flex; gap:8px; align-items:center; margin-bottom:8px}
.unit-row input, .barcode-row input{flex:1}
.remove-row{background:var(--danger-soft); color:var(--danger); border:none; border-radius:6px; width:32px; height:32px; cursor:pointer; font-weight:800}
.add-row-btn{background:none; border:1px dashed var(--line); color:var(--ink-soft); border-radius:8px; padding:8px; width:100%; cursor:pointer; font-size:13px; font-weight:700}
.add-row-btn:hover{border-color:var(--gold); color:var(--gold)}

.login-wrap{min-height:100vh; display:flex}
.login-panel-brand{
    flex:1;
    background: linear-gradient(160deg, var(--navy) 0%, #101628 100%);
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding: 60px 70px;
    position:relative;
    overflow:hidden;
}
.login-panel-brand::before{
    content:'';
    position:absolute;
    width:520px; height:520px;
    border-radius:50%;
    border:1px solid rgba(230,185,94,.15);
    top:-160px; left:-160px;
}
.login-panel-brand::after{
    content:'';
    position:absolute;
    width:340px; height:340px;
    border-radius:50%;
    border:1px solid rgba(230,185,94,.12);
    bottom:-120px; right:-100px;
}
.login-brand-mark{
    width:52px; height:52px;
    background:var(--gold);
    color:#241a05;
    font-family:'Cairo', sans-serif;
    font-weight:800;
    font-size:26px;
    border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:22px;
    position:relative; z-index:1;
}
.login-brand-name{font-family:'Cairo', sans-serif; font-weight:800; font-size:34px; position:relative; z-index:1}
.login-brand-name span{color:var(--gold)}
.login-brand-tag{color:#9aa2ba; font-size:14px; margin-top:8px; margin-bottom:36px; position:relative; z-index:1}
.login-brand-points{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; position:relative; z-index:1}
.login-brand-points li{
    font-size:13.5px;
    color:#dfe3ee;
    padding-right:22px;
    position:relative;
}
.login-brand-points li::before{
    content:'✓';
    position:absolute;
    right:0; top:0;
    color:var(--gold);
    font-weight:800;
}
.login-panel-form{
    flex:1;
    max-width:520px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--bg);
}
.login-box{width:340px}
.login-box h1{font-size:24px; margin:0 0 4px; font-weight:800}

@media (max-width: 820px){
    .login-panel-brand{display:none}
    .login-panel-form{max-width:100%}
}