/* ============================================================
   KINORE × osTicket — staff-panel adapter
   Loaded after scp.css. Re-skins osTicket's stock markup with the
   Kinore design tokens (see kinore.css) and lays the stock #content
   out inside the Kinore app shell (sidebar + topbar from shell.js).
   ============================================================ */

/* ---------- class collisions with the design system ---------- */
/* osTicket uses .avatar on thread entries / profile blocks; the design's .avatar is a
   sized circle. Only shell avatars carry a size class (sm/md/lg), so reset the rest. */
body.kinore .avatar:not(.sm):not(.md):not(.lg) { display: block; border-radius: 0; overflow: visible; font-weight: inherit; color: inherit; font-size: inherit; letter-spacing: inherit; place-items: initial; flex: initial; }
body.kinore .thread-entry.avatar { display: block; }
body.kinore span.avatar.pull-left, body.kinore span.avatar.pull-right { display: inline-block; }
/* Round the avatar image itself -- not every image that happens to sit inside a
   thread entry. osTicket puts class="avatar" on the thread-entry CONTAINER as a
   flag meaning "this entry has an avatar", so the descendant selector that used
   to be here matched every <img> in the entry and turned inbound email images
   into circles. It also outranked `.thread-body img { border-radius: 4px }`
   (0,5,2 vs 0,2,2), so the email rule never stood a chance. Match the avatar
   img itself, or an image that is a DIRECT child of an avatar wrapper. */
body.kinore .avatar:not(.sm):not(.md):not(.lg) > img,
body.kinore img.avatar:not(.sm):not(.md):not(.lg) { border-radius: 50%; }
/* osTicket .row/.col/.spacer are not the design's flex utilities */
body.kinore #content .row:not(.kn), body.kinore #content .col:not(.kn) { display: block; gap: 0; }
body.kinore #content .spacer:not(.kn) { flex: initial; }
/* osTicket uses .badge, .label, .tabs, .card? keep design classes only where the shell uses them */
body.kinore #content .btn:not(.kn) { }

/* ---------- page frame ---------- */
body.kinore { background: var(--bg); color: var(--t-1); font-family: var(--sans); font-size: 13px; line-height: 1.45; min-width: 0; }
body.kinore #container { width: auto; max-width: none; margin: 0; padding: 0; background: transparent; min-height: 0; }
body.kinore #header, body.kinore #footer, body.kinore #nav, body.kinore #logo, body.kinore #info { display: none !important; }
body.kinore #pjax-container { background: transparent; }
body.kinore #content { max-width: 1400px; margin: 0 auto; padding: 18px 20px 40px; border: none; background: transparent; box-shadow: none; min-height: 0; }
body.kinore #content:after { content: ''; display: table; clear: both; }
body.kinore #error_bar, body.kinore #warning_bar, body.kinore #notice_bar { margin: 0; border: none; border-bottom: 1px solid var(--line); font-size: 12.5px; padding: 9px 20px; text-align: left; }
body.kinore #error_bar { background: var(--red-bg); color: var(--red); }
body.kinore #warning_bar { background: var(--amber-bg); color: var(--amber); }
body.kinore #notice_bar { background: var(--blue-bg); color: var(--blue); }
body.kinore a { color: var(--accent-hi); }
body.kinore a:hover { color: var(--t-0); }
body.kinore hr { border: none; height: 1px; background: var(--line); margin: 14px 0; }
body.kinore h1, body.kinore h2, body.kinore h3, body.kinore h4 { color: var(--t-0); font-weight: 600; letter-spacing: -.01em; }
body.kinore h2 { font-size: 18px; margin: 0 0 4px; }
body.kinore h3 { font-size: 14px; }
body.kinore h4 { font-size: 13px; }
body.kinore h2 small, body.kinore h2 .faded, body.kinore .faded { color: var(--t-3); font-weight: 400; }
body.kinore p { color: var(--t-2); }
body.kinore #content > p, body.kinore #content > div > p, body.kinore .help-text { color: var(--t-3); font-size: 12.5px; }
body.kinore em, body.kinore i:not([class]) { color: var(--t-2); }
body.kinore ::selection { background: var(--accent-dim); }

/* ---------- sub-navigation -> design tabs ---------- */
body.kinore #sub_nav, body.kinore nav#sub-nav { background: transparent; border: none; box-shadow: none; height: auto; margin: 0; padding: 0 20px; }
body.kinore #sub_nav { display: flex; gap: 2px; border-bottom: 1px solid var(--line); max-width: 1400px; margin: 6px auto 0; flex-wrap: wrap; }
body.kinore #sub_nav > li { float: none; border: none; background: transparent; }
body.kinore #sub_nav > li > a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px; font-size: 13px; color: var(--t-2); font-weight: 450; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; height: auto; line-height: 1.4; text-shadow: none; }
body.kinore #sub_nav > li > a:hover { color: var(--t-0); background: none; }
body.kinore #sub_nav > li > a.active { color: var(--t-0); border-bottom-color: var(--accent); font-weight: 500; background: none; }
body.kinore #sub_nav > li > a.Icon, body.kinore #sub_nav > li > a[class*="Icon"] { padding-left: 12px; background-image: none !important; }
body.kinore #sub_nav > li + li > a { border-left: none; }

/* ---------- tables ---------- */
body.kinore table.list, body.kinore .list, body.kinore table.table, body.kinore .settings_table, body.kinore .form_table, body.kinore .custom-data, body.kinore table.grid {
  border-collapse: separate; border-spacing: 0; width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; font-size: 12.5px; color: var(--t-1); }
body.kinore table.list caption, body.kinore table.table caption { background: transparent; color: var(--t-0); font-weight: 600; font-size: 13px; text-align: left; padding: 10px 12px; caption-side: top; border: none; }
body.kinore table.list thead th, body.kinore table.table thead th, body.kinore table.list th.nohover, body.kinore table.list > tbody > tr:first-child > th {
  text-align: left; font-weight: 500; color: var(--t-3); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 9px 12px; border: none; border-bottom: 1px solid var(--line); background: var(--bg-2); white-space: nowrap; height: auto; }
body.kinore table.list thead th a, body.kinore table.table thead th a { color: var(--t-3); text-decoration: none; background: none !important; padding: 0; }
body.kinore table.list thead th a:hover, body.kinore table.list thead th a.asc, body.kinore table.list thead th a.desc { color: var(--t-0); background: none !important; }
body.kinore table.list tbody td, body.kinore table.table tbody td, body.kinore table.list > tbody > tr > td { padding: 0 12px; height: 38px; border: none; border-bottom: 1px solid var(--line); color: var(--t-1); vertical-align: middle; background: transparent; }
body.kinore table.list tbody tr:last-child td, body.kinore table.table tbody tr:last-child td { border-bottom: none; }
body.kinore table.list tbody tr, body.kinore table.table tbody tr { background: transparent; transition: background .1s; }
body.kinore table.list tbody tr:hover, body.kinore table.table tbody tr:hover, body.kinore table.list tbody tr.highlight, body.kinore table.list tbody tr.row-highlight { background: var(--hover); }
body.kinore table.list tbody tr.oddrow, body.kinore table.list tbody tr.row-odd { background: transparent; }
body.kinore table.list tbody tr.highlight td, body.kinore table.list tbody tr:hover td { background: transparent; }
body.kinore table.list tbody td a, body.kinore table.table tbody td a { color: var(--t-0); }
body.kinore table.list tbody td a:hover { color: var(--accent-hi); }
body.kinore table.list tfoot td, body.kinore table.table tfoot td, body.kinore table.list tfoot th { background: var(--bg-2); color: var(--t-3); border-top: 1px solid var(--line); padding: 9px 12px; font-size: 12px; }
body.kinore table.list tbody td.nohover { background: transparent; }
body.kinore table.list .truncate { color: inherit; }
body.kinore table.list td span.tip, body.kinore table.list .faded { color: var(--t-3); }
body.kinore table.list .icon-star { color: var(--amber); }
body.kinore tr.overdue td, body.kinore td.overdue { color: var(--red); }
body.kinore table.list > tbody > tr > th:not([colspan]) { background: var(--bg-2); color: var(--t-3); }

/* inline priority colours from the queue -> neutral cell, tinted text */
body.kinore table.list tbody td[style*="background-color"], body.kinore table.list tbody td[style*="background:"] { background-color: transparent !important; color: var(--t-2) !important; }
body.kinore table.list tbody td[style*="background-color"] span, body.kinore table.list tbody td[style*="background-color"] a { color: inherit !important; }

/* settings / form tables (label | control) */
body.kinore .form_table th, body.kinore .settings_table th, body.kinore table.form_table > tbody > tr > th { background: var(--bg-2); color: var(--t-0); font-size: 13px; font-weight: 600; text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
body.kinore .form_table th h4, body.kinore .settings_table th h4 { margin: 0; font-size: 13.5px; color: var(--t-0); }
body.kinore .form_table th em, body.kinore .settings_table th em { color: var(--t-3); font-weight: 400; font-size: 12px; font-style: normal; display: block; margin-top: 2px; }
body.kinore .form_table td, body.kinore .settings_table td, body.kinore .custom-data td { padding: 9px 14px; border-bottom: 1px solid var(--line); height: auto; vertical-align: middle; color: var(--t-1); font-size: 12.5px; }
body.kinore .form_table tr:last-child td, body.kinore .settings_table tr:last-child td { border-bottom: none; }
body.kinore .form_table td:first-child, body.kinore .settings_table td:first-child { color: var(--t-1); font-weight: 500; width: 220px; }
body.kinore .form_table td:first-child:not([colspan]) + td { color: var(--t-2); }
body.kinore .form_table i.help-tip, body.kinore .settings_table i.help-tip, body.kinore i.help-tip { color: var(--t-4); }
body.kinore .form_table tr.header td, body.kinore tr.header th, body.kinore td.header { background: var(--bg-2); color: var(--t-3); text-transform: uppercase; font-size: 11px; letter-spacing: .04em; font-weight: 500; }
body.kinore .form_table td .error, body.kinore .error, body.kinore font.error, body.kinore .error-banner { color: var(--red); font-size: 12px; }
body.kinore .required, body.kinore .required label { font-weight: 600; }
body.kinore span.error, body.kinore div.error, body.kinore .form-field .error { color: var(--red); }
body.kinore .form_table thead th, body.kinore .form_table tr.header td { border-bottom: 1px solid var(--line); }
body.kinore .dialog .form_table, body.kinore .dialog table { background: transparent; border: none; }

/* ---------- forms ---------- */
body.kinore input[type=text], body.kinore input[type=password], body.kinore input[type=email], body.kinore input[type=number], body.kinore input[type=search], body.kinore input[type=url], body.kinore input[type=tel], body.kinore input:not([type]), body.kinore textarea, body.kinore select {
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--t-0); font-family: inherit; font-size: 13px; padding: 0 10px; height: 32px; box-shadow: none; transition: border-color .12s, box-shadow .12s; }
body.kinore textarea { height: auto; padding: 9px 10px; line-height: 1.5; resize: vertical; }
body.kinore select { padding-right: 28px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a6a73' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 9px center; }
body.kinore select[multiple], body.kinore select[size] { height: auto; background-image: none; padding: 6px; }
body.kinore input:focus, body.kinore textarea:focus, body.kinore select:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-dim); }
body.kinore input::placeholder, body.kinore textarea::placeholder { color: var(--t-4); }
body.kinore input[disabled], body.kinore select[disabled], body.kinore textarea[disabled] { opacity: .5; }
body.kinore input[type=checkbox], body.kinore input[type=radio] { accent-color: var(--accent); width: 15px; height: 15px; vertical-align: -2px; margin-right: 5px; }
body.kinore label { color: var(--t-1); }
body.kinore fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
body.kinore legend { color: var(--t-3); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 0 6px; }
body.kinore .input-medium { width: 220px; } body.kinore .input-small { width: 120px; }
body.kinore .search-query { background: var(--panel); }
body.kinore .form-field .field-label { color: var(--t-1); }
body.kinore .form-field .field-hint-text, body.kinore .form-field .hint, body.kinore .hint { color: var(--t-3); font-size: 11.5px; }

