/* =========================================================
  متغيرات الألوان والثيمات
========================================================= */
:root {

    --color-bg: #e9e9e9e1;
    --color-text: #3a3a3a;
    --color-chair-bg: #623c3c;
    --color-table-bg: #ffffff90;
    --color-table-num-bg: #fcad3f49;
    --color-gray-dark: #7d7d7d;
    --color-gray-light: #777777;



    --radius: 14px;
    --transition: 0.3s ease;
}


/* =========================================================
 إعدادات عامة
========================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Times New Roman', Times, serif;
}

body {
    width: 100vw;
    height: 100vh;
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* =========================================================
  الهيدر
========================================================= */
header {
    background-color: var(--color-bg);
    height: 8%;
    width: 100%;
    padding: 0 20px;
    display: flex;
    justify-content:space-between;
    align-items: center;
    font-size: 0.7em;
    text-align: center;
}

.dateView {
    width: 30%;
    display: flex;
    flex-direction: row;
    color: var(--color-gray-light);
    gap: 3px;
    font-size: 0.8em;
    align-items: center;
    justify-content: flex-end;
}

#day {
    color: var(--color-text);
    font-size: 2.8em;
}

.PageName,
.fa-ellipsis-vertical {
    width: 33%;
}

.PageName {
    text-align: center;
}

.icons {
    font-size: 1.5em;
    color: var(--color-gray-light);
}

/* =========================================================
  المحتوى الرئيسي
========================================================= */
main {
    padding: 10px;
    height: 90%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

/* بطاقات الكراسي */
.info-chair-cards {
    width: 100%;
    height: 13%;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.registar-Sysytem {
    margin: 15px 10px 10px 10px;
    padding:0px 20px;
    height: 7%;
    
    width: 95%;
    background-color: var(--color-table-bg);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;

}
.regiterHistory{

height: 60%;
width: 30%;
display: flex;
justify-content: start;
align-items: center;
}
.regiterHistory img {
    height: 90%;
}

.chair-card {
    width: 47%;
    height: 100%;
    background-color: var(--color-chair-bg);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    gap: 8%;
    color: rgb(244, 244, 244);
}

/* =========================================================
  عرض الطاولات
========================================================= */
.tabel-cards-view {
    height: 78%;
    width: 100%;
    padding: 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    box-sizing: border-box;

}

.tabel-cards-view::-webkit-scrollbar {
    display: none;
}

.table-container {
    height: 23%;
    min-height: 23%;
    width: 100%;
    background-color: var(--color-table-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 10px;
}

.tabel-name {
    margin: 10px;
    color: var(--color-gray-dark);
    font-size: 1.0em;

}

.tabel-chair {
    width: 100%;
    height: 50%;

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;




    font-size: 0.9em;
}

.Reserved-Chair,
.UnReserved-Chair {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.Reserved-Chair img,
.UnReserved-Chair img {
    margin: 10px;
    width: 20%;

}


/* =========================================================
  دعم الشاشات المختلفة
========================================================= */

/* التابلت (600px إلى 992px) */
@media (min-width: 600px) and (max-width: 992px) {
    header {
        font-size: 0.8em;
        padding: 0 40px;
    }

    .dateView {
        font-size: 1em;
    }

    #day {
        font-size: 3.2em;
    }

    main {
        flex-direction: column;
        justify-content: flex-start;
        gap: 20px;
    }

    .info-chair-cards {
        padding: 0 20px;
        height: 20%;
        gap: 15px;
    }

    .chair-card {
        width: 45%;
        font-size: 1.5em;
    }

    .tabel-cards-view {
        padding: 10px 20px;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 20px;
    }

    .table-container {
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }
}

/* اللابتوب (992px فأكثر) */
@media (min-width: 992px) {
    header {
        font-size: 1.0em;
        padding: 0 60px;
    }

    #day {
        font-size: 3.5em;
    }

    main {
        height: 90%;
        width: 100%;
        flex-direction: column;
        justify-content: space-around;
        gap: 10px;
        padding: 15px 30px;
    }

    .info-chair-cards {
        width: 100%;
        flex-direction: row;
        height: 40%;
        gap: 20px;
    }

    .chair-card {
        width: 100%;
        height: 90%;
        font-size: 1.3em;
    }

    .tabel-cards-view {
        width: 100%;
        height: 85%;
        background-color: var(--color-bg);
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 10px;
    }

    .table-container {
        width: 49%;
        height: 50%;
        font-size: 1.3em;
    }

    

    .regiterHistory{
        height: 70%;
    }
    .regiterHistory img {
    height: 100%;
}
}