/* Shared form template: inset labels and leading icon panels. */
:is(.maale-form.form-grid,.maale-form .maale-form-grid){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.maale-form .maale-form-field{position:relative;display:block;min-width:0;gap:0}
.maale-form .maale-form-field>.maale-form-label{position:absolute;inset-inline-start:54px;top:6px;z-index:1;max-width:calc(100% - 66px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7c8795;font-size:11px;font-weight:400;pointer-events:none}
.maale-form .maale-form-field>.maale-form-icon{position:absolute;inset-inline-start:1px;top:1px;bottom:1px;width:42px;display:flex;align-items:center;justify-content:center;border-start-start-radius:8px;border-end-start-radius:8px;background:#f0f2f5;color:#7f8b99;pointer-events:none}
.maale-form .maale-form-icon svg{width:18px;height:18px;stroke-width:1.6}
.maale-form .maale-form-field>:is(input,select,textarea){display:block;box-sizing:border-box;width:100%;min-height:48px;margin:0;padding:21px 12px 4px;padding-inline-start:54px;border:1px solid #d9dfe6;border-radius:9px;background:#fff;font:400 14px Tajawal,Arial,sans-serif;color:#344256;line-height:1.5;transition:border-color .15s,box-shadow .15s}
.maale-form .maale-form-field>textarea{min-height:84px;resize:vertical}
.maale-form .maale-form-field>:is(input,select,textarea):focus{outline:0;border-color:#a88b65;box-shadow:0 0 0 3px #a88b6514}
.maale-form .maale-form-field:focus-within>.maale-form-icon{color:#94744b;background:#f2efea}
.maale-form .span-12{grid-column:1/-1}
.attendance-schedule-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 36px;gap:10px;align-items:center;margin-bottom:12px}
.attendance-schedule-row[data-schedule-row="period"]{grid-template-columns:repeat(2,minmax(0,1fr)) 36px}
.attendance-schedule-row .icon-button{width:36px;height:36px;align-self:center;background:#f1f3f5;color:#7f8b99;border:1px solid #e1e5e9}
.attendance-schedule-row .icon-button:hover{background:#e5e9ed;color:#526176}
.attendance-schedule-group{border:1px solid #e1e5e9;border-radius:8px;padding:12px;min-width:0}
.attendance-schedule-group legend{padding:0 6px;color:#7c8795;font-size:12px}
.attendance-schedule-hint{margin:0;color:#7c8795;font-size:12px;line-height:1.8}
.attendance-schedule-preview{margin:16px 0 20px}
.module-dialog:has(.maale-form){width:min(900px,calc(100vw - 28px))}
.maale-form [hidden]{display:none!important}
@media(max-width:540px){.attendance-schedule-row,.attendance-schedule-row[data-schedule-row="period"]{grid-template-columns:minmax(0,1fr)}.attendance-schedule-row .icon-button{justify-self:end}}
@media(max-width:800px){:is(.maale-form.form-grid,.maale-form .maale-form-grid){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){:is(.maale-form.form-grid,.maale-form .maale-form-grid){grid-template-columns:minmax(0,1fr)}}

.maale-form select.maale-filter-native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;opacity:0;clip-path:inset(50%);pointer-events:none}.maale-form .maale-form-field>.maale-filter-trigger{height:48px;min-height:48px;padding:21px 10px 4px;padding-inline-start:54px;border-radius:9px;font-size:14px;color:#657184}.maale-form .maale-form-field>.maale-filter-trigger .maale-filter-caption{color:inherit}.maale-form .maale-form-field>.maale-filter-trigger:focus-visible{outline:2px solid #a88b65;outline-offset:2px}

/* Data form fields only. Date controls and list filters keep their own contracts. */
:root { --ui-form-label-height:18px; --ui-form-label-gap:6px; --ui-form-icon-width:42px; --ui-form-icon-bg:#f0f2f5; --ui-form-icon-text:#7f8b99; --ui-form-value-weight:400; }
html[data-ui-theme] body[data-ui-scope="application"] .maale-form .maale-form-field:not(.maale-list-filters *,.ui-list__filters *,[data-list-filters] *):not(:has(input[type="datetime-local"])) { display:grid; grid-template-rows:var(--ui-form-label-height) auto; row-gap:var(--ui-form-label-gap); position:relative; min-width:0; }
html[data-ui-theme] body[data-ui-scope="application"] .maale-form .maale-form-field:not(.maale-list-filters *,.ui-list__filters *,[data-list-filters] *):not(:has(input[type="datetime-local"])) > .maale-form-label { position:static; grid-row:1; inset:auto; max-width:100%; height:var(--ui-form-label-height); line-height:var(--ui-form-label-height); font-size:11px; font-weight:400; color:var(--ui-muted); }
html[data-ui-theme] body[data-ui-scope="application"] .maale-form .maale-form-field:not(.maale-list-filters *,.ui-list__filters *,[data-list-filters] *):not(:has(input[type="datetime-local"])) > .maale-form-icon { top:calc(var(--ui-form-label-height) + var(--ui-form-label-gap) + 1px); bottom:auto; inset-inline-start:1px; width:var(--ui-form-icon-width); height:calc(var(--ui-field-height) - 2px); box-sizing:border-box; border-start-start-radius:calc(var(--ui-radius) - 1px); border-end-start-radius:calc(var(--ui-radius) - 1px); background:var(--ui-form-icon-bg); color:var(--ui-form-icon-text); z-index:2; overflow:hidden; }
html[data-ui-theme] body[data-ui-scope="application"] .maale-form .maale-form-field:not(.maale-list-filters *,.ui-list__filters *,[data-list-filters] *):not(:has(input[type="datetime-local"])):focus-within > .maale-form-icon { background:var(--ui-filter-applied-bg); color:var(--ui-form-icon-text); }
html[data-ui-theme] body[data-ui-scope="application"] .maale-form .maale-form-field:not(.maale-list-filters *,.ui-list__filters *,[data-list-filters] *):not(:has(input[type="datetime-local"])) > :is(input:not([type="hidden"]),select:not(.maale-filter-native),textarea,.maale-filter-trigger) { grid-row:2; width:100%; height:var(--ui-field-height); min-height:var(--ui-field-height); margin:0; box-sizing:border-box; padding:10px var(--ui-field-padding)!important; border-radius:var(--ui-radius); font-weight:var(--ui-form-value-weight)!important; line-height:20px; }
html[data-ui-theme] body[data-ui-scope="application"] .maale-form .maale-form-field:not(.maale-list-filters *,.ui-list__filters *,[data-list-filters] *):not(:has(input[type="datetime-local"])):has(> .maale-form-icon) > :is(input:not([type="hidden"]),select:not(.maale-filter-native),textarea,.maale-filter-trigger) { padding-inline-start:calc(var(--ui-form-icon-width) + var(--ui-field-padding))!important; }
html[data-ui-theme] body[data-ui-scope="application"] .maale-form .maale-form-field:not(.maale-list-filters *,.ui-list__filters *,[data-list-filters] *):not(:has(input[type="datetime-local"])) > textarea { height:auto; min-height:84px; }
html[data-ui-theme] body[data-ui-scope="application"] .maale-form .maale-form-field:not(.maale-list-filters *,.ui-list__filters *,[data-list-filters] *):not(:has(input[type="datetime-local"])) > .maale-filter-trigger .maale-filter-caption { font-weight:var(--ui-form-value-weight); }
.maale-form-selection-cards { display:flex; flex-wrap:wrap; gap:8px; grid-row:3; min-width:0; }
.maale-form-selection-cards:empty { display:none; }
.maale-form-selection-card { display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:6px 10px; border:1px solid var(--ui-border); border-radius:var(--ui-radius); background:var(--ui-surface-subtle); color:var(--ui-text); font-weight:400; }
.maale-form-selection-card > span { overflow-wrap:anywhere; min-width:0; }
.maale-form-selection-card > button { display:inline-flex; align-items:center; justify-content:center; flex:0 0 22px; width:22px; height:22px; padding:0; border:0; border-radius:4px; background:transparent; color:var(--ui-muted); cursor:pointer; }
.maale-form-selection-card > button:hover:not(:disabled) { color:var(--ui-danger); }
.maale-form-selection-card > button > svg { width:14px; height:14px; }

html[data-ui-theme] body[data-ui-scope="application"] .maale-form .maale-form-field:not(.maale-list-filters *,.ui-list__filters *,[data-list-filters] *):not(:has(input[type="datetime-local"])):dir(rtl):has(> .maale-form-icon) > :is(input:not([type="hidden"]),select:not(.maale-filter-native),textarea,.maale-filter-trigger) { padding-right:calc(var(--ui-form-icon-width) + var(--ui-field-padding))!important; padding-left:var(--ui-field-padding)!important; }
html[data-ui-theme] body[data-ui-scope="application"] .maale-form .maale-form-field:not(.maale-list-filters *,.ui-list__filters *,[data-list-filters] *):not(:has(input[type="datetime-local"])):dir(ltr):has(> .maale-form-icon) > :is(input:not([type="hidden"]),select:not(.maale-filter-native),textarea,.maale-filter-trigger) { padding-left:calc(var(--ui-form-icon-width) + var(--ui-field-padding))!important; padding-right:var(--ui-field-padding)!important; }

.maale-form fieldset.maale-form-grid { min-width:0; margin:0; padding:0; border:0; }
.maale-form > .form-actions { display:flex; justify-content:flex-end; gap:calc(var(--ui-gap) / 2); margin-block-start:var(--ui-gap); }

/* Required field markers follow the real enabled input requirement. */
 :root { --ui-required-marker-color:color-mix(in srgb,var(--ui-danger) 80%,white); }
:is(.ui-field,label):has(:is(input,select,textarea)[required]:not(:disabled)):not(:has(label)) > :is(.maale-form-label,span:first-child:not(.maale-form-icon,.ui-visually-hidden,.sr-only))::before { content:"*"; display:inline-block; color:var(--ui-required-marker-color); font-size:14px; font-weight:700; line-height:1; margin-inline-end:5px; vertical-align:middle; }
.maale-form .ui-field__error { color:var(--ui-danger); font-size:11px; grid-column:1/-1; }

/* A compact permanent error slot prevents layout movement on validation. */
:root { --ui-field-error-height:14px; }
[data-ui-validation] > [data-ui-field-error] { display:block!important; height:var(--ui-field-error-height); min-height:var(--ui-field-error-height); margin:0; padding:0; line-height:var(--ui-field-error-height); font-size:11px; font-weight:400!important; color:var(--ui-danger); grid-column:1/-1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; visibility:hidden; }
[data-ui-validation] > [data-ui-field-error].is-visible { visibility:visible; }
[data-ui-validation] > [data-ui-field-error] { margin-block-start:-3px; }

/* Shared clear affordance: overlay only, with no extra Tab stop. */
.ui-clear-host { position:relative; }
html[data-ui-theme] body .ui-clear-host > button.ui-field-clear { position:absolute!important; z-index:4; display:grid!important; place-items:center; width:24px!important; min-width:24px!important; height:24px!important; min-height:24px!important; padding:3px!important; margin:0!important; border:0!important; border-radius:5px; background:transparent!important; color:var(--ui-muted)!important; box-shadow:none!important; transform:none!important; opacity:0; pointer-events:none; cursor:pointer; }
html[data-ui-theme] body .ui-clear-host > button.ui-field-clear[hidden] { display:none!important; }
html[data-ui-theme] body .ui-clear-host:is(:hover,:focus-within) > button.ui-field-clear:not([hidden]) { opacity:1; pointer-events:auto; }
html[data-ui-theme] body .ui-clear-host > button.ui-field-clear:hover { color:var(--ui-danger)!important; }
.ui-field-clear svg { width:16px; height:16px; }
.ui-clear-host input[type=search]::-webkit-search-cancel-button { display:none; }

/* Numeric presentation never changes the underlying submitted value. */
.ui-numeric-host{position:relative}
.ui-numeric-display{position:absolute;z-index:2;box-sizing:border-box;display:flex;align-items:center;white-space:nowrap;overflow:hidden;pointer-events:none;background:transparent;direction:ltr}
.ui-numeric-display[hidden]{display:none!important}
html[data-ui-theme] body input.ui-numeric-masked{color:transparent!important;-webkit-text-fill-color:transparent!important}
html[data-ui-theme] body input.ui-numeric-masked:focus{color:inherit!important;-webkit-text-fill-color:currentColor!important}


/* Shared inline creation affordance for editable choice lists. */
html[data-ui-theme] body[data-ui-scope="application"] .maale-form-field>button.ui-picker-inline-add[data-picker-inline-add]{position:absolute!important;inset-inline-end:4px;bottom:4px;z-index:5;width:32px!important;min-width:32px!important;height:32px!important;min-height:32px!important;padding:5px!important;margin:0!important;border:0!important;border-radius:var(--ui-radius);background:var(--ui-filter-applied-bg,#f2e8db)!important;color:var(--ui-primary,#94744b)!important;box-shadow:none!important;transform:none!important}
html[data-ui-theme] body[data-ui-scope="application"] .maale-form-field>button.ui-picker-inline-add[data-picker-inline-add][hidden]{display:none!important}
html[data-ui-theme] body[data-ui-scope="application"] .maale-form-field>button.ui-picker-inline-add[data-picker-inline-add] svg{width:20px;height:20px;stroke-width:2}
html[data-ui-theme] body[data-ui-scope="application"] .maale-form-field>button.ui-picker-inline-add[data-picker-inline-add]:hover{filter:brightness(.97)}

.ui-flexible-field{position:relative;min-width:0}
[data-material-picker]{position:relative;min-width:0}[data-material-picker] [data-material-error]:empty{display:none}
.ui-variable-cards{display:flex;flex-wrap:nowrap;gap:4px;min-width:0}.ui-variable-card{position:relative;display:inline-flex;align-items:center;gap:3px;padding:2px 4px;min-width:0;flex:0 1 auto;font-size:11px;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-secondary-bg);color:var(--ui-text)}
html[data-ui-theme] body[data-ui-scope="application"] .ui-variable-card>button{border:0;background:transparent;color:var(--ui-primary);padding:2px;font:inherit;cursor:pointer;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-variable-help{flex:none}.ui-variable-help-icon{display:grid;place-items:center;width:15px;height:15px;border:1px solid var(--ui-border);border-radius:50%;color:var(--ui-muted);cursor:help;list-style:none;font-size:12px}.ui-variable-help>span{display:none;position:absolute;inset-inline-start:0;top:100%;width:220px;max-width:calc(100vw - 70px);padding:10px;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-surface);color:var(--ui-text);box-shadow:var(--ui-shadow);z-index:30;line-height:1.7;font-size:12px}.ui-variable-help>.ui-variable-help-icon{display:grid;position:static;width:15px;height:15px;max-width:none;padding:0;border-radius:50%;box-shadow:none;font-size:10px;line-height:1}.ui-variable-help-icon:hover+span{display:block;pointer-events:none}
.ui-flexible-results{max-width:calc(100vw - 16px);max-height:230px;overflow:auto}
.ui-flexible-results[hidden]{display:none!important}
.ui-flexible-row{display:flex;align-items:center;gap:4px}
.ui-flexible-row>.ui-flexible-option{flex:1;min-width:0;text-align:start;padding:7px 10px;border:0;border-radius:var(--ui-radius);color:var(--ui-muted);background:transparent;font:inherit;font-size:12px;cursor:pointer;overflow-wrap:anywhere}
.ui-flexible-row>.ui-flexible-option:is(:hover,:focus-visible,[aria-selected=true]){background:var(--ui-filter-applied-bg);color:var(--ui-filter-applied-text)}
.ui-flexible-remove{display:grid;place-items:center;width:24px;height:24px;flex:none;padding:4px;border:0;border-radius:var(--ui-radius);background:var(--ui-surface-subtle,#f1f3f5);color:var(--ui-muted);cursor:pointer}
.ui-flexible-remove svg{width:16px;height:16px}.ui-flexible-remove:hover{color:var(--ui-danger)}
.ui-flexible-remove:disabled{opacity:.35;cursor:not-allowed;color:var(--ui-muted)}

/* Multiple choices share the flexible option; only their checkbox differs. */
.ui-flexible-option:has(>input[type=checkbox]){display:flex;align-items:center;gap:8px}
.ui-flexible-option>input[type=checkbox]{pointer-events:none;flex:none;width:16px;height:16px;margin:0;accent-color:var(--ui-primary)}

.ui-flexible-detail{margin-inline-start:auto;flex:none;color:var(--ui-muted);font-size:inherit;direction:ltr}

/* Stable choice-row metrics: single and multiple options use the same card. */
html[data-ui-theme] body .ui-flexible-row>.ui-flexible-option{display:flex;align-items:center;gap:8px;box-sizing:border-box;height:32px;min-height:32px;padding:7px 10px;margin:0;line-height:18px}
html[data-ui-theme] body .ui-flexible-option>input[type=checkbox]{box-sizing:border-box;width:16px;height:16px;min-width:16px;min-height:0;max-height:16px;padding:0;margin:0;flex:0 0 16px}
html[data-ui-theme] body .ui-flexible-option>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Shared option contract for native-select adapters and existing people pickers. */
html[data-ui-theme] body[data-ui-scope="application"] :is(.ui-flexible-row>.ui-flexible-option,.maale-filter-options>.maale-filter-option,.task-picker-menu [role=option]){box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;height:32px;min-height:32px;max-height:32px;padding:7px 10px;margin:0;border:0;border-radius:var(--ui-radius);font:400 12px/18px var(--ui-font-family,Tajawal,Arial,sans-serif);text-align:start;color:var(--ui-muted);background:transparent;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}
html[data-ui-theme] body[data-ui-scope="application"] :is(.ui-flexible-row>.ui-flexible-option,.maale-filter-options>.maale-filter-option,.task-picker-menu [role=option]):is(:hover,:focus-visible,[aria-selected=true]){background:var(--ui-filter-applied-bg);color:var(--ui-filter-applied-text);border-color:transparent}

html[data-ui-theme] body .task-picker-menu [role=option]>input[type=checkbox]{box-sizing:border-box;width:16px;height:16px;min-height:0;max-height:16px;padding:0;margin:0;flex:0 0 16px;pointer-events:none;accent-color:var(--ui-primary)}

/* A compact opt-in checkbox accompanying a shared form field. */
.ui-field-with-check{min-width:0}.ui-field-check{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ui-muted);margin-top:4px}
html[data-ui-theme] body[data-ui-scope="application"] .maale-form .ui-field-check>input[type=checkbox]{width:16px!important;height:16px!important;min-height:0!important;padding:0!important;margin:0;flex:0 0 16px;accent-color:var(--ui-primary)}

/* Compact image cards, shared by branding asset settings. */
.ui-image-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ui-gap,14px);min-width:0}
.ui-image-card{min-width:0;padding:14px;border:1px solid var(--ui-border);border-radius:var(--ui-card-radius,var(--ui-radius));background:var(--ui-surface)}
.ui-image-card h3{margin:0 0 10px;color:var(--ui-heading);font-size:13px;font-weight:500;line-height:1.6}
.ui-image-card .image-uploader{min-height:112px;height:112px;padding:10px;border-color:var(--ui-border);background:var(--ui-secondary-bg);box-sizing:border-box;box-shadow:none}
.ui-image-card .image-uploader__preview{width:100%;height:80px;max-height:80px;object-fit:contain;background:transparent;border-radius:0}
.ui-image-card .image-uploader__placeholder{gap:6px;font-size:11px;color:var(--ui-muted)}
.ui-image-card__upload{display:grid;place-items:center;color:var(--ui-primary)}.ui-image-card__upload svg{width:24px;height:24px}
.ui-image-card .image-uploader__delete{inset-block-start:6px;inset-inline-start:6px}
.image-uploader:not(.has-image)>.image-uploader__delete[data-ui-action=delete]{display:none!important}

.maale-form-selection-cards[data-ui-size="compact"] .maale-form-selection-card { padding:2px 8px; line-height:20px; }

.maale-form .maale-form-grid[data-columns="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Compact density keeps shared control sizes and validation space intact. */
.maale-form--compact{--ui-gap:10px;--ui-form-label-gap:4px}
.maale-form.maale-form--compact .maale-form-grid{gap:8px 12px}

/* Preserve Latin clock presentation during native segment editing. */
html[data-ui-theme] body input:is([type=time],[type=datetime-local]).ui-numeric-masked:focus { color:transparent!important; -webkit-text-fill-color:transparent!important; }
html[data-ui-theme] body input:is([type=time],[type=datetime-local]).ui-numeric-masked::-webkit-datetime-edit { color:transparent!important; -webkit-text-fill-color:transparent!important; }
html[data-ui-theme] body .ui-numeric-display:is([data-numeric-kind=time],[data-numeric-kind=datetime]) { font-family:Arial,sans-serif!important; font-variant-numeric:lining-nums tabular-nums; }