/* HabHub portal — brand styling ported from the original HabHub project.
   KW Habilitation brand. Keep colors/animation values in sync with the brand book. */

:root {
  --hh-blue: #0065BD;
  --hh-cyan: #009FDA;
  --hh-magenta: #D10074;
  --hh-green: #69BE28;
  --hh-gold: #EBB700;
  --hh-purple: #6E2585;
  --hh-dark: #1a1a2e;
  --hh-darker: #111827;
  --hh-text: #1a1a2e;
  --hh-muted: #64748b;
  --hh-faint: #94a3b8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body.hh-body {
  font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', 'Arial', sans-serif;
  color: var(--hh-text);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Brand stripe — cyan / green / magenta / gold quarters */
.brand-stripe {
  height: 4px;
  background: linear-gradient(
    90deg,
    #009FDA 0%, #009FDA 25%,
    #69BE28 25%, #69BE28 50%,
    #D10074 50%, #D10074 75%,
    #EBB700 75%, #EBB700 100%
  );
}

/* ---------- Header ---------- */
.hh-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.hh-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  height: 64px;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hh-header-logo { height: 36px; width: auto; display: block; }
.hh-header-actions { display: flex; align-items: center; gap: 0.9rem; }
.hh-user { color: var(--hh-muted); font-size: 0.85rem; }
.hh-signout {
  font-size: 0.8rem;
  color: var(--hh-blue);
  text-decoration: none;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.3rem 0.7rem;
  transition: all 0.2s;
}
.hh-signout:hover { background: #f0f4f8; }

/* ---------- Main ---------- */
.hh-main { flex: 1 1 auto; }
.hh-container { max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem; }

/* ---------- Footer ---------- */
.hh-footer { margin-top: auto; }
.hh-footer-bar {
  background: var(--hh-dark);
  padding: 1.25rem;
}
.hh-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.hh-footer-label {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.4);
}
.hh-footer-logo {
  height: 20px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.5;
}

/* ---------- Login / auth-error page ---------- */
.login-bg {
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 159, 218, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(105, 190, 40, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(209, 0, 116, 0.04) 0%, transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}

.login-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
  animation: login-float 20s ease-in-out infinite;
}
.login-orb-1 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #009FDA 0%, transparent 70%);
  top: -10%; right: -5%; animation-delay: 0s;
}
.login-orb-2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, #69BE28 0%, transparent 70%);
  bottom: -5%; left: -8%; animation-delay: -7s;
}
.login-orb-3 {
  width: 250px; height: 250px;
  background: radial-gradient(circle, #D10074 0%, transparent 70%);
  bottom: 20%; right: -10%; animation-delay: -13s;
}
@keyframes login-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(15px, -20px) scale(1.05); }
  66% { transform: translate(-10px, 12px) scale(0.97); }
}

.login-logo { position: relative; z-index: 10; margin-bottom: 2.5rem; }
.login-logo img { height: 84px; width: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); }

.login-card-wrap { position: relative; z-index: 10; width: 100%; max-width: 380px; }
.login-card {
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.8);
  padding: 2.25rem 2rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(16px);
  transition: transform 0.3s, box-shadow 0.3s;
}
.login-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.login-card h1 {
  margin: 0 0 0.375rem;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hh-dark);
}
.login-card .login-sub {
  margin: 0 0 1.75rem;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--hh-muted);
}
.login-card .login-hint {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 0.7rem;
  color: var(--hh-faint);
}

/* Microsoft sign-in button */
.ms-button {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--hh-blue);
  padding: 0.875rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}
.ms-button:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 101, 189, 0.25);
  background: #007ad0;
}
.ms-button:active { transform: scale(0.98); }
.ms-button svg { position: relative; width: 18px; height: 18px; }
.ms-button span { position: relative; }

/* Brand dots */
.login-dots {
  position: relative;
  z-index: 10;
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.login-dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  opacity: 0.7;
}
.login-dots .d-cyan { background: var(--hh-cyan); }
.login-dots .d-green { background: var(--hh-green); }
.login-dots .d-magenta { background: var(--hh-magenta); }
.login-dots .d-gold { background: var(--hh-gold); }

/* Error icon */
.login-error-icon {
  display: flex;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: #fef2f2;
  color: #ef4444;
  font-size: 1.1rem;
}

/* Staggered entrance */
.entrance { animation: login-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.entrance-1 { animation-delay: 0.1s; }
.entrance-2 { animation-delay: 0.25s; }
.entrance-3 { animation-delay: 0.45s; }
@keyframes login-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .login-orb, .entrance { animation: none; }
}

/* ====================== Browse (HabHub-style) ====================== */
.hh-page-title { color: var(--hh-dark); font-weight: 800; margin: 0 0 0.25rem; font-size: 1.5rem; }
.hh-page-sub { color: var(--hh-muted); margin: 0 0 1.5rem; }
.hh-empty { color: var(--hh-muted); font-style: italic; margin-top: 1rem; }

