/*
 * CrewFill Agency mobile interface v1
 *
 * Presentation only:
 * - no database changes
 * - no permission changes
 * - no existing workflow replacement
 */

.cf-mobile-bottom-nav,
.cf-mobile-more-overlay,
.cf-mobile-desktop-notice {
  display: none;
}

@media (max-width: 767px) {
  :root {
    --cf-mobile-safe-bottom:
      env(safe-area-inset-bottom, 0px);
  }

  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    padding-bottom:
      calc(
        76px +
        var(--cf-mobile-safe-bottom)
      );
  }

  body.cf-mobile-menu-open {
    overflow: hidden;
  }

  #app-screen,
  #app-screen .page-wrap,
  .portal-section {
    box-sizing: border-box;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /*
   * Existing navigation remains in the DOM and continues
   * to drive all existing section and drawer functions.
   */
  .portal-nav {
    display: none !important;
  }

  #account-btn,
  #logout-btn {
    display: none !important;
  }

  /*
   * Main five-item mobile navigation.
   */
  .cf-mobile-bottom-nav {
    position: fixed;
    z-index: 9000;
    right: 0;
    bottom: 0;
    left: 0;

    display: grid;
    grid-template-columns:
      repeat(
        5,
        minmax(0, 1fr)
      );
    align-items: end;

    min-height:
      calc(
        66px +
        var(--cf-mobile-safe-bottom)
      );

    padding:
      7px
      7px
      calc(
        7px +
        var(--cf-mobile-safe-bottom)
      );

    border-top:
      1px solid
      rgba(15, 35, 65, 0.12);

    background:
      color-mix(
        in srgb,
        var(--bg-card) 96%,
        transparent
      );

    box-shadow:
      0 -10px 30px
      rgba(15, 35, 65, 0.12);

    backdrop-filter:
      blur(18px);

    -webkit-backdrop-filter:
      blur(18px);
  }

  .cf-mobile-nav-button {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;

    min-width: 0;
    min-height: 52px;

    padding: 5px 2px;

    border: 0;
    border-radius: 14px;

    background: transparent;
    color: var(--text-muted);

    font: inherit;
    cursor: pointer;

    -webkit-tap-highlight-color:
      transparent;
  }

  .cf-mobile-nav-button:focus-visible,
  .cf-mobile-more-item:focus-visible,
  .cf-mobile-more-close:focus-visible {
    outline:
      3px solid
      rgba(59, 130, 246, 0.3);
    outline-offset: 2px;
  }

  .cf-mobile-nav-icon {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;

    font-size: 18px;
    line-height: 1;
  }

  .cf-mobile-nav-label {
    max-width: 100%;
    overflow: hidden;

    font-size: 10px;
    font-weight: 800;
    line-height: 1.1;

    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cf-mobile-nav-button.is-active {
    background: var(--blue-light);
    color: var(--blue);
  }

  .cf-mobile-nav-button.is-create {
    margin-top: -19px;
    color: #ffffff;
  }

  .cf-mobile-nav-button.is-create::before {
    position: absolute;
    z-index: -1;

    width: 50px;
    height: 50px;

    border:
      5px solid
      var(--bg);
    border-radius: 50%;

    background: var(--blue);

    box-shadow:
      0 8px 20px
      rgba(59, 130, 246, 0.34);

    content: "";
  }

  .cf-mobile-nav-button.is-create
  .cf-mobile-nav-icon {
    color: #ffffff;
    font-size: 25px;
  }

  .cf-mobile-nav-button.is-create
  .cf-mobile-nav-label {
    position: absolute;
    top: 50px;
    color: var(--text-muted);
  }

  /*
   * More menu.
   */
  .cf-mobile-more-overlay {
    position: fixed;
    z-index: 9100;
    inset: 0;

    align-items: flex-end;

    padding:
      16px
      12px
      calc(
        12px +
        var(--cf-mobile-safe-bottom)
      );

    background:
      rgba(7, 19, 38, 0.52);

    opacity: 0;
    pointer-events: none;

    transition:
      opacity 180ms ease;
  }

  .cf-mobile-more-overlay.is-open {
    display: flex;
    opacity: 1;
    pointer-events: auto;
  }

  .cf-mobile-more-sheet {
    width: 100%;
    max-height:
      min(
        78dvh,
        660px
      );

    overflow-y: auto;
    overscroll-behavior: contain;

    border:
      1px solid
      var(--border);
    border-radius: 24px;

    background: var(--bg-card);

    box-shadow:
      0 24px 70px
      rgba(7, 19, 38, 0.32);

    transform:
      translateY(20px);

    transition:
      transform 180ms ease;
  }

  .cf-mobile-more-overlay.is-open
  .cf-mobile-more-sheet {
    transform:
      translateY(0);
  }

  .cf-mobile-more-head {
    position: sticky;
    z-index: 2;
    top: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
      18px
      18px
      12px;

    border-bottom:
      1px solid
      var(--border);

    background: var(--bg-card);
  }

  .cf-mobile-more-title {
    margin: 0;

    color: var(--text);

    font-size: 21px;
    line-height: 1.2;
  }

  .cf-mobile-more-close {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;

    border: 0;
    border-radius: 50%;

    background: var(--bg);
    color: var(--text-muted);

    font-size: 22px;
    cursor: pointer;
  }

  .cf-mobile-more-list {
    display: grid;
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
    gap: 10px;

    padding:
      14px
      14px
      18px;
  }

  .cf-mobile-more-item {
    display: grid;
    grid-template-columns:
      38px
      minmax(0, 1fr);
    grid-template-rows:
      auto
      auto;
    align-content: center;

    min-width: 0;
    min-height: 92px;

    gap:
      2px
      10px;

    padding: 14px;

    border:
      1px solid
      var(--border);
    border-radius: 17px;

    background: var(--bg);
    color: var(--text);

    text-align: left;
    cursor: pointer;
  }

  .cf-mobile-more-item-icon {
    grid-row:
      1 / 3;

    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;

    border-radius: 12px;

    background: var(--blue-light);
    color: var(--blue);

    font-size: 18px;
  }

  .cf-mobile-more-item-label {
    overflow: hidden;

    font-size: 13px;
    font-weight: 800;

    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cf-mobile-more-item-note {
    color: var(--text-muted);

    font-size: 10px;
    line-height: 1.25;
  }

  .cf-mobile-more-item.is-active {
    border-color:
      rgba(59, 130, 246, 0.5);
    background: var(--blue-light);
  }

  .cf-mobile-more-item.is-danger {
    color: #c03b49;
  }

  .cf-mobile-more-item.is-danger
  .cf-mobile-more-item-icon {
    background: #fff0f2;
    color: #c03b49;
  }

  /*
   * Closed CRM drawer must not remain visible or clickable.
   */
  .agency-crm-drawer[
    aria-hidden="true"
  ] {
    visibility: hidden !important;
    pointer-events: none !important;

    transform:
      translateY(
        calc(
          100% +
          140px
        )
      ) !important;
  }

  .agency-crm-overlay:has(
    .agency-crm-drawer[
      aria-hidden="true"
    ]
  ) {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /*
   * Full-screen operational drawers.
   */
  #behalf-drawer,
  #workers-drawer,
  #colleague-drawer,
  #edit-worker-drawer,
  #account-drawer,
  .agency-crm-drawer {
    box-sizing: border-box !important;

    width: 100vw !important;
    max-width: none !important;

    height: 100dvh !important;
    max-height: 100dvh !important;

    border-radius: 0 !important;
  }

  #behalf-drawer .drawer-header,
  #workers-drawer .drawer-header,
  #colleague-drawer .drawer-header,
  #edit-worker-drawer .drawer-header,
  #account-drawer .drawer-header {
    position: sticky !important;
    z-index: 20;
    top: 0;

    background: var(--bg-card);
  }

  #behalf-drawer .two-col,
  #colleague-drawer .two-col,
  #edit-worker-drawer .two-col {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  #behalf-drawer input,
  #behalf-drawer select,
  #behalf-drawer textarea,
  #workers-drawer input,
  #edit-worker-drawer input,
  #edit-worker-drawer select,
  #colleague-drawer input,
  #account-drawer input {
    min-height: 48px;
    font-size: 16px !important;
  }

  #behalf-submit-btn,
  #edit-worker-save-all-btn {
    position: sticky;
    z-index: 10;
    bottom:
      calc(
        8px +
        var(--cf-mobile-safe-bottom)
      );

    width: 100%;
    min-height: 50px;

    box-shadow:
      0 10px 28px
      rgba(15, 35, 65, 0.2);
  }

  /*
   * Dashboard worker table becomes mobile cards.
   */
  .compliance-dashboard table {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
  }

  .compliance-dashboard table thead {
    display: none !important;
  }

  .compliance-dashboard-table-body {
    display: grid !important;
    gap: 12px;

    width: 100% !important;
  }

  .compliance-dashboard-table-body tr,
  .compliance-dashboard-table-body td {
    display: block !important;

    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
  }

  .compliance-dashboard-table-body tr {
    padding: 15px;

    border:
      1px solid
      var(--border);
    border-radius: 16px;

    background: var(--bg-card);

    box-shadow:
      0 6px 18px
      rgba(15, 35, 65, 0.06);
  }

  .compliance-dashboard-table-body td {
    padding:
      5px
      0 !important;

    border: 0 !important;
    overflow-wrap: anywhere;
  }

  .compliance-dashboard-table-body
  td:not(:first-child)::before {
    display: inline-block;

    min-width: 108px;
    margin-right: 7px;

    color: var(--text-dim);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;

    text-transform: uppercase;
  }

  .compliance-dashboard-table-body
  td:nth-child(2)::before {
    content: "Portal";
  }

  .compliance-dashboard-table-body
  td:nth-child(3)::before {
    content: "Roles";
  }

  .compliance-dashboard-table-body
  td:nth-child(4)::before {
    content: "Credentials";
  }

  .compliance-dashboard-table-body
  td:nth-child(5)::before {
    content: "Next expiry";
  }

  .compliance-dashboard-table-body
  td:nth-child(6)::before {
    content: "Status";
  }

  /*
   * Touch targets and responsive controls.
   */
  .jobs-section button,
  .contractors-section button,
  .workers-drawer button,
  .reports-section button,
  .integrations-section button {
    min-height: 44px;
  }

  .workers-drawer
  .worker-portal-controls,
  .workers-drawer
  .worker-admin-controls,
  .agency-crm-workspace,
  .contractor-directory-list,
  .contractor-request-list {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .reports-section input,
  .reports-section select,
  .reports-section button {
    min-height: 48px;
    font-size: 16px;
  }

  .integrations-section
  .integration-card-actions
  button {
    width: 100%;
    min-height: 48px;
  }

  img,
  svg,
  canvas {
    max-width: 100%;
  }

  /*
   * Desktop-only action treatment.
   */
  .cf-mobile-desktop-only {
    opacity: 0.56 !important;
    cursor: not-allowed !important;
    filter: saturate(0.45);
  }

  .cf-mobile-desktop-only::after {
    content: "Desktop";
  }

  .cf-mobile-desktop-notice {
    position: fixed;
    z-index: 9300;
    inset: 0;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
      rgba(7, 19, 38, 0.55);
  }

  .cf-mobile-desktop-notice.is-open {
    display: flex;
  }

  .cf-mobile-desktop-notice-card {
    width:
      min(
        100%,
        380px
      );

    padding: 24px;

    border:
      1px solid
      var(--border);
    border-radius: 20px;

    background: var(--bg-card);

    box-shadow:
      0 24px 70px
      rgba(7, 19, 38, 0.3);
  }

  .cf-mobile-desktop-notice-card h2 {
    margin:
      0
      0
      9px;

    color: var(--text);
    font-size: 20px;
  }

  .cf-mobile-desktop-notice-card p {
    margin:
      0
      0
      18px;

    color: var(--text-muted);
    line-height: 1.55;
  }

  .cf-mobile-desktop-notice-card button {
    width: 100%;
    min-height: 48px;

    border: 0;
    border-radius: 12px;

    background: var(--navy);
    color: #ffffff;

    font: inherit;
    font-weight: 800;

    cursor: pointer;
  }
}

