/* privateer.cuearr.com -- shared styles.
 *
 * Palette + typography match cuearr.com's login, marketing.cuearr.com,
 * and the dev-portal auth chrome so anyone with an account across
 * multiple properties reads them as one family of sites.
 *
 * Two layouts:
 *   body           -- default dashboard layout: full-width topbar,
 *                     content flows below.
 *   body.centered  -- login layout: single card in the middle of a
 *                     dark parchment page.
 */

:root {
    --midnight:   #050a15;
    --deep:       #0a1728;
    --panel:      #17293e;
    --parchment:  #efdcb2;
    --parchment-dim: #c9b98f;
    --brass:      #c98f3d;
    --brass-hot:  #ffcd6b;
    --brass-deep: #7a5416;
    --crimson:    #a01e28;
    --crimson-hot:#d94656;
    --cyan:       #4fb7ff;
    --success:    #4fb7ff;
    --hairline:   rgba(201, 143, 61, 0.35);
}

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

body {
    min-height: 100vh;
    font-family: "Manrope", system-ui, sans-serif;
    color: var(--parchment);
    background:
        radial-gradient(ellipse at 20% 10%, rgba(126, 212, 255, 0.10), transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(255, 205, 107, 0.08), transparent 55%),
        linear-gradient(180deg, #050a15 0%, #0a1e35 60%, #0f2f4e 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Centered card layout (login, no-access landing). */
body.centered {
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
}
.card {
    width: 100%; max-width: 30rem;
    background: linear-gradient(160deg, rgba(23, 41, 62, 0.95), rgba(10, 23, 40, 0.95));
    border: 1px solid var(--hairline);
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
    padding: clamp(1.5rem, 4vw, 2.2rem);
}

/* Topbar + brand chrome. */
.topbar {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.9rem 1.25rem;
    background: rgba(10, 23, 40, 0.85);
    border-bottom: 1px solid var(--hairline);
    backdrop-filter: blur(6px);
}
.brand {
    display: flex; align-items: center; gap: 0.7rem;
    text-decoration: none; color: inherit;
}
.brand img {
    width: 38px; height: 38px; border-radius: 50%;
    border: 2px solid var(--brass); background: #050a15;
}
.brand-name {
    font-family: "Cinzel Decorative", serif; font-weight: 900;
    font-size: 1.05rem; letter-spacing: 0.04em;
}
.brand-sub {
    font-family: "IM Fell English", serif; font-style: italic;
    font-size: 0.75rem; color: var(--brass-hot);
}
.topbar-nav {
    display: flex; gap: 1rem; margin-left: auto;
    font-size: 0.9rem;
}
.topbar-nav a {
    color: var(--parchment-dim);
    text-decoration: none;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
}
.topbar-nav a:hover { color: var(--parchment); background: rgba(201, 143, 61, 0.08); }
.topbar-nav a.active { color: var(--brass-hot); background: rgba(201, 143, 61, 0.12); }

.topbar-org {
    font-family: "IM Fell English", serif; font-style: italic;
    color: var(--parchment-dim); font-size: 0.9rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--hairline); border-radius: 999px;
}
.topbar-org strong { color: var(--brass-hot); font-family: Manrope, sans-serif; font-weight: 700; font-style: normal; }

/* Scope pill container (Phase 4c): org pill left, brand pill right. */
.topbar-scope {
    display: flex; align-items: center; gap: 0.5rem;
    flex-wrap: wrap;
}

/* Multi-org / multi-brand switchers (Phase 4b / 4c).  Same pill
   shape so single-scope and multi-scope layouts look the same. */
.topbar-org-switch,
.topbar-brand-switch {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.4rem 0.2rem 0.6rem;
    border: 1px solid var(--hairline); border-radius: 999px;
    background: rgba(5, 10, 21, 0.5);
}
.topbar-brand-switch {
    /* Slight visual differentiation so the two pills don't blur
       together on wide screens.  A quiet cyan wash matches the
       accent colour we use elsewhere for "context / meta" info. */
    border-color: rgba(79, 183, 255, 0.35);
    background: rgba(5, 10, 21, 0.55);
}
.topbar-org-switch select,
.topbar-brand-switch select {
    background: transparent;
    border: 1px solid transparent;
    color: var(--brass-hot);
    font-family: Manrope, sans-serif; font-weight: 700; font-size: 0.9rem;
    padding: 0.25rem 0.35rem;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    max-width: 20rem;
}
.topbar-brand-switch select { color: var(--cyan); }
.topbar-org-switch select:hover,
.topbar-brand-switch select:hover  { border-color: var(--brass); }
.topbar-org-switch select:focus,
.topbar-brand-switch select:focus  {
    border-color: var(--brass-hot); box-shadow: 0 0 12px rgba(255,205,107,0.2);
}
.topbar-org-switch select option,
.topbar-brand-switch select option { background: #0a1728; color: var(--parchment); }

button.tiny {
    font-size: 0.72rem; padding: 0.3rem 0.6rem;
    background: transparent; color: var(--brass-hot);
    border: 1px solid var(--hairline); border-radius: 6px; cursor: pointer;
}
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); border: 0;
}

