html{margin:0;padding:0;}
body{width:100%;height:100%;}
a{text-decoration:none; font-weight:800; color:#000000;}
div{box-sizing:border-box;}

/* ===== THEME & SIZING VARS (edit only here) ===== */
:root{
  --BG1:#ffffff;
  --BG2:#7b001c;
  --BG3:#650c0c;
  --BG4:#3e3e3e;

  --FG1:#650c0c;
  --FG2:#ffffff;
  --FG3:#d4af37;
  --FG4:#ffffff;
  
  --ButtonBG1:#ad7b7b;
  --ButtonBG2:#673f3f;
  --ButtonBG3:#717171;
  --ButtonBG4:#10a51a;

  --Border1: 0.2vh solid var(--FG1);
  --Border1: 0.2vh solid var(--FG3);

  --Curve1:1vh;
  --Curve2:1.25vh;
  --Curve3:1.5vh;

  /* colors */
  --c-bg:#ffffff;
  --c-text:#1a1a1a;
  --c-maroon:#7b001c;
  --c-maroon-700:#5c0015;
  --c-gold:#d4af37;

  /* radii, borders, shadows */
  --radius:0.6rem;
  --border:0.5vw solid var(--c-gold);
  --shadow:0 0.6vh 2vh rgba(0,0,0,0.1);

  /* spacing */
  --pad-x:2vw;
  --pad-y:2vh;
  --gap-v:2vh;

  /* viewport spans */
  --w-full:100vw;
  --h-full:100vh;

  /* sections */
  --h-headline:7vh;
  --h-footer:7vh;
  --h-header:20vh; /* hidden by default */
  --h-body:calc(100vh - var(--h-headline) - var(--h-footer));

  /* menus */
  --w-float:10vw;
  --float-right:2vw;
  --float-bottom:2vh;

  /* controls */
  --h-control:6vh;
  --w-textfield:60vw;
  --w-dropdown:40vw;
}

/* ===== BASE CONTAINERS (no flex) ===== */
#App{x:x}

div, span{
  user-select: none;       /* Standard */
  -webkit-user-select: none; /* Safari/Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge */
}

.LoaderGroup {
  position: fixed;
  top: 50%;
  left: 50%;
  text-align:center;
  transform: translate(-50%, -50%);
}

.LoaderIcon {
  animation: loaderSpin 3s linear infinite;
}

@keyframes loaderSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.TextXS{font-size:1.25vh}
.TextS{font-size:1.5vh;}
.TextM{font-size:1.75vh;}
.TextL{font-size:2vh;}
.TextXL{font-size:2.25vh;}

.AlternateRow tr:nth-child(odd) {
  background-color: #eeeded; /* very light gray */
}
.AlternateRow tr:nth-child(even) {
  background-color: #ffffff; /* white */
}

.Container{box-sizing:border-box;}

.AppMainContainer{
  width:100vw;
  height:100vh;
  background:var(--c-bg);
  color:var(--c-text);
}

.AppHeadLine{
  display:block;
  width:100vw;height:8vh;
  padding:2vh 0.5vh 0.5vh 0.5vh;
  line-height:8vh;
  background:var(--c-maroon);
  color:#fff;
  overflow:hidden;
}

.Body{
  display:block;
  width:100vw;
  height:87vh;
  padding:0vh;
  overflow:hidden;
}

#AppContainer{
  width:99vw;
}

.ViewPane{
  display:block;
  width:100vw;
}

.Footer{
  display:block;
  width:100vw;
  height:5vh;
  line-height:1vh;
  font-size:1vh;
  padding:0.5vh;
  background:var(--c-maroon-700);
  color:#fff;text-align:center;
}

