/* ==========================================================================
   tabaa-portal.css — هوية «طبعة» على أبلكيشن المدرس (٢٥ أكتوبر ٢٠٢٦)

   البوابة مبنية على متغيّرات (--grad1/--grad2/--ink...) في layout.blade.php،
   فالملف ده بيغيّر القيم دي لألوان الهوية + خط Baloo + حركة خفيفة، من غير
   ما يلمس أي شاشة. بيتحمّل بعد <style> بتاع الـlayout.
   ========================================================================== */

@font-face { font-family: 'Baloo'; src: url('/fonts/baloo/baloo-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Baloo'; src: url('/fonts/baloo/baloo-medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Baloo'; src: url('/fonts/baloo/baloo-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Baloo'; src: url('/fonts/baloo/baloo-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Baloo'; src: url('/fonts/baloo/baloo-extrabold.woff2') format('woff2'); font-weight: 800 900; font-display: swap; }

:root {
    --grad1: #6E5BFF; --grad2: #5A44F8; --accent: #C4B4FB;
    --ink: #1B1A4B; --muted: #6B6A92; --line: #E6E8F4;
    --bg: #EEF1FA; --card: #FFFFFF;
    --tb-navy: #302CA7; --tb-lime: #DBFB69; --tb-lilac: #C4B4FB; --tb-soft: #EEEAFE;
    --shadow: 0 10px 30px rgba(48, 44, 167, .09); --shadow-sm: 0 3px 14px rgba(48, 44, 167, .07);
}

body, button, input, select, textarea, .btn { font-family: 'Baloo', system-ui, -apple-system, 'Segoe UI', sans-serif !important; }

/* الهيدر: كحلي ← بنفسجي، والرصيد بالليموني */
.appbar { background: radial-gradient(120% 140% at 85% 0%, #6E5BFF 0%, var(--grad2) 45%, var(--tb-navy) 100%); }
.balance .val { color: var(--tb-lime); }
.balance .pill { background: var(--tb-lime); color: var(--tb-navy); }

/* الكروت أنعم شوية زي الهوية */
.card, .tile { border-radius: 22px; }
.lrow .ic, .empty .ic { background: var(--tb-soft); }
.btn-primary { box-shadow: 0 10px 22px rgba(90, 68, 248, .3); }
.btn-light { background: var(--tb-soft); color: var(--tb-navy); }
.opt { border-color: #D9D5F5; }
.opt:has(input:checked) { box-shadow: 0 6px 16px rgba(90, 68, 248, .3); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--grad2); box-shadow: 0 0 0 4px rgba(90, 68, 248, .1); }
.filedrop { border-color: var(--tb-lilac); background: #F7F5FF; }
.bg-indigo { background: linear-gradient(135deg, #6E5BFF, #5A44F8); }
.bg-violet { background: linear-gradient(135deg, #8B7BFF, #302CA7); }
.tab.active::before { background: var(--grad2); }
.snav:hover { background: var(--tb-soft); }
.chip.active { box-shadow: 0 6px 14px rgba(90, 68, 248, .28); }

/* ---------- الحركة ---------- */
@keyframes tbp-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tbp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tbp-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

.appbar .row, .appbar .balance { animation: tbp-fade .45s ease backwards; }
.appbar .balance { animation-delay: .08s; }
.content > .card, .content > .tiles > .tile, .content > .sec-title, .content > .flash,
.content > form > .card, .content > .chips { animation: tbp-rise .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.content > :nth-child(2) { animation-delay: .04s; }
.content > :nth-child(3) { animation-delay: .08s; }
.content > :nth-child(4) { animation-delay: .12s; }
.content > :nth-child(n+5) { animation-delay: .16s; }
.tiles > .tile:nth-child(2) { animation-delay: .05s; }
.tiles > .tile:nth-child(3) { animation-delay: .1s; }
.tiles > .tile:nth-child(4) { animation-delay: .15s; }
.tile, .card a, .lrow { transition: transform .15s ease; }
.tile:active, .lrow:active { transform: scale(.98); }
.tab.active svg { animation: tbp-pop .35s ease both; }
.tab.active::before { animation: tbp-fade .3s ease backwards; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* شاشة دخول المدرس */
body.login-page .login-wrap { background: radial-gradient(120% 90% at 80% 0%, #6E5BFF 0%, #5A44F8 40%, #302CA7 100%); }
body.login-page .login-logo { animation: tbp-float 5s ease-in-out infinite; }
body.login-page .login-hero h1, body.login-page .login-hero p { animation: tbp-rise .5s .1s cubic-bezier(.2, .8, .2, 1) backwards; }
body.login-page .login-panel { animation: tbp-rise .55s .15s cubic-bezier(.2, .8, .2, 1) backwards; }
body.login-page .lt-btn.active { color: var(--grad2); }
@keyframes tbp-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }

/* الموبايل: الخانات ١٦px عشان الآيفون مايعملش زوم لوحده لما تدوس على خانة
   (بعد ما سمحنا بالتكبير بالصباعين) */
@media (max-width: 767px) {
    .field input, .field textarea, .field select, input.form-control, select, textarea { font-size: 16px !important; }
}