/* Journal Font: News Cycle is the classic Journal look */
@import url('https://fonts.googleapis.com/css2?family=News+Cycle:wght@400;700&display=swap');

html, body {
    font-family: 'News Cycle', Arial, sans-serif;
    font-size: 16px;
    background-color: #fff;
    color: #222;
    padding-top: 30px; /* Adjust based on navbar height */
    
}

/* Ensure all navbar links have consistent height and spacing – compact to avoid overlap */
.navbar-nav .nav-link {
    display: flex;
    align-items: center;
    height: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.9rem;
}

/* Fix for the Logout button specifically */
.navbar-nav button.nav-link {
    background: none;
    border: none;
    cursor: pointer;
    padding-top: 0px;
    padding-bottom: 0px;
}

.navbar-item {
    padding-top: 0px;
    padding-bottom: 0px;
}

/* Tighten up the navbar height */
.navbar {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Ensure the toggle button isn't massive */
.navbar-toggler {
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
}

/* Center items vertically on mobile when expanded */
@media (max-width: 991.98px) {
    .navbar-nav {
        padding-top: 1rem;
        padding-bottom: 1rem;
        text-align: center;
    }
}

/* Links & Buttons – use theme primary (set by SchoolBranding / School setup) */
a, .btn-link {
    color: var(--bs-link-color, #0d6efd);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: var(--bs-link-hover-color, #0a58ca);
}

.btn-primary {
    color: #fff;
    background-color: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    text-transform: none;
}

.btn-primary:hover {
    background-color: var(--bs-link-hover-color, #0a58ca);
    border-color: var(--bs-link-hover-color, #0a58ca);
}

/* Focus states – use theme primary */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color, rgba(13, 110, 253, 0.25));
    border-color: var(--bs-primary, #0d6efd);
}

/* Content Spacing */
.content {
    padding-top: 1.5rem;
}

/* Login / Register: slightly larger textboxes, padding under placeholder/label */
.account-auth-form .form-control {
    height: calc(1.5em + 1.25rem + 2px);
    min-height: 44px;
    box-sizing: border-box;
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
    line-height: 1.5;
}
/* Form-floating: match our height and keep label at top when empty */
.account-auth-form .form-floating > .form-control,
.account-auth-form .form-floating > .form-control-plaintext {
    padding: 0.5rem 0.75rem 0.75rem 0.75rem;
}
.account-auth-form .form-floating > label {
    padding: 0.5rem 0.75rem 0.75rem 0.75rem;
}
.account-auth-form .form-floating > .form-control:focus,
.account-auth-form .form-floating > .form-control:not(:placeholder-shown),
.account-auth-form .form-floating > .form-control-plaintext:focus,
.account-auth-form .form-floating > .form-control-plaintext:not(:placeholder-shown) {
    padding-top: 1.375rem;
    padding-bottom: 0.75rem;
}
.account-auth-form .input-group .btn {
    height: calc(1.5em + 1.25rem + 2px);
    min-height: 44px;
}

/* Validation - Matching Journal's Success/Danger colors */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #78b448; /* Journal Success Green */
}

.invalid {
    outline: 1px solid #f05b5b; /* Journal Danger Red */
}

.validation-message {
    color: #f05b5b;
}

/* Error Boundary - Updated to match the Red/Pink theme */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjY2LjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNzg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3LjgyOSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #eb6864;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

/* Input Styles */
.form-control {
    border: 1px solid #ddd;
    border-radius: 4px;
}

.darker-border-checkbox.form-check-input {
    border-color: #aaaaaa;
}

/* Schedule: clickable lesson rows and week cells */
.schedule-week .clickable-cell,
.table-hover .clickable-row {
    cursor: pointer;
}
.schedule-week .clickable-cell:hover,
.table-hover .clickable-row:hover {
    background-color: rgba(235, 104, 100, 0.2) !important;
}

/* Global busy overlay – semi-transparent with theme-colored spinner (spinner uses .text-primary from theme) */
.global-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background-color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}
.global-loading-spinner .spinner-border {
    color: var(--bs-primary) !important;
}
.app-loading-spinner-size {
    width: 3rem;
    height: 3rem;
}
.app-toast-container {
    z-index: 9999;
}
.app-navbar-logo {
    max-height: 32px;
    max-width: 80px;
    object-fit: contain;
}

.modal-backdrop-soft {
    background: rgba(0, 0, 0, 0.5);
}

.w-auto-inline {
    width: auto;
}

.w-auto-inline-sm {
    width: auto;
    min-width: 160px;
}

.w-auto-inline-xs {
    width: auto;
    min-width: 130px;
}

.w-auto-inline-lg {
    width: auto;
    min-width: 220px;
}

.minw-200 {
    min-width: 200px;
}

.maxw-160 {
    max-width: 160px;
}

.maxw-420-wrap {
    max-width: 420px;
    white-space: pre-wrap;
}

.w-80-col {
    width: 80px;
}

.w-90-col {
    width: 90px;
}

.w-44-col {
    width: 44px;
}

.w-5rem {
    width: 5rem;
}

.w-6rem {
    width: 6rem;
}

.w-3rem-h-2_5rem {
    width: 3rem;
    height: 2.5rem;
    cursor: pointer;
}

.maxw-8rem {
    max-width: 8rem;
}

.maxw-12rem {
    max-width: 12rem;
}

.subject-color-swatch {
    width: 28px;
    height: 28px;
    background-color: #f0f0f0;
}

/* Parent announcement shared styling (migrated from inline styles for CSP). */
.btn-parent-announcement {
    background-color: #0d9488;
    border-color: #0d9488;
}
.btn-parent-announcement:hover,
.btn-parent-announcement:focus,
.btn-parent-announcement:active {
    background-color: #0f766e;
    border-color: #0f766e;
}
.parent-announcement-icon,
.parent-announcement-spinner {
    color: #0d9488;
}
.parent-announcement-border {
    border-left-color: #0d9488 !important;
}
.parent-announcement-badge {
    background-color: #ccfbf1;
    color: #115e59;
}

.org-avatar {
    width: 80px;
    height: 80px;
}

.org-edit-btn {
    width: 28px;
    height: 28px;
}

.org-container-max {
    max-width: 1180px;
}

.modal-dialog-xl-max {
    max-width: 1100px;
}
.h-4rem {
    height: 4rem;
}

.schedule-exam-row {
    border-left: 4px solid var(--bs-primary, #0d6efd);
}

.schedule-entry-row {
    border-left: 4px solid #eb6864;
}

.schedule-exam-cell {
    background-color: rgba(13, 110, 253, 0.12);
}

.schedule-entry-cell {
    background-color: rgba(235, 104, 100, 0.15);
}

.schedule-week-cell {
    border-left: inherit;
}

.extra-card-fill-slot {
    height: 100%;
}

.user-id-code {
    font-size: 0.7rem;
}

.school-color-picker {
    width: 4rem;
    height: 2.5rem;
}

.school-logo-preview {
    max-height: 40px;
    max-width: 120px;
    object-fit: contain;
}

.school-signature-preview {
    max-height: 60px;
    max-width: 220px;
    object-fit: contain;
}

/* Extra curricular: activity cards and cancelled state */
.extra-card {
    display: inline-block;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    background-color: rgba(13, 110, 253, 0.12);
    border-left: 3px solid var(--bs-primary, #0d6efd);
    cursor: pointer;
    min-width: 120px;
}
.extra-card:hover {
    background-color: rgba(13, 110, 253, 0.2);
}
.extra-card-cancelled {
    background-color: rgba(108, 117, 125, 0.2);
    border-left-color: #6c757d;
    text-decoration: line-through;
    opacity: 0.85;
}
.border-dashed {
    border-style: dashed !important;
}

/* Extra curricular: fixed row height so rowspan cells are 2+ blocks tall and % heights work */
.extra-day-table tbody tr,
.extra-week-table tbody tr {
    height: 4rem;
}
.extra-day-table tbody td:first-child,
.extra-week-table tbody td:first-child {
    height: 4rem;
    min-height: 4rem;
    vertical-align: top;
}
.extra-day-table tbody td,
.extra-week-table tbody td {
    vertical-align: top;
}
.extra-day-table tbody td .extra-slot-grid,
.extra-week-table tbody td .extra-slot-grid {
    min-height: 4rem;
}
/* Force the slot cell to fill the full rowspan height so % heights on cards resolve */
.extra-day-table tbody td.p-2.align-top,
.extra-week-table tbody td.p-2.align-top {
    height: 1%;
    vertical-align: top;
}
.extra-day-table tbody td.p-2.align-top .extra-slot-grid,
.extra-week-table tbody td.p-2.align-top .extra-slot-grid {
    height: 100%;
}

/* Extra curricular: slot cell – events side by side, each with height = its duration (1 block, 2 blocks, etc.) */
.extra-slot-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;
}
.extra-slot-grid .extra-card {
    flex: 0 1 auto;
    min-width: 100px;
    min-height: 0;
    overflow: auto;
    box-sizing: border-box;
}

.extra-card-span-day-1 { height: 5.5rem; }
.extra-card-span-day-2 { height: 11rem; }
.extra-card-span-day-3 { height: 16.5rem; }
.extra-card-span-day-4 { height: 22rem; }
.extra-card-span-day-5 { height: 27.5rem; }
.extra-card-span-day-6 { height: 33rem; }
.extra-card-span-day-7 { height: 38.5rem; }
.extra-card-span-day-8 { height: 44rem; }
.extra-card-span-day-9 { height: 49.5rem; }
.extra-card-span-day-10 { height: 55rem; }
.extra-card-span-day-11 { height: 60.5rem; }
.extra-card-span-day-12 { height: 66rem; }

.extra-card-span-week-1 { height: 4rem; }
.extra-card-span-week-2 { height: 8rem; }
.extra-card-span-week-3 { height: 12rem; }
.extra-card-span-week-4 { height: 16rem; }
.extra-card-span-week-5 { height: 20rem; }
.extra-card-span-week-6 { height: 24rem; }
.extra-card-span-week-7 { height: 28rem; }
.extra-card-span-week-8 { height: 32rem; }
.extra-card-span-week-9 { height: 36rem; }
.extra-card-span-week-10 { height: 40rem; }
.extra-card-span-week-11 { height: 44rem; }
.extra-card-span-week-12 { height: 48rem; }

/* PDF tick/cross annotator (teacher marking tool) */
.annotator-root {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
}

.annotator-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.annotator-toolbar .annotator-toolbar-info {
    margin-left: auto;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

.annotator-toolbar-score {
    font-size: 0.9rem;
}

.annotator-tool-btn {
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #ffffff;
    border-radius: 0.35rem;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    user-select: none;
}

.annotator-tool-btn.active {
    border-color: #0d6efd;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}

.annotator-pdf-container {
    overflow: auto;
    max-height: 62vh;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 0.5rem;
}

.annotator-page-wrapper {
    position: relative;
    width: 100%;
    /* Canvas display sizing is handled by canvas element defaults. */
    margin-bottom: 1rem;
}

.annotator-render-canvas {
    display: block;
}

.annotator-overlay-canvas {
    position: absolute;
    inset: 0;
    cursor: crosshair;
}