/* ROR Cloud: plain, familiar, utilitarian.
 * A work tool in the family of Adobe's file view, Proton Drive and Retool Storage. Loaded AFTER gcloud-theme.css and
 * rorcloud-ui.css (and the page CSS the shared headers load). This file owns the design TOKENS and the app shell
 * (top bar, sidebar, page header). Components live in rorcloud-ui.css and gcloud-theme.css and only read these tokens.
 * "--gcloud-blue*" is the PRIMARY colour slot (name kept so Tailwind classes keep working); here it is forest green.
 *
 * Rules of this surface:
 *  - One sans family (Geist, system fallback), a fixed 14px base, tabular numerals in tables. No display faces.
 *  - Restrained colour: neutrals plus forest green for primary actions, selection and focus. Semantic red/amber for state only.
 *  - Flat structure: 1px borders, small radii (3-6px), shadows only on floating layers (menus, dialogs, toasts).
 *  - No glow, gradients, glass, tinted icon circles, eyebrow labels or decorative effects.
 */

:root {
    --pro-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    /* Motion system: purposeful, short, ease-out. Used by menus, dialogs, toasts, list changes, hover glides. */
    --pro-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --pro-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --pro-dur-fast: 120ms;
    --pro-dur: 180ms;
    --pro-dur-slow: 240ms;
    --pro-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    /* App shell geometry (admin pages stick to the same offset) */
    --rc-header-h: 64px;
    --rc-sidebar-w: 240px;
    --rc-row-h: 44px;
}

/* ---------- Light ---------- */
:root {
    color-scheme: light;

    --gcloud-blue: #1d5c3a;
    --gcloud-blue-hover: #174b30;
    --gcloud-blue-light: #e7f0ea;       /* selected rows, chips */
    --gcloud-blue-dark: #174b30;        /* text on the tint */
    --gcloud-blue-solid: #1d5c3a;       /* primary button fill, white text (8.4:1) */
    --gcloud-blue-solid-hover: #174b30;

    --gcloud-green: #1d5c3a;
    --gcloud-green-light: #e7f0ea;
    --gcloud-yellow: #8a4b08;
    --gcloud-yellow-light: #fbefd9;
    --gcloud-red: #b42318;
    --gcloud-red-light: #fdecea;

    --gcloud-white: #ffffff;
    --gcloud-bg: #f5f5f3;               /* page ground */
    --gcloud-bg-elevated: #ffffff;
    --gcloud-surface: #ffffff;
    --gcloud-surface-2: #ffffff;

    --gcloud-text-primary: #1b1c1e;
    --gcloud-text-secondary: #4a4d52;
    --gcloud-text-tertiary: #62666c;
    --gcloud-text-disabled: #9a9ea5;

    --gcloud-border: #d9dbdf;
    --gcloud-border-light: #e7e8eb;
    --gcloud-divider: #e7e8eb;
    --gcloud-input-border: #8e939a;

    --gcloud-shadow-1: none;
    --gcloud-shadow-2: 0 0 0 1px #d9dbdf, 0 4px 14px rgba(20, 22, 26, 0.12);
    --gcloud-shadow-3: 0 0 0 1px #d9dbdf, 0 10px 28px rgba(20, 22, 26, 0.18);
    --gcloud-scrim: rgba(20, 22, 26, 0.45);
    --gcloud-skel: #ececee;
    --gcloud-skel-hi: rgba(255, 255, 255, 0.7);
    --gcloud-image-outline: rgba(20, 22, 26, 0.1);

    --gcloud-radius-sm: 3px;
    --gcloud-radius-md: 4px;
    --gcloud-radius-lg: 6px;
    --gcloud-radius-full: 9999px;

    --rc-blue: #1d5c3a;
    --rc-blue-dark: #174b30;
    --rc-blue-tint: #e7f0ea;
    --rc-blue-solid: #1d5c3a;
    --rc-blue-solid-hover: #174b30;
    --rc-red: #b42318;
    --rc-red-tint: #fdecea;
    --rc-red-solid: #b42318;
    --rc-red-solid-hover: #8f1b12;
    --rc-amber: #8a4b08;
    --rc-green: #1d5c3a;
    --rc-text: #1b1c1e;
    --rc-muted: #4a4d52;
    --rc-line: #d9dbdf;
    --rc-line-soft: #e7e8eb;
    --rc-line-strong: #8e939a;
    --rc-surface: #ffffff;
    --rc-surface-2: #ffffff;
    --rc-bg: #f5f5f3;
    --rc-hover-ring: rgba(29, 92, 58, 0.4);
    --rc-toast-bg: #26282c;
    --rc-toast-fg: #f2f3f4;
    --rc-toast-link: #8fcaa9;
    --rc-chip-bg: #ecece9;
    --rc-drop-bg: rgba(245, 245, 243, 0.92);
    --rc-btn-scrim: rgba(255, 255, 255, 0.94);
    --rc-shadow-1: none;
    --rc-shadow-2: 0 0 0 1px #d9dbdf, 0 4px 14px rgba(20, 22, 26, 0.12);
    --rc-shadow-3: 0 0 0 1px #d9dbdf, 0 10px 28px rgba(20, 22, 26, 0.18);
    --rc-ease-out: var(--pro-ease);
    --rc-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* Second neutral layer for sidebars and toolbars (slightly warmer than the content surface) */
    --pro-panel: #f0f0ed;
    --pro-row-hover: #f4f4f2;
    --pro-row-selected: #e7f0ea;
    --pro-hl: #ecece9;                   /* sliding highlight inside menus and nav */
    --pro-danger-bg: #fdecea;            /* opaque red tint (inline delete confirm) */
    --pro-glyph: #62666c;                /* file glyphs: one neutral colour */
}

