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

/* =============================================================================
   TATH — Platform-Wide Design System & UI/UX Enhancement Layer
   -----------------------------------------------------------------------------
   Loaded on every page via the shared navbar include, AFTER each page's own
   stylesheets, so it can refine the look platform-wide.

   Goal: a clean, modern, world-class e-learning feel (Coursera / edX grade)
   while preserving the existing navy + gold brand identity, the logo, and
   all page content. No backend logic is touched.

   SAFE BY DESIGN: enhances typography, color, spacing, shadow, radius and
   motion. Avoids changing layout-critical structure (flex/grid/position).
   ============================================================================= */

:root {
    /* ---- Brand (kept, refined) ---- */
    --tath-navy:        #2563eb;
    --tath-navy-700:    #1f56d6;
    --tath-navy-500:    #4f86f7;
    --tath-gold:        #f5a623;
    --tath-gold-soft:   #fcd980;
    --tath-gold-dark:   #c9820c;

    /* ---- Action / interactive (e-learning blue, Coursera-like) ---- */
    --tath-blue:        #2b6cff;
    --tath-blue-dark:   #1f55d6;

    /* ---- Neutrals (clean, spacious) ---- */
    --tath-bg:          #f6f7fb;   /* app/page background */
    --tath-surface:     #ffffff;   /* cards / surfaces */
    --tath-ink:         #161a2b;   /* primary text */
    --tath-ink-2:       #3b4256;   /* secondary text */
    --tath-muted:       #6b7280;   /* muted text */
    --tath-line:        #e8eaf2;   /* borders / dividers */

    /* ---- Elevation ---- */
    --tath-shadow-xs:   0 1px 2px rgba(22, 26, 43, .05);
    --tath-shadow-sm:   0 2px 6px rgba(22, 26, 43, .06), 0 1px 2px rgba(22, 26, 43, .05);
    --tath-shadow-md:   0 8px 20px rgba(22, 26, 43, .08), 0 2px 6px rgba(22, 26, 43, .05);
    --tath-shadow-lg:   0 16px 40px rgba(22, 26, 43, .14), 0 6px 12px rgba(22, 26, 43, .08);

    /* ---- Motion ---- */
    --tath-ease:        cubic-bezier(.4, 0, .2, 1);
    --tath-speed:       .22s;

    /* ---- Radii ---- */
    --tath-radius-sm:   10px;
    --tath-radius:      16px;
    --tath-radius-lg:   22px;

    /* ---- Layout ---- */
    /* Matches the site's established .container / .hero content width so all
       content blocks (hero, courses, register, footer inner) line up. */
    --tath-container:   1300px;
}

/* =============================================================================
   1. TYPOGRAPHY  — the single biggest lever for a premium e-learning feel
   ============================================================================= */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--tath-ink);
    letter-spacing: .1px;
}

