/* ══════════════════════════════════════════════════════════════════════
   ADMIN REFINED — Design Upgrade
   • Font: Plus Jakarta Sans (premium, modern, highly legible)
   • Icons: standardised to compact, consistent sizing
   • Layout: tighter spacing, less bulk, sharper hierarchy
   • All overrides are targeted — base functionality unchanged
══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Global font application ─────────────────────────────────────── */
.admin-body,
.admin-body *:not(.sms-recipients-box):not(.sensor-info-strip strong):not(.pill-id-chip) {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}
.sms-recipients-box,
.sensor-info-strip strong,
.pill-id-chip,
code, pre, kbd, samp {
  font-family: 'JetBrains Mono', 'Cascadia Mono', 'Consolas', monospace !important;
}

/* ── Custom scrollbar ────────────────────────────────────────────── */
.admin-shell *::-webkit-scrollbar { width: 5px; height: 5px; }
.admin-shell *::-webkit-scrollbar-track { background: transparent; }
.admin-shell *::-webkit-scrollbar-thumb { background: rgba(148,163,184,.22); border-radius: 99px; }
.admin-shell *::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.38); }

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR — slimmer, more refined
══════════════════════════════════════════════════════════════════ */
.admin-sidebar {
  width: 220px !important;
  min-width: 220px !important;
}
.admin-sidebar.collapsed {
  width: 58px !important;
  min-width: 58px !important;
}
.sidebar-header {
  padding: 11px 10px !important;
  min-height: 52px !important;
}
.sidebar-icon-wrap {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 7px !important;
}
.sidebar-icon-wrap i {
  width: 14px !important;
  height: 14px !important;
}
.sidebar-name {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
.sidebar-role {
  font-size: 9px !important;
  letter-spacing: 0.07em !important;
  font-weight: 600 !important;
}

/* Nav section labels */
.nav-section-label {
  font-size: 9px !important;
  letter-spacing: 0.09em !important;
  padding: 7px 8px 3px !important;
  margin-top: 4px !important;
  font-weight: 700 !important;
}

/* Nav items — compact, refined */
.nav-item {
  padding: 7px 8px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  gap: 8px !important;
  border-radius: 7px !important;
  letter-spacing: -0.005em !important;
}
.nav-item i {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  stroke-width: 2.1 !important;
}

/* Nav badge */
.nav-badge {
  font-size: 9px !important;
  padding: 2px 6px !important;
  min-width: 18px !important;
}

/* Sidebar footer */
.sidebar-footer { padding: 6px !important; }

/* Profile link in sidebar */
.sidebar-profile-link {
  font-size: 12.5px !important;
  margin-bottom: 4px !important;
}

/* ══════════════════════════════════════════════════════════════════
   TOPBAR — slimmer height
══════════════════════════════════════════════════════════════════ */
.admin-topbar {
  height: 52px !important;
  padding: 0 18px !important;
  gap: 10px !important;
}
.topbar-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
.topbar-status {
  font-size: 11.5px !important;
  gap: 6px !important;
}
.topbar-clock {
  font-size: 11.5px !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.topbar-collapse-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
}
.topbar-collapse-btn i {
  width: 16px !important;
  height: 16px !important;
}

/* ══════════════════════════════════════════════════════════════════
   CONTENT AREA & SECTIONS
══════════════════════════════════════════════════════════════════ */
.admin-content {
  padding: 18px !important;
}
.section-heading {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 16px !important;
  gap: 8px !important;
}
.section-heading i {
  width: 16px !important;
  height: 16px !important;
}

/* ══════════════════════════════════════════════════════════════════
   CARDS — tighter, cleaner
══════════════════════════════════════════════════════════════════ */
.admin-card {
  padding: 16px !important;
  border-radius: 12px !important;
  margin-bottom: 14px !important;
}
.card-head {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  gap: 7px !important;
}
.card-head i {
  width: 13px !important;
  height: 13px !important;
}
.card-head-sub {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* ══════════════════════════════════════════════════════════════════
   DASHBOARD STAT CARDS — core issue: oversized icons & numbers
══════════════════════════════════════════════════════════════════ */
.dash-stat-grid {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.dash-stat-card {
  padding: 12px !important;
  border-radius: 10px !important;
  gap: 10px !important;
  min-height: 0 !important;
}
.dash-stat-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
}
/* Target all lucide icons inside stat icon boxes */
.dash-stat-icon i,
.dash-stat-icon svg {
  width: 16px !important;
  height: 16px !important;
}
.dash-stat-value {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
}
.dash-stat-label {
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
}
.dash-row { gap: 14px !important; }

/* ══════════════════════════════════════════════════════════════════
   FORMS — tighter inputs, cleaner labels
══════════════════════════════════════════════════════════════════ */
.form-group {
  margin-bottom: 12px !important;
}
.form-group label {
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-bottom: 5px !important;
  letter-spacing: 0.03em !important;
}
.form-input {
  padding: 7px 10px !important;
  font-size: 12.5px !important;
  border-radius: 7px !important;
  font-weight: 400 !important;
}
.input-wrap .form-input,
.input-wrap .form-select {
  padding-left: 32px !important;
}
.input-wrap .input-ico {
  left: 9px !important;
}
.input-ico i {
  width: 13px !important;
  height: 13px !important;
}
/* Keep inline icon sizes in inputs as declared via inline style (they're already small 15px) */
.help-text {
  font-size: 10.5px !important;
  line-height: 1.4 !important;
}
.field-hint {
  font-size: 10.5px !important;
}
.field-lbl-icon {
  width: 11px !important;
  height: 11px !important;
}
.toggle-label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
.toggle-desc {
  font-size: 10.5px !important;
}
.toggle-switch {
  width: 38px !important;
  height: 20px !important;
}
.toggle-track::after {
  width: 14px !important;
  height: 14px !important;
  top: 3px !important;
  left: 3px !important;
}
.toggle-switch input:checked + .toggle-track::after {
  transform: translateX(18px) !important;
}

/* ══════════════════════════════════════════════════════════════════
   TABLES — compact, readable
══════════════════════════════════════════════════════════════════ */
.data-table th {
  padding: 8px 10px !important;
  font-size: 9.5px !important;
  letter-spacing: 0.06em !important;
}
.data-table td {
  padding: 8px 10px !important;
  font-size: 12px !important;
}
.table-toolbar { gap: 8px !important; margin-bottom: 12px !important; }
.search-input {
  font-size: 12px !important;
  padding: 7px 10px 7px 30px !important;
  border-radius: 7px !important;
}
.search-wrap > i, .search-wrap > svg {
  width: 13px !important;
  height: 13px !important;
  left: 9px !important;
}
.select-sm {
  font-size: 11.5px !important;
  padding: 6px 24px 6px 9px !important;
  border-radius: 7px !important;
  min-height: 30px !important;
}
.tbl-btn {
  width: 26px !important;
  height: 26px !important;
  border-radius: 5px !important;
}
.tbl-btn i, .tbl-btn svg { width: 13px !important; height: 13px !important; }

/* ══════════════════════════════════════════════════════════════════
   BUTTONS — refined proportions
══════════════════════════════════════════════════════════════════ */
.btn {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}
.btn i, .btn svg { width: 13px !important; height: 13px !important; }
.btn-sm {
  padding: 5px 10px !important;
  font-size: 11.5px !important;
}
.btn-sm i, .btn-sm svg { width: 12px !important; height: 12px !important; }

/* ══════════════════════════════════════════════════════════════════
   LOGIN CARD — more refined proportions
══════════════════════════════════════════════════════════════════ */
.login-card {
  padding: 32px !important;
  width: min(400px, calc(100vw - 28px)) !important;
  border-radius: 20px !important;
}
.login-icon-wrap {
  width: 58px !important;
  height: 58px !important;
  border-radius: 15px !important;
}
/* Override the inline style on the icon inside login wrap */
.login-icon-wrap i {
  width: 26px !important;
  height: 26px !important;
}
.login-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}
.login-sub {
  font-size: 12.5px !important;
  margin-bottom: 22px !important;
}
.login-input {
  font-size: 13px !important;
  padding: 10px 10px 10px 36px !important;
  border-radius: 9px !important;
}
.login-badge {
  font-size: 10.5px !important;
  padding: 5px 10px !important;
  font-weight: 700 !important;
}
.login-badge i { width: 11px !important; height: 11px !important; }
.login-back { font-size: 11.5px !important; }

/* ══════════════════════════════════════════════════════════════════
   HERO SECTIONS — tone down the bulk
══════════════════════════════════════════════════════════════════ */
/* Hero banners */
.admin-hero-modern {
  padding: 16px !important;
  border-radius: 16px !important;
  margin-bottom: 14px !important;
  gap: 14px !important;
}
.hero-copy-modern h2 {
  font-size: clamp(17px, 1.8vw, 26px) !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 5px !important;
}
.hero-copy-modern p {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}
.hero-eyebrow-modern {
  font-size: 10px !important;
  font-weight: 800 !important;
  gap: 5px !important;
  margin-bottom: 6px !important;
}
.hero-eyebrow-modern i, .hero-eyebrow-modern svg { width: 12px !important; height: 12px !important; }
.hero-actions-modern {
  gap: 8px !important;
  margin-top: 12px !important;
}
.hero-status-grid-modern {
  gap: 8px !important;
  min-width: 360px !important;
}
.hero-status-tile-modern {
  padding: 10px 12px !important;
  border-radius: 12px !important;
}
.hero-status-tile-modern strong {
  font-size: 18px !important;
  letter-spacing: -0.03em !important;
}
.hero-status-tile-modern small {
  font-size: 10px !important;
  margin-top: 2px !important;
}
.hero-status-tile-modern span {
  font-size: 9px !important;
  margin-bottom: 4px !important;
}

/* Pro hero card (reports, notifications, floor sections) */
.pro-hero-card {
  padding: 16px 18px !important;
  border-radius: 16px !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}
.pro-hero-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
}
.pro-hero-icon i,
.pro-hero-icon svg {
  width: 22px !important;
  height: 22px !important;
}
.pro-hero-copy h3 {
  font-size: 17px !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 5px !important;
}
.pro-hero-copy p {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}
.pro-eyebrow {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 5px !important;
}
.hero-badge, .secure-pill, .notification-chip {
  font-size: 11px !important;
  padding: 6px 9px !important;
  font-weight: 700 !important;
  gap: 5px !important;
}
.hero-badge i, .hero-badge svg,
.secure-pill i, .secure-pill svg,
.notification-chip i, .notification-chip svg {
  width: 12px !important;
  height: 12px !important;
}

