/* ============================================
   LinkByCar Scalar UI Theme
   Aligned with Swagger UI + ReDoc branding.

   Brand colors:
     Daintree  #002432  (darkest bg)
     Cyprus    #003E48  (dark / hover)
     Casal     #006575  (primary)
     Cyan      #35FFE8  (accent)
     Flavescent #FFF48B (warm accent)
   ============================================ */


/* Import lbc-theme.css for shared Tabler variable overrides and semantic tokens */
@import url("lbc-theme.css");

/* ── Light mode palette ── */
.light-mode {
    --scalar-color-1: var(--lbc-text);
    --scalar-color-2: var(--lbc-text-muted);
    --scalar-color-3: var(--lbc-text-subtle);
    --scalar-color-accent: var(--lbc-casal);
    --scalar-background-1: var(--lbc-card-bg);
    --scalar-background-2: var(--lbc-bg);
    --scalar-background-3: var(--lbc-border);
    --scalar-background-accent: rgba(0, 101, 117, 0.06);
    --scalar-border-color: rgba(0, 0, 0, 0.1);

    /* HTTP verb colors */
    --lbc-http-get-bg: rgba(0, 101, 117, 0.08);
    --lbc-http-post-bg: rgba(47, 179, 68, 0.08);
    --lbc-http-put-bg: rgba(247, 103, 7, 0.08);
    --lbc-http-delete-bg: rgba(214, 57, 57, 0.08);
    --lbc-http-patch-bg: rgba(174, 62, 201, 0.08);
}

/* ── Dark mode palette ── */
.dark-mode {
    --scalar-color-1: rgba(255, 255, 255, 0.9);
    --scalar-color-2: rgba(255, 255, 255, 0.55);
    --scalar-color-3: rgba(255, 255, 255, 0.3);
    --scalar-color-accent: var(--lbc-cyan);
    --scalar-background-1: var(--lbc-daintree);
    --scalar-background-2: var(--lbc-cyprus);
    --scalar-background-3: #004d5c;
    --scalar-background-accent: rgba(53, 255, 232, 0.12);
    --scalar-border-color: rgba(255, 255, 255, 0.1);

    /* HTTP verb colors (brighter for dark bg) */
    --lbc-http-get: var(--lbc-cyan);
    --lbc-http-get-bg: rgba(53, 255, 232, 0.12);
    --lbc-http-post: #51cf66;
    --lbc-http-post-bg: rgba(81, 207, 102, 0.12);
    --lbc-http-put: #ff922b;
    --lbc-http-put-bg: rgba(255, 146, 43, 0.12);
    --lbc-http-delete: #ff6b6b;
    --lbc-http-delete-bg: rgba(255, 107, 107, 0.12);
    --lbc-http-patch: #cc5de8;
    --lbc-http-patch-bg: rgba(204, 93, 232, 0.12);
}

/* ── Sidebar — light ── */
.light-mode .sidebar {
    --scalar-sidebar-background-1: var(--lbc-table-header-bg);
    --scalar-sidebar-color-1: var(--lbc-text);
    --scalar-sidebar-color-2: var(--lbc-text-muted);
    --scalar-sidebar-color-active: var(--lbc-casal);
    --scalar-sidebar-item-hover-color: var(--lbc-cyprus);
    --scalar-sidebar-item-hover-background: var(--lbc-border);
    --scalar-sidebar-item-active-background: rgba(0, 101, 117, 0.1);
    --scalar-sidebar-border-color: rgba(0, 0, 0, 0.08);
    --scalar-sidebar-search-background: var(--lbc-card-bg);
    --scalar-sidebar-search-border-color: rgba(0, 0, 0, 0.1);
    --scalar-sidebar-search-color: var(--lbc-text-muted);
    background: var(--lbc-table-header-bg) !important;
}

/* Fallback: target sidebar container directly */
.light-mode .sidebar-content,
.light-mode [class*="sidebar"],
.light-mode nav.sidebar {
    background-color: var(--lbc-table-header-bg) !important;
}

/* ── Sidebar — dark ── */
.dark-mode .sidebar {
    --scalar-sidebar-background-1: #001c28;
    --scalar-sidebar-color-1: rgba(255, 255, 255, 0.9);
    --scalar-sidebar-color-2: rgba(255, 255, 255, 0.5);
    --scalar-sidebar-color-active: var(--lbc-cyan);
    --scalar-sidebar-item-hover-color: var(--lbc-cyan);
    --scalar-sidebar-item-hover-background: var(--lbc-cyprus);
    --scalar-sidebar-item-active-background: rgba(53, 255, 232, 0.1);
    --scalar-sidebar-border-color: rgba(255, 255, 255, 0.08);
    --scalar-sidebar-search-background: var(--lbc-cyprus);
    --scalar-sidebar-search-border-color: rgba(255, 255, 255, 0.1);
    --scalar-sidebar-search-color: rgba(255, 255, 255, 0.4);
}

