/*
 * Tabscanner brand layer over the ynex theme.
 * Colours follow tabscanner.com (brand blue, violet, navy) and the docs site's dark palette.
 * Loaded after styles.min.css. Dark is the default; the header toggle sets data-theme-mode.
 */

:root {
    --primary-rgb: 30, 155, 215;          /* #1E9BD7, readable on white */
    --secondary-rgb: 109, 94, 246;        /* #6D5EF6 violet */
    --success-rgb: 19, 170, 143;
    --info-rgb: 41, 179, 235;
    --warning-rgb: 227, 161, 47;
    --danger-rgb: 230, 83, 76;

    --body-bg-rgb: 243, 247, 252;
    --body-bg-rgb2: 255, 255, 255;
    --default-body-bg-color: rgb(var(--body-bg-rgb));
    --default-text-color: #16293D;
    --text-muted: #6B7C90;
    --default-border: #E3ECF5;
    --bootstrap-card-border: #E3ECF5;
    --default-background: #F6FAFE;
    --list-hover-focus-bg: #F1F6FC;
    --input-border: #D7E5F1;
    --form-control-bg: #ffffff;

    /* Sidebar is navy in both modes, like the website footer */
    --menu-bg: #081522;
    --menu-prime-color: rgba(255, 255, 255, .62);
    --menu-border-color: rgba(255, 255, 255, .08);

    --ts-brand: #29B3EB;
    --ts-violet: #6D5EF6;
    --ts-grad: linear-gradient(112deg, #29B3EB 0%, #6D5EF6 100%);
    --ts-heading-font: "Space Grotesk", "Inter", sans-serif;
    --ts-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color-scheme: light;
}

[data-theme-mode=dark] {
    --primary-rgb: 41, 179, 235;          /* #29B3EB */
    --secondary-rgb: 139, 127, 255;
    --success-rgb: 19, 194, 163;          /* #13C2A3 */
    --info-rgb: 122, 167, 255;
    --warning-rgb: 227, 161, 47;
    --danger-rgb: 244, 112, 103;

    --body-bg-rgb: 13, 31, 49;            /* cards, header */
    --body-bg-rgb2: 7, 19, 31;            /* page */
    --custom-white: rgb(var(--body-bg-rgb));
    --default-body-bg-color: rgb(var(--body-bg-rgb2));
    --default-text-color: #DCE4EE;
    --text-muted: #8494A6;
    --default-border: #1B3149;
    --bootstrap-card-border: #1B3149;
    --default-background: #0A1A2A;
    --list-hover-focus-bg: rgba(41, 179, 235, .07);
    --input-border: #22395290;
    --form-control-bg: #0A1A2A;
    --light-rgb: 22, 41, 61;
    --dark-rgb: 226, 232, 240;

    --header-bg: rgb(var(--body-bg-rgb2));
    --header-border-color: #1B3149;
    --header-prime-color: rgba(255, 255, 255, .7);
    --menu-bg: #081522;
    --menu-border-color: #1B3149;
    color-scheme: dark;
}

/* Sidebar navy: indigo in light mode, deeper navy in dark mode */
[data-menu-styles=dark][data-theme-mode=light] {
    --menu-bg: #111C43;
    --menu-prime-color: rgba(255, 255, 255, .62);
    --menu-border-color: rgba(255, 255, 255, .08);
}
[data-menu-styles=dark][data-theme-mode=dark] {
    --menu-bg: #081522;
    --menu-prime-color: rgba(255, 255, 255, .62);
    --menu-border-color: rgba(255, 255, 255, .08);
}

/* Typography */
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
.app-header .header-page-title h1,
.card .card-title,
.modal-title,
.page-header-breadcrumb h1 {
    font-family: var(--ts-heading-font);
    letter-spacing: -.01em;
}
.app-header .header-page-title h1 { font-weight: 600; }

/* Page and header */
body, .page, .main-content { background-color: var(--default-body-bg-color); }
.app-header { background: var(--header-bg); border-bottom: 1px solid var(--header-border-color); }
.footer { background: transparent !important; border-top: 1px solid var(--default-border); }

/* Sidebar */
.app-sidebar,
.app-sidebar .main-sidebar-header { background: var(--menu-bg) !important; border-color: rgba(255, 255, 255, .08) !important; }
.app-sidebar .main-sidebar-header .header-logo img { height: 1.9rem; width: auto; }
.app-sidebar .side-menu__item,
.app-sidebar .side-menu__icon,
.app-sidebar .side-menu__label,
.app-sidebar .side-menu__angle { color: var(--menu-prime-color) !important; fill: var(--menu-prime-color); }
.app-sidebar .category-name { color: rgba(255, 255, 255, .38) !important; }
.app-sidebar .side-menu__item:hover,
.app-sidebar .side-menu__item:hover .side-menu__icon,
.app-sidebar .side-menu__item:hover .side-menu__label { color: #fff !important; }
.app-sidebar .side-menu__item.active,
.app-sidebar .slide.active > .side-menu__item {
    background: rgba(41, 179, 235, .12) !important;
    color: #fff !important;
}
.app-sidebar .side-menu__item.active .side-menu__icon,
.app-sidebar .side-menu__item.active .side-menu__label { color: #29B3EB !important; }

/* Cards */
.card.custom-card { background-color: var(--custom-white); border-color: var(--bootstrap-card-border); }

/* Primary buttons use the website gradient */
.btn-primary {
    background: var(--ts-grad) !important;
    border: 0 !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus { filter: brightness(1.06); box-shadow: 0 .5rem 1.25rem -.5rem rgba(41, 179, 235, .55); }

/* Theme toggle */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; border-radius: .5rem;
    border: 1px solid var(--default-border); background: transparent;
    color: var(--header-prime-color); font-size: 1.05rem;
}
.theme-toggle:hover { color: rgb(var(--primary-rgb)); border-color: rgba(var(--primary-rgb), .4); }
.theme-toggle .ri-sun-line { display: none; }
[data-theme-mode=dark] .theme-toggle .ri-sun-line { display: inline; }
[data-theme-mode=dark] .theme-toggle .ri-moon-line { display: none; }

/* ---- Dark mode fixes for theme and library pieces ---- */
[data-theme-mode=dark] body { color: var(--default-text-color); }
[data-theme-mode=dark] .text-default { color: var(--default-text-color) !important; }
[data-theme-mode=dark] .text-muted { color: var(--text-muted) !important; }
[data-theme-mode=dark] .dropdown-menu { background: rgb(var(--body-bg-rgb)); border-color: var(--default-border); }
[data-theme-mode=dark] .dropdown-item { color: var(--default-text-color); }
[data-theme-mode=dark] .dropdown-item:hover { background: var(--list-hover-focus-bg); }
[data-theme-mode=dark] .modal-content { background: rgb(var(--body-bg-rgb)); border-color: var(--default-border); }
[data-theme-mode=dark] .modal-header, [data-theme-mode=dark] .modal-footer { border-color: var(--default-border); }
[data-theme-mode=dark] .table { --bs-table-color: var(--default-text-color); --bs-table-bg: transparent; border-color: var(--default-border); }
[data-theme-mode=dark] .table > :not(caption) > * > * { border-color: var(--default-border); }
[data-theme-mode=dark] .form-control,
[data-theme-mode=dark] .form-select { background-color: var(--form-control-bg); border-color: var(--default-border); color: var(--default-text-color); }
[data-theme-mode=dark] .form-control::placeholder { color: var(--text-muted); }
[data-theme-mode=dark] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238494A6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-size: 14px 10px;
}
[data-theme-mode=dark] .btn-light {
    background-color: rgb(var(--light-rgb)) !important;
    border-color: var(--default-border) !important;
    color: var(--default-text-color) !important;
}
[data-theme-mode=dark] .btn-light:hover { background-color: #1D3550 !important; }
[data-theme-mode=dark] .bg-light { background-color: rgb(var(--light-rgb)) !important; }
[data-theme-mode=dark] .progress { background-color: rgba(255, 255, 255, .08); }
[data-theme-mode=dark] .nav-tabs { border-color: var(--default-border); }
[data-theme-mode=dark] .nav-tabs .nav-link { color: var(--text-muted); }
[data-theme-mode=dark] .nav-tabs .nav-link.active { background: transparent; color: rgb(var(--primary-rgb)); border-color: var(--default-border) var(--default-border) rgb(var(--body-bg-rgb)); }
[data-theme-mode=dark] .alert-success { background: rgba(var(--success-rgb), .12); border-color: rgba(var(--success-rgb), .3); color: #7EE2C9; }
[data-theme-mode=dark] .alert-danger { background: rgba(var(--danger-rgb), .12); border-color: rgba(var(--danger-rgb), .3); color: #FFB1AA; }
[data-theme-mode=dark] .alert-warning { background: rgba(var(--warning-rgb), .12); border-color: rgba(var(--warning-rgb), .3); color: #F2CD85; }
[data-theme-mode=dark] .alert-info, [data-theme-mode=dark] .alert-primary { background: rgba(var(--primary-rgb), .12); border-color: rgba(var(--primary-rgb), .3); color: #9ED9F5; }
[data-theme-mode=dark] .accordion-item, [data-theme-mode=dark] .accordion-button { background: rgb(var(--body-bg-rgb)); color: var(--default-text-color); border-color: var(--default-border); }
[data-theme-mode=dark] .accordion-button:not(.collapsed) { background: rgba(var(--primary-rgb), .08); color: rgb(var(--primary-rgb)); }
[data-theme-mode=dark] .accordion-button::after { filter: invert(1) brightness(1.4); }
[data-theme-mode=dark] .form-check-input { background-color: var(--form-control-bg); border-color: #2A4560; }
[data-theme-mode=dark] .form-check-input:checked { background-color: rgb(var(--primary-rgb)); border-color: rgb(var(--primary-rgb)); }
[data-theme-mode=dark] .badge.bg-light { color: var(--default-text-color) !important; }
[data-theme-mode=dark] hr { border-color: var(--default-border); opacity: 1; }

/* highlight.js: match the docs code blocks */
[data-theme-mode=dark] .hljs { background: #05080f; color: #e2e8f0; }
[data-theme-mode=dark] .hljs-attr { color: #7aa7ff; }
[data-theme-mode=dark] .hljs-string { color: #7EE2C9; }
[data-theme-mode=dark] .hljs-number, [data-theme-mode=dark] .hljs-literal { color: #F2CD85; }

/* Uppy dark surfaces sit on our card colour */
[data-theme-mode=dark] .uppy-Dashboard-inner,
[data-theme-mode=dark] .uppy-StatusBar,
[data-theme-mode=dark] .uppy-DashboardContent-bar { background-color: rgb(var(--body-bg-rgb)) !important; border-color: var(--default-border) !important; }


/* Phones: keep the header on one row with the toggle and profile visible */
@media (max-width: 991.98px) {
    .app-header .header-content-left { flex: 1 1 auto; min-width: 0; }
    .app-header .header-content-right { flex: 0 0 auto; }
    .app-header .header-element.header-page-title { min-width: 0; padding-inline: .5rem; }
    .app-header .header-page-title h1,
    .app-header .header-page-title p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .app-header .header-page-title > div { min-width: 0; }
}