/* Shared customer panel theme. Public pages and the admin panel are unaffected. */
.customer-panel-page{--bots-blue:#3065ff;--bots-ink:#15254b;--bots-muted:#7483a3;background:#f3f7fc;color:var(--bots-ink);font-family:"IBM Plex Sans Thai", "Sarabun", -apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,sans-serif}
.customer-panel-page #page-topbar{box-shadow:0 3px 22px #43679405;border-bottom:0;background:#fff}
.customer-panel-page .navbar-brand-box{background:#0b1925;border-right:1px solid #173347;padding:0 18px}
.customer-panel-page .logo-dark{display:block!important}.customer-panel-page .logo-light{display:none!important}
.customer-panel-page .portal-brand{display:flex;height:70px;align-items:center;gap:10px;text-align:left;line-height:1.3;color:#edf7ff}
.customer-panel-page .portal-brand img{width:48px;height:48px;object-fit:contain;background:#edf5ff;border-radius:50%}
.customer-panel-page .portal-brand strong{display:block;font-size:25px;font-weight:800;letter-spacing:-1px}
.customer-panel-page .portal-brand small{display:block;color:#8daac0;font-size:11px;font-weight:500;letter-spacing:0}
.customer-panel-page .header-item{color:#657798}.customer-panel-page .header-profile-user{border:3px solid #eef4ff;width:40px;height:40px}
.customer-panel-page .portal-header-label{align-self:center;font-size:13px;color:#8090aa;padding-left:16px;border-left:1px solid #e5ebf5}
.customer-panel-page .customer-panel-sidebar{position:fixed;top:70px;width:210px;background:radial-gradient(ellipse at 0 25%,#10304455,transparent 65%),linear-gradient(180deg,#0b1925,#081520);box-shadow:3px 0 16px #07182810;border-right:1px solid #173347}
.customer-panel-page #sidebar-menu{padding:12px 10px 0}
.customer-panel-page #sidebar-menu .menu-title{padding:8px 12px 8px;color:#7996ac;font-size:10px;letter-spacing:1px}
.customer-panel-page #sidebar-menu ul li a{margin-bottom:2px;padding:7px 10px;border:1px solid transparent;border-radius:6px;font-size:12px;line-height:20px;font-weight:500;color:#a3bcd1}
.customer-panel-page #sidebar-menu ul li a i{color:#578bb1;font-size:18px;min-width:1.6rem;vertical-align:middle}
.customer-panel-page #sidebar-menu ul li a:hover{background:#123044;color:#78e4ff}.customer-panel-page #sidebar-menu ul li a:hover i{color:#45d5f6}
.customer-panel-page #sidebar-menu ul li.mm-active>a{background:linear-gradient(100deg,#10445b,#112b3f 65%,#13475d);border-color:#1c5974;border-left:2px solid #32d8ff;color:#75e7ff!important;box-shadow:inset 0 0 15px #1abfe41a,0 0 12px #1abfe40d}
.customer-panel-page #sidebar-menu ul li.mm-active>a i{color:#48ddff!important;text-shadow:0 0 12px #29cfff55}
.customer-panel-page .customer-panel-sidebar .customer-sidebar-primary{flex:0 0 auto;margin-bottom:12px}
.customer-panel-page .customer-panel-sidebar .customer-sidebar-system{border-color:#173044;padding-top:6px}
.customer-panel-page .customer-panel-sidebar .customer-sidebar-copyright{margin-top:auto;padding:14px 8px 18px;border-color:#173044;color:#7e9ab0;font-size:10px;line-height:1.7}
.customer-panel-page .main-content{display:flex;min-height:100vh;flex-direction:column}
.customer-panel-page .page-content{flex:1 0 auto;padding:96px 12px 24px}
.customer-panel-page .footer{position:static;flex:0 0 auto;height:auto;min-height:60px;background:transparent;color:#8a99b1}
.bots-hero{display:flex;align-items:center;position:relative;isolation:isolate;overflow:hidden;min-height:224px;padding:30px 32px;border-radius:24px;margin-bottom:20px;background:radial-gradient(ellipse at 65% 10%,#bddcff95,transparent 60%),linear-gradient(120deg,#e2f2ff,#d4e9ff 52%,#edf6ff)}
.bots-hero:before,.bots-hero:after{content:"";position:absolute;z-index:-1;border-radius:50%;background:#ffffff35;width:530px;height:530px;top:-410px;left:100px}.bots-hero:after{left:auto;right:-140px;top:70px;width:430px;height:430px}
.bots-hero-copy{flex:1;z-index:1;min-width:300px}.bots-eyebrow{color:#5489ee;font-size:11px;font-weight:700;letter-spacing:.9px;display:flex;align-items:center;gap:8px;margin-bottom:14px}.bots-eyebrow i{font-size:16px}
.bots-hero h1{font-size:clamp(26px,2.35vw,38px);font-weight:750;letter-spacing:-.7px;margin:0 0 12px;color:#101f49;line-height:1.35}.bots-hero p{color:#526e9c;font-size:14px;line-height:1.85;margin:0}
.bots-hero-art{position:relative;align-self:stretch;flex:0 1 410px;min-width:240px;margin:-28px 10px -30px -20px;display:flex;align-items:center}.bots-hero-art>img{width:260px;height:260px;object-fit:contain;align-self:flex-end;margin-bottom:-35px;filter:drop-shadow(0 12px 15px #3b79e522)}
.bots-hero-actions{display:grid;gap:10px;flex:0 0 180px;z-index:1}.customer-panel-page .btn{border-radius:8px;font-weight:500}.customer-panel-page .btn-primary{background:linear-gradient(115deg,#2860ff,#4876ff);border-color:#3a6dff;box-shadow:0 5px 12px #3268ff16}.customer-panel-page .btn-primary:hover{background:#2054e9}.customer-panel-page .btn-outline-primary{border-color:#93afff;color:#3065f7}.customer-panel-page .btn-outline-primary:hover{background:#eaf0ff;color:#194dde}.bots-hero-actions .btn{padding:11px 10px;font-size:14px}.bots-hero-actions .btn i{font-size:20px;vertical-align:middle;margin-right:5px}.bots-hero-signature{color:#719ce5;font-style:italic;text-align:right;font-size:15px;line-height:1.35;padding:3px 10px 0}
.bots-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:20px}.bots-stat{position:relative;overflow:hidden;display:flex;gap:16px;align-items:flex-start;background:#fff;border-radius:17px;padding:22px 18px;box-shadow:0 7px 24px #24457304;--stat-color:#3673ff;--stat-bg:#edf4ff}.bots-stat-green{--stat-color:#15b981;--stat-bg:#e6f9f1}.bots-stat-amber{--stat-color:#f6ad00;--stat-bg:#fff6d9}.bots-stat-rose{--stat-color:#fa4e70;--stat-bg:#ffe9ee}.bots-stat-icon{display:flex;justify-content:center;align-items:center;flex:0 0 52px;height:52px;border-radius:17px;background:var(--stat-bg);color:var(--stat-color);font-size:33px}.bots-stat-copy{position:relative;z-index:1}.bots-stat h2{font-size:13px;line-height:1.5;color:#72819e;font-weight:600;margin:0 0 4px}.bots-stat strong{display:block;font-size:32px;line-height:1.2;font-weight:750;color:#10214b}.bots-stat p{font-size:10px;color:#8493af;margin:8px 0 0}.bots-stat-decoration{width:75px;height:75px;border:15px solid var(--stat-bg);border-radius:50%;position:absolute;right:-20px;bottom:-25px;opacity:.7}
.bots-table-card{border-radius:18px;box-shadow:0 8px 32px #28477b05}.bots-table-card>.card-body{padding:24px 20px}.bots-table-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:22px}.bots-table-title{display:flex;gap:12px;align-items:center;flex-shrink:0}.bots-heading-icon{display:grid;place-items:center;background:#eaf1ff;color:var(--bots-blue);font-size:25px;width:44px;height:44px;border-radius:12px}.bots-table-title h2{font-size:16px;font-weight:650;margin:0 0 5px;color:#1a2c50}.bots-table-title p{font-size:12px;color:#7b8caa;margin:0}.bots-filters{display:flex;gap:10px;align-items:center}.bots-filters .form-control,.bots-filters .form-select{border:1px solid #e0e8f6;border-radius:8px;min-height:42px;font-size:12px;color:#5c7095}.bots-filters .form-select{width:156px}.bots-search-field{position:relative}.bots-search-field>i{position:absolute;top:13px;left:12px;font-size:18px;color:#8396b8}.bots-search-field input{padding-left:36px;width:240px}.bots-filters .btn{white-space:nowrap;min-height:42px;padding:8px 23px}.bots-filters .btn i{font-size:18px;vertical-align:middle;margin-right:4px}
.customer-panel-page .table{font-size:12px;color:#465777;margin-bottom:0}.customer-panel-page .table>:not(caption)>*>*{padding:15px 12px;border-bottom-color:#eef2f9}.customer-panel-page .table thead th{white-space:nowrap;background:#f1f4fa;color:#253757;font-size:11px;font-weight:650;border-bottom:0}.customer-panel-page .table thead th:first-child{border-radius:9px 0 0 9px}.customer-panel-page .table thead th:last-child{border-radius:0 9px 9px 0}.customer-panel-page .table tbody tr:hover{background:#fafcff}.customer-panel-page .table .badge{font-size:10px;padding:6px 7px;font-weight:500;border-radius:5px}.customer-panel-page .bg-success-subtle{background:#e0f7ed}.customer-panel-page .bg-warning-subtle{background:#fff4d6}.customer-panel-page .bg-danger-subtle{background:#ffe4eb}.customer-panel-page .bg-primary-subtle{background:#e6edff}.customer-panel-page .bg-secondary-subtle{background:#edf0f5}.bot-action-stack{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:nowrap}.bot-action-stack .btn{white-space:nowrap;font-size:11px;padding:7px 10px}.bot-action-stack .bots-more{color:#7f91b0;font-size:20px;padding:3px}.bots-table-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;font-size:12px;color:#7e8faa;min-height:35px}.bots-table-footer .pagination{margin:0;gap:6px}.bots-table-footer .page-link{border:1px solid #e2eaf7;border-radius:8px!important;padding:7px 12px}.bots-table-footer .active .page-link{background:var(--bots-blue);border-color:var(--bots-blue)}
.customer-panel-page :focus-visible{outline:3px solid #6592ff;outline-offset:3px}.customer-panel-page.vertical-collpsed .portal-brand-text{display:none}.customer-panel-page.vertical-collpsed #sidebar-menu{padding-left:0;padding-right:0}.customer-panel-page.vertical-collpsed .portal-brand{justify-content:center}.customer-panel-page.vertical-collpsed .portal-brand img{width:38px;height:38px}
@media(min-width:1600px){.bots-hero-art{flex-basis:470px}.bots-hero-art>img{width:290px;height:290px;margin-bottom:-50px}.bots-hero{min-height:240px}.bots-stat p{font-size:12px}}
@media(max-width:1350px){.bots-hero-art{flex-basis:210px;min-width:180px}.bots-hero-art>img{width:230px;height:230px}.bots-table-heading{flex-wrap:wrap}.bots-filters{flex:1}.bots-search-field{flex:1}.bots-search-field input{width:100%}.bots-stat{gap:10px;padding:18px 14px}.bots-stat-icon{flex-basis:42px;height:42px;font-size:27px}.bots-stat h2{font-size:12px}}
@media(max-width:991px){.bots-hero{padding:26px;flex-wrap:wrap;gap:20px}.bots-hero-copy{min-width:240px}.bots-hero-art{margin:-20px 0 -20px;flex:0 0 190px}.bots-hero-art>img{margin:0;width:190px;height:190px}.bots-hero-actions{display:flex;flex:1 0 100%}.bots-hero-signature{display:none}.bots-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-panel-page .page-content{padding:90px 0 20px}.customer-panel-page .navbar-brand-box{padding:0 16px}.customer-panel-page .portal-header-label{display:none}}
@media(max-width:575px){.customer-panel-page .page-content>.container-fluid{padding:0 14px}.bots-hero{padding:24px 20px;border-radius:18px;gap:16px}.bots-hero-copy{min-width:0}.bots-hero h1{font-size:27px}.bots-hero p{font-size:12px}.bots-hero-art{display:none}.bots-hero-actions{gap:8px}.bots-hero-actions .btn{flex:1;font-size:11px;padding:10px 6px}.bots-hero-actions .btn i{font-size:15px;margin-right:2px}.bots-stats{gap:10px}.bots-stat{padding:16px 12px;gap:8px}.bots-stat-icon{flex-basis:34px;height:36px;border-radius:11px;font-size:23px}.bots-stat strong{font-size:27px}.bots-stat h2{font-size:11px}.bots-stat p{font-size:9px}.bots-table-card>.card-body{padding:18px 12px}.bots-filters{flex-wrap:wrap;gap:8px}.bots-search-field{flex:1 0 100%}.bots-filters .form-select{flex:1;width:auto}.bots-table-footer{font-size:10px}.bots-table-title h2{font-size:15px}.customer-panel-page .footer{position:static}.customer-panel-page .navbar-header{padding:0 10px}}

/* Customer order views share filters, pagination and actions. */
.customer-bots-page .bots-table-card .bots-filters { margin-bottom: 22px; }
.customer-bots-page .bots-filters .bots-search-field { flex: 1; min-width: 0; }
.customer-bots-page .bots-search-field input { width: 100%; }
.bots-view-toggle { display: inline-flex; flex-shrink: 0; gap: 4px; padding: 4px; border: 1px solid #e1e9f6; border-radius: 10px; background: #f3f6fc; }
.bots-view-toggle .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; color: #7586a4; border: 0; }
.bots-view-toggle .btn i { font-size: 18px; }
.bots-view-toggle .btn.active { color: #fff; background: #3065ff; box-shadow: 0 3px 8px #3065ff20; }
#bots-view-table[hidden], #bots-view-card[hidden] { display: none !important; }
.bots-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bots-card-empty { grid-column: 1 / -1; }
.bots-order-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid #e1e9f6; border-radius: 14px; padding: 20px; background: #fff; }
.bots-order-card-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.bots-order-card-heading > div { min-width: 0; overflow-wrap: anywhere; }
.bots-order-icon { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: #edf4ff; color: #3065ff; font-size: 26px; }
.bots-order-label { color: #3065ff; font-size: 12px; font-weight: 600; }
.bots-order-card h3 { margin: 5px 0 0; font-size: 15px; line-height: 1.5; color: #15254b; }
.bots-order-number { margin-left: auto; align-self: flex-start; font-size: 11px; color: #8a99b1; }
.bots-order-info { display: grid; gap: 10px; margin-bottom: 16px; font-size: 12px; }
.bots-order-info > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; }
.bots-order-info dt { color: #7b8caa; font-weight: 400; }
.bots-order-info dd { margin: 0; color: #344c70; text-align: right; overflow-wrap: anywhere; }
.bots-order-status { display: flex; flex-wrap: wrap; gap: 12px 20px; border-top: 1px solid #eef2f9; padding-top: 14px; margin-bottom: 16px; }
.bots-order-status > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.bots-order-status > div > span:first-child { font-size: 11px; color: #7b8caa; }
.bots-order-status .badge { font-size: 11px; font-weight: 500; padding: 6px 8px; white-space: normal; }
.bots-order-notice { font-size: 12px; overflow-wrap: anywhere; margin-bottom: 16px; }
.bots-order-actions { margin-top: auto; padding-top: 14px; border-top: 1px solid #eef2f9; }
.bots-order-actions .bot-action-stack { flex-wrap: wrap; justify-content: flex-start; }
@media (max-width: 1399px) { .bots-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .bots-card-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575px) {
    .customer-bots-page .bots-table-heading { gap: 14px; }
    .customer-bots-page .bots-filters .bots-search-field { flex: 1 0 100%; }
    .bots-view-toggle { margin-left: auto; }
    .bots-order-card { padding: 16px; }
}

/* On phones the page stays readable while the data table keeps its desktop column structure and scrolls horizontally. */
@media (max-width: 991px) {
    /* Let the document own vertical scrolling, including after switching to a taller card list. */
    .customer-bots-page .main-content {
        display: block;
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
    }
    .customer-bots-page .page-content { height: auto; overflow: visible; }
    .customer-bots-page .footer { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
    .customer-bots-page .bots-table-footer { flex-wrap: wrap; }
    .customer-bots-page .bots-table-footer .pagination { flex-wrap: wrap; }
    .customer-bots-page .modal { height: 100%; height: 100dvh; }
    .customer-bots-page .modal-body { overflow-wrap: anywhere; -webkit-overflow-scrolling: touch; }
    .customer-bots-page .modal-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 575px) {
    .customer-bots-page { min-width: 0; }
    .customer-bots-page .bots-hero { min-height: 0; }
    .customer-bots-page .bots-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .customer-bots-page .table-responsive { border: 1px solid #edf1f7; border-radius: 10px; -webkit-overflow-scrolling: touch; }
    .customer-bots-page .table-responsive::after { content: "เลื่อนซ้าย–ขวาเพื่อดูข้อมูลเพิ่มเติม"; display: block; padding: 8px 12px; color: #8a99b1; font-size: 10px; text-align: center; }
    .customer-bots-page .table { min-width: 1080px; }
    .customer-bots-page .table th:first-child,
    .customer-bots-page .table td:first-child { background: #fff; left: 0; position: sticky; z-index: 2; }
    .customer-bots-page .table thead th:first-child { background: #f1f4fa; z-index: 3; }
}

/* Keep expanded, collapsed and mobile offsets aligned with the compact sidebar. */
@media (min-width: 992px) {
    .customer-panel-page:not(.vertical-collpsed) .navbar-brand-box { width: 210px; }
    .customer-panel-page:not(.vertical-collpsed) .main-content { margin-left: 210px; }
    .customer-panel-page:not(.vertical-collpsed) .footer { left: 210px; }
    .customer-panel-page.vertical-collpsed .customer-panel-sidebar,
    .customer-panel-page.vertical-collpsed .navbar-brand-box { width: 70px; }
    .customer-panel-page.vertical-collpsed .navbar-brand-box { padding: 0 10px; }
    .customer-panel-page.vertical-collpsed #sidebar-menu > ul > li:hover > a { background: #123044; }
    .customer-panel-page.vertical-collpsed #sidebar-menu > ul > li > a span { padding-left: 20px; }
}
.customer-panel-page .customer-panel-sidebar .customer-sidebar-system .customer-logout-link,
.customer-panel-page .customer-panel-sidebar .customer-sidebar-system .customer-logout-link i { color: #a3bcd1; }
.customer-panel-page .customer-panel-sidebar .customer-sidebar-system .customer-logout-link:hover,
.customer-panel-page .customer-panel-sidebar .customer-sidebar-system .customer-logout-link:hover i { color: #78e4ff; }

/* Shared surfaces and forms across dashboard, orders, profile and support. */
.customer-panel-page .card,
.customer-panel-page .profile-section,
.customer-panel-page .support-panel {
    border-radius: 18px;
    border-color: #e1eaf7;
    box-shadow: 0 8px 28px #28477b06;
}
.customer-panel-page .card-title { color: var(--bots-ink); font-size: 17px; font-weight: 650; }
.customer-panel-page .card-title-desc,
.customer-panel-page .summary-caption { color: var(--bots-muted); line-height: 1.8; }
.customer-panel-page .page-title-box { padding-bottom: 20px; }
.customer-panel-page .page-title-box h4 { color: var(--bots-ink); font-size: 18px !important; }
.customer-panel-page .breadcrumb, .customer-panel-page .breadcrumb a { color: #7c8eab; font-size: 12px; }
.customer-panel-page .form-label { color: #526786; font-size: 13px; }
.customer-panel-page .form-control,
.customer-panel-page .form-select {
    border-color: #dfe7f4;
    border-radius: 8px;
    min-height: 40px;
    color: #344c70;
    font-size: 13px;
}
.customer-panel-page .form-control:focus,
.customer-panel-page .form-select:focus {
    border-color: #86aaff;
    box-shadow: 0 0 0 3px #3065ff14;
}
.customer-panel-page .form-control:disabled,
.customer-panel-page .form-control[readonly] { background: #f3f6fb; color: #7a8ba5; }
.customer-panel-page .select2-container--default .select2-selection--single {
    border: 1px solid #dfe7f4;
    border-radius: 8px;
    height: 40px !important;
}
.customer-panel-page .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px !important; color: #344c70; }
.customer-panel-page .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }
.customer-panel-page .member-hero,
.customer-panel-page .ticket-hero,
.customer-panel-page .profile-hero {
    background: radial-gradient(ellipse at 80% 0, #bcdcff80, transparent 65%), linear-gradient(120deg, #e2f2ff, #d4e9ff 52%, #edf6ff);
    border-radius: 22px;
    color: #526e9c;
    box-shadow: none !important;
}
.customer-panel-page .member-hero .text-white,
.customer-panel-page .ticket-hero .text-white,
.customer-panel-page .profile-hero__name { color: #15254b !important; }
.customer-panel-page .member-hero h2,
.customer-panel-page .ticket-hero h2 { font-size: clamp(23px, 2vw, 30px); line-height: 1.5; }
.customer-panel-page .ticket-hero .text-light { color: #526e9c !important; opacity: 1 !important; }
.customer-panel-page .ticket-hero .text-info { color: #2468ae !important; }
.customer-panel-page .member-hero .btn-outline-light,
.customer-panel-page .ticket-hero .btn-outline-light,
.customer-panel-page .member-hero .btn-outline-info { border-color: #8baaff; color: #3065f7; background: #ffffff65; }
.customer-panel-page .member-hero .btn-outline-light:hover,
.customer-panel-page .ticket-hero .btn-outline-light:hover,
.customer-panel-page .member-hero .btn-outline-info:hover { background: #fff; }
.customer-panel-page .member-hero .btn-light:not(.text-danger),
.customer-panel-page .ticket-hero .btn-light:not(.text-danger) { background: #3065ff; border-color: #3065ff; color: #fff !important; }
.customer-panel-page .member-hero .btn-light:not(.text-danger):hover,
.customer-panel-page .ticket-hero .btn-light:not(.text-danger):hover { background: #2455df; }
.customer-panel-page .ticket-chip,
.customer-panel-page .profile-meta span { background: #ffffffb3; border: 1px solid #c7def8; color: #456ca2; }
.customer-panel-page .profile-hero__eyebrow { color: #487fe0; }
.customer-panel-page .profile-avatar { background: #fff; color: #3065ff; border-color: #cfe1ff; box-shadow: 0 8px 20px #3065ff12; }
.customer-panel-page .summary-number { color: #15254b; font-size: 32px; }
.customer-panel-page .mini-title { color: #7387a5; }
.customer-panel-page .list-row { border-color: #e4ebf6; border-radius: 12px; }
.customer-panel-page .ticket-message-card { border-color: #e4ebf6; overflow-wrap: anywhere; }
.customer-panel-page .ticket-message-card.customer { background: #edf4ff; border-color: #d6e4ff; }
.customer-panel-page .ticket-message-card.admin { background: #f7f9fc; }
.customer-panel-page .modal-content { border: 0; border-radius: 18px; box-shadow: 0 20px 60px #15254b20; }
.customer-panel-page .modal-header { background: #eff6ff; border-bottom: 1px solid #e1eaf7; border-radius: 18px 18px 0 0; }
.customer-panel-page .profile-wrap { max-width: 1200px; }
@media (max-width: 575px) {
    .customer-panel-page .member-hero .card-body,
    .customer-panel-page .ticket-hero .card-body { padding: 22px 18px !important; }
    .customer-panel-page .ticket-action-group { width: 100%; }
    .customer-panel-page .ticket-action-btn { min-width: 0; }
    .customer-panel-page .page-title-box { padding-bottom: 14px; }
}
.customer-panel-page .form-control.is-invalid,
.customer-panel-page .form-select.is-invalid { border-color: #f46a6a; }
.customer-panel-page .form-control.is-invalid:focus,
.customer-panel-page .form-select.is-invalid:focus { box-shadow: 0 0 0 3px #f46a6a20; }
.customer-panel-page .bg-info-subtle { background: #e4f5fc; }
@media (max-width: 575px) {
    .customer-panel-page .navbar-header { padding-left: 0; }
}

/* Support list: compact heading, focused search and a welcoming empty state. */
.support-list-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.support-list-heading { display: flex; align-items: center; gap: 18px; }
.support-list-icon { display: grid; place-items: center; width: 66px; height: 66px; flex-shrink: 0; border-radius: 15px; background: linear-gradient(135deg, #e0ebff, #eaf2ff); color: #3065ff; font-size: 37px; }
.support-list-heading h1 { margin: 0 0 6px; font-size: 29px; font-weight: 700; color: #15254b; }
.support-list-heading p { margin: 0; color: #7889a8; font-size: 14px; line-height: 1.7; }
.support-list-header-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; }
.support-list-header-actions .breadcrumb { margin: 0; }
.support-list-page .btn { padding: 10px 18px; }
.support-list-page .btn i { font-size: 19px; vertical-align: middle; }
.support-list-page .ticket-table-card { border-radius: 18px; }
.support-ticket-search { margin: 4px 0 26px; max-width: 800px; }
.support-ticket-search label { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 16px; font-weight: 600; }
.support-ticket-search label i { font-size: 24px; color: #3065ff; }
.support-ticket-search-row { display: flex; gap: 16px; }
.support-ticket-search-input { position: relative; flex: 1; min-width: 0; }
.support-ticket-search-input > i { position: absolute; left: 15px; top: 14px; font-size: 20px; color: #8192b3; }
.support-list-page .support-ticket-search-input input { padding: 12px 16px 12px 44px; height: 48px; }
.support-ticket-search-row > .btn { flex: 0 0 180px; }
.support-list-page .table thead th { padding-top: 17px; padding-bottom: 17px; font-size: 12px; }
.support-ticket-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 16px 22px; }
.support-ticket-empty-art { width: 260px; max-width: 100%; height: 145px; margin-bottom: 10px; }
.support-ticket-empty h2 { font-size: 19px; font-weight: 650; color: #203456; margin: 0 0 10px; }
.support-ticket-empty p { font-size: 13px; line-height: 1.8; color: #8090aa; margin-bottom: 16px; }
.support-ticket-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid #e9eff8; padding-top: 16px; color: #7e8faa; font-size: 12px; }
.support-ticket-footer .pagination { margin: 0; gap: 8px; }
.support-ticket-footer .page-link { border: 1px solid #e2eaf7; border-radius: 8px !important; min-width: 36px; padding: 8px 12px; text-align: center; }
.support-ticket-footer .active .page-link { color: #3065ff; border-color: #638cff; background: #edf3ff; }
.support-ticket-footer .disabled .page-link { color: #a4b2c8; background: #fff; }
@media (max-width: 991px) {
    .support-list-header { align-items: flex-start; flex-wrap: wrap; gap: 16px; }
    .support-list-header-actions { flex-direction: row; justify-content: space-between; align-items: center; width: 100%; }
}
@media (max-width: 575px) {
    .support-list-icon { width: 48px; height: 48px; font-size: 28px; border-radius: 12px; }
    .support-list-heading { gap: 12px; }
    .support-list-heading h1 { font-size: 24px; }
    .support-list-heading p { font-size: 12px; }
    .support-list-header-actions { flex-wrap: wrap; gap: 12px; }
    .support-list-page .ticket-table-card > .card-body { padding: 18px 14px !important; }
    .support-ticket-search-row { gap: 10px; flex-wrap: wrap; }
    .support-ticket-search-input { flex-basis: 100%; }
    .support-ticket-search-row > .btn { flex-basis: 100%; }
    .support-ticket-empty { padding-left: 0; padding-right: 0; }
    .support-ticket-footer { font-size: 10px; gap: 8px; }
    .support-ticket-footer .page-link { min-width: 30px; padding: 6px 9px; }
}