/* Hammelk Modern UI v4
   A white, quiet, high-density admin shell. Loaded last to normalize legacy layers. */
:root{
  --hm-bg:#fff;
  --hm-surface:#fff;
  --hm-subtle:#f8fafc;
  --hm-subtle-2:#f3f5f7;
  --hm-line:#e6e9ee;
  --hm-line-strong:#d8dde5;
  --hm-text:#20252b;
  --hm-muted:#707782;
  --hm-primary:#147d73;
  --hm-primary-hover:#10675f;
  --hm-primary-soft:#eef8f7;
  --hm-danger:#b33b32;
  --hm-warning:#8b6517;
  --hm-radius:14px;
  --hm-radius-lg:18px;
  --hm-shadow:0 8px 24px rgba(18,27,38,.045);
  --hm-shell:252px;
  --ds-bg:#fff!important;
  --ds-surface:#fff!important;
  --ds-surface-alt:var(--hm-subtle)!important;
  --ds-border:var(--hm-line)!important;
  --ds-text:var(--hm-text)!important;
  --ds-muted:var(--hm-muted)!important;
  --ds-shadow:var(--hm-shadow)!important;
  --bg:#fff!important;
  --surface:#fff!important;
  --surface-2:var(--hm-subtle)!important;
  --text:var(--hm-text)!important;
  --muted:var(--hm-muted)!important;
  --line:var(--hm-line)!important;
  --primary:var(--hm-primary)!important;
}
html{background:#fff!important;scroll-padding-top:78px!important}
body{background:#fff!important;background-image:none!important;color:var(--hm-text)!important}
body::before,body::after{display:none!important}
.app-shell,.workspace,.page-content{background:#fff!important}

/* --- Shell --- */
.app-shell .sidebar{
  width:var(--hm-shell)!important;
  padding:14px 12px 12px!important;
  background:#fff!important;
  color:var(--hm-text)!important;
  border-left:1px solid var(--hm-line)!important;
  box-shadow:none!important;
}
.app-shell .brand{
  min-height:50px!important;
  padding:0 7px 13px!important;
  border-bottom:1px solid var(--hm-line)!important;
}
.app-shell .brand-copy-inline{display:flex!important;align-items:center!important;gap:7px!important;white-space:nowrap}
.app-shell .brand-copy strong{font-size:.95rem!important;color:#20252b!important}
.app-shell .brand-copy span{font-size:.68rem!important;color:#8a9099!important}
.app-shell .brand-separator{font-size:.55rem!important;color:#c1c5ca!important}
.app-shell .sidebar-property.suite-overview{
  margin:13px 1px 10px!important;padding:11px!important;
  border:1px solid var(--hm-line)!important;border-radius:12px!important;
  background:#fff!important;box-shadow:none!important;
}
.app-shell .suite-overview-head{margin-bottom:8px!important}
.app-shell .suite-overview-head small{font-size:.67rem!important;color:#8a9099!important}
.app-shell .property-year{
  padding:3px 7px!important;border-radius:7px!important;
  background:var(--hm-subtle)!important;border:1px solid var(--hm-line)!important;
  color:#69717c!important;font-size:.68rem!important;
}
.app-shell .suite-overview-list{gap:6px!important}
.app-shell .suite-overview-item{
  min-height:34px!important;padding:6px 8px!important;border-radius:9px!important;
  background:#fff!important;border:1px solid var(--hm-line)!important;color:#3a4048!important;
}
.app-shell .suite-overview-item b{font-size:.7rem!important}
.suite-color-dot{width:7px!important;height:7px!important;box-shadow:none!important}
.suite-color-dot.blue{background:#75b8df!important}.suite-color-dot.pink{background:#e995b3!important}.suite-color-dot.green{background:#81b9a0!important}

.app-shell .sidebar-nav{padding:4px 0 8px!important;gap:2px!important}
.app-shell .organized-menu .menu-section{
  min-height:43px!important;margin:0!important;padding:8px 10px!important;
  border-radius:10px!important;border:1px solid transparent!important;
  background:#fff!important;color:#4d5560!important;box-shadow:none!important;
  transform:none!important;transition:background .15s,border-color .15s,color .15s!important;
}
.app-shell .organized-menu .menu-section>.icon{width:18px!important;height:18px!important;color:#8a929c!important}
.app-shell .organized-menu .menu-section:hover{
  background:var(--hm-subtle)!important;border-color:var(--hm-line)!important;color:#22272e!important;
}
.app-shell .organized-menu .menu-section.active{
  background:var(--hm-subtle-2)!important;border-color:var(--hm-line)!important;
  color:#20252b!important;box-shadow:inset -3px 0 var(--hm-primary)!important;
}
.app-shell .organized-menu .menu-section.active>.icon{color:var(--hm-primary)!important}
.app-shell .menu-open-mark{color:#b1b7bf!important}
.app-shell .sidebar-footer{background:#fff!important;border-top:1px solid var(--hm-line)!important;padding-top:9px!important}
.app-shell .sidebar-account{padding:7px!important}.app-shell .sidebar-account:hover{background:var(--hm-subtle)!important}
.app-shell .avatar{background:#fff!important;border:1px solid var(--hm-line-strong)!important;color:#4e5661!important;box-shadow:none!important}
.app-shell .logout-link{color:#a24a43!important}.app-shell .logout-link:hover{background:#fff6f5!important;color:var(--hm-danger)!important}

/* Header starts at the highest content point, like a professional desktop app. */
.app-shell .workspace{margin-right:var(--hm-shell)!important;min-width:0!important}
.app-shell .topbar,.app-shell .topbar.topbar-modern{
  position:sticky!important;top:0!important;z-index:40!important;
  width:100%!important;height:62px!important;margin:0!important;
  padding:0 clamp(16px,2.3vw,32px)!important;
  border:0!important;border-bottom:1px solid var(--hm-line)!important;border-radius:0!important;
  background:rgba(255,255,255,.98)!important;box-shadow:none!important;backdrop-filter:saturate(130%) blur(10px)!important;
  display:flex!important;align-items:center!important;gap:14px!important;
}
.app-shell .topbar::before,.app-shell .topbar::after{display:none!important}
.app-shell .topbar-title{display:grid!important;gap:2px!important;min-width:0!important}
.app-shell .topbar-title>b{font-size:.95rem!important;color:#20252b!important;line-height:1.3!important}
.app-shell .topbar-meta{display:flex!important;align-items:center!important;gap:6px!important;font-size:.64rem!important;color:#8a9099!important}
.app-shell .topbar-meta i{width:3px!important;height:3px!important;border-radius:50%!important;background:#c4c8ce!important}
.app-shell .topbar-actions{margin-right:auto!important;display:flex!important;align-items:center!important;gap:7px!important}
.app-shell .topbar-quick{
  display:flex!important;align-items:center!important;gap:6px!important;min-height:34px!important;
  padding:0 10px!important;border:1px solid var(--hm-line)!important;border-radius:9px!important;
  background:#fff!important;color:#59616c!important;text-decoration:none!important;font-size:.7rem!important;font-weight:800!important;
}
.app-shell .topbar-quick:hover{background:var(--hm-subtle)!important;color:#20252b!important}
.app-shell .topbar-quick .icon{width:16px!important;height:16px!important}
.app-shell .icon-button,.app-shell .notification-bell,.app-shell .small-avatar{
  width:36px!important;height:36px!important;min-height:36px!important;border-radius:9px!important;
  border:1px solid var(--hm-line)!important;background:#fff!important;color:#59616c!important;box-shadow:none!important;
}
.app-shell .icon-button:hover,.app-shell .notification-bell:hover{background:var(--hm-subtle)!important;color:#20252b!important}
.app-shell .notification-count{background:#c6453c!important;color:#fff!important;box-shadow:0 0 0 2px #fff!important}
.app-shell .menu-button{display:none!important}

/* Content density */
.app-shell .page-content{
  width:100%!important;max-width:1480px!important;
  margin:0 auto!important;padding:24px clamp(18px,2.4vw,34px) 52px!important;
  background:#fff!important;animation:none!important;
}
.app-shell .page-content>:first-child{margin-top:0!important}

/* --- Universal visual language --- */
.app-shell .panel,.app-shell .card,.app-shell .ds-card,.app-shell .settings-section-card,
.app-shell .maintenance-card,.app-shell .section-hub-card,.app-shell .section-hub-hero,
.app-shell .simple-card,.app-shell .bank-card,.app-shell .calendar-control-card,
.app-shell .calendar-month-card,.app-shell .calendar-agenda-card,.app-shell .calendar-settings-hero,
.app-shell .dashboard-commandbar,.app-shell .settings-hero,.app-shell .plain-page-head,
.app-shell .page-hero-minimal{
  background:#fff!important;border:1px solid var(--hm-line)!important;border-radius:var(--hm-radius-lg)!important;
  box-shadow:none!important;color:var(--hm-text)!important;
}
.app-shell .panel,.app-shell .card,.app-shell .simple-card{padding:22px!important}
.app-shell h1,.app-shell h2,.app-shell h3,.app-shell h4{color:#20252b!important;letter-spacing:-.015em}
.app-shell p,.app-shell .helper-text,.app-shell small{color:var(--hm-muted)}
.app-shell .eyebrow,.app-shell .panel-kicker{color:#79808a!important;font-size:.68rem!important;letter-spacing:0!important}
.app-shell .section-hub-hero,.app-shell .dashboard-commandbar,.app-shell .settings-hero{padding:24px!important}
.app-shell .section-hub-card,.app-shell .settings-section-card{transition:border-color .15s,background .15s!important;transform:none!important}
.app-shell .section-hub-card:hover,.app-shell .settings-section-card:hover{background:#fcfcfd!important;border-color:#cfd5dd!important;box-shadow:none!important;transform:none!important}
.app-shell .section-hub-icon,.app-shell .section-hub-card-icon,.app-shell .settings-section-icon,.app-shell .stat-icon,.app-shell .bank-emblem{
  background:var(--hm-subtle)!important;border:1px solid var(--hm-line)!important;color:#6d7580!important;box-shadow:none!important;
}

/* Inputs and actions */
.app-shell input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.app-shell select,.app-shell textarea{
  min-height:44px!important;border:1px solid var(--hm-line-strong)!important;border-radius:10px!important;
  background:#fff!important;color:#282e35!important;box-shadow:none!important;
}
.app-shell input:focus,.app-shell select:focus,.app-shell textarea:focus{
  border-color:#7ab5af!important;box-shadow:0 0 0 3px rgba(20,125,115,.08)!important;outline:none!important;
}
.app-shell label{color:#4e5661!important}
.app-shell .button,.app-shell button{min-height:40px!important;border-radius:10px!important;box-shadow:none!important;transform:none!important}
.app-shell .button.primary,.app-shell button.primary,
.app-shell button:not(.secondary):not(.ghost-danger):not(.danger):not(.icon-button):not(.modal-close):not(.sidebar-install):not(.text-button):not(.group-toggle):not(.sidebar-close):not(.menu-button):not(.button-secondary):not(.button-danger):not(.owner-result):not(.calendar-panel-close):not(.owner-clear){
  background:var(--hm-primary)!important;color:#fff!important;border-color:var(--hm-primary)!important;
}
.app-shell .button.primary:hover,.app-shell button.primary:hover{background:var(--hm-primary-hover)!important}
.app-shell .button.secondary,.app-shell button.secondary,.app-shell .button.soft{
  background:#fff!important;color:#424a54!important;border:1px solid var(--hm-line-strong)!important;
}
.app-shell .button.secondary:hover,.app-shell button.secondary:hover,.app-shell .button.soft:hover{background:var(--hm-subtle)!important}
.app-shell .button.danger,.app-shell button.danger{background:#fff!important;border:1px solid #eac7c3!important;color:var(--hm-danger)!important}
.app-shell .button.danger:hover,.app-shell button.danger:hover{background:#fff6f5!important}
.app-shell .flash{border-radius:11px!important;box-shadow:none!important}

/* Tables */
.app-shell .table-wrap{border:1px solid var(--hm-line)!important;border-radius:13px!important;box-shadow:none!important}
.app-shell th{background:var(--hm-subtle)!important;color:#626a74!important;border-color:var(--hm-line)!important}
.app-shell td{background:#fff!important;color:#333a43!important;border-color:var(--hm-line)!important}
.app-shell tbody tr:hover td{background:#fbfcfd!important}

/* --- Calendar: a clean productivity grid, never a green wall --- */
.app-shell .calendar-workspace{display:grid!important;gap:14px!important}
.app-shell .calendar-overview,.app-shell .calendar-toolbar-card,.app-shell .calendar-board,
.app-shell .calendar-agenda,.app-shell .calendar-settings-shell{
  background:#fff!important;border:1px solid var(--hm-line)!important;border-radius:16px!important;box-shadow:none!important;
}
.app-shell .calendar-overview{padding:18px 20px!important}
.app-shell .calendar-overview h1{font-size:1.2rem!important;margin:4px 0 5px!important}
.app-shell .calendar-overview p{margin:0!important;font-size:.75rem!important}
.app-shell .calendar-toolbar-card{padding:12px!important}
.app-shell .calendar-week-head{background:var(--hm-subtle)!important;border-color:var(--hm-line)!important;color:#747c86!important}
.app-shell .calendar-grid{background:var(--hm-line)!important;border:1px solid var(--hm-line)!important;gap:1px!important}
.app-shell .calendar-day{
  background:#fff!important;color:#313840!important;border:0!important;box-shadow:none!important;min-height:118px!important;
}
.app-shell .calendar-day:hover{background:#fafbfc!important;box-shadow:inset 0 0 0 1px #d9dee5!important}
.app-shell .calendar-day.today{background:#f7fbfa!important;box-shadow:inset 0 0 0 2px #72aaa5!important}
.app-shell .calendar-day.holiday,.app-shell .calendar-day.friday{background:#fffafa!important}
.app-shell .calendar-day.empty{background:#fafbfc!important}
.app-shell .day-number{color:#343b43!important}
.app-shell .day-item{
  background:#f8f9fb!important;border:1px solid var(--hm-line)!important;border-radius:7px!important;color:#535b65!important;
  box-shadow:none!important;
}
.app-shell .day-item.period{background:#f3f8fb!important;border-right:3px solid #7bb4d2!important}
.app-shell .day-item.event{background:#fbf8f2!important;border-right:3px solid #d2af73!important}
.app-shell .day-item.occasion{background:#f9fafb!important;border-right:3px solid #c9cdd3!important}
.app-shell .calendar-view-tabs{background:var(--hm-subtle)!important;border:1px solid var(--hm-line)!important;border-radius:10px!important}
.app-shell .calendar-view-tabs a,.app-shell .calendar-view-tabs button{color:#69717b!important}
.app-shell .calendar-view-tabs .active,.app-shell .calendar-view-tabs a.active,.app-shell .calendar-view-tabs button.active{
  background:#fff!important;color:#252b32!important;border-color:var(--hm-line)!important;box-shadow:0 1px 3px rgba(18,27,38,.06)!important;
}
.app-shell .calendar-day-panel,.app-shell .calendar-period-modal,.app-shell .calendar-drawer,.app-shell .calendar-workflow-drawer{
  background:#fff!important;border-color:var(--hm-line)!important;box-shadow:-18px 0 45px rgba(18,27,38,.10)!important;
}
.app-shell .calendar-overlay{background:rgba(29,34,40,.22)!important;backdrop-filter:blur(2px)!important}

/* Backup center */
.page-hero-minimal{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px!important}
.page-hero-minimal h1{margin:5px 0 7px!important;font-size:1.28rem!important}.page-hero-minimal p{margin:0!important;max-width:760px;line-height:1.85}
.hero-badges{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.neutral-badge,.success-badge,.warning-badge,.path-tag,.status-pill,.file-kind{display:inline-flex;align-items:center;min-height:28px;padding:0 9px;border-radius:999px;border:1px solid var(--hm-line);background:#fff;font-size:.68rem;font-weight:800;color:#69717b}
.success-badge,.status-pill.ok{background:#f2faf7;border-color:#d8ece5;color:#2f735e}.warning-badge{background:#fff9ee;border-color:#f0dfbd;color:#84611b}
.backup-path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.backup-path-card{position:relative;display:flex;flex-direction:column;gap:12px}.backup-path-card form{margin-top:auto}
.backup-path-icon{position:absolute;left:18px;top:18px;font:800 .7rem/1 Consolas,monospace;color:#a0a6ae}.path-tag{background:var(--hm-subtle)}.primary-path{border-color:#cfe4e1!important}.primary-path .path-tag{background:var(--hm-primary-soft);border-color:#d4ebe8;color:#417770}
.crypto-install-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}.crypto-install-row input{min-width:0}
.auto-backup-form{display:grid;grid-template-columns:1.5fr .6fr .8fr auto;gap:10px;align-items:end}.auto-backup-form>label:not(.switch-row){display:grid;gap:6px}.auto-backup-form .switch-row{height:100%}
.status-line>div{display:grid;gap:2px}.status-line>div small{font-size:.69rem}.backup-file-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.file-kind.encrypted{background:#f2faf7;border-color:#d8ece5;color:#34705d}.file-kind.plain{background:#f8f9fb;color:#6f7680}
.backup-preview-box{padding:14px;border:1px solid #cfe4e1;border-radius:12px;background:#f8fcfb;display:grid;gap:12px}.backup-preview-box.error{background:#fff7f6;border-color:#eccbc7}.preview-state{display:flex;align-items:center;gap:9px}.preview-dot{width:9px;height:9px;border-radius:50%;background:#5ca08a}.backup-preview-box.error .preview-dot{background:#c65c52}.preview-state>div{display:grid;gap:2px}.preview-state small{font-size:.7rem}.preview-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.preview-metrics span{padding:9px;border:1px solid var(--hm-line);border-radius:9px;background:#fff;display:grid;gap:3px}.preview-metrics small{font-size:.62rem}.preview-metrics b{font-size:.85rem}

/* Mobile */
@media(max-width:1100px){
  .backup-path-grid{grid-template-columns:1fr 1fr}.backup-path-grid>.backup-path-card:last-child{grid-column:1/-1}
  .auto-backup-form{grid-template-columns:1fr 1fr}.auto-backup-form .switch-row{grid-column:1/-1}
}
@media(max-width:900px){
  .app-shell .sidebar{width:min(310px,88vw)!important;transform:translateX(110%)!important;z-index:70!important}
  .sidebar-open .sidebar{transform:translateX(0)!important}
  .app-shell .workspace{margin-right:0!important}
  .app-shell .topbar,.app-shell .topbar.topbar-modern{height:58px!important;padding:0 13px!important;gap:10px!important}
  .app-shell .menu-button{display:grid!important;place-items:center!important}
  .app-shell .topbar-quick{display:none!important}
  .app-shell .page-content{padding:18px 14px 92px!important}
  .app-shell .topbar-title>b{font-size:.88rem!important}.app-shell .topbar-meta{font-size:.6rem!important}
  .app-shell .sidebar-close{color:#505862!important;background:#fff!important}
  .mobile-dock{background:#fff!important;border-top:1px solid var(--hm-line)!important;box-shadow:0 -4px 16px rgba(18,27,38,.04)!important;backdrop-filter:none!important}
  .mobile-dock a,.mobile-dock button{color:#737b85!important}.mobile-dock a.active{background:var(--hm-subtle-2)!important;color:var(--hm-primary)!important}
}
@media(max-width:720px){
  .crypto-install-row{grid-template-columns:1fr}
  .app-shell .panel,.app-shell .card,.app-shell .simple-card{padding:16px!important;border-radius:14px!important}
  .page-hero-minimal{padding:16px!important;flex-direction:column}.hero-badges{justify-content:flex-start}
  .backup-path-grid{grid-template-columns:1fr}.backup-path-grid>.backup-path-card:last-child{grid-column:auto}
  .auto-backup-form{grid-template-columns:1fr}.auto-backup-form .switch-row{grid-column:auto}
  .backup-summary-grid{grid-template-columns:1fr 1fr!important}
  .preview-metrics{grid-template-columns:1fr 1fr}
  .app-shell .calendar-overview{padding:14px!important}
  .app-shell .calendar-day{min-height:102px!important}
  .app-shell .calendar-week-head,.app-shell .calendar-grid{min-width:680px!important}
}
@media(max-width:460px){
  .app-shell .topbar-actions .small-avatar{display:none!important}
  .app-shell .topbar-title>b{max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .backup-summary-grid{grid-template-columns:1fr!important}
  .preview-metrics{grid-template-columns:1fr 1fr}
}