/* ---------- buttons ---------- */
body.kinore .button, body.kinore .action-button, body.kinore input[type=submit], body.kinore input[type=button], body.kinore input[type=reset], body.kinore button:not(.btn):not(.redactor-button):not([class*="select2"]):not(.ui-datepicker-trigger):not(.close), body.kinore a.button, body.kinore .btn_sm {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--t-1); font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; text-shadow: none; box-shadow: none; cursor: pointer; background-image: none; vertical-align: middle;
  transition: background .12s, border-color .12s, color .12s; }
body.kinore .button:hover, body.kinore .action-button:hover, body.kinore input[type=submit]:hover, body.kinore input[type=button]:hover, body.kinore button:not(.btn):hover { background: var(--raised); border-color: var(--line-3); color: var(--t-0); }
body.kinore .action-button i, body.kinore .button i { margin: 0; color: inherit; }
body.kinore .action-button.muted { background: transparent; border-color: transparent; color: var(--t-2); }
body.kinore .action-button.muted:hover { background: var(--hover); color: var(--t-0); }
body.kinore input[type=submit].green, body.kinore input[type=submit]:not(.cancel):not(.close):not(.red), body.kinore .button.green, body.kinore .action-button.green, body.kinore input[type=submit].save, body.kinore .green.button, body.kinore button[type=submit]:not(.btn) {
  background: var(--accent); border-color: transparent; color: var(--on-accent); font-weight: 600; }
body.kinore input[type=submit]:not(.cancel):not(.close):not(.red):hover, body.kinore .green.button:hover, body.kinore .action-button.green:hover, body.kinore button[type=submit]:not(.btn):hover { background: var(--accent-hi); color: var(--on-accent); }
body.kinore input[type=submit].red, body.kinore .red.button, body.kinore .action-button.danger, body.kinore .danger.button, body.kinore input[type=submit].delete, body.kinore input[type=submit].danger, body.kinore input[type=submit][value="Delete"], body.kinore input[type=submit][name="delete"] {
  background: var(--red-bg); border-color: rgba(247,101,107,.3); color: var(--red); font-weight: 500; }
body.kinore .action-button.danger:hover, body.kinore input[type=submit].red:hover, body.kinore .red.button:hover, body.kinore input[type=submit][name="delete"]:hover { background: rgba(247,101,107,.2); color: var(--red); }
body.kinore input[type=reset], body.kinore input[type=submit].cancel, body.kinore input[type=button].close, body.kinore .button.cancel { background: transparent; border-color: transparent; color: var(--t-2); }
/* scp/css/dropdown.css:122 gives the caret `border-left: 1px solid #ccc` as a
   split-button divider between the label and the arrow. On the dark ground that
   reads as a stray vertical line rather than a separator, and rtl.css confirms
   it is purely decorative (it just moves the same line to the other side). Drop
   the border and the padding that spaced it, keeping a small gap instead. */
body.kinore .action-button .icon-caret-down, body.kinore .action-button i.icon-caret-down {
    margin-left: 4px; opacity: .7; border-left: 0; padding-left: 0; }
body.kinore .action-button:hover i.icon-caret-down { border-left: 0; }
body.kinore.rtl .action-button i.icon-caret-down { border-right: 0; padding-right: 0; margin-right: 4px; }
body.kinore .button-group, body.kinore .action-button + .action-button { margin-left: 4px; }
body.kinore .dark.button { background: var(--raised); color: var(--t-0); }
body.kinore .btn_sm { height: 26px; padding: 0 9px; font-size: 12px; }
body.kinore .attached.button { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
body.kinore .configureQ > .noclick-dropdown { color: var(--t-2); background: transparent; }

/* ---------- message banners ---------- */
body.kinore #msg_notice, body.kinore #msg_error, body.kinore #msg_warning, body.kinore .info-banner, body.kinore .warning-banner, body.kinore .error-banner, body.kinore .success-banner, body.kinore .banner {
  border-radius: var(--r); border: 1px solid; padding: 9px 13px; font-size: 12.5px; margin: 0 0 14px; background-image: none; box-shadow: none; }
body.kinore #msg_notice, body.kinore .success-banner { background: var(--green-bg); border-color: rgba(63,185,80,.25); color: var(--green); }
body.kinore #msg_error, body.kinore .error-banner { background: var(--red-bg); border-color: rgba(247,101,107,.28); color: var(--red); }
body.kinore #msg_warning, body.kinore .warning-banner { background: var(--amber-bg); border-color: rgba(210,153,34,.25); color: var(--amber); }
body.kinore .info-banner, body.kinore .banner { background: var(--blue-bg); border-color: rgba(88,155,245,.25); color: var(--blue); }

/* ---------- ticket queue header/toolbar ---------- */
body.kinore #basic_search, body.kinore #basic-ticket-search { background: transparent; border: none; padding: 0; }
body.kinore .sticky-bar { background: rgba(9,9,11,.85); backdrop-filter: blur(10px); border: none; border-bottom: 1px solid var(--line); box-shadow: none; }
body.kinore .sticky-bar .content { max-width: 1400px; margin: 0 auto; padding: 8px 20px; }
body.kinore .sticky-bar h2 { font-size: 16px; }
body.kinore #customQ_nav, body.kinore .jb-overflowmenu, body.kinore .jb-overflowmenu-menu-primary { background: transparent; border: none; }
body.kinore #customQ_nav .jb-overflowmenu-menu-primary li.item > a { color: var(--t-2); background: transparent; border: none; }
body.kinore #customQ_nav .jb-overflowmenu-menu-primary li.item:hover, body.kinore #customQ_nav .jb-overflowmenu-menu-primary li.item.active { background: var(--active); border-radius: var(--r-sm); }
body.kinore #customQ_nav .jb-overflowmenu-menu-primary li.item.active > a, body.kinore #customQ_nav .jb-overflowmenu-menu-primary li.item:hover > a { color: var(--t-0); }
body.kinore .customQ-dropdown, body.kinore #customQ_nav ul li.item div.customQ-dropdown { background: var(--raised); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); color: var(--t-1); }
body.kinore .customQ-dropdown ul li > a, body.kinore .customQ-dropdown li > span, body.kinore .customQ-dropdown li h4 { color: var(--t-1); background: transparent; }
body.kinore .customQ-dropdown ul li:hover > a, body.kinore .customQ-dropdown ul li:not(.personalQ):hover { background: var(--hover); color: var(--t-0); }
body.kinore .customQ-dropdown .add-queue a, body.kinore .customQ-dropdown .add-queue a span { color: var(--accent-hi); }
body.kinore #result-count div, body.kinore .pagination, body.kinore .pagination *, body.kinore .page-links { color: var(--t-3); font-size: 12px; }
body.kinore .pagination a, body.kinore .page-links a { color: var(--t-2); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 4px; padding: 2px 7px; text-decoration: none; }
body.kinore .pagination a:hover, body.kinore .page-links a:hover { color: var(--t-0); border-color: var(--line-3); }
body.kinore .pagination strong, body.kinore .pagination .current { color: var(--accent-hi); font-weight: 600; }
body.kinore .filters, body.kinore .flush-left, body.kinore .flush-right { background: transparent; }
body.kinore .Icon, body.kinore .Icon.Ticket, body.kinore .Icon.webTicket, body.kinore .Icon.emailTicket, body.kinore .Icon.phoneTicket, body.kinore .Icon.apiTicket, body.kinore .Icon.otherTicket, body.kinore .Icon.overdueTicket, body.kinore .Icon.assignedTicket, body.kinore .Icon.lockedTicket { filter: brightness(1.6) grayscale(.3); }

/* ---------- dropdown menus (jquery.dropdown) ---------- */
body.kinore .dropdown-menu, body.kinore .action-dropdown, body.kinore #action-dropdown-more, body.kinore .action-dropdown ul, body.kinore div.dropdown { background: var(--raised); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); color: var(--t-1); }
body.kinore .action-dropdown ul li a, body.kinore .dropdown-menu li a, body.kinore .action-dropdown li a { color: var(--t-1); background: transparent; }
body.kinore .action-dropdown ul li a:hover, body.kinore .dropdown-menu li a:hover { background: var(--hover); color: var(--t-0); }
body.kinore .action-dropdown ul li.disabled a, body.kinore .dropdown-menu .disabled a { color: var(--t-4); }
body.kinore .action-dropdown ul li.separator, body.kinore .dropdown-menu .divider { border-color: var(--line); }
body.kinore .action-dropdown ul li a i { color: var(--t-3); }
body.kinore .action-dropdown ul li.header, body.kinore .dropdown-menu .header { color: var(--t-4); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
body.kinore .action-dropdown:before, body.kinore .action-dropdown:after, body.kinore .dropdown-menu:before, body.kinore .dropdown-menu:after { display: none; }

/* ---------- dialogs / popups ---------- */
body.kinore #overlay { background: rgba(0,0,0,.6); opacity: 1; }
body.kinore .dialog, body.kinore #popup, body.kinore #alert { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); color: var(--t-1); padding: 0; overflow: hidden; }
body.kinore .dialog h3, body.kinore #popup h3, body.kinore #alert h3 { background: transparent; color: var(--t-0); font-size: 14.5px; font-weight: 600; padding: 14px 18px 0; margin: 0; border: none; }
body.kinore .dialog .body, body.kinore #popup .body, body.kinore .dialog > form, body.kinore #alert #body { padding: 14px 18px 18px; }
body.kinore .dialog hr, body.kinore #popup hr { margin: 10px 0; background: var(--line); }
body.kinore .dialog a.close, body.kinore #popup a.close, body.kinore #alert a.close { color: var(--t-3); top: 12px; right: 14px; }
body.kinore .dialog a.close:hover { color: var(--t-0); }
body.kinore .dialog .buttons, body.kinore .dialog p.full-width, body.kinore #alert p.full-width { border-top: 1px solid var(--line); background: var(--bg-2); margin: 12px -18px -18px; padding: 12px 18px; }
body.kinore .dialog th, body.kinore .tip_box th { color: var(--t-3); background: transparent; }
body.kinore .dialog fieldset { background: transparent; }
body.kinore .dialog ul.tabs, body.kinore ul.tabs, body.kinore ul.clean.tabs, body.kinore #response_options ul.tabs, body.kinore .tabs { background: transparent; border: none; border-bottom: 1px solid var(--line); margin: 0 0 12px; padding: 0; height: auto; display: flex; gap: 2px; list-style: none; }
body.kinore ul.tabs li, body.kinore .tabs li { float: none; background: transparent; border: none; margin: 0; }
body.kinore ul.tabs li a, body.kinore .tabs li a, body.kinore ul.tabs > li > a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; font-size: 13px; color: var(--t-2); font-weight: 450; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; text-shadow: none; height: auto; line-height: 1.4; border-radius: 0; }
body.kinore ul.tabs li a:hover { color: var(--t-0); }
body.kinore ul.tabs li.active a, body.kinore ul.tabs li a.active, body.kinore .tabs li.active a, body.kinore ul.tabs > li.active > a { color: var(--t-0); border-bottom-color: var(--accent); font-weight: 500; background: none; }
body.kinore .tab_content { background: transparent; border: none; padding: 0; }
body.kinore ul.tabs li, body.kinore ul.tabs li.active, body.kinore ul.clean.tabs > li, body.kinore ul.clean.tabs > li.active, body.kinore ul.tabs li a, body.kinore ul.tabs li.active a { background: none !important; border-color: transparent !important; box-shadow: none !important; }
body.kinore ul.tabs li.active a, body.kinore ul.tabs > li.active > a { border-bottom-color: var(--accent) !important; }
body.kinore #loading { background: var(--panel); color: var(--t-0); border: 1px solid var(--line-2); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
body.kinore #loading h1 { color: var(--t-0); }

/* ---------- tooltips / tips / popovers ---------- */
body.kinore .tip_box, body.kinore .tip_content, body.kinore .tip_shadow { background: var(--raised); color: var(--t-1); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
body.kinore .tip_box h1, body.kinore .tip_content h1, body.kinore .tip_box h2 { color: var(--t-0); }
body.kinore .tip_arrow { display: none; }
body.kinore .tooltip-inner { background: var(--raised); color: var(--t-0); border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: 12px; }
body.kinore .tooltip.top .tooltip-arrow { border-top-color: var(--line-2); }
body.kinore .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--line-2); }

