@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Arabic (RTL) font — Noto Kufi Arabic is modern, clean and purpose-built for digital UI */
html[dir="rtl"],
html[dir="rtl"] * {
    font-family: 'Noto Kufi Arabic', 'Inter', sans-serif !important;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ===== Lovable Glassmorphism Design System ===== */
@layer components {
    .glass-card {
        @apply bg-glass-600 backdrop-blur-xl rounded-2xl border border-glass-300 shadow-lg;
    }
    .glass-card-subtle {
        @apply bg-glass-400 backdrop-blur-lg rounded-xl border border-glass-200 shadow-md;
    }
    .glass-header {
        @apply bg-glass-500 backdrop-blur-xl border-b border-glass-200 shadow-sm;
    }
    .lovable-gradient-text {
        @apply bg-gradient-to-r from-lovable-primary to-lovable-accent bg-clip-text text-transparent;
    }
    .lovable-btn-primary {
        @apply bg-lovable-primary hover:bg-lovable-primary-dark text-white font-semibold 
               px-5 py-2.5 rounded-xl shadow-lg shadow-lovable-primary/20 
               transition-all duration-200 hover:shadow-xl hover:shadow-lovable-primary/30;
    }
    .lovable-badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }
    .lovable-badge-success {
        @apply lovable-badge bg-emerald-100 text-emerald-700;
    }
    .lovable-badge-warning {
        @apply lovable-badge bg-amber-100 text-amber-700;
    }
    .lovable-badge-danger {
        @apply lovable-badge bg-red-100 text-red-700;
    }
    .lovable-stat-card {
        @apply glass-card p-5 flex flex-col gap-2 hover:shadow-xl transition-all duration-300;
    }
}

.MuiInputBase-input,
.MuiInputBase-root {
    @apply p-[0.4rem] !important;
}

.rmdp-container {
    @apply w-full !important;
}

.rmdp-input {
    @apply w-full px-4 py-[1.4rem] rounded-lg bg-transparent hover:border hover:border-black !important;
}

.rmdp-calendar {
    @apply z-[500];
}

.rmdp-input::placeholder {
    @apply text-transparent !important;
}

.rmdp-container:has(.rmdp-input:focus)~.rmdp-input-label {
    @apply -top-4 scale-75 cursor-default;
}


.rmdp-container:has(.rmdp-input:not(:placeholder-shown))~.rmdp-input-label {
    @apply -top-4 scale-75 cursor-default;
}

.dead-dashboard-date {
    @apply border-sky-300 text-sky-500 transition-all duration-150 hover:border-sky-600 !important;
}

.dead-dashboard-date:focus {
    @apply border-sky-500 !important;
}

.date-error {
    @apply border border-red-400 !important;
}

.rmdp-input-no-border {
    @apply border-transparent hover:border-transparent focus:border-transparent rounded-none !important;
}

.action-screen {
    border: 1px solid rgb(148, 148, 148);
}

.only-print {
   display: none;
}

@media print {
    .no-print {
        display: none !important;
    }

    .only-print {
        display: block;
    }

    .rtl {
        direction: rtl !important;
        margin: 1rem !important;
        display: block !important;

    }

    .ltr {
        direction: ltr !important;
        margin: 1rem !important;
        display: block !important;
    }

    .avoid-all {
        margin-top: 100vh !important;
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(-10rem);
    }

    80% {
        transform: translateX(1rem);
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(10rem);
    }

    80% {
        transform: translateX(-1rem);
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(5rem);
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes scrollText {
    from {
        -moz-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    to {
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}/* 
  Etessaq Premium Dashboard Styles
  Copy and paste this into your main CSS file (e.g., App.css, index.css, or global.css)
*/

/* 1. Page Background & Glassmorphism Header */
body {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
}

/* Update the main Teal background area to look softer and extend properly */
.top-background-area {
  background: linear-gradient(135deg, #35827C 0%, #205955 100%) !important;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  padding-bottom: 4rem; /* Give the white card some breathing room */
  box-shadow: 0 10px 30px -10px rgba(53, 130, 124, 0.5);
}

/* Top Right Utility Buttons (Language, Year, Avatar) */
.utility-buttons-container button {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  border-radius: 9999px !important;
  transition: all 0.3s ease !important;
}

.utility-buttons-container button:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* 2. Main Content Card */
.main-content-card {
  background: #ffffff !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08) !important;
  margin-top: -3rem !important; /* Pull it up into the teal header */
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  padding: 2rem !important;
}

/* 3. Status Summary (KPI Cards Grid) 
   Replace the old inline chips with this grid layout */
.status-summary-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 1.5rem !important;
  border: none !important; /* Remove the old ugly border */
  padding: 0 !important;
  margin: 2rem 0 !important;
}

.status-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.status-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border-color: #35827C;
}

/* Colors for specific status cards based on your screenshot */
.status-card.completed { color: #10b981; } /* Green */
.status-card.delayed { color: #ef4444; } /* Red */
.status-card.on-track { color: #f59e0b; } /* Yellow */

/* 4. Action Bar (Add Indicator & PDF Button) */
.action-bar-container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 1.5rem !important;
  border-bottom: 1px solid #f1f5f9 !important;
  margin-bottom: 2rem !important;
}

.btn-add-indicator {
  background: linear-gradient(135deg, #35827C, #2c6e69) !important;
  color: white !important;
  border: none !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(53, 130, 124, 0.3) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}

.btn-add-indicator:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(53, 130, 124, 0.4) !important;
}

/* 5. Sidebar Enhancements */
.sidebar {
  background: #0f172a !important; /* Deep dark blue */
  box-shadow: 4px 0 24px rgba(0,0,0,0.1) !important;
}

.sidebar-item {
  border-radius: 8px !important;
  margin: 4px 12px !important;
  padding: 12px 16px !important;
  transition: all 0.2s ease !important;
  color: #94a3b8 !important;
}

.sidebar-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

.sidebar-item.active {
  background: linear-gradient(90deg, rgba(53, 130, 124, 0.15) 0%, transparent 100%) !important;
  border-left: 4px solid #35827C !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Fix text truncation in sidebar */
.sidebar-item-text {
  white-space: normal !important;
  line-height: 1.4 !important;
  font-size: 0.9rem !important;
}