/*
  master.css: shared styles for the whole application.
  Theme variables, layout, login/register, sidebar, topbar, popups, forms,
  tables and every component used by more than one module live here.
  Page-specific styles live in styles/<module>/<page>.css and are loaded
  through {% block extraCSS %} in each template.
*/

@import url('https://fonts.googleapis.com/css2?family=Bungee+Tint&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* ---------- Design tokens (same in light and dark mode) ---------- */

:root {
  /* Fixed colors */
  --clr-white: #FFFFFF;
  --clr-black: #000000;
  --clr-primary: #4F46E5;
  --clr-danger: #FF5151;
  --clr-highlight: yellow;
  --clr-overlay: rgba(6, 11, 25, 0.2);
  --clr-overlay-strong: rgba(6, 11, 25, 0.7);
  --clr-border-muted: rgba(183, 183, 183, 0.5);
  --clr-black-a10: rgba(0, 0, 0, 0.1);
  --clr-black-a20: rgba(0, 0, 0, 0.2);
  --clr-black-a30: rgba(0, 0, 0, 0.3);
  --clr-black-a40: rgba(0, 0, 0, 0.4);
  --clr-black-a80: rgba(0, 0, 0, 0.8);
  /* Photo viewers stay dark in both themes */
  --clr-viewer-bg: rgba(8, 8, 11, 0.94);
  --clr-white-a10: rgba(255, 255, 255, 0.1);
  --clr-white-a20: rgba(255, 255, 255, 0.2);
  --clr-white-a70: rgba(255, 255, 255, 0.7);
  --clr-focus-ring: rgba(0, 123, 255, 0.5);
  --clr-primary-a05: rgba(79, 70, 229, 0.05);
  --clr-primary-a10: rgba(79, 70, 229, 0.1);
  --clr-success: #16a34a; /* readable on light and dark backgrounds */
  --clr-success-text: #047857;
  --clr-success-bg: #ecfdf5;
  --clr-success-border: #a7f3d0;
  --clr-warning: #f59e0b;
  --clr-warning-text: #92400e;
  --clr-warning-bg: #fef3c7;
  /* Printed paper is always white, whatever the theme */
  --clr-paper: #ffffff;
  --clr-paper-muted: #9ca3af;
  /* WhatsApp preview (brand colours) */
  --clr-whatsapp-header: #075e54;
  --clr-whatsapp-bg: #ece5dd;
  --clr-whatsapp-bubble: #dcf8c6;
  --clr-whatsapp-text: #111b21;
  /* Messenger platform badges (brand colours) */
  --clr-brand-telegram: #229ed9;
  --clr-brand-whatsapp: #1fa855;
  --clr-brand-facebook: #0866ff;
  --clr-brand-instagram: #d62976;

  /* Accent gradient (primary buttons, highlights) and chart colours: the same in light and dark mode */
  --clr-accent-1: #6366F1;
  --clr-accent-2: #A855F7;
  --clr-accent-3: #EC4899;
  --clr-accent-4: #F97316;
  --clr-accent-soft: rgba(168, 85, 247, 0.1);
  --clr-danger-soft: rgba(255, 81, 81, 0.12);
  --clr-danger-glow: rgba(255, 81, 81, 0.35);
  --clr-accent-glow: rgba(168, 85, 247, 0.35);
  --gradient-accent: linear-gradient(110deg, var(--clr-accent-1) 0%, var(--clr-accent-2) 38%, var(--clr-accent-3) 72%, var(--clr-accent-4) 100%);
  --clr-chart-letter: #8B5CF6;
  --clr-chart-email: #06B6D4;
  --clr-chart-whatsapp: #EC4899;
  --clr-chart-telegram: #3B82F6;
  /* Fonts */
  --font-main: "Poppins", serif;
  --font-alt: "DM Sans", serif;
  --font-print: 'Arial', sans-serif;
  /* Font sizes */
  --fs-xs: 0.65rem;
  --fs-sm: 0.75rem;
  --fs-base: 0.85rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  /* Motion */
  --chrome-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Theme colors (light mode, overridden by body.dark) and base reset ---------- */

:root {
  --clr-background: #FFFFFF;
  --clr-button: #4F46E5;
  --clr-filled-bt-text: #FFFAF7;
  --clr--title: #242731;
  --clr-main-text: #45464E;
  --clr-fade-text: #dadae1;
  --clr-constant-menutext: #64748B;
  --clr-placeholder: #777E90;
  --clr-tile-background: #FFFFFF;
  --clr-line: #E6E8EC;
  --clr-linktext: #4F46E5;
  --clr-hover-btn: #009990;
  --clr-menubar: #FFFFFF;
  --clr-white-txt: #FFFFFF;
  --clr-menu-text: #64748B;
  --clr-mode-toggle: #939393;
  --clr-box-border: #E0E0E0;
  --clr-shadow: rgba(0, 0, 0, .4);
  --clr-tile: #e5e5ed;
  --clr-level-btn: #BC8CFF;
  --clr-hover-background: #e2dff8;
  --clr-hover-shadow: #4F46E5;
  --clr-calender-background: #ebebf4;
  --clr-contrast-text: #f6f4f4;
  --clr-calendar-notactive: #c1bfbf;
  --box-shadow-variable-3: rgba(79, 70, 229, 0.6);
  --clr-calender-event: rgb(255, 214, 10);
  --clr-yellow-contrast: #242731;
  --urgency-low-bg: #E0E7FF;
  --urgency-low-text: #4F46E5;
  --urgency-low-border: #6366F1;
  --urgency-moderate-bg: #C7D2FE;
  --urgency-moderate-text: #1E40AF;
  --urgency-moderate-border: #4F46E5;
  --urgency-serious-bg: #FEF3C7;
  --urgency-serious-text: #92400E;
  --urgency-serious-border: #FACC15;
  --urgency-critical-bg: #FECACA;
  --urgency-critical-text: #991B1B;
  --urgency-critical-border: #EF4444;
  /* Sidebar + topbar (app chrome) */
  --clr-chrome-border: #E6E8EC;
  --clr-chrome-hover: #e2dff8;
  --shadow-active: rgba(79, 70, 229, 0.3);
  --clr-btn-secondary-text: #4F46E5;
  --clr-btn-secondary-bg: #e2dff8;
  --clr-btn-secondary-border: transparent;
  --clr-btn-secondary-hover: #4F46E5;
  --tran-01: all 0.2s ease-in-out;
  --tran-02: all 0.3s ease-in-out;
  --tran-03: all 0.4s ease-in-out;
  --tran-04: all 0.5s ease-in-out;
  --tran-05: all 0.6s ease-in-out;
}

* {
  margin: 0;
  padding: 0;
  font-family: var(--font-main);
  box-sizing: border-box;
}

/* ---------- Login and Registration Box ---------- */

.signin {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.login-box {
  position: absolute;
  display: flex;
  width: 25rem;
  height: 60vh;
  max-height: 25rem;
  background: transparent;
  border: 2px solid var(--clr-border-muted);
  border-radius: 2rem;
  justify-content: flex-start;
  align-items: center;
  transition: var(--tran-02);
  overflow-y: auto;
}

.registration-box {
  position: relative;
  flex-direction: column;
  width: 25rem;
  height: 95vh;
  max-height: 45rem;
  background: transparent;
  border: 2px solid var(--clr-border-muted);
  border-radius: 2rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  transition: var(--tran-02);
  overflow-y: auto;
  scrollbar-width: none;
}

.login-box:hover,
.registration-box:hover {
  box-shadow: 0 15px 20px var(--clr-overlay);
}

.login-box h2,
.registration-box h2 {
  margin-top: 1rem;
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--clr--title);
  text-align: center;
  text-shadow: 2px 2px 5px var(--clr-black-a30);
}

.input-box {
  height: 3rem;
  display: flex;
  align-items: flex-start;
  position: relative;
  width: 100%;
  padding: 0 3rem;
  margin-top: 1.5rem;
}

.input-box-upload {
  position: relative;
  width: 20rem;
  margin: 1.5rem 3rem 1rem 3rem;
  transform: translateY(-20%);
}

.input-box input {
  width: 100%;
  height: 2rem;
  border: none;
  background: transparent;
  outline: none;
  font-size: var(--fs-base);
  color: var(--clr-constant-menutext);
  border-bottom: 0.5px solid var(--clr-constant-menutext);
}

.input-box-upload input {
  display: none;
}

.input-box input:focus~label,
.input-box input:not(:placeholder-shown)~label,
.input-box input:-webkit-autofill~label {
  top: -2.15rem !important;
}

.input-box input:-webkit-autofill {
  font-size: var(--fs-base);
}

.input-box label {
  position: absolute;
  top: -10%;
  transform: translateY(50%);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--clr-constant-menutext);
  transition: var(--tran-03);
  z-index: 1;
  pointer-events: none;
}

.input-box-upload label {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--clr-constant-menutext);
  margin-top: 0.5rem;
  font-family: var(--font-main);
}

.input-box .material-icons {
  position: absolute;
  right: 3rem;
  font-size: var(--fs-xl);
  line-height: 2rem;
  color: var(--clr-constant-menutext);
}

.input-box .material-symbols-outlined {
  position: absolute;
  right: 50px;
  font-size: var(--fs-xl);
  color: var(--clr-constant-menutext);
}

.input-box-upload .material-icons {
  position: absolute;
  right: 5px;
  font-size: var(--fs-xl);
  line-height: 2rem;
  color: var(--clr-menu-text);
  transform: translateY(-120%);
}

.remember-forgot {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 3rem;
  font-size: var(--fs-base);
  color: var(--clr-constant-menutext);
  margin-bottom: 1rem;
}

.remember-forgot label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.remember-forgot input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
}

.login-box .remember-forgot a {
  text-decoration: none;
  color: var(--clr-linktext);
}

.login-box .remember-forgot a:hover {
  text-decoration: underline;
}

.login-box button,
.registration-box button {
  justify-items: center;
  width: 75%;
  padding: 0.5rem 0;
  margin: 0.5rem 3rem;
  border: none;
  border-radius: 0.5rem;
  font-size: var(--fs-md);
  font-weight: 600;
  background: var(--gradient-accent);
  background-size: 170% 100%;
  color: var(--clr-filled-bt-text);
  cursor: pointer;
  transition: var(--tran-02);
}

.login-box button:hover,
.registration-box button:hover {
  background-position: 100% 50%;
  box-shadow: 0px 4px 8px var(--clr-overlay);
}

.login-box .register-link,
.registration-box .login-link {
  font-size: var(--fs-base);
  color: var(--clr-menubar);
  text-align: center;
  margin: 1rem 0rem;
  justify-content: space-around;
  display: flex;
}

.login-box .register-link a,
.registration-box .login-link a {
  text-decoration: none;
  color: var(--clr-linktext);
  font-weight: 600;
  justify-content: space-between;
}

.login-box .register-link a:hover,
.registration-box .login-link a:hover {
  text-decoration: underline;
}

.login-box .register-link p,
.registration-box .login-link {
  color: var(--clr-main-text);
}

.contact-us {
  display: flex;
  justify-content: center;
}

.contact-us a {
  cursor: pointer;
  color: var(--clr-linktext);
  font-weight: 500;
  text-decoration: none;
}

.contact-us a:hover {
  text-decoration: underline;
}

/* ---------- Registration Message ---------- */

.signin .login-box {
  display: block;
}

.signin .login-box .header h2 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  font-family: var(--font-alt);
  text-align: center;
  text-shadow: 2px 2px 5px var(--clr-black-a30);
  margin: 1rem 0;
}

.signin .login-box .success_image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.signin .login-box .success_image .material-symbols-outlined {
  font-size: 10rem;
  margin-top: 1rem;
  color: var(--clr-hover-btn);
  font-weight: 700;
}

.signin .login-box .success_message h3 {
  display: flex;
  justify-content: center;
  font-size: var(--fs-base);
  font-weight: 600;
  padding: 0 1.5rem;
  color: var(--clr-main-text);
  align-items: center;
  margin-top: 1.25rem;
}

.signin .login-box .success_message p {
  display: flex;
  justify-content: center;
  color: var(--clr-main-text);
  align-items: center;
  margin: 0.75rem 1rem;
  font-size: var(--fs-sm);
  font-weight: 400;
}

.signin .login-box .login-link a {
  text-decoration: none;
  color: var(--clr-linktext);
  font-weight: 600;
  font-family: var(--font-alt);
}

.signin .login-box .login-link a:hover {
  text-decoration: underline;
}

.signin .login-box .login-link {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  color: var(--clr-main-text);
}

/* ---------- Login Contact US ---------- */

.contact_us_login-page {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28rem;
  height: 75vh;
  max-height: 33rem;
  border: 2px solid var(--clr-border-muted);
  border-radius: 2rem;
  display: flex;
  flex-direction: column;
  transition: var(--tran-02);
  margin: 1rem 0;
  padding: 1rem 2rem;
}

.contact_us_login-page:hover {
  box-shadow: 0 15px 20px var(--clr-overlay);
}

.contact_us_login-page h1 {
  margin-top: 0rem;
  font-size: var(--fs-2xl);
  font-weight: 700;
  text-shadow: 2px 2px 5px var(--clr-black-a30);
  color: var(--clr--title);
  align-items: center;
  text-align: center;
}

.contact_us_login-page .big_letter {
  margin-bottom: 2rem;
  color: var(--clr-constant-menutext);
  text-align: center;
}

.contact_us_login-page form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact_us_login-page form .input-group {
  display: flex;
  gap: 1rem;
}

.contact_us_login-page form .input-group .input-box-contactus {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.input-box-contactus input {
  display: flex;
  align-items: flex-start;
  position: relative;
  border-radius: 5px;
  border: 1px solid var(--clr-box-border);
  color: var(--clr-constant-menutext);
  width: 100%;
  padding: 0.5rem 0.5rem;
  margin: 0.25rem 0;
}

.contact_us_login-page form .input-group .input-box-contactus label {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--clr-constant-menutext);
  transition: var(--tran-03);
  pointer-events: none;
}

.textarea_label_login {
  font-weight: 600;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--clr-constant-menutext);
}

.contact_us_login-page textarea {
  width: 100%;
  padding: 0.5rem;
  border: 2px solid var(--clr-box-border);
  border-radius: 5px;
  font-size: var(--fs-base);
  height: 5rem;
  resize: none;
  overflow-y: auto;
  color: var(--clr-menu-text);
  margin-top: 0.5rem;
}

