/* ==========================================================================
   ICWAC admin panel. Same flat palette as the public site — no gradients.
   ========================================================================== */
:root {
  --pink:#E5008C; --pink-700:#B0006C; --pink-50:#FDEDF6;
  --blue:#1478E0; --blue-700:#0B57A8; --blue-900:#08325F; --blue-50:#EDF4FD;
  --orange:#FF890E; --orange-700:#D46A00; --orange-50:#FFF4E7;
  --teal:#00998C; --teal-50:#E3F4F2;
  --ink:#0E1A2B; --ink-2:#1A2739; --slate:#5C6B80; --slate-2:#8493A6;
  --line:#E2E7EE; --line-2:#EEF1F6; --cream:#FBF7F2; --paper:#fff;
  --bg:#F5F7FA;
  --font-display:'Outfit','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,sans-serif;
  --r-s:8px; --r:14px; --r-l:20px;
  --sh:0 1px 2px rgba(14,26,43,.06), 0 8px 24px rgba(14,26,43,.07);
  --sidebar:268px;
}
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
body {
  font-family:var(--font-body); background:var(--bg); color:var(--ink-2);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; color:inherit; }
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--ink); line-height:1.15; letter-spacing:-.02em; }
h1 { font-size:1.7rem; } h2 { font-size:1.3rem; } h3 { font-size:1.1rem; } h4 { font-size:1rem; }
:focus-visible { outline:3px solid var(--blue); outline-offset:2px; border-radius:4px; }
.icn { flex:none; }

/* --------------------------------------------------------------- shell -- */
.shell { display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); min-height:100vh; }

