/* =================================================================
   Enterprise UI Design System — base.css
   Aesthetic: JPMC / McKinsey style corporate workspace tool.
   Serif display headers + clean sans body + dark luxury sidebar.

   HOW TO USE
   1. Copy this file into the new project (e.g. static/css/base.css).
   2. Only edit the values inside :root to re-brand a project —
      never rename the variables, and never restructure the rest
      of this file. The variable NAMES are the contract the rest
      of the skill (and any component snippets) rely on.
   3. Keep the two Google Fonts imports in <head> (see template.html).
   ================================================================= */

:root {
    /* Brand palette — customize these per project, keep the names */
    --primary-navy: #0B1E36;
    /* deep corporate navy — headers, dark buttons */
    --primary-slate: #1E293B;
    /* slate gray — secondary text, labels */
    --accent-gold: #C5A880;
    /* champagne accent — logo, active nav rail */
    --accent-teal: #0D9488;
    /* primary action color */
    --accent-teal-hover: #0F766E;
    --bg-workspace: #F8FAFC;
    /* main content background */
    --bg-sidebar: #0A1320;
    /* dark sidebar background */
    --border-color: #E2E8F0;
    --text-main: #1E293B;
    --text-muted: #64748B;
    --white: #FFFFFF;

    /* Status colors — reuse everywhere status is communicated */
    --success: #059669;
    --warning: #D97706;
    --danger: #DC2626;

    --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-workspace);
    color: var(--text-main);
    height: 100vh;
    overflow: hidden;
    display: flex;
}

/* -----------------------------------------------------------------
   App Shell — fixed-height, no page scroll. Only .content-scrollable
   scrolls. This is a desktop internal-tool shell, not a marketing
   site: don't add page-level scroll or mobile breakpoints unless
   the project explicitly needs them.
   ----------------------------------------------------------------- */
.app-shell {
    display: flex;
    width: 100%;
    height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 280px;
    background-color: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    z-index: 10;
}

.sidebar-brand {
    padding: 2rem 1.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.brand-logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.02em;
}

.brand-logo span {
    color: var(--accent-gold);
    font-weight: 500;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    display: block;
    margin-top: 0.2rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sidebar-nav {
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    overflow-y: auto;
}

.nav-label {
    font-size: 0.725rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
    padding: 0.5rem 0.75rem;
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.85rem 1rem;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.925rem;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: var(--transition-smooth);
}

.tab-btn:hover {
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--white);
}

.tab-btn.active {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--white);
    border-left: 3px solid var(--accent-gold);
    padding-left: calc(1rem - 3px);
}

.tab-btn svg {
    width: 18px;
    height: 18px;
    opacity: 0.8;
    stroke-width: 2px;
}

.sidebar-footer {
    padding: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.admin-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: var(--accent-gold);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-decoration: none;
}

.admin-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: var(--accent-gold);
}

/* Workspace main panel */
.workspace {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background-color: var(--bg-workspace);
}

.topbar {
    height: 70px;
    background-color: var(--white);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.5rem;
    flex-shrink: 0;
}

.topbar-title h1 {
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--primary-navy);
}

.topbar-title p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.system-status {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--success);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2);
    animation: breathe 3s infinite ease-in-out;
}

@keyframes breathe {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.6;
    }
}

.content-scrollable {
    flex: 1;
    overflow-y: auto;
    padding: 2.5rem;
}

/* -----------------------------------------------------------------
   Card panels
   ----------------------------------------------------------------- */
.card {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    padding: 2rem;
    margin-bottom: 2rem;
    transition: var(--transition-smooth);
}

.card:hover {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

/* Accent top-border variant — use for admin/special-purpose cards.
   Swap the color per meaning (teal = normal admin, navy = danger zone, etc). */
.admin-card {
    border-top: 4px solid var(--accent-teal);
}

.card-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}

.card-header-bar h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-navy);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-header-bar p.sub-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* -----------------------------------------------------------------
   Forms & inputs
   ----------------------------------------------------------------- */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--primary-slate);
    margin-bottom: 0.5rem;
}

.form-control {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text-main);
    background-color: var(--white);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.01);
    transition: var(--transition-smooth);
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-teal);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

input[type="file"].form-control {
    padding: 0.5rem;
    background-color: var(--bg-workspace);
    cursor: pointer;
}