.input-box-contactus textarea::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.contact_us_login-page button {
  justify-items: center;
  width: 100%;
  padding: 0.5rem 0;
  border: none;
  border-radius: 0.5rem;
  font-size: var(--fs-md);
  font-weight: 600;
  background: var(--gradient-accent);
  background-size: 170% 100%;
  color: var(--clr-filled-bt-text);
  cursor: pointer;
  transition: var(--tran-02);
}

.contact_us_login-page input:focus {
  border-color: var(--clr-button);
  box-shadow: 0 0 5px var(--clr-focus-ring);
  transition: var(--tran-03);
}

.contact_us_login-page textarea:focus {
  border-color: var(--clr-button);
  box-shadow: 0 0 5px var(--clr-focus-ring);
  transition: var(--tran-03);
}

/* ---------- For small width screen ---------- */

@media (max-width: 500px) {
  .signin {
    width: 100vw;
  }

  .login-box,
  .registration-box {
    width: 100%;
  }

  .login-box button,
  .registration-box button {
    justify-items: center;
    width: 80%;
  }

  .signin {
    display: flex;
    justify-content: center;
    height: 100vh;
  }

  .login-box,
  .registration-box {
    height: 100%;
    max-height: none;
    margin-top: 2rem;
    border: none;
    border-radius: 0;
  }

  .input-box {
    max-width: 30rem;
  }

  .contact_us_login-page {
    position: absolute;
    width: 100%;
    height: 100%;
    max-height: none;
    border: none;
  }
}

/* ---------- Dark mode theme colors ---------- */

/* Near-true black in layers: page (darkest) < sidebar < cards/tiles < hover */
body.dark {
  --clr-background: #0a0a0b;
  --clr-button: #4F46E5;
  --clr-filled-bt-text: #FFFAF7;
  --clr--title: #FFFFFF;
  --clr-main-text: #ECECED;
  --clr-fade-text: #66666b;
  --clr-constant-menutext: #64748B;
  --clr-placeholder: #888E9C;
  --clr-tile-background: #121218;
  --clr-line: rgb(160, 160, 160);
  --clr-linktext: #8B5CF6;
  --clr-hover-btn: #34D399;
  --clr-menubar: #0e0e11;
  --clr-white-txt: #FFFFFF;
  --clr-menu-text: #FFFFFF;
  --clr-mode-toggle: #B0B0C8;
  --clr-box-border: #FFFFFF;
  --clr-shadow: rgba(255, 255, 255, 0.4);
  --clr-tile: #17171d;
  --clr-level-btn: #BC8CFF;
  --clr-hover-background: #1c1c23;
  --clr-hover-shadow: #B0B91A;
  --clr-calender-background: #1a1a20;
  --clr-contrast-text: #242222;
  --clr-calendar-notactive: #8f8b8b;
  --box-shadow-variable-3: rgba(255, 214, 10, 0.3);
  --clr-calender-event: rgb(255, 214, 10);
  --clr-yellow-contrast: rgb(255, 214, 10);
  --urgency-low-bg: #2A2B3D;
  --urgency-low-text: #A5B4FC;
  --urgency-low-border: #6366F1;
  --urgency-moderate-bg: #3B3D5C;
  --urgency-moderate-text: #BFDBFE;
  --urgency-moderate-border: #4F46E5;
  --urgency-serious-bg: #4A4220;
  --urgency-serious-text: #FDE68A;
  --urgency-serious-border: #FACC15;
  --urgency-critical-bg: #5C1E1E;
  --urgency-critical-text: #FECACA;
  --urgency-critical-border: #EF4444;
  --clr-chrome-border: rgba(255, 255, 255, 0.09);
  --clr-chrome-hover: rgba(255, 255, 255, 0.06);
  --shadow-active: rgba(79, 70, 229, 0.45);
  --clr-btn-secondary-text: #C4B5FD;
  --clr-btn-secondary-bg: rgba(168, 85, 247, 0.14);
  --clr-btn-secondary-border: rgba(168, 85, 247, 0.32);
  --clr-btn-secondary-hover: #A855F7;
}

html,
body {
  background-color: var(--clr-background);
  transition: var(--tran-03);
  overflow: hidden;
}

/* ---------- Sidebar ---------- */

/*
  Expanded: 12.5rem. Collapsed (.tg.close inside the toggle): 4rem, icons only.
  The open/closed state is saved per user via HTMX (/close-sidebar/<flag>/),
  so the collapsed styles key off the toggle button's .close class.
*/

.menubar {
  --sidebar-tooltip-bg: var(--clr--title);
  --sidebar-tooltip-text: var(--clr-background);

  position: fixed;
  top: 0;
  left: 0;
  z-index: 110; /* above the topbar, below the popup overlay (500) */
  display: flex;
  flex-direction: column;
  width: 12.5rem;
  height: 100vh;
  background: var(--clr-menubar);
  border-right: 1px solid var(--clr-chrome-border);
  box-shadow: 4px 0 24px var(--clr-black-a10);
  transition: width 0.3s var(--chrome-ease), background-color 0.3s ease, box-shadow 0.3s ease;
}

.menubar:has(.tg.close) {
  width: 4rem;
  box-shadow: 2px 0 12px var(--clr-black-a10);
}

.menubar nav {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Header: logo, brand name and the open/close button */

.menubar header {
  position: relative;
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--clr-chrome-border);
}

.image_menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  height: 4rem;
  padding: 0 0.75rem;
  overflow: hidden;
}

.menubar .image_menu .image_logo {
  display: flex;
  flex-shrink: 0;
}

.menubar .image_menu .image_logo a {
  display: flex;
  text-decoration: none;
}

.menubar .image_menu .image_logo img {
  width: 2.5rem;
  height: 2.5rem;
  transition: transform 0.3s var(--chrome-ease);
}

body.dark .menubar .image_menu .image_logo img {
  filter: brightness(0) invert(1);
}

.menubar .image_menu .image_logo a:hover img {
  transform: rotate(-12deg) scale(1.05);
}

.image_menu a {
  color: var(--clr--title);
  font-size: var(--fs-md);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.image_menu .company_name {
  display: inline-block;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  transition: opacity 0.2s ease 0.12s;
}

.menubar:has(.tg.close) .image_menu .company_name {
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.toggle .tg {
  position: absolute;
  top: 50%;
  right: -0.875rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  color: var(--clr-menu-text);
  background: var(--clr-menubar);
  border: 1px solid var(--clr-chrome-border);
  border-radius: 50%;
  box-shadow: 0 2px 6px var(--clr-black-a10);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.toggle .tg .material-symbols-outlined {
  font-size: 1.25rem;
  transition: transform 0.3s var(--chrome-ease);
}

.toggle .tg:hover,
.toggle .tg:focus-visible {
  color: var(--clr-white);
  background: var(--gradient-accent);
  border-color: transparent;
  box-shadow: 0 4px 12px var(--clr-accent-glow);
  outline: none;
}

.toggle .tg.close .tg_icon_desktop {
  transform: rotate(180deg);
}

.toggle .tg .tg_icon_mobile {
  display: none;
}

/* Navigation links */

.menu_service {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  padding: 0.75rem 0.625rem;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.menu_link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.menu_service li {
  display: flex;
  list-style: none;
}

.menu_service li a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  height: 2.75rem;
  padding: 0 0.625rem;
  color: var(--clr-menu-text);
  font-size: var(--fs-base);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0.625rem;
  transition: color 0.2s ease, background-color 0.2s ease, padding 0.3s var(--chrome-ease);
}

.menu_service li .material-symbols-outlined {
  flex-shrink: 0;
  width: 1.5rem;
  font-size: 1.375rem;
  text-align: center;
}

/* Opening: the labels fade in once the sidebar has mostly widened, so they never look squeezed */
.menu-text {
  overflow: hidden;
  font-size: var(--fs-base);
  white-space: nowrap;
  transition: opacity 0.2s ease 0.12s;
}

.menu_service li a:hover,
.menu_service li a:focus-visible {
  color: var(--clr--title);
  background: var(--clr-chrome-hover);
  outline: none;
}

.menu_service li a.highlight,
.menu_service li a.highlight:hover {
  color: var(--clr-white);
  background: var(--gradient-accent);
  background-size: 170% 100%;
  box-shadow: 0 4px 14px var(--clr-accent-glow);
}

.menu_service li a.highlight:hover {
  background-position: 100% 50%;
}

.menubar:has(.tg.close) .menu_service li a {
  padding: 0 0.625rem;
}

/* Unread count on a sidebar item (Messenger); sits on the icon's corner when collapsed */
.nav_badge {
  min-width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  padding: 0 0.375rem;
  color: var(--clr-white);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.25rem;
  text-align: center;
  background: var(--clr-danger);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.menu_service li a.highlight .nav_badge {
  color: var(--clr-accent-2);
  background: var(--clr-white);
}

.menubar:has(.tg.close) .nav_badge {
  position: absolute;
  top: 0.25rem;
  left: 1.5rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  font-size: 0.6rem;
  line-height: 1rem;
}

/* Closing: the labels disappear at once, before the sidebar narrows */

.menubar:has(.tg.close) .menu-text {
  opacity: 0;
  pointer-events: none;
  transition: none;
}

/* Collapsed sidebar on laptop/desktop: show the full name to the right of the icon on hover.
   position: fixed lets the tooltip escape the scrolling menu; with top left at auto it stays
   vertically centred on its own link. */
@media (hover: hover) and (min-width: 501px) {
  .menubar:has(.tg.close) .menu_service li a .menu-text {
    position: fixed;
    left: 4.75rem;
    z-index: 20;
    overflow: visible;
    padding: 0.375rem 0.75rem;
    color: var(--sidebar-tooltip-text);
    font-size: var(--fs-sm);
    font-weight: 500;
    background: var(--sidebar-tooltip-bg);
    border-radius: 0.5rem;
    box-shadow: 0 6px 16px var(--clr-black-a20);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-0.375rem);
    transition: none; /* hidden at once: no burst of tooltips while the sidebar closes */
  }

  .menubar:has(.tg.close) .menu_service li a .menu-text::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -0.3rem;
    border-width: 0.3rem 0.3rem 0.3rem 0;
    border-style: solid;
    border-color: transparent var(--sidebar-tooltip-bg) transparent transparent;
    transform: translateY(-50%);
  }

  /* Shown only after resting on an icon for a moment, so passing the pointer over the menu stays calm */
  .menubar:has(.tg.close) .menu_service li a:hover .menu-text,
  .menubar:has(.tg.close) .menu_service li a:focus-visible .menu-text {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.15s ease 0.25s, transform 0.15s ease 0.25s, visibility 0s linear 0.25s;
  }

  .menubar:has(.tg.close) .menu_service li a:focus-visible .menu-text {
    transition-delay: 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menubar,
  .menu-text,
  .image_menu .company_name,
  .menubar:has(.tg.close) .menu_service li a:hover .menu-text,
  .menubar:has(.tg.close) .menu_service li a:focus-visible .menu-text {
    transition: none;
  }
}

/* Light / dark mode switch */

.mode {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.75rem 0.625rem 0.25rem;
  border-top: 1px solid var(--clr-chrome-border);
}

.moon_sun {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.menubar .menu_service .mode .material-symbols-outlined {
  width: 1.5rem;
  color: var(--clr-menu-text);
  font-size: 1.375rem;
  transition: opacity 0.2s ease;
}

.mode .moon {
  position: absolute;
  left: 0;
  opacity: 0;
}

body.dark .mode .sun {
  opacity: 0;
}

body.dark .mode .moon {
  opacity: 1;
}

.mode .mode_text {
  color: var(--clr-menu-text);
  font-size: var(--fs-base);
  font-weight: 500;
  white-space: nowrap;
}

.menubar:has(.tg.close) .mode {
  justify-content: center;
  padding-inline: 0;
}

.menubar:has(.tg.close) .moon_sun {
  display: none;
}

.mode_switch {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  cursor: pointer;
}

.mode_switch .switch {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  background: var(--clr-mode-toggle);
  border-radius: 1rem;
  transition: background-color 0.3s ease;
}

body.dark .mode_switch .switch {
  background: var(--gradient-accent);
  background-size: 170% 100%;
}

.switch::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.2rem;
  width: 0.875rem;
  height: 0.875rem;
  background: var(--clr-white);
  border-radius: 50%;
  box-shadow: 0 1px 3px var(--clr-black-a20);
  transform: translateY(-50%);
  transition: left 0.3s var(--chrome-ease);
}

body.dark .switch::before {
  left: 1.175rem;
}

/* Phones: the sidebar slides over the page instead of pushing it, and when closed it hides
   completely, leaving a standard menu button at the top left of the topbar */

@media (max-width: 500px) {
  .menubar {
    height: 100%;
    box-shadow: 8px 0 32px var(--clr-black-a20);
  }

  .toggle .tg .tg_icon_desktop {
    display: none;
  }

  .toggle .tg .tg_icon_mobile {
    display: block;
  }

  .menubar:has(.tg.close) {
    width: 0;
    border-right: none;
    box-shadow: none;
  }

  .menubar:has(.tg.close) .menu_service,
  .menubar:has(.tg.close) .image_logo {
    display: none;
  }

  .menubar:has(.tg.close) .toggle .tg {
    top: 0.875rem;
    right: -2.75rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    transform: none;
  }
}

/* ---------- Dash (page area next to the sidebar) ---------- */

.dash {
  --dash-pad: 1rem;

  position: relative;
  left: 12.5rem;
  width: calc(100vw - 12.5rem);
  min-height: 100%;
  height: auto;
  padding: 0 var(--dash-pad);
  background: var(--clr-background);
  /* same duration and curve as the sidebar, so both move together */
  transition: left 0.3s var(--chrome-ease), width 0.3s var(--chrome-ease), background-color 0.3s ease;
}

.menubar:has(.tg.close) ~ .dash {
  left: 4rem;
  width: calc(100vw - 4rem);
}

@media (max-width: 800px) {
  .dash {
    --dash-pad: 0.5rem;
  }
}

@media (max-width: 500px) {
  .dash,
  .menubar:has(.tg.close) ~ .dash {
    left: 0;
    width: 100vw;
  }
}

/* ---------- Topbar ---------- */

/*
  Same height (4rem), divider, hover colour and motion as the sidebar header, so the two
  read as one continuous frame. The bottom border runs edge to edge of the page area.
*/

/* above page content (max z-index 40), below the popup overlay (500) */
.topbar {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 4rem;
  margin: 0 calc(var(--dash-pad) * -1);
  padding: 0 1.25rem 0 1.5rem;
  background: var(--clr-background);
  border-bottom: 1px solid var(--clr-chrome-border);
  white-space: nowrap;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Search */

.search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 22rem;
}

.search-label {
  position: relative;
  display: flex;
  align-items: center;
}

.search .search_icon {
  position: absolute;
  left: 0.625rem;
  color: var(--clr-menu-text);
  font-size: 1.25rem;
  pointer-events: none;
}

.search .search_input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.875rem 0 2.5rem;
  color: var(--clr--title);
  font-size: var(--fs-base);
  background: var(--clr-tile-background);
  border: 1px solid var(--clr-chrome-border);
  border-radius: 0.625rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search .search_input::placeholder {
  color: var(--clr-placeholder);
}

.search .search_input:focus {
  border-color: var(--clr-button);
  box-shadow: 0 0 0 3px var(--shadow-active);
}

/* Right-hand actions: notifications + profile */

.topbar_actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.no-select {
  user-select: none;
  -webkit-user-select: none;
}

.topbar_icon_btn,
.profile_trigger {
  display: flex;
  align-items: center;
  color: var(--clr-menu-text);
  background: transparent;
  border: none;
  border-radius: 0.625rem;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.topbar_icon_btn:hover,
.topbar_icon_btn:focus-visible,
.profile_trigger:hover,
.profile_trigger:focus-visible,
.topbar_dropdown.open > .topbar_icon_btn,
.topbar_dropdown.open > .profile_trigger {
  color: var(--clr--title);
  background: var(--clr-chrome-hover);
  outline: none;
}

.topbar_icon_btn {
  position: relative;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
}

.topbar_icon_btn .material-symbols-outlined.nt {
  font-size: 1.5rem;
}

.notification-number {
  position: absolute;
  top: 0.2rem;
  right: 0.15rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.2rem;
  color: var(--clr-white);
  font-size: 0.6rem;
  font-weight: 600;
  line-height: calc(1.05rem - 4px);
  text-align: center;
  background: var(--clr-danger);
  border: 2px solid var(--clr-background);
  border-radius: 1rem;
  box-sizing: border-box;
}

.profile_trigger {
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 0.375rem 0 0.25rem;
}

.profile_trigger .user_photo {
  position: relative;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  overflow: hidden;
  border: 2px solid var(--clr-chrome-border);
  border-radius: 50%;
}

.user_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user_name {
  max-width: 8rem;
  overflow: hidden;
  color: var(--clr--title);
  font-size: var(--fs-base);
  font-weight: 500;
  text-overflow: ellipsis;
}

.profile_trigger .material-symbols-outlined.dd {
  font-size: 1.25rem;
  transition: transform 0.2s var(--chrome-ease);
}

.topbar_dropdown.open .profile_trigger .material-symbols-outlined.dd {
  transform: rotate(180deg);
}

/* Dropdown panels (fade + slide in, fade out) */

.topbar_dropdown {
  position: relative;
}

.dropdown_panel {
  position: absolute;
  top: calc(100% + 0.625rem);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 13rem;
  padding: 0.375rem;
  white-space: normal;
  background: var(--clr-menubar);
  border: 1px solid var(--clr-chrome-border);
  border-radius: 0.75rem;
  box-shadow: 0 12px 32px var(--clr-black-a20);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.375rem);
  transition: opacity 0.2s ease, transform 0.2s var(--chrome-ease), visibility 0s linear 0.2s;
}

.topbar_dropdown.open .dropdown_panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s var(--chrome-ease), visibility 0s;
}

.dropdown_header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem 0.625rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--clr-chrome-border);
}

