/* =====================================================================
   Sharjah Sports Council - facility licensing app
   ---------------------------------------------------------------------
   Restyled to match the council's main website (ssc.shj.ae). The palette,
   type scale and control treatment below are the site's own `.ssc` theme
   tokens, read from its stylesheet, so the two properties read as one
   product.

   Where the live site and the printed brand guide disagree, the site wins
   (chosen deliberately): the site's gold is #dfc07f rather than the
   guide's #CFA762, it adds a blue #114c99 for active states that the guide
   does not contain, and it sets Arabic in Alexandria rather than Sakkal
   Majalla.

   The app ships as a compiled Quasar bundle, so this sheet loads after the
   generated CSS and re-skins it in place. Selectors avoid the build's
   [data-v-*] scope hashes so it survives a rebuild; where a scoped rule
   has to be beaten, specificity is raised with a real ancestor class
   (an attribute selector weighs the same as a class, not an element).
   ===================================================================== */

:root{
  /* ssc.shj.ae `.ssc` theme - verbatim */
  --ssc-primary-400:#183254;   /* navy - also the guide's brand navy */
  --ssc-primary-300:#114c99;   /* blue - active / selected states */
  --ssc-primary-200:#dfc07f;   /* gold */
  --ssc-primary-100:#f2e9d4;   /* pale gold tint */

  --ssc-neutral-0:#ffffff;
  --ssc-neutral-100:#f8f8f8;
  --ssc-neutral-200:#d9d9d9;
  --ssc-neutral-300:#b4b4b4;
  --ssc-neutral-400:#757575;
  --ssc-neutral-500:#5e5e5e;
  --ssc-neutral-600:#000000;
  --ssc-neutral-700:#3f3f3f;

  --ssc-error:#db3b21;
  --ssc-success:#1aaa55;

  /* The site rounds form controls to 4px and cards to 8px. */
  --ssc-radius-field:4px;
  --ssc-radius-card:8px;
  --ssc-shell:1280px;

  /* Quasar brand slots remapped onto the site theme. The bundle shipped
     with gold as primary and an unrelated teal as secondary. */
  --q-primary:#183254;
  --q-secondary:#dfc07f;
  --q-accent:#114c99;
  --q-dark:#183254;
  --q-dark-page:#142945;
  --q-positive:#1aaa55;
  --q-negative:#db3b21;
  --q-info:#114c99;
  --q-warning:#dfc07f;
}

/* ---------------------------------------------------------------------
   Typography - Alexandria, as ssc.shj.ae sets for Arabic. The bundle
   asked for Almarai, which is never actually loaded, so the app had been
   rendering in whatever default sans the browser picked.
   --------------------------------------------------------------------- */
body,
body .q-field,body .q-btn,body .q-item,body .q-table,
body .q-dialog,body .q-menu,body .q-tooltip,
body input,body select,body textarea,
.ssc-header,.ssc-footer{
  font-family:'Alexandria','Noto Sans Arabic','Segoe UI',system-ui,-apple-system,sans-serif;
}
body{font-size:15px;line-height:1.6;color:var(--ssc-neutral-700);background:var(--ssc-neutral-0);}
body .q-table td,body .q-table th,body .number,body .time{font-variant-numeric:tabular-nums;}
::selection{background:var(--ssc-primary-100);color:var(--ssc-primary-400);}
body input[type="checkbox"],body input[type="radio"]{accent-color:var(--ssc-primary-400);}

/* ---------------------------------------------------------------------
   Page canvas. The bundle's decorative `.bg` layer is only one viewport
   tall, so on a long form everything below the fold fell through to an
   unpainted canvas and rendered as a black band; because that layer was
   also faded to .25, the bare canvas showing through it was what made the
   original backdrop look muddy grey. The site uses flat neutrals, so the
   layer is simply retired.
   --------------------------------------------------------------------- */
html,body{background:var(--ssc-neutral-100);}
body .bg{background:none !important;opacity:1 !important;}

/* The app's own logo band is redundant once the site header is injected. */
body .header .entity{display:none !important;}

