/* =========================================================
   AetherM Base.css
   - Global Tokens / Reset / Layout
   - Bootstrap "skin"
   - Global components (cards/buttons/forms)
   - Dashboard helpers (toggle, editor toolbar)
   ========================================================= */

/* =========================================================
   1) Design Tokens
   ========================================================= */
:root{
  --bg:#0b0d10;
  --bg-2:#11151a;
  --text:#e6e6e6;
  --muted:#a7b0bb;
  --brand:#ffd100;

  --card:#161a21;
  --border:#232a33;
  --shadow:0 10px 30px rgba(0,0,0,.4);

  --radius:14px;         /* global card radius */
  --radius-pill:999px;   /* pill radius */
  --radius-input:999px;  /* inputs default pill */
  --radius-area:12px;    /* textareas/editor */
}

html{ overflow-y: scroll; }

/* =========================================================
   2) Base / Reset
   ========================================================= */
*{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

main{ flex:1 0 auto; }
footer{ margin-top:auto; }

a{ color:inherit; text-decoration:none; }
img{ display:block; width:100%; height:auto; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0;
}

/* =========================================================
   3) Layout Helpers
   ========================================================= */
.container{
  width:min(1240px, calc(100% - 40px));
  margin:0 auto;
}

.text-center{ text-align:center; }
.muted{ color:var(--muted); }

.mb-0{ margin-bottom:0 !important; }
.mb-1{ margin-bottom:.25rem !important; }
.mb-3{ margin-bottom:1rem !important; }

/* =========================================================
   4) Header / Navbar (Bootstrap clean skin)
   ========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background: rgba(11,13,16,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.am-navbar{ padding:10px 0; }

.navbar{
  max-width:1440px;
  margin:0 auto;
  padding:10px 18px;
  background:transparent !important;
}

.brand-logo{
  height:34px;
  width:auto;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.35));
  transition: opacity .2s ease, transform .2s ease;
}
.brand-logo:hover{
  opacity:.9;
  transform:translateY(-1px);
}

.navbar-nav{ gap:6px; }

.navbar-nav .nav-link{
  color: rgba(255,255,255,.88) !important;
  padding: 9px 14px !important;
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: .2px;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  transform: translateY(-1px);
  color: rgba(255,255,255,.92) !important;
}
.navbar-nav .nav-link.active{
  background: rgba(255, 209, 0, .12);
  border-color: rgba(255, 209, 0, .35);
  color: rgba(255,255,255,.95) !important;
}

.dropdown-menu-dark{
  background: rgba(17,21,35,.96) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.45) !important;
  padding: 8px !important;
}
.dropdown-menu-dark .dropdown-item{
  color: rgba(255,255,255,.90) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-weight: 650;
}
.dropdown-menu-dark .dropdown-item:hover{
  background: rgba(255,255,255,.06) !important;
}

.navbar-toggler{
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  padding: 8px 10px !important;
}
.navbar-toggler:focus{
  box-shadow: 0 0 0 .25rem rgba(255,255,255,.08) !important;
}

.navbar .btn{
  box-shadow:none !important;
  border-radius: var(--radius-pill) !important;
  padding: 9px 14px !important;
  font-weight: 800 !important;
}

.btn-outline-light{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.14) !important;
}
.btn-outline-light:hover{
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.18) !important;
}

.am-userchip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
}
.am-userchip:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}
.am-userchip img{
  width:34px;
  height:34px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
}
@media (max-width: 991.98px){
  .am-userchip span{ display:none; }
  .navbar-nav{ padding-top:10px; }
}

/* =========================================================
   5) Sections (global)
   ========================================================= */
.section--padded{ padding:48px 0; }

.section__header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin:0 0 18px;
}
.section__header h2{
  margin:0;
  font-size:clamp(20px, 3vw, 28px);
}
.link-more{ opacity:.8; }
.link-more:hover{ opacity:1; }

/* =========================================================
   6) Cards (global)
   ========================================================= */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(255,255,255,.14);
}

/* =========================================================
   7) Buttons (global)
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius: var(--radius-pill);
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}

.btn-primary{
  background:var(--brand) !important;
  color:#111 !important;
  border-color: rgba(0,0,0,.35) !important;
  font-weight: 900 !important;
}
.btn-primary:hover{ filter: brightness(1.02); }

/* =========================================================
   8) Footer
   ========================================================= */
