/* Serobase Monitoring · website-inspired visual theme
   Intentionally isolated in this file so the look can be reverted cleanly.
   Reference: serobase-website visual system (navy/orange, soft surfaces, rounded cards). */

:root{
  --brand-navy:#0c1d2b;
  --brand-navy-2:#122b3e;
  --brand-navy-3:#18364a;
  --brand-orange:#ef512f;
  --brand-orange-2:#ff673f;
  --brand-ink:#18232c;
  --brand-muted:#66747e;
  --brand-soft:#f5f7f8;
  --brand-soft-blue:#edf3f6;
  --brand-line:#e4e9ec;
  --brand-shadow:0 18px 48px rgba(12,29,43,.08);
}

body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* --------------------------------------------------------------------------
   Internal monitoring UI
   -------------------------------------------------------------------------- */
.shell{
  background:var(--brand-soft);
}
.shell .sidebar{
  background:
    radial-gradient(circle at 85% 8%,rgba(73,119,150,.16),transparent 28%),
    linear-gradient(180deg,var(--brand-navy) 0%,#0d2232 52%,#102838 100%);
  box-shadow:4px 0 24px rgba(12,29,43,.16);
}
.shell .brand{
  padding-top:7px;
  padding-bottom:20px;
}
.shell .navgroup{
  color:#89a0b1;
  letter-spacing:.18em;
}
.shell .nav a{
  border-radius:11px;
  padding:10px 11px;
}
.shell .nav a:hover{
  background:rgba(255,255,255,.075);
}
.shell .nav a.active{
  background:rgba(239,81,47,.14);
  border-color:rgba(255,103,63,.20);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);
}
.shell .nav a.active:before{
  left:-2px;
  top:9px;
  bottom:9px;
  width:3px;
  background:var(--brand-orange);
}
.shell .global-search-form input{
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.12);
}
.shell .global-search-form input:focus{
  border-color:rgba(255,103,63,.5);
  box-shadow:0 0 0 4px rgba(239,81,47,.09);
}

.shell .main{
  background:
    radial-gradient(circle at 94% 2%,rgba(24,54,74,.045),transparent 26%),
    var(--brand-soft);
  padding:28px 32px 56px;
}
.shell .topbar{
  margin-bottom:22px;
  padding:4px 2px 20px;
  border-bottom:1px solid var(--brand-line);
}
.shell .eyebrow{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--brand-orange);
  font-size:9px;
  letter-spacing:.16em;
}
.shell .eyebrow:before{
  content:"";
  width:24px;
  height:2px;
  border-radius:2px;
  background:currentColor;
}
.shell h1{
  color:var(--brand-ink);
  font-size:29px;
  line-height:1.08;
  letter-spacing:-.04em;
  font-weight:790;
}
.shell .page-sub{
  color:var(--brand-muted);
  margin-top:8px;
}
.shell .actions .btn{
  border-radius:999px;
  padding:9px 14px;
}
.shell .btn.primary{
  background:var(--brand-orange)!important;
  border-color:var(--brand-orange)!important;
  box-shadow:0 10px 24px rgba(239,81,47,.16)!important;
}
.shell .btn.primary:hover{
  background:#d94425!important;
  border-color:#d94425!important;
}

.shell .card,
.shell .metric-card,
.shell .panel,
.shell .toolbar,
.shell dialog{
  border-color:var(--brand-line);
  box-shadow:var(--brand-shadow);
}
.shell .card,
.shell .metric-card,
.shell .panel{
  border-radius:17px;
}
.shell .card,
.shell .metric-card{
  padding:17px 18px;
}
.shell .metric-card .value,
.shell .card .value{
  font-size:25px;
  letter-spacing:-.04em;
}
.shell .panel-head{
  padding:14px 17px;
  background:linear-gradient(180deg,#fff,#fbfcfd);
}
.shell .panel-body{
  padding:16px 17px;
}
.shell .panel-title{
  color:var(--brand-ink);
  font-weight:780;
}
.shell .toolbar{
  border-radius:15px;
  padding:11px 12px;
  background:#fff;
}
.shell input,
.shell select,
.shell textarea{
  background:#fff;
  border-color:#dbe2e6;
  border-radius:10px;
}
.shell input:focus,
.shell select:focus,
.shell textarea:focus{
  border-color:#e28a76;
  box-shadow:0 0 0 4px rgba(239,81,47,.075);
}
.shell th{
  background:var(--brand-soft-blue);
  color:#73838d;
}
.shell tbody tr:hover td{
  background:#fafcfd;
}
.shell .customer-node,
.shell .scope-node,
.shell .script-card{
  border-color:var(--brand-line);
  border-radius:14px;
}

/* Ticket pages inside the internal monitoring UI */
body.ui-ticket-detail .ticket-message{
  border-radius:14px;
  box-shadow:0 5px 18px rgba(12,29,43,.035);
}
body.ui-ticket-detail .ticket-message.staff{
  background:#f2f7fa;
  border-left-color:#5b9bc6;
}
body.ui-ticket-detail .ticket-message.customer{
  background:#fff;
  border-left-color:#48c86d;
}
body.ui-ticket-detail .ticket-message.internal{
  background:#fff9eb;
}
#time .ui-time-tools{
  background:#fafcfd;
}

/* Preserve the existing dark mode behavior. The dark-fixes stylesheet loads
   after this file and remains authoritative for dark surfaces/colors. */
