/* ============================================================
   FIXFLEET NATIVE MOBILE APP EXPERIENCE
   Applies only inside Capacitor iOS / Android.
   Website and PWA remain unchanged.
   ============================================================ */

html.ff-native-app,
html.ff-native-app body{
  background:#020817;
  min-height:100%;
  overscroll-behavior-y:none;
}


/* ============================================================
   NATIVE BOOT / SPLASH
   ============================================================ */

html.ff-native-app.ff-native-booting body{
  overflow:hidden;
}

html.ff-native-app.ff-native-booting body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:2147483646;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(26,167,255,.16),
      transparent 30%
    ),
    radial-gradient(
      circle at 60% 48%,
      rgba(52,235,173,.10),
      transparent 34%
    ),
    #020817
    url('/icons/cfs-512.png?v=20260928')
    center 43% /
    clamp(155px,42vw,230px)
    no-repeat;

  opacity:1;

  transition:
    opacity .32s ease;
}

html.ff-native-app.ff-native-booting body::after{
  content:"";
  position:fixed;

  left:50%;
  bottom:
    max(
      76px,
      calc(
        env(safe-area-inset-bottom) + 54px
      )
    );

  width:84px;
  height:3px;

  transform:translateX(-50%);

  z-index:2147483647;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      rgba(64,188,255,.20),
      #43c7ff,
      #44e8ad,
      rgba(68,232,173,.20)
    );

  background-size:200% 100%;

  animation:
    fixFleetNativeLoader
    1.05s linear infinite;
}

@keyframes fixFleetNativeLoader{
  from{
    background-position:200% 0;
  }

  to{
    background-position:-200% 0;
  }
}


/* ============================================================
   CLEAN NATIVE LOGIN
   ============================================================ */

@media(max-width:900px){

  html.ff-native-app #login.ff-login-shell{
    width:100%;
    max-width:none;

    min-height:100dvh;

    margin:0;

    border:0;
    border-radius:0;

    box-shadow:none;

    display:flex;

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

    overflow:auto;

    padding:
      max(
        62px,
        calc(
          env(safe-area-inset-top) + 34px
        )
      )
      max(
        24px,
        env(safe-area-inset-right)
      )
      max(
        36px,
        calc(
          env(safe-area-inset-bottom) + 24px
        )
      )
      max(
        24px,
        env(safe-area-inset-left)
      );

    background:
      radial-gradient(
        circle at 50% -10%,
        rgba(36,165,255,.16),
        transparent 38%
      ),
      radial-gradient(
        circle at 90% 80%,
        rgba(44,230,174,.08),
        transparent 32%
      ),
      #020817;
  }


  html.ff-native-app
  .ff-login-brand-panel{
    display:none !important;
  }


  html.ff-native-app
  .ff-login-form-panel{
    display:block;

    width:100%;

    max-width:none;

    padding:0;

    background:transparent;
  }


  html.ff-native-app
  .ff-login-form-wrap{
    width:100%;
    max-width:460px;

    margin:0 auto;
  }


  html.ff-native-app
  .ff-login-mobile-brand{
    display:block;

    width:min(72vw,280px);
    height:72px;
    min-height:72px;

    margin:
      0 auto 30px;
  }


  html.ff-native-app
  .ff-login-mobile-brand::before{
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
  }


  html.ff-native-app
  .ff-login-eyebrow{
    text-align:center;

    font-size:11px;

    letter-spacing:2.2px;

    opacity:.55;
  }


  html.ff-native-app
  .ff-login-form-wrap h2{
    margin:
      9px 0 8px;

    text-align:center;

    font-size:
      clamp(
        30px,
        8vw,
        38px
      );

    line-height:1.08;

    letter-spacing:-.8px;
  }


  html.ff-native-app
  .ff-login-form-wrap > p,
  html.ff-native-app
  .ff-login-form-wrap .muted{
    text-align:center;
  }


  html.ff-native-app
  .ff-login-form-wrap .label{
    margin-top:22px;

    font-size:14px;
    font-weight:800;
  }


  html.ff-native-app
  .ff-login-form-wrap .field{
    min-height:58px !important;

    border-radius:16px;

    font-size:16px;

    background:
      rgba(255,255,255,.055);
  }


  html.ff-native-app
  .ff-login-button{
    width:100%;

    min-height:58px;

    margin-top:26px;

    border-radius:16px;

    font-size:15px;
    font-weight:900;

    box-shadow:
      0 14px 36px
      rgba(31,108,255,.16);
  }


  html.ff-native-app
  .ff-login-security{
    margin-top:18px;

    text-align:center;

    font-size:11px;

    opacity:.42;
  }

}


