/* ==========================================================

   Mountain Health Bar Admin

   Main Design

========================================================== */

 

:root {

  --color-dark: #111418;

  --color-dark-soft: #1a1f25;

  --color-gold: #b99a57;

  --color-gold-light: #d6be83;

  --color-cream: #f4efe6;

  --color-white: #ffffff;

  --color-text: #1f2933;

  --color-muted: #7a8088;

  --color-border: rgba(31, 41, 51, 0.10);

  --sidebar-width: 280px;

  --radius-small: 12px;

  --radius-medium: 20px;

  --shadow-soft: 0 12px 35px rgba(15, 20, 25, 0.08);

  --transition: 250ms ease;

}

 

*,

*::before,

*::after {

  box-sizing: border-box;

}

 

html,

body {

  margin: 0;

  min-height: 100%;

}

 

body {

  min-width: 320px;

  font-family: Arial, Helvetica, sans-serif;

  color: var(--color-text);

  background: var(--color-cream);

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

}

 

button,

input {

  font: inherit;

}

 

.app {

  min-height: 100vh;

  display: grid;

  grid-template-columns: var(--sidebar-width) 1fr;

}

 

.sidebar {

  min-height: 100vh;

  padding: 38px 24px;

  color: var(--color-white);

  background: linear-gradient(160deg, #171b20 0%, #0f1216 100%);

  border-right: 1px solid rgba(255, 255, 255, 0.06);

}

 

.logo {

  margin-bottom: 48px;

  padding: 0 12px;

  color: var(--color-gold-light);

  font-family: Georgia, "Times New Roman", serif;

  font-size: 24px;

  line-height: 1.25;

}

 

.logo span {

  display: block;

  margin-top: 8px;

  color: rgba(255, 255, 255, 0.48);

  font-family: Arial, Helvetica, sans-serif;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.18em;

  text-transform: uppercase;

}

 

.sidebar nav {

  display: grid;

  gap: 8px;

}

 

.sidebar nav button {

  width: 100%;

  padding: 15px 16px;

  border: 1px solid transparent;

  border-radius: var(--radius-small);

  color: rgba(255, 255, 255, 0.64);

  background: none;

  text-align: left;

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

  transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition);

}

 

.sidebar nav button:hover {

  color: var(--color-white);

  background: rgba(255, 255, 255, 0.05);

  transform: translateX(3px);

}

 

.sidebar nav button.active {

  color: var(--color-white);

  border-color: rgba(185, 154, 87, 0.30);

  background: linear-gradient(135deg, rgba(185, 154, 87, 0.22), rgba(185, 154, 87, 0.08));

}

 

.content {

  min-width: 0;

  padding: 54px 60px;

  background: radial-gradient(circle at top right, rgba(185, 154, 87, 0.08), transparent 28%), var(--color-cream);

}

 

.admin-page {

  display: none;

}

 

.admin-page.active {

  display: block;

}

 

.page-header {

  max-width: 900px;

  margin-bottom: 32px;

}

 

.page-header h1 {

  margin: 0 0 10px;

  color: var(--color-dark);

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(38px, 6vw, 58px);

  font-weight: 400;

  line-height: 1.05;

  letter-spacing: -0.03em;

}

 

.page-header p,

.section-toolbar p,

.setting-row p {

  margin: 0;

  color: var(--color-muted);

  font-size: 14px;

  line-height: 1.6;

}

 

.dashboard-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 22px;

}

 

.dashboard-card {

  min-height: 190px;

  padding: 28px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-medium);

  background: rgba(255, 255, 255, 0.82);

  box-shadow: var(--shadow-soft);

  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);

}

 

.dashboard-card:hover {

  transform: translateY(-4px);

  border-color: rgba(185, 154, 87, 0.32);

  box-shadow: 0 18px 45px rgba(15, 20, 25, 0.12);

}

 

.card-label {

  color: var(--color-muted);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}

 

