/*
 * علِّمنا — Unified UI Standards
 * V1.76.11
 *
 * قاعدة مركزية إلزامية للواجهة العامة + لوحة الإدارة + لوحة البزنس.
 *
 * 1) أي زر أخضر / Primary: النص والأيقونة أبيض دائمًا.
 * 2) كل input نصي و select: ارتفاع موحد من --input-height.
 * 3) الجوال: --input-height-mobile.
 * 4) لا تُكسر القاعدة من CSS الصفحة. الاستثناء الحقيقي يحتاج
 *    class صريح: .ui-control-auto-height
 */

/* =========================================================
   Unified form-control height
   ========================================================= */

:root {
    /* Re-declared here because this stylesheet is loaded last on every surface. */
    --input-height: 46px;
    --input-height-mobile: 48px;
    --ui-control-height: var(--input-height);
    --ui-control-height-mobile: var(--input-height-mobile);
}

:where(.public-body, .admin-layout, .business-dashboard-page)
:where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]),
    select
):not(.ui-control-auto-height) {
    box-sizing: border-box;
    height: var(--ui-control-height) !important;
    min-height: var(--ui-control-height) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Textareas are multi-line by design: unify readable minimum, not one-line height. */
:where(.public-body, .admin-layout, .business-dashboard-page)
textarea:not(.ui-control-auto-height) {
    box-sizing: border-box;
    min-height: 104px;
}

/* =========================================================
   Green / primary buttons: white text + white icon
   ========================================================= */

/*
 * Primary naming contract:
 * - Future primary green buttons should use .ui-green-button,
 *   .primary-action-btn, or a class containing "primary".
 * - Existing green action classes are covered below.
 */
:where(button, a, input[type="submit"], input[type="button"], input[type="reset"]).ui-green-button,
:where(button, a, input[type="submit"], input[type="button"], input[type="reset"])[class*="primary"],
.primary-action-btn,
.auth-submit,
.users-filter-btn,
.verification-filter-btn,
.verification-file-btn,
.community-header-btn:not(.community-header-btn-secondary),
.community-filter-btn,
.categories-edit-save-btn,
.categories-view-edit-btn,
.categories-services-add-btn,
.categories-services-alias-add-btn,
.gam-btn:not(.gam-btn-secondary),
.gam-save-btn,
.search-queries-filter-btn,
.service-dictionary-filter-btn,
.products-save-btn,
.rev-btn:not(.rev-btn-secondary),
.order-update-cart button,
.order-submit-button,
.business-orders-search button,
.business-order-payment-confirm button,
.subscription-plan-action button,
.subscription-plan-action a,
.subscription-coupon-form button,
.subscription-checkout-submit,
.profile-edit-submit,
.profile-interest-suggestion-form-row button,
.business-question-form button,
.business-answer-form button,
.business-question-login a,
.business-order-form-footer button,
.business-order-login {
    color: var(--text-on-primary, #ffffff) !important;
}

/* Make SVG/Lucide icons follow the button text instead of stale local rules. */
:where(button, a).ui-green-button :where(svg, i),
:where(button, a)[class*="primary"] :where(svg, i),
.primary-action-btn :where(svg, i),
.auth-submit :where(svg, i),
.users-filter-btn :where(svg, i),
.verification-filter-btn :where(svg, i),
.verification-file-btn :where(svg, i),
.community-header-btn:not(.community-header-btn-secondary) :where(svg, i),
.community-filter-btn :where(svg, i),
.categories-edit-save-btn :where(svg, i),
.categories-view-edit-btn :where(svg, i),
.categories-services-add-btn :where(svg, i),
.categories-services-alias-add-btn :where(svg, i),
.gam-btn:not(.gam-btn-secondary) :where(svg, i),
.gam-save-btn :where(svg, i),
.search-queries-filter-btn :where(svg, i),
.service-dictionary-filter-btn :where(svg, i),
.products-save-btn :where(svg, i),
.rev-btn:not(.rev-btn-secondary) :where(svg, i),
.order-update-cart button :where(svg, i),
.order-submit-button :where(svg, i),
.business-orders-search button :where(svg, i),
.business-order-payment-confirm button :where(svg, i),
.subscription-plan-action :where(button, a) :where(svg, i),
.subscription-coupon-form button :where(svg, i),
.subscription-checkout-submit :where(svg, i),
.profile-edit-submit :where(svg, i),
.profile-interest-suggestion-form-row button :where(svg, i),
.business-question-form button :where(svg, i),
.business-answer-form button :where(svg, i),
.business-question-login a :where(svg, i),
.business-order-form-footer button :where(svg, i),
.business-order-login :where(svg, i) {
    color: currentColor !important;
    stroke: currentColor !important;
}

/* Text wrappers inside primary buttons may have their own local colors. */
:where(button, a).ui-green-button :where(span, strong, small),
:where(button, a)[class*="primary"] :where(span, strong, small),
.primary-action-btn :where(span, strong, small),
.auth-submit :where(span, strong, small),
.users-filter-btn :where(span, strong, small),
.verification-filter-btn :where(span, strong, small),
.verification-file-btn :where(span, strong, small),
.community-header-btn:not(.community-header-btn-secondary) :where(span, strong, small),
.community-filter-btn :where(span, strong, small),
.categories-edit-save-btn :where(span, strong, small),
.categories-view-edit-btn :where(span, strong, small),
.categories-services-add-btn :where(span, strong, small),
.categories-services-alias-add-btn :where(span, strong, small),
.gam-btn:not(.gam-btn-secondary) :where(span, strong, small),
.gam-save-btn :where(span, strong, small),
.search-queries-filter-btn :where(span, strong, small),
.service-dictionary-filter-btn :where(span, strong, small),
.products-save-btn :where(span, strong, small),
.rev-btn:not(.rev-btn-secondary) :where(span, strong, small),
.order-update-cart button :where(span, strong, small),
.order-submit-button :where(span, strong, small),
.subscription-checkout-submit :where(span, strong, small),
.profile-edit-submit :where(span, strong, small),
.business-order-login :where(span, strong, small) {
    color: inherit !important;
}

/* Buttons that become green only on hover: whiten only while they are green. */
.business-branch-hours-copy-btn:hover,
.business-hours-copy-all-btn:hover {
    color: var(--text-on-primary, #ffffff) !important;
}

.business-branch-hours-copy-btn:hover :where(svg, i),
.business-hours-copy-all-btn:hover :where(svg, i) {
    color: currentColor !important;
    stroke: currentColor !important;
}

@media (max-width: 760px) {
    :where(.public-body, .admin-layout, .business-dashboard-page)
    :where(
        input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]),
        select
    ):not(.ui-control-auto-height) {
        height: var(--ui-control-height-mobile) !important;
        min-height: var(--ui-control-height-mobile) !important;
    }

    :where(.public-body, .admin-layout, .business-dashboard-page)
    textarea:not(.ui-control-auto-height) {
        min-height: 116px;
    }
}

/* =========================================================
   Architectural Decision #9 — Data-table section spacing
   Future table sections should use .ui-table-section.
   ========================================================= */
:root {
    --ui-table-section-gap: 24px;
}

:where(.public-body,.admin-layout,.business-dashboard-page) .ui-table-section + .ui-table-section {
    margin-top: var(--ui-table-section-gap);
}

:where(.public-body,.admin-layout,.business-dashboard-page) :where(.ui-notice,.access-note,.access-alert,.form-alert) + .ui-table-section {
    margin-top: var(--ui-table-section-gap);
}