
:root { --line:#e5e7eb; --muted:#6b7280; --bg:#ffffff; --slot:#f9fafb; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color:#111827; }
main { padding-bottom: 1em; }
.container-full { padding-top: 30px; background: #fff; }
.toolbar { display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.grid { display:grid; grid-template-columns: 20px repeat(7, 1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.inline { display: inline; }
.calendar-week-wrapper.day { max-height: calc(100vh - 150px); }
.calendar-week-wrapper.day .grid { grid-template-columns: 20px repeat(1, 1fr); }

.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.month-cell { border: 1px solid #8BC34A; border-radius:8px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.month-cell.is-muted { opacity:.30; }
.hour { height:60px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; padding-top:2px; font-size:12px; color:var(--muted); }
.day-header { text-align:center; padding:8px; border-right:1px solid var(--line); border-bottom: 1px solid var(--line); font-weight:600; position: sticky; top: -10px; background: #fff; z-index: 799;
    background: linear-gradient(180deg, rgba(242, 242, 242, 1) 0%, rgba(222, 222, 222, 1) 100%);}
.time-col { background: linear-gradient(180deg, rgba(242, 242, 242, 1) 0%, rgba(222, 222, 222, 1) 100%); border-right:1px solid #fff; padding: 5px; position: sticky; left: 0; }
.m-appoint { width: 100%; height: 24.3px; line-height: 24.3px; font-size: 11px; margin-bottom: 1px;}
.m-appoint i { margin: 0; }
.row.row-mb0 { margin-bottom: 0; }
.checklist li label { border: 1px solid var(--line); display: block; margin: 1px 0; padding: 10px 15px; }
.spacer { display: inline; border-left: 1px solid var(--line); margin-right: 20px; margin-left: 10px;}

.day-col { position:relative; border-bottom: 1px solid #b9bbbe; }
.slot { position:relative; height:60px; border-bottom:1px solid var(--line); background:var(--slot); }

#apt-modal .helper-text { display:none; }
#startAt-wrapDiv > .row,
#endAt-wrapDiv > .row
{ margin-top: -.75rem!important; margin-bottom: 0; }

.user-slot .slot-create { width: 100%; height: 100%; }
.user-slot:first-child { border-left: 1px solid #b9bbbe; }
.user-slot:hover { background: #eee; }

/* 4 User Unterspalten per Tag */
.user-grid { display:grid; grid-template-columns: repeat(var(--cols, 4), 1fr); height:100%; }
.user-slot { border-left:1px dashed #e5e7eb; height:60px; position:relative; }
.user-header { display:grid; grid-template-columns: repeat(var(--cols, 4), 1fr); border-bottom:1px solid var(--line); position: sticky; top: 25px; background: #fff; z-index: 699; }
.user-name { font-size:12px; padding:6px; border-left:1px dashed #e5e7eb; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.apt { position:absolute; width: 100%; padding:6px; border-radius:6px; color:white; font-size:12px; line-height:1.2; box-shadow:0 1px 2px rgba(0,0,0,.1); z-index:98; overflow: hidden}
.apt>div { overflow: hidden; }
.apt small { opacity:.9; display:block; }
.apt a { color:inherit; text-decoration:underline; }
.user-slot > .apt:nth-child(2) { margin-left: 1em; margin-top: 1em; }
.user-slot > .apt:nth-child(3) { margin-left: 2em; margin-top: 2em; }

.muted { color: var(--muted); font-size:12px; }
.legend { display:flex; gap:8px; align-items:center; }
.legend__item { display:flex; align-items:center; gap:6px; }
.legend__dot { width:10px; height:10px; border-radius:999px; display:inline-block; }

.navbar-sticky { position: sticky; top: 0; z-index: 999; }
.footer-sticky { position: sticky; bottom: 0; z-index: 996; }
dialog::backdrop { background: rgba(0,0,0,.25); }
nav .material-icons.large { font-size: 2.5rem; }
nav .btn-small i { font-size: 1.2rem; line-height: inherit; }
h2 { font-size: 2.56rem;}
h4 { font-size: 2.0rem; }
.col.input-block { border-bottom: 1px solid #9e9e9e; margin-bottom: 12px; padding: 0 .75rem 0.75rem; }
.brand-logo img { height: 64px; padding: 12px; }
.day-header.is-today { background: var(--today-bg, #FFF6BF); }
.user-slot.is-today { background: var(--today-bg, #FFF6BF); }
footer.page-footer { padding: 5px; }
.btn-floating.btn-mini { width: 24px; height: 24px; line-height: 24px;}
.btn-mini { height: 30px; line-height: 30px; }
.btn-mini i { font-size: 1.1rem; line-height: inherit;}
.btn-user { height: 20px; line-height: 20px; padding: 0 5px; }
.btn-user .truncate { font-size: 10px; }
.btn-user i { font-size: 1.1rem; line-height: inherit;}
dialog {padding:0; border:none; border-radius:12px; }
.container-mini { margin: 0 0.5%; }
@media only screen and (max-width: 768px) {
    nav {
        height: auto;
        line-height: 50px;
    }
    .container-mini { width: 96%; margin: 0 2%; }
    .day-header { font-size: 10px;}
    .user-header { top: 15px; }
    .month-cell  .cell-users { display: inline;}
    .month-cell  .cell-users .cell-user { padding-left: 0; border-left: none; }
}
