/* Ninja Social Funnels — modern SaaS redesign v2 (MAR-1638).
   Pure Bootstrap-4 override: no markup/action-name changes, nothing moves.
   Goals: (1) genuinely modern product look — dark gradient app bar, elevated
   rounded cards on a tinted canvas, tactile violet controls; (2) fully
   responsive — zero page-level horizontal scroll, tables scroll inside their
   own box, grid stacks on mobile. Loaded AFTER the Bootstrap CDN. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');

:root{
  --ink:#0f1222; --ink-2:#1b1f36; --muted:#6b7280; --line:#e7e9f2;
  --canvas:#eef1f8; --surface:#ffffff;
  --violet:#6d28d9; --violet-2:#8b5cf6; --violet-050:#f3effe; --violet-100:#e9e2fd;
  --cyan:#06b6d4; --green:#16a34a; --red:#e11d48; --amber:#d97706;
  --r:16px; --r-sm:11px; --r-xs:8px;
  --sh-1:0 1px 2px rgba(16,18,40,.05);
  --sh-2:0 6px 22px rgba(16,18,40,.08),0 1px 3px rgba(16,18,40,.05);
  --sh-nav:0 6px 24px rgba(76,29,149,.28);
}

/* ---- responsive backstop ---- */
html,body{max-width:100%;}
*{box-sizing:border-box;}
img,video,svg,iframe{max-width:100%;height:auto;}

body{
  background:radial-gradient(1200px 500px at 100% -10%,var(--violet-050),transparent 60%),var(--canvas);
  color:var(--ink); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; min-height:100vh;
}
h1,h2,h3,h4,h5{font-family:'Sora','Inter',sans-serif;font-weight:700;letter-spacing:-.02em;color:var(--ink);}
h1,h1.mt-2{font-size:clamp(1.35rem,2.4vw,1.9rem);margin:.2rem 0 1.1rem;}
a{color:var(--violet);text-decoration:none;} a:hover{color:var(--violet-2);}

/* use the full window width (Martin's ask) with comfortable side padding */
.container{max-width:100%;padding-left:28px;padding-right:28px;}
.container > .row:first-child{margin-top:.5rem;}

