/* Infrastructure Watcher shared design system. Load after module CSS. */

:root {
    --background: #f3f5f8;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --border: #dfe4ea;

    --text: #202936;
    --muted: #687483;

    --ok: #198754;
    --warning: #fd7e14;
    --alert: #dc3545;
    --info: #0d6efd;

    --shadow: 0 4px 14px rgba(31, 41, 55, 0.07);
}

.navigation {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.navigation a {
    padding: 9px 13px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--info);
    text-decoration: none;
    font-size: 13px;
}

.navigation a:hover {
    background: var(--surface-soft);
}

.status-ok,
.ok {
    color: var(--ok);
    font-weight: bold;
}

.status-warning,
.warning {
    color: var(--warning);
    font-weight: bold;
}

.status-alert,
.status-error,
.alert {
    color: var(--alert);
    font-weight: bold;
}

.panel,
.card,
.summary-card,
.category-card,
.chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
}


/*
 * Infrastructure Watcher
 * UI Standard
 *
 * Authoritative visual component layer.
 *
 * Compact baseline: Maintenance.
 *
 * This stylesheet intentionally does NOT control:
 * - grid-template-columns
 * - ordering
 * - table column structure
 * - sorting
 * - AJAX
 * - refresh
 * - pagination logic
 * - application relationships
 * - semantic status colors
 */


/* =========================================================
   FONT FAMILY
   ========================================================= */

html,
body,
button,
input,
select,
textarea {
    font-family:
        Arial,
        Helvetica,
        sans-serif !important;
}


/* =========================================================
   PAGE HEADERS
   ========================================================= */

