/* ============================================
   MOBILE RESPONSIVE STYLES (COMMON)
   Shared responsive styles for AMSB application
   Used by: amsb.css, amsb_root.css, and imported by falcon/css/user.css
   ============================================ */

/* Prevent horizontal scrolling on all devices */
html, body {
   overflow-x: hidden;
   max-width: 100%;
}

/* Ensure all containers respect viewport width */
* {
   box-sizing: border-box;
}

/* ============================================
   TABLET AND SMALL DESKTOP (max-width: 992px)
   ============================================ */
@media (max-width: 992px) {
   body {
      font-size: 9pt;
   }

   #header-title {
      padding: 8px;
   }

   .title-main {
      font-size: 28px;
   }

   .title-sub {
      font-size: 1.3em;
   }

   .rowCJT div.leftNav {
      width: 20%;
   }

   .rowCJT div.actionJackson {
      width: 78%;
   }

   /* Make tables scrollable horizontally */
   table.enpRpt,
   table.enpRptC,
   table.enpView,
   table.simpleTable {
      display: block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
   }

   table.enpRpt thead,
   table.enpRptC thead,
   table.enpView thead,
   table.simpleTable thead {
      display: table-header-group;
   }

   table.enpRpt tbody,
   table.enpRptC tbody,
   table.enpView tbody,
   table.simpleTable tbody {
      display: table-row-group;
   }
}

