/* ========================================================================== Hostel Mess Management — design system Light theme by default; dark theme via [data-theme="dark"] on , toggled and persisted client-side (see base.html inline script + toggle button). Every color, radius, spacing, and shadow used anywhere in the app is a variable here — never hardcode a color in a template. ========================================================================== */ :root { /* ---- Brand ---- */ --color-primary: #7c3aed; --color-primary-strong: #6423c9; --color-primary-soft: #efe7fd; --color-accent-gold: #b6821f; /* ---- Surfaces & text (light) ---- */ --color-bg: #f7f5fb; --color-surface: #ffffff; --color-surface-2: #f2eefa; --color-border: #e6e0f2; --color-text: #211734; --color-text-secondary: #6c6288; --color-text-faint: #9a90b5; /* ---- Semantic ---- */ --color-success: #1a8a5f; --color-success-bg: #e4f7ee; --color-success-border: #b9ecd4; --color-danger: #c22a4d; --color-danger-bg: #fdeaef; --color-danger-border: #f6c3d1; --color-warning: #a1650a; --color-warning-bg: #fdf1de; --color-warning-border: #f2d69f; --color-info: #1c6fb0; --color-info-bg: #e6f2fb; --color-info-border: #bcdcf3; /* ---- Nav (always dark-on-gradient regardless of theme, it's the brand header) ---- */ --nav-gradient: linear-gradient(115deg, #1c1333 0%, #3a2159 55%, #7a3585 100%); --nav-text: rgba(255, 255, 255, 0.85); --nav-text-strong: #ffffff; /* ---- Scale ---- */ --radius-sm: 0.5rem; --radius-md: 0.875rem; --radius-lg: 1.25rem; --radius-pill: 999px; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --shadow-sm: 0 1px 2px rgba(35, 20, 60, 0.06), 0 1px 1px rgba(35, 20, 60, 0.04); --shadow-md: 0 6px 20px -6px rgba(35, 20, 60, 0.16); --shadow-lg: 0 16px 40px -12px rgba(35, 20, 60, 0.22); /* ---- Type scale: fluid between mobile and desktop, never overflows ---- */ --fs-h1: clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem); --fs-h2: clamp(1.25rem, 1.05rem + 0.85vw, 1.65rem); --fs-h3: clamp(1.1rem, 0.98rem + 0.5vw, 1.3rem); --fs-h4: clamp(1rem, 0.93rem + 0.3vw, 1.1rem); --fs-body: 1rem; --fs-small: 0.8125rem; --fs-eyebrow: 0.72rem; color-scheme: light; } :root[data-theme="dark"] { --color-primary: #a78bfa; --color-primary-strong: #c4b5fd; --color-primary-soft: rgba(139, 92, 246, 0.22); --color-accent-gold: #e8b649; --color-bg: #14101f; --color-surface: #1d1730; --color-surface-2: #241c3a; --color-border: #362a52; --color-text: #f3efff; --color-text-secondary: #a99cc9; --color-text-faint: #7c709c; --color-success: #52d999; --color-success-bg: #142e25; --color-success-border: #1f4d3b; --color-danger: #f68aa6; --color-danger-bg: #35182233; --color-danger-border: #572333; --color-warning: #f3c968; --color-warning-bg: #352a12; --color-warning-border: #55461a; --color-info: #7fbdf0; --color-info-bg: #132840; --color-info-border: #1f3a5c; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px -8px rgba(6, 2, 16, 0.55); --shadow-lg: 0 20px 48px -14px rgba(6, 2, 16, 0.65); color-scheme: dark; } /* ========================================================================== Base ========================================================================== */ html { font-size: 16px; } body { background: var(--color-bg); color: var(--color-text); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background-color 0.2s ease, color 0.2s ease; } h1, h2, h3, h4, h5, h6 { font-family: "Manrope", "Inter", sans-serif; color: var(--color-text); line-height: 1.2; text-wrap: balance; margin-bottom: var(--space-3); } h1 { font-size: var(--fs-h1); font-weight: 800; } h2 { font-size: var(--fs-h2); font-weight: 800; } h3 { font-size: var(--fs-h3); font-weight: 700; } h4, h5, h6 { font-size: var(--fs-h4); font-weight: 700; } small, .small { font-size: var(--fs-small); } p { margin-bottom: var(--space-3); } a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-primary-strong); text-decoration: underline; } ::selection { background: var(--color-primary-soft); color: var(--color-text); } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .text-muted { color: var(--color-text-secondary) !important; } .text-faint { color: var(--color-text-faint) !important; } .bg-white { background: var(--color-surface) !important; } .bg-light { background: var(--color-bg) !important; } .eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-secondary); } /* ========================================================================== Layout shell ========================================================================== */ .app-shell { min-height: 100vh; display: flex; flex-direction: column; } .app-main { flex: 1; padding-bottom: var(--space-6); } /* Reserve room for the fixed bottom tab bar on mobile so content never sits underneath it. */ @media (max-width: 767.98px) { .app-main { padding-bottom: calc(72px + var(--space-5)); } } .container { padding-left: var(--space-4); padding-right: var(--space-4); } @media (min-width: 1400px) { .container { max-width: 1240px; } } /* ========================================================================== Top navbar (desktop) ========================================================================== */ .navbar { background: var(--nav-gradient) !important; padding-top: var(--space-3); padding-bottom: var(--space-3); box-shadow: 0 2px 16px rgba(10, 4, 24, 0.25); } .navbar-brand { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--nav-text-strong) !important; display: flex; align-items: center; gap: 0.55rem; } .brand-mark { width: 30px; height: 30px; border-radius: var(--radius-sm); background: linear-gradient(135deg, #ffffff, var(--color-accent-gold)); flex: none; display: inline-flex; align-items: center; justify-content: center; color: #241734; font-weight: 800; font-size: 0.85rem; } .navbar .nav-link { color: var(--nav-text) !important; font-weight: 500; font-size: 0.9rem; padding-top: 0.55rem; padding-bottom: 0.55rem; display: flex; align-items: center; gap: 0.4rem; } .navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .nav-link.show { color: var(--nav-text-strong) !important; } .navbar .navbar-text { color: var(--nav-text) !important; font-size: 0.875rem; } .navbar-toggler { border-color: rgba(255, 255, 255, 0.35); padding: 0.35rem 0.55rem; } .theme-toggle { width: 2.2rem; height: 2.2rem; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); color: var(--nav-text-strong); display: inline-flex; align-items: center; justify-content: center; flex: none; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.18); } .dropdown-menu { border-radius: var(--radius-md); border-color: var(--color-border); box-shadow: var(--shadow-md); padding: 0.4rem; background: var(--color-surface); } .dropdown-item { border-radius: 0.5rem; padding: 0.55rem 0.8rem; font-size: 0.9rem; color: var(--color-text); display: flex; align-items: center; gap: 0.5rem; } .dropdown-item:hover, .dropdown-item:focus { background: var(--color-primary-soft); color: var(--color-text); } /* ========================================================================== Bottom tab bar (mobile only) ========================================================================== */ .bottom-tabbar { display: none; } @media (max-width: 767.98px) { .bottom-tabbar { display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 1030; background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: 0 -4px 16px rgba(20, 10, 40, 0.08); padding: 0.4rem 0.25rem calc(0.4rem + env(safe-area-inset-bottom)); } .bottom-tabbar__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.3rem 0.1rem; color: var(--color-text-secondary); font-size: 0.68rem; font-weight: 600; border-radius: var(--radius-sm); } .bottom-tabbar__item i { font-size: 1.25rem; line-height: 1; } .bottom-tabbar__item.active { color: var(--color-primary); } .bottom-tabbar__item:hover { color: var(--color-primary); text-decoration: none; } } /* ========================================================================== Cards ========================================================================== */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text); box-shadow: var(--shadow-sm); } .card-header { background: transparent; border-bottom: 1px solid var(--color-border); font-weight: 700; font-size: 0.95rem; padding: 0.9rem 1.15rem; } .card-body { padding: 1.15rem; } /* ========================================================================== Buttons ========================================================================== */ .btn { border-radius: var(--radius-pill); font-weight: 600; font-size: 0.9rem; padding: 0.55rem 1.25rem; transition: filter 0.15s ease, transform 0.05s ease, background-color 0.15s ease; } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline-offset: 3px; } .btn-sm { padding: 0.35rem 0.85rem; font-size: 0.825rem; } .btn-lg { padding: 0.7rem 1.6rem; font-size: 1rem; } .btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .btn-primary:hover, .btn-primary:focus { background: var(--color-primary-strong); border-color: var(--color-primary-strong); filter: none; color: #fff; } .btn-outline-primary { color: var(--color-primary); border-color: var(--color-primary); background: transparent; } .btn-outline-primary:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .btn-outline-dark, .btn-outline-secondary { color: var(--color-text); border-color: var(--color-border); background: transparent; } .btn-outline-dark:hover, .btn-outline-secondary:hover { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-border); } .btn-danger, .btn-outline-danger { border-radius: var(--radius-pill); } .btn-outline-danger { color: var(--color-danger); border-color: var(--color-danger-border); } .btn-outline-danger:hover { background: var(--color-danger); border-color: var(--color-danger); color: #fff; } .btn-success { background: var(--color-success); border-color: var(--color-success); } /* ========================================================================== Forms ========================================================================== */ .form-control, .form-select { background-color: var(--color-surface); border: 1.5px solid var(--color-border); color: var(--color-text); border-radius: var(--radius-md); padding: 0.6rem 0.9rem; font-size: 0.95rem; } .form-control:focus, .form-select:focus { background-color: var(--color-surface); color: var(--color-text); border-color: var(--color-primary); box-shadow: 0 0 0 0.2rem var(--color-primary-soft); } .form-control::placeholder { color: var(--color-text-faint); } .form-control.is-invalid, .was-validated .form-control:invalid { border-color: var(--color-danger); } .form-control:-webkit-autofill, .form-control:-webkit-autofill:hover, .form-control:-webkit-autofill:focus { -webkit-text-fill-color: var(--color-text); -webkit-box-shadow: 0 0 0px 1000px var(--color-surface) inset; box-shadow: 0 0 0px 1000px var(--color-surface) inset; caret-color: var(--color-text); transition: background-color 9999s ease-in-out 0s; } .form-check-input { background-color: var(--color-surface); border-color: var(--color-border); } .form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); } .form-check-input:focus { box-shadow: 0 0 0 0.2rem var(--color-primary-soft); } .form-label { color: var(--color-text); font-weight: 600; font-size: 0.85rem; margin-bottom: 0.4rem; } .form-text { color: var(--color-text-secondary) !important; font-size: 0.8rem; } .text-danger.small { font-size: 0.78rem; } /* ========================================================================== Tables ========================================================================== */ .table-responsive { border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-sm); } .table-responsive .table { margin-bottom: 0; } .table { --bs-table-bg: var(--color-surface); --bs-table-color: var(--color-text); --bs-table-border-color: var(--color-border); --bs-table-striped-bg: var(--color-surface-2); --bs-table-hover-bg: var(--color-primary-soft); font-size: 0.9rem; margin-bottom: 0; } .table > thead { --bs-table-color: var(--color-text-secondary); } .table > thead th { font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom-width: 1px; white-space: nowrap; } .table > :not(caption) > * > * { padding: 0.7rem 0.85rem; } /* ========================================================================== Alerts & badges ========================================================================== */ .alert { border-radius: var(--radius-md); font-size: 0.9rem; border-width: 1px; } .alert-success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); } .alert-danger { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-border); } .alert-warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-border); } .alert-info { background: var(--color-info-bg); color: var(--color-info); border-color: var(--color-info-border); } .badge { font-weight: 600; padding: 0.4em 0.75em; border-radius: var(--radius-pill); font-size: 0.72rem; letter-spacing: 0.02em; } .badge.bg-info { background: var(--color-primary) !important; color: #fff; } .badge.bg-secondary { background: var(--color-surface-2) !important; color: var(--color-text-secondary); border: 1px solid var(--color-border); } .badge.bg-success { background: var(--color-success) !important; } .badge.bg-danger { background: var(--color-danger) !important; } .badge.bg-warning { background: var(--color-warning) !important; color: #241a3c; } /* ========================================================================== Quick-action tiles (dashboard grids) ========================================================================== */ .tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } @media (min-width: 576px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 992px) { .tile-grid { grid-template-columns: repeat(4, 1fr); } } .tile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); color: var(--color-text); transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; height: 100%; } .tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-primary); color: var(--color-text); text-decoration: none; } .tile__icon { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .tile__label { font-weight: 700; font-size: 0.9rem; } /* Stat tiles (numbers, e.g. Super Admin dashboard) */ .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } @media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } } .stat-tile { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); } .stat-tile__value { font-family: "Manrope", sans-serif; font-weight: 800; font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); color: var(--color-text); font-variant-numeric: tabular-nums; } .stat-tile__label { font-size: 0.8rem; color: var(--color-text-secondary); font-weight: 600; } /* ========================================================================== Auth / login ========================================================================== */ .auth-shell { flex: 1; display: flex; align-items: stretch; } .auth-visual { position: relative; flex: 1 1 46%; display: flex; flex-direction: column; justify-content: center; padding: var(--space-8); background: var(--nav-gradient); overflow: hidden; } .auth-visual::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at 75% 30%, black, transparent 70%); } .auth-visual__brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.6rem; margin-bottom: var(--space-7); } .auth-visual__brand .brand-mark { width: 2.5rem; height: 2.5rem; font-size: 1.05rem; border-radius: var(--radius-md); } .auth-visual__brand span:last-child { color: #fff; font-family: "Manrope", sans-serif; font-weight: 800; font-size: 1.1rem; } .auth-visual__content { position: relative; z-index: 1; max-width: 26rem; } .auth-visual__eyebrow { color: rgba(255, 255, 255, 0.7); font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--space-4); } .auth-visual__title { font-family: "Manrope", sans-serif; font-weight: 800; font-size: var(--fs-h1); line-height: 1.15; color: #fff; margin-bottom: var(--space-4); } .auth-visual__subtitle { color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--space-6); } .auth-visual__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); } .auth-visual__list li { display: flex; align-items: flex-start; gap: 0.7rem; color: rgba(255, 255, 255, 0.9); font-size: 0.9rem; } .auth-visual__list li i { color: var(--color-accent-gold); font-size: 1.1rem; flex: none; } .auth-panel { flex: 1 1 54%; display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4); } .auth-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 25rem; padding: var(--space-6); } .auth-card__logo { display: none; } .auth-card__eyebrow { color: var(--color-text-secondary); font-size: 0.85rem; margin-bottom: 0.35rem; } .auth-card h4 { font-size: var(--fs-h2); font-weight: 800; margin-bottom: var(--space-5); } @media (max-width: 991.98px) { .auth-shell { flex-direction: column; } .auth-visual { display: none; } .auth-panel { padding: var(--space-6) var(--space-4); align-items: flex-start; } .auth-card { max-width: 100%; box-shadow: none; border: none; padding: 0; } .auth-card__logo { display: flex; align-items: center; gap: 0.6rem; margin-bottom: var(--space-6); } .auth-card__logo span:last-child { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--color-text); } } /* ========================================================================== Mobile-first fixes ========================================================================== */ @media (max-width: 767.98px) { .btn { min-height: 44px; } .d-flex.justify-content-between { flex-wrap: wrap; gap: var(--space-2); } .card-body .row.g-3 > div { flex: 0 0 50%; max-width: 50%; } }