/* Body / control text uses Inter */
p, span, a, li, td, th, label, input, select, textarea, button,
.btn, .stat-label, .sidebar-link, .dropdown-item, .nav-links a,
.welcome-subtitle, .section-link {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* Headings & display numbers use Poppins for warmth + structure.
   IMPORTANT: we only set the typeface here — never the colour. Headings sit on
   both light and dark backgrounds across the platform, so colour is left to
   each page's own CSS to avoid dark-on-dark / light-on-light regressions. */
h1, h2, h3, h4, h5, h6,
.welcome-title, .section-title, .stat-number, .register-heading,
.form-heading, .auth-form-header h1, .auth-visual-content h2,
.page-header h1 {
    font-family: 'Poppins', 'Inter', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -.2px;
}

h1, .welcome-title, .auth-form-header h1 { line-height: 1.15; }
h2, h3 { line-height: 1.25; }

/* Bigger, calmer body line-height for readability */
p { line-height: 1.6; }

/* =============================================================================
   2. PAGE CANVAS — soft neutral background like modern learning platforms
   ============================================================================= */
.dashboard-container,
.admin-shell,
.admin-body,
.auth-container {
    background-color: var(--tath-bg);
}

/* =============================================================================
   3. GLOBAL MOTION — smooth, consistent transitions
   ============================================================================= */
a, button, .btn, .btn-primary, .btn-secondary, .btn-outline,
.admin-action-btn, .stat-card, .admin-stat-card, .admin-chart-card,
.course-card, .catalogue-card, .catalogue-page-card,
.application-overview-card, .sidebar-link, .admin-stat-link,
.dropdown-item, .nav-links a {
    transition:
        transform var(--tath-speed) var(--tath-ease),
        box-shadow var(--tath-speed) var(--tath-ease),
        background-color var(--tath-speed) var(--tath-ease),
        border-color var(--tath-speed) var(--tath-ease),
        color var(--tath-speed) var(--tath-ease) !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
   4. UNIFIED CARD / BOX SYSTEM — every card shares one consistent language
   -----------------------------------------------------------------------------
   NOTE: radius + shadow + hover apply to ALL cards. The white surface + border
   is applied ONLY to cards that are genuinely white — the admin coloured stat
   variants (--primary / --accent / --alert) keep their own backgrounds so their
   light text stays readable.
   ============================================================================= */
.stat-card,
.admin-stat-card,
.course-card,
.catalogue-card,
.catalogue-page-card,
.application-overview-card,
.admin-chart-card {
    border-radius: var(--tath-radius) !important;
    box-shadow: var(--tath-shadow-sm);
}

/* White-surface cards only (NOT the admin coloured variants) */
.stat-card,
.course-card,
.catalogue-card,
.catalogue-page-card,
.application-overview-card,
.admin-chart-card,
.admin-stat-card:not([class*="--"]) {
    background: var(--tath-surface);
    border: 1px solid transparent;
}

.stat-card:hover,
.admin-stat-card:hover,
.course-card:hover,
.catalogue-card:hover,
.catalogue-page-card:hover,
.application-overview-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tath-shadow-lg);
}

/* Stat numbers get the confident, large treatment used by Coursera/edX */
.stat-number {
    font-weight: 700;
    letter-spacing: -.5px;
}

.stat-label {
    color: var(--tath-muted);
    font-weight: 500;
}

a > .stat-card, .admin-stat-link, .catalogue-card-link { cursor: pointer; }

/* =============================================================================
   5. BUTTON SYSTEM — modern, tactile, consistent
   ============================================================================= */
.btn, .btn-primary, .btn-secondary, .btn-outline,
.admin-action-btn, .catalogue-search-btn, .auth-submit-btn {
    border-radius: var(--tath-radius-sm) !important;
    font-weight: 600 !important;
    box-shadow: var(--tath-shadow-xs);
    letter-spacing: .2px;
}

.btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-outline:hover,
.admin-action-btn:hover, .catalogue-search-btn:hover, .auth-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--tath-shadow-md);
}

.btn:active, .btn-primary:active, .btn-secondary:active,
.admin-action-btn:active, .auth-submit-btn:active {
    transform: translateY(0);
    box-shadow: var(--tath-shadow-xs);
}

/* =============================================================================
   6. FORMS — clean inputs with a calm focus state
   ============================================================================= */
input:not([type=checkbox]):not([type=radio]),
select, textarea, .form-input, .form-select {
    border-radius: var(--tath-radius-sm) !important;
    border: 1.5px solid var(--tath-line);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--tath-blue) !important;
    box-shadow: 0 0 0 4px rgba(43, 108, 255, .14) !important;
    outline: none !important;
}

/* ---- Equal-width fields (fixes password box rendering narrower than email) ----
   The password field is wrapped in .password-wrapper for the eye toggle; without
   an explicit width the wrapped input rendered narrower than the email field. */
.auth-form .form-group,
.auth-form .password-wrapper {
    width: 100%;
}

