/* =============================================================== */
/*  ANSGH.ONLINE – GLOBAL STYLESHEET (refined)                     */
/* =============================================================== */

/* 1. RESET & BASE ------------------------------------------------ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Segoe UI', sans-serif;
  background: #0A1F44;
  color: #FFFFFF;
  line-height: 1.4;
}
a {
  color: #FF7F00;
  text-decoration: none;
}
a:hover {
  color: #e67300;
}
input, select, button {
  font-family: inherit;
}

/* 2. AUTH PAGES & SINGLE-FORM PANELS ----------------------------- */
.login-container,
.signup-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0A1F44;
  padding: 2rem;
}

.auth-card {
  background: rgba(10,31,68,0.15);
  backdrop-filter: blur(4px);
  padding: 2.5rem 1.75rem;
  border-radius: 1.5rem;
  width: clamp(320px, 90vw, 430px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
  text-align: center;
}

/* stack label + input */
.form-login,
.form-signup {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.form-group label {
  margin-bottom: .5rem;
  font-weight: 600;
  color: #0A1F44;
  text-align: left;
}

.form-group input {
  padding: .85rem .95rem;
  border: 1px solid #ccd6f0;
  border-radius: .75rem;
  font-size: 1rem;
  color: #0A1F44;
}

/* orange submit button */
.btn-login,
.btn-signup {
  padding: .9rem 1.5rem;
  background: #FF7F00;
  color: #FFF;
  border: none;
  border-radius: .75rem;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.btn-login:hover,
.btn-signup:hover {
  background: #e67300;
}

/* “Don’t have an account?” text */
.auth-card .switch {
  margin-top: 1.5rem;
  font-size: .95rem;
}
.auth-card .switch a {
  color: #FF7F00;
}
.auth-card .switch a:hover {
  color: #e67300;
}
/* 2. AUTH PAGES & SINGLE-FORM PANELS ----------------------------- */
.login-container,
.signup-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0A1F44;
  padding: 2rem;
}

.auth-card {
  background: rgba(10,31,68,0.15);
  backdrop-filter: blur(4px);
  padding: 2.5rem 1.75rem;
  border-radius: 1.5rem;
  width: clamp(320px, 90vw, 430px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
  text-align: center;
}

.form-login,
.form-signup {
  width: 100%;
  max-width: 360px;    /* constrain form width */
  margin: 1rem auto 0; /* center inside auth-card */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.form-group label {
  margin-bottom: .5rem;
  font-weight: 600;
  color: #FFFFFF;      /* white label on dark background */
  text-align: left;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: .85rem .95rem;
  border: 1px solid #ccd6f0;
  border-radius: .75rem;
  background: #FFFFFF; /* white field */
  color: #0A1F44;
  font-size: 1rem;
}

/* remove Chrome’s yellow autofill background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0A1F44 !important;
  -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset !important;
}

.btn-login,
.btn-signup {
  width: 100%;
  padding: .9rem 1.5rem;
  background: #FF7F00;
  color: #FFFFFF;
  border: none;
  border-radius: .75rem;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}

.btn-login:hover,
.btn-signup:hover {
  background: #e67300;
}

.auth-card .switch {
  margin-top: 1.5rem;
  font-size: .95rem;
  color: #FFFFFF;
}

.auth-card .switch a {
  color: #FF7F00;
}

.auth-card .switch a:hover {
  color: #e67300;
}

/* 3. APP LAYOUT -------------------------------------------------- */
.app-container {
  display: flex;
  flex-direction: column;
  padding-bottom: 60px;
}
.main-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 4. PAGE TITLES ------------------------------------------------ */
.main-content h1,
.login-container h1,
.signup-container h1 {
  text-align: center;
  color: #FFFFFF;
  margin-bottom: 1.5rem;
  font-size: 1.7rem;
  font-weight: 700;
}

/* ———————————————————————————————————————————————— */
/* 6.x ADMIN STATS CARDS – CENTERED 4-COLUMN LAYOUT       */
/* ———————————————————————————————————————————————— */

.stats-cards {
  display: grid;
  gap: 1.5rem;
  justify-content: center;      /* center the entire grid */
  margin: 0 auto 2rem;          /* auto-center in its parent */
  padding: 0 1rem;              /* gutter on mobile */
  /* fluid min/max so it never stretches too wide or too narrow */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* On tablet → enforce 2 columns */
@media (min-width: 600px) {
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* On small desktop → enforce 3 columns */
@media (min-width: 900px) {
  .stats-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* On large desktop → enforce exactly 4 columns */
@media (min-width: 1200px) {
  .stats-cards {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1400px;          /* prevents an overly wide row */
  }
}

/* Individual cards keep your hover-lift styles */
.stats-cards .card {
  background: #FFFFFF;
  color: #0A1F44;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stats-cards .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.stats-cards .card .card-value {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.75rem;
  color: #1E345C;
}

.stats-cards .card .card-title {
  font-size: 0.75rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.stats-cards .card a {
  margin-top: auto;
  font-size: 0.9rem;
  color: #FF7F00;
  transition: color 0.2s;
}

.stats-cards .card a:hover {
  color: #e67300;
}
/* ———————————————————————————————————————————————— */
/* 6.x ADMIN STATS CARDS – CENTERED 4-COLUMN WITH GRADIENT */
/* ———————————————————————————————————————————————— */

.stats-cards .card {
  /* replace the flat white with a light gradient */
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #f3f7fc 50%,
    #e6efff 100%
  );
  color: #0A1F44;
  border-radius: 1rem;
  padding: 1.5rem;
  width: 100%;
  max-width: 260px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stats-cards .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* keep the rest of your typography and link styles as before */
.stats-cards .card .card-value { /* … */ }
.stats-cards .card .card-title { /* … */ }
.stats-cards .card a          { /* … */ }
/* 6. WALLET BALANCE CARD - stacked & centered ------------------ */
.balance-card {
  display: flex;                    
  /* switch to column layout */
  flex-direction: column;
  align-items: center;             
  /* center items horizontally */
  background: #FFFFFF;
  color: #0A1F44;
  border-radius: .9rem;
  padding: 1rem 1.5rem;
  margin: 0 auto 2rem;
  width: clamp(280px, 85%, 500px);
  text-align: center;               
  /* center text as a fallback */
}
.balance-card .card-title {
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: .5rem;           
  /* space down to the amount */
}
.balance-card .card-value {
  font-size: 2rem;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.2;
}

/* 7. DASHBOARD BUTTON GRID -------------------------------------- */
.action-buttons {
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: 720px;
  margin: 0 auto 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.action-btn {
  background: #FF7F00;
  color: #FFFFFF;
  border-radius: .9rem;
  padding: 1rem .5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.action-btn:hover {
  background: #e67300;
}
.action-btn i {
  font-style: normal;   /* no italics */
  font-size: 1.5rem;
  margin-bottom: .4rem;
}
.action-btn span {
  font-size: .95rem;
  font-weight: 600;
}

/* force 3 columns under 768px, 2 under 480px */
@media (max-width: 768px) {
  .action-buttons {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 480px) {
  .action-buttons {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 8. FOOTER ICON NAV -------------------------------------------- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #FFFFFF;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
  z-index: 100;
}
.footer-btn {
  background: none;
  color: #0A1F44;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .5rem;
  font-weight: 700;           /* bold labels */
}
.footer-btn i {
  font-style: normal;         /* no italics */
  display: block;
  font-size: 1.5rem;
  line-height: 1;
}
.footer-btn span {
  display: none;              /* hide text on mobile footer */
}
.footer-btn.active,
.footer-btn:hover {
  color: #FF7F00;
}

/* 9. TABLE/STYLES (orders, users, etc.) ------------------------- */
.table { … }
.table th, .table td { … }
.table th { … }
.table tr:last-child td {
  border-bottom: none;
}

/* ——— CENTER “Your Orders” HEADER & FILTERS ——— */
.main-content > h1 {
  text-align: center;
  margin-bottom: 1rem;
}

.main-content > form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-bottom: 1.5rem;
}

.main-content > form label,
.main-content > form select,
.main-content > form input,
.main-content > form button,
.main-content > form a {
  display: inline-block;
  margin: .25rem 0;
  vertical-align: middle;
}

.main-content > form select,
.main-content > form input,
.main-content > form button {
  padding: .4rem .6rem;
  border-radius: .5rem;
  border: 1px solid #ccd6f0;
}

.main-content > form button {
  background: #FF7F00;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background .2s;
}

.main-content > form button:hover {
  background: #e67300;
}

.main-content > form a {
  color: #FF7F00;
  text-decoration: none;
}

.main-content > form a:hover {
  color: #e67300;
}

/* 10. GLOBAL RESPONSIVE TWEAKS ---------------------------------- */
@media (max-width: 480px) {
  .dashboard-card {
    padding: 1.5rem;
    width: 90%;
  }
  .balance-card {
    width: 100%;
    padding: 1rem;
  }
  .recent {
    width: 100%;
    padding: 1rem;
  }
  .table {
    width: 100%;
    margin: 1rem auto;
  }
}