/* =============================================================================
   Calm theme — data-theme="calm"
   -----------------------------------------------------------------------------
   For people who use the system a few times a semester: one main colour (deep
   navy) for what can be clicked and what is current; everything else white
   and grey. Status colours only in small soft pills, dots and icons — never
   a coloured card edge, a coloured button or a coloured background block.
   Loaded after style.css; every rule is scoped to [data-theme="calm"].
   ============================================================================= */

/* html[…] outranks Bootstrap's :root, which print pages load again after this file. */
html[data-theme="calm"] {
    --primary: #1f1d84;          /* white on it: 12.6:1 */
    --primary-light: #3b39a8;
    --primary-dark: #17166a;
    --primary-50: #eef0fb;
    --primary-100: #dde0f6;
    --primary-rgb: 31, 29, 132;

    --accent: #1f1d84;
    --accent-light: #3b39a8;
    --accent-dark: #17166a;
    --accent-strong: #1f1d84;
    --accent-50: #eef0fb;
    --accent-rgb: 31, 29, 132;

    /* A light grey page so the white cards stand apart; soft but visible borders. */
    --bg-body: #eef1f6;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-sidebar-hover: #f0f2f7;
    --sidebar-text: #1d2939;
    --sidebar-active: #1f1d84;
    --sidebar-border: #dfe3ea;

    --text-primary: #101828;
    --text-secondary: #344054;
    --text-muted: #475467;      /* 7.6:1 on white */
    --border: #d9dee7;

    --success: #15803d; --success-light: #ecfdf3;
    --warning: #b45309; --warning-light: #fffaeb;
    --danger:  #b42318; --danger-light:  #fef3f2;
    --info:    #1f1d84; --info-light:    #eef0fb;

    --shadow: 0 1px 2px rgb(16 24 40 / 0.05);
    --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.05);
    --shadow-md: 0 1px 3px rgb(16 24 40 / 0.08);
    --shadow-lg: 0 4px 12px -2px rgb(16 24 40 / 0.10);
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 16px;

    --login-gradient: linear-gradient(160deg, #e4e7f6 0%, #eef1f6 60%);
    --header-gradient: var(--primary);

    /* Bootstrap bridge (as in style.css for the other themes) */
    --bs-primary: var(--primary);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-link-color: var(--primary);
    --bs-link-hover-color: var(--primary-dark);
    --bs-link-color-rgb: var(--primary-rgb);
    --bs-link-hover-color-rgb: var(--primary-rgb);
    --bs-primary-bg-subtle: var(--primary-50);
    --bs-primary-border-subtle: var(--primary-100);
    --bs-primary-text-emphasis: var(--primary-dark);
    --bs-focus-ring-color: rgba(var(--primary-rgb), .2);
    --bs-info: #1f1d84;
    --bs-info-rgb: 31, 29, 132;
    --bs-info-bg-subtle: #eef0fb;
    --bs-info-border-subtle: #dde0f6;
    --bs-info-text-emphasis: #17166a;
    --bs-secondary: #555e68;
    --bs-secondary-rgb: 85, 94, 104;
    --bs-danger: #b42318;
    --bs-danger-rgb: 180, 35, 24;
    --bs-code-color: #a61e4d;
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-body-bg: #eef1f6;
    --bs-body-color: #101828;
    --bs-secondary-color: #475467;   /* Bootstrap's .text-muted / .form-text */
    --bs-border-color: #d9dee7;
}

/* ── Type: Cairo — large, open Arabic letters; nothing everyday below ~14.5px ── */
[data-theme="calm"] body { font-family: 'Cairo', 'Tajawal', sans-serif; letter-spacing: 0; line-height: 1.7; }
[data-theme="calm"] body.ltr { font-family: 'Inter', 'Cairo', sans-serif; }
[data-theme="calm"] .btn { font-size: .95rem; }
[data-theme="calm"] .btn-sm { font-size: .875rem; }
[data-theme="calm"] .form-label { font-weight: 600; color: var(--text-secondary); }
[data-theme="calm"] .text-muted { color: var(--text-muted) !important; }
[data-theme="calm"] .page-title { font-size: 1.75rem; font-weight: 700; }
[data-theme="calm"] .page-header { margin-bottom: 28px; }
[data-theme="calm"] .page-header .text-muted,
[data-theme="calm"] .page-subtitle { color: var(--text-secondary) !important; font-size: .95rem; }
[data-theme="calm"] h2, [data-theme="calm"] .h2,
[data-theme="calm"] h5 { font-weight: 700; }

