* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;
    font-family:
        "Segoe UI",
        "Microsoft JhengHei",
        sans-serif;
}

.app-shell {
    min-height: 100vh;

    display: grid;

    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-rows: 64px minmax(0, 1fr);

    grid-template-areas:
        "sidebar header"
        "sidebar workspace";
}

.app-shell__sidebar {
    grid-area: sidebar;
    min-width: 0;
    background: #f3f4f6;
}

.app-shell__header {
    grid-area: header;
    min-width: 0;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.app-shell__workspace {
    grid-area: workspace;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    background: #f8fafc;
}