/* ---------- ticket view ---------- */
body.kinore #ticket_actions, body.kinore .flush-right .pull-right { }
body.kinore table.ticket_info, body.kinore table.ticket_info td, body.kinore .ticket_info th { color: var(--t-1); }
body.kinore table.ticket_info th, body.kinore .ticket_info th, body.kinore td.ticket_info th { color: var(--t-3); font-weight: 500; }
body.kinore table.ticket_info td { border-color: var(--line); }
body.kinore .ticket_info td > table, body.kinore table.ticket_info table { background: transparent; }
body.kinore #ticket_notes .info { background: var(--panel); border-color: var(--line); }
body.kinore #thread-items::before, body.kinore #thread::before { background: var(--line-2); }
body.kinore .thread-entry { background: transparent; }
body.kinore .thread-entry .header, body.kinore .thread-entry .thread-body, body.kinore .thread-entry .thread-body > *, body.kinore .thread-entry .thread-body .attachments { color: var(--t-1); }
body.kinore .thread-entry .header { background: var(--bg-2); border: 1px solid var(--line); border-bottom: none; border-radius: var(--r-lg) var(--r-lg) 0 0; color: var(--t-2); }
body.kinore .thread-entry.message .header { background: var(--blue-bg); border-color: rgba(88,155,245,.2); }
body.kinore .thread-entry.response .header { background: var(--accent-dim); border-color: var(--accent-line); }
body.kinore .thread-entry.note .header { background: var(--amber-bg); border-color: rgba(210,153,34,.22); }
body.kinore .thread-entry .header b, body.kinore .thread-entry .header .title, body.kinore .thread-entry .header a { color: var(--t-0); }
body.kinore .thread-entry .header .faded, body.kinore .thread-entry .header time, body.kinore .thread-entry .header .textra { color: var(--t-3); }
body.kinore .thread-entry .thread-body { background: var(--panel); border: 1px solid var(--line); border-top: none; border-radius: 0 0 var(--r-lg) var(--r-lg); }
body.kinore .thread-entry.message .thread-body { border-color: rgba(88,155,245,.2); }
body.kinore .thread-entry.response .thread-body { border-color: var(--accent-line); }
body.kinore .thread-entry.note .thread-body { border-color: rgba(210,153,34,.22); }
body.kinore .thread-entry .thread-body blockquote { border-left-color: var(--line-3); color: var(--t-2); }
body.kinore .thread-entry .thread-body pre, body.kinore .thread-body code { background: var(--bg-2); border: 1px solid var(--line); color: var(--t-1); }
body.kinore .thread-entry .thread-body a { color: var(--accent-hi); }
body.kinore .thread-entry .avatar, body.kinore .avatar.oscar-borg, body.kinore .avatar.oscar-boy { filter: none; }
body.kinore .thread-entry .attachments, body.kinore .attachments .uploads div { background: transparent; }
body.kinore .thread-entry .attachments a.file, body.kinore .attachments .file, body.kinore .attachment, body.kinore .filename { color: var(--t-1); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); }
body.kinore .thread-event, body.kinore .thread-event .type-icon, body.kinore .thread-event .description { color: var(--t-3); background: transparent; }
body.kinore .thread-event .type-icon { background: var(--panel-2); border-color: var(--line-2); color: var(--t-2); }
body.kinore .thread-event .description b, body.kinore .thread-event .description a { color: var(--t-1); }
body.kinore #response_options { background: transparent; }
body.kinore #response_options > form, body.kinore #response_options > form > table, body.kinore #response_options > table td { background: transparent; color: var(--t-1); }
body.kinore #response_options .reply_tab.tell { color: var(--t-2); }
body.kinore #reply td, body.kinore #note td, body.kinore #internal_note td { color: var(--t-1); }
body.kinore .ticket-counts, body.kinore .sla, body.kinore .status-label { color: var(--t-2); }
body.kinore .dropdown-menu .label, body.kinore .label, body.kinore span.label { border-radius: 100px; padding: 2px 8px; font-size: 11px; }
body.kinore .label-info { background: var(--blue-bg); color: var(--blue); }
body.kinore .label-warning { background: var(--amber-bg); color: var(--amber); }
body.kinore .label-danger, body.kinore .label-important { background: var(--red-bg); color: var(--red); }
body.kinore .label-success { background: var(--green-bg); color: var(--green); }
body.kinore .collaborators, body.kinore #recipients, body.kinore .collab { color: var(--t-2); }
body.kinore .tickets-nav, body.kinore #ticket-nav { color: var(--t-3); }
body.kinore .subject, body.kinore .ticket-title { color: var(--t-0); }
body.kinore .pull-left.flush-left h2 a, body.kinore h2 a { color: var(--t-0); text-decoration: none; }

/* ---------- accordian / kb / faq ---------- */
body.kinore .accordian dt, body.kinore .accordian dt a, body.kinore #kb li, body.kinore #faq ol li { background: var(--panel); border-color: var(--line); color: var(--t-1); border-radius: var(--r); }
body.kinore .accordian dt.active, body.kinore .accordian dt.active a { background: var(--active); color: var(--t-0); }
body.kinore .accordian dd { background: transparent; border-color: var(--line); color: var(--t-2); }
body.kinore #kb li h4 a, body.kinore #faq ol li a { color: var(--t-0); }
body.kinore #kb li h4 span, body.kinore #faq ol li a span, body.kinore .cat-desc { color: var(--t-3); }
body.kinore #kb li:hover, body.kinore #faq ol li:hover { background: var(--raised); }
body.kinore #kbSearch { background: transparent; }
body.kinore .cat-manage-bar { background: var(--bg-2); border-color: var(--line); }
body.kinore .cat-manage-bar a { color: var(--t-2); }
body.kinore .faq-content, body.kinore .faq-content * { color: var(--t-1); }

