/*
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
*/

@font-face {
    font-family: 'Charlie Display';
    src: url('../fonts/CharlieDisplay-Black.eot');
    src: url('../fonts/CharlieDisplay-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CharlieDisplay-Black.woff2') format('woff2'),
        url('../fonts/CharlieDisplay-Black.woff') format('woff'),
        url('../fonts/CharlieDisplay-Black.ttf') format('truetype'),
        url('../fonts/CharlieDisplay-Black.svg#CharlieDisplay-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Charlie Display';
    src: url('../fonts/CharlieDisplay-Bold.eot');
    src: url('../fonts/CharlieDisplay-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CharlieDisplay-Bold.woff2') format('woff2'),
        url('../fonts/CharlieDisplay-Bold.woff') format('woff'),
        url('../fonts/CharlieDisplay-Bold.ttf') format('truetype'),
        url('../fonts/CharlieDisplay-Bold.svg#CharlieDisplay-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Charlie Display';
    src: url('../fonts/CharlieDisplay-Italic.eot');
    src: url('../fonts/CharlieDisplay-Italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CharlieDisplay-Italic.woff2') format('woff2'),
        url('../fonts/CharlieDisplay-Italic.woff') format('woff'),
        url('../fonts/CharlieDisplay-Italic.ttf') format('truetype'),
        url('../fonts/CharlieDisplay-Italic.svg#CharlieDisplay-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Charlie Display';
    src: url('../fonts/CharlieDisplay-Light.eot');
    src: url('../fonts/CharlieDisplay-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CharlieDisplay-Light.woff2') format('woff2'),
        url('../fonts/CharlieDisplay-Light.woff') format('woff'),
        url('../fonts/CharlieDisplay-Light.ttf') format('truetype'),
        url('../fonts/CharlieDisplay-Light.svg#CharlieDisplay-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


:root {
  /* Primary Theme Colors - Easy to customize */
  /* New palette (from your chosen image) */
  --p-1: #7c5cff; /* accent - royal purple */
  --p-2: #a899ff; /* accent light */
  --p-3: #6752d9; /* deep indigo (dark) */
  --p-4: #2a3a6f; /* muted deep blue (light) */
  --p-5: #6148ff; /* secondary accent */
  --p-6: #0b1020; /* deep background */
  --p-7: #172033; /* surface / card shade */

  /* Primary Theme Colors - mapped to the deep palette */
  --color-primary: rgb(121, 97, 245); /* main deep indigo */
  --color-primary-dark: var(--p-3); /* darkest indigo */
  --color-primary-light: var(--p-4); /* lighter indigo for gradients */
  --color-accent: var(--p-1); /* purple accent */
  --color-accent-light: var(--p-2);

  /* Neutral Colors */
  --color-secondary: var(--p-4);
  --color-background: #f6f6fb;
  --color-text: #e6eef3; /* light text for contrast */
  --color-text-muted: #98a1b2;
  --color-border: #162033;
  --color-success: #16a34a;
  --color-danger: #dc3545;
  --color-warning: #ffc107;

  /* Legacy aliases for compatibility */
  --primary: var(--color-primary);
  --secondary: var(--color-secondary);
  --background: var(--color-background);
  --text: var(--color-text);

  /* Font Variables */
  /* --font-family-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif; */
  --font-family-base: "Charlie Display", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --font-size-base: 0.95rem;
  /* Typography scale (keep numeric values to avoid UI changes) */
  --font-size-h1: 1.75rem; /* used for large auth headings */
  --font-size-h2: 1.5rem; /* medium headings / mobile h1 */
  --font-size-h3: 1.35rem; /* card / section headings */
  --font-size-small: 0.8rem; /* small labels / inputs */
  --font-size-input: var(--font-size-small);
  --font-size-input-mobile: 0.9rem;
  --font-size-sm: 0.85rem; /* small meta text */
  --font-size-xs: 0.75rem; /* extra small text */
  --font-size-header: 1.1rem;
  --font-size-sidebar-title: 1rem;
  --font-size-navlink: 13px;
  --font-size-feedback: 0.875rem; /* validation / helper text */
  --line-height-base: 1.5;

  /* Spacing tokens */
  --spacing-xxs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  /* Button tokens for consistent sizing / spacing */
  --btn-height: 40px;
  --btn-min-width: 88px;
  --btn-padding-x: 16px;
  --btn-font-size: 0.95rem;
  --btn-border-radius: 0.6rem;
  --btn-icon-gap: 0.5rem;

  --bs-border-radius-sm: 0.6rem;
  /* Card shadows (extracted to avoid repeated literal values) */
  --card-shadow-sm: 0px 3px 7px -9px #000;
  --card-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
  /* Button shadows */
  --btn-shadow-sm: 0 4px 15px rgba(124, 92, 255, 0.24);
  --btn-shadow-lg: 0 6px 20px rgba(124, 92, 255, 0.34);
}

/* main content remains page flow; no forced viewport sizing */

/* Mobile behavior handled by sidebar media rules below */

/* Utility helpers for palette usage */
.bg-p-1 {
  background-color: var(--p-1) !important;
  color: var(--color-text);
}
.bg-p-2 {
  background-color: var(--p-2) !important;
  color: var(--color-text);
}
.bg-p-3 {
  background-color: var(--p-3) !important;
  color: #fff;
}
.bg-p-4 {
  background-color: var(--p-4) !important;
  color: var(--color-text);
}
.bg-p-5 {
  background-color: var(--p-5) !important;
  color: #fff;
}
.bg-p-6 {
  background-color: var(--p-6) !important;
  color: var(--color-text);
}
.bg-p-7 {
  background-color: var(--p-7) !important;
  color: var(--color-text);
}
.text-p-1 {
  color: var(--p-1) !important;
}
.text-p-2 {
  color: var(--p-2) !important;
}
.text-p-3 {
  color: var(--p-3) !important;
}
.text-p-4 {
  color: var(--p-4) !important;
}
.text-p-5 {
  color: var(--p-5) !important;
}
.text-p-6 {
  color: var(--p-6) !important;
}
.text-p-7 {
  color: var(--p-7) !important;
}

/* small helpers for borders using palette */
.border-p-3 {
  border-color: var(--p-3) !important;
}
.border-p-4 {
  border-color: var(--p-4) !important;
}
.border-p-5 {
  border-color: var(--p-5) !important;
}

/* Global form controls - remove outlines */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus {
  outline: none;
  box-shadow: none;
}

/* Optional: Add subtle border color change on focus for better UX */
.form-control:focus {
  border-color: var(--color-primary-light);
}

.form-select:focus {
  border-color: var(--color-primary-light);
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  overflow: hidden;
}

header {
  background-color: var(--color-primary-dark);
  color: var(--color-text);
  /* padding: 7px 15px; */
}

.sidebar {
  /* background-color: var(--color-primary); */
  color: var(--primary);
  padding: 1rem;
  @media screen and (max-width: 1023px) {
      position: absolute;
  }
}
app-sidebar{
    @media screen and (max-width: 1023px) {
      position: absolute;
  }
}

.sidebar a {
  color: white;
  text-decoration: none;
}

.sidebar a:hover {
  text-decoration: underline;
}

.card {
  border-radius: 0.5rem !important;
  box-shadow: none !important;
  border: 1px solid #f1f1f1 !important;
}

.table {
  border-radius: 0.5rem;
  overflow: hidden;
}

.table th,
.table td {
  padding: 1rem;
}

.btn {
  border-radius: 0.5rem;
  /* Use regular weight to avoid heavy/blurred text */
  font-weight: var(--font-weight-regular);
  /* Disable transitions to prevent blur/ghosting on hover */
  transition: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-icon-gap);
  /* height: var(--btn-height); */
  padding: 0 var(--btn-padding-x);
  /* min-width: var(--btn-min-width); */
  font-size: var(--btn-font-size);
  border-radius: var(--btn-border-radius);
}

footer {
  background-color: var(--color-primary);
  color: white;
  text-align: center;
  padding: 1rem;
  position: relative;
  bottom: 0;
  width: 100%;
  font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
  .sidebar {
    position: absolute;
    left: -250px;
    transition: left 0.3s ease;
  }

  .sidebar.active {
    left: 0;
  }
}

/* ===== LOGIN PAGE STYLES ===== */
.auth-page {
  background: linear-gradient(
    135deg,
    var(--color-background) 0%,
    var(--color-primary-light) 100%
  );
  color: var(--color-text);
  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.auth-page header,
.auth-page footer {
  background-color: transparent;
}
.card {
  border: 0;
  /* border-radius: 1rem; */
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--card-shadow-lg);
}

/* Left brand panel */
.auth-left {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  );
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}

.auth-left h3 {
  font-size: var(--font-size-h1);
  /* reduce extrabold to bold to avoid optical blurring on some displays */
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
}

.auth-left p {
  opacity: 0.92;
  line-height: var(--line-height-base);
}

/* Right form panel */
.auth-right {
  /* keep a light card for form contrast, but with subtle deep-tinted surface */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(255, 255, 255, 0.95)
  );
  padding: 2rem;
}

.auth-right h5 {
  color: var(--primary);
  font-weight: 700;
  font-size: var(--font-size-h3);
}

/* Form controls */
.form-control {
  border-radius: var(--bs-border-radius-sm);
  border: 1px solid #efefef;
  padding: 0.65rem 0.95rem;
  font-size: var(--font-size-input);
  transition: all 0.3s ease;
  height: var(--btn-height);
}
textarea {
  height: auto !important;
}
/* consolidated .form-control:focus rules above; page-specific overrides remain where needed */

.form-control.is-invalid:focus {
  border-color: var(--color-danger);
  box-shadow: none;
  outline: none;
}

.was-validated .form-control:invalid {
  border-color: var(--color-danger);
}

.was-validated .form-control:invalid:focus {
  border-color: var(--color-danger);
  box-shadow: none;
  outline: none;
}

.form-label {
  color: #000000;
  /* prefer medium weight to avoid subtle blur on small labels */
  font-weight: var(--font-weight-medium);
  /* margin-bottom: 0.5rem; */
  font-size: var(--font-size-small);
}

/* Primary button */
.btn-primary {
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-primary-dark)
  );
  border: none;
  /* reuse tokens to remain consistent */
  height: var(--btn-height);
  padding: 0 var(--btn-padding-x);
  font-weight: var(--font-weight-regular);
  box-shadow: var(--btn-shadow-sm);
  transition: none !important;
  color: #fff;
}