.profile_topbar .dropdown_header {
  flex-direction: column;
  gap: 0.125rem;
}

.dropdown_title,
.dropdown_header h2 {
  color: var(--clr--title);
  font-size: var(--fs-base);
  font-weight: 600;
}

.dropdown_subtitle {
  max-width: 16rem;
  overflow: hidden;
  color: var(--clr-menu-text);
  font-size: var(--fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Profile menu */

.dropdown_option a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 2.5rem;
  padding: 0 0.625rem;
  color: var(--clr-menu-text);
  font-size: var(--fs-base);
  font-weight: 500;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.dropdown_option a .material-symbols-outlined.do {
  font-size: 1.25rem;
}

.dropdown_option a:hover,
.dropdown_option a:focus-visible {
  color: var(--clr--title);
  background: var(--clr-chrome-hover);
  outline: none;
}

.dropdown_option a.logout:hover,
.dropdown_option a.logout:focus-visible {
  color: var(--clr-danger);
}

/* Notifications panel */

.notification-message {
  width: 22rem;
  max-width: calc(100vw - 2rem);
}

.notification-count {
  padding: 0.125rem 0.5rem;
  color: var(--clr-button);
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--clr-chrome-hover);
  border-radius: 1rem;
}

.notification-message-bar {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  max-height: min(60vh, 26rem);
  overflow-y: auto;
  scrollbar-width: thin;
}

.notification-display {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem 0.625rem 0.625rem 1.375rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}

/* unread dot */
.notification-display::before {
  content: '';
  position: absolute;
  top: 1.05rem;
  left: 0.625rem;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--clr-button);
  border-radius: 50%;
}

.notification-display.read::before {
  display: none;
}

.notification-display:hover {
  background: var(--clr-chrome-hover);
}

.message-notif {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  text-decoration: none;
}

.message-notif p {
  color: var(--clr--title);
  font-size: var(--fs-sm);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.notification-display.read .message-notif p {
  color: var(--clr-menu-text);
}

.message-notif .small-notification,
.notification-display.read .message-notif .small-notification {
  color: var(--clr-placeholder);
  font-size: var(--fs-xs);
}

.notification-display .material-symbols-outlined.cut {
  flex-shrink: 0;
  padding: 0.125rem;
  color: var(--clr-menu-text);
  font-size: 1.1rem;
  background: transparent;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.notification-display:hover .material-symbols-outlined.cut,
.notification-display .material-symbols-outlined.cut:focus-visible {
  opacity: 1;
}

.notification-display .material-symbols-outlined.cut:hover {
  color: var(--clr-danger);
  background: var(--clr-background);
}

.notification-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 1.5rem 0.5rem;
  color: var(--clr-menu-text);
  font-size: var(--fs-sm);
}

.notification-empty .material-symbols-outlined {
  font-size: 1.75rem;
}

/* Topbar on tablets and phones */

@media (max-width: 800px) {
  .topbar {
    gap: 0.5rem;
    padding: 0 0.75rem 0 1.5rem;
  }

  .user_name {
    display: none;
  }
}

@media (hover: none) {
  /* touch screens can't hover, so keep the dismiss button visible */
  .notification-display .material-symbols-outlined.cut {
    opacity: 1;
  }
}

@media (max-width: 500px) {
  /* leave room for the floating menu button on the left */
  .topbar {
    padding-left: 3.5rem;
  }

  /* search collapses to an icon that opens a full-width field under the topbar */
  .search {
    flex: 0 0 auto;
  }

  .search .search_icon {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    pointer-events: auto;
    cursor: pointer;
  }

  .search .search_icon:hover {
    background: var(--clr-chrome-hover);
  }

  .search .search_input {
    display: none;
  }

  .search .search_input.active {
    position: fixed;
    top: 4.5rem;
    left: 0.75rem;
    z-index: 40;
    display: block;
    width: calc(100vw - 1.5rem);
    padding-left: 0.875rem;
    box-shadow: 0 12px 32px var(--clr-black-a20);
    animation: searchfadeIn 0.2s ease;
  }

  @keyframes searchfadeIn {
    from {
      opacity: 0;
      transform: translateY(-0.375rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* panels span the screen width just under the topbar */
  .dropdown_panel {
    position: fixed;
    top: 4.5rem;
    right: 0.75rem;
  }

  .notification-message {
    left: 0.75rem;
    width: auto;
    max-width: none;
  }
}

/* ---------- Main dasboard ---------- */

.dash .main {
  position: relative;
  height: calc(100vh - 4rem);
  /* breathing room below the topbar and after the last section when scrolled to the end */
  padding-block: 1.5rem;
  gap: 1rem;
  overflow: auto;
  scrollbar-width: none;
}

@media (max-width: 500px) {
  .dash .main {
    position: relative;
    height: 100vh;
    height: calc(100dvh - 4rem);
    margin: 0rem 0.5rem;
    padding-block: 1rem;
    overflow: auto;
    scrollbar-width: none;
  }
}

/* ---------- Level and Approval Page ---------- */

.main_list_header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-decoration: none;
  margin-bottom: 1rem;
  z-index: 1;
}

.level_name {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 1rem;
  align-items: center;
}

.sub_search {
  position: relative;
  display: flex;
}

.sub_search .material-symbols-outlined.ls {
  position: absolute;
  right: 0.25rem;
  transform: translateY(12%);
  font-size: var(--fs-2xl);
  color: var(--clr-menu-text);
  cursor: pointer;
  pointer-events: auto;
}

.level_name h2 {
  color: var(--clr-menu-text);
  font-size: var(--fs-xl);
  font-weight: 600;
  text-decoration: none !important;
  z-index: 5;
}

.level_name h2 a {
  text-decoration: none;
}

.level_name h2 a:visited,
.level_name h2 a:active,
.level_name h2 a:focus {
  color: var(--clr-menu-text);
  text-decoration: none;
}

.level_actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}

.level_actions button {
  width: 8rem;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--clr-box-border);
  font-size: var(--fs-sm);
  text-decoration: none;
  text-align: center;
  background: var(--gradient-accent);
  background-size: 170% 100%;
  color: var(--clr-white-txt);
  cursor: pointer;
  z-index: 15;
}

.level_actions button.export_report:hover {
  background-position: 100% 50%;
  transition: var(--tran-03);
}

.level_actions button.add_levels_btn:hover {
  background-position: 100% 50%;
  transition: var(--tran-03);
}

@media (max-width: 1000px) {
  .level_actions button {
    font-size: var(--fs-xs);
    padding: 0.5rem 0.1rem;
    width: 5.5rem;
  }
}

@media (max-width: 750px) {
  .level_name {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    align-items: center;
  }

  .main_list_header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .level_actions {
    width: 100%;
    justify-content: flex-end;
    gap: 0.25rem;
  }

  .level_actions button {
    font-size: var(--fs-xs);
    padding: 0.5rem 0.1rem;
    width: 5.5rem;
  }
}

@media (max-width: 450px) {
  .level_name h2 {
    font-size: 1;
  }

  .level_actions button {
    font-size: 0.6rem;
    padding: 0.5rem 0.1rem;
    width: 5rem;
  }
}

/* ---------- Level Room ---------- */

.level_List {
  background: var(--clr-menubar);
  border: 1px solid var(--clr-box-border);
  border-radius: 1rem;
  padding: 1rem;
  margin: 0.5rem 0.5rem;
  box-shadow: 2px 4px 8px var(--clr-overlay);
  transition: var(--tran-03);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.level_header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0.25rem;
  align-items: center;
}

.level_subheader {
  display: flex;
  flex-direction: row;
  text-decoration: none;
  gap: 0.5rem;
}

.level_header h2 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-menu-text);
}

.tile_header {
  justify-content: space-around;
}

.tile_header h2 {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--clr-menu-text);
}

.tile_header span {
  font-size: 0.6rem;
}

.edit_category_button,
.delete_category_button {
  width: 4rem;
  padding: 0.5rem;
  justify-self: center;
  font-size: var(--fs-base);
  align-items: center;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  background: var(--gradient-accent);
  background-size: 170% 100%;
  color: var(--clr-white-txt);
  transition: var(--tran-02);
}

.edit_category_button:hover {
  background-position: 100% 50%;
}

.delete_category_button:hover {
  background-color: tomato;
}

.level_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--clr-menu-text);
  font-size: 0.8rem;
}

.level_table thead {
  display: table;
  width: 100%;
  table-layout: fixed;
  color: var(--clr-white-txt);
  border-collapse: separate;
  overflow: hidden;
}

.level_table thead th {
  font-weight: 600;
  padding: 0.75rem 0.5rem;
  text-align: left;
  background: var(--clr-button);
}

.level_table thead th.sl_coloumn {
  border-radius: 15px 0 0 0;
}

.level_table thead th.que-sl_coloumn {
  border-radius: 15px 0 0 0;
}

.level_table thead th.delete-coloumn {
  border-radius: 0 15px 0 0;
}

.level_table thead th.que-delete-coloumn {
  border-radius: 0 15px 0 0;
}

.level_table td {
  padding: 0.5rem 0.5rem;
  text-align: left;
}

.level_table tbody {
  display: block;
  max-height: 10rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.level_table.dataType tbody,
.letter_format tbody {
  max-height: none;
  overflow-y: visible;
  overflow-x: auto;
}

.level_table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.level_table tbody tr a {
  text-decoration: none;
  color: var(--clr-menu-text);
}

.level_table tbody tr a:hover {
  color: var(--clr-button);
}

.level_table .sl_coloumn {
  width: 2rem;
  vertical-align: middle;
}

.level_table .action-coloumn,
.level_table .delete-coloumn {
  width: 4rem;
  text-align: center;
  vertical-align: middle;
}

.edit_button,
.delete_button {
  background: transparent;
  border: none;
  cursor: pointer;
}

.material-symbols-outlined.edit_key,
.material-symbols-outlined.cancel_key {
  cursor: pointer;
  font-size: 1.4rem;
  color: var(--clr-menu-text);
  transition: var(--tran-02);
}

.material-symbols-outlined.edit_key:hover {
  color: var(--clr-hover-btn);
}

.material-symbols-outlined.cancel_key:hover {
  color: tomato;
}

.level_content {
  position: relative;
  overflow: hidden;
  overflow-x: auto;
}

.level_table td {
  vertical-align: top;
}

.level_table .que-sl_coloumn,
.level_table .sl_coloumn {
  width: clamp(20px, 7.5vw, 30px);
  text-align: center;
}

.level_table .que-id-coloumn {
  width: clamp(60px, 5vw, 70px);
  text-align: left;
}

.level_table .level-code-coloumn {
  width: clamp(90px, 7.5vw, 100px);
  text-align: center;
}

.level_table td.que-id-coloumn {
  border-left: 0.25px dashed var(--clr-fade-text);
}

.level_table .que-type-coloumn {
  width: clamp(90px, 7.5vw, 100px);
  text-align: left;
}

.level_table td.que-type-coloumn {
  border-left: 0.25px dashed var(--clr-fade-text);
}

.level_table .que-coloumn {
  width: clamp(150px, 35vw, 200px);
  text-align: left;
}

.level_table.language .name-coloumn {
  width: clamp(80px, 15vw, 120px);
  text-align: left;
}

.level_table .name-coloumn {
  width: clamp(150px, 35vw, 200px);
  text-align: left;
}

.level_table td.que-coloumn {
  border-left: 0.25px dashed var(--clr-fade-text);
}

.level_table .que-option-coloumn {
  width: clamp(100px, 25vw, 150px);
  text-align: left;
}

.level_table td.que-option-coloumn {
  border-left: 0.25px dashed var(--clr-fade-text);
}

.level_table .que-delete-coloumn {
  width: clamp(70px, 5vw, 90px);
  text-align: center;
}

.level_table td.que-delete-coloumn {
  border-left: 0.25px dashed var(--clr-fade-text);
}

.level_table tbody tr:last-child td {
  border-bottom: 0.25px dashed var(--clr-fade-text);
}

/* ---------- Approval Page Start ---------- */

.roomListWrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, max-content));
  align-items: flex-start;
  gap: 1.5rem;
  padding-bottom: 2rem;
  justify-content: center;
}