.card-value {

  color: var(--color-dark);

  font-family: Georgia, "Times New Roman", serif;

  font-size: 58px;

  font-weight: 400;

  line-height: 1;

}

 

.card-note {

  color: var(--color-muted);

  font-size: 13px;

  line-height: 1.5;

}

 

.status-card {

  background: linear-gradient(145deg, rgba(26, 31, 37, 0.98), rgba(15, 18, 22, 0.98));

  border-color: rgba(185, 154, 87, 0.22);

}

 

.status-card .card-label,

.status-card .card-note {

  color: rgba(255, 255, 255, 0.58);

}

 

.status-value {

  display: flex;

  align-items: center;

  gap: 12px;

  color: var(--color-white);

  font-family: Georgia, "Times New Roman", serif;

  font-size: 42px;

  font-weight: 400;

}

 

.status-dot {

  width: 12px;

  height: 12px;

  border-radius: 50%;

  background: #7f9d84;

  box-shadow: 0 0 0 6px rgba(127, 157, 132, 0.14);

}

 

.status-dot.closed {

  background: #a85f5f;

  box-shadow: 0 0 0 6px rgba(168, 95, 95, 0.14);

}

 

.content-card,

.latest-requests-section,

.qr-item {

  border: 1px solid var(--color-border);

  border-radius: var(--radius-medium);

  background: rgba(255, 255, 255, 0.86);

  box-shadow: var(--shadow-soft);

}

 

.content-card,

.latest-requests-section {

  padding: 32px;

}

 

.latest-requests-section {

  margin-top: 34px;

}

 

.section-toolbar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

  margin-bottom: 24px;

}

 

.section-toolbar h2,

.empty-state h2,

.qr-item h3 {

  margin: 0 0 8px;

  color: var(--color-dark);

  font-family: Georgia, "Times New Roman", serif;

  font-weight: 400;

}

 

.primary-action,

.copy-link-button {

  border-radius: 12px;

  font-weight: 700;

  cursor: pointer;

}

 

.primary-action {

  padding: 12px 22px;

  border: none;

  color: var(--color-white);

  background: var(--color-gold);

}

 

.primary-action:hover {

  opacity: 0.9;

}

 

.primary-action:disabled {

  cursor: wait;

  opacity: 0.55;

}

 

.latest-requests-list,

.qr-grid {

  display: grid;

  gap: 14px;

}

 

.request-item {

  display: grid;

  grid-template-columns: 90px 1fr auto;

  align-items: center;

  gap: 22px;

  padding: 18px 20px;

  border: 1px solid rgba(31, 41, 51, 0.08);

  border-radius: 14px;

  background: var(--color-white);

  transition: 0.25s ease;

}

 

.request-item:hover {

  transform: translateY(-2px);

  box-shadow: 0 12px 24px rgba(15, 20, 25, 0.08);

}

 

.request-time {

  color: var(--color-gold);

  font-size: 18px;

  font-weight: 700;

}

 

.request-main strong {

  display: block;

  margin-bottom: 4px;

  color: var(--color-dark);

  font-size: 15px;

}

 

.request-main span {

  color: var(--color-muted);

  font-size: 13px;

}

 

.request-type-badge,

.visibility-status {

  display: inline-flex;

  width: max-content;

  padding: 8px 12px;

  border-radius: 999px;

  font-size: 11px;

  font-weight: 700;

  white-space: nowrap;

}

 

.request-type-badge.service {

  color: #6b5527;

  background: rgba(185, 154, 87, 0.18);

}

 

.request-type-badge.towels,

.visibility-status.is-visible {

  color: #356447;

  background: rgba(77, 140, 96, 0.15);

}

 

.request-type-badge.reminder,

.visibility-status.is-hidden {

  color: #9d2d2d;

  background: rgba(192, 74, 74, 0.15);

}

 

.request-empty-state,

.empty-state {

  padding: 40px;

  color: var(--color-muted);

  text-align: center;

}

 

