/* ============================================================
   NibbleDesk – HaloITSM-inspired Stylesheet
   ============================================================ */

:root {
  --sidebar-bg:       #005c52;
  --sidebar-dark:     #004840;
  --sidebar-width:    220px;
  --sidebar-collapsed:60px;
  --primary:          #00a693;
  --primary-hover:    #008c7b;
  --primary-light:    #e0f5f3;
  --success:          #27ae60;
  --warning:          #f39c12;
  --danger:           #e74c3c;
  --info:             #2980b9;
  --purple:           #8e44ad;
  --bg:               #f0f2f5;
  --card-bg:          #ffffff;
  --card-bg-alt:      #fafbfc;
  --card-bg-soft:     #f8fafc;
  --border:           #e0e4ea;
  --text:             #2c3e50;
  --text-muted:       #7f8c8d;
  --input-bg:         #ffffff;
  --hover-bg:         #f0faf9;
  --radius:           6px;
  --shadow:           0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:        0 4px 12px rgba(0,0,0,.1);
  --font:             -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --topbar-height:    52px;
}

:root[data-theme="dark"] {
  --sidebar-bg:       #10181d;
  --sidebar-dark:     #0b1115;
  --primary:          #2dd4bf;
  --primary-hover:    #14b8a6;
  --primary-light:    rgba(45,212,191,.14);
  --success:          #22c55e;
  --warning:          #f59e0b;
  --danger:           #f87171;
  --info:             #38bdf8;
  --purple:           #a78bfa;
  --bg:               #0b1115;
  --card-bg:          #121a20;
  --card-bg-alt:      #182229;
  --card-bg-soft:     #1d2931;
  --border:           #27343d;
  --text:             #e6edf3;
  --text-muted:       #97a6b2;
  --input-bg:         #0f171c;
  --hover-bg:         #182229;
  --shadow:           0 1px 3px rgba(0,0,0,.34),0 1px 2px rgba(0,0,0,.24);
  --shadow-md:        0 10px 24px rgba(0,0,0,.32);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);font-size:13.5px;color:var(--text);background:var(--bg)}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* APP LAYOUT */
.app-layout{display:flex;min-height:100vh}

/* SIDEBAR */
.sidebar{width:var(--sidebar-width);background:var(--sidebar-bg);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:200;transition:width .2s ease;overflow:hidden}
.sidebar.collapsed{width:var(--sidebar-collapsed)}
.sidebar.collapsed .logo-text,.sidebar.collapsed .nav-item span,.sidebar.collapsed .nav-label,.sidebar.collapsed .agent-info,.sidebar.collapsed .nav-section-label{display:none}
.sidebar.collapsed .nav-item{justify-content:center;padding:12px 0}
.sidebar.collapsed .sidebar-logo{justify-content:center;padding:16px 0}
.sidebar.collapsed .nav-item.sub{display:none}

.sidebar-logo{display:flex;align-items:center;justify-content:center;padding:0;border-bottom:1px solid rgba(255,255,255,.08);background:var(--card-bg);height:110px;flex-shrink:0}
.sidebar-logo-img{width:100%;height:110px;object-fit:contain}
.logo-icon-sm{width:34px;height:34px;background:rgba(255,255,255,.15);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;flex-shrink:0}
.logo-text{color:#fff;font-weight:700;font-size:14px;white-space:nowrap;line-height:1.2}
.logo-text small{display:block;font-weight:400;font-size:10.5px;opacity:.6;margin-top:1px}

.sidebar-nav{flex:1;padding:10px 0;overflow-y:auto}

.nav-section-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.35);padding:14px 16px 4px}

