/**
 * Portal 2025 Vision - Modern Styling for Conference Showcase
 *
 * This stylesheet provides scoped styling updates for the 2025 vision conference.
 * All styles are scoped under .portal-2025 to avoid conflicts with existing styles.
 *
 * Architecture:
 * - High specificity selectors to override existing styles
 * - No !important declarations (use inline styles as fallback if needed)
 * - Component-based naming for reusability
 * - Mobile-first responsive design
 */

/* ============================================
   SCOPING WRAPPER
   ============================================ */
.portal-2025 {
    font-family: "IBM Plex Sans", "Noto Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ============================================
   BREADCRUMB NAVIGATION
   ============================================ */
.portal-2025 .breadcrumb-nav {
    margin-bottom: 16px;
}

.portal-2025 .breadcrumb-nav a,
.portal-2025 .breadcrumb-nav .breadcrumb-link {
    color: #165dfb;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.portal-2025 .breadcrumb-nav .breadcrumb-link:hover {
    color: #1047c4;
    text-decoration: underline;
}

.portal-2025 .breadcrumb-nav .breadcrumb-separator {
    margin: 0 8px;
    color: #6c757d;
}

/* XN number in breadcrumbs should be darker */
.portal-2025 .breadcrumb-nav span {
    color: #212529;
}

/* Hide the horizontal rule under breadcrumbs */
.portal-2025 .header-hr {
    display: none;
}

/* ============================================
   PAGE HEADER SECTION
   ============================================ */
.portal-2025 .page-header-section {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: start;
    margin-bottom: 20px;
}

.portal-2025 .page-title-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.portal-2025 .page-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.portal-2025 .page-title {
    font-size: 20px;
    font-weight: 500;
    color: #05254a;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.portal-2025 .attachment-icon {
    display: inline-flex;
    align-items: center;
}

.portal-2025 .attachment-icon img {
    width: 18px;
    height: 20px;
}

.portal-2025 .attachment-icon a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.portal-2025 .page-label {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
    margin: 0;
}

.portal-2025 .page-subtitle {
    font-size: 16px;
    color: #212529;
    margin: 0;
}

/* ============================================
   INVOICE METADATA CARD
   ============================================ */
.portal-2025 .metadata-card {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    padding: 20px 24px;
    background-color: #ffffff;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    margin-bottom: 24px;
}

.portal-2025 .metadata-card-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.portal-2025 .metadata-label {
    font-size: 13px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.portal-2025 .metadata-value {
    font-size: 15px;
    font-weight: 500;
    color: #212529;
}

/* Tablet: 2 columns */
@media (max-width: 992px) {
    .portal-2025 .metadata-card {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Mobile: Stack vertically */
@media (max-width: 768px) {
    .portal-2025 .metadata-card {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ============================================
   WORKFLOW BUTTONS (APPROVE/DECLINE)
   ============================================ */
.portal-2025 .workflow-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.portal-2025 .k-button.btn-approve,
.portal-2025 .k-menu .k-button.btn-approve,
.portal-2025 button.btn-approve {
    background-color: #ffffff;
    border: 2px solid #28a745;
    color: #28a745;
    border-radius: 4px;
    padding: 8px 20px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
}

.portal-2025 .k-button.btn-approve:hover,
.portal-2025 button.btn-approve:hover {
    background-color: #28a745;
    color: #ffffff;
}

.portal-2025 .k-button.btn-decline,
.portal-2025 .k-menu .k-button.btn-decline,
.portal-2025 button.btn-decline {
    background-color: #ffffff;
    border: 2px solid #dc3545;
    color: #dc3545;
    border-radius: 4px;
    padding: 8px 20px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
}

.portal-2025 .k-button.btn-decline:hover,
.portal-2025 button.btn-decline:hover {
    background-color: #dc3545;
    color: #ffffff;
}

/* ============================================
   EXPORT BUTTON
   ============================================ */
.portal-2025 .k-button.btn-export,
.portal-2025 button.btn-export {
    background-color: #f8f8f8 !important;
    border: none !important;
    color: #495057 !important;
    border-radius: 4px !important;
    padding: 8px 18px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 36px !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    line-height: 1.4 !important;
}

.portal-2025 .k-button.btn-export:hover,
.portal-2025 button.btn-export:hover {
    background-color: #eeeeee !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    text-decoration: none !important;
}

.portal-2025 .k-button.btn-export .k-icon,
.portal-2025 button.btn-export .k-icon {
    font-size: 16px !important;
}

/* ============================================
   PRIMARY ACTION BUTTONS (Send Message, New Invoice Detail)
   ============================================ */
.portal-2025 .btn-primary-action,
.portal-2025 .k-button.btn-primary-action,
.portal-2025 button.btn-primary-action {
    background-color: #165dfb !important;
    border: 2px solid #165dfb !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 44px !important;
}

.portal-2025 .btn-primary-action:hover,
.portal-2025 .k-button.btn-primary-action:hover,
.portal-2025 button.btn-primary-action:hover {
    background-color: #1047c4 !important;
    border-color: #1047c4 !important;
}

.portal-2025 .btn-primary-action .fa,
.portal-2025 .btn-primary-action .k-icon {
    font-size: 16px;
    order: 2;
}

.portal-2025 .btn-primary-action {
    flex-direction: row-reverse;
}

/* ============================================
   TAB NAVIGATION
   ============================================ */
.portal-2025 .invoice-tabs {
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 24px;
}

.portal-2025 .invoice-tabs .nav {
    display: flex;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-2025 .invoice-tabs .nav li {
    margin: 0;
    border-bottom: 3px solid transparent;
}

.portal-2025 .invoice-tabs .nav a {
    display: block;
    padding: 12px 16px;
    color: #6c757d;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.portal-2025 .invoice-tabs .nav li:hover {
    border-bottom-color: #99c2ff;
}

.portal-2025 .invoice-tabs .nav a:hover {
    color: #495057;
}

.portal-2025 .invoice-tabs .nav li.active-tab {
    border-bottom-color: #165dfb;
}

.portal-2025 .invoice-tabs .nav a.active {
    color: #165dfb;
}

/* ============================================
   TAB MENU NAVIGATION (Messages/Calendar Style)
   ============================================ */
.portal-2025 .tab-menu {
    margin-bottom: 24px;
}

.portal-2025 .tab-menu-container {
    display: flex;
    gap: 32px;
}

.portal-2025 .tab-menu-link {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #666666;
    text-decoration: none;
    padding: 12px 0;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    display: inline-block;
}

.portal-2025 .tab-menu-link:hover {
    color: #165dfb;
    text-decoration: none;
}

.portal-2025 .tab-menu-link-active {
    color: #165dfb;
    border-bottom-color: #165dfb;
}

/* ============================================
   AMENITY CALENDAR FILTERS
   ============================================ */
.portal-2025 .amenity-calendar-filters {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
}

/* Form field structure (matches ArcRequest styling) */
.portal-2025 .amenity-calendar-filters .form-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.portal-2025 .amenity-calendar-filters .field-label {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 19px;
    color: #1a1a1a;
    margin: 0;
}

.portal-2025 .amenity-calendar-filters .field-input {
    position: relative;
}

/* Kendo Dropdown Styling - matches form field dropdowns */
.portal-2025 .amenity-calendar-filters .field-input .k-dropdown,
.portal-2025 .amenity-calendar-filters .field-input .k-widget.k-dropdown {
    width: 100% !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 14px !important;
    height: 44px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

.portal-2025 .amenity-calendar-filters .field-input .k-dropdown .k-dropdown-wrap {
    border: none !important;
    border-radius: 6px !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.portal-2025 .amenity-calendar-filters .field-input .k-dropdown:hover {
    border-color: #165dfb !important;
}

.portal-2025 .amenity-calendar-filters .field-input .k-dropdown:focus,
.portal-2025 .amenity-calendar-filters .field-input .k-state-focused {
    border-color: #165dfb !important;
    box-shadow: 0 0 0 3px rgba(22, 93, 251, 0.1) !important;
    outline: none !important;
}

.portal-2025 .amenity-calendar-filters .field-input .k-input {
    font-family: "Open Sans", sans-serif !important;
    font-size: 14px !important;
    line-height: 44px !important;
    color: #1a1a1a !important;
    padding: 0 12px !important;
    height: 100% !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border: none !important;
    background: transparent !important;
}

.portal-2025 .amenity-calendar-filters .field-input .k-select {
    border-radius: 0 6px 6px 0 !important;
    height: 100% !important;
    width: 40px !important;
    flex: 0 0 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-left: none !important;
    background: transparent !important;
    border: none !important;
}

/* Calendar action link (arrow link style) */
.portal-2025 .calendar-action-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #165dfb !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.portal-2025 .calendar-action-link:hover {
    color: #1047c4 !important;
    text-decoration: none !important;
}

.portal-2025 .calendar-action-link i {
    font-size: 12px;
}

/* ============================================
   KENDO SCHEDULER TOOLBAR STYLING (Figma Design)
   ============================================ */
/* Calendar content wrapper - add border to container */
.portal-2025 .post {
    border: 1px solid #e1e1e1 !important;
    border-radius: 6px !important;
    overflow: hidden;
    background-color: #ffffff;
}

/* Scheduler container - add top spacing and vertical padding only */
.portal-2025 .k-scheduler {
    margin-top: 0 !important;
    padding: 16px 0 !important;
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Scheduler layout - main calendar frame with complete border */
.portal-2025 .k-scheduler-layout {
    border: 1px solid #e0e0e0 !important;
    border-radius: 0 !important;
    background-color: #ffffff !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* Ensure all scheduler child elements respect box-sizing */
.portal-2025 .k-scheduler-layout *,
.portal-2025 .k-scheduler-layout *::before,
.portal-2025 .k-scheduler-layout *::after {
    box-sizing: border-box !important;
}

/* Scheduler toolbar container */
.portal-2025 .k-scheduler .k-scheduler-toolbar {
    background-color: transparent !important;
    border: none !important;
    padding: 0 0 16px 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Navigation controls - specific ordering */
.portal-2025 .k-scheduler .k-scheduler-navigation {
    display: contents !important;
}

/* Previous arrow - order 1 */
.portal-2025 .k-scheduler .k-nav-prev {
    order: 1 !important;
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 3px 7px !important;
    color: #495057 !important;
    min-width: 26px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
}

/* Next arrow - order 2 */
.portal-2025 .k-scheduler .k-nav-next {
    order: 2 !important;
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 3px 7px !important;
    color: #495057 !important;
    min-width: 26px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
}

.portal-2025 .k-scheduler .k-nav-prev:hover,
.portal-2025 .k-scheduler .k-nav-next:hover {
    background-color: #f8f9fa !important;
    border-color: #c8c8c8 !important;
}

/* Today button - order 3 (if it exists as a link/button) */
.portal-2025 .k-scheduler .k-nav-today {
    order: 3 !important;
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 3px 9px !important;
    color: #212529 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

.portal-2025 .k-scheduler .k-nav-today:hover {
    background-color: #f8f9fa !important;
    border-color: #c8c8c8 !important;
}

/* Date/Month selector button - order 4 */
.portal-2025 .k-scheduler .k-nav-current {
    order: 4 !important;
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 3px 9px !important;
    color: #212529 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    min-width: auto !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    line-height: 1 !important;
}

.portal-2025 .k-scheduler .k-nav-current:hover {
    background-color: #f8f9fa !important;
    border-color: #d0d0d0 !important;
}

/* View selector pills - order 5, pushed to the right */
.portal-2025 .k-scheduler .k-scheduler-views {
    order: 5 !important;
    display: flex !important;
    gap: 15px !important;
    align-items: center !important;
    margin-left: auto !important;
}

/* Individual view buttons/pills */
.portal-2025 .k-scheduler .k-scheduler-views .k-view-button,
.portal-2025 .k-scheduler .k-scheduler-views .k-button {
    background-color: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    color: #666666 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: "Open Sans", sans-serif !important;
    text-transform: none !important;
    min-height: 30px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.portal-2025 .k-scheduler .k-scheduler-views .k-view-button:hover,
.portal-2025 .k-scheduler .k-scheduler-views .k-button:hover {
    color: #165dfb !important;
    background-color: transparent !important;
}

/* Active view pill */
.portal-2025 .k-scheduler .k-scheduler-views .k-state-selected,
.portal-2025 .k-scheduler .k-scheduler-views .k-button.k-state-selected,
.portal-2025 .k-scheduler .k-scheduler-views .k-state-selected .k-link,
.portal-2025 .k-scheduler .k-scheduler-views .k-button.k-state-selected .k-link {
    background-color: #165dfb !important;
    color: #ffffff !important;
    border-radius: 4px !important;
}

.portal-2025 .k-scheduler .k-scheduler-views .k-state-selected:hover,
.portal-2025 .k-scheduler .k-scheduler-views .k-state-selected:hover .k-link {
    background-color: #1047c4 !important;
    color: #ffffff !important;
}

/* ============================================
   KENDO SCHEDULER EVENT TILES (Resource Colors)
   ============================================ */
/* Event tiles - allow resource colors to show through */
.portal-2025 .k-scheduler .k-event,
.portal-2025 .k-scheduler-monthview .k-event,
.portal-2025 .k-scheduler .k-event.k-state-selected,
.portal-2025 .k-scheduler-monthview .k-event.k-state-selected {
    color: #fff !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    /* Don't force background/border - let Kendo's inline resource colors show through */
    /* Kendo applies colors via inline styles which have higher specificity */
}

/* Only apply default pink color if no inline style is present (fallback) */
.portal-2025 .k-scheduler .k-event:not([style*="background"]),
.portal-2025 .k-scheduler-monthview .k-event:not([style*="background"]),
.portal-2025 .k-scheduler .k-event.k-state-selected:not([style*="background"]),
.portal-2025 .k-scheduler-monthview .k-event.k-state-selected:not([style*="background"]) {
    border-color: #f8a398;
    background-color: #f8a398;
    background: #f8a398;
}

.portal-2025 .k-scheduler .k-event:hover,
.portal-2025 .k-scheduler-monthview .k-event:hover {
    color: #fff !important;
    /* Preserve resource colors on hover - don't override inline styles */
}

/* ============================================
   KENDO SCHEDULER EVENT EDITOR MODAL
   Note: Modal is appended to body, so no .portal-2025 scoping
   ============================================ */
/* Modal window */
.k-window.k-scheduler-edit-form {
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
}

/* Remove padding from embedded page popup edit form */
.embedded-page .k-window>div.k-popup-edit-form {
    padding: 0 !important;
}

/* Modal header with title and close button */
.k-scheduler-edit-form .k-window-titlebar,
.k-window.k-scheduler-edit-form .k-window-titlebar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.k-scheduler-edit-form .k-window-title,
.k-window.k-scheduler-edit-form .k-window-title {
    font-family: "Open Sans", sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 !important;
}

/* Close button (X) */
.k-scheduler-edit-form .k-window-titlebar .k-window-actions,
.k-window.k-scheduler-edit-form .k-window-titlebar .k-window-actions {
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

.k-scheduler-edit-form .k-window-titlebar .k-window-action,
.k-window.k-scheduler-edit-form .k-window-titlebar .k-window-action {
    color: #6b7280 !important;
    font-size: 20px !important;
    padding: 4px !important;
    opacity: 1 !important;
    margin: 0 !important;
}

.k-scheduler-edit-form .k-window-titlebar .k-window-action:hover,
.k-window.k-scheduler-edit-form .k-window-titlebar .k-window-action:hover {
    color: #1a1a1a !important;
}

/* Modal content area */
.k-scheduler-edit-form .k-edit-form-container {
    padding: 18px 20px !important;
    background-color: #ffffff !important;
}

/* Form fields in modal - make them vertical like ArcRequest */
.k-scheduler-edit-form .k-edit-form-container .k-edit-label {
    font-family: "Open Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 19px !important;
    color: #1a1a1a !important;
    padding: 0 !important;
    margin: 0 0 6px 0 !important;
    width: 100% !important;
    text-align: left !important;
    float: none !important;
    display: block !important;
}

.k-scheduler-edit-form .k-edit-form-container .k-edit-field {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 14px 0 !important;
    display: block !important;
    float: none !important;
}

/* Remove any default Kendo spacing that offsets labels */
.k-scheduler-edit-form .k-edit-form-container li.k-form-field,
.k-scheduler-edit-form .k-edit-form-container .k-form-field {
    padding: 0 !important;
    margin: 0 0 14px 0 !important;
}

/* Make form layout vertical (stacked) */
.k-scheduler-edit-form .k-edit-form-container .k-edit-form-content {
    display: flex !important;
    flex-direction: column !important;
}





/* Checkboxes in modal */
.k-scheduler-edit-form .k-edit-form-container input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px !important;
    cursor: pointer !important;
}

/* All Day Event checkbox - make inline with label */
.k-scheduler-edit-form .k-edit-form-container .k-form-field:has(input[name="isAllDay"]),
.k-scheduler-edit-form .k-edit-form-container li:has(input[name="isAllDay"]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 0 14px 0 !important;
}

.k-scheduler-edit-form .k-edit-form-container .k-form-field:has(input[name="isAllDay"]) .k-edit-label,
.k-scheduler-edit-form .k-edit-form-container li:has(input[name="isAllDay"]) .k-edit-label {
    width: auto !important;
    margin: 0 0 0 0 !important;
    order: 2 !important;
}

.k-scheduler-edit-form .k-edit-form-container .k-form-field:has(input[name="isAllDay"]) .k-edit-field,
.k-scheduler-edit-form .k-edit-form-container li:has(input[name="isAllDay"]) .k-edit-field {
    width: auto !important;
    margin: 0 !important;
    order: 1 !important;
}

/* Modal buttons (Save and Cancel) - match btn-primary-action style */
.k-edit-form-container .k-button,
.k-edit-buttons .k-button {
    font-family: "Open Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    line-height: 20px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-image: none !important;
    text-shadow: none !important;
    border: 2px solid transparent !important;
}

/* Cancel button - gray/outline style */
.k-edit-form-container .k-button:not(.k-primary),
.k-edit-buttons .k-button:not(.k-primary) {
    background-color: #ffffff !important;
    border: 2px solid #e0e0e0 !important;
    color: #1a1a1a !important;
    box-shadow: 0px 2px 4px rgba(15, 15, 35, 0.08) !important;
}

.k-edit-form-container .k-button:not(.k-primary):hover,
.k-edit-buttons .k-button:not(.k-primary):hover {
    background-color: #f9fafb !important;
    border-color: #d1d5db !important;
    transform: translateY(-1px) !important;
    box-shadow: 0px 4px 8px rgba(15, 15, 35, 0.12) !important;
}

/* Primary button (Save/Update) - match btn-primary-action */
.k-edit-form-container .k-button.k-primary,
.k-window.k-scheduler-edit-form .k-edit-form-container .k-button.k-button-primary,
.k-window.k-scheduler-edit-form .k-edit-form-container .k-primary.k-button,
.k-scheduler-edit-form .k-edit-form-container .k-button.k-primary,
.k-scheduler-edit-form .k-edit-form-container .k-button.k-button-primary,
.k-scheduler-edit-form .k-edit-form-container .k-primary.k-button,
.k-edit-form-container .k-button.k-primary,
.k-edit-form-container .k-primary.k-button,
.embedded-page .k-window .k-button.k-primary,
.embedded-page .k-window .k-primary.k-button,
body .k-window.k-scheduler-edit-form .k-button.k-primary,
body .k-window.k-scheduler-edit-form .k-primary.k-button {
    background-color: #165dfb !important;
    background: #165dfb !important;
    background-image: none !important;
    border: 2px solid #165dfb !important;
    border-color: #165dfb !important;
    color: #ffffff !important;
    box-shadow: 0px 2px 4px rgba(15, 15, 35, 0.16) !important;
    filter: none !important;
}

.k-window.k-scheduler-edit-form .k-edit-form-container .k-button.k-primary:hover,
.k-window.k-scheduler-edit-form .k-edit-form-container .k-button.k-button-primary:hover,
.k-window.k-scheduler-edit-form .k-edit-form-container .k-primary.k-button:hover,
.k-scheduler-edit-form .k-edit-form-container .k-button.k-primary:hover,
.k-scheduler-edit-form .k-edit-form-container .k-button.k-button-primary:hover,
.k-scheduler-edit-form .k-edit-form-container .k-primary.k-button:hover,
.k-edit-form-container .k-button.k-primary:hover,
.k-edit-form-container .k-primary.k-button:hover,
.embedded-page .k-window .k-button.k-primary:hover,
.embedded-page .k-window .k-primary.k-button:hover,
body .k-window.k-scheduler-edit-form .k-button.k-primary:hover,
body .k-window.k-scheduler-edit-form .k-primary.k-button:hover {
    background-color: #1047c4 !important;
    background: #1047c4 !important;
    background-image: none !important;
    border-color: #1047c4 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0px 4px 8px rgba(15, 15, 35, 0.24) !important;
    filter: none !important;
}

.k-window.k-scheduler-edit-form .k-edit-form-container .k-button.k-primary:active,
.k-window.k-scheduler-edit-form .k-edit-form-container .k-button.k-button-primary:active,
.k-scheduler-edit-form .k-edit-form-container .k-button.k-primary:active,
.k-scheduler-edit-form .k-edit-form-container .k-button.k-button-primary:active,
.k-edit-form-container .k-button.k-primary:active,
.embedded-page .k-window .k-button.k-primary:active,
.embedded-page .k-window .k-primary.k-button:active,
body .k-window.k-scheduler-edit-form .k-button.k-primary:active,
body .k-window.k-scheduler-edit-form .k-primary.k-button:active {
    background-color: #165dfb !important;
    background: #165dfb !important;
    background-image: none !important;
    border-color: #165dfb !important;
    transform: translateY(0) !important;
    box-shadow: 0px 2px 4px rgba(15, 15, 35, 0.16) !important;
    filter: none !important;
}

/* Cancel button - subtle secondary style */
.k-scheduler-edit-form .k-edit-form-container .k-button:not(.k-primary):not(.k-button-primary) {
    background-color: #ffffff !important;
    border: 2px solid #e0e0e0 !important;
    color: #495057 !important;
    box-shadow: none !important;
}

.k-scheduler-edit-form .k-edit-form-container .k-button:not(.k-primary):not(.k-button-primary):hover {
    background-color: #f8f9fa !important;
    border-color: #c8c8c8 !important;
    color: #212529 !important;
}

.k-scheduler-edit-form .k-edit-form-container .k-button:not(.k-primary):not(.k-button-primary):active {
    transform: none !important;
}

/* Delete button - danger style */
.k-scheduler-edit-form .k-edit-form-container .k-scheduler-delete {
    background-color: #ffffff !important;
    border: 2px solid #dc3545 !important;
    color: #dc3545 !important;
    box-shadow: none !important;
}

.k-scheduler-edit-form .k-edit-form-container .k-scheduler-delete:hover {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
    box-shadow: 0px 2px 4px rgba(220, 53, 69, 0.2) !important;
}

.k-scheduler-edit-form .k-edit-form-container .k-scheduler-delete:active {
    transform: translateY(-1px) !important;
}

/* Button container */
.k-scheduler-edit-form .k-edit-form-container .k-edit-buttons {
    padding-top: 14px !important;
    border-top: 1px solid #e5e7eb !important;
    margin-top: 10px !important;
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-start !important;
}

/* ============================================
   KENDO RECURRING EVENT CONFIRMATION DIALOG
   Simple styling for "Edit this occurrence" / "Edit the series" dialog
   ============================================ */
/* Match buttons to portal design system - exact same blue (#165dfb) */
.k-recur-confirmation .k-button,
.k-window.k-recur-confirmation .k-button {
    font-family: "Open Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-image: none !important;
    text-shadow: none !important;
}

.k-recur-confirmation .k-button.k-primary,
.k-window.k-recur-confirmation .k-button.k-primary {
    background-color: #165dfb !important;
    background-image: none !important;
    border: 2px solid #165dfb !important;
    color: #ffffff !important;
    box-shadow: 0px 2px 4px rgba(15, 15, 35, 0.16) !important;
}

.k-recur-confirmation .k-button.k-primary:hover,
.k-window.k-recur-confirmation .k-button.k-primary:hover {
    background-color: #1047c4 !important;
    background-image: none !important;
    border-color: #1047c4 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0px 4px 8px rgba(15, 15, 35, 0.24) !important;
}

.k-recur-confirmation .k-button.k-primary:active,
.k-window.k-recur-confirmation .k-button.k-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0px 2px 4px rgba(15, 15, 35, 0.16) !important;
    background-image: none !important;
}

.k-recur-confirmation .k-button:not(.k-primary),
.k-window.k-recur-confirmation .k-button:not(.k-primary) {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 2px solid #e0e0e0 !important;
    color: #495057 !important;
    box-shadow: none !important;
}

.k-recur-confirmation .k-button:not(.k-primary):hover,
.k-window.k-recur-confirmation .k-button:not(.k-primary):hover {
    background-color: #f8f9fa !important;
    border-color: #c8c8c8 !important;
    color: #212529 !important;
}

/* ============================================
   REPORTS PAGE STYLING
   ============================================ */
/* Search container */
.portal-2025 .reports-search-container {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    justify-content: flex-end;
}

/* Modern search input */
.portal-2025 .modern-search-input {
    width: 300px;
    padding: 10px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #1a1a1a;
    background-color: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.portal-2025 .modern-search-input:focus {
    outline: none;
    border-color: #165dfb;
    box-shadow: 0 0 0 3px rgba(22, 93, 251, 0.1);
}

.portal-2025 .modern-search-input::placeholder {
    color: #9ca3af;
}

/* Modern search button */
.portal-2025 .modern-search-button {
    padding: 10px 16px;
    background-color: #165dfb;
    border: 2px solid #165dfb;
    color: #ffffff;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
}

.portal-2025 .modern-search-button:hover {
    background-color: #1047c4;
    border-color: #1047c4;
}

.portal-2025 .modern-search-button i {
    font-size: 14px;
}

/* Report Sections - Card/Section Layout (Figma Design) */
/* Each section is a single card containing header and items */
.portal-2025 .report-section {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 24px;
    overflow: hidden;
}

.portal-2025 .report-section-header {
    padding: 16px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 24px;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid transparent;
}

.portal-2025 .report-section-header:hover {
    background-color: #f9fafb;
}

.portal-2025 .report-section-header i {
    font-size: 20px;
    color: #333333;
    transition: transform 0.2s ease;
}

.portal-2025 .report-section-header span {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    flex: 1;
}

.portal-2025 .report-section-content {
    background-color: transparent;
}

.portal-2025 .report-item {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s ease;
    border-top: 1px solid #e0e0e0;
}

.portal-2025 .report-item:first-child {
    border-top: 1px solid #e0e0e0;
}

.portal-2025 .report-item:hover {
    background-color: #f9fafb;
}

.portal-2025 .report-item>span {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    flex: 1;
}

.portal-2025 .report-item>div {
    display: flex;
    gap: 8px;
}

.portal-2025 .report-view-btn,
.portal-2025 .report-pdf-btn {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 16px;
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #333333;
    cursor: pointer;
    transition: all 0.2s ease;
}

.portal-2025 .report-view-btn:hover,
.portal-2025 .report-pdf-btn:hover {
    background-color: #f9fafb;
    border-color: #cccccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* To-Do List Grid (Board_v2/TodoList) - Modern Styling */
.portal-2025 #ActionItemCurGrid {
    border: none !important;
    border-radius: 0;
}

/* Remove scrollbar and make grid fill properly */
.portal-2025 #ActionItemCurGrid .k-grid-content {
    overflow-y: visible !important;
    overflow-x: visible !important;
    max-height: none !important;
    height: auto !important;
}

.portal-2025 #ActionItemCurGrid,
.portal-2025 #ActionItemCurGrid .k-grid-container {
    height: auto !important;
    max-height: none !important;
}

.portal-2025 #ActionItemCurGrid .k-grid-header {
    background-color: #fafafa !important;
    border-bottom: 1px solid #e9ecef !important;
}

.portal-2025 #ActionItemCurGrid .k-grid-header .k-header {
    background-color: #fafafa !important;
    border: none !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #666666 !important;
    padding: 12px 16px !important;
}

.portal-2025 #ActionItemCurGrid tbody td {
    padding: 12px 16px !important;
    font-size: 14px !important;
    color: #212529 !important;
    border-bottom: 1px solid #e9ecef !important;
    vertical-align: middle !important;
}

.portal-2025 #ActionItemCurGrid tbody tr {
    background-color: #ffffff !important;
    transition: background-color 0.2s ease !important;
}

.portal-2025 #ActionItemCurGrid tbody tr:hover {
    background-color: #f9fafb !important;
}

.portal-2025 #ActionItemCurGrid tbody tr.k-alt {
    background-color: #ffffff !important;
}

/* Status dot images */
.portal-2025 #ActionItemCurGrid tbody td img[id="StatusImg"] {
    width: 16px;
    height: 16px;
    display: block;
}

/* Item details - slim and compact */
.portal-2025 #ActionItemCurGrid tbody td .noticedate {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #666666 !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: block;
    margin-bottom: 2px;
}

.portal-2025 #ActionItemCurGrid tbody td .note {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #666666 !important;
    line-height: 1.3;
}

/* Attachment icon */
.portal-2025 #ActionItemCurGrid tbody td a[href*="showAttach"] img {
    width: 18px !important;
    height: 20px !important;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.portal-2025 #ActionItemCurGrid tbody td a[href*="showAttach"]:hover img {
    opacity: 1;
}

/* View button - slim and compact */
.portal-2025 #ActionItemCurGrid .btn-view-action,
.portal-2025 #ActionItemCurGrid tbody td a.btn-view-action {
    background-color: #f8f8f8 !important;
    border: none !important;
    color: #495057 !important;
    border-radius: 4px !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

.portal-2025 #ActionItemCurGrid .btn-view-action:hover,
.portal-2025 #ActionItemCurGrid tbody td a.btn-view-action:hover {
    background-color: #eeeeee !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    text-decoration: none !important;
}