.footer-inner{
  max-width:1240px;
  margin:0 auto;
  padding:22px 20px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}
.footer-right{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.footer-links{
  display:flex;
  gap:16px;
  list-style:none;
  margin:0;
  padding:0;
}
.footer-links a{ opacity:.85; transition:opacity .2s; }
.footer-links a:hover{ opacity:1; }

.footer-lang select{
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:6px 10px;
  font-size:14px;
  cursor:pointer;
}
.footer-lang select:hover{
  border-color:var(--brand);
  box-shadow:0 0 0 1px var(--brand);
}

/* =========================================================
   9) Disable legacy navbar system (prevents conflicts)
   ========================================================= */
.nav-side,
.nav-left,
.nav-right,
.nav-center,
.dropbtn,
.dropdown__menu,
.caret{
  display:none !important;
}

/* =========================================================
   10) HR (global)
   ========================================================= */
hr{
  border:0;
  height:2px;
  margin:24px 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  opacity:.9;
}
hr.sm{ margin:16px 0; height:1px; }
hr.lg{ margin:40px 0; height:3px; }
hr.muted{
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}

/* =========================================================
   11) Global Toggle Switch (AetherM)
   ========================================================= */
.ae-toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
}
.ae-toggle input{ display:none; }

.ae-toggle .track{
  width:44px;
  height:24px;
  background:#5b1f1f; /* off */
  border-radius: var(--radius-pill);
  position:relative;
  transition: background .25s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.ae-toggle .knob{
  width:18px;
  height:18px;
  background:#fff;
  border-radius: var(--radius-pill);
  position:absolute;
  top:3px;
  left:3px;
  transition: transform .25s ease;
}
.ae-toggle input:checked + .track{ background:#0b7a43; }
.ae-toggle input:checked + .track .knob{ transform: translateX(20px); }

/* =========================================================
   12) Links
   ========================================================= */
.link-a:hover{
  color: var(--brand);
}

/* =========================================================
   13) Forms (global dark)
   IMPORTANT:
   - Inputs/selects stay pill
   - Textareas become "boxy"
   ========================================================= */

/* Inputs + Selects */
.form-control,
.form-select,
select{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: var(--radius-input) !important;
}

/* Textareas */
textarea,
textarea.form-control{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: var(--radius-area) !important;
  resize: vertical;
}

/* Placeholders */
.form-control::placeholder,
textarea::placeholder{
  color: rgba(255,255,255,.55) !important;
}

/* Focus */
.form-control:focus,
.form-select:focus,
select:focus,
textarea:focus{
  box-shadow:none !important;
  outline:none !important;
  border-color: rgba(255,209,0,.35) !important;
}

/* Dropdown options */
select option,
.form-select option{
  background: var(--card) !important;
  color: var(--text) !important;
}

/* =========================================================
   14) Editor Toolbar (global)
   ========================================================= */
.ae-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:8px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  margin-bottom:8px;
}
.ae-toolbar .ae-tbtn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius: var(--radius-pill);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.92);
  font-weight:900;
  font-size:12px;
  line-height:1;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.ae-toolbar .ae-tbtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}

/* =========================================================
   15) Dashboard: News Actions row (small pills)
   ========================================================= */
