/* ==========================================================================
   BRVIN — IoT Crane Deflection Monitoring System v1.0
   Full-Device Responsive UI/UX Stylesheet (Mobile, Tablet, Laptop, Desktop)
   ========================================================================== */

:root {
    --bg-main: #262F43;
    --bg-secondary: #30394D;
    --bg-card: #373E51;
    --bg-card-dark: #333A4C;
    --bg-selected-blue: #1C3E54;
    --border-selected-blue: #3282B5;
    --bg-selected-green: #203D4B;
    --border-selected-green: #387F6E;
    --accent-primary: #1C6BA4;
    --accent-primary-hover: #217BC0;
    --accent-red: #DF3E36;
    --accent-red-hover: #E53935;
    --status-normal: #4DBB86;
    --status-warning: #E8B94F;
    --status-critical: #E34B4B;
    --status-offline: #8F99AD;
    --accent-cyan: #5AC8FA;
    --text-primary: #F5F6FA;
    --text-secondary: #B9C0CE;
    --border-subtle: rgba(185, 192, 206, 0.22);
    --font-sans: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ==========================================================================
   SCREEN ONE — FULL-VIEWPORT LOGIN PAGE (/Account/Login)
   ========================================================================== */

.brvin-login-body {
    background-color: #C9D6E8;
    min-height: 100vh;
    width: 100%;
}

.login-viewport-wrapper {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.login-screen-card {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    background-color: #C9D6E8;
}

.login-bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
}

.login-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(218, 229, 242, 0.14) 0%,
        rgba(210, 223, 240, 0.20) 40%,
        rgba(34, 45, 64, 0.25) 78%,
        rgba(34, 45, 64, 0.48) 100%
    );
    z-index: 2;
}

.login-top-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    width: clamp(280px, 55vw, 620px);
    height: clamp(110px, 16vh, 175px);
    z-index: 3;
    pointer-events: none;
}

.login-content-area {
    position: relative;
    z-index: 4;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 20px 32px;
    width: 100%;
}

.login-center-box {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
}

.login-brand-header {
    text-align: center;
    margin-bottom: clamp(28px, 4.5vh, 46px);
}

.brvin-logo-login {
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
}

.brvin-logo-svg-dark {
    width: clamp(240px, 68vw, 320px);
    height: auto;
    filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.4));
}

.login-tagline {
    margin: 0;
    font-size: clamp(0.95rem, 1.5vw, 1.12rem);
    font-weight: 500;
    color: #1E2538;
    letter-spacing: 0.25px;
}

.login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.login-error-banner {
    display: none;
    background: rgba(223, 62, 54, 0.95);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 14px;
    text-align: center;
}

.login-error-banner.is-visible {
    display: block;
}

.login-input-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 54px;
    background: rgba(41, 49, 69, 0.90);
    border: 1.5px solid rgba(132, 147, 174, 0.48);
    border-radius: 12px;
    padding: 0 15px;
    margin-bottom: 14px;
    backdrop-filter: blur(5px);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.login-input-group:focus-within {
    border-color: #FFFFFF;
    background: rgba(34, 42, 60, 0.96);
}

.login-input-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.login-input-control {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #F5F6FA;
    font-size: 0.98rem;
    font-weight: 400;
    width: 100%;
}

.login-input-control::placeholder {
    color: #DCE2EE;
    opacity: 0.92;
}

.login-pwd-toggle {
    background: transparent;
    border: none;
    color: #B9C0CE;
    padding: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.login-pwd-toggle:hover {
    color: #FFFFFF;
}

.login-submit-btn {
    margin-top: 24px;
    width: 100%;
    height: 54px;
    background-color: var(--accent-red);
    color: #FFFFFF;
    border: 2px solid #2A3142;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.08s ease;
}

.login-submit-btn:hover {
    background-color: var(--accent-red-hover);
}

.login-submit-btn:active {
    transform: scale(0.99);
}

.login-submit-btn:disabled {
    opacity: 0.78;
    cursor: wait;
}

.login-btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: brvin-spin 0.7s linear infinite;
}

@keyframes brvin-spin {
    to { transform: rotate(360deg); }
}

