/* Component styles — tokens in tokens.css */

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 13.5px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }
.mobile-only { display: none; }

.login { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--bg); }
.login.hidden { display: none !important; }
.login-card { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent-solid); border-radius: var(--r-lg); padding: 24px 22px; box-shadow: none; }
.login-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 22px; }
.login-logo { width: 168px; height: auto; display: block; background: #050505; border-radius: 4px; padding: 12px 14px; }
.login-sub { font-size: 11px; letter-spacing: .04em; color: var(--text-3); font-weight: 500; }
.login-panel h2 { font-family: var(--font-disp); font-size: 16px; font-weight: 600; margin: 0 0 14px; text-align: left; }
.login-form label { display: block; font-size: 11px; color: var(--text-2); margin: 12px 0 6px; font-weight: 500; }
.login-form input { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 11px; color: var(--text); font-family: var(--font-body); font-size: 13.5px; outline: none; }
.login-form input:focus { border-color: var(--accent-solid); box-shadow: none; }
.login-panel > p { color: var(--text-2); line-height: 1.5; margin: 0 0 8px; text-align: left; font-size: 12px; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 42px; }
.password-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-3); cursor: pointer; display: grid; place-items: center; padding: 0; }
.password-toggle:hover { color: var(--text); background: var(--surface-3); }
.password-toggle .ph { display: block; }
.login-forgot-link { display: block; width: 100%; margin-top: 10px; border: 0; background: transparent; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; padding: 6px 0; }
.login-forgot-link:hover { color: var(--accent-hover); text-decoration: underline; }
.login-meta { margin: 20px 0 0; width: 100%; text-align: center; color: var(--text-3); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-family: var(--font-mono); }
.form-error { color: var(--crit); min-height: 20px; margin-top: 12px; font-size: 13px; }
.form-error.form-success { color: var(--ok); }

.ph { line-height: 1; flex: none; display: inline-flex; align-items: center; justify-content: center; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 236px 1fr; }
.main-wrap { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--surface); padding: 14px 10px; z-index: 20; gap: 2px; }
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; min-width: 0; }
.logo-mark { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: #050505; border-radius: 4px; padding: 2px; overflow: hidden; }
.logo-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-txt b { font-family: var(--font-disp); font-weight: 600; font-size: 14.5px; display: block; line-height: 1.15; letter-spacing: 0; }
.brand-txt span { font-size: 11px; color: var(--text-3); letter-spacing: .02em; }

.topbar { display: flex; align-items: center; gap: 16px; padding: 18px 22px 16px; margin-bottom: 0; position: sticky; top: 0; z-index: 25; background: var(--bg); }
.page-h { min-width: 0; }
.page-h h1 { font-family: var(--font-disp); font-size: 20px; font-weight: 600; letter-spacing: 0; margin: 0; }
.page-h p { color: var(--text-3); font-size: 12.5px; margin: 2px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; min-width: 0; }

.search { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; width: 260px; color: var(--text-3); position: relative; }
.search input { background: none; border: none; outline: none; color: var(--text); font-family: var(--font-body); font-size: 13px; width: 100%; min-width: 0; }
.search .ph { font-size: 15px; }
.search kbd { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; white-space: nowrap; }

.pill { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); white-space: nowrap; color: var(--text); }
.pill:hover { border-color: var(--accent-line); background: var(--surface-2); }
.pill .ph { font-size: 15px; opacity: .85; }
.pill:disabled { opacity: .55; cursor: wait; }

.user-box { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border-soft); margin-bottom: 10px; }
.avatar { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; font-family: var(--font-disp); font-weight: 700; font-size: 11.5px; color: var(--accent-ink); background: linear-gradient(135deg, var(--brand-400, #3d9fd4), var(--brand-600, #1f5f8b)); }
.user-info { min-width: 0; flex: 1; }
.user-info b { font-size: 12.5px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-info small { color: var(--text-3); font-size: 10.5px; display: block; }
.mini-btn { background: none; border: 1px solid var(--border); color: var(--text-2); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; display: inline-grid; place-items: center; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); padding: 0; }
.mini-btn:hover { background: var(--surface-2); color: var(--accent); border-color: var(--accent-line); }
.mini-btn .ph { font-size: 14px; }
.ver { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); text-align: center; }

#globalSyncState { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.sidebar nav { display: grid; gap: 0; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--text-2); padding: 7px 14px; border-radius: 0; border-left: 2px solid transparent; cursor: pointer; text-align: left; font-size: 13px; font-weight: 500; transition: background var(--dur-fast), color var(--dur-fast); }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: transparent; color: var(--text); border-left-color: var(--accent-solid); box-shadow: none; }
.nav-item.active .nav-icon { color: var(--accent); }
.nav-item > span:first-child,
.nav-item .nav-icon { width: 18px; height: 18px; display: grid; place-items: center; flex: 0 0 18px; color: inherit; overflow: visible; line-height: 0; }
.nav-item .nav-icon .ph { font-size: 16px; opacity: .85; }
.nav-item b { margin-left: auto; min-width: 20px; text-align: center; color: var(--muted); background: var(--surface-2); padding: 1px 5px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 600; border: 1px solid var(--border); }
.nav-group-label { color: var(--text-3); font-size: 11px; font-weight: 500; letter-spacing: 0; padding: 12px 14px 4px; }
.nav-dot.client { background: var(--purple); box-shadow: none; }
.nav-dot.internal { background: var(--green); box-shadow: none; }
.nav-dot.unclassified { background: var(--orange); box-shadow: none; }
.nav-dot { width: 8px !important; height: 8px; border-radius: 50%; display: inline-block; }
.nav-icon-client { color: var(--purple); }
.nav-icon-internal { color: var(--green); }
.nav-icon-unclassified { color: var(--orange); }

.main-content { min-width: 0; padding: 0 22px 32px; flex: 1; }
.page-actions-bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.page-header h1 { font-size: 20px; margin: 0; letter-spacing: -.01em; font-weight: 600; }
.page-header p { color: var(--muted); margin: 4px 0 0; font-size: 12px; }
.page-header-branded { min-height: 64px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: none; }
.page-brand-title { display: flex; align-items: center; gap: 16px; min-width: 0; }
.page-brand-title img { width: 148px; max-height: 46px; object-fit: contain; object-position: left center; flex: 0 0 auto; }
.page-brand-title > div { min-width: 0; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.button { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 14px; cursor: pointer; font-weight: 600; font-size: 13px; transition: background var(--dur-fast), border-color var(--dur-fast); background: var(--surface-2); color: var(--text); }
.button:hover { border-color: var(--accent-line); }
.button:disabled { opacity: .55; cursor: wait; }
.button.primary { color: var(--accent-ink); background: var(--accent-solid); border-color: var(--accent-solid); box-shadow: none; }
.button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button.secondary { background: var(--surface); color: var(--text); }
.button.danger { background: rgba(212, 90, 90, .12); color: var(--crit); border-color: rgba(212, 90, 90, .28); }
.button.ghost { background: transparent; color: var(--text-2); border-color: transparent; }
.button.wide { width: 100%; margin-top: 16px; padding: 11px 12px; }
.button-with-icon { display: inline-flex; align-items: center; gap: 7px; }
.button-with-icon .btn-icon { flex: 0 0 auto; }
.icon-button { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface); cursor: pointer; color: var(--text-2); transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.icon-button:hover { background: var(--surface-2); color: var(--accent); border-color: var(--accent-line); }
.icon-button .ph { display: block; }

.overview-stats { display: grid; gap: 14px; margin-bottom: 14px; }
.stats-group { min-width: 0; }
.stats-group-label { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 8px 2px; }
.stats-group-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 14px; align-items: start; }
.stats-grid { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 12px; margin-bottom: 14px; }
.overview-stats .stats-grid { margin-bottom: 0; }
.stats-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border-soft); border-radius: var(--r-lg); background: var(--surface); padding: 14px; min-height: 92px; box-shadow: var(--shadow-sm); transition: border-color var(--dur-fast); }
.stat-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent-solid); opacity: 1; }
.stat-card.clickable { cursor: pointer; }
.stat-card.clickable:hover { border-color: var(--accent-line); }
.stat-label { color: var(--text-2); font-size: 11.5px; font-weight: 500; }
.stat-value { display: block; font-family: var(--font-mono); font-size: 22px; font-weight: 500; margin-top: 4px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.stat-meta { display: block; color: var(--text-3); font-size: 11px; margin-top: 4px; padding-right: 28px; }
.stat-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); margin-bottom: 6px; }

