/* =========================================================
   SGIT FINAL OVERRIDES (put ABSOLUTELY LAST)
   Fix: washed tabs + grey Tasks + editor white areas
   ========================================================= */

/* 1) Tabs: force both states to be visible & blue */
ul.tabs.clean.threads li,
ul.tabs.clean.threads li a{
  opacity: 1 !important;
  filter: none !important;
}

ul.tabs.clean.threads li:not(.active) a{
  background: rgba(59,130,246,.14) !important;
  border-color: rgba(59,130,246,.30) !important;
  color: rgba(229,231,235,.92) !important;
}

ul.tabs.clean.threads li.active a{
  background: linear-gradient(90deg, rgba(59,130,246,.62), rgba(34,211,238,.24)) !important;
  border-color: rgba(96,165,250,.78) !important;
  color: #ffffff !important;
}

/* 2) If theme uses "a.tab" or other variants */
#ticket_tabs_container ul.tabs li a,
#ticket_tabs_container ul.tabs.clean li a{
  opacity: 1 !important;
  filter: none !important;
}

/* 3) Redactor: some installs paint inner wrapper white */
.redactor-box,
.redactor-layer,
.redactor-editor{
  background: rgba(2,6,23,.55) !important;
  color: #e5e7eb !important;
}

.redactor-editor p,
.redactor-editor span,
.redactor-editor div{
  color: inherit !important;
  background: transparent !important;
}

/* 4) Remove any leftover "milky" global filters from older theme */
#ticket_tabs_container,
#ticketThread,
#response_options{
  opacity: 1 !important;
  filter: none !important;
}
/* =========================================================
   SGIT.gr – osTicket Staff Dark Azure Theme (FINAL)
   Azure blue + cyan + green accents
   Clean tabs, dropdowns, thread, editor (mobile OK)
   Put LAST in custom.css
   ========================================================= */

:root{
  --sgit-bg:#0b1220;
  --sgit-panel:#0f172a;
  --sgit-panel2:#111c33;
  --sgit-border:rgba(148,163,184,.18);
  --sgit-border2:rgba(148,163,184,.14);

  --sgit-text:#e5e7eb;
  --sgit-muted:#a7b0c0;

  --sgit-blue:#3b82f6;
  --sgit-blue2:#60a5fa;
  --sgit-cyan:#22d3ee;
  --sgit-green:#22c55e;

  --sgit-shadow:0 10px 30px rgba(0,0,0,.35);
  --sgit-radius:14px;
}

/* =========================
   BASE / PAGE
   ========================= */
html, body, #container, #content, .content{
  background:var(--sgit-bg) !important;
  color:var(--sgit-text) !important;
}

