/* ==========================================================================
KMS Invoice System - Global Stylesheet
========================================================================== */
/* ==========================================================================
1. BOOTSTRAP CDN - Include in Master Page
========================================================================== */
/*
Add to Site.Master :
*/
/* ==========================================================================
2. LAYOUT & STRUCTURE
========================================================================== */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f9fa;
padding-top: 70px; /* Space for fixed navbar */
}
.container-main {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
.page-header {
background: white;
padding: 20px;
margin-bottom: 25px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.page-title {
font-size: 24px;
font-weight: 600;
color: #333;
margin: 0;
}
.page-breadcrumb {
color: #6c757d;
font-size: 14px;
margin-top: 5px;
}
/* ==========================================================================
3. NAVIGATION
========================================================================== */
.navbar-custom {
background-color: #2c3e50;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.navbar-custom .navbar-brand {
color: #fff;
font-weight: bold;
font-size: 20px;
}
.navbar-custom .nav-link {
color: #ecf0f1 !important;
padding: 10px 15px;
transition: background-color 0.3s;
}
.navbar-custom .nav-link:hover {
background-color: #34495e;
border-radius: 4px;
}
.navbar-custom .dropdown-menu {
background-color: #34495e;
}
.navbar-custom .dropdown-item {
color: #ecf0f1;
}
.navbar-custom .dropdown-item:hover {
background-color: #2c3e50;
}
.user-info {
color: #ecf0f1;
padding: 10px 15px;
}
/* ==========================================================================
4. FORMS
========================================================================== */
.form-section {
background: white;
padding: 25px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.form-section-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #007bff;
}
.form-group label {
font-weight: 500;
color: #495057;
margin-bottom: 5px;
}
.form-control:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}
.required-field::after {
content: " *";
color: #dc3545;
}
/* Form validation */
.field-validation-error {
color: #dc3545;
font-size: 14px;
display: block;
margin-top: 5px;
}
.input-validation-error {
border-color: #dc3545 !important;
}
/* ==========================================================================
5. BUTTONS
========================================================================== */
.btn {
padding: 8px 20px;
font-weight: 500;
border-radius: 4px;
transition: all 0.3s;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:hover {
background-color: #0056b3;
border-color: #0056b3;
}
.btn-success {
background-color: #28a745;
border-color: #28a745;
}
.btn-success:hover {
background-color: #218838;
border-color: #218838;
}
.btn-danger {
background-color: #dc3545;
border-color: #dc3545;
}
.btn-danger:hover {
background-color: #c82333;
border-color: #c82333;
}
.btn-warning {
background-color: #ffc107;
border-color: #ffc107;
color: #212529;
}
.btn-secondary {
background-color: #6c757d;
border-color: #6c757d;
}
.btn-icon {
padding: 6px 12px;
font-size: 14px;
}
.btn-group-actions {
display: flex;
gap: 10px;
margin-top: 20px;
}
/* ==========================================================================
6. TABLES
========================================================================== */
.table-container {
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
overflow-x: auto;
}
.table-custom {
width: 100%;
margin-bottom: 0;
}
.table-custom thead {
background-color: #f8f9fa;
}
.table-custom thead th {
font-weight: 600;
color: #495057;
border-bottom: 2px solid #dee2e6;
padding: 12px;
text-align: left;
}
.table-custom tbody tr {
border-bottom: 1px solid #dee2e6;
transition: background-color 0.2s;
}
.table-custom tbody tr:hover {
background-color: #f8f9fa;
}
.table-custom tbody td {
padding: 12px;
vertical-align: middle;
}
.table-actions {
white-space: nowrap;
}
.table-actions a,
.table-actions button {
margin-right: 5px;
}
/* Commission row styling */
.row-commission {
background-color: #fff3cd;
}
.row-owner-commission {
background-color: #d1ecf1;
}
/* ==========================================================================
7. BADGES & STATUS
========================================================================== */
.badge-custom {
padding: 6px 12px;
font-size: 12px;
font-weight: 500;
border-radius: 4px;
}
/* Invoice Status */
.badge-status-open {
background-color: #17a2b8;
color: white;
}
.badge-status-closed {
background-color: #6c757d;
color: white;
}
.badge-status-deleted {
background-color: #dc3545;
color: white;
}
/* Payment Status */
.badge-payment-unpaid {
background-color: #dc3545;
color: white;
}
.badge-payment-partiallypaid {
background-color: #ffc107;
color: #212529;
}
.badge-payment-fullypaid {
background-color: #28a745;
color: white;
}
/* Supplier Payment Status */
.badge-supplier-due {
background-color: #ffc107;
color: #212529;
}
.badge-supplier-paid {
background-color: #28a745;
color: white;
}
/* Active Status */
.badge-active {
background-color: #28a745;
color: white;
}
.badge-inactive {
background-color: #6c757d;
color: white;
}
/* ==========================================================================
8. MESSAGES & ALERTS
========================================================================== */
.message-container {
position: fixed;
top: 80px;
right: 20px;
z-index: 9999;
max-width: 400px;
}
.alert-custom {
padding: 15px 20px;
margin-bottom: 10px;
border-radius: 4px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: space-between;
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.alert-success-custom {
background-color: #d4edda;
border-left: 4px solid #28a745;
color: #155724;
}
.alert-error-custom {
background-color: #f8d7da;
border-left: 4px solid #dc3545;
color: #721c24;
}
.alert-warning-custom {
background-color: #fff3cd;
border-left: 4px solid #ffc107;
color: #856404;
}
.alert-info-custom {
background-color: #d1ecf1;
border-left: 4px solid #17a2b8;
color: #0c5460;
}
.alert-close {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
padding: 0;
margin-left: 15px;
opacity: 0.6;
transition: opacity 0.2s;
}
.alert-close:hover {
opacity: 1;
}
/* ==========================================================================
9. INVOICE-SPECIFIC STYLES
========================================================================== */
.invoice-line-grid {
margin-top: 20px;
}
.invoice-line-item {
background: #f8f9fa;
padding: 15px;
margin-bottom: 10px;
border-radius: 4px;
border: 1px solid #dee2e6;
}
.invoice-line-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
font-weight: 600;
}
.invoice-totals {
background: #f8f9fa;
padding: 20px;
border-radius: 4px;
margin-top: 20px;
}
.invoice-total-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
font-size: 16px;
}
.invoice-total-row.grand-total {
font-size: 20px;
font-weight: bold;
border-top: 2px solid #333;
padding-top: 12px;
margin-top: 8px;
}
.invoice-total-label {
font-weight: 500;
}
.invoice-total-amount {
font-weight: 600;
text-align: right;
}
/* ==========================================================================
10. CARDS
========================================================================== */
.card-custom {
background: white;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 20px;
margin-bottom: 20px;
}
.card-header-custom {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid #007bff;
}
/* ==========================================================================
11. FILTERS & SEARCH
========================================================================== */
.filter-section {
background: white;
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.filter-row {
display: flex;
gap: 15px;
flex-wrap: wrap;
align-items: flex-end;
}
.filter-item {
flex: 1;
min-width: 200px;
}
/* ==========================================================================
12. UTILITY CLASSES
========================================================================== */
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-muted {
color: #6c757d;
}
.mt-10 {
margin-top: 10px;
}
.mt-20 {
margin-top: 20px;
}
.mb-10 {
margin-bottom: 10px;
}
.mb-20 {
margin-bottom: 20px;
}
.p-10 {
padding: 10px;
}
.p-20 {
padding: 20px;
}
.d-flex {
display: flex;
}
.justify-between {
justify-content: space-between;
}
.align-center {
align-items: center;
}
.gap-10 {
gap: 10px;
}
.no-wrap {
white-space: nowrap;
}
/* ==========================================================================
13. LOADING & SPINNERS
========================================================================== */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9998;
}
.spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #007bff;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ==========================================================================
14. LOGIN PAGE
========================================================================== */
.login-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.login-card {
background: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
max-width: 400px;
width: 100%;
}
.login-header {
text-align: center;
margin-bottom: 30px;
}
.login-title {
font-size: 28px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
.login-subtitle {
color: #6c757d;
font-size: 14px;
}
/* ==========================================================================
15. RESPONSIVE
========================================================================== */
@media (max-width: 768px) {
.filter-row {
flex-direction: column;
}
.filter-item {
width: 100%;
}
.table-container {
overflow-x: auto;
}
.btn-group-actions {
flex-direction: column;
}
.message-container {
left: 20px;
right: 20px;
max-width: none;
}
}