.login-footer {
    position: relative;
    z-index: 4;
    width: 100%;
    background-color: #303748;
    padding: 15px 18px 16px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.login-footer-corner {
    position: absolute;
    top: -1px;
    left: 0;
    width: 0;
    height: 0;
    border-top: 18px solid var(--accent-red);
    border-right: 20px solid transparent;
}

.login-footer-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 400;
    color: #F5F6FA;
    letter-spacing: 0.2px;
}

.login-footer-version {
    margin: 2px 0 0;
    font-size: 0.90rem;
    font-weight: 400;
    color: #DCE2EE;
}

/* ==========================================================================
   SCREEN TWO — FULL-VIEWPORT MAIN MONITORING DASHBOARD (/Home/Index)
   ========================================================================== */

.brvin-dashboard-body {
    background-color: var(--bg-main);
    min-height: 100vh;
    width: 100%;
}

.dashboard-workspace {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-main);
}

.monitoring-console-card {
    width: 100%;
    max-width: 1360px;
    min-height: 100vh;
    margin: 0 auto;
    background-color: var(--bg-main);
    padding: clamp(12px, 1.8vh, 22px) clamp(14px, 3vw, 38px) clamp(18px, 2.5vh, 28px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(9px, 1.3vh, 15px);
}

/* Header */
.console-top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(185, 192, 206, 0.10);
}

.console-brand {
    display: flex;
    flex-direction: column;
}

.brvin-logo-svg-light {
    width: clamp(112px, 13vw, 150px);
    height: auto;
}

.console-brand-tagline {
    font-size: clamp(0.55rem, 0.8vw, 0.68rem);
    color: var(--text-secondary);
    letter-spacing: 0.18px;
    margin-top: -1px;
}

.console-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sensor-conn-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(0.66rem, 0.9vw, 0.76rem);
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 99px;
    letter-spacing: 0.3px;
}

.sensor-conn-pill.is-online {
    background: rgba(77, 187, 134, 0.16);
    color: var(--status-normal);
    border: 1px solid rgba(77, 187, 134, 0.45);
}

.sensor-conn-pill.is-offline {
    background: rgba(185, 192, 206, 0.12);
    color: var(--text-secondary);
    border: 1px solid rgba(185, 192, 206, 0.25);
}

.conn-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: currentColor;
}

.header-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.header-icon-btn:hover {
    color: #FFFFFF;
    border-color: var(--accent-cyan);
}

/* Section Headers & Red Numbered Badges */
.console-section {
    width: 100%;
}

.section-label-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}

.red-step-badge {
    width: clamp(17px, 1.6vw, 21px);
    height: clamp(17px, 1.6vw, 21px);
    border-radius: 50%;
    background-color: var(--accent-red);
    color: #FFFFFF;
    font-size: clamp(0.68rem, 0.85vw, 0.78rem);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.section-title-text {
    margin: 0;
    font-size: clamp(0.80rem, 1.05vw, 0.94rem);
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.2;
}

/* SECTION 1: Crane Type 4-Card Grid */
.crane-type-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(7px, 1.2vw, 14px);
}

