/* ============================================================
   TETRUS Design System — custom_main.css
   Modern light corporate theme for Platform Tetrus
   Colors extracted from original Tetrus logos:
     Teal / Cyan  : #31B4CB (hex), #1A96A8 (high contrast text)
     Mint / Aqua  : #59CBC2
     Mint Green   : #60C78B
     Fresh Lime   : #73D04A
     Charcoal Text: #2C3338 / #3A3A3A
     Sidebar Light: #F3F6F9 (border #E1E7EE)
   ============================================================ */

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

:root {
  /* Brand colors */
  --tetrus-primary:       #1A96A8;
  --tetrus-primary-dark:  #137A89;
  --tetrus-cyan:          #31B4CB;
  --tetrus-mint:          #59CBC2;
  --tetrus-green:         #60C78B;
  --tetrus-lime:          #73D04A;
  --tetrus-dark:          #2C3338;
  --tetrus-text-muted:    #6B7A82;

  /* Brand gradients */
  --tetrus-gradient:      linear-gradient(135deg, #1A96A8 0%, #3DB49E 50%, #60C78B 100%);
  --tetrus-gradient-lime: linear-gradient(135deg, #1A96A8 0%, #4CB988 50%, #73D04A 100%);
  --tetrus-gradient-btn:  linear-gradient(135deg, #1A96A8 0%, #35A68B 100%);
  --tetrus-gradient-btn-hover: linear-gradient(135deg, #137A89 0%, #2A8C74 100%);
  --profile-bg:           linear-gradient(135deg, #1A96A8 0%, #31B4CB 60%, #59CBC2 100%);

  /* Sidebar */
  --sidebar-bg:           #F3F6F9;
  --sidebar-border:       #E1E7EE;
  --sidebar-text:         #4A5B68;
  --sidebar-text-muted:   #7E909D;
  --sidebar-active-bg:    #E2F3F6;
  --sidebar-active-color: #1A96A8;
  --sidebar-hover-bg:     rgba(26, 150, 168, 0.08);

  /* Content & cards */
  --main-bg:              #F8FAFC;
  --card-radius:          12px;
  --card-shadow:          0 2px 12px rgba(26, 75, 95, 0.06);
  --card-border:          1px solid rgba(26, 150, 168, 0.12);

  /* Buttons */
  --btn-radius:           8px;
  --btn-primary-shadow:   0 4px 14px rgba(26, 150, 168, 0.25);
}

body {
  font-family: 'Inter', 'Muli', Arial, sans-serif !important;
  color: var(--tetrus-dark);
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR
   Exact attributes: data-background-color="black" data-active-color="danger"
   ══════════════════════════════════════════════════════════════ */

/* Override pseudo-elements that paint dark sidebar bg */
.sidebar[data-background-color="black"]:after,
.sidebar[data-background-color="black"]:before {
  background-color: var(--sidebar-bg) !important;
}

/* Sidebar wrapper */
.sidebar[data-background-color="black"] .sidebar-wrapper {
  background-color: var(--sidebar-bg) !important;
  background-image: none !important;
  box-shadow: inset -1px 0 0 0 var(--sidebar-border) !important;
}

/* Non-active nav links */
.sidebar[data-background-color="black"] .nav li:not(.active) > a,
.sidebar[data-background-color="black"] .nav li:not(.active) > p > a {
  color: var(--sidebar-text) !important;
  opacity: 1 !important;
}

/* Divider */
.sidebar[data-background-color="black"] .nav .divider {
  background-color: var(--sidebar-border) !important;
}

/* Logo text */
.sidebar[data-background-color="black"] .logo p,
.sidebar[data-background-color="black"] .logo .simple-text {
  color: var(--tetrus-dark) !important;
  font-weight: 700 !important;
}

/* Nav links base style */
.sidebar .nav li > a,
.sidebar .nav li > p {
  border-radius: 8px !important;
  margin: 2px 10px !important;
  padding: 8px 15px !important;
  transition: background-color 0.18s ease, color 0.18s ease !important;
}

/* Hover */
.sidebar .nav li:hover > a {
  background-color: var(--sidebar-hover-bg) !important;
  color: var(--tetrus-primary) !important;
  opacity: 1 !important;
}

/* Icons */
.sidebar .nav i:not(.fa) {
  color: var(--sidebar-text-muted) !important;
}
.sidebar .nav li:hover > a i:not(.fa) {
  color: var(--tetrus-primary) !important;
}

/* ACTIVE nav item */
.sidebar[data-active-color="danger"] .nav li.active > a {
  color: var(--tetrus-primary) !important;
  background-color: var(--sidebar-active-bg) !important;
  border-left: 3px solid var(--tetrus-cyan) !important;
  border-radius: 8px !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}
.sidebar[data-active-color="danger"] .nav li.active > a i:not(.fa) {
  color: var(--tetrus-primary) !important;
}

/* Remove old triangle markers */
.sidebar .nav li.active > a:before,
.sidebar .nav li.active > a:after {
  display: none !important;
  border: none !important;
  content: none !important;
}

.sidebar .nav p, .off-canvas-sidebar .nav p {
  text-transform: none !important;
}

/* ── User profile block (top of sidebar) ───────────────────── */
.logo-avatar {
  background: var(--profile-bg) !important;
  border-bottom: 1px solid rgba(49, 180, 203, 0.30) !important;
}

.sidebar .logo-avatar .logo-options .button-wbutton .material-icons,
.sidebar .logo-avatar .logo-options a i,
.logo-avatar .logo-options .material-icons,
.logo-avatar .logo-options i,
.logo-options .button-wbutton .material-icons {
  color: #ffffff !important;
  opacity: 0.9 !important;
}
.sidebar .logo-avatar .logo-options a:hover .material-icons,
.sidebar .logo-avatar .logo-options a.active .material-icons,
.logo-avatar .logo-options a:hover i,
.logo-avatar .logo-options a.active i {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════
   CONTENT AREA
   ══════════════════════════════════════════════════════════════ */
.main-panel:not(.panel-full-size) {
  background-color: var(--main-bg) !important;
}

/* ══════════════════════════════════════════════════════════════
   LANDING HEADER (top banner)
   ══════════════════════════════════════════════════════════════ */
.landing-top-background {
  position: relative !important;
  background: linear-gradient(135deg, rgba(234, 245, 248, 0.85) 0%, rgba(240, 250, 245, 0.85) 100%), url('header.png') !important;
  background-size: cover !important;
  background-position: 50% 50% !important;
  height: 120px !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 4px 20px rgba(26, 150, 168, 0.10) !important;
}

/* Header logo */
.landing-top-background::before {
  content: '' !important;
  position: absolute !important;
  top: 12px !important;
  right: 20px !important;
  width: 145px !important;
  height: 48px !important;
  background-image: url('config_header_logo.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: top right !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

/* Action buttons in header */
.landing-button {
  display: inline-block !important;
  line-height: 32px !important;
  font-size: 0.88em !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(26, 150, 168, 0.25) !important;
  border-radius: 8px !important;
  color: var(--tetrus-primary) !important;
  font-weight: 600 !important;
  padding: 0 14px !important;
  margin: 0 4px !important;
  box-shadow: 0 2px 8px rgba(26, 150, 168, 0.10) !important;
  transition: all 0.2s ease !important;
}
.landing-button:hover {
  background: var(--tetrus-gradient-btn) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(26, 150, 168, 0.28) !important;
  transform: translateY(-1px) !important;
}

/* Profile name block in header */
.landing-name-wrapper {
  background-color: rgba(30, 58, 70, 0.65) !important;
  border-radius: 24px !important;
  padding: 0 20px 0 54px !important;
  border: none !important;
  height: 46px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
}
.landing-profile-name {
  color: #ffffff !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}
.landing-profile-rooms {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 1.1em !important;
  line-height: 1.2 !important;
}
.landing-avatar-wrapper {
  border-color: rgba(255, 255, 255, 0.7) !important;
}

/* ══════════════════════════════════════════════════════════════
   LOGIN / SPLASH PAGE
   ══════════════════════════════════════════════════════════════ */
.main-page-image {
  background-image: url('back.png') !important;
  background-position: 50% 50% !important;
  background-size: cover !important;
}

.wizard-card {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px rgba(26, 150, 168, 0.12), 0 4px 16px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.wizard-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 48px rgba(26, 150, 168, 0.18), 0 6px 20px rgba(0, 0, 0, 0.06) !important;
}

.wizard-title, .col-logo-container {
  color: var(--tetrus-primary) !important;
  font-weight: 700 !important;
}

.input-field input[type="text"]:focus,
.input-field input[type="password"]:focus,
.input-field input[type="email"]:focus {
  border-bottom: 2px solid var(--tetrus-cyan) !important;
  box-shadow: 0 1px 0 0 var(--tetrus-cyan), 0 0 8px rgba(49, 180, 203, 0.35) !important;
}
.input-field label.active {
  color: var(--tetrus-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS — Unified 8px radius, brand gradients
   ══════════════════════════════════════════════════════════════ */

/* Primary & auth actions */
.btn-primary,
.signup-confirm-button,
.signup-action-button {
  background: var(--tetrus-gradient-btn) !important;
  border: none !important;
  border-radius: var(--btn-radius) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: none !important;
  box-shadow: var(--btn-primary-shadow) !important;
  transition: all 0.2s ease !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.signup-confirm-button:hover, .signup-confirm-button:focus, .signup-confirm-button:active,
.signup-action-button:hover, .signup-action-button:focus, .signup-action-button:active {
  background: var(--tetrus-gradient-btn-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(26, 150, 168, 0.38) !important;
  transform: translateY(-1px) !important;
  border-color: transparent !important;
}

/* Success button — Lime / Mint gradient (e.g. "СОЗДАТЬ КОМНАТУ") */
.btn-success {
  background: linear-gradient(135deg, #1A96A8 0%, #3DB49E 40%, #73D04A 100%) !important;
  border: none !important;
  border-radius: var(--btn-radius) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: none !important;
  box-shadow: 0 4px 14px rgba(115, 208, 74, 0.28) !important;
  transition: all 0.2s ease !important;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
  background: linear-gradient(135deg, #147D8C 0%, #329A86 40%, #62B83D 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(115, 208, 74, 0.40) !important;
  transform: translateY(-1px) !important;
  border-color: transparent !important;
}

/* Danger button */
.btn-danger {
  background: linear-gradient(135deg, #e53935 0%, #b71c1c 100%) !important;
  border: none !important;
  border-radius: var(--btn-radius) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  text-transform: none !important;
  box-shadow: 0 4px 14px rgba(183, 28, 28, 0.25) !important;
  transition: all 0.2s ease !important;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  background: linear-gradient(135deg, #ef5350 0%, #c62828 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(183, 28, 28, 0.38) !important;
  transform: translateY(-1px) !important;
}

/* Warning button */
.btn-warning {
  background: linear-gradient(135deg, #fb8c00 0%, #e65100 100%) !important;
  border: none !important;
  border-radius: var(--btn-radius) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  text-transform: none !important;
  box-shadow: 0 4px 14px rgba(230, 81, 0, 0.25) !important;
  transition: all 0.2s ease !important;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(230, 81, 0, 0.38) !important;
  transform: translateY(-1px) !important;
}

/* ── FullCalendar buttons ─────────────────────────────────── */
.fc button,
.fc .fc-button,
.fc .fc-button-primary,
.fc button.fc-state-default,
.fc .fc-button-group button,
.fc-state-default {
  background: var(--tetrus-gradient-btn) !important;
  background-color: var(--tetrus-primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--btn-radius) !important;
  font-weight: 600 !important;
  padding: 5px 16px !important;
  box-shadow: 0 3px 10px rgba(26, 150, 168, 0.20) !important;
  text-shadow: none !important;
  height: auto !important;
  text-transform: none !important;
  font-size: 12px !important;
  letter-spacing: 0.2px !important;
  transition: all 0.2s ease !important;
  opacity: 1 !important;
}
.fc button span,
.fc .fc-button span,
.fc button .fc-icon,
.fc .fc-button .fc-icon,
.fc-icon,
.fc-icon::before {
  color: #ffffff !important;
  border-color: #ffffff !important;
}
.fc button:hover,
.fc .fc-button:hover,
.fc .fc-button-primary:hover,
.fc button.fc-state-hover {
  background: var(--tetrus-gradient-btn-hover) !important;
  background-color: var(--tetrus-primary-dark) !important;
  box-shadow: 0 5px 14px rgba(26, 150, 168, 0.32) !important;
  color: #ffffff !important;
}
.fc button.fc-state-active,
.fc button.fc-state-down,
.fc .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--tetrus-primary-dark) !important;
  background-color: var(--tetrus-primary-dark) !important;
  color: #ffffff !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}
.fc button.fc-state-disabled,
.fc .fc-button:disabled {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  opacity: 0.6 !important;
}

/* ══════════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════════ */
.card {
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  border: var(--card-border) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(26, 75, 95, 0.11) !important;
}

/* ══════════════════════════════════════════════════════════════
   CHAT & MESSAGING
   ══════════════════════════════════════════════════════════════ */
.im-mess-stack, .im-mess-double {
  padding: 4px 0 !important;
}

.im-mess-stack-content {
  width: auto !important;
  background: #ffffff !important;
  padding: 12px 18px !important;
  border-radius: 16px !important;
  display: inline-block !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.im-mess-my-message {
  background-color: #E3F4F7 !important;
  border: 1px solid rgba(49, 180, 203, 0.25) !important;
  color: var(--tetrus-dark) !important;
}

.im-dialog-selected {
  background-color: #E2F3F6 !important;
  border-left: 3px solid var(--tetrus-cyan) !important;
}

.im-messages-container {
  padding-bottom: 25px !important;
  background-image: url('chat_bg.png') !important;
  background-repeat: repeat !important;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE (off-canvas sidebar)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .off-canvas-sidebar,
  .off-canvas-sidebar .sidebar-wrapper,
  .off-canvas-sidebar .nav-container,
  .off-canvas-sidebar::after,
  .off-canvas-sidebar::before {
    background-color: var(--sidebar-bg) !important;
    background-image: none !important;
  }
  .off-canvas-sidebar .nav li:not(.active) > a {
    color: var(--sidebar-text) !important;
  }
  .off-canvas-sidebar .nav li.active > a {
    color: var(--tetrus-primary) !important;
  }
  .landing-top-background::before {
    right: 80px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   PROFILE PAGE — Balance & Action Buttons
   ══════════════════════════════════════════════════════════════ */
#openTopupBtn,
#goToGamingBtn {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.50) !important;
  border-radius: var(--btn-radius) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10) !important;
  transition: all 0.2s ease !important;
}
#openTopupBtn:hover,
#goToGamingBtn:hover {
  background: rgba(255, 255, 255, 0.38) !important;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.18) !important;
  transform: translateY(-1px) !important;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE FIXES FOR TOPUP & BALANCE CARDS
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  div[style*="gap: 20px; max-width: 600px"] {
    flex-direction: column !important;
    gap: 15px !important;
  }
  
  #topupBalanceModal .modal-dialog {
    margin: 15px !important;
    width: auto !important;
  }
  #topupBalanceModal .modal-body,
  #topupBalanceModal .modal-header {
    padding: 16px !important;
  }
  
  #topupBalanceModal .credit-card-preview {
    padding: 16px !important;
  }
  #topupBalanceModal #cardNumPreview {
    font-size: 1.15em !important;
  }
  
  #topupStep2CardContainer > div:nth-child(4) {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  #topupStep2CardContainer > div:last-child,
  #ymWalletForm > div:last-child,
  #ymSmsConfirmation > div:last-child {
    flex-direction: column !important;
  }
  #topupStep2CardContainer > div:last-child button,
  #ymWalletForm > div:last-child button,
  #ymSmsConfirmation > div:last-child button {
    width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ANIMATIONS & EFFECTS
   ══════════════════════════════════════════════════════════════ */
@keyframes pageFadeIn {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes floatLogo {
  0%   { transform: translateY(0px) rotate(0deg); }
  50%  { transform: translateY(-6px) rotate(1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.logo-restore-container .logo img,
.col-logo-wrapper .logo img {
  filter: drop-shadow(0 4px 10px rgba(26, 150, 168, 0.25)) !important;
  animation: floatLogo 4s ease-in-out infinite !important;
}