:root {
    --sr-navy: #072a55;
    --sr-navy-deep: #041d3d;
    --sr-navy-soft: #123d6f;
    --sr-coral: #e8715b;
    --sr-coral-dark: #d65f4b;
    --sr-coral-soft: #fff0ec;
    --sr-canvas: #f5f8fb;
    --sr-ink: #18324d;
    --sr-muted: #728197;
    --primary: var(--sr-coral);
    --bs-primary: var(--sr-coral);
    --bs-primary-rgb: 232, 113, 91;
}

body {
    color: var(--sr-ink);
    font-family: "Open Sans", "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.brand-product-name {
    font-family: "Poppins", "Segoe UI", sans-serif;
}

a { color: var(--sr-navy-soft); }
a:hover { color: var(--sr-coral-dark); }

/* Reusable SensorsReport wordmark */
.sr-logo {
    align-items: flex-end;
    display: inline-flex;
    line-height: 1;
    max-width: 100%;
    white-space: nowrap;
}

.sr-logo-signal {
    flex: 0 0 auto;
    height: 2.2em;
    margin-right: -.08em;
    width: 2.3em;
}

.sr-logo-signal path {
    fill: none;
    stroke: var(--sr-coral);
    stroke-width: 5;
}

.sr-logo-name {
    align-items: baseline;
    display: inline-flex;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.72em;
    font-weight: 700;
    letter-spacing: -.075em;
}

.sr-logo-sensors { color: var(--sr-navy); }
.sr-logo-report { color: var(--sr-coral); }

.sr-logo-domain {
    color: var(--sr-navy);
    font-size: .34em;
    letter-spacing: -.04em;
    margin-left: .04em;
}

.sr-logo-product {
    background: var(--sr-navy);
    border-radius: 999px;
    color: #fff;
    font-family: "Poppins", "Segoe UI", sans-serif;
    font-size: .46em;
    font-weight: 700;
    letter-spacing: .08em;
    margin: 0 0 .2em .85em;
    padding: .33em .55em .27em;
}

/* Application shell */
.main-sidebar {
    background: linear-gradient(180deg, var(--sr-navy) 0%, var(--sr-navy-deep) 100%) !important;
    box-shadow: 8px 0 28px rgba(7, 42, 85, .12) !important;
}