.panel { border: 1px solid var(--border-soft); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; min-height: 52px; border-bottom: 1px solid var(--border-soft); }
.panel-body { padding: 16px 18px; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; margin-bottom: 10px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); min-width: 0; }
.filter-search { position: relative; display: block; flex: 1 1 240px; min-width: min(100%, 220px); }
.filter-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); display: grid; place-items: center; pointer-events: none; }
.filter-search input { padding-left: 36px !important; }
.filter-clear { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; white-space: nowrap; flex: 0 0 auto; }
.filter-clear:hover { color: var(--text); border-color: var(--accent-line); background: var(--surface-2); }
.field, .filters input, .filters select, .modal input, .modal select, .modal textarea { width: 100%; max-width: 100%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: var(--r-sm); padding: 8px 10px; outline: none; min-height: 34px; min-width: 0; box-sizing: border-box; transition: border-color var(--dur-fast); }
.field:focus, .filters input:focus, .filters select:focus, .modal input:focus, .modal select:focus, .modal textarea:focus { border-color: var(--accent-solid); box-shadow: none; }

.vm-table-panel { overflow: hidden; border: 1px solid var(--border-soft); border-radius: var(--r-lg); background: var(--surface); }
.table-wrap { overflow: auto; max-height: min(68vh, 860px); }
table { width: 100%; border-collapse: collapse; min-width: 980px; }
th { color: var(--text-3); background: var(--surface); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 11px 18px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; position: sticky; top: 0; z-index: 1; font-weight: 600; }
td { padding: 12px 18px; border-bottom: 1px solid var(--border-soft); color: var(--text); font-size: 13px; vertical-align: middle; white-space: nowrap; }
tbody tr { cursor: pointer; transition: background var(--dur-fast); }
tbody tr:hover { background: var(--surface-2); }
tbody tr.selected { background: var(--accent-soft); box-shadow: inset 2px 0 var(--accent-solid); }
.vm-table .cell-id, .vm-table .cell-node, .vm-table .cell-ip, .vm-table .cell-metric { color: var(--text-2); font-family: var(--font-mono); font-size: 12.5px; }
.vm-name { color: var(--text); font-weight: 600; max-width: 270px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; color: var(--text-3); font-size: 12px; border-top: 1px solid var(--border-soft); background: var(--surface); }
.table-footer strong { color: var(--text-2); font-weight: 500; }
.pagination button { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); cursor: pointer; display: inline-grid; place-items: center; }
.pagination button:hover:not(:disabled):not(.active) { border-color: var(--accent-line); color: var(--text); }
.pagination button.active { background: var(--accent-solid); color: var(--accent-ink); border-color: var(--accent-solid); }
.pagination button:disabled { opacity: .38; cursor: not-allowed; }
.pagination { display: flex; gap: 5px; align-items: center; }
.filters select { flex: 1 1 150px; min-width: min(100%, 150px); max-width: 100%; appearance: none; padding-right: 28px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.filters select:disabled { opacity: .55; cursor: not-allowed; }
.vm-table .cell-name { min-width: 180px; }
.status-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 24px; padding: 3px 9px 3px 7px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; border: 1px solid transparent; background: var(--surface-2); color: var(--text-2); }
.status-pill.running, .status-pill.healthy { color: var(--ok); background: rgba(61, 155, 116, .12); border-color: rgba(61, 155, 116, .22); }
.status-pill.stopped, .status-pill.critical, .status-pill.missing { color: var(--crit); background: var(--red-soft); border-color: rgba(212, 90, 90, .22); }
.status-pill.warning { color: var(--warn); background: var(--orange-soft); border-color: rgba(201, 146, 42, .24); }
.subtle { color: var(--text-2); }
.mono { font-family: var(--font-mono); }

