/* ========================================================================== custom.css — project style overrides -------------------------------------------------------------------------- Loaded LAST in the layout so rules here win over style.css, bootstrap.min.css and the plugin stylesheets without editing them. Guidelines: - Prefer matching/exceeding the original selector's specificity over !important. - Reuse the CSS variables defined in style.css (e.g. var(--purple2)) for colors. ========================================================================== */ :root { /* add override theme variables here, e.g.: --purple2: #a452de; */ } /* Add override rules below. */ .contentnew1 { min-height: calc(100vh - 189px) !important; } .content-active { width: calc(100vw - 132px) !important; float: right !important; } @media (max-width: 1200px) { .kismateheader-active { width: calc(100vw - 154px) !important; float: right !important; } .content-active { width: calc(100vw - 154px) !important; float: right !important; } } /* === Status indicator dots (users list, invoice view) === */ .status-dot { border-radius: 10px; width: 20px; height: 20px; } .status-dot--center { margin: 0 auto; } .status-dot--paid { background-color: #a9d86e; } .status-dot--overdue { background-color: #e3dc3c; } .status-dot--inactive { background-color: #b57a82; } .status-row { display: flex; align-items: center; gap: 5px; } .status-row p { margin-bottom: 0; } /* Page Header Start */ .pageheader { margin-bottom: 25px; } .pageheader h1, .pageheader h2 { font-family: "Helvetica"; font-weight: 100; color: #007891; line-height: 55px; letter-spacing: 0, 4px; } .pageheader h1 { font-size: 45px; } .pageheader h2 { font-size: 30px; } .pageheader .rating-container { display: inline-block; float: right; font-size: 17px; } .pageheader a, .pageheader button { margin-top: 13px; } /* Page Header End */ /* === Button === */ .modal-footer .app-btn { padding: 6px 28px; } .app-btn { background-color: var(--bg-color, #007795) !important; color: var(--text-color, #e8e9eb) !important; border: 1px solid var(--border-color, #007795) !important; display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 15px; font-weight: 600; font-family: "Helvetica"; /* text-transform: uppercase; */ padding: 11px 32px; border-radius: 21px; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .app-btn:hover { --bg-color: #00697e; --text-color: #e8e9eb; /* text-decoration: underline; */ transform: translateY(-1px); transition: all 0.2s ease-in-out; cursor: pointer; } .app-btn-primary { --bg-color: #007795; --border-color: #007795; --text-color: #e8e9eb; } .app-btn-primary:hover { --bg-color: #00697e; --border-color: #00697e; --text-color: #e8e9eb; } .app-btn-secondary { --bg-color: #fff; --border-color: #007795; --text-color: #007795; } .app-btn-secondary:hover { --bg-color: #fff; --border-color: #007795; --text-color: #007795; } .app-btn-tertiary { --bg-color: #c3bfb8; --border-color: #c3bfb8; --text-color: #fff; } .app-btn-tertiary:hover { --bg-color: #c3bfb8; --border-color: #c3bfb8; --text-color: #fff; } .app-btn-neutral { --bg-color: #6c757d; --border-color: #6c757d; --text-color: #fff; } .app-btn-neutral:hover { --bg-color: #6b7278; --border-color: #6b7278; --text-color: #fff; } .app-btn-warning { --bg-color: #ffc107; --border-color: #ffc107; --text-color: #fff; } .app-btn-warning:hover { --bg-color: #f4b908; --border-color: #f4b908; --text-color: #fff; } .app-btn-danger { --bg-color: #dd0000; --border-color: #dd0000; --text-color: #fff; } .app-btn-danger:hover { --bg-color: #cc0000; --border-color: #cc0000; --text-color: #fff; } .signoutbtn a { background-color: #fff; color: #007795; font-size: 15px; font-family: "Helvetica"; font-weight: 100; text-transform: uppercase; padding: 11px 32px; border-radius: 21px; } .signoutbtn a:hover { background-color: #a1bb09; color: #ffffff; text-decoration: none; } /* === Misc one-off utilities === */ .mr-1 { margin-right: 4px; } .mb-51 { margin-bottom: 51px; } .my-30 { margin: 30px 0; } /* === Login / Auth pages === */ body { margin: 0; padding: 0; } /* === Dashboard stat cards === */ .stat-card { background: #fff; border-radius: 6px; padding: 18px 20px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .stat-card--total { border-left: 5px solid #a1bb09; } .stat-card--pending { border-left: 5px solid #e3dc3c; } .stat-card--paid { border-left: 5px solid #a9d86e; } .stat-card--outstanding { border-left: 5px solid #b57a82; } .stat-card--reminders { border-left: 5px solid #a1bb09; } .stat-card--batches { border-left: 5px solid #888; } .stat-card__label { font-size: 13px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; } .stat-card__value { font-size: 30px; font-weight: bold; color: #333; } /* === Log page utilities === */ .log-filter-row { margin-top: 8px; } .log-actions-row { display: flex; gap: 8px; justify-content: flex-end; } .btn-clear { background-color: #c3bfb8 !important; } .pagination-wrapper { margin-top: 12px; } .no-records-cell { padding: 20px; } /* === Stat card link wrapper === */ a.stat-card-link { display: block; text-decoration: none; color: inherit; } a.stat-card-link:hover .stat-card { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); transition: box-shadow 0.15s ease; } /* === Admin Platform Overview card modifiers === */ .stat-card--tenants-total { border-left: 5px solid #4a90d9; } .stat-card--tenants-active { border-left: 5px solid #27ae60; } .stat-card--tickets-open { border-left: 5px solid #e67e22; } .stat-card--tickets-inprogress { border-left: 5px solid #8e44ad; } /* === Sort header utility === */ .sort-active { font-weight: bold; } /* === Tenant detail: profile header === */ .tenant-profile { display: flex; align-items: center; gap: 22px; background: #fff; border-radius: 6px; padding: 22px 24px; margin-bottom: 22px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.08); } .tenant-profile__avatar { flex: 0 0 auto; width: 70px; height: 70px; border-radius: 50%; background: #007891; color: #fff; font-size: 32px; font-weight: 600; line-height: 70px; text-align: center; } .tenant-profile__body { flex: 1 1 auto; min-width: 0; } .tenant-profile__title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .tenant-profile__title h2 { margin: 0; font-size: 26px; color: #007891; font-weight: 400; } .tenant-profile__meta { display: flex; flex-wrap: wrap; gap: 8px 36px; } .tenant-profile__meta-item { display: flex; flex-direction: column; } .tenant-profile__meta-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #999; } .tenant-profile__meta-value { font-size: 14px; color: #333; word-break: break-word; } /* === Tenant detail: 5-up KPI grid === */ .col-md-2-4 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; float: left; width: 20%; } @media (max-width: 991px) { .col-md-2-4 { width: 33.3333%; } } @media (max-width: 480px) { .col-md-2-4 { width: 50%; } } /* === Tabs === */ .nav-tabs { border-bottom: 1px solid #ddd; margin-bottom: 4px; } .nav-tabs > li { margin-right: 14px; } .nav-tabs > li:last-child { margin-right: 0; } .nav-tabs > li > a { border: none; border-radius: 0; color: #706f6f; font-weight: 600; text-transform: uppercase; font-size: 14px; letter-spacing: 0.5px; margin-right: 0; padding: 14px 22px; border-bottom: 3px solid transparent; } .nav-tabs > li > a:hover { background: transparent; border-color: transparent transparent #a1bb09; color: #007891; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus, .nav-tabs > li > a.active, .nav-tabs > li > a.active:hover, .nav-tabs > li > a.active:focus { background: transparent; border: none; border-bottom: 3px solid #007891 !important; color: #007891; } .tab-content { padding-top: 30px; } @media (max-width: 767px) { .nav-tabs > li { margin-right: 6px; } .nav-tabs > li > a { padding: 12px 14px; } } .tenant-tabs__hint { margin: 6px 4px 0; font-size: 12px; color: #999; } /* === Status badge === */ .badge-sent { display: inline-block; padding: 2px 8px; border-radius: 10px; background: #e6f4ea; color: #2e7d32; font-size: 12px; } .badge-failed { display: inline-block; padding: 2px 8px; border-radius: 10px; background: #fde8e8; color: #c0392b; font-size: 12px; } .badge-pending { display: inline-block; padding: 2px 8px; border-radius: 10px; background: #e8dfef; color: #a452de; font-size: 12px; } .badge-category-problem { display: inline-block; padding: 2px 8px; border-radius: 10px; background: #fde8e8; color: #c0392b; font-size: 12px; } .badge-category-contact { display: inline-block; padding: 2px 8px; border-radius: 10px; background: #e8f0fe; color: #1a56db; font-size: 12px; } .badge-status-open { display: inline-block; padding: 2px 8px; border-radius: 10px; background: #e0f5fb; color: #0e7490; font-size: 12px; } .badge-status-in-progress { display: inline-block; padding: 2px 8px; border-radius: 10px; background: #fff8e1; color: #b45309; font-size: 12px; } .badge-status-resolved { display: inline-block; padding: 2px 8px; border-radius: 10px; background: #e6f4ea; color: #2e7d32; font-size: 12px; } .badge-error-toggle { cursor: pointer; color: #7f8c8d; font-size: 14px; user-select: none; } .badge-error-row { display: inline-flex; align-items: center; gap: 6px; } /* === Misc page utilities === */ .container-bg-gray { background-color: rgb(236 236 237); } .my-50 { margin: 50px 0; } .mt-10 { margin-top: 10px; } .py-10pct { padding: 10% 0; } .text-center-container { text-align: center; } .color-red { color: red; } .color-accent { color: #a1bb09; } .fw-bold { font-weight: bold; } .fz-10 { font-size: 10px; } .modal-margin { margin: 16px auto; } .modal-body-relative { position: relative; } .modal-body-preview { padding: 0; position: relative; background: #f0f0f0; overflow: auto; max-height: 85vh; min-height: 300px; } .preview-loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff; z-index: 10; min-height: 300px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; } .preview-loading-text { color: #666; font-size: 13px; } .preview-bg { padding: 16px; background: #f0f0f0; } .preview-card { background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); } .preview-iframe { width: 100%; height: 300px; border: none; display: block; } .template-btn-row { display: flex; align-items: center; gap: 10px; width: 100%; flex-wrap: wrap; } .template-btn-row-end { display: flex; gap: 10px; justify-content: flex-end; width: 100%; } .test-email-input { width: 220px; } .flex-spacer { flex: 1; } .saving-text { color: #666; font-size: 13px; } .subject-label { font-weight: 600; font-size: 13px; margin-bottom: 4px; display: block; } .mb-12 { margin-bottom: 12px; } .template-textarea { width: 100%; } .modal-btn-group { border-radius: 50%; width: 24px; height: 24px; padding: 0; font-weight: 700; line-height: 1; margin-top: 4px; } .modal-title-row { display: flex; align-items: center; gap: 8px; } .profile-btn-change { background-color: #706f6f !important; } .tabelform1 select { border-radius: 50px; } @keyframes app-spin { to { transform: rotate(360deg); } } .app-spinner { width: 36px; height: 36px; border: 4px solid #e0e0e0; border-top-color: #7db928; border-radius: 50%; animation: app-spin 0.7s linear infinite; } .app-overlay { position: fixed; inset: 0; background: rgba(255, 255, 255, 0.8); z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; } .app-overlay-text { color: #666; font-size: 13px; } .circlename { border-radius: 50%; width: 57px; height: 57px; padding-top: 10px; background: #a1bb09; border: 1px solid #a1bb09; color: white; text-align: center; line-height: normal; font-size: 30px; font-family: "Helvetica"; margin-right: 10px; cursor: pointer; } .circlename a { color: white; display: block; width: 100%; height: 100%; } #sidebar ul li.active > a, a[aria-expanded="true"] { color: #fff; background: transparent; }