/* =====================================================================
   AGIS Admin Dashboard – Dark Glass Theme (Stable v1.1)
   ===================================================================== */

/* ===== Core Theme Variables (scoped to avoid client conflicts) ===== */
:root,
#agis-admin-root,
#agis-chat-root{
  --agis-bg0: #071019;
  --agis-bg1: #081827;
  --agis-panel: rgba(255,255,255,.06);
  --agis-panel2: rgba(255,255,255,.045);
  --agis-border: rgba(255,255,255,.10);
  --agis-text: rgba(255,255,255,.92);
  --agis-muted: rgba(255,255,255,.65);
  --agis-brand: #76d949;
  --agis-brandSoft: rgba(118,217,73,.20);
  --agis-shadow: 0 18px 50px rgba(0,0,0,.45);
  --agis-shadowSm: 0 10px 28px rgba(0,0,0,.35);
  --agis-rXL: 26px;
  --agis-rLG: 18px;
  --agis-rMD: 14px;
}

/* ===== Base Layout (admin only - scoped to avoid client conflicts) ===== */
#agis-admin-root { min-height: 100%; }

#agis-admin-root{
  background:
    radial-gradient(900px 500px at 18% 18%, rgba(118,217,73,.14), transparent 55%),
    radial-gradient(700px 400px at 86% 70%, rgba(118,217,73,.10), transparent 55%),
    linear-gradient(180deg, var(--agis-bg1), var(--agis-bg0));
  color: var(--agis-text);
  min-height: 100vh;
}

#agis-admin-root h1,#agis-admin-root h2,#agis-admin-root h3,#agis-admin-root h4,#agis-admin-root h5{ color: var(--agis-text); }
#agis-admin-root p, #agis-admin-root label, #agis-admin-root small, #agis-admin-root .text-muted{ color: var(--agis-muted) !important; }

/* ===== Navbar (admin) ===== */
#agis-admin-root .navbar{
/*  background: rgba(10,18,28,.55) !important; */
  background: rgba(73,87,107,.55) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--agis-border);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* ===== Account Menu (admin) ===== */
#agis-admin-root .account-menu{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--agis-border);
  border-radius: 14px;
  width: 44px;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: var(--agis-shadowSm);
}
#agis-admin-root .account-menu:hover{ background: rgba(255,255,255,.10); }

#agis-admin-root .dropdown-menu{
  background: rgba(10,18,28,.88);
  backdrop-filter: blur(14px);
  border: 1px solid var(--agis-border);
  border-radius: 16px;
  box-shadow: var(--agis-shadow);
}
#agis-admin-root .dropdown-menu a{ color: var(--agis-text); }
#agis-admin-root .dropdown-menu a:hover{ background: rgba(255,255,255,.08); }

/* ===== Menu Tabs (admin) ===== */
#agis-admin-root #menuContent.nav.nav-tabs{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--agis-border);
  border-radius: var(--agis-rXL);
  padding: 12px;
  gap: 10px;
}

#agis-admin-root .nav-tabs .nav-link{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--agis-muted);
  border-radius: 16px;
  padding: 10px 16px;
  font-weight: 800;
}
#agis-admin-root .nav-tabs .nav-link:hover{
  background: rgba(255,255,255,.12);
  color: var(--agis-text);
}
#agis-admin-root .nav-tabs .nav-link.active{
  background: var(--agis-brandSoft);
  border-color: rgba(118,217,73,.45);
  color: var(--agis-text);
  box-shadow: 0 10px 24px rgba(118,217,73,.25);
}

/* ===== Main Content Area (admin) ===== */
#agis-admin-root .agis-content-section{
  display: flex;
  justify-content: center;
  padding: 18px;
}

#agis-admin-root #content-area{
  width: 100%;
  max-width: 1600px;
  margin: 18px auto 40px;
  background: transparent;
}

/* Licenses table layout tweaks (admin) */
#agis-admin-root .licenses-table{
  width: 100%;
  table-layout: fixed;
}

#agis-admin-root .licenses-table th,
#agis-admin-root .licenses-table td{
  vertical-align: top;
  white-space: normal;
  word-break: break-word;
}

