/* iTexxia CRM App V2 — shared CRUD shell
 * Visual-only progressive layer. Keeps Yii2 markup, routes, forms and widgets intact.
 */

.page {
    width: min(100%, var(--itx-content-max));
    margin-inline: auto;
    padding: clamp(.9rem, 1.8vw, 1.5rem) var(--itx-page-gutter) 2rem;
}

.page > h1:first-child,
.page > .page-title:first-child,
.page-header h1,
.page-header .h1 {
    margin: 0;
    color: var(--itx-ink);
    font-family: var(--itx-font-display);
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 750;
    letter-spacing: -.025em;
}

.page > p.text-muted:first-of-type,
.page-header .text-muted {
    color: var(--itx-muted) !important;
}

.page .card,
.page .panel,
.page .well,
.page .detail-view,
.page .grid-view,
.page .list-view {
    border-color: var(--itx-border);
}

.page .card {
    background: var(--itx-surface);
    border: 1px solid var(--itx-border) !important;
    border-radius: var(--itx-radius);
    box-shadow: var(--itx-shadow-xs) !important;
}

.page .card-header,
.page .card-footer {
    background: color-mix(in srgb, var(--itx-surface) 90%, var(--itx-surface-soft));
    border-color: var(--itx-border);
}

.page .card-header {
    padding: .9rem 1rem;
    font-weight: 700;
    color: var(--itx-ink);
}

.page .card-body {
    padding: 1rem;
}

.page .btn {
    min-height: var(--itx-control-height-sm);
    border-radius: var(--itx-radius-sm);
    font-weight: 650;
    box-shadow: none;
}

.page .btn-sm {
    min-height: 32px;
}

.page .btn-primary {
    border-color: var(--itx-brand);
    background: var(--itx-brand);
}

.page .btn-outline-primary {
    border-color: color-mix(in srgb, var(--itx-brand) 55%, var(--itx-border));
    color: var(--itx-brand);
}

.page .btn-light,
.page .btn-outline-secondary {
    border-color: var(--itx-border);
    background: var(--itx-surface);
    color: var(--itx-body);
}

.page .form-control,
.page .form-select,
.page .select2-container--bootstrap-5 .select2-selection,
.page .input-group-text {
    min-height: var(--itx-control-height);
    border-color: var(--itx-border-strong);
    border-radius: var(--itx-radius-sm);
    background: var(--itx-surface);
    color: var(--itx-ink);
}

.page textarea.form-control {
    min-height: 112px;
}

.page .form-control:focus,
.page .form-select:focus,
.page .select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: color-mix(in srgb, var(--itx-brand) 65%, white);
    box-shadow: var(--itx-shadow-focus);
}

.page .form-label,
.page label.control-label {
    margin-bottom: .38rem;
    color: var(--itx-body);
    font-size: .84rem;
    font-weight: 700;
}

.page .help-block,
.page .form-text,
.page .hint-block {
    color: var(--itx-muted);
    font-size: .8rem;
}

.page .invalid-feedback,
.page .help-block-error {
    font-size: .8rem;
    font-weight: 600;
}

.page .table-responsive {
    border: 1px solid var(--itx-border);
    border-radius: var(--itx-radius);
    background: var(--itx-surface);
    box-shadow: var(--itx-shadow-xs);
}

.page table.table {
    margin-bottom: 0;
    color: var(--itx-body);
    vertical-align: middle;
}

.page table.table > thead > tr > th {
    padding: .72rem .8rem;
    border-bottom: 1px solid var(--itx-border-strong);
    background: var(--itx-surface-soft);
    color: var(--itx-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
    white-space: nowrap;
}

.page table.table > tbody > tr > td {
    padding: .72rem .8rem;
    border-color: var(--itx-border);
}

.page table.table > tbody > tr:hover > * {
    background: color-mix(in srgb, var(--itx-brand) 4%, var(--itx-surface));
}

.page .summary,
.page .grid-view .summary,
.page .list-view .summary {
    margin-bottom: .65rem;
    color: var(--itx-muted);
    font-size: .82rem;
}

.page .pagination {
    gap: .28rem;
    margin-top: 1rem;
}

.page .page-link {
    min-width: 36px;
    min-height: 36px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--itx-border);
    border-radius: var(--itx-radius-sm) !important;
    background: var(--itx-surface);
    color: var(--itx-body);
}

.page .active > .page-link {
    border-color: var(--itx-brand);
    background: var(--itx-brand);
    color: #fff;
}

.page .badge {
    border-radius: var(--itx-radius-pill);
    padding: .38rem .58rem;
    font-weight: 700;
}

.page .nav-tabs {
    gap: .25rem;
    border-bottom-color: var(--itx-border);
}

.page .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--itx-muted);
    font-weight: 650;
}

.page .nav-tabs .nav-link.active {
    border-bottom-color: var(--itx-brand);
    background: transparent;
    color: var(--itx-ink);
}

.page .alert {
    border-radius: var(--itx-radius);
    border-width: 1px;
}

.page .modal-content,
.page + .modal .modal-content,
.modal .modal-content {
    border: 1px solid var(--itx-border);
    border-radius: var(--itx-radius-lg);
    background: var(--itx-surface);
    box-shadow: var(--itx-shadow-raised);
}

.page .dropdown-menu,
.dropdown-menu {
    border: 1px solid var(--itx-border);
    border-radius: var(--itx-radius);
    background: var(--itx-surface);
    box-shadow: var(--itx-shadow-raised);
}

.page .dropdown-item {
    border-radius: var(--itx-radius-xs);
}

.app-controller-ticket .page,
.app-controller-work-log .page,
.app-controller-project .page,
.app-controller-account .page,
.app-controller-contact .page,
.app-controller-asset .page {
    container-type: inline-size;
}

@container (max-width: 760px) {
    .page .card-body,
    .page .card-header {
        padding-inline: .85rem;
    }
}

@media (max-width: 767.98px) {
    .page {
        padding-top: .75rem;
    }

    .page .btn:not(.btn-sm) {
        min-height: 42px;
    }

    .page .table-responsive {
        margin-inline: calc(var(--itx-page-gutter) * -.35);
        border-radius: var(--itx-radius-sm);
    }

    .page .card {
        border-radius: var(--itx-radius-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page *,
    .page *::before,
    .page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}