/* myDay 3.3 — compact, calmer app sidebar */

/* The sidebar should feel like one app surface instead of stacked boxes. */
body.myday-app-v3 #sidebar {
  background:
    radial-gradient(circle at 8% -8%, rgba(229,91,103,.18), transparent 24%),
    radial-gradient(circle at 100% 42%, rgba(79,111,164,.08), transparent 30%),
    linear-gradient(180deg,#18232f 0%,#141e29 58%,#111a24 100%) !important;
  box-shadow: 12px 0 34px rgba(10,18,28,.12);
}

body.myday-app-v3 #sidebar > .inner {
  padding: .82rem .78rem max(.9rem, env(safe-area-inset-bottom)) !important;
}

/* App identity */
.myday-sidebar-head {
  min-height: 48px !important;
  gap: .45rem !important;
  margin-bottom: .58rem !important;
  padding: .12rem .1rem .62rem !important;
  border-bottom: 1px solid rgba(255,255,255,.075) !important;
}
.myday-sidebar-brand { gap: .62rem !important; }
.myday-sidebar-brand .myday-brand-mark {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg,#f06775,#df4e5d) !important;
  box-shadow: 0 10px 24px rgba(229,91,103,.19);
}
.myday-sidebar-brand strong {
  font-size: 1.08rem !important;
  letter-spacing: -.025em;
}
.myday-sidebar-brand small {
  max-width: none !important;
  margin-top: .12rem !important;
  overflow: visible !important;
  color: rgba(255,255,255,.48) !important;
  font-size: .66rem !important;
  line-height: 1.22;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* User card: less 'card in card', more compact account bar. */
.myday-profile-card {
  grid-template-columns: 44px minmax(0,1fr) 38px !important;
  gap: .58rem !important;
  margin-bottom: .55rem !important;
  padding: .46rem .5rem !important;
  border-color: rgba(255,255,255,.08) !important;
  border-radius: 17px !important;
  background:
    linear-gradient(120deg,rgba(255,255,255,.075),rgba(255,255,255,.035)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.myday-avatar {
  width: 44px !important;
  height: 44px !important;
  border: 2px solid rgba(255,255,255,.2) !important;
  border-radius: 14px !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.12);
}
.myday-profile-copy-link {
  display: block;
  min-width: 0;
  border: 0 !important;
  color: inherit !important;
  text-decoration: none !important;
}
.myday-profile-copy strong {
  margin: 0 !important;
  color: #fff !important;
  font-size: .94rem !important;
  line-height: 1.08;
}
.myday-profile-copy span {
  margin-top: .18rem;
  color: rgba(255,255,255,.42) !important;
  font-size: .61rem !important;
  line-height: 1.15;
}
.myday-profile-add {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg,#ef6572,#df4e5d) !important;
  font-size: 1.18rem !important;
  box-shadow: 0 8px 18px rgba(229,91,103,.18);
  transition: transform .14s ease, box-shadow .14s ease;
}
@media (hover:hover) {
  .myday-profile-card:hover { border-color: rgba(255,255,255,.12) !important; }
  .myday-profile-add:hover { transform: translateY(-1px); box-shadow:0 12px 22px rgba(229,91,103,.24); }
}

/* Search: remove old HTML5UP pseudo icon and make the field lighter. */
.myday-search { margin-bottom: .52rem !important; }
.myday-search form::before,
.myday-search form::after {
  content: none !important;
  display: none !important;
}
.myday-search-icon {
  left: .72rem !important;
  width: 19px !important;
  height: 19px !important;
  color: rgba(255,255,255,.46) !important;
}
.myday-search-icon svg { width:19px !important; height:19px !important; }
body.myday-app-v3 .myday-search input[type="search"] {
  height: 44px !important;
  padding: 0 .75rem 0 2.2rem !important;
  border-color: rgba(255,255,255,.09) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.055) !important;
  font-size: .84rem !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
  -webkit-appearance: none;
  appearance: none;
}
body.myday-app-v3 .myday-search input[type="search"]::-webkit-search-decoration,
body.myday-app-v3 .myday-search input[type="search"]::-webkit-search-cancel-button,
body.myday-app-v3 .myday-search input[type="search"]::-webkit-search-results-button,
body.myday-app-v3 .myday-search input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
body.myday-app-v3 .myday-search input::placeholder { color: rgba(255,255,255,.34) !important; }
body.myday-app-v3 .myday-search input:focus {
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(229,91,103,.55) !important;
  box-shadow: 0 0 0 3px rgba(229,91,103,.11) !important;
}

/* Slightly tighten the navigation without sacrificing tap targets. */
.myday-menu-section-label {
  margin: .62rem .48rem .22rem !important;
  color: rgba(255,255,255,.27) !important;
  font-size: .58rem !important;
  letter-spacing: .14em !important;
}
body.myday-app-v3 #menu a.myday-nav-link,
body.myday-app-v3 #menu button.opener,
body.myday-app-v3 #menu button.myday-install-app {
  min-height: 42px !important;
  padding-top: .34rem !important;
  padding-bottom: .34rem !important;
  border-radius: 12px !important;
}
body.myday-app-v3 #menu a.myday-nav-link.myday-active,
body.myday-app-v3 #menu a.myday-nav-link.myday-active:hover {
  background: linear-gradient(90deg,rgba(229,91,103,.22),rgba(229,91,103,.10)) !important;
  box-shadow: inset 3px 0 0 rgba(239,101,114,.9);
}

#sidebar #footer { padding-top: .7rem !important; }
#sidebar #footer .copyright { color: rgba(255,255,255,.2) !important; }

/* Drawer/mobile menu: keep the top compact but comfortable for touch. */
@media screen and (max-width: 1100px) {
  body.myday-app-v3 #sidebar > .inner {
    padding-left: max(.8rem, env(safe-area-inset-left)) !important;
    padding-right: max(.8rem, env(safe-area-inset-right)) !important;
  }
  .myday-sidebar-head { padding-top: .3rem !important; }
  .myday-sidebar-brand .myday-brand-mark { width:42px !important;height:42px !important;flex-basis:42px !important; }
  .myday-profile-card { grid-template-columns: 46px minmax(0,1fr) 42px !important; padding:.5rem !important; }
  .myday-avatar { width:46px !important;height:46px !important; }
  .myday-profile-add { width:42px !important;height:42px !important; }
}

@media screen and (max-width: 430px) {
  .myday-sidebar-brand small { font-size:.62rem !important; }
  body.myday-app-v3 .myday-search input[type="search"] { height:42px !important; }
}