.brand-link {
    background: rgba(0, 0, 0, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
    height: 74px;
    padding: 0 16px !important;
}

.brand-link .sr-logo {
    font-size: 12px;
    transform: translateY(-1px);
}

.brand-link .sr-logo-sensors,
.brand-link .sr-logo-domain { color: #fff; }
.brand-link .sr-logo-product { background: var(--sr-coral); }

.user-panel {
    align-items: center;
    border-bottom-color: rgba(255, 255, 255, .12) !important;
    margin-left: 8px;
    margin-right: 8px;
}

.user-panel .image img {
    border: 2px solid rgba(232, 113, 91, .8);
    box-shadow: none !important;
}

.user-panel .info a {
    color: rgba(255, 255, 255, .82);
    font-size: .84rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 166px;
}

.main-header.navbar {
    background: rgba(255, 255, 255, .97) !important;
    border-bottom: 1px solid #e6edf4;
    border-top: 3px solid var(--sr-coral);
    min-height: 60px;
    padding-left: 14px;
    padding-right: 18px;
}

.main-header .nav-link { color: var(--sr-navy) !important; }

.topbar-context {
    color: var(--sr-muted);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.topbar-context::before {
    background: var(--sr-coral);
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 7px;
    margin: 0 8px 1px 4px;
    width: 7px;
}

.content-wrapper {
    background:
        radial-gradient(circle at 98% 0, rgba(232, 113, 91, .08), transparent 23rem),
        var(--sr-canvas) !important;
}

.card,
.form-card,
fieldset {
    border: 1px solid #e5ebf2 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(7, 42, 85, .055);
}

.card-header,
.form-card-header {
    border-bottom-color: #edf1f5 !important;
    border-radius: 10px 10px 0 0 !important;
}

.btn-primary,
.e-btn.e-primary,
.e-css.e-btn.e-primary {
    background-color: var(--sr-coral) !important;
    border-color: var(--sr-coral) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.e-btn.e-primary:hover {
    background-color: var(--sr-coral-dark) !important;
    border-color: var(--sr-coral-dark) !important;
}

.btn-primary:focus,
.form-control:focus,
.custom-select:focus {
    box-shadow: 0 0 0 .2rem rgba(232, 113, 91, .18) !important;
}

.form-control:focus,
.custom-select:focus { border-color: var(--sr-coral) !important; }

.text-primary,
.nav-link,
.e-grid .e-gridpager .e-numericitem { color: var(--sr-navy) !important; }

.e-grid .e-gridpager .e-currentitem,
.e-contextmenu-wrapper ul .e-menu-item.e-selected,
.e-contextmenu-container ul .e-menu-item.e-selected,
.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--sr-coral) !important;
    border-color: var(--sr-coral) !important;
}

.e-treeview .e-list-item.e-active > .e-fullrow,
.e-treeview .e-list-item.e-hover > .e-fullrow,
.e-treeview .e-list-item.e-active.e-hover > .e-fullrow {
    background-color: rgba(232, 113, 91, .2) !important;
    border-color: transparent !important;
}

.e-treeview .e-list-item.e-active > .e-text-content { background: transparent !important; }

#mainMenu .e-list-text,
#mainMenu .e-icons { color: rgba(255, 255, 255, .78) !important; }

#mainMenu .e-list-item.e-active > .e-text-content .e-list-text,
#mainMenu .e-list-item.e-hover > .e-text-content .e-list-text { color: #fff !important; }

.main-footer {
    border-top: 1px solid #e6edf4;
    color: var(--sr-muted);
    font-size: .82rem;
}

.main-footer a {
    color: var(--sr-navy);
    font-weight: 600;
}

/* Authentication */
.login-page {
    background:
        radial-gradient(circle at 13% 15%, transparent 0 52px, rgba(232, 113, 91, .12) 53px 58px, transparent 59px 76px, rgba(232, 113, 91, .07) 77px 82px, transparent 83px),
        radial-gradient(circle at 88% 84%, transparent 0 82px, rgba(232, 113, 91, .1) 83px 89px, transparent 90px 112px, rgba(232, 113, 91, .06) 113px 119px, transparent 120px),
        linear-gradient(145deg, var(--sr-navy-deep), var(--sr-navy) 56%, #0b3767);
    min-height: 100vh;
}

.login-box {
    margin: 32px 16px;
    width: 420px;
}

.login-logo { margin-bottom: 20px; }

.login-logo a {
    display: inline-flex;
    text-decoration: none;
}

.login-logo .sr-logo { font-size: 15px; }

.login-logo .sr-logo-sensors,
.login-logo .sr-logo-domain { color: #fff; }
.login-logo .sr-logo-product { background: var(--sr-coral); }

.login-box > .card {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, .985);
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    overflow: hidden;
}

.login-box > .card::before {
    background: linear-gradient(90deg, var(--sr-coral), #f29980);
    content: "";
    display: block;
    height: 5px;
}

.login-card-body {
    border-radius: 0 0 14px 14px;
    padding: 30px 34px 32px;
}

.login-box-msg {
    color: var(--sr-navy);
    font-family: "Poppins", "Segoe UI", sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
}

.login-card-body .input-group-text {
    background: #f7f9fc;
    color: var(--sr-navy-soft);
}

.login-card-body .social-auth-links {
    border-top: 1px solid #edf1f5;
    margin-top: 24px;
    padding-top: 18px;
}

/* Public entry screen */
.lock-overlay {
    background:
        radial-gradient(circle at 17% 20%, transparent 0 64px, rgba(232, 113, 91, .12) 65px 71px, transparent 72px 95px, rgba(232, 113, 91, .07) 96px 102px, transparent 103px),
        linear-gradient(145deg, var(--sr-navy-deep), var(--sr-navy));
    padding: 24px;
    text-align: center;
}

.lock-brand { margin-bottom: 18px; }
.lock-brand .sr-logo { font-size: clamp(15px, 2.1vw, 24px); }

.lock-brand .sr-logo-sensors,
.lock-brand .sr-logo-domain { color: #fff; }
.lock-brand .sr-logo-product { background: var(--sr-coral); }

.lock-welcome {
    color: rgba(255, 255, 255, .78) !important;
    font-family: "Poppins", "Segoe UI", sans-serif !important;
    font-size: clamp(.82rem, 1.4vw, 1rem) !important;
    font-weight: 400;
    letter-spacing: .12em;
    margin-bottom: 28px !important;
    text-transform: uppercase;
}

.lock-login {
    align-items: center;
    background: var(--sr-coral);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-family: "Poppins", "Segoe UI", sans-serif;
    font-size: .92rem;
    font-weight: 600;
    gap: 10px;
    padding: 13px 22px;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.lock-login:hover {
    background: var(--sr-coral-dark);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

.lock-icon {
    border: 0 !important;
    color: inherit !important;
    font-size: 1rem !important;
    padding: 0 !important;
}

@media (max-width: 575.98px) {
    .content-wrapper { padding: 1rem !important; }
    .login-box { width: calc(100% - 28px); }
    .login-card-body { padding: 24px 22px 26px; }
    .login-logo .sr-logo { font-size: 12px; }
}