/* Trongate's baseline (public/css/trongate.css) underneath: in a layer, so
   every rule here and in the module stylesheets wins over it */
@import url('../../css/trongate.css') layer(trongate);

@view-transition {
    navigation: auto;
}

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@800;900&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap');

:root {
    /* Navy and periwinkle, after the Trongate framework's colours (not its logo) */
    --primary: #1d1e6e;
    --primary-hover: #2c2d8a;
    --accent: #6966d6;
    --accent-ink: #4f4cc7;
    --accent-soft: #ecebfa;
    --text-main: #1c1d5e;
    --text-muted: #585c7a;
    --border: #e3e5f0;
    --border-strong: #d5d8e6;
    --bg-app: #f6f7fb;
    --bg-subtle: #fafafd;
    --white: #ffffff;
    --font-display: 'Archivo', 'Geist', system-ui, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, monospace;
    --card-shadow: none;
    --card-hover-shadow: 0 12px 24px -16px rgba(29, 30, 110, 0.35);
}

/* trongate.css styles bare elements for Trongate's own pages; panel pages
   style their elements themselves, so those element defaults are undone here.
   :where() keeps this at zero specificity, so every panel rule still wins. */
:where(*, *::before, *::after) {
    box-sizing: revert;
}

:where(body) {
    font-family: revert;
    color: revert;
    font-size: revert;
}

:where(h1) {
    margin-top: revert;
    margin-bottom: revert;
    font-size: revert;
}

:where(h2) {
    font-size: revert;
}

:where(p) {
    line-height: revert;
}

:where(a) {
    color: revert;
}

:where(form) {
    width: revert;
}

:where(input, select, textarea) {
    padding: revert;
    font-size: revert;
    font-family: revert;
    line-height: revert;
    width: revert;
    height: revert;
    border: revert;
    background-color: revert;
    transition: revert;
    border-radius: revert;
    outline: revert;
}

:where(label) {
    margin: revert;
    clear: revert;
    display: revert;
    text-align: revert;
    font-size: revert;
    font-weight: revert;
    color: revert;
    text-transform: revert;
    letter-spacing: revert;
}

:where(label span) {
    color: revert;
}

:where(button) {
    border-radius: revert;
    background-color: revert;
    border: revert;
    margin: revert;
    padding: revert;
    color: revert;
    font-size: revert;
    font-weight: revert;
    cursor: revert;
    text-decoration: revert;
    font-family: revert;
    line-height: revert;
    transition: revert;
    box-shadow: revert;
    transform: revert;
    opacity: revert;
}

:where(ul) {
    margin: revert;
    list-style-type: revert;
}

:where(li) {
    line-height: revert;
}

:where(input[type="checkbox"], input[type="radio"]) {
    margin: revert;
    top: revert;
    position: revert;
    width: revert;
    height: revert;
}

:where(table) {
    border-collapse: revert;
    width: revert;
}

:where(th, td) {
    background-color: revert;
    color: revert;
    text-align: revert;
    font-size: revert;
    font-weight: revert;
    text-transform: revert;
    letter-spacing: revert;
    border: revert;
    padding: revert;
    cursor: revert;
}

:where(tr) {
    background-color: revert;
}

:where(hr) {
    border: revert;
    height: revert;
    background: revert;
    margin: revert;
}

:where(.card) {
    display: revert;
    flex-direction: revert;
    margin-bottom: revert;
    box-shadow: revert;
}

body {
    background-color: var(--bg-app);
    color: var(--text-main);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    line-height: 1.5;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Layout & Container */
header {
    background-color: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 0 2rem;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
    min-width: 0;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-separator {
    width: 1px;
    height: 1.5rem;
    background-color: var(--border);
    margin: 0 1.5rem;
}

.header-logo-link {
    text-decoration: none;
}

.header-crumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.header-crumbs .nav-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16rem;
    min-width: 0;
}

/* When space runs out, the project gives way before the current page */
.header-crumbs .nav-link:not([aria-current]) {
    flex-shrink: 3;
}

.header-crumbs .nav-link[aria-current="page"] {
    flex-shrink: 1;
}

.header-nav {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-shrink: 0;
}

.header-nav .nav-link {
    white-space: nowrap;
}

.header-crumbs .nav-link[aria-current="page"] {
    color: var(--text-main);
    font-weight: 600;
}

.header-crumb-sep {
    color: var(--border-strong);
}

.header-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.header-title {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--primary);
}

