/* Cyber-Firm.com brand overrides on top of the default osTicket theme.
   Colors sampled from the CyberFirm Solutions logo. Kept as a separate
   file (not edited in theme.css) so it's easy to find/change later. */

:root {
  --cf-radius-sm: 4px;
  --cf-radius: 6px;
  --cf-radius-lg: 10px;
  --cf-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --cf-shadow: 0 1px 3px rgba(16, 24, 40, 0.12), 0 1px 2px rgba(16, 24, 40, 0.08);
  --cf-shadow-lg: 0 8px 20px rgba(16, 24, 40, 0.16);
  --cf-border: #d7d7e0;
  --cf-focus-ring: 0 0 0 3px rgba(65, 64, 113, 0.25);
}

/* theme.css's #nav is a fixed-height (20px), no-wrap bar sized for the
   original 4 nav items. The 2 new Account Manager links (Assets,
   Users) also have no matching theme.css icon rule (e.g. "a.home"),
   so they inherit the base rule's 32px left padding reserved for an
   icon they don't have — wasted space. Reclaiming it keeps all 6
   items on one line; the wrap/height:auto below stays only as a
   fallback so items drop to a second line instead of spilling
   outside the container if it ever doesn't fit (narrower window,
   more items added later) rather than a hard requirement. */
#nav {
  white-space: normal;
  height: auto;
  padding-bottom: 4px;
}
#nav li {
  display: inline-block;
  margin-bottom: 4px;
}
#nav li a.assets,
#nav li a.orgusers {
  padding-left: 10px;
}
#nav li a {
  margin-left: 6px;
}

a, .link {
  color: #414071;
}
a:hover, .link:hover {
  border-bottom-color: #414071;
}

h1 {
  color: #414071;
}

#nav li a.active,
#nav li a:hover {
  background-color: #e2e1f0;
  color: #2a2950;
}
#nav li a:hover {
  color: #414071;
}

.blue.button,
.blue.button:visited {
  background-color: #414071;
}
.blue.button:hover {
  background-color: #2a2950;
}

/* Bootstrap-inspired modernization (2026-09-23): softer rounded corners,
   layered shadows, and focus/hover transitions on buttons and form
   fields, plus a card-style outer container. Purely additive CSS on
   top of theme.css's own rules — no markup or JS changes. */
.button, .button:visited {
  border-radius: var(--cf-radius);
  box-shadow: var(--cf-shadow);
  text-shadow: none;
  border-bottom: none;
  transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.button:hover {
  box-shadow: var(--cf-shadow-lg);
}
.button:active {
  top: 0;
  box-shadow: var(--cf-shadow-sm);
  transform: translateY(1px);
}
.button:focus-visible {
  outline: none;
  box-shadow: var(--cf-focus-ring);
}

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=search], textarea, select {
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-sm);
  padding: 6px 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
input[type=tel]:focus, input[type=number]:focus, input[type=search]:focus,
textarea:focus, select:focus {
  border-color: #414071;
  box-shadow: var(--cf-focus-ring);
  outline: none;
}

#container {
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-lg);
  overflow: hidden;
}

/* Plain form submit/reset/cancel inputs (e.g. the Open Ticket form) have
   no theme.css styling at all outside the login form — give them the
   same primary/secondary treatment as the SCP admin side. */
input[type=submit] {
  border: none;
  border-radius: var(--cf-radius);
  padding: 7px 16px;
  background-color: #414071;
  color: #fff;
  box-shadow: var(--cf-shadow-sm);
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}
input[type=submit]:hover {
  background-color: #2a2950;
  box-shadow: var(--cf-shadow);
}
input[type=reset], input[type=button] {
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  padding: 7px 16px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
input[type=reset]:hover, input[type=button]:hover {
  background-color: #f5f5f7;
  border-color: #414071;
  color: #2a2950;
}
input[type=submit]:focus-visible, input[type=reset]:focus-visible,
input[type=button]:focus-visible {
  outline: none;
  box-shadow: var(--cf-focus-ring);
}

/* The login page's "Sign In" button (#clientLogin input.btn[type=submit])
   was rendering invisible: theme.css's own #clientLogin div input rule
   (an ID selector, meant only for the email/password text fields) also
   incidentally matches this submit button since it's nested inside a
   div ancestor, and its higher specificity overrode our navy background
   above with white — leaving white text on a white button. Re-declaring
   with matching ID-selector specificity restores the intended styling. */
#clientLogin input[type=submit] {
  background-color: #414071;
  color: #fff;
}
#clientLogin input[type=submit]:hover {
  background-color: #2a2950;
}

/* Mobile: theme.css has zero @media queries and a fixed 840px #container,
   so nothing below this reflows on a phone without these overrides. */
#container {
  width: auto;
  max-width: 840px;
}

@media (max-width: 640px) {
  body {
    background: #c8c8c8;
  }
  #container {
    margin: 0 10px;
    border-radius: var(--cf-radius);
  }
  #header {
    height: auto;
    padding: 10px 15px;
  }
  #header p {
    width: auto;
  }
  #logo {
    display: block;
    height: auto;
  }
  #header #logo img {
    max-width: 220px;
  }
  #nav {
    white-space: normal;
    height: auto;
    margin: 0 10px;
  }
  #nav li {
    display: inline-block;
    margin-bottom: 4px;
  }
  #content {
    margin: 0 10px;
  }
  .main-content {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
  }
  #landing_page #new_ticket,
  #landing_page #check_status {
    width: auto;
  }
  .search-form,
  .search-form input.search {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
  }
  #ticketInfo,
  #ticketInfo tbody,
  #ticketInfo tr,
  #ticketInfo td,
  table[width="800"] {
    display: block;
    width: 100% !important;
  }
  table[width="800"] input[type="text"],
  table[width="800"] input[type="email"],
  table[width="800"] input[type="tel"],
  table[width="800"] select,
  table[width="800"] textarea {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  .pull-right {
    float: none;
    display: block;
    margin: 10px 0;
  }
  .button {
    display: block;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin-bottom: 8px;
  }
}

