/* =============================================
   HEART OF KURDISTAN — Base Stylesheet
   Colors: Green #2b6a4b | Yellow #f7c316 | Red #d42b2b
   ============================================= */

/* --- CSS Custom Properties --- */
/* --- CSS Custom Properties (Kurdistan Flag Color Palette) --- */
:root {
    --primary:      #007a3d;  /* Kurdistan Flag Green (Mountains & Nature) */
    --primary-dark: #00582c;
    --primary-light:#129c54;
    --accent:       #fdb813;  /* Kurdistan Flag Sun Gold (Life & Radiance) */
    --accent-dark:  #e09e00;
    --accent-light: #ffe066;
    --danger:       #d52b1e;  /* Kurdistan Flag Red (Sacrifice & Freedom) */
    --danger-dark:  #b31910;
    --danger-light: #fee2e2;
    --kurd-green:   #007a3d;
    --kurd-gold:    #fdb813;
    --kurd-red:     #d52b1e;
    --kurd-white:   #ffffff;
    --text-dark:    #0f172a;
    --text-body:    #334155;
    --text-muted:   #64748b;
    --text-light:   #f8fafc;
    --bg-white:     #ffffff;
    --bg-light:     #f8fafc;
    --bg-alt:       #f1f5f9;
    --bg-dark:      #0b1320;
    --bg-card:      #ffffff;
    --border:       #e2e8f0;
    --shadow-sm:    0 1px 3px rgba(0,0,0,.08);
    --shadow-md:    0 4px 14px rgba(0,0,0,.09);
    --shadow-lg:    0 10px 30px rgba(0,0,0,.13);
    --shadow-xl:    0 20px 60px rgba(0,0,0,.18);
    --radius-sm:    0.5rem;
    --radius-md:    1rem;
    --radius-lg:    1.5rem;
    --font-head:    'Outfit', sans-serif;
    --font-body:    'Inter', sans-serif;
    --ease:         cubic-bezier(.4,0,.2,1);
    --trans-fast:   .18s var(--ease);
    --trans-norm:   .3s var(--ease);
    --trans-slow:   .5s var(--ease);
    --nav-h:        72px;
}

/* --- Reset --- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body { font-family:var(--font-body); color:var(--text-body); background:var(--bg-white); line-height:1.7; overflow-x:hidden; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-head); font-weight:700; line-height:1.2; color:var(--text-dark); margin-bottom:.75rem; }
a { text-decoration:none; color:inherit; transition:color var(--trans-fast); }
img { max-width:100%; height:auto; display:block; }
ul { list-style:none; }
button { font-family:var(--font-body); cursor:pointer; }
address { font-style:normal; }

/* --- Flag Top Ribbon --- */
.kurd-flag-stripe {
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, var(--danger) 0%, var(--danger) 33.3%, var(--accent) 33.3%, var(--accent) 66.6%, var(--primary) 66.6%, var(--primary) 100%);
    position: relative;
    z-index: 1001;
}

/* --- Skip Link (Accessibility) --- */
.skip-link {
    position:absolute; top:-100%; left:1rem;
    background:var(--primary); color:#fff;
    padding:.5rem 1rem; border-radius:var(--radius-sm);
    z-index:9999; font-weight:600;
    transition:top var(--trans-fast);
}
.skip-link:focus { top:1rem; }

/* =============================================
   STICKY HEADER & NAVBAR
   ============================================= */
