/*
 Hive Sensium Admin
 Copyright (c) 2008-2026 Hive Solutions Lda.

 This file is part of Hive Sensium Admin.

 Hive Sensium Admin is free software: you can redistribute it and/or modify
 it under the terms of the Apache License as published by the Apache
 Foundation, either version 2.0 of the License, or (at your option) any
 later version.

 Hive Sensium Admin is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 Apache License for more details.

 You should have received a copy of the Apache License along with
 Hive Sensium Admin. If not, see <http://www.apache.org/licenses/>.
*/

:root {
    --bg: #f6f7fa;
    --card: #ffffff;
    --ink: #101828;
    --muted: #667085;
    --soft: #98a2b3;
    --line: #eef0f4;
    --primary: #111827;
    --primary-ink: #ffffff;
    --good: #12925d;
    --good-bg: #e7f6ee;
    --bad: #d92d20;
    --bad-bg: #fdeceb;
    --warn: #b54708;
    --warn-bg: #fdf1e2;
    --info: #175cd3;
    --info-bg: #e9f0fc;
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -16px rgba(16, 24, 40, 0.08);
    --sans: -apple-system, blinkmacsystemfont, "Segoe UI", helvetica, arial, sans-serif;
    --mono: "SF Mono", menlo, consolas, monospace;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background: var(--bg);
}

body {
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--ink);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

code {
    background: rgba(16, 24, 40, 0.05);
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 0.85em;
    padding: 1px 6px;
}

h1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

h2 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.mono {
    font-family: var(--mono);
    font-size: 0.9em;
}

.muted {
    color: var(--muted);
}

.app {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    background: var(--card);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 8px;
    padding: 24px 16px;
    width: 232px;
}

.brand {
    align-items: center;
    color: var(--ink);
    display: flex;
    font-size: 18px;
    font-weight: 700;
    gap: 10px;
    letter-spacing: -0.02em;
    padding: 0px 8px 16px 8px;
}

.brand:hover {
    text-decoration: none;
}

.brand-mark {
    align-items: center;
    background: var(--primary);
    border-radius: 9px;
    color: var(--primary-ink);
    display: inline-flex;
    height: 30px;
    justify-content: center;
    position: relative;
    width: 30px;
}

.brand-mark::after {
    background: var(--good);
    border: 2px solid var(--card);
    border-radius: 50%;
    content: "";
    height: 9px;
    position: absolute;
    right: -3px;
    top: -3px;
    width: 9px;
}

.brand-mark svg {
    height: 16px;
    width: 16px;
}

.menu-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 0px 12px;
    text-transform: uppercase;
}

.menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu-item {
    align-items: center;
    border-radius: 10px;
    color: var(--muted);
    display: flex;
    font-size: 14px;
    font-weight: 500;
    gap: 10px;
    padding: 9px 12px;
}

.menu-item svg {
    color: var(--soft);
    height: 15px;
    width: 15px;
}

.menu-item:hover svg,
.menu-item.active svg {
    color: var(--ink);
}

.badge {
    background: #f04438;
    border-radius: 999px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.7;
    margin-left: auto;
    padding: 0px 7px;
}

.menu-item:hover {
    background: var(--bg);
    color: var(--ink);
    text-decoration: none;
}

.menu-item.active {
    background: var(--bg);
    color: var(--ink);
}

.sidebar-footer {
    border-top: 1px solid var(--line);
    margin-top: auto;
    padding-top: 12px;
}

.main {
    flex: 1;
    min-width: 0;
}

.main-inner {
    margin: 0px auto;
    max-width: 1024px;
    padding: 40px 40px 24px 40px;
}

.footer {
    color: var(--muted);
    font-size: 12.5px;
    padding-top: 32px;
}

.page-head {
    margin-bottom: 28px;
}

