/* Royal Touch: subtle 3D interactions only. No print/accounting logic. */
@media screen{
  :root{
    --touch-shadow:0 9px 18px rgba(9,43,36,.16),0 2px 0 rgba(7,45,38,.22);
    --touch-shadow-hover:0 14px 26px rgba(9,43,36,.2),0 3px 0 rgba(7,45,38,.28);
    --touch-shadow-press:0 4px 10px rgba(9,43,36,.18),0 1px 0 rgba(7,45,38,.24);
    --touch-highlight:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.66));
  }

  button,
  .btn,
  .icon-btn,
  .login-submit,
  .lux-select-btn{
    position:relative;
    transform:translateY(0);
    transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,border-color .16s ease,background .16s ease;
    box-shadow:var(--touch-shadow);
    will-change:transform;
  }

  button:hover,
  .btn:hover,
  .icon-btn:hover,
  .login-submit:hover,
  .lux-select-btn:hover{
    transform:translateY(-2px);
    box-shadow:var(--touch-shadow-hover);
    filter:saturate(1.04);
  }

  button:active,
  .btn:active,
  .icon-btn:active,
  .login-submit:active,
  .lux-select-btn:active{
    transform:translateY(2px) scale(.985);
    box-shadow:var(--touch-shadow-press);
    filter:saturate(.98);
  }

  .btn.primary,
  .login-submit,
  #ownerPaymentForm .btn,
  #printSelectedOwners,
  #saveOwnerPdf,
  #waterReviewBtn,
  #approveWaterBill,
  #printWaterBill,
  #createIndependentInvoice,
  #printIndependentInvoice{
    overflow:hidden;
  }

  .btn.primary:before,
  .login-submit:before,
  #ownerPaymentForm .btn:before,
  #printSelectedOwners:before,
  #saveOwnerPdf:before,
  #waterReviewBtn:before,
  #approveWaterBill:before,
  #printWaterBill:before,
  #createIndependentInvoice:before,
  #printIndependentInvoice:before{
    content:"";
    position:absolute;
    inset:1px 2px auto 2px;
    height:48%;
    border-radius:inherit;
    background:var(--touch-highlight);
    opacity:.22;
    pointer-events:none;
  }

  .panel,
  .card,
  .stat-card,
  .association-card,
  .feature-card,
  .metric-card{
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  }

  .panel:hover,
  .card:hover,
  .stat-card:hover,
  .association-card:hover,
  .feature-card:hover,
  .metric-card:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 34px rgba(12,52,45,.12);
  }

  .sidebar,
  aside,
  .side-nav{
    box-shadow:0 22px 46px rgba(3,28,24,.22),inset 1px 0 0 rgba(255,255,255,.06);
  }

  .nav button,
  .sidebar button,
  aside button{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 14px rgba(0,0,0,.13);
  }
}

@media screen and (prefers-reduced-motion:reduce){
  button,
  .btn,
  .icon-btn,
  .login-submit,
  .lux-select-btn,
  .panel,
  .card,
  .stat-card,
  .association-card,
  .feature-card,
  .metric-card{
    transition:none!important;
  }
}

/* V64 royal-blue treatment for general milky controls; semantic danger/refund controls stay untouched. */
@media screen{
  .btn.soft:not(.red):not(.danger),
  .btn.outline:not(.red):not(.danger),
  .icon-btn:not(.red):not(.danger),
  button[data-close].btn.soft{
    background:linear-gradient(145deg,#1e5fbd,#123d87)!important;
    border-color:#0f377c!important;
    color:#fff!important;
    text-shadow:0 1px 1px rgba(0,0,0,.2);
    box-shadow:0 9px 18px rgba(17,57,126,.23),inset 0 1px rgba(255,255,255,.24)!important;
  }
  .btn.soft:not(.red):not(.danger):hover,
  .btn.outline:not(.red):not(.danger):hover,
  .icon-btn:not(.red):not(.danger):hover,
  button[data-close].btn.soft:hover{
    background:linear-gradient(145deg,#2c73d2,#174a9d)!important;
    border-color:#123f8d!important;
    color:#fff!important;
  }
  .btn.soft:not(.red):not(.danger):focus-visible,
  .btn.outline:not(.red):not(.danger):focus-visible,
  .icon-btn:not(.red):not(.danger):focus-visible{
    outline:3px solid rgba(50,126,226,.36)!important;
    outline-offset:2px!important;
  }
  .btn:disabled,.icon-btn:disabled,button[aria-disabled="true"]{transform:none!important;box-shadow:none!important;filter:grayscale(.22)!important;opacity:.52!important;cursor:not-allowed!important;min-height:inherit}

  button.ui-ripple-host,.btn.ui-ripple-host,.icon-btn.ui-ripple-host,.login-submit.ui-ripple-host,.lux-select-btn.ui-ripple-host,.monthly-lux-button.ui-ripple-host,.month-chip.ui-ripple-host{overflow:hidden;isolation:isolate}
  .ui-ripple-host>*:not(.ui-ripple):not(.ui-pointer-glow):not(.bfx-water):not(.bfx-ring){position:relative;z-index:1}
  .ui-pointer-glow{position:absolute!important;z-index:0!important;width:96px;height:96px;left:var(--ripple-x,50%);top:var(--ripple-y,50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.30),rgba(255,255,255,0) 70%);transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:left .07s linear,top .07s linear,opacity .16s ease}
  .ui-ripple-host.ui-ripple-hover>.ui-pointer-glow{opacity:.95}
  .ui-ripple{position:absolute!important;z-index:2!important;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.65) 0,rgba(255,255,255,.26) 34%,rgba(255,255,255,0) 72%);transform:scale(0);opacity:.85;animation:v64Ripple .62s cubic-bezier(.2,.72,.25,1) forwards}
  @keyframes v64Ripple{to{transform:scale(1);opacity:0}}

  .royal-date-card{animation:v64RoyalFloat 6s ease-in-out infinite}.royal-date-card:last-child{animation-delay:-3s}.royal-clock-card{animation:v64RoyalGlow 5s ease-in-out infinite}.royal-date-icon,.royal-calendar-icon{animation:v64IconBreathe 4.8s ease-in-out infinite}
  .panel>.panel-head h2,.royal-hero-copy h2{background-size:200% 100%;animation:v64TextSheen 10s ease-in-out infinite}
  @keyframes v64RoyalFloat{0%,100%{transform:translateY(-7px)}50%{transform:translateY(-10px)}}
  @keyframes v64RoyalGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.06)}}
  @keyframes v64IconBreathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.045);opacity:1}}
  @keyframes v64TextSheen{0%,100%{background-position:0 0}50%{background-position:100% 0}}
}

