/* ==========================================================================
   المُحصّل الذكي — Natural, Earthy & Organic Design System
   Palette: Sage Moss, Terracotta Rust, Warm Amber Ochre, Pine & Warm Linen
   ========================================================================== */

:root {
  /* Earthy Backgrounds & Canvas */
  --ink: #f7f5f0;          /* Warm Sand Linen / Natural Paper */
  --ink2: #ffffff;         /* Pure Warm Ivory Surface */
  --ink3: #f2ece2;         /* Warm Oat / Sandstone Secondary Surface */
  --ink4: #e8e1d5;         /* Deep Sandstone Accent */
  
  /* River Stone Borders */
  --border: #e2dbcd;       /* Soft River Stone Border */
  --border-light: #ece6dc; /* Light Pebble Border */
  --border-focus: #275d55; /* Pine Cypress Focus Ring */

  /* High-Contrast Espresso Typography */
  --paper: #1e2022;        /* Deep Charcoal Espresso Text */
  --paper2: #2d3134;       /* Soft Charcoal Text */
  --text: #1e2022;
  --muted: #676159;        /* Warm Clay Umber Text */
  --muted-light: #8e867b;  /* Soft Sand Grey */
  --muted-dark: #49443c;   /* Deep Earth Brown */
  
  /* Natural Earthy Accents */
  --pine: #275d55;         /* Pine Cypress / Forest Teal */
  --pine-soft: #eaf3f1;
  --pine-glow: rgba(39, 93, 85, 0.15);

  --ochre: #b87333;        /* Warm Amber Ochre / Caramel */
  --ochre-soft: #fcf4e8;
  --ochre-glow: rgba(184, 115, 51, 0.15);

  --sage: #2d6a4f;         /* Sage Moss / Olive Forest */
  --sage-soft: #e8f3ed;
  --sage-glow: rgba(45, 106, 79, 0.15);

  --terracotta: #b84a39;   /* Terracotta / Warm Clay Rust */
  --terracotta-soft: #faece8;
  --terracotta-glow: rgba(184, 74, 57, 0.15);

  /* Legacy Aliases (Seamless compatibility with app.js dynamic classes) */
  --cyan: #275d55;
  --cyan-glow: rgba(39, 93, 85, 0.15);
  --yellow: #b87333;
  --yellow-glow: rgba(184, 115, 51, 0.15);
  --green: #2d6a4f;
  --green-glow: rgba(45, 106, 79, 0.15);
  --red: #b84a39;
  --red-glow: rgba(184, 74, 57, 0.15);

  /* Typography */
  --font-display: 'Alexandria', 'Tajawal', sans-serif;
  --font-body: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Organic Soft Shadows */
  --shadow-xs: 0 1px 3px rgba(45, 38, 30, 0.05);
  --shadow-sm: 0 2px 6px -1px rgba(45, 38, 30, 0.06), 0 1px 3px rgba(45, 38, 30, 0.03);
  --shadow-md: 0 6px 18px -2px rgba(45, 38, 30, 0.06), 0 2px 8px -1px rgba(45, 38, 30, 0.04);
  --shadow-lg: 0 12px 30px -4px rgba(45, 38, 30, 0.09), 0 4px 12px -2px rgba(45, 38, 30, 0.04);
  --shadow-xl: 0 24px 48px -8px rgba(45, 38, 30, 0.14), 0 8px 20px -4px rgba(45, 38, 30, 0.06);
}

/* Base Body Resets & Natural Canvas Texture */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--ink);
  color: var(--text);
  background-image: 
    radial-gradient(ellipse at 50% -10%, rgba(184, 115, 51, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 95%, rgba(45, 106, 79, 0.04) 0%, transparent 50%),
    radial-gradient(#ded7ca 0.75px, transparent 0.75px);
  background-size: 100% 100%, 100% 100%, 24px 24px;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
  line-height: 1.7;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}

.font-body {
  font-family: var(--font-body);
}

/* Custom Refined Scrollbars */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--ink);
}
::-webkit-scrollbar-thumb {
  background: #d6ccbd;
  border-radius: 999px;
  border: 2px solid var(--ink);
}
::-webkit-scrollbar-thumb:hover {
  background: #b5aa99;
}

