@import "./css/primitive.css";
@import "./css/semantic.css";

html {
    overflow-y: auto;
    scrollbar-gutter: stable;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--clr-bg);
    color: var(--clr-text);
}

/* --- Theme colour mapping --- */
/*Define these two variables once per theme:*/
/*
    :root, [data-theme="dark"] {
    --theme-logo-primary: #7F77DD;
    --theme-logo-secondary: #A0D3F2;
    --theme-text-primary: #a0d3f2;
    --theme-accent-primary: #AAA1F2;
}

[data-theme="light"] {
    --theme-logo-primary: <tbd once the light palette exists>;
    --theme-logo-secondary: <tbd>;
    --theme-text-primary: <tbd>;
    --theme-accent-primary: <tbd>;
}
*/

.contentArea{
    margin: 0 auto;
    max-width: min(100%, 1400px);
}

/* === LINK STYLES === */
a {
    color: var(--clr-link-text);
    text-decoration: underline;
    text-decoration-color: var(--clr-link-underline);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color 150ms ease, text-decoration-color 150ms ease, text-decoration-thickness 150ms ease;
}

    a:hover {
        color: var(--clr-link-text-hover);
        text-decoration-color: var(--clr-link-underline-hover);
        text-decoration-thickness: 2px;
    }

    a:focus-visible {
        outline: 2px solid var(--clr-focus-ring-color);
        outline-offset: 3px;
        border-radius: 0.15rem;
        color: var(--clr-link-text-hover);
        text-decoration-color: var(--clr-link-underline-hover);
        text-decoration-thickness: 2px;
    }

    a:active {
        color: var(--clr-link-text-active);
    }


/* === MISC === */
.nav-icon {
    margin-right: 1rem;
}

article.content {
    padding: 2rem;
    margin: 0 auto;
}

.outer__wrapper {
    margin: 0 auto;
    box-sizing: border-box;
    max-width: min(100%, 1400px);
    
    section {
        margin-block: 3rem;
    }
}

    h1:focus {
        outline: none;
    }

    /* A page title passed to the top row as a heading looks like the plain-text titles there (#371) */
    .pageTitle__heading {
        margin: 0;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
    }

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

    .invalid {
        outline: 1px solid var(--clr-danger);
    }
    
    .validation-errors{
        text-align: left;
    }
    
    .validation-message {
        color: var(--clr-danger);
    }

    .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."
        }


    input.client,
    input.client.valid {
        max-width: 6rem;
    }

    input.duration,
    input.duration.valid {
        max-width: 5rem;
    }


    .timesheetUserSelect {
        min-width: 12rem;
    }

    .timesheetWeekSelect {
        min-width: 15rem;
    }

    .breakdowns__wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.5rem;
        padding: 1rem 0 2rem;
    }
    /* Custom */
    .select__wrapper.col select,
    .select__wrapper select {
        flex-grow: 1;
    }

/* === TABLES === */
/* Table rows */
.tso-row-bg,
.bg-dark-gray {
    background: var(--clr-tbl-row-bg);
}
.tso-row-bg-alternate,
.bg-light-gray {
    background: var(--clr-tbl-row-bg-alternate);
}

tr.end-of-week td.date-cell,
tr.end-of-week td.user-cell,
tr.end-of-week td.absence-cell {
    border-bottom: 1px solid #000;
}

.table-hover > tbody > tr:hover > * {
    color: var(--clr-tbl-row-text-hover); /* BS Override */
}

.actions__wrapper {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    align-items: flex-start;
}

    .page {
        background: var(--clr-surface);
    }

    h2 {
        color: var(--clr-text);
        font-size: 1.5rem;
    }

