/* ==========================================================================
   Cortado Group - Global Brand Styles (Refactored)
   ========================================================================== */

/* * 1. Global Styles & Variables
 * 2. Base & Typography
 * 3. Layout (Header, Footer, Sidebar, etc.)
 * 4. Components (Buttons, Cards, Forms, Tables, etc.)
 * 5. Utility Classes
 */


/* ==========================================================================
   1. Global Styles & Variables
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&display=swap');

:root {
  /* Brand Colors */
  --cg-dark-blue: #051C2C;
  --cg-lime-green: #97D700;
  --cg-lime-green-hover: #A0E21D;
  --cg-light-gray: #F3F3F3;
  --cg-text-gray: #4B5563;
  --cg-white: #ffffff;

  /* Interaction & Status Colors */
  --cg-hover-bg: #EDFFC4; /* Formerly --cg-hover */
  --cg-status-red: #D02B2F;
  --cg-status-yellow: #FCD602;
  --cg-error-red: #b91c1c;
  --cg-superuser-red: #ff0033;
  --cg-superuser-border: #b30022;

  /* UI Element Colors */
  --cg-border-color: #ddd;
  --cg-focus-shadow: rgba(151, 215, 0, 0.3);

  /* Shadows & Radii */
  --cg-border-radius-sm: 6px;
  --cg-border-radius-md: 1rem;
  --cg-border-radius-lg: 1.5rem;
  --cg-box-shadow-md: 0 4px 12px rgba(0,0,0,0.05);
  --cg-box-shadow-lg: 0 8px 16px rgba(0,0,0,0.1);

  /* Reserved for clients */
  --client-accent-color: var(--cg-lime-green);
}


/* ==========================================================================
   2. Base & Typography
   ========================================================================== */

body, input, button, select, textarea {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  color: var(--cg-text-gray);
  background-color: var(--cg-light-gray);
}

h1, h2, h3, h4, h5, h6 {
  color: inherit;
  font-weight: 700;
  margin: 0 0 1rem 0; /* Added default margin */
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }


/* ==========================================================================
   3. Layout
   ========================================================================== */

/* Header Bar */
header {
  background-color: var(--cg-dark-blue);
  color: var(--cg-white);
  padding: 1rem 2rem;
  border-bottom: 4px solid var(--cg-lime-green);
}

/* Footer */
footer {
  background-color: var(--cg-light-gray);
  text-align: center;
  padding: 1.5rem;
  font-size: 0.9rem;
  color: var(--cg-text-gray);
}

/* Navigation Sidebar (Admin) */
#nav-sidebar {
  background-color: var(--cg-light-gray);
  border-right: 1px solid var(--cg-lime-green);
}

/* Breadcrumbs */
.breadcrumbs {
  background: var(--cg-light-gray);
  padding: 8px 12px;
  font-weight: 500;
  color: var(--cg-dark-blue);
}

/* Superuser Banner */
.superuser-banner {
  background: var(--cg-superuser-red);
  color: var(--cg-white);
  font-weight: 700;
  text-align: center;
  letter-spacing: .5px;
  padding: .5rem .75rem;
  border-bottom: 2px solid var(--cg-superuser-border);
}


/* ==========================================================================
   4. Components
   ========================================================================== */

/* Buttons */
.btn {
  display: inline-block; /* Added for consistency */
  background-color: var(--cg-lime-green);
  color: var(--cg-dark-blue);
  border: none;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: var(--cg-border-radius-sm);
  cursor: pointer;
  text-decoration: none; /* For <a> tags used as buttons */
  transition: background-color 0.2s ease-in-out;
}

.btn:hover {
  background-color: var(--cg-lime-green-hover);
}

/* Cards and Panels */
.card, .panel, .module {
  background-color: var(--cg-white);
  padding: 2rem;
  border-radius: var(--cg-border-radius-md);
  box-shadow: var(--cg-box-shadow-md);
}

/* Forms */
input, select, textarea {
  border: 1px solid var(--cg-border-color);
  padding: 0.5rem;
  border-radius: var(--cg-border-radius-sm);
  background-color: var(--cg-white);
  color: var(--cg-dark-blue);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--cg-lime-green);
  outline: none;
  box-shadow: 0 0 0 3px var(--cg-focus-shadow);
}

.form-errorlist {
  color: var(--cg-error-red);
  list-style: none;
  padding-left: 0;
  margin: 0.25rem 0 0 0;
}

.form-field-error {
  border-color: var(--cg-status-red);
}

