*{
margin: 0;
padding: 0;
}
html, body {
margin: 0;
padding: 0;
font-family: "Roboto Mono, monospace", sans-serif;
/* font-weight: 600; */
background-color: #292929;
color: #ececec;
line-height: 1.5;
min-height: 100vh;
min-width: 100vw;
width:calc(100% + 0px);
display: grid;
grid-template-columns: auto 1fr;
font-size: 14px;
overflow: hidden;
/* overflow: hidden; */
}
body {
display: flex;
width: 100%;
}
/* Sidebar container resets */
#sidebar {
flex-shrink: 0;
height: 100vh;
overflow: hidden;
}
/* Main wrapper takes remaining space and enables scrolling */
.oms-main-wrapper {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
height: 100vh;
overflow: hidden;
}
/* Header stays fixed at top */
#globalHeader {
flex-shrink: 0;
}
/* Main content scrolls independently */
.oms-main-wrapper main {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
/* Optional: Custom scrollbar styling */
.oms-main-wrapper main::-webkit-scrollbar {
width: 8px;
}
.oms-main-wrapper main::-webkit-scrollbar-track {
background: var(--oms-bg-default, #1a1a1a);
}
.oms-main-wrapper main::-webkit-scrollbar-thumb {
background: var(--oms-border-default, #333);
border-radius: 4px;
}
.oms-main-wrapper main::-webkit-scrollbar-thumb:hover {
background: var(--oms-border-hover, #555);
}
/* Remove old top-bar if it exists */
.top-bar {
display: none;
}
:root{
--base-clr: #202020;
--line-clr: #c6c3b7;
--hover-clr: rgba(255, 255, 255, 0.055);
--text-clr: rgb(155, 155, 155);
--accent-clr: #939187;
--secondary-text-clr: #c6c3b7;
--mono-bg: #222;
--mono-bg-light: #333;
--mono-bg-lighter: #444;
--mono-border: #555;
--mono-text: #ececec;
--mono-text-muted: #b0b0b0;
--mono-accent: #fff;
--mono-chip-bg: #444;
--mono-chip-bg-hover: #555;
--mono-chip-border: #888;
--mono-chip-text: #ececec;
--mono-chip-filter-bg: #222;
--mono-chip-filter-border: #888;
--mono-chip-filter-text: #ececec;
}
#sidebar {
flex-shrink: 0;
}
body > div:not(#sidebar),
body > main,
.oms-main {
flex: 1;
min-width: 0;
overflow-x: hidden;
}
a {
color: var(--mono-text-muted);
}
a:hover {
color: var(--mono-accent);
text-decoration: underline;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
/* margin: 0.5em 0; */
}
.mt-3 {
margin-top: 3rem;
}
/* Utility classes */
.hidden {
display: none !important;
}
.text-center {
text-align: center;
}
.logo {
background-image: url("../assets/logo.png");
background-size: cover;
width: 36px;
height: 36px;
}
button {
/* margin-top: 0.75em; */
padding: 0.6em 1.2em;
/* background-color: #c6c3b7;
color: #292929; */
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
/* width: 100%;
text-align: center; */
transition: background-color 0.15s ease-in-out;
}
button:is(#clearFiltersBtn, #applyFiltersBtn) {
width:100%;
}
button:hover {
background-color: #939187;
}
button:disabled {
background-color: #aaa;
cursor: not-allowed;
}
.top-bar {
/* height: 44px; */
/* background: red; */
max-width: 100vw;
/* width:calc(100% + 0px); */
padding: min(15px, 7%);
}
/* ----------------------------------------------
2) NAVIGATION BAR
---------------------------------------------- */
/* nav {
background-color: #ffffff;
border-bottom: 1px solid #ddd;
padding: 0.5em 1em;
display: flex;
gap: 1em;
align-items: center;
}
nav a {
font-size: 1rem;
color: #007acc;
padding: 0.3em 0.6em;
border-radius: 4px;
}
nav a:hover {
background-color: rgba(0, 122, 204, 0.1);
} */
/* ----------------------------------------------
3) PAGE CONTAINER
---------------------------------------------- */
/* ----------------------------------------------
4) FORMS & BUTTONS
---------------------------------------------- */
form {
margin-bottom: 1.5em;
/* background-color: #fbfbfb; */
/* padding: 1em; */
/* border: 1px solid #ececec; */
border-radius: 4px;
}
form label, #driveSection label {
display: flex;
flex-direction: column !important;
margin-bottom: 0.5em;
font-size: 0.95rem;
color: var(--text-clr);
}
fieldset label {
display: flex;
flex-direction: row !important;
gap: 1rem;
}
form input[type="text"],
form input[type="date"], select, textarea,form input[type="email"],
form select
{
width: 100%;
max-width: 400px;
padding: 0.5em;
margin-top: 0.2em;
/* border: 1px solid #ccc; */
border-radius: 4px;
font-size: 1rem;
box-sizing: border-box;
/* background: #939187; */
background: var(--text-clr);
}
form button {
margin-top: 0.75em;
padding: 0.6em 1.2em;
background-color: #c6c3b7;
color: #292929;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.15s ease-in-out;
}
form button:hover {
background-color: #939187;
}
form button:disabled {
background-color: #aaa;
cursor: not-allowed;
}
fieldset {
background: #363636;
}
form label, #enableCategories label {
flex-direction: row !important;
gap: 1rem;
}
.file-row {
display: flex;
align-items: center;
/* border: 1px solid #666; */
border-radius: 6px;
padding: 0.75em;
gap: 1rem;
margin-bottom: 1rem;
/* background-color: #1e1e1e; */
}
.file-check {
transform: scale(1.3);
margin-right: 0.5rem;
}
.file-thumb {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 4px;
flex-shrink: 0;
}
.file-info {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: 0.25rem;
}
.file-name {
font-size: 0.95rem;
font-weight: 500;
color: #ddd;
}
.file-cat {
padding: 0.4em 0.6em;
font-size: 0.9rem;
background-color: #2c2c2c;
border: 1px solid #555;
color: white;
border-radius: 4px;
}
/* ----------------------------------------------
5) ALERT / WARNING MESSAGES
---------------------------------------------- */
.alert {
padding: 0.75em 1em;
border: 1px solid transparent;
border-radius: 4px;
margin-bottom: 1em;
}
.alert-error {
background-color: #ffe6e6;
border-color: #f5c2c2;
color: #a12b2b;
}
.alert-warning {
background-color: #fff4e6;
border-color: #f9d8b4;
color: #8a5a2b;
}
.alert-success {
background-color: #e6ffed;
border-color: #b3f2c7;
color: #276733;
}
/* ----------------------------------------------
6) CLIENTS & SHOOTS TABLES
---------------------------------------------- */
/* .table-nav {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 1rem;
align-items:center;
}
table:is(#clientTable, #brandTable, #assetTable) {
width: 100%;
border-collapse: collapse;
font-family: sans-serif;
}
:is(#clientTable, #brandTable, #assetTable) thead {
background-color: #242424;
color: #707070;
}
:is(#clientTable, #brandTable, #assetTable) thead th {
text-align: left;
padding: 12px;
font-weight: 600;
font-size: 14px;
}
:is(#clientTable, #brandTable) tbody {
background-color: #363636;
color: #707070;
}
:is(#clientTable, #brandTable, #assetTable) tbody td {
padding: 12px;
font-size: 14px;
border-top: 1px solid #2a2a2a;
}
:is(#clientTable, #brandTable, #assetTable) button.delete-btn {
background-color: transparent;
border: 1px solid #707070;
color: #707070;
padding: 4px 10px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.2s ease;
}
:is(#clientTable, #brandTable, #assetTable) button.delete-btn:hover {
background-color: #505050;
}
.status.active {
background-color: #678E46;
color: #171717;
padding: 4px 8px;
border-radius: 4px;
font-size: 13px;
display: inline-block;
} */
/* ----------------------------------------------
7) ASSET GRID & CARDS
---------------------------------------------- */
.asset-card .filename {
margin-top: 1rem;
}
.asset-card img,
.asset-card video {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
.asset-card video {
width: 100%;
height: 100%;
}
.asset-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
margin-top: 0;
padding: 0;
width: 100%;
align-items: stretch;
}
.asset-card {
background: #222;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: stretch;
min-width: 320px;
max-width: 400px;
/* height: 360px; */
position: relative;
overflow: hidden;
transition: box-shadow 0.2s;
}
.asset-card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.asset-thumb {
width: 100%;
height: 260px;
display: flex;
align-items: center;
justify-content: center;
background: #292929;
}
.asset-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.filename-top {
/* width: 100%; */
background: #222;
color: var(--text-clr);
padding: 0.7em 1em;
font-size: 0.8rem;
text-align: center;
font-weight: 500;
border-bottom: 1px solid #333;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.asset-actions {
display: flex;
gap: 2em;
justify-content: space-between;
align-items: center;
background: #292929;
padding: 1.2em 1rem;
color: var(--text-clr) !important;
font-size: 0.8rem;
border-top: 1px solid #333;
}
.asset-action-btn {
background: transparent;
border: none;
color: #ececec;
cursor: pointer;
padding: 0.4rem;
border-radius: 4px;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s, transform 0.1s;
}
.asset-action-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
transform: scale(1.1);
}
.asset-action-btn i {
font-size: 1rem;
}
.asset-actions-right {
display: flex;
align-items: center;
gap: 0.25rem;
}
.toolbar-btn,
button,
.search-action-btn {
background: var(--mono-bg-light);
color: var(--mono-text);
border: 1px solid var(--mono-border);
}
.toolbar-btn:hover,
button:hover,
.search-action-btn:hover {
background: var(--mono-bg-lighter);
color: var(--mono-accent);
border-color: var(--mono-accent);
}
/* --- Asset Details Drawer Enhancements --- */
.asset-details-header {
width: 100%;
border-bottom: none;
margin-bottom: 0.5rem;
padding-bottom: 0;
gap: 0.5rem;
}
.asset-details-panel-wrapper {
display: flex;
flex-direction: column;
}
.asset-title {
font-size: 1.1rem;
font-weight: 700;
color: #fff;
word-break: break-all;
margin-bottom: 0.5rem;
}
.asset-details-meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
margin-top: 0.5rem;
width: 100%;
}
.asset-filename {
font-size: 0.95rem;
color: #fff;
word-break: break-all;
}
.asset-type-tag {
font-size: 0.85rem;
margin-top: 0.2em;
}
.asset-actions-top {
display: flex;
gap: 0.5rem;
margin-bottom: 0;
}
.icon-btn {
background: none;
border: none;
color: #b0b0b0;
font-size: 1.2rem;
padding: 0.3em 0.6em;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.icon-btn:hover {
background: #444;
color: #fff;
}
.asset-details-body {
display: flex;
gap: 2.5rem;
align-items: flex-start;
margin-top: 1.5rem;
}
.asset-drawer-tabs {
display: flex;
gap: 0.5em;
border-bottom: 1px solid var(--mono-chip-border);
margin-bottom: 1em;
}
.drawer-tab {
background: none;
border: none;
color: var(--mono-text-muted);
font-size: 1em;
padding: 0.7em 1.2em;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color 0.2s, border-bottom 0.2s;
}
.drawer-tab.active {
color: var(--mono-accent);
border-bottom: 2px solid var(--mono-accent);
font-weight: bold;
}
.drawer-tab-content {
display: none;
}
.drawer-tab-content[data-tab="details"] {
display: flex;
flex-direction: row;
gap: 2.5rem;
align-items: flex-start;
width: 100%;
min-height: 420px;
}
.drawer-tab-content[data-tab="activity"],
.drawer-tab-content[data-tab="related"] {
display: block;
padding-top: 1em;
}
.details-section-activity {
flex-direction: column;
}
.asset-preview-section {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.asset-preview-img, .asset-preview-video {
width: 100%;
border-radius: 6px;
box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.asset-preview-placeholder {
width: 100%;
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
color: #888;
background: #222;
border-radius: 10px;
font-size: 1.1rem;
margin-bottom: 1rem;
}
/* Right column: details grid */
.asset-info-section {
display: flex;
flex-direction: column;
gap: 1.2rem;
font-size: 0.88rem; /* ~12% smaller */
max-width: 540px;
min-width: 220px;
}
.details-group {
margin-bottom: 1.5rem;
}
.details-section-title {
font-size: 0.90rem; /* was 1.05rem */
font-weight: 600;
color: #b0b0b0;
margin-bottom: 0.5rem;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.details-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.2rem;
padding: 0.2em 0;
border-bottom: 1px solid #333;
}
.details-label {
color: #b0b0b0;
font-size: 0.95em; /* was 0.97em */
min-width: 110px;
font-weight: 500;
}
.details-value {
color: #ececec;
font-size: 0.95em; /* was 1em */
font-weight: 400;
text-align: right;
word-break: break-all;
}
.tag-chip {
display: inline-block;
background: #333;
color: #ececec;
border-radius: 12px;
padding: 0.15em 0.7em;
font-size: 0.85em;
/* margin: 0 0.2em 0.2em 0; */
border: 1px solid #555;
}
.category-chip {
display: inline-block;
background: #232323;
color: #fff;
border-radius: 10px;
padding: 0.15em 0.8em;
font-size: 0.9em;
border: 1px solid #666;
}
.asset-nav {
display: flex;
justify-content: center;
gap: 1.5rem;
margin: 0.5rem 0 0.5rem 0;
}
.asset-nav .icon-btn {
font-size: 1.5rem;
padding: 0.2em 0.7em;
}
.asset-preview-modal {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.88);
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
}
.asset-preview-modal .modal-content {
position: relative;
padding: 2rem;
}
.asset-preview-modal .close-modal {
position: absolute;
top: 1.5rem;
right: 2rem;
font-size: 2.5rem;
color: #fff;
cursor: pointer;
z-index: 10;
}
.related-assets .details-section-title {
margin-bottom: 0.5rem;
}
.related-thumb {
width: 56px;
height: 56px;
object-fit: cover;
border-radius: 8px;
margin-right: 0.5rem;
cursor: pointer;
border: 2px solid #333;
transition: border 0.2s;
}
.related-thumb:hover {
border: 2px solid #fff;
}
/* Responsive: stack columns on small screens */
@media (max-width: 900px) {
.asset-details-panel {
flex-direction: column;
gap: 1.5rem;
align-items: stretch;
}
.asset-details-left {
flex-direction: row;
gap: 2rem;
max-width: 100%;
width: 100%;
justify-content: flex-start;
}
.asset-info-section {
grid-template-columns: 1fr;
gap: 1.2rem 0;
max-width: 100%;
}
.asset-preview-img, .asset-preview-video {
max-width: 180px;
max-height: 180px;
}
}
/* Tag editing styles */
.tag-chip.editable {
background: var(--mono-chip-bg);
color: var(--mono-chip-text);
border: 1px solid var(--mono-chip-border);
position: relative;
/* padding-right: 1.5em; */
transition: background 0.2s, color 0.2s;
}
.tag-chip.editable:hover {
background: var(--mono-chip-bg-hover);
color: var(--mono-accent);
border-color: var(--mono-accent);
}
.tag-remove {
display: inline-block;
margin-left: 0.5em;
color: #e57373;
font-weight: bold;
cursor: pointer;
font-size: 1em;
background: none;
border: none;
border-radius: 50%;
padding: 0 0.3em;
transition: background 0.2s, color 0.2s;
}
.tag-chip.editable .tag-remove:hover {
color: var(--mono-accent);
background: #e57373;
}
.tag-input {
border: 1px solid var(--mono-chip-border);
border-radius: 8px;
padding: 0.2em 0.7em;
font-size: 0.95em;
margin-left: 0.2em;
margin-right: 0.2em;
background: var(--mono-bg);
color: var(--mono-text);
outline: none;
min-width: 80px;
max-width: 120px;
transition: border 0.2s;
}
.tag-input:focus {
border: 1.5px solid var(--mono-accent);
background: var(--mono-bg-light);
}
.tag-add-btn {
background: var(--mono-accent);
color: var(--mono-bg);
border: none;
border-radius: 50%;
font-size: 0.8em;
width: 12px;
/* height: 1.7em; */
margin-left: 0.2em;
cursor: pointer;
transition: background 0.2s, color 0.2s;
vertical-align: middle;
display: inline-flex;
align-items: center;
justify-content: center;
}
.tag-add-btn:hover {
background: var(--mono-chip-bg-hover);
color: var(--mono-accent);
}
.tag-suggestions {
position: absolute;
left: 0;
top: 100%;
min-width: 120px;
background: var(--mono-bg);
border: 1px solid var(--mono-chip-border);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
z-index: 1000;
display: none;
max-height: 180px;
text-align: left;
overflow-y: auto;
font-size: 0.95em;
}
.tag-suggestion-item {
padding: 0.4em 1em;
cursor: pointer;
color: var(--mono-chip-text);
transition: background 0.18s, color 0.18s;
}
.tag-suggestion-item:hover {
background: var(--mono-accent);
color: var(--mono-bg);
}
.tags-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0.2em;
position: relative;
min-height: 2.2em;
}
.edit-icon {
cursor: pointer;
color: var(--mono-text-muted);
font-size: 0.8em;
margin-left: 0.5em;
display: flex;
align-items: center;
gap: 1em;
transition: color 0.2s;
}
.edit-icon:hover {
color: var(--mono-accent);
}
/* Add to your styles.css */
.category-input {
border: 1px solid var(--mono-chip-border);
border-radius: 8px;
padding: 0.2em 0.7em;
font-size: 0.95em;
margin-left: 0.2em;
margin-right: 0.2em;
background: var(--mono-bg);
color: var(--mono-text);
outline: none;
min-width: 120px;
max-width: 180px;
transition: border 0.2s;
}
.category-row {
position: relative;
display: inline-block;
width: 100%;
}
.category-input:focus {
border: 1.5px solid var(--mono-accent);
background: var(--mono-bg-light);
}
.category-suggestions {
position: absolute;
left: 0;
top: 100%;
min-width: 120px;
background: var(--mono-bg);
border: 1px solid var(--mono-chip-border);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
z-index: 1000;
display: none;
max-height: 180px;
text-align: left;
overflow-y: auto;
font-size: 0.95em;
}
.category-suggestion-item {
padding: 0.4em 1em;
cursor: pointer;
color: var(--mono-chip-text);
transition: background 0.18s, color 0.18s;
}
.category-suggestion-item:hover {
background: var(--mono-accent);
color: var(--mono-bg);
}
/* Activity timeline enhancements */
.activity-group-label {
color: #b0b0b0;
font-weight: 600;
margin: 1em 0 0.5em 0;
font-size: 1em;
}
.activity-row {
display: flex;
align-items: flex-start;
gap: 1em;
border-bottom: 1px solid #333;
padding: 0.7em 0;
font-size: 0.98em;
}
.activity-icon {
font-size: 1.3em;
margin-top: 0.2em;
color: #4caf50;
}
.activity-main {
flex: 1;
}
.activity-meta {
display: flex;
gap: 1em;
color: #b0b0b0;
font-size: 0.92em;
margin-bottom: 0.2em;
}
.activity-action {
font-weight: bold;
color: #ececec;
}
.activity-user {
color: #8ecae6;
}
.activity-time {
color: #888;
font-size: 0.85em;
}
.activity-details {
color: #b0b0b0;
font-size: 0.97em;
margin-left: 0.5em;
word-break: break-all;
}
.tag-chip {
display: inline-block;
background: #333;
color: #ececec;
border-radius: 12px;
padding: 0.15em 0.7em;
font-size: 0.85em;
border: 1px solid #555;
margin-right: 0.2em;
}
.asset-table {
width: 100%;
border-collapse: collapse;
/* background: #181818; */
color: #ececec;
font-size: 1em;
margin-bottom: 1em;
}
.asset-table th, .asset-table td {
padding: 0.7em 0.6em;
border-bottom: 1px solid #222;
text-align: left;
}
.asset-table th {
position: sticky;
top: 0;
/* background: #20232a; */
z-index: 2;
}
.asset-table tr {
border-bottom: 1px solid #333;
}
.asset-table tr:hover {
background: #222;
}
.bulk-action-bar {
display: flex;
align-items: center;
gap: 1em;
background: #222;
color: #ececec;
padding: 0.7em 1.2em;
border-bottom: 2px solid #444;
position: sticky;
top: 0;
z-index: 10;
}
.bulk-action-bar .danger-btn {
background: #b73c2e;
color: #fff;
border: 1px #ec5949 solid;
font-weight: bold;
padding: 0.7em 1.2em;
border-radius: 4px;
margin-left: 1em;
cursor: pointer;
transition: background 0.2s;
}
.bulk-action-bar .danger-btn:hover {
background: #c0392b;
}
.table-action-btn {
background: none;
border: none;
color: #ececec;
font-size: 1.1em;
cursor: pointer;
margin-right: 0.3em;
padding: 0.2em 0.4em;
}
.table-action-btn:hover {
color: var(--mono-accent, #4caf50);
}
/* ----------------------------------------------
8) UPLOAD PROGRESS BAR (on Add Assets page)
---------------------------------------------- */
#progressContainer {
margin-top: 1.5em;
width: 100%;
background: #eee;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
height: 24px;
display: none; /* shown only during upload */
}
#progressFill {
height: 100%;
width: 0%;
background-color: #007acc;
transition: width 0.3s ease;
}
#statusText {
margin-top: 0.5em;
font-size: 0.95rem;
}
input[type="checkbox"] {
accent-color: var(--mono-text-muted); /* Use your accent or primary color */
width: 18px;
height: 18px;
cursor: pointer;
background: #222;
border-radius: 4px;
border: 1px solid #444;
}
/* ----------------------------------------------
9) RESPONSIVE SMALL VIEW
---------------------------------------------- */
@media (max-width: 720px) {
.asset-card {
width: 100%;
min-width: 100%;
max-width: 100%;
/* height: 140px; */
}
form input[type="text"],
form input[type="date"],
form select {
max-width: 100%;
}
table, .asset-grid {
font-size: 0.9rem;
}
}
#clientList {
list-style: none;
padding-left: 0;
}
#clientList li {
padding: 0.5em;
border-bottom: 1px solid #ececec;
}
#clientList li:last-child {
border-bottom: none;
}
.nav-section-header {
font-size: 0.85em;
color: #b0b0b0;
text-transform: uppercase;
letter-spacing: 1px;
margin: 1.2em 0 0.3em 0.5em;
padding: 0.5em 0 0.2em 0.5em;
pointer-events: none;
font-weight: 600;
border: none;
background: none;
}
main{
padding: min(10px, 7%);
}
main p{
/* color: var(--secondary-text-clr); */
margin-top: 5px;
margin-bottom: 15px;
}
.container{
border: 1px solid var(--line-clr);
border-radius: 1em;
margin-bottom: 20px;
padding: min(3em, 15%);
h2, p { margin-top: 1em }
}
@media(max-width: 800px){
body{
grid-template-columns: 1fr;
}
main{
padding: 2em 1em 60px 1em;
}
.container{
border: none;
padding: 0;
}
#sidebar{
height: 60px;
width: 100%;
border-right: none;
border-top: 1px solid var(--line-clr);
padding: 0;
position: fixed;
top: unset;
bottom: 0;
> ul{
padding: 0;
display: grid;
grid-auto-columns: 60px;
grid-auto-flow: column;
align-items: center;
overflow-x: scroll;
}
ul li{
height: 100%;
}
ul a, ul .dropdown-btn{
width: 60px;
height: 60px;
padding: 0;
border-radius: 0;
justify-content: center;
}
ul li span, ul li:first-child, .dropdown-btn svg:last-child{
display: none;
}
ul li .sub-menu.show{
position: fixed;
bottom: 60px;
left: 0;
box-sizing: border-box;
height: 60px;
width: 100%;
background-color: var(--hover-clr);
border-top: 1px solid var(--line-clr);
display: flex;
justify-content: center;
> div{
overflow-x: auto;
}
li{
display: inline-flex;
}
a{
box-sizing: border-box;
padding: 1em;
width: auto;
justify-content: center;
}
}
}
}
@media (max-width: 720px) {
.asset-table {
display: none !important;
}
.asset-list {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
}
.asset-list-row {
background: #222;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
padding: 1em;
display: flex;
flex-direction: column;
gap: 0.5em;
}
.asset-list-row .filename {
font-weight: bold;
font-size: 1.1em;
margin-bottom: 0.3em;
}
.asset-list-row .meta {
color: #b0b0b0;
font-size: 0.95em;
margin-bottom: 0.3em;
}
.asset-list-row .actions {
margin-top: 0.5em;
display: flex;
gap: 1em;
}
}
.drawer {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: 0;
overflow-x: hidden;
z-index: 1000;
transition: width 0.3s ease;
}
.drawer.open {
width: 600px; /* Adjust as needed */
}
/* .drawer-content {
padding: 24px;
color: #ddd;
overflow-y: auto;
}
.close-btn {
top: 16px;
right: 16px;
font-size: 1.5rem;
cursor: pointer;
color: #888;
margin-bottom: 12px;
position: absolute;
z-index: 999;
}
.close-btn:hover {
color: white;
} */
.drawer-columns {
display: flex;
height: 100%;
}
.drawer-actions {
width: 10%;
min-width: 60px;
max-width: 80px;
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 0 0 24px;
background: transparent;
}
.drawer-content {
width: 90%;
padding: 24px;
color: #ddd;
overflow-y: auto;
background: rgba(32, 32, 32, 0.88);
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(17.8px);
-webkit-backdrop-filter: blur(17.8px);
}
.close-btn {
width: 38px;
height: 38px;
background: #222;
color: #fff;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
cursor: pointer;
border: 2px solid #444;
margin-bottom: 16px;
transition: background 0.2s, color 0.2s;
}
.close-btn:hover {
background: #444;
color: #fff;
}
.asset-actions-menu {
position: absolute;
z-index: 10000;
background: #222;
color: #fff;
border: 1px solid #444;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
padding: 0.5em 0;
min-width: 180px;
}
.asset-action-menu-btn {
display: block;
width: 100%;
background: none;
color: #fff;
border: none;
text-align: left;
padding: 0.5em 1em;
cursor: pointer;
}
.asset-action-menu-btn:hover {
background: #333;
}
.drawer.wide {
width: 1000px;
}
.drawer-layout {
display: flex;
flex-direction: column;
gap: 2rem;
}
.drawer-layout.with-categories {
flex-direction: row;
}
.drawer-layout .form-column {
flex: 1;
}
.drawer-layout.with-categories .form-column {
flex: 0.9;
}
.category-column {
flex: 1.1;
}
.category-column.hidden {
display: none;
}
.filter-footer {
position: sticky;
bottom: 0;
background: #232323;
padding: 1rem 1.5rem;
display: flex;
gap: 1em;
border-top: 1px solid #444;
z-index: 10;
}
/*
.filter-dropdown {
position: relative;
margin-bottom: 1.2em;
}
.dropdown-btn {
background: #232323;
color: #e0e0e0;
border: 1px solid #444;
border-radius: 5px;
padding: 0.6em 1em;
width: 100%;
text-align: left;
cursor: pointer;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
.dropdown-menu {
position: static;
background: #232323;
border: 1px solid #444;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
padding: 0.5em 1em;
width: 100%;
box-sizing: border-box;
max-height: 220px;
overflow-y: auto;
margin-top: 0.5em;
display: none;
}
.dropdown-menu {
display: none;
}
.filter-dropdown.open .dropdown-menu {
display: block;
}
.dropdown-menu label {
display: flex;
align-items: center;
gap: 0.5em;
font-size: 1rem;
color: #e0e0e0;
margin-bottom: 0.6em;
cursor: pointer;
}
.dropdown-menu label:last-child {
margin-bottom: 0;
}
.selected-count {
background: #4caf50;
color: #fff;
border-radius: 12px;
padding: 0 0.6em;
font-size: 0.9em;
margin-left: 0.5em;
} */
.filter-dropdown {
--bg: #232323;
--muted: #bdbdbd;
--accent: #ececec;
position: relative;
}
.filter-dropdown .dropdown-btn {
height: 44px;
padding: 0.4rem 0.9rem;
border-radius: 6px;
border: 1px solid #444;
background: #292929;
/* background: linear-gradient(180deg, #242424, #292929); */
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
/* transition: box-shadow 160ms, transform 120ms, border-color 160ms; */
width: 100%;
box-sizing: border-box;
cursor: pointer;
color: #ececec;
font-size: 1rem;
text-align: left;
}
.filter-dropdown .dropdown-btn:hover {
/* box-shadow: 0 8px 30px rgba(0,0,0,0.45); */
/* transform: translateY(-1px); */
border-color: #4a4a4a;
}
.filter-dropdown.open .dropdown-btn {
border-color: var(--accent);
/* box-shadow: 0 0 0 2px rgba(236, 236, 236, 0.2), 0 8px 30px rgba(0,0,0,0.45); White glow */
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.filter-dropdown .dropdown-btn .selected-count {
/* background: #666; */
color: white;
padding: 0.12rem 0.55rem;
/* border-radius: 999px; */
font-size: 0.85rem;
/* font-weight: 600; */
flex-shrink: 0;
}
.filter-dropdown .dropdown-btn i {
transition: transform 160ms ease;
color: #888;
flex-shrink: 0;
}
.filter-dropdown.open .dropdown-btn i {
transform: rotate(180deg);
color: var(--accent);
}
.filter-dropdown .dropdown-menu {
position: static;
background: linear-gradient(180deg, #242424, #232323);
border: 1px solid #444;
border-top: none;
padding: 0.6rem;
border-radius: 0 0 10px 10px;
max-height: 260px;
overflow-y: auto;
/* box-shadow: 0 8px 30px rgba(0,0,0,0.5); */
opacity: 0;
max-height: 0;
transition: opacity 140ms ease, max-height 120ms ease;
pointer-events: none;
overflow: hidden;
}
.filter-dropdown.open .dropdown-menu {
opacity: 1;
max-height: 260px;
pointer-events: auto;
overflow-y: auto;
margin-bottom: 1rem;
}
.dropdown-menu .menu-search {
display: block;
margin: 0 0 0.5rem 0;
padding: 0.4rem 0.6rem;
border-radius: 8px;
border: 1px solid #3a3a3a;
background: #1f1f1f;
color: var(--muted);
width: 100%;
box-sizing: border-box;
font-size: 0.95rem;
outline: none;
transition: border-color 0.2s, background 0.2s;
}
.dropdown-menu .menu-search:focus {
border-color: var(--accent);
background: #2a2a2a;
}
.dropdown-menu .menu-search::placeholder {
color: #666;
}
.dropdown-menu label {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.42rem 0.45rem;
border-radius: 8px;
cursor: pointer;
color: #dcdcdc;
transition: background 120ms, color 120ms;
font-size: 0.96rem;
user-select: none;
}
.dropdown-menu label:hover,
.dropdown-menu label:focus-within {
background: rgba(255,255,255,0.02);
color: #fff;
}
.dropdown-menu input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
min-width: 18px;
border-radius: 6px;
border: 1px solid #3b3b3b;
background: #161616;
display: inline-block;
position: relative;
cursor: pointer;
transition: background 120ms, border-color 120ms;
margin: 0;
}
.dropdown-menu input[type="checkbox"]:hover {
border-color: #4a4a4a;
}
.dropdown-menu input[type="checkbox"]:focus {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.dropdown-menu input[type="checkbox"]:checked {
background: #666;
border-color: #666;
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
background-image: url("data:image/svg+xml;utf8,");
}
.dropdown-menu input[type="checkbox"]:checked + span,
.dropdown-menu label:has(input[type="checkbox"]:checked) {
font-weight: 600;
color: #fff;
}
.dropdown-menu::-webkit-scrollbar {
width: 8px;
}
.dropdown-menu::-webkit-scrollbar-track {
background: transparent;
}
.dropdown-menu::-webkit-scrollbar-thumb {
background: linear-gradient(#3a3a3a, #2b2b2b);
border-radius: 999px;
border: 2px solid transparent;
background-clip: content-box;
}
.dropdown-menu::-webkit-scrollbar-thumb:hover {
background: linear-gradient(#4a4a4a, #3b3b3b);
background-clip: content-box;
}
.dropdown-menu label:first-of-type {
font-weight: 600;
color: #fff;
border-bottom: 1px solid #333;
margin-bottom: 0.25rem;
padding-bottom: 0.5rem;
}
.filter-dropdown.dense .dropdown-btn {
height: 40px;
padding: 0.25rem 0.6rem;
}
.filter-dropdown.dense .dropdown-menu label {
padding: 0.28rem 0.4rem;
font-size: 0.9rem;
}
.filter-dropdown .dropdown-btn[data-has-selection="true"] {
box-shadow: 0 6px 18px rgba(236, 236, 236, 0.06);
border-color: rgba(236, 236, 236, 0.18);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.filter-dropdown .dropdown-menu {
max-height: 200px;
}
.filter-dropdown .dropdown-btn {
height: 42px;
padding: 0.35rem 0.8rem;
}
}
/* Custom checkbox styling for Favourites Only */
.custom-checkbox {
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
font-size: 0.96rem;
color: #dcdcdc;
user-select: none;
transition: color 120ms;
background: #292929;
border: 1px solid #444;
padding: 0.8rem 0.6rem;
border-radius: 6px;
margin-bottom: 1rem;
}
.custom-checkbox:hover {
color: #fff;
}
.custom-checkbox input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 6px;
border: 1px solid #3b3b3b;
background: #161616;
display: inline-block;
position: relative;
cursor: pointer;
transition: background 120ms, border-color 120ms;
margin: 0;
}
.custom-checkbox input[type="checkbox"]:hover {
border-color: #4a4a4a;
}
.custom-checkbox input[type="checkbox"]:focus {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.custom-checkbox input[type="checkbox"]:checked {
background: #666;
border-color: #666;
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
background-image: url("data:image/svg+xml;utf8,");
}
.drawer.filter-drawer {
position: fixed;
top: 0;
right: 0;
width: 340px;
height: 100%;
background: #232323;
color: #fff;
z-index: 1200;
box-shadow: -2px 0 12px rgba(0,0,0,0.18);
border-radius: 0 0 0 8px;
display: flex;
flex-direction: column;
transition: transform 0.3s;
transform: translateX(100%);
}
.drawer.filter-drawer.open {
transform: translateX(0);
}
.drawer.filter-drawer .drawer-content {
padding: 2rem 1.5rem;
overflow-y: auto;
}
.drawer.filter-drawer .drawer-actions {
display: flex;
justify-content: flex-end;
padding: 1rem 1.5rem 0 1.5rem;
}
.drawer.filter-drawer .close-btn {
font-size: 2rem;
cursor: pointer;
color: #fff;
background: none;
border: none;
}
.drawer.open.asset-panel {
width: 1000px;
}
.asset-details-wrapper {
color: var(--text-clr);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 2.5rem;
align-items: flex-start;
width: 100%;
min-height: 420px;
}
.asset-details-panel {
color: var(--text-clr);
overflow-y: auto;
display: flex;
flex-direction: row;
gap: 2.5rem;
align-items: flex-start;
width: 100%;
min-height: 420px;
}
/* Left column: meta + preview */
.asset-details-left {
flex: 0 0 260px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
min-width: 220px;
max-width: 280px;
}
#folderTreeContainer ul {
padding-left: 0.5rem;
margin: 0;
}
#folderTreeContainer li {
/* line-height: 1.8; */
padding: 2px 0;
min-width: 0;
word-break: break-word;
list-style: none;
/* padding-left: 1.2rem; */
margin: 0;
}
.folder-label {
padding: 2px 4px;
border-radius: 6px;
font-size: 0.9rem;
transition: background 0.2s, color 0.2s;
/* max-width: 180px; */
/* overflow: hidden; */
/* text-overflow: ellipsis; */
/* white-space: nowrap; */
}
.fi.fi-rr-folder {
font-size: 1.1em;
vertical-align: middle;
/* margin-right: 6px; */
color: #7da3d6;
}
.folder-label:hover {
background: #dbeafe;
color: #1565c0;
}
.folder-toggle {
display: inline-block;
width: 1rem;
cursor: pointer;
margin-right: 0.2rem;
}
.folder-spacer {
display: inline-block;
width: 1rem;
margin-right: 0.2rem;
}
.nested.hidden {
display: none;
}
.smart-tag-panel {
position: fixed;
bottom: 6px;
right: 6px;
width: 320px;
background: #1e1e1e;
color: #ccc;
font-family: system-ui, sans-serif;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.5);
z-index: 9999;
overflow: hidden;
transition: all 0.3s ease;
}
.smart-tag-summary-bar {
padding: 8px 12px;
background: #2a2a2a;
font-size: 12px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #333;
}
.smart-tag-summary-bar:hover {
background: #333;
}
.chevron {
font-size: 12px;
color: #aaa;
transition: transform 0.3s ease;
}
.collapsed .chevron {
transform: rotate(180deg);
}
.progress-bar-bg {
width: 100%;
height: 6px;
background: #333;
border-radius: 4px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: #4caf50;
width: 0%;
transition: width 0.3s ease-in-out;
}
.smart-tag-list {
max-height: 300px;
overflow-y: auto;
padding: 8px 12px;
}
.collapsed .smart-tag-list {
display: none;
}
.smart-tag-item {
padding: 4px 0;
border-bottom: 1px solid #333;
}
.smart-tag-item .filename {
font-weight: 500;
font-size: 13px;
color: #eee;
}
.smart-tag-item .status {
font-size: 12px;
font-style: italic;
margin-top: 2px;
}
.smart-tag-item .done { color: #4caf50; }
.smart-tag-item .failed { color: #e57373; }
.smart-tag-item .processing { color: orange; }
.smart-tag-item .pending { color: #999; }
.hidden {
display: none;
}
.folder-drawer {
position: fixed;
top: 0;
left: 0;
width: 220px;
height: 100%;
background-color: var(--base-clr);
z-index: 1000;
padding: 5px 1rem;
box-shadow: rgb(42, 42, 42) -1px 0px 0px 0px inset;
overflow-y: auto;
transition: transform 0.3s ease;
}
.folder-drawer.hidden {
transform: translateX(-100%);
}
.drawer-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
padding: min(15px, 7%);
}
.drawer-content {
padding-left: 2.5rem;
}
.slick-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #222;
padding: 0.75rem 1.5rem;
border-radius: 8px;
/* margin-bottom: 1.5rem; */
gap: 2rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.toolbar-group {
display: flex;
align-items: center;
gap: 1rem;
}
.toolbar-group-right {
gap: 1.2rem;
}
.toolbar-select {
padding: 0.4em 1em;
border-radius: 6px;
border: 1px solid #444;
background: #333;
color: #fff;
font-size: 1rem;
min-width: 180px;
height: 40px;
}
/* Add at the end of your file */
.toolbar-toggle-wrapper {
display: flex;
justify-content: flex-end;
/* padding: 0.5em 0em; */
}
.toolbar-drawer {
position: fixed;
top: 0;
left: 0;
width: 100vw;
background: #222;
box-shadow: 0 4px 24px rgba(0,0,0,0.18);
z-index: 1200;
transition: transform 0.3s;
transform: translateY(-100%);
border-bottom: 2px solid #444;
}
.toolbar-drawer.open {
transform: translateY(0);
}
.toolbar-drawer-content {
max-width: 900px;
margin: 0 auto;
padding: 1.5em;
display: flex;
flex-wrap: wrap;
gap: 1.2em;
align-items: center;
justify-content: space-between;
}
@media (max-width: 900px) {
#mainToolbar {
display: none !important;
}
.toolbar-toggle-wrapper {
display: flex !important;
}
}
@media (min-width: 901px) {
.toolbar-toggle-wrapper {
display: none !important;
}
.toolbar-drawer {
display: none !important;
}
}
/* ===== SEARCH SECTION STYLES ===== */
/* .search-section {
background: #2a2a2a;
border-bottom: 1px solid #444;
padding-block: 1rem;
position: sticky;
top: 0;
z-index: 100;
}
.search-container {
position: relative;
margin: 0 auto;
} */
/* Search Input Wrapper */
/* .search-input-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
background: #333;
border: 2px solid #444;
border-radius: 6px;
padding: 0.75rem 1rem;
gap: 0.75rem;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
} */
/* .search-input-wrapper:focus-within {
border-color: #fff;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15), 0 2px 12px rgba(0,0,0,0.2);
transform: translateY(-1px);
} */
/* .search-input-wrapper:hover {
border-color: #555;
} */
/* Search Icon */
/* .search-icon {
color: #888;
font-size: 1.1rem;
flex-shrink: 0;
transition: color 0.2s;
}
.search-input-wrapper:focus-within .search-icon {
color: #fff;
} */
/* Input Field */
/* .search-input-field {
flex: 1;
background: transparent;
border: none;
outline: none;
color: #fff;
font-size: 1rem;
padding: 0;
min-width: 0;
}
.search-input-field::placeholder {
color: #888;
transition: color 0.2s;
}
.search-input-wrapper:focus-within .search-input-field::placeholder {
color: #aaa;
} */
/* Search Controls */
/* .search-controls {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
} */
/* .search-mode-toggle {
font-size: 0.75rem;
font-weight: 600;
padding: 0.35rem 0.75rem;
border-radius: 20px;
background: var(--mono-bg-light);
color: var(--mono-text-muted);
border: 1px solid var(--mono-border);
cursor: pointer;
white-space: nowrap;
transition: all 0.2s;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.search-mode-toggle:hover {
background: var(--mono-bg-lighter);
color: var(--mono-accent);
border-color: var(--mono-accent);
} */
/* .live-result-count {
font-size: 0.8rem;
font-weight: 600;
padding: 0.35rem 0.75rem;
border-radius: 20px;
background: var(--mono-bg-light);
color: var(--mono-text-muted);
white-space: nowrap;
border: 1px solid var(--mono-border);
transition: all 0.2s;
}
.live-result-count[style*="color: #e74c3c"] { /* keep red for 0 results */
/* color: #e74c3c !important;
border-color: #e74c3c !important;
}
.live-result-count[style*="color: #f39c12"],
.live-result-count[style*="color: #27ae60"] {
color: var(--mono-text-muted) !important;
border-color: var(--mono-border) !important;
} */
/* Search Chips Row */
/* .search-chips-row {
margin-top: 0.75rem;
animation: slideDown 0.3s ease-out;
} */
/* @keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} */
/* .search-chips-container {
display: flex;
align-items: center;
gap: 0.75rem;
background: rgba(0,0,0,0.2);
border: 1px solid #444;
border-radius: 12px;
padding: 0.5rem 0.75rem;
}
.search-chips-inline {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
flex: 1;
min-height: 32px;
align-items: center;
} */
/* Individual Chips */
/* .search-chip-inline {
background: var(--mono-chip-bg);
color: var(--mono-chip-text);
border: 1px solid var(--mono-chip-border);
padding: 0.35rem 0.75rem;
border-radius: 16px;
font-size: 0.8rem;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 0.5rem;
box-shadow: none;
transition: background 0.2s, color 0.2s, border 0.2s;
} */
/* .search-chip-inline:hover {
background: var(--mono-chip-bg-hover);
color: var(--mono-accent);
border-color: var(--mono-accent);
}
.search-chip-inline.filter-chip {
background: var(--mono-chip-filter-bg);
color: var(--mono-chip-filter-text);
border: 1px solid var(--mono-chip-filter-border);
}
.search-chip-inline.filter-chip:hover {
background: var(--mono-chip-bg-hover);
color: var(--mono-accent);
border-color: var(--mono-accent);
} */
/* .chip-close {
cursor: pointer;
font-weight: bold;
font-size: 0.9rem;
opacity: 0.8;
transition: opacity 0.2s;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,0.2);
}
.chip-close:hover {
opacity: 1;
background: rgba(255,255,255,0.3);
} */
/* Clear Search Button */
/* .clear-search-btn {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 8px;
padding: 0.5rem;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
} */
/* .clear-search-btn:hover {
background: rgba(239, 68, 68, 0.25);
border-color: rgba(239, 68, 68, 0.5);
color: #fff;
} */
/* Smart Filters */
/* .smart-filters {
margin-top: 0.75rem;
padding: 0.75rem;
background: rgba(0,0,0,0.1);
border: 1px solid #444;
border-radius: 12px;
transition: all 0.3s ease;
}
.smart-filters:empty {
display: none;
}
.smart-filters-header {
color: #888;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
} */
/* .smart-filter-suggestion {
display: inline-block;
background: var(--mono-chip-bg);
color: var(--mono-chip-text);
border: 1px solid var(--mono-chip-border);
padding: 0.4rem 0.8rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
margin: 0.25rem 0.25rem 0.25rem 0;
cursor: pointer;
transition: all 0.2s;
}
.smart-filter-suggestion:hover {
background: var(--mono-chip-bg-hover);
color: var(--mono-accent);
border-color: var(--mono-accent);
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
} */
/* Loading State */
/* .smart-filters.loading {
position: relative;
min-height: 40px;
}
.smart-filters.loading::after {
content: "Loading suggestions...";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #888;
font-size: 0.8rem;
animation: pulse 1.5s infinite;
} */
/* @keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
} */
/* Unified Search Dropdown */
/* .unified-search-dropdown {
position: absolute;
top: calc(100% + 12px);
left: 0;
right: 0;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
display: none;
max-height: 400px;
overflow-y: auto;
z-index: 1001;
backdrop-filter: blur(10px);
background: var(--mono-bg-light);
border: 1px solid var(--mono-border);
color: var(--mono-text);
}
.section-header {
background: var(--mono-bg);
color: var(--mono-text-muted);
border-bottom: 1px solid var(--mono-border);
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
font-weight: bold;
position: sticky;
top: 0;
} */
/* Search Result Items */
/* .search-result-item {
display: flex;
align-items: center;
padding: 0.75rem;
border-bottom: 1px solid #444;
cursor: pointer;
transition: background 0.2s;
} */
/* .search-result-item:hover {
background: #444;
}
.search-result-item img {
border-radius: 4px;
margin-right: 0.75rem;
object-fit: cover;
flex-shrink: 0;
}
.result-info {
flex: 1;
min-width: 0;
}
.result-info .filename {
font-weight: bold;
color: #fff;
margin-bottom: 0.25rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.result-info .meta {
color: #888;
font-size: 0.8rem;
margin-bottom: 0.25rem;
}
.result-info .score {
color: #4caf50;
font-size: 0.75rem;
} */
/* Search Suggestions */
/* .search-suggestion-item {
padding: 0.75rem;
cursor: pointer;
color: #fff;
border-bottom: 1px solid #444;
transition: background 0.2s;
display: flex;
align-items: center;
}
.search-suggestion-item:hover,
.search-history-item:hover {
background: var(--mono-bg-lighter);
color: var(--mono-accent);
}
.search-suggestion-item:last-child {
border-bottom: none;
} */
/* Search History */
/* .search-history-item {
padding: 0.75rem;
border-bottom: 1px solid #444;
display: flex;
align-items: center;
justify-content: space-between;
transition: background 0.2s;
}
.history-delete {
font-size: 1.2rem;
padding: 0.25rem;
border-radius: 50%;
transition: background 0.2s;
}
.history-delete:hover {
background: #555;
} */
/* Keyboard Navigation */
/* .search-result-item.selected,
.search-suggestion-item.selected,
.search-history-item.selected {
background-color: var(--mono-bg-lighter) !important;
color: var(--mono-accent) !important;
}
.unified-search-dropdown .selected::before {
content: "→ ";
color: var(--mono-accent);
font-weight: bold;
} */
/* Responsive */
/* .search-input-wrapper {
padding: 0.5rem 0.75rem;
min-height: 48px;
gap: 0.5rem;
}
*/
/* .search-controls {
gap: 0.5rem;
}
*/
.live-result-count {
font-size: 0.7rem;
padding: 0.25rem 0.5rem;
}
.search-chips-container {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
.clear-search-btn {
align-self: flex-end;
}
/* Hide old external chips container */
#searchChips {
display: none;
}
.toolbar-btn {
border-radius: 6px;
padding: 0.4em 1em;
font-size: 1rem;
cursor: pointer;
height: 40px;
/* width: 100%; */
display: flex;
align-items: center;
gap: 0.5em;
transition: background 0.2s;
}
.w-100 {
width: 100%;
}
.toolbar-btn.primary {
background: #4caf50;
color: #fff;
font-weight: bold;
}
.toolbar-btn:hover, .toolbar-select:focus {
background: #666;
}
.view-switch {
display: flex;
gap: 0.2em;
background: #333;
border-radius: 6px;
overflow: hidden;
}
.view-btn {
background: none;
border: none;
color: #aaa;
font-size: 1.3rem;
padding: 0.3em 0.7em;
cursor: pointer;
transition: background 0.2s, color 0.2s;
height: 40px;
display: flex;
align-items: center;
}
.view-btn.active, .view-btn:hover {
background: #4caf50;
color: #fff;
}
.fi,
.fi-rr-search,
.fi-rr-clock-three,
.fi-sr-folder-open,
.fi-rs-settings-sliders {
color: var(--mono-text-muted) !important;
}
#legacyImportStep1 {
display: flex;
flex-direction: column;
gap: 1rem;
}
.legacy-progress-bar {
width: 100%;
height: 18px;
background: #333;
border-radius: 8px;
margin: 1em 0;
overflow: hidden;
position: relative;
}
.legacy-progress-bar-fill {
height: 100%;
background: #4caf50;
width: 0%;
transition: width 0.3s;
}
/* Legacy Import Folder Tree */
.legacy-folder-tree-root, .legacy-folder-tree-root ul {
list-style: none;
padding-left: 1em;
}
.legacy-folder-toggle {
cursor: pointer;
user-select: none;
margin-right: 0.3em;
}
.legacy-folder-icon {
margin-right: 0.5em;
color: #fbc02d;
}
.legacy-file-icon {
margin-right: 0.5em;
color: #90caf9;
}
.legacy-folder-label {
cursor: pointer;
border-radius: 5px;
padding: 2px 6px;
transition: background 0.2s;
}
.legacy-folder-label.selected,
.legacy-file-label.selected {
background: #1976d2;
color: #fff;
}
.legacy-file-label.scanning {
background: #222a44;
color: #fff;
}
.legacy-folder-label:hover,
.legacy-file-label:hover {
background: #e3f2fd;
color: #1976d2;
}
@keyframes spin {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}
.spinner {
border: 3px solid #444;
border-top: 3px solid #888;
border-radius: 50%;
width: 2em;
height: 2em;
animation: spin 1s linear infinite;
display: inline-block;
}
.legacy-per-file-detail {
margin-bottom: 0.7em;
padding-bottom: 0.7em;
border-bottom: 1px solid #333;
}
.legacy-per-file-detail:last-child {
border-bottom: none;
}
.legacy-cat {
background: #232323;
color: #fff;
border-radius: 10px;
padding: 0.1em 0.7em;
font-size: 0.9em;
border: 1px solid #666;
}
/* Legacy Import Step 1 Panel - Updated */
#legacyImportStep1 {
background: #232323;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.18);
border: 1px solid #333;
padding: 2.2em 2em 2em 2em;
max-width: 480px;
margin: 0 0 1.5em 0; /* Remove auto-centering, left align */
display: flex;
flex-direction: column;
gap: 1.5em;
align-items: flex-start; /* Ensure left alignment */
}
#legacyImportStep1 label {
color: #b0b0b0;
font-size: 1em;
font-weight: 500;
margin-bottom: 0.3em;
display: block;
}
#legacyImportStep1 input[type="text"],
#legacyImportStep1 select {
background: #292929;
color: #ececec;
border: 1px solid #444;
border-radius: 6px;
padding: 0.7em 1em;
font-size: 1em;
margin-bottom: 0.8em;
width: 100%;
box-sizing: border-box;
transition: border 0.2s;
}
#legacyImportStep1 input[type="text"]:focus,
#legacyImportStep1 select:focus {
border: 1.5px solid #ececec; /* Use system text color, not green */
outline: none;
}
#legacyImportStep1 button {
background: #444; /* Neutral dark background */
color: #ececec;
border: none;
border-radius: 6px;
padding: 0.8em 1.5em;
font-size: 1em;
font-weight: 600;
margin-top: 0.5em;
cursor: pointer;
transition: background 0.2s;
}
#legacyImportStep1 button:hover {
background: #666; /* Slightly lighter on hover */
}
#legacyImportStep1 .form-row {
display: flex;
flex-direction: column;
gap: 0.2em;
margin-bottom: 1.2em;
}
#legacyImportStep1 .form-actions {
display: flex;
gap: 1em;
margin-top: 1em;
justify-content: flex-end;
width: 100%;
}
/* ============================================
LEGACY IMPORT COMPONENTS
============================================ */
.legacy-scan-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin: 1.5rem 0;
}
@media (max-width: 900px) {
.legacy-scan-layout {
grid-template-columns: 1fr;
}
}
.legacy-scan-column {
min-width: 0;
}
.legacy-folder-tree-wrapper {
max-height: 400px;
overflow-y: auto;
background: var(--oms-bg-card, #1a1a1a);
border: 1px solid var(--oms-border-default, #333);
border-radius: var(--oms-radius-md, 8px);
padding: 0.75rem;
}
.legacy-file-details-wrapper {
max-height: 400px;
overflow-y: auto;
background: var(--oms-bg-card, #1a1a1a);
border: 1px solid var(--oms-border-default, #333);
border-radius: var(--oms-radius-md, 8px);
padding: 0.75rem;
}
/* Legacy Folder Tree - Keep existing styles */
.legacy-folder-tree-root {
list-style: none;
margin: 0;
padding: 0;
}
.legacy-folder-tree-root ul {
list-style: none;
margin: 0;
padding: 0 0 0 1.25rem;
}
.legacy-folder-tree-root li {
padding: 0.25rem 0;
}
.legacy-folder-toggle {
display: inline-block;
width: 1rem;
text-align: center;
cursor: pointer;
color: var(--oms-text-muted, #666);
user-select: none;
}
.legacy-folder-toggle:hover {
color: var(--oms-text-primary, #ececec);
}
.legacy-folder-icon,
.legacy-file-icon {
display: inline-flex;
align-items: center;
margin-right: 0.5rem;
}
.legacy-folder-icon {
color: #ffc107;
}
.legacy-folder-label {
color: var(--oms-text-primary, #ececec);
font-size: 0.875rem;
cursor: pointer;
padding: 0.125rem 0.25rem;
border-radius: 4px;
transition: background 0.15s ease;
}
.legacy-folder-label:hover {
background: var(--oms-bg-hover, rgba(255,255,255,0.05));
}
.legacy-file-label {
color: var(--oms-text-secondary, #b0b0b0);
font-size: 0.8125rem;
}
.legacy-file-label.scanning {
color: var(--oms-accent-primary, #3b82f6);
font-weight: 500;
}
/* Button Group Utility */
.oms-button-group {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
/* Block Button Utility */
.oms-btn--block {
width: 100%;
justify-content: center;
}
.asset-placeholder-icon {
font-size: 2.5rem;
text-align:center;
padding: 2rem 0;
}
.placeholder-icon {
color: rgb(155, 155, 155);
font-size:2.5rem;
display:block;
text-align:center;
padding:2rem 0;
}
/* Slick Brand Select Styling */
#globalBrandSelect {
background: #232323;
color: #ececec;
border: 1.5px solid #444;
border-radius: 8px;
padding: 0.7em 1.2em;
font-size: 1.05em;
font-weight: 500;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
transition: border 0.2s, box-shadow 0.2s;
outline: none;
appearance: none;
width: 60%;
margin-bottom: 0.5em;
margin-left: 0.5rem;
cursor: pointer;
}
#globalBrandSelect:focus, #globalBrandSelect:hover {
border-color: #ececec;
box-shadow: 0 4px 16px rgba(0,0,0,0.18);
background: #292929;
}
#globalBrandSelect option {
background: #232323;
color: #ececec;
font-size: 1em;
padding: 0.7em 1.2em;
}
/* Custom dropdown arrow (optional, for Webkit browsers) */
#globalBrandSelect {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 1em center;
background-size: 18px 18px;
padding-right: 2.5em;
}
.view-switcher {
display: inline-flex;
align-items: center;
background: #232323;
border: 1px solid #3b3b3b;
border-radius: 6px;
padding: 2px;
gap: 0; /* buttons sit flush */
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.view-switcher .view-btn {
background: transparent;
border: none;
color: #bdbdbd;
width: 44px;
height: 36px;
margin: 0;
padding: 2px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 140ms, color 140ms, transform 120ms;
border-radius: 6px;
position: relative;
}
.view-switcher .view-btn:not(:last-child) {
border-right: 1px solid rgba(255,255,255,0.03); /* subtle separator */
}
/* left / right corners rounded to match container */
.view-switcher .view-btn:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.view-switcher .view-btn:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
/* Active state looks like a single pill inside container */
.view-switcher .view-btn.active {
background: linear-gradient(180deg,#2f2f2f,#262626);
color: #fff;
box-shadow: 0 4px 10px rgba(0,0,0,0.25), inset 0 -1px 0 rgba(255,255,255,0.02);
transform: translateY(-1px);
}
/* Focus / keyboard visible
.view-switcher .view-btn:focus {
outline: 2px solid rgba(236,236,236,0.08);
outline-offset: 2px;
} */
/* Icon sizing */
.view-switcher .view-icon {
width: 18px;
height: 18px;
display: block;
fill: currentColor;
}
/* Rotated table icon */
.view-switcher .view-icon--table { transform: rotate(90deg); }
/* Optional: reduce spacing on very small screens */
@media (max-width: 420px) {
.view-switcher .view-btn { width: 40px; height: 34px; }
.view-switcher { padding: 3px; border-radius: 8px; }
}
/* Usage section styles */
.usage-deliverable-group {
margin-bottom: 1.5em;
border: 1px solid #333;
border-radius: 8px;
overflow: hidden;
}
.usage-deliverable-header {
background: linear-gradient(180deg, rgba(0,0,0,0.1), transparent);
padding: 0.7em 1em;
}
.usage-details {
padding: 0 1em 1em 1em;
}
.timeline-container {
background: #1e1e1e;
border-radius: 12px;
padding: 1.5em;
margin: 1em 0;
overflow: hidden; /* prevent page-level horizontal scroll */
}
.usage-sequence {
margin-bottom: 2em;
background: #232323;
border-radius: 8px;
overflow: hidden; /* clip children */
border: 1px solid #333;
}
.sequence-timeline {
padding: 1.5em;
overflow-x: auto;
overflow-y: hidden; /* hide vertical overflow in timeline viewport */
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.sequence-header {
background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
padding: 1em 1.5em;
border-bottom: 2px solid #4caf50;
display: flex;
justify-content: space-between;
align-items: center;
}
.sequence-info {
display: flex;
align-items: center;
gap: 0.75em;
}
.sequence-info i {
color: #4caf50;
font-size: 1.2em;
}
.sequence-info h3 {
margin: 0;
color: #ececec;
font-size: 1.1em;
}
.clip-count {
background: #333;
color: #aaa;
padding: 0.25em 0.75em;
border-radius: 12px;
font-size: 0.8em;
}
.sequence-duration {
color: #4caf50;
font-weight: 600;
font-size: 0.9em;
}
.sequence-timeline {
padding: 1.5em;
overflow-x: auto;
background: #1a1a1a;
}
.timeline-track {
display: inline-block; /* allow wide track inside horizontally scrolling container */
vertical-align: top;
position: relative;
background: #0f0f0f;
border: 1px solid #333;
border-radius: 8px;
min-height: 120px;
white-space: normal;
box-sizing: border-box;
}
.time-markers {
border-bottom: 1px solid #333;
}
.timeline-clip {
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.timeline-clip:hover {
z-index: 10 !important;
}
/* tidy markers scrollbar and hide vertical overflow */
.sequence-timeline::-webkit-scrollbar {
height: 10px;
}
.sequence-timeline::-webkit-scrollbar-track { background: transparent; }
.sequence-timeline::-webkit-scrollbar-thumb {
background: linear-gradient(#3a3a3a,#2b2b2b);
border-radius: 999px;
}
/* small responsive tweak so timeline doesn't push page width */
@media (max-width: 768px) {
.sequence-timeline { padding: 1em 0.5em; }
.timeline-track { min-width: 600px; }
}
/* usage details row above timeline */
.sequence-usage-details {
display: flex;
gap: 1rem;
align-items: center;
padding: 0.75em 1.5em;
background: rgba(0,0,0,0.02);
border-top: 1px solid rgba(255,255,255,0.02);
color: #c6c3b7;
font-size: 0.9rem;
}
.sequence-usage-details .stat {
display: inline-flex;
gap: 0.5rem;
align-items: center;
background: rgba(255,255,255,0.02);
padding: 0.2rem 0.6rem;
border-radius: 6px;
border: 1px solid #2b2b2b;
color: #bdbdbd;
}
/* Responsive timeline */
@media (max-width: 768px) {
.sequence-header {
flex-direction: column;
align-items: flex-start;
gap: 0.5em;
}
.timeline-track {
min-width: 600px;
}
}
.sequence-controls {
display:flex;
justify-content:space-between;
align-items:center;
gap:1rem;
padding:0.6rem 1rem;
border-top:1px solid rgba(255,255,255,0.02);
background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
}
.sequence-controls .controls-left { display:flex; align-items:center; gap:0.6rem; color:#c6c3b7; }
.sequence-controls label { font-size:0.85rem; color:#bdbdbd; }
.sequence-controls input[type="range"] { width:220px; }
.sequence-controls .controls-right { margin-left:auto; }
.timeline-playhead {
mix-blend-mode: screen;
background: #ff6f00; /* visible accent */
width: 2px;
}
.timeline-preview {
pointer-events: none;
}
/* ensure clip info hides when compact (default) by CSS — shows when width is big or toggle is used */
.timeline-clip .clip-info { display: none; }
.timeline-clip { gap: 0.6rem; padding: 0.25rem; }
.timeline-clip img { flex-shrink:0; }
/* reveal details when clip is wide enough */
.timeline-clip[style*="width: 1"] .clip-info { display:block; }
/* fallback: when pxPerSecond is high we force display via toggle handler */
.timeline-clip .clip-filename, .timeline-clip .clip-times { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* small responsive tweak */
@media (max-width: 768px) {
.sequence-controls input[type="range"] { width:140px; }
.timeline-preview { display:none !important; } /* avoid floating preview on tiny screens */
}
.asset-drawer {
position: fixed;
inset: 0;
display: none;
align-items: flex-start;
justify-content: flex-end;
background: rgba(0,0,0,0.4);
z-index: 1200;
transition: opacity 160ms ease;
}
.asset-drawer.open { display: flex; }
.asset-drawer-inner {
width: 420px;
max-width: 100%;
margin: 3rem;
background: #101010;
border-left: 1px solid #2b2b2b;
border-radius: 8px;
box-shadow: -6px 12px 48px rgba(0,0,0,0.6);
color: #eaeaea;
overflow: auto;
padding: 1rem;
}
.asset-drawer-close {
position: absolute;
right: 1rem;
top: 1rem;
background: transparent;
color: #ddd;
border: none;
font-size: 1.1rem;
cursor: pointer;
}
.asset-drawer .asset-header { display:flex; gap:0.75rem; align-items:center; margin-bottom:0.5rem; }
.asset-drawer .asset-thumb img { width:120px; height:72px; object-fit:cover; border-radius:6px; }
.asset-drawer .asset-meta h3 { margin:0 0 0.2rem 0; font-size:1.05rem; }
.asset-drawer .asset-sub { color:#a8a8a8; font-size:0.85rem; }
.asset-drawer .asset-body { margin-top:0.5rem; color:#cfcfcf; font-size:0.9rem; }
.asset-drawer .btn-open-asset, .asset-drawer .btn-reveal {
margin-right:0.5rem;
padding:0.35rem 0.6rem;
border-radius:6px;
border:1px solid #333;
background:#161616;
color:#ddd;
cursor:pointer;
}
/* small-screen fallback */
@media (max-width: 640px) {
.asset-drawer-inner { width: 100%; margin: 0; border-radius: 0; }
}
.settings-dropdown {
position: relative;
display: inline-block;
}
.settings-btn {
background: transparent;
border: none;
font-size: 1.1rem;
cursor: pointer;
padding: 0.25rem;
border-radius: 4px;
transition: background 0.2s;
}
.settings-btn:hover {
background: rgba(255,255,255,0.1);
}
.settings-menu {
position: absolute;
right: 0;
top: 100%;
background: #1a1a1a;
border: 1px solid #333;
border-radius: 6px;
min-width: 160px;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
z-index: 1000;
display: none;
flex-direction: column;
}
.settings-menu.show {
display: flex;
}
.settings-menu button {
background: transparent;
border: none;
color: #eee;
padding: 0.5rem 0.75rem;
text-align: left;
cursor: pointer;
font-size: 0.9rem;
transition: background 0.2s;
}
.settings-menu button:hover {
background: rgba(255,255,255,0.1);
}
.settings-menu button:first-child {
border-radius: 6px 6px 0 0;
}
.settings-menu button:last-child {
border-radius: 0 0 6px 6px;
}
.clear-usage-btn:hover {
background: rgba(255, 193, 7, 0.2);
color: #ffc107;
}
.delete-deliverable-btn:hover {
background: rgba(220, 53, 69, 0.2);
color: #dc3545;
}
.usage-controls .toolbar-btn { padding: 0.35rem 0.7rem; border-radius:6px; background:#2a2a2a; color:#eee; border:1px solid #333; }
.usage-deliverable-group { margin-bottom: 0.8rem; border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,0.03); }
.usage-deliverable-header { padding:0.5rem 0.8rem; }
.usage-deliverable-body { padding:0.6rem 0.8rem; background:linear-gradient(180deg,#0f0f0f,#0b0b0b); }
.usage-detailed-list .usage-entry { display:flex; gap:0.6rem; align-items:center; }
.usage-row .usage-cell { overflow-x: hidden; } /* contain row layout */
.usage-card { width: 100%; box-sizing: border-box; padding: 0.5rem 0.5rem; }
.usage-card .timeline-container { padding: 0; margin: 0; box-sizing: border-box; max-width: 100%; }
.usage-card .usage-timeline-wrap { max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 8px 6px; }
.usage-card .sequence-timeline { padding: 0.6rem 0.8rem; margin: 0; }
.usage-card .timeline-track { min-width: 600px; /* floor for readability */ display: inline-block; max-width: none; }
.usage-row {
max-width: 100vw; /* never wider than viewport */
overflow: hidden; /* clip any overflow */
}
.usage-cell {
max-width: 100%;
overflow: hidden !important; /* force contain */
padding: 0;
}
.usage-card {
max-width: 100%;
overflow: hidden; /* never let children escape */
box-sizing: border-box;
}
.usage-card .usage-timeline-wrap {
max-width: 100% !important;
overflow-x: auto !important;
overflow-y: hidden !important;
box-sizing: border-box;
/* Add visual scroll hint */
scrollbar-width: thin;
scrollbar-color: #444 transparent;
}
.usage-card .usage-timeline-wrap::-webkit-scrollbar {
height: 8px;
}
.usage-card .usage-timeline-wrap::-webkit-scrollbar-track {
background: transparent;
}
.usage-card .usage-timeline-wrap::-webkit-scrollbar-thumb {
background: #444;
border-radius: 4px;
}
/* Force timeline track to be inline-block and constrained */
.usage-card .timeline-track {
display: inline-block !important;
vertical-align: top;
max-width: none; /* allow wide but contained by parent scroll */
min-width: 800px; /* readable minimum */
box-sizing: border-box;
}
/* Ensure sequence container doesn't break out */
.usage-card .sequence-timeline {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
max-width: 100%;
box-sizing: border-box;
}
/* Make sure the table row itself can't exceed viewport */
table {
table-layout: fixed;
width: 100%;
}
/* Reduce redundant outer spacing so the inline card looks compact */
.usage-card-header { padding: 6px 8px; margin: 0; }
.usage-summary { padding: 6px 8px; margin: 0; color: #bfbfbf; font-size: 0.95rem; }
.usage-assets-wrap { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.used-assets-block h4 { margin:0 0 6px 0; font-size:0.95rem; color:#ddd; }
.used-assets-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.used-asset-row { display:flex; gap:10px; align-items:center; padding:6px; background:#121212; border-radius:6px; border:1px solid #222; }
.used-thumb img { width:64px; height:40px; object-fit:cover; border-radius:4px; }
.used-meta { flex:1; }
.used-fname { font-weight:600; color:#eee; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.used-meta-sub { font-size:0.85rem; color:#aaa; }
.used-times { color:#bbb; font-size:0.85rem; min-width:110px; text-align:right; }
/* Mobile: stack */
@media (max-width:720px) {
.used-asset-row { flex-direction:column; align-items:flex-start; }
.used-times { text-align:left; width:100%; }
}
.path-selector {
display: flex;
gap: 12px;
align-items: center;
margin-top: 6px;
}
.path-display {
flex: 1;
padding: 8px 12px;
background: #f5f5f5;
border: 1px solid #ddd;
border-radius: 4px;
font-family: monospace;
font-size: 0.9em;
color: #888;
min-height: 18px;
display: flex;
align-items: center;
}
.btn-secondary {
background: #6c757d;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 0.9em;
}
.btn-secondary:hover {
background: #5a6268;
}
@keyframes flash {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.deliverables-table-wrapper {
background: transparent;
border-radius: 0;
overflow: visible;
border: none;
box-shadow: none;
}
.deliverables-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
font-size: 14px;
line-height: 1.5;
}
/* ===== TABLE HEADER ===== */
.deliverables-table thead {
background: transparent;
border-bottom: 1px solid #2a2a2a;
position: sticky;
top: 0;
z-index: 10;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.deliverables-table th {
text-align: left;
padding: 12px 20px;
font-weight: 500;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #707070;
white-space: nowrap;
border-right: none;
background: rgba(34, 34, 34, 0.95);
}
.deliverables-table th:last-child {
text-align: right;
}
/* Sortable Headers */
.deliverables-table th.sortable {
cursor: pointer;
user-select: none;
transition: color 0.12s ease;
}
.deliverables-table th.sortable:hover {
color: #ececec;
}
.deliverables-table th.sorted {
color: #ececec;
}
.deliverables-table th.sorted::after {
content: '↓';
margin-left: 6px;
opacity: 0.5;
font-size: 10px;
}
.deliverables-table th.sorted.asc::after {
content: '↑';
}
.deliverables-table th i {
display: none; /* Remove decorative icons */
}
/* ===== TABLE BODY ===== */
.deliverables-table tbody tr {
border-bottom: 1px solid #2a2a2a;
transition: background-color 0.08s ease;
will-change: background-color;
}
.deliverables-table tbody tr:hover {
background-color: #252525;
}
.deliverables-table tbody tr:last-child {
border-bottom: none;
}
.deliverables-table td {
padding: 14px 20px;
color: #ececec;
vertical-align: middle;
border-right: none;
}
.deliverables-table td:last-child {
text-align: right;
}
/* ===== PRIMARY COLUMN (DELIVERABLE CODE) ===== */
.deliverable-primary {
display: flex;
align-items: center;
gap: 12px;
}
.deliverable-icon {
display: none; /* Remove decorative icon box */
}
.deliverable-info {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.deliverable-code {
font-weight: 600;
font-size: 14px;
color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.2px;
}
.deliverable-subtitle {
font-size: 12px;
color: #707070;
font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ===== BRAND COLUMN ===== */
.brand-cell {
display: flex;
flex-direction: column;
gap: 3px;
}
.brand-name {
font-weight: 500;
font-size: 14px;
color: #ececec;
}
.brand-code {
font-size: 12px;
color: #707070;
font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
}
/* ===== PATH COLUMN - MINIMALIST ===== */
.path-cell {
position: relative;
max-width: 320px;
font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
}
.path-display {
display: flex;
align-items: center;
gap: 8px;
padding: 0;
background: transparent;
border-radius: 0;
font-size: 12px;
color: #909090;
transition: color 0.12s ease;
cursor: default;
border: none;
}
.path-display:hover {
color: #b0b0b0;
}
.path-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
.path-copy-btn {
opacity: 0;
background: transparent;
border: none;
color: #707070;
cursor: pointer;
padding: 4px 6px;
border-radius: 3px;
transition: opacity 0.12s ease, color 0.12s ease, background-color 0.12s ease;
flex-shrink: 0;
font-size: 13px;
}
.deliverables-table tbody tr:hover .path-copy-btn {
opacity: 1;
}
.path-copy-btn:hover {
background: rgba(255, 255, 255, 0.05);
color: #ececec;
}
.path-copy-btn:active {
transform: none; /* Remove jarring scale effect */
background: rgba(255, 255, 255, 0.08);
}
/* ===== SHOOTS BADGE ===== */
.shoots-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: transparent;
border: 1px solid #3a3a3a;
border-radius: 3px;
font-size: 12px;
font-weight: 500;
color: #b0b0b0;
cursor: pointer;
transition: border-color 0.12s ease, color 0.12s ease;
font-variant-numeric: tabular-nums;
}
.shoots-badge:hover {
border-color: #505050;
color: #ececec;
}
.shoots-badge i {
font-size: 11px;
opacity: 0.7;
}
/* ===== STATUS BADGE - MINIMAL ===== */
.status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 3px;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
border: 1px solid;
}
.status-badge.draft {
background: transparent;
border-color: #3a3a3a;
color: #909090;
}
.status-badge.in-progress {
background: transparent;
border-color: #2563eb;
color: #60a5fa;
}
.status-badge.ready {
background: transparent;
border-color: #16a34a;
color: #4ade80;
}
.status-badge.delivered {
background: transparent;
border-color: #7c3aed;
color: #a78bfa;
}
.status-badge::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
}
/* ===== DATE COLUMN ===== */
.date-cell {
display: flex;
flex-direction: column;
gap: 2px;
}
.date-relative {
font-size: 13px;
color: #ececec;
font-weight: 500;
}
.date-absolute {
font-size: 11px;
color: #707070;
font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
font-variant-numeric: tabular-nums;
}
/* ===== ACTIONS COLUMN ===== */
.actions-cell {
display: flex;
align-items: center;
gap: 6px;
justify-content: flex-end;
}
.action-btn {
background: transparent;
border: 1px solid #3a3a3a;
color: #b0b0b0;
padding: 6px 12px;
border-radius: 3px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease;
white-space: nowrap;
}
.action-btn:hover {
border-color: #505050;
color: #ececec;
background: rgba(255, 255, 255, 0.02);
}
.action-btn.primary {
background: transparent;
border-color: #16a34a;
color: #4ade80;
}
.action-btn.primary:hover {
background: rgba(22, 163, 74, 0.1);
border-color: #22c55e;
color: #4ade80;
}
/* ===== ACTION MENU ===== */
.action-menu-wrapper {
position: relative;
}
.action-menu-trigger {
background: transparent;
border: none;
color: #707070;
padding: 6px;
border-radius: 3px;
cursor: pointer;
transition: color 0.12s ease, background-color 0.12s ease;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.action-menu-trigger:hover {
background: rgba(255, 255, 255, 0.05);
color: #ececec;
}
.action-menu {
position: absolute;
right: 0;
top: calc(100% + 4px);
min-width: 180px;
background: #1a1a1a;
border: 1px solid #2a2a2a;
border-radius: 4px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
z-index: 100;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.12s ease, visibility 0.12s ease, transform 0.12s ease;
}
.action-menu.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.action-menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: transparent;
border: none;
color: #b0b0b0;
font-size: 13px;
cursor: pointer;
width: 100%;
text-align: left;
transition: background-color 0.12s ease, color 0.12s ease;
border-bottom: 1px solid #2a2a2a;
}
.action-menu-item:last-child {
border-bottom: none;
}
.action-menu-item:hover {
background: rgba(255, 255, 255, 0.03);
color: #ececec;
}
.action-menu-item i {
font-size: 14px;
width: 16px;
text-align: center;
opacity: 0.7;
}
.action-menu-item.danger:hover {
background: rgba(239, 68, 68, 0.08);
color: #ef4444;
}
.action-menu-item.danger:hover i {
opacity: 1;
}
/* ===== EMPTY STATE ===== */
.table-empty-state {
padding: 80px 40px;
text-align: center;
}
.empty-state-icon {
width: 64px;
height: 64px;
background: transparent;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
border: none;
}
.empty-state-icon i {
font-size: 48px;
color: #3a3a3a;
}
.empty-state-title {
font-size: 16px;
font-weight: 500;
color: #ececec;
margin-bottom: 6px;
}
.empty-state-subtitle {
font-size: 13px;
color: #707070;
margin-bottom: 20px;
}
/* ===== LOADING STATE ===== */
.table-loading {
padding: 60px 40px;
text-align: center;
}
.loading-spinner {
width: 32px;
height: 32px;
border: 2px solid #2a2a2a;
border-top-color: #707070;
border-radius: 50%;
animation: spin 0.7s linear infinite;
margin: 0 auto 20px;
}
/* ===== TOOLTIP (MINIMAL) ===== */
.path-tooltip {
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: #1a1a1a;
border: 1px solid #2a2a2a;
border-radius: 3px;
padding: 6px 10px;
font-size: 11px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.12s ease;
z-index: 1000;
max-width: 400px;
word-break: break-all;
color: #b0b0b0;
font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
}
.path-cell:hover .path-tooltip {
opacity: 1;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
.deliverables-table th,
.deliverables-table td {
padding: 12px 16px;
}
.path-cell {
max-width: 240px;
}
}
@media (max-width: 900px) {
/* Hide less critical columns */
.deliverables-table th:nth-child(3),
.deliverables-table td:nth-child(3),
.deliverables-table th:nth-child(5),
.deliverables-table td:nth-child(5) {
display: none;
}
}
@media (max-width: 640px) {
.deliverables-table-wrapper {
border-radius: 0;
border-left: none;
border-right: none;
}
/* Stack to card view */
.deliverables-table {
display: block;
}
.deliverables-table thead {
display: none;
}
.deliverables-table tbody,
.deliverables-table tr,
.deliverables-table td {
display: block;
}
.deliverables-table tr {
margin-bottom: 16px;
padding: 16px;
background: #252525;
border-radius: 4px;
border: 1px solid #2a2a2a;
}
.deliverables-table td {
padding: 8px 0;
border: none;
}
.deliverables-table td::before {
content: attr(data-label);
display: block;
font-size: 11px;
text-transform: uppercase;
color: #707070;
margin-bottom: 4px;
letter-spacing: 0.5px;
font-weight: 500;
}
.actions-cell {
justify-content: flex-start;
margin-top: 8px;
}
}
/* ===== PERFORMANCE OPTIMIZATION ===== */
.deliverables-table tbody tr {
contain: layout style paint;
}
/* Remove all transform/opacity animations */
.deliverables-table tbody tr,
.action-btn,
.shoots-badge,
.status-badge {
transform: none !important;
will-change: auto;
}
/* ===== APPROVALS PAGE STYLES ===== */
/* Toolbar Filter Chips */
.approval-filter-chips {
display: flex;
gap: 0.5rem;
align-items: center;
}
.approval-filter-chips .filter-chip {
background: transparent;
border: 1px solid #3a3a3a;
color: #b0b0b0;
padding: 6px 12px;
border-radius: 16px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.12s ease;
white-space: nowrap;
}
.approval-filter-chips .filter-chip:hover {
border-color: #505050;
color: #ececec;
background: rgba(255, 255, 255, 0.02);
}
.approval-filter-chips .filter-chip.active {
background: rgba(255, 255, 255, 0.08);
border-color: #ececec;
color: #ffffff;
font-weight: 600;
}
/* Approvals Table */
.approvals-table-wrapper {
background: transparent;
border-radius: 0;
overflow: visible;
border: none;
margin-top: 1.5rem;
}
.approvals-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
line-height: 1.5;
}
.approvals-table thead {
background: transparent;
border-bottom: 1px solid #2a2a2a;
position: sticky;
top: 0;
z-index: 10;
backdrop-filter: blur(8px);
}
.approvals-table th {
text-align: left;
padding: 12px 20px;
font-weight: 500;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #707070;
white-space: nowrap;
background: rgba(34, 34, 34, 0.95);
}
.approvals-table th:last-child {
text-align: right;
}
.approvals-table th.sortable {
cursor: pointer;
user-select: none;
transition: color 0.12s ease;
}
.approvals-table th.sortable:hover {
color: #ececec;
}
.approvals-table tbody tr {
border-bottom: 1px solid #2a2a2a;
transition: background-color 0.08s ease;
}
.approvals-table tbody tr:hover {
background-color: #252525;
}
.approvals-table td {
padding: 14px 20px;
color: #ececec;
vertical-align: middle;
}
.approvals-table td:last-child {
text-align: right;
}
/* Approval Status Badges */
.approval-status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 3px;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
border: 1px solid;
}
.approval-status-badge::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
}
.approval-status-badge.pending {
background: transparent;
border-color: #f59e0b;
color: #fbbf24;
}
.approval-status-badge.revision_requested {
background: transparent;
border-color: #ef4444;
color: #f87171;
}
.approval-status-badge.approved {
background: transparent;
border-color: #10b981;
color: #34d399;
}
.approval-status-badge.overdue {
background: transparent;
border-color: #dc2626;
color: #ef4444;
animation: pulse-border 2s infinite;
}
.approval-status-badge.rejected {
background: transparent;
border-color: #7c3aed;
color: #a78bfa;
}
@keyframes pulse-border {
0%, 100% { border-color: #dc2626; opacity: 1; }
50% { border-color: #f87171; opacity: 0.8; }
}
/* Version Badge */
.version-badge {
background: #333;
color: #fff;
padding: 3px 7px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
font-family: 'SF Mono', 'Monaco', monospace;
}
/* Deadline Cell */
.deadline-cell {
display: flex;
flex-direction: column;
gap: 2px;
}
.deadline-date {
font-size: 13px;
color: #ececec;
font-weight: 500;
}
.deadline-relative {
font-size: 11px;
color: #707070;
}
.deadline-relative.overdue {
color: #ef4444;
font-weight: 600;
}
/* Approval Detail Drawer */
.approval-detail-drawer.open {
width: 1200px;
}
.approval-detail-layout {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 2rem;
min-height: calc(100vh - 120px);
}
/* Media Preview Section */
.approval-media-section {
display: flex;
flex-direction: column;
gap: 1rem;
position: sticky;
top: 0;
height: fit-content;
}
.approval-video-player {
width: 100%;
aspect-ratio: 16/9;
background: #000;
border-radius: 8px;
overflow: hidden;
}
.approval-video-player video {
width: 100%;
height: 100%;
object-fit: contain;
}
.approval-media-controls {
display: flex;
gap: 0.5rem;
padding: 0.75rem;
background: #1a1a1a;
border-radius: 6px;
border: 1px solid #2a2a2a;
}
.media-control-btn {
background: transparent;
border: 1px solid #3a3a3a;
color: #b0b0b0;
padding: 6px 12px;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
transition: all 0.12s ease;
display: flex;
align-items: center;
gap: 6px;
}
.media-control-btn:hover {
border-color: #ececec;
color: #ececec;
background: rgba(255, 255, 255, 0.02);
}
.media-control-btn i {
font-size: 14px;
}
/* Metadata & Actions Section */
.approval-info-section {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.approval-metadata {
background: #1a1a1a;
border: 1px solid #2a2a2a;
border-radius: 8px;
padding: 1.5rem;
}
.approval-metadata-title {
font-size: 14px;
font-weight: 600;
color: #b0b0b0;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.metadata-row {
display: flex;
justify-content: space-between;
padding: 0.75rem 0;
border-bottom: 1px solid #2a2a2a;
}
.metadata-row:last-child {
border-bottom: none;
}
.metadata-label {
color: #b0b0b0;
font-size: 13px;
}
.metadata-value {
color: #ececec;
font-size: 13px;
font-weight: 500;
text-align: right;
}
/* Version History */
.version-history {
background: #1a1a1a;
border: 1px solid #2a2a2a;
border-radius: 8px;
padding: 1.5rem;
}
.version-history-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1rem;
}
.version-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid #2a2a2a;
border-radius: 6px;
transition: all 0.12s ease;
}
.version-item:hover {
background: rgba(255, 255, 255, 0.04);
border-color: #3a3a3a;
}
.version-item.current {
border-color: #10b981;
background: rgba(16, 185, 129, 0.05);
}
.version-info {
display: flex;
align-items: center;
gap: 1rem;
}
.version-number {
font-family: 'SF Mono', 'Monaco', monospace;
font-weight: 600;
color: #ececec;
}
.version-date {
font-size: 12px;
color: #707070;
}
.version-actions {
display: flex;
gap: 0.5rem;
}
/* Comments Section */
.approval-comments {
background: #1a1a1a;
border: 1px solid #2a2a2a;
border-radius: 8px;
padding: 1.5rem;
}
.comments-list {
max-height: 400px;
overflow-y: auto;
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.comment-item {
background: rgba(255, 255, 255, 0.02);
border: 1px solid #2a2a2a;
border-radius: 6px;
padding: 1rem;
}
.comment-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.comment-author {
font-weight: 600;
color: #ececec;
font-size: 13px;
}
.comment-timestamp {
font-size: 11px;
color: #707070;
font-family: 'SF Mono', 'Monaco', monospace;
}
.comment-text {
color: #b0b0b0;
font-size: 14px;
line-height: 1.6;
}
.comment-with-timecode {
border-left: 3px solid #10b981;
padding-left: 1rem;
}
.comment-timecode-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
color: #10b981;
margin-bottom: 0.5rem;
cursor: pointer;
}
.comment-timecode-badge:hover {
background: rgba(16, 185, 129, 0.15);
}
/* Add Comment Form */
.add-comment-form {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.comment-input {
background: #0f0f0f;
border: 1px solid #2a2a2a;
border-radius: 6px;
padding: 0.75rem;
color: #ececec;
font-size: 14px;
min-height: 80px;
resize: vertical;
font-family: inherit;
transition: border-color 0.12s ease;
}
.comment-input:focus {
outline: none;
border-color: #ececec;
}
.comment-form-actions {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
}
/* Approval Actions */
.approval-actions {
background: #1a1a1a;
border: 1px solid #2a2a2a;
border-radius: 8px;
padding: 1.5rem;
}
.approval-actions-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
margin-top: 1rem;
}
.approval-action-btn {
padding: 1rem;
border-radius: 6px;
border: 1px solid;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.12s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.approval-action-btn.approve {
background: rgba(16, 185, 129, 0.1);
border-color: #10b981;
color: #10b981;
}
.approval-action-btn.approve:hover {
background: rgba(16, 185, 129, 0.2);
border-color: #34d399;
}
.approval-action-btn.request-changes {
background: rgba(239, 68, 68, 0.1);
border-color: #ef4444;
color: #ef4444;
}
.approval-action-btn.request-changes:hover {
background: rgba(239, 68, 68, 0.2);
border-color: #f87171;
}
.approval-action-btn.download {
background: rgba(59, 130, 246, 0.1);
border-color: #3b82f6;
color: #3b82f6;
}
.approval-action-btn.download:hover {
background: rgba(59, 130, 246, 0.2);
border-color: #60a5fa;
}
.approval-action-btn.reject {
background: rgba(124, 58, 237, 0.1);
border-color: #7c3aed;
color: #a78bfa;
}
.approval-action-btn.reject:hover {
background: rgba(124, 58, 237, 0.2);
border-color: #8b5cf6;
}
/* Empty State */
.approvals-empty-state {
text-align: center;
padding: 80px 40px;
}
.approvals-empty-state i {
font-size: 64px;
color: #3a3a3a;
margin-bottom: 1.5rem;
}
.approvals-empty-state h3 {
font-size: 18px;
color: #ececec;
margin-bottom: 0.5rem;
}
.approvals-empty-state p {
font-size: 14px;
color: #707070;
}
/* Responsive */
@media (max-width: 1200px) {
.approval-detail-layout {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.approval-media-section {
position: static;
}
}
@media (max-width: 640px) {
.approval-filter-chips {
flex-wrap: wrap;
}
.approval-actions-grid {
grid-template-columns: 1fr;
}
}
/* ============================================
SCHEDULER PAGE STYLES - CONSOLIDATED
============================================ */
/* ============================================
TOOLBAR
============================================ */
.scheduler-toolbar.slick-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
border-bottom: 1px solid var(--mono-border, #2a2a2a);
margin-bottom: 1.5rem;
}
.scheduler-toolbar .toolbar-group {
display: flex;
align-items: center;
gap: 0.75rem;
}
.scheduler-toolbar .toolbar-group-right {
display: flex;
align-items: center;
gap: 0.75rem;
}
.scheduler-toolbar .toolbar-title {
font-size: 0.9rem;
color: var(--mono-text-muted, #888);
}
.scheduler-toolbar .toolbar-select {
padding: 0.5rem 0.75rem;
background: var(--mono-surface, #1a1a1a);
border: 1px solid var(--mono-border, #333);
border-radius: 6px;
color: var(--mono-text, #ececec);
font-size: 0.85rem;
min-width: 120px;
}
.scheduler-toolbar .toolbar-select:focus {
outline: none;
border-color: var(--mono-text-muted, #555);
}
/* ============================================
VIEW TOGGLE
============================================ */
.view-toggle {
display: flex;
background: var(--mono-surface, #1a1a1a);
border: 1px solid var(--mono-border, #333);
border-radius: 6px;
padding: 3px;
gap: 3px;
}
.view-toggle .view-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: transparent;
border: none;
border-radius: 4px;
color: var(--mono-text-muted, #888);
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.view-toggle .view-btn:hover {
color: var(--mono-text, #ececec);
background: rgba(255, 255, 255, 0.05);
}
.view-toggle .view-btn.active {
background: rgba(255, 255, 255, 0.1);
color: var(--mono-text, #ececec);
}
.view-toggle .view-btn i {
font-size: 14px;
}
/* ============================================
VIEW CONTAINERS
============================================ */
.scheduler-section {
margin-top: 0;
}
.scheduler-table-wrapper {
overflow-x: auto;
}
.scheduler-view {
display: none;
}
.scheduler-view.active {
display: block;
}
/* ============================================
TABLE VIEW
============================================ */
.scheduler-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.scheduler-table th,
.scheduler-table td {
padding: 1rem 0.75rem;
text-align: left;
border-bottom: 1px solid var(--mono-border, #2a2a2a);
}
.scheduler-table th {
font-weight: 600;
color: var(--mono-text-muted, #888);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.scheduler-table th.sortable {
cursor: pointer;
}
.scheduler-table th.sortable:hover {
color: var(--mono-text, #ececec);
}
.scheduler-table tbody tr:hover {
background: rgba(255, 255, 255, 0.02);
}
/* Post Preview Thumbnail */
.post-preview-thumb {
width: 48px;
height: 48px;
border-radius: 6px;
overflow: hidden;
background: var(--mono-surface, #1a1a1a);
display: flex;
align-items: center;
justify-content: center;
}
.post-preview-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.post-preview-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--mono-text-muted, #555);
}
.post-preview-placeholder i {
font-size: 20px;
}
/* Post Deliverable Info */
.post-deliverable-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.post-deliverable-code {
font-weight: 600;
color: var(--mono-text, #ececec);
}
.post-deliverable-id {
font-size: 0.75rem;
color: var(--mono-text-muted, #666);
font-family: monospace;
}
/* Placement Cell */
.post-placement {
display: flex;
align-items: center;
gap: 6px;
color: var(--mono-text-muted, #888);
font-size: 0.85rem;
text-transform: capitalize;
}
.post-placement i {
font-size: 14px;
}
/* Schedule Date Cell */
.post-schedule-date {
display: flex;
flex-direction: column;
gap: 2px;
}
.post-schedule-date .date {
font-weight: 500;
color: var(--mono-text, #ececec);
}
.post-schedule-date .time {
font-size: 0.75rem;
color: var(--mono-text-muted, #888);
}
/* ============================================
CALENDAR VIEW
============================================ */
.calendar-header {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.calendar-header h2 {
font-size: 1.25rem;
font-weight: 600;
color: var(--mono-text, #ececec);
min-width: 200px;
text-align: center;
}
.calendar-grid {
background: var(--mono-surface, #1a1a1a);
border: 1px solid var(--mono-border, #2a2a2a);
border-radius: 8px;
overflow: hidden;
}
.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
background: rgba(255, 255, 255, 0.02);
border-bottom: 1px solid var(--mono-border, #2a2a2a);
}
.calendar-weekdays div {
padding: 12px;
text-align: center;
font-size: 0.75rem;
font-weight: 600;
color: var(--mono-text-muted, #888);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.calendar-day {
min-height: 100px;
padding: 8px;
border-right: 1px solid var(--mono-border, #2a2a2a);
border-bottom: 1px solid var(--mono-border, #2a2a2a);
background: transparent;
transition: background 0.15s ease;
}
.calendar-day:nth-child(7n) {
border-right: none;
}
.calendar-day:hover {
background: rgba(255, 255, 255, 0.02);
}
.calendar-day.other-month {
opacity: 0.4;
}
.calendar-day.today {
background: rgba(59, 130, 246, 0.05);
}
.calendar-day-number {
font-size: 0.85rem;
font-weight: 600;
color: var(--mono-text-muted, #888);
margin-bottom: 6px;
}
.calendar-day.today .calendar-day-number {
color: #60a5fa;
}
.calendar-day-posts {
display: flex;
flex-direction: column;
gap: 3px;
}
.calendar-post {
background: var(--mono-bg, #0f0f0f);
border-left: 3px solid #60a5fa;
border-radius: 3px;
padding: 4px 6px;
cursor: pointer;
transition: all 0.15s ease;
}
.calendar-post:hover {
background: rgba(255, 255, 255, 0.05);
}
.calendar-post.live {
border-left-color: #34d399;
}
.calendar-post.scheduled {
border-left-color: #fbbf24;
}
.calendar-post.ready {
border-left-color: #60a5fa;
}
.calendar-post-title {
font-size: 0.7rem;
font-weight: 500;
color: var(--mono-text, #ececec);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.calendar-more {
font-size: 0.65rem;
color: var(--mono-text-muted, #666);
padding: 2px 6px;
}
/* ============================================
GRID/FEED VIEW STYLES
============================================ */
.instagram-grid-preview {
max-width: 935px;
margin: 0 auto;
background: var(--oms-bg-surface, #1a1a1a);
border-radius: 8px;
overflow: hidden;
}
.instagram-profile-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem;
border-bottom: 1px solid var(--oms-border-default, #333);
gap: 1.5rem;
}
.profile-info {
display: flex;
align-items: center;
gap: 1.25rem;
flex: 1;
}
.profile-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
padding: 3px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.profile-avatar::after {
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--oms-bg-surface, #1a1a1a);
}
.profile-details {
flex: 1;
min-width: 0;
}
.feed-platform-selector {
font-size: 1rem;
font-weight: 600;
background: transparent;
border: none;
color: var(--oms-text-primary, #ececec);
padding: 0.25rem 0;
cursor: pointer;
max-width: 250px;
}
.feed-platform-selector:hover {
background: transparent;
}
.profile-stats {
display: flex;
gap: 2rem;
flex-shrink: 0;
}
.profile-stats .stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.profile-stats .stat strong {
font-size: 1.125rem;
font-weight: 600;
color: var(--oms-text-primary, #ececec);
}
.profile-stats .stat span {
font-size: 0.875rem;
color: var(--oms-text-muted, #666);
}
.instagram-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
padding: 0;
}
.ig-grid-item {
aspect-ratio: 1;
position: relative;
cursor: pointer;
overflow: hidden;
background: var(--oms-bg-card, #222);
}
.ig-grid-media {
width: 100%;
height: 100%;
position: relative;
}
.ig-grid-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ig-grid-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--oms-bg-hover, #2a2a2a);
color: var(--oms-text-muted, #666);
}
.ig-grid-placeholder i {
font-size: 2rem;
}
.ig-type-icon {
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: 24px;
height: 24px;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.875rem;
z-index: 2;
}
.ig-type-icon--carousel {
background: rgba(100, 116, 139, 0.9);
}
.ig-reels-badge {
position: absolute;
bottom: 0.5rem;
left: 0.5rem;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
padding: 0.25rem 0.5rem;
border-radius: 4px;
color: #fff;
font-size: 0.75rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.25rem;
z-index: 2;
}
.ig-grid-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
}
.ig-grid-item:hover .ig-grid-overlay {
opacity: 1;
}
.ig-grid-stats {
display: flex;
gap: 1.5rem;
color: #fff;
font-weight: 600;
font-size: 0.875rem;
}
.ig-grid-stats span {
display: flex;
align-items: center;
gap: 0.375rem;
}
/* Platform-specific grid styles */
.platform-tiktok .instagram-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 8px;
}
.platform-tiktok .ig-grid-item {
aspect-ratio: 9 / 16;
border-radius: 8px;
}
.platform-youtube .instagram-grid {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
}
.platform-youtube .ig-grid-item {
aspect-ratio: 16 / 9;
border-radius: 12px;
}
.platform-linkedin .instagram-grid,
.platform-facebook .instagram-grid {
grid-template-columns: 1fr;
gap: 16px;
max-width: 600px;
margin: 0 auto;
padding: 1rem;
}
.platform-linkedin .ig-grid-item,
.platform-facebook .ig-grid-item {
aspect-ratio: auto;
border-radius: 8px;
border: 1px solid var(--oms-border-default, #333);
}
/* Responsive */
@media (max-width: 768px) {
.instagram-profile-header {
flex-direction: column;
align-items: flex-start;
}
.profile-stats {
width: 100%;
justify-content: space-around;
padding-top: 1rem;
border-top: 1px solid var(--oms-border-default, #333);
}
.instagram-grid {
grid-template-columns: repeat(3, 1fr);
gap: 2px;
}
.platform-tiktok .instagram-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.profile-avatar {
width: 60px;
height: 60px;
}
.feed-platform-selector {
font-size: 0.875rem;
}
}
/* ============================================
SCHEDULER DRAWER - DETAIL VIEW
============================================ */
/* Drawer Grid Layout (2 columns) */
.scheduler-drawer-grid {
display: flex;
gap: 2rem;
height: 100%;
align-items: flex-start;
}
.scheduler-col-preview {
flex: 1;
position: sticky;
top: 0;
min-width: 0;
align-self: flex-start;
}
.scheduler-col-form {
flex: 1;
min-width: 0;
}
/* Preview Section */
.scheduler-preview-section {
margin-bottom: 1.5rem;
}
.scheduler-preview-wrapper {
background: #000;
border-radius: 8px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
max-height: 400px;
border: 1px solid var(--mono-border);
margin-bottom: 1rem;
}
.scheduler-preview-media {
max-width: 100%;
max-height: 400px;
object-fit: contain;
}
.scheduler-preview-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem;
color: #555;
gap: 0.75rem;
min-height: 200px;
}
.scheduler-preview-placeholder i {
font-size: 2.5rem;
}
.scheduler-preview-meta {
background: var(--mono-surface, #1a1a1a);
border: 1px solid var(--mono-border, #333);
border-radius: 6px;
padding: 0.75rem;
}
.scheduler-preview-meta .meta-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
padding: 0.5rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.scheduler-preview-meta .meta-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.scheduler-preview-meta .meta-label {
color: var(--mono-text-muted, #888);
font-weight: 500;
}
.scheduler-preview-meta .meta-value {
color: var(--mono-text, #ececec);
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 70%;
}
/* DateTime Row */
.scheduler-datetime-row {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
/* Presets */
.scheduler-presets {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.scheduler-preset-btn {
padding: 0.35rem 0.65rem;
background: transparent;
border: 1px solid var(--mono-border, #333);
border-radius: 4px;
color: var(--mono-text-muted, #888);
font-size: 0.75rem;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.scheduler-preset-btn:hover {
border-color: var(--mono-text-muted, #555);
color: var(--mono-text, #ececec);
background: rgba(255, 255, 255, 0.03);
}
.scheduler-preset-btn.active {
border-color: var(--mono-text, #ececec);
background: rgba(255, 255, 255, 0.05);
}
/* Character Count */
.scheduler-char-count {
text-align: right;
font-size: 0.75rem;
color: var(--mono-text-muted, #666);
margin-top: 0.5rem;
font-variant-numeric: tabular-nums;
}
.scheduler-char-count.over-limit {
color: #ef4444;
}
/* Collapsible Section */
.scheduler-collapsible {
border: 1px solid var(--mono-border, #333);
border-radius: 6px;
overflow: hidden;
margin-top: 1rem;
}
.scheduler-collapsible-toggle {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
background: rgba(255, 255, 255, 0.02);
border: none;
color: var(--mono-text-muted, #888);
font-size: 0.85rem;
cursor: pointer;
transition: all 0.15s ease;
}
.scheduler-collapsible-toggle:hover {
background: rgba(255, 255, 255, 0.04);
color: var(--mono-text, #ececec);
}
.scheduler-collapsible-toggle i {
transition: transform 0.2s ease;
font-size: 0.75rem;
}
.scheduler-collapsible.expanded .scheduler-collapsible-toggle i {
transform: rotate(180deg);
}
.scheduler-collapsible-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease, padding 0.25s ease;
padding: 0 1rem;
}
.scheduler-collapsible.expanded .scheduler-collapsible-content {
max-height: 200px;
padding: 0 1rem 1rem 1rem;
}
/* ============================================
DELIVERABLE SELECTOR
============================================ */
.deliverable-selector {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
max-height: 500px;
overflow-y: auto;
padding: 4px;
}
.deliverable-selector-loading,
.deliverable-selector-empty {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem;
text-align: center;
color: var(--mono-text-muted, #888);
}
.deliverable-selector-loading .oms-spinner,
.deliverable-selector-empty i {
font-size: 40px;
margin-bottom: 1rem;
opacity: 0.5;
}
.deliverable-selector-empty h4 {
font-size: 1rem;
color: var(--mono-text, #ececec);
margin-bottom: 0.5rem;
}
.deliverable-selector-empty p {
font-size: 0.85rem;
color: var(--mono-text-muted, #888);
}
/* Deliverable Card */
.deliverable-card {
background: var(--mono-surface, #1a1a1a);
border: 2px solid var(--mono-border, #333);
border-radius: 10px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.deliverable-card:hover {
border-color: var(--mono-text-muted, #555);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.deliverable-card.selected {
border-color: var(--mono-primary, #60a5fa);
background: rgba(96, 165, 250, 0.05);
}
.deliverable-card__checkbox {
position: absolute;
top: 12px;
right: 12px;
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.3);
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: all 0.15s ease;
}
.deliverable-card__checkbox i {
font-size: 12px;
color: transparent;
}
.deliverable-card.selected .deliverable-card__checkbox {
background: var(--mono-primary, #60a5fa);
border-color: var(--mono-primary, #60a5fa);
}
.deliverable-card.selected .deliverable-card__checkbox i {
color: #fff;
}
.deliverable-card__thumbnail {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: var(--mono-bg, #0f0f0f);
overflow: hidden;
}
.deliverable-card__thumbnail img,
.deliverable-card__thumbnail video {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.deliverable-card:hover .deliverable-card__thumbnail img,
.deliverable-card:hover .deliverable-card__thumbnail video {
transform: scale(1.05);
}
.deliverable-card-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}
.deliverable-card-placeholder i {
font-size: 36px;
color: var(--mono-text-muted, #555);
}
.deliverable-card__file-count {
position: absolute;
bottom: 8px;
left: 8px;
background: rgba(0, 0, 0, 0.7);
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
color: #fff;
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
}
.deliverable-card__file-count i {
font-size: 10px;
}
.deliverable-card__type-indicator {
position: absolute;
bottom: 8px;
right: 8px;
width: 28px;
height: 28px;
background: rgba(0, 0, 0, 0.7);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
transition: all 0.2s ease;
}
.deliverable-card:hover .deliverable-card__type-indicator {
background: rgba(16, 185, 129, 0.9);
transform: scale(1.1);
}
.deliverable-card__info {
padding: 12px;
}
.deliverable-card__code {
font-size: 0.95rem;
font-weight: 600;
color: var(--mono-text, #ececec);
margin: 0 0 4px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.deliverable-card__name {
font-size: 0.8rem;
color: var(--mono-text-muted, #888);
margin: 0 0 8px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.deliverable-card__meta {
display: flex;
align-items: center;
gap: 8px;
}
.deliverable-card__version {
font-size: 0.7rem;
color: var(--mono-text-muted, #666);
font-family: monospace;
}
/* ============================================
EMPTY STATE
============================================ */
.scheduler-empty-state {
text-align: center;
padding: 4rem 2rem;
}
.scheduler-empty-state i {
font-size: 64px;
color: var(--mono-text-muted, #3a3a3a);
margin-bottom: 1.5rem;
}
.scheduler-empty-state h3 {
font-size: 1.1rem;
color: var(--mono-text, #ececec);
margin-bottom: 0.5rem;
}
.scheduler-empty-state p {
font-size: 0.9rem;
color: var(--mono-text-muted, #888);
margin-bottom: 1.5rem;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1024px) {
.scheduler-toolbar.slick-toolbar {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.scheduler-toolbar .toolbar-group-right {
flex-wrap: wrap;
}
}
@media (max-width: 900px) {
.scheduler-drawer-grid {
flex-direction: column;
}
.scheduler-col-preview {
position: static;
width: 100%;
margin-bottom: 1.5rem;
}
.scheduler-preview-wrapper {
max-height: 50vh;
}
}
@media (max-width: 768px) {
.view-toggle {
width: 100%;
}
.view-toggle .view-btn {
flex: 1;
justify-content: center;
}
.calendar-day {
min-height: 80px;
}
.deliverable-selector {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
}
@media (max-width: 600px) {
.scheduler-datetime-row {
grid-template-columns: 1fr;
}
.scheduler-presets {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.deliverable-selector {
grid-template-columns: 1fr;
}
}
/* ============================================
SCHEDULER - OMS EXTENSIONS
============================================ */
/* 2-column grid for drawer */
.oms-grid--2-col {
display: grid;
grid-template-columns: 400px 1fr;
gap: 2rem;
align-items: start;
}
/* Sticky preview column */
.oms-drawer__col-sticky {
position: sticky;
top: 0;
align-self: start;
}
/* Scrollable form column */
.oms-drawer__col-scroll {
min-height: 0;
}
/* Details list */
.oms-details-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.oms-details-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid var(--oms-border-subtle, #333);
}
/* .oms-details-row:last-child {
border-bottom: none;
} */
.oms-details-label {
font-size: var(--oms-text-sm, 0.875rem);
color: var(--oms-text-secondary, #888);
font-weight: 500;
}
.oms-details-value {
font-size: var(--oms-text-sm, 0.875rem);
color: var(--oms-text-primary, #ececec);
text-align: right;
}
/* Collapsible */
.oms-collapsible {
border: 1px solid var(--oms-border-default, #333);
border-radius: var(--oms-radius-md, 6px);
overflow: hidden;
}
.oms-collapsible__toggle {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
background: transparent;
border: none;
color: var(--oms-text-secondary, #888);
font-size: var(--oms-text-sm, 0.875rem);
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease;
}
.oms-collapsible__toggle:hover {
background: var(--oms-bg-hover, rgba(255,255,255,0.05));
}
.oms-collapsible__toggle i {
transition: transform 0.2s ease;
font-size: 0.75rem;
}
.oms-collapsible--expanded .oms-collapsible__toggle i {
transform: rotate(180deg);
}
.oms-collapsible__content {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease, padding 0.25s ease;
padding: 0 1rem;
}
.oms-collapsible--expanded .oms-collapsible__content {
max-height: 300px;
padding: 0 1rem 1rem;
}
/* Preview section */
.scheduler-preview-section {
background: #000;
border-radius: var(--oms-radius-md, 8px);
overflow: hidden;
margin-bottom: 1rem;
}
.scheduler-preview-media {
max-width: 100%;
max-height: 400px;
object-fit: contain;
display: block;
}
.scheduler-preview-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem;
color: #555;
gap: 0.75rem;
min-height: 200px;
}
.scheduler-preview-placeholder i {
font-size: 2.5rem;
}
/* Preview metadata */
.scheduler-preview-meta {
background: var(--oms-bg-surface, #1a1a1a);
border: 1px solid var(--oms-border-default, #333);
border-radius: var(--oms-radius-md, 6px);
padding: 0.75rem;
}
.scheduler-preview-meta .meta-row {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
border-bottom: 1px solid var(--oms-border-subtle, rgba(255,255,255,0.05));
font-size: var(--oms-text-sm, 0.875rem);
}
.scheduler-preview-meta .meta-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.scheduler-preview-meta .meta-label {
color: var(--oms-text-secondary, #888);
}
.scheduler-preview-meta .meta-value {
color: var(--oms-text-primary, #ececec);
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 70%;
}
/* Responsive */
@media (max-width: 900px) {
.oms-grid--2-col {
grid-template-columns: 1fr;
}
.oms-drawer__col-sticky {
position: static;
}
}
/* ============================================
PERFORMANCE PAGE STYLES
============================================ */
.oms-performance-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
padding: 1.5rem;
background: var(--oms-bg-card);
border-radius: 12px;
margin-bottom: 1.5rem;
}
.oms-performance-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem;
background: var(--oms-bg-surface);
border-radius: 10px;
border: 1px solid var(--oms-border-default);
transition: all 0.2s ease;
}
.oms-performance-card:hover {
border-color: var(--oms-border-hover);
transform: translateY(-2px);
}
.oms-performance-card--primary {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
border-color: rgba(99, 102, 241, 0.3);
}
.oms-performance-card__icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--oms-bg-elevated);
border-radius: 12px;
font-size: 1.25rem;
color: var(--oms-primary);
}
.oms-performance-card--primary .oms-performance-card__icon {
background: rgba(99, 102, 241, 0.2);
color: #8b5cf6;
}
.oms-performance-card__content {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.oms-performance-card__value {
font-size: 1.75rem;
font-weight: 700;
color: var(--oms-text-primary);
line-height: 1;
}
.oms-performance-card__label {
font-size: 0.85rem;
color: var(--oms-text-muted);
}
.oms-performance-card__trend {
font-size: 0.8rem;
font-weight: 600;
}
/* Metrics Grid */
.oms-metrics-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.oms-metric-card {
background: var(--oms-bg-surface);
border: 1px solid var(--oms-border-default);
border-radius: 10px;
padding: 1.25rem;
text-align: center;
}
.oms-metric-card--highlight {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
border-color: rgba(99, 102, 241, 0.3);
}
.oms-metric-card__value {
font-size: 2rem;
font-weight: 700;
color: var(--oms-text-primary);
line-height: 1.2;
}
.oms-metric-card__label {
font-size: 0.9rem;
color: var(--oms-text-secondary);
margin-top: 0.25rem;
}
.oms-metric-card__sublabel {
font-size: 0.75rem;
color: var(--oms-text-muted);
margin-top: 0.125rem;
}
/* Stats List */
.oms-stats-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.oms-stats-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 1rem;
background: var(--oms-bg-surface);
border: 1px solid var(--oms-border-default);
border-radius: 8px;
}
.oms-stats-item__icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--oms-bg-elevated);
border-radius: 8px;
font-size: 1rem;
}
.oms-stats-item__label {
flex: 1;
font-size: 0.9rem;
color: var(--oms-text-secondary);
}
.oms-stats-item__value {
font-size: 1.1rem;
font-weight: 600;
color: var(--oms-text-primary);
}
/* Section Header */
.oms-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.oms-section-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
color: var(--oms-text-primary);
margin: 0;
}
.oms-section-actions {
display: flex;
gap: 0.5rem;
}
/* Clickable Row */
.oms-table__row--clickable {
cursor: pointer;
transition: background 0.15s ease;
}
.oms-table__row--clickable:hover {
background: var(--oms-bg-hover);
}
/* Account Stats Header */
.oms-account-stats {
margin-bottom: 1.5rem;
}
.oms-account-stats__card {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 1.5rem;
background: linear-gradient(135deg, rgba(225, 48, 108, 0.1), rgba(131, 58, 180, 0.1));
border: 1px solid rgba(225, 48, 108, 0.2);
border-radius: 12px;
}
.oms-account-stats__avatar {
width: 64px;
height: 64px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 3px solid rgba(225, 48, 108, 0.3);
}
.oms-account-stats__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.oms-account-stats__avatar-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #e1306c, #833ab4);
color: white;
font-size: 1.5rem;
}
.oms-account-stats__info {
flex: 1;
}
.oms-account-stats__username {
font-size: 1.25rem;
font-weight: 700;
color: var(--oms-text-primary);
margin: 0;
}
.oms-account-stats__name {
font-size: 0.9rem;
color: var(--oms-text-muted);
margin: 0.25rem 0 0;
}
.oms-account-stats__metrics {
display: flex;
gap: 2rem;
}
.oms-account-stats__metric {
text-align: center;
}
.oms-account-stats__metric-value {
display: block;
font-size: 1.5rem;
font-weight: 700;
color: var(--oms-text-primary);
}
.oms-account-stats__metric-label {
display: block;
font-size: 0.75rem;
color: var(--oms-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.oms-account-stats__actions {
display: flex;
gap: 0.5rem;
}
/* ============================================
ANALYTICS PAGE - REDESIGNED
============================================ */
.analytics-hero {
padding: 2rem;
background: linear-gradient(135deg, var(--oms-bg-elevated) 0%, var(--oms-bg-surface) 100%);
border-radius: 12px;
margin-bottom: 2rem;
}
.analytics-hero__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.analytics-hero__header h1 {
font-size: 1.5rem;
font-weight: 600;
color: var(--oms-text-primary);
margin: 0;
}
.analytics-hero__actions {
display: flex;
gap: 0.5rem;
}
/* KPI Grid */
.analytics-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
}
.analytics-kpi {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem;
background: var(--oms-bg-surface);
border-radius: 10px;
border: 1px solid var(--oms-border-subtle);
}
.analytics-kpi--primary {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
border: none;
}
.analytics-kpi--primary .analytics-kpi__icon {
background: rgba(255, 255, 255, 0.2);
color: white;
}
.analytics-kpi--primary .analytics-kpi__value,
.analytics-kpi--primary .analytics-kpi__label {
color: white;
}
.analytics-kpi__icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--oms-bg-elevated);
border-radius: 10px;
font-size: 1.25rem;
color: var(--oms-text-secondary);
flex-shrink: 0;
}
.analytics-kpi__content {
display: flex;
flex-direction: column;
min-width: 0;
}
.analytics-kpi__value {
font-size: 1.5rem;
font-weight: 700;
color: var(--oms-text-primary);
line-height: 1.2;
}
.analytics-kpi__label {
font-size: 0.8rem;
color: var(--oms-text-muted);
white-space: nowrap;
}
/* Section */
.analytics-section {
margin-bottom: 2rem;
}
.analytics-section__title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
font-weight: 600;
color: var(--oms-text-primary);
margin: 0 0 1rem 0;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--oms-border-subtle);
}
.analytics-section__title i {
color: var(--oms-text-secondary);
}
/* Stats Row */
.analytics-stats-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.analytics-stat-pill {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: var(--oms-bg-surface);
border: 1px solid var(--oms-border-subtle);
border-radius: 8px;
}
.analytics-stat-pill i {
color: var(--oms-text-muted);
font-size: 0.9rem;
}
.analytics-stat-pill__value {
font-weight: 700;
color: var(--oms-text-primary);
}
.analytics-stat-pill__label {
color: var(--oms-text-muted);
font-size: 0.85rem;
}
/* Storage Grid */
.analytics-storage-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 1rem;
}
@media (max-width: 1024px) {
.analytics-storage-grid {
grid-template-columns: 1fr;
}
}
.analytics-storage-card {
background: var(--oms-bg-surface);
border: 1px solid var(--oms-border-subtle);
border-radius: 10px;
padding: 1.25rem;
}
.analytics-storage-card--total {
background: linear-gradient(135deg, var(--oms-bg-elevated) 0%, var(--oms-bg-surface) 100%);
}
.analytics-storage-card__header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 1rem;
}
.analytics-storage-card__label {
font-size: 0.85rem;
color: var(--oms-text-secondary);
font-weight: 500;
}
.analytics-storage-card__value {
font-size: 1.25rem;
font-weight: 700;
color: var(--oms-text-primary);
}
/* Storage Bar */
.analytics-storage-bar {
margin-bottom: 1rem;
}
.analytics-storage-bar__track {
display: flex;
height: 12px;
background: var(--oms-bg-default);
border-radius: 6px;
overflow: hidden;
}
.analytics-storage-bar__segment {
height: 100%;
}
.analytics-storage-bar__segment--video {
background: #3b82f6;
}
.analytics-storage-bar__segment--photo {
background: #10b981;
}
.analytics-storage-bar__segment--audio {
background: #f59e0b;
}
.analytics-storage-legend {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.analytics-storage-legend__item {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
color: var(--oms-text-secondary);
}
.analytics-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.analytics-dot--video { background: #3b82f6; }
.analytics-dot--photo { background: #10b981; }
.analytics-dot--audio { background: #f59e0b; }
/* Type List */
.analytics-type-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.analytics-type-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid var(--oms-border-subtle);
}
.analytics-type-item:last-child {
border-bottom: none;
}
.analytics-type-item__info {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--oms-text-secondary);
}
.analytics-type-item__count {
font-weight: 600;
color: var(--oms-text-primary);
}
/* Efficiency Donut */
.analytics-efficiency-donut {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
.analytics-donut {
width: 100px;
height: 100px;
}
.analytics-donut__label {
font-size: 16px;
font-weight: 700;
fill: var(--oms-text-primary);
}
.analytics-efficiency-stats {
display: flex;
justify-content: center;
gap: 2rem;
}
.analytics-efficiency-stat {
text-align: center;
}
.analytics-efficiency-stat__value {
display: block;
font-size: 1.1rem;
font-weight: 700;
}
.analytics-efficiency-stat__label {
font-size: 0.75rem;
color: var(--oms-text-muted);
}
/* Brand List */
.analytics-brand-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.analytics-brand-card {
background: var(--oms-bg-surface);
border: 1px solid var(--oms-border-subtle);
border-radius: 10px;
overflow: hidden;
}
.analytics-brand-card__header {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
cursor: pointer;
transition: background 0.15s;
}
.analytics-brand-card__header:hover {
background: var(--oms-bg-elevated);
}
.analytics-brand-card__info {
flex: 1;
min-width: 0;
}
.analytics-brand-card__title {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.analytics-brand-card__code {
font-weight: 700;
color: var(--oms-text-primary);
}
.analytics-brand-card__name {
color: var(--oms-text-secondary);
font-size: 0.9rem;
}
.analytics-brand-card__subtitle {
font-size: 0.8rem;
color: var(--oms-text-muted);
margin-top: 0.25rem;
}
.analytics-brand-card__stats {
display: flex;
gap: 1.5rem;
}
.analytics-brand-stat {
text-align: right;
min-width: 70px;
}
.analytics-brand-stat__value {
display: block;
font-weight: 700;
font-size: 1rem;
color: var(--oms-text-primary);
}
.analytics-brand-stat__value--success { color: var(--oms-success); }
.analytics-brand-stat__value--warning { color: var(--oms-warning); }
.analytics-brand-stat__value--muted { color: var(--oms-text-muted); }
.analytics-brand-stat__label {
font-size: 0.7rem;
color: var(--oms-text-muted);
text-transform: uppercase;
}
.analytics-brand-card__chevron {
color: var(--oms-text-muted);
transition: transform 0.2s;
}
.analytics-brand-card--expanded .analytics-brand-card__chevron {
transform: rotate(180deg);
}
.analytics-brand-card__body {
display: none;
padding: 0 1.25rem 1.25rem;
border-top: 1px solid var(--oms-border-subtle);
}
.analytics-brand-card--expanded .analytics-brand-card__body {
display: block;
}
/* Shoot Table */
.analytics-shoot-table {
margin-top: 1rem;
}
.analytics-shoot-table__header {
display: grid;
grid-template-columns: 2fr 1fr 1.5fr 1fr 1.5fr;
gap: 1rem;
padding: 0.5rem 0;
font-size: 0.7rem;
text-transform: uppercase;
color: var(--oms-text-muted);
border-bottom: 1px solid var(--oms-border-subtle);
}
.analytics-shoot-row {
display: grid;
grid-template-columns: 2fr 1fr 1.5fr 1fr 1.5fr;
gap: 1rem;
padding: 0.75rem 0;
align-items: center;
font-size: 0.85rem;
border-bottom: 1px solid var(--oms-border-subtle);
}
.analytics-shoot-row:last-child {
border-bottom: none;
}
.analytics-shoot-row__info {
min-width: 0;
}
.analytics-shoot-row__code {
font-weight: 600;
color: var(--oms-text-primary);
}
.analytics-shoot-row__name {
display: block;
font-size: 0.75rem;
color: var(--oms-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.analytics-shoot-row__date {
color: var(--oms-text-secondary);
}
.analytics-shoot-row__assets {
color: var(--oms-text-primary);
}
.analytics-shoot-row__storage {
color: var(--oms-text-secondary);
}
.analytics-shoot-row__usage {
display: flex;
align-items: center;
gap: 0.5rem;
}
.analytics-mini-bar {
flex: 1;
height: 6px;
background: var(--oms-bg-default);
border-radius: 3px;
overflow: hidden;
}
.analytics-mini-bar__fill {
height: 100%;
background: var(--oms-success);
border-radius: 3px;
}
.analytics-mini-bar__label {
font-size: 0.75rem;
color: var(--oms-text-muted);
min-width: 35px;
}
/* Loading State */
.oms-analytics-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
text-align: center;
}
.oms-analytics-loading p {
margin: 0.5rem 0 0;
}
/* Responsive */
@media (max-width: 768px) {
.analytics-brand-card__stats {
display: none;
}
.analytics-shoot-table__header,
.analytics-shoot-row {
grid-template-columns: 2fr 1fr 1fr;
}
.analytics-shoot-row__date,
.analytics-shoot-table__header span:nth-child(2) {
display: none;
}
}
.analytics-brand-metrics {
margin-bottom: 1.25rem;
}
.analytics-brand-metrics__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0.75rem;
margin-top:1rem;
}
.analytics-brand-metric-card {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--oms-bg-elevated, #1f1f1f);
border: 1px solid var(--oms-border-subtle, #2a2a2a);
border-radius: 8px;
}
.analytics-brand-metric-card--wide {
grid-column: span 2;
}
.analytics-brand-metric-card__icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--oms-bg-surface, #1a1a1a);
border-radius: 8px;
font-size: 1.1rem;
color: var(--oms-text-secondary, #888);
flex-shrink: 0;
}
.analytics-brand-metric-card__info {
display: flex;
flex-direction: column;
min-width: 0;
}
.analytics-brand-metric-card__value {
font-size: 1rem;
font-weight: 700;
color: var(--oms-text-primary, #ececec);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.analytics-brand-metric-card__label {
font-size: 0.7rem;
color: var(--oms-text-muted, #888);
line-height: 1.3;
}
/* Brand Sections */
.analytics-brand-section {
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid var(--oms-border-subtle, #2a2a2a);
}
.analytics-brand-section__title {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--oms-text-secondary, #888);
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 0 0.75rem 0;
}
.analytics-brand-section__title i {
font-size: 0.85rem;
}
/* Pipeline Bar */
.analytics-pipeline__bar {
display: flex;
height: 10px;
border-radius: 5px;
overflow: hidden;
background: var(--oms-bg-default, #0f0f0f);
margin-bottom: 0.5rem;
}
.analytics-pipeline__segment {
height: 100%;
min-width: 2px;
transition: width 0.3s ease;
}
.analytics-pipeline__legend {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
font-size: 0.75rem;
color: var(--oms-text-muted, #888);
}
.analytics-pipeline__legend-item {
display: flex;
align-items: center;
gap: 0.3rem;
}
/* Placement Row */
.analytics-placement-row {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.75rem;
}
/* Production Grid */
.analytics-production-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
.analytics-production-column {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.analytics-production-column--tags {
grid-column: span 2;
}
.analytics-production-subtitle {
font-size: 0.75rem;
font-weight: 600;
color: var(--oms-text-muted, #888);
text-transform: uppercase;
letter-spacing: 0.3px;
margin: 0 0 0.25rem 0;
}
.analytics-production-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.3rem 0;
font-size: 0.8rem;
}
.analytics-production-row__label {
color: var(--oms-text-secondary, #b0b0b0);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
}
.analytics-production-row__value {
font-weight: 600;
color: var(--oms-text-primary, #ececec);
flex-shrink: 0;
}
/* Tag Cloud */
.analytics-tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
/* Updated Shoot Table with Deliverables column */
.analytics-shoot-table__header {
display: grid;
grid-template-columns: 2fr 1fr 1.5fr 1fr 1fr 1.5fr;
gap: 1rem;
padding: 0.5rem 0;
font-size: 0.7rem;
text-transform: uppercase;
color: var(--oms-text-muted);
border-bottom: 1px solid var(--oms-border-subtle);
}
.analytics-shoot-row {
display: grid;
grid-template-columns: 2fr 1fr 1.5fr 1fr 1fr 1.5fr;
gap: 1rem;
padding: 0.75rem 0;
align-items: center;
font-size: 0.85rem;
border-bottom: 1px solid var(--oms-border-subtle);
}
.analytics-shoot-row:last-child {
border-bottom: none;
}
.analytics-shoot-row__deliverables {
text-align: center;
}
/* Responsive */
@media (max-width: 768px) {
.analytics-brand-metrics__grid {
grid-template-columns: 1fr 1fr;
}
.analytics-brand-metric-card--wide {
grid-column: span 2;
}
.analytics-production-grid {
grid-template-columns: 1fr;
}
.analytics-production-column--tags {
grid-column: span 1;
}
.analytics-shoot-table__header,
.analytics-shoot-row {
grid-template-columns: 2fr 1fr 1fr 1.5fr;
}
.analytics-shoot-row__deliverables,
.analytics-shoot-table__header span:nth-child(5) {
display: none;
}
}
/* ============================================
PHOTO EDIT DRAWER
============================================ */
.oms-photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 0.75rem;
}
.oms-photo-card {
border-radius: var(--oms-radius-md, 8px);
overflow: hidden;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
background: var(--oms-bg-card, #1a1a1a);
}
.oms-photo-card:hover {
border-color: var(--oms-text-muted, #666);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.oms-photo-card--active {
border-color: var(--oms-accent-primary, #3b82f6);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}
.oms-photo-card__image {
aspect-ratio: 1;
overflow: hidden;
background: #000;
}
.oms-photo-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.oms-photo-card__info {
padding: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.oms-photo-card__name {
font-size: 0.7rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--oms-text-primary, #ececec);
}
.oms-photo-card__meta {
font-size: 0.65rem;
color: var(--oms-text-muted, #888);
}
.oms-photo-card__meta i {
font-size: 0.6rem;
}
/* Compact details list variant */
.oms-details-list--compact .oms-details-row {
padding: 0.35rem 0;
}
.oms-details-list--compact .oms-details-label {
font-size: 0.75rem;
}
.oms-details-list--compact .oms-details-value {
font-size: 0.75rem;
}
/* Stats row */
.oms-stats-row {
display: flex;
gap: 1.5rem;
padding: 0.75rem 0;
}
.oms-stat {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.oms-stat__value {
font-size: 1.5rem;
font-weight: 700;
color: var(--oms-text-primary, #ececec);
line-height: 1;
}
.oms-stat__label {
font-size: 0.7rem;
color: var(--oms-text-muted, #888);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.oms-file-folder {
margin-bottom: 0.5rem;
}
.oms-file-folder__header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.5rem;
background: var(--oms-bg-elevated, #1f1f1f);
border-radius: 4px;
font-size: 0.8rem;
color: var(--oms-text-secondary, #b0b0b0);
cursor: default;
}
.oms-file-folder__header i {
color: #7da3d6;
font-size: 0.9rem;
}
.oms-file-folder__name {
font-weight: 500;
color: var(--oms-text-primary, #ececec);
flex: 1;
}
.oms-file-folder__contents {
padding-left: 1rem;
border-left: 1px solid var(--oms-border-subtle, #2a2a2a);
margin-left: 0.75rem;
margin-top: 0.25rem;
}
.oms-photo-folder-chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 0.75rem;
}
.oms-photo-folder-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.65rem;
background: transparent;
border: 1px solid var(--oms-border-default, #333);
border-radius: 20px;
font-size: 0.75rem;
color: var(--oms-text-muted, #888);
cursor: pointer;
transition: all 0.12s ease;
}
.oms-photo-folder-chip:hover {
border-color: #505050;
color: var(--oms-text-primary, #ececec);
}
.oms-photo-folder-chip--active {
background: rgba(255, 255, 255, 0.08);
border-color: var(--oms-text-primary, #ececec);
color: var(--oms-text-primary, #ececec);
font-weight: 600;
}
.oms-photo-folder-chip i {
font-size: 0.7rem;
color: #7da3d6;
}
/* Lazy loading placeholder */
.oms-lazy {
opacity: 0;
transition: opacity 0.2s ease;
background: var(--oms-bg-elevated, #1a1a1a);
}
.oms-lazy--loaded {
opacity: 1;
}
.oms-photo-card__image {
aspect-ratio: 1;
overflow: hidden;
background: #111;
position: relative;
}
/* Loading skeleton for photo cards */
.oms-photo-card__image img.oms-lazy {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
min-height: 100%;
}
/* Preview loading spinner */
.oms-photo-preview-loading {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 200px;
background: var(--oms-bg-elevated, #111);
}
/* Thumbnail strip overflow indicator */
.oms-drawer__preview-thumb--more {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
color: var(--oms-text-muted, #888);
background: var(--oms-bg-elevated, #1a1a1a);
border-radius: 4px;
min-width: 48px;
cursor: default;
}
/* Small spinner variant */
.oms-spinner--sm {
width: 20px;
height: 20px;
border-width: 2px;
}
/* Small loading state */
.oms-loading-state--sm {
padding: 1rem;
gap: 0.5rem;
font-size: 0.8rem;
}
/* Photo grid sentinel */
.oms-photo-grid-sentinel {
grid-column: 1 / -1;
display: flex;
justify-content: center;
padding: 1rem 0;
}
/* ── Version row — cleaner two-column layout ── */
.oms-version-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
border-bottom: 1px solid var(--oms-border-subtle, #1a1a1a);
}
.oms-version-row:last-child { border-bottom: none; }
.oms-version-row--active {
opacity: 1;
background-color: var(--oms-bg-elevated);
}
.oms-version-row:not(.oms-version-row--active) {
opacity: 0.6;
}
.oms-version-row:not(.oms-version-row--active):hover {
opacity: 0.85;
}
.oms-version-row__left {
display: flex;
align-items: center;
gap: 0.5rem;
}
.oms-version-row__right {
display: flex;
align-items: center;
gap: 0.625rem;
}
.oms-version-row__number {
font-size: 0.8rem;
font-weight: 600;
color: var(--oms-text-primary, #ececec);
font-variant-numeric: tabular-nums;
min-width: 1.75rem;
}
.oms-version-row__date {
font-size: 0.72rem;
color: var(--oms-text-muted, #555);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* The "Active" label — not a badge, just quiet text */
.oms-version-row__active-pill {
font-size: 0.7rem;
color: #4ade80;
font-weight: 500;
min-width: 3.5rem;
text-align: right;
}
/* ── Stat cards (overview) ── */
.oms-stat-card {
padding: 0.875rem 1rem;
background: var(--oms-bg-card, #111);
border: 1px solid var(--oms-border-subtle, #1e1e1e);
border-radius: var(--oms-radius-md, 8px);
}
.oms-stat-card__value {
font-size: 1.625rem;
font-weight: 700;
color: var(--oms-text-primary, #ececec);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.oms-stat-card__label {
font-size: 0.72rem;
color: var(--oms-text-muted, #555);
margin-top: 0.3rem;
}
.oms-text-xs {
font-size: 0.7rem;
}
.oms-badge--xs {
font-size: 0.6rem;
padding: 0.1rem 0.35rem;
line-height: 1.2;
}
.oms-btn--xs {
font-size: 0.7rem;
padding: 0.15rem 0.5rem;
min-height: unset;
}
.oms-form-section__title {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Spin animation for loading states */
.oms-spin {
animation: oms-spin 1s linear infinite;
}
@keyframes oms-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ============================================
LINEAGE EDGE STYLES
============================================ */
.oms-lineage-list {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.oms-lineage-edge {
border: 1px solid var(--oms-border-subtle, #2a2a2a);
border-radius: var(--oms-radius-md, 8px);
overflow: hidden;
background: var(--oms-bg-card, #1a1a1a);
}
.oms-lineage-edge__row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.625rem 0.75rem;
transition: background 0.15s ease;
}
.oms-lineage-edge__row:hover {
background: rgba(255, 255, 255, 0.03);
}
.oms-lineage-edge__thumb {
width: 36px;
height: 36px;
border-radius: var(--oms-radius-sm, 6px);
object-fit: cover;
flex-shrink: 0;
background: var(--oms-bg-surface, #1e1e1e);
}
.oms-lineage-edge__thumb--empty {
display: flex;
align-items: center;
justify-content: center;
color: var(--oms-text-muted, #888);
font-size: 0.875rem;
border: 1px solid var(--oms-border-subtle, #2a2a2a);
}
.oms-lineage-edge__info {
flex: 1;
min-width: 0;
}
.oms-lineage-edge__name {
font-size: 0.8125rem;
font-weight: 500;
color: var(--oms-text-primary, #e8e6e3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.oms-lineage-edge__sub {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.125rem;
font-size: 0.6875rem;
}
.oms-lineage-edge__toggle {
flex-shrink: 0;
color: var(--oms-text-muted, #888);
transition: transform 0.15s ease;
}
.oms-lineage-meta {
padding: 0.5rem 0.75rem 0.75rem;
border-top: 1px solid var(--oms-border-subtle, #2a2a2a);
background: rgba(0, 0, 0, 0.15);
}
/* ============================================
STALENESS ALERT STYLES
============================================ */
.oms-staleness-indicator {
cursor: pointer;
animation: oms-staleness-pulse 2s ease-in-out infinite;
}
@keyframes oms-staleness-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.oms-staleness-banner {
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.3);
border-radius: var(--oms-radius-md, 8px);
padding: 0.75rem;
margin-bottom: 1rem;
}
.oms-staleness-banner__header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
color: var(--oms-accent-warning-light, #fbbf24);
font-size: 0.8125rem;
}
.oms-staleness-banner__header i {
font-size: 1rem;
flex-shrink: 0;
}
.oms-staleness-banner__title {
display: flex;
align-items: center;
gap: 0.375rem;
}
.oms-staleness-banner__alerts {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.oms-staleness-alert__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.5rem 0.625rem;
background: rgba(0, 0, 0, 0.15);
border-radius: var(--oms-radius-sm, 6px);
}
.oms-staleness-alert__asset {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
flex: 1;
}
.oms-staleness-alert__thumb {
width: 28px;
height: 28px;
border-radius: 4px;
object-fit: cover;
flex-shrink: 0;
background: var(--oms-bg-surface, #1e1e1e);
}
.oms-staleness-alert__thumb--empty {
display: flex;
align-items: center;
justify-content: center;
color: var(--oms-text-muted, #888);
font-size: 0.75rem;
border: 1px solid var(--oms-border-subtle, #2a2a2a);
}
.oms-staleness-alert__info {
min-width: 0;
}
.oms-staleness-alert__name {
font-size: 0.75rem;
font-weight: 500;
color: var(--oms-text-primary, #e8e6e3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.oms-staleness-alert__time {
font-size: 0.6875rem;
color: var(--oms-text-muted, #888);
}
.oms-staleness-alert__actions {
display: flex;
align-items: center;
gap: 0.375rem;
flex-shrink: 0;
}
/* Stale edge row highlighting */
.oms-lineage-edge--stale {
border-color: rgba(245, 158, 11, 0.4);
background: rgba(245, 158, 11, 0.04);
}
.oms-lineage-edge--stale .oms-lineage-edge__row:hover {
background: rgba(245, 158, 11, 0.06);
}
/* ============================================
PROJECT SNAPSHOTS STYLES
============================================ */
/* ── Dropdown styling ── */
.oms-dropdown--snapshots .oms-dropdown__menu--snapshots {
max-height: 400px;
overflow-y: auto;
}
.oms-dropdown__header {
padding: 0.625rem 0.75rem;
border-bottom: 1px solid var(--oms-border-subtle, #2a2a2a);
}
.oms-dropdown__header-title {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--oms-text-muted, #888);
}
.oms-dropdown__loading {
display: flex;
justify-content: center;
padding: 1.5rem;
}
.oms-dropdown__empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.375rem;
padding: 1.25rem 0.75rem;
text-align: center;
}
/* ── Snapshot item in dropdown ── */
.oms-snapshot-item {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
text-align: left;
padding: 0.5rem 0.75rem !important;
}
.oms-snapshot-item__info {
flex: 1;
min-width: 0;
}
.oms-snapshot-item__label {
font-size: 0.8125rem;
font-weight: 500;
color: var(--oms-text-primary, #e8e6e3);
display: flex;
align-items: center;
gap: 0.375rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.oms-snapshot-item__meta {
font-size: 0.6875rem;
color: var(--oms-text-muted, #888);
display: flex;
align-items: center;
gap: 0.25rem;
margin-top: 0.125rem;
}
/* ── Diff view modal ── */
.oms-modal--lg {
max-width: 720px;
width: 90vw;
}
.oms-snapshot-diff__summary {
margin-bottom: 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--oms-border-subtle, #2a2a2a);
}
.oms-snapshot-diff__no-changes {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem;
margin-top: 0.75rem;
background: rgba(34, 197, 94, 0.06);
border: 1px solid rgba(34, 197, 94, 0.15);
border-radius: var(--oms-radius-sm, 6px);
font-size: 0.8125rem;
color: #22c55e;
}
.oms-snapshot-diff__body {
max-height: 50vh;
overflow-y: auto;
}
/* ── Diff sections ── */
.oms-snapshot-diff__section {
margin-bottom: 1rem;
}
.oms-snapshot-diff__section-title {
font-size: 0.75rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.375rem;
margin-bottom: 0.5rem;
padding-bottom: 0.375rem;
border-bottom: 1px solid var(--oms-border-subtle, #2a2a2a);
}
.oms-snapshot-diff__section-title--added { color: #22c55e; }
.oms-snapshot-diff__section-title--changed { color: #f59e0b; }
.oms-snapshot-diff__section-title--status { color: #3b82f6; }
.oms-snapshot-diff__section-title--removed { color: #ef4444; }
.oms-snapshot-diff__section-title--unchanged { color: var(--oms-text-muted, #888); }
/* ── Diff rows ── */
.oms-snapshot-diff__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.5rem 0.625rem;
border-radius: var(--oms-radius-sm, 6px);
margin-bottom: 0.25rem;
transition: background 0.15s ease;
}
.oms-snapshot-diff__row:hover {
background: rgba(255, 255, 255, 0.03);
}
.oms-snapshot-diff__row--added {
background: rgba(34, 197, 94, 0.04);
border-left: 3px solid #22c55e;
}
.oms-snapshot-diff__row--changed {
background: rgba(245, 158, 11, 0.04);
border-left: 3px solid #f59e0b;
}
.oms-snapshot-diff__row--status {
background: rgba(59, 130, 246, 0.04);
border-left: 3px solid #3b82f6;
}
.oms-snapshot-diff__row--removed {
background: rgba(239, 68, 68, 0.04);
border-left: 3px solid #ef4444;
}
.oms-snapshot-diff__row--unchanged {
padding: 0.375rem 0.625rem;
opacity: 0.7;
}
.oms-snapshot-diff__deliverable {
display: flex;
align-items: center;
gap: 0.375rem;
min-width: 0;
flex-shrink: 1;
}
.oms-snapshot-diff__code {
font-size: 0.8125rem;
font-weight: 500;
color: var(--oms-text-primary, #e8e6e3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.oms-snapshot-diff__delta {
display: flex;
align-items: center;
gap: 0.375rem;
flex-shrink: 0;
}
.oms-snapshot-diff__status {
display: flex;
align-items: center;
gap: 0.25rem;
flex-shrink: 0;
}
.oms-snapshot-diff__unchanged-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.25rem;
}
/* ============================================
USAGE TAB — REDESIGN
============================================ */
/* Accordion */
.oms-accordion-item {
border: 1px solid var(--oms-border-subtle, #1e1e1e);
border-radius: var(--oms-radius-md, 8px);
margin-bottom: 0.5rem;
overflow: hidden;
}
.oms-accordion-header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
background: var(--oms-bg-card, #1a1a1a);
border: none;
cursor: pointer;
transition: background 0.1s;
}
.oms-accordion-header:hover {
background: var(--oms-bg-hover, #222);
}
.oms-accordion-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--oms-text-primary, #ececec);
}
.oms-accordion-chevron {
font-size: 0.75rem;
color: var(--oms-text-muted, #666);
transition: transform 0.2s;
}
.oms-accordion-item--open .oms-accordion-chevron {
transform: rotate(180deg);
}
.oms-accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.oms-accordion-item--open .oms-accordion-body {
max-height: 2000px;
padding: 1rem;
background: var(--oms-bg-base, #0f0f0f);
}
/* Shoot groups */
.oms-shoot-group {
margin-bottom: 1.5rem;
}
.oms-shoot-group__header {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--oms-text-secondary, #b0b0b0);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--oms-border-subtle, #1e1e1e);
}
.oms-shoot-group__header i {
color: var(--oms-text-muted, #666);
}
/* Asset usage grid */
.oms-asset-usage-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0.75rem;
}
.oms-asset-usage-card {
display: flex;
gap: 0.5rem;
padding: 0.5rem;
background: var(--oms-bg-card, #1a1a1a);
border: 1px solid var(--oms-border-subtle, #222);
border-radius: var(--oms-radius-md, 8px);
transition: border-color 0.1s;
}
.oms-asset-usage-card:hover {
border-color: var(--oms-border-hover, #333);
}
.oms-asset-usage-card__thumb {
width: 60px;
height: 40px;
flex-shrink: 0;
border-radius: 4px;
overflow: hidden;
}
.oms-asset-usage-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.oms-asset-usage-card__thumb--empty {
width: 100%;
height: 100%;
background: var(--oms-bg-elevated, #141414);
display: flex;
align-items: center;
justify-content: center;
color: var(--oms-text-muted, #666);
font-size: 0.9rem;
}
.oms-asset-usage-card__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.oms-asset-usage-card__name {
font-size: 0.75rem;
font-weight: 500;
color: var(--oms-text-primary, #ececec);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.oms-asset-usage-card__meta {
font-size: 0.7rem;
color: var(--oms-text-muted, #666);
display: flex;
align-items: center;
gap: 0.375rem;
flex-wrap: wrap;
}
/* Section titles */
.oms-section-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--oms-text-secondary, #b0b0b0);
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0;
}
.oms-section-title i {
color: var(--oms-text-muted, #666);
}
/* ============================================
USAGE TAB — TIMELINE STRIP
============================================ */
.oms-usage-strip {
position: relative;
height: 36px;
background: var(--oms-bg-card, #1a1a1a);
border: 1px solid var(--oms-border-subtle, #1e1e1e);
border-radius: var(--oms-radius-sm, 4px);
overflow: hidden;
margin-bottom: 0.75rem;
}
.oms-usage-strip__block {
position: absolute;
top: 0;
bottom: 0;
border-left: 2px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
transition: opacity 0.1s;
cursor: pointer;
}
.oms-usage-strip__block:hover {
opacity: 0.85;
z-index: 2;
}
/* Shoot Usage Progress Bar */
.shoot-usage-progress {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
color: var(--oms-text-secondary, #b0b0b0);
}
.shoot-usage-stats {
font-weight: 500;
color: var(--oms-text-primary, #ececec);
min-width: 60px;
}
.shoot-usage-bar {
flex: 1;
height: 6px;
background: var(--oms-bg-elevated, #1a1a1a);
border-radius: 3px;
overflow: hidden;
min-width: 80px;
max-width: 120px;
}
.shoot-usage-bar__fill {
height: 100%;
background: linear-gradient(90deg, #4ade80, #22c55e);
border-radius: 3px;
transition: width 0.3s ease;
}
.shoot-usage-bar__fill--warning {
background: linear-gradient(90deg, #fbbf24, #f59e0b);
}
.shoot-usage-bar__fill--danger {
background: linear-gradient(90deg, #ef4444, #dc2626);
}
/* ============================================================
FILES TAB (ftr = files-tab-row)
Aligned to drawer design tokens
============================================================ */
.ftr-container {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* ── Group ── */
.ftr-group {
border: 1px solid var(--oms-border-subtle, #333);
border-radius: var(--oms-radius-md, 6px);
overflow: hidden;
}
.ftr-group__header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.875rem;
background: var(--oms-bg-surface, #222);
border-bottom: 1px solid var(--oms-border-subtle, #333);
min-height: 36px;
}
.ftr-group__header > i {
font-size: 0.75rem;
color: var(--oms-text-muted, #666);
flex-shrink: 0;
}
.ftr-group__title {
font-size: var(--oms-text-xs, 11px);
font-weight: var(--oms-weight-semibold, 600);
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--oms-text-muted, #666);
flex: 1;
}
.ftr-group__count {
font-size: var(--oms-text-xs, 11px);
color: var(--oms-text-muted, #666);
font-variant-numeric: tabular-nums;
}
.ftr-group__toggle {
background: transparent;
border: 1px solid var(--oms-border-subtle, #333);
color: var(--oms-text-muted, #666);
border-radius: var(--oms-radius-sm, 3px);
padding: 0.15rem 0.5rem;
font-size: var(--oms-text-xs, 11px);
cursor: pointer;
display: flex;
align-items: center;
gap: 0.3rem;
transition: color var(--oms-transition-fast), border-color var(--oms-transition-fast);
margin-left: 0.25rem;
}
.ftr-group__toggle:hover {
border-color: var(--oms-border-default, #444);
color: var(--oms-text-secondary, #b0b0b0);
}
.ftr-group__toggle.is-visible {
color: var(--oms-text-primary, #ececec);
border-color: var(--oms-border-default, #444);
}
.ftr-group__body--hidden { display: none; }
.ftr-group__body--hidden.is-visible { display: block; }
/* ── Version banner ── */
.ftr-version-banner {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.875rem;
background: rgba(139, 92, 246, 0.05);
border-bottom: 1px solid rgba(139, 92, 246, 0.1);
font-size: var(--oms-text-xs, 11px);
color: var(--oms-accent-purple-light, #a78bfa);
}
/* ── Version connector V1→V2 ── */
.ftr-version-connector {
display: flex;
padding: 0 0.875rem;
height: 10px;
pointer-events: none;
}
.ftr-version-connector__line {
width: 1px;
background: rgba(139, 92, 246, 0.2);
margin-left: 11px; /* aligns under icon center */
}
/* ── File row ── */
.ftr-row {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.5rem 0.875rem;
border-bottom: 1px solid var(--oms-border-subtle, #2a2a2a);
min-height: 44px;
transition: background var(--oms-transition-fast);
}
.ftr-row:last-child { border-bottom: none; }
.ftr-row:hover { background: var(--oms-bg-hover, rgba(255,255,255,0.03)); }
.ftr-row--main { background: rgba(16, 185, 129, 0.04); }
.ftr-row--main:hover { background: rgba(16, 185, 129, 0.06); }
.ftr-row--muted { opacity: 0.5; }
.ftr-row--muted:hover { opacity: 0.7; }
/* ── File icon — only used for video/photo to add colour, hidden for others ── */
.ftr-icon {
width: 28px;
height: 28px;
border-radius: var(--oms-radius-sm, 3px);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 0.8rem;
}
/* Only video and photo get coloured icons — others are suppressed */
.file-icon--video { background: rgba(59,130,246,0.1); color: #60a5fa; }
.file-icon--photo { background: rgba(16,185,129,0.1); color: #34d399; }
.file-icon--audio { background: transparent; color: var(--oms-text-muted, #666); }
.file-icon--project { background: transparent; color: var(--oms-text-muted, #666); }
.file-icon--data { background: transparent; color: var(--oms-text-muted, #666); }
.file-icon--proxy { background: transparent; color: var(--oms-text-muted, #555); }
/* ── File info ── */
.ftr-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.ftr-name {
font-size: var(--oms-text-sm, 12px);
font-weight: var(--oms-weight-medium, 500);
color: var(--oms-text-primary, #ececec);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
gap: 0.75rem;
}
.ftr-meta {
display: flex;
align-items: center;
gap: 0;
flex-wrap: wrap;
}
/* ── Chips — plain text, no boxes ── */
.ftr-chip {
font-size: var(--oms-text-xs, 11px);
color: var(--oms-text-muted, #666);
font-variant-numeric: tabular-nums;
}
.ftr-chip + .ftr-chip::before {
content: '·';
margin: 0 0.3rem;
color: var(--oms-border-subtle, #333);
}
.ftr-chip--accent { color: var(--oms-text-secondary, #b0b0b0); }
/* ── Badges — inline, minimal ── */
.ftr-badge {
flex-shrink: 0;
font-size: 10px;
font-weight: var(--oms-weight-semibold, 600);
text-transform: uppercase;
letter-spacing: 0.4px;
border-radius: var(--oms-radius-sm, 3px);
padding: 0.1rem 0.3rem;
}
.ftr-badge--main {
color: var(--oms-accent-success, #10b981);
border: 1px solid rgba(16, 185, 129, 0.25);
}
.ftr-badge--version {
color: var(--oms-accent-purple-light, #a78bfa);
border: 1px solid rgba(139, 92, 246, 0.25);
font-family: var(--oms-font-mono);
}
/* ── Row action (reveal) — only visible on hover ── */
.ftr-actions {
opacity: 0;
display: flex;
align-items: center;
flex-shrink: 0;
transition: opacity var(--oms-transition-fast);
}
.ftr-row:hover .ftr-actions { opacity: 1; }
.ftr-action-btn {
background: transparent;
border: none;
color: var(--oms-text-muted, #666);
width: 22px;
height: 22px;
border-radius: var(--oms-radius-sm, 3px);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0.75rem;
transition: color var(--oms-transition-fast), background var(--oms-transition-fast);
}
.ftr-action-btn:hover {
background: var(--oms-bg-hover, rgba(255,255,255,0.06));
color: var(--oms-text-primary, #ececec);
}
/* ============================================
OMS WIZARD — Multi-step form
Minimal, modern, token-aligned
============================================ */
/* ── Container ── */
.wizard-container {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
/* ── Step Indicator ── */
.wizard-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--oms-border-subtle, #1e1e1e);
flex-shrink: 0;
}
.wizard-step {
display: flex;
align-items: center;
gap: 0.5rem;
}
.wizard-step__indicator {
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 600;
border: 1.5px solid var(--oms-border-default, #333);
color: var(--oms-text-muted, #666);
background: transparent;
transition: all 0.2s ease;
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.wizard-step--active .wizard-step__indicator {
border-color: var(--oms-text-primary, #ececec);
background: var(--oms-text-primary, #ececec);
color: var(--oms-bg-base, #0f0f0f);
}
.wizard-step--completed .wizard-step__indicator {
border-color: var(--oms-accent-success, #22c55e);
background: var(--oms-accent-success, #22c55e);
color: #fff;
}
.wizard-step__label {
font-size: 0.8rem;
font-weight: 500;
color: var(--oms-text-muted, #666);
letter-spacing: -0.01em;
}
.wizard-step--active .wizard-step__label {
color: var(--oms-text-primary, #ececec);
}
.wizard-step--completed .wizard-step__label {
color: var(--oms-text-secondary, #b0b0b0);
}
.wizard-step__connector {
width: 48px;
height: 1px;
background: var(--oms-border-default, #333);
margin: 0 0.75rem;
}
.wizard-step--completed + .wizard-step__connector,
.wizard-step--completed ~ .wizard-step__connector {
background: var(--oms-accent-success, #22c55e);
}
/* ── Wizard Body ── */
.wizard-body {
flex: 1;
overflow-y: auto;
padding: 2rem 1.75rem;
}
/* ── Wizard Footer ── */
.wizard-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.875rem 1.75rem;
border-top: 1px solid var(--oms-border-subtle, #1e1e1e);
background: var(--oms-bg-surface, #1a1a1a);
flex-shrink: 0;
}
.wizard-footer__right {
display: flex;
gap: 0.5rem;
align-items: center;
}
/* ── Section ── */
.wizard-section {
margin-bottom: 0;
}
.wizard-section__title {
font-size: 1rem;
font-weight: 600;
color: var(--oms-text-primary, #ececec);
margin: 0 0 0.375rem 0;
letter-spacing: -0.02em;
}
.wizard-section__desc {
font-size: 0.8rem;
color: var(--oms-text-muted, #888);
margin: 0 0 1.5rem 0;
line-height: 1.4;
}
/* ═══════════════════════════════════════
PLATFORM CARDS (Step 1)
═══════════════════════════════════════ */
.wizard-platform-grid {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.wizard-platform-card {
display: flex;
align-items: center;
gap: 0.875rem;
padding: 0.875rem 1rem;
background: transparent;
border: 1.5px solid var(--oms-border-default, #2a2a2a);
border-radius: 8px;
cursor: pointer;
transition: all 0.12s ease;
text-align: left;
position: relative;
width: 100%;
color: inherit;
font: inherit;
}
.wizard-platform-card:hover:not(:disabled) {
border-color: var(--oms-text-muted, #555);
}
.wizard-platform-card--selected {
border-color: var(--oms-text-primary, #ececec) !important;
background: rgba(255, 255, 255, 0.03) !important;
}
.wizard-platform-card--disabled {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
.wizard-platform-card__icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
background: var(--oms-bg-elevated, #1a1a1a);
color: var(--oms-text-secondary, #b0b0b0);
flex-shrink: 0;
}
.wizard-platform-card--selected .wizard-platform-card__icon {
color: var(--oms-text-primary, #ececec);
}
.wizard-platform-card__info {
flex: 1;
display: flex;
align-items: center;
gap: 0.5rem;
}
.wizard-platform-card__name {
font-size: 0.9rem;
font-weight: 500;
color: var(--oms-text-primary, #ececec);
}
.wizard-platform-card__badge {
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--oms-text-muted, #666);
background: var(--oms-bg-elevated, #1a1a1a);
padding: 0.15rem 0.45rem;
border-radius: 3px;
font-weight: 600;
}
.wizard-platform-card__check {
color: var(--oms-text-primary, #ececec);
font-size: 1rem;
flex-shrink: 0;
}
/* ═══════════════════════════════════════
TYPE CARDS (Step 2)
═══════════════════════════════════════ */
.wizard-type-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.wizard-type-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.625rem;
padding: 1.25rem 0.875rem;
background: transparent;
border: 1.5px solid var(--oms-border-default, #2a2a2a);
border-radius: 8px;
cursor: pointer;
transition: all 0.12s ease;
text-align: center;
position: relative;
width: 100%;
color: inherit;
font: inherit;
}
.wizard-type-card:hover:not(:disabled) {
border-color: var(--oms-text-muted, #555);
}
.wizard-type-card--selected {
border-color: var(--oms-text-primary, #ececec) !important;
background: rgba(255, 255, 255, 0.03) !important;
}
.wizard-type-card--disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.wizard-type-card__icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
background: var(--oms-bg-elevated, #1a1a1a);
color: var(--oms-text-muted, #666);
}
.wizard-type-card--selected .wizard-type-card__icon {
color: var(--oms-text-primary, #ececec);
background: rgba(255, 255, 255, 0.06);
}
.wizard-type-card__info {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.wizard-type-card__name {
font-size: 0.875rem;
font-weight: 600;
color: var(--oms-text-primary, #ececec);
}
.wizard-type-card__desc {
font-size: 0.7rem;
color: var(--oms-text-muted, #666);
line-height: 1.35;
}
.wizard-type-card__badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
font-size: 0.55rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--oms-text-muted, #666);
background: var(--oms-bg-elevated, #1a1a1a);
padding: 0.1rem 0.35rem;
border-radius: 3px;
font-weight: 600;
}
.wizard-type-card__check {
position: absolute;
top: 0.5rem;
right: 0.5rem;
color: var(--oms-text-primary, #ececec);
font-size: 0.9rem;
}
/* ═══════════════════════════════════════
CREATE POST (Step 3)
═══════════════════════════════════════ */
.wizard-section--create {
display: flex;
flex-direction: column;
gap: 0;
}
/* Context bar */
.wizard-context-bar {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.625rem;
background: var(--oms-bg-elevated, #1a1a1a);
border-radius: 5px;
margin-bottom: 1.5rem;
font-size: 0.75rem;
width: fit-content;
}
.wizard-context-bar__platform {
display: flex;
align-items: center;
gap: 0.3rem;
font-weight: 600;
color: var(--oms-text-secondary, #b0b0b0);
}
.wizard-context-bar__platform i {
font-size: 0.85rem;
}
.wizard-context-bar__divider {
color: var(--oms-border-default, #333);
}
.wizard-context-bar__type {
color: var(--oms-text-muted, #888);
text-transform: capitalize;
}
/* ── Form Sections ── */
.wizard-form-section {
margin-bottom: 1.75rem;
}
.wizard-form-section__title {
font-size: 0.75rem;
font-weight: 600;
color: var(--oms-text-muted, #888);
margin: 0 0 0.625rem 0;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Remove icon styling from section titles — no icons */
.wizard-form-section__title i {
display: none;
}
/* ── Two-column layout for step 3 ── */
.wizard-create-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.75rem;
}
.wizard-create-layout__main {
display: flex;
flex-direction: column;
gap: 0;
}
.wizard-create-layout__side {
display: flex;
flex-direction: column;
gap: 0;
}
@media (max-width: 700px) {
.wizard-create-layout {
grid-template-columns: 1fr;
}
}
/* ── Media Selector ── */
.wizard-media-selector__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem 1.5rem;
border: 1.5px dashed var(--oms-border-default, #2a2a2a);
border-radius: 8px;
cursor: pointer;
transition: all 0.12s ease;
text-align: center;
}
.wizard-media-selector__empty:hover {
border-color: var(--oms-text-muted, #555);
background: rgba(255, 255, 255, 0.015);
}
.wizard-media-selector__icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: var(--oms-bg-elevated, #1a1a1a);
color: var(--oms-text-muted, #666);
font-size: 1.25rem;
margin-bottom: 0.75rem;
}
.wizard-media-selector__empty h4 {
margin: 0 0 0.2rem 0;
font-size: 0.85rem;
font-weight: 600;
color: var(--oms-text-primary, #ececec);
}
.wizard-media-selector__empty p {
margin: 0;
font-size: 0.75rem;
color: var(--oms-text-muted, #666);
}
/* ── Media Preview ── */
.wizard-media-preview {
position: relative;
border-radius: 8px;
overflow: hidden;
background: #000;
border: 1px solid var(--oms-border-subtle, #1e1e1e);
}
.wizard-media-preview__media {
width: 100%;
max-height: 260px;
object-fit: contain;
display: block;
}
.wizard-media-preview__change {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(8px);
color: rgba(255, 255, 255, 0.85);
border: none;
padding: 0.3rem 0.6rem;
border-radius: 5px;
font-size: 0.7rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.3rem;
transition: background 0.12s;
font-weight: 500;
}
.wizard-media-preview__change:hover {
background: rgba(0, 0, 0, 0.8);
color: #fff;
}
/* ── Caption ── */
.wizard-caption-textarea {
font-family: var(--oms-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
font-size: 0.875rem;
line-height: 1.5;
white-space: pre-wrap;
resize: vertical;
}
.wizard-caption-stats {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.375rem;
}
.wizard-caption-stats__left {
display: flex;
gap: 0.125rem;
}
.wizard-caption-stats__right {
display: flex;
align-items: center;
}
.wizard-caption-count {
font-size: 0.7rem;
color: var(--oms-text-muted, #555);
font-variant-numeric: tabular-nums;
}
/* ── Cover Preview ── */
.wizard-cover-preview {
border: 1px solid var(--oms-border-subtle, #1e1e1e);
border-radius: 6px;
overflow: hidden;
margin-bottom: 0.5rem;
}
.wizard-cover-preview__images {
display: flex;
gap: 1px;
background: var(--oms-border-subtle, #1e1e1e);
}
.wizard-cover-preview__item {
flex: 1;
position: relative;
aspect-ratio: 9/16;
overflow: hidden;
background: #000;
}
.wizard-cover-preview__item--square {
aspect-ratio: 1;
max-width: 40%;
}
.wizard-cover-preview__item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.wizard-cover-preview__label {
position: absolute;
bottom: 0.3rem;
left: 0.3rem;
background: rgba(0, 0, 0, 0.65);
color: rgba(255, 255, 255, 0.8);
font-size: 0.6rem;
padding: 0.1rem 0.3rem;
border-radius: 3px;
font-weight: 500;
}
.wizard-cover-actions {
display: flex;
gap: 0.375rem;
}
/* ── Toggle ── */
.wizard-toggle {
display: flex;
flex-direction: column;
gap: 0.2rem;
cursor: pointer;
padding: 0.625rem 0.75rem;
border: 1px solid var(--oms-border-subtle, #1e1e1e);
border-radius: 6px;
transition: border-color 0.12s;
}
.wizard-toggle:hover {
border-color: var(--oms-border-default, #333);
}
.wizard-toggle input[type="checkbox"] {
margin-right: 0.5rem;
accent-color: var(--oms-text-primary, #ececec);
}
.wizard-toggle__label {
font-size: 0.8rem;
font-weight: 500;
color: var(--oms-text-primary, #ececec);
}
.wizard-toggle__desc {
font-size: 0.7rem;
color: var(--oms-text-muted, #666);
padding-left: 1.6rem;
line-height: 1.35;
}
/* ── Schedule ── */
.wizard-schedule-inputs {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.wizard-schedule-presets {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
}
.wizard-schedule-section {
animation: wizardFadeIn 0.2s ease-out;
}
@keyframes wizardFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Form help text ── */
.wizard-form-help {
font-size: 0.7rem;
color: var(--oms-text-muted, #555);
margin-top: 0.3rem;
line-height: 1.35;
}
/* ═══════════════════════════════════════
PICKER (Deliverable Selector)
═══════════════════════════════════════ */
.wizard-picker {
border: 1px solid var(--oms-border-default, #2a2a2a);
border-radius: 8px;
overflow: hidden;
}
.wizard-picker__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.625rem 0.875rem;
border-bottom: 1px solid var(--oms-border-subtle, #1e1e1e);
background: var(--oms-bg-surface, #1a1a1a);
}
.wizard-picker__header h4 {
margin: 0;
font-size: 0.8rem;
font-weight: 600;
color: var(--oms-text-primary, #ececec);
}
.wizard-picker__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 0.5rem;
padding: 0.75rem;
max-height: 360px;
overflow-y: auto;
}
.wizard-picker__item {
cursor: pointer;
border-radius: 6px;
overflow: hidden;
border: 1.5px solid transparent;
transition: all 0.12s ease;
background: var(--oms-bg-card, #1a1a1a);
}
.wizard-picker__item:hover {
border-color: var(--oms-text-muted, #555);
}
.wizard-picker__thumb {
aspect-ratio: 1;
overflow: hidden;
position: relative;
background: var(--oms-bg-base, #0f0f0f);
}
.wizard-picker__thumb img,
.wizard-picker__thumb video {
width: 100%;
height: 100%;
object-fit: cover;
}
.wizard-picker__placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--oms-text-muted, #444);
font-size: 1.25rem;
}
.wizard-picker__video-badge {
position: absolute;
bottom: 0.3rem;
right: 0.3rem;
background: rgba(0, 0, 0, 0.65);
color: #fff;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.55rem;
}
.wizard-picker__info {
padding: 0.375rem 0.5rem;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.wizard-picker__code {
font-size: 0.7rem;
font-weight: 600;
color: var(--oms-text-primary, #ececec);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wizard-picker__loading,
.wizard-picker__empty,
.wizard-picker__error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2.5rem;
text-align: center;
color: var(--oms-text-muted, #666);
gap: 0.5rem;
}
.wizard-picker__empty i,
.wizard-picker__error i {
font-size: 1.5rem;
opacity: 0.4;
}
/* ═══════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 480px) {
.wizard-type-grid {
grid-template-columns: 1fr;
}
.wizard-footer__right {
flex-wrap: wrap;
}
.wizard-schedule-inputs {
grid-template-columns: 1fr;
}
.wizard-body {
padding: 1.25rem 1rem;
}
}
.oms-cell-thumbnail img {
width:100%;
height: 100%;
object-fit: cover;
}
/* ── Deliverable group header rows ── */
.oms-table__group-header td {
padding: 0;
background: transparent;
border-bottom: none;
}
.oms-table__group-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
background: none;
border: none;
border-top: 1px solid var(--oms-border-default, #2a2a2a);
padding: 0.5rem 0.75rem;
cursor: pointer;
color: var(--oms-text-muted, #888);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: left;
transition: background 0.15s;
margin-top: 0.5rem;
}
.oms-table__group-toggle:hover {
background: var(--oms-bg-hover, rgba(255,255,255,0.03));
color: var(--oms-text-primary, #ececec);
}
.oms-table__group-name {
flex: 1;
}
.oms-table__group-count {
background: var(--oms-bg-card, #222);
color: var(--oms-text-muted, #888);
border-radius: 10px;
padding: 0 6px;
font-size: 0.7rem;
font-weight: 600;
}
/* Indent grouped rows slightly */
.oms-table__row--grouped .oms-table__cell--primary {
padding-left: 1.5rem;
}
/* ── Context menu ── */
.oms-context-menu {
background: var(--oms-bg-overlay, #1a1a1a);
border: 1px solid var(--oms-border-default, #333);
border-radius: var(--oms-radius-md, 8px);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
padding: 0.25rem 0;
animation: oms-fade-in 0.1s ease;
}
@keyframes oms-fade-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.oms-context-menu__item {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
background: none;
border: none;
padding: 0.5rem 0.875rem;
font-size: 0.85rem;
color: var(--oms-text-primary, #ececec);
cursor: pointer;
text-align: left;
transition: background 0.1s;
}
.oms-context-menu__item:hover {
background: var(--oms-bg-hover, rgba(255,255,255,0.05));
}
.oms-context-menu__item--danger { color: var(--oms-status-error, #e74c3c); }
.oms-context-menu__item--danger:hover { background: rgba(231,76,60,0.08); }
.oms-context-menu__item i {
font-size: 0.8rem;
width: 14px;
opacity: 0.7;
}
.oms-context-menu__divider {
height: 1px;
background: var(--oms-border-default, #333);
margin: 0.25rem 0;
}