/* Shafaq Lucky Draw - brand theme */
:root {
    --shq-green: #4a9626;
    --shq-green-dark: #2c6a15;
    --shq-green-light: #eaf5e1;
    --shq-yellow: #f6c500;
    --shq-yellow-soft: #fff6cc;
    --shq-red: #e31e24;
    --shq-ink: #1f2a1a;
    --shq-muted: #6b7566;
    --bs-primary: #4a9626;
    --bs-primary-rgb: 74, 150, 38;
    --bs-link-color: #2c6a15;
    --bs-link-hover-color: #1f4d0e;
    --bs-body-font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-body-color: #26311f;
    --bs-border-radius: .65rem;
}
body { background: #f5f8f2; }
.btn-primary, .btn-brand {
    --bs-btn-bg: var(--shq-green); --bs-btn-border-color: var(--shq-green); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--shq-green-dark); --bs-btn-hover-border-color: var(--shq-green-dark); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--shq-green-dark); --bs-btn-active-border-color: var(--shq-green-dark);
    --bs-btn-disabled-bg: var(--shq-green); --bs-btn-disabled-border-color: var(--shq-green);
}
.btn-outline-primary {
    --bs-btn-color: var(--shq-green-dark); --bs-btn-border-color: var(--shq-green);
    --bs-btn-hover-bg: var(--shq-green); --bs-btn-hover-border-color: var(--shq-green); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--shq-green-dark); --bs-btn-active-border-color: var(--shq-green-dark);
}
.btn-gold {
    --bs-btn-bg: var(--shq-yellow); --bs-btn-border-color: var(--shq-yellow); --bs-btn-color: #2d2500; font-weight: 600;
    --bs-btn-hover-bg: #ddb000; --bs-btn-hover-border-color: #ddb000; --bs-btn-hover-color: #2d2500;
}
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--shq-green); box-shadow: 0 0 0 .2rem rgba(74,150,38,.18); }
.form-check-input:checked { background-color: var(--shq-green); border-color: var(--shq-green); }
.text-brand { color: var(--shq-green-dark) !important; }
.bg-brand-soft { background: var(--shq-green-light); }

