/**
 * Custom Theme CSS - #01672A Color Scheme
 * Include this file globally in your application
 */

/* ============================================
   Theme Color Variables
   ============================================ */
:root {
    --bs-primary: #01672A;
    --theme-primary: #01672A;
    --theme-primary-light: rgba(1, 103, 42, 0.1);
    --theme-primary-hover: #015522;
    --theme-primary-focus: rgba(1, 103, 42, 0.25);
    --theme-secondary: #058A3D;
    --theme-secondary-light: rgba(5, 138, 61, 0.1);
}

/* ============================================
   Text Colors
   ============================================ */
.text-theme-primary {
    color: #01672A !important;
}

.text-theme-primary:hover {
    color: #015522 !important;
}

.text-theme-secondary {
    color: #058A3D !important;
}

/* ============================================
   Background Colors
   ============================================ */
.bg-theme-primary {
    background-color: #01672A !important;
    color: white;
}

.bg-theme-primary-light {
    background-color: var(--theme-primary-light) !important;
}

.bg-theme-secondary {
    background-color: #058A3D !important;
    color: white;
}

/* ============================================
   Buttons - Primary Theme
   ============================================ */
.btn-theme-primary {
    background-color: #01672A;
    border-color: #01672A;
    color: white;
}

.btn-theme-primary:hover {
    background-color: #015522;
    border-color: #015522;
    color: white;
}

.btn-theme-primary:focus,
.btn-theme-primary:active,
.btn-theme-primary.active {
    background-color: #015522 !important;
    border-color: #015522 !important;
    box-shadow: 0 0 0 0.25rem rgba(1, 103, 42, 0.25) !important;
    color: white !important;
}

.btn-theme-primary:disabled {
    background-color: #01672A;
    border-color: #01672A;
    opacity: 0.6;
}

/* ============================================
   Buttons - Outline Variant
   ============================================ */
.btn-outline-theme-primary {
    border-color: #01672A;
    color: #01672A;
    background-color: transparent;
}

.btn-outline-theme-primary:hover {
    background-color: #01672A;
    border-color: #01672A;
    color: white;
}

.btn-outline-theme-primary:focus,
.btn-outline-theme-primary:active {
    box-shadow: 0 0 0 0.25rem rgba(1, 103, 42, 0.25);
    background-color: #01672A;
    border-color: #01672A;
    color: white;
}

/* ============================================
   Badges
   ============================================ */
.badge-theme-primary {
    background-color: var(--theme-primary-light);
    color: var(--theme-primary);
    border: 1px solid rgba(1, 103, 42, 0.2);
}

.badge-theme-secondary {
    background-color: var(--theme-secondary-light);
    color: var(--theme-secondary);
    border: 1px solid rgba(5, 138, 61, 0.2);
}

/* ============================================
   Borders
   ============================================ */
.border-theme-primary {
    border-color: #01672A !important;
}

.border-theme-secondary {
    border-color: #058A3D !important;
}

/* ============================================
   Form Controls
   ============================================ */
/*.form-control:focus,
.form-select:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem var(--theme-primary-focus);
}*/

/* Checkboxes */
.form-check-input:checked {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}

/*form-check-input:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 0.25rem var(--theme-primary-focus);
}*/

/* ============================================
   Select2 Styling
   ============================================ */
/*.select2-container--default .select2-selection--multiple {
    border-radius: 6px;
    min-height: 38px;
    border: 1px solid #dee2e6;
}*/

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem var(--theme-primary-focus);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--theme-primary);
    border: 1px solid var(--theme-primary);
    color: white;
    border-radius: 4px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: white;
    margin-right: 5px;
}

/*.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ffc107;
}*/

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--theme-primary) !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--theme-primary-light);
}

/* ============================================
   Links
   ============================================ */
a.text-theme-primary {
    text-decoration: none;
}

a.text-theme-primary:hover {
    text-decoration: underline;
    color: #015522 !important;
}

