/*
 * theme.css — the cc-ads backend, restyled after adtelligent.com.
 *
 * Loaded AFTER css/backend.css (CoreUI 3 + Bootstrap 4) and after css/dashboard.css on
 * the auth pages, so everything here is a deliberate override of those. It is plain CSS
 * in public/, not part of the laravel-mix bundles, so an edit ships without an
 * `npm run prod` — the same reason public/js/vendor is hand-maintained.
 *
 * The palette, the near-zero corner radius and the type are taken from adtelligent.com's
 * own stylesheet rather than invented: #f06 is their primary, #2b2b2b/#3c3c3c their ink,
 * #8c8c8c their muted grey, and their buttons, cards and inputs are square. Aktiv Grotesk
 * is licensed, so Inter stands in for it — the same neo-grotesque shapes, and their own
 * fallback chain (Arial, Helvetica) is kept behind it.
 */

:root {
    /* Ink */
    --adt-ink: #2b2b2b;
    --adt-ink-soft: #3c3c3c;
    --adt-muted: #8c8c8c;
    --adt-muted-strong: #707070;

    /* Surfaces */
    --adt-canvas: #f5f5f5;
    --adt-surface: #ffffff;
    --adt-surface-alt: #fbfbfb;
    --adt-line: #e3e3e5;
    --adt-line-strong: #d1d1d4;

    /* Accents, straight from adtelligent's stylesheet */
    --adt-accent: #f06;
    --adt-accent-strong: #d90056;
    --adt-accent-soft: rgba(255, 0, 102, 0.08);
    --adt-accent-ring: rgba(255, 0, 102, 0.25);
    --adt-blue: #0096ff;
    --adt-violet: #8755ff;

    /* Their one real shadow: 0 0 7px rgba(0,0,0,.15) — softened for large surfaces */
    --adt-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08);
    --adt-shadow-raised: 0 0 7px 0 rgba(0, 0, 0, 0.15);

    --adt-font: "Inter", "Aktiv Grotesk", Arial, Helvetica, sans-serif;
}

/* ---------------------------------------------------------------- foundation */

body,
.c-app {
    background-color: var(--adt-canvas);
    color: var(--adt-ink-soft);
    font-family: var(--adt-font);
    /* Their body copy carries a hair of tracking; enough to read as deliberate. */
    letter-spacing: 0.08px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--adt-font);
    color: var(--adt-ink);
    font-weight: 500;
    line-height: 1.2;
}

a {
    color: var(--adt-accent);
    transition: color 0.15s ease-in-out;
}

a:hover,
a:focus {
    color: var(--adt-accent-strong);
    text-decoration: none;
}

hr {
    border-top-color: var(--adt-line);
}

small,
.text-muted {
    color: var(--adt-muted) !important;
}

::selection {
    background: var(--adt-accent);
    color: #fff;
}

/* ------------------------------------------------------------------ sidebar */

