/* Application branding: the identity slots when a custom logo or name is set (login and password-change mark, sidebar
   monogram), and SYSTEM_OWNER's «هوية التطبيق» section in the settings sheet. With no branding configured none of the
   slot rules match, so the shipped look is unchanged. */

/* a custom logo in place of today's monograms: its own proportions (a wide logo gets a wide box), never stretched or cropped */
.login-mark.has-brand-logo{width:fit-content;min-width:50px;max-width:220px;height:60px;padding:9px 12px;background:#fff;border:1px solid rgba(0,0,0,.08);overflow:hidden}
.login-mark.has-brand-logo img{display:block;width:auto;max-width:196px;height:42px;object-fit:contain}
.ref-monogram.has-brand-logo{width:fit-content;min-width:42px;max-width:112px;padding:5px 7px;background:#fff;overflow:hidden}
.ref-monogram.has-brand-logo img{display:block;width:auto;max-width:98px;height:30px;object-fit:contain}
/* the login eyebrow is dropped when the heading already carries the configured name */
.login-card .eyebrow:has(>[data-brand-text][hidden]:only-child){display:none}
.ref-brand [data-brand-lockup] strong{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.02em;font-size:13px}

/* ── «هوية التطبيق» (SYSTEM_OWNER, settings sheet) ── */
.brand-admin{margin-top:18px;padding-top:16px;border-top:1px dashed #e3e8ef}
.brand-admin h3{margin:0 0 10px;font-size:13px;font-weight:700;color:#182033}
.brand-admin h3 small{margin-inline-start:6px;font-size:11px;font-weight:500;color:#7b8798}
.brand-row{display:grid;gap:8px;padding:12px 0;border-bottom:1px solid #edf0f4}
.brand-row:last-of-type{border-bottom:0}
.brand-label strong,.brand-copy>strong{display:block;font-size:12.5px;color:#182033}
.brand-label span,.brand-copy>span{display:block;margin-top:2px;font-size:11px;line-height:1.6;color:#7b8798}
.brand-inline{display:flex;gap:8px}
.brand-inline .input{flex:1 1 auto;min-width:0;height:44px;padding:0 12px;border:1px solid #dfe5ec;border-radius:10px;background:#fff;font:inherit;font-size:14px;color:#182033}
.brand-inline .input:focus{outline:0;border-color:#9bb8ea;box-shadow:0 0 0 3px rgba(46,108,230,.14)}
.brand-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-height:20px}
.brand-media{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:14px}
.brand-preview{display:flex;gap:8px}
.brand-preview img{display:block;width:72px;height:72px;border:1px solid #e3e8ef;border-radius:14px;background:#f7f9fc;object-fit:contain}
.brand-preview.is-logo img{width:96px;padding:8px;background:#fff}
.brand-preview.is-icon img{border-radius:16px;object-fit:cover}
.brand-preview.is-icon img.is-mask{width:56px;height:56px;margin-top:8px;border-radius:50%}
.brand-media.is-pending .brand-preview img{border-color:#c9a24a;box-shadow:0 0 0 3px rgba(201,162,74,.18)}
.brand-actions,.brand-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.brand-actions[hidden],.brand-confirm[hidden]{display:none}
.brand-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border:1px solid #dfe5ec;border-radius:10px;
  background:#fff;color:#26354b;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;touch-action:manipulation}
.brand-btn:hover{background:#f7f9fc}
.brand-btn.is-primary{border-color:#1e62d6;background:#1e62d6;color:#fff}
.brand-btn.is-primary:hover{background:#1a56bd}
.brand-btn:disabled{opacity:.6;cursor:default}
.brand-btn:focus-visible,.brand-link:focus-visible{outline:2px solid #2e6ce6;outline-offset:2px}
/* the file input is the whole button, invisible: the native picker opens from a real tap on every browser */
.brand-file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.brand-file:focus-within{outline:2px solid #2e6ce6;outline-offset:2px}
.brand-link{min-height:44px;padding:0 4px;border:0;background:none;color:#1e62d6;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.brand-link[hidden]{display:none}
.brand-msg{font-size:11.5px;line-height:1.6;color:#4a5b6b}
.brand-note{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#f7f9fc;font-size:11px;line-height:1.8;color:#6b7788}
.ref-dark .brand-admin{border-top-color:#2a3647}
.ref-dark .brand-admin h3,.ref-dark .brand-label strong,.ref-dark .brand-copy>strong{color:#eef3f9}
.ref-dark .brand-row{border-bottom-color:#2a3647}
.ref-dark .brand-inline .input,.ref-dark .brand-btn{background:#1b2533;border-color:#2a3647;color:#eef3f9}
.ref-dark .brand-btn.is-primary{background:#2e6ce6;border-color:#2e6ce6}
.ref-dark .brand-preview img{background:#fff;border-color:#2a3647}
.ref-dark .brand-note{background:#1b2533;color:#8c9cae}
.ref-dark .brand-msg{color:#c3cfdc}
@media (max-width:420px){
  .brand-media{grid-template-columns:1fr}
  .brand-actions .brand-btn,.brand-confirm .brand-btn{flex:1 1 auto}
}