/* =============================================================
   HIT Portal — portal.css  v1.0
   ============================================================= */
:root {
  --p-primary:   #1E3A5F;
  --p-accent:    #2E86AB;
  --p-bg:        #F0F4F8;
  --p-topbar-h:  58px;
  --p-radius:    12px;
  --p-shadow:    0 4px 20px rgba(0,0,0,.10);
}

*, *::before, *::after { box-sizing: border-box; }

body.portal-body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--p-bg);
  margin: 0;
  min-height: 100vh;
}

/* Topbar */
.portal-topbar {
  position: fixed; top:0; left:0; right:0;
  height: var(--p-topbar-h);
  background: var(--p-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  z-index: 1050;
}
.portal-brand {
  color:#fff !important; font-weight:700; font-size:1.1rem;
  text-decoration:none; letter-spacing:.3px;
}
.portal-topbar-btn {
  color:rgba(255,255,255,.85); background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2); font-size:.82rem;
}
.portal-topbar-btn:hover { color:#fff; background:rgba(255,255,255,.2); }

/* Content area */
.portal-content {
  padding-top: var(--p-topbar-h);
  min-height: 100vh;
}

/* ── Login page ─────────────────────────────────────────────── */
.login-wrapper {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1E3A5F 0%, #2E86AB 100%);
  padding: 1rem;
}
.login-card {
  background: #fff;
  border-radius: var(--p-radius);
  box-shadow: var(--p-shadow);
  padding: 2.5rem 2rem;
  width: 100%; max-width: 420px;
}
.login-logo {
  width: 64px; height: 64px; border-radius: 16px;
  background: var(--p-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color:#fff;
  margin: 0 auto 1.2rem;
}
.login-title { font-size:1.4rem; font-weight:700; color:var(--p-primary); text-align:center; }
.login-sub   { font-size:.85rem; color:#6c757d; text-align:center; margin-bottom:1.5rem; }

/* ── Tile cards ─────────────────────────────────────────────── */
.portal-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  padding: 3rem 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.p-tile {
  background: #fff;
  border-radius: 16px;
  padding: 2.5rem 1.75rem 2rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  width: 280px;
  box-shadow: var(--p-shadow);
  transition: transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: none;
}
.p-tile::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background: var(--tile-color, var(--p-accent));
}
.p-tile:hover  { transform:translateY(-5px); box-shadow:0 8px 30px rgba(0,0,0,.15); color:inherit; }
.p-tile.disabled { opacity:.65; cursor:default; }
.p-tile.disabled:hover { transform:none; box-shadow:var(--p-shadow); }

.p-tile-icon {
  width:72px; height:72px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; margin:0 auto 1.1rem;
  background: color-mix(in srgb, var(--tile-color, var(--p-accent)) 12%, white);
  color: var(--tile-color, var(--p-accent));
}
.p-tile h3 { font-size:1.15rem; font-weight:700; color:var(--p-primary); margin-bottom:.35rem; }
.p-tile p  { font-size:.845rem; color:#6c757d; margin:0; }
.p-tile-badge {
  display:inline-block; font-size:.7rem; padding:.15rem .55rem;
  border-radius:20px; margin-top:.9rem; font-weight:600;
}
.p-tile-badge.available   { background:#d4edda; color:#155724; }
.p-tile-badge.coming-soon { background:#fff3cd; color:#856404; }

/* ── Settings page ──────────────────────────────────────────── */
.settings-wrap { padding: 1.75rem 1.5rem 3rem; }

.page-header {
  display:flex; align-items:center; gap:.75rem;
  margin-bottom:1.5rem; padding-bottom:.9rem;
  border-bottom:2px solid #dee2e6;
}
.page-header h1 { font-size:1.45rem; font-weight:700; color:var(--p-primary); margin:0; }
.page-icon {
  width:42px; height:42px; border-radius:10px;
  background:var(--p-accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; flex-shrink:0;
}

/* Tables */
.table thead th {
  background: var(--p-primary); color:#fff;
  font-weight:600; border:none; padding:.65rem .85rem; white-space:nowrap;
}
.table > tbody > tr:hover { background:rgba(46,134,171,.05); }
.table td { padding:.6rem .85rem; vertical-align:middle; }

/* Form controls */
.form-label { font-weight:600; font-size:.875rem; }
.form-control:focus, .form-select:focus {
  border-color:var(--p-accent);
  box-shadow:0 0 0 .2rem rgba(46,134,171,.2);
}

.btn-portal-primary {
  background:var(--p-primary); border-color:var(--p-primary); color:#fff;
}
.btn-portal-primary:hover {
  background:#152B47; border-color:#152B47; color:#fff;
}
/* ── Role / permission management ───────────────────────────── */
.role-permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .6rem;
}
.role-permission-item {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .7rem .75rem;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  background: #fff;
  min-height: 64px;
}
.role-permission-item:hover {
  border-color: var(--p-accent);
  background: rgba(46,134,171,.04);
}
.role-permission-item code {
  display: block;
  color: var(--p-primary);
  font-size: .82rem;
  font-weight: 700;
  word-break: break-word;
}
.role-permission-item small {
  display: block;
  color: #6c757d;
  margin-top: .15rem;
  line-height: 1.25;
}


/* =============================================================
   Main portal responsive hardening — 2026-05-10
   ============================================================= */
html { overflow-x: hidden; }
img, svg, canvas, video { max-width: 100%; height: auto; }
.portal-topbar .container-fluid { min-width: 0; }
.portal-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-topbar .ms-auto { flex-shrink: 0; }
.portal-content { min-width: 0; }
.portal-tiles { width: 100%; }
.p-tile { max-width: 100%; }
.settings-wrap { max-width: 100%; }
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dataTables_wrapper { width: 100%; max-width: 100%; }

@media (max-width: 767.98px) {
  .portal-topbar { padding-left: .5rem !important; padding-right: .5rem !important; }
  .portal-brand { font-size: .95rem; max-width: calc(100vw - 150px); }
  .portal-topbar-btn { padding: .25rem .45rem; }
  .portal-tiles { padding: 1.25rem .75rem 2rem; gap: 1rem; }
  .p-tile { width: 100%; padding: 1.6rem 1rem; }
  .settings-wrap { padding: 1rem .75rem 2rem; }
  .page-header { align-items: flex-start; flex-wrap: wrap; gap: .6rem; }
  .page-header h1 { font-size: 1.2rem; line-height: 1.25; }
}

/* Central productivity features — 2026-05-11 */
.portal-global-search{max-width:520px;min-width:220px}.portal-global-search .input-group-text{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.24);color:#fff}.portal-global-search .form-control{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);color:#fff}.portal-global-search .form-control::placeholder{color:rgba(255,255,255,.75)}.portal-global-search .form-control:focus{background:#fff;color:#111827}.portal-search-card{transition:transform .15s ease,box-shadow .15s ease}.portal-search-card:hover{transform:translateY(-2px);box-shadow:0 .75rem 1.5rem rgba(0,0,0,.12)!important}
@media(max-width:991.98px){.portal-global-search{display:none!important}}