/* ==========================================================================
247live-custom.css — 247live support portal visual layer
--------------------------------------------------------------------------
Purely presentational. Loaded LAST in every layout so it can restyle
the stock Faveo / AdminLTE 3 / Bootstrap 4-5 markup without touching it.
To revert: remove the to this file from the layouts (or delete it).
Contents
1. Design tokens
2. Base & typography
3. Buttons
4. Forms & editors
5. Cards & panels
6. Tables, DataTables, pagination
7. Badges, priority chips, counters
8. Alerts & notices
9. Tabs, dropdowns, modals
10. Agent / admin shell (navbar, sidebar, content header)
11. Ticket detail & conversation (agent)
12. Customer portal shell (header, hero, search, footer)
13. Customer tickets, forms & conversation
14. Login & authentication
15. Error / empty states
16. Responsive
========================================================================== */
/* ---- Poppins (self-hosted; latin subset) -------------------------------- */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/poppins/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/poppins/poppins-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/poppins/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/poppins/poppins-700.woff2") format("woff2")}
/* ==========================================================================
1. DESIGN TOKENS
========================================================================== */
:root{
/* brand */
--c-navy:#04213F;
--c-navy-700:#0B3260;
--c-navy-600:#134079;
--c-navy-050:#EEF2F7;
--c-navy-100:#DCE4EE;
--c-accent:#EF0548; /* brand accent: use sparingly, never for "active" */
--c-accent-soft:#FEEAF0;
/* neutrals */
--c-bg:#F4F6F9;
--c-surface:#FFFFFF;
--c-surface-2:#F8FAFC;
--c-border:#E2E7EE;
--c-border-strong:#C9D1DC;
--c-text:#1C2B3A;
--c-text-2:#556274;
--c-text-3:#8592A3;
/* semantic (deliberately distinct from the brand accent) */
--c-success:#1B7F55; --c-success-bg:#E6F4EC; --c-success-bd:#BFE3CE;
--c-warning:#8A5300; --c-warning-bg:#FFF4DA; --c-warning-bd:#F5DDA1;
--c-danger:#B3261E; --c-danger-bg:#FCECEA; --c-danger-bd:#F2C4C0;
--c-info:#0B3260; --c-info-bg:#EAF1FA; --c-info-bd:#C9DAEF;
/* type */
--font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--fs-xs:11.5px; --fs-sm:12.5px; --fs-base:13.5px; --fs-md:15px; --fs-lg:18px; --fs-xl:22px;
/* shape & depth */
--radius:6px; --radius-lg:10px; --radius-pill:999px;
--shadow-1:0 1px 2px rgba(16,32,52,.05);
--shadow-2:0 4px 14px rgba(16,32,52,.08);
--ring:0 0 0 3px rgba(11,50,96,.16);
/* spacing scale */
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px;
}
/* ==========================================================================
2. BASE & TYPOGRAPHY
========================================================================== */
html body,
html body .wrapper,
html body #page{font-family:var(--font);color:var(--c-text);-webkit-font-smoothing:antialiased}
html body{font-size:var(--fs-base);line-height:1.55;background:var(--c-bg)}
html body.text-sm{font-size:var(--fs-base)}
html body .text-small{font-size:var(--fs-base)}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:var(--font);color:var(--c-navy);font-weight:600;letter-spacing:-.005em}
h1,.h1{font-size:var(--fs-xl)} h2,.h2{font-size:var(--fs-lg)} h3,.h3{font-size:var(--fs-md)} h4,.h4{font-size:var(--fs-base)}
a{color:var(--c-navy-600);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--c-navy);text-decoration:underline;text-underline-offset:2px}
b,strong{font-weight:600}
small,.small{font-size:var(--fs-sm)}
.text-muted{color:var(--c-text-2)!important}
hr{border-top-color:var(--c-border)}
::selection{background:var(--c-navy-100)}
/* keyboard focus should always be visible and consistent */
a:focus-visible,button:focus-visible,.btn:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid var(--c-navy-600);outline-offset:2px}
/* ==========================================================================
3. BUTTONS primary (navy) · secondary (outline) · tertiary (text) · destructive (soft red)
========================================================================== */
html body .btn{
font-family:var(--font);font-size:var(--fs-sm);font-weight:500;line-height:1.4;
padding:.5rem 1rem;border-radius:var(--radius);border:1px solid transparent;
box-shadow:none;text-shadow:none;letter-spacing:0;
transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
html body .btn-sm,html body .btn-xs{padding:.32rem .7rem;font-size:var(--fs-xs)}
html body .btn-lg{padding:.7rem 1.4rem;font-size:var(--fs-base)}
html body .btn:focus,html body .btn.focus{box-shadow:var(--ring)!important;outline:0}
html body .btn.disabled,html body .btn:disabled,html body .btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
/* primary — every affirmative action shares one look (stock Faveo mixes primary/success/info) */
html body .btn-primary,html body #page .btn-primary,html body .btn-success,html body .btn-info,html body .btn-custom,html body #page .btn-custom,
html body input[type=submit].btn-primary,html body button.submit-btn.btn-primary{
background-color:var(--c-navy)!important;border-color:var(--c-navy)!important;color:#fff!important;
}
html body .btn-primary:hover,html body #page .btn-primary:hover,html body .btn-success:hover,html body .btn-info:hover,html body .btn-custom:hover,html body #page .btn-custom:hover{
background-color:var(--c-navy-700)!important;border-color:var(--c-navy-700)!important;color:#fff!important;text-decoration:none}
html body .btn-primary:active,html body .btn-success:active,html body .btn-info:active,html body .btn-custom:active{background-color:var(--c-navy)!important}
/* secondary */
html body .btn-default,html body .btn-secondary,html body .btn-light,html body .btn-outline-secondary,html body .btn-outline-primary,html body .btn-warning{
background-color:var(--c-surface)!important;border-color:var(--c-border-strong)!important;color:var(--c-text)!important}
html body .btn-default:hover,html body .btn-secondary:hover,html body .btn-light:hover,html body .btn-outline-secondary:hover,html body .btn-outline-primary:hover,html body .btn-warning:hover{
background-color:var(--c-surface-2)!important;border-color:var(--c-navy-600)!important;color:var(--c-navy)!important;text-decoration:none}
/* icons/text coloured inline inside secondary buttons keep working; stock "text-orange/yellow/green" helper colours are calmed */
html body .btn-default[class*="text-"],html body .btn-light[class*="text-"]{color:var(--c-text)!important}
/* tertiary */
html body .btn-link{color:var(--c-navy-600);font-weight:500;background:transparent;border-color:transparent}
html body .btn-link:hover{color:var(--c-navy);text-decoration:underline}
/* destructive — soft, never a saturated slab */
html body .btn-danger,html body .btn-outline-danger{
background-color:var(--c-danger-bg)!important;border-color:var(--c-danger-bd)!important;color:var(--c-danger)!important}
html body .btn-danger:hover,html body .btn-outline-danger:hover{
background-color:var(--c-danger)!important;border-color:var(--c-danger)!important;color:#fff!important;text-decoration:none}
html body .btn-flat{border-radius:var(--radius)}
html body .btn-group>.btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}
html body .btn-group>.btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}
/* ==========================================================================
4. FORMS & EDITORS
========================================================================== */
label,.control-label{font-family:var(--font);font-size:var(--fs-sm);font-weight:500;color:var(--c-text-2);margin-bottom:6px}
html body .form-group{margin-bottom:var(--s-4)}
html body .form-control,html body select.form-control,html body textarea.form-control,
html body .custom-select,html body input[type=text],html body input[type=email],html body input[type=password],html body input[type=search],html body input[type=number],html body input[type=tel],html body input[type=url]{
font-family:var(--font);font-size:var(--fs-base);color:var(--c-text);
min-height:38px;padding:.45rem .75rem;background-color:var(--c-surface);
border:1px solid var(--c-border-strong);border-radius:var(--radius);box-shadow:none;
transition:border-color .15s ease,box-shadow .15s ease;
}
html body textarea.form-control{min-height:96px;line-height:1.5}
html body .form-control::placeholder{color:var(--c-text-3)}
html body .form-control:focus,html body .custom-select:focus,html body input[type=text]:focus,html body input[type=email]:focus,html body input[type=password]:focus,html body input[type=search]:focus{
border-color:var(--c-navy-600);box-shadow:var(--ring);outline:0;background-color:#fff}
html body .form-control:disabled,html body .form-control[readonly]{background:var(--c-surface-2);color:var(--c-text-2)}
html body .form-control-sm{min-height:32px;font-size:var(--fs-sm)}
.help-block,.form-text,.form-helper{font-size:var(--fs-xs);color:var(--c-text-2)}
.text-red,.text-danger,label .text-red{color:var(--c-danger)}
html body .has-error label,html body .has-error .help-block{color:var(--c-danger)!important}
html body .has-error .form-control,html body .form-control.is-invalid{border-color:var(--c-danger)!important;box-shadow:none}
html body .has-error .form-control:focus,html body .form-control.is-invalid:focus{box-shadow:0 0 0 3px rgba(179,38,30,.16)!important}
.help-block{color:var(--c-danger)}
input[type=checkbox],input[type=radio]{accent-color:var(--c-navy)}
input[type=file]{font-family:var(--font);font-size:var(--fs-sm);color:var(--c-text-2)}
input[type=file]::file-selector-button{font-family:var(--font);font-size:var(--fs-sm);font-weight:500;padding:.4rem .9rem;margin-right:12px;background:var(--c-surface);color:var(--c-text);border:1px solid var(--c-border-strong);border-radius:var(--radius);cursor:pointer;transition:border-color .15s,background-color .15s}
input[type=file]::file-selector-button:hover{background:var(--c-surface-2);border-color:var(--c-navy-600)}
.input-group-text{background:var(--c-surface-2);border-color:var(--c-border-strong);color:var(--c-text-2);font-size:var(--fs-sm)}
/* select2 */
html body .select2-container--default .select2-selection--single,
html body .select2-container--default .select2-selection--multiple{min-height:38px;border:1px solid var(--c-border-strong);border-radius:var(--radius);background:var(--c-surface)}
html body .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:36px;color:var(--c-text);font-size:var(--fs-base)}
html body .select2-container--default .select2-selection--single .select2-selection__arrow{height:36px}
html body .select2-container--default.select2-container--focus .select2-selection--multiple,
html body .select2-container--default.select2-container--open .select2-selection--single{border-color:var(--c-navy-600);box-shadow:var(--ring)}
html body .select2-container--default .select2-results__option--highlighted[aria-selected],
html body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background:var(--c-navy);color:#fff}
html body .select2-container--default .select2-selection--multiple .select2-selection__choice{background:var(--c-navy-050);border:1px solid var(--c-navy-100);color:var(--c-navy);border-radius:var(--radius-pill);padding:0 8px}
html body .select2-dropdown{border-color:var(--c-border-strong);border-radius:var(--radius);box-shadow:var(--shadow-2)}
/* rich-text editor (summernote) */
html body .note-editor.note-frame,html body .note-editor.note-airframe{border:1px solid var(--c-border-strong);border-radius:var(--radius);box-shadow:none;overflow:hidden}
html body .note-editor.note-frame .note-toolbar{background:var(--c-surface-2);border-bottom:1px solid var(--c-border);padding:6px 8px}
html body .note-editor .note-btn{border-color:var(--c-border);background:var(--c-surface);border-radius:var(--radius);color:var(--c-text-2);font-size:var(--fs-sm)}
html body .note-editor .note-btn:hover,html body .note-editor .note-btn.active{background:var(--c-navy-050);border-color:var(--c-navy-100);color:var(--c-navy)}
html body .note-editor.note-frame .note-editing-area .note-editable{font-family:var(--font);font-size:var(--fs-base);color:var(--c-text);background:#fff}
html body .note-editor.note-frame .note-statusbar{background:var(--c-surface-2);border-top:1px solid var(--c-border)}
html body .note-editor.note-frame.codeview .note-editing-area .note-codable{font-size:var(--fs-sm)}
/* ==========================================================================
5. CARDS & PANELS
========================================================================== */
html body .card,html body .box{
background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);
box-shadow:var(--shadow-1);margin-bottom:var(--s-5)}
html body .card .card,html body .box .box{box-shadow:none;border-color:var(--c-border);margin-bottom:var(--s-4)}
html body .card[class*="card-outline"],html body .card.card-outline{border-top:1px solid var(--c-border)}
html body .card-header,html body .box-header{
background:var(--c-surface);border-bottom:1px solid var(--c-border);padding:14px var(--s-5);
border-radius:var(--radius-lg) var(--radius-lg) 0 0}
html body .card-title,html body .box-title{font-size:var(--fs-md);font-weight:600;color:var(--c-navy);margin:0;float:none;display:inline}
html body .card-body,html body .box-body{padding:var(--s-5)}
html body .card-footer,html body .box-footer{background:var(--c-surface-2);border-top:1px solid var(--c-border);padding:14px var(--s-5);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
html body .card-header small,html body .card-title small{color:var(--c-text-2);font-weight:400}
/* dashboard tiles */
html body .info-box,html body .small-box{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);color:var(--c-text);min-height:76px}
html body .info-box .info-box-text{color:var(--c-text-2);font-size:var(--fs-sm);font-weight:500;text-transform:none}
html body .info-box .info-box-number{color:var(--c-navy);font-size:var(--fs-xl);font-weight:600}
html body .info-box .info-box-icon{border-radius:var(--radius);width:48px;height:48px;line-height:48px;margin:14px 0 0 14px;font-size:var(--fs-lg);background:var(--c-navy-050)!important;color:var(--c-navy)!important;box-shadow:none}
html body .info-box .info-box-icon i,html body .info-box .info-box-icon .fas,html body .info-box .info-box-icon .far{color:inherit!important}
html body .info-box .info-box-icon.bg-warning,html body .info-box .info-box-icon.bg-orange,html body .info-box .info-box-icon.bg-yellow{background:var(--c-warning-bg)!important;color:var(--c-warning)!important}
html body .info-box .info-box-icon.bg-danger,html body .info-box .info-box-icon.bg-red{background:var(--c-danger-bg)!important;color:var(--c-danger)!important}
html body .info-box .info-box-icon.bg-success,html body .info-box .info-box-icon.bg-green{background:var(--c-success-bg)!important;color:var(--c-success)!important}
html body .info-box .info-box-content{padding:10px 14px}
html body .small-box .inner h3,html body .small-box .inner p{color:var(--c-navy)}
html body .small-box>.small-box-footer{background:var(--c-surface-2);color:var(--c-text-2)}
/* admin "settings" icon grid */
html body .card .fa-stack,html body .card .icon-circle{color:var(--c-navy)}
/* ==========================================================================
6. TABLES · DATATABLES · PAGINATION
========================================================================== */
html body .table{color:var(--c-text);margin-bottom:0;border-color:var(--c-border)}
html body .table thead th,html body table.dataTable thead th,html body table.dataTable thead td{
font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--c-text-2);
background:var(--c-surface-2);border-top:0;border-bottom:1px solid var(--c-border);border-right:0;
padding:11px 14px;vertical-align:middle;white-space:nowrap}
html body .table td,html body .table tbody th{border-top:0;border-bottom:1px solid #EDF0F5;padding:13px 14px;vertical-align:middle;font-size:var(--fs-base)}
html body .table tbody tr:last-child td{border-bottom:0}
html body .table-striped>tbody>tr:nth-of-type(odd)>*,html body .table-striped tbody tr:nth-of-type(odd),html body .table-striped tbody tr:nth-of-type(odd)>td{--bs-table-accent-bg:transparent;--bs-table-striped-bg:transparent;background-color:transparent;box-shadow:none;color:inherit}
html body .table-hover>tbody>tr:hover>*{--bs-table-accent-bg:#F6F9FC;background-color:#F6F9FC;color:inherit}
html body .table-hover tbody tr:hover,html body table.dataTable tbody tr:hover,html body table.dataTable tbody tr:hover>td{background-color:#F6F9FC}
html body .table-bordered,html body .table-bordered td,html body .table-bordered th{border-left:0;border-right:0}
html body .table-responsive{border:0}
/* DataTables (ticket lists, users, orgs…) — stock inline styles on
force a grey unread background and heavy borders */
html body .dataTables_wrapper{font-size:var(--fs-base);color:var(--c-text)}
html body .dataTables_wrapper .dataTables_length,html body .dataTables_wrapper .dataTables_filter,html body .dataTables_wrapper .dataTables_info{font-size:var(--fs-sm);color:var(--c-text-2)}
html body .dataTables_wrapper .dataTables_filter input,html body .dataTables_wrapper .dataTables_length select{min-height:34px;padding:.3rem .7rem;margin-left:8px;border:1px solid var(--c-border-strong);border-radius:var(--radius);background:#fff}
html body .dataTables_wrapper .dataTables_length select{padding-right:1.6rem}
html body table.dataTable{border-collapse:collapse!important;border:1px solid var(--c-border);border-radius:var(--radius);width:100%!important}
html body table.dataTable tbody td{background-color:transparent!important;border-bottom:1px solid #EDF0F5!important;border-right:0!important;font-weight:400!important;padding:13px 14px}
html body table.dataTable tbody tr:last-child td{border-bottom:0!important}
html body table.dataTable thead .sorting,html body table.dataTable thead .sorting_asc,html body table.dataTable thead .sorting_desc{cursor:pointer}
html body div.dataTables_processing{border:1px solid var(--c-border);border-radius:var(--radius);background:#fff;color:var(--c-text-2);font-size:var(--fs-sm);box-shadow:var(--shadow-2)}
/* ticket-list rows: unread tickets are already bold via inline font-weight; keep a quiet tint instead of grey blocks */
html body table.dataTable tbody tr:has(td[style*="font-weight: 600"]){background:#FAFCFF}
html body table.dataTable tbody tr:has(td[style*="font-weight: 600"]) td:first-child{box-shadow:inset 3px 0 0 var(--c-navy)}
/* subject (primary) vs ticket number (metadata) */
html body table.dataTable td .tooltip1>a,html body .mailbox-name a{font-weight:500;color:var(--c-navy);}
html body table.dataTable td .tooltip1>a:hover,html body .mailbox-name a:hover{color:var(--c-navy-600);text-decoration:underline}
html body table.dataTable td>a[href*="/thread/"][title],html body td.mailbox-Id{font-size:var(--fs-sm);font-weight:500!important;color:var(--c-text-2)!important;white-space:nowrap;font-variant-numeric:tabular-nums}
html body table.dataTable td a>span:not([style*="red"]){color:var(--c-text)!important}
html body table.dataTable td a>span[style*="red"]{color:var(--c-danger)!important;font-weight:500}
html body table.dataTable td .tooltip1 span[style*="green"]{color:var(--c-text-3)!important;font-weight:400}
html body table.dataTable td[class*="sorting"],html body table.dataTable td.sorting_1{color:var(--c-text-2);font-size:var(--fs-sm)}
html body .tooltiptext{border-radius:var(--radius);box-shadow:var(--shadow-2);border:1px solid var(--c-border);font-size:var(--fs-sm)}
/* wide ticket tables scroll inside their card instead of stretching the page */
html body .dataTables_wrapper,html body .mailbox-messages{overflow-x:auto;max-width:100%}
html body .content-wrapper .card-body{min-width:0}
/* list toolbar (select all / delete / close / merge) */
html body .mailbox-controls .btn,html body #modalpopup>.btn,html body #modalpopup>input.btn{margin-right:6px}
/* pagination */
html body .pagination{margin:var(--s-3) 0 0;gap:4px}
html body .page-link,html body .paginate_button>a{border:1px solid var(--c-border);color:var(--c-text-2);border-radius:var(--radius)!important;padding:.4rem .75rem;font-size:var(--fs-sm);background:#fff;margin:0}
html body .page-link:hover{background:var(--c-navy-050);color:var(--c-navy);border-color:var(--c-navy-100)}
html body .page-item.active .page-link,html body .paginate_button.active>a{background:var(--c-navy);border-color:var(--c-navy);color:#fff}
html body .page-item.disabled .page-link{color:var(--c-text-3);background:var(--c-surface-2)}
/* ==========================================================================
7. BADGES · PRIORITY CHIPS · COUNTERS
========================================================================== */
html body .badge,html body .label{
font-family:var(--font);font-size:var(--fs-xs);font-weight:500;letter-spacing:.01em;line-height:1.4;
padding:.28em .7em;border-radius:var(--radius-pill);border:1px solid transparent;text-transform:none}
html body .badge-primary,html body .badge-info,html body .label-primary,html body .label-info,html body .bg-primary.badge,html body .bg-info.badge{background:var(--c-info-bg)!important;color:var(--c-info)!important;border-color:var(--c-info-bd)}
html body .badge-success,html body .label-success,html body .bg-success.badge,html body .bg-green.badge{background:var(--c-success-bg)!important;color:var(--c-success)!important;border-color:var(--c-success-bd)}
html body .badge-warning,html body .label-warning,html body .bg-warning.badge,html body .bg-yellow.badge{background:var(--c-warning-bg)!important;color:var(--c-warning)!important;border-color:var(--c-warning-bd)}
html body .badge-danger,html body .label-danger,html body .bg-danger.badge,html body .bg-red.badge{background:var(--c-danger-bg)!important;color:var(--c-danger)!important;border-color:var(--c-danger-bd)}
html body .badge-secondary,html body .badge-light,html body .badge-default,html body .label-default{background:var(--c-navy-050)!important;color:var(--c-text-2)!important;border-color:var(--c-border)}
/* priority chips — the templates paint these with an inline colour from the priority settings (saturated by default).
They become compact soft chips; the four default priority colours get matching soft tones. */
html body table.dataTable td button.btn-xs,html body table.dataTable td .btn-xs{
pointer-events:none;cursor:default;font-size:var(--fs-xs)!important;font-weight:500;padding:.25em .75em!important;
border-radius:var(--radius-pill)!important;line-height:1.4;color:var(--c-text-2)!important;background:var(--c-navy-050)!important;border:1px solid var(--c-border)!important}
html body table.dataTable td button.btn-xs[style*="#dd4b38" i]{background:var(--c-danger-bg)!important;color:var(--c-danger)!important;border-color:var(--c-danger-bd)!important}
html body table.dataTable td button.btn-xs[style*="#f39c11" i]{background:var(--c-warning-bg)!important;color:var(--c-warning)!important;border-color:var(--c-warning-bd)!important}
html body table.dataTable td button.btn-xs[style*="#00c0ef" i],html body table.dataTable td button.btn-xs[style*="#00bfef" i]{background:var(--c-info-bg)!important;color:var(--c-info)!important;border-color:var(--c-info-bd)!important}
html body table.dataTable td button.btn-xs[style*="#00a65a" i]{background:var(--c-success-bg)!important;color:var(--c-success)!important;border-color:var(--c-success-bd)!important}
/* navigation counters */
html body .navbar-badge{font-size:10px;font-weight:600;padding:2px 5px;top:6px;right:2px;border-radius:var(--radius-pill);background:var(--c-navy)!important;color:#fff!important}
/* ==========================================================================
8. ALERTS & NOTICES
========================================================================== */
html body .alert,html body .callout{
border:1px solid var(--c-border);border-left-width:1px;border-radius:var(--radius);
padding:12px 16px;font-size:var(--fs-base);box-shadow:none;margin-bottom:var(--s-4)}
html body .alert h4,html body .alert h5{font-size:var(--fs-base);font-weight:600;margin:0 0 4px;color:inherit}
html body .alert .close{font-size:20px;opacity:.55;text-shadow:none}
html body .alert-success,html body .alert.bg-success{background:var(--c-success-bg)!important;border-color:var(--c-success-bd);color:#14563A!important}
html body .alert-info,html body .alert.bg-info,html body .alert-secondary{background:var(--c-info-bg)!important;border-color:var(--c-info-bd);color:var(--c-info)!important}
html body .alert-warning,html body .alert.bg-warning,html body .alert-warning.alert-dismissible{background:var(--c-warning-bg)!important;border-color:var(--c-warning-bd);color:#5F3A00!important}
html body .alert-danger,html body .alert.bg-danger{background:var(--c-danger-bg)!important;border-color:var(--c-danger-bd);color:#7A1B16!important}
html body .alert a,html body .alert-warning a{color:inherit;font-weight:500;text-decoration:underline}
html body .alert .fa,html body .alert .fas,html body .alert .icon{margin-right:6px}
html body .alert-custom,html body .custom_alert{border-radius:var(--radius)}
/* ==========================================================================
9. TABS · DROPDOWNS · MODALS
========================================================================== */
html body .nav-tabs{border-bottom:1px solid var(--c-border);gap:2px}
html body .nav-tabs .nav-link,html body .nav-tabs>li>a{
font-size:var(--fs-base);font-weight:500;color:var(--c-text-2)!important;background:transparent;
border:0;border-bottom:2px solid transparent;border-radius:0;padding:.65rem 1rem;margin-bottom:-1px}
html body .nav-tabs .nav-link:hover{color:var(--c-navy)!important;border-bottom-color:var(--c-border-strong)}
html body .nav-tabs .nav-link.active,html body .nav-tabs .nav-item.show .nav-link,html body .nav-tabs>li.active>a{
color:var(--c-navy)!important;background:transparent;border-bottom-color:var(--c-navy);font-weight:600}
html body .nav-tabs .nav-link .badge{margin-left:6px}
html body .nav-tabs .nav-link .badge,html body .nav-tabs-custom .nav-link .badge{background:var(--c-navy-050)!important;color:var(--c-navy)!important;border:1px solid var(--c-border);font-weight:600}
html body .nav-tabs-custom{box-shadow:none;background:transparent;border:0}
html body .nav-pills .nav-link{border-radius:var(--radius);font-size:var(--fs-base);color:var(--c-text-2)}
html body .nav-pills .nav-link.active,html body .nav-pills .show>.nav-link{background:var(--c-navy);color:#fff}
html body .dropdown-menu{
font-family:var(--font);font-size:var(--fs-base);padding:6px;margin-top:6px;
background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-2)}
html body .dropdown-item{padding:.5rem .8rem;border-radius:var(--radius);color:var(--c-text);font-size:var(--fs-base)}
html body .dropdown-item:hover,html body .dropdown-item:focus{background:var(--c-navy-050);color:var(--c-navy);text-decoration:none}
html body .dropdown-item.active,html body .dropdown-item:active{background:var(--c-navy-050)!important;color:var(--c-navy)!important;font-weight:600}
html body .dropdown-divider{border-top-color:var(--c-border);margin:6px 0}
html body .dropdown-header{font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--c-text-3)}
html body .modal-content{border:1px solid var(--c-border);border-radius:var(--radius-lg);box-shadow:0 18px 48px rgba(16,32,52,.22)}
html body .modal-header{padding:16px 20px;border-bottom:1px solid var(--c-border);background:var(--c-surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
html body .modal-title{font-size:var(--fs-md);font-weight:600;color:var(--c-navy)}
html body .modal-body{padding:20px}
html body .modal-footer{padding:14px 20px;border-top:1px solid var(--c-border);background:var(--c-surface-2);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
html body .modal-backdrop.show{opacity:.45;background:var(--c-navy)}
html body .close{color:var(--c-text-2);opacity:.7;text-shadow:none;font-weight:400}
html body .close:hover{opacity:1;color:var(--c-navy)}
/* ==========================================================================
10. AGENT / ADMIN SHELL (AdminLTE 3)
========================================================================== */
html body .content-wrapper{background:var(--c-bg)}
html body .content-wrapper>.content,html body .content-wrapper .content{padding:0 var(--s-6) var(--s-6)}
html body .content-header{padding:var(--s-5) var(--s-6) var(--s-3)}
html body .content-header h1,html body .content-header h2{font-size:var(--fs-xl);font-weight:600;color:var(--c-navy);margin:0}
html body .content-header .breadcrumb,html body .content-header ol.breadcrumb{background:transparent;padding:0;margin:0;font-size:var(--fs-sm);color:var(--c-text-2)}
html body .content-header .breadcrumb a{color:var(--c-text-2)}
html body .main-footer{background:var(--c-surface);border-top:1px solid var(--c-border);color:var(--c-text-2);font-size:var(--fs-sm);padding:14px var(--s-6)}
html body .main-footer a{color:var(--c-navy-600)}
/* top navigation — secondary to the ticket content */
html body .main-header.navbar{
min-height:56px;background:var(--c-surface)!important;border-bottom:1px solid var(--c-border)!important;box-shadow:none;padding:0 var(--s-4)}
html body .main-header .navbar-nav>.nav-item{align-self:stretch;display:flex}
html body .main-header .navbar-nav>.nav-item>.nav-link{
display:flex;align-items:center;
font-size:var(--fs-sm);font-weight:500;color:var(--c-text-2);padding:0 .85rem;position:relative;border-radius:0}
html body .main-header .navbar-nav>.nav-item>.nav-link:hover{color:var(--c-navy);background:transparent;text-decoration:none}
html body .main-header .navbar-nav>.nav-item>.nav-link.active,html body .main-header .navbar-nav>.nav-item>.nav-link[aria-selected=true]{color:var(--c-navy);font-weight:600}
html body .main-header .navbar-nav>.nav-item>.nav-link.active::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:-1px;height:2px;background:var(--c-navy);border-radius:2px 2px 0 0}
html body .main-header .nav-link[data-widget=pushmenu]{color:var(--c-text-2)}
html body .main-header .user-menu>.nav-link{display:flex;align-items:center;gap:8px}
html body .main-header .user-image{width:30px;height:30px;box-shadow:none!important;border:1px solid var(--c-border)}
html body .user-menu>.dropdown-menu{border-radius:var(--radius-lg);overflow:hidden;padding:0;width:260px}
html body .user-menu>.dropdown-menu>.user-header{background:var(--c-navy)!important;color:#fff;height:auto;padding:18px}
html body .user-menu>.dropdown-menu>.user-footer{background:var(--c-surface);padding:12px;border-top:1px solid var(--c-border)}
html body .navbar-nav .dropdown-menu-lg,html body .navbar-nav .dropdown-menu-xl{border-radius:var(--radius-lg)}
/* the second-level tab bar that slides under the header (Not answered / Answered / …) */
html body .content-wrapper>.tab-content>.tab-pane>.navbar{background:var(--c-surface);border-bottom:1px solid var(--c-border);min-height:44px;padding:0 var(--s-4)}
html body .content-wrapper>.tab-content .navbar .nav-link{font-size:var(--fs-sm);font-weight:500;color:var(--c-text-2);padding:.6rem .8rem}
html body .content-wrapper>.tab-content .navbar .nav-link:hover{color:var(--c-navy)}
/* sidebar — restrained navy; active = quiet tint, not a coloured block */
html body .main-sidebar,html body .main-sidebar.sidebar-dark-black,html body .main-sidebar.sidebar-dark-primary{background:var(--c-navy);box-shadow:none;border-right:0}
html body .main-sidebar .brand-link{background:transparent;border-bottom:1px solid rgba(255,255,255,.08);padding:14px 16px;height:auto}
html body .main-sidebar .brand-link .brand-image{max-height:34px;width:auto;opacity:.95;margin:0 auto;float:none}
html body .main-sidebar .user-panel{border-bottom:1px solid rgba(255,255,255,.08);margin:0;padding:14px 16px}
html body .main-sidebar .user-panel .info a{color:#fff;font-weight:500;font-size:var(--fs-base)}
html body .main-sidebar .user-panel .image img{width:32px;height:32px;box-shadow:none}
html body .main-sidebar .nav-sidebar .nav-header{
font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);
padding:18px 20px 6px}
html body .main-sidebar .nav-sidebar>.nav-item{margin-bottom:1px}
html body .main-sidebar .nav-sidebar>.nav-item>.nav-link,html body .main-sidebar .nav-sidebar .nav-treeview>.nav-item>.nav-link{
display:flex;align-items:center;gap:6px;min-height:38px;margin:0 10px;padding:.45rem .75rem;
font-size:var(--fs-base);font-weight:400;color:rgba(255,255,255,.78);border-radius:var(--radius);border-left:0;
transition:background-color .15s ease,color .15s ease}
html body .main-sidebar .nav-sidebar>.nav-item>.nav-link:hover,html body .main-sidebar .nav-sidebar .nav-treeview>.nav-item>.nav-link:hover{background:rgba(255,255,255,.06);color:#fff}
html body .main-sidebar .nav-sidebar>.nav-item>.nav-link.active,html body .main-sidebar .nav-sidebar>.nav-item.menu-open>.nav-link,
html body .main-sidebar .nav-sidebar .nav-treeview>.nav-item>.nav-link.active,
html body .main-sidebar .nav-sidebar>.nav-item>.nav-link.active:hover{background:rgba(255,255,255,.1)!important;color:#fff!important;font-weight:500;box-shadow:none}
html body .main-sidebar .nav-sidebar .nav-link>.nav-icon,html body .main-sidebar .nav-sidebar .nav-link>i:first-child{width:1.5rem;margin-right:2px;text-align:center;font-size:.95rem;color:inherit;opacity:.8}
html body .main-sidebar .nav-sidebar .nav-link>p{margin:0;flex:1;display:flex;align-items:center;justify-content:space-between;color:inherit}
html body .main-sidebar .nav-sidebar .nav-link .right,html body .main-sidebar .nav-sidebar .nav-link .fa-angle-left{opacity:.55}
html body .main-sidebar .nav-sidebar .nav-link .badge{margin-left:auto;background:rgba(255,255,255,.16)!important;color:#fff!important;opacity:1;border:0;font-size:var(--fs-xs);font-weight:500;min-width:24px;text-align:center}
html body .main-sidebar .nav-sidebar .nav-treeview{padding:2px 0 6px}
html body .main-sidebar .nav-sidebar .nav-treeview>.nav-item>.nav-link{padding-left:1.9rem;min-height:34px;font-size:var(--fs-sm)}
/* ticket detail sidebar block ("Ticket information") reads as read-only metadata */
html body .main-sidebar .nav-sidebar .nav-link{flex-wrap:wrap}
html body .main-sidebar .nav-sidebar .nav-link>span:not(.badge):not(.right){flex:0 0 100%;color:rgba(255,255,255,.55);font-size:var(--fs-xs);letter-spacing:.03em}
html body .main-sidebar .nav-sidebar .nav-link>br{display:none}
html body .main-sidebar .nav-sidebar .nav-link>small.float-right{margin-left:auto;float:none!important}
html body .main-sidebar .nav-sidebar .nav-link b{color:#fff;font-weight:500}
html body .main-sidebar .os-theme-light>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle{background:rgba(255,255,255,.2)}
html body .sidebar-mini.sidebar-collapse .main-sidebar .nav-sidebar>.nav-item>.nav-link{margin:0 6px;justify-content:center}
/* admin panel icon grid — calmer circles */
html body .content .card-body a>.fa-stack,html body .content .card-body .icon-cir,html body .content .card-body a>i.fas.fa-lg{color:var(--c-navy)}
/* ==========================================================================
11. TICKET DETAIL & CONVERSATION (agent)
The conversation is the primary content; metadata is quiet.
========================================================================== */
/* summary strip (was a full-width saturated bar painted with the priority colour) */
html body .content .callout{background:var(--c-surface)!important;color:var(--c-text)!important;border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:12px 18px;margin:var(--s-4) 0}
html body .content .callout.callout-warning{background:var(--c-warning-bg)!important;border-color:var(--c-warning-bd);color:#5F3A00!important}
html body .content .callout.callout-danger{background:var(--c-danger-bg)!important;border-color:var(--c-danger-bd);color:#7A1B16!important}
html body .content .callout.callout-success{background:var(--c-success-bg)!important;border-color:var(--c-success-bd);color:#14563A!important}
html body .content .callout.callout-info{background:var(--c-info-bg)!important;border-color:var(--c-info-bd);color:var(--c-info)!important}
html body .content .callout a{color:inherit;text-decoration:underline;font-weight:500}
html body .content .callout .row>[class*="col-"]{font-size:var(--fs-sm);color:var(--c-text)}
html body .content .callout b{font-weight:500;color:var(--c-text-2)}
/* key/value tables */
html body .content #hide2 .table td,html body .content #hide2 .table th{border-bottom:1px solid #EDF0F5;padding:10px 4px;font-size:var(--fs-base)}
html body .content #hide2 .table tr:hover>td{background:transparent}
html body .content #hide2 .table td:first-child b,html body .content #hide2 .table td:first-child{color:var(--c-text-2);font-weight:500;font-size:var(--fs-sm);width:36%}
html body .content #hide2 .table td:first-child b{font-weight:500}
/* action toolbar */
html body .content-wrapper .btn-group .btn-sm,html body .content-wrapper .btn-sm.btn-default{font-weight:500}
html body .content-wrapper .btn-group{margin-right:4px}
/* reply / internal-note composer */
html body #inboxactions .nav-tabs .nav-link{font-weight:500}
html body #inboxactions .tab-content .row>[class*="col-md-2"]>label{padding-top:8px;color:var(--c-text-2);font-weight:500}
html body #inboxactions .form-group{margin-bottom:var(--s-3)}
/* timeline → chronological message list */
html body .timeline{margin:0 0 var(--s-6);padding:0}
html body .timeline::before{display:none} /* decorative vertical rail */
html body .timeline>div{margin:0 0 var(--s-4);position:relative}
html body .timeline>.time-label{margin:var(--s-5) 0 var(--s-3);text-align:left}
html body .timeline>.time-label>span{display:inline-block;padding:3px 12px;border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:500;letter-spacing:.02em;background:var(--c-navy-100)!important;color:var(--c-navy)!important;box-shadow:none}
html body .timeline>div>i.fas,html body .timeline>div>i.fa,html body .timeline>div>i.far{
position:absolute;left:0;top:2px;width:30px;height:30px;line-height:30px;font-size:12px;text-align:center;border-radius:50%;
background:var(--c-navy-050)!important;color:var(--c-text-2)!important;border:1px solid var(--c-border)}
html body .timeline>div>i.bg-yellow{background:var(--c-navy)!important;color:#fff!important;border-color:var(--c-navy)}
html body .timeline>div>i.bg-purple{background:var(--c-warning-bg)!important;color:var(--c-warning)!important;border-color:var(--c-warning-bd)}
html body .timeline>div>.timeline-item{
margin:0 0 0 44px;background:var(--c-surface);border:1px solid var(--c-border);border-left:3px solid var(--c-border-strong);
border-radius:var(--radius-lg);box-shadow:none;overflow:hidden}
html body .timeline>div>i.bg-yellow+.timeline-item{border-left-color:var(--c-navy);background:#FAFCFF}
html body .timeline>div>i.bg-purple+.timeline-item{border-left-color:#E6B94F;background:#FFFCF3}
html body .timeline>div>.timeline-item>.timeline-header{
font-size:var(--fs-base);font-weight:600;color:var(--c-navy);padding:12px 16px 2px;margin:0;border-bottom:0;line-height:1.5}
html body .timeline-item>.timeline-header>a{color:var(--c-navy)}
html body .timeline-item>.timeline-header img.img-circle{width:26px;height:26px;margin-right:8px;border:1px solid var(--c-border);vertical-align:middle}
html body .timeline-item>.timeline-header>span[style*="float"]{font-size:var(--fs-xs)!important;color:var(--c-text-3)!important;font-weight:400;margin:6px 0 0!important}
html body .timeline-item [class*="timeline-body"]{padding:4px 16px 14px!important;margin:0!important;color:var(--c-text);font-size:var(--fs-base);line-height:1.65}
html body .timeline-item [class*="timeline-body"] iframe{width:100%;border:0;display:block}
html body .timeline-item .timeline-footer{margin:0!important;padding:0 16px 14px}
html body .timeline-item .timeline-footer:empty,html body .timeline-item .mailbox-attachments:empty{display:none}
html body ul.mailbox-attachments{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
html body .mailbox-attachments li{float:none;width:auto;margin:0;border:1px solid var(--c-border);border-radius:var(--radius);background:var(--c-surface-2)}
html body .mailbox-attachment-info{background:transparent;border:0;padding:8px 12px}
html body .mailbox-attachment-name{color:var(--c-navy);font-weight:500;font-size:var(--fs-sm)}
html body .mailbox-attachment-size{color:var(--c-text-3);font-size:var(--fs-xs)}
html body .timeline-item .ticketratingtitle{color:var(--c-text-2)!important;font-size:var(--fs-xs);font-weight:500}
/* ==========================================================================
12. CUSTOMER PORTAL SHELL
========================================================================== */
html body #page{background:var(--c-bg)}
html body .site-header{background:var(--c-surface);border-bottom:1px solid var(--c-border);padding:14px 0}
html body #logo,html body #logo a{font-size:21px!important;color:var(--c-navy);font-weight:400;letter-spacing:-.01em;text-decoration:none}
html body #logo b{font-weight:700}
html body .site-navigation{background:transparent;box-shadow:none;border-radius:0}
html body .site-navigation .navbar-menu,html body .site-navigation .navbar-nav{background:transparent;box-shadow:none;border:0}
html body .site-navigation .navbar-menu>li,html body .site-navigation .navbar-nav>li{border:0!important;background:transparent}
html body .site-navigation>ul>li>a,html body #navbar .navbar-menu>li>a,html body .site-navigation .navbar-nav>li>a{
font-size:var(--fs-base);font-weight:500;color:var(--c-text-2);padding:.7rem 1rem;border-top:0!important;border-right:0!important;border-bottom:2px solid transparent;border-radius:0;background:transparent}
html body .site-navigation>ul>li>a:hover,html body #navbar .navbar-menu>li>a:hover{color:var(--c-navy)!important;border-bottom-color:var(--c-border-strong)}
html body .site-navigation li.active>a,html body .site-navigation>ul>li.active>a{color:var(--c-navy)!important;border-bottom-color:var(--c-navy);font-weight:600}
html body .site-navigation li.active>a:hover{color:var(--c-navy)!important}
html body .site-navigation .dropdown-menu{border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:6px;box-shadow:var(--shadow-2)}
html body .site-navigation .dropdown-menu>li>a{border-bottom:0;border-radius:var(--radius);padding:.5rem .8rem}
html body .site-navigation .dropdown-menu>li>a:hover{background:var(--c-navy-050)}
html body .navbar-toggler.custom-toggler{border-color:var(--c-border-strong);border-radius:var(--radius)}
/* hero band + breadcrumb (navy, quiet) */
html body .site-hero{background:var(--c-navy);padding:35px 0}
html body .site-hero .breadcrumb{font-size:var(--fs-sm);color:rgba(255,255,255,.75)}
html body .site-hero .breadcrumb a{color:#fff}
html body .site-hero .breadcrumb-item{color:rgba(255,255,255,.75)}
html body .site-hero .breadcrumb-item+.breadcrumb-item::before{color:rgba(255,255,255,.5)!important}
/* breadcrumb on the light agent/admin canvas */
html body .content-wrapper .breadcrumb{background:transparent;font-size:var(--fs-sm);color:var(--c-text-2);margin:0;padding:0}
html body .content-wrapper .breadcrumb a{color:var(--c-text-2)}
html body .content-wrapper .breadcrumb-item,html body .content-wrapper .breadcrumb li{color:var(--c-text-2)}
html body .content-wrapper .breadcrumb-item+.breadcrumb-item::before{color:var(--c-text-3)!important}
/* search */
html body .site-search .form-border{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);padding:10px}
html body .site-search .search-field,html body #header-search .search-field{border-radius:var(--radius)!important;min-height:40px;border:1px solid var(--c-border-strong)}
html body .site-search .search-submit,html body #header-search .search-submit,html body .search-form .btn{border-radius:var(--radius)!important;min-height:40px;font-weight:500;letter-spacing:0;text-transform:none}
html body .site-search .search-submit,html body #header-search .search-submit{background:var(--c-navy)!important;border-color:var(--c-navy)!important;color:#fff!important}
html body .autocomplete-suggestions{border:1px solid var(--c-border);border-radius:var(--radius);box-shadow:var(--shadow-2)}
/* content surface */
html body .site-main .content-area{border-radius:var(--radius-lg);border:1px solid var(--c-border);box-shadow:var(--shadow-1)}
html body .site-main{padding-bottom:var(--s-8)}
html body .section-title,html body .widget-title{font-size:var(--fs-md);font-weight:600;color:var(--c-navy);border-bottom:1px solid var(--c-border)}
html body .section-title>i.line{border-color:var(--c-accent)} /* small brand accent */
html body .entry-title,html body .entry-title a,html body .archive-title{color:var(--c-navy);font-weight:600}
html body .entry-header,html body .archive-header{border-bottom:1px solid var(--c-border)}
html body .site-footer,html body footer#colophon{background:var(--c-surface);border-top:1px solid var(--c-border);color:var(--c-text-2);font-size:var(--fs-sm)}
html body .site-footer hr{border-color:var(--c-border)}
html body .site-footer a{color:var(--c-navy-600)}
/* KB / widgets on the portal home */
html body .widgetrowitem.defaultwidget,html body a.widgetrowitem{border:1px solid var(--c-border);border-radius:var(--radius-lg);background-color:var(--c-surface);box-shadow:none;transition:border-color .15s,box-shadow .15s}
html body a.widgetrowitem:hover{border-color:var(--c-navy-600);box-shadow:var(--shadow-1)}
html body .widgetitemtitle{color:var(--c-navy)!important;font-family:var(--font);font-size:var(--fs-sm)!important;font-weight:500}
html body .box-categories .fa-ul>li a,html body .site-content .fa-ul>li a{color:var(--c-navy-600)}
/* ==========================================================================
13. CUSTOMER: TICKET LIST · CREATE FORM · CONVERSATION
========================================================================== */
/* my tickets */
html body .mailbox-messages .table{margin-top:var(--s-3)}
html body .mailbox-messages tbody tr{color:var(--c-text)!important}
html body .mailbox-messages td{color:var(--c-text)!important;font-size:var(--fs-base)}
html body .mailbox-messages td.mailbox-last-reply{color:var(--c-text)!important;font-size:var(--fs-sm)}
html body .mailbox-messages td.mailbox-last-activity{color:var(--c-text-2)!important;font-size:var(--fs-sm);white-space:nowrap}
html body .mailbox-messages td.mailbox-priority{color:var(--c-text-2)!important;font-size:var(--fs-sm);font-weight:500}
html body .mailbox-messages td.mailbox-date{color:var(--c-text)!important;font-size:var(--fs-sm);font-weight:500}
html body .mailbox-messages .mailbox-name .fa-comment,html body .mailbox-messages .mailbox-name .fas{color:var(--c-text-3);font-size:var(--fs-xs)}
html body .mailbox-controls .btn{margin-right:6px}
html body .nav-tabs-custom .nav-link{font-size:var(--fs-base)}
html body .nav-tabs-custom .nav-link b{font-weight:inherit}
/* submit-a-ticket + forms on the portal */
html body .site-content .form-group label,html body .content-area label{font-size:var(--fs-sm);font-weight:500;color:var(--c-text-2)}
html body .site-content .form-group label span,html body label .text-red,html body label>span[style*="red"]{color:var(--c-danger)!important}
html body .site-content form .note-editor{margin-bottom:var(--s-3)}
html body .comment-form,html body .comment-respond,html body #respond{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:var(--s-5)}
html body .comment-form .comment-reply-title,html body #reply-title,html body .comment-respond h3{font-size:var(--fs-md);color:var(--c-navy)}
html body .comment-form textarea{height:auto}
/* ticket header + summary (customer) */
html body .entry-content .alert.alert-secondary{background:var(--c-surface)!important;border:1px solid var(--c-border);color:var(--c-text)!important;font-size:var(--fs-sm)}
html body .entry-content .alert.alert-secondary b{font-weight:500;color:var(--c-text-2)}
html body .entry-content .table td{padding:10px 4px;font-size:var(--fs-base);vertical-align:middle;line-height:1.4}
html body .entry-content .table td:first-child,html body .entry-content .table td:first-child b{color:var(--c-text-2);font-weight:500;font-size:var(--fs-sm)}
html body .entry-content .table td[style*="color"]{color:var(--c-text)!important;font-weight:500}
/* conversation */
html body .comments-area .comment-list,html body .comment-list{padding:0;margin:var(--s-5) 0}
html body .comment-list>.comment>.comment-body,html body .comment-body{margin:0 0 var(--s-4);padding:0;border:1px solid var(--c-border);border-radius:var(--radius-lg);background:var(--c-surface);overflow:hidden}
html body .comment-list>.comment>.comment-body,html body .comment-list>.comment:first-child>.comment-body,html body .comment-list>.comment:last-child>.comment-body{margin-top:0;margin-bottom:var(--s-4)}
html body .comment-body>.comment-meta{
display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:10px 16px;text-shadow:none;
border:0;border-bottom:1px solid var(--c-border);border-left:3px solid var(--c-border-strong);border-radius:0;
background:var(--c-surface-2)!important}
html body .comment-body>.comment-meta[style*="#FFFCB3" i]{border-left-color:var(--c-navy);background:#F5F8FC!important} /* support reply */
html body .comment-body>.comment-meta[style*="hsla"]{border-left-color:var(--c-border-strong)} /* customer message */
html body .comment-meta .comment-author{display:flex;align-items:center;gap:10px;margin:0}
html body .comment-meta .comment-author .avatar{float:none;margin:0!important;width:32px;height:32px;border-radius:50%;border:1px solid var(--c-border)!important;box-shadow:none!important}
html body .comment-author .fn,html body .comment-author .fn a{font-size:var(--fs-base);font-weight:600;color:var(--c-navy)}
html body .comment-metadata,html body .comment-metadata small{font-size:var(--fs-xs);color:var(--c-text-3)}
html body .comment-body>.comment-meta>div:last-child{margin-left:auto}
html body .comment-content{padding:14px 16px;font-size:var(--fs-base);line-height:1.65;color:var(--c-text)}
html body .comment-content .reply{color:var(--c-text)}
html body .comment-content br{display:none}
html body .comment-content .table{margin:0}
html body .comment-body .timeline-footer{padding:0 16px 14px;margin:0}
html body .comment-body>br{display:none}
html body .ticketratingtitle{font-size:var(--fs-xs);color:var(--c-text-2)!important}
/* ==========================================================================
14. LOGIN & AUTHENTICATION
========================================================================== */
html body .login-box{width:100%!important;max-width:440px;margin:var(--s-8) auto var(--s-6)}
html body .login-box .form-border{background:var(--c-surface);border:1px solid var(--c-border);border-top:3px solid var(--c-accent);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);padding:0 0 var(--s-6);overflow:hidden}
html body .login-box .form-border>div>h4[style*="background"]{background:var(--c-navy)!important;margin:0 0 var(--s-5);padding:22px 0}
html body .login-box .form-border img{width:112px}
html body .login-box .box-title{display:block;font-size:var(--fs-lg);font-weight:600;color:var(--c-navy);margin:0 0 var(--s-5);padding:0 var(--s-6) var(--s-3);border:0}
html body .login-box form{padding:0 var(--s-6);margin-top:28px}
html body .login-box .form-group.has-feedback{display:flex!important;align-items:center;position:relative;margin-bottom:var(--s-4)}
html body .login-box .form-group .form-control{width:100%;padding-right:2.4rem}
html body .login-box .form-control-feedback{position:absolute!important;right:12px;left:auto!important;top:50%!important;transform:translateY(-50%);color:var(--c-text-3)!important;pointer-events:none}
html body .login-box .btn-block,html body .login-box .btn-primary{width:100%;min-height:42px;font-size:var(--fs-base);font-weight:500}
html body .login-box .row.mt-2{margin-top:var(--s-4)!important;font-size:var(--fs-sm);align-items:center}
html body .login-box .row.mt-2>[class*="col-"]{padding:0 var(--s-2)}
html body .login-box label{font-size:var(--fs-sm);font-weight:400;color:var(--c-text-2);margin:0}
html body .login-box a{font-size:var(--fs-sm)}
html body .login-box .form-group.has-error .form-control{border-color:var(--c-border-strong)!important;box-shadow:none} /* stock template marks both fields red before any input */
html body .login-box .alert{margin:0 var(--s-6) var(--s-4)}
html body .register-box,html body .lockscreen-wrapper{max-width:480px}
/* ==========================================================================
15. ERROR & EMPTY STATES
========================================================================== */
html body .error404 .error-title,html body .error-title{font-weight:700;color:var(--c-navy)}
html body .error-title i,html body .error-title .fa,html body .error-title .fas{color:var(--c-navy-600)!important}
html body .error404 .entry-content,html body .error404 p{color:var(--c-text-2)}
html body .dataTables_empty,html body td.dataTables_empty,html body .empty-state{padding:40px 16px!important;text-align:center;color:var(--c-text-2);font-size:var(--fs-base)}
html body .hentry.error404{padding:var(--s-8) 0}
/* ==========================================================================
16. RESPONSIVE
========================================================================== */
@media (max-width:991.98px){
html body .content-header{padding:var(--s-4) var(--s-4) var(--s-2)}
html body .content-wrapper .content{padding:0 var(--s-4) var(--s-5)}
html body .main-header.navbar{padding:0 var(--s-2)}
html body .card-body,html body .card-header{padding-left:var(--s-4);padding-right:var(--s-4)}
html body .site-header{padding:10px 0}
html body .site-navigation>ul>li>a{border-bottom:0!important;padding:.6rem 0}
html body .navbar-collapse{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);margin-top:8px;padding:6px 12px}
html body #header-search{margin-right:0!important;width:100%!important}
html body .site-search{left:0}
html body .site-search .form-border{position:relative;left:auto;top:auto;width:100%;margin:0}
html body .site-search .form-inline .form-group{width:100%}
html body .site-search .search-submit{width:auto;margin-top:8px}
}
@media (max-width:767.98px){
html body .dataTables_wrapper .dataTables_filter,html body .dataTables_wrapper .dataTables_length{text-align:left;float:none;margin-bottom:var(--s-2)}
html body .dataTables_wrapper .dataTables_filter input{margin-left:0;width:100%}
html body .dataTables_wrapper .dataTables_paginate{float:none;text-align:left;margin-top:var(--s-3)}
html body .dataTables_wrapper .dataTables_scrollBody,html body .dataTables_wrapper>.row>.col-sm-12{overflow-x:auto}
html body .timeline>div>.timeline-item{margin-left:0;margin-top:38px}
html body .timeline>div>i.fas,html body .timeline>div>i.fa,html body .timeline>div>i.far{top:0}
html body .comment-body>.comment-meta{flex-wrap:wrap}
html body .login-box{margin:var(--s-5) auto}
html body #content,html body .d-flex.justify-content-center{width:100%}
html body .login-box,html body .login-box .form-border{max-width:100%}
html body .login-box .row.mt-2>[class*="col-"]{flex:0 0 100%;max-width:100%;margin-bottom:6px}
html body .modal-dialog{margin:12px}
html body .content #hide2 .table td:first-child{width:auto}
}
@media (max-width:575.98px){
html body .content .table thead th,html body .content table.dataTable thead th{white-space:normal;padding:9px 8px!important}
html body .content .table td,html body .content .table tbody th,html body .content table.dataTable tbody td{padding:10px 8px!important}
html body .card-body{padding:var(--s-3)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}