/*
 * Tel5 bridge for Tel5 Vault
 * ----------------------------------------------
 * The app is built on Bootstrap. tel5.css is linked unchanged; this file only re-points Bootstrap's components at the
 * Tel5 tokens (--t5-*) so every page picks up the Tel5 look without rewriting each template.
 * Colours: only --t5-* variables, plus the literal values tel5.css itself uses (#DAD6D3, #FCFBFA, #E3B4B0, #EBDC8A,
 * rgba(255,255,255,…)). The rgb triples below are the Tel5 hex values written as numbers for Bootstrap's *-rgb variables.
 * Navigation stays in the LEFT sidebar (owner's choice); the sidebar takes the role of the guide's top bar.
 */

/* ---------------------------------------------------------------- Bootstrap tokens -> Tel5 */
:root, [data-bs-theme="light"] {
  --bs-body-font-family: var(--t5-font);
  --bs-body-color: var(--t5-ink);
  --bs-body-bg: var(--t5-surface);
  --bs-emphasis-color: var(--t5-charcoal);
  --bs-secondary-color: var(--t5-muted);
  --bs-tertiary-bg: var(--t5-surface);
  --bs-border-color: var(--t5-line);
  --bs-link-color: var(--t5-orange-deep);
  --bs-link-color-rgb: 217, 120, 10;
  --bs-link-hover-color: var(--t5-charcoal);
  --bs-link-hover-color-rgb: 34, 32, 33;
  --bs-primary: var(--t5-orange);
  --bs-primary-rgb: 247, 147, 33;
  --bs-focus-ring-color: rgba(247, 147, 33, .35);
  --bs-border-radius: var(--t5-radius-sm);
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23222021' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
html body.t5 { background: var(--t5-surface); color: var(--t5-ink); font-family: var(--t5-font); }
html body.t5.t5-brand-screen { background: var(--t5-charcoal); }   /* sign-in screens are charcoal (guide) */
.t5 h1 { font-weight: 700; }
.t5 .btn { white-space: nowrap; }

/* Page titles: the app uses <h2> where the guide uses <h1> */
.t5 .main-content h2 { font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; color: var(--t5-charcoal); font-weight: 700; }
.t5 .main-content h4, .t5 .main-content h5 { color: var(--t5-charcoal); font-weight: 700; }
.t5 .text-muted, .t5 .form-text { color: var(--t5-muted) !important; }

/* Links: keep Bootstrap-built links (buttons, list items, badges) in their own colours */
.t5 a.btn { color: var(--bs-btn-color); }
.t5 a.btn:hover { color: var(--bs-btn-hover-color); }
.t5 a.list-group-item { color: var(--t5-ink); }
.t5 a.badge { text-decoration: none; }

/* ---------------------------------------------------------------- forms
   tel5.css styles plain inputs/labels under .t5; these keep Bootstrap's widgets intact on top of that. */
.t5 .form-select {
  background-image: var(--bs-form-select-bg-img);
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px;
  padding-right: 2.25rem;
}
.t5 .input-group > .form-control, .t5 .input-group > .form-select { width: 1% !important; min-width: 0; }
.t5 .input-group > .btn { flex-shrink: 0; }
.t5 .form-control:focus, .t5 .form-select:focus { box-shadow: none; }
.t5 .form-check-label { display: inline; font-weight: 500; font-size: 14px; margin-bottom: 0; color: var(--t5-ink); }
.t5 .form-check-input:checked { background-color: var(--t5-orange-deep); border-color: var(--t5-orange-deep); }
.t5 .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(247, 147, 33, .35); border-color: var(--t5-orange-deep); }
.t5 .form-control-sm, .t5 .form-select-sm { min-height: 32px !important; padding-top: 4px !important; padding-bottom: 4px !important; }
.t5 .form-control-lg { min-height: 48px !important; }
.t5 fieldset:disabled .form-control { background: var(--t5-surface); }