.badge { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: 999px; padding: 4px 8px; font-size: 10px; font-weight: 800; }
.badge.client { color: #d5b4fb; background: var(--purple-soft); border-color: rgba(166,106,232,.25); }
.badge.internal { color: #7be6a4; background: var(--green-soft); border-color: rgba(50,197,109,.24); }
.badge.unclassified { color: #ffbd6d; background: var(--orange-soft); border-color: rgba(243,153,46,.26); }
.badge.running, .badge.healthy { color: #79e7a4; background: var(--green-soft); border-color: rgba(50,197,109,.24); }
.badge.stopped, .badge.critical, .badge.missing { color: #ff8d89; background: var(--red-soft); border-color: rgba(239,83,80,.24); }
.badge.warning { color: #ffbd6d; background: var(--orange-soft); border-color: rgba(243,153,46,.26); }
.badge.neutral { color: #b9c5d2; background: rgba(143,160,180,.1); border-color: rgba(143,160,180,.2); }
.badge-row { display: flex; gap: 7px; flex-wrap: wrap; padding: 0 18px 14px; }
.status-dot { width: 9px; height: 9px; display: inline-block; border-radius: 50%; flex: 0 0 auto; }
.status-dot.healthy, .status-dot.running { background: var(--green); box-shadow: none; }
.status-dot.running,
.status-pill.running .status-dot {
  animation: status-online-pulse 1.6s ease-in-out infinite;
}
.status-dot.warning { background: var(--orange); box-shadow: none; }
.status-dot.critical, .status-dot.stopped, .status-dot.missing { background: var(--red); box-shadow: none; }
.status-dot.neutral { background: #718096; }
@keyframes status-online-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(50,197,109,.55), 0 0 8px rgba(50,197,109,.45); opacity: 1; }
  50% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(50,197,109,0), 0 0 14px rgba(50,197,109,.75); opacity: .85; }
}

.overview-bottom { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 12px; margin-top: 12px; align-items: stretch; }
.overview-bottom > .panel { display: flex; flex-direction: column; min-height: 340px; min-width: 0; height: 100%; }
.overview-bottom > .panel > .panel-header { flex: 0 0 auto; }
.overview-bottom > .panel > .panel-body { flex: 1 1 auto; min-height: 0; }
.overview-bottom .activity-list {
  display: grid;
  gap: 0;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-gutter: stable;
}
.overview-bottom .activity-list::-webkit-scrollbar { width: 8px; }
.overview-bottom .activity-list::-webkit-scrollbar-thumb { background: #2a3a4d; border-radius: 99px; }
.overview-bottom .activity-list::-webkit-scrollbar-track { background: transparent; }
.overview-bottom .rule-preview { align-content: start; height: 100%; }
.overview-bottom .health-panel-body { display: flex; flex-direction: column; justify-content: center; }
.activity-list, .environment-list, .rule-preview { display: grid; gap: 9px; }
.activity-item { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 9px; align-items: start; padding: 9px 0; border-bottom: 1px solid rgba(36,49,65,.65); }
.activity-item:last-child { border-bottom: 0; }
.activity-item p { margin: 0; font-size: 11px; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.activity-item time { color: var(--muted); font-size: 10px; white-space: nowrap; }
.rule-preview-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 10px; border-radius: 9px; background: #0b121a; font-size: 11px; }
.health-ring { width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--green) var(--online-angle, 0deg), var(--red) 0); position: relative; margin: 4px auto 14px; }
.health-ring::after { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: var(--panel); }
.health-ring strong { z-index: 1; font-size: 24px; }
.health-ring span { z-index: 1; position: absolute; margin-top: 42px; color: var(--muted); font-size: 9px; }
.health-legend { display: flex; justify-content: center; gap: 18px; color: var(--muted); font-size: 11px; }

.cards-grid { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 12px; }
.environment-card { padding: 16px; position: relative; transition: border-color .18s ease, box-shadow .18s ease, transform .18s cubic-bezier(.2,.8,.2,1); }
.environment-card:hover { border-color: var(--accent-line); }
.environment-card h3 { margin: 0 0 5px; font-size: 15px; }
.environment-card .url { color: var(--muted); font-size: 11px; word-break: break-all; }
.environment-card .env-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.environment-card .env-stat { padding: 10px; border-radius: 9px; background: var(--surface-input); }
.environment-card .env-stat strong { display: block; font-size: 16px; }
.environment-card .env-stat span { color: var(--muted); font-size: 9px; }
.card-actions { display: flex; gap: 7px; flex-wrap: wrap; }

.audit-timeline { display: grid; gap: 0; }
.audit-row { display: grid; grid-template-columns: 16px minmax(0,1fr) auto; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--border); }
.audit-row p { margin: 0; font-size: 12px; line-height: 1.5; }
.audit-row small { display: block; color: var(--muted); margin-top: 4px; }
.audit-row time { color: var(--muted); font-size: 10px; white-space: nowrap; }

.rules-table td { white-space: normal; }
.rule-pattern { max-width: 330px; word-break: break-word; color: #b9c8d8; }

.drawer { position: fixed; z-index: 60; top: 0; right: 0; height: 100vh; width: min(520px, 100vw); background: #0b121a; border-left: 1px solid var(--border); box-shadow: -20px 0 50px rgba(0,0,0,.35); transform: translateX(105%); transition: transform .22s ease; overflow: auto; }
.drawer.open { transform: translateX(0); }
.backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.48); backdrop-filter: blur(2px); }
.drawer-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 18px 12px; }
.drawer-header h2 { margin: 4px 0 0; font-size: 19px; word-break: break-word; }
.drawer-header small { color: var(--blue); font-weight: 800; }
.drawer-tabs { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0 12px; }
.tab-button { border: 0; background: transparent; color: var(--muted); padding: 12px 8px; font-size: 11px; font-weight: 800; cursor: pointer; border-bottom: 2px solid transparent; }
.tab-button.active { color: white; border-color: var(--blue); }
.drawer-content { padding: 16px 18px 32px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.detail-card { background: #0e1721; border: 1px solid var(--border); border-radius: 10px; padding: 11px; min-width: 0; }
.detail-card.wide { grid-column: 1 / -1; }
.detail-card span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.detail-card strong { display: block; margin-top: 5px; font-size: 12px; word-break: break-word; }
.notes-box { white-space: pre-wrap; line-height: 1.55; color: #cad5e0; font-size: 11px; max-height: 180px; overflow: auto; }
.classification-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.classification-actions button { padding: 8px 5px; }
.monitoring-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.timeframe-buttons { display: flex; gap: 5px; }
.timeframe-buttons button { border: 1px solid var(--border); background: #0e1721; color: var(--muted); border-radius: 7px; padding: 7px 9px; cursor: pointer; font-size: 10px; }
.timeframe-buttons button.active { background: var(--blue-soft); color: var(--brand-fg); border-color: rgba(var(--brand-rgb),.45); }
.health-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px; border: 1px solid var(--border); border-radius: 11px; margin-bottom: 12px; background: #0e1721; }
.health-banner h3 { margin: 0; font-size: 15px; }
.health-banner p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.metric-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 12px; }
.metric-card { border: 1px solid var(--border); background: #0e1721; padding: 11px; border-radius: 10px; }
.metric-card span { color: var(--muted); font-size: 9px; display: block; }
.metric-card strong { margin-top: 5px; display: block; font-size: 15px; }
.chart-card { border: 1px solid var(--border); background: #0e1721; border-radius: 10px; padding: 12px; margin-bottom: 9px; }
.chart-card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.chart-card h4 { margin: 0; font-size: 11px; }
.chart-card small { color: var(--muted); }
.chart { width: 100%; height: 125px; display: block; }
.chart-grid-line { stroke: #263444; stroke-width: 1; }
.chart-area { fill: rgba(var(--brand-rgb),.08); }
.chart-line { fill: none; stroke: #4b9fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-line.secondary { stroke: #a66ae8; }
.chart-empty { color: var(--muted); display: grid; place-items: center; height: 100px; font-size: 11px; }
.monitor-warning { border: 1px solid rgba(243,153,46,.28); background: var(--orange-soft); color: #ffd29a; padding: 11px; border-radius: 9px; font-size: 11px; line-height: 1.5; margin-bottom: 12px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 20px; }
.modal { width: min(640px, 100%); max-height: min(90vh, 850px); overflow: auto; background: #0d151e; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.modal-header h2 { margin: 0; font-size: 17px; }
.modal-body { padding: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.form-grid label { display: grid; gap: 6px; color: #b8c5d2; font-size: 11px; font-weight: 700; }
.form-grid label.wide { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; border: 1px solid var(--border); background: var(--surface-input); color: var(--text); border-radius: 10px; padding: 10px 12px; outline: none; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.form-grid textarea { resize: vertical; min-height: 80px; }
.form-grid input:disabled { opacity: .7; cursor: not-allowed; }
.media-type-form { display: grid; gap: 18px; }
.media-section { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; background: rgba(255,255,255,.015); }
.media-section h3 { margin: 0 0 12px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.media-grid { align-items: start; }
.media-field { display: grid; gap: 8px; color: #b8c5d2; font-size: 11px; font-weight: 700; }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface-input); width: fit-content; max-width: 100%; }
.segmented .segment { border: 0; border-right: 1px solid var(--border); background: transparent; color: var(--muted); padding: 9px 14px; cursor: pointer; font-size: 12px; font-weight: 700; }
.segmented .segment:last-child { border-right: 0; }
.segmented .segment.active { background: var(--brand); color: #fff; }
.segmented .segment:hover:not(.active) { color: var(--text); background: rgba(255,255,255,.04); }
html[data-theme="light"] .media-section { background: #f7fafc; }
html[data-theme="light"] .segmented .segment:hover:not(.active) { background: #eef3f8; }
.checkbox-row { display: flex !important; grid-template-columns: auto 1fr !important; align-items: center; gap: 8px !important; }
.checkbox-row input { width: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.help-box { background: #0a1119; border: 1px solid var(--border); border-radius: 10px; padding: 12px; color: var(--muted); font-size: 11px; line-height: 1.55; margin-bottom: 14px; }

.empty-state { text-align: center; padding: 54px 20px; }
.empty-state .empty-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; margin: 0 auto 14px; font-size: 25px; }
.empty-state h3 { margin: 0; }
.empty-state p { color: var(--muted); font-size: 12px; max-width: 480px; line-height: 1.6; margin: 8px auto 18px; }
.loading { min-height: 260px; display: grid; place-items: center; color: var(--muted); }
.spinner { width: 28px; height: 28px; border: 3px solid #243141; border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.toast-container { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: grid; gap: 8px; }
.toast { min-width: 280px; max-width: 420px; border: 1px solid var(--border); background: #101923; border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow); font-size: 12px; animation: toast-in .2s ease; }
.toast.success { border-color: rgba(50,197,109,.35); }
.toast.error { border-color: rgba(239,83,80,.4); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

.settings-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }
.settings-list { display: grid; gap: 9px; }
.settings-row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.settings-row span { color: var(--muted); }
.code { background: #080e15; border: 1px solid var(--border); border-radius: 9px; padding: 12px; font-family: ui-monospace, monospace; color: #a8c9ed; font-size: 11px; overflow: auto; }

@media (max-width: 1300px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-group-row { grid-template-columns: 1fr; }
  .stats-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid-3, .stats-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-bottom { grid-template-columns: 1fr 1fr; }
  .overview-bottom > :last-child { grid-column: 1 / -1; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .sync-state { display: none; }
  #globalSyncState { display: none; }
  .filter-search { flex: 1 1 100%; }
  .filters select { flex: 1 1 calc(50% - 10px); min-width: min(100%, 160px); }
}

@media (max-width: 900px) {
  .mobile-only { display: grid; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; height: 100vh; transform: translateX(-105%); transition: transform .2s ease; width: 236px; z-index: 40; box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .topbar { flex-wrap: wrap; padding: 14px 16px 12px; }
  .top-actions { width: 100%; flex-wrap: wrap; margin-left: 0; }
  .search { flex: 1 1 100%; width: 100%; }
  .pill-action span { display: none; }
  .sidebar-brand .brand-txt { display: none; }
  .user-info { display: none; }
  .filter-search { flex: 1 1 100%; }
  .filters select { flex: 1 1 calc(50% - 10px); }
  .filters .filter-clear { flex: 1 1 100%; }
  .stats-grid,
  .stats-grid-4,
  .stats-grid-3,
  .stats-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-bottom, .cards-grid, .settings-grid { grid-template-columns: 1fr; }
  .overview-bottom > :last-child { grid-column: auto; }
}

@media (max-width: 560px) {
  .main-content { padding: 0 14px 24px; }
  .topbar { padding: 12px 14px 10px; }
  .page-h h1 { font-size: 18px; }
  .stats-grid,
  .stats-grid-4,
  .stats-grid-3,
  .stats-grid-2 { grid-template-columns: 1fr; }
  .filters select { flex: 1 1 100%; min-width: 0; }
  .page-header { align-items: flex-start; flex-direction: column; }
  .form-grid, .detail-grid, .metric-grid { grid-template-columns: 1fr; }
  .detail-card.wide, .form-grid label.wide { grid-column: auto; }
  .classification-actions { grid-template-columns: repeat(2,1fr); }
}

/* v1.1.1 */
.sidebar-footer { margin-top: auto; border-top: 1px solid var(--border-soft); padding-top: 14px; }
.source-chip { display: inline-flex; align-items: center; gap: 5px; margin-left: 7px; padding: 2px 6px; border-radius: 99px; font-size: 9px; color: var(--brand-fg); background: rgba(var(--brand-rgb),.12); border: 1px solid rgba(var(--brand-rgb),.24); vertical-align: middle; }
.source-chip.manual { color: #ffd08a; background: rgba(243,153,46,.12); border-color: rgba(243,153,46,.28); }
.drawer-actions { display: flex; gap: 7px; flex-wrap: wrap; margin: 12px 0 0; }
.inventory-note { white-space: pre-wrap; line-height: 1.55; color: #d7e1eb; font-size: 11px; }
.section-label { grid-column: 1 / -1; color: #6f8195; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding-top: 5px; }
.user-table .user-name { display: block; color: #eef4fa; font-weight: 750; }
.user-table .user-email { display: block; color: var(--muted); margin-top: 3px; font-size: 10px; }
.role-admin { color: #9ec8ff; }
.role-analyst { color: #9ce7b8; }
.manual-banner { border: 1px solid rgba(243,153,46,.3); background: rgba(243,153,46,.08); padding: 11px 12px; border-radius: 10px; color: #ffd39a; font-size: 11px; margin-bottom: 12px; }
.modal .form-hint { color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.45; }
@media (max-width: 560px) { .sidebar-footer { padding-bottom: 4px; } }
.form-grid > .wide { grid-column: 1 / -1; }
.modal input:disabled { color: #718397; background: #0b1118; cursor: not-allowed; }

/* v1.1.4 — tema claro/escuro, logos adaptáveis e menu lateral recolhível */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

.theme-light-asset { display: none !important; }
html[data-theme="light"] .theme-dark-asset { display: none !important; }
html[data-theme="light"] .theme-light-asset { display: block !important; }

.sidebar-collapsed .nav-item.active { border-left-color: var(--accent-solid); box-shadow: none; }
.theme-toggle {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
}
.theme-toggle .ph { font-size: 18px; }
.sidebar-toggle { flex: 0 0 auto; }

.app-shell { transition: grid-template-columns .2s ease; }
.app-shell.sidebar-collapsed { grid-template-columns: 72px 1fr; }
.sidebar { transition: width .2s ease, padding .2s ease, transform .2s ease; }
.sidebar-collapsed .sidebar { padding-left: 8px; padding-right: 8px; }
.sidebar-collapsed .sidebar-brand .brand-txt,
.sidebar-collapsed .sidebar-brand .logo-mark { display: none; }
.sidebar-collapsed .sidebar-toggle { margin: 0 auto; }
.sidebar-collapsed .nav-item { justify-content: center; gap: 0; padding-left: 10px; padding-right: 10px; }
.sidebar-collapsed .nav-label,
.sidebar-collapsed .nav-count,
.sidebar-collapsed .sidebar-footer { display: none; }
.sidebar-collapsed .nav-group-label { height: 1px; padding: 0; margin: 13px 9px; background: var(--border); overflow: hidden; font-size: 0; }

@media (max-width: 900px) {
  .app-shell.sidebar-collapsed { grid-template-columns: 1fr; }
}

/* WHMCS 360° e busca global */
.global-search-shell { position: relative; }
.global-search-results { position: absolute; z-index: 95; left: 0; right: 0; top: calc(100% + 9px); width: 100%; max-width: min(680px, 100vw - 32px); max-height: min(72vh, 650px); overflow: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-lg); padding: 8px; }
.global-result-section + .global-result-section { border-top: 1px solid var(--border); margin-top: 7px; padding-top: 7px; }
.global-result-section h4 { margin: 5px 8px 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: 9px; }
.global-result-item-wrap { display: grid; grid-template-columns: 1fr auto; align-items: stretch; gap: 3px; }
.global-result-item { width: 100%; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--text); border-radius: 9px; padding: 9px; text-align: left; cursor: pointer; }
.global-result-item:hover, .global-result-item:focus { background: rgba(var(--brand-rgb),.11); outline: none; }
.global-result-item strong, .global-result-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-result-item strong { font-size: 12px; }
.global-result-item small { color: var(--muted); margin-top: 3px; font-size: 10px; }
.global-result-item em { color: var(--muted); font-style: normal; font-size: 9px; white-space: nowrap; }
.global-result-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; font-weight: 900; }
.global-result-icon.vm { color: var(--blue); background: var(--blue-soft); }
.global-result-icon.client { color: var(--orange); background: var(--orange-soft); }
.global-result-icon.service { color: var(--purple); background: var(--purple-soft); }
.global-external-link { width: 32px; margin: 5px 3px 5px 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.global-external-link:hover { color: var(--blue); border-color: var(--border); background: var(--panel-2); }
.global-search-empty, .global-search-loading { padding: 24px; text-align: center; color: var(--muted); font-size: 11px; }
.global-search-empty strong, .global-search-empty span { display: block; }
.global-search-empty strong { color: var(--text); font-size: 13px; margin-bottom: 5px; }
.global-search-loading .spinner { width: 18px; height: 18px; display: inline-block; vertical-align: middle; margin-right: 8px; }

.drawer-tabs { grid-template-columns: repeat(4,1fr); }
.whmcs-link-hero, .whmcs-unlinked-hero { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: var(--r-lg); margin-bottom: 12px; }
.whmcs-link-hero small { color: var(--orange); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.whmcs-link-hero p, .whmcs-unlinked-hero p { color: var(--muted); margin: 4px 0 0; font-size: 10px; }
.link-title { display: block; border: 0; background: transparent; padding: 4px 0 0; color: var(--text); font-size: 16px; font-weight: 800; text-align: left; cursor: pointer; }
.link-title:hover { color: var(--blue); }
.whmcs-orbit { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--orange-soft); color: var(--orange); font-size: 25px; }
.whmcs-link-search { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 14px 0; }
.whmcs-link-search input, .whmcs-settings-form input { width: 100%; border: 1px solid var(--border); background: #0a1119; color: var(--text); border-radius: 8px; padding: 10px 11px; outline: none; }
.whmcs-service-results { max-height: 420px; overflow: auto; display: grid; gap: 6px; }
.whmcs-service-option { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 10px; padding: 11px; cursor: pointer; text-align: left; }
.whmcs-service-option:hover { border-color: rgba(var(--brand-rgb),.55); background: var(--blue-soft); }
.whmcs-service-option strong, .whmcs-service-option small { display: block; }
.whmcs-service-option small { margin-top: 4px; color: var(--muted); font-size: 10px; }

.client-workspace-backdrop { position: fixed; inset: 0; z-index: 68; background: rgba(0,0,0,.66); backdrop-filter: blur(3px); }
.client-workspace { position: fixed; z-index: 70; left: 50%; top: 3vh; width: min(1240px, calc(100vw - 40px)); height: min(94dvh, 980px); display:flex; flex-direction:column; transform: translate(-50%, 110vh) scale(.98); opacity: 0; pointer-events: none; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--bg); box-shadow: 0 40px 110px rgba(0,0,0,.58); transition: transform .24s ease, opacity .2s ease; }
.client-workspace.open { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; }
.client-workspace-header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; border-bottom: 1px solid var(--border-soft); background: var(--surface); }
.client-workspace-header small { color: var(--orange); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.client-workspace-header h2 { margin: 4px 0 0; font-size: 23px; }
.client-identity-meta { display: flex; align-items: center; gap: 7px; color: var(--muted); margin-top: 5px; font-size: 11px; }
.client-workspace-actions { display: flex; align-items: center; gap: 8px; }
.client-workspace-content { flex:1 1 auto; min-height:0; overflow:auto; padding: 18px 18px 30px; overscroll-behavior:contain; }
.client-hero-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; margin-bottom: 14px; }
.client-workspace-grid { display: grid; grid-template-columns: minmax(330px,.8fr) minmax(520px,1.35fr); gap: 14px; align-items: start; }
.client-workspace-column { display: grid; gap: 14px; }
.client-summary-card .settings-row.stacked { display: grid; gap: 6px; }
.client-summary-card .settings-row.stacked strong { text-align: left; line-height: 1.5; }
.client-vm-list { display: grid; gap: 7px; }
.client-vm-row { width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); padding: 10px; border-radius: 10px; text-align: left; cursor: pointer; }
.client-vm-row:hover { border-color: rgba(var(--brand-rgb),.5); background: var(--blue-soft); }
.client-vm-row strong, .client-vm-row small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.client-vm-row small { color: var(--muted); margin-top: 3px; font-size: 9px; }
.section-title-row { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.section-title-row h2 { font-size: 17px; margin: 0; }
.section-title-row p { color: var(--muted); margin: 5px 0 0; font-size: 11px; }
.client-services-list { display: grid; gap: 10px; align-content:start; }
.client-service-card { border: 1px solid var(--border); background: var(--panel); border-radius: 14px; padding: 14px; min-width:0; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.client-service-card.highlighted { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(243,153,46,.12), 0 20px 50px rgba(0,0,0,.2); transform: translateY(-2px); }
.client-service-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--border); padding-bottom: 11px; margin-bottom: 11px; }
.client-service-header small { color: var(--orange); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.client-service-header h3 { font-size: 14px; margin: 4px 0 0; }
.client-service-header p { color: var(--muted); font-size: 10px; margin: 3px 0 0; }
.client-service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.client-service-grid > div { border: 1px solid var(--border); background: var(--panel-2); border-radius: 9px; padding: 9px; min-width: 0; }
.client-service-grid span { color: var(--muted); display: block; font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.client-service-grid strong { display: block; margin-top: 5px; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-alert { margin-top: 10px; border-radius: 9px; padding: 9px; font-size: 10px; }
.client-alert.warning { background: var(--orange-soft); color: #ffd29a; border: 1px solid rgba(243,153,46,.25); }
.client-linked-vms { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 11px; margin-top: 11px; border-top: 1px solid var(--border); }
.client-linked-vms > span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.client-linked-vms > div { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.client-linked-vms em { color: var(--muted); font-size: 10px; }
.linked-vm-chip { border: 1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 999px; padding: 6px 9px; font-size: 9px; cursor: pointer; }
.linked-vm-chip:hover { border-color: var(--blue); }
.client-service-actions { display: flex; justify-content: flex-end; margin-top: 10px; }

.whmcs-client-filters { display: grid; grid-template-columns: minmax(260px,1fr) 180px auto; gap: 8px; padding: 12px; margin-bottom: 12px; }
.whmcs-client-filters input, .whmcs-client-filters select { border: 1px solid var(--border); background: #0a1119; color: var(--text); border-radius: 8px; padding: 10px 11px; outline: none; }
.whmcs-clients-table .client-name-cell { display: block; color: var(--text); font-weight: 800; }
.whmcs-clients-table td small { display: block; color: var(--muted); margin-top: 3px; }
.whmcs-settings-summary { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-bottom: 16px; }
.whmcs-settings-summary > div { border: 1px solid var(--border); background: var(--panel-2); border-radius: 10px; padding: 11px; }
.whmcs-settings-summary span { display: block; color: var(--muted); font-size: 9px; }
.whmcs-settings-summary strong { display: block; margin-top: 5px; font-size: 15px; }
.whmcs-settings-actions { border-top: 1px solid var(--border); padding-top: 14px; }

html[data-theme="light"] .global-search-shell > input,
html[data-theme="light"] .whmcs-link-search input,
html[data-theme="light"] .whmcs-settings-form input,
html[data-theme="light"] .whmcs-client-filters input,
html[data-theme="light"] .whmcs-client-filters select { background: #fff; color: var(--text); }
html[data-theme="light"] .global-search-results { background: rgba(255,255,255,.98); box-shadow: 0 26px 70px rgba(34,57,82,.22); }
html[data-theme="light"] .global-result-item:hover,
html[data-theme="light"] .global-result-item:focus { background: #edf4fb; }
html[data-theme="light"] .client-workspace { background: var(--bg); box-shadow: 0 40px 110px rgba(34,57,82,.28); }
html[data-theme="light"] .client-alert.warning { color: #8d4d00; }
html[data-theme="light"] .client-workspace-backdrop { background: rgba(31,45,61,.42); }

@media (max-width: 1480px) {
  .search { max-width: 240px; }
}

@media (max-width: 1200px) {
  .search { max-width: 220px; }
  .search kbd { display: none; }
}

@media (max-width: 1050px) {
  .client-hero-grid { grid-template-columns: repeat(2,1fr); }
  .client-workspace-grid { grid-template-columns: 1fr; }
  .whmcs-settings-summary { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 900px) {
  .client-workspace { width: calc(100vw - 18px); top: 1vh; height: 98vh; border-radius: 14px; }
  .client-workspace-content { height: calc(98vh - 88px); }
  .client-service-grid { grid-template-columns: repeat(2,1fr); }
  .whmcs-client-filters { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .page-header-branded { align-items: flex-start; }
  .page-brand-title { gap: 10px; }
  .page-brand-title img { width: 104px; max-height: 36px; }
  .page-header-branded .page-actions { width: 100%; }
  .client-workspace-header { padding: 14px; }
  .client-workspace-header h2 { font-size: 18px; }
  .client-identity-meta { flex-wrap: wrap; }
  .client-workspace-actions .button { display: none; }
  .client-workspace-content { padding: 10px; }
  .client-hero-grid { grid-template-columns: 1fr 1fr; }
  .client-service-grid { grid-template-columns: 1fr; }
  .client-linked-vms { display: grid; }
  .client-linked-vms > div { justify-content: flex-start; }
  .whmcs-settings-summary { grid-template-columns: repeat(2,1fr); }
  .drawer-tabs { overflow-x: auto; grid-template-columns: repeat(4, minmax(100px,1fr)); }
}

/* v1.3.0 — central de notificações, auditoria de hardware e workspace com scroll seguro */
body.client-workspace-open { overflow: hidden; }
.client-workspace {
  top: max(16px, env(safe-area-inset-top));
  height: min(94dvh, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
}
.client-workspace-header { flex: 0 0 auto; }
.client-workspace-content {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 18px max(48px, env(safe-area-inset-bottom));
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.client-services-list { padding-bottom: 18px; }
.client-service-card:last-child { margin-bottom: 18px; }
.client-service-actions { padding-bottom: 4px; }
.client-service-card.has-hardware-alert { border-color: rgba(239,83,80,.7); box-shadow: 0 0 0 3px rgba(239,83,80,.08); }
.hardware-contract-strip { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; padding:10px 11px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2); }
.hardware-contract-strip span { color:var(--muted); font-size:8px; letter-spacing:.08em; text-transform:uppercase; }
.hardware-contract-strip strong { text-align:right; font-size:10px; }
.hardware-contract-strip.critical { border-color:rgba(239,83,80,.5); background:rgba(239,83,80,.07); }
.client-alert.critical { margin-top:10px; border:1px solid rgba(239,83,80,.5); background:rgba(239,83,80,.09); color:#ffaaa7; border-radius:10px; padding:10px 11px; font-size:10px; line-height:1.5; }

.notification-shell { position: relative; }
.notification-button { position:relative; }
.notification-button .ph { width:18px; height:18px; }
.notification-count { position:absolute; top:-5px; right:-6px; min-width:18px; height:18px; padding:0 5px; display:grid; place-items:center; border:2px solid var(--bg); border-radius:999px; background:#ef5350; color:#fff; font-size:9px; line-height:1; box-shadow:0 6px 16px rgba(239,83,80,.35); }
.notification-panel { position:absolute; z-index:110; top:calc(100% + 12px); right:0; width:min(460px, calc(100vw - 24px)); max-height:min(76dvh, 720px); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border); border-radius:16px; background:rgba(11,18,26,.985); box-shadow:0 28px 80px rgba(0,0,0,.55); backdrop-filter:blur(22px); }
.notification-panel > header { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 16px; border-bottom:1px solid var(--border-soft); background:var(--surface); }
.notification-panel header small { display:block; color:var(--blue); font-size:8px; font-weight:900; letter-spacing:.13em; }
.notification-panel header h3 { margin:3px 0 0; font-size:16px; }
.notification-panel header .button { white-space:nowrap; font-size:9px; }
.notification-list { flex:1 1 auto; min-height:0; overflow:auto; padding:8px; }
.notification-item { width:100%; display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:start; gap:10px; text-align:left; border:1px solid transparent; border-radius:12px; background:transparent; color:var(--text); padding:11px; cursor:pointer; transition:.18s ease; }
.notification-item + .notification-item { margin-top:5px; }
.notification-item:hover { border-color:var(--border); background:var(--panel-2); transform:translateY(-1px); }
.notification-item.unread { background:rgba(var(--brand-rgb),.07); border-color:rgba(var(--brand-rgb),.22); }
.notification-item.critical.unread { background:rgba(239,83,80,.08); border-color:rgba(239,83,80,.32); }
.notification-item-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:rgba(var(--brand-rgb),.12); color:var(--brand-fg); font-size:16px; }
.notification-item.critical .notification-item-icon { background:rgba(239,83,80,.13); color:#ff8d89; }
.notification-item-copy { min-width:0; }
.notification-item-copy small { display:block; color:var(--muted); font-size:7px; font-weight:900; letter-spacing:.1em; }
.notification-item-copy strong { display:block; margin-top:4px; font-size:11px; }
.notification-item-copy p { margin:4px 0; color:#c5d0dc; font-size:9px; line-height:1.45; }
.notification-item-copy em { display:block; color:var(--muted); font-size:8px; font-style:normal; }
.notification-state { align-self:start; border-radius:999px; background:var(--brand); color:#fff; padding:4px 7px; font-size:7px; text-transform:uppercase; letter-spacing:.08em; }
.notification-state.resolved { background:rgba(50,197,109,.15); color:#69dd97; }
.notification-empty { min-height:180px; display:grid; place-items:center; align-content:center; gap:6px; text-align:center; color:var(--muted); padding:22px; }
.notification-empty > span { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:rgba(50,197,109,.12); color:#56d489; font-size:18px; }
.notification-empty strong { color:var(--text); }
.notification-empty p { margin:0; font-size:10px; }

.hardware-alert-hero { display:flex; align-items:flex-start; gap:11px; margin-bottom:12px; padding:12px; border:1px solid rgba(212,90,90,.35); border-radius:var(--r-lg); background:rgba(212,90,90,.08); }
.hardware-alert-hero > span { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:rgba(239,83,80,.16); color:#ff9b97; }
.hardware-alert-hero strong { display:block; font-size:11px; }
.hardware-alert-hero p { margin:4px 0 0; color:var(--muted); font-size:9px; line-height:1.45; }
.hardware-comparison { margin:12px 0; padding:12px; border:1px solid var(--border); border-radius:13px; background:var(--panel); }
.hardware-comparison .section-title-row { margin-bottom:10px; }
.hardware-comparison h3 { margin:0; font-size:12px; }
.hardware-comparison p { margin:3px 0 0; color:var(--muted); font-size:9px; }
.hardware-compare-grid { display:grid; grid-template-columns:1fr; gap:8px; }
.hardware-compare-card { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; border:1px solid var(--border); border-radius:11px; background:var(--panel-2); padding:10px; }
.hardware-compare-card > header { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.hardware-compare-card > header > span { color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.hardware-compare-card > div small { display:block; color:var(--muted); font-size:7px; text-transform:uppercase; }
.hardware-compare-card > div strong { display:block; margin-top:4px; font-size:11px; }
.hardware-compare-arrow { color:var(--muted); }
.hardware-compare-card.critical { border-color:rgba(239,83,80,.5); background:rgba(239,83,80,.06); }
.hardware-compare-card.warning { border-color:rgba(243,153,46,.5); background:rgba(243,153,46,.06); }
.hardware-compare-card.healthy { border-color:rgba(50,197,109,.35); }

html[data-theme="light"] .notification-panel { background:rgba(255,255,255,.99); box-shadow:0 28px 80px rgba(34,57,82,.25); }
html[data-theme="light"] .notification-item-copy p { color:#526579; }
html[data-theme="light"] .notification-count { border-color:#fff; }

@media (max-width: 900px) {
  .notification-panel { position:fixed; top:76px; right:10px; left:10px; width:auto; max-height:calc(100dvh - 92px); }
  .client-workspace { top:max(8px, env(safe-area-inset-top)); height:calc(100dvh - 16px); }
  .client-workspace-content { padding-bottom:max(54px, env(safe-area-inset-bottom)); }
}

.stat-card.clickable, .hardware-compare-card.clickable, .client-alert.interactive, .badge.interactive { cursor:pointer; }
.stat-card.clickable:hover, .hardware-compare-card.clickable:hover { border-color: var(--accent-line); }
.badge.interactive { border:none; }
.client-service-compact-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px; }
.service-pill { border:1px solid var(--border); background:var(--panel-2); border-radius:10px; padding:9px 10px; min-width:0; }
.service-pill.wide { grid-column:span 2; }
.service-pill span { color:var(--muted); display:block; font-size:8px; text-transform:uppercase; letter-spacing:.06em; }
.service-pill strong { display:block; margin-top:5px; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.temp-password-box { border:1px solid var(--border); background:#0a1119; border-radius:12px; padding:14px; display:grid; gap:10px; margin-top:12px; }
.temp-password-box span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.temp-password-box strong { font-size:20px; letter-spacing:.04em; word-break:break-all; }
.discrepancy-list { display:grid; gap:12px; }
.discrepancy-card { border:1px solid var(--border); background:#0f1821; border-radius:12px; padding:14px; }
.discrepancy-card.warning { border-color:rgba(243,153,46,.38); }
.discrepancy-card.critical { border-color:rgba(239,83,80,.5); box-shadow:0 0 0 3px rgba(239,83,80,.08); }
.discrepancy-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.discrepancy-card header small { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.discrepancy-card header h3 { margin:4px 0 0; font-size:14px; }
.discrepancy-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.discrepancy-grid > div { border:1px solid var(--border); background:var(--panel); border-radius:10px; padding:9px 10px; min-width:0; }
.discrepancy-grid span { color:var(--muted); display:block; font-size:8px; text-transform:uppercase; letter-spacing:.06em; }
.discrepancy-grid strong { display:block; margin-top:5px; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hardware-alert-hero.interactive { width:100%; text-align:left; border:none; cursor:pointer; }
.modal-backdrop .hidden { display:none; }
@media (max-width: 1100px) { .client-service-compact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .service-pill.wide { grid-column:span 2; } }
@media (max-width: 760px) { .client-service-compact-grid, .discrepancy-grid { grid-template-columns:1fr; } .service-pill.wide { grid-column:auto; } }

.notification-button.has-unread { color:#ff7470; border-color:rgba(239,83,80,.45); background:rgba(239,83,80,.08); box-shadow:0 0 0 3px rgba(239,83,80,.06); }
.notification-button.pulse { animation:notification-pulse .72s ease-in-out 3; }
@keyframes notification-pulse { 0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(239,83,80,.35); } 50% { transform:scale(1.08); box-shadow:0 0 0 8px rgba(239,83,80,0); } }

/* v1.3.19 — Phosphor font, shell Observability */
.empty-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 16px; background: var(--brand-soft); color: var(--brand-fg); }
.empty-icon .ph { font-size: 28px; }
.stat-icon .ph { font-size: 16px; }
.btn-icon { font-size: 15px; }
.notification-item-icon .ph { font-size: 16px; }
.whmcs-orbit .ph { font-size: 20px; }
.pagination .ph { font-size: 14px; }

html.theme-switching,
html.theme-switching body,
html.theme-switching .panel,
html.theme-switching .topbar,
html.theme-switching .sidebar,
html.theme-switching .stat-card {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.sk {
  position: relative;
  overflow: hidden;
  background: var(--sk-base);
  border-radius: var(--radius-sm);
}
.sk::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0%, var(--sk-sheen) 50%, transparent 100%);
  animation: sk-shimmer 1.4s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes sk-shimmer { to { transform: translateX(100%); } }
.sk-line { height: 11px; }
.sk-line.lg { height: 22px; }
.sk-line.sm { height: 8px; }
.sk-line.w40 { width: 40%; }
.sk-line.w60 { width: 60%; }
.sk-line.w80 { width: 80%; }
.sk-circle { border-radius: 50%; }
.sk-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.sk-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  padding: 16px;
  min-height: 112px;
}
.sk-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--brand-soft);
}
.sk-row { display: grid; gap: 8px; }
.sk-table td { padding: 14px 12px; }
.sk-audit-row,
.sk-notification-row {
  display: grid;
  grid-template-columns: 16px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.sk-env-card { min-height: 210px; padding: 16px; display: grid; gap: 12px; }

@media (prefers-reduced-motion: reduce) {
  .sk::after { animation: none; opacity: 0; }
  .stat-card,
  .environment-card,
  .button { transition: none; }
  .status-dot.running,
  .status-pill.running .status-dot { animation: none; }
}