/*
 * DIS branding — customer portal (everything outside /scp/).
 * Polished to match the /scp/ look: centered rounded card (white header -> teal nav
 * -> white content), rounded form fields, branded section headers + buttons.
 * Overrides assets/default/css/theme.css.
 */

/* ---- Light page, content in a centered rounded card ---- */
body {
  background: #eef1f3 !important;
}
#container {
  width: auto !important;
  max-width: 1080px !important;
  margin: 24px auto !important;
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}

/* ---- Brand header + logo ---- */
#header {
  height: 64px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  background: #fff !important;
  border-bottom: 3px solid var(--dis-blue) !important;
  border-radius: 12px 12px 0 0 !important;
}
#header #logo {
  height: 64px !important;
  width: 220px !important;
  margin: 0 !important;
  background: url('/assets/dis/dis-logo.svg') left center / auto 42px no-repeat !important;
}
#header #logo img,
#header #logo .valign-helper {
  display: none !important;
}
#header .pull-right {
  padding-top: 22px !important;
}

/* ---- Navigation (teal tabs, roomy) ---- */
#nav {
  margin: 0 !important;
  padding: 0 14px !important;
  height: auto !important;
  background: var(--dis-teal) !important;
  border-top: none !important;
  box-shadow: none !important;
  border-bottom: 2px solid var(--dis-blue) !important;
}
#nav li a {
  display: inline-block !important;
  padding: 12px 18px !important;
  height: auto !important;
  line-height: normal !important;
  color: #cfe0e8 !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  background-image: none !important;
}
#nav li a.active,
#nav li a:hover {
  background-color: #0a4a5e !important;
  color: #fff !important;
}

/* ---- Content area ---- */
#content {
  margin: 0 !important;
  padding: 22px 28px 28px !important;
  min-height: 320px !important;
  background: #fff !important;
  border-radius: 0 0 12px 12px !important;
}
h1 {
  color: var(--dis-teal) !important;
}

/* ---- Section headers ("Contact Information", "Ticket Details") ---- */
.form-header h3 {
  color: var(--dis-teal) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--dis-line) !important;
  padding-bottom: 7px !important;
  margin-bottom: 2px !important;
}

/* ---- Form fields ---- */
#content input[type="text"],
#content input[type="email"],
#content input[type="tel"],
#content input[type="password"],
#content input[type="number"],
#content input[type="search"],
#content select,
#content textarea {
  border: 1px solid var(--dis-line) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}
#content input[type="text"]:focus,
#content input[type="email"]:focus,
#content input[type="tel"]:focus,
#content input[type="password"]:focus,
#content input[type="number"]:focus,
#content input[type="search"]:focus,
#content select:focus,
#content textarea:focus {
  border-color: var(--dis-blue) !important;
  outline: none !important;
}
/* Rich-text editor: round its frame only (no overflow clip — that would hide
   the redactor's own dropdowns/color pickers). */
#content .redactor-box {
  border-radius: 8px !important;
}

/* ---- Buttons ---- */
#content input[type="submit"],
.blue.button,
.blue.button:visited,
.green.button,
.green.button:visited {
  background: var(--dis-blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 9px 20px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  cursor: pointer !important;
}
#content input[type="submit"]:hover,
.blue.button:hover,
.green.button:hover {
  background: var(--dis-blue-dark) !important;
}
#content input[type="reset"],
#content input[type="button"],
.cancel.button,
.button.cancel {
  background: #fff !important;
  color: var(--dis-ink) !important;
  border: 1px solid var(--dis-line) !important;
  border-radius: 8px !important;
  padding: 9px 20px !important;
}

/* ---- Sign-in / check-status box (view.php, login.php) ----
   Base #clientLogin is a sunken gray box with an inset shadow and a dated
   yellow lock.png background; make it a clean light card. */
#clientLogin {
  background-image: none !important;
  background-color: #f7fafc !important;
  border: 1px solid var(--dis-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 22px 24px !important;
}
#clientLogin .login-box {
  box-shadow: none !important;
  border-right: 1px solid var(--dis-line) !important;
}
#clientLogin .instructions {
  background-image: none !important;
  background-color: transparent !important;
  padding-right: 2em !important;
}

/* ---- Footer ---- */
#footer {
  color: #64757d !important;
}