/*
 * 3E İşletme — Professional UI
 * Flat, operational and consistent admin interface.
 */

:root {
    --ui-border: #d8dee7;
    --ui-border-strong: #c7d0dc;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f7f8fa;
    --ui-page: #f1f3f6;
    --ui-text: #172033;
    --ui-muted: #667085;
    --ui-primary: #1d4ed8;
    --ui-primary-dark: #173b82;
    --ui-danger: #b42318;
    --ui-success: #16794d;
    --ui-radius: 6px;
}

html,
body {
    background: var(--ui-page) !important;
    color: var(--ui-text) !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
}

.main-content {
    max-width: 1760px !important;
    padding: 20px 22px 30px !important;
}

/* ---------------------------------------------------------
   Top bar and navigation
   --------------------------------------------------------- */

.app-header {
    border-bottom: 1px solid var(--ui-border) !important;
    box-shadow: none !important;
}

.brand-row {
    min-height: 54px !important;
    padding: 5px 18px !important;
    border-bottom: 1px solid var(--ui-border) !important;
}

.brand-touch-link {
    min-height: 42px !important;
    padding: 2px 8px 2px 4px !important;
    border-radius: 4px !important;
    transition: background-color .12s ease, border-color .12s ease !important;
}

.brand-touch-link:hover,
.brand-touch-link:active {
    border-color: var(--ui-border) !important;
    background: var(--ui-surface-soft) !important;
    box-shadow: none !important;
    transform: none !important;
}

.icon-touch-nav {
    min-height: 104px !important;
    gap: 7px !important;
    padding: 8px 14px !important;
    background: #152035 !important;
}

.nav-icon-card {
    width: 138px !important;
    min-width: 138px !important;
    min-height: 86px !important;
    flex-basis: 138px !important;
    gap: 5px !important;
    padding: 8px !important;
    border: 1px solid #d3dae4 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    transition: border-color .12s ease, background-color .12s ease !important;
}

.nav-icon-card:hover {
    border-color: #8ca3c2 !important;
    background: #f8fafc !important;
    box-shadow: none !important;
    transform: none !important;
}

.nav-icon-card:active {
    transform: none !important;
}

.nav-icon-card.active {
    border-color: #2563eb !important;
    background: #f3f7fd !important;
    box-shadow: inset 0 -3px 0 #2563eb !important;
}

.nav-icon-card.active::after {
    display: none !important;
}

.nav-icon-card.disabled,
.nav-icon-card.disabled:hover {
    border-color: #d8dee7 !important;
    background: #edf0f4 !important;
    box-shadow: none !important;
    transform: none !important;
}

.nav-icon-picture,
.nav-icon-picture img {
    width: 43px !important;
    height: 43px !important;
    flex-basis: 43px !important;
}

.nav-icon-title {
    font-size: 11px !important;
    line-height: 1.15 !important;
    font-weight: 760 !important;
}

.nav-icon-card small {
    top: 5px !important;
    right: 5px !important;
    min-height: 17px !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    font-size: 7px !important;
}