.hh-breadcrumbs { font-size: 0.85rem; margin-bottom: 1rem; color: var(--hh-muted); }
.hh-breadcrumbs a { color: var(--hh-blue); text-decoration: none; }
.hh-breadcrumbs a:hover { text-decoration: underline; }
.hh-breadcrumbs .hh-sep { margin: 0 0.4rem; color: var(--hh-faint); }
.hh-breadcrumbs .hh-current { color: var(--hh-text); font-weight: 600; }

/* ---------- Section cards (accent bar + colored header) ---------- */
.hh-sections { display: flex; flex-direction: column; gap: 1.5rem; }
.hh-section {
  position: relative; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 0.85rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04); overflow: hidden;
}
.hh-section-bar { height: 4px; width: 100%; }
.hh-section-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.25rem 0.5rem; }
.hh-section-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 0.55rem; font-size: 0.9rem;
}
.hh-section-title { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.hh-section-count {
  background: #f0f4f8; color: var(--hh-muted); border-radius: 1rem;
  padding: 0.05rem 0.55rem; font-size: 0.75rem; font-weight: 600;
}
.hh-section-body { padding: 0.5rem 1.25rem 1.25rem; }

/* ---------- Tile cards (white, colored border + chip + title) ---------- */
.hh-tile-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .hh-tile-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .hh-tile-grid { grid-template-columns: repeat(4, 1fr); } }

.hh-tile {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.75rem; text-align: center;
  min-height: 130px; padding: 1.4rem 1rem; background: #fff;
  border: 3px solid #e2e8f0; border-radius: 1rem; text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.hh-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(0,0,0,0.25); }
.hh-tile-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 0.9rem; font-size: 1.3rem;
}
.hh-tile-title { font-weight: 800; font-size: 1.05rem; line-height: 1.2; }
.hh-tile-ext { position: absolute; top: 0.6rem; right: 0.7rem; color: var(--hh-faint); font-size: 0.75rem; }

