/**
 * NetShow Agent Pages - Shared Styles
 * Used across agent create, edit, view, and related pages.
 * Consolidates duplicated inline CSS from 10+ blade templates.
 */

/* ========================================
 * THEME VARIABLES (Agent Pages)
 * ======================================== */
[data-bs-theme="dark"] {
  --main-card-body: #424649;
  --main-card-body-bg: #424649;
  --main-card-header: #2f3437;
  --main-card-header-bg: #2f3437;
  --sub-card-body-shadow: #00000059 0px 5px 15px;
  --filter-shadow: #00000059 -1px 1px 9px;
  --lighter-theme-brightness: 0.8;
  --prompt-color: rgba(255, 255, 255, 0.6);
  --modal-color: rgba(225, 225, 225);
  --modal-text-color: rgba(225, 225, 225);
  --input-bg-color: rgb(0, 0, 0, 0.8);
  --profile-card-bg: #212529;
  --profile-card-shadow: #00000059 0px 1px 1px;
  --menu-2-btn-bg-color: #1e2023;
}

[data-bs-theme="light"] {
  --main-card-body: #fff;
  --main-card-body-bg: #fff;
  --main-card-header: #bbbec0;
  --main-card-header-bg: #bbbec0;
  --sub-card-body-shadow: #00000030 0px 2px 8px;
  --filter-shadow: #00000030 -1px 1px 9px;
  --lighter-theme-brightness: 3;
  --prompt-color: rgba(0, 0, 0, 0.6);
  --modal-color: rgba(30, 30, 30);
  --modal-text-color: rgba(30, 30, 30);
  --input-bg-color: rgb(255, 255, 255, 0.8);
  --profile-card-bg: #f8f9fa;
  --profile-card-shadow: #00000020 0px 1px 1px;
  --menu-2-btn-bg-color: #e9ecef;
}

:root {
  --main-card-shadow: #00000059 0px 5px 15px;
  --sub-card-shadow: #00000059 0px 1px 2px 1px;
}

/* ========================================
 * UTILITY CLASSES
 * ======================================== */
.light-theme-color {
  color: var(--bs-body-color);
  filter: brightness(var(--lighter-theme-brightness));
}

/* ========================================
 * AGENT CARD STYLES
 * ======================================== */
.profile-card {
  margin: 0px;
}

.profile-card-link-div {
  background-color: var(--profile-card-bg);
  border-radius: 20px;
  margin: 10px;
  box-shadow: var(--sub-card-body-shadow);
}

/* ========================================
 * FORM ELEMENTS
 * ======================================== */
.agent-page input,
.agent-page select,
.agent-page textarea {
  border-radius: var(--ns-radius-lg, 8px) !important;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

/* ========================================
 * AUDIO PLAYER
 * ======================================== */
.agent-page audio {
  width: 100%;
  outline: none;
}

.agent-page audio::-webkit-media-controls-panel {
  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: 10px;
}

.agent-page audio::-webkit-media-controls-play-button,
.agent-page audio::-webkit-media-controls-mute-button,
.agent-page audio::-webkit-media-controls-timeline,
.agent-page audio::-webkit-media-controls-current-time-display,
.agent-page audio::-webkit-media-controls-time-remaining-display {
  color: var(--bs-body-color);
}

.agent-page audio::-webkit-media-controls-current-time-display,
.agent-page audio::-webkit-media-controls-time-remaining-display {
  font-size: 14px;
}

/* ========================================
 * MENU BAR (Agent selection)
 * ======================================== */
.menu-bar {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 5px;
}

/* ========================================
 * AGENT LIST (Search dropdown)
 * ======================================== */
#agentList {
  display: none;
  max-height: 200px;
  overflow-y: scroll;
  background-color: #333;
  color: white;
  padding: 10px;
  border-radius: 5px;
  position: absolute;
  z-index: 1000;
  width: calc(100% - 20px);
}