/* ---------- misc widgets ---------- */
body.kinore .quick-filter, body.kinore .search-options, body.kinore .advanced-search fieldset { background: transparent; border-color: var(--line); }
body.kinore .advanced-search .condition-property, body.kinore .advanced-search .adv-search-val, body.kinore .advanced-search .adv-search-method { color: var(--t-1); }
body.kinore .conditions .condition, body.kinore .condition { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
body.kinore .draggable, body.kinore .sortable-row, body.kinore #sequences .manage-buttons, body.kinore .drag-handle { color: var(--t-3); }
body.kinore .sortable-rows tr, body.kinore #topic-forms tbody + tbody td.handle { background: transparent; }
body.kinore #resizable-columns .column-header { background: var(--bg-2); color: var(--t-3); border-color: var(--line); }
body.kinore .stripe, body.kinore .zebra tr:nth-child(even) td { background: transparent; }
body.kinore .clear { clear: both; }
body.kinore .full-width { width: 100%; }
body.kinore .scroll-up { background: var(--raised); color: var(--t-1); border: 1px solid var(--line-2); }
body.kinore .redactor-box, body.kinore .redactor-styles, body.kinore .redactor-layer, body.kinore .redactor-editor, body.kinore .redactor-in { background: var(--panel) !important; color: var(--t-0) !important; border-color: var(--line-2) !important; border-radius: var(--r-sm); }
body.kinore .redactor-toolbar, body.kinore .redactor-toolbar-box { background: var(--bg-2) !important; color: var(--t-2) !important; border-color: var(--line) !important; box-shadow: none !important; }
/* Button styling lives in the Redactor block near the end of this file: this
   editor is Redactor 3, whose toolbar has no <li>, so `.redactor-toolbar li a`
   never matched anything. */
body.kinore .redactor-styles *, body.kinore .redactor-in * { color: inherit; }
body.kinore .redactor-dropdown, body.kinore .redactor-modal { background: var(--raised); color: var(--t-1); border: 1px solid var(--line-2); }
body.kinore .richtext { background: var(--panel); }
body.kinore .filedrop, body.kinore .dropzone, body.kinore .filedrop .dropzone { background: var(--bg-2); border: 1px dashed var(--line-3); color: var(--t-3); border-radius: var(--r); }
body.kinore .select2-container--default .select2-selection--single, body.kinore .select2-container--default .select2-selection--multiple, body.kinore .select2-dropdown, body.kinore .select2-search--dropdown .select2-search__field {
  background: var(--panel); border: 1px solid var(--line-2); color: var(--t-0); border-radius: var(--r-sm); }
body.kinore .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--t-0); line-height: 30px; }
body.kinore .select2-container--default .select2-selection--single { height: 32px; }
body.kinore .select2-container--default .select2-selection--single .select2-selection__arrow { height: 30px; }
body.kinore .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--active); color: var(--t-0); }
body.kinore .select2-results__option { color: var(--t-1); }
body.kinore .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--accent-dim); border-color: var(--accent-line); color: var(--accent-hi); }
body.kinore .ui-widget-content, body.kinore .ui-datepicker, body.kinore .ui-timepicker-div { background: var(--raised); color: var(--t-1); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); font-family: inherit; }
body.kinore .ui-widget-header, body.kinore .ui-datepicker-header { background: var(--bg-2); border-color: var(--line); color: var(--t-0); border-radius: var(--r) var(--r) 0 0; }
body.kinore .ui-state-default, body.kinore .ui-widget-content .ui-state-default { background: var(--panel-2); border-color: var(--line); color: var(--t-1); }
body.kinore .ui-state-hover, body.kinore .ui-widget-content .ui-state-hover, body.kinore .ui-state-active, body.kinore .ui-widget-content .ui-state-active { background: var(--accent-dim); border-color: var(--accent-line); color: var(--t-0); }
body.kinore .ui-datepicker td span, body.kinore .ui-datepicker td a { text-align: center; }
body.kinore .ui-slider { background: var(--panel-2); border-color: var(--line); }
body.kinore .ui-slider .ui-slider-handle { background: var(--accent); border-color: transparent; }
body.kinore .typeahead.dropdown-menu, body.kinore .tt-menu, body.kinore ul.typeahead { background: var(--raised); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
body.kinore .typeahead.dropdown-menu li a, body.kinore .tt-suggestion { color: var(--t-1); }
body.kinore .typeahead.dropdown-menu li.active a, body.kinore .typeahead.dropdown-menu li a:hover, body.kinore .tt-suggestion:hover, body.kinore .tt-cursor { background: var(--active); color: var(--t-0); }
body.kinore #loadingbar, body.kinore .loadingbar { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
body.kinore .avatar.group:hover > img.avatar + img.avatar { border-color: var(--bg); }
body.kinore .avatar > img.avatar { border-radius: 50%; }
body.kinore .no-pjax, body.kinore .valign-helper { }
body.kinore #sequences .manage-buttons a, body.kinore .quick-add, body.kinore .add-link { color: var(--accent-hi); }
body.kinore .icon-fixed-width, body.kinore .icon-large { color: inherit; }
body.kinore .progress, body.kinore progress { background: var(--panel-2); border-radius: 4px; }
body.kinore #sort-field, body.kinore #sort-direction { }
body.kinore .flag { filter: none; }
body.kinore .ticket-status, body.kinore .status { color: var(--t-2); }
body.kinore span.priority, body.kinore td.priority span { border-radius: 100px; padding: 2px 8px; font-size: 11px; font-weight: 500; }
body.kinore mark, body.kinore .highlight { background: var(--accent-dim); color: var(--t-0); }
body.kinore #kt-panel, body.kinore #cmdk-scrim, body.kinore #kbd-scrim { font-family: var(--sans); }

/* ============================================================
   TICKET VIEW (design: ticket.html) — stock markup re-laid
   ============================================================ */
body.kinore .kt-ticket { margin: -18px -20px -40px; }
body.kinore .kt-ticket .tkt-head { position: sticky; top: var(--top-h); z-index: 20; background: rgba(9,9,11,.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); padding: 12px 16px; }
body.kinore .kt-ticket .tkt-head .content { display: flex; align-items: center; gap: 10px; min-width: 0; width: auto !important; margin: 0; }
body.kinore .kt-ticket .kt-lead { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; order: 1; }
body.kinore .kt-ticket .tkt-head .tnum { font-family: var(--mono); font-size: 13px; color: var(--t-3); flex: 0 0 auto; }
body.kinore .kt-ticket .tkt-head h1 { font-size: 16px; font-weight: 600; color: var(--t-0); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin: 0; }
body.kinore .kt-ticket .tkt-head .flush-left { display: none; }
body.kinore .kt-ticket .tkt-actions { order: 2; float: none; display: flex; align-items: center; gap: 7px; margin-left: auto; flex: 0 0 auto; flex-direction: row-reverse; }
body.kinore .kt-ticket .tkt-actions > * { float: none !important; margin: 0 !important; }
body.kinore .kt-ticket .tkt-actions .action-button, body.kinore .kt-ticket .tkt-actions a.action-button { height: 26px; padding: 0 9px; font-size: 12px; }
body.kinore .kt-ticket .tkt-actions #kt-reply-btn { order: 99; }
body.kinore .kt-ticket .tkt-actions .action-button .pull-right { float: none; }
body.kinore .kt-ticket .tkt-head .line2 { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
body.kinore .sla-chip { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 100px; white-space: nowrap; font-size: 11px; font-weight: 500; font-family: var(--mono); color: var(--t-2); background: var(--panel-2); border: 1px solid var(--line-2); }
body.kinore .sla-chip svg { width: 11px; height: 11px; }
body.kinore .sla-chip.urgent { color: var(--amber); background: var(--amber-bg); border-color: rgba(210,153,34,.25); }
body.kinore .sla-chip.over { color: var(--red); background: var(--red-bg); border-color: rgba(247,101,107,.3); }

body.kinore .tkt-body { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 0; align-items: start; }
body.kinore .thread-col { grid-column: 1; grid-row: 1; min-width: 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: calc(100vh - var(--top-h) - 92px); }
body.kinore .rail { grid-column: 2; grid-row: 1; padding: 14px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: calc(var(--top-h) + 92px); }
@media (max-width: 1100px) { body.kinore .tkt-body { grid-template-columns: 1fr; } body.kinore .thread-col { border-right: none; grid-row: 1; } body.kinore .rail { grid-column: 1; grid-row: 2; position: static; border-top: 1px solid var(--line); background: var(--bg-2); } }

/* requester strip */
body.kinore .req-strip { display: flex; gap: 18px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: var(--bg-2); }
body.kinore .req-strip .who { display: flex; align-items: center; gap: 9px; }
body.kinore .req-strip .who .nm, body.kinore .req-strip .who .nm a { font-size: 13px; font-weight: 600; color: var(--t-0); }
body.kinore .req-strip .who .em { font-size: 11.5px; color: var(--t-3); font-family: var(--mono); }
body.kinore .req-meta { display: flex; gap: 18px; font-size: 12px; }
body.kinore .req-meta > div { white-space: nowrap; }
body.kinore .req-meta .k { color: var(--t-4); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
body.kinore .req-meta .v, body.kinore .req-meta .v a { color: var(--t-1); margin-top: 2px; }

/* rail: stock ticket_info tables -> field-row cards */
body.kinore .rail table.ticket_info { display: block; width: auto !important; background: transparent; border: none; border-radius: 0; overflow: visible; }
body.kinore .rail table.ticket_info > tbody, body.kinore .rail table.ticket_info > tbody > tr, body.kinore .rail table.ticket_info > tbody > tr > td, body.kinore .rail table.ticket_info > tr, body.kinore .rail table.ticket_info > tr > td { display: block; width: auto !important; padding: 0; border: none; }
body.kinore .rail table.ticket_info > tbody > tr > td + td, body.kinore .rail table.ticket_info > tr > td + td { margin-top: 12px; }
body.kinore .rail table.ticket_info table { display: grid; grid-template-columns: auto 1fr; width: 100% !important; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 4px 13px; }
body.kinore .rail table.ticket_info table > tbody, body.kinore .rail table.ticket_info table > tbody > tr, body.kinore .rail table.ticket_info table > tr { display: contents; }
body.kinore .rail table.ticket_info table th, body.kinore .rail table.ticket_info table td { display: flex; align-items: center; min-height: 34px; padding: 7px 0; border-bottom: 1px solid var(--line); background: transparent; width: auto !important; font-size: 12.5px; }
body.kinore .rail table.ticket_info table th { font-size: 11.5px; color: var(--t-3); font-weight: 400; white-space: nowrap; padding-right: 12px; justify-content: flex-start; }
body.kinore .rail table.ticket_info table td { color: var(--t-1); justify-content: flex-end; text-align: right; gap: 6px; flex-wrap: wrap; }
body.kinore .rail table.ticket_info table tr:last-child th, body.kinore .rail table.ticket_info table tr:last-child td { border-bottom: none; }
body.kinore .rail table.ticket_info table td a { color: var(--t-1); }
body.kinore .rail table.ticket_info table td a:hover { color: var(--accent-hi); }
body.kinore .rail table.ticket_info table td .faded { color: var(--t-3); }
body.kinore .rail table.ticket_info.custom-data { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0; margin-top: 12px; }
body.kinore .rail table.ticket_info.custom-data thead, body.kinore .rail table.ticket_info.custom-data thead tr { display: block; }
body.kinore .rail table.ticket_info.custom-data thead th { display: block; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--t-0); text-transform: none; letter-spacing: -.005em; background: transparent; }
body.kinore .rail table.ticket_info.custom-data tbody { display: grid; grid-template-columns: auto 1fr; padding: 4px 13px; }
body.kinore .rail table.ticket_info.custom-data tbody tr { display: contents; }
body.kinore .rail table.ticket_info.custom-data tbody th, body.kinore .rail table.ticket_info.custom-data tbody td { display: flex; align-items: center; min-height: 34px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; background: transparent; }
body.kinore .rail table.ticket_info.custom-data tbody th { color: var(--t-3); font-weight: 400; font-size: 11.5px; padding-right: 12px; }
body.kinore .rail table.ticket_info.custom-data tbody td { justify-content: flex-end; text-align: right; color: var(--t-1); }
body.kinore .rail table.ticket_info.custom-data tbody tr:last-child th, body.kinore .rail table.ticket_info.custom-data tbody tr:last-child td { border-bottom: none; }
body.kinore .rail br { display: none; }
body.kinore .rail .tickets-action, body.kinore .rail a[data-dropdown] { cursor: pointer; border-radius: 5px; padding: 2px 6px; margin: -2px -6px; }
body.kinore .rail .tickets-action:hover, body.kinore .rail a[data-dropdown]:hover { background: var(--hover); }

/* thread -> messages */
body.kinore .thread-col #ticket_tabs { margin: 0; padding: 0 16px; border-bottom: 1px solid var(--line); }
body.kinore .thread-col #ticket_tabs_container { display: flex; flex-direction: column; flex: 1 1 auto; }
body.kinore .thread-col #ticket_thread { display: flex; flex-direction: column; flex: 1 1 auto; }
body.kinore .thread-col #ticketThread, body.kinore .thread-col .thread { padding: 16px; display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; }
body.kinore .thread-col #thread-items::before, body.kinore .thread-col #ticketThread::before, body.kinore .thread-col .thread::before { display: none; }
body.kinore .thread-col .thread-entry { margin: 0 !important; padding: 0 !important; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--panel); position: relative; }
body.kinore .thread-col .thread-entry.message { border-color: rgba(88,155,245,.22); }
body.kinore .thread-col .thread-entry.note { background: rgba(210,153,34,.045); border-color: rgba(210,153,34,.28); }
body.kinore .thread-col .thread-entry.response { border-color: var(--line); }
body.kinore .thread-col .thread-entry > .avatar, body.kinore .thread-col .thread-entry > span.avatar { position: absolute; left: 13px; top: 8px; width: 24px; height: 24px; display: block; margin: 0; }
body.kinore .thread-col .thread-entry > .avatar img, body.kinore .thread-col .thread-entry > span.avatar img { width: 24px !important; height: 24px !important; border-radius: 50%; }
body.kinore .thread-col .thread-entry.avatar .header { padding-left: 46px; }
body.kinore .thread-col .thread-entry .header { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; font-size: 12.5px; color: var(--t-3); margin: 0; min-height: 40px; }
body.kinore .thread-col .thread-entry .header::after { display: none; }
body.kinore .thread-col .thread-entry.message .header, body.kinore .thread-col .thread-entry.response .header, body.kinore .thread-col .thread-entry.note .header { background: transparent; }
body.kinore .thread-col .thread-entry.note .header { border-bottom-color: rgba(210,153,34,.2); }
body.kinore .thread-col .thread-entry .header b, body.kinore .thread-col .thread-entry .header .name, body.kinore .thread-col .thread-entry .header > span:first-of-type b { font-size: 12.5px; font-weight: 600; color: var(--t-0); }
body.kinore .thread-col .thread-entry .header .title { color: var(--t-3); font-size: 11.5px; }
body.kinore .thread-col .thread-entry .header time, body.kinore .thread-col .thread-entry .header .faded:last-child { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--t-3); white-space: nowrap; }
body.kinore .thread-col .thread-entry .header .pull-right, body.kinore .thread-col .thread-entry .header .textra { float: none; margin-left: auto; display: flex; align-items: center; gap: 6px; }
body.kinore .thread-col .thread-entry .header .pull-right + time, body.kinore .thread-col .thread-entry .header .textra ~ time { margin-left: 0; }
body.kinore .thread-col .thread-entry .thread-body { padding: 13px; font-size: 13px; line-height: 1.6; color: var(--t-1); border: none; border-radius: 0; background: transparent; }
body.kinore .thread-col .thread-entry .thread-body p { margin-bottom: 9px; }
body.kinore .thread-col .thread-entry .thread-body strong { color: var(--t-0); }
body.kinore .thread-col .thread-entry .thread-body blockquote, body.kinore .thread-col .thread-entry .thread-body .quote { border-left: 2px solid var(--line-3); padding-left: 11px; color: var(--t-3); font-size: 12.5px; margin: 9px 0; }
body.kinore .thread-col .thread-entry .attachments { padding: 0 13px 13px; display: flex; gap: 8px; flex-wrap: wrap; }
body.kinore .thread-col .thread-entry .attachments .file, body.kinore .thread-col .thread-entry .attachments a.file { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12px; white-space: nowrap; color: var(--t-1); }
body.kinore .thread-col .thread-entry .attachments .file .file-size, body.kinore .thread-col .thread-entry .attachments .filesize { color: var(--t-4); font-family: var(--mono); font-size: 10.5px; }
body.kinore .thread-col .thread-entry .header .role { font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; }
body.kinore .thread-col .thread-entry.message .header .name::after { content: 'Client'; font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; color: var(--blue); background: var(--blue-bg); margin-left: 8px; vertical-align: 1px; }
body.kinore .thread-col .thread-entry.response .header .name::after { content: 'Agent'; font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; color: var(--accent-hi); background: var(--accent-dim); margin-left: 8px; vertical-align: 1px; }
body.kinore .thread-col .thread-entry.note .header .name::after { content: 'Internal note'; font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; color: var(--amber); background: var(--amber-bg); margin-left: 8px; vertical-align: 1px; }
/* system events */
body.kinore .thread-col .thread-event { display: flex; align-items: center; gap: 10px; padding: 0 4px; font-size: 12px; color: var(--t-3); margin: 0; }
body.kinore .thread-col .thread-event .type-icon { width: 22px; height: 22px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line-2); display: grid; place-items: center; flex: 0 0 auto; margin: 0; font-size: 10px; }
body.kinore .thread-col .thread-event .description { flex: 1 1 auto; }
body.kinore .thread-col .thread-event time, body.kinore .thread-col .thread-event .faded { font-family: var(--mono); font-size: 10.5px; color: var(--t-4); }
body.kinore .thread-col .thread-event::before, body.kinore .thread-col .thread-event::after { display: none; }

