:root{ /* Neutral, white-based palette (Linear/Notion-ish) */ --bg:#f7f8fa; /* page background (cool off-white) */ --panel:#ffffff; /* cards (white) */ --sidebar:#f4f5f7; /* sidebar (light gray) */ --topbar:#ffffff; /* top bar */ --hover:#eef0f3; /* neutral hover */ --soft:#f6f7f9; /* subtle fill */ --line:#e6e8ec; /* neutral border */ --ink:#1f2329; --muted:#8b919c; --accent:#3b6ef5; --accent-hover:#2f5fe0; --accent-soft:#eaf1ff; --accent-border:#cfdeff; --top:#ef4444; --semi:#f59e0b; --done:#aab1bd; --shadow:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.04); --radius:8px; } /* Dark theme (toggled from account settings via ) */ :root[data-theme="dark"]{ --bg:#16181d; --panel:#1e2127; --sidebar:#191c21; --topbar:#1e2127; --hover:#272b33; --soft:#23272e; --line:#2e333c; --ink:#e7e9ee; --muted:#8b919c; --accent:#5b86f7; --accent-hover:#6f95f8; --accent-soft:#23304d; --accent-border:#324a78; --top:#f87171; --semi:#fbbf24; --done:#6b7280; --shadow:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.3); } /* Dark theme component touch-ups (form text + warm highlights) */ :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select{ color:var(--ink); background:transparent; } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder{ color:var(--muted); } :root[data-theme="dark"] .comment{ background:#2a2614; border-color:#43401f; } :root[data-theme="dark"] .ws-invite{ background:#2a2614; border-color:#43401f; } :root[data-theme="dark"] .badge-warn{ background:#3a2f12; border-color:#5a4a1e; color:#e8c97a; } :root[data-theme="dark"] .mini-btn.danger:hover, :root[data-theme="dark"] .kebab-item.danger:hover{ background:#3a1f1f; } :root[data-theme="dark"] .auth-overlay{ background:linear-gradient(160deg,#1b1f2b,#16181d); } *{box-sizing:border-box;} body{ margin:0; font-family:"Inter",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Segoe UI",sans-serif; background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* boot splash (visible until JS reveals the app) */ #bootSplash{position:fixed; inset:0; z-index:10000; background:radial-gradient(120% 120% at 50% 0%, #ffffff 0%, var(--bg) 70%); display:flex; align-items:center; justify-content:center; transition:opacity .35s ease, visibility .35s ease;} #bootSplash.hide{opacity:0; visibility:hidden; pointer-events:none;} .boot-inner{display:flex; flex-direction:column; align-items:center; gap:20px; animation:boot-rise .5s cubic-bezier(.2,.7,.3,1) both;} .boot-logo{font-size:21px; font-weight:800; color:var(--ink); letter-spacing:.01em;} .boot-spinner{width:30px; height:30px; border:3px solid #ececef; border-top-color:var(--accent); border-radius:50%; animation:boot-spin .7s cubic-bezier(.5,.1,.5,.9) infinite;} .boot-hint{font-size:12px; color:var(--muted); letter-spacing:.02em;} @keyframes boot-spin{to{transform:rotate(360deg);}} @keyframes boot-rise{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}} header{ background:var(--panel); border-bottom:1px solid var(--line); padding:12px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; position:sticky; top:0; z-index:20; } header h1{font-size:16px; margin:0; font-weight:700; letter-spacing:.02em;} /* ---- Workspace switcher (Notion-style left drawer) ---- */ .ws-switcher{position:relative; display:flex; align-items:center;} .ws-trigger{ display:flex; align-items:center; gap:8px; cursor:pointer; padding:4px 6px; border-radius:8px; } .ws-trigger:hover{background:var(--hover);} .ws-current{ font-size:12px; color:var(--accent); font-weight:700; background:var(--accent-soft); border:1px solid var(--accent-border); border-radius:6px; padding:2px 8px; } .ws-caret{font-size:10px; color:var(--muted);} /* drawer overlay + sliding panel */ .ws-overlay{ position:fixed; inset:0; background:rgba(20,30,50,.28); z-index:50; opacity:0; pointer-events:none; transition:opacity .2s ease; } .ws-overlay.open{opacity:1; pointer-events:auto;} .ws-drawer{ position:fixed; top:0; left:0; height:100%; width:280px; background:var(--panel); z-index:60; box-shadow:2px 0 16px rgba(20,30,50,.18); transform:translateX(-100%); transition:transform .22s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; } .ws-drawer.open{transform:translateX(0);} .ws-drawer-head{ padding:16px 16px 10px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; } .ws-drawer-head .t{font-size:13px; font-weight:700;} .ws-drawer-head .x{margin-left:auto;} .ws-drawer-body{padding:8px; overflow-y:auto; flex:1;} .ws-menu ul{list-style:none; margin:0; padding:0;} .ws-menu li{display:flex; align-items:center; gap:6px; padding:9px 10px; border-radius:8px; cursor:pointer;} .ws-menu li:hover{background:var(--hover);} .ws-menu li.active{background:var(--accent-soft);} .ws-menu li .ws-dot{width:8px; height:8px; border-radius:50%; background:#cbd2db; flex:none;} .ws-menu li.active .ws-dot{background:var(--accent);} .ws-menu li .ws-li-name{flex:1; font-size:14px;} .ws-menu li.active .ws-li-name{color:var(--accent); font-weight:700;} /* oversight sub-entry, nested under its team row */ .ws-menu li.ws-sub{padding-left:24px; margin-top:-2px;} .ws-menu li.ws-sub .ws-li-name{font-size:13px; color:var(--muted);} .ws-menu li.ws-sub:hover .ws-li-name{color:var(--ink);} .ws-menu li.ws-sub.active .ws-li-name{color:var(--accent); font-weight:700;} .ws-add{ width:100%; margin-top:6px; border:1px dashed var(--line); background:var(--panel); border-radius:8px; padding:10px; cursor:pointer; font-size:13px; color:var(--accent); } .ws-add:hover{background:var(--accent-soft);} .ws-group-head{font-size:10px; color:var(--muted); font-weight:700; padding:10px 8px 4px; letter-spacing:.04em;} .ws-role{ font-size:10px; color:var(--muted); background:var(--hover); border-radius:5px; padding:1px 6px; flex:none; } .ws-menu li.active .ws-role{background:var(--accent-soft); color:var(--accent);} .badge-warn{ font-size:10px; color:#92600a; background:#fff3d6; border:1px solid #fde9b8; border-radius:5px; padding:1px 6px; flex:none; } .ws-members{font-size:10px; color:var(--muted); flex:none;} .ws-invite{background:#fffbeb; border:1px solid #fde9b8;} .mini-btn{ border:1px solid var(--line); background:var(--panel); border-radius:6px; padding:4px 8px; font-size:11px; cursor:pointer; color:var(--ink); flex:none; } .mini-btn:hover{background:var(--hover);} .mini-btn.primary{background:var(--accent); color:#fff; border-color:var(--accent);} .mini-btn.primary:hover{background:var(--accent-hover);} .mini-btn.danger{color:#d33; border-color:#f3c2c2;} .mini-btn.danger:hover{background:#fdeaea;} .mini-btn.block{width:100%; margin-top:10px; padding:9px;} /* ---- Share / members modal ---- */ .share-overlay{ position:fixed; inset:0; background:rgba(20,30,50,.34); z-index:70; display:none; align-items:flex-start; justify-content:center; padding:48px 16px; overflow:auto; } .share-overlay.open{display:flex;} .share-card{ width:100%; max-width:440px; background:var(--panel); border-radius:14px; box-shadow:0 12px 40px rgba(20,30,50,.2); padding:18px 18px 22px; } .share-head{display:flex; align-items:center; gap:10px; margin-bottom:6px;} .share-head strong{font-size:16px;} .share-head .icon-btn{margin-left:auto;} /* labeled back button in overlay headers (left of the title) */ .ws-back{ flex:none; font-size:13px; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:6px; padding:4px 8px; cursor:pointer; white-space:nowrap; } .ws-back:hover{background:var(--hover); color:var(--ink);} .share-section-title{font-size:12px; font-weight:700; color:var(--ink); margin:16px 0 8px; padding-top:10px; border-top:1px solid var(--line);} .share-section-title.danger{color:#d33; border-top-color:#f3c2c2;} .share-sub{font-size:11px; color:var(--muted); margin:6px 2px;} .share-row{display:flex; gap:6px; align-items:center; margin:6px 0;} /* account: 2FA + danger zone */ .danger-label{color:#d33 !important;} .tfa-body{margin:6px 0;} .tfa-help{font-size:12px; color:var(--muted); margin:6px 2px; word-break:break-all;} .tfa-qr-wrap{display:flex; justify-content:center; margin:10px 0;} .tfa-qr{display:block; background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px; image-rendering:pixelated;} .tfa-secret{display:flex; align-items:center; gap:8px; margin:8px 0;} .tfa-secret code{ flex:1; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; letter-spacing:1px; background:var(--soft); border:1px solid var(--line); border-radius:6px; padding:6px 8px; word-break:break-all; } .share-input{ flex:1; min-width:0; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13px; font-family:inherit; } .share-input:focus{outline:none; border-color:var(--accent);} .share-input:disabled{background:var(--soft); color:var(--muted); cursor:not-allowed;} /* account settings modal */ .acc-field{display:flex; flex-direction:column; gap:4px; margin:10px 0;} .acc-field > label{font-size:12px; color:var(--muted); font-weight:600;} /* workspace-create: multi-item ToDo seed input */ .ws-td-list{display:flex; flex-direction:column; gap:6px;} .ws-td-row{display:flex; align-items:center; gap:6px;} .ws-td-row > .share-input{flex:1; min-width:0;} .ws-td-row > .icon-btn{flex:none;} .ws-td-add{margin-top:6px;} .acc-check{display:flex; align-items:center; gap:8px; font-size:13px; margin:8px 0; cursor:pointer;} .acc-check input{flex:none; margin:0;} .acc-actions{margin-top:16px; display:flex; justify-content:flex-end;} /* account settings: two-pane (left category nav + right content) */ #accountCard{max-width:760px;} .acc-body{display:flex; gap:18px; margin-top:10px; align-items:stretch; min-height:400px;} .acc-nav{flex:0 0 178px; display:flex; flex-direction:column; gap:2px; border-right:1px solid var(--line); padding-right:8px;} .acc-nav-item{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; font-size:13px; color:var(--ink);} .acc-nav-item:hover{background:var(--hover);} .acc-nav-item.active{background:var(--accent-soft); color:var(--accent); font-weight:700;} .acc-nav-item.danger{color:#d33;} .acc-nav-item.danger.active{background:#fdeaea;} .acc-nav-ic{width:18px; text-align:center; flex:none;} .acc-content{flex:1; min-width:0;} .acc-pane-title{font-size:16px; font-weight:700; margin:2px 0 14px;} .acc-pane-title.danger{color:#d33;} @media(max-width:640px){ #accountCard{max-width:440px;} .acc-body{flex-direction:column; min-height:0;} .acc-nav{flex:none; flex-direction:row; flex-wrap:wrap; gap:4px; border-right:none; border-bottom:1px solid var(--line); padding-right:0; padding-bottom:10px;} } .role-select{border:1px solid var(--line); border-radius:8px; padding:7px 6px; font-size:12px; background:var(--panel); flex:none;} .member-row{display:flex; align-items:center; gap:8px; padding:6px 2px;} .member-email{flex:1; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .share-hr{border:none; border-top:1px solid var(--line); margin:16px 0 4px;} /* ---- Report modal ---- */ .report-card{max-width:580px;} .report-range{display:flex; align-items:center; gap:8px; margin:10px 0 6px;} .report-range .share-input{flex:none; width:auto;} .report-presets{display:flex; gap:6px; margin:2px 0 8px;} .report-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0;} .report-stat{border:1px solid var(--line); border-radius:10px; padding:10px 8px; text-align:center; background:var(--soft);} .report-stat .rs-val{font-size:18px; font-weight:700; color:var(--ink);} .report-stat .rs-lbl{font-size:11px; color:var(--muted); margin-top:2px;} .report-table{width:100%; border-collapse:collapse; margin-top:12px; font-size:12px;} .report-table th, .report-table td{border:1px solid var(--line); padding:5px 8px; text-align:right; white-space:nowrap;} .report-table th:first-child, .report-table td:first-child{text-align:left;} .report-table thead th{background:var(--soft); font-weight:700; color:var(--ink);} .report-table .report-total td{font-weight:700; background:var(--soft);} .report-empty{font-size:13px; color:var(--muted); padding:18px 4px;} .report-actions{display:flex; gap:8px; margin-top:16px;} /* ---- Print (used by the report's "印刷 / PDF" button) ---- */ @media print{ header, main, .ws-overlay, .ws-drawer, .auth-overlay, #shareOverlay{display:none !important;} #reportOverlay{position:static !important; display:block !important; background:var(--panel) !important; padding:0 !important; overflow:visible !important;} #reportOverlay .report-card{max-width:none !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important;} .report-actions, .report-presets, #reportOverlay .icon-btn{display:none !important;} .report-range .share-input{border:none; padding:0;} } /* ---- Month calendar ---- */ .cal{padding:10px 10px 4px;} .cal-head{display:flex; align-items:center; gap:4px; margin-bottom:6px;} .cal-head .m{font-size:13px; font-weight:700;} .cal-head .nav{border:1px solid var(--line); background:var(--panel); border-radius:6px; cursor:pointer; width:24px; height:24px; line-height:1; color:var(--ink);} .cal-head .nav:hover{background:var(--hover);} .cal-head .sp{margin-left:auto;} .cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;} .cal-grid .wd{font-size:10px; color:var(--muted); text-align:center; padding:2px 0;} .cal-grid .wd.sun{color:#e06464;} .cal-grid .wd.sat{color:#5b8def;} .cal-cell{ position:relative; text-align:center; font-size:12px; padding:5px 0; border-radius:6px; cursor:pointer; border:1px solid transparent; color:var(--ink); } .cal-cell.out{color:#c9cfd8; cursor:default;} .cal-cell:not(.out):hover{background:var(--hover);} .cal-cell.today{border-color:var(--accent); font-weight:700;} .cal-cell.active{background:var(--accent); color:#fff;} .cal-cell .dot{ position:absolute; bottom:2px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--accent); } .cal-cell.active .dot{background:var(--panel);} .ticket-nav{display:flex; align-items:center; gap:8px; margin-left:auto;} .ticket-nav button, .btn{ border:1px solid var(--line); background:var(--panel); border-radius:8px; padding:6px 10px; cursor:pointer; font-size:13px; color:var(--ink); transition:.12s; } .ticket-nav button:hover,.btn:hover{background:var(--hover);} .btn-primary{background:var(--accent); color:#fff; border-color:var(--accent);} .btn-primary:hover{background:var(--accent-hover);} input[type=date]{border:1px solid var(--line); border-radius:8px; padding:5px 8px; font-size:13px;} .today-badge{font-size:11px; color:var(--muted);} main{display:grid; grid-template-columns:200px 1.4fr 1fr; gap:16px; padding:16px 20px; align-items:start;} @media(max-width:1000px){ main{grid-template-columns:1fr;} } /* read-only views: 全体混合 / メンバー状況 */ .readonly-view{padding:16px 20px; max-width:760px; margin:0 auto;} /* the member oversight view is two-pane, so it spans the full width */ #overviewView{max-width:none;} .ro-head{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap;} .ro-head h2{font-size:18px; margin:0;} .ro-sub{font-size:12px; color:var(--muted);} .ro-card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:12px;} .ro-card-head{display:flex; align-items:center; gap:8px; margin-bottom:6px;} .ro-ws-name, .ov-name{font-weight:700; font-size:14px;} .ro-badge{font-size:10px; border-radius:5px; padding:1px 6px; flex:none;} .ro-badge.team{background:#eafaf0; color:#15803d;} .ro-badge.personal{background:var(--hover); color:var(--muted);} .ro-prog, .ov-prog{margin-left:auto; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums;} .ro-tasks{list-style:none; margin:0; padding:0;} .ro-task{display:flex; align-items:flex-start; gap:8px; padding:4px 4px; font-size:13px; border-radius:6px;} .ro-task.semi{background:var(--soft);} .ro-task.done .ro-text{text-decoration:line-through; color:var(--done);} .ro-check{flex:none; color:var(--muted);} .ro-text{flex:1; min-width:0; white-space:pre-wrap; word-break:break-word;} .ro-est{flex:none; font-size:11px; color:var(--muted);} .ro-empty{color:var(--muted); font-size:13px; padding:8px 4px;} /* overview member rows */ .ov-row{cursor:pointer;} .ov-bar{height:6px; border-radius:4px; background:#eef1f4; overflow:hidden; margin:2px 0 8px;} .ov-bar-fill{height:100%; background:var(--accent); transition:width .2s;} /* drawer: combined-view entry */ .ws-menu li.ws-aggregate{margin-bottom:2px;} /* ---- Date list sidebar ---- */ ul.daylist{list-style:none; margin:0; padding:6px;} ul.daylist li{ padding:8px 10px; border-radius:8px; cursor:pointer; display:flex; align-items:baseline; gap:8px; border:1px solid transparent; } ul.daylist li:hover{background:var(--hover);} ul.daylist li.active{background:var(--accent-soft); border-color:var(--accent-border);} ul.daylist li.active .d-date{color:var(--accent);} .d-date{font-weight:700; font-size:13px;} .d-meta{font-size:11px; color:var(--muted); margin-left:auto;} .d-today{font-size:10px; color:#fff; background:var(--accent); border-radius:4px; padding:1px 5px;} .panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;} .panel-head{padding:12px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px;} .panel-head h2{font-size:14px; margin:0; font-weight:700;} .panel-head .sub{font-size:11px; color:var(--muted);} .panel-body{padding:10px 12px;} /* ---- Left: detailed tasks ---- */ ul.tasks, ul.subtasks{list-style:none; margin:0; padding:0;} ul.subtasks{margin-left:26px; border-left:2px dashed var(--line); padding-left:6px; margin-top:4px;} li.task{margin:3px 0; border-radius:8px;} .task-row{ display:flex; align-items:center; gap:7px; padding:6px 8px; border:1px solid transparent; border-radius:8px; } .task-row:hover{background:var(--soft); border-color:var(--line);} /* 準（semi）タスクは背景を薄い灰色に */ .task-row.semi{background:#f1f2f4;} .task-row.semi:hover{background:#eaecef;} /* drag-drop indicators */ .task-row.di-before{box-shadow:inset 0 2px 0 0 var(--accent);} .task-row.di-after{box-shadow:inset 0 -2px 0 0 var(--accent);} .task-row.di-child{background:var(--accent-soft); border-color:var(--accent); border-style:dashed;} .task-row.di-child::after{content:"子タスクにする"; position:absolute; right:8px; font-size:10px; color:var(--accent); pointer-events:none;} .task-row{position:relative;} .handle{cursor:grab; color:#cbd2db; font-size:14px; user-select:none; padding:0 4px;} .handle:hover{color:var(--accent);} .handle:active{cursor:grabbing;} input[type=checkbox]{width:16px; height:16px; cursor:pointer; accent-color:var(--accent);} .task-text{ flex:1; border:none; background:transparent; font-size:14px; color:var(--ink); padding:2px 4px; border-radius:6px; min-width:60px; font-family:inherit; resize:none; overflow:hidden; line-height:1.4; } .task-text:focus{outline:none; background:var(--accent-soft);} .task-row.done .task-text{text-decoration:line-through; color:var(--done);} .icon-btn:disabled{opacity:.25; cursor:default;} .icon-btn:disabled:hover{background:transparent; color:var(--muted);} .est, .actual{ width:52px; flex:none; text-align:right; border:1px solid var(--line); border-radius:6px; padding:3px 4px; font-size:12px; color:var(--ink); } /* 実際時間は予定時間と区別できるよう薄いアクセント色の枠に */ .actual{border-color:var(--accent); background:var(--accent-soft);} .est-unit{font-size:11px; color:var(--muted); margin-left:-3px;} .prio-btn{ border:1px solid var(--line); background:var(--panel); border-radius:6px; font-size:11px; padding:3px 6px; cursor:pointer; white-space:nowrap; width:36px; text-align:center; flex:none; } .prio-btn.top{background:var(--panel); color:var(--ink); border-color:var(--line);} /* 優 = 無色（既定） */ .prio-btn.semi{background:#9aa3af; color:#fff; border-color:#9aa3af;} /* 準 = 灰 */ .icon-btn{ border:none; background:transparent; cursor:pointer; color:var(--muted); font-size:14px; border-radius:6px; flex:none; width:28px; height:26px; display:inline-flex; align-items:center; justify-content:center; padding:0; } .icon-btn:hover{background:var(--hover); color:var(--ink);} .icon-btn.active{color:var(--accent);} .comment{ margin:2px 0 4px 32px; padding:6px 8px; background:#fffbeb; border:1px solid #fde9b8; border-radius:6px; font-size:12px; } .comment textarea{width:100%; border:none; background:transparent; resize:vertical; font-size:12px; font-family:inherit; min-height:34px; color:#5a4a17;} .comment textarea:focus{outline:none;} .add-row{display:flex; gap:8px; padding:8px 4px 4px;} .add-row input{flex:1; border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:13px;} .add-row input:focus{outline:none; border-color:var(--accent);} /* ---- Right: AfterCheck (simple todo) ---- */ ul.todos{list-style:none; margin:0; padding:0;} li.todo{display:flex; align-items:flex-start; gap:8px; padding:7px 8px; border-radius:8px;} li.todo:hover{background:var(--soft);} li.todo input[type=checkbox]{margin-top:3px;} li.todo .todo-text{ flex:1; border:none; background:transparent; font-size:14px; padding:2px 4px; border-radius:6px; font-family:inherit; resize:none; overflow:hidden; line-height:1.4; } li.todo .todo-text:focus{outline:none; background:var(--accent-soft);} li.todo.done .todo-text{text-decoration:line-through; color:var(--done);} .add-row textarea{ flex:1; border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:13px; font-family:inherit; resize:none; overflow:hidden; line-height:1.4; min-height:36px; } .add-row textarea:focus{outline:none; border-color:var(--accent);} .empty{color:var(--muted); font-size:12px; padding:14px 6px; text-align:center;} .summary{font-size:11px; color:var(--muted); padding:4px 8px;} /* ---- Account / header user area ---- */ .user-area{display:flex; align-items:center; gap:10px; margin-left:16px;} .user-email{font-size:12px; color:var(--muted);} .sync-status{font-size:11px; color:var(--muted); min-width:52px; text-align:right;} /* ---- Auth overlay ---- */ .auth-overlay{ position:fixed; inset:0; background:linear-gradient(160deg,#eef2fb,#f6f7f9); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; } .auth-card{ width:100%; max-width:360px; background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 10px 40px rgba(20,30,50,.12); padding:26px 24px; } .auth-card h1{font-size:20px; margin:0 0 4px; text-align:center;} .auth-card .lead{font-size:12px; color:var(--muted); text-align:center; margin-bottom:18px;} .auth-tabs{display:flex; gap:6px; background:var(--hover); border-radius:10px; padding:4px; margin-bottom:16px;} .auth-tabs button{ flex:1; border:none; background:transparent; padding:8px; border-radius:8px; cursor:pointer; font-size:13px; color:var(--muted); font-weight:600; } .auth-tabs button.active{background:var(--panel); color:var(--ink); box-shadow:var(--shadow);} .auth-field{margin-bottom:12px;} .auth-field label{display:block; font-size:11px; color:var(--muted); margin-bottom:4px;} .auth-field input{ width:100%; border:1px solid var(--line); border-radius:9px; padding:10px 12px; font-size:14px; } .auth-field input:focus{outline:none; border-color:var(--accent);} .auth-submit{ width:100%; border:none; background:var(--accent); color:#fff; border-radius:9px; padding:11px; font-size:14px; font-weight:700; cursor:pointer; margin-top:4px; } .auth-submit:hover{background:var(--accent-hover);} .auth-submit:disabled{opacity:.6; cursor:default;} .auth-error{color:#d33; font-size:12px; min-height:16px; margin-top:10px; text-align:center;} /* social login */ .auth-divider{display:flex; align-items:center; gap:10px; margin:16px 0 12px; color:var(--muted); font-size:11px;} .auth-divider::before, .auth-divider::after{content:""; flex:1; height:1px; background:var(--line);} .auth-social{display:flex; flex-direction:column; gap:8px;} .auth-social-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:10px 12px; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; border:1px solid var(--line); background:var(--panel); color:var(--ink); font-family:inherit; } .auth-social-btn:hover{background:var(--soft);} .auth-social-btn.google::before{content:"G"; font-weight:900; color:#4285f4;} .auth-social-btn.github{background:#1f2328; color:#fff; border-color:#1f2328;} .auth-social-btn.github:hover{background:#32383f;} /* ---- Floating "⋯" (kebab) menu ---- */ .kebab-menu{ position:fixed; z-index:200; min-width:168px; padding:5px; background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 28px rgba(20,30,50,.16); animation:kebab-in .12s ease; } @keyframes kebab-in{from{opacity:0; transform:translateY(-3px);} to{opacity:1; transform:none;}} .kebab-item{ display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px; border:none; background:transparent; border-radius:7px; cursor:pointer; font-size:13px; color:var(--ink); font-family:inherit; text-align:left; } .kebab-item:hover{background:var(--hover);} .kebab-item.danger{color:#d33;} .kebab-item.danger:hover{background:#fdeaea;} .kebab-ic{width:16px; text-align:center; flex:none; font-size:13px; opacity:.85;} .kebab-sep{height:1px; background:var(--line); margin:4px 6px;} /* workspace row "⋯" — quiet until hover */ .ws-menu li{position:relative;} .ws-more{opacity:0; transition:opacity .12s;} .ws-menu li:hover .ws-more{opacity:1;} @media(hover:none){ .ws-more{opacity:.6;} } /* ---- Cloudflare-style touch-ups ---- */ header h1{font-weight:800;} .btn-primary{box-shadow:0 1px 2px rgba(59,110,245,.25);} .btn:focus-visible, .mini-btn:focus-visible, .auth-submit:focus-visible{ outline:2px solid var(--accent-border); outline-offset:1px; } .panel{transition:box-shadow .15s, border-color .15s;} .panel:hover{box-shadow:0 2px 8px rgba(15,23,42,.07);} /* ============================================================ Cloudflare-style app shell: left sidebar + top bar + content ============================================================ */ .app-shell{display:flex; min-height:100vh;} /* ---- Left sidebar (persistent on desktop) ---- */ .sidebar{ width:248px; flex:none; background:var(--sidebar); border-right:1px solid var(--line); display:flex; flex-direction:column; gap:4px; padding:14px 12px; position:sticky; top:0; height:100vh; overflow-y:auto; } .sidebar-brand{font-size:16px; font-weight:800; padding:4px 8px 8px; letter-spacing:.01em;} .sidebar-section-label{ font-size:10px; font-weight:700; color:var(--muted); letter-spacing:.06em; padding:8px 8px 2px; text-transform:uppercase; } .sidebar-nav{flex:1; overflow-y:auto; min-height:0;} .sidebar-nav ul{list-style:none; margin:0; padding:0;} .sidebar-actions{display:flex; flex-direction:column; gap:6px; padding-top:10px; margin-top:6px; border-top:1px solid var(--line);} .sidebar-actions .ws-add{margin-top:0;} .sidebar-overlay{display:none;} /* ---- Main column ---- */ .main-col{flex:1; min-width:0; display:flex; flex-direction:column;} /* top bar */ .topbar{ background:var(--topbar); border-bottom:1px solid var(--line); flex-wrap:nowrap; padding:9px 18px; display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:20; } .nav-toggle{display:none; font-size:18px;} .topbar-title{ font-size:15px; font-weight:700; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .topbar-spacer{flex:1;} /* user menu (account / logout) */ .user-area{position:relative; margin-left:0; display:flex; align-items:center; gap:8px;} .user-menu-btn{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:4px 10px 4px 4px; cursor:pointer; font-family:inherit; color:var(--ink); } .user-menu-btn:hover{background:var(--hover);} .user-avatar{ width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; flex:none; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; } .user-area .user-email{font-size:13px; color:var(--ink); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .user-dropdown{ position:absolute; top:calc(100% + 6px); right:0; min-width:196px; padding:5px; background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 28px rgba(70,55,25,.16); display:none; z-index:80; } .user-dropdown.open{display:block; animation:kebab-in .12s ease;} /* ---- Sidebar footer: account lives bottom-left ---- */ .sidebar-footer{position:relative; margin-top:6px; padding-top:8px; border-top:1px solid var(--line);} .sidebar-footer .user-area{display:block; margin:0;} .sidebar-footer .user-menu-btn{ width:100%; justify-content:flex-start; border-radius:9px; border-color:transparent; background:transparent; padding:7px 8px; } .sidebar-footer .user-menu-btn:hover{background:var(--hover);} .sidebar-footer .user-email{flex:1; text-align:left; min-width:0;} .sidebar-footer .ws-caret{margin-left:auto;} /* popover opens upward from the footer */ .sidebar-footer .user-dropdown{ top:auto; bottom:calc(100% + 6px); left:0; right:0; min-width:0; } /* ---- New-workspace modal: type cards ---- */ .ws-kind-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:6px 0 4px;} .ws-kind-card{ border:1.5px solid var(--line); border-radius:12px; padding:14px 12px; cursor:pointer; background:var(--panel); text-align:left; font-family:inherit; color:var(--ink); display:flex; flex-direction:column; gap:4px; transition:border-color .12s, background .12s; } .ws-kind-card:hover{background:var(--soft);} .ws-kind-card.selected{border-color:var(--accent); background:var(--accent-soft);} .ws-kind-ic{font-size:22px;} .ws-kind-name{font-size:14px; font-weight:700;} .ws-kind-desc{font-size:11px; color:var(--muted); line-height:1.45;} /* ---- Segmented control (e.g. theme switch) ---- */ .seg{display:inline-flex; background:var(--hover); border-radius:9px; padding:3px; gap:3px;} .seg-btn{ border:none; background:transparent; padding:6px 14px; border-radius:7px; cursor:pointer; font-size:12px; font-weight:600; color:var(--muted); font-family:inherit; } .seg-btn.active{background:var(--panel); color:var(--ink); box-shadow:var(--shadow);} /* page sub-header: date nav + page actions */ .page-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 18px 0;} .page-bar .ticket-nav{margin-left:0;} .page-actions{margin-left:auto; display:flex; gap:8px;} /* content area */ .content{flex:1; min-height:0;} .content main{padding-top:12px;} /* ---- Mobile: sidebar becomes a slide-over ---- */ @media(max-width:860px){ .sidebar{ position:fixed; top:0; left:0; height:100vh; transform:translateX(-100%); transition:transform .22s cubic-bezier(.4,0,.2,1); z-index:60; box-shadow:2px 0 18px rgba(70,55,25,.18); } .sidebar.open{transform:translateX(0);} .sidebar-overlay{ display:block; position:fixed; inset:0; background:rgba(50,40,20,.32); z-index:55; opacity:0; pointer-events:none; transition:opacity .2s ease; } .sidebar-overlay.open{opacity:1; pointer-events:auto;} .nav-toggle{display:inline-flex;} } /* ============================================================ メンバー状況 — richer team overview dashboard ============================================================ */ .ov-summary{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px;} .ov-stat{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 16px; display:flex; flex-direction:column; justify-content:center; gap:2px; min-height:58px; } .ov-stat.accent{background:var(--accent-soft); border-color:var(--accent-border);} .ov-stat-val{font-size:19px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.1;} .ov-stat.accent .ov-stat-val{color:var(--accent);} .ov-stat-lbl{font-size:11px; color:var(--muted); order:-1; font-weight:600;} .ov-card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:10px;} .ov-card.empty{opacity:.72;} .ov-head{display:flex; align-items:center; gap:10px; cursor:pointer;} .ov-avatar.lg{width:38px; height:38px; font-size:15px;} /* two-pane oversight: member list (left) + selected member (right) */ .ov-split{display:flex; gap:16px; align-items:flex-start;} .ov-list{ flex:none; width:280px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:6px; display:flex; flex-direction:column; gap:2px; } .ov-li{border:1px solid transparent; border-radius:9px; padding:9px 10px; cursor:pointer; transition:background .12s;} .ov-li:hover{background:var(--hover);} .ov-li.active{background:var(--accent-soft); border-color:var(--accent-border);} .ov-li.empty .ov-avatar{background:var(--done);} .ov-li-top{display:flex; align-items:center; gap:9px;} .ov-li .ov-bar{height:5px; margin:7px 0 0;} .ov-li.empty{opacity:.85;} .ov-pane{flex:1; min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 20px; min-height:340px;} .ov-pane-head{display:flex; align-items:center; gap:12px; margin-bottom:14px;} .ov-name.big{font-size:16px;} @media (max-width:760px){ .ov-split{flex-direction:column;} .ov-list{width:100%; flex-direction:row; flex-wrap:nowrap; overflow-x:auto;} .ov-list .ov-li{min-width:170px; flex:none;} .ov-pane{width:100%;} } /* member-detail tabs */ .ov-tabs{display:flex; gap:6px; margin:4px 0 16px; border-bottom:1px solid var(--line);} .ov-tab{ appearance:none; background:none; border:none; cursor:pointer; padding:8px 12px; margin-bottom:-1px; font-size:13px; font-weight:700; color:var(--muted); border-bottom:2px solid transparent; } .ov-tab:hover{color:var(--ink);} .ov-tab.active{color:var(--accent); border-bottom-color:var(--accent);} .ov-chips.standalone{margin-bottom:14px;} .ov-avatar{ width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; flex:none; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; } .ov-card.empty .ov-avatar{background:var(--done);} .ov-id{display:flex; flex-direction:column; min-width:0; flex:1;} .ov-name{font-weight:700; font-size:14px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .ov-meta{font-size:11px; color:var(--muted);} .ov-prog{font-size:13px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap;} .ov-card.empty .ov-prog{color:var(--muted); font-weight:600;} .ov-caret{font-size:11px; color:var(--muted); transition:transform .15s; flex:none;} .ov-caret.open{transform:rotate(90deg);} .ov-bar{height:7px; border-radius:5px; background:var(--hover); overflow:hidden; margin:9px 0;} .ov-bar-fill{height:100%; background:var(--accent); border-radius:5px; transition:width .25s;} .ov-bar-fill.done{background:#3fae6b;} .ov-chips{display:flex; flex-wrap:wrap; gap:6px;} .ov-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); background:var(--soft); border:1px solid var(--line); border-radius:999px; padding:3px 10px; } .ov-chip b{color:var(--ink); font-variant-numeric:tabular-nums;} .ov-chip.top b{color:var(--accent);} .ov-chip-lbl{color:var(--muted);} .ov-detail{margin-top:12px; padding-top:10px; border-top:1px solid var(--line);} .ov-detail-title{font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.04em; margin:12px 0 6px;} .ov-detail-title:first-child{margin-top:0;} /* 7-day mini trend */ .ov-trend{display:flex; gap:6px; align-items:flex-end;} .ov-tr-cell{ flex:1; max-width:60px; height:56px; background:var(--hover); border-radius:6px; position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:14px; overflow:hidden; } .ov-tr-cell.cur{outline:2px solid var(--accent); outline-offset:-2px;} .ov-tr-fill{width:100%; background:var(--accent); border-radius:5px 5px 0 0; transition:height .25s;} .ov-tr-cell.empty .ov-tr-fill{background:transparent;} .ov-tr-lbl{position:absolute; bottom:1px; left:0; right:0; text-align:center; font-size:9px; color:var(--muted);} /* read-only task extras (priority badge + memo) */ .ro-prio{font-size:9px; font-weight:700; color:#fff; background:var(--done); border-radius:4px; padding:1px 5px; flex:none; margin-top:1px;} .ro-memo{font-size:12px; color:#6b5d3f; background:#fbf3df; border:1px solid #f0e3bf; border-radius:6px; padding:4px 8px; margin:2px 0; list-style:none; white-space:pre-wrap; word-break:break-word;}