/* Their one gradient — -45deg violet into charcoal — is what the sidebar is for. */
.c-sidebar {
    background: linear-gradient(-45deg, #695ab4 0%, #3c3851 59%, #2b2b2b 100%);
    border-right: 0;
}

.c-sidebar .c-sidebar-brand {
    background: rgba(0, 0, 0, 0.18);
    padding: 0.75rem 1rem;
}

.c-sidebar .c-sidebar-nav-title {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16px;
    text-transform: uppercase;
    padding: 1.25rem 1rem 0.5rem;
}

.c-sidebar .c-sidebar-nav-link,
.c-sidebar .c-sidebar-nav-dropdown-toggle {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.875rem;
    font-weight: 400;
    /* The 3px well on the left is where the accent bar lands on hover/active. */
    border-left: 3px solid transparent;
    padding-left: calc(1rem - 3px);
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.c-sidebar .c-sidebar-nav-link:hover,
.c-sidebar .c-sidebar-nav-dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: rgba(255, 0, 102, 0.55);
    color: #fff;
}

.c-sidebar .c-sidebar-nav-link.c-active,
.c-sidebar .c-sidebar-nav-link.active,
.c-sidebar .c-sidebar-nav-item.active > .c-sidebar-nav-link {
    background: rgba(0, 0, 0, 0.25);
    border-left-color: var(--adt-accent);
    color: #fff;
    font-weight: 500;
}

.c-sidebar .c-sidebar-nav-icon {
    color: inherit;
    opacity: 0.85;
}

.c-sidebar .c-sidebar-nav-dropdown.c-show > .c-sidebar-nav-dropdown-toggle {
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
}

.c-sidebar .c-sidebar-nav-dropdown-items .c-sidebar-nav-link {
    font-size: 0.8125rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.c-sidebar .c-sidebar-minimizer {
    background-color: rgba(0, 0, 0, 0.25);
}

/* ------------------------------------------------------------------- header */

.c-header {
    background: var(--adt-surface);
    border-bottom: 1px solid var(--adt-line);
    box-shadow: none;
}

.c-header .c-header-nav-link,
.c-header .c-header-nav-item {
    color: var(--adt-ink-soft);
    font-size: 0.875rem;
}

.c-header .c-avatar-img {
    /* Square, like everything else here. */
    border-radius: 0;
    border: 1px solid var(--adt-line);
}

.c-subheader {
    background: transparent;
    border-bottom: 1px solid var(--adt-line);
    min-height: 44px;
}

.breadcrumb {
    background: transparent;
    font-size: 0.8125rem;
    margin-bottom: 0;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--adt-muted-strong);
}

.breadcrumb-item a:hover {
    color: var(--adt-accent);
}

.breadcrumb-item.active {
    color: var(--adt-ink);
    font-weight: 500;
}

/* -------------------------------------------------------------------- cards */

.c-main {
    padding-top: 1.75rem;
}

.card {
    background: var(--adt-surface);
    border: 1px solid var(--adt-line);
    border-radius: 0;
    box-shadow: var(--adt-shadow);
}

.card-body {
    padding: 1.5rem;
}

.card-title {
    color: var(--adt-ink);
    font-size: 1.125rem;
    font-weight: 500;
}

.card-title i {
    color: var(--adt-accent);
    margin-right: 0.35rem;
}

.card-title small {
    font-size: 0.8125rem;
    font-weight: 400;
}

.card-footer,
.card-header {
    background: var(--adt-surface-alt);
    border-color: var(--adt-line);
}

/* ------------------------------------------------------------------ buttons */

.btn {
    border-radius: 0;
    font-family: var(--adt-font);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.09px;
    padding: 0.5rem 1.15rem;
    box-shadow: none !important;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 0.2rem var(--adt-accent-ring) !important;
}

.btn-sm {
    font-size: 0.8125rem;
    padding: 0.3rem 0.6rem;
}

.btn-primary {
    background-color: var(--adt-accent);
    border-color: var(--adt-accent);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--adt-accent-strong);
    border-color: var(--adt-accent-strong);
    color: #fff;
}

.btn-info {
    background-color: var(--adt-blue);
    border-color: var(--adt-blue);
    color: #fff;
}

.btn-info:hover,
.btn-info:active,
.btn-info:not(:disabled):not(.disabled):active {
    background-color: #007ad4;
    border-color: #007ad4;
    color: #fff;
}

.btn-dark,
.btn-secondary {
    background-color: var(--adt-ink-soft);
    border-color: var(--adt-ink-soft);
    color: #fff;
}

.btn-dark:hover,
.btn-secondary:hover {
    background-color: var(--adt-ink);
    border-color: var(--adt-ink);
    color: #fff;
}

.btn-outline-primary {
    border-color: var(--adt-accent);
    color: var(--adt-accent);
}

.btn-outline-primary:hover {
    background-color: var(--adt-accent);
    border-color: var(--adt-accent);
    color: #fff;
}

/* -------------------------------------------------------------------- forms */

