:root{
  --up-primary:#0f7a5b;        /* deep emerald green - professional, trustworthy */
  --up-primary-dark:#0b5f46;
  --up-primary-light:#e6f5ef;
  --up-accent:#c9952c;         /* warm gold accent */
  --up-bg:#f7f9f8;             /* soft off-white background */
  --up-surface:#ffffff;
  --up-text:#22302c;
  --up-text-muted:#5b6b65;
  --up-border:#e1e8e4;
  --up-danger:#c0392b;
  --up-success:#1c8a55;
  --up-warning:#b8860b;
  --sidebar-width:260px;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:var(--up-bg);
  color:var(--up-text);
}
a{color:var(--up-primary-dark); text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- Top bar ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; height:64px; z-index:1000;
  background:var(--up-surface);
  border-bottom:1px solid var(--up-border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px;
  box-shadow:0 1px 4px rgba(0,0,0,0.04);
}
.topbar-left{display:flex; align-items:center; gap:14px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--up-primary-dark); font-size:1.05rem;}
.brand .brand-mark{
  width:36px; height:36px; border-radius:8px; background:var(--up-primary);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800;
}
.hamburger-btn{
  background:none; border:none; cursor:pointer; padding:8px; border-radius:8px;
  display:flex; flex-direction:column; gap:4px; justify-content:center;
}
.hamburger-btn span{display:block; width:24px; height:3px; background:var(--up-primary-dark); border-radius:2px; transition:.25s;}
.hamburger-btn.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger-btn.active span:nth-child(2){opacity:0;}
.hamburger-btn.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.topbar-right{display:flex; align-items:center; gap:16px;}
.user-chip{display:flex; align-items:center; gap:8px; font-size:.9rem; color:var(--up-text-muted);}
.user-chip .avatar{
  width:32px; height:32px; border-radius:50%; background:var(--up-primary-light);
  color:var(--up-primary-dark); display:flex; align-items:center; justify-content:center; font-weight:700;
}
.btn-logout{
  background:var(--up-primary); color:#fff; border:none; padding:8px 14px; border-radius:6px;
  cursor:pointer; font-size:.85rem;
}
.btn-logout:hover{background:var(--up-primary-dark);}

/* ---------- Sidebar ---------- */
.sidebar{
  position:fixed; top:64px; left:0; bottom:0; width:var(--sidebar-width);
  background:var(--up-surface); border-right:1px solid var(--up-border);
  overflow-y:auto; transition:transform .25s ease, width .25s ease; z-index:900;
  padding:14px 0;
}
.sidebar.collapsed{ transform:translateX(calc(-1 * var(--sidebar-width))); }
.sidebar .section-label{
  padding:14px 20px 6px; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--up-text-muted); font-weight:700;
}
.sidebar a.nav-link{
  display:flex; align-items:center; gap:10px; padding:10px 20px; color:var(--up-text);
  font-size:.92rem; border-left:3px solid transparent;
}
.sidebar a.nav-link:hover, .sidebar a.nav-link.active{
  background:var(--up-primary-light); color:var(--up-primary-dark); border-left-color:var(--up-primary);
  text-decoration:none;
}
.nav-icon{width:18px; text-align:center;}

/* ---------- Main content ---------- */
.main-wrapper{
  margin-top:64px; margin-left:var(--sidebar-width); padding:24px; transition:margin-left .25s ease; min-height:calc(100vh - 64px);
}
.main-wrapper.full{ margin-left:0; }

.page-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px;}
.page-header h1{font-size:1.4rem; margin:0; color:var(--up-primary-dark);}

.card{
  background:var(--up-surface); border:1px solid var(--up-border); border-radius:10px;
  padding:18px; box-shadow:0 1px 3px rgba(0,0,0,0.03);
}
.grid{display:grid; gap:18px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}

.stat-card{display:flex; flex-direction:column; gap:6px;}
.stat-card .stat-value{font-size:1.8rem; font-weight:700; color:var(--up-primary-dark);}
.stat-card .stat-label{font-size:.82rem; color:var(--up-text-muted);}

