/* ══════════════════════════════════════════════════════════════════════════
   OHI.CSS  —  Obour High Institute Student Management System
   Author : Eng. Eslam Reda
   ══════════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables ─────────────────────────────────────────────────────── */
:root {
    --background-color : #f5f5f5;
    --text-color        : #111111;
    --nav-bg            : rgba(20, 20, 40, 0.88);
    --accent-red        : #c0392b;
    --aside-width       : 480px;
}

/* ── Custom Fonts ───────────────────────────────────────────────────────── */
@font-face { font-family: 'RubikLines-Regular';  src: url(fonts/RubikLines-Regular.ttf); }
@font-face { font-family: 'BeauRivage';           src: url(fonts/BeauRivage-Regular.ttf); }
@font-face { font-family: 'RubikDoodleShadow';    src: url(fonts/RubikDoodleShadow.ttf); }
@font-face { font-family: 'LibreBaskerville';     src: url(fonts/LibreBaskerville-Italic.ttf); }

/* ── Reset & Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family     : "Libre Franklin", sans-serif;
    margin          : 0;
    overflow-x      : hidden;
    width           : 100%;
    background-color: var(--background-color);
    color           : var(--text-color);
    transition      : background-color 0.5s ease;
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER  (Point 7 — professional logo + title, fully responsive)
   ══════════════════════════════════════════════════════════════════════════ */
header {
    background-image     : url("images/BG_header.JPEG");
    background-repeat    : no-repeat;
    background-attachment: scroll;
    background-size      : cover;
    background-position  : center top;
    padding              : 20px 30px 70px;   /* bottom clears the fixed nav */
    min-height           : 700px;
}

.header-inner {
    display    : flex;
    align-items: center;
    gap        : 18px;
    flex-wrap  : wrap;
}

.header-logo {
    width        : 90px;
    height       : auto;
    border-radius: 6px;
    flex-shrink  : 0;
    box-shadow   : 0 2px 8px rgba(0,0,0,0.35);
}