/* ---------- Pop-up ---------- */

.level_edit-pop_up,
.level_add-pop_up,
.assign_privilege-pop_up,
.delete-pop_up {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 35rem;
  height: auto;
  background: var(--clr-menubar);
  padding: 1rem;
  border: 1px solid var(--clr-border-muted);
  border-radius: 2rem;
  overflow: hidden;
  display: none;
  z-index: 2000;
}

.level_add-pop_up_lettertypes {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 70vw;
  height: auto;
  background: var(--clr-menubar);
  padding: 1rem;
  border: 1px solid var(--clr-border-muted);
  border-radius: 2rem;
  overflow: hidden;
  display: none;
  z-index: 2000;
}

.overlay.active {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  backdrop-filter: blur(5px);
  z-index: 500;
  transition: var(--tran-01);
}

.level_edit-pop_up.active,
.level_add-pop_up.active,
.level_add-pop_up_lettertypes.active,
.assign_privilege-pop_up.active,
.delete-pop_up.active,
.confirm-pop_up.active {
  display: block;
}

.popup_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.popup_header h2 {
  font-size: 1.75rem;
  color: var(--clr--title);
  margin: 0;
  font-weight: 700;
  text-shadow: 2px 2px 5px var(--clr-black-a30);
}

.popup_header .material-icons:hover {
  text-shadow: 2px 2px 5px var(--clr-black-a30);
  background: var(--clr-danger);
}

.popup_level_form .popup_privilege_form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.popup_level_form label {
  font-size: var(--fs-base);
  font-weight: 600;
  margin-top: 1rem;
  color: var(--clr-menu-text);
}

.popup_level_form input {
  width: 100%;
  padding: 0.5rem;
  font-size: var(--fs-base);
  color: var(--clr-menu-text);
  background-color: var(--clr-background);
  border: 1px solid var(--clr-box-border);
  border-radius: 5px;
  outline: none;
  transition: var(--tran-03);
}

.popup_btn {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.popup_btn button {
  flex: 1;
  padding: 0.8rem 1.5rem;
  font-size: var(--fs-base);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color var(--tran-03), transform var(--tran-02);
}

.popup_btn .cancel {
  background-color: var(--clr-button);
  color: var(--clr-white);
  transition: var(--tran-02);
}

.popup_btn .cancel:hover {
  background-color: var(--clr-danger);
  transform: translateY(-2px);
}

.popup_btn .update,
.popup_btn .delete-user {
  background: var(--gradient-accent);
  background-size: 170% 100%;
  color: var(--clr-white);
  transition: var(--tran-02);
}

.popup_btn .update:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
}

.popup_btn .delete-user:hover {
  background-color: red;
  transform: translateY(-2px);
}

.popup_btn .delete-user.approve:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
}

.delete-message p {
  color: var(--clr-menu-text);
}

