/* ============================================================
   SociallyKeeda — Modern ADMIN design system (zero-Node, shadcn tokens)
   Replaces AdminLTE 2.4 / Bootstrap 3 for converted admin screens.
   Loaded only by admin/modern/_header.php, so unconverted legacy
   screens keep their old stack and stay working.
   ============================================================ */

@font-face{
  font-family:"Geist";
  src:url("../fonts/Geist.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --background:0 0% 100%;
  --foreground:240 10% 3.9%;
  --card:0 0% 100%;
  --muted:240 4.8% 95.9%;
  --muted-foreground:240 3.8% 46.1%;
  --primary:0.3 82.2% 46.3%;
  --primary-foreground:355 100% 97%;
  --secondary:240 4.8% 95.9%;
  --accent:240 4.8% 95.9%;
  --border:240 5.9% 90%;
  --input:240 5.9% 90%;
  --ring:0.3 82.2% 46.3%;
  --radius:0.6rem;
  --sidebar:240 6% 10%;
  --sidebar-foreground:0 0% 88%;
  --sidebar-muted:240 5% 55%;
  --success:142 71% 40%;
  --warning:38 92% 50%;
  --info:210 90% 52%;
  --font-sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --sidebar-w:250px;
}
.dark{
  --background:240 10% 3.9%;
  --foreground:0 0% 98%;
  --card:240 8% 6.5%;
  --muted:240 3.7% 13%;
  --muted-foreground:240 5% 64.9%;
  --secondary:240 3.7% 15.9%;
  --accent:240 3.7% 15.9%;
  --border:240 3.7% 16%;
  --input:240 3.7% 16%;
  --sidebar:240 8% 6%;
  --sidebar-foreground:0 0% 88%;
}

*{box-sizing:border-box}
body{margin:0;background:hsl(var(--muted));color:hsl(var(--foreground));
  font-family:var(--font-sans);font-size:14px;line-height:1.5;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.02em;line-height:1.2}
.icon{width:1.15rem;height:1.15rem;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.muted{color:hsl(var(--muted-foreground))}

/* ---------- shell ---------- */
.adm{display:flex;min-height:100vh}
.adm-side{width:var(--sidebar-w);flex:0 0 auto;background:hsl(var(--sidebar));
  color:hsl(var(--sidebar-foreground));display:flex;flex-direction:column;
  position:fixed;inset:0 auto 0 0;z-index:60;overflow-y:auto;scrollbar-width:thin}
.adm-main{flex:1;margin-left:var(--sidebar-w);min-width:0;display:flex;flex-direction:column}

.adm-brand{display:flex;align-items:center;gap:.6rem;padding:1rem 1.1rem;
  font-weight:700;font-size:1rem;letter-spacing:-.03em;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;background:hsl(var(--sidebar));z-index:2}
.adm-brand .mark{width:1.8rem;height:1.8rem;border-radius:.5rem;display:grid;place-items:center;
  background:hsl(var(--primary));color:#fff}

.adm-nav{padding:.6rem .6rem 2rem;display:flex;flex-direction:column;gap:.1rem}
.adm-nav .grp{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  color:hsl(var(--sidebar-muted));padding:.9rem .6rem .35rem}
.adm-nav a{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:var(--radius);
  font-size:.85rem;font-weight:500;color:hsl(var(--sidebar-foreground));transition:.12s}
.adm-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.adm-nav a.active{background:hsl(var(--primary));color:#fff}
.adm-nav a .icon{width:1.02rem;height:1.02rem}
.adm-nav a .cnt{margin-left:auto;font-size:.7rem;font-weight:600;padding:.05rem .38rem;border-radius:999px;
  background:rgba(255,255,255,.14)}
.adm-nav a.active .cnt{background:rgba(0,0,0,.22)}

/* ---------- topbar ---------- */
.adm-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:.75rem;
  height:3.5rem;padding:0 1.25rem;background:hsl(var(--background)/.85);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid hsl(var(--border))}
.adm-burger{display:none}
.adm-top h1{font-size:1.05rem;font-weight:650}
.adm-top .spacer{margin-left:auto}
.adm-user{display:flex;align-items:center;gap:.5rem;font-size:.85rem}
.adm-user img{width:1.9rem;height:1.9rem;border-radius:50%;object-fit:cover}

.adm-body{padding:1.25rem;flex:1}
.adm-wrap{max-width:1400px;margin:0 auto}

/* ---------- primitives ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;height:2.35rem;
  padding:0 .9rem;border-radius:var(--radius);font-size:.85rem;font-weight:550;font-family:inherit;
  border:1px solid transparent;cursor:pointer;transition:.15s;white-space:nowrap}
.btn-sm{height:2rem;padding:0 .7rem;font-size:.8rem}
.btn-primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.btn-primary:hover{background:hsl(var(--primary)/.9)}
.btn-outline{background:hsl(var(--card));border-color:hsl(var(--border));color:hsl(var(--foreground))}
.btn-outline:hover{background:hsl(var(--accent))}
.btn-ghost{background:transparent;color:hsl(var(--foreground))}
.btn-ghost:hover{background:hsl(var(--accent))}
.btn-icon{width:2.35rem;padding:0}

.card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.1rem;border-bottom:1px solid hsl(var(--border))}
.card-h h3{font-size:.92rem}
.card-b{padding:1.1rem}
.badge{display:inline-flex;align-items:center;gap:.3rem;border-radius:999px;padding:.2rem .55rem;
  font-size:.72rem;font-weight:600;line-height:1;background:hsl(var(--secondary));color:hsl(var(--foreground))}
.badge-success{background:hsl(var(--success)/.12);color:hsl(var(--success))}
.badge-warning{background:hsl(var(--warning)/.15);color:hsl(38 92% 38%)}
.badge-info{background:hsl(var(--info)/.12);color:hsl(var(--info))}
.badge-primary{background:hsl(var(--primary)/.12);color:hsl(var(--primary))}
.input,select.input,textarea.input{height:2.35rem;width:100%;border-radius:var(--radius);
  border:1px solid hsl(var(--input));background:hsl(var(--background));padding:0 .75rem;
  font-size:.85rem;font-family:inherit;color:inherit}
textarea.input{height:auto;padding:.6rem .75rem}
.input:focus{outline:2px solid hsl(var(--ring)/.45);outline-offset:1px}

/* ---------- stat tiles ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.25rem}
.stat{padding:1.05rem 1.1rem;border-radius:var(--radius);border:1px solid hsl(var(--border));
  background:hsl(var(--card));display:flex;align-items:flex-start;gap:.85rem}
.stat .si{width:2.4rem;height:2.4rem;border-radius:var(--radius);display:grid;place-items:center;flex:0 0 auto}
.stat .si.p{background:hsl(var(--primary)/.12);color:hsl(var(--primary))}
.stat .si.s{background:hsl(var(--success)/.12);color:hsl(var(--success))}
.stat .si.w{background:hsl(var(--warning)/.15);color:hsl(38 92% 40%)}
.stat .si.i{background:hsl(var(--info)/.12);color:hsl(var(--info))}
.stat b{display:block;font-size:1.5rem;font-weight:680;letter-spacing:-.03em;line-height:1.1}
.stat span{font-size:.78rem;color:hsl(var(--muted-foreground))}

/* ---------- grid + table ---------- */
.cols{display:grid;grid-template-columns:1.6fr 1fr;gap:1rem;align-items:start}
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:.85rem}
table.tbl th{text-align:left;font-weight:600;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.05em;color:hsl(var(--muted-foreground));padding:.6rem 1.1rem;
  border-bottom:1px solid hsl(var(--border));white-space:nowrap}
table.tbl td{padding:.7rem 1.1rem;border-bottom:1px solid hsl(var(--border));vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:hsl(var(--accent)/.5)}
.t-title{font-weight:550;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.t-sub{font-size:.75rem;color:hsl(var(--muted-foreground))}
.t-thumb{width:2.6rem;height:2rem;border-radius:.35rem;object-fit:cover;background:hsl(var(--muted))}
.t-avatar{width:1.9rem;height:1.9rem;border-radius:50%;object-fit:cover}
.row-flex{display:flex;align-items:center;gap:.6rem;min-width:0}

.empty-sm{padding:2rem 1rem;text-align:center;color:hsl(var(--muted-foreground));font-size:.85rem}

/* ---------- type breakdown bars ---------- */
.bars{display:flex;flex-direction:column;gap:.7rem}
.bar-row{display:flex;flex-direction:column;gap:.3rem}
.bar-top{display:flex;justify-content:space-between;font-size:.8rem}
.bar-top b{font-weight:600}
.bar{height:6px;border-radius:3px;background:hsl(var(--muted));overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:hsl(var(--primary))}

/* ---------- responsive ---------- */
@media(max-width:1100px){.stats{grid-template-columns:repeat(2,1fr)}.cols{grid-template-columns:1fr}}
@media(max-width:860px){
  :root{--sidebar-w:0px}
  .adm-side{transform:translateX(-260px);width:250px;transition:transform .2s ease}
  .adm-side.open{transform:none}
  .adm-main{margin-left:0}
  .adm-burger{display:inline-flex}
}
@media(max-width:560px){.stats{grid-template-columns:1fr}}

/* ---------- filters + table actions + pager ---------- */
.adm-filters{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.adm-filters .input{width:auto;min-width:150px}
.f-search{position:relative;display:flex;align-items:center;min-width:240px;flex:1;max-width:340px}
.f-search svg{position:absolute;left:.65rem;width:.95rem;height:.95rem;color:hsl(var(--muted-foreground));pointer-events:none}
.f-search .input{width:100%;padding-left:2.05rem}
.t-actions{display:flex;gap:.35rem;justify-content:flex-end}
.adm-pager{display:flex;justify-content:center}
.adm-pager ul{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;margin:0;padding:0}
.adm-pager a,.adm-pager span,.adm-pager li > *{display:inline-flex;align-items:center;justify-content:center;
  min-width:2.1rem;height:2.1rem;padding:0 .6rem;border-radius:var(--radius);border:1px solid hsl(var(--border));
  background:hsl(var(--card));font-size:.8rem;font-weight:550;color:hsl(var(--foreground))}
.adm-pager a:hover{background:hsl(var(--accent))}
.adm-pager .active > *,.adm-pager li.active a,.adm-pager [aria-current="page"]{
  background:hsl(var(--primary));border-color:hsl(var(--primary));color:#fff}
.adm-pager .disabled > *{opacity:.45;pointer-events:none}
@media(max-width:700px){.adm-filters .input,.f-search{width:100%;max-width:none}.adm-filters .btn{flex:1}}
.swatch{width:.85rem;height:.85rem;border-radius:3px;flex:0 0 auto;border:1px solid hsl(var(--border))}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:1rem;align-items:start}
@media(max-width:1000px){.form-grid{grid-template-columns:1fr}}
/* Minimalist form layout: opt in by adding `stacked` to a .form-grid. Cards run
   full width in a single column, and the fields inside each card body flow into
   a responsive two-column grid instead of one-per-row. Wide controls (textareas,
   inline .field-row groups, media pickers) and anything tagged .span-2 take the
   full width so long inputs stay readable. Collapses to one column on phones. */
.form-grid.stacked{grid-template-columns:1fr}
.form-grid.stacked .card-b{display:grid;grid-template-columns:1fr 1fr;gap:0 1.25rem;align-items:start}
.form-grid.stacked .card-b > .field{margin-bottom:1rem}
.form-grid.stacked .card-b > .field:has(textarea),
.form-grid.stacked .card-b > .field:has(.field-row),
.form-grid.stacked .card-b > .field:has(.media-field),
.form-grid.stacked .card-b > .field.span-2,
.form-grid.stacked .card-b > .form-actions{grid-column:1 / -1}
@media(max-width:720px){.form-grid.stacked .card-b{grid-template-columns:1fr}}
.field{margin-bottom:1rem}
.field:last-child{margin-bottom:0}
.field > label{display:block;font-size:.8rem;font-weight:600;margin-bottom:.35rem}
.field .hint{display:block;font-size:.75rem;color:hsl(var(--muted-foreground));margin-top:.3rem}
.field-row{display:flex;gap:.5rem;align-items:center}
input[type="color"].color-input{width:2.6rem;height:2.35rem;padding:2px;border:1px solid hsl(var(--input));
  border-radius:var(--radius);background:hsl(var(--background));cursor:pointer}
.form-actions{display:flex;gap:.5rem;align-items:center;padding:.9rem 1.1rem;
  border-top:1px solid hsl(var(--border));background:hsl(var(--card));
  position:sticky;bottom:0;border-radius:0 0 var(--radius) var(--radius)}
.switch{display:flex;align-items:center;gap:.55rem;cursor:pointer;font-size:.85rem}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:2.35rem;height:1.35rem;border-radius:999px;background:hsl(var(--muted));
  border:1px solid hsl(var(--border));position:relative;transition:.15s;flex:0 0 auto}
.switch .track::after{content:"";position:absolute;top:1px;left:1px;width:1.1rem;height:1.1rem;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.15s}
.switch input:checked + .track{background:hsl(var(--primary));border-color:hsl(var(--primary))}
.switch input:checked + .track::after{transform:translateX(1rem)}
.switch input:focus-visible + .track{outline:2px solid hsl(var(--ring)/.5);outline-offset:2px}
.alert{padding:.7rem .9rem;border-radius:var(--radius);font-size:.85rem;margin-bottom:1rem;
  border:1px solid hsl(var(--border))}
.alert-error{background:hsl(0 84% 60%/.1);border-color:hsl(0 84% 60%/.35);color:hsl(0 74% 42%)}
.alert-success{background:hsl(var(--success)/.1);border-color:hsl(var(--success)/.35);color:hsl(var(--success))}

/* ---------- login ---------- */
.login-body{min-height:100vh;display:grid;place-items:center;padding:1.5rem;
  background:
    radial-gradient(900px 420px at 15% -10%, hsl(var(--primary)/.14), transparent 60%),
    radial-gradient(700px 380px at 100% 0%, hsl(210 90% 52%/.10), transparent 55%),
    hsl(var(--muted))}
.login-wrap{width:100%;max-width:400px}
.login-card{padding:1.75rem}
.login-head{text-align:center;margin-bottom:1.4rem}
.login-mark{width:2.75rem;height:2.75rem;border-radius:.8rem;display:grid;place-items:center;margin:0 auto .8rem;
  background:hsl(var(--primary));color:#fff;box-shadow:0 6px 18px hsl(var(--primary)/.35)}
.login-head h1{font-size:1.2rem}
.login-head p{margin:.3rem 0 0;font-size:.85rem}
.pass-wrap{position:relative;display:flex;align-items:center}
.pass-wrap .input{padding-right:2.6rem}
.pass-toggle{position:absolute;right:.3rem;width:2rem;height:2rem;border:0;background:transparent;
  border-radius:var(--radius);display:grid;place-items:center;cursor:pointer;color:hsl(var(--muted-foreground))}
.pass-toggle:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}
.pass-toggle svg{width:1rem;height:1rem}
.pass-toggle .i-off{display:none}
.pass-toggle.on .i-off{display:block}
.pass-toggle.on .i-on{display:none}
.login-submit{width:100%;margin-top:.35rem;height:2.5rem}
.login-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.15rem;padding-top:1rem;border-top:1px solid hsl(var(--border));font-size:.8rem}
.login-foot a,.link-btn{display:inline-flex;align-items:center;gap:.35rem;
  color:hsl(var(--muted-foreground));background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:.8rem}
.login-foot a:hover,.link-btn:hover{color:hsl(var(--primary))}
.login-copy{text-align:center;margin:1rem 0 0;font-size:.75rem}
/* the shared messages partial is Bootstrap-flavoured; normalise it here */
.login-card .alert,.login-card .callout{padding:.65rem .85rem;border-radius:var(--radius);
  font-size:.82rem;margin-bottom:1rem;border:1px solid hsl(var(--border))}
.login-card .alert-danger,.login-card .callout-danger{background:hsl(0 84% 60%/.1);
  border-color:hsl(0 84% 60%/.35);color:hsl(0 74% 45%)}
.login-card .alert-success,.login-card .callout-success{background:hsl(var(--success)/.1);
  border-color:hsl(var(--success)/.35);color:hsl(var(--success))}

/* ---------- user menu ---------- */
.adm-user-menu{position:relative}
button.adm-user{border:0;background:transparent;cursor:pointer;font:inherit;color:inherit;
  padding:.25rem .4rem;border-radius:var(--radius)}
button.adm-user:hover{background:hsl(var(--accent))}
button.adm-user .caret{color:hsl(var(--muted-foreground))}
.adm-dropdown{position:absolute;right:0;top:calc(100% + .45rem);min-width:220px;z-index:80;
  background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);
  box-shadow:0 12px 32px rgba(0,0,0,.16);padding:.35rem;overflow:hidden}
.adm-dropdown[hidden]{display:none}
.dd-head{padding:.6rem .65rem .55rem}
.dd-name{font-size:.85rem;font-weight:600}
.dd-mail{font-size:.75rem;color:hsl(var(--muted-foreground));overflow:hidden;text-overflow:ellipsis}
.adm-dropdown a{display:flex;align-items:center;gap:.55rem;padding:.5rem .65rem;border-radius:calc(var(--radius) - .15rem);
  font-size:.85rem;color:hsl(var(--foreground))}
.adm-dropdown a:hover{background:hsl(var(--accent))}
.adm-dropdown a svg{width:1rem;height:1rem;color:hsl(var(--muted-foreground))}
.dd-sep{height:1px;background:hsl(var(--border));margin:.35rem 0}
.dd-danger{color:hsl(0 74% 48%)}
.dd-danger svg{color:currentColor}
.dd-danger:hover{background:hsl(0 84% 60%/.1)}

/* ---------- key/value settings rows ---------- */
.kv-list{display:flex;flex-direction:column;gap:.7rem}
/* Two-column variant for long key/value lists (e.g. route settings). */
.kv-list.cols{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.6rem}
.kv-list.cols .kv-row{grid-template-columns:150px 1fr}
@media(max-width:720px){.kv-list.cols{grid-template-columns:1fr}}
.kv-row{display:grid;grid-template-columns:220px 1fr;gap:1rem;align-items:center}
.kv-row > label{font-size:.82rem;font-weight:600}
.kv-input{display:flex;align-items:center;gap:0}
.kv-prefix{display:inline-flex;align-items:center;height:2.35rem;padding:0 .55rem;
  border:1px solid hsl(var(--input));border-right:0;border-radius:var(--radius) 0 0 var(--radius);
  background:hsl(var(--muted));color:hsl(var(--muted-foreground));font-size:.85rem}
.kv-input .input{border-radius:0 var(--radius) var(--radius) 0}
@media(max-width:700px){.kv-row{grid-template-columns:1fr;gap:.3rem}}
.set-thumb{width:3rem;height:2.2rem;object-fit:contain;border-radius:.35rem;
  border:1px solid hsl(var(--border));background:hsl(var(--muted));padding:2px;flex:0 0 auto}
textarea.input.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;line-height:1.55}

