body {
    margin: 0;
    padding: 0;

    font-family: Tahoma, Arial, sans-serif;

    background: #f4f6f8;
    color: #1f2937;
}



.container {

    max-width: 1000px;

    margin: 40px auto;

    padding: 0 20px;
}



.card {

    background: white;

    border-radius: 14px;

    padding: 24px;

    box-shadow: 0 10px 25px rgba(0,0,0,.08);

}



.menu {

    display: grid;

    gap: 12px;

    margin-top: 20px;

}



/* همه دکمه‌ها و لینک‌های منو */

.menu-button {

    width: 100%;

    min-height: 48px;

    box-sizing: border-box;


    display: flex;

    align-items: center;

    justify-content: center;


    padding: 12px 16px;


    border: none;

    border-radius: 10px;


    background: #2563eb;

    color: white;


    font-family: inherit;

    font-size: 16px;

    font-weight: bold;


    text-decoration: none;


    cursor: pointer;


    transition: .2s;

}



.menu-button:hover {

    background: #1d4ed8;

}



/* فاصله و چیدمان دکمه‌های صفحه */

.actions {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 25px;

}



/* فرم‌هایی که فقط برای دکمه هستند */

.action-form {

    width: 100%;

    margin: 0;

}



.action-form button {

    width: 100%;

}



/* فرم‌ها */

.form {

    display: grid;

    gap: 18px;

    margin-top: 24px;

}



.form-group {

    display: grid;

    gap: 8px;

}



.form-group label {

    font-weight: bold;

}



.form-group input,
.form-group textarea {

    width: 100%;

    box-sizing: border-box;

    padding: 12px;

    border: 1px solid #d1d5db;

    border-radius: 10px;

    font: inherit;

}



.form-actions {

    display: grid;

    gap: 12px;

}



.form-actions button {

    font-family: inherit;

    font-size: 16px;

    text-align: right;

}


/* دکمه خاکستری */

.secondary-button {

    background: #6b7280;

}



.secondary-button:hover {

    background: #4b5563;

}



/* جدول */

.table-wrapper {

    margin-top: 24px;

    overflow-x: auto;

}



table {

    width: 100%;

    border-collapse: collapse;

}



th,
td {

    padding: 12px;

    border-bottom: 1px solid #e5e7eb;

    text-align: right;

    white-space: nowrap;

}



th {

    background: #f8fafc;

}



.table-link {

    display: inline-block;

    padding: 8px 12px;

    border-radius: 8px;

    background: #2563eb;

    color: #ffffff;

    text-decoration: none;

    font-weight: bold;

}



.table-link:hover {

    background: #1d4ed8;

}



/* پیام خطا */

.alert {

    margin-top: 16px;

    padding: 12px;

    border-radius: 10px;

}



.alert-error {

    background: #fee2e2;

    color: #991b1b;

}



.empty-state {

    padding: 20px 0;

    color: #6b7280;

}

.cancel-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.cancel-input {

    width: 100%;

    min-height: 48px;

    box-sizing: border-box;

    padding: 12px 16px;

    border: 1px solid #d1d5db;

    border-radius: 10px;

    font-family: inherit;

    font-size: 16px;

    text-align: right;

}



.menu-button {

    text-align: right;

    justify-content: flex-start;

}

.form-actions {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 24px;

}



.form-actions button {

    text-align: right;

    font-family: inherit;

}



.menu-button {

    font-family: inherit;

    text-align: right;

    justify-content: flex-start;

}

.form-group select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font: inherit;
    background: #ffffff;
}