/* 
   Admin Glass Theme (Purple Aurora)
   - Keeps your gradient style
   - Fixes dropdowns/selects (no white background, readable states)
*/

:root{
  /* Base */
  --ink: #07060a;
  --panel: rgba(16, 14, 26, .62);
  --panel-strong: rgba(16, 14, 26, .86);

  /* Borders / text */
  --border: rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.16);
  --text: rgba(255,255,255,.90);
  --muted: rgba(255,255,255,.65);

  /* Accents */
  --violet: rgba(139,92,246,.95);
  --magenta: rgba(217,70,239,.85);
  --neon: rgba(167,139,250,.90);

  /* Effects */
  --shadow: 0 12px 50px rgba(0,0,0,.35);
  --shadow-strong: 0 18px 70px rgba(0,0,0,.45);
  --ring: 0 0 0 4px rgba(139,92,246,.18);

  /* Radii */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
}

/* 
   Base
*/

html, body{ height: 100%; }
body{
  background: var(--ink);
  color: var(--text);
}

a{ color: rgba(167,139,250,.95); }
a:hover{ color: rgba(217,70,239,.95); }

::selection{
  background: rgba(167,139,250,.22);
  color: #fff;
}

.container{ max-width: 1100px; }

/* 
   Background helpers
*/

.bg-aurora{
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1000px 500px at 20% 20%, rgba(139,92,246,.28), transparent 60%),
    radial-gradient(900px 600px at 80% 30%, rgba(217,70,239,.20), transparent 60%),
    radial-gradient(900px 700px at 55% 90%, rgba(167,139,250,.16), transparent 60%);
  z-index: -2;
}

.bg-grid{
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .12;
  mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 65%);
  z-index: -1;
}

/* 
   Brand / Titles
*/

h1.brand, .brand{
  font-weight: 800;
  letter-spacing: -.02em;
}

.brand{
  background: linear-gradient(90deg, #a78bfa, #d946ef, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 
   Glass cards
*/

.card-glass,
.card.card-glass{
  background: var(--panel);
  border: 1px solid var(--border) !important;
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--shadow);
  border-radius: var(--r-lg);
}

/* 
   Alerts
*/

.alert.card-glass{ color: var(--text); }

.alert-danger{
  background: rgba(220, 38, 38, .12) !important;
  border: 1px solid rgba(220, 38, 38, .25) !important;
}
.alert-success{
  background: rgba(34,197,94,.12) !important;
  border: 1px solid rgba(34,197,94,.22) !important;
}
.alert-warning{
  background: rgba(234,179,8,.12) !important;
  border: 1px solid rgba(234,179,8,.22) !important;
}
/* Optional: Bootstrap info alert used in your Gallery tab */
.alert-info{
  background: rgba(59,130,246,.12) !important;
  border: 1px solid rgba(59,130,246,.22) !important;
  color: var(--text) !important;
}

/* nicer list spacing in errors */
.alert ul{ padding-left: 1.25rem; }
.alert li{ margin: .2rem 0; }

/* 
   Tabs (Bootstrap nav-pills)
*/

.nav-pills .nav-link{
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-md);
  padding: .55rem .85rem;
}
.nav-pills .nav-link:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
}
.nav-pills .nav-link.active{
  color: #fff;
  background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(217,70,239,.85));
  border-color: rgba(167,139,250,.30);
  box-shadow: 0 12px 30px rgba(139,92,246,.18);
}

/* 
   Forms
*/

.form-label{ color: var(--muted) !important; font-size: .92rem; }
.form-text{ color: rgba(255,255,255,.55) !important; }

/* Inputs / Textareas */
.form-control,
textarea.form-control{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #fff !important;
  border-radius: var(--r-md) !important;
  padding: .85rem 1rem !important;
  outline: none !important;
  box-shadow: none !important;
}

textarea.form-control{ line-height: 1.35; }

