.alarm-dispatcher-page { display: grid; gap: 16px; padding: 16px; }
.alarm-dispatcher-page .ui-panel { border: 1px solid #dce5e9; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(25, 55, 69, .055); }
.alarm-dispatcher-eyebrow { color: #e85a32; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.alarm-dispatcher-hero { position: relative; display: flex; min-height: 138px; align-items: center; justify-content: space-between; gap: 32px; padding: 28px 30px; overflow: hidden; background: linear-gradient(135deg, #fff 0%, #f5fafb 100%) !important; }
.alarm-dispatcher-hero::before { position: absolute; inset: 0 auto 0 0; width: 5px; content: ""; background: #ed5a36; }
.alarm-dispatcher-hero::after { position: absolute; right: -58px; bottom: -98px; width: 230px; height: 230px; border: 34px solid rgba(24, 78, 101, .035); border-radius: 50%; content: ""; }
.alarm-dispatcher-hero-copy { position: relative; z-index: 1; }
.alarm-dispatcher-hero h2 { margin: 7px 0 6px; color: #1c3440; font-size: clamp(20px, 2vw, 27px); line-height: 1.15; }
.alarm-dispatcher-hero p { max-width: 800px; margin: 0; color: #61737e; font-size: 13px; line-height: 1.6; }
.alarm-dispatcher-hero-state { position: relative; z-index: 1; display: grid; min-width: 168px; justify-items: center; gap: 7px; padding: 18px 20px; border: 1px solid #d9e8e0; border-radius: 12px; background: rgba(255,255,255,.88); }
.alarm-dispatcher-hero-state small { color: #77868d; font-size: 9px; }
.alarm-dispatcher-status { display: inline-flex; align-items: center; gap: 8px; color: #17633c; font-size: 12px; font-weight: 800; white-space: nowrap; }
.alarm-dispatcher-status i { width: 8px; height: 8px; border-radius: 50%; background: #2f9b62; box-shadow: 0 0 0 4px rgba(47,155,98,.14); }
.alarm-dispatcher-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.alarm-dispatcher-cards article { min-height: 112px; padding: 20px 22px; }
.alarm-dispatcher-cards span,.alarm-dispatcher-cards small { display: block; color: #71838d; font-size: 10px; }
.alarm-dispatcher-cards span { font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.alarm-dispatcher-cards span b { display: inline-grid; width: 23px; height: 23px; margin-right: 7px; place-items: center; border-radius: 7px; color: #d94d2b; background: #fff0eb; font-size: 9px; }
.alarm-dispatcher-cards strong { display: block; margin: 12px 0 5px; color: #173f52; font-size: 14px; overflow-wrap: anywhere; }
.alarm-dispatcher-cards small { line-height: 1.45; }
.alarm-dispatcher-list { padding: 24px 26px 26px; }
.alarm-dispatcher-list > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.alarm-dispatcher-list h2 { margin: 5px 0 2px; }
.alarm-dispatcher-list header p { margin: 0; color: #71838d; }
.alarm-dispatcher-total { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; color: #173f52; background: #edf3f5; font-size: 17px; font-weight: 800; }
.alarm-dispatcher-records { display: grid; gap: 10px; }
.alarm-dispatcher-record { display: grid; grid-template-columns: 78px minmax(220px, 1fr) 86px 100px; align-items: center; gap: 18px; padding: 16px 18px; border: 1px solid #dfe7ea; border-radius: 10px; background: #fbfcfd; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.alarm-dispatcher-record:hover { border-color: #c8d8de; box-shadow: 0 7px 18px rgba(25, 55, 69, .07); transform: translateY(-1px); }
.alarm-dispatcher-record h3 { margin: 0 0 3px; color: #243943; font-size: 14px; }
.alarm-dispatcher-record p { margin: 0 0 4px; color: #637783; font-size: 10px; }
.alarm-dispatcher-record small { color: #81909a; font-size: 9px; }
.alarm-dispatcher-priority,.alarm-dispatcher-state { justify-self: start; padding: 5px 8px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.alarm-dispatcher-priority { color: #516671; background: #edf2f4; }
.alarm-dispatcher-priority.is-high { color: #94500d; background: #fff3db; }
.alarm-dispatcher-priority.is-critical { color: #a62828; background: #ffe7e7; }
.alarm-dispatcher-state { color: #80551a; background: #fff1d8; }
.alarm-dispatcher-state.is-ready { color: #17633c; background: #e5f6ed; }
.alarm-dispatcher-recipient { display: grid; justify-items: center; }
.alarm-dispatcher-recipient strong { color: #173f52; font-size: 18px; }
.alarm-dispatcher-empty { padding: 42px 30px; border: 1px dashed #cbd9df; border-radius: 11px; color: #627682; text-align: center; background: #fafcfd; }
.alarm-dispatcher-empty strong { color: #2a414d; }
.alarm-dispatcher-empty p { margin: 5px 0 0; }
@media (max-width: 850px) { .alarm-dispatcher-cards { grid-template-columns: 1fr; } .alarm-dispatcher-record { grid-template-columns: 1fr auto; } .alarm-dispatcher-record > div:nth-child(2) { grid-column: 1 / -1; grid-row: 1; } }
@media (max-width: 600px) { .alarm-dispatcher-page { padding: 10px; } .alarm-dispatcher-hero { align-items: flex-start; flex-direction: column; padding: 23px 21px; } .alarm-dispatcher-hero-state { width: 100%; box-sizing: border-box; } .alarm-dispatcher-list { padding: 20px 16px; } .alarm-dispatcher-record { grid-template-columns: 1fr; } .alarm-dispatcher-recipient { justify-items: start; } }