/* ---------- post format chooser ---------- */
.fmt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem}
@media(max-width:1100px){.fmt-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.fmt-grid{grid-template-columns:1fr}}
.fmt{display:flex;align-items:center;gap:.85rem;padding:1rem;border-radius:var(--radius);
  border:1px solid hsl(var(--border));background:hsl(var(--card));transition:.15s}
.fmt:hover{border-color:hsl(var(--primary)/.5);transform:translateY(-1px);
  box-shadow:0 6px 18px hsl(var(--foreground)/.06)}
.fmt-ic{width:2.4rem;height:2.4rem;border-radius:var(--radius);display:grid;place-items:center;flex:0 0 auto;
  background:hsl(var(--primary)/.1);color:hsl(var(--primary))}
.fmt-body{display:flex;flex-direction:column;min-width:0;flex:1}
.fmt-body strong{font-size:.9rem;font-weight:600}
.fmt-body small{font-size:.76rem;color:hsl(var(--muted-foreground))}
.fmt-go{width:1rem;height:1rem;color:hsl(var(--muted-foreground));flex:0 0 auto}
.fmt:hover .fmt-go{color:hsl(var(--primary))}

/* ============================================================
   BOOTSTRAP-3 COMPATIBILITY LAYER
   The remaining legacy admin screens (post editor and its shared
   partials, settings pages) are written in Bootstrap 3 markup. Rather
   than rewrite every partial at once — which risks breaking publishing —
   this maps the handful of Bootstrap classes they actually use onto the
   modern design system, so those screens work and look right inside the
   new shell. Each screen can then be rewritten properly, one at a time,
   and this layer shrinks as they are.
   ============================================================ */

