@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}

/* ---------- الشريط العلوي للجوال (مخفي على الشاشات الكبيرة) ---------- */
.mobile-topbar{
    display:none;
    align-items:center;
    gap:12px;
    background:var(--navy);
    color:#fff;
    padding:12px 16px;
    position:sticky;
    top:0;
    z-index:150;
}
.mobile-topbar .menu-toggle{
    background:none; border:none; color:#fff; font-size:22px; cursor:pointer;
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    border-radius:8px;
}
.mobile-topbar .menu-toggle:active{background:rgba(255,255,255,.1)}
.mobile-brand{font-family:'Cairo', sans-serif; font-weight:800; font-size:17px}
.mobile-brand span{color:var(--gold)}

.sidebar-overlay{
    display:none;
    position:fixed; inset:0;
    background:rgba(10,14,26,.55);
    z-index:190;
}
.sidebar-overlay.open{display:block}

.sidebar-close{display:none}

/* ---------- الشريط الجانبي ---------- */
.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}
.btn-generate{background:var(--gold-soft); color:#8a5f10; border:none; border-radius:6px; width:32px; height:32px; cursor:pointer; font-size:15px}
.btn-generate:hover{background:#e6cf9a}
.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)}

/* ---------- صفوف نتائج البحث (المشتريات/الترحيل/الجرد) ---------- */
.search-result-row{padding:10px 12px; cursor:pointer; border-bottom:1px solid #f0f0f0}
.search-result-row.highlighted{background:#faf6ec}

.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%}
}

/* ================= استجابة الجوال والتابلت ================= */
@media (max-width: 900px){
    .mobile-topbar{display:flex}

    .layout{flex-direction:column}

    .sidebar{
        position:fixed;
        top:0; right:0;
        height:100vh;
        width:270px;
        max-width:82vw;
        transform: translateX(100%);
        transition: transform .28s ease;
        z-index:200;
        box-shadow:-8px 0 30px rgba(0,0,0,.25);
    }
    .sidebar.open{transform: translateX(0)}
    .sidebar-close{
        display:flex; align-items:center; justify-content:center;
        position:absolute; left:14px; top:14px;
        width:32px; height:32px;
        background:rgba(255,255,255,.08);
        border:none; color:#fff; font-size:20px; border-radius:8px; cursor:pointer;
    }

    .content{padding:16px}
    .page-head{flex-direction:column; align-items:flex-start; gap:10px}
    .row{flex-direction:column}
    .row > .field{min-width:0}
    table{font-size:13px}
    thead th, tbody td{padding:8px 6px}
}