/* Reusable table style for new client-portal screens (Organization
   Assets/Users) — theme.css only styles #ticketTable by ID, so a
   plain <table> elsewhere renders with zero borders/header styling.
   Matches the modernized radius/shadow tokens above rather than
   copying #ticketTable's older skeuomorphic borders verbatim. */
.client-table {
  width: 100%;
  max-width: 800px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  box-shadow: var(--cf-shadow-sm);
  overflow: hidden;
}
.client-table th {
  background: #f5f5fa;
  color: #33313f;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--cf-border);
  font-weight: bold;
}
.client-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--cf-border);
}
.client-table tbody tr:last-child td {
  border-bottom: none;
}
.client-table tbody tr:nth-child(even) td {
  background: #fafafd;
}

/* Account, ticket-history, and knowledge-base pages share these layouts. */
@media (max-width: 640px) {
  #header { display: flex; flex-wrap: wrap; align-items: center; }
  #header #logo { float: none; width: auto; max-width: 100%; height: auto; }
  #header #logo img { max-width: 100%; height: auto; }
  #header > .pull-right { width: 100%; margin: 0; }
  #nav li a { min-height: 40px; display: flex; align-items: center; box-sizing: border-box; }
  #ticketTable, .client-table { display: block; width: 100%; overflow-x: auto; }
  #content .select2-container { width: 100% !important; max-width: 100%; min-width: 0; }
  #content .select2-selection, #content .select2-selection__rendered { box-sizing: border-box; max-width: 100%; }
  #content .select2-selection { min-height: 44px; }
  #content .select2-selection__rendered { white-space: normal; }
  #content select.select2-hidden-accessible {
    width: 1px !important; height: 1px !important; min-height: 0; max-width: 1px;
    padding: 0; border: 0;
  }
  #content table.padded td, #content table.padded th { height: auto; padding: 6px 0; }
  #content form > table.padded,
  #content form > table.padded > tbody,
  #content form > table.padded > tbody > tr,
  #content form > table.padded > tbody > tr > td,
  #content form > table[width="100%"],
  #content form > table[width="100%"] > tbody,
  #content form > table[width="100%"] > tbody > tr,
  #content form > table[width="100%"] > tbody > tr > td,
  #content form > table[width="100%"] > tbody > tr > th {
    display: block; width: 100%; box-sizing: border-box;
  }
  #content input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
  #content select, #content textarea {
    max-width: 100%; box-sizing: border-box; font-size: 16px; min-height: 44px;
  }
  #reply table { width: 100%; }
  #reply textarea, #content .redactor-box { width: 100% !important; box-sizing: border-box; }
  .thread-body { overflow-wrap: anywhere; }
  .thread-body img { max-width: 100%; height: auto; }
  .search-form { display: flex; flex-wrap: wrap; gap: 8px; }
  .search-form form { width: 100%; }
  .search-form input.search { width: 100%; margin-bottom: 8px; }
  #msg_error, #msg_warning, #msg_notice { height: auto; }
}

/* Keep validation colors on errors, not the primary ticket action. */
#content input[type=submit] {
  color: #fff !important; /* Draft tracking sets an inline red color. */
  background-color: #414071;
}
#ticketForm input[type=submit]:hover {
  background-color: #2a2950;
}

@media (max-width: 640px) {
  /* The sidebar must stop floating before the welcome text can reflow. */
  #landing_page .sidebar {
    float: none;
    width: 100%;
    margin: 0 0 20px;
    padding: 0;
    box-sizing: border-box;
  }
  #landing_page .main-content {
    clear: both;
    width: 100%;
    margin: 0;
  }

  /* Replace the fixed-width, two-column authentication layout. */
  #clientLogin {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 15px;
    box-sizing: border-box;
    background-image: none;
  }
  #clientLogin > div,
  #clientLogin > div > div {
    display: block !important; /* Overrides inline table-row/table-cell. */
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  #clientLogin .login-box,
  #clientLogin .instructions,
  #clientLogin > div > div {
    padding: 0;
    float: none;
    box-shadow: none;
    border: 0;
  }
  #clientLogin > div > div + div {
    margin-top: 16px;
    padding: 0 !important; /* The sign-in account links use inline padding. */
  }
  #clientLogin div label,
  #clientLogin #email,
  #clientLogin #ticketno,
  #clientLogin input[type=text],
  #clientLogin input[type=password] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    float: none;
    margin-right: 0;
  }
  #clientLogin strong {
    padding-left: 0;
  }

  /* A block table alone leaves its anonymous table grid shrink-wrapped. */
  #ticketForm > table,
  #ticketForm > table > tbody,
  #ticketForm > table > tbody > tr,
  #ticketForm > table > tbody > tr > td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  #ticketForm > table td {
    padding-left: 0;
    padding-right: 0;
  }
  #ticketForm .redactor-box,
  #ticketForm .redactor-editor {
    max-width: 100%;
    box-sizing: border-box;
  }
  #ticketForm .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  #ticketForm .buttons input {
    flex: 1 1 auto;
  }
  #clientLogin input,
  #ticketForm input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
  #ticketForm select,
  #landing_page .button {
    min-height: 44px;
    font-size: 16px;
  }
}