/*
  PictureNamer Support Portal — Theme Override v3
  File: /support/assets/default/css/pn-support-override.css
  Strategy: Dark branded shell, light content/form areas for usability
  REPLACE previous version completely with this file.
*/

/* =========================================================
   GOOGLE FONT IMPORT
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

/* =========================================================
   BRAND VARIABLES
   ========================================================= */
:root {
  --pn-blue:         #1370d8;
  --pn-blue-light:   #52a4ff;
  --pn-blue-deep:    #045db2;
  --pn-ink:          #081626;
  --pn-ink-mid:      #0b2342;
  --pn-ink-top:      #0d3566;

  /* Light content area palette */
  --pn-form-bg:      #f4f7fb;
  --pn-form-border:  #d0daea;
  --pn-form-text:    #1a2535;
  --pn-form-muted:   #4a5568;
  --pn-form-input:   #ffffff;
  --pn-form-input-border: #c0cfe0;
  --pn-form-input-focus:  #1370d8;
}

/* =========================================================
   PAGE BACKGROUND — dark branded gradient
   ========================================================= */
body {
  background: linear-gradient(180deg, #0d3566 0%, #0b2342 40%, #081626 100%) !important;
  background-attachment: fixed !important;
  font-family: 'Inter', 'Helvetica Neue', sans-serif !important;
  color: #1a2535 !important;
}

/* =========================================================
   MAIN CONTAINER — light card sitting on dark background
   ========================================================= */
#container {
  background: #f4f7fb !important;
  border: none !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45) !important;
  border-radius: 0 0 20px 20px !important;
  width: min(100%, 900px) !important;
  margin: 0 auto !important;
  color: var(--pn-form-text) !important;
}

/* =========================================================
   HIDE DEFAULT OSTICKET HEADER
   ========================================================= */
#header {
  display: none !important;
}

/* =========================================================
   NAV BAR — dark branded strip
   ========================================================= */
#nav {
  background:
    linear-gradient(90deg, rgba(82,164,255,0.18), rgba(19,112,216,0.26), rgba(4,93,178,0.22)),
    rgba(8,22,38,0.96) !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
  margin: 0 !important;
  padding: 4px 16px !important;
  height: auto !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
}

#nav li a {
  color: rgba(255,255,255,0.78) !important;
  font-size: 14px !important;
  height: auto !important;
  line-height: 28px !important;
  border-radius: 999px !important;
  padding: 0 14px 0 36px !important;
  background-color: transparent !important;
  transition: background 0.18s ease, color 0.18s ease !important;
}

#nav li a:hover {
  background-color: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border-bottom: none !important;
}

#nav li a.active {
  background-color: rgba(82,164,255,0.28) !important;
  color: #ffffff !important;
  border-bottom: none !important;
}

/* =========================================================
   CONTENT AREA — light background, dark text
   ========================================================= */
#content {
  padding: 28px 28px 36px !important;
  background: #f4f7fb !important;
  color: var(--pn-form-text) !important;
  min-height: 280px !important;
}

/* General typography inside content */
#content h1 { color: #0c2d5a !important; font-size: 24px !important; font-weight: 700 !important; }
#content h2 { color: #0c2d5a !important; font-size: 20px !important; font-weight: 700 !important; }
#content h3 { color: #1a3a5c !important; font-size: 16px !important; }
#content p  { color: var(--pn-form-muted) !important; }
#content a  { color: var(--pn-blue) !important; }
#content a:hover { color: var(--pn-blue-deep) !important; border-bottom: 1px dotted var(--pn-blue) !important; }
label { color: #1a2535 !important; font-weight: 600 !important; }

/* =========================================================
   LANDING PAGE BUTTONS
   ========================================================= */
#landing_page #new_ticket,
#landing_page #check_status {
  background: #ffffff !important;
  border: 1px solid var(--pn-form-border) !important;
  border-radius: 14px !important;
  padding: 20px 20px 20px 80px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

#landing_page #new_ticket:hover,
#landing_page #check_status:hover {
  box-shadow: 0 8px 24px rgba(19,112,216,0.18) !important;
  transform: translateY(-2px) !important;
}

#landing_page h1,
#landing_page h2,
#landing_page h3 {
  color: #0c2d5a !important;
}

/* Hide the big logo image on the landing page */
#landing_page > img,
#landing_page img.logo,
#content > img,
.main-content > img {
  display: none !important;
}

/* =========================================================
   ALL FORM INPUTS — white with dark text
   ========================================================= */
