/* Custom CSS for CRM System */

/* Logo styling */
.logo-container {
    text-align: center;
    margin-bottom: 2rem;
}

.logo {
    max-width: 200px;
    height: auto;
    margin-bottom: 1rem;
}

.logo-text {
    font-size: 2rem;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.logo-subtitle {
    color: #7f8c8d;
    font-size: 1rem;
}

/* Login page improvements */
.login-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    width: 100%;
    max-width: 400px;
}

/* Dashboard improvements */
.dashboard-stats {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

.stat-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 1rem;
}

.stat-number {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Task cards */
.task-card {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
    border-left: 4px solid #3498db;
}

.task-card.high-priority {
    border-left-color: #e74c3c;
}

.task-card.medium-priority {
    border-left-color: #f39c12;
}

.task-card.low-priority {
    border-left-color: #27ae60;
}

/* Status badges */
.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
}

.status-pending {
    background-color: #f39c12;
    color: white;
}

.status-in-progress {
    background-color: #3498db;
    color: white;
}

.status-completed {
    background-color: #27ae60;
    color: white;
}

.status-reopened {
    background-color: #e74c3c;
    color: white;
}

/* Team management */
.team-card {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

.team-member {
    display: inline-block;
    background: #ecf0f1;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    margin: 0.25rem;
    font-size: 0.9rem;
}

/* Comments section */
.comments-section {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.comment {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.comment-author {
    font-weight: bold;
    color: #2c3e50;
}

.comment-date {
    font-size: 0.8rem;
    color: #7f8c8d;
}

/* Employee management */
.employee-card {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
    border-left: 4px solid #3498db;
}

.employee-card.suspended {
    border-left-color: #e74c3c;
    opacity: 0.7;
}

.employee-card.deleted {
    border-left-color: #95a5a6;
    opacity: 0.6;
    background-color: #f8f9fa;
}

.employee-card.deleted h5 {
    color: #6c757d;
}

.employee-card.deleted .text-muted {
    color: #adb5bd !important;
}

/* Deleted employees section */
.deleted-employees-section {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 2rem;
    border: 1px solid #dee2e6;
}

/* Dependency badges */
.badge.bg-warning {
    background-color: #f39c12 !important;
}

.badge.bg-primary {
    background-color: #3498db !important;
}

.badge.bg-info {
    background-color: #17a2b8 !important;
}

.badge.bg-success {
    background-color: #27ae60 !important;
}

/* Safe delete button */
.btn-danger.btn-sm {
    font-size: 0.875rem;
}

.btn-danger.btn-sm .fas {
    margin-right: 0.25rem;
}

/* Navigation improvements */
.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
}

.navbar-nav .nav-link {
    font-weight: 500;
}

/* Form improvements */
.form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 25px;
    padding: 0.75rem 2rem;
    font-weight: 500;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    transform: translateY(-1px);
}

.btn-danger {
    border-radius: 25px;
    padding: 0.75rem 2rem;
    font-weight: 500;
}

.btn-success {
    border-radius: 25px;
    padding: 0.75rem 2rem;
    font-weight: 500;
}

/* Responsive design */
@media (max-width: 768px) {
    .login-card {
        margin: 1rem;
        padding: 1.5rem;
    }
    
    .stat-card {
        margin-bottom: 1rem;
    }
    
    .task-card, .team-card, .employee-card {
        margin-bottom: 1rem;
    }
}

/* Loading animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Flash messages */
.alert {
    border-radius: 10px;
    border: none;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
}

.alert-error {
    background-color: #f8d7da;
    color: #721c24;
}

.alert-info {
    background-color: #d1ecf1;
    color: #0c5460;
} 

main, .container-fluid {
    padding-bottom: 3rem;
} 

/* === HSZ CRM Light Modern Theme (Stripe-like) === */
:root{
  --hsz-bg:#f8fafc;
  --hsz-card:#ffffff;
  --hsz-border:#e5e7eb;
  --hsz-text:#0f172a;
  --hsz-muted:#64748b;
  --hsz-primary:#4f46e5;
  --hsz-primary-hover:#4338ca;
  --hsz-ring:rgba(79,70,229,.25);
}

body{background:var(--hsz-bg);color:var(--hsz-text);}
html, body{ overflow-x: hidden; }
.navbar{border-bottom:1px solid var(--hsz-border);}
.hsz-navbar{ position: sticky; top: 0; z-index: 1030; }
.hsz-navbar .navbar-brand{ font-size: 1.25rem; }
.hsz-navbar .navbar-nav{ align-items:center; }
.hsz-navbar .nav-link{ white-space: nowrap; padding:.55rem .75rem; display:flex; align-items:center; gap:.45rem; }
.hsz-navbar .dropdown-item{ display:flex; align-items:center; gap:.5rem; }
.hsz-navbar .navbar-toggler{ border-radius: 12px; }
.navbar .navbar-brand,.navbar .nav-link{color:var(--hsz-text)!important;}
.navbar .nav-link:hover,.navbar .nav-link:focus{color:var(--hsz-primary)!important;}

.dropdown-menu{
  border:1px solid var(--hsz-border);
  box-shadow:0 10px 20px rgba(2,6,23,.08);
  border-radius:12px;
}

.card{border:1px solid var(--hsz-border);border-radius:16px;}
.card-header{background:var(--hsz-card);border-bottom:1px solid var(--hsz-border);}

.badge-soft{
  background:rgba(79,70,229,.08);
  color:var(--hsz-primary);
  border:1px solid rgba(79,70,229,.18);
}

.btn{border-radius:12px;}
.btn-primary{background-color:var(--hsz-primary)!important;border-color:var(--hsz-primary)!important;}
.btn-primary:hover,.btn-primary:focus{
  background-color:var(--hsz-primary-hover)!important;
  border-color:var(--hsz-primary-hover)!important;
  box-shadow:0 0 0 .2rem var(--hsz-ring)!important;
}

/* ✅ Standard sizes */
.btn-cta{
  min-width:170px;
  min-height:44px;
  padding:.55rem 1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}

.btn-icon{
  width:44px;
  height:44px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
}

/* enforce height for non-small buttons */
.btn:not(.btn-sm):not(.btn-icon){
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}

/* enforce CTA width for primary/secondary main buttons, but not small/table icons */
.btn.btn-primary:not(.btn-sm):not(.btn-icon),
.btn.btn-success:not(.btn-sm):not(.btn-icon),
.btn.btn-danger:not(.btn-sm):not(.btn-icon),
.btn.btn-secondary:not(.btn-sm):not(.btn-icon),
.btn.btn-outline-primary:not(.btn-sm):not(.btn-icon),
.btn.btn-outline-secondary:not(.btn-sm):not(.btn-icon){
  min-width:170px;
}

.form-control,.form-select{border-radius:12px;border-color:var(--hsz-border);}
.form-control:focus,.form-select:focus{border-color:var(--hsz-primary);box-shadow:0 0 0 .2rem var(--hsz-ring);}


/* Internal messaging */
.no-resize{ resize: none; overflow: auto; }


/* Unified card action buttons (better UX) */
.btn-card-action{height:44px;min-width:170px;border-radius:12px;font-weight:600;}
.employee-action-row .flex-fill{min-width:170px;}

/* Global content container spacing */
.hsz-main{ padding: 1rem 1.25rem 3rem; }
@media (min-width: 1200px){
  .hsz-main{ max-width: 1400px; margin: 0 auto; }
}

/* Square icon buttons (tables / quick actions) */
.btn-icon{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 12px;
}
.btn-icon i{ margin: 0; }

/* Employee card actions: full width + consistent height */
.employee-actions .btn{
  width: 100%;
  height: 44px;
}

/* === v4 UI polish: consistent action buttons (customers, tables, etc.) === */
.action-buttons{display:flex;align-items:center;gap:10px;justify-content:center;}
.action-buttons form{margin:0;}
.action-buttons .btn-icon{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  border-radius:12px !important;
}


/* === Minimal navbar responsiveness fix === */
.hsz-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
}