.sticky-header {
    position:fixed; top:0; width:100%;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(0,0,0,.06);
    z-index:1000;
    transition:box-shadow var(--trans-norm), background var(--trans-norm);
}
.sticky-header.scrolled {
    background:rgba(255,255,255,.98);
    box-shadow:var(--shadow-md);
}
.navbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:0 4%; height:var(--nav-h);
    max-width:1440px; margin:0 auto;
}
.logo a { display:flex; align-items:center; gap:.15rem; }
.logo-sun {
    color: var(--accent); font-size: 1.3rem; margin-right: .35rem;
    animation: sunSpin 24s linear infinite;
}
@keyframes sunSpin { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.logo-kurd { font-family:var(--font-head); font-size:1.5rem; font-weight:800; color:var(--primary); }
.accent    { font-family:var(--font-head); font-size:1.5rem; font-weight:800; color:var(--accent-dark); }

/* Nav Links */
.nav-links {
    display:flex; align-items:center; gap:1.1rem;
}
.nav-links > li > a:not(.dropdown-toggle) {
    font-size:.875rem; font-weight:600; color:var(--text-dark);
    padding:.4rem .2rem; position:relative;
    display:flex; align-items:center; gap:.35rem;
    white-space:nowrap;
}
.nav-links > li > a:not(.dropdown-toggle) i { font-size:.82rem; color:var(--primary); }
.nav-links > li > a:not(.dropdown-toggle)::after {
    content:''; position:absolute; bottom:-2px; left:0;
    width:0; height:2.5px; background:var(--accent);
    border-radius: 2px;
    transition:width var(--trans-fast);
}
.nav-links > li > a:not(.dropdown-toggle):hover { color:var(--primary); }
.nav-links > li > a:not(.dropdown-toggle):hover::after { width:100%; }

/* Dropdown */
.dropdown { position:relative; }
.dropdown-toggle {
    cursor:pointer; display:inline-flex; align-items:center; gap:.45rem;
    padding:.42rem .95rem; border-radius:999px;
    font-weight:700; font-size:.85rem;
    border:1.5px solid var(--border);
    color:var(--text-dark); background:var(--bg-light);
    transition:all var(--trans-fast);
}
.dropdown-toggle i { font-size:.85rem; color:var(--primary); transition:all var(--trans-fast); }
.dropdown-toggle.account-btn {
    border-color:var(--primary); color:var(--primary); background:transparent;
}
.dropdown-toggle:hover,
.dropdown.active .dropdown-toggle {
    background:var(--primary); color:#fff; border-color:var(--primary);
}
.dropdown-toggle:hover i,
.dropdown.active .dropdown-toggle i {
    color:#fff;
}
.dropdown.active .dropdown-toggle .fa-chevron-down {
    transform:rotate(180deg);
}
.dropdown-toggle .fa-chevron-down {
    transition:transform var(--trans-fast); font-size: .7rem;
}
.dropdown-menu {
    display:none; position:absolute; top:calc(100% + .5rem); right:0;
    background:#fff; min-width:230px;
    box-shadow:var(--shadow-lg); border-radius:var(--radius-md);
    border:1px solid var(--border); padding:.5rem; z-index:1100;
    animation:slideDown var(--trans-fast) both;
}
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.dropdown.active .dropdown-menu { display:block; }
.dropdown-menu li a,
.dropdown-menu li .logout-btn {
    display:flex; align-items:center; gap:.75rem;
    padding:.6rem .9rem; border-radius:var(--radius-sm);
    font-size:.88rem; font-weight:600; color:var(--text-dark);
    width:100%; text-align:left; background:none; border:none;
    transition:background var(--trans-fast), color var(--trans-fast);
}
.dropdown-menu li a i,
.dropdown-menu li .logout-btn i {
    width:18px; text-align:center; font-size:.92rem; color:var(--primary);
    transition:color var(--trans-fast);
}
.dropdown-menu li a:hover,
.dropdown-menu li .logout-btn:hover {
    background:var(--bg-alt); color:var(--primary);
}
.dropdown-menu .admin-link { color:var(--danger); }
.dropdown-menu .admin-link i { color:var(--danger); }
.dropdown-menu .admin-link:hover { background:var(--danger-light); }
.dropdown-divider { border-top:1px solid var(--border); margin:.4rem 0; }

/* Mobile Toggle */
.mobile-menu-toggle {
    display:none; background:none; border:none;
    padding:.5rem; border-radius:var(--radius-sm);
}
.hamburger, .hamburger::before, .hamburger::after {
    display:block; width:24px; height:2.5px;
    background:var(--text-dark); border-radius:2px;
    transition:all var(--trans-fast);
}
.hamburger { position:relative; }
.hamburger::before { content:''; position:absolute; top:-7px; left:0; }
.hamburger::after  { content:''; position:absolute; top:7px;  left:0; }
.mobile-menu-toggle.open .hamburger { background:transparent; }
.mobile-menu-toggle.open .hamburger::before { transform:rotate(45deg); top:0; }
.mobile-menu-toggle.open .hamburger::after  { transform:rotate(-45deg); top:0; }

/* =============================================
   FLASH MESSAGES
   ============================================= */
.messages-container { position:fixed; top:calc(var(--nav-h) + 1rem); right:1rem; z-index:2000; display:flex; flex-direction:column; gap:.5rem; max-width:380px; }
.message { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1.2rem; border-radius:var(--radius-sm); font-size:.9rem; font-weight:500; box-shadow:var(--shadow-md); animation:slideDown .3s ease; }
.message-success { background:#d1fae5; color:#065f46; border-left:4px solid #10b981; }
.message-error   { background:#fee2e2; color:#991b1b; border-left:4px solid var(--danger); }
.message-warning { background:#fef3c7; color:#92400e; border-left:4px solid var(--accent); }
.message-info    { background:#dbeafe; color:#1e40af; border-left:4px solid #3b82f6; }
.message-close   { background:none; border:none; font-size:1.2rem; line-height:1; cursor:pointer; opacity:.6; }
.message-close:hover { opacity:1; }

/* =============================================
   FORM / AUTH STYLES
   ============================================= */
.auth-container {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding:calc(var(--nav-h) + 2rem) 1rem 3rem;
    background:linear-gradient(135deg, #f0fdf4 0%, #fefce8 100%);
}
.auth-card {
    background:#fff; padding:3rem; border-radius:var(--radius-lg);
    box-shadow:var(--shadow-xl); width:100%; max-width:480px;
    border-top:5px solid var(--primary);
}
.auth-card h2 { text-align:center; color:var(--primary); margin-bottom:.5rem; }
.auth-card .auth-subtitle { text-align:center; color:var(--text-muted); margin-bottom:2rem; font-size:.95rem; }
.form-group { margin-bottom:1.4rem; }
.form-group label { display:block; margin-bottom:.45rem; font-weight:600; font-size:.9rem; color:var(--text-dark); }
.form-control {
    width:100%; padding:.75rem 1rem; border:1.5px solid var(--border);
    border-radius:var(--radius-sm); font-family:var(--font-body); font-size:.95rem;
    transition:border-color var(--trans-fast), box-shadow var(--trans-fast);
    background:#fff; color:var(--text-dark);
}
.form-control:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(43,106,75,.12); }
.form-control.is-invalid { border-color:var(--danger); }
.error-text { color:var(--danger); font-size:.82rem; margin-top:.3rem; }
.btn-submit {
    width:100%; padding:1rem; background:var(--primary); color:#fff;
    border:none; border-radius:var(--radius-sm); font-weight:700;
    font-size:1rem; transition:background var(--trans-fast), transform var(--trans-fast);
    margin-top:.5rem;
}
.btn-submit:hover { background:var(--primary-dark); transform:translateY(-2px); }
.btn-submit:active { transform:translateY(0); }
.auth-links { text-align:center; margin-top:1.5rem; font-size:.9rem; color:var(--text-muted); }
.auth-links a { color:var(--primary); font-weight:600; }
.auth-links a:hover { text-decoration:underline; }
.password-wrapper { position:relative; }
.password-wrapper .form-control { padding-right:3rem; }
.toggle-password {
    position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
    background:none; border:none; color:var(--text-muted); cursor:pointer;
    transition:color var(--trans-fast);
}
.toggle-password:hover { color:var(--primary); }

/* =============================================
   DASHBOARD STYLES
   ============================================= */
.dashboard-wrapper { padding:calc(var(--nav-h) + 2rem) 5% 4rem; max-width:1400px; margin:0 auto; }
.dashboard-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:2.5rem; padding-bottom:1.5rem; border-bottom:2px solid var(--border); }
.dashboard-header h1 { font-size:1.75rem; color:var(--primary); margin-bottom:.25rem; }
.dashboard-header p  { color:var(--text-muted); }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; margin-bottom:2.5rem; }
.stat-card {
    background:#fff; border-radius:var(--radius-md); padding:1.5rem;
    box-shadow:var(--shadow-md); display:flex; align-items:center; gap:1.25rem;
    border-left:4px solid var(--primary);
}
.stat-card.accent { border-left-color:var(--accent); }
.stat-card.danger  { border-left-color:var(--danger); }
.stat-icon { width:52px; height:52px; border-radius:var(--radius-sm); background:var(--bg-light); display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--primary); flex-shrink:0; }
.stat-card.accent .stat-icon { color:var(--accent-dark); }
.stat-card.danger  .stat-icon { color:var(--danger); }
.stat-label { font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:600; }
.stat-value { font-family:var(--font-head); font-size:1.6rem; font-weight:800; color:var(--text-dark); }
.dashboard-grid { display:grid; grid-template-columns:2fr 1fr; gap:1.5rem; }
@media(max-width:900px){ .dashboard-grid{grid-template-columns:1fr;} }
.dash-card { background:#fff; border-radius:var(--radius-md); padding:1.75rem; box-shadow:var(--shadow-md); }
.dash-card h3 { font-size:1.1rem; color:var(--primary); margin-bottom:1.25rem; display:flex; align-items:center; gap:.5rem; }
.dash-card h3 i { color:var(--accent-dark); }
.profile-info-list li { display:flex; justify-content:space-between; align-items:center; padding:.75rem 0; border-bottom:1px solid var(--border); font-size:.9rem; }
.profile-info-list li:last-child { border-bottom:none; }
.profile-info-list .pi-label { font-weight:600; color:var(--text-muted); }
.profile-info-list .pi-value { color:var(--text-dark); }
.badge { display:inline-flex; align-items:center; gap:.3rem; padding:.25rem .75rem; border-radius:999px; font-size:.75rem; font-weight:700; }
.badge-staff  { background:#d1fae5; color:#065f46; }
.badge-admin  { background:#fee2e2; color:#991b1b; }
.badge-user   { background:#dbeafe; color:#1e40af; }
.quick-links-list li { margin-bottom:.6rem; }
.quick-links-list li a {
    display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem;
    border-radius:var(--radius-sm); font-weight:600; font-size:.9rem;
    border:1.5px solid var(--border); transition:all var(--trans-fast);
}
.quick-links-list li a:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.quick-links-list li a i { width:16px; text-align:center; }

/* =============================================
   FOOTER
   ============================================= */
.site-footer { background:var(--bg-dark); color:var(--text-light); padding:5rem 5% 2rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; max-width:1400px; margin:0 auto 3rem; }
.footer-logo { font-size:1.5rem; margin-bottom:1rem; }
.site-footer p { color:#9ca3af; font-size:.9rem; line-height:1.8; }
.footer-section h4 { color:#fff; margin-bottom:1.25rem; font-size:1rem; }
.footer-section ul li { margin-bottom:.6rem; }
.footer-section ul li a { color:#9ca3af; font-size:.9rem; transition:color var(--trans-fast); display:flex; align-items:center; gap:.4rem; }
.footer-section ul li a:hover { color:var(--accent); padding-left:4px; }
.footer-section address p { color:#9ca3af; font-size:.9rem; margin-bottom:.6rem; display:flex; align-items:center; gap:.5rem; }
.footer-section address i { color:var(--accent); width:16px; }
.social-links { display:flex; gap:.75rem; margin-top:1.5rem; }
.social-links a {
    width:38px; height:38px; border-radius:50%;
    background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center;
    color:#9ca3af; transition:all var(--trans-fast);
}
.social-links a:hover { background:var(--accent); color:var(--bg-dark); }
.footer-bottom { max-width:1400px; margin:0 auto; text-align:center; padding-top:2rem; border-top:1px solid rgba(255,255,255,.08); color:#6b7280; font-size:.875rem; }

/* =============================================
   UTILITY CLASSES
   ============================================= */
.container      { max-width:1400px; margin:0 auto; padding:0 5%; }
.section-pad    { padding:6rem 0; }
.section-pad-sm { padding:4rem 0; }
.text-center    { text-align:center; }

/* Image display & lazy load */
img { opacity: 1; transition: opacity var(--trans-slow); }
img[data-src]:not([src]) { opacity: 0; }
img.loaded { opacity: 1; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width:1100px){
    .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px){
    :root { --nav-h:64px; }
    .nav-links {
        position:fixed; top:var(--nav-h); left:-100%; width:100%;
        height:calc(100vh - var(--nav-h)); background:#fff;
        flex-direction:column; justify-content:center;
        gap:1.75rem; transition:left var(--trans-norm);
        border-top:1px solid var(--border);
    }
    .nav-links.open { left:0; }
    .nav-links > li > a { font-size:1.1rem; }
    .mobile-menu-toggle { display:flex; }
    .dropdown-menu { position:static; box-shadow:none; border:1px solid var(--border); margin-top:.5rem; }
    .footer-grid { grid-template-columns:1fr; gap:2rem; }
}
@media (max-width:480px){
    .auth-card { padding:2rem 1.5rem; }
    .navbar { padding:0 1rem; }
    .container { padding:0 1rem; }
    .section-pad { padding:4rem 0; }
}