/* ==========================================================================
   Arqam design system - Islamic ornament (lightweight inline SVG masks + CSS)
   - khatam (8-pointed star) tile as a faint, theme-coloured page texture
   - ornamental frame (double rule + corner stars) for login card and page title bars
   - mihrab (pointed arch) header, thin geometric divider, card corner motifs
   All shapes are original geometry, coloured from theme tokens via mask-image.
   ========================================================================== */
:root {
  --orn-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12.00%2C0.50 14.83%2C5.16 20.13%2C3.87 18.84%2C9.17 23.50%2C12.00 18.84%2C14.83 20.13%2C20.13 14.83%2C18.84 12.00%2C23.50 9.17%2C18.84 3.87%2C20.13 5.16%2C14.83 0.50%2C12.00 5.16%2C9.17 3.87%2C3.87 9.17%2C5.16' fill='black'/%3E%3C/svg%3E");
  --orn-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='1.2'%3E%3Cpolygon points='54.00%2C32.00 32.00%2C54.00 10.00%2C32.00 32.00%2C10.00'/%3E%3Cpolygon points='47.56%2C47.56 16.44%2C47.56 16.44%2C16.44 47.56%2C16.44'/%3E%3Ccircle cx='32' cy='32' r='5.5'/%3E%3Cpath d='M0 -7 L7 0 L0 7 L-7 0Z' transform='translate(0 0)'/%3E%3Cpath d='M0 -7 L7 0 L0 7 L-7 0Z' transform='translate(64 0)'/%3E%3Cpath d='M0 -7 L7 0 L0 7 L-7 0Z' transform='translate(0 64)'/%3E%3Cpath d='M0 -7 L7 0 L0 7 L-7 0Z' transform='translate(64 64)'/%3E%3C/g%3E%3C/svg%3E");
}

/* page texture: very low opacity, never above content */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--c-pattern); opacity: var(--c-pattern-opacity);
  -webkit-mask-image: var(--orn-tile); mask-image: var(--orn-tile);
  -webkit-mask-size: 64px 64px; mask-size: 64px 64px;
}

/* bullet / small star */
.orn-star { display: inline-block; width: 14px; height: 14px; background: var(--c-accent);
  -webkit-mask: var(--orn-star) center / contain no-repeat; mask: var(--orn-star) center / contain no-repeat; vertical-align: middle; }

/* ornamental frame: inner gold hairline + stars in the four corners.  Add .orn-frame to a position:relative box */
.orn-frame { position: relative; }
.orn-frame::before {
  content: ""; position: absolute; inset: 5px; border: 1px solid var(--c-accent); border-radius: calc(var(--radius) - 3px);
  opacity: .55; pointer-events: none;
}
.orn-frame::after {
  content: ""; position: absolute; inset: 1px; pointer-events: none; background: var(--c-accent);
  -webkit-mask-image: var(--orn-star), var(--orn-star), var(--orn-star), var(--orn-star);
          mask-image: var(--orn-star), var(--orn-star), var(--orn-star), var(--orn-star);
  -webkit-mask-position: 0 0, 100% 0, 0 100%, 100% 100%; mask-position: 0 0, 100% 0, 0 100%, 100% 100%;
  -webkit-mask-size: 12px 12px; mask-size: 12px 12px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* geometric divider: hairline - star - hairline */
.geo-divider {
  height: 14px; margin: var(--sp-3) 0 var(--sp-4); background: var(--c-accent); opacity: .85;
  -webkit-mask-image: var(--orn-star), linear-gradient(#000, #000), linear-gradient(#000, #000);
          mask-image: var(--orn-star), linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-size: 14px 14px, calc(50% - 14px) 1px, calc(50% - 14px) 1px; mask-size: 14px 14px, calc(50% - 14px) 1px, calc(50% - 14px) 1px;
  -webkit-mask-position: center, 0 center, 100% center; mask-position: center, 0 center, 100% center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* decorative corner motif for dashboard cards (top-left, away from RTL text start) */
.orn-corner { position: relative; overflow: hidden; }
.orn-corner::after {
  content: ""; position: absolute; left: -22px; top: -22px; width: 84px; height: 84px; background: var(--c-accent); opacity: .24; pointer-events: none;
  -webkit-mask-image: var(--orn-tile), radial-gradient(circle at 50% 50%, #000 38%, transparent 70%);
          mask-image: var(--orn-tile), radial-gradient(circle at 50% 50%, #000 38%, transparent 70%);
  -webkit-mask-size: 42px 42px, 100% 100%; mask-size: 42px 42px, 100% 100%;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* mihrab: pointed-arch header used on the login card */
.mihrab { position: relative; width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 300 / 190; display: grid; place-items: center; }
.mihrab > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mihrab .arch-fill { fill: var(--c-arch); }
.mihrab .arch-line { fill: none; stroke: var(--c-accent-bright); stroke-width: 2; }
.mihrab .arch-line-2 { fill: none; stroke: var(--c-accent); stroke-width: 1; opacity: .7; }
.mihrab .arch-tex { fill: var(--c-accent-bright); opacity: .10; }
.mihrab-logo { position: relative; z-index: 1; margin-top: 26px; }

/* the arch follows the logo it frames: the blue badge sits in a sky-blue arch whatever the theme */
.mihrab[data-logo="blue"] .arch-fill { fill: var(--brand-sky); }