#agis-admin-root .licenses-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#agis-admin-root #main-contents{
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--agis-border);
  border-radius: var(--agis-rXL);
  box-shadow: var(--agis-shadow);
  padding: 20px;
  min-height: 420px;
}

/* ===== Tables (admin) ===== */
#agis-admin-root table, #agis-admin-root .table, #agis-admin-root .table td, #agis-admin-root .table th{
  color: var(--agis-text);
  border-color: rgba(255,255,255,.12);
}

/* ===== Inputs (admin + chat) ===== */
#agis-admin-root input, #agis-admin-root select, #agis-admin-root textarea,
#agis-chat-root input, #agis-chat-root select, #agis-chat-root textarea{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--agis-text);
  border-radius: 12px;
}
#agis-admin-root input::placeholder, #agis-admin-root textarea::placeholder,
#agis-chat-root input::placeholder, #agis-chat-root textarea::placeholder{
  color: rgba(255,255,255,.45);
}

/* =====================================================================
   BUTTON SYSTEM — FINAL AUTHORITY (READABLE & CONSISTENT)
   ===================================================================== */

/* Prevent opacity inheritance */
#agis-admin-root #main-contents button,
#agis-admin-root #main-contents .btn{
  opacity: 1 !important;
  filter: none !important;
}

/* Base button (admin + chat) */
#agis-admin-root button, #agis-admin-root .btn,
#agis-chat-root .agis-btn{
  background: rgba(20,30,45,.85) !important;
  color: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important;
  padding: 6px 16px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  transition: all .15s ease;
}

#agis-admin-root button:hover, #agis-admin-root .btn:hover,
#agis-chat-root .agis-btn:hover{
  background: rgba(35,50,70,.95) !important;
  transform: translateY(-1px);
}

/* Primary / Go Live */
#agis-admin-root .btn-primary, #agis-admin-root .go-live,
#agis-chat-root .agis-btn-primary{
  background: rgba(118,217,73,.35) !important;
  border-color: rgba(118,217,73,.65) !important;
  color: #ffffff !important;
}
#agis-admin-root .btn-primary:hover, #agis-admin-root .go-live:hover,
#agis-chat-root .agis-btn-primary:hover{
  box-shadow: 0 0 22px rgba(118,217,73,.45);
}

/* Danger Delete */
#agis-admin-root .btn-danger, #agis-admin-root .delete,
#agis-chat-root .agis-btn-danger{
  background: rgba(255,80,80,.38) !important;
  border-color: rgba(255,80,80,.65) !important;
  color: #ffffff !important;
}
#agis-admin-root .btn-danger:hover{
  box-shadow: 0 0 20px rgba(255,80,80,.45);
}

/* Warning  Chat  Recrawl */
#agis-admin-root .btn-warning, #agis-admin-root .chat, #agis-admin-root .recrawl{
  background: rgba(255,190,80,.32) !important;
  border-color: rgba(255,190,80,.55) !important;
  color: #ffffff !important;
}

/* Disabled */
#agis-admin-root button:disabled, #agis-admin-root .btn:disabled, #agis-admin-root .disabled,
#agis-chat-root .agis-btn:disabled{
  opacity: .45 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Spacing in action rows */
#agis-admin-root #main-contents td button,
#agis-admin-root #main-contents td .btn{
  margin-right: 6px;
  margin-bottom: 4px;
  white-space: nowrap;
}

/* =====================================================================
   LEGACY STYLES — NEUTRALIZED (kept for safety) (admin)
   ===================================================================== */
#agis-admin-root .custom-btn{
  background: inherit !important;
  color: inherit !important;
  border: inherit !important;
}
/* =========================================================
   FINAL READABILITY FIX — ACTION ROW BUTTONS ONLY
   ========================================================= */

/* View Pages (btn-primary inside main table) */
#agis-admin-root #main-contents td .btn.btn-primary{
  background: rgba(118,217,73,.58) !important;
  border-color: rgba(118,217,73,.75) !important;
  color: rgba(10,18,28,.95) !important;   /* dark readable text */
  text-shadow: none !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.22) !important;
}

/* Hover state */
#agis-admin-root #main-contents td .btn.btn-primary:hover{
  background: rgba(118,217,73,.65) !important;
  transform: translateY(-1px);
}

