/* App Braga v1.58.75 — Premium visual polish
   Camada segura: visual/UX, sem alterar lógica ou dados.
*/
:root{
  --premium-radius-xs: 12px;
  --premium-radius-sm: 16px;
  --premium-radius: 22px;
  --premium-radius-lg: 28px;
  --premium-gap: 16px;
  --premium-gap-lg: 22px;
  --premium-sidebar-w: 292px;
  --premium-sidebar-mini-w: 82px;
  --premium-success: #22c55e;
  --premium-warning: #f59e0b;
  --premium-danger: #ef4444;
  --premium-info: var(--app-primary, #38bdf8);
  --premium-glass: rgba(255,255,255,.065);
  --premium-glass-2: rgba(255,255,255,.035);
  --premium-line: var(--app-border, rgba(255,255,255,.12));
  --premium-text: var(--app-text, #f8fafc);
  --premium-muted: var(--app-muted, #a8b0bd);
  --premium-shadow: 0 18px 50px rgba(0,0,0,.24);
  --premium-shadow-soft: 0 10px 28px rgba(0,0,0,.16);
  --premium-transition: 180ms cubic-bezier(.2,.8,.2,1);
}

*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--app-primary,#ef4444) 55%, transparent) transparent;}
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-thumb{border-radius:999px;background:linear-gradient(180deg,var(--app-primary,#ef4444),var(--app-secondary,#f97316));border:2px solid transparent;background-clip:padding-box;}
*::-webkit-scrollbar-track{background:transparent;}

html{background:var(--app-bg-2,#101114);}
body{
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* ===== Sidebar Premium ===== */
.sidebar.sidebar-pro-groups,
.sidebar{
  width:var(--premium-sidebar-w) !important;
  background:
    radial-gradient(circle at 28% 0%, color-mix(in srgb, var(--app-primary,#ef4444) 18%, transparent), transparent 18rem),
    linear-gradient(180deg, rgba(16,17,20,.96), rgba(9,10,13,.98)) !important;
  border-right:1px solid color-mix(in srgb, var(--app-primary,#ef4444) 18%, rgba(255,255,255,.08)) !important;
  box-shadow:22px 0 70px rgba(0,0,0,.34) !important;
  backdrop-filter: blur(18px);
  transition:width var(--premium-transition), transform var(--premium-transition), box-shadow var(--premium-transition) !important;
  will-change: width, transform;
}

.sidebar .premium-brand,
.sidebar .brand{
  margin:12px !important;
  padding:14px !important;
  border-radius:24px !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--app-primary,#ef4444) 18%, transparent), color-mix(in srgb, var(--app-secondary,#f97316) 11%, transparent)),
    rgba(255,255,255,.055) !important;
  border:1px solid color-mix(in srgb, var(--app-primary,#ef4444) 22%, rgba(255,255,255,.08)) !important;
  box-shadow:0 14px 36px rgba(0,0,0,.22) !important;
}
.sidebar .brand h2{font-size:1.08rem !important;letter-spacing:-.02em;margin:0 !important;}
.sidebar .sidebar-brand-subtitle{color:var(--premium-muted) !important;font-weight:700;}
.sidebar .brand-badge{
  border-radius:18px !important;
  background:linear-gradient(135deg,var(--app-primary,#ef4444),var(--app-secondary,#f97316)) !important;
  box-shadow:0 14px 28px color-mix(in srgb, var(--app-primary,#ef4444) 25%, transparent) !important;
}
.sidebar .sidebar-collapse-toggle{
  width:34px !important;height:34px !important;border-radius:14px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.08) !important;color:var(--premium-text) !important;
  transition:transform var(--premium-transition), background var(--premium-transition) !important;
}
.sidebar .sidebar-collapse-toggle:hover{background:color-mix(in srgb, var(--app-primary,#ef4444) 24%, rgba(255,255,255,.06)) !important;transform:translateY(-1px);}

.sidebar .sidebar-nav-pro,
.sidebar nav{padding:6px 10px 16px !important;}
.sidebar .sidebar-section-title,
.sidebar .sidebar-group-toggle{
  min-height:44px !important;
  border-radius:18px !important;
  padding:0 12px !important;
  color:color-mix(in srgb, var(--premium-text) 86%, transparent) !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.075) !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
  transition:background var(--premium-transition), border-color var(--premium-transition), transform var(--premium-transition) !important;
}
.sidebar .sidebar-section-title{display:flex;align-items:center;gap:10px;margin:10px 0 8px;}
.sidebar .sidebar-section-title span,
.sidebar .sidebar-group-icon{font-size:18px !important;line-height:1 !important;display:inline-grid !important;place-items:center !important;width:24px !important;height:24px !important;background:transparent !important;box-shadow:none !important;}
.sidebar .sidebar-group-toggle:hover{background:rgba(255,255,255,.075) !important;border-color:color-mix(in srgb, var(--app-primary,#ef4444) 28%, rgba(255,255,255,.08)) !important;transform:translateY(-1px);}
.sidebar .sidebar-group-links{display:grid;gap:6px;padding:8px 0 10px 8px !important;}
.sidebar a,
.sidebar .sidebar-group-links a,
.sidebar .sidebar-favorites a{
  min-height:42px !important;
  display:flex !important;align-items:center !important;gap:12px !important;
  border-radius:16px !important;padding:0 12px !important;
  color:color-mix(in srgb, var(--premium-text) 80%, transparent) !important;
  background:transparent !important;border:1px solid transparent !important;
  text-decoration:none !important;font-weight:800 !important;
  transition:background var(--premium-transition), border-color var(--premium-transition), color var(--premium-transition), transform var(--premium-transition), box-shadow var(--premium-transition) !important;
}
.sidebar a::before{
  content:attr(data-icon);
  width:28px;height:28px;min-width:28px;
  display:grid;place-items:center;
  border-radius:12px;
  font-size:16px;line-height:1;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:none !important;
}
.sidebar a:hover{
  background:rgba(255,255,255,.072) !important;
  border-color:rgba(255,255,255,.10) !important;
  color:var(--premium-text) !important;
  transform:translateX(2px);
}
.sidebar a.active,
.sidebar a[aria-current="page"]{
  background:linear-gradient(135deg, color-mix(in srgb, var(--app-primary,#ef4444) 28%, transparent), color-mix(in srgb, var(--app-secondary,#f97316) 13%, transparent)) !important;
  border-color:color-mix(in srgb, var(--app-primary,#ef4444) 38%, rgba(255,255,255,.08)) !important;
  color:#fff !important;
  box-shadow:0 12px 30px color-mix(in srgb, var(--app-primary,#ef4444) 18%, transparent) !important;
}
.sidebar a.active::before{
  background:linear-gradient(135deg,var(--app-primary,#ef4444),var(--app-secondary,#f97316));
  border-color:transparent;color:#fff;
}
.sidebar .sidebar-group-chevron{transition:transform var(--premium-transition);}
.sidebar .sidebar-group-toggle[aria-expanded="true"] .sidebar-group-chevron{transform:rotate(90deg);}
.sidebar-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);margin:12px 8px !important;}

body.sidebar-collapsed .sidebar,
html.sidebar-collapsed .sidebar,
body.nav-collapsed .sidebar,
html.nav-collapsed .sidebar{
  width:var(--premium-sidebar-mini-w) !important;
}
body.sidebar-collapsed .sidebar .brand h2,
body.sidebar-collapsed .sidebar .sidebar-brand-subtitle,
body.sidebar-collapsed .sidebar .sidebar-link-text,
body.sidebar-collapsed .sidebar .sidebar-section-title strong,
body.sidebar-collapsed .sidebar .sidebar-group-left span:not(.sidebar-group-icon),
html.sidebar-collapsed .sidebar .brand h2,
html.sidebar-collapsed .sidebar .sidebar-brand-subtitle,
html.sidebar-collapsed .sidebar .sidebar-link-text,
html.sidebar-collapsed .sidebar .sidebar-section-title strong,
html.sidebar-collapsed .sidebar .sidebar-group-left span:not(.sidebar-group-icon){display:none !important;}
body.sidebar-collapsed .sidebar a,
html.sidebar-collapsed .sidebar a{justify-content:center !important;padding:0 !important;}
body.sidebar-collapsed .sidebar .sidebar-group-toggle,
html.sidebar-collapsed .sidebar .sidebar-group-toggle{justify-content:center !important;padding:0 !important;}

/* ===== Layout geral e cards modernos ===== */
.main,.main-content,.page-content,.content-area{
  transition:margin-left var(--premium-transition), width var(--premium-transition), padding var(--premium-transition) !important;
}
.card,.panel,.stat-card,.dashboard-card,.summary-card,.stock-card,.history-card,.pc-card,.printer-card,.network-card,.pistol-card,.radio-card,.info-card,.config-card,.config-section,.directory-card,.task-card,.team-card,.notification-card,.diagnostic-card,.equipment-extra-card,.equipment-extras-panel,.health-card,.config-backup-card{
  border-radius:var(--premium-radius) !important;
  background:
    linear-gradient(180deg, var(--premium-glass), var(--premium-glass-2)),
    color-mix(in srgb, var(--app-surface,#1c1c1e) 88%, transparent) !important;
  border:1px solid var(--premium-line) !important;
  box-shadow:var(--premium-shadow-soft) !important;
  color:var(--premium-text) !important;
  transition:transform var(--premium-transition), box-shadow var(--premium-transition), border-color var(--premium-transition), background var(--premium-transition) !important;
}
.card:hover,.panel:hover,.stat-card:hover,.printer-card:hover,.pc-card:hover,.pistol-card:hover,.radio-card:hover,.task-card:hover,.team-card:hover,.notification-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--app-primary,#ef4444) 24%, rgba(255,255,255,.10)) !important;
  box-shadow:var(--premium-shadow) !important;
}
.stat-card strong,.health-card strong{letter-spacing:-.035em;}
.stat-card span,.card small,.panel small,.muted,.subtitle{color:var(--premium-muted) !important;}

/* Botões, inputs, ações */
button,.primary-btn,.secondary-btn,.danger-btn,.btn,.action-btn,a.primary-btn,a.secondary-btn{
  border-radius:15px !important;
  min-height:40px;
  transition:transform var(--premium-transition), box-shadow var(--premium-transition), background var(--premium-transition), border-color var(--premium-transition), opacity var(--premium-transition) !important;
}
button:hover,.primary-btn:hover,.secondary-btn:hover,.btn:hover,.action-btn:hover{transform:translateY(-1px);}
button:active,.primary-btn:active,.secondary-btn:active,.btn:active,.action-btn:active{transform:translateY(0) scale(.985);}
.primary-btn,.btn-primary{
  background:linear-gradient(135deg,var(--app-primary,#ef4444),var(--app-secondary,#f97316)) !important;
  color:#fff !important;border:0 !important;
  box-shadow:0 12px 28px color-mix(in srgb, var(--app-primary,#ef4444) 20%, transparent) !important;
}
.secondary-btn,.btn-secondary{
  background:rgba(255,255,255,.075) !important;
  color:var(--premium-text) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  box-shadow:none !important;
}
.danger,.danger-btn,.danger-outline{--app-primary:#ef4444;--app-secondary:#f97316;}
.success,.success-outline{--app-primary:#22c55e;--app-secondary:#14b8a6;}
input,select,textarea{
  border-radius:15px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.065) !important;
  color:var(--premium-text) !important;
  transition:border-color var(--premium-transition), box-shadow var(--premium-transition), background var(--premium-transition) !important;
}
input:focus,select:focus,textarea:focus{
  border-color:color-mix(in srgb, var(--app-primary,#ef4444) 56%, rgba(255,255,255,.12)) !important;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--app-primary,#ef4444) 16%, transparent) !important;
  background:rgba(255,255,255,.085) !important;
}

/* Tabelas mais legíveis */
table{border-collapse:separate !important;border-spacing:0 8px !important;width:100%;}
thead th{color:var(--premium-muted) !important;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;border:0 !important;background:transparent !important;}
tbody tr{background:rgba(255,255,255,.045) !important;box-shadow:0 8px 22px rgba(0,0,0,.10);}
tbody td{border-top:1px solid rgba(255,255,255,.07) !important;border-bottom:1px solid rgba(255,255,255,.07) !important;color:var(--premium-text) !important;}
tbody td:first-child{border-left:1px solid rgba(255,255,255,.07) !important;border-radius:14px 0 0 14px;}
tbody td:last-child{border-right:1px solid rgba(255,255,255,.07) !important;border-radius:0 14px 14px 0;}

/* Estados globais */
.status-pill,.badge,.pill,.tag{
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.075) !important;
  color:var(--premium-text) !important;
  font-weight:850 !important;
}
.status-ok,.is-ok,.online,.success-pill{background:color-mix(in srgb, var(--premium-success) 18%, transparent) !important;border-color:color-mix(in srgb, var(--premium-success) 34%, transparent) !important;color:#bbf7d0 !important;}
.status-warn,.warning,.attention,.atencao{background:color-mix(in srgb, var(--premium-warning) 18%, transparent) !important;border-color:color-mix(in srgb, var(--premium-warning) 34%, transparent) !important;color:#fde68a !important;}
.status-error,.status-danger,.offline,.danger-pill{background:color-mix(in srgb, var(--premium-danger) 18%, transparent) !important;border-color:color-mix(in srgb, var(--premium-danger) 34%, transparent) !important;color:#fecaca !important;}

/* Modais premium */
.modal,.modal-overlay,[role="dialog"]{backdrop-filter:blur(12px);}
.modal-card,.modal-content,.dialog-card{
  border-radius:28px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045)), var(--app-surface,#1c1c1e) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 28px 80px rgba(0,0,0,.45) !important;
}

/* Loading/skeleton suave quando usado */
.loading,.skeleton{
  position:relative;overflow:hidden;background:rgba(255,255,255,.06) !important;border-radius:16px;
}
.loading::after,.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:premium-skeleton 1.35s infinite;}
@keyframes premium-skeleton{to{transform:translateX(100%);}}

/* iPhone premium / safe areas */
@supports (-webkit-touch-callout:none){
  body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);}
  .main,.main-content,.page-content,.content-area{
    padding-left:max(16px, env(safe-area-inset-left)) !important;
    padding-right:max(16px, env(safe-area-inset-right)) !important;
    padding-bottom:max(18px, env(safe-area-inset-bottom)) !important;
  }
  .modal-card,.modal-content{max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 26px) !important;overflow:auto;}
}
@media (max-width: 940px) and (orientation: landscape){
  .sidebar{width:var(--premium-sidebar-mini-w) !important;}
  .sidebar .brand h2,.sidebar .sidebar-brand-subtitle,.sidebar .sidebar-link-text,.sidebar .sidebar-section-title strong,.sidebar .sidebar-group-left span:not(.sidebar-group-icon){display:none !important;}
  .sidebar a{justify-content:center !important;padding:0 !important;}
  .main,.main-content,.page-content,.content-area,.dashboard-container{
    margin-left:var(--premium-sidebar-mini-w) !important;
    width:calc(100% - var(--premium-sidebar-mini-w)) !important;
    padding-top:max(10px, env(safe-area-inset-top)) !important;
    padding-left:max(14px, env(safe-area-inset-left)) !important;
    padding-right:max(14px, env(safe-area-inset-right)) !important;
  }
  .cards-grid,.stats-grid,.impressoras-grid,.computadores-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important;gap:12px !important;}
  .topbar,.premium-topbar{min-height:auto !important;padding:12px 14px !important;margin-bottom:12px !important;}
}
@media (max-width: 760px){
  .sidebar{box-shadow:20px 0 70px rgba(0,0,0,.45) !important;}
  .main,.main-content,.page-content,.content-area,.dashboard-container{padding:14px !important;}
  .card,.panel,.stat-card{border-radius:18px !important;}
  table{border-spacing:0 7px !important;font-size:.9rem;}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}