/* =============================================================================
Oracle Redwood Design System - Groupware Theme
Tokens derived from official Figma RDS Toolkit 24C
============================================================================= */
/* --- Font Faces --- */
@font-face {
font-family: 'OracleBrand VF';
src: url('../font/OracleBrandVF_Tb_WghtWdth.ttf') format('truetype-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'OracleBrand VF';
src: url('../font/OracleBrandVF_Tb_Italics_Wght.ttf') format('truetype-variations');
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
/* =============================================================================
Design Tokens (matches Figma exactly)
============================================================================= */
:root {
/* Page & Surfaces */
/* Cloudy white surfaces — NEVER use pure #fff for backgrounds */
--rw-surface-cloud: #FAF8F4; /* default cloudy white (near-white warm) */
--rw-surface-cloud-warm: #F7F2EE; /* warm variant for accent surfaces */
--rw-page-bg-neutral-0: #FAF8F4;
--rw-page-bg-neutral-10: #F5F2ED;
--rw-surface-neutral-0: #FAF8F4;
--rw-surface-neutral-10: #F1EDE7;
--rw-surface-neutral-20: #E9E4DC;
--rw-surface-neutral-30: #DCD7D0;
--rw-surface-neutral-strong: #928b86;
--rw-surface-subtle: rgba(22, 21, 19, 0.08);
/* Text & Icon */
--rw-text-primary: #161513;
--rw-text-secondary: rgba(22, 21, 19, 0.7);
--rw-text-disabled: rgba(22, 21, 19, 0.4);
--rw-text-inverse: #ffffff;
--rw-text-success: #436b1d;
--rw-text-danger: #b3311f;
--rw-text-warning: #855001;
--rw-text-info: #227e9e;
/* Borders */
--rw-border-divider: rgba(22, 21, 19, 0.12);
--rw-border-enabled: rgba(22, 21, 19, 0.5);
--rw-border-disabled: rgba(22, 21, 19, 0.2);
--rw-border-selected: #b3311f;
--rw-border-danger: #b3311f;
--rw-border-success: #436b1d;
/* Buttons - Solid (default neutral) */
--rw-btn-solid-surface: rgba(22, 21, 19, 0.08);
--rw-btn-solid-surface-hover: rgba(22, 21, 19, 0.12);
--rw-btn-solid-surface-active: rgba(22, 21, 19, 0.24);
--rw-btn-solid-text: #161513;
/* Buttons - Outline */
--rw-btn-outline-border: rgba(22, 21, 19, 0.5);
--rw-btn-outline-text: #161513;
/* Buttons - Borderless (Ghost) */
--rw-btn-borderless-text: #161513;
/* Buttons - CTA (Call-to-Action / Primary, dark charcoal) */
--rw-btn-cta-surface: #312d2a;
--rw-btn-cta-surface-hover: #1f1c1a;
--rw-btn-cta-text: #ffffff;
/* Buttons - Danger (Destructive) */
--rw-btn-danger-surface: #b3311f;
--rw-btn-danger-surface-hover: #8e2818;
--rw-btn-danger-text: #ffffff;
/* Buttons - Disabled */
--rw-btn-disabled-surface: rgba(22, 21, 19, 0.04);
--rw-btn-disabled-text: rgba(22, 21, 19, 0.4);
/* Brand */
--rw-brand: #c74634;
/* Typography */
--rw-font-family: 'OracleBrand VF', 'Oracle Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* Heading sizes */
--rw-heading-xl: 36px;
--rw-heading-xl-lh: 44px;
--rw-heading-lg: 28px;
--rw-heading-lg-lh: 36px;
--rw-heading-md: 24px;
--rw-heading-md-lh: 32px;
--rw-heading-sm: 20px;
--rw-heading-sm-lh: 28px;
/* Body sizes */
--rw-body-md: 16px;
--rw-body-md-lh: 20px;
--rw-body-sm: 13.75px;
--rw-body-sm-lh: 16px;
--rw-body-xs: 12px;
--rw-body-xs-lh: 16px;
--rw-body-2xs: 10px;
--rw-body-2xs-lh: 12px;
/* Font weights */
--rw-fw-regular: 400;
--rw-fw-semibold: 600;
--rw-fw-bold: 700;
--rw-fw-xbold: 800;
/* Spacing - aligned to Figma 4/8 grid */
--rw-space-2: 2px;
--rw-space-4: 4px;
--rw-space-8: 8px;
--rw-space-12: 12px;
--rw-space-16: 16px;
--rw-space-24: 24px;
--rw-space-32: 32px;
--rw-space-48: 48px;
--rw-space-64: 64px;
--rw-space-96: 96px;
/* Radius - angular / sharp UI (set to 0) */
--rw-radius-2: 0;
--rw-radius-4: 0;
--rw-radius-8: 0;
--rw-radius-10: 0;
--rw-radius-16: 0;
--rw-radius-full: 0;
/* Layout */
--rw-sidebar-width: 260px;
--rw-topbar-height: 56px;
/* Transition */
--rw-transition: 150ms ease-in-out;
}
/* =============================================================================
Base
============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
font-family: var(--rw-font-family);
font-size: var(--rw-body-md);
font-weight: var(--rw-fw-regular);
line-height: var(--rw-body-md-lh);
color: var(--rw-text-primary);
background-color: var(--rw-page-bg-neutral-10);
background-image: url('https://static.oracle.com/cdn/apex/21.1.0/themes/theme_42/1.6/images/rw/textures/texture-10.png');
background-repeat: repeat;
margin: 0;
font-feature-settings: 'lnum' 1, 'tnum' 1;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--rw-font-family);
color: var(--rw-text-primary);
margin-top: 0;
}
h1 { font-size: var(--rw-heading-xl); line-height: var(--rw-heading-xl-lh); font-weight: var(--rw-fw-xbold); }
h2 { font-size: var(--rw-heading-lg); line-height: var(--rw-heading-lg-lh); font-weight: var(--rw-fw-xbold); }
h3 { font-size: var(--rw-heading-md); line-height: var(--rw-heading-md-lh); font-weight: var(--rw-fw-bold); }
h4 { font-size: var(--rw-heading-sm); line-height: var(--rw-heading-sm-lh); font-weight: var(--rw-fw-bold); }
a {
color: var(--rw-text-primary);
text-decoration: none;
transition: color var(--rw-transition);
}
a:hover { color: var(--rw-text-primary); }
/* =============================================================================
Buttons (Figma node 29126:485)
- Default size: Medium (padding 14px 16px)
- Default style: Solid
- Font: Body/SemiBold/SM (13.75px / 16px / 600)
- Border-radius: 4px
============================================================================= */
.rw-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 16px; /* Medium */
font-family: var(--rw-font-family);
font-size: var(--rw-body-sm);
font-weight: var(--rw-fw-semibold);
line-height: var(--rw-body-sm-lh);
color: var(--rw-btn-solid-text);
background: var(--rw-btn-solid-surface);
border: none;
border-radius: var(--rw-radius-4);
cursor: pointer;
overflow: hidden;
white-space: nowrap;
transition: background var(--rw-transition);
}
.rw-btn:hover { background: var(--rw-btn-solid-surface-hover); color: var(--rw-btn-solid-text); }
.rw-btn:active { background: var(--rw-btn-solid-surface-active); color: var(--rw-btn-solid-text); }
.rw-btn:disabled,
.rw-btn[aria-disabled="true"] {
background: var(--rw-btn-disabled-surface);
color: var(--rw-btn-disabled-text);
cursor: not-allowed;
}
.rw-btn:focus-visible { outline: 2px solid var(--rw-border-selected); outline-offset: 2px; }
/* --- Style Variants --- */
.rw-btn--outline {
background: transparent;
border: 1px solid var(--rw-btn-outline-border);
color: var(--rw-btn-outline-text);
}
.rw-btn--outline:hover { background: var(--rw-btn-solid-surface); color: var(--rw-btn-outline-text); }
.rw-btn--outline:active { background: var(--rw-btn-solid-surface-hover); color: var(--rw-btn-outline-text); }
.rw-btn--borderless {
background: transparent;
color: var(--rw-btn-borderless-text);
}
.rw-btn--borderless:hover { background: var(--rw-btn-solid-surface); color: var(--rw-btn-borderless-text); }
.rw-btn--borderless:active { background: var(--rw-btn-solid-surface-hover); color: var(--rw-btn-borderless-text); }
.rw-btn--cta {
background: var(--rw-btn-cta-surface);
color: var(--rw-btn-cta-text);
}
.rw-btn--cta:hover { background: var(--rw-btn-cta-surface-hover); color: var(--rw-btn-cta-text); }
.rw-btn--cta:active { background: #0a0908; color: var(--rw-btn-cta-text); }
.rw-btn--danger {
background: var(--rw-btn-danger-surface);
color: var(--rw-btn-danger-text);
}
.rw-btn--danger:hover { background: var(--rw-btn-danger-surface-hover); color: var(--rw-btn-danger-text); }
.rw-btn--danger:active { background: #6b1c11; color: var(--rw-btn-danger-text); }
/* --- Size Variants --- */
.rw-btn--lg { padding: 18px 24px; }
.rw-btn--sm { padding: 10px 16px; }
/* --- Type Variants --- */
.rw-btn--icon-text {
gap: 10px;
padding: 10px 16px 10px 10px;
}
.rw-btn--icon-only {
padding: 10px;
}
.rw-btn--icon-text .rw-btn-icon,
.rw-btn--icon-only .rw-btn-icon {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* =============================================================================
Input - Text Field (Inside label)
============================================================================= */
.rw-field {
display: flex;
flex-direction: column;
gap: var(--rw-space-2);
width: 100%;
}
.rw-input-wrap {
display: flex;
align-items: center;
gap: var(--rw-space-12);
height: 52px;
padding: 8px 12px;
background: var(--rw-surface-cloud);
border: 1px solid var(--rw-border-enabled);
border-radius: var(--rw-radius-4);
transition: border-color var(--rw-transition), border-width var(--rw-transition);
position: relative;
}
.rw-input-wrap:hover { border-color: var(--rw-text-primary); }
.rw-input-wrap:focus-within {
border: 2px solid var(--rw-border-selected);
padding: 7px 11px;
}
.rw-input-wrap.rw-error {
border-color: var(--rw-border-danger);
}
.rw-input-wrap.rw-disabled {
background: rgba(255, 255, 255, 0.3);
border-color: var(--rw-border-disabled);
}
.rw-input-content {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
}
.rw-input-label {
font-family: var(--rw-font-family);
font-size: var(--rw-body-xs);
font-weight: var(--rw-fw-semibold);
line-height: var(--rw-body-xs-lh);
color: var(--rw-text-primary);
user-select: none;
}
.rw-input {
width: 100%;
padding: 0;
border: none;
outline: none;
background: transparent;
font-family: var(--rw-font-family);
font-size: var(--rw-body-md);
line-height: var(--rw-body-md-lh);
color: var(--rw-text-primary);
}
.rw-input::placeholder { color: var(--rw-text-secondary); }
.rw-input:disabled { color: var(--rw-text-disabled); cursor: not-allowed; }
.rw-input-icon-btn {
flex-shrink: 0;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: var(--rw-radius-4);
color: var(--rw-text-primary);
cursor: pointer;
transition: background var(--rw-transition);
}
.rw-input-icon-btn:hover { background: var(--rw-btn-solid-surface); }
.rw-field-assist {
display: flex;
font-family: var(--rw-font-family);
font-size: var(--rw-body-xs);
line-height: var(--rw-body-xs-lh);
color: var(--rw-text-secondary);
}
.rw-field-assist.rw-required { justify-content: flex-end; }
.rw-field-assist.rw-error-msg { color: var(--rw-text-danger); }
/* =============================================================================
Floating-label Field (Label Position = Inside)
============================================================================= */
.rw-field {
display: flex;
flex-direction: column;
gap: var(--rw-space-2);
width: 100%;
}
.rw-field-box {
position: relative;
display: block;
height: 52px;
background: var(--rw-surface-cloud);
border: 1px solid var(--rw-border-enabled);
border-radius: 0;
box-sizing: border-box;
cursor: text;
transition: border-color var(--rw-transition), border-width var(--rw-transition);
}
.rw-field-box:hover { border-color: var(--rw-text-primary); }
.rw-field-box:focus-within {
border: 2px solid var(--rw-border-selected);
}
.rw-field-box.rw-error {
border: 2px solid var(--rw-border-danger);
}
.rw-field-box.rw-disabled,
.rw-field-box:has(> .rw-field-input:disabled) {
background: rgba(255, 255, 255, 0.3);
border-color: var(--rw-border-disabled);
cursor: not-allowed;
}
.rw-field-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 22px 12px 6px;
border: 0;
outline: none;
background: transparent;
box-sizing: border-box;
font-family: var(--rw-font-family);
font-size: 16px;
line-height: 20px;
color: var(--rw-text-primary);
}
.rw-field-input::placeholder { color: var(--rw-text-secondary); }
.rw-field-input:disabled { color: var(--rw-text-disabled); cursor: not-allowed; }
.rw-field-input-label {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-family: var(--rw-font-family);
font-size: 13.75px;
font-weight: var(--rw-fw-semibold);
line-height: 16px;
color: var(--rw-text-primary);
pointer-events: none;
background: transparent;
white-space: nowrap;
transition: top var(--rw-transition), font-size var(--rw-transition), transform var(--rw-transition), color var(--rw-transition);
}
/* Label floats up when input focused OR has a value (placeholder is " ") */
.rw-field-box:focus-within .rw-field-input-label,
.rw-field-box.rw-filled .rw-field-input-label,
.rw-field-input:not(:placeholder-shown) ~ .rw-field-input-label {
top: 8px;
transform: translateY(0);
font-size: 12px;
line-height: 16px;
}
/* Borderless focus border adjustment so text doesn't shift when going 1px->2px */
.rw-field-box:focus-within .rw-field-input,
.rw-field-box.rw-error .rw-field-input {
padding: 21px 11px 5px;
}
/* Prefix / Suffix slots (icons) */
.rw-field-box.rw-has-prefix .rw-field-input { padding-left: 44px; }
.rw-field-box.rw-has-prefix .rw-field-input-label { left: 44px; }
.rw-field-box.rw-has-suffix .rw-field-input { padding-right: 44px; }
.rw-field-prefix, .rw-field-suffix {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--rw-text-primary);
pointer-events: none;
}
.rw-field-prefix { left: 12px; }
.rw-field-suffix { right: 12px; }
/* =============================================================================
Checkbox
============================================================================= */
.rw-checkbox {
display: inline-flex;
align-items: center;
gap: var(--rw-space-8);
padding: 8px 0;
font-family: var(--rw-font-family);
font-size: var(--rw-body-md);
line-height: var(--rw-body-md-lh);
color: var(--rw-text-primary);
cursor: pointer;
user-select: none;
background: none;
border: none;
}
.rw-checkbox input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
margin: 0;
background: var(--rw-surface-cloud);
border: 1px solid var(--rw-border-enabled);
border-radius: var(--rw-radius-2);
cursor: pointer;
position: relative;
flex-shrink: 0;
transition: background var(--rw-transition), border-color var(--rw-transition);
}
.rw-checkbox input[type="checkbox"]:hover { border-color: var(--rw-text-primary); }
.rw-checkbox input[type="checkbox"]:focus-visible {
outline: 2px solid var(--rw-border-selected);
outline-offset: 2px;
}
.rw-checkbox input[type="checkbox"]:checked {
background: var(--rw-text-primary);
border-color: var(--rw-text-primary);
}
.rw-checkbox input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 4px;
top: 1px;
width: 5px;
height: 9px;
border: solid #ffffff;
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg);
}
.rw-checkbox input[type="checkbox"]:disabled {
cursor: not-allowed;
opacity: 0.4;
}
.rw-checkbox input[type="checkbox"]:disabled + span { color: var(--rw-text-disabled); }
/* =============================================================================
Card (Figma node 29127:1731)
============================================================================= */
.rw-card {
display: flex;
flex-direction: column;
background: var(--rw-surface-neutral-0);
border: 1px solid var(--rw-border-divider);
border-radius: var(--rw-radius-8);
overflow: hidden;
}
.rw-card-content {
display: flex;
flex-direction: column;
gap: var(--rw-space-16);
padding: var(--rw-space-24);
background: var(--rw-surface-neutral-0);
}
.rw-card-header {
display: flex;
align-items: center;
gap: var(--rw-space-8);
height: 20px;
width: 100%;
}
.rw-card-meta {
flex: 1;
font-size: var(--rw-body-xs);
line-height: var(--rw-body-xs-lh);
color: var(--rw-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rw-card-title {
font-size: var(--rw-body-md);
line-height: var(--rw-body-md-lh);
font-weight: var(--rw-fw-bold);
color: var(--rw-text-primary);
margin: 0;
}
.rw-card-text {
font-size: var(--rw-body-sm);
line-height: var(--rw-body-sm-lh);
color: var(--rw-text-secondary);
}
.rw-card-footer {
display: flex;
gap: var(--rw-space-16);
padding: var(--rw-space-24);
background: var(--rw-surface-neutral-20);
}
/* =============================================================================
Badge
============================================================================= */
.rw-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 8px;
background: var(--rw-surface-subtle);
border-radius: var(--rw-radius-10);
font-size: var(--rw-body-2xs);
line-height: var(--rw-body-2xs-lh);
color: var(--rw-text-primary);
white-space: nowrap;
}
.rw-badge-success { background: rgba(67, 107, 29, 0.12); color: var(--rw-text-success); }
.rw-badge-danger { background: rgba(179, 49, 31, 0.12); color: var(--rw-text-danger); }
.rw-badge-info { background: rgba(34, 126, 158, 0.12); color: var(--rw-text-info); }
.rw-badge-warning { background: rgba(194, 84, 0, 0.12); color: var(--rw-text-warning); }
.rw-badge-outline {
background: transparent;
border: 1px solid var(--rw-border-enabled);
color: var(--rw-text-primary);
}
.rw-badge-neutral { background: var(--rw-surface-neutral-20); color: var(--rw-text-primary); }
/* =============================================================================
Tables
============================================================================= */
.rw-table {
width: 100%;
border-collapse: collapse;
font-size: var(--rw-body-sm);
background: var(--rw-surface-neutral-0);
}
.rw-table thead th {
padding: 12px 16px;
text-align: left;
font-size: var(--rw-body-xs);
line-height: var(--rw-body-xs-lh);
font-weight: var(--rw-fw-semibold);
color: var(--rw-text-secondary);
background: var(--rw-surface-neutral-20);
border-bottom: 1px solid var(--rw-border-divider);
}
.rw-table tbody td {
padding: 12px 16px;
border-bottom: 1px solid var(--rw-border-divider);
color: var(--rw-text-primary);
vertical-align: middle;
}
.rw-table tbody tr:hover { background: var(--rw-page-bg-neutral-10); }
.rw-table tbody tr:last-child td { border-bottom: none; }
/* =============================================================================
Divider
============================================================================= */
.rw-divider {
height: 1px;
background: var(--rw-border-divider);
border: none;
margin: var(--rw-space-16) 0;
}
/* =============================================================================
Bootstrap Overrides (smooth integration with existing JSPs)
============================================================================= */
/* Bootstrap btn → Redwood mapping
.btn-primary → CTA (dark charcoal)
.btn-secondary → Solid (subtle gray)
.btn-outline-* → Outline (border)
.btn-link / .btn-light → Borderless
*/
.btn {
font-family: var(--rw-font-family) !important;
font-size: var(--rw-body-sm) !important;
font-weight: var(--rw-fw-semibold) !important;
line-height: var(--rw-body-sm-lh) !important;
padding: 14px 16px !important;
border-radius: var(--rw-radius-4) !important;
border-width: 1px !important;
}
.btn-sm { padding: 10px 16px !important; }
.btn-lg { padding: 18px 24px !important; }
.btn-primary {
background-color: var(--rw-btn-cta-surface) !important;
border-color: var(--rw-btn-cta-surface) !important;
color: var(--rw-btn-cta-text) !important;
}
.btn-primary:hover, .btn-primary:focus {
background-color: var(--rw-btn-cta-surface-hover) !important;
border-color: var(--rw-btn-cta-surface-hover) !important;
}
.btn-secondary {
background-color: var(--rw-btn-solid-surface) !important;
border-color: transparent !important;
color: var(--rw-btn-solid-text) !important;
}
.btn-secondary:hover { background-color: var(--rw-btn-solid-surface-hover) !important; }
.btn-secondary:active { background-color: var(--rw-btn-solid-surface-active) !important; }
.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark {
background-color: transparent !important;
border-color: var(--rw-btn-outline-border) !important;
color: var(--rw-btn-outline-text) !important;
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover {
background-color: var(--rw-btn-solid-surface) !important;
color: var(--rw-btn-outline-text) !important;
}
.btn-link, .btn-light {
background-color: transparent !important;
border-color: transparent !important;
color: var(--rw-btn-borderless-text) !important;
text-decoration: none !important;
}
.btn-link:hover, .btn-light:hover {
background-color: var(--rw-btn-solid-surface) !important;
}
.btn-danger {
background-color: var(--rw-btn-danger-surface) !important;
border-color: var(--rw-btn-danger-surface) !important;
color: var(--rw-btn-danger-text) !important;
}
.btn-danger:hover { background-color: var(--rw-btn-danger-surface-hover) !important; }
.btn-success {
background-color: var(--rw-text-success) !important;
border-color: var(--rw-text-success) !important;
color: #ffffff !important;
}
.btn:disabled, .btn.disabled {
background-color: var(--rw-btn-disabled-surface) !important;
border-color: transparent !important;
color: var(--rw-btn-disabled-text) !important;
opacity: 1 !important;
}
.card {
background-color: var(--rw-surface-neutral-0) !important;
border: 1px solid var(--rw-border-divider) !important;
border-radius: var(--rw-radius-8) !important;
box-shadow: none !important;
}
.form-control, .form-select {
height: 44px !important;
padding: 8px 12px !important;
font-family: var(--rw-font-family) !important;
font-size: var(--rw-body-md) !important;
background-color: var(--rw-surface-cloud) !important;
border: 1px solid var(--rw-border-enabled) !important;
border-radius: var(--rw-radius-4) !important;
color: var(--rw-text-primary) !important;
}
.form-control:focus, .form-select:focus {
border: 2px solid var(--rw-border-selected) !important;
box-shadow: none !important;
outline: none !important;
}
.form-control::placeholder { color: var(--rw-text-secondary) !important; }
.form-label {
font-size: var(--rw-body-xs) !important;
font-weight: var(--rw-fw-semibold) !important;
color: var(--rw-text-primary) !important;
}
.table > thead > tr > th {
background: var(--rw-surface-neutral-20) !important;
border-bottom: 1px solid var(--rw-border-divider) !important;
font-size: var(--rw-body-xs) !important;
font-weight: var(--rw-fw-semibold) !important;
color: var(--rw-text-secondary) !important;
padding: 12px 16px !important;
}
.table > tbody > tr:hover { background: var(--rw-page-bg-neutral-10) !important; }
.badge {
background-color: var(--rw-surface-subtle) !important;
color: var(--rw-text-primary) !important;
border-radius: var(--rw-radius-10) !important;
font-weight: var(--rw-fw-regular) !important;
font-size: var(--rw-body-2xs) !important;
}
.badge.bg-success { background-color: rgba(67, 107, 29, 0.12) !important; color: var(--rw-text-success) !important; }
.badge.bg-danger { background-color: rgba(179, 49, 31, 0.12) !important; color: var(--rw-text-danger) !important; }
.modal-content {
border-radius: var(--rw-radius-8) !important;
border: 1px solid var(--rw-border-divider) !important;
box-shadow: 0 8px 24px rgba(22, 21, 19, 0.16) !important;
}
/* =============================================================================
APP SHELL (Sidebar + Topbar + Content)
Pure Redwood - no Phoenix dependencies
============================================================================= */
/* --- Top bar (fixed at top) ---
z-index must stay ABOVE megamenu and backdrop (300) */
.rw-appbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 300;
display: flex;
align-items: center;
justify-content: space-between;
height: 56px;
padding: 0 24px;
background: var(--rw-surface-cloud);
border-bottom: 1px solid var(--rw-border-divider);
}
.rw-appbar-left { display: flex; align-items: center; gap: 12px; }
.rw-appbar-right { display: flex; align-items: center; gap: 4px; }
.rw-appbar-logo {
display: inline-flex;
align-items: center;
padding: 0 4px;
text-decoration: none;
}
.rw-appbar-logo img {
height: 20px;
width: auto;
display: block;
}
.rw-appbar-logo:hover { text-decoration: none; }
.rw-appbar-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
background: transparent;
border-radius: 0;
color: var(--rw-text-primary);
cursor: pointer;
transition: background var(--rw-transition);
}
.rw-appbar-icon-btn:hover { background: var(--rw-btn-solid-surface); color: var(--rw-text-primary); }
.rw-appbar-divider {
width: 1px;
height: 20px;
background: var(--rw-border-divider);
margin: 0 8px;
}
.rw-appbar-user {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 8px;
border-radius: 0;
color: var(--rw-text-primary);
text-decoration: none;
font-family: var(--rw-font-family);
font-size: var(--rw-body-sm);
font-weight: var(--rw-fw-semibold);
}
.rw-appbar-user:hover { background: var(--rw-btn-solid-surface); color: var(--rw-text-primary); text-decoration: none; }
/* --- Sidebar --- */
.rw-sidebar {
position: fixed;
top: 56px; /* 56px appbar + 6px color strip */
left: 0;
bottom: 0;
width: var(--rw-sidebar-width);
background: var(--rw-surface-cloud);
border-right: 1px solid var(--rw-border-divider);
z-index: 95;
display: flex;
flex-direction: column;
font-family: var(--rw-font-family);
}
/* CTA buttons — pinned at top, never scrolls */
.rw-sidebar-cta {
flex-shrink: 0;
margin: 16px 16px 0;
padding-bottom: 16px;
border-bottom: 1px solid var(--rw-border-divider);
}
.rw-sidebar-cta .rw-btn {
width: 100%;
justify-content: center;
}
.rw-sidebar-cta--stack {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Nav area — scrollable */
.rw-sidebar-nav {
flex: 1;
overflow-y: auto;
padding: 16px 0;
/* Hide native scrollbar but keep scroll functionality */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge legacy */
}
.rw-sidebar-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* --- Animated hamburger → X button (togglse on body.rw-sidebar-open / rw-megamenu-open) --- */
.rw-burger { position: relative; }
.rw-burger-icon {
position: relative;
display: inline-block;
width: 20px;
height: 16px;
}
.rw-burger-bar {
position: absolute;
left: 0;
right: 0;
height: 2px;
background: currentColor;
border-radius: 0;
transition: transform 240ms cubic-bezier(.4,0,.2,1), top 240ms cubic-bezier(.4,0,.2,1), opacity 160ms ease;
}
.rw-burger-bar--top { top: 0; }
.rw-burger-bar--mid { top: 7px; }
.rw-burger-bar--bot { top: 14px; }
body.rw-sidebar-open .rw-burger .rw-burger-bar--top,
body.rw-megamenu-open .rw-burger .rw-burger-bar--top {
top: 7px;
transform: rotate(45deg);
}
body.rw-sidebar-open .rw-burger .rw-burger-bar--mid,
body.rw-megamenu-open .rw-burger .rw-burger-bar--mid {
opacity: 0;
transform: scaleX(0);
}
body.rw-sidebar-open .rw-burger .rw-burger-bar--bot,
body.rw-megamenu-open .rw-burger .rw-burger-bar--bot {
top: 7px;
transform: rotate(-45deg);
}
.rw-sidebar-label {
padding: 12px 24px 4px;
font-size: var(--rw-body-xs);
font-weight: var(--rw-fw-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--rw-text-tertiary, rgba(22,21,19,0.4));
}
.rw-sidebar-divider {
height: 1px;
background: var(--rw-border-divider);
margin: 4px 16px 8px;
border: 0;
}
/* Sidebar nav items */
.rw-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
margin: 1px 8px;
border-radius: 0;
color: var(--rw-text-secondary);
font-size: var(--rw-body-sm);
font-weight: var(--rw-fw-regular);
line-height: var(--rw-body-sm-lh);
text-decoration: none;
cursor: pointer;
transition: background var(--rw-transition), color var(--rw-transition);
background: transparent;
border: none;
text-align: left;
width: calc(100% - 16px);
}
.rw-nav-item:hover {
background: var(--rw-btn-solid-surface);
color: var(--rw-text-primary);
text-decoration: none;
}
.rw-nav-item.rw-active {
background: var(--rw-surface-neutral-20);
color: var(--rw-text-primary);
font-weight: var(--rw-fw-semibold);
}
.rw-nav-item-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-nav-item-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.rw-nav-item-badge {
background: var(--rw-btn-danger-surface);
color: #fff;
padding: 0 6px;
border-radius: 0;
font-size: 10px;
font-weight: var(--rw-fw-bold);
line-height: 16px;
min-width: 18px;
text-align: center;
}
.rw-nav-caret {
width: 12px;
height: 12px;
flex-shrink: 0;
transition: transform var(--rw-transition);
}
.rw-nav-group[aria-expanded="true"] .rw-nav-caret { transform: rotate(90deg); }
/* Nav group children (indented under parent) */
.rw-nav-children {
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.rw-nav-group[aria-expanded="true"] + .rw-nav-children { display: block; }
.rw-nav-children .rw-nav-item { padding-left: 40px; }
/* Sidebar fixed footer (사원목록) */
.rw-sidebar-footer {
margin-top: auto;
padding: 12px 16px;
border-top: 1px solid var(--rw-border-divider);
}
/* --- Sidebar sub-nav indent --- */
.rw-nav-children .rw-nav-item { padding-left: 44px; }
/* =============================================================================
APP SHELL LAYOUT
- Sidebar ALWAYS visible on desktop (left 260px)
- Hamburger button opens a SEPARATE mega-menu overlay from the top
- Mobile: sidebar becomes slide-in overlay, bottom nav shown
============================================================================= */
.rw-app-content {
margin-top: 56px;
margin-left: 260px;
min-height: calc(100vh - 56px);
background-color: var(--rw-page-bg-neutral-10);
background-image: url('https://static.oracle.com/cdn/apex/21.1.0/themes/theme_42/1.6/images/rw/textures/texture-10.png');
background-repeat: repeat;
display: flex;
flex-direction: column;
}
/* Redwood color strip at top of content (scrolls with page) */
.rw-app-content::before {
content: '';
display: block;
flex-shrink: 0;
height: 6px;
background: url('/assets/images/background/color-strip.png') repeat-x left center;
background-size: auto 6px;
}
/* Sidebar backdrop (used only on mobile) */
.rw-sidebar-backdrop { display: none; }
/* --- TABLET / MOBILE (<= 1023px): sidebar becomes slide-in overlay --- */
@media (max-width: 1023px) {
.rw-app-content { margin-left: 0; }
.rw-sidebar {
transform: translateX(-100%);
transition: transform 250ms ease;
z-index: 95;
}
body.rw-sidebar-open .rw-sidebar {
transform: translateX(0);
box-shadow: 0 0 32px rgba(0, 0, 0, 0.18);
}
.rw-sidebar-backdrop {
display: none;
position: fixed;
inset: 56px 0 0 0;
background: rgba(22, 21, 19, 0.35);
z-index: 85;
}
body.rw-sidebar-open .rw-sidebar-backdrop { display: block; }
}
/* =============================================================================
MEGA MENU OVERLAY (opened by header hamburger)
- Slides down from top, covers the app content (not the appbar)
- Shows ALL menus organized in columns by section
============================================================================= */
.rw-megamenu {
position: fixed;
top: 56px;
left: 0;
right: 0;
z-index: 200;
background: var(--rw-surface-cloud);
border-bottom: 1px solid var(--rw-border-divider);
box-shadow: 0 12px 32px rgba(22, 21, 19, 0.12);
transform: translateY(-100%);
transition: transform 280ms cubic-bezier(0.2, 0, 0.2, 1);
max-height: calc(100vh - 56px);
overflow-y: auto;
}
body.rw-megamenu-open .rw-megamenu {
transform: translateY(0);
}
.rw-megamenu-backdrop {
position: fixed;
inset: 56px 0 0 0;
background: rgba(22, 21, 19, 0.4);
backdrop-filter: blur(2px);
z-index: 195;
opacity: 0;
pointer-events: none;
transition: opacity 220ms ease;
}
body.rw-megamenu-open .rw-megamenu-backdrop {
opacity: 1;
pointer-events: auto;
}
.rw-megamenu-inner {
max-width: 1280px;
margin: 0 auto;
padding: 40px 48px;
}
.rw-megamenu-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 24px;
margin-bottom: 32px;
border-bottom: 1px solid var(--rw-border-divider);
}
.rw-megamenu-title {
font-size: var(--rw-heading-md);
font-weight: var(--rw-fw-xbold);
color: var(--rw-text-primary);
margin: 0;
letter-spacing: -0.01em;
}
.rw-megamenu-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px 48px;
}
@media (max-width: 1023px) { .rw-megamenu-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 599px) { .rw-megamenu-grid { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 1023px) { .rw-megamenu-inner { padding: 24px; } }
.rw-megamenu-col {
display: flex;
flex-direction: column;
gap: 4px;
}
.rw-megamenu-col-title {
font-size: var(--rw-body-xs);
font-weight: var(--rw-fw-semibold);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--rw-text-tertiary, rgba(22,21,19,0.4));
margin: 0 0 8px 0;
padding-bottom: 8px;
border-bottom: 2px solid var(--rw-border-divider);
}
.rw-megamenu-link {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
margin: 0 -12px;
font-size: var(--rw-body-md);
color: var(--rw-text-primary);
text-decoration: none;
border-radius: 0;
transition: background var(--rw-transition), color var(--rw-transition);
}
.rw-megamenu-link:hover {
background: var(--rw-surface-neutral-20);
color: var(--rw-text-primary);
text-decoration: none;
}
.rw-megamenu-link.rw-active {
background: var(--rw-surface-neutral-20);
font-weight: var(--rw-fw-semibold);
}
.rw-megamenu-link-badge {
margin-left: auto;
background: var(--rw-btn-danger-surface);
color: #fff;
padding: 0 6px;
border-radius: 0;
font-size: 10px;
font-weight: var(--rw-fw-bold);
line-height: 16px;
min-width: 18px;
text-align: center;
}
.rw-megamenu-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border: none;
background: transparent;
border-radius: 0;
color: var(--rw-text-primary);
cursor: pointer;
}
.rw-megamenu-close:hover { background: var(--rw-btn-solid-surface); }
/* --- App Footer --- */
.rw-appfooter {
margin-top: auto;
background: var(--rw-surface-neutral-0);
border-top: 1px solid var(--rw-border-divider);
padding: 16px 48px;
}
.rw-appfooter-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.rw-appfooter-copyright {
font-size: var(--rw-body-xs);
color: var(--rw-text-secondary);
}
/* --- Related Sites dropdown (footer) --- */
.rw-related { position: relative; }
.rw-related-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: transparent;
border: 1px solid var(--rw-border-divider);
border-radius: 0;
font-family: var(--rw-font-family);
font-size: var(--rw-body-sm);
font-weight: var(--rw-fw-regular);
color: var(--rw-text-secondary);
cursor: pointer;
transition: background var(--rw-transition), color var(--rw-transition), border-color var(--rw-transition);
text-decoration: none;
}
.rw-related-trigger:hover {
background: var(--rw-surface-neutral-20);
border-color: var(--rw-border-enabled);
color: var(--rw-text-primary);
}
.rw-related-trigger[aria-expanded="true"] { background: var(--rw-surface-neutral-20); border-color: var(--rw-border-enabled); color: var(--rw-text-primary); }
.rw-related-trigger[aria-expanded="true"] .rw-related-caret { transform: rotate(180deg); }
.rw-related-caret { transition: transform 150ms ease; }
.rw-related-menu {
min-width: 220px;
border-radius: 0 !important;
border: 1px solid var(--rw-border-divider) !important;
padding: 4px !important;
box-shadow: 0 8px 24px rgba(22, 21, 19, 0.12) !important;
margin-bottom: 8px !important;
list-style: none !important;
}
.rw-related-menu li {
list-style: none;
margin: 0;
}
.rw-related-menu li + li {
border-top: 1px solid var(--rw-border-divider);
}
.rw-related-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 12px;
font-family: var(--rw-font-family);
font-size: var(--rw-body-sm);
font-weight: var(--rw-fw-regular);
line-height: var(--rw-body-sm-lh);
color: var(--rw-text-primary);
text-decoration: none !important;
transition: background var(--rw-transition), color var(--rw-transition);
}
.rw-related-item::after {
content: '';
width: 14px;
height: 14px;
background: currentColor;
opacity: 0;
flex-shrink: 0;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
transition: opacity 120ms ease;
}
.rw-related-item:hover {
background: var(--rw-surface-neutral-20);
color: var(--rw-text-primary);
text-decoration: none !important;
}
.rw-related-item:hover::after { opacity: 0.6; }
@media (max-width: 1023px) {
.rw-appfooter { padding: 16px 24px; }
}
@media (max-width: 767px) {
.rw-appfooter { padding: 12px 16px; }
}
/* --- MOBILE (<= 767px) --- Compact appbar + bottom nav --- */
@media (max-width: 767px) {
.rw-appbar { height: 52px; padding: 0 12px; }
.rw-appbar-logo { font-size: 18px; }
.rw-appbar-user span:last-child { display: none; } /* hide name text */
.rw-appbar-divider { display: none; }
.rw-app-content {
margin-top: 52px;
margin-left: 0;
padding-bottom: 64px; /* space for bottom nav */
min-height: calc(100vh - 52px);
}
/* Sidebar becomes a full-height slide-in menu from left */
.rw-sidebar {
top: 52px;
width: 88vw;
max-width: 320px;
}
.rw-sidebar-backdrop { inset: 52px 0 0 0; }
/* Megamenu follows the shorter 52px appbar on mobile */
.rw-megamenu { top: 52px; max-height: calc(100vh - 52px); }
.rw-megamenu-backdrop { inset: 52px 0 0 0; }
/* Page header compact on mobile */
.rw-page-header { padding: 16px; }
.rw-page-header-inner { flex-direction: column; align-items: stretch; gap: 12px; }
.rw-page-title { font-size: var(--rw-heading-md); line-height: var(--rw-heading-md-lh); }
.rw-page-subtitle { font-size: var(--rw-body-sm); }
.rw-page-actions { justify-content: flex-start; flex-wrap: wrap; }
.rw-page-actions .rw-btn { flex: 1; min-width: 0; }
/* Main content compact */
.rw-main { padding: 16px !important; }
.rw-main-inner { padding: 0 !important; }
/* Cards edge-to-edge on mobile */
.rw-card { border-radius: var(--rw-radius-8); }
}
/* --- BOTTOM NAV (mobile only) ---
Replaces sidebar as primary nav on mobile */
.rw-bottom-nav {
display: none;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 95;
height: 64px;
background: var(--rw-surface-cloud);
border-top: 1px solid var(--rw-border-divider);
padding: 4px 8px env(safe-area-inset-bottom, 4px);
font-family: var(--rw-font-family);
}
.rw-bottom-nav-inner {
display: flex;
align-items: stretch;
justify-content: space-around;
height: 100%;
}
.rw-bottom-nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 4px;
background: transparent;
border: none;
color: var(--rw-text-tertiary, rgba(22,21,19,0.4));
font-size: 10px;
font-weight: var(--rw-fw-semibold);
text-decoration: none;
border-radius: 0;
transition: color var(--rw-transition);
}
.rw-bottom-nav-item:hover { color: var(--rw-text-secondary); text-decoration: none; }
.rw-bottom-nav-item.rw-active { color: var(--rw-text-primary); }
.rw-bottom-nav-item-icon {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
}
@media (max-width: 767px) {
.rw-bottom-nav { display: block; }
}
/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(22, 21, 19, 0.2); border-radius: var(--rw-radius-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(22, 21, 19, 0.4); }
/* =============================================================================
Additional Tokens (Figma nodes 29121:13801, 29149:16714, 29177:139541,
21214:70813, 4159:21974, 29175:55074, etc.)
============================================================================= */
:root {
--rw-palette-neutral-170: #312d2a;
--rw-palette-neutral-190: #161513;
--rw-border-selected-neutral: #161513;
--rw-switch-track-off: #8b8580;
--rw-switch-track-on: #227e9e;
--rw-switch-thumb: #fbf9f8;
--rw-dialog-surface: #fbf9f8;
--rw-shadow-xs: 0 1px 4px 0 rgba(0, 0, 0, 0.12);
--rw-shadow-md: 0 6px 12px 0 rgba(0, 0, 0, 0.2);
}
/* =============================================================================
Link / Anchor Navigation (Figma 29121:13801)
- Border-left 1px, pl 24px, py 14px
- Font: Body/Regular/MD (16px/20px/400)
============================================================================= */
.rw-anchor {
display: flex;
align-items: center;
padding: 14px 0 14px 24px;
border-left: 1px solid var(--rw-border-divider);
font-family: var(--rw-font-family);
font-size: var(--rw-body-md);
line-height: var(--rw-body-md-lh);
font-weight: var(--rw-fw-regular);
color: var(--rw-text-secondary);
text-decoration: none;
background: none;
cursor: pointer;
transition: color var(--rw-transition), border-color var(--rw-transition);
}
.rw-anchor:hover { color: var(--rw-text-primary); text-decoration: none; }
.rw-anchor.rw-active {
border-left-color: var(--rw-border-selected-neutral);
color: var(--rw-text-primary);
padding-left: 0;
gap: 16px;
}
.rw-anchor.rw-active::before {
content: '';
display: inline-block;
width: 8px; height: 16px;
margin-left: 0;
background: currentColor;
clip-path: polygon(0 0, 100% 50%, 0 100%);
flex-shrink: 0;
}
/* Inline text link (body-level) */
.rw-link {
font-family: inherit;
font-size: inherit;
color: var(--rw-text-primary);
text-decoration: underline;
text-underline-offset: 2px;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.rw-link:hover { color: var(--rw-text-info); }
/* =============================================================================
Radio (Figma 4496:51003)
- 16px radio, 20px container, gap 8px, py 8px
- Font: Body/Regular/MD
============================================================================= */
.rw-radio {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 0;
font-family: var(--rw-font-family);
font-size: var(--rw-body-md);
line-height: var(--rw-body-md-lh);
color: var(--rw-text-primary);
cursor: pointer;
user-select: none;
background: none;
border: none;
}
.rw-radio input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
margin: 0;
background: var(--rw-surface-cloud);
border: 1px solid var(--rw-border-enabled);
border-radius: 50%;
cursor: pointer;
position: relative;
flex-shrink: 0;
transition: border-color var(--rw-transition);
}
.rw-radio input[type="radio"]:hover { border-color: var(--rw-text-primary); }
.rw-radio input[type="radio"]:focus-visible { outline: 2px solid var(--rw-border-selected); outline-offset: 2px; }
.rw-radio input[type="radio"]:checked { border-color: var(--rw-text-primary); border-width: 1px; }
.rw-radio input[type="radio"]:checked::after {
content: '';
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--rw-text-primary);
}
.rw-radio input[type="radio"]:disabled { cursor: not-allowed; opacity: 0.4; }
.rw-radio input[type="radio"]:disabled + span { color: var(--rw-text-disabled); }
/* =============================================================================
Toggle / Switch (Figma 24386:2736)
- Track: 38px x 20px, radius 6px, padding 2px
- Thumb: 16x16, radius 4px, bg #fbf9f8
- Off: bg #8b8580 | On: bg #227e9e
============================================================================= */
.rw-switch {
display: inline-flex;
align-items: center;
cursor: pointer;
gap: 8px;
}
.rw-switch input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
position: relative;
width: 38px;
height: 20px;
padding: 2px;
background: var(--rw-switch-track-off);
border-radius: 0;
cursor: pointer;
transition: background var(--rw-transition);
margin: 0;
}
.rw-switch input[type="checkbox"]::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: var(--rw-switch-thumb);
border-radius: 0;
transition: left var(--rw-transition);
}
.rw-switch input[type="checkbox"]:checked {
background: var(--rw-switch-track-on);
}
.rw-switch input[type="checkbox"]:checked::before {
left: 20px;
}
.rw-switch input[type="checkbox"]:focus-visible { outline: 2px solid var(--rw-border-selected); outline-offset: 2px; }
.rw-switch input[type="checkbox"]:disabled { opacity: 0.4; cursor: not-allowed; }
/* =============================================================================
Tabs (Figma 4159:21974)
- Height 48px, gap 32px
- Active: border-bottom 3px #161513, text primary
- Inactive: text secondary
- Font: Body/SemiBold/MD (16px / 20px / 600)
============================================================================= */
.rw-tabs {
display: flex;
gap: 32px;
padding: 0 48px;
border-bottom: 1px solid var(--rw-border-divider);
overflow-x: auto;
}
.rw-tab {
display: inline-flex;
align-items: center;
gap: 8px;
height: 48px;
padding: 0 4px;
background: none;
border: none;
border-bottom: 3px solid transparent;
margin-bottom: -1px;
font-family: var(--rw-font-family);
font-size: var(--rw-body-md);
font-weight: var(--rw-fw-semibold);
line-height: var(--rw-body-md-lh);
color: var(--rw-text-secondary);
cursor: pointer;
white-space: nowrap;
text-decoration: none;
transition: color var(--rw-transition), border-color var(--rw-transition);
}
.rw-tab:hover { color: var(--rw-text-primary); text-decoration: none; }
.rw-tab.rw-active {
color: var(--rw-text-primary);
border-bottom-color: var(--rw-border-selected-neutral);
}
.rw-tab-icon { width: 24px; height: 24px; flex-shrink: 0; }
/* =============================================================================
Toast Message (Figma 29177:139541)
- bg #312d2a, radius 6px
- pl-16 pr-8 py-8
- Text white, 16px Regular
============================================================================= */
.rw-toast {
display: inline-flex;
align-items: flex-start;
gap: 16px;
background: var(--rw-palette-neutral-170);
padding: 8px 8px 8px 16px;
border-radius: 0;
color: #ffffff;
box-shadow: var(--rw-shadow-md);
}
.rw-toast-content {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 6px 0;
}
.rw-toast-icon { width: 24px; height: 24px; flex-shrink: 0; }
.rw-toast-text {
font-family: var(--rw-font-family);
font-size: var(--rw-body-md);
line-height: var(--rw-body-md-lh);
color: #ffffff;
padding-top: 2px;
}
.rw-toast-close {
width: 36px;
height: 36px;
padding: 8px;
background: transparent;
border: none;
border-radius: 0;
color: #ffffff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.rw-toast-close:hover { background: rgba(255, 255, 255, 0.08); }
/* =============================================================================
Tooltip (Figma 21214:70813)
- bg #161513, radius 4px
- px-8 py-5, max-width 306px
- Text white, 13.75px Regular
============================================================================= */
.rw-tooltip {
display: inline-block;
max-width: 306px;
padding: 5px 8px;
background: var(--rw-palette-neutral-190);
color: #ffffff;
font-family: var(--rw-font-family);
font-size: var(--rw-body-sm);
line-height: var(--rw-body-sm-lh);
font-weight: var(--rw-fw-regular);
border-radius: 0;
box-shadow: var(--rw-shadow-xs);
}
/* =============================================================================
Dialog / Modal (Figma 29149:16714)
- bg #fbf9f8, radius 6px
- Shadow: 0px 6px 12px rgba(0,0,0,0.2)
- Content padding 32px (md) / 16px (sm)
- Title: Heading/SM (24px / 32px / XBold 800)
- Actions: pt-40, gap-16
============================================================================= */
.rw-dialog-backdrop {
position: fixed;
inset: 0;
background: rgba(22, 21, 19, 0.5);
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
}
.rw-dialog-backdrop.rw-open { display: flex; }
.rw-dialog {
width: 100%;
max-width: 600px;
background: var(--rw-dialog-surface);
border-radius: 0;
box-shadow: var(--rw-shadow-md);
overflow: hidden;
position: relative;
}
.rw-dialog::before {
content: '';
display: block;
height: 20px;
width: 100%;
background-image: url('https://static.oracle.com/cdn/apex/21.1.0/themes/theme_42/1.6/images/rw/textures/texture-10.png');
background-size: 500px 500px;
opacity: 0.08;
}
.rw-dialog-content {
display: flex;
flex-direction: column;
padding: 32px;
}
.rw-dialog-title {
font-size: var(--rw-heading-md);
line-height: var(--rw-heading-md-lh);
font-weight: var(--rw-fw-xbold);
color: var(--rw-text-primary);
margin: 0;
}
.rw-dialog-body {
padding-top: 20px;
font-size: var(--rw-body-md);
line-height: var(--rw-body-md-lh);
color: var(--rw-text-primary);
}
.rw-dialog-actions {
display: flex;
justify-content: flex-end;
gap: 16px;
padding-top: 40px;
}
@media (max-width: 480px) {
.rw-dialog { max-width: 320px; border-radius: 6px 6px 0 0; }
.rw-dialog-content { padding: 32px 16px 24px; }
.rw-dialog-actions { flex-direction: column; }
.rw-dialog-actions > .rw-btn { width: 100%; }
}
/* =============================================================================
Table (Figma 29175:55054)
- Header: py-6 px-16, border-bottom 1px, font SemiBold/MD
- Cell: h-48, py-14 px-16, border-bottom 1px, font Regular/MD
- Padding columns 48px wide on left/right
============================================================================= */
table.rw-table-fig {
width: 100%;
border-collapse: collapse;
font-family: var(--rw-font-family);
background: var(--rw-surface-cloud);
border: 1px solid var(--rw-border-divider);
}
table.rw-table-fig thead th {
height: 48px;
padding: 6px 16px;
text-align: left;
font-size: var(--rw-body-md);
line-height: var(--rw-body-md-lh);
font-weight: var(--rw-fw-semibold);
color: var(--rw-text-primary);
border-bottom: 1px solid var(--rw-border-divider);
vertical-align: middle;
}
table.rw-table-fig tbody td {
height: 48px;
padding: 14px 16px;
font-size: var(--rw-body-md);
line-height: var(--rw-body-md-lh);
color: var(--rw-text-primary);
border-bottom: 1px solid var(--rw-border-divider);
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
table.rw-table-fig tbody tr:last-child td { border-bottom: none; }
table.rw-table-fig th:first-child,
table.rw-table-fig td:first-child { padding-left: 48px; }
table.rw-table-fig th:last-child,
table.rw-table-fig td:last-child { padding-right: 48px; }
table.rw-table-fig .rw-table-sort {
width: 36px;
height: 36px;
padding: 8px;
border: none;
background: transparent;
border-radius: 0;
cursor: pointer;
color: var(--rw-text-primary);
margin-left: 4px;
}
table.rw-table-fig .rw-table-sort:hover { background: var(--rw-btn-solid-surface); }
/* =============================================================================
LAYOUT COMPONENTS (Figma 29105:52292, 29120:117641)
Redwood page layout: Top Bar + Page Header + Content + In-App Navigation
============================================================================= */
/* --- App Shell --- */
.rw-app {
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--rw-page-bg-neutral-10);
}
/* --- Top Bar (Global) --- */
.rw-topbar {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
height: 56px;
padding: 0 24px;
background: var(--rw-surface-cloud);
border-bottom: 1px solid var(--rw-border-divider);
}
.rw-topbar-left { display: flex; align-items: center; gap: 24px; }
.rw-topbar-right { display: flex; align-items: center; gap: 8px; }
.rw-topbar-brand {
font-family: var(--rw-font-family);
font-size: 20px;
font-weight: var(--rw-fw-xbold);
color: var(--rw-brand);
text-decoration: none;
letter-spacing: -0.02em;
}
.rw-topbar-brand:hover { color: var(--rw-brand); text-decoration: none; }
/* --- Page Header (Figma) ---
Desktop: 176px tall, content 116px tall
- Breadcrumbs + Title + Actions + Optional subtitle
- Has texture background strip */
.rw-page-header {
position: relative;
padding: 24px 48px;
background: var(--rw-surface-neutral-30);
background-image: url('https://static.oracle.com/cdn/apex/21.1.0/themes/theme_42/1.6/images/rw/textures/texture-10.png');
background-repeat: repeat;
border-bottom: 1px solid var(--rw-border-divider);
}
@media (min-width: 1440px) {
.rw-page-header { padding: 32px 64px; }
}
@media (max-width: 1023px) {
.rw-page-header { padding: 20px 24px; }
}
.rw-page-header-inner {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin: 0 auto;
}
.rw-page-header-text {
flex: 1;
min-width: 0;
}
.rw-breadcrumb {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 8px;
font-size: var(--rw-body-xs);
line-height: var(--rw-body-xs-lh);
color: var(--rw-text-secondary);
}
.rw-breadcrumb a {
color: var(--rw-text-secondary);
text-decoration: none;
}
.rw-breadcrumb a:hover { color: var(--rw-text-primary); }
.rw-breadcrumb-sep { color: var(--rw-text-tertiary, rgba(22,21,19,0.4)); }
.rw-page-title {
font-family: var(--rw-font-family);
font-size: var(--rw-heading-lg);
line-height: var(--rw-heading-lg-lh);
font-weight: var(--rw-fw-xbold);
color: var(--rw-text-primary);
margin: 0 0 4px 0;
letter-spacing: -0.01em;
}
.rw-page-subtitle {
font-size: var(--rw-body-md);
line-height: var(--rw-body-md-lh);
color: var(--rw-text-secondary);
margin: 0;
}
.rw-page-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Mobile: stack title / subtitle / actions vertically, left-aligned */
@media (max-width: 767px) {
.rw-page-header { padding: 16px !important; }
.rw-page-header-inner {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.rw-page-header-text { width: 100%; }
.rw-page-title { font-size: var(--rw-heading-md); line-height: var(--rw-heading-md-lh); }
.rw-page-subtitle { font-size: var(--rw-body-sm); }
.rw-page-actions {
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
}
.rw-page-actions .rw-btn { flex: 1 1 auto; }
}
/* --- Main Content ---
Note: padding scales down with breakpoints
(see responsive rules at end of this block) */
.rw-main {
flex: 1;
padding: 32px 48px;
}
.rw-main-inner {
margin: 0 auto;
width: 100%;
}
@media (min-width: 1440px) {
.rw-main { padding: 40px 64px; }
}
@media (max-width: 1023px) {
.rw-main { padding: 24px; }
}
.rw-main-layout {
display: grid;
grid-template-columns: 1fr 464px;
gap: 32px;
}
/* --- Content Container (card-like white surface with inner padding) --- */
.rw-content {
background: var(--rw-surface-neutral-0);
border: 1px solid var(--rw-border-divider);
border-radius: var(--rw-radius-8);
padding: 48px;
}
.rw-content--flush { padding: 0; }
/* --- Side Panel --- */
.rw-side-panel {
background: var(--rw-surface-neutral-0);
border: 1px solid var(--rw-border-divider);
border-radius: var(--rw-radius-8);
padding: 24px;
align-self: start;
position: sticky;
top: 80px;
}
/* --- Form Section (header) ---
Figma: 52-78px tall with title + optional action row */
.rw-section {
padding-bottom: 16px;
border-bottom: 1px solid var(--rw-border-divider);
margin-bottom: 24px;
}
.rw-section-title {
font-family: var(--rw-font-family);
font-size: var(--rw-heading-sm);
line-height: var(--rw-heading-sm-lh);
font-weight: var(--rw-fw-bold);
color: var(--rw-text-primary);
margin: 0 0 4px 0;
}
.rw-section-desc {
font-size: var(--rw-body-sm);
line-height: var(--rw-body-sm-lh);
color: var(--rw-text-secondary);
}
/* --- Form Row (horizontal input grouping) ---
Figma: gap 24px, responsive columns */
.rw-form-stack { display: flex; flex-direction: column; gap: 16px; }
.rw-form-row {
display: grid;
grid-template-columns: repeat(var(--rw-row-cols, 2), 1fr);
gap: 24px;
}
.rw-form-row--3 { --rw-row-cols: 3; }
.rw-form-row--1 { --rw-row-cols: 1; }
/* --- Collection Container ---
Figma: toolbar-like row between form and table (filters, actions) */
.rw-collection {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 0;
border-top: 1px solid var(--rw-border-divider);
border-bottom: 1px solid var(--rw-border-divider);
margin-top: 24px;
}
.rw-collection-title {
font-size: var(--rw-body-md);
line-height: var(--rw-body-md-lh);
font-weight: var(--rw-fw-semibold);
color: var(--rw-text-primary);
}
.rw-collection-actions { display: flex; align-items: center; gap: 8px; }
/* --- In-App Navigation (Bottom) ---
Figma: 48-64px tall, full-width tabs for primary app sections */
.rw-inapp-nav {
position: sticky;
bottom: 0;
z-index: 90;
display: flex;
align-items: center;
justify-content: center;
height: 64px;
background: var(--rw-surface-neutral-0);
border-top: 1px solid var(--rw-border-divider);
padding: 0 24px;
overflow-x: auto;
}
.rw-inapp-nav-inner {
display: flex;
gap: 8px;
align-items: center;
width: 100%;
justify-content: center;
}
.rw-inapp-item {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
padding: 0 16px;
font-family: var(--rw-font-family);
font-size: var(--rw-body-sm);
font-weight: var(--rw-fw-semibold);
line-height: var(--rw-body-sm-lh);
color: var(--rw-text-secondary);
background: none;
border: none;
border-radius: 0;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: all var(--rw-transition);
}
.rw-inapp-item:hover {
color: var(--rw-text-primary);
background: var(--rw-btn-solid-surface);
text-decoration: none;
}
.rw-inapp-item.rw-active {
color: var(--rw-text-primary);
background: var(--rw-surface-neutral-20);
}
.rw-inapp-item-icon { width: 20px; height: 20px; flex-shrink: 0; }
/* --- KPI/Stat Tile (for overview pages) --- */
.rw-stat {
display: flex;
flex-direction: column;
gap: 8px;
padding: 24px;
background: var(--rw-surface-neutral-0);
border: 1px solid var(--rw-border-divider);
border-radius: var(--rw-radius-8);
}
.rw-stat-label {
font-size: var(--rw-body-xs);
font-weight: var(--rw-fw-semibold);
color: var(--rw-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.rw-stat-value {
font-family: var(--rw-font-family);
font-size: 32px;
line-height: 40px;
font-weight: var(--rw-fw-xbold);
color: var(--rw-text-primary);
letter-spacing: -0.02em;
}
.rw-stat-delta {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--rw-body-sm);
color: var(--rw-text-success);
}
.rw-stat-delta--down { color: var(--rw-text-danger); }
/* =============================================================================
Avatar (Figma 1069:6617) — sizes + palette colors (29121:11771)
============================================================================= */
.rw-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 32px;
height: 32px;
background: #5c5651;
color: #fff;
border-radius: 0;
font-family: var(--rw-font-family);
font-size: var(--rw-body-sm);
font-weight: var(--rw-fw-regular);
line-height: 1;
text-transform: uppercase;
overflow: hidden;
user-select: none;
}
.rw-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Shape */
.rw-avatar--circle { border-radius: 50%; }
/* Sizes */
.rw-avatar--2xs { width: 20px; height: 20px; font-size: 9px; }
.rw-avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.rw-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.rw-avatar--md { width: 32px; height: 32px; font-size: 13px; }
.rw-avatar--lg { width: 44px; height: 44px; font-size: 16px; }
.rw-avatar--xl { width: 56px; height: 56px; font-size: 20px; }
.rw-avatar--2xl { width: 72px; height: 72px; font-size: 28px; }
/* Color palette (Redwood) — base color + Figma texture overlay via background-image */
.rw-avatar--neutral { background: #5c5651 url('/assets/images/avatar/neutral.png') center/cover no-repeat; }
.rw-avatar--blue { background: #437c94 url('/assets/images/avatar/blue.png') center/cover no-repeat; }
.rw-avatar--gray { background: #6f757e url('/assets/images/avatar/gray.png') center/cover no-repeat; }
.rw-avatar--lilac { background: #6b7494 url('/assets/images/avatar/lilac.png') center/cover no-repeat; }
.rw-avatar--teal { background: #4f7d7b url('/assets/images/avatar/teal.png') center/cover no-repeat; }
.rw-avatar--pink { background: #925865 url('/assets/images/avatar/pink.png') center/cover no-repeat; }
.rw-avatar--purple { background: #846a92 url('/assets/images/avatar/purple.png') center/cover no-repeat; }
.rw-avatar--green { background: #4c825c url('/assets/images/avatar/green.png') center/cover no-repeat; }
.rw-avatar--slate { background: #798b8a url('/assets/images/avatar/slate.png') center/cover no-repeat; }
/* Linked avatar (wrapped in ) */
a.rw-avatar-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--rw-text-primary);
text-decoration: none;
}
a.rw-avatar-link:hover { text-decoration: none; color: var(--rw-text-primary); }
a.rw-avatar-link:hover .rw-avatar-link-name { text-decoration: underline; }
.rw-avatar-link-name { white-space: nowrap; }
/* --- Responsive (layout tokens for grids/side-panels) --- */
@media (max-width: 1023px) {
.rw-main-layout { grid-template-columns: 1fr; }
.rw-side-panel { position: static; }
.rw-form-row, .rw-form-row--3 { grid-template-columns: 1fr; }
.rw-content { padding: 24px; }
}
@media (max-width: 767px) {
.rw-content { padding: 16px; border-radius: var(--rw-radius-8); }
}
/* === Pagination === */
.rw-pagination-wrap { display: flex; padding: 16px 0; }
.rw-pagination-wrap--left { justify-content: flex-start; }
.rw-pagination-wrap--center { justify-content: center; }
.rw-pagination-wrap--right { justify-content: flex-end; }
.rw-pagination {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--rw-font-family);
}
.rw-pagination .rw-page-btn,
.rw-pagination .rw-page-num {
appearance: none;
background: transparent;
border: 1px solid transparent;
border-radius: 0;
min-width: 32px;
height: 32px;
padding: 0 8px;
font: inherit;
font-size: var(--rw-body-sm);
font-weight: 500;
color: var(--rw-text-primary);
text-decoration: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.rw-pagination a.rw-page-btn:hover,
.rw-pagination a.rw-page-num:hover {
background: var(--rw-surface-neutral-10);
border-color: var(--rw-border-divider);
color: var(--rw-text-primary);
text-decoration: none;
}
.rw-pagination .rw-page-btn.rw-disabled,
.rw-pagination .rw-page-num.rw-disabled {
color: var(--rw-border-disabled);
cursor: not-allowed;
pointer-events: none;
}
.rw-pagination .rw-page-num.rw-active {
background: var(--rw-text-primary);
color: #fff;
border-color: var(--rw-text-primary);
cursor: default;
pointer-events: none;
}
.rw-pagination .rw-page-btn:focus-visible,
.rw-pagination .rw-page-num:focus-visible {
outline: 2px solid var(--rw-border-selected);
outline-offset: 1px;
}
/* =============================================================================
Dialog (Figma 5385:56388 / 5391:53524 / 5391:53586)
— General / Destructive / Unsaved-changes variants share layout
— Desktop: 600px modal; Mobile: 320+ bottom-sheet
============================================================================= */
.rw-dialog-overlay {
position: fixed;
inset: 0;
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(22, 21, 19, 0.5);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 160ms ease, visibility 160ms;
}
.rw-dialog-overlay.rw-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.rw-dialog {
position: relative;
width: 100%;
max-width: 600px;
background: var(--rw-surface-cloud);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
border-radius: 0;
overflow: hidden;
transform: translateY(8px);
transition: transform 180ms ease;
font-family: var(--rw-font-family);
}
.rw-dialog--wide {
max-width: 1100px;
}
.rw-dialog-overlay.rw-open .rw-dialog { transform: translateY(0); }
.rw-dialog-texture {
height: 20px;
width: 100%;
background-image: url('/assets/images/dialog/texture.png');
background-size: 500px 500px;
background-position: top left;
opacity: 0.08;
pointer-events: none;
}
.rw-dialog-content {
padding: 32px;
display: flex;
flex-direction: column;
align-items: stretch;
}
.rw-dialog-title {
margin: 0;
font-family: var(--rw-font-family);
font-size: 24px;
line-height: 32px;
font-weight: var(--rw-fw-xbold);
color: var(--rw-text-primary);
}
.rw-dialog-body {
margin: 20px 0 0;
font-size: 16px;
line-height: 20px;
color: var(--rw-text-primary);
white-space: pre-line;
}
.rw-dialog-actions {
display: flex;
justify-content: flex-end;
gap: 16px;
margin-top: 40px;
}
@media (max-width: 599px) {
.rw-dialog-overlay {
align-items: flex-end;
padding: 0;
}
.rw-dialog {
max-width: 100%;
transform: translateY(100%);
}
.rw-dialog--wide {
max-width: 100%;
}
.rw-dialog-overlay.rw-open .rw-dialog { transform: translateY(0); }
.rw-dialog-content { padding: 32px 16px 24px; }
.rw-dialog-actions {
flex-direction: column-reverse;
gap: 12px;
}
.rw-dialog-actions .rw-btn { width: 100%; }
}
/* =============================================================================
File Picker (Figma 4560:27453 / 29160:285384)
Dropzone with dashed border — states: enabled / hover / active / disabled / error
Hidden sits inside for native click + drop; button "Add Files"
variant also available.
============================================================================= */
.rw-file-picker {
position: relative;
display: block;
width: 100%;
padding: 24px;
background: var(--rw-surface-cloud);
border: 1px dashed var(--rw-border-enabled);
border-radius: 0;
cursor: pointer;
box-sizing: border-box;
transition: background-color 120ms ease, border-color 120ms ease;
}
.rw-file-picker:hover { background: color-mix(in srgb, var(--rw-surface-cloud) 92%, #161513 8%); }
.rw-file-picker:active,
.rw-file-picker.rw-active { background: color-mix(in srgb, var(--rw-surface-cloud) 84%, #161513 16%); }
.rw-file-picker.rw-dragover {
background: color-mix(in srgb, var(--rw-surface-cloud) 92%, #161513 8%);
border-color: var(--rw-border-selected);
}
.rw-file-picker.rw-error { border-color: var(--rw-border-danger); }
.rw-file-picker.rw-disabled,
.rw-file-picker[aria-disabled="true"] {
background: rgba(22, 21, 19, 0.04);
border-style: dashed;
border-color: var(--rw-border-disabled);
cursor: not-allowed;
color: var(--rw-text-disabled);
}
.rw-file-picker.rw-disabled .rw-file-picker-title,
.rw-file-picker.rw-disabled .rw-file-picker-hint { color: var(--rw-text-disabled); }
.rw-file-picker:focus-within {
outline: 2px solid var(--rw-border-selected);
outline-offset: 2px;
}
.rw-file-picker-text {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
}
.rw-file-picker-title {
margin: 0;
font-family: var(--rw-font-family);
font-size: 20px;
line-height: 28px;
font-weight: var(--rw-fw-bold);
color: var(--rw-text-primary);
}
.rw-file-picker-hint {
margin: 0;
font-family: var(--rw-font-family);
font-size: 13.75px;
line-height: 16px;
color: var(--rw-text-secondary);
}
.rw-file-picker-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.rw-file-picker-input:disabled { cursor: not-allowed; }
/* Selected file chip list shown under the dropzone */
.rw-file-picker-files {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 12px;
}
.rw-file-picker-files:empty { display: none; }
.rw-file-picker-file {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--rw-surface-cloud);
border: 1px solid var(--rw-border-divider);
font-family: var(--rw-font-family);
font-size: var(--rw-body-sm);
color: var(--rw-text-primary);
}
.rw-file-picker-file-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rw-file-picker-file-size {
color: var(--rw-text-secondary);
font-size: var(--rw-body-xs);
}
/* "Add Files" button variant (smaller, with + icon) */
.rw-file-picker-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
}
.rw-file-picker-btn .rw-file-picker-input { position: absolute; inset: 0; }
@media (max-width: 640px) {
.rw-file-picker { padding: 16px; }
.rw-file-picker-title { font-size: 16px; line-height: 22px; }
.rw-file-picker-hint { font-size: 12px; }
}
/* Icon size helpers — used inline with SVGs everywhere */
.rw-icon-16 { width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; }
.rw-icon-20 { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }
.rw-icon-24 { width: 24px; height: 24px; flex-shrink: 0; vertical-align: middle; }
/* =============================================================================
Filter panel (global — used on all list pages)
Originally in pages/sign.css; promoted to redwood.css so every page gets it
without needing to link sign.css. Classes kept as .sign-filter-* for backcompat.
============================================================================= */
.sign-filter-panel {
background: var(--rw-surface-cloud);
border: 1px solid var(--rw-border-divider);
border-radius: 0;
margin-bottom: 20px;
}
.sign-filter-panel[open] { border-color: var(--rw-border-selected); }
.sign-filter-summary {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
cursor: pointer;
list-style: none;
user-select: none;
font-family: var(--rw-font-family);
font-size: var(--rw-body-sm);
color: var(--rw-text-primary);
font-weight: var(--rw-fw-semibold);
}
.sign-filter-summary::-webkit-details-marker { display: none; }
.sign-filter-summary::marker { content: ""; }
.sign-filter-summary:hover { background: var(--rw-surface-neutral-10); }
.sign-filter-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--rw-text-secondary);
}
.sign-filter-panel[open] .sign-filter-icon { color: var(--rw-border-selected); }
.sign-filter-title { flex: 0 0 auto; }
.sign-filter-active-count {
color: var(--rw-border-selected);
font-weight: var(--rw-fw-semibold);
font-size: var(--rw-body-sm);
}
.sign-filter-spacer { flex: 1 1 auto; }
.sign-filter-chevron {
width: 14px;
height: 14px;
flex-shrink: 0;
color: var(--rw-text-secondary);
transition: transform 160ms ease;
}
.sign-filter-panel[open] .sign-filter-chevron { transform: rotate(180deg); }
.sign-filter-body {
padding: 20px;
border-top: 1px solid var(--rw-border-divider);
background: var(--rw-surface-cloud);
}
.sign-filter-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px 24px;
}
.sign-filter-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.sign-filter-label {
font-size: 12px;
color: var(--rw-text-secondary);
font-weight: var(--rw-fw-regular);
}
.sign-filter-search {
display: flex;
align-items: stretch;
gap: 0;
}
.sign-filter-search .rw-select {
min-width: 96px;
border-right-width: 0;
}
.sign-filter-search .rw-input {
flex: 1 1 auto;
min-width: 0;
}
.sign-filter-daterange {
display: flex;
align-items: center;
gap: 8px;
}
.sign-filter-daterange .rw-input {
flex: 1 1 0;
min-width: 0;
}
.sign-filter-dash {
color: var(--rw-text-secondary);
font-size: 13px;
flex-shrink: 0;
}
.sign-filter-panel .rw-input,
.sign-filter-panel .rw-select {
height: 40px;
padding: 0 12px;
border: 1px solid var(--rw-border-enabled);
border-radius: 0;
background: var(--rw-surface-cloud);
color: var(--rw-text-primary);
font-family: var(--rw-font-family);
font-size: var(--rw-body-sm);
box-sizing: border-box;
width: 100%;
}
.sign-filter-panel .rw-select { cursor: pointer; }
.sign-filter-panel .rw-input:focus,
.sign-filter-panel .rw-select:focus {
outline: none;
border-color: var(--rw-border-selected);
box-shadow: inset 0 0 0 1px var(--rw-border-selected);
position: relative;
z-index: 1;
}
.sign-filter-panel .rw-input::placeholder { color: var(--rw-text-secondary); }
.sign-filter-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--rw-border-divider);
}
.sign-filter-actions .rw-btn { min-width: 88px; }
.sign-filter-panel + .sign-search-bar { display: none; }
@media (max-width: 767px) {
.sign-filter-summary { padding: 10px 12px; font-size: 13px; }
.sign-filter-body { padding: 14px; }
.sign-filter-grid { grid-template-columns: 1fr; gap: 14px; }
.sign-filter-search .rw-select { min-width: 84px; }
.sign-filter-actions { flex-direction: column-reverse; align-items: stretch; }
.sign-filter-actions .rw-btn { width: 100%; min-width: 0; }
}
/* =============================================================================
Mobile: .rw-table-fig → card list layout (결재/게시판/관리자 리스트 공통)
Each becomes a card; cells flow via `order` by data-label (auto-set by
rwTableLabels in project9.js). Columns without explicit rules fall to end.
============================================================================= */
@media (max-width: 767px) {
table.rw-table-fig { display: block !important; border: 0 !important; width: 100% !important; table-layout: auto !important; }
table.rw-table-fig colgroup,
table.rw-table-fig thead { display: none !important; }
table.rw-table-fig tbody { display: block !important; }
table.rw-table-fig tbody tr {
display: flex !important;
flex-wrap: wrap !important;
align-items: center;
column-gap: 8px;
row-gap: 2px;
background: var(--rw-surface-cloud);
border: 1px solid var(--rw-border-divider);
margin-bottom: 8px;
padding: 14px;
box-sizing: border-box;
width: 100%;
}
table.rw-table-fig tbody td {
display: inline-flex !important;
align-items: center;
padding: 0 !important;
height: auto !important;
border: 0 !important;
overflow: visible !important;
white-space: normal !important;
text-overflow: clip !important;
font-size: var(--rw-body-sm);
line-height: 1.4;
color: var(--rw-text-primary);
word-break: break-word;
order: 100;
min-width: 0;
}
table.rw-table-fig tbody td::before { display: none !important; }
table.rw-table-fig tbody td:empty { display: none; }
/* Empty-state row */
table.rw-table-fig tbody td.sign-empty-cell {
display: block;
width: 100%;
text-align: center;
padding: 24px 0;
color: var(--rw-text-secondary);
}
/* === Row 1: 문서번호 (left) + 종류/상태 badges (right) === */
table.rw-table-fig tbody td[data-label="문서번호"],
table.rw-table-fig tbody td[data-label="업무번호"],
table.rw-table-fig tbody td[data-label="번호"] {
order: 1;
flex: 0 0 auto;
font-size: var(--rw-body-xs);
color: var(--rw-text-secondary);
font-weight: var(--rw-fw-semibold);
}
table.rw-table-fig tbody td[data-label="종류"],
table.rw-table-fig tbody td[data-label="구분"] {
order: 2;
flex: 0 0 auto;
margin-left: auto;
}
table.rw-table-fig tbody td[data-label="상태"] {
order: 3;
flex: 0 0 auto;
}
/* === Row 1 (sign) / Row 0 (board): 제목 — 전폭 · 1줄 말줄임 === */
table.rw-table-fig tbody td[data-label="제목"],
table.rw-table-fig tbody td.sign-td-title,
table.rw-table-fig tbody td.board-td-title {
order: 10;
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
font-size: var(--rw-body-md);
line-height: 1.5;
font-weight: var(--rw-fw-semibold);
color: var(--rw-text-primary);
padding: 4px 0 2px !important;
display: block !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* Title children (a, span) also clipped */
table.rw-table-fig tbody td[data-label="제목"] > *,
table.rw-table-fig tbody td.sign-td-title > *,
table.rw-table-fig tbody td.board-td-title > * {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
/* === Row 2: 작성자 | 조회수 | 첨부 (small gray, separators) === */
table.rw-table-fig tbody td[data-label="작성자"] {
order: 20;
flex: 0 0 auto;
font-size: var(--rw-body-xs);
color: var(--rw-text-secondary);
}
table.rw-table-fig tbody td[data-label="조회수"] {
order: 21;
flex: 0 0 auto;
font-size: var(--rw-body-xs);
color: var(--rw-text-secondary);
}
table.rw-table-fig tbody td[data-label="첨부"],
table.rw-table-fig tbody td[data-label="첨부파일"] {
order: 22;
flex: 0 0 auto;
font-size: var(--rw-body-xs);
color: var(--rw-text-secondary);
}
table.rw-table-fig tbody td[data-label="작성자"]::after,
table.rw-table-fig tbody td[data-label="조회수"]::after {
content: "|";
margin-left: 6px;
color: var(--rw-border-divider);
font-weight: 300;
}
table.rw-table-fig tbody td[data-label="작성자"]:last-child::after,
table.rw-table-fig tbody td[data-label="조회수"]:last-child::after { display: none; }
/* === Row 3: 작성일 (right-aligned, own line) === */
table.rw-table-fig tbody td[data-label="작성일"] {
order: 30;
flex: 0 0 100%;
margin-left: 0;
text-align: right;
justify-content: flex-end;
font-size: var(--rw-body-xs);
color: var(--rw-text-secondary);
padding-top: 2px !important;
}
/* === Hide unimportant columns on mobile (reduces clutter) === */
table.rw-table-fig tbody td[data-label="No"],
table.rw-table-fig tbody td[data-label=""] {
display: none;
}
/* Checkbox column (no header text) — float at start of card */
table.rw-table-fig tbody td:first-child:has(input[type="checkbox"]) {
order: 0;
flex: 0 0 auto;
}
/* Clickable rows */
table.rw-table-fig tbody tr[onclick],
table.rw-table-fig tbody tr.sign-row-link { cursor: pointer; }
table.rw-table-fig tbody tr[onclick]:active,
table.rw-table-fig tbody tr.sign-row-link:active { background: var(--rw-surface-neutral-10); }
/* Wrappers: remove horizontal scroll on mobile (!important to beat page CSS) */
.sign-table-wrap,
.board-table-wrap,
.admin-table-wrap,
.rw-table-wrap {
overflow-x: visible !important;
border: 0 !important;
background: transparent !important;
}
/* Avatar in 작성자 cell should be compact */
table.rw-table-fig tbody td[data-label="작성자"] .rw-avatar {
width: 20px;
height: 20px;
font-size: 9px;
margin-right: 4px;
}
/* Badge sizing inside card row 1 */
table.rw-table-fig tbody td[data-label="종류"] .rw-badge,
table.rw-table-fig tbody td[data-label="상태"] .rw-badge {
font-size: 11px;
padding: 2px 8px;
}
/* =============================================================
Board list (게시판) row 2: 작성일 → 작성자 → 조회수 → 첨부
Overrides generic data-label ordering when board-col-* classes
are present (BoardListSub.jsp and product type rows).
============================================================= */
table.rw-table-fig tbody td.board-col-writer {
order: 20;
flex: 0 0 auto;
font-size: var(--rw-body-xs);
color: var(--rw-text-secondary);
}
table.rw-table-fig tbody td.board-col-date {
order: 21;
flex: 0 0 auto;
flex-basis: auto;
width: auto;
margin-left: 0;
text-align: left;
justify-content: flex-start;
padding-top: 0 !important;
font-size: var(--rw-body-xs);
color: var(--rw-text-secondary);
}
table.rw-table-fig tbody td.board-col-hit {
order: 22;
flex: 0 0 auto;
font-size: var(--rw-body-xs);
color: var(--rw-text-secondary);
text-align: left;
}
table.rw-table-fig tbody td.board-col-attach {
order: 23;
flex: 0 0 auto;
font-size: var(--rw-body-xs);
color: var(--rw-text-secondary);
text-align: left;
}
/* Separator bars between board meta cells */
table.rw-table-fig tbody td.board-col-writer::after,
table.rw-table-fig tbody td.board-col-date::after,
table.rw-table-fig tbody td.board-col-hit::after {
content: "|";
margin-left: 6px;
color: var(--rw-border-divider);
font-weight: 300;
}
table.rw-table-fig tbody td.board-col-attach::after { display: none; }
/* If attach is empty (no files), drop the trailing separator on hit */
table.rw-table-fig tbody td.board-col-hit:last-child::after,
table.rw-table-fig tbody td.board-col-hit:has(+ td.board-col-attach:empty)::after {
display: none;
}
/* Icon sizing inside board meta cells on mobile */
table.rw-table-fig tbody td.board-col-date .board-meta-icon,
table.rw-table-fig tbody td.board-col-hit .board-meta-icon,
table.rw-table-fig tbody td.board-col-attach .board-meta-icon {
width: 12px;
height: 12px;
margin-right: 3px;
}
/* 공지 badge: show only inside title on mobile, hide elsewhere */
table.rw-table-fig tbody td.board-col-writer .board-notice-badge,
table.rw-table-fig tbody td[data-label="작성자"] .board-notice-badge {
display: none;
}
/* Thumb column on product board — compact on mobile */
table.rw-table-fig tbody td.board-col-thumb {
order: 5;
flex: 0 0 auto;
}
table.rw-table-fig tbody td.board-col-thumb img {
max-width: 48px;
}
/* Extra-vars columns flow into row 2 on board */
table.rw-table-fig tbody td.board-col-extra {
order: 19;
flex: 0 0 auto;
font-size: var(--rw-body-xs);
color: var(--rw-text-secondary);
}
table.rw-table-fig tbody td.board-col-extra:empty { display: none; }
}
/* =============================================================================
Loading overlay (figurex / data upload pages)
============================================================================= */
.fx-loading-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(22, 21, 19, 0.5);
}
.fx-spinner {
width: 48px;
height: 48px;
border: 4px solid var(--rw-border-divider);
border-top-color: var(--rw-text-primary);
border-radius: 50%;
animation: fx-spin 0.7s linear infinite;
}
@keyframes fx-spin { to { transform: rotate(360deg); } }