/* ══════════════════════════════════════════════════════════════════
   DASHBOARD SPECIFIC
══════════════════════════════════════════════════════════════════ */
.dashboard-grid-modern { gap: 12px !important; margin-top: 12px !important; }
.dash-action {
  padding: 10px 12px !important;
  border-radius: 10px !important;
  gap: 10px !important;
}
.dash-action i, .dash-action svg {
  width: 16px !important;
  height: 16px !important;
}
.dash-action strong { font-size: 12.5px !important; font-weight: 600 !important; }
.dash-action small { font-size: 11px !important; }
.dashboard-actions-list { gap: 8px !important; }

/* Area risk tiles */
.area-risk-row { padding: 9px 10px !important; border-radius: 10px !important; }
.area-risk-main i, .area-risk-main svg { width: 16px !important; height: 16px !important; }
.area-risk-main strong { font-size: 12px !important; }
.area-risk-main small { font-size: 10.5px !important; }
.area-risk-reading strong { font-size: 13px !important; }
.area-risk-reading span { font-size: 9.5px !important; }

/* PLC status */
.plc-ip { font-size: 14px !important; font-weight: 700 !important; }
.plc-mode { font-size: 11px !important; }
.plc-led { width: 12px !important; height: 12px !important; }
.meta-row { font-size: 11.5px !important; }