.crane-type-card {
    position: relative;
    background-color: var(--bg-card);
    border: 1.5px solid rgba(185, 192, 206, 0.18);
    border-radius: 11px;
    padding: clamp(6px, 0.8vh, 10px) clamp(4px, 0.8vw, 10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: clamp(88px, 11vh, 118px);
    cursor: pointer;
    color: var(--text-primary);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.crane-type-card:hover {
    border-color: rgba(90, 200, 250, 0.55);
}

.crane-type-card.is-selected {
    background-color: var(--bg-selected-blue);
    border-color: var(--border-selected-blue);
}

.card-select-indicator {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 14px;
    margin-right: 2px;
}

.crane-type-card .check-svg {
    display: none;
}

.crane-type-card .radio-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #FFFFFF;
    display: inline-block;
}

.crane-type-card.is-selected .check-svg {
    display: block;
}

.crane-type-card.is-selected .radio-dot {
    display: none;
}

.crane-card-thumb {
    width: 100%;
    height: clamp(46px, 6.2vh, 66px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px 0;
}

.crane-card-thumb img {
    max-width: 92%;
    max-height: 100%;
    object-fit: contain;
}

.crane-card-name {
    font-size: clamp(0.62rem, 0.9vw, 0.82rem);
    font-weight: 400;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
}

.crane-type-card.is-selected .crane-card-name {
    color: var(--text-primary);
    font-weight: 500;
}

.hardware-validation-note {
    margin-top: 6px;
    background: rgba(232, 185, 79, 0.14);
    border: 1px solid rgba(232, 185, 79, 0.45);
    color: #F3D27A;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: clamp(0.68rem, 0.85vw, 0.78rem);
    line-height: 1.3;
}

/* SECTION 2: Crane Capacity Inline Row */
.section-inline-capacity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.capacity-input-pill {
    display: inline-flex;
    align-items: center;
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    height: clamp(29px, 3.8vh, 36px);
    padding: 0 12px;
    min-width: clamp(135px, 18vw, 220px);
}

.console-num-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: clamp(0.80rem, 1vw, 0.92rem);
    font-weight: 500;
    width: 100%;
}

.console-num-input::-webkit-outer-spin-button,
.console-num-input::-webkit-inner-spin-button,
.load-inline-input::-webkit-outer-spin-button,
.load-inline-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.console-num-input[type=number],
.load-inline-input[type=number] {
    -moz-appearance: textfield;
}

.input-unit-label {
    font-size: clamp(0.76rem, 0.95vw, 0.88rem);
    color: var(--text-primary);
    margin-left: auto;
    padding-left: 8px;
}

/* SECTION 3 & 4: Span Length & Regulation Standard */
.section-span-reg-row {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(12px, 2vw, 24px);
}

.span-input-pill {
    display: flex;
    align-items: center;
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    height: clamp(30px, 3.8vh, 36px);
    padding: 0 12px;
}

.reg-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    height: clamp(30px, 3.8vh, 36px);
}

.console-select-control {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: clamp(0.76rem, 0.98vw, 0.90rem);
    padding: 0 28px 0 12px;
    appearance: none;
    cursor: pointer;
}

.console-select-control option {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.select-chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-55%);
    font-size: 0.88rem;
    color: var(--text-secondary);
    pointer-events: none;
}

/* SECTION 5: Girder Type Cards + Central Crane Illustration */
.girder-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(9px, 1.5vw, 18px);
}

.girder-type-card {
    background-color: var(--bg-card);
    border: 1.5px solid rgba(185, 192, 206, 0.18);
    border-radius: 11px;
    height: clamp(46px, 5.8vh, 58px);
    padding: 6px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.girder-type-card.is-selected {
    background-color: var(--bg-selected-blue);
    border-color: var(--border-selected-blue);
}

.girder-thumb-img {
    height: clamp(31px, 4.2vh, 42px);
    width: auto;
    object-fit: contain;
}

.girder-card-label {
    font-size: clamp(0.78rem, 1vw, 0.94rem);
    font-weight: 500;
}

/* Central Gantry Crane Diagram */
.central-crane-diagram-box {
    margin-top: 8px;
    padding: 4px 4px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.diagram-top-callouts {
    width: min(74%, 520px);
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
}

.diagram-point-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: clamp(0.55rem, 0.78vw, 0.72rem);
    line-height: 1.15;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
}

.diagram-point-btn strong {
    font-weight: 600;
    color: var(--text-primary);
}

.diagram-point-btn.is-active {
    color: var(--accent-cyan);
}

.diagram-image-stage {
    width: 100%;
    display: flex;
    justify-content: center;
}

.central-crane-img {
    width: 96%;
    max-width: 680px;
    max-height: clamp(120px, 19vh, 210px);
    height: auto;
    object-fit: contain;
}

.diagram-bottom-caption {
    margin-top: 2px;
    font-size: clamp(0.66rem, 0.88vw, 0.80rem);
    color: var(--text-secondary);
    text-align: center;
}

/* SECTIONS 6, 7, 8: Three Measurement Cards Row */
.metrics-trio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(8px, 1.4vw, 18px);
}

.metric-column {
    display: flex;
    flex-direction: column;
}