a{ color:#93c5fd !important; }
a:hover{ color:#bfdbfe !important; }

/* =========================
   TOP / STICKY BAR (ticket view)
   ========================= */
.sticky.bar{
  background: linear-gradient(180deg, rgba(17,28,51,.92), rgba(15,23,42,.88)) !important;
  border: 1px solid var(--sgit-border) !important;
  box-shadow: var(--sgit-shadow) !important;
  backdrop-filter: blur(10px);
}
.sticky.bar .content{ padding:10px 12px !important; }

/* Action buttons (top right) */
.action-button{
  background: rgba(148,163,184,.10) !important;
  border: 1px solid var(--sgit-border) !important;
  color: var(--sgit-text) !important;
  border-radius: 999px !important;
  padding: 8px 10px !important;
  margin-left: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.20) !important;
  transition: transform .08s ease, background .12s ease, border-color .12s ease !important;
}
.action-button:hover{
  background: rgba(59,130,246,.18) !important;
  border-color: rgba(59,130,246,.35) !important;
  transform: translateY(-1px) !important;
}
.action-button:active{ transform: translateY(0) !important; }

/* ERP Actions – make it pop */
[data-dropdown="#action-dropdown-dolibarr"].action-button{
  background: linear-gradient(90deg, rgba(59,130,246,.22), rgba(34,211,238,.16), rgba(34,197,94,.12)) !important;
  border-color: rgba(34,211,238,.25) !important;
}

/* =========================
   DROPDOWNS (osTicket)
   ========================= */
.action-dropdown{
  background: rgba(15,23,42,.96) !important;
  border: 1px solid var(--sgit-border) !important;
  border-radius: var(--sgit-radius) !important;
  box-shadow: var(--sgit-shadow) !important;
  overflow: hidden !important;
}
.action-dropdown ul{ padding:8px !important; }
.action-dropdown li a{
  color: var(--sgit-text) !important;
  border-radius: 10px !important;
  padding: 10px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.action-dropdown li a:hover{
  background: rgba(59,130,246,.16) !important;
}
.action-dropdown li.danger a:hover{
  background: rgba(239,68,68,.16) !important;
}
.action-dropdown .divider{
  border-top: 1px solid var(--sgit-border) !important;
  margin: 6px 0 !important;
  opacity: .8 !important;
}

/* =========================
   TICKET TITLE / INFO CARD
   ========================= */
.tixTitle.has_bottom_border{
  background: var(--sgit-panel) !important;
  border: 1px solid var(--sgit-border) !important;
  border-radius: var(--sgit-radius) !important;
  padding: 12px 14px !important;
  margin-top: 12px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.25) !important;
}
.tixTitle h3{ color: var(--sgit-text) !important; }

table.ticket_info{
  width: 100% !important;
  background: var(--sgit-panel) !important;
  border: 1px solid var(--sgit-border) !important;
  border-radius: var(--sgit-radius) !important;
  overflow: hidden !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.25) !important;
}
table.ticket_info th{ color: var(--sgit-muted) !important; font-weight:600 !important; }
table.ticket_info td, table.ticket_info td b{ color: var(--sgit-text) !important; }
.ticket_info a.ticket-action{ color:#93c5fd !important; }
.ticket_info a.ticket-action:hover{ color:#bfdbfe !important; }

/* =========================
   TABS: Ticket Thread / Tasks (BLUE BUTTONS)
   ========================= */

/* kill any wash */
#ticket_tabs, ul.tabs.clean.threads,
#response_options ul.tabs{
  background: transparent !important;
  border: none !important;
}
ul.tabs.clean.threads li,
ul.tabs.clean.threads li a,
#response_options ul.tabs li,
#response_options ul.tabs li a{
  opacity: 1 !important;
  filter: none !important;
}

/* Ticket Thread / Tasks */
ul.tabs.clean.threads{
  border-bottom: 1px solid var(--sgit-border) !important;
  padding-bottom: 6px !important;
}
ul.tabs.clean.threads li a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  background: rgba(59,130,246,.18) !important;
  border: 1px solid rgba(59,130,246,.40) !important;
  color: var(--sgit-text) !important;

  border-radius: 14px !important;
  padding: 12px 16px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;

  box-shadow: 0 10px 26px rgba(0,0,0,.28) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35) !important;

  transition: transform .08s ease, background .12s ease, border-color .12s ease !important;
}
ul.tabs.clean.threads li a:hover{
  background: rgba(59,130,246,.26) !important;
  border-color: rgba(34,211,238,.40) !important;
  transform: translateY(-1px) !important;
}
ul.tabs.clean.threads li.active a{
  background: linear-gradient(90deg, rgba(59,130,246,.55), rgba(34,211,238,.22)) !important;
  border-color: rgba(96,165,250,.70) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.35) !important;
}

/* Mobile: 50/50 */
@media (max-width: 768px){
  ul.tabs.clean.threads{
    display:flex !important;
    gap:10px !important;
    padding: 6px 2px !important;
  }
  ul.tabs.clean.threads li{ flex:1 1 0 !important; }
  ul.tabs.clean.threads li a{ width:100% !important; }
}

/* =========================
   THREAD CONTAINER + ENTRIES
   ========================= */
#ticket_tabs_container .tab_content,
#ticket_thread{
  background: var(--sgit-panel) !important;
  border: 1px solid var(--sgit-border) !important;
  border-radius: var(--sgit-radius) !important;
  padding: 12px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.25) !important;
}

/* Entry header / metadata */
#ticketThread .thread-entry .header{
  background: rgba(15,23,42,.85) !important;
  border: 1px solid var(--sgit-border2) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  color: rgba(229,231,235,.92) !important;
}
#ticketThread .thread-entry .header *{
  color: rgba(229,231,235,.92) !important;
}

