/* =========================
   LOGIN PAGE
   ========================= */
body.pb-login-body{
  margin:0;
  min-height:100vh;
  background-image:url('https://www.probd.org/wp-content/plugins/probd-browser-app/assets/images/bg_login_page.png');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:top center; /* top vertically, center horizontally */
}

/* Hide any theme chrome on login as a fallback */
body.pb-login-body .site-header,
body.pb-login-body .main-header-bar,
body.pb-login-body .ast-above-header,
body.pb-login-body .ast-below-header,
body.pb-login-body .ast-breadcrumbs,
body.pb-login-body .entry-header,
body.pb-login-body .site-footer,
body.pb-login-body #colophon{ display:none !important; }

/* Remove theme padding on login */
body.pb-login-body #content,
body.pb-login-body .site-content,
body.pb-login-body .entry-content{ padding-top:0 !important; }

/* Center login form horizontally; anchor ~2/3 viewport vertically */
.pb-login-wrap{
  position:relative;
  width:100%;
  height:100vh;
}
.pb-login-form{
  position:absolute;
  left:50%;
  top:50vh; /* ~2/3 visual anchor */
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,.85);
  padding:24px 32px;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  min-width:320px;
  max-width:92vw;
}
.pb-login-form label{ display:block; margin:10px 0 4px; font-weight:600; }
.pb-login-form input{ width:100%; padding:10px; }
.pb-login-form button{ margin-top:14px; padding:10px 16px; width:100%; }
.pb-login-msg{ margin-top:10px; min-height:20px; }

/* =========================
   CONTENT APP ([pb_content])
   ========================= */

/* Kill Astra header/footer/title and spacing on app pages */
body.pb-app-no-chrome header.site-header,
body.pb-app-no-chrome .main-header-bar,
body.pb-app-no-chrome .ast-above-header,
body.pb-app-no-chrome .ast-below-header,
body.pb-app-no-chrome .ast-breadcrumbs,
body.pb-app-no-chrome .entry-header,
body.pb-app-no-chrome footer.site-footer,
body.pb-app-no-chrome #colophon{ display:none !important; }

body.pb-app-no-chrome .site-content,
body.pb-app-no-chrome #content,
body.pb-app-no-chrome .content-area,
body.pb-app-no-chrome .ast-container,
body.pb-app-no-chrome main#main,
body.pb-app-no-chrome #primary,
body.pb-app-no-chrome .hentry,
body.pb-app-no-chrome .entry-content{
  margin:0 !important;
  padding:0 !important;
  max-width:100% !important;
}

/* Background for all pages EXCEPT the login page.
   Sits behind banner/menu/content. */
body:not(.pb-login-body){
  background: url("https://www.probd.org/wp-content/plugins/probd-browser-app/assets/images/bg_soft_colour_curve.png")
              no-repeat center top fixed;
  background-size: cover;
  background-color: #eaf4ff; /* fallback */
}

/* ===== Banner (top) ===== */
.pb-banner{
  background-image:url('https://www.probd.org/wp-content/plugins/probd-browser-app/assets/images/banner_connected_dots.png');
  background-repeat:no-repeat;
  background-position:top center;
  background-size:cover;
  color:#fff;
  width:100%;
  height:70px;
  position:relative;
  margin-top:0 !important;

  /* Key: isolate stacking so dropdowns layer cleanly over content */
  isolation:isolate;
  z-index:10;
}
.pb-banner-inner{
  position:relative;
  height:100%;
  max-width:1200px;
  margin:0 auto;
}
.pb-brand{
  position:absolute; left:16px; top:50%;
  transform:translateY(-50%);
  display:flex; align-items:center;
}
.pb-logo{ height:56px; width:auto; display:block; }

/* Menu centered, placed at ~2/3 of banner height */
.pb-nav{
  position:absolute; left:50%; top:66.666%;
  transform:translate(-50%,-50%);
  width:min(90%,900px);
}
.pb-menu{
  list-style:none; margin:0; padding:0;
  display:flex; justify-content:space-evenly; align-items:center;
}
.pb-menu>li{ position:relative; }
.pb-menu>li>a{
  display:block; padding:10px 12px;
  color:#fff; text-decoration:none; font-weight:600; line-height:1;
  border-radius:6px;
}
.pb-menu>li>a:hover, .pb-menu>li>a:focus{ background:rgba(255,255,255,.18); }

