/* Serobase Monitoring UI polish · v0.34.4
   Improves typography, hierarchy, mobile cards, ticket workflows and feedback
   without changing business logic. */

:root{
  --ui-danger:#c83e4c;
  --ui-danger-bg:#fff5f6;
  --ui-danger-line:#efc6cb;
  --ui-focus:#f0522f;
  --ui-mobile-bar-h:68px;
}

/* ---------- Desktop readability ---------- */
@media (min-width:821px){
  body{font-size:13px;line-height:1.46}
  .page-sub{font-size:12.5px;line-height:1.5}
  .panel-title{font-size:12.5px}
  .panel-sub,.meta{font-size:10.5px}
  .section-title{font-size:11.5px}
  label{font-size:10.5px}
  input,select,textarea{font-size:12px;line-height:1.4}
  .btn{font-size:11px}
  .btn.mini,.mini{font-size:10px}
  th{font-size:9.5px}
  td{font-size:11.5px;line-height:1.42}
  .badge{font-size:9px}
}

/* ---------- Clear visual hierarchy ---------- */
.btn.primary{
  background:linear-gradient(180deg,#f45a37,#ef4f2c)!important;
  border-color:#dc4727!important;
  color:#fff!important;
  box-shadow:0 1px 2px rgba(191,62,33,.13)
}
.btn.primary:hover{background:linear-gradient(180deg,#f76340,#f0522f)!important}
.btn.danger{
  color:var(--ui-danger)!important;
  border-color:var(--ui-danger-line)!important;
  background:var(--ui-danger-bg)!important;
}
.btn.danger:hover{background:#ffecee!important;border-color:#e7aab1!important}
.btn.ui-quiet{background:#fff!important;color:#53697a!important;border-color:#d7e0e6!important}
.btn.ui-quiet:hover{background:#f6f9fb!important;color:#30495a!important}

.badge.green{background:#ecf9f2!important;color:#218356!important;border-color:#bce8d1!important}
.badge.yellow{background:#fff8e7!important;color:#946a10!important;border-color:#efd594!important}
.badge.red{background:#fff1f2!important;color:#c94552!important;border-color:#f2c2c7!important}
.badge.blue{background:#edf6fd!important;color:#3479af!important;border-color:#c2def2!important}

/* ---------- Ticket header ---------- */
.ui-ticket-head-meta{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px
}
.ui-ticket-head-meta .badge{font-weight:700}

.ui-more-menu{position:relative;display:inline-block}
.ui-more-menu>summary{list-style:none;display:inline-flex;align-items:center;gap:6px}
.ui-more-menu>summary::-webkit-details-marker{display:none}
.ui-more-menu>summary:after{content:"⋯";font-size:15px;line-height:1;margin-top:-2px}
.ui-more-pop{
  position:absolute;right:0;top:calc(100% + 6px);z-index:350;
  min-width:190px;padding:8px;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 16px 40px rgba(19,39,54,.18)
}
.ui-more-pop form{margin:0!important;display:block!important}
.ui-more-pop .btn{width:100%;justify-content:flex-start;text-align:left}

/* ---------- Compact time/material booking ---------- */
#time .ui-time-tools{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  padding:9px 12px;border-bottom:1px solid var(--line-soft);background:#fbfcfd
}
#time .ui-time-tools-main{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
#time .ui-time-tools-note{font-size:10px;color:var(--muted)}
#time .ui-time-create-body{
  background:#fbfcfd;border-bottom:1px solid var(--line-soft);
  padding-top:12px!important;padding-bottom:12px!important
}
#time .ui-time-create-body[hidden]{display:none!important}
#time .ui-time-create-body.ui-open{animation:uiSlideIn .16s ease-out}
@keyframes uiSlideIn{from{opacity:.3;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Existing material disclosure becomes more obviously secondary */
#time .ticket-material-details{border-top:1px solid var(--line-soft)}
#time .ticket-material-details>summary{background:#fbfcfd}

/* ---------- Empty states ---------- */
tr.ui-empty-row td{
  text-align:center!important;color:var(--muted)!important;padding:26px 14px!important;
  background:#fbfcfd!important
}
tr.ui-empty-row td:before{
  content:"○";display:block!important;font-size:20px!important;line-height:1!important;
  color:#a9b7c1!important;margin-bottom:7px!important;font-weight:400!important;letter-spacing:0!important
}

/* ---------- Submit/loading feedback ---------- */
.ui-submit-busy{cursor:wait!important;opacity:.78!important;pointer-events:none!important}
.ui-submit-busy .ui-spinner,.ui-busy-indicator .ui-spinner{
  width:13px;height:13px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;
  display:inline-block;vertical-align:-2px;margin-right:6px;animation:uiSpin .7s linear infinite
}
@keyframes uiSpin{to{transform:rotate(360deg)}}
.ui-busy-indicator{
  position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:4000;
  display:flex;align-items:center;gap:5px;padding:8px 12px;border-radius:999px;
  background:#172633;color:#fff;box-shadow:0 9px 26px rgba(12,27,38,.24);
  font-size:11px;font-weight:700;white-space:nowrap
}

/* ---------- Ticket page density ---------- */
@media (min-width:1050px){
  body.ui-ticket-detail .grid.two{
    grid-template-columns:minmax(0,1.5fr) minmax(340px,.5fr)
  }
  body.ui-ticket-detail .ticket-thread{padding:11px 12px}
  body.ui-ticket-detail form[action$="/reply"] textarea{min-height:132px;max-height:260px}
}

/* ---------- Theme toggle ---------- */
.ui-theme-toggle{
  width:100%;margin:0 0 8px;display:flex!important;align-items:center;justify-content:center;gap:7px
}
.ui-theme-toggle .ui-theme-icon{font-size:13px;line-height:1}

/* ---------- Dark theme ---------- */
html[data-ui-theme="dark"]{
  color-scheme:dark;
  --bg:#0f1922;
  --bg-deep:#0b141c;
  --surface:#17232d;
  --surface-2:#1c2a35;
  --surface-3:#21313d;
  --surface-hover:#20303c;
  --line:#30414d;
  --line-soft:#263641;
  --text:#e7eef3;
  --muted:#9db0bf;
  --muted-2:#8298a9;
  --shadow:0 5px 18px rgba(0,0,0,.18);
  --ui-danger:#ff8792;
  --ui-danger-bg:#351e24;
  --ui-danger-line:#6b3540;
}
html[data-ui-theme="dark"],
html[data-ui-theme="dark"] body{background:var(--bg)!important;color:var(--text)!important}
html[data-ui-theme="dark"] .main{background:var(--bg)!important}
html[data-ui-theme="dark"] h1,
html[data-ui-theme="dark"] .panel-title,
html[data-ui-theme="dark"] .section-title,
html[data-ui-theme="dark"] .host{color:#edf4f8!important}
html[data-ui-theme="dark"] .page-sub,
html[data-ui-theme="dark"] .meta,
html[data-ui-theme="dark"] label{color:var(--muted)!important}
html[data-ui-theme="dark"] .panel,
html[data-ui-theme="dark"] .card,
html[data-ui-theme="dark"] .metric-card,
html[data-ui-theme="dark"] .toolbar,
html[data-ui-theme="dark"] .customer-node,
html[data-ui-theme="dark"] .subnav a,
html[data-ui-theme="dark"] .tabs,
html[data-ui-theme="dark"] dialog{background:var(--surface)!important;border-color:var(--line)!important;color:var(--text)!important}
html[data-ui-theme="dark"] .panel-head,
html[data-ui-theme="dark"] th{background:var(--surface-2)!important;border-color:var(--line-soft)!important;color:#9fb2c1!important}
html[data-ui-theme="dark"] td{color:#dce6ed!important;border-color:var(--line-soft)!important}
html[data-ui-theme="dark"] tbody tr:hover td{background:#1c2b36!important}
html[data-ui-theme="dark"] input,
html[data-ui-theme="dark"] select,
html[data-ui-theme="dark"] textarea{
  background:#111e27!important;border-color:#3a4c59!important;color:#e7eef3!important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.14)!important
}
html[data-ui-theme="dark"] input::placeholder,
html[data-ui-theme="dark"] textarea::placeholder{color:#718797!important}
html[data-ui-theme="dark"] .btn,
html[data-ui-theme="dark"] .btn.ui-quiet{
  background:#1d2c37!important;color:#dbe6ed!important;border-color:#3b4d59!important
}
html[data-ui-theme="dark"] .btn:hover,
html[data-ui-theme="dark"] .btn.ui-quiet:hover{background:#263743!important;color:#fff!important;border-color:#526673!important}
html[data-ui-theme="dark"] .btn.primary{color:#fff!important}
html[data-ui-theme="dark"] .btn.danger{color:#ff9ba5!important;background:#351e24!important;border-color:#6b3540!important}
html[data-ui-theme="dark"] .badge{background:#202e38!important;color:#bdcad4!important;border-color:#3b4b56!important}
html[data-ui-theme="dark"] .badge.green{background:#18362b!important;color:#76dbaa!important;border-color:#285b46!important}
html[data-ui-theme="dark"] .badge.yellow{background:#3a3018!important;color:#f0cc72!important;border-color:#655326!important}
html[data-ui-theme="dark"] .badge.red{background:#3a2026!important;color:#ff929d!important;border-color:#6a3640!important}
html[data-ui-theme="dark"] .badge.blue{background:#193247!important;color:#86c5f5!important;border-color:#2a5574!important}
html[data-ui-theme="dark"] .notice{background:#173328!important;color:#8ce0b9!important;border-color:#2a5e49!important}
html[data-ui-theme="dark"] .notice.info{background:#183047!important;color:#91c9ef!important;border-color:#2b5775!important}
html[data-ui-theme="dark"] .codebar,
html[data-ui-theme="dark"] code,
html[data-ui-theme="dark"] pre{background:#101c25!important;color:#b9c9d4!important}
html[data-ui-theme="dark"] .ui-more-pop{background:#17232d!important;border-color:#3a4b57!important}
html[data-ui-theme="dark"] #time .ui-time-tools,
html[data-ui-theme="dark"] #time .ui-time-create-body,
html[data-ui-theme="dark"] #time .ticket-material-details>summary{background:#14212b!important}
html[data-ui-theme="dark"] tr.ui-empty-row td{background:#14212b!important;color:#91a5b4!important}
html[data-ui-theme="dark"] .ticket-message{border-color:#31424e!important}
html[data-ui-theme="dark"] .ticket-message.staff{background:#172c3b!important}
html[data-ui-theme="dark"] .ticket-message.internal{background:#332c1a!important}
html[data-ui-theme="dark"] .ticket-message.customer{background:#18262f!important}
html[data-ui-theme="dark"] .ticket-check{background:#17232d!important;border-color:#3a4b57!important;color:#dbe6ed!important}
html[data-ui-theme="dark"] .ticket-cc-block,
html[data-ui-theme="dark"] .ticket-material-section{background:#14212b!important;border-color:#2d3e49!important}

/* ---------- Mobile card tables ---------- */
@media (max-width:820px){
  .table-wrap.ui-card-wrap{overflow:visible!important}
  table.ui-mobile-cards{
    display:block!important;width:100%!important;min-width:0!important;background:transparent!important
  }
  table.ui-mobile-cards thead{display:none!important}
  table.ui-mobile-cards tbody{
    display:grid!important;gap:9px!important;padding:8px!important;background:transparent!important
  }
  table.ui-mobile-cards tbody tr{
    display:block!important;background:#fff!important;border:1px solid var(--line)!important;
    border-radius:11px!important;box-shadow:0 2px 9px rgba(31,52,68,.045)!important;
    overflow:hidden!important
  }
  table.ui-mobile-cards tbody tr:hover td{background:inherit!important}
  table.ui-mobile-cards tbody td{
    display:grid!important;grid-template-columns:104px minmax(0,1fr)!important;gap:10px!important;
    width:100%!important;min-width:0!important;padding:9px 10px!important;
    border:0!important;border-bottom:1px solid var(--line-soft)!important;
    font-size:12px!important;line-height:1.38!important;align-items:start!important
  }
  table.ui-mobile-cards tbody td:last-child{border-bottom:0!important}
  table.ui-mobile-cards tbody td:before{
    content:attr(data-label);display:block;font-size:9px;line-height:1.35;
    text-transform:uppercase;letter-spacing:.065em;color:var(--muted);font-weight:780;padding-top:2px
  }
  table.ui-mobile-cards tbody td:first-child{
    background:#fafcfd!important;font-weight:700
  }
  table.ui-mobile-cards tbody td.ui-card-actions{
    display:flex!important;justify-content:flex-end!important;align-items:center!important;
    gap:7px!important;flex-wrap:wrap!important;background:#fbfcfd!important
  }
  table.ui-mobile-cards tbody td.ui-card-actions:before{display:none!important}
  table.ui-mobile-cards tbody td form{margin:0!important}
  table.ui-mobile-cards tr.ui-empty-row{border-style:dashed!important;box-shadow:none!important}
  table.ui-mobile-cards tr.ui-empty-row td{
    display:block!important;text-align:center!important;padding:25px 12px!important;background:#fbfcfd!important
  }
  table.ui-mobile-cards tr.ui-empty-row td:before{
    content:"○"!important;font-size:20px!important;margin-bottom:7px!important;padding:0!important
  }

  /* Ticket action bar */
  body.ui-ticket-detail .main{
    padding-bottom:calc(var(--ui-mobile-bar-h) + 28px + env(safe-area-inset-bottom))!important
  }
  .ui-mobile-ticket-actions{
    position:fixed;left:0;right:0;bottom:0;z-index:1350;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
    padding:6px max(7px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));
    background:rgba(255,255,255,.97);border-top:1px solid #d7e0e6;
    box-shadow:0 -7px 24px rgba(20,40,56,.10);backdrop-filter:blur(13px)
  }
  .ui-mobile-ticket-actions button{
    min-height:50px!important;border:0!important;background:transparent!important;color:#516777!important;
    border-radius:9px!important;padding:5px 4px!important;font-size:10px!important;font-weight:720!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important
  }
  .ui-mobile-ticket-actions button:active{background:#f2f6f8!important}
  .ui-mobile-ticket-actions .ui-mobile-action-icon{font-size:17px;line-height:1;color:#30495a}
  .ui-mobile-ticket-actions .ui-mobile-action-primary{color:#ce482b!important}
  .ui-mobile-ticket-actions .ui-mobile-action-primary .ui-mobile-action-icon{color:#f0522f}

  .ui-more-pop{
    position:fixed!important;left:10px!important;right:10px!important;top:auto!important;
    bottom:calc(var(--ui-mobile-bar-h) + 14px + env(safe-area-inset-bottom))!important;
    width:auto!important;min-width:0!important;z-index:1600!important;
    padding:10px!important;border-radius:13px!important
  }

  #time .ui-time-tools{padding:9px 10px!important}
  #time .ui-time-tools-main{width:100%;display:grid;grid-template-columns:1fr 1fr}
  #time .ui-time-tools-main .btn{width:100%!important}
  #time .ui-time-tools-note{width:100%;line-height:1.4}

  .ui-busy-indicator{
    top:calc(66px + env(safe-area-inset-top));max-width:calc(100vw - 20px);font-size:12px
  }

  html[data-ui-theme="dark"] table.ui-mobile-cards tbody tr{background:#17232d!important;border-color:#30414d!important;box-shadow:none!important}
  html[data-ui-theme="dark"] table.ui-mobile-cards tbody td{background:#17232d!important;border-color:#263641!important;color:#dce6ed!important}
  html[data-ui-theme="dark"] table.ui-mobile-cards tbody td:first-child,
  html[data-ui-theme="dark"] table.ui-mobile-cards tbody td.ui-card-actions,
  html[data-ui-theme="dark"] table.ui-mobile-cards tr.ui-empty-row td{background:#14212b!important}
  html[data-ui-theme="dark"] .ui-mobile-ticket-actions{
    background:rgba(20,33,43,.97)!important;border-color:#30414d!important;box-shadow:0 -7px 24px rgba(0,0,0,.24)!important
  }
  html[data-ui-theme="dark"] .ui-mobile-ticket-actions button{color:#aebfca!important}
  html[data-ui-theme="dark"] .ui-mobile-ticket-actions button:active{background:#22323e!important}
  html[data-ui-theme="dark"] .ui-mobile-ticket-actions .ui-mobile-action-icon{color:#dbe6ed}
}

@media (max-width:390px){
  table.ui-mobile-cards tbody td{grid-template-columns:86px minmax(0,1fr)!important;gap:8px!important}
  #time .ui-time-tools-main{grid-template-columns:1fr}
}