html[data-ui-theme="dark"] .shell h1{color:#edf4f8}
html[data-ui-theme="dark"] .shell .main{background:var(--bg)!important}
html[data-ui-theme="dark"] .shell .panel-head{background:var(--surface-2)!important}
html[data-ui-theme="dark"] .shell input,
html[data-ui-theme="dark"] .shell select,
html[data-ui-theme="dark"] .shell textarea{background:#111e27!important}

/* --------------------------------------------------------------------------
   Customer ticket portal
   -------------------------------------------------------------------------- */
.portal-top{
  background:
    radial-gradient(circle at 82% 12%,rgba(60,104,135,.28),transparent 30%),
    linear-gradient(135deg,#091a27,#0d2232 52%,#133147);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 28px rgba(12,29,43,.14);
}
.portal-top-inner{
  min-height:92px;
  max-width:1240px;
}
.portal-logo{
  width:176px;
}
.portal-nav-main a,
.portal-nav-user>a,
.portal-nav-user>button,
.portal-nav-user form button{
  min-height:38px;
  border-radius:999px;
  padding:8px 13px;
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.045);
  font-weight:720;
}
.portal-nav-main a.portal-nav-new{
  color:#fff;
  background:var(--brand-orange);
  border-color:var(--brand-orange);
  box-shadow:0 10px 24px rgba(239,81,47,.18);
}
.portal-nav-main a.portal-nav-new:hover{
  background:#d94425;
  border-color:#d94425;
}
.portal-user-avatar{
  border-radius:999px;
  background:rgba(239,81,47,.16);
}

.portal-main{
  max-width:1240px;
  padding:34px 28px 64px;
}
.portal-head{
  margin-bottom:24px;
}
.portal-head .eyebrow,
.portal-list-title .eyebrow{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--brand-orange);
  font-size:10px;
  letter-spacing:.16em;
}
.portal-head .eyebrow:before,
.portal-list-title .eyebrow:before{
  content:"";
  width:26px;
  height:2px;
  border-radius:2px;
  background:currentColor;
}
.portal-main h1{
  margin-top:8px;
  color:var(--brand-ink);
  font-size:34px;
  line-height:1.06;
  letter-spacing:-.04em;
}
.portal-main .sub{
  color:var(--brand-muted);
  line-height:1.55;
}
.portal-main .panel{
  border-color:var(--brand-line);
  border-radius:20px;
  box-shadow:var(--brand-shadow);
}
.portal-main .panel-head{
  padding:15px 18px;
  background:linear-gradient(180deg,#fff,#fbfcfd);
  border-color:var(--brand-line);
}
.portal-main .panel-body{
  padding:18px;
}
.portal-main .btn{
  border-radius:999px;
  padding:9px 15px;
}
.portal-main .btn.primary{
  background:var(--brand-orange);
  border-color:var(--brand-orange);
  box-shadow:0 10px 24px rgba(239,81,47,.16);
}
.portal-main .btn.primary:hover{
  background:#d94425;
  border-color:#d94425;
}
.portal-main input,
.portal-main select,
.portal-main textarea{
  border-radius:11px;
  border-color:#dbe2e6;
  background:#fff;
}
.portal-main input:focus,
.portal-main select:focus,
.portal-main textarea:focus{
  border-color:#e28a76;
  box-shadow:0 0 0 4px rgba(239,81,47,.075);
}
.portal-main th{
  background:var(--brand-soft-blue);
  color:#73838d;
}
.portal-main .msg{
  border-radius:14px;
  padding:14px 15px;
  box-shadow:0 5px 18px rgba(12,29,43,.035);
}
.portal-main .notice{
  border-radius:14px;
}

/* Portal list: soften the utility bar and cards to match the website. */
.portal-ticket-controls{
  border-radius:16px!important;
  border-color:var(--brand-line)!important;
  background:#fff!important;
  box-shadow:0 10px 28px rgba(12,29,43,.045)!important;
}
.portal-status-tabs{
  border-radius:999px!important;
  background:var(--brand-soft-blue)!important;
}
.portal-status-tabs .btn{
  border-radius:999px!important;
}
.portal-status-tabs .btn.primary{
  color:var(--brand-orange)!important;
  background:#fff!important;
  border-color:#efc2b7!important;
  box-shadow:0 4px 12px rgba(12,29,43,.06)!important;
}
.portal-mail-note{
  border-radius:16px!important;
}
.portal-ticket-panel{
  border-radius:20px!important;
}
.portal-ticket-table tbody tr:hover td{
  background:#fafcfd!important;
}
.portal-ticket-table .ticket-subject{
  color:var(--brand-ink)!important;
  font-weight:780!important;
}

@media(max-width:820px){
  .shell .main{padding:16px 10px 90px}
  .shell .topbar{padding:2px 2px 15px;margin-bottom:15px}
  .shell h1{font-size:25px}
  .shell .card,.shell .metric-card,.shell .panel{border-radius:14px}
  .shell .actions .btn{padding:8px 12px}

  .portal-top-inner{min-height:auto}
  .portal-logo{width:156px}
  .portal-main{padding:18px 10px calc(40px + env(safe-area-inset-bottom))}
  .portal-main h1{font-size:27px}
  .portal-main .panel{border-radius:15px}
  .portal-ticket-controls{border-radius:14px!important}
  .portal-status-tabs{border-radius:12px!important}
}