/* =========================================================
   ImpelUp Timeclock Theme v2
   Matches welcome.php dark login card style
   All screens: login, confirmation, error, logout
   ========================================================= */

html, body {
  background:       #101012 !important;
  background-color: #101012 !important;
  margin: 0 !important;
}

/* Outer width-100% table → transparent */
table[width="100%"] {
  background:       transparent !important;
  background-color: transparent !important;
}

/* Card container (all timeclock screens use table width=460px) */
center table[width="460px"] {
  background:    #1e1e22 !important;
  border-radius: 12px !important;
  overflow:      hidden !important;
  border:        1px solid rgba(255,255,255,.08) !important;
  box-shadow:    0 8px 32px rgba(0,0,0,.5) !important;
}

/* Header row wrapper → transparent */
center table[width="460px"] tr[bgcolor="white"] {
  background:       transparent !important;
  background-color: transparent !important;
}

/* Header TDs → red */
center table[width="460px"] td[bgcolor="#015B91"],
center table[width="460px"] td[bgcolor="015B91"] {
  background:       #cc0000 !important;
  background-color: #cc0000 !important;
}

/* Replace VICIdial logo with ImpelUp logo */
center table[width="460px"] img[alt="Agent Screen"] {
  content:    url('/agc/theme/impelup-logo.png') !important;
  width:      140px !important;
  height:     auto !important;
  max-height: 42px !important;
  object-fit: contain !important;
  padding:    8px !important;
}

/* "Timeclock" title */
center table[width="460px"] .sh_text_white,
center table[width="460px"] font.sh_text_white {
  color:          #ffffff !important;
  font-size:      18px !important;
  font-weight:    700 !important;
  letter-spacing: .04em !important;
}

/* All non-header rows → dark */
center table[width="460px"] tr:not([bgcolor="white"]) td {
  background:       #1e1e22 !important;
  background-color: #1e1e22 !important;
  color:            rgba(255,255,255,.85) !important;
}

/* All text/font elements inside card → light */
center table[width="460px"] font,
center table[width="460px"] td {
  color: rgba(255,255,255,.85) !important;
}

/* Links inside card */
center table[width="460px"] a {
  color:           #6ab81e !important;
  font-weight:     600 !important;
  text-decoration: none !important;
}
center table[width="460px"] a:hover { color: #ffffff !important; }

/* Input fields */
center table[width="460px"] input[type="text"],
center table[width="460px"] input[type="password"],
center table[width="460px"] input[type="TEXT"],
center table[width="460px"] input[type="PASSWORD"] {
  background:    #2a2a30 !important;
  color:         #ffffff !important;
  border:        1px solid rgba(255,255,255,.2) !important;
  border-radius: 5px !important;
  padding:       6px 10px !important;
}

/* SUBMIT button — grey → green hover */
center table[width="460px"] input[type="submit"],
center table[width="460px"] input[type="SUBMIT"] {
  background:     #e2e2e7 !important;
  color:          #1a1a1a !important;
  border:         1px solid #c4c4ca !important;
  border-radius:  5px !important;
  padding:        6px 20px !important;
  font-weight:    700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  cursor:         pointer !important;
  transition:     background .15s, color .15s, border-color .15s !important;
}
center table[width="460px"] input[type="submit"]:hover,
center table[width="460px"] input[type="SUBMIT"]:hover {
  background:   #6ab81e !important;
  color:        #1a1a1a !important;
  border-color: #6ab81e !important;
}

/* Hide VERSION / BUILD text */
center table[width="460px"] .body_tiny { display: none !important; }

/* Status messages (success/error above card) */
.sd_text { color: #6ab81e !important; font-weight: 700 !important; font-size: 14px !important; }
