/* ============================================================
   Ybarra Portal — consolidated stylesheet
   ============================================================
   Replaces all OceanWP / WP child-theme CSS. Class names in this
   file are intentionally generic (no wp-* / oceanwp-* prefixes).

   Sections:
     1. Tokens / reset
     2. Generic typography & layout
     3. Login page (.yp-*)
     4. Topbar (.portal_topbar*)
     5. Menu sections (.portal_section_*)
     6. Menu buttons (.portal_menu_button_*)
     7. Misc helpers
   ============================================================ */

/* 1. Tokens & reset --------------------------------------------------- */
:root{
  --bg:#f4f5f7;
  --bg-dark:#0f172a;
  --card:#ffffff;
  --muted:#6b7280;
  --text:#1f2937;
  --text-on-dark:#f9fafb;
  --border:rgba(15,23,42,.12);
  --accent:#b91c1c;
  --accent2:#ef4444;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --radius:10px;
  --radius-lg:14px;
  --tile:120px;        /* width/height of a menu button tile */
  --tile-label:28px;   /* height of the label strip inside the tile */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

/* 2. Generic typography & layout ------------------------------------- */
a{color:#1d4ed8;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0 0 .5em;font-weight:650;letter-spacing:.1px}
hr{border:none;border-top:1px solid var(--border);margin:1.25em 0}
p{margin:0 0 .9em}

/* Standard page wrapper used by portal pages */
.portal_wrap,
.portal-wrap{max-width:1180px;margin:0 auto;padding:0 16px 48px}

/* 3. Login page ------------------------------------------------------- */
/* The login page renders against the dark gradient. Everything else
   uses the lighter "app" background defined on body. */
body.yp-login{
  background:
    radial-gradient(1200px 600px at 20% 10%,rgba(239,68,68,.25),transparent),
    radial-gradient(900px 500px at 80% 30%,rgba(185,28,28,.25),transparent),
    var(--bg-dark);
  color:var(--text-on-dark);
}
.yp-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px}
.yp-card{
  width:420px;max-width:92vw;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:24px 22px;
  backdrop-filter:blur(8px);
  color:var(--text-on-dark);
}
.yp-title{margin:0 0 6px;font-size:28px;letter-spacing:.2px}
.yp-subtitle{margin:0 0 18px;color:#9ca3af}
.yp-label{display:block;margin:14px 0 6px;font-size:13px;color:#9ca3af}
.yp-input{
  margin-top:6px;width:100%;padding:12px;
  border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:rgba(17,24,39,.65);color:var(--text-on-dark);outline:none;
}
.yp-input:focus{border-color:rgba(239,68,68,.55);box-shadow:0 0 0 3px rgba(239,68,68,.18)}
.yp-button{
  margin-top:16px;width:100%;padding:12px;border-radius:12px;
  border:1px solid rgba(239,68,68,.35);
  background:linear-gradient(180deg,var(--accent2),var(--accent));
  color:white;font-weight:650;cursor:pointer;
}
.yp-button:hover{filter:brightness(1.04)}
.yp-alert{margin:12px 0;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.2)}
.yp-alert-error{border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.12)}

/* 4. Topbar ----------------------------------------------------------- */
.portal_topbar{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,#0f172a,#111827);
  color:var(--text-on-dark);
  padding:10px 18px;
  box-shadow:var(--shadow-sm);
}
.portal_topbar_title{
  font-size:16px;letter-spacing:.5px;font-weight:650;color:#fff;
}
.user-info-container{margin-left:auto;display:flex;align-items:center;gap:.75em}
.portal_topbar_info_box{display:inline-flex;align-items:center}
.portal_topbar_info{
  margin:0;color:#e5e7eb;font-size:14px;
  padding:6px 12px;border:1px solid rgba(255,255,255,.12);
  border-radius:999px;background:rgba(255,255,255,.04);
}

/* 5. Menu sections --------------------------------------------------- */
/* The legacy PHP outputs:
     <div class="portal_section_head" style="background-color:#xxx">
       <div class="portal_section_text"><b>NAME</b></div>
     </div>
     <div class="portal_section_body" style="background-color:#xxx">
       ... buttons ...
     </div>
   We give those structural CSS while preserving the inline color styles. */

.menu_container{
  max-width:1180px;
  margin:24px auto 0;
  padding:0 16px 64px;
}

.portal_section_head{
  border-radius:var(--radius) var(--radius) 0 0;
  padding:10px 18px;
  margin-top:24px;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.25);
  box-shadow:var(--shadow-sm);
}
.portal_section_text{
  font-size:14px;letter-spacing:1.2px;
  text-transform:uppercase;
}
.portal_section_text a{color:#fff;text-decoration:none}
.portal_section_text a:hover{text-decoration:underline}

/*
 * yp_menu_section_open() always emits this class, but it wraps two very
 * different kinds of content:
 *
 *   1. The main dashboard tile grid (children are .portal_menu_button_square).
 *      We want a centered flex row with gaps between the tiles.
 *
 *   2. Every other page (Manager Documents, Employee Resources, Secret
 *      Shopper, etc.) where it wraps stacked list rows emitted via
 *      listEntry()/catCheck() — plain 100%-wide divs with float:left
 *      columns, followed by a <div style="clear:both">.
 *
 * Default to plain block layout (case #2). Flex only kicks in for
 * sections that actually contain tiles (case #1). This prevents the
 * flex gap from adding unwanted vertical whitespace between rows in
 * the list-style views.
 */
.portal_section_body{
  border-radius:0 0 var(--radius) var(--radius);
  padding:14px 14px 16px;
  margin-bottom:14px;
  box-shadow:var(--shadow-sm);
}
.portal_section_body:has(> .portal_menu_button_square){
  display:flex;flex-wrap:wrap;gap:12px;
  justify-content:center;             /* center tiles in each row */
}

/* 6. Menu buttons ---------------------------------------------------- */
/* Markup (modernized):
     <a class="portal_menu_button_square" style="background-color:#xxx">
       <span class="portal_menu_button_icon" style="background-image:url(...)"></span>
       <span class="portal_menu_button_text">Label</span>
     </a>
   The icon and label are independent flex children, so the icon's
   background-image isn't competing with the tile's background-color
   inside a single `background:` shorthand. */

.portal_menu_button_square{
  display:inline-flex;
  flex-direction:column;
  align-items:stretch;
  width:var(--tile);
  height:var(--tile);
  border-radius:var(--radius);
  text-decoration:none;
  color:#fff;
  box-shadow:var(--shadow-sm);
  transition:transform .08s ease, box-shadow .12s ease, filter .12s ease;
  cursor:pointer;
  overflow:hidden;
  /* background-color is set inline per section theme */
}
.portal_menu_button_square:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  filter:brightness(1.05);
  text-decoration:none;
}
.portal_menu_button_square:active{transform:translateY(0)}