/* Page content. */
.page {
    max-width: 72rem; margin: 0 auto;
    padding: 2rem clamp(1rem, 3vw, 2rem);
}
h1 {
    font-family: "Cinzel Decorative", serif; font-weight: 900;
    font-size: 1.5rem; margin-bottom: 0.4rem;
}
.lede {
    font-family: "IM Fell English", serif; font-style: italic;
    color: var(--parchment-dim); font-size: 1rem; line-height: 1.5;
    margin-bottom: 1.6rem;
}
h2 {
    font-family: "Cinzel Decorative", serif; font-weight: 700;
    font-size: 1.2rem;
    margin: 1.8rem 0 0.6rem;
}

/* Grid of overview cards. */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}
.tile {
    background: rgba(23, 41, 62, 0.75);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 1rem 1.1rem;
    color: var(--parchment);
    text-decoration: none;
    display: block;
    transition: transform 0.12s ease, border-color 0.12s ease;
}
.tile:hover { transform: translateY(-2px); border-color: var(--brass); }
.tile-value {
    font-family: "Cinzel Decorative", serif; font-weight: 900;
    font-size: 2rem; color: var(--brass-hot);
    line-height: 1.1;
}
.tile-label {
    font-family: "IM Fell English", serif; font-style: italic;
    color: var(--parchment-dim); font-size: 0.9rem;
    margin-top: 0.2rem;
}