.logout-inline,
.nav-toggle {
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   Main page headings
   --------------------------------------------------------- */

.page-head,
.reports-header,
.orders-header,
.self-service-header,
.categories-header,
.qr-admin-toolbar,
.reservations-header,
.products-head,
.product-form-head,
.marketplace-head,
.kitchen-header,
.management-head,
.planner-topbar {
    min-height: 0 !important;
    margin: 0 0 18px !important;
    padding: 0 0 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ui-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.page-head h1,
.reports-header h1,
.orders-header h1,
.self-service-header h1,
.categories-header h1,
.qr-admin-toolbar h1,
.reservations-header h1,
.products-head h1,
.product-form-head h1,
.marketplace-head h1,
.kitchen-header h1,
.management-head h1,
.planner-topbar h1 {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 780 !important;
    letter-spacing: -.015em !important;
}

/* Safety net for any main-title subtitle left in a future page. */
.page-head > div > p,
.reports-header > div > p,
.orders-header > div > p,
.self-service-heading > p,
.categories-title > p,
.qr-admin-title > p,
.reservations-header > div > p,
.products-head > div > p,
.marketplace-head > div > p,
.marketplace-provider-hero > div > p,
.kitchen-header > div > p,
.management-head > p,
.planner-title > p {
    display: none !important;
}

/* ---------------------------------------------------------
   Shared surfaces
   --------------------------------------------------------- */

.card,
.panel,
.catalog-card,
.module-admin-card,
.license-module-card,
.category-card,
.category-add-card,
.product-card,
.reservation-stat,
.reservation-card,
.open-order-card,
.self-service-catalog,
.self-service-cart,
.kitchen-summary-card,
.kitchen-column,
.kitchen-order-card,
.report-summary-card,
.report-panel,
.report-breakdown-card,
.management-panel,
.marketplace-provider,
.marketplace-store-card,
.marketplace-order-card,
.marketplace-form-section,
.tv-screen-card,
.tv-slide-card,
.qr-order-setting,
.qr-info-line,
.qr-floor-section,
.qr-table-card {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: none !important;
}

.card,
.panel,
.catalog-card,
.module-admin-card,
.license-module-card,
.category-card,
.category-add-card,
.product-card,
.reservation-stat,
.reservation-card,
.open-order-card,
.self-service-catalog,
.self-service-cart,
.report-summary-card,
.report-panel,
.report-breakdown-card,
.management-panel,
.marketplace-provider,
.marketplace-store-card,
.marketplace-order-card,
.marketplace-form-section,
.tv-screen-card,
.tv-slide-card,
.qr-order-setting,
.qr-info-line,
.qr-floor-section,
.qr-table-card {
    background-color: var(--ui-surface) !important;
}

.catalog-card:hover,
.module-admin-card:hover,
.license-module-card:hover,
.category-card:hover,
.category-add-card:hover,
.product-card:hover,
.reservation-card:hover,
.open-order-card:hover,
.marketplace-provider:hover,
.marketplace-store-card:hover,
.tv-screen-card:hover,
.qr-table-card:hover {
    border-color: var(--ui-border-strong) !important;
    box-shadow: none !important;
    transform: none !important;
}

.panel-head,
.management-panel-head,
.report-panel-header,
.kitchen-column-header,
.tv-slide-head {
    background: #f8f9fb !important;
    border-bottom: 1px solid var(--ui-border) !important;
    border-radius: 0 !important;
}

.panel-head h2,
.management-panel-head h2,
.report-panel-header h2,
.kitchen-column-header h2 {
    color: #172033 !important;
    font-weight: 760 !important;
}

/* Remove decorative gradients from administrative cards. */
.category-image-wrap,
.product-image,
.category-add-card,
.tv-screen-preview,
.product-placeholder,
.category-no-image {
    background-image: none !important;
}

.category-image-wrap,
.product-image {
    background-color: #eef1f5 !important;
}

.category-add-card {
    background-color: #f8f9fb !important;
}

.tv-screen-preview {
    background: var(--tv-card-bg, #07111f) !important;
}

.tv-screen-preview::after {
    inset: 12px !important;
    border-color: rgba(255,255,255,.16) !important;
}

/* ---------------------------------------------------------
   Buttons, tabs and fields
   --------------------------------------------------------- */

.btn,
.btn-big,
.products-new-btn,
.products-filter button,
.orders-quick-link,
.orders-table-link,
.self-fullscreen-button,
.qr-toolbar-button,
.qr-order-toggle,
.qr-table-action,
.reservation-table-link,
.reservation-actions button,
.reservation-actions a,
.kitchen-sound-button,
.kitchen-fullscreen-button,
.kitchen-action-button,
.kitchen-order-link,
.report-button,
.management-submit,
.table-action,
.marketplace-btn,
.tv-icon-button,
.three-confirm-btn {
    border-radius: 5px !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease !important;
}

.btn:hover,
.btn-big:hover,
.products-new-btn:hover,
.orders-quick-link:hover,
.orders-table-link:hover,
.self-fullscreen-button:hover,
.qr-toolbar-button:hover,
.qr-table-action:hover,
.reservation-table-link:hover,
.kitchen-sound-button:hover,
.kitchen-fullscreen-button:hover,
.report-button:hover,
.marketplace-btn:hover,
.tv-icon-button:hover {
    box-shadow: none !important;
    transform: none !important;
}

.input,
.select,
.textarea,
.products-filter input,
.products-filter select,
.reservation-search input,
.reservation-edit-field input,
.reservation-edit-field textarea,
.report-filter input,
.management-field input,
.management-field select,
.management-field textarea,
.marketplace-form input,
.marketplace-form select,
.marketplace-mapping-row select,
.self-note,
.tv-color-field input,
.tv-public-url {
    border-radius: 5px !important;
    border-color: var(--ui-border-strong) !important;
    box-shadow: none !important;
}

.input:focus,
.select:focus,
.textarea:focus,
.products-filter input:focus,
.products-filter select:focus,
.reservation-search input:focus,
.report-filter input:focus,
.management-field input:focus,
.management-field select:focus,
.management-field textarea:focus,
.marketplace-form input:focus,
.marketplace-form select:focus {
    border-color: #4f6f9b !important;
    box-shadow: 0 0 0 2px rgba(37,99,235,.10) !important;
}

.filter-link,
.management-tab,
.reservation-filter,
.products-pagination a,
.products-pagination span,
.management-pagination a,
.management-pagination span,
.tv-code-box,
.tv-slide-options .check,
.marketplace-status,
.marketplace-store-flags span {
    border-radius: 4px !important;
}

/* ---------------------------------------------------------
   Module-specific cleanup
   --------------------------------------------------------- */

.category-card,
.category-add-card,
.product-card {
    overflow: hidden !important;
}

.category-name,
.product-name,
.reservation-person h2,
.open-order-card h2,
.marketplace-store-name strong {
    font-weight: 760 !important;
    letter-spacing: -.01em !important;
}

.category-badge,
.product-status,
.reservation-status,
.open-order-badge,
.kitchen-source-badge,
.status-badge,
.badge {
    border-radius: 4px !important;
}

.reservation-card,
.open-order-card,
.kitchen-order-card {
    transition: border-color .12s ease !important;
}

.self-category-button,
.self-product-button,
.self-payment-box,
.self-cart-item {
    border-radius: 6px !important;
    box-shadow: none !important;
}

.self-product-button:hover,
.self-product-button:active {
    transform: none !important;
    box-shadow: none !important;
}

.kitchen-column,
.kitchen-order-card {
    box-shadow: none !important;
}

.report-summary-card,
.report-breakdown-card,
.reservation-stat,
.order-stat,
.kitchen-summary-card {
    background-image: none !important;
}

.marketplace-provider-mark.logo {
    border-radius: 4px !important;
    box-shadow: none !important;
}

.marketplace-provider,
.marketplace-store-card,
.marketplace-order-card,
.marketplace-form-section {
    border-color: var(--ui-border) !important;
}

.marketplace-provider a,
.marketplace-webhook-box,
.marketplace-order-items > span {
    border-radius: 4px !important;
}

.marketplace-provider-hero {
    margin-top: 8px !important;
}

.marketplace-provider-hero h1 {
    margin: 0 !important;
}

.tv-screen-preview,
.tv-media-preview,
.tv-slides-empty,
.tv-code-box {
    border-radius: 5px !important;
    box-shadow: none !important;
}

.tv-online-dot.online {
    box-shadow: none !important;
}

.tv-sticky-save {
    background: #ffffff !important;
    backdrop-filter: none !important;
}

/* ---------------------------------------------------------
   Confirmation and operation dialogs
   --------------------------------------------------------- */

.three-confirm-overlay {
    background: rgba(15,23,42,.50) !important;
    backdrop-filter: none !important;
}

.three-confirm-modal,
.order-delete-confirm-box,
.reservation-dialog-box,
.reservation-confirm-box {
    border-radius: 7px !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: 0 18px 48px rgba(15,23,42,.22) !important;
}

.three-confirm-icon,
.order-delete-confirm-icon,
.reservation-confirm-icon {
    border-radius: 5px !important;
}

.three-confirm-title {
    font-size: 21px !important;
    font-weight: 780 !important;
    letter-spacing: -.015em !important;
}

/* ---------------------------------------------------------
   Login
   --------------------------------------------------------- */

.login-page {
    background: #eceff3 !important;
}

.login-card {
    border-radius: 7px !important;
    border-color: var(--ui-border) !important;
    box-shadow: 0 14px 36px rgba(15,23,42,.13) !important;
}

.login-card h1 {
    margin-bottom: 20px !important;
    font-weight: 780 !important;
}

.login-card > p {
    display: none !important;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (min-width: 1500px) {
    .icon-touch-nav {
        min-height: 112px !important;
    }

    .nav-icon-card {
        width: 146px !important;
        min-width: 146px !important;
        min-height: 92px !important;
        flex-basis: 146px !important;
    }

    .nav-icon-picture,
    .nav-icon-picture img {
        width: 48px !important;
        height: 48px !important;
    }
}

@media (max-width: 1100px) {
    .nav-icon-card {
        width: 130px !important;
        min-width: 130px !important;
        flex-basis: 130px !important;
    }
}

@media (max-width: 900px) {
    .main-content {
        padding: 14px !important;
    }

    .icon-touch-nav.open {
        gap: 8px !important;
        padding: 10px !important;
    }

    .nav-icon-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 78px !important;
        flex-basis: auto !important;
    }

    .page-head,
    .reports-header,
    .orders-header,
    .self-service-header,
    .categories-header,
    .qr-admin-toolbar,
    .reservations-header,
    .products-head,
    .product-form-head,
    .marketplace-head,
    .kitchen-header,
    .management-head,
    .planner-topbar {
        margin-bottom: 14px !important;
        padding-bottom: 10px !important;
    }
}