@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/cairo/cairo-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/cairo/cairo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122;
}

html, body {
    font-family: 'Cairo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Page titles, section headers, and every field caption (Bootstrap's .form-label
   class is used consistently across all forms) render bold app-wide. */
h1,
h5,
.form-label {
    font-weight: bold;
}

/* Every toggle switch's label, app-wide (Bootstrap's .form-check.form-switch
   pattern is used consistently for all boolean fields). */
.form-switch .form-check-label {
    font-weight: bold;
}

/* Chrome ignores the dir/direction CSS property entirely on date/time inputs
   (a hard platform limitation, not fixable with CSS direction or !important) —
   so instead of fighting that, let the box shrink to its natural size. Block
   elements start from the right edge on this RTL page, which puts the compact
   control (text + calendar icon together) on the right without extra rules. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    width: auto;
}

/* Rich text editor font picker — Quill only ships Sans Serif/Serif/Monospace by
   default. These rules add our real fonts: one pair per font, matching Quill's
   own pattern for its built-ins — a label for the dropdown text, and a
   font-family so both the dropdown preview and the selected editor text render
   in that font. The values here (cairo, tajawal, ...) must match AboutToolbarOptions
   in Parishes.razor exactly, since Quill turns each value into a ql-font-{value} class. */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="timesnewroman"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="timesnewroman"]::before {
    content: "Times New Roman";
    font-family: 'Times New Roman', Times, serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="cairo"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="cairo"]::before {
    content: "Cairo";
    font-family: 'Cairo';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="tajawal"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="tajawal"]::before {
    content: "Tajawal";
    font-family: 'Tajawal';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="almarai"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="almarai"]::before {
    content: "Almarai";
    font-family: 'Almarai';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="ibmplexarabic"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="ibmplexarabic"]::before {
    content: "IBM Plex Sans Arabic";
    font-family: 'IBM Plex Sans Arabic';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="mcsredsea"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="mcsredsea"]::before {
    content: "MCS RedSea";
    font-family: 'MCS RedSea S_U';
}

.ql-editor .ql-font-timesnewroman { font-family: 'Times New Roman', Times, serif; }
.ql-editor .ql-font-cairo { font-family: 'Cairo'; }
.ql-editor .ql-font-tajawal { font-family: 'Tajawal'; }
.ql-editor .ql-font-almarai { font-family: 'Almarai'; }
.ql-editor .ql-font-ibmplexarabic { font-family: 'IBM Plex Sans Arabic'; }
.ql-editor .ql-font-mcsredsea { font-family: 'MCS RedSea S_U'; }

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

/* Freezes the title/search area of a list page, and the table's column
   headers, while the rows underneath scroll — same idea as Excel freeze panes. */
.list-toolbar {
    position: sticky;
    top: 3.5rem;
    z-index: 10;
    background-color: #fff;
    padding-top: 0.5rem;
}

.table-scroll {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: auto;
}

/* Keeps the pager (page numbers + row-count picker) visible at the bottom of
   the viewport instead of getting pushed below the fold under the sticky
   header + table — the table-scroll height above is deliberately kept short
   enough that this normally needs no scrolling on a typical viewport. */
.pager-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background-color: #fff;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-top: 1px solid #dee2e6;
}

.table-scroll thead th {
    position: sticky;
    top: 0;
    background-color: #e9ecef;
    z-index: 5;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* The rich text editor's toolbar buttons are hard-coded to float:left by the
   library's own CSS, which ignores the page's dir="rtl" — override so the
   toolbar reads right-to-left like the rest of the app. */
.ql-toolbar.ql-snow {
    direction: rtl;
}

.ql-toolbar.ql-snow > * {
    float: right !important;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

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

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}