:root {
    --primary: #00f2ff;
    --secondary: #bd00ff;
    --bg-dark: #09090b;
    --glass: rgba(20, 25, 35, 0.9);
    --border: rgba(255, 255, 255, 0.1);
    --text: #ffffff;
    --open: #ff3366; --sent: #00c6ff; --resolved: #00f260;
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins', sans-serif; }
body { background: var(--bg-dark); color: var(--text); height:100vh; overflow:hidden; 
       background-image: radial-gradient(circle at top right, rgba(189,0,255,0.1), transparent 50%); }

.hidden { display:none !important; }
.p-20 { padding:20px; } .mt-2 { margin-top:15px; } .mb-4 { margin-bottom:20px; }

/* BOTOES E PAINEIS */
.btn-gradient { background: linear-gradient(90deg, var(--secondary), var(--primary)); border:none; padding:10px 20px; color:#fff; font-weight:bold; border-radius:6px; cursor:pointer; transition:0.3s; width:100%; }
.btn-gradient:hover { filter:brightness(1.2); box-shadow:0 0 15px rgba(0, 242, 255, 0.3); }
.btn-small { background:rgba(255,255,255,0.1); border:1px solid var(--border); color:#fff; padding:6px 12px; border-radius:4px; cursor:pointer; }
.btn-icon { background:none; border:none; color:#aaa; cursor:pointer; font-size:1.1rem; transition:0.2s; }
.btn-icon:hover { color:var(--primary); transform:scale(1.1); }
.glass-panel { background:var(--glass); backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.5); }

/* INPUTS */
input, select, textarea { width:100%; background:rgba(0,0,0,0.3); border:1px solid var(--border); color:#fff; padding:10px; border-radius:6px; margin-top:5px; outline:none; }
input:focus, select:focus { border-color:var(--primary); }

/* LOGIN */
#login-screen { height:100vh; display:flex; justify-content:center; align-items:center; }
.login-box { width:400px; padding:40px; text-align:center; }
.input-group { text-align:left; margin-bottom:15px; }

/* APP LAYOUT */
#app-screen { display:flex; height:100vh; }
.sidebar { width:260px; background:#050505; border-right:1px solid var(--border); display:flex; flex-direction:column; padding:20px; transition:0.3s; }
.sidebar-header { font-size:1.5rem; font-weight:bold; margin-bottom:30px; color:#fff; }
.sidebar-header span { color:var(--primary); }
.menu li { list-style:none; padding:12px; cursor:pointer; color:#888; display:flex; gap:10px; align-items:center; border-radius:8px; margin-bottom:5px; }
.menu li:hover, .menu li.active { background:rgba(255,255,255,0.05); color:var(--primary); }

.content { flex:1; padding:20px; overflow-y:auto; }
header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.header-left { display:flex; align-items:center; gap:15px; }
#sidebar-btn { display:none; background:none; border:none; color:#fff; font-size:1.5rem; }

.avatar-circle { width:40px; height:40px; border-radius:50%; overflow:hidden; border:2px solid var(--primary); display:flex; justify-content:center; align-items:center; }
.avatar-circle img { width:100%; height:100%; object-fit:cover; }

/* KPI */
.kpi-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:15px; margin-bottom:20px; }
.kpi-card { padding:15px; cursor:pointer; border-bottom:3px solid transparent; }
.kpi-card.open { border-color:var(--open); } .kpi-card.sent { border-color:var(--sent); } .kpi-card.resolved { border-color:var(--resolved); }
.kpi-val { font-size:2rem; font-weight:bold; }

/* TABLE */
.table-scroll { overflow-x:auto; margin-top:15px; }
table { width:100%; border-collapse:collapse; min-width:900px; }
th { text-align:left; color:#888; padding:10px; font-size:0.8rem; text-transform:uppercase; border-bottom:1px solid var(--border); }
td { padding:10px; border-bottom:1px solid rgba(255,255,255,0.05); font-size:0.85rem; vertical-align:middle; }
.badge { padding:3px 8px; border-radius:4px; font-size:0.7rem; font-weight:bold; }
.badge.Aberto { background:rgba(255, 51, 102, 0.2); color:var(--open); }
.badge.Resolvida { background:rgba(0, 242, 96, 0.2); color:var(--resolved); }
.badge-sim { color:var(--resolved); font-weight:bold; } .badge-nao { color:var(--open); font-weight:bold; }

/* MODAL */
.modal { position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:2000; display:flex; justify-content:center; align-items:center; }
.modal-content { width:600px; max-width:95%; max-height:90vh; overflow-y:auto; padding:30px; position:relative; }
.close-modal { position:absolute; top:15px; right:20px; font-size:1.5rem; cursor:pointer; }
.profile-pic-container { width:100px; height:100px; margin:0 auto; border-radius:50%; overflow:hidden; border:2px solid var(--primary); position:relative; }
.profile-pic-container img { width:100%; height:100%; object-fit:cover; display:none; }
.profile-pic-container i { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:3rem; color:#fff; }

/* LOADER */
#loading { position:fixed; inset:0; background:#000; z-index:9999; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.loader-content { width:80px; height:80px; position:relative; animation:spin 2s linear infinite; }
.circle-line { position:absolute; border-radius:50%; border:2px solid transparent; }
.c1 { inset:0; border-top-color:var(--primary); animation:spin 1s reverse infinite; }
.c2 { inset:10px; border-left-color:var(--secondary); animation:spin 1.5s linear infinite; }
.c3 { inset:20px; border-bottom-color:#fff; animation:spin 3s linear infinite; }
.loader-text { margin-top:20px; color:var(--primary); font-family:monospace; letter-spacing:2px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* RESPONSIVE */
@media(max-width:768px) {
    .sidebar { position:fixed; left:-100%; height:100%; z-index:1000; width:80%; }
    .sidebar.active { left:0; }
    #sidebar-btn { display:block; }
    .mobile-only { display:block; }
    .kpi-grid { grid-template-columns:1fr; }
    .form-grid { grid-template-columns:1fr; }
}
@media print {
    body * { visibility:hidden; }
    #modal-details, #modal-details * { visibility:visible; }
    #modal-details { position:absolute; inset:0; background:#fff !important; color:#000 !important; border:none; }
    .close-modal, button { display:none !important; }
}