html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* AI Chat styles */
.ai-chat {
    padding: .25rem;
}

.ai-row {
    display: flex;
    margin-bottom: .5rem;
}

.ai-user {
    justify-content: flex-end;
}

.ai-assistant {
    justify-content: flex-start;
}

.ai-system {
    justify-content: center;
}

.ai-bubble {
    position: relative;
    max-width: min(90%, 960px);
    padding: .6rem .7rem;
    border-radius: 14px;
    border: 1px solid var(--tblr-border-color);
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    line-height: 1.35;
}

.ai-bubble-user {
    border: 0;
    color: #fff;
    background: linear-gradient( 135deg, var(--tblr-primary) 0%, color-mix(in srgb, var(--tblr-primary), white 20%) 100% );
}

.ai-bubble-assistant {
    color: var(--tblr-body-color);
    background: var(--tblr-bg-surface);
}

.ai-bubble-system {
    background: color-mix(in srgb, var(--tblr-secondary), white 92%);
    color: var(--tblr-body-color);
    border-style: dashed;
}

.ai-assistant .ai-bubble {
    margin-left: 2.25rem;
}

.ai-user .ai-bubble {
    margin-right: .75rem;
}

/* subtle vertical guide for assistant replies */
.ai-assistant .ai-bubble::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--tblr-primary), white 60%);
    opacity: .8;
}

.ai-meta {
    font-size: .65rem;
    opacity: .75;
    margin-bottom: .25rem;
    user-select: none;
}

.ai-text {
    white-space: pre-wrap;
}

/* JSON/data block inside bubbles */
pre.ai-data {
    white-space: pre-wrap;
    background: color-mix(in srgb, var(--tblr-secondary), white 93%);
    color: var(--tblr-body-color);
    border: 1px dashed var(--tblr-border-color);
    border-radius: 8px;
    padding: 6px 8px;
    margin: .5rem 0 0 0;
    font-family: SFMono-Regular, Consolas, Menlo, monospace;
    font-size: .8rem;
    line-height: 1.25;
    overflow: auto;
}

/* Tables rendered inside assistant bubbles */
.ai-table-in-bubble caption {
    caption-side: top;
}

.ai-table-in-bubble th {
    white-space: nowrap;
}

.ai-table-in-bubble td, .ai-table-in-bubble th {
    vertical-align: middle;
}

/* Consistent dim shadow for all Bootstrap backdrops */
.modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.55); /* similar to Bootstrap default; adjust to taste */
}

/* Maintain z-index stacking order */
.modal-backdrop {
    z-index: 1040;
}

.modal.show {
    z-index: 1050;
}

/* Highlight T Codes modal with a distinct background */
#modal-tcodes .modal-content {
    background-color: #fff5e6; /* soft orange tint */
    border: 1px solid #f0c987;
}

#modal-tcodes .modal-header {
    background-color: #ffe2b3;
    border-bottom-color: #f0c987;
}

#modal-tcodes .modal-footer {
    background-color: #fff0d6;
    border-top-color: #f0c987;
}

/* Optional: slightly tint selects to match the theme */
#modal-tcodes .tcode-select {
    background-color: #fffaf0;
}

/* 5 T-code selects per row: 50% on small, 20% on >=md */
#modal-tcodes .tcode-col {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: .25rem;
    padding-right: .25rem;
}

@media (min-width: 768px) {
    #modal-tcodes .tcode-col {
        flex: 0 0 20%;
        max-width: 20%;
    }
}


/* Highlight transaction modal content */
.transaction-modal .modal-content {
    background-color: #f5f7ff; /* soft blue tint to stand out */
    border: 2px solid #4c6ef5; /* accent border */
    box-shadow: 0 0 0 4px rgba(76, 110, 245, 0.15); /* subtle outer glow */
}

/* Optional: header/footer accents for better contrast */
.transaction-modal .modal-header {
    background-color: #e9efff;
    border-bottom-color: #4c6ef5;
}

.transaction-modal .modal-footer {
    background-color: #eef3ff;
    border-top-color: #4c6ef5;
}

/* Optional: backdrop tint to further highlight the modal */
.transaction-modal.show ~ .modal-backdrop {
    background-color: rgba(76, 110, 245, 0.25);
}

/* Highlight app forms consistently (matches transaction modal vibe) */
.form-modal .modal-content {
    background-color: #f5f7ff; /* soft blue tint */
    border: 2px solid #4c6ef5; /* accent border */
    box-shadow: 0 0 0 4px rgba(76,110,245,0.12);
}

.form-modal .modal-header {
    background-color: #e9efff;
    border-bottom-color: #4c6ef5;
}

.form-modal .modal-footer {
    background-color: #eef3ff;
    border-top-color: #4c6ef5;
}

/* Kill any bootstrap/tabler modal backdrops app-wide */
.modal-backdrop,
.modal-backdrop.show,
.modal-backdrop.fade.show {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}