.employee-list { display: grid; gap: 10px; margin-top: 14px; }
.employee-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 15px 16px; border: 1px solid #dbe3ed; border-radius: 12px; background: #fff; }
.employee-row.is-retired { background: #f8fafc; color: #64748b; }
.employee-row > div:first-child { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.employee-row small { color: #64748b; }
.employee-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.status-badge { display: inline-block; min-width: 48px; padding: 4px 8px; border-radius: 999px; text-align: center; font-size: 0.78rem; font-weight: 900; }
.status-badge.active { background: #dcfce7; color: #166534; }
.status-badge.retired { background: #e2e8f0; color: #475569; }
.danger-button { color: #b91c1c; background: #fee2e2; }
.employee-history-note { margin-top: 18px; border-left: 5px solid #2563eb; }
.master-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.master-card { display: flex; gap: 18px; min-height: 190px; padding: 24px; border: 1px solid #dbe3ed; border-radius: 16px; background: linear-gradient(145deg, #fff, #f8fafc); box-shadow: 0 10px 28px #0f172a0d; color: #0f172a; text-decoration: none; transition: transform .18s, box-shadow .18s; }
.master-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px #0f172a18; }
.master-card h2 { margin: 2px 0 8px; }
.master-card p { color: #64748b; }
.master-card strong { color: #1d4ed8; font-size: 1.4rem; }
.master-icon { display: grid; place-items: center; flex: 0 0 52px; height: 52px; border-radius: 14px; background: #1d4ed8; color: #fff; font-size: 1.35rem; font-weight: 900; }
.master-create { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px 12px; align-items: start; margin-bottom: 22px; }
.master-create > label { min-width: 0; }
.master-create input:not([type="checkbox"]),.master-create select { width: 100%; min-height: 50px; }
.master-create small { color: #64748b; font-weight: 500; line-height: 1.45; }
.employee-code-field,.employee-name-field { grid-column: span 2; }
.employee-email-field { grid-column: span 2; }
.employee-affiliation-field,.employee-department-field { grid-column: span 2; }
.employee-shift-field { grid-column: span 2; }
.employee-admin-toggle { grid-column: 1 / span 2; align-self: start; flex-direction: row; align-items: center; gap: 9px; min-height: 50px; margin-top: 24px; }
.employee-admin-toggle input { width: 18px; height: 18px; margin: 0; }
.employee-admin-password { grid-column: 3 / span 3; }
.employee-create-button { grid-column: 6 / span 3; align-self: start; min-height: 50px; margin-top: 24px; }
.master-table { margin-top: 18px; }
.master-records { display: grid; gap: 10px; }
.master-record { display: grid; grid-template-columns: 1fr 2fr 150px 100px auto; gap: 12px; align-items: end; }
.master-count { align-self: center; color: #64748b; text-align: center; }
.master-link-panel { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px; }
.shift-list { display: grid; gap: 16px; margin-top: 20px; }
.shift-form { display: grid; grid-template-columns: repeat(5,minmax(120px,1fr)); gap: 12px; align-items: end; margin-bottom: 18px; }
@media (max-width: 1000px) { .master-create { grid-template-columns: repeat(2,minmax(0,1fr)); } .master-create > * { grid-column: auto; } .employee-email-field,.employee-shift-field,.employee-admin-password { grid-column: span 2; } .employee-admin-toggle,.employee-create-button { margin-top: 0; } }
@media (max-width: 800px) { .employee-row { align-items: stretch; flex-direction: column; } .employee-actions { width: 100%; } .master-menu { grid-template-columns: 1fr; } .master-create,.master-record { grid-template-columns: 1fr; } .master-create > *,.employee-email-field,.employee-shift-field,.employee-admin-password { grid-column: 1; } .employee-create-button { width: 100%; } .master-link-panel { align-items: stretch; flex-direction: column; } }
@media (max-width: 800px) { .shift-form { grid-template-columns: 1fr 1fr; } }
.shift-code { display: inline-block; border-bottom: 1px dotted #64748b; cursor: help; }
.shift-code:focus-visible { border-radius: 4px; outline: 3px solid #93c5fd; outline-offset: 3px; }
.master-card{border-color:#dedde3;border-radius:20px;background:#fff;box-shadow:var(--md-shadow)}.master-card:hover{border-color:#668bd2;box-shadow:0 6px 16px rgba(49,93,168,.2)}.master-card strong{color:var(--md-primary)}.master-icon{border-radius:16px;background:var(--md-primary)}.status-badge.active{background:#e6f4ea;color:#0d652d}.status-badge.retired{background:#e5e2e8;color:#49454f}.danger-button{color:#8c1d18;background:#ffdad6}.danger-button:hover{background:#ffc9c3}.employee-history-note{border-left-color:var(--md-primary)}