.table-wrapper {

  overflow: auto;

}

 

.admin-table {

  width: 100%;

  border-collapse: collapse;

}

 

.admin-table th,

.admin-table td {

  padding: 14px;

  border-bottom: 1px solid #ececec;

  text-align: left;

}

 

.admin-table th {

  color: var(--color-muted);

  font-size: 12px;

  letter-spacing: 0.05em;

  text-transform: uppercase;

}

 

.form-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 24px;

}

 

.form-field {

  display: flex;

  flex-direction: column;

}

 

.form-field label {

  margin-bottom: 8px;

  font-weight: 600;

}

 

.form-field input {

  padding: 12px;

  border: 1px solid #ddd;

  border-radius: 10px;

  background: var(--color-white);

}

 

.form-note {

  margin: 20px 0 0;

  color: var(--color-muted);

}

 

.qr-item {

  padding: 20px;

}

 

.qr-item-content,

.setting-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

}

 

.qr-item p {

  margin: 0;

  color: var(--color-muted);

  font-size: 13px;

  line-height: 1.5;

  word-break: break-all;

}

 

.copy-link-button {

  flex: 0 0 auto;

  padding: 11px 16px;

  border: 1px solid var(--color-border);

  color: var(--color-text);

  background: var(--color-white);

}

 

.copy-link-button:hover {

  border-color: rgba(185, 154, 87, 0.45);

  background: rgba(185, 154, 87, 0.08);

}

 

.setting-row {

  padding: 20px 0;

  border-bottom: 1px solid #ececec;

}

 

.setting-row:last-child {

  border-bottom: none;

}

 

.setting-row h3 {

  margin: 0 0 6px;

}

 

.setting-status {

  font-weight: 700;

  color: var(--color-gold);

}

 

.setting-status.inactive {

  color: var(--color-muted);

}

 

.admin-toast {

  position: fixed;

  right: 25px;

  bottom: 25px;

  z-index: 1000;

  max-width: min(360px, calc(100vw - 50px));

  padding: 14px 18px;

  border-radius: 10px;

  color: var(--color-white);

  background: var(--color-dark);

  opacity: 0;

  pointer-events: none;

  transform: translateY(10px);

  transition: opacity 0.3s, transform 0.3s;

}

 

.admin-toast.show {

  opacity: 1;

  transform: translateY(0);

}

 

.admin-toast.error {

  background: #8f4d4d;

}

 

@media (max-width: 900px) {

  :root {

    --sidebar-width: 230px;

  }

 

  .sidebar {

    padding-left: 18px;

    padding-right: 18px;

  }

 

  .content {

    padding: 44px 34px;

  }

 

  .dashboard-grid {

    grid-template-columns: 1fr;

  }

}

 

@media (max-width: 700px) {

  .app {

    display: block;

  }

 

  .sidebar {

    min-height: auto;

    padding: 18px 16px;

  }

 

  .logo {

    margin-bottom: 18px;

    padding: 0;

    font-size: 19px;

  }

 

  .sidebar nav {

    display: flex;

    gap: 8px;

    overflow-x: auto;

    scrollbar-width: none;

  }

 

  .sidebar nav::-webkit-scrollbar {

    display: none;

  }

 

  .sidebar nav button {

    flex: 0 0 auto;

    width: auto;

    padding: 11px 14px;

    font-size: 12px;

  }

 

  .content {

    padding: 36px 20px;

  }

 

  .section-toolbar,

  .setting-row,

  .qr-item-content {

    align-items: flex-start;

    flex-direction: column;

  }

 

  .request-item,

  .form-grid {

    grid-template-columns: 1fr;

  }

}

 

/* ==========================================================

   MENU EDITOR

========================================================== */

 

.menu-tools {

  margin-bottom: 24px;

 

  display: grid;

  grid-template-columns: minmax(240px, 1fr) minmax(190px, 260px);

  gap: 18px;

}

 

