/* shared-modern.css — Consolidated responsive layer for all pages.
 * 2026-04-05: Eliminates duplicate CSS across 6+ per-page modern files.
 * Loaded via HeadComm.tpl BEFORE page-specific modern CSS files.
 * Scope: portlet cards, primary-stripe buttons, actions toolbar,
 *        jTable theme, disabled buttons.
 */

/* ============================================================
 * A) PORTLET CARDS — shared border-radius, background, shadow
 * Previously duplicated in: monitor-ip, monitor-trc, monitor-url,
 *   monitor-history, subpages-modern (5 copies)
 * ============================================================ */
.page-content .portlet.light.bordered {
    background: var(--sf-card-bg);
    border: 1px solid var(--sf-card-border);
    border-radius: var(--sf-radius-md) !important;
    overflow: hidden;
}

.page-content .portlet.light.bordered.primary-box-shadow {
    box-shadow: var(--sf-card-shadow);
}

/* ============================================================
 * B) TOOLBAR / ACTIONS FLEX LAYOUT
 * Previously duplicated in: monitor-ip, monitor-url,
 *   subpages-modern (3 copies)
 * ============================================================ */
.page-content .portlet > .portlet-title > .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* ============================================================
 * C) PRIMARY-STRIPE BUTTONS
 * Previously duplicated in: monitor-ip, monitor-trc, monitor-url,
 *   monitor-history, subpages-modern (5 copies)
 * Base definition in main.css only has border-left: 3px.
 * This adds modern styling: 4px stripe, rounded, tight padding.
 * ============================================================ */
.page-content .portlet .btn.primary-stripe {
    border-left: 4px solid var(--sf-color-orange);
    border-radius: var(--sf-radius-sm) !important;
    padding: 5px 10px;
    line-height: 1.2;
    font-weight: 600;
}

/* ============================================================
 * D) DISABLED BUTTONS
 * Previously duplicated in: monitor-ip, monitor-url,
 *   subpages-modern (3 copies)
 * ============================================================ */
.page-content .portlet .btn[disabled],
.page-content .portlet .btn.disabled {
    opacity: 0.55;
}

/* ============================================================
 * E) JTABLE SHARED THEME — container, header, body, hover, pagination
 * Previously duplicated across: monitor-ip, monitor-trc,
 *   monitor-url, monitor-history (4 copies, ~80 lines each)
 * Page-specific overrides via ID selector still work
 *   (e.g., #MonIpTb has higher specificity)
 * ============================================================ */

/* Container */
.page-content .jtable-main-container {
    border: 1px solid var(--sf-card-border);
    border-radius: var(--sf-radius-md) !important;
    box-shadow: var(--sf-shadow-soft);
    overflow: hidden;
}

.page-content table.jtable {
    border-collapse: separate;
    border-spacing: 0;
}