@media (max-width: 359px) {
  .cf-mobile-more-list {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .cf-mobile-nav-label {
    font-size: 9px;
  }
}

@media (
  prefers-reduced-motion:
  reduce
) {
  .cf-mobile-more-overlay,
  .cf-mobile-more-sheet {
    transition: none !important;
  }
}

/* Mobile drawer layer correction v1 */

@media (max-width: 767px) {
  /*
   * The mobile navigation uses a deliberately high stacking layer.
   * Existing desktop drawers must sit above it when opened.
   */

  #behalf-overlay,
  #account-overlay,
  #colleague-overlay,
  #workers-overlay,
  #edit-worker-overlay,
  #broadcast-overlay,
  .agency-crm-overlay {
    z-index: 9500 !important;
  }

  #behalf-drawer,
  #account-drawer,
  #colleague-drawer,
  #workers-drawer,
  #edit-worker-drawer,
  #broadcast-drawer,
  .agency-crm-drawer {
    z-index: 9600 !important;
  }

  /*
   * Remove the bottom navigation while a full-screen operational
   * drawer is open. This prevents it covering drawer controls.
   */

  body:has(#behalf-drawer.open)
    .cf-mobile-bottom-nav,
  body:has(#account-drawer.open)
    .cf-mobile-bottom-nav,
  body:has(#colleague-drawer.open)
    .cf-mobile-bottom-nav,
  body:has(#workers-drawer.open)
    .cf-mobile-bottom-nav,
  body:has(#edit-worker-drawer.open)
    .cf-mobile-bottom-nav,
  body:has(#broadcast-drawer.open)
    .cf-mobile-bottom-nav,
  body:has(
    .agency-crm-drawer[aria-hidden="false"]
  )
    .cf-mobile-bottom-nav {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /*
   * Keep confirmations and notices above an active drawer.
   */

  .agency-crm-notice,
  .agency-crm-confirm-overlay,
  .cf-mobile-desktop-notice {
    z-index: 9800 !important;
  }
}

/* Mobile Create navigation alignment v1 */

@media (max-width: 767px) {
  .cf-mobile-nav-button.is-create {
    z-index: 1;
    min-height: 56px;
    margin-top: -24px;
    padding: 0 2px;
  }

  .cf-mobile-nav-button.is-create::before {
    z-index: 0;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .cf-mobile-nav-button.is-create
    .cf-mobile-nav-icon {
    position: absolute;
    z-index: 1;
    top: 13px;
    left: 50%;
    transform: translateX(-50%);
  }

  .cf-mobile-nav-button.is-create
    .cf-mobile-nav-label {
    position: absolute;
    z-index: 1;
    top: 52px;
    right: 0;
    left: 0;

    overflow: visible;

    color: var(--text-muted);
    line-height: 1;
    text-align: center;
  }
}

/* Mobile authenticated-screen visibility v1 */

@media (max-width: 767px) {
  /*
   * Login, loading and forced-password screens share index.html
   * with the authenticated portal. Mobile navigation must only
   * appear when the authenticated application is active.
   */

  body:not(:has(#app-screen.active))
    .cf-mobile-bottom-nav,
  body:not(:has(#app-screen.active))
    .cf-mobile-more-overlay {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Unified mobile and desktop notification bell v1 */

.bell-mobile-icon {
  display: none;
}

  #bell-btn {
    width: 38px;
    height: 38px;
    padding: 0;

    border:
      1px solid
      rgba(255, 255, 255, 0.14);
    border-radius: 12px;

    background:
      rgba(255, 255, 255, 0.055);
    color:
      rgba(255, 255, 255, 0.88);

    font-size: 0;

    box-shadow:
      inset 0 1px 0
      rgba(255, 255, 255, 0.05);
  }

  #bell-btn:hover,
  #bell-btn:active {
    border-color:
      rgba(255, 255, 255, 0.25);
    background:
      rgba(255, 255, 255, 0.1);
    color: #ffffff;
  }

  #bell-btn .bell-desktop-icon {
    display: none;
  }

  #bell-btn .bell-mobile-icon {
    display: block;
    width: 21px;
    height: 21px;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #bell-btn .bell-badge {
    top: -5px;
    right: -5px;

    min-width: 17px;
    height: 17px;
    padding: 0 4px;

    border:
      2px solid
      var(--navy);
    border-radius: 999px;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;
  }


/* Mobile dashboard opacity correction v1 */

@media (max-width: 767px) {
  /*
   * The desktop dashboard uses a one-time entrance animation
   * from opacity zero. Mobile Safari can discard the animation's
   * completed state after switching portal sections, leaving the
   * dashboard present but invisible.
   */
  #dashboard-section .agency-dashboard {
    opacity: 1 !important;
    animation: none !important;
  }
}


/*
 * Compact mobile Create label v2.
 * Keep the existing booking action and raised control, but place
 * the word Create inside it instead of showing a plus and a
 * duplicate label underneath.
 */
@media (max-width: 767px) {
  .cf-mobile-nav-button.is-create
    .cf-mobile-nav-icon {
    top: 0;
    width: 50px;
    height: 50px;
    place-items: center;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1;
  }

  .cf-mobile-nav-button.is-create
    .cf-mobile-nav-label {
    display: none;
  }
}


/*
 * Mobile Create visual centring v3.
 * The blue circle includes a 5px border, so offset the
 * 50px label box to the centre of the full 60px circle.
 */
@media (max-width: 767px) {
  .cf-mobile-nav-button.is-create
    .cf-mobile-nav-icon {
    top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
  }
}