/*
  Bongoto Live - Public Dashboard UI
  UI-only refresh (sidebar + cards + pills). No functional changes.
*/

:root{
  --bl-primary:#ff2d55;
  --bl-primary-2:#ff4d6d;
  --bl-bg:#f5f7fb;
  --bl-card:#ffffff;
  --bl-text:#111827;
  --bl-muted:#6b7280;
  --bl-border:rgba(17,24,39,.10);
  --bl-shadow:0 12px 30px rgba(17,24,39,.10);
  --bl-shadow-sm:0 6px 18px rgba(17,24,39,.08);
  --bl-radius:18px;
  --bl-radius-sm:14px;
}

/* Contain all styling within the shortcode app */
.bl-app-bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:0 28px;box-sizing:border-box;overflow-x:hidden}

/* Logged-out state: center the login alert nicely */
.bl-login-wrap{min-height:55vh;display:flex;align-items:center;justify-content:center;padding:18px 0}
.bl-login-card{max-width:780px;width:100%;text-align:center;padding:26px}
.bl-login-card h2{margin:0 0 10px;font-size:28px}
.bl-login-card p{margin:0 0 12px;color:var(--bl-muted);font-size:15px}
.bl-login-card .button{min-width:180px}

.bl-app{
  box-sizing:border-box;
  display:flex;
  gap:14px;
  width:100%;
  max-width:1800px;
  margin:10px auto;
  padding:12px;
  background:var(--bl-bg);
  border:1px solid rgba(17,24,39,.06);
  border-radius:var(--bl-radius);
}
.bl-app *{box-sizing:border-box}
.bl-app a{color:inherit}

/* Sidebar */
.bl-sidebar-wrap{width:210px;flex:0 0 210px;min-width:210px}
.bl-sidebar{width:100%;background:var(--bl-card);border:1px solid var(--bl-border);border-radius:var(--bl-radius);box-shadow:var(--bl-shadow-sm);padding:12px}

.bl-brand{display:flex;align-items:center;justify-content:flex-start;padding:10px 10px 14px;border-bottom:1px solid rgba(17,24,39,.06);margin-bottom:10px}
.bl-brand__logo{
  width:42px;height:42px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;
  background:linear-gradient(135deg,var(--bl-primary),var(--bl-primary-2));
  box-shadow:0 10px 20px rgba(255,45,85,.18);
}
.bl-brand__title{font-weight:900;line-height:1.1;font-size:18px}
.bl-brand__sub{color:var(--bl-muted);font-size:.85em;margin-top:2px}

.bl-nav{display:flex;flex-direction:column;gap:8px;padding:10px 4px 6px}
.bl-nav__item{
  display:flex;align-items:center;gap:10px;
  padding:12px 12px;
  border-radius:14px;
  text-decoration:none;
  color:var(--bl-text);
  border:1px solid rgba(17,24,39,.06);
  background:#fff;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
  box-shadow:0 6px 16px rgba(17,24,39,.04);
}
.bl-nav__item:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(17,24,39,.08)}
.bl-nav__item.is-active{
  background:linear-gradient(135deg,var(--bl-primary),var(--bl-primary-2));
  color:#fff;border-color:transparent;
  box-shadow:0 14px 28px rgba(255,45,85,.20);
}
.bl-nav__item.is-active:hover{transform:none}

/* Main */
.bl-main{flex:1;min-width:0}
.bl-topbar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  background:var(--bl-card);
  border:1px solid var(--bl-border);
  border-radius:var(--bl-radius);
  box-shadow:var(--bl-shadow-sm);
  padding:14px 16px;
  margin-bottom:14px;
}
.bl-title{margin:0 0 4px;font-size:20px}
.bl-sub{color:var(--bl-muted);font-size:.92em}
.bl-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Cards */
.bl-card{
  background:var(--bl-card);
  border:1px solid var(--bl-border);
  border-radius:var(--bl-radius);
  box-shadow:var(--bl-shadow-sm);
  padding:16px;
  margin-bottom:14px;
}
.bl-card h3{margin-top:0}

.bl-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.bl-card-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.bl-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bl-col-span2{grid-column:span 2 / span 2}
@media (max-width: 900px){
  .bl-grid-3{grid-template-columns:1fr}
  .bl-col-span2{grid-column:span 1 / span 1}
}

/* Small helpers */
.bl-help,.muted{color:var(--bl-muted)}

