/* Tokyo Night Theme for NetSapiens Portal */

/* --- Variables --- */
:root {
  --bg-dark: #1a1b26;
  --bg-darker: #16161e;
  --bg-panel: #24283b;
  --fg-primary: #c0caf5;
  --fg-secondary: #a9b1d6;
  --accent-cyan: #7dcfff;
  --accent-green: #9ece6a;
  --accent-purple: #bb9af7;
  --accent-red: #f7768e;
  --border-color: #414868;
}

/* --- Dark Mode Toggle Button --- */
#dark-mode-toggle {
  background: transparent;
  border: none;
  color: #555;
  font-size: 16px;
  cursor: pointer;
  padding: 10px 15px;
  margin-top: 10px;
}

#dark-mode-toggle:hover {
  color: #333;
}

body.dark-mode #dark-mode-toggle {
  color: var(--fg-primary);
}

body.dark-mode #dark-mode-toggle:hover {
  color: var(--accent-cyan);
}

/* --- Global Overrides (Scoped to .dark-mode) --- */
body.dark-mode,
body.dark-mode #content,
body.dark-mode .wrapper {
  background-color: var(--bg-dark) !important;
  color: var(--fg-primary) !important;
}

/* Navbar */
body.dark-mode .navbar,
body.dark-mode .navbar-inverse {
  background-color: var(--bg-darker) !important;
  border-bottom: 1px solid var(--border-color);
}

body.dark-mode .navbar-nav>li>a {
  color: var(--fg-secondary) !important;
}

body.dark-mode .navbar-nav>li>a:hover {
  color: var(--accent-cyan) !important;
}

/* --- Top Navigation Buttons (Home, Call Center, etc.) --- */
body.dark-mode #nav-buttons div.nav-button {
  background: var(--bg-panel) !important;
  /* Override linear-gradient */
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  color: var(--fg-secondary) !important;
}

body.dark-mode #nav-buttons .nav-text {
  color: var(--fg-secondary) !important;
  text-shadow: none !important;
}

/* Hover State */
body.dark-mode #nav-buttons a.nav-link:hover div.nav-button {
  background: var(--bg-darker) !important;
  border-color: var(--accent-cyan) !important;
  color: var(--fg-primary) !important;
}

body.dark-mode #nav-buttons a.nav-link:hover .nav-text {
  color: var(--fg-primary) !important;
}

/* Active State */
body.dark-mode #nav-buttons .nav-link-current div.nav-button,
body.dark-mode #nav-buttons .nav-link-current a.nav-link:hover div.nav-button {
  background: #2ac3de !important;
  /* Slightly darker cyan */
  border-color: #2ac3de !important;
  box-shadow: 0 0 10px rgba(42, 195, 222, 0.3) !important;
  color: #1a1b26 !important;
  /* Dark text on bright button */
}

body.dark-mode #nav-buttons .nav-link-current .nav-text {
  color: #2ac3de !important;
  font-weight: bold;
}

/* Panels (Generalized) - Covers Wells (Edit screens, Call Center) and Boxes */
body.dark-mode .panel,
body.dark-mode .widget,
body.dark-mode .box,
body.dark-mode .well,
body.dark-mode .well-white,
body.dark-mode .active-panel-home,
body.dark-mode .graphs-panel-home,
body.dark-mode .stats-panel-home,
body.dark-mode .rounded.show {
  background-color: var(--bg-panel) !important;
  border-color: var(--border-color) !important;
  color: var(--fg-primary) !important;
}