.form-control::placeholder{ color: rgba(255,255,255,.35); }

.form-control:focus,
textarea.form-control:focus{
  border-color: rgba(167,139,250,.55) !important;
  box-shadow: var(--ring) !important;
}

/* Disabled/readonly */
.form-control:disabled,
.form-control[readonly]{
  opacity: .75;
  background: rgba(255,255,255,.04) !important;
}

/* 
   SELECTS (Dropdown fields) — fixes “white background” issue
   Works for both:
   - Bootstrap 5: .form-select
   - Older Bootstrap: select.form-control
*/

.form-select,
select.form-control{
  background-color: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #fff !important;

  border-radius: var(--r-md) !important;
  padding: .85rem 2.65rem .85rem 1rem !important;

  /* Make sure OS arrow doesn't force ugly styles */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Custom arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23a78bfa' d='M7 10l5 5l5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px 18px;
}

.form-select:focus,
select.form-control:focus{
  border-color: rgba(167,139,250,.55) !important;
  box-shadow: var(--ring) !important;
}

/* Options: some browsers ignore this (native menu), but when supported it helps */
.form-select option,
select.form-control option{
  background: #0c0a14;
  color: rgba(255,255,255,.92);
}

/* 
   Bootstrap dropdown menus (the popup menus)
*/

.dropdown-menu{
  background: var(--panel-strong) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--shadow-strong);
  border-radius: var(--r-md);
  padding: .4rem;
}

.dropdown-divider{
  border-top-color: rgba(255,255,255,.12) !important;
}

.dropdown-item{
  color: rgba(255,255,255,.86) !important;
  border-radius: var(--r-sm);
  padding: .55rem .7rem;
}

.dropdown-item:hover,
.dropdown-item:focus{
  background: rgba(167,139,250,.16) !important;
  color: #fff !important;
}

.dropdown-item.active,
.dropdown-item:active{
  background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(217,70,239,.85)) !important;
  color: #fff !important;
}

/* 
   Buttons
*/

.btn{
  border-radius: var(--r-md) !important;
  padding: .55rem .95rem !important;
  font-weight: 600 !important;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.btn:hover{ transform: translateY(-1px); }

.btn-violet{
  color: #fff !important;
  border: 1px solid rgba(167,139,250,.28) !important;
  background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(217,70,239,.85)) !important;
  box-shadow: 0 12px 30px rgba(139,92,246,.18);
}
.btn-violet:hover{ filter: brightness(1.06); }

.btn-outline-light{
  color: rgba(255,255,255,.85) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.06) !important;
}
.btn-outline-light:hover{ background: rgba(255,255,255,.10) !important; }

/* 
   Code tag
*/

code{
  color: rgba(167,139,250,.95);
  background: rgba(167,139,250,.10);
  border: 1px solid rgba(167,139,250,.18);
  padding: .15rem .35rem;
  border-radius: 10px;
}

/* 
   Media manager (drop zone / grid)
*/

.media-drop{
  border: 1px dashed rgba(255,255,255,.25);
  background: rgba(255,255,255,.04);
  min-height: 170px;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.media-drop:hover{
  background: rgba(255,255,255,.07);
  transform: translateY(-1px);
}
.media-drop.is-drag{
  border-color: rgba(167,139,250,.65);
  box-shadow: 0 0 0 2px rgba(167,139,250,.25);
  background: rgba(167,139,250,.08);
}

.media-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.media-card{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.04);
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}

.media-card img{
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.media-meta{ padding: .65rem .8rem; }

.media-actions{
  position: absolute;
  top: 10px;
  right: 10px;
}
.media-actions .btn{
  padding: .3rem .6rem !important;
  border-radius: 10px !important;
  backdrop-filter: blur(6px);
}

/* 
   Mobile polish
*/

@media (max-width: 576px){
  .btn{ width: 100%; }
  .mt-4.d-flex.gap-2{ flex-direction: column; }
}