/* =========================================
   共通設定
========================================= */

* {
    box-sizing: border-box;
}


:root {
    font-family:
            -apple-system,
            BlinkMacSystemFont,
            "Hiragino Sans",
            "Yu Gothic",
            Meiryo,
            sans-serif;

    color: #1f2937;
    background: #f5f7fb;
}


body {
    margin: 0;
    background: #f5f7fb;
}


/* =========================================
   全体レイアウト
========================================= */

.app-layout {
    display: flex;
    min-height: 100vh;
    background: #f5f7fb;
}


/* =========================================
   Sidebar
========================================= */

.sidebar {
    width: 250px;
    height: 100vh;

    background: #172033;
    color: #ffffff;

    padding: 18px 14px;

    display: flex;
    flex-direction: column;

    position: fixed;

    top: 0;
    left: 0;
    bottom: 0;

    overflow-y: auto;

    z-index: 1000;
}


/* =========================================
   Sidebar Brand
========================================= */

.sidebar-brand {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 8px 10px 22px;

    border-bottom: 1px solid #303b50;
}


.brand-mini {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #ffffff;

    color: #172033;

    font-weight: 800;
}


.sidebar-brand strong {
    display: block;
    font-size: 18px;
}


.sidebar-brand small {
    display: block;

    color: #aab4c6;

    font-size: 11px;

    margin-top: 3px;
}


/* =========================================
   Sidebar Menu
========================================= */

.sidebar nav {
    padding-top: 14px;
}


.nav-item {
    display: block;

    color: #dbe3ef;

    text-decoration: none;

    padding: 11px 12px;

    border-radius: 9px;

    margin: 3px 0;

    font-size: 14px;

    transition: 0.2s;
}


.nav-item:hover {
    background: #26334a;
    color: #ffffff;
}


.nav-item.active {
    background: #2563eb;
    color: #ffffff;
    font-weight: 600;
}


/* =========================================
   Sidebar Bottom
========================================= */

.sidebar-bottom {
    margin-top: auto;
    padding-top: 10px;
}


.logout {
    width: 100%;

    background: transparent;
    border: none;

    color: #aab4c6;

    text-align: left;

    padding: 11px 12px;

    cursor: pointer;

    font-size: 14px;

    border-radius: 9px;
}


.logout:hover {
    background: #26334a;
    color: #ffffff;
}


/* =========================================
   メインコンテンツ
========================================= */

.main-content {
    margin-left: 250px;

    width: calc(100% - 250px);

    min-height: 100vh;

    padding: 32px 40px;

    background: #f5f7fb;
}


/* =========================================
   ページヘッダー
========================================= */

.page-header {
    margin-bottom: 28px;
}


.page-header h1 {
    margin: 0 0 8px 0;

    font-size: 28px;

    font-weight: 700;

    color: #1f2937;
}


.page-header p {
    margin: 0;

    color: #718096;

    font-size: 14px;
}


/* =========================================
   Card
========================================= */

.card {
    width: 100%;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 14px;

    padding: 28px;

    margin-bottom: 20px;

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


.card h2 {
    font-size: 20px;

    margin-top: 0;

    margin-bottom: 25px;

    color: #1f2937;
}


/* =========================================
   Form
========================================= */

.form-group {
    width: 100%;
    margin-bottom: 20px;
}


.form-group label {
    display: block;

    font-weight: 600;

    margin-bottom: 8px;

    color: #374151;

    font-size: 14px;
}


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

    height: 48px;

    padding: 0 15px;

    border: 1px solid #d1d5db;

    border-radius: 8px;

    font-size: 15px;

    background: #ffffff;
}


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

    border-color: #2563eb;

    box-shadow:
            0 0 0 3px
            rgba(37, 99, 235, 0.1);
}


/* =========================================
   請求・経費管理
========================================= */

