/* The venue's violet light, carried into the management workspace. */
:root {
  --glass-ink: #30253f;
  --glass-muted: #82788e;
  --glass-purple: #7850ce;
  --glass-edge: rgba(255, 255, 255, .82);
  --glass-shadow: 0 8px 28px rgba(61, 40, 94, .055), 0 2px 5px rgba(61, 40, 94, .025);
  --tblr-body-bg: #f3f1f8;
  --tblr-body-color: #302d40;
}

body {
  background: #f3f1f8;
  color: #302d40;
}

/* A single atmospheric image keeps the entry grounded in the KTV itself. */
.login-screen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  min-height: 100vh;
  min-height: 100svh;
  background: #171023;
}

.login-screen::before,
.login-screen::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "";
}

.login-screen::before {
  background:
    linear-gradient(90deg, rgba(19, 12, 32, .94) 0%, rgba(25, 14, 42, .82) 31%, rgba(36, 20, 53, .38) 72%, rgba(24, 14, 34, .5) 100%),
    url("/assets/venues/room.jpg") center / cover no-repeat;
}

.login-screen::after {
  background:
    radial-gradient(ellipse at 93% 11%, rgba(231, 176, 242, .25), transparent 43%),
    radial-gradient(ellipse at 35% 100%, rgba(117, 58, 187, .32), transparent 56%),
    linear-gradient(180deg, rgba(25, 14, 38, .02) 55%, rgba(17, 10, 27, .5));
}

.login-story {
  z-index: 1;
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  padding: 44px clamp(36px, 5.2vw, 84px);
  background: transparent;
}

.login-story::after {
  content: none;
}

.login-brand {
  gap: 13px;
  color: #fff;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 1px;
}

.login-brand img {
  border-radius: 13px;
  box-shadow: 0 5px 18px rgba(12, 5, 21, .22), 0 0 0 1px rgba(255, 255, 255, .1);
}

.login-story-content {
  padding: 62px 0 76px;
}

.login-eyebrow {
  color: #cfb2ee;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
}

.login-story h1 {
  margin: 24px 0 22px;
  color: #fff;
  font-size: clamp(32px, 3.15vw, 48px);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 1px;
  text-shadow: 0 4px 24px rgba(9, 4, 20, .2);
}

.login-story-content p {
  color: #c5b7d5;
  font-size: 14px;
  line-height: 2.1;
}

.login-capabilities {
  gap: 9px;
  margin-top: 32px;
}

.login-capabilities span {
  padding: 8px 12px;
  border: 1px solid rgba(231, 209, 255, .18);
  border-radius: 8px;
  background: rgba(204, 166, 246, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  color: #d0bfdf;
  font-size: 11px;
}

.login-story-footer {
  color: #aa94bf;
  font-size: 11px;
  letter-spacing: 1px;
}

.login-form-area {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 60px clamp(28px, 4vw, 64px) 60px 16px;
  background: transparent;
}

.login-form {
  position: relative;
  width: 430px;
  max-width: 100%;
  padding: 43px 39px 32px;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 27px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .93), rgba(244, 236, 252, .83));
  box-shadow:
    0 32px 80px rgba(12, 4, 26, .3),
    0 8px 22px rgba(19, 7, 35, .14),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  backdrop-filter: blur(28px) saturate(145%);
}

.login-form::before {
  position: absolute;
  top: -1px;
  right: 26px;
  left: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #fff 48%, transparent);
  pointer-events: none;
  content: "";
}

.login-heading {
  margin-bottom: 33px;
}

.login-heading h2 {
  color: #30233f;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .5px;
}

.login-heading p {
  margin-top: 10px;
  color: #81728e;
  font-size: 12px;
}

.login-form .form-label {
  margin-bottom: 10px;
  color: #52425f;
  font-size: 12px;
  font-weight: 500;
}