/* ---------------------------------------------------------------------
   The app's action strip, kept for its language toggle and back button,
   restyled from the old gold band into a quiet sub-bar under the site nav.
   --------------------------------------------------------------------- */
body .header .nav{
  background-color:var(--ssc-neutral-0);
  border-bottom:1px solid var(--ssc-neutral-200);
  align-items:center;height:56px;
  padding-inline:max(24px,calc((100vw - var(--ssc-shell)) / 2));
}
/* The back button carries an inline color:#fff from the bundle. */
body .header .nav .q-btn,
body .header .nav .q-btn .q-icon,
body .header .nav .back-btn{color:var(--ssc-primary-400) !important;}
body .nav .lang{color:var(--ssc-primary-300);font-weight:600;}
body .nav .lang:hover{color:var(--ssc-primary-400);}

/* ---------------------------------------------------------------------
   Cards and headings
   --------------------------------------------------------------------- */
body .q-card{border-radius:var(--ssc-radius-card);}
body .my-card,body .header-card{
  border:1px solid var(--ssc-neutral-200);
  box-shadow:none;
}
body .text-h5,body .text-h6{color:var(--ssc-primary-400);font-weight:700;letter-spacing:-.01em;}
body .header-card .text-h6::after{
  content:"";display:block;width:44px;height:3px;margin:10px auto 0;
  background:var(--ssc-primary-200);border-radius:2px;
}
body .note{color:var(--ssc-neutral-500);}
body .document.document{color:var(--ssc-primary-300);}

/* ---------------------------------------------------------------------
   Form controls - the site's treatment: 4px radius, neutral border,
   near-black on focus, error in #db3b21.
   --------------------------------------------------------------------- */
body .q-field--filled .q-field__control,
body .q-field--outlined .q-field__control{
  background:var(--ssc-neutral-0);
  border:1px solid var(--ssc-neutral-200);
  border-radius:var(--ssc-radius-field);
}
body .q-field--filled .q-field__control:before,
body .q-field--filled .q-field__control:after,
body .q-field--outlined .q-field__control:before,
body .q-field--outlined .q-field__control:after{border:none !important;}
body .q-field--filled:hover .q-field__control{border-color:var(--ssc-neutral-300);}
body .q-field--filled.q-field--focused .q-field__control,
body .q-field--outlined.q-field--focused .q-field__control{
  border-color:var(--ssc-neutral-600);
  box-shadow:0 0 0 3px rgba(17,76,153,.14);
}
body .q-field--error .q-field__control{border-color:var(--ssc-error) !important;}
body .q-field__label{color:var(--ssc-neutral-500);}
body .q-field--focused .q-field__label{color:var(--ssc-primary-400);}
body .q-field__messages{color:var(--ssc-neutral-500);}
body .q-field--error .q-field__messages{color:var(--ssc-error);}

body .q-btn{border-radius:var(--ssc-radius-field);font-weight:600;letter-spacing:0;text-transform:none;}
body .q-btn.bg-secondary{color:var(--ssc-primary-400) !important;}
body .q-btn--flat.text-primary:hover{color:var(--ssc-primary-300) !important;}

/* Stepper: the site marks the active and completed steps in blue. */
body .q-stepper__tab--active .q-stepper__title,
body .q-stepper__tab--done .q-stepper__title{color:var(--ssc-primary-300);font-weight:600;}
body .q-stepper__tab--active .q-stepper__dot,
body .q-stepper__tab--done .q-stepper__dot{background:var(--ssc-primary-300) !important;}
body .q-stepper__tab--inactive .q-stepper__dot{background:var(--ssc-neutral-300) !important;}
body .q-stepper{border-radius:var(--ssc-radius-card);}

/* Keyboard focus must stay visible on every control. */
body .q-btn:focus-visible,body .q-item:focus-visible,body a:focus-visible,
body .q-tab:focus-visible,.ssc-header a:focus-visible,.ssc-footer a:focus-visible{
  outline:2px solid var(--ssc-primary-300);outline-offset:2px;border-radius:var(--ssc-radius-field);
}
.ssc-footer a:focus-visible{outline-color:var(--ssc-primary-200);}

