/*
 * styles.css
 * ordessa-manager-web
 *
 * Application stylesheet, linked from index.html and installed again by
 * SwiftWebUIRuntime at mount.
 *
 * THIS FILE IS NOT A PLACE TO STYLE THINGS.
 *
 * Ordessa Manager for the web is a SwiftWebUI application, built the way
 * ordessa-web is: how an element looks is stated on the view as a modifier.
 * Only the three kinds of thing an inline style cannot express belong here:
 *
 *   1. selectors         — :hover, :focus-visible, :disabled, [aria-invalid], +
 *   2. at-rules          — @media, @keyframes, @starting-style
 *   3. custom properties — the --manager-* palette
 *
 * See CLAUDE.md, "The browser is built in Swift, not in CSS".
 */

:root {
    color-scheme: light dark;

    /* The grey of an administration window and the orange of the application
       icon (#F27000, the native AccentColor). */
    --manager-background: #f5f5f7;
    --manager-sidebar: #ececef;
    --manager-surface: #ffffff;
    --manager-surface-elevated: #f2f2f4;
    --manager-border: #d9d9de;
    --manager-separator: #e3e3e8;

    --manager-text: #1d1d1f;
    --manager-text-secondary: #6e6e73;
    --manager-text-tertiary: #a1a1a6;

    --manager-accent: #f27000;
    --manager-accent-text: #ffffff;
    --manager-accent-soft: rgba(242, 112, 0, 0.13);

    --manager-destructive: #d70015;
    --manager-destructive-soft: rgba(215, 0, 21, 0.1);
    --manager-warning: #c25e00;
    --manager-warning-soft: rgba(255, 149, 0, 0.16);
    --manager-success: #1f8a3b;
    --manager-success-soft: rgba(52, 199, 89, 0.16);
    --manager-info: #0a64d8;
    --manager-info-soft: rgba(0, 122, 255, 0.13);

    --manager-radius-card: 16px;
    --manager-radius-group: 12px;
    --manager-radius-control: 8px;
    --manager-radius-capsule: 999px;

    --manager-shadow-card: 0 4px 14px rgba(0, 0, 0, 0.06);
    --manager-shadow-card-hover: 0 10px 26px rgba(0, 0, 0, 0.1);
    --manager-shadow-sheet: 0 30px 80px rgba(0, 0, 0, 0.3);
    --manager-shadow-popover: 0 10px 30px rgba(0, 0, 0, 0.18);

    /* The scrim behind a sheet, read by swift-web-ui's runtime rule for
       `::backdrop`. */
    --swiftwebui-dialog-backdrop: rgba(0, 0, 0, 0.32);
}

@media (prefers-color-scheme: dark) {
    :root {
        --manager-background: #161618;
        --manager-sidebar: #1e1e21;
        --manager-surface: #232326;
        --manager-surface-elevated: #2c2c30;
        --manager-border: #3a3a3f;
        --manager-separator: #313136;

        --manager-text: #f5f5f7;
        --manager-text-secondary: #98989d;
        --manager-text-tertiary: #636366;

        --manager-accent: #ff8a1f;
        --manager-accent-text: #1a0d00;
        --manager-accent-soft: rgba(255, 138, 31, 0.18);

        --manager-destructive: #ff453a;
        --manager-destructive-soft: rgba(255, 69, 58, 0.16);
        --manager-warning: #ff9f0a;
        --manager-warning-soft: rgba(255, 159, 10, 0.18);
        --manager-success: #32d74b;
        --manager-success-soft: rgba(50, 215, 75, 0.16);
        --manager-info: #409cff;
        --manager-info-soft: rgba(64, 156, 255, 0.18);

        --manager-shadow-card: 0 4px 14px rgba(0, 0, 0, 0.35);
        --manager-shadow-card-hover: 0 10px 26px rgba(0, 0, 0, 0.45);
        --swiftwebui-dialog-backdrop: rgba(0, 0, 0, 0.55);
    }
}

/* Element resets. UA defaults rather than styling: a form control does not
   inherit the page's face on its own, and every box is measured the same way. */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--manager-background);
    color: var(--manager-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
    font: inherit;
}

/* Form groups ------------------------------------------------------------- */

/* The hairline between two rows of a grouped form. A sibling selector: no row
   knows whether it is the first. */
.manager-form-group > .manager-form-row + .manager-form-row {
    border-top: 1px solid var(--manager-separator);
}

.manager-list-row:hover {
    background: var(--manager-surface-elevated);
}

/* Controls ---------------------------------------------------------------- */