/* composer (stock #response_options) */
body.kinore .thread-col #response_options { position: sticky; bottom: 0; z-index: 15; background: var(--bg-2); border-top: 1px solid var(--line); margin: auto 0 0; padding: 0; box-shadow: none; }
body.kinore .thread-col #response_options #response-tabs { display: flex; gap: 2px; padding: 8px 12px 0; border: none; margin: 0; }
body.kinore .thread-col #response_options #response-tabs li a { height: 30px; padding: 0 13px; border: 1px solid transparent; border-bottom: none; background: transparent; color: var(--t-2); font-size: 12.5px; font-weight: 500; border-radius: var(--r-sm) var(--r-sm) 0 0; display: inline-flex; align-items: center; gap: 6px; margin: 0; }
body.kinore .thread-col #response_options #response-tabs li.active a { color: var(--t-0); background: var(--panel) !important; border-color: var(--line) !important; }
body.kinore .thread-col #response_options #response-tabs li.active a#post-note-tab { color: var(--amber); }
body.kinore .thread-col #response_options > form { margin: 0; padding: 12px; }
body.kinore .thread-col #response_options > form > table { width: 100% !important; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
body.kinore .thread-col #response_options > form#note > table { background: rgba(210,153,34,.045); border-color: rgba(210,153,34,.28); }
body.kinore .thread-col #response_options > form > table td, body.kinore .thread-col #response_options > form > table th { padding: 8px 12px; color: var(--t-2); font-size: 12px; vertical-align: middle; background: transparent; border: none; }
body.kinore .thread-col #response_options > form > table tr + tr td { border-top: 1px solid var(--line); }
body.kinore .thread-col #response_options > form > table td label, body.kinore .thread-col #response_options > form > table th { color: var(--t-1); font-weight: 500; }
body.kinore .thread-col #response_options > form > table select, body.kinore .thread-col #response_options > form > table input[type=text] { height: 28px; font-size: 12.5px; }
body.kinore .thread-col #response_options .redactor-box { border: none !important; border-radius: 0 !important; }
body.kinore .thread-col #response_options .redactor-toolbar { border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }
body.kinore .thread-col #response_options .buttons { display: flex; justify-content: flex-end; gap: 8px; }
body.kinore .thread-col #response_options p.full-width { margin: 0; }
body.kinore .thread-col #response_options .attachments { padding: 0; }
body.kinore .thread-col #response_options #reply_form_attachments, body.kinore .thread-col #response_options .filedrop { margin-top: 6px; }

/* ============================================================
   NEW TICKET (design: new-ticket.html) — stock form_table re-laid
   ============================================================ */
body.kinore .nt-head { position: sticky; top: var(--top-h); z-index: 20; background: rgba(9,9,11,.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); padding: 12px 16px; display: flex; align-items: center; gap: 12px; margin: -18px -20px 16px; }
body.kinore .nt-head h1 { font-size: 16px; font-weight: 600; color: var(--t-0); letter-spacing: -.01em; margin: 0; }
body.kinore .nt-head .actions { margin-left: auto; display: flex; gap: 8px; }
body.kinore .nt-wrap { max-width: 1400px; }
body.kinore table.nt-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 14px 16px; align-items: start; background: transparent; border: none; border-radius: 0; overflow: visible; width: 100% !important; table-layout: auto; }
body.kinore table.nt-grid > thead { display: none; }
body.kinore table.nt-grid > tbody { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; min-width: 0; }
body.kinore table.nt-grid > tbody:nth-of-type(1) { grid-column: 1; }           /* requester */
body.kinore table.nt-grid > tbody:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: calc(var(--top-h) + 60px); } /* properties */
body.kinore table.nt-grid > tbody#dynamic-form { grid-column: 1; }            /* issue */
body.kinore table.nt-grid > tbody:nth-of-type(4) { grid-column: 1; }           /* response + note */
body.kinore table.nt-grid > tbody > tr { display: block; }
body.kinore table.nt-grid > tbody > tr > th { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: transparent; font-size: 13px; font-weight: 600; color: var(--t-0); }
body.kinore table.nt-grid > tbody > tr > th em { font-style: normal; font-weight: 400; color: var(--t-3); font-size: 11.5px; display: inline; margin: 0; }
body.kinore table.nt-grid > tbody > tr > th em strong { color: var(--t-0); font-size: 13px; font-weight: 600; margin-right: 6px; }
body.kinore table.nt-grid > tbody > tr > th .error { display: inline; font-size: 12px; }
body.kinore table.nt-grid > tbody > tr > td { display: block; width: auto !important; padding: 4px 14px; border: none; font-size: 12px; color: var(--t-1); }
body.kinore table.nt-grid > tbody > tr > td:first-child:not([colspan]) { padding-top: 10px; font-weight: 500; color: var(--t-1); font-size: 12px; }
body.kinore table.nt-grid > tbody > tr > td:first-child:not([colspan]) + td { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
body.kinore table.nt-grid > tbody > tr:last-child > td { border-bottom: none; }
body.kinore table.nt-grid > tbody > tr > td[colspan] { padding: 10px 14px; }
body.kinore table.nt-grid > tbody > tr > td select, body.kinore table.nt-grid > tbody > tr > td input[type=text], body.kinore table.nt-grid > tbody > tr > td input[type=email] { width: 100%; max-width: 100%; }
body.kinore table.nt-grid > tbody > tr > td textarea { width: 100% !important; }
body.kinore table.nt-grid > tbody > tr > td .error, body.kinore table.nt-grid > tbody > tr > td font.error { display: block; margin-top: 3px; }
body.kinore table.nt-grid > tbody > tr > td .faded, body.kinore table.nt-grid > tbody > tr > td em { color: var(--t-3); font-size: 11.5px; }
body.kinore table.nt-grid > tbody > tr > td i.help-tip { margin-left: 4px; }
body.kinore table.nt-grid .required { color: var(--t-1); }
body.kinore table.nt-grid #user-info { display: flex; align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--accent-line); background: var(--accent-dim); border-radius: var(--r); margin: 4px 0 6px; }
body.kinore table.nt-grid #user-info #user-name { font-size: 13px; font-weight: 600; color: var(--t-0); }
body.kinore table.nt-grid #user-info #user-email { font-size: 11.5px; color: var(--t-2); font-family: var(--mono); }
body.kinore table.nt-grid #user-info a.action-button { margin-left: auto; }
body.kinore table.nt-grid .redactor-box { border: 1px solid var(--line-2) !important; border-radius: var(--r) !important; }
body.kinore table.nt-grid .filedrop, body.kinore table.nt-grid .dropzone { margin-top: 10px; }
body.kinore p.nt-submit { display: none; }
@media (max-width: 980px) {
  body.kinore table.nt-grid { grid-template-columns: 1fr; }
  body.kinore table.nt-grid > tbody:nth-of-type(2) { grid-column: 1; grid-row: auto; position: static; }
}

/* dialog internals (user lookup, search, etc.) */
body.kinore .dialog .info-banner, body.kinore .dialog #msg_info, body.kinore .dialog .banner, body.kinore .dialog div.info, body.kinore #msg_info { background: var(--blue-bg); color: var(--blue); border: 1px solid rgba(88,155,245,.25); border-radius: var(--r-sm); padding: 8px 12px; }
body.kinore .dialog .info-banner i, body.kinore #msg_info i { color: var(--blue); }
body.kinore .dialog table.form_table, body.kinore .dialog table { background: transparent; border: none; }
body.kinore .dialog table td, body.kinore .dialog table th { border-color: var(--line); color: var(--t-1); }
body.kinore .dialog em, body.kinore .dialog strong { color: var(--t-1); }
body.kinore .dialog div[style*="border"], body.kinore .dialog td[style*="border"] { border-color: var(--line) !important; }
body.kinore .dialog .user-info, body.kinore .dialog #user-info, body.kinore .dialog .selected-user { background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); }
body.kinore .dialog input[type=search], body.kinore .dialog input.search-input { width: 100%; }
body.kinore .dialog hr { background: var(--line); }

/* ============================================================
   MY PROFILE (design: profile.html) — stock tabs/tables re-laid
   ============================================================ */
body.kinore .set-layout { display: grid; grid-template-columns: 208px minmax(0,1fr); gap: 18px; align-items: start; }
body.kinore .prof-card { display: flex; align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); margin-bottom: 12px; }
body.kinore .prof-card .av-wrap { position: relative; flex: 0 0 auto; display: inline-flex; }
body.kinore .prof-card .avatar { background: linear-gradient(135deg,#7b83eb,#a371f7); }
body.kinore .prof-card .emp-badge { position: absolute; bottom: -3px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; box-shadow: 0 0 0 1.5px var(--panel), 0 0 0 2.5px var(--line-2); }
body.kinore .prof-card .emp-badge img { width: 10px; height: 10px; }
body.kinore .prof-card .nm { font-size: 13px; font-weight: 600; color: var(--t-0); }
body.kinore .prof-card .rl { font-size: 11.5px; color: var(--t-3); }
body.kinore ul.tabs.set-nav { position: sticky; top: calc(var(--top-h) + 16px); display: flex; flex-direction: column; gap: 1px; border: none; margin: 0; padding: 0; }
body.kinore ul.tabs.set-nav li a { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--r-sm); font-size: 13px; color: var(--t-2); border: none !important; margin: 0; }
body.kinore ul.tabs.set-nav li a:hover { background: var(--hover) !important; color: var(--t-0); }
body.kinore ul.tabs.set-nav li.active a { background: var(--active) !important; color: var(--t-0); font-weight: 500; }
body.kinore ul.tabs.set-nav li a svg { width: 15px; height: 15px; opacity: .85; flex: 0 0 auto; }
body.kinore .set-panels { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
body.kinore .panel-wrap { display: flex; flex-direction: column; gap: 16px; }
body.kinore .panel-wrap.hidden { display: none; }
body.kinore .panel-head h1 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--t-0); margin: 0; }
body.kinore .panel-head p { font-size: 13px; color: var(--t-3); margin-top: 3px; max-width: 600px; }
body.kinore .sso-banner { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border: 1px solid rgba(63,185,80,.3); background: var(--green-bg); border-radius: var(--r-lg); }
body.kinore .sso-banner .ic { width: 34px; height: 34px; border-radius: 9px; background: #fff; display: grid; place-items: center; flex: 0 0 auto; }
body.kinore .sso-banner .nm { font-size: 13.5px; font-weight: 600; color: var(--t-0); }
body.kinore .sso-banner .st { font-size: 12px; color: var(--green); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
/* stock two-column tables -> cards of set-rows */
body.kinore .panel-wrap table.two-column { display: block; width: 100% !important; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; padding: 0 14px; }
body.kinore .panel-wrap table.two-column > tbody, body.kinore .panel-wrap table.two-column > tbody > tr { display: block; }
body.kinore .panel-wrap table.two-column > tbody > tr { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 0; border-bottom: 1px solid var(--line); }
body.kinore .panel-wrap table.two-column > tbody > tr:last-child { border-bottom: none; }
body.kinore .panel-wrap table.two-column > tbody > tr.header, body.kinore .panel-wrap table.two-column > tbody > tr:has(> th[colspan]) { display: block; margin: 0 -14px; }
body.kinore .panel-wrap table.two-column > tbody > tr > th { display: block; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--t-0); background: transparent; }
body.kinore .panel-wrap table.two-column > tbody > tr > th em { display: block; font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--t-3); margin-top: 2px; }
body.kinore .panel-wrap table.two-column > tbody > tr > th em strong { color: var(--t-0); font-size: 13px; font-weight: 600; }
body.kinore .panel-wrap table.two-column > tbody > tr > td { display: block; height: auto !important; padding: 14px 0; border: none; font-size: 12px; color: var(--t-3); line-height: 1.45; }
body.kinore .panel-wrap table.two-column > tbody > tr > td:first-child:not([colspan]) { flex: 1; min-width: 0; width: auto !important; font-size: 13px; color: var(--t-0); font-weight: 500; }
body.kinore .panel-wrap table.two-column > tbody > tr > td:first-child:not([colspan]) + td { flex: 0 0 auto; width: 288px; max-width: 42vw; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
body.kinore .panel-wrap table.two-column > tbody > tr > td:first-child:not([colspan]) + td input[style*="width: 145px"] { width: calc(50% - 3px) !important; }
body.kinore .panel-wrap table.two-column > tbody > tr > td:first-child:not([colspan]) + td input[name=phone_ext], body.kinore .panel-wrap table.two-column > tbody > tr > td:first-child:not([colspan]) + td input[size="5"] { width: 70px !important; }
body.kinore .panel-wrap table.two-column > tbody > tr > td:first-child:not([colspan]) + td input.phone, body.kinore .panel-wrap table.two-column > tbody > tr > td:first-child:not([colspan]) + td input.mobile { width: calc(100% - 110px) !important; }
body.kinore .panel-wrap table.two-column > tbody > tr > td:first-child:not([colspan]) + td select, body.kinore .panel-wrap table.two-column > tbody > tr > td:first-child:not([colspan]) + td input[type=text], body.kinore .panel-wrap table.two-column > tbody > tr > td:first-child:not([colspan]) + td input[type=email], body.kinore .panel-wrap table.two-column > tbody > tr > td:first-child:not([colspan]) + td input[type=tel] { width: 100% !important; }
body.kinore .panel-wrap table.two-column > tbody > tr > td[colspan] { width: 100%; }
body.kinore .panel-wrap table.two-column > tbody > tr > td i.help-tip { margin-left: 4px; }
body.kinore .panel-wrap table.two-column > tbody > tr > td .error, body.kinore .panel-wrap table.two-column > tbody > tr > td font.error { display: block; font-size: 11.5px; }
body.kinore .panel-wrap table.two-column table.two-column { display: block; border: none; padding: 0; background: transparent; }
body.kinore .panel-wrap table.two-column table.two-column > tbody > tr { border-bottom: 1px solid var(--line); }
body.kinore .panel-wrap table.two-column table.two-column > tbody > tr:last-child { border-bottom: none; }
body.kinore .panel-wrap #account .avatar.pull-left { float: none; width: 64px !important; height: 64px !important; margin: 0 0 12px !important; }
body.kinore .panel-wrap #account .avatar.pull-left img { width: 64px; height: 64px; border-radius: 50%; }
body.kinore .panel-wrap .richtext, body.kinore .panel-wrap .redactor-box { width: 100% !important; }
body.kinore .save-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 12px 0; margin-top: 4px; border-top: 1px solid var(--line); background: linear-gradient(to top, var(--bg) 60%, transparent); }
@media (max-width: 860px) { body.kinore .set-layout { grid-template-columns: 1fr; } body.kinore ul.tabs.set-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; } }
body.kinore .panel-wrap .kp-avatar { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
body.kinore .panel-wrap .kp-avatar img { width: 44px; height: 44px; border-radius: 50%; }
body.kinore .panel-wrap .kp-avatar .button { height: 26px; padding: 0 8px; }
body.kinore .panel-wrap .kp-avatar > div { text-align: left !important; }

/* ---- ticket view: design parity fixes ---- */
body.kinore .kt-ticket .tkt-head { padding: 12px 16px; }
body.kinore .kt-ticket .tkt-head .line2 { margin-top: 10px; }
body.kinore .kt-ticket .tkt-head .line2:empty { display: none; }
/* actions: Reply (primary) + compact icon buttons, evenly spaced, no stock floats */
body.kinore .kt-ticket .tkt-actions { gap: 6px; }
body.kinore .kt-ticket .tkt-actions .action-button, body.kinore .kt-ticket .tkt-actions a.action-button, body.kinore .kt-ticket .tkt-actions span.action-button { height: 26px; min-width: 26px; padding: 0 7px; font-size: 12px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--t-2); display: inline-flex; align-items: center; gap: 4px; }
body.kinore .kt-ticket .tkt-actions .action-button:hover { color: var(--t-0); background: var(--raised); }
body.kinore .kt-ticket .tkt-actions .action-button i { font-size: 12px; color: inherit; }
body.kinore .kt-ticket .tkt-actions .action-button .icon-caret-down { margin: 0; opacity: .6; font-size: 10px; }
body.kinore .kt-ticket .tkt-actions .action-button > span { display: inline-flex; align-items: center; gap: 4px; }
body.kinore .kt-ticket .tkt-actions #kt-reply-btn {
  height: 26px;
  padding: 0 9px;
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  text-decoration: none;
}
body.kinore .kt-ticket .tkt-actions #kt-reply-btn:hover,
body.kinore .kt-ticket .tkt-actions #kt-reply-btn:focus-visible {
  background: var(--accent-hi);
  border-color: transparent;
  color: var(--on-accent);
  text-decoration: none;
}
body.kinore .kt-ticket .tkt-actions #kt-reply-btn svg {
  stroke: currentColor;
}
/* requester strip: never tuck under the sticky header; tidy meta */
body.kinore .req-strip { position: relative; z-index: 1; padding: 12px 16px; }
body.kinore .req-meta > div { display: flex; flex-direction: column; gap: 2px; }
body.kinore .req-meta .v a { color: var(--t-1); }
/* thread tabs */
body.kinore .thread-col #ticket_tabs { background: transparent; }
body.kinore .thread-col #ticket_tabs li a { padding: 9px 12px; font-size: 12.5px; }
/* message header: avatar · name · role · channel · time (right)
   stock markup: div.pull-right(actions) , <b>name</b> , "posted" , <a><time></a> , span.title */