#agentList li {
  list-style-type: none;
  margin: 5px 0;
}

#agentList a {
  color: white;
  text-decoration: none;
}

#agentList a:hover {
  text-decoration: underline;
}

/* ========================================
 * MODAL BACKDROP FIX
 * ======================================== */
.modal-backdrop {
  --bs-backdrop-zindex: 0 !important;
}

/* ========================================
 * EDIT AGENT UTILITIES
 * ======================================== */
.agent-main-card-header {
  background-image: var(--main-card-header);
}

.agent-main-card-body {
  background: var(--main-card-body);
}

.agent-sub-card-header {
  background: var(--sub-card-header-bg-color);
}

.agent-sub-card-body {
  background: var(--sub-card-body-bg-color);
  box-shadow: var(--sub-card-body-shadow);
}

.agent-video-h-370 {
  height: 370px;
}

.agent-video-h-400 {
  height: 400px;
}

.agent-audio-h-38 {
  height: 38px;
}

.agent-width-50 {
  width: 50px;
}

.agent-width-90 {
  width: 90%;
}

.agent-width-130 {
  width: 130px;
}

.agent-width-170 {
  width: 170px;
}

.agent-width-180 {
  width: 180px;
}

.agent-width-zero {
  width: 0;
}

.agent-width-10-h-32 {
  width: 10%;
  height: 32px;
}

.agent-fill-available {
  width: -webkit-fill-available;
}

.agent-delete-btn-offset {
  position: relative;
  left: -25px;
  top: 8px;
}

.agent-delete-icon-offset {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  left: -25px;
  z-index: 999;
}

.agent-content-hidden {
  display: none;
}

.agent-drop-area {
  height: 200px;
  cursor: pointer;
  border-style: dashed;
  border-width: 2px;
}

.agent-upload-icon {
  font-size: 48px;
}

.agent-mr-12 {
  margin-right: 12px;
}

.agent-action-btn-right {
  margin-left: auto;
  width: 180px;
  float: right;
}

.agent-action-btn-right-auto {
  margin-left: auto;
  width: 180px;
}

.agent-min-h-200 {
  min-height: 200px;
}

.memory-button {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 8px;
  padding: 10px 20px;
  width: 172px;
  border: 1px solid #979da3;
  cursor: pointer;
}

.memory-button-active {
  color: white !important;
  font-weight: bold !important;
  background: #6c757d !important;
}

/* ========================================
 * EDIT AGENT CHAT PAGE
 * ======================================== */
.edit-agent-chat-page {
  --main-card-header: linear-gradient(to right, #3a3b3f, #323033, #292628, #1f1d1e, #151414, #151414, #151414, #151414, #1f1d1e, #292628, #323033, #3a3b3f) !important;
  --sub-card-header-bg-color: #1a1d2045;
  --sub-card-body-bg-color: #ffffff1c;
}

.edit-agent-chat-page input,
.edit-agent-chat-page select,
.edit-agent-chat-page textarea {
  opacity: 0.86;
  border: 1px solid !important;
}

.edit-agent-chat-page .video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.edit-agent-chat-page .video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.edit-agent-chat-page .modal {
  z-index: 9999;
}

.edit-agent-chat-page .image-grid img {
  width: 100%;
  height: auto;
  cursor: pointer;
}

.edit-agent-chat-page .image-grid img:hover {
  border: 2px solid white;
}

.edit-agent-chat-page .image-grid .selectedImg,
.edit-agent-chat-page .image-grid .selected-agent-avatar {
  border: 2px solid #7459fe;
}

.swal2-container {
  z-index: 9999999;
}

/* ========================================
 * RESPONSIVE
 * ======================================== */
@media (max-width: 576px) {
  .asault {
    flex-direction: column;
  }

  #agentList {
    width: 93% !important;
  }

  #searchInputList,
  #searchInput {
    width: 100% !important;
  }
}