/* ---------------------------------------------------------------- admin shell */
.admin-wrap { display: flex; min-height: 100vh; }
.sidebar {
    width: 260px; flex: 0 0 260px; background: linear-gradient(180deg, #1d4a0c 0%, #2c6a15 60%, #3b8219 100%);
    color: #e9f4e2; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 1040; transition: transform .25s;
}
.sidebar .brand { padding: 1rem 1.25rem; background: #fff; display: flex; align-items: center; gap: .75rem; border-bottom: 4px solid var(--shq-yellow); }
.sidebar .brand img { height: 52px; width: auto; }
.sidebar .brand small { color: var(--shq-muted); line-height: 1.1; font-weight: 600; letter-spacing: .02em; }
.sidebar .nav-label { text-transform: uppercase; font-size: .68rem; letter-spacing: .12em; color: #a9cc96; padding: 1rem 1.25rem .35rem; }
.sidebar .nav-link { color: #e9f4e2; padding: .65rem 1.25rem; display: flex; align-items: center; gap: .75rem; border-left: 4px solid transparent; font-size: .95rem; }
.sidebar .nav-link i { font-size: 1.1rem; width: 1.3rem; text-align: center; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar .nav-link.active { background: rgba(255,255,255,.14); border-left-color: var(--shq-yellow); color: #fff; font-weight: 600; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { background: #fff; border-bottom: 1px solid #e3eadc; padding: .65rem 1.25rem; display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 1030; }
.topbar h1 { font-size: 1.2rem; margin: 0; font-weight: 700; color: var(--shq-green-dark); }
.content { padding: 1.5rem; flex: 1; }
.sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
    .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); }
    .sidebar.show { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.35); }
    .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1035; }
    .content { padding: 1rem; }
}

/* cards & stats */
.card { border: 1px solid #e3eadc; border-radius: .9rem; }
.card.shadow-sm { box-shadow: 0 2px 10px rgba(44,106,21,.06) !important; }
.card-header { background: #fff; border-bottom: 1px solid #edf2e8; font-weight: 600; }
.stat-card { border: 0; border-radius: 1rem; position: relative; overflow: hidden; color: #fff; transition: transform .2s, box-shadow .2s; }
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(44,106,21,.2); }
.stat-card .stat-value { font-size: 2rem; font-weight: 800; line-height: 1; }
.stat-card .stat-label { opacity: .9; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.stat-card .stat-icon { position: absolute; right: -.4rem; bottom: -.9rem; font-size: 4.6rem; opacity: .18; }
.stat-green { background: linear-gradient(135deg, #3f8a1f, #5fb534); }
.stat-dark { background: linear-gradient(135deg, #1d4a0c, #3b8219); }
.stat-gold { background: linear-gradient(135deg, #e0a800, #f6c500); color: #3a2f00; }
.stat-red { background: linear-gradient(135deg, #c4151a, #e8434a); }
.stat-teal { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.stat-slate { background: linear-gradient(135deg, #475569, #64748b); }
.table > :not(caption) > * > * { padding: .65rem .75rem; }
.table thead th { background: #f1f7ec; color: var(--shq-green-dark); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; border-bottom: 2px solid #d9e8cd; }
.table-hover tbody tr:hover { background: #f8fbf5; }
.page-link { color: var(--shq-green-dark); }
.page-item.active .page-link { background: var(--shq-green); border-color: var(--shq-green); }
.thumb { width: 56px; height: 40px; object-fit: cover; border-radius: .4rem; border: 1px solid #e3eadc; }
.thumb-lg { width: 100%; max-height: 220px; object-fit: cover; border-radius: .6rem; }
.mono { font-family: Consolas, 'Courier New', monospace; letter-spacing: .03em; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--shq-muted); }
.empty-state i { font-size: 2.5rem; color: #b8cfa8; display: block; margin-bottom: .5rem; }
.chart-box { position: relative; height: 280px; }

/* login */
.login-bg { min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 15% 20%, rgba(246,197,0,.25), transparent 40%), linear-gradient(135deg, #1d4a0c, #3b8219 55%, #6bbf3a); padding: 1rem; }
.login-card { width: 100%; max-width: 430px; border-radius: 1.25rem; overflow: hidden; border: 0; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.login-card .login-head { background: #fff; text-align: center; padding: 1.5rem 1rem .5rem; }
.login-card .login-head img { height: 110px; }

/* ----------------------------------------------------------------- draw stage */
.draw-stage { background: radial-gradient(circle at 50% 0%, #2f7d17, #123308 70%); color: #fff; border-radius: 1.25rem; padding: 2rem 1rem; position: relative; overflow: hidden; min-height: 420px; }
.draw-stage::before { content: ''; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg, rgba(246,197,0,.06) 0 10deg, transparent 10deg 20deg); animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.draw-stage > * { position: relative; }
.slot { background: #fff; color: var(--shq-ink); border-radius: 1rem; padding: 1.25rem; max-width: 560px; margin: 0 auto; border: 5px solid var(--shq-yellow); box-shadow: 0 0 40px rgba(246,197,0,.4); text-align: center; }
.slot .slot-name { font-size: 1.9rem; font-weight: 800; color: var(--shq-green-dark); min-height: 2.5rem; }
.slot .slot-mobile { font-size: 1.3rem; font-family: Consolas, monospace; letter-spacing: .12em; }
.slot.spinning .slot-name, .slot.spinning .slot-mobile { filter: blur(1.5px); }
.slot .slot-prize { background: var(--shq-yellow); color: #2d2500; font-weight: 700; border-radius: 2rem; display: inline-block; padding: .35rem 1.1rem; margin-top: .5rem; }
.winner-reveal { animation: pop .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.winner-card { background: #fff; color: var(--shq-ink); border-radius: .9rem; border-left: 6px solid var(--shq-yellow); padding: .8rem 1rem; display: flex; align-items: center; gap: .9rem; animation: pop .5s; }
.winner-card .rank { width: 42px; height: 42px; border-radius: 50%; background: var(--shq-green); color: #fff; display: grid; place-items: center; font-weight: 800; flex: 0 0 42px; }
.confetti { position: fixed; top: -10px; width: 10px; height: 14px; z-index: 2000; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); opacity: .9; } }

/* ---------------------------------------------------------------- public site */
.pub-nav { background: #fff; border-bottom: 4px solid var(--shq-yellow); }
.pub-nav .navbar-brand img { height: 58px; }
.pub-nav .nav-link { font-weight: 600; color: var(--shq-green-dark); }
.pub-nav .nav-link:hover { color: var(--shq-red); }
.hero { background: radial-gradient(circle at 85% 20%, rgba(246,197,0,.35), transparent 45%), linear-gradient(135deg, #1d4a0c 0%, #3b8219 60%, #5fb534 100%); color: #fff; position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -160px; bottom: -220px; background: rgba(255,255,255,.07); }
.hero h1 { font-weight: 800; font-size: clamp(2rem, 5vw, 3.4rem); }
.hero .lead { color: #e3f2d8; }
.hero-badge { background: var(--shq-yellow); color: #2d2500; font-weight: 700; padding: .35rem 1rem; border-radius: 2rem; display: inline-block; }
.hero-logo { background: #fff; border-radius: 1.5rem; padding: 1rem; box-shadow: 0 20px 50px rgba(0,0,0,.25); animation: float 5s ease-in-out infinite; max-width: 320px; width: 100%; }
@keyframes float { 50% { transform: translateY(-12px); } }
.section { padding: 4rem 0; }
.section-title { font-weight: 800; color: var(--shq-green-dark); position: relative; display: inline-block; padding-bottom: .6rem; }
.section-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 60%; height: 5px; border-radius: 3px; background: var(--shq-yellow); }
.text-center .section-title::after { left: 20%; }
.camp-card { border: 0; border-radius: 1.1rem; overflow: hidden; box-shadow: 0 6px 24px rgba(44,106,21,.12); transition: transform .25s; height: 100%; }
.camp-card:hover { transform: translateY(-6px); }
.camp-card img { height: 190px; object-fit: cover; width: 100%; }
.step-card { background: #fff; border-radius: 1rem; padding: 1.5rem; text-align: center; height: 100%; border: 1px solid #e3eadc; position: relative; }
.step-card .step-no { width: 54px; height: 54px; border-radius: 50%; background: var(--shq-green); color: #fff; font-size: 1.4rem; font-weight: 800; display: grid; place-items: center; margin: 0 auto .8rem; box-shadow: 0 0 0 6px var(--shq-green-light); }
.prize-card { background: #fff; border-radius: 1rem; overflow: hidden; border: 1px solid #e3eadc; height: 100%; box-shadow: 0 4px 16px rgba(44,106,21,.07); }
.prize-card img { width: 100%; height: 170px; object-fit: cover; background: var(--shq-green-light); }
.check-box { background: #fff; border-radius: 1.2rem; box-shadow: 0 10px 40px rgba(44,106,21,.15); border-top: 6px solid var(--shq-yellow); }
.pub-winner { background: #fff; border-radius: 1rem; padding: 1rem 1.25rem; border-left: 6px solid var(--shq-green); box-shadow: 0 3px 14px rgba(44,106,21,.1); height: 100%; }
.pub-footer { background: #163a0a; color: #cfe5c1; }
.pub-footer a { color: #fff; }
.countdown span { background: rgba(255,255,255,.15); padding: .25rem .6rem; border-radius: .5rem; font-weight: 700; }
.terms-box { max-height: 280px; overflow: auto; background: #fff; border: 1px solid #e3eadc; border-radius: .8rem; padding: 1rem 1.25rem; white-space: pre-line; }

/* ------------------------------------------------------------------ print */
.certificate { width: 297mm; min-height: 205mm; margin: 0 auto; background: #fff; padding: 14mm; border: 14px double var(--shq-green); position: relative; text-align: center; }
.certificate::before { content: ''; position: absolute; inset: 8px; border: 2px solid var(--shq-yellow); pointer-events: none; }
@media print {
    .sidebar, .topbar, .no-print, .btn, .pagination, .sidebar-backdrop, .toast-container { display: none !important; }
    .main, .content { padding: 0 !important; margin: 0 !important; }
    body { background: #fff !important; }
    .card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
    a { text-decoration: none; color: inherit; }
    @page { margin: 10mm; }
}