/* =========================================================
   [base] Global reset & layout
   ========================================================= */
:root { --radius: 14px; }

/* One box-sizing rule (replaces duplicates) */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #f6f7f9 !important;
  color: #111;
}
.center{width:100% ; margin-right:auto; margin-left:auto;}
.page {
  max-width: 1100px;
  margin: 24px auto;
  padding: 0 24px 24px;
}
/* max width */
.squize400 { max-width: 400px;}
.squize500 { max-width: 500px;}
.squize600 { max-width: 600px;}
.squize700 { max-width: 700px;}
.squize800 { max-width: 800px;}
.squize900 { max-width: 900px;}
.squize1000 { max-width: 1000px;}
.squize1100 { max-width: 1100px;}
.squize1200 { max-width:1200px;}

.botspace4 {margin-bottom:4px;}
.botspace8 {margin-bottom:8px;}
.botspace12 {margin-bottom:12px;}
.botspace20 {margin-bottom:20px;}
.botspace30 {margin-bottom:30px;}
.botspace40 {margin-bottom:40px;}

/* min width */
.wmin140 {min-width:140px;}
.wmin150 {min-width:150px;}
/*left margin */
.left2 {margin-left:2px !important;}
.left4 {margin-left:4px !important;}
.left6 {margin-left:6px !important;}
.left8 {margin-left:8px !important;}
.left10 {margin-left:10px !important;}
.left12 {margin-left:12px !important;}