.page-head-row {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.page-sub {
    color: var(--muted);
    font-size: 14px;
    margin-top: 4px;
}

.breadcrumb {
    font-size: 13.5px;
    margin-bottom: 16px;
}

.breadcrumb a {
    color: var(--muted);
}

.breadcrumb a:hover {
    color: var(--ink);
}

.tiles {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: 24px;
}

.tile {
    align-items: flex-start;
    background: var(--card);
    border-radius: 18px;
    box-shadow: var(--shadow);
    display: flex;
    gap: 14px;
    padding: 20px 22px;
}

.tile-icon {
    align-items: center;
    background: var(--bg);
    border-radius: 50%;
    color: var(--ink);
    display: inline-flex;
    flex-shrink: 0;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.tile-icon svg {
    height: 18px;
    width: 18px;
}

.tile-icon-good {
    background: var(--good-bg);
    color: var(--good);
}

.tile-icon-bad {
    background: var(--bad-bg);
    color: var(--bad);
}

.tile-icon-warn {
    background: var(--warn-bg);
    color: var(--warn);
}

.tile-label {
    color: var(--muted);
    font-size: 13px;
}

.tile-value {
    align-items: baseline;
    display: flex;
    font-size: 28px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    gap: 8px;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.tile-note {
    color: var(--soft);
    font-size: 12px;
}

.delta {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0em;
    padding: 1px 8px;
}

.delta-good {
    background: var(--good-bg);
    color: var(--good);
}

.delta-bad {
    background: var(--bad-bg);
    color: var(--bad);
}

.date-chip {
    align-items: center;
    background: var(--card);
    border-radius: 12px;
    box-shadow: var(--shadow);
    color: var(--ink);
    display: inline-flex;
    font-size: 13.5px;
    font-weight: 500;
    gap: 8px;
    padding: 9px 14px;
    white-space: nowrap;
}

.date-chip svg {
    color: var(--muted);
    height: 15px;
    width: 15px;
}

.search {
    position: relative;
}

.search svg {
    color: var(--soft);
    height: 15px;
    left: 12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
}

.search input {
    background: var(--bg);
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 13.5px;
    padding: 7px 12px 7px 34px;
    width: 200px;
}

.search input:focus {
    background: var(--card);
    border-color: var(--line);
    box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.05);
    outline: none;
}

.card {
    background: var(--card);
    border-radius: 18px;
    box-shadow: var(--shadow);
    margin-bottom: 24px;
    padding: 22px 26px;
}

.card-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

.table-wrap {
    margin: 0px -16px;
    overflow-x: auto;
}

.listing {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    width: 100%;
}

.listing th {
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 16px;
    text-align: left;
    white-space: nowrap;
}

.listing td {
    border-bottom: 1px solid var(--line);
    padding: 12px 16px;
    vertical-align: middle;
}

.listing tbody tr:last-child td {
    border-bottom: none;
}

.listing tbody tr:hover td {
    background: #f8fafc;
}

.listing tbody tr:hover td:first-child {
    border-radius: 10px 0px 0px 10px;
}

.listing tbody tr:hover td:last-child {
    border-radius: 0px 10px 10px 0px;
}

.pill {
    border-radius: 999px;
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.6;
    padding: 2px 10px;
    white-space: nowrap;
}

.pill::before {
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 6px;
    margin-bottom: 1px;
    margin-right: 6px;
    width: 6px;
}

.pill-online,
.pill-completed {
    background: var(--good-bg);
    color: var(--good);
}

.pill-online::before,
.pill-completed::before {
    background: var(--good);
}

.pill-offline,
.pill-failed {
    background: var(--bad-bg);
    color: var(--bad);
}

.pill-offline::before,
.pill-failed::before {
    background: var(--bad);
}

.pill-pending {
    background: var(--warn-bg);
    color: var(--warn);
}

.pill-pending::before {
    background: var(--warn);
}

.pill-delivered {
    background: var(--info-bg);
    color: var(--info);
}

.pill-delivered::before {
    background: var(--info);
}

.details {
    display: grid;
    gap: 16px 32px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.details dt {
    color: var(--muted);
    font-size: 12.5px;
}

.details dd {
    font-size: 15px;
    font-weight: 500;
}

.empty {
    padding: 32px 24px;
    text-align: center;
}

.code {
    background: var(--bg);
    border-radius: 12px;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.5;
    overflow-x: auto;
    padding: 16px;
}

.form {
    max-width: 460px;
}

.form .input {
    margin-bottom: 18px;
}

.form label {
    color: var(--ink);
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 6px;
}

.form input,
.form select,
.form textarea {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14.5px;
    padding: 10px 14px;
    width: 100%;
}

.form textarea {
    font-family: var(--mono);
    font-size: 13px;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.08);
    outline: none;
}

.form .hint {
    color: var(--muted);
    font-size: 12.5px;
    margin-top: 6px;
}

.button {
    background: var(--primary);
    border: none;
    border-radius: 10px;
    color: var(--primary-ink);
    cursor: pointer;
    display: inline-block;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    padding: 9px 18px;
}

.button:hover {
    opacity: 0.9;
    text-decoration: none;
}

.button:focus-visible {
    box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.16);
    outline: none;
}

.button-full {
    width: 100%;
}

.error {
    background: var(--bad-bg);
    border-radius: 10px;
    color: var(--bad);
    font-size: 14px;
    margin-bottom: 18px;
    padding: 10px 14px;
}

.login-wrap {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 80vh;
}

.login-card {
    max-width: 400px;
    padding: 32px;
    text-align: center;
    width: 100%;
}

.login-card h1 {
    margin-top: 16px;
}

.login-card .page-sub {
    margin-bottom: 24px;
}

.login-card .form {
    max-width: none;
    text-align: left;
}

.brand-center {
    justify-content: center;
    padding: 0px;
}

@media (max-width: 860px) {
    .app {
        flex-direction: column;
    }

    .sidebar {
        border-bottom: 1px solid var(--line);
        border-right: none;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

    .menu {
        flex-direction: row;
    }

    .menu-label {
        display: none;
    }

    .sidebar-footer {
        border-top: none;
        margin-left: auto;
        margin-top: 0px;
        padding-top: 0px;
    }

    .main-inner {
        padding: 24px 20px;
    }
}