.auth-form .form-group input,
.auth-form .form-group select,
.auth-form .form-group textarea,
.auth-form .password-wrapper input,
.form-group input,
.form-group select,
.form-group textarea {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* The eye toggle sits inside the field; reserve space so text never overlaps it */
.auth-form .password-wrapper input { padding-right: 46px !important; }

/* ---- Consistent auth buttons: full width, equal size (Register == Login) ---- */
.auth-form .auth-submit-btn,
.auth-form button[type="submit"] {
    width: 100%;
    box-sizing: border-box;
}

/* =============================================================================
   7. ACCESSIBILITY — visible focus ring on keyboard navigation only
   ============================================================================= */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .btn:focus-visible,
.sidebar-link:focus-visible, .dropdown-item:focus-visible {
    outline: 3px solid var(--tath-gold) !important;
    outline-offset: 2px !important;
    border-radius: 6px;
}

/* =============================================================================
   8. SIDEBAR & NAV — smoother hover, animated underline + bilingual robustness
   -----------------------------------------------------------------------------
   French labels are ~30% longer than English ("CONTACTEZ-NOUS" vs "CONTACT US",
   "DEVENIR INSTRUCTEUR" vs "BECOME AN INSTRUCTOR"). Without these rules the nav
   links and logo wrapped onto two lines. We prevent wrapping and tighten spacing
   just enough so the bar stays on one clean line in BOTH languages.
   ============================================================================= */
.logo-text { white-space: nowrap; }

.nav-links a {
    white-space: nowrap;       /* never break a label mid-word */
}

@media (min-width: 993px) {
    .nav-content { gap: 20px; }
    .nav-links { gap: 18px; }
    .nav-links a { font-size: 13.5px; }
}

/* ---- Auth buttons (REGISTER / Login): identical box metrics so they align.
        Gold-filled vs outlined is kept as the primary/secondary distinction. ---- */
.nav-buttons .register-button,
.nav-buttons .login-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px !important;
    border-radius: 10px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    width: auto !important;
    box-sizing: border-box;
}

/* Outlined Login: crisper 1.5px border that matches the gold button's weight */
.nav-buttons .login-button {
    border-width: 1.5px !important;
}

.nav-buttons .register-button:hover { transform: translateY(-1px); }
.nav-buttons .login-button:hover { transform: translateY(-1px); }

/* Vertically centre the auth group + language switcher on one baseline */
.nav-buttons { align-items: center; }