/* Container sizes (as uploaded) */
@media (min-width: 1400px) { .container { max-width: 1320px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width:  992px) { .container { max-width:  960px; } }
@media (min-width:  768px) { .container { max-width:  720px; } }
@media (min-width:  576px) { .container { max-width:  540px; } }

.container  {
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left:  calc(var(--bs-gutter-x) * .5);
  margin-right: auto;
  margin-left:  auto;
}

/* =========================================================
   [fonts]
   ========================================================= */
.mb-2 {
  font-weight: 500;
  font-size: 22px;
  color:#666;
}
.small {font-size:16px!important; color: #716f6f  !important;}
.bluex {color: #01a8f9 !important;}
.bluex a {color: #01a8f9 !important;}
/* =========================================================
   [header] Top black bar
   ========================================================= */
.topbar {
  background: #111;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.topbar .wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand-link {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .2px;
}

/* nav fix */
.nav {
  --bs-nav-link-padding-x: 0 !important;
  --bs-nav-link-padding-y: 0!important;
  --bs-nav-link-font-weight: 0!important;
  --bs-nav-link-color: none!important;
  --bs-nav-link-hover-color: none!important;
  --bs-nav-link-disabled-color: none!important;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav { display: flex; align-items: center; gap: 14px; }
.nav-link {
  color: #ddd !important;
  text-decoration: none;
  font-weight: 500;
}
.nav-link:hover { color: #fff !important; }
.nav .sep { color: #666; }
.nav .hello { color: #aaa; margin-right: 6px; }
.nav-link.login  { color: #2e7d32; }  /* green */
.nav-link.logout { color: #e53935; }  /* red */






/* =========================================================
   [buttons] simple CTA styles
   ========================================================= */
.btn {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 4px;
  background: #009fff;
  color: #fff;
  text-decoration: none;
  border: none;
}
.btnx:hover { background:#53beff; color:#FFFFFF;}
.btn:hover { opacity: .9; color:#FFFFFF; }
.btn.btn-alt  { background: #666; }
.btn-success  { background-color: green; }
.dashbtn {color:white; text-decoration: none;}

/* =========================================================
   [index page]
   ========================================================= */
.card {
  background: #fff;
  border-radius: 6px;
  padding: 6px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.02) !important;
  border: 1px solid #D3D3D3!important;
  height:100% !important;
  color:#666 !important;
}

.card-body {
  flex: 1 1 auto;
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
  color: var(--bs-card-color);
}
/* =========================================================
   [help page]
   ========================================================= */

#help-form .form-label { font-weight: 600; margin-bottom: 6px; }
#help-form .form-control {
  border-radius: 4px;
  border: 1px solid #d3d3d3;
}
#help-form .form-control:focus {
  border-color: #111;
  box-shadow: 0 0 0 0.15rem rgba(17,17,17,.08);
}
#help-form textarea { min-height: 180px; resize: vertical; }

/* keep spacing tight and align buttons to the right */
#help-form .row.g-3 > [class*="col-"] { margin-bottom: 4px; }
#help-form .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }


/* Horizontal grid form: label column on the left, fields on the right */
#help-form .form-grid {
  display: grid;
  grid-template-columns: 180px 1fr; /* label | field */
  gap: 10px 16px;                   /* row gap | column gap */
  align-items: center;              /* label baseline with fields */
}

#help-form .fg-label {
  text-align: left;
  font-weight: 600;
  margin: 0;
}

#help-form .fg-field {
  width: 100%;
}

#help-form .form-control {
  border-radius: 2px;
  border: 1px solid #d3d3d3;
  padding: 6px;
  color: #666;
  font-size: 15px;
}
/* Make the Message label + textarea span full width */
#help-form .form-grid .fg-label[for="help-message"],
#help-form #help-message {
  grid-column: 1 / -1;
}
#help-form #help-message { width: 100%; min-height: 220px; }


/* =========================================================
   [footer] Footer links + copyright
   ========================================================= */
.site-footer {
 
  border-top: 1px solid #e8e8e8;

}
.site-footer .wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 24px;
}

.flinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  justify-content: center;        /* center the link block */
}
.flinks a {
  color: #333;
  text-decoration: none;
  letter-spacing: .2px;
}
.flinks a:hover { color: #000; }
.flinks .sep     { color: #999; }
.flinks .xlogin  { color: #2e7d32; }
.flinks .logout  { color: #e53935; }
.copy {
  margin: 0;
  color: #666;
  font-size: 14px;
}
/* center footer text */
.site-footer .wrap,
.copy { text-align: center; }
/* =========================================================
   [layout] Sticky footer via wrapper (no width side-effects)
   ========================================================= */
.site      { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1 0 auto; }




/* Mobile hamburger menu styles - Enhanced for Bootstrap override */
.topbar .hamburger {
  display: none; /* Hidden on desktop */
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  color: #fff; /* Matches topbar text */
  margin-left: auto; /* Push to right */
}

.topbar .nav-menu {
  display: flex;
  align-items: center;
  gap: 14px; /* Matches existing .nav gap */
}

@media (max-width: 768px) {
  .topbar .wrap {
    position: relative !important; /* Enable absolute positioning */
  }
  
  .topbar .hamburger {
    display: block !important; /* Show on mobile */
    margin-left: auto !important;
  }
  
  .topbar .nav {
    display: none !important; /* Hide entire nav when closed */
  }
  
  .topbar.nav-open .nav {
    display: block !important; /* Show when open */
  }
  
  .topbar .nav-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #111 !important; /* Matches topbar */
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    z-index: 1000 !important; /* Above content */
    transform: translateY(-100%) !important; /* Hidden off-screen */
    transition: transform 0.3s ease-in-out !important;
  }
  
  .topbar.nav-open .nav-menu {
    transform: translateY(0) !important; /* Slide down */
  }
  
  .topbar .nav-menu .nav-link,
  .topbar .nav-menu .hello {
    width: 100% !important;
    padding: 12px 0 !important;
    text-align: left !important;
  }
  
  .topbar .nav-menu .sep {
    display: none !important; /* Hide separator */
  }
  
  .topbar .nav-menu .hello {
    color: #ddd !important;
    margin-right: 0 !important;
    padding: 12px 0 !important;
  }
  
  .nav-link.login { color: #2e7d32 !important; }
  .nav-link.logout { color: #e53935 !important; }
}

/* Mobile hover/focus effects */
@media (max-width: 768px) {
  .topbar .nav-menu .nav-link {
    cursor: pointer;
  }
  
  .topbar .nav-menu .nav-link:hover,
  .topbar .nav-menu .nav-link:focus {
    background: rgba(255, 255, 255, 0.05) !important;
  }
}