/* ── Sidebar: white, grey line icons, the current page a solid navy pill ── */
[data-theme="calm"] .sidebar { border-inline-end: 1px solid var(--border); box-shadow: none; }
[data-theme="calm"] .sidebar-header,
[data-theme="calm"] .sidebar-footer { border-color: var(--border); }
[data-theme="calm"] .logo { color: var(--text-primary); }
[data-theme="calm"] .logo i {
    width: 40px; height: 40px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; background: var(--primary); color: #fff; font-size: 1.15rem;
}
[data-theme="calm"] .nav-section-title { color: var(--text-muted); font-weight: 600; font-size: .85rem; letter-spacing: 0; text-transform: none; }
[data-theme="calm"] .nav-link-item { padding: 11px 14px; border-radius: 12px; font-size: .95rem; color: var(--sidebar-text); }
[data-theme="calm"] .nav-link-item i { color: #475467; }
[data-theme="calm"] .nav-link-item:hover { background: var(--bg-sidebar-hover); color: var(--text-primary); }
[data-theme="calm"] .nav-link-item.active {
    background: var(--primary); color: #fff; font-weight: 600; box-shadow: none;
}
[data-theme="calm"] .nav-link-item.active i,
[data-theme="calm"] .nav-link-item.active .nav-link-desc { color: #fff; opacity: .9; }
[data-theme="calm"] .nav-link-desc { opacity: 1; color: var(--text-muted); }
[data-theme="calm"] .nav-link-docs { background: transparent; border-inline-end: 0; }
[data-theme="calm"] .nav-link-docs .nav-docs-badge { background: #f2f4f7; color: var(--text-secondary); }
[data-theme="calm"] .user-name { color: var(--text-primary); }
[data-theme="calm"] .user-role { color: var(--text-secondary); font-size: .85rem; }
[data-theme="calm"] .user-avatar { background: var(--primary-50); color: var(--primary); font-weight: 700; }
[data-theme="calm"] .sidebar-toggle,
[data-theme="calm"] .btn-icon:hover,
[data-theme="calm"] .theme-switcher-toggle:hover { color: var(--text-primary); }
/* the assessment-mode pill above the menu */
[data-theme="calm"] .sidebar .badge,
[data-theme="calm"] .mode-chip { box-shadow: none; }

/* ── Top bar ── */
[data-theme="calm"] .top-bar { background: var(--bg-card); border-top: 0; border-bottom: 1px solid var(--border); box-shadow: none; }

/* ── Cards: white on the grey page, a soft visible border and a faint shadow, no lift ── */
[data-theme="calm"] .card,
[data-theme="calm"] .card:hover { border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); }
[data-theme="calm"] .card,
[data-theme="calm"] .stat-card,
[data-theme="calm"] .section-card { animation: none; }
[data-theme="calm"] .card-header { background: transparent; padding: 18px 22px; border-bottom-color: #e4e8ee; }
[data-theme="calm"] .card-header h5, [data-theme="calm"] .card-header h4 { font-size: 1.1rem; }

/* KPI cards: a small grey label above one large number (the icon recedes) */
[data-theme="calm"] .stat-card {
    border-radius: var(--radius-lg); border: 1px solid var(--border) !important;
    padding: 20px 22px; align-items: flex-start; box-shadow: var(--shadow-sm);
}
[data-theme="calm"] .stat-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: #c5ccd8 !important; }
[data-theme="calm"] .stat-info { display: flex; flex-direction: column-reverse; gap: 6px; }
[data-theme="calm"] .stat-label { font-size: .92rem; font-weight: 500; color: var(--text-secondary); margin: 0; }
[data-theme="calm"] .stat-value { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--text-primary); }
[data-theme="calm"] .stat-icon,
[data-theme="calm"] .stat-icon.purple, [data-theme="calm"] .stat-icon.green, [data-theme="calm"] .stat-icon.blue,
[data-theme="calm"] .stat-icon.orange, [data-theme="calm"] .stat-icon.red {
    width: 38px; height: 38px; border-radius: 10px; font-size: 1.05rem;
    background: #eef1f6; color: #475467;
}

/* ── Instructor: section cards ── */
[data-theme="calm"] .section-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); }
[data-theme="calm"] .section-card:hover { transform: none; box-shadow: var(--shadow-md); border-color: var(--primary-100); background: #fcfcff; }
[data-theme="calm"] .section-card .course-code {
    background: #eef1f6; color: #344054; border: 0;
    font-weight: 600; font-size: .85rem; padding: 3px 10px; border-radius: 999px;
}
[data-theme="calm"] .section-card .course-name { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
[data-theme="calm"] .section-card .meta { color: var(--text-muted); font-size: .92rem; }

/* ── Head / dean: "needs my attention" — tone in the icon, not in a thick edge ── */
[data-theme="calm"] .att-panel { border: 1px solid var(--border); box-shadow: var(--shadow-sm); padding: 20px 22px; }
[data-theme="calm"] .att-title { color: var(--text-primary); font-size: 1.1rem; }
[data-theme="calm"] .att-title i { color: var(--text-muted); }
[data-theme="calm"] .att-item {
    background: var(--bg-card); border: 1px solid var(--border); border-inline-start: 1px solid var(--border);
    border-radius: 12px; padding: 12px 14px;
}
[data-theme="calm"] .att-item:hover { background: #fcfcff; border-color: var(--primary-100); }
[data-theme="calm"] .att-icon {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--att-tone) 10%, #fff); color: var(--att-tone);
}
[data-theme="calm"] .att-item.tone-danger  { --att-tone: #b42318; }
[data-theme="calm"] .att-item.tone-warning { --att-tone: #b45309; }
[data-theme="calm"] .att-item.tone-info    { --att-tone: #1f1d84; }
[data-theme="calm"] .att-item.tone-muted   { --att-tone: #667085; }
[data-theme="calm"] .att-count { font-weight: 700; font-size: 1.1rem; color: var(--text-primary); }
[data-theme="calm"] .att-label { color: var(--text-secondary); }
[data-theme="calm"] .att-go { color: #98a2b3; }

/* ── Section page: the status panel is a white card; the tone is in the icon and chip ── */
[data-theme="calm"] .sec-status {
    background: var(--bg-card); border: 1px solid var(--border); border-inline-start: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-sm);
}
[data-theme="calm"] .sec-status-title { color: var(--text-primary); font-size: 1.15rem; }
[data-theme="calm"] .sec-status-title i { color: var(--tone-border); }
[data-theme="calm"] .sec-status-hint { color: var(--text-secondary); opacity: 1; }
[data-theme="calm"] .sec-stage-chip { background: color-mix(in srgb, var(--tone-border) 9%, #fff); border: 0; color: var(--tone-text); }
[data-theme="calm"] .sec-status .btn-sec-go,
[data-theme="calm"] .sec-status.tone-warning .btn-sec-go,
[data-theme="calm"] .sec-status .btn-sec-go:hover { background: var(--primary); color: #fff; filter: none; border-radius: 10px; }
[data-theme="calm"] .sec-status .btn-sec-go:hover { background: var(--primary-dark); }
[data-theme="calm"] .sec-status-progress .progress { background: #eef0f4; }
[data-theme="calm"] .sec-status-progress .progress-bar { background: var(--primary); }
[data-theme="calm"] .sec-status-progress .sec-steps-count { color: var(--text-primary); }
[data-theme="calm"] .sec-status.tone-warning { --tone-border: #b45309; --tone-text: #93370d; }
[data-theme="calm"] .sec-status.tone-success { --tone-border: #15803d; --tone-text: #085d3a; }
[data-theme="calm"] .sec-status.tone-info    { --tone-border: #1f1d84; --tone-text: #17166a; }
[data-theme="calm"] .sec-advisory { border-radius: 12px; }

/* Section tabs: a quiet segmented control */
[data-theme="calm"] .nav-tabs.sec-tabs { box-shadow: none; padding: 5px; gap: 4px; background: #e4e8ef; border-color: transparent; }
[data-theme="calm"] .nav-tabs.sec-tabs .nav-link { background: transparent; border-color: transparent; color: var(--text-secondary); border-radius: 10px; }
[data-theme="calm"] .nav-tabs.sec-tabs .nav-link:hover { background: rgba(255,255,255,.7); color: var(--text-primary); border-color: transparent; }
[data-theme="calm"] .nav-tabs.sec-tabs .nav-link.active { background: #fff; color: var(--primary); border-color: transparent; box-shadow: 0 1px 2px rgb(16 24 40 / .08); }
[data-theme="calm"] .nav-tabs.sec-tabs .nav-link.active .badge { background: var(--primary) !important; color: #fff !important; }
[data-theme="calm"] .nav-tabs.sec-tabs .nav-link .badge { background: #e4e7ec !important; color: #344054 !important; }

/* Ordinary nav tabs and pills */
[data-theme="calm"] .nav-tabs .nav-link.active { color: var(--primary); }
[data-theme="calm"] .nav-pills .nav-link.active { background: var(--primary); box-shadow: none; }

/* ── Buttons: one filled colour; the rest outlined and neutral ── */
[data-theme="calm"] .btn { border-radius: 10px; font-weight: 600; }
[data-theme="calm"] .btn-primary,
[data-theme="calm"] .btn-success,
[data-theme="calm"] .btn-accent {
    --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--primary-dark); --bs-btn-hover-border-color: var(--primary-dark); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--primary-dark); --bs-btn-active-border-color: var(--primary-dark);
    background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: none;
}
[data-theme="calm"] .btn-primary:hover,
[data-theme="calm"] .btn-success:hover,
[data-theme="calm"] .btn-accent:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: none; box-shadow: none; }
[data-theme="calm"] .btn-outline-primary,
[data-theme="calm"] .btn-outline-secondary,
[data-theme="calm"] .btn-outline-success,
[data-theme="calm"] .btn-outline-info,
[data-theme="calm"] .btn-light {
    --bs-btn-color: #344054; --bs-btn-bg: #fff; --bs-btn-border-color: #d0d5dd;
    --bs-btn-hover-color: var(--text-primary); --bs-btn-hover-bg: #f9fafb; --bs-btn-hover-border-color: #b9bfca;
    --bs-btn-active-color: var(--text-primary); --bs-btn-active-bg: #f2f4f7; --bs-btn-active-border-color: #b9bfca;
}
[data-theme="calm"] .btn-outline-primary { --bs-btn-color: var(--primary); }
[data-theme="calm"] .btn-warning {
    --bs-btn-color: #93370d; --bs-btn-bg: #fffaeb; --bs-btn-border-color: #fedf89;
    --bs-btn-hover-color: #7a2e0e; --bs-btn-hover-bg: #fef0c7; --bs-btn-hover-border-color: #fec84b;
}
[data-theme="calm"] .btn-outline-warning {
    --bs-btn-color: #93370d; --bs-btn-border-color: #fedf89;
    --bs-btn-hover-color: #7a2e0e; --bs-btn-hover-bg: #fffaeb; --bs-btn-hover-border-color: #fec84b;
}

/* ── Tables: light header, roomier rows ── */
[data-theme="calm"] .table { --bs-table-bg: transparent; }
[data-theme="calm"] .table thead th,
[data-theme="calm"] .table-light th {
    background: #f3f5f9; color: var(--text-secondary); font-weight: 700; font-size: .88rem;
    border-bottom: 1px solid var(--border); text-transform: none; letter-spacing: 0;
}
[data-theme="calm"] .table > :not(caption) > * > * { padding-top: .8rem; padding-bottom: .8rem; border-color: #e4e8ee; }
[data-theme="calm"] .table tbody tr:hover { background: #fafbff; }

/* ── Badges: soft pills ── */
[data-theme="calm"] .badge { font-weight: 600; border-radius: 999px; padding: .38em .75em; }
[data-theme="calm"] .badge-achieved { background: #ecfdf3; color: #067647; }
[data-theme="calm"] .badge-not-achieved { background: #fef3f2; color: #b42318; }
[data-theme="calm"] .badge-domain { background: #f2f4f7; color: #344054; }
[data-theme="calm"] .badge-bloom { background: var(--primary-50); color: var(--primary-dark); }
[data-theme="calm"] .badge.bg-warning { background: #fffaeb !important; color: #93370d !important; }
[data-theme="calm"] .badge.text-primary,
[data-theme="calm"] .bg-primary-subtle.text-primary { color: var(--primary-dark) !important; }

/* Alerts: quiet, a thin border instead of a block of colour */
[data-theme="calm"] .alert { border-radius: 12px; }
[data-theme="calm"] .alert-warning { background: #fffaeb; border-color: #fedf89; color: #7a2e0e; }
[data-theme="calm"] .alert-info { background: var(--primary-50); border-color: var(--primary-100); color: var(--primary-dark); }

/* Achievement bars and progress in the main colour */
[data-theme="calm"] .achievement-fill { background: var(--primary); }
[data-theme="calm"] .progress-bar { background-color: var(--primary); }

/* Forms */
[data-theme="calm"] .form-control,
[data-theme="calm"] .form-select { border-radius: 10px; border-color: #c5ccd8; }
[data-theme="calm"] .form-control:focus,
[data-theme="calm"] .form-select:focus { border-color: var(--primary-light); box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .12); }

[data-theme="calm"] .login-card { border: 1px solid var(--border); box-shadow: var(--shadow-md); }

/* The assessment plan's own colour (purple) follows the main colour here. */
html[data-theme="calm"] {
    --ddap-primary: #1f1d84;
    --ddap-primary-dark: #17166a;
    --ddap-primary-light: #3b39a8;
    --ddap-soft: #dde0f6;
    --ddap-soft-bg: #f5f6fd;
    --ddap-soft-border: #dde0f6;
    --ddap-text: #17166a;
}
[data-theme="calm"] .plan-banner,
html[dir="rtl"][data-theme="calm"] .plan-banner { border: 1px solid var(--ddap-soft-border); }

/* Outcome report: the CLO card keeps a plain edge; the verdict is in its bar and badge. */
[data-theme="calm"] .pg-clo-report .clo-card,
[data-theme="calm"] .pg-clo-report .clo-card.achieved,
[data-theme="calm"] .pg-clo-report .clo-card.not-achieved,
[data-theme="calm"] .pg-clo-report .clo-card.not-assessed { border-inline-start: 1px solid var(--border); border-radius: 12px; }

/* Grade entry: the per-row "absent" / "withdrawn" buttons are grey until used. */
[data-theme="calm"] .btn-absent.btn-outline-warning,
[data-theme="calm"] .btn-absent + .btn-outline-danger {
    --bs-btn-color: #475467; --bs-btn-border-color: #d0d5dd; --bs-btn-bg: #fff;
}
[data-theme="calm"] .btn-absent.btn-outline-warning { --bs-btn-hover-color: #93370d; --bs-btn-hover-bg: #fffaeb; --bs-btn-hover-border-color: #fedf89; }
[data-theme="calm"] .btn-absent + .btn-outline-danger { --bs-btn-hover-color: #b42318; --bs-btn-hover-bg: #fef3f2; --bs-btn-hover-border-color: #fda29b; }
[data-theme="calm"] [data-bs-target="#importMoodleModal"].btn-outline-warning {
    --bs-btn-color: #344054; --bs-btn-border-color: #d0d5dd; --bs-btn-hover-color: var(--text-primary); --bs-btn-hover-bg: #f9fafb; --bs-btn-hover-border-color: #b9bfca;
}