@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;600;700&family=Poppins:wght@300;400;500;600;700&family=Cairo:wght@300;400;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════
   SMS – Design Token System (roaa.tech brand)
   Single theme + dark mode. Components reference --sms-* tokens.
   ═══════════════════════════════════════════════════════════════ */

/* ── Email field validation ───────────────────────────────────── */
input[type="email"]:not(:placeholder-shown):not(:focus):invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
}
input[type="email"]:not(:placeholder-shown):not(:focus):invalid ~ .invalid-feedback,
input[type="email"]:not(:placeholder-shown):not(:focus):invalid ~ .form-text.text-danger {
    display: block;
}

/* ── Currency input ───────────────────────────────────────────── */
input.currency-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Default tokens (roaa.tech brand) ────────────────────── */
:root {
    /* Sidebar */
    --sms-sidebar-bg:      #006680;
    --sms-sidebar-text:    #d4e8ef;
    --sms-nav-group:       #7ab8cc;

    /* Accent (active/hover, top bar border) */
    --sms-accent:          #D29628;
    --sms-accent-text:     #fff;

    /* Primary */
    --sms-primary:         #006680;
    --sms-primary-dark:    #005266;
    --sms-primary-rgb:     0,102,128;

    /* Body */
    --sms-body-bg:         #f5f7f6;
    --sms-topbar-bg:       #fff;
}