/* Chat button (usually warm/orange) */
#agis-admin-root #main-contents td .btn.chat,
#agis-admin-root #main-contents td button.chat{
  background: rgba(255,190,80,.55) !important;
  border-color: rgba(255,190,80,.75) !important;
  color: rgba(10,18,28,.95) !important;
  text-shadow: none !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.22) !important;
}

/* Chat message typography (#agis-chat-root only) */
#agis-chat-root .agis-user-message p,
#agis-chat-root .agis-ai-message p {
  margin: 6px 0;
  line-height: 1.4;
  word-break: break-word;
  color: inherit !important;
}

#agis-chat-root #chatMessages .agis-user-message ul,
#agis-chat-root #chatMessages .agis-user-message ol,
#agis-chat-root #chatMessages .agis-ai-message ul,
#agis-chat-root #chatMessages .agis-ai-message ol {
  margin: 6px 0 6px 18px;
  padding: 0;
}

#agis-chat-root .agis-user-message li,
#agis-chat-root .agis-ai-message li {
  margin-bottom: 4px;
}

#agis-chat-root .agis-user-message code,
#agis-chat-root .agis-ai-message code {
  background: rgba(0, 0, 0, 0.08);
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* Go Live (green but NOT btn-primary) */
#agis-admin-root #main-contents td .go-live,
#agis-admin-root #main-contents td button.go-live{
  background: rgba(118,217,73,.55) !important;
  border-color: rgba(118,217,73,.75) !important;
  color: rgba(10,18,28,.95) !important;
  text-shadow: none !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.22) !important;
}

/* Delete stays white-on-red (already readable) */
#agis-admin-root #main-contents td .btn-danger{
  color: #ffffff !important;
}

/* =========================================================
   FORCE DARK ROWS (works even if styles are on <td>)
   ========================================================= */

/* Darken table cells inside main-contents */
#agis-admin-root #main-contents table tr td{
  background: rgba(20,30,45,.85) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* Alternate rows */
#agis-admin-root #main-contents table tr:nth-child(even) td{
  background: rgba(25,38,58,.88) !important;
}

/* Hover row */
#agis-admin-root #main-contents table tr:hover td{
  background: rgba(35,55,80,.95) !important;
}

/* Domain text (first column) */
#agis-admin-root #main-contents table tr td:first-child{
  color: rgba(255,255,255,.95) !important;
  font-weight: 600 !important;
}

/* If the domain is a link */
#agis-admin-root #main-contents table tr td:first-child a{
  color: rgba(255,255,255,.95) !important;
  text-decoration: none !important;
}
#agis-admin-root #main-contents table tr td:first-child a:hover{
  text-decoration: underline !important;
}
/* =========================================================
   TOP MENU BAR (View AIs / Add New Site / etc) — READABILITY
   Targets the custom options bar buttons only
   ========================================================= */

#agis-admin-root .custom-options-bar .btn,
#agis-admin-root .custom-options-bar button,
#agis-admin-root .agis-custom-options-bar .btn,
#agis-admin-root .agis-custom-options-bar button{
  background: rgba(255,255,255,.12) !important;   /* lighter glass */
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.95) !important;        /* bright text */
  text-shadow: 0 1px 0 rgba(0,0,0,.45) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.25) !important;
}

/* Hover state: slightly brighter */
#agis-admin-root .custom-options-bar .btn:hover,
#agis-admin-root .custom-options-bar button:hover,
#agis-admin-root .agis-custom-options-bar .btn:hover,
#agis-admin-root .agis-custom-options-bar button:hover{
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.30) !important;
  transform: translateY(-1px);
}

/* If one is "active" (your legacy code uses .active) */
#agis-admin-root .custom-options-bar .btn.active,
#agis-admin-root .custom-options-bar button.active{
  background: rgba(118,217,73,.25) !important;
  border-color: rgba(118,217,73,.55) !important;
  color: rgba(255,255,255,.98) !important;
}
/* =========================================================
   TOP ACTION BAR VERTICAL SPACING FIX
   ========================================================= */

