@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #09121d;
    color: #e8f2ff;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

button {
    font-family: inherit;
}

button.primary-button,
button.secondary-button,
button.danger-button,
button.action-button,
button.primary,
button.danger {
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

button.primary-button:hover,
button.secondary-button:hover,
button.danger-button:hover,
button.action-button:hover,
button.primary:hover,
button.danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(31,45,61,.10);
}

.app-icon {
    display: inline-flex;
    width: 1.14rem;
    height: 1.14rem;
    flex: 0 0 auto;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.12));
}

.app-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.app-icon.tone-default { color:#7c8aa0; }
.app-icon.tone-search { color:#38bdf8; }
.app-icon.tone-add { color:#f59e0b; }
.app-icon.tone-save { color:#22c55e; }
.app-icon.tone-delete { color:#ef4444; }
.app-icon.tone-reset { color:#a855f7; }
.app-icon.tone-login { color:#fb923c; }
.app-icon.tone-logout { color:#f97316; }
.app-icon.tone-history { color:#8b5cf6; }
.app-icon.tone-check { color:#10b981; }
.app-icon.tone-alarm { color:#f43f5e; }
.app-icon.tone-report { color:#0ea5e9; }
.app-icon.tone-cctv { color:#6366f1; }
.app-icon.tone-control { color:#14b8a6; }
.app-icon.tone-monitoring { color:#06b6d4; }
.app-icon.tone-home { color:#3b82f6; }
.app-icon.tone-farm { color:#16a34a; }
.app-icon.tone-base { color:#7c3aed; }
.app-icon.tone-log { color:#64748b; }
.page-badge { display:none !important; }

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

body .page-header,
body .search-panel,
body .edit-panel,
body .list-panel,
body .detail-panel,
body .message-box,
body .hero-card,
body .card,
body .toolbar-panel,
body .toolbar,
body .filter-strip,
body .summary-panel,
body .print-header {
    box-sizing: border-box;
}

body .page-header,
body .search-panel,
body .edit-panel,
body .list-panel,
body .detail-panel,
body .message-box,
body .print-header {
    padding: 1.1rem !important;
    border-radius: 18px !important;
}

body .hero-card,
body .card {
    padding: 1.05rem !important;
    border-radius: 20px !important;
}

body .page-header h1,
body .hero-card h1,
body .page-hero h1,
body .schedule-hero h1,
body .live-hero h1,
body .gallery-hero h1 {
    margin: .2rem 0 .45rem !important;
    font-size: 1.55rem !important;
    line-height: 1.28 !important;
}

body .page-header p,
body .hero-card p,
body .page-description,
body .hero-copy,
body .schedule-hero p,
body .live-hero p,
body .gallery-hero p {
    font-size: .84rem !important;
    line-height: 1.55 !important;
}

body .search-grid,
body .filter-grid,
body .form-grid,
body .detail-grid,
body .content-grid,
body .preview-grid,
body .mini-grid {
    gap: .8rem !important;
}

body .toolbar-panel,
body .toolbar,
body .search-panel {
    gap: .6rem !important;
}

body input,
body select,
body textarea {
    font-size: .84rem;
}

body .search-panel input,
body .search-panel select,
body .toolbar input,
body .toolbar select,
body .toolbar-panel input,
body .toolbar-panel select,
body .filter-grid input,
body .filter-grid select,
body .form-grid input,
body .form-grid select,
body .form-grid textarea,
body .detail-grid input,
body .detail-grid select,
body .detail-grid textarea {
    min-height: 38px !important;
    padding: .65rem .8rem !important;
    border-radius: 12px !important;
}

body textarea,
body .form-grid textarea,
body .detail-grid textarea {
    min-height: 88px !important;
}

body .action-row {
    gap: .55rem !important;
    margin-top: .8rem !important;
}

body .action-button,
body .primary-button,
body .secondary-button,
body .danger-button,
body .accent-button,
body .inline-button,
body .toolbar button,
body .toolbar-panel button,
body button.primary,
body button.danger {
    min-width: 84px !important;
    height: 38px !important;
    padding: 0 .85rem !important;
    border-radius: 12px !important;
    font-size: .82rem !important;
    gap: .38rem !important;
}

body .secondary-button.small,
body .inline-button {
    min-width: 68px !important;
    height: 32px !important;
    padding: 0 .7rem !important;
    font-size: .76rem !important;
}

body .btn-icon {
    width: 1.05rem !important;
    height: 1.05rem !important;
}

body .hero-cards {
    gap: .6rem !important;
}

body .hero-cards div,
body .summary-row > div,
body .summary-panel > div,
body .kpi,
body .kpi-card,
body .metric-card {
    padding: .82rem .88rem !important;
    border-radius: 16px !important;
}

body .hero-cards span,
body .summary-row span,
body .kpi span {
    font-size: .72rem !important;
}

body .hero-cards strong,
body .summary-row strong,
body .kpi strong {
    font-size: .98rem !important;
}

body .data-table th,
body .data-table td {
    padding: .72rem .68rem !important;
    font-size: .81rem !important;
}

body .data-table th {
    background: #f4f7fb !important;
    color: #27415f !important;
    font-size: .78rem !important;
    text-align: center !important;
    vertical-align: middle !important;
}

body .data-table td {
    vertical-align: middle !important;
}

body label,
body .field label,
body .search-grid label,
body .form-grid label,
body .detail-grid label,
body .filter-grid label {
    display: block;
    margin-bottom: .28rem;
    color: #556579;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .01em;
}

body .auth-content,
body .guest-content {
    color: #e8f2ff;
}

body .auth-content .page-header:not(.report-page .page-header),
body .auth-content .search-panel:not(.report-page .search-panel),
body .auth-content .edit-panel,
body .auth-content .list-panel:not(.report-page .list-panel),
body .auth-content .detail-panel,
body .auth-content .message-box:not(.report-page .message-box),
body .auth-content .hero-card,
body .auth-content .card:not(.report-page .card),
body .auth-content .toolbar-panel,
body .auth-content .toolbar,
body .auth-content .filter-strip,
body .auth-content .summary-panel,
body .auth-content .print-header,
body .guest-content .page-header,
body .guest-content .search-panel,
body .guest-content .edit-panel,
body .guest-content .list-panel,
body .guest-content .detail-panel,
body .guest-content .message-box,
body .guest-content .hero-card,
body .guest-content .card,
body .guest-content .toolbar-panel,
body .guest-content .toolbar,
body .guest-content .filter-strip,
body .guest-content .summary-panel {
    background: linear-gradient(180deg, rgba(10, 25, 42, .92), rgba(13, 35, 58, .88)) !important;
    border: 1px solid rgba(101, 165, 227, .16) !important;
    box-shadow: 0 18px 34px rgba(3, 12, 22, .32) !important;
    color: #e8f2ff !important;
}

body .auth-content .page-header h1,
body .auth-content .hero-card h1,
body .auth-content .page-hero h1,
body .auth-content .schedule-hero h1,
body .auth-content .live-hero h1,
body .auth-content .gallery-hero h1,
body .auth-content .section-head h3,
body .auth-content .card strong,
body .auth-content .summary-card h3,
body .auth-content .trend-card h3,
body .auth-content .task-panel h3,
body .auth-content .info-box strong,
body .auth-content .profile-card strong,
body .auth-content .master-card strong,
body .auth-content .guide-card strong,
body .guest-content h1,
body .guest-content h2,
body .guest-content h3,
body .guest-content strong {
    color: #f4f8ff !important;
}

body .auth-content .page-header p,
body .auth-content .hero-card p,
body .auth-content .page-description,
body .auth-content .hero-copy,
body .auth-content .schedule-hero p,
body .auth-content .live-hero p,
body .auth-content .gallery-hero p,
body .auth-content .section-label,
body .auth-content .card-label,
body .auth-content .metric-item span,
body .auth-content .profile-card span,
body .auth-content .master-card em,
body .auth-content .master-card span,
body .auth-content .task-card p,
body .auth-content .task-foot span,
body .auth-content .info-mini span,
body .auth-content .guide-card p,
body .auth-content .weather-text span,
body .auth-content .desc,
body .auth-content .date,
body .guest-content p,
body .guest-content span {
    color: #9fb4cb !important;
}

body .auth-content input,
body .auth-content select,
body .auth-content textarea,
body .guest-content input,
body .guest-content select,
body .guest-content textarea {
    background: rgba(7, 20, 34, .88) !important;
    border: 1px solid rgba(99, 151, 206, .20) !important;
    color: #eef6ff !important;
}

body .auth-content input::placeholder,
body .auth-content textarea::placeholder,
body .guest-content input::placeholder,
body .guest-content textarea::placeholder {
    color: #7e97af !important;
}

body .auth-content .search-panel input[readonly],
body .auth-content .detail-grid input[readonly],
body .guest-content .search-panel input[readonly] {
    background: rgba(12, 28, 46, .76) !important;
}

body .auth-content .data-table th,
body .auth-content .history-table th,
body .auth-content table th {
    background: linear-gradient(180deg, rgba(20, 49, 77, .98), rgba(15, 38, 63, .98)) !important;
    color: #d8e8ff !important;
    border-bottom: 1px solid rgba(95, 145, 199, .22) !important;
}

body .auth-content .data-table td,
body .auth-content .history-table td,
body .auth-content table td {
    background: rgba(9, 23, 38, .78) !important;
    color: #e5f0ff !important;
    border-bottom: 1px solid rgba(85, 127, 171, .16) !important;
}

body .auth-content .history-table th:first-child,
body .auth-content .history-table td:first-child {
    background: rgba(14, 34, 56, .98) !important;
}

body .auth-content .metric-item,
body .auth-content .profile-card,
body .auth-content .master-card,
body .auth-content .forecast-item,
body .auth-content .hour-card,
body .auth-content .mini-chart,
body .auth-content .task-card,
body .auth-content .guide-card,
body .auth-content .info-mini,
body .auth-content .metric-list div,
body .auth-content .compare-row,
body .auth-content .master-task,
body .auth-content .alarm-item,
body .auth-content .history-table-wrap {
    background: linear-gradient(180deg, rgba(13, 30, 48, .94), rgba(9, 22, 38, .92)) !important;
    border: 1px solid rgba(83, 129, 180, .18) !important;
    color: #e8f2ff !important;
}

body .auth-content .primary-button,
body .auth-content .action-button.primary-button,
body .auth-content button.primary,
body .auth-content .top-button.active,
body .auth-content .soft-badge {
    background: linear-gradient(135deg, #1a6ac8, #27b1c1) !important;
    border-color: transparent !important;
    color: #f8fcff !important;
}

body .auth-content .secondary-button,
body .auth-content .action-button,
body .auth-content .inline-button,
body .auth-content .check-button,
body .guest-content .action-button {
    background: linear-gradient(180deg, rgba(19, 46, 72, .96), rgba(11, 30, 49, .96)) !important;
    border: 1px solid rgba(85, 135, 191, .20) !important;
    color: #dff1ff !important;
}

body .auth-content .danger-button,
body .auth-content button.danger {
    background: linear-gradient(135deg, #8c2f46, #bc4d55) !important;
    border-color: transparent !important;
    color: #fff5f6 !important;
}

body .auth-content .notice {
    background: linear-gradient(180deg, rgba(16, 51, 71, .95), rgba(11, 33, 48, .95)) !important;
    color: #dff2ff !important;
    border: 1px solid rgba(86, 149, 196, .18) !important;
}

body .auth-content .warning,
body .auth-content .warning-box {
    background: linear-gradient(180deg, rgba(73, 52, 20, .95), rgba(54, 38, 14, .95)) !important;
    color: #ffe7b1 !important;
    border: 1px solid rgba(209, 154, 56, .22) !important;
}

body .auth-content .empty-box,
body .auth-content .alarm-empty,
body .auth-content .empty-chart,
body .auth-content .history-empty {
    background: rgba(10, 24, 40, .72) !important;
    color: #a9bed4 !important;
}

body .auth-content .progress-track {
    background: rgba(13, 32, 52, .84) !important;
}

body .auth-content .progress-fill {
    background: linear-gradient(135deg, #28d6bb, #4c8df4) !important;
}

body .report-page,
body .report-page * {
    color: initial;
}

body .report-page .page-header,
body .report-page .search-panel,
body .report-page .list-panel,
body .report-page .message-box,
body .report-page .print-header {
    background: #ffffff !important;
    border: 1px solid #d5eadc !important;
    box-shadow: 0 10px 24px rgba(24,73,53,.08) !important;
}

body .report-page .page-header {
    background: linear-gradient(135deg,#f5fbf7 0%,#eef8f1 100%) !important;
}

body .report-page .page-header h1,
body .report-page .section-head h3,
body .report-page strong {
    color: #15382c !important;
}

body .report-page p,
body .report-page span,
body .report-page label,
body .report-page td {
    color: #4f665a !important;
}

body .report-page th {
    background: #f8fbf9 !important;
    color: #234737 !important;
}

body .report-page input,
body .report-page select,
body .report-page textarea {
    background: #fbfdfb !important;
    border: 1px solid #cfe0d4 !important;
    color: #1f3b31 !important;
}

body .auth-content .topbar,
body .auth-content .hero,
body .auth-content .page-hero,
body .auth-content .home-header,
body .auth-content .login-shell,
body .auth-content .login-brand,
body .auth-content .login-card,
body .auth-content .toolbar-panel,
body .auth-content .role-strip,
body .auth-content .featured-panel,
body .auth-content .live-card,
body .auth-content .history-card,
body .auth-content .panel,
body .auth-content .summary-card,
body .auth-content .bench-card,
body .auth-content .trend-card,
body .auth-content .tune-card,
body .auth-content .project-card,
body .auth-content .status-card,
body .auth-content .shipping-card,
body .auth-content .label-cell,
body .auth-content .editor-card,
body .auth-content .preview-card,
body .auth-content .alert-panel,
body .auth-content .alert-card,
body .auth-content .filter-card,
body .auth-content .form-card,
body .auth-content .status-strip,
body .auth-content .main-panel,
body .auth-content .task-panel,
body .auth-content .center-card,
body .auth-content .history-panel,
body .auth-content .side-panel,
body .auth-content .recommend-panel,
body .auth-content .list-item,
body .auth-content .chart-box,
body .auth-content .mini-card,
body .auth-content .weather-box,
body .auth-content .kpi,
body .auth-content .weather-strip div,
body .auth-content .empty-map,
body .auth-content .recommend,
body .auth-content .sensor,
body .auth-content .metric-item,
body .auth-content .forecast-item,
body .auth-content .hour-card,
body .auth-content .master-card,
body .auth-content .master-task {
    background: linear-gradient(180deg, rgba(11, 28, 46, .96), rgba(7, 20, 34, .94)) !important;
    border: 1px solid rgba(88, 139, 194, .22) !important;
    box-shadow: 0 16px 30px rgba(2, 10, 20, .34) !important;
    color: #eaf5ff !important;
}

body .auth-content .weather-strip div strong,
body .auth-content .kpi strong,
body .auth-content .sensor strong,
body .auth-content .sensor-val,
body .auth-content .weather-box strong,
body .auth-content .recommend strong,
body .auth-content .project-card strong,
body .auth-content .status-card strong,
body .auth-content .metric-item strong,
body .auth-content .forecast-item strong,
body .auth-content .hour-card strong,
body .auth-content .master-card strong,
body .auth-content .master-task strong {
    color: #f8fcff !important;
}

body .auth-content .weather-strip span,
body .auth-content .weather-box span,
body .auth-content .weather-box small,
body .auth-content .kpi span,
body .auth-content .kpi em,
body .auth-content .recommend p,
body .auth-content .sensor p,
body .auth-content .sensor-meta,
body .auth-content .sensor-head span,
body .auth-content .project-card span,
body .auth-content .project-card em,
body .auth-content .status-card span,
body .auth-content .chart-title,
body .auth-content .empty-map,
body .auth-content .empty,
body .auth-content .empty-cell {
    color: #9fc0dc !important;
}

body .auth-content .chart {
    background: linear-gradient(180deg, rgba(9, 24, 40, .98), rgba(7, 19, 33, .98)) !important;
    border: 1px solid rgba(82, 129, 178, .18) !important;
}

body .auth-content .grid-line {
    stroke: rgba(120, 160, 204, .14) !important;
}

body .auth-content .axis-line,
body .auth-content .axis-tick {
    stroke: rgba(153, 191, 232, .44) !important;
}

body .auth-content .axis-label {
    fill: #a9c3dd !important;
}

body .auth-content .tag {
    background: rgba(37, 99, 235, .16) !important;
    color: #8ec5ff !important;
    border: 1px solid rgba(74, 145, 219, .18) !important;
}

body .auth-content .dark-tag {
    background: rgba(84, 145, 214, .14) !important;
    color: #d8ebff !important;
}

body .auth-content .stamp {
    background: linear-gradient(135deg, #1e56d9, #13a4c6) !important;
    color: #f8fcff !important;
}

body .auth-content .sensor.normal {
    background: linear-gradient(180deg, rgba(12, 36, 35, .96), rgba(8, 27, 29, .94)) !important;
    border-color: rgba(49, 183, 146, .22) !important;
}

body .auth-content .sensor.check,
body .auth-content .status-card.warn,
body .auth-content .status-card.medium {
    background: linear-gradient(180deg, rgba(59, 45, 14, .96), rgba(40, 29, 9, .94)) !important;
    border-color: rgba(221, 171, 67, .24) !important;
}

body .auth-content .sensor.alert,
body .auth-content .status-card.high,
body .auth-content .task-card.delay,
body .auth-content .alert-card.high {
    background: linear-gradient(180deg, rgba(63, 24, 28, .96), rgba(42, 15, 18, .94)) !important;
    border-color: rgba(210, 96, 96, .26) !important;
}