/* ========================================
   FACIO-Style Login + Full System Design
   نان سالم تبریز - پیشخوان کارمندان
   ======================================== */

@import url('https://ns041.ir/static/fonts/vazirmatn/vazirmatn.css');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Vazirmatn', sans-serif;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: #f5f7fa;
  color: #333;
  transition: background 0.4s ease, color 0.4s ease;
  line-height: 1.6;
}

/* Dark Mode */
.dark-mode {
  background: #121212;
  color: #e0e0e0;
}

.dark-mode .main-header,
.dark-mode .sidebar,
.dark-mode .main-footer,
.dark-mode .content {
  background: #1e1e1e;
  color: #e0e0e0;
}

.dark-mode .menu-item,
.dark-mode .user-info span,
.dark-mode .logout-btn {
  color: #e0e0e0;
}

.dark-mode .menu-item:hover {
  background: #333;
}

/* ========================================
   FACIO Login Page
   ======================================== */
.facio-login-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 2rem 1rem;
  animation: fadeIn 0.8s ease-out;
}

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

.facio-logo {
  margin-bottom: 1.5rem;
  text-align: center;
}

/* قبل */
.facio-logo-img {
  width: 240px;
  height: 240px;
  ...
}

/* قبل */
.facio-logo-img { ... }

/* بعد — فقط 3 بار ضربان */
@keyframes heartbeat {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.08); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.08); }
  70%  { transform: scale(1); }
  100% { transform: scale(1); }
}

.facio-logo-img {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 4px solid #f0f0f0;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  animation: heartbeat 2.5s ease-in-out 3;
  animation-fill-mode: forwards;
}

.facio-logo-img:hover {
  animation-play-state: paused;
  transform: scale(1.05);
}


.facio-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #222;
  margin: 0 0 0.5rem 0;
  text-align: center;
}

.facio-subtitle {
  color: #666;
  font-size: 0.95rem;
  margin-bottom: 2rem;
  text-align: center;
}

/* Form Inputs */
.facio-form {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.facio-input-group {
  position: relative;
}

.facio-input-group input {
  width: 100%;
  padding: 1.1rem 1rem 1.1rem 3rem;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 1rem;
  background: #fafafa;
  transition: all 0.3s ease;
  font-family: inherit;
}

.facio-input-group input:focus {
  border-color: #00c853;
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.1);
}

.facio-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  fill: #999;
  pointer-events: none;
}

/* Login Button */
.facio-btn {
  background: #00c853;
  color: white;
  border: none;
  padding: 1.1rem;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 0.5rem;
  font-family: inherit;
}

.facio-btn:hover {
  background: #00b140;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 200, 83, 0.3);
}

.facio-btn:active {
  transform: translateY(0);
}

/* Error Message */
.facio-error {
  color: #d32f2f;
  font-size: 0.9rem;
  margin-top: 1rem;
  text-align: center;
  background: #ffebee;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  border: 1px solid #ffcdd2;
}

/* Dark Mode Toggle */
.facio-toggle {
  margin-top: 2rem;
  background: none;
  border: none;
  color: #666;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: color 0.3s ease;
}

.facio-toggle:hover {
  color: #00c853;
}

