/* Variables & Reset */
:root {
    --primary: #d96a30;
    --primary-light: #ff8d50;
    --primary-lighter: #f8ede7;
    --primary-dark: #C16A37;
    --primary-darker: #A8552A;
    --primary-orange: #f5a623;
    --primary-orange-hover: #e09210;
    --secondary: #10b981;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;

    --card-bg: #FFF8F3;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    --transition: all 0.2s ease;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --primary-gradient: linear-gradient(135deg, #ff9f43, #ff6b6b);

    --shadow-light: 0 8px 24px rgba(221, 186, 163, 0.12);
    --shadow-hover: 0 12px 30px rgba(221, 186, 163, 0.25);

    --border: #E8D7C8;
    --border-radius-lg: 24px;
    --border-radius-md: 16px;

    --success: #4CAF50;
    --success-bg: #E7F4E8;
    --success-text: #2E7D32;

    --warning: #FFB74D;
    --warning-bg: #FFF3E2;
    --warning-text: #9A5B13;

    --danger: #E57373;
    --danger-bg: #FBEAEA;
    --danger-text: #C0392B;

          /* رنگ‌بندی تفکیک‌شده دروس */
    --color-math: #3498db;
    --color-math-bg: #d4ebf9;
    --color-science: #2ecc71;
    --color-science-bg: #d6fae8;
    --color-persian: #e67e22;
    --color-persian-bg: #f9e2cf;
    --color-computer: #9b59b6;
    --color-computer-bg: #f5eef8;
    --color-art: #e91e63;
    --color-art-bg: #f9cedc;
    --color-sports: #1abc9c;
    --color-sports-bg: #e6f9f5;
    --color-quran: #f1c40f;
    --color-quran-bg: #f8eecc;
    --color-physics: #1abc9c;
    --color-literature: #3498db;
    --color-biology: #e74c3c;
    --color-motaleat: #b10ff1;
    --color-motaleat-bg: #f0e2f6;
    --color-negaresh: #f10f0f;
    --color-negaresh-bg: #eed4d4;
    
}

@font-face {
    font-family: "Vazirmatn";
    src: url("/static/fonts/Vazirmatn-Regular.ttf");
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Vazirmatn', sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* ===== HEADER / NAVBAR ===== */
.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    /* Added subtle border and backdrop blur */
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    box-shadow: 3px 1px 1px 1px rgba(37, 99, 235, 0.1);
    border-radius: 0 0 15px 15px;
    padding: 15px 20px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    font-size: 1.4rem;
    font-weight: 800;
    color: #d86f3b;
}

.nav-links {
    display: none; /* Hidden on mobile by default */
}

.nav-links li {
    display: inline-block;
    margin-left: 25px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #555;
}

.nav-links li.active {
    color: #d86f3b;
    font-weight: 600;
}

.nav-info {
    display: flex;
    gap: 25px;
    align-items: center;
}

.cta-btn {
    background-color: #ef7e41;
    color: #fff;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    transition: background 0.3s;
}

.cta-btn:hover {
    background-color: #d96a30;
}

.logout-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.2rem;
    background-color: #dc3545;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

.logout-btn:hover {
    background-color: #c82333;
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

.logout-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(220, 53, 69, 0.2);
}

.profile-info-small {
    display: flex;
    gap: 15px;
}

/* .date-display {
    background: var(--gray-100);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.85rem;
} */

/* .nav-links {
    display: none;
    
} */


body {
    font-family: 'Vazirmatn', sans-serif;
    color: #333;
    /* Beautiful Gradient Background */
    background: linear-gradient(180deg, #f9d55e3d 0%, #fa996541 40%, #65ccff3b 100%);
    background-image: url('/static/icons/background-pattern.svg');
    background-repeat: repeat;
    background-size: 350px 350px;
    min-height: 100vh;
    direction: rtl;
    line-height: 2;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}

/* Header & Typography */
.page-header {
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.page-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.page-title i {
    color: var(--primary);
    background-color: var(--primary-lighter);
    padding: 12px;
    border-radius: 50%;
}

.page-subtitle {
    font-size: 1.1rem;
    color: var(--gray-600);
    max-width: 700px;
    line-height: 1.8;
}

/* Buttons */
.btn {
    padding: 12px 24px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    font-family: 'Vazirmatn', sans-serif;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-darker);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: white;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}

.btn-secondary:hover {
    background-color: var(--gray-50);
    border-color: var(--gray-400);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.btn-outline {
    background-color: transparent;
    color: var(--gray-600);
    border: 1px solid var(--gray-300);
    padding: 8px 16px;
    font-size: 0.9rem;
}

.btn-outline:hover {
    background-color: var(--gray-50);
    color: var(--gray-800);
}

/* Cards */
.card {
    background-color: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 24px;
    margin-bottom: 24px;
}

.card-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-100);
}

