/* =====================
       Monochrome Premium A2
       Medium Sidebar (220px)
       ===================== */
    :root{
  /* inherit colors from marketing.css */
  --bg: var(--bg);
  --card: #ffffff;
  --muted: var(--muted);
  --text: var(--text);
  --border: var(--border);

  --radius: 14px;
  --shadow: 0 10px 30px rgba(11,14,20,0.06);
  --glass: rgba(255,255,255,0.75);

  /* brand colors */
  --brand: var(--primary);
  --brand-hover: var(--primary-hover);
}


    html,body{height:100%;margin:0;background:var(--bg);font-family:'Quicksand',Inter,system-ui,Arial;color:var(--text);-webkit-font-smoothing:antialiased;}
    .app{display:flex;height:100vh;overflow:hidden;}
    /* Sidebar */
    .sidebar{
      width:220px;padding:28px 20px;background:#fff;border-right:1px solid var(--border);box-sizing:border-box;display:flex;flex-direction:column;
    }
    .brand{font-weight:700;font-size:18px;letter-spacing:1px;margin-bottom:8px}
    .sidebar .muted{color:var(--muted);font-size:13px;margin-bottom:12px}
    .nav{display:flex;flex-direction:column;gap:10px;margin-top:6px}
    .nav button{
      display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;border:0;background:transparent;color:var(--muted);cursor:pointer;font-weight:600;font-size:14px;
    }
    .nav button .icon{width:18px;opacity:0.9}
    .nav button.active{background:rgba(0,0,0,0.04);color:var(--text)}
    .sidebar-bottom{margin-top:auto;font-size:12px;color:var(--muted)}

    /* Main area */
    .main{flex:1;padding:32px;overflow:auto;box-sizing:border-box}
    header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
    .page-title{font-size:22px;font-weight:700;margin:0}
    .subtitle{color:var(--muted);font-size:13px;margin-top:4px}

    /* Layout */
    .grid{display:grid;gap:18px}
    .grid.cols-2{grid-template-columns:1fr 420px}
    .card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);border:1px solid var(--border);box-sizing:border-box}

    /* KPI */
    .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:14px}
    .kpi-card{padding:18px;border-radius:12px;background:linear-gradient(180deg,#fff,#fbfbfb);display:flex;flex-direction:column;gap:6px}
    .kpi-label{font-size:13px;color:var(--muted)}
    .kpi-value{font-size:28px;font-weight:700}

    /* Analytics area */
    .analytics{display:grid;grid-template-columns:2fr 1fr;gap:18px}
    .analytics .card{padding:16px}
    canvas{width:100% !important;height:220px !important}

    /* Tables */
    table{width:100%;border-collapse:collapse}
    thead th{font-size:13px;color:var(--muted);text-align:left;padding:10px 12px}
    tbody td{padding:12px;border-top:1px solid var(--border)}
    tbody tr td:first-child{font-weight:600}
    .muted{color:var(--muted)}

    /* Forms & buttons */
    input[type="text"], input[type="date"], select{padding:10px;border-radius:10px;border:1px solid var(--border);background:#fff}
    .btn{background:#111;color:#fff;padding:8px 12px;border-radius:10px;border:0;font-weight:700;cursor:pointer}
    .btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text);font-weight:600}
    .btn.small{padding:6px 8px;border-radius:8px;font-size:13px}

    /* Modal */
    .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.35);z-index:80}
    .modal .box{background:var(--card);padding:18px;border-radius:12px;max-width:640px;width:94%;box-shadow:var(--shadow)}

    /* Responsive */
    @media (max-width:1000px){
      .sidebar{display:none}
      .analytics{grid-template-columns:1fr}
      .kpi-grid{grid-template-columns:repeat(2,1fr)}
      .grid.cols-2{grid-template-columns:1fr}
    }

    .input-label {
      font-size:14px;
      font-weight:600;
      margin-bottom:4px;
    }

    .input-text {
      width:100%;
      padding:10px 12px;
      border-radius:10px;
      border:1px solid #ddd;
      font-size:15px;
      background:#fff;
    }

    .audience-selector {
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:6px;
    }

    .audience-selector div {
      padding:8px 14px;
      border:1px solid #ddd;
      border-radius:20px;
      font-size:13px;
      cursor:pointer;
      transition:0.15s;
      background:#fafafa;
    }

    .audience-selector div.active {
      background:#000;
      color:#fff;
      border-color:#000;
    }

    #create-ad-wrapper {
      width: 100%;
      display: block;
    }

    .ads-count-card {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 30px;
      text-align: center;
    }

    .ads-count-card h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
    }

    .ads-count-number {
      margin-top: 10px;
      font-size: 48px;
      font-weight: 800;
      color: #000;
    }
    .media-badge {
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 6px;
  color: #666;
  background: #fafafa;
  white-space: nowrap;
}
.badge.warning {
  background: #ffe9cc;
  color: #a85d00;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11px;
  margin-left: 6px;
}