/* === FORM ELEMENTS === */
input,
button,
select,
textarea,
/* BS Override */
.form-control,
.form-control.valid,
.form-control.invalid
{
    padding: .5rem;
    font: inherit;
    background: var(--clr-input-bg);
    color: var(--clr-input-text);
    border: 1px solid var(--clr-input-border);
    border-radius: .25rem;
    min-height: 44px;
    vertical-align: middle;
}

    input:focus,
    select:focus,
    textarea:focus,
    /* BS Override */
    .form-control:focus,
    .form-floating > .form-control:focus {
        border-color: var(--clr-input-border-focus);
        outline: 1px solid var(--clr-focus-ring-color);
        background: var(--clr-input-bg);
        color: var(--clr-input-text);
    }

        input:hover:not(:disabled),
        select:hover:not(:disabled),
        textarea:hover:not(:disabled) {
            border-color: var(--clr-input-border-hover);
            outline: 1px solid var(--clr-focus-ring-color);
        }

        input:disabled,
        select:disabled,
        textarea:disabled {
            background: var(--clr-neutral-900);
            color: var(--clr-action-disabled-text);
            border-color: var(--clr-action-disabled-border);
            cursor: not-allowed;
        }

        /* Read-only shows a value to read, not change (e.g. the invited email). Bootstrap paints it light grey
           under the theme's light text, so it gets the raised surface with full-contrast text instead, and no
           hover highlight suggesting it can be edited. It stays focusable, with the usual focus ring. */
        input[readonly],
        textarea[readonly],
        .form-control[readonly] {
            background: var(--clr-surface-raised);
            color: var(--clr-text);
            border-color: var(--clr-border-default);
        }

            input[readonly]:hover,
            textarea[readonly]:hover,
            .form-control[readonly]:hover {
                border-color: var(--clr-border-default);
                outline: none;
            }

        /* Browser autofill paints its own background that `background` can't override;
           faking it with an inset box-shadow is the only reliable cross-browser fix. */
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        select:-webkit-autofill,
        select:-webkit-autofill:hover,
        select:-webkit-autofill:focus,
        textarea:-webkit-autofill,
        textarea:-webkit-autofill:hover,
        textarea:-webkit-autofill:focus {
            -webkit-text-fill-color: var(--clr-input-text);
            -webkit-box-shadow: 0 0 0 1000px var(--clr-input-bg) inset;
            box-shadow: 0 0 0 1000px var(--clr-input-bg) inset;
            caret-color: var(--clr-input-text);
            transition: background-color 5000s ease-in-out 0s;
        }

        input[type='checkbox'] {
            min-height: unset;
        }

        /* Never wider than its content (stops column wrappers stretching it), and never narrower:
           Firefox draws the date segments and calendar button wider than Chrome, so a fixed rem cap
           clipped the year (#410). */
        input[type='date'] {
            max-width: max-content;
        }

            input[type='date']::-webkit-calendar-picker-indicator {
                filter: invert(1) brightness(0.5);
            }

    .full-width {
        min-width: 100%;
        max-width: 100%;
    }

/* === CUSTOM CHECKBOX === */
/* .navbar-toggler is a checkbox used as the mobile menu button; it keeps its own styles in NavMenu.razor.css.
   .tso-switch__input is the invisible checkbox inside TsoSwitch, which draws its own track and thumb. */
input[type="checkbox"]:not(.navbar-toggler, .tso-switch__input) {
    appearance: none;
    box-sizing: border-box;
    height: 20px;
    width: 20px;
    margin: 0;
    background: var(--clr-input-bg);
    border: 2px solid var(--clr-input-border);
    border-radius: .25rem;
    cursor: pointer;
    /* inline-grid (not grid) so the checkbox sits on the same line as its label text */
    display: inline-grid;
    place-content: center;
    vertical-align: middle;
}

    /* Checkmark is Bootstrap Icons `check-lg`, masked so its colour comes from a token. */
    input[type="checkbox"]:not(.navbar-toggler, .tso-switch__input)::before {
        content: '';
        height: 14px;
        width: 14px;
        background-color: var(--clr-action-primary-text);
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.733.733 0 0 1 .02-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z'/%3E%3C/svg%3E") center / contain no-repeat;
        rotate: -360deg;
        scale: 0;
        opacity: 0;
        transition: 200ms ease;
    }

    input[type="checkbox"]:not(.navbar-toggler, .tso-switch__input):checked {
        background: var(--clr-action-primary-bg);
        border-color: var(--clr-action-primary-border);
    }

        input[type="checkbox"]:not(.navbar-toggler, .tso-switch__input):checked::before {
            rotate: 0deg;
            scale: 1;
            opacity: 1;
        }

    input[type="checkbox"]:not(.navbar-toggler, .tso-switch__input):hover:not(:disabled) {
        border-color: var(--clr-input-border-hover);
    }

    input[type="checkbox"]:not(.navbar-toggler, .tso-switch__input):focus-visible {
        outline: 2px solid var(--clr-focus-ring-color);
        outline-offset: 2px;
    }

    input[type="checkbox"]:not(.navbar-toggler, .tso-switch__input):disabled {
        background: var(--clr-action-disabled-bg);
        border-color: var(--clr-action-disabled-border);
    }

        input[type="checkbox"]:not(.navbar-toggler, .tso-switch__input):disabled::before {
            background-color: var(--clr-action-disabled-text);
        }

    @media (prefers-reduced-motion: reduce) {
        input[type="checkbox"]:not(.navbar-toggler, .tso-switch__input)::before {
            transition: none;
        }
    }


.btn {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: .5rem;
    justify-content: center;
    align-items: center;
    text-transform: capitalize;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &:hover:not(:disabled) {
        background: var(--clr-action-secondary-bg-hover);
    }

    &:active:not(:disabled) {
        background: var(--clr-action-secondary-bg-active);
    }

    &.secondary {
        background: var(--clr-action-secondary-bg);
        color: var(--clr-action-secondary-text);
        border-color: var(--clr-action-secondary-border);
    }

    &.primary {
        background: var(--clr-action-primary-bg);
        color: var(--clr-action-primary-text);
        border-color: var(--clr-action-primary-border);

        &:hover:not(:disabled) {
            background: var(--clr-action-primary-bg-hover);
        }

        &:active:not(:disabled) {
            background: var(--clr-action-primary-bg-active);
        }
    }

    &.ghost {
        background: transparent;
        color: var(--clr-text-muted);
        border-color: var(--clr-neutral-700);

        &:hover:not(:disabled) {
            background: var(--clr-neutral-900);
            color: var(--clr-text);
        }
    }

    &:disabled,
    &[aria-disabled="true"],
    &.primary:disabled,
    &[aria-disabled="true"].primary,
    &.secondary:disabled,
    &[aria-disabled="true"].secondary {
        background: var(--clr-action-disabled-bg);
        color: var(--clr-action-disabled-text);
        border-color: var(--clr-action-disabled-border);
        cursor: not-allowed;
        opacity: 1;
    }

    &.btn-icon {
        padding: .5rem; /* Don't need extra padding if only showing an icon */
    }
}

