/* mycsstheme.css */
/* ----------------------------------------------------------
   1. Theme Variables & Fonts
   2. Base Styles
   3. Layout & Utility Classes
   4. Button Styles
   5. Responsive Media Queries
   6. Other Global Elements
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   1. Theme Variables & Fonts
   ---------------------------------------------------------- */

/* Define CSS Variables */
:root {
    --primary-color: #e2b94c; /* Gold-like */
    --secondary-color: #1a1a1a; /* Dark Gray */
    --accent-color: #cccccc; /* Light Gray */

    --text-primary: #ffffff; /* White */
    --text-secondary: #e2b94c; /* Gold-like */
    --text-accent: #1a1a1a; /* Dark Gray */
}

/* Import 'dana' font */
@font-face {
    font-family: 'dana';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/dana/Dana.eot') format('embedded-opentype'), url('../fonts/dana/dana.woff2') format('woff2'), url('../fonts/dana/Dana.ttf') format('truetype');
}

/* Import 'yekanlight' font */
@font-face {
    font-family: 'yekanlight';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/iranyekanlight/iranyekanweblight_fanum.eot') format('embedded-opentype'), url('../fonts/iranyekanlight/iranyekanweblight_fanum.woff2') format('woff2'), url('../fonts/iranyekanlight/iranyekanweblight_fanum.ttf') format('truetype');
}

/* ----------------------------------------------------------
   2. Base Styles
   ---------------------------------------------------------- */

html {
    font-size: 0.8rem !important;
}