/* Options button - slim three dots menu */
.portal-2025 #ActionItemCurGrid tbody .k-grid-Options,
.portal-2025 #ActionItemCurGrid tbody .k-grid-Options.k-button,
.portal-2025 #ActionItemCurGrid tbody .k-grid-Options.k-button-icon,
.portal-2025 #ActionItemCurGrid tbody td .k-grid-Options {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    background-color: #f8f8f8 !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.2s ease !important;
    height: 28px !important;
    min-width: 28px !important;
    margin-left: 4px !important;
}

/* Hide ALL Options buttons in header - AGGRESSIVE */
.portal-2025 #ActionItemCurGrid .k-grid-header .k-grid-Options,
.portal-2025 #ActionItemCurGrid .k-grid-header .k-button.k-grid-Options,
.portal-2025 #ActionItemCurGrid .k-grid-header-wrap .k-grid-Options,
.portal-2025 #ActionItemCurGrid thead .k-grid-Options,
.portal-2025 #ActionItemCurGrid .k-header .k-grid-Options,
.portal-2025 #ActionItemCurGrid .k-grid-header .k-button,
.portal-2025 #ActionItemCurGrid .k-grid-header-wrap .k-button,
.portal-2025 #ActionItemCurGrid thead .k-button,
.portal-2025 #ActionItemCurGrid .k-header .k-button,
.portal-2025 #ActionItemCurGrid .k-grid-header a.k-button,
.portal-2025 #ActionItemCurGrid .k-grid-header .k-header-column-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

