/* This establishes the cascade order of the layers, with reset coming first */
@import url('./reset.css') layer(reset);

@import url('./theme.css') layer(theme);
@layer base, components, application, utilities;

@layer base {

    html {
        font-family: 'DM Mono', monospace;
        font-weight: 300;
        font-style: normal;
        font-size: 14px;
        background-color: var(--bg-color);
        color: var(--text-color);
    }

    h1,
    h2,
    h3,
    h4,
    .body-text,
    label,
    p {
        font-family: 'DM Sans', sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
    }

    a {
        color: var(--link-color);
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    strong,
    b {
        font-weight: 600;
    }
    /* Icons */
    .icon--info {
        border: 1px solid var(--icon-border);
        border-radius: 54%;
        padding: 0.1rem 0.4rem;
        cursor: pointer;
    }
}

@layer components {

    /* Modals */
    #alert-modal {
        width: 80%;
        padding: 5rem;
        background-color: var(--bg-color);
        color: var(--text-color);
        border: 1px solid var(--border-color);
    }
    #userSearch-notification.success {
        background-color: var(--success-bg);
        color: white;
    }
    #userSearch-notification.success {
        background-color: var(--error-bg);
        color: white;
    }
    /* end Modals */

    #app {
        margin: 0 5rem;
    }

    #unauthed > img {
        width: 100%;
        opacity: 20%;
    }

    #app > header {
        display: flex;
        gap: 2rem;
        align-items: center;
        margin-bottom: 1rem;
        padding-top: 1rem;
    }

    #app > header {
        text-wrap: nowrap;
    }

    #app > header {
        container-type: inline-size;
    }

    #app > header > h1 {
        margin: 0;
    }

    header > nav {
        flex-grow: 1;
        justify-content: space-between;
    }

    header > nav,
    nav > ul,
    nav ul {
        display: flex;
    }

    header.search {
        margin-bottom: 1rem;
    }

    nav ul {
        gap: 2rem;
    }

    .nav--links {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .nav--sub {
        gap: 2rem;
        padding-left: 0.5rem;
        font-size: 0.85em;
    }

    .nav--sub::before {
        content: '>';
        opacity: 0.4;
    }

    header > nav ul {
        margin-bottom: 0;
    }

    header > nav li {
        border-bottom: 2px solid var(--nav-border);
        cursor: pointer;
        list-style-type: none;
    }

    header > nav li,
    header > nav li:last-child {
        margin-bottom: 0.5rem;
    }

    header > nav li > a {
        color: inherit;
        text-decoration: none;
        text-wrap: nowrap;
    }

    .nav--logout {
        text-wrap: nowrap;
    }

    .nav--hidden {
        visibility: hidden;
    }

    .nav--current_page {
        border-bottom: 4px solid var(--nav-border) !important;
    }

    h1 {
        margin-bottom: 3rem;
        font-size: 3rem;
    }

    h2 {
        margin-bottom: 2rem;
        font-size: 2rem;
    }

    h3 {
        margin-bottom: 1.5rem;
        font-size: 1.5rem;
    }

    p {
        margin-bottom: 1rem;
        font-size: 1rem;
        line-height: 1.4;
    }

    ul {
        list-style-position: inside;
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    ul.inner-list {
        margin-block: 0.5rem;
    }

    li {
        margin-bottom: 0.5rem;
        font-size: 1rem;
        list-style-type: disc;
        padding-left: 20px;
        text-indent: -20px;
    }

    li:last-child {
        margin-bottom: 0;
    }

    dl {
        display: grid;
        grid-template-columns: auto 1fr;
        margin-bottom: 1rem;
    }

    dt {
        text-align: right;
        margin-right: 1rem;
    }

    dd,
    dt {
        margin-bottom: 0.5rem;
    }

    dd > pre {
        text-wrap: wrap;
    }

    thead,
    dt {
        font-weight: 600;
    }

    thead td {
        margin-right: 1rem;
    }

    fieldset.horiz-fields {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    input {
        padding: 0.5rem;
        margin-right: 0.5rem;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background-color: var(--bg-color);
        color: var(--text-color);
    }

    input.invalid {
        border-color: var(--alert-border);
    }

    input.search {
        width: 50ch;
    }

    select {
        padding: 0.5rem;
        margin-right: 0.5rem;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background-color: var(--bg-color);
        color: var(--text-color);
    }

    button {
        padding: 0.5rem;
        margin-right: 0.5rem;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        cursor: pointer;
    }

    button {
        background-color: var(--button-bg-color);
        color: var(--text-color);
    }

    button:hover {
        background-color: var(--button-hover-bg-color);
    }

    button[disabled] {
        cursor: default;
        color: var(--disabled-color);
        background-color: var(--disabled-bg-color);
        border-color: var(--disabled-border-color);
    }

    .ability-chip {
        display: inline-block;
        padding: 8px 12px;
        font-size: 0.8rem;
        background-color: var(--button-bg-color);
        border-radius: 1rem;
        margin-right: 1rem;
        margin-bottom: 1rem;
    }

    .blocked {
        background-color: var(--alert);
    }

    .dirty {
        border: 1px solid var(--focus-outline);
    }

    .property-group {
        font-size: 0.8rem;
        background-color: var(--property-group-bg-color);
        border-radius: 1rem;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .property-group dl {
        margin-bottom: 0;
    }

    .flex-form form {
        display: flex;
        flex-direction: column;
        margin-bottom: 1rem;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 0.5rem;
        font-size: 1rem;
    }

    .collapsed {
        display: none;
    }

    .nav-page header {
        grid-column: 1 / -1;
    }

    .nav-page > section {
        overflow-wrap: break-word;
        word-break: break-word;
        box-sizing: border-box;
        margin-right: 1rem;
        margin-bottom: 2rem;
    }

    section > nav {
        margin-bottom: 1rem;
    }

    section.full-width {
        grid-column: 1 / -1;
    }

    table.full-width {
        width: 100%;
    }

    #iam {
        grid-template-columns: repeat(auto-fit, minmax(55ch, 1fr));
        gap: 1rem;
    }

    #users > nav {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    #users > nav > h2 {
        padding-right: 1rem;
        border-right: 1px solid var(--border-color);
    }

    #users > nav > ul > li {
        list-style-type: none;
        border-bottom: 1px solid var(--border-color);
    }

    #users > nav li,
    #users > nav li:last-child {
        margin-bottom: 0.5rem;
    }

    #users > nav li > a {
        color: inherit;
        text-decoration: none;
        text-wrap: nowrap;
    }

    #userSearch,
    #iam,
    #userArchive {
        display: grid;
    }

    section.iam-section {
        max-height: 400px;
        overflow-y: auto;
        position: relative;
        /* TODO(pholden): Figure out how to show this only when the content is scrollable. */
        /* Add a dropshadow at the bottom to make it clearer there is more content */
        /* box-shadow: inset 0 -10px 10px -10px rgba(0, 0, 0, 0.5); */
    }

    #userSearch {
        grid-template-columns: repeat(auto-fit, minmax(42ch, 1fr));
    }

    #accountLinkingManager tr:hover {
        background-color: var(--table-row-bg-hover);
    }

    #accountLinkingManager td {
        border: none;
    }

    #accountLinkingManager thead th {
        text-align: left;
        font-weight: bold;
        padding: 0.5rem;
    }

    #accountLinkingManager tbody th {
        width: 20%;
        text-align: left;
        font-weight: bold;
        padding: 0.5rem;
    }

    #accountLinkingManager td {
        width: 40%;
        padding: 0.5rem;
    }

    #accountLinkingManager .table-break-bottom {
        border-bottom: 1px solid var(--table-border);
    }

    #accountLinkingManager .invalid-error {
        background-color: var(--alert);
    }

    #accountLinkingManager .invalid-warn {
        background-color: var(--warn);
    }

    /* TABLES */

    /* Constrain the maximum height of large tables an scroll within the container. */
    div.table-container {
        max-height: 600px;
        overflow-y: auto;
        /* TODO(pholden): Figure out how to show this only when the content is scrollable. */
        /* Add a dropshadow at the bottom to make it clearer there is more content */
        /* box-shadow: inset 0 -10px 10px -10px rgba(0, 0, 0, 0.5); */
    }

    /* Basic Table Reset */
    table.property-table {
        width: 100%;
        border-collapse: collapse; /* Removes default spacing between cells */
        margin-bottom: 1rem;
    }

    table.property-table th,
    td {
        text-align: left; /* Left-aligns text for readability */
        border: 1px solid var(--table-border); /* Adds borders to cells */
        vertical-align: top; /* Ensures consistent vertical alignment */
        white-space: nowrap; /* Don't wrap content */
    }

    /* Header Styling */
    table.property-table th {
        padding: 12px;
    }

    table.property-table th {
        background-color: var(--table-header-bg); /* Light background for headers */
        font-weight: bold; /* Emphasize headers */
        text-transform: uppercase; /* Optional: Capitalize headers */
    }

    /* Make headers in table-containers always visible, even when scrolling. */
    div.table-container table.property-table th {
        position: sticky;
        top: 0;
        z-index: 2;
        border-bottom: 2px solid var(--table-border);
    }

    /* Row Styling */
    table.property-table tr:nth-child(even) {
        background-color: var(--table-row-stripe);
    }

    /* jobHistory has hidden expansion rows which need a different calculation */
    #jobHistory table.property-table tr:nth-child(4n + 3) {
        background-color: var(--table-row-stripe);
    }

    /* Hover Effect for Rows */
    table.property-table tr:hover {
        background-color: var(--table-row-bg-hover);
    }

    /* Cell Styling */
    table.property-table td {
        padding: 8px;
    }

    table.property-table td.row-title {
        font-weight: 600;
    }

    table.credits-table td {
        /* Override the row height as the buttons in this table give rows inconsistent heights.
         FIXME(pholden): is there a nicer way to do this? */
        height: 33px;
    }

    td.wrap {
        text-wrap-mode: wrap;
    }

    #usage table.property-table {
        width: auto;
    }

    #jobHistory th,
    #jobHistory td,
    td.clipped-cell {
        max-width: 14vw; /* 1 / num_columns */
        text-overflow: clip; /* Clip content to cell */
        white-space: nowrap; /* Don't wrap content */
        overflow-x: scroll; /* Scroll within the cell to see the clipped content */
        scrollbar-width: none; /* Don't show scrollbar in Edge/Chrome on Windows */
    }

    /* Responsive Adjustments */
    @media (max-width: 768px) {
        table {
            display: block; /* Makes the table scrollable on smaller screens */
            overflow-x: auto; /* Horizontal scroll for overflow */
            white-space: nowrap; /* Prevents cell content from wrapping */
        }
    }

    /* Accessible Focus State for Keyboard Navigation */
    table:focus-within {
        outline: 2px solid var(--focus-outline); /* Highlight when table is focused */
    }

    .spinner {
        width: 48px;
        height: 48px;
        border: 5px dotted var(--spinner-color);
        border-radius: 50%;
        display: inline-block;
        position: relative;
        box-sizing: border-box;
        animation: spin 4s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(-360deg);
        }
    }

    /*Alerts*/
    section.alert {
        padding: 1rem;
        display: flex;
        align-items: center;
        border-left: 1ch solid var(--alert-border);
        grid-column: 1/-1;
    }
    section.alert > button {
        margin-left: 1rem;
    }

    /* 3-state filter controls (on/off/ignore) */
    .flag-filter-control {
        display: grid;
        grid-template-columns: 8ch auto;
        grid-template-rows: 1fr 1fr;
    }

    .flag-filter-control > label {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 0 0.5rem 0.5rem 0;
    }

    .flag-filter-control > label:first-child {
        margin: 0.5rem;
    }

    .flag-filter-control--stats {
        grid-row: 1 / -1;
        justify-self: self-end;
        margin-right: 1ch;
        padding-right: 1ch;
        border-right: 1px solid black;
    }

    .flag-filter-control--radio {
        grid-column-start: 2;
    }

    .flag-filter-control--radio > input[type='radio'] {
        margin: 0 1ch 0 0;
    }

    .flag-filter-control--checkbox {
        margin: 0 0 0 1ch;
    }

    /* Buttons */
    .button--information {
        font-size: 1rem;
        border-radius: 1rem;
        padding: 0 .25rem;

    }

    /*Container Queries*/
    @container (max-width: 845px) {
        .nav--logout > .user--name {
            display: none;
        }

        .sign-out-text {
            display: none;
        }
    }
}

