/* Hellere Farbpalette, linke Sidebar, responsive */
:root {
    --bg: #fbfdff;
    --card: #ffffff;
    --accent: #2b8cff;
    --muted: #6b7280;
    --sidebar-bg: #f1f7ff;
    --max-width: 1100px;
    --sidebar-width: 220px;
}

* {
    box-sizing: border-box
}

body {
    font-family: Segoe UI, Roboto, Arial, sans-serif;
    background: var(--bg);
    margin: 0;
    color: #111
}

/* Login centering */
main {
    min-height: 100vh
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 20px
}

.card {
    background: var(--card);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(20, 20, 20, 0.06);
    padding: 20px
}

.login-card {
    width: 340px
}

label {
    display: block;
    font-size: 0.95rem;
    margin-top: 12px;
    color: var(--muted)
}

input {
    width: 100%;
    padding: 12px;
    margin-top: 6px;
    border: 1px solid #e6e9ee;
    border-radius: 8px
}

.actions {
    margin-top: 18px;
    text-align: right
}

button {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer
}

button.small {
    padding: 8px 12px;
    font-size: 0.95rem
}

.hint {
    font-size: 0.87rem;
    color: var(--muted);
    margin-top: 12px
}

.hidden {
    display: none
}

/* App layout */
.app-header {
    width: 100%;
    max-width: var(--max-width);
    margin: 18px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: calc(var(--sidebar-width) + 20px)
}

.app-body {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    gap: 18px
}

/* Fixed left sidebar full height */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    padding: 18px;
    background: linear-gradient(180deg, var(--sidebar-bg), #ffffff00)
}

.sidebar .card {
    height: 100%;
    padding: 14px;
    background: transparent;
    border-radius: 10px
}

nav ul {
    list-style: none;
    padding: 6px;
    margin: 0
}

nav li {
    margin: 6px 0
}

nav a {
    color: #0f1724;
    text-decoration: none;
    padding: 10px 12px;
    display: block;
    border-radius: 8px
}

/* admin nav items hidden by default; JS will show for admins */
.nav-admin{display:none}

nav a:hover {
    background: #e9f2ff
}

.content {
    margin-left: calc(var(--sidebar-width) + 20px);
    padding: 6px 12px 30px 12px;
    flex: 1
}

/* allow children to shrink properly inside flex layouts */
.content{min-width:0}

.stats {
    display: flex;
    gap: 12px;
    margin-bottom: 14px
}

.stat-card {
    flex: 1;
    background: var(--card);
    padding: 14px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(20, 20, 20, 0.04)
}

.stat-card .big {
    display: block;
    font-size: 1.7rem;
    margin-top: 10px;
    color: var(--accent)
}

.recent .data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border-radius: 8px;
    overflow: hidden
}

/* make the table horizontally scrollable on small screens to avoid overlap */
.recent .data-table{display:block;overflow:auto;-webkit-overflow-scrolling:touch}
.recent .data-table thead, .recent .data-table tbody, .recent .data-table tr {display:table;width:100%;table-layout:fixed}
.recent .data-table thead{width:calc(100% - 1px)}

/* apply responsive table behavior to all data tables (residents page uses .data-table) */
.data-table{display:block;overflow:auto;-webkit-overflow-scrolling:touch}
.data-table thead, .data-table tbody, .data-table tr {display:table;width:100%;table-layout:fixed}
.data-table thead{width:calc(100% - 1px)}

/* ensure fixed sidebar does not overlap content on pages that include the aside */
.sidebar + main .content{margin-left:calc(var(--sidebar-width) + 20px) !important}

/* patient file: make header stack on small screens */
.file-header{display:flex;flex-wrap:wrap;align-items:flex-start}
.file-header .pf-photo{margin-bottom:0}
@media (max-width:700px){
    .file-header{flex-direction:column;align-items:center;text-align:center}
    .file-header .pf-photo{width:120px;height:120px;margin-bottom:12px}
    .file-header > div{width:100%}
    .file-header .meta-small{margin-top:8px}
}

/* residents table: allow cells to wrap and keep actions visible */
.residents-table td{word-wrap:break-word}
.residents-table td .cell-with-actions{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px}

/* assigned list responsiveness: cards wrap and have a sensible min width */
.assigned-list{max-width:100%;min-width:0}
.assigned-card{flex:1 1 220px;min-width:160px}

/* spacing to ensure sections don't overlap */
.assigned, .recent{z-index:1;position:relative}

.data-table th,
.data-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    text-align: left
}

.data-table thead th {
    background: #fbfdff
}

/* Responsive: sidebar becomes top horizontal on small screens */
@media (max-width:900px) {
    .sidebar {
        position: relative;
        width: 100%;
        height: auto;
        display: block;
        padding: 10px
    }

    .sidebar .card {
        height: auto
    }

    .content {
        margin-left: 0;
        padding-top: 8px
    }

    .app-header {
        padding-left: 0;
        margin-top: 8px
    }

    .stats {
        flex-direction: column
    }

    .assigned-list{justify-content:flex-start}
    .assigned-card{flex:1 1 calc(50% - 10px)}

    .login-card {
        width: 100%;
        max-width: 420px
    }
}

