/* ---------------------------------------
   AKG Shared Header (Desktop + Mobile)
---------------------------------------- */

.akg-header {
  width: 100%;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  background: #ffffffcc;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border, #e2e8f0);
  position: sticky;
  top: 0;
  z-index: 50;
}

.akg-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.akg-back-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border, #e2e8f0);
  background: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.15s ease;
}
.akg-back-btn:hover { transform: translateY(-1px); }
.akg-back-btn:active { transform: translateY(0); }

.akg-title {
  font-size: 20px;
  font-weight: 900;
  color: var(--primary, #1e3a8a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.akg-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.akg-user-pill {
  padding: 7px 12px;
  background: rgba(37, 99, 235, 0.10);
  color: var(--primary, #1e3a8a);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Desktop action buttons */
.akg-actions-desktop {
  display: flex;
  align-items: center;
  gap: 10px;
}

.akg-btn {
  border: none;
  background: var(--primary, #1e3a8a);
  color: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.2s ease;
}
.akg-btn:hover {
  background: var(--primary-light, #3b5bdb);
  transform: translateY(-1px);
}

/* Hamburger (shown on mobile only) */
.akg-hamburger {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border, #e2e8f0);
  background: #ffffff;
  cursor: pointer;
  display: none; /* desktop hidden */
  align-items: center;
  justify-content: center;
}
.akg-hamburger:hover { transform: translateY(-1px); }

/* -----------------------
   Mobile menu drawer
------------------------ */
.akg-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: none;
  z-index: 9999;
}

.akg-menu-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-top: 1px solid var(--border, #e2e8f0);
  box-shadow: 0 -20px 60px rgba(0,0,0,0.25);
  padding: 14px 14px 28px 14px; /* bottom margin for phone */
  max-height: 78vh;
  overflow: auto;
}

.akg-menu-title {
  font-size: 13px;
  font-weight: 900;
  color: #0f172a;
  margin: 4px 2px 12px 2px;
}

.akg-menu-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.akg-menu-item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border, #e2e8f0);
  background: #f8fafc;
  color: #0f172a;
  padding: 12px 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.akg-menu-item:hover {
  background: #eef2ff;
}

.akg-menu-sep {
  height: 1px;
  background: var(--border, #e2e8f0);
  margin: 10px 0;
}

.akg-menu-bottom {
  margin-top: 10px;
  padding-bottom: 10px; /* extra breathing space */
}

.akg-menu-user {
  font-size: 12px;
  color: #475569;
  font-weight: 800;
  padding: 10px 6px 0 6px;
  word-break: break-all;
}

/* ---------------- Button Variants ---------------- */
/* Default (Primary) */
.akg-btn-primary{
  background:#1e3a8a;
  color:#fff;
}
.akg-btn-primary:hover{ background:#3b5bdb; }

/* Variant 1: Create / Highlight (Gold) */
.akg-btn-gold{
  background:#bb9900;
  color:#fff;
}
.akg-btn-gold:hover{ background:#a08000; }

/* Variant 2: Export / Dark (Black) */
.akg-btn-dark{
  background:#0f172a;
  color:#fff;
}
.akg-btn-dark:hover{ background:#161616; }

/* Variant 3: Neutral / Secondary (Gray) */
.akg-btn-gray{
  background:#64748b;
  color:#fff;
}
.akg-btn-gray:hover{ background:#475569; }

/* Variant 4: Basic */
.akg-btn-basic{
  background:#dbdbdb;
  color:#000000;
}
.akg-btn-basic:hover{ background:#bbbbbb; }

/* Variant 5: Save */
.akg-btn-save{
  background:#004e0a;
  color:#fff;
}
.akg-btn-save:hover{ background:#0eb427; }

/* Variant 6: Red */
.akg-btn-red{
  background:#9e0f0f;
  color:#fff;
}
.akg-btn-red:hover{ background:#e44545; }


.akg-header { box-sizing: border-box; }
/* -----------------------
   Responsive rules
------------------------ */
@media (max-width: 640px) {

  /* Force single row, no wrap */
  .akg-header{
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  /* Left side can shrink (title ellipsis), right side stays pinned */
  .akg-header-left{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .akg-header-right{
    flex: 0 0 auto !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Hide desktop cluster + email pill (as you wanted) */
  .akg-actions-desktop { display: none !important; }
  .akg-user-pill { display: none !important; }

  /* Ensure hamburger shows and never drops */
  .akg-hamburger{
    display: inline-flex !important;
    flex: 0 0 auto !important;
  }

  .akg-title{
    font-size: 18px;
    min-width: 0;
  }
}


/* ---------------- Variants override for mobile menu items ---------------- */
.akg-menu-item.akg-btn-primary{ background:#1e3a8a; border-color:#1e3a8a; color:#fff; }
.akg-menu-item.akg-btn-primary:hover{ background:#3b5bdb; }

.akg-menu-item.akg-btn-gold{ background:#bb9900; border-color:#bb9900; color:#fff; }
.akg-menu-item.akg-btn-gold:hover{ background:#a08000; }

.akg-menu-item.akg-btn-dark{ background:#0f172a; border-color:#0f172a; color:#fff; }
.akg-menu-item.akg-btn-dark:hover{ background:#161616; }

.akg-menu-item.akg-btn-gray{ background:#64748b; border-color:#64748b; color:#fff; }
.akg-menu-item.akg-btn-gray:hover{ background:#475569; }


/* ---------------- Desktop settings dropdown ---------------- */
.akg-settings-btn{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--border, #e2e8f0);
  background:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:0.15s ease;
}
.akg-settings-btn:hover{ transform:translateY(-1px); background:#f8fafc; }

.akg-settings-menu{
  position:absolute;
  right:18px;
  top:62px;
  width:280px;
  max-width:72vw;
  background:#fff;
  border:1px solid var(--border, #e2e8f0);
  border-radius:16px;
  box-shadow:0 18px 60px rgba(15,23,42,0.18);
  padding:10px;
  display:none;
  z-index:200;
}
.akg-settings-menu.open{ display:block; }

.akg-settings-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.akg-settings-item{
  width:100%;
  text-align:left;
  border:1px solid var(--border, #e2e8f0);
  background:#f8fafc;
  color:#0f172a;
  padding:11px 12px;
  border-radius:14px;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.akg-settings-item:hover{ background:#eef2ff; }

.akg-settings-sep{
  height:1px;
  background:var(--border, #e2e8f0);
  margin:2px 0;
}

.akg-settings-item.akg-danger{
  background:#fee2e2;
  border-color:#fecaca;
  color:#991b1b;
}
.akg-settings-item.akg-danger:hover{
  background:#fecaca;
}

.akg-settings-email{
  margin-top:2px;
  font-size:12px;
  color:#475569;
  font-weight:800;
  padding:6px 6px 2px 6px;
  word-break:break-all;
}


/* --------------------------------------------------
   HARD OVERRIDES (to defeat any global.css conflicts)
   Put this at the END of akg_header.css
--------------------------------------------------- */

.akg-header{
  display:flex !important;
  box-sizing:border-box !important;
}

@media (max-width: 640px){

  .akg-header{
    flex-wrap:nowrap !important;
    justify-content:flex-start !important; /* we use margin-left:auto on right */
    align-items:center !important;
  }

  .akg-header-left{
    flex:1 1 auto !important;
    min-width:0 !important;
  }

  .akg-header-right{
    flex:0 0 auto !important;
    width:auto !important;            /* critical: prevents full-width row */
    max-width:none !important;
    margin-left:auto !important;      /* pins right-side to the right */
    justify-content:flex-end !important;
    align-items:center !important;
  }

  .akg-actions-desktop{ display:none !important; }
  .akg-user-pill{ display:none !important; }

  .akg-hamburger{
    display:inline-flex !important;
    flex:0 0 auto !important;
    margin:0 !important;
  }
}
/* =====================================================================
   FORCE FULL-BLEED HEADER (even if page/body has max-width + centered)
   ===================================================================== */
#akgHeaderMount{
  width: 100% !important;
}

/* This "breaks out" of any centered/max-width parent */
.akg-header{
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* MOBILE tightening (single-line + no huge left gap) */
@media (max-width: 640px){

  /* Make header a strict 3-slot layout: left / center / right */
  .akg-header{
    display: grid !important;
    grid-template-columns: 34px 1fr 34px !important;
    align-items: center !important;

    padding: 10px 10px !important;
    gap: 8px !important;

    flex-wrap: nowrap !important; /* harmless now, but ok */
  }

  /* Flatten the wrappers so back/title/hamburger become direct grid items */
  .akg-header-left,
  .akg-header-right{
    display: contents !important;
  }

  /* Pin back button to left */
  .akg-back-btn{
    grid-column: 1 !important;
    justify-self: start !important;
    margin: 0 !important;

    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  /* Keep title in the center, single line with ellipsis */
  .akg-title{
    grid-column: 2 !important;
    justify-self: center !important;

    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    font-size: 16px !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  /* Hide desktop-only bits */
  .akg-actions-desktop{ display: none !important; }
  .akg-user-pill{ display: none !important; }

  /* Pin hamburger to right */
  .akg-hamburger{
    grid-column: 3 !important;
    justify-self: end !important;
    display: inline-flex !important;
    margin: 0 !important;

    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }
}

/* === FORCE STICKY HEADER (FIXED) === */
.akg-header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10000 !important;
}

/* push page content down so it doesn't hide under header */
body{
  padding-top: 70px; /* adjust if header height differs */
}