/* Override Kendo default bottom positioning for column menu buttons */
.portal-2025 .k-grid .k-grid-md .k-grid-header .k-grid-filter,
.portal-2025 .k-grid .k-grid-md .k-grid-header .k-header-column-menu,
.portal-2025 .k-grid .k-grid-md .k-grid-header .k-grid-header-menu,
.portal-2025 .k-grid-md .k-grid-header .k-grid-filter,
.portal-2025 .k-grid-md .k-grid-header .k-header-column-menu,
.portal-2025 .k-grid-md .k-grid-header .k-grid-header-menu {
    bottom: 8px !important;
}

/* Remove border around main content */
.portal-2025 .post {
    border: none !important;
}

/* Add spacing between toolbar and grid */
.portal-2025 #ActionItemCurGrid .k-grid-toolbar {
    margin-bottom: 16px !important;
}

.portal-2025 #ActionItemCurGrid {
    margin-top: 0 !important;
}

/* Filter tabs container */
.portal-2025 .col-xs-12.col-sm-12.col-md-12.col-lg-12:has(.todo-filter) {
    margin-top: 16px !important;
    margin-bottom: 24px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #e9ecef !important;
}

/* Filter tabs styling - text-based with blue underline when active */
.portal-2025 .todo-filter {
    display: inline-block !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 16px !important;
    margin-right: 8px !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #666666 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
    position: relative !important;
    box-shadow: none !important;
}