/* =========================
   Subscription page styles
   ========================= */
.sub-card { padding: 16px; }

.sub-card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.sub-badge{
  font-size:12px;
  font-weight:800;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
}

.sub-plan-name{
  font-size:26px;
  font-weight:900;
  margin:6px 0 10px 0;
}

.sub-block{ margin-top:8px; }

.sub-label{ font-size:13px; }

.sub-usage{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-top:6px;
}

.sub-usage-big{ font-size:40px; font-weight:900; line-height:1; }
.sub-usage-mid{ font-size:18px; font-weight:900; line-height:1; }

.sub-bar-wrap{
  height:10px;
  background:#eee;
  border-radius:999px;
  overflow:hidden;
  margin-top:10px;
}

.sub-bar{
  height:100%;
  background:#000;
  width:0%;
  transition: width 0.25s ease;
}

.sub-bar.warn{ background:#000; opacity:0.75; }
.sub-bar.danger{ background:#000; opacity:0.55; }

.sub-hint{ margin-top:10px; font-size:13px; }

.sub-divider{
  margin:16px 0;
  border-top:1px solid var(--border);
}

.sub-features{ margin-top:6px; }

.sub-list{
  margin:10px 0 0 18px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sub-list-checks li{
  list-style:none;
  position:relative;
  padding-left:18px;
}
.sub-list-checks li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  font-weight:900;
}

.sub-footer{
  margin-top:14px;
  display:flex;
  gap:8px;
  align-items:center;
  font-size:13px;
}

.sub-upgrade-lede{ font-size:13px; margin-bottom:12px; }

.sub-price{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background:#fff;
  margin-bottom:12px;
}

.sub-price-name{ font-weight:900; font-size:16px; margin-bottom:6px; }
.sub-price-value{ display:flex; gap:10px; align-items:baseline; }
.sub-price-money{ font-size:26px; font-weight:900; }

.sub-cost-preview{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background:#fff;
  margin-top:14px;
}

.sub-cost-value{ font-size:18px; font-weight:900; margin-top:6px; }

.sub-actions{
  display:flex;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,.08);
}
.badge-dot { width: 8px; height: 8px; border-radius: 50%; }

.badge-online { background: rgba(16, 185, 129, .12); color: #065f46; }
.badge-online .badge-dot { background: #10b981; }

.badge-offline { background: rgba(107, 114, 128, .12); color: #374151; }
.badge-offline .badge-dot { background: #6b7280; }

.small-muted { font-size: 12px; opacity: .7; }

.row-actions,
.assign-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 👈 KEY FIX */
  gap: 8px;
}


.assign-wrap {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

select.compact {
  height: 34px;
  padding: 6px 10px;
  border-radius: 10px;
}

button.compact {
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 13px;
}

.status.online {
  color: #16a34a; /* green */
}

.status.offline {
  color: #dc2626; /* red */
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 13px;
  color: #111; /* text color */
}

.dot {
  font-size: 14px;
  line-height: 1;
}

.dot.online {
  color: #16a34a; /* green dot */
}

.dot.offline {
  color: #dc2626; /* red dot */
}
/* Force left alignment for action columns */
td.actions,
td.assign {
  text-align: left;
  padding-left: 12px;
}

td.assign,
th.assign {
  text-align: left !important;
  padding-left: 12px;
}
th.assign, td.assign-cell {
  text-align: left !important;
}

td.assign-cell{
  padding-left: 12px;   /* same feel as other columns */
  vertical-align: middle;
}

td.assign-cell .assign-wrap{
  display: inline-flex;        /* key: don't stretch across cell */
  align-items: center;
  gap: 8px;
}

td.assign-cell select{
  min-width: 140px;            /* keep it stable */
}


    /* Playlists specific */
    .playlists-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
    .playlists-list { display:grid; gap:8px; }
    .playlist-row { display:flex; justify-content:space-between; align-items:center; padding:10px; border-radius:10px; border:1px solid var(--border); background:#fff; }
    .playlist-name { font-weight:700; }
    .editor { display:flex; gap:14px; margin-top:12px; }
    .editor .box { padding:14px; border-radius:12px; border:1px solid var(--border); background:var(--card); box-shadow:var(--shadow); }
    .ads-pool { width: 40%; max-height:520px; overflow:auto; }
    .playlist-items { width: 60%; max-height:520px; overflow:auto; display:flex; flex-direction:column; gap:8px; }
    .ad-tile { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px; border-radius:8px; background:#fafafa; border:1px solid #eee; cursor:grab; }
    .ad-tile.dragging { opacity:0.5; }
    .drop-target { min-height: 60px; border:2px dashed transparent; border-radius:8px; padding:6px; }
    .drop-target.over { border-color: rgba(0,0,0,0.08); background: rgba(0,0,0,0.02); }
    .small-muted { font-size:12px; color:var(--muted); }

    /* ===== FORCE brand buttons (override any old black .btn rules) ===== */
.btn.btn-solid{
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.btn.btn-solid:hover{
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

.btn.btn-outline{
  background: #fff !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.btn.btn-outline:hover{
  border-color: var(--primary-hover) !important;
  color: var(--primary-hover) !important;
}

.btn.ghost{
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* =========================
   Polished Login UI
   ========================= */
.login-wrap{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 36px 16px;
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(123,44,255,.12), transparent 60%),
    var(--bg);
}

.login-card{
  width: 560px; 
  height: 720px;         /* was 420 */
  max-width: 94vw;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
  padding: 30px; 
}

.login-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 14px;
}

.login-logo{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 22px;
  color:#fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  box-shadow: 0 10px 24px rgba(123,44,255,.25);
}

.login-title{
  font-weight: 900;
  font-size: 18px;
  line-height: 1.1;
}

.login-sub{
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.login-fields{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 10px;
}

.login-input{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  outline: none;
}

.login-input:focus{
  border-color: rgba(123,44,255,.45);
  box-shadow: 0 0 0 4px rgba(123,44,255,.12);
}

.login-actions{
  display:flex;
  gap: 10px;
  margin-top: 12px;
}

.login-actions .btn{
  flex: 1;
}

.login-divider{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 14px 0 12px;
}

.login-divider span{
  flex:1;
  height: 1px;
  background: var(--border);
}

.login-divider em{
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}

.login-google{
  width: 100%;
  justify-content:center;
  gap: 10px;
  padding: 12px 14px;
}

.gmark{
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: var(--primary);
  background: rgba(123,44,255,.10);
  border: 1px solid rgba(123,44,255,.18);
}

.login-error{
  margin-top: 10px;
  color: #b00020;
  font-weight: 800;
  font-size: 13px;
  min-height: 18px; /* prevents layout jump */
}

.login-foot{
  margin-top: 12px;
  font-size: 12px;
  text-align:center;
  opacity: .8;
}

.gbtn{
  width:100%;
  height:44px;
  border-radius:999px;
  border:1px solid #dadce0;
  background:#fff;
  color:#3c4043;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition: background .15s ease, box-shadow .15s ease, transform .06s ease;
}
.gbtn:hover{ background:#f8f9fa; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.gbtn:active{ transform:translateY(1px); }

.gicon{
  width:18px;height:18px;background-size:18px 18px;background-repeat:no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.611 20.083H42V20H24v8h11.303C33.747 32.659 29.283 36 24 36c-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.272 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z'/%3E%3Cpath fill='%23FF3D00' d='M6.306 14.691l6.571 4.819C14.655 16.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.272 4 24 4 16.318 4 9.656 8.337 6.306 14.691z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.182 0 9.86-1.977 13.409-5.192l-6.191-5.238C29.192 35.091 26.715 36 24 36c-5.261 0-9.708-3.317-11.297-7.946l-6.523 5.025C9.503 39.556 16.227 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.611 20.083H42V20H24v8h11.303c-.723 1.94-2.127 3.588-3.985 4.762h.003l6.191 5.238C36.971 39.105 44 34 44 24c0-1.341-.138-2.65-.389-3.917z'/%3E%3C/svg%3E");
}

/* Login card actions */
.login-actions{
  margin-top: 16px;
}

/* Primary login button */
.btn.primary{
  width:100%;
  height:44px;
  border-radius:999px;
  background: var(--brand);
  color:#fff;
  font-weight:700;
  font-size:14px;
  border:0;
  cursor:pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .06s ease;
}

.btn.primary:hover{
  background: color-mix(in srgb, var(--brand) 92%, #000);
}

.btn.primary:active{
  transform: translateY(1px);
}

/* Divider */
.divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0;
  color:#9ca3af;
  font-size:13px;
}
.divider::before,
.divider::after{
  content:"";
  flex:1;
  height:1px;
  background:#e5e7eb;
}

/* Google button already matches size */
.gbtn{
  width:100%;
  height:44px;
}
.login-row{ display:flex; justify-content:flex-end; margin-top:6px; }
.login-link{ font-size:13px; color:var(--primary); text-decoration:none; font-weight:700; }
.login-link:hover{ text-decoration:underline; }
/* Sidebar brand */
.sidebar-brand{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:14px;
}

.sidebar-logo{
  height:48px;       /* keeps it premium, not oversized */
  width:auto;
  display:block;
}

.sidebar-welcome{
  font-size:13px;
}