/* Reonin Admin small design polish on top of Tabler */

:root {
  /* Sidebar: neutral greys (no blue tint) */
  --admin-sidebar-bg: #1e1e1e;        /* dark grey */
  --admin-sidebar-border: #2a2a2a;    /* slightly lighter grey */
  --admin-link: #ffffff;              /* white text for better contrast */
  --admin-link-muted: #dddddd;        /* softer white for inactive */
  --admin-active-bg: rgba(255,255,255,.12); /* slightly stronger overlay */
  --admin-active-color: #ffffff;      /* white for active */

  /* Page/body background (kept light for contrast) */
  --admin-body-bg: #f6f8fb;
}

/* Page background distinct from cards */
.page-wrapper,
.admin-body {
  background: var(--admin-body-bg);
}

/* Sidebar visual separation */
.admin-sidebar { background: var(--admin-sidebar-bg); border-right: 1px solid var(--admin-sidebar-border); }
.admin-sidebar { --tblr-body-color: #ffffff; --tblr-muted: #dddddd; }

.admin-brand { font-size: 1.05rem; margin: .5rem 0; color: var(--admin-link); }

/* Menu styles: hover + active */
.admin-menu .nav-link { border-left: 3px solid transparent; border-radius: 0; margin: 2px 0; color: var(--admin-link); padding-left: .75rem; padding-right: .75rem; }
.admin-sidebar .navbar-nav .nav-link { color: var(--admin-link) !important; }
.admin-sidebar .navbar-nav .nav-link .ti { font-size: 18px; opacity: .9; color: inherit; }
.admin-sidebar .navbar-nav .nav-link:hover { background: rgba(255,255,255,.14); color: var(--admin-link) !important; }
.admin-sidebar .navbar-nav .nav-link.active { background: var(--admin-active-bg); color: var(--admin-active-color) !important; border-left-color: var(--admin-active-color); font-weight: 600; }
.admin-sidebar .navbar-nav .nav-link.active .ti { color: var(--admin-active-color); }

/* Cards: slightly rounder + subtle shadow */
.card {
  border-radius: .6rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

/* Body padding to avoid touching edges */
.admin-body .container-xl { padding-left: 1rem; padding-right: 1rem; }

/* Page body on light grey background: ensure good contrast */
.admin-body h1, .admin-body h2, .admin-body h3 { color: #1f2937; } /* slate-800 */
.admin-body .text-muted { color: #6b7280 !important; } /* slate-500 */

/* Cards and sections on light bg */
.card { background: #ffffff; border: 1px solid #e5e7eb; }
.card .card-header { background: #f9fafb; border-bottom: 1px solid #e5e7eb; }

/* Tables harmony on light bg */
.table thead th { background: #f3f4f6; color: #374151; }
.table tbody tr:hover { background: #f9fafb; }

/* Forms on light bg */
.form-control, .form-select, textarea { background: #ffffff; border-color: #e5e7eb; }
.form-control:focus, .form-select:focus, textarea:focus { border-color: #9ca3af; box-shadow: 0 0 0 .15rem rgba(0,0,0,.04); }

/* Utilities */
.mb-0 { margin-bottom: 0 !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }

/* Toast notifications */
.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1055;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}

.toast {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  padding: .75rem 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  min-width: 320px;
  max-width: 500px;
  display: flex;
  align-items: center;
  gap: .5rem;
  pointer-events: auto;
  transform: translateX(120%);
  opacity: 0;
  transition: transform .4s ease, opacity .4s ease;
  will-change: transform, opacity;
  position: relative;
  overflow: hidden;
}

.toast.show { transform: translateX(0); opacity: 1; }
.toast.hide { transform: translateX(120%); opacity: 0; }

.toast-success { border-left: 4px solid #28a745; }
.toast-error { border-left: 4px solid #dc3545; }
.toast-warning { border-left: 4px solid #ffc107; }
.toast-info { border-left: 4px solid #0d6efd; }

.toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  color: #fff;
}

.toast-success .toast-icon { background: #28a745; }
.toast-error .toast-icon { background: #dc3545; }
.toast-warning .toast-icon { background: #ffc107; }
.toast-info .toast-icon { background: #0d6efd; }

.toast-content { flex: 1; line-height: 1.4; color: #1f2937; }

.toast-close {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all .15s ease;
  flex-shrink: 0;
}

.toast-close:hover {
  background: #f3f4f6;
  color: #111827;
}

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 0 0 .5rem .5rem;
  transition: width linear;
}

.toast-success .toast-progress { background: #28a745; }
.toast-error .toast-progress { background: #dc3545; }
.toast-warning .toast-progress { background: #ffc107; }
.toast-info .toast-progress { background: #0d6efd; }

/* Admin HTML editor layout */
.html-editor-wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  height: 520px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.html-editor-wrapper__panel {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.html-editor-wrapper__panel--editor {
  border-right: 1px solid #dee2e6;
}

.html-editor-wrapper__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  background: #f8f9fa;
  padding: 8px 12px;
  border-bottom: 1px solid #dee2e6;
  font-weight: 600;
}

.html-editor-wrapper__refresh {
  padding: 0;
  margin-left: auto;
}

/* Tag lists (developers / sellers / proximities) */
.tag-input-selected,
.dev-seller-selected {
  display:flex;
  flex-wrap:wrap;
  gap:0.3rem;
  padding:0.45rem 0.5rem;
  border:1px solid #cbd5ff;
  border-radius:999px;
  background:#f4f8ff;
  min-height:2.5rem;
}

.tag-input-selected:empty::before,
.dev-seller-selected:empty::before {
  content: attr(data-empty-label);
  color:#6c757d;
  font-style:italic;
}

.tag-input-tag,
.dev-seller-tag,
.developer-tag,
.seller-tag {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background:#e9f2ff;
  border:1px solid #2684ff;
  color:#1d4ed8;
  font:600 13px/1 var(--tblr-font-sans-serif, "Inter", sans-serif);
  box-shadow:0 1px 2px rgba(15,23,42,.08);
}

.tag-input-remove,
.dev-seller-remove {
  background:none;
  border:none;
  color:inherit;
  font-size:15px;
  line-height:1;
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}

.tag-input-remove:hover,
.dev-seller-remove:hover {
  background:rgba(38,132,255,.14);
  color:#0b3fb3;
}

.tag-input-add,
.dev-seller-add-section {
  max-width:420px;
}

.tag-input-search,
.search-container { position:relative; }

.tag-input-results,
.search-results {
  position:absolute;
  inset-inline:0;
  top:calc(100% + 4px);
  background:#fff;
  border:1px solid #d1d5db;
  border-radius:12px;
  box-shadow:0 18px 36px rgba(15,23,42,.15);
  z-index:50;
  max-height:260px;
  overflow:auto;
  display:none;
  padding:4px 0;
}

.tag-input-result,
.search-result-item {
  padding:9px 14px;
  cursor:pointer;
  font:500 14px/1.3 var(--tblr-font-sans-serif, "Inter", sans-serif);
  color:#1f2937;
  display:flex;
  align-items:center;
  gap:8px;
}

.tag-input-result + .tag-input-result,
.search-result-item + .search-result-item { border-top:1px solid #f1f5f9; }

.tag-input-result:hover,
.search-result-item:hover {
  background:#e8f1ff;
}

.html-editor-wrapper__editor {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  position: relative;
}

.html-editor-wrapper__textarea {
  display: none;
}

.html-editor-wrapper__preview {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  background: #fff;
}

@media (max-width: 991.98px) {
  .html-editor-wrapper {
    flex-direction: column;
    height: auto;
  }

  .html-editor-wrapper__panel--editor {
    border-right: none;
    border-bottom: 1px solid #dee2e6;
  }

  .html-editor-wrapper__editor,
  .html-editor-wrapper__preview {
    min-height: 260px;
  }
}