.search-field,

.filter-field {

  display: grid;

  gap: 8px;

}

 

.search-field span,

.filter-field span,

.form-field span {

  color: var(--color-muted);

 

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.05em;

  text-transform: uppercase;

}

 

.search-field input,

.filter-field select,

.form-field input,

.form-field select,

.form-field textarea {

  width: 100%;

  padding: 12px 14px;

 

  border: 1px solid var(--color-border);

  border-radius: 10px;

 

  color: var(--color-text);

  background: var(--color-white);

 

  font: inherit;

}

 

.search-field input:focus,

.filter-field select:focus,

.form-field input:focus,

.form-field select:focus,

.form-field textarea:focus {

  outline: none;

 

  border-color: rgba(185, 154, 87, 0.70);

  box-shadow: 0 0 0 3px rgba(185, 154, 87, 0.12);

}

 

.edit-product-button,

.secondary-action,

.icon-button {

  border: 1px solid var(--color-border);

 

  color: var(--color-text);

  background: var(--color-white);

 

  font-weight: 700;

  cursor: pointer;

}

 

.edit-product-button {

  padding: 8px 12px;

  border-radius: 9px;

}

 

.edit-product-button:hover,

.secondary-action:hover,

.icon-button:hover {

  border-color: rgba(185, 154, 87, 0.48);

  background: rgba(185, 154, 87, 0.08);

}

 

.modal-backdrop {

  position: fixed;

  inset: 0;

  z-index: 1000;

 

  padding: 32px;

 

  display: grid;

  place-items: center;

 

  background: rgba(10, 13, 16, 0.72);

  backdrop-filter: blur(5px);

}

 

.modal-backdrop.hidden {

  display: none;

}

 

.menu-editor-modal {

  width: min(880px, 100%);

  max-height: calc(100vh - 64px);

  overflow-y: auto;

 

  padding: 30px;

 

  border: 1px solid rgba(185, 154, 87, 0.25);

  border-radius: 22px;

 

  background: var(--color-cream);

  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);

}

 

.modal-header {

  margin-bottom: 26px;

 

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 20px;

}

 

.modal-header h2 {

  margin: 5px 0 0;

 

  font-family: Georgia, "Times New Roman", serif;

  font-size: 32px;

  font-weight: 400;

}

 

.modal-eyebrow {

  color: var(--color-gold);

 

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

}

 

.icon-button {

  width: 40px;

  height: 40px;

 

  border-radius: 50%;

 

  font-size: 24px;

  line-height: 1;

}

 

.editor-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 18px;

}

 

.editor-grid-wide {

  grid-column: 1 / -1;

}

 

.form-field textarea {

  resize: vertical;

}

 

.toggle-field {

  min-height: 48px;

  padding: 12px 14px;

 

  display: flex;

  align-items: center;

  gap: 10px;

 

  border: 1px solid var(--color-border);

  border-radius: 10px;

 

  background: var(--color-white);

 

  font-weight: 700;

}

 

.toggle-field input {

  width: 18px;

  height: 18px;

 

  accent-color: var(--color-gold);

}

 

.modal-actions {

  margin-top: 26px;

 

  display: flex;

  justify-content: flex-end;

  gap: 12px;

}

 

.secondary-action {

  padding: 12px 20px;

  border-radius: 12px;

}

 

@media (max-width: 760px) {

  .menu-tools,

  .editor-grid {

    grid-template-columns: 1fr;

  }

 

  .editor-grid-wide {

    grid-column: auto;

  }

 

  .modal-backdrop {

    padding: 14px;

    place-items: start center;

  }

 

  .menu-editor-modal {

    max-height: calc(100vh - 28px);

    padding: 22px;

  }

 

  .modal-actions {

    flex-direction: column-reverse;

  }

 

  .modal-actions button {

    width: 100%;

  }

}

 

 

/* ==========================================================

   OPENING HOURS SAVE ACTION

========================================================== */

 

