/* Design copied from the EMS "Receipts" app (Receipts.Master inline style),
   adapted to DemoAppCore's element IDs (#upperPanel / #menu / #inner).
   All sizes use relative units (rem); root font-size 0.75rem = 12px base. */

@font-face {
    font-family: 'VarelaRound';
    src: url('VarelaRound-Regular.ttf');
}

html { font-size: 0.75rem; }

html, body {
    margin: 0;
    padding: 0;
    font-family: 'VarelaRound';
    direction: rtl;
    background-color: #efefef;
}

/* ---- top header bar ---- */
#upperPanel {
    height: 5rem;
    background-color: white;
    padding: 1rem 3rem;
    line-height: 5rem;
    font-size: 2rem;
    -webkit-box-shadow: 0 0.25rem 0.4rem 0 rgba(0,0,0,0.47);
    -moz-box-shadow: 0 0.25rem 0.4rem 0 rgba(0,0,0,0.47);
    box-shadow: 0 0.25rem 0.4rem 0 rgba(0,0,0,0.47);
}

#leftPart {
    float: left;
    display: inline-block;
    height: 5rem;
}

#leftPart > img {
    vertical-align: middle;
    height: 5rem;
}

/* ---- two-column body: kill inline-block whitespace gap ---- */
#content { font-size: 0; }
#layout { font-size: 0; }

/* ---- hamburger (mobile only; hidden on desktop) ---- */
#menuToggle {
    display: none;
    float: right;
    font-size: 2.6rem;
    line-height: 5rem;
    margin-left: 1.5rem;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* ---- side menu ---- */
#menu {
    display: inline-block;
    width: 13rem;
    color: white;
    background-color: #001b46;
    font-size: 1rem;
    height: calc(100vh - 7rem);
    vertical-align: top;
}

#menu .buttons { display: block; }

#menu .buttons input[type=button] {
    display: block;
    color: white;
    background-color: transparent;
    font-size: 1.5rem;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
    padding: 2rem 0;
    padding-right: 3.5rem;
    text-align: right;
    border: none;
    border-bottom: 0.08rem solid #005a9e;
    cursor: pointer;
}

#menu .buttons input[type=button]:hover {
    background-color: #33486b;
}

/* ---- menu item icons (right of the text) ---- */
#menu input#Cars,
#menu input#Students {
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 1.6rem 1.6rem;
}

#menu input#Cars {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23ffffff'%3E%3Cpath%20d='M18.92%206.01C18.72%205.42%2018.16%205%2017.5%205h-11c-.66%200-1.21.42-1.42%201.01L3%2012v8c0%20.55.45%201%201%201h1c.55%200%201-.45%201-1v-1h12v1c0%20.55.45%201%201%201h1c.55%200%201-.45%201-1v-8l-2.08-5.99zM6.5%2016c-.83%200-1.5-.67-1.5-1.5S5.67%2013%206.5%2013s1.5.67%201.5%201.5S7.33%2016%206.5%2016zm11%200c-.83%200-1.5-.67-1.5-1.5s.67-1.5%201.5-1.5%201.5.67%201.5%201.5-.67%201.5-1.5%201.5zM5%2011l1.5-4.5h11L19%2011H5z'/%3E%3C/svg%3E");
}

#menu input#Students {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23ffffff'%3E%3Cpath%20d='M12%203L1%209l11%206%209-4.91V17h2V9L12%203zm0%2013L4.07%2011.7%2012%207.38l7.93%204.32L12%2016zm0%202.28L5%2014.45v3.32L12%2021.5l7-3.73v-3.32L12%2018.28z'/%3E%3C/svg%3E");
}

/* ---- main panel ---- */
#inner {
    display: inline-block;
    width: calc(100% - 13rem);
    font-size: 1rem;
    height: calc(100vh - 7rem);
    vertical-align: top;
    overflow-y: auto;
}

h1 {
    color: #465c74;
    width: 96%;
    margin: 1rem auto;
}

/* ---- TableMaker ---- */
.table {
    background-color: #465c74;
    width: 96%;
    margin: auto;
    color: white;
    padding-top: 2rem;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

#toolbar {
    position: absolute;
    top: 6.6rem;
    background-color: white;
    box-shadow: 0 0.25rem 0.75rem 0 rgba(0, 0, 0, .5);
    color: #0097f1;
    font-size: 1.2rem;
    font-weight: bold;
}

#toolbar > div {
    padding: 0.6rem 1.2rem;
    cursor: pointer;
}

#toolbar > div:hover { background-color: #a0a0a0; }

.table > label {
    margin-right: 1rem;
    height: 2rem;
    font-size: 2rem;
}

.table > svg {
    vertical-align: top;
    filter: invert(1);
    margin-right: 1rem;
}

.table > label > select {
    height: 2rem;
    border: none;
    font-size: 1.5rem;
    margin-right: 0.5rem;
}

.table > img {
    height: 3rem;
    float: left;
    margin-left: 1rem;
    cursor: pointer;
}

table {
    background-color: #ffffff;
    border: none;
    width: 100%;
    margin-top: 2rem;
    color: black;
    cursor: default;
    max-height: 70vh;
    overflow-y: auto;
}

th {
    color: #0097f1;
    border-bottom: 0.08rem solid #dfe5e9;
    font-weight: bold;
}

