/* UNICAL PWA GLOBAL CSS */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

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

:root {
  --primary:       #7B1A1A;
  --primary-dark:  #5C1212;
  --primary-mid:   #9B2B2B;
  --bg:            #F7F4F1;
  --surface:       #FFFFFF;
  --surface2:      #F0EDE9;
  --text:          #1C1917;
  --text-muted:    #78716C;
  --border:        #E7E5E4;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.07), 0 2px 6px rgba(0,0,0,.04);
  --shadow:        0 2px 8px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.05);
  --radius:        16px;
  --radius-sm:     10px;
  --nav-h:         68px;
  --safe-b:        env(safe-area-inset-bottom, 0px);
  --safe-t:        env(safe-area-inset-top, 0px);

  --success: #059669; --success-bg: #ECFDF5;
  --info:    #2563EB; --info-bg:    #EFF6FF;
  --warn:    #B45309; --warn-bg:    #FFFBEB;

  --cub: #5B21B6;
  --cub-mid: #7C3AED;
  --cub-light: #EDE9FE;
  --cub-border: rgba(124,58,237,.2);
}

html, body {
  height: 100%; overflow: hidden;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #2a2a2a; -webkit-font-smoothing: antialiased;
}

#app {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  margin: 0 auto;
  background: var(--bg); overflow: hidden;
  box-shadow: 0 0 80px rgba(0,0,0,.4);
  position: relative;
}

/* TOP BAR */
.top-bar {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--safe-t) + 10px) 18px 10px;
  background: var(--surface); border-bottom: 1px solid var(--border); z-index: 200;
}
.brand-name { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 800; color: var(--primary); line-height: 1; text-decoration:none; }
.brand-tag { font-size: 10px; font-weight: 500; color: var(--text-muted); letter-spacing: 1.2px; text-transform: uppercase; margin-top: 2px; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface2); cursor: pointer; border: none; -webkit-tap-highlight-color: transparent; position: relative; }
.icon-btn svg { width: 18px; height: 18px; color: var(--text); }
.filter-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: var(--primary); border-radius: 50%; border: 1.5px solid var(--surface); }

/* CONTENT */
.content-area { flex: 1; overflow: hidden; position: relative; }
.view { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--nav-h) + var(--safe-b) + 24px); background: var(--bg); scrollbar-width: none; }
.view::-webkit-scrollbar { display: none; }

/* BOTTOM NAV */
.bottom-nav { flex-shrink: 0; display: flex; background: var(--surface); border-top: 1px solid var(--border); padding-bottom: var(--safe-b); z-index: 200; text-decoration: none;}
.nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px 0 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; gap: 4px; position: relative; text-decoration:none; }
.nav-btn::after { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 2.5px; border-radius: 0 0 3px 3px; background: transparent; transition: background 0.2s; }
.nav-btn.active::after { background: var(--primary); }
.nav-btn svg { width: 22px; height: 22px; stroke-width: 1.7; color: var(--text-muted); transition: color 0.2s; }
.nav-btn span { font-size: 10px; font-weight: 500; color: var(--text-muted); transition: color 0.2s; letter-spacing: .3px; }
.nav-btn.active svg { color: var(--primary); }
.nav-btn.active span { color: var(--primary); font-weight: 700; }

/* LOADING */
.global-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 20px; }
.spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-msg { font-size: 14px; color: var(--text-muted); }

/* UTIL CLASSES */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeUp .35s ease; }
.fade-up{animation:fadeUp .35s ease both}

/* FORMS AND BUTTONS */
.form-body { padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom:10px; }
.form-label { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-muted); }
.form-input { background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px; padding: 13px 14px; font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--text); outline: none; transition: border-color .2s; width: 100%; }
.form-input:focus { border-color: var(--primary); }
.form-input.error { border-color: #DC2626; }
.form-error { font-size: 11px; color: #DC2626; font-weight: 500; }
.form-hint{font-size:11px;color:var(--text-muted)}

.btn-primary { background: var(--primary) !important; color: white !important; border: none !important; border-radius: 14px !important; padding: 15px !important; font-family: 'DM Sans', sans-serif !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer; transition: background .15s !important; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: none !important; text-transform: none !important; height: auto !important; line-height: 1.2 !important; }
.btn-primary:active, .btn-primary:focus { background: var(--primary-dark) !important; box-shadow: none !important; }
.btn-primary[disabled] { opacity: 0.6; pointer-events: none; }
.btn-ghost { background: transparent !important; color: var(--text-muted) !important; border: none !important; font-family: 'DM Sans', sans-serif !important; font-size: 13px !important; cursor: pointer; text-decoration: underline !important; padding: 4px !important; box-shadow: none !important; }

/* HERO BANNER */
.hero-banner { background: linear-gradient(145deg, var(--primary-dark) 0%, var(--primary) 55%, var(--primary-mid) 100%); padding: 28px 20px 36px; color: white; position: relative; overflow: hidden; }
.hero-banner::before { content: 'UniCal'; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); font-family: 'Playfair Display', serif; font-size: 110px; font-weight: 800; opacity: 0.06; line-height: 1; pointer-events: none; white-space: nowrap; }
.hero-eyebrow { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; opacity: .65; margin-bottom: 10px; }
.hero-heading { font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 800; line-height: 1.1; margin-bottom: 6px; }
.hero-sub { font-size: 13px; opacity: .75; margin-bottom: 24px; font-weight: 300; }

/* AUTH CLASSES */
.auth-info-box { background:rgba(123,26,26,.06);border-radius:var(--radius-sm);padding:12px 14px;display:flex;gap:10px;align-items:flex-start;margin-bottom:10px; }
.icon-circle-lg { width:64px;height:64px;border-radius:50%;background:rgba(123,26,26,.1);display:flex;align-items:center;justify-content:center; }
.status-badge { display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:6px 10px;border-radius:8px;margin-top:5px; }
.status-badge.success { background:var(--success-bg);color:var(--success); }
.status-badge.error { background:#FEF2F2;color:#DC2626; }

/* SPINNERS */
.spinner-sm { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; }
.spinner-dark { width: 18px; height: 18px; border: 2.5px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; }

/* ERROR UI */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}