html, body {
height: 100%;
margin: 0;
overflow-x: hidden;
max-width: 100vw;
}
/* Public layout (not logged in) - flex on body */
body:not(.has-sidebar) {
display: flex;
flex-direction: column;
overflow-x: hidden;
}
body:not(.has-sidebar) main {
flex: 1 0 auto;
overflow-x: hidden;
}
main {
padding: 20px 0;
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ed 100%);
overflow-x: hidden;
box-sizing: border-box;
}
.page-footer {
flex-shrink: 0;
}
/* Admin layout - flex on .main-wrapper, not body */
body.has-sidebar {
display: block;
}
/* ============================================
GLOBAL BUTTON ICON CENTERING FIX
============================================ */
/* Fix for buttons with icons - ensure proper centering */
.btn i.left,
.btn-small i.left,
.btn-large i.left,
.btn-flat i.left {
margin-right: 8px;
vertical-align: middle;
line-height: inherit;
}
/* Floating buttons - perfectly centered icons */
.btn-floating {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.btn-floating i {
line-height: 1 !important;
margin: 0 !important;
}
/* Small buttons with icons */
.btn-small {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Action buttons in tables */
.action-buttons .btn-small,
.btn-group .btn-small {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 32px;
height: 32px;
padding: 0 8px;
}
.action-buttons .btn-small i,
.btn-group .btn-small i {
font-size: 18px;
line-height: 1;
margin: 0;
}
/* ============================================
FULL WIDTH PAGE CONTAINER
============================================ */
.companies-page-container,
.welcome-page-container,
.dashboard-page-container {
width: 100%;
max-width: 100%;
padding: 0 20px;
box-sizing: border-box;
overflow-x: hidden;
}
/* ============================================
SEARCH AND FILTER BAR
============================================ */
.search-filter-bar {
background: #fff;
border-radius: 16px;
padding: 20px 25px;
margin-bottom: 25px;
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
display: flex;
gap: 20px;
align-items: center;
flex-wrap: wrap;
}
.search-filter-bar .search-input-wrapper {
flex: 1;
min-width: 250px;
position: relative;
}
.search-filter-bar .search-input-wrapper i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #9e9e9e;
}
.search-filter-bar input[type="text"] {
border: 2px solid #e0e0e0 !important;
border-radius: 12px !important;
padding: 12px 15px 12px 50px !important;
width: 100%;
font-size: 1rem;
transition: all 0.3s ease;
box-sizing: border-box !important;
margin: 0 !important;
height: auto !important;
box-shadow: none !important;
}
.search-filter-bar input[type="text"]:focus {
border-color: #4169E1 !important;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important;
outline: none;
}
/* ============================================
COMPANY CARDS GRID
============================================ */
.companies-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
/* Company Card */
.company-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
position: relative;
}
.company-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
.company-card .card-header {
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
padding: 20px;
position: relative;
overflow: hidden;
}
.company-card .card-header::before {
content: '';
position: absolute;
top: -50%;
right: -30%;
width: 100px;
height: 200px;
background: rgba(255,255,255,0.1);
transform: rotate(45deg);
}
.company-card .company-avatar {
width: 55px;
height: 55px;
background: rgba(255,255,255,0.2);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
color: #fff;
margin-bottom: 12px;
backdrop-filter: blur(10px);
border: 2px solid rgba(255,255,255,0.3);
}
.company-card .company-avatar-img {
padding: 0;
overflow: hidden;
}
.company-card .company-avatar-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.company-card .company-name {
color: #fff;
font-size: 1.2rem;
font-weight: 700;
margin: 0 0 6px 0;
position: relative;
z-index: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.company-card .company-email {
color: rgba(255,255,255,0.85);
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.company-card .company-email i {
font-size: 14px;
flex-shrink: 0;
}
.company-card .card-body {
padding: 18px;
}
.company-card .company-info-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
color: #666;
font-size: 0.9rem;
}
.company-card .company-info-row i {
color: #4169E1;
font-size: 18px;
width: 22px;
flex-shrink: 0;
}
.company-card .company-info-row.description {
color: #888;
line-height: 1.4;
margin-bottom: 15px;
}
.company-card .company-info-row.description span {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.company-card .status-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.company-card .status-badge.active {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
color: #fff;
}
.company-card .status-badge.inactive {
background: #f5f5f5;
color: #9e9e9e;
}
.company-card .card-actions {
display: flex;
gap: 8px;
padding: 15px 18px;
background: #fafbfc;
border-top: 1px solid #f0f0f0;
}
.company-card .card-actions .action-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 6px;
border-radius: 10px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
border: none;
text-decoration: none;
}
.company-card .action-btn.view-btn {
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
color: #fff;
}
.company-card .action-btn.view-btn:hover {
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
transform: translateY(-2px);
}
.company-card .action-btn.edit-btn {
background: #e3f2fd;
color: #1976d2;
}
.company-card .action-btn.edit-btn:hover {
background: #bbdefb;
}
.company-card .action-btn.articles-btn {
background: #fff3e0;
color: #ef6c00;
}
.company-card .action-btn.articles-btn:hover {
background: #ffe0b2;
}
.company-card .action-btn.delete-btn {
background: #ffebee;
color: #c62828;
}
.company-card .action-btn.delete-btn:hover {
background: #ffcdd2;
}
/* Add Button - Universal */
.add-company-btn,
.add-btn {
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
color: #fff !important;
border: none;
border-radius: 12px;
padding: 12px 25px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);
white-space: nowrap;
}
.add-company-btn:hover,
.add-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
color: #fff !important;
}
.add-company-btn i,
.add-btn i {
font-size: 1.2rem;
}
/* ============================================
MODERN INPUT FIELDS
============================================ */
.modern-input-group {
margin-bottom: 18px;
max-width: 100%;
}
.modern-input {
position: relative;
display: flex;
align-items: center;
background: #f8f9fa;
border: 2px solid #e8e8e8;
border-radius: 12px;
transition: all 0.3s ease;
max-width: 100%;
box-sizing: border-box;
}
.modern-input:hover {
border-color: #c8d0e0;
background: #fdfdfe;
}
.modern-input:focus-within {
border-color: #4169E1;
background: #fff;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.modern-input.green-theme:focus-within {
border-color: #11998e;
box-shadow: 0 0 0 4px rgba(17, 153, 142, 0.1);
}
.modern-input > i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #4169E1;
font-size: 22px;
pointer-events: none;
z-index: 1;
}
/* For textareas, position icon near top instead of center */
.modern-input:has(textarea) > i {
top: 18px;
transform: none;
}
.modern-input.green-theme > i {
color: #11998e;
}
.modern-input input,
.modern-input input[type="text"],
.modern-input input[type="text"]:not(.browser-default),
.modern-input input[type="number"]:not(.browser-default),
.modern-input input[type="email"]:not(.browser-default) {
width: 100%;
padding: 16px 16px 16px 52px !important;
border: none !important;
border-bottom: none !important;
background: transparent !important;
font-size: 1rem !important;
color: #333 !important;
outline: none !important;
box-shadow: none !important;
margin: 0 !important;
height: auto !important;
box-sizing: border-box !important;
}
.modern-input input::placeholder {
color: #999;
}
.modern-input input:focus,
.modern-input input[type="text"]:focus:not(.browser-default),
.modern-input input[type="number"]:focus:not(.browser-default) {
border: none !important;
border-bottom: none !important;
box-shadow: none !important;
}
/* Textarea inside modern-input */
.modern-input textarea {
width: 100%;
padding: 16px 16px 16px 52px !important;
border: none !important;
background: transparent !important;
font-size: 1rem !important;
color: #333 !important;
outline: none !important;
box-shadow: none !important;
margin: 0 !important;
box-sizing: border-box !important;
resize: vertical;
font-family: inherit;
line-height: 1.5;
min-height: 60px;
}
.modern-input textarea::placeholder {
color: #999;
}
.modern-input textarea:focus {
border: none !important;
box-shadow: none !important;
}
/* ============================================
MODERN INPUT - RAW SELECT FALLBACK
(before Materialize FormSelect initializes)
============================================ */
.modern-input > select {
flex: 1;
padding: 16px 16px 16px 52px;
border: none;
background: transparent;
font-size: 1rem;
color: #333;
outline: none;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* ============================================
MODERN INPUT - MATERIALIZE SELECT SUPPORT
============================================ */
.modern-input .select-wrapper {
flex: 1;
margin: 0 !important;
min-width: 0;
border: none !important;
border-bottom: none !important;
}
.modern-input .select-wrapper input.select-dropdown,
.modern-input .select-wrapper input.select-dropdown[type="text"],
.modern-input .select-wrapper input[type="text"].select-dropdown:not(.browser-default),
.modal .modern-input .select-wrapper input.select-dropdown,
.modal .modern-input .select-wrapper input.select-dropdown[type="text"] {
width: 100% !important;
padding: 16px 36px 16px 52px !important;
border: 0 none !important;
border-bottom: 0 none !important;
border-width: 0 !important;
background: transparent !important;
font-size: 1rem !important;
color: #333 !important;
outline: none !important;
box-shadow: none !important;
margin: 0 !important;
height: auto !important;
box-sizing: border-box !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
white-space: nowrap !important;
cursor: pointer;
}
.modern-input .select-wrapper input.select-dropdown:focus,
.modal .modern-input .select-wrapper input.select-dropdown:focus {
border: 0 none !important;
border-bottom: 0 none !important;
border-width: 0 !important;
box-shadow: none !important;
}
/* Hide original select element properly */
.modern-input .select-wrapper > select {
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
border: none !important;
}
.modern-input .select-wrapper .caret {
fill: #4169E1 !important;
right: 12px;
top: 50%;
transform: translateY(-50%);
position: absolute;
}
.modern-input .select-wrapper .dropdown-content {
border-radius: 10px !important;
box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
z-index: 9999 !important;
min-width: 100% !important;
left: 0 !important;
}
.modern-input .select-wrapper .dropdown-content li > a,
.modern-input .select-wrapper .dropdown-content li > span {
color: #333 !important;
font-size: 0.95rem;
padding: 10px 16px;
}
.modern-input .select-wrapper .dropdown-content li.selected {
background-color: rgba(65, 105, 225, 0.08) !important;
}
.modern-input .select-wrapper .dropdown-content li:hover {
background-color: rgba(65, 105, 225, 0.05) !important;
}
/* ============================================
MODERN INPUT - Remove Materialize gray lines
Override ALL possible sources of gray border-bottom
that Materialize applies to text inputs and selects
============================================ */
.modal .modern-input input,
.modal .modern-input input[type="text"],
.modal .modern-input input[type="number"],
.modal .modern-input input[type="email"],
.modal .modern-input input[type="text"]:not(.browser-default),
.modal .modern-input input[type="number"]:not(.browser-default),
.modal .modern-input input[type="email"]:not(.browser-default),
.modal .modern-input input.datepicker,
.modal .modern-input .select-wrapper input,
.modal .modern-input .select-wrapper input.select-dropdown {
border: 0 !important;
border-top: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
.modal .modern-input .select-wrapper {
border: 0 !important;
border-bottom: 0 !important;
}
.modern-input > i.material-icons {
float: none !important;
text-decoration: none !important;
}
/* Search-input-wrapper Materialize select (celebration guests selector) */
.search-input-wrapper .select-wrapper {
flex: 1;
margin: 0 !important;
min-width: 0;
}
.search-input-wrapper .select-wrapper {
border-bottom: none !important;
}
.search-input-wrapper .select-wrapper input.select-dropdown {
border: none !important;
border-bottom: none !important;
outline: none !important;
background: transparent !important;
font-size: 15px;
padding: 0 30px 0 44px !important;
height: auto !important;
line-height: normal !important;
margin: 0 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
white-space: nowrap !important;
cursor: pointer;
}
.search-input-wrapper .select-wrapper input.select-dropdown:focus {
border: none !important;
box-shadow: none !important;
}
.search-input-wrapper .select-wrapper .caret {
fill: #4169E1 !important;
right: 4px;
}
/* ============================================
SEARCH SELECT MULTISELECT IN MODERN INPUT
Fix for icon overlap with tags
============================================ */
/* Wrapper needs flex-wrap for multiselect */
.modern-input.city-multiselect-wrapper,
.modern-input.event-multiselect-wrapper,
.modern-input.service-multiselect-wrapper {
flex-wrap: wrap;
align-items: flex-start;
padding: 10px 15px 10px 52px;
min-height: 56px;
overflow: hidden;
max-width: 100%;
box-sizing: border-box;
}
/* Icon positioning for multiselect */
.modern-input.city-multiselect-wrapper > i,
.modern-input.event-multiselect-wrapper > i,
.modern-input.service-multiselect-wrapper > i {
position: absolute;
left: 15px;
top: 16px;
}
/* Tags container */
.modern-input .ss-tags-container {
display: flex;
flex-wrap: wrap;
gap: 6px;
width: 100%;
max-width: 100%;
max-height: 120px;
overflow-y: auto;
overflow-x: hidden;
margin-bottom: 6px;
padding-right: 5px;
box-sizing: border-box;
}
.modern-input .ss-tags-container:empty {
display: none;
margin-bottom: 0;
}
/* Custom scrollbar for tags */
.modern-input .ss-tags-container::-webkit-scrollbar {
width: 4px;
}
.modern-input .ss-tags-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 2px;
}
.modern-input .ss-tags-container::-webkit-scrollbar-thumb {
background: #bdbdbd;
border-radius: 2px;
}
/* Tags styling improvements */
.modern-input .ss-tag {
display: inline-flex;
align-items: center;
gap: 5px;
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
color: #fff;
padding: 4px 10px;
border-radius: 16px;
font-size: 0.8rem;
font-weight: 500;
white-space: nowrap;
max-width: calc(100% - 10px);
box-sizing: border-box;
}
.modern-input .ss-tag .ss-tag-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.modern-input .ss-tag-remove {
cursor: pointer;
font-size: 14px;
line-height: 1;
opacity: 0.8;
transition: opacity 0.15s;
flex-shrink: 0;
}
.modern-input .ss-tag-remove:hover {
opacity: 1;
}
/* Count tag (when too many) */
.modern-input .ss-tag-count {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
font-weight: 600;
max-width: none;
}
/* Input inside multiselect wrapper */
.modern-input.city-multiselect-wrapper input,
.modern-input.event-multiselect-wrapper input,
.modern-input.service-multiselect-wrapper input {
width: 100%;
padding: 8px 0 !important;
min-width: 100px;
flex: 1;
max-width: 100%;
box-sizing: border-box;
}
/* Dropdown positioning fix */
.modern-input .ss-dropdown {
left: 0;
right: 0;
top: calc(100% + 5px);
max-width: 100%;
box-sizing: border-box;
}
/* Input label for multiselect */
.modern-input-group .input-label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: #555;
margin-bottom: 6px;
}
/* ============================================
MULTISELECT RESPONSIVE - TABLET
============================================ */
@media only screen and (max-width: 992px) {
.modern-input.city-multiselect-wrapper,
.modern-input.event-multiselect-wrapper,
.modern-input.service-multiselect-wrapper {
padding: 8px 12px 8px 46px;
}
.modern-input .ss-tag {
padding: 3px 8px;
font-size: 0.75rem;
gap: 4px;
max-width: calc(50% - 6px);
}
.modern-input .ss-tag .ss-tag-text {
max-width: 100%;
}
.modern-input .ss-tags-container {
gap: 5px;
max-height: 100px;
}
.modern-input.city-multiselect-wrapper input,
.modern-input.event-multiselect-wrapper input,
.modern-input.service-multiselect-wrapper input {
min-width: 80px;
font-size: 0.9rem !important;
}
}
/* ============================================
MULTISELECT RESPONSIVE - MOBILE
============================================ */
@media only screen and (max-width: 600px) {
.modern-input.city-multiselect-wrapper,
.modern-input.event-multiselect-wrapper,
.modern-input.service-multiselect-wrapper {
padding: 8px 10px 8px 40px;
min-height: 48px;
}
.modern-input.city-multiselect-wrapper > i,
.modern-input.event-multiselect-wrapper > i,
.modern-input.service-multiselect-wrapper > i {
left: 10px;
top: 14px;
font-size: 20px;
}
.modern-input .ss-tag {
padding: 2px 7px;
font-size: 0.7rem;
border-radius: 12px;
gap: 3px;
max-width: calc(100% - 6px);
}
.modern-input .ss-tag .ss-tag-text {
max-width: 100%;
}
.modern-input .ss-tag-remove {
font-size: 12px;
}
.modern-input .ss-tags-container {
gap: 4px;
max-height: 85px;
padding-right: 3px;
}
.modern-input.city-multiselect-wrapper input,
.modern-input.event-multiselect-wrapper input,
.modern-input.service-multiselect-wrapper input {
min-width: 60px;
font-size: 0.85rem !important;
padding: 6px 0 !important;
}
.modern-input .ss-dropdown {
max-height: 200px;
}
.modern-input .ss-dropdown .ss-item {
padding: 10px 12px;
font-size: 0.85rem;
}
}
/* ============================================
MULTISELECT RESPONSIVE - SMALL MOBILE
============================================ */
@media only screen and (max-width: 375px) {
.modern-input.city-multiselect-wrapper,
.modern-input.event-multiselect-wrapper,
.modern-input.service-multiselect-wrapper {
padding: 6px 8px 6px 36px;
}
.modern-input.city-multiselect-wrapper > i,
.modern-input.event-multiselect-wrapper > i,
.modern-input.service-multiselect-wrapper > i {
left: 8px;
font-size: 18px;
}
.modern-input .ss-tag {
font-size: 0.65rem;
padding: 2px 6px;
}
.modern-input.city-multiselect-wrapper input,
.modern-input.event-multiselect-wrapper input,
.modern-input.service-multiselect-wrapper input {
min-width: 50px;
font-size: 0.8rem !important;
}
}
.modern-checkbox {
margin-top: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: 12px;
position: relative;
}
.modern-checkbox label {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
font-size: 1rem;
color: #333;
position: relative;
}
/* Checkboxes inside status-checkboxes wrapper - no double margin/padding/bg */
.status-checkboxes .modern-checkbox {
margin-top: 0;
padding: 10px 12px;
background: transparent;
border-radius: 8px;
}
.modern-checkbox [type="checkbox"].filled-in:not(:checked) + span:not(.lever):after {
border: 2px solid #ccc;
background: transparent;
border-radius: 4px;
}
.modern-checkbox [type="checkbox"].filled-in:checked + span:not(.lever):after {
border: 2px solid #4169E1;
background-color: #4169E1;
border-radius: 4px;
}
.modern-checkbox [type="checkbox"].filled-in:checked + span:not(.lever):before {
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
/* ============================================
MODERN MODALS - FIXED
============================================ */
.modal:not(.datepicker-modal) {
border-radius: 20px !important;
overflow: hidden !important;
max-width: 550px;
width: 90% !important;
max-height: 85vh !important;
max-height: 85dvh !important;
box-shadow: 0 25px 80px rgba(0,0,0,0.25) !important;
}
.modal.open:not(.datepicker-modal) {
display: flex !important;
flex-direction: column !important;
}
.modal.modal-fixed-footer {
height: auto !important;
max-height: 85vh !important;
max-height: 85dvh !important;
}
.modal:not(.datepicker-modal) > .modal-content {
padding: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
}
/* Datepicker modal - restore native Materialize styles */
.datepicker-modal {
max-height: none !important;
overflow: hidden !important;
border-radius: 8px !important;
background-color: #fafafa !important;
}
.datepicker-modal .modal-content.datepicker-container {
padding: 0 !important;
}
.datepicker-modal .datepicker-controls .select-wrapper input.select-dropdown {
border: none !important;
height: auto !important;
padding: 0 !important;
font-size: 1rem !important;
margin: 0 !important;
}
.modal-header {
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
padding: 25px;
position: relative;
flex-shrink: 0 !important;
}
.modal-header h4 {
color: #fff;
font-size: 1.4rem;
font-weight: 700;
margin: 0;
padding-right: 40px;
}
.modal-header .close-btn {
position: absolute;
top: 18px;
right: 18px;
background: rgba(255,255,255,0.2);
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.modal-header .close-btn:hover {
background: rgba(255,255,255,0.3);
}
.modal-header .close-btn i {
color: #fff;
font-size: 18px;
}
.modal-body {
padding: 25px;
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* ==========================================
Modal Input Fields - Comprehensive Styling
========================================== */
.modal .input-field {
margin-bottom: 22px;
margin-top: 0;
}
/* All input types - consistent border/radius */
.modal .input-field input[type="text"],
.modal .input-field input[type="email"],
.modal .input-field input[type="password"],
.modal .input-field input[type="number"],
.modal .input-field input[type="tel"],
.modal .input-field input[type="url"] {
border: 2px solid #e0e0e0 !important;
border-radius: 10px !important;
padding: 12px 14px !important;
height: auto !important;
box-sizing: border-box !important;
transition: all 0.3s ease !important;
box-shadow: none !important;
margin: 0 !important;
background: #fff !important;
}
/* Focus state */
.modal .input-field input[type="text"]:focus,
.modal .input-field input[type="email"]:focus,
.modal .input-field input[type="password"]:focus,
.modal .input-field input[type="number"]:focus,
.modal .input-field input[type="tel"]:focus,
.modal .input-field input[type="url"]:focus {
border-color: #4169E1 !important;
box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.12) !important;
border-bottom: 2px solid #4169E1 !important;
}
/* Remove Materialize default underline */
.modal .input-field input:not(.browser-default):not(.select-dropdown) {
border-bottom: 2px solid #e0e0e0 !important;
}
.modal .input-field input:not(.browser-default):not(.select-dropdown):focus {
border-bottom: 2px solid #4169E1 !important;
}
/* Textarea styling */
.modal .input-field textarea.materialize-textarea {
border: 2px solid #e0e0e0 !important;
border-radius: 10px !important;
padding: 12px 14px !important;
box-sizing: border-box !important;
min-height: 80px;
transition: border-color 0.3s ease !important;
box-shadow: none !important;
background: #fff !important;
}
.modal .input-field textarea.materialize-textarea:focus {
border-color: #4169E1 !important;
box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.12) !important;
border-bottom: 2px solid #4169E1 !important;
}
/* Prefix icon positioning */
.modal .input-field .prefix {
top: 12px;
font-size: 22px;
}
/* When prefix icon exists - add left padding */
.modal .input-field .prefix ~ input,
.modal .input-field .prefix ~ textarea {
padding-left: 45px !important;
}
/* Label positioning - DEFAULT (no prefix icon) */
.modal .input-field label {
left: 14px;
top: 0;
font-size: 0.9rem;
color: #888;
}
/* Label positioning - WITH prefix icon */
.modal .input-field .prefix ~ label {
left: 45px;
}
/* Label active state */
.modal .input-field label.active {
transform: translateY(-24px) scale(0.85);
left: 0 !important;
color: #4169E1;
font-weight: 500;
}
/* Select label in modals - always active position (selects always have value) */
.modal .input-field .select-wrapper ~ label {
transform: translateY(-24px) scale(0.85);
transform-origin: 0 0;
left: 0 !important;
color: #4169E1;
font-weight: 500;
}
/* Materialize row inside modal - proper spacing */
.modal .modal-body > .row {
margin-bottom: 0;
}
.modal .modal-body > .row > .col {
padding: 0 10px;
}
/* Checkbox styling - Remove blue line */
.modal [type="checkbox"].filled-in:not(:checked) + span:not(.lever):after {
border: 2px solid #e0e0e0;
background: transparent;
}
.modal [type="checkbox"].filled-in:checked + span:not(.lever):after {
border: 2px solid #4169E1;
background-color: #4169E1;
}
.modal [type="checkbox"].filled-in:checked + span:not(.lever):before {
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
/* Modal Footer - Rounded corners */
.modal-footer,
.modal .modal-footer {
padding: 18px 25px !important;
background: #fafbfc !important;
border-top: 1px solid #f0f0f0 !important;
display: flex !important;
gap: 12px !important;
justify-content: flex-end !important;
border-radius: 0 0 20px 20px !important;
height: auto !important;
flex-shrink: 0 !important;
}
.modal-footer .btn-cancel,
.modal-footer .btn-flat {
background: #f5f5f5 !important;
color: #666 !important;
border-radius: 10px !important;
padding: 0 24px !important;
height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
font-weight: 600 !important;
font-size: 14px !important;
transition: all 0.3s ease !important;
text-transform: none !important;
line-height: 1 !important;
}
.modal-footer .btn-cancel:hover,
.modal-footer .btn-flat:hover {
background: #eeeeee !important;
}
.modal-footer .btn-confirm {
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%) !important;
color: #fff !important;
border-radius: 10px !important;
padding: 0 24px !important;
height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
font-weight: 600 !important;
font-size: 14px !important;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
transition: all 0.3s ease !important;
text-transform: none !important;
line-height: 1 !important;
}
.modal-footer .btn-confirm:hover {
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
transform: translateY(-2px);
}
.modal-footer .btn-delete {
background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%) !important;
color: #fff !important;
border-radius: 10px !important;
padding: 0 24px !important;
height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
font-weight: 600 !important;
font-size: 14px !important;
box-shadow: 0 4px 15px rgba(255, 65, 108, 0.3) !important;
transition: all 0.3s ease !important;
text-transform: none !important;
line-height: 1 !important;
}
.modal-footer .btn-delete:hover {
box-shadow: 0 6px 20px rgba(255, 65, 108, 0.4) !important;
transform: translateY(-2px);
}
/* Delete Modal Content */
.delete-modal-content {
text-align: center;
padding: 30px 25px;
}
.delete-modal-content .delete-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.delete-modal-content .delete-icon i {
color: #fff;
font-size: 35px;
}
.delete-modal-content h5 {
color: #333;
font-size: 1.3rem;
margin-bottom: 8px;
}
.delete-modal-content p {
color: #666;
font-size: 0.95rem;
}
/* Display Row Modal - old section removed, styles consolidated below (~line 5155+) */
/* Articles Modal */
.articles-modal {
max-width: 600px;
}
.articles-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
.article-chip {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
color: #fff;
padding: 10px 18px;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.9rem;
}
.article-chip:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(17, 153, 142, 0.3);
}
.article-chip i {
font-size: 16px;
}
/* ============================================
WELCOME PAGE - PUBLIC COMPANIES VIEW
============================================ */
.welcome-header {
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
border-radius: 20px;
padding: 50px 40px;
margin-bottom: 40px;
position: relative;
overflow: hidden;
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
text-align: center;
}
.welcome-header::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
}
.welcome-header h1 {
color: #fff;
font-size: 2.5rem;
font-weight: 700;
margin: 0 0 15px 0;
position: relative;
z-index: 1;
}
.welcome-header p {
color: rgba(255,255,255,0.9);
font-size: 1.2rem;
margin: 0;
position: relative;
z-index: 1;
}
/* Public Company Card - Enhanced Glassmorphism Style */
.public-company-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.95) 100%);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 18px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow:
0 10px 40px rgba(0, 0, 0, 0.08),
0 2px 10px rgba(65, 105, 225, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
height: 100%;
border: 1px solid rgba(255, 255, 255, 0.5);
position: relative;
}
/* Subtle gradient border on hover */
.public-company-card::before {
content: '';
position: absolute;
inset: -1px;
border-radius: 19px;
padding: 1px;
background: linear-gradient(135deg, rgba(65, 105, 225, 0.3) 0%, rgba(17, 153, 142, 0.2) 50%, rgba(65, 105, 225, 0.3) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.public-company-card:hover::before {
opacity: 1;
}
.public-company-card:hover {
transform: translateY(-10px) scale(1.01);
box-shadow:
0 25px 60px rgba(65, 105, 225, 0.18),
0 10px 25px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
border-color: rgba(65, 105, 225, 0.2);
}
.public-company-card .card-image-wrapper {
height: 230px;
overflow: hidden;
position: relative;
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
}
.public-company-card .card-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.public-company-card:hover .card-image-wrapper img {
transform: scale(1.1);
}
.public-company-card .card-image-wrapper .company-initial {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90px;
height: 90px;
background: rgba(255,255,255,0.2);
border-radius: 22px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.8rem;
font-weight: 700;
color: #fff;
backdrop-filter: blur(10px);
border: 3px solid rgba(255,255,255,0.3);
}
.public-company-card .card-content {
padding: 10px 14px 10px;
position: relative;
}
.public-company-card .card-title {
font-size: 1.05rem;
font-weight: 800;
color: #1a1a2e;
margin: 0 0 4px 0;
line-height: 1.25;
letter-spacing: -0.01em;
transition: color 0.3s ease;
}
.public-company-card:hover .card-title {
color: #4169E1;
}
.public-company-card .company-location {
display: flex;
align-items: center;
gap: 5px;
color: #4169E1;
font-size: 0.8rem;
margin-bottom: 4px;
}
.public-company-card .company-location i {
font-size: 16px;
}
.public-company-card .company-description {
color: #666;
font-size: 0.78rem;
line-height: 1.45;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
letter-spacing: 0.01em;
}
/* Clickable Company Card */
.public-company-card.clickable-card {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.public-company-card.clickable-card .card-action-hint {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 18px;
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
color: #fff;
font-weight: 600;
font-size: 0.85rem;
transition: all 0.35s ease;
margin-top: auto;
position: relative;
overflow: hidden;
}
/* Shimmer effect on card action */
.public-company-card.clickable-card .card-action-hint::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
transition: left 0.5s ease;
}
.public-company-card.clickable-card:hover .card-action-hint::before {
left: 100%;
}
.public-company-card.clickable-card:hover .card-action-hint {
background: linear-gradient(135deg, #3658C8 0%, #284A9C 100%);
padding-left: 22px;
padding-right: 22px;
}
.public-company-card.clickable-card .card-action-hint i {
font-size: 18px;
transition: transform 0.3s ease;
}
.public-company-card.clickable-card:hover .card-action-hint i {
transform: translateX(5px);
}
/* Company Card Image */
.public-company-card .company-card-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.public-company-card:hover .company-card-image {
transform: scale(1.1);
}
/* ============================================
COMPANY DASHBOARD
============================================ */
.dashboard-header {
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
border-radius: 20px;
padding: 30px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.3);
}
.dashboard-header h4 {
color: #fff;
font-size: 1.8rem;
font-weight: 700;
margin: 0;
}
.dashboard-header p {
color: rgba(255,255,255,0.85);
margin-top: 8px;
font-size: 1rem;
}
/* Breadcrumb Navigation - Light Theme (for white/light backgrounds) */
.breadcrumb-nav {
background: #fff;
border-radius: 12px;
padding: 12px 20px;
margin-bottom: 25px;
box-shadow: 0 4px 15px rgba(0,0,0,0.06);
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.breadcrumb-nav a {
color: #4169E1;
font-weight: 600;
display: flex;
align-items: center;
gap: 5px;
transition: all 0.3s ease;
text-decoration: none;
}
.breadcrumb-nav a:hover {
color: #3155B5;
}
.breadcrumb-nav .separator {
color: #ccc;
}
.breadcrumb-nav .current {
color: #333;
font-weight: 600;
background: #f0f0f0;
padding: 5px 15px;
border-radius: 20px;
}
/* Breadcrumb Navigation - Dark Theme (for gradient/dark backgrounds) */
.breadcrumb-nav.dark-theme,
.company-hero .breadcrumb-nav,
.article-hero .breadcrumb-nav {
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
margin-bottom: 30px !important;
}
.breadcrumb-nav.dark-theme a,
.company-hero .breadcrumb-nav a,
.article-hero .breadcrumb-nav a {
color: rgba(255,255,255,0.85) !important;
font-weight: 500 !important;
padding: 6px 12px;
border-radius: 20px;
background: rgba(255,255,255,0.1);
}
.breadcrumb-nav.dark-theme a:hover,
.company-hero .breadcrumb-nav a:hover,
.article-hero .breadcrumb-nav a:hover {
color: #fff !important;
background: rgba(255,255,255,0.2);
}
.breadcrumb-nav.dark-theme .separator,
.company-hero .breadcrumb-nav .separator,
.article-hero .breadcrumb-nav .separator {
color: rgba(255,255,255,0.5) !important;
}
.breadcrumb-nav.dark-theme .current,
.company-hero .breadcrumb-nav .current,
.article-hero .breadcrumb-nav .current {
color: #fff !important;
font-weight: 600 !important;
background: rgba(255,255,255,0.2) !important;
padding: 6px 16px !important;
border-radius: 20px !important;
}
/* Article Cards Grid */
.articles-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.article-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
cursor: pointer;
}
.article-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
.article-card .card-image-wrapper {
height: 140px;
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.article-card .card-image-wrapper::before {
content: '';
position: absolute;
top: -50%;
right: -30%;
width: 100px;
height: 200px;
background: rgba(255,255,255,0.1);
transform: rotate(45deg);
}
.article-card .card-image-wrapper i {
font-size: 50px;
color: rgba(255,255,255,0.9);
}
.article-card .card-content {
padding: 20px;
text-align: center;
}
.article-card .card-title {
font-size: 1.1rem;
font-weight: 600;
color: #333;
margin: 0;
}
/* ============================================
EMPTY STATE
============================================ */
.empty-state {
text-align: center;
padding: 60px 30px;
background: #fff;
border-radius: 20px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.empty-state .empty-icon {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
}
.empty-state .empty-icon i {
font-size: 50px;
color: #fff;
}
.empty-state h5 {
color: #333;
font-size: 1.3rem;
margin-bottom: 8px;
}
.empty-state p {
color: #888;
font-size: 0.95rem;
margin-bottom: 25px;
}
/* ============================================
LOADING SPINNER
============================================ */
.loading-spinner {
width: 50px;
height: 50px;
border: 4px solid #f0f0f0;
border-top-color: #4169E1;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ============================================
UPLOAD OVERLAY LOADER
============================================ */
.upload-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.55);
z-index: 99999;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 18px;
}
.upload-overlay.active {
display: flex;
}
.upload-overlay .upload-overlay-spinner {
width: 56px;
height: 56px;
border: 5px solid rgba(255, 255, 255, 0.25);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.upload-overlay .upload-overlay-text {
color: #fff;
font-size: 17px;
font-weight: 500;
letter-spacing: 0.3px;
}
/* ============================================
RESPONSIVE - COMPREHENSIVE BREAKPOINTS
============================================ */
/* Extra Large Desktop (1400px+) */
@media (min-width: 1400px) {
.companies-grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.articles-card-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.welcome-header h1 {
font-size: 3rem;
}
}
/* Large Desktop (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
.companies-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
}
/* Standard Desktop / Large Tablet Landscape (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
.companies-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.welcome-header h1 {
font-size: 2.2rem;
}
}
/* Tablet Portrait / Small Desktop (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
.companies-page-container,
.welcome-page-container,
.dashboard-page-container {
padding: 0 15px;
}
.companies-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.articles-card-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.welcome-header {
padding: 35px 25px;
}
.welcome-header h1 {
font-size: 2rem;
}
.welcome-header p {
font-size: 1rem;
}
.search-filter-bar {
padding: 15px 20px;
gap: 15px;
}
.search-filter-bar .search-input-wrapper {
min-width: 200px;
}
.modal:not(.datepicker-modal) {
width: 90% !important;
max-width: 500px;
}
}
/* Mobile Landscape / Small Tablet (600px - 767px) */
@media (min-width: 600px) and (max-width: 767px) {
.companies-page-container,
.welcome-page-container,
.dashboard-page-container {
padding: 0 12px;
}
.companies-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.articles-card-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.welcome-header {
padding: 30px 20px;
border-radius: 16px;
}
.welcome-header h1 {
font-size: 1.6rem;
}
.welcome-header p {
font-size: 0.95rem;
}
.company-card .card-actions {
flex-wrap: wrap;
gap: 6px;
}
.company-card .card-actions .action-btn {
flex: 1 1 45%;
padding: 8px 4px;
font-size: 0.75rem;
}
.public-company-card .card-content {
padding: 18px;
}
.public-company-card .card-title {
font-size: 1.1rem;
}
.search-filter-bar {
padding: 15px;
flex-direction: column;
gap: 12px;
}
.search-filter-bar .search-input-wrapper {
width: 100%;
min-width: auto;
}
.add-company-btn,
.add-btn {
width: 100%;
justify-content: center;
}
.modal:not(.datepicker-modal) {
width: 95% !important;
max-height: 90vh !important;
max-height: 90dvh !important;
}
.modal-body {
padding: 20px;
}
}
/* Mobile Portrait (max-width: 599px) */
@media (max-width: 599px) {
main {
padding: 10px 0;
}
.companies-page-container,
.welcome-page-container,
.dashboard-page-container {
padding: 0 10px;
}
.companies-grid,
.articles-card-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.welcome-header {
padding: 25px 15px;
margin-bottom: 25px;
border-radius: 14px;
}
.welcome-header h1 {
font-size: 1.4rem;
line-height: 1.3;
}
.welcome-header p {
font-size: 0.9rem;
}
/* Company Cards Mobile */
.company-card {
border-radius: 14px;
}
.company-card .card-header {
padding: 15px;
}
.company-card .company-avatar {
width: 45px;
height: 45px;
font-size: 1.2rem;
}
.company-card .company-name {
font-size: 1.05rem;
}
.company-card .card-body {
padding: 15px;
}
.company-card .card-actions {
flex-wrap: wrap;
padding: 12px 15px;
gap: 8px;
}
.company-card .card-actions .action-btn {
flex: 1 1 calc(50% - 4px);
padding: 10px 8px;
font-size: 0.78rem;
}
/* Public Company Cards Mobile */
.public-company-card {
border-radius: 16px;
}
.public-company-card .card-image-wrapper {
height: 200px;
}
.public-company-card .card-image-wrapper .company-initial {
width: 75px;
height: 75px;
font-size: 2.3rem;
}
.public-company-card .card-content {
padding: 12px 16px;
}
.public-company-card .card-title {
font-size: 1.15rem;
}
.public-company-card.clickable-card .card-action-hint {
padding: 12px 18px;
font-size: 0.9rem;
}
/* Search Bar Mobile */
.search-filter-bar {
padding: 12px;
border-radius: 12px;
flex-direction: column;
gap: 10px;
}
.search-filter-bar .search-input-wrapper {
width: 100%;
min-width: auto;
}
.search-filter-bar input[type="text"] {
padding: 10px 12px 10px 45px !important;
font-size: 0.95rem;
}
.search-filter-bar .search-input-wrapper i {
left: 12px;
}
/* Buttons Mobile */
.add-company-btn,
.add-btn {
width: 100%;
justify-content: center;
padding: 10px 20px;
font-size: 0.9rem;
}
/* Article Cards Mobile */
.article-card .card-image-wrapper {
height: 120px;
}
.article-card .card-content {
padding: 15px;
}
.article-card .card-title {
font-size: 1rem;
}
/* Modals Mobile - full screen for easy access to buttons */
.modal:not(.datepicker-modal):not(.modal-dialog) {
width: 100% !important;
height: 100vh !important;
height: 100dvh !important;
max-height: 100vh !important;
max-height: 100dvh !important;
border-radius: 0 !important;
margin: 0 !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
}
/* Datepicker modal - keep native size on mobile */
.datepicker-modal {
max-height: none !important;
border-radius: 8px !important;
overflow: hidden !important;
background-color: #fafafa !important;
}
.modal-header {
padding: 16px 15px;
}
.modal-header h4 {
font-size: 1.15rem;
padding-right: 35px;
}
.modal-header .close-btn {
top: 12px;
right: 12px;
width: 32px;
height: 32px;
}
.modal-body {
padding: 18px 15px;
}
.modal-footer {
padding: 12px 15px !important;
gap: 10px !important;
flex-wrap: nowrap !important;
}
.modal-footer .btn-cancel,
.modal-footer .btn-flat,
.modal-footer .btn-confirm,
.modal-footer .btn-delete {
flex: 1 1 auto;
min-width: 100px;
padding: 0 16px !important;
height: 40px !important;
line-height: 40px !important;
font-size: 0.85rem !important;
}
/* Input fields Mobile */
.modern-input input {
padding: 14px 14px 14px 48px !important;
font-size: 0.95rem !important;
}
.modern-input textarea {
padding: 14px 14px 14px 48px !important;
font-size: 0.95rem !important;
}
.modern-input > i {
font-size: 20px;
}
.modal .input-field input[type="text"],
.modal .input-field input[type="email"],
.modal .input-field input[type="password"] {
padding: 10px 10px 10px 40px !important;
font-size: 0.95rem;
}
/* Dashboard Header Mobile */
.dashboard-header {
padding: 20px 15px;
border-radius: 16px;
}
.dashboard-header h4 {
font-size: 1.4rem;
}
/* Breadcrumb Mobile */
.breadcrumb-nav {
padding: 10px 15px;
font-size: 0.85rem;
}
/* Empty State Mobile */
.empty-state {
padding: 40px 20px;
}
.empty-state .empty-icon {
width: 80px;
height: 80px;
}
.empty-state .empty-icon i {
font-size: 40px;
}
.empty-state h5 {
font-size: 1.15rem;
}
.empty-state p {
font-size: 0.9rem;
}
/* Delete Modal Mobile */
.delete-modal-content {
padding: 20px 15px;
}
.delete-modal-content .delete-icon {
width: 60px;
height: 60px;
}
.delete-modal-content .delete-icon i {
font-size: 28px;
}
.delete-modal-content h5 {
font-size: 1.15rem;
}
/* Display Row Modal Mobile - consolidated below */
/* Article Chip Mobile */
.article-chip {
padding: 8px 14px;
font-size: 0.85rem;
}
}
/* Extra Small Mobile (max-width: 375px) */
@media (max-width: 375px) {
.welcome-header h1 {
font-size: 1.25rem;
}
.company-card .company-name {
font-size: 1rem;
}
.company-card .card-actions .action-btn {
flex: 1 1 100%;
}
.modal-footer {
flex-direction: column !important;
}
.modal-footer .btn-cancel,
.modal-footer .btn-flat,
.modal-footer .btn-confirm,
.modal-footer .btn-delete {
width: 100%;
}
}
/* ============================================
ANIMATIONS
============================================ */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.company-card,
.public-company-card,
.article-card {
animation: fadeInUp 0.4s ease forwards;
}
.company-card:nth-child(1), .public-company-card:nth-child(1), .article-card:nth-child(1) { animation-delay: 0.05s; }
.company-card:nth-child(2), .public-company-card:nth-child(2), .article-card:nth-child(2) { animation-delay: 0.1s; }
.company-card:nth-child(3), .public-company-card:nth-child(3), .article-card:nth-child(3) { animation-delay: 0.15s; }
.company-card:nth-child(4), .public-company-card:nth-child(4), .article-card:nth-child(4) { animation-delay: 0.2s; }
.company-card:nth-child(5), .public-company-card:nth-child(5), .article-card:nth-child(5) { animation-delay: 0.25s; }
.company-card:nth-child(6), .public-company-card:nth-child(6), .article-card:nth-child(6) { animation-delay: 0.3s; }
/* ============================================
TOAST NOTIFICATIONS
============================================ */
.toast-success {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
border-radius: 10px !important;
}
.toast-error {
background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%) !important;
border-radius: 10px !important;
}
/* ============================================
SCROLLBAR
============================================ */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f5f5f5;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #3658C8 0%, #284A9C 100%);
}
/* ============================================
ACL PERMISSION TREE - HIERARCHICAL VIEW
============================================ */
.acl-tree {
list-style: none;
padding: 0;
margin: 0;
}
.acl-tree .tree-item {
padding: 8px 12px;
border-bottom: 1px solid #f0f0f0;
}
.acl-tree .tree-item:last-child {
border-bottom: none;
}
.acl-tree .tree-item label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.acl-tree .tree-item label span {
display: flex;
align-items: center;
gap: 6px;
}
/* Folder styles */
.acl-tree .tree-folder {
margin-bottom: 8px;
}
.acl-tree .folder-header {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 15px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid #e0e0e0;
}
.acl-tree .folder-header:hover {
background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
}
.acl-tree .folder-header .folder-icon {
color: #4169E1;
font-size: 22px;
}
.acl-tree .folder-header .folder-name {
font-weight: 600;
color: #333;
flex: 1;
}
.acl-tree .folder-header .folder-toggle-icon {
color: #666;
transition: transform 0.2s ease;
}
.acl-tree .tree-folder.open .folder-header .folder-toggle-icon {
transform: rotate(180deg);
}
.acl-tree .tree-folder.open .folder-header {
border-radius: 10px 10px 0 0;
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
border-color: #4169E1;
}
.acl-tree .tree-folder.open .folder-header .folder-icon,
.acl-tree .tree-folder.open .folder-header .folder-name,
.acl-tree .tree-folder.open .folder-header .folder-toggle-icon {
color: #fff;
}
/* Folder children */
.acl-tree .folder-children {
list-style: none;
padding: 0;
margin: 0;
display: none;
background: #fff;
border: 1px solid #e0e0e0;
border-top: none;
border-radius: 0 0 10px 10px;
}
.acl-tree .tree-folder.open .folder-children {
display: block;
}
.acl-tree .folder-children .tree-item {
padding: 10px 15px 10px 45px;
border-bottom: 1px solid #f5f5f5;
}
.acl-tree .folder-children .tree-item:last-child {
border-bottom: none;
border-radius: 0 0 10px 10px;
}
.acl-tree .folder-children .tree-item:hover {
background: #f8f9fa;
}
/* ============================================
RESPONSIVE TABLES
============================================ */
/* Make tables scrollable on mobile */
.table-responsive {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-responsive table {
min-width: 600px;
}
/* Materialize table responsive enhancements */
table.responsive-table {
border-collapse: collapse;
}
/* Tablet: keep table layout (full width available without sidebar) */
@media (min-width: 601px) and (max-width: 992px) {
table.responsive-table {
display: table;
}
table.responsive-table thead {
display: table-header-group;
}
table.responsive-table tbody tr {
display: table-row;
}
table.responsive-table tbody td {
display: table-cell;
padding: 10px 12px;
font-size: 0.88rem;
}
table.responsive-table th {
padding: 10px 12px;
font-size: 0.85rem;
}
}
/* Phone: convert table to card layout */
@media (max-width: 600px) {
table.responsive-table thead {
display: none;
}
table.responsive-table tbody tr {
display: block;
margin-bottom: 15px;
border: 1px solid #e0e0e0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
table.responsive-table tbody td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
border-bottom: 1px solid #f0f0f0;
text-align: right;
}
table.responsive-table tbody td:last-child {
border-bottom: none;
}
table.responsive-table tbody td::before {
content: attr(data-label);
font-weight: 600;
color: #333;
text-align: left;
padding-right: 15px;
flex-shrink: 0;
}
table.responsive-table tbody td .btn,
table.responsive-table tbody td .btn-small {
margin: 2px;
}
}
/* ============================================
ACL PANEL RESPONSIVE
============================================ */
/* ACL Tabs Responsive */
@media (max-width: 768px) {
.tabs.tabs-fixed-width .tab {
min-width: auto;
padding: 0;
}
.tabs.tabs-fixed-width .tab a {
padding: 0 10px;
font-size: 0.85rem;
}
.tabs.tabs-fixed-width .tab a i.left {
margin-right: 4px;
font-size: 18px;
}
}
@media (max-width: 600px) {
.tabs.tabs-fixed-width .tab a i.left {
display: none;
}
.tabs.tabs-fixed-width .tab a {
font-size: 0.8rem;
padding: 0 8px;
}
}
/* ACL Permission Matrix Responsive */
.acl-section {
padding: 0;
}
@media (max-width: 768px) {
.acl-section .card {
margin: 0 0 15px 0;
}
.acl-section .card-content {
padding: 15px;
}
.acl-section .card-title {
font-size: 1.1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.acl-section .card-title .btn-floating {
position: relative;
right: auto;
float: none;
}
}
/* ACL Tree Responsive */
@media (max-width: 600px) {
.acl-tree .folder-header {
padding: 10px 12px;
}
.acl-tree .folder-header .folder-name {
font-size: 0.9rem;
}
.acl-tree .folder-children .tree-item {
padding: 8px 12px 8px 35px;
}
.acl-tree .tree-item label span {
font-size: 0.9rem;
}
}
/* Roles List Responsive */
@media (max-width: 768px) {
.collection.roles-list .collection-item {
padding: 15px;
}
.collection.roles-list .collection-item .title {
font-size: 1rem;
}
}
/* ============================================
DB UPDATES PAGE RESPONSIVE
============================================ */
@media (max-width: 768px) {
/* Chips responsive */
.chip {
margin: 3px;
font-size: 0.85rem;
}
.chip i.material-icons {
font-size: 16px;
}
/* DB Updates buttons */
#tab-updates .btn,
#tab-connections .btn {
margin: 5px 5px 5px 0;
padding: 0 15px;
}
#tab-updates .btn i.left,
#tab-connections .btn i.left {
margin-right: 5px;
}
/* Connection selector */
.input-field.col.s12.m6 {
width: 100%;
}
}
@media (max-width: 600px) {
#tab-updates .btn,
#tab-connections .btn {
width: 100%;
margin: 5px 0;
}
.chip {
width: 100%;
margin: 5px 0;
display: flex;
justify-content: center;
}
}
/* ============================================
LOGIN PAGES RESPONSIVE
============================================ */
@media (max-width: 600px) {
.login-page-bg {
padding: 20px 15px;
min-height: calc(100vh - 100px);
}
.login-card {
border-radius: 20px;
}
.login-card-header {
padding: 30px 20px;
}
.login-card-header .icon-wrapper {
width: 65px;
height: 65px;
border-radius: 16px;
}
.login-card-header .icon-wrapper i {
font-size: 32px;
}
.login-card-header h4 {
font-size: 1.3rem;
}
.login-card-header p {
font-size: 0.9rem;
}
.login-card-body {
padding: 25px 20px;
}
.login-input input {
padding: 14px 14px 14px 48px !important;
}
.btn-login {
padding: 14px !important;
font-size: 0.95rem !important;
}
.login-card-footer {
padding: 15px 20px;
}
}
/* ============================================
FORM ELEMENTS RESPONSIVE
============================================ */
@media (max-width: 600px) {
/* Input fields */
.input-field {
margin-top: 0;
margin-bottom: 15px;
}
.input-field .prefix {
font-size: 24px;
top: 8px;
}
.input-field input,
.input-field textarea {
font-size: 16px !important; /* Prevents zoom on iOS */
}
/* Row columns */
.row .col.s6,
.row .col.s4,
.row .col.s8 {
width: 100%;
}
.row .col {
margin-bottom: 10px;
}
}
/* ============================================
CARDS RESPONSIVE
============================================ */
@media (max-width: 768px) {
.card {
margin: 0.5rem 0;
}
.card .card-content {
padding: 18px;
}
.card .card-title {
font-size: 1.2rem;
}
.card .card-action {
padding: 12px 18px;
}
}
@media (max-width: 600px) {
.card .card-content {
padding: 15px;
}
.card .card-title {
font-size: 1.1rem;
}
}
/* ============================================
BUTTONS RESPONSIVE
============================================ */
@media (max-width: 600px) {
.btn, .btn-large {
padding: 0 16px;
height: 38px;
line-height: 38px;
font-size: 0.9rem;
}
.btn i.material-icons {
font-size: 20px;
}
.btn-small {
padding: 0 10px;
height: 30px;
line-height: 30px;
}
.btn-floating.btn-large {
width: 50px;
height: 50px;
}
.btn-floating.btn-large i {
line-height: 50px;
font-size: 24px;
}
}
/* ============================================
TABLET RESPONSIVE (601px - 992px)
Samsung Galaxy Tab A11 ~800px portrait
============================================ */
@media screen and (min-width: 601px) and (max-width: 992px) {
/* Search filter bar - compact for tablet */
.search-filter-bar {
padding: 15px 18px;
gap: 12px;
}
.search-filter-bar .search-input-wrapper {
min-width: 180px;
}
/* Modals - better tablet sizing */
.modal:not(.datepicker-modal) {
width: 85% !important;
max-width: 600px;
}
.modal-lg {
width: 92% !important;
max-width: none;
}
/* CRUD Tables - keep table layout but tighter on tablet */
table th,
table td {
padding: 10px 12px;
font-size: 0.88rem;
}
/* Action buttons - slightly smaller on tablet */
.action-buttons .btn-small,
.btn-group .btn-small {
min-width: 30px;
height: 30px;
padding: 0 6px;
}
.action-buttons .btn-small i,
.btn-group .btn-small i {
font-size: 17px;
}
/* Stats rows - 2 columns on tablet */
.stats-row {
grid-template-columns: repeat(2, 1fr);
}
/* Cards content - slightly less padding */
.card .card-content {
padding: 18px;
}
/* Responsive table on tablet - keep as cards since sidebar is gone */
table.responsive-table tbody td {
padding: 10px 14px;
}
/* Display row modal */
.display-row-modal {
width: 80%;
max-width: 520px;
}
/* Messages - tablet adjustments */
.msg-chat-messages {
max-height: 450px;
}
/* Finance modal */
.modal-lg .modal-body {
max-height: calc(85vh - 160px);
padding: 22px;
}
/* Form fields - slightly smaller spacing */
.fields-row.three,
.fields-row.four {
flex-wrap: wrap;
}
.fields-row.four .field {
flex: 1 1 45%;
min-width: 45%;
}
/* ACL tabs */
.tabs.tabs-fixed-width .tab a {
font-size: 0.85rem;
padding: 0 12px;
}
}
/* ============================================
MATERIALIZE OVERRIDES - RESPONSIVE
============================================ */
@media (max-width: 992px) {
/* Better touch targets */
.collection-item {
min-height: 48px;
padding: 15px 20px !important;
}
/* Collapsible responsive */
.collapsible-header {
padding: 12px 15px;
}
.collapsible-body {
padding: 15px;
}
}
@media (max-width: 600px) {
/* Toast notifications */
#toast-container {
min-width: 90%;
left: 5%;
right: 5%;
bottom: 10px;
}
.toast {
border-radius: 8px !important;
font-size: 0.9rem;
}
/* Preloader */
.preloader-wrapper.big {
width: 50px;
height: 50px;
}
}
/* ============================================
UTILITY CLASSES - RESPONSIVE
============================================ */
/* Hide on specific breakpoints */
@media (max-width: 600px) {
.hide-on-small-only {
display: none !important;
}
}
@media (min-width: 601px) and (max-width: 992px) {
.hide-on-med-only {
display: none !important;
}
}
/* Text alignment responsive */
@media (max-width: 600px) {
.center-on-small {
text-align: center !important;
}
.left-on-small {
text-align: left !important;
}
}
/* Spacing responsive */
@media (max-width: 600px) {
.section {
padding-top: 1rem;
padding-bottom: 1rem;
}
}
/* ==========================================
Welcome Page - City Filter Section
========================================== */
.welcome-page-container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
/* ==========================================
Results Page - Premium Design
========================================== */
.results-page {
min-height: 100vh;
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ed 100%);
position: relative;
overflow-x: hidden;
}
/* Animated Background for Results */
.results-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
pointer-events: none;
}
.results-bg .bg-shape {
position: absolute;
border-radius: 50%;
filter: blur(100px);
opacity: 0.3;
animation: float 25s ease-in-out infinite;
}
.results-bg .shape-1 {
width: 500px;
height: 500px;
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
top: -200px;
right: -150px;
}
.results-bg .shape-2 {
width: 400px;
height: 400px;
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
bottom: -100px;
left: -100px;
animation-delay: -10s;
}
/* Header Bar */
.results-header-bar {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
padding: 0;
position: sticky;
top: 80px; /* Account for fixed header height */
z-index: 100;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
/* Adjust sticky top for tablet and mobile header heights */
@media only screen and (min-width: 601px) and (max-width: 992px) {
.results-header-bar {
top: 70px;
}
}
@media only screen and (max-width: 600px) {
.results-header-bar {
top: 65px;
}
}
.results-header-bar .header-content {
max-width: 1400px;
margin: 0 auto;
padding: 15px 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
.results-header-bar .back-link {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
padding: 10px 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 25px;
transition: all 0.3s ease;
}
.results-header-bar .back-link:hover {
background: rgba(255, 255, 255, 0.2);
color: white;
}
.results-header-bar .back-link i {
font-size: 20px;
}
.results-header-bar .city-badge {
display: flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
padding: 12px 25px;
border-radius: 30px;
color: white;
font-weight: 600;
}
.results-header-bar .city-badge i {
font-size: 22px;
}
.results-header-bar .city-badge .postal {
opacity: 0.8;
font-weight: 400;
margin-left: 5px;
}
/* Hero Section */
.results-hero {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
padding: 35px 20px;
text-align: center;
position: relative;
overflow: hidden;
}
.results-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
}
/* Hero Image Support */
.results-hero.has-hero-image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.results-hero.has-hero-image::before {
display: none;
}
.results-hero .hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(26,26,46,0.75) 0%, rgba(22,33,62,0.65) 100%);
z-index: 0;
}
.results-hero .hero-content {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.results-hero .hero-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4); }
50% { box-shadow: 0 20px 50px rgba(102, 126, 234, 0.6); }
}
.results-hero .hero-icon i {
font-size: 30px;
color: white;
}
.results-hero h1 {
color: white;
font-size: 1.8rem;
font-weight: 700;
margin: 0 0 10px 0;
line-height: 1.3;
}
.results-hero h1 .city-name-highlight {
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
}
.results-hero .hero-subtitle {
color: rgba(255, 255, 255, 0.7);
font-size: 1rem;
margin: 0 0 20px 0;
}
.results-hero .hero-stats {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 14px 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
max-width: fit-content;
margin: 0 auto;
}
.results-hero .stat-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.results-hero .stat-box .stat-number {
font-size: 1.6rem;
font-weight: 700;
color: white;
}
.results-hero .stat-box .stat-label {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.results-hero .stat-box i {
font-size: 24px;
color: #4169E1;
}
.results-hero .stat-divider {
width: 1px;
height: 30px;
background: rgba(255, 255, 255, 0.2);
}
/* Main Layout */
.results-main {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
display: grid;
grid-template-columns: 280px 1fr;
gap: 20px;
}
/* Sidebar */
.results-sidebar {
position: sticky;
top: 150px; /* Account for fixed header (80px) + sticky header-bar (~60px) + buffer */
height: fit-content;
}
/* Adjust sidebar sticky position for tablet and mobile */
@media only screen and (min-width: 601px) and (max-width: 992px) {
.results-sidebar {
top: 140px; /* 70px header + ~60px header-bar + buffer */
}
}
@media only screen and (max-width: 600px) {
.results-sidebar {
top: auto; /* Not sticky on mobile - full width layout */
position: relative;
}
}
.results-sidebar .sidebar-card {
background: white;
border-radius: 20px;
padding: 25px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}
.results-sidebar .sidebar-title {
display: flex;
align-items: center;
gap: 10px;
color: #1a1a2e;
font-size: 1.1rem;
font-weight: 600;
margin: 0 0 20px 0;
padding-bottom: 15px;
border-bottom: 2px solid #f0f0f0;
}
.results-sidebar .sidebar-title i {
color: #4169E1;
font-size: 24px;
}
.results-sidebar .cities-list {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 250px;
overflow-y: auto;
}
.results-sidebar .city-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-radius: 10px;
text-decoration: none;
color: #555;
font-size: 0.88rem;
transition: all 0.2s ease;
}
.results-sidebar .city-link:hover {
background: rgba(65, 105, 225, 0.08);
color: #4169E1;
}
.results-sidebar .city-link.active {
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
color: white;
}
.results-sidebar .city-link .city-name {
font-weight: 500;
}
.results-sidebar .city-link .city-postal {
font-size: 0.78rem;
opacity: 0.5;
}
.results-sidebar .city-link.active .city-postal {
opacity: 0.8;
}
/* City Search */
.results-sidebar .city-search {
display: flex;
align-items: center;
gap: 10px;
background: #f0f2f5;
border-radius: 12px;
padding: 12px 16px;
margin-bottom: 15px;
}
.results-sidebar .city-search i {
color: #999;
font-size: 20px;
flex-shrink: 0;
}
.results-sidebar .city-search input {
flex: 1;
min-width: 0;
border: none !important;
border-bottom: none !important;
background: transparent !important;
color: #333;
font-size: 14px;
outline: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
height: auto !important;
}
.results-sidebar .city-search input::placeholder {
color: #999;
}
/* Info Card */
.results-sidebar .info-card {
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
margin-top: 20px;
text-align: center;
padding: 25px;
}
.results-sidebar .info-card .info-icon {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
}
.results-sidebar .info-card .info-icon i {
color: white;
font-size: 24px;
}
.results-sidebar .info-card h5 {
color: white;
font-size: 1.1rem;
font-weight: 600;
margin: 0 0 10px 0;
}
.results-sidebar .info-card p {
color: rgba(255, 255, 255, 0.85);
font-size: 0.9rem;
line-height: 1.5;
margin: 0;
}
/* Scrollbar for cities list */
.results-sidebar .cities-list::-webkit-scrollbar {
width: 5px;
}
.results-sidebar .cities-list::-webkit-scrollbar-track {
background: #f0f0f0;
border-radius: 5px;
}
.results-sidebar .cities-list::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 5px;
}
/* Results Content */
.results-content {
min-width: 0;
position: relative;
}
/* Results Content Hero Background */
.results-content.has-hero-bg {
background-image: var(--hero-bg-image);
background-size: cover;
background-position: center;
background-attachment: fixed;
border-radius: 24px;
padding: 25px;
margin: -10px;
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.1);
overflow: hidden;
}
.results-content.has-hero-bg .results-content-bg-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.75) 0%,
rgba(248, 250, 255, 0.65) 50%,
rgba(240, 245, 255, 0.70) 100%
);
border-radius: 20px;
z-index: 0;
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.6),
0 8px 32px rgba(0, 0, 0, 0.08);
}
.results-content.has-hero-bg > * {
position: relative;
z-index: 1;
}
.results-content.has-hero-bg .results-filter-bar,
.results-content.has-hero-bg .companies-container {
position: relative;
z-index: 1;
}
/* Filter bar glassmorphism when hero bg is present */
.results-content.has-hero-bg .results-filter-bar {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
margin-bottom: 20px;
}
/* Company cards enhancement when hero bg is present */
.results-content.has-hero-bg .company-card {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.results-content.has-hero-bg .company-card:hover {
background: rgba(255, 255, 255, 0.95);
transform: translateY(-8px);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 1);
}
.results-title-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 25px;
padding: 20px 25px;
background: white;
border-radius: 16px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
.results-title-bar h2 {
display: flex;
align-items: center;
gap: 12px;
color: #1a1a2e;
font-size: 1.3rem;
font-weight: 600;
margin: 0;
}
.results-title-bar h2 i {
color: #4169E1;
font-size: 28px;
}
.results-title-bar h2 .highlight {
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.results-title-bar .results-count {
background: #f5f7fa;
padding: 8px 16px;
border-radius: 20px;
color: #666;
font-size: 0.9rem;
font-weight: 500;
}
/* Filter Bar - Enhanced with subtle gradient */
.results-filter-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 25px;
padding: 18px 25px;
z-index: 10;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.95) 100%);
border-radius: 16px;
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
flex-wrap: wrap;
gap: 15px;
border: 1px solid rgba(65, 105, 225, 0.08);
position: relative;
overflow: visible;
}
/* Decorative gradient accent on filter bar */
.results-filter-bar::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #4169E1 0%, #11998e 50%, #4169E1 100%);
opacity: 0.5;
border-radius: 0 0 16px 16px;
pointer-events: none;
z-index: 0;
}
.results-filter-bar .filter-left,
.results-filter-bar .filter-right {
position: relative;
z-index: 1;
}
.results-filter-bar .filter-left {
display: flex;
align-items: center;
gap: 20px;
}
.results-filter-bar .results-label {
display: flex;
align-items: center;
gap: 8px;
color: #555;
font-size: 0.95rem;
}
.results-filter-bar .results-label i {
color: #4169E1;
font-size: 22px;
}
.results-filter-bar .results-label strong {
color: #1a1a2e;
font-size: 1.2rem;
}
.results-filter-bar .filter-right {
display: flex;
align-items: center;
gap: 15px;
}
/* View Toggle */
.view-toggle {
display: flex;
background: #f5f7fa;
border-radius: 12px;
padding: 4px;
}
.view-toggle .view-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
color: #999;
}
.view-toggle .view-btn:hover {
color: #4169E1;
}
.view-toggle .view-btn.active {
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
color: white;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.view-toggle .view-btn i {
font-size: 22px;
}
/* Mobile Grid Density Toggle - hidden on desktop */
.mobile-density-toggle {
display: none;
background: #f5f7fa;
border-radius: 12px;
padding: 4px;
}
.mobile-density-toggle .density-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
color: #999;
}
.mobile-density-toggle .density-btn:hover {
color: #4169E1;
}
.mobile-density-toggle .density-btn.active {
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
color: white;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.mobile-density-toggle .density-btn i {
font-size: 22px;
}
/* Companies Container */
.results-content .companies-container {
background: white;
border-radius: 20px;
padding: 25px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
position: relative;
z-index: 1;
}
/* View Modes */
.companies-container.view-grid .companies-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
}
.companies-container.view-list .companies-grid {
display: flex;
flex-direction: column;
gap: 18px;
}
.companies-container.view-list .public-company-card {
flex-direction: row;
border-radius: 18px;
height: auto;
overflow: hidden;
}
.companies-container.view-list .public-company-card .card-image-wrapper {
width: 250px;
min-width: 250px;
height: auto;
min-height: 200px;
border-radius: 18px 0 0 18px;
align-self: stretch;
}
.companies-container.view-list .public-company-card .card-image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.companies-container.view-list .public-company-card .card-content {
flex: 1;
padding: 22px 28px;
display: flex;
flex-direction: column;
justify-content: center;
}
.companies-container.view-list .public-company-card .card-title {
font-size: 1.15rem;
margin-bottom: 8px;
}
.companies-container.view-list .public-company-card .company-description {
-webkit-line-clamp: 3;
font-size: 0.85rem;
line-height: 1.5;
}
.companies-container.view-list .public-company-card .card-action-hint {
width: auto;
min-width: 60px;
padding: 20px 22px;
border-radius: 0 18px 18px 0;
writing-mode: horizontal-tb;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
}
.companies-container.view-list .public-company-card .card-action-hint span {
display: none;
}
.companies-container.view-list .public-company-card .card-action-hint i {
font-size: 26px;
}
.companies-container.view-list .public-company-card:hover {
transform: translateY(-4px) scale(1.005);
}
/* Responsive - Hero Background */
@media (max-width: 992px) {
.results-content.has-hero-bg {
padding: 20px;
margin: -5px;
border-radius: 20px;
background-attachment: scroll; /* Better performance on mobile */
}
}
@media (max-width: 600px) {
.results-content.has-hero-bg {
padding: 15px;
margin: 0;
border-radius: 16px;
}
.results-content.has-hero-bg .results-content-bg-overlay {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.82) 0%,
rgba(248, 250, 255, 0.78) 100%
);
}
.results-content.has-hero-bg .results-filter-bar {
border-radius: 12px;
margin-bottom: 15px;
}
}
/* Responsive */
@media (max-width: 992px) {
.results-main {
grid-template-columns: 1fr;
padding: 20px;
}
.results-sidebar {
position: static;
}
.results-sidebar .sidebar-card {
padding: 20px;
}
.results-sidebar .cities-list {
flex-direction: column;
max-height: 250px;
gap: 4px;
}
.results-sidebar .city-link {
padding: 10px 14px;
}
.results-sidebar .info-card {
display: none;
}
.results-hero {
padding: 40px 20px;
}
.results-hero h1 {
font-size: 1.8rem;
}
.results-hero .hero-stats {
padding: 15px 25px;
gap: 20px;
}
.results-hero .stat-box .stat-number {
font-size: 1.6rem;
}
/* List view adjustments */
.companies-container.view-list .public-company-card .card-image-wrapper {
width: 180px;
min-width: 180px;
}
}
@media (max-width: 600px) {
.results-header-bar .header-content {
padding: 12px 15px;
flex-direction: column;
gap: 12px;
}
.results-header-bar .back-link {
padding: 8px 15px;
font-size: 0.85rem;
}
.results-header-bar .city-badge {
padding: 10px 20px;
font-size: 0.95rem;
}
.results-hero {
padding: 30px 15px;
}
.results-hero .hero-icon {
width: 60px;
height: 60px;
border-radius: 18px;
}
.results-hero .hero-icon i {
font-size: 30px;
}
.results-hero h1 {
font-size: 1.4rem;
}
.results-hero .hero-subtitle {
font-size: 0.95rem;
margin-bottom: 20px;
}
.results-hero .hero-stats {
flex-direction: column;
gap: 15px;
padding: 20px;
}
.results-hero .stat-divider {
width: 60px;
height: 1px;
}
.results-main {
padding: 15px;
gap: 20px;
}
.results-filter-bar {
padding: 15px;
flex-direction: column;
align-items: stretch;
}
.results-filter-bar .filter-left {
justify-content: center;
}
.results-filter-bar .filter-right {
justify-content: center;
}
/* Hide desktop view toggle on mobile */
.view-toggle {
display: none !important;
}
/* Show mobile density toggle */
.mobile-density-toggle {
display: flex !important;
}
.results-title-bar {
flex-direction: column;
gap: 15px;
text-align: center;
padding: 15px 20px;
}
.results-title-bar h2 {
font-size: 1.1rem;
}
.results-content .companies-container {
padding: 15px;
border-radius: 16px;
}
/* Mobile card image */
.public-company-card .card-image-wrapper {
height: 200px;
}
.companies-grid.mobile-two-col .public-company-card .card-image-wrapper {
height: 120px;
}
/* Force grid view on mobile - 1 column default */
.companies-container.view-list .companies-grid {
display: grid;
grid-template-columns: 1fr;
}
.companies-container.view-list .companies-grid.mobile-two-col {
grid-template-columns: repeat(2, 1fr);
}
.companies-container.view-list .public-company-card {
flex-direction: column;
height: auto;
}
.companies-container.view-list .public-company-card .card-image-wrapper {
width: 100%;
min-width: 100%;
height: 200px;
border-radius: 16px 16px 0 0;
align-self: auto;
}
.companies-container.view-list .companies-grid.mobile-two-col .public-company-card .card-image-wrapper {
height: 120px;
border-radius: 12px 12px 0 0;
}
.companies-container.view-list .public-company-card .card-image-wrapper img {
position: static;
}
.companies-container.view-list .public-company-card .card-action-hint {
border-radius: 0 0 16px 16px;
flex-direction: row;
padding: 15px 20px;
min-width: unset;
}
.companies-container.view-list .public-company-card .card-action-hint span {
display: inline;
}
.companies-container.view-list .public-company-card:hover {
transform: translateY(-6px) scale(1.01);
}
}
/* ============================================
PRODUCTION-READY UI/UX ENHANCEMENTS
============================================ */
/* Global Improvements */
* {
-webkit-tap-highlight-color: transparent;
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Focus states for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
outline: 3px solid rgba(102, 126, 234, 0.5);
outline-offset: 2px;
}
/* Selection color */
::selection {
background: rgba(102, 126, 234, 0.3);
color: inherit;
}
/* ============================================
COMPANY HERO PAGE - ENHANCED
============================================ */
.company-hero {
position: relative;
z-index: 1;
}
.company-hero .hero-content {
position: relative;
z-index: 2;
}
/* Company Card on Detail Page */
.company-main-card {
position: relative;
z-index: 5;
}
/* ============================================
ARTICLE HERO PAGE - ENHANCED
============================================ */
.article-hero {
position: relative;
z-index: 1;
}
.article-hero .hero-content {
position: relative;
z-index: 2;
}
/* ============================================
ENHANCED CARD HOVER EFFECTS
============================================ */
.public-company-card,
.child-article-card,
.article-card {
will-change: transform;
backface-visibility: hidden;
}
/* ============================================
IMPROVED BUTTON STATES
============================================ */
.btn,
.btn-small,
.btn-large,
.btn-flat {
cursor: pointer;
user-select: none;
}
.btn:active,
.btn-small:active,
.btn-large:active {
transform: scale(0.98);
}
/* ============================================
RESPONSIVE IMPROVEMENTS - TABLET (768px - 1024px)
============================================ */
@media screen and (min-width: 768px) and (max-width: 1024px) {
/* Company Detail Page */
.company-main-card {
margin: -80px auto 40px !important;
}
.company-card-header {
padding: 35px !important;
gap: 25px !important;
}
.company-logo-wrapper {
width: 140px !important;
height: 140px !important;
}
.company-title {
font-size: 2rem !important;
}
/* Article Detail Page */
.article-main-card {
margin: -80px auto 40px !important;
}
.article-card-header {
padding: 35px !important;
gap: 25px !important;
}
.article-image-wrapper {
width: 160px !important;
height: 160px !important;
}
.article-title {
font-size: 2rem !important;
}
/* Grid adjustments */
.articles-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Hero sections */
.company-hero,
.article-hero {
padding: 50px 0 120px !important;
}
}
/* ============================================
RESPONSIVE IMPROVEMENTS - MOBILE (max-width: 767px)
============================================ */
@media screen and (max-width: 767px) {
/* Company Hero */
.company-hero {
padding: 40px 15px 100px !important;
}
.company-hero .hero-content {
padding: 0 !important;
}
/* Company Main Card */
.company-main-card {
margin: -70px auto 30px !important;
padding: 0 15px !important;
}
.company-card-inner {
border-radius: 20px !important;
}
.company-card-header {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
padding: 25px 20px !important;
gap: 20px !important;
}
.company-logo-wrapper {
width: 100px !important;
height: 100px !important;
border-radius: 20px !important;
}
.company-logo-wrapper i {
font-size: 45px !important;
}
.company-title {
font-size: 1.5rem !important;
}
.company-info-badges {
justify-content: center !important;
flex-wrap: wrap !important;
}
.company-card-body {
padding: 25px 20px !important;
}
.section-title {
font-size: 1.3rem !important;
}
.company-description {
font-size: 1rem !important;
padding: 20px !important;
}
/* Article Hero */
.article-hero {
padding: 40px 15px 100px !important;
}
.article-hero .hero-content {
padding: 0 !important;
}
/* Article Main Card */
.article-main-card {
margin: -70px auto 30px !important;
padding: 0 15px !important;
}
.article-card-inner {
border-radius: 20px !important;
}
.article-card-header {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
padding: 25px 20px !important;
gap: 20px !important;
}
.article-image-wrapper {
width: 120px !important;
height: 120px !important;
border-radius: 20px !important;
}
.article-image-wrapper .article-icon {
font-size: 50px !important;
}
.article-title {
font-size: 1.5rem !important;
}
.article-meta {
justify-content: center !important;
}
.article-card-body {
padding: 25px 20px !important;
}
.article-description {
font-size: 1rem !important;
padding: 20px !important;
}
/* Articles Grid */
.articles-grid {
grid-template-columns: 1fr !important;
gap: 15px !important;
}
.child-article-card {
border-radius: 16px !important;
}
.child-card-image {
height: 140px !important;
}
.child-card-content {
padding: 15px !important;
}
.child-card-title {
font-size: 1rem !important;
}
/* Back button */
.back-section {
margin-bottom: 40px !important;
padding: 0 15px !important;
}
.back-btn {
width: 100% !important;
justify-content: center !important;
padding: 12px 25px !important;
font-size: 0.95rem !important;
}
/* Breadcrumb mobile adjustments */
.breadcrumb-nav {
font-size: 0.85rem !important;
gap: 3px !important;
}
.breadcrumb-nav a {
padding: 4px 8px !important;
font-size: 0.85rem !important;
}
.breadcrumb-nav .current {
padding: 4px 12px !important;
font-size: 0.85rem !important;
}
.breadcrumb-nav .separator {
margin: 0 2px !important;
}
/* Hide home icon on very small screens */
.breadcrumb-nav a i {
font-size: 16px !important;
}
}
/* ============================================
RESPONSIVE IMPROVEMENTS - SMALL MOBILE (max-width: 480px)
============================================ */
@media screen and (max-width: 480px) {
/* Company page adjustments */
.company-hero {
padding: 30px 10px 80px !important;
}
.company-main-card {
margin: -60px auto 25px !important;
padding: 0 10px !important;
}
.company-card-header {
padding: 20px 15px !important;
}
.company-logo-wrapper {
width: 80px !important;
height: 80px !important;
}
.company-logo-wrapper i {
font-size: 35px !important;
}
.company-title {
font-size: 1.3rem !important;
}
.company-info-badges .info-badge {
padding: 8px 12px !important;
font-size: 0.8rem !important;
}
.company-card-body {
padding: 20px 15px !important;
}
.section-title {
font-size: 1.15rem !important;
}
.company-description {
padding: 15px !important;
font-size: 0.95rem !important;
line-height: 1.7 !important;
}
/* Article page adjustments */
.article-hero {
padding: 30px 10px 80px !important;
}
.article-main-card {
margin: -60px auto 25px !important;
padding: 0 10px !important;
}
.article-card-header {
padding: 20px 15px !important;
}
.article-image-wrapper {
width: 100px !important;
height: 100px !important;
}
.article-image-wrapper .article-icon {
font-size: 40px !important;
}
.article-title {
font-size: 1.3rem !important;
}
.meta-item {
font-size: 0.9rem !important;
}
.meta-item i {
font-size: 18px !important;
padding: 6px !important;
}
.article-type-badge {
padding: 8px 15px !important;
font-size: 0.8rem !important;
}
.article-card-body {
padding: 20px 15px !important;
}
.article-description {
padding: 15px !important;
font-size: 0.95rem !important;
}
/* Breadcrumb - even more compact */
.breadcrumb-nav {
font-size: 0.8rem !important;
}
.breadcrumb-nav a {
padding: 3px 6px !important;
}
/* Hide text on home link, keep icon */
.breadcrumb-nav a:first-child span {
display: none;
}
.back-section {
padding: 0 10px !important;
}
}
/* ============================================
LANDSCAPE MODE IMPROVEMENTS
============================================ */
@media screen and (max-height: 500px) and (orientation: landscape) {
.company-hero,
.article-hero {
padding: 30px 20px 80px !important;
}
.results-hero {
padding: 25px 20px !important;
}
.results-hero .hero-icon {
width: 50px !important;
height: 50px !important;
margin-bottom: 15px !important;
}
.results-hero .hero-icon i {
font-size: 24px !important;
}
.results-hero h1 {
font-size: 1.3rem !important;
margin-bottom: 10px !important;
}
.results-hero .hero-stats {
padding: 12px 20px !important;
}
}
/* ============================================
TOUCH DEVICE OPTIMIZATIONS
============================================ */
@media (hover: none) and (pointer: coarse) {
/* Remove hover effects on touch devices */
.public-company-card:hover,
.child-article-card:hover,
.article-card:hover {
transform: none !important;
}
/* Add active states instead */
.public-company-card:active,
.child-article-card:active,
.article-card:active {
transform: scale(0.98) !important;
}
/* Larger touch targets */
.breadcrumb-nav a {
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
}
.event-link,
.service-link,
.city-link {
min-height: 48px !important;
}
.back-btn {
min-height: 48px !important;
}
}
/* ============================================
PRINT STYLES
============================================ */
@media print {
.results-bg,
.bg-shape,
.back-btn,
.breadcrumb-nav,
.results-header-bar,
.results-sidebar {
display: none !important;
}
.company-hero,
.article-hero,
.results-hero {
background: #f5f5f5 !important;
color: #333 !important;
padding: 20px !important;
}
.company-hero *,
.article-hero *,
.results-hero * {
color: #333 !important;
}
.company-main-card,
.article-main-card {
margin-top: 0 !important;
box-shadow: none !important;
}
}
/* ============================================
HIGH CONTRAST MODE SUPPORT
============================================ */
@media (prefers-contrast: high) {
.breadcrumb-nav a {
text-decoration: underline !important;
}
.public-company-card,
.child-article-card {
border: 2px solid #333 !important;
}
}
/* ============================================
REDUCED MOTION SUPPORT
============================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
html {
scroll-behavior: auto !important;
}
}
/* ============================================
INTERACTIVE ANIMATIONS & MICRO-INTERACTIONS
============================================ */
/* Scroll Reveal Animations */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
.reveal-left {
opacity: 0;
transform: translateX(-50px);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-left.active {
opacity: 1;
transform: translateX(0);
}
.reveal-right {
opacity: 0;
transform: translateX(50px);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-right.active {
opacity: 1;
transform: translateX(0);
}
.reveal-scale {
opacity: 0;
transform: scale(0.8);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-scale.active {
opacity: 1;
transform: scale(1);
}
/* Staggered Animation Delays */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }
/* 3D Card Tilt Effect */
.card-3d {
transform-style: preserve-3d;
perspective: 1000px;
}
.card-3d-inner {
transition: transform 0.4s ease;
transform-style: preserve-3d;
}
.card-3d:hover .card-3d-inner {
transform: rotateY(5deg) rotateX(5deg);
}
/* Floating Animation */
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.float-animation {
animation: float 3s ease-in-out infinite;
}
/* Pulse Animation */
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.pulse-animation {
animation: pulse 2s ease-in-out infinite;
}
/* Shine Effect */
.shine-effect {
position: relative;
overflow: hidden;
}
.shine-effect::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
to right,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.3) 50%,
rgba(255,255,255,0) 100%
);
transform: rotate(30deg);
transition: all 0.6s ease;
opacity: 0;
}
.shine-effect:hover::after {
animation: shine 0.8s ease-in-out;
}
@keyframes shine {
0% { left: -100%; opacity: 1; }
100% { left: 100%; opacity: 0; }
}
/* Glow Effect */
.glow-effect {
transition: box-shadow 0.3s ease;
}
.glow-effect:hover {
box-shadow: 0 0 30px rgba(65, 105, 225, 0.4);
}
.glow-effect-green:hover {
box-shadow: 0 0 30px rgba(17, 153, 142, 0.4);
}
/* Ripple Effect */
.ripple-effect {
position: relative;
overflow: hidden;
}
.ripple-effect::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
opacity: 0;
}
.ripple-effect:active::before {
width: 300px;
height: 300px;
opacity: 1;
transition: 0s;
}
/* Bounce Animation */
@keyframes bounce {
0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-15px); }
60% { transform: translateY(-7px); }
}
.bounce-animation {
animation: bounce 1s ease;
}
/* Shake Animation */
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.shake-animation {
animation: shake 0.5s ease;
}
/* Counter Animation (for stats) */
.counter-animate {
display: inline-block;
min-width: 2ch;
}
/* Gradient Text Animation */
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.gradient-text-animated {
background: linear-gradient(135deg, #4169E1, #11998e, #4169E1);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientShift 3s ease infinite;
}
/* Hover Lift Effect */
.hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
/* Icon Spin on Hover */
.icon-spin-hover i {
transition: transform 0.4s ease;
}
.icon-spin-hover:hover i {
transform: rotate(360deg);
}
/* Scale Up Hover */
.scale-hover {
transition: transform 0.3s ease;
}
.scale-hover:hover {
transform: scale(1.05);
}
/* Border Glow Animation */
@keyframes borderGlow {
0%, 100% { border-color: rgba(65, 105, 225, 0.3); }
50% { border-color: rgba(65, 105, 225, 0.8); }
}
.border-glow {
animation: borderGlow 2s ease-in-out infinite;
}
/* Typing Cursor Effect */
.typing-cursor::after {
content: '|';
animation: blink 1s infinite;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
/* Skeleton Loading Animation */
@keyframes skeleton {
0% { background-position: -200px 0; }
100% { background-position: 200px 0; }
}
.skeleton-loading {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 400px 100%;
animation: skeleton 1.5s ease-in-out infinite;
}
/* Progress Bar Animation */
.progress-animate {
width: 0;
transition: width 1s ease-out;
}
.progress-animate.active {
width: 100%;
}
/* Floating Particles Effect */
.particles-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.particle {
position: absolute;
width: 6px;
height: 6px;
background: rgba(65, 105, 225, 0.3);
border-radius: 50%;
animation: particleFloat 15s infinite linear;
}
@keyframes particleFloat {
0% {
transform: translateY(100vh) rotate(0deg);
opacity: 0;
}
10% { opacity: 1; }
90% { opacity: 1; }
100% {
transform: translateY(-100vh) rotate(720deg);
opacity: 0;
}
}
/* Interactive Button Effects */
.btn-interactive {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.btn-interactive::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s ease;
}
.btn-interactive:hover::before {
left: 100%;
}
/* Card Hover Border Animation */
.card-border-animate {
position: relative;
}
.card-border-animate::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid transparent;
border-radius: inherit;
transition: border-color 0.3s ease;
}
.card-border-animate:hover::before {
border-color: rgba(65, 105, 225, 0.5);
}
/* Image Zoom Container */
.img-zoom-container {
overflow: hidden;
border-radius: inherit;
}
.img-zoom-container img {
transition: transform 0.5s ease;
}
.img-zoom-container:hover img {
transform: scale(1.1);
}
/* Tooltip Animation */
.tooltip-animated {
position: relative;
}
.tooltip-animated::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(10px);
padding: 8px 12px;
background: rgba(26, 26, 46, 0.95);
color: white;
font-size: 0.85rem;
border-radius: 8px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 100;
}
.tooltip-animated:hover::after {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-5px);
}
/* Badge Pop Animation */
@keyframes badgePop {
0% { transform: scale(0); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.badge-pop {
animation: badgePop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* Heartbeat Animation */
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
14% { transform: scale(1.1); }
28% { transform: scale(1); }
42% { transform: scale(1.1); }
70% { transform: scale(1); }
}
.heartbeat {
animation: heartbeat 1.5s ease-in-out infinite;
}
/* Slide In From Bottom */
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.slide-in-up {
animation: slideInUp 0.5s ease forwards;
}
/* Fade In Animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 0.5s ease forwards;
}
/* Interactive Card Enhancement for Company Cards */
.public-company-card.interactive {
position: relative;
}
.public-company-card.interactive::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(65, 105, 225, 0) 0%, rgba(65, 105, 225, 0.1) 100%);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: inherit;
pointer-events: none;
z-index: 1;
}
.public-company-card.interactive:hover::before {
opacity: 1;
}
.public-company-card.interactive .card-action-hint i {
transition: transform 0.3s ease;
}
.public-company-card.interactive:hover .card-action-hint i {
transform: translateX(8px);
}
/* ============================================
FINANCE MODULES - SHARED STYLES
============================================ */
/* Statistics Row */
.stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.stat-card {
background: #fff;
border-radius: 12px;
padding: 20px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
border: 1px solid #e8eaed;
}
.stat-icon {
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.stat-icon i { color: #fff; font-size: 24px; }
.stat-icon.green { background: linear-gradient(135deg, #00c853 0%, #00e676 100%); }
.stat-icon.blue { background: linear-gradient(135deg, #2196f3 0%, #64b5f6 100%); }
.stat-icon.orange { background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%); }
.stat-icon.red { background: linear-gradient(135deg, #f44336 0%, #ef5350 100%); }
.stat-info { display: flex; flex-direction: column; }
.stat-value { font-size: 1.4rem; font-weight: 700; color: #333; }
.stat-label { font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: 0.3px; }
/* ============================================
FORM SECTIONS - Shared Form Layout
Used by: Payments, Invoices, CompanySubscriptions
============================================ */
/* Form Section Container */
.form-section {
margin-bottom: 20px;
border-radius: 10px;
overflow: hidden;
border: 1px solid #e8eaed;
background: #fff;
}
.form-section:last-child {
margin-bottom: 0;
}
/* Section Header */
.section-header {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
color: #fff;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.2px;
}
.section-header i {
font-size: 20px;
opacity: 0.9;
}
.section-header.green {
background: linear-gradient(135deg, #00c853 0%, #00e676 100%);
}
.section-header.orange {
background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
}
.section-header.purple {
background: linear-gradient(135deg, #7c4dff 0%, #b388ff 100%);
}
.section-header.red {
background: linear-gradient(135deg, #f44336 0%, #ef5350 100%);
}
.section-header.blue {
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
}
.section-header .hint {
margin-left: auto;
font-size: 11px;
font-weight: 400;
opacity: 0.8;
}
/* Section Body */
.section-body {
padding: 20px;
background: #fff;
}
/* Fields Row - Flex container for form fields */
.fields-row {
display: flex;
gap: 16px;
margin-bottom: 16px;
}
.fields-row:last-child {
margin-bottom: 0;
}
.fields-row.two > .field {
flex: 1 1 0;
min-width: 0;
}
.fields-row.three > .field {
flex: 1 1 0;
min-width: 0;
}
.fields-row.four > .field {
flex: 1 1 0;
min-width: 0;
}
/* Individual Field */
.field {
margin-bottom: 16px;
position: relative;
}
.field:last-child {
margin-bottom: 0;
}
.fields-row > .field {
margin-bottom: 0;
}
.field > label {
display: block !important;
position: static !important;
transform: none !important;
font-size: 13px;
font-weight: 600;
color: #555 !important;
margin-bottom: 6px;
letter-spacing: 0.2px;
pointer-events: auto;
width: auto;
left: auto;
top: auto;
}
/* Prevent Materialize label float/active behavior inside .field */
.field > label.active,
.field .input-field > label,
.field .input-field > label.active {
transform: none !important;
position: static !important;
font-size: 13px !important;
color: #555 !important;
top: auto !important;
left: auto !important;
}
/* Field inputs - override Materialize */
.field input[type="text"],
.field input[type="number"],
.field input[type="email"],
.field input[type="password"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="date"],
.field textarea {
width: 100% !important;
height: 42px !important;
padding: 8px 12px !important;
border: 1px solid #ddd !important;
border-radius: 8px !important;
font-size: 14px !important;
color: #333;
background: #fff;
box-sizing: border-box !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
outline: none;
/* Override Materialize defaults */
margin: 0 !important;
box-shadow: none !important;
}
.field textarea {
height: auto !important;
min-height: 60px;
resize: vertical;
line-height: 1.5;
padding: 10px 12px !important;
}
.field input:focus,
.field textarea:focus {
border-color: #4169E1 !important;
box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.12) !important;
}
.field input:read-only {
background: #f5f5f5 !important;
color: #888;
cursor: default;
}
.field input::placeholder,
.field textarea::placeholder {
color: #aaa;
font-weight: 400;
}
/* Prevent Materialize input-field wrapper from adding extra spacing */
.field .input-field {
margin: 0 !important;
padding: 0 !important;
}
/* Materialize select override inside .field */
.field .select-wrapper {
position: relative;
}
.field .select-wrapper input.select-dropdown {
height: 42px !important;
line-height: 42px !important;
padding: 0 12px !important;
border: 1px solid #ddd !important;
border-radius: 8px !important;
margin: 0 !important;
box-shadow: none !important;
font-size: 14px !important;
color: #333;
background: #fff;
cursor: pointer;
}
.field .select-wrapper input.select-dropdown:focus {
border-color: #4169E1 !important;
box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.12) !important;
}
.field .select-wrapper .caret {
fill: #666;
right: 10px;
top: 50%;
transform: translateY(-50%);
position: absolute;
}
.field .select-wrapper + label,
.field .select-wrapper ~ label {
display: none !important;
}
/* Dropdown content rendered on body - high z-index above modals */
.dropdown-content.select-dropdown {
max-height: 250px;
z-index: 9999 !important;
}
/* Also for .field context (non-body rendered) */
.field .dropdown-content {
max-height: 250px;
z-index: 9999 !important;
}
/* Flex utilities for fields */
.field.flex-1 { flex: 1 1 0; min-width: 0; }
.field.flex-2 { flex: 2 1 0; min-width: 0; }
.field.flex-3 { flex: 3 1 0; min-width: 0; }
/* Required asterisk */
.req {
color: #f44336;
font-weight: 700;
font-size: 14px;
}
/* Standard Materialize Checkbox - within form sections */
.checkbox-list,
.toggle-list {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 4px;
}
.checkbox-list p,
.toggle-list p {
margin: 0;
line-height: 1;
}
.checkbox-list label,
.toggle-list label {
font-size: 14px;
color: #555;
font-weight: 500;
padding-left: 30px;
line-height: 22px;
}
/* Materialize checkbox color override */
.checkbox-list [type="checkbox"].filled-in:checked + span:not(.lever)::after,
.toggle-list [type="checkbox"].filled-in:checked + span:not(.lever)::after,
.form-section [type="checkbox"].filled-in:checked + span:not(.lever)::after,
.subscription-form [type="checkbox"].filled-in:checked + span:not(.lever)::after,
.plan-form [type="checkbox"].filled-in:checked + span:not(.lever)::after,
.payment-form [type="checkbox"].filled-in:checked + span:not(.lever)::after {
border-color: #4169E1;
background-color: #4169E1;
}
.checkbox-list [type="checkbox"].filled-in:not(:checked) + span:not(.lever)::after,
.toggle-list [type="checkbox"].filled-in:not(:checked) + span:not(.lever)::after,
.form-section [type="checkbox"].filled-in:not(:checked) + span:not(.lever)::after,
.subscription-form [type="checkbox"].filled-in:not(:checked) + span:not(.lever)::after,
.plan-form [type="checkbox"].filled-in:not(:checked) + span:not(.lever)::after,
.payment-form [type="checkbox"].filled-in:not(:checked) + span:not(.lever)::after {
border-color: #bbb;
}
/* Promo Code Info & Summary */
.promo-info-box {
padding: 10px 14px;
border-radius: 8px;
background: #e8f5e9;
border: 1px solid #a5d6a7;
color: #2e7d32;
font-size: 13px;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
min-height: 42px;
}
.promo-info-box.error {
background: #ffebee;
border-color: #ef9a9a;
color: #c62828;
}
.promo-summary-box {
background: #f5f5f5;
border-radius: 8px;
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
.promo-summary-row {
display: flex;
justify-content: space-between;
font-size: 13px;
color: #555;
}
/* Checkbox List - layout handled above in Standard Materialize Checkbox section */
/* Info List (Display Modal) */
.info-list {
list-style: none;
padding: 0;
margin: 0;
}
.info-list li {
display: flex;
align-items: center;
padding: 14px 24px;
border-bottom: 1px solid #f0f0f0;
font-size: 14px;
}
.info-list li:last-child {
border-bottom: none;
}
.info-list .label {
min-width: 160px;
color: #888;
font-weight: 500;
flex-shrink: 0;
}
.info-list .value {
color: #333;
font-weight: 500;
word-break: break-word;
}
/* Datepicker z-index fix (must appear above modal overlay) */
.datepicker-modal {
z-index: 1100 !important;
}
.datepicker-container {
z-index: 1100 !important;
}
.datepicker-date-display,
.datepicker-calendar-container,
.datepicker-footer {
z-index: 1101 !important;
}
/* Spin animation */
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Large Modal (Add/Edit) */
.modal-lg {
width: 800px;
max-width: 95vw;
max-height: 90vh;
border-radius: 16px;
box-shadow: 0 25px 80px rgba(0,0,0,0.25);
overflow: hidden;
}
.modal-lg .modal-content { padding: 0; }
.modal-lg .modal-header {
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
padding: 24px 28px;
border-radius: 0;
}
.modal-lg .modal-header h4 {
font-size: 1.35rem;
font-weight: 600;
letter-spacing: -0.3px;
color: #fff;
margin: 0;
}
.modal-lg .modal-body {
padding: 28px;
max-height: calc(80vh - 160px);
overflow-y: auto;
background: #fafbfc;
}
.modal-lg .modal-body::-webkit-scrollbar { width: 6px; }
.modal-lg .modal-body::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
.modal-lg .modal-body::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
.modal-lg .modal-body::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }
.modal-lg .modal-footer {
padding: 18px 28px;
background: #fff;
border-top: 1px solid #eee;
}
/* Display Row Modal - Finance Override */
.display-row-modal {
width: 600px;
max-width: 95vw;
border-radius: 16px;
box-shadow: 0 25px 80px rgba(0,0,0,0.25);
overflow: hidden;
}
.display-row-modal .modal-content { padding: 0; }
.display-row-modal .modal-header {
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
padding: 22px 26px;
}
.display-row-modal .modal-header h4 {
font-size: 1.25rem;
font-weight: 600;
color: #fff;
margin: 0;
}
.display-row-modal .modal-body {
padding: 16px;
max-height: calc(80vh - 150px);
overflow-y: auto;
background: #f8f9fa;
background: #fff;
}
.display-row-modal .modal-footer {
padding: 16px 26px;
background: #fafbfc;
border-top: 1px solid #eee;
}
/* Modal Buttons - btn-print */
.modal-footer .btn-print {
background: linear-gradient(135deg, #00c853 0%, #00e676 100%) !important;
color: #fff !important;
padding: 0 24px !important;
height: 44px !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
font-weight: 600 !important;
font-size: 14px !important;
box-shadow: 0 4px 15px rgba(0, 200, 83, 0.35) !important;
transition: all 0.3s ease !important;
text-transform: none !important;
line-height: 1 !important;
}
.modal-footer .btn-print:hover { box-shadow: 0 6px 20px rgba(0, 200, 83, 0.5) !important; transform: translateY(-2px); }
/* Fix icon alignment inside modal footer buttons */
.modal-footer a i.material-icons,
.modal-footer a i.material-icons.left {
float: none !important;
margin: 0 !important;
font-size: 20px !important;
line-height: 1 !important;
}
/* Delete Modal */
#delete-row-modal { border-radius: 16px; box-shadow: 0 25px 80px rgba(0,0,0,0.25); overflow: hidden; }
#delete-row-modal .delete-modal-content { padding: 35px 30px 25px; text-align: center; background: #fff; }
#delete-row-modal .delete-icon {
width: 70px; height: 70px; border-radius: 50%;
background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 20px;
box-shadow: 0 8px 25px rgba(255, 65, 108, 0.35);
}
#delete-row-modal .delete-icon i { color: #fff; font-size: 32px; }
#delete-row-modal .delete-modal-content h5 { font-size: 1.3rem; font-weight: 600; color: #333; margin-bottom: 10px; }
#delete-row-modal .delete-modal-content p { color: #666; font-size: 14px; line-height: 1.6; }
/* Loading Modal */
#loadModal {
border-radius: 16px !important;
box-shadow: 0 15px 50px rgba(0,0,0,0.2);
max-width: 300px !important;
width: 280px !important;
height: auto !important;
max-height: none !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
#loadModal .modal-content {
padding: 30px 20px !important;
}
#loadModal .loading-spinner {
width: 40px; height: 40px;
border: 3px solid #f0f0f0; border-top-color: #4169E1;
border-radius: 50%; animation: spin 0.8s linear infinite;
margin: 0 auto 14px;
}
#loadModal h6 {
font-size: 0.95rem;
}
/* Status Badge - Variants */
.status-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 12px; border-radius: 20px;
font-size: 12px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.3px;
}
.status-badge.active { background: linear-gradient(135deg, #00c853 0%, #00e676 100%); color: #fff; box-shadow: 0 2px 8px rgba(0, 200, 83, 0.3); }
.status-badge.warning { background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%); color: #fff; box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3); }
.status-badge.inactive { background: linear-gradient(135deg, #78909c 0%, #90a4ae 100%); color: #fff; box-shadow: 0 2px 8px rgba(120, 144, 156, 0.3); }
.status-badge.info { background: linear-gradient(135deg, #2196f3 0%, #64b5f6 100%); color: #fff; box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3); }
.status-badge.danger { background: linear-gradient(135deg, #f44336 0%, #ef5350 100%); color: #fff; box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3); }
/* Filter Wrapper */
.filter-wrapper { margin-right: 10px; }
.filter-wrapper select {
height: 42px; border-radius: 10px; border: 1px solid #e8e8e8;
padding: 0 16px; min-width: 140px; font-size: 14px;
background: #fff; color: #333; cursor: pointer; transition: all 0.2s ease;
}
.filter-wrapper select:hover { border-color: #4169E1; }
.filter-wrapper select:focus { border-color: #4169E1; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15); outline: none; }
/* Amount Badge */
.amount-badge { font-weight: 600; color: #333; font-size: 14px; }
.amount-badge.completed { color: #00c853; }
/* Method Badge */
.method-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 4px; font-size: 12px; background: #e3f2fd; color: #1976d2; }
/* Invoice Number */
.invoice-number { font-family: monospace; font-size: 13px; color: #666; }
/* Finance Responsive */
@media only screen and (max-width: 992px) {
.modal-lg { width: 95%; max-width: none; }
.modal-lg .modal-body { max-height: calc(85vh - 160px); padding: 24px; }
}
@media only screen and (max-width: 768px) {
.stats-row { grid-template-columns: 1fr 1fr; }
}
@media only screen and (max-width: 600px) {
.stats-row { grid-template-columns: 1fr; }
.display-row-modal { width: 96%; }
.display-row-modal .info-list li { flex-direction: column; gap: 6px; padding: 14px 20px; }
.display-row-modal .info-list .label { min-width: auto; }
.modal-lg .modal-body { padding: 20px; }
.modal-lg .modal-header { padding: 20px; }
.fields-row, .fields-row.two, .fields-row.three, .fields-row.four { flex-direction: column; gap: 12px; }
.fields-row .field.flex-2 { flex: 1; }
}
/* ==========================================
DISPLAY ROW SECTIONS (used across all detail modals)
========================================== */
.display-row-sections {
display: flex;
flex-direction: column;
gap: 12px;
}
.display-section {
border-radius: 10px;
overflow: hidden;
border: 1px solid #e8eaed;
background: #fff;
}
.display-section-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
color: #fff;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.2px;
}
.display-section-header i {
font-size: 18px;
opacity: 0.9;
}
.display-section-header.green {
background: linear-gradient(135deg, #00c853 0%, #00e676 100%);
}
.display-section-header.orange {
background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
}
.display-section-header.purple {
background: linear-gradient(135deg, #7c4dff 0%, #b388ff 100%);
}
.display-section-header.blue {
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
}
.display-section .info-list {
list-style: none;
padding: 0;
margin: 0;
}
.display-section .info-list li {
display: flex;
align-items: center;
padding: 11px 18px;
border-bottom: 1px solid #f0f0f0;
font-size: 13.5px;
}
.display-section .info-list li:last-child {
border-bottom: none;
}
.display-section .info-list .label {
min-width: 150px;
color: #888;
font-weight: 500;
flex-shrink: 0;
}
.display-section .info-list .value {
color: #333;
font-weight: 500;
word-break: break-word;
flex: 1;
}
@media (max-width: 768px) {
.display-section .info-list li {
flex-direction: column;
gap: 4px;
padding: 10px 14px;
}
.display-section .info-list .label {
min-width: auto;
}
}
/* ============================================
MESSAGES SYSTEM STYLES
============================================ */
/* Conversations List */
.msg-conversations-list {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
border: 1px solid #e8eaed;
}
.msg-conversation-item {
display: flex;
align-items: center;
gap: 15px;
padding: 16px 20px;
border-bottom: 1px solid #f0f2f5;
text-decoration: none;
color: inherit;
transition: background 0.15s ease;
}
.msg-conversation-item:last-child {
border-bottom: none;
}
.msg-conversation-item:hover {
background: #f8f9fa;
}
.msg-conversation-item.unread {
background: #f0f4ff;
}
.msg-conv-avatar {
width: 46px;
height: 46px;
border-radius: 50%;
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 600;
font-size: 18px;
flex-shrink: 0;
}
.msg-conv-info {
flex: 1;
min-width: 0;
}
.msg-conv-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.msg-conv-name {
font-weight: 600;
color: #333;
font-size: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.msg-conversation-item.unread .msg-conv-name {
font-weight: 700;
}
.msg-unread-badge {
background: #4169E1;
color: #fff;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
flex-shrink: 0;
}
.msg-conv-time {
margin-left: auto;
font-size: 12px;
color: #999;
flex-shrink: 0;
}
.msg-conv-subject {
color: #888;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Conversation Chat View */
.messages-conversation-container {
max-width: 800px;
margin: 0 auto;
}
.msg-chat-header {
display: flex;
align-items: center;
gap: 15px;
padding: 15px 20px;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
margin-bottom: 20px;
}
.msg-back-btn {
padding: 0;
min-width: auto;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
transition: background 0.15s ease;
}
.msg-back-btn:hover {
background: #f0f2f5;
}
.msg-back-btn i {
color: #4169E1;
font-size: 24px;
}
.msg-chat-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 600;
flex-shrink: 0;
}
.msg-chat-info {
display: flex;
flex-direction: column;
}
.msg-chat-name {
font-size: 16px;
color: #333;
}
.msg-chat-subject {
color: #888;
font-size: 13px;
}
/* Chat Messages Area */
.msg-chat-messages {
background: #f5f5f5;
border-radius: 12px;
padding: 20px;
min-height: 300px;
max-height: 500px;
overflow-y: auto;
margin-bottom: 20px;
}
.msg-empty-chat {
text-align: center;
padding: 40px 20px;
color: #999;
}
.msg-empty-chat i {
font-size: 48px;
opacity: 0.3;
}
/* Message Bubbles */
.message-bubble {
display: flex;
margin-bottom: 10px;
}
.message-bubble.sent {
justify-content: flex-end;
}
.message-bubble.received {
justify-content: flex-start;
}
.msg-bubble-content {
max-width: 70%;
padding: 10px 16px;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.message-bubble.sent .msg-bubble-content {
background: linear-gradient(135deg, #4169E1, #3155B5);
color: #fff;
border-radius: 16px 16px 4px 16px;
}
.message-bubble.received .msg-bubble-content {
background: #fff;
color: #333;
border-radius: 16px 16px 16px 4px;
}
.msg-bubble-text {
font-size: 14px;
line-height: 1.5;
word-break: break-word;
}
.msg-bubble-time {
font-size: 11px;
margin-top: 4px;
opacity: 0.7;
text-align: right;
}
.msg-read-icon {
font-size: 12px !important;
vertical-align: middle;
}
/* Send Form */
.msg-send-form {
background: #fff;
border-radius: 12px;
padding: 15px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
display: flex;
gap: 10px;
align-items: flex-end;
}
.msg-send-input-wrap {
flex: 1;
}
.msg-send-input-wrap textarea {
margin-bottom: 0 !important;
min-height: 40px;
border-bottom: 1px solid #e0e0e0 !important;
}
.msg-send-btn {
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
border: none;
border-radius: 20px;
width: 44px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.15s ease;
}
.msg-send-btn:hover {
transform: scale(1.05);
}
.msg-send-btn i {
color: #fff;
font-size: 20px;
}
.msg-send-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Messages Responsive - Tablet */
@media only screen and (min-width: 601px) and (max-width: 992px) {
.msg-chat-messages {
max-height: 450px;
padding: 16px;
}
.msg-bubble-content {
max-width: 75%;
}
}
/* Messages Responsive - Phone */
@media only screen and (max-width: 600px) {
.msg-chat-messages {
max-height: 400px;
padding: 12px;
}
.msg-bubble-content {
max-width: 85%;
}
.msg-chat-header {
gap: 10px;
padding: 12px 15px;
}
}
/* ==========================================
PAGE HEADER BAR - Universal backend header
========================================== */
.page-header-bar {
background: linear-gradient(135deg, #4169E1 0%, #3155B5 100%);
border-radius: 12px;
padding: 18px 25px;
margin-bottom: 20px;
color: #fff;
display: flex;
align-items: center;
gap: 15px;
box-shadow: 0 4px 15px rgba(65, 105, 225, 0.3);
}
.page-header-bar .page-header-icon {
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.2);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.page-header-bar .page-header-icon i {
font-size: 26px;
color: #fff;
}
.page-header-bar .page-header-text h5 {
margin: 0;
font-size: 20px;
font-weight: 600;
color: #fff;
}
.page-header-bar .page-header-text p {
margin: 3px 0 0 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 600px) {
.page-header-bar {
padding: 14px 18px;
gap: 12px;
}
.page-header-bar .page-header-icon {
width: 40px;
height: 40px;
}
.page-header-bar .page-header-icon i {
font-size: 22px;
}
.page-header-bar .page-header-text h5 {
font-size: 17px;
}
.page-header-bar .page-header-text p {
font-size: 12px;
}
}