/* Dollar Books Phase 1 design system: application shell only. */
:root {
  --p1-primary: #1c4e4f;
  --p1-primary-hover: #0a2d2e;
  --p1-primary-soft: #f7ebe7;
  --p1-bg: #f7ebe7;
  --p1-surface: #ffffff;
  --p1-text: #0a2d2e;
  --p1-muted: #6a8e8f;
  --p1-border: #efd7cf;
  --p1-success: #059669;
  --p1-danger: #dc2626;
  --p1-warning: #d97706;
  --p1-info: #436e6f;
  --p1-sidebar: 256px;
  --p1-header: 72px;
  --p1-radius: 12px;
  --p1-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .04);
}

html, body { background: var(--p1-bg); }
body { color: var(--p1-text); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { font-size: 15px; }
button, input, select, textarea { font-family: inherit; }

.body-wrapper {
  min-height: 100vh;
  padding-left: var(--p1-sidebar) !important;
  background: var(--p1-bg);
}

.body-wrapper .dash-menu {
  width: var(--p1-sidebar) !important;
  z-index: 1015 !important;
  background: var(--p1-surface) !important;
  border-right: 1px solid var(--p1-border);
  box-shadow: none !important;
}

.body-wrapper .dash-menu .dash-logo {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 11px;
  height: var(--p1-header);
  min-height: var(--p1-header) !important;
  padding: 0 20px;
  overflow: visible !important;
  border-bottom: 1px solid var(--p1-border);
  background: #fff;
  cursor: pointer;
}

.body-wrapper .dash-menu .dash-logo .dash-brand-mark {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 10px;
  background: var(--p1-primary) !important;
  box-shadow: 0 6px 14px rgba(79, 70, 229, .18);
  color: #fff !important;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}

.body-wrapper .dash-menu .dash-logo .dash-brand-name {
  display: inline-block !important;
  color: var(--p1-text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
}

.dash-logo > .fa { margin-left: auto; color: #94a3b8; font-size:12px; }
.body-wrapper .dash-menu .side-menu { display:flex;flex-direction:column;height: calc(100vh - var(--p1-header)) !important; background: #fff !important; }
.body-wrapper .dash-menu .menu-holder { flex:1 1 auto;min-height:0;padding: 16px 12px 18px;overflow-y:auto; }
.body-wrapper .dash-menu .menu-holder > ul > li { margin: 2px 0; border: 0 !important; }
.body-wrapper .dash-menu .menu-holder ul li > a {
  min-height: 42px;
  margin: 0 !important;
  padding: 6px 10px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #475569 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  transition: color .18s ease, background-color .18s ease, transform .18s ease;
}
.body-wrapper .dash-menu .menu-holder ul li > a i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  height: 30px !important;
  margin: 0 8px 0 0 !important;
  border-radius: 8px;
  background: #f1f5f9 !important;
  color: #64748b !important;
  font-size: 16px !important;
}
.body-wrapper .dash-menu .menu-holder ul li > a i::before { color: inherit !important; }
.body-wrapper .dash-menu .menu-holder ul li > a:hover { background: #f8fafc !important; color: var(--p1-text) !important; }
.body-wrapper .dash-menu .menu-holder ul li > a.active,
.body-wrapper .dash-menu .menu-holder ul li.open > a { background: var(--p1-primary-soft) !important; color: var(--p1-primary) !important; }
.body-wrapper .dash-menu .menu-holder ul li > a.active span,
.body-wrapper .dash-menu .menu-holder ul li > a.active i,
.body-wrapper .dash-menu .menu-holder ul li.open > a span,
.body-wrapper .dash-menu .menu-holder ul li.open > a i { color: var(--p1-primary) !important; }
.body-wrapper .dash-menu .menu-holder ul li > a.active i,
.body-wrapper .dash-menu .menu-holder ul li > a.active i::before {
  background: #fff !important;
  color: var(--p1-primary) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.dash-menu .have-sub-menu > a::before { right: 12px; color: #94a3b8; }
.body-wrapper .dash-menu .menu-holder ul li ul.sub-menu-list { margin: 4px 0 8px 15px !important; padding: 2px 0 2px 12px !important; border-left: 1px solid var(--p1-border); }
.body-wrapper .dash-menu .menu-holder ul li ul.sub-menu-list li a,
.body-wrapper .dash-menu .menu-holder ul li ul.sub-menu-list li .sub-menu-list li a,
.body-wrapper .dash-menu .menu-holder ul li ul.banking-sub-menu > li > a {
  min-height: 36px;
  padding: 5px 10px !important;
  background: transparent !important;
  color: #475569 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}
.body-wrapper .dash-menu .menu-holder ul li ul.sub-menu-list li a:hover,
.body-wrapper .dash-menu .menu-holder ul li ul.sub-menu-list li a.active,
.body-wrapper .dash-menu .menu-holder ul li ul.sub-menu-list li .sub-menu-list li a:hover,
.body-wrapper .dash-menu .menu-holder ul li ul.sub-menu-list li .sub-menu-list li a.active,
.body-wrapper .dash-menu .menu-holder ul li ul.banking-sub-menu > li > a:hover,
.body-wrapper .dash-menu .menu-holder ul li ul.banking-sub-menu > li > a.active { background: var(--p1-primary-soft) !important; color: var(--p1-primary) !important; }

.body-wrapper .header {
  min-height: var(--p1-header) !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 1px solid var(--p1-border) !important;
  box-shadow: none !important;
}
.body-wrapper .header,
.body-wrapper .header > .container,
.body-wrapper .header > .container > .row,
.body-wrapper .header .header-action,
.body-wrapper .header .header-right { background-color: #fff !important; background-image: none !important; }
.header > .container { max-width: none !important; padding: 0 28px !important; }
.header > .container > .row { min-height: var(--p1-header); align-items: center; }
.header .head-title h2 { margin: 0; color: var(--p1-text); font-size: 21px; font-weight: 650; letter-spacing: -.02em; }
.header-action { padding: 0 !important; }
.header-action .header-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.header-action .user-now { margin: 0 !important; color: var(--p1-muted) !important; font-size: 13px !important; }
.header-action .privacy-control { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px !important; border: 1px solid var(--p1-border); border-radius: 10px; background: #fff !important; }
.header-action .today { margin: 0 !important; padding: 0 10px; color: var(--p1-muted) !important; font-size: 12px !important; }
.body-wrapper .header .today span,
.body-wrapper .header .today strong { color: #334155 !important; }
.header-action .today i, .header-action .today .fa-calendar { color: #94a3b8 !important; }
.header-action .settings,
.header-action .current-user,
.header-action .add-btn { flex: 0 0 38px; width: 38px !important; height: 38px !important; margin: 0 !important; border: 1px solid var(--p1-border); border-radius: 10px !important; background: #fff !important; box-shadow: none !important; transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease; }
.header-action .settings { display: inline-flex; align-items: center; justify-content: center; color: #64748b !important; line-height: 1 !important; }
.header-action .settings:hover, .header-action .current-user:hover { border-color: #b5c7eb; background: var(--p1-primary-soft) !important; color: var(--p1-primary) !important; }
.header-action .current-user .avatar { width: 36px !important; height: 36px !important; border: 0 !important; }
.header-action .current-user .avatar .name-notation { color: var(--p1-primary) !important; font-size: 13px; font-weight: 700; }
.header-action .add-btn { border-color: var(--p1-primary); background: var(--p1-primary) !important; }
.header-action .add-btn:hover { background: var(--p1-primary-hover) !important; transform: translateY(-1px); }
.header-action .add-btn::before, .header-action .add-btn::after { background: #fff !important; }
.body-wrapper .header .current-user .avatar .name-notation { background: var(--p1-primary-soft) !important; background-image: none !important; color: var(--p1-primary) !important; }
.body-wrapper .header .logout-main { background: var(--p1-primary) !important; background-image: none !important; }
.body-wrapper .header .logout-main:hover { background: var(--p1-primary-hover) !important; }
.header-action .profile-box, .noty-list { border: 1px solid var(--p1-border) !important; border-radius: 12px !important; box-shadow: 0 16px 40px rgba(15, 23, 42, .14) !important; }
.noty-list li a { color: #334155 !important; font-size: 13px; }
.noty-list li a:hover { background: var(--p1-primary-soft) !important; color: var(--p1-primary) !important; }
.header-action .switch { margin: 0 2px; }
.body-wrapper .header .privacy-control .slider { background: #cbd5e1 !important; }
.body-wrapper .header .privacy-control .slider::before { background: #fff !important; }
.body-wrapper .header .privacy-control input:checked + .slider { background: var(--p1-primary) !important; }
.body-wrapper .header .privacy-control input:checked + .slider::before { background: #fff !important; }

.body-wrapper .content-area { background: var(--p1-bg) !important; }
.body-wrapper .content-area { margin-top:0 !important;padding-top:0 !important; }
.body-wrapper .content-area > .container { padding: 18px 28px 24px !important; background: var(--p1-bg) !important; }
.breadcrumbs { margin-bottom: 16px !important; }
.breadcrumbs a { color: var(--p1-muted) !important; font-size: 14px; }
.breadcrumbs a.active { color: var(--p1-primary) !important; font-weight: 600; }

.side-account-panel{flex:0 0 auto;margin:0 12px 14px;padding:14px;border:1px solid var(--p1-border);border-radius:12px;background:var(--p1-primary-soft)}
.side-user-row{display:grid;grid-template-columns:40px minmax(0,1fr) 34px;gap:10px;align-items:center;padding-bottom:13px;border-bottom:1px solid var(--p1-border)}
.side-user-avatar{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--p1-primary);color:#fff;font-size:16px;font-weight:800}
.side-user-copy{min-width:0}.side-user-copy strong,.side-user-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.side-user-copy strong{color:var(--p1-text);font-size:15px;line-height:1.25}.side-user-copy small{margin-top:4px;color:var(--p1-muted);font-size:11px;line-height:1.3}
.side-logout-icon{display:flex!important;align-items:center;justify-content:center;width:34px;height:34px!important;min-height:34px!important;padding:0!important;border:1px solid var(--p1-border)!important;border-radius:9px!important;background:#fff!important;color:var(--p1-primary)!important}.side-logout-icon:hover{border-color:var(--p1-primary)!important;background:var(--p1-primary)!important;color:#fff!important}.side-logout-icon svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.side-privacy-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 1px;color:var(--p1-text);font-size:13px;font-weight:700}.side-privacy-row>span{display:flex;align-items:center;gap:7px}.side-privacy-row i{width:auto!important;height:auto!important;margin:0!important;background:transparent!important;color:var(--p1-primary)!important;font-size:14px!important}
.side-switch{position:relative!important;display:inline-block!important;flex:0 0 42px;width:42px!important;height:24px!important;margin:0!important;vertical-align:middle}.side-switch input{position:absolute;opacity:0}.side-switch .slider{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;border:1px solid var(--p1-muted)!important;border-radius:24px!important;background:var(--p1-muted)!important;box-sizing:border-box;cursor:pointer;transition:.18s}.side-switch .slider:before{content:"";position:absolute;width:18px!important;height:18px!important;left:2px!important;top:2px!important;bottom:auto!important;border-radius:50%;background:#fff!important;box-shadow:0 1px 4px rgba(10,45,46,.32);transition:.18s}.side-switch input:checked+.slider{border-color:var(--p1-primary)!important;background:var(--p1-primary)!important}.side-switch input:checked+.slider:before{transform:translateX(18px)!important}.side-switch input:focus-visible+.slider{outline:3px solid rgba(67,110,111,.28);outline-offset:2px}

.slide-munu-toggle { border-radius: 8px; }
.slide-munu-toggle:focus-visible, a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid rgba(79, 70, 229, .24) !important; outline-offset: 2px; }

@media (max-width: 991px) {
  .body-wrapper { padding-left: 0 !important; }
  .body-wrapper .dash-menu { transform: translateX(-100%); transition: transform .2s ease; }
  .body-wrapper .dash-menu.show-it { transform: translateX(0); }
  .dash-menu .slide-munu-toggle { left: calc(100% + 12px) !important; top: 17px !important; border: 1px solid var(--p1-border); background: #fff !important; box-shadow: var(--p1-shadow); }
  .header .head-title { padding-left: 48px; }
  .header-action .privacy-control .privacy-label, .header-action .today { display: none; }
}

@media (max-width: 767px) {
  .header > .container { padding: 0 16px !important; }
  .header > .container > .row { padding: 10px 0; }
  .header .head-title h2 { font-size: 17px; }
  .header-action .user-now:not(.privacy-control) { display: none; }
  .header-action .header-right { gap: 6px; }
  .body-wrapper .content-area > .container { padding: 18px 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}