/* =========================================================
   INEXTRIX-STYLE BASELINE (SAFE)
   Purpose: Make Vicidial clean/modern WITHOUT changing PHP.
   ========================================================= */

:root{
  --bg:#eef1f5;
  --card:#ffffff;
  --border:#d9dee8;
  --text:#1f2937;
  --muted:#6b7280;

  --green:#8B9F4C;
  --green2:#6E7F36;
  --red:#9A050D;

  --radius:14px;
  --shadow:0 8px 20px rgba(0,0,0,.08);

  --btn-h:34px;
  --btn-font:11px;
}

html,body{
  margin:0 !important;
  padding:0 !important;
  background:var(--bg) !important;
  color:var(--text) !important;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
}

/* Make tables behave a bit cleaner */
table{
  border-collapse:separate !important;
  border-spacing:0 !important;
}

/* =========================================================
   MAIN “CARD” LOOK (works even if we don’t know exact IDs)
   We target common Vicidial wrapper tables safely.
   ========================================================= */

/* Most Vicidial agent pages have a big main table block */
#MainTable,
#main_table,
#vicidial_form,
table[width="100%"]{
  background:transparent !important;
}

/* Try to give the core working area a card feel without breaking layout */
#MainTable td,
#main_table td{
  vertical-align:top !important;
}

/* The central customer info area usually has a large TD we can soften */
#MainTable > tbody > tr > td,
#main_table > tbody > tr > td{
  padding:10px !important;
}

/* =========================================================
   INPUTS / SELECTS
   ========================================================= */

input, select, textarea{
  background:#fff !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  border-radius:12px !important;
  padding:7px 10px !important;
  outline:none !important;
  box-shadow:none !important;
}

input:focus, select:focus, textarea:focus{
  border-color:#9fb7ff !important;
  box-shadow:0 0 0 3px rgba(59,130,246,.15) !important;
}

/* =========================================================
   LEFT BUTTON STACK (your known IDs)
   ========================================================= */

#WebFormSpanTwo,
#ParkControl,
#XferControl,
#QuickXfer,
#HangupControl{
  display:block !important;
  position:relative !important;
  width:180px !important;
  height:var(--btn-h) !important;
  line-height:var(--btn-h) !important;
  margin:8px 10px !important;
  padding:0 !important;

  background:var(--green) !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:12px !important;
  box-shadow:0 2px 8px rgba(0,0,0,.08) !important;

  text-align:center !important;
  overflow:hidden !important;
}

/* Hide the legacy images inside these buttons */
#WebFormSpanTwo img,
#ParkControl img,
#XferControl img,
#QuickXfer img,
#HangupControl img{
  position:absolute !important;
  inset:0 !important;
  opacity:0 !important;
}

/* Replace with clean labels */
#WebFormSpanTwo::before,
#ParkControl::before,
#XferControl::before,
#QuickXfer::before,
#HangupControl::before{
  color:#fff !important;
  font-weight:800 !important;
  font-size:var(--btn-font) !important;
  letter-spacing:.4px !important;
  text-transform:uppercase !important;
}

#WebFormSpanTwo::before{content:"Web Form 2";}
#ParkControl::before{content:"Park Call";}
#XferControl::before{content:"Transfer - Conf";}
#QuickXfer::before{content:"Quick Transfer";}
#HangupControl::before{content:"Hangup Customer";}

#WebFormSpanTwo:hover,
#ParkControl:hover,
#XferControl:hover,
#QuickXfer:hover,
#HangupControl:hover{
  background:var(--green2) !important;
}

/* =========================================================
   START / STOP RECORDING (state-aware via button value)
   ========================================================= */

input[value*="START"][value*="RECORD"]{
  background:var(--green) !important;
  color:#fff !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:12px !important;
  height:var(--btn-h) !important;
  font-weight:800 !important;
  font-size:var(--btn-font) !important;
  text-transform:uppercase !important;
  letter-spacing:.4px !important;
  padding:0 12px !important;
  box-shadow:0 2px 8px rgba(0,0,0,.08) !important;
}

input[value*="STOP"][value*="RECORD"]{
  background:var(--red) !important;
  color:#fff !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:12px !important;
  height:var(--btn-h) !important;
  font-weight:800 !important;
  font-size:var(--btn-font) !important;
  text-transform:uppercase !important;
  letter-spacing:.4px !important;
  padding:0 12px !important;
  box-shadow:0 2px 8px rgba(0,0,0,.12) !important;
}

/* SEND DTMF button (shows in your screenshot) */
input[value*="DTMF"]{
  background:#e9eef6 !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  border-radius:12px !important;
  height:30px !important;
  font-weight:800 !important;
  font-size:10px !important;
  text-transform:uppercase !important;
  letter-spacing:.4px !important;
  padding:0 10px !important;
}

/* =========================================================
   YOU ARE PAUSED / ACTIVE badge (make it match the new look)
   ========================================================= */

#DialControl img{
  border-radius:12px !important;
  border:1px solid rgba(0,0,0,.12) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.08) !important;
}

/* =========================================================
   HIDE VERSION/BUILD/SERVER FOOTER
   ========================================================= */

#debugbottomspan{ display:none !important; }

/* =========================================================
   LOGOUT SHOULD STAY VISIBLE
   ========================================================= */

a[href*="logout"], a[href*="LOGOUT"]{
  color:var(--text) !important;
  font-weight:800 !important;
  text-decoration:none !important;
}
a[href*="logout"]:hover, a[href*="LOGOUT"]:hover{
  text-decoration:underline !important;
}

#ONE_TEAM_PANEL_WRAP { outline: 5px solid red !important; }