/* ---------- Dark: a neutral, muted graphite. Not glowing. ---------- */
[data-theme="dark"] {
    color-scheme: dark;

    --gcloud-blue: #5fae86;             /* text/borders on dark (6.2:1 on the surface) */
    --gcloud-blue-hover: #7cc09d;
    --gcloud-blue-light: rgba(95, 174, 134, 0.14);
    --gcloud-blue-dark: #8fcaa9;
    --gcloud-blue-solid: #2e7d54;       /* primary button fill, white text (5:1) */
    --gcloud-blue-solid-hover: #38905f;

    --gcloud-green: #5fae86;
    --gcloud-green-light: rgba(95, 174, 134, 0.14);
    --gcloud-yellow: #e0a340;
    --gcloud-yellow-light: rgba(224, 163, 64, 0.14);
    --gcloud-red: #f0776b;
    --gcloud-red-light: rgba(240, 119, 107, 0.14);

    --gcloud-white: #1c1d1f;
    --gcloud-bg: #151617;
    --gcloud-bg-elevated: #232427;
    --gcloud-surface: #1c1d1f;
    --gcloud-surface-2: #232427;

    --gcloud-text-primary: #ececee;
    --gcloud-text-secondary: #b4b7bd;
    --gcloud-text-tertiary: #9a9ea6;
    --gcloud-text-disabled: #666a71;

    --gcloud-border: #34363a;
    --gcloud-border-light: #2a2c2f;
    --gcloud-divider: #2a2c2f;
    --gcloud-input-border: #5a5e65;

    --gcloud-shadow-1: none;
    --gcloud-shadow-2: 0 0 0 1px #34363a, 0 6px 18px rgba(0, 0, 0, 0.45);
    --gcloud-shadow-3: 0 0 0 1px #34363a, 0 12px 32px rgba(0, 0, 0, 0.55);
    --gcloud-scrim: rgba(0, 0, 0, 0.6);
    --gcloud-skel: #26282b;
    --gcloud-skel-hi: rgba(255, 255, 255, 0.06);
    --gcloud-image-outline: rgba(255, 255, 255, 0.1);

    --rc-blue: #5fae86;
    --rc-blue-dark: #8fcaa9;
    --rc-blue-tint: rgba(95, 174, 134, 0.14);
    --rc-blue-solid: #2e7d54;
    --rc-blue-solid-hover: #38905f;
    --rc-red: #f0776b;
    --rc-red-tint: rgba(240, 119, 107, 0.14);
    --rc-red-solid: #c4392d;
    --rc-red-solid-hover: #d6473a;
    --rc-amber: #e0a340;
    --rc-green: #5fae86;
    --rc-text: #ececee;
    --rc-muted: #b4b7bd;
    --rc-line: #34363a;
    --rc-line-soft: #2a2c2f;
    --rc-line-strong: #5a5e65;
    --rc-surface: #1c1d1f;
    --rc-surface-2: #232427;
    --rc-bg: #151617;
    --rc-hover-ring: rgba(95, 174, 134, 0.5);
    --rc-toast-bg: #2c2e32;
    --rc-toast-fg: #ececee;
    --rc-toast-link: #8fcaa9;
    --rc-chip-bg: #2a2c2f;
    --rc-drop-bg: rgba(21, 22, 23, 0.9);
    --rc-btn-scrim: rgba(28, 29, 31, 0.92);
    --rc-shadow-1: none;
    --rc-shadow-2: 0 0 0 1px #34363a, 0 6px 18px rgba(0, 0, 0, 0.45);
    --rc-shadow-3: 0 0 0 1px #34363a, 0 12px 32px rgba(0, 0, 0, 0.55);

    --pro-panel: #191a1c;
    --pro-row-hover: #222326;
    --pro-row-selected: rgba(95, 174, 134, 0.14);
    --pro-hl: rgba(255, 255, 255, 0.08);
    --pro-danger-bg: #3a2523;
    --pro-glyph: #9a9ea6;
}