.form-actions {

  margin-top: 26px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

}

 

.form-actions .form-note {

  margin: 0;

}

 

.form-note.is-success {

  color: #55735b;

}

 

.form-note.is-error {

  color: #9b5555;

}

 

.primary-action:disabled {

  cursor: wait;

  opacity: 0.58;

}

 

@media (max-width: 700px) {

  .form-actions {

    align-items: stretch;

    flex-direction: column;

  }

 

  .form-actions .primary-action {

    width: 100%;

  }

}

 

/* ==========================================================

   WEBSITE SETTINGS EDITOR

========================================================== */

 

.settings-form {

  display: grid;

  gap: 22px;

}

 

.settings-card {

  display: grid;

  gap: 0;

}

 

.setting-control-row {

  min-height: 92px;

  padding: 20px 0;

 

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 28px;

 

  border-bottom: 1px solid #ececec;

}

 

.setting-control-row:first-child {

  padding-top: 0;

}

 

.setting-control-row:last-child {

  padding-bottom: 0;

  border-bottom: none;

}

 

.setting-control-row h3 {

  margin: 0 0 7px;

 

  color: var(--color-dark);

  font-family: Georgia, "Times New Roman", serif;

  font-size: 21px;

  font-weight: 400;

}

 

.setting-control-row p {

  margin: 0;

  color: var(--color-muted);

  line-height: 1.55;

}

 

.switch-control {

  flex: 0 0 auto;

 

  display: inline-flex;

  align-items: center;

  gap: 12px;

 

  cursor: pointer;

  user-select: none;

}

 

.switch-control input {

  position: absolute;

  opacity: 0;

  pointer-events: none;

}

 

.switch-slider {

  position: relative;

 

  width: 52px;

  height: 30px;

 

  border: 1px solid rgba(31, 41, 51, 0.14);

  border-radius: 999px;

 

  background: #d9dadd;

 

  transition: background var(--transition), border-color var(--transition);

}

 

.switch-slider::after {

  content: "";

 

  position: absolute;

  top: 3px;

  left: 3px;

 

  width: 22px;

  height: 22px;

 

  border-radius: 50%;

 

  background: #ffffff;

  box-shadow: 0 3px 8px rgba(15, 20, 25, 0.22);

 

  transition: transform var(--transition);

}

 

.switch-control input:checked + .switch-slider {

  border-color: rgba(85, 115, 91, 0.42);

  background: #6f9277;

}

 

.switch-control input:checked + .switch-slider::after {

  transform: translateX(22px);

}

 

.switch-control input:focus-visible + .switch-slider {

  outline: 3px solid rgba(185, 154, 87, 0.22);

  outline-offset: 3px;

}

 

.switch-label {

  min-width: 58px;

 

  color: #55735b;

 

  font-size: 12px;

  font-weight: 700;

  text-transform: uppercase;

}

 

.switch-label.inactive {

  color: var(--color-muted);

}

 

.announcement-card {

  gap: 24px;

}

 

.announcement-heading {

  padding-bottom: 22px;

  border-bottom: 1px solid #ececec;

}

 

.settings-editor-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 18px;

}

 

.settings-save-bar {

  padding: 22px 26px;

 

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 22px;

 

  border: 1px solid var(--color-border);

  border-radius: var(--radius-medium);

 

  background: rgba(255, 255, 255, 0.86);

  box-shadow: var(--shadow-soft);

}

 

.settings-save-bar .form-note {

  margin: 0;

}

 

@media (max-width: 760px) {

  .setting-control-row,

  .settings-save-bar {

    align-items: flex-start;

    flex-direction: column;

  }

 

  .settings-editor-grid {

    grid-template-columns: 1fr;

  }

 

  .settings-save-bar .primary-action {

    width: 100%;

  }

}

 

/* ==========================================================

   QR CODE MANAGER - VERSION 1.5

========================================================== */

 

