:root { --night:#0D1B2A; --sky:#1E90FF; --cloud:#F5F5F5; --cyan:#2ED7E2; --gold:#FFC300; --primary700:#0F6CBD; --primary600:#1280DA; --primary500:#2196F3; --primary400:#4AA3F5; --bg:var(--cloud); --surface:#FFFFFF; --text:#0D1B2A; --muted:#7A8899; --border:#E5E7EB; --borderStrong:#CBD5E1; --shadow:0 8px 24px rgba(13,27,42,0.12); --radius:12px; } /* Define shared theme tokens for consistent styling */
*, *::before, *::after { box-sizing:border-box; } /* Ensure predictable box model across components */
html, body { height:100%; } /* Allow full height layouts for flex centering */
body { margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Establish global typography and background */
a { color:var(--sky); text-decoration:none; } /* Provide default link appearance */
a:hover { text-decoration:underline; } /* Highlight links on hover for accessibility */
header { padding:1rem 1.25rem; background:var(--night); color:#FFFFFF; box-shadow:0 1px 4px rgba(0,0,0,0.2); position:sticky; top:0; z-index:10; display:flex; align-items:center; } /* Primary header styling for authenticated views */
header h1 { margin:0; font-size:1.125rem; color:#FFFFFF; } /* Keep header titles compact and readable */
header.topbar { position:sticky; top:0; z-index:50; background:linear-gradient(0deg,var(--primary700),var(--primary600)); color:#FFFFFF; box-shadow:0 2px 10px rgba(0,0,0,0.15); } /* Gradient header variant for marketing flows */
.topbar .bar { max-width:1200px; margin:0 auto; padding:0.85rem 1.25rem; display:flex; align-items:center; gap:1rem; } /* Layout container for topbar contents */
.crumbs { margin-left:1rem; font-size:0.9rem; color:#E0E6ED; display:flex; gap:0.5rem; align-items:center; } /* Breadcrumb styling shared across dashboards */
.crumbs a { color:#E0E6ED; text-decoration:none; } /* Maintain subtle breadcrumb links */
.crumbs .sep { opacity:0.6; margin:0 0.25rem; } /* Style breadcrumb separators */
.spacer { flex:1 1 auto; } /* Push trailing elements to the edge */
.userbar { display:flex; align-items:center; gap:0.5rem; font-size:0.95rem; color:#E0E6ED; } /* Authenticated user status container */
.userbar button { padding:0.35rem 0.6rem; border:1px solid var(--cyan); border-radius:6px; background:#FFFFFF; cursor:pointer; color:var(--text); transition:background 0.15s ease,color 0.15s ease; } /* Styled logout and action buttons */
.userbar button:hover { background:var(--cyan); color:var(--night); } /* Accent hover for user actions */
.wrap { max-width:900px; margin:2rem auto; padding:0 1rem; } /* Centered column layout helper */
.container { max-width:1200px; margin:1.25rem auto; padding:0 1rem; } /* Wider content container for dashboards */
.grid { display:grid; gap:1rem; grid-template-columns:repeat(12,1fr); } /* Responsive twelve column grid */
.grid .card { grid-column:span 4; } /* Default dashboard card span */
@media (max-width:900px) { .grid { grid-template-columns:repeat(8,1fr); } } /* Adjust grid for medium screens */
@media (max-width:640px) { .grid { grid-template-columns:repeat(4,1fr); } } /* Adjust grid for small screens */
.card { background:var(--surface); border-radius:10px; box-shadow:var(--shadow); padding:1rem; border:1px solid rgba(13,27,42,0.05); position:relative; } /* Base card styling for panels and widgets */
.card h2 { margin:0.25rem 0 0.5rem; font-size:1.05rem; color:var(--text); } /* Headline styling inside cards */
.card p { margin:0; color:var(--muted); } /* Secondary text styling inside cards */
.muted { color:var(--muted); font-size:0.9rem; } /* Shared muted text utility */
.placeholder { color:#4A5A6B; font-style:italic; } /* Placeholder text styling */
.hero { background:#132238; color:#FFFFFF; border-radius:12px; padding:1.5rem; box-shadow:0 8px 24px rgba(19,34,56,0.25); margin-bottom:1.5rem; } /* Hero block for admin landing */
.hero h1 { margin:0; font-size:1.8rem; } /* Large heading inside hero */
.hero p { margin:0.25rem 0 1rem; color:rgba(255,255,255,0.85); } /* Supporting copy inside hero */
.nav { display:flex; flex-wrap:wrap; gap:0.75rem; } /* Navigation pill container */
.nav a { color:#132238; background:#FFFFFF; border-radius:999px; padding:0.4rem 0.9rem; text-decoration:none; font-weight:600; box-shadow:0 1px 4px rgba(0,0,0,0.08); transition:background 0.15s ease; } /* Navigation pill links */
.nav a:hover { background:#E2E8F0; } /* Hover state for navigation pills */
.table { width:100%; border-collapse:collapse; } /* Table layout for data grids */
.table th, .table td { padding:0.6rem 0.5rem; border-bottom:1px solid var(--border); text-align:left; vertical-align:middle; } /* Table cell styling */
.table thead th { background:#F3F6FB; font-weight:700; font-size:0.9rem; } /* Header row styling */
.table tbody tr:hover { background:#FAFCFF; } /* Highlight table rows on hover */
.table tfoot td { background:#FBFCFF; } /* Table footer background */
.form-table th { width:190px; white-space:nowrap; color:var(--muted); font-weight:600; } /* Align form labels inside tables */
.form-table td { vertical-align:middle; } /* Align form table fields */
.form-table .inline { display:flex; gap:0.5rem; align-items:center; } /* Inline field grouping */
.btn { appearance:none; border:1px solid var(--border); background:#FFFFFF; color:var(--text); padding:0.55rem 0.9rem; border-radius:8px; cursor:pointer; font-weight:600; transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } /* Base button styling */
.btn:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,0.06); } /* Hover lift for buttons */
.btn:active { transform:translateY(0); } /* Reset transform when active */
.btn-primary, button.primary { background:var(--primary600); color:#FFFFFF; border-color:transparent; } /* Primary button variant */
.btn-primary:hover, button.primary:hover { background:var(--primary500); } /* Hover state for primary buttons */
.btn-secondary, button.secondary { background:#FFFFFF; color:var(--primary600); border:1px solid var(--primary600); } /* Secondary button variant */
.btn-danger, button.btn-danger { background:#EF4444; color:#FFFFFF; border-color:transparent; } /* Destructive button variant */
input[type="text"], input[type="number"], input[type="password"], input[type="email"], select, textarea, .input { width:100%; padding:0.6rem 0.7rem; border:1px solid var(--border); border-radius:8px; outline:none; background:#FFFFFF; color:var(--text); transition:border-color 0.15s ease, box-shadow 0.15s ease; } /* Form control styling */
input:focus, select:focus, textarea:focus { border-color:var(--primary400); box-shadow:0 0 0 3px rgba(33,150,243,0.15); } /* Focus outline for form controls */
label { font-size:0.9rem; color:var(--muted); display:grid; gap:0.35rem; } /* Form label styling */
fieldset { border:1px solid var(--border); border-radius:8px; padding:0.75rem; } /* Fieldset styling for grouped fields */
legend { padding:0 0.5rem; color:var(--muted); font-weight:600; } /* Legend styling */
.stack { display:grid; gap:0.5rem; } /* Vertical stack helper */
.row { display:grid; grid-template-columns:repeat(12,1fr); gap:0.5rem; } /* Grid row helper */
.row > .span-6 { grid-column:span 6; } /* Six column span utility */
.row > .span-4 { grid-column:span 4; } /* Four column span utility */
.row > .span-3 { grid-column:span 3; } /* Three column span utility */
@media (max-width:900px) { .row > [class^="span-"] { grid-column:span 12; } } /* Stack spans on smaller screens */
.output { white-space:pre-wrap; border:1px solid var(--border); border-radius:8px; padding:0.75rem; background:#FBFCFE; } /* Styled container for logs and code */
.card .loading-overlay { position:absolute; inset:0; display:none; align-items:center; justify-content:center; gap:0.75rem; z-index:5; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); background:rgba(255,255,255,0.25); pointer-events:none; border-radius:10px; } /* Loading mask for card content */
.card.is-loading .loading-overlay { display:flex; pointer-events:all; } /* Activate overlay when card is loading */
.loading-overlay .spinner { width:34px; height:34px; border-radius:50%; border:3px solid rgba(30,144,255,0.25); border-top-color:var(--primary600); animation:spin 1s linear infinite; } /* Spinner element styling */
.loading-overlay .label { color:var(--text); font-weight:600; text-shadow:0 1px 1px rgba(255,255,255,0.3); } /* Loading status text styling */
@keyframes spin { to { transform:rotate(360deg); } } /* Spinner rotation animation */
.storage-volumes { display:flex; flex-direction:column; gap:0.75rem; } /* Container for storage volume list */
.storage-volume { border:1px solid var(--border); border-radius:8px; padding:0.75rem; background:#FFFFFF; position:relative; transition:box-shadow 0.2s ease, border-color 0.2s ease; } /* Base storage volume card */
.storage-volume-header { display:flex; justify-content:space-between; align-items:flex-start; gap:0.5rem; flex-wrap:wrap; } /* Layout for storage volume header */
.storage-volume-header .muted { font-size:0.85rem; } /* Smaller muted text in storage header */
.storage-volume-meta { display:flex; flex-direction:column; align-items:flex-end; gap:0.4rem; min-width:160px; } /* Metadata column for storage volume */
.storage-volume-metrics { text-align:right; } /* Align metrics to the right */
.storage-volume-metrics div { line-height:1.3; } /* Space out metric rows */
.storage-volume-actions { display:flex; gap:0.3rem; } /* Button group for storage actions */
.storage-volume-star { border:none; background:transparent; font-size:1.15rem; line-height:1; cursor:pointer; color:#CFD8E3; transition:transform 0.15s ease, color 0.15s ease; padding:0; } /* Favorite star button styling */
.storage-volume-star:focus { outline:2px solid rgba(30,144,255,0.3); outline-offset:2px; } /* Focus state for star buttons */
.storage-volume-star:hover { transform:scale(1.15); } /* Hover zoom for star buttons */
.storage-volume-star.user { color:#CBD5F5; } /* User favorite color */
.storage-volume-star.org { color:#D6D3D1; } /* Org favorite color */
.storage-volume-star.active.user { color:#FACC15; } /* Active user favorite color */
.storage-volume-star.active.org { color:#F97316; } /* Active org favorite color */
.storage-volume-star.compact { font-size:1rem; } /* Compact star size */
.storage-volume-star.disabled { opacity:0.4; cursor:not-allowed; } /* Disabled star appearance */
.storage-volume-actions .storage-volume-star + .storage-volume-star { margin-left:0.2rem; } /* Space between star buttons */
.storage-volume.highlight { border-color:#38BDF8; box-shadow:0 0 0 3px rgba(56,189,248,0.25); } /* Highlight selected storage volume */
.storage-volume-slider { margin-top:0.5rem; } /* Space above slider */
.storage-volume-slider-label { display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:0.95rem; } /* Label row for slider */
.storage-volume-slider-label.over { color:#EF4444; } /* Alert color when usage exceeds threshold */
.storage-volume-slider-wrapper { position:relative; margin-top:0.35rem; } /* Positioning wrapper for slider */
.storage-volume-slider-input { width:100%; appearance:none; -webkit-appearance:none; height:10px; border-radius:999px; background:linear-gradient(to right, var(--slider-active,#38BDF8) 0, var(--slider-active,#38BDF8) var(--value-pct,0%), var(--slider-track,#E5E7EB) var(--value-pct,0%), var(--slider-track,#E5E7EB) 100%); outline:none; position:relative; z-index:0; } /* Custom range slider styling */
.storage-volume-slider-input::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:#FFFFFF; border:2px solid var(--slider-active,#38BDF8); box-shadow:0 1px 2px rgba(0,0,0,0.2); position:relative; z-index:2; margin-top:-4px; } /* Slider thumb for WebKit */
.storage-volume-slider-input::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:#FFFFFF; border:2px solid var(--slider-active,#38BDF8); box-shadow:0 1px 2px rgba(0,0,0,0.2); position:relative; z-index:2; transform:translateY(-4px); } /* Slider thumb for Firefox */
.storage-volume-slider-input::-webkit-slider-runnable-track { height:10px; border-radius:999px; background:transparent; } /* Slider track for WebKit */
.storage-volume-slider-input::-moz-range-track { height:10px; border-radius:999px; background:transparent; } /* Slider track for Firefox */
.storage-volume-threshold { position:absolute; top:50%; transform:translate(-50%,-50%); width:2px; height:18px; background:#EF4444; border-radius:1px; pointer-events:none; z-index:1; } /* Visual threshold marker */
.storage-volume-usage-note { font-size:0.85rem; color:#EF4444; margin-top:0.25rem; } /* Warning note below slider */
.storage-favorites { display:flex; flex-direction:column; gap:0.6rem; margin-bottom:1rem; } /* Favorites list container */
.storage-favorites-group { padding:0.6rem 0.75rem; background:rgba(56,189,248,0.08); border-radius:8px; border:1px solid rgba(56,189,248,0.15); } /* Highlight group wrapper */
.storage-favorites-title { font-weight:600; font-size:0.9rem; color:var(--night); margin-bottom:0.35rem; } /* Title for favorites group */
.storage-favorites-items { display:flex; flex-wrap:wrap; gap:0.5rem; } /* Wrap favorite chips */
.storage-favorite-item { display:flex; align-items:center; gap:0.3rem; background:#FFFFFF; border:1px solid rgba(56,189,248,0.2); border-radius:999px; padding:0.2rem 0.6rem 0.2rem 0.35rem; box-shadow:0 1px 2px rgba(13,27,42,0.08); } /* Favorite chip styling */
.storage-favorite-item .storage-volume-star { transform:none; } /* Reset transform for stars inside chips */
.storage-favorite-item .storage-volume-star:hover { transform:scale(1.1); } /* Slight hover bump in chips */
.storage-favorite-link { border:none; background:transparent; font-size:0.9rem; cursor:pointer; color:var(--text); padding:0; } /* Favorite chip link */
.storage-favorite-link:hover { text-decoration:underline; color:var(--primary600); } /* Hover state for favorite link */
.storage-favorites-status { font-size:0.85rem; color:var(--muted); } /* Status text under favorites */
.box { background:#FFFFFF; border-radius:10px; box-shadow:0 4px 10px rgba(13,27,42,0.15); padding:1.25rem; max-width:520px; width:100%; margin:1rem auto; } /* Reusable centered modal card */
.fullscreen-center { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1rem; } /* Utility wrapper for centered pages */
.msg { margin-top:0.75rem; text-align:center; font-weight:600; } /* Status text helper */
.msg.error { color:#EF4444; } /* Error message color */
.msg.ok { color:#047857; } /* Success message color */
.info { background:#F0F6FF; border:1px solid #BFDBFE; color:#1E40AF; border-radius:8px; padding:0.75rem; margin:0.75rem 0; } /* Informational alert block */
.footer { position:fixed; left:0; right:0; bottom:0; background:#FFFFFF; border-top:1px solid var(--borderStrong); display:flex; gap:0.5rem; align-items:center; justify-content:center; padding:0.5rem 0.75rem; box-shadow:0 -1px 4px rgba(0,0,0,0.06); font-size:0.9rem; } /* Sticky footer styling */
.footer img { height:20px; width:auto; } /* Footer logo sizing */
.centered-page { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1rem; } /* Center content both directions */
body.minimal { background:var(--cloud); display:flex; align-items:center; justify-content:center; min-height:100vh; } /* Minimal layout variant for auth pages */
main.card-stack { display:grid; gap:1rem; } /* Stack cards vertically by default */