/* ========================================================= SALIHIN SPS SOP ========================================================= */ html { scroll-behavior: smooth; } /* Tokens are also declared on modal/toast because modal is appended to . */ :root, .sps-sop-page, .sps-sop-modal-backdrop, .sps-sop-toast { --sop-page-bg: #f6fbff; --sop-card: #ffffff; --sop-card-soft: #f7fbff; --sop-line: rgba(185, 213, 235, .66); --sop-line-soft: rgba(185, 213, 235, .42); --sop-text: #16233d; --sop-heading: #111b31; --sop-muted: #5a6b7d; --sop-cyan: #18c5d2; --sop-cyan-dark: #0ca7b9; --sop-blue: #2866ca; --sop-blue-dark: #194fa9; --sop-green: #21b957; --sop-red: #e76078; --sop-gradient: linear-gradient(135deg, #18c5d2 0%, #2866ca 100%); --sop-gradient-blue: linear-gradient(135deg, #2da9f2 0%, #245fbe 100%); --sop-gradient-cyan: linear-gradient(135deg, #20c9c7 0%, #1878c8 100%); --sop-gradient-sky: linear-gradient(135deg, #5bbcf6 0%, #2866ca 100%); --sop-gradient-deep: linear-gradient(135deg, #18c5d2 0%, #0f73bd 100%); --sop-gradient-soft: linear-gradient(135deg, #73dce5 0%, #2f79d5 100%); --sop-shadow-card: 0 14px 30px rgba(28, 78, 136, .08); --sop-shadow-hover: 0 18px 42px rgba(28, 78, 136, .14); --sop-radius-xl: 26px; --sop-radius-lg: 22px; --sop-radius-md: 18px; --sop-radius-sm: 14px; } html[data-bs-theme="dark"], html[data-bs-theme="dark"] .sps-sop-page, html[data-bs-theme="dark"] .sps-sop-modal-backdrop, html[data-bs-theme="dark"] .sps-sop-toast { --sop-page-bg: #0d141d; --sop-card: #172231; --sop-card-soft: #111b27; --sop-line: rgba(255, 255, 255, .12); --sop-line-soft: rgba(255, 255, 255, .08); --sop-text: #dfe8f3; --sop-heading: #f6f9fd; --sop-muted: #9aa8b8; --sop-shadow-card: 0 14px 34px rgba(0, 0, 0, .24); --sop-shadow-hover: 0 20px 46px rgba(0, 0, 0, .38); } /* ========================================================= Motion - same feel as dashboard ========================================================= */ @keyframes sopShine { 0% { transform: translateX(-120%) skewX(-18deg); opacity: 0; } 45% { opacity: .55; } 100% { transform: translateX(220%) skewX(-18deg); opacity: 0; } } @keyframes sopScan { 0%, 48% { left: -40%; opacity: 0; } 58% { opacity: .65; } 100% { left: 120%; opacity: 0; } } /* ========================================================= Page Base ========================================================= */ .sps-sop-page { min-height: calc(100vh - 145px); padding: 28px; color: var(--sop-text); background: transparent; position: relative; overflow: visible; isolation: isolate; } .sps-sop-page *, .sps-sop-page *::before, .sps-sop-page *::after, .sps-sop-modal-backdrop *, .sps-sop-modal-backdrop *::before, .sps-sop-modal-backdrop *::after { box-sizing: border-box; } .sps-sop-page > * { position: relative; z-index: 1; } .sps-section-kicker { display: inline-flex; align-items: center; min-height: 20px; color: var(--sop-cyan-dark); font-size: 10.5px; font-weight: 950; letter-spacing: .10em; text-transform: uppercase; margin-bottom: 5px; } html[data-bs-theme="dark"] .sps-section-kicker { color: var(--sop-cyan); } /* ========================================================= Heading ========================================================= */ .sps-sop-heading-section { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; } .sps-sop-heading-section h5 { margin: 0 0 6px; color: var(--sop-heading); font-size: 24px; font-weight: 950; letter-spacing: -.03em; } .sps-sop-heading-section p { margin: 0; color: var(--sop-muted); font-size: 13px; line-height: 1.45; } .sps-sop-heading-actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } .sps-sop-control-btn, .sps-sop-modal-btn { min-height: 38px; border: 0; border-radius: 999px; background: var(--sop-card); color: var(--sop-blue); display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 15px; font-size: 11px; font-weight: 950; letter-spacing: .03em; text-transform: uppercase; box-shadow: var(--sop-shadow-card); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .sps-sop-control-btn.primary, .sps-sop-modal-btn.primary { color: #ffffff; background: var(--sop-gradient); } .sps-sop-control-btn:hover, .sps-sop-modal-btn:hover { transform: translateY(-2px); box-shadow: var(--sop-shadow-hover); } .sps-sop-control-btn svg, .sps-sop-modal-btn svg { width: 15px; height: 15px; stroke-width: 2.8; } /* ========================================================= Dashboard Module Cards ========================================================= */ .sps-sop-module-section { margin: 0 0 18px; padding: 0; background: transparent; border: 0; box-shadow: none; } .sps-sop-module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .sps-sop-dashboard-card { position: relative; isolation: isolate; min-height: 92px; border: 0; border-radius: 18px; color: #ffffff; text-align: left; padding: 14px; display: flex; align-items: center; gap: 12px; overflow: hidden; box-shadow: var(--sop-shadow-card); transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; } .sps-sop-dashboard-card:nth-child(1) { background: var(--sop-gradient); } .sps-sop-dashboard-card:nth-child(2) { background: var(--sop-gradient-blue); } .sps-sop-dashboard-card:nth-child(3) { background: var(--sop-gradient-cyan); } .sps-sop-dashboard-card:nth-child(4) { background: var(--sop-gradient-sky); } .sps-sop-dashboard-card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 45%), radial-gradient(circle at 96% 0%, rgba(255, 255, 255, .24), transparent 35%); } .sps-sop-dashboard-card::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 42%; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg); opacity: 0; } .sps-sop-dashboard-card:hover, .sps-sop-dashboard-card.is-active { color: #ffffff; transform: translateY(-4px); filter: saturate(1.06); box-shadow: var(--sop-shadow-hover); } .sps-sop-dashboard-card:hover::after { animation: sopShine .85s ease; } .sps-sop-dashboard-card > * { position: relative; z-index: 2; } .sps-sop-dashboard-icon { width: 42px; height: 42px; border-radius: 14px; flex: 0 0 42px; display: grid; place-items: center; background: rgba(255, 255, 255, .20) !important; color: #ffffff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); } .sps-sop-dashboard-icon svg { width: 21px; height: 21px; stroke-width: 2.55; } .sps-sop-dashboard-card strong { display: block; margin: 0 0 3px; color: #ffffff; font-size: 13px; line-height: 1.12; font-weight: 950; letter-spacing: -.015em; } .sps-sop-dashboard-card span { color: rgba(255, 255, 255, .82); font-size: 10.5px; line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ========================================================= Library Section ========================================================= */ .sps-sop-library-section { background: var(--sop-card); border: 0; border-radius: var(--sop-radius-xl); box-shadow: var(--sop-shadow-card); padding: 18px; position: relative; overflow: hidden; isolation: isolate; } .sps-sop-library-section::after { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 34%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(24, 197, 210, .08), rgba(255, 255, 255, .16), transparent); transform: skewX(-18deg); animation: sopScan 7s ease-in-out infinite; } .sps-sop-library-section > * { position: relative; z-index: 2; } .sps-sop-library-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; } .sps-sop-library-head h5 { margin: 0 0 4px; color: var(--sop-heading); font-size: 20px; font-weight: 950; letter-spacing: -.02em; } .sps-sop-library-head p { margin: 0; color: var(--sop-muted); font-size: 12.5px; line-height: 1.4; } .sps-sop-view-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 5px; border: 1px solid var(--sop-line-soft); border-radius: 999px; background: var(--sop-card-soft); box-shadow: 0 8px 18px rgba(28, 78, 136, .05); } .sps-sop-view-toggle button { width: 32px; height: 30px; border: 0; border-radius: 999px; background: transparent; color: var(--sop-muted); display: grid; place-items: center; } .sps-sop-view-toggle button.active { background: var(--sop-gradient); color: #ffffff; box-shadow: 0 8px 16px rgba(40, 102, 202, .20); } .sps-sop-view-toggle svg { width: 16px; height: 16px; stroke-width: 2.6; } /* ========================================================= Toolbar ========================================================= */ .sps-sop-toolbar { display: grid; grid-template-columns: auto minmax(210px, 280px) minmax(260px, 1fr); align-items: center; gap: 12px; padding: 14px; margin-bottom: 14px; border: 1px solid var(--sop-line-soft); border-radius: 18px; background: var(--sop-card-soft); color: var(--sop-text); font-size: 12px; } .sps-sop-toolbar label, .sps-sop-filter, .sps-sop-search { display: flex; align-items: center; gap: 8px; color: var(--sop-heading); font-size: 11px; font-weight: 950; } .sps-sop-toolbar select, .sps-sop-toolbar input { height: 38px; border: 1px solid var(--sop-line); border-radius: 13px; background: var(--sop-card); color: var(--sop-text); padding: 0 11px; font-size: 12px; font-weight: 850; outline: none; } .sps-sop-toolbar label:first-child select { min-width: 70px; } .sps-sop-filter select, .sps-sop-search input { width: 100%; } .sps-sop-toolbar select:focus, .sps-sop-toolbar input:focus { border-color: rgba(24, 153, 220, .65); box-shadow: 0 0 0 4px rgba(24, 197, 210, .12); } /* ========================================================= Table ========================================================= */ .sps-sop-table-wrap { overflow-x: auto; border: 1px solid var(--sop-line-soft); border-radius: 18px; background: var(--sop-card); } .sps-sop-table { width: 100%; min-width: 940px; border-collapse: separate; border-spacing: 0; color: var(--sop-text); } .sps-sop-table th, .sps-sop-table td { padding: 14px; border-bottom: 1px solid var(--sop-line-soft); vertical-align: middle; color: var(--sop-text); font-size: 12.5px; } .sps-sop-table thead th { background: var(--sop-card-soft); color: var(--sop-heading); font-size: 11px; font-weight: 950; text-align: left; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; } .sps-sop-table thead th[data-sort] { cursor: pointer; user-select: none; } .sps-sop-table thead th[data-sort]::after { content: "↕"; float: right; color: #9fb1c7; font-size: 11px; font-weight: 800; } .sps-sop-table tbody tr:hover { background: rgba(24, 197, 210, .045); } html[data-bs-theme="dark"] .sps-sop-table tbody tr:hover { background: rgba(24, 197, 210, .07); } .sps-sop-table tbody tr:last-child td { border-bottom: 0; } .sps-sop-table td strong { display: block; color: var(--sop-heading); font-size: 13px; font-weight: 950; } .sps-sop-department-pill, .sps-sop-format { display: inline-grid; place-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 10.5px; font-weight: 950; } .sps-sop-department-pill { color: var(--sop-blue); background: rgba(40, 102, 202, .10); } .sps-sop-format { color: var(--sop-cyan-dark); background: rgba(24, 197, 210, .12); } html[data-bs-theme="dark"] .sps-sop-format { color: var(--sop-cyan); } .sps-sop-row-actions { display: flex; align-items: center; gap: 5px; } .sps-sop-row-actions button { width: 32px; height: 30px; border: 0; border-radius: 10px; color: #ffffff; background: var(--sop-gradient); display: grid; place-items: center; box-shadow: 0 8px 16px rgba(30, 89, 160, .12); } .sps-sop-row-actions button:nth-child(2) { background: var(--sop-gradient-cyan); } .sps-sop-row-actions svg { width: 15px; height: 15px; stroke-width: 2.8; } /* ========================================================= Grid View ========================================================= */ .sps-sop-grid-view { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .sps-sop-doc-card { min-height: 166px; border: 1px solid var(--sop-line-soft); border-radius: 20px; background: var(--sop-card-soft); color: var(--sop-text); text-decoration: none; padding: 16px; display: grid; grid-template-columns: 48px 1fr; gap: 6px 12px; align-items: start; box-shadow: 0 10px 22px rgba(28, 78, 136, .05); transition: transform .2s ease, box-shadow .2s ease; } .sps-sop-doc-card:hover { color: var(--sop-text); transform: translateY(-3px); box-shadow: var(--sop-shadow-hover); } .sps-sop-doc-icon { grid-row: span 4; width: 48px; height: 48px; border-radius: 16px; background: var(--sop-gradient); color: #ffffff; display: grid; place-items: center; box-shadow: 0 10px 18px rgba(40, 102, 202, .16); } .sps-sop-doc-icon svg { width: 23px; height: 23px; stroke-width: 2.5; } .sps-sop-doc-card span { color: var(--sop-cyan-dark); font-size: 10px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; } .sps-sop-doc-card strong { color: var(--sop-heading); font-size: 14px; line-height: 1.22; font-weight: 950; } .sps-sop-doc-card p { margin: 0; color: var(--sop-muted); font-size: 12px; line-height: 1.4; } .sps-sop-doc-card small { color: var(--sop-muted); font-size: 11px; font-weight: 850; } /* ========================================================= Empty / Footer / Pagination ========================================================= */ .sps-sop-empty { min-height: 190px; border: 1px dashed var(--sop-line); border-radius: 20px; background: var(--sop-card-soft); color: var(--sop-muted); text-align: center; padding: 28px; display: grid; place-items: center; } .sps-sop-empty svg { width: 40px; height: 40px; color: var(--sop-cyan-dark); margin-bottom: 8px; } .sps-sop-empty strong { display: block; color: var(--sop-heading); font-size: 17px; font-weight: 950; } .sps-sop-empty p { margin: 4px 0 0; color: var(--sop-muted); font-size: 12px; } .sps-sop-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; color: var(--sop-muted); font-size: 12px; font-weight: 850; } .sps-sop-pagination { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; } .sps-sop-pagination button { min-width: 34px; height: 32px; border: 1px solid var(--sop-line); border-radius: 9px; background: var(--sop-card); color: var(--sop-blue); font-size: 12px; font-weight: 950; display: grid; place-items: center; padding: 0 10px; } .sps-sop-pagination button.active { color: #ffffff; border-color: transparent; background: var(--sop-gradient); } .sps-sop-pagination button:disabled { opacity: .45; cursor: not-allowed; } /* ========================================================= Modal / Form / Toast ========================================================= */ .sps-sop-modal-backdrop { position: fixed; inset: 0; z-index: 1060; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, .42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .sps-sop-modal-backdrop.is-open { display: flex; } .sps-sop-modal { width: min(620px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow: hidden; border: 1px solid var(--sop-line); border-radius: 22px; background: var(--sop-card); color: var(--sop-text); box-shadow: 0 28px 80px rgba(15, 23, 42, .28); } .sps-sop-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--sop-line-soft); } .sps-sop-modal-head h5 { margin: 0; color: var(--sop-heading); font-size: 18px; font-weight: 950; } .sps-sop-modal-close { width: 34px; height: 34px; border: 1px solid var(--sop-line); border-radius: 999px; background: var(--sop-card-soft); color: var(--sop-muted); font-size: 20px; line-height: 1; } .sps-sop-modal-body { max-height: calc(100vh - 210px); overflow: auto; padding: 20px; color: var(--sop-text); } .sps-sop-modal-body p { color: var(--sop-muted); } .sps-sop-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--sop-line-soft); background: var(--sop-card-soft); } .sps-sop-modal-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .sps-sop-info-item, .sps-sop-preview-box { border: 1px solid var(--sop-line-soft); border-radius: 16px; background: var(--sop-card-soft); padding: 14px; } .sps-sop-info-item span { display: block; color: var(--sop-muted); font-size: 10px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; } .sps-sop-info-item strong { display: block; margin-top: 5px; color: var(--sop-heading); font-size: 18px; font-weight: 950; } .sps-sop-preview-box { margin-top: 14px; } .sps-sop-preview-box h6 { margin: 0 0 8px; color: var(--sop-heading); font-size: 14px; font-weight: 950; } .sps-sop-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .sps-sop-form-grid label { display: grid; gap: 7px; } .sps-sop-form-grid label.full { grid-column: 1 / -1; } .sps-sop-form-grid label span { display: flex; align-items: center; gap: 8px; color: var(--sop-heading); font-size: 11px; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; } .sps-sop-form-grid label span::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--sop-gradient); box-shadow: 0 0 0 4px rgba(24, 197, 210, .10); } .sps-sop-form-grid input, .sps-sop-form-grid textarea { width: 100%; border: 1px solid var(--sop-line); border-radius: 13px; background: var(--sop-card); color: var(--sop-text); padding: 0 12px; font-size: 13px; outline: none; } .sps-sop-form-grid input { height: 40px; } .sps-sop-form-grid textarea { min-height: 98px; padding-top: 10px; resize: vertical; } .sps-sop-form-grid input:focus, .sps-sop-form-grid textarea:focus { border-color: rgba(24, 153, 220, .65); box-shadow: 0 0 0 4px rgba(24, 197, 210, .12); } .sps-sop-toast { position: fixed; right: 22px; bottom: 22px; z-index: 1080; display: none; max-width: 360px; padding: 13px 16px; border-radius: 16px; background: #16233d; color: #ffffff; box-shadow: 0 18px 48px rgba(15, 23, 42, .28); font-size: 13px; font-weight: 850; } .sps-sop-toast.is-open { display: block; } html[data-bs-theme="dark"] .sps-sop-toast { background: #223146; } /* ========================================================= Active Menu ========================================================= */ .main-menu .menu-link.active, .main-menu .menu-link[aria-current="page"] { background: rgba(255,255,255,.18); color: #ffffff !important; border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); } /* ========================================================= Responsive ========================================================= */ @media (max-width: 1500px) { .sps-sop-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sps-sop-grid-view { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1199px) { .sps-sop-heading-section, .sps-sop-library-head { flex-direction: column; gap: 12px; } .sps-sop-toolbar { grid-template-columns: 1fr; } .sps-sop-toolbar label, .sps-sop-filter, .sps-sop-search { align-items: flex-start; flex-direction: column; } .sps-sop-toolbar select, .sps-sop-toolbar input { width: 100%; } } @media (max-width: 767px) { .sps-sop-page { padding: 18px; border-radius: 26px; } .sps-sop-heading-section h5 { font-size: 22px; } .sps-sop-heading-section p { display: none; } .sps-sop-heading-actions { width: 100%; flex-wrap: wrap; } .sps-sop-control-btn { flex: 1 1 auto; } .sps-sop-module-grid, .sps-sop-grid-view, .sps-sop-modal-summary, .sps-sop-form-grid { grid-template-columns: 1fr; } .sps-sop-library-section { padding: 16px; border-radius: 20px; } .sps-sop-footer { align-items: flex-start; flex-direction: column; } .sps-sop-pagination { justify-content: flex-start; } } @media (max-width: 420px) { .sps-sop-dashboard-card { min-height: 84px; } .sps-sop-dashboard-icon { width: 38px; height: 38px; flex-basis: 38px; } .sps-sop-modal-body { padding: 16px; } } @media (prefers-reduced-motion: reduce) { .sps-sop-dashboard-card, .sps-sop-dashboard-card::after, .sps-sop-library-section::after, .sps-sop-control-btn, .sps-sop-modal-btn, .sps-sop-doc-card { animation: none !important; transition: none !important; } } /* ========================================================= SOP-specific aliases ========================================================= */ .sps-sop-code-pill { display: inline-grid; place-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 10.5px; font-weight: 950; color: var(--sop-blue); background: rgba(40, 102, 202, .10); } .sps-sop-department-pill { display: inline-grid; place-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 10.5px; font-weight: 950; color: var(--sop-cyan-dark); background: rgba(24, 197, 210, .12); } html[data-bs-theme="dark"] .sps-sop-department-pill { color: var(--sop-cyan); }