.nav-item{display:flex;align-items:center;gap:10px;padding:9px 16px;color:rgba(255,255,255,.72);font-size:13px;font-weight:500;transition:background .15s,color .15s;white-space:nowrap;cursor:pointer;position:relative}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.nav-item.active{background:rgba(255,255,255,.14);color:#fff;border-left:3px solid #fff;padding-left:13px}
.nav-item i{width:20px;text-align:center;font-size:14px;flex-shrink:0}
.nav-item .nav-badge{margin-left:auto;background:var(--primary);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;min-width:18px;text-align:center}
.nav-item.sub{padding-left:46px;font-size:12.5px;color:rgba(255,255,255,.5)}
.nav-item.sub:hover{color:rgba(255,255,255,.9)}
.nav-item.sub.active{border-left:3px solid rgba(255,255,255,.5);padding-left:43px;background:rgba(255,255,255,.08);color:#fff}

.sidebar-footer{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.1);background:var(--sidebar-dark)}
.agent-info{flex:1;min-width:0}
.agent-name{color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent-role{color:rgba(255,255,255,.45);font-size:11px}
.logout-btn{color:rgba(255,255,255,.45);padding:5px;border-radius:4px;transition:color .15s}
.logout-btn:hover{color:#fff;text-decoration:none}

/* MAIN WRAPPER */
.main-wrapper{flex:1;margin-left:var(--sidebar-width);display:flex;flex-direction:column;min-height:100vh;transition:margin-left .2s ease}
.sidebar.collapsed ~ .main-wrapper{margin-left:var(--sidebar-collapsed)}

/* TOPBAR */
.topbar{height:var(--topbar-height);background:var(--card-bg);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:12px;position:sticky;top:0;z-index:100;box-shadow:0 1px 0 rgba(0,0,0,.18)}
.sidebar-toggle{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:15px;padding:6px;border-radius:4px;transition:background .15s,color .15s;flex-shrink:0}
.sidebar-toggle:hover{background:var(--bg);color:var(--text)}

.topbar-breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted);flex:1}
.topbar-breadcrumb .crumb{color:var(--text-muted)}
.topbar-breadcrumb .crumb:hover{color:var(--primary);text-decoration:none}
.topbar-breadcrumb .sep{opacity:.4;font-size:11px}
.topbar-breadcrumb .crumb-current{color:var(--text);font-weight:600}

.topbar-right{display:flex;align-items:center;gap:8px}
.topbar-icon-btn{width:32px;height:32px;border:none;background:none;cursor:pointer;color:var(--text-muted);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;transition:background .15s,color .15s;position:relative}
.topbar-icon-btn:hover{background:var(--bg);color:var(--text)}
.theme-toggle{width:auto;min-width:32px;padding:0 10px;gap:7px;font-size:12px;font-weight:600}
.theme-toggle-label{white-space:nowrap}
.notif-dot{position:absolute;top:4px;right:4px;width:8px;height:8px;background:var(--danger);border-radius:50%;border:2px solid #fff}
.topbar-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;cursor:pointer;flex-shrink:0}

.page-title{font-size:15px;font-weight:700;color:var(--text);flex:1}
.topbar-actions{display:flex;gap:8px}

/* MAIN CONTENT */
.main-content{flex:1;padding:20px 24px}

/* CARDS */
.card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);overflow:hidden}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);background:var(--card-bg-alt)}
.card-header h3{font-size:13.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:7px}
.card-header h3 i{color:var(--primary)}
.count-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--primary-light);color:var(--primary);border-radius:10px;padding:1px 7px;font-size:11px;font-weight:700;margin-left:6px}
.mt-4{margin-top:18px}