/* ---------------------------------------------------------------------
   Admin area
   --------------------------------------------------------------------- */
body .q-header{border-bottom:3px solid var(--ssc-primary-200);}
body .menu-list .q-item.q-router-link--active,
body .menu-list .q-item--active{
  background:var(--ssc-primary-100);color:var(--ssc-primary-400);font-weight:600;
}
body .q-table thead th{
  background:var(--ssc-neutral-100);color:var(--ssc-primary-400);
  font-weight:700;border-bottom:2px solid var(--ssc-neutral-200);
}
body .q-table tbody tr:hover td{background:var(--ssc-neutral-100);}

/* ---------------------------------------------------------------------
   Sign-in
   --------------------------------------------------------------------- */
body .login{background:var(--ssc-primary-400) !important;}
body .login .q-card{
  border-radius:var(--ssc-radius-card);
  padding-top:132px;
  background-image:url("/facility/assets/ssc-logo.png");
  background-repeat:no-repeat;
  background-position:center 30px;
  background-size:auto 52px;
}

/* =====================================================================
   Injected site chrome - header and footer mirroring ssc.shj.ae.
   Markup comes from chrome.js; everything below styles it.
   ===================================================================== */
.ssc-shell{max-width:var(--ssc-shell);margin:0 auto;padding-inline:24px;}

.ssc-header{background:var(--ssc-neutral-0);border-bottom:1px solid var(--ssc-neutral-200);}
.ssc-header .ssc-shell{display:flex;align-items:center;gap:20px;min-height:84px;}
.ssc-brand{display:flex;align-items:center;gap:16px;flex:none;}
.ssc-brand img{display:block;width:auto;}
/* The official emblem lockup is a wide horizontal mark (480x168). */
.ssc-brand .ssc-logo-main{height:46px;}
.ssc-brand .ssc-logo-gov{height:34px;}
.ssc-brand .ssc-rule{width:1px;height:38px;background:var(--ssc-neutral-200);}

