/* TROPICALVIBES APP - STYLESHEET PRINCIPAL */
:root {
  --color-primary: #FF6B35;
  --color-primary-hover: #FF8A5B;
  --color-secondary: #00C8BE;
  --color-secondary-dark: #1DBFB3;
  --color-bg-cream: #FFF5E6;
  --color-bg-light: #F5E6D3;
  --color-white: #FFFFFF;
  --color-text-dark: #2C5F4F;
  --color-text-light: #666666;
  --color-text-white: #FFFFFF;
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-info: #17a2b8;

  --shadow-sm: 0 2px 4px rgba(0,0,0,.1);
  --shadow-md: 0 4px 15px rgba(255,107,53,.3);
  --shadow-lg: 0 6px 20px rgba(255,107,53,.4);
  --shadow-card: 0 2px 10px rgba(0,0,0,.1);

  --radius-sm: 10px;
  --radius-md: 15px;
  --radius-lg: 30px;

  --transition-fast: all .2s ease;
  --transition-normal: all .3s ease;

  --sidebar-width: 260px;
}

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

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color:var(--color-text-dark);
  background:var(--color-bg-cream);
  line-height:1.6;
}

body.no-scroll{overflow:hidden}

a{color:var(--color-primary);text-decoration:none}
a:hover{color:var(--color-primary-hover)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 30px;border:none;border-radius:var(--radius-lg);
  font-weight:600;font-size:1rem;cursor:pointer;
  transition:var(--transition-normal);white-space:nowrap
}
.btn-primary{
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-hover));
  color:var(--color-white);
  box-shadow:var(--shadow-md)
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);color:var(--color-white)}
.btn-outline{background:transparent;border:2px solid var(--color-primary);color:var(--color-primary)}
.btn-outline:hover{background:var(--color-primary);color:var(--color-white)}
.btn-block{display:block;width:100%}

.alert{padding:15px 20px;border-radius:var(--radius-sm);margin-bottom:20px;font-weight:500}
.alert-success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}
.alert-error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}
.alert-info{background:#d1ecf1;color:#0c5460;border:1px solid #bee5eb}

.card{
  background:var(--color-white);
  border-radius:var(--radius-md);
  padding:20px;
  box-shadow:var(--shadow-card);
  margin-bottom:20px
}

.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #eee;text-align:left}

.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.85rem;font-weight:600}
.badge-draft{background:#fff3cd;color:#856404}
.badge-signed{background:#d4edda;color:#155724}
.badge-checkedout{background:#d1ecf1;color:#0c5460}
.badge-closed{background:#e2e3e5;color:#383d41}

.login-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#FF6B35 0%,#00C8BE 100%);
  padding:20px
}
.login-box{
  background:var(--color-white);
  border-radius:var(--radius-md);
  padding:40px;
  box-shadow:0 10px 40px rgba(0,0,0,.2);
  width:100%;
  max-width:450px
}

.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:8px;font-weight:600}
.form-group input,.form-group select,.form-group textarea{
  width:100%;
  padding:12px 15px;
  border:2px solid #E0E0E0;
  border-radius:var(--radius-sm);
  font-size:1rem
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(255,107,53,.1)
}

.signature-pad{
  border:2px dashed #ddd;border-radius:var(--radius-sm);
  background:#fff;touch-action:none;
}
.signature-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.small{font-size:.9rem;color:var(--color-text-light)}

/* =========================
   LAYOUT : Sidebar + Content
   ========================= */

.app-layout{
  display:flex;
  min-height:100vh;
}

/* Sidebar desktop */
.sidebar{
  width:var(--sidebar-width);
  position:fixed;
  top:0; left:0; bottom:0;
  background:linear-gradient(180deg, rgba(0,200,190,.18), rgba(255,107,53,.10));
  border-right:1px solid rgba(0,0,0,.06);
  padding:18px 14px;
  display:flex;
  flex-direction:column;
  gap:14px;
  z-index:900;
}

.sidebar-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
}

.sidebar-logo{
  width:auto;
  height:38px;
  max-width:160px;
  object-fit:contain;
  display:block;
}

.sidebar-title{
  font-weight:800;
  letter-spacing:.2px;
}

.sidebar-close{
  display:none;
  margin-left:auto;
  border:none;
  background:transparent;
  font-size:18px;
  cursor:pointer;
}

.sidebar-menu{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0 6px;
}

.sidebar-menu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  color:var(--color-text-dark);
  font-weight:700;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.05);
}

.sidebar-menu a.active{
  background:rgba(255,107,53,.18);
  border-color:rgba(255,107,53,.25);
}

.sidebar-footer{
  margin-top:auto;
  padding:10px 10px 0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.user-info{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:14px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.05);
}

.user-avatar{
  width:36px;height:36px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  background:rgba(0,200,190,.22);
}

.user-details .user-name{font-weight:800;line-height:1.1}
.user-details .user-role{font-size:.85rem;color:var(--color-text-light)}

/* Main content desktop */
.main-content{
  flex:1;
  margin-left:var(--sidebar-width);
  padding:20px;
}

/* =========================
   MOBILE : Topbar + Drawer
   ========================= */

.mobile-topbar{
  display:none;
}

.mobile-overlay{
  display:none;
}

@media (max-width: 900px){
  /* ✅ Topbar opaque */
  .mobile-topbar{
    display:flex;
    position:fixed;
    top:0; left:0; right:0;
    height:64px;
    background: #fff;                  /* ✅ opaque */
    border-bottom:1px solid rgba(0,0,0,.08);
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
    z-index:1100;
    align-items:center;
    gap:10px;
    padding:10px 12px;
  }

  .burger-btn{
    border:none;
    background:rgba(255,107,53,.12);
    color:var(--color-text-dark);
    width:44px;
    height:44px;
    border-radius:14px;
    font-size:22px;
    cursor:pointer;
  }

  .mobile-logo{
    height:34px;
    width:auto;
    object-fit:contain;
  }

  .mobile-quick{
    margin-left:auto;
    display:inline-flex;
    width:44px;
    height:44px;
    border-radius:14px;
    align-items:center;
    justify-content:center;
    background:rgba(0,200,190,.12);
    color:var(--color-text-dark);
    font-weight:800;
  }

  /* ✅ Overlay */
  .mobile-overlay{
    display:block;
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.35);
    opacity:0;
    pointer-events:none;
    transition: var(--transition-normal);
    z-index:1050;
  }
  .mobile-overlay.is-open{
    opacity:1;
    pointer-events:auto;
  }

  /* ✅ Drawer (sidebar) */
  .sidebar{
    top:0;
    left:0;
    bottom:0;
    height:100vh;
    width: min(86vw, 320px);
    background: #fff;                 /* ✅ opaque */
    border-right:1px solid rgba(0,0,0,.08);
    box-shadow: 12px 0 30px rgba(0,0,0,.12);
    transform: translateX(-110%);
    transition: var(--transition-normal);
    z-index:1200;
  }
  .sidebar.is-open{
    transform: translateX(0);
  }

  .sidebar-header{
    padding:10px 10px;
  }
  .sidebar-close{
    display:inline-block;
  }

  .sidebar-menu a{
    background:rgba(255,255,255,.92);
  }

  .main-content{
    margin-left:0;
    padding:16px;
    padding-top:84px; /* place topbar */
  }

  .table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .btn{
    width:100%;
    justify-content:center;
  }
}