/* Retter-Portal v1.3.28
   Sidebar einklappbar, Header-Kontext kompakter, Menüs stärker an Sidebar angeglichen,
   Notification-Strip sauber eingefasst, Mobile/Tablet sowie Whitemode repariert. */

:root{
  --rp28-sidebar-width:270px;
  --rp28-sidebar-collapsed-width:92px;
  --rp28-sidebar-line:rgba(255,255,255,.08);
  --rp28-card-line:rgba(148,163,184,.18);
  --rp28-card-line-soft:rgba(148,163,184,.11);
  --rp28-dark-surface:linear-gradient(180deg,rgba(9,22,38,.985),rgba(7,18,31,.975));
  --rp28-dark-surface-alt:linear-gradient(145deg,rgba(11,26,45,.97),rgba(8,20,35,.96));
  --rp28-light-surface:linear-gradient(145deg,#ffffff,#f3f7fb);
  --rp28-light-surface-alt:linear-gradient(145deg,#fcfdff,#eef3f9);
  --rp28-light-border:rgba(148,163,184,.22);
}

/* --- Sidebar proportional slightly larger --- */
html body .app-shell{grid-template-columns:var(--rp28-sidebar-width) minmax(0,1fr)!important;transition:grid-template-columns .22s ease!important;}
html body .sidebar{
  width:var(--rp28-sidebar-width)!important;
  padding:16px 14px 18px!important;
  background:linear-gradient(180deg,#091426 0%,#071120 100%)!important;
  border-right:1px solid var(--rp28-sidebar-line)!important;
}
html body .sidebar-brand-row{display:flex!important;align-items:flex-start!important;gap:10px!important;padding-bottom:10px!important;border-bottom:1px solid rgba(255,255,255,.06)!important;margin-bottom:12px!important;}
html body .brand{flex:1 1 auto!important;min-width:0!important;padding:8px 8px 10px!important;gap:12px!important;align-items:center!important;}
html body .brand-logo-wrap{flex:0 0 auto!important;display:grid!important;place-items:center!important;}
html body .brand-logo{width:48px!important;height:48px!important;object-fit:contain!important;display:block!important;}
html body .brand-text{display:grid!important;gap:4px!important;min-width:0!important;font-size:1.02rem!important;line-height:1.05!important;font-weight:950!important;}
html body .brand-context{font-size:.76rem!important;line-height:1.15!important;letter-spacing:.09em!important;color:#93a3b8!important;margin-top:0!important;}
html body .sidebar-collapse-toggle{
  flex:0 0 42px!important;width:42px!important;height:42px!important;margin-top:4px!important;
  border-radius:14px!important;border:1px solid rgba(255,255,255,.08)!important;
  background:linear-gradient(180deg,rgba(18,36,58,.92),rgba(10,21,37,.88))!important;
  color:#d8e0ea!important;font-size:1rem!important;font-weight:900!important;
  box-shadow:0 10px 24px rgba(0,0,0,.18)!important;
}
html body .sidebar-collapse-toggle:hover{background:linear-gradient(180deg,rgba(24,47,76,.96),rgba(11,24,42,.92))!important;color:#fff!important;}
html body .nav-section{margin:18px 10px 8px!important;font-size:.72rem!important;letter-spacing:.14em!important;}
html body .sidebar nav a,
html body .sidebar .sidebar-nav-link{
  padding:12px 13px!important;
  min-height:48px!important;
  border-radius:15px!important;
  font-size:.97rem!important;
  font-weight:840!important;
  gap:11px!important;
}
html body .sidebar nav a .sidebar-nav-icon,
html body .sidebar .sidebar-nav-link .sidebar-nav-icon{width:24px!important;height:24px!important;display:grid!important;place-items:center!important;flex:0 0 24px!important;}
html body .sidebar nav a .sidebar-nav-icon svg,
html body .sidebar .sidebar-nav-link .sidebar-nav-icon svg{width:20px!important;height:20px!important;}
html body .sidebar-nav-label{line-height:1.2!important;}
html body .nav-count{margin-left:auto!important;font-size:.74rem!important;min-width:26px!important;height:26px!important;padding:0 8px!important;display:inline-grid!important;place-items:center!important;border-radius:999px!important;background:rgba(255,255,255,.11)!important;color:#fff!important;font-style:normal!important;font-weight:900!important;}

/* Collapsed desktop sidebar */
@media(min-width:1101px){
  html body.sidebar-collapsed .app-shell{grid-template-columns:var(--rp28-sidebar-collapsed-width) minmax(0,1fr)!important;}
  html body.sidebar-collapsed .sidebar{width:var(--rp28-sidebar-collapsed-width)!important;padding-inline:10px!important;}
  html body.sidebar-collapsed .sidebar-brand-row{display:grid!important;justify-items:center!important;gap:10px!important;padding-bottom:12px!important;}
  html body.sidebar-collapsed .brand{justify-content:center!important;padding:8px 0!important;}
  html body.sidebar-collapsed .brand-text,
  html body.sidebar-collapsed .nav-section,
  html body.sidebar-collapsed .sidebar-nav-label,
  html body.sidebar-collapsed .nav-count{display:none!important;}
  html body.sidebar-collapsed .sidebar .sidebar-nav-link{justify-content:center!important;padding-inline:0!important;}
  html body.sidebar-collapsed .sidebar .sidebar-nav-icon{margin:0!important;}
  html body.sidebar-collapsed .sidebar nav a,
  html body.sidebar-collapsed .sidebar .sidebar-nav-link{position:relative!important;}
  html body.sidebar-collapsed .sidebar nav a[title]::after,
  html body.sidebar-collapsed .sidebar .sidebar-nav-link[title]::after{display:none!important;}
}

/* use aria label as tooltip by assigning title through CSS-ish no, but title exists on link not set. handled by attr via JS not possible; set only essential visual */
html body .sidebar .sidebar-nav-link{overflow:hidden!important;}

/* --- Header --- */
html body .topbar{padding:12px 24px!important;min-height:70px!important;border-bottom:1px solid rgba(255,255,255,.06)!important;}
html body .topbar-desktop-shell{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto auto!important;align-items:center!important;gap:14px!important;}
html body .topbar-title{display:flex!important;align-items:center!important;gap:12px!important;min-width:0!important;}
html body .topbar-product .topbar-eyebrow{margin:0!important;display:flex!important;align-items:center!important;gap:8px!important;font-size:.76rem!important;}
html body .topbar-title--with-inline-context .department-context-switch--inline,
html body .topbar-title--with-inline-context .department-context-static.department-context-switch--inline{margin-left:4px!important;}
html body .topbar-context{min-width:0!important;}
html body .topbar-context:empty{display:none!important;}
html body .department-context-switch,
html body .department-context-static{
  display:flex!important;align-items:center!important;gap:10px!important;
  border:1px solid var(--rp28-card-line)!important;
  border-radius:14px!important;padding:8px 10px!important;
  background:linear-gradient(180deg,rgba(14,28,47,.92),rgba(9,21,36,.90))!important;
  min-height:44px!important;
}
html body .department-context-switch span,
html body .department-context-static span{font-size:.72rem!important;line-height:1!important;text-transform:uppercase!important;letter-spacing:.10em!important;color:#9eb0c6!important;font-weight:900!important;white-space:nowrap!important;}
html body .department-context-switch select{
  min-width:min(360px,40vw)!important;border:0!important;background:transparent!important;
  padding:0 26px 0 0!important;color:#fff!important;font-weight:900!important;height:auto!important;box-shadow:none!important;
}
html body .department-context-static strong{font-size:.94rem!important;color:#fff!important;white-space:nowrap!important;}
html body .dev-organization-chip{align-self:center!important;}
html body .topbar-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:12px!important;min-width:0!important;}

/* normal menus / cards more aligned to sidebar */
html body .content > :is(.page-head,.page-hero,.card,.toolbar,.pagination,.table-wrap,.data-table-card,.checks-table-wrap,.portal-footer,.admin-nav,.admin-access-grid .card):not(.flash){
  border-color:var(--rp28-card-line)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.034),transparent 30%),
    radial-gradient(circle at 100% 0,rgba(37,99,235,.10),transparent 19rem),
    radial-gradient(circle at 0 0,rgba(225,29,72,.08),transparent 15rem),
    var(--rp28-dark-surface-alt)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 14px 32px rgba(1,7,18,.16)!important;
}
html body .content > :is(.page-head,.page-hero,.card,.toolbar,.pagination,.table-wrap,.data-table-card,.checks-table-wrap,.portal-footer,.admin-nav,.admin-access-grid .card):not(.flash)::before{
  content:""!important;position:absolute!important;left:0!important;right:0!important;top:0!important;height:1px!important;
  background:linear-gradient(90deg,rgba(251,113,133,.24),rgba(148,163,184,.06) 30%,rgba(37,99,235,.22))!important;pointer-events:none!important;
}
html body .content > :is(.page-head,.page-hero,.card,.toolbar,.pagination,.table-wrap,.data-table-card,.checks-table-wrap,.portal-footer,.admin-nav,.admin-access-grid .card):not(.flash){position:relative!important;}
html body .content :is(input,select,textarea,.btn:not(.primary),.pill,.status){border-color:var(--rp28-card-line)!important;}
html body .content :is(input,select,textarea){background:linear-gradient(180deg,rgba(6,17,30,.94),rgba(7,19,33,.88))!important;}
html body .content .btn:not(.primary){background:linear-gradient(180deg,rgba(15,33,56,.92),rgba(10,23,39,.90))!important;}

/* Notification strip with clear end border */
html body .dashboard-notification-strip{
  position:relative!important;
  border:1px solid rgba(225,29,72,.34)!important;
  border-radius:20px!important;
  background:
    linear-gradient(90deg,rgba(225,29,72,.10),rgba(37,99,235,.10))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 24px rgba(1,7,18,.12)!important;
  overflow:hidden!important;
}
html body .dashboard-notification-strip::before{display:block!important;content:""!important;position:absolute!important;inset:0!important;border:1px solid rgba(255,255,255,.04)!important;border-radius:20px!important;pointer-events:none!important;}
html body .dashboard-notification-strip::after{display:block!important;content:""!important;position:absolute!important;top:10px!important;bottom:10px!important;right:8px!important;width:1px!important;background:rgba(255,255,255,.08)!important;pointer-events:none!important;}
html body .dashboard-notification-strip__action{position:relative!important;z-index:1!important;}

/* Billing / PDF action cells */
html body .billing-invoice-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;flex-wrap:wrap!important;gap:10px!important;}
html body .billing-invoice-actions .btn.small,
html body .billing-invoice-actions .billing-status-form{flex:0 1 auto!important;}
html body .billing-status-form{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;}
html body .billing-status-form select,
html body .billing-status-form .btn{min-height:42px!important;border-radius:14px!important;}

/* Admin water source org chooser */
html body .admin-water-sources-card select,
html body .admin-water-sources-card option,
html body .admin-water-sources-card optgroup,
html body select option,
html body select optgroup{color:#0f172a!important;background:#ffffff!important;}
html body .admin-water-sources-card form,
html body .admin-water-sources-card .form-inline{align-items:end!important;}

/* White mode repair */
body[data-theme="light"] .sidebar{
  background:linear-gradient(180deg,#f8fbff 0%,#eef3f8 100%)!important;
  border-right:1px solid var(--rp28-light-border)!important;
  box-shadow:18px 0 45px rgba(148,163,184,.12)!important;
  color:#1e293b!important;
}
body[data-theme="light"] .brand-context,
body[data-theme="light"] .nav-section{color:#64748b!important;}
body[data-theme="light"] .sidebar nav a,
body[data-theme="light"] .sidebar .sidebar-nav-link{color:#243449!important;}
body[data-theme="light"] .sidebar nav a:hover,
body[data-theme="light"] .sidebar .sidebar-nav-link:hover{background:rgba(37,99,235,.06)!important;color:#0f172a!important;}
body[data-theme="light"] .sidebar nav a.active,
body[data-theme="light"] .sidebar .sidebar-nav-link.active{background:linear-gradient(135deg,rgba(239,49,84,.10),rgba(37,99,235,.08))!important;color:#be123c!important;border-color:rgba(239,68,68,.22)!important;box-shadow:0 14px 28px rgba(148,163,184,.14)!important;}
body[data-theme="light"] .sidebar-collapse-toggle{background:linear-gradient(180deg,#ffffff,#eef4fb)!important;border-color:var(--rp28-light-border)!important;color:#334155!important;box-shadow:0 8px 18px rgba(148,163,184,.10)!important;}
body[data-theme="light"] .topbar{background:rgba(255,255,255,.88)!important;border-bottom-color:rgba(148,163,184,.18)!important;}
body[data-theme="light"] .department-context-switch,
body[data-theme="light"] .department-context-static{background:var(--rp28-light-surface)!important;border-color:var(--rp28-light-border)!important;}
body[data-theme="light"] .department-context-switch select,
body[data-theme="light"] .department-context-static strong{color:#0f172a!important;}
body[data-theme="light"] .content > :is(.page-head,.page-hero,.card,.toolbar,.pagination,.table-wrap,.data-table-card,.checks-table-wrap,.portal-footer,.admin-nav,.admin-access-grid .card):not(.flash){
  background:
    linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.64)),
    radial-gradient(circle at 100% 0,rgba(59,130,246,.09),transparent 18rem),
    radial-gradient(circle at 0 0,rgba(239,68,68,.07),transparent 14rem),
    var(--rp28-light-surface-alt)!important;
  border-color:var(--rp28-light-border)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 10px 28px rgba(148,163,184,.10)!important;
}
body[data-theme="light"] .content :is(input,select,textarea){background:linear-gradient(180deg,#ffffff,#f7fbff)!important;border-color:var(--rp28-light-border)!important;color:#0f172a!important;}
body[data-theme="light"] .content .btn:not(.primary){background:linear-gradient(180deg,#ffffff,#eef4fa)!important;border-color:var(--rp28-light-border)!important;color:#0f172a!important;}
body[data-theme="light"] .dashboard-notification-strip{background:linear-gradient(90deg,rgba(239,68,68,.09),rgba(59,130,246,.08))!important;border-color:rgba(239,68,68,.24)!important;}
body[data-theme="light"] .dashboard-notification-strip__copy small{color:#475569!important;}
body[data-theme="light"] .dashboard-notification-strip__action{background:linear-gradient(180deg,#ffffff,#eff4fb)!important;border-color:var(--rp28-light-border)!important;color:#0f172a!important;}
body[data-theme="light"] .dashboard-grid .card,
body[data-theme="light"] .feed-card,
body[data-theme="light"] .feed-list article,
body[data-theme="light"] .stats-grid .card,
body[data-theme="light"] .overview-card{background:var(--rp28-light-surface)!important;border-color:var(--rp28-light-border)!important;color:#0f172a!important;}
body[data-theme="light"] .muted,
body[data-theme="light"] small,
body[data-theme="light"] .pill{color:inherit;}
body[data-theme="light"] .topbar-role-badge{box-shadow:none!important;}

/* Tablet adjustments */
@media(max-width:1100px){
  html body .app-shell{grid-template-columns:1fr!important;}
  html body .sidebar{width:min(86vw,300px)!important;transform:translateX(-104%)!important;position:fixed!important;z-index:120!important;left:0!important;top:0!important;bottom:0!important;height:100dvh!important;transition:transform .22s ease!important;}
  html body.sidebar-open .sidebar{transform:translateX(0)!important;}
  html body .sidebar-collapse-toggle{display:none!important;}
  html body .topbar{padding:10px 14px!important;}
  html body .topbar-desktop-shell{grid-template-columns:auto minmax(0,1fr) auto!important;}
  html body .topbar-title--with-inline-context{flex-wrap:wrap!important;gap:8px!important;}
  html body .department-context-switch--inline{max-width:100%!important;}
  html body .department-context-switch select{min-width:0!important;width:100%!important;}
  html body .content{padding:18px 14px 26px!important;}
}

/* Mobile repair */
@media(max-width:760px){
  html body .rp-mobile-header{padding-top:max(8px,env(safe-area-inset-top))!important;}
  html body .content{padding:14px 12px 22px!important;}
  html body .content > :is(.page-head,.page-hero,.card,.toolbar,.pagination,.table-wrap,.portal-footer){border-radius:18px!important;}
  html body .toolbar{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}
  html body .toolbar > *{width:100%!important;max-width:100%!important;}
  html body .department-context-switch,
  html body .department-context-static{width:100%!important;}
  html body .department-context-switch select{min-width:0!important;width:100%!important;}

  html body .billing-invoice-actions,
  html body .billing-status-form{justify-content:stretch!important;}
  html body .billing-invoice-actions > *,
  html body .billing-status-form > *{width:100%!important;}

  /* keep tables card-like and cleaner */
  html body .table-wrap table.responsive-table tbody{gap:12px!important;}
  html body .table-wrap table.responsive-table tbody tr{border-radius:18px!important;padding:8px 14px!important;background:var(--rp28-dark-surface-alt)!important;border:1px solid var(--rp28-card-line)!important;}
  html body .table-wrap table.responsive-table tbody td{padding:10px 0!important;grid-template-columns:minmax(100px,38%) minmax(0,1fr)!important;}
  html body .table-wrap table.responsive-table td.actions,
  html body .table-wrap table.responsive-table td.table-actions,
  html body .table-wrap table.responsive-table td.mobile-action-cell{padding-top:14px!important;}
  html body .table-wrap table.responsive-table td .btn{width:100%!important;}
  html body .dashboard-notification-strip{grid-template-columns:44px minmax(0,1fr)!important;padding:12px 12px!important;border-radius:18px!important;}
  html body .dashboard-notification-strip::after{display:none!important;}
  html body .dashboard-notification-strip__action{display:none!important;}
}

@media(max-width:430px){
  html body .table-wrap table.responsive-table tbody td{grid-template-columns:1fr!important;gap:4px!important;}
  html body .table-wrap table.responsive-table tbody tr{padding:8px 12px!important;border-radius:16px!important;}
  html body .topbar{padding-inline:10px!important;}
}

body[data-theme="light"] .table-wrap table.responsive-table tbody tr{background:var(--rp28-light-surface)!important;border-color:var(--rp28-light-border)!important;box-shadow:0 10px 24px rgba(148,163,184,.08)!important;}
body[data-theme="light"] .table-wrap table.responsive-table tbody td{border-bottom-color:rgba(148,163,184,.16)!important;color:#0f172a!important;}
body[data-theme="light"] .table-wrap table.responsive-table td::before{color:#64748b!important;}