/* One shared look for form controls across the whole app (October 2026): text boxes, dropdowns, date and time pickers,
   file choosers, colour and range inputs. It only changes appearance, never behaviour or stored values.
   Compact controls that carry their own design (rich-text toolbar, timelines, status buttons) are left alone. */
:root{--ui-radius:12px;--ui-height:40px;--ui-pad:0 12px;--ui-border:1px solid var(--line);--ui-focus:0 0 0 3px rgba(25,180,140,.14);--ui-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b8394' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--ui-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b8394' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
html body :is(#modalRoot,#app) :is(input:is([type=text],[type=number],[type=search],[type=email],[type=url],[type=tel],[type=password],[type=date],[type=time],[type=datetime-local],[type=month]),input:not([type]),select):not(.rich-editor *):not([data-ui-skip]):not(.compact-status-control){box-sizing:border-box;min-height:var(--ui-height);padding:var(--ui-pad);border:var(--ui-border);border-radius:var(--ui-radius);background-color:var(--panel2);color:var(--text);font:inherit;font-size:13px;line-height:1.3;transition:border-color .15s,box-shadow .15s}
html body :is(#modalRoot,#app) textarea:not(.rich-editor *):not([data-ui-skip]){box-sizing:border-box;padding:10px 12px;border:var(--ui-border);border-radius:var(--ui-radius);background-color:var(--panel2);color:var(--text);font:inherit;font-size:13px}
html body :is(#modalRoot,#app) :is(input,select,textarea):not(.rich-editor *):not([data-ui-skip]):focus{outline:none;border-color:rgba(25,180,140,.5);box-shadow:var(--ui-focus)}
html body :is(#modalRoot,#app) :is(input,select,textarea):disabled:not([data-ui-skip]){opacity:.6;cursor:not-allowed}
/* dropdowns */
html body :is(#modalRoot,#app) select:not(.rich-editor *):not([data-ui-skip]):not([multiple]){-webkit-appearance:none;appearance:none;padding-right:34px;background-image:var(--ui-chevron);background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px;cursor:pointer}
/* dates and times: the calendar icon is drawn by us, the browser's own picker still opens from it */
html body :is(#modalRoot,#app) input:is([type=date],[type=datetime-local],[type=month],[type=time]):not([data-ui-skip]){position:relative;padding-right:38px;background-image:var(--ui-calendar);background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px}
html body :is(#modalRoot,#app) input:is([type=date],[type=datetime-local],[type=month],[type=time])::-webkit-calendar-picker-indicator{position:absolute;right:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer}
/* file choosers */
html body :is(#modalRoot,#app) input[type=file]:not([data-ui-skip]){box-sizing:border-box;width:100%;min-height:var(--ui-height);padding:4px;border:1px dashed rgba(37,77,101,.28);border-radius:var(--ui-radius);background:var(--panel2);color:var(--muted);font-size:12px;cursor:pointer}
html body :is(#modalRoot,#app) input[type=file]::file-selector-button{margin-right:10px;padding:7px 14px;border:var(--ui-border);border-radius:9px;background:var(--panel);color:var(--text);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}
html body :is(#modalRoot,#app) input[type=file]::file-selector-button:hover{background:var(--panel2)}
/* colour and range */
html body :is(#modalRoot,#app) input[type=color]:not([data-ui-skip]){width:100%;height:var(--ui-height);padding:4px;border:var(--ui-border);border-radius:var(--ui-radius);background:var(--panel2);cursor:pointer}
html body :is(#modalRoot,#app) input[type=color]::-webkit-color-swatch-wrapper{padding:0}html body :is(#modalRoot,#app) input[type=color]::-webkit-color-swatch{border:0;border-radius:8px}
html body :is(#modalRoot,#app) input[type=range]:not([data-ui-skip]){accent-color:#19b48c;width:100%;cursor:pointer}
html body :is(#modalRoot,#app) input:is([type=checkbox],[type=radio]):not([data-ui-skip]){accent-color:#19b48c}
/* custom pickers (Building Type, Client / Reference ...) use the same size, radius and arrow as the dropdowns above */
html body :is(#modalRoot,#app) :is(.building-type-picker,.managed-choice-picker) > summary{box-sizing:border-box;display:flex;align-items:center;min-height:var(--ui-height);padding:0 34px 0 12px;border:var(--ui-border);border-radius:var(--ui-radius);background-color:var(--panel2);background-image:var(--ui-chevron);background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px;color:var(--text);font-size:13px;line-height:1.3;cursor:pointer}
html body :is(#modalRoot,#app) :is(.building-type-picker,.managed-choice-picker) > summary::after,html body :is(#modalRoot,#app) :is(.building-type-picker,.managed-choice-picker) > summary::before{display:none}
/* buttons: same text size, weight and height in every window; small buttons are the one smaller size */
html body :is(#modalRoot,#app) :is(.ghost-btn,.primary-btn,.success-btn,.danger-btn,.danger-text-btn):not(.small-btn):not(.tiny-btn):not(.icon-btn):not(.task-check):not([data-ui-skip]){min-height:38px;padding:0 16px;font-size:13px;font-weight:600;line-height:1.2;border-radius:var(--ui-radius)}
html body :is(#modalRoot,#app) :is(.ghost-btn,.primary-btn,.success-btn,.danger-btn,.danger-text-btn):is(.small-btn,.tiny-btn):not([data-ui-skip]){min-height:32px;padding:0 12px;font-size:12px;font-weight:600;border-radius:10px}
/* image chooser inside the notes toolbar: just a small button, no dashed box or "No file chosen" text */
html body :is(#modalRoot,#app) .rich-editor input[type=file]{width:104px;min-height:30px;padding:0;border:0;background:transparent;color:transparent;overflow:hidden;font-size:0}
html body :is(#modalRoot,#app) .rich-editor input[type=file]::file-selector-button{margin:0;padding:6px 10px;font-size:11px}