/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg-primary: #ffffff; --bg-secondary: #f5f5f4; --bg-tertiary: #eeece8;
  --text-primary: #1a1a18; --text-secondary: #5f5e5a; --text-tertiary: #888780;
  --border-light: rgba(26,26,24,.12); --border-medium: rgba(26,26,24,.22);
  --border-info: #b5d4f4;
  --blue-50:#e6f1fb; --blue-100:#b5d4f4; --blue-400:#378add; --blue-600:#185fa5; --blue-800:#0c447c;
  --green-50:#eaf3de; --green-600:#3b6d11; --green-800:#27500a;
  --amber-50:#faeeda; --amber-600:#ba7517; --amber-800:#633806;
  --red-50:#fcebeb; --red-600:#a32d2d; --red-800:#791f1f;
  --purple-50:#eeedfe; --purple-800:#3c3489;
  --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow-md: 0 4px 12px rgba(0,0,0,.1);
}
body { font-family:var(--font); background:var(--bg-tertiary); color:var(--text-primary); font-size:14px; line-height:1.6; min-height:100vh; }
.screen { display:none; } .screen.active { display:block; }
.card { background:var(--bg-primary); border:0.5px solid var(--border-light); border-radius:var(--radius-lg); padding:1.25rem; }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--radius-md); border:0.5px solid var(--border-medium); background:transparent; color:var(--text-primary); font-size:14px; font-family:var(--font); cursor:pointer; transition:background .15s; }
.btn:hover { background:var(--bg-secondary); }
.btn-primary { background:var(--blue-600); color:var(--blue-50); border-color:var(--blue-600); }
.btn-primary:hover { background:var(--blue-800); border-color:var(--blue-800); color:var(--blue-50); }
.btn-sm { padding:5px 12px; font-size:13px; } .btn-xs { padding:3px 10px; font-size:12px; } .btn-full { width:100%; justify-content:center; }

