.ticket-create-shell{margin:0 0 45px;background:#fff;border:1px solid #e6e9ef;border-radius:8px;box-shadow:0 14px 35px rgba(24,39,75,.08);overflow:hidden}
.ticket-create-hero{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:30px;background:linear-gradient(135deg,#16213f 0%,#24467a 56%,#0e8b8f 100%);color:#fff}
.ticket-create-kicker{display:inline-flex;margin-bottom:8px;padding:4px 10px;border:1px solid rgba(255,255,255,.35);border-radius:999px;font-size: 12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#f3df26}
.ticket-create-hero h1{margin:0 0 8px;font-size:30px;font-weight:700;line-height:1.2;color:#fff}
.ticket-create-hero p{max-width:650px;margin:0;color:rgba(255,255,255,.84);font-size:14px;line-height:1.7}
.ticket-create-hero-icon{flex:0 0 74px;width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);font-size:34px}
.ticket-create-section{padding:26px 30px;border-bottom:1px solid #edf0f4}
.ticket-section-heading{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}
.ticket-section-heading>i{width:40px;height:40px;border-radius:8px;background:#f3df26;color:#17213b;display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.08)}
.ticket-section-heading h3{margin:0 0 4px;font-size:18px;font-weight:700;color:#1f2937}
.ticket-section-heading p{margin:0;color:#6b7280;font-size:13px;line-height:1.6}
.ticket-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
.ticket-field{min-width:0}
.ticket-field-wide{grid-column:1/-1}
.ticket-field label{display:block;margin-bottom:7px;font-size:12px;font-weight:700;text-transform:uppercase;color:#475569}
.ticket-field .form-control{height:42px;border:1px solid #d9dee8;border-radius:6px;box-shadow:none;color:#1f2937;background:#fff;font-size:13px;transition:border-color .2s ease,box-shadow .2s ease}
.ticket-field textarea.form-control{height:auto;min-height:190px;resize:vertical;line-height:1.6}
.ticket-field .form-control:focus{border-color:#24467a;box-shadow:0 0 0 3px rgba(36,70,122,.12)}
.ticket-access-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.ticket-access-card{padding:18px;border:1px solid #e1e7ef;border-radius:8px;background:#fbfcfe}
.ticket-access-card .ticket-field+.ticket-field{margin-top:15px}
.ticket-access-title{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e8edf4}
.ticket-access-title i{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#eef5ff;color:#24467a;font-size:15px}
.ticket-access-title h4{margin:0;color:#1f2937;font-size:16px;font-weight:700;line-height:1.3}
.ticket-input-readonly{position:relative}
.ticket-input-readonly i{position:absolute;top:50%;left:13px;transform:translateY(-50%);color:#7c8798;z-index:2}
.ticket-input-readonly .form-control{padding-left:38px;background:#f8fafc;color:#475569;cursor:not-allowed}
.ticket-domain-pill{min-height:42px;display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid #cbe7d5;border-radius:6px;background:#f0fbf4;color:#166534;font-weight:700;word-break:break-word}
.ticket-domain-pill i{color:#139b50}
.ticket-textarea-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:9px;color:#64748b;font-size:12px;line-height:1.5}
#charCountDisplay{font-weight:700;white-space:nowrap}
#charCountDisplay.is-valid{color:#16833d}
#charCountDisplay.is-danger{color:#c62828}
.ticket-scope-notice{display:flex;gap:14px;margin:0;padding:22px 30px;border-bottom:1px solid #edf0f4;background:#fff9e6}
.ticket-scope-icon{flex:0 0 38px;width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#f3df26;color:#17213b;font-size:16px}
.ticket-scope-notice h4{margin:0 0 6px;color:#1f2937;font-size:16px;font-weight:700}
.ticket-scope-notice p{margin:0 0 12px;color:#5f4b17;font-size:13px;line-height:1.7}
.ticket-agreement{display:flex;align-items:flex-start;gap:9px;margin:0;color:#1f2937;font-size:13px;font-weight:600;line-height:1.5;cursor:pointer}
.ticket-agreement input{margin:3px 0 0;flex:0 0 auto}
.ticket-submit-panel{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 30px;background:#f8fafc}
.ticket-submit-panel strong{display:block;color:#1f2937;font-size:15px}
.ticket-submit-panel p{margin:3px 0 0;color:#6b7280;font-size:13px}
.ticket-submit-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:160px;height:44px;border:none;border-radius:6px;background:#138a35;background-image:none;font-size:13px;font-weight:700;box-shadow:0 8px 18px rgba(19,138,53,.2);text-shadow:none}
.ticket-submit-button:hover,.ticket-submit-button:focus{background:#0f732b;background-image:none;color:#fff}
.ticket-submit-button[disabled]{opacity:.75;cursor:not-allowed}
#output-console{margin:0 30px 35px}
.pr_success,.pr_warning{margin:16px 0;padding:14px 16px;border-radius:6px;border:1px solid transparent}.pr_success{color:#276312;background-color:#DFF2BF;border-color:#c4e99a}.pr_warning{color:#8a5300;background-color:#FEEFB3;border-color:#f7db79}.pr_success i,.pr_warning i{margin-right:8px;vertical-align:middle}
@media (max-width:991px){.ticket-field-grid,.ticket-access-grid{grid-template-columns:1fr}}
@media (max-width:767px){.ticket-create-hero{padding:24px;align-items:flex-start}.ticket-create-hero-icon{display:none}.ticket-create-hero h1{font-size:25px}.ticket-create-section,.ticket-submit-panel,.ticket-scope-notice{padding:22px}.ticket-scope-notice{display:block}.ticket-scope-icon{margin-bottom:12px}.ticket-submit-panel{display:block}.ticket-submit-button{width:100%;margin-top:15px}.ticket-textarea-footer{display:block}#charCountDisplay{display:block;margin-top:6px;white-space:normal}#output-console{margin:0 22px 28px}}
.ticket-page-shell{margin:0 0 45px;background:#fff;border:1px solid #e6e9ef;border-radius:8px;box-shadow:0 14px 35px rgba(24,39,75,.08);overflow:hidden}
.ticket-list-hero{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:30px;background:linear-gradient(135deg,#16213f 0%,#24467a 56%,#0e8b8f 100%);color:#fff}
.ticket-list-hero h1{margin:0 0 8px;font-size:30px;font-weight:700;line-height:1.2;color:#fff}
.ticket-list-hero p{max-width:680px;margin:0;color:rgba(255,255,255,.84);font-size:14px;line-height:1.7}
.ticket-list-hero-icon{flex:0 0 74px;width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);font-size:34px}
.ticket-status-panel{display:flex;align-items:center;gap:13px;padding:18px 30px;border-bottom:1px solid #edf0f4}
.ticket-status-panel.is-open{background:#f0fbf4;color:#166534}
.ticket-status-panel.is-closed{background:#fff8e6;color:#7a4b00}
.ticket-status-icon{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.7);font-size:16px}
.ticket-status-panel span{display:block;margin-bottom:2px;font-size: 12px;font-weight:700;text-transform:uppercase;color:#64748b}
.ticket-status-panel strong{display:block;font-size:15px;color:inherit}
.ticket-list-card{background:#fff}
.ticket-list-card-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 30px;border-bottom:1px solid #edf0f4}
.ticket-list-card-header h2{margin:0 0 4px;color:#1f2937;font-size:20px;font-weight:700}
.ticket-list-card-header p{margin:0;color:#64748b;font-size:13px;line-height:1.5}
.ticket-list-back{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.ticket-list-content{min-height:160px}
.ticket-list-loading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:160px;color:#64748b;font-weight:700}
.ticket-table-wrap{margin:0}
.ticket-table{margin:0;border:0}
.ticket-table thead td{padding:13px 18px;border:0;border-bottom:1px solid #e5eaf1;background:#f8fafc;color:#64748b;font-size: 12px;font-weight:800;text-transform:uppercase}
.ticket-table tbody td{padding:16px 18px;border:0;border-bottom:1px solid #edf0f4;vertical-align:middle;color:#334155;font-size:13px}
.ticket-table tbody tr:hover td{background:#fbfcfe}
.ticket-id-link{font-weight:800;color:#24467a}
.ticket-subject-link{font-weight:700;color:#1f2937}
.ticket-status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:86px;padding:5px 10px;border-radius:999px;font-size: 12px;font-weight:800;text-transform:uppercase;white-space:nowrap}
.ticket-status-badge.status-open{background:#eaf4ff;color:#1d4f91}
.ticket-status-badge.status-in-progress{background:#fff4d7;color:#8a5300}
.ticket-status-badge.status-replied{background:#eaf7ee;color:#166534}
.ticket-status-badge.status-closed{background:#eef1f5;color:#475569}
.ticket-empty-state{display:flex;min-height:170px;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#64748b}
.ticket-empty-state i{font-size:30px;color:#94a3b8}
.ticket-empty-state strong{color:#1f2937;font-size:16px}
.ticket-empty-state span{font-size:13px}
.ticket-archived-summary{border:1px solid #dbeafe;border-radius:8px;background:#f8fbff;padding:20px}
.ticket-archived-summary-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.ticket-archived-summary-head i{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#24467a;color:#fff;font-size:16px;flex:0 0 42px}
.ticket-archived-summary-head strong{display:block;color:#1f2937;font-size:16px;margin-bottom:4px}
.ticket-archived-summary-head span{display:block;color:#64748b;font-size:13px;line-height:1.6}
.ticket-summary-list{margin:0}
.ticket-summary-list dt{margin:16px 0 6px;color:#475569;font-size:12px;font-weight:800;text-transform:uppercase}
.ticket-summary-list dt:first-child{margin-top:0}
.ticket-summary-list dd{margin:0;color:#334155;font-size:14px;line-height:1.7;white-space:pre-line}
.ticket-list-footer{padding:16px 30px;display:flex;align-items:center;color:#64748b;font-size:12px}
.ticket-list-footer .pagination{margin:0}
@media (max-width:767px){.ticket-list-hero{padding:24px;align-items:flex-start}.ticket-list-hero-icon{display:none}.ticket-list-hero h1{font-size:25px}.ticket-status-panel,.ticket-list-card-header{padding:18px 22px}.ticket-list-card-header{display:block}.ticket-list-back{margin-top:14px}.ticket-table thead{display:none}.ticket-table tbody td{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:8px 22px;text-align:right!important;border-bottom:0}.ticket-table tbody td:before{content:attr(data-label);flex:0 0 92px;color:#64748b;font-size: 12px;font-weight:800;text-align:left;text-transform:uppercase}.ticket-table tbody tr{display:block;padding:12px 0;border-bottom:1px solid #edf0f4}.ticket-empty-state{min-height:150px}.ticket-empty-state:before{display:none}.ticket-list-footer{display:block;padding:16px 22px}.ticket-list-footer .text-right{text-align:left;margin-top:10px}}
.ticket-view-shell{margin:0 0 45px}
.ticket-view-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:25px;margin-bottom:22px;padding:28px 30px;border-radius:8px;background:linear-gradient(135deg,#16213f 0%,#24467a 58%,#0e8b8f 100%);color:#fff;box-shadow:0 14px 35px rgba(24,39,75,.1)}
.ticket-view-hero h1{margin:0 0 8px;color:#fff;font-size:28px;font-weight:700;line-height:1.25}
.ticket-view-hero p{margin:0;color:rgba(255,255,255,.82);font-size:13px;line-height:1.6}
.ticket-view-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.ticket-view-card,.ticket-side-card{border:1px solid #e6e9ef;border-radius:8px;background:#fff;box-shadow:0 10px 26px rgba(24,39,75,.06)}
.ticket-view-card+.ticket-view-card,.ticket-side-card+.ticket-side-card{margin-top:18px}
.ticket-view-card-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;border-bottom:1px solid #edf0f4}
.ticket-view-card-header h2,.ticket-side-card h2{margin:0 0 4px;color:#1f2937;font-size:18px;font-weight:700;line-height:1.3}
.ticket-view-card-header p,.ticket-side-card p{margin:0;color:#64748b;font-size:13px;line-height:1.6}
.ticket-thread-list{padding:22px 24px}
.ticket-thread-item{position:relative;padding:18px;border:1px solid #e6e9ef;border-radius:8px;background:#fbfcfe}
.ticket-thread-item+.ticket-thread-item{margin-top:16px}
.ticket-thread-item.is-support{background:#f7fbff;border-color:#dbeafe}
.ticket-thread-item.is-customer{background:#fff;border-color:#e5e7eb}
.ticket-thread-item.is-system{background:#f8fafc;border-color:#e2e8f0}
.ticket-thread-meta{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ticket-thread-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#24467a;color:#fff;font-size:15px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.12)}
.ticket-thread-item.is-support .ticket-thread-avatar{background:#0e8b8f}
.ticket-thread-item.is-system .ticket-thread-avatar{background:#64748b}
.ticket-thread-meta strong{display:block;color:#1f2937;font-size:14px}
.ticket-thread-meta span span{display:block;margin-top:2px;color:#64748b;font-size:12px}
.ticket-thread-body{color:#334155;font-size:14px;line-height:1.75;word-break:break-word}
.ticket-thread-body p:last-child{margin-bottom:0}
.ticket-attachments{margin-top:18px;padding-top:16px;border-top:1px solid #edf0f4}
.ticket-attachments h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:#475569;font-size:12px;font-weight:800;text-transform:uppercase}
.ticket-attachment-grid{display:flex;flex-wrap:wrap;gap:10px}
.ticket-attachment-thumb{width:92px;height:72px;border:1px solid #dce3ee;border-radius:6px;background:#f8fafc;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#24467a;text-decoration:none}
.ticket-attachment-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ticket-video-thumb{font-size:26px;background:#eef5ff}
.ticket-file-link{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:10px 12px;border:1px solid #dce3ee;border-radius:6px;background:#fff;color:#24467a;font-size:13px;font-weight:700;word-break:break-word;text-decoration:none}
.ticket-file-link:hover,.ticket-file-link:focus{background:#f8fafc;text-decoration:none}
.ticket-response-card{margin-top:18px}
.ticket-response-header{align-items:center}
.ticket-response-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.ticket-response-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;font-weight:700;text-shadow:none}
.ticket-response-toggle.active{background:#475569;border-color:#475569}
.ticket-followup-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-color:#d9dee8;background:#fff;color:#24467a;font-weight:700;text-shadow:none}
.ticket-followup-toggle:hover,.ticket-followup-toggle:focus{background:#eef5ff;border-color:#c9d8ec;color:#1d3d6a}
.ticket-response-panel{display:none}
.ticket-response-panel.active{display:block}
.ticket-response-card form{padding:22px 24px}
.ticket-modal-open{overflow:hidden}
.ticket-modal{position:fixed;inset:0;z-index:1050;display:none;align-items:center;justify-content:center;padding:20px}
.ticket-modal.active{display:flex}
.ticket-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55)}
.ticket-modal-dialog{position:relative;width:100%;max-width:560px;padding:28px;border-radius:8px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.24);color:#334155}
.ticket-modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;border-radius:6px;background:#f1f5f9;color:#475569;display:flex;align-items:center;justify-content:center}
.ticket-modal-close:hover,.ticket-modal-close:focus{background:#e2e8f0;color:#1f2937}
.ticket-modal-icon{width:46px;height:46px;border-radius:10px;background:#eef5ff;color:#24467a;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px}
.ticket-modal h2{margin:0 36px 10px 0;color:#1f2937;font-size:22px;font-weight:800;line-height:1.25}
.ticket-modal p{margin:0 0 12px;color:#475569;font-size:14px;line-height:1.75}
.ticket-modal-note{display:flex;gap:11px;margin:16px 0;padding:14px;border:1px solid #f5d982;border-radius:6px;background:#fff9e6;color:#5f4b17;font-size:13px;line-height:1.65}
.ticket-modal-note i{margin-top:3px;color:#8a5300}
.ticket-modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:20px}
.ticket-modal-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700}
.ticket-close-modal{position:relative;width:100%;max-width:520px;margin:40px auto;background:#fff;border-radius:8px;box-shadow:0 24px 70px rgba(15,23,42,.24);overflow:hidden}
.ticket-close-modal .modal-content{border:0;border-radius:0;box-shadow:none}
.ticket-close-modal .modal-header{padding:18px 22px;border-bottom:1px solid #edf0f4}
.ticket-close-modal .modal-title{margin:0;color:#1f2937;font-size:20px;font-weight:800}
.ticket-close-modal .modal-body{padding:20px 22px;color:#475569;font-size:14px;line-height:1.7}
.ticket-close-modal .modal-body p:last-child{margin-bottom:0}
.ticket-close-modal .modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid #edf0f4;background:#f8fafc}
.ticket-close-modal .modal-footer .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700}
.ticket-upload-field{margin-top:16px;padding:16px;border:1px dashed #cbd5e1;border-radius:8px;background:#f8fafc}
.ticket-upload-field label{display:flex;align-items:center;gap:8px;margin:0 0 10px;color:#1f2937;font-size:13px;font-weight:800;text-transform:uppercase}
.ticket-upload-field p{margin:9px 0 0;color:#64748b;font-size:12px;line-height:1.6}
.ticket-current-attachments{margin:0 0 14px;padding:12px;border:1px solid #dce3ee;border-radius:6px;background:#fff}
.ticket-current-attachments strong{display:block;margin-bottom:8px;color:#1f2937;font-size:12px;font-weight:800;text-transform:uppercase}
.ticket-current-attachments ul{margin:0;padding:0;list-style:none}
.ticket-current-attachments li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid #edf0f4}
.ticket-current-attachments li:first-child{border-top:0}
.ticket-current-attachments a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#24467a;font-size:13px;font-weight:700;text-decoration:none}
.ticket-current-attachments a i{margin-right:7px}
.ticket-delete-attachment{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:#b42318;font-size:12px;font-weight:800}
.ticket-delete-attachment:hover,.ticket-delete-attachment:focus{text-decoration:underline}
.ticket-delete-attachment[disabled]{opacity:.65;text-decoration:none}
.ticket-file-input{display:block;width:100%;padding:10px;border:1px solid #d9dee8;border-radius:6px;background:#fff;color:#334155}
.ticket-upload-list{margin:12px 0 0;padding:0;list-style:none}
.ticket-upload-list li{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid #edf0f4;color:#334155;font-size:12px}
.ticket-upload-list li i{color:#24467a}
.ticket-upload-list li span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ticket-upload-list li em{font-style:normal;color:#64748b;white-space:nowrap}
.ticket-response-submit{margin-top:16px}
.ticket-closed-panel{display:flex;align-items:center;gap:12px;margin-top:18px;padding:18px 20px;border:1px solid #e6e9ef;border-radius:8px;background:#f8fafc;color:#64748b}
.ticket-closed-panel i{width:38px;height:38px;border-radius:8px;background:#eef1f5;color:#475569;display:flex;align-items:center;justify-content:center}
.ticket-closed-panel strong{color:#1f2937}
.ticket-help-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.ticket-help-grid article{padding:18px;border:1px solid #e6e9ef;border-radius:8px;background:#fff;box-shadow:0 10px 26px rgba(24,39,75,.05)}
.ticket-help-grid h3{margin:0 0 8px;color:#1f2937;font-size:16px;font-weight:700}
.ticket-help-grid p{min-height:42px;margin:0 0 12px;color:#64748b;font-size:13px;line-height:1.6}
.ticket-help-grid .btn-light{background:#f8fafc;border-color:#dce3ee;color:#24467a;text-shadow:none}
.ticket-help-grid .btn-light:hover,.ticket-help-grid .btn-light:focus{background:#eef5ff;border-color:#c9d8ec;color:#1d3d6a}
.ticket-side-card{padding:18px}
.ticket-danger-card{border-color:#ffd4d4;background:#fffafa}
.ticket-side-card .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700}
.ticket-priority-card{border-color:#d9e7ff;background:#f8fbff}
.ticket-priority-card.is-active{border-color:#b9ebc8;background:#f2fbf5}
.ticket-priority-card.is-expired{border-color:#f5d982;background:#fffaf0}
.ticket-priority-badge{display:inline-flex;align-items:center;gap:7px;margin:0 0 12px;padding:5px 10px;border-radius:999px;background:#eaf7ee;color:#166534;font-size: 12px;font-weight:900;text-transform:uppercase}
.ticket-priority-badge.is-expired{background:#fff4d7;color:#8a5300}
.ticket-priority-note{display:flex;gap:8px;margin-top:12px!important;padding:11px 12px;border:1px solid #cbe7d5;border-radius:6px;background:#fff;color:#166534;font-size:12px!important;line-height:1.6!important}
.ticket-priority-note i{margin-top:2px}
.ticket-priority-details{margin:14px 0}
.ticket-priority-details strong{display:block;margin:12px 0 7px;color:#1f2937;font-size:12px;font-weight:900;text-transform:uppercase}
.ticket-priority-details ul{margin:0;padding-left:18px;color:#475569;font-size:12px;line-height:1.7}
.ticket-accordion-toggle{width:100%;padding:0;border:0;background:transparent;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#1f2937;font-size:16px;font-weight:700;text-align:left}
.ticket-accordion-toggle i{width:30px;height:30px;border-radius:6px;background:#f1f5f9;color:#475569;display:flex;align-items:center;justify-content:center;font-size:12px}
.ticket-accordion-content{display:none;margin-top:14px}
.ticket-accordion-content.active{display:block}
.ticket-info-table{width:100%;margin:0;border-collapse:collapse}
.ticket-info-table td{padding:9px 0;border-bottom:1px solid #edf0f4;color:#334155;font-size:13px;vertical-align:top}
.ticket-info-table tr:last-child td{border-bottom:0}
.ticket-info-table td:first-child{width:42%;padding-right:12px;color:#64748b;font-size: 12px;font-weight:800;text-transform:uppercase}
.ticket-access-form h2{display:flex;align-items:center;gap:8px;margin:0 0 14px}
.ticket-access-form h2:not(:first-child){margin-top:20px;padding-top:18px;border-top:1px solid #edf0f4}
.ticket-access-form .ticket-field+.ticket-field{margin-top:13px}
.ticket-access-form .btn{margin-top:18px}
.ticket-access-note{display:flex;gap:8px;margin:12px 0 0!important;font-size:12px!important;color:#64748b!important}
.video-popup-wrap{max-width:900px;margin:30px auto;background:#000}
.video-popup-player{width:100%;height:auto;display:block}
@media (max-width:1199px){.ticket-view-grid{grid-template-columns:minmax(0,1fr) 310px}.ticket-help-grid{grid-template-columns:1fr}}
@media (max-width:991px){.ticket-view-grid{grid-template-columns:1fr}.ticket-side-column{order:2}.ticket-thread-column{order:1}}
@media (max-width:767px){.ticket-view-hero{display:block;padding:24px}.ticket-view-hero h1{font-size:24px}.ticket-view-hero .ticket-status-badge{margin-top:14px}.ticket-view-card-header,.ticket-thread-list,.ticket-response-card form{padding:18px}.ticket-response-header{display:block}.ticket-response-actions{justify-content:flex-start;margin-top:14px}.ticket-response-actions .btn{width:100%}.ticket-modal{align-items:flex-end;padding:0}.ticket-modal-dialog{max-width:none;border-radius:8px 8px 0 0;padding:24px 20px}.ticket-modal-actions{display:block}.ticket-modal-actions .btn{width:100%;margin-top:10px}.ticket-close-modal{max-width:none;margin:0 12px}.ticket-close-modal .modal-footer{display:block}.ticket-close-modal .modal-footer .btn{width:100%;margin-top:10px}.ticket-thread-item{padding:15px}.ticket-closed-panel{align-items:flex-start}.ticket-attachment-thumb{width:82px;height:66px}}

/* HuntBee ticket portal refinement — 2026-09-24 */
/* Scoped below .hb-theme so the global typography file loaded after ticket.css cannot override ticket UI. */
.hb-theme .ticket-list-hero h1,
.hb-theme .ticket-view-hero h1 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.02em;
}

.hb-theme .ticket-list-hero p,
.hb-theme .ticket-view-hero p {
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: 14px;
  line-height: 1.65;
}

.hb-theme .ticket-list-card-header h2 {
  margin: 0 0 5px;
  color: #172033;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.hb-theme .ticket-list-card-header p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.55;
}

.hb-theme .ticket-view-card-header h2 {
  margin: 0 0 5px;
  color: #172033;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.015em;
}

.hb-theme .ticket-side-card h2 {
  margin: 0 0 8px;
  color: #172033;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.01em;
}

.hb-theme .ticket-view-card-header p,
.hb-theme .ticket-side-card p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.65;
}

.hb-theme .ticket-help-grid h3 {
  margin: 0 0 8px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
}

.hb-theme .ticket-help-grid p {
  min-height: 42px;
  margin: 0 0 12px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
}

.hb-theme .ticket-modal h2 {
  margin: 0 36px 10px 0;
  color: #1f2937;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}

.hb-theme .ticket-modal p {
  margin: 0 0 12px;
  color: #475569;
  font-size: 14px;
  line-height: 1.75;
}

.hb-theme .ticket-list-hero,
.hb-theme .ticket-view-hero {
  position: relative;
  isolation: isolate;
}

.hb-theme .ticket-list-hero {
  padding: 28px 30px;
}

.hb-theme .ticket-list-hero > div:first-child,
.hb-theme .ticket-view-hero > div:first-child {
  min-width: 0;
}

.hb-theme .ticket-list-hero-icon {
  width: 68px;
  height: 68px;
  flex-basis: 68px;
  font-size: 30px;
}

.hb-theme .ticket-status-panel {
  padding-top: 16px;
  padding-bottom: 16px;
}

.hb-theme .ticket-list-card-header {
  padding-top: 22px;
  padding-bottom: 22px;
}

.hb-theme .ticket-list-back {
  min-height: 38px;
  padding: 8px 13px;
  border-color: #d7dee8;
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  text-shadow: none;
}

.hb-theme .ticket-list-back:hover,
.hb-theme .ticket-list-back:focus {
  border-color: #bfcadb;
  background: #f8fafc;
  color: #172033;
}

.hb-theme .ticket-table thead td {
  padding-top: 12px;
  padding-bottom: 12px;
  color: #64748b;
  font-size: 12px;
  letter-spacing: .025em;
}

.hb-theme .ticket-table tbody td {
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 13px;
  line-height: 1.45;
}

.hb-theme .ticket-table tbody td:nth-child(4),
.hb-theme .ticket-table tbody td:nth-child(5) {
  white-space: nowrap;
  color: #64748b;
  font-size: 12px;
}

.hb-theme .ticket-id-link,
.hb-theme .ticket-subject-link {
  text-decoration: none;
}

.hb-theme .ticket-id-link:hover,
.hb-theme .ticket-id-link:focus,
.hb-theme .ticket-subject-link:hover,
.hb-theme .ticket-subject-link:focus {
  color: #0e6880;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hb-theme .ticket-subject-link {
  display: inline-block;
  line-height: 1.5;
}

.hb-theme .ticket-status-badge {
  min-width: 90px;
  padding: 6px 11px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .02em;
}

.hb-theme .ticket-list-footer {
  min-height: 58px;
  border-top: 0;
  background: #fbfcfe;
}

.hb-theme .ticket-view-hero {
  align-items: center;
  margin-bottom: 20px;
  padding: 25px 28px;
}

.hb-theme .ticket-view-hero h1 {
  max-width: 900px;
  font-size: clamp(24px, 2.15vw, 30px);
}

.hb-theme .ticket-view-hero .ticket-status-badge {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 1px;
  border: 1px solid rgba(255,255,255,.36);
  box-shadow: 0 4px 14px rgba(15,23,42,.1);
}

.hb-theme .ticket-view-grid {
  grid-template-columns: minmax(0,1fr) 320px;
  gap: 20px;
}

.hb-theme .ticket-view-card,
.hb-theme .ticket-side-card {
  border-color: #dfe5ed;
  box-shadow: 0 8px 24px rgba(24,39,75,.055);
}

.hb-theme .ticket-view-card-header {
  padding: 20px 22px;
}

.hb-theme .ticket-thread-list {
  padding: 20px 22px 22px;
}

.hb-theme .ticket-thread-item {
  padding: 17px 18px;
  border-color: #e1e7ef;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.025);
}

.hb-theme .ticket-thread-item.is-customer {
  border-left: 3px solid #24467a;
  background: #fff;
}

.hb-theme .ticket-thread-item.is-support {
  border-left: 3px solid #0e8b8f;
  background: #f8fcfd;
}

.hb-theme .ticket-thread-item.is-system {
  border-left: 3px solid #94a3b8;
  background: #f8fafc;
}

.hb-theme .ticket-thread-meta {
  margin-bottom: 12px;
}

.hb-theme .ticket-thread-avatar {
  width: 38px;
  height: 38px;
  font-size: 14px;
}

.hb-theme .ticket-thread-meta strong {
  color: #172033;
  font-size: 13px;
  line-height: 1.35;
}

.hb-theme .ticket-thread-meta > div > span {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

.hb-theme .ticket-thread-body {
  color: #334155;
  font-size: 14px;
  line-height: 1.72;
}

.hb-theme .ticket-thread-body p {
  margin: 0 0 .85em;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.hb-theme .ticket-side-card {
  padding: 17px;
}

.hb-theme .ticket-side-card .btn {
  min-height: 38px;
  text-shadow: none;
}

.hb-theme .ticket-accordion-toggle {
  min-height: 34px;
  font-size: 14px;
  line-height: 1.35;
}

.hb-theme .ticket-accordion-toggle i {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

.hb-theme .ticket-info-table td {
  font-size: 12.5px;
  line-height: 1.45;
}

.hb-theme .ticket-info-table td:first-child {
  font-size: 12px;
}

.hb-theme .ticket-closed-panel {
  background: #fbfcfe;
  border-color: #dfe5ed;
}

.hb-theme .ticket-closed-panel span {
  font-size: 13px;
  line-height: 1.5;
}

.hb-theme .ticket-priority-details strong,
.hb-theme .ticket-current-attachments strong,
.hb-theme .ticket-upload-field label,
.hb-theme .ticket-attachments h3 {
  letter-spacing: .015em;
}

.hb-theme .ticket-empty-state span,
.hb-theme .ticket-upload-field p,
.hb-theme .ticket-priority-note,
.hb-theme .ticket-access-note {
  font-size: 12px;
}

@media (max-width:1199px) {
  .hb-theme .ticket-view-grid {
    grid-template-columns: minmax(0,1fr) 300px;
  }
}

@media (max-width:991px) {
  .hb-theme .ticket-view-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width:767px) {
  .hb-theme .ticket-list-hero,
  .hb-theme .ticket-view-hero {
    padding: 22px;
  }

  .hb-theme .ticket-list-hero h1,
  .hb-theme .ticket-view-hero h1 {
    font-size: 24px;
  }

  .hb-theme .ticket-list-hero p,
  .hb-theme .ticket-view-hero p {
    font-size: 13px;
  }

  .hb-theme .ticket-list-card-header h2 {
    font-size: 21px;
  }

  .hb-theme .ticket-view-card-header h2 {
    font-size: 20px;
  }

  .hb-theme .ticket-table tbody {
    display: block;
    padding: 12px 14px 4px;
  }

  .hb-theme .ticket-table tbody tr {
    margin-bottom: 10px;
    padding: 7px 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
  }

  .hb-theme .ticket-table tbody td {
    padding: 7px 12px;
  }

  .hb-theme .ticket-table tbody td:nth-child(4),
  .hb-theme .ticket-table tbody td:nth-child(5) {
    font-size: 12px;
  }

  .hb-theme .ticket-table tbody td:before {
    flex-basis: 78px;
    font-size: 12px;
  }

  .hb-theme .ticket-list-footer {
    padding: 14px 18px 18px;
    background: #fff;
  }

  .hb-theme .ticket-thread-list {
    padding: 14px;
  }

  .hb-theme .ticket-thread-item {
    padding: 15px;
  }

  .hb-theme .ticket-thread-meta {
    align-items: flex-start;
  }

  .hb-theme .ticket-side-card {
    padding: 16px;
  }
}

