/* ========================================
   Enerinno application typography system
   Keeps navigation and content consistent without scaling layouts.
======================================== */

:root {
    --type-page-title: 30px;
    --type-section-title: 20px;
    --type-subtitle: 16px;
    --type-body: 14px;
    --type-label: 13px;
    --type-caption: 12px;
    --type-nav: 12px;
}

/* Main navigation */
.navbar-primary-links a,
.navbar-account-links > a,
.navbar-button,
.navbar-user {
    font-size: var(--type-nav) !important;
}

/* Dashboard and project side navigation */
.customer-dashboard-sidebar nav a,
.customer-dashboard-sidebar .dashboard-nav-label,
.project-nav-list > a {
    font-size: var(--type-nav) !important;
}

.sidebar-project-heading strong {
    font-size: var(--type-section-title) !important;
}

.customer-dashboard-label,
.sidebar-heading-kicker,
.customer-dashboard-sidebar .dashboard-nav-number,
.customer-dashboard-sidebar .pro-badge {
    font-size: var(--type-caption) !important;
}

/* Application page titles */
.customer-dashboard-content h1,
.account-content h1,
.mqtt-sidebar h1 {
    font-size: var(--type-page-title) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em;
}

/* Section and panel titles */
.customer-dashboard-content h2,
.account-content h2,
.mqtt-workspace h2 {
    font-size: var(--type-section-title) !important;
    line-height: 1.3 !important;
}

/* Card and subsection titles */
.customer-dashboard-content h3,
.account-content h3,
.mqtt-workspace h3 {
    font-size: var(--type-subtitle) !important;
    line-height: 1.35 !important;
}

/* Descriptions and normal content */
.customer-dashboard-content p,
.account-content header p,
.account-card p,
.mqtt-workspace p,
.mqtt-sidebar p {
    font-size: var(--type-body) !important;
    line-height: 1.55 !important;
}

/* List and card names */
.overview-list strong,
.item-name-link,
.sensor-monitor-card h2,
.config-list strong,
.mqtt-device-list strong {
    font-size: var(--type-subtitle) !important;
}

/* Forms and data tables */
.customer-dashboard-content label,
.account-form label,
.mqtt-workspace label,
.form-group > label {
    font-size: var(--type-label) !important;
}

.customer-dashboard-content input,
.customer-dashboard-content select,
.customer-dashboard-content textarea,
.account-content input,
.account-content select,
.account-content textarea,
.mqtt-workspace input,
.mqtt-workspace select,
.mqtt-workspace textarea {
    font-size: var(--type-body) !important;
}

.customer-dashboard-content th,
.account-content th,
.mqtt-workspace th {
    font-size: var(--type-caption) !important;
}

.customer-dashboard-content td,
.account-content td,
.mqtt-workspace td,
.readonly-field strong {
    font-size: var(--type-body) !important;
}

/* Descriptive and secondary text */
.customer-dashboard-content small,
.account-content small,
.mqtt-workspace small,
.form-help,
.helptext,
.readonly-field span,
.overview-title p,
.panel-heading p {
    font-size: var(--type-caption) !important;
    line-height: 1.5 !important;
}

/* Eyebrows and metadata labels */
.eyebrow,
.monitor-header .eyebrow,
.account-content header > span,
.mqtt-eyebrow,
.project-table th,
.mqtt-info-grid span {
    font-size: var(--type-caption) !important;
}

/* Actions use one readable size, including compact buttons */
.customer-dashboard-content button,
.customer-dashboard-content .button,
.account-content button,
.mqtt-workspace button,
.mqtt-primary-action {
    font-size: var(--type-label) !important;
}

@media (max-width: 700px) {
    :root {
        --type-page-title: 30px;
    }

    .customer-dashboard-content input,
    .customer-dashboard-content select,
    .customer-dashboard-content textarea,
    .account-content input,
    .account-content select,
    .account-content textarea {
        font-size: 16px !important;
    }
}


/* Lightweight canvas readings and list names */
.hvac-builder .canvas-items .sensor-value {
    font-size: var(--type-body) !important;
    font-weight: 400 !important;
}

.projects-page .item-name-link,
.projects-page .sensor-name-link {
    font-weight: 400 !important;
}


/* Navigation, Canvas, and action refinements */
.navbar-primary-links a,
.navbar-account-links > a,
.navbar-button,
.navbar-user {
    font-size: var(--type-label) !important;
}

.dashboard-breadcrumbs a,
.dashboard-breadcrumbs [aria-current="page"],
.monitor-tabs a,
.mqtt-tabs a,
select,
select option {
    font-weight: 400 !important;
}

.hvac-builder .canvas-items .sensor-value {
    font-size: var(--type-caption) !important;
    font-weight: 700 !important;
}

.projects-page .item-name-link,
.projects-page .sensor-name-link {
    font-size: var(--type-body) !important;
    font-weight: 400 !important;
}

.projects-page .button-compact {
    font-weight: 400 !important;
}

.hvac-builder .add-canvas-button {
    border: 0 !important;
    color: var(--enerinno-orange) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 20px !important;
    font-weight: 500 !important;
}

.hvac-builder .add-canvas-button:hover,
.hvac-builder .add-canvas-button:focus-visible {
    color: var(--enerinno-orange-dark) !important;
    background: var(--enerinno-orange-pale) !important;
}


/* Correct compact badge and regular form values */
.customer-dashboard-sidebar .pro-badge {
    font-size: 9px !important;
    font-weight: 700 !important;
}

input,
select,
textarea,
select option {
    font-weight: 400 !important;
}