/* Submenus (Report/User) — crisp, opaque, on top */
.pb-menu .has-sub{ position:relative; }
.pb-menu .pb-sub{
  position:absolute; top:calc(100% + 6px); left:0;
  min-width:200px; padding:6px 0; border-radius:10px;
  background:#0b2f44; color:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.12);
  z-index:10000;

  /* ensure no blurs/filters */
  filter:none !important; -webkit-filter:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;

  display:none;
}
.pb-menu .has-sub:hover .pb-sub,
.pb-menu .has-sub:focus-within .pb-sub{ display:block; }
.pb-menu .pb-sub>li{ white-space:nowrap; }
.pb-menu .pb-sub>li>a{
  display:block; padding:10px 14px; color:#fff; text-decoration:none; font-weight:600;
}
.pb-menu .pb-sub>li>a:hover, .pb-menu .pb-sub>li>a:focus{
  background:rgba(255,255,255,.12);
}

/* ===== Page container (content area) ===== */


.pb-container{
  position:relative; z-index:1; /* above page bg */
  background:#ffffff;     /* solid for readability */
  /*background:rgba(255, 255, 255, 0.85);*/  /* 85% white, 15% transparent */
  border-radius:10px;
  padding:20px;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
  /* Remove any blur/glass to keep overlays crisp */
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  max-width:100% !important;
  width:100%;
  margin:0;
}


/* ===== Tabs visibility ===== */
.pb-tab{ display:none; }
.pb-tab.active{ display:block; }

/* ===== Top grid: preview (left) + info/search (right) ===== */
.pb-section-title{ font-weight:700; margin:16px 0 10px; }
.pb-content-top{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:16px;
  padding:12px 0;
  align-items:stretch; /* equalize heights */
}
.pb-subtitle{ font-weight:600; margin-bottom:6px; }

/* --- Fixed preview frame; content auto-fit inside --- */
.pb-preview{ display:flex; flex-direction:column; min-height:320px; }
#pb-preview-box{
  position:relative;
  height:320px;            /* fixed; does not grow with content */
  overflow:hidden;
  display:block;
  padding:0;
}
/* Inner wrapper that fills the frame and centers its child */
.pb-preview-media{
  position:absolute;
  inset:6px;               /* visual padding/border */
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid #ccc;
}
/* Images & videos shrink to fit, keep aspect ratio */
.pb-preview-media img,
.pb-preview-media video{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
/* PDFs/other docs via iframe fully occupy the box with own scrollbars */
.pb-preview-media iframe{
  width:100%;
  height:100%;
  border:0;
}

/* --- Info + search column matches preview height --- */
.pb-meta{ display:flex; flex-direction:column; min-height:320px; }
#pb-info{ flex:1 1 auto; min-height:0; width:100%; resize:none; }

/* Search row */
.pb-search-row{
  margin-top:8px; display:flex; align-items:center; gap:8px;
}
#btnSearch, #btnClear{ min-width:120px; padding:10px 18px; }

/* ===== Table ===== */
.pb-table-wrap{
  margin:14px 0 0; max-height:300px; overflow-y:auto; border:1px solid #ccc;
}
.pb-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed; /* fixed widths come from <colgroup> in template */
}
.pb-table th, .pb-table td{
  border-bottom:1px solid #e6e6e6; padding:6px; font-size:14px;
}
.pb-table thead th{
  position:sticky; top:0; background:#f4f7f9; z-index:2;
}

/* Keep most cells single-line; Description/Comment can wrap and preserve \n */
.pb-table td:not([data-k="ctnt_description"]):not([data-k="ctnt_comment"]){
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pb-table td[data-k="ctnt_description"],
.pb-table td[data-k="ctnt_comment"]{
  white-space:pre-wrap; line-height:1.25;
}

/* Inline select (Type/Platform/State) when editing */
.pb-table td select.pb-sel{
  width:100%;
  box-sizing:border-box;
  height:28px;
}

/* ===== Toolbar: Prev/Next (left) and actions (right) ===== */
.pb-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin:12px 2px 24px;
}
.pb-left, .pb-right{ display:inline-flex; align-items:center; gap:10px; }
.pb-total{ font-weight:700; }

/* ===== Buttons with PNG icons ===== */
.pb-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:6px; border:0;
  background:#0b66c3; color:#fff; font-weight:600; cursor:pointer;
}
.pb-btn:hover{ filter:brightness(1.05); }
.pb-btn:disabled{ opacity:.5; cursor:not-allowed; }
.pb-ico{
  width:18px; height:18px; display:inline-block; vertical-align:middle; object-fit:contain;
}