:root{
 --bg0:#020603;
 --bg1:#040905;
 --card:rgba(4,9,5,.82);
 --card2:rgba(4,9,5,.88);
 --stroke:rgba(31,122,55,.35);
 --text:#9dffb3;
 --muted:rgba(157,255,179,.72);
 --brand:#2cff74;
 --good:#2cff74;
 --warn:#ffd84d;
 --bad:#ff4d4d;
 --shadow: 0 20px 60px rgba(0,0,0,.55);
 --radius: 18px;
 --radius2: 14px;
 --pad: 18px;
 --sidebarW: 280px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
 margin:0;
 font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
 color:var(--text);
 background:
 radial-gradient(1200px 600px at 30% 10%, rgba(44,255,116,.10), transparent 60%),
 radial-gradient(900px 500px at 80% 20%, rgba(31,122,55,.12), transparent 55%),
 radial-gradient(800px 500px at 40% 95%, rgba(15,58,26,.12), transparent 55%),
 linear-gradient(180deg, var(--bg0), var(--bg1));
 overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.muted{color:var(--muted)}
/* ====== LAYOUT ====== */
.shell{
 display:grid;
 grid-template-columns: var(--sidebarW) 1fr;
 min-height:100vh;
}
.sidebar{
 position:sticky;
 top:0;
 height:100vh;
 padding:18px 14px;
 background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
 border-right:1px solid var(--stroke);
 backdrop-filter: blur(14px);
}
.content{
 min-width:0;
 padding: var(--pad);
}
.container{max-width:1160px;margin:0 auto}

/* ====== BRAND ====== */
.brand{
 display:flex; align-items:center; gap:12px;
 padding:10px 10px;
 border-radius: var(--radius2);
}
.logo{
 width:44px;height:44px;border-radius:14px;
 background:
 radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 55%),
 radial-gradient(circle at 35% 25%, #6aa0ff, #2a47ff 60%, #14216d);
 box-shadow: 0 18px 45px rgba(0,0,0,.55);
}
.brand-txt b{display:block;font-size:18px;letter-spacing:.2px}
.brand-txt small{display:block;color:var(--muted);margin-top:2px;font-size:12px}

/* ====== PROFILE ====== */
.profile{
 margin:10px 10px 14px;
 padding:12px 12px;
 border:1px solid rgba(255,255,255,.08);
 background: rgba(0,0,0,.14);
 border-radius: var(--radius2);
}
.profile-name{font-weight:700;font-size:13px}
.profile-email{margin-top:4px;color:var(--muted);font-size:12px;word-break:break-all}

/* ====== NAV ====== */
.nav{display:flex;flex-direction:column;gap:6px;padding:0 6px}
.nav a{
 display:flex;align-items:center;gap:10px;
 padding:10px 12px;
 border-radius: 14px;
 border:1px solid transparent;
 background: transparent;
 transition: transform .12s ease, background .12s ease, border-color .12s ease;
 opacity:.96;
}
.nav a:hover{
 background: rgba(255,255,255,.05);
 transform: translateX(2px);
}
.nav a.active{
 background: rgba(91,140,255,.16);
 border-color: rgba(91,140,255,.34);
}
.nav-ico{
 width:22px; height:22px;
 display:grid; place-items:center;
 background: rgba(255,255,255,.06);
 border:1px solid rgba(255,255,255,.10);
 border-radius: 10px;
 font-size:13px;
}
.nav-sep{height:1px;background:rgba(255,255,255,.10);margin:10px 10px}

/* ====== TOPBAR ====== */
.topbar{
 position:sticky; top: 12px;
 z-index: 20;
 display:flex; align-items:center; justify-content:space-between; gap:12px;
 padding:12px 12px;
 border-radius: calc(var(--radius) + 2px);
 border:1px solid var(--stroke);
 background: rgba(0,0,0,.20);
 backdrop-filter: blur(14px);
 box-shadow: 0 16px 50px rgba(0,0,0,.35);
}
.topbar-title{
 font-weight:800;
 letter-spacing:.2px;
 font-size:16px;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}
.topbar-right{font-size:12px}
/* Data/Hora do painel: um pouco maior para melhor visibilidade */
.topbar-datetime{
 font-size:14px;
 font-weight:700;
 letter-spacing:.4px;
}
.iconbtn{
 display:none;
 border:1px solid rgba(255,255,255,.12);
 background: rgba(255,255,255,.06);
 color: var(--text);
 /* No celular, o símbolo ☰ pode sumir em alguns aparelhos.
    Então desenhamos o ícone (3 risquinhos) via CSS, sem mudar estrutura. */
 font-size:0;                 /* esconde o caractere e evita “emoji” */
 width:44px;
 height:44px;
 padding:0;
 border-radius: 999px;
 align-items:center;
 justify-content:center;
 cursor:pointer;
 position:relative;
}
.iconbtn::before{
 content:"";
 width:18px;
 height:14px;
 display:block;
 background:
  linear-gradient(var(--text), var(--text)) 0 0/100% 2px no-repeat,
  linear-gradient(var(--text), var(--text)) 0 50%/100% 2px no-repeat,
  linear-gradient(var(--text), var(--text)) 0 100%/100% 2px no-repeat;
 opacity:.95;
}
.iconbtn:hover{background: rgba(255,255,255,.09)}

/* ====== MAIN ====== */
.main{padding-top: 14px}
.card{
 border:1px solid var(--stroke);
 background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 padding: 14px;
}
.grid{display:grid;gap:12px}
.grid.cols-4{grid-template-columns:repeat(4, minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width: 1120px){
 .grid.cols-4{grid-template-columns:repeat(2, minmax(0,1fr))}
 :root{
 --bg0:#020603;
 --bg1:#040905;
 --card:rgba(4,9,5,.82);
 --card2:rgba(4,9,5,.88);
 --stroke:rgba(31,122,55,.35);
 --text:#9dffb3;
 --muted:rgba(157,255,179,.72);
 --brand:#2cff74;
 --good:#2cff74;
 --warn:#ffd84d;
 --bad:#ff4d4d;
 --shadow: 0 20px 60px rgba(0,0,0,.55);
 --radius: 18px;
 --radius2: 14px;
 --pad: 18px;
 --sidebarW: 280px;
}
}
@media (max-width: 820px){
 .grid.cols-3{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 560px){
 .grid.cols-2, .grid.cols-3, .grid.cols-4{grid-template-columns:1fr}
}

/* ====== TABLES / FORMS ====== */
table{width:100%;border-collapse:collapse}
th,td{padding:10px 10px;border-bottom:1px solid rgba(255,255,255,.10);text-align:left;font-size:13px}
th{color:var(--muted);font-weight:700}
input,select,textarea{
 width:100%;
 padding:10px 12px;
 border-radius: 14px;
 border:1px solid rgba(255,255,255,.12);
 background: rgba(0,0,0,.20);
 color: var(--text);
 outline:none;
}
label{display:block;margin:10px 0 6px;color:var(--muted);font-size:13px}
.btn{
 display:inline-flex; align-items:center; justify-content:center; gap:8px;
 padding:10px 12px;
 border-radius: 14px;
 border:1px solid rgba(255,255,255,.12);
 background: rgba(255,255,255,.06);
 color: var(--text);
 cursor:pointer;
}
.btn:hover{background: rgba(255,255,255,.09)}
.btn.primary{border-color:rgba(91,140,255,.40);background:rgba(91,140,255,.18)}
.btn.secondary{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06)}

/* ====== DRAWER MOBILE (sidebar off-canvas) ====== */
.overlay{
 position:fixed;
 inset:0;
 background: rgba(0,0,0,.55);
 opacity:0;
 pointer-events:none;
 transition: opacity .18s ease;
 z-index: 50;
}
@media (max-width: 980px){
 .shell{grid-template-columns: 1fr;}
 .iconbtn{display:inline-flex}
 .sidebar{
 position:fixed;
 top:0; left:0;
 width:min(86vw, 320px);
 height:100vh;
 transform: translateX(-105%);
 transition: transform .18s ease;
 z-index: 60;
 box-shadow: 0 40px 100px rgba(0,0,0,.75);
 border-right:1px solid rgba(255,255,255,.12);
 }
 body.sidebar-open .sidebar{transform: translateX(0)}
 body.sidebar-open .overlay{opacity:1;pointer-events:auto}
 .content{padding: 12px;}
 .topbar{top: 8px;}
}

/* ====== TELAS GRANDES / BIG SCREENS ====== */
@media (min-width: 1600px){
 body{font-size:16px}
 .topbar-title{font-size:18px}
 .nav a{padding:12px 14px}
 .card{padding:18px}
 :root{
 --bg0:#020603;
 --bg1:#040905;
 --card:rgba(4,9,5,.82);
 --card2:rgba(4,9,5,.88);
 --stroke:rgba(31,122,55,.35);
 --text:#9dffb3;
 --muted:rgba(157,255,179,.72);
 --brand:#2cff74;
 --good:#2cff74;
 --warn:#ffd84d;
 --bad:#ff4d4d;
 --shadow: 0 20px 60px rgba(0,0,0,.55);
 --radius: 18px;
 --radius2: 14px;
 --pad: 18px;
 --sidebarW: 280px;
}
}
@media (min-width: 1920px){
 .topbar-title{font-size:20px}
 .nav-ico{width:24px;height:24px;font-size:14px}
}


.btn.btn-ghost{background:transparent;border-color:rgba(255,255,255,.14)}
.btn.btn-ghost:hover{background:rgba(255,255,255,.06)}


/* ====== DASHBOARD (USER) ====== */
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:6px 0 14px}
.pagehead h1{margin:0;font-size:22px;letter-spacing:.2px}
.pagehead p{margin:6px 0 0}
.pagehead-right{display:flex;gap:10px;flex-wrap:wrap}

.section{margin-top:12px}

.kpi{padding:14px}
.kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.kpi-label{color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.kpi-ico{opacity:.9}
.kpi-value{font-size:22px;font-weight:900;letter-spacing:.2px}
.kpi-sub{margin-top:6px;font-size:12px}

.card-head{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.card-head h2{margin:0;font-size:16px}
.actions{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:10px}
@media (max-width: 820px){.actions{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width: 420px){.actions{grid-template-columns:1fr}}

.copyrow{display:flex;gap:10px;align-items:center}
.copyrow input{flex:1}

.divider{height:1px;background:rgba(255,255,255,.10);margin:14px 0}

.mini{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mini-title{font-weight:800}
.mini-sub{font-size:12px;margin-top:2px}


/* Dashboard grids (admin/user) */
.dash-wrap{display:flex;flex-direction:column;gap:16px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.kpi-grid{grid-template-columns:1fr;}}
.kpi{
 background: var(--card2);
 border:1px solid var(--stroke);
 border-radius: var(--radius2);
 box-shadow: 0 8px 22px rgba(0,0,0,.25);
 padding:16px;
 color: var(--text);
 min-height:96px;
}
.kpi .label{font-size:12px;letter-spacing:.3px;text-transform:uppercase;color:var(--muted)}
.kpi .value{font-size:28px;font-weight:800;margin-top:8px;line-height:1}
.kpi .sub{margin-top:10px;color:var(--muted);font-size:13px}
.kpi.primary{outline:1px solid rgba(91,140,255,.25)}
.kpi.success{outline:1px solid rgba(59,209,127,.22)}
.kpi.warn{outline:1px solid rgba(255,176,32,.22)}
.kpi.danger{outline:1px solid rgba(255,91,122,.22)}
.table-card{
 background: var(--card);
 border:1px solid var(--stroke);
 border-radius: var(--radius);
 padding: 14px;
}
.table-card .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.table-card .title{font-weight:800}
.table-card table{width:100%;border-collapse:collapse}
.table-card th,.table-card td{padding:10px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left;font-size:14px;color:var(--text)}
.table-card th{color:var(--muted);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.3px}


/* ====== BACKGROUND IMAGES (ADMIN/USER) ====== */
body.role-user{
 background-image:
 radial-gradient(1200px 600px at 30% 10%, rgba(91,140,255,.18), transparent 60%),
 radial-gradient(900px 520px at 75% 30%, rgba(59,209,127,.12), transparent 60%),
 linear-gradient(180deg, var(--bg1), var(--bg0)),
 url('/assets/bg.jpg');
 background-size:auto,auto,auto,cover;
 background-position:center,center,center,center;
 background-attachment:scroll,scroll,scroll,fixed;
}
body.role-admin{
 background-image:
 radial-gradient(1200px 600px at 30% 10%, rgba(91,140,255,.18), transparent 60%),
 radial-gradient(900px 520px at 75% 30%, rgba(59,209,127,.12), transparent 60%),
 linear-gradient(180deg, var(--bg1), var(--bg0)),
 url('/assets/bg.jpg');
 background-size:auto,auto,auto,cover;
 background-position:center,center,center,center;
 background-attachment:scroll,scroll,scroll,fixed;
}


/* === Fundo configurável (Admin/Usuário) === */
/* Se os arquivos existirem, eles serão usados automaticamente */
body.role-admin{
 background-image:
 linear-gradient(180deg,rgba(7,10,18,.82),rgba(11,18,32,.88)),
 url('/assets/bg.jpg');
 background-size: cover;
 background-position: center;
 background-attachment: fixed;
}
body.role-user{
 background-image:
 linear-gradient(180deg,rgba(7,10,18,.82),rgba(11,18,32,.88)),
 url('/assets/bg.jpg');
 background-size: cover;
 background-position: center;
 background-attachment: fixed;
}


/* FIX: aplicar fundo também no modo público (login/register) */
body.is-public{
 background-image: url('/assets/bg.jpg') !important;
 background-size: cover !important;
 background-position: center !important;
 background-attachment: fixed !important;
}

/* Fundo do Site Público (Sipriano) */
body.is-public{
 background-size: cover !important;
 background-position: center !important;
 background-attachment: fixed !important;
}

/* Fundo do Site Público (Sipriano) */
body.is-public{
 background-image: url('/assets/img/backgrounds/site-bg.png') !important;
 background-size: cover !important;
 background-position: center !important;
 background-attachment: fixed !important;
}


/* icons PNG no menu (evita problemas de emoji/encoding) */
.nav-ico img{width:14px;height:14px;display:block;}
/* ===== SIPRIANO_REAL_SIDEBAR_SCROLL =====
   Sidebar admin: rolagem quando menu ultrapassa a altura da tela.
   Seletor confirmado: <aside class='sidebar' id='sidebar'> (src/pages/_layout.php)
*/
#sidebar {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
/* ===== END FIX ===== */


/* Ajustes visuais de acabamento */
.card{transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.card:hover{transform:translateY(-1px);box-shadow:0 22px 60px rgba(0,0,0,.42)}
input:focus,select:focus,textarea:focus{border-color:rgba(44,255,116,.45);box-shadow:0 0 0 3px rgba(44,255,116,.10)}
.btn{font-weight:800;transition:transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.table-wrap{scrollbar-width:thin;scrollbar-color:rgba(201,168,95,.45) rgba(255,255,255,.06)}
.table-wrap::-webkit-scrollbar{height:10px;width:10px}
.table-wrap::-webkit-scrollbar-thumb{background:rgba(201,168,95,.45);border-radius:999px}
.table-wrap::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}