.title,
h1.title {
    margin: 0 !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

.subtitle {
    margin-top: 5px !important;
    color: var(--muted) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.navigation a {
    padding: 9px 13px !important;

    border-radius: 7px !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.section-title,
.section h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}


/* =========================================================
   KPI / SUMMARY CARDS
   Compact standard.
   ========================================================= */

.summary-card {
    min-height: 108px !important;
    padding: 15px 17px !important;
    border-radius: 10px !important;
}

.summary-card .summary-label,
.summary-label {
    margin: 0 !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.summary-card .summary-value,
.summary-value {
    margin-top: 8px !important;

    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
}

.summary-card .summary-detail,
.summary-detail {
    margin-top: 6px !important;

    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}


/* =========================================================
   PANELS
   ========================================================= */

.panel,
.card,
.summary-card,
.category-card,
.chart-card {
    border-radius: 10px !important;
}


/* =========================================================
   FILTER TOOLBAR
   ========================================================= */

.filter-toolbar {
    gap: 12px !important;
    margin-bottom: 16px !important;
    padding: 14px 16px !important;

    border-radius: 10px !important;
}

.filter-field,
.form-field,
.field {
    gap: 5px !important;
}

.filter-field label,
.form-field > label,
.field label {
    margin: 0 !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-transform: uppercase !important;
}


/* =========================================================
   FORM CONTROLS
   ========================================================= */

.filter-field input,
.filter-field select,
.form-field input,
.form-field select,
.form-field textarea,
.field input,
.field select,
.field textarea {
    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;

    border-radius: 7px !important;
}

.filter-field input,
.filter-field select,
.form-field input:not([type="checkbox"]),
.form-field select:not([multiple]),
.field input,
.field select {
    min-height: 38px !important;
    padding: 7px 10px !important;
}

.form-field textarea {
    padding: 9px 10px !important;
}

.form-help {
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}


/* =========================================================
   STANDARD BUTTONS
   ========================================================= */

.primary-action,
.secondary-action,
.filter-submit,
.filter-clear,
.action-button,
.filter-button,
.row-action {
    min-height: 38px !important;
    padding: 7px 12px !important;

    border-radius: 7px !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}


/* =========================================================
   SMALL OPERATIONAL CONTROLS
   ========================================================= */

.button,
.badge,
.maintenance-status {
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

.badge,
.maintenance-status {
    padding: 3px 9px !important;
    border-radius: 999px !important;
}


/* =========================================================
   TABLES
   Only typography/padding.
   No columns or sorting behavior.
   ========================================================= */

table th,
.sortable-table th {
    padding: 10px 12px !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-transform: uppercase !important;
}

table td,
.sortable-table td {
    padding: 10px 12px !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;

    vertical-align: top !important;
}

.row-secondary {
    margin-top: 4px !important;

    font-size: 12px !important;
    line-height: 1.25 !important;
}


/* =========================================================
   FILTER SUMMARY
   ========================================================= */

.filter-summary,
.visible-counter,
.summary {
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.pagination-info {
    font-size: 13px !important;
    line-height: 1.2 !important;
}

.pagination-links {
    gap: 6px !important;
}

.pagination a,
.pagination span {
    min-width: 36px !important;
    min-height: 36px !important;

    padding: 6px 10px !important;

    border-radius: 7px !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}

.pagination span.active {
    font-weight: 700 !important;
}


/* =========================================================
   MAINTENANCE DIALOG / GENERIC FORM DIALOG
   ========================================================= */

.maintenance-dialog-header {
    padding: 16px 20px !important;
}

.maintenance-dialog-header h2 {
    margin: 0 !important;

    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.maintenance-dialog-content {
    padding: 20px !important;

    font-size: 13px !important;
    line-height: 1.35 !important;
}

.maintenance-dialog-footer {
    padding: 14px 20px !important;
}

.dialog-description {
    font-size: 13px !important;
    line-height: 1.3 !important;
}

.maintenance-details {
    font-size: 13px !important;
    line-height: 1.35 !important;
}


/* =========================================================
   METRICS
   ========================================================= */

.chart-card {
    padding: 17px !important;
}

.chart-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.chart-description {
    font-size: 12px !important;
    line-height: 1.3 !important;
}

.chart-stat-label {
    font-size: 11px !important;
    font-weight: 700 !important;
}

.chart-stat-value {
    font-size: 17px !important;
    font-weight: 700 !important;
}


/* =========================================================
   EMPTY / FOOTER
   ========================================================= */

.empty {
    font-size: 13px !important;
    line-height: 1.35 !important;
}

.application-footer {
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}


/* =========================================================
   MOBILE TYPOGRAPHY ONLY
   Module layout remains controlled by each module.
   ========================================================= */

@media (max-width: 700px) {

    .title,
    h1.title {
        font-size: 26px !important;
    }

    .section-title,
    .section h2 {
        font-size: 19px !important;
    }

    .summary-card .summary-value,
    .summary-value {
        font-size: 20px !important;
    }
}


/* =========================================================
   WATCHER CARD NORMALIZATION
   Baseline: Maintenance cards

   This section controls dimensions only.
   Grid structure and module behavior remain untouched.
   ========================================================= */


/* ---------------------------------------------------------
   1-4. SUMMARY / KPI CARDS

   Applies to:
   - Dashboard upper cards
   - Dashboard Executive KPIs
   - Availability upper cards
   - SLA Compliance upper cards
   - Maintenance upper cards
   --------------------------------------------------------- */

.summary-grid .summary-card,
.summary-grid-secondary .summary-card,
.availability-summary-grid .summary-card,
.sla-summary-grid .summary-card {
    height: 108px !important;
    min-height: 108px !important;
    padding: 15px 17px !important;
}


/*
 * Keep the content hierarchy identical in every summary card.
 */

.summary-grid .summary-label,
.summary-grid-secondary .summary-label,
.availability-summary-grid .summary-label,
.sla-summary-grid .summary-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.summary-grid .summary-value,
.summary-grid-secondary .summary-value,
.availability-summary-grid .summary-value,
.sla-summary-grid .summary-value {
    margin-top: 8px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
}

.summary-grid .summary-detail,
.summary-grid-secondary .summary-detail,
.availability-summary-grid .summary-detail,
.sla-summary-grid .summary-detail {
    margin-top: 6px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}


/* ---------------------------------------------------------
   5. Availability -> Healthy Checks
   Neutral / black accent
   --------------------------------------------------------- */

.availability-summary-grid
.summary-card:nth-child(2) {
    border-top:
        4px solid var(--text, #202936)
        !important;
}


/* ---------------------------------------------------------
   6. SLA -> SLA Target
   Neutral / black accent
   --------------------------------------------------------- */

.sla-summary-grid
.summary-card:nth-child(1) {
    border-top:
        4px solid var(--text, #202936)
        !important;
}


/* ---------------------------------------------------------
   7. SLA -> Allowed Downtime
   Neutral / black accent
   --------------------------------------------------------- */

.sla-summary-grid
.summary-card:nth-child(4) {
    border-top:
        4px solid var(--text, #202936)
        !important;
}


/* ---------------------------------------------------------
   MOBILE

   Existing grid behavior remains controlled by
   theme-responsive.css and module styles.
   Only fixed desktop heights are released on mobile.
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .summary-grid .summary-card,
    .summary-grid-secondary .summary-card,
    .availability-summary-grid .summary-card,
    .sla-summary-grid .summary-card {
        height: auto !important;
    }

    .summary-grid .summary-card,
    .summary-grid-secondary .summary-card,
    .availability-summary-grid .summary-card,
    .sla-summary-grid .summary-card {
        min-height: 108px !important;
    }

}


/* ---------------------------------------------------------
   SLA -> Executions Evaluated
   Neutral / black accent
   --------------------------------------------------------- */

.sla-summary-grid
.summary-card:nth-child(7) {
    border-top:
        4px solid var(--text, #202936)
        !important;
}



.application-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;

    width: 100%;
    margin-top: 32px;
    padding: 18px 12px;

    border-top: 1px solid var(--border);

    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.application-footer span:not(:last-child)::after {
    content: "•";
    margin-left: 10px;
}

@media (max-width: 700px) {
    .application-footer {
        flex-direction: column;
        gap: 4px;
    }

    .application-footer span::after {
        display: none;
    }
}


/*
 * ============================================================
 * Infrastructure Watcher Shared UI
 *
 * FINAL shared presentation layer.
 *
 * Loaded after page-specific CSS so common Watcher components
 * have the same appearance everywhere without deleting legacy
 * page CSS yet.
 * ============================================================
 */


/* ------------------------------------------------------------
 * Page wrappers
 * ------------------------------------------------------------
 */

.page,
.container {
    width: 100%;
    max-width: 1600px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 24px;
    padding-right: 24px;
}


/* ------------------------------------------------------------
 * Page header
 * ------------------------------------------------------------
 */

.topbar,
.header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 26px;
}


/* ------------------------------------------------------------
 * Page title / subtitle
 * ------------------------------------------------------------
 */

.title {
    margin: 0;

    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
}

.subtitle {
    margin-top: 6px;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.4;
}


/* ------------------------------------------------------------
 * Navigation
 * ------------------------------------------------------------
 */

.navigation {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    flex-wrap: wrap;
}

.navigation a {
    color: var(--info);

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;
}

.navigation a:hover,
.navigation a:focus {
    text-decoration: underline;
}


/* ------------------------------------------------------------
 * Standard panels / cards
 * ------------------------------------------------------------
 */

.panel,
.summary-card {
    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: 10px;

    box-shadow: var(--shadow);
}


/* ------------------------------------------------------------
 * Standard section headings
 * ------------------------------------------------------------
 */

.section-title,
.section h2 {
    color: var(--text);

    font-weight: 700;
}


/* ------------------------------------------------------------
 * Standard actions
 * ------------------------------------------------------------
 */

.action-button,
.filter-button,
.filter-clear,
.filter-submit,
.button {
    font-family: inherit;
}


/* ------------------------------------------------------------
 * Footer alignment
 * ------------------------------------------------------------
 */

.application-footer {
    width: 100%;
}


/* ------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------
 */

@media (max-width: 760px) {

    .page,
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .topbar,
    .header {
        flex-direction: column;

        align-items: stretch;

        gap: 14px;
    }

    .navigation {
        justify-content: flex-start;
    }

    .title {
        font-size: 27px;
    }
}

/* WATCHER_CANONICAL_LAYOUT_START */

/*
 * Infrastructure Watcher canonical page layout.
 *
 * Every application page uses the same viewport origin,
 * horizontal gutter and header alignment.
 */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
}

body > .page,
body > .container {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding-top: 24px !important;
    padding-right: 24px !important;
    padding-bottom: 24px !important;
    padding-left: 24px !important;
}


/*
 * Canonical primary page header.
 */

body > .page > .topbar,
body > .container > .topbar,
body > .page > .header,
body > .container > .header {
    box-sizing: border-box !important;

    width: 100% !important;

    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 26px !important;
    margin-left: 0 !important;

    padding: 0 !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;

    gap: 24px !important;
}


/*
 * Canonical title positioning.
 */

body > .page > .topbar .title,
body > .container > .topbar .title,
body > .page > .header .title,
body > .container > .header .title {
    margin: 0 !important;
}


/*
 * Canonical navigation positioning.
 */

body > .page > .topbar > .navigation,
body > .container > .topbar > .navigation,
body > .page > .header > .navigation,
body > .container > .header > .navigation {
    margin: 0 !important;
    padding: 0 !important;

    align-self: flex-start !important;
}


/*
 * Nested legacy wrappers must not introduce another
 * application-level horizontal gutter.
 */

body > .page > .container,
body > .container > .page {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


@media (max-width: 760px) {

    body > .page,
    body > .container {
        padding-top: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 16px !important;
        padding-left: 16px !important;
    }

    body > .page > .topbar,
    body > .container > .topbar,
    body > .page > .header,
    body > .container > .header {
        flex-direction: column !important;
        gap: 14px !important;
    }
}

/* WATCHER_CANONICAL_LAYOUT_END */