.metric-card {
    flex: 1;
    background-color: var(--bg-card-dark);
    border: 1.5px solid rgba(185, 192, 206, 0.16);
    border-radius: 13px;
    padding: clamp(10px, 1.4vh, 16px) clamp(7px, 1.2vw, 14px) clamp(8px, 1.2vh, 12px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: clamp(90px, 11.5vh, 118px);
}

.metric-card-sensor.status-normal {
    background-color: var(--bg-selected-green);
    border-color: var(--border-selected-green);
}

.metric-card-sensor.status-warning {
    background-color: rgba(232, 185, 79, 0.15);
    border-color: var(--status-warning);
}

.metric-card-sensor.status-critical {
    background-color: rgba(227, 75, 75, 0.18);
    border-color: var(--status-critical);
}

.metric-main-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, 0.8vw, 10px);
    width: 100%;
    margin-top: 2px;
}

.metric-icon-svg {
    flex-shrink: 0;
}

.metric-value-wrap {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.load-inline-input {
    width: clamp(52px, 6vw, 76px);
    background: transparent;
    border: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.28);
    outline: none;
    color: #FFFFFF;
    font-size: clamp(1.32rem, 2vw, 1.75rem);
    font-weight: 800;
    text-align: right;
    padding: 0;
    line-height: 1;
}

.load-inline-input:focus {
    border-bottom-color: var(--accent-cyan);
}

.metric-big-num {
    font-size: clamp(1.32rem, 2vw, 1.75rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.3px;
}

.metric-unit-text {
    font-size: clamp(0.78rem, 1.1vw, 0.98rem);
    font-weight: 700;
}

.text-cyan {
    color: var(--accent-cyan);
}

.metric-card-sensor.status-normal .sensor-val-text,
.metric-card-sensor.status-normal .sensor-unit-text {
    color: var(--status-normal);
}

.metric-card-sensor.status-warning .sensor-val-text,
.metric-card-sensor.status-warning .sensor-unit-text {
    color: var(--status-warning);
}

.metric-card-sensor.status-critical .sensor-val-text,
.metric-card-sensor.status-critical .sensor-unit-text {
    color: var(--status-critical);
}

.metric-card-sensor.status-offline .sensor-val-text,
.metric-card-sensor.status-offline .sensor-unit-text {
    color: var(--status-offline);
}

.metric-subtext {
    margin: 6px 0 0;
    font-size: clamp(0.56rem, 0.78vw, 0.74rem);
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.25;
}

.metric-formula-text {
    font-size: clamp(0.52rem, 0.72vw, 0.68rem);
}

/* SECTION 9: Status Alarm */
.alarm-header-row .section-title-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
}

.alarm-header-sub {
    font-size: clamp(0.58rem, 0.8vw, 0.74rem);
    color: var(--text-secondary);
    font-weight: 400;
}

.alarm-banner-card {
    background-color: var(--bg-card-dark);
    border: 1.5px solid rgba(185, 192, 206, 0.16);
    border-radius: 13px;
    padding: clamp(9px, 1.3vh, 14px) clamp(12px, 1.8vw, 20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px, 2vw, 24px);
    margin-bottom: 8px;
}

.alarm-banner-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: clamp(122px, 16vw, 175px);
}

.alarm-shield-wrap {
    color: var(--status-normal);
    display: flex;
    align-items: center;
}

.alarm-banner-card.status-warning .alarm-shield-wrap,
.alarm-banner-card.status-warning .alarm-state-word,
.alarm-banner-card.status-warning .alarm-state-pct {
    color: var(--status-warning);
}

.alarm-banner-card.status-critical .alarm-shield-wrap,
.alarm-banner-card.status-critical .alarm-state-word,
.alarm-banner-card.status-critical .alarm-state-pct {
    color: var(--status-critical);
}

.alarm-banner-card.status-offline .alarm-shield-wrap,
.alarm-banner-card.status-offline .alarm-state-word,
.alarm-banner-card.status-offline .alarm-state-pct {
    color: var(--status-offline);
}

.alarm-status-Summary {
    display: flex;
    flex-direction: column;
    line-height: 1.08;
}

.alarm-state-word {
    font-size: clamp(1.05rem, 1.5vw, 1.32rem);
    font-weight: 800;
    color: var(--status-normal);
}

.alarm-state-pct {
    font-size: clamp(0.94rem, 1.3vw, 1.15rem);
    font-weight: 800;
    color: var(--status-normal);
}

/* Horizontal Progress Bar */
.alarm-progress-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-right: 6px;
}

.alarm-bar-track-container {
    position: relative;
    height: 24px;
    display: flex;
    align-items: center;
}