/* The bar that holds View AIs / Add New Site / etc */
#agis-admin-root .custom-options-bar,
#agis-admin-root .agis-custom-options-bar{
  padding-bottom: 18px !important;   /* space inside the bar */
  margin-bottom: 18px !important;    /* space before main content */
}
/* =========================================================
   GLOBAL DROPDOWN (SELECT) READABILITY FIX
   ========================================================= */

/* Base select control (admin + chat) */
#agis-admin-root select, #agis-admin-root .form-select,
#agis-chat-root select, #agis-chat-root .agis-form-select{
  background-color: rgba(20,30,45,.85) !important;
  color: rgba(255,255,255,.95) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  border-radius: 999px !important;
  padding: 8px 36px 8px 14px !important;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

/* Hover / focus */
#agis-admin-root select:hover, #agis-admin-root select:focus,
#agis-admin-root .form-select:hover, #agis-admin-root .form-select:focus,
#agis-chat-root select:hover, #agis-chat-root select:focus,
#agis-chat-root .agis-form-select:hover, #agis-chat-root .agis-form-select:focus{
  background-color: rgba(30,45,65,.95) !important;
  border-color: rgba(118,217,73,.55) !important;
  outline: none !important;
}

/* Dropdown options */
#agis-admin-root select option, #agis-chat-root select option{
  background-color: rgba(20,30,45,.95) !important;
  color: rgba(255,255,255,.95) !important;
}

/* Disabled option */
#agis-admin-root select option:disabled, #agis-chat-root select option:disabled{
  color: rgba(255,255,255,.45) !important;
}

/* Fix Safari / Chromium oddities */
select::-ms-expand{
  display: none;
}
/* =========================================================
   TABLE HEADER (THEAD/TH) READABILITY FIX
   ========================================================= */

/* Header row background */
#agis-admin-root #main-contents table thead tr th,
#agis-admin-root #main-contents table tr th{
  background: rgba(15,22,34,.95) !important;   /* dark glass */
  color: rgba(255,255,255,.95) !important;     /* readable text */
  border-color: rgba(255,255,255,.12) !important;
  font-weight: 800 !important;
}

/* If the header contains links or spans */
#agis-admin-root #main-contents table thead tr th a,
#agis-admin-root #main-contents table tr th a,
#agis-admin-root #main-contents table thead tr th span,
#agis-admin-root #main-contents table tr th span{
  color: rgba(255,255,255,.95) !important;
}

/* Optional: slightly stronger divider under header */
#agis-admin-root #main-contents table thead{
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}
/* =========================================================
   BOOTSTRAP MODAL — DARK GLASS THEME (READABILITY FIX)
   Applies to Override popup + all modals
   ========================================================= */

#agis-admin-root .modal-content{
  background: rgba(10,18,28,.92) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.60) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#agis-admin-root .modal-header,
#agis-admin-root .modal-footer{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.10) !important;
}

#agis-admin-root .modal-title{
  color: rgba(255,255,255,.95) !important;
  font-weight: 800 !important;
}

#agis-admin-root .modal-body{
  color: rgba(255,255,255,.90) !important;
}

/* Bootstrap close (X) button */
#agis-admin-root .modal-header .btn-close{
  filter: invert(1) grayscale(100%) brightness(1.2);
  opacity: .85;
}
.modal-header .btn-close:hover{
  opacity: 1;
}

/* Inputs inside modals */
#agis-admin-root .modal-content input,
#agis-admin-root .modal-content textarea,
#agis-admin-root .modal-content select,
#agis-admin-root .modal-content .form-control,
#agis-admin-root .modal-content .form-select{
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
}

#agis-admin-root .modal-content input::placeholder,
#agis-admin-root .modal-content textarea::placeholder{
  color: rgba(255,255,255,.50) !important;
}

/* Select options dropdown list */
#agis-admin-root .modal-content select option{
  background: rgba(20,30,45,.98) !important;
  color: rgba(255,255,255,.95) !important;
}

/* Any “header row” blocks inside the modal that are white */
.modal-content th,
.modal-content td{
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* Buttons inside modal: keep consistent */
#agis-admin-root .modal-content .btn{
  border-radius: 999px !important;
  font-weight: 800 !important;
}
#agis-admin-root .modal-content .btn-secondary{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
}
#agis-admin-root .modal-content .btn-secondary:hover{
  background: rgba(255,255,255,.16) !important;
}
/* =========================================================
   DESKTOP: hide the mobile menu header (Menu ▼)
   ========================================================= */