table.up-table{width:100%; border-collapse:collapse; font-size:.9rem;}
table.up-table th, table.up-table td{padding:10px 12px; border-bottom:1px solid var(--up-border); text-align:left;}
table.up-table th{background:var(--up-primary-light); color:var(--up-primary-dark); font-weight:700;}
table.up-table tr:hover td{background:#fafdfb;}

.badge{display:inline-block; padding:3px 10px; border-radius:20px; font-size:.75rem; font-weight:600;}
.badge-success{background:#e6f6ec; color:var(--up-success);}
.badge-warning{background:#fdf3df; color:var(--up-warning);}
.badge-danger{background:#fbe7e4; color:var(--up-danger);}
.badge-muted{background:#eef1ef; color:var(--up-text-muted);}

.btn{display:inline-block; padding:9px 16px; border-radius:6px; border:none; cursor:pointer; font-size:.88rem; font-weight:600;}
.btn-primary{background:var(--up-primary); color:#fff;}
.btn-primary:hover{background:var(--up-primary-dark);}
.btn-outline{background:transparent; border:1px solid var(--up-primary); color:var(--up-primary-dark);}
.btn-accent{background:var(--up-accent); color:#fff;}

.form-control, .form-select{
  width:100%; padding:10px 12px; border:1px solid var(--up-border); border-radius:6px; font-size:.92rem;
  background:#fff;
}
.form-control:focus, .form-select:focus{outline:none; border-color:var(--up-primary);}
.form-group{margin-bottom:16px;}
label{display:block; margin-bottom:6px; font-size:.85rem; font-weight:600; color:var(--up-text);}

.messages{list-style:none; padding:0; margin:0 0 16px;}
.messages li{padding:12px 16px; border-radius:6px; margin-bottom:8px; font-size:.9rem;}
.messages li.success{background:#e6f6ec; color:var(--up-success); border:1px solid #bfe6cd;}
.messages li.error{background:#fbe7e4; color:var(--up-danger); border:1px solid #f3c4bd;}
.messages li.info{background:var(--up-primary-light); color:var(--up-primary-dark); border:1px solid #cce6da;}
.messages li.warning{background:#fdf3df; color:var(--up-warning); border:1px solid #f3dca3;}

/* ---------- Overlay for mobile sidebar ---------- */
.sidebar-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.25); z-index:850; display:none;
}
.sidebar-overlay.show{display:block;}

/* ---------- Landing page ---------- */
.landing-hero{
  background:linear-gradient(135deg, var(--up-primary-light) 0%, #ffffff 60%);
  padding:90px 20px 70px; text-align:center;
}
.landing-hero h1{font-size:2.3rem; color:var(--up-primary-dark); margin-bottom:14px;}
.landing-hero p{font-size:1.05rem; color:var(--up-text-muted); max-width:680px; margin:0 auto 28px;}
.landing-nav{
  display:flex; align-items:center; justify-content:space-between; padding:18px 32px;
  background:#fff; border-bottom:1px solid var(--up-border);
}
.landing-section{padding:60px 20px; max-width:1100px; margin:0 auto;}
.feature-card{background:#fff; border:1px solid var(--up-border); border-radius:12px; padding:24px; text-align:left;}
.feature-card .feature-icon{
  width:46px; height:46px; border-radius:10px; background:var(--up-primary-light); color:var(--up-primary-dark);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:14px;
}
footer.landing-footer{background:var(--up-primary-dark); color:#eaf3ee; padding:30px 20px; text-align:center; font-size:.85rem;}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .sidebar{ transform:translateX(calc(-1 * var(--sidebar-width))); }
  .sidebar.show{ transform:translateX(0); box-shadow:2px 0 12px rgba(0,0,0,0.12); }
  .main-wrapper{ margin-left:0; }
  .grid-4, .grid-3, .grid-2{ grid-template-columns:1fr; }
  .landing-hero h1{font-size:1.7rem;}
}