/* ---- Stylish language switcher: sleek pill, aligned height, refined hover ---- */
.lang-dropdown-trigger {
    height: 44px;
    padding: 0 14px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .06) !important;
    border: 1.5px solid rgba(255, 255, 255, .18) !important;
    font-size: 13.5px !important;
    font-weight: 600;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-sizing: border-box;
}
.lang-dropdown-trigger:hover {
    border-color: var(--tath-gold) !important;
    background: rgba(252, 217, 128, .14) !important;
    color: var(--tath-gold) !important;
}
.lang-flag {
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.lang-caret { transition: transform .2s var(--tath-ease); }
.lang-dropdown.open .lang-caret,
#langDropdownMenu.show ~ * .lang-caret { transform: rotate(180deg); }

/* Polished language dropdown menu */
.lang-dropdown-menu {
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: var(--tath-shadow-lg) !important;
    border: 1px solid var(--tath-line) !important;
    padding: 6px !important;
}
.lang-dropdown-item {
    border-radius: 8px !important;
    font-weight: 600;
    gap: 8px;
}
.lang-dropdown-item:hover { background: var(--tath-bg) !important; }
.lang-dropdown-item.active { background: rgba(252, 217, 128, .18) !important; }

.sidebar-link:hover { transform: translateX(3px); }

.nav-links a { position: relative; }
.nav-links a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -4px;
    height: 2px; width: 0;
    background: var(--tath-gold);
    transition: width var(--tath-speed) var(--tath-ease);
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

/* =============================================================================
   9. LOGIN PORTAL ACCENTS — same layout, distinct accent per role
   ============================================================================= */
.auth-visual--instructor,
.auth-visual--manager {
    background: linear-gradient(155deg, #2563eb 0%, #1d4ed8 100%) !important;
}
.auth-visual--instructor .stat-badge i,
.auth-visual--manager .stat-badge i { color: var(--tath-gold); }

/* =============================================================================
   10. SECTION ALIGNMENT — consistent content width so boxes line up
        Fixes the register section being inset differently from others.
   ============================================================================= */
.registration {
    max-width: var(--tath-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =============================================================================
   11. EMPTY STATES & MISC POLISH
   ============================================================================= */
.empty-state, .admin-empty, .course-empty {
    border-radius: var(--tath-radius);
}

img { max-width: 100%; }

/* =============================================================================
   12. MODERN FOOTER — clean, aligned, contemporary (overrides legacy footer.css)
   ============================================================================= */
.main-footer {
    background: linear-gradient(180deg, #2563eb 0%, #1e3a8a 100%) !important;
    color: #c9cce6 !important;
    padding: 64px 24px 0 !important;
    border: none !important;
}

.main-footer .footer-content {
    max-width: 1240px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1.6fr 1fr 1.2fr 1fr !important;
    gap: 48px !important;
    align-items: start !important;
    text-align: left !important;
    padding: 0 0 48px !important;
}

@media (max-width: 900px) {
    .main-footer .footer-content {
        grid-template-columns: 1fr 1fr !important;
        gap: 36px !important;
    }
}
@media (max-width: 560px) {
    .main-footer .footer-content { grid-template-columns: 1fr !important; }
}

/* Branding column */
.main-footer .footer-logo-tagline {
    display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
}
.main-footer .footer-logo { width: 56px !important; height: 56px !important; }
.main-footer .footer-tagline {
    color: #fff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.15rem !important;
    margin: 0 !important;
}
.main-footer .footer-slogan,
.main-footer .footer-description {
    color: #9fa3c7 !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    margin: 0 0 10px !important;
}

/* Column headings */
.main-footer h3 {
    color: #fff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin: 0 0 18px !important;
    position: relative;
    padding-bottom: 10px;
}
.main-footer h3::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 32px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--tath-gold), var(--tath-gold-soft));
}

/* Link lists — clean, aligned, animated */
.main-footer ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.main-footer li { margin-bottom: 11px !important; }

/* Text-link columns (Quick Links + Legal): force links flush with their heading.
   The legacy markup left <li> as display:list-item which indented the text. */
.main-footer .footer-quick-links li,
.main-footer .footer-legal li { display: block !important; list-style: none !important; }
.main-footer .footer-quick-links li::marker,
.main-footer .footer-legal li::marker { content: '' !important; }
.main-footer .footer-quick-links a,
.main-footer .footer-legal a {
    display: block !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-indent: 0 !important;
}
/* Kill the leftover 16px-wide ::before bullet on the Legal links that pushed
   their text out of alignment with the heading. */
.main-footer .footer-quick-links a::before,
.main-footer .footer-legal a::before {
    content: none !important;
    display: none !important;
}
.main-footer .footer-content a {
    color: #b9bce0 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .2s var(--tath-ease), transform .2s var(--tath-ease) !important;
}
.main-footer .footer-quick-links a:hover,
.main-footer .footer-legal a:hover,
.main-footer .footer-contact a:hover {
    color: var(--tath-gold) !important;
    transform: translateX(3px);
}

/* Social icons — uniform circles with gold hover */
.main-footer .social-icons { display: flex !important; gap: 12px !important; margin-top: 18px !important; }
.main-footer .social-icon {
    width: 40px !important; height: 40px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    transition: all .22s var(--tath-ease) !important;
}
.main-footer .social-icon svg { width: 18px; height: 18px; fill: #fff; }
.main-footer .social-icon:hover {
    background: var(--tath-gold) !important;
    border-color: var(--tath-gold) !important;
    transform: translateY(-3px);
}
.main-footer .social-icon:hover svg { fill: #2563eb; }

/* Contact rows */
.main-footer .footer-contact p { margin: 0 0 12px !important; }
.main-footer .simple-icon, .main-footer .whatsapp-icon { width: 18px; height: 18px; color: var(--tath-gold) !important; }

/* Bottom bar */
.main-footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1) !important;
    background: transparent !important;
    padding: 0 !important;
}
.main-footer .footer-bottom-container {
    max-width: 1240px !important; margin: 0 auto !important;
    padding: 22px 0 !important; text-align: center !important;
}
.main-footer .copyright { color: #8c90b8 !important; font-size: 13px !important; margin: 0 !important; }

/* =============================================================================
   13. SCROLLBAR — subtle branded scrollbar (WebKit)
   ============================================================================= */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: #c7cad8;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--tath-navy-500);
    background-clip: content-box;
}

/* =============================================================================
   14. ACCESSIBILITY — skip link, focus, reduced colour-only meaning
   ============================================================================= */
.tath-skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100000;
    background: var(--tath-navy);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: top .2s ease;
}
.tath-skip-link:focus { top: 12px; outline: 3px solid var(--tath-gold); }

/* Stronger contrast for small gold text used on white (WCAG) */
.text-warning, .badge-soft-gold { color: #9a6b00 !important; }

/* Role badges: add a subtle left bar so meaning isn't colour-only */
.role-badge, .status-badge { position: relative; }

/* =============================================================================
   15. MOBILE RESPONSIVENESS — dashboards, tables, stat grids, chatbot
   ============================================================================= */
@media (max-width: 768px) {
    /* Any wide data table can scroll horizontally instead of overflowing */
    .admin-container table,
    .manager-container table,
    table.data-table,
    .users-table,
    .courses-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stat-card grids collapse to two columns on phones */
    .dashboard-stats,
    .course-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Chatbot button: smaller + tucked into the corner so it never covers CTAs */
    .chatbot-toggle {
        width: 52px !important;
        height: 52px !important;
        right: 14px !important;
        bottom: 14px !important;
    }

    /* Headings scale down a touch */
    .welcome-title { font-size: 22px !important; }
}

/* Tables inside any admin/manager card wrapper get a scroll affordance */
.table-responsive, .table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* =============================================================================
   16. DASHBOARD CARD POLISH — instructor catalogue thumbnails + role badges
   ============================================================================= */
/* Give the instructor catalogue 'book icon' a proper coloured thumbnail block */
.catalogue-card-icon,
.application-overview-card .catalogue-card-icon {
    background: linear-gradient(135deg, var(--tath-navy) 0%, var(--tath-navy-500) 100%) !important;
    color: #fff !important;
    border-radius: 12px !important;
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 14px rgba(28,30,83,.18);
}

/* Role/status badges: add a small leading dot so meaning isn't colour-only */
.role-badge::before,
.status-badge::before,
.sb-role-badge::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 6px;
    vertical-align: middle;
    opacity: .8;
}

/* Admin courses table: make an 'Unassigned' instructor stand out */
td .unassigned, .instructor-unassigned, em:where(.unassigned) {
    color: #e65100 !important;
    font-style: normal !important;
    font-weight: 600 !important;
}

/* =============================================================================
   17. PROFESSIONAL COMPONENT SYSTEM  (authoritative — overrides per-page styles)
   -----------------------------------------------------------------------------
   One consistent language for buttons, cards, inputs and badges across the
   ENTIRE platform. Tames the bright-blue overuse: blue is for ACTIONS only,
   surfaces stay white, text stays dark.
   ============================================================================= */

:root {
    --pro-primary:      #2563eb;
    --pro-primary-700:  #1d4ed8;
    --pro-ink:          #0f1b34;   /* professional dark for headings */
    --pro-text:         #344054;   /* body text */
    --pro-muted:        #667085;   /* secondary text */
    --pro-line:         #e4e7f0;   /* hairline borders */
    --pro-surface:      #ffffff;
    --pro-radius:       14px;
    --pro-radius-btn:   10px;
}

/* ---- PRIMARY BUTTONS — solid blue, white text, consistent everywhere ------- */
.btn-primary, .auth-submit-btn, .cta-button, .register-button,
.see-all-button, .catalogue-search-btn, .admin-action-btn--primary,
.btn-view-details, .btn-success-alt, button.btn-primary, a.btn-primary {
    background: var(--pro-primary) !important;
    color: #fff !important;
    border: 1px solid var(--pro-primary) !important;
    border-radius: var(--pro-radius-btn) !important;
    padding: 11px 20px !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    line-height: 1.2 !important;
    box-shadow: 0 1px 2px rgba(37, 99, 235, .18) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer;
}
.btn-primary:hover, .auth-submit-btn:hover, .cta-button:hover, .register-button:hover,
.see-all-button:hover, .catalogue-search-btn:hover, .btn-view-details:hover {
    background: var(--pro-primary-700) !important;
    border-color: var(--pro-primary-700) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(37, 99, 235, .26) !important;
}

/* ---- SECONDARY / OUTLINE BUTTONS — white with blue outline ----------------- */
.btn-secondary, .btn-outline, .login-button, .consultation-link,
.admin-action-btn:not(.admin-action-btn--primary), .workflow-link {
    background: #fff !important;
    color: var(--pro-primary) !important;
    border: 1.5px solid var(--pro-line) !important;
    border-radius: var(--pro-radius-btn) !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.btn-secondary:hover, .btn-outline:hover, .login-button:hover {
    border-color: var(--pro-primary) !important;
    background: #f5f8ff !important;
    transform: translateY(-1px);
}

/* ---- DANGER / WARNING buttons keep their semantic colour ------------------- */
.btn-warning { background:#f59e0b !important; border-color:#f59e0b !important; color:#1f2937 !important; }
.btn-danger, .card-top-delete-btn { background:#e11d48 !important; border-color:#e11d48 !important; color:#fff !important; }

/* ---- CARDS — one clean white surface everywhere --------------------------- */
.stat-card, .course-card, .catalogue-card, .catalogue-page-card,
.application-overview-card, .admin-chart-card, .admin-kpi-item,
.workflow-card, .dashboard-section, .course-stats, .admin-stats > *,
.testimonial-content, .faq-item, .blog-card, .post-card {
    background: var(--pro-surface) !important;
    border: none !important;
    border-radius: var(--pro-radius) !important;
    box-shadow: 0 1px 3px rgba(16,24,40,.05), 0 8px 22px rgba(16,24,40,.06) !important;
}
.stat-card:hover, .course-card:hover, .catalogue-card:hover,
.application-overview-card:hover, .workflow-card:hover, .blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(16,24,40,.10) !important;
    border-color: #d3d9ea !important;
}

/* Keep the deliberate coloured stat cards (admin primary/accent) as-is */
.admin-stat-card--primary { background: var(--pro-primary) !important; border-color: var(--pro-primary) !important; color:#fff !important; }
.admin-stat-card--accent  { background:#fff7ed !important; border-color:#fde7c8 !important; color:#7a3e00 !important; }
.admin-stat-card--alert   { background:#fef2f2 !important; border-color:#fbd5d0 !important; color:#8b1c12 !important; }

/* ---- TYPOGRAPHY HIERARCHY — headings dark (not bright blue) on light pages -- */
.dashboard-main h1, .dashboard-main h2, .dashboard-main h3,
.dashboard-section h2, .section-title, .courses-heading, .faq-heading,
.admin-body h2:not(.admin-hero-title), .stat-card h3, .workflow-card h3,
.course-title, .catalogue-card-title, .blog-title {
    color: var(--pro-ink) !important;
}
/* Stat numbers: confident dark, not garish blue */
.stat-number, .admin-stat-card:not([class*="--"]) .admin-stat-value,
.admin-kpi-value, .workflow-count {
    color: var(--pro-ink) !important;
}

/* ---- INPUTS — consistent, calm focus -------------------------------------- */
.auth-form input:not([type=checkbox]):not([type=radio]),
.form-group input, .form-input, .form-select, select, textarea {
    border: 1.5px solid var(--pro-line) !important;
    border-radius: var(--pro-radius-btn) !important;
}

/* ---- BADGES — tidy pills -------------------------------------------------- */
.status-badge, .role-badge, .course-tag, .sb-role-badge {
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

/* Coloured stat cards keep readable light/dark text (fix contrast on the blue card) */
.admin-stat-card--primary,
.admin-stat-card--primary .admin-stat-title,
.admin-stat-card--primary .admin-stat-value,
.admin-stat-card--primary .admin-stat-meta,
.admin-stat-card--primary .stat-number,
.admin-stat-card--primary .stat-label { color: #ffffff !important; }
.admin-stat-card--accent .admin-stat-title,
.admin-stat-card--accent .admin-stat-value,
.admin-stat-card--accent .admin-stat-meta { color: #7a3e00 !important; }
.admin-stat-card--alert .admin-stat-title,
.admin-stat-card--alert .admin-stat-value,
.admin-stat-card--alert .admin-stat-meta { color: #8b1c12 !important; }

/* =============================================================================
   18. FOOTER — flat full-width band (no rounded "card" corners) on every page
   ============================================================================= */
.main-footer {
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.main-footer .footer-bottom { border-radius: 0 !important; }

/* =============================================================================
   19. BIG BANNERS / SECTION BOXES — flat (no rounded "box" corners).
        Cards, buttons and inputs keep their gentle rounding.
   ============================================================================= */
.welcome-section,
.admin-hero,
.dashboard-hero,
.courses-hero,
.page-hero,
.page-hero-section,
.breadcrumb-section,
.hero-banner,
.section-banner,
.cta-banner,
.registration {
    border-radius: 0 !important;
}

/* =============================================================================
   20. BORDERLESS POLISH — remove decorative borders platform-wide.
        Keep ONLY: form controls, subtle table row separators, active chips.
   ============================================================================= */
.dashboard-section, .section-header, .course-card, .course-card-body, .course-card-main,
.catalogue-card, .catalogue-card-body, .catalogue-page-card, .application-overview-card,
.workflow-card, .admin-stat-card, .admin-kpi-item, .admin-chart-card, .admin-chart-card__header,
.stat-card, .course-stats, .course-meta, .course-footer, .course-content,
.welcome-section, .admin-hero, .blog-card, .post-card, .faq-item, .faq-question,
.instructor-hover-card, .sb-profile, .dashboard-main, .dashboard-content,
.profile-card, .settings-card, .notification-item, .notification-card,
.review-board-card, .material-card, .lesson-card, .assessment-card,
.cta-card, .info-card, .panel, .content-card, .data-card {
    border: none !important;
}

/* Tables: drop heavy grid borders, keep a faint row separator only */
.dashboard-container table, .admin-shell table, table.data-table,
.users-table, .courses-table {
    border: none !important;
}
.dashboard-container table th, .dashboard-container table td,
.admin-shell table th, .admin-shell table td {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid #f1f3f9 !important;
}

/* Footer divider above copyright: barely-there */
.main-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.10) !important; }

/* Keep form controls usable (re-assert) */
input:not([type=checkbox]):not([type=radio]), select, textarea,
.form-input, .form-select {
    border: 1.5px solid #e4e7f0 !important;
}

/* =============================================================================
   21. ADMIN SIDEBAR — clean white treatment (consistent with other portals,
        removes the heavy navbar+sidebar blue, no borders, no scrollbar line)
   ============================================================================= */
.admin-sidebar {
    background: #ffffff !important;
    color: #334155 !important;
    border: none !important;
    box-shadow: 4px 0 24px rgba(16, 24, 40, .05) !important;
    scrollbar-width: none;            /* Firefox */
}
.admin-sidebar::-webkit-scrollbar { width: 0 !important; height: 0 !important; }

.admin-sidebar-brand {
    background: #f4f6fc !important;
    border: none !important;
}
.admin-badge       { color: #2563eb !important; }
.admin-brand-title { color: #1e293b !important; }

.admin-nav-link    { color: #475569 !important; }
.admin-nav-link i  { color: #94a3b8 !important; }
.admin-nav-link:hover   { background: #eef2ff !important; color: #1d4ed8 !important; }
.admin-nav-link:hover i { color: #1d4ed8 !important; }
.admin-nav-link.active  { background: #2563eb !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(37,99,235,.28); }
.admin-nav-link.active i{ color: #ffffff !important; }
.admin-nav-link--ghost  { background: #f4f6fc !important; color: #475569 !important; }

.admin-sidebar-footer { border-top: 1px solid #eef1f7 !important; }

/* No seam/border between navbar, sidebar and content */
.admin-shell, .admin-body, .admin-sidebar { border-right: none !important; }

/* =============================================================================
   22. REMOVE PAGE FRAME — the legacy body { padding:20px } created a grey
        border/space around every page. Make all pages full-bleed.
   ============================================================================= */
body { padding: 0 !important; margin: 0 !important; }
.admin-shell, .dashboard-container { margin: 0 !important; }

/* =============================================================================
   23. ADMIN PAGE HEADER — clean white card (was a heavy blue banner)
   ============================================================================= */
.admin-hero {
    background: #ffffff !important;
    color: #0f1b34 !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(16,24,40,.05), 0 10px 26px rgba(16,24,40,.05) !important;
    padding: 24px 28px !important;
}
.admin-hero-eyebrow {
    color: #2563eb !important;
    letter-spacing: .16em !important;
}
.admin-hero-title    { color: #0f1b34 !important; }
.admin-hero-subtitle { color: #667085 !important; }

/* Profile chip — quiet, clean */
.admin-hero-profile {
    background: #f5f7fc !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 10px 14px !important;
}
.admin-hero-avatar { border: 2px solid #e4e7f0 !important; }
.admin-hero-name   { color: #0f1b34 !important; }
.admin-hero-email  { color: #667085 !important; }

/* Logout — solid blue button */
.admin-logout-btn {
    background: #2563eb !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 6px rgba(37,99,235,.25) !important;
}
.admin-logout-btn:hover { background: #1d4ed8 !important; }

/* =============================================================================
   24. NAVBAR CLEARANCE — keep portal headings below the fixed top bar
   The top navigation is position:fixed and ~110px tall. On desktop every
   portal content wrapper (.dashboard-container is shared by learner,
   instructor and manager pages) needs matching top padding so the welcome
   heading / page title is never hidden behind the navbar. This loads last on
   every page, so it keeps all three portals consistent. Mobile keeps each
   page's own responsive values (handled below their max-width breakpoints).
   ============================================================================= */
@media (min-width: 993px) {
    .dashboard-container {
        padding-top: 124px !important;
    }
}

/* =============================================================================
   25. PORTAL SIDEBARS — match the clean white admin sidebar everywhere
   Learner, instructor and manager all share .dashboard-sidebar + .sidebar-link,
   so this makes them identical to the admin sidebar (section 21): a white panel
   with no seam border, slate labels, gray icons, light-indigo hover, and a
   SOLID BLUE rounded "pill" for the active item with a white icon — no
   gradient, no gold icon, no left-accent rail.
   ============================================================================= */
.dashboard-sidebar {
    background: #ffffff !important;
    border: none !important;
    border-right: none !important;
    box-shadow: 4px 0 24px rgba(16, 24, 40, .05) !important;
    scrollbar-width: none;                 /* Firefox */
}
.dashboard-sidebar::-webkit-scrollbar { width: 0 !important; height: 0 !important; }

/* Nav links — resting state */
.sidebar-link {
    color: #475569 !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    border-left: 0 !important;             /* remove learner's 3px accent rail */
}
.sidebar-link i { color: #94a3b8 !important; }   /* also covers learner .sb-icon i */

/* Hover */
.sidebar-link:hover {
    background: #eef2ff !important;
    color: #1d4ed8 !important;
    transform: none !important;            /* drop the slide; admin stays still */
}
.sidebar-link:hover i { color: #1d4ed8 !important; }

/* Active — solid blue pill, white label + icon, soft shadow */
.sidebar-link.active,
.sidebar-link.active:hover {
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .28) !important;
    border-left-color: transparent !important;
}
.sidebar-link.active i { color: #ffffff !important; opacity: 1 !important; }

/* Learner profile chip + role badge + dividers — calm, on-brand blue */
.sb-profile    { background: #f8fafc !important; border-bottom-color: #eef1f7 !important; }
.sb-role-badge { color: #2563eb !important; background: #eff4ff !important; border-color: #dbe6ff !important; }
.sb-divider    { background: #eef1f7 !important; }

/* =============================================================================
   26. LEARNER CONTENT PANELS — seamless, no boxed-off sections
   The user doesn't want each section to read as a bordered "box". A white card
   on the grey page still shows its edge + shadow as a border, so we drop the
   box entirely: the sections become transparent (no background, no border, no
   shadow, no radius) and the content flows on one continuous, coherent surface.
   Inner list rows use a soft fill instead of a border so nothing is outlined.
   ============================================================================= */
.dashboard-section {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 6px 2px 20px !important;
}

/* Compact empty state — calm and centered, no giant empty box */
.empty-state        { padding: 24px 20px !important; }
.empty-state i      { font-size: 40px !important; margin-bottom: 12px !important; }
.empty-state h3     { font-size: 17px !important; }

/* Inner list rows (courses / activity) — soft fill, never an outline */
.dashboard-section article {
    border: none !important;
    box-shadow: none !important;
    background: #f6f8fc !important;
}

/* =============================================================================
   27. INSTRUCTOR REGISTER — readable approval checklist
   The checklist was wrapped in a submit <button> and carried an invalid inline
   <style> inside the <ul> plus conflicting inline styles (all fixed in the
   blade). It's now clean semantic markup styled entirely here: a calm surface,
   dark text, blue checkboxes, each item a left-aligned [checkbox][label] row
   where the label takes the remaining width (no squished right column).
   ============================================================================= */
.approval-checklist {
    background: #f6f8fc !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 20px 22px !important;
    margin-bottom: 1.5rem !important;
    text-align: left !important;
}
.approval-checklist-title {
    display: block !important;
    color: #1e293b !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 0 14px !important;
    text-align: left !important;
}
.approval-checklist .req-star { color: #e74c3c !important; }
.approval-checklist-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}
.approval-checklist-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
    text-align: left !important;
}
.approval-checklist-item label {
    flex: 1 1 auto !important;
    margin: 0 !important;
    color: #334155 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
}
.approval-checkbox {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    margin: 2px 0 0 !important;
    accent-color: #2563eb !important;
    cursor: pointer !important;
}
.approval-checklist-note {
    display: block !important;
    margin-top: 10px !important;
    color: #e74c3c !important;
    font-size: 13px !important;
}