/* ─── Kairos color palette ────────────────────────────────────────────────── */
:root {
    --s3-cyan: #0dcaf0;
    --s3-cyan-rgb: 13, 202, 240;
}

/* ─── Theme-aware surface variables ──────────────────────────────────────── */
[data-bs-theme="dark"] {
    --s3-surface:      rgba(255, 255, 255, 0.04);
    --s3-surface-soft: rgba(255, 255, 255, 0.025);
    --s3-border:       rgba(255, 255, 255, 0.1);
    --s3-border-soft:  rgba(255, 255, 255, 0.07);
    --s3-muted:        rgba(255, 255, 255, 0.68);
    --s3-muted-subtle: rgba(255, 255, 255, 0.5);
    /* Override Bootstrap primary to cyan */
    --bs-primary:      #0dcaf0;
    --bs-primary-rgb:  13, 202, 240;
    --bs-link-color:   #0dcaf0;
    --bs-link-hover-color: #31d2f3;
}

[data-bs-theme="light"] {
    --s3-surface:      rgba(255, 255, 255, 0.96);
    --s3-surface-soft: rgba(255, 255, 255, 0.9);
    --s3-border:       rgba(27, 43, 59, 0.16);
    --s3-border-soft:  rgba(27, 43, 59, 0.12);
    --s3-muted:        rgba(27, 43, 59, 0.72);
    --s3-muted-subtle: rgba(27, 43, 59, 0.48);
    --bs-primary:      #0a9fbd;
    --bs-primary-rgb:  10, 159, 189;
    --bs-link-color:   #0a9fbd;
    --bs-link-hover-color: #0891ab;
}