/* panels */
.box{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);
  margin-bottom:1rem;overflow:hidden}
.box-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.1rem}
.box-header.with-border{border-bottom:1px solid hsl(var(--border))}
.box-title{font-size:.92rem;font-weight:650;margin:0}
.box-body{padding:1.1rem}
.box-footer{padding:.9rem 1.1rem;border-top:1px solid hsl(var(--border));background:hsl(var(--card))}

/* grid — Bootstrap columns are 12ths */
.row{display:flex;flex-wrap:wrap;margin:0 -.5rem}
.row > [class*="col-"]{padding:0 .5rem;width:100%}
@media(min-width:768px){
  .col-sm-1{width:8.333%}.col-sm-2{width:16.666%}.col-sm-3{width:25%}.col-sm-4{width:33.333%}
  .col-sm-5{width:41.666%}.col-sm-6{width:50%}.col-sm-7{width:58.333%}.col-sm-8{width:66.666%}
  .col-sm-9{width:75%}.col-sm-10{width:83.333%}.col-sm-11{width:91.666%}.col-sm-12{width:100%}
}
@media(min-width:992px){
  .col-md-3{width:25%}.col-md-4{width:33.333%}.col-md-6{width:50%}.col-md-8{width:66.666%}
  .col-md-9{width:75%}.col-md-12{width:100%}
  .col-lg-3{width:25%}.col-lg-4{width:33.333%}.col-lg-6{width:50%}.col-lg-8{width:66.666%}
  .col-lg-9{width:75%}.col-lg-12{width:100%}
}

