/* stack/app/static/css/infomail.css
 *
 * InfoMail additions on top of the InfoPanel design system (dist/style.css,
 * compiled Tailwind with the amz-* / cyber-* tokens). Plain CSS on purpose:
 * no build step is needed to change it. Prefixed im-* except the sidebar
 * rules, which are InfoPanel's own (they lived inline in its layout).
 */
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }

/* --- Utilities absent from the compiled bundle --- */
.font-normal { font-weight: 400; }
.font-sans { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
.normal-case { text-transform: none; }
.max-w-xl { max-width: 36rem; }
.mt-10 { margin-top: 2.5rem; }
.p-8 { padding: 2rem; }
@media (min-width: 768px) { .md\:inline { display: inline; } }

/* --- Scrollbars: thin and themed everywhere, invisible in the sidebar --- */
* { scrollbar-width: thin; scrollbar-color: #AAB7B8 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #AAB7B8; border: 2px solid transparent; border-radius: 999px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #879596; }
::-webkit-scrollbar-corner { background: transparent; }
#sidebar, #sidebar * { scrollbar-width: none; -ms-overflow-style: none; }
#sidebar ::-webkit-scrollbar, #sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* --- Sidebar (InfoPanel) --- */
#sidebar.collapsed { width: 3.5rem; }
#sidebar.collapsed #logo-text,
#sidebar.collapsed .sidebar-text,
#sidebar.collapsed .nav-section-label { display: none; }
#sidebar.collapsed .nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
#sidebar.collapsed .nav-group { margin: 0; padding: 0.25rem 0; border-left: 0; }
#sidebar.collapsed .nav-group + .nav-group { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.nav-group { margin: 0.25rem 0.75rem 0.5rem 1.25rem; padding: 0.125rem 0; border-left: 1px solid rgba(255, 255, 255, 0.15); }
.nav-group .nav-link { margin: 0.125rem 0 0.125rem -2px; padding-left: 0.875rem; border-left: 3px solid transparent; border-radius: 0 2px 2px 0; text-decoration: none; }
.nav-link.active { background-color: #37475A; border-left: 3px solid #FF9900; color: #FFFFFF; }
.nav-link.active i { color: #FF9900; }

/* --- Page structure --- */
.im-page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.im-breadcrumb { display: flex; gap: 0.5rem; align-items: center; font-size: 0.8125rem; margin-bottom: 0.75rem; color: #5F6B7A; }
.im-card-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 1rem; border-bottom: 1px solid #D5DBDB; background: #FAFAFA; }
.im-card-header h2 { font-size: 0.875rem; font-weight: 600; color: #16191F; }

/* --- Forms --- */
.im-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.im-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; align-items: end; }
.im-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 10rem; }
.im-field--wide { flex: 1 1 18rem; }
.im-field label { font-size: 0.75rem; font-weight: 600; color: #5F6B7A; }
.im-address { display: flex; align-items: center; gap: 0.375rem; }
.im-address > span { color: #5F6B7A; font-weight: 600; }
.im-check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.im-inline-form .cyber-input { min-width: 0; }

/* --- Status chips: icon + label, never colour alone --- */
.im-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.0625rem 0.5rem; border: 1px solid #D5DBDB; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; text-transform: capitalize; }
.im-chip--ok { color: #1D8102; }
.im-chip--warning { color: #B35C00; }
.im-chip--error { color: #D13212; }
.im-chip--info { color: #5F6B7A; }

.im-service-grid { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.im-service { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border: 1px solid #D5DBDB; border-radius: 2px; font-size: 0.8125rem; background: #FFFFFF; }
.im-service.is-up i { color: #1D8102; }
.im-service.is-down { border-color: #D13212; color: #D13212; font-weight: 600; }

.im-ip-chip { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0.125rem; padding: 0.0625rem 0.5rem; border: 1px solid #D5DBDB; border-radius: 2px; font-family: ui-monospace, monospace; font-size: 0.75rem; background: #FFFFFF; cursor: pointer; }
.im-ip-chip:hover { border-color: #D13212; color: #D13212; }

/* --- Key/value lists --- */
.im-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.375rem 1rem; font-size: 0.875rem; }
.im-facts dt { color: #5F6B7A; }
.im-facts dd { margin: 0; color: #16191F; }

/* --- Meter --- */
.im-meter { height: 0.375rem; background: #EAEDED; border-radius: 999px; overflow: hidden; margin-top: 0.25rem; }
.im-meter-fill { height: 100%; background: #1D8102; border-radius: 999px; }
.im-meter-fill--warning { background: #B35C00; }
.im-meter-fill--critical { background: #D13212; }

/* --- Logs and code --- */
.im-log { margin: 0; padding: 0.75rem 1rem; max-height: 24rem; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; line-height: 1.5; white-space: pre-wrap; word-break: break-all; color: #16191F; background: #FAFAFA; }
.im-log--tall { max-height: 70vh; }
.im-record-value { max-width: 40rem; }
.im-reason { max-width: 22rem; }
.im-chart { position: relative; height: 18rem; }
.im-qr svg { width: 9rem; height: 9rem; background: #FFFFFF; padding: 0.25rem; }

/* --- Dark theme --- */
html[data-theme="dark"] * { scrollbar-color: #5a6675 transparent; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: #5a6675; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: #7d8998; }
html[data-theme="dark"] .im-card-header { background: #253449; border-color: #465261; }
html[data-theme="dark"] .im-card-header h2,
html[data-theme="dark"] .im-facts dd,
html[data-theme="dark"] .im-log { color: #f2f3f3; }
html[data-theme="dark"] .im-log { background: #111a27; }
html[data-theme="dark"] .im-chip,
html[data-theme="dark"] .im-service,
html[data-theme="dark"] .im-ip-chip { border-color: #5a6675; background: #1b2638; }
html[data-theme="dark"] .im-chip--ok,
html[data-theme="dark"] .im-service.is-up i { color: #5fd16a; }
html[data-theme="dark"] .im-chip--warning { color: #ffb45c; }
html[data-theme="dark"] .im-chip--error,
html[data-theme="dark"] .im-service.is-down { color: #ff7b72; border-color: #ff7b72; }
html[data-theme="dark"] .im-chip--info,
html[data-theme="dark"] .im-facts dt,
html[data-theme="dark"] .im-field label,
html[data-theme="dark"] .im-breadcrumb { color: #b7c4d1; }
html[data-theme="dark"] .im-meter { background: #34455e; }
html[data-theme="dark"] .bg-amber-50 { background-color: #423719; }