/* ===== Brand palette from the logo ===== */
:root{
  --brand-green: #2e7d32;   /* safari green */
  --brand-orange:#f36c21;   /* sunset orange */
  --brand-dark:  #0f2a17;   /* deep green for header bg */
}

/* ===== Header ===== */
.admin-header{
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center;
  background: linear-gradient(90deg, var(--brand-dark) 0%, #173520 100%);
  color: #fff;
  padding: 12px 20px; min-height: 60px;
}
.header-left,.header-right{ display:flex; align-items:center; gap:16px; }

/* ===== Hamburger ===== */
.hamburger-btn{
  display:none; background:none; border:0; color:#fff;
  font-size:20px; padding:6px; margin-right:6px; border-radius:8px; cursor:pointer;
}
.hamburger-btn:hover{ background: rgba(255,255,255,.08); }

/* ===== Logo ===== */
.logo{
  display:flex; align-items:center; gap:10px; white-space:nowrap;
  text-decoration:none; color: var(--brand-orange);   /* accent matches logo */
  font-weight:700; font-size:20px;
}
.logo-img{ height:32px; width:auto; display:block; object-fit:contain; background:transparent; }
.brand-text{ font-size:18px; font-weight:700; color:#fff; letter-spacing:.2px; }

/* ===== Right cluster ===== */
.header-right{ gap:22px; margin-left:auto; display:flex; align-items:center; }

/* Time: no background anywhere */
.datetime{
  color:#e3efe7;                  /* light greenish for contrast */
  font-size:14px;
  white-space:nowrap;
  padding:0;                      /* removed chip */
  border-radius:0;
  background:transparent;
}

.profile-group{ display:flex; align-items:center; gap:12px; }

/* ===== Profile ===== */
.profile-dropdown{ position:relative; display:inline-flex; align-items:center; }
.profile-trigger{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:#fff; border:0; cursor:pointer; padding:6px 10px; border-radius:10px;
}
.profile-dropdown:hover .profile-trigger,
.profile-dropdown:focus-within .profile-trigger{ background: rgba(255,255,255,.12); }
.profile-dropdown i{ font-size:20px; color: var(--brand-orange); }  /* icon in logo orange */
.username{ font-weight:500; color:#fff; }

/* ===== Dropdown ===== */
.dropdown-content{
  position:absolute; right:0; top:calc(100% + 10px);
  min-width:200px; background:#fff; color:#333; border-radius:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.18); overflow:hidden; z-index:1100;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.profile-dropdown:hover .dropdown-content,
.profile-dropdown:focus-within .dropdown-content,
.profile-dropdown.open .dropdown-content{
  opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s;
}
.dropdown-content a{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; color:#333; text-decoration:none; font-size:14px;
  border-bottom:1px solid #f0f0f0;
}
.dropdown-content a:last-child{ border-bottom:none; }
.dropdown-content a i{ font-size:16px; color:#555; }
.dropdown-content a:hover{ background:#f7f7f7; }

/* ===== Backdrop for mobile (tap outside) ===== */
#app-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:900; }
@media (min-width:769px){ #app-backdrop{ display:none !important; } }

/* ===== Mobile layout ===== */
@media (max-width:768px){
  .admin-header{ flex-wrap:nowrap; }
  .hamburger-btn{ display:inline-flex; width:34px; height:34px; }
  .logo-img{ height:24px; }
  .brand-text{ display:none; }

  /* profile at far right, time just before it */
  .header-right{ justify-content:flex-end; gap:8px; min-width:0; }
  .datetime{ order:1; font-size:12px; }
  .profile-group{ order:2; }

  /* icon-only profile, no background */
  .username{ display:none; }
  .profile-trigger{ padding:0; width:36px; height:36px; border-radius:8px; background:transparent; }
  .profile-dropdown:hover .profile-trigger,
  .profile-dropdown:focus-within .profile-trigger{ background:transparent; }

  .dropdown-content{ right:-8px; top:44px; min-width:190px; }
}

/* Very small phones */
@media (max-width:400px){
  .datetime{ font-size:11px; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .dropdown-content, .hamburger-btn{ transition:none; }
}