/* ============================================================
   QuickAccounts - Responsive layer (user area)
   Preserves the original theme:
   Green #006F37 | Page bg #EAEAEA | Grey #6A6A6A bars
   Row tint #D9FFD9 | Sidebar bg #E4E4E4
   Desktop keeps the original left-sidebar layout.
   <=768px: sidebar becomes a slide-in drawer, all blocks fluid.
   ============================================================ */

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

body.qa-no-scroll{
  overflow: hidden;
}

img{
  max-width: 100%;
  height: auto;
}

/* ================= Top grey navbar ================= */
nav.qa-navbar{
  background-color: #6A6A6A;
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 56px;
}

nav.qa-navbar .navbar-brand{
  background-color: #6A6A6A;
  min-height: 56px;
}

nav.qa-navbar .navbar-brand-logo{
  background-color: #6A6A6A;
  border-radius: 35px;
  max-height: 40px;
  align-self: center;
  margin: 6px 4px 6px 10px;
}

/* Keep the user menu reachable at EVERY size (Bulma hides .navbar-menu
   below its 1008px breakpoint, which would hide Profile/Logout on phones) */
nav.qa-navbar .navbar-menu{
  background-color: #6A6A6A;
  display: block;
  box-shadow: none;
  padding: 0;
}

nav.qa-navbar .navbar-end{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
}

nav.qa-navbar .navbar-item{
  background-color: transparent;
}

/* User dropdown: click-driven (touch friendly) instead of hover-only */
.qa-user-dd{
  position: relative;
}

.qa-user-dd .navbar-link{
  background-color: #6A6A6A;
  color: white;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 14px;
}

.qa-user-dd .navbar-link:hover,
.qa-user-dd.is-active .navbar-link{
  background-color: #585858;
}

.qa-user-dd .navbar-dropdown{
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  min-width: 210px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 8px 16px rgba(10,10,10,0.25);
  padding: 6px 0;
  z-index: 60;
}

.qa-user-dd.is-active .navbar-dropdown{
  display: block;
}

.qa-user-dd .navbar-dropdown .navbar-item{
  padding: 8px 16px;
  display: block;
}

.qa-user-dd .navbar-dropdown .navbar-item:hover{
  background-color: #f5f5f5;
}

.qa-user-dd .navbar-divider{
  display: block;
  background-color: #dbdbdb;
  border: none;
  height: 1px;
  margin: 4px 0;
}

.qa-brand-tag{
  color: white;
  text-align: center;
  flex: 1 1 auto;
  align-self: center;
  margin-left: 10px;
}

.qa-burger{
  display: none !important;
  align-self: center;
}

.qa-burger span{
  background-color: white;
}

.qa-user-link{
  background-color: #6A6A6A;
}

/* ================= Navbar layout =================
   Burger LEFT | logo + QuickAccounts CENTERED | profile icon RIGHT */

/* Bulma pushes .navbar-burger right with margin-left:auto - undo it */
nav.qa-navbar .navbar-burger.qa-burger{
  margin-left: 0;
  margin-right: 4px;
}

/* brand sits in the middle of the bar */
.qa-brand-center{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  gap: 10px;
  min-width: 0;
}

/* the KY-TECHNOLOGIES tag must not stretch inside the centered brand */
.qa-brand-center .qa-brand-tag{
  flex: 0 0 auto;
  margin-left: 0;
}

/* profile stays pinned to the right edge */
nav.qa-navbar .qa-user-dd{
  margin-left: auto;
  flex: 0 0 auto;
  align-self: center;
}

@media screen and (min-width: 769px){

  /* burger is desktop-hidden; center the brand on the full bar width */
  .qa-brand-center{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media screen and (max-width: 768px){

  /* mobile: icon-only profile button; the name shows inside the dropdown */
  .qa-user-name{
    display: none;
  }

  .qa-brand-center font[size="5"]{
    font-size: 15px;
  }
}

/* ================= Legacy layout blocks (now fluid) =================
   All rules below are scoped to body.qa-app, which is emitted ONLY by
   pages/header_user.php (the logged-in user area). This intentionally
   leaves the standalone login pages (index.php, kyaabel.php) untouched
   so their own inline styles keep working exactly as before. */

/* Was <div class="wrapper"> in header_user.php - plain white page canvas,
   exactly like the original design (main.main keeps the #EAEAEA panel). */
.qa-wrapper{
  background-color: #ffffff;
  min-height: 100vh;
  box-sizing: border-box;
  padding-bottom: 10px;
}

.qa-app #topbar{
  width: auto;
  max-width: 1100px;
  margin: 0 auto 10px;
  padding: 10px;
  list-style: none;
  /* NOTE: this file lives in pages/css/, so the path is ../assets/... */
  background: url('../assets/images/bg.jpg') 0 0;
  border-radius: 2px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: auto;
  border: 0px solid red;
  font-size: 15px;
  font-family: Arial;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  align-items: center;
}

#topbar_button{
  border: 1px solid #006F37;
  border-radius: 4px;
  font-size: 17px;
  color: white;
  background-color: #7C7C7C;
  height: 30px;
  width: 100px;
  max-width: 100%;
}

