/* ===============================
   GLOBAL PAGE STYLES
   Applies to the entire site
   =============================== */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}
/* Base font and page background */
body {
    font-family: Arial, sans-serif;
    background-image: url('/images/background.png'); /* <-- your image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


/* ===============================
   MAIN CONTAINER STYLES
   Used by login, request, user, admin pages
   =============================== */

/*
 These containers center content on the page
 and give it a "card" look.
*/
.login-container,
.request-container,
.user-container {
    width: 300px;                        /* Default fixed width */
    padding: 20px;                      /* Inner spacing */
    margin: 1px auto;                 /* Center horizontally + space from top */
    /*background-color: #fff; */            /* White background */
    background-color: transparent
	border-radius: 5px;                 /* Rounded corners */
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/ /* Soft shadow */
	box-shadow: none;
}
.admin-container {
    width: 100%;                        /* Default fixed width */
    padding: 20px;                      /* Inner spacing */
    margin: 1px auto;                 /* Center horizontally + space from top */
    /*background-color: #fff; */            /* White background */
    background-color: transparent
	border-radius: 5px;                 /* Rounded corners */
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/ /* Soft shadow */
	box-shadow: none;
}
/* ===============================
   HEADINGS
   =============================== */

/* Main page titles */
h2 {
    text-align: center;                 /* Centered heading */
    color: #FFD700;                        /* Dark gray text */
}

/* Section headers */
h3 {
	text-align: center;
	font-family: Gabriola, cursive;
    font-size: 36px;
    font-weight: bold;	
    color: #FFD700;                        /* Dark gray */
    margin-top: 20px;                  /* Space above sections */
}

/* ===============================
   FORM LABELS
   =============================== */

/* Labels above inputs */
label {
    display: block;                     /* Forces label onto its own line */
    margin-bottom: 5px;                /* Space below label */
    color: #666;                        /* Medium gray text */
}

/* ===============================
   TEXT INPUTS
   =============================== */

/*
 Applies to:
 - username fields
 - password fields
 - email fields
*/
input[type="text"],
input[type="password"],
input[type="email"] {
    width: 100%;                        /* Full width of container */
    padding: 8px;                      /* Inner spacing */
    box-sizing: border-box;            /* Includes padding in width calculation */
    border: 1px solid #ccc;            /* Light gray border */
    border-radius: 4px;                /* Rounded corners */
    margin-bottom: 10px;               /* Space below input */
}

/* ===============================
   SELECT DROPDOWNS
   =============================== */

/* Used for role selection, visibility settings, etc. */
select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
}

/* ===============================
   BUTTONS
   =============================== */

/*
 Default button style
 Used throughout site (submit, approve, deny, etc.)
*/

button {
    width: 100%;
    height: 90px;

    background: transparent;
	font-family: Gabriola, cursive;
    color: #FFD700;
    font-size: 24px;
    font-weight: bold;

    border-style: solid;
    border-width: 24px 48px; /* top/bottom | left/right */

    /* 🔑 MAGIC */
    border-image-source: url('/images/button-frame.png');
    border-image-slice: 24 48 fill;
    border-image-repeat: stretch;

    cursor: pointer;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
	
}

/* Button hover effect */
button:hover {
    filter: brightness(2.0);
}

/* ===============================
   LINKS
   =============================== */

/* Standard links */
a {
    color: #007bff;                    /* Blue link color */
    text-decoration: none;             /* Removes underline */
}

/* Hover effect for links */
a:hover {
    text-decoration: underline;        /* Underline on hover */
}

/* ===============================
   PARAGRAPH TEXT
   =============================== */

/* General paragraph styling */
p {
    color: #666;                       /* Medium gray text */
}

/* ===============================
   REQUEST / CARD UI
   =============================== */

/*
 Used for:
 - Account request cards
 - Custom button cards
*/
.request-card {
    border: none;/*1px solid #FFD700;*/            /* Light border */
    padding: 1px;
    margin-bottom: 1px;               /* Space between cards */
    border-radius: 5px;
    background-color: transparent;/*#f9f9f9;*/         /* Slight gray background */
}
        .admin-grid {
			width: 100%;
            max-width: 95%;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 30px;
            margin-top: 30px;
        }

        @media (max-width: 900px) {
            .admin-grid {
                grid-template-columns: 1fr;
            }
        }

        .panel {
            border: 1px solid #ddd;
            padding: 2px;
            border-radius: 5px;
            background-color: f9f9f9;
        }

        /* USER PAGE GRID ONLY */
        .user-grid {
            width: 100%;
            max-width: 95%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }

        @media (max-width: 900px) {
            .user-grid {
                grid-template-columns: 1fr;
            }
        }

        .panel {
            border: none;/*1px solid #ddd;*/
            padding: 2px;
            border-radius: 5px;
            background-color: transparent;/*#f9f9f9;*/
			
        }