/*
    The application's colours, in one place.

    Every branded surface - the side panel, the card headers, the login page - reads
    its colour from these variables rather than writing a colour code of its own.
    Change a value here and every one of them changes with it.

    The values come from the brand artwork on the login page: a deep navy ground with
    the violet-to-magenta of its flow lines as the accent.

    Load this before any stylesheet that uses the variables (sidebar.css, the login
    page), and after adminlte.min.css so the card rules below win over its defaults.
*/

/*
    The two faces the application is set in, served from the application itself.

    Book Antiqua came with Microsoft Office rather than with Windows, and was named in
    the stylesheet with no fallback and no file behind it - so anybody without Office
    was quietly reading the page in Times New Roman, and the PDF generator could not
    find it on a server at all. These are bundled instead: every visitor sees the same
    face, and the invoice is set in the same one as the screen.

    Noto Serif is the text face. Noto Serif Bengali carries Bangla, which Noto Serif has no
    glyphs for - it is listed second in the stack, so the browser reaches for it only
    where Noto Serif has nothing to draw.

    Both are under the SIL Open Font License. One ttf per face serves the browser and
    the PDF generator alike, so the screen and the printed invoice can never disagree
    about which face they are in.
*/

@font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/NotoSerif-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/NotoSerif-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/NotoSerif-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Serif';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/NotoSerif-BoldItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Serif Bengali';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/NotoSerifBengali-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Serif Bengali';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/NotoSerifBengali-Bold.ttf') format('truetype');
}

:root {
    /* ---- the type ---------------------------------------------------------------- */

    /* Noto Serif for everything, Noto Serif Bengali behind it for Bangla, and a serif
       either side in case a face fails to load. Every rule that sets a font reads
       this, so the application changes face in one edit. */
    --bayriv-font: 'Noto Serif', 'Noto Serif Bengali', 'Times New Roman', Georgia, serif;

    /* ---- the brand palette ------------------------------------------------------ */

    --bayriv-ink: #0A0A28;          /* deep navy: the side panel, card headers        */
    --bayriv-ink-light: #121240;    /* lighter navy the gradients run toward          */
    --bayriv-violet: #8B7CF6;       /* accent, first half                             */
    --bayriv-violet-soft: #A99BFA;  /* accent on dark grounds, for icons and focus    */
    --bayriv-magenta: #D946C8;      /* accent, second half                            */

    /* ---- what the brand is applied to ------------------------------------------- */

    /* The navy surfaces run from --bayriv-ink to --bayriv-ink-light. The side panel
       runs top to bottom; a card header, being wide and short, runs left to right. */
    --bayriv-surface: linear-gradient(180deg, var(--bayriv-ink) 0%, var(--bayriv-ink-light) 100%);
    --bayriv-surface-wide: linear-gradient(90deg, var(--bayriv-ink) 0%, var(--bayriv-ink-light) 100%);

    /* The accent as a gradient, for the few places that carry it: the current page
       in the side panel, the sign-in button. */
    --bayriv-accent: linear-gradient(135deg, var(--bayriv-violet), var(--bayriv-magenta));

    /* Text and icons sitting on the navy. */
    --bayriv-on-ink: #FFFFFF;
    --bayriv-on-ink-muted: rgba(255, 255, 255, 0.74);

    /* ---- the light side: page text and dividers ---------------------------------- */

    --bayriv-text: #1F1F33;
    --bayriv-muted: #6B6B85;        /* a grey leaning toward the violet, not a flat one */
    --bayriv-rule: #E6E6EF;
    --bayriv-tint: #F4F3FB;         /* a quiet violet-grey fill for light blocks        */

    /* ---- states -------------------------------------------------------------------- */

    /* Attendance, as coloured on the dashboard calendar. Kept apart from the brand
       accent, so a leave day never reads as "the current page". */
    --bayriv-present: #2E9E6B;
    --bayriv-late: #D99A21;
    --bayriv-early-exit: #E07B39;
    --bayriv-absent: #D14B4B;
    --bayriv-leave: #8B7CF6;
    --bayriv-holiday: #7A8599;
    --bayriv-weekend: #E3E5EC;
}

/* ---- the type, applied ---------------------------------------------------------------- */

/*
    adminlte.min.css - the one the layout actually links - sets Source Sans Pro on
    these four. Everything else inherits from body, but a rule that names an element
    directly is not inherited past, so a tooltip kept its own face while the page
    around it changed.

    This stylesheet loads after AdminLTE, so equal specificity wins here and no
    !important is needed.
*/
html,
body,
.tooltip,
.popover {
    font-family: var(--bayriv-font);
}

/* Anything that takes its face from the element it sits in: form controls and buttons,
   which browsers otherwise render in their own default rather than the page's. */
input,
select,
textarea,
button,
.btn,
.form-control,
.custom-select {
    font-family: inherit;
}

/* ---- card headers ------------------------------------------------------------------- */

/* Every screen's cards are card-info, which AdminLTE paints teal. The extra .card
   in the selector outranks AdminLTE's own rule without resorting to !important. */
.card.card-info:not(.card-outline) > .card-header {
    background: var(--bayriv-surface-wide);
    color: var(--bayriv-on-ink);
    border-bottom: 0;
}

    .card.card-info:not(.card-outline) > .card-header .card-title,
    .card.card-info:not(.card-outline) > .card-header a:not(.btn) {
        color: var(--bayriv-on-ink);
    }

    .card.card-info:not(.card-outline) > .card-header .btn-tool {
        color: var(--bayriv-on-ink-muted);
    }

        .card.card-info:not(.card-outline) > .card-header .btn-tool:hover {
            color: var(--bayriv-on-ink);
        }