.qa-app #main_heading{
  background-color: #EAEAEA;
  border-radius: 3px;
  color: #006F37;
  height: auto;
  list-style: none;
  margin: 0 auto;
  border: 0px solid #006F37;
  font-size: 18px;
  font-family: Arial;
  width: auto;
  max-width: 1100px;
}

.qa-app #main_body{
  padding: 10px;
  width: auto;
  max-width: 1100px;
  background-color: white;
  min-height: 300px;
  max-height: 70vh;
  border-radius: 4px;
  border: 1px solid #006F37;
  margin: 0 auto 10px;
  font-weight: normal;
  overflow-y: auto;
  box-sizing: border-box;
}

.qa-app #main_container{
  padding: 10px;
  width: auto;
  max-width: 1100px;
  height: auto;
  margin: 0 auto 10px;
}

.qa-app #footer{
  background-color: #6A6A6A;
  color: white;
  font-size: 15px;
  font-family: Arial;
  font-weight: normal;
  width: auto;
  margin: 0;
  position: static;
  height: auto;
  padding: 15px 20px 25px;
  box-sizing: border-box;
}

/* ================= Sidebar / drawer ================= */
.qa-sidebar{
  background-color: #E4E4E4;
  z-index: 30;
}

.qa-backdrop{
  display: block;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.45);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.qa-backdrop.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* ================= Main content column ================= */
main.main{
  display: block;
}

/* ================= Utilities ================= */
.qa-topbar-stats{
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  align-items: center;
}

.qa-topbar-stats b{
  white-space: nowrap;
}

.qa-form-grid{
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 16px 20px;
  align-items: center;
  max-width: 700px;
  width: 100%;
}

.qa-form-grid .qa-label{
  font-weight: bold;
}

.qa-form-grid .input,
.qa-form-grid .select select{
  width: 100%;
  max-width: 270px;
  border: 1px solid #006F37;
}

.qa-form-grid .textarea{
  width: 100%;
  max-width: 100%;
  border: 1px solid #006F37;
}

.qa-table-wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.qa-table-wrap table{
  min-width: 680px;
}

.qa-banner{
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  height: auto !important;
  min-height: 40px;
  box-sizing: border-box;
}

.qa-banner a{
  color: white;
}

/* ------------------------------------------------------------
   Banners injected by AJAX connectors
   (user_connector.php / sms_withdraws_connector.php)
   These carry inline "width: 700px/500px" so they are forced
   fluid here without touching the connector logic.
   ------------------------------------------------------------ */
#list_cont > div{
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  height: auto !important;
  min-height: 40px;
  box-sizing: border-box;
}

#list_cont > div a{
  margin-left: 12px !important;
}

/* ============================================================
   DESKTOP: original fixed-sidebar layout
   ============================================================ */
@media screen and (min-width: 769px){

  .qa-sidebar{
    position: fixed;
    top: 58px;
    bottom: 0;
    left: 0;
    width: 250px;
    overflow-y: auto;
    padding-top: 4px;
  }

  .qa-app main.main{
    margin-left: 270px;
    margin-right: 15px;
    padding-bottom: 30px;
  }
}

/* ============================================================
   MOBILE / TABLET (<=768px): drawer sidebar, fluid content
   ============================================================ */
@media screen and (max-width: 768px){

  .qa-brand-tag{
    display: none;
  }

  nav.qa-navbar .navbar-brand > font[size="5"]{
    font-size: 15px;
    align-self: center;
  }

  nav.qa-navbar .navbar-menu{
    background-color: #585858;
  }

  .qa-user-dd .navbar-link{
    padding: 8px 10px;
  }

  .qa-user-dd .navbar-dropdown{
    right: 4px;
    left: auto;
    min-width: 190px;
  }

  .qa-burger{
    display: flex !important;
  }

  .qa-sidebar{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 260px;
    max-width: 82vw;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    padding-top: 14px;
    box-shadow: 2px 0 14px rgba(0,0,0,0.3);
    z-index: 70;
  }

  .qa-sidebar.is-open{
    transform: translateX(0);
  }

  .qa-backdrop{
    z-index: 65;
  }

  .qa-footer-inner{
    flex-direction: column;
  }

  .qa-footer-sep{
    display: none;
  }

  .qa-app main.main{
    margin-left: 8px;
    margin-right: 8px;
    padding-bottom: 20px;
  }

  .qa-app #topbar,
  .qa-app #main_heading,
  .qa-app #main_container,
  .qa-app #main_body,
  .qa-app #footer{
    max-width: 100% !important;
  }

  .qa-app #main_body{
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .qa-app #main_heading{
    font-size: 16px;
  }

  .qa-form-grid{
    grid-template-columns: 1fr;
    gap: 6px 0;
  }

  .qa-form-grid .input,
  .qa-form-grid .select select{
    max-width: 100%;
  }

  .qa-form-grid .qa-label{
    margin-top: 6px;
  }

  .qa-table-wrap table{
    min-width: 640px;
  }
}

.qa-footer-inner{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 95%;
  margin: 0 auto;
}

.qa-footer-col{
  margin: 0;
}

.qa-footer-sep{
  color: #D9FFD9;
}