.assign_privilege-pop_up .popup_privilege_form {
  color: var(--clr-menu-text);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.assign_privilege-pop_up .popup_privilege_form .form__group {
  display: flex;
  align-items: center;
  gap: 20px;
}

.assign_privilege-pop_up .popup_privilege_form .form__group label {
  flex-basis: 10rem;
  font-size: var(--fs-base);
  text-align: left;
}

.assign_privilege-pop_up .popup_privilege_form .form__group select {
  flex: 1;
  padding: 0.75rem 1rem;
  font-size: var(--fs-base);
  color: var(--clr-menu-text);
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  background-color: var(--clr-menubar);
  transition: var(--tran-03);
  appearance: none !important;
}

.assign_privilege-pop_up .popup_privilege_form .form__group select:focus {
  outline: none;
  border-color: var(--clr-button);
}

.assign_privilege-pop_up .popup_privilege_form .form__group select:hover {
  border-color: var(--clr-button);
}

@media (max-width: 600px) {
  .level_edit-pop_up,
  .level_add-pop_up,
  .assign_privilege-pop_up,
  .delete-pop_up,
  .level_add-pop_up_lettertypes {
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    height: auto;
    max-height: 95%;
    padding: 1rem;
  }
}

/* ---------- Popups: confirmation (.delete-pop_up) and form popups (.ui-modal) ----------
   .delete-pop_up is used by every *_delete.html / confirm_*.html template: a .popup_header
   (h2 + .close-popup), a .delete-message and .popup_btn (.cancel + .delete-user, or .delete-user.approve).
   .ui-modal gives a form popup the same look: add it next to the popup's own class, put the header
   icon name in data-icon on .popup_header, and use .popup_btn (.cancel + .update) for the buttons.
   Centred on screen in the create-letter card style; other popups keep their own look. */

.overlay.active {
  background: var(--clr-overlay);
}

:is(.delete-pop_up, .ui-modal).active {
  position: fixed;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  width: min(27rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 1.375rem 1.375rem 1.25rem;
  overflow: auto;
  background: var(--clr-tile-background);
  border: 1px solid var(--clr-chrome-border);
  border-radius: 1rem;
  box-shadow: 0 24px 60px var(--clr-black-a30);
  transform: translate(-50%, -50%);
  animation: ui-popup-in 0.22s ease-out;
}

.ui-modal.active {
  z-index: 2000; /* above .overlay, for popups without their own popup class */
  width: min(32rem, calc(100vw - 2rem));
}

@keyframes ui-popup-in {
  from {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

:is(.delete-pop_up, .ui-modal) .popup_header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  margin: 0;
  padding-right: 2.25rem; /* room for the close button */
}

/* warning badge before the title (a check for approvals) */
:is(.delete-pop_up, .ui-modal) .popup_header::before {
  content: "warning";
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--clr-danger);
  font-family: "Material Symbols Outlined";
  font-size: 1.375rem;
  line-height: 1;
  background: var(--clr-danger-soft);
  border-radius: 0.75rem;
  font-feature-settings: "liga";
}

.ui-modal .popup_header::before {
  content: attr(data-icon);
  color: var(--clr-accent-2);
  background: var(--clr-accent-soft);
}

.delete-pop_up:has(.approve) .popup_header::before {
  content: "how_to_reg";
  color: var(--clr-accent-2);
  background: var(--clr-accent-soft);
}

:is(.delete-pop_up, .ui-modal) .popup_header h2 {
  margin: 0;
  text-align: left;
  color: var(--clr--title);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.3;
  text-shadow: none;
}

:is(.delete-pop_up, .ui-modal) .popup_header .close-popup {
  top: 0.875rem;
  right: 0.875rem;
  width: 2rem;
  height: 2rem;
  color: var(--clr-menu-text);
  font-size: 1.25rem;
  background: transparent;
  border-radius: 50%;
  transition: color 0.2s ease, background-color 0.2s ease;
}

:is(.delete-pop_up, .ui-modal) .popup_header .close-popup:hover {
  color: var(--clr--title);
  text-shadow: none;
  background: var(--clr-chrome-hover);
}

:is(.delete-pop_up, .ui-modal) .delete-message p {
  color: var(--clr-main-text);
  font-size: var(--fs-base);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

:is(.delete-pop_up, .ui-modal) .popup_btn {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

:is(.delete-pop_up, .ui-modal) .popup_btn button {
  flex: 0 0 auto;
  height: 2.5rem;
  padding: 0 1.125rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 0.625rem;
  transform: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease,
              background-position 0.45s ease;
}

:is(.delete-pop_up, .ui-modal) .popup_btn .cancel,
:is(.delete-pop_up, .ui-modal) .popup_btn .cancel:hover {
  color: var(--clr--title);
  background: transparent;
  border-color: var(--clr-chrome-border);
  transform: none;
}

:is(.delete-pop_up, .ui-modal) .popup_btn .cancel:hover {
  background: var(--clr-chrome-hover);
}

:is(.delete-pop_up, .ui-modal) .popup_btn .delete-user {
  color: var(--clr-white);
  background: var(--clr-danger);
}

:is(.delete-pop_up, .ui-modal) .popup_btn .delete-user:hover {
  background: var(--clr-danger);
  box-shadow: 0 6px 18px var(--clr-danger-glow);
  transform: none;
}

:is(.delete-pop_up, .ui-modal) .popup_btn .delete-user.approve,
.ui-modal .popup_btn .update {
  background: var(--gradient-accent);
  background-size: 170% 100%;
  box-shadow: 0 2px 10px var(--clr-accent-glow);
}

:is(.delete-pop_up, .ui-modal) .popup_btn .delete-user.approve:hover,
.ui-modal .popup_btn .update:hover {
  background-position: 100% 50%;
  box-shadow: 0 6px 20px var(--clr-accent-glow);
}

:is(.delete-pop_up, .ui-modal) .popup_btn button:focus-visible,
:is(.delete-pop_up, .ui-modal) .popup_header .close-popup:focus-visible {
  outline: 2px solid var(--clr-accent-2);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  :is(.delete-pop_up, .ui-modal) .popup_btn button {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.delete-pop_up, .ui-modal).active {
    animation: none;
  }
}

/* ---------- Question form inside a .ui-modal (add / edit a question: question bank and category pages) ----------
   Fields use .ui-field; options come from question/option_field.html (add) or edit_questions.html (edit):
   .letter-question-form-group > .question-allignment (label + .question-edit-div buttons) + input.option_text.
   question.js marks an option .option_edit (being edited) or .option_delete (removed on save). */

.ui-question-form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.ui-question-form .ui-field > label {
  color: var(--clr-menu-text);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ui-question-form .ui-field input[type=text],
.ui-question-form .ui-field select {
  font-size: var(--fs-sm);
}

.ui-question-form .ui-field select:disabled {
  color: var(--clr-menu-text);
  background: var(--clr-chrome-hover);
  cursor: not-allowed;
  opacity: 1;
}

.ui-question-form .ui-options {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.ui-question-form .ui-options:empty {
  display: none;
}

/* one option: its label on top, the text box with its buttons below */
.ui-question-form .letter-question-form-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label label"
    "input actions";
  align-items: center;
  gap: 0.25rem 0.5rem;
  animation: ui-option-in 0.2s ease-out;
}

@keyframes ui-option-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.ui-question-form .question-allignment {
  display: contents;
}

.ui-question-form .letter-question-form-group label {
  grid-area: label;
  color: var(--clr-menu-text);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.ui-question-form .question-edit-div {
  grid-area: actions;
  display: flex;
  gap: 0.125rem;
}

.ui-question-form .letter-question-form-group .option_text {
  grid-area: input;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--clr--title);
  font-size: var(--fs-sm);
  background: var(--clr-background);
  border: 1px solid var(--clr-chrome-border);
  border-radius: 0.5rem;
  box-shadow: none;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.ui-question-form .letter-question-form-group .option_text:focus {
  border-color: var(--clr-accent-2);
  box-shadow: 0 0 0 3px var(--clr-accent-soft);
}

/* saved options are read-only until the pencil is pressed */
.ui-question-form .letter-question-form-group .option_text[readonly] {
  color: var(--clr-main-text);
  background: var(--clr-chrome-hover);
}

.ui-question-form .letter-question-form-group .option_text.option_edit {
  color: var(--clr--title);
  background: var(--clr-background);
  border-color: var(--clr-accent-2);
}

.ui-question-form .letter-question-form-group .option_text.option_delete {
  color: var(--clr-danger);
  text-decoration: line-through;
  background: var(--clr-danger-soft);
  border-color: transparent;
  opacity: 0.8;
}

/* while adding, the pencil does nothing: only the remove button is shown */
.ui-question-form .edit_question_button:not([onclick]) {
  display: none;
}

.ui-question-form .edit_question_button[onclick] {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ui-question-form .edit_question_button .material-symbols-outlined.blue,
.ui-question-form .edit_question_button .material-symbols-outlined.red {
  margin: 0;
  color: var(--clr-menu-text);
  font-size: 1.125rem;
  transition: color 0.2s ease;
}

.ui-question-form .edit_question_button[onclick]:hover {
  background: var(--clr-btn-secondary-bg);
}

.ui-question-form .edit_question_button[onclick]:hover .material-symbols-outlined.blue {
  color: var(--clr-btn-secondary-text);
}

.ui-question-form .edit_question_button[onclick]:has(.red):hover {
  background: var(--clr-danger-soft);
}

.ui-question-form .edit_question_button[onclick]:hover .material-symbols-outlined.red {
  color: var(--clr-danger);
}

/* "Add option": a dashed row in the normal flow (not the old absolute link) */
.ui-question-form .show-options.active {
  position: static;
  display: block;
  width: 100%;
  margin: 0;
}

.ui-question-form .add-options {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  color: var(--clr-btn-secondary-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  border: 1.5px dashed var(--clr-chrome-border);
  border-radius: 0.625rem;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ui-question-form .add-options::before {
  content: "add";
  margin-right: 0.375rem;
  font-family: "Material Symbols Outlined";
  font-size: 1.125rem;
  font-feature-settings: "liga";
}

.ui-question-form .add-options:hover {
  background: var(--clr-btn-secondary-bg);
  border-color: var(--clr-btn-secondary-hover);
}

@media (prefers-reduced-motion: reduce) {
  .ui-question-form .letter-question-form-group {
    animation: none;
  }
}

/* ---------- Profile Page ---------- */

.profile_page {
  margin: 1rem auto;
  padding: 2rem;
}

.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile__avatar {
  position: relative;
}

.profile__avatar .avatar {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #007bff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile__avatar .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.profile__avatar .avatar.active {
  border: 3px solid var(--clr-hover-btn);
}

.profile__info {
  text-align: center;
}

.profile__info h3 {
  margin: 0rem 0;
  font-size: var(--fs-2xl);
  font-weight: 500;
  color: var(--clr-menu-text);
}

.profile__info p {
  font-size: var(--fs-sm);
  color: var(--clr-menu-text);
}

.profile__info button {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin-top: 0.75rem;
  border: none;
  outline: none;
  border-radius: 0.5rem;
  font-size: 1.2rem;
  font-weight: 500;
  background: var(--gradient-accent);
  background-size: 170% 100%;
  color: var(--clr-filled-bt-text);
  cursor: pointer;
  transition: var(--tran-02);
}

.profile__info button:hover {
  background-position: 100% 50%;
  box-shadow: 0px 4px 8px var(--clr-overlay);
}

.profile__about {
  width: 100%;
  margin-top: 1rem;
  padding: 1rem;
}

.profile__about h3 {
  font-size: var(--fs-xl);
  margin-bottom: 0.75rem;
  text-align: center;
  color: var(--clr-menu-text);
}

.profile__about p {
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
  color: var(--clr-menu-text);
}

.profile-footer {
  margin-top: 2rem;
  padding: 1rem;
  border-bottom: 1px solid var(--clr-level-btn);
  text-align: center;
}

.profile-footer h2 {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--clr-menu-text);
}

/* ---------- Edit Profile checked ---------- */

.update-user-box.active {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25rem;
  height: 85vh;
  max-height: 40rem;
  background: var(--clr-menubar);
  padding: 1rem 0rem;
  border: 2px solid var(--clr-box-border);
  border-radius: 2rem;
  transition: var(--tran-02);
  z-index: 1000;
  margin-top: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.update-user-box.active:hover {
  box-shadow: 0 15px 20px var(--clr-overlay);
}

.update_user_header {
  display: flex;
  color: var(--clr-menu-text);
  justify-content: center;
}

.update_user_header h2 {
  margin-top: 1rem;
}

.cut_button .material-icons {
  position: absolute;
  font-size: var(--fs-2xl);
  top: 0;
  right: 0;
  width: 3rem;
  height: 3rem;
  color: var(--clr-filled-bt-text);
  background: var(--clr-button);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom-left-radius: 1.2rem;
  cursor: pointer;
  z-index: 1;
  transition: var(--tran-02);
}

.cut_button .material-icons:hover {
  text-shadow: 2px 2px 5px var(--clr-black-a30);
  background: var(--clr-danger);
}

.update-user-box.active form {
  overflow-y: auto;
  scrollbar-width: none;
  margin-top: 1rem;
}

.update-user-box.active .input-box label {
  position: absolute;
  transform: translateY(50%);
  font-size: var(--fs-base);
  margin-top: 0.5rem;
  font-weight: 600;
  color: var(--clr-menu-text);
  transition: var(--tran-03);
  z-index: -2;
}

.input-box-upload-edit label,
.textarea_user {
  position: relative;
  font-size: var(--fs-base);
  color: var(--clr-menu-text);
  font-weight: 600;
  margin-top: 0.5rem;
  font-family: var(--font-main);
  margin: 1rem 0 0 3rem;
}

.file-upload label {
  color: var(--clr-white-txt) !important;
}

.input-box-edit-user {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
  margin-top: -1rem;
}

.input-box-edit-user textarea {
  position: relative;
  width: auto !important;
  border-radius: 0.5rem;
  background: var(--clr-menubar);
  border: 1px solid #ccc;
  height: 4rem;
  color: var(--clr-menu-text);
  padding: 0.5rem;
  margin: 0 3rem;
  resize: none;
  overflow-y: auto;
}

.input-box-edit-user textarea::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.update-user-box form button {
  margin-top: 0rem;
  width: calc(100% - 6rem);
  height: 3rem;
  border: none;
  margin: 0 3rem;
  outline: none;
  border-radius: 0.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  background: var(--gradient-accent);
  background-size: 170% 100%;
  color: var(--clr-filled-bt-text);
  cursor: pointer;
  transition: var(--tran-02);
  align-items: center;
}

@media (max-width: 500px) {
  .update-user-box.active {
    width: 95%;
    padding: 1rem 0rem;
    transition: var(--tran-02);
  }
}

/* ---------- Home Dashboard and Some Data Repository ---------- */

.main_list {
  color: var(--clr-menu-text);
}

/* ---------- Pagination ---------- */

.dashboard-container .recent-applications .pagination,
.main_list .recent-applications .pagination {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.dashboard-container .recent-applications .pagination .active,
.main_list .recent-applications .pagination .active {
  font-weight: 500;
  color: var(--clr-button);
}

/* ---------- Contact Us Page ---------- */

.mobile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.mobile .material-symbols-outlined,
.email-info .material-symbols-outlined {
  font-size: var(--fs-lg);
  font-weight: 600;
}

@media (max-width: 850px) {
  .mobile .material-symbols-outlined,
  .email-info .material-symbols-outlined {
    font-size: var(--fs-md);
    font-weight: 500;
  }
}

/* ---------- Right Section - Contact Form ---------- */

.form {
  display: flex;
  flex-direction: column;
}

.form h3 {
  font-size: var(--fs-md);
  color: var(--clr-menu-text);
}

.input-box-contactus input {
  background: var(--clr-menubar);
}

.textarea_label {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--clr-menu-text);
}

.form textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--clr-box-border);
  border-radius: 5px;
  font-size: var(--fs-base);
  background: var(--clr-menubar);
  height: 5rem;
  resize: none;
  overflow-y: auto;
  color: var(--clr-menu-text);
}

.form button:hover {
  background: var(--clr-hover-btn);
}

/* ---------- Letter Form and other Form with Similar Structure ---------- */

.dropdown-btn {
  width: auto;
  padding: 0.5rem;
  border: 1px solid var(--clr-box-border);
  border-radius: 5px;
  font-size: var(--fs-base);
  background: var(--clr-menubar);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  color: var(--clr-menu-text);
}

/* ---------- Letter Add Question Dropdown ---------- */

.letter-form-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.letter-form-group label {
  font-size: var(--fs-base);
  margin-bottom: 5px;
  font-weight: 600;
  color: var(--clr-menu-text);
}

.document-upload label {
  font-size: 0.9rem;
  margin-bottom: 5px;
  font-weight: 600;
  color: var(--clr-menu-text);
}

.document-upload input {
  width: 100%;
  padding: 0.8rem;
  color: var(--clr-menu-text);
  border: 2px solid var(--clr-box-border);
  background: var(--clr-menubar);
  border-radius: 0.5rem;
  font-size: var(--fs-base);
}

/* ---------- Radio Buttons ---------- */

input[type="file"] {
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.file-upload label {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  background: var(--gradient-accent);
  background-size: 170% 100%;
  font-size: var(--fs-sm);
  cursor: pointer;
  border: none;
  transition: var(--tran-02);
  color: var(--clr-white-txt);
  margin-top: 0.25rem;
}

.file-upload label:hover {
  background-position: 100% 50%;
}

.file-upload span {
  color: var(--clr-menu-text);
  font-size: var(--fs-sm);
}

/* ---------- Grivance Reddresal ---------- */

.material-icons.close-popup {
  position: absolute;
  font-size: var(--fs-2xl);
  top: 0;
  right: 0;
  width: 3rem;
  height: 3rem;
  color: var(--clr-filled-bt-text);
  background: var(--clr-button);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom-left-radius: 1.2rem;
  cursor: pointer;
  z-index: 1;
  transition: var(--tran-02);
}

.close-popup:hover {
  text-shadow: 2px 2px 5px var(--clr-black-a30);
  background: var(--clr-danger);
}

/* ---------- Add category ---------- */

.popup_header .material-icons {
  position: absolute;
  font-size: var(--fs-2xl);
  top: 0;
  right: 0;
  width: 3rem;
  height: 3rem;
  color: var(--clr-filled-bt-text);
  background: var(--clr-button);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom-left-radius: 1.2rem;
  cursor: pointer;
  z-index: 1;
  transition: var(--tran-02);
}

/* ---------- Enable Options ---------- */

.show-options {
  display: none;
}

.show-options.active {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  color: var(--clr-linktext);
  font-size: var(--fs-base);
  font-weight: 600;
  width: 100%;
  top: 10.5rem;
  right: 1.75rem;
  margin-top: 0.5rem;
  cursor: pointer;
}

/* ---------- Letterhead Form ---------- */

.add-letterhead-pop_up.active {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(650px, 50vw, 100vw);
  height: 70vh;
  background: var(--clr-menubar);
  padding: 1.5rem;
  border: 2px solid var(--clr-border-muted);
  border-radius: 2rem;
  overflow: hidden;
  z-index: 2000;
  margin-top: 0rem;
  overflow-y: auto;
  scrollbar-width: none;
}

.letterhead-box-file {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}

.letterhead-box-file .input-box-upload-letterhead {
  align-items: center;
  padding-right: 1rem;
  font-family: var(--font-main);
  margin-bottom: 5px;
  width: 100%;
}

.add-letterhead-pop_up.active form h2 {
  display: flex;
  margin-bottom: 1rem;
  justify-content: space-around;
  color: var(--clr-menu-text);
}

.add-letterhead-pop_up.active form button {
  margin-top: 1rem;
}

.input-box-upload-letterhead .label-upload {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--clr-menu-text);
}

.letterhead_desc_hover {
  position: absolute;
  right: 0;
  bottom: 0rem;
  width: 100%;
  padding: 1.5rem 1.5rem;
  text-align: justify;
  font-size: var(--fs-sm);
  color: var(--clr-fade-text);
}

.input-box-contactus textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--clr-box-border);
  border-radius: 0.5rem;
  font-size: var(--fs-base);
  background: var(--clr-menubar);
  height: 5rem;
  resize: none;
  overflow-y: auto;
  color: var(--clr-menu-text);
  margin-top: 0.25rem;
}

.popup_submit_btn {
  flex: 1;
  width: 100%;
  background: var(--gradient-accent);
  background-size: 170% 100%;
  color: var(--clr-white-txt);
  padding: 0.8rem 1.5rem;
  font-size: var(--fs-base);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
}

@media (max-width: 800px) {
  .add-letterhead-pop_up.active {
    width: 90%;
  }
}

/* ---------- Message Box ---------- */

@keyframes fadeOut {
  0% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  visibility: hidden;
  }
}

#custom_message .messages {
  position: absolute;
  top: 80%;
  left: 50%;
  font-size: var(--fs-base);
  transform: translateX(-50%);
  background: var(--clr-main-text);
  color: var(--clr-background);
  padding: 0.5rem;
  border-radius: 0.5rem;
  z-index: 9999;
  width: auto;
  max-width: 80%;
  animation: fadeOut 1s ease-in-out 3s forwards;
}

/* ---------- Question Form ---------- */

.question_edit-pop_up.active {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 35rem;
  height: auto;
  background: var(--clr-menubar);
  padding: 1.5rem;
  border: 0.2rem solid var(--clr-border-muted);
  border-radius: 2rem;
  transition: var(--tran-02);
  overflow: hidden;
  display: block;
  flex-direction: column;
  z-index: 2000;
}

.target-options-htmx {
  flex-grow: 1;
  max-height: 40vh;
  overflow-y: auto;
  padding-right: 0.25rem;
  scrollbar-width: thin;
}

.popup_question_form .option_text {
  width: 100%;
  padding: 0.8rem;
  font-size: var(--fs-base);
  color: var(--clr-menu-text);
  background-color: var(--clr-background);
  border: 2px solid var(--clr-box-border);
  border-radius: 0.5rem;
  outline: none;
  transition: var(--tran-03);
}

.letter-question-form-group {
  position: relative;
  display: flex;
  flex-direction: column;
}

.letter-question-form-group label {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--clr-menu-text);
}

.letter-question-form-group select {
  margin-bottom: 0.5rem;
}

.letter-question-form-group .dropdown-btn {
  width: auto;
  padding: 0.5rem;
  border: 1px solid var(--clr-box-border);
  border-radius: 5px;
  font-size: var(--fs-base);
  background: var(--clr-menubar);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  color: var(--clr-menu-text);
}

.question-allignment {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.question-edit-div {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.edit_question_button .material-symbols-outlined.blue {
  margin-top: 1rem;
  font-size: var(--fs-xl);
  color: var(--clr-button);
  cursor: pointer;
}

.edit_question_button .material-symbols-outlined.red {
  margin-top: 1rem;
  font-size: var(--fs-xl);
  color: tomato;
  cursor: pointer;
}

@media (max-width: 800px) {
  .letter-question-form-group .dropdown-btn {
    width: auto;
  }
}

.option_text.option_delete {
  border-color: red;
  box-shadow: 0 0 5px var(--clr-focus-ring);
  transition: var(--tran-02);
  text-decoration: line-through;
}

.option_text.option_edit {
  border-color: rgb(164, 209, 0);
  box-shadow: 0 0 5px var(--clr-focus-ring);
  transition: var(--tran-02);
}

.letter-question-form-group:has(.question-allignment .option_text.option_hide) {
  display: none;
}

.letter-form-group input {
  width: 100%;
  padding: 0.5rem;
  color: var(--clr-menu-text);
  border: 1px solid var(--clr-box-border);
  background: var(--clr-menubar);
  border-radius: 5px;
  font-size: var(--fs-base);
}

/* ---------- Question Bank ---------- */

.edit_button_que_bank,
.delete_button_que_bank {
  background: var(--gradient-accent);
  background-size: 170% 100%;
  border: none;
  border-radius: 5px;
  color: var(--clr-white-txt);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: var(--tran-03);
}

.edit_button_que_bank:hover {
  background-position: 100% 50%;
}

.delete_button_que_bank:hover {
  background-color: tomato;
}

/* ---------- Full View Image ---------- */

.image-viewer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--clr-black-a80);
  align-items: center;
  position: absolute;
  height: 100vh;
  width: 100vw;
  transform: translateY(-100%);
  z-index: 2000;
}

.full-image-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 80vh;
  width: 100%;
  overflow: hidden;
}

.full-image-container img {
  width: auto;
  height: 100%;
  border-radius: 0.5rem;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.thumbnail-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0.5rem;
  background: linear-gradient(to right, var(--clr-black-a80) 0%, var(--clr-black-a40) 30%, var(--clr-black-a20) 50%, var(--clr-black-a40) 70%, var(--clr-black-a80) 100%);
  position: absolute;
  margin-top: 1rem;
  overflow-x: auto;
  bottom: 0rem;
}

.thumbnail-container .material-symbols-outlined {
  color: var(--clr-white-txt);
  font-size: var(--fs-2xl);
  font-weight: 600;
  cursor: pointer;
}

.thumbnail-container .material-symbols-outlined:hover {
  transform: scale(1.5);
  transition: var(--tran-02);
}

.thumbnails {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  max-width: 100%;
}

.thumbnail {
  width: 4rem;
  height: 4rem;
  border-radius: 0.5rem;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.3s;
}

.thumbnail:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

.fullletterhead-cross {
  position: absolute;
  right: 1rem;
  top: 1rem;
}

.fullletterhead-cross .material-symbols-outlined {
  font-size: var(--fs-2xl);
  font-weight: 500;
  color: var(--clr-white-txt);
  cursor: pointer;
}

.fullletterhead-cross .material-symbols-outlined:hover {
  transform: scale(1.2);
  transition: var(--tran-03);
}

/* ---------- Fullscreen Letterhead Name ---------- */

.fullimage_letterhead_name {
  position: absolute;
  justify-content: center;
  top: 1.5rem;
  color: var(--clr-white-txt);
  font-size: var(--fs-base);
  font-weight: 500;
}

/* ---------- Lettertypes_add ---------- */

.lettertypes_table {
  width: 100%;
}

.lettertypes_table thead th {
  font-size: var(--fs-base);
  color: var(--clr-menu-text);
  font-weight: 500;
  text-align: left;
  background: var(--clr-line);
  padding: 0.5rem;
  border-radius: 0.25rem;
}

.question_lettertypes_header {
  width: clamp(90px, 12.5vw, 100px);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.lettertypes_table tbody {
  margin-top: 0.5rem;
}

/* ---------- Calender ---------- */

::-webkit-scrollbar {
  width: 0;
}

.calendar {
  width: 100%;
  height: 100%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: var(--clr-menu-text);
  border-radius: 10px;
  background-color: var(--clr-menubar);
}

.calendar-header {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  font-size: var(--fs-lg);
  font-weight: 600;
  text-transform: capitalize;
}

.calendar-header .prev,
.calendar-header .next {
  cursor: pointer;
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--clr-level-btn);
}

.event_marker.present {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 0.5rem;
  border-radius: 1rem;
  background-color: var(--clr-calender-event);
  bottom: 0.35rem;
}

.calendar_event_list {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: column;
  margin-left: 1rem;
  width: 50%;
  padding: 1rem;
}

.calendar_event_list_header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--clr-menu-text);
}