@media (min-width: 768px){
  #agis-admin-root .menu-header{
    display: none !important;
  }

  /* ensure menu tabs are always visible on desktop */
  #agis-admin-root #menuContent{
    max-height: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}
/* =========================================================
   MOBILE TABLE FIX — prevent overflow + make actions usable
   ========================================================= */
@media (max-width: 768px){

  /* Give the card proper padding and stop sideways bleed */
  #agis-admin-root #main-contents{
    padding: 14px !important;
    overflow: hidden !important;
  }

  /* Any tables inside main-contents should scroll instead of overflow */
  #agis-admin-root #main-contents table,
  #agis-admin-root #main-contents .table{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Force the table to behave like a real table within the scroll container */
  #agis-admin-root #main-contents thead,
  #agis-admin-root #main-contents tbody,
  #agis-admin-root #main-contents tr{
    width: 100% !important;
  }

  /* Make cells wrap so long domains don’t push width */
  #agis-admin-root #main-contents td,
  #agis-admin-root #main-contents th{
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* Keep the first column (Domain) from forcing massive width */
  #agis-admin-root #main-contents td:first-child,
  #agis-admin-root #main-contents th:first-child{
    min-width: 130px !important;
  }

  /* Actions column: allow wrapping/stacking */
  #agis-admin-root #main-contents td:nth-child(2){
    min-width: 180px !important;
  }

  /* Action buttons: stack nicely instead of running offscreen */
  #agis-admin-root #main-contents td button,
  #agis-admin-root #main-contents td .btn{
    display: inline-flex !important;
    width: auto !important;
    margin: 6px 6px 0 0 !important;
  }
}
/* =========================================================
   ACCOUNT DROPDOWN MENU — FIX STACKING + SPACING
   (Your dropdown uses plain <a> tags, not Bootstrap .dropdown-item)
   ========================================================= */

#agis-admin-root .navbar .dropdown-menu a{
  display: block !important;          /* STACK */
  width: 100% !important;
  padding: 10px 14px !important;      /* SPACING */
  text-decoration: none !important;
  white-space: nowrap !important;
}

#agis-admin-root .navbar .dropdown-menu a:hover{
  background: rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
}
/* =========================================================
   ACCOUNT DROPDOWN — KEEP INSIDE VIEWPORT
   Fix: menu opens off-screen (top clipped)
   ========================================================= */

#agis-admin-root .navbar{
  overflow: visible !important; /* ensure dropdown isn't clipped by navbar */
}

#agis-admin-root .navbar .dropdown{
  position: relative !important; /* anchor for absolute dropdown */
}

#agis-admin-root .navbar .dropdown-menu{
  top: calc(100% + 10px) !important;   /* force BELOW the button */
  bottom: auto !important;
  transform: none !important;
  margin-top: 0 !important;

  right: 12px !important;              /* keep it away from edge */
  left: auto !important;

  max-height: calc(100vh - 90px) !important; /* prevent off-screen */
  overflow-y: auto !important;               /* scroll if needed */
}
#agis-admin-root #main-contents td .btn.wp-install{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
}
#agis-admin-root #main-contents td .btn.wp-install:hover{
  background: rgba(255,255,255,.16) !important;
}
/* ================================
   AGIS Dark Modal Styling
   ================================ */

#customModal .modal-content {
    background: linear-gradient(135deg, #0f1c26, #142733);
    color: #e6eef5;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
}

#customModal .modal-header {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

#customModal .modal-footer {
    border-top: 1px solid rgba(255,255,255,0.08);
}

#customModal .modal-title {
    color: #ffffff;
    font-weight: 600;
}

#customModal .btn-close {
    filter: invert(1);
}

/* Code blocks inside modal */
#customModal pre,
#customModal code,
#customModal textarea {
    background: #0b141c;
    /* color: #e6eef5; */
    color: #73dd41;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    font-family: monospace;
}