.btn-primary:hover {
  /* avoid shifting that can cause blur */
  transform: none;
  box-shadow: var(--btn-shadow-lg);
}

.btn-primary:active {
  transform: none;
}

/* Secondary / Light buttons */
.btn-light {
  border-radius: var(--btn-border-radius);
  border: 1px solid var(--color-border);
  height: var(--btn-height);
  padding: 0 var(--btn-padding-x);
  font-weight: var(--font-weight-regular);
  transition: none !important;
  background: transparent;
  /* color: var(--color-text); */
}

.btn-light:hover {
  background: var(--color-background);
  border-color: var(--color-primary);
  /* color: #efefef */
}

/* Outline button */
.btn-outline-light {
  border-radius: var(--btn-border-radius);
  border: 2px solid rgba(255, 255, 255, 0.6);
  height: var(--btn-height);
  padding: 0 var(--btn-padding-x);
  font-weight: var(--font-weight-regular);
  transition: none !important;
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}
 
/* Input group */
.input-group .btn-outline-secondary {
  border-radius: 0 0.6rem 0.6rem 0;
  border-left: 0;
  border-color: #efefef;
  color: var(--color-primary);
  height: var(--btn-height);
  padding: 0 var(--btn-padding-x);
  transition: none !important;
}

.input-group .btn-outline-secondary:hover {
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: var(--font-size-feedback);
  color: #dc3545;
}

.was-validated .form-control:invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback {
  display: block;
}

.form-control.is-invalid {
  border-color: #dc3545;
}

.mb-3 .form-control.is-invalid ~ .invalid-feedback,
.mb-3 .form-control.is-invalid + .invalid-feedback,
.mb-3 .input-group .form-control.is-invalid ~ .invalid-feedback,
.mb-3 .input-group ~ .invalid-feedback {
  display: block !important;
}

/* Form text / helper text */
.form-text {
  font-size: 0.75rem;
  margin-top: 0.3rem;
}

.link-secondary {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.link-secondary:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Checkbox */
.form-check-input, .mdc-checkbox__background {
  border-radius: 0.3rem;
  border: 1px solid var(--bs-border-color) !important;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
}

.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-check-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(157, 94, 223, 0.2);
}

/* Bootstrap-like checkboxes for tables (Material checkboxes) */
.mat-checkbox .mat-checkbox-frame,
.mat-mdc-checkbox .mdc-checkbox__background {
  width: 16px !important;
  height: 16px !important;
  border-radius: 0.25rem !important;
  border: 1px solid var(--bs-border-color) !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transition: background 0.12s ease, border-color 0.12s ease !important;
}

