/* ===== Base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ink-900:#2d2d2d; --ink-700:#555; --ink-600:#777;
  --border:#eee; --bg:#f9f9f9;
  --primary:#6c63ff; --primary-600:#5848d6;
  --radius-md:12px; --radius-sm:8px;
}
html, body { height: 100%; }
body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg); color: #333; line-height: 1.6;
  overflow: hidden;
}
button, input, select { font-family: 'Outfit', sans-serif; }
.container { display: flex; height: 100vh; }

/* ===== Sidebar ===== */
.sidebar {
  width: 280px; background:#fff; border-right:1px solid var(--border);
  padding:30px 20px; display:flex; flex-direction:column; justify-content:space-between;
  height:100vh; overflow-y:auto; box-shadow:0 0 10px rgba(0,0,0,.05);
}
.sidebar h2 { font-size:20px; margin-bottom:30px; font-weight:600; color:var(--ink-900); }
.sidebar ul { list-style:none; padding:0; margin:0; }
.sidebar li {
  padding:14px 12px; border-radius:var(--radius-sm); cursor:pointer; margin-bottom:4px;
  display:flex; align-items:center; gap:12px; font-weight:500; color:#555; transition:all .2s ease;
}
.sidebar li.active, .sidebar li:hover { background:#f0f0f0; color:var(--primary); }
.sidebar li.active .material-symbols-rounded, .sidebar li:hover .material-symbols-rounded { color:var(--primary); }
.material-symbols-rounded { font-size:20px; color:#777; }
.logout { margin-top:auto; padding-top:20px; border-top:1px solid var(--border); }
.logout-btn {
  border:none; background:none; color:var(--ink-700); display:flex; align-items:center; gap:10px;
  cursor:pointer; padding:12px; width:100%; text-align:left; border-radius:var(--radius-sm); transition:all .2s ease;
}
.logout-btn:hover { background:#f8f8f8; color:#d9534f; }

/* ===== Content ===== */
.content { flex:1; padding:40px; background:var(--bg); height:100vh; overflow-y:auto; }
.section { display:none; }
.section.active { display:block; animation:fadeIn .3s ease; }
@keyframes fadeIn { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
h3 { margin-bottom:24px; font-weight:600; font-size:24px; color:var(--ink-900); }

/* ===== Breadcrumb ===== */
.breadcrumb {
  display:flex; align-items:center; gap:10px;
  font-size:14px; color:var(--ink-700);
  margin: -8px 0 18px;   /* sits neatly above the H3 */
}
.crumb-link {
  display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--ink-700);
  padding:6px 10px; border-radius:8px; transition:background .2s ease, color .2s ease;
}
.crumb-link:hover { background:#f0f0f0; color:var(--ink-900); }
.crumb-link .material-symbols-rounded { font-size:18px; }
.crumb-sep { color:#aaa; }
.crumb-current { color:var(--ink-900); font-weight:500; }

/* ===== Mobile Tabs (hidden on desktop) ===== */
.mobile-tabs {
  display:none; gap:8px; margin: 0 0 14px; 
}
.mobile-tab {
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 12px; border:1px solid #ddd; background:#fff; color:#333; border-radius:10px;
  font-weight:500; font-size:14px; cursor:pointer; transition:all .2s ease;
}
.mobile-tab .material-symbols-rounded { font-size:18px; }
.mobile-tab.active, .mobile-tab:hover { background:var(--primary); border-color:var(--primary); color:#fff; }

/* ===== Profile Header ===== */
.profile-header {
  display:flex; align-items:center; gap:22px;
  margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--border);
}
.profile-pic { text-align:center; }
.avatar-initial {
  width:120px; height:120px; border-radius:50%; background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:48px; font-weight:600;
  box-shadow:0 4px 10px rgba(108,99,255,.3);
}
.profile-info h2 { font-size:22px; color:var(--ink-900); margin-bottom:4px; min-height: 1.2em; }
.profile-info p { color:var(--ink-600); font-size:15px; min-height: 1.2em; }

/* ===== Form (information card) ===== */
form {
  background:#fff; padding:26px; border-radius:var(--radius-md); box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.form-row { display:flex; gap:20px; margin-bottom:20px; }
.form-row:last-of-type { margin-bottom:0; }
.form-group { flex:1; display:flex; flex-direction:column; gap:8px; }
label { font-size:14px; font-weight:500; color:#555; }
input, select {
  padding:14px 16px; border:1px solid #ddd; border-radius:var(--radius-sm); font-size:15px; transition:border .2s ease;
}
input:focus, select:focus { outline:none; border-color:var(--primary); }
input[readonly] { background:#f5f5f5; color:#777; cursor:not-allowed; }

/* Actions */
.form-actions {
  display:flex; justify-content:flex-start; gap:12px;
  margin-top:22px; padding-top:18px; border-top:1px solid var(--border);
}
.save-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--primary); color:#fff; padding:12px 18px; border:none; border-radius:var(--radius-sm);
  font-weight:500; font-size:15px; cursor:pointer; transition:background .2s ease, opacity .2s ease;
}
.save-btn:hover:not(:disabled){ background:var(--primary-600); }
.save-btn:disabled{ opacity:.65; cursor:not-allowed; }

/* ===== Orders ===== */
.orders-filter { display:flex; gap:10px; margin:22px 0; }
.filter-btn {
  padding:10px 16px; border:1px solid #ddd; background:#fff; border-radius:6px; cursor:pointer;
  font-size:14px; font-weight:500; transition:all .2s ease;
}
.filter-btn.active, .filter-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
#orders-list { list-style:none; margin-top:12px; }
.order-item {
  padding:18px; background:#fff; margin-bottom:12px; border:1px solid var(--border); border-radius:10px;
  font-size:15px; box-shadow:0 2px 8px rgba(0,0,0,.04); transition:transform .2s ease;
}
.order-item:hover { transform:translateY(-2px); }
.order-info { display:flex; justify-content:space-between; margin-bottom:8px; }
.order-id { font-weight:600; color:var(--ink-900); }
.order-date { color:var(--ink-600); }
.order-details { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.order-items,.order-price{ color:var(--ink-700); }
.order-status { padding:6px 12px; border-radius:20px; font-size:13px; font-weight:500; }
.order-status.completed{ background:#e6f7ee; color:#0cb25e; }
.order-status.processing{ background:#e6f0ff; color:#3d85f5; }
.order-status.cancelled{ background:#ffecec; color:#e03a3a; }

/* ===== Responsive ===== */
@media (max-width: 968px){
  .form-row{ flex-direction:column; gap:16px; }
}
@media (max-width: 768px){
  .container{ flex-direction:column; height:auto; overflow-y:auto; }

  /* Sidebar: hide the horizontal tab row for better mobile UX */
  .sidebar{
    width:100%; padding:16px 20px; flex-direction:row; align-items:center; justify-content:space-between;
    border-right:none; border-bottom:1px solid var(--border); height:auto;
  }
  .sidebar h2{ margin:0; font-size:18px; }
  .sidebar ul{ display:none; }        /* hide desktop-style tabs on mobile */
  .logout{ margin-top:0; padding-top:0; border-top:none; }

  .content{ padding:20px; height:auto; }

  /* Show mobile tab switcher */
  .mobile-tabs{ display:flex; }

  .profile-header{ flex-direction:column; text-align:center; }
  .avatar-initial{ width:96px; height:96px; font-size:40px; }
}
@media (max-width: 480px){
  .breadcrumb { font-size:13px; gap:8px; }
  .crumb-link { padding:6px 8px; }
  .mobile-tab { font-size:13px; padding:10px; }
  .form-actions{ flex-direction:column; }
  .save-btn{ width:100%; justify-content:center; }
}