/* =========================================================
   Common UI
   TODO / Calendar / Work Logs / Roles
========================================================= */

:root {
    --page-bg: #f5f6f8;
    --surface: #ffffff;
    --surface-subtle: #f9fafb;

    --text-main: #1f2937;
    --text-sub: #6b7280;

    --border: #dfe3e8;
    --border-strong: #c7cdd4;

    --primary: #2f3640;
    --primary-hover: #1f252c;

    --nav-hover: #f0f2f5;
    --nav-active: #e8ebef;

    --radius-small: 6px;
    --radius: 10px;
    --radius-large: 14px;

    --shadow-small:
        0 1px 3px rgba(0, 0, 0, 0.06);

    --shadow:
        0 4px 18px rgba(0, 0, 0, 0.07);
}


/* =========================================================
   Base
========================================================= */

* {
    box-sizing: border-box;
}


html {
    min-height: 100%;
}


body {
    margin: 0;

    min-height: 100vh;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Helvetica Neue",
        Arial,
        sans-serif;

    background:
        var(--page-bg);

    color:
        var(--text-main);
}


/* =========================================================
   Header
========================================================= */

.main-header {
    min-height: 64px;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Helvetica Neue",
        Arial,
        sans-serif;

    display: flex;
    align-items: center;

    gap: 28px;

    padding:
        0
        24px;

    background:
        var(--surface);

    border-bottom:
        1px solid
        var(--border);

    box-shadow:
        0 1px 4px
        rgba(0, 0, 0, 0.04);

    position: relative;

    z-index: 100;
}


.main-header h1 {
    margin: 0;

    font-size: 20px;
    font-weight: 700;

    letter-spacing: 0.01em;

    white-space: nowrap;
}


/* =========================================================
   Navigation
========================================================= */

.main-nav {
    display: flex;
    align-items: center;

    gap: 4px;

    flex: 1;
}


.main-nav a {
    display: inline-flex;
    align-items: center;

    min-height: 38px;

    padding:
        0
        13px;

    border-radius:
        var(--radius-small);

    color:
        var(--text-main);

    text-decoration: none;

    font-size: 14px;
    font-weight: 500;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}


.main-nav a:hover {
    background:
        var(--nav-hover);
}


.main-nav a.active {
    background:
        var(--nav-active);

    font-weight: 700;
}


/* =========================================================
   Header Logout
========================================================= */

.main-logout-button {
    min-height: 38px;

    padding:
        0
        14px;

    border:
        1px solid
        var(--border-strong);

    border-radius:
        var(--radius-small);

    background:
        var(--surface);

    color:
        var(--text-main);

    font: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.main-logout-button:hover {
    background:
        var(--nav-hover);

    border-color:
        #aeb5bd;
}


/* =========================================================
   Common Button
========================================================= */

button {
    font-family: inherit;
}


.ui-button {
    min-height: 38px;

    padding:
        0
        14px;

    border:
        1px solid
        var(--border-strong);

    border-radius:
        var(--radius-small);

    background:
        var(--surface);

    color:
        var(--text-main);

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.1s ease;
}


.ui-button:hover {
    background:
        var(--nav-hover);
}


.ui-button:active {
    transform:
        translateY(1px);
}


.ui-button-primary {
    background:
        var(--primary);

    border-color:
        var(--primary);

    color: white;
}


.ui-button-primary:hover {
    background:
        var(--primary-hover);

    border-color:
        var(--primary-hover);
}


/* =========================================================
   Common Form Controls
========================================================= */

.ui-input,
.ui-select,
.ui-textarea {
    width: 100%;

    padding:
        10px
        12px;

    border:
        1px solid
        var(--border-strong);

    border-radius:
        var(--radius-small);

    background:
        var(--surface);

    color:
        var(--text-main);

    font: inherit;
}


.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
    outline: none;

    border-color:
        #7d8792;

    box-shadow:
        0 0 0 3px
        rgba(80, 90, 105, 0.10);
}


/* =========================================================
   Common Surface / Card
========================================================= */

.ui-surface {
    background:
        var(--surface);

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow-small);
}


/* =========================================================
   Responsive Header
========================================================= */

@media (max-width: 760px) {

    .main-header {
        min-height: auto;

        flex-wrap: wrap;

        gap: 10px;

        padding:
            12px
            16px;
    }


    .main-header h1 {
        width: 100%;

        font-size: 18px;
    }


    .main-nav {
        flex: 1;

        overflow-x: auto;

        white-space: nowrap;
    }


    .main-nav a {
        flex-shrink: 0;
    }


    .main-logout-button {
        flex-shrink: 0;
    }

}