/* FORMS */
label { font-size:13px; color:var(--text-secondary); display:block; margin-bottom:4px; }
input[type=text],input[type=password],input[type=email],textarea,select { width:100%; font-family:var(--font); font-size:14px; padding:9px 12px; border:0.5px solid var(--border-medium); border-radius:var(--radius-md); background:var(--bg-primary); color:var(--text-primary); outline:none; transition:border-color .15s,box-shadow .15s; }
input:focus,textarea:focus,select:focus { border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(24,95,165,.12); }
textarea { resize:vertical; min-height:90px; line-height:1.6; }
.form-group { display:flex; flex-direction:column; gap:4px; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* BADGES */
.badge { display:inline-flex; align-items:center; font-size:11px; font-weight:500; padding:3px 9px; border-radius:20px; }
.b-bug  { background:var(--red-50);    color:var(--red-800); }
.b-wish { background:var(--purple-50); color:var(--purple-800); }
.b-module { background:var(--bg-secondary); color:var(--text-secondary); }
.spill { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:500; padding:3px 9px; border-radius:20px; }
.spill .dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.sp-new  { background:var(--blue-50);   color:var(--blue-800); }  .sp-new  .dot { background:var(--blue-600); }
.sp-open { background:var(--amber-50);  color:var(--amber-800); } .sp-open .dot { background:var(--amber-600); }
.sp-done { background:var(--green-50);  color:var(--green-800); } .sp-done .dot { background:var(--green-600); }
.sp-unread { background:var(--blue-600); color:var(--blue-50); }  .sp-unread .dot { background:var(--blue-50); }
.nav-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; border-radius:9px; font-size:10px; font-weight:500; padding:0 5px; background:var(--bg-secondary); color:var(--text-secondary); border:0.5px solid var(--border-light); }
.nb-urgent { background:var(--red-50); color:var(--red-800); border-color:#f09595; }
.nb-muted { background:var(--bg-secondary); color:var(--text-secondary); border-color:var(--border-light); }
.reply-pill { display:inline-flex; align-items:center; gap:5px; background:var(--blue-600); color:var(--blue-50); font-size:11px; font-weight:500; padding:3px 9px; border-radius:20px; }
.reply-pill svg { width:11px; height:11px; fill:none; stroke:var(--blue-50); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* AVATAR */
.avatar { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-weight:500; flex-shrink:0; background:var(--blue-50); color:var(--blue-800); }
.av-md { width:36px; height:36px; font-size:13px; } .av-sm { width:28px; height:28px; font-size:10px; } .av-xs { width:22px; height:22px; font-size:9px; flex-shrink:0; }
.udot { width:8px; height:8px; border-radius:50%; background:var(--blue-600); flex-shrink:0; display:inline-block; }

/* TOAST */
.toast { position:fixed; bottom:28px; right:28px; padding:10px 20px; border-radius:var(--radius-md); font-size:14px; font-weight:500; opacity:0; pointer-events:none; z-index:9999; transition:opacity .3s,transform .3s; transform:translateY(8px); box-shadow:var(--shadow-md); }
.toast.show { opacity:1; transform:translateY(0); }
.toast-info, .toast-success { background:var(--blue-600); color:var(--blue-50); }
.toast-error { background:var(--red-600); color:#fff; }

/* FILES */
.files-preview { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.file-tag { display:inline-flex; align-items:center; gap:4px; background:var(--bg-secondary); border:0.5px solid var(--border-light); border-radius:var(--radius-sm); padding:3px 8px; font-size:12px; color:var(--text-secondary); }
.file-size { color:var(--text-tertiary); }
.attach-link { display:inline-flex; align-items:center; gap:4px; background:var(--bg-secondary); border:0.5px solid var(--border-light); border-radius:var(--radius-sm); padding:3px 8px; font-size:12px; color:var(--blue-600); text-decoration:none; margin-right:4px; }
.attach-link:hover { background:var(--blue-50); }

/* PERIOD BTNS */
.period-btns { display:flex; gap:4px; }
.period-btn { padding:5px 11px; font-size:12px; border-radius:var(--radius-md); border:0.5px solid var(--border-medium); background:transparent; color:var(--text-secondary); cursor:pointer; font-family:var(--font); }
.period-btn.active { background:var(--bg-secondary); color:var(--text-primary); font-weight:500; }

/* LOGIN */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem; background:var(--bg-secondary); }
.login-box { width:100%; max-width:380px; }
.login-logo { text-align:center; margin-bottom:1.5rem; padding-bottom:1.25rem; border-bottom:0.5px solid var(--border-light); }
.login-logo-icon { width:52px; height:52px; border-radius:var(--radius-lg); background:var(--blue-600); color:var(--blue-50); display:inline-flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:.75rem; }
.login-logo h1 { font-size:20px; font-weight:600; letter-spacing:.1em; } .login-logo p { font-size:13px; color:var(--text-secondary); margin-top:2px; }
.login-card { background:var(--bg-primary); border-radius:var(--radius-xl); border:0.5px solid var(--border-light); padding:2rem; box-shadow:0 4px 24px rgba(0,0,0,.08); display:flex; flex-direction:column; gap:16px; }
.login-error { font-size:13px; color:var(--red-600); text-align:center; display:none; }
.login-demo { margin-top:1rem; font-size:12px; color:var(--text-secondary); line-height:2; }
.login-demo strong { color:var(--text-primary); }

/* CLIENT PORTAL */
.client-wrap { max-width:740px; margin:0 auto; padding:1.5rem 1rem; }
.client-nav { background:var(--bg-primary); border:0.5px solid var(--border-light); border-radius:var(--radius-lg); padding:.75rem 1.25rem; display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; box-shadow:var(--shadow-sm); }
.client-nav-logo { font-size:15px; font-weight:600; display:flex; align-items:center; gap:8px; }
.client-nav-logo span { width:28px; height:28px; border-radius:var(--radius-sm); background:var(--blue-600); color:var(--blue-50); display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.client-nav-right { display:flex; align-items:center; gap:10px; }
.client-nav-user { font-size:13px; color:var(--text-secondary); }
.client-tabs { display:flex; gap:4px; background:var(--bg-secondary); border-radius:var(--radius-md); padding:4px; margin-bottom:1rem; }
.ctab { flex:1; text-align:center; padding:7px 10px; font-size:13px; cursor:pointer; border-radius:var(--radius-sm); color:var(--text-secondary); border:none; background:transparent; font-family:var(--font); display:flex; align-items:center; justify-content:center; gap:6px; }
.ctab.active { background:var(--bg-primary); color:var(--text-primary); font-weight:500; border:0.5px solid var(--border-light); box-shadow:var(--shadow-sm); }
.cnt { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; border-radius:9px; font-size:10px; font-weight:500; padding:0 5px; background:var(--bg-tertiary); color:var(--text-secondary); }
.ctab.active .cnt { background:var(--blue-50); color:var(--blue-800); }
.cnt-unread { background:var(--blue-600) !important; color:var(--blue-50) !important; }

.ticket-row { display:flex; align-items:center; gap:12px; padding:.9rem 0; border-bottom:0.5px solid var(--border-light); cursor:pointer; border-radius:var(--radius-md); transition:background .1s; }
.ticket-row:last-child { border-bottom:none; }
.ticket-row:hover { background:var(--bg-secondary); padding-left:8px; padding-right:8px; margin:0 -8px; }
.ticket-row-info { flex:1; min-width:0; }
.ticket-row-title { font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ticket-row-meta { display:flex; gap:8px; align-items:center; margin-top:4px; flex-wrap:wrap; }
.ticket-row-date { font-size:12px; color:var(--text-tertiary); }
.ticket-row-right { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
.msg-icon-wrap { position:relative; display:inline-flex; }
.msg-icon-btn { width:30px; height:30px; border-radius:50%; background:var(--bg-secondary); border:0.5px solid var(--border-light); display:flex; align-items:center; justify-content:center; }
.msg-icon-btn svg { width:14px; height:14px; fill:none; stroke:var(--text-secondary); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.msg-icon-btn.has-unread { background:var(--blue-50); border-color:var(--blue-400); }
.msg-icon-btn.has-unread svg { stroke:var(--blue-600); }
.unread-count-badge { position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; border-radius:8px; background:var(--blue-600); color:var(--blue-50); font-size:10px; font-weight:600; display:flex; align-items:center; justify-content:center; padding:0 4px; border:1.5px solid var(--bg-primary); }

.c-msg { display:flex; gap:10px; margin-bottom:1rem; }
.c-msg-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; flex-shrink:0; }
.c-msg-client .c-msg-avatar { background:var(--blue-50); color:var(--blue-800); }
.c-msg-team   .c-msg-avatar { background:var(--green-50); color:var(--green-800); }
.c-msg-bubble { background:var(--bg-secondary); border-radius:var(--radius-md); padding:10px 14px; font-size:14px; line-height:1.5; flex:1; }
.c-msg-meta { font-size:11px; color:var(--text-tertiary); margin-top:4px; }
.reply-box { margin-top:1.25rem; padding-top:1.25rem; border-top:0.5px solid var(--border-light); }
.back-link { font-size:13px; color:var(--text-secondary); cursor:pointer; display:inline-flex; align-items:center; gap:4px; margin-bottom:1rem; }
.back-link:hover { color:var(--text-primary); }
.empty-state { text-align:center; padding:3rem 1rem; color:var(--text-secondary); font-size:14px; }

/* ADMIN */
.admin-wrap { max-width:100%; margin:0 auto; padding:1rem; }
.admin-layout { display:grid; grid-template-columns:190px 1fr; background:var(--bg-primary); border:0.5px solid var(--border-light); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-md); min-height:600px; }
.a-sidebar { border-right:0.5px solid var(--border-light); display:flex; flex-direction:column; min-width:0; }
.a-sidebar-header { padding:1rem; border-bottom:0.5px solid var(--border-light); }
.a-sidebar-logo { font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; }
.a-sidebar-logo span { width:26px; height:26px; border-radius:var(--radius-sm); background:var(--blue-600); color:var(--blue-50); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.a-sidebar-user { display:flex; align-items:center; gap:8px; padding:.75rem 1rem; border-bottom:0.5px solid var(--border-light); }
.a-sidebar-nav { padding:.5rem 0; flex:1; }
.a-nav-section { font-size:10px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.07em; padding:.5rem 1rem .25rem; }
.a-nav-item { display:flex; align-items:center; justify-content:space-between; padding:7px 1rem; font-size:13px; color:var(--text-secondary); cursor:pointer; gap:8px; transition:background .1s; }
.a-nav-item:hover { background:var(--bg-secondary); color:var(--text-primary); }
.a-nav-item.active { background:var(--bg-secondary); color:var(--text-primary); font-weight:500; }
.a-nav-left { display:flex; align-items:center; gap:8px; }
.a-nav-icon { width:15px; height:15px; flex-shrink:0; opacity:.5; }
.a-nav-item.active .a-nav-icon { opacity:1; }
.a-sidebar-footer { padding:.75rem 1rem; border-top:0.5px solid var(--border-light); }
.a-content { padding:1rem 1.25rem; overflow:auto; min-width:0; }
.a-content-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.a-section-title { font-size:17px; font-weight:600; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:1.25rem; }
.metric-card { background:var(--bg-secondary); border-radius:var(--radius-md); padding:.85rem 1rem; cursor:pointer; border:0.5px solid transparent; transition:border-color .15s; }
.metric-card:hover { border-color:var(--border-light); }
.metric-card-accent { background:var(--blue-50); border:0.5px solid var(--border-info); }
.metric-card-accent:hover { background:#d4e8f8; }
.metric-label { font-size:11px; color:var(--text-secondary); margin-bottom:5px; }
.metric-value { font-size:24px; font-weight:600; }
.metric-card-accent .metric-label { color:var(--blue-800); } .metric-card-accent .metric-value { color:var(--blue-800); }
.tbl-wrap { border:0.5px solid var(--border-light); border-radius:var(--radius-lg); overflow:hidden; }
.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl th { text-align:left; font-size:11px; font-weight:600; color:var(--text-secondary); padding:8px 8px; border-bottom:0.5px solid var(--border-light); white-space:nowrap; background:var(--bg-secondary); }
.tbl th:first-child { padding-left:14px; }
.tbl td { padding:8px 8px; border-bottom:0.5px solid var(--border-light); vertical-align:middle; white-space:nowrap; }
.tbl td:nth-child(2) { white-space:normal; max-width:220px; }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:var(--bg-secondary); cursor:pointer; }
.tbl tr.row-unread td { background:rgba(24,95,165,.05); }
.tbl tr.row-unread:hover td { background:rgba(24,95,165,.09); }
.t-layout { display:grid; grid-template-columns:1fr 290px; gap:1rem; align-items:start; }
.a-msg { display:flex; gap:10px; margin-bottom:1rem; }
.a-msg-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; flex-shrink:0; }
.a-msg-client .a-msg-avatar { background:var(--blue-50);  color:var(--blue-800); }
.a-msg-team   .a-msg-avatar { background:var(--green-50); color:var(--green-800); }
.a-msg-bubble { background:var(--bg-secondary); border-radius:var(--radius-md); padding:10px 14px; font-size:13px; line-height:1.5; flex:1; }
.a-msg-bubble.needs-reply { border-left:3px solid var(--blue-600); }
.a-msg-meta { font-size:11px; color:var(--text-tertiary); margin-top:4px; }
.needs-reply-tag { color:var(--blue-600); font-weight:500; }
.filter-bar { display:flex; gap:8px; align-items:center; margin-bottom:1rem; flex-wrap:wrap; }
.filter-bar input,.filter-bar select { width:auto; padding:7px 10px; font-size:13px; }
.filter-bar input { max-width:200px; }
.dash-item { display:flex; align-items:flex-start; gap:8px; padding:8px 0; border-bottom:0.5px solid var(--border-light); cursor:pointer; }
.dash-item:last-child { border-bottom:none; }
.dash-item-text { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-item-sub { font-size:11px; color:var(--text-secondary); margin-top:2px; }

/* RESPONSIVE */
@media(max-width:640px) {
  .row2,.metric-grid { grid-template-columns:1fr 1fr; }
  .admin-layout { grid-template-columns:1fr; }
  .a-sidebar { display:none; }
  .t-layout { grid-template-columns:1fr; }
}

/* Pulse animation for new/updated tickets */
@keyframes ticketPulse {
  0%   { background-color: transparent; }
  20%  { background-color: rgba(83, 74, 183, 0.08); }
  60%  { background-color: rgba(83, 74, 183, 0.05); }
  100% { background-color: transparent; }
}
.ticket-row-pulse {
  animation: ticketPulse 2s ease-in-out forwards;
  border-radius: var(--radius-md);
}

/* Admin table status cell - prevent wrap */
.tbl td .spill { display:inline-flex; }
.tbl td > div[style*="flex-direction:column"] { min-width:90px; }

/* Fluid table on wide screens */
.tbl-wrap { overflow-x:auto; }
.admin-layout { min-height:calc(100vh - 2rem); }
.a-content { min-width:0; overflow-x:auto; }

/* Client portal wider on big screens */
.client-wrap { max-width:900px; }

/* Responsive fixes */
@media (max-width:900px) {
  .admin-layout { grid-template-columns:180px 1fr; }
  .t-layout { grid-template-columns:1fr; }
  .metric-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:700px) {
  .admin-layout { grid-template-columns:1fr; }
  .a-sidebar { display:none; }
  .tbl th:nth-child(4),.tbl td:nth-child(4),
  .tbl th:nth-child(7),.tbl td:nth-child(7) { display:none; }
}

/* Resizable column handle */
.col-resize-handle {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 10;
  background: transparent;
  transition: background .15s;
}
.col-resize-handle::after {
  content: '';
  position: absolute;
  right: 2px; top: 20%; bottom: 20%;
  width: 1px;
  background: var(--border-medium);
  border-radius: 1px;
  transition: background .15s;
}
.col-resize-handle:hover::after,
.col-resize-handle:active::after {
  background: var(--blue-400);
}
.tbl thead th { overflow: hidden; }
.tbl { table-layout: fixed; width: 100%; }

/* Pending approval status */
.sp-pending { background:#FFF8E1; color:#F57F17; }
.sp-pending .dot { background:#FFA000; }

/* ===== PROFILE MENU ===== */
.profile-menu-wrap { position:relative; }
.profile-menu-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:none; cursor:pointer;
  font-family:var(--font); padding:4px 6px;
  border-radius:var(--radius-md);
  transition:background .15s;
}
.profile-menu-btn:hover { background:var(--bg-secondary); }
.profile-name-sm { font-size:13px; color:var(--text-secondary); }
.profile-dots { font-size:20px; color:var(--text-tertiary); line-height:1; user-select:none; }

.profile-avatar-sm {
  width:32px; height:32px; border-radius:50%;
  background:var(--blue-50); color:var(--blue-800);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; flex-shrink:0;
  overflow:hidden;
}
.profile-avatar-sm img { width:100%; height:100%; object-fit:cover; }

.profile-dropdown {
  position:absolute; top:calc(100% + 6px); right:0;
  min-width:200px;
  background:var(--bg-primary);
  border:0.5px solid var(--border-light);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  z-index:500;
  overflow:hidden;
}
.profile-dropdown-sidebar {
  position:relative; top:0; right:auto; left:0;
  margin:0 0 .5rem;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}
.pd-item {
  padding:10px 14px; font-size:13px; color:var(--text-primary);
  cursor:pointer; transition:background .1s;
}
.pd-item:hover { background:var(--bg-secondary); }
.pd-header {
  font-size:12px; color:var(--text-secondary);
  cursor:default; padding:10px 14px 8px;
  line-height:1.5;
}
.pd-header:hover { background:transparent; }
.pd-divider { height:0.5px; background:var(--border-light); }
.pd-danger { color:var(--red-600); }
.pd-danger:hover { background:var(--red-50); }

/* Profile modal */
#profile-modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.45); z-index:1000;
  align-items:center; justify-content:center;
}
#profile-modal-overlay.open { display:flex; }

/* Categories table - auto layout to prevent text clipping */
#sa-cats-it-tbody ~ *, #sa-cats-1c-tbody,
#sa-cats-it-tbody, #sa-cats-1c-tbody {
  /* reset */
}
.sa-cats-table {
  table-layout: auto !important;
  width: 100%;
}

/* Close ticket modal */
.close-reason-btn {
  border: 0.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 14px;
  transition: background .15s, border-color .15s;
}
.close-reason-btn:hover { background: var(--bg-secondary); border-color: var(--border-medium); }
.close-reason-btn.active { background: var(--blue-50); border-color: var(--blue-400); color: var(--blue-800); font-weight: 500; }

/* Profile menu */
.profile-menu-wrap{position:relative;}
.profile-menu-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:none;
  cursor:pointer;font-family:var(--font);padding:4px 6px;border-radius:var(--radius-md);transition:background .15s;}
.profile-menu-btn:hover{background:var(--bg-secondary);}
.profile-name-sm{font-size:13px;color:var(--text-secondary);}
.profile-dots{font-size:20px;color:var(--text-tertiary);line-height:1;user-select:none;}
.profile-avatar-sm{width:32px;height:32px;border-radius:50%;background:var(--blue-50);color:var(--blue-800);
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0;overflow:hidden;}
.profile-avatar-sm img{width:100%;height:100%;object-fit:cover;}
.profile-dropdown{position:absolute;top:calc(100% + 6px);right:0;min-width:210px;
  background:var(--bg-primary);border:0.5px solid var(--border-light);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);z-index:500;overflow:hidden;}
.profile-dropdown-sidebar{position:relative;top:0;right:auto;left:0;margin:0 0 .5rem;
  border-radius:var(--radius-md);box-shadow:var(--shadow-sm);}
.pd-item{padding:10px 14px;font-size:13px;color:var(--text-primary);cursor:pointer;transition:background .1s;}
.pd-item:hover{background:var(--bg-secondary);}
.pd-header{font-size:12px;color:var(--text-secondary);cursor:default;padding:10px 14px 8px;line-height:1.5;}
.pd-header:hover{background:transparent;}
.pd-divider{height:0.5px;background:var(--border-light);}
.pd-danger{color:var(--red-600);}
.pd-danger:hover{background:var(--red-50);}
.close-reason-btn{border:0.5px solid var(--border-light);border-radius:var(--radius-md);
  padding:10px 14px;font-size:14px;transition:background .15s,border-color .15s;text-align:left;justify-content:flex-start;}
.close-reason-btn:hover{background:var(--bg-secondary);border-color:var(--border-medium);}
.close-reason-btn.active{background:var(--blue-50);border-color:var(--blue-400);color:var(--blue-800);font-weight:500;}
.sp-pending{background:#FFF8E1;color:#F57F17;}
.sp-pending .dot{background:#FFA000;}
.col-resize-handle{position:absolute;right:0;top:0;bottom:0;width:6px;cursor:col-resize;z-index:10;}
.col-resize-handle::after{content:'';position:absolute;right:2px;top:20%;bottom:20%;width:1px;background:var(--border-medium);border-radius:1px;}
.col-resize-handle:hover::after{background:var(--blue-400);}
@keyframes ticketPulse{0%{background-color:transparent;}20%{background-color:rgba(83,74,183,.08);}60%{background-color:rgba(83,74,183,.04);}100%{background-color:transparent;}}
.ticket-row-pulse{animation:ticketPulse 2s ease-in-out forwards;border-radius:var(--radius-md);}

/* Alternating table rows */
.tbl tbody tr:nth-child(even) { background:var(--bg-secondary); }
.tbl tbody tr:nth-child(even):hover { background:var(--bg-tertiary); }
.tbl tbody tr.row-unread:nth-child(even) { background:rgba(24,95,165,.07); }

/* ===== REGISTRATION SCREEN ===== */
.reg-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: linear-gradient(135deg, #f0f4ff 0%, #f5f5f4 50%, #eef4f0 100%);
}

.reg-box {
  width: 100%;
  max-width: 520px;
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 24px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  padding: 2rem;
  border: 0.5px solid var(--border-light);
}

.reg-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 0.5px solid var(--border-light);
}