@layer application {
    #userOverview {
        grid-row: span 2;
    }

    #userOverview-dataSources {
        align-items: center;
    }

    #userOverview .deletion-pending {
        color: var(--status-flagged);
    }

    #dataSources-expanded {
        min-width: 40vw;
        min-height: 40vh;
    }

    .dataSources-expanded--container {
        display: grid;
        grid-template-rows: 2rem 1fr;
    }

    .dataSources-expanded--title{
        display: flex;
        justify-content: space-between;
    }

    #userOverview-providers {
        display: flex;
        flex-direction: column;
        gap: 1em;
    }

    #userProfile {
        grid-row: span 2;
    }
    #userProfile dt {
        padding-top: .5rem;
    }
    #userProfile .media--term,
    #userProfile .media--def,
    #userProfile .blocktext--term,
    #userProfile .blocktext--def {
        grid-column-start: 1;
        grid-column-end: -1;
        justify-self: start;
        padding-top: .5rem;
    }
    #userProfile .blocktext--def {
        display: flex;
        width: 100%;
        align-items: center;
    }
    #userProfile .blocktext--def-textarea {
        flex-grow: 1;
        margin-right: .5rem;
        margin-left: 2rem;
    }
    #userProfile .blocktext--def-button {
        flex-shrink: 0;
        margin-left: auto;
    }
    #userProfile .media--format {
        width: 10ch;
    }
    #userProfile .media--grid {
        width: 4ch;
        display: inline-block;
    }
    #userProfile .media--def {
        padding-left: 2rem;
    }
    #userProfile .media--def text-with-state {
        margin-top: 1rem;
    }

    #userArchive-modal {
        border: none;
        border-radius: 1rem;
        max-height: 90vh;
    }

    #userArchive-modal::backdrop {
        backdrop-filter: blur(3em);
    }

    #userArchive-modal figure {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto 1fr;
        gap: 1rem;
        margin-bottom: 1rem;
        align-items: start;
    }

    #userArchive-modal figure > .modal-nav {
        grid-column: 1 / -1;
    }

    #userArchive-modal figcaption {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    #userArchive-modal figcaption > button {
        align-self: end;
    }

    #userArchive-modal figure > img,
    #userArchive-modal figure > video {
        max-width: 100%;
        max-height: 70vh;
        object-fit: contain;
    }

    #userArchive ol > li {
        list-style-type: none;
    }

    #userArchive ol.list--days > li {
        margin-bottom: 2rem;
    }

    #userArchive ol.list--days > li > h3 {
        margin-bottom: 2rem;
    }

    #userArchive ol.list--day-images {
        display: grid;
        grid-template-columns: repeat(auto-fill, 10rem);
        gap: 0.2rem;
    }

    #userArchive ol.list--day-images > li {
        margin: 0;
        padding: 0;
        width: 10rem;
    }

    #userArchive ol > li.row--empty {
        display: none;
    }

    #userArchive li > img, #userArchive li > video {
        width: 100%;
        height: 100%;
        vertical-align: middle;
        object-fit: cover;
        border-radius: 0.2rem;
        max-height: max-content;
    }

    #userArchive ol.list--day-images li:first-child > img {
        border-top-left-radius: 1rem;
    }

    #userArchive header.search > section,
    #userArchive header.search > section > ul {
        display: flex;
    }

    #userArchive header.search > section > ul > li {
        list-style-type: none;
    }

    #userArchive header.search > section:first-child {
        align-items: center;
        margin-bottom: 0.25rem;
    }

    #userArchive header.search  .user-archive-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }

    #userArchive section.user-archive-dates {
        align-items: center;
        margin: 0.25rem 0;
    }

    #userArchive section .loaded-stats {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin: 0 1rem;
    }

    #userArchive .user-archive-filter-flag-container {
        padding: 0.25rem 1rem;
        display: flex;
        align-items: center;
        border-left: 1px solid lightgray;
    }

    .stripe-bottom--flagged {
        border-bottom: 2px solid var(--status-flagged);
    }
    .stripe-bottom--hidden {
        border-bottom: 2px solid var(--status-hidden);
    }
    .stripe-bottom--is_published {
        border-bottom: 2px solid var(--status-is_published);
    }
    .stripe-bottom--mod_hidden {
        border-bottom: 2px solid var(--status-mod_hidden);
    }
    .stripe-bottom--soft_ban {
        border-bottom: 2px solid var(--status-soft_ban);
    }

    /* Editable elements */
    [contenteditable=true] {
        outline: 2px solid var(--focus-outline)
    }

    [contenteditable] {
        padding: 0 1ch;
    }

}

@layer utilities {

    .pane--scroll-y {
        overflow-y: scroll;
    }
    /* Generic sizing classes */
    .width-90vw {
        width: 90vw;
    }

    .vh-75 {
        max-height: 75vh;
    }

    .align-self--center {
        align-self: center;
    }
}