.dnw-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
}
.dnw-action{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius: var(--radius-pill);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.dnw-action .lbl{
  font-size:12px;
  font-weight:900;
  color: rgba(255,255,255,.70);
  white-space:nowrap;
}
@media (max-width: 620px){
  .dnw-actions{ justify-content:flex-start; width:100%; }
}

/* =========================================================
   16) HARD OVERRIDE:
   Editor content fields MUST be boxy (beats Bootstrap)
   ========================================================= */
.modal .tab-pane textarea.form-control[name$="[content]"]{
  border-radius: var(--radius-area) !important;
}

/* Optional: toolbar + textarea as one "box" */
.modal .tab-pane .ae-toolbar{
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom:0; /* removes the gap */
}
.modal .tab-pane textarea.form-control[name$="[content]"]{
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
/* =========================================================
   17) Modal + Tabs (AetherM Skin)
   - fixes unreadable text in create/edit modals
   - tabs match AetherM brand
   ========================================================= */

/* Modal container */
.modal-content.am-modal{
  background: rgba(17,21,26,.92) !important;   /* glassy */
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Header/Footer dividers */
.modal-header,
.modal-footer{
  border-color: rgba(255,255,255,.08) !important;
}

/* Modal title */
.modal-title{
  color: rgba(255,255,255,.92) !important;
  font-weight: 900;
}

/* Close button (X) */
.btn-close,
.btn-close-white{
  filter: invert(1) grayscale(1);
  opacity: .75;
}
.btn-close:hover{ opacity: 1; }

/* Labels inside modal */
.modal .form-label{
  color: rgba(255,255,255,.75) !important;
  font-weight: 800;
}

/* Helper text */
.modal .small,
.modal small{
  color: rgba(255,255,255,.60) !important;
}

/* Inputs in modal: visible text */
.modal .form-control,
.modal .form-select{
  color: rgba(255,255,255,.92) !important;
}
.modal .form-control:disabled,
.modal .form-control[disabled]{
  opacity: 1 !important;
  color: rgba(255,255,255,.65) !important;
  background: rgba(255,255,255,.02) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* =========================================================
   Tabs (Bootstrap nav-tabs) – AetherM style
   ========================================================= */

/* the bottom line under tabs */
.modal .nav-tabs{
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  gap: 8px;
}

/* each tab button */
.modal .nav-tabs .nav-link{
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-bottom: none !important;

  color: rgba(255,255,255,.65) !important;     /* readable but not white */
  background: rgba(255,255,255,.02) !important;

  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;

  padding: 10px 14px !important;
  font-weight: 900 !important;
  letter-spacing: .2px;

  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

.modal .nav-tabs .nav-link:hover{
  color: rgba(255,255,255,.85) !important;
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.10) !important;
  transform: translateY(-1px);
}

/* active tab */
.modal .nav-tabs .nav-link.active{
  color: rgba(255,255,255,.92) !important;
  background: rgba(255, 209, 0, .10) !important;
  border-color: rgba(255, 209, 0, .28) !important;

  /* "connect" active tab with content */
  position: relative;
}
.modal .nav-tabs .nav-link.active::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: -2px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,209,0,.75);
  box-shadow: 0 0 16px rgba(255,209,0,.25);
}

/* tab content spacing */
.modal .tab-content{
  color: rgba(255,255,255,.88);
}

/* =========================================================
   Optional: make switches labels readable
   (Published/Highlight/Author shown...)
   ========================================================= */
.modal .form-label.small{
  color: rgba(255,255,255,.70) !important;
}
/* Cookie banner (AetherM) */
.am-cookie{
  position: fixed;
  inset: auto 14px 14px 14px;
  z-index: 2000;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.am-cookie__card{
  width: min(980px, 100%);
  background: rgba(17,21,26,.92);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  pointer-events: all;
}

.am-cookie__title{
  font-weight: 900;
  letter-spacing: .2px;
  margin-bottom: 4px;
}

.am-cookie__desc{
  color: rgba(255,255,255,.78);
  font-size: 14px;
  line-height: 1.35;
}

.am-cookie__link{
  margin-left: 8px;
  opacity: .95;
  text-decoration: underline;
}

.am-cookie__opts{
  display: flex;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.am-cookie__opt{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  user-select: none;
  font-weight: 700;
  font-size: 13px;
}

.am-cookie__opt input{
  width: 16px;
  height: 16px;
}

.am-cookie__actions{
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 720px){
  .am-cookie__card{
    flex-direction: column;
    align-items: stretch;
  }
  .am-cookie__actions{
    justify-content: stretch;
  }
  .am-cookie__actions .btn{
    width: 100%;
  }
}
/* Cookie banner toggle alignment */
.am-cookie__toggle .label{
  font-weight: 800;
  font-size: 13px;
  opacity: .95;
}

.am-cookie__toggle .track{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
/* Cookie: "Necessary" soll disabled/dunkler wirken */
.am-cookie__toggle input[disabled] + .track{
  background: rgba(255,255,255,.06) !important;   /* dunkler/neutral */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  filter: saturate(.2);
}

.am-cookie__toggle input[disabled] + .track .knob{
  background: rgba(255,255,255,.55) !important;   /* knob grauer */
}

.am-cookie__toggle input[disabled] ~ .label{
  opacity: .55;                                    /* Text „disabled“ */
}

.am-cookie__toggle:has(input[disabled]){
  cursor: not-allowed;
  opacity: .9;
}