.btn-label {
    display: none; /* Mobile-first: icon only */

    @media (min-width: 768px) { /* Tablet and desktop: icon + text */
        display: inline-flex;
    }
}

    /* Base button-link */
    .btn-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 44px;
        padding: 0.5rem 1.25rem;
        border: 1px solid transparent;
        border-radius: 0.25rem;
        font: inherit;
        font-weight: 500;
        text-decoration: none;
        text-align: center;
        text-transform: capitalize;
        cursor: pointer;
        transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;

        &.visible-from-lg{
            display: inline-flex;
        }
    }

    .btn-link-secondary {
        background: var(--clr-action-secondary-bg);
        color: var(--clr-action-secondary-text);
        border-color: var(--clr-action-secondary-border);
    }

        .btn-link-secondary:hover {
            background: var(--clr-action-secondary-bg-hover);
            color: var(--clr-action-secondary-text);
            border-color: var(--clr-action-secondary-border);
        }

        .btn-link-secondary:active {
            background: var(--clr-action-secondary-bg-active);
        }

    .btn-link-primary {
        background: var(--clr-action-primary-bg);
        color: var(--clr-action-primary-text);
        border-color: var(--clr-action-primary-border);
    }

        .btn-link-primary:hover {
            background: var(--clr-action-primary-bg-hover);
        }

        .btn-link-primary:active {
            background: var(--clr-action-primary-bg-active);
        }

    .btn-link-ghost {
        background: transparent;
        color: var(--clr-text-muted);
        border-color: var(--clr-neutral-700);
    }

        .btn-link-ghost:hover {
            background: var(--clr-neutral-900);
            color: var(--clr-text);
        }

    .btn-link:focus-visible {
        outline: none;
        box-shadow: var(--clr-focus-ring-shadow);
    }

    .btn-link[aria-disabled="true"] {
        background: var(--clr-action-disabled-bg);
        color: var(--clr-action-disabled-text);
        border-color: var(--clr-action-disabled-border);
        pointer-events: none;
        cursor: default;
    }

    /* === CUSTOM SCROLLBARS === */
    /* Chrome, Edge, Safari */
    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    ::-webkit-scrollbar-track {
        background: var(--clr-scrollbar-track);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--clr-scrollbar-thumb);
        border: 2px solid var(--clr-scrollbar-track);
        border-radius: 999px;
    }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--clr-scrollbar-thumb-hover);
        }

        ::-webkit-scrollbar-thumb:active {
            background: var(--clr-scrollbar-thumb-active);
        }
    /* Firefox */
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--clr-scrollbar-thumb) var(--clr-scrollbar-track);
    }

    /* === ALLOCATION STATUS ICONS === */
    .entry-complete {
        color: var(--clr-success);
    }

    .entry-missing {
        color: var(--clr-danger);
    }

    .entry-future {
        color: var(--clr-text-muted);
    }

    .entry-weekend {
        color: var(--clr-text-muted);
    }

    /* === BS TABLE OVERRIDES === */
    .table {
        background: var(--clr-surface);
        color: var(--clr-text-muted);
        border: var(--clr-border-default);
    }

.bankHolidayLabel {
    position: relative;
    display: inline-block;
    margin-inline-start: 1rem;
    padding: .5rem 1rem;
    font-size: .75rem;
    line-height: 1;
    white-space: nowrap;
    overflow: visible;
    background: var(--clr-primary-800);
    color: var(--clr-primary-200);
    border-radius: .25rem;
}

.tso-text-danger{
    color: var(--clr-danger);
}
.tso-text-success{
    color: var(--clr-success);
}

    .bankHolidayLabel::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -.5rem;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-top: .4rem solid transparent;
        border-bottom: .4rem solid transparent;
        border-right: .5rem solid var(--clr-primary-800);
    }

    /* === MOBILE FIRST VISIBILITY BREAKPOINTS === */
    .visible-from-sm {
        display: none;
    }

    .visible-from-md {
        display: none;
    }

    .visible-from-lg {
        display: none;
    }

    .visible-from-xl {
        display: none;
    }

    @media (min-width: 576px) {
        .visible-from-sm {
            display: revert;
        }
    }

    @media (min-width: 768px) {
        .visible-from-md {
            display: revert;
        }
    }

    @media (min-width: 1024px) {
        .visible-from-lg {
            display: revert;
        }
    }

    @media (min-width: 1480px) {
        .visible-from-xl {
            display: revert;
        }
    }

.version{
    padding: 1rem 1.25rem;
    font-size: .875rem;
    color: var(--clr-text-muted);
}