/* 
   MASTER HEADER STYLES
         .
      <link>   CSS,
         .
 */

/*   (    )  */
:root {
  --h-navy:   #08294d;
  --h-navy2:  #0f3b69;
  --h-sp-bg:  #0d4f8a;   /* Submit to SharePoint   */
  --h-sp-hov: #093e6e;
}

/*  Topbar  */
.topbar {
  height: 52px !important;
  background: var(--navy, var(--h-navy)) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 20px !important;
  gap: 12px !important;
  border-bottom: 2px solid var(--navy2, var(--h-navy2)) !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-sizing: border-box !important;
}

/*  Logo placeholder   ,    */
#topLogo {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/*  Brand block  */
.topbar .brand,
.topbar > div:not(.t-right):not(.actions):not(.topbar-right):not(#topLogo) {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.t-title, .topbar h1, .topbar .title h1 {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
.t-sub, .topbar p, .topbar .title p {
  color: rgba(255,255,255,.52) !important;
  font-size: 10px !important;
  margin: 1px 0 0 !important;
}

/*  Actions block  */
.t-right,
.topbar .actions,
.topbar .topbar-right {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex-shrink: 0;
}

/*  Status badge  */
.t-badge {
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid;
}
.badge-draft  { color: #f5c518; border-color: #f5c518; background: rgba(245,197,24,.12); }
.badge-ok     { color: #4db87a; border-color: #4db87a; background: rgba(77,184,122,.12); }
.badge-late   { color: #e07783; border-color: #e07783; background: rgba(224,119,131,.12); }

/*  Base header button (all btn variants in header)  */
.topbar button,
.tbtn,
.hbtn {
  border: 1px solid rgba(255,255,255,.26) !important;
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
  border-radius: 7px !important;
  padding: 6px 13px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: background .15s !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  line-height: 1 !important;
}
.topbar button:hover,
.tbtn:hover,
.hbtn:hover {
  background: rgba(255,255,255,.2) !important;
}

/*  OneDrive "Open Folder" button  */
.hbtn-od,
.btn.od,
.tbtn.od {
  /* inherits base  just needs the badge inside */
}
/* Badge inside OneDrive button */
.od-badge,
.topbar button .od-badge {
  background: #fff !important;
  color: #0078d4 !important;
  border-radius: 3px !important;
  padding: 1px 6px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}

/*  Submit to SharePoint button  */
.hbtn-sp,
.btn.sp,
.btn.primary,
.btn.ok,
.tbtn.ok {
  background: var(--h-sp-bg) !important;
  border-color: var(--h-sp-bg) !important;
  color: #fff !important;
}
.hbtn-sp:hover,
.btn.sp:hover,
.btn.primary:hover,
.btn.ok:hover,
.tbtn.ok:hover {
  background: var(--h-sp-hov) !important;
  border-color: var(--h-sp-hov) !important;
}

/*  Ghost / secondary buttons  */
.btn.ghost,
.tbtn.ghost {
  background: transparent !important;
  border-color: rgba(255,255,255,.18) !important;
}
.btn.ghost:hover,
.tbtn.ghost:hover {
  background: rgba(255,255,255,.12) !important;
}

/*  Excel download button  */
.btn.excel {
  background: rgba(33,115,70,.6) !important;
  border-color: rgba(33,115,70,.8) !important;
}
.btn.excel:hover {
  background: rgba(33,115,70,.85) !important;
}

/*  Dark mode: topbar stays the same (already dark)  */
body.dark .topbar {
  background: var(--navy, var(--h-navy)) !important;
}

/*  Print: hide topbar  */
@media print {
  .topbar { display: none !important; }
}

/*  OneDrive toast popup  */
#od-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #08294d;
  color: #fff;
  border: 1px solid #1972bc;
  border-radius: 10px;
  padding: 12px 18px 12px 14px;
  font-family: Segoe UI, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease;
  max-width: 340px;
}
#od-toast.od-toast-visible {
  opacity: 1;
  transform: translateY(0);
}
#od-toast .od-toast-badge {
  background: #0078d4;
  color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  flex-shrink: 0;
}
#od-toast .od-toast-icon {
  font-size: 16px;
  flex-shrink: 0;
}
#od-toast .od-toast-text {
  line-height: 1.35;
}
#od-toast .od-toast-vessel {
  color: #7ec8f7;
  font-weight: 700;
}
#od-toast .od-toast-sub {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,.5);
  font-weight: 400;
  margin-top: 1px;
}