/* ─── Font ────────────────────────────────────────────────────────────────── */
body {
    min-height: 100vh;
    font-family: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-main {
    flex: 1 0 auto;
}

.app-shell > .landing-footer-meta {
    margin-top: auto;
}

/* ─── Gradient background (dark theme) ───────────────────────────────────── */
[data-bs-theme="dark"] body {
    background:
        radial-gradient(1200px 400px at 10% -5%,  rgba(13, 202, 240, 0.09), transparent 55%),
        radial-gradient(800px  300px at 95%   0%,  rgba(25, 135, 84,  0.07), transparent 60%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* ─── Soft gray background (light theme) ─────────────────────────────────── */
[data-bs-theme="light"] body {
    background:
        radial-gradient(900px 320px at 10% -5%, rgba(255, 255, 255, 0.6), transparent 55%),
        linear-gradient(180deg, #eef1f4 0%, #e6eaee 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* ─── Bootstrap btn-primary → Kairos cyan ────────────────────────────────── */
.btn-primary {
    --bs-btn-color:               #0b1f25;
    --bs-btn-bg:                  rgb(13, 202, 240);
    --bs-btn-border-color:        rgb(13, 202, 240);
    --bs-btn-hover-color:         #08181d;
    --bs-btn-hover-bg:            rgb(49, 210, 243);
    --bs-btn-hover-border-color:  rgb(49, 210, 243);
    --bs-btn-focus-shadow-rgb:    13, 202, 240;
    --bs-btn-active-color:        #071418;
    --bs-btn-active-bg:           rgb(77, 217, 245);
    --bs-btn-active-border-color: rgb(77, 217, 245);
    --bs-btn-disabled-color:      #0b1f25;
    --bs-btn-disabled-bg:         rgb(13, 202, 240);
    --bs-btn-disabled-border-color: rgb(13, 202, 240);
}

/* ─── Navbar ─────────────────────────────────────────────────────────────── */
.s3-navbar {
    background-color: rgba(13, 202, 240, 0.07) !important;
    border-bottom: 1px solid rgba(13, 202, 240, 0.18);
    backdrop-filter: blur(8px);
}
[data-bs-theme="light"] .s3-navbar {
    background-color: rgba(20, 22, 26, 0.96) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.s3-navbar .navbar-brand {
    color: #0dcaf0;
    letter-spacing: -0.01em;
}
.s3-navbar .navbar-brand:hover { color: #31d2f3; }
[data-bs-theme="light"] .s3-navbar .navbar-brand,
[data-bs-theme="light"] .s3-navbar .nav-link,
[data-bs-theme="light"] .s3-navbar .navbar-text,
[data-bs-theme="light"] .s3-navbar .btn {
    color: #ffffff !important;
}
[data-bs-theme="light"] .s3-navbar .nav-link.active,
[data-bs-theme="light"] .s3-navbar .nav-link:hover {
    color: #f3f4f6 !important;
}

.brand-logo {
    height: 1.25rem;
    width: auto;
    display: block;
}

.brand-logo-lg {
    height: 3rem;
    width: auto;
    display: inline-block;
}

/* ─── Page hero kicker (cyan label like Kairos) ──────────────────────────── */
.s3-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: rgba(13, 202, 240, 0.9);
    font-weight: 700;
    text-transform: uppercase;
}

/* ─── Bucket card ─────────────────────────────────────────────────────────── */
.bucket-card {
    border: 1px solid var(--s3-border-soft);
    background: linear-gradient(135deg, var(--s3-surface), transparent);
    transition: transform .15s, box-shadow .15s, border-color .15s;
    cursor: pointer;
}
[data-bs-theme="light"] .bucket-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 .4rem 1.1rem rgba(15, 23, 42, 0.08);
}
.bucket-card:hover {
    transform: translateY(-3px);
    border-color: rgba(13, 202, 240, 0.35);
    box-shadow: 0 .5rem 1.5rem rgba(13, 202, 240, 0.1) !important;
}
[data-bs-theme="light"] .bucket-card:hover {
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow: 0 .6rem 1.6rem rgba(15, 23, 42, 0.14) !important;
}
.bucket-icon {
    width: 52px;
    height: 52px;
    background: rgba(13, 202, 240, 0.12);
    border-radius: .5rem;
    transition: background-color .15s, box-shadow .15s;
}
[data-bs-theme="light"] .bucket-icon {
    background: rgba(56, 87, 112, 0.12);
}
[data-bs-theme="dark"] .bucket-icon {
    background: rgba(77, 121, 158, 0.2);
}
.bucket-card .text-cyan {
    transition: color .15s;
}
.bucket-card:hover .text-cyan {
    color: #0a9fbd !important;
}
[data-bs-theme="light"] .bucket-card:hover .bucket-icon {
    background: rgba(10, 159, 189, 0.18);
    box-shadow: inset 0 0 0 1px rgba(10, 159, 189, 0.25);
}
[data-bs-theme="dark"] .bucket-card:hover .bucket-icon {
    background: rgba(13, 202, 240, 0.24);
    box-shadow: inset 0 0 0 1px rgba(13, 202, 240, 0.32);
}
[data-bs-theme="light"] .bucket-card a {
    color: #182430;
}
[data-bs-theme="light"] .bucket-card a:hover {
    color: #0a9fbd;
}
[data-bs-theme="dark"] .bucket-card a {
    color: #e7eef5;
}
[data-bs-theme="dark"] .bucket-card a:hover {
    color: #6dd8f2;
}
.bucket-meta {
    margin-top: .55rem;
    display: grid;
    gap: .4rem;
}
.bucket-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    width: fit-content;
    max-width: 100%;
    padding: .22rem .5rem;
    border-radius: 999px;
    font-size: .76rem;
    line-height: 1;
    border: 1px solid var(--s3-border-soft);
    color: var(--s3-muted);
    background: color-mix(in srgb, var(--s3-surface-soft) 88%, transparent);
}
.bucket-meta-item i {
    font-size: .72rem;
    opacity: .85;
}
.bucket-meta-size {
    font-weight: 600;
}

.bucket-pie-legend-panel {
    border: 1px solid var(--s3-border-soft);
    background: #ffffff;
}

[data-bs-theme="dark"] .bucket-pie-legend-panel {
    background: color-mix(in srgb, var(--s3-surface-soft) 92%, transparent);
}

/* ─── Objects table card ─────────────────────────────────────────────────── */
.s3-table-card {
    border: 1px solid var(--s3-border);
    background-color: var(--s3-surface-soft);
}
.s3-table-card .table > :not(caption) > * > * {
    padding: .6rem .75rem;
}
.s3-table-card .table-hover tbody tr:hover > * {
    background-color: var(--s3-surface);
}

.s3-table-card .form-select {
    background-color: var(--s3-surface-soft);
    border-color: var(--s3-border-soft);
}

.s3-table-card .badge {
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ─── Drop zone ──────────────────────────────────────────────────────────── */
.drop-zone {
    border: 2px dashed rgba(13, 202, 240, 0.35);
    background: var(--s3-surface-soft, #f8fafc);
    transition: background .15s, border-color .15s;
    cursor: pointer;
}
.drop-zone.dragover {
    background: rgba(13, 202, 240, 0.08);
    border-color: #0dcaf0;
}

/* ─── Upload file item ───────────────────────────────────────────────────── */
.upload-item {
    background: var(--s3-surface-soft, #f8fafc);
    border: 1px solid var(--s3-border-soft, #e2e8f0);
    border-radius: .5rem;
    padding: .6rem .75rem;
    margin-bottom: .5rem;
}
.upload-item .progress {
    height: 5px;
    margin-top: .4rem;
}
.progress-bar {
    background-color: #0dcaf0;
}

/* ─── Breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
}

/* ─── Login / landing card ───────────────────────────────────────────────── */
.login-card {
    border: 1px solid var(--s3-border, rgba(255,255,255,0.12));
    border-radius: 1rem;
    background: linear-gradient(140deg, var(--s3-surface, rgba(255,255,255,0.05)), transparent);
    backdrop-filter: blur(4px);
}
[data-bs-theme="dark"] .login-card .form-control {
    border-color: var(--s3-border-soft);
    background-color: rgba(255,255,255,0.05);
}

/* ─── Utility ────────────────────────────────────────────────────────────── */
.border-dashed { border-style: dashed !important; }
.text-cyan { color: #3f5f7a !important; }

/* ─── Kairos footer metadata ────────────────────────────────────────────── */
.landing-footer-meta {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 0.5rem;
}

.landing-credit {
    grid-column: 3;
    justify-self: end;
    text-align: right;
    white-space: nowrap;
    font-size: 0.74rem;
    color: rgba(170, 178, 188, 0.55);
}

.landing-credit a {
    color: inherit;
    text-decoration-color: rgba(170, 178, 188, 0.32);
}

.landing-credit a:hover {
    color: rgba(185, 193, 203, 0.68);
    text-decoration-color: currentColor;
}

.landing-license-note {
    grid-column: 2;
    text-align: center;
    font-size: 0.74rem;
    color: rgba(170, 178, 188, 0.7);
}

.landing-license-note a {
    color: rgba(194, 224, 255, 0.95);
    text-decoration: none;
}

.landing-license-note a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .landing-footer-meta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
    }

    .landing-credit {
        grid-column: auto;
        justify-self: auto;
        text-align: center;
    }

    .landing-license-note {
        margin-top: 0.75rem;
        margin-bottom: 0.25rem !important;
    }
}