.header-title span {
    color: var(--accent-ink);
}

.nav-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-link:hover {
    color: var(--primary);
}

main {
    flex: 1;
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
}

/* Pages use the full width; forms keep a readable width, aligned left */
main .content {
    max-width: none;
}

main .content.narrow {
    max-width: 760px;
    margin-left: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Narrow screens: the mark stands in for the wordmark and links to Projects */
@media (max-width: 640px) {
    header {
        padding: 0 1rem;
        height: 56px;
    }

    .header-left {
        gap: 0.75rem;
    }

    .header-crumbs .nav-link {
        max-width: none;
    }

    .header-left:has(.header-crumbs) .header-separator,
    .header-projects {
        display: none;
    }

    /* Hidden from view but kept as the logo link's accessible name */
    .header-left:has(.header-crumbs) .header-title {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    main {
        padding: 1.25rem 1rem;
    }
}

/* Card Styles */
.card {
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: inherit;
    display: block;
}

a.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-hover-shadow);
}

.card h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.card-meta {
    font-size: 0.875rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Onboarding / Centered Form Card */
.onboarding-card {
    background-color: var(--white);
    width: 100%;
    max-width: 440px;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: var(--card-hover-shadow);
    margin: 2rem auto;
}

.onboarding-header {
    text-align: center;
    margin-bottom: 2rem;
}

.onboarding-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.onboarding-header p {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Grid System */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.section-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

/* Material Design Inspired Form Elements */
.form-group {
    margin-bottom: 2rem;
    position: relative;
}

.form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    transition: color 0.2s;
}

/* Code in a label is something to type as shown, so keep its case */
.form-label code {
    text-transform: none;
    letter-spacing: normal;
}

.form-input,
.form-select {
    display: block;
    width: 100%;
    padding: 1rem 0;
    font-size: 1rem;
    color: var(--text-main);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--border);
    border-radius: 0;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Custom Select Arrow for Material Style */
select.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 1.25rem;
}

/* Buttons */
.btn-primary,
.btn-create {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--white);
    background-color: var(--primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-primary:hover,
.btn-create:hover {
    background-color: var(--primary-hover);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.btn-secondary {
    background: white;
    color: var(--text-main);
    border: 1px solid var(--border);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: var(--bg-app);
    color: var(--text-main);
}

/* Status Pills */
.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-active {
    background-color: #d1fae5;
    color: #065f46;
}

.status-provisioning {
    background-color: #fef3c7;
    color: #92400e;
}

.status-error {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Dialog */
dialog {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    max-width: 500px;
    width: 100%;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

/* Trongate MX modal (mx-build-modal): trongate.css lays it out; these give
   it the panel's look */
#overlay {
    background-color: var(--primary);
    opacity: 0.32;
}

#modal-container {
    padding: 0 1rem 2rem;
    overflow-y: auto;
}

.modal {
    overflow: hidden;
    color: var(--text-main);
    border-radius: 12px;
    box-shadow: 0 24px 60px -12px rgba(29, 30, 110, 0.35);
}

.modal p {
    text-align: left;
}

.modal-heading {
    padding: 0.875rem 1.25rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
    border: none;
}

.modal-body {
    padding: 1rem 1.25rem 1.25rem;
    border: none;
}

/* While tg-admin is signed in as this customer (modules/impersonation) */
.impersonation-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    padding: 8px 16px;
    background-color: var(--primary);
    color: var(--white);
    font-size: 14px;
}

.impersonation-banner form {
    margin: 0;
}

.impersonation-banner button {
    padding: 4px 12px;
    border: 1px solid var(--white);
    border-radius: 6px;
    background: transparent;
    color: var(--white);
    font: inherit;
    cursor: pointer;
}

.impersonation-banner button:hover {
    background-color: var(--primary-hover);
}