/* forms */
.form-group{margin-bottom:1rem}
.form-group > label,label.control-label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.35rem}
.form-control{height:2.35rem;width:100%;border-radius:var(--radius);border:1px solid hsl(var(--input));
  background:hsl(var(--background));padding:0 .75rem;font-size:.85rem;font-family:inherit;color:inherit}
textarea.form-control{height:auto;min-height:6rem;padding:.6rem .75rem;line-height:1.6}
select.form-control{padding-right:.5rem}
.form-control:focus{outline:2px solid hsl(var(--ring)/.45);outline-offset:1px}
.help-block{display:block;font-size:.75rem;color:hsl(var(--muted-foreground));margin-top:.3rem}
.input-group{display:flex;align-items:stretch;gap:0}
.input-group .form-control{border-radius:var(--radius) 0 0 var(--radius)}
.input-group-btn{display:flex}
.input-group-btn .btn{border-radius:0 var(--radius) var(--radius) 0;height:2.35rem}
.checkbox,.radio{display:flex;align-items:center;gap:.5rem;font-size:.85rem;margin:.4rem 0}
.checkbox label,.radio label{display:flex;align-items:center;gap:.5rem;font-weight:500;margin:0}
input[type="checkbox"],input[type="radio"]{width:1rem;height:1rem;accent-color:hsl(var(--primary))}

