/* Cyberphore: responsive layout and brand touches for the osTicket 1.18 client portal.
   Loaded after the stock theme from include/client/header.inc.php. Re-apply after osTicket upgrades. */
body { font-family: Inter, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; color: #1f2329; }
a { color: #c81e1e; }
#container { max-width: 960px; box-sizing: border-box; }
#nav li a.active, #nav li a:hover { color: #c81e1e; }
.button, input[type="submit"], button[type="submit"] { border-radius: 6px; }

@media (max-width: 880px) {
  #container { width: auto !important; max-width: 100%; margin: 0; padding: 0 12px; }
  #header, #nav, #content, #footer { width: auto !important; box-sizing: border-box; }
  #header { height: auto; padding: 12px 0; }
  #header .pull-right { float: none; text-align: left; width: auto !important; margin-bottom: 8px; }
  #header .pull-right p { width: auto !important; margin: 0; }
  #logo, #header #logo { float: none; display: block; }
  #logo img, #header img { max-width: 70vw; height: auto; }
  #nav { height: auto; padding: 0; }
  #nav { display: flex; flex-wrap: wrap; gap: 4px; }
  #nav li { float: none; display: block; margin: 0; width: auto !important; }
  #nav li a { width: auto !important; padding-right: 10px; white-space: nowrap; }
  #content { padding: 12px 0; }
  .main-content, .sidebar, #landing_page .main-content, #landing_page .sidebar { float: none !important; width: auto !important; margin: 0 0 16px; }
  img, video, iframe, .thread-body, .redactor-box, .redactor-editor { max-width: 100% !important; height: auto; }
  input[type="text"], input[type="email"], input[type="password"], input[type="tel"], select, textarea { width: 100% !important; max-width: 100%; box-sizing: border-box; }
  table { max-width: 100%; }
  #ticketTable, table.list, .tickets table, #ticketInfo, #clientLogin table { display: block; overflow-x: auto; }
  #clientLogin, #clientLogin .instructions, #clientLogin form { float: none !important; width: auto !important; }
  .front-page-button, .button { white-space: normal; }
  #footer { padding: 16px 0; text-align: left; }
}

/* Brand polish (all widths) */
h1, h2, h3 { color: #0b0d10; font-weight: 600; letter-spacing: -0.01em; }
#container { box-shadow: none; }
a.blue.button, a.green.button, .front-page-button a.button { background: #c81e1e !important; border: 1px solid #a41818 !important; color: #fff !important; text-shadow: none !important; box-shadow: none !important; background-image: none !important; }
a.green.button { background: #0b0d10 !important; border-color: #0b0d10 !important; }
a.blue.button:hover, a.green.button:hover { filter: brightness(1.08); }
input[type="text"], input[type="email"], input[type="password"], select, textarea { border: 1px solid #c9ced6; border-radius: 6px; padding: 8px 10px; font-size: 15px; }
input[type="submit"], button[type="submit"], input.btn, .button { background: #0b0d10; color: #fff; border: 0; padding: 9px 16px; font-weight: 600; cursor: pointer; }
#footer { color: #5b6470; }

@media (max-width: 880px) {
  #clientLogin > div, #clientLogin .instructions, #clientLogin form > div { float: none !important; width: auto !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 14px !important; }
  #clientLogin { padding: 16px !important; }
  #clientLogin .instructions img, #clientLogin img { display: none; }
  #clientLogin input[type="text"], #clientLogin input[type="password"] { width: 100% !important; margin-bottom: 10px; }
  .front-page-button { float: none !important; width: 100% !important; margin-bottom: 10px; }
  .front-page-button a.button { display: block; width: auto !important; }
}

/* Buttons: high specificity so the stock theme cannot hide the label */
#content input.btn[type="submit"], #content input[type="submit"], #content button[type="submit"] { background: #0b0d10 !important; background-image: none !important; color: #fff !important; border: 1px solid #0b0d10 !important; border-radius: 6px; padding: 9px 18px; font-weight: 600; text-shadow: none !important; }
#clientLogin { background: #fff; border: 1px solid #e3e6ea; border-radius: 10px; box-shadow: none; }
#clientLogin .login-box { border-right: 1px solid #e3e6ea; }
@media (max-width: 880px) {
  #clientLogin > div[style*="table-row"], #clientLogin .login-box, #clientLogin div[style*="table-cell"] { display: block !important; width: auto !important; border: 0 !important; padding: 0 !important; }
  #clientLogin .login-box input[type="text"], #clientLogin .login-box input[type="password"] { width: 100% !important; }
  #clientLogin div[style*="table-cell"] { margin-top: 12px !important; }
}