/* ---------------------------------------------------------------- buttons (match .t5-btn) */
.t5 .btn { font-weight: 700; border-radius: 8px; --bs-btn-focus-shadow-rgb: 247, 147, 33; }
.t5 .btn-sm { border-radius: var(--t5-radius-sm); }
/* main action: orange with charcoal text; deep orange with white on hover */
.t5 .btn-primary, .t5 .btn-success {
  --bs-btn-bg: var(--t5-orange); --bs-btn-border-color: var(--t5-orange); --bs-btn-color: var(--t5-charcoal);
  --bs-btn-hover-bg: var(--t5-orange-deep); --bs-btn-hover-border-color: var(--t5-orange-deep); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--t5-orange-deep); --bs-btn-active-border-color: var(--t5-orange-deep); --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--t5-orange); --bs-btn-disabled-border-color: var(--t5-orange); --bs-btn-disabled-color: var(--t5-charcoal);
}
/* secondary actions: white with charcoal outline; charcoal on hover */
.t5 .btn-secondary, .t5 .btn-outline-secondary, .t5 .btn-outline-primary, .t5 .btn-outline-success,
.t5 .btn-outline-dark, .t5 .btn-dark, .t5 .btn-light, .t5 .btn-info, .t5 .btn-outline-info {
  --bs-btn-bg: var(--t5-paper); --bs-btn-border-color: var(--t5-charcoal); --bs-btn-color: var(--t5-charcoal);
  --bs-btn-hover-bg: var(--t5-charcoal); --bs-btn-hover-border-color: var(--t5-charcoal); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--t5-charcoal); --bs-btn-active-border-color: var(--t5-charcoal); --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--t5-paper); --bs-btn-disabled-border-color: var(--t5-line); --bs-btn-disabled-color: var(--t5-muted);
}
.t5 .btn-danger, .t5 .btn-outline-danger {
  --bs-btn-bg: var(--t5-paper); --bs-btn-border-color: #E3B4B0; --bs-btn-color: var(--t5-danger);
  --bs-btn-hover-bg: var(--t5-danger); --bs-btn-hover-border-color: var(--t5-danger); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--t5-danger); --bs-btn-active-border-color: var(--t5-danger); --bs-btn-active-color: #fff;
}
.t5 .btn-warning, .t5 .btn-outline-warning {
  --bs-btn-bg: var(--t5-paper); --bs-btn-border-color: #EBDC8A; --bs-btn-color: var(--t5-warn);
  --bs-btn-hover-bg: var(--t5-warn-tint); --bs-btn-hover-border-color: #EBDC8A; --bs-btn-hover-color: var(--t5-warn);
  --bs-btn-active-bg: var(--t5-warn-tint); --bs-btn-active-border-color: #EBDC8A; --bs-btn-active-color: var(--t5-warn);
}
.t5 .btn-link { --bs-btn-color: var(--t5-orange-deep); --bs-btn-hover-color: var(--t5-charcoal); font-weight: 600; }
/* buttons on charcoal (sidebar, mobile bar) */
.t5 .btn-outline-light {
  --bs-btn-bg: transparent; --bs-btn-border-color: rgba(255, 255, 255, .25); --bs-btn-color: #DAD6D3;
  --bs-btn-hover-bg: rgba(255, 255, 255, .08); --bs-btn-hover-border-color: rgba(255, 255, 255, .4); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, .12); --bs-btn-active-color: #fff;
}

/* ---------------------------------------------------------------- cards */
.t5 .card { --bs-card-bg: var(--t5-paper); --bs-card-border-color: var(--t5-line); --bs-card-border-radius: var(--t5-radius);
  --bs-card-inner-border-radius: calc(var(--t5-radius) - 1px); --bs-card-cap-bg: var(--t5-surface); }
.t5 .card-header { color: var(--t5-charcoal); font-weight: 700; }
.t5 .shadow-sm { box-shadow: none !important; }
.t5 #globalSearchBox.shadow { box-shadow: 0 20px 50px rgba(0, 0, 0, .35) !important; }

/* ---------------------------------------------------------------- tables (match .t5-table) */
.t5 .table { --bs-table-bg: var(--t5-paper); --bs-table-color: var(--t5-ink); --bs-table-border-color: var(--t5-line-soft);
  --bs-table-hover-bg: #FCFBFA; --bs-table-hover-color: var(--t5-ink); --bs-table-striped-bg: #FCFBFA; font-size: 14px; }
.t5 .table > thead th, .t5 .table-light th, .t5 .table-dark th {
  --bs-table-bg: var(--t5-surface); background: var(--t5-surface) !important; color: var(--t5-muted) !important;
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  border-bottom: 1px solid var(--t5-line); white-space: nowrap;
}
.t5 .table > :not(caption) > * > * { padding: 11px 14px; }
.t5 .table-sm > :not(caption) > * > * { padding: 7px 10px; }

/* ---------------------------------------------------------------- badges -> Tel5 pills / tags */
.t5 .badge { border-radius: 4px !important; font-size: 12px; font-weight: 600; padding: 2px 8px; border: 1px solid var(--t5-line);
  background: var(--t5-surface) !important; color: var(--t5-charcoal) !important; }
.t5 .badge.bg-success, .t5 .badge.text-bg-success { background: var(--t5-ok-tint) !important; color: var(--t5-ok) !important; border-color: #CFE3CB; }
.t5 .badge.bg-warning, .t5 .badge.text-bg-warning { background: var(--t5-warn-tint) !important; color: var(--t5-warn) !important; border-color: #EBDC8A; }
.t5 .badge.bg-danger, .t5 .badge.text-bg-danger { background: var(--t5-danger-tint) !important; color: var(--t5-danger) !important; border-color: #EFC9C6; }
.t5 .badge.bg-dark, .t5 .badge.text-bg-dark { background: var(--t5-charcoal) !important; color: #fff !important; border-color: var(--t5-charcoal); }
.t5 .badge.bg-primary, .t5 .badge.text-bg-primary, .t5 .badge.bg-info, .t5 .badge.text-bg-info,
.t5 .tag-chip { background: var(--t5-orange-tint) !important; color: var(--t5-orange-ink) !important; border-color: transparent; }
.t5 .tag-chip { border: 0; }
.t5 a.badge:hover { filter: brightness(.96); }

/* ---------------------------------------------------------------- alerts / flashes (match .t5-flash, .t5-notice) */
.t5 .alert { border: 0; border-radius: 8px; font-size: 14px; }
.t5 .alert-success { --bs-alert-bg: var(--t5-ok-tint); --bs-alert-color: var(--t5-ok); --bs-alert-link-color: var(--t5-ok); }
.t5 .alert-danger { --bs-alert-bg: var(--t5-danger-tint); --bs-alert-color: var(--t5-danger); --bs-alert-link-color: var(--t5-danger); }
.t5 .alert-warning { --bs-alert-bg: var(--t5-warn-tint); --bs-alert-color: var(--t5-charcoal); --bs-alert-link-color: var(--t5-charcoal); border-radius: var(--t5-radius); }
.t5 .alert-info, .t5 .alert-primary, .t5 .alert-secondary, .t5 .alert-light {
  --bs-alert-bg: var(--t5-orange-tint); --bs-alert-color: var(--t5-orange-ink); --bs-alert-link-color: var(--t5-orange-ink); }

/* ---------------------------------------------------------------- misc Bootstrap pieces */
.t5 .list-group { --bs-list-group-border-color: var(--t5-line); --bs-list-group-active-bg: var(--t5-orange);
  --bs-list-group-active-border-color: var(--t5-orange); --bs-list-group-active-color: var(--t5-charcoal);
  --bs-list-group-action-hover-bg: #FCFBFA; }
.t5 .nav-tabs { --bs-nav-tabs-link-active-color: var(--t5-charcoal); --bs-nav-tabs-link-active-border-color: var(--t5-line) var(--t5-line) var(--t5-paper); }
.t5 .nav-link { color: var(--t5-orange-deep); }
.t5 .text-primary { color: var(--t5-orange-deep) !important; }
.t5 .text-success { color: var(--t5-ok) !important; }
.t5 .text-danger { color: var(--t5-danger) !important; }
.t5 .text-warning { color: var(--t5-warn) !important; }
.t5 .bg-light { background: var(--t5-surface) !important; }
.t5 code { background: var(--t5-orange-tint); color: var(--t5-orange-ink); }
.t5 pre code { background: none; color: inherit; }
.t5 .ql-toolbar.ql-snow, .t5 .ql-container.ql-snow { border-color: var(--t5-line); }
.t5 .ql-toolbar.ql-snow { background: var(--t5-surface); border-radius: var(--t5-radius-sm) var(--t5-radius-sm) 0 0; }
.t5 .ql-container.ql-snow { background: var(--t5-paper); border-radius: 0 0 var(--t5-radius-sm) var(--t5-radius-sm); font-family: var(--t5-font); }
.t5 .ql-snow a { color: var(--t5-orange-deep); }

/* ---------------------------------------------------------------- left sidebar = Tel5 top bar, turned on its side */
.t5 {
  --sb-bg: var(--t5-charcoal);
  --sb-border: rgba(255, 255, 255, .08);
  --sb-text: #DAD6D3;
  --sb-muted: rgba(255, 255, 255, .45);
}
.t5 .sidebar { background: var(--t5-charcoal); color: #DAD6D3; padding-top: 0; }
.t5 .sidebar .t5-sidebrand {
  position: relative; overflow: hidden; display: block; padding: 18px 16px 18px 64px; margin-bottom: 12px;
  border-bottom: 1px solid var(--sb-border); text-decoration: none; color: #fff;
}
.t5 .sidebar .t5-sidebrand::before {
  content: ""; position: absolute; left: -30px; top: 0; bottom: 0; width: 72px;
  background: var(--t5-orange); transform: skewX(var(--t5-slash-angle));
}
.t5 .t5-sidebrand__name { position: relative; display: block; color: #fff; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.t5 .t5-sidebrand__sub { position: relative; display: block; color: #DAD6D3; font-size: 12px; font-weight: 500; margin-top: 2px; }
.t5 .sidebar-section-title { color: var(--sb-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; }
.t5 .sidebar a:not(.t5-sidebrand):not(.btn) {
  color: #DAD6D3; font-weight: 600; font-size: 14px; border-left: 0;
  margin: 1px 10px; padding: 7px 12px; border-radius: var(--t5-radius-sm);
}
.t5 .sidebar a:not(.t5-sidebrand):not(.btn):hover { color: #fff; background: rgba(255, 255, 255, .08); }
.t5 .sidebar a.active, .t5 .sidebar a[aria-current="page"] { color: var(--t5-charcoal) !important; background: var(--t5-orange) !important; }
.t5 .sidebar a.active .badge, .t5 .sidebar a[aria-current="page"] .badge { border-color: var(--t5-charcoal); }
.t5 .sidebar-footer { background: var(--t5-charcoal); border-top: 1px solid var(--sb-border); color: #DAD6D3; font-size: 13px; }
.t5 .sidebar-footer .t5-topbar__role { margin-left: 4px; }
.t5 .sidebar-footer .t5-signout { display: inline-block; margin: 6px 0 0 !important; padding: 4px 10px !important; }

/* mobile top bar */
.t5 .navbar.bg-dark { background: var(--t5-charcoal) !important; position: relative; overflow: hidden; padding-left: 30px; }
.t5 .navbar.bg-dark::before { content: ""; position: absolute; left: -34px; top: 0; bottom: 0; width: 48px;
  background: var(--t5-orange); transform: skewX(var(--t5-slash-angle)); }
.t5 .navbar.bg-dark > * { position: relative; }
.t5 .navbar-brand { font-weight: 700; color: #fff !important; }

/* main area spacing, like .t5-page */
.t5 .main-content { padding: 28px clamp(16px, 4vw, 40px) 64px; }
@media (max-width: 767.98px) { .t5 .main-content { padding: 18px 16px 48px; } }

/* ---------------------------------------------------------------- sign-in style pages (body.t5-brand-screen) */
body.t5-brand-screen .main-content { margin-left: 0 !important; padding: 24px !important; }
body.t5-brand-screen .alert { width: min(420px, 100%); margin: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
body.t5-brand-screen .card { box-shadow: 0 20px 50px rgba(0, 0, 0, .35) !important; border: 0; }
.t5-signin .t5-signin__links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.t5-signin .t5-btn + .t5-btn { margin-top: 8px; }