/* buttons — .btn already exists; map the Bootstrap variants onto it */
.btn-default{background:hsl(var(--card));border-color:hsl(var(--border));color:hsl(var(--foreground))}
.btn-default:hover{background:hsl(var(--accent))}
.btn-success{background:hsl(var(--success));color:#fff}
.btn-danger{background:hsl(0 74% 50%);color:#fff}
.btn-info{background:hsl(var(--info));color:#fff}
.btn-warning{background:hsl(var(--warning));color:#3a2a00}
.btn-block{width:100%}
.btn-xs{height:1.75rem;padding:0 .55rem;font-size:.75rem}
.btn-lg{height:2.7rem;padding:0 1.2rem;font-size:.92rem}

/* tabs */
.nav-tabs{display:flex;flex-wrap:wrap;gap:.25rem;list-style:none;margin:0;padding:0 .5rem;
  border-bottom:1px solid hsl(var(--border))}
.nav-tabs > li > a{display:inline-flex;align-items:center;padding:.55rem .8rem;font-size:.85rem;
  font-weight:550;color:hsl(var(--muted-foreground));border-bottom:2px solid transparent;margin-bottom:-1px}
.nav-tabs > li > a:hover{color:hsl(var(--foreground))}
.nav-tabs > li.active > a{color:hsl(var(--primary));border-bottom-color:hsl(var(--primary))}
.tab-content{padding:1.1rem}
.tab-pane{display:none}
.tab-pane.active{display:block}

/* tables */
table.table{width:100%;border-collapse:collapse;font-size:.85rem}
table.table th{text-align:left;font-weight:600;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.05em;color:hsl(var(--muted-foreground));padding:.6rem .8rem;
  border-bottom:1px solid hsl(var(--border))}
table.table td{padding:.65rem .8rem;border-bottom:1px solid hsl(var(--border));vertical-align:middle}

/* misc helpers the legacy markup relies on */
.pull-right{margin-left:auto}
.pull-left{margin-right:auto}
.text-right{text-align:right}
.text-center{text-align:center}
.hidden{display:none !important}
.label{display:inline-flex;align-items:center;padding:.18rem .5rem;border-radius:999px;
  font-size:.72rem;font-weight:600;background:hsl(var(--secondary));color:hsl(var(--foreground))}
.alert{padding:.7rem .9rem;border-radius:var(--radius);font-size:.85rem;margin-bottom:1rem;
  border:1px solid hsl(var(--border));background:hsl(var(--muted))}
.alert-success{background:hsl(var(--success)/.1);border-color:hsl(var(--success)/.35);color:hsl(var(--success))}
.alert-danger{background:hsl(0 84% 60%/.1);border-color:hsl(0 84% 60%/.35);color:hsl(0 74% 45%)}
.alert-warning{background:hsl(var(--warning)/.14);border-color:hsl(var(--warning)/.4);color:hsl(38 92% 35%)}
.alert-info{background:hsl(var(--info)/.1);border-color:hsl(var(--info)/.35);color:hsl(var(--info))}

/* ============================================================
   POST EDITOR LAYOUT
   The editor views use their own class vocabulary from the legacy
   custom-2.4 stylesheet (form-post / form-post-left / form-post-right,
   utility margins, add-new buttons, modals). That sheet is built for
   AdminLTE and fights the modern shell, so the classes are reimplemented
   here instead — same structure, modern styling.
   ============================================================ */

/* header row above the editor */
.form-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;padding:0 0 1rem}
.form-title{font-size:1.15rem;font-weight:650;letter-spacing:-.02em;margin:0}

/* main column + fixed sidebar */
.form-post{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:1rem;align-items:start}
.form-post-left{min-width:0}
.form-post-right{min-width:0;display:flex;flex-direction:column;gap:1rem}
.form-post-right .box{margin-bottom:0}
@media(max-width:1100px){.form-post{grid-template-columns:1fr}}
/* Minimalist post-details box: lay the short fields out two-per-row instead of
   one-per-row. Long controls (title, textareas, tag box, optional URL, nested
   rows and headings) span the full width so they stay readable. Applies to both
   the add and edit article partials via the first .box in the left column. */
.form-post-left > .box:first-of-type > .box-body{display:grid;grid-template-columns:1fr 1fr;gap:0 1.1rem;align-items:start}
.form-post-left > .box:first-of-type > .box-body > .form-group{margin-bottom:1rem}
.form-post-left > .box:first-of-type > .box-body > .form-group:first-child,
.form-post-left > .box:first-of-type > .box-body > .form-group:has(textarea),
.form-post-left > .box:first-of-type > .box-body > .form-group.m-t-30,
.form-post-left > .box:first-of-type > .box-body > .row-optional-url,
.form-post-left > .box:first-of-type > .box-body > .row,
.form-post-left > .box:first-of-type > .box-body > p{grid-column:1 / -1}
@media(max-width:640px){.form-post-left > .box:first-of-type > .box-body{grid-template-columns:1fr}}

/* the editor screens lean on these utility classes */
.m-t-5{margin-top:.3rem}.m-t-10{margin-top:.6rem}.m-t-15{margin-top:.9rem}
.m-t-20{margin-top:1.2rem}.m-t-30{margin-top:1.8rem}
.m-b-5{margin-bottom:.3rem}.m-b-10{margin-bottom:.6rem}.m-b-15{margin-bottom:.9rem}
.m-b-20{margin-bottom:1.2rem}.m-b-30{margin-bottom:1.8rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}
.text-muted{color:hsl(var(--muted-foreground))}
.left{float:left}.right{float:right}
.clearfix::after{content:"";display:table;clear:both}

/* buttons the editor adds on top of the Bootstrap set */
.btn-add-new{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  height:2.2rem;padding:0 .8rem;border-radius:var(--radius);cursor:pointer;
  border:1px dashed hsl(var(--border));background:hsl(var(--card));
  font:inherit;font-size:.82rem;font-weight:550;color:hsl(var(--foreground))}
.btn-add-new:hover{border-color:hsl(var(--primary));color:hsl(var(--primary));border-style:solid}
.btn-md{height:2.35rem;padding:0 .9rem;font-size:.85rem}
.btn-list-button{display:inline-flex;align-items:center;gap:.35rem;height:2rem;padding:0 .65rem;
  border-radius:var(--radius);border:1px solid hsl(var(--border));background:hsl(var(--card));
  cursor:pointer;font:inherit;font-size:.8rem}
.btn-list-button:hover{background:hsl(var(--accent))}
.btn-table-delete{display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border-radius:var(--radius);border:1px solid hsl(var(--border));
  background:hsl(var(--card));cursor:pointer;color:hsl(0 74% 50%)}
.btn-table-delete:hover{background:hsl(0 84% 60%/.1);border-color:hsl(0 84% 60%/.4)}

/* repeatable list rows (sorted list, faq, quiz answers…) */
.option-icon,.item-icon{display:inline-grid;place-items:center;width:2rem;height:2rem;flex:0 0 auto;
  border-radius:var(--radius);background:hsl(var(--secondary));color:hsl(var(--muted-foreground))}
.item{display:flex;align-items:center;gap:.6rem;padding:.6rem;border-radius:var(--radius);
  border:1px solid hsl(var(--border));background:hsl(var(--card));margin-bottom:.5rem}
.item .title{font-size:.85rem;font-weight:600}
.item .desc{font-size:.78rem;color:hsl(var(--muted-foreground))}

/* ---- Bootstrap panels + list/quiz/poll builders ----
   These screens (sorted list, recipe, trivia/personality quiz, poll) use
   Bootstrap panel + custom-control markup. Bootstrap JS is loaded (collapse
   toggles work) but its CSS is not, so the classes are reimplemented here as
   modern cards, matching the .box vocabulary. */
.panel{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);
  margin-bottom:.7rem;overflow:hidden}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.5rem .7rem;background:hsl(var(--muted)/.4);border-bottom:1px solid hsl(var(--border))}
.panel-title{flex:1;min-width:0;margin:0;font-size:.86rem;font-weight:600;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel-body{padding:.85rem}
/* collapse — Bootstrap's collapse.js toggles .in / .collapsing */
.panel-collapse.collapse{display:none}
.panel-collapse.collapse.in,.panel-collapse.collapsing{display:block}

/* order + delete controls grouped in a panel heading */
.btn-group{display:inline-flex;align-items:center;gap:.35rem}
.btn-group-post-list-option{flex:0 0 auto}
.input_list_item_order,.input_quiz_question_order{width:5rem;height:2.1rem;text-align:center}

/* item image + description columns (sorted list, recipe, quiz question/result) */
.post-list-items{display:block}
.list-item-description,.question-description,.result-description{display:flex;gap:1.25rem;flex-wrap:wrap}
.list-item-description>.left,.question-description>.left,.result-description>.left{float:none;flex:0 0 auto;width:190px;max-width:100%}
.list-item-description>.right,.question-description>.right,.result-description>.right{float:none;flex:1;min-width:220px}
.list-item-image-container img{max-width:100%;border-radius:var(--radius);border:1px solid hsl(var(--border))}
.control-label-content{display:block;margin-bottom:.4rem;font-weight:600}
.editor-buttons{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.5rem}

/* quiz answers */
.quiz-question,.quiz-answers{display:block}
.answer{border:1px solid hsl(var(--border));border-radius:var(--radius);padding:.7rem;
  margin-bottom:.6rem;background:hsl(var(--card))}
.answer-inner{display:block}
.answer-select-container,.row-answer{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.5rem}
.answer-text{width:100%}
.quiz-answer-image-container,.quiz-question-image-container{margin-bottom:.5rem}
.quiz-answer-image-item{margin-bottom:.5rem}
.span-answer-format,.small-title-inline{font-size:.78rem;color:hsl(var(--muted-foreground))}
.personality-quiz-result-dropdown{max-width:320px}

/* Bootstrap custom radio (correct-answer / result selectors) — show the
   native control (Bootstrap normally hides it and draws its own) */
.custom-control{position:relative;display:inline-flex;align-items:center;gap:.45rem;min-height:1.5rem}
.custom-control-input{width:1.05rem;height:1.05rem;margin:0;accent-color:hsl(var(--primary));cursor:pointer}
.custom-control-label{cursor:pointer;font-size:.85rem;margin:0}

/* modals used by the editor (image picker, link inserter, …) */
.modal{position:fixed;inset:0;z-index:200;display:none;overflow-y:auto;
  background:hsl(var(--foreground)/.45);backdrop-filter:blur(2px)}
.modal.in,.modal.show{display:block}
.modal-dialog{max-width:760px;margin:3rem auto;padding:0 1rem}
.modal-content{background:hsl(var(--card));border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) + .2rem);box-shadow:0 24px 60px rgba(0,0,0,.28);overflow:hidden}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 1.1rem;border-bottom:1px solid hsl(var(--border))}
.modal-header .modal-title{font-size:.95rem;font-weight:650;margin:0}
.modal-body{padding:1.1rem}
.modal-footer{padding:.85rem 1.1rem;border-top:1px solid hsl(var(--border));
  display:flex;justify-content:flex-end;gap:.5rem}
