@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");
/* SpanCloudSpace Theme — single source of truth for all styling constants */
/* To change a colour across the entire app, edit it here. */

:root {
    /* ===== Brand Colours ===== */
    --sc-teal: #48B9A1;
    --sc-teal-hover: #3da88f;
    --sc-teal-light: #e6f5f2;
    --sc-purple: #A072FD;
    --sc-purple-bg: #8376C8;
    --sc-purple-light: #f3eeff;
    --sc-red: #DC3545;
    --sc-amber: #F5A623;
    --sc-green: #4caf50;
    --sc-mint: #D4FFE9;

    /* ===== Neutrals ===== */
    --sc-header-bg: #5E5E5E;
    --sc-text-grey: #7E7E7E;
    --sc-bg: #f5f6f8;
    --sc-card-bg: #fff;
    --sc-field-bg: #f8f9fb;
    --sc-border: #e2e5ea;
    --sc-dormant-bg: #F4F4F4;
    --sc-text-dark: #1E2A3A;
    --sc-text-mid: #555;
    --sc-text-light: #999;

    /* ===== Typography ===== */
    --sc-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* ===== Header ===== */
    --sc-header-height: 100px;
    --sc-header-padding: 0 32px;
    --sc-logo-height: 44px;

    /* ===== Tabs (joined bar) ===== */
    --sc-tab-min-height: 50px;
    --sc-tab-font-size: 14px;
    --sc-tab-radius: 8px;
    --sc-tab-dormant-bg: var(--sc-dormant-bg);
    --sc-tab-dormant-border: var(--sc-teal);
    --sc-tab-dormant-text: var(--sc-text-grey);
    --sc-tab-dormant-weight: 400;
    --sc-tab-active-bg: #FFFFFF;
    --sc-tab-active-border: var(--sc-purple);
    --sc-tab-active-text: var(--sc-text-grey);
    --sc-tab-active-weight: 700;
    --sc-tab-hover-bg: var(--sc-mint);

    /* ===== Lozenges (aim pills, separate buttons) ===== */
    --sc-loz-min-height: 50px;
    --sc-loz-radius: 5px;
    --sc-loz-font-size: 13px;
    --sc-loz-dormant-bg: var(--sc-dormant-bg);
    --sc-loz-dormant-border: var(--sc-teal);
    --sc-loz-dormant-text: var(--sc-text-grey);
    --sc-loz-dormant-weight: 400;
    --sc-loz-active-bg: #FFFFFF;
    --sc-loz-active-border: var(--sc-purple);
    --sc-loz-active-text: var(--sc-text-grey);
    --sc-loz-active-weight: 700;
    --sc-loz-hover-bg: var(--sc-mint);

    /* ===== Permission Tags ===== */
    --sc-perm-bg: var(--sc-purple-bg);
    --sc-perm-radius: 5px;
    --sc-perm-padding: 8px 20px;
    --sc-perm-font-size: 13px;
    --sc-perm-weight: 400;

    /* ===== Legacy aliases (for pages still using old var names) ===== */
    --navy: var(--sc-text-dark);
    --teal: var(--sc-teal);
    --teal-hover: var(--sc-teal-hover);
    --teal-light: var(--sc-teal-light);
    --purple: var(--sc-purple-bg);
    --red: var(--sc-red);
    --amber: var(--sc-amber);
    --green: var(--sc-green);
    --text-dark: var(--sc-text-dark);
    --text-mid: var(--sc-text-mid);
    --text-light: var(--sc-text-light);
    --bg: var(--sc-bg);
    --card-bg: var(--sc-card-bg);
    --border: var(--sc-border);
    --field-bg: var(--sc-field-bg);
}