input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=number],
input[type=search],
#ticketForm input[type=text],
#ticketForm input[type=email],
#clientLogin input[type=text],
#clientLogin input[type=email],
#clientLogin input[type=password] {
  background: #ffffff !important;
  border: 1px solid var(--pn-form-input-border) !important;
  color: #1a2535 !important;
  border-radius: 8px !important;
  padding: 9px 13px !important;
  font-size: 14px !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06) !important;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus {
  border-color: var(--pn-form-input-focus) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(19,112,216,0.15) !important;
}

/* =========================================================
   TEXTAREAS — white with dark text
   ========================================================= */
textarea,
#content textarea,
#ticketForm textarea,
#clientLogin textarea {
  background: #ffffff !important;
  border: 1px solid var(--pn-form-input-border) !important;
  color: #1a2535 !important;
  border-radius: 8px !important;
  padding: 9px 13px !important;
  font-size: 14px !important;
}

textarea:focus {
  border-color: var(--pn-form-input-focus) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(19,112,216,0.15) !important;
}

/* =========================================================
   SELECT DROPDOWNS — white with dark text
   ========================================================= */
select,
#content select,
#ticketForm select,
#clientLogin select {
  background: #ffffff !important;
  border: 1px solid var(--pn-form-input-border) !important;
  color: #1a2535 !important;
  border-radius: 8px !important;
  padding: 9px 13px !important;
  font-size: 14px !important;
}

select option {
  background: #ffffff !important;
  color: #1a2535 !important;
}

select:focus {
  border-color: var(--pn-form-input-focus) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(19,112,216,0.15) !important;
}

/* =========================================================
   PLACEHOLDER TEXT
   ========================================================= */
::placeholder {
  color: #9aacbf !important;
}

/* =========================================================
   REDACTOR RICH TEXT EDITOR — light with dark text
   ========================================================= */
.redactor-box {
  background: #ffffff !important;
  border: 1px solid var(--pn-form-input-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.redactor-toolbar,
.redactor-toolbar ul,
.re-toolbar {
  background: #eef2f8 !important;
  border-bottom: 1px solid var(--pn-form-input-border) !important;
}

.redactor-toolbar a,
.redactor-toolbar li a,
.re-toolbar a {
  color: #1a2535 !important;
}

.redactor-toolbar a:hover,
.re-toolbar a:hover {
  background: rgba(19,112,216,0.10) !important;
  color: var(--pn-blue) !important;
  border-bottom: none !important;
}

.redactor-editor,
.redactor-box .redactor-editor {
  background: #ffffff !important;
  color: #1a2535 !important;
  min-height: 140px !important;
  padding: 12px !important;
}

/* Status bar at the bottom of Redactor */
.redactor-box .redactor-statusbar {
  background: #f4f7fb !important;
  border-top: 1px solid var(--pn-form-input-border) !important;
  color: var(--pn-form-muted) !important;
  font-size: 12px !important;
}

/* =========================================================
   LOGIN FORM — light card
   ========================================================= */
#clientLogin {
  background: #ffffff !important;
  border: 1px solid var(--pn-form-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
  color: var(--pn-form-text) !important;
}

#clientLogin label {
  color: #1a2535 !important;
}

#clientLogin strong {
  color: #c0392b !important;
}

/* =========================================================
   SUBMIT / ACTION BUTTONS — branded blue
   ========================================================= */
input[type=submit],
button[type=submit],
.button,
.btn,
.pn-btn {
  background: var(--pn-blue) !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 10px 26px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
  text-shadow: none !important;
  box-shadow: 0 4px 12px rgba(19,112,216,0.30) !important;
}

input[type=submit]:hover,
.button:hover {
  background: var(--pn-blue-deep) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

/* Cancel / secondary buttons */
input[type=button],
a.button.secondary {
  background: #e8edf4 !important;
  color: #1a2535 !important;
  border: 1px solid var(--pn-form-border) !important;
  box-shadow: none !important;
}

/* =========================================================
   TICKET TABLE — light
   ========================================================= */
#ticketTable {
  border-color: var(--pn-form-border) !important;
  width: 100% !important;
  background: #ffffff !important;
}

#ticketTable caption {
  background: #e8edf4 !important;
  border-color: var(--pn-form-border) !important;
  color: #0c2d5a !important;
  font-weight: 700 !important;
}

#ticketTable th {
  background: #dce8f8 !important;
  border-color: var(--pn-form-border) !important;
  color: #0c2d5a !important;
}

#ticketTable th a { color: #0c2d5a !important; }

#ticketTable td {
  border-color: var(--pn-form-border) !important;
  color: var(--pn-form-text) !important;
}

#ticketTable tr.alt td {
  background: #f8fafd !important;
}

/* =========================================================
   TICKET INFO / THREAD VIEW — light
   ========================================================= */
