/* ==========================================================================
   Iris Painel — design system (hand-authored, sem dependência de build)
   Atitude Comunicação
   ========================================================================== */

:root{
  --bg:          #f1f5f9;   /* slate-100 */
  --surface:     #ffffff;
  --surface-2:   #f8fafc;   /* slate-50  */
  --border:      #e2e8f0;   /* slate-200 */
  --border-2:    #cbd5e1;   /* slate-300 */
  --text:        #0f172a;   /* slate-900 */
  --text-2:      #475569;   /* slate-600 */
  --text-3:      #94a3b8;   /* slate-400 */
  --sidebar:     #0f172a;   /* slate-900 */
  --sidebar-2:   #1e293b;   /* slate-800 */
  --accent:      #1925d2;   /* azul Atitude */
  --accent-700:  #141ea8;
  --accent-soft: #eef0ff;
  --green:       #16a34a;
  --green-soft:  #f0fdf4;
  --green-border:#bbf7d0;
  --red:         #dc2626;
  --red-soft:    #fef2f2;
  --red-border:  #fecaca;
  --amber:       #d97706;
  --amber-soft:  #fffbeb;
  --radius:      12px;
  --radius-sm:   8px;
  --shadow:      0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:   0 4px 12px rgba(15,23,42,.08);
  --sidebar-w:   248px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }

/* ===== Layout shell ===================================================== */
.app{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w);
  background:var(--sidebar);
  color:#cbd5e1;
  display:flex;
  flex-direction:column;
  position:fixed;
  inset:0 auto 0 0;
  z-index:40;
  transition:transform .2s ease;
}
.sidebar__brand{
  display:flex; align-items:center; gap:10px;
  padding:20px 20px 16px;
  color:#fff; font-weight:700; font-size:17px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.sidebar__brand .logo{
  width:30px;height:30px;border-radius:8px;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
}
.sidebar__nav{ padding:12px; display:flex; flex-direction:column; gap:2px; flex:1; }
.nav-link{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:var(--radius-sm);
  color:#cbd5e1; font-weight:500;
  transition:background .15s, color .15s;
}
.nav-link .ic{ width:20px; text-align:center; font-size:16px; }
.nav-link:hover{ background:var(--sidebar-2); color:#fff; }
.nav-link.is-active{ background:var(--accent); color:#fff; }
.nav-link.is-active:hover{ background:var(--accent-700); }
.sidebar__foot{
  padding:14px 16px; font-size:12px; color:#64748b;
  border-top:1px solid rgba(255,255,255,.07);
}

.content{ flex:1; margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-width:0; }

.topbar{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:0 24px; height:60px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:30;
}
.topbar__title{ font-size:18px; font-weight:600; }
.topbar__right{ display:flex; align-items:center; gap:14px; font-size:13px; color:var(--text-2); }
.topbar__user{ display:flex; align-items:center; gap:8px; }
.topbar__user .avatar{
  width:30px;height:30px;border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;
}
.hamburger{ display:none; background:none; border:0; font-size:22px; cursor:pointer; color:var(--text); }

.main{ padding:24px; max-width:1200px; width:100%; margin:0 auto; }

/* ===== Page header ===================================================== */
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.page-head h1{ font-size:22px; font-weight:600; margin:0 0 2px; }
.page-head .sub{ font-size:13px; color:var(--text-2); margin:0; }

/* ===== Buttons ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:var(--radius-sm);
  font-size:13px; font-weight:600; cursor:pointer;
  border:1px solid transparent; transition:background .15s, border .15s, color .15s;
  background:var(--accent); color:#fff;
}
.btn:hover{ background:var(--accent-700); }
.btn--ghost{ background:transparent; color:var(--text-2); border-color:var(--border-2); }
.btn--ghost:hover{ background:var(--surface-2); color:var(--text); }
.btn--sm{ padding:6px 10px; font-size:12px; }
.btn--danger{ background:var(--red); }
.btn--danger:hover{ background:#b91c1c; }
.btn--danger-ghost{ background:transparent; color:var(--red); border-color:var(--red-border); }
.btn--danger-ghost:hover{ background:var(--red-soft); color:#b91c1c; }

/* ===== Cards =========================================================== */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.card--pad{ padding:20px; }

/* grid helpers */
.grid{ display:grid; gap:16px; }
.grid--metrics{ grid-template-columns:repeat(4,1fr); }
.grid--posts{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1024px){ .grid--posts{ grid-template-columns:repeat(2,1fr); } .grid--metrics{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid--posts,.grid--metrics{ grid-template-columns:1fr; } }

/* ===== Metric tiles ==================================================== */
.metric{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px;
  position:relative; overflow:hidden;
}
.metric__top{ display:flex; align-items:center; justify-content:space-between; }
.metric__icon{
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;
  background:var(--accent-soft);
}
.metric__value{ font-size:30px; font-weight:700; line-height:1; color:var(--text); }
.metric__label{ font-size:13px; color:var(--text-2); }
.metric__hint{ font-size:12px; color:var(--text-3); }
.metric--green  .metric__icon{ background:var(--green-soft); }
.metric--red    .metric__icon{ background:var(--red-soft); }
.metric--amber  .metric__icon{ background:var(--amber-soft); }
.metric a.metric__link{ position:absolute; inset:0; }

/* ===== Post card (Hoje / Próximos) ===================================== */
.post-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:box-shadow .15s, transform .15s; display:flex; flex-direction:column; }
.post-card:hover{ box-shadow:var(--shadow-md); }
.post-card__media{ aspect-ratio:1/1; background:var(--surface-2); overflow:hidden; position:relative; }
.post-card__media img,.post-card__media video{ width:100%; height:100%; object-fit:cover; display:block; }
.post-card__placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:46px; color:var(--text-3); }
.post-card__body{ padding:12px 14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.post-card__meta{ display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--text-2); }
.post-card__time{ font-variant-numeric:tabular-nums; font-weight:600; }
.post-card__title{ font-size:14px; font-weight:500; color:var(--text); margin:0; }
.post-card__profile{ font-size:12px; color:var(--text-3); }
.post-card__actions{ display:flex; gap:8px; padding:0 14px 12px; }

/* ===== Badges ========================================================== */
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:2px 9px; border-radius:999px; border:1px solid var(--border-2); color:var(--text-2); background:var(--surface-2); }
.badge--green{ color:var(--green); background:var(--green-soft); border-color:var(--green-border); }
.badge--red{ color:var(--red); background:var(--red-soft); border-color:var(--red-border); }
.badge--accent{ color:var(--accent); background:var(--accent-soft); border-color:#c7ccff; }

/* ===== Tables ========================================================== */
.table-wrap{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
table.tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.tbl thead th{ text-align:left; padding:11px 16px; background:var(--surface-2); border-bottom:1px solid var(--border); font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-2); font-weight:600; }
.tbl tbody td{ padding:12px 16px; border-top:1px solid var(--border); vertical-align:middle; }
.tbl tbody tr:hover{ background:var(--surface-2); }
.tbl .num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.tbl .err-row td{ background:var(--red-soft); color:var(--red); font-size:12px; padding-top:8px; padding-bottom:8px; border-top:0; }

/* ===== Error / list cards (Em erro) ==================================== */
.err-item{ background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--red); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
.err-item__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.err-item__name{ font-weight:600; margin:0; }
.err-item__meta{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:4px; font-size:12px; color:var(--text-2); }
.err-item__reason{ background:var(--red-soft); border:1px solid var(--red-border); color:#b91c1c; font-size:13px; padding:8px 12px; border-radius:var(--radius-sm); margin-top:10px; }

/* ===== Empty state ===================================================== */
.empty{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:48px 24px; text-align:center; box-shadow:var(--shadow); }
.empty__icon{ font-size:42px; margin-bottom:8px; }
.empty__title{ font-weight:600; color:var(--text); }
.empty__sub{ font-size:13px; color:var(--text-2); margin-top:4px; }

/* ===== Alerts / flash ================================================== */
.alert{ border-radius:var(--radius-sm); padding:12px 16px; font-size:13px; margin-bottom:16px; border:1px solid; }
.alert--error{ background:var(--red-soft); border-color:var(--red-border); color:#b91c1c; }
.alert--ok{ background:var(--green-soft); border-color:var(--green-border); color:#15803d; }

/* ===== Section title (group by day) ==================================== */
.section-title{ font-size:15px; font-weight:600; color:var(--text); border-bottom:1px solid var(--border); padding-bottom:6px; margin:24px 0 12px; }
.section-title .count{ font-weight:400; color:var(--text-3); font-size:13px; margin-left:6px; }

/* ===== Forms =========================================================== */
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:13px; font-weight:500; color:var(--text); margin-bottom:5px; }
.field input,.field textarea{
  width:100%; padding:9px 12px; border:1px solid var(--border-2); border-radius:var(--radius-sm);
  font-size:14px; font-family:inherit; color:var(--text); background:#fff;
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.field textarea{ resize:vertical; min-height:90px; }
.field .hint{ font-size:12px; color:var(--text-3); margin-top:4px; }

/* ===== Modal =========================================================== */
.modal-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.5); display:none; align-items:center; justify-content:center; z-index:60; padding:16px; }
.modal-overlay.is-open{ display:flex; }
.modal{ background:#fff; border-radius:var(--radius); width:100%; max-width:480px; box-shadow:0 20px 50px rgba(15,23,42,.25); max-height:90vh; overflow:auto; }
.modal__head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border); }
.modal__head h3{ margin:0; font-size:16px; font-weight:600; }
.modal__close{ background:none; border:0; font-size:22px; line-height:1; cursor:pointer; color:var(--text-3); }
.modal__close:hover{ color:var(--text); }
.modal__body{ padding:20px; }
.modal__foot{ display:flex; justify-content:flex-end; gap:10px; padding:16px 20px; border-top:1px solid var(--border); background:var(--surface-2); }

/* ===== Footer note ===================================================== */
.foot-note{ font-size:12px; color:var(--text-3); text-align:center; margin:28px 0 8px; }

/* ===== Responsive (sidebar off-canvas) ================================= */
.scrim{ position:fixed; inset:0; background:rgba(15,23,42,.4); z-index:35; display:none; }
.scrim.is-open{ display:block; }
@media (max-width:880px){
  .sidebar{ transform:translateX(-100%); }
  .sidebar.is-open{ transform:translateX(0); }
  .content{ margin-left:0; }
  .hamburger{ display:block; }
}