.calendar_event_list_header h1 {
  font-size: var(--fs-lg);
  font-weight: 600;
}

.calendar_event_list_header h3 {
  font-size: var(--fs-md);
  font-weight: 600;
}

.calendar_event_list_main {
  width: 100%;
  height: 90vh;
  overflow-y: auto;
  scrollbar-width: none;
}

.calendar_event_list_main a {
  text-decoration: none;
}

.calendar_event_list_main .event_list:last-child {
  margin-bottom: 5rem;
}

.event_list {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.event_list:hover {
  background: var(--clr-hover-background);
  transition: var(--tran-03);
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.event_sl_number {
  display: flex;
  height: 100%;
  text-decoration: none;
  font-size: var(--fs-2xl);
  font-weight: 600;
  padding: 0 1rem;
  align-items: center;
  color: var(--clr-menu-text);
}

.event_summary {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0.5rem 0;
}

.event_summary a {
  text-decoration: none;
}

.event_time_place {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 1rem 0 0.25rem 0;
  border-bottom: 0.5px dotted var(--clr-menu-text);
  color: var(--clr-menu-text);
  font-size: var(--fs-base);
  font-weight: 500;
}

.event_details {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.event_details .event_details_para {
  font-size: var(--fs-sm);
}

.event_details a {
  text-decoration: none;
  text-justify: auto;
  color: var(--clr-menu-text);
}

.date_event_action_bar {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.25rem;
}

.date_event_action_bar a {
  text-decoration: none;
}

.event_action_bar_border {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border: 1px solid var(--clr-menu-text);
  border-radius: 10px;
  background-color: #1a1a1b;
  cursor: pointer;
}

.event_action_bar_border.created {
  background-color: var(--clr-hover-btn);
}

.event_action_bar_border .material-symbols-outlined {
  font-size: var(--fs-base);
  color: var(--clr-filled-bt-text);
}

.add_event_details {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
}

.add_event_details .material-symbols-outlined.add_event {
  font-size: 3rem;
  cursor: pointer;
  font-weight: 500;
  background-color: var(--clr-button);
  border-radius: 50%;
  color: var(--clr-white-txt);
}

@keyframes pulse {
  0% {
  transform: scale(1);
  }
  50% {
  transform: scale(1.5);
  }
  100% {
  transform: scale(1);
  }
}

.add_event {
  animation: pulse 2s infinite ease-in-out;
}

@media (max-width: 800px) {
  .calendar_event_list {
    width: 100%;
    padding: 1rem;
    margin-left: 0rem;
  }

  .add_event_details {
    position: absolute;
    right: 1rem;
    bottom: 3rem;
  }

  @keyframes pulse {
    0% {
    transform: scale(0.85);
    }
    50% {
    transform: scale(1.25);
    }
    100% {
    transform: scale(0.85);
    }
  }

}

/* ---------- Small calender ---------- */

.date_selection_calendar_event {
  position: absolute;
  display: none;
  top: 40%;
  left: 50%;
  transform: translate(-100%, -40%);
  border: 1px solid var(--clr-menu-text);
  border-radius: 10px;
  width: clamp(280px, 20vw, 300px);
  z-index: 2001;
}

.date_selection_calendar_event.date_selected {
  display: block;
}

.calendar_small {
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: var(--clr-menu-text);
  border-radius: 10px;
  background-color: var(--clr-menubar);
}

.calendar-header_small {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-transform: capitalize;
}

.calendar-header_small .prev,
.calendar-header_small .next {
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--clr-level-btn);
}

.lettertypes_table.small thead th {
  font-size: var(--fs-xs);
  width: calc(80%/7);
  height: 1vw;
  color: var(--clr-filled-bt-text);
  font-weight: 500;
  text-align: left;
  background: var(--clr-button);
  padding: 0.5rem;
  border-radius: 0.25rem;
}

.calendar-dates_small thead .days_small {
  text-align: center;
  vertical-align: middle;
  border: 1px solid var(--clr-main-text);
}

.calendar-dates_small tbody .days_small {
  width: calc(80%/7);
  font-size: var(--fs-xs);
  text-align: center;
  vertical-align: middle;
  height: 1vw;
  cursor: pointer;
  border: 1px solid var(--clr-main-text);
  border-radius: 5px;
  position: relative;
}

.calendar-dates_small tbody .days_small:hover {
  background-color: var(--clr-button);
  box-shadow: 0 2px 5px var(--box-shadow-variable-3);
  color: var(--clr-white-txt);
  transition: var(--tran-02);
}

.calendar-dates_small tbody .days_small.not_month {
  background-color: var(--clr-fade-text);
  color: var(--clr-background);
}

.calendar-dates_small tbody .days_small.not_month:hover {
  background-color: transparent !important;
  box-shadow: none !important;
  cursor: default !important;
  transition: none !important;
}

.calendar-dates_small tbody .days_small.today {
  background: tomato;
  color: var(--clr-white-txt);
}

.calendar-dates_small tbody .days_small.selected.today {
  background: var(--clr-button);
  color: var(--clr-white-txt);
}

.calendar-dates_small tbody .days_small.selected {
  background: var(--clr-button);
  box-shadow: 0 2px 5px var(--box-shadow-variable-3);
  color: var(--clr-white-txt);
}

.from_date_selection {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.letter_home_dropdown_small {
  width: auto;
  border: 0.5px solid var(--clr-menu-text);
  border-radius: 5px;
  background: transparent;
  color: var(--clr-menu-text);
}

.from_date_dropdown p {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-menu-text);
}

.set_date_button {
  background: var(--gradient-accent);
  background-size: 170% 100%;
  border-radius: 5px;
  color: var(--clr-filled-bt-text);
  width: 100%;
  border: none;
  padding: 0.15rem 0.5rem;
}

.letter_repo_filter {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  overflow: hidden;
  overflow-x: auto;
}

@media (max-width: 750px) {
  .date_selection_calendar_event {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -110%);
    border: 1px solid var(--clr-menu-text);
    border-radius: 10px;
    width: clamp(280px, 20vw, 300px);
    z-index: 2001;
  }
}

/* ---------- Letter Creation Page ---------- */

.generate-lettertypes-button {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}

.generate-lettertypes-button a {
  text-decoration: none;
}

.generate-lettertypes-button a.create-lettertypes-btn {
  display: inline-block;
  text-align: center;
}

.generate-lettertypes-button a.create-lettertypes-btn:hover {
  background-color: tomato;
  transition: var(--tran-03);
}

.create-lettertypes-btn {
  width: 100%;
  background: var(--gradient-accent);
  background-size: 170% 100%;
  color: var(--clr-white-txt);
  padding: 0.5rem 0rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  margin-top: 0.25rem;
  font-size: var(--fs-base);
  transition: var(--tran-03);
  flex: 1;
}

.create-lettertypes-btn:hover {
  background-position: 100% 50%;
}

/* ---------- Letter preview with letterhead ---------- */

.letter-form-dropdown-right {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

:focus-visible {
  outline: none !important;
}

/* ---------- Print Letter ---------- */

@media print {
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .createletter_letterhead h3,
  .letter-form-dropdown-right,
  .main_list_header,
  .createletter_form,
  .menu_service,
  .menubar,
  button,
  .topbar,
  .image_logo,
  .toggle {
    display: none !important;
  }

  * {
    box-shadow: none !important;
    overflow: visible !important;
  }

  img,
  .letterhead_image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    padding: 0;
  }

  @page { size: A4 portrait; margin: 0; }
}

/* ---------- Email-Content ---------- */

.email_subject {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* ---------- Loader on Letter Page ---------- */

.loader {
  position: absolute;
  left: 50%;
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
  transform: rotate(0deg);
  }
  100% {
  transform: rotate(360deg);
  }
}

/* ---------- Popup text area ---------- */

.popup_level_form .lettertypes_format_textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--clr-box-border);
  border-radius: 5px;
  font-size: var(--fs-base);
  background: var(--clr-menubar);
  height: 60vh;
  resize: none;
  overflow-y: auto;
  color: var(--clr-menu-text);
}

/* ---------- Letter Home ---------- */

.incidents {
  margin: 1rem;
}

.letter_home_card:hover,
.letter_home_events:hover {
  box-shadow: 0 6px 15px var(--box-shadow-variable-3);
  transition: var(--tran-02);
  transform: translateY(-2px);
}

.header_card_value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.header_card_value h3 {
  display: inline-block;
  background: var(--clr-button);
  border: none;
  border-radius: 10px;
  padding: 0.5rem;
  color: var(--clr-filled-bt-text);
}

.value {
  font-size: var(--fs-xl);
  font-weight: 600;
}

.header_legend {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.recent_activity_letter_home {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.repo_header_name {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.repo_header_name h2 {
  color: var(--clr-menu-text);
  font-size: var(--fs-md);
}

.download_report {
  display: flex;
  justify-content: flex-end;
}

.download_report button {
  width: auto;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--clr-box-border);
  font-size: var(--fs-base);
  text-decoration: none;
  text-align: center;
  background: var(--gradient-accent);
  background-size: 170% 100%;
  color: var(--clr-white-txt);
  cursor: pointer;
}

.letter_home_dropdown {
  width: 7rem;
  padding: 0.25rem 0.5rem;
  background: var(--clr-background);
  color: var(--clr-menu-text);
  border-radius: 10px;
  border: 1px solid var(--clr-box-border);
}

.status {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 10px;
  font-size: var(--fs-sm);
}

.letter_home_events {
  background: var(--clr-menubar);
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px var(--clr-black-a30);
}

@media (max-width: 800px) {
  .letter_home_graph_div,
  .letter_home_header_div,
  .incidents {
    grid-column: span 1;
  }
}

@media (max-width: 750px) {
  .recent_activity_letter_home {
    flex-direction: column;
  }

  .letter_home_dropdown {
    width: 5rem;
    padding: 0.25rem;
    border-radius: 8px;
    border: 1px solid var(--clr-menu-text);
    font-size: var(--fs-xs);
  }
}

/* ---------- Dormant Button ---------- */

.dormant {
  background-color: var(--clr-constant-menutext) !important;
  pointer-events: none;
}

/* ---------- Letter repo ---------- */

.calender_filter {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
}

.select_date {
  width: 8rem !important;
}

.sub_search .material-symbols-outlined.cl {
  position: absolute;
  right: 0.25rem;
  transform: translateY(12%);
  font-size: 1.75rem;
  color: var(--clr-menu-text);
  cursor: pointer;
  pointer-events: auto;
}

/* ---------- Pagination ---------- */

.pagination {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  font-size: 0.85;
  color: var(--clr-menu-text);
}

.pagination .current {
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--clr-menu-text);
}

.page {
  display: flex;
  background-color: var(--clr-button);
  border: none;
  border-radius: 50%;
  justify-content: center;
  color: var(--clr-filled-bt-text);
  font-size: var(--fs-lg);
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 500px) {
  .select_date {
    width: 7rem !important;
  }
}

/* ---------- Create Event ---------- */

.create_event-pop_up.active {
  position: fixed;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(650px, 50vw, 100vw);
  height: 90vh;
  background: var(--clr-menubar);
  padding: 1.5rem;
  border: 2px solid var(--clr-border-muted);
  border-radius: 2rem;
  z-index: 2000;
  overflow: hidden;
  margin-top: 0rem;
  display: flex;
  flex-direction: column;
}

.create_event {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: var(--clr-menu-text);
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}

.create_event_header {
  display: flex;
  justify-content: flex-start;
  color: var(--clr-menu-text);
  margin-bottom: 0.5rem;
}

.create_event_form_body {
  overflow: hidden;
  flex-grow: 1;
}

.create_event_body_header {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-bottom: 0.5rem;
  gap: 1rem;
  background-color: var(--clr-calender-background);
  border-radius: 5px;
  padding: 0.5rem;
  color: var(--clr-menu-text);
}

.create_event_name {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--clr-menu-text);
}

.create_event_name p,
.event_contct_person p {
  font-size: var(--fs-base);
  font-weight: 600;
}