/* Labels / helper text */
#customModal label,
#customModal p {
    color: #cfd9e3;
}
/* ================================
   Fix Close Button Visibility
   ================================ */

#customModal .btn-close {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    padding: 10px;
    opacity: 1;
    filter: invert(1);
}

#customModal .btn-close:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

#customModal .btn-close:focus {
    box-shadow: 0 0 0 3px rgba(120, 180, 255, 0.35);
}
/* =========================================================
   FINAL FORCE — visible modal close button on dark UI
   ========================================================= */

#customModal .modal-header .btn-close {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  opacity: 1 !important;
}

#customModal .modal-header .btn-close::before {
  content: "✕" !important;
  color: #ffffff !important;      /* <-- force WHITE */
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* Hover / focus */
#customModal .modal-header .btn-close:hover {
  background: rgba(255, 255, 255, 0.28) !important;
}

#customModal .modal-header .btn-close:focus {
  box-shadow: 0 0 0 3px rgba(120, 180, 255, 0.4) !important;
}
/* =========================================================
   HARD FIX: Bootstrap .btn-close visibility (force white X)
   Put this at the VERY BOTTOM of styles.css
   ========================================================= */

#customModal .modal-header .btn-close{
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;

  /* Make the button itself visible */
  background-color: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  border-radius: 999px !important;

  /* Kill Bootstrap's default opacity tricks */
  opacity: 1 !important;
  filter: none !important;

  /* Force a white "X" SVG (this is the key) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2 L14 14 M14 2 L2 14' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
}

#customModal .modal-header .btn-close:hover{
  background-color: rgba(255,255,255,0.28) !important;
  border-color: rgba(255,255,255,0.55) !important;
}

#customModal .modal-header .btn-close:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(118,217,73,0.35) !important;
}

#agis-admin-root .form-text, #agis-chat-root .agis-form-text{
  color: white !important;
}

/* ===== CHAT WIDGET STYLES (#agis-chat-root only) ===== */
#agis-chat-root .agis-card{
	background-color: #c4ddae !important;
}

#agis-admin-root h5, #agis-chat-root .agis-card h5 {
	color: #198754 !important;
}
#agis-admin-root h4, #agis-chat-root .agis-card h4 {
	color: #198754 !important;
}
#agis-admin-root h3, #agis-chat-root .agis-card h3 {
	color: #198754 !important;
}

#agis-admin-root .fas, #agis-chat-root .fas {
	color: #198754 !important;
}

#agis-admin-root .card-text, #agis-chat-root .agis-card-text{
	color: #198754 !important;
}
#agis-chat-root #chatStartMessage{
	color: #198754 !important;
}

#agis-admin-root .table-sm{
	color: #198754 !important;
}
#agis-admin-root .agis-email-captured, #agis-chat-root .agis-email-captured{
	color: #198754 !important;
}
#agis-admin-root #uploadContainer{
	color: #198754 !important;
}

/* ===== AGIS CHAT LAYOUT UTILITIES ===== */
#agis-chat-root .agis-d-flex { display: flex; }
#agis-chat-root .agis-justify-content-between { justify-content: space-between; }
#agis-chat-root .agis-justify-content-end { justify-content: flex-end; }
#agis-chat-root .agis-justify-content-start { justify-content: flex-start; }
#agis-chat-root .agis-align-items-center { align-items: center; }
#agis-chat-root .agis-my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
#agis-chat-root .agis-btn-group { display: inline-flex; gap: 4px; }
#agis-chat-root .agis-input-group { display: flex; gap: 8px; align-items: center; }
#agis-chat-root .agis-text-right { text-align: right; }
#agis-chat-root .agis-text-left { text-align: left; }
#agis-chat-root .agis-text-center { text-align: center; }
#agis-chat-root .agis-text-muted { color: var(--agis-muted) !important; }
#agis-chat-root .agis-card-header { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
#agis-chat-root .agis-card-body { padding: 16px; flex: 1; }
#agis-chat-root .agis-card-footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.1); }
#agis-chat-root .agis-form-control { flex: 1; padding: 8px 12px; border-radius: 8px; }
#agis-chat-root .agis-btn-sm { padding: 4px 12px !important; font-size: 12px !important; }