body {
    margin: auto;
    margin-bottom: 60px;
    font-family: 'yekanlight', sans-serif !important; /* Default font: yekanlight */
    direction: rtl;
    text-align: right;
    /* Dark background gradient */
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.search-container {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 2.5rem;
    background: linear-gradient(135deg, #1f1f1f 0%, #2d2d2d 100%);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.form-control, .form-select {
    background-color: #2a2a2a;
    border: 1px solid #3a3a3a;
    color: #ffffff;
    border-radius: 10px;
    padding: 0.8rem;
}

    .form-control:focus, .form-select:focus {
        background-color: #2a2a2a;
        border-color: #e2b94c;
        color: #ffffff;
        box-shadow: 0 0 0 0.25rem rgba(226, 185, 76, 0.25);
    }

    .form-control::placeholder {
        color: #888888;
    }

    .form-select option {
        background-color: #2a2a2a;
        color: #ffffff;
    }

h1, h2, h3, h4, h5, h6 {
    font-family: 'dana', sans-serif; /* Headings use 'dana' */
    color: var(--primary-color);
    font-weight: 700;
}

.text-right-label {
    float: right;
}

/*
   Updated:
   - Background color uses var(--accent-color) (#cccccc)
   - Text color changed to var(--secondary-color) (#1a1a1a) for contrast
*/
.login-logout-div,
.yasdiv {
    border-radius: 1px;
    padding: 1px;
    background-color: var(--accent-color) !important; /* Light gray */
    color: var(--secondary-color) !important; /* Dark gray for contrast */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ----------------------------------------------------------
   3. Layout & Utility Classes (Responsive styles below)
   ---------------------------------------------------------- */

/* Focus & Active States
   Updated to reflect theme colors more consistently.
   You can adjust these if you prefer a different focus look.
*/
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--accent-color), 0 0 0 0.25rem var(--primary-color);
    outline: none; /* Remove default outline for clarity */
}

/* ----------------------------------------------------------
   4. Button Styles
   ---------------------------------------------------------- */

/* Primary Button Styles */
.btn-primary {
    background-color: var(--primary-color); /* Gold-like */
    border-color: var(--primary-color);
    color: #1a1a1a; /* Dark Gray */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

    .btn-primary:hover {
        background-color: #d4a23f; /* Slightly darker gold */
        border-color: #d4a23f;
        color: #1a1a1a; /* Ensure text remains dark gray on hover */
    }

/* Outline Secondary Button Styles */
.btn-outline-secondary {
    color: #1a1a1a; /* Dark Gray */
    border-color: var(--primary-color); /* Gold-like border */
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .btn-outline-secondary:hover {
        background-color: var(--primary-color); /* Gold-like background */
        color: #1a1a1a; /* Dark Gray text */
    }

/* Outline Button Styles emptystomach */
.btn-primary-emptystomach {
    background-color: transparent; /* Transparent background */
    border: 1px solid var(--primary-color); /* Gold-like outline */
    color: var(--primary-color); /* Gold text */
    font-weight: 500;
    padding: 10px 30px;
    font-size: 1.1rem;
    border-radius: 10px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .btn-primary-emptystomach:hover {
        background-color: var(--primary-color); /* Gold background on hover */
        border-color: var(--primary-color); /* Consistent border color */
        color: #1a1a1a; /* Dark gray text on hover */
    }

    .btn-primary-emptystomach:active {
        background-color: var(--accent-color) !important;
        Accent color when clicked border-color: var(--accent-color) !important;
        Change border color to accent color: #fff;
        White text for better contrast
    }
    /* Disabled Button Styles */
    .btn-primary-emptystomach:disabled {
        background-color: #f0f0f0; /* Light gray background */
        border-color: #dcdcdc; /* Gray border */
        color: #b5b5b5; /* Muted gray text */
        cursor: not-allowed; /* Show a "not allowed" cursor */
        opacity: 0.6; /* Slightly transparent to indicate disabled state */
    }

.btn-primary-fullstomach {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: #1a1a1a;
    font-weight: 600;
    padding: 10px 30px;
    font-size: 1.1rem;
    border-radius: 10px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .btn-primary-fullstomach:hover {
        background-color: transparent;
        border-color: var(--primary-color);
        color: var(--primary-color);
    }

    .btn-primary-fullstomach:active {
        background-color: var(--accent-color) !important;
        border-color: var(--accent-color) !important;
        color: #fff;
    }

    .btn-primary-fullstomach:disabled {
        background-color: #f0f0f0;
        border-color: #dcdcdc;
        color: #b5b5b5;
        cursor: not-allowed;
        opacity: 0.6;
    }




/* ----------------------------------------------------------
   5. Responsive Media Queries
   ---------------------------------------------------------- */

/* Screens above 768px */
@media only screen and (min-width: 769px) {
    h1, h2, h3, h4, h5, h6 {
        font-size: 2em;
        font-weight: 700;
    }

    .search-container {
        padding: 1.5rem;
    }

    .login-logout-div {
        width: 40%;
        margin: 0 auto;
        text-align: center;
    }
}

/* Screens between 481px and 768px */
@media only screen and (min-width: 481px) and (max-width: 768px) {
    h1, h2, h3, h4, h5, h6 {
        font-size: 1.5em;
    }

    .login-logout-div {
        max-width: 80%;
        margin: 0 auto;
        text-align: center !important;
    }
}

/* Screens up to 480px */
@media only screen and (max-width: 480px) {
    h1, h2, h3, h4, h5, h6 {
        font-size: 1.2em;
    }

    .login-logout-div {
        max-width: 100%;
        margin: 0 auto;
        text-align: center !important;
        border-radius: 10px;
        border: 2px solid black;
    }
}
/* ----------------------------------------------------------
   پیام‌های خطای زیبا
   ---------------------------------------------------------- */
.error-message {
    background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%);
    color: white;
    padding: 15px 20px;
    border-radius: 10px;
    margin: 10px 0;
    border-right: 4px solid #721c24;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
    animation: slideIn 0.3s ease-out;
}

.warning-message {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: #1a1a1a;
    padding: 15px 20px;
    border-radius: 10px;
    margin: 10px 0;
    border-right: 4px solid var(--primary-color);
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
    animation: slideIn 0.3s ease-out;
}

.success-message {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
    color: white;
    padding: 15px 20px;
    border-radius: 10px;
    margin: 10px 0;
    border-right: 4px solid #155724;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* حذف خودکار بعد از 4 ثانیه */
.auto-hide {
    animation: slideIn 0.3s ease-out, fadeOut 0.5s ease-in 3.5s forwards;
}

@keyframes fadeOut {
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* دکمه‌های تایید و تکذیب */
.confirmation-message button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.confirmation-message #confirmYes:hover {
    background: #d4a23f !important;
}

.confirmation-message #confirmNo:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #e2b94c !important;
}

/* ----------------------------------------------------------
   6. Other Global Elements
   ---------------------------------------------------------- */

footer {
    text-align: center;
    direction: rtl;
    margin: 0 auto;
}

img {
    width: 100px;
    height: 100px;
    margin: 10px;
}

/* Logo link */
a.logo {
    display: inline-block;
    margin: 0;
    padding: 0;
}

    a.logo img {
        height: 50px;
        width: auto;
    }

/* Custom Scrollbar Styles for Entire Site */
* {
    scrollbar-width: thin; /* برای فایرفاکس */
    scrollbar-color: var(--primary-color) var(--secondary-color); /* رنگ انگشتک و ریل */
}

    /* Webkit Browsers (Chrome, Safari, Edge) */
    *::-webkit-scrollbar {
        width: 8px; /* عرض اسکرول‌بار */
        height: 8px; /* ارتفاع اسکرول‌بار افقی (در صورت نیاز) */
    }

    *::-webkit-scrollbar-track {
        background: var(--secondary-color); /* پس‌زمینه ریل */
        border-radius: 10px;
    }

    *::-webkit-scrollbar-thumb {
        background: var(--primary-color); /* رنگ انگشتک */
        border-radius: 10px;
        transition: background-color 0.3s ease;
    }

        *::-webkit-scrollbar-thumb:hover {
            background: #d4a23f; /* رنگ روشن‌تر هنگام هورر */
        }

/* Optional: Remove scrollbar in specific cases if needed */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none; /* برای IE و Edge */
    scrollbar-width: none; /* برای Firefox */
}