/* Frappe UI — UI Kit styles */

/* Layout */
.fui-app { display:flex; height:100vh; background: var(--surface-gray-1); color: var(--ink-gray-8); font-size: 14px; letter-spacing: 0.02em; }
.fui-main { flex:1; display:flex; flex-direction:column; min-width:0; }
.fui-topbar { height:52px; background: var(--surface-white); border-bottom: 1px solid var(--outline-gray-1); display:flex; align-items:center; padding: 0 20px; gap: 12px; flex-shrink:0; }
.fui-topbar-title { font-size: 16px; font-weight: 600; color: var(--ink-gray-9); }
.fui-topbar-spacer { flex:1; }
.fui-content { flex:1; overflow:auto; padding: 20px 24px; }
.fui-page-head { display:flex; align-items:center; gap:12px; margin-bottom: 16px; }
.fui-page-title { font-size: 20px; font-weight: 600; color: var(--ink-gray-9); letter-spacing: 0.005em; }

/* Sidebar */
.fui-sidebar { width: 248px; background: var(--surface-menu-bar); border-right: 1px solid var(--outline-gray-1); display:flex; flex-direction:column; flex-shrink:0; }
.fui-sb-brand { display:flex; align-items:center; gap:10px; padding: 12px; border-bottom: 1px solid var(--outline-gray-1); }
.fui-sb-avatar { width:28px; height:28px; border-radius:6px; background: var(--surface-gray-7); color: var(--ink-white); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; }
.fui-sb-org { flex:1; min-width:0; }
.fui-sb-org-name { font-size:13px; font-weight:500; color: var(--ink-gray-9); }
.fui-sb-org-plan { font-size:11px; color: var(--ink-gray-5); }
.fui-sb-org-btn { background:transparent; border:0; padding:4px; border-radius:4px; color: var(--ink-gray-5); cursor:pointer; }
.fui-sb-org-btn:hover { background: var(--surface-gray-3); color: var(--ink-gray-8); }
.fui-sb-search { display:flex; align-items:center; gap:8px; margin: 8px; padding: 6px 8px; border-radius:6px; background: var(--surface-gray-2); border:0; color: var(--ink-gray-5); font-size:13px; cursor:pointer; }
.fui-sb-search:hover { background: var(--surface-gray-3); }
.fui-sb-search > span { flex:1; text-align:left; }
.fui-sb-search kbd { font-family: var(--font-mono); font-size:11px; background: var(--surface-white); border: 1px solid var(--outline-gray-2); padding: 1px 4px; border-radius: 3px; color: var(--ink-gray-6); }
.fui-sb-section { padding: 4px 8px; display:flex; flex-direction:column; gap: 1px; }
.fui-sb-item { display:flex; align-items:center; gap:10px; padding: 6px 8px; border:0; background:transparent; border-radius:6px; color: var(--ink-gray-7); font-size:13px; font-weight:420; cursor:pointer; text-align:left; width:100%; transition: background 80ms ease; }
.fui-sb-item:hover { background: var(--surface-gray-3); color: var(--ink-gray-8); }
.fui-sb-item.is-active { background: var(--surface-gray-3); color: var(--ink-gray-9); font-weight: 500; }
.fui-sb-item > span:not(.fui-sb-count):not(.fui-sb-proj-dot) { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fui-sb-count { font-size:11px; color: var(--ink-gray-5); background: var(--surface-gray-2); padding: 1px 5px; border-radius: 99px; }
.fui-sb-proj-dot { width:8px; height:8px; border-radius:99px; flex-shrink:0; }
.fui-sb-label { display:flex; align-items:center; justify-content:space-between; padding: 12px 14px 4px; font-size: 11px; font-weight:500; letter-spacing: 0.04em; text-transform:uppercase; color: var(--ink-gray-5); }
.fui-sb-icon-btn { background:transparent; border:0; padding:2px; border-radius:4px; color: var(--ink-gray-5); cursor:pointer; }
.fui-sb-icon-btn:hover { background: var(--surface-gray-3); color: var(--ink-gray-8); }
.fui-sb-bottom { margin-top:auto; padding: 8px; border-top: 1px solid var(--outline-gray-1); }
.fui-sb-user { display:flex; align-items:center; gap:8px; padding: 8px; border-radius:6px; }
.fui-avatar { width:24px; height:24px; border-radius:99px; background: var(--surface-blue-3); color: var(--ink-white); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; flex-shrink:0; }
.fui-sb-user-meta { flex:1; min-width:0; }
.fui-sb-user-name { font-size:13px; font-weight:500; color: var(--ink-gray-9); }
.fui-sb-user-mail { font-size:11px; color: var(--ink-gray-5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Buttons */
.fui-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; font-family: var(--font-sans); font-weight:420; letter-spacing:0.02em; border:0; cursor:pointer; transition: background 80ms ease, border-color 80ms ease, color 80ms ease; flex-shrink:0; }
.fui-btn:focus-visible { outline:0; box-shadow: 0 0 0 3px var(--outline-gray-3); }
.fui-btn-sm { height:28px; font-size:14px; padding:0 8px; border-radius:4px; }
.fui-btn-md { height:32px; font-size:14px; padding:0 10px; border-radius:4px; font-weight:500; }
.fui-btn-lg { height:40px; font-size:16px; padding:0 12px; border-radius:10px; font-weight:500; }
.fui-btn-xl { height:46px; font-size:18px; padding:0 14px; border-radius:12px; font-weight:500; }
.fui-btn-icon { padding:0; }
.fui-btn-icon.fui-btn-sm { width:28px; }
.fui-btn-icon.fui-btn-md { width:32px; }
.fui-btn-icon.fui-btn-lg { width:40px; }
.fui-btn-slot { display:inline-flex; }
.fui-btn-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.fui-btn-gray-solid { background: var(--surface-gray-7); color: var(--ink-white); }
.fui-btn-gray-solid:hover { background: var(--surface-gray-6); }
.fui-btn-gray-subtle { background: var(--surface-gray-2); color: var(--ink-gray-8); }
.fui-btn-gray-subtle:hover { background: var(--surface-gray-3); }
.fui-btn-gray-outline { background: var(--surface-white); color: var(--ink-gray-8); border: 1px solid var(--outline-gray-2); }
.fui-btn-gray-outline:hover { border-color: var(--outline-gray-3); }
.fui-btn-gray-ghost { background: transparent; color: var(--ink-gray-8); }
.fui-btn-gray-ghost:hover { background: var(--surface-gray-3); }

.fui-btn-blue-solid { background: var(--blue-500); color: var(--ink-white); }
.fui-btn-blue-solid:hover { background: var(--surface-blue-3); }
.fui-btn-blue-subtle { background: var(--surface-blue-2); color: var(--ink-blue-3); }
.fui-btn-blue-subtle:hover { background: var(--blue-200); }
.fui-btn-blue-outline { background: var(--surface-white); color: var(--ink-blue-3); border: 1px solid var(--outline-blue-1); }
.fui-btn-blue-ghost { background: transparent; color: var(--ink-blue-3); }
.fui-btn-blue-ghost:hover { background: var(--blue-200); }

.fui-btn-green-solid { background: var(--surface-green-3); color: var(--ink-white); }
.fui-btn-green-subtle { background: var(--surface-green-2); color: var(--green-800); }
.fui-btn-red-solid { background: var(--surface-red-5); color: var(--ink-white); }
.fui-btn-red-solid:hover { background: var(--surface-red-6); }
.fui-btn-red-subtle { background: var(--surface-red-2); color: var(--red-700); }
.fui-btn-red-subtle:hover { background: var(--surface-red-3); }

.fui-btn[disabled], .fui-btn-disabled-gray-subtle { background: var(--surface-gray-2); color: var(--ink-gray-4); cursor: not-allowed; }
.fui-spin { animation: fui-spin 0.7s linear infinite; }
@keyframes fui-spin { to { transform: rotate(360deg); } }

/* Badge */
.fui-badge { display:inline-flex; align-items:center; gap:4px; border-radius:9999px; white-space:nowrap; font-weight:420; letter-spacing:0.02em; user-select:none; }
.fui-badge-sm { height:16px; padding:0 6px; font-size:11px; }
.fui-badge-md { height:20px; padding:0 6px; font-size:12px; }
.fui-badge-lg { height:24px; padding:0 8px; font-size:13px; }
.fui-badge-subtle-gray { background: var(--surface-gray-2); color: var(--ink-gray-6); }
.fui-badge-subtle-blue { background: var(--surface-blue-2); color: var(--ink-blue-2); }
.fui-badge-subtle-green { background: var(--surface-green-2); color: var(--ink-green-3); }
.fui-badge-subtle-orange { background: var(--surface-amber-1); color: var(--ink-amber-3); }
.fui-badge-subtle-red { background: var(--surface-red-2); color: var(--ink-red-4); }
.fui-badge-solid-gray { background: var(--surface-gray-7); color: var(--ink-white); }
.fui-badge-solid-green { background: var(--surface-green-3); color: var(--ink-white); }
.fui-badge-outline-gray { background:transparent; border:1px solid var(--outline-gray-1); color: var(--ink-gray-6); }
.fui-status-dot { width:6px; height:6px; border-radius:99px; }
.fui-status-green { background: var(--ink-green-3); }
.fui-status-red { background: var(--ink-red-4); }
.fui-status-amber { background: var(--ink-amber-3); }
.fui-status-gray { background: var(--ink-gray-4); }

/* Form */
.fui-fc { display:flex; flex-direction:column; gap:4px; margin-bottom:14px; }
.fui-fc-label { font-size:13px; color: var(--ink-gray-7); }
.fui-input { height:28px; padding:0 8px; border-radius:4px; background: var(--surface-gray-2); border:1px solid var(--surface-gray-2); color: var(--ink-gray-8); font-family: var(--font-sans); font-size:14px; letter-spacing:0.02em; outline:0; transition: background 80ms, border-color 80ms; width:100%; box-sizing:border-box; }
.fui-input::placeholder { color: var(--ink-gray-4); }
.fui-input:hover { background: var(--surface-gray-3); border-color: var(--outline-gray-modals); }
.fui-input:focus { background: var(--surface-white); border-color: var(--outline-gray-3); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.fui-textarea { height:auto; padding:6px 8px; resize:vertical; line-height:1.5; }
.fui-input-err { background: var(--surface-red-1); border-color: var(--outline-red-1); }
.fui-fc-help { font-size:12px; color: var(--ink-gray-5); }
.fui-fc-error { font-size:12px; color: var(--ink-red-4); }
.fui-cb { display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.fui-cb input { display:none; }
.fui-cb-box { width:14px; height:14px; border-radius:4px; border:1px solid var(--outline-gray-3); background: var(--surface-gray-2); display:inline-block; position:relative; }
.fui-cb input:checked + .fui-cb-box { background: var(--blue-500); border-color: var(--blue-500); }
.fui-cb input:checked + .fui-cb-box::after { content:''; position:absolute; left:3px; top:0px; width:4px; height:8px; border:solid white; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); }
.fui-cb-label { font-size:13px; color: var(--ink-gray-8); }

/* List view */
.fui-lv { background: var(--surface-white); border:1px solid var(--outline-gray-1); border-radius:8px; overflow:hidden; }
.fui-lv-head { display:grid; gap:12px; padding:8px 16px; font-size:12px; color: var(--ink-gray-5); font-weight:500; letter-spacing:0.02em; background: var(--surface-gray-1); border-bottom:1px solid var(--outline-gray-2); align-items:center; }
.fui-lv-row { display:grid; gap:12px; padding:10px 16px; border-bottom:1px solid var(--outline-gray-1); align-items:center; cursor:pointer; transition: background 60ms ease; }
.fui-lv-row:last-child { border-bottom:0; }
.fui-lv-row:hover { background: var(--surface-gray-1); }
.fui-lv-row.is-sel { background: var(--surface-blue-1); }
.fui-lv-cb { width:14px; height:14px; accent-color: var(--blue-500); }
.fui-lv-muted { color: var(--ink-gray-5); font-size:13px; }
.fui-lv-empty { padding:48px; text-align:center; color: var(--ink-gray-5); font-size:13px; }

/* Card */
.fui-card { background: var(--surface-cards); border:1px solid var(--outline-gray-2); border-radius:8px; padding:16px; box-shadow: var(--shadow-sm); }

/* Dialog */
.fui-dialog-backdrop { position:fixed; inset:0; background: rgba(0,0,0,0.36); display:flex; align-items:center; justify-content:center; z-index: 100; animation: fui-fade 120ms ease-out; }
.fui-dialog { background: var(--surface-modal); border-radius: 12px; box-shadow: var(--shadow-2xl); width: 480px; max-width: calc(100vw - 32px); animation: fui-pop 140ms ease-out; }
.fui-dialog-sm { width: 360px; }
.fui-dialog-lg { width: 640px; }
.fui-dialog-head { display:flex; align-items:center; justify-content:space-between; padding: 16px 18px 8px; }
.fui-dialog-title { margin:0; font-size:16px; font-weight:600; color: var(--ink-gray-9); }
.fui-dialog-close { background:transparent; border:0; padding:6px; border-radius:6px; color: var(--ink-gray-5); cursor:pointer; }
.fui-dialog-close:hover { background: var(--surface-gray-3); color: var(--ink-gray-8); }
.fui-dialog-body { padding: 0 18px 16px; font-size:13px; color: var(--ink-gray-7); line-height:1.5; }
.fui-dialog-foot { display:flex; justify-content:flex-end; gap:8px; padding: 12px 18px; border-top: 1px solid var(--outline-gray-1); background: var(--surface-gray-1); border-radius: 0 0 12px 12px; }
@keyframes fui-fade { from { opacity:0; } }
@keyframes fui-pop { from { opacity:0; transform: scale(0.97); } }

/* Toast */
.fui-toast-wrap { position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:8px; z-index:200; }
.fui-toast { background: var(--surface-gray-7); color: var(--ink-white); padding:10px 14px; border-radius:8px; font-size:13px; box-shadow: var(--shadow-lg); animation: fui-toast-in 200ms ease-out; }
@keyframes fui-toast-in { from { opacity:0; transform: translateY(8px); } }

.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }