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

:root {
    --portal-page: #F2F3F5;
    --portal-surface: #FFFFFF;
    --portal-accent: #E4F698;
    --portal-ink: #1C1C1E;
    --portal-slate: #6E7179;
    --portal-coral: #E5989B;
    --portal-neutral: #EAECEF;
    --portal-border: #E5E7EB;
    --portal-radius: 22px;
    --portal-font: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Legacy aliases retained for pages that already use the shared theme. */
    --font-family-primary: var(--portal-font);
    --color-white: var(--portal-surface);
    --color-blue-primary: var(--portal-ink);
    --color-blue-dark: var(--portal-ink);
    --color-blue-light: var(--portal-slate);
    --color-gray-50: var(--portal-page);
    --color-gray-100: var(--portal-neutral);
    --color-gray-200: var(--portal-border);
    --color-text-dark: var(--portal-ink);
    --color-text-light: var(--portal-slate);
    --color-border: var(--portal-border);
    --color-success: var(--portal-accent);
    --color-warning: var(--portal-coral);
    --color-danger: var(--portal-coral);
}

html {
    min-height: 100%;
    background: var(--portal-page);
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--portal-page) !important;
    color: var(--portal-ink) !important;
    font-family: var(--portal-font) !important;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

body :not(i):not(svg):not(path):not(code):not(pre):not([class^="fa"]):not([class*=" fa"]) {
    font-family: var(--portal-font) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--portal-ink);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.3;
}

h1 {
    font-size: clamp(24px, 2.4vw, 28px);
}

h2 {
    font-size: 19px;
}

h3,
.card-title {
    font-size: 16px;
}

p,
small,
.muted,
.text-muted,
.secondary-text {
    color: var(--portal-slate);
}

a {
    color: var(--portal-ink);
}

a:hover {
    color: var(--portal-slate);
}

a,
[class*="text-blue-"],
[class*="text-indigo-"],
[class*="text-purple-"],
[class*="text-pink-"],
[class*="text-orange-"],
[class*="text-green-"],
[class*="text-red-"] {
    color: var(--portal-ink) !important;
}

[class*="text-gray-"] {
    color: var(--portal-slate) !important;
}

[class~="text-gray-800"],
[class~="text-gray-900"] {
    color: var(--portal-ink) !important;
}

[class*="border-blue-"],
[class*="border-indigo-"],
[class*="border-purple-"],
[class*="border-pink-"],
[class*="border-orange-"],
[class*="border-green-"],
[class*="border-red-"] {
    border-color: var(--portal-border) !important;
}

[class*="bg-gray-"] {
    background-color: var(--portal-neutral) !important;
}

[class~="bg-gray-50"] {
    background-color: var(--portal-page) !important;
}

[class~="bg-gray-900"],
[class~="bg-black"] {
    background-color: var(--portal-ink) !important;
}

[class~="bg-blue-50"],
[class~="bg-blue-100"],
[class~="bg-indigo-50"],
[class~="bg-indigo-100"],
[class~="bg-green-50"],
[class~="bg-green-100"],
[class~="bg-red-50"],
[class~="bg-red-100"],
[class~="bg-purple-50"],
[class~="bg-pink-50"],
[class~="bg-orange-50"] {
    background-color: var(--portal-neutral) !important;
}

[class~="bg-blue-600"],
[class~="bg-blue-700"],
[class~="bg-indigo-600"],
[class~="bg-indigo-700"],
[class~="bg-purple-600"] {
    background-color: var(--portal-ink) !important;
}

[class~="bg-green-600"],
[class~="bg-green-700"] {
    background-color: var(--portal-accent) !important;
}

[class~="bg-red-600"],
[class~="bg-red-700"],
[class~="bg-pink-600"],
[class~="bg-orange-600"] {
    background-color: var(--portal-coral) !important;
}

.sidebar,
.side-bar,
.admin-sidebar,
.student-sidebar {
    background: var(--portal-page) !important;
    color: var(--portal-ink) !important;
    box-shadow: none !important;
}

.sidebar a,
.side-bar a,
.admin-sidebar a,
.student-sidebar a,
.nav-item,
.menu-item {
    color: var(--portal-slate);
    border-radius: 14px;
}

.sidebar a:hover,
.side-bar a:hover,
.admin-sidebar a:hover,
.student-sidebar a:hover,
.nav-item:hover,
.menu-item:hover {
    background: var(--portal-neutral) !important;
    color: var(--portal-ink) !important;
}

.sidebar a.active,
.side-bar a.active,
.admin-sidebar a.active,
.student-sidebar a.active,
.nav-item.active,
.menu-item.active,
.nav a.active {
    background: var(--portal-ink) !important;
    color: var(--portal-surface) !important;
}

.sidebar a.active *,
.side-bar a.active *,
.admin-sidebar a.active *,
.student-sidebar a.active *,
.nav-item.active *,
.menu-item.active *,
.nav a.active * {
    color: var(--portal-surface) !important;
}

.dashboard-header,
.page-header,
.topbar,
.header,
.page-title-bar {
    color: var(--portal-ink);
}

