/* OTTPROVIDERS Control V2.8.1
   Global readable typography + WHMCS-inspired ticket console.
*/

/* ---------- Global readable scale ---------- */
html { font-size: 16px !important; }
body.app-body { font-size: 15px !important; line-height: 1.55 !important; }
.app-brand strong { font-size: 15px !important; }
.app-brand small { font-size: 10.5px !important; letter-spacing: .12em; }
.app-nav > a,
.app-nav .v281-support-main > a { font-size: 14px !important; min-height: 46px; }
.header-title span { font-size: 11px !important; }
.header-title strong { font-size: 17px !important; }
.account-chip strong { font-size: 13px !important; }
.account-chip small { font-size: 11px !important; }
.app-main { font-size: 14px !important; }
.app-main .page-heading h1 { font-size: clamp(30px, 2.6vw, 38px) !important; line-height: 1.08 !important; }
.app-main .page-heading p { font-size: 14px !important; line-height: 1.55 !important; }
.app-main .eyebrow { font-size: 11px !important; }
.app-main h2 { font-size: 18px; }
.app-main h3 { font-size: 16px; }
.app-main label { font-size: 12.5px !important; }
.app-main input,
.app-main select,
.app-main textarea,
.app-main button { font-size: 13px; }
.app-main .btn { font-size: 13px !important; }
.app-main .btn-small { font-size: 12px !important; }
.app-main .badge { font-size: 10.5px !important; }
.app-main table th { font-size: 11.5px !important; }
.app-main table td { font-size: 13px !important; }
.app-main small,
.app-main .subline { font-size: 11px !important; line-height: 1.45; }
.app-main .card-head h2 { font-size: 17px !important; }
.app-main .card-head p { font-size: 12px !important; }
.app-main .empty-state strong { font-size: 14px !important; }
.app-main .empty-state span { font-size: 12px !important; }

/* Service detail leftovers that were still too small. */
.app-main .v272-service-kicker { font-size: 11px !important; }
.app-main .v272-service-title-line h1 { font-size: 26px !important; }
.app-main .v272-service-title-line > span { font-size: 15px !important; }
.app-main .v272-service-subline small { font-size: 12px !important; }
.app-main .v272-service-hero-facts small { font-size: 11px !important; }
.app-main .v272-service-hero-facts strong { font-size: 13px !important; }
.app-main .v272-access-value small { font-size: 11px !important; }
.app-main .v272-access-value code { font-size: 13px !important; }
.app-main .v272-icon-btn { font-size: 12px !important; }
.app-main .v272-app-row strong { font-size: 13px !important; }
.app-main .v272-app-row small { font-size: 11px !important; }
.app-main .v272-app-row em { font-size: 10.5px !important; }
.app-main .v272-details-grid small { font-size: 11px !important; }
.app-main .v272-details-grid strong { font-size: 13px !important; }