/* ── Typography ── */
:root {
    --scalar-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica Neue, Arial, sans-serif;
    --scalar-font-code: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
}

/* ── Logo injection (light) ── */
.light-mode section.introduction-section > .section-content > .flex:first-of-type {
    position: relative;
    padding-left: 18.5em;
    margin-bottom: 2em;
}

.light-mode section.introduction-section > .section-content > .flex:first-of-type::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 18em;
    height: 4em;
    background-image: url("../images/logo_linkbycar.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
}

/* ── Logo injection (dark) ── */
.dark-mode section.introduction-section > .section-content > .flex:first-of-type {
    position: relative;
    padding-left: 18.5em;
    margin-bottom: 2em;
}

.dark-mode section.introduction-section > .section-content > .flex:first-of-type::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 18em;
    height: 4em;
    background-image: url("../images/logo_linkbycar_light.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
}

/* ── Brand badges ── */
#brands {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem 0;
}

#brands a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 56px;
    padding: 6px;
    border: 1px solid var(--lbc-border);
    border-radius: 0.5rem;
    background: var(--lbc-card-bg);
    transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
}

#brands a::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) scale(0);
    background: var(--lbc-daintree);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: all 0.1s;
    z-index: 100;
    text-decoration: none;
}

#brands a:hover::after {
    transform: translateX(-50%) scale(1);
    opacity: 1;
}

#brands a:hover {
    border-color: var(--lbc-casal);
    box-shadow: 0 2px 8px rgba(0, 101, 117, 0.12);
}

#brands a img {
    max-height: 36px;
    max-width: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Brand logos — white pill on dark backgrounds */
.dark-mode #brands a {
    background: white;
    border-color: rgba(255, 255, 255, 0.15);
}

.dark-mode #brands a:hover {
    border-color: var(--lbc-cyan);
}

/* ── HTTP method badge colors ──
   Match Swagger/ReDoc verb palette exactly */

/* GET — Casal */
.light-mode [data-method="GET"] .scalar-api-reference__method,
.light-mode .get .scalar-api-reference__method,
.light-mode .http-method.get,
.light-mode [class*="get"] > .http-method,
.light-mode span.get {
    color: var(--lbc-http-get) !important;
    background: var(--lbc-http-get-bg) !important;
}

.dark-mode [data-method="GET"] .scalar-api-reference__method,
.dark-mode .get .scalar-api-reference__method,
.dark-mode .http-method.get,
.dark-mode [class*="get"] > .http-method,
.dark-mode span.get {
    color: var(--lbc-http-get) !important;
    background: var(--lbc-http-get-bg) !important;
}

/* POST — Green */
.light-mode [data-method="POST"] .scalar-api-reference__method,
.light-mode .post .scalar-api-reference__method,
.light-mode .http-method.post,
.light-mode [class*="post"] > .http-method,
.light-mode span.post {
    color: var(--lbc-http-post) !important;
    background: var(--lbc-http-post-bg) !important;
}

.dark-mode [data-method="POST"] .scalar-api-reference__method,
.dark-mode .post .scalar-api-reference__method,
.dark-mode .http-method.post,
.dark-mode [class*="post"] > .http-method,
.dark-mode span.post {
    color: var(--lbc-http-post) !important;
    background: var(--lbc-http-post-bg) !important;
}

/* PUT — Orange */
.light-mode [data-method="PUT"] .scalar-api-reference__method,
.light-mode .put .scalar-api-reference__method,
.light-mode .http-method.put,
.light-mode [class*="put"] > .http-method,
.light-mode span.put {
    color: var(--lbc-http-put) !important;
    background: var(--lbc-http-put-bg) !important;
}

.dark-mode [data-method="PUT"] .scalar-api-reference__method,
.dark-mode .put .scalar-api-reference__method,
.dark-mode .http-method.put,
.dark-mode [class*="put"] > .http-method,
.dark-mode span.put {
    color: var(--lbc-http-put) !important;
    background: var(--lbc-http-put-bg) !important;
}

/* DELETE — Red */
.light-mode [data-method="DELETE"] .scalar-api-reference__method,
.light-mode .delete .scalar-api-reference__method,
.light-mode .http-method.delete,
.light-mode [class*="delete"] > .http-method,
.light-mode span.delete {
    color: var(--lbc-http-delete) !important;
    background: var(--lbc-http-delete-bg) !important;
}

