/* UI2 dashboard stability wrapper. Original UI2 stylesheet is preserved in styles-ui2-base.css. */
@import url('./styles-ui2-base.css');

/* Dashboard: restore normal document flow for the personal upcoming section. */
#view-dashboard > .section-title:has(+ .my-upcoming-list){
  grid-column:2!important;
  grid-row:2!important;
  margin:0 0 10px!important;
  transform:none!important;
}
#view-dashboard > .my-upcoming-list{
  grid-column:2!important;
  grid-row:3!important;
  min-width:0!important;
  width:100%!important;
  margin:0!important;
  transform:none!important;
}
#view-dashboard .my-upcoming-card{
  display:grid!important;
  grid-template-columns:120px minmax(0,1fr)!important;
  gap:20px!important;
  align-items:start!important;
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  margin:0 0 12px!important;
  padding:18px 20px!important;
}
#view-dashboard .my-upcoming-date{
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
  min-width:0!important;
}
#view-dashboard .my-upcoming-main{min-width:0!important;}
#view-dashboard .my-upcoming-main > strong{display:block!important;margin:0 0 3px!important;}
#view-dashboard .my-upcoming-meta{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  margin-top:12px!important;
}

/* Keep the sections below the personal upcoming list in normal document flow.
   The previous positional grid/transform rules caused the first lower card to
   overlap its section heading after the UI2 base stylesheet was restored. */
#view-dashboard > .my-upcoming-list ~ .section-title:not(.replacement-section-title),
#view-dashboard > .my-upcoming-list ~ .table-wrap{
  grid-column:1 / -1!important;
  grid-row:auto!important;
  transform:none!important;
}
#view-dashboard > .my-upcoming-list ~ .section-title:not(.replacement-section-title){
  margin:22px 0 10px!important;
}
#view-dashboard > .my-upcoming-list ~ .table-wrap{
  width:100%!important;
  max-width:100%!important;
  margin:0 0 20px!important;
}

@media(max-width:1100px){
  #view-dashboard .my-upcoming-card{grid-template-columns:90px minmax(0,1fr)!important;gap:14px!important;}
}
@media(max-width:760px){
  #view-dashboard .my-upcoming-card{grid-template-columns:1fr!important;gap:8px!important;}
}

/* ---------------------------------------------------------------
   UI2 view-layout stabilization
   The UI2 visual foundation intentionally styles primitives, but several
   existing production views still use their established markup classes
   (.table, .detail-info-grid, .member-card, calendar-*). These rules restore
   their layout without restoring the removed legacy stylesheet.
   --------------------------------------------------------------- */

/* Shared section/header layout. */
.section-title{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:20px!important;
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
.section-title > div{min-width:0!important;}
.section-title > .actions{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;flex:0 0 auto!important;}
.detail-section-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  width:100%!important;
  min-width:0!important;
  margin-bottom:12px!important;
}
.detail-section-head > div{min-width:0!important;}

