/* Premium component layer (behavior-safe)
 * Purpose: standardize shared UI components across modules without changing JS/PHP flow.
 * This file is intended to load after existing modern files.
 */

/* Base text tone consistency */
.page-content {
    color: var(--sf-color-text, #334a60);
}

/* Breadcrumb + toolbar */
.page-content .page-bar {
    background: linear-gradient(
        180deg,
        var(--sf-color-surface-1, #f8fbff) 0%,
        var(--sf-color-surface-2, #eef4fb) 100%
    );
    border-bottom: 1px solid var(--sf-color-border-mid, #c7d5e3);
    box-shadow: var(--sf-shadow-soft, 0 6px 14px rgba(35, 51, 68, 0.1));
}

.page-content .page-bar .page-breadcrumb > li > a,
.page-content .page-bar .page-breadcrumb > li > span {
    color: #455a6f;
    font-weight: 700;
}

.page-content .page-toolbar .form-inline {
    gap: 8px 10px;
}

.page-content .page-toolbar .form-inline .mb-3,
.page-content .page-toolbar .form-inline .form-group {
    border: 1px solid var(--sf-color-border-mid, #c7d5e3);
    border-radius: 999px !important;
    background: linear-gradient(180deg, #f6f9fd 0%, #eef4fa 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* Portlet/card shell */
.page-content .portlet.light.bordered {
    background: var(--sf-card-bg, #ffffff);
    border: 1px solid var(--sf-card-border, #dbe4ef);
    border-radius: var(--sf-radius-md, 12px) !important;
    overflow: hidden;
}

.page-content .portlet.light.bordered.primary-box-shadow {
    box-shadow: var(--sf-card-shadow, 0 10px 22px rgba(30, 44, 60, 0.14));
}

.page-content .portlet > .portlet-title {
    border-bottom: 1px solid #e6edf5;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.page-content .portlet > .portlet-title > .caption > .caption-subject {
    color: var(--sf-text-strong, #243242);
    letter-spacing: 0.1px;
}

/* Form controls + actions */
.page-content input.form-control,
.page-content select.form-control,
.page-content textarea.form-control,
.page-content .input-inline.form-control {
    border: 1px solid #cdd9e5;
    border-radius: var(--sf-radius-sm, 8px) !important;
    color: var(--sf-color-text-strong, #243242);
    background: #ffffff;
    transition: border-color var(--sf-motion-fast, 140ms ease), box-shadow var(--sf-motion-fast, 140ms ease);
}

.page-content input.form-control:hover,
.page-content select.form-control:hover,
.page-content textarea.form-control:hover,
.page-content .input-inline.form-control:hover {
    border-color: #b9cada;
}

.page-content input.form-control:focus,
.page-content select.form-control:focus,
.page-content textarea.form-control:focus,
.page-content .input-inline.form-control:focus {
    border-color: var(--sf-color-focus, #7f9fbe);
    box-shadow: 0 0 0 2px rgba(26, 115, 184, 0.12);
}

.page-content .form-actions {
    border-top: 1px solid #e6edf5;
    padding-top: 10px;
}

.page-content .btn {
    border-radius: var(--sf-radius-sm, 8px) !important;
    font-weight: 700;
}

/* jTable standard shell (special page-specific selectors still override where needed) */
.page-content .jtable-main-container {
    border: 1px solid #dbe4ef;
    border-radius: var(--sf-radius-md, 12px) !important;
    box-shadow: var(--sf-shadow-soft, 0 6px 14px rgba(35, 51, 68, 0.1));
    overflow: auto;
}

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

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

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

.page-content .jtable-main-container > table.jtable > tbody > tr > td {
    padding: 9px 11px;
    color: #334252;
    border-top: 1px solid #e8eef5;
    border-right: 1px solid #eef3f8;
    line-height: 1.4;
}

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

.page-content .jtable-main-container > table.jtable > tbody > tr:nth-child(even) > td {
    background: #fbfdff;
}

.page-content .jtable-main-container > table.jtable > tbody > tr:hover > td {
    background: #f2f7ff;
}

/* jTable pagination polish */
.page-content div.jtable-main-container > div.jtable-bottom-panel {
    border-top: 1px solid #dfe7f0;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
    padding: 8px 10px;
}

.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number,
.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-first,
.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-last,
.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-previous,
.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-next {
    border: 1px solid #d4deea;
    border-radius: 6px !important;
    background: #ffffff;
    color: #435466;
    font-weight: 600;
}

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

/* Modal shell alignment */
body.page-header-fixed .modal-content {
    border: 1px solid #dbe3ec;
    border-radius: var(--sf-radius-md, 12px) !important;
    box-shadow: var(--sf-shadow-float, 0 16px 32px rgba(24, 36, 50, 0.2));
}