/* === APP LOADER === */
.app-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #0f1f1d 0%, #1a2f2d 50%, #203733 100%);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 1;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.app-loader.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.loader-content {
text-align: center;
animation: fadeInUp 0.6s ease;
}
.loader-spinner {
width: 60px;
height: 60px;
margin: 0 auto 24px;
border: 4px solid rgba(255, 122, 58, 0.2);
border-top-color: #ff7a3a;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.loader-text {
color: #f7f8f5;
font-family: var(--font-heading, 'Jost', sans-serif);
font-size: 18px;
font-weight: 500;
margin: 0;
opacity: 0.9;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.checklist-header .category-toggle .cat-title {
margin-bottom: 1px;
line-height: 1.02;
}
:root{
/* Pastel overlanding palette */
--bg-soft: #f7f8f5; /* sand / background */
--bg-accent: #eef3ea; /* subtle green tint */
--card: #f7f8f5; /* card background (soft white)">
--text: #f7f8f5; /* light text for dark background */
--card-text: #2b3a2f; /* dark text used inside light cards */
/* Fonts */
--font-heading: 'Jost', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-body: 'Jost', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
--muted: #6b7a67; /* muted olive */
--accent: var(--brand-orange); /* terracotta alias -> brand orange */
--brand-orange: #ff7a3a; /* primary brand orange */
--glass: rgba(255,255,255,0.8);
--glass-2: rgba(255,255,255,0.7);
/* Default (Gear) color scheme - приглушенные серо-зеленые тона */
--bg-primary-1: #0f1f1d;
--bg-primary-2: #1a2f2d;
--bg-primary-3: #203733;
--bg-primary-4: #1a2f2d;
--bg-primary-5: #15262A;
--bg-primary-6: #0f1f1d;
/* Transitions для плавной смены цветов */
transition: --bg-primary-1 8s cubic-bezier(0.4, 0, 0.2, 1),
--bg-primary-2 8s cubic-bezier(0.4, 0, 0.2, 1),
--bg-primary-3 8s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Checklists mode - серо-голубые тона */
body.checklists-mode {
--bg-primary-1: #2B3A42;
--bg-primary-2: #1F2D35;
--bg-primary-3: #1A252C;
--bg-primary-4: #243139;
--bg-primary-5: #314149;
--bg-primary-6: #3A4A52;
}
*{box-sizing:border-box}
.body-font{font-family:var(--font-body)}
body{font-family:var(--font-body); background:linear-gradient(135deg, var(--bg-primary-1) 0%, var(--bg-primary-2) 20%, var(--bg-primary-1) 80%, var(--bg-primary-3) 100%); color:var(--text); margin:0; padding:0; min-height:100vh; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
/* Header - responsive structure that adapts to zoom */
.topbar{
padding:24px 32px 12px;
max-width:1200px;
margin:0 auto;
position:relative;
display:grid;
grid-template-columns:auto 1fr auto;
grid-template-rows:auto;
align-items:center;
gap:12px;
min-height:70px;
}
.header-left{
grid-column:1;
grid-row:1;
display:flex;
align-items:center;
gap:8px;
padding:6px 0;
align-self:center;
}
.add-label{
font-size:15px;
color:#6e7a69;
font-weight:500;
white-space:nowrap;
letter-spacing:0.3px;
margin-right:8px;
}
.header-center{
grid-column:2;
grid-row:1;
justify-self:center;
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
max-width:280px;
align-self:center;
}
.header-right{
grid-column:3;
grid-row:1;
display:flex;
align-items:center;
gap:12px;
justify-self:end;
align-self:center;
}
.header-controls{display:flex;background:rgba(110,122,105,0.08);padding:6px 11px 5px;border-radius:6px;border:1px solid rgba(110,122,105,0.15);height:32px;align-items:center;gap:8px}
.header-controls input[type=search]{
background:transparent;
border:none;
padding:0 10px;
border-radius:6px;
color:var(--muted); /* same as icons */
font-family:'Jost', var(--font-body);
font-size:14px;
font-weight:500;
min-width:120px;
max-width:180px;
height:32px;
line-height:32px;
box-sizing:border-box;
display:inline-block;
}
.header-controls input[type=search]:focus{outline:none}
.header-controls input[type=search]::placeholder{color:rgba(110,122,105,0.5)}
.header-controls .sort-select{background:transparent;border:none;padding:5px 6px;border-radius:0;color:#6e7a69;font-family:var(--font-body);font-size:13px;font-weight:400;cursor:pointer;border-left:1px solid rgba(110,122,105,0.2)}
.header-controls .sort-select:focus{outline:none}
.topbar h1{margin:0;font-size:28px;letter-spacing:1px;font-family:var(--font-heading);font-weight:600;line-height:30px;height:30px;margin-top:-1px}
.subtitle{margin:4px 0 0;color:#ff7a3a;font-family:'Outfit', var(--font-body);font-weight:400;font-size:14px;line-height:18px;height:18px;white-space:nowrap;flex-shrink:0}
.brand{display:inline-flex;align-items:center;justify-content:center}
.logo{width:60px;height:60px;display:block;object-fit:contain;flex-shrink:0}
.container{display:flex;flex-direction:column;gap:18px;padding:18px 20px 20px;max-width:1200px;margin:0 auto}
.add-btn{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#5a6455, #6e7a69);border:1px solid rgba(110,122,105,0.3);color:#f7f8f5;font-size:20px;font-weight:400;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.15);transition:all .2s ease;display:flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0;margin-top:-1px}
.add-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.25);background:linear-gradient(135deg,#6e7a69, #7a8675);border-color:rgba(110,122,105,0.5)}
.add-btn:active{transform:translateY(0);box-shadow:0 1px 4px rgba(0,0,0,0.2)}
.export-import-buttons{display:flex;gap:8px;align-items:center}
#newChecklistBtn{background:linear-gradient(135deg,#7a9ca8, #8dadb9);border-color:rgba(122,156,168,0.3)}
#newChecklistBtn:hover{background:linear-gradient(135deg,#8dadb9, #a0bdc9);border-color:rgba(122,156,168,0.5)}
.modal{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 1;
animation: fadeIn 0.3s ease;
}
.modal.hidden{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-content{
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 20px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
max-width: 650px;
width: 100%;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes modalSlideUp {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.modal-header{
padding: 32px 32px 24px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
display: flex;
align-items: flex-start;
justify-content: space-between;
background: linear-gradient(135deg, #ff7a3a 0%, #ff6b2b 100%);
color: white;
position: relative;
}
.modal-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
/* Remove orange header gradient and topographic pattern for small confirm/alert dialogs */
.confirm-dialog .modal-header,
.alert-dialog .modal-header {
background: transparent !important;
border-bottom: none;
color: var(--card-text);
}
.confirm-dialog .modal-header::before,
.alert-dialog .modal-header::before {
display: none !important;
}
.confirm-dialog .modal-header h2,
.alert-dialog .modal-header h2 {
color: var(--card-text) !important;
}
.confirm-dialog .modal-header .modal-subtitle,
.alert-dialog .modal-header .modal-subtitle {
color: var(--muted) !important;
}
.modal-header h2{
margin: 0 0 8px 0;
font-size: 28px;
font-weight: 700;
font-family: var(--font-heading);
letter-spacing: -0.5px;
position: relative;
z-index: 1;
}
.modal-header .modal-subtitle {
margin: 0;
font-size: 16px;
opacity: 0.9;
font-weight: 400;
position: relative;
z-index: 1;
}
.modal-header .btn.icon{
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 12px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
z-index: 1;
}
.modal-header .btn.icon:hover{
background: rgba(255, 255, 255, 0.3);
transform: scale(1.05);
}
.modal-body {
flex: 1;
overflow-y: auto;
padding: 0;
max-height: calc(90vh - 120px);
}
/* Profile modal specific styles */
.profile-modal .profile-body {
display: flex;
gap: 24px;
padding: 20px 28px;
align-items: flex-start;
}
.profile-modal .profile-left {
width: 240px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.profile-avatar {
width: 140px;
height: 140px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--brand-orange);
background: rgba(110,122,105,0.06);
box-shadow: 0 6px 20px rgba(10,10,8,0.06);
}
.avatar-wrap { position: relative; }
.avatar-change-btn {
position: absolute;
right: -6px;
bottom: -6px;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--brand-orange);
color: #fff;
border: 2px solid var(--glass);
cursor: pointer;
box-shadow: 0 6px 18px rgba(10,10,8,0.08);
}
.profile-modal .profile-right {
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
}
.form-group { display:flex;flex-direction:column;gap:6px }
.form-label { font-size:13px;color:var(--muted);font-weight:600 }
.form-input { padding:12px 14px;border-radius:10px;border:1px solid rgba(0,0,0,0.06);background:rgba(255,255,255,0.95);width:100%;font-size:14px }
.form-input.readonly{background:rgba(110,122,105,0.04);cursor:not-allowed}
.muted{color:var(--muted);font-size:13px}
.small-space{margin-top:6px}
.form-note{font-size:13px;margin-top:6px}
.form-note.error{color:var(--brand-orange)}
.form-note.success{color:var(--accent)}
.profile-actions-vertical{display:flex;gap:8px;margin-top:12px}
.btn.ghost{background:rgba(110,122,105,0.06);border:1px solid rgba(110,122,105,0.12);color:var(--card-text);padding:8px 12px;border-radius:8px}
/* Responsive: stack on small screens */
@media (max-width: 720px) {
.profile-modal .profile-body{flex-direction:column;padding:16px}
.profile-modal .profile-left{width:100%;flex-direction:row;justify-content:space-between;align-items:center}
.avatar-wrap { margin-right:12px }
}
.panel{background:linear-gradient(180deg,var(--glass),var(--glass-2));border-radius:12px;padding:18px;box-shadow:0 6px 18px rgba(44,44,38,0.06)}
.form{
display: flex;
flex-direction: column;
gap: 32px;
padding: 32px;
flex: 1;
overflow-y: auto;
}
.modal-body .form {
padding: 24px;
}
.form-section{
display: flex;
flex-direction: column;
gap: 20px;
}
.form-row{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: start;
}
.form-row > *{
display: flex;
flex-direction: column;
gap: 8px;
}
.form-row .full-width {
grid-column: 1 / -1;
}
.form-label{
font-size: 14px;
font-weight: 600;
color: var(--card-text);
margin: 0 0 1px 0;
}
.form-label input, .form-label select, .form-label textarea{
padding: 12px 16px;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 12px;
font-size: 15px;
font-family: var(--font-body);
background: white;
transition: all 0.3s ease;
resize: none;
}
.form-label input:focus, .form-label select:focus, .form-label textarea:focus{
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(255, 122, 58, 0.1);
}
.star-rating{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px;padding:8px 0}
.star-rating input[type="radio"]{display:none}
.star-rating label{font-size:32px;color:rgba(110,122,105,0.3);cursor:pointer;transition:all 0.2s ease;line-height:1}
.star-rating label:hover,.star-rating label:hover ~ label,.star-rating input:checked ~ label{color:#6e7a69}
/* Modal Footer and Actions */
.form-actions, .modal-footer {
padding: 24px 32px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
display: flex;
gap: 16px;
justify-content: flex-end;
background: rgba(0, 0, 0, 0.02);
}
.btn.primary, .btn-primary {
background: linear-gradient(135deg, var(--accent) 0%, #ff6b2b 100%);
color: white;
border: none;
padding: 14px 28px;
border-radius: 12px;
font-family: 'Jost', var(--font-body);
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(255, 122, 58, 0.3);
}
.btn.primary:hover, .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 122, 58, 0.4);
}
.btn.secondary, .btn-secondary {
background: white;
color: var(--card-text);
border: 2px solid rgba(0, 0, 0, 0.1);
padding: 14px 28px;
border-radius: 12px;
font-family: 'Jost', var(--font-body);
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.btn.secondary:hover, .btn-secondary:hover {
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.2);
transform: translateY(-1px);
}
.star-rating-inline{display:flex;flex-direction:row-reverse;justify-content:flex-start;gap:2px;padding:0}
.star-rating-inline input[type="radio"]{display:none}
.star-rating-inline label{font-size:18px;color:rgba(110,122,105,0.3);cursor:pointer;transition:all 0.2s ease;line-height:1}
.star-rating-inline label:hover,.star-rating-inline label:hover ~ label,.star-rating-inline input:checked ~ label{color:#6e7a69}
.rating-display{background:transparent;padding:0;color:#6e7a69;font-size:13px;letter-spacing:1px;min-width:65px;display:inline-block;text-align:right}
.photo-preview-container{display:flex;align-items:center;justify-content:center;min-height:100px;background:rgba(110,122,105,0.05);border-radius:8px;border:1px dashed rgba(110,122,105,0.2)}
.photo-preview-container img{max-width:100%;max-height:200px;border-radius:6px;object-fit:contain}
.photo-message{font-size:12px;color:var(--muted);padding:4px 0}
.photo-message.warn{color:#fbbf24}
.photo-message.error{color:#fb7185}
.form-actions{display:flex;gap:10px;margin-top:8px;padding-top:16px;border-top:1px solid rgba(110,122,105,0.1)}
.form-actions .btn{flex:1;padding:12px;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.2s ease}
.form-actions .btn.primary{background:#ff7a3a;border:none;color:#fff;box-shadow:0 2px 8px rgba(255,122,58,0.3)}
.form-actions .btn.primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(255,122,58,0.4);background:#ff8c52}
.form-actions .btn.secondary{background:transparent;border:1px solid rgba(110,122,105,0.3);color:var(--card-text)}
.form-actions .btn.secondary:hover{background:rgba(110,122,105,0.08)}
.form h2{margin:0 0 12px;font-size:16px;font-family:var(--font-heading);font-weight:500}
.btn{padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit;cursor:pointer;font-family:var(--font-body);font-weight:500;transition:all 0.2s ease}
.btn:hover{transform:translateY(-1px)}
input[type=text], input[type=number], select, input[type=search], input[type=file]{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:10px;border-radius:8px;color:inherit;font-family:var(--font-body);font-weight:400}
.btn.primary{background:#ff7a3a;border:none;color:white}
.btn.primary:hover{background:#ff8c52}
.controls{display:flex;gap:10px;margin-top:14px}
.controls input[type=search]{flex:1}
.summary{grid-column:3;display:flex;gap:10px;align-items:center;justify-self:end;color:#6e7a69;font-size:13px;background:rgba(110,122,105,0.12);padding:7px 13px 6px;border-radius:6px;border:1px solid rgba(110,122,105,0.2);margin-right:0}
.summary div{white-space:nowrap}
.summary strong{font-weight:600;margin-right:2px}
.export-import-buttons{display:flex;gap:4px;margin-left:4px;padding-left:8px;border-left:1px solid rgba(110,122,105,0.2)}
.export-import-buttons .btn.icon{width:28px;height:28px;background:rgba(110,122,105,0.08);border:1px solid rgba(110,122,105,0.15)}
.export-import-buttons .btn.icon:hover{background:rgba(110,122,105,0.15);transform:scale(1.05)}
.export-import-buttons .btn.icon svg{width:14px;height:14px}
.cards{padding:12px;background:transparent;display:flex;flex-direction:column;gap:14px}
.category-section{display:flex;flex-direction:column;gap:0;transition:all 0.2s ease;margin-bottom:2px}
.category-section.dragging{opacity:0.4}
.category-section.empty{opacity:0.5}
/* Drag & Drop визуальные индикаторы */
.category-section.drag-over-top::before {
content: '';
position: absolute;
top: -4px;
left: 0;
right: 0;
height: 4px;
background: var(--accent);
border-radius: 2px;
box-shadow: 0 0 8px rgba(255, 122, 58, 0.6);
z-index: 10;
}
.category-section.drag-over-bottom::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
right: 0;
height: 4px;
background: var(--accent);
border-radius: 2px;
box-shadow: 0 0 8px rgba(255, 122, 58, 0.6);
z-index: 10;
}
.category-section {
position: relative;
}
/* Улучшенная стилизация для перетаскиваемых категорий */
.category-section[draggable="true"]:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.category-section[style*="opacity: 0.5"] {
background: rgba(255, 122, 58, 0.05);
backdrop-filter: blur(4px);
}
/* Анимация при hover на заголовке категории */
.category-header:hover {
background: rgba(255, 122, 58, 0.08);
transition: background 0.2s ease;
}
/* Кнопка удаления из чеклиста */
.card-checkbox-right {
display: flex;
align-items: center;
gap: 8px;
}
.remove-from-checklist {
padding: 4px;
border-radius: 4px;
background: transparent;
border: none;
color: #666;
cursor: pointer;
opacity: 0;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.card:hover .remove-from-checklist {
opacity: 1;
}
.remove-from-checklist:hover {
background: rgba(255, 0, 0, 0.1);
color: #ff4444;
transform: scale(1.1);
}
.category-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;background:rgba(110,122,105,0.12);border:1px solid rgba(110,122,105,0.2);border-radius:8px 8px 0 0;border-bottom:none;user-select:none;cursor:pointer;flex-wrap:wrap}
.category-header:active{cursor:pointer}
.category-header:has(+ .category-items.collapsed){border-radius:8px}
.category-header:has(+ .category-items.collapsed:empty) .category-stats{display:none}
.category-left{display:flex;align-items:center;gap:8px;height:36px;min-width:0;flex:1 1 auto}
.category-toggle{display:flex;align-items:center;gap:8px;flex:1;background:none;border:none;cursor:pointer;color:#d4d4d4;font-family:var(--font-body);font-weight:600;font-size:15px;padding:6px 0;margin:0;height:36px}
.category-toggle .cat-title{line-height:36px;display:inline-block;vertical-align:middle}
.category-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;height:auto;min-height:36px}
.category-sort-wrapper{position:relative;display:inline-flex;align-items:center;gap:8px}
.category-sort-order-btn{width:36px;height:36px;padding:0;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:#6e7a69;cursor:pointer;transition:all 0.15s ease}
.category-sort-order-btn.hidden{display:none}
.category-sort-order-btn svg{width:16px;height:16px;display:block;fill:currentColor;vertical-align:middle}
.category-sort-order-btn:hover{color:#4a8166}
.category-sort-order-btn:focus{outline:none}
.category-sort-type-btn{height:36px;padding:0 10px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:#6e7a69;cursor:pointer;transition:all 0.15s ease;font-family:var(--font-body);font-size:13px;font-weight:500}
.category-sort-type-btn .sort-label{line-height:36px}
.category-sort-type-btn:hover{color:#4a8166}
.category-sort-type-btn:focus{outline:none}
.category-sort-type-btn .sort-label{white-space:nowrap}
.category-sort-select{position:absolute;right:0;top:0;width:auto;height:36px;opacity:0;cursor:pointer;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}
.category-sort-select:focus{opacity:1;background:#ffffff;border:1px solid rgba(110,122,105,0.2);padding:4px 8px;border-radius:6px;color:#6e7a69;font-family:var(--font-body);font-size:11px;font-weight:500;outline:none;box-shadow:none!important;-webkit-box-shadow:none!important;pointer-events:auto}
.category-sort-select option{font-family:var(--font-body);font-size:12px;background:#ffffff}
.category-toggle:hover{opacity:0.8}
.cat-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-chevron{width:18px;height:18px;transition:transform .2s ease;fill:#d4d4d4;flex:0 0 18px;transform:rotate(0deg);vertical-align:middle}
.category-items.collapsed ~ .category-header .cat-chevron{transform:rotate(180deg)}
.category-stats{display:flex;gap:12px;align-items:center;flex:0 1 auto;height:auto;min-height:36px;flex-wrap:wrap}
.category-stats .stat{background:rgba(110,122,105,0.2);padding:6px 10px;border-radius:6px;font-size:12px;font-weight:500;color:#d4d4d4;white-space:nowrap;display:inline-flex;align-items:center;height:24px}
.category-items{display:flex;flex-direction:column;gap:8px;padding:8px;background:rgba(110,122,105,0.04);border:1px solid rgba(110,122,105,0.2);border-radius:0 0 8px 8px;border-top:none;max-height:none;overflow:hidden;transition:max-height .25s ease,padding .25s ease,opacity .25s ease}
.category-items.collapsed{max-height:0;padding:0;border:none;opacity:0;pointer-events:none}
.card{display:flex;align-items:center;gap:10px;background:#f7f8f5;padding:9px 10px 8px;border-radius:10px;box-shadow:0 8px 18px rgba(45,58,48,0.12);border:1px solid rgba(110,122,105,0.12);min-height:56px;color:var(--card-text);font-family:var(--font-body);position:relative;z-index:1;transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;contain:layout style;content-visibility:auto}
.card:hover{transform:translateY(-3px);transition:transform .12s ease}
/* Expanded Card Styles */
.card.expanded{
flex-direction:column;
align-items:stretch;
cursor:pointer;
padding:20px;
min-height:auto;
gap:16px;
transform:none;
box-shadow:0 12px 32px rgba(45,58,48,0.2);
border:1px solid rgba(110,122,105,0.2);
border-radius:16px;
transition:all 0.5s cubic-bezier(0.4, 0, 0.2, 1),
border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.card.expanded:hover{transform:none}
.card-expanded-content{
display:none;
position:relative;
opacity:0;
transform:translateY(15px);
transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.card.expanded .card-expanded-content{
display:flex;
flex-direction:column;
gap:16px;
opacity:1;
transform:translateY(0);
animation:fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
padding-right:180px;
}
.card.collapsing .card-expanded-content{
animation:fadeOutUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes fadeInUp {
from {
opacity:0;
transform:translateY(20px);
}
to {
opacity:1;
transform:translateY(0);
}
}
@keyframes fadeOutUp {
from {
opacity:1;
transform:translateY(0);
}
to {
opacity:0;
transform:translateY(-20px);
}
}
/* Staggered animation for expanded content elements */
.card.expanded .card-expanded-photo{
animation:fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}
.card.expanded .card-expanded-info{
animation:fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both;
}
.card.expanded .card-expanded-details{
animation:fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}
/* Reverse animations for collapsing - same as expanding but backwards */
.card.collapsing .card-expanded-details{
animation:fadeOutUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s both;
}
.card.collapsing .card-expanded-info{
animation:fadeOutUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.05s both;
}
.card.collapsing .card-expanded-photo{
animation:fadeOutUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}
/* Micro-interactions for expanded elements */
.card-expanded-photo{
transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-expanded-photo:hover{
transform:scale(1.02);
}
.card-compact-content{
display:flex;
align-items:center;
gap:10px;
width:100%;
opacity:1;
transform:translateY(0);
transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card.expanded .card-compact-content{
display:none;
}
.card-expanded-content .right{
position:absolute;
top:0;
right:0;
display:flex;
z-index:10;
}
.card-expanded-header{
display:flex;
gap:20px;
align-items:flex-start;
flex-wrap:wrap;
}
.card-expanded-photo{
flex-shrink:0;
width:120px;
height:120px;
border-radius:12px;
overflow:hidden;
background:rgba(110,122,105,0.08);
display:flex;
align-items:center;
justify-content:center;
color:var(--muted);
font-size:14px;
}
.card-expanded-photo img{
width:100%;
height:100%;
object-fit:cover;
}
.card-expanded-info{
flex:1;
min-width:300px;
display:flex;
flex-direction:column;
gap:8px;
position:relative;
}
.card-expanded-title{
margin:0;
font-size:18px;
font-weight:600;
color:var(--card-text);
line-height:1.3;
margin-top:-1px;
word-wrap:break-word;
overflow-wrap:break-word;
}
.card-expanded-brand{
font-size:18px;
color:var(--muted);
font-weight:500;
margin-top:-2px;
word-wrap:break-word;
overflow-wrap:break-word;
}
.card-expanded-details{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
gap:12px;
align-items:start;
}
.card-expanded-detail{
display:flex;
flex-direction:column;
gap:6px;
align-items:flex-start;
}
.card-expanded-detail-label{
font-size:12px;
color:var(--muted);
font-weight:500;
text-transform:uppercase;
letter-spacing:0.5px;
}
.card-expanded-detail-value{
font-size:16px;
font-weight:600;
color:var(--card-text);
margin-top:2px;
}
.card-expanded-detail-value.weight-value{
background:#ff7a3a;
color:white;
padding:6px 12px;
border-radius:8px;
display:inline-block;
font-size:14px;
font-weight:600;
align-self:flex-start;
flex-shrink:0;
margin-top:-1px;
}
/* Comment styling */
.card-comment{
width:100%;
margin-top:12px;
padding-top:12px;
border-top:1px solid rgba(255,255,255,0.1);
}
.card-comment-label{
font-size:10px;
color:var(--muted);
margin-bottom:4px;
text-transform:uppercase;
letter-spacing:0.5px;
}
.card-comment-value{
font-weight:400;
font-size:14px;
font-style:italic;
color:var(--muted);
line-height:1.4;
}
.card.expanded .card-compact-content{
display:none;
}
.card-compact-content{
display:flex;
align-items:center;
gap:10px;
width:100%;
}
.card .left{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;height:48px}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:3px;min-width:0}
.card-compact-content h3{margin:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-body);font-weight:600;flex:1;min-width:0;color:#2b3a2f;letter-spacing:0.2px}
.storage-badge{background:rgba(202,118,99,0.12);color:#ca7663;padding:4px 8px;border-radius:6px;font-size:11px;font-weight:500;white-space:nowrap;flex-shrink:0;max-width:100px;overflow:hidden;text-overflow:ellipsis}
.storage-badge-large{background:rgba(202,118,99,0.15);color:#ca7663;padding:6px 12px;border-radius:8px;font-size:14px;font-weight:600;white-space:nowrap;flex-shrink:0;margin-right:12px}
.comment-icon{width:16px;height:16px;color:var(--muted);flex-shrink:0;opacity:0.7}
.storage-warning-wrapper{display:flex;align-items:center;margin-right:8px}
.storage-warning-icon{width:22px;height:22px;color:#ff7a3a;flex-shrink:0;opacity:1;transition:transform 0.15s ease}
.storage-warning-wrapper:hover .storage-warning-icon{transform:scale(1.1)}
.weight-badge{font-size:14px;font-weight:500;color:var(--card-text);white-space:nowrap;flex:0 0 auto}
.card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.card .attrs{display:flex;gap:6px;flex-wrap:nowrap;color:var(--muted);font-size:12px;align-items:center;flex:1;min-width:0;overflow:hidden}
.card .attrs span{background:rgba(110,122,105,0.06);padding:4px 7px;border-radius:6px;color:var(--card-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:1;min-width:0}
.card-checklists{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.checklist-badge{background:rgba(122,156,168,0.15);color:#5a8a9a;padding:5px 10px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap}
.card-price-section{display:flex;gap:6px;align-items:center;flex-shrink:0}
.year-badge{background:transparent;color:var(--card-text);font-weight:500;font-size:12px;padding:4px 7px;border-radius:6px;white-space:nowrap}
.price-badge{font-size:12px;font-weight:500;white-space:nowrap;background:rgba(110,122,105,0.06);padding:4px 7px;border-radius:6px;color:#6e7a69}
.card .right{display:flex;align-items:center;gap:4px}
.card .actions{display:flex;gap:4px;align-items:center}
.card .actions .storage-badge{margin-right:4px}
.btn.icon{width:34px;height:34px;padding:0;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;border:none;background:rgba(110,122,105,0.04);color:#6b7a67;cursor:pointer;transition:all 0.15s ease;margin-top:-1px}
.btn.icon svg{width:16px;height:16px;display:block;fill:currentColor}
.btn.icon:hover{background:rgba(110,122,105,0.12);transform:scale(1.05)}
.btn.icon.delete{background:rgba(251,113,133,0.06)}
.btn.icon.delete:hover{background:rgba(251,113,133,0.15);color:#dc2626;transform:scale(1.05)}
.btn.icon.edit{background:rgba(74,129,102,0.06)}
.btn.icon.edit:hover{background:rgba(74,129,102,0.15);color:#2f6b4f;transform:scale(1.05)}
.btn.icon.share{background:rgba(255,122,58,0.08)}
.btn.icon.share:hover{background:rgba(255,122,58,0.18);color:var(--brand-orange);transform:scale(1.05)}
.btn.icon.share svg{fill:var(--brand-orange)}
.card .small{font-size:12px;color:var(--muted)}
.card img.thumb{width:48px;height:48px;border-radius:8px;object-fit:cover;flex:0 0 48px}
/* Category move buttons (up/down) */
.category-move-controls{display:flex;gap:6px;align-items:center;margin-right:8px}
.cat-move-btn{width:32px;height:32px;padding:0;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;border:none;background:var(--glass);color:var(--accent);cursor:pointer;transition:all 0.12s ease}
.cat-move-btn svg{width:14px;height:14px;fill:currentColor}
.cat-move-btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(16,24,16,0.06)}
.cat-move-btn:active{transform:translateY(0)}
/* Toolbar that sits above the categories */
.category-order-toolbar{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;margin-bottom:8px;flex-wrap:wrap;gap:12px}
.category-order-toolbar-inner{display:flex;align-items:center;gap:0;flex-wrap:wrap}
/* Search wrapper in toolbar */
.toolbar-search-wrapper{display:flex;align-items:center;background:rgba(110,122,105,0.08);padding:6px 12px;border-radius:8px;border:1px solid rgba(110,122,105,0.15);gap:8px}
.toolbar-search-wrapper .search-icon{width:16px;height:16px;color:#6e7a69;opacity:0.6;flex-shrink:0}
.toolbar-search-wrapper input[type=search]{background:transparent;border:none;padding:0;color:var(--text);font-family:'Jost', var(--font-body);font-size:14px;font-weight:500;min-width:180px;max-width:220px;height:24px;line-height:24px}
.toolbar-search-wrapper input[type=search]:focus{outline:none;color:#f0f2ee}
.toolbar-search-wrapper input[type=search]::placeholder{color:rgba(110,122,105,0.5)}
.toolbar-search-wrapper:focus-within{border-color:rgba(110,122,105,0.3);background:rgba(110,122,105,0.12)}
.toolbar-search-wrapper:focus-within .search-icon{opacity:0.8}
/* Toolbar storage controls */
.toolbar-storage-controls{display:flex;align-items:center;gap:6px}
.toolbar-storage-label{font-family:'Jost',var(--font-heading);font-size:14px;font-weight:700;color:#ca7663;white-space:nowrap}
.toolbar-storage-select{background:rgba(110,122,105,0.08);border:1px solid rgba(110,122,105,0.15);color:#d4d4d4;font-size:13px;font-weight:500;padding:6px 12px;border-radius:8px;height:36px;min-width:140px;cursor:pointer;transition:all 0.2s ease;font-family:'Jost',var(--font-body)}
.toolbar-storage-select:hover{background:rgba(110,122,105,0.12);border-color:rgba(110,122,105,0.25)}
.toolbar-storage-select:focus{outline:none;border-color:rgba(110,122,105,0.3);background:rgba(110,122,105,0.12)}
.toolbar-storage-btn{width:36px;height:36px;border-radius:8px;border:1px solid rgba(110,122,105,0.15);background:rgba(110,122,105,0.06);color:#6e7a69;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;padding:0}
.toolbar-storage-btn svg{width:16px;height:16px;fill:currentColor}
.toolbar-storage-btn:hover{background:rgba(110,122,105,0.12);border-color:rgba(110,122,105,0.25);transform:translateY(-1px)}
/* Minimal monochrome edit-order button */
.category-edit-order-btn{width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin-top:0;align-self:center}
.category-edit-order-btn svg{width:16px;height:16px;display:inline-block;vertical-align:middle;transform:translateY(-1px)}
.category-edit-order-btn svg path{stroke:currentColor;stroke-width:1.6;stroke-linecap:round;fill:none}
.category-edit-order-btn:hover{background:rgba(255,255,255,0.02);transform:translateY(-1px)}
/* Toggle-all button (next to edit-order) */
.category-toggle-all-btn{width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin-left:8px;margin-top:0;align-self:center}
.category-toggle-all-btn svg{width:16px;height:16px;display:inline-block;vertical-align:middle;fill:currentColor}
.category-toggle-all-btn:hover{background:rgba(255,255,255,0.02);transform:translateY(-1px)}
/* Category order modal */
.category-order-modal.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 1;
animation: fadeIn 0.3s ease;
}
.category-order-modal-card{background:linear-gradient(180deg,#fbfbfc,#ffffff);color:var(--card-text);width:520px;max-width:92%;border-radius:20px;box-shadow:0 25px 50px rgba(0, 0, 0, 0.25);overflow:hidden;animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);}
.category-order-modal-card .modal-header {
padding: 32px 32px 24px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
display: flex;
align-items: flex-start;
justify-content: space-between;
background: linear-gradient(135deg, #ff7a3a 0%, #ff6b2b 100%);
color: white;
position: relative;
}
.category-order-modal-card .modal-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.category-order-modal-card .modal-body{padding:18px 18px;max-height:360px;overflow:auto}
.category-order-modal-card .modal-footer{display:flex;gap:10px;justify-content:flex-end;padding:12px 18px;border-top:1px solid rgba(0,0,0,0.04);background:transparent}
/* Make Save in this modal flat (no gradient) to match other modals' button appearance */
.category-order-modal-card .modal-footer .btn.primary,
.category-order-modal-card .modal-footer .btn-primary {
background: var(--brand-orange); /* solid brand color */
box-shadow: 0 4px 10px rgba(255,122,58,0.18);
color: white;
}
.category-order-modal-card .modal-footer .btn.primary:hover,
.category-order-modal-card .modal-footer .btn-primary:hover {
background: #ff6b2b;
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(255,122,58,0.18);
}
.category-order-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.category-order-list li{display:flex;align-items:center;justify-content:space-between;padding:10px;border-radius:10px;background:linear-gradient(180deg,#ffffff,#fafafa);border:1px solid rgba(0,0,0,0.04);box-shadow:0 6px 18px rgba(15,18,20,0.03);cursor:grab}
.category-order-list .co-name{font-weight:600;color:var(--card-text)}
.category-order-list li:active{cursor:grabbing}
.category-order-list li.dragging{opacity:0.6;transform:scale(0.995);box-shadow:0 18px 40px rgba(15,18,20,0.08)}
.drag-handle{display:inline-flex;align-items:center;justify-content:center;margin-right:10px;color:var(--muted);font-size:12px;cursor:grab}
.co-left{display:flex;align-items:center;gap:8px}
/* removed arrow buttons; co-actions not used */
.category-order-list .co-actions{display:none}
.category-order-list button{background:transparent;border:1px solid rgba(110,122,105,0.06);border-radius:6px;padding:6px 8px;cursor:pointer}
.card.uncategorized-card{margin-bottom:8px;box-shadow:0 6px 16px rgba(45,58,48,0.1);border:1px solid rgba(110,122,105,0.06)}
.card-edit-form{display:none}
.card-edit-form:not(.hidden){display:flex;flex-direction:column;width:100%;gap:6px;padding-top:10px;border-top:1px solid rgba(110,122,105,0.15)}
.card-edit-form.hidden{display:none}
.card-edit-form .edit-header {
display: flex;
justify-content: flex-end;
margin-bottom: 8px;
width: 100%;
}
.card-edit-form .edit-header .btn {
background: rgba(220,38,38,0.1) !important;
border: 1px solid rgba(220,38,38,0.2) !important;
color: #dc2626 !important;
}
/* Переключение кнопок Edit/Delete в зависимости от режима */
.card.editing .actions .btn.edit {
display: none !important;
}
.card.editing .actions .btn.delete {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border-radius: 7px;
background: rgba(220,38,38,0.1);
border: 1px solid rgba(220,38,38,0.2);
color: #dc2626;
cursor: pointer;
transition: all 0.15s ease;
}
.card.editing .actions .btn.delete:hover {
background: rgba(220,38,38,0.2);
transform: scale(1.05);
}
.edit-fields{display:flex;flex-direction:column;gap:6px;width:100%}
/* Photo editing styles */
.photo-edit-container {
display: flex;
flex-direction: column;
gap: 8px;
}
.photo-container {
position: relative;
width: 100%;
height: 200px;
border-radius: 12px;
overflow: hidden;
background: rgba(110,122,105,0.08);
}
/* Overlay кнопки показываются только в режиме редактирования */
.photo-overlay-buttons {
display: none;
}
.card-edit-form .photo-container {
cursor: pointer;
}
/* Показываем overlay кнопки когда карточка в режиме редактирования */
.card.editing .photo-overlay-buttons,
.card-edit-form .photo-overlay-buttons {
display: flex;
}
/* Overlay кнопки стили */
.photo-overlay-buttons {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
gap: 8px;
flex-direction: row;
align-items: center;
z-index: 10;
}
.photo-overlay-btn {
background: rgba(0,0,0,0.7);
border: none;
border-radius: 6px;
padding: 8px;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
backdrop-filter: blur(4px);
}
.photo-overlay-btn:hover {
background: rgba(0,0,0,0.9);
transform: scale(1.1);
}
.photo-overlay-btn svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.photo-container img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Modal photo section styles */
.modal-photo-section {
display: flex;
justify-content: center;
}
.modal-photo-container {
position: relative;
width: 160px;
height: 160px;
border-radius: 12px;
overflow: hidden;
background: rgba(110,122,105,0.08);
display: flex;
align-items: center;
justify-content: center;
}
.photo-preview-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
font-size: 14px;
}
.photo-preview-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.no-photo-text {
color: var(--muted);
font-size: 14px;
}
.modal-photo-container .photo-overlay-buttons {
display: flex;
}
.photo-placeholder-main {
width: 100%;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(110,122,105,0.08);
border: 2px dashed rgba(110,122,105,0.3);
border-radius: 12px;
}
.photo-thumbnail-edit {
position: relative;
width: 100px;
height: 100px;
border-radius: 12px;
overflow: hidden;
border: 2px solid rgba(110,122,105,0.2);
background: rgba(110,122,105,0.05);
cursor: pointer;
transition: all 0.2s ease;
}
.photo-thumbnail-edit:hover {
border-color: rgba(110,122,105,0.4);
transform: translateY(-1px);
}
.thumbnail-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.photo-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.7);
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s ease;
}
.photo-container:hover .photo-overlay,
.photo-thumbnail-edit:hover .photo-overlay {
opacity: 1;
}
.photo-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(110,122,105,0.08);
border: 2px dashed rgba(110,122,105,0.3);
border-radius: 10px;
}
.photo-action-btn {
background: rgba(255,255,255,0.9);
border: none;
border-radius: 6px;
padding: 8px 12px;
font-size: 12px;
font-weight: 500;
color: #333;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.2s ease;
min-width: 0;
white-space: nowrap;
}
.photo-action-btn:hover {
background: rgba(255,255,255,1);
transform: scale(1.05);
}
.photo-action-btn.add-photo {
background: rgba(110,122,105,0.1);
color: #6E7A69;
border: 1px solid rgba(110,122,105,0.2);
padding: 16px 20px;
font-size: 14px;
}
.photo-action-btn.add-photo:hover {
background: rgba(110,122,105,0.2);
border-color: rgba(110,122,105,0.4);
}
.photo-action-btn.remove-photo {
background: rgba(220,53,69,0.9);
color: white;
}
.photo-action-btn.remove-photo:hover {
background: rgba(220,53,69,1);
}
.photo-file-input {
display: none !important;
}
.edit-fields{display:flex;flex-direction:column;gap:6px;width:100%}
.edit-section{display:flex;flex-direction:column;gap:4px}
.edit-section > label{font-size:10px;color:var(--card-text);font-weight:600;text-transform:uppercase;letter-spacing:0.8px;opacity:0.7}
.edit-row{display:flex;gap:6px;width:100%}
.edit-field{flex:1;padding:7px 10px;border:2px solid rgba(110,122,105,0.4);border-radius:6px;background:#ffffff !important;color:var(--card-text);font-family:var(--font-body);font-size:13px;transition:all 0.2s ease;box-shadow:inset 0 1px 2px rgba(0,0,0,0.08)}
.edit-field:focus{outline:none;border-color:rgba(110,122,105,0.6);background:#ffffff !important;box-shadow:0 0 0 3px rgba(110,122,105,0.1),inset 0 1px 2px rgba(0,0,0,0.08)}
.edit-field[readonly]{background:rgba(110,122,105,0.05);cursor:not-allowed}
.edit-actions{display:flex;gap:6px;padding-top:6px;border-top:1px solid rgba(110,122,105,0.08)}
.edit-actions .btn{flex:1;padding:7px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600}
.edit-actions .btn.primary{background:#ff7a3a;border:none;color:#fff;font-weight:600;box-shadow:0 2px 6px rgba(255,122,58,0.3);transition:all 0.2s ease}
.edit-actions .btn.primary:hover{opacity:0.9;transform:translateY(-1px);box-shadow:0 3px 10px rgba(255,122,58,0.4)}
.edit-actions .btn.danger{background:#dc2626;border:none;color:#fff;font-weight:600;box-shadow:0 2px 6px rgba(220,38,38,0.3);transition:all 0.2s ease}
.edit-actions .btn.danger:hover{background:#b91c1c;transform:translateY(-1px);box-shadow:0 3px 10px rgba(220,38,38,0.4)}
.edit-actions .btn:not(.primary):not(.danger){background:rgba(110,122,105,0.08);border:1px solid rgba(110,122,105,0.2);color:var(--card-text);font-weight:500}
.edit-actions .btn:not(.primary):not(.danger):hover{background:rgba(110,122,105,0.12)}
.hidden{display:none}
.footer{padding:18px;text-align:center;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:8px}
.footer-logo{height:32px;width:auto;opacity:0.7;transition:opacity 0.2s ease}
.footer-logo:hover{opacity:0.9}
/* Tabs */
.tabs{display:flex;align-items:center;gap:4px;padding:0 32px;max-width:1200px;margin:14px auto 2px;background:transparent;position:relative;z-index:15}
.tab{padding:16px 40px 12px;border:none;background:transparent;color:#6e7a69;font-family:var(--font-body);font-size:15px;font-weight:600;cursor:pointer;border-radius:10px;transition:all 0.2s ease;letter-spacing:0.5px;position:relative;flex:1;text-align:left}
.tab:hover{background:rgba(110,122,105,0.05);color:#5a6455}
.tab.active{background:transparent}
.tab.active[data-tab="gear"]{color:#5a6455;background:rgba(110,122,105,0.08)}
.tab[data-tab="checklist"]{text-align:right;color:#7a9ca8;margin-left:auto}
.tab.active[data-tab="checklist"]{background:rgba(122,156,168,0.08)}
/* Tab Content */
.tab-content{display:none}
.tab-content.active{display:block}
/* Checklist Controls */
.checklist-controls{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding:0 12px}
/* Checklist Section - matching gear cards style */
.checklist-section {
margin-bottom: 12px;
background: rgba(110, 122, 105, 0.04);
border-radius: 10px;
border: 1px solid rgba(110, 122, 105, 0.2);
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.checklist-section:hover {
border-color: rgba(110, 122, 105, 0.3);
box-shadow: 0 4px 12px rgba(45, 58, 48, 0.08);
}
.checklist-section[draggable="true"] {
cursor: var(--cursor-pointer);
}
/* Checklist header styling - matching category headers */
.checklist-section .checklist-header {
background: rgba(110, 122, 105, 0.08);
border-bottom: 1px solid rgba(110, 122, 105, 0.15);
padding: 12px 16px;
transition: all 0.25s ease;
}
.checklist-section:hover .checklist-header {
background: rgba(110, 122, 105, 0.12);
}
/* Checklist content area - matching category-items style */
.checklist-section .checklist-content {
background: transparent;
padding: 8px;
}
/* Category sections within checklists */
.checklist-section .category-section {
border-bottom: 1px solid rgba(110, 122, 105, 0.08);
margin-bottom: 4px;
padding-bottom: 4px;
}
.checklist-section .category-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.checklist-header{background:transparent;border:none;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:all 0.25s ease;overflow:hidden;box-sizing:border-box;flex-wrap:wrap}
.checklist-header.complete{background:rgba(76,175,80,0.08);border-color:rgba(76,175,80,0.2)}
.checklist-header.complete .stat{color:#2e7d32;font-weight:600}
.checklist-header.complete .cat-title{color:#2e7d32}
.checklist-header .category-toggle,.checklist-header .checklist-toggle-btn{width:100%;text-align:left;background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#d4d4d4;font-family:var(--font-body);min-width:0;flex:1}
.checklist-header .category-toggle .checklist-title-row,.checklist-header .checklist-toggle-btn .checklist-title-row{display:flex;align-items:center;gap:12px;width:100%;min-width:0}
.checklist-header .category-toggle .checklist-title-with-activities,.checklist-header .checklist-toggle-btn .checklist-title-with-activities{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;overflow:hidden}
.checklist-header .category-toggle .cat-title,.checklist-header .checklist-toggle-btn .cat-title{font-size:14px;font-weight:600;letter-spacing:0.3px;color:#d4d4d4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.checklist-header .category-toggle .checklist-activities,.checklist-header .checklist-toggle-btn .checklist-activities{font-size:12px;font-weight:400;color:rgba(245,243,238,0.5);letter-spacing:0.2px}
.checklist-header.complete .category-toggle .cat-title,.checklist-header.complete .checklist-toggle-btn .cat-title{color:#2e7d32}
.checklist-header .category-stats{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap}
.checklist-header .category-stats .checklist-storage-filter{background:rgba(110,122,105,0.1);border:1px solid rgba(110,122,105,0.2);color:#d4d4d4;font-size:11px;padding:4px 8px;border-radius:6px;height:28px;cursor:pointer;transition:all 0.2s ease}
.checklist-header .category-stats .checklist-storage-filter:hover{background:rgba(110,122,105,0.15)}
.checklist-header .category-stats .btn.icon{background:rgba(110,122,105,0.1);border:1px solid rgba(110,122,105,0.2);width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all 0.2s ease}
.checklist-header .category-stats .btn.icon:hover{background:rgba(110,122,105,0.2);transform:translateY(-1px)}
.checklist-header .category-stats .btn.icon svg{width:14px;height:14px;fill:#6e7a69}
.checklist-header .category-stats .btn.icon.clear-all{background:rgba(220,38,38,0.08);border-color:rgba(220,38,38,0.2)}
.checklist-header .category-stats .btn.icon.clear-all:hover{background:rgba(220,38,38,0.12)}
.checklist-header .category-stats .btn.icon.clear-all svg{fill:#dc2626}
.checklist-header .category-stats .btn.icon.edit{background:rgba(122,156,168,0.1);border:1px solid rgba(122,156,168,0.2)}
.checklist-header .category-stats .btn.icon.edit:hover{background:rgba(122,156,168,0.15)}
.checklist-header .category-stats .btn.icon.edit svg{width:14px;height:14px;fill:#7a9ca8}
.checklist-header .category-stats .stat{background:rgba(110,122,105,0.15);padding:4px 8px;border-radius:6px;font-size:11px;font-weight:600;color:#d4d4d4;white-space:nowrap;display:inline-flex;align-items:center;height:20px}
.checklist-header .cat-chevron{width:18px;height:18px;fill:rgba(212,212,212,0.6);transition:transform 0.25s ease;flex-shrink:0}
.checklist-content{margin-top:0;padding:0 8px 8px;max-height:2000px;overflow:hidden;opacity:1;transition:max-height 0.25s ease, padding 0.25s ease, opacity 0.2s ease}
.checklist-content.collapsed{max-height:0;padding:0;opacity:0;pointer-events:none}
/* Checklist Cards - simplified style */
#checklistCards .category-header{cursor:var(--cursor-pointer)}
#checklistCards .card{cursor:var(--cursor-pointer)}
#checklistCards .card:hover{transform:none}
.checklist-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.checklist-card .card-compact-content{display:flex;align-items:center;gap:10px;padding:9px 10px 8px}
.checklist-card .left{flex:1;min-width:0}
.checklist-card .card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.checklist-card .card-header h3{margin:0;font-size:14px;font-weight:600}
.checklist-card .card-header .weight-badge{margin:0}
.checklist-card .card-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px}
.checklist-card .card-meta{display:flex;gap:6px;align-items:center;color:var(--muted)}
.checklist-card .weight-text{font-size:12px}
.checklist-card .price-text{font-size:12px}
.checklist-card .card-expanded-content{display:none;padding:16px;border-top:none;background:rgba(255,255,255,0.5)}
.checklist-card.expanded .card-expanded-content{display:block;animation:fadeIn 0.4s ease}
.checklist-card .card-compact-content .weight-badge{flex-shrink:0}
.checklist-card .card-expanded-header{display:flex;gap:20px}
.checklist-card .card-expanded-photo{flex-shrink:0}
.checklist-card .card-expanded-photo .photo-container{width:120px;height:120px;border-radius:8px;overflow:hidden;background:rgba(110,122,105,0.08);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px}
.checklist-card .card-expanded-photo .photo-container img{width:100%;height:100%;object-fit:cover}
.checklist-card .card-expanded-info{flex:1}
.checklist-card .card-expanded-title{margin:0 0 4px 0;font-size:18px;font-weight:600;color:var(--card-text)}
.checklist-card .card-expanded-brand{color:var(--muted);font-size:14px;margin-bottom:12px}
.checklist-card .card-expanded-details{display:flex;flex-wrap:wrap;gap:16px}
.checklist-card .card-expanded-detail{display:flex;flex-direction:column;gap:2px}
.checklist-card .card-expanded-detail-label{font-size:11px;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted)}
.checklist-card .card-expanded-detail-value{font-size:14px;font-weight:500;color:var(--card-text)}
.checklist-card .card-expanded-detail-value.weight-value{background:#ff7a3a;color:white;padding:6px 12px;border-radius:8px;display:inline-block;font-weight:600}
.checklist-card .expanded-checkbox{position:absolute;top:16px;right:16px;background:none;border:none}
.checklist-card.expanded{position:relative;border:none!important;box-shadow:0 8px 18px rgba(45,58,48,0.12)}
#checklistCards .card.expanded{border:none!important}
.card-checkbox-right{display:flex;align-items:center;margin-left:auto;gap:6px}
.card-checkbox-right input[type="checkbox"]{width:24px;height:24px;cursor:pointer;appearance:none;-webkit-appearance:none;border:2px solid rgba(76,175,80,0.35);border-radius:6px;background:rgba(255,255,255,0.9);position:relative;transition:all 0.2s ease}
.card-checkbox-right input[type="checkbox"]:checked{background:#4caf50;border-color:#4caf50}
.card-checkbox-right input[type="checkbox"]:checked::after{content:'';position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid white;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.card-checkbox-right input[type="checkbox"]:hover{border-color:#4caf50;box-shadow:0 0 0 2px rgba(76,175,80,0.1)}
.card.checked{opacity:0.6}
.card.checked .card-checkbox-right{opacity:1;filter:brightness(1.2) saturate(1.3);transform:scale(1.05)}
/* Form textarea */
.form-label textarea{background:rgba(255,255,255,0.8);border:1px solid rgba(110,122,105,0.2);padding:10px 12px;border-radius:8px;color:var(--card-text);font-family:var(--font-body);font-size:14px;font-weight:400;resize:vertical;transition:all 0.2s ease}
.form-label textarea:focus{outline:none;border-color:rgba(110,122,105,0.4);background:rgba(255,255,255,0.95);box-shadow:0 0 0 3px rgba(110,122,105,0.08)}
/* Activity Tags */
.activity-tags{display:flex;flex-direction:column;gap:12px}
.activity-search-container{position:relative}
.activity-search{width:100%;background:rgba(255,255,255,0.8);border:1px solid rgba(110,122,105,0.2);padding:10px 12px;border-radius:8px;color:var(--card-text);font-family:var(--font-body);font-size:14px;font-weight:400;transition:all 0.2s ease}
.activity-search:focus{outline:none;border-color:rgba(110,122,105,0.4);background:rgba(255,255,255,0.95);box-shadow:0 0 0 3px rgba(110,122,105,0.08)}
.activity-dropdown{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:rgba(255,255,255,0.98);border:1px solid rgba(110,122,105,0.2);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.1);max-height:200px;overflow-y:auto;z-index:100}
.activity-dropdown.hidden{display:none}
.activity-option{padding:10px 12px;cursor:pointer;font-size:14px;color:var(--card-text);transition:background 0.15s ease}
.activity-option:hover{background:rgba(110,122,105,0.08)}
.selected-activities{display:flex;flex-wrap:wrap;gap:8px;min-height:32px}
.activity-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(122,156,168,0.15);color:#7a9ca8;padding:6px 10px;border-radius:6px;font-size:13px;font-weight:500}
.activity-tag .remove-tag{background:none;border:none;color:#7a9ca8;font-size:18px;font-weight:600;cursor:pointer;padding:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all 0.15s ease}
.activity-tag .remove-tag:hover{background:rgba(122,156,168,0.2);transform:scale(1.1)}
/* Categories Selection */
.categories-select-actions{display:flex;gap:12px;margin-bottom:12px}
.btn-link{background:none;border:none;color:#6e7a69;font-size:13px;font-weight:500;cursor:pointer;padding:6px 8px;border-radius:6px;transition:all 0.15s ease;font-family:var(--font-body)}
.btn-link:hover{background:rgba(110,122,105,0.1);color:#4a8166}
.categories-checkboxes{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow-y:auto;padding:8px;background:rgba(255,255,255,0.5);border:1px solid rgba(110,122,105,0.15);border-radius:8px}
.category-checkbox-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(255,255,255,0.8);border-radius:6px;cursor:pointer;transition:all 0.15s ease}
.category-checkbox-item:hover{background:rgba(255,255,255,1);box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.category-checkbox-item input[type="checkbox"]{width:18px;height:18px;cursor:pointer;accent-color:#6e7a69;flex-shrink:0}
.category-checkbox-item label{cursor:pointer;font-size:14px;color:var(--card-text);flex:1;font-family:var(--font-body)}
/* Gear Items Selection */
.gear-items-checkboxes{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto;padding:8px;background:rgba(255,255,255,0.5);border:1px solid rgba(110,122,105,0.15);border-radius:8px}
.gear-item-checkbox{display:flex;align-items:flex-start;gap:10px;padding:10px;background:rgba(255,255,255,0.9);border-radius:6px;cursor:pointer;transition:all 0.15s ease;border:1px solid rgba(110,122,105,0.1)}
.gear-item-checkbox:hover{background:rgba(255,255,255,1);box-shadow:0 2px 4px rgba(0,0,0,0.05);border-color:rgba(110,122,105,0.2)}
.gear-item-checkbox.selected{background:rgba(110,122,105,0.08);border-color:rgba(110,122,105,0.25)}
.gear-item-checkbox input[type="checkbox"]{width:18px;height:18px;cursor:pointer;accent-color:#6e7a69;flex-shrink:0;margin-top:2px}
.gear-item-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px;flex-shrink:0;background:rgba(110,122,105,0.05);border:1px solid rgba(110,122,105,0.1)}
.gear-item-info{flex:1;min-width:0}
.gear-item-name{font-size:14px;font-weight:500;color:var(--card-text);margin-bottom:4px;font-family:var(--font-body)}
.gear-item-details{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.gear-item-brand{font-weight:500}
.gear-item-category{background:rgba(110,122,105,0.1);padding:2px 6px;border-radius:4px;font-size:11px}
/* Add to Checklists in Gear Form */
#addToChecklistsContainer label{font-size:14px;color:var(--card-text);font-family:var(--font-body)}
#addToChecklistsContainer input[type="checkbox"]{accent-color:#7a9ca8}
/* Edit Checklists in Card Edit Form */
.edit-checklists-container label{font-size:14px;color:var(--card-text);font-family:var(--font-body)}
.edit-checklists-container input[type="checkbox"]{accent-color:#7a9ca8}
/* Item Selector Modal */
.item-selector{display:flex;flex-direction:column;gap:8px;max-height:400px;overflow-y:auto;padding:4px;margin:20px 0}
.selector-item{display:flex;align-items:center;gap:12px;padding:12px;background:rgba(255,255,255,0.8);border:1px solid rgba(110,122,105,0.15);border-radius:8px;cursor:pointer;transition:all 0.2s ease}
.selector-item:hover{background:rgba(255,255,255,0.95);border-color:rgba(110,122,105,0.25)}
.selector-item.selected{background:rgba(208,122,74,0.1);border-color:rgba(208,122,74,0.3)}
.selector-item input[type="checkbox"]{width:18px;height:18px;cursor:pointer;accent-color:var(--brand-orange);flex-shrink:0}
.selector-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px;flex-shrink:0}
.selector-thumb-placeholder{width:48px;height:48px;background:rgba(110,122,105,0.1);border-radius:6px;flex-shrink:0}
.selector-item-info{flex:1;min-width:0}
.selector-item-name{font-size:14px;font-weight:600;color:var(--card-text);margin-bottom:4px}
.selector-item-brand{font-size:12px;color:var(--muted)}
.selector-item-weight{font-size:13px;font-weight:600;color:var(--card-text);padding:4px 10px;background:rgba(110,122,105,0.08);border-radius:6px;flex-shrink:0}
@media (max-width:900px){
.container{padding:14px}
.topbar{
grid-template-columns:auto 1fr;
grid-template-rows:auto auto;
gap:8px;
padding:16px 20px 12px;
align-items:center;
}
.header-left{
grid-column:1;
grid-row:2;
justify-self:start;
align-self:center;
}
.add-label{display:none}
.header-center{
grid-row:1;
grid-column:1 / -1;
justify-self:center;
}
.header-right{
grid-row:2;
grid-column:2;
justify-self:end;
align-self:center;
}
.logo{width:45px;height:45px}
.subtitle{font-size:12px;line-height:16px;height:16px}
.header-controls{max-width:100%}
.summary{gap:8px;font-size:12px;padding:5px 10px}
.summary{flex-wrap:wrap;justify-content:center}
}
/* Profile Button */
#profileBtn {
background: transparent;
border: none;
color: var(--text);
font-size: 13px;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 6px;
}
#profileBtn:hover {
background: rgba(110,122,105,0.1);
}
/* Sign In button: blend with background (low-contrast) */
#signInBtn {
background: transparent !important;
border: 1px solid rgba(255,255,255,0.04);
color: var(--muted);
padding: 8px 12px;
border-radius: 10px;
box-shadow: none;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition: all 0.18s ease;
}
#signInBtn:hover {
background: rgba(255,255,255,0.02);
color: var(--card-text);
transform: translateY(-1px);
}
/* Confirm Dialog */
.confirm-dialog{background:linear-gradient(180deg,#f9f7f3,#f7f8f5);border-radius:12px;padding:24px;box-shadow:0 12px 48px rgba(0,0,0,0.25);max-width:420px;width:100%;text-align:center;animation:slideUp 0.25s ease}
/* center whole dialog content */
.confirm-dialog{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}
.confirm-dialog .modal-title-section{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 0 10px;width:100%}
.confirm-dialog .confirm-icon{width:64px;height:64px;margin:0 0 12px;border-radius:12px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,0.06);background:transparent}
.confirm-dialog .confirm-icon svg{width:28px;height:28px;fill:#dc2626}
.confirm-dialog h3{margin:0 0 8px;font-size:18px;font-family:var(--font-heading);font-weight:600;color:var(--card-text)}
.confirm-dialog p{margin:0 0 20px;font-size:14px;color:var(--muted)}
.confirm-actions{display:flex;gap:10px}
.confirm-actions .btn{flex:1;padding:11px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s ease}
.confirm-actions .btn.danger{background:#dc2626;border:none;color:#fff;box-shadow:0 2px 6px rgba(220,38,38,0.3)}
.confirm-actions .btn.danger:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(220,38,38,0.4);background:#b91c1c}
/* Alert Dialog */
.alert-modal-content .modal-title-section{display:flex;align-items:center;}
.alert-modal-content .modal-title-section h2{font-size:24px;}
.alert-modal-content .alert-icon{width:72px;height:72px;margin:0 auto;display:flex;align-items:center;justify-content:center;background:transparent;border:none}
.alert-modal-content .alert-icon.cloud-sync{width:80px;height:80px}
.alert-modal-content .alert-icon svg{width:100%;height:100%}
/* Legacy alert-dialog styles for backwards compatibility */
.alert-dialog{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px}
/* ensure header contents are centered inside confirm dialog */
.confirm-dialog .modal-header{justify-content:center}
.alert-dialog .modal-title-section{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 0 10px;width:100%}
.alert-icon{width:56px;height:56px;margin:0 0 14px;border-radius:12px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,0.06);background:transparent}
.alert-icon svg{width:28px;height:28px;fill:var(--brand-orange)}
.alert-dialog p{margin:0 0 20px;font-size:14px;color:var(--card-text);line-height:1.5}
.alert-dialog .alert-ok{width:100%;padding:11px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;background:transparent;border:1px solid rgba(0,0,0,0.08);color:var(--brand-orange);box-shadow:none}
.alert-dialog .alert-ok:hover{background:var(--brand-orange);color:white;transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,122,58,0.12)}
#profileBtn span#userEmail {
color:var(--muted); /* same as icons */
font-family:'Jost', var(--font-heading);
font-weight:600;
font-size:15px;
letter-spacing:0.2px;
}
#userAvatar {
width: 40px !important;
height: 40px !important;
border-radius: 50%;
object-fit: cover;
display: inline-block;
}
/* Checklist dates */
.checklist-dates {
font-size: 11px;
color: rgba(212, 212, 212, 0.5);
font-weight: 500;
margin-left: 0;
white-space: nowrap;
background: rgba(110, 122, 105, 0.12);
padding: 3px 8px;
border-radius: 6px;
border: 1px solid rgba(110, 122, 105, 0.15);
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.form-hint {
font-size: 13px;
color: var(--muted);
margin-top: 4px;
}
/* Checklist meta row - dates and tags on one line */
.checklist-meta-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
/* Checklist tags */
.checklist-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
box-sizing: border-box;
}
.tag {
background: #ff7a3a;
color: white;
font-size: 11px;
font-weight: 500;
padding: 3px 8px;
border-radius: 6px;
white-space: nowrap;
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
box-sizing: border-box;
line-height: 1.3;
}
/* Modern Checklist Modal */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 1;
animation: fadeIn 0.3s ease;
}
.modal-overlay.hidden {
display: none;
}
.checklist-modal {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 20px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
max-width: 650px;
width: 100%;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.checklist-modal-header {
padding: 32px 32px 24px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
display: flex;
align-items: flex-start;
justify-content: space-between;
background: linear-gradient(135deg, #ff7a3a 0%, #ff6b2b 100%);
color: white;
position: relative;
}
.checklist-modal-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.modal-title-section {
position: relative;
z-index: 1;
}
.modal-title-section h2 {
margin: 0 0 8px 0;
font-size: 28px;
font-weight: 700;
font-family: var(--font-heading);
letter-spacing: -0.5px;
}
.modal-subtitle {
margin: 0;
font-size: 16px;
opacity: 0.9;
font-weight: 400;
}
.modal-close-btn {
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 12px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
z-index: 1;
}
.modal-close-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.05);
}
.checklist-modal-body {
flex: 1;
overflow-y: auto;
padding: 24px;
max-height: calc(90vh - 200px);
}
.checklist-form {
display: flex;
flex-direction: column;
gap: 24px;
}
.form-section {
display: flex;
flex-direction: column;
gap: 16px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(110, 122, 105, 0.12);
margin-bottom: 4px;
}
.form-section:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.section-title {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 0 4px 0;
font-size: 16px;
font-weight: 600;
color: var(--card-text);
font-family: var(--font-heading);
padding-bottom: 8px;
border-bottom: 1px solid rgba(110, 122, 105, 0.15);
}
.section-actions {
display: flex;
gap: 12px;
}
.action-btn {
background: none;
border: 1px solid var(--accent);
color: var(--accent);
padding: 6px 12px;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.action-btn:hover {
background: var(--accent);
color: white;
transform: translateY(-1px);
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
align-items: start;
}
.form-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-field.full-width {
grid-column: 1 / -1;
}
.field-label {
font-size: 13px;
font-weight: 600;
color: var(--card-text);
margin: 0;
}
.field-input, .field-textarea {
padding: 10px 12px;
border: 1px solid rgba(110, 122, 105, 0.2);
border-radius: 8px;
font-size: 14px;
font-family: var(--font-body);
background: white;
transition: all 0.2s ease;
resize: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.field-input:focus, .field-textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(255, 122, 58, 0.1);
}
/* Custom select dropdown styling */
select.field-input {
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236e7a69' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
.field-hint {
font-size: 13px;
color: var(--muted);
margin-top: -4px;
}
/* Tags Input System */
.tags-input-container {
border: 1px solid rgba(110, 122, 105, 0.2);
border-radius: 8px;
padding: 10px;
background: white;
transition: all 0.2s ease;
}
.tags-input-container:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(255, 122, 58, 0.1);
}
.tags-display {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
min-height: 0;
}
.tag-item {
background: var(--accent);
color: white;
padding: 6px 12px;
border-radius: 16px;
font-size: 13px;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
animation: tagSlideIn 0.2s ease;
}
.tag-remove {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14px;
font-weight: bold;
transition: background-color 0.2s ease;
}
.tag-remove:hover {
background: rgba(255, 255, 255, 0.3);
}
.add-tag-section {
display: flex;
gap: 8px;
align-items: center;
}
.tag-input {
flex: 1;
border: none;
outline: none;
font-size: 14px;
padding: 6px 0;
background: transparent;
}
.tag-input::placeholder {
color: var(--muted);
}
.add-tag-btn {
background: var(--accent);
color: white;
border: none;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 18px;
font-weight: bold;
transition: all 0.2s ease;
}
.add-tag-btn:hover {
background: #ff6b2b;
transform: scale(1.05);
}
@keyframes tagSlideIn {
from {
opacity: 0;
transform: translateY(-10px) scale(0.8);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.checkbox-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 8px;
max-height: 200px;
overflow-y: auto;
padding: 12px;
background: rgba(110, 122, 105, 0.04);
border-radius: 8px;
border: 1px solid rgba(110, 122, 105, 0.15);
}
.gear-items-grid {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
max-height: 300px;
overflow-y: auto;
padding: 12px;
background: rgba(110, 122, 105, 0.04);
border-radius: 8px;
border: 1px solid rgba(110, 122, 105, 0.15);
}
.gear-checkbox-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px;
background: white;
border-radius: 8px;
transition: all 0.2s ease;
cursor: pointer;
border: 1px solid rgba(110, 122, 105, 0.12);
}
.gear-checkbox-item:hover {
background: rgba(255, 122, 58, 0.05);
border-color: rgba(255, 122, 58, 0.25);
transform: translateY(-1px);
}
.gear-checkbox-item input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--accent);
margin-top: 2px;
flex-shrink: 0;
}
.gear-item-label {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
flex: 1;
}
.gear-item-thumbnail {
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 6px;
flex-shrink: 0;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.gear-item-placeholder {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
border-radius: 6px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.gear-item-placeholder::before {
content: '📦';
font-size: 20px;
opacity: 0.5;
}
.gear-item-details {
flex: 1;
min-width: 0;
}
.gear-item-name {
font-size: 14px;
font-weight: 600;
color: var(--card-text);
margin-bottom: 3px;
line-height: 1.3;
}
.gear-item-meta {
font-size: 12px;
color: var(--muted);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.gear-item-weight {
background: rgba(255, 122, 58, 0.1);
color: var(--accent);
padding: 2px 6px;
border-radius: 12px;
font-weight: 600;
font-size: 12px;
}
.checkbox-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: white;
border-radius: 8px;
transition: all 0.2s ease;
cursor: pointer;
border: 1px solid rgba(110, 122, 105, 0.12);
}
.checkbox-item:hover {
background: rgba(255, 122, 58, 0.05);
transform: translateY(-1px);
border-color: rgba(255, 122, 58, 0.2);
}
.checkbox-item input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--accent);
}
.checkbox-item label {
flex: 1;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: var(--card-text);
}
.checklist-modal-footer {
padding: 20px 24px;
border-top: 1px solid rgba(110, 122, 105, 0.15);
display: flex;
gap: 12px;
justify-content: flex-end;
background: rgba(110, 122, 105, 0.04);
}
.btn-primary {
background: linear-gradient(135deg, var(--accent) 0%, #ff6b2b 100%);
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(255, 122, 58, 0.25);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 122, 58, 0.35);
}
.btn-secondary {
background: white;
color: var(--card-text);
border: 1px solid rgba(110, 122, 105, 0.2);
padding: 10px 20px;
border-radius: 8px;
font-family: 'Jost', var(--font-body);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-secondary:hover {
background: rgba(110, 122, 105, 0.05);
border-color: rgba(110, 122, 105, 0.3);
transform: translateY(-1px);
}
transform: translateY(-1px);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes modalSlideUp {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 768px) {
.checklist-modal {
max-width: 100%;
margin: 10px;
max-height: calc(100vh - 20px);
}
.form-grid {
grid-template-columns: 1fr;
}
.checkbox-grid {
grid-template-columns: 1fr;
}
.checklist-modal-header {
padding: 24px 24px 20px;
}
.checklist-modal-body {
padding: 24px;
}
.checklist-modal-footer {
padding: 20px 24px;
flex-direction: column-reverse;
}
.modal-title-section h2 {
font-size: 24px;
}
}
.form-hint {
font-size: 13px;
color: var(--muted);
margin-top: 4px;
}
/* Additional button styles */
.btn-danger {
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
color: white;
border: none;
padding: 12px 24px;
border-radius: 12px;
font-family: 'Jost', sans-serif;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}
.btn-danger:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(231, 76, 60, 0.4);
background: linear-gradient(135deg, #ff5940 0%, #e74c3c 100%);
}
.btn-link {
background: none;
border: none;
padding: 4px 8px;
cursor: pointer;
text-decoration: underline;
font-family: 'Jost', sans-serif;
font-size: inherit;
color: inherit;
}
.btn-link:hover {
opacity: 0.8;
}
/* Confirm dialog specific styles */
.confirm-dialog {
text-align: center;
}
.confirm-dialog .modal-title-section {
display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:18px;padding-top:6px
}
.confirm-dialog .confirm-icon {
width:64px;height:64px;margin:0 0 12px;border-radius:12px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,0.06);background:transparent
}
.confirm-dialog .confirm-icon svg{width:28px;height:28px;fill:#dc2626}
.confirm-dialog h2 {
margin: 0 0 8px 0;
color: var(--light);
}
.confirm-dialog .modal-subtitle {
margin: 0 0 24px 0;
color: var(--muted);
}
.confirm-actions {
display: flex;
gap: 12px;
justify-content: center;
}
/* Режим Checklists - сине-зеленые тона */
body.checklists-mode {
--bg-primary-1: #163D3A;
--bg-primary-2: #123430;
--bg-primary-3: #0E2725;
--bg-primary-4: #123430;
--bg-primary-5: #173935;
--bg-primary-6: #1A3F3C;
}
margin-top: 24px;
}
.items-order-modal-card .modal-header.branded-header {
background: linear-gradient(135deg, #ff7a3a 0%, #ff6b2b 100%);
background-image:
radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 2px, transparent 2px),
radial-gradient(circle at 80% 50%, rgba(255,255,255,0.1) 1px, transparent 1px),
radial-gradient(circle at 40% 20%, rgba(255,255,255,0.1) 1px, transparent 1px),
radial-gradient(circle at 60% 80%, rgba(255,255,255,0.1) 2px, transparent 2px);
background-size: 40px 40px, 60px 60px, 80px 80px, 50px 50px;
color: white;
border-bottom: none;
}
.items-order-modal-card .modal-header.branded-header h3 {
color: white;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.items-order-modal-card .modal-header.branded-header .btn.icon {
color: white;
background: rgba(255,255,255,0.2);
border: 1px solid rgba(255,255,255,0.3);
}
.items-order-modal-card .modal-header.branded-header .btn.icon:hover {
background: rgba(255,255,255,0.3);
}
.items-order-modal-card .modal-header .btn.icon {
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(0, 0, 0, 0.06);
background: transparent;
color: var(--card-text);
box-shadow: none;
padding: 6px;
cursor: pointer;
}
.items-order-modal-card .modal-header .btn.icon svg {
width: 16px;
height: 16px;
}
.items-order-modal-card .modal-body {
padding: 18px 18px;
max-height: 360px;
overflow: auto;
}
.items-order-modal-card .modal-footer {
display: flex;
gap: 10px;
justify-content: flex-end;
padding: 12px 18px;
border-top: 1px solid rgba(0, 0, 0, 0.04);
background: transparent;
}
.items-order-modal-card .modal-footer .btn.primary,
.items-order-modal-card .modal-footer .btn-primary {
background: var(--brand-orange);
box-shadow: 0 4px 10px rgba(255, 122, 58, 0.18);
color: white;
}
.items-order-modal-card .modal-footer .btn.primary:hover,
.items-order-modal-card .modal-footer .btn-primary:hover {
background: #ff6b2b;
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(255, 122, 58, 0.18);
}
/* Branded header for general modal-content */
.modal-content .modal-header.branded-header {
background: linear-gradient(135deg, #ff7a3a 0%, #ff6b2b 100%);
background-image:
radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 2px, transparent 2px),
radial-gradient(circle at 80% 50%, rgba(255,255,255,0.1) 1px, transparent 1px),
radial-gradient(circle at 40% 20%, rgba(255,255,255,0.1) 1px, transparent 1px),
radial-gradient(circle at 60% 80%, rgba(255,255,255,0.1) 2px, transparent 2px);
background-size: 40px 40px, 60px 60px, 80px 80px, 50px 50px;
color: white;
border-bottom: none;
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-content .modal-header.branded-header h2,
.modal-content .modal-header.branded-header h3 {
color: white;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
margin: 0;
}
.modal-content .modal-header.branded-header .btn.icon {
color: white;
background: rgba(255,255,255,0.2);
border: 1px solid rgba(255,255,255,0.3);
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
cursor: pointer;
}
.modal-content .modal-header.branded-header .btn.icon:hover {
background: rgba(255,255,255,0.3);
}
/* Modal header button styles for category order modal */
.category-order-modal-card .modal-header h3 {
color: white;
margin: 0;
font-family: var(--font-heading);
font-size: 1.5rem;
}
.category-order-modal-card .modal-header .btn.icon {
color: white;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
transition: all 0.2s ease;
}
.category-order-modal-card .modal-header .btn.icon:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-1px);
}
.category-order-modal-card .modal-header .btn.icon svg {
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
}
/* Share Modal Styles */
.share-modal {
max-width: 500px;
}
.share-modal .modal-body,
.share-modal-body {
padding: 24px 32px 32px;
}
.share-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 32px;
color: var(--muted);
}
.spinner {
width: 24px;
height: 24px;
border: 3px solid rgba(255, 122, 58, 0.2);
border-top-color: var(--brand-orange);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.share-description {
color: var(--card-text);
margin-bottom: 16px;
font-size: 14px;
line-height: 1.5;
}
.share-link-wrapper {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.share-link-input {
flex: 1;
padding: 12px 14px;
border: 1px solid rgba(110, 122, 105, 0.3);
border-radius: 8px;
font-size: 13px;
background: rgba(247, 248, 245, 0.8);
color: var(--card-text);
font-family: monospace;
}
.copy-btn {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
background: var(--brand-orange) !important;
}
.share-copy-success {
color: #22c55e;
font-size: 13px;
margin: 8px 0;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.share-messengers {
margin: 24px 0;
padding: 20px;
background: rgba(110, 122, 105, 0.04);
border-radius: 12px;
}
.share-messengers-title {
font-size: 13px;
font-weight: 500;
color: var(--card-text);
margin-bottom: 12px;
}
.share-messengers-buttons {
display: flex;
gap: 12px;
justify-content: center;
}
.share-messenger-btn {
width: 48px;
height: 48px;
border: none;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.share-messenger-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.share-messenger-btn svg {
width: 24px;
height: 24px;
}
.share-messenger-btn.whatsapp {
color: #25D366;
}
.share-messenger-btn.telegram {
color: #0088cc;
}
.share-messenger-btn.facebook {
color: #1877F2;
}
.share-messenger-btn.email {
color: #EA4335;
}
.share-expiry {
color: var(--muted);
font-size: 12px;
margin-top: 12px;
}
/* Shared Item Modal */
.shared-item-modal {
max-width: 520px;
}
.shared-item-modal .modal-body {
padding: 0;
}
.shared-item-content {
padding: 0;
}
.shared-item-card {
background: #fff;
overflow: hidden;
}
.shared-item-image {
width: 100%;
height: 220px;
object-fit: cover;
background: rgba(110, 122, 105, 0.1);
}
.shared-item-no-image {
width: 100%;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(110, 122, 105, 0.1);
color: var(--muted);
font-size: 14px;
}
.shared-item-info {
padding: 20px 32px 24px;
}
.shared-item-category {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--brand-orange);
font-weight: 600;
margin-bottom: 6px;
}
.shared-item-name {
font-size: 18px;
font-weight: 600;
color: var(--card-text);
margin-bottom: 4px;
}
.shared-item-brand {
font-size: 14px;
color: var(--muted);
margin-bottom: 12px;
}
.shared-item-stats {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.shared-item-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.shared-item-stat-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--muted);
}
.shared-item-stat-value {
font-size: 14px;
font-weight: 500;
color: var(--card-text);
}
.shared-item-actions {
display: flex;
gap: 12px;
padding: 20px 32px 28px;
justify-content: flex-end;
background: linear-gradient(to top, rgba(0,0,0,0.02), transparent);
}
.save-shared-btn {
display: flex;
align-items: center;
gap: 6px;
}
.shared-item-rating {
color: #fbbf24;
}
/* OAuth Buttons */
.oauth-buttons {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 20px;
}
.oauth-btn {
width: 52px;
height: 52px;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--glass);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
color: var(--text);
}
.oauth-btn:hover {
background: var(--hover);
border-color: var(--brand-orange);
transform: translateY(-2px);
}
.oauth-btn:active {
transform: translateY(0);
}
.oauth-btn svg {
flex-shrink: 0;
}
.oauth-divider {
text-align: center;
color: var(--muted);
font-size: 13px;
margin: 20px 0 16px;
position: relative;
}
.oauth-divider::before,
.oauth-divider::after {
content: '';
position: absolute;
top: 50%;
width: calc(50% - 80px);
height: 1px;
background: var(--border);
}
.oauth-divider::before {
left: 0;
}
.oauth-divider::after {
right: 0;
}
/* Manage Storages Modal */
.storages-list{display:flex;flex-direction:column;gap:8px;max-height:400px;overflow-y:auto;padding:4px}
.storage-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(110,122,105,0.04);border:1px solid rgba(110,122,105,0.1);border-radius:8px;transition:all 0.2s ease}
.storage-item:hover{background:rgba(110,122,105,0.08)}
.storage-item-info{flex:1;min-width:0}
.storage-item-name{font-size:14px;font-weight:500;color:#2b3a2f;margin-bottom:2px}
.storage-item-count{font-size:12px;color:var(--muted)}
.storage-item-actions{display:flex;gap:6px;flex-shrink:0}
.storage-item-actions .btn.icon{width:32px;height:32px}
.storage-item-actions .btn.icon.edit-storage{background:rgba(74,129,102,0.08)}
.storage-item-actions .btn.icon.edit-storage:hover{background:rgba(74,129,102,0.15);color:#2f6b4f}
.storage-item-actions .btn.icon.delete-storage{background:rgba(220,38,38,0.08)}
.storage-item-actions .btn.icon.delete-storage:hover{background:rgba(220,38,38,0.15);color:#dc2626}
/* --- Site default scale reduced by 10% (desktop + mobile) ---
Approach:
- Use meta viewport initial-scale=0.9 for mobile (see index.html)
- Apply CSS `zoom: 0.9` on desktop where supported (Chromium, Safari)
- Provide a Firefox-friendly fallback using transform: scale with width adjust
This keeps user zooming available (we do NOT disable user scaling).
*/
html {
/* Default 10% smaller */
zoom: 0.9;
}
@supports not (zoom: 0.9) {
/* Firefox fallback */
body {
transform: scale(0.9);
transform-origin: 0 0;
/* Prevent horizontal scrollbar by compensating width */
width: calc(100% / 0.9);
}
}