/* ── Global Bootstrap primary override ────────────────────── */
.btn-primary {
    --bs-btn-bg: #006680;
    --bs-btn-border-color: #006680;
    --bs-btn-hover-bg: #005266;
    --bs-btn-hover-border-color: #004d5e;
    --bs-btn-active-bg: #004d5e;
    --bs-btn-active-border-color: #004555;
}
.btn-outline-primary {
    --bs-btn-color: #006680;
    --bs-btn-border-color: #006680;
    --bs-btn-hover-bg: #006680;
    --bs-btn-hover-border-color: #006680;
    --bs-btn-active-bg: #005266;
}
a { color: #006680; }
a:hover { color: #005266; }

/* ── Role-based color themes ────────────────────────────── */
.theme-admin    { --bs-primary: var(--sms-primary); --bs-primary-rgb: var(--sms-primary-rgb); }
.theme-teacher  { --bs-primary: #1a5276; --bs-primary-rgb: 26,82,118; }
.theme-student  { --bs-primary: #0284c7; --bs-primary-rgb: 2,132,199; }
.theme-parent   { --bs-primary: #d97706; --bs-primary-rgb: 217,119,6; }

/* ═══════════════════════════════════════════════════════════
   GLOBAL FONT
   ═══════════════════════════════════════════════════════════ */

body {
    font-family: 'Poppins', 'Cairo', 'Noto Sans Arabic', sans-serif;
}

/* ═══════════════════════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════════════════════ */

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
    width: 240px;
    min-width: 240px;
    height: 100vh;
    position: sticky;
    top: 0;
    background: var(--sms-sidebar-bg);
    color: var(--sms-sidebar-text);
    flex-shrink: 0;
}

@media (min-width: 1400px) {
    .sidebar { width: 260px; min-width: 260px; }
}

@media (min-width: 1600px) {
    .sidebar { width: 280px; min-width: 280px; }
}

.sidebar ul.nav {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar .nav-link {
    color: var(--sms-sidebar-text);
    padding: .5rem 1.25rem;
    border-radius: .375rem;
    margin: 2px 8px;
    transition: all .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    color: var(--sms-accent-text);
    background: var(--sms-accent);
    font-weight: 600;
}

.sidebar .nav-link i { width: 1.25rem; }

/* ── Sidebar Logo ────────────────────────────────────────── */
.sidebar-logo {
    display: block;
    background: rgba(255,255,255,.12);
    border-radius: .5rem;
    padding: 6px 10px;
    text-align: center;
    text-decoration: none;
    backdrop-filter: blur(4px);
}

.sidebar-logo img {
    max-width: 100%;
    height: 44px;
    object-fit: contain;
}

/* ── Main content area ───────────────────────────────────── */
.main-content {
    flex: 1;
    overflow-y: auto;
    background: var(--sms-body-bg);
}

/* ── Top bar ─────────────────────────────────────────────── */
.top-bar {
    background: var(--sms-topbar-bg, #fff);
    border-bottom: 3px solid var(--sms-accent);
    height: 56px;
}

/* ── Stat cards ──────────────────────────────────────────── */
.stat-card {
    border: none;
    border-radius: .75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.07);
}

a.stat-card-link {
    transition: box-shadow .15s, transform .15s;
    cursor: pointer;
}

a.stat-card-link:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.13);
    transform: translateY(-2px);
    text-decoration: none;
}

/* ── Attendance badges ───────────────────────────────────── */
.badge-PRESENT  { background: #dcfce7; color: #166534; }
.badge-ABSENT   { background: #fee2e2; color: #991b1b; }
.badge-LATE     { background: #fef9c3; color: #854d0e; }
.badge-EXCUSED  { background: #dbeafe; color: #1e40af; }

/* ── Bootstrap primary override ─────────────────────────── */
.btn-primary {
    background-color: var(--sms-primary);
    border-color: var(--sms-primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--sms-primary-dark);
    border-color: var(--sms-primary-dark);
    color: #fff;
}
.btn-outline-primary {
    color: var(--sms-primary);
    border-color: var(--sms-primary);
}
.btn-outline-primary:hover {
    background-color: var(--sms-primary);
    border-color: var(--sms-primary);
    color: #fff;
}

/* ── Accent (gold) button ────────────────────────────────── */
.btn-gold {
    background-color: var(--sms-accent);
    border-color: var(--sms-accent);
    color: var(--sms-accent-text);
    font-weight: 600;
}
.btn-gold:hover {
    filter: brightness(.92);
    color: var(--sms-accent-text);
}

/* ── Nav Groups ──────────────────────────────────────────── */
.nav-group-btn {
    color: var(--sms-nav-group);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.55rem 1.25rem 0.2rem;
    margin-top: 0.35rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
}
.nav-group-btn:hover { color: var(--sms-sidebar-text); filter: brightness(1.2); }

.nav-link.nav-sub { padding-left: 2.1rem; font-size: 0.875rem; }

.nav-chevron {
    margin-left: auto;
    font-size: 0.65rem;
    transition: transform 0.18s ease;
}
.nav-chevron.open { transform: rotate(90deg); }

#blazor-error-ui { display: none; }

/* ═══════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] {
    --sms-body-bg:    #0f1a1e;
    --sms-topbar-bg:  #142328;
}

[data-bs-theme="dark"] .sidebar {
    background: #0a2e38;
    color: #b0d0dc;
}
[data-bs-theme="dark"] .sidebar .nav-link {
    color: #b0d0dc;
}
[data-bs-theme="dark"] .sidebar .nav-link:hover,
[data-bs-theme="dark"] .sidebar .nav-link.active {
    color: var(--sms-accent-text);
    background: var(--sms-accent);
}
[data-bs-theme="dark"] .nav-group-btn {
    color: var(--sms-nav-group);
    opacity: .7;
}
[data-bs-theme="dark"] .nav-group-btn:hover {
    opacity: 1;
}
[data-bs-theme="dark"] .main-content {
    background: var(--sms-body-bg);
}
[data-bs-theme="dark"] .top-bar {
    background: var(--sms-topbar-bg);
    border-bottom-color: var(--sms-accent);
}
[data-bs-theme="dark"] .sidebar-logo {
    background: rgba(255,255,255,.07);
}
[data-bs-theme="dark"] .stat-card {
    background: #1e2a3e;
    border: 1px solid #2d3a52;
}

/* ── Dark mode theme toggle (top bar) ────────────────────── */
.theme-toggle {
    background: none;
    border: 1px solid rgba(128,128,128,.3);
    color: inherit;
    border-radius: .375rem;
    padding: .25rem .5rem;
    cursor: pointer;
    font-size: .875rem;
    line-height: 1;
    transition: all .15s;
}
.theme-toggle:hover {
    background: rgba(128,128,128,.15);
}

/* ═══════════════════════════════════════════════════════════
   RTL SUPPORT
   ═══════════════════════════════════════════════════════════ */

[dir="rtl"] .nav-group-btn {
    text-align: right;
    padding-right: 1.25rem;
    padding-left: .6rem;
}
[dir="rtl"] .nav-link.nav-sub {
    padding-right: 2.1rem;
    padding-left: 1.25rem;
}
[dir="rtl"] .nav-chevron {
    margin-right: auto;
    margin-left: 0;
    transform: scaleX(-1);
}
[dir="rtl"] .nav-chevron.open {
    transform: rotate(-90deg);
}
[dir="rtl"] .sidebar .nav-link i,
[dir="rtl"] .nav-group-btn i {
    opacity: .95;
    width: 1.35rem;
}

/* ═══════════════════════════════════════════════════════════
   AI CHAT COMPONENTS
   ═══════════════════════════════════════════════════════════ */

.chat-bubble-row { display: flex; align-items: flex-end; }
.chat-bubble-row.user { flex-direction: row-reverse; }
.chat-bubble-row.user .chat-bubble { margin-right: 0; }
.chat-avatar { flex-shrink: 0; }
.chat-bubble {
    max-width: 70%;
    padding: .6rem 1rem;
    border-radius: 1rem;
    line-height: 1.5;
    word-break: break-word;
}
.bubble-user {
    background: var(--sms-primary);
    color: #fff;
    border-bottom-right-radius: .25rem;
}
.bubble-assistant {
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-bottom-left-radius: .25rem;
}
.chat-time { font-size: .7rem; margin-top: .25rem; opacity: .7; }

/* Typing animation */
.typing-dots { display: inline-flex; gap: 4px; align-items: center; height: 1.2em; }
.typing-dots span {
    display: inline-block; width: 7px; height: 7px;
    border-radius: 50%; background: var(--bs-secondary-color);
    animation: typingBounce 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30%           { transform: translateY(-6px); }
}

/* Floating AI Chat Widget */
.chat-fab {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1050;
    width: 52px; height: 52px; border-radius: 50%; border: none;
    background: var(--sms-primary); color: #fff; font-size: 1.3rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.chat-fab:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,.3); }

.chat-widget-panel {
    position: fixed; bottom: 5rem; right: 1.5rem; z-index: 1049;
    width: 360px; height: 480px; border-radius: 12px;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
    display: flex; flex-direction: column; overflow: hidden;
}
.chat-widget-header { background: var(--sms-primary); color: #fff; flex-shrink: 0; }
.chat-widget-messages { flex: 1 1 0; min-height: 0; }
.chat-widget-input { flex-shrink: 0; background: var(--bs-body-bg); }

@media (max-width: 480px) {
    .chat-widget-panel { width: calc(100vw - 2rem); right: 1rem; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .sidebar {
        position: fixed; top: 0; left: -280px;
        width: 270px; min-width: 270px;
        height: 100vh; z-index: 1050;
        transition: left 0.25s ease; overflow-y: auto;
    }
    [dir="rtl"] .sidebar { left: auto; right: -280px; transition: right 0.25s ease; }
    .sidebar.sidebar-mobile-open { left: 0; }
    [dir="rtl"] .sidebar.sidebar-mobile-open { left: auto; right: 0; }
    .sidebar-overlay {
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.45); z-index: 1049;
    }
    .main-content { width: 100%; }
    .top-bar { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
    .p-4 { padding: 1rem !important; }
}

/* ── Calendar (timetable-inspired design) ─────────────────────────────── */
.cal-grid-wrapper {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
}
.cal-week-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--bs-primary);
}
.cal-header-cell {
    color: #fff;
    font-weight: 600;
    font-size: .75rem;
    text-align: center;
    padding: 0.55rem 0.1rem;
    border-left: 1px solid rgba(255,255,255,.2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-header-cell:first-child { border-left: none; }
.cal-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.cal-cell {
    min-height: 88px;
    padding: 5px;
    border-right: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
    cursor: pointer;
    transition: background .12s;
    vertical-align: top;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:last-child, .cal-cell:nth-last-child(-n+7) { border-bottom: none; }
.cal-cell:hover { background: rgba(13,110,253,.05); }
.cal-cell.cal-selected { background: rgba(13,110,253,.1) !important; }
.cal-cell.cal-other-month { opacity: 0.42; }
.cal-day-num {
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 4px;
}
.cal-today-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--bs-primary);
    color: #fff;
    border-radius: 50%;
    font-size: .74rem;
    font-weight: 700;
}
.cal-event-chip {
    font-size: .67rem;
    padding: 1px 5px;
    border-radius: 3px;
    color: #fff;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
}
.cal-more { font-size: .64rem; color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .cal-cell:hover { background: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .cal-cell.cal-selected { background: rgba(255,255,255,.09) !important; }