/**
 * Smart Solar Energy Partner Portal
 * Custom Styles - Brand Colors
 */

/* Self-hosted Poppins font */
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* CSS Variables - Smart Solar Energy Brand Colors */
:root {
    --primary-color: #00c100;
    --primary-dark: #00a000;
    --primary-light: #33d433;
    --accent-color: #6d0c0f;
    --accent-light: #8a1518;
    --success-color: #00c100;
    --warning-color: #ff9800;
    --error-color: #f44336;
    --text-primary: #333333;
    --text-secondary: #666666;
    --background: #f5f5f5;
}

/* Base Styles */
body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background-color: var(--background);
    font-family: 'Poppins', sans-serif;
}

main {
    flex: 1 0 auto;
}

/* Navigation */
nav {
    background-color: white !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

nav .nav-wrapper {
    padding: 8px 0;
}

nav .brand-logo {
    display: inline-block;
    line-height: normal;
}

nav .brand-logo .nav-logo {
    height: 48px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    vertical-align: middle;
}

nav ul a {
    color: var(--text-primary) !important;
}

nav ul a:hover {
    background-color: rgba(0, 193, 0, 0.1) !important;
    color: var(--primary-color) !important;
}

nav .sidenav-trigger {
    color: var(--text-primary) !important;
}

@media only screen and (max-width: 992px) {
    nav .brand-logo .nav-logo {
        height: 40px;
        max-width: 150px;
    }
}

/* Auth Pages (Login/Register) */
.auth-card .auth-logo {
    max-width: 220px;
    height: auto;
    max-height: 80px;
    object-fit: contain;
}

/* Cards */
.card {
    border-radius: 8px;
}

.card .card-title {
    font-size: 1.3rem;
    font-weight: 500;
}

.auth-card {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Statistics Cards */
.stat-card {
    text-align: center;
    padding: 20px !important;
}

.stat-card .material-icons {
    font-size: 48px;
    color: var(--primary-color);
}

.stat-number {
    font-size: 2rem;
    font-weight: 600;
    color: var(--primary-color);
    margin: 10px 0;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Badges */
.badge-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
}

.badge-status.active {
    background-color: #c8e6c9;
    color: #2e7d32;
}

.badge-status.unassigned {
    background-color: #fff3e0;
    color: #e65100;
}

.badge-status.pending {
    background-color: #ffecb3;
    color: #ff8f00;
}

.badge-status.inactive,
.badge-status.disabled {
    background-color: #ffcdd2;
    color: #c62828;
}

.badge-status.denied,
.badge-status.expired {
    background-color: #ffcdd2;
    color: #c62828;
}

/* Serial Numbers and License Keys */
.serial-number,
.license-key {
    font-family: 'Courier New', monospace;
    background-color: #e8f5e9;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    letter-spacing: 1px;
    border: 1px solid #c8e6c9;
}

.license-key {
    font-size: 0.9rem;
    word-break: break-all;
}

a .serial-number {
    text-decoration: none;
    transition: background-color 0.2s;
}

a:hover .serial-number,
a:focus .serial-number {
    background-color: #c8e6c9;
    border-color: var(--primary-color);
}

/* Tables */
table.striped > tbody > tr:nth-child(odd) {
    background-color: #fafafa;
}

table th {
    font-weight: 600;
    color: var(--text-primary);
}

/* Buttons */
.btn, .btn-large, .btn-small {
    border-radius: 4px;
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.btn:hover, .btn-large:hover, .btn-small:hover,
.btn:focus, .btn-large:focus, .btn-small:focus {
    background-color: var(--primary-dark) !important;
}

.btn.red, .btn-small.red {
    background-color: var(--accent-color) !important;
}

.btn.red:hover, .btn-small.red:hover {
    background-color: var(--accent-light) !important;
}

.btn-flat {
    color: var(--primary-color) !important;
}

.btn-flat:hover {
    background-color: rgba(0, 193, 0, 0.1) !important;
}

.btn-small {
    padding: 0 8px;
    height: 28px;
    line-height: 28px;
}

.btn-small i.material-icons {
    font-size: 1.2rem;
}

/* Forms */
.input-field .prefix.active {
    color: var(--primary-color) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-bottom-color: var(--primary-color) !important;
    box-shadow: 0 1px 0 0 var(--primary-color) !important;
}

input:focus + label,
textarea:focus + label,
select:focus + label {
    color: var(--primary-color) !important;
}

[type="checkbox"].filled-in:checked + span:not(.lever):after {
    border-color: var(--primary-color) !important;
    background-color: var(--primary-color) !important;
}

/* Links */
a {
    color: var(--primary-color);
}

a:hover {
    color: var(--primary-dark);
}

.card-action {
    padding: 16px 0 !important;
}

.card-action a {
    color: var(--primary-color) !important;
    display: flex !important;
    align-items: center;
    margin: 0 0 8px 0 !important;
    padding: 8px 0 !important;
    float: none !important;
}

.card-action div {
    display: block;
    clear: both;
    padding: 0 !important;
    margin: 0 !important;
}

.card-action a:last-child,
.card-action div:last-child a {
    margin-bottom: 0 !important;
}

.card-action a:hover {
    color: var(--primary-dark) !important;
}

.card-action a i.material-icons {
    margin-right: 8px;
    float: none !important;
}

/* Flash Messages */
.flash-message {
    border-radius: 4px;
    padding: 15px 20px;
    margin-bottom: 20px;
}

.flash-message i.material-icons {
    vertical-align: middle;
    margin-right: 10px;
}

/* Pagination */
.pagination li.active {
    background-color: var(--primary-color);
}

.pagination li a {
    color: var(--primary-color);
}

/* Collection */
.collection .collection-item.avatar i.material-icons.circle {
    font-size: 24px;
    line-height: 42px;
    color: white;
}

/* Footer */
.page-footer {
    background-color: var(--primary-dark);
    padding-top: 20px;
}

.page-footer .footer-copyright {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Responsive */
@media only screen and (max-width: 600px) {
    .stat-card {
        padding: 15px !important;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .serial-number,
    .license-key {
        font-size: 0.75rem;
    }
}

/* Read-only fields styling */
input[readonly],
textarea[readonly] {
    background-color: #f5f5f5 !important;
    cursor: not-allowed;
    color: #666;
    border-bottom: 1px solid #e0e0e0 !important;
}

input[readonly]:focus,
textarea[readonly]:focus {
    border-bottom: 1px solid #e0e0e0 !important;
    box-shadow: none !important;
}

/* Edit button in card title */
.card-title .btn-flat {
    height: auto;
    line-height: normal;
    padding: 4px 12px;
}

.card-title .btn-flat:hover {
    background-color: rgba(0, 193, 0, 0.1);
}

    }
    
    table {
        font-size: 0.9rem;
    }
}

/* Print Styles */
@media print {
    nav, footer, .btn, .no-print {
        display: none !important;
    }
    
    main {
        margin: 0;
        padding: 0;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* Tabs */
.tabs .tab a {
    color: var(--primary-color);
}

.tabs .tab a:hover,
.tabs .tab a.active {
    color: var(--primary-dark);
}

.tabs .indicator {
    background-color: var(--primary-color);
}

/* Modal */
.modal {
    border-radius: 8px;
}

.modal .modal-footer {
    background-color: transparent;
}

/* Divider */
.divider {
    background-color: #e0e0e0;
}

/* Helper Classes */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 10px !important; }
.mt-2 { margin-top: 20px !important; }
.mt-3 { margin-top: 30px !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 10px !important; }
.mb-2 { margin-bottom: 20px !important; }
.mb-3 { margin-bottom: 30px !important; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.no-wrap { white-space: nowrap; }