.qr-manager-card {

  overflow: hidden;

}

 

.qr-grid {

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 22px;

}

 

.qr-card {

  padding: 24px;

  display: grid;

  grid-template-columns: 180px minmax(0, 1fr);

  gap: 24px;

  align-items: center;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-medium);

  background: var(--color-white);

}

 

.qr-canvas-wrapper {

  min-height: 180px;

  display: grid;

  place-items: center;

  padding: 14px;

  border: 1px solid rgba(31, 41, 51, 0.08);

  border-radius: 16px;

  background: #ffffff;

}

 

.qr-canvas-wrapper canvas {

  display: block;

  width: 150px !important;

  height: 150px !important;

}

 

.qr-card-content {

  min-width: 0;

}

 

.qr-card h3 {

  margin: 0 0 8px;

  color: var(--color-dark);

  font-family: Georgia, "Times New Roman", serif;

  font-size: 22px;

  font-weight: 400;

}

 

.qr-location-key {

  display: inline-flex;

  margin-bottom: 14px;

  padding: 6px 10px;

  border-radius: 999px;

  color: #6f5a2d;

  background: rgba(185, 154, 87, 0.14);

  font-size: 11px;

  font-weight: 700;

}

 

.qr-guest-link {

  margin: 0 0 18px;

  color: var(--color-muted);

  font-size: 12px;

  line-height: 1.5;

  word-break: break-all;

}

 

.qr-card-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}

 

.qr-secondary-action,

.qr-download-button,

.qr-open-button {

  padding: 10px 14px;

  border: 1px solid var(--color-border);

  border-radius: 10px;

  color: var(--color-text);

  background: var(--color-white);

  font-size: 12px;

  font-weight: 700;

  cursor: pointer;

}

 

.qr-secondary-action:hover,

.qr-download-button:hover,

.qr-open-button:hover {

  border-color: rgba(185, 154, 87, 0.45);

  background: rgba(185, 154, 87, 0.08);

}

 

.qr-download-button {

  color: var(--color-white);

  border-color: var(--color-gold);

  background: var(--color-gold);

}

 

.qr-download-button:hover {

  color: var(--color-white);

  background: #a88949;

}

 

.qr-generation-error {

  grid-column: 1 / -1;

  padding: 28px;

  border: 1px solid rgba(168, 95, 95, 0.25);

  border-radius: 14px;

  color: #8f4d4d;

  background: rgba(168, 95, 95, 0.08);

  text-align: center;

}

 

@media (max-width: 1150px) {

  .qr-grid {

    grid-template-columns: 1fr;

  }

}

 

@media (max-width: 700px) {

  .qr-card {

    grid-template-columns: 1fr;

  }

 

  .qr-canvas-wrapper {

    width: 100%;

  }

 

  .qr-card-actions {

    flex-direction: column;

  }

 

  .qr-secondary-action,

  .qr-download-button,

  .qr-open-button {

    width: 100%;

  }

}

 

@media print {

  body {

    background: #ffffff;

  }

 

  .sidebar,

  .page-header,

  .section-toolbar,

  .admin-toast,

  .qr-card-actions {

    display: none !important;

  }

 

  .app,

  .content,

  .admin-page,

  .content-card {

    display: block !important;

    width: 100% !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    box-shadow: none !important;

    background: #ffffff !important;

  }

 

  #page-qr-codes {

    display: block !important;

  }

 

  .qr-grid {

    display: grid !important;

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 12mm !important;

  }

 

  .qr-card {

    break-inside: avoid;

    grid-template-columns: 45mm 1fr;

    padding: 8mm;

    border: 1px solid #d8d8d8;

    box-shadow: none;

  }

 

  .qr-canvas-wrapper {

    min-height: 42mm;

    padding: 3mm;

  }

 

  .qr-canvas-wrapper canvas {

    width: 38mm !important;

    height: 38mm !important;

  }

 

  .qr-guest-link {

    font-size: 8pt;

  }

}

 