/* Forms */
.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--gray-700);
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    font-size: 1rem;
    transition: var(--transition);
    background-color: white;
    color: var(--gray-800);
    font-family: inherit;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

.help-text {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin-top: 6px;
}



.required-indicator {
    color: var(--danger);
    margin-right: 4px;
}

/* Alerts & Messages */

.messages {
    position: fixed;
    top: 110px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 400px;
    pointer-events: none; /* so clicks pass through container */
    color: white;
  }

  /* Each message – your existing .alert, plus animation styles */
  .alert {
    pointer-events: auto; /* make message clickable */
    position: relative;
    padding: 1rem 2.5rem 1rem 1.5rem;
    border-radius: 12px;
    font-size: 2rem;
    font-weight: 500;
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    transform-origin: right center;
    animation: slideInRight 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
    border: none;
  }

  /* Customise colours based on your existing tags */
  .alert-success {
    background: linear-gradient(135deg, #10b981, #059669);
    border-left: 4px solid #34d399;
  }
  .alert-error {
    background: linear-gradient(135deg, #6d2626, #f84d4d);
    color: white;
    border-left: 4px solid #f87171;
  }
  .alert-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border-left: 4px solid #fbbf24;
  }
  .alert-info {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-left: 4px solid #60a5fa;
  }

  /* Close button */
  .msg-close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 20px;
    color: white;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
  }
  .msg-close:hover {
    background: rgba(255,255,255,0.4);
    transform: translateY(-50%) scale(1.1);
  }

  /* Entrance animation */
  @keyframes slideInRight {
    0% {
      opacity: 0;
      transform: translateX(80px) scale(0.9);
    }
    100% {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
  }

  /* Exit animation (added by JS before removal) */
  .alert-exit {
    animation: slideOutRight 0.3s ease-in forwards !important;
  }

  @keyframes slideOutRight {
    0% {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
    100% {
      opacity: 0;
      transform: translateX(100px) scale(0.8);
    }
  }

  /* Optional: Respect reduced motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .alert {
      animation: none;
    }
    .alert-exit {
      animation: none !important;
    }
  }


/* Utilities */
.text-center {
    text-align: center;
}

.mt-4 {
    margin-top: 16px;
}

.mb-4 {
    margin-bottom: 16px;
}

.w-full {
    width: 100%;
}

.grid {
    display: grid;
    gap: 24px;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn {
        width: 100%;
    }
    .nav-links {
        display: flex;
        gap: 1.5rem;
    }

    header {
        height: 100px;
    }

    .nav-link {
        color: var(--gray-600);
        font-weight: 500;
        transition: color 0.2s;
    }

    .nav-link:hover {
        color: var(--primary);
    }

    .nav-link.active {
        color: var(--primary);
        font-weight: 700;
    }
}

.header-content{
    display: flex;
    align-items: center;
    gap: 20rem;
    height: 4rem;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
}

.nav-link {
    color: var(--gray-600);
    font-weight: 500;
    transition: color 0.2s;
    text-decoration: none;
}

.nav-link:hover {
    color: var(--primary);
}

.nav-link.active {
    color: var(--primary);
    font-weight: 700;
}







/* ****************** website ********************* */
/* ===== FOOTER ===== */
footer {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 30px 0 15px;
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    border-radius: 30px 30px 0 0;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
}

.footer-logo {
    font-weight: 800;
    color: #d86f3b;
    font-size: 2rem;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.footer-links a {
    font-size: 1.1rem;
    color: #777;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #d86f3b;
}

.copyright {
    font-size: 1.1rem;
    color: #999;
    margin-top: 15px;
    border-top: 1px solid rgba(200, 200, 200, 0.3);
    padding-top: 15px;
    width: 100%;
    text-align: center;
}

/* ===== RESPONSIVE DESIGN (TABLET & DESKTOP) ===== */
@media (min-width: 768px) {
    .nav-links {
        display: block; /* Show nav on larger screens */
    }

    .footer-content {
        flex-direction: row;
        justify-content: space-between;
        text-align: right;
        flex-wrap: wrap;
    }

    .footer-links {
        justify-content: flex-end;
    }
}