.portal-2025 .todo-filter:hover {
    color: #333333 !important;
    background: none !important;
    box-shadow: none !important;
}

.portal-2025 .todo-filter.active {
    color: #165dfb !important;
    font-weight: 600 !important;
    background: none !important;
}

.portal-2025 .todo-filter.active::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 8px !important;
    right: 8px !important;
    height: 3px !important;
    background-color: #165dfb !important;
    border-radius: 2px !important;
}

/* Hide child elements of options button */
.portal-2025 #ActionItemCurGrid tbody .k-grid-Options *,
.portal-2025 #ActionItemCurGrid tbody button.k-grid-Options *,
.portal-2025 #ActionItemCurGrid tbody a.k-grid-Options * {
    display: none !important;
}

/* Create horizontal three dots menu icon */
.portal-2025 #ActionItemCurGrid tbody .k-grid-Options::before,
.portal-2025 #ActionItemCurGrid tbody button.k-grid-Options::before,
.portal-2025 #ActionItemCurGrid tbody a.k-grid-Options::before {
    content: "⋯" !important;
    display: block !important;
    font-size: 18px !important;
    color: #495057 !important;
    line-height: 28px !important;
    font-weight: 600 !important;
    text-align: center !important;
}

/* Hover state */
.portal-2025 #ActionItemCurGrid tbody .k-grid-Options:hover,
.portal-2025 #ActionItemCurGrid tbody button.k-grid-Options:hover,
.portal-2025 #ActionItemCurGrid tbody a.k-grid-Options:hover {
    background-color: #eeeeee !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.portal-2025 #ActionItemCurGrid tbody .k-grid-Options:hover::before,
.portal-2025 #ActionItemCurGrid tbody button.k-grid-Options:hover::before,
.portal-2025 #ActionItemCurGrid tbody a.k-grid-Options:hover::before {
    color: #495057 !important;
}

/* Grid settings button (cog icon) - match invoices page */
.portal-2025 .btn-grid-settings,
.portal-2025 #ActionItemCurGrid .k-grid-toolbar .btn-grid-settings,
.portal-2025 #ActionItemCurGrid .k-grid-toolbar .k-button {
    background-color: #f8f8f8 !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px !important;
    color: #495057 !important;
    min-height: 40px !important;
    min-width: 40px !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.portal-2025 .btn-grid-settings:hover,
.portal-2025 #ActionItemCurGrid .k-grid-toolbar .btn-grid-settings:hover,
.portal-2025 #ActionItemCurGrid .k-grid-toolbar .k-button:hover {
    background-color: #eeeeee !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Style the cog icon itself */
.portal-2025 #ActionItemCurGrid .k-grid-toolbar .k-button .k-icon,
.portal-2025 #ActionItemCurGrid .k-grid-toolbar .btn-grid-settings .k-icon {
    color: #495057 !important;
    font-size: 16px !important;
}

/* Reports Grid Styling */
.portal-2025 #ReportListGrid {
    border: none !important;
    border-radius: 0;
    overflow: visible !important;
    background-color: transparent !important;
}

.portal-2025 #ReportListGrid table,
.portal-2025 #ReportListGrid .k-grid-content table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.portal-2025 #ReportListGrid .k-grid-content {
    overflow: visible !important;
    background-color: transparent !important;
}

/* Remove default Kendo borders */
.portal-2025 #ReportListGrid .k-grid-content,
.portal-2025 #ReportListGrid .k-grid-content-locked {
    border-width: 0 !important;
}

/* Grid header - Hidden since we're using group headers */
.portal-2025 #ReportListGrid .k-grid-header {
    display: none !important;
}

/* Group headers - Section containers with full individual borders */
.portal-2025 #ReportListGrid tbody .k-grouping-row,
.portal-2025 #ReportListGrid .k-grouping-row,
.portal-2025 #ReportListGrid .k-grouping-row[role="row"] {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
}

.portal-2025 #ReportListGrid tbody .k-grouping-row:first-of-type,
.portal-2025 #ReportListGrid .k-grouping-row:first-of-type,
.portal-2025 #ReportListGrid .k-grouping-row[role="row"]:first-of-type {
    margin-top: 0 !important;
}

.portal-2025 #ReportListGrid tbody .k-grouping-row td,
.portal-2025 #ReportListGrid .k-grouping-row td,
.portal-2025 #ReportListGrid .k-grouping-row td[role="gridcell"] {
    font-family: "Open Sans", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    padding: 16px 24px !important;
    border: none !important;
    background-color: #ffffff !important;
}

/* Grid rows - Report items with individual borders */
.portal-2025 #ReportListGrid tbody tr:not(.k-grouping-row),
.portal-2025 #ReportListGrid tbody tr[role="row"]:not(.k-grouping-row) {
    transition: background-color 0.2s ease !important;
    background-color: #ffffff !important;
}

.portal-2025 #ReportListGrid tbody tr:not(.k-grouping-row):hover,
.portal-2025 #ReportListGrid tbody tr[role="row"]:not(.k-grouping-row):hover {
    background-color: #f9fafb !important;
}

/* All table cells for report rows - create individual bordered cards */
.portal-2025 #ReportListGrid tbody tr:not(.k-grouping-row) td,
.portal-2025 #ReportListGrid tbody tr[role="row"]:not(.k-grouping-row) td {
    font-family: "Open Sans", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    padding: 16px 20px !important;
    border-top: 1px solid #e0e0e0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    border-left: 1px solid #e0e0e0 !important;
    border-right: 1px solid #e0e0e0 !important;
    vertical-align: middle !important;
    background-color: #ffffff !important;
}

/* First cell - left rounded corners */
.portal-2025 #ReportListGrid tbody tr:not(.k-grouping-row) td:first-child {
    border-radius: 6px 0 0 6px !important;
    border-right: none !important;
}

/* Last cell - right rounded corners */
.portal-2025 #ReportListGrid tbody tr:not(.k-grouping-row) td:last-child {
    border-radius: 0 6px 6px 0 !important;
    border-left: none !important;
}

