/* Global Skyve theme variables and basic utilities */
:root{
  --skyve-primary: #1E90FF; /* Deep Sky Blue - Cor principal Skyve */
  --skyve-primary-700: #0077CC;
  /* Common palette */
  --brand: var(--skyve-primary);
  --brand-700: var(--skyve-primary-700);
  --accent: var(--skyve-primary);
  --accent-700: var(--skyve-primary-700);
  --light: #ffffff;
  --muted: #6b7a89;
  --card-bg: #f7f9fc;
  --bg-light: #f5f7fa;
  --success: #28a745;
  --warning: #ffc107;
  --danger: #dc3545;
  --bg: #ffffff;
  --panel-bg: #ffffff;
  --text: #0b1b2b;
  --muted: #6b7a89;
  --surface: #f7f9fc;
  --accent: var(--skyve-primary);
  --glass: rgba(30,144,255,0.1);
}

html.dark, body.dark{
  --bg: #071226;
  --panel-bg: #071a2b;
  --text: #e6f0fb;
  --muted: #9fb1c8;
  --surface: #071a2b;
  --glass: rgba(30,144,255,0.08);
}

body{
  background: linear-gradient(180deg,var(--bg),var(--surface));
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(90deg,var(--skyve-primary),#00BFFF);color:#fff;box-shadow:0 4px 12px rgba(30,144,255,0.3)}
.brand{font-weight:700;font-size:1.1rem}
.layout{display:flex;gap:18px;padding:18px}
.sidebar{width:220px}
.main-content{flex:1}
.panel{background:var(--panel-bg);border-radius:10px;padding:16px;box-shadow:0 6px 18px rgba(30,144,255,0.08)}

.icon-img{width:20px;height:20px;vertical-align:middle;margin-right:8px;opacity:0.95}
.icon-btn{background:none;border:0;color:inherit;cursor:pointer;padding:6px;margin-left:6px}

/* Icon button hover + tooltip */
.icon-btn{position:relative}
.icon-btn:hover{background:rgba(255,255,255,0.06);border-radius:8px}
.icon-btn[title]:hover::after{content:attr(title);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:rgba(11,27,43,0.95);color:#fff;padding:6px 8px;border-radius:6px;font-size:12px;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,0.2);z-index:40}

/* small badge */
.badge{display:inline-block;min-width:18px;padding:2px 6px;border-radius:12px;background:var(--brand);color:#fff;font-size:12px;line-height:18px;text-align:center;margin-left:-10px;margin-top:-8px;position:relative}

.btn{background:var(--accent);color:#fff;border:0;padding:8px 12px;border-radius:6px;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06)}

.metrics-compact .m-card{background:var(--surface);padding:8px;border-radius:8px;margin-bottom:8px}

/* small responsive tweaks */
@media (max-width:800px){.layout{flex-direction:column}.sidebar{width:100%}}
/* small responsive tweaks */
@media (max-width:800px){
  .layout{flex-direction:column}
  .sidebar{width:100%}
}