/* brand-color variants: border (20%), icon chip (10% bg + solid), title */
.hh-tile.c-cyan    { border-color: rgba(0,159,218,0.25); }
.hh-tile.c-cyan:hover    { border-color: rgba(0,159,218,0.6); }
.hh-tile.c-cyan .hh-tile-icon  { background: rgba(0,159,218,0.1); color: var(--hh-cyan); }
.hh-tile.c-cyan .hh-tile-title { color: var(--hh-cyan); }
.hh-tile.c-green   { border-color: rgba(105,190,40,0.25); }
.hh-tile.c-green:hover   { border-color: rgba(105,190,40,0.6); }
.hh-tile.c-green .hh-tile-icon { background: rgba(105,190,40,0.1); color: var(--hh-green); }
.hh-tile.c-green .hh-tile-title{ color: var(--hh-green); }
.hh-tile.c-magenta { border-color: rgba(209,0,116,0.25); }
.hh-tile.c-magenta:hover { border-color: rgba(209,0,116,0.6); }
.hh-tile.c-magenta .hh-tile-icon  { background: rgba(209,0,116,0.1); color: var(--hh-magenta); }
.hh-tile.c-magenta .hh-tile-title { color: var(--hh-magenta); }
.hh-tile.c-gold    { border-color: rgba(235,183,0,0.3); }
.hh-tile.c-gold:hover    { border-color: rgba(235,183,0,0.7); }
.hh-tile.c-gold .hh-tile-icon  { background: rgba(235,183,0,0.12); color: #b88f00; }
.hh-tile.c-gold .hh-tile-title { color: #b88f00; }
.hh-tile.c-purple  { border-color: rgba(110,37,133,0.25); }
.hh-tile.c-purple:hover  { border-color: rgba(110,37,133,0.6); }
.hh-tile.c-purple .hh-tile-icon  { background: rgba(110,37,133,0.1); color: var(--hh-purple); }
.hh-tile.c-purple .hh-tile-title { color: var(--hh-purple); }
.hh-tile.c-blue    { border-color: rgba(0,101,189,0.25); }
.hh-tile.c-blue:hover    { border-color: rgba(0,101,189,0.6); }
.hh-tile.c-blue .hh-tile-icon  { background: rgba(0,101,189,0.1); color: var(--hh-blue); }
.hh-tile.c-blue .hh-tile-title { color: var(--hh-blue); }

/* ---------- File rows ---------- */
.hh-file-list { display: flex; flex-direction: column; }
.hh-file {
  display: flex; align-items: center; gap: 0.85rem; width: 100%;
  padding: 0.7rem 0.6rem; background: transparent; border: none;
  border-bottom: 1px solid #eef2f6; cursor: pointer; text-align: left;
  font: inherit; color: var(--hh-text); transition: background 0.12s;
}
.hh-file:last-child { border-bottom: none; }
.hh-file:hover { background: #f6f9fc; }
.hh-file-icon { width: 1.4rem; font-size: 1.15rem; text-align: center; }
.hh-file-name { flex: 1; font-size: 0.92rem; font-weight: 500; }
.hh-file-size { color: var(--hh-faint); font-size: 0.8rem; }
.hh-file-go { color: var(--hh-faint); font-size: 0.75rem; }

/* ---------- In-browser viewer modal ---------- */
.hh-viewer {
  display: none; position: fixed; inset: 0; z-index: 1090;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(3px); padding: 1rem;
}
.hh-viewer.open { display: flex; }
.hh-viewer-box {
  display: flex; flex-direction: column; width: 100%; max-width: 1100px;
  max-height: 92vh; background: #fff; border-radius: 1rem;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5); overflow: hidden;
}
.hh-viewer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1.1rem; border-bottom: 1px solid #e2e8f0;
}
.hh-viewer-title { font-weight: 600; font-size: 0.9rem; color: var(--hh-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-viewer-close { border: none; background: transparent; font-size: 1.4rem;
  line-height: 1; color: var(--hh-muted); cursor: pointer; padding: 0 0.3rem; }
.hh-viewer-close:hover { color: var(--hh-magenta); }
.hh-viewer-body { flex: 1; overflow: auto; display: flex; flex-direction: column;
  align-items: center; padding: 0.75rem; min-height: 0; }
.hh-view-pdf { width: 100%; height: 78vh; border: none; border-radius: 0.5rem; }
.hh-view-img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 0.5rem; }
.hh-view-media { max-width: 100%; max-height: 78vh; border-radius: 0.5rem; }
.hh-viewer-foot { padding: 0.6rem; }
.hh-viewer-foot a { color: var(--hh-blue); text-decoration: none; font-size: 0.85rem; }
.hh-viewer-foot a:hover { text-decoration: underline; }
.hh-view-loading { color: var(--hh-muted); font-size: 0.9rem; padding: 3rem 1rem; }
.hh-view-loading .fa-spinner { margin-right: 0.5rem; color: var(--hh-blue); }

/* ---------- Flash messages ---------- */
.hh-flash { padding: 0.7rem 1rem; border-radius: 0.6rem; margin-bottom: 1rem; font-size: 0.9rem; }
.hh-flash-success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.hh-flash-warning { background: #fffbeb; border: 1px solid #fde68a; color: #b45309; }
.hh-flash-danger  { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }

/* ---------- Manager affordances ---------- */
.hh-title-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.hh-manage-badge {
  font-size: 0.72rem; font-weight: 600; color: var(--hh-purple);
  background: rgba(110,37,133,0.1); border-radius: 1rem; padding: 0.2rem 0.7rem;
}
.hh-tile-wrap { position: relative; }
.hh-tile-del, .hh-file-del { display: inline; }
.hh-tile-del button {
  position: absolute; top: 0.4rem; left: 0.5rem; z-index: 2;
  border: none; background: rgba(255,255,255,0.9); color: #b91c1c;
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 0.75rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.15s;
}
.hh-tile-wrap:hover .hh-tile-del button { opacity: 1; }
.hh-file-row { display: flex; align-items: center; }
.hh-file-row .hh-file { flex: 1; }
.hh-file-ver { color: var(--hh-faint); font-size: 0.75rem; font-weight: 600; }
.hh-file-del button {
  border: none; background: transparent; color: #cbd5e1; cursor: pointer;
  padding: 0 0.7rem; font-size: 0.9rem;
}
.hh-file-del button:hover { color: #b91c1c; }

/* ---------- Manage panel ---------- */
.hh-manage { display: flex; flex-direction: column; gap: 1.1rem; }
.hh-manage-block { display: flex; flex-direction: column; gap: 0.35rem; }
.hh-manage-label { font-weight: 600; font-size: 0.85rem; color: var(--hh-text); }
.hh-manage-label .fas { color: var(--hh-purple); margin-right: 0.3rem; }
.hh-manage-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.hh-manage-row input[type=text], .hh-manage-row input[type=url] {
  flex: 1; min-width: 160px; padding: 0.5rem 0.7rem; border: 1px solid #cbd5e1;
  border-radius: 0.5rem; font-size: 0.9rem; font-family: inherit;
}
.hh-manage-row input[type=file] { font-size: 0.88rem; }
.hh-manage-btn {
  background: var(--hh-blue); color: #fff; border: none; border-radius: 0.5rem;
  padding: 0.5rem 1.1rem; font-weight: 600; font-size: 0.88rem; cursor: pointer;
}
.hh-manage-btn:hover { background: #007ad0; }
.hh-manage-hint { font-size: 0.78rem; color: var(--hh-muted); }