/* Generic detail cards/grids used by Finance and several management views. */
.detail-info-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  margin:0 0 20px!important;
}
.detail-info-card{
  min-width:0!important;
  box-sizing:border-box!important;
  padding:18px 20px!important;
  background:var(--bm2-surface,#fff)!important;
  border:1px solid var(--bm2-line,#e3e9f1)!important;
  border-radius:var(--bm2-radius,16px)!important;
  box-shadow:var(--bm2-shadow,0 14px 38px rgba(15,23,40,.07))!important;
}
.detail-label{display:block!important;color:var(--bm2-muted,#718096)!important;font-size:12px!important;font-weight:700!important;line-height:1.25!important;}
.detail-value{display:block!important;margin-top:6px!important;font-size:20px!important;font-weight:800!important;line-height:1.25!important;color:var(--bm2-text,#162033)!important;}
.detail-sub{color:var(--bm2-muted,#718096)!important;}

/* Finance KPI row: five compact cards on desktop, then responsive collapse. */
.finance-kpi-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important;}
.finance-kpi-grid .detail-info-card{min-width:0!important;}

/* Existing .table markup needs the same readable cell spacing as .ui-table. */
.table-wrap{width:100%!important;min-width:0!important;box-sizing:border-box!important;overflow-x:auto!important;}
table.table{width:100%!important;min-width:0!important;}
table.table th,
table.table td{
  padding:12px 16px!important;
  text-align:left!important;
  vertical-align:middle!important;
  border-bottom:1px solid var(--bm2-line,#e3e9f1)!important;
  line-height:1.35!important;
}
table.table th{white-space:nowrap!important;}
table.table tbody tr:last-child td{border-bottom:0!important;}
.table-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  min-width:180px!important;
}
.table-actions button{white-space:nowrap!important;}
.management-table td:last-child,.finance-table td:last-child{min-width:220px!important;}

/* Member cards migrated to .ui-card still use the original member markup.
   Give the card an explicit internal layout instead of relying on legacy CSS. */
.member-card{
  display:flex!important;
  flex-direction:column!important;
  gap:16px!important;
  padding:20px!important;
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
}
.member-card-identity{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
  min-width:0!important;
}
.member-card-identity .detail-header{min-width:0!important;}
.member-card-identity .detail-header strong{display:block!important;font-size:17px!important;line-height:1.25!important;}
.member-card-identity .small-btn{white-space:nowrap!important;}
.member-functions-block{min-width:0!important;}
.member-functions-label{display:block!important;margin-bottom:6px!important;color:var(--bm2-muted,#718096)!important;font-size:12px!important;font-weight:700!important;}
.function-list{display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important;min-width:0!important;}
.member-card-footer{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding-top:14px!important;
  border-top:1px solid var(--bm2-line,#e3e9f1)!important;
  min-width:0!important;
}
.member-card-meta{min-width:0!important;}
.member-card-email{overflow-wrap:anywhere!important;}
.member-card-footer .actions{display:flex!important;gap:8px!important;flex-wrap:wrap!important;}

/* Calendar desktop grid. Without the legacy rules the calendar cells fall
   back to normal block flow, which is the regression visible in Production. */
.calendar-toolbar{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  margin-bottom:16px!important;
}
.calendar-nav{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;min-width:0!important;}
.calendar-grid-weeks{
  display:grid!important;
  grid-template-columns:38px repeat(7,minmax(0,1fr))!important;
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  border:1px solid var(--bm2-line,#e3e9f1)!important;
  border-radius:var(--bm2-radius,16px)!important;
  background:var(--bm2-surface,#fff)!important;
}
.calendar-grid-weeks > *{min-width:0!important;box-sizing:border-box!important;}
.cal-head,
.kw-cell,
.cal-day{
  min-width:0!important;
  box-sizing:border-box!important;
  border-right:1px solid var(--bm2-line,#e3e9f1)!important;
  border-bottom:1px solid var(--bm2-line,#e3e9f1)!important;
}
.cal-head{padding:9px 8px!important;background:var(--bm2-surface-2,#f8fafc)!important;color:var(--bm2-muted,#718096)!important;font-size:11px!important;font-weight:800!important;text-align:center!important;}
.kw-cell{padding:8px 6px!important;background:var(--bm2-surface-2,#f8fafc)!important;color:var(--bm2-muted,#718096)!important;font-size:11px!important;font-weight:700!important;text-align:center!important;}
.cal-day{min-height:92px!important;padding:6px!important;background:#fff!important;overflow:hidden!important;}
.cal-day .event-chip{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;}

/* Calendar week view: the renderer emits seven .calendar-week-day siblings.
   Without an explicit grid on their parent they collapse into a vertical list. */
.calendar-week-view{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:0!important;
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  border:1px solid var(--bm2-line,#e3e9f1)!important;
  border-radius:var(--bm2-radius,16px)!important;
  background:var(--bm2-surface,#fff)!important;
}
.calendar-week-day{
  min-width:0!important;
  min-height:180px!important;
  box-sizing:border-box!important;
  padding:12px!important;
  border-right:1px solid var(--bm2-line,#e3e9f1)!important;
  border-bottom:1px solid var(--bm2-line,#e3e9f1)!important;
  background:#fff!important;
}
.calendar-week-day:last-child{border-right:0!important;}
.week-day-head{
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
  padding-bottom:10px!important;
  margin-bottom:10px!important;
  border-bottom:1px solid var(--bm2-line,#e3e9f1)!important;
  color:var(--bm2-muted,#718096)!important;
  font-size:12px!important;
  font-weight:700!important;
}
.week-day-head strong{font-size:16px!important;color:var(--bm2-text,#162033)!important;}
.week-events{display:flex!important;flex-direction:column!important;gap:7px!important;min-width:0!important;}
.calendar-week-day .event-chip{display:block!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;overflow:hidden!important;text-overflow:ellipsis!important;}

/* Calendar day view: give the single-day renderer the same card/grid language. */
.calendar-day-view{
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  border:1px solid var(--bm2-line,#e3e9f1)!important;
  border-radius:var(--bm2-radius,16px)!important;
  background:var(--bm2-surface,#fff)!important;
  overflow:hidden!important;
}
.day-view-head{
  padding:14px 16px!important;
  border-bottom:1px solid var(--bm2-line,#e3e9f1)!important;
  background:var(--bm2-surface-2,#f8fafc)!important;
  color:var(--bm2-text,#162033)!important;
  font-size:16px!important;
  font-weight:800!important;
}
.day-events{display:flex!important;flex-direction:column!important;gap:8px!important;padding:12px!important;min-height:110px!important;box-sizing:border-box!important;}
.calendar-empty{padding:14px!important;color:var(--bm2-muted,#718096)!important;}
.calendar-day-view .event-chip{display:flex!important;align-items:center!important;gap:8px!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;}

/* The management panels and stacked sections need predictable spacing. */
.management-panel,.finance-panel{width:100%!important;min-width:0!important;box-sizing:border-box!important;}
.management-panel > .detail-section,.finance-panel > .detail-section{margin-bottom:24px!important;}
.management-panel > .detail-section:last-child,.finance-panel > .detail-section:last-child{margin-bottom:0!important;}

@media(max-width:1100px){
  .detail-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .finance-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .member-card-identity{grid-template-columns:auto minmax(0,1fr)!important;}
  .member-card-identity > .small-btn{grid-column:2!important;justify-self:start!important;}
}
@media(max-width:760px){
  .section-title{flex-wrap:wrap!important;gap:12px!important;}
  .section-title > .actions{width:100%!important;}
  .detail-info-grid,.finance-kpi-grid{grid-template-columns:1fr!important;}
  .detail-info-card{padding:16px!important;}
  .member-card{padding:16px!important;}
  .member-card-identity{grid-template-columns:auto minmax(0,1fr)!important;}
  .member-card-identity > .small-btn{grid-column:1 / -1!important;}
  .member-card-footer{align-items:flex-start!important;flex-direction:column!important;}
  .calendar-grid-weeks{grid-template-columns:34px repeat(7,minmax(0,1fr))!important;}
  .calendar-week-view{grid-template-columns:repeat(7,minmax(0,1fr))!important;overflow-x:auto!important;}
  .calendar-week-day{min-height:120px!important;padding:8px!important;min-width:110px!important;}
  .week-day-head{font-size:11px!important;}
  .week-day-head strong{font-size:14px!important;}
  .calendar-day-view .event-chip{white-space:normal!important;}
  .cal-day{min-height:72px!important;padding:4px!important;}
  table.table th,table.table td{padding:10px 12px!important;}
}

/* Event edit modal: the custom OSM tile renderer uses absolutely positioned
   256px tiles. The legacy stylesheet supplied the clipping/viewport rules;
   without them the tile rows spill below the intended map and look like a
   second duplicated map. Keep the renderer unchanged and restore only the
   missing viewport contract. */
.event-venue-map{
  position:relative!important;
  width:100%!important;
  height:390px!important;
  min-height:320px!important;
  max-height:60vh!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  border:1px solid var(--bm2-line,#e3e9f1)!important;
  border-radius:12px!important;
  background:#e8eef5!important;
  isolation:isolate!important;
  touch-action:pan-y!important;
}
.event-venue-map .venue-map-canvas{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  touch-action:pan-y!important;
}
.event-venue-map .venue-map-tiles{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
}
.event-venue-map .venue-map-tiles img{
  position:absolute!important;
  display:block!important;
  width:256px!important;
  height:256px!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
.event-venue-map .venue-map-marker{
  position:absolute!important;
  z-index:3!important;
  transform:translate(-50%,-100%)!important;
  pointer-events:none!important;
}
.event-venue-map .venue-map-crosshair{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  z-index:2!important;
  transform:translate(-50%,-50%)!important;
  pointer-events:none!important;
  font-size:24px!important;
  line-height:1!important;
  font-weight:800!important;
}
@media(max-width:760px){
  .event-venue-map{height:320px!important;max-height:none!important;}
}