.dark-mode [data-method="DELETE"] .scalar-api-reference__method,
.dark-mode .delete .scalar-api-reference__method,
.dark-mode .http-method.delete,
.dark-mode [class*="delete"] > .http-method,
.dark-mode span.delete {
    color: var(--lbc-http-delete) !important;
    background: var(--lbc-http-delete-bg) !important;
}

/* PATCH — Purple */
.light-mode [data-method="PATCH"] .scalar-api-reference__method,
.light-mode .patch .scalar-api-reference__method,
.light-mode .http-method.patch,
.light-mode [class*="patch"] > .http-method,
.light-mode span.patch {
    color: var(--lbc-http-patch) !important;
    background: var(--lbc-http-patch-bg) !important;
}

.dark-mode [data-method="PATCH"] .scalar-api-reference__method,
.dark-mode .patch .scalar-api-reference__method,
.dark-mode .http-method.patch,
.dark-mode [class*="patch"] > .http-method,
.dark-mode span.patch {
    color: var(--lbc-http-patch) !important;
    background: var(--lbc-http-patch-bg) !important;
}

/* ── HTTP method badges — rounded pill style (like Swagger) ── */
.http-method,
[class*="scalar-api-reference__method"] {
    font-weight: 700 !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em;
    padding: 2px 8px !important;
    font-size: 0.75rem !important;
}

/* ── Sidebar search — focus ring (like ReDoc) ── */
.sidebar input[type="text"]:focus,
.sidebar .sidebar-search:focus-within,
.sidebar input:focus {
    border-color: var(--scalar-color-accent) !important;
    box-shadow: 0 0 0 2px rgba(0, 101, 117, 0.15) !important;
    outline: none !important;
}

.dark-mode .sidebar input[type="text"]:focus,
.dark-mode .sidebar .sidebar-search:focus-within,
.dark-mode .sidebar input:focus {
    box-shadow: 0 0 0 2px rgba(53, 255, 232, 0.2) !important;
}

/* ── Section headings — Daintree color (like Swagger tags) ── */
.light-mode .section-header,
.light-mode .endpoint-header h2,
.light-mode h1, .light-mode h2 {
    color: var(--lbc-daintree) !important;
}

/* ── Sidebar active item — Casal left border (like ReDoc) ── */
.light-mode .sidebar [aria-current="true"],
.light-mode .sidebar .active-item {
    border-left: 3px solid var(--lbc-casal);
}

.dark-mode .sidebar [aria-current="true"],
.dark-mode .sidebar .active-item {
    border-left: 3px solid var(--lbc-cyan);
}

/* ── Buttons — primary action (like Swagger Execute/Try-it) ── */
.light-mode button[class*="send"],
.light-mode button[class*="execute"],
.light-mode .send-request button {
    background-color: var(--lbc-casal) !important;
    color: var(--lbc-card-bg) !important;
    border: 1px solid var(--lbc-casal) !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    transition: background-color 0.15s ease;
}

.light-mode button[class*="send"]:hover,
.light-mode button[class*="execute"]:hover,
.light-mode .send-request button:hover {
    background-color: var(--lbc-cyprus) !important;
    border-color: var(--lbc-cyprus) !important;
}

.dark-mode button[class*="send"],
.dark-mode button[class*="execute"],
.dark-mode .send-request button {
    background-color: var(--lbc-cyan) !important;
    color: var(--lbc-daintree) !important;
    border: 1px solid var(--lbc-cyan) !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    transition: background-color 0.15s ease;
}

.dark-mode button[class*="send"]:hover,
.dark-mode button[class*="execute"]:hover,
.dark-mode .send-request button:hover {
    background-color: #2be0cb !important;
    border-color: #2be0cb !important;
}

/* ── Authorize / auth buttons ── */
.light-mode button[class*="auth"],
.light-mode [class*="security"] button {
    color: var(--lbc-casal) !important;
    border-color: var(--lbc-casal) !important;
}

.light-mode button[class*="auth"]:hover,
.light-mode [class*="security"] button:hover {
    background-color: var(--lbc-casal) !important;
    color: var(--lbc-card-bg) !important;
}

/* ── Code blocks — match ReDoc right-panel dark style ── */
.light-mode pre,
.light-mode .code-block,
.light-mode code[class*="language-"],
.light-mode [class*="code-snippet"] {
    border-radius: 8px !important;
    color: var(--lbc-cyprus) !important;
}

