/* Transactium branding for osTicket client portal. Loaded after theme.css. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Source+Sans+3:wght@400;600&display=swap');

:root{
  --t-dark:#1f1f1f; --t-accent:#3a84df; --t-accent-dark:#2d6bbd; --t-cyan:#35ddfa;
  --t-bg:#f3f5f9; --t-text:#3d4450; --t-muted:#78808c; --t-border:#dde2ea;
}
html{ background:var(--t-bg); }
body{
  background:var(--t-bg) !important;
  font-family:'Source Sans 3','Source Sans Pro',system-ui,-apple-system,'Segoe UI',sans-serif !important;
  color:var(--t-text); font-size:16px; line-height:1.55;
}
h1,h2,h3,#nav li a,#footer,input[type=submit],input[type=reset],input[type=button],button{
  font-family:'Poppins','Source Sans 3',system-ui,sans-serif;
}
h1{ font-size:26px; font-weight:600; color:var(--t-dark); border:0; }
h2,.subject{ font-weight:600; color:var(--t-dark); }
a{ color:var(--t-accent); } a:hover{ color:var(--t-accent-dark); }

/* Page card */
#container{
  width:auto !important; max-width:920px; margin:36px auto !important;
  border-radius:16px; overflow:hidden; background:#fff !important;
  box-shadow:0 10px 40px rgba(20,30,50,.12) !important;
}
@media (max-width:960px){ #container{ margin:0 !important; border-radius:0; } }

/* Dark brand header */
#header{
  height:auto !important; min-height:84px; padding:17px 32px !important;
  background:var(--t-dark); border-bottom:3px solid var(--t-accent);
  display:flex; align-items:center; justify-content:space-between; flex-direction:row-reverse;
}
#header #logo{ height:auto !important; display:flex; align-items:center; float:none !important; }
#header #logo img{ max-height:50px !important; max-width:260px !important; }
#header .valign-helper{ display:none; }
#header p,#header .pull-right{ width:auto !important; float:none !important; margin:0 !important; padding:0 !important; color:#c7ccd4 !important; font-size:14px; }
#header p a,#header .pull-right a{ color:#fff !important; text-decoration:none; }
#header p a:hover{ color:var(--t-cyan) !important; }
.clear{ clear:both; }

/* Tab navigation */
#nav{
  margin:0 !important; padding:0 24px !important; height:auto !important;
  background:#fff !important; border:0 !important; border-bottom:1px solid var(--t-border) !important; box-shadow:none !important;
  display:flex; flex-wrap:wrap; gap:4px;
}
#nav li{ display:block !important; }
#nav li a{
  height:auto !important; line-height:1.2 !important; margin:0 !important;
  padding:16px 18px 14px 40px !important; border-radius:0 !important; background-position:16px 50% !important;
  color:var(--t-muted) !important; font-size:14px; font-weight:500; text-decoration:none;
  border-bottom:3px solid transparent; transition:color .15s,border-color .15s;
}
#nav li a:hover{ background-color:transparent !important; color:var(--t-accent) !important; }
#nav li a.active{ background-color:transparent !important; color:var(--t-dark) !important; border-bottom-color:var(--t-accent); }

/* Content */
#content{ margin:0 !important; padding:32px 40px 40px !important; min-height:340px; }
hr{ border:0; border-top:1px solid var(--t-border); }
#clientLogin,#landing_page{ background:transparent; }
.main-content{ width:auto !important; max-width:100%; }

/* Forms */
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=search],input:not([type]),select,textarea{
  border:1px solid var(--t-border) !important; border-radius:8px !important; padding:10px 12px !important;
  background:#fff; font:inherit; color:var(--t-text); max-width:100%; box-sizing:border-box;
  transition:border-color .15s,box-shadow .15s;
}
input[type=text],input[type=email],input[type=password],input[type=tel],input:not([type]),select{ min-width:320px; }
select{ padding-right:30px !important; }
textarea{ width:100%; }
input:focus,select:focus,textarea:focus{
  outline:0 !important; border-color:var(--t-accent) !important; box-shadow:0 0 0 3px rgba(58,132,223,.2);
}
label,.form-header,.form-field label,td.multi-line.required,#clientLogin label{ color:var(--t-dark); }
.error,font.error,span.error{ color:#d64545; }
label.required,.required{ color:var(--t-dark); }
label.required font.error,.required .error{ color:#d64545; }
.form-header h3,.form_head h3{ font-family:'Poppins',sans-serif; font-weight:600; }

/* Buttons */
input[type=submit],input[type=reset],input[type=button],button,.button,a.button{
  background:var(--t-accent) !important; color:#fff !important; border:0 !important; border-radius:8px !important;
  padding:10px 22px !important; font-size:14px; font-weight:500; cursor:pointer; box-shadow:none !important;
  transition:background .15s,transform .05s;
}
input[type=submit]:hover,button:hover,.button:hover{ background:var(--t-accent-dark) !important; }
input[type=submit]:active,button:active{ transform:translateY(1px); }
input[type=reset],input[value=Cancel],input[value=Reset]{ background:#eef1f6 !important; color:var(--t-text) !important; }
input[type=reset]:hover,input[value=Cancel]:hover{ background:#e1e6ee !important; }
p[align=center],.buttons{ margin-top:24px; }

/* Messages */
#msg_notice,#msg_warning,#msg_error{ border-radius:10px !important; padding:12px 16px !important; border:0 !important; background-image:none !important; }
#msg_notice{ background:#e8f6ee !important; color:#1c6b3d !important; }
#msg_warning{ background:#fff4e0 !important; color:#8a5a00 !important; }
#msg_error{ background:#fde9e9 !important; color:#a12a2a !important; }

/* Tables (ticket lists) */
table.list{ border:1px solid var(--t-border); border-radius:10px; overflow:hidden; }
table.list thead th{ background:#f7f9fc; color:var(--t-dark); border:0; }

/* Footer */
#footer{ max-width:920px; margin:0 auto; padding:0 20px 30px; color:var(--t-muted) !important; }
#footer a{ color:var(--t-muted) !important; }