td, th {
    text-align: right;
    border-bottom: 0.08rem solid #dfe5e9;
    padding: 1rem;
}

/* extra right padding so header text clears the sort-arrow background image */
th { padding-right: 2.5rem; }

.addButton {
    font-size: 2rem;
    font-weight: bold;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 2.5rem;
    text-align: center;
    border: none;
    margin-right: 1rem;
}

/* ---- popups / forms ---- */
.overlay {
    position: absolute;
    left: 0; top: 0;
    background-color: black;
    opacity: 0.3;
    width: 100vw;
    height: 100vh;
}

#formDiv, .popupPanel {
    position: absolute;
    left: 18%;
    top: 5%;
    width: 60%;
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border: 0.08rem solid #e3e9ed;
    padding: 1%;
}

.popupPanel {
    left: calc(50% - 20rem);
    top: 20%;
    width: 40rem;
    font-size: 3rem;
    text-align: center;
}

.popupPanel > input { display: none; }

#popUpQuestion input { display: inline-block; }

.ImageField > img {
    max-width: 100%;
    max-height: 12rem;
    width: auto;
    height: auto;
}

.ImageField {
    display: inline-block;
    width: 45%;
    vertical-align: top;
    margin-left: 1%;
}

#formDiv > label[for='d_data'] { display: block; }
#formDiv > label[for='t_Text'] { display: none; }

#t_Text {
    display: inline-block;
    width: 33rem;
    height: 42rem;
    vertical-align: top;
}

#formDiv > label, #formDiv label + input {
    display: inline-block;
    height: 2rem;
    width: 40%;
    border: none;
}

#formDiv label + input { border-bottom: 0.17rem solid #dae0e4; }

#formDiv > input[type=button], #popUpQuestion input[type=button] {
    background-color: #0097f0;
    color: white;
    padding: 1rem;
    border: none;
    cursor: pointer;
    margin: 0.2rem;
    border-radius: 0.3rem;
}

.pager {
    font-size: 1.5rem;
    display: block;
    margin: 0.6rem auto;
    text-align: center;
}

.pager > span { cursor: pointer; }

.pager > span > input {
    width: 4rem;
    text-align: center;
}

/* ============ responsive — phones / narrow screens (<=900px) ============ */
@media (max-width: 56.25rem) {
    #menuToggle { display: block; }

    #upperPanel { padding: 1rem 1.2rem; font-size: 1.6rem; }
    #leftPart { font-size: 0; }            /* hide company text, keep the logo */

    /* side menu becomes a slide-in drawer from the right */
    #menu {
        position: fixed;
        top: 7rem;
        right: -70vw;
        width: 70vw;
        height: calc(100vh - 7rem);
        transition: right 0.35s ease;
        z-index: 20;
        box-shadow: -0.25rem 0 0.6rem rgba(0, 0, 0, 0.4);
    }
    body.menu-open #menu { right: 0; }

    #inner { width: 100%; }

    /* tables become stacked cards */
    .table { width: auto; margin: 1rem 0.5rem; }
    .table table { margin-top: 0; }
    .table table, .table tbody, .table tr, .table td {
        display: block;
        width: auto;
    }
    .table thead { display: none; }

    .table tr {
        background-color: white;
        color: black;
        margin-bottom: 0.8rem;
        padding: 0.4rem 0;
    }

    .table td {
        text-align: right;
        padding: 0.35rem 1rem;
        border: none;
    }

    .table td:before {
        font-weight: bold;
        color: #465c74;
    }

    /* per-table column labels — DOM order from /api/tablemaker/GetTable */
    #CarsTable td:nth-of-type(1):before { content: "ID: "; }
    #CarsTable td:nth-of-type(2):before { content: "Description: "; }
    #CarsTable td:nth-of-type(3):before { content: "IsAutomatic: "; }
    #CarsTable td:nth-of-type(4):before { content: "Volume: "; }
    #CarsTable td:nth-of-type(5):before { content: "Color: "; }
    #CarsTable td:nth-of-type(6):before { content: "ProductionDate: "; }

    #StudentsTable td:nth-of-type(1):before  { content: "ID: "; }
    #StudentsTable td:nth-of-type(2):before  { content: "תיאור: "; }
    #StudentsTable td:nth-of-type(3):before  { content: "שם פרטי: "; }
    #StudentsTable td:nth-of-type(4):before  { content: "שם משפחה: "; }
    #StudentsTable td:nth-of-type(5):before  { content: "תעודת זהות: "; }
    #StudentsTable td:nth-of-type(6):before  { content: "תאריך לידה: "; }
    #StudentsTable td:nth-of-type(7):before  { content: 'דוא"ל: '; }
    #StudentsTable td:nth-of-type(8):before  { content: "טלפון: "; }
    #StudentsTable td:nth-of-type(9):before  { content: "כתובת: "; }
    #StudentsTable td:nth-of-type(10):before { content: "שכבה: "; }
    #StudentsTable td:nth-of-type(11):before { content: "כיתה: "; }
    #StudentsTable td:nth-of-type(12):before { content: "ממוצע: "; }
    #StudentsTable td:nth-of-type(13):before { content: "תאריך רישום: "; }
    #StudentsTable td:nth-of-type(14):before { content: "פעיל: "; }
}