/*
 * Modern Telegram Mini App Design for PAX KWORK
 * Dark theme with glassmorphism effects and smooth animations
 * Optimized for mobile-first approach
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Color Palette */
  --bg-primary: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  --bg-card: rgba(255, 255, 255, 0.08);
  --bg-card-hover: rgba(255, 255, 255, 0.12);
  --accent-primary: #00d4ff;
  --accent-secondary: #ff6b35;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --text-muted: #6b7280;
  --border-color: rgba(255, 255, 255, 0.1);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-button: 0 4px 16px rgba(0, 212, 255, 0.3);
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  /* Add top margin so that the first card does not overlap with the header */
  margin-top: var(--spacing-lg);
}

/* Header - Simplified for Telegram Mini App */
.site-header {
  background: rgba(26, 26, 46, 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-color);
  padding: var(--spacing-sm) 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header .logo img {
  height: 32px;
  filter: brightness(1.2);
}

.main-nav {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}

.main-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.main-nav a:hover {
  color: var(--text-primary);
  background: var(--bg-card);
}

/* Cards with Glassmorphism */
.card {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-card);
  transition: background var(--transition-normal), box-shadow var(--transition-normal);
  /* Remove entrance animation and initial offset.  Cards should be
     static and fully opaque on desktop to prevent sliding effects */
  opacity: 1;
  transform: none;
}

.card:hover {
  background: var(--bg-card-hover);
  /* Remove vertical translation on hover to avoid shifting the layout */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.card h1, .card h2, .card h3 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  font-weight: 600;
}

.card h1 {
  font-size: 24px;
  text-align: center;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card h2 {
  font-size: 20px;
}

.card h3 {
  font-size: 18px;
}

.card p {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  line-height: 1.7;
}

/* Forms */
form {
  margin-top: var(--spacing-md);
}

label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: 500;
  color: var(--text-primary);
  font-size: 14px;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: var(--spacing-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 16px;
  margin-bottom: var(--spacing-md);
  transition: all var(--transition-fast);
  backdrop-filter: blur(10px);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

textarea {
  resize: vertical;
  min-height: 120px;
}

/* Buttons */
button,
input[type="submit"],
.btn {
  background: linear-gradient(135deg, var(--accent-primary), #0099cc);
  color: var(--text-primary);
  padding: var(--spacing-md) var(--spacing-xl);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: var(--shadow-button);
  position: relative;
  overflow: hidden;
  min-height: 48px;
}

button:hover,
input[type="submit"]:hover,
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 212, 255, 0.4);
}

button:active,
input[type="submit"]:active,
.btn:active {
  transform: translateY(0);
}

.btn-secondary {
  background: linear-gradient(135deg, var(--accent-secondary), #e55a2b);
  box-shadow: 0 4px 16px rgba(255, 107, 53, 0.3);
}

.btn-secondary:hover {
  box-shadow: 0 8px 24px rgba(255, 107, 53, 0.4);
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

.btn-success {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

/* Cookie consent banner */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-color);
  padding: var(--spacing-md);
  display: none;
  z-index: 200;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
  color: var(--text-primary);
}
.cookie-banner p {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: 14px;
}
.cookie-banner a {
  color: var(--accent-primary);
  text-decoration: underline;
}
.cookie-banner button {
  margin-top: var(--spacing-xs);
}

/* Consent checkbox styling */
input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-primary);
  cursor: pointer;
}

/* Footer legal links */
.legal-footer-links a {
  color: var(--text-secondary);
  font-size: 12px;
  text-decoration: none;
}
.legal-footer-links a:hover {
  color: var(--accent-primary);
  text-decoration: underline;
}

.btn-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}

/* Flash Messages */
.flashes {
  list-style: none;
  padding: 0;
  margin-bottom: var(--spacing-lg);
}

.flash {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  backdrop-filter: blur(20px);
  border: 1px solid;
  animation: slideDown 0.4s ease forwards;
}

.flash-success {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  color: #34d399;
}