/* ---- signature: dark gradient app bar ---- */
.navbar{
  background:linear-gradient(100deg,#1a1440 0%,#2a1670 55%,#4c1d95 100%)!important;
  box-shadow:var(--sh-nav); border:0; padding:.7rem 1.15rem; border-radius:0 0 18px 18px;
  margin-bottom:1.25rem;
}
.navbar-brand{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.02em;color:#fff!important;font-size:1.15rem;}
.navbar-brand::before{content:"◆ ";color:var(--cyan);font-size:.8em;vertical-align:1px;}
.navbar .navbar-nav .nav-link{color:rgba(255,255,255,.82)!important;font-weight:550;border-radius:9px;padding:.42rem .85rem!important;margin:0 1px;transition:background .15s,color .15s;}
.navbar .navbar-nav .nav-link:hover,.navbar .navbar-nav .nav-link.active{color:#fff!important;background:rgba(255,255,255,.14);}
.navbar-dark .navbar-toggler,.navbar .navbar-toggler{border-color:rgba(255,255,255,.35);}
.navbar .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-width='2.2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
.navbar .dropdown-menu{border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-2);padding:.4rem;}
.navbar .dropdown-item{border-radius:8px;padding:.5rem .7rem;font-weight:500;}
.navbar .dropdown-item:hover{background:var(--violet-050);color:var(--violet);}

/* ---- cards / panels ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2);}
.card-header{background:transparent;border-bottom:1px solid var(--line);font-weight:700;font-family:'Sora',sans-serif;padding:1rem 1.15rem;}
.card-body{padding:1.15rem;}
/* wrap bare content blocks so the page has structure even without .card */
.container > .row > .col, .container > .row > [class*="col-"]{}

/* ---- buttons: tactile, filled, real weight ---- */
.btn{border-radius:var(--r-sm);font-weight:650;padding:.55rem 1.1rem;border:1px solid transparent;transition:transform .05s,box-shadow .18s,filter .18s,background .18s;}
.btn:active{transform:translateY(1px);}
.btn-primary,.btn-info{background:linear-gradient(180deg,var(--violet-2),var(--violet));border-color:var(--violet);color:#fff;box-shadow:0 3px 12px rgba(109,40,217,.32);}
.btn-primary:hover,.btn-info:hover{filter:brightness(1.06);color:#fff;box-shadow:0 6px 18px rgba(109,40,217,.4);}
.btn-success{background:linear-gradient(180deg,#22c55e,var(--green));border-color:var(--green);color:#fff;box-shadow:0 3px 12px rgba(22,163,74,.28);}
.btn-danger{background:linear-gradient(180deg,#f43f5e,var(--red));border-color:var(--red);color:#fff;box-shadow:0 3px 12px rgba(225,29,72,.26);}
.btn-secondary,.btn-light,.btn-default{background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:var(--sh-1);}
.btn-secondary:hover,.btn-light:hover{background:var(--violet-050);color:var(--violet);border-color:var(--violet-100);}
.btn-outline-primary{color:var(--violet);border:1.5px solid var(--violet-100);}
.btn-outline-primary:hover{background:var(--violet);border-color:var(--violet);color:#fff;}
.btn-sm{padding:.32rem .72rem;font-size:.82rem;border-radius:9px;}
.btn-group>.btn{box-shadow:none;}

/* ---- forms ---- */
label{font-weight:600;color:var(--ink);margin-bottom:.35rem;}
.form-control,.custom-select,textarea,select,input[type=text],input[type=email],input[type=number],input[type=password],input[type=url]{
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.6rem .85rem;background:#fff;color:var(--ink);
  box-shadow:var(--sh-1);transition:border-color .15s,box-shadow .15s;height:auto;
}
.form-control:focus,textarea:focus,select:focus,input:focus{border-color:var(--violet-2);box-shadow:0 0 0 4px var(--violet-100);outline:0;}
.form-control::placeholder{color:#9aa1b2;}
.form-text,small,.text-muted{color:var(--muted)!important;}
.custom-file-label{border:1.5px solid var(--line);border-radius:var(--r-sm);}
.custom-file-label::after{background:var(--violet);color:#fff;border-radius:0 9px 9px 0;}

/* ---- tables: modern + ALWAYS FIT the screen ----
   table-layout:fixed forces the table to exactly its container width and shares
   it across columns; long cell content (the message column, URLs) wraps inside
   its cell instead of blowing the table wider than the viewport. So nothing is
   ever cut off and the page never scrolls sideways — no clipping, no overflow. */
.table{width:100%;table-layout:auto;background:var(--surface);border-radius:var(--r);box-shadow:var(--sh-2);margin-bottom:1.25rem;border-collapse:separate;border-spacing:0;}
/* actions menu — native <details>, zero JS dependency (the page loads no JS) */
.actions-cell{white-space:nowrap;width:1%;}
.actions-menu{position:relative;display:inline-block;}
.actions-menu > summary{list-style:none;cursor:pointer;user-select:none;}
.actions-menu > summary::-webkit-details-marker{display:none;}
.actions-menu > summary::marker{content:"";}
.actions-list{position:absolute;right:0;top:calc(100% + 6px);z-index:60;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-2);padding:.35rem;min-width:172px;text-align:left;}
.actions-list form{margin:0;}
.actions-list button{display:block;width:100%;text-align:left;border:0;background:none;border-radius:8px;padding:.55rem .75rem;font-weight:600;font-size:.88rem;cursor:pointer;color:var(--ink);}
.actions-list button:hover{background:var(--violet-050);color:var(--violet);}
.actions-list button.danger{color:var(--red);}
.actions-list button.danger:hover{background:#fdeaef;color:var(--red);}
.actions-divider{height:1px;background:var(--line);margin:.3rem 0;}
.table thead th{background:#f7f8fd;border:0;border-bottom:1px solid var(--line);color:var(--muted);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;padding:.8rem .85rem;white-space:nowrap;}
.table td{border:0;border-top:1px solid var(--line);padding:.8rem .85rem;vertical-align:top;font-size:.9rem;}
.table tbody tr{transition:background .12s;}
.table tbody tr:hover{background:var(--violet-050);}
.table-striped tbody tr:nth-of-type(odd){background:#fbfcff;}
.table-striped tbody tr:nth-of-type(odd):hover{background:var(--violet-050);}
/* The message column (2nd) carries the long post text — cap + wrap it so the whole
   table fits without pushing the action buttons off-screen. Other columns size to
   their content, so short labels (DELETE, Edit) never stack vertically. Long URLs
   still break rather than force overflow. */
.table td:nth-child(2){max-width:200px;overflow-wrap:break-word;white-space:normal;}
.table td{overflow-wrap:break-word;}
/* Wrap for wide tables: the scroll lives INSIDE this box, so the page itself never
   scrolls sideways. On wide screens the table fits and no scrollbar shows. */
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);box-shadow:var(--sh-2);margin-bottom:1.25rem;}
.table-responsive > .table{margin-bottom:0;box-shadow:none;}
@media (max-width:640px){ .table td,.table th{padding:.6rem .5rem;font-size:.82rem;} }

/* ---- badges / status pills ---- */
.badge{border-radius:999px;padding:.4em .75em;font-weight:650;font-size:.72rem;}
.badge-success,.bg-success{background:#e7f7ee!important;color:var(--green)!important;}
.badge-danger,.bg-danger{background:#fdeaef!important;color:var(--red)!important;}
.badge-secondary,.bg-secondary{background:#eef0f6!important;color:var(--muted)!important;}
.badge-primary,.bg-primary{background:var(--violet-100)!important;color:var(--violet)!important;}
.text-success{color:var(--green)!important;} .text-danger{color:var(--red)!important;}

/* ---- alerts / modals ---- */
.alert{border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-1);padding:.85rem 1rem;font-weight:500;}
.alert-success{background:#e7f7ee;border-color:#bfe9cf;color:#14682f;}
.alert-danger{background:#fdeaef;border-color:#f6c3d1;color:#9b1c37;}
.alert-info{background:var(--violet-050);border-color:var(--violet-100);color:var(--violet);}
.modal-content{border:0;border-radius:var(--r);box-shadow:0 24px 70px rgba(16,18,40,.28);}
.modal-header{border-color:var(--line);padding:1.1rem 1.25rem;} .modal-header .modal-title{font-family:'Sora';font-weight:700;}
.modal-body{padding:1.25rem;} .modal-footer{border-color:var(--line);}
.close{text-shadow:none;opacity:.5;} .close:hover{opacity:1;}

/* ---- media library cards ---- */
.media-card,.media-item{border:1px solid var(--line)!important;border-radius:var(--r)!important;box-shadow:var(--sh-1);overflow:hidden;padding:.6rem;background:#fff;transition:box-shadow .18s,transform .1s;}
.media-card:hover,.media-item:hover{box-shadow:var(--sh-2);transform:translateY(-2px);}
img.img-fluid,.media-card video,.media-item video{border-radius:var(--r-sm);}

/* ---- login (public) ---- */
.card.login,.login-card{max-width:420px;margin:9vh auto;}

/* ---- responsive grid: stack on small screens (kills sideways scroll) ---- */
@media (max-width:768px){
  .col-8,.col-lg-2,.col-sm,.col-md-8,[class*="col-"]{flex:0 0 100%;max-width:100%;}
  .navbar{border-radius:0 0 14px 14px;margin-bottom:1rem;}
  .btn-group{flex-wrap:wrap;} .btn-group>.btn{margin:2px;border-radius:9px!important;}
  .card-body,.modal-body{padding:1rem;}
}

/* misc polish */
hr{border-color:var(--line);}
::selection{background:var(--violet-100);color:var(--violet);}
.pagination .page-link{border-radius:9px!important;margin:0 2px;border:1px solid var(--line);color:var(--violet);}
.pagination .page-item.active .page-link{background:var(--violet);border-color:var(--violet);}