/* -----------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--accent-teal);
    color: var(--white);
    border: none;
    padding: 0.65rem 1.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 5px;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn:hover {
    background-color: var(--accent-teal-hover);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-outline {
    background-color: transparent;
    color: var(--accent-teal);
    border: 1px solid var(--accent-teal);
}

.btn-outline:hover {
    background-color: rgba(13, 148, 136, 0.05);
}

.btn-outline-danger {
    background-color: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
}

.btn-outline-danger:hover {
    background-color: rgba(220, 38, 38, 0.05);
}

.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.775rem;
}

.btn-admin {
    background-color: var(--primary-navy);
}

.btn-admin:hover {
    background-color: #071324;
}

/* Sub-tab bar (secondary navigation inside a card/section) */
.admin-subtab-bar {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.85rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.admin-subtab-btn {
    padding: 0.55rem 1.15rem;
    font-size: 0.825rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background-color: #FAFBFD;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.admin-subtab-btn:hover {
    background-color: #F1F5F9;
    color: var(--primary-slate);
}

.admin-subtab-btn.active {
    background-color: var(--primary-navy);
    color: var(--white);
    border-color: var(--primary-navy);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* -----------------------------------------------------------------
   Data tables
   ----------------------------------------------------------------- */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-top: 1rem;
    background: var(--white);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    text-align: left;
}

th {
    background-color: #F8FAFC;
    padding: 0.85rem 1rem;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border-color);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    color: var(--text-main);
}

tr:last-child td {
    border-bottom: none;
}

tr:hover td {
    background-color: #F8FAFC;
}

/* Status-tinted select/input — left border color communicates state
   without needing an extra icon or column */
.select-source {
    width: 100%;
    padding: 0.45rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: var(--white);
    font-size: 0.85rem;
    outline: none;
    transition: var(--transition-smooth);
}

.select-source.mapped {
    border-left: 3px solid var(--success);
}

.select-source.unmapped {
    border-left: 3px solid var(--warning);
    background-color: #FFFDF5;
}

/* -----------------------------------------------------------------
   Badges / pills
   ----------------------------------------------------------------- */
.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pill-mapped {
    background-color: #E6F4EA;
    color: #137333;
}

.pill-unmapped {
    background-color: #FCE8E6;
    color: #C5221F;
}

/* -----------------------------------------------------------------
   Accordions
   ----------------------------------------------------------------- */
.accordion {
    background-color: #F8FAFC;
    color: var(--text-main);
    cursor: pointer;
    padding: 1rem 1.5rem;
    width: 100%;
    text-align: left;
    border: 1px solid var(--border-color);
    outline: none;
    transition: var(--transition-smooth);
    font-weight: 600;
    border-radius: 6px;
    margin-top: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion:hover {
    background-color: #F1F5F9;
    border-color: #CBD5E1;
}

.accordion.active {
    border-radius: 6px 6px 0 0;
    border-bottom: none;
    background-color: #EDE9FE;
    color: #5B21B6;
    border-color: #DDD6FE;
}

.panel {
    padding: 1.5rem;
    background-color: var(--white);
    display: none;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 6px 6px;
    margin-bottom: 0.75rem;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -----------------------------------------------------------------
   Terminal / console log panel — for pipeline output, job logs
   ----------------------------------------------------------------- */
.terminal {
    background-color: #0C111D;
    color: #38BDF8;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 0.85rem;
    padding: 1.25rem 1.5rem;
    border-radius: 6px;
    height: 250px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 1.5rem;
    border: 1px solid #1E293B;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.term-line {
    opacity: 0;
    animation: consoleFade 0.3s forwards;
    line-height: 1.4;
}

.term-time {
    color: #64748B;
    margin-right: 10px;
}

@keyframes consoleFade {
    to {
        opacity: 1;
    }
}

/* -----------------------------------------------------------------
   KPI bar / metric tiles
   ----------------------------------------------------------------- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.kpi-tile {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01);
    transition: var(--transition-smooth);
}

.kpi-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
}

.kpi-val {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-navy);
    line-height: 1.2;
}

.kpi-lbl {
    font-size: 0.725rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.dist-bar-outer {
    background-color: #E2E8F0;
    border-radius: 99px;
    height: 6px;
    width: 100%;
    overflow: hidden;
}

.dist-bar-inner {
    height: 100%;
    border-radius: 99px;
    background-color: var(--accent-teal);
    transition: width 0.6s ease;
}

/* -----------------------------------------------------------------
   Status / action containers (loading, empty, success states)
   ----------------------------------------------------------------- */
.action-container {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    animation: slideDown 0.3s ease-out;
}

.spinner {
    border: 3px solid rgba(13, 148, 136, 0.1);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border-left-color: var(--accent-teal);
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1.25rem auto;
}

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

    100% {
        transform: rotate(360deg);
    }
}