/* Stats (Slots/Overview style blocks) */
.bl-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:12px 0 4px}
.bl-stat{background:rgba(245,247,251,.80);border:1px solid rgba(17,24,39,.06);border-radius:16px;padding:12px 12px;box-shadow:0 10px 22px rgba(17,24,39,.04)}
.bl-stat .k{color:var(--bl-muted);font-weight:700;font-size:.9em}
.bl-stat .v{font-weight:900;font-size:20px;margin-top:4px}

@media (max-width: 768px){
  .bl-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 520px){
  .bl-stats{grid-template-columns:1fr}
}

/* Notices */
.bl-notice{border-radius:var(--bl-radius-sm);padding:12px 14px;margin:12px 0;border:1px solid rgba(17,24,39,.10);background:#fff}
.bl-notice.success{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.08)}
.bl-notice.error{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08)}
.bl-notice.warn{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.10)}

/* Buttons (WP compatible) */
.bl-app .button,
.bl-app button,
.bl-btn{
  appearance:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;
  padding:12px 16px;
  border-radius:14px;
  font-weight:700;
  border:1px solid rgba(17,24,39,.14);
  background:#fff;
  color:var(--bl-text);
  cursor:pointer;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease, background .12s ease;
  box-shadow:0 8px 20px rgba(17,24,39,.06);
}
.bl-app .button:hover,.bl-app button:hover,.bl-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(17,24,39,.10)}
.bl-app .button:active,.bl-app button:active,.bl-btn:active{transform:translateY(0);opacity:.95}