/* ============================================
   MOBILE DEVICES (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
   /* Base font size adjustment */
   body {
      font-size: 9pt;
      line-height: 1.4;
      padding-left: 15px;
      padding-right: 15px;
   }

   /* Header adjustments */
   header {
      width: 100%;
      float: none;
   }

   #header-title {
      padding: 8px 10px;
      max-width: 100%;
   }

   .title-main {
      font-size: 22px;
      line-height: 1.2;
   }

   .title-sub {
      font-size: 1.1em;
      line-height: 1.3;
   }

   .logo {
      float: none;
      display: block;
      margin: 0 auto 8px;
      max-width: 100%;
   }

   /* Top navigation */
   .top-nav {
      font-size: 9pt;
      padding: 10px 0;
      text-align: center;
      width: 100%;
   }

   .top-nav a {
      padding: 0 4px;
      display: inline-block;
      margin: 2px 0;
   }

   /* Headings */
   h2 {
      font-size: 1.3em;
      margin-left: 0;
      margin-right: 0;
      margin-top: 15px;
      padding: 0 10px;
   }

   h3 {
      font-size: 1.2em;
      margin-left: 0;
      margin-right: 0;
      margin-top: 15px;
      padding: 0 10px;
   }

   /* Layout - Stack leftNav and main content */
   .equalNav {
      display: block;
      width: 100%;
      margin: 0;
      border-spacing: 0;
   }

   .rowCJT {
      display: block;
      width: 100%;
   }

   .rowCJT div {
      display: block;
      width: 100% !important;
   }

   .rowCJT div.leftNav {
      width: 100% !important;
      margin-bottom: 10px;
   }

   .rowCJT div.actionJackson {
      width: 100% !important;
      padding: 0 10px;
   }

   .rowCJT h2 {
      font-size: 1.1em;
      padding: 0.4em 10px;
      margin: 0;
   }

   .rowCJT div p {
      font-size: 0.9em;
      padding: 0 10px;
      margin: 0.4em 0;
   }

   /* Left navigation */
   .leftNav {
      padding: 10px 10px;
   }

   .leftNavUL li {
      font-size: 10pt;
      margin: 8px 0 3px -15px;
   }

   .subNav {
      font-size: 8.5pt;
   }

   .subNav li {
      margin: 0px 0 5px -12px;
   }

   /* Tables - Make fully responsive */
   table.enpRpt,
   table.enpRptC,
   table.enpView,
   table.simpleTable {
      display: block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      font-size: 8.5pt;
   }

   table.enpRpt thead,
   table.enpRptC thead,
   table.enpView thead,
   table.simpleTable thead {
      display: table-header-group;
   }

   table.enpRpt tbody,
   table.enpRptC tbody,
   table.enpView tbody,
   table.simpleTable tbody {
      display: table-row-group;
   }

   td.enpRptTitle {
      font-size: 13px;
      padding: 4px 6px;
   }

   td.enpRptLabel {
      font-size: 8.5pt;
      padding: 4px 6px;
   }

   td.enpRpt {
      font-size: 8.5pt;
      padding: 4px 6px;
   }

   td.enpViewTitle {
      font-size: 12px;
      padding: 4px 6px;
   }

   td.enpViewLabel {
      font-size: 8.5pt;
      padding: 4px 6px;
      text-align: left;
   }

   td.enpView {
      font-size: 9pt;
      padding: 4px 6px;
   }

   td.simpleTableTitle {
      font-size: 12px;
      padding: 4px 6px;
   }

   td.simpleTableLabel {
      font-size: 8.5pt;
      padding: 4px 6px;
   }

   td.simpleTable {
      font-size: 9pt;
      padding: 4px 6px;
   }

   /* Forms and inputs */
   input.cjtBtn {
      font-size: 10pt;
      padding: 8px 16px;
      min-height: 44px; /* Touch-friendly size */
      width: 100%;
      max-width: 100%;
   }

   .formError {
      width: 100%;
      max-width: 100%;
      font-size: 8.5pt;
      padding: 6px;
      margin: 4px 0;
   }

   /* Messages */
   .error,
   .message {
      font-size: 10pt;
      padding: 8px 10px;
      margin: 10px 0;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
   }

   /* Directory letters */
   div.directoryLetters {
      font-size: 11pt;
      padding: 0 10px;
   }

   a.directoryLetters {
      font-size: 11pt;
      padding: 4px 6px;
      display: inline-block;
      margin: 2px;
   }

   /* Footer */
   #footer {
      padding: 15px 10px;
      font-size: 10px;
   }

   /* Links */
   a {
      word-wrap: break-word;
      overflow-wrap: break-word;
   }

   /* Ensure images don't overflow */
   img {
      max-width: 100%;
      height: auto;
   }

   /* Cards and containers - ensure spacing from screen edges */
   .card {
      margin-left: 0;
      margin-right: 0;
   }

   .card-body,
   .card-header,
   .card-footer {
      padding-left: 10px;
      padding-right: 10px;
   }

   /* Align all card content on mobile */
   /* Remove Bootstrap grid padding/margins so headings align with other card-body elements */
   .card-header .row,
   .card-body .row {
      margin-left: 0;
      margin-right: 0;
   }

   .card-header [class*="col-"],
   .card-body [class*="col-"] {
      padding-left: 0;
      padding-right: 0;
   }

   /* Force h3 headings to align with card-body content left edge */
   .card-header h3 {
      margin-left: -2px !important;
      padding-left: 0 !important;
      text-align: left;
   }

   /* Ensure the Bootstrap column containing the h3 has no padding */
   .card-header .col-lg-8 {
      padding-left: 0 !important;
      padding-right: 0 !important;
   }

   /* Force search input to align to the left edge like the h3 heading */
   .search-box #search-input {
      margin-left: -2px !important;
      text-align: left !important;
   }

   .search-box #search-input::placeholder {
      text-align: left !important;
   }

   /* Main content containers */
   .container,
   .container-fluid {
      padding-left: 10px;
      padding-right: 10px;
   }

   /* Search bars and form inputs */
   .search-box,
   .form-control,
   .form-select,
   input[type="text"],
   input[type="search"],
   input[type="email"],
   input[type="password"],
   textarea,
   select {
      margin-left: 0;
      margin-right: 0;
   }

   /* Search box in navigation - make responsive */
   /* Make search elements match card container width */
   .search-box {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box;
      padding: 0 !important;
      display: block !important;
   }

   .search-box form {
      width: 100%;
      max-width: 100%;
      display: block;
   }

   /* Stack the search elements vertically */
   .search-box .d-flex,
   .search-box .d-flex.align-items-center {
      flex-direction: column !important;
      align-items: stretch !important;
      width: 100% !important;
      max-width: 100% !important;
      gap: 10px;
   }

   /* Make dropdown full width - override inline style */
   .search-box .form-select,
   .search-box .form-select[name="ddlSearch"],
   .search-box select.form-select {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box;
   }

   /* Make search input full width - override inline style */
   .search-box #search-input,
   .search-box .search-input,
   .search-box input.form-control.search-input,
   .search-box input[type="search"] {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box;
   }

   /* Make Go button full width */
   .search-box #search-do,
   .search-box button.btn-primary {
      width: 100% !important;
      box-sizing: border-box;
   }
}