.side {
  background:var(--ink); color:#93A3B8; padding:1.2rem 1rem 2rem;
  display:flex; flex-direction:column; gap:1.4rem;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.side-brand { display:flex; align-items:center; gap:.7rem; padding:.3rem .4rem 1rem; border-bottom:1px solid rgba(255,255,255,.1); }
.side-brand img { height:52px; width:auto; background:#fff; padding:5px; border-radius:10px; }
.side-brand b { font-family:var(--font-display); color:#fff; font-size:.98rem; line-height:1.15; display:block; }
.side-brand span { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); }
.side-group { margin-top:.2rem; }
.side-group h5 {
  font-family:var(--font-display); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:#63758C; padding:0 .6rem .5rem; font-weight:700;
}
.side nav ul { list-style:none; padding:0; display:grid; gap:2px; }
.side nav a {
  display:flex; align-items:center; gap:.7rem; padding:.6rem .65rem; border-radius:var(--r-s);
  font-size:.9rem; font-weight:500; transition:background-color .15s,color .15s;
}
.side nav a:hover { background:rgba(255,255,255,.07); color:#fff; }
.side nav a.on { background:var(--blue); color:#fff; }
.side nav a .icn { width:17px; height:17px; opacity:.85; }
.side nav a .count {
  margin-left:auto; background:var(--pink); color:#fff; font-size:.7rem; font-weight:700;
  min-width:20px; height:20px; padding:0 6px; border-radius:10px; display:grid; place-items:center;
}
.side-foot { margin-top:auto; padding-top:1rem; border-top:1px solid rgba(255,255,255,.1); display:grid; gap:.35rem; }

/* -------------------------------------------------------------- topbar -- */
.main { display:flex; flex-direction:column; min-width:0; }
.top {
  background:#fff; border-bottom:1px solid var(--line); padding:.85rem 1.6rem;
  display:flex; align-items:center; gap:1rem; position:sticky; top:0; z-index:20;
}
.top h1 { font-size:1.25rem; }
.top .sub { font-size:.82rem; color:var(--slate); }
.top-actions { margin-left:auto; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.who { display:flex; align-items:center; gap:.6rem; padding-left:.9rem; border-left:1px solid var(--line); }
.who .av {
  width:36px; height:36px; border-radius:50%; background:var(--blue-50); color:var(--blue);
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:.82rem;
}
.who b { display:block; font-size:.85rem; font-family:var(--font-display); color:var(--ink); line-height:1.2; }
.who span { font-size:.74rem; color:var(--slate); }
.burger-a { display:none; background:var(--ink); color:#fff; border:0; width:40px; height:40px; border-radius:var(--r-s); cursor:pointer; place-items:center; }

.content { padding:1.6rem; flex:1; }

/* ------------------------------------------------------------- buttons -- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  font-family:var(--font-display); font-weight:600; font-size:.9rem; line-height:1;
  padding:.68rem 1.1rem; border-radius:var(--r-s); border:1px solid transparent; cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s;
}
.btn .icn { width:17px; height:17px; }
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover { background:var(--blue-700); }
.btn-pink { background:var(--pink); color:#fff; }
.btn-pink:hover { background:var(--pink-700); }
.btn-orange { background:var(--orange); color:#221200; }
.btn-orange:hover { background:var(--orange-700); color:#fff; }
.btn-ink { background:var(--ink); color:#fff; }
.btn-ink:hover { background:var(--ink-2); }
.btn-ghost { background:#fff; border-color:var(--line); color:var(--ink); }
.btn-ghost:hover { border-color:var(--ink); }
.btn-danger { background:#fff; border-color:#F3C6DE; color:var(--pink-700); }
.btn-danger:hover { background:var(--pink); border-color:var(--pink); color:#fff; }
.btn-sm { padding:.45rem .7rem; font-size:.82rem; }
.btn-block { display:flex; width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* --------------------------------------------------------------- cards -- */
.card { background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); }
.card-h { padding:1.1rem 1.3rem; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.card-h h2 { font-size:1.05rem; }
.card-h .right { margin-left:auto; display:flex; gap:.5rem; flex-wrap:wrap; }
.card-b { padding:1.3rem; }
.card-b.tight { padding:0; }

.hint { font-size:.8rem; color:var(--slate); }
.muted { color:var(--slate); }
.strong { font-family:var(--font-display); font-weight:650; color:var(--ink); }

/* --------------------------------------------------------------- stats -- */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; }
.kpi { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.2rem; display:flex; gap:.9rem; align-items:flex-start; }
.kpi .ico { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none; }
.kpi b { display:block; font-family:var(--font-display); font-size:1.8rem; color:var(--ink); line-height:1; letter-spacing:-.03em; }
.kpi span { font-size:.82rem; color:var(--slate); }
.kpi a { color:var(--blue); font-size:.78rem; font-weight:600; }

/* --------------------------------------------------------------- table -- */
.tbl-wrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; font-size:.9rem; }
table.tbl th {
  text-align:left; padding:.75rem 1rem; background:var(--bg); color:var(--slate);
  font-family:var(--font-display); font-weight:650; font-size:.78rem; letter-spacing:.05em;
  text-transform:uppercase; border-bottom:1px solid var(--line); white-space:nowrap;
}
table.tbl td { padding:.7rem 1rem; border-bottom:1px solid var(--line-2); vertical-align:middle; }
table.tbl tr:last-child td { border-bottom:0; }
table.tbl tr:hover td { background:#FAFBFD; }
table.tbl .th-img, table.tbl .td-img { width:70px; }
.td-img img { width:54px; height:54px; object-fit:cover; border-radius:var(--r-s); background:var(--line-2); }
.td-title { font-family:var(--font-display); font-weight:650; color:var(--ink); }
.td-title a:hover { color:var(--blue); }
.td-actions { white-space:nowrap; text-align:right; }
.td-actions .btn { margin-left:.3rem; }
.no-img { width:54px; height:54px; border-radius:var(--r-s); background:var(--line-2); display:grid; place-items:center; color:var(--slate-2); }

.chip {
  display:inline-flex; align-items:center; gap:.3rem; padding:.24rem .6rem; border-radius:20px;
  background:var(--blue-50); color:var(--blue-700); font-size:.74rem; font-weight:650;
  font-family:var(--font-display); white-space:nowrap;
}
.chip-pink { background:var(--pink-50); color:var(--pink-700); }
.chip-teal { background:var(--teal-50); color:var(--teal); }
.chip-orange { background:var(--orange-50); color:var(--orange-700); }
.chip-grey { background:var(--line-2); color:var(--slate); }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; }

/* toggle */
.sw { position:relative; display:inline-block; width:42px; height:24px; }
.sw input { opacity:0; width:0; height:0; }
.sw i { position:absolute; inset:0; background:var(--line); border-radius:20px; cursor:pointer; transition:background-color .18s; }
.sw i::after { content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .18s; }
.sw input:checked + i { background:var(--teal); }
.sw input:checked + i::after { transform:translateX(18px); }
.sw input:focus-visible + i { outline:3px solid var(--blue); outline-offset:2px; }

/* --------------------------------------------------------------- forms -- */
.f-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.f { display:flex; flex-direction:column; gap:.4rem; }
.f.full { grid-column:1/-1; }
.f label { font-family:var(--font-display); font-weight:600; font-size:.85rem; color:var(--ink); }
.f label .req { color:var(--pink); }
.f input[type=text],.f input[type=email],.f input[type=url],.f input[type=number],
.f input[type=password],.f input[type=date],.f select,.f textarea {
  width:100%; padding:.65rem .8rem; border:1.5px solid var(--line); border-radius:var(--r-s);
  background:#fff; font-size:.92rem; transition:border-color .15s,background-color .15s;
}
.f textarea { min-height:120px; resize:vertical; line-height:1.6; }
.f textarea.tall { min-height:280px; }
.f input:focus,.f select:focus,.f textarea:focus { outline:none; border-color:var(--blue); background:var(--blue-50); }
.f .hint { margin-top:-.1rem; }
.f-row { display:flex; align-items:center; gap:.7rem; }
@media (max-width:760px) { .f-grid { grid-template-columns:1fr; } }

.form-foot {
  position:sticky; bottom:0; background:#fff; border-top:1px solid var(--line);
  padding:1rem 1.3rem; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
  border-radius:0 0 var(--r) var(--r);
}
.form-foot .right { margin-left:auto; display:flex; gap:.6rem; }

/* image field */
.imgf { display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap; }
.imgf-prev {
  width:132px; height:132px; border-radius:var(--r); border:1.5px dashed var(--line);
  background:var(--bg); display:grid; place-items:center; overflow:hidden; flex:none;
}
.imgf-prev img { width:100%; height:100%; object-fit:cover; }
.imgf-prev .ph { color:var(--slate-2); text-align:center; font-size:.75rem; padding:.5rem; }
.imgf-side { flex:1 1 220px; display:grid; gap:.5rem; align-content:start; }
.imgf-name { font-size:.78rem; color:var(--slate); word-break:break-all; }

/* alerts */
.alert { padding:.85rem 1.05rem; border-radius:var(--r-s); margin-bottom:1rem; display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; border-left:4px solid; }
.alert-success { background:var(--teal-50); border-color:var(--teal); color:#05564F; }
.alert-error { background:var(--pink-50); border-color:var(--pink); color:var(--pink-700); }
.alert-info { background:var(--blue-50); border-color:var(--blue); color:var(--blue-700); }

/* toolbar */
.toolbar { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-bottom:1.1rem; }
.search-box { position:relative; flex:1 1 260px; max-width:380px; }
.search-box input { width:100%; padding:.65rem .8rem .65rem 2.3rem; border:1.5px solid var(--line); border-radius:var(--r-s); background:#fff; }
.search-box .icn { position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:var(--slate-2); width:18px; height:18px; }

/* media grid */
.media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.8rem; }
.media-item { position:relative; border:1.5px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff; cursor:pointer; transition:border-color .15s,transform .15s; }
.media-item:hover { border-color:var(--blue); transform:translateY(-2px); }
.media-item.sel { border-color:var(--pink); border-width:3px; }
.media-item img { width:100%; aspect-ratio:1; object-fit:cover; }
.media-item .mi-name { padding:.45rem .55rem; font-size:.72rem; color:var(--slate); word-break:break-all; line-height:1.35; }
.media-item .mi-del {
  position:absolute; top:6px; right:6px; width:28px; height:28px; border-radius:50%;
  background:rgba(14,26,43,.72); color:#fff; border:0; cursor:pointer; display:grid; place-items:center; opacity:0; transition:opacity .15s;
}
.media-item:hover .mi-del { opacity:1; }
.media-item .mi-del:hover { background:var(--pink); }

/* modal */
.modal { position:fixed; inset:0; z-index:200; background:rgba(14,26,43,.6); display:none; align-items:center; justify-content:center; padding:3vh 3vw; }
.modal.open { display:flex; }
.modal-box { background:#fff; border-radius:var(--r-l); width:min(980px,100%); max-height:94vh; display:flex; flex-direction:column; overflow:hidden; }
.modal-h { padding:1.1rem 1.3rem; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:1rem; }
.modal-h h3 { margin-right:auto; }
.modal-b { padding:1.2rem; overflow-y:auto; }
.modal-f { padding:1rem 1.3rem; border-top:1px solid var(--line); display:flex; gap:.6rem; justify-content:flex-end; }
.x-btn { background:var(--bg); border:0; width:36px; height:36px; border-radius:50%; cursor:pointer; display:grid; place-items:center; }
.x-btn:hover { background:var(--line); }

/* empty */
.empty-a { text-align:center; padding:3.5rem 1.5rem; color:var(--slate); }
.empty-a .icn { width:40px; height:40px; margin:0 auto 1rem; color:var(--slate-2); }

/* login */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:5vh 20px; background:var(--bg); }
.login-box { width:min(430px,100%); background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:2.4rem; box-shadow:var(--sh); }
.login-box img.logo { height:88px; margin:0 auto 1.4rem; }
.login-rule { height:6px; border-radius:3px; display:flex; overflow:hidden; margin-bottom:1.6rem; }
.login-rule i { flex:1; }

/* pagination */
.pager-a { display:flex; gap:.35rem; padding:1rem 1.3rem; border-top:1px solid var(--line); flex-wrap:wrap; align-items:center; }
.pager-a a,.pager-a span { min-width:36px; height:36px; padding:0 .6rem; border-radius:var(--r-s); display:grid; place-items:center; border:1px solid var(--line); font-size:.85rem; font-weight:600; }
.pager-a a:hover { border-color:var(--ink); }
.pager-a .on { background:var(--ink); border-color:var(--ink); color:#fff; }
.pager-a .info { border:0; margin-left:auto; color:var(--slate); font-weight:400; font-size:.82rem; }

/* message reader */
.msg-row.unread .td-title::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--pink); display:inline-block; margin-right:.5rem; vertical-align:middle; }
.msg-body { white-space:pre-wrap; background:var(--bg); border-radius:var(--r-s); padding:1rem; font-size:.92rem; }

.scrim-a { position:fixed; inset:0; background:rgba(14,26,43,.5); z-index:29; display:none; }
.scrim-a.open { display:block; }

@media (max-width:900px) {
  .shell { grid-template-columns:1fr; }
  .side { position:fixed; left:0; top:0; bottom:0; width:280px; z-index:30; transform:translateX(-101%); transition:transform .25s; height:100vh; }
  .side.open { transform:none; }
  .burger-a { display:grid; }
  .content { padding:1rem; }
  .top { padding:.75rem 1rem; }
}