/* ════════════════════════════════════════════════════════════════════════════
   Cake Shop accents for the osTicket staff panel (/scp/).
   Injected by nginx (sub_filter before </head>) — osTicket core is untouched.
   Deliberately light: the agent UI is dense, so only colour + header, no
   layout changes that could fight osTicket's own JS.
   ════════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;600;700&display=swap');

:root {
  --cs-pink: #E6007E;
  --cs-pink-dark: #B80065;
  --cs-pink-soft: #FDE6F2;
  --cs-cream: #F4E9D6;
}

html, body { background: var(--cs-cream); }
body, input, select, textarea, button { font-family: 'Figtree', 'Helvetica Neue', Arial, sans-serif; }

/* white header to sit the logo on, like the branch portal */
#header { background: #fff; box-shadow: none; border-color: #e3d6c6; }
#header p { background: var(--cs-pink-soft); border-color: #f5c2dd; border-radius: 8px; }

#nav { background: #fff; border-color: #e3d6c6; border-bottom: 3px solid var(--cs-pink); }
#nav li.active { background: var(--cs-pink); border-color: var(--cs-pink); box-shadow: none; }
#nav .active a, #nav li.active a { color: #fff; }
#nav li.inactive:hover { background: var(--cs-pink-soft); }
#nav .inactive li a:hover { color: var(--cs-pink-dark); }
#sub_nav, #customQ_nav { border-color: #e3d6c6; }
#sub_nav a.active, #sub_nav li.active > a,
#customQ_nav .jb-overflowmenu-menu-primary li.item > a.active { color: var(--cs-pink-dark); }

#content, #sub_nav, #customQ_nav { border-color: #e3d6c6; }
h2, h2 a { color: var(--cs-pink-dark); }

button[type=submit], input[type="submit"], .primary.button {
  background-color: var(--cs-pink);
  color: #fff;
  box-shadow: none;
}
button[type=submit]:hover, input[type=submit]:hover, input[type=submit]:active,
.primary.button:hover {
  background-color: var(--cs-pink-dark);
  box-shadow: none;
}

/* ── login page ───────────────────────────────────────────────────────────── */
#loginBox {
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(60, 0, 30, .35);
}
#loginBox #blur { display: none; }
#loginBox:after { background-color: rgba(255, 255, 255, .97); border: 0; border-radius: 14px; }
#loginBox input[type=text], #loginBox input[type=password] {
  font-size: 15px; padding: 9px 10px; border-radius: 8px; border: 1px solid #ddd;
}
#loginBox button[type=submit], #loginBox .submit.button {
  background: var(--cs-pink); color: #fff; border: 0; border-radius: 999px;
  padding: 8px 22px; font-weight: 600; box-shadow: none; text-shadow: none;
  height: auto; line-height: 1.3;
}
#loginBox h3 { color: var(--cs-pink-dark); }
#company { text-shadow: none; }
#poweredBy { opacity: .55; }