/* Auth form widgets (login page). */
h1.brand-heading {
    font-size: 1.35rem; margin-bottom: 0.4rem;
}
.brand-block {
    display: flex; align-items: center; gap: 0.8rem;
    margin-bottom: 1.4rem;
}
.msg {
    margin-bottom: 1rem; padding: 0.7rem 0.9rem;
    border-radius: 6px; font-size: 0.92rem; line-height: 1.45;
}
.msg.error { background: rgba(160, 30, 40, 0.18); border-left: 3px solid var(--crimson-hot); color: #ffc9ce; }
.msg.ok    { background: rgba(79, 183, 255, 0.10); border-left: 3px solid var(--cyan); color: #bfe6ff; }
.field { margin-bottom: 1rem; }
.field label {
    display: block; margin-bottom: 0.35rem;
    font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--brass-hot);
}
.field input {
    width: 100%; padding: 0.7rem 0.85rem;
    background: rgba(5, 10, 21, 0.7);
    border: 1.5px solid rgba(201, 143, 61, 0.45); border-radius: 6px;
    color: var(--parchment); font-size: 1rem; font-family: inherit;
    outline: none;
}
.field input:focus { border-color: var(--brass-hot); box-shadow: 0 0 16px rgba(255, 205, 107, 0.25); }
.helper {
    margin-top: 0.4rem; font-size: 0.82rem;
    color: var(--parchment-dim); line-height: 1.45;
}
button.primary {
    width: 100%; padding: 0.85rem 1rem; cursor: pointer;
    font-family: "Cinzel Decorative", serif; font-weight: 900;
    font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
    border-radius: 6px;
    background: linear-gradient(180deg, #ffcd6b, #c98f3d 55%, #7a5416);
    color: #050a15;
    border: 1.5px solid #4a3410;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 3px 0 #3a2410;
    transition: transform 0.12s ease;
}
button.primary:hover:not(:disabled) { transform: translateY(-1px); }
button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.foot {
    margin-top: 1.4rem; text-align: center; font-size: 0.9rem;
    color: var(--parchment-dim);
}
.foot a { color: var(--brass-hot); font-weight: 700; }

/* Data table (Phase 4c: /brands/ list, /team/, etc.). */
.data-table {
    width: 100%; border-collapse: collapse;
    background: rgba(23, 41, 62, 0.55);
    border: 1px solid var(--hairline); border-radius: 8px;
    overflow: hidden;
}
.data-table th,
.data-table td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid rgba(201, 143, 61, 0.15);
    text-align: left; font-size: 0.95rem;
}
.data-table th {
    font-family: "Cinzel Decorative", serif; font-weight: 700;
    font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--brass-hot); background: rgba(5, 10, 21, 0.4);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table .row-actions { text-align: right; white-space: nowrap; }
.data-table .row-actions a,
.data-table .row-actions .link-btn { margin-left: 0.9rem; }

/* Reused: monospace-ish snippet in a table cell. */
.mono {
    font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
    font-size: 0.88rem; color: var(--parchment-dim);
}

/* Status pills. */
.pill {
    display: inline-block;
    font-family: Manrope, sans-serif; font-weight: 700;
    font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.15rem 0.55rem; border-radius: 999px;
}
.pill-active   { background: rgba(79, 183, 255, 0.14); color: var(--cyan); border: 1px solid rgba(79, 183, 255, 0.35); }
.pill-archived { background: rgba(255, 205, 107, 0.10); color: var(--brass-hot); border: 1px solid var(--hairline); }
.pill-suspended{ background: rgba(160, 30, 40, 0.18); color: #ffc9ce; border: 1px solid var(--crimson); }

/* "Add a thing" button used on list pages. */
.btn-add {
    display: inline-block;
    padding: 0.55rem 1rem; border-radius: 6px;
    background: linear-gradient(180deg, #ffcd6b, #c98f3d 55%, #7a5416);
    color: #050a15; text-decoration: none;
    font-family: "Cinzel Decorative", serif; font-weight: 900;
    font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
    border: 1.5px solid #4a3410;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 3px 0 #3a2410;
    transition: transform 0.12s ease;
}
.btn-add:hover { transform: translateY(-1px); }

/* Link-styled <button> for inline delete/archive forms. */
.link-btn {
    background: none; border: none; padding: 0;
    color: var(--brass-hot); font: inherit; cursor: pointer;
    text-decoration: underline;
}
.link-btn:hover { color: var(--parchment); }

/* Inline form to sit alongside "Rename" link in a table cell. */
.inline-form { display: inline; }

/* Empty-state / "coming soon" card. */
.empty-card {
    background: rgba(23, 41, 62, 0.55);
    border: 1px dashed var(--hairline); border-radius: 10px;
    padding: 1.5rem 1.6rem;
    color: var(--parchment-dim);
}
.empty-card h2 {
    font-family: "Cinzel Decorative", serif; font-weight: 900;
    color: var(--brass-hot); font-size: 1.1rem;
    margin: 0;
}

/* No-access landing. */
.crest {
    width: 68px; height: 68px; border-radius: 50%;
    background: rgba(160, 30, 40, 0.10);
    border: 2px solid var(--crimson-hot);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
    color: var(--crimson-hot); font-size: 1.8rem; font-weight: 900;
}