/* ============================================================
   /assets/ui/ljh-banner.css
   
   LJH BANNER & ADMIN UI – Aqua Dark Glass
   Version 1.1 – 2025-12-21

   Innehåll:
   1. Right column glass cards
   2. Top news ticker banner
   3. Admin glass panel
   4. Admin toggles & chips
   5. Admin form elements
   ============================================================ */


/* ============================================================
   [1] RIGHT COLUMN – GLASS CARDS
============================================================ */

.ljh-right-stack {
    display: flex;
    flex-direction: column;
    gap: 24px; /* var t.ex. 10–12 */
}


.ljh-banner-card {
    position: relative;
    padding: 18px 20px;
    margin-top: 6px;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.12),
        rgba(255,255,255,0.06)
    );

    backdrop-filter: blur(18px) saturate(160%);
    border-radius: 18px;

    border: 1px solid rgba(255,255,255,0.18);

    color: #eaf2ff;

    box-shadow:
        0 12px 30px rgba(0,0,0,0.45),
        inset 0 0 24px rgba(255,255,255,0.08);
}


/* Glasblänk */
.ljh-banner-reflection {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 48px;
    height: 48px;
    pointer-events: none;
    opacity: 0.25;

    background: radial-gradient(
        circle at top left,
        rgba(255,255,255,0.35),
        rgba(255,255,255,0.0) 70%
    );
}

.ljh-banner-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 40px rgba(0,0,0,0.55),
        inset 0 0 30px rgba(255,255,255,0.12);
}


/* System / status – låg vikt */
.ljh-banner-card.is-system {
    opacity: 0.85;
    transform: scale(0.98);
}

/* Information – normal */
.ljh-banner-card.banner-info {
    opacity: 1;
}

/* Reklam – högst prioritet */
.ljh-banner-card.banner-ad {
    transform: scale(1.02);
}



/* Typ */
.ljh-banner-title {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #eaf2ff;
    margin-bottom: 6px;
}


.ljh-banner-text {
    font-size: 0.9rem;
    line-height: 1.45;
    color: rgba(230,240,255,0.85);
}


/* Glow-varianter */

/* ==============================
   GLOBAL GLOW – ALLA MILJÖER
================================ */

/* ==============================
   NYHETER – GRÖN NEON
================================ */
.ljh-banner-card.type-news {
  border-color: rgba(80,200,120,0.45);
  box-shadow:
    0 0 0 1px rgba(80,200,120,0.20),
    0 0 24px rgba(80,200,120,0.22),
    0 18px 40px rgba(0,0,0,0.45);
}

/* ==============================
   INFORMATION – BLÅ NEON
================================ */
.ljh-banner-card.type-info {
  border-color: rgba(120,180,255,0.45);
  box-shadow:
    0 0 0 1px rgba(120,180,255,0.18),
    0 0 22px rgba(120,180,255,0.18),
    0 18px 40px rgba(0,0,0,0.45);
}

/* ==============================
   REKLAM – GUL NEON
================================ */
.ljh-banner-card.type-ad {
  border-color: rgba(255,190,90,0.45);
  box-shadow:
    0 0 0 1px rgba(255,190,90,0.20),
    0 0 24px rgba(255,190,90,0.22),
    0 18px 40px rgba(0,0,0,0.45);
}




.ljh-banner-sandbox{
  display: block;
  font-family: inherit;
}




/* ============================================================
   [2] TOP NEWS BANNER – TICKER
   OBS: kräver JS + korrekt HTML-struktur
============================================================ */

.ljh-news-banner {
    width: 100%;
    min-height: 62px;
    padding: 1rem 2rem;

    background: rgba(15,23,42,0.55);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.08);

    display: flex;
    align-items: center;
    gap: 1.2rem;

    color: var(--ljh-text);
    font-size: 1.05rem;

    position: relative;
    z-index: 30;
    overflow: hidden;
}

.ljh-news-banner .banner-label {
    padding: 0.35rem 0.8rem;
    border-radius: var(--ljh-radius-md);
    font-weight: 600;
    color: var(--ljh-aqua-light);
    white-space: nowrap;
    z-index: 5;
}

