:root {
  /* GNOME / Catppuccin Colors */
  --gnome-bg: #1e1e2e;
  --gnome-panel: #181825;
  --gnome-surface: #313244;
  --gnome-surface-hover: #45475a;
  --gnome-border: #585b70;
  --gnome-text: #cdd6f4;
  --gnome-subtext: #a6adc8;
  --gnome-blue: #89b4fa;
  --gnome-green: #a6e3a1;
  --gnome-red: #f38ba8;
  --gnome-yellow: #f9e2af;
  --gnome-purple: #cba6f7;
  --gnome-peach: #fab387;
  --gnome-teal: #94e2d5;
  --gnome-pink: #f5c2e7;
  --gnome-maroon: #eba0ac;
  
  /* Sizes & Effects */
  --gnome-radius: 12px;
  --gnome-radius-sm: 8px;
  --gnome-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --gnome-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.25);
  
  /* Accent Color */
  --gnome-accent: var(--gnome-purple); 

  --bg:linear-gradient(135deg, #667eea 0%, #764ba2 100%);


/* ============================================
   تم رنگی نقره‌ای و شیشه‌ای
   الهام‌گرفته از GNOME 40+ و ویندوز ۱۱
   ============================================ */


  /* ----- رنگ‌های اصلی (نقره‌ای – خاکستری) ----- */
  --silver-50:  #f8f9fa;
  --silver-100: #f0f1f3;
  --silver-200: #e2e4e8;
  --silver-300: #c9cdd4;
  --silver-400: #a8aeb8;
  --silver-500: #8b929c;
  --silver-600: #6f7680;
  --silver-700: #595f67;
  --silver-800: #454a50;
  --silver-900: #2e3238;

  /* ----- رنگ‌های تأکیدی (آبی ملایم ویندوز/گنوم) ----- */
  --accent-50:  #e8f0fe;
  --accent-100: #c7dbfc;
  --accent-200: #a1c4fa;
  --accent-300: #7aacf7;
  --accent-400: #5494f5;
  --accent-500: #2b7cf2;   /* اصلی */
  --accent-600: #1f64c9;
  --accent-700: #154c9e;
  --accent-800: #0c3573;
  --accent-900: #052048;

  /* ----- رنگ‌های پس‌زمینه شیشه‌ای ----- */
  --glass-bg:          rgba(255, 255, 255, 0.65);
  --glass-bg-dark:     rgba(30, 30, 35, 0.55);
  --glass-border:      rgba(255, 255, 255, 0.25);
  --glass-shadow:      rgba(0, 0, 0, 0.08);
  --glass-blur:        16px;

  /* ----- رنگ‌های متن ----- */
  --text-primary:   var(--silver-900);
  --text-secondary: var(--silver-700);
  --text-muted:     var(--silver-500);
  --text-on-glass:  var(--silver-900);
  --text-on-accent: #ffffff;
}

/* ============================================
   افکت‌های شیشه‌ای (Glassmorphism)
   ============================================ */

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px var(--glass-shadow);
  color:  var(--text-on-glass);
}

.glass-dark {
  background: var(--glass-bg-dark);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.20);
  color: #f0f0f0;
}

/* ============================================
   گرادیان‌های نقره‌ای – شیشه‌ای
   ============================================ */

.bg-gradient-silver {
  background: linear-gradient(145deg, #f2f4f7 0%, #dde0e5 100%);
}

.bg-gradient-glass {
  background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(220,225,232,0.4) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.3);
}

.bg-gradient-glass-dark {
  background: linear-gradient(135deg, rgba(40,40,50,0.6) 0%, rgba(20,22,28,0.7) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ============================================
   کلاس‌های کمکی (رنگ‌ها، حاشیه‌ها، سایه‌ها)
   ============================================ */

/* رنگ‌های متن */
.text-silver-50  { color: var(--silver-50); }
.text-silver-100 { color: var(--silver-100); }
.text-silver-200 { color: var(--silver-200); }
.text-silver-300 { color: var(--silver-300); }
.text-silver-400 { color: var(--silver-400); }
.text-silver-500 { color: var(--silver-500); }
.text-silver-600 { color: var(--silver-600); }
.text-silver-700 { color: var(--silver-700); }
.text-silver-800 { color: var(--silver-800); }
.text-silver-900 { color: var(--silver-900); }

/* رنگ‌های پس‌زمینه (solid) */
.bg-silver-50  { background-color: var(--silver-50); }
.bg-silver-100 { background-color: var(--silver-100); }
.bg-silver-200 { background-color: var(--silver-200); }
.bg-silver-300 { background-color: var(--silver-300); }
.bg-silver-400 { background-color: var(--silver-400); }
.bg-silver-500 { background-color: var(--silver-500); }
.bg-silver-600 { background-color: var(--silver-600); }
.bg-silver-700 { background-color: var(--silver-700); }
.bg-silver-800 { background-color: var(--silver-800); }
.bg-silver-900 { background-color: var(--silver-900); }

/* رنگ‌های تأکیدی (آبی) */
.text-accent    { color: var(--accent-500); }
.bg-accent     { background-color: var(--accent-500); color: var(--text-on-accent); }
.bg-accent-soft{ background-color: var(--accent-100); }

/* حاشیه‌های نقره‌ای */
.border-silver { border-color: var(--silver-300); }
.border-glass  { border-color: var(--glass-border); }

/* سایه‌های نرم (ویندوز ۱۱ استایل) */
.shadow-soft {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.shadow-medium {
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10);
}
.shadow-glass {
  box-shadow: 0 8px 32px var(--glass-shadow);
}
.shadow-glass-top {
  box-shadow: 0 -8px -14px var(--glass-shadow);
}









* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: IRANSans;
  font-size: 12px;
}
h1 , h2, h3{font-family: Titr;}
h4, h5, h6{font-family: Vazir;}
body{
  background: var(--glass-bg);
  background-size: 200% 200%;
  color: var(--gnome-subtext);
  animation: darkFlow 20s ease infinite;
}
.pda-login{
  width: 100%;
  min-height: 100vh;
  font-family: 'Vazir', 'Vazirmatn', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.pda-login-img{
  width: 120px;
}
.login-form {
  text-align: center;
  margin-top: 16px;
  padding: 24px;
  background: rgba(30, 30, 46, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--gnome-shadow-sm);
  border-radius: var(--gnome-radius);
}

input.dark-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  color: var(--gnome-text);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  font-size: 16px;
  text-align: center;
  border-radius: var(--gnome-radius-sm);
  padding: 10px;
}

input.dark-input:focus {
  border-color: var(--gnome-accent);
  box-shadow: 0 0 0 3px rgba(203, 166, 247, 0.25);
  outline: none;
  background: rgba(0, 0, 0, 0.5);
}

input.dark-input::placeholder {
  color: var(--gnome-border);
}

.linux-btn {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  color: var(--gnome-text);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 28px;
  border-radius: var(--gnome-radius);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 12px;
}

.linux-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: var(--gnome-shadow-sm);
}