/* Checked state uses primary color with white checkmark */
.mat-checkbox.mat-checkbox-checked .mat-checkbox-background,
.mat-mdc-checkbox.mdc-checkbox--selected .mdc-checkbox__background,
.mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.mat-checkbox .mat-checkbox-background .mat-checkbox-checkmark svg path,
.mat-mdc-checkbox .mdc-checkbox__checkmark-path {
  stroke: #fff !important;
}

/* Center checkboxes in table cells like Bootstrap */
.mat-cell mat-checkbox,
.mat-header-cell mat-checkbox,
td mat-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

/* Hover state: subtle border color change without transform */
.mat-checkbox:hover .mat-checkbox-frame,
.mat-mdc-checkbox:hover .mdc-checkbox__background {
  border-color: var(--color-primary) !important;
}

/* Divider text */
.d-flex.align-items-center.gap-3 hr {
  border-color: var(--color-border);
  opacity: 1;
}

.d-flex.align-items-center.gap-3 small {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Footer link styles (font-size merged into main footer rule above) */

footer a {
  color: var(--color-primary);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* Support link */
.text-center.mt-3 {
  font-size: var(--font-size-sm);
}

.text-center.mt-3 a {
  color: var(--color-primary);
  text-decoration: none;
}

.text-center.mt-3 a:hover {
  text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
  .login-left {
    display: none !important;
  }

  .card {
    /* margin: 1rem; */
    border-radius: 0.8rem;
  }

  .login-right {
    padding: 1.5rem;
  }

  .login-left h3 {
    font-size: var(--font-size-h2);
  }
}

@media (max-width: 480px) {
  main {
    padding: 1rem;
  }

  .login-right {
    padding: 1.25rem;
  }

  .form-control {
    padding: 0.55rem 0.85rem;
    font-size: var(--font-size-input-mobile);
  }
}

/* ===== SIGNUP PAGE STYLES ===== */
/* .signup-page {
  background: linear-gradient(135deg, var(--color-background) 0%, var(--color-primary-light) 100%);
  color: var(--color-text);
  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
} */

/* .signup-page .card {
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--card-shadow-lg);
}*/

/* .signup-page .signup-left {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}

.signup-page .signup-left h3 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.signup-page .signup-left p {
  opacity: 0.92;
  line-height: 1.5;
}

.signup-page .signup-right {
  background: #ffffff;
  padding: 2rem;
}

.signup-page .signup-right h5 {
  color: var(--color-text);
  font-weight: 700;
  font-size: 1.35rem;
} */

/* .signup-page .form-control {
  border-radius: var(--bs-border-radius-sm);
  border: 1px solid var(--color-border);
  padding: 0.65rem 0.95rem;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.signup-page .form-control:focus {
  border-color: var(--color-primary-light);
  box-shadow: none;
  outline: none;
}

.signup-page .form-control.is-invalid:focus {
  border-color: var(--color-danger);
  box-shadow: none;
  outline: none;
}

.signup-page .was-validated .form-control:invalid {
  border-color: var(--color-danger);
}

.signup-page .form-label {
  color: #495057;
  font-weight: 600;
  margin-bottom: 0.5rem;
} */

/* .signup-page .btn-primary {
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: var(--bs-border-radius-sm);
  padding: 0.65rem 1rem;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(124,92,255,0.24);
  transition: all 0.3s ease;
}

.signup-page .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124,92,255,0.34);
}

.signup-page .btn-light {
  border-radius: var(--bs-border-radius-sm);
  border: 1px solid var(--color-border);
  padding: 0.6rem 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.signup-page .btn-light:hover {
  background: var(--color-background);
  border-color: var(--color-primary);
}

.signup-page .btn-outline-light {
  border-radius: 0.5rem;
  border: 2px solid rgba(255, 255, 255, 0.6);
  font-weight: 500;
  transition: all 0.3s ease;
}

.signup-page .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

.signup-page .input-group .btn-outline-secondary {
  border-radius: 0 0.6rem 0.6rem 0;
  border-left: 0;
  border-color: var(--color-border);
  color: var(--color-primary);
  transition: none !important;
}

.signup-page .input-group .btn-outline-secondary:hover {
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
}

.signup-page .invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--color-danger);
}

.signup-page .was-validated .form-control:invalid ~ .invalid-feedback,
.signup-page .form-control.is-invalid ~ .invalid-feedback {
  display: block;
}

.signup-page .form-check-input {
  border-radius: 0.3rem;
  border: 1px solid var(--color-border);
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
}

.signup-page .form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.signup-page .form-check-input:focus {
  border-color: var(--color-primary);
  box-shadow: none;
  outline: none;
}

.signup-page .link-secondary {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.signup-page .link-secondary:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

.signup-page footer {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

@media (max-width: 767.98px) {
  .signup-page .signup-left {
    display: none !important;
  }
  
  .signup-page .card {
    margin: 1rem;
    border-radius: 0.8rem;
  }
  
  .signup-page .signup-right {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .signup-page main {
    padding: 1rem;
  }
  
  .signup-page .signup-right {
    padding: 1.25rem;
  }
  
  .signup-page .form-control {
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
  }
} */

/* ===== FORGOT PASSWORD PAGE STYLES ===== */
body.forgot-page {
  background: linear-gradient(
    135deg,
    var(--color-background) 0%,
    var(--color-primary-light) 100%
  );
  color: var(--color-text);
  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.forgot-page .card {
  border: 0;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--card-shadow-lg);
}

body.forgot-page .forgot-left {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  );
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}

body.forgot-page .forgot-left h3 {
  font-size: var(--font-size-h2);
  /* use bold instead of extrabold to keep crisp text rendering */
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
}

body.forgot-page .forgot-left p {
  opacity: 0.92;
  line-height: 1.5;
}

body.forgot-page .forgot-right {
  background: #ffffff;
  padding: 2rem;
}

body.forgot-page .forgot-right h5 {
  color: var(--color-text);
  font-weight: 700;
  font-size: var(--font-size-h3);
}

body.forgot-page .form-control {
  border-radius: var(--bs-border-radius-sm);
  border: 1px solid var(--color-border);
  padding: 0.65rem 0.95rem;
  font-size: var(--font-size-base);
  transition: all 0.3s ease;
}

body.forgot-page .form-control:focus {
  border-color: var(--color-primary-light);
  box-shadow: none;
  outline: none;
}

body.forgot-page .form-control.is-invalid:focus {
  border-color: var(--color-danger);
  box-shadow: none;
  outline: none;
}

body.forgot-page .was-validated .form-control:invalid {
  border-color: var(--color-danger);
}

body.forgot-page .form-label {
  color: #495057;
  font-weight: var(--font-weight-medium);
  /* margin-bottom: 0.5rem; */
}

body.forgot-page .btn-primary {
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-primary-dark)
  );
  border: 0;
  border-radius: var(--bs-border-radius-sm);
  padding: 0.65rem 1rem;
  font-weight: var(--font-weight-regular);
  box-shadow: 0 4px 15px rgba(124, 92, 255, 0.24);
  transition: none !important;
}