.alarm-bar-track {
    position: relative;
    width: 100%;
    height: 10px;
    background-color: #464E63;
    border-radius: 3px;
    overflow: visible;
}

.alarm-bar-fill {
    height: 100%;
    background-color: var(--status-normal);
    border-radius: 3px 0 0 3px;
    transition: width 0.25s ease, background-color 0.2s ease;
}

.alarm-banner-card.status-warning .alarm-bar-fill {
    background-color: var(--status-warning);
}

.alarm-banner-card.status-critical .alarm-bar-fill {
    background-color: var(--status-critical);
}

.alarm-bar-thumb {
    position: absolute;
    top: -3px;
    width: 2.5px;
    height: 16px;
    background-color: #FFFFFF;
    transform: translateX(-50%);
    transition: left 0.25s ease;
}

.bar-tick-line {
    position: absolute;
    top: 1px;
    bottom: 1px;
    border-left: 1px dashed rgba(255, 255, 255, 0.45);
    z-index: 2;
    pointer-events: none;
}

.bar-tick-line.tick-warning {
    border-left-color: var(--status-warning);
}

.bar-tick-line.tick-critical {
    border-left-color: var(--status-critical);
}

.alarm-bar-labels {
    position: relative;
    height: 14px;
    margin-top: 2px;
    font-size: clamp(0.52rem, 0.72vw, 0.68rem);
    color: var(--text-secondary);
}

.alarm-bar-labels span {
    position: absolute;
    transform: translateX(-50%);
}

.alarm-bar-labels span:first-child {
    transform: none;
}

.text-warning-amber {
    color: var(--status-warning);
}

.text-critical-red {
    color: var(--status-critical);
}

/* Three Alarm Status Cards (NORMAL, WARNING, CRITICAL) */
.alarm-tiers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(8px, 1.4vw, 18px);
}

.alarm-tier-card {
    background-color: var(--bg-card);
    border: 1.5px solid rgba(185, 192, 206, 0.16);
    border-radius: 12px;
    padding: clamp(7px, 1.1vh, 12px) 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.alarm-tier-card.tier-normal .tier-title,
.alarm-tier-card.tier-normal .tier-range {
    color: var(--status-normal);
}

.alarm-tier-card.tier-normal.is-active {
    background-color: var(--bg-selected-green);
    border-color: var(--border-selected-green);
}

.alarm-tier-card.tier-warning.is-active {
    background-color: rgba(232, 185, 79, 0.18);
    border-color: var(--status-warning);
}

.alarm-tier-card.tier-warning.is-active .tier-title,
.alarm-tier-card.tier-warning.is-active .tier-range {
    color: var(--status-warning);
}

.alarm-tier-card.tier-critical.is-active {
    background-color: rgba(227, 75, 75, 0.20);
    border-color: var(--status-critical);
}

.alarm-tier-card.tier-critical.is-active .tier-title,
.alarm-tier-card.tier-critical.is-active .tier-range {
    color: var(--status-critical);
}

.tier-title {
    font-size: clamp(0.78rem, 1.05vw, 0.94rem);
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 0.3px;
}

.tier-range {
    margin-top: 3px;
    font-size: clamp(0.68rem, 0.92vw, 0.84rem);
    font-weight: 700;
    color: #FFFFFF;
}

.tier-desc {
    font-size: clamp(0.52rem, 0.72vw, 0.68rem);
    color: var(--text-primary);
    opacity: 0.9;
}

/* SECTION 10: Save Crane Data Button */
.section-save-action {
    margin-top: 2px;
}

.save-crane-btn {
    width: 100%;
    height: clamp(42px, 5.2vh, 50px);
    background-color: var(--accent-primary);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 10px;
    font-size: clamp(0.84rem, 1.05vw, 0.96rem);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.08s ease;
}

.save-crane-btn:hover {
    background-color: var(--accent-primary-hover);
}

.save-crane-btn:active {
    transform: scale(0.99);
}

.save-crane-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

.save-feedback-toast {
    margin-top: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    text-align: center;
}

.save-feedback-toast.toast-success {
    background: rgba(77, 187, 134, 0.18);
    border: 1px solid var(--status-normal);
    color: #98F2C6;
}

.save-feedback-toast.toast-error {
    background: rgba(227, 75, 75, 0.22);
    border: 1px solid var(--status-critical);
    color: #FFB3B3;
}