/* ============================================
   SMALL MOBILE DEVICES (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
   body {
      font-size: 8.5pt;
      padding-left: 15px;
      padding-right: 15px;
   }

   .title-main {
      font-size: 20px;
   }

   .title-sub {
      font-size: 1em;
   }

   h2 {
      font-size: 1.2em;
   }

   h3 {
      font-size: 1.1em;
   }

   .top-nav {
      font-size: 8.5pt;
      padding: 8px 0;
   }

   .top-nav a {
      padding: 0 3px;
      font-size: 8.5pt;
   }

   .leftNavUL li {
      font-size: 9pt;
   }

   .subNav {
      font-size: 8pt;
   }

   table.enpRpt,
   table.enpRptC,
   table.enpView,
   table.simpleTable {
      font-size: 8pt;
   }

   td.enpRptTitle {
      font-size: 12px;
      padding: 3px 4px;
   }

   td.enpRptLabel,
   td.enpRpt,
   td.enpViewLabel,
   td.enpView,
   td.simpleTableLabel,
   td.simpleTable {
      font-size: 8pt;
      padding: 3px 4px;
   }

   td.enpViewTitle,
   td.simpleTableTitle {
      font-size: 11px;
      padding: 3px 4px;
   }

   input.cjtBtn {
      font-size: 9pt;
      padding: 10px 12px;
   }

   .error,
   .message {
      font-size: 9pt;
      padding: 6px 8px;
   }

   .formError {
      font-size: 8pt;
      padding: 5px;
   }

   div.directoryLetters {
      font-size: 10pt;
   }

   a.directoryLetters {
      font-size: 10pt;
      padding: 3px 5px;
   }

   #footer {
      font-size: 9px;
      padding: 12px 8px;
   }

   /* Search box on extra small screens - reinforce full width styling */
   .search-box .d-flex,
   .search-box .d-flex.align-items-center {
      flex-direction: column !important;
      align-items: stretch !important;
   }

   .search-box .form-select,
   .search-box .form-select[name="ddlSearch"],
   .search-box select.form-select {
      width: 100% !important;
      margin-bottom: 0;
   }

   .search-box #search-input,
   .search-box .search-input,
   .search-box input.form-control.search-input,
   .search-box input[type="search"] {
      width: 100% !important;
      margin-bottom: 0;
   }

   .search-box #search-do,
   .search-box button.btn-primary {
      width: 100% !important;
      margin-bottom: 0;
   }
}

/* ============================================
   PREVENT HORIZONTAL SCROLLING
   ============================================ */
@media (max-width: 768px) {
   /* Ensure all containers are within viewport */
   .container,
   .container-fluid,
   [class*="col-"] {
      max-width: 100%;
      padding-left: 10px;
      padding-right: 10px;
   }

   /* Prevent horizontal scrolling with targeted overflow control */
   body {
      overflow-x: hidden;
   }

   /* Tables wrapper for horizontal scroll */
   .table-responsive {
      display: block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
   }
}