/* IJGA helpdesk skin: loaded after osTicket's theme.css. */
:root { --ijga-green:#1fa84f; --ijga-green-dark:#168a3e; --ijga-navy:#2b3a42; --ijga-bg:#f3f6f4; --ijga-line:#dfe5e1; }
html, body { background: var(--ijga-bg); }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ijga-navy); }
#container { width: auto; max-width: 880px; margin: 0 auto; padding: 0 16px; background: none; border: 0; box-shadow: none; }
#header { height: auto; padding: 22px 0 12px; background: none; display: flex; align-items: center; justify-content: space-between; }
#header #logo { float: none; display: flex; align-items: center; gap: 14px; text-decoration: none; }
#header #logo .valign-helper { display: none; }
#header #logo img { height: 46px; width: auto; max-width: none; max-height: none; }
#header .site-name { font-size: 20px; font-weight: 600; color: var(--ijga-navy); padding-left: 14px; border-left: 2px solid var(--ijga-line); }
#header .pull-right { float: none; order: 2; font-size: 13px; }
#header .pull-right a { color: var(--ijga-green-dark); }
hr { display: none; }
#nav { background: none; height: auto; padding: 0; margin: 0 0 18px; border: 0; display: flex; gap: 6px; flex-wrap: wrap; }
#nav li { float: none; background: none; }
#nav li a, #nav li a.home, #nav li a.new, #nav li a.status, #nav li a.tickets, #nav li a.kb { background-image: none; padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--ijga-navy); border: 1px solid var(--ijga-line); background-color: #fff; text-shadow: none; }
#nav li a.active, #nav li a:hover { background-color: var(--ijga-green); color: #fff; border-color: var(--ijga-green); }
body.sec-home #nav { display: none; }
#content { width: auto; background: #fff; border: 1px solid var(--ijga-line); border-radius: 14px; padding: 28px; box-shadow: 0 1px 3px rgba(0,0,0,.04); min-height: 0; }
body.sec-home #content { background: none; border: 0; box-shadow: none; padding: 8px 0; }
#content h1 { font-size: 26px; color: var(--ijga-navy); }
#content h3 { color: var(--ijga-navy); }
.ijga-home .hero { text-align: center; padding: 18px 0 26px; }
.ijga-home .hero h1 { font-size: 34px; margin: 0 0 8px; }
.ijga-home .hero p { margin: 0 auto; max-width: 520px; font-size: 16px; color: #5b6a72; line-height: 1.5; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.tile { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--ijga-line); border-radius: 14px; padding: 20px 18px; text-decoration: none; color: var(--ijga-navy); transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.tile:hover, .tile:focus { border-color: var(--ijga-green); box-shadow: 0 4px 14px rgba(31,168,79,.18); transform: translateY(-1px); }
.tile-icon { font-size: 30px; line-height: 1; }
.tile-name { font-size: 17px; font-weight: 600; }
.home-secondary { text-align: center; margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.btn-secondary { display: inline-block; padding: 12px 22px; border-radius: 999px; background: var(--ijga-navy); color: #fff; text-decoration: none; font-weight: 600; }
.btn-secondary:hover { background: #1f2b31; }
.link-quiet { color: #5b6a72; font-size: 14px; }
/* forms */
#content input[type=text], #content input[type=email], #content input[type=password], #content select, #content textarea { border: 1px solid #c9d2cd; border-radius: 8px; padding: 9px 10px; font-size: 15px; max-width: 100%; box-sizing: border-box; }
#content input[type=submit], #content input[type=button], #content button, .button, .green.button, .blue.button { background: var(--ijga-green); color: #fff; border: 0; border-radius: 8px; padding: 10px 20px; font-size: 15px; cursor: pointer; text-shadow: none; background-image: none; }
#content input[type=submit]:hover, #content button:hover { background: var(--ijga-green-dark); }
#content input[type=reset], #content input[type=button][name=cancel] { background: #e7ece9; color: var(--ijga-navy); }
#footer { text-align: center; color: #7a878e; font-size: 13px; padding: 24px 0 40px; background: none; border: 0; }
#footer a { color: #7a878e; }
@media (max-width: 600px) {
  #header { flex-direction: column; align-items: flex-start; gap: 8px; }
  #header #logo img { height: 38px; }
  #content { padding: 18px; border-radius: 10px; }
  .ijga-home .hero h1 { font-size: 27px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile { flex-direction: column; text-align: center; padding: 18px 10px; gap: 8px; }
}
#footer #poweredBy { background: none; display: inline; width: auto; height: auto; text-indent: 0; padding: 0; color: #7a878e; }
#footer p { margin: 4px 0; }
/* open-ticket form fixes */
#content input[type=tel] { border: 1px solid #c9d2cd; border-radius: 8px; padding: 9px 10px; font-size: 15px; width: 220px; max-width: 100%; box-sizing: border-box; }
#content input[name$="-ext"] { width: 70px; margin-left: 4px; }
#content input[type=reset] { display: none; }
#content form table label > span { font-weight: 600; }
#content form input[type=submit] + input[type=reset] + input[type=button], #content p[style*="center"] input { margin: 0 4px; }
/* mobile overflow: the open form is a fixed 800px table, and redactor/captcha size themselves from it */
#content table[width] { width: 100% !important; max-width: 100%; }
#content form, #content table, #content td { box-sizing: border-box; max-width: 100%; }
#content .redactor-box, #content .redactor-styles, #content .redactor-toolbar, #content .filedrop, #content textarea.richtext { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
#content .redactor-toolbar { flex-wrap: wrap; }
#content .redactor-toolbar li { float: none; display: inline-block; }
#content .redactor-in { max-width: 100%; overflow-wrap: anywhere; }
#content tr.captchaRow td { display: block; width: 100%; padding: 4px 0; }
#content tr.captchaRow .captcha img { float: none; display: block; max-width: 100%; height: auto; margin-bottom: 8px; }
@media (max-width: 600px) { #content input[type=text], #content input[type=email], #content input[type=tel], #content select { width: 100%; } #content input[name$="-ext"] { width: 70px; } #content input[type=tel] { width: calc(100% - 100px); } }
#header .pull-right, #header p { width: auto !important; max-width: 100%; margin: 0; }
#header .pull-right p:not(:has(a)) { display: none; }
/* polish pass */
#nav, #nav li { box-shadow: none !important; border: 0 !important; background: none !important; }
#nav { padding: 0 !important; margin: 4px 0 18px !important; width: auto !important; }
#nav li a { box-shadow: none !important; }
#content form td { padding-top: 6px; }
#content form td[colspan] { padding-top: 14px; }
#content form td > label, #content form td > div { display: block; }
#content select { width: 100%; max-width: 100%; height: 44px; background: #fff; appearance: auto; }
#content select + font.error, #content select ~ font { display: inline-block; margin-top: 4px; }
#content input[type=text], #content input[type=email], #content input[type=tel] { height: 44px; }
#content input[type=tel] { width: 100% !important; }
#content tr.captchaRow input { height: 44px; width: 140px !important; }
#content h3 { margin: 22px 0 4px; font-size: 18px; }
@media (max-width: 600px) { #container { padding: 0 12px; } #content { padding: 18px 16px; } }
#content select { display: inline-block; width: calc(100% - 18px); vertical-align: middle; margin: 0; }
#content select ~ font.error, #content select + font { display: inline; margin: 0 0 0 4px; vertical-align: middle; }
#content form td > b, #content form td > strong { display: block; margin-bottom: 4px; }
#content select#topicId { width: calc(100% - 20px) !important; }
#content select#topicId + font { display: inline !important; float: none !important; margin: 0 0 0 4px !important; padding: 0 !important; }