/* Table header */
.page-content table.jtable > thead th {
    background: linear-gradient(180deg, #f8fbff 0%, #eef3f9 100%);
    color: #344354;
    font-weight: 700;
    font-size: 13px;
    border-bottom: 1px solid #d7e0eb;
    border-right: 1px solid #e4ebf3;
    padding: 10px 12px;
}

.page-content table.jtable > thead th:last-child {
    border-right: 0;
}

/* Table body */
.page-content table.jtable > tbody > tr > td {
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 500;
    color: #334252;
    border-top: 1px solid #e8eef5;
    border-right: 1px solid #eef3f8;
    background: #ffffff;
    line-height: 1.35;
}

.page-content table.jtable > tbody > tr > td:last-child {
    border-right: 0;
}

/* Alternating rows */
.page-content table.jtable > tbody > tr:nth-child(even) > td {
    background: #fbfdff;
}

/* Hover */
.page-content table.jtable > tbody > tr:hover > td {
    background: #f2f7ff;
}

/* First column (typically selection/index) */
.page-content table.jtable > tbody > tr > td:first-child {
    text-align: center;
    font-weight: 700;
    color: #5a697a;
}

/* Command buttons */
.page-content .jtable-command-column .jtable-command-button {
    opacity: 0.82;
    transition: opacity var(--sf-motion-fast);
}

.page-content .jtable-command-column .jtable-command-button:hover {
    opacity: 1;
}

/* Pagination */
.page-content .jtable-bottom-panel .jtable-page-list .jtable-page-number,
.page-content .jtable-bottom-panel .jtable-page-list .jtable-page-number-first,
.page-content .jtable-bottom-panel .jtable-page-list .jtable-page-number-last,
.page-content .jtable-bottom-panel .jtable-page-list .jtable-page-number-previous,
.page-content .jtable-bottom-panel .jtable-page-list .jtable-page-number-next {
    border-radius: 6px;
    border: 1px solid #d4deea;
    background: #ffffff;
    color: #435466;
    font-weight: 600;
}

.page-content .jtable-bottom-panel .jtable-page-list .jtable-page-number-active {
    border-radius: 6px;
    border: 1px solid #b8c9dc;
    background: #eaf2fb;
    color: #2d4660;
    font-weight: 700;
}

/* ============================================================
 * F) FONT SCALING — rem-based typography (Faz 2)
 * 2026-04-05: Replaces hardcoded px font-sizes with rem tokens.
 * rem scales with: browser zoom (Ctrl+/-), browser font-size
 * setting, and accessibility preferences.
 * main.css px rules untouched — these override via specificity.
 * ============================================================ */

/* Base content font — 13px equivalent */
.page-content {
    font-size: var(--sf-fs-0);
    line-height: var(--sf-lh-body);
}

/* Portlet title / caption */
.page-content .portlet > .portlet-title .caption-subject {
    font-size: var(--sf-fs-1);
    line-height: var(--sf-lh-tight);
}

/* Form labels */
.page-content .form-label,
.page-content .control-label {
    font-size: var(--sf-fs-0);
    line-height: var(--sf-lh-tight);
}

/* Form controls */
.page-content .form-control {
    font-size: var(--sf-fs-0);
    min-height: var(--sf-input-height);
}

/* Helper text (para-comm, tooltips) */
.page-content .para-comm,
.page-content .help-block,
.page-content .help-inline {
    font-size: var(--sf-fs-help);
    line-height: var(--sf-lh-body);
}

/* jTable cells — body and header already set above in section E,
 * but ensure rem override for scaling */
.page-content table.jtable {
    font-size: var(--sf-fs-0);
}

.page-content table.jtable > thead th {
    font-size: var(--sf-fs-0);
}

/* Button text */
.page-content .btn {
    font-size: var(--sf-fs-0);
}

/* Page title */
.page-content .page-title {
    font-size: var(--sf-fs-2);
    line-height: var(--sf-lh-title);
}

/* Breadcrumb */
.page-content .page-bar .page-breadcrumb > li > a,
.page-content .page-bar .page-breadcrumb > li > span {
    font-size: var(--sf-fs-0);
}

/* Radio/checkbox labels (MonIp filter bar etc.) */
.page-content label.no-space {
    font-size: var(--sf-fs-0) !important;
}

/* ============================================================
 * G) INPUT WIDTH RESPONSIVENESS — clamp() (Faz 3)
 * 2026-04-05: Replaces hardcoded px widths in main.css (L822-860).
 * clamp(min, preferred, max):
 *   - min: rem — never smaller than this (zoom-safe)
 *   - preferred: vw — scales with viewport width
 *   - max: rem — never larger than this (zoom-safe)
 * Overrides main.css !important via higher specificity (.page-content).
 * ============================================================ */
.page-content .input-mini {
    width: clamp(2.5rem, 6vw, 2.8125rem) !important;    /* 40-45px */
}
.page-content .input-xmini {
    width: clamp(3.5rem, 8vw, 4.375rem) !important;     /* 56-70px */
}
.page-content .input-bmini {
    width: clamp(4rem, 9vw, 5.3125rem) !important;      /* 64-85px */
}
.page-content .input-xsmall {
    width: clamp(5rem, 12vw, 7.5rem) !important;         /* 80-120px */
}
.page-content .input-small {
    width: clamp(5rem, 12vw, 7.5rem) !important;         /* 80-120px */
}
.page-content .input-msmall {
    width: clamp(6rem, 14vw, 8.75rem) !important;        /* 96-140px */
}
.page-content .input-bsmall {
    width: clamp(8rem, 18vw, 11.875rem) !important;      /* 128-190px */
}
.page-content .input-medium {
    width: clamp(10rem, 22vw, 15rem) !important;          /* 160-240px */
}
.page-content .input-large {
    width: clamp(14rem, 28vw, 20rem) !important;          /* 224-320px */
}
.page-content .input-xlarge {
    width: clamp(16rem, 35vw, 26.25rem) !important;       /* 256-420px */
}

/* ============================================================
 * H) BREAKPOINT STANDARDIZATION (Faz 4)
 * 2026-04-05: 3 standard breakpoints replace 8 inconsistent ones.
 * Desktop (>=992px): default layout — no media query needed.
 * Tablet (<=991.98px): toolbar wraps, portlet-title stacks.
 * Mobile (<=767.98px): full-width inputs, stacked form labels.
 * ============================================================ */

/* --- Tablet breakpoint --- */
@media (max-width: 991.98px) {
    /* Portlet title: stack caption + actions vertically */
    .page-content .portlet > .portlet-title {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Actions toolbar: full-width, wrap buttons */
    .page-content .portlet > .portlet-title > .actions {
        width: 100%;
        justify-content: flex-start;
        margin-top: 0.5rem;
    }

    /* jTable bottom panel: allow wrapping */
    .page-content .jtable-bottom-panel {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* --- Mobile breakpoint --- */
@media (max-width: 767.98px) {
    /* Form labels: full-width above inputs */
    .page-content .form-horizontal .form-label,
    .page-content .form-horizontal .control-label,
    .page-content .form-horizontal label[class*="col-md-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 0.25rem;
        text-align: left !important;
    }

    /* Form value columns: full-width */
    .page-content .form-horizontal [class*="col-md-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* All inputs: expand to full container width */
    .page-content [class*="input-"].form-control,
    .page-content select[class*="input-"],
    .page-content .form-horizontal [class*="input-"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Page title: slightly smaller */
    .page-content .page-title {
        font-size: var(--sf-fs-1);
    }

    /* Portlet body: tighter padding */
    .page-content .portlet > .portlet-body {
        padding: 0.5rem 0.625rem;
    }
}