/* ============================================================================
   org.css — 事務所 (テナント) のオーナー名簿管理 (P1-7)
   manage.css / admin.css と同じ bubblegum トークン体系。自己完結。
   ============================================================================ */
:root {
    --b-bg:    #fff8fb;
    --b-bg2:   #ffeef5;
    --b-card:  #ffffff;
    --b-paper: #fdeef3;
    --b-ink:   #4a1f2e;
    --b-ink2:  #7e3a55;
    --b-ink3:  #b88aa0;
    --b-pink:  #ff2d7a;
    --b-pinkD: #d6075e;
    --b-pinkS: #ffe1ec;
    --b-pinkE: #ffa4c4;
    --b-yel:   #ffd24a;
    --b-yelS:  #fff0b8;
    --b-mint:  #9fe8c8;
    --b-mintD: #2a8c64;
    --b-lav:   #cdb7ff;
    --b-red:   #e53935;
    --b-redS:  #ffe3e1;
    --b-font:  "M PLUS Rounded 1c", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
    --b-fontT: "Zen Maru Gothic", "M PLUS Rounded 1c", system-ui, sans-serif;
}
[hidden] { display: none !important; }

html, body { background: var(--b-bg); color: var(--b-ink); font-family: var(--b-font); }
.cm-org-body {
    background: var(--b-bg); color: var(--b-ink); font-family: var(--b-font);
    font-weight: 500; min-height: 100vh; margin: 0; padding-top: 88px;
}

/* ---- Top bar ---- */
.cm-org-top {
    position: fixed; top: 0; left: 0; right: 0;
    height: 88px; background: var(--b-yelS);
    border-bottom: 3px solid var(--b-ink);
    box-shadow: 0 4px 0 var(--b-yel), 0 6px 16px rgba(74,31,46,0.12);
    display: flex; align-items: center; gap: 24px;
    padding: 0 28px; z-index: 150; box-sizing: border-box;
}
.cm-org-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--b-ink); }
.cm-org-logo-mark { font-size: 32px; line-height: 1; filter: drop-shadow(0 1px 0 var(--b-pinkD)); }
.cm-org-logo-text { display: flex; flex-direction: column; line-height: 1; }
.cm-org-logo-en { font-family: var(--b-fontT); font-size: 12px; font-weight: 900; letter-spacing: 5px; color: var(--b-pinkD); }
.cm-org-logo-ja { font-family: var(--b-fontT); font-size: 22px; font-weight: 900; color: var(--b-ink); margin-top: 4px; }
.cm-org-top-actions { margin-left: auto; display: flex; gap: 10px; }
.cm-org-back-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--b-ink); font-family: var(--b-font);
    font-size: 12px; font-weight: 800; text-decoration: none;
    padding: 6px 12px; border: 2px solid var(--b-ink); border-radius: 999px;
    background: var(--b-card); box-shadow: 2px 2px 0 var(--b-ink);
}
.cm-org-back-link:hover { background: var(--b-pinkS); }

/* ---- Layout ---- */
.cm-org-main { max-width: 1100px; margin: 0 auto; padding: 32px 28px 80px; }

.cm-org-guest { display: flex; justify-content: center; padding: 64px 0; }
.cm-org-guest-card {
    background: var(--b-card); border: 3px solid var(--b-ink); border-radius: 18px;
    box-shadow: 6px 6px 0 var(--b-pinkD); padding: 36px; max-width: 480px; text-align: center;
}
.cm-org-guest-card h1 { font-family: var(--b-fontT); font-weight: 900; color: var(--b-pinkD); margin: 0 0 12px; font-size: 22px; }
.cm-org-guest-card p { color: var(--b-ink2); font-size: 14px; line-height: 1.7; margin: 0 0 24px; }
.cm-org-cta-btn {
    display: inline-block; padding: 12px 28px; background: var(--b-pink); color: #fff;
    text-decoration: none; font-weight: 900; border-radius: 999px;
    border: 3px solid var(--b-ink); box-shadow: 4px 4px 0 var(--b-ink);
}

.cm-org-header { margin-bottom: 24px; }
.cm-org-title { font-family: var(--b-fontT); margin: 0 0 8px; line-height: 1.1; }
.cm-org-title-en { display: block; font-size: 14px; font-weight: 900; letter-spacing: 6px; color: var(--b-pinkD); }
.cm-org-title-ja { display: block; font-size: 26px; font-weight: 900; color: var(--b-ink); margin-top: 6px; }
.cm-org-sub { color: var(--b-ink2); font-size: 14px; margin: 0; }

/* ---- Org bar ---- */
.cm-org-org-bar {
    display: flex; gap: 12px; align-items: center;
    background: var(--b-card); border: 3px solid var(--b-ink); border-radius: 14px;
    padding: 12px 16px; box-shadow: 4px 4px 0 var(--b-ink); margin: 24px 0;
    flex-wrap: wrap;
}
.cm-org-select-label {
    display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px;
}
.cm-org-select-label select {
    font-family: var(--b-font); font-size: 14px; font-weight: 800; padding: 6px 12px;
    border: 2px solid var(--b-ink); border-radius: 10px; background: #fff;
}
.cm-org-org-bar > .cm-org-primary-btn { margin-left: auto; }

