/* Import Bootstrap Icons */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css");

/* If you are also using Google Material Symbols for other icons */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

:root {
  /* Core IDM Branding */
  --primary-teal: #004d4d;
  --accent-teal: #006666;
  --text-dark: #0f172a;
  --text-muted: #475569;
  --bg-light: #f8fafc;
  --border-gray: #e2e8f0;

  /* Status Colors */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
}

body {
  font-family: 'Inter', Roboto, "Helvetica Neue", sans-serif;
  color: var(--text-dark);
  background-color: #ffffff;
}

/* Ensure the Angular host element occupies the full space */
app-root {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensures content pushes footer down */
}

/* If your footer is inside a component, make the main content area grow */
main, .main-content {
  flex: 1 0 auto;
}

app-header {
  position: sticky;
  top: 0;
  z-index: 1050;
  /* Glassmorphism Effect */
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

footer {
  flex-shrink: 0; /* Prevents footer from squishing */
  margin-top: auto; /* Pushes it to the bottom if content is short */
}


/* --- Primary Button (The "Authority" Teal) --- */
.btn-primary {
  background-color: var(--primary-teal);
  border-color: var(--primary-teal);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 6px rgba(0, 77, 77, 0.15);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--accent-teal);
  border-color: var(--accent-teal);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 77, 77, 0.25);
}

/* --- Active & Click States --- */

/* 1. Handle the "Click and Hold" state */
.btn-primary:active, 
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: #004d4d !important;
    border-color: #004d4d !important;
    color: #fff !important;
    transform: translateY(1px) !important; /* Subtle "push" down effect */
}

/* 2. Remove the default blue focus ring */
.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 128, 128, 0.25) !important;
}

/* --- Secondary Button (Slate Ghost) --- */
.btn-accent {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
  color: var(--text-dark);
  transition: all 0.2s ease-in-out;
}

.btn-accent:hover {
  background-color: #e2e8f0;
  color: var(--primary-teal);
}

/* --- Outline (The Sleek Choice) --- */
.btn-outline-primary {
  background-color: transparent;
  border: 1.5px solid var(--primary-teal);
  color: var(--primary-teal);
  font-weight: 600;
}

.btn-outline-primary:hover {
  background-color: rgba(0, 77, 77, 0.04);
  color: var(--accent-teal);
  border-color: var(--accent-teal);
}

/* Disabled / subtle look */
.btn-disabled {
  background-color: #CBD5E1;
  border-color: #CBD5E1;
  color: #fff;
  cursor: not-allowed;
  opacity: 0.8;
}


.idm-btn-two {
  background-color: var(--primary-teal);
  color: #ffffff;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
  border: none;
  transition: opacity 0.2s;
}

.idm-btn-two:hover {
  opacity: 0.9;
  color: #ffffff;
}

/* --- Utilities --- */
.fs-8 { font-size: 0.8rem; }

.text-teal { color: var(--primary-teal); }

.bg-glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-gray);
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out forwards;
}

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

/* --- Brand-Specific Soft Toasts --- */

.toast-container {
    z-index: 3000;
}

.toast-custom {
    min-width: 300px;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 12px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    backdrop-filter: blur(8px); /* Optional: adds a modern frosted glass feel */
}

/* Success: Soft Teal */
.toast-success {
    background-color: #e6f2f2 !important;
    border-left: 4px solid #008080 !important;
    color: #008080 !important;
}

/* Danger: Soft Red */
.toast-danger {
    background-color: #fff5f5 !important;
    border-left: 4px solid #dc3545 !important;
    color: #dc3545 !important;
}

/* Info/Warning: Soft Gray/Blue */
.toast-info {
    background-color: #f1f3f5 !important;
    border-left: 4px solid #6c757d !important;
    color: #495057 !important;
}

/* Close button styling to match */
.toast .btn-close {
    filter: none; /* Removes the white filter if previously used */
    opacity: 0.5;
    font-size: 0.75rem;
}

.toast .btn-close:hover {
    opacity: 1;
}