/* Mobile-first application usability and responsive layout overrides. */

.page-content {
    width: 100%;
    max-width: 1320px;
    padding: 36px;
    margin: 0 auto;
}

.page-head,
.panel-head,
.head-actions,
.form-actions,
.toolbar-form,
.quote-add,
.switch-line {
    min-width: 0;
}

.page-head h1 {
    font-size: clamp(34px, 3.4vw, 44px);
}

.page-head p {
    max-width: 760px;
}

.panel,
.form-panel,
.table-panel,
.toolbar {
    min-width: 0;
}

.form-panel {
    padding: 28px;
}

.form-grid > *,
.data-row > *,
.panel-head > *,
.page-head > * {
    min-width: 0;
}

.form-control,
.form-select,
.form-check-input,
.e-control-wrapper,
.e-input-group,
.e-input-group.e-control-wrapper,
.e-ddl,
.e-numerictextbox,
.e-datepicker {
    max-width: 100%;
}

/*
   Apply full width only to controls inside their form fields.
   Syncfusion renders DatePicker/DropDownList popups under <body>.
   A global width: 100% on .e-control-wrapper also matches those
   popup wrappers and breaks their desktop positioning/rendering.
*/
.form-panel .form-field > .e-control-wrapper,
.form-panel .form-field > .e-input-group,
.form-panel .form-field > .e-input-group.e-control-wrapper,
.form-panel .form-field > .e-ddl,
.form-panel .form-field > .e-numerictextbox,
.form-panel .form-field > .e-datepicker {
    width: 100% !important;
}

.e-input {
    min-height: 42px;
}

.data-table,
.data-row,
.data-head,
.table-panel,
.quote-builder,
.quote-items {
    max-width: 100%;
}

.data-row > *,
.data-head > *,
.quote-item > * {
    overflow-wrap: anywhere;
}

.quote-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.quote-add > * {
    min-width: 0;
}

.quote-add .btn {
    min-height: 44px;
    white-space: nowrap;
}

.quote-item {
    min-width: 0;
}

.btn,
.form-control,
.form-select,
.e-input,
.e-btn,
.e-dropdownbase {
    font-size: 15px;
}

.btn {
    min-height: 42px;
}

@media (max-width: 1100px) {
    .page-content {
        padding: 30px;
    }

    .three-col,
    .four-col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .page-head .btn,
    .page-head .head-actions {
        align-self: flex-start;
    }
}

@media (max-width: 900px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .two-col,
    .three-col,
    .four-col {
        grid-template-columns: 1fr;
    }

    .toolbar-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
    }
}

@media (max-width: 760px) {
    body {
        overflow-x: hidden;
    }

    .page-content {
        padding: 22px 16px 36px;
    }

    .topbar {
        height: 68px;
        padding: 0 16px;
    }

    .topbar .eyebrow {
        font-size: 10px;
        letter-spacing: .12em;
    }

    .topbar-user {
        max-width: 46vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .page-head {
        margin-bottom: 20px;
        gap: 14px;
    }

    .page-head h1 {
        font-size: 34px;
        line-height: 1.08;
    }

    .page-head p {
        font-size: 15px;
        line-height: 1.55;
    }

    .page-head > .btn,
    .page-head .head-actions,
    .page-head .head-actions .btn {
        width: 100%;
    }

    .head-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .panel,
    .form-panel,
    .table-panel,
    .toolbar {
        border-radius: 14px;
    }

    .panel {
        padding: 18px;
    }

    .form-panel {
        padding: 18px;
    }

    .section-title {
        margin-top: 22px !important;
        margin-bottom: 14px;
    }

    .section-title h2,
    .panel-head h2 {
        font-size: 18px;
    }

    .section-title p,
    .panel-head p,
    .syncfusion-field-help {
        font-size: 13px;
        line-height: 1.5;
    }

    .form-field {
        margin-bottom: 14px;
    }

    .form-field label {
        margin-bottom: 6px;
    }

    .form-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .form-actions .btn {
        width: 100%;
    }

    .toolbar-form {
        grid-template-columns: 1fr;
    }

    .toolbar-form .btn {
        width: 100%;
    }

    .table-panel {
        padding: 10px;
    }

    .data-table .data-head {
        display: none;
    }

    .data-table .data-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 15px 12px;
        margin: 0;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
    }

    .data-table .data-row + .data-row {
        margin-top: 10px;
    }

    .data-table .data-row > * {
        width: 100%;
        text-align: left !important;
    }

    .data-table .data-row > *::before {
        display: block;
        margin-bottom: 2px;
        color: #8994a8;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .data-table .data-row > :nth-child(1)::before { content: "Primary"; }
    .data-table .data-row > :nth-child(2)::before { content: "Details"; }
    .data-table .data-row > :nth-child(3)::before { content: "More"; }
    .data-table .data-row > :nth-child(4)::before { content: "Status"; }
    .data-table .data-row > :nth-child(5)::before { content: "Date"; }
    .data-table .data-row > :nth-child(6)::before { content: "Action"; }

    .data-table .data-row > strong:first-child::before {
        content: "";
    }

    .data-table .data-row .btn {
        width: 100%;
    }

    .quote-add {
        grid-template-columns: 1fr;
    }

    .quote-add .btn {
        width: 100%;
    }

    .quote-item {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(82px, .45fr) minmax(105px, .6fr) !important;
        gap: 9px !important;
        align-items: end !important;
        padding: 14px !important;
        overflow: hidden;
    }

    .quote-item > div:first-child {
        grid-column: 1 / -1;
    }

    .quote-item > .qty-input,
    .quote-item > .rate-input,
    .quote-item > .remove-item {
        min-width: 0;
        width: 100%;
    }

    .quote-item .remove-item {
        min-height: 42px;
    }

    .quote-items .empty-state {
        padding: 18px 10px;
    }

    .e-ddl.e-popup,
    .e-popup.e-dropdownbase {
        max-width: calc(100vw - 32px) !important;
    }

    .e-dropdownbase .e-list-item,
    .e-dropdownbase .e-list-group-item {
        min-height: 42px;
        padding: 10px 12px;
    }

    .e-popup.e-popup-open {
        max-width: calc(100vw - 24px) !important;
    }

    .e-datepicker.e-control-wrapper,
    .e-numerictextbox.e-control-wrapper {
        width: 100% !important;
    }

    .panel a,
    .panel span,
    .panel p,
    .panel strong,
    .panel small,
    .content-card,
    .empty-state {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 520px) {
    .stat-grid {
        grid-template-columns: 1fr;
    }

    .mobile-menu-toggle {
        flex: 0 0 40px;
    }

    .topbar-user {
        font-size: 12px;
    }

    .form-control,
    .form-select,
    .e-input,
    .btn {
        min-height: 44px;
    }

    .quote-item {
        grid-template-columns: 1fr 1fr !important;
    }

    .quote-item > div:first-child {
        grid-column: 1 / -1;
    }

    .quote-item > .qty-input,
    .quote-item > .rate-input {
        width: 100%;
    }

    .quote-item > .remove-item {
        grid-column: 1 / -1;
    }
}