/* =================================================================
   UAE FA Identity — Unified Design System  v6.0.0  (LIGHT / Gold)
   Project: نظام إدارة وتقييم الحكّام والبطولات
   Theme:   Clean Ivory + Emirati Gold (no green) + warm neutrals
   ================================================================= */

/* --- Cairo Font (Local Only) --- */
@font-face { font-family:'Cairo'; src:url('../../fonts/Cairo-Light.ttf')     format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Cairo'; src:url('../../fonts/Cairo-Regular.ttf')   format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Cairo'; src:url('../../fonts/Cairo-Medium.ttf')    format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Cairo'; src:url('../../fonts/Cairo-SemiBold.ttf')  format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Cairo'; src:url('../../fonts/Cairo-Bold.ttf')      format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Cairo'; src:url('../../fonts/Cairo-ExtraBold.ttf') format('truetype'); font-weight:800; font-display:swap; }
@font-face { font-family:'Cairo'; src:url('../../fonts/Cairo-Black.ttf')     format('truetype'); font-weight:900; font-display:swap; }

/* --- Design Tokens (Gold) --- */
:root {
    /* Emirati Gold (primary) */
    /* الإبداع للمدارس — education blue (primary) + green accent */
    --uae-gold:        #1d5fbf;
    --uae-gold-light:  #4b8ef5;
    --uae-gold-lighter:#a9c9f7;
    --uae-gold-dark:   #14458c;
    --uae-gold-soft:   rgba(29,95,191,0.12);
    --edu-green:       #1f7a4d;
    --edu-green-dark:  #15603a;

    /* Supporting */
    --uae-red:         #c0392b;
    --uae-black:       #1a1a1a;
    --uae-white:       #ffffff;

    /* Surfaces — clean ivory */
    --bg-primary:      #eef3fa;
    --bg-primary-2:    #efefe9;
    --bg-card:         #ffffff;
    --bg-card-2:       #fcfcf9;
    --bg-input:        #ffffff;
    --bg-elevated:     #f3f2ec;
    --bg-glass:        rgba(255,255,255,0.85);

    /* Text — أسود واضح في الموقع كلّه (طلب المالك: قراءة أسهل لكبار السن) */
    --text-white:      #000000;   /* primary text (black on light) */
    --text-soft:       #0d0d0d;
    --text-muted:      #1a1a1a;
    --text-dim:        #333333;

    /* Borders */
    --border-color:    #e7e5db;
    --border-light:    #dad7c9;

    /* Status */
    --success:         #15803d;
    --warning:         #b45309;
    --danger:          #b91c1c;
    --info:            #1d4ed8;

    /* Radius */
    --radius-sm:       8px;
    --radius-md:       12px;
    --radius-lg:       18px;
    --radius-xl:       26px;

    /* Shadows (soft, premium) */
    --shadow-sm:       0 1px 3px rgba(40,35,15,0.06), 0 1px 2px rgba(40,35,15,0.04);
    --shadow-md:       0 8px 24px rgba(60,50,20,0.08), 0 2px 6px rgba(60,50,20,0.05);
    --shadow-lg:       0 24px 60px rgba(60,50,20,0.14);
    --shadow-gold:     0 8px 22px rgba(29,95,191,0.30);

    /* Gradients */
    --grad-gold:       linear-gradient(135deg,#4b8ef5 0%,#1d5fbf 55%,#14458c 100%);
    --grad-gold-soft:  linear-gradient(135deg,#a9c9f7 0%,#4b8ef5 100%);
    --grad-surface:    linear-gradient(180deg,#f7faff 0%,#eef3fa 100%);

    /* Layout */
    --header-h:        76px;
    --content-max:     1440px;
}

/* --- Bootstrap overrides --- */
:root {
    --bs-primary:        var(--uae-gold);
    --bs-primary-rgb:    184,144,47;
    --bs-body-font-family:'Cairo',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    --bs-body-bg:        var(--bg-primary);
    --bs-body-color:     var(--text-white);
    --bs-border-color:   var(--border-color);
    --bs-border-radius:  var(--radius-md);
}

/* --- Base --- */
*,*::before,*::after { box-sizing:border-box; }

html,body {
    font-family:'Cairo',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background:var(--bg-primary);
    background-image:
        radial-gradient(950px 480px at 100% -10%, rgba(184,144,47,0.09), transparent 60%),
        radial-gradient(760px 420px at -8% 0%, rgba(184,144,47,0.05), transparent 55%),
        var(--grad-surface);
    background-attachment:fixed;
    color:var(--text-white);
    direction:rtl; text-align:right;
    margin:0; padding:0; min-height:100vh; line-height:1.65;
    -webkit-font-smoothing:antialiased;
}

a { color:var(--uae-gold-dark); text-decoration:none; transition:color .2s; }
a:hover { color:var(--uae-gold); }

h1,h2,h3,h4,h5,h6 { color:var(--text-white); font-weight:800; letter-spacing:-0.01em; }
::selection { background:rgba(184,144,47,0.22); color:var(--uae-gold-dark); }

/* --- Section title --- */
.section-title { display:flex; align-items:center; gap:12px; font-size:1.25rem; font-weight:800; color:var(--text-white); margin:0 0 18px; }
.section-title::before { content:''; width:5px; height:1.35em; background:var(--grad-gold); border-radius:3px; }
.section-title .sub { color:var(--text-muted); font-weight:500; font-size:.85rem; }

/* --- Gold accent stripe --- */
.flag-stripe { display:flex; height:4px; width:100%; border-radius:4px; overflow:hidden; box-shadow:var(--shadow-sm); }
.flag-stripe i { flex:1; height:100%; display:block; }
.flag-stripe i:nth-child(1){ background:var(--uae-gold-lighter); }
.flag-stripe i:nth-child(2){ background:var(--uae-gold-light); }
.flag-stripe i:nth-child(3){ background:var(--uae-gold); }
.flag-stripe i:nth-child(4){ background:var(--uae-gold-dark); }

/* --- Cards --- */
.card,.app-card {
    background:var(--bg-card); border:1px solid var(--border-color);
    border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-md);
    color:var(--text-white); position:relative;
    transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.card:hover,.app-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.card-header,.app-card-header {
    border-bottom:1px solid var(--border-color); padding-bottom:14px; margin-bottom:18px;
    color:var(--uae-gold-dark); font-weight:800; font-size:1.05rem; background:transparent;
}

/* --- Hero / page banner --- */
.app-hero {
    position:relative; overflow:hidden;
    background:
        radial-gradient(640px 300px at 92% -50%, rgba(184,144,47,0.18), transparent 60%),
        linear-gradient(135deg,#ffffff 0%,#f6f3ea 100%);
    border:1px solid var(--border-color); border-radius:var(--radius-xl);
    padding:34px 36px; box-shadow:var(--shadow-md); margin-bottom:26px;
}
.app-hero::after {
    content:''; position:absolute; inset:0 0 auto 0; height:4px;
    background:var(--grad-gold);
}
.app-hero h1 { font-size:1.85rem; margin:0 0 6px; color:var(--uae-gold-dark); }
.app-hero p  { color:var(--text-soft); margin:0; }

/* --- Buttons --- */
.btn { font-family:inherit; border-radius:var(--radius-md); padding:10px 22px; font-weight:700; transition:all .25s ease; border:1.5px solid transparent; }
.btn-primary,.btn-gold { background:var(--grad-gold); color:#fff; border-color:var(--uae-gold); box-shadow:0 4px 12px rgba(184,144,47,0.25); }
.btn-primary:hover,.btn-gold:hover { color:#fff; box-shadow:var(--shadow-gold); transform:translateY(-2px); filter:brightness(1.05); }
.btn-outline-gold,.btn-outline-primary { background:transparent; color:var(--uae-gold-dark); border-color:var(--uae-gold); }
.btn-outline-gold:hover,.btn-outline-primary:hover { background:var(--uae-gold-soft); color:var(--uae-gold-dark); transform:translateY(-1px); }
.btn-success { background:var(--success); border-color:var(--success); color:#fff; }
.btn-danger  { background:var(--danger);  border-color:var(--danger);  color:#fff; }
.btn-warning { background:var(--warning); border-color:var(--warning); color:#fff; }
.btn-secondary { background:var(--bg-elevated); border-color:var(--border-light); color:var(--text-soft); }
.btn-secondary:hover { background:#e9e7df; color:var(--text-white); }

/* --- Forms --- */
.form-control,.form-select {
    background:var(--bg-input); border:1.5px solid var(--border-color); border-radius:var(--radius-md);
    padding:12px 14px; color:var(--text-white); font-family:inherit; font-size:.95rem; transition:all .25s;
}
.form-control:focus,.form-select:focus {
    background:var(--bg-input); border-color:var(--uae-gold); color:var(--text-white);
    box-shadow:0 0 0 3px rgba(184,144,47,0.16); outline:none;
}
.form-control::placeholder { color:var(--text-dim); }
.form-label { color:var(--text-soft); font-size:.88rem; font-weight:700; margin-bottom:8px; }

/* --- Tables --- */
.table { color:var(--text-white); background:transparent; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:var(--radius-md); }
.table thead th {
    background:var(--grad-gold); color:#fff; border-bottom:none;
    font-weight:800; padding:14px 16px; text-align:right; white-space:nowrap;
}
.table tbody td { background:var(--bg-card); border-bottom:1px solid var(--border-color); padding:13px 16px; color:var(--text-soft); }
.table tbody tr:hover td { background:var(--uae-gold-soft); color:var(--text-white); }
.table-striped tbody tr:nth-child(odd) td { background:#faf9f4; }

/* --- Alerts --- */
.alert { border-radius:var(--radius-md); padding:14px 18px; border:1px solid; font-weight:600; }
.alert-success { background:#e8f6ee; border-color:#bfe6cf; color:#15803d; }
.alert-danger  { background:#fdeaea; border-color:#f6c9c9; color:#b91c1c; }
.alert-warning { background:#fdf3e3; border-color:#f6dfb3; color:#b45309; }
.alert-info    { background:#e8f0fd; border-color:#c7dbf9; color:#1d4ed8; }

/* --- Badges --- */
.badge { border-radius:20px; padding:5px 13px; font-weight:700; font-size:.76rem; }
.badge.bg-gold  { background:var(--grad-gold)!important; color:#fff; }
.badge.bg-green { background:var(--uae-gold)!important;  color:#fff; }   /* remapped: no green */
.badge.bg-red   { background:var(--uae-red)!important;   color:#fff; }

/* --- Navbar / Header (roomy, white glass) --- */
.app-header {
    background:var(--bg-glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border-color);
    padding:16px 38px; display:flex; align-items:center; justify-content:space-between; gap:24px;
    position:sticky; top:0; z-index:100; box-shadow:var(--shadow-sm);
}
.app-header::after {
    content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px;
    background:var(--grad-gold);
}
/* roomier right-side nav cluster — fixes the cramped feel */
.app-header > div:last-child { gap:16px !important; row-gap:10px; }
.app-header .brand { display:flex; align-items:center; gap:12px; color:var(--uae-gold-dark); font-weight:800; font-size:1.18rem; }
.app-header .brand .brand-text { display:flex; flex-direction:column; line-height:1.1; }
.app-header .brand .brand-text small { color:var(--text-muted); font-weight:600; font-size:.7rem; }

/* Brand is a link back to the role's home dashboard — keep it looking identical
   to the old static text (no underline / no browser link colour). */
.app-header a.brand { text-decoration:none; cursor:pointer; transition:color .15s ease, opacity .15s ease; }
.app-header a.brand:hover,
.app-header a.brand:focus { color:var(--uae-gold); opacity:.92; text-decoration:none; }
.app-header a.brand:focus-visible { outline:2px solid var(--uae-gold); outline-offset:4px; border-radius:6px; }

/* Nav cluster (clean, roomy) */
.app-nav { display:flex; align-items:center; gap:12px; }
.app-nav .nav-cta { padding:8px 16px; font-size:.85rem; border-radius:10px; white-space:nowrap; }
.app-nav .nav-cta i { margin-inline-end:5px; }
.nav-link-btn {
    display:inline-flex; align-items:center; gap:7px;
    background:transparent; border:1px solid var(--border-color); color:var(--text-soft);
    padding:9px 15px; border-radius:10px; font-weight:700; font-size:.85rem; font-family:inherit;
    cursor:pointer; transition:all .22s;
}
.nav-link-btn:hover { background:var(--uae-gold-soft); color:var(--uae-gold-dark); border-color:var(--uae-gold); }
.nav-link-btn i.text-gold, .nav-link-btn .fa-toolbox { color:var(--uae-gold); }
.nav-divider { width:1px; height:28px; background:var(--border-light); margin:0 2px; }
.nav-user {
    display:inline-flex; align-items:center; gap:7px;
    background:var(--bg-elevated); border:1px solid var(--border-color);
    padding:6px 12px; border-radius:10px; color:var(--text-soft); font-weight:600; font-size:.85rem;
}
.nav-user .fa-user-circle { color:var(--uae-gold); font-size:1.05rem; }

/* Dropdown (themed for light) */
.app-nav .dropdown-menu {
    background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-md);
    box-shadow:var(--shadow-lg); padding:8px; min-width:200px; margin-top:8px;
}
.app-nav .dropdown-item {
    display:flex; align-items:center; gap:10px;
    color:var(--text-soft); font-weight:600; font-size:.9rem; border-radius:8px; padding:9px 12px;
}
.app-nav .dropdown-item:hover, .app-nav .dropdown-item:focus { background:var(--uae-gold-soft); color:var(--uae-gold-dark); }
.app-nav .dropdown-item i { width:18px; text-align:center; color:var(--uae-gold); }
.nav-link-btn.dropdown-toggle::after { margin-inline-start:4px; }

/* --- Container --- */
.app-container { max-width:var(--content-max); margin:0 auto; padding:30px 22px; }

/* --- Stat tiles --- */
.stat-tile {
    background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg);
    padding:22px; text-align:center; position:relative; overflow:hidden;
    transition:transform .25s, border-color .25s, box-shadow .25s; box-shadow:var(--shadow-sm);
}
.stat-tile::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-gold); }
.stat-tile:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.stat-tile .ico { font-size:1.5rem; color:var(--uae-gold); margin-bottom:4px; }
.stat-tile .num { font-size:2.4rem; font-weight:900; color:var(--uae-gold-dark); margin:4px 0; }
.stat-tile .lbl { color:var(--text-muted); font-size:.92rem; font-weight:600; }

/* --- Modal --- */
.modal-content { background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--radius-lg); color:var(--text-white); box-shadow:var(--shadow-lg); }
.modal-header { border-bottom:1px solid var(--border-color); }
.modal-footer { border-top:1px solid var(--border-color); }

/* --- Scrollbars --- */
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-track { background:var(--bg-primary-2); }
::-webkit-scrollbar-thumb { background:#d8d4c5; border-radius:6px; border:2px solid var(--bg-primary-2); }
::-webkit-scrollbar-thumb:hover { background:var(--uae-gold-light); }

/* --- Utilities --- */
.text-gold   { color:var(--uae-gold-dark)!important; }
.text-green  { color:var(--uae-gold-dark)!important; }   /* remapped: no green */
.text-red    { color:var(--uae-red)!important; }
.text-muted2 { color:var(--text-muted)!important; }
.text-muted  { color:var(--text-muted)!important; }
.bg-elevated { background:var(--bg-elevated)!important; }
.border-gold { border-color:var(--uae-gold)!important; }
.gold-grad-text  { background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.green-grad-text { background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } /* remapped */

/* --- Gold top accent --- */
.app-card.has-gold-top { overflow:hidden; }
.app-card.has-gold-top::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-gold); }

/* --- Icon button (roomier) --- */
.icon-btn {
    width:44px; height:44px; background:var(--bg-elevated); border:1px solid var(--border-color);
    border-radius:12px; color:var(--text-soft); display:inline-flex; align-items:center; justify-content:center; transition:all .25s;
}
.icon-btn:hover { background:var(--uae-gold-soft); color:var(--uae-gold-dark); border-color:var(--uae-gold); }
.icon-btn.is-logout:hover { background:var(--danger); color:#fff; border-color:var(--danger); }

/* --- Responsive --- */
@media (max-width:768px) {
    :root { --header-h:62px; }
    .app-container { padding:18px 12px; }
    .card,.app-card { padding:18px; }
    .app-hero { padding:24px 20px; }
    .app-hero h1 { font-size:1.4rem; }
    .stat-tile .num { font-size:1.9rem; }
    .app-header { padding:12px 16px; gap:12px; }
}