/*
 * STTCO content management theme.
 *
 * The Velok template ships Bootstrap plus component styles, but its compiled
 * stylesheet does not contain the layout classes its Blade partials reference,
 * so the shell is defined here instead. Everything else — cards, tables, forms,
 * tabs, badges — stays Bootstrap and is simply re-coloured to the STTCO brand.
 *
 * Brand tokens mirror src/styles/index.css in the frontend repository so the CMS
 * and the public site stay visually identical.
 */

:root {
    --sttco-brand: #2c7fab;
    --sttco-brand-strong: #236990;
    --sttco-brand-deep: #1b5577;
    --sttco-brand-50: #eef5f9;
    --sttco-brand-100: #d9e9f2;
    --sttco-accent: #f6c431;
    --sttco-accent-soft: #fdf3d3;
    --sttco-navy: #142d3d;
    --sttco-navy-900: #0e2230;
    --sttco-navy-700: #234356;
    --sttco-slate: #647583;
    --sttco-slate-light: #9aa9b5;
    --sttco-line: #e2eaf0;
    --sttco-mist: #f6f9fb;
    --sttco-danger: #b42318;
    --sttco-success: #16794c;

    --sttco-radius-sm: 4px;
    --sttco-radius-md: 6px;
    --sttco-radius-lg: 10px;

    --sttco-sidebar-width: 16.5rem;

    /* Bootstrap component colours, repointed at the brand palette. */
    --bs-primary: #2c7fab;
    --bs-primary-rgb: 44, 127, 171;
    --bs-link-color: #236990;
    --bs-link-color-rgb: 35, 105, 144;
    --bs-link-hover-color: #1b5577;
    --bs-body-color: #142d3d;
    --bs-body-bg: #f6f9fb;
    --bs-border-color: #e2eaf0;
    --bs-border-radius: 6px;
    --bs-font-sans-serif: "Cairo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
    font-family: var(--bs-font-sans-serif);
    background: var(--sttco-mist);
    color: var(--sttco-navy);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--sttco-navy);
    font-weight: 700;
}

/* ---------------------------------------------------------------- shell --- */

.sttco-shell {
    display: flex;
    min-height: 100vh;
}

.sttco-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--sttco-sidebar-width);
    display: flex;
    flex-direction: column;
    background: var(--sttco-navy);
    color: #fff;
    z-index: 1030;
}

.sttco-sidebar__brand {
    display: block;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    text-decoration: none;
}

.sttco-sidebar__logo {
    display: block;
    width: 100%;
    max-width: 10.5rem;
    height: auto;
    background: #fff;
    border-radius: var(--sttco-radius-md);
    padding: .5rem .65rem;
}

.sttco-sidebar__tagline {
    margin: .7rem 0 0;
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sttco-slate-light);
}

.sttco-nav {
    list-style: none;
    margin: 0;
    padding: 1rem .75rem;
    flex: 1 1 auto;
    overflow-y: auto;
}

.sttco-nav__link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .8rem;
    margin-bottom: .2rem;
    border-radius: var(--sttco-radius-md);
    color: rgba(255, 255, 255, .78);
    font-size: .95rem;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.sttco-nav__link:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.sttco-nav__link.is-active {
    background: var(--sttco-brand);
    color: #fff;
    font-weight: 600;
}

/* The brand's yellow marks the active item without relying on colour alone. */
.sttco-nav__link.is-active::before {
    content: "";
    width: 3px;
    align-self: stretch;
    margin-inline-start: -.8rem;
    margin-inline-end: .25rem;
    border-radius: 2px;
    background: var(--sttco-accent);
}

.sttco-sidebar__footer {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.sttco-sidebar__user {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .75rem;
}

.sttco-avatar {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sttco-brand);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}

.sttco-sidebar__name {
    font-size: .85rem;
    line-height: 1.2;
    color: #fff;
}

.sttco-sidebar__role {
    font-size: .72rem;
    color: var(--sttco-slate-light);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.sttco-main {
    flex: 1 1 auto;
    margin-inline-start: var(--sttco-sidebar-width);
    min-width: 0;
}

.sttco-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid var(--sttco-line);
}

.sttco-topbar__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.sttco-content {
    padding: 1.75rem 1.5rem 3rem;
}

.sttco-toggle {
    display: none;
}

@media (max-width: 991.98px) {
    .sttco-sidebar {
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

    [dir="rtl"] .sttco-sidebar {
        transform: translateX(100%);
    }

    .sttco-shell.is-open .sttco-sidebar {
        transform: none;
    }

    .sttco-main {
        margin-inline-start: 0;
    }

    .sttco-toggle {
        display: inline-flex;
    }
}

/* ------------------------------------------------------------ components -- */

.card {
    border: 1px solid var(--sttco-line);
    border-radius: var(--sttco-radius-lg);
    box-shadow: 0 1px 2px rgba(20, 45, 61, .04);
}

.card-header {
    background: #fff;
    border-bottom: 1px solid var(--sttco-line);
    border-start-start-radius: var(--sttco-radius-lg);
    border-start-end-radius: var(--sttco-radius-lg);
    padding: .9rem 1.1rem;
}

/* Key figures on the dashboard. */
.sttco-stat {
    position: relative;
    height: 100%;
    padding: 1.1rem 1.15rem;
    background: #fff;
    border: 1px solid var(--sttco-line);
    border-radius: var(--sttco-radius-lg);
    overflow: hidden;
}

.sttco-stat::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 3px;
    background: var(--sttco-line);
}

