/* ================= Painel Administrativo — Âncora Artes ================= */
:root{
  --grad: linear-gradient(45deg,#0d9488,#f59e0b);
  --grad-soft: linear-gradient(45deg,rgba(13,148,136,.12),rgba(245,158,11,.12));
  --teal:#0d9488; --amber:#f59e0b;
  --page-bg: linear-gradient(45deg,#D3D3D3 0%,#6495ED 100%);
  --side-bg: linear-gradient(45deg,#000000 0%,#2F4F4F 100%);
  --card-bg:#ffffff;
  --text:#17322c; --muted:#5b6f69;
  --line:#e2e8e5; --chip:#f0f6f3; --chip-line:#d8e5df;
  --danger:#d92d20; --ok:#0d9488;
  --shadow: 0 10px 30px rgba(23,50,44,.10);
  --shadow-lg: 0 18px 50px rgba(23,50,44,.18);
}
html[data-theme="dark"]{
  --page-bg: linear-gradient(45deg,#000000 0%,#2F4F4F 100%);
  --side-bg: linear-gradient(45deg,#000000 0%,#2F4F4F 100%);
  --card-bg:#101d1a;
  --text:#e9f2ee; --muted:#9db3ac;
  --line:#223733; --chip:#14251f; --chip-line:#27403a;
  --danger:#ff6b5e; --ok:#2dd4bf;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:'Poppins',system-ui,'Segoe UI',Arial,sans-serif; color:var(--text); background:var(--page-bg); line-height:1.5}
img{max-width:100%}
a{color:inherit}
.hidden{display:none !important}
svg{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:linear-gradient(45deg,#D3D3D3 0%,#6495ED 100%)}
html[data-theme="dark"] .login-wrap{background:linear-gradient(45deg,#000000 0%,#2F4F4F 100%)}
.login-card{background:var(--card-bg); border-radius:22px; box-shadow:0 24px 60px rgba(0,0,0,.35); padding:34px 30px; width:min(400px,100%); text-align:center}
.login-logo{height:64px; margin:0 auto 16px}
.login-card h1{font-size:1.35rem; margin:0 0 4px}
.login-hint{color:var(--muted); font-size:.85rem; margin:0 0 20px}
.login-card label{display:block; text-align:left; font-size:.85rem; font-weight:600; margin-bottom:14px}
.login-card input{width:100%; margin-top:6px; padding:12px 14px; border-radius:12px; border:1.5px solid var(--chip-line); background:var(--chip); color:var(--text); font:inherit; outline:none}
.login-card input:focus{border-color:var(--teal)}
.login-error{color:var(--danger); font-size:.85rem; font-weight:600; margin:0 0 12px}
.back-site{display:inline-block; margin-top:16px; color:var(--teal); font-size:.88rem; font-weight:600; text-decoration:none}
.back-site:hover{text-decoration:underline}

/* ---------- Botões ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border-radius:13px; border:none; cursor:pointer; font:inherit; font-weight:600; font-size:.92rem; color:#fff; background:var(--grad); transition:transform .15s, filter .15s}
.btn:hover{transform:translateY(-2px); filter:brightness(1.06)}
.btn:disabled{opacity:.6; cursor:not-allowed; transform:none}
.btn.outline{background:transparent; color:var(--teal); border:2px solid var(--teal)}
.btn.danger{background:linear-gradient(45deg,#b91c1c,#ef4444)}
.btn.ghost{background:var(--chip); color:var(--text); border:1px solid var(--chip-line)}
.btn.block{width:100%}
.btn.sm{padding:8px 14px; font-size:.85rem; border-radius:11px}
.btn svg{width:16px; height:16px}
.icon-btn{width:38px; height:38px; border-radius:11px; border:1px solid var(--chip-line); background:var(--card-bg); color:var(--text); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; transition:background .2s}
.icon-btn:hover{background:var(--grad-soft)}
.icon-btn svg{width:17px; height:17px}

/* ---------- Layout do painel ---------- */
.panel{display:flex; min-height:100vh}
.sidebar{position:fixed; top:0; left:0; bottom:0; width:242px; background:var(--side-bg); color:#e9f2ee; display:flex; flex-direction:column; z-index:50; box-shadow:4px 0 24px rgba(0,0,0,.25)}
.side-head{padding:18px 18px 14px; border-bottom:1px solid rgba(255,255,255,.09)}
.side-head img{height:64px}
.side-nav{flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:4px}
.side-nav button{display:flex; align-items:center; gap:10px; width:100%; padding:11px 13px; border:none; border-radius:12px; background:transparent; color:#cfe0da; font:inherit; font-size:.9rem; font-weight:500; cursor:pointer; text-align:left; transition:background .2s, color .2s}
.side-nav button:hover{background:rgba(255,255,255,.08); color:#fff}
.side-nav button.active{background:var(--grad); color:#fff; font-weight:600}
.side-foot{padding:12px; border-top:1px solid rgba(255,255,255,.09); display:flex; flex-direction:column; gap:6px}
.side-link{display:flex; align-items:center; gap:10px; width:100%; padding:10px 13px; border:none; border-radius:12px; background:rgba(255,255,255,.06); color:#e9f2ee; font:inherit; font-size:.86rem; cursor:pointer; text-decoration:none; transition:background .2s}
.side-link:hover{background:rgba(255,255,255,.13)}
.side-link.danger{color:#ffb3ab}
.side-link.danger:hover{background:rgba(217,45,32,.18)}
.panel-main{flex:1; margin-left:242px; min-width:0; display:flex; flex-direction:column}
.panel-topbar{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:14px; padding:14px 26px; background:var(--card-bg); border-bottom:1px solid var(--line); box-shadow:0 4px 14px rgba(23,50,44,.06)}
.panel-topbar h1{font-size:1.15rem; margin:0; flex:1}
.whoami{font-size:.8rem; color:var(--muted); text-align:right; line-height:1.3}
.whoami strong{display:block; font-size:.88rem; color:var(--text)}
.burger{display:none}
.view-content{padding:24px 26px 48px}

/* ---------- Dashboard ---------- */
.dash-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin-bottom:28px}
.dash-card{background:var(--card-bg); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow); text-align:center}
.dash-card .num{font-size:1.9rem; font-weight:700; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1.15}
.dash-card .lbl{font-size:.76rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em}
.dash-card.accent{background:var(--grad); border:none}
.dash-card.accent .num{background:none; -webkit-text-fill-color:#fff; color:#fff}
.dash-card.accent .lbl{color:rgba(255,255,255,.85)}
.dash-section h3{font-size:1.02rem; margin:0 0 12px}

/* ---------- Tabelas / listas ---------- */
.list-card{background:var(--card-bg); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:auto}
table{width:100%; border-collapse:collapse; min-width:640px}
th{background:var(--grad-soft); text-align:left; padding:12px 14px; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); white-space:nowrap}
td{padding:12px 14px; border-top:1px solid var(--line); font-size:.88rem; vertical-align:top}
tbody tr:hover{background:var(--chip)}
.row-actions{display:flex; gap:6px; justify-content:flex-end}
.row-actions .icon-btn.edit:hover{background:rgba(13,148,136,.15)}
.row-actions .icon-btn.del:hover{background:rgba(217,45,32,.12); color:var(--danger)}
.code-tag{font-family:ui-monospace,'Cascadia Code',Consolas,monospace; font-weight:700; color:var(--teal)}
html[data-theme="dark"] .code-tag{color:var(--ok)}
.badge{display:inline-block; padding:4px 11px; border-radius:999px; font-size:.72rem; font-weight:600; white-space:nowrap}
.badge.ok{background:rgba(13,148,136,.15); color:var(--ok)}
.badge.off{background:rgba(120,120,120,.15); color:var(--muted)}
.badge.warn{background:rgba(245,158,11,.16); color:var(--amber)}
.badge.err{background:rgba(217,45,32,.12); color:var(--danger)}
.badge.info{background:rgba(79,70,229,.12); color:#4f46e5}
html[data-theme="dark"] .badge.info{color:#a5b4fc}
.toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.toolbar .count{font-size:.85rem; color:var(--muted)}
.list-empty{padding:34px; text-align:center; color:var(--muted)}

/* ---------- Modal ---------- */
.overlay{position:fixed; inset:0; background:rgba(5,15,12,.55); z-index:90}
.modal{position:fixed; inset:0; z-index:100; display:flex; align-items:flex-start; justify-content:center; padding:30px 14px; overflow-y:auto; pointer-events:none}
.modal-card{background:var(--card-bg); border-radius:18px; box-shadow:var(--shadow-lg); width:min(640px,100%); pointer-events:auto; border:1px solid var(--line)}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); background:var(--grad); color:#fff; border-radius:18px 18px 0 0}
.modal-head h3{margin:0; font-size:1.02rem}
.modal-head .icon-btn{background:rgba(255,255,255,.16); border-color:transparent; color:#fff}
.modal-body{padding:20px}
.form-field{margin-bottom:14px}
.form-field label{display:block; font-size:.85rem; font-weight:600; margin-bottom:6px}
.form-field input,.form-field select,.form-field textarea{width:100%; padding:11px 13px; border-radius:11px; border:1.5px solid var(--chip-line); background:var(--chip); color:var(--text); font:inherit; outline:none; transition:border-color .2s}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--teal)}
.form-field textarea{resize:vertical; min-height:90px}
.form-field small{color:var(--muted)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
.form-grid .full{grid-column:1/-1}
.modal-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:8px; flex-wrap:wrap}
fieldset{border:1.5px dashed var(--chip-line); border-radius:14px; padding:14px; margin:0 0 14px}
legend{font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--teal); padding:0 8px}
.var-line{display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap}
.var-line input{flex:1; min-width:110px}
.opt-line{display:flex; gap:8px; margin:0 0 8px 22px; flex-wrap:wrap}
.opt-line input:nth-child(1){flex:2; min-width:120px}
.opt-line input:nth-child(2){flex:1; min-width:80px}
.img-preview{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.img-preview .thumb{position:relative; width:74px; height:74px; border-radius:10px; overflow:hidden; border:1px solid var(--line)}
.img-preview .thumb img{width:100%; height:100%; object-fit:cover}
.img-preview .thumb button{position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:6px; border:none; background:rgba(0,0,0,.65); color:#fff; cursor:pointer; font-size:.7rem; line-height:1}

/* ---------- Logos do painel (sem fundo) ---------- */
.side-head .js-logo{display:inline-block}
.msg-card{background:var(--card-bg); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:18px; margin-bottom:16px}
.msg-head{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.msg-head .who{font-weight:600}
.msg-head .who small{display:block; color:var(--muted); font-weight:400}
.msg-subject{font-size:.8rem; margin-bottom:8px}
.msg-body{background:var(--chip); border-radius:12px; padding:12px 14px; font-size:.88rem; white-space:pre-wrap}
.msg-reply{margin-top:12px; border-left:4px solid var(--teal); padding:10px 14px; background:var(--grad-soft); border-radius:0 12px 12px 0; font-size:.86rem}
.msg-reply .rp-head{font-size:.75rem; color:var(--muted); margin-bottom:4px}
.msg-actions{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap}
.reply-box{margin-top:12px}
.reply-box textarea{margin-bottom:10px}
.signature-preview{font-size:.78rem; color:var(--muted); background:var(--chip); border-radius:10px; padding:10px 12px; white-space:pre-wrap; margin-top:8px}

/* ---------- Toast ---------- */
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--text); color:var(--card-bg); padding:12px 22px; border-radius:14px; font-size:.9rem; font-weight:500; z-index:200; opacity:0; transition:all .3s; box-shadow:var(--shadow-lg); max-width:90vw; text-align:center}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--danger); color:#fff}

/* ---------- Responsivo ---------- */
@media (max-width:520px){
  .login-logo{height:52px}
  .side-head img{height:40px}
}

@media (max-width:900px){
  .sidebar{transform:translateX(-100%); transition:transform .28s; width:260px}
  .sidebar.open{transform:translateX(0)}
  .panel-main{margin-left:0}
  .burger{display:inline-flex}
  .view-content{padding:18px 14px 40px}
  .panel-topbar{padding:12px 14px}
  .form-grid{grid-template-columns:1fr}
}