.login-form .form-control-lg {
  min-width: 0;
  height: 52px;
  padding: 13px 15px;
  border: 1px solid rgba(125, 99, 151, .19);
  border-radius: 12px;
  background: rgba(255, 255, 255, .73);
  box-shadow: inset 0 2px 4px rgba(72, 37, 104, .025), 0 1px 0 rgba(255, 255, 255, .8);
  color: #372841;
  font-size: 14px;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.login-form .form-control::placeholder {
  color: #a297ae;
}

.login-form .form-control:focus {
  z-index: 1;
  border-color: #a17bd2;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 0 0 3px rgba(130, 81, 185, .1), inset 0 1px 2px rgba(57, 29, 83, .02);
}

.login-form .input-group-flat {
  flex-wrap: nowrap;
  border: 1px solid rgba(125, 99, 151, .19);
  border-radius: 12px;
  background: rgba(255, 255, 255, .73);
  box-shadow: inset 0 2px 4px rgba(72, 37, 104, .025), 0 1px 0 rgba(255, 255, 255, .8);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.login-form .input-group-flat:focus-within {
  border-color: #a17bd2;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 0 0 3px rgba(130, 81, 185, .1);
}

.login-form .input-group-flat .form-control {
  height: 50px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.login-form .password-toggle {
  display: inline-flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 46px;
  min-width: 46px;
  height: 44px;
  margin: 0 3px 0 0;
  padding: 0;
  border: 0;
  border-radius: 9px !important;
  background: transparent;
  color: #8b729f;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
}

.login-form .password-toggle:hover,
.login-form .password-toggle[aria-pressed="true"] {
  background: rgba(124, 79, 175, .08);
  color: #7445a8;
}

.login-form .password-toggle:focus-visible {
  outline: 2px solid #9666c5;
  outline-offset: -3px;
}

.login-form .password-toggle .icon {
  width: 21px;
  height: 21px;
  stroke-width: 1.7;
}

.login-form .btn-primary {
  position: relative;
  height: 52px;
  margin-top: 5px;
  border: 1px solid rgba(90, 49, 151, .45);
  border-radius: 12px;
  background: linear-gradient(110deg, #8654ca, #7041b3);
  box-shadow: 0 7px 17px rgba(105, 56, 162, .23), inset 0 1px 0 rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.login-form .btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 10px 23px rgba(105, 56, 162, .29), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.login-form .btn-primary:active {
  transform: translateY(1px);
}

.login-note {
  margin-top: 23px;
  margin-bottom: 0;
  color: #9989a5;
  font-size: 11px;
}

.login-form .alert-danger {
  border: 1px solid rgba(191, 67, 91, .16);
  border-radius: 10px;
  background: #fff0f2;
  color: #a63d58;
  font-size: 12px;
}

/* Quiet glass surfaces behind the daily operational information. */
.admin-app {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 91% 0, rgba(209, 190, 236, .22), transparent 48%),
    radial-gradient(ellipse at 20% 80%, rgba(223, 215, 244, .18), transparent 55%),
    #f3f1f8;
}

.admin-app .navbar.admin-sidebar {
  border-right: 1px solid rgba(255, 255, 255, .05);
  background: linear-gradient(168deg, #2e203e, #21182e 55%, #241b32);
  box-shadow: 5px 0 26px rgba(37, 22, 57, .045);
}

.admin-sidebar .nav-link {
  border: 1px solid transparent;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

.admin-sidebar .nav-link:hover {
  border-color: rgba(218, 187, 255, .08);
  background: rgba(190, 154, 232, .08);
}

.admin-sidebar .nav-link.active {
  border-color: rgba(218, 187, 255, .15);
  background: linear-gradient(110deg, rgba(159, 110, 210, .24), rgba(147, 97, 196, .12));
  box-shadow: 0 5px 14px rgba(13, 5, 24, .1), inset 0 1px 0 rgba(255, 255, 255, .04);
  color: #f0dfff;
}

.admin-topbar {
  border-bottom: 1px solid rgba(255, 255, 255, .8);
  /* Keep the sticky surface light to composite while preserving its glass sheen. */
  background: linear-gradient(110deg, rgba(255, 255, 255, .91), rgba(248, 243, 255, .85));
  box-shadow: 0 3px 16px rgba(72, 43, 105, .025), inset 0 -1px 0 rgba(166, 144, 192, .08);
}

.topbar-profile {
  padding: 5px 9px 5px 5px;
  border: 1px solid rgba(125, 99, 151, .08);
  border-radius: 22px;
  background: rgba(255, 255, 255, .56);
}

.environment-badge {
  border: 1px solid rgba(133, 87, 180, .08);
  background: rgba(236, 226, 248, .58);
  color: #8c69ac;
}

.admin-app .card {
  border: 1px solid rgba(255, 255, 255, .94);
  border-radius: 15px;
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--glass-shadow), inset 0 1px 0 #fff;
}

.admin-app .card-header,
.admin-app .card-footer {
  border-color: rgba(223, 216, 234, .52);
  background: rgba(255, 255, 255, .45);
}

.admin-app .card.stat-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(253, 251, 255, .85));
}

.admin-app .table thead th {
  background: rgba(246, 243, 251, .84);
  color: #8c829b;
}

.admin-app .table tbody td {
  border-color: rgba(229, 223, 237, .45);
}

.admin-app .table-toolbar,
.admin-app .table-pagination {
  border-color: rgba(223, 216, 234, .52);
}

.admin-app .btn-primary,
.admin-dialog .btn-primary {
  border-color: rgba(112, 65, 174, .85);
  background: linear-gradient(115deg, #8960d0, #7548bc);
  box-shadow: 0 4px 10px rgba(109, 66, 170, .14), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.admin-app .btn-primary:hover,
.admin-dialog .btn-primary:hover {
  background: linear-gradient(115deg, #8055c7, #6b3eaf);
  box-shadow: 0 5px 14px rgba(109, 66, 170, .2), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.admin-app .btn-outline-secondary,
.admin-dialog .btn-outline-secondary {
  border-color: #ddd5e8;
  background: rgba(255, 255, 255, .7);
  color: #786987;
  box-shadow: 0 1px 2px rgba(62, 38, 86, .025), inset 0 1px 0 #fff;
}

.admin-app .form-control,
.admin-app .form-select,
.admin-dialog .form-control,
.admin-dialog .form-select {
  border-color: #e1daea;
  background-color: rgba(255, 255, 255, .88);
  box-shadow: inset 0 1px 2px rgba(61, 38, 84, .025);
}

.admin-app .form-control:focus,
.admin-app .form-select:focus,
.admin-dialog .form-control:focus,
.admin-dialog .form-select:focus {
  border-color: #b69ad8;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(132, 86, 188, .09);
}

.admin-dialog {
  border: 1px solid rgba(255, 255, 255, .93);
  border-radius: 20px;
  background: #fcfaff;
  box-shadow: 0 30px 100px rgba(27, 12, 47, .27), 0 7px 24px rgba(27, 12, 47, .09), inset 0 1px 0 #fff;
}

.admin-dialog::backdrop {
  background: rgba(34, 20, 48, .55);
}

.admin-dialog .modal-header,
.admin-dialog .editor-tabs {
  border-color: #e9e1f1;
  background: linear-gradient(110deg, #fdfbff, #f6f1fb);
}

.admin-dialog .modal-body {
  background: rgba(255, 255, 255, .62);
}

.admin-dialog .modal-footer {
  border-color: #e9e1f1;
  background: #f9f5fd;
}

.admin-dialog .btn-close {
  border-radius: 9px;
}

.admin-toast {
  border: 1px solid #fff;
  background: #fdfbff;
  box-shadow: 0 10px 32px rgba(53, 31, 78, .14), 0 2px 6px rgba(53, 31, 78, .04);
}

@media (max-width: 1100px) {
  .login-story { padding-right: 28px; padding-left: 38px; }
  .login-form-area { padding-right: 34px; padding-left: 12px; }
  .login-form { padding: 37px 29px 29px; }
  .login-capabilities { gap: 7px; }
  .login-capabilities span { padding: 7px 9px; font-size: 10px; }
}

@media (max-width: 850px) and (min-width: 761px) {
  .login-story { padding: 35px 25px; }
  .login-story h1 { font-size: 29px; }
  .login-story-content p { font-size: 12px; }
  .login-capabilities { gap: 6px; }
  .login-capabilities span { padding: 6px 7px; }
  .login-form-area { padding-right: 24px; }
  .login-form { padding: 33px 25px 26px; border-radius: 23px; }
  .login-heading h2 { font-size: 23px; }
}

@media (max-width: 760px) {
  .login-screen { display: flex; flex-direction: column; }
  .login-screen::before { background-position: 60% center; }
  .login-screen::after {
    background: linear-gradient(180deg, rgba(21, 11, 33, .15), rgba(21, 11, 33, .4)), radial-gradient(ellipse at 90% 30%, rgba(218, 164, 244, .22), transparent 65%);
  }
  .login-story { min-height: 0; padding: 27px 26px 16px; }
  .login-brand { gap: 11px; font-size: 19px; }
  .login-brand img { width: 39px; height: 39px; border-radius: 11px; }
  .login-story-content,
  .login-story-footer { display: none; }
  .login-form-area { flex: 1; padding: 24px 24px 66px; }
  .login-form { width: 410px; padding: 36px 30px 29px; border-radius: 25px; }
  .login-heading { margin-bottom: 30px; }
  .login-heading h2 { font-size: 25px; }
  .admin-app .card { border-radius: 13px; }
  .admin-dialog { border-radius: 16px; }
}

@media (max-width: 360px) {
  .login-story { padding: 23px 21px 12px; }
  .login-form-area { padding: 20px 16px 45px; }
  .login-form { padding: 30px 23px 26px; border-radius: 22px; }
  .login-heading h2 { font-size: 23px; }
  .login-heading p { font-size: 11px; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .login-form { background: linear-gradient(145deg, #fff, #f2eaf9); }
  .admin-topbar { background: #fbf9fe; }
}

@media (prefers-reduced-motion: reduce) {
  .login-form .form-control,
  .login-form .input-group-flat,
  .login-form .password-toggle,
  .login-form .btn-primary,
  .admin-sidebar .nav-link { transition: none; }
  .login-form .btn-primary:hover,
  .login-form .btn-primary:active { transform: none; }
}