.light-mode .scalar-card-content,
.light-mode .scalar-card-content .text-c-2,
.light-mode .introduction-card-item label,
.light-mode .introduction-card-item .client-libraries-heading,
.light-mode .scalar-reference-intro-auth .bg-b-2,
.light-mode .scalar-reference-intro-auth .bg-b-2 h2,
.light-mode .scalar-reference-intro-auth .bg-b-2 button,
.light-mode .scalar-reference-intro-auth .bg-b-2 span
{
    color: var(--lbc-bg) !important;
    background-color: var(--lbc-casal) !important;
}

.light-mode .scalar-card-content .endpoints,
.light-mode .scalar-card-content .endpoints .endpoint,
.light-mode .scalar-code-block,
.light-mode .scalar-code-block.bg-b-2,
.light-mode .request-editor-section {
    background-color: white;
    font-weight: 600;
}

.light-mode .scalar-card-checkbox {
    color: var(--lbc-bg) !important;
}

.light-mode .scalar-card-checkbox:hover {
    color: white !important;
}

/* ── Inline code (like Swagger markdown code) ── */
.light-mode code:not(pre code) {
    background: rgba(0, 101, 117, 0.08) !important;
    color: var(--lbc-cyprus) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.875em !important;
}

.dark-mode code:not(pre code) {
    background: rgba(53, 255, 232, 0.1) !important;
    color: var(--lbc-cyan) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.875em !important;
}

/* ── Response status codes ── */
.light-mode [class*="response"] [class*="status-code"],
.light-mode .response-code {
    font-weight: 600;
}

/* ── Schema / model tables (like Swagger models section) ── */
.light-mode table th {
    color: var(--lbc-daintree) !important;
    font-weight: 600;
    border-bottom: 1px solid var(--lbc-border);
}

.dark-mode table th {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── Card-like operation sections (like Swagger opblocks) ── */
.light-mode .section:not(.introduction-section) {
    border-radius: 8px;
}

/* ── Accent links (like ReDoc/Swagger) ── */
.light-mode a:not(.sidebar a) {
    color: var(--lbc-casal);
}

.light-mode a:not(.sidebar a):hover {
    color: var(--lbc-cyprus);
}

.dark-mode a:not(.sidebar a) {
    color: var(--lbc-cyan);
}

.dark-mode a:not(.sidebar a):hover {
    color: #2be0cb;
}

/* ── Inputs & selects — focus ring (like Swagger) ── */
.light-mode input:focus,
.light-mode select:focus,
.light-mode textarea:focus {
    border-color: var(--lbc-casal) !important;
    box-shadow: 0 0 0 3px rgba(0, 101, 117, 0.15) !important;
    outline: none !important;
}

.dark-mode input:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
    border-color: var(--lbc-cyan) !important;
    box-shadow: 0 0 0 3px rgba(53, 255, 232, 0.15) !important;
    outline: none !important;
}

/* ── Tag / group headers — bottom border (like Swagger opblock-tag) ── */
.light-mode .section-header,
.light-mode [class*="tag-section"] > [class*="header"],
.light-mode [class*="section-container"] > h2 {
    border-bottom: 1px solid var(--lbc-border);
    padding-bottom: 0.75em;
}

.dark-mode .section-header,
.dark-mode [class*="tag-section"] > [class*="header"],
.dark-mode [class*="section-container"] > h2 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.75em;
}

/* ── Selected/active tabs (like ReDoc response tabs) ── */
.light-mode [role="tab"][aria-selected="true"],
.light-mode .tab--active,
.light-mode [class*="tab"][class*="active"] {
    color: var(--lbc-casal) !important;
    border-color: var(--lbc-casal) !important;
}

.dark-mode [role="tab"][aria-selected="true"],
.dark-mode .tab--active,
.dark-mode [class*="tab"][class*="active"] {
    color: var(--lbc-cyan) !important;
    border-color: var(--lbc-cyan) !important;
}

/* ── Scrollbar — light mode ── */
.light-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.light-mode ::-webkit-scrollbar-track {
    background: var(--lbc-bg);
    border-radius: 4px;
}

.light-mode ::-webkit-scrollbar-thumb {
    background: var(--lbc-casal);
    border-radius: 4px;
}

.light-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--lbc-cyprus);
}

/* ── Scrollbar — dark mode ── */
.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark-mode ::-webkit-scrollbar-track {
    background: var(--lbc-daintree);
    border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--lbc-casal);
    border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--lbc-cyan);
}

/* ── Firefox scrollbar ── */
.light-mode * {
    scrollbar-width: thin !important;
    scrollbar-color: var(--lbc-casal) var(--lbc-bg) !important;
}

.dark-mode * {
    scrollbar-width: thin !important;
    scrollbar-color: var(--lbc-casal) var(--lbc-daintree) !important;
}

/* END LinkByCar Scalar UI Theme */