@import url(../font/font.css);

* {
    font-family: 'PeydaWebFaNum', serif;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 2rem;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.select-custom-style > label, .select-custom-style > select {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    text-align: center;
}

.back-btn-top-data-entry {
    width: fit-content;
    justify-self: end;
}

.custom-select {
    appearance: none;
    background-color: transparent;
    border: none;
    border-radius: 10px;
    padding: 10px 5px;
    font-size: 16px;
    width: 100%;
    direction: rtl;
    text-align: right;
}

.custom-select:focus {
    border-color: #aaa;
    outline: none;
}

.custom-select option {
    padding: 10px;
    text-align: right;
}

.back-btn-expenses {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
}

.select-custom-style {
    display: flex;
    width: fit-content;
    white-space: nowrap;
    align-items: center;
    padding-left: 2rem;
    margin-left: -2rem;
    position: relative;
}

.select-custom-style::before {
    content: "";
    position: absolute;
    background: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M20.031%209.53062L12.531%2017.0306C12.4614%2017.1003%2012.3787%2017.1557%2012.2876%2017.1934C12.1966%2017.2312%2012.099%2017.2506%2012.0004%2017.2506C11.9019%2017.2506%2011.8043%2017.2312%2011.7132%2017.1934C11.6222%2017.1557%2011.5394%2017.1003%2011.4698%2017.0306L3.96979%209.53062C3.82906%209.38988%203.75%209.19901%203.75%208.99999C3.75%208.80097%203.82906%208.61009%203.96979%208.46936C4.11052%208.32863%204.30139%208.24957%204.50042%208.24957C4.69944%208.24957%204.89031%208.32863%205.03104%208.46936L12.0004%2015.4397L18.9698%208.46936C19.0395%208.39968%2019.1222%208.34441%2019.2132%208.30669C19.3043%208.26898%2019.4019%208.24957%2019.5004%208.24957C19.599%208.24957%2019.6965%208.26898%2019.7876%208.30669C19.8786%208.34441%2019.9614%208.39968%2020.031%208.46936C20.1007%208.53905%2020.156%208.62177%2020.1937%208.71282C20.2314%208.80386%2020.2508%208.90144%2020.2508%208.99999C20.2508%209.09854%2020.2314%209.19612%2020.1937%209.28716C20.156%209.37821%2020.1007%209.46093%2020.031%209.53062Z%22%20fill%3D%22%23343330%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    left: 0;
    top: 50%;
    width: 1.5rem;
    height: 1.5rem;
    transform: translateY(-50%);
}

.select-a-hotel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 60px;
}

.home-select {
    padding: 1.25rem 1rem;
    border-radius: 0.75rem;
    border-color: #CBCBCB;
    background: transparent;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: right;
    width: 20.75rem;
}

.select-a-hotel > label {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
}

.select-a-hotel > label > span {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: red;
}


.aca-type-row .aca-type-cell {
    background: #fafbfc;
    font-weight: 600
}

.aca-type-row.aca-type-empty .aca-type-cell {
    background: #f6f7f8;
    color: #9aa0a6
}

.aca-field {
    margin-bottom: 10px
}

.aca-field label {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 5px
}

.aca-field select {
    width: 100%;
    height: 38px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0 8px
}

.muted {
    color: #6b7280;
    font-size: 11px
}

/* Layout */
.aca-layout {
    display: grid;
    grid-template-columns:260px 1fr;
}

.aca-topbar {
    grid-column: 1/-1;
    height: 60px;
    background: #fff;
    color: #222222;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border: 1px solid #e5eeec;
}

header.aca-topbar img {
    width: 3.5rem;
}

span.aca-topbar__title.user {
    border: unset;
    align-items: center;
    place-items: baseline;
    grid-template-columns: 1fr 1fr;
}

span.user-name {
    margin-top: 0.5rem;
}

span.aca-topbar__title{
    border-right: 1px solid #e5eeec;
    height: 2.3rem;
    padding-right: 1rem ;
    align-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #5e5e5e;
}

span.user-role.aca-topbar__subtitle {
    font-size: 0.6rem;
}

span.aca-topbar__subtitle{
    height: 2.3rem;
    padding: 0;
    align-content: center;
    font-size: 0.8rem;
    font-weight: 400;
    color: #5e5e5e;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.aca-topbar .left {
    display: flex;
    align-items: center;
    gap: 12px
}

.aca-topbar .right {
    display: flex;
    align-items: center;
    gap: 16px
}

.aca-burger {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer
}