body.kinore .thread-col .thread-entry .header { font-size: 0; column-gap: 8px; flex-wrap: nowrap; }
body.kinore .thread-col .thread-entry .header > * { font-size: 12.5px; }
body.kinore .thread-col .thread-entry .header > b { order: 1; white-space: nowrap; }
body.kinore .thread-col .thread-entry .header > .title { order: 2; font-size: 11.5px; color: var(--t-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40% !important; }
body.kinore .thread-col .thread-entry .header > .title:not(:empty)::before { content: '·'; color: var(--t-4); margin-right: 8px; }
body.kinore .thread-col .thread-entry .header > a { order: 8; margin-left: auto; white-space: nowrap; }
body.kinore .thread-col .thread-entry .header > a time { font-family: var(--mono); font-size: 11px; color: var(--t-3); }
body.kinore .thread-col .thread-entry .header > div.pull-right { order: 9; float: none; margin: 0; display: inline-flex; align-items: center; gap: 4px; }
body.kinore .thread-col .thread-entry .header > div.pull-right .textra { display: inline-flex; gap: 4px; }
body.kinore .thread-col .thread-entry .header > div.pull-right .muted-button, body.kinore .thread-col .thread-entry .header .action-button, body.kinore .thread-col .thread-entry .header .button { height: 22px; min-width: 22px; padding: 0 5px; font-size: 11px; background: transparent; border: 1px solid transparent; border-radius: 5px; color: var(--t-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
body.kinore .thread-col .thread-entry .header > div.pull-right .muted-button:hover, body.kinore .thread-col .thread-entry .header .action-button:hover { background: var(--hover); color: var(--t-0); }
body.kinore .thread-col .thread-entry .header .label-bare { font-size: 11px; color: var(--t-3); }
body.kinore .thread-col .thread-entry > .avatar, body.kinore .thread-col .thread-entry > span.avatar { top: 8px; }
body.kinore .thread-col .thread-entry > .avatar img, body.kinore .thread-col .thread-entry > span.avatar img { border-radius: 50%; background: var(--panel-2); }
/* rail: drop trailing colons visually by tightening label, keep design spacing */
body.kinore .rail table.ticket_info table th { font-size: 11.5px; }
body.kinore .thread-col .thread-entry, body.kinore .thread-col .thread-event { margin-left: 16px !important; margin-right: 16px !important; }
body.kinore .thread-col .thread-entry:first-child, body.kinore .thread-col #ticketThread > :first-child { margin-top: 16px !important; }
body.kinore .thread-col #ticket_thread > .clear { height: 16px; }

/* ============================================================
   THREAD BODY NORMALISATION — inbound HTML email varies wildly
   (inline black text, white table cells, brand backgrounds). Force the
   dark palette on everything inside a message body, regardless of
   inline styles, and keep semantics (bold/links/quotes) readable.
   ============================================================ */
body.kinore .thread-body, body.kinore .thread-body * {
  color: var(--t-1) !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: var(--line-2) !important;
  text-shadow: none !important;
  font-family: var(--sans) !important;
}
body.kinore .thread-body { font-size: 13px !important; line-height: 1.6; }
body.kinore .thread-body * { font-size: inherit; line-height: inherit; }
body.kinore .thread-body h1, body.kinore .thread-body h2, body.kinore .thread-body h3, body.kinore .thread-body h4, body.kinore .thread-body b, body.kinore .thread-body strong, body.kinore .thread-body th { color: var(--t-0) !important; }
body.kinore .thread-body h1 { font-size: 17px !important; } body.kinore .thread-body h2 { font-size: 15px !important; } body.kinore .thread-body h3, body.kinore .thread-body h4 { font-size: 13.5px !important; }
body.kinore .thread-body small, body.kinore .thread-body .small { font-size: 11.5px !important; color: var(--t-3) !important; }
body.kinore .thread-body a, body.kinore .thread-body a * { color: var(--accent-hi) !important; text-decoration: none; }
body.kinore .thread-body a:hover, body.kinore .thread-body a:hover * { text-decoration: underline; }
body.kinore .thread-body code, body.kinore .thread-body pre, body.kinore .thread-body tt, body.kinore .thread-body kbd { font-family: var(--mono) !important; font-size: 12px !important; background-color: var(--panel-2) !important; border: 1px solid var(--line) !important; border-radius: 4px; padding: 1px 5px; color: var(--accent-hi) !important; }
body.kinore .thread-body pre { padding: 10px 12px; overflow-x: auto; white-space: pre-wrap; }
body.kinore .thread-body blockquote, body.kinore .thread-body .quote, body.kinore .thread-body div[type="cite"], body.kinore .thread-body .gmail_quote, body.kinore .thread-body .yahoo_quoted, body.kinore .thread-body #divRplyFwdMsg, body.kinore .thread-body .OutlookMessageHeader, body.kinore .thread-body .WordSection1 > div[style*="border-top"] {
  border: none !important; border-left: 2px solid var(--line-3) !important; margin: 9px 0 !important; padding: 0 0 0 11px !important; color: var(--t-3) !important; font-size: 12.5px !important; }
body.kinore .thread-body blockquote *, body.kinore .thread-body .gmail_quote *, body.kinore .thread-body .yahoo_quoted * { color: var(--t-3) !important; }
body.kinore .thread-body hr { height: 1px !important; border: none !important; background-color: var(--line) !important; margin: 12px 0 !important; }
/* tables: strip email-client chrome, keep structure legible */
body.kinore .thread-body table { border-collapse: collapse !important; max-width: 100% !important; width: auto !important; }
body.kinore .thread-body td, body.kinore .thread-body th { padding: 5px 9px !important; vertical-align: top; height: auto !important; }
body.kinore .thread-body table[border] td, body.kinore .thread-body table[border] th, body.kinore .thread-body td[style*="border"], body.kinore .thread-body th[style*="border"] { border: 1px solid var(--line-2) !important; }
body.kinore .thread-body table:not([border]) td:not([style*="border"]) { border: none !important; }
/* layout tables from Outlook/Gmail: don't force fixed pixel widths */
body.kinore .thread-body table[width], body.kinore .thread-body td[width], body.kinore .thread-body div[style*="width"] { width: auto !important; max-width: 100% !important; min-width: 0 !important; }
/* images: logos/signatures are usually designed for white — give them a soft plate */
body.kinore .thread-body img { max-width: 100% !important; height: auto !important; background-color: #fff !important; border-radius: 4px; padding: 2px; }
body.kinore .thread-body img[src^="cid:"], body.kinore .thread-body img[alt=""] { background-color: #fff !important; }
body.kinore .thread-body img[width="1"], body.kinore .thread-body img[height="1"] { display: none !important; }
/* inline emphasis that email clients express with colour */
body.kinore .thread-body font[color], body.kinore .thread-body span[style*="color"], body.kinore .thread-body p[style*="color"] { color: var(--t-1) !important; }
body.kinore .thread-body [style*="background"] { background-color: transparent !important; }
body.kinore .thread-body mark, body.kinore .thread-body span[style*="background-color: yellow"], body.kinore .thread-body span[style*="background:yellow"] { background-color: var(--amber-bg) !important; color: var(--amber) !important; border-radius: 3px; padding: 0 3px; }
body.kinore .thread-body s, body.kinore .thread-body strike, body.kinore .thread-body del { color: var(--t-3) !important; }
body.kinore .thread-body ul, body.kinore .thread-body ol { padding-left: 22px; margin: 6px 0; }
body.kinore .thread-body p { margin: 0 0 9px; }
/* osTicket's own collapsible "quoted text" toggle + footnotes */
body.kinore .thread-body .collapsible, body.kinore .thread-body .show-quoted, body.kinore .thread-body .quoted-text-toggle { color: var(--t-3) !important; font-size: 11.5px !important; }
body.kinore .thread-body .collapsed-quote, body.kinore .thread-body .hidden-quote { display: none; }
body.kinore .thread-entry .footnotes, body.kinore .thread-entry .attachments .file, body.kinore .thread-entry .attachments .file * { color: var(--t-1) !important; }

/* stock white rules around entries + event markers -> design */
body.kinore .thread-col .thread-entry::before, body.kinore .thread-col .thread-entry::after { display: none !important; border: none !important; }
body.kinore .thread-col .thread-entry, body.kinore .thread-col .thread-entry.message, body.kinore .thread-col .thread-entry.response { border: 1px solid var(--line) !important; }
body.kinore .thread-col .thread-entry.message { border-color: rgba(88,155,245,.22) !important; }
body.kinore .thread-col .thread-entry.note { border-color: rgba(210,153,34,.28) !important; }
body.kinore .thread-col .thread-event { display: flex; align-items: center; gap: 10px; padding: 0 4px; margin: 0 16px !important; font-size: 12px; color: var(--t-3); font-family: var(--sans); min-height: 22px; }
body.kinore .thread-col .thread-event .type-icon { position: relative; width: 22px; height: 22px; padding: 0; margin: 0; border-radius: 50%; background: var(--panel-2) !important; border: 1px solid var(--line-2) !important; display: grid; place-items: center; flex: 0 0 auto; font-size: 11px; color: var(--t-3); }
body.kinore .thread-col .thread-event .type-icon::after, body.kinore .thread-col .thread-event .type-icon::before { display: none !important; }
body.kinore .thread-col .thread-event .type-icon i { color: var(--t-3); font-size: 11px; }
body.kinore .thread-col .thread-event .description { margin: 0; padding: 0; width: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; font-family: var(--sans); font-size: 12px; color: var(--t-3); line-height: 1.4; }
body.kinore .thread-col .thread-event .description b, body.kinore .thread-col .thread-event .description a { color: var(--t-1); font-weight: 500; }
body.kinore .thread-col .thread-event .description time, body.kinore .thread-col .thread-event .description .faded:last-child { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--t-4); white-space: nowrap; }
body.kinore .thread-col .thread-event .description .avatar, body.kinore .thread-col .thread-event .description span.avatar, body.kinore .thread-col .thread-event img.avatar { width: 16px !important; height: 16px !important; max-height: 16px; border-radius: 50%; margin: 0 2px 0 0; display: inline-block; vertical-align: middle; background: var(--panel-2); }
body.kinore .thread-col .thread-event .description .avatar img { width: 16px; height: 16px; border-radius: 50%; }
body.kinore .thread-col .thread-event + .thread-event { margin-top: 6px !important; }
body.kinore .thread-col #ticket_thread > #msg_warning, body.kinore .thread-col #msg_warning { margin: 0 16px 12px; }
body.kinore .thread-col .thread-entry + .thread-event { margin-top: 12px !important; }
body.kinore .thread-col .thread-event + .thread-entry { margin-top: 14px !important; }

/* Microsoft 365 headshots layered over the design's initials tiles.
   The tile keeps its initials and its colour; graph-avatar.php returns a
   transparent pixel when there is no photo, so the initials show through and
   a failed request degrades to initials on its own. Thread-entry avatars set
   their own position and are more specific, so they are unaffected. */
body.kinore .avatar { position: relative; }
body.kinore .avatar > .av-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit; display: block;
}

/* Canvas. body's background already propagates once CSS is parsed, but during a
   navigation the browser paints its default white until then. `color-scheme`
   tells it to use a dark canvas immediately (the <meta> in the page head does
   the same before this file is even fetched); the explicit html background
   covers the moment after. kinore.css already themes scrollbars dark, so this
   is consistent with the design rather than a new look. */
:root { background: var(--bg); color-scheme: dark; }
/* :root is (0,1,0) and beats stock scp.css's `body, html { background:#eee }` (0,0,1)
   on specificity rather than on load order, so the dark canvas cannot be lost if the
   stylesheet order ever changes. */

/* Stock scp.css:2671 styles `.sidebar` as a pale box for the upgrader screens:
   `border: 1px solid #C8DDFA; background: #F7FBFE; padding: 10px; float: right`.
   The design-system shell uses <aside class="sidebar"> too, and kinore.css only
   overrides `border-right` -- not the `border` shorthand -- so #C8DDFA survived
   on the top, left and bottom edges, with 10px of stock padding, on every page
   that loads scp.css. Scoped to the shell's id so the upgrader keeps its box. */
body.kinore #app-sidebar {
  border: 0;
  border-right: 1px solid var(--line);
  padding: 0;
  float: none;
  background: var(--bg-2);
}

/* ============================================================================
   ADMIN SCREEN PRIMITIVES
   Shared components used across the approved admin artboards. They are declared
   page-locally in each artboard; promoted here once so every admin screen can
   use them. They live in the adapter layer rather than kinore.css because
   kinore.css is verbatim from the design project (see docs/design-system.md).
   ========================================================================== */

/* Page header: title + description on the left, actions on the right. */
body.kinore .page-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
body.kinore .page-head h1 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--t-0); }
body.kinore .page-head p { font-size: 13px; color: var(--t-3); margin-top: 3px; max-width: 600px; }