/* ============================================
   Cards and Panels
   ============================================ */
.card-theme-primary {
    border-left: 3px solid var(--theme-primary);
}

.card-theme-primary .card-header {
    background-color: var(--theme-primary-light);
    border-bottom: 1px solid rgba(1, 103, 42, 0.2);
}

/* ============================================
   Field Action Checkboxes (from announcement form)
   ============================================ */
.field-action-checkbox {
    /*margin-top: 8px;*/
    padding: 8px 12px;
    background-color: var(--theme-primary-light);
    border-radius: 6px;
    border-left: 3px solid var(--theme-primary);
    float: right;
    width: fit-content;
    display: inline-block;
}

.field-action-checkbox .form-check-input:checked {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}

.field-action-checkbox .form-check-input:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 0.25rem var(--theme-primary-focus);
}

/* ============================================
   Dropzone Styling
   ============================================ */
.dropzone-wrapper {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
}

.dropzone-wrapper:hover {
    border-color: var(--theme-primary);
    background-color: var(--theme-primary-light);
}

.dropzone-wrapper .dropzone {
    border: none;
    background: transparent;
    min-height: 150px;
}

.dropzone-wrapper .dropzone.dz-drag-hover {
    border-color: var(--theme-primary);
    background-color: var(--theme-primary-light);
    border-style: solid;
}

/* ============================================
   Attachment Items
   ============================================ */
.attachment-item {
    transition: all 0.2s ease;
}

.attachment-item:hover {
    background-color: var(--theme-primary-light);
    box-shadow: 0 2px 4px rgba(1, 103, 42, 0.1);
    border-color: var(--theme-primary) !important;
}

.attachment-item a.text-theme-primary {
    text-decoration: none;
}

.attachment-item a.text-theme-primary:hover {
    text-decoration: underline;
}

/* ============================================
   Detail View Tables
   ============================================ */
.detail-view th {
    background-color: #f8f9fa;
    font-weight: 600;
    vertical-align: top;
    padding: 12px !important;
}

.detail-view td {
    padding: 12px !important;
}

/* ============================================
   Alerts
   ============================================ */
.alert-theme-primary {
    background-color: var(--theme-primary-light);
    border-color: rgba(1, 103, 42, 0.2);
    color: var(--theme-primary);
}

.alert-theme-primary .alert-link {
    color: #015522;
}

/* ============================================
   Pagination
   ============================================ */
.pagination .page-item.active .page-link {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}

.pagination .page-link:hover {
    color: var(--theme-primary);
}

.pagination .page-link:focus {
    box-shadow: 0 0 0 0.25rem var(--theme-primary-focus);
}

/* ============================================
   Progress Bars
   ============================================ */
.progress-bar-theme-primary {
    background-color: var(--theme-primary);
}

/* ============================================
   Nav Tabs/Pills
   ============================================ */
.nav-tabs .nav-link.active {
    color: var(--theme-primary);
    border-bottom-color: var(--theme-primary);
}

.nav-pills .nav-link.active {
    background-color: var(--theme-primary);
}

.nav-pills .nav-link:hover {
    color: var(--theme-primary);
}

/* ============================================
   Summernote Editor
   ============================================ */
.note-editor.note-frame .note-editing-area .note-editable:focus {
    border-color: var(--theme-primary);
}

/* ============================================
   Utilities
   ============================================ */
.hover-shadow:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Required field indicator - more specific selector */
.form-group.required > label:after,
.form-group.required > .form-label:after,
.required > label:after {
    content: ' *';
    color: #dc3545;
    font-weight: bold;
}

/* Prevent asterisks on button labels and nested labels */
.inbox-type-selector label:after,
.btn-group label:after,
.required .btn label:after {
    content: none !important;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 768px) {
    .field-action-checkbox {
        /*margin-top: 10px;*/
        width: 100%;
    }

    .btn-sm {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
}