.form-control,
.custom-select,
.select2-container--bootstrap4 .select2-selection {
    background-color: var(--adt-surface);
    border: 1px solid var(--adt-line-strong);
    border-radius: 0;
    color: var(--adt-ink-soft);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    height: auto;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus,
.custom-select:focus {
    background-color: var(--adt-surface);
    border-color: var(--adt-accent);
    box-shadow: 0 0 0 0.2rem var(--adt-accent-ring);
    color: var(--adt-ink);
}

.form-control::placeholder {
    color: #b5b5bb;
}

/* Read-only fields are for reading, so they read as paper rather than as an input. */
.form-control[readonly],
.form-control:disabled {
    background-color: var(--adt-surface-alt);
    border-color: var(--adt-line);
    color: var(--adt-ink-soft);
}

.form-control-label,
.col-form-label,
label {
    color: var(--adt-ink);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.09px;
}

.form-control-static,
.form-control-plaintext {
    color: var(--adt-ink-soft);
    font-size: 0.875rem;
    padding-top: 0.5rem;
}

.form-text {
    font-size: 0.75rem;
}

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

/* ------------------------------------------------------------------- tables */

.table {
    color: var(--adt-ink-soft);
    font-size: 0.875rem;
    margin-bottom: 0;
}

.table thead th {
    background: var(--adt-surface-alt);
    border-bottom: 1px solid var(--adt-line-strong);
    border-top: 0;
    color: var(--adt-muted-strong);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16px;
    text-transform: uppercase;
    padding: 0.75rem;
    white-space: nowrap;
}

.table td,
.table th {
    border-color: var(--adt-line);
    padding: 0.75rem;
    vertical-align: middle;
}

/* The row-detail tables (operator show) use <th> as a label column, not a header. */
.table tbody th {
    background: var(--adt-surface-alt);
    color: var(--adt-muted-strong);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.09px;
    width: 30%;
}

.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: var(--adt-line);
}

.table-hover tbody tr:hover {
    background-color: var(--adt-accent-soft);
    color: var(--adt-ink);
}

/* ------------------------------------------------- badges, alerts, paging */

.badge {
    border-radius: 1rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.09px;
    padding: 0.35em 0.75em;
}

.badge-success {
    background-color: rgba(40, 167, 69, 0.12);
    color: #1e7e34;
}

.badge-dark {
    background-color: rgba(60, 60, 60, 0.12);
    color: var(--adt-ink-soft);
}

.badge-primary {
    background-color: var(--adt-accent-soft);
    color: var(--adt-accent-strong);
}

.alert {
    border: 1px solid var(--adt-line);
    border-left: 3px solid var(--adt-muted);
    border-radius: 0;
    font-size: 0.875rem;
}

.alert-success {
    background-color: rgba(40, 167, 69, 0.08);
    border-left-color: #28a745;
    color: #1e7e34;
}

.alert-danger {
    background-color: rgba(220, 53, 69, 0.08);
    border-left-color: #dc3545;
    color: #b02a37;
}

.alert-warning {
    background-color: rgba(255, 193, 7, 0.1);
    border-left-color: #ffc107;
    color: #8a6100;
}

.alert-info {
    background-color: rgba(0, 150, 255, 0.08);
    border-left-color: var(--adt-blue);
    color: #0071c2;
}

.pagination {
    font-size: 0.875rem;
}

.page-link {
    border-color: var(--adt-line);
    border-radius: 0 !important;
    color: var(--adt-ink-soft);
}

.page-link:hover {
    background-color: var(--adt-accent-soft);
    border-color: var(--adt-line);
    color: var(--adt-accent-strong);
}

.page-item.active .page-link {
    background-color: var(--adt-accent);
    border-color: var(--adt-accent);
    color: #fff;
}

.dropdown-menu {
    border: 1px solid var(--adt-line);
    border-radius: 0;
    box-shadow: var(--adt-shadow-raised);
    font-size: 0.875rem;
    padding-bottom: 0;
}

.dropdown-header {
    color: var(--adt-muted-strong);
    font-size: 0.6875rem;
    letter-spacing: 0.16px;
    text-transform: uppercase;
}

.dropdown-item {
    color: var(--adt-ink-soft);
    padding: 0.55rem 1.25rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--adt-accent-soft);
    color: var(--adt-accent-strong);
}

/* -------------------------------------------------------- the app's own bits */

/* The spinner in .content-loading is hardcoded green in custom-backend.css. */
.content-loading .loading-wrap .loader div {
    background: var(--adt-accent);
}

.cp-report-frame {
    border: 1px solid var(--adt-line);
}

/* Auth pages: the login card and its gradient header (css/dashboard.css). */
.bg-gradient-primary {
    background: linear-gradient(-45deg, #695ab4 0%, #3c3851 59%, #2b2b2b 100%) !important;
}

.navbar-brand img,
.c-sidebar-brand img {
    max-width: 100%;
}

/* ------------------------------------------------------- legal documents
 *
 * The terms of use (and anything else long-form on the auth layout). A legal page is
 * read, not scanned, so this is mostly about measure and rhythm: ~68 characters a line,
 * generous leading, and headings that separate ten sections without shouting.
 */

.legal-page {
    background: var(--adt-canvas);
}

.legal-hero {
    padding: 3.5rem 0 5.5rem;
    color: #fff;
}

.legal-hero-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-end;
    justify-content: space-between;
}

.legal-hero-text {
    max-width: 46rem;
}

.legal-eyebrow {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.legal-title {
    color: #fff;
    font-size: 2.75rem;
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: 0.75rem;
}

.legal-lede {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.0625rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.legal-hero-action .btn {
    /* Pink on the violet-to-charcoal gradient — the one place the accent appears here. */
    white-space: nowrap;
}

/* Pulled up into the hero so the document reads as a sheet laid on it. */
.legal-body {
    margin-top: -3rem;
    padding-bottom: 4rem;
}

.legal-doc {
    background: var(--adt-surface);
    border: 1px solid var(--adt-line);
    box-shadow: var(--adt-shadow);
    padding: 3rem;
}

.legal-doc section + section {
    border-top: 1px solid var(--adt-line);
    margin-top: 2.5rem;
    padding-top: 2.5rem;
}

/* The contents links target the <section>, so this is where the anchor offset belongs. */
.legal-doc section {
    scroll-margin-top: 1.5rem;
}

.legal-doc h2 {
    color: var(--adt-ink);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 1.25rem;
}

.legal-doc h3 {
    color: var(--adt-ink);
    font-size: 1rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.legal-doc p,
.legal-doc li {
    color: var(--adt-ink-soft);
    font-size: 0.9375rem;
    line-height: 1.75;
    max-width: 68ch;
}

.legal-doc p {
    margin-bottom: 1.1rem;
}

.legal-doc ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.4rem;
}

.legal-doc ul li {
    padding-left: 1.4rem;
    position: relative;
    margin-bottom: 0.6rem;
}

/* A small accent square instead of a bullet — square corners, like everything else. */
.legal-doc ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 6px;
    background: var(--adt-accent);
}

.legal-doc strong {
    color: var(--adt-ink);
    font-weight: 600;
}

.legal-footnote {
    border-top: 1px solid var(--adt-line);
    color: var(--adt-muted-strong);
    font-size: 0.875rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
}

/* -------------------------------------------------------- contents rail */

.legal-toc {
    background: var(--adt-surface);
    border: 1px solid var(--adt-line);
    box-shadow: var(--adt-shadow);
    padding: 1.5rem;
    position: sticky;
    top: 1.5rem;
}

.legal-toc-title {
    color: var(--adt-muted-strong);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.legal-toc ol {
    counter-reset: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

.legal-toc li + li {
    margin-top: 0.15rem;
}

.legal-toc a {
    border-left: 2px solid transparent;
    color: var(--adt-ink-soft);
    display: block;
    font-size: 0.8125rem;
    line-height: 1.45;
    padding: 0.4rem 0 0.4rem 0.75rem;
    transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.legal-toc a:hover,
.legal-toc a:focus {
    background: var(--adt-accent-soft);
    border-left-color: var(--adt-accent);
    color: var(--adt-accent-strong);
}

/* Set by public/js/legal-toc.js on the section being read. Heavier than the hover state:
   hover is where the pointer is, this is where the reader is. */
.legal-toc a.is-current {
    background: var(--adt-accent-soft);
    border-left-color: var(--adt-accent);
    color: var(--adt-ink);
    font-weight: 500;
}

/* The rail is sticky, so cap it at the viewport and let it scroll within itself if the
   contents ever outgrow the screen. */
.legal-toc {
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

@media (max-width: 991.98px) {
    .legal-hero {
        padding: 2.5rem 0 4rem;
    }

    .legal-title {
        font-size: 2rem;
    }

    .legal-doc {
        padding: 1.5rem;
    }
}