body.dark-mode .panel-heading,
body.dark-mode .widget-header {
  background-color: var(--bg-darker) !important;
  color: var(--fg-primary) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

body.dark-mode div[class*="container"]>div.rounded.show {
  background-color: var(--bg-panel) !important;
}

/* --- Nav Tabs (Edit User, etc.) --- */
body.dark-mode .nav-tabs {
  border-bottom: 1px solid var(--border-color) !important;
}

body.dark-mode .nav-tabs>li>a {
  background-color: var(--bg-darker) !important;
  color: var(--fg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-bottom-color: transparent !important;
}

body.dark-mode .nav-tabs>li.active>a,
body.dark-mode .nav-tabs>li.active>a:hover,
body.dark-mode .nav-tabs>li.active>a:focus {
  background-color: var(--bg-panel) !important;
  color: var(--accent-cyan) !important;
  border: 1px solid var(--border-color) !important;
  border-bottom-color: var(--bg-panel) !important;
}

body.dark-mode .tab-content {
  background-color: var(--bg-panel) !important;
  border: 1px solid var(--border-color) !important;
  border-top: none !important;
  padding: 15px;
}

/* --- Call Center Specifics --- */
body.dark-mode .cc-agents-well,
body.dark-mode .cc-queues-well {
  box-shadow: none !important;
}

/* Subheaders in Call Center / Grids */
body.dark-mode .h6-subheader,
body.dark-mode h6.blue {
  color: var(--accent-cyan) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

/* --- Modals / Popups (Add User, Inventory, etc.) --- */
body.dark-mode .modal,
body.dark-mode .modal-content,
body.dark-mode .bootbox {
  background-color: var(--bg-panel) !important;
  color: var(--fg-primary) !important;
  border: 1px solid var(--border-color) !important;
}

body.dark-mode .modal-header {
  background-color: var(--bg-darker) !important;
  color: var(--fg-primary) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

body.dark-mode .modal-footer {
  background-color: var(--bg-darker) !important;
  border-top: 1px solid var(--border-color) !important;
  box-shadow: none !important;
}

body.dark-mode .modal-body {
  background-color: var(--bg-panel) !important;
  color: var(--fg-primary) !important;
}

/* Close button in modals */
body.dark-mode .modal-header .close {
  color: var(--fg-primary) !important;
  opacity: 0.8;
  text-shadow: none;
}

body.dark-mode .modal-header .close:hover {
  color: var(--accent-red) !important;
  opacity: 1;
}

/* Forms & Inputs (Global) */
body.dark-mode input[type="text"],
body.dark-mode input[type="password"],
body.dark-mode input[type="email"],
body.dark-mode input[type="number"],
body.dark-mode input[type="search"],
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .input-xlarge,
body.dark-mode .input-large,
body.dark-mode .input-medium,
body.dark-mode .input-small,
body.dark-mode .input-mini {
  background-color: var(--bg-dark) !important;
  color: var(--fg-primary) !important;
  border: 1px solid var(--border-color) !important;
}

body.dark-mode .control-label,
body.dark-mode label {
  color: var(--fg-secondary) !important;
}

/* Legend (Section Headers in Forms) */
body.dark-mode legend {
  color: var(--accent-purple) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

/* Tables */
body.dark-mode table.table {
  background-color: var(--bg-panel) !important;
  color: var(--fg-secondary) !important;
}

body.dark-mode table.table>thead>tr>th {
  background-color: var(--bg-darker) !important;
  color: var(--fg-primary) !important;
  border-bottom: 2px solid var(--border-color) !important;
}

body.dark-mode table.table>tbody>tr>td {
  border-top: 1px solid var(--border-color) !important;
}

body.dark-mode table.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode table.table-hover>tbody>tr:hover,
body.dark-mode table.table-hover>tbody>tr:hover>td,
body.dark-mode table.table-hover>tbody>tr:hover>th {
  background-color: rgba(26, 27, 38, 0.6) !important;
  /* Darker hover for Tokyo Night */
}

/* Buttons */
body.dark-mode .btn-default {
  background-color: var(--bg-darker) !important;
  color: var(--fg-primary) !important;
  border-color: var(--border-color) !important;
}

body.dark-mode .btn-primary,
body.dark-mode .btn.color-primary {
  background-color: var(--accent-purple) !important;
  border-color: var(--accent-purple) !important;
  color: #fff !important;
}

/* --- Home Page Graph --- */
body.dark-mode #chart_div {
  /* Removed filter: invert() as it looks bad */
  background-color: var(--bg-panel) !important;
}

/* Specific Google Charts SVG overrides */

/* Force all white backgrounds to be dark panel color */
body.dark-mode #chart_div svg rect[fill="#ffffff"],
body.dark-mode #chart_div svg rect[fill="white"] {
  fill: var(--bg-panel) !important;
}

/* Force specific main background rect if above generic doesn't catch it */
body.dark-mode #chart_div svg>rect:first-child {
  fill: var(--bg-panel) !important;
}

/* Make ALL text bright and readable */
body.dark-mode #chart_div svg text {
  fill: #c0caf5 !important;
  stroke: none !important;
  /* Remove any border/stroke causing blur */
  font-weight: 400 !important;
  /* Force normal weight */
  font-family: 'Inter', system-ui, sans-serif !important;
  /* Clean font */
  text-shadow: none !important;
  text-rendering: optimizeLegibility !important;
}

/* Grid Lines: Target anything thin (usually grid lines) */
body.dark-mode #chart_div svg path[stroke-width="1"] {
  stroke: #2c4f7c !important;
  /* Steel Blue */
}

/* Fallback for specific greys if stroke-width varies */
body.dark-mode #chart_div svg path[stroke="#cccccc"],
body.dark-mode #chart_div svg path[stroke="#ebebeb"],
body.dark-mode #chart_div svg path[stroke="#e6e6e6"] {
  stroke: #2c4f7c !important;
}


/* --- SIP Trace & Call History Specifics --- */

/* Trace Container */
body.dark-mode #trace-inline,
body.dark-mode .trace-details,
body.dark-mode .flow-box,
body.dark-mode .slpanel {
  background-color: var(--bg-dark) !important;
  border-color: var(--border-color) !important;
}