/* Body area */
#ticketThread .thread-entry .thread-body,
#ticketThread .thread-entry .body,
#ticketThread .thread-entry .message{
  background: linear-gradient(180deg, rgba(15,23,42,.55), rgba(2,6,23,.35)) !important;
  border: 1px solid rgba(148,163,184,.14) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  color: var(--sgit-text) !important;
  overflow-wrap:anywhere !important;
}

/* Nuke email white wrappers but keep media ok */
#ticketThread .thread-entry .thread-body *:not(img):not(svg):not(video):not(canvas):not(iframe){
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Links in thread */
#ticketThread .thread-entry .thread-body a{
  color:#93c5fd !important;
  text-decoration: underline !important;
}
#ticketThread .thread-entry .thread-body a:hover{
  color:#bfdbfe !important;
}

/* Images */
#ticketThread img{
  max-width:100% !important;
  height:auto !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(2,6,23,.55) !important;
}

/* Timeline dots/line subtle */
#ticketThread .thread-entry:before,
#ticketThread .thread-entry:after,
#ticketThread .thread-entry .timeline,
#ticketThread .thread-entry .line,
#ticketThread .thread-entry .dot{
  opacity:.55 !important;
}

/* =========================
   THREAD-BODY TYPOGRAPHY (safe)
   ========================= */
.thread-body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--sgit-text) !important;
  word-wrap: break-word !important;
  overflow-wrap:anywhere !important;
}
.thread-body h1,.thread-body h2,.thread-body h3,
.thread-body h4,.thread-body h5,.thread-body h6{
  color:#fff !important;
  font-weight:700 !important;
}
.thread-body hr{ border:0; border-top:1px solid rgba(148,163,184,.18) !important; opacity:.7 !important; }
.thread-body blockquote{
  border-left: 4px solid var(--sgit-blue) !important;
  background: rgba(59,130,246,.06) !important;
  padding: 12px 18px !important;
  border-radius: 10px !important;
}
.thread-body pre{
  background: rgba(2,6,23,.70) !important;
  border: 1px solid rgba(59,130,246,.40) !important;
  color: var(--sgit-text) !important;
  padding: 12px !important;
  border-radius: 10px !important;
  overflow-x:auto !important;
}
.thread-body code{
  background: rgba(59,130,246,.12) !important;
  color:#93c5fd !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
}

/* Tables */
.thread-body table{
  width:100% !important;
  border-collapse: collapse !important;
  background: transparent !important;
  border: 1px solid rgba(148,163,184,.18) !important;
}
.thread-body thead th,
.thread-body tr th{
  background: rgba(30,41,59,.90) !important;
  color:#fff !important;
  border-bottom: 2px solid rgba(59,130,246,.55) !important;
  padding:8px !important;
}
.thread-body tbody td{
  border-top: 1px solid rgba(148,163,184,.16) !important;
  color: rgba(229,231,235,.92) !important;
  padding:8px !important;
}

/* =========================
   RESPONSE TABS (Post Reply / Note)
   ========================= */
#response_options ul.tabs{
  border-bottom: 1px solid var(--sgit-border) !important;
  padding-bottom: 6px !important;
}
#response_options ul.tabs li a{
  background: rgba(148,163,184,.10) !important;
  border: 1px solid var(--sgit-border) !important;
  color: var(--sgit-text) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  font-weight: 800 !important;
}
#response_options ul.tabs li a:hover{
  background: rgba(59,130,246,.18) !important;
  border-color: rgba(59,130,246,.35) !important;
}
#response_options ul.tabs li.active a{
  background: rgba(59,130,246,.26) !important;
  border-color: rgba(96,165,250,.60) !important;
}

/* Response panel */
#response_options .tab_content{
  background: var(--sgit-panel) !important;
  border: 1px solid var(--sgit-border) !important;
  border-radius: var(--sgit-radius) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.25) !important;
}

/* Buttons */
input[type="submit"], button, .button, .btn{
  background: rgba(59,130,246,.22) !important;
  color: var(--sgit-text) !important;
  border: 1px solid rgba(59,130,246,.35) !important;
  border-radius: 999px !important;
  padding: 9px 14px !important;
  font-weight: 800 !important;
}
input[type="submit"]:hover, button:hover, .button:hover, .btn:hover{
  background: rgba(34,211,238,.18) !important;
  border-color: rgba(34,211,238,.34) !important;
}
input[type="reset"]{
  background: rgba(148,163,184,.10) !important;
  border: 1px solid var(--sgit-border) !important;
}
input[type="reset"]:hover{ background: rgba(148,163,184,.16) !important; }