/* Refined Organic Cards */
.neo-card {
  background: var(--ink2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.neo-card:hover {
  border-color: #d6cdbe;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Specific Stat Card Natural Accents */
.stat-card-cyan {
  border-color: rgba(39, 93, 85, 0.22);
}
.stat-card-cyan:hover {
  border-color: var(--pine);
  box-shadow: 0 10px 24px -4px rgba(39, 93, 85, 0.14);
}

.stat-card-yellow {
  border-color: rgba(184, 115, 51, 0.22);
}
.stat-card-yellow:hover {
  border-color: var(--ochre);
  box-shadow: 0 10px 24px -4px rgba(184, 115, 51, 0.14);
}

.stat-card-green {
  border-color: rgba(45, 106, 79, 0.22);
}
.stat-card-green:hover {
  border-color: var(--sage);
  box-shadow: 0 10px 24px -4px rgba(45, 106, 79, 0.14);
}

.stat-card-red {
  border-color: rgba(184, 74, 57, 0.22);
}
.stat-card-red:hover {
  border-color: var(--terracotta);
  box-shadow: 0 10px 24px -4px rgba(184, 74, 57, 0.14);
}

/* Tactile Earthy Buttons */
.neo-btn {
  font-family: var(--font-body);
  font-weight: 700;
  border-radius: 0.75rem;
  transition: all 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid transparent;
}

.neo-btn:hover {
  transform: translateY(-1.5px);
  filter: brightness(1.04);
}

.neo-btn:active {
  transform: translateY(1px);
}

.neo-btn-cyan {
  background: var(--pine);
  color: #ffffff;
  border-color: rgba(39, 93, 85, 0.35);
  box-shadow: 0 4px 12px rgba(39, 93, 85, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.neo-btn-cyan:hover {
  box-shadow: 0 6px 18px rgba(39, 93, 85, 0.3);
}

.neo-btn-yellow {
  background: var(--ochre);
  color: #ffffff;
  border-color: rgba(184, 115, 51, 0.35);
  box-shadow: 0 4px 12px rgba(184, 115, 51, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.neo-btn-yellow:hover {
  box-shadow: 0 6px 18px rgba(184, 115, 51, 0.3);
}

.neo-btn-green {
  background: var(--sage);
  color: #ffffff;
  border-color: rgba(45, 106, 79, 0.35);
  box-shadow: 0 4px 12px rgba(45, 106, 79, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.neo-btn-green:hover {
  box-shadow: 0 6px 18px rgba(45, 106, 79, 0.3);
}

.neo-btn-red {
  background: var(--terracotta);
  color: #ffffff;
  border-color: rgba(184, 74, 57, 0.35);
  box-shadow: 0 4px 12px rgba(184, 74, 57, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.neo-btn-red:hover {
  box-shadow: 0 6px 18px rgba(184, 74, 57, 0.3);
}

/* Filter Tabs */
.filter-tab {
  background: var(--ink2);
  border: 1.5px solid var(--border);
  color: var(--muted);
  box-shadow: 0 1px 3px rgba(45, 38, 30, 0.04);
  transition: all 0.16s ease;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.filter-tab:hover {
  color: var(--text);
  border-color: #d6ccbd;
  background: #fbf9f5;
  transform: translateY(-1px);
}

.filter-tab.active {
  background: var(--ochre);
  color: #ffffff;
  border-color: var(--ochre);
  box-shadow: 0 4px 12px rgba(184, 115, 51, 0.25);
  font-weight: 800;
}

/* Earthy Status Badges */
.badge-critical {
  background: var(--terracotta-soft);
  color: var(--terracotta);
  border: 1px solid rgba(184, 74, 57, 0.3);
}

.badge-overdue {
  background: var(--ochre-soft);
  color: var(--ochre);
  border: 1px solid rgba(184, 115, 51, 0.3);
}

.badge-active {
  background: var(--sage-soft);
  color: var(--sage);
  border: 1px solid rgba(45, 106, 79, 0.3);
}

.badge-paid {
  background: #f0ebe1;
  color: #676159;
  border: 1px solid #dcd4c5;
}

/* AI Modal Tabs */
.ai-tab {
  border-bottom: 2px solid transparent;
  color: var(--muted);
  transition: all 0.15s ease;
}

.ai-tab:hover {
  color: var(--text);
  background: rgba(39, 93, 85, 0.04);
}

.ai-tab.active {
  color: var(--pine);
  border-bottom: 2px solid var(--pine);
  background: rgba(39, 93, 85, 0.08);
}

/* Form Controls & Inputs */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="date"],
textarea,
select {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--pine) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(39, 93, 85, 0.14) !important;
  background-color: #ffffff !important;
}

/* Toast Notifications */
.toast {
  animation: popIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  box-shadow: var(--shadow-lg) !important;
  border-radius: 1rem;
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Smooth Soft Overrides for JS-Generated Block Shadows */
[class*="shadow-\[1px_1px_0px_\#000\]"],
[class*="shadow-\[2px_2px_0px_\#000\]"],
[class*="shadow-\[3px_3px_0px_\#000\]"] {
  box-shadow: 0 2px 6px -1px rgba(45, 38, 30, 0.06), 0 1px 3px rgba(45, 38, 30, 0.03) !important;
}

[class*="shadow-\[4px_4px_0px_\#000\]"],
[class*="shadow-\[5px_5px_0px_\#ffd23f\]"] {
  box-shadow: 0 6px 18px -2px rgba(45, 38, 30, 0.07), 0 2px 6px -1px rgba(45, 38, 30, 0.03) !important;
}

[class*="shadow-\[8px_8px_0px_\#000\]"],
[class*="shadow-\[10px_10px_0px_\#000\]"] {
  box-shadow: 0 20px 44px -10px rgba(45, 38, 30, 0.18), 0 8px 18px -4px rgba(45, 38, 30, 0.08) !important;
}

/* Mobile & Small Device Safe Guards */
@media (max-width: 640px) {
  header {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  
  .neo-card {
    border-radius: 1.25rem;
  }

  /* Prevent any nested table from bursting container */
  table {
    min-width: 600px;
  }
}

/* ==========================================================================
   Mobile Header & Navigation Drawer Styles
   ========================================================================== */

#mobileNavDropdown {
  display: none;
}

#mobileNavDropdown.is-open {
  display: block !important;
}

@media (min-width: 768px) {
  #mobileNavDropdown,
  #btnMobileMenuToggle,
  #btnFloatingAddDebtor {
    display: none !important;
  }
}

@keyframes mobileMenuSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-menu-animate {
  animation: mobileMenuSlideDown 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Mobile Floating Action Button (FAB) */
.fab-btn {
  box-shadow: 0 10px 25px -4px rgba(184, 115, 51, 0.45), 0 4px 10px -2px rgba(184, 115, 51, 0.25);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fab-btn:hover {
  box-shadow: 0 14px 30px -4px rgba(184, 115, 51, 0.55);
  transform: translateY(-2px);
}

.fab-btn:active {
  transform: translateY(1px) scale(0.96);
}