.create_event_name input,
.create_event_name select {
  font-size: var(--fs-sm);
  color: var(--clr-menu-text);
  padding: 0.5rem;
  width: 100%;
  background-color: transparent;
  border: 0.5px solid var(--clr-menu-text);
  border-radius: 5px;
}

.create_event_date_selection {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
}

.set_event_date {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;
  background-color: var(--clr-calender-background);
  border-radius: 5px;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

.set_event_date.invalid {
  border: 2px solid tomato;
}

.set_event_date p {
  font-size: var(--fs-base);
  font-weight: 600;
}

.set_event_calendar_input {
  position: relative;
  display: flex;
  flex-direction: row;
}

.set_event_calendar_input input {
  background-color: transparent;
  border: 0.5px solid var(--clr-menu-text);
  border-radius: 5px;
  padding: 0.5rem;
  width: 100%;
  color: var(--clr-menu-text);
}

.set_event_calendar_input .material-symbols-outlined.cl {
  position: absolute;
  right: 0.25rem;
  transform: translateY(12%);
  font-size: 1.75rem;
  color: var(--clr-menu-text);
  cursor: pointer;
  pointer-events: auto;
}

.create_event_dropdown {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 0.25rem;
}

.create_event_dropdown select {
  background-color: transparent;
  padding: 0.5rem;
  color: var(--clr-menu-text);
  font-size: var(--fs-sm);
  width: 100%;
  border-radius: 5px;
  border: 0.5px solid var(--clr-menu-text);
}

.event_contct_person {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;
  justify-content: space-between;
  background-color: var(--clr-calender-background);
  border-radius: 5px;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

.create_event_contact_details {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
}

.create_contact_person_name {
  width: 100%;
}

.create_contact_person_name input {
  font-size: var(--fs-sm);
  color: var(--clr-menu-text);
  padding: 0.5rem;
  width: 100%;
  background-color: transparent;
  border: 0.5px solid var(--clr-menu-text);
  border-radius: 5px;
}

.event_location_mapping {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
}

.create_event_constituency,
.create_event_urban_rural {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;
  background-color: var(--clr-calender-background);
  border-radius: 5px;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

.create_event_constituency_input {
  font-size: var(--fs-base);
}

.create_event_constituency p,
.create_event_urban_rural p {
  font-size: var(--fs-base);
  font-weight: 600;
}

.create_event_urban_rural select {
  font-size: var(--fs-sm);
  color: var(--clr-menu-text);
  padding: 0.5rem;
  width: 100%;
  background-color: transparent;
  border: 0.5px solid var(--clr-menu-text);
  border-radius: 5px;
}

.create_event_location {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;
  background-color: var(--clr-calender-background);
  border-radius: 5px;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

.create_event_location p {
  font-size: var(--fs-base);
  font-weight: 600;
}

.create_event_location_details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.create_event_location_details input,
.create_event_location input {
  font-size: var(--fs-sm);
  color: var(--clr-menu-text);
  padding: 0.5rem;
  width: 100%;
  background-color: transparent;
  border: 0.5px solid var(--clr-menu-text);
  border-radius: 5px;
}

.create_event_tag_and_file {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.create_event_upload_file {
  align-items: center;
  padding-right: 1rem;
  font-family: var(--font-main);
  width: 100%;
  background-color: var(--clr-calender-background);
  border-radius: 5px;
  padding: 0.5rem;
  gap: 0.5rem;
}

.create_event_upload_file label {
  font-size: var(--fs-base);
  font-weight: 600;
}

.create_event_tag {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--clr-calender-background);
  border-radius: 5px;
  padding: 0.5rem;
  gap: 0.5rem;
}

.create_event_tag label {
  font-size: var(--fs-base);
  font-weight: 600;
}

.create_event_tag input {
  font-size: var(--fs-sm);
  color: var(--clr-menu-text);
  padding: 0.5rem;
  width: 100%;
  background-color: transparent;
  border: 0.5px solid var(--clr-menu-text);
  border-radius: 5px;
}

.create_event_desc {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--clr-calender-background);
  border-radius: 5px;
  padding: 0.5rem;
  gap: 0.5rem;
}

.create_event_desc textarea {
  display: flex;
  align-items: flex-start;
  border-radius: 5px;
  background-color: transparent;
  border: 0.5px solid var(--clr-menu-text);
  color: var(--clr-menu-text);
  width: 100%;
  padding: 0.5rem 0.5rem;
}

.create_event_desc label {
  font-size: var(--fs-base);
  font-weight: 600;
}

.create_event_form_action {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.create_event_cancel_btn {
  width: 100%;
  background-color: var(--clr-button);
  color: var(--clr-white-txt);
  padding: 0.8rem 1.5rem;
  font-size: var(--fs-base);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
}

.create_event_cancel_btn:hover {
  background-color: tomato !important;
  transition: var(--tran-03);
}

.create_event_submit_btn {
  width: 100%;
  background: var(--gradient-accent);
  background-size: 170% 100%;
  color: var(--clr-white-txt);
  padding: 0.8rem 1.5rem;
  font-size: var(--fs-base);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
}

.create_event_submit_btn:hover {
  transition: var(--tran-03);
}

@media (max-width: 650px) {
  .create_event_date_selection {
    flex-direction: column;
  }

  .create_event_tag_and_file {
    flex-direction: column;
  }

  .create_event-pop_up.active {
    top: 5%;
    left: none;
    transform: translateX(-50%);
    width: 90vw;
    height: 85vh;
    background: var(--clr-menubar);
    padding: 1rem;
    overflow: hidden;
  }
}

/* ---------- Event Details Page ---------- */

.pre_event_details,
.post_event_details {
  width: 99%;
  background-color: var(--clr-menubar);
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 2px 10px var(--clr-black-a20);
  margin: 0.5rem;
  border: 1px solid var(--clr-button);
}

.pre_event_details:hover,
.post_event_details:hover {
  box-shadow: 0 6px 15px var(--box-shadow-variable-3);
  transition: var(--tran-02);
}

.pre_event_details_header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid var(--clr-menu-text);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  align-items: center;
}

.pre_event_details_header h2,
.post_event_details_header h2 {
  margin-top: 0;
  color: var(--clr-menu-text);
}

.pre_event_details_header p {
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--clr-menu-text);
}

.pre_event_details_body_details {
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
}

.pre_event_details_body_details label {
  margin-bottom: 0.25rem;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--clr-menu-text);
}

.event_time_date_details {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 1rem;
  padding-left: 1rem;
}

.event_time_details .show_event_time {
  width: 100%;
  border-radius: 0.5rem;
  padding: 0.5rem;
  font-size: var(--fs-base);
  justify-content: flex-end;
  color: var(--clr-menu-text);
  border: 1px solid var(--clr-menu-text);
  background: var(--clr-background);
  transition: var(--tran-02);
}

.pre_event_details_body_details input {
  width: 100%;
  border-radius: 0.5rem;
  padding: 0.5rem;
  font-size: var(--fs-base);
  justify-content: flex-end;
  color: var(--clr-menu-text);
  border: 1px solid var(--clr-menu-text);
  background: var(--clr-background);
  transition: var(--tran-02);
}

.event_contact_person {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: flex-start;
  margin-bottom: 0.5rem;
}

.event_contact_person_body {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  padding-left: 1rem;
}

.pre_event_contact_details_body_details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.event_contact_person .pre_event_contact_details_body_details label,
.pre_event_details_body_details_address_venue label {
  margin-bottom: 0.25rem;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--clr-menu-text);
}

.event_contact_person .pre_event_contact_details_body_details input,
.pre_event_details_body_details_address_venue input {
  width: 100%;
  border-radius: 0.5rem;
  padding: 0.5rem;
  font-size: var(--fs-base);
  justify-content: flex-end;
  color: var(--clr-menu-text);
  border: 1px solid var(--clr-menu-text);
  background: var(--clr-background);
  transition: var(--tran-02);
}

.pre_event_details_body_details_address_header h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--clr-menu-text);
  margin: 0.5rem 0;
}

.pre_event_details_body_details_address {
  display: flex;
  flex-direction: column;
}

.event_address {
  display: flex;
  flex-wrap: wrap;
  margin: 0.5rem 0;
  gap: 1rem;
  padding-left: 1rem;
}

.event_address_body_details {
  display: flex;
  flex-direction: column;
}

.event_address_body_details label {
  margin-bottom: 0.25rem;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--clr-menu-text);
}

.event_address_body_details input {
  width: 100%;
  border-radius: 0.5rem;
  padding: 0.5rem;
  font-size: var(--fs-base);
  justify-content: flex-end;
  color: var(--clr-menu-text);
  border: 1px solid var(--clr-menu-text);
  background: var(--clr-background);
  transition: var(--tran-02);
}

.pre_event_details_body_details textarea {
  width: 95%;
  margin: 0 1rem;
  padding: 0.5rem;
  border: 1px solid var(--clr-menu-text);
  border-radius: 5px;
  font-size: var(--fs-base);
  background: var(--clr-background);
  height: 5rem;
  resize: none;
  overflow-y: auto;
  color: var(--clr-menu-text);
}

.pre_event_gallery_section {
  width: 100%;
  height: auto;
  background: var(--clr-menubar);
  border-radius: 0.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, max-content));
  gap: auto;
  padding: 0.5rem 0;
  justify-content: flex-start;
  overflow: auto;
  scrollbar-width: none;
}

.pre_event_image_file {
  padding-left: 1rem;
}

.pre_event_image_file h2 {
  font-size: var(--fs-base);
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: var(--clr-menu-text);
  text-decoration: underline;
}

.pre_event_photo_gallery {
  padding: 0.1rem;
}

.pre_event_images {
  position: relative;
  width: 10rem;
  height: 15rem;
  border-radius: 0.5rem;
  border: 1px solid var(--clr-menu-text);
  cursor: pointer;
  transition: var(--tran-03);
  display: inline-block;
  overflow: hidden;
}

.pre_event_actions {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.pre_event_images:hover {
  box-shadow: 0 0 0.75rem var(--clr-hover-shadow);
}

.pre_event_images:hover .pre_event_actions {
  opacity: 1;
}

.pre_event_images a {
  text-decoration: none;
}

.pre_event_images:hover a {
  text-decoration: none;
}

.event_btn-letterhead {
  background: var(--gradient-accent);
  background-size: 170% 100%;
  border: none;
  padding: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event_btn-letterhead:hover {
  background: var(--clr-level-btn);
}

.material-symbols-outlined.dlh {
  color: var(--clr-white-txt);
  font-size: var(--fs-xl);
  font-weight: 600;
}

.material-symbols-outlined.dlh:hover {
  color: #19191a;
}

.pre_event_images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}

.pre_event_document_section {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 1rem;
  font-size: var(--fs-base);
  color: var(--clr-menu-text);
  padding-left: 1rem;
}

.pre_event_document_section a {
  text-decoration: none;
  color: var(--clr-menu-text);
}

.sl_document_event {
  width: clamp(50px, 5vw, 60px);
  text-align: center;
}

.document_name_event {
  width: clamp(100px, 70vw, 100vw);
  text-align: Left;
  color: var(--clr-menu-text);
  text-decoration: none;
}

.event_document_action {
  width: clamp(30px, 5vw, 50px);
  text-align: center;
}

/* ---------- Admin Panel ---------- */

.tile:hover,
.small_tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px var(--box-shadow-variable-3);
}

.small_tile {
  width: 8rem;
  height: 2rem;
  display: flex;
  flex-direction: row;
  background: var(--clr-background);
  border-radius: 5px;
  box-shadow: 2px 4px 8px var(--clr-overlay);
  transition: all 0.3s ease;
  align-items: center;
  justify-content: space-between;
  color: var(--clr-menu-text);
  overflow: hidden;
  border: 1px solid var(--clr-menu-text);
}

.small_tile-content,
.small_tile-admin-icon {
  display: flex;
  align-items: center;
  height: 100%;
}

.small_tile-content h3 {
  padding: 0.5rem;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--clr-menu-text);
  margin: 0;
}

.small_tile-content a {
  text-decoration: none;
}

.small_tile-admin-icon {
  display: flex;
  width: clamp(20px, 30%, 30px);
  background: var(--clr-button);
  justify-content: center;
}

.small_tile-admin-icon.created {
  background: var(--clr-hover-btn);
}

.small_tile-admin-icon span {
  font-size: var(--fs-md);
  font-weight: 500;
  vertical-align: middle;
  line-height: 1;
  color: var(--clr-filled-bt-text);
}

.no_event {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(50%);
}

/* ---------- Visitor Book ---------- */

.calender_filter_button button {
  background: var(--gradient-accent);
  background-size: 170% 100%;
  color: var(--clr-filled-bt-text);
  padding: 0.5rem;
  border: 1px solid var(--clr-menu-text);
  border-radius: 5px;
  cursor: pointer;
}

.visitor_letter_wrapper,
.edit_visitor_input,
.delete_visitor_input {
  flex: 1;
}

.visitor_letter_button,
.edit_visitor_input,
.delete_visitor_input {
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}

.delete_visitor_input:hover {
  background: tomato;
  transition: var(--tran-02);
}

.add_visitor_visit_type {
  display: flex;
  flex-direction: column;
}

.visttype_select,
.visttype_select_other {
  gap: 0.5rem;
}