.flash-info {
  background: rgba(0, 212, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.3);
  color: var(--accent-primary);
}

.flash-warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}

.flash-danger {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

/* Lists and Navigation */
.order-list {
  list-style: none;
  padding: 0;
}

.order-list li {
  margin-bottom: var(--spacing-sm);
}

.order-list a {
  display: block;
  padding: var(--spacing-md);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  transition: all var(--transition-fast);
  backdrop-filter: blur(20px);
}

.order-list a:hover {
  background: var(--bg-card-hover);
  transform: translateX(4px);
  border-color: var(--accent-primary);
}

/* Chat */
.chat-box {
  max-height: 400px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  backdrop-filter: blur(20px);
}

.chat-message {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-primary);
}

.chat-message .sender {
  font-weight: 600;
  color: var(--accent-primary);
  margin-right: var(--spacing-sm);
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-lg);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  backdrop-filter: blur(20px);
  /* Use fixed table layout so columns distribute evenly and content doesn't shift on mobile */
  table-layout: fixed;
}

/* News Images */
.news-item img,
.news-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
}

/* Input with icon styles for registration and login forms */
.input-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: var(--spacing-md);
}

.input-wrapper input {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) 48px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 16px;
  transition: all var(--transition-fast);
  backdrop-filter: blur(10px);
}

.input-wrapper input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
}

.input-wrapper input::placeholder {
  color: var(--text-muted);
}

.input-wrapper .input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.8;
}

/* Specific icons for different input types */
.input-wrapper.login .input-icon {
  background-image: url('../images/icons/user_icon.png');
}
.input-wrapper.password .input-icon {
  background-image: url('../images/icons/lock_icon.png');
}
.input-wrapper.phone .input-icon {
  background-image: url('../images/icons/phone_icon.png');
}
.input-wrapper.email .input-icon {
  background-image: url('../images/icons/email_icon.png');
}

/* Styles for radio/option cards used in role and account selection */
label.radio-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  backdrop-filter: blur(20px);
}

label.radio-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-primary);
}

label.radio-card input[type="radio"] {
  display: none;
}

label.radio-card span {
  display: block;
  color: var(--text-primary);
  font-size: 16px;
}

/* When the radio is checked, highlight the card */
label.radio-card input[type="radio"]:checked + span {
  color: var(--accent-primary);
  font-weight: 600;
}

/* Theme toggle button styles */
.theme-toggle-btn {
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--accent-primary);
  cursor: pointer;
  transition: color var(--transition-fast);
  margin-left: auto;
}

.theme-toggle-btn:hover {
  color: var(--accent-secondary);
}

/* Light theme overrides.  When [data-theme="light"] is applied to the <html> element,
   these variables take precedence over the defaults above. */
[data-theme='light'] {
  --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #e2e8f0 100%);
  --bg-card: rgba(255, 255, 255, 0.6);
  --bg-card-hover: rgba(255, 255, 255, 0.7);
  --accent-primary: #007acc;
  --accent-secondary: #ff6633;
  --text-primary: #1a202c;
  --text-secondary: #4a5568;
  --text-muted: #6b7280;
  --border-color: rgba(0, 0, 0, 0.1);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-button: 0 4px 16px rgba(0, 122, 204, 0.2);
}

/*
  Override header and footer styles when the light theme is active.
  The dark default header/footer backgrounds become difficult to
  distinguish from the light page content when scrolling.  These
  selectors lighten the backgrounds and adjust border colours to
  maintain the glassmorphism effect while fitting the light palette.
*/
[data-theme='light'] .site-header {
  background: rgba(245, 247, 250, 0.9);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  /* Remove blur effect in light mode to prevent darkening when scrolling */
  backdrop-filter: none;
}
[data-theme='light'] .site-footer {
  background: rgba(245, 247, 250, 0.9);
  border-top: 1px solid var(--border-color);
  color: var(--text-secondary);
  backdrop-filter: none;
}