/* Recent alerts */
.recent-alert-row { padding: 7px 9px !important; font-size: 11.5px !important; }
.recent-alert-row .rar-badge { font-size: 9px !important; padding: 2px 6px !important; }

/* ══════════════════════════════════════════════════════════════════
   MODALS — more refined proportions
══════════════════════════════════════════════════════════════════ */
.modal-box { border-radius: 14px !important; }
.modal-head {
  padding: 14px 18px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
.modal-body { padding: 16px 18px !important; }
.modal-foot { padding: 12px 18px !important; gap: 8px !important; }
.modal-close {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
}
.modal-close i { width: 14px !important; height: 14px !important; }

/* Sensor modal */
.sensor-modal-head { padding: 12px 18px !important; }
.sensor-modal-title { font-size: 14px !important; font-weight: 700 !important; }
.sensor-modal-title-wrap small { font-size: 10.5px !important; }
.sensor-modal-body { padding: 14px 18px !important; }
.sensor-modal-foot { padding: 10px 18px !important; }
.sensor-form-grid { gap: 8px 10px !important; }

/* Enhanced close buttons */
.enhanced-close {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
}
.enhanced-close i { width: 14px !important; height: 14px !important; }

/* App dialog */
.app-dialog-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
}
.app-dialog-icon i, .app-dialog-icon svg { width: 20px !important; height: 20px !important; }

/* ══════════════════════════════════════════════════════════════════
   ALERT HISTORY — workflow cards
══════════════════════════════════════════════════════════════════ */
.alert-workflow-cards {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
  flex-wrap: wrap !important;
}
.workflow-card {
  flex: 1 !important;
  min-width: 100px !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
}
.workflow-card strong {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}
.workflow-card span {
  font-size: 10.5px !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════════
   SENSORS SECTION
══════════════════════════════════════════════════════════════════ */
.sensor-health-strip { gap: 8px !important; }
.sensor-health-strip > div {
  padding: 10px 12px !important;
  border-radius: 10px !important;
}
.sensor-health-strip > div strong {
  font-size: 18px !important;
  letter-spacing: -0.03em !important;
}
.sensor-health-strip > div span {
  font-size: 9px !important;
  margin-bottom: 3px !important;
}
.threshold-global-card { border-radius: 12px !important; }
.global-threshold-grid { gap: 10px !important; }
.global-threshold-copy { font-size: 12.5px !important; margin-bottom: 14px !important; }

/* Alert type rows */
.alert-type-row {
  padding: 8px 10px !important;
  border-radius: 8px !important;
  gap: 10px !important;
}
.at-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
}
.at-icon i, .at-icon svg { width: 14px !important; height: 14px !important; }
.at-label { font-size: 12.5px !important; font-weight: 600 !important; }
.at-desc { font-size: 10.5px !important; }
.pro-alert-types .alert-type-row { min-height: 60px !important; border-radius: 10px !important; }
.pro-alert-types .at-icon { width: 30px !important; height: 30px !important; }

/* ══════════════════════════════════════════════════════════════════
   SETTINGS GRID & GENERAL SECTION
══════════════════════════════════════════════════════════════════ */
.settings-grid { gap: 14px !important; }
.general-settings-layout, .profile-layout-modern, .security-layout-modern { gap: 14px !important; }
.general-preview-logo {
  width: 50px !important;
  height: 50px !important;
  border-radius: 14px !important;
}
.general-preview-logo i, .general-preview-logo svg { width: 22px !important; height: 22px !important; }
.general-preview-card strong { font-size: 15px !important; font-weight: 700 !important; }
.general-preview-card span { font-size: 11px !important; }
.general-health-strip span, .general-logo-tips span, .password-guidance span {
  font-size: 10.5px !important;
  padding: 5px 9px !important;
  gap: 5px !important;
}
.general-health-strip i, .general-health-strip svg,
.general-logo-tips i, .general-logo-tips svg,
.password-guidance i, .password-guidance svg {
  width: 12px !important;
  height: 12px !important;
}