/* ===== Global Reset & Body ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--sc-font);
    background: var(--sc-bg);
    min-height: 100vh;
    color: var(--sc-text-dark);
}

/* ===== App Header ===== */
.header {
    background: var(--sc-header-bg);
    color: white;
    padding: var(--sc-header-padding);
    height: var(--sc-header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-left { display: flex; align-items: center; gap: 16px; }
.header-logo { height: var(--sc-logo-height); width: auto; }
.header-divider { width: 1px; height: 28px; background: rgba(255,255,255,0.25); }
.header-title { font-size: 16px; font-weight: 600; opacity: 0.9; letter-spacing: 0.3px; }
.header-right { display: flex; align-items: center; gap: 16px; }
.header-right span { opacity: 0.75; font-size: 14px; }
.nav-btn {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.15);
    color: white;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.15s;
}
.nav-btn:hover { background: rgba(255,255,255,0.25); }

/* ===== Joined Tab Bar ===== */
.tab-bar, .tabs {
    display: flex;
    gap: 0;
    background: transparent;
    padding: 0;
    overflow-x: auto;
    margin-bottom: -1px;
}
.tab-btn, .tabs > .tab {
    padding: 0 22px;
    min-height: var(--sc-tab-min-height);
    font-size: var(--sc-tab-font-size);
    font-weight: var(--sc-tab-dormant-weight);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--sc-tab-dormant-text);
    cursor: pointer;
    border: 1px solid var(--sc-tab-dormant-border);
    border-right: none;
    background: var(--sc-tab-dormant-bg);
    border-radius: 0;
    white-space: nowrap;
    transition: all 0.15s;
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    justify-content: center;
}
.tab-btn:first-child, .tabs > .tab:first-child { border-radius: var(--sc-tab-radius) 0 0 0; }
.tab-btn:last-child, .tabs > .tab:last-child { border-right: 1px solid var(--sc-tab-dormant-border); border-radius: 0 var(--sc-tab-radius) 0 0; }
.tab-btn:hover, .tabs > .tab:hover { background: var(--sc-tab-hover-bg); }
.tab-btn.active, .tabs > .tab.active {
    font-weight: var(--sc-tab-active-weight);
    color: var(--sc-tab-active-text);
    background: var(--sc-tab-active-bg);
    border-color: var(--sc-tab-active-border);
    border-right: 1px solid var(--sc-tab-active-border);
    z-index: 1;
}
.tab-btn.active + .tab-btn, .tabs > .tab.active + .tab { border-left: none; }
.tab-btn .tab-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.tab-btn .tab-dot.has-steps { background: var(--sc-teal); }
.tab-content, .tab-panel { display: none; }
.tab-content.active, .tab-panel.active { display: block; }

/* ===== Lozenges (aim pills, component selectors) ===== */
.aim-pill, .lozenge {
    padding: 0 18px;
    min-height: var(--sc-loz-min-height);
    border-radius: var(--sc-loz-radius);
    font-size: var(--sc-loz-font-size);
    font-weight: var(--sc-loz-dormant-weight);
    cursor: pointer;
    border: 1px solid var(--sc-loz-dormant-border);
    background: var(--sc-loz-dormant-bg);
    color: var(--sc-loz-dormant-text);
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
}
.aim-pill:hover, .lozenge:hover { background: var(--sc-loz-hover-bg); }
.aim-pill.active, .lozenge.active {
    border-color: var(--sc-loz-active-border);
    background: var(--sc-loz-active-bg);
    color: var(--sc-loz-active-text);
    font-weight: var(--sc-loz-active-weight);
}
.aim-pill.linked { box-shadow: none; border-width: 2px; }

/* ===== Permission Tags ===== */
.permission-tag {
    display: inline-block;
    background: var(--sc-perm-bg);
    color: white;
    padding: var(--sc-perm-padding);
    border-radius: var(--sc-perm-radius);
    font-size: var(--sc-perm-font-size);
    font-weight: var(--sc-perm-weight);
    margin: 4px;
}

/* ===== Scrollable Record Lists ===== */
.record-list-wrap { position: relative; }
.record-list-header { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; margin-bottom: 6px; padding: 0 2px; }
.record-list-title { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--sc-text-light); letter-spacing: 0.3px; }
.record-list-count { font-size: 10px; color: var(--sc-text-mid); font-weight: 600; background: var(--sc-field-bg); padding: 1px 7px; border-radius: 10px; margin-left: 6px; }
.record-list { max-height: 220px; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--sc-border); border-radius: 6px; scrollbar-width: thin; scrollbar-color: #b0b0b0 transparent; }
.record-list::-webkit-scrollbar { width: 8px; }
.record-list::-webkit-scrollbar-track { background: transparent; border-radius: 0 6px 6px 0; }
.record-list::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 4px; }
.record-list::-webkit-scrollbar-thumb:hover { background: #888; }
.record-list .field-row { border-bottom: 1px solid #f0f0f0; overflow: hidden; text-overflow: ellipsis; }
.record-list .field-row:last-child { border-bottom: none; }

/* ===== Common Buttons ===== */
.btn { padding: 8px 16px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; }
.btn-teal { background: var(--sc-teal); color: white; }
.btn-teal:hover { background: var(--sc-teal-hover); }
.btn-red { background: var(--sc-red); color: white; }
.btn-green { background: var(--sc-green); color: white; }
.btn-outline { background: none; border: 1px solid var(--sc-border); color: var(--sc-text-mid); }
.btn-outline:hover { border-color: var(--sc-teal); color: var(--sc-teal); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== Toast Notifications ===== */
.toast { position: fixed; bottom: 24px; right: 24px; padding: 12px 20px; border-radius: 8px; color: white; font-size: 13px; font-weight: 500; z-index: 200; transform: translateY(80px); opacity: 0; transition: all 0.3s; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { background: var(--sc-teal); }
.toast.error { background: var(--sc-red); }