/* ==========================================================================
   Theme Name: H and T Development
   Author: Hunter Thomas
   Description: Custom portfolio theme for H&T Development showcasing projects.
   Version: 1.0.0
   License: GNU General Public License v2 or later
   License URI: https://www.gnu.org/licenses/gpl-2.0.html
   Text Domain: h-and-t-development
   ========================================================================== */



:root {

  /* === Surface & Card Backgrounds === */
  --bg-card-color: #2b4258; 
  /* Medium-dark card surface, not too dark */

  /* === Brand Colors === */
  --color-primary: #e6edf3; 
  /* Clean light text for headers / nav (replaces beige) */
  
  --color-secondary: #3c6a8a; 
  /* Muted professional blue — better for buttons/headings */

  /* === Text Colors === */
  --color-text: #d5e0e8; 
  /* High-contrast but soft white-blue */

  --color-text-muted: #9fb4c5; 
  /* Soft gray-blue for subtext */

  /* === Backgrounds & Layout === */
  --color-bg: #25323f;
  /* Medium-dark background (NOT too dark like before) */

  --bg-card-color: #2b4258;
  /* Reapply because you duplicated the variable */

  --border-color: #35506a;
  /* Soft border, subtle contrast */

  /* === Accent & Overlay Colors === */
  --color-accent: #4fb0ff;
  /* Clean modern blue accent */

  --bg-hero-color: rgba(31, 46, 58, 0.85);
  /* Slightly lighter & cleaner overlay */

  /* === Visual Enhancements === */
  --border-radius: 12px;

  --shadow-soft: 0px 6px 18px rgba(0,0,0,0.25);
  /* Softer but visible on dark background */

  --shadow-medium: 0px 12px 32px rgba(0,0,0,0.35);
  /* Stronger shadow for cards */

  /* === Typography === */
  --font-body: "Segoe UI", "Helvetica Neue", sans-serif;
  --font-size-grid-title: 1rem;
  --font-size-header: 3rem;
  --font-size-medium: 2rem;
  --font-weight-strong: 600;
}

.small-section-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  /* faint divider for visual grouping */
  margin: 20px 0;
}

.large-section-divider {
  border: none;
  border-top: 3px solid rgba(255, 255, 255, 0.15);
  /* faint divider for visual grouping */
  margin: 20px 0;
}


.chart-label {
  margin-top: 10px;
  font-size: 1.1rem;
  color: var(--color-primary);
  text-align: center;
}

.task-divider {
  grid-column: 1 / -1;
  /* span all columns */
  height: 1px;
  background-color: rgba(255, 255, 255, 0.15);
  /* match your section-divider */

}

.dropdown-icon {
  transform: rotate(0deg);
  /* Default position (arrow up) */
  transition: transform 0.25s ease, opacity 0.25s ease;
  opacity: 0;

  /* Smooth rotation animation */
}

.dropdown-toggle:hover .dropdown-icon {
  opacity: 1;
}


.toggle-open .dropdown-icon {
  transform: rotate(180deg);
  /* Rotates arrow when open */
}

.dropdown-toggle {
  position: relative;
  /* Establishes positioning for dropdown-menu */
  cursor: pointer;
  /* Indicates interactivity */
}

.dropdown-menu {
  display: none;
  /* Hidden until toggled */
  flex-direction: column;
  /* Stack items vertically */
  position: absolute;
  /* Positioned relative to parent */
  top: 100%;
  /* Appears below parent cell */
  left: 0;
  /* Aligns left edge with parent */
  width: 100%;
  /* Matches parent column width */
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  /* Soft shadow effect */
  background-color: var(--color-bg);
  /* Match background color */
  z-index: 10;
  /* Ensure it appears above other elements */
}

.dropdown-item {
  color: var(--color-primary);
  /* Text color matching theme */
  white-space: nowrap;
  /* Prevent text wrapping */
  text-align: left;
  /* Align text left */
  padding: 10px 12px;
  /* Consistent padding */
  color: white;
}

.task-progress-to-do {
  border: 1px solid red;
  /* Defines red border */
  background-color: red;
  /* Red background fill */
  color: white;
  /* White text contrast */
  position: relative;
  /* Needed for absolute-positioned dropdown */
}

.task-progress-done {
  border: 1px solid #22c55e;
  background-color: #22c55e;
  color: white;
}

.task-progress-in-progress {
  border: 1px solid #facc15;
  background-color: #facc15;
  color: white;
}

.dashboard-title-container {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.dashboard-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
}

.dashboard-subtitle {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
}

.partners-strip img {
    filter: brightness(0) invert(1) opacity(0.8);
    transition: opacity 0.2s ease;
}

.partners-strip img:hover {
    opacity: 1;
}
.footer {
    background: transparent !important;
}
::-webkit-scrollbar {
  display: none;
}
@media print {

  /* 1) Hide everything by default */
  body * {
    visibility: hidden !important;
  }

  /* 2) Show only invoice area */
  #invoice-print-area,
  #invoice-print-area * {
    visibility: visible !important;
  }

  /* 3) Remove sidebar/dashboard transforms that break printing */
  .page-wrapper,
  .page-content,
  #sidebar {
    transform: none !important;
    overflow: visible !important;
  }

  /* 4) Place invoice at top-left so it prints clean */
  #invoice-print-area {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
  }

  /* 5) Hide UI chrome */
  .sidebar-wrapper,
  .top-header,
  footer,
  .d-print-none {
    display: none !important;
  }

  /* 6) Remove shadows */
  .shadow,
  .card {
    box-shadow: none !important;
  }
}
.ht-tasks-table {
  overflow: visible !important; /* won’t always help alone, but safe */
}

.ht-flash-alert {
    animation: htFlashFadeOut 4.5s ease forwards;
}

@keyframes htFlashFadeOut {
    0% {
        opacity: 1;
        max-height: 200px;
        margin-top: 1rem;
    }
    70% {
        opacity: 1;
        max-height: 200px;
    }
    100% {
        opacity: 0;
        max-height: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
    }
}