/**
 * Custom Styles for Wespac Intranet
 */

/* Brand Colors */
:root {
    --wespac-primary: #007bff;
    --wespac-secondary: #6c757d;
    --wespac-dark: #343a40;
}

/* Sidebar branding */
.brand-link {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.brand-link .brand-image {
    max-height: 33px;
    width: auto;
}

/* Login page styles */
.login-page {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-box {
    width: 400px;
}

.login-card-body {
    padding: 30px;
}

.login-logo img {
    max-width: 200px;
    margin-bottom: 20px;
}

/* Form improvements */
.form-group label {
    font-weight: 600;
}

.required-field::after {
    content: " *";
    color: #dc3545;
}

/* Card enhancements */
.card-header {
    font-weight: 600;
}

/* DataTable customizations */
.dataTables_wrapper .dataTables_filter input {
    border-radius: 4px;
}

/* Dashboard widgets */
.small-box {
    border-radius: 8px;
}

.small-box .icon {
    font-size: 70px;
    opacity: 0.3;
}

/* Menu option cards (matching old site style) */
.menu-option {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.menu-option h3 {
    color: var(--wespac-dark);
    font-size: 1.1rem;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--wespac-primary);
    padding-bottom: 8px;
}

.menu-option a {
    color: var(--wespac-primary);
    text-decoration: none;
}

.menu-option a:hover {
    text-decoration: underline;
}

/* Form sections */
.form-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.form-section h4 {
    color: var(--wespac-dark);
    border-bottom: 2px solid var(--wespac-primary);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Address field groups */
.address-group .form-control {
    margin-bottom: 10px;
}

/* Print styles */
@media print {
    .main-sidebar,
    .main-header,
    .main-footer {
        display: none !important;
    }

    .content-wrapper {
        margin-left: 0 !important;
    }
}