/* Middle cells - no left/right borders to avoid double borders */
.portal-2025 #ReportListGrid tbody tr:not(.k-grouping-row) td:not(:first-child):not(:last-child) {
    border-left: none !important;
    border-right: none !important;
}

/* Add spacing between report rows */
.portal-2025 #ReportListGrid tbody tr:not(.k-grouping-row) {
    margin-bottom: 8px !important;
}

/* Align report name to the left - only for non-grouping rows */
.portal-2025 #ReportListGrid tbody tr:not(.k-grouping-row) td:first-child {
    text-align: left !important;
}

/* Align buttons to the right - only for non-grouping rows */
.portal-2025 #ReportListGrid tbody tr:not(.k-grouping-row) td:last-child {
    text-align: right !important;
}

/* Grid action buttons (View, Download PDF) - More padding, no underline */
.portal-2025 #ReportListGrid .k-button {
    font-family: "Open Sans", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    margin-right: 8px !important;
    border: 1px solid #e0e0e0 !important;
    text-decoration: none !important;
}

/* View button - White with border */
.portal-2025 #ReportListGrid .k-grid-RunReport {
    background-color: #ffffff !important;
    border-color: #e0e0e0 !important;
    color: #333333 !important;
}

.portal-2025 #ReportListGrid .k-grid-RunReport:hover {
    background-color: #f9fafb !important;
    border-color: #cccccc !important;
}

/* Download PDF button - White with border */
.portal-2025 #ReportListGrid .k-grid-pdfReport {
    background-color: #ffffff !important;
    border-color: #e0e0e0 !important;
    color: #333333 !important;
}

.portal-2025 #ReportListGrid .k-grid-pdfReport:hover {
    background-color: #f9fafb !important;
    border-color: #cccccc !important;
}

/* ============================================
   KENDO SCHEDULER HEADER STYLING (Day Names)
   ============================================ */
/* Month view header - the day name row */
.portal-2025 .k-scheduler .k-scheduler-header,
.portal-2025 .k-scheduler .k-scheduler-header-wrap {
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid #e0e0e0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Individual day header cells - no internal borders, just spacing */
.portal-2025 .k-scheduler .k-scheduler-header th,
.portal-2025 .k-scheduler .k-scheduler-header .k-header {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    text-align: center !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #212529 !important;
}

/* Abbreviated day names - hide full text and show abbreviated */
.portal-2025 .k-scheduler-monthview .k-scheduler-header th a,
.portal-2025 .k-scheduler-monthview .k-scheduler-header .k-link {
    visibility: hidden !important;
    position: relative !important;
    display: block !important;
}

.portal-2025 .k-scheduler-monthview .k-scheduler-header th a::after,
.portal-2025 .k-scheduler-monthview .k-scheduler-header .k-link::after {
    visibility: visible !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #212529 !important;
}

/* ============================================
   KENDO SCHEDULER CONTENT AREA (Calendar Grid Cells)
   ============================================ */
/* Calendar content wrapper - no extra borders, rely on container */
.portal-2025 .k-scheduler .k-scheduler-content,
.portal-2025 .k-scheduler-monthview .k-scheduler-content {
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Calendar table - ensure it fills the full width */
.portal-2025 .k-scheduler-monthview .k-scheduler-table,
.portal-2025 .k-scheduler .k-scheduler-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

/* Calendar table cells - add borders between cells */
.portal-2025 .k-scheduler-monthview .k-scheduler-table td,
.portal-2025 .k-scheduler-monthview .k-scheduler-content td {
    border-top: 1px solid #e0e0e0 !important;
    border-left: 1px solid #e0e0e0 !important;
    border-right: none !important;
    border-bottom: none !important;
}

/* First cell in each row - no left border (container provides it) */
.portal-2025 .k-scheduler-monthview .k-scheduler-table td:first-child,
.portal-2025 .k-scheduler-monthview .k-scheduler-content td:first-child {
    border-left: none !important;
}

/* First row cells - no top border (header border provides it) */
.portal-2025 .k-scheduler-monthview .k-scheduler-table tr:first-child td,
.portal-2025 .k-scheduler-monthview .k-scheduler-content tr:first-child td {
    border-top: none !important;
}

/* Week view, day view, agenda view content areas */
.portal-2025 .k-scheduler-weekview .k-scheduler-content,
.portal-2025 .k-scheduler-dayview .k-scheduler-content,
.portal-2025 .k-scheduler-agendaview .k-scheduler-content {
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

/* Set abbreviated day names */
.portal-2025 .k-scheduler-monthview .k-scheduler-header th:nth-child(1) a::after,
.portal-2025 .k-scheduler-monthview .k-scheduler-header th:nth-child(1) .k-link::after {
    content: "Sun" !important;
}

.portal-2025 .k-scheduler-monthview .k-scheduler-header th:nth-child(2) a::after,
.portal-2025 .k-scheduler-monthview .k-scheduler-header th:nth-child(2) .k-link::after {
    content: "Mon" !important;
}

.portal-2025 .k-scheduler-monthview .k-scheduler-header th:nth-child(3) a::after,
.portal-2025 .k-scheduler-monthview .k-scheduler-header th:nth-child(3) .k-link::after {
    content: "Tues" !important;
}

.portal-2025 .k-scheduler-monthview .k-scheduler-header th:nth-child(4) a::after,
.portal-2025 .k-scheduler-monthview .k-scheduler-header th:nth-child(4) .k-link::after {
    content: "Wed" !important;
}

.portal-2025 .k-scheduler-monthview .k-scheduler-header th:nth-child(5) a::after,
.portal-2025 .k-scheduler-monthview .k-scheduler-header th:nth-child(5) .k-link::after {
    content: "Thurs" !important;
}

.portal-2025 .k-scheduler-monthview .k-scheduler-header th:nth-child(6) a::after,
.portal-2025 .k-scheduler-monthview .k-scheduler-header th:nth-child(6) .k-link::after {
    content: "Fri" !important;
}

.portal-2025 .k-scheduler-monthview .k-scheduler-header th:nth-child(7) a::after,
.portal-2025 .k-scheduler-monthview .k-scheduler-header th:nth-child(7) .k-link::after {
    content: "Sat" !important;
}

/* ============================================
   CONTENT AREA (Full Width)
   ============================================ */
.portal-2025 .content-area {
    width: 100%;
}

.portal-2025 .grid-container {
    margin-top: 0;
}

/* ============================================
   GRID ACTIONS TOOLBAR (Between tabs and grid)
   ============================================ */
.portal-2025 .grid-actions-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    margin-bottom: 0;
}

.portal-2025 .grid-actions-toolbar .left-actions {
    display: flex;
    gap: 12px;
}

.portal-2025 .grid-actions-toolbar .right-actions {
    display: flex;
    gap: 12px;
}

/* ============================================
   GRID ACTION BUTTONS (Edit, Update, Cancel)
   ============================================ */
/* Edit button in data rows */
.portal-2025 .k-grid .k-button.btn-edit,
.portal-2025 .k-grid .k-grid-edit,
.portal-2025 .k-grid .k-grid-Edit,
.portal-2025 .k-grid tbody .k-grid-edit,
.portal-2025 .k-grid button.btn-edit {
    background-color: #f8f8f8 !important;
    border: none !important;
    color: #495057 !important;
    border-radius: 4px !important;
    padding: 8px 18px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-height: 36px !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.4 !important;
}

.portal-2025 .k-grid .k-button.btn-edit:hover,
.portal-2025 .k-grid .k-grid-edit:hover,
.portal-2025 .k-grid .k-grid-Edit:hover,
.portal-2025 .k-grid tbody .k-grid-edit:hover {
    background-color: #eeeeee !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    text-decoration: none !important;
}

/* Hide Kendo grid toolbar only for invoice detail grids with custom button row */
.portal-2025 #InvoiceDetailListGrid .k-grid-toolbar,
.portal-2025 #InvoiceDetailListGrid_\\d+.k-grid-toolbar {
    display: none !important;
}

/* ============================================
   KENDO GRID TABLE STYLING
   ============================================ */

/* Grid container */
.portal-2025 .k-grid {
    border: none !important;
    border-bottom: 1px solid #e1e1e1 !important;
    border-radius: 0 !important;
    font-family: "IBM Plex Sans", "Noto Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Helvetica, Arial, sans-serif !important;
    background-color: #fafafa !important;
}

/* Grid header */
.portal-2025 .k-grid .k-grid-header {
    background-color: #fafafa !important;
    border-bottom: 1px solid #e9ecef !important;
    padding: 0 !important;
}

.portal-2025 .k-grid .k-grid-header .k-header {
    background-color: #fafafa !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    color: #212529 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    text-transform: none !important;
    vertical-align: middle !important;
}

/* Grid content area */
.portal-2025 .k-grid .k-grid-content {
    background-color: #fafafa !important;
}

/* Table cells - no borders between cells */
.portal-2025 .k-grid tbody td {
    padding: 12px 16px !important;
    font-size: 14px !important;
    color: #212529 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    vertical-align: middle !important;
    background-color: #ffffff !important;
}

/* Only bottom border between rows */
.portal-2025 .k-grid tbody tr {
    border-bottom: 1px solid #e9ecef !important;
}

.portal-2025 .k-grid tbody tr:last-child {
    border-bottom: 1px solid #e9ecef !important;
}

/* Row hover state - REMOVED per user request */

/* Row selection state */
.portal-2025 .k-grid tbody tr.k-state-selected,
.portal-2025 .k-grid tbody tr.k-selected {
    background-color: #ffffff !important;
    color: #212529 !important;
}

.portal-2025 .k-grid tbody tr.k-state-selected td,
.portal-2025 .k-grid tbody tr.k-selected td {
    background-color: transparent !important;
}

/* Command cell buttons */
.portal-2025 .k-grid tbody td.k-command-cell {
    text-align: center !important;
}

/* Attachment column styling */
.portal-2025 .k-grid tbody td a[href*="showAttach"] {
    color: #165dfb !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.portal-2025 .k-grid tbody td a[href*="showAttach"]:hover {
    text-decoration: underline !important;
}

.portal-2025 .k-grid tbody td a[href*="showAttach"] img {
    width: 16px !important;
    height: 16px !important;
    filter: brightness(0) saturate(100%) invert(32%) sepia(98%) saturate(2943%) hue-rotate(220deg) brightness(102%) contrast(98%) !important;
}

/* Grid pager */
.portal-2025 .k-grid .k-pager-wrap {
    background-color: #ffffff !important;
    border-top: 1px solid #e1e1e1 !important;
    padding: 12px 16px !important;
}

.portal-2025 .k-grid .k-pager-numbers .k-link,
.portal-2025 .k-grid .k-pager-nav {
    color: #165dfb !important;
    border: 1px solid #e1e1e1 !important;
    border-radius: 4px !important;
}

.portal-2025 .k-grid .k-pager-numbers .k-state-selected {
    background-color: #165dfb !important;
    color: #ffffff !important;
}

/* Remove grid alternating row colors */
.portal-2025 .k-grid tbody tr.k-alt {
    background-color: #ffffff !important;
}

/* Edit mode styling - keep white background consistent */
.portal-2025 .k-grid tbody tr.k-grid-edit-row {
    background-color: #ffffff !important;
}

/* Input fields in edit mode */
.portal-2025 .k-grid tbody tr.k-grid-edit-row input.k-textbox,
.portal-2025 .k-grid tbody tr.k-grid-edit-row input[type="text"],
.portal-2025 .k-grid tbody tr.k-grid-edit-row input[type="number"],
.portal-2025 .k-grid tbody tr.k-grid-edit-row .k-input,
.portal-2025 .k-grid tbody tr.k-grid-edit-row .k-numerictextbox,
.portal-2025 .k-grid tbody tr.k-grid-edit-row textarea {
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    color: #212529 !important;
    background-color: #ffffff !important;
    height: auto !important;
    line-height: 1.5 !important;
}

.portal-2025 .k-grid tbody tr.k-grid-edit-row input.k-textbox:focus,
.portal-2025 .k-grid tbody tr.k-grid-edit-row input[type="text"]:focus,
.portal-2025 .k-grid tbody tr.k-grid-edit-row input[type="number"]:focus,
.portal-2025 .k-grid tbody tr.k-grid-edit-row .k-input:focus,
.portal-2025 .k-grid tbody tr.k-grid-edit-row textarea:focus {
    border-color: #165dfb !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(22, 93, 251, 0.1) !important;
}

/* Dropdown/Select fields in edit mode */
.portal-2025 .k-grid tbody tr.k-grid-edit-row .k-dropdown,
.portal-2025 .k-grid tbody tr.k-grid-edit-row .k-dropdown-wrap,
.portal-2025 .k-grid tbody tr.k-grid-edit-row .k-picker,
.portal-2025 .k-grid tbody tr.k-grid-edit-row .k-widget.k-dropdown {
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    font-size: 14px !important;
    min-height: 34px !important;
}

.portal-2025 .k-grid tbody tr.k-grid-edit-row .k-dropdown:hover,
.portal-2025 .k-grid tbody tr.k-grid-edit-row .k-dropdown-wrap:hover {
    border-color: #adb5bd !important;
}

.portal-2025 .k-grid tbody tr.k-grid-edit-row .k-dropdown:focus,
.portal-2025 .k-grid tbody tr.k-grid-edit-row .k-dropdown-wrap:focus,
.portal-2025 .k-grid tbody tr.k-grid-edit-row .k-state-focused {
    border-color: #165dfb !important;
    box-shadow: 0 0 0 3px rgba(22, 93, 251, 0.1) !important;
}

/* Dropdown button/arrow */
.portal-2025 .k-grid tbody tr.k-grid-edit-row .k-select {
    border-radius: 0 4px 4px 0 !important;
    background-color: #f8f9fa !important;
    border-left: 1px solid #ced4da !important;
}

/* Edit mode action buttons (Update/Cancel) in command cell */
.portal-2025 .k-grid tbody tr.k-grid-edit-row .k-grid-update,
.portal-2025 .k-grid tbody tr.k-grid-edit-row .k-button.k-grid-update {
    background-color: #165dfb !important;
    border: 2px solid #165dfb !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    padding: 8px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-height: 36px !important;
    margin-right: 8px !important;
    line-height: 1.4 !important;
}

.portal-2025 .k-grid tbody tr.k-grid-edit-row .k-grid-update:hover,
.portal-2025 .k-grid tbody tr.k-grid-edit-row .k-button.k-grid-update:hover {
    background-color: #1047c4 !important;
    border-color: #1047c4 !important;
}

.portal-2025 .k-grid tbody tr.k-grid-edit-row .k-grid-cancel,
.portal-2025 .k-grid tbody tr.k-grid-edit-row .k-button.k-grid-cancel {
    background-color: transparent !important;
    border: none !important;
    color: #495057 !important;
    border-radius: 4px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-height: 36px !important;
    text-decoration: none !important;
}

.portal-2025 .k-grid tbody tr.k-grid-edit-row .k-grid-cancel:hover,
.portal-2025 .k-grid tbody tr.k-grid-edit-row .k-button.k-grid-cancel:hover {
    background-color: #f1f3f5 !important;
    color: #212529 !important;
    text-decoration: none !important;
}

/* ============================================
   MESSAGES SECTION
   ============================================ */
.portal-2025 .messages-section {
    margin-top: 24px;
}

.portal-2025 .action-buttons-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e1e1e1;
}