.card,
.panel,
.box,
.modal-content,
.modal-dialog,
.form-card,
.form-container,
.table-card,
.content-card,
.dashboard-card,
.stat,
.stat-card,
.metric-card {
    background-color: var(--portal-surface) !important;
    border: 1px solid var(--portal-border) !important;
    border-radius: var(--portal-radius) !important;
    box-shadow: none !important;
}

.stat-card:nth-child(2),
.metric-card:nth-child(2) {
    background-color: var(--portal-ink) !important;
    color: var(--portal-surface) !important;
}

.stat-card:first-child,
.metric-card:first-child {
    background-color: var(--portal-neutral) !important;
    color: var(--portal-ink) !important;
}

.stat-card:nth-child(2) *,
.metric-card:nth-child(2) * {
    color: var(--portal-surface) !important;
}

.stat-card:nth-child(3),
.metric-card:nth-child(3) {
    background-color: var(--portal-accent) !important;
    color: var(--portal-ink) !important;
}

.stat-card:nth-child(3) * ,
.metric-card:nth-child(3) * {
    color: var(--portal-ink) !important;
}

button,
.btn,
input[type="submit"],
input[type="button"],
input[type="reset"],
a.button,
a.btn {
    min-height: 38px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--portal-ink) !important;
    color: var(--portal-surface) !important;
    font-family: var(--portal-font) !important;
    font-weight: 600;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

button[class*="bg-blue-"],
button[class*="bg-indigo-"],
button[class*="bg-purple-"] {
    background: var(--portal-ink) !important;
    color: var(--portal-surface) !important;
    border-color: var(--portal-ink) !important;
}

button[class*="bg-green-"] {
    background: var(--portal-accent) !important;
    color: var(--portal-ink) !important;
    border-color: var(--portal-accent) !important;
}

button[class*="bg-red-"],
button[class*="bg-pink-"],
button[class*="bg-orange-"] {
    background: var(--portal-coral) !important;
    color: var(--portal-ink) !important;
    border-color: var(--portal-coral) !important;
}

.calendar-day,
.calendar-controls button {
    min-height: 0;
    border: 0 !important;
    border-radius: 12px;
    background: var(--portal-page) !important;
    color: var(--portal-ink) !important;
}

.calendar-day.today {
    background: var(--portal-accent) !important;
}

button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
a.button:hover,
a.btn:hover {
    background: var(--portal-slate) !important;
    color: var(--portal-surface) !important;
}

.btn-secondary,
.btn-light,
.btn-outline,
.button-secondary,
button.secondary {
    background: var(--portal-neutral) !important;
    color: var(--portal-ink) !important;
}

.btn-success,
.button-success,
button.success,
.badge.active,
.badge.success,
.status-success,
.status-submitted,
.alert.success,
.alert-success {
    background: var(--portal-accent) !important;
    color: var(--portal-ink) !important;
}

.btn-danger,
.button-danger,
button.danger,
.badge.danger,
.badge.error,
.status-danger,
.status-overdue,
.alert.error,
.alert-danger,
.err {
    background: var(--portal-coral) !important;
    color: var(--portal-ink) !important;
}

.badge,
.status,
.status-badge,
.label,
.pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 10px;
    border: 0;
    border-radius: 999px;
    background: var(--portal-neutral);
    color: var(--portal-ink);
    font-size: 11px;
    font-weight: 600;
}

.badge.pending,
.status.pending,
.status-badge.pending {
    background: var(--portal-neutral) !important;
    color: var(--portal-ink) !important;
}

.badge.exam,
.badge.warning,
.status.exam,
.status.warning,
.status-badge.warning {
    background: var(--portal-coral) !important;
    color: var(--portal-ink) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
    min-height: 42px;
    border: 1px solid var(--portal-border) !important;
    border-radius: 12px !important;
    background-color: var(--portal-surface) !important;
    color: var(--portal-ink) !important;
    font-family: var(--portal-font) !important;
    font-size: 14px;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--portal-ink);
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
    border-color: var(--portal-ink) !important;
    outline: 2px solid rgba(28, 28, 30, 0.18);
    outline-offset: 2px;
}

label {
    color: var(--portal-ink);
    font-size: 13px;
    font-weight: 600;
}

.table-wrap,
.table-responsive,
.table-container,
.responsive-table {
    max-width: 100%;
    overflow-x: auto;
    border-radius: var(--portal-radius);
    background: var(--portal-surface);
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--portal-surface) !important;
    color: var(--portal-ink);
}

th,
td {
   
    border-color: var(--portal-border) !important;
    border-bottom: 1px solid var(--portal-border);
    color: var(--portal-ink);
    text-align: left;
    vertical-align: middle;
}

th {
    background: var(--portal-neutral) !important;
    font-size: 12px;
    font-weight: 700;
}

tbody tr:hover {
    background: var(--portal-page) !important;
}

.alert,
.message,
.notice {
    border: 1px solid var(--portal-border);
    border-radius: 14px;
}

.alert.success,
.message.success,
.notice.success {
    background: var(--portal-accent) !important;
    color: var(--portal-ink) !important;
}