.sttco-stat--total::after { background: var(--sttco-navy); }
.sttco-stat--draft::after { background: var(--sttco-slate-light); }
.sttco-stat--review::after { background: var(--sttco-accent); }
.sttco-stat--scheduled::after { background: var(--sttco-brand-100); }
.sttco-stat--published::after { background: var(--sttco-success); }
.sttco-stat--archived::after { background: var(--sttco-line); }

.sttco-stat__label {
    margin: 0;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sttco-slate);
}

.sttco-stat__value {
    margin: .35rem 0 0;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--sttco-navy);
}

.btn-primary {
    --bs-btn-bg: var(--sttco-brand);
    --bs-btn-border-color: var(--sttco-brand);
    --bs-btn-hover-bg: var(--sttco-brand-strong);
    --bs-btn-hover-border-color: var(--sttco-brand-strong);
    --bs-btn-active-bg: var(--sttco-brand-deep);
    --bs-btn-active-border-color: var(--sttco-brand-deep);
    --bs-btn-disabled-bg: var(--sttco-brand);
    --bs-btn-disabled-border-color: var(--sttco-brand);
    font-weight: 600;
}

.btn-accent {
    --bs-btn-color: var(--sttco-navy);
    --bs-btn-bg: var(--sttco-accent);
    --bs-btn-border-color: var(--sttco-accent);
    --bs-btn-hover-color: var(--sttco-navy);
    --bs-btn-hover-bg: #e8b61f;
    --bs-btn-hover-border-color: #e8b61f;
    font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color: var(--sttco-brand-strong);
    --bs-btn-border-color: var(--sttco-brand);
    --bs-btn-hover-bg: var(--sttco-brand);
    --bs-btn-hover-border-color: var(--sttco-brand);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--sttco-brand);
    box-shadow: 0 0 0 .2rem rgba(44, 127, 171, .18);
}

.form-check-input:checked {
    background-color: var(--sttco-brand);
    border-color: var(--sttco-brand);
}

.form-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--sttco-navy-700);
}

.form-text {
    color: var(--sttco-slate);
}

.nav-tabs .nav-link {
    color: var(--sttco-slate);
    font-weight: 600;
}

.nav-tabs .nav-link.active {
    color: var(--sttco-brand-strong);
    border-bottom-color: #fff;
}

.table > :not(caption) > * > * {
    padding: .8rem .9rem;
}

.table thead th {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sttco-slate);
    background: var(--sttco-mist);
    border-bottom-color: var(--sttco-line);
}

/* Status pills, coloured by meaning rather than by Bootstrap defaults. */
.sttco-pill {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    text-transform: capitalize;
    border: 1px solid transparent;
}

.sttco-pill--draft { background: #eef1f4; color: var(--sttco-slate); }
.sttco-pill--pending_review { background: var(--sttco-accent-soft); color: #7a5a00; }
.sttco-pill--scheduled { background: var(--sttco-brand-50); color: var(--sttco-brand-deep); }
.sttco-pill--published { background: #ecfaf3; color: var(--sttco-success); }
.sttco-pill--archived { background: #f3f4f6; color: var(--sttco-slate); }
.sttco-pill--failed { background: #fef3f2; color: var(--sttco-danger); }
.sttco-pill--processed { background: #ecfaf3; color: var(--sttco-success); }
.sttco-pill--duplicate,
.sttco-pill--ignored,
.sttco-pill--received,
.sttco-pill--processing { background: #eef1f4; color: var(--sttco-slate); }

.sttco-locale {
    display: inline-block;
    min-width: 1.9rem;
    padding: .1rem .35rem;
    border-radius: var(--sttco-radius-sm);
    font-size: .7rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid var(--sttco-line);
    background: #fff;
    color: var(--sttco-slate-light);
}

.sttco-locale.is-complete {
    background: var(--sttco-brand-50);
    border-color: var(--sttco-brand-100);
    color: var(--sttco-brand-deep);
}

.sttco-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--sttco-slate);
}

.alert-success {
    --bs-alert-bg: #ecfaf3;
    --bs-alert-border-color: #c9ead9;
    --bs-alert-color: var(--sttco-success);
}

.alert-danger {
    --bs-alert-bg: #fef3f2;
    --bs-alert-border-color: #fbd5d2;
    --bs-alert-color: var(--sttco-danger);
}

.alert-warning {
    --bs-alert-bg: var(--sttco-accent-soft);
    --bs-alert-border-color: #f0dc9a;
    --bs-alert-color: #7a5a00;
}

/* ----------------------------------------------------------- sign-in page - */

.sttco-login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background:
        radial-gradient(60rem 30rem at 50% -10%, rgba(44, 127, 171, .18), transparent 70%),
        var(--sttco-mist);
}

.sttco-login__card {
    width: min(100%, 26rem);
    background: #fff;
    border: 1px solid var(--sttco-line);
    border-radius: var(--sttco-radius-lg);
    box-shadow: 0 10px 30px rgba(20, 45, 61, .08);
    padding: 2rem;
}

.sttco-login__logo {
    display: block;
    width: 11rem;
    height: auto;
    margin: 0 auto 1.25rem;
}

/* The brand's yellow rule under the heading, as on the public site. */
.sttco-rule::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 3px;
    margin-top: .6rem;
    background: var(--sttco-accent);
    border-radius: 2px;
}

/* Count of items waiting in a sidebar section. */
.sttco-badge {
    display: inline-block;
    min-width: 1.25rem;
    margin-inline-start: auto;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--sttco-accent);
    color: var(--sttco-navy);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
}