/* Fix for "White Boxing" around dialog */
body.dark-mode .flow-box.slpanel {
  background-color: var(--bg-dark) !important;
  border: none !important;
}

/* Search Header in Trace */
body.dark-mode .contacts-sort-search {
  background-color: var(--bg-darker) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

body.dark-mode .contacts-sort-search input {
  background-color: var(--bg-panel) !important;
  color: var(--fg-primary) !important;
  border: 1px solid var(--border-color) !important;
}

/* Flow Header Items (Call Legs) */
body.dark-mode .flow-header>div>div>div {
  background-color: var(--bg-panel) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--fg-primary) !important;
}

body.dark-mode .flow-header span {
  color: var(--fg-primary) !important;
}

/* Visual Flow (SVG) */
/* Background behind the flow */
body.dark-mode .flow-svg-wrapper {
  background-color: var(--bg-dark) !important;
}

/* SVG Lines (Paths) */
body.dark-mode svg path {
  stroke: #0f0 !important;
  /* Matrix Green call legs */
  stroke-width: 2px;
}

/* SVG Arrows */
body.dark-mode svg path[marker-end] {
  fill: #0f0 !important;
}

/* Message Boxes (Rects) */
body.dark-mode svg rect {
  fill: var(--bg-darker) !important;
  stroke: var(--accent-purple) !important;
  stroke-width: 1px;
}

/* Message Text in SVG */
body.dark-mode svg text {
  fill: var(--fg-primary) !important;
  font-family: 'Consolas', 'Monaco', monospace;
}

body.dark-mode svg text tspan {
  fill: var(--fg-primary) !important;
}

/* --- SIP Log Helper Classes (for Syntax Highlighting) --- */

/* --- SIP Log Helper Classes (for Syntax Highlighting) --- */

/* The box containing the log lines - MATRIX STYLE */
body.dark-mode pre.box {
  background-color: #000000 !important;
  /* Pitch black */
  border: 1px solid #333 !important;
  color: #0f0 !important;
  /* Matrix Green default text */
  padding: 15px;
  border-radius: 5px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* Individual Line overrides */
body.dark-mode pre.box .line,
body.dark-mode .message-line {
  color: #0f0 !important;
}

/* Existing Classes found in Portal */
body.dark-mode .sl-sipmethod {
  color: #00ffff !important;
  /* Cyan for Methods */
  font-weight: bold;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

body.dark-mode .sl-sipheader {
  color: #bd93f9 !important;
  /* Purple */
  font-weight: bold;
}

body.dark-mode .sl-uri {
  color: #50fa7b !important;
  /* Green */
}

/* Power User Visuals */
body.dark-mode .sl-sip-uri {
  color: #6272a4 !important;
  /* Dim Blue/Purple (Comment color) */
  font-style: italic;
}

body.dark-mode .sl-call-id-val {
  color: #ff79c6 !important;
  /* Bright Pink/Magenta */
  font-weight: bold;
}

body.dark-mode .sl-warning-line {
  display: block;
  /* Ensure it takes full width if possible, or just behaves as block within PRE */
  color: #ffb86c !important;
  /* Orange text */
  background-color: rgba(255, 85, 85, 0.2) !important;
  /* Red highlight background */
  font-weight: bold;
  border-left: 3px solid #ff5555 !important;
  /* Red indicator */
  padding-left: 5px;
}

/* Custom Injected Classes */
body.dark-mode .sl-header-key {
  color: #8be9fd !important;
  /* Cyan/Dracula Cyan */
  font-weight: bold;
}

body.dark-mode .sl-ip-addr {
  color: #ffffff !important;
  /* Bright White */
  font-weight: bold;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

/* SDP Syntax Highlighting */
body.dark-mode .sl-sdp-key {
  color: #ffb86c !important;
  /* Orange */
  font-weight: bold;
}

body.dark-mode .sl-sdp-val {
  color: #f1fa8c !important;
  /* Yellow */
}

/* Method Specifics */
body.dark-mode .custom-sip-method-invite {
  color: #8be9fd !important;
  /* Cyan */
}

body.dark-mode .custom-sip-method-ack {
  color: #50fa7b !important;
  /* Green */
}

body.dark-mode .custom-sip-method-bye {
  color: #ff5555 !important;
  /* Red */
}

/* Status Codes */
body.dark-mode .custom-sip-status-200 {
  color: #50fa7b !important;
  /* Green */
  font-weight: bold;
}

body.dark-mode .custom-sip-status-error {
  color: #ff5555 !important;
  /* Red highlight */
  font-weight: bold;
}

/* Scrollbars */
body.dark-mode ::-webkit-scrollbar {
  width: 12px;
  background: var(--bg-dark);
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 6px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--fg-secondary);
}