/* Ticker core */
.ljh-news-banner .ticker-viewport {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
}

.ljh-news-banner .ticker-track {
    display: inline-flex;
    width: max-content;
    animation: ljhTicker 35s linear infinite;
}

.ljh-news-banner .ticker-inner {
    display: inline-flex;
}

.ljh-news-banner .item {
    margin: 0 1.1rem;
    color: var(--ljh-text-soft);
}

.ljh-news-banner .sep {
    margin: 0 0.8rem;
    color: var(--ljh-aqua-light);
}

@keyframes ljhTicker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.ljh-news-banner .ticker-viewport:hover .ticker-track {
    animation-play-state: paused;
}


/* ============================================================
   [3] ADMIN GLASS PANEL
============================================================ */

.ljh-admin-glass-panel {
    background: rgba(15,23,42,0.55);
    backdrop-filter: blur(22px) saturate(160%);
    border-radius: 28px;
    padding: 28px;

    border: 1px solid rgba(255,255,255,0.12);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.45),
        inset 0 0 40px rgba(255,255,255,0.06);
}


/* ============================================================
   [4] ADMIN TOGGLES & ICONS
============================================================ */

.ljh-toggle-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.ljh-toggle {
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;

    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.75);

    cursor: pointer;
    transition: all .2s ease;
}

.ljh-toggle.active {
    color: #fff;
    background: rgba(255,255,255,0.18);
}


/* ============================================================
   [5] ADMIN FORM ELEMENTS
============================================================ */

.ljh-panel-form {
    max-width: 720px;
}

.ljh-form-row {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ljh-form-row label {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.85;
}

/* Inputs – light mode */
.ljh-form-row input,
.ljh-form-row textarea {
    padding: 12px 14px;
    font-size: 1rem;
    border-radius: 14px;

    background: rgba(255,255,255,0.85);
    color: #111;
    border: 1px solid rgba(0,0,0,0.12);
}

.ljh-form-row textarea {
    min-height: 180px;
    resize: vertical;
}

.ljh-form-row ::placeholder {
    color: rgba(0,0,0,0.45);
}


/* ============================================================
   [6] ADMIN NOTICES
============================================================ */

.ljh-admin-notice.success {
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: 12px;

    background: rgba(120,200,120,0.18);
    border: 1px solid rgba(120,200,120,0.45);
    color: #eaffea;

    box-shadow: 0 0 24px rgba(120,200,120,0.35);
}


/* Radlayout: titel vänster, allt annat höger */
.ljh-item-row{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Titel tar utrymme */
.ljh-item-title{
  flex:1;
  min-width:0;              /* viktigt för att text ska kunna brytas snyggt */
}

/* Högerklumpen skjuts ut till höger */
.ljh-item-right{
  margin-left:auto;         /* <-- MAGIN SOM FLYTTAR HÖGER */
  display:flex;
  align-items:center;
  gap:10px;
}

/* Actions i en rad */
.ljh-item-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Form får inte skapa radbrytning */
.ljh-inline-form{
  display:inline-flex;
  margin:0;
}


/* ==============================
   ADMIN – ÅTERAKTIVERA GLOW
================================ */
.admin .ljh-banner-card.banner-news,
.admin .ljh-banner-card.type-news {
  border-color: rgba(80,200,120,0.45);
  box-shadow:
    0 0 0 1px rgba(80,200,120,0.20),
    0 0 24px rgba(80,200,120,0.22),
    0 18px 40px rgba(0,0,0,0.45);
}

.admin .ljh-banner-card.banner-info,
.admin .ljh-banner-card.type-info {
  border-color: rgba(120,180,255,0.45);
  box-shadow:
    0 0 0 1px rgba(120,180,255,0.18),
    0 0 22px rgba(120,180,255,0.18),
    0 18px 40px rgba(0,0,0,0.45);
}

.admin .ljh-banner-card.banner-ad,
.admin .ljh-banner-card.type-ad {
  border-color: rgba(255,190,90,0.45);
  box-shadow:
    0 0 0 1px rgba(255,190,90,0.20),
    0 0 24px rgba(255,190,90,0.22),
    0 18px 40px rgba(0,0,0,0.45);
}