/* ============================================================
   NATIVE HEADER SAFE AREAS
   ============================================================ */

html.ff-native-app #top.top{
  padding-top:
    max(
      16px,
      env(safe-area-inset-top)
    );

  padding-left:
    max(
      14px,
      env(safe-area-inset-left)
    );

  padding-right:
    max(
      14px,
      env(safe-area-inset-right)
    );
}


/* ============================================================
   NATIVE PAGE BOTTOM SAFE AREA
   ============================================================ */

html.ff-native-app main{
  padding-bottom:
    max(
      12px,
      env(safe-area-inset-bottom)
    );
}


/* ============================================================
   FIXFLEET NATIVE MOBILE HEADER POLISH V2
   ============================================================ */

@media(max-width:900px){

  html.ff-native-app #top.top{
    min-height:0;

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

    gap:10px;

    padding-top:
      max(
        12px,
        env(safe-area-inset-top)
      );

    padding-bottom:14px;

    padding-left:
      max(
        14px,
        env(safe-area-inset-left)
      );

    padding-right:
      max(
        14px,
        env(safe-area-inset-right)
      );
  }


  html.ff-native-app
  .ff-header-brand{
    flex:1 1 auto;

    min-width:0;

    gap:10px;

    align-items:center;
  }


  html.ff-native-app
  .ff-header-brand > div:last-child{
    min-width:0;

    overflow:hidden;
  }


  html.ff-native-app
  .ff-logo-mark-small{
    width:48px;
    height:48px;

    flex:0 0 48px;

    border-radius:14px;

    font-size:14px;
  }


  html.ff-native-app
  #top .brand{
    margin:0;

    font-size:
      clamp(
        23px,
        7vw,
        29px
      );

    line-height:1;

    letter-spacing:1px;

    white-space:nowrap;
  }


  html.ff-native-app
  #userLine{
    display:block;

    max-width:100%;

    margin-top:7px;

    overflow:hidden;

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

    font-size:12px;

    line-height:1.25;
  }


  html.ff-native-app
  .ff-top-actions{
    display:flex;

    flex:0 0 auto;

    align-items:center;

    gap:7px;
  }


  html.ff-native-app
  .ff-notification-bell{
    width:50px;
    min-width:50px;
    height:50px;

    padding:0;

    border-radius:15px;
  }


  html.ff-native-app
  .ff-notification-bell-icon{
    font-size:23px;
  }


  html.ff-native-app
  #logout{
    width:auto;
    min-width:82px;

    min-height:50px;

    margin:0;

    padding:
      0 13px;

    display:flex;

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

    border-radius:15px;

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

    line-height:1;

    white-space:nowrap;
  }

}


/* Extra tightening on narrow phones */

@media(max-width:390px){

  html.ff-native-app
  .ff-logo-mark-small{
    width:44px;
    height:44px;

    flex-basis:44px;
  }


  html.ff-native-app
  #top .brand{
    font-size:22px;
  }


  html.ff-native-app
  .ff-notification-bell{
    width:46px;
    min-width:46px;
    height:46px;
  }


  html.ff-native-app
  #logout{
    min-width:74px;
    min-height:46px;

    padding:
      0 10px;

    font-size:12px;
  }

}


/* ============================================================
   FIXFLEET NATIVE DRIVER FORMS V3
   Incident + breakdown mobile experience
   ============================================================ */

