::-ms-expand{display:none}
:root{--primary:#f0f2f5;--secondary:#7A7A7A;--accent:#3498DB;--accentdark:#1f5c8e;--lightcolor:#FFF;--bordercolor:#e0e4e9;--text:#444;--text-muted:#a0a0a0;--highlight:#2c82c9;--bg-highlight:#fff3cd;--attention-highlight:#ffc107;--content-bg:#f8f9fa;--card-bg:var(--lightcolor);--urgent:#ff4444;--success:#2ecc71;--view-button:#28a745;--view-cancelbtn:#dc3545;--filtertab-bg:#FFF;--messageagentbg:#e3f2fd;--shadow-color:rgba(119, 119, 119, 0.7);--admcontboxshadow:0 4px 16px var(--shadow-color);--transition:all .3s ease}
*,::before,::after{background-repeat:no-repeat;box-sizing:border-box}
a{color:var(--text)}
a,area,button,input,label,select,summary,textarea,[tabindex]{touch-action:manipulation}
body{font-family:system-ui, sans-serif;margin:0;padding:10px;padding-top:60px;background:var(--primary)}
button:focus,input:focus,select:focus,textarea:focus,[contenteditable]:focus{outline:0}
h2{font-weight:600;color:var(--text);font-size:1.3em;margin-bottom:15px}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}
input[type="number"]{-moz-appearance:textfield}
select{background:var(--lightcolor);color:var(--secondary);font-weight:bold;border:1px solid var(--bordercolor);padding:5px 10px;border-radius:4px}
table{border-collapse:collapse}
table.channel{margin-top:-16px}
table.channel th{font-size:.8em;font-weight:normal}
table.channel th,table.channel td{text-align:center;white-space:nowrap;width:160px}
table.products div{margin:.2rem 0}
table.products img{max-width:initial;height:133px}
.action-btn{background:var(--accentdark);border:none;color:var(--text);padding:8px 15px;border-radius:4px;cursor:pointer;margin:0 5px;transition:var(--transition);display:inline-flex;align-items:center;gap:8px;font-weight:500;flex:1;min-width:150px}
.action-btn-small{background:transparent;color:var(--secondary);border:none;cursor:pointer;margin-right:5px;padding:5px;border-radius:4px;transition:all .3s ease}
.action-btn-small svg{width:20px;height:20px}
.action-btn-small:hover{color:var(--accentdark);transform:scale(1.3)}
.action-btn:hover{background:var(--accent)}
.action-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.action-select{padding:8px;border-radius:4px;border:1px solid var(--bordercolor)}
.admin-bar{position:fixed;top:0;left:0;right:0;height:60px;background:var(--accentdark);color:white;padding:0 15px;display:flex;align-items:center;gap:15px;z-index:1001;box-shadow:0 4px 10px rgba(0, 0, 0, .1)}
.admin-bar input option,.admin-bar select option{color:var(--text)}
.admin-bar input,.admin-bar select{width:100px;padding:10px;border:none;border-radius:4px;background:rgba(255, 255, 255, .4);color:white;transition:all .3s ease;cursor:pointer}
.admin-bar input::placeholder{color:black}
.admin-bar-actions{gap:10px;margin-left:auto}
.admin-bar-actions a{color:white;text-decoration:none;padding:8px 16px;margin:5px;border-radius:4px;background:rgba(255, 255, 255, .1);white-space:nowrap}
.admin-bar-search{flex:0 0 40px;transition:all .3s ease;position:relative;z-index:1002}
.admin-bar-search.active{position:absolute;left:60px}
.admin-bar-search.active input{width:250px;padding:8px 8px 8px 35px;background:rgba(255, 255, 255, .9);color:var(--text)}
.admin-bar-search.hidden{display:none}
.admin-container{margin:20px auto;max-width:1400px;background:var(--primary);color:var(--text);padding:15px;border-radius:12px;box-shadow:var(--admcontboxshadow);transition:margin-left .3s}
.admin-header{margin:-15px -15px 10px;padding:0 10px;background:var(--lightcolor);color:var(--text);border-radius:12px 12px 0 0;display:flex;justify-content:space-between;align-items:center;border-left:4px solid var(--highlight)}
.admin-header h1{font-size:133%}
.agent .message-header{text-align:right}
.alert{background-color:#ff0000}
.back-button,.action-btn{background:var(--accentdark);color:var(--lightcolor);border:none;padding:10px 20px;border-radius:6px;font-weight:500;box-shadow:0 2px 4px rgba(0, 0, 0, .1);cursor:pointer;transition:var(--transition);margin-bottom:20px;display:inline-flex;align-items:center;gap:8px}
.back-button:hover,.action-btn:hover{background:var(--accent)}
.bold{font-weight:bold}
.bottom-actions{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--bordercolor);display:flex;justify-content:flex-end}
.button-group{display:flex;gap:10px}
.button-group:not(:last-child){padding-right:15px;border-right:1px solid var(--bordercolor)}
.checkbox-label{display:flex;align-items:center;gap:.5rem;font-weight:normal}
.collapsible-content{max-height:0;overflow:hidden;transition:max-height .3s ease-out}
.collapsible-content p{margin:0 0 15px 0;line-height:1.5}
.collapsible-content.expanded{max-height:1000px}
.collapsible-header{cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;padding:10px;margin:-10px;border-radius:6px;transition:background-color .2s}
.collapsible-header:hover{background-color:var(--content-bg)}
.collapsible-icon{transition:transform .3s ease;font-size:18px}
.collapsible-icon.expanded{transform:rotate(180deg)}
.comment{margin-bottom:15px;padding:15px;border-radius:6px;position:relative}
.comment-form{margin-bottom:20px}
.comment-form select,.comment-form textarea{width:100%;margin-bottom:10px;padding:8px;border:1px solid var(--bordercolor);border-radius:4px}
.comment-form textarea{min-height:100px}
.comment-list{border-top:1px solid var(--bordercolor);padding-top:20px}
.comment-meta{font-weight:bold}
.comment-submit{background:var(--accentdark);color:white;border:none;padding:8px 16px;border-radius:4px;cursor:pointer}
.comment-type-indicator{position:absolute;top:10px;right:10px;font-size:.8em;padding:2px 6px;border-radius:3px}
.comment.customer-comment{background-color:var(--bg-highlight);border-left:4px solid var(--attention-highlight)}
.comment.customer-comment .comment-type-indicator{background:var(--attention-highlight);color:var(--text)}
.comment.internal-comment{background-color:var(--content-bg);border-left:4px solid var(--accentdark)}
.comment.internal-comment .comment-type-indicator{background:var(--accentdark);color:white}
.container{max-width:1400px;margin:0 auto;padding:24px;box-sizing:border-box;height:auto;min-height:calc(100vh - 20px)}
.content-section{background:white;border-radius:8px;padding:1.5rem;box-shadow:0 2px 4px rgba(0,0,0,.05)}
.conversation{background:var(--lightcolor);border-radius:8px;padding:20px;margin-bottom:20px;border:1px solid var(--bordercolor);box-shadow:0 2px 8px rgba(0, 0, 0, .03)}
.conversation-thread{padding-right:10px;overflow:visible}
.customer .customer-image img{width:100%;border-radius:8px;box-shadow:0 2px 4px rgba(0, 0, 0, .1)}
.customer .customer-images{display:grid;grid-template-columns:repeat(auto-fit, minmax(75px, 1fr));gap:15px;margin-top:15px}
.customer .message-header{text-align:left}
.customer-image-label{display:block;font-size:.9em;color:var(--text);margin-bottom:5px}
.detail-row{display:flex;justify-content:space-between;margin-bottom:8px}
.discount-code{font-size:1rem;padding:.5rem;border:1px solid var(--bordercolor);border-radius:4px}
.filter-tab{color:var(--text);border:1px solid var(--bordercolor);border-radius:4px;padding:10px;background-color:var(--filtertab-bg);cursor:pointer;margin:10px 10px 10px 0px;transition:background .3s ease}
.filter-tab.active{background:var(--accent);color:white;border-color:var(--highlight)}
.filter-tab:hover{background:var(--accentdark);color:var(--lightcolor)}
.filters{margin-bottom:15px;display:flex;gap:10px}
.flex{display:flex}
.flex.auto > *{flex:auto}
.flex.gap{gap:1rem}
.flex.row{flex-direction:column}
.flex.wrap{flex-wrap:wrap}
.fontSize85prcnt{font-size:85%}
.fontWeightNormal{font-weight:normal}
.form-group{display:flex;gap:1rem;margin-bottom:1.5rem}
.form-group label{display:block;margin-bottom:.5rem;font-weight:500;min-width:150px;max-width:200px}
.form-input,.form-select{width:95%;padding:.5rem;border:1px solid var(--bordercolor);border-radius:4px;font-size:1rem;max-width:1050px}
.form-select-sales{width:200px}
.grow{flex-grow:1}
.hamburger-menu{position:fixed;left:-220px;top:60px;width:220px;height:calc(100% - 60px);background:var(--accentdark);transition:.3s;z-index:1000;overflow-y:auto}
.hamburger-menu.active{left:0}
.header-content{padding:1.5rem}
.help-text{display:block;margin-top:.25rem;font-size:.875rem;color:#777}
.icon{background-image:url(/icons.png?.2);background-position-y:bottom;display:inline-block;overflow:hidden;padding:0;width:16px;height:16px}
.icon.analytics{background-position-x:-168px}
.icon.categories{background-position-x:-152px}
.icon.clients{background-position-x:-136px}
.icon.dashboard{background-position-x:-120px}
.icon.invert{filter:invert(1)}
.icon.orders{background-position-x:-104px}
.icon.paper-plane{background-position-x:-80px;width:24px;height:24px}
.icon.products{background-position-x:-64px}
.icon.reports{background-position-x:-48px}
.icon.returns{background-position-x:-32px}
.icon.sizes{background-position-x:-16px}
.intcomment-text {padding-bottom:5px;border-bottom:1px solid var(--bordercolor)}
.issue-indicator{position:relative}
.issue-indicator::after{content:'2';position:absolute;top:-8px;right:-8px;background:var(--urgent);color:white;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:bold;border:2px solid var(--accentdark)}
.listing-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--bordercolor);border-radius:8px;grid-template-columns:1fr 300px;gap:20px}
.listing-table img{width:195px}
.listing-table tbody tr:hover{background-color:var(--content-bg);border-left:4px solid var(--highlight)}
.listing-table td{padding:12px 15px;border-bottom:1px solid var(--bordercolor);vertical-align:top}
.listing-table th{color:var(--text);padding:12px 15px;text-align:left;white-space:nowrap}
.listing-table thead{position:sticky;top:60px;background:var(--lightcolor);z-index:99;border-bottom:1px solid var(--bordercolor)}
.listing-table thead tr{border-left:4px solid var(--highlight)}
.menu-items{padding:20px 0;margin:0;list-style:none}
.menu-items a{color:white;text-decoration:none;padding:12px 15px;display:flex;border-left:4px solid transparent;align-items:center;gap:12px}
.menu-items a:hover,.menu-items a.active{background:var(--highlight);border-left-color:white}
.menu-toggle{background:transparent;border:none;cursor:pointer;margin-right:5px}
.menu-toggle span{display:block;width:25px;height:3px;background:white;margin:4px 0;transition:.3s}
.menu-toggle-container{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:white;font-size:12px}
.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px, 5px)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px, -5px)}
.message{max-width:80%;margin-bottom:20px;padding:15px;border-radius:12px;position:relative;border:1px solid var(--highlight);margin-top:0}
.message-header{margin-bottom:8px;font-size:.9em;color:var(--text)}
.message.agent{margin-left:auto;margin-right:0;background-color:var(--messageagentbg)}
.message.customer{margin-left:0;margin-right:auto}
.message:hover{background-color:inherit}
.metadata-item{display:block;padding:12px 0;color:var(--text);line-height:1.5}
.metadata-item a{text-decoration:none;color:var(--accent)}
.metadata-item a:hover{text-decoration:underline}
.modal{display:none;background:white;padding:20px;border-radius:8px;max-width:500px;width:90%;box-shadow:0 4px 12px rgba(0, 0, 0, .15)}
.modal-close{background:transparent;border:none;font-size:20px;cursor:pointer;color:var(--text)}
.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--bordercolor);margin-bottom:15px}
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .5);display:flex;justify-content:center;align-items:center}
.nav-group h2{font-size:1rem;margin-bottom:1rem}
.nav-links{list-style:none;padding:0;margin:0;display:flex;gap:1rem}
.nav-links a{background:var(--bordercolor);display:block;padding:.75rem 1rem;color:var(--text);text-decoration:none;border-radius:4px}
.nav-links a:hover,.nav-links a.active{background:var(--accentdark);color:var(--primary)}
.noPadding{padding:0!important}
.order-comments{margin-top:50px;border-top:2px solid var(--bordercolor)}
.order-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));margin-bottom:30px}
.order-item{padding:8px;border-radius:4px}
.order-item:nth-child(even){background-color:var(--primary)}
.order-items{margin-top:30px}
.order-section{padding:5px;border-radius:8px;box-shadow:0 2px 4px rgba(0, 0, 0, .05)}
.order-section h3{margin:0 0 15px 0;padding-bottom:10px;border-bottom:1px solid var(--bordercolor)}
.ordernote .order-details{border:1px solid var(--urgent)}
.orders-section{background:white;padding:15px;border-radius:8px;box-shadow:0 2px 8px rgba(0, 0, 0, .1)}
.orders-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--bordercolor);border-radius:8px;margin-top:20px}
.orders-table tbody tr:hover{background-color:var(--content-bg);border-left:4px solid var(--highlight)}
.orders-table td{padding:12px 15px;border-bottom:1px solid var(--bordercolor)}
.orders-table th{color:var(--text);padding:12px 15px;text-align:left;background:var(--lightcolor);border-bottom:1px solid var(--bordercolor)}
.overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, .5);backdrop-filter:blur(3px);z-index:1001}
.overlay.active{display:block}
.priority{padding:6px 16px;border-radius:20px;color:var(--lightcolor);font-weight:500;letter-spacing:.3px;background:var(--urgent);white-space:nowrap;display:inline-flex;align-items:center}
.priority.high{background:var(--urgent)}
.priority.normal{background:var(--success)}
.product-image img,.customer-image img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;box-shadow:0 3px 8px rgba(0, 0, 0, .1);transition:transform .2s}
.product-image img:hover,.customer-image img:hover{transform:scale(1.02)}
.product-image,.customer-image{flex:1;min-width:75px;max-width:calc(33.33% - 7px)}
.product-images,.customer-images{display:grid;grid-template-columns:repeat(auto-fit, minmax(75px, 1fr));gap:15px;padding:10px 0;margin:15px 0}
.product-info{display:flex;flex-direction:column}
.product-info small{color:#777;margin-top:4px}
.quick-actions{margin-bottom:20px;text-align:center}
.real-time{animation:pulse 2s infinite}
.record-status{padding:6px 16px;border-radius:20px;font-weight:500;letter-spacing:.3px;background:var(--accent);color:var(--lightcolor);white-space:nowrap;display:inline-flex;align-items:center}
.refundTotalRow td{border:1px solid var(--urgent)}
.salesSummaryTD{width:265px}
.save-button{background:var(--bordercolor);color:white;border:none;padding:.75rem 1.5rem;border-radius:4px;font-size:1rem;cursor:pointer;transition:background-color .2s}
.save-button:hover{background-color:#236aa6}
.section{margin-bottom:2rem}
.section h2{font-size:1.25rem;margin-bottom:1.5rem;padding-bottom:.5rem;border-bottom:2px solid var(--bordercolor)}
.stat-icon{color:var(--accent);font-size:1.2em}
.stat-item{padding:8px 0;border-bottom:1px solid var(--primary)}
.stat-item:last-child{border-bottom:none}
.status{padding:4px 8px;border-radius:4px;font-size:.9em}
.status-badge{padding:.5rem 1rem;border-radius:50px;font-size:.875rem;font-weight:500;text-shadow:1px 1px 1px rgba(0, 0, 0, .2);display:block;transition:var(--transition);text-align:center}
.status-badge.status-completed{background-color:#e5edf9;color:#3871e0}
.status-badge.status-delivered{background-color:#7bd179;color:var(--lightcolor)}
.status-badge.status-pending{background-color:#ecf5ef;color:#28a745}
.status-badge.status-refunded{background-color:#000;color:var(--lightcolor)}
.status-badge.status-shipped{background-color:#6f95d7;color:var(--lightcolor)}
.status-badge.status-unpaid{background-color:#efeff0;color:#67896e}
.status.pending{background:var(--bg-highlight);color:#856404}
.textAlignRight{text-align:right}
.thumbnail-banner{width:160px;height:70px;background:#f5f7fa;border:1px solid var(--bordercolor);display:flex;align-items:center;justify-content:center;font-size:12px}
.ticket{background:var(--card-bg);border-radius:8px;margin-bottom:10px;padding:12px;position:relative;border:1px solid var(--secondary)}
.ticket-body{display:grid;grid-template-columns:2fr 1fr;gap:30px}
.ticket-detail{background:var(--card-bg);border-radius:12px;padding:30px;margin-bottom:20px;box-shadow:0 4px 12px rgba(0, 0, 0, .08)}
.ticket-details h3{margin:0;font-size:1em}
.ticket-details p{margin:0;font-size:.9em;opacity:.8}
.ticket-header{display:flex;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;justify-content:space-between;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--bordercolor)}
.ticket-header h1{font-size:1.6em;font-weight:600;color:var(--text);line-height:1.3;margin:0}
.ticket-list{background:var(--lightcolor);border-radius:8px;padding:20px;border:1px solid var(--bordercolor)}
.ticket-metadata,.order-details,.address-details,.customer-overview,.ticket-summary,.action-points{background:var(--lightcolor);border-radius:8px;padding:20px;margin-bottom:20px;border:1px solid var(--bordercolor);box-shadow:0 2px 8px rgba(0, 0, 0, .03)}
.ticket-record-status{display:flex;gap:15px;align-items:center;flex-wrap:nowrap}
.ticket-status{padding:4px 8px;border-radius:4px;font-size:.8em;background:var(--accent);color:var(--lightcolor)}
.ticketAIShortSummary{max-width:70%}
.ticketActionList{margin:10px 0 0 20px;padding:0;line-height:1.5}
.title-wrapper{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.top-nav{margin-bottom:2rem;border-bottom:1px solid var(--bordercolor);padding-bottom:1rem}
.totalRow{font-size:1.1em;background:var(--content-bg)}
.variants-table{width:100%}
.variants-table th{text-align:left;padding-right:5px}
.variants-table tr{border-bottom:1px solid var(--bordercolor)}
.variation-info div{margin:5px}
.widget{background:#111;border-radius:15px;flex:1 0 400px;padding:1rem;height:276px;transition:transform .3s ease}
.widget-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.widget-title{font-size:1.1em;font-weight:600}
.widget:hover{transform:translateY(-5px)}
@keyframes pulse{
0%{transform:scale(1)}
50%{transform:scale(1.02)}
100%{transform:scale(1)}}
@media (max-width:768px){
.admin-bar-search.active{right:120px}
.admin-bar-actions a{padding:8px 12px;font-size:14px}}
@media (min-width:768px){
.flex.col{flex-direction:column}
.flex.col.row{flex-direction:row}}
@media (min-width:769px){
.hamburger-menu.active ~ .admin-container{margin-left:240px;transition:margin-left .3s ease}
.hamburger-menu.active + .admin-container .listing-table{width:calc(100% - 20px);transition:width .3s ease}
.admin-container{margin-left:80px;transition:margin-left .3s ease}}
@media (prefers-color-scheme:dark){
:root{--primary:#141718;--lightcolor:#141718;--text:#a0a0a0;--filtertab-bg:#000;--content-bg:#444;--messageagentbg:#444}}
@media screen and (max-width:480px){
.container{padding:4px}
.ticket-detail{padding:12px}
.ticket-header h1{font-size:1.2em}
.product-images,.customer-images{grid-template-columns:repeat(2, 1fr)}
.message-header{flex-direction:column;gap:4px}
.ticket-record-status{flex-wrap:nowrap;gap:8px}
.metadata-item div{font-size:14px}}
@media screen and (max-width:768px){
.container{padding:8px}
.ticket-body{grid-template-columns:1fr;gap:16px}
.ticket-header{flex-direction:column;gap:12px;align-items:flex-start}
.action-buttons{flex-direction:column;gap:8px}
.action-btn{width:100%}
.product-images,.customer-images{grid-template-columns:repeat(auto-fit, minmax(120px, 1fr))}
.ticket-detail{background:var(--card-bg)}
.conversation,.ticket-metadata,.order-details{background:var(--lightcolor)}
.nav-links{flex-direction:column}
.nav-links a{margin-bottom:.5rem}
.admin-container{padding:10px;margin:10px}
.listing-cat th:nth-child(4),.listing-cat th:nth-child(5),.listing-cat th:nth-child(6),.listing-cat th:nth-child(7),.listing-cat td:nth-child(4),.listing-cat td:nth-child(5),.listing-cat td:nth-child(6),.listing-cat td:nth-child(7),.listing-orders th:nth-child(5),.listing-orders th:nth-child(6),.listing-orders td:nth-child(5),.listing-orders td:nth-child(6),.listing-returns th:nth-child(5),.listing-returns th:nth-child(6),.listing-returns th:nth-child(7),.listing-returns td:nth-child(5),.listing-returns td:nth-child(6),.listing-returns td:nth-child(7){display:none}
.thumbnail-banner{width:120px;height:60px;font-size:11px}
.listing-table th{padding:8px}
.listing-table td,.issue-indicator::after{top:-6px;right:-6px;width:18px;height:18px;font-size:11px}}