.ssc-nav{display:flex;align-items:center;gap:2px;margin-inline-start:auto;}
.ssc-nav>li{position:relative;list-style:none;}
.ssc-nav a,.ssc-nav .ssc-navtop{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 12px;border-radius:var(--ssc-radius-field);
  font-size:14px;font-weight:500;color:var(--ssc-neutral-700);
  background:none;border:none;cursor:pointer;text-decoration:none;
  transition:color .18s ease,background-color .18s ease;
}
.ssc-nav a:hover,.ssc-nav .ssc-navtop:hover{color:var(--ssc-primary-300);background:var(--ssc-neutral-100);}
.ssc-nav .ssc-navtop svg{width:12px;height:12px;transition:transform .18s ease;}
.ssc-nav li:hover .ssc-navtop svg,.ssc-nav li:focus-within .ssc-navtop svg{transform:rotate(180deg);}
.ssc-sub{
  position:absolute;top:100%;inset-inline-start:0;z-index:60;min-width:220px;
  background:var(--ssc-neutral-0);border:1px solid var(--ssc-neutral-200);
  border-top:3px solid var(--ssc-primary-200);border-radius:0 0 var(--ssc-radius-card) var(--ssc-radius-card);
  box-shadow:0 18px 40px -18px rgba(24,50,84,.35);
  padding:6px;margin:0;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.ssc-nav li:hover>.ssc-sub,.ssc-nav li:focus-within>.ssc-sub{opacity:1;visibility:visible;transform:translateY(0);}
.ssc-sub a{display:block;padding:9px 12px;font-weight:400;}

.ssc-header-actions{display:flex;align-items:center;gap:8px;flex:none;}
.ssc-lang{
  padding:9px 16px;border:1px solid var(--ssc-neutral-200);border-radius:var(--ssc-radius-field);
  font-size:14px;font-weight:600;color:var(--ssc-primary-400);text-decoration:none;
  transition:border-color .18s ease,background-color .18s ease;
}
.ssc-lang:hover{border-color:var(--ssc-primary-400);background:var(--ssc-neutral-100);}

.ssc-burger{
  display:none;width:44px;height:44px;align-items:center;justify-content:center;
  border:1px solid var(--ssc-neutral-200);border-radius:var(--ssc-radius-field);
  background:none;color:var(--ssc-primary-400);cursor:pointer;
}

/* ---- Footer ---- */
.ssc-footer{background:var(--ssc-primary-400);color:var(--ssc-neutral-0);margin-top:56px;}
.ssc-footer a{color:rgba(255,255,255,.82);text-decoration:none;transition:color .18s ease;}
.ssc-footer a:hover{color:var(--ssc-primary-200);}
.ssc-footer .ssc-shell{padding-block:48px 28px;}
.ssc-fgrid{
  display:grid;gap:36px 32px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.ssc-fcol h3{
  margin:0 0 16px;font-size:15px;font-weight:700;color:var(--ssc-neutral-0);
  padding-bottom:10px;border-bottom:1px solid rgba(223,192,127,.45);
}
.ssc-fcol ul{margin:0;padding:0;list-style:none;display:grid;gap:10px;font-size:14px;}
/* WCAG 2.2 SC 2.5.8 wants 24px minimum even with a fine pointer; these
   links were 17px and only passed via the spacing exception. */
.ssc-fcol ul a,.ssc-fbottom nav a{display:inline-flex;align-items:center;min-height:24px;}
.ssc-social{display:flex;flex-wrap:wrap;gap:10px;}
.ssc-social a{
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  /* .28 gave the ring only 2.4:1 on navy - under WCAG 1.4.11's 3:1 for
     non-text UI boundaries. */
  border:1px solid rgba(255,255,255,.45);border-radius:50%;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.ssc-social a:hover{background:var(--ssc-primary-200);border-color:var(--ssc-primary-200);color:var(--ssc-primary-400);}
.ssc-social svg{width:17px;height:17px;fill:currentColor;}
.ssc-hours{font-size:14px;color:rgba(255,255,255,.82);line-height:1.9;}
.ssc-hours strong{display:block;color:var(--ssc-neutral-0);font-weight:600;}
.ssc-news form{display:flex;gap:8px;margin-top:12px;}
.ssc-news input{
  flex:1;min-width:0;padding:11px 12px;font-size:14px;
  border:1px solid rgba(255,255,255,.3);border-radius:var(--ssc-radius-field);
  background:rgba(255,255,255,.08);color:var(--ssc-neutral-0);
}
.ssc-news input::placeholder{color:rgba(255,255,255,.6);}
.ssc-news input:focus{outline:none;border-color:var(--ssc-primary-200);background:rgba(255,255,255,.14);}
.ssc-news button{
  flex:none;padding:11px 18px;font-size:14px;font-weight:700;cursor:pointer;
  border:none;border-radius:var(--ssc-radius-field);
  background:var(--ssc-primary-200);color:var(--ssc-primary-400);
}
.ssc-news button:hover{background:#e9d3a0;}
.ssc-fbottom{
  border-top:1px solid rgba(255,255,255,.16);margin-top:36px;padding-top:20px;
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;
  font-size:13px;color:rgba(255,255,255,.7);
}
.ssc-fbottom nav{display:flex;flex-wrap:wrap;gap:10px 20px;margin-inline-start:auto;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

@media (max-width:1024px){
  .ssc-header .ssc-shell{min-height:70px;gap:12px;}
  .ssc-burger{display:inline-flex;margin-inline-start:auto;}
  .ssc-nav{
    position:absolute;inset-inline:0;top:100%;z-index:70;
    flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px;
    background:var(--ssc-neutral-0);border-bottom:1px solid var(--ssc-neutral-200);
    box-shadow:0 18px 30px -18px rgba(24,50,84,.35);
    display:none;
    /* The expanded menu is ~645px tall - taller than a 568px phone viewport,
       so it has to scroll or the last items are unreachable. */
    max-height:calc(100dvh - 70px);overflow-y:auto;overscroll-behavior:contain;
  }
  .ssc-header{position:relative;}
  .ssc-header.is-open .ssc-nav{display:flex;}
  .ssc-nav a,.ssc-nav .ssc-navtop{width:100%;justify-content:flex-start;min-height:44px;}
  .ssc-sub{
    position:static;opacity:1;visibility:visible;transform:none;
    border:none;border-top:none;box-shadow:none;min-width:0;
    padding:0 0 4px;margin-inline-start:12px;
  }
  .ssc-sub a{padding-block:8px;}
  .ssc-brand .ssc-logo-main{height:38px;}
  .ssc-brand .ssc-logo-gov{height:28px;}
}

@media (max-width:600px){
  .ssc-shell{padding-inline:16px;}
  .ssc-brand .ssc-rule,.ssc-brand .ssc-logo-gov{display:none;}
  .ssc-footer .ssc-shell{padding-block:36px 22px;}
  .ssc-fbottom nav{margin-inline-start:0;}
  body .header .nav{padding-inline:16px;}
}

/* =====================================================================
   Touch and small-screen behaviour
   Findings from measuring the running app at 320/375/414px: 19 controls
   sat under the 44px minimum (footer links were 17px tall, social icons
   38px, the form's own nav buttons 36px) and six inputs were at 14px,
   which makes iOS Safari zoom the page the moment a field is focused.
   ===================================================================== */

/* Removes the legacy 300ms tap delay without disabling pinch-zoom. */
a,button,input,select,textarea,label,[role="button"],.q-btn,.q-item,.ssc-nav a,.ssc-social a{
  touch-action:manipulation;
}

/* Keyed on pointer type as well as width: a phone in landscape is ~740px
   wide, so a width-only breakpoint would drop touch sizing exactly where
   it is still needed. */
@media (max-width:1024px), (pointer:coarse){
  /* --- Injected chrome --- */
  .ssc-brand{min-height:44px;}
  .ssc-lang{min-height:44px;display:inline-flex;align-items:center;}
  .ssc-social a{width:44px;height:44px;}
  .ssc-fcol ul{gap:4px;}
  .ssc-fcol ul a,
  .ssc-fbottom nav a{min-height:44px;display:inline-flex;align-items:center;}

  /* --- The app's own controls --- */
  body .q-btn:not(.q-btn--round):not(.q-btn--dense),
  body .q-stepper__nav .q-btn{min-height:44px;padding-inline:20px;}
  body .header .nav .q-btn{min-height:44px;}
}

/* iOS Safari zooms the viewport when a focused control is under 16px.
   Every field the applicant types into has to clear that bar - and that
   applies on a landscape phone too, which is why this is not width-only. */
@media (max-width:600px), (pointer:coarse){
  body input,body select,body textarea,
  body .q-field__native,body .q-field__input,
  .ssc-news input{font-size:16px;}
}
@media (max-width:600px){
  .ssc-news form{flex-wrap:wrap;}
  .ssc-news button{width:100%;min-height:44px;}
}

/* A pull-to-refresh mid-form discards everything typed so far. */
body{overscroll-behavior-y:contain;}

/* Notch and home-indicator clearance, portrait and landscape. */
@supports (padding:max(0px)){
  .ssc-shell{
    padding-inline:max(16px,env(safe-area-inset-left),env(safe-area-inset-right));
  }
  .ssc-footer .ssc-shell{padding-bottom:max(22px,env(safe-area-inset-bottom));}
}
@media (min-width:601px){
  .ssc-shell{padding-inline:max(24px,env(safe-area-inset-left),env(safe-area-inset-right));}
}

/* Short landscape viewports: trim the vertical chrome so the form is
   still usable when the on-screen keyboard is up. */
@media (max-height:520px) and (orientation:landscape){
  .ssc-header .ssc-shell{min-height:56px;}
  .ssc-brand .ssc-logo-main{height:30px;}
  .ssc-footer{margin-top:32px;}
  .ssc-footer .ssc-shell{padding-block:28px 18px;}
  .ssc-nav{max-height:calc(100dvh - 56px);}
}