@media(max-width:900px){

  /*
   * Keep native incident / breakdown content comfortably clear
   * of the Android/iOS status bar and app header.
   */

  html.ff-native-app
  #breakdown:not(.hidden){
    width:100%;

    padding-top:18px;

    padding-left:
      max(
        14px,
        env(safe-area-inset-left)
      );

    padding-right:
      max(
        14px,
        env(safe-area-inset-right)
      );

    padding-bottom:
      max(
        34px,
        calc(
          env(safe-area-inset-bottom) + 24px
        )
      );

    box-sizing:border-box;
  }


  html.ff-native-app
  #breakdownContent{
    width:100%;
    max-width:720px;

    margin:0 auto;
  }


  /*
   * Main form shell
   */

  html.ff-native-app
  .ff-native-driver-form{
    width:100%;

    margin:0;

    padding:
      22px 18px 24px;

    box-sizing:border-box;

    border-radius:24px;

    overflow:visible;
  }


  html.ff-native-app
  .ff-native-driver-form > h2{
    margin:
      0 0 8px;

    font-size:
      clamp(
        25px,
        7vw,
        32px
      );

    line-height:1.12;

    letter-spacing:-.5px;
  }


  html.ff-native-app
  .ff-native-driver-form > h2 + .muted{
    margin-top:8px;
    margin-bottom:18px;

    line-height:1.5;
  }


  /*
   * All two-column desktop incident fields become
   * proper single-column mobile controls.
   */

  html.ff-native-app
  .ff-native-driver-form
  .incident-form-grid{
    display:grid;

    grid-template-columns:
      minmax(0,1fr);

    gap:0;
  }


  /*
   * Labels
   */

  html.ff-native-app
  .ff-native-driver-form
  .label{
    display:block;

    margin-top:20px;
    margin-bottom:8px;

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

    line-height:1.3;
  }


  /*
   * Inputs / selects / text areas
   */

  html.ff-native-app
  .ff-native-driver-form
  .field{
    width:100%;

    min-height:56px;

    box-sizing:border-box;

    border-radius:16px;

    font-size:16px;
  }


  html.ff-native-app
  .ff-native-driver-form
  textarea.field{
    min-height:126px;

    padding-top:14px;

    line-height:1.45;

    resize:vertical;
  }


  /*
   * Current GPS buttons
   */

  html.ff-native-app
  .ff-native-driver-form
  button[onclick*="CurrentLocation"],
  html.ff-native-app
  .ff-native-driver-form
  button[onclick*="BreakdownLocation"]{
    width:100%;

    min-height:54px;

    margin-top:10px !important;

    padding:
      0 16px;

    border-radius:16px;

    white-space:normal;

    line-height:1.25;
  }


  html.ff-native-app
  #incidentGpsMsg,
  html.ff-native-app
  #breakdownGpsMsg{
    min-height:20px;

    margin-top:9px !important;

    line-height:1.4;
  }


  /*
   * Vehicle/info notice
   */

  html.ff-native-app
  .ff-native-driver-form
  > .notice{
    margin-top:16px;

    padding:14px 16px;

    border-radius:16px;

    line-height:1.45;
  }


  /*
   * Nested cards — HGV information and witness cards.
   * Less box-inside-box feeling on a phone.
   */

  html.ff-native-app
  .ff-native-driver-form
  > .card{
    margin-top:18px !important;

    padding:18px 16px;

    border-radius:20px;
  }


  html.ff-native-app
  .ff-native-driver-form
  > .card h3{
    margin:
      0 0 6px;

    font-size:19px;
  }


  html.ff-native-app
  .ff-native-driver-form
  > .card .label:first-of-type{
    margin-top:14px;
  }


  /*
   * Photo attachment
   */

  html.ff-native-app
  #incidentPhotos{
    width:100%;

    min-height:58px;

    padding:8px;

    box-sizing:border-box;

    border-radius:16px;

    overflow:hidden;

    font-size:14px;
  }


  html.ff-native-app
  #incidentPhotos::file-selector-button{
    min-height:42px;

    margin-right:10px;

    padding:
      0 14px;

    border:0;

    border-radius:12px;

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

    cursor:pointer;
  }


  /*
   * Action row
   */

  html.ff-native-app
  .ff-native-driver-form
  .actions{
    display:grid;

    grid-template-columns:
      minmax(0,.75fr)
      minmax(0,1.25fr);

    gap:10px;

    width:100%;

    margin-top:24px;

    padding-bottom:
      max(
        4px,
        env(safe-area-inset-bottom)
      );
  }


  html.ff-native-app
  .ff-native-driver-form
  .actions .button{
    width:100%;

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

    margin:0;

    padding:
      0 12px;

    border-radius:16px;

    white-space:normal;

    line-height:1.2;
  }

}


