/* OUViR & SORRIR | Signature Windows 2026
 * UI only: no storage, calculation, permission or form-handling changes.
 * Shared language for patient dialogs, fiscal suite, proposals and website.
 */
:root {
  --ow-navy:#0c2b43;
  --ow-blue:#3279ec;
  --ow-teal:#10a88e;
  --ow-lime:#8ae0b9;
  --ow-rose:#e96e9b;
  --ow-amber:#f4b768;
  --ow-border:#d8e7f0;
  --ow-shadow:0 30px 90px rgba(4,31,54,.26), 0 10px 36px rgba(7,57,81,.10);
  --ow-soft:linear-gradient(150deg,#f8fcff 0%,#ffffff 47%,#f3faf9 100%);
}

/* Shared dialog system: custom and browser-native windows */
dialog:is(.modal,.fs-dialog,.hq-dialog,.hq-export-dialog,.os-search-dialog,.product-dialog){
  box-sizing:border-box;
  position:fixed;
  max-width:calc(100vw - 24px);
  max-height:calc(100dvh - 22px);
  border:1px solid rgba(204,224,233,.88);
  border-radius:30px;
  background:#fff;
  color:var(--ow-navy);
  box-shadow:var(--ow-shadow);
  scrollbar-color:#a6cfcf transparent;
  scrollbar-width:thin;
}
dialog:is(.modal,.fs-dialog,.hq-dialog,.hq-export-dialog,.os-search-dialog,.product-dialog)::backdrop{
  background:rgba(3,23,42,.65);
  backdrop-filter:blur(9px) saturate(1.1);
  -webkit-backdrop-filter:blur(9px) saturate(1.1);
}
/* Accent is a thin, intentional visual detail; it never covers controls. */
dialog:is(.modal,.fs-dialog,.hq-dialog,.hq-export-dialog,.os-search-dialog,.product-dialog)::before{
  content:"";
  display:block;
  position:absolute;
  z-index:2;
  inset:0 0 auto;
  height:5px;
  pointer-events:none;
  background:linear-gradient(90deg,#00b79c 0%,#37d9c9 24%,#4589f3 49%,#9878d7 70%,#f6a66e 100%);
}
dialog:where(.modal,.fs-dialog,.hq-dialog,.hq-export-dialog,.os-search-dialog,.product-dialog):focus-visible{
  outline:3px solid rgba(24,168,153,.35);
  outline-offset:3px;
}
@media(prefers-reduced-motion:no-preference){
  dialog:is(.modal,.fs-dialog,.hq-dialog,.hq-export-dialog,.os-search-dialog,.product-dialog)[open]{
    animation:owWindowEnter .19s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes owWindowEnter{from{opacity:.6;transform:translateY(9px) scale(.987)}to{opacity:1;transform:translateY(0) scale(1)}}
}

/* Legacy patient/agenda/finance forms */
dialog.modal{width:min(840px,calc(100vw - 24px));overflow:hidden;background:var(--ow-soft)}
.modal .modal-head{
  position:relative;
  padding:25px 30px 22px;
  background:linear-gradient(120deg,#0b2944 0%,#0f4965 54%,#116a6d 100%);
  border-bottom:1px solid rgba(255,255,255,.1);
  color:#fff;
}
.modal .modal-head h2{color:#fff;font-size:clamp(23px,2.5vw,30px);letter-spacing:-.045em;line-height:1.12}
.modal .modal-head .eyebrow{color:#91f0d4;letter-spacing:.16em;font-weight:800}
.modal .modal-head .icon-button{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.26);border-radius:13px;min-width:43px;min-height:43px;box-shadow:none;transition:background .2s,transform .2s}
.modal .modal-head .icon-button:hover{background:rgba(255,255,255,.26);transform:rotate(3deg)}
.modal .modal-body{background:var(--ow-soft);padding:28px 30px 30px}
.modal .modal-actions{background:#fff;border-top:1px solid var(--ow-border);padding:17px 30px 20px;gap:10px}

/* Fiscals: intentionally recognizable blue / green, distinctive from patients */
dialog.fs-dialog{width:min(940px,calc(100vw - 24px));background:var(--ow-soft)}
.fs-dialog .fs-dialog-header{
  position:relative;
  border-bottom:1px solid #d8eaf1;
  background:linear-gradient(120deg,#e8f7fb 0%,#eef7ff 42%,#ebfff3 100%);
  padding:30px 32px 25px;
}
.fs-dialog .fs-dialog-header h2{letter-spacing:-.045em;color:#113b58;font-size:clamp(23px,3vw,32px)}
.fs-dialog .fs-dialog-header p{color:#547a8b}
.fs-dialog .fs-dialog-content{background:var(--ow-soft);padding:27px 32px}
.fs-dialog .fs-dialog-footer{background:linear-gradient(95deg,#f5fbfe,#fff);padding:18px 32px 21px}

/* Hearing-aid quotes / documents: restrained blue-green prestige */
dialog:is(.hq-dialog,.hq-export-dialog){width:min(1010px,calc(100vw - 24px))}
.hq-dialog .hq-dialog-header,.hq-export-dialog header{
  background:linear-gradient(115deg,#092c47 0%,#164f6b 55%,#0a8278 100%);
  padding:30px 35px 28px;
  border-bottom:1px solid rgba(255,255,255,.13);
}
.hq-dialog .hq-dialog-header h2,.hq-export-dialog header h2{color:white;letter-spacing:-.035em}
.hq-dialog .hq-form-scroll{background:var(--ow-soft);padding:23px 35px;scrollbar-color:#a6d6d2 transparent}
.hq-dialog .hq-dialog-footer,.hq-export-dialog .hq-export-actions{background:#f8fcfd;border-top:1px solid var(--ow-border);padding:19px 35px}
.hq-export-dialog .hq-export-grid{background:var(--ow-soft)}
.hq-export-grid button{border-radius:18px;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s}
.hq-export-grid button:hover{box-shadow:0 12px 30px rgba(11,100,133,.13);transform:translateY(-2px)}

/* Search window */
dialog.os-search-dialog{border-radius:27px;overflow:hidden}
.os-search-dialog .os-search-head{padding:19px 23px;background:linear-gradient(116deg,#f1fafc,#f0f8ff)}
.os-search-dialog .os-search-results{background:#fff}
.os-search-dialog .os-search-footer{background:#f2f9fa}

/* Website product lightbox */
dialog.product-dialog{padding:48px 38px 38px;width:min(920px,calc(100vw - 24px));border-radius:30px;background:linear-gradient(130deg,#fff,#f3faff)}
.product-dialog .close-photo{border-radius:13px;box-shadow:0 7px 24px rgba(14,57,77,.10)}
.product-dialog .dialog-grid img{border-radius:23px;box-shadow:0 12px 35px rgba(8,57,84,.13)}
.product-dialog .dialog-grid h2{color:#13374f;letter-spacing:-.045em}

/* Inputs and tabs in any admin popup */
dialog:is(.modal,.fs-dialog,.hq-dialog,.hq-export-dialog) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea){
  max-width:100%;box-sizing:border-box;
  border-radius:13px;
  border-color:#ccdee7;
  color:#15364a;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
dialog:is(.modal,.fs-dialog,.hq-dialog,.hq-export-dialog) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea):focus{
  border-color:#12a895;
  box-shadow:0 0 0 4px rgba(16,168,142,.12);
  outline:none;
}
dialog:is(.modal,.fs-dialog,.hq-dialog,.hq-export-dialog) :is(input:disabled,select:disabled,textarea:disabled){opacity:.67;cursor:not-allowed}
dialog:is(.modal,.fs-dialog,.hq-dialog,.hq-export-dialog) :is(button,.button){border-radius:12px}
dialog:is(.modal,.fs-dialog,.hq-dialog,.hq-export-dialog) button:not(:disabled){transition:filter .17s ease,transform .17s ease,box-shadow .17s ease}
dialog:is(.modal,.fs-dialog,.hq-dialog,.hq-export-dialog) button:not(:disabled):hover{filter:saturate(1.07)}
dialog:is(.modal,.fs-dialog,.hq-dialog,.hq-export-dialog) :is(button,.button):focus-visible{
  outline:3px solid #56e0c5;outline-offset:3px;
}

/* Every panel as a modern window: applied to known content surfaces only */
:where(.panel,.stat-card,.fs-surface,.fs-stat,.hq-surface,.hq-stat,.sim-panel,.sim-card,.report-card,.quick-action,.archive-card,.patient-card,.os-pulse){
  border-radius:22px;
  border-color:#dbe8f0;
  box-shadow:0 9px 26px rgba(25,73,100,.055);
}
:where(.panel,.stat-card,.fs-surface,.hq-surface,.sim-panel,.os-pulse){
  background-image:linear-gradient(165deg,#fff 55%,#f7fbff 100%);
}
:where(.panel,.fs-surface,.hq-surface,.sim-panel,.os-pulse){
  overflow-wrap:anywhere;
}
:where(.pill,.badge,.status-badge){border-radius:999px}
:where(.button.primary,.fs-primary,.hq-primary){background-image:linear-gradient(110deg,#087f9e,#0c9b8c);color:#fff}
:where(.button.primary,.fs-primary,.hq-primary):hover{box-shadow:0 8px 22px rgba(9,125,147,.23)}

/* Colorful controls with restrained, accessible hierarchy */
:where(.panel,.fs-app,.hq-app,.sim-app,.os-workspace) :is(input,select,textarea):focus-visible{outline:3px solid #55dcb8;outline-offset:2px}
:where(.panel,.fs-app,.hq-app,.sim-app,.os-workspace) :is(button,a):focus-visible{outline:3px solid #55dcb8;outline-offset:3px}

@media(max-width:740px){
  dialog:is(.modal,.fs-dialog,.hq-dialog,.hq-export-dialog,.os-search-dialog,.product-dialog){
    max-width:calc(100vw - 12px);max-height:calc(100dvh - 12px);border-radius:23px;
  }
  .modal .modal-head,.fs-dialog .fs-dialog-header,.hq-dialog .hq-dialog-header,.hq-export-dialog header{padding:23px 20px 19px}
  .modal .modal-body,.fs-dialog .fs-dialog-content,.hq-dialog .hq-form-scroll{padding:20px 18px}
  .modal .modal-actions,.fs-dialog .fs-dialog-footer,.hq-dialog .hq-dialog-footer,.hq-export-dialog .hq-export-actions{padding:17px 18px max(17px,env(safe-area-inset-bottom))}
  .modal .modal-head h2,.fs-dialog .fs-dialog-header h2{font-size:23px}
  dialog.product-dialog{padding:46px 17px 20px}
  .hq-export-dialog .hq-export-grid{padding:14px}
}
@media(max-width:420px){
  dialog:is(.modal,.fs-dialog,.hq-dialog,.hq-export-dialog,.os-search-dialog,.product-dialog){border-radius:19px}
  .modal .modal-actions{flex-wrap:wrap}
  .modal .modal-actions .button{flex:1 1 130px}
}
@media(prefers-reduced-motion:reduce){
  dialog:is(.modal,.fs-dialog,.hq-dialog,.hq-export-dialog,.os-search-dialog,.product-dialog)[open]{animation:none}
}
@media print{
  dialog:is(.modal,.fs-dialog,.hq-dialog,.hq-export-dialog,.os-search-dialog,.product-dialog){box-shadow:none}
  dialog:is(.modal,.fs-dialog,.hq-dialog,.hq-export-dialog,.os-search-dialog,.product-dialog)::before{display:none}
}

/* Ensure the hearing proposal action bar remains reachable on short phones. */
dialog.hq-dialog[open]{
  display:flex;
  flex-direction:column;
  height:min(94dvh,920px);
  overflow:hidden;
}
.hq-dialog>.hq-dialog-header{flex:0 0 auto}
.hq-dialog>form#hq-form{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}
.hq-dialog .hq-form-scroll{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain}
.hq-dialog .hq-dialog-footer{flex:0 0 auto}
@media(max-width:740px){
  dialog.hq-dialog[open]{height:calc(100dvh - 14px)}
  .hq-dialog .hq-dialog-footer{gap:8px}
}