/* ============================================================
   AGIZA CHAKULA - Shared fixes for phones and tablets, loaded on every page (page_js_config()),
   after the page's own styles. One place instead of repeating the same rule in every page.
   ============================================================ */

/* Long words (emails, links, long food names) wrap instead of pushing the page sideways */
body { overflow-wrap: break-word; }
img, video { max-width: 100%; }

/* Page wrappers (.page-container, .dashboard-container ...) keep Bootstrap's side padding: several pages set
   "padding: 1.5rem 0" on small screens, which made every .row stick out 8-12px and the page scroll sideways */
.container[class*="-container"] { padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5); padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5); }
@media (max-width: 991.98px) {
    .container[class*="-container"] { padding-left: 1rem; padding-right: 1rem; }
}

/* Wide gutters are too wide for a phone */
@media (max-width: 575.98px) {
    .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
    .row.g-5, .row.gy-5 { --bs-gutter-y: 1.5rem; }
}

/* iPhone zooms the whole page when a field with text under 16px is tapped */
@media (max-width: 767.98px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select, textarea, .form-control, .form-select { font-size: 16px !important; }
}

/* Badges and toasts never wider than the screen */
.badge { white-space: normal; max-width: 100%; }
.toast-container { max-width: 100vw; }
.toast { max-width: calc(100vw - 2rem); }

/* Modals: a little space around them on phones, and long content scrolls inside */
@media (max-width: 575.98px) {
    .modal-dialog { margin: 0.75rem; }
    .modal-footer { flex-wrap: wrap; }
    .modal-footer > .btn { flex: 1 1 auto; }
}

/* Very small phones (under 375px): the top bar (menu, logo, bell, profile) must fit on one line */
@media (max-width: 374.98px) {
    .agiza-navbar { padding-left: 0.6rem !important; padding-right: 0.6rem !important; }
    .agiza-navbar .gap-3 { gap: 0.4rem !important; }
    .agiza-navbar .me-2 { margin-right: 0.25rem !important; }
    .agiza-navbar .navbar-brand .fs-5, .agiza-navbar .navbar-brand > span { font-size: 1rem !important; }
    .agiza-navbar .navbar-brand .brand-logo { width: 26px; height: 26px; }
    .agiza-navbar .notif-btn, .agiza-navbar .profile-btn { width: 36px; height: 36px; }
}

/* ---------- Admin page headers on phones ----------
   The action buttons next to the title move under it: one row, equal width, same height, one line of text */