/*
 * Narrow Samsung / smaller iPhones
 */

@media(max-width:390px){

  html.ff-native-app
  .ff-native-driver-form{
    padding:
      20px 14px 22px;
  }


  html.ff-native-app
  .ff-native-driver-form
  .actions{
    grid-template-columns:1fr;
  }


  html.ff-native-app
  .ff-native-driver-form
  .actions .button{
    min-height:52px;
  }

}


/* ============================================================
   FIXFLEET NATIVE DASHBOARD / BREAKDOWN V4
   ============================================================ */


/*
 * Fleet Diary is already available as its own top navigation
 * choice. Remove the duplicate Dashboard preview in native apps.
 */

html.ff-native-app
#fixFleetDashboardDiary{
  display:none !important;
}


/* ============================================================
   BREAKDOWN FORM
   ============================================================ */

@media(max-width:900px){

  /*
   * Slightly tighter breakdown form than incident form.
   */

  html.ff-native-app
  .ff-breakdown-report-form{
    padding:
      22px 18px 24px;
  }


  html.ff-native-app
  .ff-breakdown-report-form
  > h2{
    margin-bottom:10px;
  }


  /*
   * Vehicle summary
   */

  html.ff-native-app
  .ff-breakdown-vehicle-summary{
    min-height:auto !important;

    padding:
      17px 18px !important;

    display:flex;

    align-items:center;

    border-radius:18px;

    font-size:17px !important;
    font-weight:700;

    line-height:1.35;

    background:
      rgba(255,255,255,.07);
  }


  /*
   * GPS
   */

  html.ff-native-app
  .ff-breakdown-gps-button{
    width:100%;

    min-height:54px;

    margin-top:10px !important;

    border-radius:16px;

    font-weight:900;

    white-space:normal;

    line-height:1.25;
  }


  /*
   * Reduce excessive vertical gaps.
   */

  html.ff-native-app
  .ff-breakdown-report-form
  .label{
    margin-top:18px;
  }


  html.ff-native-app
  .ff-breakdown-report-form
  textarea.field{
    min-height:118px;
  }


  /*
   * Recovery destination/details should feel like a
   * continuation of the recovery question.
   */

  html.ff-native-app
  #breakdownRecoveryDestinationWrap{
    margin-top:4px;
  }


  /*
   * Supplier area
   */

  html.ff-native-app
  .ff-native-supplier-panel{
    margin-top:20px !important;

    padding:
      18px 16px !important;

    border-radius:20px;

    background:
      linear-gradient(
        145deg,
        rgba(20,42,72,.78),
        rgba(8,20,39,.96)
      );
  }


  html.ff-native-app
  .ff-native-supplier-panel > h2,
  html.ff-native-app
  .ff-native-supplier-panel > h3{
    margin:
      0 0 14px;

    font-size:21px;
  }


  html.ff-native-app
  .ff-native-supplier-card{
    margin-top:12px !important;

    padding:
      16px !important;

    border-radius:18px !important;

    background:
      rgba(255,255,255,.035);
  }


  html.ff-native-app
  .ff-native-supplier-card strong{
    font-size:16px;
    line-height:1.35;
  }


  /*
   * Bottom buttons
   */

  html.ff-native-app
  .ff-breakdown-report-form
  .actions{
    margin-top:24px;
  }


  /*
   * Give the bottom of the form comfortable Android/iOS
   * navigation clearance.
   */

  html.ff-native-app
  .ff-breakdown-report-form{
    margin-bottom:
      max(
        6px,
        env(safe-area-inset-bottom)
      );
  }

}


/* Small phones */

@media(max-width:390px){

  html.ff-native-app
  .ff-breakdown-report-form{
    padding:
      20px 14px 22px;
  }


  html.ff-native-app
  .ff-breakdown-vehicle-summary{
    padding:
      15px !important;

    font-size:16px !important;
  }

}