:root{
  --bg:#f6faff;
  --panel:#ffffff;
  --text:#14223a;
  --muted:#718096;
  --border:#dce8f5;
  --blue:#5b98e8;
  --blue-dark:#3e7fd4;
  --blue-soft:#eaf4ff;
  --blue-pale:#f4f9ff;
  --shadow:0 18px 50px rgba(49,93,145,.10);
  --success:#23856d;
  --success-soft:#e9f8f3;
  --warning:#a86a15;
  --warning-soft:#fff6e7;
  --danger:#c94b55;
  --danger-soft:#fff0f1;
}
*{box-sizing:border-box}
html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
body{margin:0;min-height:100%;background:linear-gradient(180deg,#fbfdff 0%,#f4f9ff 100%)}
body.modal-open{overflow:hidden}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.app-shell{min-height:100vh}

/* Login */
.login-page{min-height:100vh;display:grid;place-items:center;padding:30px 20px}
.login-panel{width:min(100%,470px);text-align:center;padding:42px 26px 36px}
.brand-mark{display:flex;justify-content:center;margin-bottom:24px}
.umk-logo{width:94px;height:auto;display:block}
.login-copy h1{margin:0 0 10px;font-size:34px;letter-spacing:-.035em}
.section-name{margin:0;color:#46566e;font-size:15px;font-weight:650}
.office-name{margin:6px 0 30px;color:var(--muted);font-size:13.5px}
.google-wrap{display:flex;justify-content:center;min-height:44px}
.login-state{min-height:20px;margin-top:14px;font-size:13px;color:var(--danger)}
.loading-overlay{position:fixed;inset:0;background:rgba(246,250,255,.72);backdrop-filter:blur(7px);display:none;place-items:center;z-index:50}
.loading-overlay.show{display:grid}
.loading-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:15px 18px;box-shadow:var(--shadow);font-size:14px;font-weight:700}

/* Common */
.spinner{display:none;width:17px;height:17px;border:2px solid rgba(255,255,255,.34);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.spinner-lg{display:inline-block;width:22px;height:22px;border-color:rgba(91,152,232,.22);border-top-color:var(--blue)}
.is-loading .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.eyebrow{margin:0;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.09em;font-weight:800}
.topbar{min-height:70px;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:10px 26px;position:sticky;top:0;z-index:20}
.brand-inline{display:flex;align-items:center;gap:11px;min-width:0}
.brand-inline>div{min-width:0}
.brand-inline strong{display:block}
.brand-inline small{display:block;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:430px}
.topbar-logo{width:34px;height:auto}
.topbar-actions{display:flex;align-items:center;gap:10px}
.user-chip{background:var(--blue-soft);color:#315f96;padding:9px 12px;border-radius:999px;font-size:13px;font-weight:650;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.role-chip{background:#172033;color:#fff;padding:8px 11px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.02em}
.logout-btn{font-size:12.5px;font-weight:700;color:#66758a;padding:9px 11px;border-radius:10px}
.logout-btn:hover{background:#f1f6fb}
.workspace{max-width:1180px;margin:0 auto;padding:34px 24px 60px}
.hero-row,.panel-head,.ticket-head{display:flex;align-items:center;justify-content:space-between;gap:18px}
.hero-row h1{margin:3px 0 0;font-size:30px;letter-spacing:-.025em}
.hero-meta{margin:7px 0 0;color:var(--muted);font-size:13px}
.btn-primary,.btn-secondary,.btn-ghost{border:0;border-radius:13px;min-height:44px;padding:0 18px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 24px rgba(91,152,232,.23)}
.btn-primary:hover{background:var(--blue-dark)}
.btn-primary:disabled{opacity:.7;cursor:default}
.btn-secondary{background:#fff;border:1px solid var(--border);color:#38506e}
.btn-ghost{background:#f3f6fa;color:#53637a}
.plus-icon{font-size:20px;font-weight:400;margin-top:-1px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0}
.stat-card{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:0 10px 28px rgba(59,93,133,.055)}
.stat-card span{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}
.stat-card strong{font-size:30px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:24px;box-shadow:0 12px 34px rgba(59,93,133,.055)}
.compact-panel{max-width:760px;margin:0 auto}
.panel-head h2,.panel-head h3{margin:3px 0 0}
.empty-state{padding:42px 18px;text-align:center;color:var(--muted)}
.empty-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;background:var(--blue-soft);color:var(--blue);font-weight:900}

/* Ticket list */
.ticket-list-panel{padding-bottom:10px}
.ticket-table-wrap{overflow-x:auto;margin:18px -8px 0}
.ticket-table{width:100%;border-collapse:collapse;min-width:760px}
.ticket-table th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#8793a7;text-align:left;font-weight:800;padding:12px 14px;border-bottom:1px solid var(--border)}
.ticket-table td{padding:15px 14px;border-bottom:1px solid #edf2f8;font-size:13px;vertical-align:middle}
.ticket-table tbody tr{transition:background .15s ease}
.ticket-table tbody tr:hover{background:#f8fbff}
.ticket-table td:first-child{font-weight:750}
.ticket-table td:first-child small{display:block;color:var(--muted);font-size:11.5px;font-weight:500;margin-top:4px}
.ticket-link{color:#2e6fb9}

/* Status */
.status-badge{display:inline-flex;align-items:center;min-height:27px;padding:4px 9px;border-radius:999px;font-size:11.5px;font-weight:750;white-space:nowrap}
.status-new{background:var(--blue-soft);color:#356fae}
.status-ack{background:#edf1ff;color:#586bb3}
.status-progress{background:#eef6ff;color:#2f71be}
.status-waiting{background:var(--warning-soft);color:var(--warning)}
.status-done{background:var(--success-soft);color:var(--success)}
.status-muted{background:#f1f3f6;color:#6b7480}

/* Report modal */
.modal-backdrop,.success-backdrop{position:fixed;inset:0;background:rgba(16,31,52,.32);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:24px;z-index:70}
.modal-backdrop.show,.success-backdrop.show{display:flex}
.report-modal{width:min(100%,700px);max-height:calc(100vh - 48px);overflow:auto;background:#fff;border:1px solid rgba(220,232,245,.9);border-radius:22px;box-shadow:0 30px 80px rgba(31,66,110,.22)}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px 26px 18px;border-bottom:1px solid #edf2f7}
.modal-header h2{margin:4px 0 0;font-size:23px}
.icon-btn{width:40px;height:40px;border:0;border-radius:12px;background:#f2f6fb;color:#526174;font-size:24px;line-height:1}
#report-form{padding:24px 26px 26px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field.full{grid-column:1 / -1}
.field>span,.field legend{font-size:12.5px;font-weight:750;color:#44536a}
.field legend{margin-bottom:8px}
.field input[type=text],.field select,.field textarea{width:100%;border:1px solid #d7e2ef;background:#fbfdff;border-radius:12px;color:var(--text);outline:none;transition:.16s ease}
.field input[type=text],.field select{height:46px;padding:0 13px}
.field textarea{padding:12px 13px;resize:vertical;min-height:128px;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#8ab8f0;box-shadow:0 0 0 4px rgba(91,152,232,.10);background:#fff}
.report-type-field{border:0;padding:0;margin:0}
.type-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.type-card{position:relative}
.type-card input{position:absolute;opacity:0;pointer-events:none}
.type-card>span{display:block;border:1px solid #dce7f3;background:#fbfdff;border-radius:14px;padding:14px;min-height:76px;transition:.15s ease}
.type-card strong{display:block;font-size:13px;margin-bottom:4px}
.type-card small{display:block;color:var(--muted);font-size:11.5px;line-height:1.35}
.type-card input:checked+span{border-color:#72a9ec;background:#eef6ff;box-shadow:0 0 0 3px rgba(91,152,232,.09)}
.field-note{font-size:11.5px;color:var(--warning)}
.upload-field input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.upload-box{border:1px dashed #b9cce2;border-radius:14px;background:#f9fcff;min-height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;color:#53637a;cursor:pointer}
.upload-box:hover{border-color:#7caeea;background:#f3f9ff}
.upload-box strong{font-size:12.5px}
.upload-box small{font-size:11px;color:#8a96a8}
.upload-icon{width:32px;height:32px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-size:18px}
.file-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.file-pill{background:#eef5fd;color:#45627f;border-radius:999px;padding:6px 9px;font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.form-error{min-height:20px;margin-top:14px;color:var(--danger);font-size:12.5px;font-weight:650}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:8px}

/* Success */
.success-card{width:min(100%,420px);background:#fff;border-radius:24px;padding:34px 30px;text-align:center;box-shadow:0 30px 80px rgba(31,66,110,.23)}
.success-check{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;background:var(--success-soft);color:var(--success);font-size:28px;font-weight:900;animation:pop .28s ease}
@keyframes pop{from{transform:scale(.72);opacity:.4}to{transform:scale(1);opacity:1}}
.success-card h2{margin:5px 0 14px;font-size:22px}
.ticket-number{font-size:18px;font-weight:850;letter-spacing:.02em;color:#2e6fb9;background:var(--blue-soft);border-radius:12px;padding:11px 14px;margin:0 auto 20px;display:inline-block}

/* Ticket detail */
.ticket-head{margin-bottom:22px}
.ticket-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ticket-head h1{margin:0;font-size:28px;letter-spacing:-.02em}
.ticket-head p{margin:6px 0 0;color:var(--muted);font-size:13px}
.ticket-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr);gap:18px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.detail-item{min-width:0}
.detail-item.full{grid-column:1/-1}
.detail-item>span,.section-label{display:block;color:#8793a7;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;margin-bottom:6px}
.detail-item strong{font-size:13.5px}
.description-item p{margin:0;line-height:1.65;font-size:14px;color:#34445b}
.attachment-section{border-top:1px solid #edf2f7;margin-top:22px;padding-top:18px}
.attachment-list{display:flex;flex-wrap:wrap;gap:8px}
.attachment-chip{display:inline-flex;background:#f3f7fb;border:1px solid #e0e9f2;border-radius:999px;padding:7px 10px;font-size:11.5px;color:#52657c}
.timeline-panel{align-self:start}
.timeline{margin-top:18px}
.timeline-item{display:grid;grid-template-columns:16px 1fr;gap:11px;position:relative;padding-bottom:22px}
.timeline-item:not(:last-child)::before{content:"";position:absolute;left:5px;top:12px;bottom:0;width:1px;background:#dce7f3}
.timeline-dot{width:11px;height:11px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--blue-soft);margin-top:3px;z-index:1}
.timeline-item strong{display:block;font-size:12.5px}
.timeline-item p{margin:6px 0;color:#58687d;font-size:12px;line-height:1.45}
.timeline-item small{display:block;margin-top:5px;color:#919cad;font-size:10.5px}

/* Toast */
.toast{position:fixed;right:22px;bottom:22px;min-width:240px;max-width:340px;background:#152238;color:#fff;border-radius:14px;padding:13px 16px;box-shadow:var(--shadow);opacity:0;transform:translateY(12px);pointer-events:none;transition:.22s ease;font-size:13px;z-index:90}
.toast.show{opacity:1;transform:translateY(0)}

@media(max-width:800px){
  .ticket-layout{grid-template-columns:1fr}
}
@media(max-width:720px){
  .login-panel{padding:28px 10px}
  .login-copy h1{font-size:30px}
  .workspace{padding:24px 16px 46px}
  .hero-row,.panel-head,.ticket-head{align-items:flex-start;flex-direction:column}
  .hero-row .btn-primary,.ticket-head .btn-secondary{width:100%}
  .stats-grid{grid-template-columns:1fr}
  .topbar{padding:10px 15px}
  .brand-inline small,.role-chip{display:none}
  .user-chip{max-width:115px}
  .form-grid,.type-options,.detail-grid{grid-template-columns:1fr}
  .modal-backdrop{padding:10px}
  .report-modal{max-height:calc(100vh - 20px);border-radius:18px}
  .modal-header,#report-form{padding-left:18px;padding-right:18px}
  .modal-actions{flex-direction:column-reverse}
  .modal-actions .btn-primary,.modal-actions .btn-ghost{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* Superadmin management */
.manage-btn{
  border:1px solid #d8e5f3;
  background:#fff;
  color:#3f5875;
  min-height:36px;
  padding:0 12px;
  border-radius:10px;
  font-size:12px;
  font-weight:750;
}
.manage-btn:hover{background:#f5f9fd}
.admin-backdrop{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(16,31,52,.34);
  backdrop-filter:blur(6px);
  z-index:80;
}
.admin-backdrop.show{display:flex}
.admin-modal{
  width:min(100%,900px);
  max-height:calc(100vh - 48px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #dce8f5;
  border-radius:22px;
  box-shadow:0 30px 90px rgba(31,66,110,.24);
}
.admin-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:22px 24px 17px;
  border-bottom:1px solid #edf2f7;
}
.admin-modal-head h2{margin:4px 0 0;font-size:23px}
.admin-tabs{
  display:flex;
  gap:6px;
  padding:11px 18px;
  border-bottom:1px solid #edf2f7;
  overflow-x:auto;
}
.admin-tab{
  border:0;
  background:transparent;
  color:#66758a;
  min-height:38px;
  padding:0 12px;
  border-radius:10px;
  font-size:12.5px;
  font-weight:750;
  white-space:nowrap;
}
.admin-tab.active{
  background:var(--blue-soft);
  color:#326cae;
}
.admin-content{
  position:relative;
  padding:20px 22px 24px;
  overflow:auto;
}
.admin-loading{
  display:none;
  align-items:center;
  gap:9px;
  color:#66758a;
  font-size:12px;
  margin-bottom:12px;
}
.admin-loading.show{display:flex}
.spinner-blue{
  display:inline-block!important;
  border-color:rgba(91,152,232,.22)!important;
  border-top-color:var(--blue)!important;
}
.admin-pane{display:none}
.admin-pane.active{display:block}
.inline-add-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  margin-bottom:14px;
}
.inline-add-form input,
.stack-form input,
.stack-form select{
  width:100%;
  height:44px;
  border:1px solid #d8e3ef;
  border-radius:11px;
  padding:0 12px;
  outline:none;
  background:#fbfdff;
  color:var(--text);
}
.inline-add-form input:focus,
.stack-form input:focus,
.stack-form select:focus{
  border-color:#87b4ec;
  box-shadow:0 0 0 4px rgba(91,152,232,.09);
  background:#fff;
}
.compact-action{min-height:44px;padding:0 15px}
.manage-list{
  display:grid;
  gap:8px;
}
.manage-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:54px;
  padding:10px 12px;
  border:1px solid #e2eaf3;
  border-radius:13px;
  background:#fff;
}
.manage-main{min-width:0}
.manage-main strong{
  display:block;
  font-size:13px;
  color:#263850;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.manage-main small{
  display:block;
  margin-top:3px;
  color:#8a96a8;
  font-size:10.5px;
}
.manage-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.state-pill{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:3px 8px;
  border-radius:999px;
  background:#edf7f3;
  color:#2b8069;
  font-size:10.5px;
  font-weight:750;
}
.state-pill.off{
  background:#f1f3f6;
  color:#7c8796;
}
.mini-btn{
  border:1px solid #dce5ef;
  background:#f8fafc;
  color:#52637a;
  min-height:32px;
  padding:0 9px;
  border-radius:9px;
  font-size:10.5px;
  font-weight:750;
}
.mini-btn:hover{background:#eef4fa}
.mini-btn.remove{
  border-color:#f0dadd;
  background:#fff7f8;
  color:#b74d57;
}
.empty-admin{
  border:1px dashed #cedae7;
  background:#fbfdff;
  color:#8793a7;
  border-radius:13px;
  padding:22px;
  text-align:center;
  font-size:12px;
}
.pic-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.pic-block{
  border:1px solid #e0e9f3;
  border-radius:16px;
  padding:16px;
  min-width:0;
}
.pic-block-head{
  margin-bottom:12px;
  font-size:13.5px;
}
.stack-form{
  display:grid;
  gap:9px;
  margin-bottom:14px;
}
.compact-list .manage-row{
  align-items:flex-start;
}
.admin-error{
  min-height:18px;
  margin-top:12px;
  color:var(--danger);
  font-size:12px;
  font-weight:650;
}
@media(max-width:760px){
  .manage-btn{display:none}
  .admin-backdrop{padding:8px}
  .admin-modal{max-height:calc(100vh - 16px);border-radius:18px}
  .admin-modal-head{padding:18px}
  .admin-content{padding:16px}
  .inline-add-form{grid-template-columns:1fr}
  .inline-add-form .btn-primary{width:100%}
  .pic-columns{grid-template-columns:1fr}
  .manage-row{align-items:flex-start}
}


/* v0.6 edit/delete */
.rename-bar{
  margin-top:14px;
  padding:14px;
  border:1px solid #dce7f2;
  border-radius:14px;
  background:#f8fbff;
  display:flex;
  align-items:flex-end;
  gap:12px;
}
.rename-copy{flex:1;min-width:0}
.rename-copy span{
  display:block;
  font-size:11px;
  font-weight:800;
  color:#68788e;
  margin-bottom:6px;
}
.rename-copy input{
  width:100%;
  height:42px;
  border:1px solid #d5e2ef;
  border-radius:10px;
  padding:0 11px;
  outline:none;
  background:#fff;
}
.rename-copy input:focus{
  border-color:#82b2ec;
  box-shadow:0 0 0 4px rgba(91,152,232,.09);
}
.rename-actions{display:flex;gap:8px}
.icon-action{
  width:32px;
  height:32px;
  border:1px solid #dce6f0;
  border-radius:9px;
  display:inline-grid;
  place-items:center;
  padding:0;
  background:#f8fafc;
  color:#53657b;
}
.icon-action:hover{background:#eef5fb}
.icon-action svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.icon-action.delete{
  border-color:#f0dadd;
  background:#fff8f8;
  color:#bc5660;
}
.admin-modal{position:relative}
.admin-confirm{
  position:absolute;
  inset:0;
  z-index:8;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(247,250,253,.82);
  backdrop-filter:blur(6px);
}
.admin-confirm-card{
  width:min(100%,360px);
  background:#fff;
  border:1px solid #e1eaf3;
  border-radius:18px;
  padding:24px;
  text-align:center;
  box-shadow:0 22px 60px rgba(31,66,110,.16);
}
.confirm-icon{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;margin:0 auto 12px;
  background:#fff2f3;color:#c6535e;font-weight:900;
}
.admin-confirm-card h3{margin:0 0 7px;font-size:17px}
.admin-confirm-card p{margin:0;color:#758397;font-size:12.5px;line-height:1.5}
.confirm-actions{display:flex;gap:9px;margin-top:18px}
.confirm-actions>*{flex:1}
.danger-btn{
  border:0;
  min-height:44px;
  border-radius:12px;
  background:#c9535d;
  color:#fff;
  font-weight:750;
}
.hidden{display:none!important}
@media(max-width:720px){
  .rename-bar{flex-direction:column;align-items:stretch}
  .rename-actions>*{flex:1}
}


/* v0.7 location autocomplete */
.location-autocomplete{
  position:relative;
}
.location-autocomplete > input{
  width:100%;
}
.location-suggestions{
  position:absolute;
  top:calc(100% + 7px);
  left:0;
  right:0;
  z-index:35;
  max-height:286px;
  overflow:auto;
  padding:6px;
  border:1px solid #dbe6f1;
  border-radius:13px;
  background:#fff;
  box-shadow:0 18px 46px rgba(42,71,108,.16);
}
.location-option{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  border:0;
  border-radius:9px;
  padding:9px 10px;
  background:transparent;
  color:#31435a;
  text-align:left;
  font-size:12.5px;
  line-height:1.35;
  cursor:pointer;
}
.location-option:hover,
.location-option.active{
  background:#eef6ff;
  color:#2f6fae;
}
.location-option + .location-option{
  margin-top:2px;
}


/* v0.8 PIC / ticket actions */
.ticket-action-box{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid #e7eef6;
}
.action-box-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.action-box-head h3{
  margin:3px 0 0;
  font-size:17px;
}
.assigned-pill{
  display:inline-flex;
  align-items:center;
  max-width:55%;
  min-height:30px;
  padding:5px 10px;
  border-radius:999px;
  background:#eef6ff;
  color:#356fae;
  font-size:10.5px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.assigned-pill.unassigned{
  background:#f2f4f7;
  color:#7d8998;
}
.claim-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px;
  border:1px solid #dbe8f5;
  border-radius:14px;
  background:#f8fbff;
}
.claim-strip.locked{
  background:#fafbfc;
}
.claim-strip p{
  margin:0;
  color:#65758a;
  font-size:12.5px;
  line-height:1.45;
}
.ticket-action-form{
  padding-top:4px;
}
.action-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.action-submit-row{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}
.ticket-update-btn{
  min-width:168px;
}
.table-assignee{
  display:inline-block;
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11.5px;
  color:#53657b;
  font-weight:650;
}
.table-assignee.empty{
  color:#99a4b2;
  font-weight:550;
}
.own-report-panel{
  margin-top:18px;
}
.empty-state.slim{
  padding:22px 12px;
}
@media(max-width:760px){
  .action-box-head,
  .claim-strip{
    align-items:flex-start;
    flex-direction:column;
  }
  .assigned-pill{max-width:100%}
  .claim-strip .btn-primary{width:100%}
  .action-grid{grid-template-columns:1fr}
  .action-submit-row .btn-primary{width:100%}
}


/* v0.9 attachment previews */
.attachment-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;
  margin-top:9px;
}
.attachment-image-card,
.attachment-file-card{
  display:block;
  min-width:0;
  border:1px solid #dde7f1;
  border-radius:13px;
  overflow:hidden;
  background:#fbfdff;
  color:#42546b;
  text-decoration:none;
}
.attachment-image-card:hover,
.attachment-file-card:hover{
  border-color:#aac8ea;
  box-shadow:0 8px 24px rgba(54,91,132,.09);
}
.attachment-image-card img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
  background:#eef3f8;
}
.attachment-image-card span,
.attachment-file-card > span:last-child{
  display:block;
  padding:9px 10px;
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.attachment-file-card{
  min-height:118px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.attachment-file-icon{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:12px;
  background:#edf4fc;
  color:#4d7fb8;
  font-size:11px;
  font-weight:900;
}
.file-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:8px;
  margin-top:10px;
}
.file-preview-card{
  min-width:0;
  overflow:hidden;
  border:1px solid #dfe8f1;
  border-radius:11px;
  background:#fff;
}
.file-preview-card img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}
.file-preview-pdf{
  min-height:86px;
  display:grid;
  place-items:center;
  background:#f4f8fc;
  color:#527da9;
  font-weight:900;
  font-size:12px;
}
.file-preview-name{
  display:block;
  padding:7px 8px;
  font-size:10.5px;
  color:#64748a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* v0.10 */
.success-upload-note{
  margin:10px 0 2px;
  padding:9px 11px;
  border:1px solid #f0d9a6;
  border-radius:10px;
  background:#fff9ec;
  color:#8a6725;
  font-size:11.5px;
  line-height:1.45;
}


/* v0.11 ticket delete + attachment states */
.ticket-head-actions{
  display:flex;
  align-items:center;
  gap:9px;
}
.btn-danger-soft{
  min-height:40px;
  padding:0 13px;
  border:1px solid #efcfd3;
  border-radius:11px;
  background:#fff7f8;
  color:#b64f59;
  font-size:11.5px;
  font-weight:800;
}
.btn-danger-soft:hover{
  background:#fff0f2;
  border-color:#e7b9bf;
}
.attachment-title-row{
  display:flex;
  align-items:center;
  gap:7px;
}
.attachment-count{
  display:inline-grid;
  place-items:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:#edf4fc;
  color:#537aa7;
  font-size:10px;
  font-weight:800;
}
.attachment-empty{
  margin-top:9px;
  padding:17px;
  border:1px dashed #d6e1ec;
  border-radius:12px;
  background:#fbfdff;
  color:#8995a7;
  font-size:12px;
  text-align:center;
}
.attachment-image-frame{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#eef3f8;
}
.attachment-image-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.attachment-missing{
  width:100%;
  height:100%;
  padding:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#7d8998;
}
.attachment-missing strong{
  font-size:11.5px;
  color:#5d6c7e;
}
.attachment-missing small{
  margin-top:4px;
  font-size:10px;
}
.delete-ticket-backdrop{
  position:fixed;
  inset:0;
  z-index:120;
  display:none;
  place-items:center;
  padding:20px;
  background:rgba(17,31,49,.38);
  backdrop-filter:blur(6px);
}
.delete-ticket-backdrop.show{
  display:grid;
}
.delete-ticket-modal{
  width:min(100%,390px);
  padding:25px;
  border:1px solid #e3eaf1;
  border-radius:20px;
  background:#fff;
  box-shadow:0 28px 80px rgba(35,58,88,.24);
  text-align:center;
}
.delete-ticket-icon{
  width:46px;
  height:46px;
  margin:0 auto 13px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff0f2;
  color:#c1525d;
  font-weight:900;
  font-size:18px;
}
.delete-ticket-modal h2{
  margin:0;
  font-size:19px;
}
.delete-ticket-modal p{
  margin:9px 0 0;
  color:#748297;
  font-size:12.5px;
  line-height:1.55;
}
.delete-ticket-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:19px;
}
@media(max-width:600px){
  .ticket-head{
    align-items:flex-start;
  }
  .ticket-head-actions{
    flex-direction:column-reverse;
    align-items:stretch;
  }
}


/* v0.12 multi attachment upload */
.attachment-title-row{
  justify-content:space-between;
  gap:12px;
}
.attachment-title-left{
  display:flex;
  align-items:center;
  gap:7px;
}
.attachment-add-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 10px;
  border:1px solid #d8e5f2;
  border-radius:9px;
  background:#f8fbff;
  color:#5277a2;
  font-size:10.5px;
  font-weight:800;
  cursor:pointer;
}
.attachment-add-btn:hover{
  background:#eef6ff;
  border-color:#bfd5ed;
}
.ticket-new-attachments{
  margin:12px 0 4px;
  padding:12px;
  border:1px solid #dfe8f1;
  border-radius:13px;
  background:#fbfdff;
}
.ticket-new-files{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(105px,1fr));
  gap:8px;
}
.ticket-file-preview{
  overflow:hidden;
  min-width:0;
  border:1px solid #e0e8f1;
  border-radius:10px;
  background:#fff;
}
.ticket-file-preview img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  background:#eef3f8;
}
.ticket-file-preview-pdf{
  min-height:78px;
  display:grid;
  place-items:center;
  background:#f2f7fc;
  color:#547ba8;
  font-size:11px;
  font-weight:900;
}
.ticket-file-preview-name{
  display:block;
  padding:7px;
  color:#66758a;
  font-size:9.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ticket-upload-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:10px;
}
.success-upload-note.success-note{
  border-color:#cfe8dc;
  background:#f2fbf7;
  color:#34765e;
}
@media(max-width:600px){
  .attachment-title-row{
    align-items:flex-start;
  }
  .attachment-add-btn{
    flex-shrink:0;
  }
  .ticket-upload-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
}


/* v0.14 additive attachment selection */
.file-preview-card,
.ticket-file-preview{
  position:relative;
}
.file-remove-btn{
  position:absolute;
  top:5px;
  right:5px;
  z-index:3;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  background:rgba(34,48,66,.72);
  color:#fff;
  font-size:17px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.16);
}
.file-remove-btn:hover{
  background:rgba(177,70,80,.9);
}


/* v0.16 staff autocomplete for PIC assignment */
.staff-picker{
  position:relative;
  min-width:0;
}
.staff-suggestions{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:120;
  max-height:280px;
  overflow:auto;
  padding:6px;
  border:1px solid #d8e4f0;
  border-radius:12px;
  background:#fff;
  box-shadow:0 16px 42px rgba(32,63,104,.18);
}
.staff-suggestion-item{
  width:100%;
  display:block;
  padding:10px 11px;
  border:0;
  border-radius:9px;
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.staff-suggestion-item:hover,
.staff-suggestion-item:focus{
  background:#f1f7fe;
  outline:none;
}
.staff-suggestion-item strong{
  display:block;
  color:#263850;
  font-size:12.5px;
  line-height:1.35;
}
.staff-suggestion-item small{
  display:block;
  margin-top:3px;
  color:#8794a7;
  font-size:10px;
  line-height:1.4;
}
.staff-search-state{
  padding:11px;
  color:#7d899a;
  font-size:11px;
  text-align:center;
}
.staff-search-state.error{
  color:#b74d57;
}