/* Подключаем шрифт Franklin Gothic */ @import url('https://fonts.googleapis.com/css2?family=Franklin+Gothic:wght@400;500;600;700&display=swap'); body { font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif; background-color: #F0F8FF; /* Алиса синий */ margin: 0; padding: 0; } .main-container { background-color: #ffffff; min-height: 100vh; padding: 20px; } .header { background: linear-gradient(135deg, #4682B4 0%, #B0C4DE 100%); /* Стальной синий к светло-стальному */ padding: 25px; border-radius: 12px; margin-bottom: 35px; color: white; box-shadow: 0 6px 20px rgba(70, 130, 180, 0.3); } .logo-container { display: flex; align-items: center; gap: 25px; } .logo { height: 70px; width: auto; object-fit: contain; filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2)); } .header-title { font-size: 2.5em; font-weight: 700; margin: 0; text-shadow: 2px 2px 6px rgba(0,0,0,0.3); letter-spacing: 0.5px; } .page-title { color: #2c3e50; font-weight: 700; border-bottom: 3px solid #4682B4; padding-bottom: 10px; margin-bottom: 25px; } .partner-card { border: 3px solid #B0C4DE; /* Светло-стальной */ border-radius: 15px; padding: 25px; margin-bottom: 25px; background: #ffffff; box-shadow: 0 6px 20px rgba(176, 196, 222, 0.25); transition: transform 0.3s ease, box-shadow 0.3s ease; } .partner-card:hover { transform: translateY(-5px); box-shadow: 0 12px 25px rgba(176, 196, 222, 0.35); } .partner-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid #e9ecef; padding-bottom: 18px; margin-bottom: 20px; } .partner-name-line { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; } .partner-type { font-size: 1.2em; font-weight: 600; color: #4682B4; /* Стальной синий */ background: linear-gradient(135deg, #F0F8FF 0%, #E6F2FF 100%); /* Градиент алиса синий */ padding: 8px 18px; border-radius: 25px; border: 2px solid #B0C4DE; } .partner-name { font-size: 1.6em; font-weight: 700; color: #2c3e50; margin: 0; } .divider { color: #B0C4DE; /* Светло-стальной */ font-weight: bold; font-size: 1.5em; } .discount-info { display: flex; align-items: center; gap: 20px; } .discount-badge { font-size: 1.2em; padding: 10px 20px; border-radius: 30px; background: linear-gradient(135deg, #4682B4 0%, #5A8EC6 100%); color: white; font-weight: 600; box-shadow: 0 3px 10px rgba(70, 130, 180, 0.3); } .sales-amount { font-size: 1.1em; color: #4682B4; /* Стальной синий */ font-weight: 600; background-color: #F0F8FF; /* Алиса синий */ padding: 8px 15px; border-radius: 8px; } .partner-info-row { margin-bottom: 0; padding: 8px 0; line-height: 1.5; border-bottom: 1px dashed #E6F2FF; } .partner-info-row:last-child { border-bottom: none; } .partner-label { font-weight: 700; color: #4682B4; /* Стальной синий */ min-width: 140px; display: inline-block; font-size: 1.05em; } .partner-value { font-size: 1.05em; color: #2c3e50; font-weight: 500; } .partner-buttons-container { display: flex; gap: 15px; justify-content: flex-start; margin-top: 25px; padding-top: 20px; border-top: 3px solid #E6F2FF; } .btn-action { padding: 12px 25px; font-size: 1em; display: flex; align-items: center; gap: 10px; min-width: 200px; justify-content: center; border: none; border-radius: 10px; font-weight: 700; transition: all 0.3s ease; cursor: pointer; letter-spacing: 0.5px; } .btn-edit { background: linear-gradient(135deg, #4682B4 0%, #5A8EC6 100%); color: white; } .btn-add { background: linear-gradient(135deg, #6c757d 0%, #868e96 100%); color: white; } .btn-history { background: linear-gradient(135deg, #495057 0%, #6c757d 100%); color: white; } .btn-action:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.25); color: white; } .btn-new-partner { background: linear-gradient(135deg, #4682B4 0%, #5A8EC6 100%); color: white; border: none; padding: 14px 28px; font-weight: 700; border-radius: 10px; font-size: 1.1em; letter-spacing: 0.5px; } .btn-new-partner:hover { background: linear-gradient(135deg, #5A8EC6 0%, #6B9BD4 100%); color: white; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(70, 130, 180, 0.3); } .rating-badge { font-size: 1em; padding: 8px 16px; border-radius: 20px; background: linear-gradient(135deg, #FFD700 0%, #FFC400 100%); color: #2c3e50; font-weight: 700; } .alert { border-radius: 12px; border: none; background: linear-gradient(135deg, #F0F8FF 0%, #E6F2FF 100%); border-left: 6px solid #4682B4; } .volume-info { background: linear-gradient(135deg, #F0F8FF 0%, #E6F2FF 100%); padding: 12px 20px; border-radius: 10px; margin-top: 15px; border: 2px solid #B0C4DE; } .volume-label { font-weight: 700; color: #4682B4; /* Стальной синий */ font-size: 1.1em; } .volume-value { color: #2c3e50; font-weight: 700; font-size: 1.2em; } /* Стили для страницы истории продаж мебели */ .table-responsive { border-radius: 12px; overflow: hidden; border: 3px solid #B0C4DE; box-shadow: 0 6px 20px rgba(176, 196, 222, 0.3); } .table { margin-bottom: 0; border-collapse: separate; border-spacing: 0; } .table th { background: linear-gradient(135deg, #4682B4 0%, #5A8EC6 100%); color: white; font-weight: 700; padding: 16px; text-align: center; font-size: 1.1em; border: none; } .table td { padding: 14px; text-align: center; vertical-align: middle; border-bottom: 2px solid #E6F2FF; font-size: 1.05em; } .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(176, 196, 222, 0.08); } .table-striped tbody tr:hover { background-color: rgba(70, 130, 180, 0.15); transition: background-color 0.3s ease; } .table tfoot { background: linear-gradient(135deg, #F0F8FF 0%, #E6F2FF 100%); font-weight: 700; font-size: 1.1em; } .table tfoot td { border-top: 3px solid #4682B4; padding: 18px; } .text-end { text-align: right !important; } /* Стили для иконок в кнопках */ .btn-action i { font-size: 1.2em; } /* Стили для блока с расчетом стоимости */ .calculation-block { background: linear-gradient(135deg, #F0F8FF 0%, #E6F2FF 100%); border: 3px solid #B0C4DE; border-radius: 15px; padding: 25px; margin-bottom: 30px; box-shadow: 0 6px 20px rgba(176, 196, 222, 0.25); } .calculation-title { color: #4682B4; font-weight: 700; border-bottom: 3px solid #4682B4; padding-bottom: 15px; margin-bottom: 25px; } .calculation-result { background-color: white; border: 2px solid #B0C4DE; border-radius: 10px; padding: 20px; margin-top: 20px; } .result-item { padding: 10px 0; border-bottom: 1px dashed #E6F2FF; } .result-item:last-child { border-bottom: none; font-weight: 700; font-size: 1.2em; color: #4682B4; } /* Адаптивность для таблицы */ @media (max-width: 768px) { .table-responsive { font-size: 0.9em; } .table th, .table td { padding: 10px 6px; } .btn-action { min-width: 150px; padding: 10px 15px; font-size: 0.9em; } .partner-card { padding: 20px; } .header-title { font-size: 1.8em; } } /* Стили для фильтров и сортировки */ .filter-section { background: linear-gradient(135deg, #F0F8FF 0%, #E6F2FF 100%); border: 2px solid #B0C4DE; border-radius: 12px; padding: 20px; margin-bottom: 25px; } .filter-title { color: #4682B4; font-weight: 700; margin-bottom: 15px; } .form-control, .form-select { border: 2px solid #B0C4DE; border-radius: 8px; padding: 10px 15px; font-size: 1em; transition: all 0.3s ease; } .form-control:focus, .form-select:focus { border-color: #4682B4; box-shadow: 0 0 0 0.25rem rgba(70, 130, 180, 0.25); } /* Анимации */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .partner-card, .table-responsive, .calculation-block { animation: fadeIn 0.5s ease-out; }