.manager-button:hover:not(:disabled),
.manager-chip:hover:not(:disabled) {
    filter: brightness(0.96);
}

.manager-icon-button:hover:not(:disabled) {
    background: var(--manager-surface-elevated) !important;
}

.manager-button:disabled,
.manager-icon-button:disabled,
.manager-select:disabled,
.manager-input:disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
}

.manager-input:focus-visible,
.manager-select:focus-visible {
    outline: 3px solid var(--manager-accent-soft);
    outline-offset: 0;
    border-color: var(--manager-accent) !important;
}

/* A field the server will not take. `aria-invalid` carries the meaning for a
   screen reader; the border is what everyone else sees. */
.manager-input[aria-invalid="true"]:focus-visible {
    border-color: var(--manager-destructive) !important;
    outline-color: var(--manager-destructive-soft);
}

/* The search box draws its own frame, so the input inside it does not. */
.manager-search:focus-within {
    border-color: var(--manager-accent) !important;
}

.manager-search .manager-input:focus-visible {
    outline: none;
}

button:focus-visible,
a:focus-visible,
.manager-switch:focus-visible {
    outline: 3px solid var(--manager-accent-soft);
    outline-offset: 2px;
}

/* A request in flight: a second press would sign in twice, or save twice. */
[aria-busy="true"].manager-signin-button {
    opacity: 0.65;
    pointer-events: none;
}

/* Sidebar ----------------------------------------------------------------- */

.manager-sidebar-item:hover:not(.manager-sidebar-item-selected) {
    background: var(--manager-surface-elevated) !important;
}

/* Only a drawer has anything to close. */
.manager-sidebar-close {
    display: none !important;
}

/* Cards ------------------------------------------------------------------- */

.manager-card:has(.manager-card-tappable:hover) {
    transform: translateY(-2px);
    box-shadow: var(--manager-shadow-card-hover) !important;
}

/* Sheets ------------------------------------------------------------------ */

/* The sheet's arrival and departure. The dialog stays mounted and only its
   `open` attribute changes, so the states are `[open]` and not-open — a
   selector — and the from-state needs `@starting-style`, an at-rule. The same
   arrangement as ordessa-web's account sheet. */
.swiftwebui-dialog {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        overlay 0.18s ease allow-discrete,
        display 0.18s ease allow-discrete;
}

.swiftwebui-dialog[open] {
    opacity: 1;
    transform: none;
}

@starting-style {
    .swiftwebui-dialog[open] {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
}

.swiftwebui-dialog::backdrop {
    backdrop-filter: blur(2px);
    transition: opacity 0.18s ease, display 0.18s ease allow-discrete;
}

/* Loading ----------------------------------------------------------------- */

.manager-spinner {
    animation: manager-spin 0.8s linear infinite;
}

@keyframes manager-spin {
    to { transform: rotate(360deg); }
}

/* Narrow screens ---------------------------------------------------------- */

/* Below 900px the sidebar becomes a drawer, as `.sidebarAdaptable` does on a
   narrow window, and a form row stacks its label over its control.
   `!important` throughout because a modifier lowers to an inline style, which
   no stylesheet rule outranks otherwise — the reason ordessa-web gives for its
   own 900px block. */
@media (max-width: 900px) {
    .manager-sidebar {
        position: fixed !important;
        inset: 0 auto 0 0;
        z-index: 50;
        width: min(300px, 86vw) !important;
        transform: translateX(-102%);
        transition: transform 0.2s ease;
        box-shadow: var(--manager-shadow-popover);
    }

    .manager-sidebar-open .manager-sidebar {
        transform: none;
    }

    .manager-sidebar-close {
        display: inline-flex !important;
    }

    .manager-mobile-bar {
        display: flex !important;
        position: sticky;
        top: 0;
        z-index: 6;
    }

    .manager-screen-header {
        position: static !important;
        flex-wrap: wrap;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .manager-toolbar {
        justify-content: flex-start !important;
        width: 100%;
    }

    .manager-form-row {
        flex-wrap: wrap;
    }

    .manager-form-row > label {
        flex-basis: 100% !important;
    }

    .manager-form-control {
        justify-content: flex-start !important;
        width: 100%;
    }

    .manager-card-grid {
        padding: 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .manager-spinner {
        animation-duration: 2.4s;
    }

    .swiftwebui-dialog,
    .swiftwebui-dialog::backdrop,
    .manager-sidebar {
        transition: none !important;
    }

    .swiftwebui-dialog {
        transform: none;
    }

    .manager-card:has(.manager-card-tappable:hover) {
        transform: none;
    }
}