.portal-2025 .message-input-container {
    margin-bottom: 20px;
}

.portal-2025 .message-list {
    margin-top: 24px;
}

/* Message grid styling - hide grid chrome */
.portal-2025 .message-list #ActionMsgGrid_\\ .k-grid-header,
.portal-2025 .message-list .k-grid-header {
    display: none !important;
}

.portal-2025 .message-list .k-grid {
    border: none !important;
    background-color: transparent !important;
}

.portal-2025 .message-list .k-grid-content {
    overflow-y: visible !important;
}

/* Individual message row/card */
.portal-2025 .message-list .k-grid tbody tr {
    height: auto !important;
    display: block !important;
    margin-bottom: 16px !important;
    border: none !important;
    border-bottom: none !important;
}

.portal-2025 .message-list .k-grid tbody td {
    background-color: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid #e1e1e1 !important;
    border-radius: 0 !important;
    padding: 16px 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Selected/highlighted message */
.portal-2025 .message-list .k-grid tbody tr.k-state-selected td,
.portal-2025 .message-list .k-grid tbody tr.k-selected td {
    border-bottom: 2px solid #165dfb !important;
    background-color: #f8fbff !important;
}

/* Message grid header labels */
.portal-2025 .message-list .msg-grid-header {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

/* Message grid text content */
.portal-2025 .message-list .msg-grid-text {
    display: block;
    font-size: 14px;
    color: #212529;
    line-height: 1.5;
}

/* Sent To section styling */
.portal-2025 .message-list .sent-to {
    margin-top: 8px;
}

.portal-2025 .message-list .sent-to .msg-grid-header {
    display: block;
}

.portal-2025 .message-list .sent-to .msg-grid-text {
    display: block;
}

/* didatic class overrides */
.portal-2025 .message-list .didatic {
    margin-left: 0 !important;
}

/* Remove left margins from message content */
.portal-2025 .message-list .k-grid tbody td .row>div>div {
    margin-left: 0 !important;
}

/* Message spacing row */
.portal-2025 .message-list .k-grid tbody tr[height="10px"] {
    display: none !important;
}

/* Message action buttons container */
.portal-2025 .message-list .message-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* Message action button styling */
.portal-2025 .message-list .message-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background-color: #f8f9fa;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    color: #212529;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
    font-family: "Open Sans", sans-serif;
}

.portal-2025 .message-list .message-action-btn:hover {
    background-color: #e9ecef;
    border-color: #165dfb;
    color: #165dfb;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(22, 93, 251, 0.1);
}

.portal-2025 .message-list .message-action-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.portal-2025 .message-list .message-action-btn img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
    filter: brightness(0) saturate(100%) !important;
    opacity: 1 !important;
}

.portal-2025 .message-list .message-action-btn .fa-paperclip {
    color: #212529 !important;
}

.portal-2025 .message-list .message-action-btn i {
    font-size: 14px;
    flex-shrink: 0;
}

.portal-2025 .message-list .message-action-btn span,
.portal-2025 .message-list .message-action-btn * {
    color: #212529 !important;
}

.portal-2025 .message-list .message-action-btn:hover img {
    filter: brightness(0) saturate(100%) !important;
    opacity: 1 !important;
}

.portal-2025 .message-list .message-action-btn:hover .fa-paperclip {
    color: #165dfb !important;
}

/* Mobile responsiveness for message action buttons */
@media (max-width: 768px) {
    .portal-2025 .message-list .message-action-buttons {
        flex-direction: column;
        gap: 6px;
    }

    .portal-2025 .message-list .message-action-btn {
        width: 100%;
        justify-content: center;
        padding: 8px 12px;
    }
}

/* ============================================
   MODERN TAB NAVIGATION - FIGMA DESIGN
   ============================================ */
.portal-2025 .modern-tab-nav {
    margin-bottom: 24px;
}

.portal-2025 .tab-container {
    display: inline-flex;
    background-color: #ffffff;
    border: 1px solid #d7d5dd;
    border-radius: 8px;
    padding: 6px;
    gap: 6px;
}