/* Inline count strip above a card. */
body.kinore .summary { display: flex; gap: 22px; margin-bottom: 16px; flex-wrap: wrap; }
body.kinore .summary .s .v { font-family: var(--mono); font-size: 18px; font-weight: 600; color: var(--t-0); }
body.kinore .summary .s .v .on { color: var(--green); }
body.kinore .summary .s .k { font-size: 11.5px; color: var(--t-3); margin-top: 1px; }

/* Removable/among-many token. */
body.kinore .chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 5px;
  font-size: 12px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--t-1); }
body.kinore .chip .x { color: var(--t-4); cursor: pointer; }
body.kinore .chip .x:hover { color: var(--red); }

/* Compact filter box, normally in a .card-h. */
body.kinore .qsearch { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); }
body.kinore .qsearch svg { width: 13px; height: 13px; color: var(--t-3); flex: 0 0 auto; }
body.kinore .qsearch input { border: none; background: transparent; color: var(--t-0); font-size: 12.5px; outline: none; width: 120px; }

/* Label/value pairs in a drawer. */
body.kinore .meta-grid { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: 12.5px; margin-top: 12px; }
body.kinore .meta-grid dt { color: var(--t-3); }
body.kinore .meta-grid dd { color: var(--t-1); text-align: right; }

/* Multiple drawers on one page (one per row, rendered inline). kinore.css has
   `body.drawer-open .drawer { transform: translateX(0) }`, which would slide
   every drawer in at once — hold back all but the one marked .kn-open. */
body.kinore.drawer-open .kn-drawer:not(.kn-open) { transform: translateX(100%); }
body.kinore .kn-drawer.kn-open { transform: translateX(0); }
body.kinore .kn-row { cursor: pointer; }

/* ---------------------------------------------------------------------------
   PJAX navigation: kill the white flash
   ---------------------------------------------------------------------------
   scp/js/scp.js:1170 runs on EVERY pjax navigation:

       $('#overlay').css('background-color','white');
       $.toggleOverlay(true);            // -> .hide().fadeIn()

   That is an *inline* style, so it beat the `body.kinore #overlay` rule above
   and fades a fully-opaque white sheet across the viewport on every click,
   which scp.js then clears on pjax:complete via removeAttr('style'). The KPI
   dashboard was exempt only because its links are tagged `no-pjax`.

   scp.js is stock and we don't patch it, so target the inline style instead:
   an inline `background-color` on #overlay only ever comes from that one line
   (js/osticket.js is client-portal-only and sets opacity/top/left, never a
   background). An author `!important` outranks a non-important inline
   declaration, so this wins without touching load order.

   Kept as a real (transparent) overlay rather than display:none so it still
   swallows double-clicks mid-navigation. Modal backdrops carry no inline
   background-color, so they keep the dark tint set above.                     */
body.kinore #overlay[style*="background-color"] {
    background-color: transparent !important;
}

/* ---------------------------------------------------------------------------
   Table header borders
   ---------------------------------------------------------------------------
   Stock scp.css draws light 1px borders on several `th` selectors, and every
   Kinore rule that restyles a header only ever declares `border-bottom`. The
   remaining longhands from stock's `border:` shorthand therefore survived and
   drew a pale #ccc box around each header cell -- the "white border" reported
   on the New Ticket form (table.form_table.nt-grid > th).

   The six stock sources, all light-on-dark and all wrong for this theme:
     .form_table th, div.section-break        border: 1px solid #ccc
     .dialog th                               border: 1px dotted #bbb
     .ticket_info.custom-data thead th        border-bottom: 2px solid #ccc
     table.custom-info th                     border-bottom: 1px dotted rgba(0,0,0,.9)
     table.dashboard-stats tbody:first-child th    border-bottom: 1px dashed #ddd
     table.dashboard-stats tbody:nth-child(2) th   border-right: 1px solid #ccc

   Kinore headers only ever want a single bottom hairline, so drop the other
   three sides everywhere, then re-colour the bottom edge on the four rules that
   set it with enough specificity to outrank the stock selector.               */
body.kinore th { border-top: 0; border-left: 0; border-right: 0; }

body.kinore .dialog th,
body.kinore .tip_box th { border-bottom: 1px solid var(--line); }
body.kinore .ticket_info.custom-data thead th { border-bottom: 1px solid var(--line); }
body.kinore table.custom-info th { border-bottom: 1px solid var(--line); }
/* dashboard-stats' vertical divider is dropped by the reset above (Kinore uses
   bottom hairlines only); this just re-colours the remaining dashed bottom.   */
body.kinore table.dashboard-stats tbody:first-child th { border-bottom-color: var(--line); }

/* ---------------------------------------------------------------------------
   `.label` inside a button
   ---------------------------------------------------------------------------
   Stock scp.css styles `.label` as a grey pill (background #999, radius, its own
   padding/font-weight) and the rule above re-skins it to a fully rounded badge.
   Two Kinore buttons wrapped their text in <span class="label">, so the label
   rendered as a pill *inside* the button -- a button within a button, on the
   Create ticket and Reply actions. Those spans are now `.btn-label` (`.btn` is
   inline-flex with a gap, so the span needs no styling of its own); this guard
   stops the collision reappearing if stock markup drops a .label into a button. */
body.kinore .btn .label,
body.kinore button .label {
    background: none; color: inherit; font: inherit; line-height: inherit;
    padding: 0; margin: 0; border: 0; border-radius: 0;
    text-shadow: none; position: static; bottom: auto;
}

/* ---------------------------------------------------------------------------
   FontAwesome glyphs must keep their icon font
   ---------------------------------------------------------------------------
   font-awesome.min.css sets `font-family: FontAwesome` on [class^="icon-"] /
   [class*=" icon-"] with specificity (0,1,0), and each glyph is drawn by a
   `:before { content: "\fXXX" }`. Any Kinore rule that sets font-family on an
   ancestor-or-self with more weight therefore silently replaces the icon font
   and the codepoint renders as a missing-glyph box. That is what happened to
   the thread events: our own `.thread-event .faded` rule (0,3,1) put
   `var(--mono)` on <i class="faded icon-magic">, so the "Created by" event and
   friends showed tofu instead of an icon.

   Declaring the family on the pseudo-element itself is the robust fix: a
   pseudo-element only *inherits* font-family from its originating element, and
   any direct declaration beats inheritance regardless of how specific the
   ancestor rule was. This immunises every FA icon in the panel at once.       */
body.kinore [class^="icon-"]:before,
body.kinore [class*=" icon-"]:before { font-family: FontAwesome; }

/* ---------------------------------------------------------------------------
   Inline icon sizing
   ---------------------------------------------------------------------------
   shell.js emits its icons through svg() with no width/height, so they are
   sized purely by per-component CSS. Two contexts had no matching rule at all
   -- the keyboard-shortcuts header and the shield in the .avatar block -- and
   an SVG with only a viewBox falls back to the browser default 300x150, which
   is where the oversized icons came from. svg() now emits width/height
   attributes (presentation attributes lose to every CSS rule, so existing
   component sizes still win); these two rules give the unstyled contexts a
   deliberate size rather than relying on that fallback.                       */