@media screen and (prefers-reduced-motion:reduce){
  .ui-ripple,.royal-date-card,.royal-clock-card,.royal-date-icon,.royal-calendar-icon,.panel>.panel-head h2,.royal-hero-copy h2{animation:none!important}
  .ui-ripple-host.ui-ripple-hover:after{display:none!important}
}
@media print{
  *,*:before,*:after{animation:none!important;transition:none!important;filter:none!important;text-shadow:none!important}
  .ui-ripple,.ui-pointer-glow,.ui-card-glow{display:none!important}
}

/* V65 final corrective interaction and button system. */
@media screen{
  :root{
    --royal-button-1:#246cc8;
    --royal-button-2:#123f8d;
    --royal-button-border:#0d357b;
    --royal-button-focus:rgba(48,125,229,.38);
    --royal-button-shadow:0 9px 20px rgba(17,57,126,.24),inset 0 1px rgba(255,255,255,.25);
    --royal-button-shadow-hover:0 14px 30px rgba(17,57,126,.31),inset 0 1px rgba(255,255,255,.30);
  }

  .btn,.icon-btn,.login-submit,.password-toggle,.top-tool,.close,.association-picker-button,.lux-select-btn,.monthly-lux-button,.month-chip,.nav button{
    box-sizing:border-box!important;
    border-width:1px!important;
    border-style:solid!important;
    line-height:1.35!important;
    vertical-align:middle;
  }
  .btn{min-block-size:42px;min-inline-size:108px;padding:9px 15px!important;border-radius:12px!important}
  .form-actions .btn,.modal-actions-footer .btn{min-inline-size:138px}
  .icon-btn{min-block-size:36px;min-inline-size:92px;padding:7px 10px!important;border-radius:9px!important}
  .login-submit{min-block-size:48px!important}
  .association-picker-button,.lux-select-btn,.monthly-lux-button{min-block-size:52px!important}
  .month-chip{min-block-size:40px;min-inline-size:92px}

  :is(.btn,.icon-btn,.login-submit,.password-toggle,.top-tool,.close,.association-picker-button,.lux-select-btn,.monthly-lux-button,.month-chip):not(.red):not(.danger):not(.warning):not(.success):not(:disabled):not([aria-disabled="true"]){
    background:linear-gradient(145deg,var(--royal-button-1),var(--royal-button-2))!important;
    border-color:var(--royal-button-border)!important;
    color:#fff!important;
    text-shadow:0 1px 1px rgba(0,0,0,.22)!important;
    box-shadow:var(--royal-button-shadow)!important;
  }
  :is(.btn,.icon-btn,.login-submit,.password-toggle,.top-tool,.close,.association-picker-button,.lux-select-btn,.monthly-lux-button,.month-chip):not(.red):not(.danger):not(.warning):not(.success):not(:disabled):not([aria-disabled="true"]):hover,
  :is(.btn,.icon-btn,.login-submit,.password-toggle,.top-tool,.close,.association-picker-button,.lux-select-btn,.monthly-lux-button,.month-chip).active:not(.red):not(.danger):not(:disabled){
    background:linear-gradient(145deg,var(--royal-button-h1,#3180df),var(--royal-button-h2,#174a9f))!important;
    border-color:var(--royal-button-border,#123f8d)!important;
    color:#fff!important;
    box-shadow:var(--royal-button-shadow-hover)!important;
  }
  :is(.btn,.icon-btn,.login-submit,.password-toggle,.top-tool,.close,.association-picker-button,.lux-select-btn,.monthly-lux-button,.month-chip):focus-visible{
    outline:3px solid var(--royal-button-focus)!important;
    outline-offset:2px!important;
  }
  :is(.btn,.icon-btn,.login-submit,.password-toggle,.top-tool,.close,.association-picker-button,.lux-select-btn,.monthly-lux-button,.month-chip):is(.red,.danger),#refundOwnerPayment,.nav button.danger-link{
    background:linear-gradient(145deg,#c94b55,#8f2732)!important;
    border-color:#7f202a!important;
    color:#fff!important;
    box-shadow:0 9px 20px rgba(143,39,50,.24),inset 0 1px rgba(255,255,255,.22)!important;
  }
  :is(.btn,.icon-btn,button).warning{background:linear-gradient(145deg,#d99628,#9c6212)!important;border-color:#87520d!important;color:#fff!important}
  :is(.btn,.icon-btn,button).success{background:linear-gradient(145deg,#249260,#14623f)!important;border-color:#105333!important;color:#fff!important}
  :is(button,.btn,.icon-btn):disabled,:is(button,.btn,.icon-btn)[aria-disabled="true"]{
    background:linear-gradient(145deg,#aeb7bd,#7e8991)!important;
    border-color:#727d84!important;
    color:#f4f6f7!important;
    text-shadow:none!important;
    opacity:.72!important;
    cursor:not-allowed!important;
    transform:none!important;
    box-shadow:none!important;
  }

  .top-tool,.close{inline-size:46px!important;min-inline-size:46px!important;block-size:46px!important;min-block-size:46px!important;padding:0!important;border-radius:14px!important}
  .close{inline-size:36px!important;min-inline-size:36px!important;block-size:36px!important;min-block-size:36px!important;border-radius:50%!important}
  .sidebar .nav button:not(.danger-link){background:linear-gradient(145deg,rgba(42,112,204,.72),rgba(18,63,141,.72))!important;border-color:rgba(135,180,238,.28)!important;color:#fff!important;box-shadow:inset 0 1px rgba(255,255,255,.14),0 7px 14px rgba(0,0,0,.13)!important}
  .sidebar .nav button.active:not(.danger-link),.sidebar .nav button:hover:not(.danger-link){background:linear-gradient(145deg,#347ed7,#174a9f)!important;border-color:#79a9e5!important;color:#fff!important}
  .login-links button{background:transparent!important;border:0!important;box-shadow:none!important;text-shadow:none!important;color:#d9e8ff!important}

  .owner-name-btn{background:transparent!important;border:0!important;border-bottom:2px solid rgba(31,91,174,.28)!important;color:var(--ink)!important;text-shadow:none!important;box-shadow:none!important;font-weight:950!important}
  .owner-name-btn:hover{background:rgba(30,95,189,.06)!important;color:var(--ink)!important;border-bottom-color:#1e5fbd!important;box-shadow:none!important}
  .result-item,.alert-modern,.assoc-pick-item,.lux-option,.monthly-lux-option{color:var(--ink);text-shadow:none}
  .lux-option,.monthly-lux-option{background:#f7f9fc!important;border:1px solid #e0e7f0!important;box-shadow:0 6px 15px rgba(19,57,105,.06)!important}
  .lux-option:hover,.lux-option.selected,.lux-option.active,.monthly-lux-option:hover,.monthly-lux-option.selected,.monthly-lux-option.active{background:linear-gradient(145deg,var(--theme-accent,var(--brand)),color-mix(in srgb,var(--theme-accent,var(--brand)) 78%,#173f80))!important;color:#fff!important;border-color:color-mix(in srgb,var(--theme-accent,var(--brand)) 72%,#173f80)!important}

  .assoc-pick-check,.lux-option-check{
    display:grid!important;
    place-items:center!important;
    inline-size:24px!important;
    block-size:24px!important;
    flex:0 0 24px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:var(--theme-gold,var(--brand))!important;
  }
  .lux-option-check:empty{color:transparent!important}
  .lux-option.selected .lux-option-check,.assoc-pick-item.selected .assoc-pick-check{color:var(--theme-gold,#fff)!important;text-shadow:0 1px 2px rgba(0,0,0,.3)}

  body>.lux-select-menu:is(
    [data-lux-owner="ownerPaymentSelect"],
    [data-lux-owner="paymentOwner"],
    [data-lux-owner="letterOwnerSelect"],
    [data-lux-owner="deleteOwnerSelect"],
    [data-lux-owner="ownerPdfShareSelect"],
    [data-lux-owner="indInvoiceOwner"],
    [data-lux-owner^="waterOwnerSelect"]
  ) .lux-option{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 24px!important;
    align-items:center!important;
    gap:8px!important;
    block-size:50px!important;
    min-block-size:50px!important;
    max-block-size:50px!important;
    overflow:hidden!important;
  }
  body>.lux-select-menu:is(
    [data-lux-owner="ownerPaymentSelect"],
    [data-lux-owner="paymentOwner"],
    [data-lux-owner="letterOwnerSelect"],
    [data-lux-owner="deleteOwnerSelect"],
    [data-lux-owner="ownerPdfShareSelect"],
    [data-lux-owner="indInvoiceOwner"],
    [data-lux-owner^="waterOwnerSelect"]
  ) .lux-option-copy{min-inline-size:0!important;overflow:hidden!important}
  body>.lux-select-menu:is(
    [data-lux-owner="ownerPaymentSelect"],
    [data-lux-owner="paymentOwner"],
    [data-lux-owner="letterOwnerSelect"],
    [data-lux-owner="deleteOwnerSelect"],
    [data-lux-owner="ownerPdfShareSelect"],
    [data-lux-owner="indInvoiceOwner"],
    [data-lux-owner^="waterOwnerSelect"]
  ) .lux-option-primary{
    display:block!important;
    min-inline-size:0!important;
    max-inline-size:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    -webkit-line-clamp:unset!important;
  }

  tbody tr.status-late1>td,tbody tr.status-late2>td,tbody tr.status-paid>td,tbody tr.status-regular>td{color:var(--ink)!important;font-weight:inherit!important}
  tbody tr[class*="status-"] .owner,tbody tr[class*="status-"] .owner-name-btn{color:var(--ink)!important}
  tbody tr[class*="status-"] .icon-btn:not(.red):not(.danger){color:#fff!important}
  #ownersTable .icon-btn:not(.red):not(.danger),#ownersView .icon-btn:not(.red):not(.danger){color:#fff!important}
  .pill.ok{color:#111!important}.pill.warn{color:#f97316!important}.pill.late{color:#dc2626!important}.pill.paid{color:#15803d!important}

  .ui-ripple-host.ui-interactive-hover{
    transform:translateY(-2px)!important;
    box-shadow:var(--royal-button-shadow-hover)!important;
    filter:saturate(1.05);
  }
  .password-toggle.ui-ripple-host.ui-interactive-hover{transform:translateY(-50%)!important}
  .ui-ripple-host.ui-pressing{transform:perspective(620px) translateY(1px) scale(.988)!important;filter:saturate(.98)}
  .password-toggle.ui-ripple-host.ui-pressing{transform:translateY(-48%) scale(.988)!important}
  .ui-ripple-host :is(svg,.button-icon,.search-icon,.royal-date-icon,.royal-calendar-icon,.royal-clock-icon,.lux-dialog-bell){transition:transform .16s ease,filter .16s ease}
  .ui-ripple-host.ui-interactive-hover :is(svg,.button-icon,.search-icon,.royal-date-icon,.royal-calendar-icon,.royal-clock-icon,.lux-dialog-bell){transform:none!important;filter:drop-shadow(0 0 5px rgba(255,255,255,.42))}

  .ui-card-host{position:relative;isolation:isolate;will-change:transform;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important}
  .ui-card-host>*:not(.ui-card-glow):not(.bfx-ring):not(.bfx-water){position:relative;z-index:1}
  .ui-card-glow{position:absolute!important;z-index:0!important;inline-size:180px;block-size:180px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);opacity:0;background:radial-gradient(circle,rgba(57,132,226,.20),rgba(57,132,226,0) 72%);transition:opacity .18s ease}
  .ui-card-host.ui-card-hover{transform:none!important;border-color:color-mix(in srgb,var(--theme-accent,var(--royal-button-1)) 32%,#d9e3e8)!important;box-shadow:0 18px 38px rgba(18,63,141,.14)!important}
  .ui-card-host.ui-card-hover>.ui-card-glow{opacity:0!important}

  .typed-confirm-field{margin:16px 0 0;padding:14px;border:1px solid #e0a5aa;border-radius:14px;background:#fff5f6}
  .typed-confirm-field label{color:#74242c!important;font-weight:900!important}
  .typed-confirm-field input{background:#fff!important;border-color:#d98e96!important;font-weight:900}
  .typed-confirm-field input:focus{border-color:#a6313d!important;box-shadow:0 0 0 4px rgba(166,49,61,.13)!important}
  .typed-confirm-field input[aria-invalid="true"]{border-color:#b72f3c!important}
  .typed-confirm-error{display:block;margin-top:7px;color:#8b3139;font-size:11px;font-weight:800;line-height:1.7}
  .typed-confirm-modal #confirmMessage{white-space:pre-line;line-height:1.8}
  .typed-confirm-modal .modal-card{width:min(680px,100%)!important}
}

@media screen and (hover:none),screen and (pointer:coarse){
  button:hover,.btn:hover,.icon-btn:hover,.login-submit:hover,.lux-select-btn:hover,.monthly-lux-button:hover,.month-chip:hover,.panel:hover,.card:hover,.stat-card:hover,.association-card:hover,.feature-card:hover,.metric-card:hover{transform:none!important}
  .ui-pointer-glow,.ui-card-glow{display:none!important}
}

@media screen and (prefers-reduced-motion:reduce){
  .ui-ripple-host.ui-interactive-hover,.ui-ripple-host.ui-pressing,.ui-card-host.ui-card-hover{transform:none!important;transition:none!important}
  .ui-pointer-glow,.ui-card-glow,.ui-ripple{display:none!important}
  .ui-ripple-host :is(svg,.button-icon,.search-icon,.royal-date-icon,.royal-calendar-icon,.royal-clock-icon,.lux-dialog-bell){transform:none!important;transition:none!important}
}

/* ===== v66 GLOBAL CLARITY (visual only) — every field/text as clear as the Owners table ===== */
/* Fields & their typed value: solid dark ink, never faded, in content area + modals (not the dark sidebar/login) */
.content input,.content select,.content textarea,
.modal input,.modal select,.modal textarea{
  color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;opacity:1!important;font-weight:700;
}
.content input::placeholder,.content textarea::placeholder,
.modal input::placeholder,.modal textarea::placeholder{
  color:#5f716d!important;-webkit-text-fill-color:#5f716d!important;opacity:1!important;
}
/* NOTE: no color override on .lux-select-btn — those buttons keep their own color
   (white text on blue backgrounds, dark text on light), so blue dropdowns stay readable. */
/* labels & secondary text: darker so nothing looks pale/grey */
.content .field label,.modal .field label,.content form label,.modal form label{color:#2b433e!important;font-weight:800}
.content small,.modal small,.content .entity-meta,.modal .entity-meta,.content .feature-form-note,.modal .feature-form-note{color:#3d534d!important}
/* table cells everywhere match the clear Owners table */
.content table td,.modal table td{color:#1c332f!important}
/* disabled / read-only fields stay readable (locked look via background only) */
.content input:disabled,.content select:disabled,.content input[readonly],
.modal input:disabled,.modal select:disabled,.modal input[readonly]{
  color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;opacity:1!important;background:#eef3f1!important;
}

/* ===== v4 audit fixes ===== */
/* F-05: the toast is a non-interactive notification — it must never intercept clicks (it was opacity:0 but pointer-events:auto). */
.toast{pointer-events:none!important}
/* F-12: comfortable touch targets on phones/tablets without changing the visual identity. */
@media (max-width:820px){
  .btn,button.btn,.icon-btn,.row-actions .btn,.top-tool,.close,.password-toggle,.period-type-btn,[data-view]{min-height:44px}
}
/* F-06 water edit: owner dropdown + unit input inside the readings table */
.water-edit-readings-table select.water-edit-owner{width:100%;min-height:38px;font-weight:700;color:var(--ink)}
.water-edit-readings-table input.water-edit-unit{width:100%;min-height:38px;text-align:center;font-weight:700}

/* ===== v3 fixes ===== */
/* Note 1: stop page "stretch/return" jitter — the CARD glow (unclipped, 180px) extended page height.
   Only the CARD glow is disabled. The BUTTON glow is clipped inside overflow:hidden buttons (safe). */
.ui-card-glow{display:none!important}
html{overflow-y:scroll!important;scrollbar-gutter:stable!important}
body{overflow-x:hidden!important}

/* Note 4: remove the unwanted dropdown-arrow marks next to the search field / report button in Owners page */
#ownersView .lux-select-btn::before{display:none!important}
#ownersView .lux-select-btn{padding-inline:15px!important}
/* v7 N1: the native <select> behind the lux dropdowns stayed visible (28px, showing the browser
   arrow) in the Owners view AND several feature views (water, invoices, letters, employees,
   settings, platform...). The base .native-hidden (opacity:0) is defeated by view overrides —
   force EVERY lux-replaced native select fully out of layout platform-wide. The lux-select
   replacement stays and keeps full functionality (verified opening/selecting still works). */
select.native-hidden{display:none!important}

/* ===== v7: hover-activated royal-gold border + strong water on the whole platform =====
   The rejected v5 cursor-follow ripple is removed here — the old .ui-pointer-glow is hidden
   completely, and replaced by button-fx.js (canvas water) + the rotating gold ring below. */
.ui-pointer-glow{display:none!important}

/* rotation driver for the conic-gradient border ring */
@property --bfx-ang{syntax:'<angle>';inherits:false;initial-value:0deg}

/* every action / nav / dropdown / login button + association card becomes an isolated stacking
   context so the water canvas can sit at z-index:-1 (above the element's own background, below its
   label → text stays perfectly crisp) and the gold ring can sit above at z-index:3 */
.btn,.nav button,.login-submit,.lux-select-btn,.association-picker-button,.monthly-lux-button,.month-chip,.association-overview-card{position:relative;isolation:isolate}

/* water light overlay — created on hover by button-fx.js, removed on leave (idle otherwise) */
.bfx-water{position:absolute;inset:0;width:100%;height:100%;z-index:-1;border-radius:inherit;pointer-events:none}

/* royal/dark-gold rotating border ring — masked to a thin edge so it never covers the label */
.bfx-ring{position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none;padding:2.5px;
  background:conic-gradient(from var(--bfx-ang),#7a5712,#c9a227 14%,#fff3c0 26%,#ffe58a 38%,#d4af37 54%,#3fd0b8 64%,#e8c65a 78%,#a97a1e 90%,#7a5712);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:bfxspin 4.5s linear infinite;filter:drop-shadow(0 0 4px rgba(213,175,55,.42))}
@keyframes bfxspin{to{--bfx-ang:360deg}}
@media (prefers-reduced-motion:reduce){.bfx-ring{animation:none}}

/* N6: permanent rotating royal-gold ring around the platform logo icon (sidebar) */
.logo-ring{position:relative;display:inline-grid;place-items:center;isolation:isolate;border-radius:21px}
.logo-ring>.logo-img{display:block}
.logo-ring::before{content:"";position:absolute;inset:-5px;border-radius:24px;padding:3px;z-index:-1;
  background:conic-gradient(from var(--bfx-ang),#7a5712,#c9a227 14%,#fff3c0 26%,#ffe58a 38%,#d4af37 54%,#3fd0b8 64%,#e8c65a 78%,#a97a1e 90%,#7a5712);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:bfxspin 5.5s linear infinite;filter:drop-shadow(0 0 6px rgba(213,175,55,.55))}
@media (prefers-reduced-motion:reduce){.logo-ring::before{animation:none}}

/* ===== v6 fixes ===== */
/* N4: water invoice edit modal — compact fields + fixed columns so the table never scrolls sideways.
   v7: made noticeably smaller (600px) and the owner column is now plain text (no dropdown). */
.water-edit-card{width:min(600px,100%)!important;max-height:86vh;display:flex;flex-direction:column}
.water-edit-card .modal-body{overflow:auto;min-height:0;padding:16px!important}
.water-edit-card .feature-form-note{font-size:11px;line-height:1.5;margin:6px 0}
.water-edit-card .grid2{gap:10px}
.water-edit-readings-wrap{margin-top:10px;max-height:min(280px,40vh);overflow-y:auto;overflow-x:hidden;border:1px solid #d8e4df;border-radius:12px}
.water-edit-readings-table{table-layout:fixed;width:100%;border-collapse:collapse;font-size:12px}
.water-edit-readings-table th,.water-edit-readings-table td{padding:4px 5px!important;vertical-align:middle}
.water-edit-readings-table th:nth-child(1),.water-edit-readings-table td:nth-child(1){width:26%}
.water-edit-readings-table th:nth-child(2),.water-edit-readings-table td:nth-child(2){width:14%}
.water-edit-readings-table th:nth-child(3),.water-edit-readings-table td:nth-child(3){width:22%}
.water-edit-readings-table th:nth-child(4),.water-edit-readings-table td:nth-child(4){width:22%}
.water-edit-readings-table th:nth-child(5),.water-edit-readings-table td:nth-child(5){width:16%}
.water-edit-readings-table input.water-edit-reading,
.water-edit-readings-table input.water-edit-unit{min-height:30px!important;font-size:12px!important;padding:2px 6px!important;width:100%;box-sizing:border-box}
/* owner is now plain text (dropdown removed per request) */
.water-edit-readings-table td.water-edit-owner-cell{font-size:12px;font-weight:800;color:var(--ink);white-space:normal;word-break:break-word;line-height:1.35}
.water-edit-readings-table .owner-display-name{font-size:12px}
.water-edit-usage-summary{margin-top:8px;font-size:12px;padding:8px 10px}

/* N8: employee names must show fully (were clamped to 2 lines + clipped, and cut by a narrow column) */
#employeeListView td.owner,#employeesTable td.owner{min-width:150px}
#employeeListView td.owner .entity-name,#employeesTable td.owner .entity-name{-webkit-line-clamp:unset!important;display:block!important;overflow:visible!important;white-space:normal;word-break:break-word}

/* N6: keep monthly dropdowns above the following cards/text (reinforces the stacking fix) */
#monthlyFeesView .monthly-card{position:relative}
#monthlyFeesView .monthly-card:has(.monthly-lux-select.open){z-index:7000}

/* ===== v7: quick blue/gold theme toggle in platform settings =====
   The blue button keeps the platform's royal-blue look; the "ذهبي" button is forced gold by
   out-specifying the royal-button !important system (>= 0,8,0 so it beats the 0,7,0 rules). */
.theme-quick-toggle{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.theme-quick-label{font-size:12px;font-weight:800;color:var(--muted)}
.theme-quick-btn{position:relative;min-width:120px}
.theme-quick-btn[data-theme-quick="desertGold"]:not(.red):not(.danger):not(.warning):not(.success):not(:disabled):not([aria-disabled="true"]),
.theme-quick-btn[data-theme-quick="desertGold"]:not(.red):not(.danger):not(.warning):not(.success):not(:disabled):not([aria-disabled="true"]):hover{
  background:linear-gradient(145deg,#e6c25a,#c1912e)!important;border-color:#b9832a!important;color:#3a2600!important;text-shadow:none!important;
}
.theme-quick-btn.theme-quick-active{outline:3px solid rgba(213,168,63,.85)!important;outline-offset:2px!important}
.theme-quick-btn.theme-quick-active::after{content:"✓";margin-inline-start:8px;font-weight:900}

/* ===== v7 N2: text contrast — nothing faded on green/blue surfaces (white text), dark on light ===== */
/* association box + menu (green surface): brighten name / code / status */
.association-picker-button .assoc-pick-text,
.association-picker-button .assoc-pick-name{color:#ffffff!important}
.association-picker-button .assoc-pick-code,
.association-picker-menu button.assoc-pick-item .assoc-pick-code{color:#e3f1ec!important;opacity:1!important}
.assoc-current-tag,.assoc-pick-status,.assoc-pick-badge{color:#ffe9b8!important;opacity:1!important}
/* sidebar footer "آخر حفظ" was dim gold on dark green */
.sidebar-backup-time{color:#f1e7cb!important}
/* date / clock hero cards (green): pure-white labels, bright cream values */
.royal-date-card small{color:#ffffff!important}
.royal-date-card strong,.royal-clock-card strong{color:#fdf3d6!important}

/* ================================================================
   ===== d1 (yahia1997-1418 d1) fixes =====
   ================================================================ */

/* م1: water edit modal — the GLOBAL table{min-width:980px} forced the readings table to 980px
   inside a 600px modal, cutting the reading inputs. Kill it + truly compact inputs.
   Forced by ID: another width:auto rule made the fixed table expand to input preferred widths. */
#waterInvoiceEditModal .water-edit-readings-table{width:100%!important;max-width:100%!important;min-width:0!important;table-layout:fixed!important}
#waterInvoiceEditModal .water-edit-readings-table input{width:100%!important;min-width:0!important;max-width:100%!important}
.water-edit-readings-table{min-width:0!important}
.water-edit-card{width:min(640px,100%)!important}
.water-edit-readings-table input.water-edit-reading,
.water-edit-readings-table input.water-edit-unit{min-height:30px!important;height:30px!important;line-height:1.2!important}
/* م1 contrast: gray notes in the modal → dark readable */
.water-edit-card .feature-form-note{color:#2c4440!important;font-weight:700}

/* م2: invoice-number column in the water follow table — roomy, one clean line (SCREEN only;
   the printed report is a separate generated document and is untouched). */
#waterHistoryView .invoice-number-col{min-width:118px!important;white-space:normal}
#waterHistoryView .carryover-source-cell{font-size:11px;line-height:1.5}
#waterHistoryView .invoice-number-heading{white-space:nowrap}

/* م4: owners table — compact density (SCREEN only) */
#ownersView td{padding:7px 8px!important;font-size:12px!important}
#ownersView th{padding:8px 8px!important;font-size:11px!important}
#ownersView td.owner{min-width:165px!important;font-size:12.5px!important}
#ownersView .owner-name-btn{font-size:12.5px!important;padding:2px 0!important;min-height:0!important}
#ownersView .icon-btn{min-block-size:30px!important;min-inline-size:64px!important;padding:4px 8px!important;font-size:11px!important}
#ownersView .progress{height:4px;margin-top:4px}
#ownersView table{min-width:860px}
/* م4: status colours VISIBLE again (screen): tinted rows + filled pills */
#ownersView tbody tr.status-paid td{background:#e9f7ee!important}
#ownersView tbody tr.status-late1 td{background:#fdf3e4!important}
#ownersView tbody tr.status-late2 td{background:#fdeaea!important}
#ownersView .pill{background:#eef2f0!important;color:#334a46!important;padding:5px 10px!important}
#ownersView .pill.paid{background:#1c8a4c!important;color:#fff!important}
#ownersView .pill.warn{background:#e8892e!important;color:#fff!important}
#ownersView .pill.late{background:#d64545!important;color:#fff!important}
#ownersView .pill.ok{background:#3b82c4!important;color:#fff!important}

/* م6: the selected platform theme now really recolors ALL action buttons (classic keeps the
   current royal blue). Colors are derived from each theme's own accent. */
html[data-platform-theme]:not([data-platform-theme="classic"]){
  --royal-button-1:color-mix(in srgb,var(--theme-accent,#246cc8) 82%,white 8%);
  --royal-button-2:color-mix(in srgb,var(--theme-accent,#123f8d) 60%,black 36%);
  --royal-button-border:color-mix(in srgb,var(--theme-accent,#123f8d) 52%,black 48%);
  --royal-button-focus:color-mix(in srgb,var(--theme-accent,#307de5) 40%,transparent);
  --royal-button-h1:color-mix(in srgb,var(--theme-accent,#3180df) 92%,white 8%);
  --royal-button-h2:color-mix(in srgb,var(--theme-accent,#174a9f) 48%,black 52%);
}

/* ===== d1 interactivity (approved 15) ===== */
/* ت2: table rows react on hover */
#appShell tbody tr{transition:background .15s ease,box-shadow .15s ease}
#appShell tbody tr:hover{background:#eef7f3!important;box-shadow:inset 3px 0 0 var(--gold,#d5a83f)}
/* ت3: soft page transition every time a view is shown */
@media (prefers-reduced-motion:no-preference){
  .view{animation:d1ViewIn .22s ease}
  @keyframes d1ViewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
/* ت4: bell swings while unread alerts exist */
@media (prefers-reduced-motion:no-preference){
  .top-tool:has(.alert-badge:not(.hidden)){animation:d1Bell 4.2s ease-in-out infinite;transform-origin:top center}
  @keyframes d1Bell{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(9deg)}91%{transform:rotate(-8deg)}94%{transform:rotate(5deg)}97%{transform:rotate(-3deg)}}
}
/* ت6: stat + association cards lift on hover */
@media (hover:hover){
  #appShell .stat,#appShell .association-overview-card{transition:transform .18s ease,box-shadow .18s ease}
  #appShell .stat:hover,#appShell .stat.ui-card-host.ui-card-hover:hover{transform:translateY(-4px)!important;box-shadow:0 20px 40px rgba(13,76,69,.16)!important}
  #appShell .association-overview-card:hover{transform:translateY(-4px)!important;box-shadow:0 20px 40px rgba(13,76,69,.16)!important}
}
/* ت7: dropdown menus open with a soft slide */
@media (prefers-reduced-motion:no-preference){
  .lux-select-menu:not(.hidden),.association-picker-menu,.monthly-lux-select.open .monthly-lux-menu{animation:d1MenuIn .16s ease}
  @keyframes d1MenuIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
}
/* ت8: custom slim scrollbar (gold/green) */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#168276,#c9a227);border-radius:99px;border:2px solid #eef3f1}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#12675f,#a97a1e)}
/* ت9: floating back-to-top button */
#d1ToTop{position:fixed;left:22px;bottom:86px;z-index:45;width:46px;height:46px;border-radius:50%;border:2px solid #d5a83f;
  background:linear-gradient(145deg,#0c4a43,#168276);color:#ffe9b0;font-size:20px;font-weight:900;display:grid;place-items:center;
  box-shadow:0 12px 26px rgba(8,45,40,.35);opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .2s,transform .2s;cursor:pointer}
#d1ToTop.show{opacity:1;pointer-events:auto;transform:none}
/* ت5: animated save check */
#d1SaveCheck{position:fixed;left:22px;bottom:150px;z-index:70;width:56px;height:56px;border-radius:50%;background:#0f7a44;
  box-shadow:0 14px 30px rgba(15,122,68,.45);display:grid;place-items:center;opacity:0;transform:scale(.5);pointer-events:none;
  transition:opacity .2s,transform .25s cubic-bezier(.2,1.4,.4,1)}
#d1SaveCheck.show{opacity:1;transform:scale(1)}
#d1SaveCheck svg{width:30px;height:30px}
#d1SaveCheck path{stroke:#fff;stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:34;stroke-dashoffset:34}
#d1SaveCheck.show path{animation:d1Check .5s .12s ease forwards}
@keyframes d1Check{to{stroke-dashoffset:0}}
/* د6: welcome overlay after login */
#d1Welcome{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:rgba(5,32,28,.86);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .3s}
#d1Welcome.show{opacity:1}
#d1Welcome b{font-size:clamp(26px,4vw,44px);color:#ffe8a6;font-weight:950;text-shadow:0 4px 30px rgba(240,214,124,.5);
  animation:d1WelcomeIn .6s cubic-bezier(.2,1.3,.4,1)}
@keyframes d1WelcomeIn{from{opacity:0;transform:translateY(24px) scale(.92)}to{opacity:1;transform:none}}

/* ===== §5: neutral loading state — no login flash on refresh with a valid session =====
   Body starts .auth-checking; initAuth() removes it once the session is resolved (showApp
   or showLogin). While checking we hide BOTH the login form and the app shell and show a
   quiet spinner, so a logged-in refresh never flashes the login screen. */
.auth-loading{display:none}
body.auth-checking #loginScreen{visibility:hidden!important}
body.auth-checking .auth-loading{
  display:flex;position:fixed;inset:0;z-index:40;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 42%,rgba(2,10,8,.10),rgba(2,8,6,.34) 82%);pointer-events:none}
.auth-loading-spin{width:46px;height:46px;border-radius:50%;
  border:3px solid rgba(240,214,124,.25);border-top-color:#f0d67c;animation:authSpin .9s linear infinite}
@keyframes authSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.auth-loading-spin{animation:none}}
/* ===== §8: "مسدد بزيادة" status pill + per-owner surplus note (screen only) ===== */
.pill.over{background:#8a6a12;color:#fff8e6;border:1px solid #d4af37}
.water-excess-note{display:block;font-size:11px;font-weight:800;color:#8a6a12;margin-top:2px;white-space:nowrap}
/* the confirmation dialog is always the topmost decision — it must sit ABOVE any modal it is
   raised over (e.g. the §8 overpay warning opened on top of the water-invoice edit modal). */
#confirmModal{z-index:60}