.modal-backdrop{display:none}
button.close,.close{border:0;background:none;font-size:1.4rem;line-height:1;cursor:pointer;
  color:hsl(var(--muted-foreground));padding:0 .2rem}
.close:hover{color:hsl(var(--foreground))}

/* TinyMCE + select2 need to sit on the modern surface */
.tox-tinymce{border:1px solid hsl(var(--border)) !important;border-radius:var(--radius) !important}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
  border:1px solid hsl(var(--input)) !important;border-radius:var(--radius) !important;
  background:hsl(var(--background)) !important;min-height:2.35rem}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:2.35rem;color:hsl(var(--foreground))}

/* editor odds and ends that the legacy sheet also provided */
.fa,.bi{display:inline-block;font-style:normal;line-height:1}
.fade{transition:opacity .15s}
.input-group-append{display:flex}
.input-group-append .btn{border-radius:0 var(--radius) var(--radius) 0;height:2.35rem}
.box-primary{border-top:2px solid hsl(var(--primary))}
.small-title{font-size:.78rem;font-weight:600;color:hsl(var(--muted-foreground));
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem}
.label-table{display:inline-flex;align-items:center;padding:.15rem .45rem;border-radius:999px;
  font-size:.7rem;font-weight:600;background:hsl(var(--secondary))}
.remove-item{border:0;background:none;cursor:pointer;color:hsl(0 74% 50%);padding:.2rem;line-height:1}
.remove-item:hover{color:hsl(0 74% 42%)}
.btn-select-image{display:block;width:100%;border:1px dashed hsl(var(--border));border-radius:var(--radius);
  background:hsl(var(--muted));cursor:pointer;padding:0;overflow:hidden}
.btn-select-image:hover{border-color:hsl(var(--primary));border-style:solid}
.btn-select-image-inner{display:grid;place-items:center;gap:.35rem;min-height:8rem;padding:1rem;
  font-size:.82rem;color:hsl(var(--muted-foreground))}
.btn-select-image img{width:100%;height:auto;display:block}
.item-table-filter{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem}
.checkbox-table{display:flex;align-items:center;gap:.4rem;font-size:.82rem}
.timeline-item{display:flex;gap:.6rem;padding:.6rem;border-radius:var(--radius);
  border:1px solid hsl(var(--border));background:hsl(var(--card));margin-bottom:.5rem}

/* ============================================================
   MEDIA LIBRARY + FIELD PICKER
   ============================================================ */
.dropzone{display:grid;place-items:center;gap:.35rem;text-align:center;padding:2rem 1rem;
  border:2px dashed hsl(var(--border));border-radius:var(--radius);background:hsl(var(--muted)/.5);
  margin-bottom:1rem;transition:.15s}
.dropzone.over{border-color:hsl(var(--primary));background:hsl(var(--primary)/.06)}
.dropzone svg{width:1.6rem;height:1.6rem;color:hsl(var(--muted-foreground))}
.dropzone strong{font-size:.9rem}
.dropzone span{font-size:.76rem}

.up-progress{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.up-bar{flex:1;height:6px;border-radius:3px;background:hsl(var(--muted));overflow:hidden}
.up-bar i{display:block;height:100%;width:0;background:hsl(var(--primary));transition:width .2s}
.up-text{font-size:.78rem;color:hsl(var(--muted-foreground));white-space:nowrap}

.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.85rem}
.media-tile{position:relative;border:1px solid hsl(var(--border));border-radius:var(--radius);
  overflow:hidden;background:hsl(var(--muted))}