/* ==========================================================

   STATISTICS - VERSION 1.6

========================================================== */

 

.statistics-toolbar {

  margin-bottom: 24px;

  padding: 24px 28px;

 

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

 

  border: 1px solid var(--color-border);

  border-radius: var(--radius-medium);

 

  background: rgba(255, 255, 255, 0.86);

  box-shadow: var(--shadow-soft);

}

 

.statistics-toolbar h2,

.statistics-panel-heading h2 {

  margin: 0 0 7px;

 

  color: var(--color-dark);

  font-family: Georgia, "Times New Roman", serif;

  font-size: 24px;

  font-weight: 400;

}

 

.statistics-toolbar p,

.statistics-panel-heading p {

  margin: 0;

 

  color: var(--color-muted);

  font-size: 13px;

  line-height: 1.55;

}

 

.statistics-summary-grid {

  margin-bottom: 24px;

 

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 18px;

}

 

.statistics-card {

  min-height: 170px;

  padding: 24px;

 

  display: flex;

  flex-direction: column;

  justify-content: space-between;

 

  border: 1px solid var(--color-border);

  border-radius: var(--radius-medium);

 

  background: rgba(255, 255, 255, 0.88);

  box-shadow: var(--shadow-soft);

}

 

.statistics-highlight-card {

  color: var(--color-white);

  border-color: rgba(185, 154, 87, 0.22);

  background: linear-gradient(

    145deg,

    rgba(26, 31, 37, 0.98),

    rgba(15, 18, 22, 0.98)

  );

}

 

.statistics-label {

  color: var(--color-muted);

 

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}

 

.statistics-highlight-card .statistics-label,

.statistics-highlight-card .statistics-note {

  color: rgba(255, 255, 255, 0.58);

}

 

.statistics-value {

  color: var(--color-dark);

 

  font-family: Georgia, "Times New Roman", serif;

  font-size: 52px;

  font-weight: 400;

  line-height: 1;

}

 

.statistics-area-value {

  color: var(--color-white);

 

  font-family: Georgia, "Times New Roman", serif;

  font-size: 27px;

  font-weight: 400;

  line-height: 1.15;

}

 

.statistics-note {

  color: var(--color-muted);

 

  font-size: 12px;

  line-height: 1.45;

}

 

.statistics-content-grid {

  display: grid;

  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);

  gap: 22px;

}

 

.statistics-panel {

  min-width: 0;

}

 

.statistics-area-panel {

  grid-column: 1 / -1;

}

 

.statistics-panel-heading {

  margin-bottom: 24px;

}

 

.statistics-bars,

.statistics-area-list,

.statistics-type-list {

  display: grid;

  gap: 15px;

}

 

.statistics-bar-row {

  display: grid;

  grid-template-columns: 50px minmax(0, 1fr) 38px;

  align-items: center;

  gap: 14px;

}

 

.statistics-bar-label {

  color: var(--color-muted);

  font-size: 12px;

  font-weight: 700;

  text-transform: uppercase;

}

 

.statistics-bar-track,

.statistics-area-track {

  height: 12px;

  overflow: hidden;

 

  border-radius: 999px;

 

  background: rgba(31, 41, 51, 0.08);

}

 

.statistics-bar-fill,

.statistics-area-fill {

  display: block;

  height: 100%;

 

  border-radius: inherit;

 

  background: linear-gradient(

    90deg,

    var(--color-gold),

    var(--color-gold-light)

  );

}

 

.statistics-bar-number {

  color: var(--color-dark);

  text-align: right;

}

 

.statistics-type-row {

  min-height: 92px;

  padding: 18px 20px;

 

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

 

  border: 1px solid var(--color-border);

  border-radius: 14px;

 

  background: var(--color-white);

}

 

.statistics-type-row strong {

  display: block;

  color: var(--color-dark);

}

 

.statistics-type-row span {

  display: block;

  margin-top: 5px;

 

  color: var(--color-muted);

  font-size: 12px;

}

 