body.forgot-page .btn-primary:hover {
  transform: none;
  box-shadow: 0 6px 20px rgba(124, 92, 255, 0.34);
}

body.forgot-page .invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: var(--font-size-feedback);
  color: var(--color-danger);
}

body.forgot-page .was-validated .form-control:invalid ~ .invalid-feedback,
body.forgot-page .form-control.is-invalid ~ .invalid-feedback {
  display: block;
}

body.forgot-page .link-secondary {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

body.forgot-page .link-secondary:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

@media (max-width: 767.98px) {
  body.forgot-page .forgot-left {
    display: none !important;
  }

  body.forgot-page .card {
    margin: 1rem;
    border-radius: 0.8rem;
  }

  body.forgot-page .forgot-right {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  body.forgot-page main {
    padding: 1rem;
  }

  body.forgot-page .forgot-right {
    padding: 1.25rem;
  }

  body.forgot-page .form-control {
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
  }
}

/* ===== SIDEBAR & HEADER STYLES ===== */

/* App Header */
.app-header {
  background-color: #ffffff;
  border-bottom: 1px solid rgb(235 235 235);
  position: sticky;
  top: 0;
  /* z-index: 1020; */
  z-index: 20;
  min-height: 56px;
}

.app-header .logo-img {
  height: 32px;
  width: 32px;
  border-radius: 0.5rem;
  object-fit: cover;
}

.app-header h1 {
  color: var(--color-accent);
  font-size: var(--font-size-header) !important;
  letter-spacing: -0.5px;
}

.app-header .btn-link {
  color: var(--primary);
  font-size: 1rem;
  padding: 0.5rem !important;
  transition: none !important;
}

.app-header .btn-link:hover {
  color: var(--color-accent-light);
  /* Use a stable, hardware-accelerated transform and smooth transition to avoid jitter */
  /* transform: translateY(-1px) translateZ(0); */
  transition: transform 140ms ease;
  /* will-change: transform; */
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app-header .sidebar-toggle-btn {
  color: var(--color-accent) !important;
  font-size: 1.3rem;
  transition: none !important;
}

.app-header .sidebar-toggle-btn:hover {
  color: var(--color-accent-light) !important;
  transform: translateY(-1px) translateZ(0);
  transition: transform 140ms ease;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ensure icons don't reflow on hover: keep them inline-block and smoothing on hover */
.app-header .btn-link i,
.app-header .btn-link .bi,
.app-header .btn-link mat-icon {
  display: inline-block;
  transform: translateZ(0);
}

/* Sidebar */
.sidebar {
  /* background: linear-gradient(
    180deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  ); */
  color: var(--primary);
  width: 230px;
  min-height: calc(100vh - 56px);
  padding: 0;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  /* box-shadow: 4px 0 15px rgba(0, 0, 0, 0.15); */
  position: relative;
}

.sidebar-header {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.1);
}

.header-brand {
  margin: 0;
  font-size: 1.25rem;
  /* font-weight: 800; */
  letter-spacing: -0.5px;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  @media screen and (max-width: 579px) {
    display: none;
  }
}

/* decorative dot removed - keep rule out to avoid empty selector */

/* Brand link in sidebar header */
.header-brand a {
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  /* gap: 0.5rem; */
  font-weight: 500;
}
.sidebar-header a:hover {
  text-decoration: none;
  opacity: 0.95;
}

/* Header brand (navbar) */
.header-brand {
  color: var(--color-text);
}
.header-brand .bi {
  color: var(--color-accent);
}
.header-brand:hover {
  text-decoration: none;
  opacity: 0.9;
}

/* Hide sidebar text on smaller width if necessary */
@media (max-width: 991px) {
  .sidebar-header h3 {
    font-size: var(--font-size-sidebar-title);
  }
}

.sidebar-header .btn-close-sidebar {
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 0.4rem;
  transition: none !important;
}

.sidebar-header .btn-close-sidebar:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

/* Sidebar Navigation */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  /* padding: 1rem 0; */
  list-style: none;
}

.sidebar-nav .nav-item {
  margin: 0;
}

.sidebar-nav .nav-link {
  color: #61748f;
  /* padding: 0.85rem 1.25rem; */
  display: flex;
  align-items: center;
  gap: 0.85rem;
  transition: all 0.3s ease;
  font-weight: 400;
  position: relative;
  font-size: var(--font-size-navlink);
  /* margin: 0.3rem 0.5rem; */
  /* border-radius: 0.6rem; */
  text-decoration: none !important;
}

.sidebar-nav .nav-link,
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:focus,
.sidebar-nav .nav-link.active {
  text-decoration: none !important;
}

.sidebar-nav .nav-link i {
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
  color: #61748f;
}

.sidebar-nav .nav-link span {
  flex: 1;
  color: #61748f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-nav .nav-link:hover {
  color: var(--secondary);
  /* background-color: rgba(124, 92, 255, 0.18); */
  text-decoration: none !important;
}

.sidebar-nav .nav-link:hover i {
  color: var(--color-accent);
}

.sidebar-nav .nav-link.active {
  color: var(--primary) !important;
  background: rgb(250 248 255);
  font-weight: 500;
  /* font-weight: 600; */
  /* box-shadow: inset 2px 0 8px rgba(0, 0, 0, 0.2); */
  text-decoration: none !important;
  border-radius: 6px;
}
.sidebar-nav .nested-menu .nav-link {
  background: transparent;
}
.sidebar-nav .nav-link.active span {
  color: var(--primary);
  font-weight: 500;
}
.sidebar-nav .nav-link.active i {
  color: var(--color-accent);
}

/* .sidebar-nav .nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  bottom: 0;
  width: 2px;
  background-color: var(--color-accent);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 10px rgba(124, 92, 255, 0.44);
  height: 20px;
  transform: translateY(-50%);
} */

/* Section Titles & Dividers */
.sidebar-nav .nav-divider {
  margin: 0.8rem 1rem;
  border: none;
  border-top: 1px solid var(--color-accent);
  opacity: 0.3;
  height: 0;
}

.sidebar-nav .nav-section-title {
  color: var(--color-accent);
  padding: 0.75rem 1.25rem;
  font-size: var(--font-size-xs);
  /* reduce extra weight on small uppercase section titles to prevent blur */
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 1px;
  /* margin-top: 0.8rem; */
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sidebar-nav .nav-section-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--color-accent);
  border-radius: 50%;
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.sidebar-footer:hover {
  background: rgba(124, 92, 255, 0.06);
}

.sidebar-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--bs-border-radius-sm);
  object-fit: cover;
  border: 2px solid var(--color-accent);
  transition: all 0.3s ease;
}

