/* ═══════════════════════════════════════════════════════════════ HR System API Docs — Production Stylesheet v2 Laravel-style, typography-first design Inter + Fira Code · Indigo/Slate palette ═══════════════════════════════════════════════════════════════ */ /* ── Google Fonts are loaded in the layout ── */ /* ────────────────────────────────────────────────── Design Tokens ────────────────────────────────────────────────── */ :root { /* Brand */ --primary: #6366f1; --primary-dim: rgba(99, 102, 241, 0.1); --primary-ring: rgba(99, 102, 241, 0.25); --secondary: #818cf8; /* Status */ --success: #10b981; --warning: #f59e0b; --error: #ef4444; --info: #3b82f6; /* HTTP Methods */ --get: #3b82f6; --post: #10b981; --put: #f59e0b; --delete: #ef4444; --patch: #8b5cf6; /* Light surface (default) */ --bg: #ffffff; --surface: #f8fafc; --surface-2: #f1f5f9; --text: #0f172a; --text-muted: #64748b; --border: #e2e8f0; /* Sidebar (always dark) */ --sb-bg: #0f172a; --sb-bg-hover: rgba(255, 255, 255, 0.06); --sb-text: #94a3b8; --sb-text-active: #f1f5f9; --sb-border: rgba(255, 255, 255, 0.08); /* Layout */ --navbar-h: 58px; --sidebar-w: 272px; /* Typography */ --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "Fira Code", "Cascadia Code", "Courier New", monospace; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14); } /* Dark mode overrides (content area only — sidebar stays dark always) */ body.dark-mode { --bg: #0f172a; --surface: #1e293b; --surface-2: #263248; --text: #f1f5f9; --text-muted: #94a3b8; --border: #334155; } /* ────────────────────────────────────────────────── Reset & Base ────────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--navbar-h) + 1.5rem); font-size: 16px; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background 0.25s ease, color 0.25s ease; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* ────────────────────────────────────────────────── Top Navbar ────────────────────────────────────────────────── */ .top-navbar { position: fixed; inset: 0 0 auto 0; height: var(--navbar-h); background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 1.75rem; z-index: 200; transition: background 0.25s; } body.dark-mode .top-navbar { background: rgba(15, 23, 42, 0.92); border-bottom-color: var(--border); } .navbar-left { display: flex; align-items: center; gap: 0.9rem; } .navbar-logo { font-size: 1.05rem; font-weight: 700; background: linear-gradient( 135deg, var(--primary) 0%, var(--secondary) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; white-space: nowrap; letter-spacing: -0.01em; } .sidebar-toggle { display: none; padding: 0.4rem 0.42rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); cursor: pointer; transition: background 0.15s; } .sidebar-toggle:hover { background: var(--surface-2); } .navbar-right { display: flex; align-items: center; gap: 0.6rem; } /* Version Dropdown */ .version-dropdown { position: relative; } .version-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.32rem 0.7rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--primary); font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; cursor: pointer; white-space: nowrap; transition: border-color 0.15s, box-shadow 0.15s; } .version-btn:hover { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); } .version-menu { position: absolute; top: calc(100% + 7px); right: 0; min-width: 160px; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-5px); transition: opacity 0.18s, transform 0.18s, visibility 0.18s; z-index: 300; overflow: hidden; } .version-menu.show { opacity: 1; visibility: visible; transform: translateY(0); } .version-item { display: block; padding: 0.55rem 1rem; color: var(--text); font-size: 0.82rem; transition: background 0.12s; } .version-item:hover { background: var(--primary-dim); text-decoration: none; } .version-item.active { color: var(--primary); font-weight: 600; } /* Download Button */ .btn-download { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.32rem 0.7rem; background: linear-gradient(135deg, #ff6c37 0%, #ff9a5c 100%); color: #fff; text-decoration: none; border-radius: 7px; font-weight: 600; font-size: 0.78rem; white-space: nowrap; transition: transform 0.15s, box-shadow 0.15s; } .btn-download:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255, 108, 55, 0.35); text-decoration: none; color: #fff; } /* Theme Toggle */ .theme-toggle { padding: 0.32rem 0.5rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); cursor: pointer; font-size: 1rem; line-height: 1; transition: background 0.15s, border-color 0.15s; } .theme-toggle:hover { border-color: var(--primary); } .theme-icon-dark { display: none; } body.dark-mode .theme-icon-light { display: none; } body.dark-mode .theme-icon-dark { display: inline; } /* ────────────────────────────────────────────────── Layout Shell ────────────────────────────────────────────────── */ .docs-container { display: flex; min-height: 100vh; padding-top: var(--navbar-h); } /* ────────────────────────────────────────────────── Sidebar (always dark-themed) ────────────────────────────────────────────────── */ .sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w); background: var(--sb-bg); border-right: 1px solid var(--sb-border); position: fixed; top: var(--navbar-h); left: 0; bottom: 0; overflow-y: auto; overflow-x: hidden; z-index: 100; transition: transform 0.25s ease; /* Custom scrollbar */ scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.12) transparent; } .sidebar::-webkit-scrollbar { width: 4px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 4px; } /* Top accent stripe */ .sidebar::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--primary), var(--secondary)); flex-shrink: 0; } .sidebar-header { padding: 1rem 1.1rem 1.1rem; border-bottom: 1px solid var(--sb-border); } /* Search */ .search-box { position: relative; } .search-box input { width: 100%; padding: 0.55rem 0.85rem 0.55rem 2.1rem; border: 1px solid var(--sb-border); border-radius: 7px; background: rgba(255, 255, 255, 0.06); color: var(--sb-text-active); font-family: var(--font-body); font-size: 0.82rem; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .search-box input::placeholder { color: var(--sb-text); } .search-box input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); } .search-icon { position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); color: var(--sb-text); font-size: 0.8rem; pointer-events: none; } /* Nav Sections */ .nav-section { padding: 0.5rem 0 0.75rem; } /* Group headers */ .nav-group-header { padding: 0.6rem 1.1rem 0.3rem; font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sb-text); user-select: none; margin-top: 0.15rem; } .nav-group-header.group-prologue { color: #94a3b8; } .nav-group-header.group-employee { color: #818cf8; } .nav-group-header.group-management { color: #fbbf24; } /* Subtle separator before groups (except the first) */ .nav-group-sep { display: block; height: 1px; background: var(--sb-border); margin: 0.5rem 1.1rem; } /* Nav items */ .nav-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 1.1rem; color: var(--sb-text); font-size: 0.83rem; border-left: 2px solid transparent; text-decoration: none; transition: color 0.12s, background 0.12s, border-color 0.12s; cursor: pointer; } .nav-item:hover { color: var(--sb-text-active); background: var(--sb-bg-hover); border-left-color: rgba(99, 102, 241, 0.4); text-decoration: none; } .nav-item.active { color: #fff; font-weight: 600; background: var(--primary-dim); border-left-color: var(--primary); } .nav-item .nav-icon { font-size: 0.9rem; flex-shrink: 0; opacity: 0.75; } .nav-item.active .nav-icon { opacity: 1; } /* ────────────────────────────────────────────────── Main Content ────────────────────────────────────────────────── */ .main-content { flex: 1 1 auto; margin-left: var(--sidebar-w); padding: 2.25rem 3rem; max-width: 980px; min-height: 100vh; } /* ────────────────────────────────────────────────── Sections & Typography ────────────────────────────────────────────────── */ .doc-section { margin-bottom: 3.5rem; } .section-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: var(--primary); margin-bottom: 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); } .section-description { font-size: 0.93rem; color: var(--text-muted); margin-bottom: 1.5rem; max-width: 680px; line-height: 1.7; } h3 { font-size: 1.05rem; font-weight: 600; margin: 1.5rem 0 0.6rem; color: var(--text); } p { margin-bottom: 0.75rem; color: var(--text); } ul, ol { padding-left: 1.4rem; margin-bottom: 0.75rem; } li { margin-bottom: 0.25rem; } /* ────────────────────────────────────────────────── Quick Reference Table ────────────────────────────────────────────────── */ .qr-table-wrapper { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; margin: 1.25rem 0 2rem; /* subtle shadow */ box-shadow: var(--shadow-sm); } .qr-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 580px; } .qr-table thead th { padding: 0.65rem 0.85rem; background: var(--surface); color: var(--text-muted); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; text-align: left; border-bottom: 2px solid var(--border); white-space: nowrap; } .qr-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.1s; } .qr-table tbody tr:last-child { border-bottom: none; } .qr-table tbody tr:hover { background: var(--surface); } .qr-table td { padding: 0.55rem 0.85rem; vertical-align: middle; } .qr-table .col-path { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text); white-space: nowrap; } .qr-table .col-desc { color: var(--text-muted); } /* Group label rows */ .qr-group-row td { padding: 0.4rem 0.85rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; background: var(--surface-2); color: var(--text-muted); border-bottom: 1px solid var(--border); } /* Auth level badges */ .auth-badge { display: inline-block; padding: 0.18rem 0.5rem; border-radius: 5px; font-size: 0.68rem; font-weight: 600; white-space: nowrap; } .auth-public { background: rgba(16, 185, 129, 0.12); color: #059669; } .auth-sanctum { background: rgba(99, 102, 241, 0.12); color: var(--primary); } .auth-profile { background: rgba(245, 158, 11, 0.12); color: #d97706; } .auth-manager { background: rgba(249, 115, 22, 0.12); color: #ea580c; } .auth-admin { background: rgba(239, 68, 68, 0.12); color: #dc2626; } /* ────────────────────────────────────────────────── Endpoint Cards ────────────────────────────────────────────────── */ .endpoint { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 1rem; overflow: hidden; transition: box-shadow 0.2s; } .endpoint:hover { box-shadow: var(--shadow-md); } body.dark-mode .endpoint:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .endpoint-header { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.1rem; cursor: pointer; flex-wrap: wrap; user-select: none; } .endpoint-header::after { content: "▾"; margin-left: auto; color: var(--text-muted); font-size: 0.75rem; transition: transform 0.2s; } .endpoint.collapsed .endpoint-header::after { transform: rotate(-90deg); } /* endpoint-card has its own .toggle-icon — suppress the auto ::after arrow */ .endpoint-card > .endpoint-header::after { display: none; } .endpoint-body { padding: 0 1.1rem 1.1rem; border-top: 1px solid var(--border); } .endpoint.collapsed .endpoint-body { display: none; } /* Method badges */ .method-badge { display: inline-block; padding: 0.26rem 0.58rem; border-radius: 6px; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; color: #fff; letter-spacing: 0.04em; flex-shrink: 0; } .method-get { background: var(--get); } .method-post { background: var(--post); } .method-put { background: var(--put); } .method-delete { background: var(--delete); } .method-patch { background: var(--patch); } .endpoint-path { font-family: var(--font-mono); font-size: 0.88rem; font-weight: 600; color: var(--text); } /* Role badges */ .role-badge { display: inline-block; padding: 0.16rem 0.45rem; border-radius: 4px; font-size: 0.67rem; font-weight: 600; flex-shrink: 0; } .role-admin { background: rgba(239, 68, 68, 0.1); color: var(--error); } .role-manager { background: rgba(245, 158, 11, 0.1); color: var(--warning); } .role-employee { background: rgba(16, 185, 129, 0.1); color: var(--success); } /* Special badges */ .badge-new { display: inline-block; background: linear-gradient(135deg, #10b981, #34d399); color: #fff; padding: 0.12rem 0.4rem; border-radius: 4px; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .badge-auth { display: inline-block; background: var(--primary-dim); color: var(--primary); padding: 0.16rem 0.45rem; border-radius: 4px; font-size: 0.67rem; font-weight: 600; } .badge-required { display: inline-block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; padding: 0.07rem 0.33rem; border-radius: 3px; background: rgba(239, 68, 68, 0.1); color: var(--error); } .badge-optional { display: inline-block; font-size: 0.62rem; font-weight: 600; text-transform: uppercase; padding: 0.07rem 0.33rem; border-radius: 3px; background: rgba(100, 116, 139, 0.1); color: var(--text-muted); } .endpoint-desc { color: var(--text-muted); font-size: 0.87rem; margin: 0.75rem 0 0.8rem; } /* ────────────────────────────────────────────────── Headers Block ────────────────────────────────────────────────── */ .headers-block { margin-bottom: 0.8rem; } .headers-block h5 { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0.3rem; } .header-row { font-family: var(--font-mono); font-size: 0.77rem; color: var(--text-muted); padding: 0.12rem 0; } .header-row code { color: var(--primary); font-weight: 500; } /* ────────────────────────────────────────────────── Params Table ────────────────────────────────────────────────── */ .params-table { width: 100%; border-collapse: collapse; margin: 0.6rem 0; font-size: 0.82rem; } .params-table th { text-align: left; padding: 0.5rem 0.65rem; background: var(--primary-dim); font-weight: 600; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border-bottom: 2px solid var(--border); } .params-table td { padding: 0.48rem 0.65rem; border-bottom: 1px solid var(--border); vertical-align: top; } .params-table tr:last-child td { border-bottom: none; } .params-table tr:hover td { background: rgba(99, 102, 241, 0.03); } .param-name { font-family: var(--font-mono); font-weight: 600; font-size: 0.82rem; } .param-type { font-family: var(--font-mono); font-size: 0.76rem; color: var(--secondary); } /* ────────────────────────────────────────────────── Code Blocks ────────────────────────────────────────────────── */ .code-block { position: relative; margin: 0.65rem 0; border-radius: 9px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .code-header { display: flex; justify-content: space-between; align-items: center; padding: 0.42rem 0.8rem; background: #1e293b; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .code-lang { font-size: 0.68rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; } .copy-btn { padding: 0.2rem 0.55rem; background: rgba(99, 102, 241, 0.2); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 5px; font-family: var(--font-body); font-size: 0.65rem; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; } .copy-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); } .copy-btn.copied { background: var(--success); color: #fff; border-color: var(--success); } pre { margin: 0; padding: 1.1rem 1.2rem; background: #1a2332; color: #e2e8f0; overflow-x: auto; font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.75; /* Scrollbar inside pre */ scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.1) transparent; } pre::-webkit-scrollbar { height: 4px; } pre::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; } code { font-family: var(--font-mono); } /* Inline code (inside paragraphs, tables, list items) */ p code, td code, li code { background: var(--primary-dim); color: var(--primary); padding: 0.1rem 0.32rem; border-radius: 4px; font-size: 0.85em; } /* ────────────────────────────────────────────────── Info / Warning / Note Boxes ────────────────────────────────────────────────── */ .info-box { padding: 0.8rem 1.1rem; border-left: 3px solid var(--primary); background: rgba(99, 102, 241, 0.05); border-radius: 0 8px 8px 0; margin: 0.9rem 0; font-size: 0.87rem; color: var(--text); } .warning-box { border-left-color: var(--warning); background: rgba(245, 158, 11, 0.05); } .note-box { border-left-color: var(--success); background: rgba(16, 185, 129, 0.05); } .error-box { border-left-color: var(--error); background: rgba(239, 68, 68, 0.05); } .info-box strong { display: block; margin-bottom: 0.2rem; } .info-box ul { margin: 0.3rem 0 0 1.15rem; font-size: 0.82rem; } .info-box li { margin-bottom: 0.12rem; } /* ────────────────────────────────────────────────── Error Codes Table ────────────────────────────────────────────────── */ .errors-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-top: 1rem; } .errors-table th { padding: 0.6rem 0.85rem; background: var(--surface); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border-bottom: 2px solid var(--border); text-align: left; } .errors-table td { padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--border); vertical-align: top; } .errors-table tr:last-child td { border-bottom: none; } .errors-table tr:hover td { background: var(--surface); } /* ────────────────────────────────────────────────── Search Enhancement Styles (Phase 3) ────────────────────────────────────────────────── */ .search-clear { display: none; /* shown by JS when search is active */ align-items: center; justify-content: center; padding: 0 6px; background: transparent; border: none; color: var(--sb-text); font-size: 0.85rem; cursor: pointer; border-radius: 4px; transition: color 0.15s; flex-shrink: 0; } .search-clear:hover { color: var(--sb-text-active); } .search-no-results { font-size: 0.72rem; color: var(--sb-text); text-align: center; padding: 0.5rem 1rem; opacity: 0.7; font-style: italic; } /* Sidebar mobile overlay */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 199; backdrop-filter: blur(2px); } .sidebar-overlay.active { display: block; } /* ────────────────────────────────────────────────── Responsive — Tablet (≤ 900px) ────────────────────────────────────────────────── */ @media (max-width: 900px) { .sidebar-toggle { display: flex; } .sidebar { transform: translateX(-100%); z-index: 200; } .sidebar.open { transform: translateX(0); box-shadow: 4px 0 32px rgba(0, 0, 0, 0.25); } .main-content { margin-left: 0 !important; padding: 1.75rem 1.25rem; } /* Endpoint cards on tablet */ .endpoint-header { flex-wrap: wrap; gap: 0.5rem; } .endpoint-title { flex: 1 1 auto; } /* Tables scrollable on tablet */ .params-table, .errors-table, .qr-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ────────────────────────────────────────────────── Responsive — Mobile (≤ 640px) ────────────────────────────────────────────────── */ @media (max-width: 640px) { .top-navbar { padding: 0 0.9rem; gap: 0.4rem; } .navbar-right { gap: 0.35rem; } .navbar-brand .brand-name { display: none; /* hide brand text, keep logo */ } .btn-download span { display: none; } .main-content { padding: 1.25rem 0.85rem; } /* Section titles */ .section-title { font-size: 1.25rem; flex-wrap: wrap; gap: 0.5rem; } .section-intro { font-size: 0.88rem; } /* Endpoint card adjustments */ .endpoint-card { border-radius: 10px; } .endpoint-header { padding: 0.85rem 1rem; flex-direction: column; align-items: flex-start; gap: 0.5rem; } .endpoint-title { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .endpoint-path { font-size: 0.78rem; word-break: break-all; } .endpoint-meta { align-self: flex-end; } .endpoint-body { padding: 1rem; } /* Method & auth badges */ .method-badge { font-size: 0.65rem; padding: 0.22rem 0.55rem; } .auth-badge { font-size: 0.65rem; padding: 0.22rem 0.55rem; } /* Code blocks */ .code-block-wrapper pre { font-size: 0.72rem; padding: 0.85rem; overflow-x: auto; -webkit-overflow-scrolling: touch; } .code-block-label { font-size: 0.65rem; } .copy-btn { font-size: 0.65rem; padding: 0.2rem 0.5rem; } /* Params tables */ .params-section { overflow-x: auto; -webkit-overflow-scrolling: touch; } .params-table { min-width: 480px; } .params-table th, .params-table td { padding: 0.5rem 0.6rem; font-size: 0.78rem; } /* Info boxes */ .info-box { font-size: 0.82rem; padding: 0.75rem 1rem; } /* Route quick ref table */ .qr-table { min-width: 480px; } /* Section spacers */ .doc-section { padding: 1.5rem 0; } .doc-section + .doc-section { margin-top: 0.5rem; } } /* ────────────────────────────────────────────────── Responsive — Small phones (≤ 480px) ────────────────────────────────────────────────── */ @media (max-width: 480px) { .version-btn .version-label { display: none; } .top-navbar .navbar-brand { gap: 0.4rem; } .endpoint-path { font-size: 0.72rem; } .required-badge, .optional-badge { font-size: 0.6rem; padding: 0.15rem 0.4rem; } /* Collapse toggle icon */ .toggle-icon { font-size: 0.7rem; } } /* ────────────────────────────────────────────────── Endpoint Card System (used by all section partials) Classes: endpoint-card, code-block-wrapper, etc. ────────────────────────────────────────────────── */ /* Section intro text */ .section-intro { font-size: 0.93rem; color: var(--text-muted); margin-bottom: 1.25rem; max-width: 700px; line-height: 1.7; } /* Info tip box (inside sections) */ .info-tip { border-left-color: #3b82f6; background: rgba(59, 130, 246, 0.05); } .info-warning { border-left-color: var(--warning); background: rgba(245, 158, 11, 0.06); } .info-danger { border-left-color: var(--error); background: rgba(239, 68, 68, 0.06); } /* ── Endpoint Card ── */ .endpoint-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 0.85rem; overflow: hidden; transition: box-shadow 0.2s; } .endpoint-card:hover { box-shadow: var(--shadow-md); } body.dark-mode .endpoint-card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } /* Endpoint card header (clickable row) */ .endpoint-card > .endpoint-header { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; padding: 0.8rem 1.1rem; cursor: pointer; user-select: none; transition: background 0.12s; } .endpoint-card > .endpoint-header:hover { background: var(--surface-2); } /* Left side: method + path */ .endpoint-title { display: flex; align-items: center; gap: 0.55rem; flex-wrap: nowrap; min-width: 0; } .endpoint-title .endpoint-path { font-family: var(--font-mono); font-size: 0.87rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: none; padding: 0; } /* Right side: auth badge + toggle arrow */ .endpoint-meta { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } /* Toggle arrow */ .toggle-icon { font-size: 0.72rem; color: var(--text-muted); transition: transform 0.2s; display: inline-block; } /* Collapsed state — arrow rotates, body hides */ .endpoint-card.collapsed > .endpoint-header .toggle-icon { transform: rotate(-90deg); } .endpoint-card.collapsed > .endpoint-body { display: none; } /* Card body */ .endpoint-card > .endpoint-body { padding: 0.2rem 1.1rem 1.1rem; border-top: 1px solid var(--border); } /* ── Params section inside card ── */ .params-section { margin: 0.75rem 0 0.5rem; } .params-section h4 { font-size: 0.73rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 0.4rem; } /* Required / Optional inline badges */ .required-badge { display: inline-block; padding: 0.07rem 0.38rem; border-radius: 4px; font-size: 0.63rem; font-weight: 700; text-transform: uppercase; background: rgba(239, 68, 68, 0.1); color: var(--error); white-space: nowrap; } .optional-badge { display: inline-block; padding: 0.07rem 0.38rem; border-radius: 4px; font-size: 0.63rem; font-weight: 600; text-transform: uppercase; background: rgba(100, 116, 139, 0.1); color: var(--text-muted); white-space: nowrap; } /* ── Code block wrapper (used by section partials) ── */ .code-block-wrapper { position: relative; margin: 0.65rem 0; border-radius: 9px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .code-block-wrapper.error-response { border-color: rgba(239, 68, 68, 0.25); } /* Label bar above code */ .code-block-label { display: inline-block; padding: 0.35rem 0.8rem; background: #1e293b; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.67rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; width: 100%; } .code-block-wrapper.error-response .code-block-label { color: #f87171; } /* Copy button inside wrapper — positioned top-right */ .code-block-wrapper > .copy-btn { position: absolute; top: 0.28rem; right: 0.55rem; }