.visttype_select p,
.visttype_select_other p {
  font-size: var(--fs-base);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.visttype_select_other input,
.create_event_name select {
  font-size: var(--fs-sm);
  color: var(--clr-menu-text);
  padding: 0.5rem;
  width: 100%;
  background-color: transparent;
  border: 0.5px solid var(--clr-menu-text);
  border-radius: 5px;
}

.sub_search input {
  width: 12rem;
  border-radius: 0.5rem;
  padding: 0.5rem 2.25rem 0.5rem 1rem;
  font-size: var(--fs-base);
  justify-content: flex-end;
  color: var(--clr-menu-text);
  border: 1px solid var(--clr-box-border);
  background: var(--clr-background);
  transition: var(--tran-02);
}

.label-upload {
  color: var(--clr-menu-text);
}

/* ---------- Grievance Management ---------- */

.recent_activity_letter_home h2 {
  font-size: var(--fs-md);
  font-weight: 700;
}

@media (max-width: 900px) {
  .letter_home_events {
    width: 100%;
  }

  .recent_activity_letter_home {
    width: 100%;
  }
}

.grievance_media_upload {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5rem;
  margin: 0.5rem 0;
}

/* ---------- Add Application ---------- */

.grievance_brief_detail {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 0.5rem;
}

.create_event_desc input {
  background: var(--clr-calender-background);
  border: 0.5px solid var(--clr-menu-text);
  border-radius: 5px;
  padding: 0.5rem;
  font-size: var(--fs-sm);
  color: var(--clr-menu-text);
}

/* ---------- Grievance Details ---------- */

@media (max-width: 650px) {
  .small_tile {
    width: 6rem;
  }
}

.data_header_cell {
  position: relative;
  border: 1px solid var(--clr-menu-text);
  padding: 0.25rem 1.25rem 0.25rem 0.25rem;
  background: var(--clr-menubar);
  transition: var(--tran-03);
  background-color: var(--clr-button);
}

.data_header_cell span {
  position: absolute;
  right: 0;
  vertical-align: center;
  top: 50%;
  transform: translate(0%, -50%);
}

.data_header_cell span.hide {
  display: none;
}

.add_button_cell {
  position: relative;
}

.add_button_cell span {
  position: absolute;
  right: 0;
  vertical-align: center;
  top: 50%;
  transform: translate(100%, -50%);
  color: var(--clr-menu-text);
  cursor: pointer;
}

.data_header_cell span.cut_key {
  color: tomato;
}

.add_button_cell span:hover {
  color: var(--clr-hover-btn);
  transition: var(--tran-03);
}

.grievance_data_header_row input {
  background: var(--clr-menubar);
  border: none;
  padding: 0.25rem;
  font-weight: 400;
  font-size: var(--fs-sm);
  transition: var(--tran-03);
  background-color: var(--clr-button);
  color: var(--clr-filled-bt-text);
}

.grievance_data_header_row input::placeholder {
  color: #B4c5e4;
  opacity: 1;
}

.profile_display_pic {
  display: flex;
  width: 35vw;
  height: 35vw;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: none;
  align-items: center;
  justify-content: center;
  background: var(--clr-white);
  border: 2px solid var(--clr-button);
}

.profile_display_pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 600px) {
  .profile_display_pic {
    width: 50vw;
    height: 50vw;
  }
}

.dept_data_table {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
}

.dept_data_table td .dept_data_table th {
  background-color: var(--clr-button);
  color: var(--clr-filled-bt-text);
  padding: 0.15rem;
  text-align: left;
  border: 1px solid #ddd;
  min-width: 50px;
  max-width: 250px;
  white-space: nowrap;
  box-sizing: border-box;
}

.dept_data_table th input {
  background-color: var(--clr-button);
  color: var(--clr-filled-bt-text);
  border-radius: 0;
  font-size: 0.7rem;
  font-weight: 600;
}

.dept_data_table td {
  text-align: left;
  border: 1px solid #ddd;
  min-width: 50px;
  max-width: 250px;
  box-sizing: border-box;
  padding: 0 0.25rem;
}

.dept_data_table.editing td,
.dept_data_table.editing th {
  border: 1px solid var(--urgency-serious-border);
}

.dept_data_table td input {
  width: 100%;
  padding: 0.25rem;
  background-color: var(--clr-background);
  color: var(--clr-menu-text);
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 0.7rem;
  transition: var(--tran-03);
}

.grievance_category_admin_data_management {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.create_grievance_category {
  display: none;
}

.create_grievance_category.selected {
  display: block;
  border: 1px solid var(--clr-menu-text);
  padding: 0.5rem;
}

.table_search {
  position: relative;
  display: flex;
}

.table_search input {
  opacity: 0;
  width: 12rem;
  border-radius: 0.5rem;
  padding: 0.5rem 2.25rem 0.5rem 1rem;
  font-size: var(--fs-base);
  justify-content: flex-end;
  color: var(--clr-menu-text);
  border: 1px solid var(--clr-box-border);
  background: var(--clr-background);
  transition: opacity 0.3s ease, max-width 0.3s ease, padding 0.3s ease;
}

.table_search.visible input {
  opacity: 1;
}

.table_search .material-symbols-outlined.ls {
  position: absolute;
  transform: translateY(12%);
  left: 0rem;
  font-size: var(--fs-2xl);
  color: var(--clr-menu-text);
  cursor: pointer;
  pointer-events: auto;
  transition: left 0.3s ease, right 0.3s ease;
}

.table_search.visible .material-symbols-outlined.ls {
  right: 0.25rem;
  left: auto;
}

@media (max-width: 500px) {
  .table_search input {
    width: 10rem;
  }
}

/* ---------- Shared UI components (reference design: create-letter page) ----------
   Buttons, icon buttons, cards with step headers, form fields, segmented controls,
   checkboxes, chips, status pills, empty states and the loading spinner. */

/* ---------- Cards ---------- */

.ui-card {
  background: var(--clr-tile-background);
  border: 1px solid var(--clr-chrome-border);
  border-radius: 0.875rem;
  box-shadow: 0 1px 3px var(--clr-black-a10);
}

.ui-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.125rem;
}

.ui-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.ui-card-header h3 {
  color: var(--clr--title);
  font-size: var(--fs-md);
  font-weight: 600;
}

.ui-card-header p {
  margin-top: 0.125rem;
  color: var(--clr-menu-text);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.ui-step {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--clr-btn-secondary-text);
  font-size: var(--fs-sm);
  font-weight: 700;
  background: var(--clr-btn-secondary-bg);
  border-radius: 50%;
}

.ui-hint {
  color: var(--clr-placeholder);
  font-size: var(--fs-sm);
}

/* ---------- Form fields ---------- */

.ui-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
  border: none;
}

.ui-field[hidden] {
  display: none;
}

.ui-field > label,
.ui-field > legend {
  color: var(--clr--title);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.ui-field > legend {
  margin-bottom: 0.375rem;
}

.ui-field input[type=text],
.ui-field input[type=tel],
.ui-field input[type=email],
.ui-field input[type=password],
.ui-field input[type=search],
.ui-field input[type=number],
.ui-field select,
.ui-field textarea {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--clr--title);
  font-size: var(--fs-base);
  background: var(--clr-background);
  border: 1px solid var(--clr-chrome-border);
  border-radius: 0.5rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ui-field textarea {
  resize: vertical;
  line-height: 1.5;
}

.ui-field select[multiple] {
  min-height: 6rem;
}

.ui-field input:focus,
.ui-field select:focus,
.ui-field textarea:focus {
  border-color: var(--clr-button);
  box-shadow: 0 0 0 3px var(--shadow-active);
}

.ui-field input:user-invalid,
.ui-field select:user-invalid,
.ui-field textarea:user-invalid {
  border-color: var(--clr-danger);
}

/* Radio / checkbox answers as chips */

.ui-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ui-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ui-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 2.125rem;
  padding: 0.25rem 0.875rem;
  color: var(--clr-menu-text);
  font-size: var(--fs-sm);
  border: 1px solid var(--clr-chrome-border);
  border-radius: 1rem;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.ui-chip span:hover {
  background: var(--clr-chrome-hover);
}

.ui-chip input:checked + span {
  color: var(--clr-white);
  background: var(--gradient-accent);
  background-size: 170% 100%;
  border-color: var(--clr-button);
}

.ui-chip input:focus-visible + span {
  box-shadow: 0 0 0 3px var(--shadow-active);
}

/* Segmented control (content source, format) */

.ui-segmented {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--clr-background);
  border: 1px solid var(--clr-chrome-border);
  border-radius: 0.625rem;
}

.ui-segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ui-segmented a {
  color: inherit;
  text-decoration: none;
}

.ui-segmented label > span,
.ui-segmented a > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  color: var(--clr-menu-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.ui-segmented .material-symbols-outlined {
  font-size: 1.125rem;
}

.ui-segmented label > span:hover,
.ui-segmented a > span:hover {
  color: var(--clr--title);
}

.ui-segmented input:checked + span,
.ui-segmented a[aria-current] > span {
  color: var(--clr-white);
  background: var(--gradient-accent);
  box-shadow: 0 2px 10px var(--clr-accent-glow);
}

.ui-segmented input:focus-visible + span,
.ui-segmented a:focus-visible > span {
  outline: 2px solid var(--clr-button);
  outline-offset: 2px;
}

/* ---------- Step 1: no letterheads yet ---------- */

.ui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 1.5rem 0.5rem;
  color: var(--clr-menu-text);
  font-size: var(--fs-sm);
  text-align: center;
}

.ui-empty .material-symbols-outlined {
  font-size: 2rem;
}

.ui-empty a {
  color: var(--clr-button);
  font-weight: 500;
}

/* ---------- Buttons ---------- */

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2.5rem;
  padding: 0 1rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 0.625rem;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.ui-btn .material-symbols-outlined {
  font-size: 1.125rem;
}

.ui-btn-primary {
  color: var(--clr-white);
  background: var(--gradient-accent);
  background-position: 0% 50%;
  background-size: 170% 100%;
  box-shadow: 0 2px 10px var(--clr-accent-glow);
  transition: background-position 0.45s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.ui-btn-primary:hover:not(:disabled) {
  background-position: 100% 50%;
  box-shadow: 0 6px 20px var(--clr-accent-glow);
}

.ui-btn-secondary {
  color: var(--clr-btn-secondary-text);
  background: var(--clr-btn-secondary-bg);
  border-color: var(--clr-btn-secondary-border);
}

.ui-btn-secondary:hover:not(:disabled) {
  border-color: var(--clr-btn-secondary-hover);
}

.ui-btn-ghost {
  color: var(--clr-menu-text);
  background: transparent;
  border-color: var(--clr-chrome-border);
}

.ui-btn-ghost:hover:not(:disabled),
.ui-btn-ghost[aria-pressed=true] {
  color: var(--clr--title);
  background: var(--clr-chrome-hover);
}

.ui-btn-ghost[aria-pressed=true] {
  border-color: var(--clr-button);
}

.ui-btn:focus-visible {
  outline: 2px solid var(--clr-button);
  outline-offset: 2px;
}

.ui-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ui-btn.is-busy {
  cursor: progress;
}

.ui-spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ui-spin 0.7s linear infinite;
}

@keyframes ui-spin {
  to {
    transform: rotate(360deg);
  }
}

.ui-status {
  padding: 0.125rem 0.625rem;
  color: var(--clr-menu-text);
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--clr-background);
  border: 1px solid var(--clr-chrome-border);
  border-radius: 1rem;
}

.ui-status[data-state=ready] {
  color: var(--clr-success-text);
  background: var(--clr-success-bg);
  border-color: var(--clr-success-border);
}

.ui-status[data-state=ai] {
  color: var(--clr-button);
  background: var(--clr-chrome-hover);
  border-color: transparent;
}

.ui-status[data-state=error] {
  color: var(--clr-danger);
  background: transparent;
  border-color: var(--clr-danger);
}

.ui-icon-btn:focus-visible {
  outline: 2px solid var(--clr-button);
  outline-offset: 1px;
}

.ui-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--clr-menu-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.ui-icon-btn:hover:not(:disabled) {
  color: var(--clr--title);
  background: var(--clr-chrome-hover);
}

.ui-icon-btn:disabled {
  cursor: default;
  opacity: 0.35;
}

.ui-icon-btn .material-symbols-outlined {
  font-size: 1.25rem;
  transition: transform 0.25s ease;
}

.ui-segmented-sm {
  padding: 0.125rem;
}

.ui-segmented-sm label > span {
  height: 1.875rem;
  padding: 0 0.625rem;
  font-size: var(--fs-xs);
}

.ui-toggles {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 2.125rem;
}

.ui-check {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--clr--title);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.ui-check input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--clr-button);
}

.ui-btn-sm {
  height: 2.125rem;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
}

.ui-btn-danger {
  color: var(--clr-danger);
  background: transparent;
  border-color: var(--clr-chrome-border);
}

.ui-btn-danger:hover:not(:disabled) {
  border-color: var(--clr-danger);
}

/* Small gradient label above a page title */
.ui-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ui-eyebrow .material-symbols-outlined {
  font-size: 0.95rem;
  color: var(--clr-accent-2);
}

/* Summary tiles under a page header: <div class="ui-stats"><article class="ui-stat" data-tone="email|whatsapp|accent">
   <span class="ui-stat-icon material-symbols-outlined">…</span><div><strong>12</strong><span>Label</span></div></article></div> */
.ui-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.ui-stat {
  --stat-color: var(--clr-chart-letter);
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
  padding: 1rem 1.125rem;
  background: var(--clr-tile-background);
  border: 1px solid var(--clr-chrome-border);
  border-radius: 0.875rem;
  box-shadow: 0 1px 3px var(--clr-black-a10);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.ui-stat[data-tone=email] { --stat-color: var(--clr-chart-email); }
.ui-stat[data-tone=whatsapp] { --stat-color: var(--clr-chart-whatsapp); }
.ui-stat[data-tone=accent] { --stat-color: var(--clr-accent-4); }

.ui-stat:hover {
  border-color: var(--stat-color);
  transform: translateY(-2px);
}

/* two classes: the icon font's own rule would otherwise override these */
.ui-stat .ui-stat-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--stat-color);
  font-size: 1.25rem;
  background: var(--clr-accent-soft);
  border-radius: 0.625rem;
}

.ui-stat > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ui-stat strong {
  color: var(--clr--title);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.ui-stat > div > span {
  color: var(--clr-menu-text);
  font-size: var(--fs-sm);
}

@media (max-width: 1280px) {
  .ui-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .ui-stats {
    gap: 0.75rem;
  }

  .ui-stat {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-stat,
  .ui-stat:hover {
    transition: none;
    transform: none;
  }
}

/* Search box with an icon (filters a list with HTMX) */
.ui-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: min(100%, 20rem);
  height: 2.5rem;
  padding: 0 0.75rem;
  color: var(--clr-menu-text);
  background: var(--clr-background);
  border: 1px solid var(--clr-chrome-border);
  border-radius: 0.625rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ui-search:focus-within {
  border-color: var(--clr-accent-2);
  box-shadow: 0 0 0 3px var(--clr-accent-soft);
}

.ui-search .material-symbols-outlined {
  font-size: 1.125rem;
}

.ui-search input {
  flex: 1;
  min-width: 0;
  color: var(--clr--title);
  font-size: var(--fs-sm);
  background: transparent;
  border: 0;
  outline: none;
}

.ui-search input::placeholder {
  color: var(--clr-placeholder);
}

/* Page header: title, one-line description, main action on the right */

.ui-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.ui-page-header h2 {
  color: var(--clr--title);
  font-size: var(--fs-xl);
  font-weight: 600;
}

.ui-page-header p {
  margin-top: 0.25rem;
  color: var(--clr-menu-text);
  font-size: var(--fs-base);
}