.statistics-type-value {

  color: var(--color-gold) !important;

 

  font-family: Georgia, "Times New Roman", serif;

  font-size: 38px;

  font-weight: 400 !important;

}

 

.statistics-area-row {

  display: grid;

  gap: 9px;

}

 

.statistics-area-heading {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

}

 

.statistics-area-heading strong {

  color: var(--color-dark);

  font-size: 14px;

}

 

.statistics-area-heading span {

  color: var(--color-muted);

  font-size: 13px;

  font-weight: 700;

}

 

.statistics-area-track {

  height: 10px;

}

 

@media (max-width: 1180px) {

  .statistics-summary-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}

 

@media (max-width: 850px) {

  .statistics-content-grid {

    grid-template-columns: 1fr;

  }

 

  .statistics-area-panel {

    grid-column: auto;

  }

}

 

@media (max-width: 700px) {

  .statistics-toolbar {

    align-items: stretch;

    flex-direction: column;

  }

 

  .statistics-toolbar .primary-action {

    width: 100%;

  }

 

  .statistics-summary-grid {

    grid-template-columns: 1fr;

  }

}

 

/* ==========================================================

   SECURITY AND LOGOUT - VERSION 1.7

========================================================== */

 

.sidebar {

  display: flex;

  flex-direction: column;

}

 

.admin-navigation {

  flex: 1;

}

 

.logout-button {

  width: 100%;

  margin-top: 30px;

  padding: 13px 16px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: var(--radius-small);

  color: rgba(255, 255, 255, 0.70);

  background: rgba(255, 255, 255, 0.04);

  font-weight: 700;

  cursor: pointer;

}

 

.logout-button:hover {

  color: var(--color-white);

  border-color: rgba(185, 154, 87, 0.40);

  background: rgba(185, 154, 87, 0.10);

}

 

.security-gate {

  position: fixed;

  inset: 0;

  z-index: 5000;

  padding: 24px;

  display: grid;

  place-items: center;

  background:

    radial-gradient(circle at top right, rgba(185, 154, 87, 0.18), transparent 34%),

    linear-gradient(150deg, #171b20 0%, #0d1013 100%);

}

 

.security-gate.hidden {

  display: none;

}

 

.security-card {

  width: min(470px, 100%);

  padding: 42px;

  border: 1px solid rgba(185, 154, 87, 0.28);

  border-radius: 24px;

  background: var(--color-cream);

  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.36);

}

 

.security-eyebrow {

  color: var(--color-gold);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

}

 

.security-card h1 {

  margin: 10px 0 12px;

  color: var(--color-dark);

  font-family: Georgia, "Times New Roman", serif;

  font-size: 38px;

  font-weight: 400;

  line-height: 1.08;

}

 

.security-card > p {

  margin: 0 0 28px;

  color: var(--color-muted);

  line-height: 1.6;

}

 

.security-field {

  display: grid;

  gap: 8px;

}

 

.security-field span {

  color: var(--color-muted);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.05em;

  text-transform: uppercase;

}

 

.security-field input {

  width: 100%;

  padding: 14px 15px;

  border: 1px solid var(--color-border);

  border-radius: 11px;

  color: var(--color-text);

  background: var(--color-white);

  font: inherit;

}

 

.security-field input:focus {

  outline: none;

  border-color: rgba(185, 154, 87, 0.70);

  box-shadow: 0 0 0 3px rgba(185, 154, 87, 0.12);

}

 

.security-error {

  min-height: 20px;

  margin: 12px 0;

  color: #9b5555;

  font-size: 13px;

}

 

.security-submit {

  width: 100%;

}

 

@media (max-width: 700px) {

  .logout-button {

    width: auto;

    margin: 14px 0 0;

  }

 

  .security-card {

    padding: 30px 24px;

  }

 

  .security-card h1 {

    font-size: 32px;

  }

}