:root{
  --primary-light: #d9eefc;
  --primary: #3aa0ff;
  --primary-dark: #1e73d1;
}

/* Offcanvas color configuration */
:root{
  --offcanvas-wipe-rgb: 58,160,255; /* RGB used for gradient wipe */
  --offcanvas-wipe-opacity: 0.14; /* default opacity for wipe */
  --offcanvas-press-bg: #1e73d1; /* pressed background on mobile */
  --offcanvas-press-color: #ffffff; /* pressed text color on mobile */
  --logout-color: #b02a2a; /* logout red */
}

body{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg, var(--primary-light) 0%, #f8fbff 60%);
  font-size: 17px; /* larger base for mobile readability */
  line-height: 1.5;
  margin: 0; /* remove default browser margin that can cause right gaps on mobile */
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

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

/* Dashboard headings */
.welcome-heading{ font-size:1.5rem; margin:0 0 .25rem 0; }
.choose-subtitle{
  font-variant-caps: small-caps;
  text-transform: lowercase;
  font-size: 1.125rem; /* ~3/4 of welcome */
  margin: 0 0 1rem 0;
  color: inherit;
}

/* Reduce font size for select dropdowns used in dashboard (email list) to better match option labels */
#emailListWrapper .form-select{
  font-size: 0.8rem;
  padding-top: .32rem;
  padding-bottom: .32rem;
}
#emailListWrapper .form-select option{
  font-size: 0.8rem;
}

.card-title{ color: var(--primary-dark); }
.page-heading{
  padding-left: 10px;
  padding-right: 10px;
}

input.form-control{
  border-radius: .6rem;
  border: 1px solid rgba(30,115,209,0.15);
  box-shadow: 0 1px 0 rgba(60,160,255,0.03) inset;
}

button.btn-primary{
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
  border: none;
  border-radius: .6rem;
  padding: .75rem 1rem;
}

/* small responsiveness */
@media (max-width: 576px){
  .card{ margin: 0; }
}

/* floating mobile back button */
.mobile-back-btn{
  position: fixed;
  left: 1rem;
  bottom: 1.2rem;
  z-index: 1200;
  border-radius: 999px;
  width: 44px;
  height: 44px;
  display: none; /* shown by JS on small screens */
  background: var(--primary);
  color: white;
  border: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  font-weight: 600;
}

@media (max-width: 768px){
  .mobile-back-btn{ display: block; }
}

/* header logo sizing */
.header-logo{
  max-height:48px;
  display:block;
  margin:0 auto;
}

@media (max-width:576px){
  .header-logo{ max-height:40px; }
}

/* hamburger/menu button in header */
.hamburger-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width:40px;
  height:40px;
  padding:0.25rem;
}
.hamburger-icon{ display:block; }

/* username label truncation and icon */
.user-icon{ display:inline-block; vertical-align:middle; }
.username-label{
  display:inline-block;
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-left:0.5rem;
  vertical-align:middle;
}
@media (max-width:576px){
  .username-label{ display:none; }
}

