/* =========================================================
   ClientConnect+ Dashboard — stylesheet
   ========================================================= */

:root{
  --teal-deep:      #1b4f5e;
  --teal-mid:        #1f6f74;
  --teal-band:       #3f8f8a;
  --teal-light:      #e7f2f1;
  --gold:            #cf9a2e;
  --gold-band:       #d6a325;
  --gold-soft:       #f4dca0;
  --orange-badge:    #e3982e;
  --navy:            #1d3b53;
  --ink:             #1f2d3a;
  --ink-soft:        #5b6b75;
  --line:            #e7ebec;
  --row-bg:          #f3f5f6;
  --bg:              #f4f6f6;
  --card-bg:         #ffffff;
  --sidebar-bg:      #ffffff;
  --radius:          10px;
  --shadow:          0 1px 3px rgba(20,40,45,.06), 0 1px 2px rgba(20,40,45,.04);
   --font-body:      'Inter', sans-serif;
  --font-display:   'Inter', sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--teal-mid); outline-offset:2px; }

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

/* ================= SIDEBAR ================= */
.sidebar{
  width:228px;
  flex:0 0 228px;
  background:var(--sidebar-bg);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  transition:width .2s ease, flex-basis .2s ease;
  z-index:60;
}
.sidebar.collapsed{ width:72px; flex-basis:72px; }
.sidebar.collapsed .nav-item span:not(.nav-bar),
.sidebar.collapsed .chev,
.sidebar.collapsed .submenu,
.sidebar.collapsed .profile-info,
.sidebar.collapsed .profile-caret,
.sidebar.collapsed .brand,
.sidebar.collapsed .logo-client,
.sidebar.collapsed .logo-connect,
.sidebar.collapsed .logo-plus{ display:none; }

.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(15,30,35,.45);
  z-index:55;
  opacity:0;
  transition:opacity .25s ease;
}
.sidebar-overlay.visible{ display:block; opacity:1; }

body.no-scroll{ overflow:hidden; }

.sidebar-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 18px 18px;
}
.logo{ font-size:19px; font-weight:600; white-space:nowrap; font-family:var(--font-display); }
.logo-client{ color:var(--navy); font-weight:700; }
.logo-connect{ color:var(--teal-band); font-style:italic; font-weight:500; }
.logo-plus{ color:var(--orange-badge); font-weight:700; }
.sidebar-toggle{
  background:none; border:none; color:var(--ink-soft); padding:4px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
}
.sidebar-toggle:hover{ background:var(--teal-light); color:var(--teal-deep); }
.sidebar-toggle .icon-close{ display:none; }