/* ---------- Support sidebar accordion ---------- */
.v281-support-nav { display: block; width: 100%; }
.v281-support-main { display: grid; grid-template-columns: minmax(0,1fr) 40px; align-items: center; gap: 4px; }
.v281-support-main > a { margin: 0 !important; min-width: 0; }
.v281-support-toggle {
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 10px; color: #6b7f96; background: transparent; cursor: pointer;
}
.v281-support-toggle:hover { color: #1767e8; background: rgba(25,103,232,.08); }
.v281-support-toggle i { transition: transform .18s ease; }
.v281-support-nav.open .v281-support-toggle i { transform: rotate(180deg); }
.v281-support-submenu {
    display: none; margin: 5px 0 7px 31px; padding: 5px 0 5px 11px;
    border-left: 1px solid rgba(99,119,145,.2);
}
.v281-support-nav.open .v281-support-submenu { display: grid; gap: 2px; }
.app-nav .v281-support-submenu a {
    min-height: 36px !important; padding: 8px 10px !important; display: flex !important; align-items: center; gap: 9px;
    border-radius: 9px !important; color: #65778d !important; font-size: 12.5px !important; font-weight: 650 !important;
}
.app-nav .v281-support-submenu a i { width: 17px; color: #8191a4; text-align: center; }
.app-nav .v281-support-submenu a:hover,
.app-nav .v281-support-submenu a.active { color: #1767e8 !important; background: #edf5ff !important; }
.app-nav .v281-support-submenu a.active i { color: #1767e8; }
.v281-support-submenu .v281-submenu-label { padding: 7px 10px 4px; color: #9aa7b6; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.v281-support-submenu .v281-submenu-divider { height: 1px; margin: 5px 7px; background: rgba(99,119,145,.14); }

/* ---------- Tickets top filters ---------- */
.v281-support-heading { margin-bottom: 18px; }
.v281-ticket-filters {
    display: flex; gap: 5px; align-items: center; overflow-x: auto; padding: 6px; margin: 0 0 18px;
    border: 1px solid #dce5ef; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(19,38,64,.035);
    scrollbar-width: thin;
}
.v281-ticket-filters a {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 11px;
    border-radius: 9px; color: #566b83; font-size: 12px; font-weight: 750; text-decoration: none;
}
.v281-ticket-filters a:hover { color: #1767e8; background: #f5f9ff; }
.v281-ticket-filters a.active { color: #155fcf; background: #eaf3ff; }
.v281-ticket-filters b { min-width: 22px; padding: 3px 6px; border-radius: 99px; background: #eef2f6; color: #74859a; font-size: 10px; text-align: center; }
.v281-ticket-filters a.active b { color: #155fcf; background: #d8eaff; }

/* ---------- Ticket list ---------- */
.v281-ticket-list-card { overflow: hidden; }
.v281-ticket-list-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.v281-queue-hint { max-width: 470px; display: inline-flex; align-items: center; gap: 8px; color: #718398; font-size: 11.5px; }
.v281-queue-hint i { color: #1767e8; }
.v281-ticket-table { display: grid; }
.v281-ticket-table-row {
    display: grid; grid-template-columns: 12px 50px minmax(260px,1fr) auto auto minmax(110px,auto) 18px;
    gap: 12px; align-items: center; min-height: 72px; padding: 12px 18px; border-top: 1px solid #edf1f5;
    color: #263b53; text-decoration: none; transition: background .15s ease;
}
.v281-ticket-table-row:hover { background: #f8fbff; }
.v281-ticket-id { font-weight: 800; color: #718297; font-size: 12px; }
.v281-ticket-main { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.v281-ticket-main strong { overflow: hidden; color: #192b42; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.v281-ticket-main small { color: #8190a3; font-size: 11px !important; }
.v281-attention { display: inline-flex; align-items: center; gap: 6px; color: #8b98a9; font-size: 10.5px; font-weight: 750; }
.v281-attention i { font-size: 7px; }
.v281-attention.is-on { color: #e48b12; }
.v281-assignee { color: #65768b; font-size: 11px; }
.priority-chip { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.priority-chip.priority-low { color:#557086;background:#eff4f8; }
.priority-chip.priority-normal { color:#28629c;background:#ebf4ff; }
.priority-chip.priority-high { color:#a86100;background:#fff3da; }
.priority-chip.priority-urgent { color:#b82f3d;background:#fff0f2; }

/* ---------- Full ticket console ---------- */
.v281-ticket-console { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 18px; align-items: start; }
.v281-ticket-main-column,
.v281-ticket-sidebar { display: grid; gap: 16px; min-width: 0; }
.v281-ticket-summary { padding: 20px 22px; }
.v281-ticket-summary-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.v281-ticket-flags { display: flex; gap: 7px; align-items: center; margin-bottom: 9px; }
.v281-ticket-summary h2 { margin: 0; color: #14273f; font-size: 21px; line-height: 1.25; }
.v281-ticket-summary p { margin: 7px 0 0; color: #7a8b9f; font-size: 11.5px; }
.v281-save-indicator { display: inline-flex; align-items: center; gap: 7px; color: #4f8567; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.v281-save-indicator.is-saving { color: #a66a12; }
.v281-save-indicator.is-error { color: #b63846; }

.v281-conversation-card { overflow: hidden; }
.v281-section-head { padding: 15px 18px; border-bottom: 1px solid #e8eef4; }
.v281-section-head > div { display: flex; align-items: center; gap: 10px; }
.v281-section-head > div > i { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; color: #1767e8; background: #eaf3ff; }
.v281-section-head span { display: flex; flex-direction: column; gap: 1px; }
.v281-section-head strong { color: #1d3048; font-size: 14px; }
.v281-section-head small { color: #8795a6; font-size: 10.5px !important; }
.v281-conversation-messages { padding: 18px; display: grid; gap: 14px; background: #f8fafc; }
.v281-conversation-messages .message { max-width: 86%; margin: 0; padding: 0; overflow: hidden; border: 1px solid #dde6ef; border-radius: 14px 14px 14px 4px; background: #fff; box-shadow: 0 3px 12px rgba(17,38,63,.035); }
.v281-conversation-messages .message.from-admin { margin-left: auto; border-color: #cfe2fa; border-radius: 14px 14px 4px 14px; background: #eff6ff; }
.v281-conversation-messages .message > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; border-bottom: 1px solid #e9eef4; background: rgba(248,250,252,.8); }
.v281-conversation-messages .message.from-admin > header { background: #e6f1ff; border-bottom-color: #d5e6fa; }
.v281-conversation-messages .message header > div { display: flex; align-items: center; gap: 8px; }
.v281-conversation-messages .message header strong { font-size: 12px; color: #20354e; }
.v281-conversation-messages .message header span { padding: 3px 6px; border-radius: 999px; color: #758599; background: #eef2f6; font-size: 9.5px; font-weight: 700; }
.v281-conversation-messages .message header small { color: #8796a8; font-size: 10px !important; }
.v281-message-body { padding: 14px 15px 16px; color: #30455e; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }

.v281-reply-card { overflow: hidden; }
.v281-reply-tabs { display: flex; gap: 5px; padding: 8px; border-bottom: 1px solid #e5ebf2; background: #f8fafc; }
.v281-reply-tabs button { min-height: 38px; padding: 8px 12px; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 9px; color: #64768b; background: transparent; font-weight: 750; cursor: pointer; }
.v281-reply-tabs button.active { color: #155fcf; background: #fff; box-shadow: 0 2px 7px rgba(18,39,64,.08); }
.v281-reply-tools { margin: 14px 16px 0; border: 1px solid #e2e9f1; border-radius: 12px; }
.v281-reply-form { padding: 16px; }
.v281-reply-form textarea,
.v281-note-form textarea { min-height: 165px; width: 100%; padding: 14px 15px; border: 1px solid #cfdbe7; border-radius: 12px; color: #263d57; background: #fff; font-size: 13px; line-height: 1.6; resize: vertical; }
.v281-reply-form textarea:focus,
.v281-note-form textarea:focus { outline: 0; border-color: #4e98f5; box-shadow: 0 0 0 3px rgba(41,124,235,.11); }
.v281-reply-form footer,
.v281-note-form footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 11px; }
.v281-reply-form footer span,
.v281-note-form footer span { color: #77889c; font-size: 10.5px; line-height: 1.45; }
.v281-note-form { padding: 16px; }
.v281-note-list { display: grid; gap: 8px; padding: 0 16px 16px; }
.v281-note-list article { padding: 12px 13px; border: 1px solid #f0dca9; border-radius: 10px; background: #fff9e9; }
.v281-note-list header { display:flex;justify-content:space-between;gap:10px;margin-bottom:5px; }
.v281-note-list header strong { color:#624917;font-size:11.5px; }
.v281-note-list header small { color:#9a8457;font-size:10px!important; }
.v281-note-list p { margin:0;color:#725b2b;font-size:12px;line-height:1.55; }
.v281-closed-card { display:flex;align-items:center;gap:13px;padding:18px;color:#79525a;background:#fff7f8;border-color:#efd9dd; }
.v281-closed-card > i { width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:#ffe9ec;color:#bd3f50; }
.v281-closed-card div { display:flex;flex-direction:column;gap:2px; }
.v281-closed-card strong { font-size:13px; }
.v281-closed-card span { font-size:11px; }

/* ---------- Right properties ---------- */
.v281-properties-card,
.v281-client-card,
.v281-kb-card { overflow: hidden; }
.v281-properties-card > header,
.v281-client-card > header,
.v281-kb-card > header { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 15px;border-bottom:1px solid #e7edf3; }
.v281-properties-card > header strong,
.v281-client-card > header strong,
.v281-kb-card > header strong { color:#20344c;font-size:13px; }
.v281-properties-card > header small { color:#43a36e;font-size:9.5px!important;font-weight:800;text-transform:uppercase;letter-spacing:.06em; }
.v281-client-card > header a,
.v281-kb-card > header a { color:#1767e8;font-size:10.5px;font-weight:750; }
.v281-property-field { padding: 11px 14px 0; }
.v281-property-field label { display:block;margin-bottom:5px;color:#718196;font-size:10px!important;font-weight:800;text-transform:uppercase;letter-spacing:.04em; }
.v281-property-field select { width:100%;min-height:40px;padding:7px 10px;border:1px solid #d4dfe9;border-radius:9px;color:#2c425b;background:#fff;font-size:12px; }
.v281-property-field select:focus { outline:0;border-color:#4f9af4;box-shadow:0 0 0 3px rgba(43,128,234,.1); }
.v281-attention-toggle { width:calc(100% - 28px);margin:14px;padding:11px 12px;display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;gap:1px 9px;text-align:left;border:1px solid #dce5ed;border-radius:11px;color:#586c83;background:#f8fafc;cursor:pointer; }
.v281-attention-toggle > i { grid-row:1 / span 2;align-self:center;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:#edf1f5;color:#718198; }
.v281-attention-toggle span { font-size:11.5px;font-weight:800; }
.v281-attention-toggle small { color:#8a99aa;font-size:9.5px!important; }
.v281-attention-toggle.is-on { border-color:#f0d7a3;background:#fff9ec;color:#9a6517; }
.v281-attention-toggle.is-on > i { color:#b97a17;background:#fff0c9; }

.v281-client-card { padding-bottom:15px;text-align:center; }
.v281-client-card > header { text-align:left; }
.v281-client-avatar { width:54px;height:54px;margin:16px auto 8px;display:flex;align-items:center;justify-content:center;border-radius:16px;color:#fff;background:linear-gradient(145deg,#1767e8,#24b0e8);font-size:18px;font-weight:850;box-shadow:0 7px 18px rgba(23,103,232,.2); }
.v281-client-card h3 { margin:0;color:#1b3048;font-size:14px; }
.v281-client-card > p { margin:3px 0 0;color:#7b8b9e;font-size:10.5px; }
.v281-client-card ul { list-style:none;margin:14px 14px 0;padding:0;display:grid;gap:7px;text-align:left; }
.v281-client-card li { display:flex;align-items:center;gap:8px;min-width:0;color:#66788d;font-size:10.5px;overflow-wrap:anywhere; }
.v281-client-card li i { width:18px;color:#8292a5;text-align:center; }
.v281-kb-card .v2-kb-mini-list { padding:7px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
    .v281-ticket-console { grid-template-columns: minmax(0,1fr) 280px; }
    .v281-ticket-table-row { grid-template-columns: 10px 45px minmax(200px,1fr) auto auto 18px; }
    .v281-assignee { display:none; }
}
@media (max-width: 960px) {
    .v281-ticket-console { grid-template-columns: 1fr; }
    .v281-ticket-sidebar { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .v281-kb-card { grid-column:1 / -1; }
    .v281-ticket-table-row { grid-template-columns:10px 42px minmax(160px,1fr) auto 18px; }
    .v281-attention { display:none; }
}
@media (max-width: 767px) {
    body.app-body { font-size: 14.5px !important; }
    .app-main { font-size: 13.5px !important; }
    .app-main .page-heading h1 { font-size: 29px !important; }
    .v281-ticket-summary-top,
    .v281-ticket-list-head,
    .v281-reply-form footer,
    .v281-note-form footer { align-items:flex-start;flex-direction:column; }
    .v281-save-indicator { white-space:normal; }
    .v281-ticket-sidebar { grid-template-columns:1fr; }
    .v281-kb-card { grid-column:auto; }
    .v281-ticket-table-row { grid-template-columns:10px 1fr auto;gap:8px;padding:12px; }
    .v281-ticket-id { display:none; }
    .v281-ticket-main { grid-column:2; }
    .v281-ticket-table-row > .badge { grid-column:3;grid-row:1 / span 2; }
    .v281-ticket-table-row > .fa-chevron-right { display:none; }
    .v281-conversation-messages .message { max-width:96%; }
}