.bl-app .button-primary,
.bl-btn-primary{
  border-color:transparent;
  background:linear-gradient(135deg,var(--bl-primary),var(--bl-primary-2));
  color:#fff;
  box-shadow:0 14px 30px rgba(255,45,85,.18);
}
.bl-btn-outline{background:#fff}
.bl-btn-danger,.bl-app .button-danger{background:#ef4444;border-color:#ef4444;color:#fff}
.bl-btn-lg{min-height:48px;padding:14px 18px;border-radius:16px}

/* Compact buttons inside tables */
.bl-btn-small{min-height:36px;padding:8px 12px;border-radius:12px;font-weight:800;background:#fff;border:1px solid rgba(17,24,39,.14);box-shadow:0 8px 18px rgba(17,24,39,.06);text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.bl-btn-small:hover{transform:translateY(-1px)}

/* Forms */
.bl-form{display:flex;flex-direction:column;gap:10px}
.bl-label{font-weight:700;color:var(--bl-text);margin-bottom:-4px}
.bl-form input[type="text"],
.bl-form input[type="password"],
.bl-form input[type="url"],
.bl-form select{
  width:100%;max-width:680px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(17,24,39,.14);
  background:#fff;
  box-shadow:0 8px 18px rgba(17,24,39,.05);
  outline:none;
}
.bl-form input[type="text"]:focus,
.bl-form input[type="password"]:focus,
.bl-form input[type="url"]:focus,
.bl-form select:focus{
  border-color:rgba(255,45,85,.55);
  box-shadow:0 0 0 4px rgba(255,45,85,.15), 0 8px 18px rgba(17,24,39,.05);
}
.bl-form input[type="file"]{
  width:100%;max-width:680px;
  padding:12px 14px;
  border-radius:16px;
  border:1px dashed rgba(17,24,39,.22);
  background:rgba(17,24,39,.02);
}
.bl-form input[type="file"]::file-selector-button{
  margin-right:10px;border:0;border-radius:999px;padding:10px 14px;cursor:pointer;background:rgba(17,24,39,.08)
}
.bl-form input[type="file"]::file-selector-button:hover{opacity:.9}

.bl-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.bl-action-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:8px 0 4px}
.bl-file{flex:1;min-width:260px;max-width:100%}
.bl-right-btn{white-space:nowrap;min-width:210px}

/* Form actions: keep submit buttons compact (avoid full-width stretch in column flex) */
.bl-form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px;margin-bottom:22px;align-self:stretch}
.bl-form-actions .button,.bl-form-actions button{width:auto;min-width:160px}

/* Truncate long single-line values (used for URLs/keys in tables) */
.bl-truncate{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Tables */
.bl-table-wrap{overflow:auto;border-radius:var(--bl-radius-sm);border:1px solid rgba(17,24,39,.08)}
.bl-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;background:#fff}
.bl-table thead th{position:sticky;top:0;z-index:1;background:rgba(245,247,251,.90);backdrop-filter:saturate(140%) blur(6px);font-weight:800;color:rgba(17,24,39,.80)}
.bl-table th,.bl-table td{padding:12px 10px;border-bottom:1px solid rgba(17,24,39,.06);text-align:left;vertical-align:top;white-space:normal;word-break:break-word;overflow-wrap:break-word}
.bl-table tbody tr:hover{background:rgba(17,24,39,.02)}
.bl-table td a{color:var(--bl-primary);text-decoration:none}
.bl-table td a:hover{text-decoration:underline}

/* Column widths (tuned as requested) */
.bl-col-id{width:70px}
.bl-col-status{width:120px}
.bl-col-created{width:170px}
.bl-col-actions{width:190px}
.bl-col-file{width:150px}
.bl-col-url{width:320px;min-width:260px}
.bl-col-key{width:240px;min-width:200px}

/* Destinations table: Slot-based columns */
.bl-table-destinations .bl-col-slot{width:10%;min-width:86px}
.bl-table-destinations .bl-col-title{width:12%;min-width:100px}
.bl-table-destinations .bl-col-key{width:56%;min-width:320px}
.bl-table-destinations .bl-col-status{width:10%;min-width:105px}
.bl-table-destinations .bl-col-actions{width:12%;min-width:110px}

.bl-table-destinations td.bl-col-key{
  white-space:nowrap;
  word-break:normal;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Keep action button readable (don't break "Delete" into two lines) */
.bl-table-destinations td.bl-col-actions{
  white-space:nowrap;
  word-break:normal;
  overflow:visible;
}

/* Destinations: keep action button readable (no wrap) */
.bl-table-destinations td.bl-col-actions .bl-btn,
.bl-table-destinations td.bl-col-actions .button{
  padding:10px 16px;
  font-size:13px;
  min-width:96px;
  white-space:nowrap;
}

/* Streams table: give Actions more room by shrinking the Video column */
.bl-table-streams .bl-col-id{width:50px}
.bl-table-streams .bl-col-status{width:110px}
.bl-table-streams .bl-col-created{width:150px}
.bl-table-streams .bl-col-actions{width:260px}
.bl-table-streams .bl-col-title{width:260px}
.bl-table-streams .bl-col-dest{width:110px}
.bl-table-streams td.bl-col-dest{white-space:nowrap;}

/* Keep the video title compact (ellipsis) so buttons have space */
.bl-table-streams td.bl-col-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal}

/* Prefer one-line action buttons when there is room */
.bl-table-streams td.bl-col-actions{white-space:nowrap;word-break:normal}
.bl-table-streams td.bl-col-actions .bl-inline-actions{flex-wrap:nowrap}

@media (max-width: 1100px){
  /* On smaller screens allow wrapping so layout doesn't overflow */
  .bl-table-streams td.bl-col-actions .bl-inline-actions{flex-wrap:wrap}
  .bl-table-streams td.bl-col-actions{white-space:normal}
}

/* Date: two lines */
.bl-dt{display:flex;flex-direction:column;line-height:1.15}
.bl-dt__date{font-weight:700}
.bl-dt__time{color:var(--bl-muted);font-size:.9em}

/* Action buttons row (wrap if needed, never overlap) */
.bl-inline-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bl-inline-actions form{margin:0}

/* Pills / badges */
.bl-badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:999px;font-size:.82em;font-weight:800;border:1px solid rgba(17,24,39,.12);background:rgba(17,24,39,.04)}
.bl-badge.ready,.bl-badge.running{border-color:rgba(16,185,129,.30);background:rgba(16,185,129,.12);color:#065f46}
.bl-badge.pending{border-color:rgba(59,130,246,.30);background:rgba(59,130,246,.10);color:#1d4ed8}
.bl-badge.stopped{border-color:rgba(107,114,128,.28);background:rgba(107,114,128,.10);color:#374151}
.bl-badge.expired{border-color:rgba(239,68,68,.30);background:rgba(239,68,68,.10);color:#b91c1c}

/* Helpers */
.muted{color:var(--bl-muted)}
hr{border:0;border-top:1px solid rgba(17,24,39,.08);margin:22px 0}

/* Responsive */
@media (max-width: 768px){
  .bl-app{flex-direction:column}
  .bl-sidebar-wrap{width:auto;min-width:unset;flex:1}
  .bl-grid-2{grid-template-columns:1fr}
  .bl-right-btn{min-width:unset;flex:1}
}

/* Pricing page */
.bl-pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.bl-pricing-main{border:1px solid rgba(17,24,39,.10);border-radius:16px;background:#fff;overflow:hidden}
.bl-pricing-main__head{padding:14px 14px 10px;border-bottom:1px solid rgba(17,24,39,.08);background:rgba(17,24,39,.02)}
.bl-pricing-subgrid{display:grid;grid-template-columns:1fr;gap:12px;padding:14px}
.bl-pricing-card{border:1px solid rgba(17,24,39,.10);border-radius:14px;padding:12px;background:#fff}
.bl-pricing-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.bl-pricing-card__label{font-weight:900;font-size:1.05em}
.bl-pricing-card__price{font-weight:900}
.bl-pricing-card__desc{margin-top:10px;color:var(--bl-muted);line-height:1.35}
.bl-pricing-card__actions{margin-top:12px}

@media (max-width: 768px){
  .bl-pricing-grid{grid-template-columns:1fr}
}

.bl-badge.error{border-color:rgba(239,68,68,.30);background:rgba(239,68,68,.10);color:#b91c1c}


.bl-nav__item--external{background:rgba(245,247,251,.6)}
.bl-nav__item--external:hover{transform:translateY(-1px)}


/* Keep Destination header/cell on one line */
.bl-table-streams th.bl-col-dest{white-space:nowrap}


/* Streams table alignment tweaks */
.bl-table-streams th.bl-col-title,
.bl-table-streams td.bl-col-title,
.bl-table-streams th.bl-col-actions,
.bl-table-streams td.bl-col-actions{
  text-align:center;
}

.bl-table-streams th.bl-col-dest,
.bl-table-streams td.bl-col-dest{
  text-align:center;
}

/* Make columns feel less cramped */
.bl-table-streams th,
.bl-table-streams td{
  padding-left:14px;
  padding-right:14px;
}

/* Reduce Actions reserved width so empty space isn't exaggerated */
.bl-table-streams .bl-col-actions{width:200px}

/* Keep table flush-left inside container */
.bl-table{margin-left:0}


/* --- UI tweaks (requested) --- */
.bl-table-streams th.bl-col-id{white-space:nowrap}
.bl-table-streams .bl-col-id{width:70px}

/* Title should be left aligned, with a bit less left padding */
.bl-table-streams th.bl-col-title,
.bl-table-streams td.bl-col-title{
  text-align:left !important;
}
.bl-table-streams td.bl-col-title{
  padding-left:10px !important;
}

/* Keep Actions centered, Destination can stay centered */
.bl-table-streams th.bl-col-actions,
.bl-table-streams td.bl-col-actions{
  text-align:center;
}

/* Reduce trailing space after Video title so Destination sits closer */
.bl-table-streams td.bl-col-title{padding-right:8px !important}


/* Sidebar icons */
.bl-nav__item{display:flex;align-items:center;gap:10px}
.bl-nav__icon{font-size:18px;line-height:1}


/* Overview tables: equal columns */
.bl-overview-3, .bl-overview-4{table-layout:fixed}
.bl-overview-3 th, .bl-overview-3 td{width:33.33%}
.bl-overview-4 th, .bl-overview-4 td{width:25%}


/* Streams table spacing tweaks (Destination/Status/Actions) */
.bl-table-streams th.bl-col-dest,
.bl-table-streams td.bl-col-dest{
  text-align:left;              /* move Destination a bit left */
  padding-left:10px !important; /* slightly tighter left padding */
  padding-right:24px !important;/* create visible gap before Status */
}

.bl-table-streams th.bl-col-status,
.bl-table-streams td.bl-col-status{
  padding-left:24px !important; /* extra space after Destination */
}

/* Actions column: keep centered, give a bit more room and push to the right */
.bl-table-streams th.bl-col-actions,
.bl-table-streams td.bl-col-actions{
  text-align:center;
}
.bl-table-streams .bl-col-actions{width:230px}

/* Center action buttons nicely */
.bl-table-streams td.bl-col-actions{
  display:flex;
  justify-content:center;
  gap:10px;
}


/* Starting spinner for pending badge */
.bl-badge-pending{position:relative;padding-left:28px}
.bl-badge-pending::before{
  content:'';
  position:absolute;
  left:10px;
  top:50%;
  width:10px;
  height:10px;
  margin-top:-5px;
  border:2px solid rgba(0,0,0,.15);
  border-top-color: rgba(0,0,0,.45);
  border-radius:50%;
  animation: blspin 0.8s linear infinite;
}
@keyframes blspin{to{transform:rotate(360deg)}}


/* Slot column */
.bl-table-streams .bl-col-slot{width:90px}
.bl-table-streams th.bl-col-slot,
.bl-table-streams td.bl-col-slot{white-space:nowrap;text-align:left}


/* Keep status badge text on one line */
.bl-badge{white-space:nowrap}


/* Toast notifications */
.bl-toast-area{margin:0 0 14px 0;}
.bl-toast-wrap{position:relative;top:auto;left:auto;transform:none;z-index:20;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:520px;margin:0 auto;}
.bl-toast{opacity:0;transform:translateY(-8px);transition:opacity .2s ease, transform .2s ease;padding:12px 14px;border-radius:12px;border:1px solid #ddd;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.12);font-size:14px;line-height:1.35;}
.bl-toast.is-in{opacity:1;transform:translateY(0);}
.bl-toast-info{border-color:#b3e5fc;background:#e9f7ff;}
.bl-toast-success{border-color:#c8e6c9;background:#e8f5e9;}
.bl-toast-error{border-color:#ffcdd2;background:#ffebee;}


/* Inline notice shown in topbar after Expires */
.bl-notice-inline{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:4px 10px;border-radius:999px;border:1px solid rgba(17,24,39,.10);font-size:13px;line-height:1.4}
.bl-notice-inline.success{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.08)}
.bl-notice-inline.error{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08)}
.bl-notice-inline [data-role="toast"]{font-weight:600}

/* Mobile: off-canvas sidebar + tighter spacing */
.bl-nav-toggle{
  /* Hide by default (desktop). Use !important to beat theme button rules. */
  display:none !important;
  min-width:44px;
  min-height:44px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(17,24,39,.12);
  background:#fff;
  box-shadow:0 8px 18px rgba(17,24,39,.06);
  cursor:pointer;
}
.bl-nav-toggle .dashicons{font-size:22px;line-height:1}

.bl-backdrop{
  display:none;
}

@media (max-width: 768px){
  .bl-app-bleed{padding:0 12px;}

  /* Topbar stacks, show menu button */
  .bl-topbar{align-items:stretch;}
  .bl-nav-toggle{display:inline-flex !important;align-items:center;justify-content:center;}
  .bl-topbar{flex-direction:row;}

  /* Off-canvas sidebar */
  .bl-app{position:relative;}
  .bl-sidebar-wrap{
    position:fixed;
    top:0;left:0;bottom:0;
    width:min(86vw, 340px);
    max-width:340px;
    padding:10px;
    z-index:9999;
    transform:translateX(-110%);
    transition:transform .18s ease;
  }
  .bl-sidebar{height:100%;overflow:auto;}

  .bl-backdrop{
    display:block;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:rgba(17,24,39,.45);
    backdrop-filter:blur(2px);
    z-index:9998;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
  }

  .bl-app.bl-sidebar-open .bl-sidebar-wrap{transform:translateX(0);}
  .bl-app.bl-sidebar-open .bl-backdrop{opacity:1;pointer-events:auto;}

  /* Main layout becomes single column naturally */
  .bl-app{flex-direction:column;}
  .bl-sidebar-wrap{min-width:unset;flex:0 0 auto;}
}

/* Extra safety: ensure desktop never shows the mobile toggle */
@media (min-width: 769px){
  .bl-nav-toggle{display:none !important;}
}

@media (max-width: 520px){
  .bl-app-bleed{padding:0 8px;}
  .bl-app{padding:10px;}
  .bl-topbar{flex-direction:column;gap:10px;}
  .bl-actions{width:100%;}
  .bl-actions .button{width:100%;justify-content:center;}
  .bl-form-actions{flex-direction:column;}
  .bl-form-actions .button,.bl-form-actions button{width:100%;min-width:unset;}
}

@media (min-width: 769px){
  /* Keep Destination table text from breaking on larger screens; allow horizontal scroll in wrapper */
  .bl-table-destinations th,.bl-table-destinations td{white-space:nowrap;word-break:normal;}
}



/* Destinations table readability */
.bl-table-destinations{min-width:720px;}
.bl-table-destinations th, .bl-table-destinations td{white-space:nowrap; word-break:normal;}
.bl-table-destinations th.bl-col-key, .bl-table-destinations td.bl-col-key{white-space:normal; word-break:break-all; max-width:260px;}
@media (max-width: 768px){
  .bl-table-destinations{min-width:760px;}
  .bl-table-destinations th.bl-col-key, .bl-table-destinations td.bl-col-key{max-width:220px;}
}