.sidebar-footer:hover .sidebar-avatar {
  box-shadow: 0 0 10px rgba(124, 92, 255, 0.36);
}

/* Sidebar Wrapper */
#sidebar-wrapper {
  transition: all 0.3s ease;
}

/* Scrollbar styling for sidebar */
.sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Main Layout */
#wrapper {
  display: flex;
  min-height: 100vh;
}

#page-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--color-background);
}

#page-content-wrapper .container-fluid {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Mobile Responsive Sidebar */
@media (max-width: 991.98px) {
  .sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    z-index: 1030;
    height: 100vh;
    border-radius: 0;
    min-height: 100vh;
  }

  .sidebar.show {
    left: 0;
    /* box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3); */
  }

  #sidebar-wrapper.show {
    margin-left: 0;
  }

  .sidebar-header .btn-close-sidebar {
    display: flex;
  }

  .d-lg-none {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .sidebar-header .btn-close-sidebar {
    display: none;
  }

  /* Ensure the header sidebar toggle is visible on desktop so collapse works */
  .sidebar-toggle-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* Desktop collapsed sidebar state removed - keep sidebar full width */

/* Smooth transitions */
.sidebar,
.main-block {
  transition: all 0.25s ease;
}

/* Flyout panel for nested menu when sidebar is collapsed */
.sidebar .nav-parent {
  position: relative;
}
/* Flyout styles removed (flyout behavior disabled) */

/* Tablet/Small Desktop */
@media (max-width: 1199.98px) {
  .sidebar {
    width: 240px;
  }

  .sidebar-nav .nav-link {
    padding: 0.8rem 1rem;
    gap: 0.7rem;
  }

  .sidebar-header h3 {
    font-size: 1.2rem;
  }
}

/* Page Title and Breadcrumb Styling */
.page-header-wrapper {
  margin-bottom: 1.5rem;
}

.page-header-wrapper h3 {
  font-size: var(--font-size-h2);
  font-weight: 700;
  margin-bottom: 0 !important;
  color: var(--primary);
}

.page-header-wrapper .breadcrumb {
  font-size: var(--font-size-sm);
  margin-bottom: 0 !important;
  margin: 0;
  padding: 0.5rem 0;
  display: none; /* hide sitemap path but keep in DOM */
}

.page-header-wrapper .breadcrumb-item {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs) !important;
}

.breadcrumb-item a {
  color: var(--color-primary);
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: var(--font-size-xs) !important;
}

.breadcrumb-item span {
  font-size: var(--font-size-xs) !important;
}

.page-header-wrapper .breadcrumb-item a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.page-header-wrapper .breadcrumb-item.active {
  color: var(--primary);
}

/* Page Header Actions */
.page-header-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
  margin-left: auto;
}

.page-header-actions .btn {
  font-size: var(--font-size-feedback);
  white-space: nowrap;
  font-weight: var(--font-weight-regular);
}

.required-label::after {
  content: " *";
  color: red;
  font-weight: var(--font-weight-medium);
}

/* ===== SNACKBAR STYLES ===== */

.success-snackbar {
  background-color: #2e7d32;
  color: #ffffff;
}

.error-snackbar {
  background-color: #c62828;
  color: #ffffff;
}

.warning-snackbar {
  background-color: #ed6c02;
  color: #ffffff;
}

/* .cdk-overlay-pane .mat-mdc-select-panel {
  margin-left: -14px;
  margin-top: 14px;
  margin-bottom: 14px;
} */

.cdk-overlay-container {
  z-index: 2000 !important;
}

.recipient-drawer-container {
  height: 100vh;
}

.recipient-drawer {
  width: 420px;
  padding: 16px;
}

/** * Sidebar Dialog Styles */

