/* Public Portal styles */

.portal-body{
  min-height:100vh;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}

.portal-banner{
  color:#fff;
  padding:8px 12px;
  font-weight:600;
  text-align:center;
}



.portal-brand{ display:flex; align-items:center; gap:10px; }
.portal-brand img{ height:32px; width:auto; }
.portal-site-name{ font-weight:800; }

.portal-controls{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.portal-select-wrap{ min-width:220px; }
.portal-select{
  width:100%;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(2,6,23,0.7);
  color:inherit;
}

.portal-main{
  min-height: calc(100vh - 160px);
  padding:16px;
}

.portal-links{
  width:100%;
  max-width:1200px;
  margin:0 auto;
}

.portal-link-item{
  width:100%;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(2,6,23,0.62);
  color: inherit;
  border-radius: 18px;
  padding: 14px;
  text-align:left;
  cursor:pointer;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

.portal-link-item:hover{
  transform: translateY(-1px);
  background: rgba(2,6,23,0.70);
  border-color: rgba(255,255,255,0.16);
}

.pli-icon{
  width:52px;
  height:52px;
  border-radius:16px;
  overflow:hidden;
  background: rgba(255,255,255,0.10);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  padding:6px;
}
.pli-icon img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
.pli-icon-placeholder{
  font-size:20px;
  opacity:0.85;
}

.pli-title{ font-weight:800; }
.pli-desc{ opacity:0.85; font-size:0.95rem; margin-top:4px; }

/* Card (logo left, text right) */
.portal-links.portal-layout-card{
  display:grid;
  gap:14px;
}
.portal-links.portal-layout-card[data-cols="2"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-links.portal-layout-card[data-cols="3"]{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portal-links.portal-layout-card[data-cols="4"]{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.portal-links.portal-layout-card[data-cols="auto"]{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.portal-links.portal-layout-card .portal-link-item{
  display:flex;
  gap:14px;
  align-items:center;
}

/* Icon + Description (grid, centered) */
.portal-links.portal-layout-icon_desc{
  display:grid;
  gap:14px;
}
.portal-links.portal-layout-icon_desc[data-cols="2"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-links.portal-layout-icon_desc[data-cols="3"]{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portal-links.portal-layout-icon_desc[data-cols="4"]{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.portal-links.portal-layout-icon_desc[data-cols="auto"]{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.portal-links.portal-layout-icon_desc .portal-link-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:18px 14px;
}
.portal-links.portal-layout-icon_desc .pli-icon{
  width:84px; height:84px; border-radius:22px;
}
.portal-links.portal-layout-icon_desc .pli-text{ margin-top:12px; }

/* Icon Only (grid, centered, title below icon, no description) */
.portal-links.portal-layout-icon_only{
  display:grid;
  gap:14px;
}
.portal-links.portal-layout-icon_only[data-cols="2"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-links.portal-layout-icon_only[data-cols="3"]{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portal-links.portal-layout-icon_only[data-cols="4"]{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.portal-links.portal-layout-icon_only[data-cols="auto"]{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.portal-links.portal-layout-icon_only .portal-link-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:18px 14px;
}
.portal-links.portal-layout-icon_only .pli-icon{
  width:88px; height:88px; border-radius:22px;
}
.portal-links.portal-layout-icon_only .pli-text{ margin-top:10px; }
.portal-links.portal-layout-icon_only .pli-desc{ display:none; }

/* List (icon left, title left, desc right) */
.portal-links.portal-layout-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.portal-links.portal-layout-list .portal-link-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
}
.portal-links.portal-layout-list .pli-text{
  display:flex;
  align-items:baseline;
  gap:12px;
  width:100%;
}
.portal-links.portal-layout-list .pli-title{
  min-width: 180px;
}
.portal-links.portal-layout-list .pli-desc{
  margin-top:0;
  text-align:right;
  flex:1 1 auto;
}

/* Global: hide descriptions if toggled off */
.portal-links[data-showdesc="0"] .pli-desc{ display:none; }

/* Content iframe container */
.portal-content{
  position:relative;
  width:100%;
  max-width:1200px;
  margin: 0 auto;
  margin-top: 16px;
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  background: rgba(2,6,23,0.6);
  border:1px solid rgba(255,255,255,0.08);
  display:none;
}

.portal-content.is-visible{ display:block; }

.portal-frame{
  width:100%;
  height:72vh;
  border:0;
  background:#fff;
  display:none;
}
.portal-frame.is-visible{ display:block; }

.portal-loading, .portal-error{ padding:22px; text-align:center; }
.portal-spinner{
  width:26px;height:26px;border-radius:50%;
  border:3px solid rgba(255,255,255,0.25);
  border-top-color: rgba(255,255,255,0.9);
  animation: portalSpin .9s linear infinite;
  margin: 0 auto;
}
@keyframes portalSpin{ to{ transform: rotate(360deg);} }




/* === Hybrid Portal Design === */

/* Header: Solid Dark (Variant A) */

.portal-header * {
  color: #ffffff !important;
}

/* System message under header */


/* Tiles: Glass Neon (Variant B) */
.portal-tile {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
}
.portal-tile .title {
  color: #ffffff;
}
.portal-tile .description {
  color: rgba(255,255,255,0.8);
}
.portal-tile:hover {
  background: rgba(0,0,0,0.65);
  box-shadow: 0 0 0 1px rgba(249,115,22,0.6);
}

/* Footer: Solid & anchored */
.portal-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.portal-content {
  flex: 1;
}



/* === FINAL Portal Tiles – Correct Selectors === */

.portal-link-item {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  color: #ffffff;
  border: none;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.portal-link-item:hover {
  background: rgba(0, 0, 0, 0.75);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.6);
  transform: translateY(-2px);
}

.portal-link-item .pli-title {
  color: #ffffff;
  font-weight: 600;
}

.portal-link-item .pli-desc {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9em;
  line-height: 1.3;
}

.portal-link-item .pli-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* === System message bar final style === */


.portal-system-message span {
  text-transform: none;
}


/* === Align portal system message + footer typography with admin === */






/* === Global banner + footer final alignment === */

/* Global system banner */


/* Footer: match admin typography + full-width bar */



/* === FIX: Global banner text color/size only (keep orange background) === */




/* === FIX: Footer full-width + true bottom anchoring on portal === */
.portal-main { flex: 1; } /* correct element (was portal-content) */

/* neutralise any global .footer constraints */
.portal-footer.footer {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  margin-top: auto !important;
  border-radius: 0 !important;
  left: 0;
  right: 0;
  box-sizing: border-box;
}


/* === FIX: System banner uses Banner Background Colour setting === */
/* Do NOT set background here – it is injected inline from portal/index.php */






/* === System banner: typography + text color only (background from Banner Background Colour setting) === */


.portal-system-message,
.portal-system-message * {
  color: #111827;
}


/* === Portal uses global colour contract === */

/* Header */


/* Footer */


/* Global system banner */



/* === Portal structural styles only (no global colours) === */

/* System message positioning/typography only */
.portal-system-message {
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  padding: 8px 16px;
}

/* Portal layout to allow global footer to sit at bottom */
body.portal-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.portal-main {
  flex: 1;
}


/* === Portal chrome uses DB-driven CSS vars (set in portal/index.php) === */
.portal-header {
  background: var(--secondary);
  color: #ffffff;
}

/* Ensure footer spans full width on portal (global footer has sidebar offset) */
body.portal-body .footer {
  margin-left: 0;
  width: 100%;
}

/* Global banner class handles background via var(--banner-color); ensure it sits flush */
body.portal-body .global-banner {
  border-radius: 0;
  margin-left: 0;
}


/* Portal login logo */
.portal-logo {
  max-height: 40px;
  width: auto;
}


/* === Portal header controls (safe, no bootstrap) === */
.portal-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
}

.portal-controls-center {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: center;
}

.portal-controls-right {
  justify-self: end;
}

.portal-header-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 8px;
  font-size: 1rem;
  color: inherit;
  cursor: pointer;
}

.portal-header-btn:hover {
  opacity: 0.75;
}

/* Ensure dropdown renders */
.portal-select-wrap {
  display: flex;
  align-items: center;
  min-width: 180px;
}


/* === Portal header: left brand, centered home+dropdown, right admin === */
.portal-header{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* left and right lanes */
.portal-header-left,
.portal-header-right{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Center the controls relative to viewport */
.portal-header-center{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}

/* keep controls tight */
.portal-header-center .portal-controls{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Ensure select renders with width */
.portal-select-wrap{
  display: flex;
  align-items: center;
  min-width: 180px;
}

/* Portal header buttons are always transparent */
.portal-header-btn{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}


/* === Portal header: no underline on icon links === */
.portal-header-btn,
.portal-header-btn:hover,
.portal-header-btn:focus,
.portal-header-btn:active {
  text-decoration: none !important;
}


/* Small open button next to dropdown */
#portal-open {
  font-size: 0.95rem;
  opacity: 0.9;
}
#portal-open:hover { opacity: 0.75; }


/* === Portal tile logo visibility fix === */
/* Pure white logo plate for transparent/dark logos */
.portal-tile .logo-frame {
  background: #ffffff;
  border-radius: 10px;
  padding: 8px;
}


/* === Portal tile logo visibility fix (correct hook) === */
/* Pure white logo plate behind the tile icon wrapper */
.portal-link-item .pli-icon {
  background: #ffffff;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure the logo fits nicely within the white plate */
.portal-link-item .pli-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}