.header-title {
    color      : darkslateblue;
    font-family: "Beau Rivage", cursive;
    font-size  : clamp(22px, 4vw, 60px);
    text-shadow: 2px 2px 8px rgba(255,255,255,0.7);
    margin     : 0;
    line-height: 1.2;
    text-align : center;
    flex       : 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   NAV BAR
   ══════════════════════════════════════════════════════════════════════════ */
nav {
    position   : fixed;
    font-family: RubikLines-Regular, courier;
    font-size  : x-large;
    bottom     : 55px;
    z-index    : 100;
}

nav .Sup {
    background-color: red;
    position        : absolute;
    left            : 638px;
    font-family     : "Libre Franklin", sans-serif;
    text-decoration : underline;
    bottom          : -50px;
}

.description-DR {
    position        : relative;
    background-color: gray;
    bottom          : -103px;
    left            : 770px;
    cursor          : alias;
    width           : fit-content;
    height          : fit-content;
}

.description-text-DR {
    visibility   : hidden;
    width        : 800px;
    background-color: #333;
    color        : #fff;
    text-align   : center;
    border-radius: 6px;
    padding      : 10px;
    position     : absolute;
    z-index      : 200;
    bottom       : 125%;
    left         : 50%;
    margin-left  : -200px;
    margin-bottom: 15px;
    opacity      : 0;
    transition   : opacity 0.4s;
}

.description-DR:hover .description-text-DR { visibility: visible; opacity: 1; }

.E {
    color      : white;
    position   : absolute;
    font-size  : 30px;
    font-style : italic;
    font-weight: bold;
    left       : 910px;
    bottom     : -62px;
    font-family: BeauRivage, courier;
    text-shadow: -20px 18px 8px red;
}

nav .Web {
    background-color: red;
    position        : absolute;
    bottom          : -48px;
    left            : 1088px;
    font-family     : "Libre Franklin", sans-serif;
    text-decoration : underline;
}

.by {
    background-color: red;
    position        : absolute;
    left            : 1185px;
    font-family     : "Libre Franklin", sans-serif;
    text-decoration : underline;
    bottom          : -48px;
}

.description-Eng {
    position        : relative;
    background-color: gray;
    bottom          : -48px;
    left            : 1224px;
    cursor          : alias;
}

.description-text-Eng {
    visibility   : hidden;
    width        : 280px;
    background-color: #333;
    color        : #fff;
    text-align   : center;
    border-radius: 6px;
    padding      : 5px;
    position     : absolute;
    z-index      : 200;
    bottom       : 125%;
    left         : 50%;
    margin-left  : -150px;
    margin-bottom: 15px;
    opacity      : 0;
    transition   : opacity 0.4s;
}

.description-Eng:hover .description-text-Eng { visibility: visible; opacity: 1; }

.r {
    background-color: gray;
    position        : absolute;
    bottom          : -48px;
    left            : 1360px;
}

.FACEico {
    position: fixed;
    width   : 67px;
    height  : 72px;
    bottom  : 5px;
    left    : 1430px;
}

.OHIico {
    position: fixed;
    width   : 90px;
    height  : 80px;
    bottom  : 5px;
    left    : 540px;
}

/* ══════════════════════════════════════════════════════════════════════════
   MAIN CONTENT AREA  —  Flexbox side-by-side layout (Points 6 & 8)
   aside is fixed-width; main fills remaining space and never extends below aside
   ══════════════════════════════════════════════════════════════════════════ */
.A_M {
    display         : flex;
    align-items     : flex-start;       /* aside and main start at same top  */
    background-image: url("images/BG_Main.jpg");
    background-repeat   : no-repeat;
    background-attachment: scroll;
    background-size : cover;
    background-position: center;
    width           : 100%;
    padding         : 10px 10px 15px 10px;
    font-size       : 25px;
    color           : white;
    border          : solid black;
}

.A_M > form {
    display    : flex;
    align-items: flex-start;
    width      : 100%;
    flex-wrap  : wrap;
    gap        : 10px;
}

/* ── ASIDE (Form Panel) ───────────────────────────────────────────────── */
aside {
    flex           : 0 0 var(--aside-width);
    width          : var(--aside-width);
    text-align     : center;
    border         : 2px solid gray;
    padding        : 10px;
    font-size      : 20px;
    color          : white;
    background-image: url("images/BG_Form.jpg");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    background-position: center;
}

h3 {
    color      : darkmagenta;
    text-align : center;
    font-weight: bold;
    font-family: RubikDoodleShadow, courier;
    text-shadow: 20px 20px 16px red;
    position   : relative;
    bottom     : 15px;
    margin     : 10 10 10px;
}

.LogoSide {
    position : relative;
    width    : 334px;
    height   : 332px;
    bottom   : 20px;
    max-width: 100%;
}

/* ── Form Labels ────────────────────────────────────────────────────────── */
label {
    font-weight   : bold;
    text-shadow   : 20px 20px 16px red;
    font-family   : "LibreBaskerville", sans-serif;
    display       : inline-block;
    min-width     : 148px;
    text-align    : right;
    margin-right  : 8px;
    vertical-align: middle;
}

/* ── ID Field + Generate Button (Point 5) ───────────────────────────────── */
.id-field-group {
    display    : inline-flex;
    align-items: center;
    gap        : 6px;
    vertical-align: middle;
}

.id-field-group input[type="number"] {
    width: 181px;
}

.GRN_ID {
    padding         : 5px 10px;
    border          : 1.9px solid crimson;
    font-size       : 17px;
    font-weight     : bold;
    background-color: darkgrey;
    color           : black;
    cursor          : pointer;
    height          : 34px;
    line-height     : 1;
    white-space     : nowrap;
    transition      : background-color 0.2s ease;
}

.GRN_ID:hover { background-color: #999; }

/* ── Form Inputs ─────────────────────────────────────────────────────────── */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"] {
    padding         : 5px;
    border          : 1.9px solid white;
    font-size       : 17px;
    background-color: darkgrey;
    color           : black;
    font-weight     : bold;
    width           : 220px;
    vertical-align  : middle;
}

.inputSpecialization {
    height          : 34px;
    width           : 220px;
    padding         : 5px;
    border          : 1.9px solid white;
    font-size       : 17px;
    background-color: darkgrey;
    color           : black;
    font-weight     : bold;
    vertical-align  : middle;
}

/* ── Gender Row ─────────────────────────────────────────────────────────── */
.gender-field-group {
    display        : flex;
    justify-content: center;
    align-items    : center;
    margin-bottom  : 14px;
}

.gender-row {
    display       : inline-flex;
    gap           : 0px;
    margin        : 8px 0 14px;
    vertical-align: middle;
    width         : 220px;
}

.gender-option {
    display    : flex;
    align-items: center;
    gap        : 6px;
    font-family: RubikDoodleShadow, courier;
    font-weight: bold;
    cursor     : pointer;
    text-shadow: none;
}

.gender-option input[type="radio"] {
    width : auto;
    height: auto;
    cursor: pointer;
    border: none;
}

/* ── Buttons (Point 6) ───────────────────────────────────────────────────── */
button {
    padding         : 5px 12px;
    border          : 1.9px solid white;
    font-size       : 17px;
    font-weight     : bold;
    background-color: darkgray;
    color           : black;
    cursor          : pointer;
    transition      : background-color 0.2s ease;
}

button:hover { background-color: #999; }

/* Button row — flex, centered, wraps cleanly, never overflows aside */
.btn-row {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: center;
    gap            : 6px;
    margin-top     : 14px;
    width          : 100%;
}

.btn-row button {
    flex      : 1 1 auto;
    min-width : 80px;
    max-width : 130px;
    text-align: center;
}

/* ── Error Box ───────────────────────────────────────────────────────────── */
.error-box {
    background-color: #c0392b;
    color           : white;
    padding         : 10px 14px;
    margin          : 0 0 10px;
    border-radius   : 4px;
    width           : 100%;
}

.error-box ul { margin: 5px 0 0 20px; }

/* ══════════════════════════════════════════════════════════════════════════
   MAIN TABLE  (Point 8 — fills flex space, stops at aside height)
   ══════════════════════════════════════════════════════════════════════════ */
main {
    flex      : 1 1 0;
    min-width : 0;
    border    : 10px solid gray;
    border-top: 10px solid maroon;
    border-style: ridge;
    padding   : 3px;
    overflow-x: auto;
    align-self: stretch;  /* matches aside height exactly */
}

.tbl {
    font-size  : 20px;
    text-align : center;
    margin     : 3px;
    min-width  : 600px;
    width      : 100%;
    border-collapse: collapse;
}

.tbl th {
    color    : red;
    font-size: 20px;
    padding  : 6px 4px;
    min-width: 70px;
}

.tbl td {
    height    : 46px;
    padding   : 4px;
    word-break: break-word;
}

/* ── Delete Column (Point 4) ─────────────────────────────────────────────── */
.td-delete {
    text-align: center;
    padding   : 2px;
    min-width : 56px;
}

.form-row-delete {
    margin : 0;
    padding: 0;
    display: inline-block;
}

.btn-delete-row {
    background-color: transparent;
    border          : none;
    font-size       : 20px;
    cursor          : pointer;
    padding         : 2px 6px;
    color           : #c0392b;
    transition      : transform 0.15s ease, color 0.15s ease;
}

.btn-delete-row:hover {
    transform       : scale(1.3);
    color           : #e74c3c;
    background-color: transparent;
}

/* ── Row Highlight ───────────────────────────────────────────────────────── */
.student-row:hover  { background-color: rgba(255, 224, 130, 0.3); cursor: pointer; }
.student-row.selected { background-color: #ffe082; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE MEDIA QUERIES
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet  ≤ 1024px ───────────────────────────────────────────────────── */
@media only screen and (max-width: 1024px) {
    .E, .r, nav .Web, .by { display: none; }
    .header-title          { font-size: clamp(18px, 3.5vw, 40px); }
    .description-text-DR   { width: 360px; }
    :root { --aside-width: 420px; }
}

/* ── Mobile  ≤ 768px ────────────────────────────────────────────────────── */
@media only screen and (max-width: 768px) {

    /* Stack aside and main vertically */
    .A_M > form {
        flex-direction: column;
    }

    aside {
        flex     : none;
        width    : 100%;
        max-width: 100%;
    }

    main {
        flex     : none;
        width    : 100%;
        max-width: 100%;
    }

    /* Full-width inputs */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="date"],
    .inputSpecialization {
        width  : 100%;
        display: block;
        margin : 4px auto;
    }

    .id-field-group {
        display        : flex;
        width          : 100%;
        justify-content: center;
    }

    .id-field-group input[type="number"] { width: calc(100% - 56px); }

    label {
        display   : block;
        text-align: center;
        min-width : unset;
        margin-right: 0;
        margin-bottom: 2px;
    }

    .LogoSide { display: none; }

    /* Tooltip repositioning */
    .description-text-DR  { width: 240px; left: 0; }
    .description-text-Eng { width: 200px; left: 0; }

    /* Header compact */
    header          { padding-bottom: 50px; min-height: 320px; }
    .header-logo    { width: 60px; }

    /* Table */
    .tbl       { font-size: 14px; }
    .tbl th    { min-width: auto; font-size: 13px; }
    .tbl td    { height: auto; min-height: 32px; font-size: 13px; }

    /* Hide tooltips and nav extras on mobile */
    .description-DR, .description-Eng, nav .Sup, .OHIico { display: none; }

        /* Footer full width on mobile */
        .f1 {
        width     : 100%;
        box-sizing: border-box;
        }
}

/* ── Small Phone  ≤ 480px ────────────────────────────────────────────────── */
@media only screen and (max-width: 480px) {

    header { padding-top: 10px; }

    .header-inner { gap: 10px; }
    .header-logo  { width: 48px; }
    .header-title { font-size: clamp(14px, 5vw, 24px); }

    .btn-row {
        flex-direction: column;
        align-items   : center;
    }

    .btn-row button {
        width    : 85%;
        max-width: none;
        font-size: 15px;
    }

    h3 { font-size: 18px; }
}
/* <!-- ── FOOTER ────────────────────────────────────────── --> */
footer
{
    background-color:black;
    width: 100%;
}

.f1
{
    border:5px solid gray;
    width: 34%;
    text-align: center;
    box-sizing: border-box;
}

.links {
display: flex;
justify-content: center;
align-items: center;
}

.links a {
    margin: 5px;
}

.links img {
    width: 25px;
    height:auto;
}