/* Shared styles. The brand colour comes from Admin > Settings and is set as --brand in the layout. */
:root { --brand: #1f6feb; --brand-dark: color-mix(in srgb, var(--brand) 80%, #000); --brand-soft: color-mix(in srgb, var(--brand) 10%, #fff); --ink: #16202e; --muted: #64748b; --line: #e5e9f0; --surface: #f6f8fb; }
body { color: var(--ink); }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
.btn-primary, .btn-primary:disabled { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark); --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); }
.btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand); }
.text-primary { color: var(--brand) !important; }
.bg-primary { background-color: var(--brand) !important; }
.text-bg-primary { background-color: var(--brand) !important; }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 20%, transparent); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.nav-pills .nav-link.active { background-color: var(--brand); }
.page-link { color: var(--brand); }
.active > .page-link, .page-link.active { background-color: var(--brand); border-color: var(--brand); }
.card { border: 1px solid var(--line); border-radius: .75rem; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.card-header { background: #fff; border-bottom: 1px solid var(--line); font-weight: 600; border-radius: .75rem .75rem 0 0 !important; }
.table > :not(caption) > * > * { padding: .65rem .75rem; vertical-align: middle; }
.table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; white-space: nowrap; background: var(--surface); }
.table-responsive { -webkit-overflow-scrolling: touch; }
div.dt-container div.dt-search input, div.dt-container select.dt-input { border-radius: .5rem; }
div.dt-container .dt-paging .dt-paging-button.current { background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; }
.badge { font-weight: 600; letter-spacing: .01em; }
.stat-card { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: .75rem; height: 100%; color: inherit; }
a.stat-card:hover { border-color: var(--brand); color: inherit; }
.stat-card .stat-icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: .65rem; display: grid; place-items: center; font-size: 1.25rem; background: var(--brand-soft); color: var(--brand); }
.stat-card .stat-icon.warn { background: #fff4e5; color: #b45309; }
.stat-card .stat-icon.danger { background: #fdecec; color: #b42318; }
.stat-card .stat-icon.ok { background: #e8f7ee; color: #157347; }
.stat-card .stat-value { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label { font-size: .8rem; color: var(--muted); }
.dl-grid { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: .45rem 1rem; margin: 0; }
.dl-grid dt { color: var(--muted); font-weight: 500; }
.dl-grid dd { margin: 0; word-break: break-word; }
.rte-editor { min-height: 180px; height: auto; overflow: auto; }
.rte-editor:focus { outline: none; }
.select2-container--default .select2-selection { min-height: calc(1.5em + .75rem + 2px); border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: .375rem .75rem; background: #fff; }
.select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 1.5; color: var(--ink); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: .5rem; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--brand-soft); border: 0; border-radius: .35rem; margin-top: .15rem; }
.select2-container--default.select2-container--focus .select2-selection, .select2-container--default.select2-container--open .select2-selection { border-color: var(--brand); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 20%, transparent); }
.select2-dropdown { border-color: var(--line); border-radius: .5rem; overflow: hidden; box-shadow: 0 8px 24px rgba(16, 24, 40, .12); }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--brand); color: #fff; }
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--line); border-radius: .4rem; padding: .3rem .5rem; }
.ticket-message { border: 1px solid var(--line); border-radius: .75rem; background: #fff; margin-bottom: 1rem; overflow: hidden; }
.ticket-message .ticket-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .25rem .75rem; padding: .6rem 1rem; background: var(--surface); font-size: .85rem; }
.ticket-message.staff { border-color: color-mix(in srgb, var(--brand) 35%, #fff); }
.ticket-message.staff .ticket-meta { background: var(--brand-soft); }
.ticket-message .ticket-body { padding: 1rem; white-space: pre-wrap; word-break: break-word; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.empty-state i { font-size: 2rem; display: block; margin-bottom: .5rem; opacity: .6; }
.stepper { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.5rem; counter-reset: step; }
.stepper li { counter-increment: step; display: flex; align-items: center; gap: .5rem; padding: .4rem .8rem .4rem .45rem; border-radius: 2rem; background: #fff; border: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.stepper li::before { content: counter(step); width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-weight: 700; font-size: .75rem; }
.stepper li.done { color: var(--ink); }
.stepper li.done::before { background: #198754; color: #fff; content: "\2713"; }
.stepper li.current { border-color: var(--brand); color: var(--brand); font-weight: 600; }
.stepper li.current::before { background: var(--brand); color: #fff; }
@media (max-width: 575.98px) { .dl-grid { grid-template-columns: 1fr; gap: 0; } .dl-grid dd { margin-bottom: .6rem; } }