/* static.css - Theme variables and base styles */
@import url('../../business/css/searchInputActions-scopes.css');

:root {
  /* Light theme colors */
  --sapphire-blue: #05117a;
  --electric-lime: #0aaa0a;
  --bold-green: #057205;
  --warm-white: #FAFAFA;
  --dark-background: #020202;
  --dark-surface: #0a0a0a;
  --primary-text: #000000;
  --primary-text-dark: #FFFFFF;
  --secondary-text-light: #CCCCCC; 
  --secondary-text: #FAFAFA;
  --secondary-text-dark: #666666;
  --accent: #4A90E2;
  --accent-dark: #66B2FF;
  --surface: #FFFFFF;
  --surface-dark: #020202;
  
  /* RGB values for rgba() usage */
  --sapphire-blue-rgb: 0, 102, 204;  /* #0066CC */
  --electric-lime-rgb: 6, 197, 6;    /* #06C506 */
  --surface-color-rgb: 255, 255, 255; /* #FFFFFF */
  --navbar-icon-color-rgb: 5, 17, 122;
  
  /* Border colors */
  --border: #E0E0E0;
  --border-dark: #0c0c0c;
  
  /* Other variables */
  --selected-bg-color: #ff4757;
  --toggle-gradient-bg: linear-gradient(315deg, var(--sapphire-blue), var(--electric-lime));
  --dark-stat-color: #333333;
  
  /* Current theme defaults (light) */
  --bg-color: var(--warm-white);
  --text-color: var(--primary-text);
  --secondary-text-color: var(--secondary-text-dark);
  --heading-text-color: var(--primary-text-dark);
  --surface-color: var(--surface);
  --border-color: var(--border);
  --accent-color: var(--accent);
  --navbar-icon-color: var(--sapphire-blue);
  --card-bg: var(--surface);
  --small-bg-color: var(--electric-lime);
  --tertiary-text-color: var(--primary-text);
  --placeholder-text-color: var(--dark-surface);
  --stat-label-color: var(--dark-stat-color);

  /* Hotel Admin (owner) page headers — use in each hotelAdmin*.css / hotel.css */
  --htl-admin-header-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /* +30% vs original clamp (1.35/3.75/1.875 and 0.9/3/1.3125) */
  --htl-admin-header-title-size: clamp(1.76rem, 4.875vw, 2.44rem);
  --htl-admin-header-subtitle-size: clamp(1.17rem, 3.9vw, 1.71rem);
  --htl-admin-header-title-color: var(--text-color);
  --htl-admin-header-subtitle-gradient: linear-gradient(135deg, var(--sapphire-blue), var(--electric-lime));
  --htl-admin-header-block-margin-bottom: 18px;
}

[data-theme="dark"] {
  --bg-color: var(--dark-background);
  --text-color: var(--primary-text-dark);
  --secondary-text-color: var(--secondary-text);
  --heading-text-color: var(--primary-text-dark);
  --surface-color: var(--surface-dark);
  --border-color: var(--border-dark);
  --accent-color: var(--accent-dark);
  --navbar-icon-color: var(--electric-lime);
  --card-bg: var(--dark-surface);
  --small-bg-color: var(--electric-lime);
  --tertiary-text-color: var(--secondary-text);
  --placeholder-text-color: var(--secondary-text-light);
  --stat-label-color: var(--secondary-text);
  
  /* RGB values for dark theme */
  --surface-color-rgb: 2, 2, 2;        /* #020202 */
  --navbar-icon-color-rgb: 6, 197, 6;  /* #06C506 */
  --sapphire-blue-rgb: 0, 102, 204;    /* Keep same for gradients */
  --electric-lime-rgb: 6, 197, 6;      /* #06C506 */
}
/* Gradient styles */
.primary-gradient {
  background: linear-gradient(135deg, var(--sapphire-blue), var(--electric-lime));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.primary-gradient-bg {
  background: linear-gradient(135deg, var(--sapphire-blue), var(--electric-lime));
}

/* Hotel UI: default guest/customer avatar when no photo (/assets/image/avatar.png) */
.htl-guest-thumb--placeholder {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.htl-guest-thumb-img--placeholder,
.htl-guest-thumb--placeholder > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  padding: 0;
  box-sizing: border-box;
}

/* Real consumer/OAuth portraits — clean circle; inset photo via padding */
.htl-guest-thumbnail:not(.htl-guest-thumb--placeholder),
.htl-customer-thumbnail:not(.htl-guest-thumb--placeholder),
.htl-ko-customer-thumbnail:not(.htl-guest-thumb--placeholder),
.htl-res-guest-thumbnail:not(.htl-guest-thumb--placeholder),
.htl-res-past-guest-thumbnail:not(.htl-guest-thumb--placeholder),
.htl-res-detail-guest-thumbnail:not(.htl-guest-thumb--placeholder),
.htl-gst-detail-header-avatar:not(.htl-guest-thumb--placeholder),
.htl-gst-card-compact-avatar:not(.htl-guest-thumb--placeholder) {
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none;
  padding: 5px;
  box-sizing: border-box;
  overflow: hidden;
  aspect-ratio: 1;
  flex-shrink: 0;
  line-height: 0;
  display: block;
}

.htl-guest-thumbnail:not(.htl-guest-thumb--placeholder),
.htl-ko-customer-thumbnail:not(.htl-guest-thumb--placeholder),
.htl-res-guest-thumbnail:not(.htl-guest-thumb--placeholder),
.htl-res-past-guest-thumbnail:not(.htl-guest-thumb--placeholder) {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

.htl-customer-thumbnail:not(.htl-guest-thumb--placeholder) {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}

.htl-res-detail-guest-thumbnail:not(.htl-guest-thumb--placeholder) {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
}

/* Real portraits — circular clip inside padded shell */
.htl-guest-thumbnail:not(.htl-guest-thumb--placeholder) > img,
.htl-customer-thumbnail:not(.htl-guest-thumb--placeholder) > img,
.htl-ko-customer-thumbnail:not(.htl-guest-thumb--placeholder) > img,
.htl-res-guest-thumbnail:not(.htl-guest-thumb--placeholder) > img,
.htl-res-detail-guest-thumbnail:not(.htl-guest-thumb--placeholder) > img,
.htl-res-past-guest-thumbnail:not(.htl-guest-thumb--placeholder) > img,
.htl-gst-detail-header-avatar:not(.htl-guest-thumb--placeholder) > img,
.htl-gst-card-compact-avatar:not(.htl-guest-thumb--placeholder) > img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}