/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
 /*
  *= require_self
 *= require_tree ./components
 *= require_tree ./pages
 *= require flash_messages
 *= require calendar
 *= require_tree .
 */

 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

 :root {
   --sidebar-width: 280px;
   --sidebar-bg: #1e293b;
   --sidebar-active: #3b82f6;
   --header-bg: #ffffff;
   --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
 body {
   font-family: 'Inter', sans-serif;
   background-color: #f8fafc;
   color: #334155;
 }
 
 /* Sidebar */
 .sidebar {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   width: var(--sidebar-width);
   background-color: var(--sidebar-bg);
   padding: 1.5rem 0;
   transition: all 0.3s ease;
   z-index: 1000;
   overflow-y: auto;
 }
 
 .sidebar-brand {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 1.5rem 2rem;
   text-decoration: none;
   font-size: 1.25rem;
   font-weight: 600;
 }
 
 .sidebar-brand i {
   margin-right: 0.75rem;
   font-size: 1.5rem;
 }

 .sidebar-brand strong {
      color: #0d6efd;
    }
 
 .sidebar-nav {
   padding: 0 1rem;
 }
 
 .sidebar-header {
   padding: 0.5rem 1rem;
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   color: #94a3b8;
   margin-top: 1rem;
   letter-spacing: 0.05em;
   opacity: 0.8;
   list-style-type: none;
 }
 
 .sidebar-header:first-child {
   margin-top: 0;
 }
 
 .sidebar-item {
   margin-bottom: 0.25rem;
 }
 
 .sidebar-link {
   display: flex;
   align-items: center;
   padding: 0.75rem 1rem;
   color: #e2e8f0;
   border-radius: 0.5rem;
   text-decoration: none;
   transition: all 0.2s ease;
 }
 
 .sidebar-link:hover, 
 .sidebar-link.active {
   background-color: rgba(255, 255, 255, 0.1);
   color: white;
 }
 
 .sidebar-link i {
   margin-right: 0.75rem;
   font-size: 1.1rem;
   width: 24px;
   text-align: center;
 }
 
 /* Main Content */
 .main-content {
   margin-left: var(--sidebar-width);
   transition: all 0.3s ease;
 }
 
 /* Top Navigation */
 .top-navbar {
   background-color: var(--header-bg);
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
   padding: 1rem 1.5rem;
   position: sticky;
   top: 0;
   z-index: 100;
 }
 
 .user-menu {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 0.5rem;
   border-radius: 0.5rem;
   transition: background-color 0.2s ease;
 }
 
 .user-menu:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
 .user-avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid #fff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 /* Cards */
 .dashboard-card {
   transition: all 0.2s ease;
   border: none;
 }
 
 .dashboard-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
 }
 
 .card-icon {
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 12px;
   margin-bottom: 1rem;
 }
 
 .card-icon.users {
   background-color: #e0f2fe;
   color: #0369a1;
 }
 
 .card-icon.invoices {
   background-color: #fce7f3;
   color: #be185d;
 }
 
 .card-icon.timelogs {
   background-color: #dcfce7;
   color: #15803d;
 }
 
 .card-icon.revenue {
   background-color: #fef3c7;
   color: #b45309;
 }
 
 /* Responsive */
 @media (max-width: 992px) {
   .sidebar {
     transform: translateX(-100%);
   }
   
   .sidebar.active {
     transform: translateX(0);
   }
   
   .main-content {
     margin-left: 0;
   }
   
   .sidebar-toggle {
     display: block !important;
   }
 }

.todays-hours-card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}
 
 /* Animations */
 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
 }
 
 .animate-fade-in {
   animation: fadeIn 0.3s ease-out forwards;
 }

/* Dashboard Card Styles */
.dashboard-card {
  transition: all 0.2s ease;
  border: none;
}

.dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.hover-scale {
  transition: transform 0.2s ease;
}

.hover-scale:hover {
  transform: scale(1.02);
}

/* Alert Styles */
.alert {
  border-radius: 0.5rem;
}

/* Progress Bar Styles */
.progress {
  height: 0.5rem;
  border-radius: 0.25rem;
}

/* Icon Styles */
.rounded-circle {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Settings Form Styles */
.form-check-input:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

.form-check-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
}

.form-check-input {
  width: 3em;
  height: 1.5em;
}

/* Card Styles */
.card {
  transition: transform 0.2s ease-in-out;
}

.card:hover {
  transform: translateY(-2px);
}

/* Utility Classes */
.bg-light {
  background-color: #f8f9fa !important;
}

.text-primary {
  color: #3b82f6 !important;
}