/* ---------- Base ---------- */
html body,
button, input, select, textarea {
    font-family: var(--pro-font);
}
html body {
    font-size: 14px;
    line-height: 1.45;
    background-color: var(--gcloud-bg);
    color: var(--gcloud-text-primary);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
::selection { background: rgba(29, 92, 58, 0.22); color: inherit; }
[data-theme="dark"] ::selection { background: rgba(95, 174, 134, 0.3); }
input, textarea { caret-color: var(--gcloud-blue); accent-color: var(--gcloud-blue-solid); }

/* Tabular figures wherever numbers line up */
table, .tabular, td, th, [data-numeric] { font-variant-numeric: tabular-nums; }

/* Browser surfaces: themed scrollbars, quiet and native-feeling */
* { scrollbar-width: thin; scrollbar-color: var(--gcloud-border) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--gcloud-border); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--gcloud-input-border); background-clip: content-box; border: 2px solid transparent; }

/* Focus: a plain 2px forest ring, same everywhere */
:focus-visible {
    outline: 2px solid var(--gcloud-blue);
    outline-offset: 2px;
    border-radius: var(--gcloud-radius-sm);
}

/* Standard radii (replaces the large rounded-card look) */
.rounded, .rounded-md { border-radius: var(--gcloud-radius-md); }
.rounded-lg, .rounded-xl, .rounded-2xl { border-radius: var(--gcloud-radius-lg); }

