/* ============================================================
   DEVHOTEL — DASHBOARD DESIGN SYSTEM
   Version finale : même coque visuelle sur toutes les pages.
   ============================================================ */
:root{
  --dh-blue:#2563eb;
  --dh-blue-dark:#1d4ed8;
  --dh-navy:#111827;
  --dh-navy2:#0f172a;
  --dh-bg:#f3f6fa;
  --dh-card:#fff;
  --dh-text:#172033;
  --dh-muted:#718096;
  --dh-border:#e7ebf0;
  --dh-green:#16a34a;
  --dh-orange:#f59e0b;
  --dh-red:#dc2626;
  --dh-purple:#7c3aed;
  --dh-radius:12px;
  --dh-shadow:0 2px 8px rgba(15,23,42,.05);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  font-family:"Segoe UI",Arial,Helvetica,sans-serif !important;
  background:var(--dh-bg) !important;
  color:var(--dh-text) !important;
}
a{text-decoration:none}

/* ---- SAME SIDEBAR ---- */
.sidebar{
  position:fixed !important;
  top:0 !important;left:0 !important;bottom:0 !important;
  width:255px !important;
  min-height:100vh !important;
  background:linear-gradient(180deg,#111827 0%,#0f172a 100%) !important;
  color:#fff !important;
  display:flex !important;
  flex-direction:column !important;
  z-index:1000 !important;
  box-shadow:4px 0 18px rgba(15,23,42,.08) !important;
}
.sidebar .logo,.sidebar .brand{
  min-height:82px !important;height:82px !important;
  padding:18px 22px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  display:flex !important;align-items:center !important;gap:12px !important;
}
.sidebar .logo-icon,.sidebar .brand-logo,.sidebar .brand-mark{
  width:45px !important;height:45px !important;min-width:45px !important;
  border-radius:12px !important;
  background:linear-gradient(135deg,#2563eb,#4f46e5) !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  color:#fff !important;
}
.sidebar .logo-text strong,.sidebar .brand strong{
  display:block !important;color:#fff !important;font-size:17px !important;
}
.sidebar .logo-text span,.sidebar .brand span,.sidebar .brand small{
  display:block !important;color:#9ca3af !important;font-size:10px !important;margin-top:3px !important;
}
.sidebar .menu,.sidebar .nav,.sidebar .sidebar-nav{
  flex:1 !important;padding:20px 13px !important;overflow-y:auto !important;
}
.sidebar .menu-title,.sidebar .nav-label{
  color:#6b7280 !important;text-transform:uppercase !important;
  font-size:10px !important;font-weight:700 !important;
  padding:8px 14px !important;letter-spacing:1px !important;
}
.sidebar .menu a,.sidebar .nav a,.sidebar .sidebar-nav a,.sidebar .menu-item{
  display:flex !important;align-items:center !important;gap:12px !important;
  color:#cbd5e1 !important;padding:12px 14px !important;margin:4px 0 !important;
  border-radius:9px !important;font-size:13px !important;
  transition:.2s !important;text-decoration:none !important;
}
.sidebar .menu a:hover,.sidebar .nav a:hover,.sidebar .sidebar-nav a:hover,
.sidebar .menu a.active,.sidebar .nav a.active,.sidebar .sidebar-nav a.active,
.sidebar .menu-item.active{
  background:linear-gradient(90deg,#2563eb,#315fe7) !important;
  color:#fff !important;
}
.sidebar .menu .icon,.sidebar .nav .ico,.sidebar .sidebar-nav .ico{
  width:22px;min-width:22px;text-align:center;font-size:17px;
}
.sidebar .logout,.sidebar .sidebar-footer{
  padding:14px !important;border-top:1px solid rgba(255,255,255,.08) !important;
}
.sidebar .logout a,.sidebar .sidebar-footer a{
  display:flex !important;align-items:center !important;gap:12px !important;
  color:#fca5a5 !important;padding:12px 14px !important;border-radius:8px !important;
}

/* ---- MAIN SHELLS: all pages ---- */
.main,
.main-content,
.devhotel-main-container,
.app-shell .main-area,
.app .main{
  margin-left:255px !important;
  width:calc(100% - 255px) !important;
  min-height:100vh !important;
  max-width:none !important;
  background:var(--dh-bg) !important;
}
.main-content,.devhotel-main-container{padding:0 !important}
.app-shell .main-area,.app .main{padding:0 !important}

/* ---- SAME TOPBAR ---- */
.topbar{
  height:82px !important;
  min-height:82px !important;
  background:#fff !important;
  border-bottom:1px solid var(--dh-border) !important;
  display:flex !important;align-items:center !important;
  justify-content:space-between !important;
  padding:0 30px !important;
  position:sticky !important;top:0 !important;z-index:50 !important;
}
.topbar .search,.search-box{
  color:var(--dh-muted) !important;font-size:12px !important;
}
.top-user,.profile,.user-box{
  display:flex !important;align-items:center !important;gap:9px !important;
}
.top-avatar,.avatar,.user-avatar{
  width:36px !important;height:36px !important;min-width:36px !important;
  border-radius:50% !important;background:#e8efff !important;color:var(--dh-blue) !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  font-weight:700 !important;font-size:13px !important;
}
.top-user strong,.profile strong,.user-info strong{display:block !important;font-size:12px !important}
.top-user small,.profile small,.user-info span{display:block !important;color:var(--dh-muted) !important;font-size:10px !important;margin-top:2px !important}

/* ---- CONTENT ---- */
.content,
.main-area > .container,
.app-shell .container,
.app .content,
.devhotel-main-container > .container{
  padding:28px 30px 35px !important;
  width:100% !important;max-width:none !important;margin:0 !important;
}
.page-header,.page-head,.heading,
.page-title{
  color:var(--dh-text) !important;
}
.page-header,.page-head{
  display:flex !important;align-items:center !important;
  justify-content:space-between !important;gap:20px !important;
  margin-bottom:24px !important;
}
.page-title h1,.page-head h1,.heading h1{
  color:var(--dh-text) !important;font-size:25px !important;
  font-weight:700 !important;margin:0 0 5px !important;
}
.page-title p,.page-head p,.heading p{
  color:var(--dh-muted) !important;font-size:13px !important;
}
.back-btn,.print-btn,.btn-filter,.btn-reset{
  border-radius:9px !important;
}

/* ---- CARDS / STATS ---- */
.stats,.stats-grid{
  display:grid !important;grid-template-columns:repeat(4,1fr) !important;
  gap:18px !important;margin-bottom:25px !important;
}
.stat,.stat-card{
  background:#fff !important;border:1px solid var(--dh-border) !important;
  border-radius:12px !important;padding:19px !important;
  box-shadow:var(--dh-shadow) !important;
}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(15,23,42,.07) !important}
.card,.panel,.box,.table-section,.form-card,.content-card,.quick-card{
  background:#fff !important;border:1px solid var(--dh-border) !important;
  border-radius:12px !important;box-shadow:var(--dh-shadow) !important;
}
.card,.panel,.table-section,.form-card,.content-card{padding:25px !important}
.stat-label,.stat-content span,.section-header p,.muted{color:var(--dh-muted) !important}

/* ---- FORMS ---- */
input,select,textarea{
  font-family:inherit !important;
  border:1px solid #dbe3ed !important;border-radius:8px !important;
}
input:focus,select:focus,textarea:focus{
  outline:none !important;border-color:var(--dh-blue) !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.10) !important;
}
button,.btn{border-radius:9px !important}

/* ---- TABLES ---- */
.table-container,.table-wrap{overflow-x:auto !important}
table{width:100% !important;background:#fff !important;border-collapse:collapse !important}
thead{background:#f8fafc !important}
th,td{border-bottom:1px solid #edf0f4 !important;padding:14px 12px !important}
th{font-size:13px !important;color:#64748b !important}

/* ---- PAYMENTS ---- */
body.devhotel-payments .devhotel-main-container{
  padding:0 !important;
}
body.devhotel-payments .container{
  padding:28px 30px 35px !important;
  max-width:none !important;width:100% !important;
}
body.devhotel-payments .stats{
  grid-template-columns:repeat(4,1fr) !important;
}
body.devhotel-payments .stat{
  min-height:104px !important;
  display:flex !important;flex-direction:column !important;justify-content:center !important;
}
body.devhotel-payments .card{
  padding:25px !important;
}

/* ---- REPORTS ---- */
.app-shell .main-area .container{max-width:none !important}
.app-shell .page-header{background:transparent !important}

/* ---- FOOTERS ---- */
.footer,.dashboard-footer,.footer-info{
  color:var(--dh-muted) !important;
}

/* ---- MOBILE ---- */
@media(max-width:900px){
  .sidebar{width:76px !important}
  .sidebar .logo-text,.sidebar .brand > div:not(.brand-mark),
  .sidebar .menu-title,.sidebar .nav-label,
  .sidebar .menu a span:not(.icon),.sidebar .nav a span:not(.ico),
  .sidebar .sidebar-nav a span{display:none !important}
  .sidebar .menu a,.sidebar .nav a,.sidebar .sidebar-nav a{justify-content:center !important}
  .main,.main-content,.devhotel-main-container,.app-shell .main-area,.app .main{
    margin-left:76px !important;width:calc(100% - 76px) !important;
  }
  .stats,.stats-grid{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:600px){
  .stats,.stats-grid{grid-template-columns:1fr !important}
  .topbar,.page-header,.page-head{flex-direction:column !important;align-items:flex-start !important;height:auto !important;padding:18px !important}
  .content,.main-area > .container,.app-shell .container,.app .content,.devhotel-main-container > .container{
    padding:18px !important;
  }
}