/* ══════════════════════════════════════════════════════════════════
   ESCALATION TIMELINE
══════════════════════════════════════════════════════════════════ */
.esc-step {
  padding: 10px !important;
  border-radius: 10px !important;
  gap: 8px !important;
}
.esc-step > span:first-child {
  width: 26px !important;
  height: 26px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
.esc-step strong { font-size: 12px !important; font-weight: 600 !important; }
.esc-step small { font-size: 10.5px !important; }
.esc-step input { height: 32px !important; }

/* ══════════════════════════════════════════════════════════════════
   NOTIFICATION / SMS SECTION
══════════════════════════════════════════════════════════════════ */
.notification-status-pill {
  font-size: 11px !important;
  padding: 7px 11px !important;
  font-weight: 700 !important;
  gap: 6px !important;
}
.notification-status-pill i { width: 12px !important; height: 12px !important; }
.card-subhead {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  gap: 6px !important;
  margin: 14px 0 8px !important;
}
.card-subhead i, .card-subhead svg { width: 13px !important; height: 13px !important; }
.pro-toggle-row { padding: 10px 12px !important; border-radius: 10px !important; }

/* ══════════════════════════════════════════════════════════════════
   PROFILE & SECURITY SECTIONS
══════════════════════════════════════════════════════════════════ */
.profile-avatar-modern {
  width: 68px !important;
  height: 68px !important;
  font-size: 24px !important;
  border-radius: 18px !important;
}
.profile-mini-metrics > div { padding: 10px 12px !important; border-radius: 12px !important; }
.profile-mini-metrics strong { font-size: 13px !important; font-weight: 700 !important; }
.profile-mini-metrics span { font-size: 9.5px !important; }
.security-kpis > div { padding: 10px 12px !important; border-radius: 12px !important; }
.security-kpis strong { font-size: 18px !important; letter-spacing: -0.03em !important; }
.security-kpis span { font-size: 9.5px !important; }
.role-guide { padding: 10px 12px !important; border-radius: 10px !important; }
.role-guide strong { font-size: 12.5px !important; font-weight: 700 !important; }
.role-guide span { font-size: 10.5px !important; }
.security-reminder {
  padding: 10px 12px !important;
  border-radius: 10px !important;
  font-size: 11.5px !important;
  gap: 8px !important;
}
.security-reminder i, .security-reminder svg { width: 14px !important; height: 14px !important; }

/* Users table */
.user-av {
  width: 30px !important;
  height: 30px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
}

/* ══════════════════════════════════════════════════════════════════
   AREA SECTION
══════════════════════════════════════════════════════════════════ */
.area-icon-chip {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
}
.area-icon-chip i { width: 14px !important; height: 14px !important; }
.area-page-stats strong { font-size: 22px !important; }
.area-page-stats span { font-size: 10px !important; }
.area-page-stats div { padding: 12px !important; border-radius: 10px !important; }

/* ══════════════════════════════════════════════════════════════════
   INFO BOX & TEST RESULT
══════════════════════════════════════════════════════════════════ */
.info-key { font-size: 11.5px !important; font-weight: 500 !important; }
.info-val { font-size: 12.5px !important; font-weight: 600 !important; }
.info-item { padding: 8px 0 !important; }
.test-result {
  font-size: 12px !important;
  padding: 9px 12px !important;
  border-radius: 7px !important;
}
.test-result i { width: 13px !important; height: 13px !important; }

/* ══════════════════════════════════════════════════════════════════
   SEVER CHIPS & BADGES
══════════════════════════════════════════════════════════════════ */
.sev-chip {
  font-size: 9.5px !important;
  padding: 3px 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}
.area-badge {
  font-size: 9.5px !important;
  padding: 2px 7px !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
══════════════════════════════════════════════════════════════════ */
.toast {
  font-size: 12.5px !important;
  padding: 10px 14px !important;
  border-radius: 9px !important;
  min-width: 200px !important;
  gap: 8px !important;
}
.toast i { width: 14px !important; height: 14px !important; }

/* ══════════════════════════════════════════════════════════════════
   RECIPIENT LIST
══════════════════════════════════════════════════════════════════ */
.rec-avatar {
  width: 28px !important;
  height: 28px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.rec-name { font-size: 12.5px !important; }
.rec-email { font-size: 10.5px !important; }
.rec-alert-chip { font-size: 9.5px !important; padding: 3px 6px !important; }
.recipient-row { padding: 9px !important; border-radius: 9px !important; }

/* ══════════════════════════════════════════════════════════════════
   EMPTY STATES
══════════════════════════════════════════════════════════════════ */
.empty-state { font-size: 12.5px !important; gap: 7px !important; }
.empty-state i { width: 14px !important; height: 14px !important; }
.empty-row { font-size: 12px !important; padding: 24px !important; }

/* ══════════════════════════════════════════════════════════════════
   FLOOR DESIGNER INTEGRATION
══════════════════════════════════════════════════════════════════ */
.floor-hero { margin-bottom: 14px !important; }
.floor-editor-shell { border-radius: 14px !important; }

/* ══════════════════════════════════════════════════════════════════
   REPORTS SECTION
══════════════════════════════════════════════════════════════════ */
.reports-hero { margin-bottom: 14px !important; }
.reports-toolbar { margin-bottom: 14px !important; }
.reports-kpis { gap: 10px !important; }
.pro-kpi { border-radius: 10px !important; }
.report-chart-card, .report-insights-card, .report-table-card {
  border-radius: 12px !important;
}
.insight-row { padding: 10px !important; border-radius: 9px !important; gap: 9px !important; }
.insight-row i, .insight-row svg { width: 15px !important; height: 15px !important; }
.insight-row span { font-size: 10px !important; }
.insight-row strong { font-size: 12.5px !important; }
.mini-event { padding: 8px !important; border-radius: 9px !important; gap: 8px !important; }
.mini-event strong { font-size: 11.5px !important; }
.mini-event small { font-size: 10.5px !important; }
.report-health { font-size: 9.5px !important; padding: 3px 7px !important; font-weight: 700 !important; }

/* ══════════════════════════════════════════════════════════════════
   SENSOR MODAL DETAIL
══════════════════════════════════════════════════════════════════ */
.sensor-detail-status strong {
  font-size: 30px !important;
  letter-spacing: -0.04em !important;
}
.threshold-stack strong { font-size: 16px !important; }
.disable-warning-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
}
.disable-warning-icon i, .disable-warning-icon svg { width: 18px !important; height: 18px !important; }
.disable-warning-panel { padding: 13px !important; border-radius: 12px !important; }
.disable-warning-panel h3 { font-size: 14px !important; margin-bottom: 3px !important; }
.disable-warning-panel p { font-size: 12px !important; }

/* ══════════════════════════════════════════════════════════════════
   PROFILE EDIT NOTE & SMTP NOTE
══════════════════════════════════════════════════════════════════ */
.profile-edit-note, .smtp-test-note {
  font-size: 11.5px !important;
  padding: 9px 11px !important;
  border-radius: 9px !important;
  gap: 7px !important;
}
.profile-edit-note i, .smtp-test-note i { width: 13px !important; height: 13px !important; }

/* ══════════════════════════════════════════════════════════════════
   LOGO UPLOAD AREA
══════════════════════════════════════════════════════════════════ */
.logo-preview-wrap {
  height: 100px !important;
  border-radius: 9px !important;
}
.logo-placeholder { font-size: 11.5px !important; }
.logo-placeholder i { width: 28px !important; height: 28px !important; }
.general-logo-tips span { font-size: 10.5px !important; }

/* ══════════════════════════════════════════════════════════════════
   MISC TAG / PLC UI FIXES
══════════════════════════════════════════════════════════════════ */
.tag-chip { font-size: 11.5px !important; }
.tag-chip button i { width: 11px !important; height: 11px !important; }
.sidebar-user { font-size: 10.5px !important; }

/* Sensor toggle section in modal */
.sensor-toggle-copy h4 {
  font-size: 12.5px !important;
  font-weight: 700 !important;
}
.sensor-toggle-copy h4 i { width: 13px !important; height: 13px !important; }
.sensor-toggle-copy p { font-size: 11px !important; }
.sensor-info-strip {
  font-size: 10px !important;
  padding: 7px 9px !important;
  border-radius: 8px !important;
  gap: 6px 10px !important;
}

/* ══════════════════════════════════════════════════════════════════
   TOPBAR COLLAPSE BUTTON ROTATION (preserve this behaviour)
══════════════════════════════════════════════════════════════════ */
.admin-sidebar.collapsed ~ .admin-main .topbar-collapse-btn i {
  transform: rotate(180deg) !important;
}

/* ══════════════════════════════════════════════════════════════════
   LIGHT THEME REFINEMENTS
══════════════════════════════════════════════════════════════════ */
[data-theme="light"] .admin-sidebar {
  box-shadow: 1px 0 0 rgba(0,0,0,.06) !important;
}
[data-theme="light"] .admin-topbar {
  box-shadow: 0 1px 0 rgba(0,0,0,.06) !important;
}
[data-theme="light"] .admin-card {
  box-shadow: 0 1px 4px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.07) !important;
}
[data-theme="light"] .dash-stat-card {
  box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
}

/* ══════════════════════════════════════════════════════════════════
   TYPOGRAPHY POLISH — headings, display numbers, labels
══════════════════════════════════════════════════════════════════ */
.sidebar-name,
.topbar-title,
.section-heading,
.card-head,
.modal-head,
.sensor-modal-title,
.login-title {
  letter-spacing: -0.02em !important;
}

/* Tabular numbers for values */
.dash-stat-value,
.hero-status-tile-modern strong,
.sensor-health-strip strong,
.security-kpis strong,
.area-page-stats strong,
.plc-ip,
.topbar-clock,
.workflow-card strong {
  font-feature-settings: "tnum" !important;
  font-variant-numeric: tabular-nums !important;
}

/* Per-sensor float byte order UI */
.byte-order-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:78px;
  border-radius:999px;
  padding:4px 8px;
  border:1px solid rgba(148,163,184,.24);
  background:rgba(148,163,184,.10);
  color:var(--text-secondary);
  font-size:10.5px;
  font-weight:900;
  letter-spacing:.02em;
  white-space:nowrap;
}
.byte-order-badge.is-override{
  border-color:rgba(0,212,255,.34);
  background:rgba(0,212,255,.10);
  color:var(--accent);
}
.byte-order-badge.is-global{
  color:var(--text-muted);
}
[data-theme="light"] .byte-order-badge{background:#f6f9fc;}
[data-theme="light"] .byte-order-badge.is-override{background:#eaf8ff;}
@media(max-width:560px){.data-table{min-width:980px}}

/* ══════════════════════════════════════════════════════════════════
   Ultra modern login page + live PLC status
══════════════════════════════════════════════════════════════════ */
.login-modern {
  --login-bg: #050b16;
  --login-bg-2: #071425;
  --login-panel: rgba(15, 23, 42, .78);
  --login-panel-strong: rgba(17, 25, 42, .94);
  --login-line: rgba(125, 211, 252, .14);
  --login-cyan: #22d3ee;
  --login-blue: #38bdf8;
  --login-green: #22c55e;
  --login-amber: #f59e0b;
  --login-red: #ef4444;
  --login-muted: #8fa4c2;
  --login-text: #f8fbff;
  position: fixed !important;
  inset: 0 !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(46px, 7vw, 132px) !important;
  padding: clamp(22px, 4vw, 64px) !important;
  overflow: hidden !important;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(3, 7, 18, .98) 0%, rgba(7, 16, 32, .96) 44%, rgba(5, 11, 22, .98) 100%),
    radial-gradient(circle at 15% 18%, rgba(34, 211, 238, .24), transparent 36%),
    radial-gradient(circle at 83% 16%, rgba(59, 130, 246, .15), transparent 34%),
    radial-gradient(circle at 58% 86%, rgba(34, 197, 94, .10), transparent 38%) !important;
}
.login-modern::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -5;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(34,211,238,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.045) 1px, transparent 1px),
    linear-gradient(rgba(148,163,184,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.025) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px;
  mask-image: radial-gradient(circle at 44% 40%, rgba(0,0,0,.96), rgba(0,0,0,.52) 64%, transparent 100%);
  animation: loginGridMove 22s linear infinite;
}
.login-modern::after {
  content: '';
  position: absolute;
  inset: -40%;
  z-index: -4;
  pointer-events: none;
  background: conic-gradient(from 90deg at 50% 50%, transparent 0deg, rgba(34,211,238,.10) 70deg, transparent 118deg, rgba(34,197,94,.07) 205deg, transparent 290deg, rgba(59,130,246,.08) 342deg, transparent 360deg);
  filter: blur(28px);
  opacity: .72;
  animation: loginSlowRotate 34s linear infinite;
}
.login-noise {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .22;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 3px 3px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.86), rgba(0,0,0,.26));
}
.login-ambient {
  position: absolute;
  z-index: -3;
  border-radius: 999px;
  filter: blur(4px);
  opacity: .85;
  pointer-events: none;
}
.login-ambient-a { width: 6px; height: 6px; left: 8%; top: 14%; background: var(--login-cyan); box-shadow: 0 0 24px rgba(34,211,238,.85); animation: loginFloatA 9s ease-in-out infinite; }
.login-ambient-b { width: 4px; height: 4px; left: 27%; top: 72%; background: var(--login-green); box-shadow: 0 0 22px rgba(34,197,94,.8); animation: loginFloatB 11s ease-in-out infinite; }
.login-ambient-c { width: 5px; height: 5px; right: 18%; top: 18%; background: #a3e635; box-shadow: 0 0 22px rgba(163,230,53,.75); animation: loginFloatC 10s ease-in-out infinite; }

.login-showcase {
  width: min(820px, 52vw);
  max-width: 860px;
  min-width: 420px;
  color: var(--login-text);
  z-index: 2;
  animation: loginFadeUp .55s ease both;
}
.login-platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 10px;
  margin-bottom: clamp(30px, 4.5vw, 58px);
  border-radius: 999px;
  border: 1px solid rgba(34,211,238,.25);
  background: linear-gradient(90deg, rgba(14,165,233,.18), rgba(6,182,212,.08));
  color: var(--login-cyan);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: 0 14px 40px rgba(14,165,233,.11), inset 0 1px 0 rgba(255,255,255,.08);
}
.login-badge-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--login-cyan);
  background: rgba(34,211,238,.14);
  box-shadow: 0 0 0 5px rgba(34,211,238,.06);
}
.login-badge-icon i,
.login-platform-badge svg { width: 13px !important; height: 13px !important; }
.login-hero-copy { max-width: 760px; }
.login-kicker {
  display: block;
  margin-bottom: 12px;
  color: #aac3e3;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.login-hero-copy h1 {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: clamp(44px, 4.2vw, 76px);
  line-height: .98;
  letter-spacing: -.065em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 0 rgba(0,0,0,.18), 0 28px 80px rgba(0,0,0,.55);
}
.login-hero-copy h1 span { font-weight: 850; }
.login-hero-copy h1 strong {
  font-weight: 950;
  background: linear-gradient(90deg, #22d3ee 0%, #38bdf8 42%, #818cf8 86%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.login-hero-copy p {
  max-width: 610px;
  margin: 26px 0 0;
  color: var(--login-muted);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.7;
  letter-spacing: .005em;
}
.login-feature-list {
  margin-top: 42px;
  display: grid;
  gap: 14px;
  max-width: 620px;
}
.login-feature-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: center;
  color: #bfdbfe;
}
.login-feature-row > span {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(34,211,238,.13);
  background: rgba(34,211,238,.08);
  color: var(--login-cyan);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.login-feature-row:nth-child(2) > span { background: rgba(34,197,94,.08); color: var(--login-green); border-color: rgba(34,197,94,.16); }
.login-feature-row:nth-child(3) > span { background: rgba(99,102,241,.10); color: #818cf8; border-color: rgba(129,140,248,.18); }
.login-feature-row svg { width: 18px !important; height: 18px !important; }
.login-feature-row strong {
  display: block;
  color: #dbeafe;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: -.01em;
}
.login-feature-row small {
  display: block;
  margin-top: 3px;
  color: #7f93b4;
  font-size: 12.5px;
  line-height: 1.35;
}
.login-plc-card {
  position: relative;
  margin-top: 54px;
  width: min(430px, 100%);
  display: grid;
  grid-template-columns: 48px 1fr 14px;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(10,25,42,.72), rgba(8,19,32,.56));
  border: 1px solid rgba(34,211,238,.17);
  box-shadow: 0 18px 46px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.07);
  overflow: hidden;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.login-plc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .55;
  background: radial-gradient(circle at 20% 50%, rgba(34,211,238,.14), transparent 34%);
  pointer-events: none;
}
.login-plc-icon {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(34,211,238,.10);
  color: var(--login-cyan);
  border: 1px solid rgba(34,211,238,.18);
  z-index: 1;
}
.login-plc-icon svg { width: 18px !important; height: 18px !important; z-index: 2; }
.login-plc-rings,
.login-plc-rings::before,
.login-plc-rings::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px solid currentColor;
  opacity: .22;
  animation: loginPulseRing 2.2s ease-out infinite;
}
.login-plc-rings::before { inset: -8px; animation-delay: .35s; }
.login-plc-rings::after { inset: -14px; animation-delay: .7s; }
.login-plc-copy { position: relative; z-index: 1; min-width: 0; }
.login-plc-copy span {
  display: inline-flex;
  align-items: center;
  min-height: 16px;
  padding: 2px 7px;
  border-radius: 5px;
  margin-bottom: 4px;
  background: rgba(255,255,255,.10);
  color: #e0f2fe;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.login-plc-copy strong {
  display: block;
  color: #eafff4;
  font-size: 14px;
  font-weight: 900;
}
.login-plc-copy small {
  display: block;
  margin-top: 2px;
  color: #88a0be;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.login-plc-dot {
  position: relative;
  z-index: 1;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 0 6px rgba(148,163,184,.12), 0 0 18px rgba(148,163,184,.55);
}
.login-plc-card.is-online { border-color: rgba(34,197,94,.35); box-shadow: 0 18px 52px rgba(34,197,94,.10), inset 0 1px 0 rgba(255,255,255,.07); }
.login-plc-card.is-online::before { background: radial-gradient(circle at 20% 50%, rgba(34,197,94,.18), transparent 34%); }
.login-plc-card.is-online .login-plc-icon { background: rgba(34,197,94,.12); color: var(--login-green); border-color: rgba(34,197,94,.22); }
.login-plc-card.is-online .login-plc-dot { background: var(--login-green); box-shadow: 0 0 0 7px rgba(34,197,94,.13), 0 0 24px rgba(34,197,94,.85); animation: loginDotBeat 1.25s ease-in-out infinite; }
.login-plc-card.is-offline { border-color: rgba(239,68,68,.32); box-shadow: 0 18px 52px rgba(239,68,68,.08), inset 0 1px 0 rgba(255,255,255,.07); }
.login-plc-card.is-offline::before { background: radial-gradient(circle at 20% 50%, rgba(239,68,68,.15), transparent 34%); }
.login-plc-card.is-offline .login-plc-icon { background: rgba(239,68,68,.12); color: var(--login-red); border-color: rgba(239,68,68,.22); }
.login-plc-card.is-offline .login-plc-dot { background: var(--login-red); box-shadow: 0 0 0 7px rgba(239,68,68,.11), 0 0 20px rgba(239,68,68,.68); }
.login-plc-card.is-simulation { border-color: rgba(245,158,11,.36); box-shadow: 0 18px 52px rgba(245,158,11,.08), inset 0 1px 0 rgba(255,255,255,.07); }
.login-plc-card.is-simulation::before { background: radial-gradient(circle at 20% 50%, rgba(245,158,11,.17), transparent 34%); }
.login-plc-card.is-simulation .login-plc-icon { background: rgba(245,158,11,.13); color: var(--login-amber); border-color: rgba(245,158,11,.24); }
.login-plc-card.is-simulation .login-plc-dot { background: var(--login-amber); box-shadow: 0 0 0 7px rgba(245,158,11,.12), 0 0 20px rgba(245,158,11,.72); }