/* ---- Panels ---- */
.cm-org-panel {
    background: var(--b-card); border: 3px solid var(--b-ink); border-radius: 18px;
    box-shadow: 6px 6px 0 var(--b-pinkD); padding: 24px; margin-bottom: 20px;
}
.cm-org-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cm-org-panel-title { font-family: var(--b-fontT); font-size: 18px; font-weight: 900; color: var(--b-ink); margin: 0; }
.cm-org-count {
    background: var(--b-yel); color: var(--b-ink); padding: 2px 10px;
    border-radius: 999px; border: 2px solid var(--b-ink);
    font-size: 12px; font-weight: 900;
}
.cm-org-empty { color: var(--b-ink3); font-size: 13px; text-align: center; padding: 24px 0; margin: 0; }
.cm-org-note {
    background: var(--b-yelS); border: 2px dashed var(--b-ink);
    padding: 8px 12px; border-radius: 10px;
    font-size: 12px; color: var(--b-ink2); margin: 0 0 12px;
}

/* ---- Table ---- */
.cm-org-table-wrap { overflow-x: auto; }
.cm-org-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.cm-org-table th, .cm-org-table td {
    text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--b-pinkS);
}
.cm-org-table th {
    background: var(--b-paper); font-weight: 900; color: var(--b-ink2);
    font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase;
}
.cm-org-table tr:last-child td { border-bottom: none; }
.cm-org-cell-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.cm-org-role-tag {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 900; border: 2px solid var(--b-ink);
}
.cm-org-role-owner  { background: var(--b-yel); color: var(--b-ink); }
.cm-org-role-member { background: var(--b-mint); color: var(--b-mintD); }
.cm-org-inv-pending { background: var(--b-lav); color: var(--b-ink); }
.cm-org-inv-accepted { background: var(--b-mint); color: var(--b-mintD); }

/* ---- Buttons ---- */
.cm-org-primary-btn, .cm-org-ghost-btn, .cm-org-danger-btn, .cm-org-small-btn {
    font-family: var(--b-font); font-weight: 800; cursor: pointer;
    border: 2px solid var(--b-ink); border-radius: 999px;
    padding: 8px 16px; font-size: 13px; white-space: nowrap;
}
.cm-org-primary-btn { background: var(--b-pink); color: #fff; box-shadow: 3px 3px 0 var(--b-ink); }
.cm-org-primary-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--b-ink); }
.cm-org-ghost-btn { background: var(--b-card); color: var(--b-ink); }
.cm-org-ghost-btn:hover { background: var(--b-pinkS); }
.cm-org-danger-btn { background: var(--b-red); color: #fff; }
.cm-org-danger-btn:hover { filter: brightness(1.05); }
.cm-org-small-btn { padding: 5px 12px; font-size: 12px; background: var(--b-card); }
.cm-org-small-btn:hover { background: var(--b-pinkS); }

/* ---- Modal ---- */
.cm-org-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.cm-org-modal-backdrop { position: absolute; inset: 0; background: rgba(74,31,46,0.6); }
.cm-org-modal-body {
    position: relative; background: var(--b-card); color: var(--b-ink);
    border: 3px solid var(--b-ink); border-radius: 18px;
    box-shadow: 6px 6px 0 var(--b-pinkD);
    padding: 28px; width: min(720px, 100%); max-height: 90vh; overflow-y: auto;
}
.cm-org-modal-narrow { width: min(480px, 100%); }
.cm-org-modal-close {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px; background: var(--b-pink); color: #fff;
    border: 2px solid var(--b-ink); border-radius: 50%;
    font-size: 18px; font-weight: 900; cursor: pointer; line-height: 1; padding: 0;
}
.cm-org-modal h2 { font-family: var(--b-fontT); margin: 0 0 8px; font-size: 20px; font-weight: 900; color: var(--b-pinkD); }
.cm-org-modal-sub { color: var(--b-ink2); font-size: 13px; margin: 0 0 16px; line-height: 1.6; }

.cm-org-form { display: flex; flex-direction: column; gap: 12px; }
.cm-org-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.cm-org-field > span { font-weight: 800; color: var(--b-ink2); font-size: 12px; }
.cm-org-field input, .cm-org-field select, .cm-org-field textarea {
    font-family: var(--b-font); font-size: 14px;
    padding: 8px 12px; border: 2px solid var(--b-ink); border-radius: 10px;
    background: #fff;
}
.cm-org-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* ---- Toast ---- */
.cm-org-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--b-ink); color: #fff;
    padding: 10px 20px; border-radius: 999px; font-weight: 800; font-size: 13px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.3); z-index: 300;
}
.cm-org-toast.is-error { background: var(--b-red); }
.cm-org-toast.is-success { background: var(--b-mintD); }

@media (max-width: 720px) {
    .cm-org-top { height: auto; padding: 12px 16px; flex-wrap: wrap; }
    .cm-org-body { padding-top: 110px; }
    .cm-org-main { padding: 20px 16px 60px; }
    .cm-org-panel { padding: 16px; }
    .cm-org-org-bar > .cm-org-primary-btn { margin-left: 0; width: 100%; }
}