.portal-2025 .tab-item {
    padding: 8px 24px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.portal-2025 .tab-item.active {
    box-shadow: inset 0 0 0 2px #165dfb;
}

.portal-2025 .tab-link {
    color: #666666;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    font-family: "Open Sans", sans-serif;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.portal-2025 .tab-item.active .tab-link {
    color: #165dfb;
}

.portal-2025 .tab-link:hover {
    color: #165dfb;
    text-decoration: none;
}

/* ============================================
   MAIN CONTENT LAYOUT
   ============================================ */
.portal-2025 .main-content-layout {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

/* ============================================
   REQUEST TYPE SELECTION CARDS
   ============================================ */
.portal-2025 .request-type-selection {
    flex-shrink: 0;
}

.portal-2025 .request-type-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 300px;
}

.portal-2025 .request-type-card {
    background-color: #f3faff;
    border: 1px solid #c8d1df;
    border-radius: 6px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.portal-2025 .request-type-card:hover {
    background-color: #e6f2ff;
    border-color: #a8c8f0;
}

.portal-2025 .request-type-card.active {
    background-color: #f3faff;
    border: 2px solid #165dfb;
    box-shadow: 0 2px 4px rgba(22, 93, 251, 0.1);
    padding: 11px 15px;
    /* Adjust for thicker border */
}

.portal-2025 .request-card-label {
    cursor: pointer;
    margin: 0;
    display: block;
    width: 100%;
}

.portal-2025 .request-card-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.portal-2025 .radio-button {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.portal-2025 .radio-button input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 1;
}

.portal-2025 .radio-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #898194;
    border-radius: 50%;
    background-color: #ffffff;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.portal-2025 .radio-button input[type="radio"]:checked+.radio-checkmark {
    border: 5px solid #165dfb;
    background-color: #ffffff;
}

.portal-2025 .request-card-text {
    flex: 1;
}

.portal-2025 .request-title {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    font-family: "Open Sans", sans-serif;
    line-height: 24px;
    margin: 0;
}

/* ============================================
   MODERN ARC REQUEST FORM
   Note: Main form styles are in submit-request-figma.css
   ============================================ */

.portal-2025 .field-input {
    position: relative;
}

/* Kendo TimePickers in Reservation Request form - match modern design */
.portal-2025 .field-input .k-timepicker,
.portal-2025 .field-input .k-widget.k-timepicker,
.portal-2025 .modern-form .field-input .k-timepicker,
.portal-2025 .modern-form .field-input .k-widget.k-timepicker {
    width: 100% !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 14px !important;
    height: 44px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

.portal-2025 .field-input .k-timepicker:hover,
.portal-2025 .field-input .k-widget.k-timepicker:hover {
    border-color: #165dfb !important;
}

.portal-2025 .field-input .k-timepicker:focus,
.portal-2025 .field-input .k-widget.k-timepicker:focus,
.portal-2025 .field-input .k-timepicker.k-state-focused,
.portal-2025 .field-input .k-widget.k-timepicker.k-state-focused {
    border-color: #165dfb !important;
    box-shadow: 0 0 0 3px rgba(22, 93, 251, 0.1) !important;
    outline: none !important;
}

.portal-2025 .field-input .k-timepicker .k-picker-wrap,
.portal-2025 .field-input .k-timepicker .k-picker-wrap {
    border: none !important;
    border-radius: 6px !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.portal-2025 .field-input .k-timepicker .k-input,
.portal-2025 .field-input .k-timepicker input.k-input {
    font-family: "Open Sans", sans-serif !important;
    font-size: 14px !important;
    line-height: 44px !important;
    color: #1a1a1a !important;
    padding: 0 12px !important;
    height: 100% !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border: none !important;
    background: transparent !important;
}

.portal-2025 .field-input .k-timepicker .k-select {
    border-radius: 0 6px 6px 0 !important;
    height: 100% !important;
    width: 28px !important;
    flex: 0 0 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-left: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-right: 8px !important;
}

.portal-2025 .field-input .k-timepicker .k-select .k-icon {
    margin: 0 !important;
    padding: 0 !important;
}

/* Kendo DatePickers in forms - match modern design */
.portal-2025 .field-input .k-datepicker,
.portal-2025 .field-input .k-widget.k-datepicker,
.portal-2025 .modern-form .field-input .k-datepicker,
.portal-2025 .modern-form .field-input .k-widget.k-datepicker {
    width: 100% !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 14px !important;
    height: 44px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

.portal-2025 .field-input .k-datepicker:hover,
.portal-2025 .field-input .k-widget.k-datepicker:hover {
    border-color: #165dfb !important;
}

.portal-2025 .field-input .k-datepicker:focus,
.portal-2025 .field-input .k-widget.k-datepicker:focus,
.portal-2025 .field-input .k-datepicker.k-state-focused,
.portal-2025 .field-input .k-widget.k-datepicker.k-state-focused {
    border-color: #165dfb !important;
    box-shadow: 0 0 0 3px rgba(22, 93, 251, 0.1) !important;
    outline: none !important;
}

.portal-2025 .field-input .k-datepicker .k-picker-wrap {
    border: none !important;
    border-radius: 6px !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.portal-2025 .field-input .k-datepicker .k-input,
.portal-2025 .field-input .k-datepicker input.k-input {
    font-family: "Open Sans", sans-serif !important;
    font-size: 14px !important;
    line-height: 44px !important;
    color: #1a1a1a !important;
    padding: 0 12px !important;
    height: 100% !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border: none !important;
    background: transparent !important;
}

.portal-2025 .field-input .k-datepicker .k-select {
    border-radius: 0 6px 6px 0 !important;
    height: 100% !important;
    width: 40px !important;
    flex: 0 0 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-left: none !important;
    background: transparent !important;
    border: none !important;
    padding-right: 4px !important;
}

.portal-2025 .modern-input,
.portal-2025 .modern-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 16px;
    font-family: "Open Sans", sans-serif;
    color: #1a1a1a;
    background-color: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.portal-2025 .modern-textarea {
    min-height: 120px;
    resize: vertical;
}

.portal-2025 .modern-input:focus,
.portal-2025 .modern-textarea:focus {
    outline: none;
    border-color: #165dfb;
    box-shadow: 0 0 0 3px rgba(22, 93, 251, 0.1);
}

.portal-2025 .modern-input::placeholder,
.portal-2025 .modern-textarea::placeholder {
    color: #9ca3af;
}

.portal-2025 .upload-area {
    padding: 32px;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    text-align: center;
    min-height: 100px;
}

.portal-2025 .form-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-start;
}

.portal-2025 .btn-primary-action {
    background-color: #165dfb;
    border: none;
    color: #ffffff;
    border-radius: 6px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    font-family: "Open Sans", sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0px 2px 4px rgba(15, 15, 35, 0.16);
}

.portal-2025 .btn-primary-action:hover {
    background-color: #1047c4;
    transform: translateY(-1px);
    box-shadow: 0px 4px 8px rgba(15, 15, 35, 0.24);
}

.portal-2025 .btn-primary-action:active {
    transform: translateY(0);
    box-shadow: 0px 2px 4px rgba(15, 15, 35, 0.16);
}

/* ============================================
   INVOICE LIST TABS (My Items, Open, Closed)
   ============================================ */
.portal-2025 .invoice-list-tabs {
    display: flex !important;
    gap: 24px !important;
    margin-bottom: 24px !important;
    border-bottom: 1px solid #dee2e6 !important;
    padding: 0 !important;
}

.portal-2025 .invoice-list-tabs .tab-pill,
.portal-2025 .invoice-list-tabs a {
    padding: 12px 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #6c757d !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 2px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    position: relative !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.portal-2025 .invoice-list-tabs .tab-pill:hover,
.portal-2025 .invoice-list-tabs a:hover {
    color: #495057 !important;
    text-decoration: none !important;
    background-color: transparent !important;
    border-color: transparent !important;
    border-bottom-color: transparent !important;
}

.portal-2025 .invoice-list-tabs .tab-pill.active,
.portal-2025 .invoice-list-tabs a.active {
    color: #165dfb !important;
    background-color: transparent !important;
    border-bottom-color: #165dfb !important;
    font-weight: 500 !important;
}

/* ============================================
   BULK APPROVE BUTTON
   ============================================ */
.portal-2025 .k-grid-toolbar .btn-approve-bulk,
.portal-2025 .btn-approve-bulk {
    background-color: #ffffff !important;
    border: 2px solid #28a745 !important;
    color: #28a745 !important;
    border-radius: 4px !important;
    padding: 6px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 36px !important;
}

.portal-2025 .k-grid-toolbar .btn-approve-bulk:hover,
.portal-2025 .btn-approve-bulk:hover {
    background-color: #28a745 !important;
    color: #ffffff !important;
}

/* ============================================
   INVOICE LIST GRID SPECIFIC STYLING
   ============================================ */
/* Hide the Kendo grid toolbar completely for invoice list */
.portal-2025 #PortalBoardInvoicesGrid .k-grid-toolbar {
    display: none !important;
}

/* Grid settings button (cog icon) - styled like Export button */
.portal-2025 .btn-grid-settings {
    background-color: #f8f8f8 !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px !important;
    color: #495057 !important;
    min-height: 40px !important;
    min-width: 40px !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.portal-2025 .btn-grid-settings:hover {
    background-color: #eeeeee !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Remove borders from table header */
.portal-2025 #PortalBoardInvoicesGrid .k-grid-header,
.portal-2025 #PortalBoardInvoicesGrid .k-grid-header-wrap {
    border: none !important;
    border-bottom: 1px solid #e9ecef !important;
}

.portal-2025 #PortalBoardInvoicesGrid .k-grid-header .k-header {
    border: none !important;
}

/* Invoice list grid - let it wrap naturally like the original */
.portal-2025 #PortalBoardInvoicesGrid .k-grid tbody td {
    white-space: normal !important;
    word-wrap: break-word;
}

/* Action column buttons */
.portal-2025 #PortalBoardInvoicesGrid .btn-view-action {
    background-color: #f8f8f8 !important;
    border: none !important;
    color: #495057 !important;
    border-radius: 4px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

.portal-2025 #PortalBoardInvoicesGrid .btn-view-action:hover {
    background-color: #eeeeee !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    text-decoration: none !important;
}

/* Remove any icons from View button */
.portal-2025 #PortalBoardInvoicesGrid .btn-view-action i,
.portal-2025 #PortalBoardInvoicesGrid .btn-view-action .fa,
.portal-2025 #PortalBoardInvoicesGrid .btn-view-action .k-icon {
    display: none !important;
}

.portal-2025 #PortalBoardInvoicesGrid .btn-view-action::before,
.portal-2025 #PortalBoardInvoicesGrid .btn-view-action::after {
    display: none !important;
    content: none !important;
}

