/* Shared screen layout. Loaded after the theme; colors and print styles stay local. */
@media screen {
    :root { --dc-layout-width: 1200px; --dc-layout-gutter: clamp(16px, 2vw, 24px); }

    html body .dilekcloud-container,
    html body #main-menu .container,
    html body #home-banner .container,
    html body section#main-body > .container,
    html body section#main-body > .container-fluid,
    html body .dilekcloud-footer-wrapper > .container {
        box-sizing: border-box;
        width: 100% !important;
        max-width: var(--dc-layout-width) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: var(--dc-layout-gutter) !important;
        padding-right: var(--dc-layout-gutter) !important;
    }

    /* Public backgrounds can fill the viewport; their content has one shared limit. */
    html body .dc-homepage .dc-shell,
    html body .dc-homepage .dc-shell-domain,
    html body .dc-cloud-container {
        box-sizing: border-box;
        width: 100% !important;
        max-width: var(--dc-layout-width) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: var(--dc-layout-gutter) !important;
        padding-right: var(--dc-layout-gutter) !important;
    }

    html body #main-body :is(.dc-cloud-wrapper, .dc-hosting-wrapper, .dc-reseller-wrapper,
        .dc-wp-master-wrapper, .dc-mail-master-wrapper, .dc-client-dashboard, .dc-invoices-page) {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html body #main-body > :is(.container, .container-fluid) > .row {
        margin-left: -10px;
        margin-right: -10px;
    }
    html body #main-body > :is(.container, .container-fluid) > .row > [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }

    html body #main-body :is(.main-content, .sidebar, .panel, .panel-body, .tab-content,
        .tab-pane, .dc-card, .dc-details-wrapper, .dc-module-area, .dc-data-container,
        .dataTables_wrapper, .form-group, fieldset) {
        min-width: 0;
        max-width: 100%;
    }
    html body #main-body :is(.dc-product-title, .dc-info-value, .dc-tech-row,
        .list-group-item, .ticket-reply, .kb-article-content, .alert, .panel-title) {
        overflow-wrap: anywhere;
    }
    html body #main-body :is(.form-control, .dc-form-control, input[type="file"], select, textarea) {
        min-width: 0;
        max-width: 100%;
    }
    html body #main-body :is(.table-responsive, .table-container, .dc-module-area) {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    html body #main-body .dataTables_wrapper .pagination { display: flex; flex-wrap: wrap; }
    html body #main-body .dc-search-wrapper { max-width: 100%; }
    html body #main-body .dc-details-tabs { flex-wrap: wrap; }
    html body #main-body .dc-info-item { gap: 12px; }
    html body #main-body .dc-tech-row { gap: 12px; flex-wrap: wrap; }
    html body #main-body button[onclick*="extraTicketAttachment"] {
        padding-left: 10px !important; padding-right: 10px !important;
        white-space: normal; height: auto !important; min-height: 46px;
    }

    /* Keep slider controls away from copy and primary actions at every width. */
    html body .dc-homepage .dc-hero .carousel-control {
        top: auto; bottom: 16px; width: 44px; height: 44px;
    }
    html body .dc-homepage .dc-hero .carousel-control.left { left: 16px; }
    html body .dc-homepage .dc-hero .carousel-control.right { right: 16px; }
    html body .dc-homepage .dc-hero .carousel-control:is(.left, .right) .dc-arrow { top: 0; left: 0; right: auto; margin-top: 0; }

    html body #order-standard_cart {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Responsive image rules must not collapse the CVV illustration in a popover. */
    html body .popover img[src$="/ccv.gif"] {
        display: block;
        width: 210px !important;
        max-width: none !important;
        height: auto;
    }
    html body .popover:has(img[src$="/ccv.gif"]) {
        width: 242px;
        max-width: calc(100vw - 24px);
    }

    /* The same menu must fit the 1200px shell on every desktop monitor. */
    @media (min-width: 1101px) {
        html body .dc-nav-container { gap: 0 !important; }
        html body .dc-nav-link { padding-left: 8px !important; padding-right: 8px !important; font-size: 13px !important; }
        html body .dc-right-actions { gap: 5px !important; }
        html body :is(.dc-btn-primary-custom, .dc-btn-outline-custom) {
            padding-left: 9px !important; padding-right: 9px !important; font-size: 11px !important;
        }
    }

    @media (max-width: 991px) {
        html body #main-body .main-content { margin-bottom: 24px; }
        html body #main-body .dc-card { padding: 18px; }
        html body #main-body .sidebar .list-group-item { white-space: normal; }
    }

    @media (max-width: 767px) {
        html body #main-body :is(.dc-card, .dc-data-container) { padding: 14px; }
        html body #main-body .dc-hero-banner { padding: 18px; }
        html body #main-body :is(.btn, .dc-btn) { white-space: normal; overflow-wrap: anywhere; }
        html body #main-body :is(input.form-control, select.form-control, textarea.form-control,
            input.field, select.field, textarea.field, .dc-search-input) { font-size: 16px !important; }
        html body #main-body .dc-client-dashboard .dc-tile-card { height: auto; min-height: 80px; gap: 8px; padding: 14px 12px; }
        html body #main-body .dc-client-dashboard .stat-icon { flex-shrink: 0; }
        html body #main-body .dc-alert { flex-wrap: wrap; gap: 12px; }
        html body #main-body .dc-info-item { align-items: flex-start; }
        html body #main-body .dataTables_filter input { width: 100%; max-width: 100%; margin-left: 0; }
        html body #main-body .dataTables_filter label { display: block; white-space: normal; }
        html body #main-body .dataTables_length { white-space: normal; }
        html body .dc-homepage .dc-slide { padding-left: 0; padding-right: 0; }
        html body .dc-homepage .dc-slide-copy { padding: 28px 24px; }
    }

    @media (max-width: 480px) {
        html body .dilekcloud-container { height: auto !important; min-height: 64px; padding-top: 10px !important; padding-bottom: 10px !important; flex-wrap: wrap; gap: 10px; }
        html body .dc-right-actions { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
        html body #main-body .dc-details-tabs > li > a { padding: 10px 12px; }
        html body #main-body .dc-client-dashboard .dc-tile-card > div:first-child { min-width: 0; }
        html body #main-body .dc-client-dashboard .stat-label { overflow-wrap: anywhere; }
        html body #main-body .dc-client-dashboard .stat-icon { width: 32px; height: 32px; font-size: 15px; }
    }

    @media (max-width: 375px) {
        html body #main-body .dc-contact-form-card .recaptcha-container {
            display: block; position: relative; left: 50%;
            width: 304px; max-width: none; height: 64px;
            margin-left: -152px; margin-right: 0;
            transform: scale(.8); transform-origin: center top;
        }
    }
}