.linux-btn:active {
  transform: translateY(0) scale(0.98);
}






/**********************************
 *    DashBoard 
 * ********************************/
.pda-glass {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(255,255,255,0.3);
    }

.pda-nav{
  display: flex;
  flex-direction: row;
  flex-wrap: none;
  gap: 8px;
  align-items: middle;
  justify-content: center;
  background: var(--silver-300);
  box-shadow: -8 -16 1 1 var(--silver-500);
  border-top: 1px solid var(--glass-border);
  backdrop-filter:blur(30px) saturate(180%);
}
.pda-nav-item{
  text-decoration: none;
  font-size: 12px;
  padding: 8px 12px;

  display: flex;
  flex-direction: row;
  flex-wrap: none;
  gap: 8px;
  align-items: middle;
  justify-content: center;

  color: var(--text-primary);

   transition:all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.pda-nav-item:hover{
  background: var(--accent-100);
}
.pda-nav-item i{
  font-size: 14px;
}
 .pda-nav-item span{
  text-align: center;
}


@media (max-width: 600px) {
  .pda-nav{
   justify-content: space-between;

  }
  .pda-nav-item span{
  display: none;
}

}




/*********
* Dashboard->Home
*********/
.pda-home-main{
  min-height: 95vh;
  width: 100%;
  margin-bottom: 40px;
}
.pda-home-grid{
  display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      grid-auto-rows: minmax(140px, auto);
      gap: 8px;
      grid-auto-flow: dense; /* 👈 ماژول‌ها را برای پر کردن جای خالی جابه‌جا می‌کند */
      max-width: 1280px;
      margin: 0 auto;
      padding: 8px;
}

    /* ===== تعیین سایزهای مختلف برای ماژول‌ها ===== */
    /* ماژول پهن (دو ستونه) */
    .card-wide {
      grid-column: span 2;
    }
    /* ماژول بلند (دو ردیفه) */
    .card-tall {
      grid-row: span 2;
    }
    /* ماژول بزرگ (دو در دو) */
    .card-large {
      grid-column: span 2;
      grid-row: span 2;
    }
    /* ماژول باریک (عرض معمولی ولی ارتفاع کم) */
    .card-short {
      grid-row: span 1;
      min-height: 100px;
    }

    /* ===== ریسپانسیو برای تبلت ===== */
    @media (max-width: 992px) {
      .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 18px;
      }
      .card-wide, .card-large {
        grid-column: span 1; /* در تبلت پهن‌ها یک ستونه می‌شوند */
      }
      .card-tall {
        grid-row: span 1; /* بلندی‌ها هم عادی می‌شوند */
      }
      .card-large {
        grid-row: span 1;
      }
    }

    /* ===== ریسپانسیو برای موبایل ===== */
    @media (max-width: 600px) {
      .dashboard-grid {
        grid-template-columns: 1fr; /* تک‌ستونه */
        gap: 16px;
      }
      .card-wide, .card-tall, .card-large {
        grid-column: span 1;
        grid-row: span 1;
      }
    }
/**************************
* Dashboard->Contacts
***************************/
.pda-contact{
  min-height: 95vh;
  margin-bottom: 40px;
  color: var(--silver-800);
}
.pda-worksallari{ 
  min-height: 95vh;
  margin-bottom: 40px;
  color: var(--silver-800);
}

/**************************
* Dashboard->WorkSallari
***************************/
#workrules{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  align-items: middle;
  justify-content: center;
 box-shadow: -8 -16 1 1 var(--silver-500);
 border-top: 1px solid var(--glass-border); 
 flex-basis: 80px;
}
#workrules span{
  background: #FFF;
 
  border-radius: 8px;
}
#workrules span input{
  text-align: center;
}