/* Three dots menu button - styled like View/Export/Settings buttons */
.portal-2025 #PortalBoardInvoicesGrid .k-grid-Options,
.portal-2025 #PortalBoardInvoicesGrid .k-grid-Options.k-button,
.portal-2025 #PortalBoardInvoicesGrid .k-grid-Options.k-button-icon,
.portal-2025 #PortalBoardInvoicesGrid td .k-grid-Options {
    /* Reset ALL styles */
    all: unset !important;
    /* Apply button styles matching View/Export/Settings */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 6px 10px !important;
    background-color: #f8f8f8 !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.2s ease !important;
    min-height: 32px !important;
    min-width: 32px !important;
    font-size: 0 !important;
}

/* Force hide ALL child elements (icons, spans, etc) */
.portal-2025 #PortalBoardInvoicesGrid .k-grid-Options *,
.portal-2025 #PortalBoardInvoicesGrid .k-grid-Options.k-button *,
.portal-2025 #PortalBoardInvoicesGrid .k-grid-Options.k-button-icon * {
    display: none !important;
    visibility: hidden !important;
}

/* Create the horizontal three dots with ::before */
.portal-2025 #PortalBoardInvoicesGrid .k-grid-Options::before,
.portal-2025 #PortalBoardInvoicesGrid .k-grid-Options.k-button::before,
.portal-2025 #PortalBoardInvoicesGrid .k-grid-Options.k-button-icon::before {
    content: "⋯" !important;
    display: inline-block !important;
    font-size: 20px !important;
    color: #495057 !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    visibility: visible !important;
}

/* Hover state - matches other secondary buttons */
.portal-2025 #PortalBoardInvoicesGrid .k-grid-Options:hover,
.portal-2025 #PortalBoardInvoicesGrid .k-grid-Options.k-button:hover,
.portal-2025 #PortalBoardInvoicesGrid .k-grid-Options.k-button-icon:hover {
    background-color: #eeeeee !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.portal-2025 #PortalBoardInvoicesGrid .k-grid-Options:hover::before,
.portal-2025 #PortalBoardInvoicesGrid .k-grid-Options.k-button:hover::before,
.portal-2025 #PortalBoardInvoicesGrid .k-grid-Options.k-button-icon:hover::before {
    color: #495057 !important;
}

/* ============================================
   ACTIONS DROPDOWN MENU (CONTEXT MENU)
   ============================================ */
/* Context menu container styling - menu appears outside portal-2025 scope */
#menuoptions.k-context-menu,
ul#menuoptions.k-context-menu {
    background-color: #ffffff !important;
    border: 1px solid #e1e1e1 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    padding: 4px 0 !important;
    min-width: 120px !important;
    width: 120px !important;
}

/* Menu items - slim with full width */
#menuoptions.k-context-menu .k-item,
ul#menuoptions.k-context-menu .k-item,
ul#menuoptions.k-context-menu li.k-item {
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: #212529 !important;
    transition: background-color 0.2s ease !important;
    display: block !important;
    border: none !important;
    background-color: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#menuoptions.k-context-menu .k-item:hover,
ul#menuoptions.k-context-menu .k-item:hover {
    background-color: #f8f9fa !important;
}

/* Kendo wraps items in .k-link - make full width and vertically centered */
#menuoptions.k-context-menu .k-item .k-link,
ul#menuoptions.k-context-menu .k-item .k-link,
ul#menuoptions.k-context-menu li.k-item .k-link {
    color: inherit !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide Kendo's default sprites/icons - very aggressive */
#menuoptions .k-sprite,
#menuoptions.k-context-menu .k-sprite,
#menuoptions .k-item .k-sprite,
#menuoptions .k-item .k-link .k-sprite {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    background-image: none !important;
    background: none !important;
}

/* Approve menu item - green checkmark */
#menuoptions.k-context-menu .menu-approve,
ul#menuoptions.k-context-menu .k-item.menu-approve,
ul#menuoptions.k-context-menu li.k-item.menu-approve,
#menuoptions.k-context-menu .k-item.menu-approve .k-link,
ul#menuoptions.k-context-menu li.k-item.menu-approve .k-link {
    color: #28a745 !important;
    font-weight: 500 !important;
}

#menuoptions.k-context-menu .menu-approve .k-link::before,
ul#menuoptions.k-context-menu .k-item.menu-approve .k-link::before,
ul#menuoptions.k-context-menu li.k-item.menu-approve .k-link::before {
    content: "✓" !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #28a745 !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

/* Decline menu item - red X */
#menuoptions.k-context-menu .menu-decline,
ul#menuoptions.k-context-menu .k-item.menu-decline,
ul#menuoptions.k-context-menu li.k-item.menu-decline,
#menuoptions.k-context-menu .k-item.menu-decline .k-link,
ul#menuoptions.k-context-menu li.k-item.menu-decline .k-link {
    color: #dc3545 !important;
    font-weight: 500 !important;
}

#menuoptions.k-context-menu .menu-decline .k-link::before,
ul#menuoptions.k-context-menu .k-item.menu-decline .k-link::before,
ul#menuoptions.k-context-menu li.k-item.menu-decline .k-link::before {
    content: "✕" !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #dc3545 !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

/* Send Message menu item - envelope icon */
#menuoptions .menu-msg,
#menuoptions.k-context-menu .menu-msg,
#menuoptions .k-item.menu-msg,
#menuoptions .k-item.menu-msg .k-link {
    color: #495057 !important;
    font-weight: 400 !important;
}

#menuoptions .menu-msg .k-link::before,
#menuoptions.k-context-menu .menu-msg .k-link::before,
#menuoptions .k-item.menu-msg .k-link::before {
    content: "✉" !important;
    font-size: 14px !important;
    color: #495057 !important;
    display: inline-block !important;
    width: 20px !important;
    margin-right: 8px !important;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet and below */
@media (max-width: 992px) {
    .portal-2025 .page-header-section {
        grid-template-columns: 1fr;
    }

    .portal-2025 .workflow-actions {
        justify-content: flex-start;
        margin-top: 12px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .portal-2025 .page-title {
        font-size: 20px;
    }

    .portal-2025 .invoice-tabs .nav {
        flex-direction: column;
        gap: 0;
    }

    .portal-2025 .invoice-tabs .nav a {
        padding: 12px 16px;
        border-bottom: 1px solid #dee2e6;
        border-left: 3px solid transparent;
    }

    .portal-2025 .invoice-tabs .nav a.active {
        border-bottom-color: #dee2e6;
        border-left-color: #165dfb;
    }

    .portal-2025 .workflow-actions {
        flex-direction: column;
        width: 100%;
    }

    .portal-2025 .workflow-actions button {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.portal-2025 .d-flex {
    display: flex;
}

.portal-2025 .flex-column {
    flex-direction: column;
}

.portal-2025 .align-items-center {
    align-items: center;
}

.portal-2025 .justify-content-between {
    justify-content: space-between;
}

.portal-2025 .gap-8 {
    gap: 8px;
}

.portal-2025 .gap-12 {
    gap: 12px;
}

.portal-2025 .gap-16 {
    gap: 16px;
}

.portal-2025 .mb-0 {
    margin-bottom: 0;
}

.portal-2025 .mb-12 {
    margin-bottom: 12px;
}

.portal-2025 .mb-16 {
    margin-bottom: 16px;
}

.portal-2025 .mb-24 {
    margin-bottom: 24px;
}

.portal-2025 .mt-12 {
    margin-top: 12px;
}

.portal-2025 .mt-16 {
    margin-top: 16px;
}

.portal-2025 .mt-24 {
    margin-top: 24px;
}

/* ============================================
   HOMEOWNER LIST PAGE - FILTER CONTROLS
   ============================================ */

/* Owner Tags MultiSelect - Clean Modern Style */
.portal-2025 #OtherTags {
    height: 40px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 14px !important;
}

.portal-2025 #OtherTags:hover {
    border-color: #165dfb !important;
}

.portal-2025 #OtherTags.k-state-focused {
    border-color: #165dfb !important;
    box-shadow: 0 0 0 3px rgba(22, 93, 251, 0.1) !important;
}

/* Previous Owners Only Checkbox */
.portal-2025 #HOListIncludePrevious {
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 4px !important;
    margin-right: 8px !important;
    cursor: pointer !important;
}

.portal-2025 #HOListIncludePrevious:hover {
    border-color: #165dfb !important;
}

.portal-2025 #HOListIncludePrevious:focus {
    border-color: #165dfb !important;
    box-shadow: 0 0 0 3px rgba(22, 93, 251, 0.1) !important;
    outline: none !important;
}

.portal-2025 #HOListIncludePrevious:checked {
    background-color: #165dfb !important;
    border-color: #165dfb !important;
}

.portal-2025 label[for="HOListIncludePrevious"] {
    font-family: "Open Sans", sans-serif !important;
    font-size: 14px !important;
    color: #495057 !important;
    cursor: pointer !important;
}