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

:root { --bg:#0a0d0b; --panel:#121713; --panel2:#0c100d; --line:#28342c; --green:#74f28d; --text:#f5fff6; --muted:#9da89f; }
* { box-sizing:border-box; }
html { direction:rtl; }
body { margin:0; direction:rtl; background:var(--bg); color:var(--text); font-family:Cairo,system-ui,sans-serif; }
a { color:inherit; }
button,input,textarea,select { font:inherit; }

.admin-side { position:fixed; inset:0 0 0 auto; width:260px; overflow:auto; padding:20px; background:#101512; border-left:1px solid var(--line); }
.admin-brand { display:block; margin-bottom:18px; padding:7px 10px; color:#fff; text-decoration:none; font-size:24px; font-weight:800; }
.admin-brand span { color:var(--green); }
.admin-nav { counter-reset:admin-nav; display:grid; gap:3px; }
.admin-nav a { counter-increment:admin-nav; display:flex; align-items:center; gap:9px; width:100%; padding:10px; border-radius:10px; color:#d8e3da; text-align:right; text-decoration:none; }
.admin-nav a:hover { background:#1a211c; }
.nav-number::before { content:counter(admin-nav); width:25px; height:25px; display:grid; place-items:center; flex:0 0 25px; border:1px solid var(--line); border-radius:8px; color:var(--green); font-size:11px; font-weight:800; }
.admin-side form { margin-top:12px; }
.admin-side form button { display:block; width:100%; padding:10px; border:1px solid #5b2c2c; border-radius:10px; background:#291515; color:#fff; text-align:center; cursor:pointer; }

.admin-main { min-height:100vh; margin-right:260px; padding:25px; }
.admin-main > header { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:20px; }
.admin-main > header h1 { margin:0; }
.admin-main > header a { padding:8px 12px; border:1px solid var(--line); border-radius:10px; text-decoration:none; }
.panel, .stats > div { padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-bottom:20px; }
.stats span { display:block; color:var(--muted); }
.stats b { color:var(--green); font-size:28px; }

table { width:100%; border-collapse:collapse; direction:rtl; }
th,td { padding:11px; border-bottom:1px solid var(--line); text-align:right; vertical-align:top; }
th { position:sticky; top:0; z-index:2; background:#151b17; color:#dce6de; }
.serial-number { color:var(--green); font-weight:800; }
.table-scroll { overflow:auto; max-width:100%; }
.toolbar { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:15px; }
.toolbar a, .primary { padding:10px 15px; border:0; border-radius:10px; background:var(--green); color:#081008; text-decoration:none; font-weight:700; cursor:pointer; }
.toolbar a:not(.primary) { border:1px solid var(--line); background:var(--panel); color:var(--text); }
.actions { display:flex; gap:10px; white-space:nowrap; }
.actions a { color:var(--green); }
.actions form { display:inline; }
.actions button { padding:6px 9px; border:0; border-radius:8px; background:#401d1d; color:#fff; cursor:pointer; }

.form { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form label { display:grid; gap:7px; color:#dfe8e1; }
.form input,.form textarea,.form select,select,input,textarea { width:100%; padding:10px; border:1px solid var(--line); border-radius:9px; background:var(--panel2); color:#fff; }
.form textarea { min-height:100px; resize:vertical; }
.success-msg { margin-bottom:15px; padding:12px; border:1px solid #2c8140; border-radius:10px; background:#173a20; }
.error-msg { padding:10px; border-radius:9px; background:#431d1d; }

.login-body { min-height:100vh; display:grid; place-items:center; padding:20px; }
.login-card { width:min(420px,90vw); display:grid; gap:15px; padding:28px; border:1px solid var(--line); border-radius:20px; background:var(--panel); }
.login-card h1 { margin:0 0 8px; text-align:center; }
.login-card label { display:grid; gap:6px; }
.login-card button { padding:12px; border:0; border-radius:10px; background:var(--green); color:#071008; font-weight:800; cursor:pointer; }

.settings-form { display:grid; gap:16px; width:100%; max-width:100%; padding-bottom:25px; }
.settings-group h2 { margin-top:0; color:var(--green); font-size:20px; }
.settings-actions { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:18px; width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:#101612; }
.settings-actions p,.settings-actions span { margin:0; color:var(--muted); }
.settings-submit { flex:0 0 auto; min-width:170px; min-height:46px; }
.settings-submit:disabled { opacity:.7; cursor:wait; }
.settings-actions-bottom { position:sticky; bottom:12px; z-index:15; box-shadow:0 14px 38px #0009; }

@media (max-width:900px) {
    .admin-side { position:static; width:auto; display:block; padding:10px; border-left:0; border-bottom:1px solid var(--line); }
    .admin-brand { margin:0 0 8px; }
    .admin-nav { display:flex; overflow:auto; gap:5px; counter-reset:none; }
    .admin-nav a { flex:0 0 auto; width:auto; white-space:nowrap; }
    .nav-number { display:none; }
    .admin-side form { display:none; }
    .admin-main { margin:0; padding:15px; }
    .stats { grid-template-columns:repeat(2,1fr); }
    .form { grid-template-columns:1fr; }
    .settings-actions { align-items:stretch; flex-direction:column; }
    .settings-submit { width:100%; }
    .settings-actions-bottom { bottom:8px; }
}


/* Banner manager */
.banner-help { margin-bottom:15px; border-color:rgba(116,242,141,.32); }
.banner-help strong { display:block; color:var(--green); margin-bottom:5px; }
.banner-help p { margin:0; color:var(--muted); line-height:1.8; }
.banner-form .wide-field { grid-column:1/-1; }
.form-section { padding:15px; border:1px dashed #385040; border-radius:14px; background:#0d120f; }
.form-section h2 { margin:0 0 12px; color:var(--green); font-size:18px; }
.upload-drop { min-height:115px; place-items:center; align-content:center; padding:18px; border:1px dashed #496253; border-radius:12px; background:#111813; text-align:center; cursor:pointer; }
.upload-drop:hover { border-color:var(--green); }
.upload-drop span { font-weight:800; }
.upload-drop small, .banner-form label > small { color:var(--muted); line-height:1.7; }
.upload-drop input { max-width:560px; margin-top:8px; }
.banner-preview { margin-top:14px; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#050806; }
.banner-preview img, .banner-preview video { display:block; width:100%; max-height:420px; object-fit:cover; }
.check-label { display:flex !important; grid-template-columns:auto 1fr; align-items:center; justify-content:flex-start; gap:9px !important; }
.check-label input { width:auto !important; }
.banner-form .primary { min-height:48px; }
@media(max-width:900px){ .banner-form .wide-field { grid-column:auto; } }

/* V7: stable RTL forms and compact checkboxes */
.form input[type="checkbox"],
.form input[type="radio"],
.admin-resource-form input[type="checkbox"],
.admin-resource-form input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    margin: 0;
    padding: 0;
    flex: 0 0 20px;
    accent-color: var(--green);
    box-shadow: none;
}
.toggle-field,
.choice-check {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 10px !important;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--panel2);
    cursor: pointer;
}
.toggle-field span,
.choice-check span { line-height: 1.5; }
.wide-field { grid-column: 1 / -1; }
.form small, .muted { color: var(--muted); line-height: 1.7; }
.relation-box {
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #0d120f;
}
.relation-box h2 { margin: 0 0 13px; color: var(--green); font-size: 18px; }
.choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-heading h2 { margin: 0; }
.mini-primary { padding: 8px 11px; border-radius: 9px; background: var(--green); color: #081008; text-decoration: none; font-weight: 800; }
.related-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.related-row:last-child { border-bottom: 0; }
.related-row strong, .related-row small { display: block; }
.related-row small { margin-top: 4px; color: var(--muted); }
.related-actions { display: flex; align-items: center; gap: 9px; }
.related-actions a { color: var(--green); }
.related-actions form { margin: 0; }
.related-actions button { padding: 7px 9px; border: 0; border-radius: 8px; background: #431d1d; color: #fff; cursor: pointer; }
.form-save { min-height: 52px; font-size: 17px; }
.status-pill { display: inline-flex; min-width: 42px; justify-content: center; padding: 4px 8px; border-radius: 99px; font-size: 11px; font-weight: 800; }
.status-pill.on { color: #071008; background: var(--green); }
.status-pill.off { color: #ddd; background: #352323; }

@media (max-width: 900px) {
    .choice-grid { grid-template-columns: 1fr 1fr; }
    .wide-field { grid-column: auto; }
}
@media (max-width: 560px) {
    .choice-grid { grid-template-columns: 1fr; }
    .related-row, .section-heading { align-items: flex-start; flex-direction: column; }
}

/* V8: fixed checkbox alignment, fully RTL forms and bundle editor */
.admin-resource-form,
.banner-form,
.settings-form { direction: rtl; }

.admin-resource-form > label,
.banner-form > label { text-align: right; }

.admin-resource-form input[type="checkbox"],
.admin-resource-form input[type="radio"],
.banner-form input[type="checkbox"],
.banner-form input[type="radio"],
.settings-form input[type="checkbox"],
.settings-form input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #4a5d50 !important;
    border-radius: 6px !important;
    background: #090d0a !important;
    display: inline-grid !important;
    place-items: center;
    flex: 0 0 22px !important;
    cursor: pointer;
}
.admin-resource-form input[type="radio"] { border-radius: 50% !important; }
.admin-resource-form input[type="checkbox"]::after,
.banner-form input[type="checkbox"]::after,
.settings-form input[type="checkbox"]::after {
    content: "✓";
    color: #071008;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    opacity: 0;
}
.admin-resource-form input[type="checkbox"]:checked,
.banner-form input[type="checkbox"]:checked,
.settings-form input[type="checkbox"]:checked,
.admin-resource-form input[type="radio"]:checked {
    border-color: var(--green) !important;
    background: var(--green) !important;
}
.admin-resource-form input[type="checkbox"]:checked::after,
.banner-form input[type="checkbox"]:checked::after,
.settings-form input[type="checkbox"]:checked::after { opacity: 1; }
.admin-resource-form input[type="radio"]::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #071008;
    opacity: 0;
}
.admin-resource-form input[type="radio"]:checked::after { opacity: 1; }

.toggle-field,
.choice-check {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    grid-auto-flow: column;
    direction: rtl;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 11px !important;
    min-height: 50px;
    margin: 0 !important;
    padding: 12px 14px !important;
    text-align: right !important;
}
.toggle-field > input,
.choice-check > input { grid-column: 1; }
.toggle-field > span,
.choice-check > span { grid-column: 2; min-width: 0; }

.bundle-builder .section-heading { align-items: center; }
.bundle-total { flex: 0 0 auto; padding: 10px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel2); }
.bundle-total strong { color: var(--green); }
.bundle-meals { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.bundle-meal-row { display: grid; grid-template-columns: minmax(0,1fr) 105px; gap: 9px; align-items: stretch; }
.bundle-check { min-width: 0; }
.bundle-check small { display: inline; margin-inline-start: 6px; color: var(--green); }
.bundle-qty { display: grid !important; grid-template-columns: auto 1fr; align-items: center; gap: 7px !important; padding: 8px 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel2); white-space: nowrap; }
.bundle-qty input { min-width: 0; padding: 7px !important; text-align: center; }
.bundle-qty input:disabled { opacity: .35; }

.admin-main .form > .form-save { margin-top: 4px; }

@media (max-width: 900px) {
    .bundle-meals { grid-template-columns: 1fr; }
    .bundle-builder .section-heading { align-items: flex-start; }
}
@media (max-width: 560px) {
    .bundle-meal-row { grid-template-columns: 1fr; }
    .bundle-qty { grid-template-columns: auto minmax(80px, 1fr); }
}