.hsz-navbar .navbar-nav .nav-link {
  white-space: nowrap;
}

.hsz-navbar-user {
  flex-shrink: 0;
}

.hsz-navbar .dropdown-menu {
  border-radius: 10px;
}

@media (max-width: 1399.98px) {
  .hsz-navbar .navbar-collapse {
    flex-basis: 100%;
  }

  .hsz-navbar .hsz-nav {
    padding-top: .75rem;
  }

  .hsz-navbar .hsz-nav .nav-item {
    width: 100%;
  }

  .hsz-navbar .hsz-nav .nav-link {
    padding-left: .25rem;
    padding-right: .25rem;
  }

  .hsz-navbar .dropdown-menu {
    position: static;
    float: none;
    border: 0;
    box-shadow: none;
    padding-left: .75rem;
    margin-top: 0;
  }
}


/* === Patch 6: employee deleted actions === */
.deleted-employee-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.deleted-employee-actions form{
  flex:1 1 calc(50% - 6px);
  margin:0;
}
.deleted-employee-actions .btn{
  width:100%;
  min-height:42px;
  border-radius:12px;
  font-weight:600;
}

/* === Patch 6: better customer table action buttons === */
.customer-action-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.customer-action-bar form{margin:0;}
.btn-action-icon{
  width:44px;
  height:44px;
  min-width:44px;
  border:none;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(15,23,42,.10);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn-action-icon i{font-size:1rem;}
.btn-action-icon:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(15,23,42,.14);
}
.btn-action-icon:focus-visible{
  outline:none;
  box-shadow:0 0 0 .22rem rgba(79,70,229,.22), 0 14px 28px rgba(15,23,42,.14);
}
.btn-view{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;}
.btn-assign{background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);color:#fff;}
.btn-edit{background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%);color:#fff;}
.btn-delete{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);color:#fff;}
.btn-view:hover,.btn-assign:hover,.btn-edit:hover,.btn-delete:hover,
.btn-view:focus,.btn-assign:focus,.btn-edit:focus,.btn-delete:focus{color:#fff;text-decoration:none;}

/* === Patch 6: small responsive touch-ups === */
@media (max-width: 767.98px){
  .deleted-employee-actions form{
    flex:1 1 100%;
  }
  .customer-action-bar{
    justify-content:flex-start;
  }
}