/* ══════════════════════════════════════════════════════════════════════════
   responsive.css — Mobile & tablet overrides for ChirurgiePro CRM
   Loaded after application.css in all layouts (admin, surgeon, portal).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet breakpoint (< 992px) ──────────────────────────────────────── */
@media (max-width: 991.98px) {

    /* Side-by-side cards in dashboard: already handled by col-lg-6 stacking,
     but ensure card headers don't overflow */
    .card-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .card-header .btn,
    .card-header .btn-outline-primary,
    .card-header .btn-outline-warning,
    .card-header .btn-outline-danger {
        flex-shrink: 0;
    }
}

/* ── Phone breakpoint (< 768px) ───────────────────────────────────────── */
@media (max-width: 767.98px) {

    /* ── Page headers ─────────────────────────────────────────────────── */
    .page-header .row,
    .page-header-flex {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Title + button headers (d-flex justify-content-between) */
    .page-header-flex .btn,
    .d-flex.justify-content-between>.btn {
        width: 100%;
    }

    /* ── Admin topbar ─────────────────────────────────────────────────── */
    /* The existing magnifier opens the desktop global-search dialog. */
    .mobile-search-toggle {
        display: inline-flex !important;
        min-height: 44px;
        min-width: 44px;
    }

    dialog.global-search {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
        top: 1rem;
    }

    .global-search__inner {
        max-height: calc(100dvh - 2rem);
    }

    .global-search__input {
        min-width: 0;
    }

    .global-search__close,
    .staff-assistant__close {
        min-height: 44px;
        min-width: 44px;
        flex-shrink: 0;
    }

    .global-search__esc-hint,
    .global-search__footer {
        display: none;
    }

    .global-search__results {
        min-height: 0;
    }

    .global-search__item {
        display: grid;
        grid-template-columns: 1.75rem minmax(0, 1fr);
        gap: .5rem .75rem;
    }

    .global-search__item-title {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .global-search__item-sub {
        flex-wrap: wrap;
        overflow-wrap: anywhere;
    }

    .global-search__item-aside {
        grid-column: 2;
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        white-space: normal;
    }

    .staff-assistant__close {
        width: auto;
        gap: .35rem;
        padding: .5rem .75rem;
        border-color: var(--tblr-border-color);
    }

    /* ── Navigation tabs (horizontal scroll) ──────────────────────────── */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    .nav-tabs .nav-item {
        flex-shrink: 0;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        font-size: 0.8125rem;
    }

    /* ── Definition lists (dt/dd stacking) ────────────────────────────── */
    dl.row>dt,
    dl.row>dd {
        flex: 0 0 100%;
        max-width: 100%;
    }

    dl.row>dt {
        margin-bottom: 0.1rem;
        font-size: 0.8125rem;
        color: var(--tblr-secondary);
    }

    dl.row>dd {
        margin-bottom: 0.75rem;
    }

    /* ── Data tables ──────────────────────────────────────────────────── */
    .table {
        font-size: 0.8125rem;
    }

    .table td,
    .table th {
        padding: 0.4rem 0.5rem;
    }

    .card-table thead th {
        font-size: 0.65rem;
    }

    /* ── Action button groups ─────────────────────────────────────────── */
    td .d-flex.gap-2 {
        flex-direction: column;
        gap: 0.25rem !important;
    }

    td .d-flex.gap-2 .btn {
        width: 100%;
        font-size: 0.75rem;
        padding: 0.2rem 0.5rem;
    }

    /* ── Stepper (compact on mobile) ──────────────────────────────────── */
    .stepper-circle {
        width: 22px;
        height: 22px;
        font-size: 0.625rem;
    }

    .stepper-label {
        font-size: 0.55rem;
        max-width: 52px;
    }

    .stepper-connector {
        min-width: 6px;
    }

    /* ── Cards ─────────────────────────────────────────────────────────── */
    .card-body {
        padding: 0.75rem;
    }

    .card-header {
        padding: 0.625rem 0.75rem;
    }

    .card-header .card-title {
        font-size: 0.875rem;
    }

    /* ── Dashboard KPI cards ──────────────────────────────────────────── */
    .card-body .h1 {
        font-size: 1.5rem;
    }

    .card-body .subheader {
        font-size: 0.75rem !important;
    }

    /* ── Alerts (action banners) ──────────────────────────────────────── */
    .alert.d-flex {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .alert.d-flex .btn {
        width: 100%;
    }

    /* ── Page body padding ────────────────────────────────────────────── */
    .page-body>.container-xl {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* ── Consultation index: page header ──────────────────────────────── */
    .consultation-page-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    .consultation-page-header .btn {
        width: 100%;
    }

    /* ── Patient list: badges ─────────────────────────────────────────── */
    .badge {
        font-size: 0.6875rem;
    }

    /* ── Chat bubbles (portal) ────────────────────────────────────────── */
    .portal-chat__bubble {
        max-width: 90%;
    }

    /* ── Portal page header ───────────────────────────────────────────── */
    .portal-page-header__title {
        font-size: 1.15rem;
    }
}

/* ── Very small phones (< 360px) ──────────────────────────────────────── */
@media (max-width: 359.98px) {

    .nav-tabs .nav-link {
        font-size: 0.75rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .stepper-label {
        display: none;
    }

    .card-body .h1 {
        font-size: 1.25rem;
    }

    td .d-flex.gap-2 .btn {
        font-size: 0.6875rem;
    }
}
/* Surgeon first view: medical context follows photos on a phone; both remain
   side by side on a large screen, with addressed comments below the photos. */
.surgeon-overview-grid {
  display: grid;
  gap: 1rem;
}

.surgeon-overview-grid > * {
  min-width: 0;
}

@media (min-width: 992px) {
  .surgeon-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
  }

  .surgeon-overview-medical {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .surgeon-overview-comments {
    grid-column: 1;
  }
}

/* Keep dossier actions in view on phones, including upcoming surgeries. */
@media (max-width: 767.98px) {
  .surgeon-dossier-list {
    overflow: visible;
  }

  .surgeon-dossier-list table,
  .surgeon-dossier-list tbody,
  .surgeon-dossier-list tr,
  .surgeon-dossier-list td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .surgeon-dossier-list thead {
    display: none;
  }

  .surgeon-dossier-list tr {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--tblr-border-color);
  }

  .surgeon-dossier-list tr:last-child {
    border-bottom: 0;
  }

  .surgeon-dossier-list td {
    padding: 0.25rem 0.75rem;
    border: 0;
    white-space: normal !important;
    text-align: left !important;
    overflow-wrap: anywhere;
  }

  .surgeon-dossier-list td[data-label]::before {
    content: attr(data-label) " : ";
    font-weight: 600;
  }

  .surgeon-dossier-list .badge {
    white-space: normal;
  }

  .surgeon-dossier-list .surgeon-dossier-action {
    padding-top: 0.75rem;
  }
}

/* Surgeon tasks and transmission keep their controls within phone widths. */
.surgeon-action-queue { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1rem; }
.surgeon-action-card { min-width: 0; overflow-wrap: anywhere; }
.surgeon-portal .surgeon-opinion-button { min-height: 48px; white-space: normal; }
.surgeon-transmission-bar { position: sticky; top: 0; z-index: 10; background: var(--tblr-body-bg, #f6f8fb); padding: .75rem 0; margin-bottom: 1rem; }
.surgeon-mobile-nav { position: fixed; inset: auto 0 0; display: flex; background: #fff; border-top: 1px solid #dce1e7; z-index: 1030; padding-bottom: env(safe-area-inset-bottom); }
.surgeon-mobile-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; color: #626976; font-size: .85rem; }
.surgeon-mobile-nav i { font-size: 1.3rem; }
.surgeon-mobile-nav a.active { color: #206bc4; font-weight: 600; }
@media (max-width: 991.98px) {
  .surgeon-portal .page-body { padding-bottom: calc(180px + env(safe-area-inset-bottom)); }
  .surgeon-transmission-bar { position: fixed; inset: auto 0 calc(64px + env(safe-area-inset-bottom)); padding: .5rem 1rem; margin: 0; border-top: 1px solid #dce1e7; background: #fff; z-index: 1020; }
  .surgeon-transmission-bar [role="status"] { font-size: .75rem; }
}

/* Rich-text toolbar on phones: the button groups wrap onto a second line
   instead of pushing the last ones (undo, redo) out of view behind a sideways
   scroll. trix.css loads after this file, hence the element-qualified selector. */
@media (max-width: 767.98px) {
  trix-toolbar div.trix-button-row {
    flex-wrap: wrap;
    column-gap: 0.5rem;
  }
}