@media (min-width:901px) and (max-width:1200px) {
    :root {
        --sidebar-width: 200px
    }

    .login-card {
        width: 320px
    }
}

/* Modal styles for resident selection */
.modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 15, 25, 0.35);
    z-index: 50;
    padding: 20px
}

.modal.hidden {
    display: none
}

.modal-card {
    max-width: 520px;
    width: 100%;
    padding: 18px
}

.resident-list {
    list-style: none;
    padding: 6px;
    margin: 8px 0
}

.resident-list li {
    margin: 8px 0
}

.resident-list label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px
}

.resident-list input[type="checkbox"] {
    width: 18px;
    height: 18px
}

.resident-list .name {
    font-weight: 600
}

.modal-actions {
    display:flex;justify-content:flex-end;margin-top:12px
    justify-content: flex-end;
    margin-top: 12px
}

.modal-actions button {
    background: var(--accent);
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    border: none
}

/* Resident grid */
.resident-grid-section h3{margin-top:4px;margin-bottom:10px}
.resident-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px}
.resident-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 6px 14px rgba(20,30,60,0.04);cursor:pointer;border:1px solid #eef6ff}
.resident-card:hover{transform:translateY(-4px);transition:transform .16s}
.resident-card .icon{flex:0 0 36px}
.r-name{font-weight:700}
.r-note{font-size:0.9rem;color:var(--muted)}

/* Detail modal tweaks */
#resident-detail-modal .modal-card{max-width:520px;padding:16px}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.modal-body p{margin:8px 0}

/* Table action buttons */
.residents-table td.actions{white-space:nowrap}
.btn{display:inline-block;padding:6px 10px;border-radius:6px;border:none;cursor:pointer;font-size:0.95rem}
.btn + .btn{margin-left:8px}
.btn-primary{background:var(--accent);color:#fff}
.btn-secondary{background:#eef6ff;color:#0b3a8a}
.btn:active{transform:translateY(1px)}

/* cell with actions: date on left, buttons aligned right */
.cell-with-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cell-with-actions .modified{color:var(--muted);font-size:0.95rem}
.residents-table td .actions{display:inline-flex;gap:8px}

/* Icon-only action button */
.btn-icon{background:transparent;border:none;color:#0b3a8a;padding:6px;border-radius:6px;font-size:1.05rem;display:inline-flex;align-items:center;justify-content:center}
.btn-icon i{pointer-events:none}
.btn-icon:hover{background:#eef6ff}

/* danger button */
.btn-danger{background:#e03b3b;color:#fff;border:none;padding:8px 12px;border-radius:8px;cursor:pointer}
.btn-danger{box-shadow:0 2px 0 rgba(0,0,0,0.06)}

.assigned-card{background:var(--card);padding:10px 12px;border-radius:8px;box-shadow:0 6px 12px rgba(20,30,60,0.04);cursor:pointer;border:1px solid #eef6ff;display:flex;align-items:center;gap:10px;justify-content:space-between}
.assigned-edit{background:transparent;border:1px solid #e6e9ee;padding:6px 8px;border-radius:6px;cursor:pointer;color:#0b3a8a;flex:0 0 auto}
.assigned-edit:hover{background:#f5f7fb}

/* profile / patient file */
.profile h2{margin:0}
.muted{color:var(--muted)}
.patient-akte{margin-top:12px}

/* entries list */
.entry-card{padding:12px;margin-bottom:10px;border-radius:8px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 6px 14px rgba(20,30,60,0.03)}
.file-actions .btn{padding:8px 10px}
.file-header{background:linear-gradient(180deg,#fff,#f9fbff)}
.pf-photo{width:140px;height:140px;object-fit:cover;border-radius:8px}
.meta-small{color:var(--muted);font-size:0.95rem}

/* assigned residents on dashboard */
.assigned{margin:14px 0}
.assigned-list{display:flex;gap:10px;flex-wrap:wrap}
.assigned-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.assigned-header h3{margin:0}
.assigned-header .btn{padding:6px 10px}

.assigned-card{background:var(--card);padding:10px 12px;border-radius:8px;box-shadow:0 6px 12px rgba(20,30,60,0.04);cursor:pointer;border:1px solid #eef6ff;display:flex;align-items:center;gap:10px}
.assigned-card .name{font-weight:600;padding-left:6px}

/* Checklist styles */
.checklist .card{background:var(--card);border-radius:8px;padding:12px}
.checklist h4{margin:6px 0 10px}
.checklist h5{margin:10px 0 6px;font-size:1rem}
.checklist label{display:block;margin:6px 0}
.checklist input[type="checkbox"]{margin-right:8px}
.assigned-card small{color:var(--muted);margin-left:6px}