.login-auth-panel {
  width: min(450px, 100%);
  z-index: 2;
  animation: loginFadeUp .65s ease .08s both;
}
.login-card-modern.login-card {
  position: relative !important;
  width: min(430px, calc(100vw - 30px)) !important;
  max-width: 430px !important;
  padding: 32px !important;
  border-radius: 28px !important;
  text-align: left !important;
  overflow: hidden !important;
  color: var(--login-text) !important;
  background: linear-gradient(180deg, rgba(15,23,42,.88), rgba(13,20,34,.82)) !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 1px rgba(255,255,255,.03) !important;
  backdrop-filter: blur(22px);
}
.login-card-modern.login-card::before {
  height: 100% !important;
  opacity: .9;
  background:
    radial-gradient(circle at 20% 0%, rgba(34,211,238,.16), transparent 34%),
    radial-gradient(circle at 100% 20%, rgba(129,140,248,.14), transparent 34%),
    linear-gradient(90deg, rgba(34,211,238,.55), rgba(34,197,94,.32), rgba(129,140,248,.45)) !important;
  mask-image: linear-gradient(to bottom, #000 0, transparent 5px, transparent 100%);
  pointer-events: none;
}
.login-card-glow {
  position: absolute;
  width: 190px;
  height: 190px;
  right: -98px;
  top: -94px;
  border-radius: 999px;
  pointer-events: none;
  background: rgba(34,211,238,.18);
  filter: blur(34px);
}
.login-brand-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(15,23,42,.58), rgba(30,41,59,.32));
  border: 1px solid rgba(148,163,184,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.login-card-modern .login-logo {
  margin: 0 !important;
  justify-content: flex-start !important;
}
.login-card-modern .login-icon-wrap {
  width: 58px !important;
  height: 58px !important;
  border-radius: 17px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.login-card-modern #loginLogo {
  width: 58px !important;
  height: 58px !important;
  border-radius: 17px !important;
  padding: 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 42px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.18);
}
.login-brand-stack {
  min-width: 0;
  display: grid;
  gap: 9px;
}
.login-brand-item {
  min-width: 0;
}
.login-brand-label {
  display: block !important;
  margin: 0 0 3px !important;
  color: rgba(34,211,238,.82) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
.login-brand-text em {
  display: block;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.25;
  font-style: normal;
  font-weight: 750;
  letter-spacing: -.01em;
}
.login-brand-text strong {
  display: block;
  color: #f8fafc;
  font-size: 17px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -.025em;
}
.login-brand-text > span {
  display: block;
  margin-top: 3px;
  color: #8aa0bf;
  font-size: 12px;
  font-weight: 650;
}
.login-card-heading { position: relative; z-index: 1; margin-bottom: 22px; }
.login-card-modern .login-badge {
  margin: 0 0 16px !important;
  color: var(--login-cyan) !important;
  background: rgba(34,211,238,.11) !important;
  border-color: rgba(34,211,238,.20) !important;
  box-shadow: none !important;
}
.login-card-modern .login-title {
  margin: 0 0 6px !important;
  color: #ffffff !important;
  font-size: 27px !important;
  font-weight: 950 !important;
  letter-spacing: -.045em !important;
}
.login-card-modern .login-sub {
  margin: 0 !important;
  color: #8ca0bd !important;
  font-size: 13.5px !important;
  line-height: 1.5;
}
.login-card-modern .login-form {
  position: relative;
  z-index: 1;
  gap: 10px !important;
}
.login-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  color: #8fa3c0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.login-label svg { width: 12px !important; height: 12px !important; }
.login-card-modern .login-field { position: relative; }
.login-card-modern .login-field-icon {
  left: 15px !important;
  color: #667996 !important;
  transition: color .2s ease;
}
.login-card-modern .login-input {
  height: 50px !important;
  padding: 0 46px 0 45px !important;
  border-radius: 13px !important;
  color: #f8fafc !important;
  background: rgba(30,41,59,.66) !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  font-size: 14px !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.login-card-modern .login-input::placeholder { color: rgba(148,163,184,.44); }
.login-card-modern .login-input:focus {
  background: rgba(30,41,59,.86) !important;
  border-color: rgba(34,211,238,.55) !important;
  box-shadow: 0 0 0 4px rgba(34,211,238,.10), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.login-card-modern .login-field:focus-within .login-field-icon { color: var(--login-cyan) !important; }
.login-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7184a0;
  background: transparent;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.login-password-toggle:hover { color: var(--login-cyan); background: rgba(34,211,238,.08); }
.login-password-toggle svg { width: 16px !important; height: 16px !important; }
.login-card-modern .login-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: rgba(239,68,68,.11) !important;
  border-color: rgba(239,68,68,.24) !important;
  color: #fecaca !important;
}
.login-submit.btn {
  position: relative;
  height: 52px !important;
  margin-top: 8px;
  border-radius: 13px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  color: white !important;
  border: 0 !important;
  background: linear-gradient(135deg, #22d3ee 0%, #0ea5e9 54%, #0284c7 100%) !important;
  box-shadow: 0 18px 34px rgba(14,165,233,.25), inset 0 1px 0 rgba(255,255,255,.25) !important;
  overflow: hidden;
}
.login-submit.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transition: transform .65s ease;
}
.login-submit.btn:hover::before { transform: translateX(100%); }
.login-submit.btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.login-card-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  color: #72839d;
  font-size: 12px;
}
.login-card-footer > span,
.login-card-modern .login-back {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  color: #8093ad !important;
  text-decoration: none;
  font-size: 12px !important;
}
.login-card-modern .login-back:hover { color: var(--login-cyan) !important; }
.login-card-footer svg { width: 13px !important; height: 13px !important; }

@keyframes loginGridMove {
  0% { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 64px 64px, 64px 64px, 16px 16px, 16px 16px; }
}
@keyframes loginSlowRotate { to { transform: rotate(360deg); } }
@keyframes loginFloatA { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(18px,32px,0); } }
@keyframes loginFloatB { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-24px,-28px,0); } }
@keyframes loginFloatC { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(28px,38px,0); } }
@keyframes loginFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes loginPulseRing { 0% { transform: scale(.84); opacity: .28; } 75%,100% { transform: scale(1.35); opacity: 0; } }
@keyframes loginDotBeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.35); } }

