@import url("../tabler-icons/tabler-icons.min.css");

:root {
  --app-radius: 0.85rem;
  --app-radius-sm: 0.6rem;
  --app-shadow: 0 0.25rem 1.25rem rgba(24, 36, 51, 0.06);
  --app-shadow-hover: 0 0.6rem 1.8rem rgba(24, 36, 51, 0.09);
}

html { font-size: 14px; min-height: 100%; overflow-x: hidden; }
@media (min-width: 768px) { html { font-size: 15px; } }
body { min-height: 100%; margin: 0; overflow-x: hidden; background: var(--tblr-bg-surface-secondary); }
.page-wrapper { min-width: 0; }
.app-main { min-height: calc(100vh - 4rem); background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--tblr-primary) 5%, transparent), transparent 28rem), var(--tblr-bg-surface-secondary); }
.app-sidebar { overflow: hidden; box-shadow: 0.5rem 0 2rem rgba(10, 22, 38, 0.08); }
.app-brand { gap: 0.75rem; letter-spacing: -0.015em; }
.app-brand-mark { display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.app-navigation { width: 100%; min-width: 0; overflow-x: hidden; }
.app-navigation-label { padding: 1rem 1rem 0; color: rgba(255,255,255,.38); font-size: .67rem; font-weight: 700; letter-spacing: .12em; }
.app-user-panel { margin: 1rem -.75rem -.75rem; padding: 1rem; border-top: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.08); }
.app-topbar { min-height: 3.75rem; border-bottom: 1px solid var(--tblr-border-color-translucent); background: var(--tblr-bg-surface); box-shadow: 0 .15rem .75rem rgba(24, 36, 51, .035); }
.app-notification-button { position: relative; }
.app-notification-badge { position: absolute; top: -.2rem; right: -.35rem; min-width: 1.25rem; padding: .2rem .35rem; border: 2px solid var(--tblr-bg-surface); font-size: .65rem; }
.app-footer { border-top: 1px solid var(--tblr-border-color-translucent); }

.app-page-header, .page-header { margin-bottom: 1.35rem; }
.page-pretitle { margin-bottom: .3rem; color: var(--tblr-primary); font-weight: 700; letter-spacing: .08em; }
.page-title { letter-spacing: -.025em; font-weight: 700; }

.card { border-color: var(--tblr-border-color-translucent); border-radius: var(--app-radius); box-shadow: var(--app-shadow); }
.card-header { min-height: 3.75rem; padding: 1rem 1.25rem; border-bottom-color: var(--tblr-border-color-translucent); }
.card-title { font-weight: 700; letter-spacing: -.012em; }
.card-body { padding: 1.25rem; }
.card-footer { padding: 1rem 1.25rem; border-top-color: var(--tblr-border-color-translucent); background: color-mix(in srgb, var(--tblr-bg-surface-secondary) 55%, transparent); }
.app-content-card { overflow: visible; border: 0; }
.app-content-card > .card-body { padding: clamp(1rem, 2vw, 1.5rem); }
.row-cards > [class*="col"] > .card { transition: transform .18s ease, box-shadow .18s ease; }
.row-cards > [class*="col"] > .card:hover { transform: translateY(-2px); box-shadow: var(--app-shadow-hover); }

.table-responsive { border-radius: var(--app-radius-sm); }
.table-responsive-dropdown { overflow: visible; border-radius: 0; }
.table-responsive-dropdown .dropdown-menu { z-index: 1080; }
.table { margin-bottom: 0; }
.table thead th { padding-top: .8rem; padding-bottom: .8rem; color: var(--tblr-secondary); background: var(--tblr-bg-surface-secondary); border-bottom-width: 1px; font-size: .72rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; }
.table tbody td { padding-top: .9rem; padding-bottom: .9rem; vertical-align: middle; }
.table-hover tbody tr { transition: background-color .15s ease; }
.table tbody tr { transition: background-color .15s ease; }
.table tbody tr:hover { background: color-mix(in srgb, var(--tblr-primary) 4%, transparent); }

.form-label { margin-bottom: .45rem; font-weight: 600; }
.form-control, .form-select, .input-group-text { min-height: 2.65rem; border-radius: var(--app-radius-sm); border-color: color-mix(in srgb, var(--tblr-border-color) 85%, transparent); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
textarea.form-control { min-height: auto; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: color-mix(in srgb, var(--tblr-primary) 60%, white); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--tblr-primary) 14%, transparent); }
.form-check-input { border-color: color-mix(in srgb, var(--tblr-border-color) 85%, transparent); }
.validation-summary-errors { padding: .8rem 1rem; margin-bottom: 1rem; border: 1px solid color-mix(in srgb, var(--tblr-danger) 25%, transparent); border-radius: var(--app-radius-sm); background: color-mix(in srgb, var(--tblr-danger) 7%, transparent); }
.validation-summary-errors ul { margin-bottom: 0; padding-left: 1.25rem; }

.btn { border-radius: var(--app-radius-sm); font-weight: 600; }
.btn-primary { box-shadow: 0 .2rem .6rem color-mix(in srgb, var(--tblr-primary) 22%, transparent); }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; }
.btn-list { align-items: center; }
.dropdown-menu { padding: .45rem; border: 1px solid var(--tblr-border-color-translucent); border-radius: var(--app-radius-sm); box-shadow: 0 .75rem 2rem rgba(24,36,51,.13); }
.dropdown-item { border-radius: .4rem; padding: .55rem .7rem; }
.badge { padding: .38rem .55rem; border-radius: 999px; font-weight: 600; }

