/* 🎨 رنگ‌ها و متغیرها */
:root {
    --primary-color: #2563EB; /* آبی اصلی */
    --primary-dark: #1E40AF;
    --accent-color: #422907; /* طلایی اکسانت */
    --bg-soft: #F3F4F6;
    --text-color: #1F2937;
    --border-radius: 6px;
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ساختار کلی صفحه */
body {
    font-family: var(--font-main);
    font-size: small;
    color: var(--text-color);
    background-color: var(--bg-soft);
    margin: 0;
    padding: 0;
}
p{
    color: #FFFFFF;
}
label{
    color: var(--bg-soft);
}
/* لینک‌ها */
a {
    color: var(--primary-color);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* نوار ناوبری */
.navbar {
    background-color:midnightblue;
    padding: 0.5rem 1rem;
    direction: rtl;

}
.navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.navbar ul li a {
    color: white;
    padding: 0.5rem 1rem;
    display: block;
    border-radius: var(--border-radius);
}
.navbar ul li a:hover {
    background-color: var(--accent-color);
}

/* کانتینر دو ستونه */
.container {

    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 20px;
    padding: 10px;
}
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

/* جدول */
table {
    margin-top: 0; /* Remove any vertical gap */
    vertical-align: top; /* Helps in inline/flex layouts */
    width: 88%;
    border-collapse: collapse; /* Makes borders neat */
    /*margin: 25px 0;*/
    font-size: 1em; /* Slightly larger font for readability */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern font stack */
    min-width: 400px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    border-radius: 5px; /* Slightly rounded corners */
}

/* Header styling */
table thead tr {
    background-color: brown; /* Material Design Blue 500 */
    color: #ffffff; /* White text */
    text-align: left;
    font-weight: bold; /* Bold header text */
}

/* Cell padding and borders */
table th,
table td {
    padding: 12px 15px;
    border: 1px solid #e0e0e0; /* Light gray border for cells */
}

/* Styling for alternating rows (zebra striping) */
table tbody tr:nth-child(even) {
    background-color: #f3f7f9; /* Very light blue/cyan for even rows */
}

/* Hover effect for rows */
table tbody tr:hover {
    background-color: #b3e5fc; /* Lighter blue on hover */
    color: #000; /* Dark text on hover for better contrast */
    cursor: pointer; /* Indicate rows are interactive */
}

/* Specific styling for the first column (optional) */
table tbody td:first-child {
    font-weight: 500; /* Slightly bolder for names/identifiers */
}
th {
    cursor: pointer;
}

th.sort-asc::after {
    content: ' ▲'; /* Up arrow for ascending */
}

th.sort-desc::after {
    content: ' ▼'; /* Down arrow for descending */
}
/* دکمه‌ها */
button, .blue-button, .bb {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-family: inherit;
}
button:hover, .blue-button:hover, .bb:hover {
    background-color: var(--primary-dark);
}

/* جعبه اطلاعات / فیلتر */
.info-box, .filter-box {
    background-color:brown;

    padding: 10px;
    margin-bottom: 6px;
    border-radius: var(--border-radius);
}
#filterBox #filterShenaseh,
#filterBox #filterTel ,
#filterBox #filterDay
{
    display: block;
    width: 20%;
    margin-bottom: 8px;
}

#filterBox label[for="filterShenaseh"],
#filterBox label[for="filterTel"] ,
#filterBox label[for="filterDay"]
{
    display: block;

}

/* اینپوت و سلکت */
input[type="text"],
input[type="file"],
select {
    padding: 5px;
    border-radius: var(--border-radius);
    border: 1px solid #ccc;
    font-family: inherit;
    background-color: var(--bg-soft);
    color:darkblue;
}
.filter-row {
    display: flex;
    align-items: center;   /* ارتفاع یکسان */
    gap: 0.5rem;           /* فاصله بین لیبل و اینپوت */
}

.filter-row label {
    white-space: nowrap;   /* جلوگیری از شکستن متن لیبل */
}

.filter-row .filter-input {
    flex: 1; /* اینپوت کش بیاد و فضای باقیمانده رو پر کنه */
    min-width: 150px;
}
/* Progress Bar */
progress {
    width: 100%;
    height: 16px;
}
progress::-webkit-progress-bar {
    background-color: var(--bg-soft);
    border-radius: var(--border-radius);
}
progress::-webkit-progress-value {
    background-color: var(--accent-color);
    border-radius: var(--border-radius);
}
progress::-moz-progress-bar {
    background-color: var(--accent-color);
    border-radius: var(--border-radius);
}

/* چک‌باکس ساده */
input[type="checkbox"] {
    accent-color: gold;
    color:midnightblue;
}