mirror of
https://github.com/sassanix/Warracker.git
synced 2026-01-01 03:00:43 -06:00
14cbf75bed
* Added Model Number field to warranties (backend + frontend integration) * Expanded localization: added Polish and Hebrew (with RTL), completed warranty claim translations for all locales * Enhanced search: Model Number now searchable on Home and Status pages * Improved Status page with Archived warranties filtering and display * Fixed Global view logic for archived warranties and Model Number visibility * Corrected missing Model Number translations across all languages * Improved Add Warranty modal responsiveness on small screens * Fixed document URL visibility bug and Chrome horizontal scrollbar issue * Updated major dependencies (Python 3.14, gevent 25.9.1, Flask 3.1.2, etc.) * Added Reddit community link and localization on About page * PWA and cache updates for faster rollout and consistent asset refresh
5919 lines
127 KiB
CSS
5919 lines
127 KiB
CSS
/* Center the Edit Warranty button in the status page details row */
|
||
.warranty-details-actions {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 15px;
|
||
}
|
||
/* Make the Edit Warranty button on the status page details row minimal: blue outline, no fill, only around text */
|
||
.edit-warranty-status-btn {
|
||
background: transparent !important;
|
||
color: var(--primary-color) !important;
|
||
border: 2px solid var(--primary-color) !important;
|
||
border-radius: 6px !important;
|
||
font-size: 1rem !important;
|
||
font-weight: 500;
|
||
padding: 4px 18px !important;
|
||
min-width: unset !important;
|
||
width: auto !important;
|
||
height: auto !important;
|
||
box-shadow: none !important;
|
||
transition: background 0.2s, color 0.2s, border-color 0.2s;
|
||
display: inline-block;
|
||
}
|
||
.edit-warranty-status-btn:hover, .edit-warranty-status-btn:focus {
|
||
background: var(--primary-color) !important;
|
||
color: #fff !important;
|
||
border-color: var(--primary-dark) !important;
|
||
}
|
||
/* ===== GLOBAL STYLES ===== */
|
||
:root {
|
||
/* Icon spacing for LTR/RTL: applies to icons next to text */
|
||
}
|
||
|
||
/* Consistent icon spacing and alignment for all languages */
|
||
[class*="fa-"],
|
||
.fa, .fas, .far, .fal, .fab, .icon-next {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
direction: ltr;
|
||
vertical-align: middle;
|
||
isolation: isolate;
|
||
position: relative;
|
||
}
|
||
|
||
/* Universal spacing for icons next to text */
|
||
[class*="fa-"]:not(:only-child),
|
||
.fa:not(:only-child),
|
||
.fas:not(:only-child),
|
||
.far:not(:only-child),
|
||
.fal:not(:only-child),
|
||
.fab:not(:only-child),
|
||
.icon-next:not(:only-child) {
|
||
margin-inline: 0.5em;
|
||
}
|
||
|
||
/* Remove margin when icon is alone */
|
||
[class*="fa-"]:only-child,
|
||
.fa:only-child,
|
||
.fas:only-child,
|
||
.far:only-child,
|
||
.fal:only-child,
|
||
.fab:only-child,
|
||
.icon-next:only-child {
|
||
margin-inline: 0;
|
||
}
|
||
:root[data-theme="light"] {
|
||
--bg-color: #f5f5f5;
|
||
--card-bg: #ffffff;
|
||
--text-color: #333333;
|
||
--border-color: #e0e0e0;
|
||
--modal-backdrop: rgba(0, 0, 0, 0.5);
|
||
--loading-backdrop: rgba(255, 255, 255, 0.8);
|
||
--shadow-color: rgba(0, 0, 0, 0.1);
|
||
|
||
--primary-color: #3498db;
|
||
--primary-rgb: 52, 152, 219;
|
||
--primary-dark: #2980b9;
|
||
--secondary-color: #2ecc71;
|
||
--danger-color: #e74c3c;
|
||
--warning-color: #f39c12;
|
||
--light-gray: #f5f5f5;
|
||
--medium-gray: #e0e0e0;
|
||
--dark-gray: #777777;
|
||
--white: #ffffff;
|
||
--shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
--border-radius: 8px;
|
||
--transition: all 0.3s ease;
|
||
|
||
/* New variables for details row */
|
||
--details-bg: #f8f9fa; /* Light background for details */
|
||
--details-text-color: var(--text-color);
|
||
--details-border-color: #dee2e6;
|
||
--notes-bg: #e9ecef; /* Slightly different background for notes */
|
||
|
||
/* Ensure warranty card title is white in table view light mode */
|
||
.table-view .warranty-title {
|
||
color: #FFFFFF; /* White text for better contrast */
|
||
}
|
||
|
||
/* Make action button icons white in table view light mode */
|
||
.table-view .product-name-header .action-btn i {
|
||
color: #FFFFFF; /* White icon color */
|
||
}
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* Responsive media defaults */
|
||
img,
|
||
video,
|
||
canvas,
|
||
svg {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
:root[data-theme="dark"] {
|
||
--bg-color: #1a1a1a;
|
||
--card-bg: #2d2d2d;
|
||
--text-color: #e0e0e0;
|
||
--border-color: #404040;
|
||
--modal-backdrop: rgba(0, 0, 0, 0.7);
|
||
--loading-backdrop: rgba(0, 0, 0, 0.8);
|
||
--shadow-color: rgba(0, 0, 0, 0.3);
|
||
--primary-color: #4dabf7;
|
||
--primary-rgb: 77, 171, 247;
|
||
--primary-dark: #339af0;
|
||
--secondary-color: #40c057;
|
||
--danger-color: #fa5252;
|
||
--warning-color: #ff922b;
|
||
--light-gray: #2d2d2d;
|
||
--medium-gray: #404040;
|
||
--dark-gray: #909090;
|
||
--white: #2d2d2d;
|
||
--modal-background: #2d2d2d;
|
||
--text-muted: #909090;
|
||
--input-background: #1a1a1a;
|
||
--border-radius: 8px; /* Added missing border radius for dark theme */
|
||
|
||
/* New variables for details row */
|
||
--details-bg: #2c3034; /* Darker background for details */
|
||
--details-text-color: var(--text-color);
|
||
--details-border-color: #454a4f;
|
||
--notes-bg: #343a40; /* Slightly different dark background for notes */
|
||
|
||
/* Ensure warranty card title is white in table view dark mode */
|
||
.table-view .warranty-title {
|
||
color: #FFFFFF; /* White text for better contrast */
|
||
}
|
||
|
||
/* Make action button icons white in table view dark mode */
|
||
.table-view .product-name-header .action-btn i {
|
||
color: #FFFFFF; /* White icon color */
|
||
}
|
||
|
||
/* Dark mode styles for tags */
|
||
.tag {
|
||
background-color: var(--medium-gray); /* e.g., #404040 */
|
||
color: var(--text-color); /* e.g., #e0e0e0 */
|
||
box-shadow: 0 1px 2px var(--shadow-color); /* Softer shadow for dark mode */
|
||
}
|
||
|
||
.tag .remove-tag {
|
||
background-color: rgba(255, 255, 255, 0.1); /* Light transparent background for the 'x' button */
|
||
color: var(--text-color); /* Light color for the 'x' icon */
|
||
}
|
||
|
||
.tag .remove-tag:hover {
|
||
background-color: rgba(255, 255, 255, 0.2); /* Slightly more opaque on hover */
|
||
}
|
||
|
||
/* Dark mode styles for filter select options */
|
||
.filter-select option,
|
||
.filter-select option:hover,
|
||
.filter-select option:focus {
|
||
background-color: var(--input-background);
|
||
color: var(--text-color);
|
||
}
|
||
|
||
/* Dark mode styles for filter select options - using !important to override browser defaults */
|
||
.filter-select option,
|
||
.filter-select option:hover,
|
||
.filter-select option:focus {
|
||
background-color: var(--input-background) !important;
|
||
color: var(--text-color) !important;
|
||
}
|
||
}
|
||
|
||
body {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
line-height: 1.6;
|
||
color: var(--text-color);
|
||
background-color: var(--bg-color);
|
||
padding: 0;
|
||
margin: 0;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
@media (max-width: 425px) {
|
||
.container { padding: 12px; }
|
||
}
|
||
|
||
@media (max-width: 375px) {
|
||
.container { padding: 10px; }
|
||
}
|
||
|
||
@media (max-width: 320px) {
|
||
.container { padding: 8px; }
|
||
}
|
||
|
||
/* ===== HEADER ===== */
|
||
header {
|
||
background-color: var(--card-bg);
|
||
box-shadow: var(--shadow);
|
||
padding: 20px 0;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
header .container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.app-title {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.app-title h1 {
|
||
color: var(--primary-color);
|
||
font-size: 2.2rem;
|
||
margin: 0;
|
||
}
|
||
|
||
.app-title i {
|
||
font-size: 2rem;
|
||
margin-right: 15px;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
/* ===== MAIN CONTENT ===== */
|
||
.main-content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 2fr;
|
||
gap: 30px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.main-content {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 425px) {
|
||
.panel-header h2 { font-size: 1.25rem; }
|
||
}
|
||
|
||
/* Hide only Filter and Sort text below 479px (keep icons and indicator visible) */
|
||
@media (max-width: 479px) {
|
||
.filter-controls #filterBtn span:not(#filterIndicator),
|
||
.filter-controls #sortBtn span {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 375px) {
|
||
.panel-header h2 { font-size: 1.15rem; }
|
||
}
|
||
|
||
@media (max-width: 320px) {
|
||
.panel-header h2 { font-size: 1.05rem; }
|
||
}
|
||
|
||
/* ===== FORM PANEL ===== */
|
||
.form-panel {
|
||
background-color: var(--card-bg);
|
||
border-radius: var(--border-radius);
|
||
box-shadow: var(--shadow);
|
||
padding: 25px;
|
||
}
|
||
|
||
/* Form Tabs */
|
||
.form-tabs {
|
||
display: flex;
|
||
margin-bottom: 20px;
|
||
position: relative;
|
||
border-bottom: 2px solid var(--medium-gray);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.form-tabs::after {
|
||
display: none;
|
||
}
|
||
|
||
.form-tabs::before { display: none; }
|
||
|
||
/* Progress handled via ::after below */
|
||
|
||
.form-tab {
|
||
flex: 1 1 20%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
text-align: center;
|
||
padding: 15px 10px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
color: var(--dark-gray);
|
||
transition: color 0.3s ease;
|
||
box-sizing: border-box;
|
||
width: 20%; /* Five tabs fit on one row */
|
||
min-width: 0; /* Allow shrinking without wrapping inner content */
|
||
white-space: nowrap; /* Prevent label wrapping */
|
||
}
|
||
|
||
.form-tab:hover {
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.form-tab.active {
|
||
color: var(--primary-color);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.form-tab.completed {
|
||
color: var(--secondary-color);
|
||
}
|
||
|
||
.form-tab.completed::after {
|
||
content: '\f00c';
|
||
font-family: 'Font Awesome 5 Free';
|
||
font-weight: 900;
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.form-tab i {
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.tab-content {
|
||
display: none;
|
||
}
|
||
|
||
.tab-content.active {
|
||
display: block;
|
||
animation: fade-in 0.3s ease;
|
||
}
|
||
|
||
.tab-navigation {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 20px;
|
||
padding-top: 20px;
|
||
border-top: 1px solid var(--medium-gray);
|
||
}
|
||
|
||
.tab-navigation .btn {
|
||
min-width: 120px;
|
||
}
|
||
|
||
.tab-navigation .btn i {
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.tab-navigation .btn:last-child i {
|
||
margin-right: 0;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
input.invalid {
|
||
border-color: var(--danger-color);
|
||
box-shadow: 0 0 0 1px var(--danger-color);
|
||
animation: shake 0.3s ease;
|
||
}
|
||
|
||
@keyframes shake {
|
||
0%, 100% { transform: translateX(0); }
|
||
25% { transform: translateX(-5px); }
|
||
75% { transform: translateX(5px); }
|
||
}
|
||
|
||
/* Progress indicator */
|
||
.form-tabs {
|
||
display: flex;
|
||
border-bottom: 2px solid var(--medium-gray);
|
||
margin-bottom: 20px;
|
||
position: relative;
|
||
}
|
||
|
||
.form-tabs::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -2px;
|
||
left: 0;
|
||
height: 2px;
|
||
background-color: var(--secondary-color);
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
.form-tabs[data-step="0"]::after { width: calc(100% / 5); }
|
||
.form-tabs[data-step="1"]::after { width: calc(200% / 5); }
|
||
.form-tabs[data-step="2"]::after { width: calc(300% / 5); }
|
||
.form-tabs[data-step="3"]::after { width: calc(400% / 5); }
|
||
.form-tabs[data-step="4"]::after { width: 100%; }
|
||
|
||
@media (max-width: 788px) {
|
||
.form-tab { padding: 12px 6px; }
|
||
.form-tab i { margin-right: 6px; }
|
||
}
|
||
|
||
/* On narrow screens, shrink labels to keep tabs uniform (keep text visible) */
|
||
@media (max-width: 740px) {
|
||
.form-tab { padding: 10px 4px; gap: 4px; }
|
||
.form-tab i { margin-right: 4px; font-size: 0.95rem; }
|
||
.form-tab span { display: inline; font-size: 0.85rem; }
|
||
}
|
||
|
||
/* Extra small screens: prevent tab labels from cramping in Add Warranty modal */
|
||
@media (max-width: 430px) {
|
||
#addWarrantyModal .form-tabs {
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
#addWarrantyModal .form-tab {
|
||
padding: 10px 4px;
|
||
gap: 0;
|
||
}
|
||
#addWarrantyModal .form-tab span {
|
||
display: none; /* show icons only to keep tabs readable */
|
||
}
|
||
#addWarrantyModal .form-tab i {
|
||
margin-right: 0;
|
||
font-size: 1.05rem;
|
||
}
|
||
}
|
||
|
||
@keyframes fade-in {
|
||
from { opacity: 0; transform: translateY(10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.form-panel h2 {
|
||
color: var(--primary-color);
|
||
margin-bottom: 20px;
|
||
font-size: 1.5rem;
|
||
padding-bottom: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
font-weight: 500;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.form-control {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: 1px solid var(--medium-gray);
|
||
border-radius: var(--border-radius);
|
||
font-size: 1rem;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.form-control:focus {
|
||
outline: none;
|
||
border-color: var(--primary-color);
|
||
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25);
|
||
}
|
||
|
||
.file-input-wrapper {
|
||
position: relative;
|
||
overflow: hidden;
|
||
display: inline-block;
|
||
width: 100%;
|
||
}
|
||
|
||
.file-input-label {
|
||
display: block;
|
||
background-color: var(--primary-color);
|
||
color: var(--white);
|
||
text-align: center;
|
||
padding: 12px;
|
||
border-radius: var(--border-radius);
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.file-input-label:hover {
|
||
background-color: var(--primary-dark);
|
||
}
|
||
|
||
.file-input-label i {
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.file-input {
|
||
position: absolute;
|
||
font-size: 100px;
|
||
opacity: 0;
|
||
right: 0;
|
||
top: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.file-name {
|
||
margin-top: 8px;
|
||
font-size: 0.9rem;
|
||
color: var(--dark-gray);
|
||
word-break: break-all;
|
||
}
|
||
|
||
/* URL Input Groups */
|
||
.url-input-group {
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.input-with-icon {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.input-with-icon i {
|
||
position: absolute;
|
||
left: 12px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: var(--text-muted, #6c757d);
|
||
font-size: 1rem;
|
||
z-index: 2;
|
||
}
|
||
|
||
.input-with-icon input {
|
||
padding-left: 40px;
|
||
width: 100%;
|
||
}
|
||
|
||
/* Document URL Links */
|
||
.document-url-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
color: var(--primary-color);
|
||
text-decoration: none;
|
||
font-size: 0.9rem;
|
||
margin-right: 10px;
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
transition: background-color 0.2s, color 0.2s;
|
||
}
|
||
|
||
.document-url-link:hover {
|
||
background-color: rgba(52, 152, 219, 0.1);
|
||
color: var(--primary-dark);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.document-url-link i {
|
||
margin-right: 4px;
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-block;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
vertical-align: middle;
|
||
user-select: none;
|
||
border: none;
|
||
padding: 12px 25px;
|
||
font-size: 1rem;
|
||
line-height: 1.5;
|
||
border-radius: var(--border-radius);
|
||
transition: var(--transition);
|
||
cursor: pointer;
|
||
width: 100%;
|
||
}
|
||
|
||
.btn-primary {
|
||
color: var(--white);
|
||
background-color: var(--primary-color);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background-color: var(--primary-dark);
|
||
}
|
||
|
||
.btn-secondary {
|
||
color: var(--white);
|
||
background-color: var(--secondary-color);
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background-color: #27ae60;
|
||
}
|
||
|
||
.btn-danger {
|
||
color: var(--white);
|
||
background-color: var(--danger-color);
|
||
}
|
||
|
||
.btn-danger:hover {
|
||
background-color: #c0392b;
|
||
}
|
||
|
||
/* ===== WARRANTIES LIST ===== */
|
||
.warranties-panel {
|
||
background-color: var(--card-bg);
|
||
border-radius: var(--border-radius);
|
||
box-shadow: var(--shadow);
|
||
padding: 25px;
|
||
grid-column: 1 / -1; /* Make panel span full width */
|
||
}
|
||
|
||
.warranties-panel h2 {
|
||
color: var(--primary-color);
|
||
margin-bottom: 20px;
|
||
font-size: 1.5rem;
|
||
padding-bottom: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.refresh-btn {
|
||
background: none;
|
||
border: none;
|
||
color: var(--primary-color);
|
||
cursor: pointer;
|
||
font-size: 1.2rem;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.refresh-btn:hover {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.search-box {
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: var(--search-bg);
|
||
border: 1px solid var(--border-color);
|
||
padding: 8px 15px;
|
||
width: 100%;
|
||
border-radius: 25px;
|
||
position: relative;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.search-box:focus-within {
|
||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
|
||
border-color: var(--primary-color);
|
||
width: 100%;
|
||
}
|
||
|
||
.search-box.active-search {
|
||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
|
||
border-color: var(--primary-color);
|
||
background-color: rgba(var(--primary-rgb), 0.05);
|
||
width: 100%;
|
||
}
|
||
|
||
.search-box i {
|
||
color: var(--text-muted);
|
||
font-size: 1rem;
|
||
margin-right: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 20px;
|
||
position: static; /* Override any absolute positioning */
|
||
transform: none; /* Reset any transform */
|
||
left: auto; /* Reset any left positioning */
|
||
top: auto; /* Reset any top positioning */
|
||
}
|
||
|
||
.search-box.active-search i {
|
||
color: var(--primary-color);
|
||
animation: search-pulse 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes search-pulse {
|
||
0% { transform: scale(1); }
|
||
50% { transform: scale(1.1); }
|
||
100% { transform: scale(1); }
|
||
}
|
||
|
||
.search-box input {
|
||
border: none;
|
||
outline: none;
|
||
background: none;
|
||
width: 100%;
|
||
color: var(--text-color);
|
||
font-size: 0.95rem;
|
||
padding: 2px 0;
|
||
}
|
||
|
||
.search-box input::placeholder {
|
||
color: var(--text-muted);
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.clear-search-btn {
|
||
background: none;
|
||
border: none;
|
||
outline: none;
|
||
cursor: pointer;
|
||
color: var(--text-muted);
|
||
font-size: 0.9rem;
|
||
opacity: 0.7;
|
||
transition: opacity 0.3s;
|
||
padding: 0;
|
||
margin-left: 5px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.clear-search-btn:hover {
|
||
opacity: 1;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.warranties-list {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
align-items: stretch; /* Explicitly set to ensure equal heights */
|
||
}
|
||
|
||
.warranty-card {
|
||
background-color: var(--card-bg);
|
||
border-radius: var(--border-radius);
|
||
box-shadow: var(--shadow);
|
||
overflow: hidden;
|
||
transition: var(--transition);
|
||
border: 1px solid var(--border-color);
|
||
display: flex;
|
||
flex-direction: column;
|
||
/* height: auto; */ /* Remove to allow grid stretch */
|
||
}
|
||
|
||
@media (max-width: 375px) {
|
||
.warranty-card { border-radius: 6px; }
|
||
}
|
||
|
||
@media (max-width: 320px) {
|
||
.warranty-card { border-radius: 4px; }
|
||
}
|
||
|
||
.warranty-card:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.warranty-card.expired {
|
||
border-left: 4px solid var(--danger-color);
|
||
}
|
||
|
||
.warranty-card.expiring-soon {
|
||
border-left: 4px solid var(--warning-color);
|
||
}
|
||
|
||
.warranty-card.active {
|
||
border-left: 4px solid var(--secondary-color);
|
||
}
|
||
|
||
/* Neutral styling for archived view */
|
||
/* Neutral styling for archived view, and per-card when archived appears in All */
|
||
.archived-view .warranty-card,
|
||
.warranty-card.archived {
|
||
border-left: 4px solid var(--medium-gray);
|
||
}
|
||
|
||
.table-view.archived-view .warranty-card,
|
||
.archived-view .table-view .warranty-card,
|
||
.table-view .warranty-card.archived,
|
||
.warranty-card.archived .table-view .warranty-card {
|
||
border-left: none;
|
||
background-color: rgba(128, 128, 128, 0.08);
|
||
}
|
||
|
||
.warranty-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 15px;
|
||
background-color: rgba(0, 0, 0, 0.03);
|
||
border-bottom: 1px solid var(--border-color);
|
||
position: relative;
|
||
}
|
||
|
||
/* Neutralize header background in archived view */
|
||
.archived-view .warranty-card .warranty-header,
|
||
.warranty-card.archived .warranty-header {
|
||
background-color: rgba(128, 128, 128, 0.06);
|
||
}
|
||
|
||
.warranty-title {
|
||
margin: 0;
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
color: var(--text-color);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
max-width: 200px;
|
||
}
|
||
|
||
.warranty-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.action-btn {
|
||
background: none;
|
||
border: none;
|
||
font-size: 1rem;
|
||
cursor: pointer;
|
||
color: var(--dark-gray);
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.action-btn:hover {
|
||
background-color: rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.edit-btn:hover {
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.delete-btn:hover {
|
||
color: var(--danger-color);
|
||
}
|
||
|
||
.warranty-details {
|
||
padding: 15px;
|
||
flex-grow: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.warranty-details div {
|
||
margin-bottom: 8px;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.warranty-details span {
|
||
font-weight: 500;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.warranty-status {
|
||
display: inline-block;
|
||
padding: 4px 10px;
|
||
border-radius: 20px;
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
margin: 10px 0;
|
||
/* This class is kept for backward compatibility but we're now using warranty-status-row */
|
||
display: none;
|
||
}
|
||
|
||
.status-active {
|
||
background-color: rgba(46, 204, 113, 0.15);
|
||
color: #27ae60;
|
||
}
|
||
|
||
.status-expired {
|
||
background-color: rgba(231, 76, 60, 0.15);
|
||
color: #c0392b;
|
||
}
|
||
|
||
.status-expiring {
|
||
background-color: rgba(241, 196, 15, 0.15);
|
||
color: #f39c12;
|
||
}
|
||
|
||
/* Ensure all status badges share the same shape/spacing */
|
||
.status-active,
|
||
.status-expired,
|
||
.status-expiring,
|
||
.status-archived {
|
||
display: inline-block;
|
||
padding: 4px 10px;
|
||
border-radius: 6px;
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.serial-numbers {
|
||
margin-top: 10px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.serial-numbers strong {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.serial-numbers ul {
|
||
margin: 0;
|
||
padding-left: 20px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.serial-numbers li {
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
/* ===== MODAL ===== */
|
||
.modal-backdrop {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
display: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.modal-backdrop.active {
|
||
display: flex; /* Shown when active */
|
||
}
|
||
|
||
/* Specific override for tag management modal to ensure proper centering */
|
||
#tagManagementModal.modal-backdrop {
|
||
display: none;
|
||
justify-content: center !important;
|
||
align-items: center !important;
|
||
position: fixed !important;
|
||
top: 0 !important;
|
||
left: 0 !important;
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||
z-index: 1050 !important;
|
||
}
|
||
|
||
#tagManagementModal.modal-backdrop.active {
|
||
display: flex !important;
|
||
}
|
||
|
||
/* Ensure the inner modal content is properly sized */
|
||
#tagManagementModal .modal {
|
||
background-color: var(--modal-background, #ffffff) !important;
|
||
border-radius: 8px !important;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
|
||
width: 92% !important;
|
||
max-width: 560px !important;
|
||
max-height: 90vh !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
animation: slide-in 0.3s ease !important;
|
||
position: relative !important;
|
||
overflow: hidden !important;
|
||
margin: 0 !important; /* Remove any conflicting margins */
|
||
}
|
||
|
||
/* Override conflicting styles from styles.css for tag management modal */
|
||
#tagManagementModal.modal-backdrop .modal {
|
||
position: relative !important; /* Override fixed positioning */
|
||
top: auto !important; /* Remove top positioning */
|
||
left: auto !important; /* Remove left positioning */
|
||
width: 92% !important; /* Set proper width */
|
||
height: auto !important; /* Set auto height */
|
||
background-color: var(--modal-background, #ffffff) !important;
|
||
margin: 0 !important; /* Remove conflicting margins */
|
||
}
|
||
|
||
@keyframes slide-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* Serial number input styling */
|
||
.serial-number-input {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
gap: 10px;
|
||
}
|
||
|
||
.serial-number-input .form-control {
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.serial-number-input .btn {
|
||
width: auto;
|
||
padding: 8px 10px;
|
||
}
|
||
|
||
.add-serial {
|
||
display: block;
|
||
width: 100%;
|
||
margin-top: 5px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
/* End serial number input styling */
|
||
|
||
.modal-header {
|
||
padding: 1rem;
|
||
border-bottom: 1px solid var(--border-color);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background-color: var(--modal-background, #ffffff);
|
||
}
|
||
|
||
.modal-title {
|
||
margin: 0;
|
||
font-size: 1.25rem;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.close-btn {
|
||
background: none;
|
||
border: none;
|
||
font-size: 1.5rem;
|
||
color: var(--text-muted);
|
||
cursor: pointer;
|
||
padding: 0;
|
||
line-height: 1;
|
||
}
|
||
|
||
.close-btn:hover {
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.modal-body {
|
||
padding: 1rem;
|
||
overflow-y: auto; /* Enable vertical scroll */
|
||
flex-grow: 1; /* Allow body to take available space */
|
||
background-color: var(--card-bg); /* Ensure background */
|
||
}
|
||
/* Mobile-friendly layout for Manage Tags */
|
||
@media (max-width: 600px) {
|
||
#tagManagementModal .modal {
|
||
width: 96% !important;
|
||
max-width: 520px !important;
|
||
border-radius: 10px !important;
|
||
}
|
||
#tagManagementModal .modal-header,
|
||
#tagManagementModal .modal-footer {
|
||
padding: 12px !important;
|
||
}
|
||
#tagManagementModal .modal-title {
|
||
font-size: 1.05rem !important;
|
||
}
|
||
#tagManagementModal .modal-body {
|
||
padding: 12px !important;
|
||
}
|
||
#tagManagementModal .tag-form {
|
||
display: grid !important;
|
||
grid-template-columns: 1fr auto auto !important;
|
||
gap: 8px !important;
|
||
align-items: center !important;
|
||
}
|
||
#tagManagementModal .tag-form .form-control { width: 100% !important; }
|
||
#tagManagementModal .tag-form input[type="color"] {
|
||
width: 42px !important;
|
||
height: 36px !important;
|
||
padding: 0 !important;
|
||
border-radius: 6px !important;
|
||
}
|
||
#tagManagementModal .tag-form .btn {
|
||
height: 36px !important;
|
||
padding: 6px 10px !important;
|
||
white-space: nowrap !important;
|
||
}
|
||
#tagManagementModal h4 { margin-top: 14px !important; }
|
||
#existingTags {
|
||
display: grid !important;
|
||
grid-template-columns: 1fr 1fr !important;
|
||
gap: 8px !important;
|
||
}
|
||
}
|
||
|
||
/* Medium mobile (≤425px): tighten Manage Tags layout */
|
||
@media (max-width: 425px) {
|
||
#tagManagementModal .modal { width: 96% !important; }
|
||
#tagManagementModal .modal-title { font-size: 1.05rem !important; }
|
||
#tagManagementModal .modal-body { padding: 12px !important; }
|
||
#existingTags { grid-template-columns: 1fr !important; }
|
||
.tag-management-table { font-size: 0.92rem !important; }
|
||
.tag-management-table th, .tag-management-table td { padding: 8px 10px !important; white-space: normal !important; word-break: break-word !important; }
|
||
.tag-actions .btn { padding: 5px 8px !important; }
|
||
.tag-color-swatch { width: 26px !important; height: 26px !important; }
|
||
|
||
/* Card-style rows: prevent horizontal scroll and keep actions visible */
|
||
.tag-management-table thead { display: none !important; }
|
||
.tag-management-table { border-collapse: separate !important; border-spacing: 0 !important; }
|
||
.tag-management-table tr { display: block !important; width: 100% !important; border: 1px solid var(--border-color) !important; border-radius: 8px !important; margin-bottom: 10px !important; padding: 10px !important; }
|
||
.tag-management-table td { display: block !important; width: 100% !important; border: none !important; padding: 6px 0 !important; }
|
||
.tag-name-input, .tag-name-display { width: 100% !important; }
|
||
.tag-actions { display: flex !important; justify-content: flex-end !important; gap: 8px !important; margin-top: 6px !important; }
|
||
/* Only show edit-actions when row is in editing state */
|
||
.tag-actions .view-actions { display: flex !important; gap: 8px !important; justify-content: flex-end !important; }
|
||
.tag-actions .edit-actions { display: none !important; }
|
||
.existing-tag-row.editing .tag-actions .edit-actions { display: flex !important; }
|
||
.existing-tag-row.editing .tag-actions .view-actions { display: none !important; }
|
||
}
|
||
|
||
@media (max-width: 380px) {
|
||
#tagManagementModal .tag-form {
|
||
grid-template-columns: 1fr auto !important;
|
||
grid-auto-rows: minmax(36px, auto) !important;
|
||
}
|
||
#tagManagementModal .tag-form input[type="color"] { grid-column: 2 / 3 !important; }
|
||
#tagManagementModal .tag-form .btn { grid-column: 1 / -1 !important; }
|
||
#existingTags { grid-template-columns: 1fr !important; }
|
||
}
|
||
|
||
/* 375px medium mobile tuning for Manage Tags */
|
||
@media (max-width: 375px) {
|
||
#tagManagementModal .modal { width: 96% !important; }
|
||
#tagManagementModal .modal-title { font-size: 1rem !important; }
|
||
#tagManagementModal .modal-body { padding: 10px !important; }
|
||
.tag-management-table th, .tag-management-table td { padding: 8px 10px !important; }
|
||
.tag-actions .btn { padding: 5px 8px !important; }
|
||
.tag-color-swatch { width: 26px !important; height: 26px !important; }
|
||
#existingTags { grid-template-columns: 1fr !important; }
|
||
}
|
||
|
||
.modal-footer {
|
||
padding: 1rem;
|
||
border-top: 1px solid var(--border-color);
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 0.5rem;
|
||
background-color: var(--modal-background, #ffffff);
|
||
}
|
||
|
||
.modal-footer .btn {
|
||
width: auto;
|
||
}
|
||
|
||
/* ===== TOAST NOTIFICATIONS ===== */
|
||
.toast-container {
|
||
position: fixed;
|
||
top: 20px;
|
||
right: 20px;
|
||
z-index: 1001;
|
||
}
|
||
|
||
.toast {
|
||
min-width: 250px;
|
||
margin-bottom: 10px;
|
||
padding: 15px 20px;
|
||
border-radius: var(--border-radius);
|
||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
animation: slide-in 0.3s ease, fade-out 0.3s ease 2.7s forwards;
|
||
}
|
||
|
||
@keyframes slide-in {
|
||
from { transform: translateX(100%); opacity: 0; }
|
||
to { transform: translateX(0); opacity: 1; }
|
||
}
|
||
|
||
@keyframes fade-out {
|
||
from { opacity: 1; }
|
||
to { opacity: 0; }
|
||
}
|
||
|
||
.toast-success {
|
||
background-color: var(--secondary-color);
|
||
color: var(--white);
|
||
}
|
||
|
||
.toast-error {
|
||
background-color: var(--danger-color);
|
||
color: var(--white);
|
||
}
|
||
|
||
.toast-warning {
|
||
background-color: #f39c12;
|
||
color: var(--white);
|
||
}
|
||
|
||
.toast-info {
|
||
background-color: var(--primary-color);
|
||
color: var(--white);
|
||
}
|
||
|
||
.toast-close {
|
||
background: none;
|
||
border: none;
|
||
color: var(--white);
|
||
opacity: 0.7;
|
||
cursor: pointer;
|
||
font-size: 1.2rem;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.toast-close:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* ===== LOADING SPINNER ===== */
|
||
.loading-spinner {
|
||
display: inline-block;
|
||
position: relative;
|
||
width: 80px;
|
||
height: 80px;
|
||
}
|
||
|
||
.loading-spinner:after {
|
||
content: " ";
|
||
display: block;
|
||
border-radius: 50%;
|
||
width: 0;
|
||
height: 0;
|
||
margin: 8px;
|
||
box-sizing: border-box;
|
||
border: 32px solid var(--primary-color);
|
||
border-color: var(--primary-color) transparent var(--primary-color) transparent;
|
||
animation: loading-spinner 1.2s infinite;
|
||
}
|
||
|
||
@keyframes loading-spinner {
|
||
0% { transform: rotate(0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
||
50% { transform: rotate(180deg); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.loading-container {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: var(--loading-backdrop);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1002;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.loading-container.active {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
/* ===== EMPTY STATE ===== */
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
color: var(--dark-gray);
|
||
}
|
||
|
||
.empty-state i {
|
||
font-size: 3rem;
|
||
margin-bottom: 15px;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.empty-state h3 {
|
||
font-size: 1.2rem;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.empty-state p {
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* ===== RESPONSIVE ADJUSTMENTS ===== */
|
||
@media (max-width: 768px) {
|
||
/* Header Responsive Styles */
|
||
header .container {
|
||
flex-wrap: wrap; /* Allow header items to wrap */
|
||
justify-content: center; /* Center items when wrapped */
|
||
gap: 15px; /* Add space between wrapped items */
|
||
padding: 10px 15px !important; /* Adjust padding for smaller screens */
|
||
}
|
||
|
||
header .app-title h1 {
|
||
font-size: 1.8rem !important; /* Slightly reduce title size */
|
||
}
|
||
|
||
header .app-title i {
|
||
font-size: 1.6rem !important; /* Slightly reduce icon size */
|
||
margin-right: 10px !important; /* Slightly reduce icon size */
|
||
}
|
||
|
||
header .nav-links {
|
||
order: 3; /* Push nav links to the bottom row when wrapped */
|
||
width: 100%; /* Make nav links take full width */
|
||
justify-content: center; /* Center nav links */
|
||
margin: 10px 0 0 0 !important; /* Add margin top, remove horizontal margin */
|
||
padding-bottom: 5px; /* Add some padding below nav links */
|
||
}
|
||
|
||
header .auth-buttons,
|
||
header .user-menu,
|
||
header .settings-container {
|
||
margin-left: 0 !important; /* Reset margins */
|
||
margin-right: 0 !important;
|
||
}
|
||
/* End Header Responsive Styles */
|
||
|
||
.main-content {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.form-panel, .warranties-panel {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.warranty-header {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.warranty-actions {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.document-links-row {
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
}
|
||
|
||
.invoice-link, .manual-link, .product-link, .notes-link {
|
||
width: 100%;
|
||
justify-content: center;
|
||
}
|
||
|
||
.search-box,
|
||
.search-box:focus-within,
|
||
.search-box.active-search {
|
||
width: 100%;
|
||
max-width: none;
|
||
}
|
||
}
|
||
|
||
/* ===== SETTINGS MENU ===== */
|
||
.settings-container {
|
||
position: relative;
|
||
z-index: 100;
|
||
}
|
||
|
||
/* Group for right-aligned header elements (User Menu, Auth, Settings) */
|
||
.header-right-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px; /* Adjust gap as needed */
|
||
}
|
||
|
||
.settings-btn {
|
||
background-color: var(--card-bg);
|
||
border: 1px solid var(--border-color);
|
||
color: var(--primary-color);
|
||
font-size: 1.2rem;
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.settings-btn:hover {
|
||
transform: rotate(30deg);
|
||
background-color: var(--primary-color);
|
||
color: var(--white);
|
||
}
|
||
|
||
.settings-menu {
|
||
position: absolute;
|
||
top: calc(100% + 10px);
|
||
right: 0;
|
||
background-color: var(--card-bg);
|
||
border-radius: var(--border-radius);
|
||
box-shadow: var(--shadow);
|
||
padding: 15px;
|
||
min-width: 220px;
|
||
z-index: 100;
|
||
display: none;
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
|
||
.settings-menu.active {
|
||
display: block;
|
||
animation: slide-in-top 0.3s forwards;
|
||
}
|
||
|
||
@keyframes slide-in-top {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-10px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.settings-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
.settings-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.settings-item span {
|
||
font-weight: 500;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
/* Toggle Switch */
|
||
.toggle-switch {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 50px;
|
||
height: 24px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.toggle-switch input {
|
||
opacity: 0;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.toggle-slider {
|
||
position: absolute;
|
||
cursor: pointer;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: var(--medium-gray);
|
||
transition: var(--transition);
|
||
border-radius: 34px;
|
||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.toggle-slider:before {
|
||
position: absolute;
|
||
content: "";
|
||
height: 16px;
|
||
width: 16px;
|
||
left: 4px;
|
||
bottom: 4px;
|
||
background-color: var(--white);
|
||
transition: var(--transition);
|
||
border-radius: 50%;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
input:checked + .toggle-slider {
|
||
background-color: var(--primary-color);
|
||
}
|
||
|
||
input:checked + .toggle-slider:before {
|
||
transform: translateX(26px);
|
||
}
|
||
|
||
/* ===== UTILITIES ===== */
|
||
.text-danger {
|
||
color: var(--danger-color);
|
||
}
|
||
|
||
.text-warning {
|
||
color: #f39c12;
|
||
}
|
||
|
||
.text-success {
|
||
color: var(--secondary-color);
|
||
}
|
||
|
||
.text-center {
|
||
text-align: center;
|
||
}
|
||
|
||
.mt-10 {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.mt-20 {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.mb-10 {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.mb-20 {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* Navigation Links */
|
||
.nav-links {
|
||
display: flex;
|
||
gap: 20px;
|
||
margin: 0 20px;
|
||
}
|
||
|
||
.nav-link {
|
||
text-decoration: none;
|
||
color: var(--text-color);
|
||
padding: 8px 12px;
|
||
border-radius: 4px;
|
||
transition: background-color 0.3s;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.nav-link:hover {
|
||
background-color: rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.nav-link.active {
|
||
background-color: rgba(0, 0, 0, 0.05);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.nav-link i {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
/* Status Page Styles */
|
||
.status-content {
|
||
width: 100%;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
.status-cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.status-card {
|
||
background-color: var(--card-bg);
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
transition: transform 0.3s, box-shadow 0.3s;
|
||
}
|
||
|
||
.status-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.status-card[data-status="active"] .card-icon {
|
||
color: #4CAF50;
|
||
}
|
||
|
||
.status-card[data-status="expiring"] .card-icon {
|
||
color: #FF9800;
|
||
}
|
||
|
||
.status-card[data-status="expired"] .card-icon {
|
||
color: #F44336;
|
||
}
|
||
|
||
.status-card[data-status="total"] .card-icon {
|
||
color: #3498db;
|
||
}
|
||
|
||
.card-icon {
|
||
font-size: 2.5rem;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.card-content h3 {
|
||
margin: 0 0 5px 0;
|
||
font-size: 1rem;
|
||
color: var(--dark-gray);
|
||
}
|
||
|
||
.card-content .count {
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
margin: 0;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.charts-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 30px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.chart-card {
|
||
background-color: var(--card-bg);
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.chart-card h3 {
|
||
margin-top: 0;
|
||
margin-bottom: 15px;
|
||
font-size: 1.2rem;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.chart-container {
|
||
height: 300px;
|
||
position: relative;
|
||
}
|
||
|
||
.recent-expirations {
|
||
background-color: var(--card-bg);
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.recent-expirations h3 {
|
||
margin-top: 0;
|
||
margin-bottom: 15px;
|
||
font-size: 1.2rem;
|
||
color: var(--text-color);
|
||
text-align: left;
|
||
}
|
||
|
||
.table-responsive {
|
||
overflow-x: auto;
|
||
width: 100%;
|
||
min-width: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
#recentExpirationsTable {
|
||
table-layout: auto;
|
||
width: 100%;
|
||
border-collapse: separate;
|
||
border-spacing: 0;
|
||
border-right: none;
|
||
}
|
||
|
||
#recentExpirationsTable th,
|
||
#recentExpirationsTable td {
|
||
padding: 12px 15px;
|
||
text-align: left;
|
||
border-bottom: 1px solid var(--border-color);
|
||
width: auto;
|
||
min-width: 120px;
|
||
max-width: none;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
#recentExpirationsTable td {
|
||
white-space: normal;
|
||
}
|
||
|
||
#recentExpirationsTable tbody {
|
||
min-height: 250px; /* Ensure minimum height for the table body */
|
||
}
|
||
|
||
#recentExpirationsTable .no-data {
|
||
text-align: center;
|
||
color: var(--dark-gray);
|
||
padding: 50px 30px;
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
#recentExpirationsTable .empty-row {
|
||
height: 250px; /* Fixed height for the empty row */
|
||
}
|
||
|
||
#recentExpirationsTable .empty-row td {
|
||
vertical-align: middle;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Fix for the last column to ensure border extends fully */
|
||
#recentExpirationsTable tr {
|
||
position: relative;
|
||
}
|
||
|
||
#recentExpirationsTable tr:after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 1px;
|
||
background-color: var(--border-color);
|
||
z-index: 0;
|
||
}
|
||
|
||
#recentExpirationsTable .action-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 4px;
|
||
background-color: var(--light-gray);
|
||
color: var(--text-color);
|
||
text-decoration: none;
|
||
transition: all 0.2s ease;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
#recentExpirationsTable .action-btn:hover {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
}
|
||
|
||
#recentExpirationsTable .edit-btn:hover {
|
||
background-color: var(--secondary-color);
|
||
}
|
||
|
||
#recentExpirationsTable .view-btn:hover {
|
||
background-color: var(--info-color);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
#recentExpirationsTable td:last-child {
|
||
padding: 8px;
|
||
}
|
||
}
|
||
|
||
/* Status styling */
|
||
.status-expired {
|
||
color: #F44336;
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
background-color: rgba(244, 67, 54, 0.1);
|
||
display: inline-block;
|
||
}
|
||
|
||
.status-expiring {
|
||
color: #FF9800;
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
background-color: rgba(255, 152, 0, 0.1);
|
||
display: inline-block;
|
||
}
|
||
|
||
.status-active {
|
||
color: #4CAF50;
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
background-color: rgba(76, 175, 80, 0.1);
|
||
display: inline-block;
|
||
}
|
||
|
||
tr.status-expired {
|
||
background-color: rgba(244, 67, 54, 0.05);
|
||
}
|
||
|
||
tr.status-expiring {
|
||
background-color: rgba(255, 152, 0, 0.05);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.status-cards {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.charts-container {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.chart-container {
|
||
height: 250px;
|
||
}
|
||
|
||
#recentExpirationsTable th:nth-child(2),
|
||
#recentExpirationsTable td:nth-child(2) {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.status-cards {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
#recentExpirationsTable th:nth-child(3),
|
||
#recentExpirationsTable td:nth-child(3) {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* Tablet layout for iPad Air (769–820px):
|
||
Row 1: Active | Expiring Soon
|
||
Row 2: Expired | Total */
|
||
@media (min-width: 769px) and (max-width: 820px) {
|
||
.status-cards {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
grid-template-areas:
|
||
"active expiring"
|
||
"expired total";
|
||
}
|
||
.status-card[data-status="active"] { grid-area: active; }
|
||
.status-card[data-status="expiring"] { grid-area: expiring; }
|
||
.status-card[data-status="expired"] { grid-area: expired; }
|
||
.status-card[data-status="total"] { grid-area: total; }
|
||
}
|
||
|
||
/* Error message on status page */
|
||
.error-message {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
background-color: rgba(244, 67, 54, 0.05);
|
||
border-radius: 8px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.error-message i {
|
||
font-size: 3rem;
|
||
color: #F44336;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.error-message h3 {
|
||
font-size: 1.5rem;
|
||
margin-bottom: 10px;
|
||
color: #F44336;
|
||
}
|
||
|
||
.error-message p {
|
||
color: var(--text-color);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.error-message p:last-child {
|
||
font-family: monospace;
|
||
background-color: rgba(0, 0, 0, 0.05);
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
max-width: 100%;
|
||
overflow-x: auto;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* Fix for table alignment */
|
||
.recent-expirations table {
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.recent-expirations thead,
|
||
.recent-expirations tbody,
|
||
.recent-expirations tr,
|
||
.recent-expirations th,
|
||
.recent-expirations td {
|
||
display: revert;
|
||
text-align: left;
|
||
}
|
||
|
||
.settings-link {
|
||
display: flex;
|
||
align-items: center;
|
||
text-decoration: none;
|
||
color: var(--text-color);
|
||
padding: 5px 0;
|
||
transition: var(--transition);
|
||
width: 100%;
|
||
}
|
||
|
||
.settings-link i {
|
||
margin-right: 10px;
|
||
font-size: 1rem;
|
||
width: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.settings-link:hover {
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.dashboard-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.dashboard-header h2 {
|
||
margin: 0;
|
||
font-size: 1.5rem;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.table-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.table-header h3 {
|
||
margin: 0;
|
||
font-size: 1.2rem;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.table-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: center;
|
||
}
|
||
|
||
.filter-options {
|
||
min-width: 150px;
|
||
}
|
||
|
||
.filter-select {
|
||
width: 100%;
|
||
padding: 8px 10px;
|
||
border-radius: var(--border-radius);
|
||
border: 1px solid var(--border-color);
|
||
background-color: var(--card-bg);
|
||
color: var(--text-color);
|
||
font-size: 0.9rem;
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.filter-select:focus {
|
||
outline: none;
|
||
border-color: var(--primary-color);
|
||
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
|
||
}
|
||
|
||
.sortable {
|
||
cursor: pointer;
|
||
position: relative;
|
||
user-select: none;
|
||
}
|
||
|
||
.sortable i {
|
||
font-size: 0.8rem;
|
||
margin-left: 5px;
|
||
opacity: 0.5;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.sortable:hover i {
|
||
opacity: 1;
|
||
}
|
||
|
||
.sortable.sort-asc i:before {
|
||
content: "\f0de"; /* fa-sort-up */
|
||
}
|
||
|
||
.sortable.sort-desc i:before {
|
||
content: "\f0dd"; /* fa-sort-down */
|
||
}
|
||
|
||
/* Export button */
|
||
.export-btn {
|
||
background-color: var(--card-bg);
|
||
border: 1px solid var(--border-color);
|
||
color: var(--text-color);
|
||
padding: 6px 12px;
|
||
border-radius: var(--border-radius);
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
font-size: 0.9rem;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.export-btn:hover {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
/* Animation for refresh button */
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.refresh-btn.loading i {
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
/* Document links */
|
||
.document-link-container {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.document-links-row {
|
||
display: flex;
|
||
/* flex-wrap: wrap; */ /* Remove wrapping */
|
||
/* gap: 8px; */ /* Remove gap, use margin on items */
|
||
margin-top: 15px;
|
||
justify-content: flex-start;
|
||
flex-direction: row; /* Explicitly set row direction */
|
||
align-items: center; /* Align items vertically */
|
||
/* Add border and background for consistency */
|
||
padding: 10px 15px;
|
||
background-color: rgba(0, 0, 0, 0.03);
|
||
border-top: 1px solid var(--border-color);
|
||
}
|
||
|
||
.invoice-link, .manual-link, .product-link, .notes-link, .other-document-link { /* Added .notes-link here */
|
||
display: inline-flex; /* Remove !important */
|
||
align-items: center !important; /* Keep important if needed for vertical icon align */
|
||
color: var(--primary-color) !important; /* Keep appearance */
|
||
text-decoration: none !important; /* Keep appearance */
|
||
font-weight: 500 !important; /* Keep appearance */
|
||
padding: 5px 10px !important; /* Keep appearance */
|
||
background-color: var(--light-gray) !important; /* Keep appearance */
|
||
border-radius: var(--border-radius) !important; /* Keep appearance */
|
||
transition: var(--transition) !important; /* Keep appearance */
|
||
border: none !important; /* Keep appearance */
|
||
margin: 0 5px 0 0 !important; /* Add right margin for spacing, remove others */
|
||
white-space: nowrap !important; /* Keep appearance */
|
||
}
|
||
|
||
.invoice-link i, .manual-link i, .product-link i, .notes-link i, .other-document-link i { /* Added .notes-link here */
|
||
margin-right: 5px !important;
|
||
font-size: 1rem !important;
|
||
}
|
||
|
||
.invoice-link:hover, .manual-link:hover, .product-link:hover, .notes-link:hover, .other-document-link:hover {
|
||
text-decoration: none !important;
|
||
background-color: var(--medium-gray) !important;
|
||
color: var(--primary-dark) !important;
|
||
}
|
||
.validation-message {
|
||
color: var(--danger-color);
|
||
font-size: 0.85rem;
|
||
margin-top: 5px;
|
||
animation: fade-in 0.3s ease;
|
||
}
|
||
|
||
/* Improve the visual feedback for invalid inputs */
|
||
input.invalid {
|
||
border-color: var(--danger-color);
|
||
box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.25);
|
||
background-color: rgba(231, 76, 60, 0.05);
|
||
}
|
||
|
||
/* Add a subtle shake animation for validation errors */
|
||
@keyframes shake {
|
||
0%, 100% { transform: translateX(0); }
|
||
25% { transform: translateX(-5px); }
|
||
75% { transform: translateX(5px); }
|
||
}
|
||
|
||
input.invalid {
|
||
animation: shake 0.4s ease-in-out;
|
||
}
|
||
.summary-container {
|
||
background-color: var(--light-gray);
|
||
border-radius: var(--border-radius);
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.summary-section {
|
||
margin-bottom: 20px;
|
||
padding-bottom: 15px;
|
||
border-bottom: 1px solid var(--medium-gray);
|
||
}
|
||
|
||
.summary-section:last-child {
|
||
margin-bottom: 0;
|
||
padding-bottom: 0;
|
||
border-bottom: none;
|
||
}
|
||
|
||
.summary-section h4 {
|
||
color: var(--primary-color);
|
||
margin-bottom: 15px;
|
||
font-size: 1.1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.summary-section h4 i {
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.summary-item {
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.summary-label {
|
||
font-weight: 500;
|
||
width: 150px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.summary-value {
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.summary-value ul {
|
||
margin: 0;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
/* Filter controls */
|
||
.filter-controls {
|
||
margin-bottom: 20px;
|
||
background-color: var(--card-bg);
|
||
border-radius: var(--border-radius);
|
||
padding: 15px;
|
||
box-shadow: var(--shadow);
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
|
||
/* --- Improved search bar and dropdown spacing --- */
|
||
.search-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
/* Keep a single row on desktop */
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.search-box {
|
||
flex: 2 1 320px;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: var(--input-background, #f5f5f5);
|
||
border: 1.5px solid var(--border-color);
|
||
border-radius: 25px;
|
||
padding: 0 16px;
|
||
height: 44px;
|
||
box-shadow: none;
|
||
transition: border-color 0.2s, box-shadow 0.2s;
|
||
min-width: 220px;
|
||
max-width: 500px;
|
||
}
|
||
|
||
.search-box:focus-within {
|
||
border-color: var(--primary-color);
|
||
box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.10);
|
||
}
|
||
|
||
.search-btn {
|
||
background: none;
|
||
border: none;
|
||
color: var(--text-muted);
|
||
font-size: 1.1rem;
|
||
margin-right: 8px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
padding: 0 4px;
|
||
transition: color 0.2s;
|
||
}
|
||
.search-btn:hover {
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.search-box input {
|
||
border: none;
|
||
outline: none;
|
||
background: none;
|
||
width: 100%;
|
||
color: var(--text-color);
|
||
font-size: 1rem;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.clear-search-btn {
|
||
background: none;
|
||
border: none;
|
||
outline: none;
|
||
cursor: pointer;
|
||
color: var(--text-muted);
|
||
font-size: 1.1rem;
|
||
margin-left: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
padding: 0 4px;
|
||
transition: color 0.2s;
|
||
}
|
||
.clear-search-btn:hover {
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.filter-options {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 18px 24px;
|
||
align-items: center;
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* Bottom action bar layout: align scope to bottom-right */
|
||
.filter-options .action-bar {
|
||
display: flex;
|
||
width: 100%;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.filter-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1 1 160px;
|
||
min-width: 140px;
|
||
max-width: 220px;
|
||
}
|
||
|
||
/* --- Popover UI for Filter / Sort / Data --- */
|
||
.filter-sort-container {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
/* Generic popover container (hidden by default) */
|
||
.popover {
|
||
position: absolute;
|
||
top: calc(100% + 8px);
|
||
left: 0;
|
||
display: none;
|
||
background-color: var(--card-bg);
|
||
color: var(--text-color);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--border-radius);
|
||
box-shadow: var(--shadow);
|
||
padding: 12px;
|
||
z-index: 1000;
|
||
min-width: 220px;
|
||
}
|
||
|
||
.popover.active {
|
||
display: block;
|
||
}
|
||
|
||
/* List styling inside Sort/Data menus */
|
||
.sort-options {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.sort-options li {
|
||
padding: 8px 10px;
|
||
cursor: pointer;
|
||
border-radius: var(--border-radius);
|
||
transition: var(--transition);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.sort-options li:hover {
|
||
background-color: var(--light-gray);
|
||
}
|
||
|
||
.sort-options li.active {
|
||
background-color: rgba(var(--primary-rgb), 0.12);
|
||
color: var(--primary-dark);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Small active filter indicator next to Filter button */
|
||
.indicator {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--secondary-color);
|
||
margin-left: 6px;
|
||
display: inline-block;
|
||
}
|
||
|
||
/* Ensure Data menu positions relative to its trigger */
|
||
.data-dropdown {
|
||
position: relative;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.popover {
|
||
left: 0;
|
||
right: 0;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
/* --- Unify action buttons inside filter-controls (Filter / Sort / Data / Tags) --- */
|
||
.filter-controls .action-btn {
|
||
width: auto;
|
||
height: 36px;
|
||
padding: 6px 10px;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--border-radius);
|
||
background-color: var(--bg-color);
|
||
color: var(--text-color);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.filter-controls .action-btn i {
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.filter-controls .action-btn:hover {
|
||
background-color: var(--light-gray);
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
/* Make the Tags button match the same chip style within filter-controls */
|
||
.filter-controls #globalManageTagsBtn {
|
||
background-color: var(--bg-color);
|
||
color: var(--text-color);
|
||
border: 1px solid var(--border-color);
|
||
height: 36px;
|
||
padding: 6px 10px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.filter-controls #globalManageTagsBtn:hover {
|
||
background-color: var(--light-gray);
|
||
color: var(--primary-color);
|
||
transform: none; /* prevent hover shrink/lift inherited from .export-btn */
|
||
}
|
||
|
||
.filter-controls #globalManageTagsBtn i {
|
||
font-size: 0.95rem; /* match other action buttons */
|
||
}
|
||
|
||
/* --- Modernized actions inside filter popover --- */
|
||
.popover-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
justify-content: flex-end;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.popover .btn {
|
||
padding: 8px 14px;
|
||
font-size: 0.92rem;
|
||
border-radius: 10px;
|
||
width: auto;
|
||
}
|
||
|
||
.popover .btn-secondary {
|
||
background: transparent;
|
||
color: var(--text-color);
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
|
||
.popover .btn-secondary:hover {
|
||
background-color: var(--light-gray);
|
||
}
|
||
|
||
.popover .btn-primary {
|
||
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
|
||
box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.25);
|
||
}
|
||
|
||
.popover .btn-primary:hover {
|
||
filter: brightness(1.02);
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.filter-options {
|
||
gap: 12px 8px;
|
||
}
|
||
.filter-group {
|
||
min-width: 120px;
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.search-container {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.filter-sort-container {
|
||
width: 100%;
|
||
flex-wrap: wrap;
|
||
}
|
||
/* Ensure secondary actions (Data, Tags, View, Scope) wrap nicely on tablets/phones */
|
||
.search-container .secondary-actions {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
.filter-sort-container .action-btn,
|
||
.data-dropdown > .action-btn,
|
||
#globalManageTagsBtn {
|
||
width: 100%;
|
||
}
|
||
.search-box {
|
||
min-width: 0;
|
||
max-width: none;
|
||
width: 100%;
|
||
}
|
||
.filter-options {
|
||
flex-direction: column;
|
||
gap: 10px 0;
|
||
}
|
||
.filter-group {
|
||
width: 100%;
|
||
min-width: 0;
|
||
max-width: none;
|
||
}
|
||
}
|
||
|
||
/* Tablet-only override: keep Data, Tags, View, Scope inline (600px–768px) */
|
||
@media (min-width: 600px) and (max-width: 768px) {
|
||
.search-container .secondary-actions {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
gap: 8px;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
|
||
.filter-sort-container .action-btn,
|
||
.data-dropdown > .action-btn,
|
||
#globalManageTagsBtn,
|
||
.search-container .export-btn,
|
||
.search-container .import-btn {
|
||
width: auto;
|
||
min-width: 0;
|
||
flex: 0 0 auto;
|
||
}
|
||
}
|
||
|
||
/* Desktop layout: keep only Search + Filter + Sort on first row; move others to second row */
|
||
@media (min-width: 769px) {
|
||
.filter-controls .search-container { flex-wrap: wrap; }
|
||
/* First group: search box and filter/sort */
|
||
.filter-controls .search-box { flex: 1 1 0; min-width: 320px; max-width: none; }
|
||
.filter-controls .filter-sort-container { flex: 0 0 auto; min-width: 0; }
|
||
/* Second group container (Data, Tags, View, Scope) should break to new line and span full width */
|
||
.filter-controls .search-container .secondary-actions {
|
||
flex: 0 0 100%;
|
||
width: 100%;
|
||
display: flex;
|
||
gap: 8px;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.search-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.search-container .search-box {
|
||
flex: 1 1 220px;
|
||
}
|
||
|
||
.search-container .export-btn {
|
||
margin-top: 0;
|
||
align-self: center;
|
||
height: 42px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Style for the global Manage Tags button to match Export/Import */
|
||
#globalManageTagsBtn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
padding: 10px 15px;
|
||
border-radius: var(--border-radius);
|
||
border: none;
|
||
background-color: var(--secondary-color);
|
||
color: white;
|
||
font-size: 0.95rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
height: 40px;
|
||
align-self: center;
|
||
margin-top: 0;
|
||
min-width: 120px;
|
||
max-width: none;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
#globalManageTagsBtn:hover {
|
||
background-color: #27ae60;
|
||
transform: none; /* override any class-based transforms */
|
||
}
|
||
|
||
#globalManageTagsBtn i {
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* Override any conflicting search box styles */
|
||
.filter-controls .search-box {
|
||
position: relative;
|
||
margin-bottom: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
/* Keep search width consistent regardless of Scope dropdown visibility */
|
||
flex: 1 1 0;
|
||
max-width: none;
|
||
}
|
||
|
||
.filter-controls .search-box i {
|
||
position: static;
|
||
left: auto;
|
||
top: auto;
|
||
transform: none;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 10px;
|
||
min-width: 20px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.filter-controls .search-box input {
|
||
border: none;
|
||
outline: none;
|
||
background: none;
|
||
width: 100%;
|
||
}
|
||
|
||
/* Responsive: Make search/btns stack on mobile */
|
||
@media (max-width: 768px) {
|
||
.search-container {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 10px;
|
||
}
|
||
#globalManageTagsBtn, .search-container .export-btn, .search-container .import-btn {
|
||
width: 100%;
|
||
min-width: 0;
|
||
max-width: none;
|
||
}
|
||
}
|
||
|
||
/* Extra-small mobile adjustments for 425px, 375px, 320px */
|
||
@media (max-width: 425px) {
|
||
.filter-controls .action-btn { height: 38px; padding: 6px 8px; }
|
||
.filter-sort-container { gap: 8px; }
|
||
.panel-header-actions { width: 100%; justify-content: space-between; }
|
||
}
|
||
|
||
@media (max-width: 375px) {
|
||
.filter-controls .action-btn span { display: none; }
|
||
.filter-controls .action-btn { gap: 4px; }
|
||
#globalManageTagsBtn { min-width: 0; width: 100%; }
|
||
}
|
||
|
||
@media (max-width: 320px) {
|
||
.filter-sort-container { gap: 6px; }
|
||
.filter-controls .action-btn i { font-size: 0.9rem; }
|
||
.search-box { height: 40px; }
|
||
.search-btn, .clear-search-btn { font-size: 1rem; }
|
||
}
|
||
|
||
.filter-options {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
align-items: center;
|
||
}
|
||
|
||
.filter-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
min-width: 150px;
|
||
}
|
||
|
||
.filter-label {
|
||
font-size: 0.85rem;
|
||
margin-bottom: 5px;
|
||
color: var(--dark-gray);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.filter-select {
|
||
padding: 8px 10px;
|
||
border-radius: var(--border-radius);
|
||
border: 1px solid var(--border-color);
|
||
background-color: var(--card-bg);
|
||
color: var(--text-color);
|
||
font-size: 0.9rem;
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
appearance: none;
|
||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||
background-repeat: no-repeat;
|
||
background-position: right 10px center;
|
||
background-size: 1em;
|
||
padding-right: 30px;
|
||
}
|
||
|
||
.filter-select:focus {
|
||
outline: none;
|
||
border-color: var(--primary-color);
|
||
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
|
||
}
|
||
|
||
.export-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
padding: 10px 15px;
|
||
border-radius: var(--border-radius);
|
||
border: none;
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
font-size: 0.95rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
height: 40px;
|
||
align-self: flex-end;
|
||
margin-top: auto;
|
||
}
|
||
|
||
.export-btn:hover {
|
||
background-color: var(--primary-dark);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.export-btn i {
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* Responsive filter controls */
|
||
@media (max-width: 768px) {
|
||
.filter-options {
|
||
flex-direction: column;
|
||
width: 100%;
|
||
gap: 15px;
|
||
}
|
||
|
||
.filter-group {
|
||
width: 100%;
|
||
}
|
||
|
||
.filter-select, .export-btn {
|
||
width: 100%;
|
||
}
|
||
|
||
.search-container {
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
|
||
.search-container .search-box {
|
||
width: calc(100% - 110px);
|
||
min-width: 200px;
|
||
}
|
||
|
||
.search-container .export-btn {
|
||
height: 42px;
|
||
width: 100px;
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.search-container {
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.search-container .search-box {
|
||
width: 100%;
|
||
}
|
||
|
||
.search-container .export-btn {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.export-btn {
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
|
||
/* View Switcher */
|
||
.view-switcher {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-grow: 1; /* Allow this to take available space */
|
||
min-width: 120px; /* Minimum width for the 3 buttons */
|
||
}
|
||
|
||
.view-buttons {
|
||
display: flex;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--border-radius);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.view-btn {
|
||
background-color: var(--bg-color);
|
||
border: none;
|
||
color: var(--dark-gray);
|
||
padding: 8px 12px;
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.view-btn:not(:last-child) {
|
||
border-right: 1px solid var(--border-color);
|
||
}
|
||
|
||
.view-btn:hover {
|
||
background-color: var(--light-gray);
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.view-btn.active {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
}
|
||
|
||
/* Admin View Switcher - reuse the same styling pattern */
|
||
.admin-view-switcher {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-grow: 1;
|
||
min-width: 120px;
|
||
margin-left: 15px; /* Add some spacing from the regular view switcher */
|
||
}
|
||
|
||
.admin-view-switcher .view-buttons {
|
||
display: flex;
|
||
border: 1px solid var(--primary-color);
|
||
border-radius: var(--border-radius);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.admin-view-switcher .view-btn {
|
||
background-color: var(--bg-color);
|
||
border: none;
|
||
color: var(--primary-color);
|
||
padding: 8px 12px;
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.admin-view-switcher .view-btn:not(:last-child) {
|
||
border-right: 1px solid var(--primary-color);
|
||
}
|
||
|
||
.admin-view-switcher .view-btn:hover {
|
||
background-color: rgba(var(--primary-rgb), 0.1);
|
||
color: var(--primary-dark);
|
||
}
|
||
|
||
.admin-view-switcher .view-btn.active {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
}
|
||
|
||
/* View-only placeholder for non-owned warranties in global view */
|
||
.action-btn-placeholder {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 32px;
|
||
height: 32px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
background-color: transparent;
|
||
color: #666;
|
||
cursor: default;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.action-btn-placeholder:hover {
|
||
background-color: rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
[data-theme="dark"] .action-btn-placeholder {
|
||
border-color: #555;
|
||
color: #999;
|
||
}
|
||
|
||
[data-theme="dark"] .action-btn-placeholder:hover {
|
||
background-color: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
/* User info styling for global view */
|
||
.warranty-info div:has(strong:contains("Owner")) {
|
||
background-color: rgba(var(--primary-rgb), 0.1);
|
||
border-left: 3px solid var(--primary-color);
|
||
padding: 4px 8px;
|
||
margin-bottom: 8px;
|
||
border-radius: 4px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Alternative approach for better browser support */
|
||
.warranty-info div strong:contains("Owner") {
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.warranty-info div:first-child:has(strong) {
|
||
background-color: rgba(var(--primary-rgb), 0.1);
|
||
border-left: 3px solid var(--primary-color);
|
||
padding: 4px 8px;
|
||
margin-bottom: 8px;
|
||
border-radius: 4px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Grid View (Default) */
|
||
.warranties-list.grid-view {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
align-items: stretch; /* Explicitly set to ensure equal heights */
|
||
}
|
||
|
||
/* Grid responsiveness: ensure cards fit smaller screens */
|
||
@media (max-width: 768px) {
|
||
.warranties-list.grid-view {
|
||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||
gap: 16px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.warranties-list.grid-view {
|
||
grid-template-columns: 1fr; /* Single column on phones */
|
||
gap: 12px;
|
||
}
|
||
}
|
||
|
||
/* Make cards in grid view dynamic height based on content */
|
||
.grid-view .warranty-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: auto; /* Allow height to be determined by content */
|
||
}
|
||
|
||
/* Ensure content is properly structured */
|
||
.warranty-content {
|
||
display: flex;
|
||
padding: 15px;
|
||
flex: 0 1 auto; /* Don't force flex grow, allow natural sizing */
|
||
}
|
||
|
||
/* Keep document links at the bottom */
|
||
.document-links-row {
|
||
display: flex;
|
||
gap: 10px;
|
||
padding: 10px 15px;
|
||
background-color: rgba(0, 0, 0, 0.03);
|
||
border-top: 1px solid var(--border-color);
|
||
}
|
||
|
||
/* List View */
|
||
.warranties-list.list-view {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.list-view .warranty-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.list-view .warranty-content {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.list-view .warranty-info {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 15px;
|
||
}
|
||
|
||
.list-view .warranty-info > div {
|
||
margin-bottom: 0;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.list-view .warranty-card .tags-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 12px 15px 12px;
|
||
margin-top: 0;
|
||
border-top: 1px solid var(--border-color);
|
||
width: 100%;
|
||
}
|
||
|
||
/* For list view, ensure tags are clearly visible */
|
||
.list-view .tag {
|
||
margin-top: 4px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
/* Table View */
|
||
.warranties-list.table-view {
|
||
display: table;
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 20px;
|
||
table-layout: fixed; /* Add fixed table layout for better column control */
|
||
}
|
||
|
||
.table-view .warranty-card {
|
||
display: table-row;
|
||
border: none;
|
||
border-bottom: 1px solid var(--border-color);
|
||
height: auto; /* Explicitly allow row height to adjust to content */
|
||
}
|
||
|
||
.table-view .warranty-card.expired {
|
||
border-left: none;
|
||
background-color: rgba(231, 76, 60, 0.05);
|
||
}
|
||
|
||
.table-view .warranty-card.expiring-soon {
|
||
border-left: none;
|
||
background-color: rgba(241, 196, 15, 0.05);
|
||
}
|
||
|
||
.table-view .warranty-card.active {
|
||
border-left: none;
|
||
background-color: rgba(46, 204, 113, 0.05);
|
||
}
|
||
|
||
/* Ensure proper display of content in table view */
|
||
.table-view .product-name-header {
|
||
display: table-cell;
|
||
vertical-align: middle;
|
||
padding: 12px 15px;
|
||
width: 25%; /* Increase width for product names */
|
||
max-width: none; /* Remove max-width constraint */
|
||
white-space: normal; /* Allow text to wrap */
|
||
word-break: break-word; /* Break long words if needed */
|
||
background-color: transparent; /* Remove background color in table view */
|
||
border-bottom: none;
|
||
color: inherit; /* Use default text color instead of white */
|
||
}
|
||
|
||
.table-view .warranty-content {
|
||
display: table-cell;
|
||
vertical-align: middle;
|
||
padding: 12px 15px;
|
||
width: 30%; /* Set width for warranty details */
|
||
}
|
||
|
||
.table-view .warranty-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.table-view .warranty-header,
|
||
.table-view .warranty-details {
|
||
display: table-cell;
|
||
vertical-align: middle;
|
||
padding: 12px 15px;
|
||
}
|
||
|
||
.table-view .warranty-header {
|
||
width: 200px;
|
||
border-bottom: none;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.table-view .warranty-status {
|
||
margin: 0;
|
||
}
|
||
|
||
/* Ensure the status row is properly displayed in table view */
|
||
.table-view .warranty-status-row {
|
||
display: table-cell;
|
||
vertical-align: middle;
|
||
padding: 12px 15px;
|
||
border-top: none;
|
||
text-align: center;
|
||
width: 15%; /* Adjust width for status column */
|
||
}
|
||
|
||
.table-view .document-links-row {
|
||
display: table-cell; /* Restore table-cell display */
|
||
vertical-align: middle; /* Restore vertical alignment */
|
||
padding: 12px 15px;
|
||
width: 20%; /* Set width for document links */
|
||
}
|
||
|
||
/* ADD: New rule for inner container */
|
||
.document-links-inner-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center; /* Vertically center the group */
|
||
align-items: center; /* Horizontally center the group */
|
||
height: 100%; /* Fill cell height */
|
||
gap: 5px; /* Space between links */
|
||
}
|
||
|
||
/* Specific styling for links in table view */
|
||
.table-view .document-links-row a {
|
||
white-space: nowrap !important;
|
||
overflow: hidden !important; /* Restore overflow hidden */
|
||
text-overflow: ellipsis !important; /* Restore text overflow */
|
||
max-width: 90% !important; /* Slightly narrower to ensure centering works */
|
||
font-size: 0.9rem !important; /* Slightly smaller font size */
|
||
padding: 4px 8px !important; /* Smaller padding */
|
||
text-align: left !important; /* Keep text left-aligned within the link */
|
||
width: auto; /* Allow natural width */
|
||
}
|
||
|
||
/* === MODERN TAG MANAGEMENT MODAL STYLES === */
|
||
#tagManagementModal .modal-body {
|
||
padding: 20px;
|
||
}
|
||
|
||
.tag-management-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
/* Make wide tables usable on small screens */
|
||
.table-responsive {
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.tag-management-table th,
|
||
.tag-management-table td {
|
||
padding: 8px 10px;
|
||
white-space: nowrap; /* avoid awkward wrapping; let container scroll */
|
||
}
|
||
}
|
||
|
||
.tag-management-table th, .tag-management-table td {
|
||
padding: 12px 15px;
|
||
text-align: left;
|
||
border-bottom: 1px solid var(--border-color);
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.tag-management-table th {
|
||
font-weight: 600;
|
||
color: var(--text-color);
|
||
font-size: 0.9rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.tag-management-table .tag-color-header {
|
||
width: 80px;
|
||
}
|
||
|
||
.tag-management-table .tag-actions-header {
|
||
width: 120px;
|
||
text-align: center;
|
||
}
|
||
|
||
.existing-tag-row:hover {
|
||
background-color: rgba(0, 0, 0, 0.03);
|
||
}
|
||
|
||
.tag-color-swatch-container {
|
||
position: relative;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
|
||
.tag-color-swatch {
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 50%;
|
||
border: 2px solid var(--border-color);
|
||
cursor: pointer;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.tag-color-swatch:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.tag-color-input-hidden {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
opacity: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.tag-name-display {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.tag-name-input {
|
||
display: none;
|
||
width: 100%;
|
||
}
|
||
|
||
.tag-actions {
|
||
text-align: center;
|
||
}
|
||
|
||
.tag-actions .btn {
|
||
padding: 6px 10px;
|
||
}
|
||
|
||
.tag-actions .edit-actions {
|
||
display: none;
|
||
gap: 8px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.no-tags {
|
||
text-align: center;
|
||
padding: 20px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.table-view .document-links-row a:last-child {
|
||
/* margin-bottom: 0 !important; */ /* Not needed */
|
||
}
|
||
|
||
.table-view .serial-numbers {
|
||
margin: 0;
|
||
}
|
||
|
||
/* Table Headers */
|
||
.table-view-header {
|
||
display: none;
|
||
}
|
||
|
||
.table-view-header.visible {
|
||
display: table-header-group;
|
||
}
|
||
|
||
.table-view-header th {
|
||
text-align: left;
|
||
padding: 12px 15px;
|
||
background-color: var(--light-gray);
|
||
font-weight: 600;
|
||
color: var(--text-color);
|
||
border-bottom: 2px solid var(--border-color);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Set specific widths for table headers to match cells */
|
||
.table-view-header th:nth-child(1) {
|
||
width: 25%; /* Product column */
|
||
}
|
||
|
||
.table-view-header th:nth-child(2),
|
||
.table-view-header th:nth-child(3) {
|
||
width: 15%; /* Purchase date and expiration columns */
|
||
}
|
||
|
||
.table-view-header th:nth-child(4) {
|
||
width: 15%; /* Status column */
|
||
text-align: center; /* Center align status header */
|
||
}
|
||
|
||
.table-view-header th:nth-child(5) {
|
||
width: 20%; /* Actions column */
|
||
text-align: center; /* Center align actions header */
|
||
}
|
||
|
||
/* Responsive adjustments */
|
||
@media (max-width: 768px) {
|
||
.view-switcher {
|
||
width: 100%;
|
||
}
|
||
|
||
.admin-view-switcher {
|
||
margin-left: 0;
|
||
margin-top: 10px;
|
||
width: 100%;
|
||
}
|
||
|
||
/* Convert table view to card-like view on mobile */
|
||
.warranties-list.table-view {
|
||
display: block;
|
||
}
|
||
|
||
.table-view .warranty-card {
|
||
display: block;
|
||
margin-bottom: 20px;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.table-view-header {
|
||
display: none !important; /* Hide table headers on mobile */
|
||
}
|
||
|
||
.table-view .product-name-header {
|
||
display: flex;
|
||
width: 100%;
|
||
padding: 15px;
|
||
background-color: var(--secondary-color);
|
||
color: white;
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
.table-view .warranty-card.expired .product-name-header {
|
||
background-color: var(--danger-color);
|
||
}
|
||
|
||
.table-view .warranty-card.expiring-soon .product-name-header {
|
||
background-color: var(--warning-color);
|
||
}
|
||
|
||
.table-view .product-name-header .warranty-title {
|
||
color: white;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.table-view .warranty-content,
|
||
.table-view .warranty-status-row,
|
||
.table-view .document-links-row {
|
||
display: block;
|
||
width: 100%;
|
||
padding: 12px 15px;
|
||
}
|
||
|
||
/* Tighten paddings at smaller phones */
|
||
@media (max-width: 425px) {
|
||
.table-view .warranty-content,
|
||
.table-view .warranty-status-row,
|
||
.table-view .document-links-row { padding: 10px 12px; }
|
||
}
|
||
|
||
@media (max-width: 375px) {
|
||
.table-view .warranty-content,
|
||
.table-view .warranty-status-row,
|
||
.table-view .document-links-row { padding: 8px 10px; }
|
||
}
|
||
|
||
@media (max-width: 320px) {
|
||
.table-view .warranty-content,
|
||
.table-view .warranty-status-row,
|
||
.table-view .document-links-row { padding: 6px 8px; }
|
||
}
|
||
|
||
.table-view .warranty-status-row {
|
||
text-align: center;
|
||
justify-content: center;
|
||
padding-left: 20px;
|
||
padding-right: 20px;
|
||
}
|
||
|
||
.table-view .document-links-row {
|
||
display: block; /* Make it block for mobile card layout */
|
||
gap: 10px;
|
||
border-top: 1px solid var(--border-color);
|
||
background-color: rgba(0, 0, 0, 0.03);
|
||
padding: 12px 15px;
|
||
width: 100%;
|
||
}
|
||
|
||
/* Reset the block display for links on mobile */
|
||
/* This might need adjustment if the parent is no longer flex */
|
||
.table-view .document-links-row a {
|
||
display: inline-flex !important;
|
||
margin-bottom: 5px !important; /* Add back some margin */
|
||
max-width: none !important;
|
||
flex: 0 1 auto !important;
|
||
}
|
||
}
|
||
|
||
/* Price input styling */
|
||
.price-input-wrapper {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* Apply absolute positioning ONLY inside input wrappers */
|
||
.price-input-wrapper .currency-symbol {
|
||
position: absolute;
|
||
left: 12px;
|
||
color: var(--dark-gray);
|
||
font-weight: 500;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* Currency symbol on the right side of input */
|
||
.price-input-wrapper.currency-right .currency-symbol {
|
||
left: auto;
|
||
right: 12px;
|
||
pointer-events: none; /* Prevent interference with input */
|
||
}
|
||
|
||
/* Default style for currency symbols (e.g., on cards) */
|
||
.currency-symbol {
|
||
display: inline; /* Ensure it stays inline */
|
||
margin-right: 0.2em; /* Add a small space after the symbol */
|
||
/* Remove absolute positioning properties if they were here */
|
||
}
|
||
|
||
/* Currency symbol on the right side of numbers */
|
||
.currency-symbol.currency-right {
|
||
margin-right: 0;
|
||
margin-left: 0.2em; /* Add space before the symbol when on the right */
|
||
}
|
||
|
||
.price-input-wrapper .form-control {
|
||
padding-left: 25px;
|
||
}
|
||
|
||
/* Adjust padding for right-positioned currency symbol */
|
||
.price-input-wrapper.currency-right .form-control {
|
||
padding-left: 12px;
|
||
padding-right: 25px;
|
||
}
|
||
|
||
/* Product name header at the top of cards */
|
||
.product-name-header {
|
||
width: 100%;
|
||
padding: 15px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
text-align: left;
|
||
color: white;
|
||
transition: background-color 0.3s ease;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
@media (max-width: 375px) {
|
||
.product-name-header { padding: 12px; }
|
||
}
|
||
|
||
@media (max-width: 320px) {
|
||
.product-name-header { padding: 10px; }
|
||
}
|
||
|
||
/* Default color for active warranties */
|
||
.warranty-card .product-name-header {
|
||
background-color: var(--secondary-color);
|
||
}
|
||
|
||
/* Color for expiring soon warranties */
|
||
.warranty-card.expiring-soon .product-name-header {
|
||
background-color: var(--warning-color);
|
||
}
|
||
|
||
/* Color for expired warranties */
|
||
.warranty-card.expired .product-name-header {
|
||
background-color: var(--danger-color);
|
||
}
|
||
|
||
/* Neutralize top header bar in archived view (all layouts) */
|
||
.archived-view .warranty-card .product-name-header,
|
||
.warranty-card.archived .product-name-header {
|
||
background-color: var(--medium-gray) !important;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
/* Ensure table view also stays neutral in archived view */
|
||
.archived-view.table-view .warranty-card .product-name-header,
|
||
.archived-view .table-view .warranty-card .product-name-header,
|
||
.table-view .warranty-card.archived .product-name-header {
|
||
background-color: rgba(128, 128, 128, 0.12) !important;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
/* Ensure heading text and action icons are readable in archived view */
|
||
.archived-view .warranty-card .product-name-header .warranty-title,
|
||
.warranty-card.archived .product-name-header .warranty-title {
|
||
color: var(--text-color) !important;
|
||
}
|
||
|
||
.archived-view .warranty-card .warranty-actions .action-btn,
|
||
.warranty-card.archived .warranty-actions .action-btn {
|
||
color: var(--text-color) !important;
|
||
}
|
||
|
||
.archived-view .warranty-card .warranty-actions .action-btn:hover,
|
||
.warranty-card.archived .warranty-actions .action-btn:hover {
|
||
background-color: rgba(0, 0, 0, 0.08);
|
||
color: var(--text-color) !important;
|
||
}
|
||
|
||
:root[data-theme="dark"] .archived-view .warranty-card .warranty-actions .action-btn:hover,
|
||
:root[data-theme="dark"] .warranty-card.archived .warranty-actions .action-btn:hover {
|
||
background-color: rgba(255, 255, 255, 0.12);
|
||
}
|
||
|
||
.product-name-header .warranty-title {
|
||
margin: 0;
|
||
font-size: 1.2rem;
|
||
font-weight: 600;
|
||
color: white;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
max-width: calc(100% - 80px); /* Make room for the action buttons */
|
||
flex: 1;
|
||
text-align: left;
|
||
padding-left: 5px;
|
||
}
|
||
|
||
.product-name-header .warranty-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.warranty-actions .action-btn {
|
||
background: none;
|
||
border: none;
|
||
font-size: 1rem;
|
||
cursor: pointer;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.warranty-actions .action-btn:hover {
|
||
background-color: rgba(255, 255, 255, 0.2);
|
||
color: white;
|
||
}
|
||
|
||
.warranty-content {
|
||
display: flex;
|
||
padding: 15px;
|
||
flex: 1;
|
||
position: relative;
|
||
}
|
||
|
||
.warranty-info {
|
||
flex: 0 1 auto; /* Allow natural sizing */
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.warranty-info > div {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.warranty-info > div:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.warranty-info > div i {
|
||
width: 20px;
|
||
margin-right: 8px;
|
||
color: #666;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
}
|
||
|
||
.warranty-info > div span {
|
||
margin-left: 5px;
|
||
font-weight: 500;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
:root[data-theme="dark"] .warranty-info > div i {
|
||
color: #999;
|
||
}
|
||
|
||
/* Serial numbers section */
|
||
.serial-numbers {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.serial-numbers strong {
|
||
margin-right: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.serial-numbers span {
|
||
margin-left: 5px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.serial-numbers ul {
|
||
margin: 5px 0 0 0;
|
||
padding-left: 20px;
|
||
flex: 1;
|
||
}
|
||
|
||
.serial-numbers li {
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
/* Update list view styles */
|
||
.list-view .warranty-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.list-view .warranty-content {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.list-view .warranty-info {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 15px;
|
||
}
|
||
|
||
.list-view .warranty-info > div {
|
||
margin-bottom: 0;
|
||
margin-right: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.list-view .warranty-info > div i {
|
||
width: auto;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.list-view .warranty-info > div span {
|
||
margin-left: 5px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Document links row */
|
||
.document-links-row {
|
||
display: flex;
|
||
gap: 10px;
|
||
padding: 10px 15px;
|
||
background-color: rgba(0, 0, 0, 0.03);
|
||
border-top: 1px solid var(--border-color);
|
||
}
|
||
|
||
/* Responsive adjustments */
|
||
@media (max-width: 768px) {
|
||
.product-name-header {
|
||
padding: 12px 15px;
|
||
}
|
||
|
||
.product-name-header .warranty-title {
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.warranty-content {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.list-view .warranty-info {
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
}
|
||
|
||
/* Additional mobile list view optimizations */
|
||
.warranties-list.list-view {
|
||
gap: 10px !important;
|
||
margin-top: 15px !important;
|
||
}
|
||
|
||
.list-view .warranty-card {
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
|
||
border: 1px solid var(--border-color) !important;
|
||
}
|
||
|
||
.list-view .warranty-card:hover {
|
||
transform: none !important; /* Disable hover transform on mobile */
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
|
||
}
|
||
}
|
||
|
||
/* GitHub link styling */
|
||
.settings-link.github-link {
|
||
background-color: #24292e; /* GitHub's dark color */
|
||
color: white !important;
|
||
border-radius: 4px;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8px 12px;
|
||
margin: 0;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.settings-link.github-link:hover {
|
||
background-color: #2b3137; /* Slightly lighter on hover */
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.settings-link.github-link i {
|
||
font-size: 1.2em;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
/* Warranty status row styling */
|
||
.warranty-status-row {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 8px 15px;
|
||
font-weight: 600;
|
||
border-top: 1px solid var(--border-color);
|
||
}
|
||
|
||
.warranty-status-row.status-active {
|
||
background-color: rgba(40, 167, 69, 0.1);
|
||
color: var(--success-color);
|
||
}
|
||
|
||
.warranty-status-row.status-expiring {
|
||
background-color: rgba(255, 193, 7, 0.1);
|
||
color: var(--warning-color);
|
||
}
|
||
|
||
.warranty-status-row.status-expired {
|
||
background-color: rgba(220, 53, 69, 0.1);
|
||
color: var(--danger-color);
|
||
}
|
||
|
||
.warranty-status-row.status-archived {
|
||
background-color: rgba(128, 128, 128, 0.12);
|
||
color: var(--dark-gray);
|
||
}
|
||
|
||
/* Status badge for Archived on status page table */
|
||
.status-archived {
|
||
background-color: rgba(128, 128, 128, 0.12);
|
||
color: var(--dark-gray);
|
||
}
|
||
|
||
/* List view status row styling */
|
||
.list-view .warranty-status-row {
|
||
text-align: center;
|
||
justify-content: center;
|
||
padding-left: 20px;
|
||
padding-right: 20px;
|
||
}
|
||
|
||
.table-view .product-name-header .warranty-title {
|
||
color: var(--text-color); /* Use default text color */
|
||
white-space: normal; /* Allow text to wrap */
|
||
overflow: visible; /* Show overflow text */
|
||
text-overflow: clip; /* Don't use ellipsis */
|
||
max-width: none; /* Remove max-width constraint */
|
||
font-size: 1rem; /* Slightly smaller font size for table view */
|
||
}
|
||
|
||
.table-view .product-name-header .warranty-actions {
|
||
position: static; /* Reset position */
|
||
margin-left: auto; /* Push to the right */
|
||
}
|
||
|
||
.table-view .warranty-actions .action-btn {
|
||
color: var(--text-color); /* Use default text color */
|
||
opacity: 0.7;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
|
||
.table-view .warranty-actions .action-btn:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Improve warranty info display in table view */
|
||
.table-view .warranty-info > div {
|
||
margin-bottom: 4px;
|
||
font-size: 0.9rem;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.table-view .warranty-info > div:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.table-view .warranty-info > div i {
|
||
width: auto;
|
||
margin-right: 5px;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.table-view .warranty-info > div span {
|
||
margin-left: 5px;
|
||
}
|
||
|
||
/* Improve serial numbers display in table view */
|
||
.table-view .serial-numbers {
|
||
margin-top: 0;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.table-view .serial-numbers ul {
|
||
padding-left: 20px;
|
||
margin: 5px 0 0;
|
||
}
|
||
|
||
.table-view .serial-numbers li {
|
||
font-size: 0.85rem;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
/* Edit Warranty Tabs */
|
||
.edit-tabs-nav {
|
||
display: flex;
|
||
border-bottom: 1px solid var(--border-color);
|
||
margin-bottom: 1.5rem;
|
||
overflow-x: auto;
|
||
padding-bottom: 1px;
|
||
}
|
||
|
||
.edit-tab-btn {
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
padding: 0.75rem 1rem;
|
||
position: relative;
|
||
color: var(--text-muted);
|
||
white-space: nowrap;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.edit-tab-btn:hover {
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.edit-tab-btn.active {
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.edit-tab-btn.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -1px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 2px;
|
||
background-color: var(--primary-color);
|
||
}
|
||
|
||
.edit-tab-btn i {
|
||
margin-right: 0.5rem;
|
||
}
|
||
|
||
.edit-tab-content {
|
||
display: none;
|
||
}
|
||
|
||
.edit-tab-content.active {
|
||
display: block;
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
/* Completed Tab Indicator for Edit Form - simplified */
|
||
.edit-tab-btn.completed {
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
/* Make the edit modal wider to accommodate the tabs better */
|
||
#editModal .modal {
|
||
max-width: 700px;
|
||
background-color: var(--modal-background, #ffffff);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.document-links-row .notes-link,
|
||
.document-links-row .invoice-link,
|
||
.document-links-row .manual-link,
|
||
.document-links-row .product-link,
|
||
.document-links-row .other-document-link {
|
||
margin-right: 5px !important;
|
||
margin-left: 0 !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.document-links-row {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
align-items: center !important;
|
||
gap: 5px !important;
|
||
}
|
||
.invoice-link, .manual-link, .product-link, .notes-link, .other-document-link {
|
||
width: auto !important;
|
||
justify-content: center !important;
|
||
}
|
||
}
|
||
|
||
.edit-tab-content {
|
||
padding: 1rem 0;
|
||
}
|
||
|
||
.edit-tabs-nav {
|
||
position: sticky;
|
||
top: 0;
|
||
background-color: var(--modal-background, #ffffff);
|
||
z-index: 5;
|
||
padding-top: 1rem;
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
/* Style for validation errors in the edit form */
|
||
#editWarrantyForm input.invalid {
|
||
border-color: var(--danger-color);
|
||
background-color: rgba(255, 0, 0, 0.03);
|
||
}
|
||
|
||
#editWarrantyForm input.invalid:focus {
|
||
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
|
||
}
|
||
|
||
/* Add animation for tab switching */
|
||
@keyframes editTabFade {
|
||
from { opacity: 0; transform: translateY(5px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.edit-tab-content.active {
|
||
animation: editTabFade 0.3s ease;
|
||
}
|
||
|
||
/* Edit modal dark mode styles */
|
||
:root[data-theme="dark"] #editModal .modal {
|
||
background-color: var(--modal-background);
|
||
}
|
||
|
||
:root[data-theme="dark"] #editModal .modal-header,
|
||
:root[data-theme="dark"] #editModal .modal-body,
|
||
:root[data-theme="dark"] #editModal .modal-footer,
|
||
:root[data-theme="dark"] .edit-tabs-nav {
|
||
background-color: var(--modal-background);
|
||
color: var(--text-color);
|
||
}
|
||
|
||
:root[data-theme="dark"] #editModal .form-control {
|
||
background-color: var(--input-background);
|
||
color: var(--text-color);
|
||
border-color: var(--border-color);
|
||
}
|
||
|
||
:root[data-theme="dark"] #editModal .form-control:focus {
|
||
border-color: var(--primary-color);
|
||
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.25);
|
||
}
|
||
|
||
:root[data-theme="dark"] #editModal label {
|
||
color: var(--text-color);
|
||
}
|
||
|
||
:root[data-theme="dark"] .edit-tab-btn {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
:root[data-theme="dark"] .edit-tab-btn:hover {
|
||
color: var(--text-color);
|
||
}
|
||
|
||
:root[data-theme="dark"] .edit-tab-btn.active {
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
:root[data-theme="dark"] .currency-symbol {
|
||
color: var(--text-color);
|
||
}
|
||
|
||
:root[data-theme="dark"] .file-input-label {
|
||
background-color: var(--input-background);
|
||
color: var(--text-color);
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
|
||
:root[data-theme="dark"] .file-input-label:hover {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
:root[data-theme="dark"] .file-name {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
:root[data-theme="dark"] #currentInvoice,
|
||
:root[data-theme="dark"] #currentManual {
|
||
color: var(--text-color);
|
||
}
|
||
|
||
:root[data-theme="dark"] #currentInvoice a,
|
||
:root[data-theme="dark"] #currentManual a {
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
:root[data-theme="dark"] .serial-number-input {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
:root[data-theme="dark"] .serial-number-input .form-control {
|
||
background-color: var(--input-background);
|
||
color: var(--text-color);
|
||
border-color: var(--border-color);
|
||
}
|
||
|
||
:root[data-theme="dark"] .modal-backdrop {
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
}
|
||
|
||
/* Tags styling in warranty cards */
|
||
.tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 6px 10px;
|
||
border-radius: 16px;
|
||
font-size: 0.85rem;
|
||
font-weight: 500;
|
||
margin-right: 8px;
|
||
margin-bottom: 8px;
|
||
white-space: nowrap;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.tag .remove-tag {
|
||
margin-left: 6px;
|
||
cursor: pointer;
|
||
font-size: 1.1rem;
|
||
line-height: 1;
|
||
opacity: 0.7;
|
||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
background-color: rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.tag .remove-tag:hover {
|
||
opacity: 1;
|
||
transform: scale(1.2);
|
||
background-color: rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
/* Make the remove-tag more prominent in the edit modal */
|
||
#editSelectedTags .tag .remove-tag {
|
||
font-weight: bold;
|
||
background-color: rgba(0, 0, 0, 0.2);
|
||
border-radius: 50%;
|
||
width: 22px;
|
||
height: 22px;
|
||
margin-left: 8px;
|
||
font-size: 1.2rem;
|
||
opacity: 0.8;
|
||
/* Prevent text selection */
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
}
|
||
|
||
#editSelectedTags .tag .remove-tag:hover {
|
||
opacity: 1;
|
||
transform: scale(1.2);
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
/* Use a more obvious pointer cursor */
|
||
#editSelectedTags .tag .remove-tag {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.warranty-card .tags-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-top: 10px;
|
||
padding: 12px 15px 12px;
|
||
border-top: 1px solid var(--border-color);
|
||
}
|
||
|
||
/* Tag styling for grid view */
|
||
.grid-view .warranty-card .tags-row {
|
||
padding: 12px 15px 12px;
|
||
}
|
||
|
||
/* Tag styling for list view */
|
||
.list-view .warranty-card .tags-row {
|
||
padding: 12px 15px 12px;
|
||
}
|
||
|
||
/* Tag styling for table view */
|
||
.table-view .warranty-card .tags-row {
|
||
display: table-cell;
|
||
vertical-align: middle;
|
||
padding: 12px 15px;
|
||
width: 20%;
|
||
border-top: none;
|
||
}
|
||
|
||
/* Add near other form styles */
|
||
.lifetime-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.lifetime-label input[type="checkbox"] {
|
||
width: 18px;
|
||
height: 18px;
|
||
cursor: pointer;
|
||
margin-right: 5px;
|
||
accent-color: var(--primary-color);
|
||
}
|
||
|
||
/* Style for the warranty duration fields container */
|
||
.duration-inputs {
|
||
display: flex;
|
||
gap: 15px; /* Adjust spacing between inputs */
|
||
align-items: flex-start; /* Align items to the top */
|
||
}
|
||
|
||
.duration-inputs > div {
|
||
flex: 1; /* Allow each input group to take equal space */
|
||
display: flex;
|
||
flex-direction: column; /* Stack input and label vertically */
|
||
align-items: center; /* Center items horizontally within their div */
|
||
}
|
||
|
||
.duration-inputs input[type="number"].form-control {
|
||
text-align: center; /* Center the number inside the input */
|
||
margin-bottom: 5px; /* Space between input and label */
|
||
/* Inherits padding, border, etc. from .form-control */
|
||
}
|
||
|
||
.duration-inputs small {
|
||
font-size: 0.85rem;
|
||
color: var(--dark-gray);
|
||
}
|
||
|
||
/* Style for the warranty duration group when hidden (due to lifetime checkbox) */
|
||
#warrantyDurationFields[style*="display: none"],
|
||
#editWarrantyDurationFields[style*="display: none"] {
|
||
opacity: 0.5;
|
||
transition: opacity 0.3s ease;
|
||
/* Optionally add height transition if needed */
|
||
/* max-height: 0; */
|
||
/* overflow: hidden; */
|
||
/* padding-top: 0; */
|
||
/* padding-bottom: 0; */
|
||
/* margin-bottom: 0; */
|
||
}
|
||
|
||
/* Add CSS for the tags cell in table view */
|
||
.table-view .tags-row-cell {
|
||
display: table-cell;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
/* Style the new button */
|
||
.add-warranty-button-container {
|
||
/* grid-column: 1 / -1; /* REMOVED */
|
||
/* text-align: right; /* REMOVED */
|
||
/* margin-bottom: 20px; /* REMOVED */
|
||
/* No longer needs standalone styles here */
|
||
}
|
||
|
||
/* REMOVE this rule if button size is handled by btn-sm */
|
||
/* #showAddWarrantyBtn {
|
||
width: auto;
|
||
padding: 10px 20px;
|
||
} */
|
||
/* REMOVE this rule if icon margin is handled by btn-sm or FontAwesome defaults */
|
||
/* #showAddWarrantyBtn i {
|
||
margin-right: 8px;
|
||
} */
|
||
|
||
/* Forms */
|
||
|
||
/* ADD styles for Panel Header */
|
||
.panel-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 15px;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
|
||
.panel-header h2 {
|
||
margin: 0;
|
||
font-size: 1.4rem;
|
||
color: var(--primary-color);
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.panel-header-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ===== RESPONSIVE ADJUSTMENTS ===== */
|
||
@media (max-width: 768px) {
|
||
header .container {
|
||
flex-wrap: wrap; /* Allow header items to wrap */
|
||
justify-content: center; /* Center items when wrapped */
|
||
gap: 15px; /* Add space between wrapped items */
|
||
padding: 10px 15px !important; /* Adjust padding for smaller screens */
|
||
}
|
||
|
||
header .app-title h1 {
|
||
font-size: 1.8rem !important; /* Slightly reduce title size */
|
||
}
|
||
|
||
header .app-title i {
|
||
font-size: 1.6rem !important; /* Slightly reduce icon size */
|
||
margin-right: 10px !important; /* Slightly reduce icon size */
|
||
}
|
||
|
||
header .nav-links {
|
||
order: 3; /* Push nav links to the bottom row when wrapped */
|
||
width: 100%; /* Make nav links take full width */
|
||
justify-content: center; /* Center nav links */
|
||
margin: 10px 0 0 0 !important; /* Add margin top, remove horizontal margin */
|
||
padding-bottom: 5px; /* Add some padding below nav links */
|
||
}
|
||
|
||
header .auth-buttons,
|
||
header .user-menu,
|
||
header .settings-container {
|
||
margin-left: 0 !important; /* Reset margins */
|
||
margin-right: 0 !important;
|
||
}
|
||
|
||
/* Adjust existing rules within the media query */
|
||
.main-content {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.warranty-notes {
|
||
background: #f8f9fa;
|
||
color: #333;
|
||
border-left: 4px solid var(--primary-color, #007bff);
|
||
padding: 8px 12px;
|
||
margin: 10px 0 0 0;
|
||
font-size: 0.97rem;
|
||
border-radius: 4px;
|
||
white-space: pre-line;
|
||
}
|
||
|
||
/* Custom style for View Notes button to match refined requirements */
|
||
.view-notes-btn {
|
||
display: block;
|
||
width: auto;
|
||
min-width: 120px;
|
||
max-width: 220px;
|
||
margin: 18px auto 0 auto;
|
||
background-color: #8fc98a;
|
||
color: var(--text-color);
|
||
border: 1.5px solid #7bb87a;
|
||
border-radius: 6px;
|
||
font-size: 0.98rem;
|
||
font-family: inherit;
|
||
font-weight: 500;
|
||
padding: 7px 18px;
|
||
box-shadow: none;
|
||
text-align: center;
|
||
transition: background 0.2s, color 0.2s, border 0.2s;
|
||
}
|
||
.view-notes-btn i {
|
||
margin-right: 7px;
|
||
}
|
||
.view-notes-btn:hover, .view-notes-btn:focus {
|
||
background-color: #7bb87a;
|
||
color: var(--text-color);
|
||
border-color: #6fa96a;
|
||
outline: none;
|
||
}
|
||
|
||
.notes-link {
|
||
display: inline-flex;
|
||
align-items: center !important;
|
||
color: var(--primary-color) !important;
|
||
text-decoration: none !important;
|
||
font-weight: 500 !important;
|
||
padding: 5px 10px !important;
|
||
background-color: var(--light-gray) !important;
|
||
border-radius: var(--border-radius) !important;
|
||
transition: var(--transition) !important;
|
||
border: none !important;
|
||
white-space: nowrap !important;
|
||
font-size: 1rem !important;
|
||
}
|
||
.notes-link i {
|
||
margin-right: 5px !important;
|
||
font-size: 1rem !important;
|
||
}
|
||
.notes-link:hover, .notes-link:focus {
|
||
text-decoration: none !important;
|
||
background-color: var(--medium-gray) !important;
|
||
color: var(--primary-dark) !important;
|
||
outline: none;
|
||
}
|
||
|
||
/* ADD: Specific overrides for grid and list view */
|
||
.grid-view .document-links-row,
|
||
.list-view .document-links-row {
|
||
flex-direction: row; /* Ensure horizontal layout */
|
||
flex-wrap: wrap; /* Allow wrapping if needed in these views */
|
||
align-items: center; /* Vertically align items if they wrap */
|
||
justify-content: flex-start; /* Align items to the start */
|
||
margin-top: 10px; /* Adjust top margin if needed */
|
||
padding: 10px 15px; /* Ensure padding is consistent */
|
||
background-color: rgba(0, 0, 0, 0.03); /* Ensure background */
|
||
border-top: 1px solid var(--border-color); /* Ensure border */
|
||
}
|
||
|
||
/* Force horizontal layout for links in grid/list views */
|
||
.grid-view .document-links-inner-container,
|
||
.list-view .document-links-inner-container {
|
||
flex-direction: row !important;
|
||
align-items: center !important;
|
||
justify-content: flex-start !important;
|
||
gap: 10px !important;
|
||
height: auto !important;
|
||
flex-wrap: wrap !important;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.table-view .document-links-row .notes-link {
|
||
margin-right: 5px !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.document-links-row .notes-link,
|
||
.document-links-row .invoice-link,
|
||
.document-links-row .manual-link,
|
||
.document-links-row .product-link {
|
||
margin-right: 5px !important;
|
||
margin-left: 0 !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.notes-link {
|
||
width: 100% !important;
|
||
justify-content: center !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.document-links-row {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
align-items: center !important;
|
||
gap: 5px !important;
|
||
}
|
||
.invoice-link, .manual-link, .product-link, .notes-link {
|
||
width: auto !important;
|
||
justify-content: center !important;
|
||
}
|
||
}
|
||
|
||
/* Styling for the main row when details are expanded */
|
||
#recentExpirationsTable tr.details-expanded {
|
||
background-color: var(--medium-gray) !important; /* Use important to override existing hover or status colors if needed, or make more specific */
|
||
/* color: var(--primary-color); /* Optional: change text color of expanded row */
|
||
}
|
||
|
||
/* Styling for the new details row */
|
||
.warranty-details-row td {
|
||
padding: 20px !important; /* Ensure padding is applied */
|
||
background-color: var(--details-bg);
|
||
color: var(--details-text-color);
|
||
border-top: 1px solid var(--details-border-color);
|
||
border-bottom: 1px solid var(--details-border-color);
|
||
}
|
||
|
||
.warranty-details-content {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 25px; /* Increased gap */
|
||
}
|
||
|
||
.warranty-details-content > div { /* Direct children divs (sections) */
|
||
flex: 1 1 280px; /* Allow wrapping with a minimum width */
|
||
padding: 10px;
|
||
}
|
||
|
||
.warranty-details-content h4 {
|
||
margin-top: 0;
|
||
margin-bottom: 12px;
|
||
font-size: 1.1rem;
|
||
color: var(--primary-color);
|
||
border-bottom: 1px solid var(--details-border-color);
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.warranty-details-content p {
|
||
margin-bottom: 8px;
|
||
font-size: 0.95rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.warranty-details-content p strong {
|
||
color: var(--details-text-color);
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.warranty-details-content a {
|
||
color: var(--primary-color);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.warranty-details-content a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.warranty-details-content ul {
|
||
list-style-type: disc;
|
||
margin-left: 20px;
|
||
padding-left: 0;
|
||
}
|
||
|
||
.warranty-details-content li {
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.warranty-details-content pre {
|
||
background-color: var(--notes-bg);
|
||
color: var(--details-text-color);
|
||
padding: 15px;
|
||
border-radius: var(--border-radius);
|
||
white-space: pre-wrap;
|
||
word-wrap: break-word;
|
||
font-family: monospace;
|
||
font-size: 0.9rem;
|
||
border: 1px solid var(--details-border-color);
|
||
}
|
||
|
||
/* ... existing code ... */
|
||
|
||
/* Ensure view document links in modals are styled consistently, especially in dark mode */
|
||
[data-theme="dark"] .view-document-link {
|
||
color: var(--primary-color); /* Or your specific dark mode link color variable */
|
||
text-decoration: underline;
|
||
}
|
||
|
||
[data-theme="dark"] .view-document-link:hover,
|
||
[data-theme="dark"] .view-document-link:focus {
|
||
color: var(--primary-light); /* Or a slightly lighter/different hover color */
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* If the text-success class interferes, this can provide higher specificity */
|
||
[data-theme="dark"] .text-success .view-document-link {
|
||
color: var(--primary-color); /* Ensure override if text-success sets link color */
|
||
}
|
||
|
||
[data-theme="dark"] .text-success .view-document-link:hover,
|
||
[data-theme="dark"] .text-success .view-document-link:focus {
|
||
color: var(--primary-light);
|
||
}
|
||
|
||
.modal {
|
||
background-color: var(--modal-background, #ffffff);
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
width: 90%;
|
||
max-width: 600px;
|
||
max-height: 90vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
animation: slide-in 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden; /* Changed from auto to hidden */
|
||
}
|
||
|
||
:root[data-theme="dark"] .modal-backdrop {
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
}
|
||
|
||
/* Dark mode styles for tag management modal */
|
||
:root[data-theme="dark"] #tagManagementModal .modal {
|
||
background-color: var(--modal-background) !important;
|
||
}
|
||
|
||
:root[data-theme="dark"] #tagManagementModal .modal-header,
|
||
:root[data-theme="dark"] #tagManagementModal .modal-body,
|
||
:root[data-theme="dark"] #tagManagementModal .modal-footer {
|
||
background-color: var(--modal-background) !important;
|
||
color: var(--text-color) !important;
|
||
}
|
||
|
||
:root[data-theme="dark"] #tagManagementModal .form-control {
|
||
background-color: var(--input-background) !important;
|
||
color: var(--text-color) !important;
|
||
border-color: var(--border-color) !important;
|
||
}
|
||
|
||
:root[data-theme="dark"] #tagManagementModal .form-control:focus {
|
||
border-color: var(--primary-color) !important;
|
||
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.25) !important;
|
||
}
|
||
|
||
:root[data-theme="dark"] #tagManagementModal label,
|
||
:root[data-theme="dark"] #tagManagementModal h4 {
|
||
color: var(--text-color) !important;
|
||
}
|
||
|
||
:root[data-theme="dark"] #tagManagementModal .existing-tag {
|
||
background-color: var(--card-bg) !important;
|
||
color: var(--text-color) !important;
|
||
}
|
||
|
||
/* Mobile responsive styles for tag management modal */
|
||
@media (max-width: 768px) {
|
||
#tagManagementModal.modal-backdrop {
|
||
padding: 10px !important;
|
||
}
|
||
|
||
#tagManagementModal .modal {
|
||
width: 95% !important;
|
||
max-width: none !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
#tagManagementModal .modal-header,
|
||
#tagManagementModal .modal-body,
|
||
#tagManagementModal .modal-footer {
|
||
padding: 15px !important;
|
||
}
|
||
|
||
#tagManagementModal .tag-form {
|
||
flex-direction: column !important;
|
||
gap: 10px !important;
|
||
}
|
||
|
||
#tagManagementModal .tag-form input[type="color"] {
|
||
width: 100% !important;
|
||
height: 40px !important;
|
||
}
|
||
}
|
||
|
||
/* Fix CSS Syntax Error - Replace orphaned properties with stronger tag management modal overrides */
|
||
/* Override styles.css modal positioning specifically for tag management modal */
|
||
#tagManagementModal.modal-backdrop {
|
||
display: none !important;
|
||
position: fixed !important;
|
||
top: 0 !important;
|
||
left: 0 !important;
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||
z-index: 1050 !important;
|
||
justify-content: center !important;
|
||
align-items: center !important;
|
||
overflow: auto !important;
|
||
}
|
||
|
||
#tagManagementModal.modal-backdrop.active {
|
||
display: flex !important;
|
||
}
|
||
|
||
/* Stronger override to center the tag management modal content */
|
||
#tagManagementModal .modal-content,
|
||
#tagManagementModal .modal {
|
||
position: static !important;
|
||
top: auto !important;
|
||
left: auto !important;
|
||
margin: 0 !important;
|
||
width: 90% !important;
|
||
max-width: 600px !important;
|
||
max-height: 90vh !important;
|
||
background-color: var(--modal-background, #ffffff) !important;
|
||
border-radius: 8px !important;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
|
||
overflow-y: auto !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
}
|
||
|
||
.filter-options {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
align-items: center;
|
||
}
|
||
|
||
/* Style for the warranty duration group when hidden (due to lifetime checkbox) */
|
||
#warrantyDurationFields.hidden {
|
||
display: none;
|
||
}
|
||
|
||
/* Warranty Entry Method Styling */
|
||
.warranty-method-options {
|
||
display: flex !important;
|
||
flex-direction: row !important;
|
||
gap: 20px;
|
||
margin-top: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.warranty-method-options .radio-option {
|
||
display: flex !important;
|
||
flex-direction: row !important;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
font-weight: normal;
|
||
margin: 0;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.warranty-method-options .radio-option input[type="radio"] {
|
||
margin-right: 8px;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.warranty-method-options .radio-option span {
|
||
user-select: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Ensure both add and edit modal warranty methods display horizontally */
|
||
#warrantyEntryMethod .warranty-method-options,
|
||
#editWarrantyEntryMethod .warranty-method-options {
|
||
display: flex !important;
|
||
flex-direction: row !important;
|
||
gap: 20px;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
}
|
||
|
||
/* Mobile responsive - stack vertically only on very small screens if needed */
|
||
@media (max-width: 480px) {
|
||
.warranty-method-options {
|
||
flex-direction: column !important;
|
||
gap: 10px;
|
||
}
|
||
|
||
.warranty-method-options .radio-option {
|
||
justify-content: flex-start;
|
||
}
|
||
}
|
||
|
||
/* Powered by Warracker footer */
|
||
.warracker-footer {
|
||
margin-top: 50px;
|
||
padding: 20px;
|
||
text-align: center;
|
||
border-top: 1px solid #e0e0e0;
|
||
background-color: var(--card-bg) !important;
|
||
color: var(--text-color);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.warracker-footer a {
|
||
color: #3498db;
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.warracker-footer a:hover {
|
||
color: #2980b9;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* Dark theme styles */
|
||
[data-theme="dark"] .warracker-footer {
|
||
border-top-color: #444;
|
||
}
|
||
|
||
[data-theme="dark"] .warracker-footer a {
|
||
color: #4dabf7;
|
||
}
|
||
|
||
[data-theme="dark"] .warracker-footer a:hover {
|
||
color: #339af0;
|
||
}
|
||
|
||
/* Also support html.dark-mode for older implementations */
|
||
html.dark-mode .warracker-footer {
|
||
border-top-color: #444;
|
||
}
|
||
|
||
html.dark-mode .warracker-footer a {
|
||
color: #4dabf7;
|
||
}
|
||
|
||
html.dark-mode .warracker-footer a:hover {
|
||
color: #339af0;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.warracker-footer {
|
||
margin-top: 30px;
|
||
padding: 15px;
|
||
font-size: 0.85rem;
|
||
}
|
||
}
|
||
|
||
/* ===== PRODUCT PHOTO STYLES ===== */
|
||
.product-photo-thumbnail {
|
||
position: absolute;
|
||
top: 8px;
|
||
right: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* RTL positioning for product photos */
|
||
[dir="rtl"] .product-photo-thumbnail {
|
||
right: auto;
|
||
left: 8px;
|
||
}
|
||
|
||
.product-photo-thumbnail img {
|
||
border: 2px solid var(--border-color);
|
||
border-radius: 8px;
|
||
object-fit: cover;
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.product-photo-thumbnail img:hover {
|
||
transform: scale(1.05);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.product-photo-thumbnail a {
|
||
display: block;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.product-photo-thumbnail a:hover {
|
||
text-decoration: none;
|
||
}
|
||
|
||
.photo-preview {
|
||
margin-top: 10px;
|
||
text-align: center;
|
||
}
|
||
|
||
.photo-preview img {
|
||
border: 2px solid var(--border-color);
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* Grid view photo positioning */
|
||
.grid-view .product-photo-thumbnail img {
|
||
width: 80px;
|
||
height: 80px;
|
||
}
|
||
|
||
/* List view photo positioning */
|
||
.list-view .product-photo-thumbnail img {
|
||
width: 180px;
|
||
height: 180px;
|
||
}
|
||
|
||
/* Table view photo positioning */
|
||
.table-view .product-photo-thumbnail img {
|
||
width: 55px;
|
||
height: 55px;
|
||
}
|
||
|
||
/* Dark mode adjustments */
|
||
:root[data-theme="dark"] .product-photo-thumbnail img {
|
||
border-color: var(--border-color);
|
||
background-color: #2a2a2a;
|
||
}
|
||
|
||
:root[data-theme="dark"] .photo-preview img {
|
||
border-color: var(--border-color);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
/* Mobile responsiveness */
|
||
@media (max-width: 768px) {
|
||
.grid-view .product-photo-thumbnail img {
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
|
||
.list-view .product-photo-thumbnail img {
|
||
width: 120px;
|
||
height: 120px;
|
||
}
|
||
|
||
.table-view .product-photo-thumbnail img {
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
|
||
.product-photo-thumbnail {
|
||
top: 6px;
|
||
right: 6px;
|
||
}
|
||
|
||
/* RTL mobile positioning */
|
||
[dir="rtl"] .product-photo-thumbnail {
|
||
right: auto;
|
||
left: 6px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.grid-view .product-photo-thumbnail img {
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
.list-view .product-photo-thumbnail img {
|
||
width: 25px;
|
||
height: 25px;
|
||
}
|
||
.table-view .product-photo-thumbnail img {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
.product-photo-thumbnail {
|
||
margin-right: 5px;
|
||
}
|
||
|
||
/* RTL mobile margins */
|
||
[dir="rtl"] .product-photo-thumbnail {
|
||
margin-right: 0;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
|
||
/* ===== PAPERLESS BROWSER STYLES ===== */
|
||
.modal-large {
|
||
max-width: 90vw;
|
||
width: 900px;
|
||
}
|
||
|
||
.paperless-browse-section {
|
||
margin-top: 10px;
|
||
padding: 10px;
|
||
background-color: var(--light-gray);
|
||
border-radius: var(--border-radius);
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
|
||
:root[data-theme="dark"] .paperless-browse-section {
|
||
background-color: var(--medium-gray);
|
||
border-color: var(--border-color);
|
||
}
|
||
|
||
.selected-paperless-doc {
|
||
margin-top: 8px;
|
||
padding: 8px 12px;
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.selected-paperless-doc .selected-doc-name {
|
||
font-weight: 500;
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.selected-paperless-doc .btn-xs {
|
||
padding: 2px 6px;
|
||
font-size: 0.8em;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.paperless-browser-controls {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.search-section {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-bottom: 15px;
|
||
align-items: center;
|
||
}
|
||
|
||
.search-section input {
|
||
flex: 1;
|
||
min-width: 250px;
|
||
padding: 10px 12px;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.filter-section {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.filter-section select {
|
||
flex: 1;
|
||
}
|
||
|
||
.paperless-documents-list {
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--border-radius);
|
||
background-color: var(--card-bg);
|
||
}
|
||
|
||
.paperless-document-item {
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
cursor: pointer;
|
||
transition: background-color 0.2s;
|
||
}
|
||
|
||
.paperless-document-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.paperless-document-item:hover {
|
||
background-color: var(--light-gray);
|
||
}
|
||
|
||
:root[data-theme="dark"] .paperless-document-item:hover {
|
||
background-color: var(--medium-gray);
|
||
}
|
||
|
||
.paperless-document-item.selected {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
}
|
||
|
||
.paperless-document-item.selected:hover {
|
||
background-color: var(--primary-dark);
|
||
}
|
||
|
||
.document-title {
|
||
font-weight: 600;
|
||
font-size: 1.1em;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.document-meta {
|
||
font-size: 0.9em;
|
||
color: var(--dark-gray);
|
||
display: flex;
|
||
gap: 15px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.paperless-document-item.selected .document-meta {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
.document-tags {
|
||
display: flex;
|
||
gap: 4px;
|
||
flex-wrap: wrap;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.document-tag {
|
||
background-color: var(--medium-gray);
|
||
color: var(--text-color);
|
||
padding: 2px 6px;
|
||
border-radius: 12px;
|
||
font-size: 0.75em;
|
||
}
|
||
|
||
.paperless-document-item.selected .document-tag {
|
||
background-color: rgba(255, 255, 255, 0.2);
|
||
color: white;
|
||
}
|
||
|
||
.pagination-controls {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 15px;
|
||
margin-top: 15px;
|
||
padding: 10px;
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
.pagination-controls button {
|
||
white-space: nowrap;
|
||
min-width: fit-content;
|
||
padding: 8px 12px;
|
||
}
|
||
|
||
.pagination-controls button:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
#pageInfo {
|
||
font-weight: 500;
|
||
color: var(--text-color);
|
||
white-space: nowrap;
|
||
min-width: fit-content;
|
||
}
|
||
|
||
.loading-message {
|
||
color: var(--dark-gray);
|
||
font-style: italic;
|
||
}
|
||
|
||
.no-documents-message {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
color: var(--dark-gray);
|
||
}
|
||
|
||
.no-documents-message i {
|
||
font-size: 3em;
|
||
margin-bottom: 15px;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.no-documents-message h4 {
|
||
margin-bottom: 10px;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
/* Mobile responsiveness for paperless browser */
|
||
@media (max-width: 768px) {
|
||
.modal-large {
|
||
max-width: 95vw;
|
||
width: 95vw;
|
||
}
|
||
|
||
.search-section {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.filter-section {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.paperless-documents-list {
|
||
max-height: 300px;
|
||
}
|
||
|
||
.document-meta {
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
}
|
||
|
||
.pagination-controls {
|
||
flex-direction: row;
|
||
gap: 10px;
|
||
flex-wrap: nowrap;
|
||
}
|
||
}
|
||
|
||
|
||
/* RTL Language Support */
|
||
[dir="rtl"] {
|
||
text-align: right;
|
||
}
|
||
|
||
[dir="rtl"] .container {
|
||
direction: rtl;
|
||
}
|
||
|
||
[dir="rtl"] .header-right-group {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
[dir="rtl"] .nav-links {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
[dir="rtl"] .nav-link {
|
||
margin-left: 0;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
[dir="rtl"] .nav-link:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
[dir="rtl"] .form-group {
|
||
text-align: right;
|
||
}
|
||
|
||
[dir="rtl"] .form-control {
|
||
text-align: right;
|
||
}
|
||
|
||
[dir="rtl"] .btn {
|
||
text-align: center;
|
||
}
|
||
|
||
[dir="rtl"] .card {
|
||
text-align: right;
|
||
}
|
||
|
||
[dir="rtl"] .card-header {
|
||
text-align: right;
|
||
}
|
||
|
||
[dir="rtl"] .user-menu {
|
||
margin-left: 0;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
[dir="rtl"] .user-menu-dropdown {
|
||
left: 0;
|
||
right: auto;
|
||
}
|
||
|
||
[dir="rtl"] .auth-buttons {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
[dir="rtl"] .social-links {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
[dir="rtl"] .about-card h3 {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
[dir="rtl"] .about-card h3 i {
|
||
margin-left: 10px;
|
||
margin-right: 0;
|
||
}
|
||
|
||
[dir="rtl"] .social-link {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
[dir="rtl"] .social-link i {
|
||
margin-left: 8px;
|
||
margin-right: 0;
|
||
}
|
||
|
||
[dir="rtl"] .preference-item {
|
||
text-align: right;
|
||
}
|
||
|
||
[dir="rtl"] .preference-item label {
|
||
text-align: right;
|
||
}
|
||
|
||
[dir="rtl"] .collapsible-header {
|
||
text-align: right;
|
||
}
|
||
|
||
[dir="rtl"] .collapse-icon {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
[dir="rtl"] .collapse-icon.rotated {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
/* === WARRANTY CLAIMS STYLES === */
|
||
|
||
/* Claims link styling */
|
||
.claims-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 6px 12px;
|
||
margin: 2px;
|
||
color: var(--primary-color);
|
||
text-decoration: none;
|
||
border: 1px solid var(--primary-color);
|
||
border-radius: 4px;
|
||
font-size: 0.85rem;
|
||
transition: all 0.2s ease;
|
||
background: transparent;
|
||
}
|
||
|
||
.claims-link:hover {
|
||
background: var(--primary-color);
|
||
color: white;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.claims-link i {
|
||
margin-right: 5px;
|
||
}
|
||
|
||
/* Claims modal styles */
|
||
.warranty-info-card {
|
||
background: var(--card-bg);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--border-radius);
|
||
padding: 15px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.warranty-info-card h4 {
|
||
margin: 0 0 10px 0;
|
||
color: var(--text-color);
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.warranty-details {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 15px;
|
||
}
|
||
|
||
.warranty-details span {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 0.9rem;
|
||
color: var(--dark-gray);
|
||
}
|
||
|
||
.warranty-details i {
|
||
margin-right: 5px;
|
||
}
|
||
|
||
/* Claims list styles */
|
||
.claims-list {
|
||
max-height: 500px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.claim-item {
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--border-radius);
|
||
margin-bottom: 15px;
|
||
padding: 15px;
|
||
background: var(--card-bg);
|
||
transition: box-shadow 0.2s ease;
|
||
}
|
||
|
||
.claim-item:hover {
|
||
box-shadow: 0 2px 8px var(--shadow-color);
|
||
}
|
||
|
||
.claim-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.claim-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.claim-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.claim-title strong {
|
||
color: var(--text-color);
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.claim-date {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 0.9rem;
|
||
color: var(--dark-gray);
|
||
}
|
||
|
||
.claim-date i {
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.claim-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.claim-description, .claim-resolution {
|
||
background: var(--light-gray);
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
font-size: 0.9rem;
|
||
line-height: 1.4;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.claim-resolution {
|
||
background: rgba(46, 204, 113, 0.1);
|
||
border-left: 4px solid var(--secondary-color);
|
||
}
|
||
|
||
/* Status badges */
|
||
.claim-status-badge {
|
||
padding: 3px 8px;
|
||
border-radius: 12px;
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.claim-status-submitted {
|
||
background-color: #3498db;
|
||
color: white;
|
||
}
|
||
|
||
.claim-status-in-progress {
|
||
background-color: #f39c12;
|
||
color: white;
|
||
}
|
||
|
||
.claim-status-approved {
|
||
background-color: #2ecc71;
|
||
color: white;
|
||
}
|
||
|
||
.claim-status-denied {
|
||
background-color: #e74c3c;
|
||
color: white;
|
||
}
|
||
|
||
.claim-status-resolved {
|
||
background-color: #27ae60;
|
||
color: white;
|
||
}
|
||
|
||
.claim-status-cancelled {
|
||
background-color: #95a5a6;
|
||
color: white;
|
||
}
|
||
|
||
/* No claims message */
|
||
.no-claims-message {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
.no-claims-message i {
|
||
font-size: 3rem;
|
||
color: var(--medium-gray);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.no-claims-message h4 {
|
||
color: var(--text-color);
|
||
margin-bottom: 0.5rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.no-claims-message p {
|
||
color: var(--dark-gray);
|
||
margin: 0;
|
||
}
|
||
|
||
/* Claim form styles */
|
||
.claim-form .form-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.claim-form label {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
font-weight: 500;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.claim-form .form-control {
|
||
width: 100%;
|
||
padding: 10px;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--border-radius);
|
||
font-size: 0.9rem;
|
||
background: var(--card-bg);
|
||
color: var(--text-color);
|
||
transition: border-color 0.2s ease;
|
||
}
|
||
|
||
.claim-form .form-control:focus {
|
||
outline: none;
|
||
border-color: var(--primary-color);
|
||
box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
|
||
}
|
||
|
||
.claim-form textarea.form-control {
|
||
resize: vertical;
|
||
min-height: 80px;
|
||
}
|
||
|
||
/* Responsive design */
|
||
@media (max-width: 768px) {
|
||
.claim-header {
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.claim-actions {
|
||
align-self: flex-start;
|
||
}
|
||
|
||
.warranty-details {
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.claims-link {
|
||
font-size: 0.8rem;
|
||
padding: 4px 8px;
|
||
}
|
||
}
|
||
|
||
/* Dark mode specific adjustments */
|
||
:root[data-theme="dark"] .claim-item,
|
||
:root[data-theme="dark"] .warranty-info-card {
|
||
border-color: #444;
|
||
}
|
||
|
||
:root[data-theme="dark"] .claim-description {
|
||
background: #2d2d2d;
|
||
}
|
||
|
||
:root[data-theme="dark"] .claim-resolution {
|
||
background: rgba(46, 204, 113, 0.15);
|
||
}
|
||
|
||
/* Claims Button Status Styles */
|
||
.claims-link.claims-open {
|
||
background-color: #9b59b6 !important; /* Purple for open claims */
|
||
color: white !important;
|
||
}
|
||
|
||
.claims-link.claims-open:hover {
|
||
background-color: #8e44ad !important;
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.claims-link.claims-finished {
|
||
background-color: var(--primary-color, #3498db) !important;
|
||
color: white !important;
|
||
}
|
||
|
||
.claims-link.claims-finished:hover {
|
||
background-color: #2980b9 !important;
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
/* Add a subtle pulse animation for open claims */
|
||
.claims-link.claims-open {
|
||
animation: pulse-purple 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse-purple {
|
||
0% {
|
||
box-shadow: 0 0 0 0 rgba(155, 89, 182, 0.7);
|
||
}
|
||
70% {
|
||
box-shadow: 0 0 0 10px rgba(155, 89, 182, 0);
|
||
}
|
||
100% {
|
||
box-shadow: 0 0 0 0 rgba(155, 89, 182, 0);
|
||
}
|
||
}
|
||
|
||
/* === MODERN LOGIN PAGE STYLES === */
|
||
|
||
.login-page-body {
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
background-color: var(--bg-color);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.login-wrapper {
|
||
display: flex;
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.login-showcase {
|
||
flex-basis: 50%;
|
||
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.9), rgba(var(--primary-rgb), 0.7)), url('https://images.unsplash.com/photo-1586920740199-47ce3734a7a2?q=80&w=2070&auto=format&fit=crop') no-repeat center center;
|
||
background-size: cover;
|
||
color: white;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 40px;
|
||
text-align: left;
|
||
}
|
||
|
||
.showcase-content {
|
||
max-width: 450px;
|
||
}
|
||
|
||
.showcase-logo {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.showcase-logo i {
|
||
font-size: 3rem;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.showcase-logo h1 {
|
||
font-size: 2.8rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.showcase-description {
|
||
font-size: 1.1rem;
|
||
line-height: 1.6;
|
||
margin-bottom: 30px;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.showcase-features {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.showcase-features li {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
font-size: 1rem;
|
||
opacity: 0.95;
|
||
}
|
||
|
||
.showcase-features i {
|
||
width: 20px;
|
||
margin-right: 12px;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.login-form-container {
|
||
flex-basis: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 40px;
|
||
overflow: visible;
|
||
background-color: var(--card-bg);
|
||
}
|
||
|
||
.login-form-container .auth-container {
|
||
max-width: 400px;
|
||
width: 100%;
|
||
box-shadow: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.login-page-body .auth-title {
|
||
font-size: 1.8rem;
|
||
font-weight: 600;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.login-page-body .input-group {
|
||
position: relative;
|
||
}
|
||
|
||
.login-page-body .input-icon {
|
||
position: absolute;
|
||
left: 15px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: var(--dark-gray);
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.login-page-body .form-control:focus + .input-icon,
|
||
.login-page-body .input-group:focus-within .input-icon {
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.login-page-body .auth-form .form-control {
|
||
padding-left: 45px;
|
||
height: 50px;
|
||
background-color: var(--bg-color);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 8px;
|
||
color: var(--text-color);
|
||
caret-color: var(--text-color);
|
||
}
|
||
|
||
.login-page-body .auth-form .form-control::placeholder {
|
||
color: var(--dark-gray);
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.login-page-body .auth-form .password-toggle {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: none;
|
||
border: none;
|
||
color: var(--dark-gray);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.login-page-body .separator {
|
||
text-align: center;
|
||
margin: 25px 0;
|
||
color: var(--dark-gray);
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.login-page-body .separator::before, .login-page-body .separator::after {
|
||
content: '';
|
||
flex: 1;
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
.login-page-body .separator span {
|
||
padding: 0 10px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.login-page-body .btn-sso {
|
||
display: flex !important;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
}
|
||
.login-page-body .btn-sso i {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
/* Hidden by default; shown only on small screens */
|
||
.login-page-body .mobile-top-logo {
|
||
display: none;
|
||
}
|
||
|
||
/* Login page message and links */
|
||
.login-page-body .auth-message {
|
||
margin-top: 20px;
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
display: none;
|
||
}
|
||
.login-page-body .auth-message.error {
|
||
background-color: rgba(244, 67, 54, 0.1);
|
||
color: #f44336;
|
||
border: 1px solid rgba(244, 67, 54, 0.3);
|
||
}
|
||
.login-page-body .auth-message.success {
|
||
background-color: rgba(76, 175, 80, 0.1);
|
||
color: #4caf50;
|
||
border: 1px solid rgba(76, 175, 80, 0.3);
|
||
}
|
||
.login-page-body .auth-links {
|
||
margin-top: 20px;
|
||
text-align: center;
|
||
font-size: 0.9em;
|
||
}
|
||
.login-page-body .auth-links a {
|
||
color: var(--primary-color);
|
||
text-decoration: none;
|
||
margin: 0 10px;
|
||
}
|
||
.login-page-body .auth-links a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* Provider-specific SSO button styles for modern login */
|
||
.login-page-body .btn-google {
|
||
background-color: #4285f4;
|
||
border-color: #4285f4;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-google:hover, .login-page-body .btn-google:focus {
|
||
background-color: #357ae8;
|
||
border-color: #357ae8;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-github {
|
||
background-color: #333;
|
||
border-color: #333;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-github:hover, .login-page-body .btn-github:focus {
|
||
background-color: #24292e;
|
||
border-color: #24292e;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-microsoft {
|
||
background-color: #0078d4;
|
||
border-color: #0078d4;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-microsoft:hover, .login-page-body .btn-microsoft:focus {
|
||
background-color: #106ebe;
|
||
border-color: #106ebe;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-facebook {
|
||
background-color: #1877f2;
|
||
border-color: #1877f2;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-facebook:hover, .login-page-body .btn-facebook:focus {
|
||
background-color: #166fe5;
|
||
border-color: #166fe5;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-twitter {
|
||
background-color: #1da1f2;
|
||
border-color: #1da1f2;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-twitter:hover, .login-page-body .btn-twitter:focus {
|
||
background-color: #0d95e8;
|
||
border-color: #0d95e8;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-linkedin {
|
||
background-color: #0077b5;
|
||
border-color: #0077b5;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-linkedin:hover, .login-page-body .btn-linkedin:focus {
|
||
background-color: #005885;
|
||
border-color: #005885;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-apple {
|
||
background-color: #000;
|
||
border-color: #000;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-apple:hover, .login-page-body .btn-apple:focus {
|
||
background-color: #333;
|
||
border-color: #333;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-discord {
|
||
background-color: #5865f2;
|
||
border-color: #5865f2;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-discord:hover, .login-page-body .btn-discord:focus {
|
||
background-color: #4752c4;
|
||
border-color: #4752c4;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-gitlab {
|
||
background-color: #fca326;
|
||
border-color: #fca326;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-gitlab:hover, .login-page-body .btn-gitlab:focus {
|
||
background-color: #fc9403;
|
||
border-color: #fc9403;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-bitbucket {
|
||
background-color: #0052cc;
|
||
border-color: #0052cc;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-bitbucket:hover, .login-page-body .btn-bitbucket:focus {
|
||
background-color: #0047b3;
|
||
border-color: #0047b3;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-keycloak {
|
||
background-color: #4d4d4d;
|
||
border-color: #4d4d4d;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-keycloak:hover, .login-page-body .btn-keycloak:focus {
|
||
background-color: #333;
|
||
border-color: #333;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-okta {
|
||
background-color: #007dc1;
|
||
border-color: #007dc1;
|
||
color: white;
|
||
}
|
||
|
||
.login-page-body .btn-okta:hover, .login-page-body .btn-okta:focus {
|
||
background-color: #005a8b;
|
||
border-color: #005a8b;
|
||
color: white;
|
||
}
|
||
|
||
[data-theme="dark"] .login-page-body .login-showcase {
|
||
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.8), #1a1a1a 85%), url('https://images.unsplash.com/photo-1586920740199-47ce3734a7a2?q=80&w=2070&auto=format&fit=crop') no-repeat center center;
|
||
background-size: cover;
|
||
}
|
||
|
||
[data-theme="dark"] .login-page-body .auth-form .form-control {
|
||
background-color: var(--bg-color);
|
||
color: var(--text-color);
|
||
}
|
||
|
||
[data-theme="dark"] .login-page-body .auth-form .form-control::placeholder {
|
||
color: var(--medium-gray);
|
||
}
|
||
|
||
@media (max-width: 992px) {
|
||
.login-page-body .login-showcase {
|
||
display: none;
|
||
}
|
||
.login-page-body .login-form-container {
|
||
flex-basis: 100%;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.login-page-body .login-form-container {
|
||
padding: 16px;
|
||
}
|
||
.login-page-body .auth-title {
|
||
font-size: 1.5rem;
|
||
}
|
||
}
|
||
|
||
/* Mobile top logo for small screens */
|
||
@media (max-width: 768px) {
|
||
.login-page-body .login-form-container {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-bottom: 32px;
|
||
}
|
||
.login-page-body .mobile-top-logo {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 20px 0 10px 0;
|
||
flex-direction: column;
|
||
}
|
||
.login-page-body .mobile-top-logo img {
|
||
width: 120px;
|
||
height: 120px;
|
||
object-fit: contain;
|
||
border-radius: 16px;
|
||
}
|
||
.login-page-body .mobile-top-logo-title {
|
||
margin-top: 6px;
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
color: var(--text-color);
|
||
}
|
||
}
|
||
/* Show top logo on iPad Air/tablets up to 820px */
|
||
@media (min-width: 769px) and (max-width: 820px) {
|
||
.login-page-body .login-form-container {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-bottom: 32px;
|
||
}
|
||
.login-page-body .mobile-top-logo {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 20px 0 10px 0;
|
||
flex-direction: column;
|
||
}
|
||
.login-page-body .mobile-top-logo img {
|
||
width: 120px;
|
||
height: 120px;
|
||
object-fit: contain;
|
||
border-radius: 16px;
|
||
}
|
||
.login-page-body .mobile-top-logo-title {
|
||
margin-top: 6px;
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
color: var(--text-color);
|
||
}
|
||
}
|