th, td {
  padding: var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

th {
  background: rgba(0, 212, 255, 0.1);
  font-weight: 600;
  color: var(--accent-primary);
}

td {
  color: var(--text-secondary);
  /* Prevent dates and other values from wrapping into multiple lines on small screens */
  white-space: nowrap;
}

/*
  When tables are placed inside a scroll container, allow horizontal scrolling on
  narrow screens.  The .table-responsive wrapper should be added in templates
  around <table> elements to prevent overflow and misalignment on mobile.
*/
.table-responsive {
  overflow-x: auto;
  width: 100%;
}

/* Footer */
.site-footer {
  background: rgba(26, 26, 46, 0.9);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-color);
  color: var(--text-secondary);
  text-align: center;
  padding: var(--spacing-lg) 0;
  margin-top: var(--spacing-2xl);
  font-size: 14px;
}

/*
  Company information columns in the footer.  On small screens the
  columns stack vertically; on larger screens they form a horizontal
  row with equal widths.  Links inherit the accent colour for
  better readability on both dark and light themes.
*/
.company-columns {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}
.company-col a {
  color: var(--accent-primary);
  text-decoration: underline;
}
@media (min-width: 600px) {
  .company-columns {
    flex-direction: row;
    justify-content: space-between;
  }
  .company-col {
    flex: 1;
    min-width: 180px;
  }
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }

.template-type {
  font-weight: 600;
  margin-top: var(--spacing-md);
  color: var(--accent-primary);
}

/* Animations */
@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.pulse {
  animation: pulse 2s infinite;
}

/* Responsive Design */
@media (max-width: 480px) {
  .container {
    padding: 0 var(--spacing-sm);
  }
  
  .card {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }
  
  .card h1 {
    font-size: 20px;
  }
  
  button,
  input[type="submit"],
  .btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 14px;
  }
  
  .main-nav {
    gap: var(--spacing-sm);
  }
  
  .main-nav a {
    font-size: 12px;
    padding: var(--spacing-xs);
  }
}

/*
  Responsive adjustments for larger screens.  On tablet and desktop
  devices the container widens and the navigation adapts from a
  drawer to a horizontal bar.  These rules prevent overlapping
  content by allowing more space for cards and forms while hiding
  the mobile drawer mechanics.
*/
@media (min-width: 600px) {
  .container {
    max-width: 560px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 640px;
  }
  /* On larger screens we simply widen the container moderately.  The drawer
     navigation remains accessible via the hamburger button for
     consistency across devices. */
}

@media (min-width: 1024px) {
  .container {
    max-width: 720px;
  }
}

/* Stagger Animation for Cards */
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }

/* Loading States */
.loading {
  position: relative;
  overflow: hidden;
}

.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  100% {
    left: 100%;
  }
}

/* ------------------------------------------------------------------ */
/* Drawer (Шторка) Navigation Styles                                  */
/* A slide‑out panel that holds all navigation links.  It is hidden
   off‑screen by default and toggles into view when the hamburger
   button is clicked.  A semi‑transparent overlay darkens the rest
   of the interface while the drawer is open.  These styles are
   mobile friendly and fit naturally with the existing dark theme. */
.menu-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4px;
}

.menu-toggle .bar {
  width: 24px;
  height: 2px;
  background-color: var(--text-primary);
  margin: 3px 0;
  transition: all var(--transition-fast);
}

/* The overlay that appears when the drawer is open */
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 150;
}
.drawer-overlay.open {
  display: block;
}

/* The drawer itself */
.drawer-menu {
  position: fixed;
  top: 0;
  left: -80%;
  width: 80%;
  max-width: 320px;
  height: 100%;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border-right: 1px solid var(--border-color);
  padding: var(--spacing-lg);
  transition: all var(--transition-normal);
  z-index: 200;
  overflow-y: auto;
}
.drawer-menu.open {
  left: 0;
}

/* Links inside the drawer */
.drawer-menu nav a {
  display: block;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 16px;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-color);
  transition: color var(--transition-fast);
}
.drawer-menu nav a:last-child {
  border-bottom: none;
}
.drawer-menu nav a:hover {
  color: var(--accent-primary);
}