.Logo{width:5.5vh; height:5.5vh; background: var(--brand);border-radius: 8px; border:0.5vw solid #a70000; float:left; background-image:url(/icons/icon-192.png); background-size: contain;}
.HeadLineTitle{font-size:2vh; font-weight:bold; float:left; padding:0vh 2vh;}

.Component{width:100vw; height:87vh; position:relative; }

.MainLayer{width:100vw; height:87vh; position:relative; padding:0.5vw; }
.MainWindow{width:99vw; min-height:calc(87vh - 1vw); display:block; padding:0vw;border:0.5vw solid var(--c-gold);border-radius:1vw;background:#ffffff; }
.MainWindowHeader{height:4vh; width:100%; line-height:4vh; background-color:#650c0c; color:white; border-radius: 0.8vw 0.8vw 0vw 0vw; padding:0vw 0.5vw; font-weight:800; }
.MainWindowBody{padding:0.5vw; }
.MainWindowFooterControl{height:auto; position:fixed; left:0vh; right:0vh; bottom:5vh; text-align:center; padding:0.5vw 0 1.5vw 0; }

.SubLayer{width:100vw; height:87vh; position:absolute; top:0; background-color:#00000070; padding:1.5vw }
.SubWindow{width:97vw; position:absolute; border:0.5vw solid var(--c-gold); border-radius:1vw; z-index:100; background-color:#ffffff; box-shadow: 0.25vw 0.25vw 1.25vw #00000090; }
.SubWindowHeader{height:4vh; width:96vw; line-height:4vh; background-color:#9c2020; color:white; border-radius: 0.75vw 0.75vw 0vw 0vw; padding:0vw 0.5vw; font-weight:800; }
.SubWindowBody{padding:0.5vw; }
.SubWindowFooter{text-align:center; padding:0.5vh 0vh; }

.InlineHeader{text-align:center; height:3vh; width:100%; line-height:3vh; background-color:#a5372a; color:white; padding:0vw 0.5vw; font-weight:800; }

.PositiveButton{width:47%; height:4vh; border:0.5vw solid #ffffff; border-radius:6px; background:#2c5e38; color:#fff; font-weight:600; cursor:pointer; }
.NegativeButton{width:47%; height:4vh; border:0.5vw solid #ffffff; border-radius:6px; background:#892d23; color:#fff; font-weight:600; cursor:pointer; }
.NeutralButton{width:47%; height:4vh; border:0.5vw solid #ffffff; border-radius:6px; background:#505050; color:#fff; font-weight:600; cursor:pointer;}
.InputButton{width:47%; height:4vh; border:0.5vw solid #ffffff; border-radius:6px; background:#505050; color:#fff; font-weight:600; cursor:pointer; }

.PositiveButton.XS, .NegativeButton.XS, .NeutralButton.XS{width:9vw; }
.PositiveButton.M, .NegativeButton.M, .NeutralButton.M, .InputButton.M{width:31%; }
.PositiveButton.S, .NegativeButton.S, .NeutralButton.S, .InputButton.S{width:24%; }
.InputButton input[type="text"], .InputButton input[type="date"], .InputButton input[type="number"], .InputButton select{width:90%; }

/* .Rectifications{display:block;width:97vw; min-height:20vh;padding:0vw;border:0.5vw solid var(--BG3);border-radius:1vw;background:#d2aaaa;} */

.AppWindow{max-width: 400px; margin:0px auto;}

.NotificationOverlay{
  background-color:#000000bb;
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:200;

  /* display:flex; */
  justify-content:center;
  align-items:center;
}

.NotificationWindow{
  width:90vw;
  height:20vh;
  max-height:350px;
  max-width:400px;
  border:0.5vw solid var(--c-gold);border-radius:1vw;background:#ffffff;
  margin:40% auto auto auto;
}

.NotificationTitle{
  height:4vh; width:100%; line-height:4vh; background-color:#650c0c; color:white; border-radius: 0.8vw 0.8vw 0vw 0vw; padding:0vw 0.5vw; font-weight:800;
}

.NotificationBody{
  height:11vh;padding:0.5vw; text-align:center; vertical-align:center;
}

.NotificationMessage{
  margin:4vh auto 0vh;
}

.LoggedInNotification{
  display:none;
}

#LoginWindow{display:block;}
#InstallWindow{display:none;}
#InstallWindowAndroid{display:none;}
#InstallWindowIOS{display:none;}


.Header{display:none;width:var(--w-full);height:var(--h-header);padding:0 var(--pad-x);line-height:var(--h-header);background:linear-gradient(0deg,var(--c-maroon) 0%,var(--c-maroon-700) 100%);color:#fff;}
.is-visible{display:block;} /* toggle helper if you need it */



/* Menus */
.SideMenu{display:block;width:var(--w-full);min-height:10vh;margin-bottom:var(--gap-v);padding:var(--pad-y) var(--pad-x);border-bottom:var(--border);background:#fff;}
.FloatMenu{position:fixed;right:var(--float-right);bottom:var(--float-bottom);width:var(--w-float);max-width:36vw;padding:1.5vh 1.2vw;background:#fff;border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow);}

/* Windows / panes */
.Sub{display:block;width:var(--w-full);min-height:20vh;margin-bottom:var(--gap-v);padding:var(--pad-y) var(--pad-x);border:var(--border);border-radius:var(--radius);background:#fff;}
.Root{display:block;width:var(--w-full);min-height:20vh;margin-bottom:var(--gap-v);padding:var(--pad-y) var(--pad-x);border:var(--border);border-style:dashed;border-radius:var(--radius);background:#fff;}

/* ===== BUTTONS (compose with .Primary/.Secondary/.Active/.Inactive) ===== */
.Button{display:inline-block;min-height:var(--h-control);line-height:calc(var(--h-control) - 0.6vh);padding:0 2vw;border-radius:var(--radius);border:var(--border);background:#fff;color:var(--c-maroon);cursor:pointer;user-select:none;text-align:center;}
.Primary{background:var(--c-maroon);color:#fff;}         /* apply alongside .Button or .TextField etc. */
.Secondary{background:#fff;color:var(--c-maroon);}       /* neutral alt */
.Active{box-shadow:0 0 0 0.5vh rgba(212,175,55,0.25);}   /* subtle focus/active ring */
.Inactive{opacity:0.6;pointer-events:none;}              /* disabled */

/* ===== TEXT FIELDS ===== */
.TextField{display:block;width:var(--w-textfield);min-height:var(--h-control);line-height:calc(var(--h-control) - 0.6vh);padding:0 1.5vw;border-radius:var(--radius);border:var(--border);background:#fff;color:var(--c-text);}
.Text{display:block;}     /* semantic helper if you want to attach */
.Number{display:block;}
.Phone{display:block;}
.Email{display:block;}
.Password{display:block;}

/* ===== DROPDOWN ===== */
.Dropdown{display:block;width:var(--w-dropdown);min-height:var(--h-control);line-height:calc(var(--h-control) - 0.6vh);padding:0 1.5vw;border-radius:var(--radius);border:var(--border);background:#fff;color:var(--c-text);}

/* ===== CHECKBOX / RADIO (wrappers) ===== */
.Checkbox{display:inline-block;min-height:4.5vh;line-height:4.5vh;margin-right:1vw;}
.RadioButton{display:inline-block;min-height:4.5vh;line-height:4.5vh;margin-right:1vw;}