/* ====================================
    MARK: COLOR VARIABLES
   ==================================== */

:root {
    --color-success: #198754;
    --color-warning: #FFC107;
    --color-alert: #DC3545;
    --color-gray: #757575;
    --color-link-primary: #1170b7;
    --color-white: #ffffff;
    --color-main: #1170b7;
    --color-gray-dark: #212529;
    --color-gray-medium: #495057;
    --color-main-dark: #001f35;
    --color-main-medium: #003b65;
    --color-main-soft: #0077b622; /* opacity 20% */
    --header-color: #FFC107 !important;
    --header-color-soft: #FFC10722 !important;
}

/* ====================================
    MARK: HIDDEN FUNCTIONS
   ==================================== */

#nav-filter,
#changelist-filter-extra-actions {
    display: none !important;
}


/* ====================================
    MARK: TEXT AND LINKS
   ==================================== */

body {
    font-family: "Noto Sans", sans-serif !important;
}

.select2,
.select2-container {
    color: var(--color-text);
}


h1 a {
    font-weight: 500 !important;
    font-size: calc(1rem + 1vw);
    color: var(--color-white) !important;
}

.selector .selector-available h2 {
    color: var(--color-white) !important;
}

#changelist-filter li.selected a,
a:link,
a:visited {
    color: var(--color-link-primary);
    cursor: pointer !important;
}

/* Ensure header user-tools links look like native admin header links */
#header #user-tools a,
#header #user-tools a:link,
#header #user-tools a:visited {
    color: var(--color-white) !important;
    text-decoration: none;
}
#header #user-tools a:hover {
    text-decoration: underline;
}

/* Ensure icons inside links always show pointer cursor */
a .mdi,
a > .mdi,
a [data-label],
.results td a,
.results td a .mdi,
#result_list a,
#result_list a .mdi {
    cursor: pointer !important;
}


/* ====================================
    MARK: BUTTONS AND FORMS
   ==================================== */

#toolbar form input[type="submit"],
#changelist .actions .button,
a.button {
    color: var(--color-white) !important;
    background-color: var(--color-main) !important;
    border: none;
}

input[type="submit"] {
    background-color: var(--color-main) !important;
}

input[type="submit"].default {
    background-color: var(--color-main-medium) !important;
    text-transform: capitalize;
}

a.deletelink {
    background-color: var(--color-alert) !important;
    border-radius: 8px !important;
}

a.customlink,
a.historylink,
li a.addlink {
    background-color: var(--color-main-medium) !important;
    border-radius: 16px !important;
}

button,
input[type="submit"] {
    border-radius: 8px !important;
    border: none !important;
}

/* button exception */
#toggle-nav-sidebar {
    border-radius: 0px !important;
}

/* ====================================
    MARK: HEADER AND NAVIGATION
   ==================================== */

.branding-logo {
    width: 64px;
    height: 64px;
    margin: 12px;
}

#header {
    background-color: var(--color-gray-dark) !important;
}

#nav-sidebar .current-model {
    background: var(--header-color-soft);
}

#changelist-filter details>summary::before {
    content: '▸';
}

#changelist-filter details[open]>summary::before {
    content: '▾';
}

/* ====================================
    MARK: STRUCTURE AND BACKGROUND
   ==================================== */

.breadcrumbs,
caption,
fieldset h2,
fieldset summary,
#changelist-filter h2 {
    background-color: var(--color-gray-medium) !important;
    border: none !important;
}

#nav-sidebar {
    margin-top: 20px;
    border-right: none;
}

fieldset.collapsed h2 {
    color: var(--color-white);
}

fieldset.collapsed .collapse-toggle {
    color: var(--color-main);
}


/* ====================================
    MARK: TABLES AND SCROLLING
   ==================================== */

.results {
    overflow-x: scroll !important;
}


/* ====================================
    MARK: INLINES
   ==================================== */

.inline-group .tabular td.original p {
    font-size: 12px;
}


/* ====================================
    MARK: SHAPES AND CONTAINERS
   ==================================== */

.customlink .mdi {
    display: inline-block;
    transform: scale(1.5);
    transform-origin: center;
}

svg.theme-icon-when-light,
svg.theme-icon-when-dark,
svg.theme-icon-when-auto
{
    fill: var(--header-link-color);
    color: var(--color-gray-dark) !important;
}

/* ====================================
    MARK: INTRO.JS (Onboarding tooltips)
   ==================================== */
/* Keep tooltip text dark in all themes (tooltip bg stays light) */
.introjs-tooltiptext {
    color: var(--color-gray-dark) !important;
}

/* ====================================
    MARK: UTILITY CLASSES
   ==================================== */

.hidden {
    display: none !important;
}

/* ====================================
    MARK: CUSOTM PAGINATION
   ==================================== */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1rem;
}

.page-item {
    display: inline-flex; 
    min-width: 24px;
}

/* ====================================
    MARK: CHAT HISTORY PAGE
   ==================================== */

/* layout width & overall page spacing */
.chat-history-page {
    max-width: 900px;
    /* roughly the old .container width */
    margin: 2rem auto;
    /* similar to .mt-4 plus centering */
    padding: 0 1rem;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* subtle secondary text (replacement for .text-muted) */
.thread-id {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1.5rem;
}

/* chat message blocks (replacement for .border, .rounded, .p-2, .mb-2) */
.message {
    border: 1px solid #ddd;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.message .role {
    font-weight: 600;
    margin-right: 0.25rem;
    text-transform: uppercase;
}

/* give a little space above the nav */
.nav-back {
    margin-top: 2rem;
}

/* ====================================
    MARK: FAST TOOLTIPS
   ==================================== */

[data-label] {
    position: relative;
}

[data-label]::after {
    content: attr(data-label);
    position: absolute;
    right: 0;
    transform: translateY(-.1em) translateX(-1.5rem);
    z-index: 10000;
    padding: .5em .75em;
    font: 12px/1 sans-serif;
    background: #333;
    color: #fff;
    border-radius: .5em;  
    display: inline-block;
    width: max-content;
    max-width: 240px;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

[data-label]:hover::after,
[data-label]:focus::after {
    opacity: 1;
}