/* Загальні стилі, оптимізація для iOS/Android */
html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: #f8f9fa;
    overflow-x: hidden;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Стилі для кнопок дій */
.action-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    border-radius: 4px;
    color: #fff;
    transition: all 0.3s;
}
@media (max-width: 768px) {
    .action-btn { min-width: 40px; min-height: 40px; }
}

.action-btn-view {
    background-color: #17a2b8;
}

.action-btn-edit {
    background-color: #ffc107;
    color: #212529;
}

.action-btn-delete {
    background-color: #dc3545;
}

.action-btn:hover {
    opacity: 0.8;
    color: #fff;
    text-decoration: none;
}

.action-btn-edit:hover {
    color: #212529;
}

/* Стилі для статусів */
.badge {
    padding: 6px 10px;
    font-size: 0.85em;
    font-weight: 500;
}

/* Стилі для пагінації */
.pagination .page-link {
    color: #007bff;
}

.pagination .page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
}

/* Стилі для таблиць */
.table-hover tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

/* Стилі для форм */
.form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Стилі для навігації */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8);
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #fff;
}

.navbar-dark .navbar-nav .active > .nav-link {
    color: #fff;
    font-weight: 500;
}

/* Основна навігація: чіткі групи та тонкі розділювачі між опціями. */
.app-navbar { box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.app-nav-links .nav-item-divider { border-right: 1px solid rgba(255,255,255,.22); }
.app-nav-links .nav-link { padding-left: .78rem; padding-right: .78rem; white-space: nowrap; }
.app-nav-links .nav-link.active { background: rgba(255,255,255,.12); border-radius: .35rem; }
@media (max-width: 1399px) {
    .app-nav-links .nav-item-divider { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
    .app-nav-links .nav-link { padding-top: .65rem; padding-bottom: .65rem; }
}

.section-tabs { border-bottom: 1px solid #d9dee3; gap: .25rem; }
.section-tabs .nav-link { color: #495057; border: 1px solid transparent; border-bottom: 0; }
.section-tabs .nav-link.active { color: #212529; background: #fff; border-color: #d9dee3; font-weight: 600; }

/* Стилі для карток */
.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: none;
    border-radius: 0.5rem;
}

.card-header {
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
}

/* Стилі для футера */
.footer {
    border-top: 1px solid #e9ecef;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* Мобільна оптимізація: контейнер, navbar */
@media (max-width: 768px) {
    .container { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
    main.container { padding-top: 0.75rem; margin-bottom: env(safe-area-inset-bottom, 0); }
    .navbar .container { padding-left: max(0.5rem, env(safe-area-inset-left)); padding-right: max(0.5rem, env(safe-area-inset-right)); }
    .navbar-toggler { min-width: 44px; min-height: 44px; padding: 0.5rem; }
}

/* Таблиця товарів — Товар 50%, інші по 12–13% (сума 100%) */
.table-products-order { table-layout: fixed; width: 100%; }
@media (min-width: 769px) {
    .table-products-order th:not(:first-child), .table-products-order td:not(:first-child) { border-left: 1px solid #dee2e6; padding-left: 0.5rem; }
}
.table-products-order .col-product { width: 50%; min-width: 0; word-wrap: break-word; overflow-wrap: break-word; }
.table-products-order .col-narrow { width: 12%; min-width: 0; white-space: nowrap; text-align: right; }
/* Кнопка ФОТО — жовтий фон, чорний текст (button, не посилання — без помилки javascript:void(0)) */
.btn-photo, button.btn-photo, a.btn-photo, .photo-trigger.btn-photo {
    display: inline-block !important; padding: 0.25em 0.6em !important;
    background-color: #f4d03f !important; background: #f4d03f !important;
    color: #1a1a1d !important;
    font-weight: 700 !important; border-radius: 4px;
    text-decoration: none !important; cursor: pointer;
    border: 1px solid #c9a227;
}
.btn-photo:link, .btn-photo:visited, a.btn-photo:link, a.btn-photo:visited {
    background-color: #f4d03f !important; background: #f4d03f !important;
    color: #1a1a1d !important;
}
.btn-photo:hover, button.btn-photo:hover, a.btn-photo:hover {
    background-color: #d4af37 !important; background: #d4af37 !important;
    color: #1a1a1d !important;
}

/* Оверлей для фото товару — оптимізовано для ПК, телефону, планшета */
.photo-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
.photo-overlay-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    cursor: pointer;
}
.photo-overlay-content {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo-overlay-content img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.5);
}
.photo-overlay-close {
    position: absolute;
    top: -2.75rem;
    right: 0;
    min-width: 44px;
    min-height: 44px;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Оверлей для мініатюр типів відкривання */
.opening-type-overlay { display: none; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)) !important; }
.opening-type-overlay[style*="display:flex"] { display: flex !important; }
.opening-type-overlay .opening-type-overlay-close { min-height: 44px; min-width: 44px; padding: 0.5rem 1rem !important; }

/* Мобільна верстка — менеджер замовлень (view, view_group): рядок 1 — №, рядок 2 — назва, рядок 3 — К-сть, Ціна, Сума (ліворуч) */
@media (max-width: 768px) {
    .d-flex.justify-content-between.mb-4 { gap: 0.75rem; margin-bottom: 1rem !important; }
    .d-flex.justify-content-between.mb-4 h1 { font-size: 1.35rem; line-height: 1.3; }
    .btn-group.w-100.w-md-auto { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .btn-group.w-100.w-md-auto .btn { flex: 1 1 auto; min-width: min(100%, 10rem); min-height: 44px; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
    .card { margin-bottom: 1rem !important; }
    .card-header.d-flex { flex-wrap: wrap !important; gap: 0.5rem !important; }
    .card-header .card-title { flex: 1 1 100%; margin-bottom: 0 !important; font-size: 1rem; }
    .card-header .d-flex.gap-1, .card-header .d-flex.gap-2 { flex-wrap: wrap !important; }
    .table-borderless tr { display: block; border-bottom: 1px solid #dee2e6; padding: 0.4rem 0; }
    .table-borderless tr:last-child { border-bottom: none; }
    .table-borderless th { display: block; width: 100% !important; font-size: 0.8rem; padding: 0 0 0.2rem 0 !important; }
    .table-borderless td { display: block; width: 100% !important; padding: 0 !important; font-size: 0.9rem; word-break: break-word; overflow-wrap: break-word; }
    .table-responsive { overflow-x: visible; }
    .table-products-order { display: block; min-width: 0 !important; }
    .table-products-order thead { display: none; }
    .table-products-order tbody tr { display: block; border-bottom: 1px solid #dee2e6; padding: 0.5rem 0; }
    .table-products-order tbody td { border: none !important; }
    .table-products-order tbody td:nth-of-type(1) { display: block; padding: 0.15rem 0 !important; font-size: 0.75rem; font-weight: 600; color: #495057; text-align: left; }
    .table-products-order tbody td:nth-of-type(1)::before { content: none; }
    .table-products-order tbody td:nth-of-type(2) { display: block; padding: 0.15rem 0 !important; font-size: 0.9rem; word-break: break-word; overflow-wrap: break-word; }
    .table-products-order tbody td:nth-of-type(2)::before { content: none; }
    .table-products-order tbody td:nth-of-type(3), .table-products-order tbody td:nth-of-type(4), .table-products-order tbody td:nth-of-type(5) { display: inline-block; padding: 0.15rem 1rem 0.15rem 0 !important; font-size: 0.8rem; white-space: nowrap; }
    .table-products-order tbody td:nth-of-type(3)::before { content: "К-сть: "; font-weight: 600; color: #495057; }
    .table-products-order tbody td:nth-of-type(4)::before { content: "Ціна: "; font-weight: 600; color: #495057; }
    .table-products-order tbody td:nth-of-type(5)::before { content: "Сума: "; font-weight: 600; color: #495057; }
    .table-products-order tfoot { display: block; border-top: 2px solid #dee2e6; margin-top: 0.5rem; padding-top: 0.5rem; }
    .table-products-order tfoot tr { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.5rem; }
    .table-products-order tfoot th { display: block !important; border: none !important; padding: 0.25rem 0 !important; }
    .table-products-order tfoot th:first-child { flex: 1 1 auto; text-align: right !important; }
    .table-products-order tfoot th:last-child { font-size: 1rem; font-weight: 600; }
    .btn-photo, .photo-trigger.btn-photo { min-height: 36px; min-width: 44px; padding: 0.35em 0.6em !important; font-size: 0.75rem !important; line-height: 1.2 !important; }
    .d-flex.align-items-start.gap-2 { flex-direction: column !important; align-items: flex-start !important; gap: 0.5rem !important; }
}