.media-tile img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.mt-name{display:block;padding:.4rem .5rem;font-size:.7rem;color:hsl(var(--muted-foreground));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:hsl(var(--card))}
.mt-actions{position:absolute;top:.35rem;right:.35rem;display:flex;gap:.25rem;opacity:0;transition:.15s}
.media-tile:hover .mt-actions{opacity:1}
.mt-btn{width:1.7rem;height:1.7rem;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:hsl(var(--background)/.92);color:hsl(var(--foreground));box-shadow:0 1px 4px rgba(0,0,0,.2)}
.mt-btn svg{width:.8rem;height:.8rem}
.mt-btn:hover{background:hsl(var(--background))}
.mt-btn.danger:hover{background:hsl(0 84% 60%);color:#fff}
.mt-btn.ok{background:hsl(142 71% 40%);color:#fff}
.media-foot{display:flex;justify-content:center;padding-top:1rem}

/* picker modal */
.media-modal{position:fixed;inset:0;z-index:106000 !important;display:none;padding:1.5rem;
  background:hsl(var(--foreground)/.5);backdrop-filter:blur(3px)}
.media-modal.open{display:grid;place-items:start center}
.mm-panel{width:min(960px,100%);max-height:86vh;display:flex;flex-direction:column;
  background:hsl(var(--card));border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) + .2rem);box-shadow:0 24px 60px rgba(0,0,0,.3);overflow:hidden}
.mm-head{display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;
  border-bottom:1px solid hsl(var(--border));flex-wrap:wrap}
.mm-head > strong{font-size:.95rem}
.mm-search{min-width:180px;max-width:260px;margin-left:auto}
.mm-progress{padding:0 1rem;margin:.75rem 0 0}
.mm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem;
  padding:1rem;overflow-y:auto;flex:1}
.mm-grid button.mm-tile,
.mm-tile{display:flex !important;flex-direction:column !important;width:100% !important;height:155px !important;
  min-height:155px !important;max-height:155px !important;box-sizing:border-box !important;padding:0 !important;
  border:1px solid hsl(var(--border));border-radius:var(--radius);overflow:hidden;cursor:pointer;
  background:hsl(var(--card));position:relative}
.mm-tile:hover{border-color:hsl(var(--primary));box-shadow:0 0 0 2px hsl(var(--primary)/.25)}
.mm-grid button.mm-tile img,
.mm-tile img{width:100% !important;height:118px !important;min-height:118px !important;max-height:118px !important;
  object-fit:cover !important;display:block !important;background:hsl(var(--muted));flex-shrink:0 !important}
.mm-grid button.mm-tile figcaption,
.mm-tile figcaption{display:block !important;width:100% !important;height:35px !important;min-height:35px !important;
  max-height:35px !important;padding:.35rem .45rem !important;font-size:.68rem !important;line-height:1.3 !important;
  color:hsl(var(--muted-foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:hsl(var(--card));border-top:1px solid hsl(var(--border));box-sizing:border-box !important;flex-shrink:0 !important}
.mm-tile.sel{border-color:hsl(var(--primary));box-shadow:0 0 0 2px hsl(var(--primary)/.35)}
/* All / Content / Featured filter — the images table is dominated by post cover
   art, so "Content" is what makes an image uploaded for an article body findable. */
.mm-kinds{display:inline-flex;gap:.15rem;padding:.15rem;border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) + .15rem);background:hsl(var(--muted)/.45);flex-shrink:0}
.mm-kind{appearance:none;border:0;background:transparent;cursor:pointer;
  padding:.3rem .6rem;font:inherit;font-size:.76rem;line-height:1.2;font-weight:600;
  color:hsl(var(--muted-foreground));border-radius:var(--radius);white-space:nowrap}
.mm-kind:hover{color:hsl(var(--foreground))}
.mm-kind.is-on{background:hsl(var(--card));color:hsl(var(--foreground));box-shadow:0 1px 2px rgb(0 0 0/.08)}
@media(max-width:560px){.mm-kind{padding:.3rem .45rem;font-size:.72rem}}
/* just-uploaded tiles: a fading ring so the new files are easy to spot at the
   front of the grid. Uploading does not pick an image, it only adds one. */
.mm-tile.is-new{box-shadow:0 0 0 2px hsl(var(--primary)/.55);animation:mmNew 2.4s ease-out 1 forwards}
@keyframes mmNew{0%{box-shadow:0 0 0 3px hsl(var(--primary)/.75)}100%{box-shadow:0 0 0 2px hsl(var(--primary)/.25)}}
@media(prefers-reduced-motion:reduce){.mm-tile.is-new{animation:none}}
/* tick badge for the multi-select modes (additional images, editor gallery) */
.mm-tile.sel::after{content:"";position:absolute;top:.4rem;right:.4rem;width:1.1rem;height:1.1rem;
  border-radius:999px;background:hsl(var(--primary));
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:.75rem;background-repeat:no-repeat;background-position:center}
@media(max-width:560px){.mm-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}
.mm-foot{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:0 1rem 1rem}

/* delete button on popup media tiles */
.mm-tile-del{position:absolute !important;top:6px !important;right:6px !important;width:24px !important;height:24px !important;
  border-radius:50% !important;background:rgba(220,38,38,0.88) !important;color:#fff !important;border:none !important;
  display:flex !important;align-items:center !important;justify-content:center !important;cursor:pointer !important;
  z-index:15 !important;opacity:0;transition:opacity .15s ease,transform .15s ease,background .15s ease !important;
  box-shadow:0 2px 4px rgba(0,0,0,0.3) !important;padding:0 !important}