/* Radio Select List */
.radio-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.radio-list li {
  display: flex;
  align-items: center;
  margin-bottom: 0.25rem;
}
.radio-list input[type="radio"] {
  margin-right: 0.25rem;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  text-align: left;
  padding: 0.75rem;
  border-bottom: 1px solid var(--cg-border-color);
}

th {
  background-color: var(--cg-light-gray);
  color: var(--cg-dark-blue);
  font-weight: 600;
}

/* Loading Dots Animation */
.loading-dots {
  display: inline-block;
  font-size: 0;
  width: 24px;
  height: 8px;
}

.loading-dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 2px;
  background-color: var(--cg-text-gray);
  border-radius: 50%;
  animation: loading-bounce 1s infinite ease-in-out;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes loading-bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-3px); }
}

/* Share Menu Dropdown */
.share-menu {
  position: absolute;
  right: 0;
  margin-top: 0.5rem;
  width: 12rem;
  background-color: var(--cg-white);
  border: 1px solid var(--cg-dark-blue);
  border-radius: var(--cg-border-radius-sm);
  box-shadow: var(--cg-box-shadow-lg);
  padding: 0.5rem;
  z-index: 50;
}

.share-menu::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  right: 1rem;
  border-width: 0 0.5rem 0.5rem 0.5rem;
  border-style: solid;
  border-color: transparent transparent var(--cg-dark-blue) transparent;
}

.share-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 4px; /* smaller radius for internal items */
}

.share-menu-item:hover {
  background-color: var(--cg-hover-bg);
}

/* Feedback Button & Tooltip */
.feedback-btn-wrapper:hover .feedback-tooltip {
  opacity: 1;
  transform: translateY(0);
}

.feedback-tooltip {
  position: absolute;
  bottom: 3.5rem;
  right: 0;
  background-color: var(--cg-dark-blue);
  color: var(--cg-white);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  font-size: 0.875rem;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.2s, transform 0.2s;
  z-index: 50;
}

/* User Menu */
.user-menu-panel {
  background-color: var(--cg-white);
  color: var(--cg-dark-blue);
  border: 1px solid var(--cg-lime-green);
}

.user-menu-link {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--cg-dark-blue);
}

.user-menu-link:hover {
  background-color: var(--cg-lime-green);
  color: var(--cg-dark-blue);
}


/* ==========================================================================
   5. Utility Classes
   ========================================================================== */

/* Backgrounds */
.bg-primary { background-color: var(--cg-dark-blue); }
.bg-accent { background-color: var(--cg-lime-green); }
.bg-surface { background-color: var(--cg-light-gray); }

/* Text Colors */
.text-primary { color: var(--cg-dark-blue); }
.text-accent { color: var(--cg-lime-green); }
.text-hover-bg { color: var(--cg-hover-bg); }
.text-muted { color: var(--cg-text-gray); }
.text-status-red { color: var(--cg-status-red); }
.text-white { color: var(--cg-white); }

.border-primary { border-color: var(--cg-dark-blue); }
.border-accent { border-color: var(--cg-lime-green); }
.border-surface { border-color: var(--cg-light-gray); }
.hover\:bg-surface:hover { background-color: var(--cg-light-gray); }
.hover\:bg-accent:hover { background-color: var(--cg-lime-green); }
.hover\:border-primary:hover { border-color: var(--cg-dark-blue); }
.hover\:text-primary:hover { color: var(--cg-dark-blue); }
.focus\:ring-accent:focus { --tw-ring-color: var(--cg-lime-green); }

/* Status Indicators */
.status-red { 
  background-color: var(--cg-status-red); 
  color: var(--cg-white); 
}
.status-yellow { 
  background-color: var(--cg-status-yellow); 
  color: var(--cg-dark-blue); 
}

/* White logo utility */
.logo-white {
  filter: brightness(0) invert(1);
}

/* Whitespace & Overflow */
.whitespace-pre-wrap { white-space: pre-wrap; }
.transcript-box {
  max-height: 25em;
  overflow-y: auto;
  white-space: pre-wrap;
}

/* Animations */
.fade-in {
  animation: fadeIn 1.5s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/*
 * NOTE on .dashboard-widget-hidden:
 * Using `display: none` without `!important` is preferred.
 * Control visibility by adding/removing this class with JavaScript.
 * If overrides are still an issue, you may need a more specific selector,
 * for example: `body.dashboard .widget.is-hidden { display: none; }`
 */
.is-hidden {
  display: none;
}