/* =========================
   REDACTOR (EDITOR) – DARK + CLEAN
   ========================= */
.redactor-toolbar{
  background: rgba(15,23,42,.92) !important;
  border: 1px solid rgba(148,163,184,.18) !important;
}
.redactor-toolbar a,
.redactor-toolbar button,
.redactor-toolbar li a{
  color: rgba(229,231,235,.92) !important;
  background: transparent !important;
}
.redactor-toolbar a:hover,
.redactor-toolbar button:hover,
.redactor-toolbar li a:hover{
  background: rgba(59,130,246,.16) !important;
  border-radius: 10px !important;
}

/* Editor surface (IMPORTANT: don’t paint every child) */
.redactor-editor{
  background: rgba(2,6,23,.55) !important;
  color: var(--sgit-text) !important;
  caret-color: var(--sgit-blue2) !important;
}
.redactor-editor *{
  color: inherit !important;
  background: transparent !important;
}

/* Statusbar “all changes saved” */
.redactor-box .redactor-statusbar{
  background: rgba(15,23,42,.92) !important;
  color: rgba(229,231,235,.85) !important;
  border-top: 1px solid rgba(148,163,184,.18) !important;
}

/* =========================
   Small cleanups
   ========================= */
.Icon.overdueTicket{
  background: rgba(251,191,36,.12) !important;
  border: 1px solid rgba(251,191,36,.25) !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
}

/* Prevent random “milky opacity” from any old theme */
*{
  text-shadow: none;
}
/* =========================================================
   SGIT HOTFIX – LAST LAST LAST
   Editor white inside + Dashboard white line + Footer cleanup
   ========================================================= */

/* A) REDACTOR: make the *typing surface* WHITE and readable */
.redactor-box,
.redactor-layer{
  background: transparent !important;  /* keep outer dark theme */
}

/* Toolbar stays dark (ok) */
.redactor-toolbar{
  background: rgba(15,23,42,.92) !important;
}

/* The actual editor area */
.redactor-editor{
  background: #ffffff !important;
  color: #0b1220 !important;
  caret-color: #2563eb !important;
}

/* Make sure pasted HTML doesn't force weird colors */
.redactor-editor *{
  color: inherit !important;
  background: transparent !important;
}

/* Links inside editor */
.redactor-editor a{
  color: #2563eb !important;
  text-decoration: underline !important;
}

/* Placeholder text (if shown) */
.redactor-editor:empty:before{
  color: rgba(11,18,32,.45) !important;
}

/* B) DASHBOARD: kill the “white line / white strip” look
   Συνήθως είναι footer/container background ή κάποιο hr/divider */
#dashboard, #dashboard_content, #content, #container, .content{
  background: var(--sgit-bg) !important;
}

/* Common offenders */
hr, .hr, .divider, .line, .has_bottom_border{
  border-color: rgba(148,163,184,.18) !important;
  background: transparent !important;
}

/* Charts / stats boxes sometimes render with light bg */
.plot, .chart, .graph, .dashboard, .dashboard .plot, .dashboard .chart{
  background: transparent !important;
}

/* C) FOOTER: make it blend + readable (SCP + client) */
#footer, footer, .footer{
  background: transparent !important;
  border-top: 1px solid rgba(59,130,246,.12) !important;
  color: rgba(203,213,225,.85) !important;
}

#footer a, footer a, .footer a{
  color: #93c5fd !important;
}
#footer a:hover, footer a:hover, .footer a:hover{
  color: #bfdbfe !important;
}

/* D) Title bold blue (client + where applicable) */
#header h1, #header h1 a, .header-title, .logo{
  font-weight: 900 !important;
  color: #3b82f6 !important;
}

/* E) STOP using global nukes (restrict your last rule)
   Αν έχεις στο τέλος: *{ text-shadow:none; } -> ΚΑΝΤΟ έτσι: */
#ticketThread *, #response_options *, #ticket_tabs_container *{
  text-shadow: none !important;
}