/* ======================================
  MONOCHROME OVERRIDES (Black & White)
  Enforce neutral styling for formerly color-coded UI.
  ====================================== */

/* Neutralize gradient utilities to solid white */
[class*="bg-gradient-"] { background-image: none !important; background-color: #fff !important; }

/* Map Tailwind yellow/amber utilities to neutral monochrome */
/* Text colors */
.text-yellow-100, .text-amber-100 { color: #d1d5db !important; }
.text-yellow-200, .text-amber-200 { color: #9ca3af !important; }
.text-yellow-300, .text-amber-300 { color: #9ca3af !important; }
.text-yellow-400, .text-amber-400 { color: #6b7280 !important; }
.text-yellow-500, .text-amber-500 { color: #374151 !important; }
.text-yellow-600, .text-amber-600 { color: #111827 !important; }
.text-yellow-700, .text-amber-700 { color: #111827 !important; }
.hover\:text-yellow-700:hover, .hover\:text-amber-700:hover { color: #111827 !important; }
.hover\:text-yellow-600:hover, .hover\:text-amber-600:hover { color: #111827 !important; }

/* Background colors */
.bg-yellow-50, .bg-amber-50 { background-color: #f9fafb !important; }
.bg-yellow-100, .bg-amber-100 { background-color: #f3f4f6 !important; }
.bg-yellow-500, .bg-amber-500 { background-color: #111827 !important; color:#fff !important; }
.bg-yellow-600, .bg-amber-600 { background-color: #000 !important; color:#fff !important; }
.hover\:bg-yellow-100:hover, .hover\:bg-amber-100:hover { background-color: #f3f4f6 !important; }

/* Border colors */
.border-yellow-100, .border-amber-100 { border-color: #e5e7eb !important; }
.border-yellow-200, .border-amber-200 { border-color: #e5e7eb !important; }
.border-yellow-500, .border-amber-500 { border-color: #111827 !important; }
.border-yellow-600, .border-amber-600 { border-color: #000 !important; }
.hover\:border-yellow-500:hover, .hover\:border-amber-500:hover { border-color: #111827 !important; }

/* Buttons */
.btn-primary, button[type="submit"] { background:#000 !important; color:#fff !important; box-shadow:none; }
.btn-primary:hover, button[type="submit"]:hover { background:#000 !important; box-shadow:none; transform:none; }
.btn-secondary, button[type="reset"] { background:#fff !important; color:#000 !important; border-color:#e5e7eb !important; }
.btn-secondary:hover, button[type="reset"]:hover { background:#f5f5f5 !important; border-color:#d1d5db !important; }

/* Status badges */
.status-badge { border-color:#d1d5db !important; }
.status-badge.active,
.status-badge.disposed,
.status-badge.closed,
.status-badge.withdrawn { background:#f5f5f5 !important; color:#000 !important; }

/* Generic status fills */
.status-pending,
.status-in-progress,
.status-completed,
.status-overdue { background:#f5f5f5 !important; color:#000 !important; }

/* Priority badges */
.priority-urgent,
.priority-high,
.priority-normal,
.priority-low { background:#e5e7eb !important; color:#111 !important; }

/* Stat cards accents */
.stat-primary, .stat-success, .stat-warning, .stat-danger { border-left: 4px solid #000 !important; }
.stat-primary .stat-value,
.stat-success .stat-value,
.stat-warning .stat-value,
.stat-danger .stat-value { color:#000 !important; }
/* Theme tokens */
:root{
  /* Monochrome palette */
  --primary: #000000;   /* black */
  --primary-600:#000000; /* black (strong) */
  --primary-50:#ffffff; /* white */
  --text:#000000;        /* black text */
  --muted:#333333;       /* dark grey for subtle text */
  --card:#ffffff;        /* white surfaces */
  --border:#e5e7eb;      /* neutral border */
  --bg:#ffffff;          /* page background */
}

html,body { 
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 
}

/* ======================================
   BRAND UTILITIES (used across site)
   ====================================== */
.brand-text { color: var(--primary-600) !important; }
.brand-link { color: inherit; transition: color .2s ease; }
.brand-link:hover, .brand-link:focus-visible { color: var(--primary) !important; text-decoration: underline; }
.brand-btn { background-color: var(--primary) !important; color:#fff !important; transition: background .2s ease, box-shadow .2s ease; }
.brand-btn:hover { background-color: var(--primary-600) !important; }

/* Common form focus utility used in register/login */
.input-field:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.2);
}

/* =====================
   PAGE STRUCTURE
===================== */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.page-header h1 {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 700;
  color: var(--primary-600);
}

.page-header p {
  color: #4b5563; /* Gray-600 */
  font-size: 1rem;
  margin-top: 0.25rem;
}

.page-section {
  margin-top: 1.5rem;
}


/* ======================================
   CARDS
   ====================================== */
.card{
  background:var(--card); 
  border:1px solid var(--border); 
  border-radius:1rem; 
  padding:1.25rem;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  transition: all 0.2s ease;
}
.card--compact{
  padding: .5rem .75rem; /* tighter summary cards */
}
.card--compact h2{
  font-size: 1.125rem; /* text-lg */
}
.card--compact p{
  font-size: .75rem; /* text-xs */
}
.card:hover{ 
  box-shadow:0 6px 16px rgba(0,0,0,.08); 
}
.card-title{ 
  /* Unified section header style (match Team tab headers) */
  font-weight:600; /* semibold */
  color:var(--primary-600);
  font-size: 1.25rem; /* text-xl */
  margin-bottom: 1rem; /* mb-4 */
}
.card-body p{ 
  color:#374151; 
  margin:.25rem 0; 
}
.card-footer{
  display:flex; 
  gap:.5rem; 
  justify-content:flex-end; 
  align-items:center;
  border-top:1px solid var(--border); 
  padding-top:.75rem; 
  margin-top:.75rem;
}

/* ======================================
   STATUS BADGES
   ====================================== */
.status-badge{
  display:inline-flex; 
  align-items:center; 
  font-weight:600;
  font-size:.75rem; 
  padding:.25rem .6rem; 
  border-radius:9999px; 
  border:1px solid var(--border);
}
.status-badge.active{ 
  background:#ecfdf5; 
  color:#065f46; 
  border-color:#6ee7b7; 
}
.status-badge.disposed{ 
  background:#eff6ff; 
  color:#1e40af; 
  border-color:#93c5fd; 
}
.status-badge.closed{ 
  background:#f3f4f6; 
  color:#374151; 
  border-color:#d1d5db; 
}
.status-badge.withdrawn{ 
  background:#fffbeb; 
  color:#92400e; 
  border-color:#fcd34d; 
}

/* ======================================
   BUTTONS - UNIFORM STYLING
   ====================================== */
.btn-primary, 
button[type="submit"]{
  background:var(--primary); 
  color:#fff; 
  font-weight:600;
  padding:.625rem 1.25rem; 
  border-radius:.5rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.95rem;
}
.btn-primary:hover,
button[type="submit"]:hover{ 
  background:var(--primary-600);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 186, 34, 0.25);
}

.btn-secondary,
button[type="reset"]{
  background:#fff;
  color:var(--primary); 
  font-weight:600;
  padding:.625rem 1.25rem; 
  border-radius:.5rem;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.95rem;
}
.btn-secondary:hover,
button[type="reset"]:hover{
  background:var(--primary-50);
  border-color: var(--primary);
}

.btn-link{
  background:var(--primary-50); 
  color:var(--primary); 
  font-weight:600;
  padding:.35rem .8rem; 
  border-radius:.5rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-link:hover{ 
  background:#ffe8b3; 
}
.hover\:text-indigo-200:hover { color: #fff1cc !important; }
.text-indigo-200 { color: #fff1cc !important; }

/* Alpine cloak utility */
[x-cloak]{display:none !important}

/* Research sub-tabs minor spacing */
.tabs.tabs--sub{gap:.75rem;margin-bottom:1rem}

/* ======================================
   OVERRIDES FOR TAILWIND INDIGO CLASSES
   Maps indigo utilities to brand colors, so we don't edit markup.
   ====================================== */
/* Text colors */
.text-indigo-800 { color: var(--primary-600) !important; }
.text-indigo-700 { color: var(--primary-600) !important; }
.text-indigo-600 { color: var(--primary) !important; }
.text-indigo-400 { color: var(--primary) !important; }
.text-indigo-200 { color: #9ca3af !important; }
.text-indigo-100 { color: #d1d5db !important; }

/* Background colors */
.bg-indigo-900, .bg-indigo-800, .bg-indigo-700 { background-color: var(--primary-600) !important; }
.bg-indigo-600 { background-color: var(--primary) !important; }
.bg-indigo-100, .bg-indigo-50 { background-color: var(--primary-50) !important; }

/* Border colors */
.border-indigo-500, .border-indigo-600, .border-indigo-700 { border-color: var(--primary-600) !important; }
.border-indigo-100, .border-indigo-200 { border-color: var(--primary-50) !important; }

/* Hover states */
.hover\:bg-indigo-700:hover { background-color: var(--primary-600) !important; }
.hover\:bg-indigo-600:hover { background-color: var(--primary-600) !important; }
.hover\:bg-indigo-100:hover, .hover\:bg-indigo-50:hover { background-color: var(--primary-50) !important; }
.hover\:text-indigo-700:hover, .hover\:text-indigo-600:hover { color: var(--primary) !important; }
.hover\:text-indigo-400:hover { color: var(--primary) !important; }

/* Ring override for focus states (Tailwind rings) */
.focus\:ring-indigo-500:focus { --tw-ring-color: var(--primary) !important; }

.btn-warning{
  background:#fef3c7; 
  color:#92400e; 
  font-weight:600;
  padding:.35rem .8rem; 
  border-radius:.5rem;
  border: 1px solid #fcd34d;
  cursor: pointer;
}
.btn-warning:hover{ 
  background:#fde68a; 
}

.btn-danger{
  background:#fee2e2; 
  color:#991b1b; 
  font-weight:600;
  padding:.35rem .8rem; 
  border-radius:.5rem;
  border: 1px solid #fca5a5;
  cursor: pointer;
}
.btn-danger:hover{ 
  background:#fecaca; 
}

/* ======================================
   FORMS - UNIFORM INPUT STYLING
   ====================================== */

/* Form labels */
label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 0.375rem;
}

/* All text inputs, selects, textareas */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
select,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .625rem .875rem;
  outline: 0;
  background: #fff;
  color: var(--text);
  font-size: 0.95rem;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.02);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.15);
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: #9ca3af;
}

/* Select dropdown styling */
select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

/* Search input (specific styling) */
.input-search{
  width:100%; 
  border:1px solid var(--border); 
  border-radius:.75rem;
  padding:.85rem 1.1rem; 
  outline:0; 
  background:#fff; 
  color:#111827;
  box-shadow: 0 1px 2px rgba(0,0,0,.02);
}
.input-search:focus{
  border-color:var(--primary); 
  box-shadow:0 0 0 3px rgba(79,70,229,.15);
}

/* Form grid layout */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

/* ======================================
   FEEDBACK MESSAGES
   ====================================== */
.feedback-success {
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  color: #065f46;
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.feedback-error {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

/* ======================================
   TABS
   ====================================== */
.tabs{ 
  display:flex; 
  gap:1rem; 
  border-bottom:2px solid var(--border); 
  margin-bottom:1rem; 
  overflow-x:auto; 
}
.tabs button{
  position:relative; 
  padding:.625rem 0; 
  font-weight:600; 
  color:var(--muted); 
  white-space:nowrap;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.tabs button:hover {
  color: var(--primary-600);
}
.tabs button.active{ 
  color:var(--primary); 
}
.tabs button.active::after{
  content:""; 
  position:absolute; 
  left:0; 
  bottom:-2px; 
  width:100%; 
  height:3px; 
  background:var(--primary); 
  border-radius:1rem;
}

/* ======================================
   TABLES
   ====================================== */
.table-wrapper{ 
  overflow-x:auto; 
  border:1px solid var(--border); 
  border-radius:.75rem; 
  background:#fff; 
}
.table-wrapper table{ 
  width:100%; 
  border-collapse:collapse; 
  font-size:.92rem; 
}
.table-wrapper th, 
.table-wrapper td{ 
  padding:.75rem 1rem; 
  border-bottom:1px solid var(--border); 
  text-align:left; 
}
.table-wrapper th{ 
  background:var(--primary-50); 
  color:var(--primary); 
  font-weight:700; 
}
.table-wrapper tr:last-child td {
  border-bottom: none;
}

/* ======================================
   TYPOGRAPHY — Consistent Page Styling
   ====================================== */

/* Headings — consistent, elegant typography */
h1, h2, h3, h4, h5, h6 {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  line-height: 1.25;
}

/* Main Page Title (Dashboard / My Cases / Calendar etc.) */
h1 {
  font-size: 2rem;
  line-height: 2.25rem;
  color: var(--primary);
  text-shadow: 0 1px 1px rgba(79, 70, 229, 0.05);
}

/* Section Title (e.g., "Upcoming Hearings", "Top Clients") */
h2 {
  font-size: 1.375rem;
  line-height: 1.75rem;
  color: var(--text);
  font-weight: 700;
}

/* Widget/Tab Titles */
h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
}

/* Minor section headers, used inside cards */
h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
}

/* ======================================
   PARAGRAPH & BODY TEXT
   ====================================== */
p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

/* Secondary paragraph (like subtitles or footnotes) */
p.small,
.text-small {
  font-size: 0.85rem;
  color: #9ca3af;
}

/* Muted text or sublabels */
.text-muted {
  color: var(--muted);
}

/* Strong emphasis inside paragraphs */
p strong {
  color: var(--text);
  font-weight: 600;
}

/* ======================================
   PAGE TITLES & INTRO BLOCKS
   ====================================== */
.page-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}

.page-subtitle {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 2rem;
  line-height: 1.5;
}

/* ======================================
   UTILITY CLASSES
   ====================================== */
.text-primary { color: var(--primary); }
.text-accent { color: var(--primary-600); }
.text-dark { color: var(--text); }
.text-light { color: var(--muted); }

.lead {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--text);
}

/* Spacing utilities */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

/* Dashboard layout helpers (scoped, avoid breaking public pages) */
/* Apply these on dashboard pages via body class instead of globally */
body.dashboard-layout {
  display: flex;
}

body.dashboard-layout main {
  flex: 1;
  margin-left: 0;
  transition: margin-left 0.3s ease;
}


/* ======================================
   GLOBAL PAGE WRAPPER (Uniform Layout)
   ====================================== */

/* Main wrapper around every page */
.page-wrapper {
  flex: 1;
  min-height: 100vh;
  background: var(--bg);
  padding: 2rem;
  transition: all 0.3s ease;
}

/* Dynamic margin for sidebar collapse/expand */
.page-wrapper {
  margin-left: 5rem; /* collapsed sidebar */
}

.page-wrapper.expanded {
  margin-left: 16rem; /* expanded sidebar */
}

/* Internal centering and max width */
.page-inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* Page header: title + subtitle alignment */
.page-header {
  margin-bottom: 2rem;
}

.page-header h1 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-header p {
  color: var(--muted);
  font-size: 1rem;
  margin-top: 0.25rem;
}

/* Consistent section spacing */
.page-content {
  margin-top: 2rem;
}

/* Responsive layout */
@media (max-width: 768px) {
  .page-wrapper,
  .page-wrapper.expanded {
    margin-left: 0 !important;
    padding: 1.5rem 1rem;
  }
}

/* ======================================
   TASK TAB STYLES
====================================== */
.tab-content-wrapper {
  background: #fff;
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.tab-title {
  /* Unified section header style (match Team tab headers) */
  font-size: 1.25rem; /* text-xl */
  font-weight: 600;   /* semibold */
  color: var(--primary-600);
  margin: 0 0 1rem 0; /* mb-4 */
}

.tab-subtitle {
  color: var(--muted);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* Task Statistics */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  font-size: 2rem;
  line-height: 1;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--muted);
  font-weight: 500;
}

.stat-primary { border-left: 4px solid var(--primary); }
.stat-success { border-left: 4px solid #10b981; }
.stat-warning { border-left: 4px solid #f59e0b; }
.stat-danger { border-left: 4px solid #ef4444; }

.stat-primary .stat-value { color: var(--primary); }
.stat-success .stat-value { color: #10b981; }
.stat-warning .stat-value { color: #f59e0b; }
.stat-danger .stat-value { color: #ef4444; }

/* Tasks List */
.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.task-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  transition: all 0.2s;
}

.task-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
}

.task-card.task-overdue {
  border-left: 4px solid #ef4444;
  background: #fef2f2;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.task-title-section {
  flex: 1;
}

.task-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.5rem 0;
}

.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.task-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-icon {
  background: none;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  padding: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: all 0.2s;
}

.btn-icon:hover {
  transform: scale(1.1);
}

.btn-icon-primary:hover {
  background: var(--primary-50);
  border-color: var(--primary);
}

.btn-icon-danger:hover {
  background: #fef2f2;
  border-color: #ef4444;
}

.task-description {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.task-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.task-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.task-detail-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.05em;
}

.task-detail-value {
  font-size: 0.875rem;
  color: var(--text);
  font-weight: 500;
}

.text-danger {
  color: #ef4444 !important;
}

/* Priority Badges */
.priority-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.priority-urgent {
  background: #fee2e2;
  color: #991b1b;
}

.priority-high {
  background: #fed7aa;
  color: #9a3412;
}

.priority-normal {
  background: #dbeafe;
  color: #1e40af;
}

.priority-low {
  background: #e5e7eb;
  color: #374151;
}

/* Status Badges */
.status-pending {
  background: #fef3c7;
  color: #92400e;
}

.status-in-progress {
  background: #dbeafe;
  color: #1e40af;
}

.status-completed {
  background: #d1fae5;
  color: #065f46;
}

.status-overdue {
  background: #fee2e2;
  color: #991b1b;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
}

.empty-state-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.empty-state-text {
  color: var(--muted);
  margin-bottom: 1.5rem;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
}

.modal-container {
  background: #fff;
  border-radius: 0.75rem;
  max-width: 42rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-600);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0.25rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
}

.modal-close:hover {
  background: var(--bg);
  color: var(--text);
}

.modal-container form {
  padding: 1.5rem;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
}

/* Form Styles */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group-full {
  grid-column: 1 / -1;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  transition: all 0.2s;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.form-textarea {
  resize: vertical;
  font-family: inherit;
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .task-details {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}