.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.card-header h2 { margin-bottom: 6px; }
.card-header p { margin: 0; color: #718096; font-size: 14px; }
.required-label { color: #dc2626; font-size: 13px; white-space: nowrap; }
.notice { padding: 14px 16px; border-radius: 9px; margin-bottom: 18px; font-weight: 600; }
.success-notice { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.error-notice { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.upload-area { margin: 20px 0 24px; }
.upload-label { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 26px 16px; border: 2px dashed #93c5fd; border-radius: 12px; background: #eff6ff; color: #1d4ed8; cursor: pointer; text-align: center; }
.upload-label:hover { background: #dbeafe; }
.upload-icon { font-size: 28px; }
.upload-label small, .selected-file { color: #64748b; font-size: 13px; }
.upload-area input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.selected-file { margin: 9px 0 0; text-align: center; }
.expense-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.form-group label span { color: #dc2626; }
.form-group textarea { height: auto; padding: 12px 15px; resize: vertical; }
.currency-input { display: flex; align-items: center; height: 48px; border: 1px solid #d1d5db; border-radius: 8px; overflow: hidden; background: #fff; }
.currency-input:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
.currency-input span { padding-left: 15px; color: #64748b; font-weight: 600; }
.currency-input input { border: 0; box-shadow: none; height: 46px; }
.currency-input input:focus { box-shadow: none; }
.form-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.category-badge, .status-badge { display: inline-block; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eff6ff; color: #1d4ed8; }
.status-badge { background: #fff7ed; color: #c2410c; }
.amount-cell { font-weight: 700; white-space: nowrap; }
.document-link { color: #2563eb; font-weight: 600; text-decoration: none; white-space: nowrap; }
.document-link:hover { text-decoration: underline; }
.expense-table small { color: #718096; }


/* =========================================
   ログイン
========================================= */

.login-page { min-height: 100vh; overflow: hidden; background: #071527; }
.login-shell { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(420px, .8fr); min-height: 100vh; }
.login-brand-panel { position: relative; display: flex; flex-direction: column; padding: 46px clamp(48px, 7vw, 118px); color: #f8fafc; overflow: hidden; background: linear-gradient(135deg, #07192c 0%, #0b3152 55%, #08736e 130%); }
.login-brand-panel::before { content: ""; position: absolute; width: 620px; height: 620px; border: 1px solid rgba(157, 255, 236, .18); border-radius: 50%; top: -310px; right: -190px; box-shadow: 0 0 0 70px rgba(81, 203, 190, .04), 0 0 0 160px rgba(81, 203, 190, .025); }
.login-brand-panel::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; bottom: -220px; left: -110px; background: radial-gradient(circle, rgba(33, 196, 177, .3), transparent 68%); }
.login-brand, .login-brand-copy, .login-feature-list, .login-copyright { position: relative; z-index: 1; }
.login-brand { display: flex; align-items: center; gap: 13px; }
.login-brand-mark, .login-mobile-brand span { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; color: #063047; background: linear-gradient(135deg, #fbfffe, #9df5e9); font-size: 20px; font-weight: 900; box-shadow: 0 10px 25px rgba(0, 0, 0, .2); }
.login-brand strong { display: block; font-size: 17px; letter-spacing: .04em; }
.login-brand span { display: block; margin-top: 4px; color: #99afc5; font-size: 10px; letter-spacing: .14em; }
.login-brand-copy { margin: auto 0; max-width: 590px; padding: 52px 0; }
.login-eyebrow, .login-heading > p { margin: 0 0 15px; color: #65e4d0; font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.login-brand-copy h1 { margin: 0; font-size: clamp(38px, 4vw, 62px); line-height: 1.25; letter-spacing: .02em; }
.login-brand-copy h1 em { color: #73ebd8; font-style: normal; }
.login-brand-copy > p:last-of-type { max-width: 450px; margin: 27px 0 0; color: #b6c7d8; font-size: 15px; line-height: 1.9; }
.login-feature-list { display: flex; gap: 34px; }
.login-feature-list > div { display: flex; align-items: flex-start; gap: 12px; }
.login-feature-list span { color: #70ebd8; font: 800 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.login-feature-list p { margin: 0; }
.login-feature-list strong, .login-feature-list small { display: block; }
.login-feature-list strong { font-size: 13px; }
.login-feature-list small { margin-top: 5px; color: #90a9c0; font-size: 11px; }
.login-copyright { margin: 32px 0 0; color: #758ba2; font-size: 10px; letter-spacing: .12em; }
.login-form-panel { display: grid; place-items: center; padding: 32px; background: #f7fafc; }
.login-card { width: min(100%, 402px); }
.login-mobile-brand { display: none; }
.login-heading { margin-bottom: 31px; }
.login-heading > p { color: #0a8f87; }
.login-heading h2 { margin: 0 0 9px; color: #102a43; font-size: 34px; letter-spacing: .03em; }
.login-heading > span { color: #718096; font-size: 14px; }
.login-form { display: grid; gap: 19px; }
.login-field label { display: block; margin-bottom: 8px; color: #334e68; font-size: 13px; font-weight: 700; }
.login-input { display: flex; align-items: center; height: 55px; border: 1px solid #d9e2ec; border-radius: 10px; background: #fff; transition: .2s; }
.login-input:focus-within { border-color: #10a99e; box-shadow: 0 0 0 4px rgba(16, 169, 158, .12); }
.login-input span { width: 47px; color: #829ab1; text-align: center; font-size: 17px; }
.login-input input { width: 100%; height: 100%; padding: 0 15px 0 0; border: 0; outline: 0; color: #102a43; background: transparent; font-size: 15px; }
.login-input input::placeholder { color: #aab7c4; }
.login-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 7px; padding: 16px 20px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(110deg, #087d87, #10a99e); box-shadow: 0 12px 22px rgba(8, 125, 135, .23); cursor: pointer; font-size: 15px; font-weight: 800; transition: .2s; }
.login-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(8, 125, 135, .3); }
.login-submit b { font-size: 21px; line-height: 12px; }
.login-alert { margin: -11px 0 19px; padding: 11px 13px; border-radius: 8px; font-size: 13px; line-height: 1.45; }
.login-alert.error { color: #b42318; background: #fef3f2; border: 1px solid #fecdca; }
.login-alert.success { color: #067647; background: #ecfdf3; border: 1px solid #abefc6; }
.login-security-note { margin: 24px 0 0; color: #829ab1; font-size: 12px; text-align: center; }
.login-security-note span { color: #0a9e95; font-weight: 800; }


/* =========================================
   販促スタッフ管理
========================================= */

.month-filter { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.month-filter label { font-weight: 600; }
.month-filter input { height: 42px; padding: 0 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 15px; }
.promoter-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.group-total-card { padding-bottom: 18px; }
.group-total-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 18px; }
.group-total-item { display: flex; justify-content: space-between; gap: 12px; padding: 13px 14px; border: 1px solid #dbeafe; border-radius: 9px; background: #f8fbff; color: #334e68; font-size: 14px; }
.group-total-item strong { color: #0f766e; white-space: nowrap; }
.record-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 14px; }
.group-add-form { display: flex; gap: 10px; margin-top: 16px; }
.group-add-form input { flex: 1; height: 44px; padding: 0 14px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 15px; }
.record-submit { padding-bottom: 20px; }
.record-submit .btn { width: 100%; white-space: nowrap; }
.staff-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 0 20px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; min-height: 48px; font-size: 14px; font-weight: 600; }
.checkbox-label input { width: 18px; height: 18px; }
.table-actions { display: flex; align-items: center; gap: 8px; }
.table-actions form { margin: 0; }
.small-button { padding: 7px 10px; font-size: 13px; }
.delete-link { border: 0; background: transparent; color: #dc2626; cursor: pointer; font-size: 14px; font-weight: 600; padding: 7px; }
.delete-link:hover { text-decoration: underline; }


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

.btn {
    border: none;

    border-radius: 8px;

    padding: 12px 24px;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.2s;
}


.btn-primary {
    background: #2563eb;
    color: white;
}


.btn-primary:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}


.btn-danger {
    background: #dc2626;
    color: white;
}


.btn-danger:hover {
    background: #b91c1c;
    transform: translateY(-1px);
}


.primary-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 12px 22px;

    border-radius: 8px;

    background: #2563eb;

    color: white;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    border: none;

    cursor: pointer;
}


.primary-button:hover {
    background: #1d4ed8;
}


.secondary-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 12px 22px;

    border-radius: 8px;

    background: #e5e7eb;

    color: #374151;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    border: none;

    cursor: pointer;
}


.secondary-button:hover {
    background: #d1d5db;
}


/* =========================================
   Table
========================================= */

.table-wrapper {
    width: 100%;
    overflow-x: auto;
}


table {
    width: 100%;
    border-collapse: collapse;
}


th {
    background: #f8fafc;

    color: #64748b;

    font-weight: 600;
}


th,
td {
    padding: 16px 14px;

    text-align: left;

    border-bottom: 1px solid #e5e7eb;

    font-size: 14px;
}


td {
    color: #334155;
}


tbody tr:hover {
    background: #f8fafc;
}


/* =========================================
   勤怠管理
========================================= */

.attendance-button {
    min-width: 130px;
}


/* =========================================
   給与管理
========================================= */

.filter-form {
    display: flex;

    align-items: flex-end;

    gap: 20px;
}


.filter-form .form-group {
    flex: 1;
    margin-bottom: 0;
}


.summary-card {
    margin-bottom: 20px;

    padding: 25px;

    background: white;

    border: 1px solid #e5e7eb;

    border-radius: 14px;

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


.summary-title {
    font-size: 16px;

    color: #666;

    margin-bottom: 10px;
}


.summary-amount {
    font-size: 32px;

    font-weight: bold;

    color: #1f2937;
}


.empty-message {
    text-align: center;

    padding: 30px;

    color: #999;
}


/* =========================================
   Form Card
========================================= */

.form-card {
    max-width: 800px;
}


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

@media (max-width: 900px) {

    .login-shell {
        grid-template-columns: 1fr;
    }


    .login-brand-panel {
        display: none;
    }


    .login-form-panel {
        min-height: 100vh;
        background: linear-gradient(145deg, #eef7f8, #f9fbfd);
    }


    .login-mobile-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 56px;
        color: #12314a;
        font-size: 15px;
        font-weight: 800;
    }


    .login-mobile-brand span {
        width: 35px;
        height: 35px;
        border-radius: 10px;
        font-size: 16px;
    }

    .sidebar {
        width: 210px;
    }


    .main-content {
        margin-left: 210px;

        width: calc(100% - 210px);

        padding: 24px;
    }


    .filter-form {
        flex-direction: column;

        align-items: stretch;
    }


    .record-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 640px) {

    .login-form-panel {
        padding: 28px 24px;
    }


    .login-mobile-brand {
        margin-bottom: 42px;
    }


    .login-heading h2 {
        font-size: 30px;
    }

    .app-layout {
        display: block;
    }


    .sidebar {
        position: static;

        width: 100%;

        height: auto;
    }


    .sidebar nav {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 4px;
    }


    .sidebar-bottom {
        margin-top: 10px;
    }


    .main-content {
        margin-left: 0;

        width: 100%;

        padding: 16px;
    }


    .card {
        padding: 20px;
    }


    .page-header h1 {
        font-size: 24px;
    }


    .expense-form-grid {
        grid-template-columns: 1fr;
    }


    .promoter-summary,
    .record-form,
    .staff-form {
        grid-template-columns: 1fr;
    }


    .group-add-form {
        flex-direction: column;
    }


    .record-submit {
        padding-bottom: 0;
    }


    .card-header {
        flex-direction: column;
    }


    .form-actions .btn {
        width: 100%;
    }

}