/* ============================================================
GLOBAL RESET
============================================================ */

/* ------------------------------------------------------------
* selector
Applies styles to ALL HTML elements.

Used for:
- removing browser default spacing
- consistent layout
------------------------------------------------------------ */
* {

    /* --------------------------------------------------------
    Removes default outer spacing.
    -------------------------------------------------------- */
    margin: 0;


    /* --------------------------------------------------------
    Removes default inner spacing.
    -------------------------------------------------------- */
    padding: 0;


    /* --------------------------------------------------------
    box-sizing: border-box

    Width and height include:
    - padding
    - border

    Makes responsive layout easier.
    -------------------------------------------------------- */
    box-sizing: border-box;


    /* --------------------------------------------------------
    Sets default font for whole application.
    -------------------------------------------------------- */
    font-family: Arial;
}



/* ============================================================
BODY STYLING
============================================================ */

body {

    /* --------------------------------------------------------
    background
    Sets page background color.

    #f4f4f4 = light gray
    -------------------------------------------------------- */
    background: #f4f4f4;
}



/* ============================================================
MAIN CONTAINER
============================================================ */

.container {

    /* --------------------------------------------------------
    width: 90%

    Container takes 90% screen width.
    Responsive layout support.
    -------------------------------------------------------- */
    width: 90%;


    /* --------------------------------------------------------
    margin: 20px auto

    20px -> top/bottom spacing

    auto -> left/right automatic center alignment
    -------------------------------------------------------- */
    margin: 20px auto;
}



/* ============================================================
CARD DESIGN
============================================================ */

.card {

    /* --------------------------------------------------------
    White background card UI.
    -------------------------------------------------------- */
    background: white;


    /* --------------------------------------------------------
    Inner spacing.
    -------------------------------------------------------- */
    padding: 20px;


    /* --------------------------------------------------------
    Bottom spacing between cards.
    -------------------------------------------------------- */
    margin-bottom: 20px;


    /* --------------------------------------------------------
    Rounded corners.
    -------------------------------------------------------- */
    border-radius: 10px;
}



/* ============================================================
INPUT FIELDS
============================================================ */

input {

    /* --------------------------------------------------------
    Full width input field.
    -------------------------------------------------------- */
    width: 100%;


    /* --------------------------------------------------------
    Inner spacing inside input.
    -------------------------------------------------------- */
    padding: 12px;


    /* --------------------------------------------------------
    Space below each input.
    -------------------------------------------------------- */
    margin-bottom: 10px;
}



/* ============================================================
BUTTON STYLING
============================================================ */

button {

    /* --------------------------------------------------------
    Button inner spacing.

    10px -> top/bottom
    20px -> left/right
    -------------------------------------------------------- */
    padding: 10px 20px;


    /* --------------------------------------------------------
    Removes default browser border.
    -------------------------------------------------------- */
    border: none;


    /* --------------------------------------------------------
    Blue background color.
    -------------------------------------------------------- */
    background: #007bff;


    /* --------------------------------------------------------
    White text color.
    -------------------------------------------------------- */
    color: white;


    /* --------------------------------------------------------
    cursor: pointer

    Changes mouse cursor to hand icon
    when hovering over button.
    -------------------------------------------------------- */
    cursor: pointer;
}



/* ============================================================
TABLE STYLING
============================================================ */

table {

    /* --------------------------------------------------------
    Full width responsive table.
    -------------------------------------------------------- */
    width: 100%;


    /* --------------------------------------------------------
    border-collapse: collapse

    Merges table borders into single border.

    Prevents double border lines.
    -------------------------------------------------------- */
    border-collapse: collapse;
}



/* ============================================================
TABLE CELL STYLING
============================================================ */

/* ------------------------------------------------------------
th = table header
td = table data cell
------------------------------------------------------------ */
th,
td {

    /* --------------------------------------------------------
    Light gray border around cells.
    -------------------------------------------------------- */
    border: 1px solid #ddd;


    /* --------------------------------------------------------
    Inner spacing inside cells.
    -------------------------------------------------------- */
    padding: 10px;
}



/* ============================================================
NAVIGATION BAR
============================================================ */

nav {

    /* --------------------------------------------------------
    display: flex

    Enables Flexbox layout.
    -------------------------------------------------------- */
    display: flex;


    /* --------------------------------------------------------
    justify-content: space-between

    Pushes items to opposite sides.

    Example:
    Welcome text -> left
    Logout button -> right
    -------------------------------------------------------- */
    justify-content: space-between;


    /* --------------------------------------------------------
    Dark background.
    -------------------------------------------------------- */
    background: #222;


    /* --------------------------------------------------------
    White text.
    -------------------------------------------------------- */
    color: white;


    /* --------------------------------------------------------
    Inner spacing.
    -------------------------------------------------------- */
    padding: 20px;
}



/* ============================================================
RESPONSIVE DESIGN
============================================================ */

/* ------------------------------------------------------------
@media query

Applies CSS only on small screens.

max-width:768px
Means:
Screen width <= 768px

Typically:
Tablet/Mobile devices.
------------------------------------------------------------ */
@media(max-width:768px) {


    /* ========================================================
    MOBILE TABLE FIX
    ======================================================== */

    table {

        /* ----------------------------------------------------
        display:block

        Makes table scrollable on mobile.
        ---------------------------------------------------- */
        display:block;


        /* ----------------------------------------------------
        overflow-x:auto

        Adds horizontal scrolling if table too wide.
        Prevents layout breaking on mobile.
        ---------------------------------------------------- */
        overflow-x:auto;
    }
}