@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

:root {
    --totem-yellow: #FFD100;
    --totem-dark: #1a1a1a;
    --totem-darker: #000000;
    --totem-light: #f5f5f5;
    --totem-grey: #444;
    --text-color: var(--totem-light);
    --success-color: #28a745;
    --danger-color: #dc3545;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--totem-dark);
    color: var(--text-color);
    line-height: 1.6;
}
.container { max-width: 1100px; margin: 2rem auto; padding: 0 2rem; }
nav { background-color: var(--totem-darker); padding: 1rem 2rem; box-shadow: 0 2px 5px rgba(0,0,0,0.3); position: sticky; top: 0; z-index: 1000; }
.nav-container { display: flex; justify-content: space-between; align-items: center; max-width: 1100px; margin: 0 auto; }
.brand img { height: 35px; }
.nav-links { display: flex; align-items: center; gap: 1.5rem; }
.nav-links a { text-decoration: none; color: var(--totem-light); font-weight: 600; transition: color 0.3s ease; }
.nav-links a:hover { color: var(--totem-yellow); }
.btn { padding: 0.7rem 1.5rem; border: none; border-radius: 5px; cursor: pointer; font-weight: 700; text-decoration: none; display: inline-block; text-transform: uppercase; font-size: 0.9rem; transition: transform 0.2s ease, box-shadow 0.2s ease; text-align: center;}
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.btn-primary { background-color: var(--totem-yellow); color: var(--totem-darker); }
.btn-secondary { background-color: var(--totem-grey); color: var(--totem-light); }
.btn-danger { background-color: var(--danger-color); color: #fff; }
.btn-link {
    background: none;
    border: none;
    color: var(--totem-yellow);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 400;
    text-transform: none;
}
.btn-link:hover {
    color: var(--totem-light);
    transform: none;
    box-shadow: none;
}
h2 { color: var(--totem-yellow); margin-bottom: 1.5rem; border-bottom: 2px solid var(--totem-grey); padding-bottom: 0.5rem; }
.card { background: #2b2b2b; border-radius: 8px; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 4px 10px rgba(0,0,0,0.4); }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #ccc; }
.form-group input, .form-group select { width: 100%; padding: 0.8rem; border: 1px solid var(--totem-grey); border-radius: 5px; background-color: var(--totem-dark); color: var(--text-color); font-size: 1rem; }
.alert { padding: 1rem; margin-bottom: 1.5rem; border-radius: 5px; border: 1px solid transparent; }
.alert-success { background-color: #1a4325; color: #a3e9b8; border-color: var(--success-color); }
.alert-danger { background-color: #4f1d22; color: #f8d7da; border-color: var(--danger-color); }
.alert-info { background-color: #1c3d4f; color: #d1ecf1; border-color: #6cb2eb; }
.alert-warning { background-color: #5c4815; color: #fff3cd; border-color: var(--totem-yellow); }
.login-body { background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)), url('../img/background.jpg') no-repeat center center/cover; height: 100vh; display: flex; justify-content: center; align-items: center; }
.login-container { background-color: rgba(0, 0, 0, 0.8); padding: 3rem; border-radius: 10px; width: 100%; max-width: 450px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); border: 1px solid var(--totem-grey); }
.login-container h2 { text-align: center; }
table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
th, td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--totem-grey); }
th { background-color: #333; color: var(--totem-yellow); text-transform: uppercase; font-size: 0.9rem; }
tbody tr:hover { background-color: #3a3a3a; }
.status-available { color: var(--success-color); font-weight: bold; }
.status-reserved { color: var(--danger-color); font-weight: bold; }
input[type="date"] {
    color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    background: none;
    display: block;
    width: 20px;
    height: 20px;
    border: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-calendar-event' viewBox='0 0 16 16'><path d='M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z'/><path d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}