/* ---------- App shell: top bar ---------- */
.rc-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--rc-header-h);
    padding: 0 16px;
    background: var(--gcloud-surface);
    border-bottom: 1px solid var(--gcloud-border);
}
.rc-brand { display: flex; align-items: center; gap: 10px; flex: none; color: var(--gcloud-text-primary); text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: 0; }
.rc-brand img { height: 32px; width: auto; object-fit: contain; }   /* assets/logo-bar.png: the logo trimmed of its transparent margins, design unchanged */
.rc-toptitle { display: none; align-items: center; gap: 12px; min-width: 0; color: var(--gcloud-text-secondary); font-size: 14px; white-space: nowrap; }
.rc-toptitle::before { content: ""; width: 1px; height: 20px; background: var(--gcloud-border); }
@media (min-width: 768px) { .rc-toptitle { display: flex; } }
.rc-topsearch { flex: 1 1 auto; min-width: 0; max-width: 560px; margin-left: 16px; }
.rc-topactions { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }
.rc-avatar {
    display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    background: var(--gcloud-blue-solid); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer;
    transition-property: background-color; transition-duration: var(--pro-dur-fast); transition-timing-function: var(--pro-ease);
}
@media (hover: hover) and (pointer: fine) { .rc-avatar:hover { background: var(--gcloud-blue-solid-hover); } }
.rc-avatar[aria-expanded="true"] { background: var(--gcloud-blue-solid-hover); }
.rc-profile-menu { right: 0; top: calc(100% + 6px); bottom: auto; width: 260px; transform-origin: top right; }
.rc-profile-head { padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--gcloud-border-light); }
.rc-profile-head strong { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-profile-head span { display: block; font-size: 12px; color: var(--gcloud-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Search box (js/rc-searchbox.js builds the listbox) */
.autoComplete_wrapper { position: relative; width: 100%; }
.autoComplete_wrapper > input {
    width: 100%; height: 36px; padding: 0 40px 0 36px;
    font-size: 14px; color: var(--gcloud-text-primary);
    background-color: var(--gcloud-surface);
    border: 1px solid var(--gcloud-input-border);
    border-radius: var(--gcloud-radius-md);
    transition-property: border-color, box-shadow; transition-duration: var(--pro-dur-fast); transition-timing-function: var(--pro-ease);
}
.autoComplete_wrapper > input::placeholder { color: var(--gcloud-text-tertiary); opacity: 1; }
.autoComplete_wrapper > input:focus { outline: none; border-color: var(--gcloud-blue); box-shadow: 0 0 0 1px var(--gcloud-blue); }
.autoComplete_wrapper > .ph { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--gcloud-text-tertiary); pointer-events: none; z-index: 1; }
.autoComplete_wrapper > .rc-kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.autoComplete_wrapper:focus-within > .rc-kbd { display: none; }

.rc-sbox-list {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 60; margin: 4px 0 0; padding: 4px; list-style: none;
    min-width: min(320px, calc(100vw - 32px)); max-height: 340px; overflow-y: auto;
    border-radius: var(--gcloud-radius-lg); background-color: var(--gcloud-surface-2); box-shadow: var(--gcloud-shadow-2);
    transform-origin: top center; animation: rc-pop-in 140ms var(--pro-ease);
}
.rc-sbox-list[hidden] { display: none; }
.rc-sbox-opt { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border-radius: var(--gcloud-radius-sm); font-size: 14px; color: var(--gcloud-text-primary); cursor: pointer; }
.rc-sbox-opt > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-sbox-opt .ph { flex: none; font-size: 16px; color: var(--gcloud-text-tertiary); }
.rc-sbox-opt[aria-selected="true"] { background-color: var(--pro-hl); }
.rc-sbox-opt mark { background: transparent; color: var(--gcloud-blue-dark); font-weight: 600; }
.rc-sbox-all { margin-top: 4px; border-top: 1px solid var(--gcloud-border-light); border-radius: 0 0 var(--gcloud-radius-sm) var(--gcloud-radius-sm); color: var(--gcloud-blue-dark); font-weight: 500; }
.rc-sbox-none { padding: 10px; font-size: 14px; color: var(--gcloud-text-secondary); }

/* Mobile menu */
#mobileMenuBackdrop { opacity: 0; transition: opacity 180ms var(--pro-ease); background: var(--gcloud-scrim); }
#mobileMenu { background: var(--gcloud-surface); border-left: 1px solid var(--gcloud-border); box-shadow: var(--gcloud-shadow-3); transition: transform 200ms var(--pro-ease); }
.rc-mnav a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: var(--gcloud-radius-md); color: var(--gcloud-text-secondary); font-size: 14px; font-weight: 500; text-decoration: none; }
.rc-mnav a[aria-current="page"] { background: var(--pro-row-selected); color: var(--gcloud-blue-dark); }
.rc-mnav .rc-mnav-label { padding: 12px 12px 4px; font-size: 12px; font-weight: 500; color: var(--gcloud-text-tertiary); }

/* ---------- App shell: sidebar ---------- */
.sidebar-container { background: var(--pro-panel); border-right: 1px solid var(--gcloud-border); }
.rc-sidenav { position: relative; display: grid; align-content: start; gap: 2px; padding: 0 12px; }
.gcloud-sidebar-item {
    position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px;
    border-radius: var(--gcloud-radius-md); color: var(--gcloud-text-secondary); font-size: 14px; font-weight: 500; text-decoration: none;
    transition-property: color; transition-duration: var(--pro-dur-fast); transition-timing-function: var(--pro-ease);
}
.gcloud-sidebar-item .ph, .gcloud-sidebar-item .ph-fill { font-size: 18px; }
.gcloud-sidebar-item.active { color: var(--gcloud-blue-dark); }
.rc-sidenav:not(.rc-nav-js) .gcloud-sidebar-item.active { background: var(--pro-row-selected); }
.gcloud-sidebar-item:hover { color: var(--gcloud-text-primary); }
.gcloud-sidebar-item.active:hover { color: var(--gcloud-blue-dark); }
/* One shared indicator glides between the hovered / focused item and the current page (transform only) */
.rc-nav-ind {
    position: absolute; z-index: 0; left: 12px; right: 12px; top: 0; height: 36px; border-radius: var(--gcloud-radius-md);
    background: var(--pro-hl); opacity: 0; pointer-events: none;
    transition-property: transform, background-color, opacity; transition-duration: var(--pro-dur), var(--pro-dur-fast), var(--pro-dur-fast); transition-timing-function: var(--pro-ease);
}
.rc-nav-ind.is-on { opacity: 1; }
.rc-nav-ind.is-current { background: var(--pro-row-selected); }

/* Storage meter: a 4px bar and one line of text */
.rc-storage-bar { height: 4px; border-radius: 2px; background: var(--gcloud-border); overflow: hidden; }
.rc-storage .gcloud-progress { height: 4px; border-radius: 2px; background: var(--gcloud-border); }
.rc-storage .gcloud-progress-bar { width: 100%; border-radius: 2px; background: var(--gcloud-blue-solid); transform-origin: left; transition-property: transform, background-color; transition-duration: var(--pro-dur-slow), var(--pro-dur-fast); transition-timing-function: var(--pro-ease); }
.rc-storage .gcloud-progress-bar.warning { background: #b7791f; }
.rc-storage .gcloud-progress-bar.danger { background: var(--gcloud-red); }
.rc-storage-text { margin-top: 8px; font-size: 13px; line-height: 18px; color: var(--gcloud-text-secondary); font-variant-numeric: tabular-nums; }
.rc-storage[data-state="warning"] .rc-storage-text { color: var(--gcloud-yellow); }
.rc-storage[data-state="danger"] .rc-storage-text { color: var(--gcloud-red); font-weight: 500; }
[data-theme="dark"] .rc-storage .gcloud-progress-bar.warning { background: var(--gcloud-yellow); }

/* ---------- App shell: page header (title, count, actions) ---------- */
.rc-pagehead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 4px; }
.rc-pagehead h1 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: 0; overflow-wrap: anywhere; }
.rc-pagehead-count { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--gcloud-text-tertiary); font-variant-numeric: tabular-nums; }
.rc-pagehead-actions { display: flex; align-items: center; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
    .rc-nav-ind { transition-duration: 0s; }
    #mobileMenu, .rc-sbox-list, .rc-avatar { transition-duration: 0s !important; animation: none !important; }
    #mobileMenuBackdrop { transition-duration: 80ms; }
}