:root {
 --hoogte:920px; /*920*/
}
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

h2 {
 margin-bottom:6px;
}
a {font-size:16px;}

body {
 font-family: sans-serif;
 background: #fff;
 color: #000;
 height: 100vh;
 overflow: hidden;
 display: flex;
 flex-direction: column;
}

.header {
 background: #0E0D06;
 color: #EABD23;
 display: flex;
 align-items: center;
 padding: 8px 16px;
 flex-shrink: 0;
 gap: 16px;
}

.header-brand {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 2px;
}

.header img {
 max-height: 22px;
 width: auto;
}

.header h1 {
 font-size: 12px;
}

.header-nav {
 display: flex;
 gap: 16px;
 margin-left: 32px;
}

.header-nav a {
 color: #F1E5BE;
 text-decoration: none;
 font-size: 16px;
}

.header-nav a:hover {
 text-decoration: underline;
}

.toolbar {
 height: 60px;
 background: #e0e0e0;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0 16px;
 flex-shrink: 0;
 position: relative;
}

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

.toolbar-btn {
 display: flex;
 align-items: center;
 gap: 6px;
 padding: 8px 18px;
 background: #EABD23;
 color: #0E0D06;
 border: none;
 border-radius: 6px;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;
 white-space: nowrap;
 position: absolute;
 right: 16px;
}

.toolbar-btn:hover {
 background: #d5a81e;
}

.toolbar-datum {
 padding: 10px 12px;
 font-size: 16px;
 border: 1px solid #999;
 border-left: none;
 border-right: none;
 outline: none;
 text-align:center;
}

.toolbar-arrow {
 font-size: 18px;
 cursor: pointer;
 padding: 4px 10px 8px 10px;
 user-select: none;
 border: 1px solid #999;
 background: #fff;
}

.toolbar-arrow:first-of-type {
 border-top-left-radius: 12px;
 border-bottom-left-radius: 12px;
 border-right: none;
}

.toolbar-arrow:last-of-type {
 border-top-right-radius: 12px;
 border-bottom-right-radius: 12px;
 border-left: none;
}

.toolbar-arrow:hover {
 opacity: 0.6;
}

.content {
 flex: 1;
 padding: 0;
 overflow: hidden;
}

.agenda-container {
 display: flex;
 flex-direction: column;
 height: 100%;
}

.agenda-header {
 display: flex;
 border-bottom: 1px solid #ccc;
 background: #f5f5f5;
 flex-shrink: 0;
  overflow-y: scroll;
}

.header-cell {
 text-align: center;
 padding: 6px 4px;
 font-weight: bold;
 font-size: 13px;
 border-right: 1px solid #ccc;
}

.week-cell {
 min-width: 50px;
 flex-shrink: 0;
}

.day-cell {
 flex: 1;
}

.agenda-body {
 display: flex;
 flex: 1;
 overflow-y: scroll; 
}

.time-labels {
 flex-shrink: 0;
 min-width: 50px;
 position: relative;
 border-right: 1px solid #ccc;
 min-height: var(--hoogte);
 overflow: hidden;
}

.time-label {
 position: absolute;
 top: 10%;
 width: 100%;
 text-align: right;
 padding-right: 8px;
 font-size: 11px;
 color: #666;
 font-weight: bold;
}

@media (max-width: 768px) {
 .user-name {
  display: none;
 }
}

.day-columns {
 display: flex;
 flex: 1;
 min-height: var(--hoogte);
 overflow: hidden;
}

.day-column {
 flex: 1;
 position: relative;
 border-right: 1px solid #ccc;
 min-height:var(--hoogte);
 overflow: hidden;
}

.hour-line {
 position: absolute;
 left: 0;
 right: 0;
 height: 1px;
 background: #eee;
 pointer-events: none;
}

.training-block {
 position: absolute;
 background: #EABD23;
 color: #0E0D06;
 padding: 4px 6px;
 border-radius: 4px;
 font-size: 12px;
 overflow: hidden;
 z-index: 1;
 line-height: 1.3;
 cursor:pointer;
}

.material-symbols-outlined {
 font-family: 'Material Symbols Outlined';
 font-weight: normal;
 font-style: normal;
 font-size: 14px;
 line-height: 1;
 letter-spacing: normal;
 text-transform: none;
 display: inline-block;
 white-space: nowrap;
 word-wrap: normal;
 direction: ltr;
 -webkit-font-smoothing: antialiased;
}

/* Login */
.login-body {
 background: #0E0D06;
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;
}

.login-container {
 background: #fff;
 border-radius: 12px;
 padding: 32px;
 width: 360px;
 text-align: center;
}

.login-brand {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin-bottom: 24px;
}

.login-brand img {
 max-height: 32px;
}

.login-brand h1 {
 font-size: 18px;
 color: #0E0D06;
}

.login-form h2 {
 font-size: 16px;
 margin-bottom: 16px;
 color: #333;
}

.login-form input[type="text"],
.login-form input[type="password"] {
 width: 100%;
 padding: 10px 12px;
 margin-bottom: 12px;
 border: 1px solid #ccc;
 border-radius: 6px;
 font-size: 14px;
 outline: none;
}

.login-form button {
 width: 100%;
 padding: 10px;
 background: #EABD23;
 color: #0E0D06;
 border: none;
 border-radius: 6px;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;
}

.login-form button:hover {
 background: #d5a81e;
}

.customer-block {
 border-left: 3px solid #1976D2;
 background: rgba(25, 118, 210, 0.08);
}

.customer-block:hover {
 background: rgba(25, 118, 210, 0.15);
}

.upcoming-section {
 margin-top: 32px;
 padding: 16px;
 background: #F4F1EA;
 border-radius: 8px;
}

.upcoming-section h2 {
 margin-top: 0;
 font-size: 18px;
 font-weight: 600;
 color: #0E0D06;
}

.upcoming-list {
 list-style: none;
 padding: 0;
 margin: 0;
}

.upcoming-item {
 background: white;
 padding: 12px 16px;
 margin-bottom: 8px;
 border-radius: 6px;
 border-left: 3px solid #EABD23;
}

.upcoming-item strong {
 display: block;
 margin: 4px 0;
}

.upcoming-date {
 font-weight: 600;
 color: #EABD23;
}

.upcoming-time {
 margin-left: 8px;
 color: #666;
 font-size: 13px;
}