/* STAT CARDS */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.stat-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);padding:18px 16px;display:flex;align-items:center;gap:14px;transition:transform .15s,box-shadow .15s;cursor:default}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.stat-card.teal{border-top:3px solid var(--primary)}
.stat-card.orange{border-top:3px solid #e67e22}
.stat-card.yellow{border-top:3px solid #ca8a04}
.stat-card.green{border-top:3px solid var(--success)}
.stat-card.purple{border-top:3px solid var(--purple)}
.stat-card.red{border-top:3px solid var(--danger)}
.stat-card.teal .stat-icon{background:#e0f5f3;color:var(--primary)}
.stat-card.orange .stat-icon{background:rgba(230,126,34,.15);color:#fb923c}
.stat-card.yellow .stat-icon{background:rgba(202,138,4,.15);color:#facc15}
.stat-card.green .stat-icon{background:rgba(34,197,94,.14);color:var(--success)}
.stat-card.purple .stat-icon{background:rgba(167,139,250,.14);color:var(--purple)}
.stat-card.red .stat-icon{background:rgba(248,113,113,.14);color:var(--danger)}
.stat-body{display:flex;flex-direction:column}
.stat-value{font-size:26px;font-weight:700;color:var(--text);line-height:1}
.stat-label{font-size:11.5px;color:var(--text-muted);margin-top:4px}

/* TOOLBAR */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.filter-bar{display:flex;align-items:center;gap:8px;flex:1;flex-wrap:wrap}
.search-box{position:relative;flex:1;min-width:200px;max-width:320px}
.search-box i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:12px;pointer-events:none}
.search-box input{width:100%;padding:7px 10px 7px 30px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;outline:none;transition:border .15s,box-shadow .15s;background:var(--input-bg);color:var(--text)}
.search-box input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,166,147,.12)}
.filter-bar select{padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;background:var(--input-bg);cursor:pointer;outline:none;color:var(--text)}
.filter-bar select:focus{border-color:var(--primary)}

/* TABLE */
.table-wrap{overflow-x:auto}
.ticket-table{width:100%;border-collapse:collapse}
.ticket-table thead tr{background:var(--card-bg-alt)}
.ticket-table th{padding:9px 14px;text-align:left;font-size:11.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--border);white-space:nowrap}
.ticket-table td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.ticket-table tbody tr:last-child td{border-bottom:none}
.clickable-row{cursor:pointer;transition:background .1s}
.clickable-row:hover{background:var(--hover-bg)}

.ticket-num{font-family:'SFMono-Regular',Consolas,monospace;font-size:11.5px;color:var(--primary);background:var(--primary-light);padding:2px 7px;border-radius:4px;font-weight:600}
.ticket-num.lg{font-size:13px;padding:4px 10px}
.subject-cell{max-width:280px}
.subject-text{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.source-tag{font-size:11px;color:var(--text-muted);margin-top:2px;display:flex;align-items:center;gap:3px}
.requester{display:flex;flex-direction:column}
.requester span{font-weight:500;font-size:13px}
.requester small{color:var(--text-muted);font-size:11.5px}
.time-cell{color:var(--text-muted);font-size:12px;white-space:nowrap}
.agent-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(59,91,219,.16);color:#8fb2ff;padding:3px 8px;border-radius:10px;font-size:11.5px;font-weight:500}
.unassigned{color:#bbb;font-style:italic;font-size:12px}
.empty-row{text-align:center;color:var(--text-muted);padding:60px !important;font-size:14px}

/* BADGES */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:12px;font-size:11px;font-weight:700;color:#fff;white-space:nowrap;letter-spacing:.02em;text-transform:uppercase}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius);font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s;text-decoration:none !important;white-space:nowrap}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}
.btn-ghost{background:var(--card-bg);color:var(--text);border-color:var(--border)}
.btn-ghost:hover{background:var(--hover-bg);color:var(--text)}
.btn-danger{background:var(--card-bg);color:var(--danger);border-color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-full{width:100%;justify-content:center}

/* ACTION BAR */
.action-bar{display:flex;align-items:center;gap:6px;padding:10px 18px;background:var(--card-bg);border-bottom:1px solid var(--border);flex-wrap:wrap}
.action-bar .btn{font-size:12px;padding:5px 11px}

/* ALERTS */
.alert{display:flex;align-items:flex-start;gap:10px;padding:11px 15px;border-radius:var(--radius);font-size:13.5px;margin-bottom:14px;border:1px solid transparent}
.alert i{flex-shrink:0;margin-top:1px}
.alert-error{background:rgba(248,113,113,.12);color:#fecaca;border-color:rgba(248,113,113,.32)}
.alert-success{background:rgba(34,197,94,.12);color:#bbf7d0;border-color:rgba(34,197,94,.3)}
.alert-info{background:rgba(56,189,248,.12);color:#bae6fd;border-color:rgba(56,189,248,.28)}

/* FORMS */
.form-group{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.form-group label{font-size:12.5px;font-weight:600;color:var(--text)}
.form-group input,.form-group select,.form-group textarea{padding:8px 11px;border:1px solid var(--border);border-radius:var(--radius);font-size:13.5px;font-family:var(--font);color:var(--text);background:var(--input-bg);outline:none;transition:border .15s,box-shadow .15s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,166,147,.12)}
.form-group textarea{resize:vertical;min-height:110px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.req{color:var(--danger)}
.form-card{max-width:800px}
.form-section{padding:16px 20px 0}
.section-heading{font-size:11.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--border);padding-bottom:8px}
.section-heading i{color:var(--primary)}
.new-ticket-form{padding-bottom:0}
.form-actions{display:flex;justify-content:flex-end;gap:8px;padding:16px 20px;border-top:1px solid var(--border);background:var(--card-bg-alt);margin-top:8px}

/* LOGIN */
.login-page{background:linear-gradient(145deg,#081014 0%,#102027 55%,#0f3d39 100%);display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-container{background:rgba(18,26,32,.96);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:40px 36px;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo-img{height:100px;width:auto;object-fit:contain;margin-bottom:8px}
.logo-icon{width:56px;height:56px;background:var(--primary);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;margin:0 auto 14px}
.login-logo h1{font-size:20px;color:var(--text);font-weight:700}
.login-logo p{color:var(--text-muted);font-size:13px;margin-top:4px}
.login-form .form-group label{display:flex;align-items:center;gap:6px}
.login-footer{text-align:center;color:var(--text-muted);font-size:12px;margin-top:16px}

/* BACK LINK */
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);font-size:12.5px;margin-bottom:14px;transition:color .15s}
.back-link:hover{color:var(--primary);text-decoration:none}

/* TICKET VIEW */
.ticket-layout{display:grid;grid-template-columns:1fr 268px;gap:18px;align-items:start}
.ticket-thread-col{display:flex;flex-direction:column;gap:14px}

.ticket-header-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.ticket-id-bar{background:var(--sidebar-bg);padding:10px 18px;display:flex;align-items:center;justify-content:space-between}
.ticket-id-text{font-family:'SFMono-Regular',Consolas,monospace;font-size:13px;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px}
.ticket-id-text .id-pill{background:rgba(255,255,255,.15);padding:2px 9px;border-radius:10px;font-size:12px}
.ticket-id-badges{display:flex;gap:6px}
.ticket-body-header{padding:16px 18px}
.ticket-subject{font-size:17px;font-weight:700;color:var(--text);margin-bottom:10px}
.ticket-info-row{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--text-muted)}
.ticket-info-row span{display:flex;align-items:center;gap:5px}
.ticket-info-row i{color:var(--primary)}

/* REPLY CARDS */
.reply-card{background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden}
.reply-card.agent-reply{border-left:3px solid var(--primary)}
.reply-card.customer-reply{border-left:3px solid #94a3b8}
.reply-card.original{border-left:3px solid var(--warning)}
.reply-card.private{border-left:3px solid var(--purple);background:rgba(167,139,250,.08)}
.reply-header{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--border);background:var(--card-bg-alt)}
.reply-avatar{width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.reply-avatar.customer{background:#64748b}
.reply-avatar.lg{width:42px;height:42px;font-size:15px}
.reply-sender{flex:1;display:flex;flex-direction:column;gap:1px}
.reply-sender strong{font-size:13px}
.reply-sender span{font-size:11.5px;color:var(--text-muted)}
.reply-time{font-size:11.5px;color:var(--text-muted);white-space:nowrap}
.reply-body{padding:14px 16px;font-size:13.5px;line-height:1.65;white-space:pre-wrap;word-break:break-word}
.private-tag{display:inline-flex;align-items:center;gap:4px;background:rgba(167,139,250,.18);color:#ddd6fe;padding:2px 7px;border-radius:10px;font-size:10.5px;font-weight:700;text-transform:uppercase}

/* REPLY FORM */
.reply-form-card{overflow:visible}
.reply-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--card-bg-alt)}
.reply-tab{display:flex;align-items:center;gap:6px;padding:10px 16px;border:none;background:transparent;font-size:12.5px;font-weight:600;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.reply-tab:hover{color:var(--text)}
.reply-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.reply-tab.private-active{color:var(--purple);border-bottom-color:var(--purple)}
.reply-textarea{width:100%;padding:13px 16px;border:none;border-bottom:1px solid var(--border);font-size:13.5px;font-family:var(--font);resize:vertical;outline:none;min-height:130px;background:var(--input-bg);color:var(--text)}
.reply-footer{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;gap:10px;flex-wrap:wrap;background:var(--card-bg-alt)}
.reply-footer-left{display:flex;align-items:center;gap:8px}
.status-after-label{font-size:12px;color:var(--text-muted)}
.select-sm{padding:5px 9px;border:1px solid var(--border);border-radius:var(--radius);font-size:12.5px;background:var(--input-bg);color:var(--text);cursor:pointer;outline:none}

/* TICKET SIDEBAR */
.ticket-sidebar-col{display:flex;flex-direction:column;gap:14px}
.prop-card{padding:0}
.prop-title{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;padding:12px 14px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;background:var(--card-bg-alt)}
.prop-title i{color:var(--primary)}
.prop-form{padding:10px 14px;border-bottom:1px solid var(--border)}
.prop-form:last-child{border-bottom:none}
.prop-form label{display:block;font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}
.prop-form select{width:100%;padding:6px 9px;border:1px solid var(--border);border-radius:var(--radius);font-size:12.5px;background:var(--input-bg);color:var(--text);cursor:pointer;outline:none;transition:border .15s}
.prop-form select:focus{border-color:var(--primary)}
.prop-detail{padding:12px 14px}
.requester-big{display:flex;align-items:center;gap:10px}
.requester-big div{display:flex;flex-direction:column;gap:3px;font-size:13px}
.requester-big a{font-size:12px;color:var(--primary)}
.info-list{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;font-size:12px}
.info-list dt{color:var(--text-muted);font-weight:500}
.info-list dd{color:var(--text);word-break:break-word}

/* COLOUR PICKER */
.color-picker{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0}
.color-swatch-label{cursor:pointer;margin:0}
.color-swatch-label input[type="radio"]{display:none}
.color-swatch{display:block;width:26px;height:26px;border-radius:50%;border:3px solid transparent;transition:transform .15s,border-color .15s}
.color-swatch-label input[type="radio"]:checked + .color-swatch{border-color:var(--text);transform:scale(1.2)}
.color-swatch:hover{transform:scale(1.15)}

/* TICKET META */
.ticket-meta-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.ticket-badges{display:flex;gap:6px;flex-wrap:wrap}

/* SCROLLBAR */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#3a4a55;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#546877}

/* RESPONSIVE */
@media(max-width:960px){
  .sidebar{width:var(--sidebar-collapsed)}
  .sidebar .logo-text,.sidebar .nav-item span,.sidebar .agent-info,.sidebar .nav-section-label{display:none}
  .sidebar .nav-item{justify-content:center;padding:12px 0}
  .sidebar .sidebar-logo{justify-content:center;padding:16px 0}
  .main-wrapper{margin-left:var(--sidebar-collapsed)}
  .ticket-layout{grid-template-columns:1fr}
  .ticket-sidebar-col{order:-1}
  .stats-grid{grid-template-columns:repeat(3,1fr)}
  .form-row{grid-template-columns:1fr}
}
@media(max-width:600px){
  .main-content{padding:14px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .toolbar{flex-direction:column;align-items:stretch}
  .filter-bar{flex-direction:column}
  .search-box{max-width:100%}
  .topbar-breadcrumb{display:none}
  .theme-toggle-label{display:none}
}