.rs-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.rs-header {
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rs-body {
  padding: 16px;
  flex: 1;
  overflow: auto;
}

.rs-footer {
  padding: 16px;
  border-top: 1px solid #e0e0e0;
}

.rs-sidebar-dialog .mat-mdc-dialog-container {
  border-radius: 0;
  padding: 0;
  height: 100vh;
  width: 100%;
  max-width: 100vw;
  animation: slideInRight 220ms ease-out;
}

.rs-sidebar-dialog .mat-mdc-dialog-surface {
  border-radius: 0;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.mat-table-wrapper {
  /* Scroll when rows exist; otherwise allow natural flow so empty tables don't show a scrollbar */
  max-height: 400px; /* height of scrollable area */
  overflow-y: auto; /* enable vertical scroll */
}

/* Use :has to disable scroll when there are no rows (modern browsers) */
.mat-table-wrapper:not(:has(.mat-row)) {
  max-height: none;
  overflow: visible;
}

/* When there are no rows, show a centered placeholder without causing scrollbars */
.table-wrapper .flex-fill.position-relative {
  position: relative;
  min-height: 90px; /* ensure small placeholder area */
}

table.mat-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff !important;
}

/* keep header visible while tbody scrolls */
.mat-table-wrapper thead {
  position: sticky;
  top: 0;
  background: white; /* same as table background */
  z-index: 1; /* ensure header is above rows */
}

/* Make headers sticky for tables inside .table-wrapper (used by app-data-table) */
.table-wrapper .flex-fill.position-relative table thead,
.table-wrapper .flex-fill.position-relative table thead th,
.table-wrapper .flex-fill.position-relative table thead tr,
.table-wrapper .flex-fill.position-relative .mat-mdc-header-row,
.table-wrapper .flex-fill.position-relative .mat-mdc-header-cell {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important; /* on top of rows and floating controls */
  background: fbfbfb !important; /* consistent with paginator/footer */
}

/* Ensure header text remains readable and doesn't inherit row overflow */
.table-wrapper .flex-fill.position-relative table thead th {
  background-clip: padding-box !important;
}

.main-block {
  height: calc(100vh - 56px);
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.auth-page .auth-left {
  height: 100vh;
}

.auth-page .auth-right {
  height: 100vh;
  overflow: auto;
}

.auth-page header {
  padding: 0;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--primary);
}

.mat-mdc-cell,
.mat-mdc-header-cell {
  border-bottom-color: #ededed !important;
}

.mat-mdc-header-row {
  height: 38px !important;
  background: #fbfbfb !important;
}
.mat-mdc-paginator {
  border-top: 1px solid #ededed !important;
  background: #fbfbfb !important; /* ensure header & footer share color */
}
.mat-table tfoot,
.mat-mdc-table tfoot {
  background: #fbfbfb !important;
}
.mat-mdc-paginator-container {
  justify-content: space-between !important;
  @media screen and (max-width: 767px) {
    padding-top: 5px !important;
    justify-content: center !important;
  }
}

.auth-page .card {
  border-radius: 0 !important;
}

/* Larger font on wide screens for better readability */
@media (min-width: 1500px) {
  .sidebar-nav .nav-link {
    font-size: 0.95rem; /* ~15px on default root */
  }
}
.mat-mdc-table {
  background-color: #ffffff !important;
}

.material-icons-outlined {
  font-weight: lighter;
  font-style: normal;
  font-size: 18px !important;
}

/* Stabilize header icons on hover to avoid subpixel jitter */
.app-header .btn-link,
.app-header .sidebar-toggle-btn,
.sidebar-header .btn-close-sidebar {
  /* transform: translateY(0) translateZ(0); */
  /* will-change: transform; */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Small variant */
.btn-sm {
  --btn-height: 34px;
  --btn-min-width: 64px;
  --btn-padding-x: 12px;
  font-size: 0.88rem;
}

/* Normalize table fonts across the app */
table,
.table,
table.mat-table,
.table-wrapper table {
  font-size: var(--font-size-base) !important;
}

/* Table font-size: unify table typography across the application */
table,
.table,
.mat-table,
table.mat-table {
  font-size: var(--font-size-base) !important;
}

/* Ensure small icon-only buttons use small tokens */
.btn-sm:has(> mat-icon) {
  width: var(--btn-height) !important;
  min-width: var(--btn-height) !important;
  padding: 4px 0px 1px 0px !important;
  /* border-radius: 50% !important; */
}

/* Utility class and fallbacks for icon-only plain buttons that use <i>, <svg>, or bootstrap icons (.bi) */
.btn-icon {
  /* Explicit utility for icon-only buttons. Use this class when a button contains only an icon
     and should be circular. This avoids accidentally affecting buttons that have both an icon
     and visible text (e.g. "Import", "Export"). */
  width: var(--btn-height) !important;
  height: var(--btn-height) !important;
  min-width: var(--btn-height) !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0;
}

/* Small variant when explicit class is used */
.btn-sm.btn-icon {
  width: var(--btn-height) !important;
  height: var(--btn-height) !important;
  min-width: var(--btn-height) !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

/* Keep :has() narrow: only allow mat-icon-only buttons to be circular automatically
   since mat-icon is a component and less likely to be accompanied by text nodes. */
.btn:has(> mat-icon:only-child):not(.btn-sm) {
  width: var(--btn-height) !important;
  min-width: var(--btn-height) !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Header-specific tweaks: only apply to explicit .btn-icon usage to avoid touching labelled actions */
.app-header .btn-icon {
  color: var(--color-accent);
  background: transparent;
  border: none;
}

.app-header .btn-icon:hover {
  background: rgba(255, 255, 255, 0.04);
}
.brand {
  min-width: 230px;
  border-right: 1px solid rgb(235 235 235);
  height: 56px;
  @media screen and (max-width: 1024px) {
    min-width: 160px;
  }
  @media screen and (max-width: 579px) {
    min-width: unset;
  }
}

.btn-outline-secondary {
  height: var(--btn-height);
}

.app-main,
main {
  padding: 15px 5px !important;
}

.app-main.auth-page,
main.auth-page {
  padding: 0 !important;
}

.form-control {
  border-color: var(--bs-border-color);
}
.badge {
  font-weight: var(--font-weight-medium);
}

.badge-primary {
  background: #e7efff !important;
  color: #005aff;
}

.badge-warning {
  background: #fff4d2 !important;
  color: #b17200;
}

.badge-success {
  background: #ecffeb !important;
  color: #066a06;
}

.badge-secondary {
  background: #f0f0f0 !important;
  color: #6c757d;
}

.ng-select .ng-select-container {
  border-radius: var(--bs-border-radius-sm) !important;
  border: 1px solid #dee2e6 !important;
  min-height: 40px !important;
}
/* Base container */
.ng-select .ng-select-container {
  /* border-radius: 0.6rem; */
  border: 1px solid #dee2e6 !important;
  min-height: 40px !important;
  transition: border-radius 0.15s ease;
}

/* When dropdown is OPEN */
.ng-select.ng-select-opened .ng-select-container {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Dropdown panel */
.ng-dropdown-panel {
  border: 1px solid #dee2e6;
  border-top: none;
  border-bottom-left-radius: 0.6rem;
  border-bottom-right-radius: 0.6rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  margin-top: 0;
  overflow: hidden;
}

/* ng select custom styling */

/* ===============================
   Base ng-select container
================================ */
.ng-select {
  width: 100%;
  font-size: 14px;
}

.ng-select .ng-select-container {
  min-height: 40px !important;
  padding: 0 0.75rem;
  /* border-radius: 0.6rem; */
  border: 1px solid #dee2e6 !important;
  background-color: #fff;
  box-shadow: none !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* ===============================
   Hover state
================================ */
.ng-select:hover .ng-select-container {
  border-color: #ced4da;
}

/* ===============================
   Focus / Open state (IMPORTANT)
================================ */
.ng-select.ng-select-opened .ng-select-container,
.ng-select.ng-select-focused .ng-select-container {
  border-color: #86b7fe !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15) !important;
}

/* ===============================
   Placeholder
================================ */
.ng-select .ng-placeholder {
  color: #adb5bd;
  font-weight: 400;
}

/* ===============================
   Selected value
================================ */
.ng-select .ng-value {
  color: #212529;
  font-weight: 500;
}

/* ===============================
   Input text (searchable select)
================================ */
.ng-select .ng-input > input {
  color: #212529;
  font-size: 14px;
  padding: 0;
  height: auto;
}

/* ===============================
   Arrow
================================ */
.ng-select .ng-arrow-wrapper {
  width: 25px;
  padding-right: 0.25rem;
}

.ng-select .ng-arrow {
  border-color: #6c757d transparent transparent;
}

/* ===============================
   Clear (×) button
================================ */
.ng-select .ng-clear-wrapper {
  color: #adb5bd;
}

.ng-select .ng-clear-wrapper:hover {
  color: #495057;
}

/* ===============================
   Dropdown panel
================================ */
.ng-dropdown-panel {
  /* border-radius: 0.6rem; */
  border: 1px solid #dee2e6;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  margin-top: 4px;
  overflow: hidden;
}

/* ===============================
   Dropdown options
================================ */
.ng-dropdown-panel .ng-option {
  padding: 8px 12px;
  font-size: 14px;
  color: #212529;
}

/* Hover option */
.ng-dropdown-panel .ng-option:hover {
  background-color: #f8f9fa;
}

/* Selected option */
.ng-dropdown-panel .ng-option-selected {
  background-color: #e7f1ff;
  color: #0d6efd;
}

/* ===============================
   Disabled state
================================ */
.ng-select.ng-select-disabled .ng-select-container {
  background-color: #e9ecef;
  cursor: not-allowed;
  opacity: 0.8;
}

/* ===============================
   Multiple select
================================ */
.ng-select.ng-select-multiple .ng-select-container {
  /* min-height: auto !important;
  padding: 4px 8px; */
}

.ng-select.ng-select-multiple .ng-value {
  background-color: #e7f1ff;
  border-radius: var(--bs-border-radius-sm);
  padding: 2px 8px;
  margin: 2px;
  color: #0d6efd;
  font-size: 13px;
}

/* ===============================
   Validation states
================================ */
.ng-select.is-invalid .ng-select-container {
  border-color: #dc3545 !important;
}

.ng-select.is-valid .ng-select-container {
  border-color: #198754 !important;
}

.ng-select.ng-select-opened.ng-select-focused .ng-select-container {
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
  border-color: #86b7fe !important;
}

.ng-select .ng-select-container .ng-value-container {
  padding-left: 0;
}

.ng-dropdown-panel
  .ng-dropdown-panel-items
  .ng-option.ng-option-selected
  .ng-option-label,
.ng-dropdown-panel
  .ng-dropdown-panel-items
  .ng-option.ng-option-selected.ng-option-marked
  .ng-option-label {
  font-weight: 500;
}

/* .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected, .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{
  color: var(--color-text)
} */

.ng-select .ng-value {
  color: inherit;
}

.fw-bold {
  font-weight: 500 !important;
}
/* FORCE compact row height */
.mat-mdc-table .mat-mdc-header-row,
.mat-mdc-table .mat-mdc-row {
  height: 36px !important;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

.mat-mdc-header-row {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

/* FORCE compact cell padding */
.mat-mdc-table .mat-mdc-header-cell,
.mat-mdc-table .mat-mdc-cell {
  padding: 1px 12px !important;
  line-height: 1.3 !important;
}
.mat-mdc-form-field-infix {
  padding: 0 !important;
}

.mat-mdc-paginator {
  --mat-form-field-container-height: 30px;
  --mat-form-field-container-vertical-padding: 4px;
}
.mat-mdc-paginator .mdc-text-field--outlined {
  --mdc-outlined-text-field-container-shape: 6px;
  --mdc-outlined-text-field-outline-width: 1px;
  height: 30px;
}
.mat-mdc-paginator .mat-mdc-form-field-infix {
  /* padding-top: 2px !important; */
  padding-bottom: 2px !important;
  min-height: unset !important;
}
.mat-mdc-paginator .mat-mdc-select-trigger {
  height: 30px;
  font-size: 13px;
  align-items: center;
}
.mat-mdc-option {
  min-height: 40px;
}
div.mat-mdc-select-panel {
  padding: 0 !important;
}
.ng-select .ng-select-container .ng-value-container {
  padding-left: 0 !important;
}

/* Remove default browser outline on ng-select focus, keep subtle border change for accessibility */
.ng-select:focus-within .ng-select-container,
.ng-select .ng-select-container:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--color-primary-light) !important;
}

/* Material select focus styling */
.mat-mdc-select:focus,
.mat-mdc-select.mat-mdc-focused {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--color-primary-light) !important;
}

/* ===== DROP-DOWN FOCUS: remove default outline / glow for ng-select and material select ===== */
.ng-select:focus-within,
.ng-select .ng-select-container:focus-within,
.ng-select .ng-select-container:focus,
.ng-select:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Material select focus cleanup */
.mat-mdc-select:focus,
.mat-mdc-select .mat-mdc-select-trigger:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ensure ng-select focus ring doesn't reappear on keyboard navigation */
.ng-select:focus-visible,
.ng-select .ng-select-container:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.mat-mdc-paginator-container {
  min-height: auto !important;
}

.message-type-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.message-type-group input {
  display: none;
}

.message-type-group label {
  padding: 6px 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #374151;
  background-color: #fff;
}

.message-type-group input:checked + label {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.message-type-group label:hover {
  background-color: #f3f4f6;
}

.group-contact-select
  .ng-select.ng-select-multiple
  .ng-select-container
  .ng-value-container
  .ng-placeholder {
  top: 9px !important;
}

.group-contact-select .ng-select.ng-select-multiple .ng-select-container {
  padding-top: 0 !important;
}

.group-contact-select
  .ng-select.ng-select-multiple
  .ng-select-container
  .ng-value-container {
  padding-top: 3px !important;
}
/* .group-contact-select
  .ng-select.ng-select-multiple
  .ng-select-container
  .ng-value-container
  .ng-value {
  margin-bottom: 0 !important;
} */

.table-wrapper {
  min-height: calc(100vh - 215px);
  justify-content: space-between;
}

.no-data-full {
  height: auto;
  /* display: flex; */
  /* min-height: 100%; */
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.mat-mdc-option {
  min-height: 30px !important;
  background-color: #ffffff !important;
}

.mdc-list-item--selected {
  background-color: #e7f1ff !important;
}

/* sidebar  */

.sidebar {
  width: 230px;
  transition: width 0.25s ease;
}

.sidebar.collapsed {
  width: 52px;
}

/* Offcanvas container */
.rs-container {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 14px; /* Base font size */
  color: #212529;
}

/* Header */
.rs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.rs-header h3 {
  margin: 0;
  font-size: 16px; /* Title size */
  font-weight: 500;
  line-height: 1.2;
}

/* Close button */
.rs-header button {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  color: #6c757d;
}

.rs-header button:hover {
  /* background-color: #f1f3f5; */
  color: #212529;
}

/* Body */
.rs-body {
  flex: 1 1 auto;
  min-height: 0; /* 🔑 fixes table rendering */
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
  /* background: #f7f7f7; */
}

/* Table wrapper */
.mat-table-wrapper {
  flex: 1 1 auto;
  min-height: 0; /* 🔑 */
  overflow: auto;
}

/* Footer */
.rs-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid #e5e7eb;
  background: #fff;
}

/* Footer button */
.rs-footer button {
  height: 40px;
  font-size: 14px;
  font-weight: 500;
}

/* Reduce Material / table text slightly */
.rs-container table,
.rs-container th,
.rs-container td {
  /* font-size: 13px; */
}

/* Scrollbar (optional but clean) */
.mat-table-wrapper::-webkit-scrollbar {
  width: 6px;
}

.mat-table-wrapper::-webkit-scrollbar-thumb {
  background-color: #ced4da;
  border-radius: 4px;
}

.flex-fill {
  height: calc(100vh - 236px);
}

/** Recipient Selector Card Height Fix */
.recipient-selector-card .flex-fill {
  /* height: auto;
  flex: 1;
  min-height: 0;
  overflow: auto; */
  height: calc(100vh - 256px);
}

.sidebar {
  width: 230px;
  background-color: #ffffff;
  border-right: 1px solid #ddd;
  transition: width 0.3s;
  position: relative;
  padding: 10px;

  &.collapsed {
    width: 70px;

    .nav-link {
      span {
        display: none;
      }
      .bi-chevron-right {
        display: none;
      }
      .bi-chevron-down {
        display: none;
      }
    }
    .nested-menu {
      display: none;
    }

    .nav-link {
      justify-content: center !important;
    }

    &:hover {
      width: 230px;
      .nav-link span {
        display: block;
      }
      .bi-chevron-right {
        display: inline-block;
      }
      .bi-chevron-right {
        display: inline-block;
      }
      .bi-chevron-down {
        display: inline-block;
      }
      .nav-link {
        justify-content: start !important;
      }
      .nested-menu {
        display: inline-block;
        width: 100%;
      }
    }
  }

  .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    /* color: #333; */
    cursor: pointer;
    position: relative;
  }

  /* .nav-link.active {
    background-color: #f0f0f0;
    font-weight: 500;
  } */

  .nested-menu {
    margin-top: 5px;

    .nav-link {
      padding-left: 8px;
    }
  }

  /* Flyout submenu */
  .flyout-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    background: #fff;
    border: 1px solid #ddd;
    min-width: 180px;
    z-index: 999;

    li a {
      padding: 8px 12px;
      /* color: #333; */
    }

    li a:hover {
      background-color: #f0f0f0;
    }
  }

  .nav-parent:hover > .flyout-menu {
    display: block;
  }

  .sidebar-footer {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    text-align: center;
  }
}

.table-responsive {
  border: 1px solid #f1f1f1;
}

.nested-menu {
  list-style-type: circle;
  padding-left: 20px;
}

.nested-menu li::marker {
  color: #61748f;
}

/* Change marker color when nav-link inside li is active */
.nested-menu li:has(> .nav-link.active)::marker {
  color: var(--color-primary);
}

/* ===== NOTIFICATION DROPDOWN STYLES ===== */
.notification-dropdown {
  width: 380px !important;
  max-height: 520px !important;
  border-radius: 0.6rem;
  background-color: #ffffff !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  visibility: hidden;
  opacity: 0;
  transform: none;
  transition: all 0.3s ease;
  pointer-events: none;
  overflow: hidden;
}

.dropdown-menu.notification-dropdown.show {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.dropdown-menu.notification-dropdown.show {
  /* transform: translateY(47px) !important; */
}

.notification-dropdown .dropdown-header {
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.notification-items-container {
  max-height: 380px;
  overflow-y: auto;
}

.notification-items-container::-webkit-scrollbar {
  width: 6px;
}

.notification-items-container::-webkit-scrollbar-track {
  background: #f3f4f6;
}

.notification-items-container::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.notification-items-container::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.notification-item {
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  border-left: 4px solid transparent !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.notification-item:hover {
  background-color: #f9fafb;
  border-left-color: var(--color-accent) !important;
}

.notification-dropdown .dropdown-item:hover {
  background-color: transparent;
}

.notification-dropdown .badge {
  font-size: 0.7rem;
  padding: 0.35rem 0.6rem;
  font-weight: 500;
}

.notification-dropdown .btn-close {
  opacity: 0.4;
  transition: opacity 0.2s ease;
  font-size: 10px;
}

.notification-dropdown .btn-close:hover {
  opacity: 0.8;
}

.notification-icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  background-color: #f6f6fb !important;
  color: var(--primary) !important;
  margin-right: 5px;
}

.dropdown-menu.dropdown-menu-end.show {
  transform: translateY(44px) !important;
}

.notification-count {
  top: 10px !important;
  right: 2px;
  left: auto !important;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;
}


.mat-mdc-dialog-surface.mdc-dialog__surface{
  border-radius: 8px 0 0 8px;
}

.spinner-border{
  border-color: var(--color-border) !important;
  border-right-color: transparent !important;
}

.mat-icon{
  color: #61748f !important
}

.mat-mdc-snack-bar-container {
  font-size: 12px !important;
}

.mat-mdc-snack-bar-container .mdc-snackbar__label {
  font-size: 12px !important;
  line-height: 1.4;
}
.form-label {
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
 .btn-action{
  margin-bottom: 20px !important;
  height: 100%;
  span{
    display: none;
  }
  .btn{
    height: 38px
  }
 }
 .btn-action-with-select{
  margin-top: 10px;
  margin-bottom: 0 !important;
  select{
    width: 100% !important;  
  }
 }
 body, tbody, td, tfoot, th, thead, tr{
  font-size: 12px !important;
 }
}

/* .selected-item {
  font-weight: 500;
  white-space: nowrap;
}

.more-items {
  margin-left: 6px;
  color: #0d6efd; 
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
} */


.text-dark{
  color: #000000 !important
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1040;
}
@media screen and  (max-width: 767px){
 .recipient-selector-card .flex-fill {
    height: calc(100vh - 302px);
}
  
}