.alert { border: 0; border-radius: var(--app-radius-sm); box-shadow: 0 .2rem .8rem rgba(24,36,51,.05); }
.modal-content { overflow: hidden; border: 0; border-radius: var(--app-radius); box-shadow: 0 1rem 3rem rgba(24,36,51,.2); }
.modal-header, .modal-footer { padding: 1rem 1.25rem; }
.modal-body { padding: 1.25rem; }
.app-modal-header { min-height: 5rem; border-bottom: 1px solid var(--tblr-border-color-translucent); }
.app-modal-header .modal-title { font-size: 1.05rem; font-weight: 700; }
.modal-section-title { display: flex; align-items: center; margin-bottom: .9rem; color: var(--tblr-secondary); font-size: .72rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.room-assignment-card { height: 100%; padding: 1rem; border: 1px solid var(--tblr-border-color-translucent); border-radius: var(--app-radius-sm); background: var(--tblr-bg-surface); transition: border-color .15s ease, box-shadow .15s ease; }
.room-assignment-card:hover { border-color: color-mix(in srgb, var(--tblr-azure) 35%, var(--tblr-border-color)); box-shadow: 0 .35rem 1rem rgba(24,36,51,.06); }
.empty-state-compact { display: flex; align-items: center; justify-content: center; gap: .65rem; min-height: 5rem; padding: 1rem; border: 1px dashed var(--tblr-border-color); border-radius: var(--app-radius-sm); color: var(--tblr-secondary); background: var(--tblr-bg-surface-secondary); }
.empty-state-compact .ti { font-size: 1.5rem; }
.list-group-item { padding: .9rem 1.1rem; border-color: var(--tblr-border-color-translucent); }
dl.row dt { color: var(--tblr-secondary); font-weight: 600; }
.empty { padding: clamp(2rem, 6vw, 5rem) 1rem; }
.empty-header { color: color-mix(in srgb, var(--tblr-primary) 26%, transparent); font-weight: 800; }
.avatar { box-shadow: inset 0 0 0 1px rgba(98,105,118,.08); }
.dashboard-stat-card { position: relative; overflow: hidden; }
.dashboard-stat-card::after { content: ""; position: absolute; width: 5rem; height: 5rem; right: -2rem; bottom: -2rem; border-radius: 50%; background: color-mix(in srgb, var(--tblr-primary) 5%, transparent); }
.profile-summary { padding-top: 2rem; padding-bottom: 2rem; background: linear-gradient(180deg, color-mix(in srgb, var(--tblr-primary) 7%, transparent), transparent); }
.auth-page { background: radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--tblr-primary) 16%, transparent), transparent 24rem), radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--tblr-azure) 12%, transparent), transparent 26rem), var(--tblr-bg-surface-secondary); }
.auth-logo { display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; box-shadow: 0 .75rem 2rem color-mix(in srgb, var(--tblr-primary) 18%, transparent); }
.auth-card { border: 0; box-shadow: 0 1rem 3rem rgba(24,36,51,.11); }
.role-selection-list { display: grid; gap: .75rem; }
.role-selection-item { display: flex; align-items: center; gap: .9rem; padding: 1rem; border: 1px solid var(--tblr-border-color-translucent); border-radius: var(--app-radius-sm); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.role-selection-item:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--tblr-primary) 35%, var(--tblr-border-color)); background: color-mix(in srgb, var(--tblr-primary) 4%, transparent); }
.role-selection-item:has(.form-check-input:checked) { border-color: var(--tblr-primary); background: color-mix(in srgb, var(--tblr-primary) 7%, transparent); box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--tblr-primary) 10%, transparent); }
.event-application-tabs .nav-tabs { padding-right: 1rem; padding-left: 1rem; scrollbar-width: thin; }
.event-application-tabs .nav-link { white-space: nowrap; }
.event-status-content { min-height: 13rem; }

@media (min-width: 992px) {
  .app-sidebar { position: sticky; top: 0; height: 100vh; max-height: 100vh; }
  .app-sidebar > .container-fluid { display: flex; flex-flow: column nowrap; width: 100%; height: 100%; min-width: 0; overflow: hidden; }
  .app-sidebar .navbar-brand { flex: 0 0 auto; max-width: 100%; }
  .app-sidebar .navbar-collapse { display: flex !important; flex: 1 1 auto; flex-direction: column; width: 100%; min-width: 0; min-height: 0; overflow: hidden; }
  .app-navigation { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
  .app-navigation::-webkit-scrollbar { width: .35rem; }
  .app-navigation::-webkit-scrollbar-thumb { border-radius: 1rem; background: rgba(255,255,255,.22); }
  .app-user-panel { flex: 0 0 auto; }
}

@media (max-width: 767.98px) {
  .app-page-header .row { align-items: flex-start !important; }
  .app-page-header .col-auto { width: 100%; margin-left: 0 !important; }
  .app-page-header .btn-list { width: 100%; }
  .app-page-header .btn-list > * { flex: 1 1 auto; }
  .card-body { padding: 1rem; }
  .table tbody td { padding-top: .75rem; padding-bottom: .75rem; }
  .table-responsive-dropdown { overflow-x: auto; overflow-y: visible; }
}

@media print {
  .app-main { background: #fff; }
  .card { box-shadow: none; }
}