@media (max-width: 767.98px) {
    .admin-content > .d-flex.flex-md-row:first-child { gap: 0.9rem; }
    .admin-content > .d-flex.flex-md-row:first-child > div:last-child:not(:first-child) {
        display: flex; gap: 0.5rem; width: 100%; margin-top: 0 !important;
    }
    .admin-content > .d-flex.flex-md-row:first-child > div:last-child:not(:first-child) > .btn {
        flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
        white-space: nowrap; padding: 0.65rem 0.75rem !important; font-size: 0.88rem; line-height: 1.2; border-radius: 12px !important;
    }
    .admin-content > .d-flex.flex-md-row:first-child > div:last-child:not(:first-child) > .btn > i { margin: 0 !important; flex-shrink: 0; }
    .admin-content > .d-flex.flex-md-row:first-child > div:last-child:not(:first-child) > .btn > span { overflow: hidden; text-overflow: ellipsis; }
    /* a light button on the grey page looked like plain text */
    .admin-content > .d-flex.flex-md-row:first-child .btn-light { background: #fff; border: 1px solid #E5E7EB; }
}
@media (max-width: 374.98px) {
    /* two buttons side by side on a tiny phone: the words matter more than the icons */
    .admin-content > .d-flex.flex-md-row:first-child > div:last-child:not(:first-child) > .btn:not(:only-child) > i { display: none; }
}

/* ---------- Admin tables become stacked cards on phones ----------
   main.js gives every cell of a .table-card table a data-label (its column heading) and adds .table-stack */
@media (max-width: 767.98px) {
    table.table-stack thead { display: none; }
    table.table-stack, table.table-stack tbody, table.table-stack tr, table.table-stack td { display: block; width: 100%; }
    table.table-stack tr { padding: 0.85rem 1rem; border-bottom: 1px solid #f1f1f1; }
    table.table-stack tr:last-child { border-bottom: none; }
    /* label on the left, the cell's content (one or more lines) stacked on the right */
    table.table-stack td { display: grid; grid-template-columns: minmax(84px, 38%) 1fr; column-gap: 1rem; align-items: center; justify-items: end;
                           padding: 0.35rem 0 !important; border: none !important; text-align: right; white-space: normal !important; }
    table.table-stack td::before { content: attr(data-label); grid-column: 1; grid-row: 1 / span 9; justify-self: start; text-align: left;
                                   font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: #6B7280; }
    table.table-stack td > * { grid-column: 2; }
    /* a column without a heading holds the action buttons: one row, at the right */
    table.table-stack td[data-label=""] { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.4rem; padding-top: 0.6rem !important; }
    table.table-stack td[data-label=""]::before { content: none; }
    /* the first cell is the row's title (name, order number): full width, no label */
    table.table-stack td:first-child { display: block; justify-items: stretch; text-align: left !important; padding-bottom: 0.5rem !important; }
    table.table-stack td:first-child::before { content: none; }
    table.table-stack td:first-child > * { grid-column: auto; }
    table.table-stack td .d-flex { justify-content: flex-end; flex-wrap: wrap; }
    table.table-stack td:first-child .d-flex { justify-content: flex-start !important; flex-wrap: nowrap; text-align: left; }
    table.table-stack td:first-child .d-flex > div { min-width: 0; }
    table.table-stack td[data-label=""] .me-1 { margin-right: 0 !important; }
    table.table-stack .action-btn { width: 38px; height: 38px; }
    .table-responsive:has(> table.table-stack) { overflow-x: visible; }
}

/* Settings tabs (customer / deliverer settings) on phones: equal width, icon above the word, all visible */
@media (max-width: 575.98px) {
    .settings-nav { overflow-x: visible !important; gap: 0.25rem !important; }
    .settings-nav-item { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 0.2rem !important;
                         padding: 0.6rem 0.25rem !important; font-size: 0.72rem !important; text-align: center !important; white-space: normal; line-height: 1.2; }
}

/* ---------- Numbers on navigation icons (main.js showCounts) ---------- */
.nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.2rem; height: 1.2rem; padding: 0 0.32rem;
             border-radius: 999px; background: #DC2626; color: #fff; font-size: 0.66rem; font-weight: 700; line-height: 1;
             margin-left: 0.35rem; vertical-align: middle; font-style: normal; }
.bottom-nav .nav-item { position: relative; }
.bottom-nav .nav-item > .nav-count { position: absolute; top: 2px; left: calc(50% + 5px); margin: 0; border: 2px solid #fff; height: 1.3rem; }
.bottom-nav .icon-circle { position: relative; }
.bottom-nav .icon-circle > .nav-count { position: absolute; top: -6px; right: -8px; margin: 0; border: 2px solid #fff; height: 1.3rem; }
.dropdown-item .nav-count, .sidebar-link .nav-count { margin-left: auto; }
.admin-sidebar .sidebar-link, .offcanvas .sidebar-link { position: relative; }
body.sidebar-collapsed .admin-sidebar .sidebar-link .nav-count { position: absolute; top: 6px; right: 14px; margin: 0; }

/* Name and phone that only the admin can change (customer / deliverer settings) */
.form-control.locked-field, .form-control.locked-field:focus { background: #F3F4F6 !important; color: #4B5563; border-color: #E5E7EB !important;
                                                               box-shadow: none !important; cursor: not-allowed; }
.locked-note { background: #FFF7EF; border-radius: 10px; padding: 0.6rem 0.85rem; font-size: 0.82rem; color: #92400E; }
.locked-note a { color: #FF7A00; font-weight: 600; }

/* ---------- "Add to your phone" banner (main.js, installable app) ---------- */
.install-banner { position: fixed; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 1060; display: flex; align-items: center; gap: 0.65rem;
                  background: #1A1A1A; color: #fff; border-radius: 16px; padding: 0.7rem 0.6rem 0.7rem 0.75rem; box-shadow: 0 12px 30px rgba(0,0,0,0.25); }
body.has-bottom-nav .install-banner { bottom: calc(var(--bottom-nav-height, 68px) + 0.6rem); }
.install-banner img { width: 40px; height: 40px; border-radius: 22%; flex-shrink: 0; }
.install-banner .install-text { flex: 1; min-width: 0; line-height: 1.25; }
.install-banner .install-text strong { display: block; font-size: 0.85rem; }
.install-banner .install-text span { display: block; font-size: 0.72rem; opacity: 0.75; }
.install-banner .install-go { border: none; background: #FF7A00; color: #fff; font-weight: 700; font-size: 0.85rem; border-radius: 999px; padding: 0.5rem 1rem; flex-shrink: 0; }
.install-banner .install-close { border: none; background: transparent; color: rgba(255,255,255,0.7); width: 32px; height: 32px; flex-shrink: 0; }
@media (min-width: 992px) { .install-banner { display: none; } }

/* ---------- Eye button in password fields (main.js passwordEyes) ---------- */
.pw-field { position: relative; }
.pw-field > input { padding-right: 3rem !important; }
.pw-eye { position: absolute; top: 50%; right: 0.4rem; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; border: none;
          background: transparent; color: #6B7280; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
          font-size: 1.15rem; line-height: 1; cursor: pointer; transition: color 0.2s, background 0.2s; }
.pw-eye:hover, .pw-eye:focus-visible { color: #FF7A00; background: #FFF7EF; outline: none; }
.pw-eye[aria-pressed="true"] { color: #FF7A00; }
/* Edge / IE show their own eye: keep only ours */
input::-ms-reveal, input::-ms-clear { display: none; }

/* Safety net for text we do not control (names, addresses typed by users) */
html { overflow-x: clip; }