/* =========================
   telehub.site - styles.css (final)
   ========================= */

/* Vars + base mobile-first */
:root{
  --sidebar-w: 180px;
  --space: clamp(12px, 2vw, 24px);
}
*{ box-sizing: border-box }
html{ font-size: 100% }
img,video,iframe{ max-width:100%; height:auto; display:block }
input,button,select,textarea{ 
  font-family: inherit; 
  min-height:44px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Body */
body{
  margin: 0;
  font-family: 'Inter','Segoe UI',Arial,sans-serif;
  background: #181a20;
  color: #e0e0e0;
  font-size: 15px;
  line-height: 1.5;
}

/* Login */
.login-bg{
  background: linear-gradient(120deg,#181a20 60%,#232946 100%);
  min-height: 100vh;            /* fallback */
  min-height: 100dvh;           /* vrai mobile */
  display:flex; align-items:center; justify-content:center;
  padding: var(--space);
}
.login-container{
  background: #20222b;
  padding: 2rem 2rem 1.5rem 2rem;
  border-radius: 10px;
  box-shadow: 0 2px 16px #0008;
  text-align: center;
  min-width: 270px;
  border: 1px solid #232946;
  width: min(100%, 420px);
}
.login-container h2{
  margin-bottom: 1.2rem;
  color: #00eaff;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .5px;
}
.login-container input{
  width: 100%;                   /* 92% -> 100% */
  padding: .55rem .9rem;
  margin: .5rem 0;
  border: 1.5px solid #232946;
  border-radius: 6px;
  font-size: 1rem;
  background: #181a20;
  color: #e0e0e0;
  transition: border .2s;
}
.login-container input:focus{
  outline: none;
  border: 1.5px solid #00eaff;
}
.login-container button{
  width: 100%;
  padding: .6rem;
  background: #00eaff;
  color: #181a20;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: .7rem;
  transition: background .2s, color .2s;
}
.login-container button:hover{
  background: #00b8d9;
  color: #fff;
}

/* Alerts */
.error{ color:#ff3c7e; margin-bottom:1rem; font-size:.98rem }
.success{ color:#00ffb3; margin-bottom:1rem; font-size:.98rem }

/* Sidebar */
.sidebar{
  position: fixed; left:0; top:0; bottom:0;
  width: var(--sidebar-w);
  background: #1a1c23;
  color: #e0e0e0;
  padding: 1.5rem .7rem 1rem .7rem;
  box-shadow: 2px 0 12px #0006;
  display: flex; flex-direction: column;
  min-height: 100vh;
  border-right: 1.5px solid #232946;
  z-index: 10;
}
.sidebar h2{
  margin: 0 0 1.5rem 0;
  font-size: 1.1rem;
  letter-spacing: 1px;
  color: #00eaff;
  font-weight: 700;
}
.sidebar ul{ list-style:none; padding:0; margin:0; flex:1 }
.sidebar ul li{ margin-bottom: .7rem }
.sidebar ul li a{
  color:#e0e0e0; text-decoration:none; font-size:1rem; font-weight:500;
  padding:.45rem .7rem; border-radius:6px; display:block; position:relative;
  transition: background .18s, color .18s; overflow:hidden; background:none;
}
.sidebar ul li a::after{
  content:''; position:absolute; left:18px; right:18px; bottom:2px; height:2px;
  background: #00eaff;
  border-radius:2px; transform: scaleX(0); transition: transform .25s cubic-bezier(.4,0,.2,1);
  z-index:1;
}
.sidebar ul li a.active,
.sidebar ul li a:hover{ background:#232946; color:#00eaff }
.sidebar ul li a:hover::after,
.sidebar ul li a.active::after{ transform: scaleX(1) }
.sidebar-user{ font-size:.93rem; margin-top:1.5rem; color:#00eaff; opacity:.8 }

/* Main content */
.main-content{
  margin-left: var(--sidebar-w);
  padding: 2rem 3vw;
  min-height: 100vh;
  background:#181a20;
  transition: background .3s;
}

/* Sections */
.section{ display:none }
.section.active{ display:block; animation: fadeIn .5s }
@keyframes fadeIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }

/* Cards / lists */
#chats-list,#bookings-list,#all-bookings-list{
  background:#20222b; border-radius:8px; box-shadow:0 1.5px 8px #0006;
  padding:1.1rem 1.2rem; margin-top:.7rem; min-height:120px; border:1px solid #232946;
  transition: box-shadow .2s;
}
.chat-item,.booking-item{
  border-bottom:1px solid #232946; padding:.5rem 0; display:flex; align-items:center; justify-content:space-between;
  font-size:.98rem; transition: background .18s;
}
.chat-item:last-child,.booking-item:last-child{ border-bottom:none }

.chat-link{
  color:#00eaff; text-decoration:none; cursor:pointer; font-weight:500;
  border-bottom:1.5px solid transparent; transition: color .18s, border-bottom .18s;
}
.chat-link:hover{ color:#00ffb3; border-bottom:1.5px solid #00ffb3 }

/* Tables */
table{
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1.5rem;
  background: #20222b;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1.5px 8px #0006;
  font-size: .97rem;
}
table th,table td{
  padding:.6rem 1rem; border:1px solid #232946; text-align:left; color:#e0e0e0;
  background:#23242b;
}
table th{ background:#181a20; color:#00eaff; font-weight:600 }

/* Mobile table wrapper */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
}

.table-responsive table {
  margin-bottom: 0;
  min-width: 600px; /* Ensure table has minimum width */
}

/* Scrollbar hide (careful but requested) */
::-webkit-scrollbar{ width:0; background:transparent; display:none }
::-webkit-scrollbar-thumb{ background:transparent; border-radius:0 }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner{ background:transparent }
*{ scrollbar-width:none; -ms-overflow-style:none }
*::-ms-scrollbar{ width:0; height:0 }

/* Helpers */
.highlight{ background:#00eaff22 !important; color:#00eaff !important; transition: background .3s, color .3s }
input,select,textarea{
  background:#23242b; color:#e0e0e0; border:1.5px solid #232946; border-radius:6px;
  padding:.55rem .9rem; font-size:1rem; transition: border .2s, box-shadow .2s, background .2s;
}
input:focus,select:focus,textarea:focus{
  outline:none; border:1.5px solid #00eaff; background:#1a1c23; box-shadow:0 0 0 2px #00eaff44;
}

/* Global buttons */
button{
  background: transparent;
  color:#e0e0e0; border:1px solid #2a2d3a; border-radius:8px; font-size:0.95rem; font-weight:500;
  padding:.7rem 1.4rem; cursor:pointer; letter-spacing:0.3px; position:relative;
  transition: all .2s ease;
}
button:hover,button:focus{
  background: transparent;
  border-color: #00eaff;
  color:#00eaff;
}

/* Bookings */
.bookings-grid{
  display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem; margin-top:1.2rem;
}
.booking-card{
  background:#20222b; border-radius:10px; box-shadow:0 2px 16px #0008;
  padding:1.3rem 1.2rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.7rem;
  min-width:0; max-width:100%; border:1px solid #232946; transition: box-shadow .18s, border .18s;
  overflow:hidden; word-wrap: break-word;
}
.booking-card:hover{ box-shadow:none !important; border:1.5px solid #00eaff }
.booking-card-title{
  color:#00eaff; font-size:1.08rem; font-weight:600; margin-bottom:.3rem;
  word-wrap: break-word; overflow-wrap: break-word; hyphens:auto; max-width:100%; overflow:hidden;
}
.booking-card-details{
  color:#e0e0e0; font-size:.98rem; opacity:.93; word-wrap:break-word; overflow-wrap:break-word; hyphens:auto; max-width:100%; overflow:hidden;
}
.booking-card-actions{ display:flex; justify-content:center; gap:.7rem; margin-top:.8rem }

/* Nav underline tweak */
#nav-chats::after{ display:none !important }
#nav-chats:hover::after,#nav-chats.active::after{ display:none !important }

/* Icon-only buttons */
.booking-delete-btn,.chat-delete-btn,.user-delete-btn,.booking-view-chat-btn{
  background:none; border:none; padding:.1rem .2rem; cursor:pointer; vertical-align:middle; outline:none; transition: color .15s;
}
.booking-delete-btn svg path,.chat-delete-btn svg path,.user-delete-btn svg path,.booking-view-chat-btn svg path{ transition: stroke .15s }
.booking-delete-btn:hover svg path,.chat-delete-btn:hover svg path{ stroke:#ff1744 }
.booking-view-chat-btn:hover svg path{ stroke:#00eaff }
.user-delete-btn:focus,.user-delete-btn:active{ outline:none; box-shadow:none }

/* Chat */
.chat-history{
  background:#232946; border-radius:8px; padding:1.1rem 1.2rem; min-height:320px; max-height:580px; overflow-y:auto;
  box-shadow:0 1.5px 8px #0006; margin-bottom:.5rem; color:#e0e0e0; display:flex; flex-direction:column; gap:.3rem;
}
.chat-message{
  display:inline-block; max-width:65%; padding:.38rem .85rem; border-radius:13px 13px 13px 5px; margin-bottom:.1rem;
  font-size:.97rem; background:#23242b; color:#e0e0e0; word-break:break-word; box-shadow:0 1px 2px #0002;
  position:relative; margin-left:0; margin-right:auto; text-align:left; font-weight:400; border:1px solid #232946;
}
.chat-message.me{
  background:#2d5fff; color:#fff; margin-left:auto; margin-right:0; text-align:right; font-weight:500;
  border-radius:13px 13px 5px 13px; box-shadow:0 1px 6px #2d5fff22; border:1px solid #2d5fff;
}
.chat-message.me::after{
  content:''; position:absolute; right:-8px; top:10px; width:0; height:0;
  border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:8px solid #2d5fff;
}
.chat-message:not(.me)::after{
  content:''; position:absolute; left:-8px; top:10px; width:0; height:0;
  border-top:7px solid transparent; border-bottom:7px solid transparent; border-right:8px solid #23242b;
}
.chat-send-form{ display:flex; gap:.5rem; align-items:center; margin-top:.5rem }
#chat-message-input{
  flex:1; min-width:0; padding:.5rem .9rem; border-radius:8px; border:1.5px solid #232946; background:#23242b; color:#e0e0e0;
  font-size:.97rem; transition: border .2s, box-shadow .2s, background .2s; box-shadow:0 1px 2px #0002;
}
#chat-message-input:focus{
  outline:none; border:1.5px solid #2d5fff; background:#191b22; box-shadow:0 0 0 2px #2d5fff33;
}
.chat-send-form button{
  padding:.5rem 1.1rem; border-radius:8px; font-size:1rem; font-weight:600; background:#2d5fff; color:#fff; border:none;
  box-shadow:0 1px 4px #2d5fff22; transition: background .18s, color .18s, box-shadow .18s;
}
.chat-send-form button:hover,.chat-send-form button:focus{
  background:#1a3fa6; color:#fff; box-shadow:0 2px 8px #2d5fff33;
}

/* Chat Actions Bar */
.chat-actions-bar{
  background:#20222b; border-radius:8px; box-shadow:0 1.5px 8px #0006; 
  padding:0.6rem 1rem; margin-bottom:0.8rem; display:flex; gap:0.5rem;
  align-items:center; justify-content:flex-start;
}
.chat-action-btn{
  background:transparent; border:none; padding:0.4rem; cursor:pointer; 
  vertical-align:middle; outline:none; transition: color .15s; 
  display:flex; align-items:center; justify-content:center; border-radius:4px;
}
.chat-action-btn:hover{
  background:transparent; color:#00eaff;
}
.chat-action-btn svg path{
  transition: stroke .15s;
}
.chat-action-btn:hover svg path{
  stroke:#00eaff;
}
.chat-action-btn:focus,
.chat-action-btn:active{
  outline:none; box-shadow:none; background:transparent;
}

/* Global button focus/active state removal */
button:focus,
button:active{
  outline:none; box-shadow:none;
}

/* Global button hover improvements */
button:hover{
  filter: brightness(1.1);
  transform: translateY(-1px);
  transition: all 0.15s ease;
}

/* Balance Modal */
.balance-action-btn{
  background:transparent; border:none; padding:0.8rem; cursor:pointer; 
  vertical-align:middle; outline:none; transition: all .15s; border-radius:8px;
  display:flex; align-items:center; justify-content:center; width:60px; height:60px;
}
.balance-action-btn:hover{
  background:#232946; transform:scale(1.05);
}
.balance-action-btn svg path{
  transition: stroke .15s;
}
.balance-action-btn:hover svg path{
  stroke-width:2.5;
}
.sidebar-welcome{
  font-size:.97rem; color:#b0b8c1; margin-bottom:1.5rem; line-height:1.5;
}
.sidebar-welcome b{ color:#00eaff }

/* =========================
   Responsive overrides
   ========================= */

/* Large -> Desktop par d�faut d�j� ok avec sidebar */
@media (max-width: 1024px){
  .main-content{ margin-left: 0; padding: 1.25rem var(--space) }
  .sidebar{ display: none }                            /* simple et efficace */
  .chat-message{ max-width: 80% }
}

/* Mobile optimis� */
@media (max-width: 768px){
  .login-container{ padding: 1.2rem var(--space); width: min(100%, 420px) }
  .bookings-grid{ grid-template-columns: 1fr }
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space: nowrap }
  .chat-history{ max-height: 70vh }
  .chat-message{ max-width: 85% }
}

/* =========================
   Mobile Navigation
   ========================= */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #1a1c23;
  border-bottom: 1px solid #232946;
  padding: 0.8rem 1rem 1rem 1rem;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.mobile-nav-welcome {
  font-size: 0.85rem;
  color: #b0b8c1;
  margin-bottom: 0.8rem;
  line-height: 1.4;
  text-align: center;
  padding: 0 0.5rem;
}

.mobile-nav-welcome b {
  color: #00eaff;
}

.mobile-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.5rem;
  justify-content: space-around;
}

.mobile-nav ul li {
  margin: 0;
}

.mobile-nav ul li a {
  display: block;
  padding: 0.6rem 1rem;
  color: #e0e0e0;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s ease;
  text-align: center;
  min-width: 80px;
  /* Mobile touch improvements */
  -webkit-tap-highlight-color: rgba(0, 234, 255, 0.3);
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
}

.mobile-nav ul li a:hover,
.mobile-nav ul li a.active {
  background: #232946;
  color: #00eaff;
}

/* Enhanced mobile responsiveness */
@media (max-width: 1024px){
  .mobile-nav { display: block; }
  .main-content{ 
    margin-left: 0; 
    padding: 5.5rem 1rem 1.25rem 1rem; 
  }
  .sidebar{ 
    display: none;
  }
  .chat-main {
    flex-direction: column;
    gap: 1rem;
  }
  .chat-users-list {
    max-width: 100%;
    min-width: 0;
    height: auto;
    max-height: 200px;
  }
  .booking-panel {
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 768px){
  .main-content {
    padding: 4.5rem 0.75rem 1rem 0.75rem;
  }
  
  .login-container{ 
    padding: 1.2rem var(--space); 
    width: min(100%, 420px);
    margin: 0 0.5rem;
  }
  
  .bookings-grid{ 
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .booking-card {
    padding: 1rem;
    margin: 0;
  }
  
  .booking-card-title {
    font-size: 1rem;
  }
  
  .booking-card-details {
    font-size: 0.9rem;
  }
  
  table{ 
    display: block; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    white-space: nowrap;
    font-size: 0.85rem;
  }
  
  .chat-history{ 
    max-height: 60vh;
    padding: 0.8rem;
  }
  
  .chat-message{ 
    max-width: 90%;
    font-size: 0.9rem;
    padding: 0.3rem 0.7rem;
  }
  
  .chat-send-form {
    gap: 0.4rem;
  }
  
  .chat-send-form input {
    font-size: 0.9rem;
    padding: 0.4rem 0.7rem;
  }
  
  .chat-send-form button {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
  }
  
  .chat-actions-bar {
    padding: 0.5rem 0.8rem;
    gap: 0.3rem;
  }
  
  .chat-action-btn {
    padding: 0.3rem;
  }
  
  .admin-bookings-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .admin-booking-card {
    padding: 0.8rem;
  }
  
  .admin-booking-card .title {
    font-size: 1rem;
  }
  
  .admin-booking-card .details {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px){
  .main-content {
    padding: 4rem 0.5rem 1rem 0.5rem;
  }
  
  .login-container {
    padding: 1rem 0.8rem;
    margin: 0 0.25rem;
  }
  
  .login-container input {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 0.8rem 1rem;
  }
  
  .login-container button {
    padding: 0.8rem;
    font-size: 1rem;
  }
  
  .booking-card {
    padding: 0.8rem;
  }
  
  .booking-card-actions {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .booking-card-actions button {
    width: 100%;
    padding: 0.6rem;
    min-height: 48px;
  }
  
  .chat-message {
    max-width: 95%;
    font-size: 0.85rem;
  }
  
  .balance-modal {
    padding: 1rem;
  }
  
  .balance-modal > div {
    min-width: 320px;
    max-width: 90vw;
    padding: 1.5rem;
    margin: 1rem;
    border-radius: 12px;
  }
  
  .balance-modal h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }
  
  .balance-modal #current-balance {
    font-size: 1.5rem;
  }
  
  .balance-action-btn {
    width: 50px;
    height: 50px;
  }
  
  /* Better touch targets for mobile */
  button, .chat-action-btn, .booking-delete-btn, .chat-delete-btn, .user-delete-btn, .booking-view-chat-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem;
  }
  
  /* Improve form inputs for mobile */
  input, select, textarea {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 0.7rem 1rem;
    border-radius: 8px;
  }
  
  /* Better spacing for mobile forms */
  .chat-send-form input {
    padding: 0.6rem 1rem;
    font-size: 16px;
  }
  
  .chat-send-form button {
    padding: 0.6rem 1.2rem;
    min-height: 48px;
  }
  
  /* Improve mobile scrolling */
  .chat-history {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  
  /* Better mobile spacing */
  .section h3 {
    font-size: 1.3rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
  }
  
  /* Mobile-friendly admin panels */
  .admin-bookings-header {
    font-size: 1rem;
    padding: 0.8rem;
  }
  
  .admin-bookings-header .count {
    font-size: 0.9rem;
  }
}

/* Additional mobile improvements */
@media (max-width: 768px) {
  /* Improve mobile scrolling performance */
  .chat-history, .chat-users-list, .table-responsive {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  
  /* Better mobile text selection */
  ::selection {
    background: #00eaff;
    color: #181a20;
  }
  
  /* Improve mobile focus states */
  input:focus, select:focus, textarea:focus, button:focus {
    outline: 2px solid #00eaff;
    outline-offset: 2px;
  }
  
  /* Better mobile button states */
  button:active {
    transform: scale(0.98);
  }
  
  /* Improve mobile touch feedback */
  .chat-user-item:active, .booking-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}