.portal_menu_button_icon{
  flex:1 1 auto;
  background-repeat:no-repeat;
  /*
   * Legacy PNGs are 100x100 but the opaque glyph sits in roughly y=3..62 of
   * that canvas (center ~y=32), with a transparent lower half that used to
   * hold baked-in label text.
   *
   * Percentage positioning can't visually center the glyph when the image
   * is only slightly larger than the tile (the offset range is tiny). So
   * we:
   *   - Scale height to ~90% of the icon span (~15% smaller than before).
   *   - Push the image down 16px from the top, which lands the glyph's
   *     visual center very close to the tile's center for every icon
   *     (glyph center ends up at ~45-46px vs the ~46px container center).
   *   - Anchoring at a pixel offset also guarantees the top of the glyph
   *     never falls behind the top edge of the tile regardless of which
   *     icon is rendered.
   */
  background-position:center 16px;
  background-size:auto 90%;
  margin:0;
}

.portal_menu_button_text{
  flex:0 0 var(--tile-label);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  font-size:12px;font-weight:650;
  letter-spacing:.3px;
  padding:0 6px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.45));
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  color:#fff;
}

/* User bar (provided by the layout, not by the legacy code) */
.yp-userbar{
  display:flex;align-items:center;
  gap:.75em;padding:6px 14px;
  background:#0b1220;color:#cbd5e1;font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
/*
 * The brand link is the "home" affordance at the left of the bar. Pushing
 * it with margin-right:auto pins it to the left edge while the remaining
 * items (name, sign-out) stay flush right, without us having to change
 * the flex `justify-content` mode.
 */
.yp-userbar-brand{
  color:#f9fafb;text-decoration:none;font-weight:700;
  letter-spacing:.3px;margin-right:auto;
  padding:2px 0;
}
.yp-userbar-brand:hover{color:#fff;text-decoration:underline}
.yp-userbar-name{color:#e5e7eb;font-weight:600}
.yp-userbar-link{
  color:#fca5a5;text-decoration:none;font-weight:600;
  padding:2px 10px;border:1px solid rgba(252,165,165,.35);border-radius:999px;
}
.yp-userbar-link:hover{background:rgba(252,165,165,.12);text-decoration:none;color:#fff}

/* 7. Misc helpers / banners ----------------------------------------- */
.access_level_banner{
  text-align:center;color:#fff;
  padding:6px 12px;margin:8px 0 16px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}

/* Used by the legacy bulletin/notice blocks */
.post-2,.entry-title{margin:0 auto;text-align:center}

/* Compact responsive tweaks */
@media (max-width:640px){
  :root{ --tile:104px; --tile-label:24px }
  .portal_topbar{flex-direction:column;gap:8px;align-items:flex-start}
  .user-info-container{margin-left:0}
}