/*
 * Copiado bloco a bloco de docs/reference/ferias.css, unidade de cópia é o
 * region — nunca a linha. Ver docs/decisions/design-herdado-do-ferias.md.
 */

:root {
    --cl-black: #000;
    --cl-white: #fff;
    --cl-blush: #b3407b;
    --cl-orange: #ffa500ff;
    --cl-darkorange: #ed9a00;
    --cl-gray: hsl(from #8c92ac h s 50%);

    --cl-tableau10-blue: #4e79a7;
    --cl-tableau10-orange: #f28e2c;
    --cl-tableau10-red: #e15759;
    --cl-tableau10-cyan: #76b7b2;
    --cl-tableau10-green: #59a14f;
    --cl-tableau10-yellow: #edc949;
    --cl-tableau10-purple: #af7aa1;
    --cl-tableau10-pink: #ff9da7;
    --cl-tableau10-brown: #9c755f;
    --cl-tableau10-gray: #bab0ab;


    --cl-gray-100: color-mix(in oklch, var(--cl-gray), #000 calc((1 - pow(0.2, 2.0)) * 100%));
    --cl-gray-200: color-mix(in oklch, var(--cl-gray), #000 calc((1 - pow(0.4, 2.0)) * 100%));
    --cl-gray-300: color-mix(in oklch, var(--cl-gray), #000 calc((1 - pow(0.6, 2.0)) * 100%));
    --cl-gray-400: color-mix(in oklch, var(--cl-gray), #000 calc((1 - pow(0.8, 2.0)) * 100%));
    --cl-gray-500: var(--cl-gray);
    --cl-gray-600: color-mix(in oklch, var(--cl-gray), #fff calc((1 - pow(0.8, 2.0)) * 100%));
    --cl-gray-700: color-mix(in oklch, var(--cl-gray), #fff calc((1 - pow(0.6, 2.0)) * 100%));
    --cl-gray-800: color-mix(in oklch, var(--cl-gray), #fff calc((1 - pow(0.4, 2.0)) * 100%));
    --cl-gray-900: color-mix(in oklch, var(--cl-gray), #fff calc((1 - pow(0.2, 2.0)) * 100%));

    --cl-accent: var(--cl-blush);
    --cl-success: var(--cl-tableau10-green);
    --cl-danger: var(--cl-tableau10-red);
    --cl-info: var(--cl-tableau10-blue);
    --cl-warning: var(--cl-tableau10-orange);

    --ff-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --ff-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --fs-xs: 0.714rem;
    --fs-sm: 0.857rem;
    --fs-lg: 1.14rem;
    --fs-xl: 1.28rem;
    --fs-xxl: 1.5714rem;
    --fw-medium: 500;
    --fw-bold: 600;
    --fw-black: 700;

    --shadow-sm: 0 0.5rem 1rem hsl(from var(--cl-black) h s l / 20%);
    --shadow-lg: 0 1rem 2rem 0 hsl(from var(--cl-black) h s l / 10%), 0 0 .5rem 0 hsl(from var(--cl-black) h s l / 10%);

    --radius-lg: 3rem;
    --radius-md: 1.5rem;
    --radius-sm: 0.66rem;
    --radius-xs: 0.33rem;
}

html {
    color-scheme: light dark;

    margin: 0;

    background: light-dark(var(--cl-gray-900), var(--cl-gray-200));
    color: light-dark(var(--cl-gray-300), var(--cl-gray-800));
    accent-color: var(--cl-accent);

    font-family: var(--ff-sans);
    font-size: 14px;
    font-variant-numeric: tabular-nums;

    &[data-theme="light"] {
        color-scheme: only light;
    }

    &[data-theme="dark"] {
        color-scheme: dark;
    }
}

html, body, .layout {
    min-height: 100vh;
}

@view-transition {
    navigation: auto;
}

*:focus-visible {
    outline: 2px solid var(--cl-accent);
    outline-offset: 2px;
}

/* region Naked tags */
a {
    color: inherit;
    text-decoration: inherit;
}

code {
    font-family: var(--ff-mono);
    font-size-adjust: 0.5;
}

input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    padding: .5rem;
    border: 1px solid var(--cl-gray-800);
    border-radius: var(--radius-xs);
}
input[type="checkbox"], input[type="radio"] {
    cursor: pointer;
}
input[type="number"][size] {
    width: 5ch;
    width: calc(attr(size type(<number>)) * 1.2ch + 2em); /* adjust size for spinner */
}
/* endregion */


/* region Utilities */
.no-cap {
    text-box: trim-both cap alphabetic;
}

.nowrap {
    white-space: nowrap;
}

.fw-bold {
    font-weight: var(--fw-bold);
}
.mono {
    font-family: var(--ff-mono);
}
.fw-black {
    font-weight: var(--fw-black);
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.text-end {
    text-align: end
}
.text-start {
    text-align: start
}
.text-sm {
    font-size: small;
}

/* Referenciadas pelo markup do ferias, mas ausentes no CSS de lá (ver
   docs/decisions/design-herdado-do-ferias.md). */
.text-danger {
    color: var(--cl-danger);
}
.bg-info {
    background: hsl(from var(--cl-info) h s l / 15%);
}
/* endregion */


/* region Aside */
.aside {
    height: 100dvh;
    width: 20rem;

    overflow-y: auto;
    color-scheme: dark;

    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--cl-black);
    color: var(--cl-white);

    position: fixed;
}
/* endregion */


/* region Badge */
.badge {
    --badge-color: deeppink;
    background: hsl(from var(--badge-color) h s l / 30%);
    padding: 0 0.5rem;
    white-space: nowrap;
    border-radius: 9999px;
    font-size: var(--fs-sm);
}
/* endregion */


/* region Branding */
.branding {
    display: grid;
    justify-items: right;
    padding: 2rem;
    gap: 1rem;
}

.branding__logo {
    width: 120px;
    height: auto;
}

.branding__website {
    font-weight: 600;
}
/* endregion */


/* region Layout */
.layout {
    display: grid;
    height: 100%;
    grid-template-columns: 20rem 1fr;
}

.layout__body {
    position: relative;
    container-type: inline-size;
}
/* endregion */


/* region Menu */
.menu {
    color: var(--cl-gray-700);

    a:hover,
    a:focus-visible {
        color: var(--cl-white);
    }
}

.menu__item {
    display: block;
    padding: 1rem 2rem;
}

.menu__item--active,
.menu__item[aria-current="page"] {
    background: hsl(from currentColor h s l / 20%);
}

.menu__subtitle {
    font-weight: bolder;
    text-transform: uppercase;
    font-size: var(--fs-xs);
    padding: 0.5rem 2rem;
    margin-top: 2rem;
}
/* endregion */


/* region Profile */
.profile {
    display: grid;
    grid-template:
        "a b" auto
        "_ d" auto
        / 2.5rem 1fr;
    padding: 1rem;
    gap: 0.5rem;
}

.profile__avatar {
    grid-area: a;
}

.profile__identity {
    grid-area: b;
    align-content: center;
}

.profile__name {
    font-weight: 500;
}

.profile__email {
    font-size: smaller;
    opacity: 50%;
}

.profile__exit {
    grid-area: d;
    font-size: smaller;
}
/* endregion */


/* region Table */
table {
    min-width: 100%;
    border-collapse: collapse;

    td,
    th {
        padding: 0.5rem 1.5rem;
    }

    td {
        vertical-align: top;
    }

    tr:not(:last-child) {
        border-bottom: 1px solid hsl(from currentColor h s l / 5%);
    }

    th {
        position: relative;
        padding-block: 0.25rem;
        text-align: initial;
        font-weight: 600;
        text-transform: uppercase;
        font-size: var(--fs-xs);
        background: hsl(from currentColor h s l / 10%);

        &[aria-sort="ascending"] > a::after {
            content: '↓';
        }
        &[aria-sort="descending"] > a::after {
            content: '↑';
        }
        > a {
            display: block; /* fills up space */
            &::after {
                margin-inline-start: .25rem;
            }
        }
    }

    tfoot {
        border-top: 2px solid hsl(from currentColor h s l / 10%);
    }

    .cell-num, .cell-date {
        text-align: end;
    }

    .cell-min, .cell-actions, .cell-author {
        width: 0.1%;
        white-space: nowrap;
    }
}
/* endregion */


.actions {
    display: flex;
    gap: 0.75rem;
    flex-flow: row-reverse wrap;
    align-items: baseline;
}

.btn {
    --btn-bg: light-dark(var(--cl-black), var(--cl-white));
    --btn-cl: light-dark(var(--cl-white), var(--cl-black));

    display: inline-block;
    background: var(--btn-bg);
    color: var(--btn-cl);
    border-radius: var(--radius-xs);
    border: none;
    cursor: pointer;
    padding: round(0.75rem, 1px) round(1.25rem, 1px);
    text-box: trim-both cap alphabetic;
}

.btn.btn--link {
    background: none;
    color: inherit;
}

.btn.btn--danger {
    background: var(--cl-danger);
    color: var(--cl-white);
}


.bento {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(12, 1fr);

    container-type: inline-size;
    container-name: bento;

    > * {
        grid-column: span 12;
        container-type: inline-size;
        @container bento (width <= 70ch) {
            grid-column: span 12 !important;
        }
    }
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }


.f__row {
    margin-bottom: 1rem;

    display: grid;
    gap: .25rem;
}

.f__row--checkbox {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.f__label {
    font-weight: var(--fw-medium);
}

.f__choices {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
}

.f__choice {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

.f__errors {
    color: var(--cl-warning);
    font-size: var(--fs-sm);
    padding: 0;

    li {
        list-style: none;
    }
}

.f__control {
}

.f__help {
    opacity: 66%;
    font-size: var(--fs-sm);
}


/* region Copy button */
code[data-copy-value] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;

    padding: .1rem .4rem;
    border: 1px solid light-dark(var(--cl-gray-800), var(--cl-gray-400));
    border-radius: var(--radius-xs);
    background: light-dark(var(--cl-gray-900), var(--cl-gray-300));
}

.copy-button {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font-size: 1em;
    opacity: 66%;
}
.copy-button:hover {
    opacity: 100%;
}
/* endregion */


/* region Kebab */
.kebab {
    --kebab__radius: .25rem;
    --kebab__opened-color: light-dark(var(--cl-gray-800), var(--cl-gray-300));
    --kebab__border-color: light-dark(var(--cl-gray-700), var(--cl-gray-400));
    --kebab__content-bg: light-dark(var(--cl-gray-800), var(--cl-gray-300));
    display: contents;
}

/* Popover */
.kebab__popover {
    /* https://anchor-tool.com/ */
    position-area: block-end span-inline-start;
    position-try-fallbacks: block-start span-inline-start;
}

/* Visuals */
.kebab__button {
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: var(--kebab__radius);
}
.kebab:has(:popover-open) .kebab__button {
    background: var(--kebab__opened-color);
}
.kebab__popover {
    border: 1px solid var(--kebab__border-color);
    background: var(--kebab__content-bg);
    border-radius: var(--kebab__radius);
    font-size: var(--fs-sm);
}
.kebab__content {
    display: flex;
    flex-flow: column nowrap;
    margin: .25rem .5rem;
    gap: .25rem;
    text-align: end;
}

/* Animation */
.kebab__popover {
    /* after exit */
    opacity: 0;
    transform: translateY(-.5rem);
    transition: all 300ms allow-discrete;

    /* opened */
    &:popover-open {
        opacity: 1;
        transform: translateY(0);
        /* before enter. must be after everything because it has the same precedence as bare selectors */
        @starting-style {
            opacity: 0;
            transform: translateY(.25rem);
        }
    }
}
/* endregion */


/* region Avatar (adaptado do ferias, ver decisão) */
.avatar {
    --avatar-color: var(--cl-gray-500);
    aspect-ratio: 1/1;
    clip-path: circle();
    display: grid;
    container: avatar / size;
}

.avatar > * {
    grid-area: 1 / 1;
}

.avatar__initials {
    background: hsl(from var(--avatar-color) h 90 30);
    align-content: center;
    text-align: center;
    font-size: 45cqw;
    color: hsl(from var(--cl-white) h s l / 75%);
    font-weight: 500;
}

.avatar__picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* endregion */


/* region Profile card (adaptado do Employee card do ferias, ver decisão) */
.profile-card {
    display: grid;
    grid-template-columns: max(30%, 20rem) 1fr;
}

.profile-card__id {
    padding: 2rem;
    text-align: center;
    background: hsl(from currentColor h s l / 5%);
    align-content: center;
}
.profile-card__id .avatar {
    width: 7rem;
    margin: 0 auto 1rem;
}

.profile-card__name {
    font-size: var(--fs-xxl);
    font-weight: var(--fw-medium);
}
.profile-card__email {
    font-size: var(--fs-sm);
    opacity: 66%;
}

.profile-card__stats {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: 2rem;
    padding: 2rem;
}
.profile-card__stats-card-header {
    font-weight: var(--fw-bold);
    margin-bottom: 1rem;
}
.profile-card__stats-items {
    display: grid;
    gap: 1rem;
}
.profile-card__stats-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: hsl(from currentColor h s l / 5%);

    dd {
        font-weight: var(--fw-bold);
        margin: 0;
    }
}

@container (width <= 45rem) {
    .profile-card {
        grid-template-columns: 1fr;
    }
    .profile-card__stats {
        grid-auto-flow: row;
    }
}
/* endregion */