/* Apalala skin for osTicket — agent / admin panel (scp) and its login page. */

@font-face { font-family: "Poppins"; src: url("fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Flex"; src: url("fonts/roboto-flex-var.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }

:root {
  --a-teal-950: #10303A;
  --a-teal-800: #1A4E5A;
  --a-teal-700: #23545F;
  --a-teal-400: #467082;
  --a-teal-200: #9DC9DC;
  --a-orange-400: #F19A3E;
  --a-orange-600: #E36414;
  --a-mist: #F5F7FA;
  --a-haze: #E8EFF2;
  --a-line: #E3EAEE;
  --a-ink: #1F2937;
  --a-head: "Poppins", Arial, sans-serif;
  --a-body: "Roboto Flex", "Segoe UI", Arial, sans-serif;
}

body, input, select, textarea, button { font-family: var(--a-body); }
body { color: var(--a-ink); }
body h1, body h2, body h3, body h4 { font-family: var(--a-head) !important; color: var(--a-teal-800); font-weight: 600; }
a, a:visited { color: var(--a-teal-400); }
a:hover { color: var(--a-orange-600); }

/* ---------- Login page ---------- */
#brickwall {
  background-image: none !important;
  background: linear-gradient(135deg, var(--a-teal-950) 0%, var(--a-teal-800) 55%, var(--a-teal-400) 100%) !important;
}
#background, #background-compat { display: none !important; }
#loginBox {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,48,58,.2), 0 18px 48px rgba(16,48,58,.35);
  overflow: hidden;
  padding: 0 0 22px;
}
#loginBox h1#logo {
  margin: 0 0 18px;
  padding: 22px 0;
  background: var(--a-teal-800);
}
#loginBox h1#logo a { display: inline-block; }
#loginBox h1#logo img { max-height: 48px; width: auto; }
#loginBox h3#login-message { color: var(--a-teal-800); font-family: var(--a-body); }
#loginBox input[type=text], #loginBox input[type=password] {
  border: 1px solid #cdd8de;
  border-radius: 8px;
}
input:focus { border: 1px solid var(--a-teal-400); box-shadow: 0 0 0 3px rgba(157,201,220,.55); outline: none; }
button.submit, .button.submit, #loginBox button {
  background: var(--a-orange-400) !important;
  color: var(--a-teal-950) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--a-head);
  font-weight: 600;
  text-shadow: none !important;
  box-shadow: none !important;
}
button.submit:hover, #loginBox button:hover { background: var(--a-orange-600) !important; color: #fff !important; }
#company { color: rgba(255,255,255,.9); }
#poweredBy { background: rgba(16,48,58,.55); }

/* ---------- Agent / admin panel ---------- */
#container { background: transparent; }
#header {
  background: var(--a-teal-800);
  border: 0;
  box-shadow: none;
}
#header, #header a, div#header a, #header p { color: #fff; }
#header a:hover, div#header a:hover { color: var(--a-orange-400); }
#header p { background: transparent; border: 0; }
#logo img { max-height: 48px; }
#nav, #sub_nav { font-family: var(--a-head); }
#nav .active a, #nav li.active { color: var(--a-teal-800); }
#nav li.inactive:hover, #nav .active { border-color: var(--a-orange-400); }
#sub_nav a.active, #sub_nav li.active > a { border-bottom-color: var(--a-orange-400); }
#content { color: var(--a-ink); }

.button, a.button, input[type=submit], input[type=button], button.green, button.blue {
  background: var(--a-orange-400);
  color: var(--a-teal-950);
  border: 0;
  border-radius: 999px;
  font-family: var(--a-head);
  font-weight: 600;
  text-shadow: none;
}
.button:hover, a.button:hover, input[type=submit]:hover, input[type=button]:hover { background: var(--a-orange-600); color: #fff; }
input[type=reset], input.red, .red.button { background: var(--a-haze); color: var(--a-teal-800); }

table.list thead th, table.list thead th a { background: var(--a-haze); color: var(--a-teal-800); font-family: var(--a-head); }