/* =========================================================
   Laundry MVC - Shared Application UI Standard
   Scope: screen/UI only. Print layouts are intentionally excluded.
   ========================================================= */
:root {
    --app-bg: #f3f6fb;
    --app-surface: #ffffff;
    --app-muted: #f8fafc;
    --app-border: #e5e7eb;
    --app-border-strong: #d1d5db;
    --app-text: #111827;
    --app-text-muted: #6b7280;
    --app-primary: #2563eb;
    --app-primary-dark: #1d4ed8;
    --app-success: #16a34a;
    --app-danger: #dc2626;
    --app-warning: #d97706;
    --app-info: #0891b2;
    --app-radius: 12px;
    --app-radius-sm: 8px;
    --app-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    --app-shadow-soft: 0 4px 14px rgba(15, 23, 42, .06);
}

@media screen {
    html { min-height: 100%; }
    body {
        background: var(--app-bg);
        color: var(--app-text);
        font-family: 'Century Gothic', Arial, Helvetica, sans-serif;
    }

    .app-page,
    .page-shell,
    .page-wrapper,
    .new-order-page,
    .invoice-page {
        width: 100%;
        max-width: 1320px;
        margin: 0 auto;
        padding: 18px 14px 30px;
    }

    .app-page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }

    .app-page-title,
    .page-title,
    .admin-title,
    .invoice-title,
    .new-order-page h2 {
        margin: 0;
        color: var(--app-text);
        font-size: 24px;
        font-weight: 800;
        line-height: 1.25;
        letter-spacing: .1px;
        border: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    .app-page-subtitle {
        margin: 4px 0 0;
        color: var(--app-text-muted);
        font-size: 13px;
        font-weight: 500;
    }

    .app-card,
    .admin-card,
    .content-card,
    .search-card,
    .invoice-card,
    .section-card,
    .professional-section,
    .table-section,
    .filter-panel,
    .app-search-card {
        background: var(--app-surface);
        border: 1px solid var(--app-border);
        border-radius: var(--app-radius);
        box-shadow: var(--app-shadow);
    }

    .app-card,
    .admin-card,
    .content-card,
    .search-card,
    .invoice-card {
        padding: 18px;
        max-width: 100%;
        overflow: visible;
    }

    .app-card-header,
    .app-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--app-border);
    }

    .app-card-body { width: 100%; }

    .app-form .form-group,
    .app-form-group,
    .form-group { margin-bottom: 14px; }

    .app-label,
    .app-form label,
    .form-group label,
    label {
        display: block;
        margin-bottom: 6px;
        color: #374151;
        font-size: 13px;
        font-weight: 700;
        text-align: left !important;
    }

    .app-control,
    .app-select,
    .app-textarea,
    .form-control,
    select.form-control,
    textarea.form-control {
        width: 100%;
        max-width: 100%;
        min-height: 38px;
        border: 1px solid var(--app-border-strong);
        border-radius: var(--app-radius-sm);
        color: var(--app-text);
        font-size: 13px;
        font-weight: 500;
        box-shadow: none;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

    textarea.form-control,
    .app-textarea { min-height: 84px; resize: vertical; }

    .form-control:focus,
    .app-control:focus,
    .app-select:focus,
    .app-textarea:focus {
        border-color: var(--app-primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
        outline: 0;
    }

    .field-validation-error,
    .validation-summary-errors,
    .text-danger {
        color: var(--app-danger) !important;
        font-size: 12px;
        font-weight: 700;
    }

    .validation-summary-errors ul { margin: 0 0 10px 18px; padding: 0; }

    .app-actions,
    .filter-actions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
    }

    .btn,
    .app-btn {
        min-height: 36px;
        border-radius: var(--app-radius-sm) !important;
        font-size: 13px;
        font-weight: 700;
        padding: 7px 14px;
        border-width: 1px;
        box-shadow: none;
        transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
    }

    .btn:hover,
    .app-btn:hover { transform: translateY(-1px); }

    .btn-primary,
    .app-btn-primary,
    .btn-save {
        background: var(--app-primary) !important;
        border-color: var(--app-primary) !important;
        color: #fff !important;
    }
    .btn-primary:hover,
    .app-btn-primary:hover,
    .btn-save:hover { background: var(--app-primary-dark) !important; border-color: var(--app-primary-dark) !important; }

    .btn-default,
    .app-btn-secondary,
    .btn-cancel {
        background: #fff !important;
        border-color: var(--app-border-strong) !important;
        color: #374151 !important;
    }

    .btn-danger,
    .btn-delete,
    .app-btn-danger {
        background: var(--app-danger) !important;
        border-color: var(--app-danger) !important;
        color: #fff !important;
    }

    .btn-success,
    .app-btn-success { background: var(--app-success) !important; border-color: var(--app-success) !important; color: #fff !important; }
    .btn-info { background: var(--app-info) !important; border-color: var(--app-info) !important; color: #fff !important; }

    .btn-xs,
    .action-btn { min-height: 28px; padding: 4px 9px; font-size: 12px; }

    .app-alert,
    .alert {
        border-radius: var(--app-radius-sm) !important;
        padding: 11px 14px;
        margin: 0 0 14px;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.45;
    }

    .alert-info { color: #0e7490; background: #ecfeff; border-color: #a5f3fc; }
    .alert-success { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
    .alert-danger, .alert-error { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
    .alert-warning { color: #92400e; background: #fffbeb; border-color: #fde68a; }

    .app-table-wrapper,
    .table-responsive,
    .table-responsive-custom {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid var(--app-border);
        border-radius: var(--app-radius);
        background: #fff;
    }

    .app-table,
    .table {
        margin-bottom: 0;
        background: #fff;
    }

    .app-table > thead > tr > th,
    .table > thead > tr > th {
        background: #1f2937 !important;
        color: #fff !important;
        border-color: #374151 !important;
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
        vertical-align: middle !important;
    }

    .app-table > tbody > tr > td,
    .table > tbody > tr > td {
        font-size: 12px;
        vertical-align: middle !important;
        border-color: var(--app-border) !important;
    }

    .table > tbody > tr:hover { background: #f8fafc; }

    .app-search-card,
    .filter-panel {
        padding: 14px;
        margin-bottom: 14px;
        background: var(--app-muted);
        box-shadow: var(--app-shadow-soft);
    }

    .pagination,
    .app-pagination { margin: 14px 0 0; }
    .pagination > li > a,
    .pagination > li > span {
        color: var(--app-primary);
        border-color: var(--app-border);
        font-weight: 700;
        margin-right: 4px;
        border-radius: 7px !important;
    }
    .pagination > .active > a,
    .pagination > .active > span {
        background: var(--app-primary) !important;
        border-color: var(--app-primary) !important;
        color: #fff !important;
    }

    .modal-content,
    .app-modal .modal-content {
        border-radius: var(--app-radius);
        border: 1px solid var(--app-border);
        box-shadow: 0 18px 50px rgba(15,23,42,.24);
        overflow: hidden;
    }
    .modal-header,
    .app-modal .modal-header { background: #f8fafc; border-bottom: 1px solid var(--app-border); }
    .modal-title { font-weight: 800; color: var(--app-text); }
    .modal-footer,
    .app-modal .modal-footer { background: #fff; border-top: 1px solid var(--app-border); }

    .dl-horizontal dt { color: #374151; font-weight: 800; }
    .dl-horizontal dd { margin-bottom: 8px; }

    .inline-delete-form,
    .inline-action-form { display: inline; }

    .login-page-wrapper {
        min-height: calc(100vh - 60px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 25px 15px;
    }
    .login-card {
        width: 100%;
        max-width: 430px;
        background: rgba(255,255,255,.97);
        border-radius: 16px;
        padding: 30px 28px;
        box-shadow: 0 18px 45px rgba(0,0,0,.28);
        border: 1px solid rgba(255,255,255,.55);
    }
    .login-title { margin: 0 0 8px; font-size: 26px; font-weight: 800; color: var(--app-text); text-align: center; }
    .login-subtitle { margin-bottom: 25px; color: var(--app-text-muted); font-size: 14px; text-align: center; }
    .login-btn { min-height: 45px; }

    .navbar-inverse {
        background: linear-gradient(90deg, #1e40af, #2563eb) !important;
        border: 0 !important;
        box-shadow: 0 2px 12px rgba(15,23,42,.14);
    }
    .navbar-brand { font-weight: 800; letter-spacing: .1px; }
    .navbar-nav > li > a.anc { font-weight: 700; }

    @media (max-width: 767px) {
        .app-page,
        .page-shell,
        .page-wrapper,
        .new-order-page,
        .invoice-page { padding: 12px 10px 22px; }
        .app-card,
        .admin-card,
        .content-card,
        .search-card,
        .invoice-card { padding: 14px; border-radius: 10px; }
        .app-page-header { display: block; }
        .app-page-title,
        .page-title,
        .admin-title,
        .invoice-title,
        .new-order-page h2 { font-size: 21px; }
        .app-actions,
        .filter-actions { align-items: stretch; }
        .app-actions .btn,
        .filter-actions .btn { width: auto; }
        .dl-horizontal dt { float: none; width: auto; text-align: left; }
        .dl-horizontal dd { margin-left: 0; }
    }
}

@media print {
    .app-page,
    .page-shell,
    .page-wrapper,
    .new-order-page,
    .invoice-page { max-width: none; padding: 0; }
}

/* =========================================================
   UI Uniformity Correction Patch
   Purpose: keep every MVC form/page visually aligned with the
   compact professional NewOrder screen and fix Hide/Show Items
   button contrast.
   ========================================================= */
@media screen {
    body .app-page,
    body .page-wrapper.app-page,
    body .new-order-page.app-page,
    body .invoice-page {
        max-width: 1280px !important;
        margin: 0 auto !important;
        padding: 8px 18px 18px !important;
        background: transparent !important;
        min-height: calc(100vh - 60px);
        overflow-x: hidden;
    }

    body .new-order-shell,
    body .content-card.app-card,
    body .search-card.app-card,
    body .admin-card.app-card,
    body .invoice-card.app-card {
        max-width: 1280px !important;
        margin: 0 auto !important;
    }

    body .app-card,
    body .content-card.app-card,
    body .search-card.app-card,
    body .admin-card.app-card,
    body .invoice-card.app-card,
    body .section-card,
    body .professional-section.app-card,
    body .table-section.app-card,
    body .filter-panel.app-search-card {
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        border-left: 1px solid #e5e7eb !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .05) !important;
        color: #111827 !important;
        overflow: visible;
    }

    body .content-card.app-card,
    body .search-card.app-card,
    body .admin-card.app-card,
    body .invoice-card.app-card {
        padding: 10px !important;
    }

    body .section-card,
    body .professional-section.app-card,
    body .table-section.app-card,
    body .filter-panel.app-search-card {
        padding: 8px 10px !important;
        margin-bottom: 8px !important;
        background-image: none !important;
    }

    body .content-card:before,
    body .professional-section:before,
    body .table-section:before {
        display: none !important;
        content: none !important;
    }

    body .app-page-header,
    body .app-card-header,
    body .app-section-header {
        margin-bottom: 8px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    body .app-page-title,
    body .page-title,
    body .admin-title,
    body .invoice-title,
    body .new-order-page h2,
    body .content-card > h2,
    body .search-card > h2 {
        margin: 0 0 8px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #111827 !important;
        font-size: 21px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
    }

    body .app-page-subtitle,
    body .items-section-subtitle {
        color: #64748b !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        margin-top: 1px !important;
    }

    body .app-form .row,
    body form .row,
    body .compact-form-row,
    body .filter-panel .row,
    body .new-order-page .row {
        margin-left: -6px !important;
        margin-right: -6px !important;
    }

    body .app-form .row > [class*="col-"],
    body form .row > [class*="col-"],
    body .compact-form-row > [class*="col-"],
    body .filter-panel .row > [class*="col-"],
    body .new-order-page .row > [class*="col-"] {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    body .app-form .form-group,
    body .form-group,
    body .filter-panel .form-group,
    body .new-order-page .form-group {
        margin-bottom: 7px !important;
    }

    body label,
    body .form-label,
    body .app-label,
    body .form-group label,
    body .filter-panel label,
    body .new-order-page label {
        display: block !important;
        margin-bottom: 3px !important;
        color: #374151 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: left !important;
    }

    body .form-control,
    body .app-control,
    body .app-select,
    body select.form-control,
    body input.form-control,
    body .filter-panel .form-control,
    body .new-order-page .form-control {
        height: 32px !important;
        min-height: 32px !important;
        padding: 5px 8px !important;
        border: 1px solid #d1d5db !important;
        border-radius: 7px !important;
        background-color: #ffffff !important;
        color: #111827 !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        box-shadow: none !important;
    }

    body textarea.form-control,
    body textarea.app-control,
    body .app-textarea,
    body .new-order-page textarea.form-control {
        height: auto !important;
        min-height: 34px !important;
        padding: 5px 8px !important;
        resize: vertical;
    }

    body .form-control:focus,
    body .app-control:focus,
    body .filter-panel .form-control:focus,
    body .new-order-page .form-control:focus {
        border-color: #2563eb !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .14) !important;
        outline: 0 !important;
    }

    body .btn,
    body .app-btn,
    body .filter-actions .btn,
    body .new-order-page .btn {
        min-height: 32px !important;
        height: auto !important;
        padding: 5px 12px !important;
        border-radius: 7px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.45 !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }

    body .btn-xs,
    body .action-btn,
    body .orders-table .btn,
    body .category-table .btn {
        min-height: 27px !important;
        padding: 3px 8px !important;
        font-size: 12px !important;
    }

    body .btn-primary,
    body .app-btn-primary,
    body .btn-save,
    body .filter-actions .btn-primary,
    body .new-order-page .btn-primary {
        background: #2563eb !important;
        border-color: #2563eb !important;
        color: #ffffff !important;
    }

    body .btn-primary:hover,
    body .app-btn-primary:hover,
    body .btn-save:hover,
    body .new-order-page .btn-primary:hover {
        background: #1d4ed8 !important;
        border-color: #1d4ed8 !important;
        color: #ffffff !important;
    }

    body .btn-default,
    body .app-btn-secondary,
    body .btn-cancel,
    body .new-order-page .btn-default,
    body .new-order-page .app-btn-secondary {
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        color: #1f2937 !important;
    }

    body .btn-default:hover,
    body .app-btn-secondary:hover,
    body .btn-cancel:hover,
    body .new-order-page .btn-default:hover,
    body .new-order-page .app-btn-secondary:hover {
        background: #f8fafc !important;
        border-color: #94a3b8 !important;
        color: #111827 !important;
    }

    body .btn-danger,
    body .app-btn-danger,
    body .btn-delete {
        background: #dc2626 !important;
        border-color: #dc2626 !important;
        color: #ffffff !important;
    }

    body .btn-success,
    body .app-btn-success {
        background: #16a34a !important;
        border-color: #16a34a !important;
        color: #ffffff !important;
    }

    body .btn-info {
        background: #0891b2 !important;
        border-color: #0891b2 !important;
        color: #ffffff !important;
    }

    body .app-actions,
    body .filter-actions,
    body .new-order-actions,
    body .btn-action-col {
        display: flex !important;
        align-items: flex-end !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 0 !important;
        padding-top: 20px !important;
    }

    body .new-order-actions {
        justify-content: flex-end !important;
        padding-bottom: 0 !important;
    }

    body .alert,
    body .app-alert {
        margin: 0 0 8px !important;
        padding: 8px 12px !important;
        border-radius: 7px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
    }

    body .table-responsive,
    body .table-responsive-custom,
    body .app-table-wrapper,
    body .new-order-items-wrapper,
    body .confirm-order-items-wrapper {
        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body .table,
    body .app-table,
    body .orders-table,
    body .category-table,
    body .order-item-table,
    body .invoice-table {
        margin-bottom: 0 !important;
        background: #ffffff !important;
    }

    body .table > thead > tr > th,
    body .app-table > thead > tr > th,
    body .orders-table > thead > tr > th,
    body .category-table > thead > tr > th,
    body .order-item-table > thead > tr > th,
    body .invoice-table > thead > tr > th {
        background: #1f2937 !important;
        color: #ffffff !important;
        border-color: #374151 !important;
        padding: 6px 8px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        white-space: nowrap;
        vertical-align: middle !important;
    }

    body .table > tbody > tr > td,
    body .app-table > tbody > tr > td,
    body .orders-table > tbody > tr > td,
    body .category-table > tbody > tr > td,
    body .order-item-table > tbody > tr > td,
    body .invoice-table > tbody > tr > td {
        padding: 5px 8px !important;
        border-color: #e5e7eb !important;
        color: #111827 !important;
        font-size: 12px !important;
        vertical-align: middle !important;
    }

    body .new-order-total {
        min-height: 32px !important;
        padding: 6px 10px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 7px !important;
        background: #ffffff !important;
        color: #111827 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    body .items-section-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin-bottom: 6px !important;
    }

    body .items-section-title {
        margin: 0 !important;
        color: #111827 !important;
        font-size: 16px !important;
        font-weight: 800 !important;
    }

    body .new-order-page .items-collapse-toggle,
    body .items-collapse-toggle,
    body button.items-collapse-toggle.btn-default,
    body .new-order-page button.items-collapse-toggle.btn-default {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 92px !important;
        min-height: 30px !important;
        padding: 4px 10px !important;
        background: #ffffff !important;
        border: 1px solid #94a3b8 !important;
        color: #111827 !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        text-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body .new-order-page .items-collapse-toggle:hover,
    body .items-collapse-toggle:hover,
    body button.items-collapse-toggle.btn-default:hover {
        background: #eff6ff !important;
        border-color: #2563eb !important;
        color: #1d4ed8 !important;
    }

    body .modal-content {
        border-radius: 10px !important;
        border: 1px solid #e5e7eb !important;
        overflow: hidden;
    }

    body .modal-header {
        padding: 10px 14px !important;
        background: #f8fafc !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    body .modal-body { padding: 12px 14px !important; }
    body .modal-footer { padding: 10px 14px !important; border-top: 1px solid #e5e7eb !important; }

    body .pager-wrapper a,
    body .pager-wrapper span,
    body .pagination > li > a,
    body .pagination > li > span {
        min-height: 30px !important;
        padding: 5px 10px !important;
        border-radius: 7px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
    }

    body .page_enabled {
        background: #ffffff !important;
        color: #2563eb !important;
        border-color: #d1d5db !important;
    }

    body .page_disabled,
    body .pagination > .active > a,
    body .pagination > .active > span {
        background: #2563eb !important;
        border-color: #2563eb !important;
        color: #ffffff !important;
    }

    body .login-card {
        border-radius: 12px !important;
        padding: 24px !important;
    }

    body .login-card .form-control {
        height: 38px !important;
        min-height: 38px !important;
    }

    body .login-btn {
        min-height: 40px !important;
    }
}

@media screen and (max-width: 767px) {
    body .app-page,
    body .page-wrapper.app-page,
    body .new-order-page.app-page,
    body .invoice-page {
        padding: 8px 10px 16px !important;
    }

    body .content-card.app-card,
    body .search-card.app-card,
    body .admin-card.app-card,
    body .invoice-card.app-card,
    body .section-card,
    body .professional-section.app-card,
    body .table-section.app-card,
    body .filter-panel.app-search-card {
        padding: 8px !important;
    }

    body .items-section-header {
        display: block !important;
    }

    body .items-collapse-toggle {
        margin-top: 6px !important;
    }

    body .app-actions,
    body .filter-actions,
    body .new-order-actions,
    body .btn-action-col {
        justify-content: flex-start !important;
        padding-top: 6px !important;
    }
}

/* =========================================================
   FINAL UI UNIFORMITY PATCH - 09-Jun-2026
   Fixes reported inconsistency between NewOrder, Category,
   SearchOrders and My Shop Details. This patch is screen-only
   and keeps print layouts untouched.
   ========================================================= */
@media screen {
    body {
        background: #eef2f7 !important;
        overflow-x: hidden !important;
    }

    body .uniform-page,
    body .new-order-page,
    body .page-wrapper.app-page,
    body .page-shell.app-page {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px 26px 22px !important;
        background: #eef2f7 !important;
        min-height: calc(100vh - 58px) !important;
    }

    body .uniform-shell,
    body .new-order-shell,
    body .content-card.app-card,
    body .search-card.app-card,
    body .admin-card.app-card {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body .uniform-page.boxshadow,
    body .new-order-page.boxshadow {
        border: 2px solid #2563eb !important;
        border-radius: 18px !important;
        background: #f8fafc !important;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .08) !important;
    }

    body .uniform-page h2,
    body .new-order-page h2,
    body .page-title,
    body .app-page-title,
    body .content-card > h2,
    body .search-card > h2 {
        margin: 0 0 12px !important;
        padding: 0 !important;
        color: #0f172a !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        font-size: 24px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
    }

    body .uniform-page-title-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    body .uniform-page-title-row h2 {
        margin-bottom: 0 !important;
    }

    body .section-card,
    body .uniform-form-card,
    body .uniform-table-card,
    body .professional-section.app-card,
    body .table-section.app-card,
    body .filter-panel,
    body .app-search-card,
    body .search-card.app-card .filter-panel,
    body .content-card.app-card .professional-section,
    body .content-card.app-card .table-section {
        background: #ffffff !important;
        border: 1px solid #dbe3ef !important;
        border-left: 1px solid #dbe3ef !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .05) !important;
        padding: 14px 16px !important;
        margin: 0 0 12px !important;
        overflow: visible !important;
        background-image: none !important;
    }

    body .section-card-muted,
    body .uniform-form-card,
    body .filter-panel,
    body .app-search-card {
        background: #ffffff !important;
    }

    body .content-card:before,
    body .professional-section:before,
    body .table-section:before {
        display: none !important;
        content: none !important;
    }

    body .form-horizontal .form-group,
    body .app-form .form-group,
    body .form-group,
    body .new-order-page .form-group {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 10px !important;
    }

    body .form-horizontal .row,
    body .app-form .row,
    body form .row,
    body .compact-form-row,
    body .new-order-page .row {
        margin-left: -9px !important;
        margin-right: -9px !important;
    }

    body .form-horizontal .row > [class*="col-"],
    body .app-form .row > [class*="col-"],
    body form .row > [class*="col-"],
    body .compact-form-row > [class*="col-"],
    body .new-order-page .row > [class*="col-"] {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    body label,
    body .form-label,
    body .app-label,
    body .form-group label,
    body .new-order-page label {
        display: block !important;
        width: auto !important;
        margin: 0 0 5px !important;
        padding: 0 !important;
        color: #1f2937 !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        text-align: left !important;
    }

    body .form-control,
    body .app-control,
    body .app-select,
    body input.form-control,
    body select.form-control,
    body .new-order-page .form-control {
        width: 100% !important;
        max-width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 8px 12px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 9px !important;
        background-color: #ffffff !important;
        color: #0f172a !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        box-shadow: none !important;
    }

    body textarea.form-control,
    body .app-textarea,
    body .new-order-page textarea.form-control {
        height: auto !important;
        min-height: 58px !important;
        padding: 8px 12px !important;
        resize: vertical !important;
    }

    body .new-order-page .customer-section textarea.form-control {
        min-height: 40px !important;
        height: 40px !important;
    }

    body .form-control:focus,
    body .app-control:focus,
    body .new-order-page .form-control:focus {
        border-color: #2563eb !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .14) !important;
        outline: none !important;
    }

    body .btn,
    body .app-btn,
    body .new-order-page .btn {
        min-height: 40px !important;
        padding: 8px 18px !important;
        border-radius: 9px !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 1.35 !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

    body .btn-xs,
    body .action-btn,
    body .table .btn,
    body .category-table .btn,
    body .orders-table .btn {
        min-height: 34px !important;
        padding: 6px 12px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    body .btn-primary,
    body .btn-save,
    body .app-btn-primary {
        background: #2563eb !important;
        border-color: #2563eb !important;
        color: #ffffff !important;
    }

    body .btn-primary:hover,
    body .btn-save:hover,
    body .app-btn-primary:hover {
        background: #1d4ed8 !important;
        border-color: #1d4ed8 !important;
        color: #ffffff !important;
    }

    body .btn-default,
    body .btn-cancel,
    body .app-btn-secondary {
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        color: #111827 !important;
    }

    body .btn-default:hover,
    body .btn-cancel:hover,
    body .app-btn-secondary:hover {
        background: #f1f5f9 !important;
        border-color: #94a3b8 !important;
        color: #111827 !important;
    }

    body .btn-danger,
    body .btn-delete,
    body .app-btn-danger {
        background: #dc2626 !important;
        border-color: #dc2626 !important;
        color: #ffffff !important;
    }

    body .btn-info {
        background: #0ea5e9 !important;
        border-color: #0ea5e9 !important;
        color: #ffffff !important;
    }

    body .uniform-action-col,
    body .btn-action-col {
        display: flex !important;
        align-items: flex-end !important;
        gap: 8px !important;
        padding-top: 24px !important;
        white-space: nowrap !important;
    }

    body .uniform-actions,
    body .app-actions,
    body .new-order-actions,
    body .filter-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-top: 10px !important;
        padding-top: 0 !important;
    }

    body .new-order-actions {
        justify-content: flex-end !important;
    }

    body .table-responsive,
    body .table-responsive-custom,
    body .app-table-wrapper,
    body .new-order-items-wrapper,
    body .confirm-order-items-wrapper,
    body .uniform-table-scroll {
        width: 100% !important;
        border: 1px solid #dbe3ef !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body .uniform-table-scroll,
    body .table-responsive-custom {
        max-height: 430px !important;
    }

    body .new-order-items-wrapper {
        max-height: 300px !important;
    }

    body .table,
    body .app-table,
    body .category-table,
    body .orders-table,
    body .order-item-table {
        width: 100% !important;
        margin-bottom: 0 !important;
        background: #ffffff !important;
    }

    body .table > thead > tr > th,
    body .app-table > thead > tr > th,
    body .category-table > thead > tr > th,
    body .orders-table > thead > tr > th,
    body .order-item-table > thead > tr > th {
        background: #1f2937 !important;
        color: #ffffff !important;
        border-color: #374151 !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }

    body .table > tbody > tr > td,
    body .app-table > tbody > tr > td,
    body .category-table > tbody > tr > td,
    body .orders-table > tbody > tr > td,
    body .order-item-table > tbody > tr > td {
        padding: 9px 12px !important;
        border-color: #e2e8f0 !important;
        color: #0f172a !important;
        font-size: 13px !important;
        vertical-align: middle !important;
    }

    body .table > tbody > tr:nth-child(even),
    body .category-table > tbody > tr:nth-child(even),
    body .orders-table > tbody > tr:nth-child(even) {
        background: #f8fafc !important;
    }

    body .items-section-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 10px !important;
    }

    body .items-section-title {
        margin: 0 !important;
        color: #0f172a !important;
        font-size: 20px !important;
        font-weight: 800 !important;
    }

    body .items-section-subtitle,
    body .app-page-subtitle {
        display: block !important;
        color: #64748b !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        margin-top: 3px !important;
    }

    body .items-collapse-toggle,
    body button.items-collapse-toggle,
    body button.items-collapse-toggle.btn,
    body button.items-collapse-toggle.btn-default,
    body .new-order-page .items-collapse-toggle,
    body .new-order-page button.items-collapse-toggle.btn-default {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 120px !important;
        min-height: 40px !important;
        background: #ffffff !important;
        border: 1px solid #94a3b8 !important;
        color: #000000 !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        line-height: 1.2 !important;
        text-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        -webkit-text-fill-color: #000000 !important;
    }

    body .items-collapse-toggle:hover,
    body button.items-collapse-toggle:hover,
    body button.items-collapse-toggle.btn-default:hover,
    body .new-order-page .items-collapse-toggle:hover {
        background: #eff6ff !important;
        border-color: #2563eb !important;
        color: #1d4ed8 !important;
        -webkit-text-fill-color: #1d4ed8 !important;
    }

    body .alert,
    body .app-alert {
        margin: 0 0 12px !important;
        padding: 10px 14px !important;
        border-radius: 9px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    body .field-validation-error,
    body .validation-summary-errors,
    body .text-danger {
        display: block !important;
        margin-top: 4px !important;
        color: #dc2626 !important;
        font-size: 12px !important;
        font-weight: 800 !important;
    }

    body .uniform-dl {
        margin-bottom: 12px !important;
    }

    body .uniform-dl dt {
        color: #1f2937 !important;
        font-weight: 800 !important;
        padding-top: 8px !important;
    }

    body .uniform-dl dd {
        min-height: 36px !important;
        padding: 8px 12px !important;
        margin-bottom: 8px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        color: #0f172a !important;
    }

    body .navbar-inverse {
        border-radius: 0 !important;
        margin-bottom: 0 !important;
    }
}

@media screen and (max-width: 767px) {
    body .uniform-page,
    body .new-order-page,
    body .page-wrapper.app-page,
    body .page-shell.app-page {
        padding: 8px 10px 16px !important;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }

    body .uniform-page h2,
    body .new-order-page h2,
    body .page-title,
    body .app-page-title {
        font-size: 21px !important;
    }

    body .section-card,
    body .uniform-form-card,
    body .uniform-table-card,
    body .professional-section.app-card,
    body .table-section.app-card,
    body .filter-panel,
    body .app-search-card {
        padding: 10px !important;
        margin-bottom: 10px !important;
    }

    body .uniform-action-col,
    body .btn-action-col {
        padding-top: 0 !important;
        white-space: normal !important;
    }

    body .items-section-header,
    body .uniform-page-title-row {
        display: block !important;
    }

    body .items-collapse-toggle,
    body .uniform-page-title-row .btn {
        margin-top: 8px !important;
    }

    body .new-order-actions,
    body .uniform-actions,
    body .app-actions,
    body .filter-actions {
        justify-content: flex-start !important;
    }
}

/* Preserve SearchOrder status colors after global uniform table overrides. */
body .table > tbody > tr > td.status-pending,
body .app-table > tbody > tr > td.status-pending,
body .orders-table > tbody > tr > td.status-pending,
body td.status-pending,
body .status-pending,
body .received-no {
    color: #dc2626 !important;
    font-weight: 800 !important;
}

body .table > tbody > tr > td.status-ok,
body .app-table > tbody > tr > td.status-ok,
body .orders-table > tbody > tr > td.status-ok,
body td.status-ok,
body .status-ok,
body .received-yes {
    color: #16a34a !important;
    font-weight: 800 !important;
}


/* =========================================================
   REAL UNIFORM DESIGN PATCH - 09-Jun-2026
   Purpose: Make Category, New Order, Search Orders, My Shop Details,
   Master Admin and CRUD pages share the same visible page shell,
   spacing, forms, tables and buttons. Screen-only; print pages are not
   affected.
   ========================================================= */
@media screen {
    body {
        background: #eef2f7 !important;
        padding-top: 58px !important;
    }

    /* One application page frame for every normal MVC screen */
    body > .app-page,
    body > .new-order-page,
    body > .page-wrapper,
    body > .page-shell {
        width: calc(100% - 0px) !important;
        max-width: none !important;
        margin: 0 !important;
        min-height: calc(100vh - 58px) !important;
        padding: 18px 28px 26px !important;
        background: #f8fafc !important;
        border: 2px solid #2563eb !important;
        border-radius: 18px 18px 0 0 !important;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .08) !important;
        overflow-x: hidden !important;
    }

    /* Remove different inner shells so every page starts from same grid */
    body .new-order-shell,
    body .uniform-shell,
    body .content-card.app-card,
    body .search-card.app-card,
    body .admin-card.app-card,
    body .page-shell .admin-card,
    body .page-wrapper .search-card {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    /* Same title style everywhere */
    body > .app-page h2:first-child,
    body > .new-order-page h2:first-child,
    body > .page-wrapper h2:first-child,
    body > .page-shell h2:first-child,
    body .app-page-title,
    body .page-title,
    body .admin-title {
        margin: 0 0 18px !important;
        padding: 0 !important;
        color: #0f172a !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        font-size: 28px !important;
        font-weight: 900 !important;
        line-height: 1.2 !important;
        letter-spacing: .1px !important;
    }

    /* Same card style for every form/filter/table block */
    body .section-card,
    body .uniform-form-card,
    body .uniform-table-card,
    body .professional-section,
    body .table-section,
    body .filter-panel,
    body .app-search-card,
    body .customer-section,
    body .items-section-card,
    body .payment-section,
    body .app-card,
    body .admin-card {
        background: #ffffff !important;
        border: 1px solid #dbe3ef !important;
        border-left: 1px solid #dbe3ef !important;
        border-radius: 14px !important;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .05) !important;
        padding: 18px 20px !important;
        margin: 0 0 18px !important;
        background-image: none !important;
        overflow: visible !important;
    }

    /* Consistent bootstrap grid spacing inside all forms */
    body form .row,
    body .app-form .row,
    body .form-horizontal .row,
    body .new-order-page .row,
    body .filter-panel .row,
    body .compact-form-row {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }

    body form .row > [class*="col-"],
    body .app-form .row > [class*="col-"],
    body .form-horizontal .row > [class*="col-"],
    body .new-order-page .row > [class*="col-"],
    body .filter-panel .row > [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    body .form-group,
    body .app-form .form-group,
    body .form-horizontal .form-group,
    body .new-order-page .form-group,
    body .filter-panel .form-group {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 16px !important;
    }

    body label,
    body .form-label,
    body .app-label,
    body .form-group label,
    body .filter-panel label,
    body .new-order-page label {
        display: block !important;
        margin: 0 0 7px !important;
        padding: 0 !important;
        color: #1f2937 !important;
        font-size: 15px !important;
        font-weight: 900 !important;
        line-height: 1.25 !important;
        text-align: left !important;
    }

    body input.form-control,
    body select.form-control,
    body textarea.form-control,
    body .form-control,
    body .app-control,
    body .app-select,
    body .new-order-page .form-control,
    body .filter-panel .form-control {
        width: 100% !important;
        max-width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        padding: 10px 14px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        color: #0f172a !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        box-shadow: none !important;
    }

    body textarea.form-control,
    body .app-textarea,
    body .new-order-page textarea.form-control,
    body .new-order-page .customer-section textarea.form-control {
        height: auto !important;
        min-height: 58px !important;
        resize: vertical !important;
    }

    body .form-control:focus,
    body .app-control:focus,
    body .new-order-page .form-control:focus,
    body .filter-panel .form-control:focus {
        border-color: #2563eb !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .14) !important;
        outline: 0 !important;
    }

    /* Buttons: one size and style across Category, Search, Shop Details, New Order */
    body .btn,
    body .app-btn,
    body .new-order-page .btn,
    body .filter-actions .btn {
        min-height: 46px !important;
        height: auto !important;
        padding: 10px 20px !important;
        border-radius: 10px !important;
        font-size: 15px !important;
        font-weight: 900 !important;
        line-height: 1.2 !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

    body .btn-xs,
    body .action-btn,
    body .table .btn,
    body .category-table .btn,
    body .orders-table .btn {
        min-height: 40px !important;
        padding: 9px 16px !important;
        font-size: 14px !important;
        border-radius: 9px !important;
    }

    body .uniform-action-col,
    body .btn-action-col,
    body .filter-actions {
        display: flex !important;
        align-items: flex-end !important;
        gap: 10px !important;
        padding-top: 29px !important;
        margin-top: 0 !important;
        white-space: nowrap !important;
    }

    body .uniform-actions,
    body .app-actions,
    body .new-order-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
        margin-top: 12px !important;
        padding-top: 0 !important;
    }

    body .new-order-actions { justify-content: flex-end !important; }

    /* Tables */
    body .table-responsive,
    body .table-responsive-custom,
    body .app-table-wrapper,
    body .uniform-table-scroll,
    body .new-order-items-wrapper,
    body .confirm-order-items-wrapper {
        width: 100% !important;
        border: 1px solid #dbe3ef !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body .uniform-table-scroll,
    body .table-responsive-custom { max-height: 460px !important; }
    body .new-order-items-wrapper { max-height: 330px !important; }

    body .table,
    body .app-table,
    body .category-table,
    body .orders-table,
    body .order-item-table {
        width: 100% !important;
        margin-bottom: 0 !important;
        background: #ffffff !important;
    }

    body .table > thead > tr > th,
    body .app-table > thead > tr > th,
    body .category-table > thead > tr > th,
    body .orders-table > thead > tr > th,
    body .order-item-table > thead > tr > th {
        background: #1f2937 !important;
        color: #ffffff !important;
        border-color: #374151 !important;
        padding: 12px 14px !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }

    body .table > tbody > tr > td,
    body .app-table > tbody > tr > td,
    body .category-table > tbody > tr > td,
    body .orders-table > tbody > tr > td,
    body .order-item-table > tbody > tr > td {
        padding: 12px 14px !important;
        border-color: #e2e8f0 !important;
        color: #0f172a !important;
        font-size: 14px !important;
        vertical-align: middle !important;
    }

    body .table > tbody > tr:nth-child(even),
    body .category-table > tbody > tr:nth-child(even),
    body .orders-table > tbody > tr:nth-child(even),
    body .order-item-table > tbody > tr:nth-child(even) {
        background: #f8fafc !important;
    }

    /* Keep existing status colors visible after global td styling */
    body td.status-pending,
    body .status-pending,
    body .received-no {
        color: #dc2626 !important;
        font-weight: 900 !important;
    }
    body td.status-ok,
    body .status-ok,
    body .received-yes {
        color: #16a34a !important;
        font-weight: 900 !important;
    }

    /* NewOrder item header and Hide Items button */
    body .items-section-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        margin-bottom: 14px !important;
    }
    body .items-section-title {
        margin: 0 !important;
        color: #0f172a !important;
        font-size: 22px !important;
        font-weight: 900 !important;
    }
    body .items-section-subtitle,
    body .app-page-subtitle {
        display: block !important;
        color: #64748b !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        margin-top: 4px !important;
    }
    body .items-collapse-toggle,
    body button.items-collapse-toggle,
    body button.items-collapse-toggle.btn,
    body button.items-collapse-toggle.btn-default,
    body .new-order-page .items-collapse-toggle {
        min-width: 138px !important;
        min-height: 46px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        border: 1px solid #94a3b8 !important;
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
        font-size: 15px !important;
        font-weight: 900 !important;
        opacity: 1 !important;
        visibility: visible !important;
        text-shadow: none !important;
    }

    /* Navbar uniformity */
    body .navbar-inverse {
        min-height: 58px !important;
        border-radius: 0 !important;
        margin-bottom: 0 !important;
        background: linear-gradient(90deg, #1e40af, #2563eb) !important;
    }
    body .navbar-brand {
        min-height: 58px !important;
        padding-top: 18px !important;
        padding-bottom: 18px !important;
        font-size: 21px !important;
        font-weight: 900 !important;
    }
    body .navbar-nav > li > a.anc {
        min-height: 58px !important;
        padding: 19px 16px !important;
        font-size: 15px !important;
        font-weight: 900 !important;
        color: #ffffff !important;
    }
    body .navbar-nav > li.active > a.anc,
    body .navbar-nav > li > a.anc:hover,
    body .navbar-nav > li > a.anc:focus {
        background: #ffffff !important;
        color: #000000 !important;
    }
}

@media screen and (max-width: 767px) {
    body > .app-page,
    body > .new-order-page,
    body > .page-wrapper,
    body > .page-shell {
        padding: 12px 12px 20px !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 !important;
    }

    body .section-card,
    body .uniform-form-card,
    body .uniform-table-card,
    body .professional-section,
    body .table-section,
    body .filter-panel,
    body .app-search-card,
    body .customer-section,
    body .items-section-card,
    body .payment-section {
        padding: 14px !important;
        margin-bottom: 14px !important;
    }

    body .items-section-header { display: block !important; }
    body .items-collapse-toggle { margin-top: 10px !important; }
    body .uniform-action-col,
    body .btn-action-col,
    body .filter-actions { padding-top: 0 !important; white-space: normal !important; }
}

/* =========================================================
   COMPACT UNIFORM DESIGN OVERRIDE - FINAL CORRECTION
   Purpose: reduce the oversized UI and force one compact design
   across Category, New Order, Search Orders, Shop Details,
   Master Admin and CRUD pages. Screen-only; print layouts stay safe.
   ========================================================= */
@media screen {
    html, body {
        font-size: 13px !important;
        background: #eef2f7 !important;
        color: #0f172a !important;
        overflow-x: hidden !important;
    }

    /* Same outer page frame on all normal pages */
    body > .app-page,
    body > .new-order-page,
    body > .page-wrapper,
    body > .page-shell,
    body .uniform-page {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        min-height: calc(100vh - 56px) !important;
        padding: 12px 24px 20px !important;
        background: #f8fafc !important;
        border: 2px solid #2563eb !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .07) !important;
        overflow-x: hidden !important;
    }

    /* Remove inconsistent inner panels */
    body .new-order-shell,
    body .uniform-shell,
    body .content-card.app-card,
    body .search-card.app-card,
    body .admin-card.app-card,
    body .page-shell .admin-card,
    body .page-wrapper .search-card {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Compact page titles */
    body > .app-page h2:first-child,
    body > .new-order-page h2:first-child,
    body > .page-wrapper h2:first-child,
    body > .page-shell h2:first-child,
    body .uniform-page h2,
    body .new-order-page h2,
    body .page-title,
    body .app-page-title,
    body .admin-title,
    body .content-card > h2,
    body .search-card > h2 {
        margin: 0 0 12px !important;
        padding: 0 !important;
        color: #0f172a !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        font-size: 22px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        letter-spacing: .05px !important;
    }

    /* Same card style for forms, filters, and tables */
    body .section-card,
    body .uniform-form-card,
    body .uniform-table-card,
    body .professional-section,
    body .table-section,
    body .filter-panel,
    body .app-search-card,
    body .customer-section,
    body .items-section-card,
    body .payment-section,
    body .app-card,
    body .admin-card,
    body .content-card,
    body .search-card {
        background: #ffffff !important;
        border: 1px solid #dbe3ef !important;
        border-left: 1px solid #dbe3ef !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .05) !important;
        padding: 12px 14px !important;
        margin: 0 0 12px !important;
        background-image: none !important;
        overflow: visible !important;
    }

    body .content-card:before,
    body .professional-section:before,
    body .table-section:before {
        display: none !important;
        content: none !important;
    }

    /* Same grid spacing */
    body form .row,
    body .app-form .row,
    body .form-horizontal .row,
    body .new-order-page .row,
    body .filter-panel .row,
    body .compact-form-row {
        margin-left: -7px !important;
        margin-right: -7px !important;
    }

    body form .row > [class*="col-"],
    body .app-form .row > [class*="col-"],
    body .form-horizontal .row > [class*="col-"],
    body .new-order-page .row > [class*="col-"],
    body .filter-panel .row > [class*="col-"] {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    body .form-group,
    body .app-form .form-group,
    body .form-horizontal .form-group,
    body .new-order-page .form-group,
    body .filter-panel .form-group {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 9px !important;
    }

    body label,
    body .form-label,
    body .app-label,
    body .form-group label,
    body .filter-panel label,
    body .new-order-page label {
        display: block !important;
        width: auto !important;
        margin: 0 0 4px !important;
        padding: 0 !important;
        color: #1f2937 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: left !important;
    }

    body input.form-control,
    body select.form-control,
    body textarea.form-control,
    body .form-control,
    body .app-control,
    body .app-select,
    body .new-order-page .form-control,
    body .filter-panel .form-control {
        width: 100% !important;
        max-width: 100% !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 6px 10px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        color: #0f172a !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        box-shadow: none !important;
    }

    body textarea.form-control,
    body .app-textarea,
    body .new-order-page textarea.form-control,
    body .new-order-page .customer-section textarea.form-control {
        height: auto !important;
        min-height: 44px !important;
        resize: vertical !important;
    }

    body .form-control:focus,
    body .app-control:focus,
    body .new-order-page .form-control:focus,
    body .filter-panel .form-control:focus {
        border-color: #2563eb !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
        outline: 0 !important;
    }

    /* Compact uniform buttons */
    body .btn,
    body .app-btn,
    body .new-order-page .btn,
    body .filter-actions .btn {
        min-height: 34px !important;
        height: auto !important;
        padding: 6px 14px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        text-decoration: none !important;
        box-shadow: none !important;
        transform: none !important;
    }

    body .btn:hover,
    body .app-btn:hover { transform: none !important; }

    body .btn-xs,
    body .action-btn,
    body .table .btn,
    body .category-table .btn,
    body .orders-table .btn {
        min-height: 28px !important;
        padding: 4px 10px !important;
        font-size: 12px !important;
        border-radius: 7px !important;
    }

    body .btn-primary,
    body .btn-save,
    body .app-btn-primary {
        background: #2563eb !important;
        border-color: #2563eb !important;
        color: #ffffff !important;
    }

    body .btn-primary:hover,
    body .btn-save:hover,
    body .app-btn-primary:hover {
        background: #1d4ed8 !important;
        border-color: #1d4ed8 !important;
        color: #ffffff !important;
    }

    body .btn-default,
    body .btn-cancel,
    body .app-btn-secondary {
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        color: #111827 !important;
    }

    body .btn-danger,
    body .btn-delete,
    body .app-btn-danger {
        background: #dc2626 !important;
        border-color: #dc2626 !important;
        color: #ffffff !important;
    }

    body .btn-info {
        background: #0ea5e9 !important;
        border-color: #0ea5e9 !important;
        color: #ffffff !important;
    }

    body .uniform-action-col,
    body .btn-action-col,
    body .filter-actions {
        display: flex !important;
        align-items: flex-end !important;
        gap: 8px !important;
        padding-top: 21px !important;
        margin-top: 0 !important;
        white-space: nowrap !important;
    }

    body .uniform-actions,
    body .app-actions,
    body .new-order-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        margin-top: 8px !important;
        padding-top: 0 !important;
    }

    body .new-order-actions { justify-content: flex-end !important; }

    /* Compact uniform tables */
    body .table-responsive,
    body .table-responsive-custom,
    body .app-table-wrapper,
    body .uniform-table-scroll,
    body .new-order-items-wrapper,
    body .confirm-order-items-wrapper {
        width: 100% !important;
        border: 1px solid #dbe3ef !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body .uniform-table-scroll,
    body .table-responsive-custom { max-height: 430px !important; }
    body .new-order-items-wrapper { max-height: 300px !important; }

    body .table,
    body .app-table,
    body .category-table,
    body .orders-table,
    body .order-item-table {
        width: 100% !important;
        margin-bottom: 0 !important;
        background: #ffffff !important;
    }

    body .table > thead > tr > th,
    body .app-table > thead > tr > th,
    body .category-table > thead > tr > th,
    body .orders-table > thead > tr > th,
    body .order-item-table > thead > tr > th {
        background: #1f2937 !important;
        color: #ffffff !important;
        border-color: #374151 !important;
        padding: 7px 9px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }

    body .table > tbody > tr > td,
    body .app-table > tbody > tr > td,
    body .category-table > tbody > tr > td,
    body .orders-table > tbody > tr > td,
    body .order-item-table > tbody > tr > td {
        padding: 7px 9px !important;
        border-color: #e2e8f0 !important;
        color: #0f172a !important;
        font-size: 12px !important;
        vertical-align: middle !important;
    }

    body .table > tbody > tr:nth-child(even),
    body .category-table > tbody > tr:nth-child(even),
    body .orders-table > tbody > tr:nth-child(even),
    body .order-item-table > tbody > tr:nth-child(even) {
        background: #f8fafc !important;
    }

    /* Keep SearchOrder status colors */
    body td.status-pending,
    body .status-pending,
    body .received-no {
        color: #dc2626 !important;
        font-weight: 800 !important;
    }
    body td.status-ok,
    body .status-ok,
    body .received-yes {
        color: #16a34a !important;
        font-weight: 800 !important;
    }

    /* NewOrder items header and Hide Items visibility */
    body .items-section-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin-bottom: 8px !important;
    }
    body .items-section-title {
        margin: 0 !important;
        color: #0f172a !important;
        font-size: 18px !important;
        font-weight: 800 !important;
    }
    body .items-section-subtitle,
    body .app-page-subtitle {
        display: block !important;
        color: #64748b !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        margin-top: 2px !important;
    }
    body .items-collapse-toggle,
    body button.items-collapse-toggle,
    body button.items-collapse-toggle.btn,
    body button.items-collapse-toggle.btn-default,
    body .new-order-page .items-collapse-toggle {
        min-width: 104px !important;
        min-height: 34px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        border: 1px solid #94a3b8 !important;
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        opacity: 1 !important;
        visibility: visible !important;
        text-shadow: none !important;
    }

    body .alert,
    body .app-alert {
        margin: 0 0 10px !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    body .field-validation-error,
    body .validation-summary-errors,
    body .text-danger {
        display: block !important;
        margin-top: 3px !important;
        color: #dc2626 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }

    /* Navbar compact */
    body .navbar-inverse {
        min-height: 56px !important;
        border-radius: 0 !important;
        margin-bottom: 0 !important;
        background: linear-gradient(90deg, #1e40af, #2563eb) !important;
    }
    body .navbar-brand {
        min-height: 56px !important;
        padding-top: 17px !important;
        padding-bottom: 17px !important;
        font-size: 18px !important;
        font-weight: 800 !important;
    }
    body .navbar-nav > li > a.anc {
        min-height: 56px !important;
        padding: 18px 14px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
    }
    body .navbar-nav > li.active > a.anc,
    body .navbar-nav > li > a.anc:hover,
    body .navbar-nav > li > a.anc:focus {
        background: #ffffff !important;
        color: #000000 !important;
    }
}

@media screen and (max-width: 767px) {
    body > .app-page,
    body > .new-order-page,
    body > .page-wrapper,
    body > .page-shell,
    body .uniform-page {
        padding: 10px 10px 16px !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 !important;
    }

    body .section-card,
    body .uniform-form-card,
    body .uniform-table-card,
    body .professional-section,
    body .table-section,
    body .filter-panel,
    body .app-search-card,
    body .customer-section,
    body .items-section-card,
    body .payment-section {
        padding: 10px !important;
        margin-bottom: 10px !important;
    }

    body > .app-page h2:first-child,
    body > .new-order-page h2:first-child,
    body > .page-wrapper h2:first-child,
    body > .page-shell h2:first-child,
    body .uniform-page h2,
    body .new-order-page h2,
    body .page-title,
    body .app-page-title {
        font-size: 20px !important;
    }

    body .items-section-header { display: block !important; }
    body .items-collapse-toggle { margin-top: 8px !important; }
    body .uniform-action-col,
    body .btn-action-col,
    body .filter-actions { padding-top: 0 !important; white-space: normal !important; }
    body .new-order-actions,
    body .uniform-actions,
    body .app-actions { justify-content: flex-start !important; }
}