.facio-icon-small {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Dark Mode for Login */
.dark-mode .facio-login-container { background: #121212; }
.dark-mode .facio-title { color: #fff; }
.dark-mode .facio-subtitle { color: #aaa; }
.dark-mode .facio-input-group input {
  background: #1e1e1e;
  border-color: #333;
  color: #fff;
}
.dark-mode .facio-input-group input::placeholder { color: #aaa; }
.dark-mode .facio-input-group input:focus {
  border-color: #00c853;
  background: #1a1a1a;
}
.dark-mode .facio-icon { fill: #aaa; }
.dark-mode .facio-toggle { color: #aaa; }
.dark-mode .facio-toggle:hover { color: #00c853; }
.dark-mode .facio-error {
  background: #4a1a1a;
  color: #ff8a80;
  border-color: #ff5252;
}

/* ========================================
   Header & Layout
   ======================================== */
.main-header {
  background: #fff;
  padding: 1rem 2rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 600;
  color: #222;
}

.logo img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.95rem;
}

.logout-btn {
  background: #f44336;
  color: white;
  text-decoration: none;
  padding: 0.4rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: 0.3s;
}

.logout-btn:hover {
  background: #d32f2f;
}

/* ========================================
   Sidebar
   ======================================== */
.layout {
  display: flex;
  min-height: calc(100vh - 70px);
}

.sidebar {
  width: 260px;
  background: #fff;
  border-left: 1px solid #eee;
  padding: 1.5rem 1rem;
  box-shadow: 2px 0 10px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.sidebar-header {
  text-align: center;
  margin-bottom: 2rem;
}

.sidebar-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 0.5rem;
  border: 3px solid #f0f0f0;
}

.sidebar h2 {
  font-size: 1.1rem;
  color: #444;
}

.menu ul {
  list-style: none;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  color: #555;
  text-decoration: none;
  transition: 0.3s;
  margin-bottom: 0.3rem;
  font-weight: 500;
}

.menu-item svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.menu-item:hover {
  background: #f0f7ff;
  color: #00c853;
}

.menu-item.active {
  background: #e8f5e8;
  color: #00c853;
  font-weight: 600;
}

/* ========================================
   Content & Dashboard
   ======================================== */
.content {
  flex: 1;
  padding: 2rem;
  background: #f9fbfd;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  transition: 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.gradient-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.gradient-card h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.3rem;
}

/* ========================================
   Footer
   ======================================== */
.main-footer {
  text-align: center;
  padding: 1.5rem;
  background: #fff;
  border-top: 1px solid #eee;
  font-size: 0.9rem;
  color: #777;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 992px) {
  .sidebar {
    position: fixed;
    top: 0;
    right: -260px;
    height: 100vh;
    z-index: 999;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
  }

  .sidebar.active {
    right: 0;
  }

  .menu-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    color: #555;
  }

  .content {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .facio-logo-img { width: 200px; height: 200px; }
  .facio-title { font-size: 1.6rem; }
  .facio-form { max-width: 100%; }
  .facio-input-group input { padding: 1rem 0.8rem 1rem 2.8rem; font-size: 0.95rem; }
  .main-header { padding: 1rem; }
  .logo span { display: none; }
  .user-info span { display: none; }
}

/* ========================================
   Utilities
   ======================================== */
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }

/* داشبورد FACIO */
.facio-dashboard-container {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.facio-dashboard-header {
  text-align: center;
  margin-bottom: 2rem;
}

.facio-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.facio-card {
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  text-align: center;
  transition: transform 0.3s ease;
}

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

.facio-card-icon {
  width: 48px;
  height: 48px;
  fill: #00c853;
  margin-bottom: 1rem;
}

.facio-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #222;
}

.facio-card p {
  color: #666;
  margin-bottom: 1rem;
}

.facio-btn-small {
  background: #00c853;
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: 0.3s;
}

.facio-btn-small:hover {
  background: #00b140;
}

.facio-stats {
  display: flex;
  justify-content: space-around;
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 12px;
}

.facio-stat-item h4 {
  font-size: 0.9rem;
  color: #666;
}

.facio-stat-item p {
  font-size: 1.5rem;
  font-weight: 700;
  color: #00c853;
}

/* Dark Mode */
.dark-mode .facio-card { background: #1e1e1e; }
.dark-mode .facio-card h3 { color: #fff; }
.dark-mode .facio-card p { color: #aaa; }
.dark-mode .facio-stats { background: #2a2a2a; }

/* موبایل */
@media (max-width: 768px) {
  .facio-cards-grid { grid-template-columns: 1fr; }
  .facio-stats { flex-direction: column; gap: 1rem; }
}
/* کارت پروفایل کاربر */
.facio-profile-card {
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.facio-profile-image {
  flex-shrink: 0;
}

.facio-profile-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #f0f0f0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.facio-profile-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.facio-info-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
}

.facio-info-item strong {
  color: #222;
}

.facio-icon-small {
  width: 18px;
  height: 18px;
  fill: #00c853;
}

/* Dark Mode */
.dark-mode .facio-profile-card,
.dark-mode .facio-card {
  background: #1e1e1e;
}

.dark-mode .facio-info-item strong {
  color: #fff;
}

/* موبایل */
@media (max-width: 576px) {
  .facio-profile-card {
    flex-direction: column;
    text-align: center;
  }
  .facio-profile-img {
    width: 80px;
    height: 80px;
  }
}
/* نام کاربر در کارت پروفایل */
.facio-profile-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: #222;
  margin: 0 0 1rem 0;
  text-align: center;
}

.dark-mode .facio-profile-name {
  color: #fff;
}

/* بقیه همون قبلی *//* ========================================
   FACIO - بهینه‌شده برای میز کار
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; font-family: 'Vazirmatn', sans-serif; direction: rtl; -webkit-font-smoothing: antialiased; }
body { background: #f5f7fa; color: #333; line-height: 1.6; }

/* Dark Mode */
.dark-mode { background: #121212; color: #e0e0e0; }
.dark-mode .main-header, .dark-mode .sidebar, .dark-mode .content { background: #1e1e1e; color: #e0e0e0; }
.dark-mode .menu-item, .dark-mode .user-info span, .dark-mode .logout-btn { color: #e0e0e0; }
.dark-mode .menu-item:hover { background: #333; }

/* Header */
.main-header {
  background: #fff; padding: 1rem 2rem; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100;
}
.logo { display: flex; align-items: center; gap: 0.8rem; font-weight: 600; color: #222; }
.logo img { width: 40px; height: 40px; border-radius: 8px; }
.user-info { display: flex; align-items: center; gap: 1rem; font-size: 0.95rem; }
.logout-btn { background: #f44336; color: white; padding: 0.4rem 1rem; border-radius: 8px; font-size: 0.9rem; transition: 0.3s; }
.logout-btn:hover { background: #d32f2f; }

/* Sidebar */
.layout { display: flex; min-height: calc(100vh - 70px); }
.sidebar {
  width: 260px; background: #fff; border-left: 1px solid #eee; padding: 1.5rem 1rem;
  box-shadow: 2px 0 10px rgba(0,0,0,0.05); transition: transform 0.3s ease;
}
.sidebar-header { text-align: center; margin-bottom: 2rem; }
.sidebar-logo { width: 80px; height: 80px; border-radius: 50%; margin-bottom: 0.5rem; border: 3px solid #f0f0f0; }
.sidebar h2 { font-size: 1.1rem; color: #444; }
.menu ul { list-style: none; }
.menu-item {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1rem; border-radius: 10px;
  color: #555; text-decoration: none; transition: 0.3s; margin-bottom: 0.3rem; font-weight: 500;
}
.menu-item svg { width: 20px; height: 20px; fill: currentColor; }
.menu-item:hover { background: #f0f7ff; color: #00c853; }
.menu-item.active { background: #e8f5e8; color: #00c853; font-weight: 600; }

/* Content */
.content { flex: 1; padding: 2rem; background: #f9fbfd; }
.facio-dashboard-container { padding: 2rem; max-width: 1200px; margin: 0 auto; }

/* اعلان */
.facio-notifications { margin: 1rem 0; padding: 12px; background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.notif-item { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 0.95rem; color: #856404; }
.notif-icon { background: #f39c12; color: white; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.8rem; }

/* فیلتر */
.facio-filter { margin: 1rem 0; display: flex; align-items: center; gap: 10px; font-size: 0.95rem; }
.facio-filter select { padding: 8px 12px; border: 1.5px solid #ddd; border-radius: 8px; background: white; font-size: 0.9rem; cursor: pointer; }

/* تقویم */
.facio-calendar { background: #fff; border-radius: 16px; padding: 16px; margin: 1.5rem 0; box-shadow: 0 4px 15px rgba(0,0,0,0.08); border: 1px solid #e8f5e9; font-size: 0.9rem; }
.calendar-header h3 { margin: 0 0 12px; text-align: center; color: #00c853; font-weight: 600; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: #eee; border-radius: 10px; overflow: hidden; }
.calendar-day-header { background: #00c853; color: white; padding: 10px 4px; text-align: center; font-weight: 600; font-size: 0.8rem; }
.calendar-day { background: #fff; min-height: 50px; padding: 6px; position: relative; display: flex; flex-direction: column; justify-content: space-between; font-size: 0.85rem; }
.calendar-day.empty { background: #f9f9f9; }
.calendar-day.today { background: #e8f5e9; border: 2px solid #00c853; }
.calendar-day.has-task { background: #fff8e1; cursor: pointer; }
.day-number { font-weight: 600; color: #333; }
.task-count { background: #ff6b6b; color: white; width: 18px; height: 18px; border-radius: 50%; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; align-self: flex-end; }

/* مودال تقویم */
.facio-modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; }
.modal-content { background: #fff; border-radius: 16px; width: 90%; max-width: 500px; max-height: 80vh; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.modal-header { padding: 16px; background: #00c853; color: white; display: flex; justify-content: space-between; align-items: center; border-radius: 16px 16px 0 0; }
.modal-header h3 { margin: 0; font-size: 1.1rem; }
.modal-close { font-size: 1.5rem; cursor: pointer; }
#modal-tasks { padding: 16px; }
.modal-task { padding: 12px; border-bottom: 1px solid #eee; }
.modal-task:last-child { border: none; }
.modal-task .desc { margin-top: 8px; font-size: 0.9rem; color: #555; }

/* جدول دسکتاپ */
.facio-tasks-desktop { display: block; }
.facio-tasks-mobile { display: none; }
.facio-table-wrapper { overflow-x: auto; border-radius: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); background: #fff; margin: 1.5rem 0; border: 1px solid #e8f5e9; }
.facio-tasks-table { width: 100%; min-width: 900px; border-collapse: collapse; table-layout: fixed; font-size: 0.94rem; }
.facio-tasks-table th { background: linear-gradient(135deg, #00c853, #00a140); color: #fff; padding: 16px 10px; text-align: center; font-weight: 600; font-size: 0.9rem; }
.facio-tasks-table td { padding: 12px 10px; border-bottom: 1px solid #eee; vertical-align: top; }
.facio-tasks-table .title { width: 18%; }
.facio-tasks-table .note { width: 25%; }
.facio-tasks-table textarea { width: 100%; padding: 8px; border-radius: 8px; border: 1.5px solid #ddd; }
.facio-tasks-table .save { background: #00c853; color: #fff; border: none; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.badge { padding: 4px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
.badge.done { background: #d4edda; color: #155724; }
.badge.pending { background: #fff3cd; color: #856404; }
.btn-done { background: #28a745; color: #fff; padding: 8px 14px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.btn-done:hover { background: #218838; }
.desc-text { background: #f8f9fa; padding: 12px; text-align: right; direction: rtl; font-size: 0.9rem; }

/* کارت موبایل */
@media (max-width: 768px) {
  .facio-tasks-desktop { display: none; }
  .facio-tasks-mobile { display: block; }
  .task-card { background: #fff; border-radius: 16px; margin-bottom: 1rem; box-shadow: 0 4px 15px rgba(0,0,0,0.08); overflow: hidden; border: 1px solid #e8f5e9; }
  .task-card.done { background: #f8fff8; border-color: #c8e6c9; }
  .card-header { background: linear-gradient(135deg, #00c853, #00a140); color: #fff; padding: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; font-weight: 600; }
  .card-body { padding: 16px; }
  .info { margin-bottom: 10px; font-size: 0.95rem; }
  .info strong { color: #222; }
  details.desc summary { cursor: pointer; color: #00c853; font-weight: 600; margin: 12px 0 8px; }
  .note-section textarea { width: 100%; border: 1.8px solid #e0e0e0; border-radius: 12px; padding: 12px; font-size: 1rem; margin-bottom: 10px; }
  .save.full, .btn-done.full { width: 100%; padding: 14px; font-size: 1.1rem; font-weight: 600; border-radius: 12px; text-align: center; margin-top: 8px; }
  .done-mark { text-align: center; color: #28a745; font-size: 1.3rem; font-weight: bold; margin-top: 12px; }
  .facio-calendar { padding: 12px; font-size: 0.8rem; }
  .calendar-day { min-height: 40px; padding: 4px; }
  .day-number { font-size: 0.8rem; }
  .task-count { width: 16px; height: 16px; font-size: 0.65rem; }
}

/* اولویت */
.priority-badge {
  padding: 4px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; color: white; min-width: 60px; text-align: center;
}
.priority-urgent   { background: #c0392b; }
.priority-high     { background: #e67e22; }
.priority-medium   { background: #f39c12; }
.priority-low      { background: #27ae60; }

@media (max-width: 768px) {
  .priority-badge { font-size: 0.7rem; padding: 3px 8px; min-width: 50px; }
}

/* اسکرول */
.facio-table-wrapper::-webkit-scrollbar { height: 8px; }
.facio-table-wrapper::-webkit-scrollbar-thumb { background: #00c853; border-radius: 10px; }

/* ریسپانسیو */
@media (max-width: 992px) {
  .sidebar { position: fixed; top: 0; right: -260px; height: 100vh; z-index: 999; box-shadow: -5px 0 15px rgba(0,0,0,0.1); }
  .sidebar.active { right: 0; }
  .content { padding: 1.5rem; }
}
/* آمار در یک خط */
.facio-stats-inline {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
  font-size: 0.95rem;
}
.stat-inline {
  background: #fff;
  padding: 0.8rem 1.8rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e8f5e9;
}
.stat-inline:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  background: #f8fff8;
}
.stat-label { color: #555; font-weight: 600; }
.stat-number {
  font-size: 1.6rem;
  font-weight: 700;
  color: #00c853;
}
.stat-inline[data-type="done"] .stat-number { color: #28a745; }
.stat-inline[data-type="pending"] .stat-number { color: #f39c12; }

/* مودال */
.modal-task-item {
  padding: 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background 0.2s;
}
.modal-task-item:hover { background: #f8f9fa; }
.modal-task-item:last-child { border: none; }
.task-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-footer { text-align: center; padding: 12px; }
.btn-close {
  background: #eee;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
.btn-close:hover { background: #ddd; }

/* موبایل */
@media (max-width: 768px) {
  .facio-stats-inline { gap: 1rem; font-size: 0.9rem; }
  .stat-inline { padding: 0.6rem 1.2rem; }
  .stat-number { font-size: 1.4rem; }
}
/* دکمه بازگشت */
.back-to-dashboard {
  text-align: center;
  margin: 1rem 0 1.5rem;
}
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  color: #555;
  padding: 0.7rem 1.5rem;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  border: 1px solid #e0e0e0;
}
.btn-back:hover {
  background: #f0f7ff;
  color: #0066cc;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.btn-back::before {
  content: "←";
  font-weight: bold;
}

/*leave.php* /
/* وضعیت درخواست‌ها */
.facio-status-pending { color: #f39c12; font-weight: bold; }
.facio-status-approved { color: #27ae60; font-weight: bold; }
.facio-status-rejected { color: #c0392b; font-weight: bold; }

.badge.rejected { background: #f8d7da; color: #721c24; }
.task-card.rejected { background: #fff8f8; border-color: #f5c6cb; }

@media (max-width: 768px) {
  .task-card.rejected .card-header { background: linear-gradient(135deg, #c0392b, #a93226); }
}
/* استایل زیبا برای select */
.facio-select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.facio-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 1rem 1rem 1rem 3rem;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  background: #fafafa;
  font-size: 1rem;
  font-family: inherit;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
}

.facio-select:focus {
  border-color: #00c853;
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.1);
}

.facio-select-wrapper::after {
  content: "▼";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: #999;
  pointer-events: none;
}

/* وضعیت‌ها */
.facio-status-pending { color: #f39c12; font-weight: bold; }
.facio-status-approved { color: #27ae60; font-weight: bold; }
.facio-status-rejected { color: #c0392b; font-weight: bold; }

.badge.rejected { background: #f8d7da; color: #721c24; }
.task-card.rejected { background: #fff8f8; border-color: #f5c6cb; }

@media (max-width: 768px) {
  .facio-select { padding: 0.9rem 1rem 0.9rem 2.8rem; }
  .facio-select-wrapper::after { left: 0.8rem; }
}

/* grants_loans.php */
/* استایل فایل آپلود */
.facio-input-group input[type="file"] {
  width: 100%;
  padding: 0.8rem;
  border: 2px dashed #e0e0e0;
  border-radius: 12px;
  background: #fafafa;
  transition: all 0.3s ease;
}

.facio-input-group input[type="file"]:hover {
  border-color: #00c853;
  background: #f8fff8;
}

.facio-input-group small {
  display: block;
  color: #666;
  font-size: 0.85rem;
  margin-top: 0.3rem;
}

/* فرمت مبلغ */
.amount-formatted {
  font-weight: bold;
  color: #00c853;
}

/* موبایل */
@media (max-width: 768px) {
  .facio-input-group input[type="file"] {
    padding: 0.7rem;
    font-size: 0.95rem;
  }
}
/* فرم هوشمند */
#dynamic-fields {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.facio-input-group {
  opacity: 1;
  transition: opacity 0.3s ease, height 0.3s ease;
}

.facio-input-group[style*="display: none"] {
  display: block !important;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
}

/*payroll.php*/
.amount-formatted {
  font-weight: bold;
  color: #00c853;
}

.amount-formatted.large {
  font-size: 1.8rem;
  color: #00b140;
}

.slip-section h4 {
  margin: 1.2rem 0 0.8rem;
  color: #00c853;
  font-weight: 600;
}

.slip-grid p {
  margin: 0.5rem 0;
  font-size: 0.95rem;
}

.total-line {
  border-top: 2px solid #e8f5e9;
  padding-top: 0.8rem;
  margin-top: 1rem;
  font-size: 1.1rem;
}

.slip-section.total {
  background: linear-gradient(135deg, #e8f5e9, #f8fff8);
  padding: 1.2rem;
  border-radius: 12px;
  text-align: center;
  margin-top: 1.5rem;
}
/* ========================================
   FACIO - فیش حقوقی حرفه‌ای
   ======================================== */

/* عنوان فیش */
.slip-header {
  background: linear-gradient(135deg, #00c853, #00a140);
  color: white;
  padding: 1.2rem;
  border-radius: 16px 16px 0 0;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(0, 200, 83, 0.3);
  margin-bottom: 1.5rem;
}

/* کادرهای جداگانه */
.slip-box {
  background: #fff;
  border: 3px solid #00c853;
  border-radius: 16px;
  padding: 1.2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
}

.slip-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 6px;
  background: linear-gradient(90deg, #00c853, #00e676);
}

/* عنوان کادر */
.slip-box-title {
  margin: 0 0 1rem 0;
  color: #00c853;
  font-weight: 600;
  font-size: 1.1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed #e8f5e9;
}

/* جدول داخلی */
.slip-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.slip-table td {
  padding: 0.6rem 0;
  vertical-align: top;
}

.slip-table td:first-child {
  font-weight: 600;
  color: #333;
  width: 55%;
}

.slip-table td:last-child {
  text-align: left;
  color: #555;
}

/* جمع */
.slip-total {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 2px solid #e8f5e9;
  font-size: 1.05rem;
  text-align: right;
}

/* مبلغ قابل پرداخت */
.slip-box.highlight {
  background: linear-gradient(135deg, #e8f5e9, #f8fff8);
  border-color: #00b140;
  text-align: center;
}

.payable-amount {
  font-size: 2rem;
  font-weight: 700;
  color: #00b140;
  margin: 0.8rem 0;
  text-shadow: 0 2px 4px rgba(0, 177, 64, 0.2);
}

/* اطلاعات پرداخت */
.slip-box.payment-info {
  border-color: #28a745;
}

.slip-box.payment-info::before {
  background: linear-gradient(90deg, #28a745, #4caf50);
}

.slip-box.no-payment {
  border-color: #d32f2f;
  background: #ffebee;
  text-align: center;
}

.slip-box.no-payment::before {
  background: linear-gradient(90deg, #d32f2f, #f44336);
}

/* موبایل */
@media (max-width: 768px) {
  .slip-header { font-size: 1.2rem; padding: 1rem; }
  .slip-box { padding: 1rem; margin-bottom: 1.2rem; }
  .slip-table td { font-size: 0.9rem; padding: 0.5rem 0; }
  .payable-amount { font-size: 1.6rem; }
  .slip-box-title { font-size: 1rem; }
}
/* دکمه ذخیره PDF */
.btn-pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #1976d2, #1565c0);
  color: white;
  padding: 0.7rem 1.5rem;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn-pdf:hover {
  background: linear-gradient(135deg, #1565c0, #0d47a1);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(25, 118, 210, 0.4);
}

.btn-pdf::before {
  content: "[PDF Icon]";
  font-weight: bold;
}
/************************************
.pdf-button-wrapper { display: inline-block; direction: rtl; }
.btn-pdf{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .9rem;
  border-radius: .6rem;
  background: linear-gradient(180deg, rgba(237,73,86,0.12), rgba(221,38,52,0.06));
  border: 1px solid rgba(221,38,52,0.18);
  color: #b91c1c; /* رنگ متن */
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(183,42,55,0.08);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-pdf:active { transform: translateY(1px) scale(.997); }
.btn-pdf:focus { outline: none; box-shadow: 0 0 0 4px rgba(221,38,52,0.12); }

/* آیکون */
.btn-pdf .icon{
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: currentColor;
  opacity: .98;
  transition: transform .18s cubic-bezier(.2,.9,.2,1), opacity .18s;
  transform-origin: center;
}

/* متن دکمه */
.btn-pdf .btn-label { white-space: nowrap; }

/* افکت hover */
.btn-pdf:hover{
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 10px 28px rgba(183,42,55,0.12);
  background: linear-gradient(180deg, rgba(237,73,86,0.16), rgba(221,38,52,0.08));
}
.btn-pdf:hover .icon { transform: translateY(-2px) rotate(-6deg); }

/* کوچک (موبایل) */
@media (max-width:520px){
  .btn-pdf { padding: .45rem .6rem; font-size: .9rem; }
  .btn-pdf .btn-label{ display:none; } /* فقط آیکون نشان بده */
}

/* ترجیح برای عدم حرکت */
@media (prefers-reduced-motion: reduce){
  .btn-pdf, .btn-pdf .icon { transition: none; transform: none; }
}
/***************** attendance.php *************/
/* FACIO - Page Header */
.facio-page-header {
  text-align: center;
  margin-bottom: 2rem;
}
.facio-page-header h2 {
  font-size: 1.8rem;
  color: #00c853;
  margin-bottom: 0.5rem;
}
.facio-page-header p {
  color: #666;
  font-size: 1rem;
}

/* FACIO - Form Groups */
.facio-form-group {
  margin-bottom: 1.2rem;
}
.facio-form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #333;
}
.facio-select {
  width: 100%;
  padding: 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 1rem;
  background: #fafafa;
  transition: all 0.3s ease;
  font-family: inherit;
}
.facio-select:focus {
  border-color: #00c853;
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.1);
}

/* FACIO - PDF Viewer */
.facio-pdf-viewer {
  margin-top: 2rem;
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.facio-pdf-viewer h3 {
  margin-bottom: 1rem;
  color: #00c853;
  font-size: 1.2rem;
}
.facio-pdf-viewer embed {
  border: 1px solid #ddd;
  border-radius: 8px;
}
.facio-pdf-viewer a {
  display: inline-block;
  margin-top: 1rem;
}

/* Dark Mode Adjustments */
.dark-mode .facio-page-header h2 { color: #00e676; }
.dark-mode .facio-page-header p { color: #aaa; }
.dark-mode .facio-form-group label { color: #ddd; }
.dark-mode .facio-select {
  background: #1e1e1e;
  border-color: #333;
  color: #fff;
}
.dark-mode .facio-select:focus {
  border-color: #00c853;
  background: #1a1a1a;
}
.dark-mode .facio-pdf-viewer {
  background: #1e1e1e;
  border-color: #333;
}
.dark-mode .facio-pdf-viewer h3 { color: #00e676; }
@media (max-width: 768px) {
  .facio-form { padding: 1rem; }
  .facio-pdf-viewer embed { height: 400px; } /* کوچکتر برای موبایل */
}
/*//////////
/* FACIO - Form Row (برای قرار دادن چند فیلد در یک خط) */
.facio-form-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.facio-form-row .facio-form-group {
  flex: 1;
  min-width: 120px;
}

/* FACIO - Time Input */
.facio-time-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.facio-time-input select {
  width: 70px;
}
.facio-time-input span {
  font-weight: bold;
  color: #666;
}

/* FACIO - Success Message */
.facio-success {
  background: #e8f5e9;
  color: #00c853;
  padding: 0.8rem 1rem;
  border-radius: 8px;
  border: 1px solid #00c853;
  margin-bottom: 1rem;
  text-align: center;
}

/* Dark Mode */
.dark-mode .facio-success {
  background: #1b5e20;
  color: #69f0ae;
  border-color: #00c853;
}
/************
/* ====================== */
/* نمودار اعتبار وام */
/* ====================== */
.loan-credit-container {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 16px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border: 1px solid #e0e0e0;
  text-align: center;
  font-family: 'Vazir', Tahoma, sans-serif;
}

.credit-title {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  color: #2c3e50;
  font-weight: 600;
}

.credit-bar-wrapper {
  position: relative;
  margin: 1rem 0;
}

.credit-bar-bg {
  height: 24px;
  background: #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.credit-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50 0%, #8BC34A 100%);
  border-radius: 12px;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0%;
  position: relative;
  overflow: hidden;
}

.credit-bar-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%);
  background-size: 20px 20px;
  animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.credit-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #666;
  font-weight: 500;
}

.credit-info {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: #555;
  line-height: 1.5;
  font-family: 'Vazir', Tahoma, sans-serif;
  font-weight: 400;
}

.credit-info strong {
  color: #27ae60;
  font-weight: 700;
  font-size: 0.95rem;
}

/* انیمیشن پالس برای 100% */
.credit-bar-fill[style*="100%"] {
  animation: pulse-green 2s ease-out 0.5s;
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
}
/* ====================== */
/* بهبود فرم وام */
/* ====================== */
.facio-form {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  border: 1px solid #eee;
}

.facio-input-group {
  margin-bottom: 1.25rem;
}

.facio-input-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #2c3e50;
}

.facio-select-wrapper,
.facio-input-group input,
.facio-input-group textarea {
  width: 100%;
}

.facio-select,
.facio-input-group input,
.facio-input-group textarea {
  padding: 0.75rem 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.2s ease;
  background: #fff;
}

.facio-select:focus,
.facio-input-group input:focus,
.facio-input-group textarea:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
}

.facio-btn {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  border: none;
  padding: 0.85rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  margin-top: 0.5rem;
}

.facio-btn:hover {
  background: linear-gradient(135deg, #45a049, #3d8b40);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.facio-btn:active {
  transform: translateY(0);
}

/* ====================== */
/* استایل‌های اضافی (اختیاری) */
/* ====================== */
small {
  color: #777;
  font-size: 0.85rem;
  display: block;
  margin-top: 0.25rem;
}

#dynamic-fields {
  transition: opacity 0.3s ease;
}

/* انیمیشن برای بار اعتبار */
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
}

.credit-bar-fill[style*="width: 100%"] {
  animation: pulse-green 2s ease-out 0.5s;
}
/* ====================== */
/* به‌روزرسانی credit-info */
/* ====================== */
.credit-info {
  margin: 0.75rem 0 0;
  font-size: 0.875rem; /* 14px - کوچکتر از قبل */
  color: #555;
  line-height: 1.5;
  font-family: 'Vazir', Tahoma, sans-serif;
  text-align: center;
  font-weight: 300;
}

.credit-info strong {
  color: #27ae60;
  font-weight: 700;
  font-size: 0.95rem;
}






/* هدر طبق عکس */
.header-like-shot{
  background:#fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  padding: 10px 14px;
  display:flex;
  align-items:flex-start;     /* مثل عکس: دکمه‌ها بالا */
  justify-content:space-between;
}

/* لوگو سمت راست و بزرگ */
.header-logo img{
  height: 64px;               /* بزرگ‌تر */
  width: auto;
  display:block;
}

/* دکمه‌ها سمت چپ - عمودی */
.header-actions{
  display:flex;
  flex-direction:column;      /* دو دکمه زیر هم */
  gap: 10px;
  align-items:flex-start;
}

/* دکمه‌ها */
.change-pass-btn,
.logout-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration:none;
  font-size: 13px;
  font-weight: 700;
  color:#fff;
  line-height: 1;
  min-width: 110px;           /* مثل عکس هم‌عرض */
  transition: 0.2s;
}

.change-pass-btn{ background:#0d6efd; }
.change-pass-btn:hover{ background:#0b5ed7; }

.logout-btn{ background:#dc3545; }
.logout-btn:hover{ background:#bb2d3b; }

/* موبایل خیلی کوچک */
@media(max-width: 420px){
  .header-logo img{ height: 58px; }
  .change-pass-btn, .logout-btn{ min-width: 100px; font-size:12px; }
}





@media (max-width: 768px){

  .header-like-shot{
    position: relative;   /* مهم */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
  }

  /* لوگو راست */
  .header-logo img{
    height: 60px;
  }

  /* دکمه‌ها چپ */
  .header-actions{
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* تاریخ وسط واقعی صفحه */
  .header-date{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.5;
    color: #111827;
    pointer-events: none; /* باعث نشه روی دکمه‌ها اثر بذاره */
  }

  .change-pass-btn,
  .logout-btn{
    min-width: 120px;
    padding: 8px 12px;
    font-size: 13px;
  }
}