/* Header: full-width white background and symmetric padding on mobile */
.navbar{
  background-color: #fff !important;
  padding-left: 0;
  padding-right: 0;
}
.navbar .container{
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}
.navbar .nav-left,
.navbar .nav-right{
  flex: 1 1 0;
}
.navbar .nav-center{
  flex: 0 0 auto;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
/* header padding */
.navbar .container{
  padding-left: 10px;
  padding-right: 10px;
}
/* tighten space below navbar on dashboard */
body.dashboard-page main{
  margin-top: 10px;
}
body.dashboard-page .card > .card-body{
  padding-top: 0;
}

/* Login page card flush to edges */
.login-card{
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

/* Dashboard input emphasis */
body.dashboard-page input.form-control,
body.dashboard-page textarea.form-control{
  background: #e9f4ff;
  border: 1px solid rgba(30,115,209,0.4);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  color: #4a4a4a;
  border-radius: 0.6rem;
}
body.dashboard-page input.form-control::placeholder,
body.dashboard-page textarea.form-control::placeholder{
  color: #9aa3ad;
}
body.dashboard-page input.form-control:focus,
body.dashboard-page textarea.form-control:focus{
  border-color: rgba(30,115,209,0.75);
  box-shadow: 0 0 0 3px rgba(58,160,255,0.15);
}

/* Full-bleed layout defaults */
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm{
  --bs-gutter-x: 0;
  width: 100%;
  max-width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.row > *{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Base card styling; page-card targets main content cards */
.card{
  width: 100%;
  margin: 0;
}
.page-card{
  border-radius: 0;
  border: none;
  box-shadow: none;
}
.page-card > .card-body{
  padding: 0 10px;
}
.page-card #initialStage,
.page-card #nextStage{
  padding-left: 10px;
  padding-right: 10px;
}

/* Manage users: tighten list item padding */
.manage-users-list .list-group-item{
  padding-left: 0;
  padding-right: 0;
}
.manage-users-page .form-check{
  padding-left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0;
}
.manage-users-page .form-check-input{
  margin-left: 0;
}

/* Scheduled posts: remove horizontal padding in list items */
.scheduled-posts-list .list-group-item{
  padding-left: 0;
  padding-right: 0;
}

/* Remove default left padding on form-check */
.form-check{
  padding-left: 0 !important;
}

/* Restore padding for form checks inside page cards (for content alignment) */
.page-card .form-check{
  padding-left: 10px !important;
}
.page-card .form-check-input{
  margin-left: 0;
}
#saveHashtags + .form-check-label{
  font-size: 0.85rem;
}
.manage-users-page h6{
  font-size: 1.25rem;
  font-weight: 700;
}
.manage-users-page .form-check{
  padding-left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0;
}
.manage-users-page .form-check-input{
  margin-left: 0;
}

/* Keep account dropdown within viewport on small screens */
@media (max-width: 768px){
  .navbar .dropdown-menu-end{
    right: 0;
    left: auto;
    transform: none;
    max-width: calc(100vw - 2rem);
  }
}

/* Keep account dropdown within viewport on small screens */
@media (max-width: 768px){
  .navbar .dropdown-menu-end{
    right: 0;
    left: auto;
    transform: none;
    max-width: calc(100vw - 2rem);
  }
}

  /* Offcanvas modern item styles */
  .offcanvas .offcanvas-item{
    display:flex;
    align-items:center;
    padding:.6rem .75rem;
    border-radius: .5rem;
    text-decoration: none;
    color: #0b2a4a; /* darkish text */
    transition: transform 120ms ease, background-color 140ms ease, box-shadow 160ms ease;
  }
  .offcanvas .offcanvas-item{
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    /* small caps styling */
    font-variant-caps: small-caps;
    text-transform: lowercase; /* combine with small-caps for consistent look */
    letter-spacing: 0.02em;
  }

  /* gradient wipe pseudo-element */
  .offcanvas .offcanvas-item::before{
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 280ms cubic-bezier(.2,.9,.2,1);
    background: linear-gradient(90deg, rgba(var(--offcanvas-wipe-rgb), var(--offcanvas-wipe-opacity)) 0%, rgba(var(--offcanvas-wipe-rgb), calc(var(--offcanvas-wipe-opacity) / 2)) 30%, rgba(255,255,255,0.0) 100%);
    z-index: 0;
    pointer-events: none;
  }

  /* keep text above the wipe */
  .offcanvas .offcanvas-item *{ position: relative; z-index: 1; }

  /* hover (desktop) - wipe left -> right */
  .offcanvas .offcanvas-item:hover::before,
  .offcanvas .offcanvas-item.wipe::before{ transform: scaleX(1); }

  /* click / touch pressed animation */
  .offcanvas .offcanvas-item.clicked{
    transform: translateY(2px);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.06);
  }

  /* touch-pressed (mobile) - immediate color change instead of wipe */
  .offcanvas .offcanvas-item.touch-pressed{
    background: var(--offcanvas-press-bg);
    color: var(--offcanvas-press-color);
  }
  .offcanvas .offcanvas-item.touch-pressed *{ color: inherit; }
  .offcanvas .offcanvas-item.touch-pressed::before{ transform: scaleX(0); }

  /* offcanvas icons */
  .offcanvas-icon{ margin-right:.6rem; flex-shrink:0; color: inherit; }
  .offcanvas .offcanvas-item span{ display:inline-block; }

  /* Dropdown logout styling to match offcanvas items */
  .dropdown-item.menu-action{ 
    font-variant-caps: small-caps;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    color: inherit;
  }
  .dropdown-menu .dropdown-item.menu-action .dropdown-icon{ margin-right:.6rem; flex-shrink:0; color: inherit; }
  .dropdown-menu .dropdown-item.menu-action:hover, .dropdown-menu .dropdown-item.menu-action:focus{
    background: linear-gradient(90deg, rgba(var(--offcanvas-wipe-rgb), calc(var(--offcanvas-wipe-opacity) * 1.0)) 0%, rgba(var(--offcanvas-wipe-rgb), calc(var(--offcanvas-wipe-opacity) / 2)) 30%, rgba(255,255,255,0.0) 100%);
  }
  .dropdown-menu .dropdown-item.menu-action:active{
    transform: translateY(1px);
  }

  /* Make dropdown items use left->right wipe like offcanvas */
  .dropdown-menu .dropdown-item.menu-action{
    position: relative;
    overflow: hidden;
  }
  .dropdown-menu .dropdown-item.menu-action::before{
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 260ms cubic-bezier(.2,.9,.2,1);
    background: linear-gradient(90deg, rgba(var(--offcanvas-wipe-rgb), var(--offcanvas-wipe-opacity)) 0%, rgba(var(--offcanvas-wipe-rgb), calc(var(--offcanvas-wipe-opacity) / 2)) 30%, rgba(255,255,255,0.0) 100%);
    z-index: 0;
    pointer-events: none;
  }
  .dropdown-menu .dropdown-item.menu-action *{ position: relative; z-index: 1; }
  .dropdown-menu .dropdown-item.menu-action:hover::before,
  .dropdown-menu .dropdown-item.menu-action:focus::before{ transform: scaleX(1); }

  /* Logout-specific color */
  .dropdown-menu .dropdown-item.logout-action{ color: var(--logout-color); }
  .dropdown-menu .dropdown-item.logout-action:hover,
  .dropdown-menu .dropdown-item.logout-action:focus{ color: var(--logout-color); }

  /* Make logout use the same simple dropdown hover as other items (no gradient wipe) */
  .dropdown-menu .dropdown-item.logout-action::before{ display: none; }
  .dropdown-menu .dropdown-item.logout-action:hover,
  .dropdown-menu .dropdown-item.logout-action:focus{
    background-color: rgba(0,0,0,0.04);
    transform: none;
  }
  .offcanvas .offcanvas-item + hr{ margin-top:.5rem; margin-bottom:.5rem; }

  /* make logout stand out */
  .offcanvas .offcanvas-item.text-danger{ color: #b02a2a; }

/* Dashboard post options styling */
.post-section{ margin-bottom:1.25rem; }
.page-card #initialStage,
.page-card #nextStage{
  padding-left: 0;
  padding-right: 0;
}
.section-title{
  font-variant-caps: small-caps;
  text-transform: lowercase;
  font-weight: 700;
  color: var(--primary-dark);
  text-align: center;
    font-size: 1.25rem;
    line-height: 1.1;
  margin-bottom: 0.75rem;
  letter-spacing: 0.03em;
  }
  .option-label{
    display: flex;
    align-items: center;
    gap: .65rem;
    font-variant-caps: small-caps;
    text-transform: lowercase;
    font-weight: 500;
    color: var(--primary-dark);
    font-size: 1rem;
    margin-bottom: .65rem;
  }
  .option-label input[type="radio"], .option-label input[type="checkbox"]{
    margin: 0;
    width: 1.2em;
    height: 1.2em;
  }
  .option-label .social-icon{ width:20px; height:20px; margin-right:.5rem; flex-shrink:0; display:inline-block; vertical-align:middle; }
  .begin-btn{ display:block; margin:1.4rem auto 0; padding:.75rem 1.2rem; font-weight:700; border-radius:.65rem; font-size:1rem; }

@media (max-width: 576px){
  body{ font-size: 18px; }
  .card{ margin: 0; }
  .section-title{ font-size: 1.4rem; line-height: 1.15; }
  .option-label{ font-size: 1.1rem; }
  .option-label input[type="radio"], .option-label input[type="checkbox"]{ width: 1.3em; height: 1.3em; }
  .option-label .social-icon{ width:22px; height:22px; }
  .begin-btn{ width: 100%; }

  /* Force main cards to full-bleed on mobile */
  .page-card{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }
  /* Remove padding on all column classes */
  [class*="col-"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Ensure stage sections are full-width */
  .page-card #initialStage,
  .page-card #nextStage{
    width: 100% !important;
  }
}