/* Base UI compartilhada: drawers, dropdowns, utils (neutro ao seu styles.css) */

/* ===== Drawer padrão ===== */
.drawer{position:fixed; inset:0; display:none;}
.drawer.is-open{display:block;}
.drawer__overlay{position:absolute; inset:0; background:rgba(9,12,20,.35); backdrop-filter:saturate(120%) blur(2px);}
.drawer__panel{
  position:absolute; top:0; right:0; width:460px; max-width:92vw; height:100%;
  background:#fff; border-left:1px solid var(--line,#ececf3); box-shadow:0 10px 30px rgba(0,0,0,.12);
  display:flex; flex-direction:column;
}
.drawer__header{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 16px; border-bottom:1px solid var(--line,#ececf3);}
.drawer__body{padding:14px 16px; overflow:auto; flex:1;}
.drawer__footer{padding:12px 16px; border-top:1px solid var(--line,#ececf3); display:flex; justify-content:flex-end; gap:10px;}

.icon-btn{border:1px solid var(--line,#ececf3); background:#fff; height:32px; width:32px; border-radius:8px; display:grid; place-items:center;}

/* ===== Dropdown / Popover ===== */
.dd{position:relative; display:inline-block;}
.dd-menu{
  position:absolute; top:calc(100% + 8px); left:0; background:#fff; border:1px solid var(--line,#ececf3);
  border-radius:12px; box-shadow:0 8px 24px rgba(20,20,43,.14); padding:6px; min-width:210px; display:none; z-index:30;
}
.dd.is-open .dd-menu{display:block;}
.dd-item{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; cursor:pointer; color:#2b2f3b; text-decoration:none;}
.dd-item:hover{background:#f7f5ff; color:#6f4ef6}

/* ===== Pequenas utilidades ===== */
.btn{height:32px; border-radius:10px; border:1px solid var(--line,#ececf3); padding:0 12px; background:#fff; font-weight:600;}
.btn.primary{background:#6f4ef6; border-color:#6f4ef6; color:#fff;}
.btn.ghost{background:#fff;}
.chip{border:1px solid var(--line,#ececf3); border-radius:10px; height:32px; padding:0 10px; display:inline-flex; align-items:center; gap:6px; background:#fff;}
.input{height:34px; border:1px solid var(--line,#ececf3); border-radius:10px; padding:0 12px; width:100%; background:#fff;}
.select{position:relative;} .select select{appearance:none; -webkit-appearance:none; width:100%; height:34px; border:1px solid var(--line,#ececf3); border-radius:10px; padding:0 34px 0 12px; background:#fff;}
.muted{color:#8a90a3;}

/* Layout offsets esperados pelas páginas */
.page{margin-left:240px; padding-top:60px;}
@media (max-width:860px){ .page{margin-left:0} }