.nav{
  flex:1;
  overflow-y:auto;
  padding-bottom:12px;
}
.nav-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  width:calc(100% - 16px);
  margin:0 8px 6px;
  padding:11px 14px 11px 18px;
  background:none;
  border:none;
  border-radius:8px;
  color:var(--ink);
  font-size:13.5px;
  font-weight:500;
  text-align:left;
  overflow:hidden;
}
.nav-item:hover{ background:#f7fafa; }
.nav-item.active{ background:var(--teal-light); color:var(--teal-deep); font-weight:600; }
.nav-bar{
  position:absolute;
  left:0; top:4px; bottom:4px;
  width:4px;
  border-radius:3px;
}
.bar-teal{ background:var(--teal-deep); }
.bar-green{ background:#4caf7d; }
.bar-gold{ background:var(--gold-soft); }
.bar-grey{ background:#c9d2d6; }
.bar-blue{ background:#9fc4e8; }
.bar-teal2{ background:#9fd8d4; }
.bar-gold2{ background:var(--gold-soft); }
.bar-grey2{ background:#c9d2d6; }
.bar-blue2{ background:#9fc4e8; }
.bar-teal3{ background:#9fd8d4; }

.nav-icon{ width:18px; height:18px; flex:0 0 18px; color:var(--ink-soft); }
.nav-item.active .nav-icon{ color:var(--teal-deep); }
.nav-item span{ flex:1; }
.chev{ width:14px; height:14px; color:var(--ink-soft); transition:transform .15s; flex:0 0 14px; }
.nav-parent.open .chev{ transform:rotate(180deg); }

.submenu{
  display:none;
  flex-direction:column;
  background:#fafcfc;
  padding:4px 0 8px 56px;
}
.submenu.open{ display:flex; }
.submenu a{
  padding:7px 0;
  font-size:13px;
  color:var(--ink-soft);
}
.submenu a:hover{ color:var(--teal-deep); }

.sidebar-footer{
  border-top:1px solid var(--line);
  padding:14px 16px;
}
.profile-card{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  padding:6px;
  border-radius:8px;
}
.profile-card:hover{ background:#f7fafa; }
.avatar{
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,#e8b04f,#d98c3a);
  color:#fff; font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex:0 0 38px;
}
.avatar::before{ content:attr(data-initials); }
.profile-info{ flex:1; min-width:0; }
.profile-name{ font-weight:600; font-size:13.5px; color:var(--ink); }
.profile-role{ font-size:12px; color:var(--ink-soft); }
.profile-caret{ width:14px; height:14px; color:var(--ink-soft); }
.brand{
  margin-top:14px;
  text-align:center;
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:1px;
  font-size:15px;
  color:var(--navy);
}
.brand-amp{ color:var(--gold); font-style:italic; }

/* ================= MAIN ================= */
.main{
  flex:1;
  min-width:0;
  padding:26px 30px 40px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:24px;
}
.topbar-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.mobile-menu-btn{
  display:none;
  flex:0 0 auto;
  width:38px; height:38px;
  align-items:center; justify-content:center;
  border:1px solid var(--line);
  background:#fff;
  border-radius:8px;
  color:var(--teal-deep);
}
.mobile-menu-btn:hover{ background:var(--teal-light); }
.greeting{
  font-family:var(--font-display);
  color:var(--teal-deep);
  font-size:26px;
  font-weight:700;
  margin:0;
  min-width:0;
}
.topbar-right{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}
.top-link{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:var(--teal-mid);
}
.top-link svg{ width:15px; height:15px; }
.top-link.muted{ color:var(--ink-soft); font-weight:500; }
.search{
  display:flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:8px 16px;
  min-width:230px;
}
.search svg{ width:15px; height:15px; color:var(--ink-soft); flex:0 0 15px; }
.search input{
  border:none; outline:none; font-size:13px; width:100%; background:none; color:var(--ink);
}
.search input::placeholder{ color:#9aa7ac; }

/* ---- Cards ---- */
.card{
  background:var(--card-bg);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px 14px;
}
.card-head h2{
  font-family:var(--font-display);
  font-size:17px;
  color:var(--teal-deep);
  margin:0;
  font-weight:700;
}
.see-all{
  font-size:12.5px;
  font-weight:600;
  color:var(--teal-mid);
}
.add-btn{
  width:26px; height:26px; border-radius:50%;
  border:1px solid var(--teal-mid);
  background:none; color:var(--teal-mid);
  font-size:17px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.add-btn:hover{ background:var(--teal-light); }

/* ---- grid layout ---- */
.grid-top{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:20px;
  margin-bottom:20px;
  align-items:stretch;
}
.transactions, .tasks{ max-height:480px; }

/* thin custom scrollbar for scrollable card content */
.tx-list, .task-list{
  scrollbar-width:thin;
  scrollbar-color:#c9d2d5 transparent;
}
.tx-list::-webkit-scrollbar, .task-list::-webkit-scrollbar{ width:6px; }
.tx-list::-webkit-scrollbar-track, .task-list::-webkit-scrollbar-track{ background:transparent; }
.tx-list::-webkit-scrollbar-thumb, .task-list::-webkit-scrollbar-thumb{
  background:#c9d2d5;
  border-radius:10px;
}
.tx-list::-webkit-scrollbar-thumb:hover, .task-list::-webkit-scrollbar-thumb:hover{ background:#aebac0; }
.grid-bottom{
  display:grid;
  grid-template-columns: 1fr 1.6fr;
  gap:20px;
  align-items:stretch;
}

/* ---- Transactions card ---- */
.tx-scroll{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.tx-section{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.tx-section + .tx-section{ border-top:1px solid var(--line); }
.band{
  padding:8px 20px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.06em;
  color:#fff;
  flex:0 0 auto;
}
.band-teal{ background:var(--teal-band); }
.band-gold{ background:var(--gold-band); }

.tx-list{ flex:1; min-height:0; overflow-y:auto; padding:10px 16px 8px; }
.tx-row{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--row-bg);
  border-radius:10px;
  padding:14px 16px;
  margin-bottom:8px;
}
.tx-row:last-child{ margin-bottom:0; }
.tx-main{ flex:1; min-width:0; }
.tx-address{ font-weight:700; font-size:13.5px; color:var(--ink); }
.tx-sub{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.tx-sub b{ color:#8c98a0; font-weight:600; }
.tx-type{
  width:60px;
  text-align:center;
  font-size:12px;
  font-weight:700;
  color:var(--teal-mid);
}
.tx-right{ text-align:right; min-width:96px; }
.tx-price{ font-weight:700; font-size:13.5px; color:var(--ink); margin-top:6px; }
.badge{
  display:inline-block;
  padding:3px 12px;
  border-radius:12px;
  font-size:10.5px;
  font-weight:700;
  color:#fff;
  white-space:nowrap;
}
.badge-active{ background:var(--teal-deep); }
.badge-pln{ background:var(--navy); }
.badge-rental{ background:var(--teal-band); }
.badge-contingent{ background:var(--orange-badge); }
.badge-pending{ background:#e0a83a; }

/* ---- Tasks card ---- */
.task-avatar-row{
  display:flex;
  padding:0 20px 10px;
}
.task-avatar{
  width:32px; height:32px; border-radius:50%;
  margin-left:-8px;
  border:2px solid #fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff;
}
.task-avatar:first-child{ margin-left:0; }
.avatar-purple{ background:#8e6bd1; }
.avatar-purple::before{ content:attr(data-initials); }
.avatar-photo{ background:linear-gradient(135deg,#d98c3a,#caa46a); }

.task-list{
  flex:1;
  overflow-y:auto;
  min-height:0;
  padding:0 16px 6px;
}
.task-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  background:var(--row-bg);
  border-radius:10px;
  padding:12px 16px;
  margin-bottom:8px;
}
.task-row:last-child{ margin-bottom:0; }
.task-main{ min-width:0; }
.task-flag{
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  color:#c0392b;
  margin-bottom:1px;
}
.task-flag.due-soon{ color:#9aa7ac; }
.task-title{ font-size:13px; font-weight:600; color:var(--ink); }
.task-due{ font-size:11.5px; color:var(--ink-soft); margin-top:1px; }
.task-details{
  font-size:12px;
  font-weight:600;
  color:var(--teal-mid);
  white-space:nowrap;
  margin-top:2px;
}

/* ---- Calendar card ---- */
.cal-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px 10px;
}
.cal-month{ font-weight:700; font-size:13.5px; color:var(--ink); }
.cal-nav{ display:flex; gap:6px; }
.cal-nav button{
  width:24px; height:24px; border-radius:50%;
  border:1px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
}
.cal-nav button:hover{ background:var(--teal-light); color:var(--teal-deep); }
.cal-nav svg{ width:13px; height:13px; }

.cal-grid{
  width:100%;
  border-collapse:collapse;
  padding:0 14px;
  table-layout:fixed;
}
.cal-grid th{
  font-size:10.5px;
  font-weight:600;
  color:#9aa7ac;
  padding:4px 0;
  text-align:center;
}
.cal-grid td{
  text-align:center;
  font-size:12.5px;
  padding:4px 0;
  color:var(--ink);
  position:relative;
}
.cal-grid td.muted{ color:#c7cfd2; }
.cal-grid td .day-cell{
  width:28px; height:28px;
  margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  cursor:pointer;
}
.cal-grid td .day-cell:hover{ background:var(--teal-light); }
.cal-grid td.selected .day-cell{ background:var(--teal-deep); color:#fff; font-weight:700; }
.cal-grid td.has-event .day-cell::after{
  content:"";
  position:absolute;
  bottom:-1px;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--gold);
}

.cal-agenda{
  display:flex;
  flex:1;
  min-height:0;
  gap:14px;
  padding:16px 20px 18px;
  border-top:1px solid var(--line);
  margin-top:14px;
}
.agenda-date{ text-align:center; flex:0 0 36px; }
.agenda-day{ font-size:22px; font-weight:700; color:var(--ink); line-height:1; }
.agenda-dow{ font-size:10.5px; color:var(--ink-soft); font-weight:600; margin-top:2px; }
.agenda-list{ flex:1; min-height:0; overflow-y:auto; }
.agenda-item{ padding:6px 0; border-bottom:1px solid var(--line); }
.agenda-item:last-child{ border-bottom:none; }
.agenda-time{ font-size:11.5px; color:var(--ink-soft); }
.agenda-title{ font-size:13px; font-weight:600; color:var(--ink); }

/* ---- Sphere card ---- */
.sphere-body{ display:flex; flex-direction:column; flex:1; padding:0 20px 20px; }
.sphere-title{ font-size:13.5px; font-weight:700; color:var(--ink); margin:0 0 12px; }
.sphere-art{
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:#fbf6ec;
}
.market-illustration{ width:100%; display:block; }
.sphere-caption{
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; color:var(--ink-soft); margin:8px 0 10px;
}
.sphere-desc{ font-size:13px; color:var(--ink); margin:0 0 14px; }
.sphere-divider{ border-top:1px solid var(--line); margin-top:auto; margin-bottom:14px; }
.sphere-link{ font-size:13px; font-weight:600; color:var(--teal-mid); margin:0; }

/* ================= RESPONSIVE ================= */

/* ---- Laptop / small desktop: stack the two-column grids ---- */
@media (max-width: 1180px){
  .grid-top{ grid-template-columns: 1fr; }
  .grid-bottom{ grid-template-columns: 1fr; }
}

/* ---- Tablet & below: sidebar becomes an off-canvas drawer ---- */
@media (max-width: 900px){
  .sidebar{
    position:fixed;
    top:0; left:0;
    height:100vh;
    width:280px;
    max-width:82vw;
    flex-basis:auto;
    transform:translateX(-100%);
    transition:transform .28s ease;
    box-shadow:8px 0 24px rgba(15,30,35,.18);
  }
  .sidebar.collapsed{ width:280px; } /* collapsed (icon-only) state is desktop-only; ignore on mobile */
  .sidebar.collapsed .nav-item span:not(.nav-bar),
  .sidebar.collapsed .chev,
  .sidebar.collapsed .profile-info,
  .sidebar.collapsed .profile-caret,
  .sidebar.collapsed .brand,
  .sidebar.collapsed .logo-client,
  .sidebar.collapsed .logo-connect,
  .sidebar.collapsed .logo-plus{ display:revert; }
  .sidebar.mobile-open{ transform:translateX(0); }
  .sidebar.mobile-open .sidebar-toggle .icon-menu{ display:none; }
  .sidebar.mobile-open .sidebar-toggle .icon-close{ display:block; }

  .mobile-menu-btn{ display:flex; }

  .main{ padding:20px 18px 36px; }
  .greeting{ font-size:22px; }
}

/* ---- Phones (portrait & landscape) ---- */
@media (max-width: 600px){
  .main{ padding:16px 14px 30px; }
  .greeting{ font-size:19px; }
  .topbar{ gap:12px; }
  .topbar-right{ width:100%; gap:12px; }
  .search{ width:100%; min-width:0; order:3; }
  .top-link{ font-size:12.5px; }

  .card-head{ padding:15px 16px 12px; }
  .card-head h2{ font-size:15.5px; }
  .band{ padding:7px 16px; }

  /* Transaction rows wrap to a stacked layout */
  .tx-row{
    flex-wrap:wrap;
    padding:13px 16px;
    gap:6px 14px;
  }
  .tx-main{ flex-basis:100%; }
  .tx-type{ width:auto; margin-right:auto; text-align:left; }
  .tx-right{ margin-left:auto; min-width:0; }
  .tx-address{ font-size:13px; }

  .task-row{ padding:10px 16px; }
  .task-title{ font-size:12.5px; }

  .cal-controls{ padding:0 16px 8px; }
  .cal-agenda{ padding:14px 16px 16px; }
  .cal-grid td .day-cell{ width:26px; height:26px; font-size:12px; }

  .sphere-body{ padding:0 16px 16px; }

  .sidebar{ width:88vw; max-width:320px; }
}

/* ---- Very small phones ---- */
@media (max-width: 380px){
  .greeting{ font-size:17px; }
  .tx-price{ font-size:12.5px; }
  .badge{ font-size:9.5px; padding:3px 9px; }
  .cal-grid th, .cal-grid td{ font-size:11px; }
  .cal-grid td .day-cell{ width:23px; height:23px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .sidebar, .sidebar-overlay, .chev{ transition:none !important; }
}