.aca-sidebar {
    background: #fafafa;
    padding: 16px;
    border-left: 1px solid #e5eeec;
    height: 100vh;
}

.aca-sidebar__brand {
    font-weight: 700;
    margin-bottom: 12px;
    color: #073A35
}

.aca-sidebar__link {
    border-radius: 10px;
    color: #073A35;
    text-decoration: none;
    margin-bottom: 0.2rem;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    gap: 0.3rem;
    align-items: center;
    padding: 0.2rem 0.5rem;
}

.aca-sidebar__link:hover {
    background: #eaf3f1
}

.aca-sidebar__group {
    margin: 10px 0 6px
}

.aca-sidebar__group-title {
    font-weight: 600;
    color: #073A35;
    margin: 8px 0
}

.aca-sidebar__list {
    list-style: none;
    padding: 0;
    margin: 0
}

.aca-sidebar__list li a {
    display: block;
    padding: 8px 12px;
    border-radius: 10px;
    color: #073A35;
    text-decoration: none
}

.aca-sidebar__list li a:hover {
    background: #eaf3f1
}

.aca-content {
    padding: 24px
}

.aca-header-strip {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eef1f5
}

.aca-header-strip .h-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.aca-header-strip .brand {
    display: flex;
    gap: 12px;
    align-items: center
}

.aca-header-strip .logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff2f6e, #f9852f)
}

.aca-header-strip .t1 {
    font-weight: 700;
    color: #111;
    font-size: 16px
}

.aca-header-strip .t2 {
    font-size: 12px;
    color: #6b7280
}

.aca-header-strip .userbadge {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #6b7280;
    font-size: 12px
}

.aca-header-strip .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e
}

.aca-reserve-container {
    max-width: 1100px;
    margin: 18px auto;
    padding: 0 16px
}

.card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px
}

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

.g3 {
    grid-template-columns:repeat(3, minmax(0, 1fr))
}

.g4 {
    grid-template-columns:repeat(4, minmax(0, 1fr))
}

@media (max-width: 980px) {
    .g3, .g4 {
        grid-template-columns:1fr
    }
}

label {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin: 0 0 6px
}

select, input[type="date"], input[type="number"] {
    width: 100%;
    height: 42px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0 10px;
    background: #fff;
    outline: none
}

select:focus, input:focus {
    border-color: #9ac1ff;
    box-shadow: 0 0 0 3px rgba(19, 99, 223, .12)
}

.row {
    display: flex;
    gap: 10px;
    align-items: center
}

.right {
    justify-content: flex-end
}

.btn {
    height: 44px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: #1363df;
    color: #fff;
    font-weight: 700;
    padding: 0 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.btn.ghost {
    background: #fff;
    color: #1363df;
    border-color: #1363df
}

.muted {
    font-size: 12px;
    color: #6b7280
}

.chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.chip {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    color: #374151
}

.sep {
    height: 1px;
    background: #f1f5f9;
    margin: 14px 0
}

.results {
    margin-top: 16px
}

.card-room {
    display: grid;
    grid-template-columns:160px 1fr auto;
    gap: 14px;
    border: 1px solid #eef1f5;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 1rem;
}

.room-img {
    width: 160px;
    height: 110px;
    border-radius: 10px;
    background: #f2f4f8
}

.room-title {
    font-weight: 700;
    color: #111;
    margin-bottom: 0.5rem;
}

.room-sub {
    font-size: 12px;
    color: #64748b
}

.room-actions {
    display: flex;
    align-items: center;
    gap: 10px
}

/* فقط هدر روز/تاریخ */
th.day-cell.is-peak {
    background: #ffe8cc;              /* نارنجی خیلی ملایم */
    border: 2px solid #f59e0b;
    border-radius: 6px;
    color: #92400e;
}

/* اگر همان روز «today» هم باشد، هر دو دیده شوند */
th.day-cell.today.is-peak {
    box-shadow: inset 0 -3px 0 #0ea5e9; /* زیرخط آبی امروز */
    border-color: #f59e0b;
}

/* اختیاری: برای موبایل */
@media (max-width: 1024px) {
    .aca-layout {
        grid-template-columns:1fr
    }

    .aca-sidebar {
        position: fixed;
        top: 60px;
        right: 0;
        width: 260px;
        height: calc(100vh - 60px);
        transform: translateX(100%);
        transition: transform .25s ease;
        background: #fff;
        z-index: 1000
    }

    .aca-sidebar.open {
        transform: translateX(0)
    }
}