.infoTable {
  background: #f0f5fc !important;
}

.infoTable th,
.infoTable td {
  color: var(--pn-form-text) !important;
  border-color: var(--pn-form-border) !important;
}

.thread-entry .header {
  background: #eef2f8 !important;
  border-color: var(--pn-form-border) !important;
  color: var(--pn-form-text) !important;
}

.thread-entry.message .header {
  background: #dce8f8 !important;
  color: #0c2d5a !important;
}

.thread-entry.response .header {
  background: #e8edf4 !important;
}

.thread-entry .thread-body {
  background: #ffffff !important;
  border-color: var(--pn-form-border) !important;
  color: var(--pn-form-text) !important;
}

.thread-body .attachments {
  background: #f4f7fb !important;
  border-top-color: var(--pn-form-border) !important;
}

/* =========================================================
   REPLY AREA — light
   ========================================================= */
#reply {
  background: #f4f7fb !important;
  border: 1px solid var(--pn-form-border) !important;
  border-radius: 10px !important;
}

#reply h2 {
  color: #0c2d5a !important;
  border-bottom-color: var(--pn-form-border) !important;
}

/* =========================================================
   ALERTS / NOTICES
   ========================================================= */
#msg_notice {
  background: #e8f8ee !important;
  border: 1px solid #7dd4a0 !important;
  color: #1a5c35 !important;
  border-radius: 8px !important;
}

#msg_warning, .warning-banner {
  background: #fff8e8 !important;
  border: 1px solid #f0b84a !important;
  color: #7a4f00 !important;
  border-radius: 8px !important;
}

#msg_error {
  background: #fff0f0 !important;
  border: 1px solid #e08080 !important;
  color: #8b0000 !important;
  border-radius: 8px !important;
}

/* =========================================================
   SIDEBAR
   ========================================================= */
.sidebar .content {
  background: #ffffff !important;
  border: 1px solid var(--pn-form-border) !important;
  border-radius: 10px !important;
  color: var(--pn-form-text) !important;
}

/* =========================================================
   KNOWLEDGE BASE
   ========================================================= */
#kb > li {
  border-bottom: 1px solid var(--pn-form-border) !important;
  background: transparent !important;
  color: var(--pn-form-text) !important;
}

#faq ol li a {
  color: var(--pn-blue) !important;
  border-bottom: 1px solid var(--pn-form-border) !important;
}

#faq ol li a:hover {
  background-color: #e8f0fc !important;
  color: var(--pn-blue-deep) !important;
}

/* =========================================================
   SEARCH BAR
   ========================================================= */
.searchbar .search,
.search-form .search {
  background: #ffffff !important;
  border: 1px solid var(--pn-form-input-border) !important;
  color: #1a2535 !important;
  border-radius: 8px !important;
}

/* =========================================================
   FILE DROP AREA
   ========================================================= */
.freetext-files,
.filedrop {
  background: #f0f5fc !important;
  border-color: var(--pn-form-border) !important;
  color: var(--pn-form-muted) !important;
  border-radius: 8px !important;
}

/* =========================================================
   PAGINATION
   ========================================================= */
#pagination li a { color: var(--pn-blue) !important; }
#pagination li a:hover { color: var(--pn-blue-deep) !important; }
#pagination .active { color: #0c2d5a !important; font-weight: 700 !important; }

/* =========================================================
   HIDE DEFAULT OSTICKET FOOTER
   ========================================================= */
#footer {
  display: none !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px) {
  #container {
    width: 100% !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 640px) {
  #content { padding: 18px 16px 28px !important; }
  #nav { padding: 4px 8px !important; flex-wrap: wrap !important; }
}

/* =========================================================
   LANDING PAGE ACTION BUTTONS — text and hover fix
   ========================================================= */

/* Open a New Ticket / Check Ticket Status buttons */
#landing_page a.button,
#landing_page .button,
.open-ticket.button,
.check-status.button,
a.open-ticket,
a.check-status,
#landing_page #new_ticket a,
#landing_page #check_status a,
.front-page-button a,
a.front-page-button {
  background: var(--pn-blue) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 11px 26px !important;
  border: none !important;
  text-shadow: none !important;
  box-shadow: 0 4px 12px rgba(19,112,216,0.30) !important;
  display: inline-block !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
  text-decoration: none !important;
}

#landing_page a.button:hover,
#landing_page .button:hover,
a.open-ticket:hover,
a.check-status:hover,
#landing_page #new_ticket a:hover,
#landing_page #check_status a:hover,
a.front-page-button:hover {
  background: var(--pn-blue-deep) !important;
  color: #ffffff !important;
  border-bottom: none !important;
  transform: translateY(-1px) !important;
}