.mm-tile:hover .mm-tile-del,.mm-tile:focus-within .mm-tile-del{opacity:1 !important}
@media(hover:none){.mm-tile-del{opacity:.85 !important}}
.mm-tile-del:hover{background:#b91c1c !important;transform:scale(1.15) !important}
.mm-tile-del svg{width:13px !important;height:13px !important;stroke:currentColor !important;stroke-width:2.5 !important;display:block !important;pointer-events:none !important}
.mm-tile.sel .mm-tile-del{right:auto !important;left:6px !important}

/* a field that picks an image */
.media-field{display:flex;gap:.5rem;align-items:center}
.media-field .input{flex:1}

/* An author `display` rule beats the UA [hidden] rule, so any .btn/.card with
   the hidden attribute would still render. Enforce it once, globally. */
[hidden]{display:none !important}

/* picker: prominent upload affordance */
.mm-head .mm-up{height:2.4rem;padding:0 1.05rem;font-size:.86rem;font-weight:600}
.mm-head .mm-up svg{width:1rem;height:1rem}
.mm-drop{display:grid;place-items:center;gap:.2rem;text-align:center;cursor:pointer;
  margin:1rem 1rem 0;padding:1.35rem 1rem;border:2px dashed hsl(var(--border));
  border-radius:var(--radius);background:hsl(var(--muted)/.6);transition:.15s}
.mm-drop:hover,.mm-drop.over{border-color:hsl(var(--primary));background:hsl(var(--primary)/.07)}
.mm-drop svg{width:1.5rem;height:1.5rem;color:hsl(var(--primary))}
.mm-drop strong{font-size:.88rem}
.mm-drop span{font-size:.76rem;color:hsl(var(--muted-foreground))}
@media(max-width:560px){
  .mm-head{gap:.5rem}
  .mm-search{order:3;margin-left:0;max-width:none;width:100%}
  .mm-head .mm-up{flex:1}
}

/* media tile: 3 named sizes (Large / Medium / Small) + delete */
.mt-sizes{position:absolute;left:.4rem;bottom:2rem;display:flex;gap:.2rem;opacity:0;transition:.15s}
.media-tile:hover .mt-sizes{opacity:1}
.mt-size{width:1.6rem;height:1.6rem;border:0;border-radius:.35rem;cursor:pointer;
  font:inherit;font-size:.68rem;font-weight:700;line-height:1;
  background:hsl(var(--background)/.92);color:hsl(var(--foreground));box-shadow:0 1px 4px rgba(0,0,0,.2)}
.mt-size:hover{background:hsl(var(--primary));color:#fff}
.mt-size.ok{background:hsl(142 71% 40%);color:#fff}

/* ---------- Modern Add / Edit Post Layout & Forms ---------- */
.form-post {
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 1.25rem !important;
  align-items: start !important;
  width: 100% !important;
}
.form-post-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  width: 100% !important;
  padding-right: 0 !important;
  min-width: 0 !important;
}
.form-post-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  width: 100% !important;
  max-width: 100% !important;
}
@media (max-width: 1024px) {
  .form-post {
    grid-template-columns: 1fr !important;
  }
}

.form-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 0 1.25rem 0 !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  margin-bottom: 1.25rem !important;
}
.form-header .form-title {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: hsl(var(--foreground)) !important;
  margin: 0 !important;
  position: static !important;
  float: none !important;
}
.form-header .btn-add-new, .form-header .btn {
  height: 2.2rem !important;
  padding: 0 .9rem !important;
  font-size: .85rem !important;
  font-weight: 550 !important;
  border-radius: var(--radius) !important;
  float: none !important;
}

.box, .panel {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
  margin-bottom: 1rem !important;
  overflow: hidden !important;
}
.box-header, .panel-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: .85rem 1.1rem !important;
  background: hsl(var(--muted)/.25) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
}
.box-title, .panel-title {
  font-size: .92rem !important;
  font-weight: 650 !important;
  color: hsl(var(--foreground)) !important;
  margin: 0 !important;
  position: static !important;
  float: none !important;
}
.box-body, .panel-body {
  padding: 1.1rem !important;
}

.form-control, select.form-control, textarea.form-control {
  width: 100% !important;
  height: 2.35rem !important;
  border-radius: var(--radius) !important;
  border: 1px solid hsl(var(--input)) !important;
  background: hsl(var(--background)) !important;
  padding: 0 .75rem !important;
  font-size: .85rem !important;
  font-family: inherit !important;
  color: hsl(var(--foreground)) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
textarea.form-control {
  height: auto !important;
  padding: .6rem .75rem !important;
  min-height: 80px !important;
}
.form-control:focus {
  border-color: hsl(var(--ring)) !important;
  outline: 2px solid hsl(var(--ring)/.25) !important;
  outline-offset: 0 !important;
}
.form-group {
  margin-bottom: 1.1rem !important;
}
.form-group label, label.control-label {
  display: inline-block !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
  margin-bottom: .4rem !important;
}

.btn-select-image {
  background: hsl(var(--muted)/.3) !important;
  border: 2px dashed hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  transition: all .15s ease !important;
  padding: 1.25rem 1rem !important;
}
.btn-select-image:hover {
  background: hsl(var(--accent)) !important;
  border-color: hsl(var(--primary)) !important;
}
.btn-select-image .select-img-text {
  color: hsl(var(--muted-foreground)) !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
}
.btn-select-image .btn {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
  border-radius: var(--radius) !important;
}
.post-select-image-container {
  border-radius: var(--radius) !important;
  border: 1px solid hsl(var(--border)) !important;
  overflow: hidden !important;
}

.select2-container--default .select2-selection--single {
  height: 2.35rem !important;
  border: 1px solid hsl(var(--input)) !important;
  border-radius: var(--radius) !important;
  background: hsl(var(--background)) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 2.2rem !important;
  color: hsl(var(--foreground)) !important;
  font-size: .85rem !important;
  padding-left: .75rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 2.2rem !important;
}
.tox-tinymce {
  border-radius: var(--radius) !important;
  border: 1px solid hsl(var(--border)) !important;
}

/* Input Groups & Custom Controls */
.input-group {
  display: flex !important;
  width: 100% !important;
}
.input-group .form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  flex: 1 !important;
}
.input-group-addon {
  display: flex !important;
  align-items: center !important;
  padding: 0 .75rem !important;
  background: hsl(var(--muted)/.3) !important;
  border: 1px solid hsl(var(--input)) !important;
  border-left: 0 !important;
  color: hsl(var(--muted-foreground)) !important;
}
.input-group-btn .btn {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  height: 2.35rem !important;
}

.custom-control {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  padding-left: 0 !important;
}
.custom-control-input {
  width: 1.05rem !important;
  height: 1.05rem !important;
  accent-color: hsl(var(--primary)) !important;
  cursor: pointer !important;
  opacity: 1 !important;
  position: static !important;
}
.custom-control-label {
  cursor: pointer !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  color: hsl(var(--foreground)) !important;
}
.custom-control-label::before, .custom-control-label::after {
  display: none !important;
}