@media (max-width: 1180px) {
  .login-modern { gap: 36px !important; }
  .login-showcase { width: min(620px, 50vw); min-width: 360px; }
  .login-hero-copy h1 { font-size: clamp(38px, 5vw, 58px); }
  .login-feature-list { max-width: 560px; }
}
@media (max-width: 960px) {
  .login-modern {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-direction: column !important;
    gap: 24px !important;
    overflow-y: auto !important;
  }
  .login-showcase,
  .login-auth-panel { width: 100%; min-width: 0; max-width: 720px; margin: 0 auto; }
  .login-platform-badge { margin-bottom: 24px; }
  .login-feature-list { margin-top: 24px; }
  .login-plc-card { margin-top: 24px; width: 100%; }
  .login-card-modern.login-card { max-width: 720px !important; width: 100% !important; }
}
@media (max-width: 640px) {
  .login-modern { padding: 18px !important; }
  .login-platform-badge { font-size: 10px; letter-spacing: .12em; }
  .login-hero-copy h1 { font-size: 38px; }
  .login-hero-copy p { margin-top: 16px; font-size: 14px; }
  .login-feature-row { grid-template-columns: 36px 1fr; gap: 11px; }
  .login-feature-row > span { width: 36px; height: 36px; border-radius: 12px; }
  .login-feature-row small { display: none; }
  .login-card-modern.login-card { padding: 22px !important; border-radius: 22px !important; }
  .login-brand-row { grid-template-columns: 50px 1fr; gap: 12px; margin-bottom: 20px; padding: 12px; }
  .login-card-modern .login-icon-wrap,
  .login-card-modern #loginLogo { width: 50px !important; height: 50px !important; }
  .login-card-footer { flex-direction: column; align-items: flex-start; }
  .login-plc-card { grid-template-columns: 42px 1fr 10px; padding: 14px; }
  .login-plc-copy small { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .login-modern::before,
  .login-modern::after,
  .login-ambient,
  .login-plc-rings,
  .login-plc-rings::before,
  .login-plc-rings::after,
  .login-plc-card.is-online .login-plc-dot,
  .login-showcase,
  .login-auth-panel { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   Login branding refinements
   - Plain logo/icon in login card (no logo border/background)
   - Smaller left-side company/site title
   - Removed animated background rotation/movement
══════════════════════════════════════════════════════════════════ */
.login-modern::before {
  animation: none !important;
  background-position: 0 0, 0 0, 0 0, 0 0 !important;
}
.login-modern::after {
  animation: none !important;
  transform: none !important;
  opacity: .38 !important;
  background:
    radial-gradient(circle at 72% 22%, rgba(34,211,238,.10), transparent 30%),
    radial-gradient(circle at 22% 70%, rgba(34,197,94,.065), transparent 32%),
    radial-gradient(circle at 55% 48%, rgba(59,130,246,.075), transparent 40%) !important;
  filter: blur(30px) !important;
}
.login-ambient-a,
.login-ambient-b,
.login-ambient-c {
  animation: none !important;
}
.login-hero-copy h1 {
  font-size: clamp(34px, 3.15vw, 54px) !important;
  line-height: 1.04 !important;
  gap: 3px !important;
  letter-spacing: -.052em !important;
}
.login-hero-copy h1 span {
  font-weight: 820 !important;
}
.login-hero-copy h1 strong {
  font-weight: 920 !important;
}
.login-card-modern .login-logo {
  align-items: center !important;
}
.login-card-modern .login-icon-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.login-card-modern #loginLogo {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}
.login-card-modern .login-icon-wrap i,
.login-card-modern .login-icon-wrap svg {
  color: var(--login-cyan) !important;
  filter: drop-shadow(0 8px 18px rgba(34,211,238,.22));
}
@media (max-width: 1180px) {
  .login-hero-copy h1 { font-size: clamp(31px, 4.1vw, 46px) !important; }
}
@media (max-width: 640px) {
  .login-hero-copy h1 { font-size: 31px !important; }
}