body.kinore .kbd-h > svg { width: 15px; height: 15px; flex: 0 0 auto; }
body.kinore .avatar > svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------------------
   Toggles that actually post (systemic hazard 2)
   ---------------------------------------------------------------------------
   The design system's `.toggle` is a <button>. A button posts nothing, and
   osTicket reads its booleans as `isset($vars['x']) ? 1 : 0`, so a drawer built
   from the artboards literally would write 0 to every boolean on first save --
   disabling alerts, autoresponders and records wholesale.

   Same pixels, but driven by a real checkbox: the input is visually hidden and
   the <label class="toggle"> next to it is what the user sees and clicks.
   `.toggle` already supplies the track, knob and transition; only the checked
   state needs restating, because the design expresses it as `.toggle.on`.      */
body.kinore .toggle-cb { position: absolute; width: 1px; height: 1px; opacity: 0;
    margin: 0; pointer-events: none; }
body.kinore label.toggle { display: inline-block; cursor: pointer; }
body.kinore .toggle-cb:checked + label.toggle { background: var(--accent); }
body.kinore .toggle-cb:checked + label.toggle::after { transform: translateX(14px); }
body.kinore .toggle-cb:disabled + label.toggle { opacity: .5; cursor: not-allowed; }
body.kinore .toggle-cb:focus-visible + label.toggle {
    outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Drawer member lists (teams, and the agent/department screens to come)
   --------------------------------------------------------------------------- */
body.kinore .member { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); margin-bottom: 6px; }
body.kinore .member .tw { min-width: 0; flex: 1; }
body.kinore .member .nm { font-size: 12.5px; font-weight: 500; color: var(--t-0);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
body.kinore .member .em { font-size: 11px; color: var(--t-3); font-family: var(--mono);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.kinore .member .x { color: var(--t-4); cursor: pointer; flex: 0 0 auto; display: flex;
    background: none; border: 0; padding: 0; }
body.kinore .member .x:hover { color: var(--red); }
body.kinore .lead-tag { font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--accent-hi); background: var(--accent-dim); border: 1px solid var(--accent-line);
    border-radius: 3px; padding: 1px 5px; }
body.kinore .add-member { display: flex; align-items: center; gap: 7px; margin-top: 2px; }
body.kinore .add-member .select { flex: 1 1 auto; }

/* Overlapping avatar stack for a members column. */
body.kinore .stack-av { display: inline-flex; vertical-align: middle; }
body.kinore .stack-av .avatar { margin-left: -7px; border: 2px solid var(--bg-2); }
body.kinore .stack-av .avatar:first-child { margin-left: 0; }
body.kinore .tm-more { font-family: var(--mono); font-size: 11px; color: var(--t-3); margin-left: 5px; }

/* Teams list row. */
body.kinore .tm-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
body.kinore .tm-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
    flex: 0 0 auto; background: var(--accent-dim); color: var(--accent-hi); }
body.kinore .tm-ic svg { width: 16px; height: 16px; }
body.kinore .tm-nm { font-size: 13px; font-weight: 600; color: var(--t-0);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.kinore .tm-desc { font-size: 11.5px; color: var(--t-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.kinore .tm-lead { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--t-1); min-width: 0; }
body.kinore .tm-lead .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Inverted toggle: the checkbox posts a *negative* flag (Team.noalerts,
   Page.inactive and friends) while the design labels it positively ("Alert team
   on assignment"). Flipping the visual here keeps the posted field exactly what
   the model expects, so no JavaScript has to translate it at submit time. */
body.kinore .toggle-cb.inv + label.toggle { background: var(--accent); }
body.kinore .toggle-cb.inv + label.toggle::after { transform: translateX(14px); }
body.kinore .toggle-cb.inv:checked + label.toggle { background: var(--line-3); }
body.kinore .toggle-cb.inv:checked + label.toggle::after { transform: translateX(0); }

/* ---------------------------------------------------------------------------
   Small screens: stop stock's fixed widths overflowing the viewport
   ---------------------------------------------------------------------------
   Adding the viewport meta to the staff header made every `@media (max-width)`
   rule we own start matching, which is what makes the queue and the sidebar
   responsive. It also means pages now lay out at the real device width instead
   of a 980px virtual one -- and stock osTicket hardcodes `width="940"` on 84
   tables, which on a 390px phone drags the whole page sideways.

   `width` is a presentation attribute, so a plain declaration outranks it; no
   !important needed. Kept to small screens so desktop layout is untouched, and
   deliberately narrow: no overflow container on #content, because giving it
   `overflow-x` would create a scroll context and break the `position: sticky`
   headers on the ticket view and the new-ticket form.                          */
@media (max-width: 900px) {
    body.kinore #content table[width] { width: 100%; max-width: 100%; }
    body.kinore #content img { max-width: 100%; height: auto; }
    body.kinore #content pre { overflow-x: auto; }
    /* Wide data tables scroll inside their own box rather than moving the page. */
    body.kinore .tbl-wrap, body.kinore #content .scroll-x { overflow-x: auto; }
}

/* ---------------------------------------------------------------------------
   Stray light borders left over from stock
   ---------------------------------------------------------------------------
   Same class of bug as the caret divider above: stock draws these in #aaa/#bbb/
   #ccc/#ddd for a light UI, our rules restyled the background and text but never
   the border, so each one survives as a pale line on the dark ground. Found by
   resolving the real cascade for every stock rule that paints a light border
   against the elements that actually exist in the rendered app, and keeping only
   the ones where the stock declaration still wins.

   Borders that carry meaning are re-coloured rather than removed; the composer
   form's is dropped outright because the table inside it already draws the
   frame (see .thread-col #response_options > form > table above).            */
body.kinore #response_options > form { border: none; }
body.kinore #response_options input[type=text] { border-color: var(--line-2); }
body.kinore .customQ-dropdown ul.scroll-height { border-bottom-color: var(--line); }
body.kinore .has_bottom_border { border-bottom-color: var(--line); }
body.kinore .label-bare { border-color: var(--line-2); color: var(--t-3); }
body.kinore input { border-color: var(--line-2); }

/* ===========================================================================
   Redactor 3 — dark theme
   ===========================================================================
   The rich-text editor ships styled for a light UI and appeared as a white
   toolbar with purple icons. Two separate causes:

     * `.redactor-toolbar a { background: rgba(255,255,255,.97) }` gives each
       button a white chip. Our earlier rule targeted `.redactor-toolbar li a`,
       but Redactor 3's toolbar is `<div class="redactor-toolbar"><a>…</a></div>`
       with no <li>, so it never matched and the chips stayed white.
     * The glyphs are an icon font on those same <a> elements, so
       `body.kinore a { color: var(--accent-hi) }` (0,2,1) outranked Redactor's
       own `color` (0,1,2) and painted them in our indigo accent.

   Themed here rather than per-screen because the editor is used for ticket
   replies and notes, new tickets, canned responses, knowledgebase articles and
   email templates. Selectors are the real Redactor 3 ones, found by listing
   every rule in css/redactor.css that paints a light surface (46 of them).   */

/* --- toolbar and the floating "air" toolbar ------------------------------- */
body.kinore .redactor-toolbar a,
body.kinore .redactor-air a {
    background: var(--panel-2); color: var(--t-2);
    border: 1px solid var(--line); border-radius: var(--r-sm);
    box-shadow: none; margin-right: 4px; margin-bottom: 4px;
}
body.kinore .redactor-toolbar a:hover,
body.kinore .redactor-air a:hover {
    background: var(--accent-dim); color: var(--accent-hi);
    border-color: var(--accent-line);
}
body.kinore .redactor-toolbar a.redactor-button-active,
body.kinore .redactor-air a.redactor-button-active {
    background: var(--accent-dim); color: var(--accent-hi);
    border-color: var(--accent-line);
}
body.kinore .redactor-toolbar a.redactor-button-disabled,
body.kinore .redactor-air a.redactor-button-disabled { color: var(--t-4); background: transparent; }
body.kinore .redactor-toolbar a.redactor-button-disabled:hover,
body.kinore .redactor-air a.redactor-button-disabled:hover { color: var(--t-4); border-color: var(--line); }
body.kinore .redactor-air { background: var(--raised); border: 1px solid var(--line-2); border-radius: var(--r); }
body.kinore .redactor-air-helper { background: var(--raised); color: var(--t-1); }
body.kinore .redactor-air-helper:hover { background: var(--panel-2); }

/* --- editor surface, statusbar, source view ------------------------------- */
body.kinore .redactor-box.redactor-styles-on { background: var(--panel); }
body.kinore .redactor-statusbar { background: var(--bg-2); color: var(--t-3); border-top: 1px solid var(--line); }
body.kinore .redactor-statusbar a { color: var(--t-3); }
body.kinore .redactor-source-view .redactor-toolbar { background: var(--bg); }
body.kinore .redactor-source { background: var(--bg) !important; color: var(--t-1) !important; }
body.kinore .upload-redactor-box { background: var(--panel-2); border-color: var(--line-2); }
body.kinore .redactor-placeholder:before { color: var(--t-4) !important; }

/* --- dropdowns (format, colour pickers, more) ----------------------------- */
body.kinore .redactor-dropdown { background: var(--raised); border: 1px solid var(--line-2);
    border-radius: var(--r); box-shadow: var(--shadow-lg); }
body.kinore .redactor-dropdown a { color: var(--t-1); background: transparent; }
body.kinore .redactor-dropdown a:hover { background: var(--hover); color: var(--t-0); }
body.kinore .redactor-dropdown a.redactor-dropdown-item-disabled { background: transparent; color: var(--t-4); }
body.kinore .redactor-dropdown-selector span:hover,
body.kinore .redactor-dropdown-selector span.active { background: var(--hover); color: var(--t-0); }

/* --- modals (insert link, image, table) ----------------------------------- */
body.kinore .redactor-modal { background: var(--raised); color: var(--t-1);
    border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
body.kinore .redactor-modal-header, body.kinore .redactor-modal-tabs,
body.kinore .redactor-modal-footer { background: transparent; border-color: var(--line); color: var(--t-0); }
body.kinore .redactor-modal label { color: var(--t-2); }
body.kinore .redactor-modal input, body.kinore .redactor-modal select,
body.kinore .redactor-modal textarea,
body.kinore .redactor-modal input:hover, body.kinore .redactor-modal select:hover,
body.kinore .redactor-modal textarea:hover,
body.kinore .redactor-modal input:focus, body.kinore .redactor-modal select:focus,
body.kinore .redactor-modal textarea:focus {
    background: var(--panel); color: var(--t-0); border-color: var(--line-2);
}
body.kinore .redactor-modal input:disabled, body.kinore .redactor-modal input.disabled,
body.kinore .redactor-modal select:disabled, body.kinore .redactor-modal select.disabled,
body.kinore .redactor-modal textarea:disabled, body.kinore .redactor-modal textarea.disabled {
    background: var(--bg-2); color: var(--t-4);
}
body.kinore .redactor-modal button { background: var(--panel-2); color: var(--t-1);
    border: 1px solid var(--line-2); border-radius: var(--r-sm); }
body.kinore .redactor-modal button:hover { background: var(--raised); color: var(--t-0); }
body.kinore .redactor-modal .redactor-modal-close { color: var(--t-3); }

/* --- content written inside the editor ------------------------------------
   The composed HTML is emailed onto a white background, so only the editing
   surface is re-skinned -- these rules never reach the sent message.         */
body.kinore .redactor-styles code, body.kinore .redactor-styles pre,
body.kinore .redactor-styles pre code {
    background: var(--bg-2); color: var(--t-1); border: 1px solid var(--line);
}
body.kinore .redactor-styles mark { background: var(--amber-bg); color: var(--t-0); }
body.kinore .redactor-styles blockquote { border-left: 3px solid var(--line-2); color: var(--t-2); }
body.kinore .redactor-styles a { color: var(--accent-hi); }
body.kinore .redactor-styles hr { border-color: var(--line); }
body.kinore .redactor-styles table td, body.kinore .redactor-styles table th { border-color: var(--line); }