/** * DMS UI - Reusable Component Styles * Purple-Violet Gradient Theme * * Usage: * Include this file in your templates: * * * ===================================================================== * COMPONENT REFERENCE * ===================================================================== * * 1. PAGE HEADER (.page-header-card) * A purple gradient header with white title text. * Used at the top of pages to display the page title. * --------------------------------------------------------- *
*

Page Title

*
* Add New *
*
* * 2. SECTION CARD (.dms-card) * A standard card container with header, body, and optional footer. * Used to group related content into visual sections. * --------------------------------------------------------- *
*
*
*

Section Title

* Optional subtitle *
*
* *
*
* Cancel * *
*
* * Footer alignment variants: * - .dms-card-footer (right-aligned, default) * - .dms-card-footer.justify-start (left-aligned) * - .dms-card-footer.justify-between (space between items) * * 3. SECTION TITLE (.dms-section-title) * A sub-section divider used inside a card body. * Used to separate different sections within a single card. * --------------------------------------------------------- *
*
* Sender Information *
* * *
* Delivery Address *
* *
* * 4. FORM LAYOUT (.dms-form-row, .dms-form-group) * A standard form layout with labels and input fields. * Supports required field indicators and help text. * --------------------------------------------------------- *
*
* * * Helper text here *
*
* * *
*
* * Input with addon (e.g., units): *
* * kg *
* * 5. FILTER CARD (.filter-card) * An alias for .dms-card with filter-specific child classes. * Used for search and filter forms. * --------------------------------------------------------- *
*
*
*

Filters

*
*
*
* *
*
* * *
*
*
* * 6. WELCOME CARD (.dms-welcome-card) * A hero card for displaying a dashboard welcome message. * Features a purple gradient background with user information. * --------------------------------------------------------- *
*
*
*

Welcome User

*
* Customer ID: 12345 *
*
*
* * Edit Profile * *
*
*
* * 7. BUTTONS * Standard button styles for actions. * --------------------------------------------------------- * * * Add New (for page header) * * 8. DATA TABLE (.data-table-card) * A card wrapper for data tables with pagination. * --------------------------------------------------------- *
* ...
*
*
Showing 1-10 of 100
* *
*
* * 9. TABLE ACTION BUTTONS (.dms-table-actions, .dms-btn-action) * Icon-only buttons for table row actions (view, edit, delete, etc.) * --------------------------------------------------------- *
* * * * * * *
* * 10. PRINT/DOCUMENT BUTTONS (.dms-print-actions, .dms-btn-print) * Buttons with icons and text for document actions (print, download, etc.) * --------------------------------------------------------- *
* Print * Invoice * Download *
* * 11. INPUT VALIDATION (.dms-input-error, .dms-input-error-msg) * Validation error states for form inputs. * --------------------------------------------------------- *
* *
*
* * JavaScript usage: * // Show error - adds .dms-input-error to input, shows error message * showInputError('input-field', 'Error message'); * * // Clear error - removes .dms-input-error from input, hides error message * clearInputError('input-field'); * * 12. PHONE INPUT GROUP (.dms-phone-input-group) * Input with country code dropdown for phone numbers. * --------------------------------------------------------- *
* * *
* * 13. CAPACITY SELECTION CARDS (.dms-capacity-cards, .dms-capacity-card) * Radio cards for selecting options like truck size. * --------------------------------------------------------- *
* *
* * 14. SEARCH ADDRESS CONTAINER (.dms-search-address-container) * Highlighted container for address search input. * --------------------------------------------------------- *
* * *
* * 15. CUSTOM ALERT (.dms-alert-info) * Info box with purple gradient background. * --------------------------------------------------------- *
* Important information here *
* * 16. BUTTON FOOTER (.dms-buttons-footer) * Action buttons row at bottom of forms. * --------------------------------------------------------- *
* * *
* * 17. HERO SECTION (.dms-hero-section) * Full-width gradient hero with centered card. * Used for landing pages, search pages, tracking pages. * --------------------------------------------------------- *
*
*
*

Title

*

Subtitle text

* * *
*
*
* * 18. TIMELINE (.dms-timeline) * Vertical timeline for tracking history, order status, etc. * --------------------------------------------------------- *
*
*
*
*
* 2024-01-15 * Monday * 10:30 AM *
*
* Delivered *

Package received by recipient

*
*
*
*
*
*
...
*
*
* * States: .dms-timeline-item.current (green highlight for latest) * * 19. TRACKING CARD (.dms-tracking-card) * Card specifically for tracking results display. * --------------------------------------------------------- *
*
*

Parcel Tracking

*
*
*
...
*
*
* * 20. CONTACT CARD (.dms-contact-card) * Card for displaying contact/address information. * --------------------------------------------------------- *
*
*
*
*
* *

John Doe

*
*
*
*
*
* *

+60 12 345 6789

*
*
*
*
*
*
*
* *

123 Main Street, City, State 12345

*
*
*
*
* * 21. ENHANCED TABS (.dms-nav-tabs) * Styled navigation tabs with underline indicator. * --------------------------------------------------------- * *
*
Content 1
*
Content 2
*
* * 22. ALERT BOX (.dms-alert) * Reusable alert component with icon, title, message, and close button. * Variants: danger (red), success (green), warning (orange), info-box (blue) * --------------------------------------------------------- *
*
*
* Error Title *

Error message description here.

*
* *
* * Variants: * - .dms-alert-danger (red - errors) * - .dms-alert-success (green - success messages) * - .dms-alert-warning (orange - warnings) * - .dms-alert-info-box (blue - information) * * 23. ACCORDION (.dms-accordion-item) * Collapsible content panels for expandable sections. * --------------------------------------------------------- *
*
*
* * Section Title * *
*
*
* *
*
*
*
* * 24. CAPTCHA GROUP (.dms-captcha-group) * Captcha input with image and refresh button. * --------------------------------------------------------- *
* *
* Captcha * *
*
* * 25. LOCATION CARD (.dms-location-header, .dms-location-grid) * Company/store location display with logo, info, and contact grid. * --------------------------------------------------------- *
* *
*

Company Name

*

Address here

*
* View Map *
*
*
*
*
*
*
* *

+60 12 345 6789

*
*
*
* * Icon color variants: .dms-location-icon.gray, .green, .orange, .blue * * 26. WAREHOUSE ADDRESS CARD (.dms-warehouse-card) * Copyable address fields for warehouse information. * --------------------------------------------------------- *
*
*
*
*

Warehouse Name

* *
*
*
*
*
* *

Value

*
* *
*
*
...
*
*
*
*
* * Field variants: * - .dms-warehouse-field-highlight (purple background for important fields) * - .dms-warehouse-field-full (full width field) * - .dms-warehouse-field-icon.green (green icon) * * ===================================================================== */ /* ======================================== CSS VARIABLES ======================================== */ :root { /* Primary Colors */ --dms-primary: #667eea; --dms-primary-dark: #764ba2; --dms-primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --dms-primary-gradient-hover: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%); --dms-primary-light: rgba(102, 126, 234, 0.08); --dms-primary-light-gradient: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%); /* Neutral Colors */ --dms-text-primary: #333; --dms-text-secondary: #555; --dms-text-muted: #888; --dms-border: #e8e8e8; --dms-border-light: #f0f0f0; --dms-bg-light: #f8f9fa; --dms-bg-white: #fff; /* Status Colors */ --dms-success: #4caf50; --dms-success-light: rgba(76, 175, 80, 0.1); --dms-danger: #f44336; --dms-danger-light: rgba(244, 67, 54, 0.1); --dms-warning: #ffc107; --dms-info: #17a2b8; /* Spacing */ --dms-spacing-xs: 4px; --dms-spacing-sm: 8px; --dms-spacing-md: 16px; --dms-spacing-lg: 24px; --dms-spacing-xl: 32px; /* Border Radius */ --dms-radius-sm: 8px; --dms-radius-md: 10px; --dms-radius-lg: 12px; --dms-radius-xl: 16px; /* Shadows */ --dms-shadow-sm: 0 2px 12px rgba(0,0,0,0.06); --dms-shadow-md: 0 4px 16px rgba(0,0,0,0.1); --dms-shadow-focus: 0 0 0 4px rgba(102, 126, 234, 0.1); } /* ======================================== PAGE HEADER CARD ======================================== */ .page-header-card { background: var(--dms-primary-gradient); border-radius: var(--dms-radius-xl); padding: 24px 28px; color: #fff; margin-bottom: var(--dms-spacing-lg); position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--dms-spacing-md); } .page-header-card::before { content: ''; position: absolute; top: -50%; right: -15%; width: 40%; height: 140%; background: rgba(255,255,255,0.1); border-radius: 50%; } .page-header-card h1 { font-size: 24px; font-weight: 700; margin: 0; position: relative; display: flex; align-items: center; gap: 12px; text-shadow: 0 2px 4px rgba(0,0,0,0.2); letter-spacing: 0.3px; color: #fff; } .page-header-card h1 i { width: 44px; height: 44px; background: rgba(255,255,255,0.25); border-radius: var(--dms-radius-lg); display: flex; align-items: center; justify-content: center; font-size: 20px; text-shadow: none; } .page-header-card .header-actions { position: relative; z-index: 1; } .btn-add-new { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); color: #fff; padding: 12px 24px; border-radius: var(--dms-radius-md); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; transition: all 0.3s ease; text-decoration: none; } .btn-add-new:hover { background: rgba(255,255,255,0.3); color: #fff; text-decoration: none; transform: translateY(-2px); } .btn-back-icon { width: 40px; height: 40px; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); border-radius: var(--dms-radius-md); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; transition: all 0.3s ease; text-decoration: none; flex-shrink: 0; } .btn-back-icon:hover { background: rgba(255,255,255,0.3); color: #fff; text-decoration: none; transform: translateY(-2px); } /* ======================================== SECTION CARD (Reusable Card Component) ======================================== */ .dms-card, .filter-card { background: var(--dms-bg-white); border-radius: var(--dms-radius-xl); box-shadow: var(--dms-shadow-sm); border: 1px solid var(--dms-border); margin-bottom: var(--dms-spacing-lg); overflow: hidden; } /* Card Header */ .dms-card-header, .filter-card .filter-header { display: flex; align-items: center; gap: 12px; padding: 16px 24px; background: var(--dms-primary-light-gradient); border-bottom: 1px solid var(--dms-border); } .dms-card-header .header-icon, .filter-card .filter-header .header-icon { width: 36px; height: 36px; background: var(--dms-primary-gradient); border-radius: var(--dms-radius-md); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; flex-shrink: 0; } .dms-card-header h3, .filter-card .filter-header h3 { font-size: 16px; font-weight: 700; color: var(--dms-text-primary); margin: 0; flex: 1; } .dms-card-header .header-subtitle { font-size: 13px; font-weight: normal; color: var(--dms-text-muted); margin-left: auto; } /* Card Body */ .dms-card-body, .filter-card .filter-body { padding: var(--dms-spacing-lg); } /* Card Footer */ .dms-card-footer { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 16px 24px; background: var(--dms-bg-light); border-top: 1px solid var(--dms-border); } .dms-card-footer.justify-between { justify-content: space-between; } .dms-card-footer.justify-start { justify-content: flex-start; } /* ======================================== SECTION TITLE (Inside Card Body) ======================================== */ .dms-section-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--dms-primary); padding: 12px 16px; margin: 20px 0 16px 0; background: var(--dms-primary-light-gradient); border-left: 4px solid var(--dms-primary); border-radius: 0 var(--dms-radius-sm) var(--dms-radius-sm) 0; } .dms-section-title:first-child { margin-top: 0; } .dms-section-title i { font-size: 14px; color: var(--dms-primary); } /* ======================================== FORM LAYOUT ======================================== */ .dms-form-row { display: flex; flex-wrap: wrap; margin-left: -12px; margin-right: -12px; } .dms-form-row > [class*="col-"] { padding-left: 12px; padding-right: 12px; } .dms-label { font-size: 13px; font-weight: 600; color: var(--dms-text-secondary); margin-bottom: 8px; display: block; } .dms-label.required::after { content: ' *'; color: var(--dms-danger); } .dms-help-text { font-size: 12px; color: var(--dms-text-muted); margin-top: 6px; display: block; } .dms-input-group { display: flex; align-items: stretch; } .dms-input-group .dms-form-control { flex: 1; border-radius: var(--dms-radius-md) 0 0 var(--dms-radius-md); border-right: none; } .dms-input-group .dms-input-addon { display: flex; align-items: center; padding: 0 14px; background: var(--dms-bg-light); border: 2px solid var(--dms-border); border-left: none; border-radius: 0 var(--dms-radius-md) var(--dms-radius-md) 0; font-size: 14px; color: var(--dms-text-muted); } .filter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dms-spacing-md); } .filter-grid .form-group { margin-bottom: 0; } .filter-grid .select2-container { width: 100% !important; } .filter-grid .input-group { width: 100%; } .filter-grid .input-group .form-control { border-right: none; border-radius: var(--dms-radius-md) 0 0 var(--dms-radius-md); } .filter-grid .input-group .btn { border: 2px solid var(--dms-border); border-left: none; border-radius: 0 var(--dms-radius-md) var(--dms-radius-md) 0; background: var(--dms-bg-light); height: 44px; padding: 0 14px; } .filter-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--dms-border-light); } /* ======================================== FORM CONTROLS ======================================== */ .dms-form-group, .filter-grid .form-group { margin-bottom: var(--dms-spacing-md); } .dms-form-group label, .filter-card .form-group label, .filter-grid .form-group label { font-size: 13px; font-weight: 600; color: var(--dms-text-secondary); margin-bottom: 8px; display: block; } .dms-form-control, .filter-card .form-control, .filter-grid .form-control { height: 44px; border: 2px solid var(--dms-border); border-radius: var(--dms-radius-md); padding: 10px 14px; font-size: 14px; transition: all 0.3s ease; width: 100%; background-color: #fff; } .dms-form-control:focus, .filter-card .form-control:focus, .filter-grid .form-control:focus { border-color: var(--dms-primary); box-shadow: var(--dms-shadow-focus); outline: none; } select.dms-form-control, .filter-card select.form-control, .filter-grid select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23667eea' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; } select.dms-form-control:hover, .filter-card select.form-control:hover, .filter-grid select.form-control:hover { border-color: #d0d0d0; } /* Select2 Multi-select */ .select2-container--default .select2-selection--multiple { min-height: 44px; border: 2px solid var(--dms-border); border-radius: var(--dms-radius-md); padding: 4px 8px; } .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--dms-primary); box-shadow: var(--dms-shadow-focus); } /* ======================================== BUTTONS ======================================== */ .dms-btn-primary, .btn-primary { background: var(--dms-primary-gradient); border: none; padding: 12px 24px; border-radius: var(--dms-radius-md); font-weight: 600; font-size: 14px; color: #fff; transition: all 0.3s ease; } .dms-btn-primary:hover, .dms-btn-primary:focus, .btn-primary:hover, .btn-primary:focus { background: var(--dms-primary-gradient-hover); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); transform: translateY(-2px); color: #fff; } .dms-btn-default, .btn-default { background: #f5f7fa; border: 1px solid #e0e0e0; padding: 12px 24px; border-radius: var(--dms-radius-md); font-weight: 600; font-size: 14px; color: var(--dms-text-secondary); transition: all 0.3s ease; } .dms-btn-default:hover, .btn-default:hover { background: #eef0f3; border-color: #d0d0d0; } .btn-danger { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%); border: none; border-radius: var(--dms-radius-sm); color: #fff; } .btn-warning { background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%); border: none; border-radius: var(--dms-radius-sm); color: #333; } .btn-info { background: linear-gradient(135deg, #17a2b8 0%, #138496 100%); border: none; border-radius: var(--dms-radius-sm); color: #fff; } .btn-sm { padding: 8px 14px; font-size: 13px; } /* ======================================== DATA TABLE CARD ======================================== */ .data-table-card { background: var(--dms-bg-white); border-radius: var(--dms-radius-xl); box-shadow: var(--dms-shadow-sm); border: 1px solid var(--dms-border); overflow: hidden; margin-bottom: var(--dms-spacing-lg); } .data-table-card .table { margin-bottom: 0; } .data-table-card .table > thead > tr > td, .data-table-card .table > thead > tr > th { background: var(--dms-primary-light-gradient); border-color: var(--dms-border); font-size: 13px; font-weight: 600; color: var(--dms-text-secondary); padding: 14px 12px; white-space: nowrap; } .data-table-card .table > tbody > tr > td { border-color: var(--dms-border-light); padding: 14px 12px; vertical-align: middle; font-size: 13px; } .data-table-card .table > tbody > tr:hover { background: #f8f9ff; } .data-table-card .table > tbody > tr > td .btn { margin: 2px; } /* ======================================== TABLE ACTION BUTTONS ======================================== */ .dms-table-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; } .dms-btn-action { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--dms-radius-sm); border: none; font-size: 14px; cursor: pointer; transition: all 0.2s ease; text-decoration: none; } .dms-btn-action:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); text-decoration: none; } .dms-btn-action:active { transform: translateY(0); } /* View Button - Blue */ .dms-btn-action-view { background: linear-gradient(135deg, #4a90d9 0%, #357abd 100%); color: #fff; } .dms-btn-action-view:hover { background: linear-gradient(135deg, #3d7fc4 0%, #2d69a8 100%); color: #fff; } /* Edit Button - Purple/Primary */ .dms-btn-action-edit { background: var(--dms-primary-gradient); color: #fff; } .dms-btn-action-edit:hover { background: var(--dms-primary-gradient-hover); color: #fff; } /* Delete/Cancel Button - Red */ .dms-btn-action-delete { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: #fff; } .dms-btn-action-delete:hover { background: linear-gradient(135deg, #d44637 0%, #a93226 100%); color: #fff; } /* Warning Button - Orange/Yellow */ .dms-btn-action-warning { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); color: #fff; } .dms-btn-action-warning:hover { background: linear-gradient(135deg, #d4880f 0%, #c96c1d 100%); color: #fff; } /* Pay/Success Button - Green */ .dms-btn-action-success { background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%); color: #fff; } .dms-btn-action-success:hover { background: linear-gradient(135deg, #219a52 0%, #196f3d 100%); color: #fff; } /* Info Button - Teal */ .dms-btn-action-info { background: linear-gradient(135deg, #17a2b8 0%, #138496 100%); color: #fff; } .dms-btn-action-info:hover { background: linear-gradient(135deg, #148a9c 0%, #107180 100%); color: #fff; } /* Add Button - Primary/Blue */ .dms-btn-action-add { background: var(--dms-primary-gradient); color: #fff; } .dms-btn-action-add:hover { background: var(--dms-primary-gradient-hover); color: #fff; } /* ======================================== PRINT/DOCUMENT BUTTONS ======================================== */ .dms-print-actions { display: flex; flex-direction: column; gap: 6px; align-items: center; } .dms-btn-print { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--dms-radius-sm); border: none; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-decoration: none; white-space: nowrap; } .dms-btn-print:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); text-decoration: none; } /* Primary - Purple gradient */ .dms-btn-print-primary { background: var(--dms-primary-gradient); color: #fff; } .dms-btn-print-primary:hover { background: var(--dms-primary-gradient-hover); color: #fff; } /* Info - Teal */ .dms-btn-print-info { background: linear-gradient(135deg, #17a2b8 0%, #138496 100%); color: #fff; } .dms-btn-print-info:hover { background: linear-gradient(135deg, #148a9c 0%, #107180 100%); color: #fff; } /* Secondary - Gray */ .dms-btn-print-secondary { background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%); color: #fff; } .dms-btn-print-secondary:hover { background: linear-gradient(135deg, #5a6268 0%, #4e5459 100%); color: #fff; } /* ======================================== PAGINATION ======================================== */ .pagination-wrapper { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: var(--dms-bg-light); border-top: 1px solid var(--dms-border); flex-wrap: wrap; gap: 12px; } .results-info { font-size: 13px; color: var(--dms-text-muted); } .pagination { margin: 0; } .pagination > li > a, .pagination > li > span { border: none; background: var(--dms-bg-white); color: #666; padding: 8px 14px; margin: 0 3px; border-radius: var(--dms-radius-sm); font-weight: 500; transition: all 0.2s ease; } .pagination > li > a:hover { background: var(--dms-primary); color: #fff; } .pagination > .active > a, .pagination > .active > span { background: var(--dms-primary-gradient); color: #fff; } /* ======================================== ALERTS ======================================== */ .alert { border-radius: var(--dms-radius-lg); padding: 14px 18px; margin-bottom: var(--dms-spacing-md); border: none; display: flex; align-items: center; gap: 10px; } .alert-success { background: linear-gradient(135deg, var(--dms-success-light) 0%, rgba(67, 160, 71, 0.1) 100%); color: #2e7d32; border: 1px solid rgba(76, 175, 80, 0.2); } .alert-danger { background: linear-gradient(135deg, var(--dms-danger-light) 0%, rgba(229, 57, 53, 0.1) 100%); color: #c62828; border: 1px solid rgba(244, 67, 54, 0.2); } .alert .close { opacity: 0.6; margin-left: auto; } /* ======================================== EMPTY STATE ======================================== */ .empty-state { text-align: center; padding: 60px 20px; background: var(--dms-bg-white); border-radius: var(--dms-radius-xl); border: 2px dashed #e0e0e0; margin-bottom: var(--dms-spacing-lg); } .empty-state .empty-icon { width: 80px; height: 80px; background: var(--dms-primary-light-gradient); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--dms-primary); font-size: 32px; } .empty-state p { color: #666; font-size: 15px; margin: 0; } /* ======================================== MODALS ======================================== */ .modal-content { border-radius: var(--dms-radius-xl); border: none; overflow: hidden; } .modal-header { background: var(--dms-primary-gradient); color: #fff; border: none; padding: 18px 24px; } .modal-header .modal-title { font-weight: 600; color: #fff; } .modal-header .close { color: #fff; opacity: 0.8; } .modal-body { padding: var(--dms-spacing-lg); } .modal-footer { border-top: 1px solid var(--dms-border); padding: 16px 24px; } /* ======================================== BADGE ======================================== */ .badge { background: var(--dms-primary-gradient); padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; color: #fff; } /* ======================================== ACTION BUTTONS FOOTER ======================================== */ .action-buttons-footer { display: flex; justify-content: flex-end; padding: 16px 0; } /* ======================================== WELCOME CARD (Hero Card) ======================================== */ .dms-welcome-card { background: var(--dms-primary-gradient); border-radius: var(--dms-radius-lg); padding: 16px 20px; color: #fff; margin-bottom: var(--dms-spacing-md); position: relative; overflow: hidden; } .dms-welcome-card::before { content: ''; position: absolute; top: -60%; right: -15%; width: 40%; height: 140%; background: rgba(255,255,255,0.1); border-radius: 50%; } .dms-welcome-card .welcome-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; position: relative; z-index: 1; } .dms-welcome-card .welcome-info h2 { font-size: 18px; font-weight: 700; margin: 0 0 6px 0; text-shadow: 0 1px 3px rgba(0,0,0,0.3); letter-spacing: 0.3px; color: #fff; } .dms-welcome-card .customer-id, .dms-welcome-card .welcome-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.2); padding: 4px 10px; border-radius: 14px; font-size: 11px; font-weight: 500; } .dms-welcome-card .quick-actions { display: flex; gap: 8px; flex-wrap: wrap; } .dms-welcome-card .quick-action-btn { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.2); color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 500; text-decoration: none; transition: all 0.2s ease; border: 1px solid rgba(255,255,255,0.2); } .dms-welcome-card .quick-action-btn:hover { background: rgba(255,255,255,0.3); text-decoration: none; color: #fff; } .dms-welcome-card .quick-action-btn i { font-size: 10px; } /* ======================================== INFO CARD (Balance Card Style) ======================================== */ .dms-info-card { background: var(--dms-bg-white); border-radius: var(--dms-radius-lg); padding: 16px 20px; margin-bottom: var(--dms-spacing-md); box-shadow: var(--dms-shadow-sm); border: 1px solid var(--dms-border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .dms-info-card .info-content { display: flex; flex-direction: column; gap: 2px; } .dms-info-card .info-label { font-size: 12px; color: var(--dms-text-muted); font-weight: 500; display: flex; align-items: center; gap: 6px; } .dms-info-card .info-label i { color: var(--dms-primary); } .dms-info-card .info-value { font-size: 22px; font-weight: 700; color: var(--dms-text-primary); margin: 0; line-height: 1.2; } .dms-info-card .info-actions { display: flex; gap: 8px; } .dms-info-card .info-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; text-decoration: none; transition: all 0.2s ease; } .dms-info-card .info-btn.primary { background: var(--dms-primary-gradient); color: #fff; } .dms-info-card .info-btn.primary:hover { box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35); text-decoration: none; color: #fff; } .dms-info-card .info-btn.secondary { background: #f5f7fa; color: var(--dms-text-secondary); border: 1px solid #e0e0e0; } .dms-info-card .info-btn.secondary:hover { background: #eef0f3; text-decoration: none; } .dms-info-card .info-btn i { font-size: 11px; } /* ======================================== SECTION HEADER ======================================== */ .dms-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .dms-section-header .section-icon { width: 32px; height: 32px; background: var(--dms-primary-gradient); border-radius: var(--dms-radius-sm); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; } .dms-section-header h3 { font-size: 15px; font-weight: 600; color: var(--dms-text-primary); margin: 0; } /* ======================================== STAT CARDS GRID ======================================== */ .dms-group-parent { cursor: pointer; position: relative; user-select: none; } .dms-group-parent .group-chevron { position: absolute; bottom: 6px; right: 8px; font-size: 10px; opacity: 0.45; transition: transform 0.2s; } .dms-group-parent-expanded { box-shadow: var(--dms-shadow-md) !important; } .dms-order-group-children { display: none; background: #f8f9fa; border-radius: var(--dms-radius-md); padding: 10px 12px; margin-bottom: 8px; border: 1px solid #e9ecef; } .dms-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; } .dms-stat-card { background: var(--dms-bg-white); border-radius: var(--dms-radius-md); padding: 12px 8px; text-align: center; box-shadow: 0 1px 6px rgba(0,0,0,0.05); border: 1px solid var(--dms-border-light); transition: all 0.2s ease; text-decoration: none; display: block; } .dms-stat-card:hover { transform: translateY(-2px); box-shadow: var(--dms-shadow-md); text-decoration: none; } .dms-stat-card .stat-icon { width: 32px; height: 32px; border-radius: var(--dms-radius-sm); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; font-size: 14px; } .dms-stat-card .stat-number { font-size: 20px; font-weight: 700; margin-bottom: 2px; line-height: 1.2; } .dms-stat-card .stat-label { font-size: 10px; font-weight: 500; line-height: 1.3; } /* Stat Card Status Colors */ .dms-stat-card.status-pending .stat-icon { background: #fff3cd; color: #856404; } .dms-stat-card.status-pending .stat-number, .dms-stat-card.status-pending .stat-label { color: #856404; } .dms-stat-card.status-processing .stat-icon { background: #cce5ff; color: #004085; } .dms-stat-card.status-processing .stat-number, .dms-stat-card.status-processing .stat-label { color: #004085; } .dms-stat-card.status-shipped .stat-icon { background: #d4edda; color: #155724; } .dms-stat-card.status-shipped .stat-number, .dms-stat-card.status-shipped .stat-label { color: #155724; } .dms-stat-card.status-delivered .stat-icon { background: #d1ecf1; color: #0c5460; } .dms-stat-card.status-delivered .stat-number, .dms-stat-card.status-delivered .stat-label { color: #0c5460; } .dms-stat-card.status-cancelled .stat-icon { background: #f8d7da; color: #721c24; } .dms-stat-card.status-cancelled .stat-number, .dms-stat-card.status-cancelled .stat-label { color: #721c24; } .dms-stat-card.status-default .stat-icon { background: #e9ecef; color: #495057; } .dms-stat-card.status-default .stat-number, .dms-stat-card.status-default .stat-label { color: #495057; } /* ======================================== ACTION CARDS (Submit Order Style) ======================================== */ .dms-action-wrapper { background: linear-gradient(135deg, #eef2ff 0%, #f7f5ff 100%); border: 1px dashed #c7cdfa; border-radius: 14px; padding: 18px; position: relative; overflow: hidden; margin-bottom: var(--dms-spacing-md); } .dms-action-wrapper::before { content: ''; position: absolute; top: -30px; right: -30px; width: 120px; height: 120px; background: rgba(102, 126, 234, 0.15); border-radius: 50%; } .dms-action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; position: relative; z-index: 1; } .dms-action-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--dms-radius-lg); background: var(--dms-bg-white); border-left: 5px solid var(--dms-primary); box-shadow: 0 4px 14px rgba(0,0,0,0.08); text-decoration: none; transition: all 0.25s ease; } .dms-action-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); text-decoration: none; } .dms-action-card.variant-orange { border-left-color: #f59e0b; } .dms-action-card.variant-green { border-left-color: var(--dms-success); } .dms-action-card.variant-red { border-left-color: var(--dms-danger); } .dms-action-card .action-icon { width: 46px; height: 46px; border-radius: var(--dms-radius-lg); background: var(--dms-primary-gradient); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; flex-shrink: 0; } .dms-action-card.variant-orange .action-icon { background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); } .dms-action-card.variant-green .action-icon { background: linear-gradient(135deg, #4caf50 0%, #43a047 100%); } .dms-action-card.variant-red .action-icon { background: linear-gradient(135deg, #f44336 0%, #e53935 100%); } .dms-action-card .action-title { font-size: 14px; font-weight: 700; color: var(--dms-text-primary); } .dms-action-card .action-desc { font-size: 12px; color: var(--dms-text-muted); margin-top: 2px; } /* ======================================== FORM PANEL (Primary Panel) ======================================== */ .dms-form-panel { border: none; border-radius: var(--dms-radius-xl); box-shadow: var(--dms-shadow-sm); overflow: hidden; margin-bottom: var(--dms-spacing-lg); background: var(--dms-bg-white); } .dms-form-panel > .panel-heading, .dms-form-panel-header { background: var(--dms-primary-gradient); border: none; padding: 18px 24px; border-radius: 0; } .dms-form-panel > .panel-heading .panel-title, .dms-form-panel-header .panel-title { font-size: 18px; font-weight: 600; color: #fff; margin: 0; } .dms-form-panel > .panel-body, .dms-form-panel-body { padding: var(--dms-spacing-lg); background: var(--dms-bg-white); } /* ======================================== FORM SECTION HEADER (Well) ======================================== */ .dms-form-section { background: var(--dms-primary-light-gradient); border: 1px solid rgba(102, 126, 234, 0.2); border-radius: var(--dms-radius-lg); padding: 16px 20px; margin-bottom: 20px; } .dms-form-section h4 { color: var(--dms-primary); font-size: 15px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 10px; } .dms-form-section h4::before { content: ''; width: 4px; height: 20px; background: var(--dms-primary-gradient); border-radius: 2px; } /* ======================================== SELECTION BOX CARD ======================================== */ .dms-selection-box { height: auto; min-height: 160px; cursor: pointer; border: 2px solid var(--dms-border); border-radius: var(--dms-radius-lg); padding: 20px; transition: all 0.3s ease; background: var(--dms-bg-white); } .dms-selection-box:hover { border-color: var(--dms-primary); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15); } .dms-selection-box.active { border-color: var(--dms-primary); background: var(--dms-primary-light-gradient); box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2); } /* ======================================== ENHANCED RADIO BUTTONS ======================================== */ .dms-radio label { font-size: 14px; font-weight: 500; color: #444; padding-left: 28px; position: relative; cursor: pointer; } .dms-radio input[type="radio"] { position: absolute; opacity: 0; } .dms-radio label::before { content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border: 2px solid #ddd; border-radius: 50%; background: #fff; transition: all 0.2s ease; } .dms-radio input[type="radio"]:checked + label::before, .dms-radio label:has(input[type="radio"]:checked)::before { border-color: var(--dms-primary); } .dms-radio label::after { content: ''; position: absolute; left: 5px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--dms-primary-gradient); transform: scale(0); transition: all 0.2s ease; } .dms-radio input[type="radio"]:checked ~ label::after, .dms-radio label:has(input[type="radio"]:checked)::after { transform: scale(1); } /* ======================================== ENHANCED CHECKBOX ======================================== */ .dms-checkbox label { font-size: 14px; font-weight: 500; color: #444; padding-left: 28px; position: relative; cursor: pointer; } .dms-checkbox input[type="checkbox"] { position: absolute; opacity: 0; } .dms-checkbox label::before { content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border: 2px solid #ddd; border-radius: 4px; background: #fff; transition: all 0.2s ease; } .dms-checkbox input[type="checkbox"]:checked + label::before, .dms-checkbox label:has(input[type="checkbox"]:checked)::before { border-color: var(--dms-primary); background: var(--dms-primary-gradient); } .dms-checkbox label::after { content: '\f00c'; font-family: 'FontAwesome'; position: absolute; left: 4px; top: 2px; font-size: 12px; color: #fff; opacity: 0; transition: all 0.2s ease; } .dms-checkbox input[type="checkbox"]:checked ~ label::after, .dms-checkbox label:has(input[type="checkbox"]:checked)::after { opacity: 1; } /* ======================================== DEFAULT PANEL (Secondary) ======================================== */ .dms-panel-default { border: 1px solid var(--dms-border); border-radius: var(--dms-radius-lg); margin-bottom: var(--dms-spacing-md); overflow: hidden; background: var(--dms-bg-white); } .dms-panel-default > .panel-heading { background: var(--dms-bg-light); border-bottom: 1px solid var(--dms-border); padding: 14px 20px; font-weight: 600; } .dms-panel-default > .panel-body { padding: 20px; } /* ======================================== RESPONSIVE ======================================== */ @media (max-width: 992px) { .filter-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .page-header-card { padding: 20px; } .page-header-card h1 { font-size: 18px; } .filter-card .filter-body { padding: var(--dms-spacing-md); } .pagination-wrapper { flex-direction: column; text-align: center; } } @media (max-width: 576px) { .filter-grid { grid-template-columns: 1fr; } } /* Responsive: Welcome Card */ @media (max-width: 768px) { .dms-welcome-card { padding: 14px 16px; } .dms-welcome-card .welcome-info h2 { font-size: 16px; } .dms-info-card { flex-direction: column; align-items: flex-start; } .dms-info-card .info-actions { width: 100%; } .dms-info-card .info-btn { flex: 1; } .dms-action-grid { grid-template-columns: 1fr; } .dms-stats-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .dms-stats-grid { grid-template-columns: repeat(2, 1fr); } } /* ======================================== STEP WIZARD Multi-step form navigation ======================================== */ .dms-stepwizard { background: var(--dms-bg-white); padding: 30px 20px; position: relative; overflow: hidden; } .dms-stepwizard-row { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; position: relative; justify-items: center; } .dms-stepwizard-row::before { position: absolute; content: ""; top: 25px; height: 3px; background: #e0e0e0; z-index: 0; /* Start from center of first step (12.5%) to center of last step (87.5%) */ left: 12.5%; right: 12.5%; } .dms-stepwizard-step { display: table-cell; text-align: center; position: relative; padding: 0 5px; vertical-align: middle; } .dms-stepwizard-step::before { content: ""; position: absolute; top: 0; left: 50%; width: 54px; height: 54px; background: var(--dms-bg-white); border-radius: 50%; transform: translateX(-50%); z-index: 1; } /* Hide the ::after - we'll use a different approach */ .dms-stepwizard-step::after { display: none; } .dms-stepwizard-step p { margin-top: 15px; color: #666; font-size: 13px; font-weight: 500; white-space: nowrap; } .dms-stepwizard-step .btn-circle { width: 50px; height: 50px; text-align: center; padding: 0; font-size: 18px; line-height: 45px; border-radius: 50%; background: var(--dms-bg-white); border: 4px solid #e0e0e0; color: #888; font-weight: 600; position: relative; z-index: 2; transition: all 0.3s ease; display: inline-block; margin: 0 auto; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .dms-stepwizard-step .btn-circle.btn-default { background: var(--dms-bg-white); border: 4px solid #e0e0e0; color: #888; } .dms-stepwizard-step .btn-circle.btn-default:hover { background: #f8f8f8; border-color: #c0c0c0; transform: translateY(-2px); } .dms-stepwizard-step .btn-circle.btn-success { background: var(--dms-primary); border-color: var(--dms-primary); color: #fff; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); } .dms-stepwizard-step a { display: inline-block; position: relative; } /* Stepwizard Responsive */ @media (max-width: 768px) { .dms-stepwizard { padding: 20px 10px; } .dms-stepwizard-row::before { width: calc(100% - 50px); left: 30px; right: 30px; height: 2px; top: 20px; } .dms-stepwizard-step .btn-circle { width: 40px; height: 40px; line-height: 32px; font-size: 16px; border-width: 3px; } .dms-stepwizard-step p { font-size: 11px; margin-top: 12px; } } /* ======================================== WAREHOUSE SELECTION BOX Clickable selection cards ======================================== */ .dms-warehouse-box { border: 1px solid var(--dms-border); border-radius: var(--dms-radius-lg); margin: 20px 0; overflow: hidden; } .dms-warehouse-box > .panel-heading { background: var(--dms-primary-light-gradient); color: var(--dms-primary); font-weight: 600; border: none; padding: 16px 20px; } .dms-warehouse-box > .panel-body { padding: 20px; } .dms-clickable-box { height: 200px; cursor: pointer; border: 2px solid #dddddd; border-radius: var(--dms-radius-md); padding: 12px 40px 36px; transition: all 0.3s ease; background: var(--dms-bg-white); } .dms-clickable-box:hover { border-color: var(--dms-primary); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15); } .dms-clickable-box.active { border-color: var(--dms-primary) !important; background: var(--dms-primary-light-gradient); } /* ======================================== SECTION WELL (Form Section Divider) ======================================== */ .dms-section-well { background: var(--dms-primary-light-gradient); border: none; border-radius: var(--dms-radius-lg); padding: 16px 24px; border-left: 4px solid var(--dms-primary); margin-bottom: 20px; } .dms-section-well h4 { color: var(--dms-primary) !important; font-size: 16px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 10px; } .dms-section-well h4::before { content: "\f00c"; font-family: 'FontAwesome'; background: var(--dms-primary); color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; } /* ======================================== SELECT2 ENHANCED STYLING ======================================== */ .select2-container--default .select2-selection--single { height: 44px; border: 2px solid var(--dms-border); border-radius: var(--dms-radius-md); padding: 8px 12px; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 28px; font-size: 14px; color: var(--dms-text-secondary); } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; right: 10px; } .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--dms-primary); box-shadow: var(--dms-shadow-focus); } /* ======================================== ADDRESS CAPACITY RADIO GROUP ======================================== */ .dms-capacity-group { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 10px; } .dms-capacity-group > div { display: inline-flex; align-items: center; gap: 6px; margin-right: 30px; margin-bottom: 8px; vertical-align: middle; } .dms-capacity-group input[type="radio"] { margin-top: 10px; width: 18px; height: 18px; vertical-align: center; } .dms-capacity-group label { margin-top: 10px; font-weight: 500; color: var(--dms-text-secondary); cursor: pointer; vertical-align: middle; line-height: 1.5; } /* ======================================== CUSTOM CHECKBOX STYLING ======================================== */ .dms-custom-checkbox { appearance: none; -webkit-appearance: none; -moz-appearance: none; margin: 0; width: 18px; height: 18px; vertical-align: middle; border: 2px solid #e0e0e0; border-radius: 4px; background: #fff; cursor: pointer; position: relative; transition: all 0.2s ease; } .dms-custom-checkbox:checked { background: var(--dms-primary); border-color: var(--dms-primary); } .dms-custom-checkbox:checked::after { content: "\f00c"; font-family: 'FontAwesome'; color: #fff; font-size: 12px; font-weight: 700; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .dms-custom-checkbox:hover { border-color: var(--dms-primary); } .dms-custom-checkbox:focus { outline: none; box-shadow: var(--dms-shadow-focus); } /* ======================================== SHIPPING FEE / PRICE SECTION ======================================== */ .dms-price-section { background: var(--dms-primary-light-gradient); border-radius: var(--dms-radius-lg); padding: 20px; margin: 20px 0; border: 1px solid rgba(102, 126, 234, 0.1); } .dms-price-section .form-group { margin-bottom: 15px; } .dms-price-section .control-label { font-weight: 600; color: var(--dms-text-primary); } .dms-price-section .form-control[readonly] { background: var(--dms-bg-white); font-weight: 600; color: var(--dms-primary); text-align: right; } /* ======================================== AGREE CHECKBOX ROW ======================================== */ .dms-agree-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .dms-agree-row input[type="checkbox"] { width: 18px; height: 18px; } /* ======================================== NUMBER INPUT (Remove Spinners) ======================================== */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } /* ======================================== INPUT VALIDATION STATES ======================================== */ .dms-input-error-msg { display: none; margin-top: 5px; font-size: 12px; color: var(--dms-danger); } .form-control.dms-input-error { border-color: var(--dms-danger); } .form-control.dms-input-error:focus { border-color: var(--dms-danger); box-shadow: 0 0 0 4px rgba(244, 67, 54, 0.1); } /* Text danger - standardized error text color */ .text-danger { color: var(--dms-danger) !important; font-size: 12px; margin-top: 5px; } /* ======================================== PHONE INPUT GROUP Input with country code dropdown ======================================== */ .dms-phone-input-group { display: flex; gap: 5px; } .dms-phone-input-group .dms-phone-code { width: 110px; flex-shrink: 0; } .dms-phone-input-group .dms-phone-number { flex: 1; } /* ======================================== FORM HORIZONTAL LAYOUT Bootstrap-style horizontal form ======================================== */ .dms-form-horizontal .form-group { margin-bottom: 20px; } .dms-form-horizontal .control-label { text-align: right; padding-top: 12px; padding-right: 20px; font-size: 14px; font-weight: 600; color: var(--dms-text-secondary); } /* ======================================== CAPACITY SELECTION CARDS Radio cards for selecting truck size, etc. ======================================== */ .dms-capacity-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .dms-capacity-card { border: 2px solid var(--dms-border); border-radius: var(--dms-radius-md); padding: 12px 14px; cursor: pointer; transition: all 0.2s ease; background: var(--dms-bg-white); position: relative; min-height: 90px; display: flex; align-items: center; } .dms-capacity-card:hover { border-color: var(--dms-primary); background: rgba(102, 126, 234, 0.02); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .dms-capacity-card.selected { border-color: var(--dms-primary); background: var(--dms-primary-light-gradient); border-left-width: 3px; } .dms-capacity-card .hidden-radio { position: absolute; opacity: 0; width: 0; height: 0; } .dms-capacity-card .card-content { display: flex; align-items: flex-start; gap: 10px; width: 100%; } .dms-capacity-card .capacity-info { flex: 1; min-width: 0; } .dms-capacity-card .capacity-title { font-size: 13px; font-weight: 600; color: var(--dms-text-primary); margin: 0 0 4px 0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dms-capacity-card.selected .capacity-title { color: var(--dms-primary); } .dms-capacity-card .capacity-desc { font-size: 11px; color: var(--dms-text-muted); margin: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dms-capacity-card .checkmark { opacity: 0; color: var(--dms-primary); font-size: 14px; transition: opacity 0.2s ease; flex-shrink: 0; margin-top: 2px; } .dms-capacity-card.selected .checkmark { opacity: 1; } /* Responsive */ @media (max-width: 992px) { .dms-capacity-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .dms-capacity-cards { grid-template-columns: 1fr; } .dms-capacity-card { min-height: 80px; padding: 10px 12px; } .dms-capacity-card .capacity-title { font-size: 12px; } .dms-capacity-card .capacity-desc { font-size: 10px; } } /* ======================================== SEARCH ADDRESS CONTAINER Highlighted input for address search ======================================== */ .dms-search-address-container { background: var(--dms-primary-light-gradient); border: 2px solid rgba(102, 126, 234, 0.2); border-radius: var(--dms-radius-lg); padding: 16px; margin: 20px 0; } .dms-search-address-container .control-label { color: var(--dms-primary); font-weight: 600; } .dms-search-address-container .form-control { border-color: rgba(102, 126, 234, 0.3); background: rgba(255, 255, 255, 0.8); } /* ======================================== CUSTOM ALERT (Info Box) ======================================== */ .dms-alert-info { background: var(--dms-primary-light-gradient); border: 2px solid rgba(102, 126, 234, 0.3); border-radius: var(--dms-radius-lg); padding: 15px 20px; margin: 20px 0; color: var(--dms-primary); font-weight: 600; display: flex; align-items: center; gap: 10px; } /* ======================================== BUTTON FOOTER Action buttons row at bottom of form ======================================== */ .dms-buttons-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding: 16px 24px; background: var(--dms-bg-light); border-top: 1px solid var(--dms-border); } /* ======================================== HERO SECTION Full-width gradient hero with centered content ======================================== */ .dms-hero-section { background: var(--dms-primary-gradient); padding: 80px 0; color: #fff; position: relative; overflow: hidden; min-height: 350px; display: flex; align-items: center; } .dms-hero-section::before { content: ''; position: absolute; top: -50%; right: -20%; width: 80%; height: 150%; background: rgba(255, 255, 255, 0.05); border-radius: 50%; transform: rotate(-15deg); } .dms-hero-section::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 50%; height: 100%; background: rgba(255, 255, 255, 0.03); border-radius: 50%; } /* Hero Card - Centered white card inside hero */ .dms-hero-card { background: var(--dms-bg-white); border-radius: var(--dms-radius-xl); padding: 30px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); max-width: 500px; margin: 0 auto; position: relative; z-index: 1; } .dms-hero-card-title { color: var(--dms-text-primary); font-size: 20px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; } .dms-hero-card-title i { color: var(--dms-primary); font-size: 18px; } .dms-hero-card-subtitle { color: var(--dms-text-muted); margin-bottom: 20px; font-size: 14px; text-align: center; } /* Hero Textarea */ .dms-hero-textarea { width: 100%; border: 2px solid var(--dms-border); border-radius: var(--dms-radius-md); padding: 12px 16px; font-size: 14px; resize: none; transition: all 0.3s ease; margin-bottom: 20px; color: var(--dms-text-primary); background: var(--dms-bg-light); font-family: inherit; min-height: 120px; } .dms-hero-textarea::placeholder { color: #aaa; } .dms-hero-textarea:focus { border-color: var(--dms-primary); box-shadow: var(--dms-shadow-focus); outline: none; background: var(--dms-bg-white); } /* Hero Button - Full width primary button */ .dms-hero-btn { width: 100%; background: var(--dms-primary-gradient); border: none; border-radius: var(--dms-radius-md); padding: 12px 24px; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 8px; } .dms-hero-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3); } .dms-hero-btn:active { transform: translateY(0); } /* Hero Section Responsive */ @media (max-width: 768px) { .dms-hero-section { padding: 60px 0; min-height: 300px; } .dms-hero-card { padding: 25px 20px; margin: 0 15px; max-width: 90%; } .dms-hero-card-title { font-size: 18px; } .dms-hero-textarea { min-height: 100px; padding: 10px 14px; } } @media (max-width: 480px) { .dms-hero-section { padding: 40px 0; min-height: 280px; } .dms-hero-card { padding: 20px 15px; } .dms-hero-card-title { font-size: 16px; } .dms-hero-card-subtitle { font-size: 13px; } .dms-hero-btn { padding: 10px 20px; font-size: 14px; } } /* ======================================== TIMELINE Vertical timeline for tracking/history ======================================== */ .dms-timeline { position: relative; padding-left: 30px; } .dms-timeline::before { content: ''; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: var(--dms-border); } .dms-timeline-item { position: relative; padding-bottom: 25px; } .dms-timeline-item:last-child { padding-bottom: 0; } .dms-timeline-marker { position: absolute; left: -25px; top: 0; } .dms-timeline-marker i { color: var(--dms-text-muted); background: var(--dms-bg-white); font-size: 16px; } .dms-timeline-content { background: var(--dms-bg-white); border-radius: var(--dms-radius-sm); padding: 15px; box-shadow: var(--dms-shadow-sm); position: relative; margin-left: 10px; border: 1px solid var(--dms-border-light); } .dms-timeline-header { display: flex; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; } .dms-timeline-date { font-weight: bold; color: var(--dms-text-primary); } .dms-timeline-time, .dms-timeline-day { color: var(--dms-text-muted); font-size: 13px; } .dms-timeline-status { font-size: 15px; } .dms-timeline-status strong { color: var(--dms-text-primary); display: block; margin-bottom: 5px; } .dms-timeline-comment { margin: 8px 0 0; color: var(--dms-text-muted); font-size: 14px; line-height: 1.4; padding-left: 10px; border-left: 2px solid var(--dms-border-light); } /* Timeline Current/Active State */ .dms-timeline-item.current .dms-timeline-marker i { color: var(--dms-success); font-size: 20px; } .dms-timeline-item.current .dms-timeline-content { border-left: 3px solid var(--dms-success); background-color: rgba(76, 175, 80, 0.05); } .dms-timeline-item.current .dms-timeline-status strong { color: var(--dms-success); } /* ======================================== CONTACT CARD Card for displaying contact information ======================================== */ .dms-contact-card { background: var(--dms-bg-light); border-radius: var(--dms-radius-md); padding: 20px; margin-bottom: 20px; } .dms-contact-row { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 15px; } .dms-contact-row:last-child { margin-bottom: 0; } .dms-contact-item { display: flex; align-items: flex-start; gap: 15px; min-width: calc(50% - 20px); flex: 1 0 calc(50% - 20px); } .dms-contact-item.full-width { min-width: 100%; flex: 1 0 100%; } .dms-contact-icon { background: var(--dms-primary-gradient); color: #fff; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dms-contact-details { flex: 1; } .dms-contact-details label { display: block; font-size: 12px; color: var(--dms-text-muted); margin-bottom: 3px; } .dms-contact-details p { margin: 0; font-weight: 500; color: var(--dms-text-primary); word-break: break-word; } /* Contact Card Responsive */ @media (max-width: 768px) { .dms-contact-item { min-width: 100%; flex: 1 0 100%; } } /* ======================================== ENHANCED TABS (Nav Tabs) ======================================== */ .dms-nav-tabs { border-bottom: 2px solid var(--dms-border); margin-bottom: 0; } .dms-nav-tabs > li { margin-bottom: -2px; } .dms-nav-tabs > li > a { border: none; border-bottom: 2px solid transparent; border-radius: 0; color: var(--dms-text-muted); font-weight: 500; padding: 12px 20px; transition: all 0.2s ease; } .dms-nav-tabs > li > a:hover { background: transparent; border-color: transparent; border-bottom-color: var(--dms-primary); color: var(--dms-primary); } .dms-nav-tabs > li.active > a, .dms-nav-tabs > li.active > a:hover, .dms-nav-tabs > li.active > a:focus { background: transparent; border: none; border-bottom: 2px solid var(--dms-primary); color: var(--dms-primary); } .dms-tab-content { padding: 20px 0; } /* ======================================== TRACKING CARD Card specifically for tracking results ======================================== */ .dms-tracking-card { background: var(--dms-bg-white); border-radius: var(--dms-radius-xl); box-shadow: var(--dms-shadow-sm); border: 1px solid var(--dms-border); margin-bottom: var(--dms-spacing-lg); overflow: hidden; } .dms-tracking-card-header { padding: 16px 24px; border-bottom: 1px solid var(--dms-border); } .dms-tracking-card-header h3 { color: var(--dms-text-primary); font-size: 16px; font-weight: 600; margin: 0; padding-bottom: 10px; border-bottom: 2px solid var(--dms-border-light); } .dms-tracking-card-body { padding: var(--dms-spacing-lg); } /* ======================================== ACCORDION Collapsible content panels ======================================== */ .dms-accordion-item { border-bottom: 1px solid var(--dms-border); } .dms-accordion-item:last-child { border-bottom: none; } .dms-accordion-header { display: flex; align-items: center; gap: 12px; padding: 16px 24px; cursor: pointer; transition: all 0.2s ease; background: var(--dms-bg-white); } .dms-accordion-header:hover { background: var(--dms-bg-light); } .dms-accordion-header i:first-child { color: var(--dms-primary); font-size: 14px; } .dms-accordion-header span { flex: 1; font-weight: 600; color: var(--dms-text-primary); } .dms-accordion-icon { color: var(--dms-text-muted); transition: transform 0.3s ease; } .dms-accordion-header[aria-expanded="true"] .dms-accordion-icon, .dms-accordion-item .in + .dms-accordion-header .dms-accordion-icon, [aria-expanded="true"] .dms-accordion-icon { transform: rotate(180deg); } .dms-accordion-body { padding: 20px 24px; background: var(--dms-bg-light); border-top: 1px solid var(--dms-border-light); } /* ======================================== CAPTCHA GROUP Captcha input with image and refresh ======================================== */ .dms-captcha-group { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; } .dms-captcha-group .dms-form-control { flex: 1; min-width: 150px; max-width: 200px; } .dms-captcha-image { display: flex; align-items: center; gap: 8px; background: var(--dms-bg-light); padding: 4px; border-radius: var(--dms-radius-md); border: 1px solid var(--dms-border); } .dms-captcha-image img { height: 36px; border-radius: var(--dms-radius-sm); } .dms-captcha-refresh { width: 36px; height: 36px; border: none; background: var(--dms-primary-gradient); color: #fff; border-radius: var(--dms-radius-sm); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .dms-captcha-refresh:hover { transform: rotate(180deg); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); } /* Responsive Captcha */ @media (max-width: 576px) { .dms-captcha-group { flex-direction: column; } .dms-captcha-group .dms-form-control { max-width: 100%; } } /* ======================================== LOCATION CARD Company/store location display ======================================== */ .dms-location-header { display: flex; align-items: flex-start; gap: 24px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--dms-border-light); } .dms-location-logo { width: 80px; height: 80px; object-fit: contain; border-radius: var(--dms-radius-md); border: 1px solid var(--dms-border); padding: 8px; background: var(--dms-bg-white); flex-shrink: 0; } .dms-location-info { flex: 1; } .dms-location-info h4 { font-size: 18px; font-weight: 700; color: var(--dms-text-primary); margin: 0 0 8px 0; } .dms-location-info > p { color: var(--dms-text-secondary); font-size: 14px; line-height: 1.6; margin: 0 0 16px 0; } .dms-location-actions { display: flex; gap: 10px; flex-wrap: wrap; } .dms-location-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } .dms-location-item { display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: var(--dms-bg-light); border-radius: var(--dms-radius-md); transition: all 0.2s ease; } .dms-location-item:hover { background: var(--dms-primary-light-gradient); } .dms-location-icon { width: 40px; height: 40px; background: var(--dms-primary-gradient); border-radius: var(--dms-radius-sm); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; flex-shrink: 0; } .dms-location-icon.gray { background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%); } .dms-location-icon.green { background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%); } .dms-location-icon.orange { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); } .dms-location-icon.blue { background: linear-gradient(135deg, #3498db 0%, #2980b9 100%); } .dms-location-content { flex: 1; min-width: 0; } .dms-location-content label { display: block; font-size: 12px; color: var(--dms-text-muted); margin-bottom: 4px; font-weight: 500; } .dms-location-content p { margin: 0; font-size: 14px; font-weight: 600; color: var(--dms-text-primary); word-break: break-word; } /* Location Card Responsive */ @media (max-width: 768px) { .dms-location-header { flex-direction: column; align-items: center; text-align: center; } .dms-location-actions { justify-content: center; } .dms-location-grid { grid-template-columns: 1fr; } } /* ======================================== WAREHOUSE ADDRESS CARD Copyable address fields for warehouse ======================================== */ .dms-warehouse-list { display: flex; flex-direction: column; gap: var(--dms-spacing-lg); } .dms-warehouse-card { margin-bottom: 0; } .dms-warehouse-card .dms-card-header { position: relative; } .dms-btn-copy-all { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(102, 126, 234, 0.3); color: var(--dms-primary); padding: 6px 12px; border-radius: var(--dms-radius-sm); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 6px; } .dms-btn-copy-all:hover { background: var(--dms-primary); color: #fff; border-color: var(--dms-primary); } .dms-btn-copy-all.copied { background: var(--dms-success); color: #fff; border-color: var(--dms-success); } .dms-warehouse-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; } .dms-warehouse-field { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--dms-bg-light); border-radius: var(--dms-radius-sm); transition: all 0.2s ease; position: relative; } .dms-warehouse-field:hover { background: var(--dms-primary-light-gradient); } .dms-warehouse-field-highlight { background: var(--dms-primary-light-gradient); border: 1px solid rgba(102, 126, 234, 0.2); margin-bottom: 16px; } .dms-warehouse-field-highlight:hover { border-color: var(--dms-primary); } .dms-warehouse-field-full { margin-bottom: 12px; } .dms-warehouse-field-full:last-child { margin-bottom: 0; } .dms-warehouse-field-icon { width: 36px; height: 36px; background: var(--dms-primary-gradient); border-radius: var(--dms-radius-sm); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; flex-shrink: 0; } .dms-warehouse-field-icon.green { background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%); } .dms-warehouse-field-content { flex: 1; min-width: 0; } .dms-warehouse-field-content label { display: block; font-size: 11px; color: var(--dms-text-muted); margin-bottom: 2px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .dms-warehouse-field-content p { margin: 0; font-size: 14px; font-weight: 600; color: var(--dms-text-primary); word-break: break-word; line-height: 1.4; } .dms-btn-copy { width: 32px; height: 32px; background: var(--dms-bg-white); border: 1px solid var(--dms-border); border-radius: var(--dms-radius-sm); color: var(--dms-text-muted); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; flex-shrink: 0; align-self: center; } .dms-btn-copy:hover { background: var(--dms-primary); color: #fff; border-color: var(--dms-primary); } .dms-btn-copy.copied { background: var(--dms-success); color: #fff; border-color: var(--dms-success); } .dms-login-link { color: var(--dms-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .dms-login-link:hover { text-decoration: underline; } /* Warehouse Card Responsive */ @media (max-width: 992px) { .dms-warehouse-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .dms-warehouse-grid { grid-template-columns: 1fr; } .dms-btn-copy-all { position: static; transform: none; margin-left: auto; } .dms-warehouse-card .dms-card-header { flex-wrap: wrap; gap: 10px; } .dms-warehouse-card .dms-card-header h3 { flex: 1 0 100%; order: -1; } } /* ======================================== ALERT BOX (Generic) Reusable alert component with variants Usage: .dms-alert.dms-alert-danger, .dms-alert-success, etc. ======================================== */ .dms-alert { display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px; border-radius: var(--dms-radius-lg); margin: 24px 0; position: relative; } .dms-alert-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; flex-shrink: 0; } .dms-alert-content { flex: 1; } .dms-alert-content strong { display: block; font-size: 16px; margin-bottom: 4px; } .dms-alert-content p { margin: 0; font-size: 14px; line-height: 1.5; } .dms-alert-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border: none; border-radius: 50%; font-size: 18px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; line-height: 1; } /* Danger/Error Alert */ .dms-alert-danger { background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%); border: 1px solid #fc8181; box-shadow: 0 4px 12px rgba(245, 101, 101, 0.15); } .dms-alert-danger .dms-alert-icon { background: linear-gradient(135deg, #f56565 0%, #c53030 100%); } .dms-alert-danger .dms-alert-content strong { color: #c53030; } .dms-alert-danger .dms-alert-content p { color: #742a2a; } .dms-alert-danger .dms-alert-close { background: rgba(197, 48, 48, 0.1); color: #c53030; } .dms-alert-danger .dms-alert-close:hover { background: #c53030; color: #fff; } /* Success Alert */ .dms-alert-success { background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%); border: 1px solid #68d391; box-shadow: 0 4px 12px rgba(72, 187, 120, 0.15); } .dms-alert-success .dms-alert-icon { background: linear-gradient(135deg, #48bb78 0%, #276749 100%); } .dms-alert-success .dms-alert-content strong { color: #276749; } .dms-alert-success .dms-alert-content p { color: #22543d; } .dms-alert-success .dms-alert-close { background: rgba(39, 103, 73, 0.1); color: #276749; } .dms-alert-success .dms-alert-close:hover { background: #276749; color: #fff; } /* Warning Alert */ .dms-alert-warning { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border: 1px solid #f6ad55; box-shadow: 0 4px 12px rgba(237, 137, 54, 0.15); } .dms-alert-warning .dms-alert-icon { background: linear-gradient(135deg, #ed8936 0%, #c05621 100%); } .dms-alert-warning .dms-alert-content strong { color: #c05621; } .dms-alert-warning .dms-alert-content p { color: #744210; } .dms-alert-warning .dms-alert-close { background: rgba(192, 86, 33, 0.1); color: #c05621; } .dms-alert-warning .dms-alert-close:hover { background: #c05621; color: #fff; } /* Info Alert */ .dms-alert-info-box { background: linear-gradient(135deg, #ebf8ff 0%, #bee3f8 100%); border: 1px solid #63b3ed; box-shadow: 0 4px 12px rgba(66, 153, 225, 0.15); } .dms-alert-info-box .dms-alert-icon { background: linear-gradient(135deg, #4299e1 0%, #2b6cb0 100%); } .dms-alert-info-box .dms-alert-content strong { color: #2b6cb0; } .dms-alert-info-box .dms-alert-content p { color: #2c5282; } .dms-alert-info-box .dms-alert-close { background: rgba(43, 108, 176, 0.1); color: #2b6cb0; } .dms-alert-info-box .dms-alert-close:hover { background: #2b6cb0; color: #fff; } /* Responsive Alert */ @media (max-width: 576px) { .dms-alert { flex-direction: column; text-align: center; padding: 20px; } .dms-alert-icon { margin: 0 auto; } .dms-alert-close { top: 8px; right: 8px; } } /* ======================================== FAQ PAGE FAQ search, categories, and accordion ======================================== */ /* FAQ Search Box */ .dms-faq-search { display: flex; align-items: center; gap: 12px; background: var(--dms-bg-light); padding: 8px; border-radius: var(--dms-radius-lg); border: 2px solid var(--dms-border); transition: all 0.3s ease; } .dms-faq-search:focus-within { border-color: var(--dms-primary); box-shadow: var(--dms-shadow-focus); } .dms-faq-search-icon { width: 44px; height: 44px; background: var(--dms-primary-gradient); border-radius: var(--dms-radius-md); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; flex-shrink: 0; } .dms-faq-search-input { flex: 1; border: none; background: transparent; font-size: 15px; padding: 10px; color: var(--dms-text-primary); outline: none; } .dms-faq-search-input::placeholder { color: var(--dms-text-muted); } .dms-faq-search .dms-btn-primary { flex-shrink: 0; } /* FAQ Category Card */ .dms-faq-category { margin-bottom: var(--dms-spacing-lg); } /* FAQ List */ .dms-faq-list { margin-bottom: 0; } .dms-faq-item { border-bottom: 1px solid var(--dms-border-light); } .dms-faq-item:last-child { border-bottom: none; } /* FAQ Question (Accordion Header) */ .dms-faq-question { display: flex; align-items: center; gap: 14px; padding: 18px 24px; cursor: pointer; transition: all 0.2s ease; background: var(--dms-bg-white); } .dms-faq-question:hover { background: var(--dms-bg-light); } .dms-faq-question.active { background: var(--dms-primary-light-gradient); } .dms-faq-question-icon { width: 32px; height: 32px; background: var(--dms-primary-light-gradient); border: 1px solid rgba(102, 126, 234, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--dms-primary); font-size: 12px; flex-shrink: 0; transition: all 0.2s ease; } .dms-faq-question.active .dms-faq-question-icon { background: var(--dms-primary-gradient); color: #fff; border-color: transparent; } .dms-faq-question-text { flex: 1; font-weight: 600; color: var(--dms-text-primary); font-size: 15px; line-height: 1.4; } .dms-faq-toggle { color: var(--dms-text-muted); font-size: 12px; transition: transform 0.3s ease; } .dms-faq-toggle.rotated { transform: rotate(180deg); } /* FAQ Answer (Accordion Body) */ .dms-faq-answer { padding: 20px 24px 20px 70px; background: var(--dms-bg-light); border-top: 1px solid var(--dms-border-light); color: var(--dms-text-secondary); font-size: 14px; line-height: 1.7; } .dms-faq-answer p { margin-bottom: 12px; } .dms-faq-answer p:last-child { margin-bottom: 0; } .dms-faq-answer ul, .dms-faq-answer ol { padding-left: 20px; margin-bottom: 12px; } .dms-faq-answer li { margin-bottom: 6px; } /* FAQ Content (for view page) */ .dms-faq-content { font-size: 15px; line-height: 1.8; color: var(--dms-text-secondary); } .dms-faq-content h2, .dms-faq-content h3, .dms-faq-content h4 { color: var(--dms-text-primary); margin-top: 24px; margin-bottom: 12px; } .dms-faq-content h2:first-child, .dms-faq-content h3:first-child, .dms-faq-content h4:first-child { margin-top: 0; } .dms-faq-content p { margin-bottom: 16px; } .dms-faq-content ul, .dms-faq-content ol { padding-left: 24px; margin-bottom: 16px; } .dms-faq-content li { margin-bottom: 8px; } .dms-faq-content img { max-width: 100%; height: auto; border-radius: var(--dms-radius-md); margin: 16px 0; } /* FAQ Responsive */ @media (max-width: 768px) { .dms-faq-search { flex-wrap: wrap; } .dms-faq-search-input { flex: 1 0 100%; order: 1; } .dms-faq-search-icon { order: 0; } .dms-faq-search .dms-btn-primary { order: 2; flex: 1; } .dms-faq-question { padding: 14px 16px; } .dms-faq-answer { padding: 16px; } } @media (max-width: 576px) { .dms-faq-question-icon { display: none; } .dms-faq-answer { padding-left: 16px; } } /* ======================================== NEWS PAGE News listing and article view ======================================== */ /* News Grid (Listing Page) */ .dms-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; margin-bottom: var(--dms-spacing-lg); } /* News Card */ .dms-news-card { background: var(--dms-bg-white); border-radius: var(--dms-radius-lg); overflow: hidden; box-shadow: var(--dms-shadow-sm); border: 1px solid var(--dms-border); transition: all 0.3s ease; display: flex; flex-direction: column; } .dms-news-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(102, 126, 234, 0.15); border-color: var(--dms-primary); } .dms-news-card-image { display: block; position: relative; overflow: hidden; height: 200px; } .dms-news-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .dms-news-card:hover .dms-news-card-image img { transform: scale(1.05); } .dms-news-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; } .dms-news-card-date { font-size: 12px; color: var(--dms-text-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .dms-news-card-date i { color: var(--dms-primary); } .dms-news-card-title { font-size: 18px; font-weight: 700; margin: 0 0 12px 0; line-height: 1.4; } .dms-news-card-title a { color: var(--dms-text-primary); text-decoration: none; transition: color 0.2s ease; } .dms-news-card-title a:hover { color: var(--dms-primary); } .dms-news-card-excerpt { font-size: 14px; color: var(--dms-text-secondary); line-height: 1.6; margin: 0 0 16px 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .dms-news-card-link { font-size: 14px; font-weight: 600; color: var(--dms-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s ease; margin-top: auto; } .dms-news-card-link:hover { gap: 10px; } .dms-news-card-link i { transition: transform 0.2s ease; } .dms-news-card-link:hover i { transform: translateX(4px); } /* News Article (Single View) */ .dms-news-article { overflow: hidden; } .dms-news-article-image { width: 100%; max-height: 400px; overflow: hidden; } .dms-news-article-image img { width: 100%; height: 100%; object-fit: cover; } .dms-news-article-summary { font-size: 18px; font-weight: 600; color: var(--dms-text-primary); line-height: 1.6; padding: 20px 24px; background: var(--dms-primary-light-gradient); border-left: 4px solid var(--dms-primary); margin-bottom: 24px; border-radius: 0 var(--dms-radius-md) var(--dms-radius-md) 0; } .dms-news-article-content { font-size: 15px; line-height: 1.8; color: var(--dms-text-secondary); } .dms-news-article-content h2, .dms-news-article-content h3, .dms-news-article-content h4 { color: var(--dms-text-primary); margin-top: 28px; margin-bottom: 14px; } .dms-news-article-content h2:first-child, .dms-news-article-content h3:first-child, .dms-news-article-content h4:first-child { margin-top: 0; } .dms-news-article-content p { margin-bottom: 16px; } .dms-news-article-content ul, .dms-news-article-content ol { padding-left: 24px; margin-bottom: 16px; } .dms-news-article-content li { margin-bottom: 8px; } .dms-news-article-content img { max-width: 100%; height: auto; border-radius: var(--dms-radius-md); margin: 20px 0; } .dms-news-article-content blockquote { padding: 16px 24px; background: var(--dms-bg-light); border-left: 4px solid var(--dms-primary); margin: 20px 0; border-radius: 0 var(--dms-radius-md) var(--dms-radius-md) 0; font-style: italic; color: var(--dms-text-secondary); } /* News Tags */ .dms-news-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 20px; margin-top: 24px; border-top: 1px solid var(--dms-border-light); font-size: 14px; } .dms-news-tags i { color: var(--dms-primary); } .dms-news-tags-label { font-weight: 600; color: var(--dms-text-primary); margin-right: 4px; } .dms-news-tags a { display: inline-block; padding: 4px 12px; background: var(--dms-bg-light); border-radius: 20px; color: var(--dms-text-secondary); text-decoration: none; font-size: 13px; transition: all 0.2s ease; } .dms-news-tags a:hover { background: var(--dms-primary); color: #fff; } /* News Responsive */ @media (max-width: 768px) { .dms-news-grid { grid-template-columns: 1fr; } .dms-news-card-image { height: 180px; } .dms-news-article-image { max-height: 250px; } .dms-news-article-summary { font-size: 16px; padding: 16px 20px; } } @media (max-width: 576px) { .dms-news-card-body { padding: 16px; } .dms-news-card-title { font-size: 16px; } .dms-news-article-content { font-size: 14px; } } /* ======================================== SIDEBAR COMPONENTS Sidebar cards, lists, and news widgets ======================================== */ /* Sidebar Card */ .dms-sidebar-card { background: var(--dms-bg-white); border-radius: var(--dms-radius-lg); overflow: hidden; box-shadow: var(--dms-shadow-sm); border: 1px solid var(--dms-border); margin-bottom: var(--dms-spacing-lg); } .dms-sidebar-header { background: var(--dms-primary-gradient); color: #fff; padding: 14px 18px; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 10px; } .dms-sidebar-header i { font-size: 16px; opacity: 0.9; } .dms-sidebar-body { padding: 0; } /* Sidebar List (Categories) */ .dms-sidebar-list { list-style: none; margin: 0; padding: 0; } .dms-sidebar-list li { border-bottom: 1px solid var(--dms-border-light); } .dms-sidebar-list li:last-child { border-bottom: none; } .dms-sidebar-list a { display: flex; align-items: center; gap: 10px; padding: 12px 18px; color: var(--dms-text-secondary); text-decoration: none; font-size: 14px; transition: all 0.2s ease; } .dms-sidebar-list a:hover { background: var(--dms-bg-light); color: var(--dms-primary); padding-left: 22px; } .dms-sidebar-list a.active { background: var(--dms-primary-light-gradient); color: var(--dms-primary); font-weight: 600; border-left: 3px solid var(--dms-primary); } .dms-sidebar-list a i { font-size: 12px; color: var(--dms-text-muted); transition: transform 0.2s ease; } .dms-sidebar-list a:hover i, .dms-sidebar-list a.active i { color: var(--dms-primary); transform: translateX(3px); } /* Sidebar Group Labels */ .dms-sidebar-group-label { padding: 10px 18px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--dms-text-muted); background: var(--dms-bg-light); border-bottom: none !important; pointer-events: none; } /* Sidebar News List */ .dms-sidebar-news-list { padding: 8px 0; } .dms-sidebar-news-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; text-decoration: none; transition: all 0.2s ease; border-bottom: 1px solid var(--dms-border-light); } .dms-sidebar-news-item:last-child { border-bottom: none; } .dms-sidebar-news-item:hover { background: var(--dms-bg-light); } .dms-sidebar-news-image { width: 50px; height: 50px; border-radius: var(--dms-radius-sm); overflow: hidden; flex-shrink: 0; background: var(--dms-bg-light); } .dms-sidebar-news-image img { width: 100%; height: 100%; object-fit: cover; } .dms-sidebar-news-content { flex: 1; min-width: 0; } .dms-sidebar-news-date { display: block; font-size: 11px; color: var(--dms-text-muted); margin-bottom: 4px; } .dms-sidebar-news-title { display: -webkit-box; font-size: 13px; font-weight: 600; color: var(--dms-text-primary); line-height: 1.4; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s ease; } .dms-sidebar-news-item:hover .dms-sidebar-news-title { color: var(--dms-primary); } /* News Results Info */ .dms-news-results-info { font-size: 14px; color: var(--dms-text-muted); margin-bottom: var(--dms-spacing-md); padding: 8px 0; } .dms-news-results-info span { font-weight: 700; color: var(--dms-primary); } /* News No Results */ .dms-news-no-results { margin: var(--dms-spacing-lg) 0; } /* ======================================== FOOTER SIDEBAR CARDS Convert sidebar cards to simple list style in footer ======================================== */ /* Hide card styling in footer - convert to simple list */ .modern-footer .dms-sidebar-card, .footer-column .dms-sidebar-card { background: transparent; border: none; box-shadow: none; margin-bottom: 0; border-radius: 0; } /* Convert header to simple h5 style */ .modern-footer .dms-sidebar-header, .footer-column .dms-sidebar-header { background: transparent; padding: 0 0 12px 0; border-bottom: none; position: relative; margin-bottom: 25px; } .modern-footer .dms-sidebar-header::after, .footer-column .dms-sidebar-header::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 3px; } .modern-footer .dms-sidebar-header span, .footer-column .dms-sidebar-header span { font-size: 16px; font-weight: 700; color: #fff; } .modern-footer .dms-sidebar-header i, .footer-column .dms-sidebar-header i { display: none; } .modern-footer .dms-sidebar-body, .footer-column .dms-sidebar-body { padding: 0; } /* Footer List Links */ .modern-footer .dms-sidebar-list, .footer-column .dms-sidebar-list { padding: 0; margin: 0; } .modern-footer .dms-sidebar-list li, .footer-column .dms-sidebar-list li { border-bottom: none; margin-bottom: 12px; } .modern-footer .dms-sidebar-list a, .footer-column .dms-sidebar-list a { color: #8892b0; padding: 0; font-size: 14px; background: transparent; border: none; } .modern-footer .dms-sidebar-list a:hover, .footer-column .dms-sidebar-list a:hover { color: #667eea; padding-left: 5px; background: transparent; } .modern-footer .dms-sidebar-list a.active, .footer-column .dms-sidebar-list a.active { color: #667eea; background: transparent; border: none; } .modern-footer .dms-sidebar-list a i, .footer-column .dms-sidebar-list a i { display: none; } /* Footer News Items - Simple list style */ .modern-footer .dms-sidebar-news-list, .footer-column .dms-sidebar-news-list { padding: 0; } .modern-footer .dms-sidebar-news-item, .footer-column .dms-sidebar-news-item { padding: 0; margin-bottom: 15px; border: none; display: block; } .modern-footer .dms-sidebar-news-item:hover, .footer-column .dms-sidebar-news-item:hover { background: transparent; } .modern-footer .dms-sidebar-news-content, .footer-column .dms-sidebar-news-content { display: block; } .modern-footer .dms-sidebar-news-date, .footer-column .dms-sidebar-news-date { color: #6c7a96; font-size: 12px; margin-bottom: 4px; } .modern-footer .dms-sidebar-news-title, .footer-column .dms-sidebar-news-title { color: #8892b0; font-size: 14px; font-weight: 400; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } .modern-footer .dms-sidebar-news-item:hover .dms-sidebar-news-title, .footer-column .dms-sidebar-news-item:hover .dms-sidebar-news-title { color: #667eea; } /* ======================================== TERMS & CONDITIONS ACCORDION For legal documents, privacy policy, etc. Uses native
element ======================================== */ /* Terms Container */ .dms-terms-container { max-width: 100%; padding: 0; } .dms-terms-intro { font-size: 14px; color: var(--dms-text-muted); margin-bottom: var(--dms-spacing-md); } /* Section Title */ .dms-terms-section-title { font-size: 18px; font-weight: 700; color: var(--dms-text-primary); margin: var(--dms-spacing-lg) 0 var(--dms-spacing-md) 0; padding-bottom: var(--dms-spacing-sm); border-bottom: 2px solid var(--dms-primary); display: flex; align-items: center; gap: 10px; } .dms-terms-section-title i { color: var(--dms-primary); } /* Terms Accordion using
*/ .dms-terms-accordion { margin-bottom: var(--dms-spacing-md); } .dms-terms-accordion details { background: var(--dms-bg-white); border: 1px solid var(--dms-border); border-radius: var(--dms-radius-md); margin-bottom: var(--dms-spacing-sm); overflow: hidden; transition: all 0.2s ease; } .dms-terms-accordion details:hover { border-color: var(--dms-primary); box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1); } .dms-terms-accordion details[open] { border-color: var(--dms-primary); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15); } /* Summary (Header) */ .dms-terms-accordion summary { list-style: none; cursor: pointer; padding: 16px 20px; font-weight: 600; font-size: 15px; color: var(--dms-text-primary); display: flex; align-items: center; gap: 12px; transition: all 0.2s ease; background: var(--dms-bg-white); } .dms-terms-accordion summary::-webkit-details-marker { display: none; } .dms-terms-accordion summary::before { content: '\f105'; font-family: FontAwesome; font-size: 14px; color: var(--dms-primary); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: var(--dms-primary-light); border-radius: 50%; transition: transform 0.25s ease; flex-shrink: 0; } .dms-terms-accordion details[open] summary::before { transform: rotate(90deg); } .dms-terms-accordion summary:hover { background: var(--dms-bg-light); } .dms-terms-accordion details[open] summary { background: var(--dms-primary-light-gradient); border-bottom: 1px solid var(--dms-border-light); } /* Panel Content */ .dms-terms-accordion .dms-terms-panel { padding: 20px; background: var(--dms-bg-light); color: var(--dms-text-secondary); line-height: 1.7; font-size: 14px; } .dms-terms-accordion .dms-terms-panel p { margin: 0 0 12px 0; } .dms-terms-accordion .dms-terms-panel p:last-child { margin-bottom: 0; } .dms-terms-accordion .dms-terms-panel ol, .dms-terms-accordion .dms-terms-panel ul { padding-left: 24px; margin: 12px 0; } .dms-terms-accordion .dms-terms-panel li { margin-bottom: 8px; } .dms-terms-accordion .dms-terms-panel strong { color: var(--dms-text-primary); } .dms-terms-accordion .dms-terms-panel a { color: var(--dms-primary); text-decoration: none; font-weight: 500; } .dms-terms-accordion .dms-terms-panel a:hover { text-decoration: underline; } /* Nested Accordion */ .dms-terms-accordion .dms-terms-accordion { margin-top: var(--dms-spacing-sm); } /* Responsive */ @media (max-width: 768px) { .dms-terms-accordion summary { padding: 14px 16px; font-size: 14px; } .dms-terms-accordion .dms-terms-panel { padding: 16px; } .dms-terms-section-title { font-size: 16px; } } /* ======================================== DRIVER PORTAL LAYOUT Wider container + mobile nav for driver pages ======================================== */ /* Wider container for driver portal */ .driver-portal-container { width: 90%; max-width: 1400px; } @media (min-width: 1200px) { .driver-portal-container { width: 85%; } } @media (min-width: 1600px) { .driver-portal-container { width: 80%; max-width: 1600px; } } /* Mobile nav toggle button */ .driver-mobile-nav { margin-bottom: 8px; } .driver-mobile-nav-toggle { width: 100%; background: var(--dms-primary-gradient); color: #fff; border: none; padding: 8px 14px; border-radius: var(--dms-radius-md); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 8px; } .driver-mobile-nav-toggle:hover, .driver-mobile-nav-toggle:focus { opacity: 0.95; outline: none; } .driver-mobile-nav-toggle .fa-bars { font-size: 14px; } .driver-mobile-nav-toggle span { flex: 1; } /* Mobile nav dropdown menu */ .driver-mobile-nav-menu { background: var(--dms-bg-white); border-radius: 0 0 var(--dms-radius-md) var(--dms-radius-md); box-shadow: var(--dms-shadow-md); border: 1px solid var(--dms-border); border-top: none; margin-top: -4px; overflow: hidden; } .driver-mobile-nav-menu .dms-sidebar-list a { padding: 10px 16px; font-size: 13px; } /* Mobile responsive for driver portal */ @media (max-width: 767px) { .driver-portal-container { width: 100%; padding-left: 10px; padding-right: 10px; } .driver-portal-container .page-header-card { padding: 16px 18px; border-radius: var(--dms-radius-md); } .driver-portal-container .page-header-card h1 { font-size: 16px; } .driver-portal-container .page-header-card h1 i { width: 32px; height: 32px; font-size: 14px; } .driver-portal-container .dms-stat-card { padding: 8px 6px; margin-bottom: 10px; } .driver-portal-container .dms-stat-card .stat-number { font-size: 16px; } .driver-portal-container .dms-stat-card .stat-label { font-size: 9px; } .driver-portal-container .dms-card { border-radius: var(--dms-radius-md); } .driver-portal-container .dms-card-header { padding: 12px 16px; } .driver-portal-container .dms-card-body { padding: 12px; } } /* ============================================ INFORMATION PAGES - Background Image ============================================ */ .info-page-wrapper { min-height: 100vh; background-image: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), url('../../../../../image/bg-home.png'); background-attachment: fixed; background-size: cover; background-position: center center; background-repeat: no-repeat; } .info-page-wrapper .dms-hero-section { background: transparent; color: var(--dms-text-primary); } /* ============================================ UPLOAD ZONE Reusable file upload trigger component. Usage:
States: - Default: dashed border, light background - Hover: primary-colored border + background - Selected (via JS): highlight trigger with primary color Feedback chips (injected by JS): - .upload-file-chip — selected file name + icon/thumbnail - .upload-error-chip — validation error (e.g. file too large) ============================================ */ .upload-zone { display: block; cursor: pointer; } .upload-trigger { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 18px 12px; border: 2px dashed var(--dms-border); border-radius: var(--dms-radius-md); background: var(--dms-bg-light); transition: all 0.2s ease; text-align: center; } .upload-zone:hover .upload-trigger { border-color: var(--dms-primary); background: var(--dms-primary-light); } .upload-trigger i { font-size: 22px; color: var(--dms-text-muted); transition: color 0.2s; } .upload-zone:hover .upload-trigger i { color: var(--dms-primary); } .upload-trigger .upload-text { font-size: 13px; font-weight: 600; color: var(--dms-text-secondary); } .upload-trigger .upload-hint { font-size: 11px; color: var(--dms-text-muted); } .upload-preview { margin-top: 8px; } .upload-file-chip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--dms-primary-light); border: 1px solid rgba(102, 126, 234, 0.25); border-radius: var(--dms-radius-sm); } .upload-file-chip .chip-icon { font-size: 18px; color: var(--dms-primary); flex-shrink: 0; } .upload-file-chip .chip-name { font-size: 12px; color: var(--dms-text-secondary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .upload-error-chip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--dms-danger-light); border: 1px solid rgba(244, 67, 54, 0.25); border-radius: var(--dms-radius-sm); font-size: 12px; color: #c62828; margin-top: 8px; }