.alert.error,
.alert.warning,
.message.error,
.notice.warning {
    background: var(--portal-coral) !important;
    color: var(--portal-ink) !important;
}

img {
    max-width: 100%;
}

@media (max-width: 768px) {
    .table-wrap,
    .table-responsive,
    .table-container,
    .responsive-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .card,
    .panel,
    .box,
    .form-card,
    .form-container,
    .table-card,
    .content-card,
    .dashboard-card {
        border-radius: 18px !important;
    }
}

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

/* Keep button variants legible even when pages use different class conventions. */
button.primary,
button.btn-primary,
.btn.primary,
.btn.btn-primary,
a.btn-primary,
a.button-primary,
input.btn-primary {
    background: var(--portal-ink) !important;
    border-color: var(--portal-ink) !important;
    color: var(--portal-surface) !important;
}

button.secondary,
button.btn-secondary,
button.light,
button.btn-light,
.btn.secondary,
.btn.btn-secondary,
.btn.light,
.btn.btn-light,
.btn.outline,
.btn.btn-outline,
a.btn-secondary,
a.btn-light,
input.btn-secondary,
input.btn-light {
    background: var(--portal-neutral) !important;
    border-color: var(--portal-border) !important;
    color: var(--portal-ink) !important;
}

button.success,
button.btn-success,
.btn.success,
.btn.btn-success,
a.btn-success,
a.button-success,
input.btn-success {
    background: var(--portal-accent) !important;
    border-color: var(--portal-accent) !important;
    color: var(--portal-ink) !important;
}

button.danger,
button.btn-danger,
button.warning,
button.btn-warning,
button.orange,
button.btn-orange,
.btn.danger,
.btn.btn-danger,
.btn.warning,
.btn.btn-warning,
.btn.orange,
.btn.btn-orange,
a.btn-danger,
a.btn-warning,
a.btn-orange,
a.button-danger,
input.btn-danger,
input.btn-warning {
    background: var(--portal-coral) !important;
    border-color: var(--portal-coral) !important;
    color: var(--portal-ink) !important;
}

button.primary:hover,
button.btn-primary:hover,
.btn.primary:hover,
.btn.btn-primary:hover,
a.btn-primary:hover,
a.button-primary:hover,
input.btn-primary:hover {
    background: var(--portal-slate) !important;
    border-color: var(--portal-slate) !important;
    color: var(--portal-surface) !important;
}

button.secondary:hover,
button.btn-secondary:hover,
button.light:hover,
button.btn-light:hover,
.btn.secondary:hover,
.btn.btn-secondary:hover,
.btn.light:hover,
.btn.btn-light:hover,
.btn.outline:hover,
.btn.btn-outline:hover,
a.btn-secondary:hover,
a.btn-light:hover,
input.btn-secondary:hover,
input.btn-light:hover {
    background: var(--portal-border) !important;
    border-color: var(--portal-border) !important;
    color: var(--portal-ink) !important;
}

button.success:hover,
button.btn-success:hover,
.btn.success:hover,
.btn.btn-success:hover,
a.btn-success:hover,
a.button-success:hover,
input.btn-success:hover {
    background: var(--portal-accent) !important;
    border-color: var(--portal-accent) !important;
    color: var(--portal-ink) !important;
}

button.danger:hover,
button.btn-danger:hover,
button.warning:hover,
button.btn-warning:hover,
button.orange:hover,
button.btn-orange:hover,
.btn.danger:hover,
.btn.btn-danger:hover,
.btn.warning:hover,
.btn.btn-warning:hover,
.btn.orange:hover,
.btn.btn-orange:hover,
a.btn-danger:hover,
a.btn-warning:hover,
a.btn-orange:hover,
a.button-danger:hover,
input.btn-danger:hover,
input.btn-warning:hover {
    background: var(--portal-coral) !important;
    border-color: var(--portal-coral) !important;
    color: var(--portal-ink) !important;
}

div.error,
p.error,
.error-message,
.error-msg,
.validation-error,
.invalid-feedback,
.field-error,
.alert.error,
.alert-danger,
.alert-error,
.message.error,
.notice.error,
#errorMsg,
.err {
    border-color: var(--portal-coral) !important;
    background: var(--portal-coral) !important;
    color: var(--portal-ink) !important;
}

div.error *,
p.error *,
.error-message *,
.error-msg *,
.validation-error *,
.invalid-feedback *,
.field-error *,
.alert.error *,
.alert-danger *,
.alert-error *,
.message.error *,
.notice.error *,
#errorMsg *,
.err * {
    color: var(--portal-ink) !important;
}

div.success,
p.success,
.success-message,
.success-msg,
.validation-success,
.alert.success,
.alert-success,
.message.success,
.notice.success {
    border-color: var(--portal-accent) !important;
    background: var(--portal-accent) !important;
    color: var(--portal-ink) !important;
}

div.success *,
p.success *,
.success-message *,
.success-msg *,
.validation-success *,
.alert.success *,
.alert-success *,
.message.success *,
.notice.success * {
    color: var(--portal-ink) !important;
}