/** * VET7well Modern Menu Reskin * * Clean, modern styling for AdminLTE sidebar that matches * the dashboard and login page design. * * Usage: Add class "menu-reskin" to tag * * @version 2.2.0 * @date 2026-01-24 */ /* ========================================================================== Google Fonts Import - Inter (Body) + Poppins (Headers) ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap'); /* ========================================================================== CSS Custom Properties (Variables) - VET7well Theme ========================================================================== */ :root { /* Typography - Modern Fonts */ --menu-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --menu-font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* ======================================================================= UNIFIED COLOR SYSTEM - VET7well Theme Use these variables EVERYWHERE for consistency! ======================================================================= */ /* PRIMARY - VET7well Brand Green (for branding, active states, primary actions) */ --color-primary: #7AA239; --color-primary-light: #8fb94a; --color-primary-dark: #5c7a2b; --color-primary-bg: rgba(122, 162, 57, 0.12); --color-primary-gradient: linear-gradient(135deg, #8fb94a 0%, #7AA239 100%); /* SUCCESS - Green (for positive actions, confirmations, available states) */ --color-success: #22c55e; --color-success-light: #4ade80; --color-success-dark: #16a34a; --color-success-bg: #f0fdf4; --color-success-text: #166534; --color-success-gradient: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); /* INFO - Cyan/Teal (for informational, neutral-positive, details) */ --color-info: #06b6d4; --color-info-light: #22d3ee; --color-info-dark: #0891b2; --color-info-bg: #ecfeff; --color-info-text: #0e7490; --color-info-gradient: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); /* WARNING - Orange/Amber (for caution, attention needed, pending) */ --color-warning: #f59e0b; --color-warning-light: #fbbf24; --color-warning-dark: #d97706; --color-warning-bg: #fffbeb; --color-warning-text: #b45309; --color-warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); /* DANGER - Red (for destructive actions, errors, critical) */ --color-danger: #ef4444; --color-danger-light: #f87171; --color-danger-dark: #dc2626; --color-danger-bg: #fef2f2; --color-danger-text: #b91c1c; --color-danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); /* SECONDARY - Blue (for secondary actions, links, navigation) */ --color-secondary: #3b82f6; --color-secondary-light: #60a5fa; --color-secondary-dark: #2563eb; --color-secondary-bg: #eff6ff; --color-secondary-text: #1d4ed8; --color-secondary-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); /* Neutral Colors - Softer than pure white */ --menu-bg: #f8fafc; --menu-bg-card: #ffffff; --menu-bg-hover: #f1f5f9; --menu-bg-active: var(--color-primary-bg); --menu-text: #374151; --menu-text-hover: #1f2937; --menu-text-active: var(--color-primary); --menu-text-muted: #6b7280; --menu-border: #e2e8f0; --menu-border-light: #f1f5f9; /* Logo Grays */ --menu-gray-dark: #706E6F; --menu-gray-light: #B5B5B5; /* Shadows */ --menu-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); --menu-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sizing */ --menu-icon-size: 18px; --menu-icon-width: 30px; --menu-font-size: 14px; --menu-item-padding: 10px 12px; --menu-border-radius: 6px; --menu-transition: all 0.2s ease; /* Legacy aliases for backwards compatibility */ --menu-primary: var(--color-primary); --menu-primary-light: var(--color-primary-light); --menu-primary-dark: var(--color-primary-dark); } /* ========================================================================== UNIFIED BUTTON STYLES - Use these classes for consistent buttons! ========================================================================== */ /* Base button style */ .menu-reskin .btn-modern { border: none !important; border-radius: 8px !important; padding: 8px 16px !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; transition: all 0.2s ease !important; } .menu-reskin .btn-modern:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; } /* Primary Button - VET7well Green (main actions) */ .menu-reskin .btn-primary, .menu-reskin .btn.btn-primary { background: var(--color-primary-gradient) !important; border: none !important; color: #fff !important; } .menu-reskin .btn-primary:hover, .menu-reskin .btn.btn-primary:hover { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important; } /* Success Button - Green (confirmations, positive) */ .menu-reskin .btn-success, .menu-reskin .btn.btn-success { background: var(--color-success-gradient) !important; border: none !important; color: #fff !important; } .menu-reskin .btn-success:hover, .menu-reskin .btn.btn-success:hover { background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%) !important; } /* Info Button - Cyan (informational) */ .menu-reskin .btn-info, .menu-reskin .btn.btn-info { background: var(--color-info-gradient) !important; border: none !important; color: #fff !important; } .menu-reskin .btn-info:hover, .menu-reskin .btn.btn-info:hover { background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%) !important; } /* Warning Button - Orange (caution) */ .menu-reskin .btn-warning, .menu-reskin .btn.btn-warning { background: var(--color-warning-gradient) !important; border: none !important; color: #fff !important; } .menu-reskin .btn-warning:hover, .menu-reskin .btn.btn-warning:hover { background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%) !important; } /* Danger Button - Red (destructive) */ .menu-reskin .btn-danger, .menu-reskin .btn.btn-danger { background: var(--color-danger-gradient) !important; border: none !important; color: #fff !important; } .menu-reskin .btn-danger:hover, .menu-reskin .btn.btn-danger:hover { background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%) !important; } /* Secondary/Default Button - Blue */ .menu-reskin .btn-default, .menu-reskin .btn.btn-default { background: var(--color-secondary-gradient) !important; border: none !important; color: #fff !important; } .menu-reskin .btn-default:hover, .menu-reskin .btn.btn-default:hover { background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%) !important; } /* ========================================================================== Global Typography - Apply Modern Fonts ========================================================================== */ /* Base body font - Inter for all text */ body.menu-reskin { font-family: var(--menu-font-body) !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* Headers - Poppins for all headings */ .menu-reskin h1, .menu-reskin h2, .menu-reskin h3, .menu-reskin h4, .menu-reskin h5, .menu-reskin h6, .menu-reskin .box-title, .menu-reskin .content-header h1, .menu-reskin .modern-title-text, .menu-reskin .info-box-number { font-family: var(--menu-font-heading) !important; } /* Sidebar menu - Inter */ .menu-reskin .sidebar-menu, .menu-reskin .sidebar-menu li a, .menu-reskin .treeview-menu li a { font-family: var(--menu-font-body) !important; } /* Header navbar - Inter */ .menu-reskin .navbar, .menu-reskin .main-header .navbar { font-family: var(--menu-font-body) !important; } /* User panel - Inter for name, Poppins for role/title */ .menu-reskin .user-panel .info p { font-family: var(--menu-font-body) !important; } /* Dropdown menus - Inter */ .menu-reskin .dropdown-menu { font-family: var(--menu-font-body) !important; } /* Form elements - Inter */ .menu-reskin .form-control, .menu-reskin .btn, .menu-reskin label, .menu-reskin .control-label { font-family: var(--menu-font-body) !important; } /* Tables - Inter */ .menu-reskin .table, .menu-reskin .table th, .menu-reskin .table td { font-family: var(--menu-font-body) !important; } /* Dashboard specific */ .menu-reskin .dashboard, .menu-reskin .box-body, .menu-reskin .box-footer { font-family: var(--menu-font-body) !important; } /* Small box widget numbers - Poppins */ .menu-reskin .small-box .inner h3, .menu-reskin .small-box .inner p { font-family: var(--menu-font-heading) !important; } /* ========================================================================== IMPORTANT: Override skin-black completely ========================================================================== */ /* Main Sidebar - Override skin-black */ .menu-reskin.skin-black .left-side, .menu-reskin.skin-black .main-sidebar, .menu-reskin .left-side, .menu-reskin .main-sidebar { background: var(--menu-bg) !important; border-right: 1px solid var(--menu-border); box-shadow: var(--menu-shadow); overflow: hidden !important; } /* Inner sidebar - this is where we control scrolling */ body.menu-reskin .main-sidebar .sidebar, body.menu-reskin.skin-black .main-sidebar .sidebar { height: 100%; overflow-x: hidden !important; overflow-y: hidden !important; /* Firefox */ scrollbar-width: none; } /* Enable scrolling only on hover */ body.menu-reskin .main-sidebar:hover .sidebar, body.menu-reskin .main-sidebar .sidebar:hover { overflow-y: auto !important; /* Firefox */ scrollbar-width: thin; scrollbar-color: var(--menu-border) transparent; } /* WebKit scrollbar styling */ body.menu-reskin .main-sidebar .sidebar::-webkit-scrollbar { width: 5px; } body.menu-reskin .main-sidebar .sidebar::-webkit-scrollbar-thumb { background: var(--menu-border); border-radius: 4px; } body.menu-reskin .main-sidebar .sidebar::-webkit-scrollbar-track { background: transparent; } /* Sidebar inner wrapper */ .menu-reskin .sidebar, .menu-reskin.skin-black .sidebar { padding: 0 !important; background: transparent !important; } /* ========================================================================== Logo / Header Area ========================================================================== */ .menu-reskin .main-header, .menu-reskin.skin-black .main-header { /* Gradient accent bar at top of header */ border-top: 4px solid var(--menu-primary); background: linear-gradient(90deg, var(--menu-primary) 0%, var(--menu-primary-light) 50%, var(--menu-gray-light) 100%); background-size: 100% 4px; background-repeat: no-repeat; background-position: top; } .menu-reskin .main-header .logo, .menu-reskin.skin-black .main-header .logo { background: var(--menu-bg-card) !important; border-right: 1px solid var(--menu-border); border-bottom: none !important; color: var(--menu-text) !important; height: 50px; line-height: 50px; display: flex; align-items: center; justify-content: center; } .menu-reskin .main-header .logo:hover { background: var(--menu-bg-hover) !important; } .menu-reskin .main-header .logo .logo-mini, .menu-reskin .main-header .logo .logo-lg { display: flex; align-items: center; justify-content: center; } .menu-reskin .main-header .logo .logo-mini img, .menu-reskin .main-header .logo .logo-lg img { max-height: 36px; width: auto; } /* Hide mini logo when sidebar is expanded (show only large logo) */ .menu-reskin .main-header .logo .logo-mini { display: none !important; } .menu-reskin .main-header .logo .logo-lg { display: flex !important; } /* In collapsed state: show mini logo, hide large logo */ .sidebar-collapse.menu-reskin .main-header .logo .logo-mini, .sidebar-mini.sidebar-collapse.menu-reskin .main-header .logo .logo-mini { display: flex !important; } .sidebar-collapse.menu-reskin .main-header .logo .logo-lg, .sidebar-mini.sidebar-collapse.menu-reskin .main-header .logo .logo-lg { display: none !important; } /* ========================================================================== Top Navigation Bar - Modern Header ========================================================================== */ .menu-reskin .main-header .navbar, .menu-reskin.skin-black .main-header .navbar { background: var(--menu-bg-card) !important; border-bottom: 1px solid var(--menu-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); min-height: 50px; } /* Sidebar Toggle Button */ .menu-reskin .main-header .sidebar-toggle, .menu-reskin.skin-black .main-header .sidebar-toggle { color: var(--menu-text) !important; padding: 15px 18px !important; border-right: 1px solid var(--menu-border); transition: var(--menu-transition); } .menu-reskin .main-header .sidebar-toggle:hover { color: var(--menu-primary) !important; background: var(--menu-bg-hover) !important; } .menu-reskin .main-header .sidebar-toggle i { font-size: 18px !important; } /* Navbar Items */ .menu-reskin .main-header .navbar .nav > li > a { color: var(--menu-text) !important; padding: 15px 14px !important; transition: var(--menu-transition); border-radius: 0; position: relative; } .menu-reskin .main-header .navbar .nav > li > a:hover, .menu-reskin .main-header .navbar .nav > li > a:focus { color: var(--menu-primary) !important; background: var(--menu-bg-hover) !important; } /* Quick Icon Styling */ .menu-reskin .main-header .navbar .nav > li > a > i, .menu-reskin .main-header .navbar .nav > li > a > .fa, .menu-reskin .main-header .navbar .nav > li > a > .fas, .menu-reskin .main-header .navbar .nav > li > a > .far, .menu-reskin .main-header .navbar .nav > li > a > .fal { font-size: 16px; transition: var(--menu-transition); } .menu-reskin .main-header .navbar .nav > li > a:hover > i, .menu-reskin .main-header .navbar .nav > li > a:hover > .fa { color: var(--menu-primary) !important; transform: scale(1.1); } /* Notification Badges */ .menu-reskin .main-header .navbar .nav > li > a > .label { position: absolute; top: 8px; right: 6px; font-size: 10px; font-weight: 600; padding: 2px 5px; border-radius: 10px; min-width: 16px; text-align: center; } .menu-reskin .main-header .navbar .label-success { background: var(--menu-primary) !important; } .menu-reskin .main-header .navbar .label-warning { background: var(--color-warning) !important; } .menu-reskin .main-header .navbar .label-danger { background: var(--color-danger) !important; } /* Search Input in Header */ .menu-reskin .main-header .navbar .nav > li > a input.form-control, .menu-reskin .main-header .navbar input#vet7well-search { border: 1px solid var(--menu-border) !important; border-radius: var(--menu-border-radius) !important; padding: 6px 12px !important; font-size: 13px !important; background: var(--menu-bg) !important; transition: var(--menu-transition); height: 32px !important; } .menu-reskin .main-header .navbar input#vet7well-search:focus { border-color: var(--menu-primary) !important; box-shadow: 0 0 0 3px rgba(122, 162, 57, 0.15) !important; outline: none; } /* Center search containers vertically */ .menu-reskin .main-header .navbar .nav > li > a[style*="height: 40px"], .menu-reskin .main-header .navbar .notifications-menu > a[id="vet7well-search-dd"] { display: flex !important; align-items: center !important; height: 50px !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Select2 container in header - vertical centering */ .menu-reskin .main-header .navbar .select2-container { vertical-align: middle !important; } .menu-reskin .main-header .navbar .select2-container .select2-choice { height: 32px !important; line-height: 30px !important; border: 1px solid var(--menu-border) !important; border-radius: var(--menu-border-radius) !important; background: var(--menu-bg) !important; } .menu-reskin .main-header .navbar .select2-container .select2-choice:focus, .menu-reskin .main-header .navbar .select2-container.select2-container-active .select2-choice { border-color: var(--menu-primary) !important; box-shadow: 0 0 0 3px rgba(122, 162, 57, 0.15) !important; } /* Dropdown Menus in Header */ .menu-reskin .main-header .navbar .dropdown-menu { border: 1px solid var(--menu-border) !important; border-radius: var(--menu-border-radius) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important; padding: 0 !important; margin-top: 0 !important; overflow: hidden; } .menu-reskin .main-header .navbar .dropdown-menu > li.header { background: linear-gradient(135deg, var(--menu-primary) 0%, var(--menu-primary-dark) 100%) !important; color: white !important; padding: 12px 15px !important; font-weight: 600; font-size: 13px; border-bottom: none !important; } .menu-reskin .main-header .navbar .dropdown-menu > li.footer { background: var(--menu-bg) !important; border-top: 1px solid var(--menu-border) !important; padding: 0 !important; } .menu-reskin .main-header .navbar .dropdown-menu > li.footer > a { color: var(--menu-primary) !important; font-weight: 500; padding: 10px 15px !important; display: block; text-align: center; } .menu-reskin .main-header .navbar .dropdown-menu > li.footer > a:hover { background: var(--menu-bg-hover) !important; } /* Dropdown Menu Items */ .menu-reskin .main-header .navbar .dropdown-menu .menu > li > a { padding: 10px 15px !important; color: var(--menu-text) !important; border-bottom: 1px solid var(--menu-border-light) !important; transition: var(--menu-transition); } .menu-reskin .main-header .navbar .dropdown-menu .menu > li > a:hover { background: var(--menu-bg-hover) !important; color: var(--menu-primary) !important; } .menu-reskin .main-header .navbar .dropdown-menu .menu > li > a > i { color: var(--menu-primary) !important; margin-right: 8px; } /* Branch Dropdown */ .menu-reskin .main-header .navbar select#selbraid { border: 1px solid var(--menu-border) !important; border-radius: var(--menu-border-radius) !important; padding: 5px 10px !important; font-size: 13px !important; background: var(--menu-bg) !important; color: var(--menu-text) !important; cursor: pointer; } .menu-reskin .main-header .navbar select#selbraid:focus { border-color: var(--menu-primary) !important; outline: none; } /* Mobile/SmartView Button */ .menu-reskin .main-header .navbar a[href*="smartview"] { border-right: 1px solid var(--menu-border) !important; } .menu-reskin .main-header .sidebar-toggle { color: var(--menu-text) !important; } .menu-reskin .main-header .sidebar-toggle:hover { color: var(--menu-primary) !important; background: var(--menu-bg-hover) !important; } /* ========================================================================== User Panel - Fixed Avatar Display ========================================================================== */ .menu-reskin .user-panel, .menu-reskin.skin-black .user-panel { border-bottom: 1px solid var(--menu-border) !important; padding: 12px 10px !important; margin: 0 !important; background: var(--menu-bg-card) !important; display: flex; align-items: center; overflow: visible !important; } /* Avatar image */ .menu-reskin .user-panel > .image { padding-left: 8px; } .menu-reskin .user-panel > .image > img { width: 40px !important; height: 40px !important; border-radius: 50%; border: 2px solid var(--menu-primary); object-fit: cover; } /* User info text */ .menu-reskin .user-panel > .info { padding: 5px 8px 5px 12px; color: var(--menu-text) !important; font-size: 13px; line-height: 1.3; } .menu-reskin .user-panel > .info > p { color: var(--menu-text) !important; font-weight: 600; margin: 0 0 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-reskin .user-panel > .info > a { color: var(--menu-primary) !important; font-size: 12px; } /* Collapsed sidebar - hide user panel */ .sidebar-collapse .menu-reskin .user-panel > .info, .sidebar-mini.sidebar-collapse .menu-reskin .user-panel > .info { display: none !important; } .sidebar-collapse .menu-reskin .user-panel, .sidebar-mini.sidebar-collapse .menu-reskin .user-panel { padding: 12px 10px !important; justify-content: center; } .sidebar-collapse .menu-reskin .user-panel > .image, .sidebar-mini.sidebar-collapse .menu-reskin .user-panel > .image { padding-left: 0; display: flex; justify-content: center; } .sidebar-collapse .menu-reskin .user-panel > .image > img, .sidebar-mini.sidebar-collapse .menu-reskin .user-panel > .image > img { width: 45px !important; height: 45px !important; } /* ========================================================================== Main Menu Container ========================================================================== */ .menu-reskin .sidebar-menu, .menu-reskin.skin-black .sidebar-menu { padding: 8px 0 !important; margin: 0 !important; list-style: none !important; background: transparent !important; } .menu-reskin .sidebar-menu > li { margin: 1px 8px !important; position: relative; } /* ========================================================================== Menu Items - Main Level ========================================================================== */ .menu-reskin .sidebar-menu > li > a, .menu-reskin.skin-black .sidebar-menu > li > a { display: flex !important; align-items: center !important; padding: var(--menu-item-padding) !important; color: var(--menu-text) !important; font-size: var(--menu-font-size) !important; font-weight: 500 !important; text-decoration: none !important; border-radius: var(--menu-border-radius) !important; border: 1px solid transparent !important; transition: var(--menu-transition) !important; background: transparent !important; line-height: 1.4 !important; margin: 0 !important; } .menu-reskin .sidebar-menu > li > a:hover { background: var(--menu-bg-hover) !important; color: var(--menu-text-hover) !important; border-color: var(--menu-border) !important; } /* Active State */ .menu-reskin .sidebar-menu > li.active > a, .menu-reskin.skin-black .sidebar-menu > li.active > a { background: var(--menu-bg-active) !important; color: var(--menu-text-active) !important; border-color: var(--menu-primary) !important; border-left-width: 3px !important; font-weight: 600 !important; } /* ========================================================================== Icons - FIXED SIZING & POSITIONING ========================================================================== */ /* All icons in menu items */ .menu-reskin .sidebar-menu > li > a > i, .menu-reskin .sidebar-menu > li > a > .fa, .menu-reskin .sidebar-menu > li > a > .fas, .menu-reskin .sidebar-menu > li > a > .far, .menu-reskin .sidebar-menu > li > a > .fal, .menu-reskin .sidebar-menu > li > a > .fab, .menu-reskin .sidebar-menu > li > a > [class^="fa-"], .menu-reskin .sidebar-menu > li > a > [class*=" fa-"] { /* Fixed width for alignment */ width: var(--menu-icon-width) !important; min-width: var(--menu-icon-width) !important; max-width: var(--menu-icon-width) !important; /* Consistent size */ font-size: var(--menu-icon-size) !important; line-height: 1 !important; /* Spacing */ margin-right: 10px !important; margin-left: 0 !important; /* Centering */ text-align: center !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; /* Color */ color: var(--menu-text-muted) !important; transition: var(--menu-transition) !important; } /* Icon hover state */ .menu-reskin .sidebar-menu > li > a:hover > i, .menu-reskin .sidebar-menu > li > a:hover > .fa, .menu-reskin .sidebar-menu > li > a:hover > [class^="fa-"], .menu-reskin .sidebar-menu > li > a:hover > [class*=" fa-"] { color: var(--menu-primary) !important; } /* Icon active state */ .menu-reskin .sidebar-menu > li.active > a > i, .menu-reskin .sidebar-menu > li.active > a > .fa, .menu-reskin .sidebar-menu > li.active > a > [class^="fa-"], .menu-reskin .sidebar-menu > li.active > a > [class*=" fa-"] { color: var(--menu-primary) !important; } /* ========================================================================== Label Text ========================================================================== */ .menu-reskin .sidebar-menu > li > a > span { flex: 1 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* ========================================================================== Treeview (Dropdown) - Arrow Icon ========================================================================== */ /* The dropdown arrow - override icon styles for this specific element */ .menu-reskin .sidebar-menu > li.treeview > a > .fa-angle-left, .menu-reskin .sidebar-menu > li.treeview > a > .pull-right, .menu-reskin .sidebar-menu > li.treeview > a > i.pull-right { width: auto !important; min-width: auto !important; max-width: none !important; margin-right: 0 !important; margin-left: auto !important; font-size: 14px !important; transition: transform 0.2s ease !important; color: var(--menu-text-muted) !important; } /* Rotated arrow when open */ .menu-reskin .sidebar-menu > li.treeview.active > a > .fa-angle-left, .menu-reskin .sidebar-menu > li.treeview.menu-open > a > .fa-angle-left { transform: rotate(-90deg); } /* ========================================================================== Submenu ========================================================================== */ .menu-reskin .sidebar-menu .treeview-menu, .menu-reskin.skin-black .sidebar-menu .treeview-menu { background: var(--menu-bg-hover) !important; margin: 4px 0 4px 15px !important; padding: 6px 0 !important; border-radius: var(--menu-border-radius) !important; list-style: none !important; border-left: 2px solid var(--menu-primary) !important; } .menu-reskin .sidebar-menu .treeview-menu > li { margin: 0 !important; } .menu-reskin .sidebar-menu .treeview-menu > li > a { display: flex !important; align-items: center !important; padding: 8px 12px !important; color: var(--menu-text) !important; font-size: 13px !important; text-decoration: none !important; transition: var(--menu-transition) !important; background: transparent !important; } .menu-reskin .sidebar-menu .treeview-menu > li > a:hover { color: var(--menu-text-hover) !important; background: rgba(122, 162, 57, 0.08) !important; } .menu-reskin .sidebar-menu .treeview-menu > li.active > a { color: var(--menu-primary) !important; font-weight: 600 !important; background: var(--menu-bg-active) !important; } /* Submenu icons */ .menu-reskin .sidebar-menu .treeview-menu > li > a > i, .menu-reskin .sidebar-menu .treeview-menu > li > a > .fa { width: 20px !important; min-width: 20px !important; font-size: 10px !important; margin-right: 8px !important; color: var(--menu-text-muted) !important; text-align: center !important; } .menu-reskin .sidebar-menu .treeview-menu > li > a:hover > i, .menu-reskin .sidebar-menu .treeview-menu > li.active > a > i { color: var(--menu-primary) !important; } /* ========================================================================== Badges ========================================================================== */ .menu-reskin .sidebar-menu .badge, .menu-reskin .sidebar-menu .label { margin-left: auto !important; font-size: 11px !important; padding: 3px 8px !important; border-radius: 12px !important; font-weight: 500 !important; } /* ========================================================================== Section Headers ========================================================================== */ .menu-reskin .sidebar-menu .header, .menu-reskin.skin-black .sidebar-menu .header { color: var(--menu-text-muted) !important; background: transparent !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 15px 12px 8px !important; margin-top: 5px !important; border-top: 1px solid var(--menu-border-light) !important; } .menu-reskin .sidebar-menu .header:first-child { border-top: none !important; margin-top: 0 !important; } /* ========================================================================== Collapsed Sidebar State ========================================================================== */ /* Increase collapsed sidebar width from 50px to 75px */ .sidebar-mini.sidebar-collapse.menu-reskin .main-sidebar, .sidebar-collapse.menu-reskin .main-sidebar, .sidebar-mini.sidebar-collapse.menu-reskin .left-side, .sidebar-collapse.menu-reskin .left-side { width: 75px !important; } /* Adjust content wrapper margin for wider collapsed sidebar */ .sidebar-mini.sidebar-collapse.menu-reskin .content-wrapper, .sidebar-collapse.menu-reskin .content-wrapper, .sidebar-mini.sidebar-collapse.menu-reskin .main-footer, .sidebar-collapse.menu-reskin .main-footer { margin-left: 75px !important; } /* Adjust logo in collapsed state */ .sidebar-mini.sidebar-collapse.menu-reskin .main-header .logo, .sidebar-collapse.menu-reskin .main-header .logo { width: 75px !important; } /* Adjust navbar in collapsed state */ .sidebar-mini.sidebar-collapse.menu-reskin .main-header .navbar, .sidebar-collapse.menu-reskin .main-header .navbar { margin-left: 75px !important; } .sidebar-collapse .menu-reskin .sidebar-menu > li > a > span, .sidebar-mini.sidebar-collapse .menu-reskin .sidebar-menu > li > a > span { display: none !important; } .sidebar-collapse .menu-reskin .sidebar-menu > li > a, .sidebar-mini.sidebar-collapse .menu-reskin .sidebar-menu > li > a { justify-content: center !important; padding: 12px 10px !important; } .sidebar-collapse .menu-reskin .sidebar-menu > li > a > i, .sidebar-mini.sidebar-collapse .menu-reskin .sidebar-menu > li > a > i, .sidebar-collapse .menu-reskin .sidebar-menu > li > a > .fa, .sidebar-mini.sidebar-collapse .menu-reskin .sidebar-menu > li > a > .fa { margin-right: 0 !important; font-size: 20px !important; } /* Hide dropdown arrow in collapsed state */ .sidebar-collapse .menu-reskin .sidebar-menu > li.treeview > a > .pull-right, .sidebar-mini.sidebar-collapse .menu-reskin .sidebar-menu > li.treeview > a > .pull-right { display: none !important; } /* ========================================================================== Sidebar Hover Delay - Override AdminLTE default hover expansion ========================================================================== */ /* Prevent default AdminLTE hover expansion when collapsed - but NOT when our class is set */ .sidebar-collapse.menu-reskin .main-sidebar:hover:not(.sidebar-hover-expanded), .sidebar-mini.sidebar-collapse.menu-reskin .main-sidebar:hover:not(.sidebar-hover-expanded) { width: 75px !important; } /* Keep sidebar collapsed even when AdminLTE adds sidebar-expanded-on-hover to body */ .sidebar-mini.sidebar-collapse.menu-reskin .main-sidebar:not(.sidebar-hover-expanded), .sidebar-collapse.menu-reskin .main-sidebar:not(.sidebar-hover-expanded) { width: 75px !important; } .sidebar-mini.sidebar-collapse.menu-reskin .main-sidebar:not(.sidebar-hover-expanded) .sidebar-menu > li > a > span, .sidebar-collapse.menu-reskin .main-sidebar:not(.sidebar-hover-expanded) .sidebar-menu > li > a > span { display: none !important; } .sidebar-mini.sidebar-collapse.menu-reskin .main-sidebar:not(.sidebar-hover-expanded) .user-panel > .info, .sidebar-collapse.menu-reskin .main-sidebar:not(.sidebar-hover-expanded) .user-panel > .info { display: none !important; } /* EXPAND when our JS class is added (after delay) - higher specificity */ .sidebar-collapse.menu-reskin .main-sidebar.sidebar-hover-expanded, .sidebar-collapse.menu-reskin .main-sidebar.sidebar-hover-expanded:hover, .sidebar-mini.sidebar-collapse.menu-reskin .main-sidebar.sidebar-hover-expanded, .sidebar-mini.sidebar-collapse.menu-reskin .main-sidebar.sidebar-hover-expanded:hover { width: 230px !important; transition: width 0.2s ease !important; } /* Show menu text when expanded via delay */ .sidebar-collapse.menu-reskin .main-sidebar.sidebar-hover-expanded .sidebar-menu > li > a > span, .sidebar-mini.sidebar-collapse.menu-reskin .main-sidebar.sidebar-hover-expanded .sidebar-menu > li > a > span { display: inline-block !important; } .sidebar-collapse.menu-reskin .main-sidebar.sidebar-hover-expanded .sidebar-menu > li > a, .sidebar-mini.sidebar-collapse.menu-reskin .main-sidebar.sidebar-hover-expanded .sidebar-menu > li > a { justify-content: flex-start !important; padding: 14px 20px !important; } .sidebar-collapse.menu-reskin .main-sidebar.sidebar-hover-expanded .sidebar-menu > li > a > i, .sidebar-mini.sidebar-collapse.menu-reskin .main-sidebar.sidebar-hover-expanded .sidebar-menu > li > a > i, .sidebar-collapse.menu-reskin .main-sidebar.sidebar-hover-expanded .sidebar-menu > li > a > .fa, .sidebar-mini.sidebar-collapse.menu-reskin .main-sidebar.sidebar-hover-expanded .sidebar-menu > li > a > .fa { margin-right: 14px !important; font-size: 18px !important; } /* Show dropdown arrow when expanded via delay */ .sidebar-collapse.menu-reskin .main-sidebar.sidebar-hover-expanded .sidebar-menu > li.treeview > a > .pull-right, .sidebar-mini.sidebar-collapse.menu-reskin .main-sidebar.sidebar-hover-expanded .sidebar-menu > li.treeview > a > .pull-right { display: block !important; } /* Show user panel info when expanded via delay */ .sidebar-collapse.menu-reskin .main-sidebar.sidebar-hover-expanded .user-panel > .info, .sidebar-mini.sidebar-collapse.menu-reskin .main-sidebar.sidebar-hover-expanded .user-panel > .info { display: block !important; } /* Show submenus when expanded via delay - ONLY for active/open items */ .sidebar-collapse.menu-reskin .main-sidebar.sidebar-hover-expanded .treeview.active > .treeview-menu, .sidebar-collapse.menu-reskin .main-sidebar.sidebar-hover-expanded .treeview.menu-open > .treeview-menu, .sidebar-mini.sidebar-collapse.menu-reskin .main-sidebar.sidebar-hover-expanded .treeview.active > .treeview-menu, .sidebar-mini.sidebar-collapse.menu-reskin .main-sidebar.sidebar-hover-expanded .treeview.menu-open > .treeview-menu { display: block !important; } /* ========================================================================== Smooth Animations ========================================================================== */ .menu-reskin .treeview-menu { display: none; } .menu-reskin .treeview.active > .treeview-menu, .menu-reskin .treeview.menu-open > .treeview-menu { display: block; animation: menuSlideDown 0.2s ease-out; } @keyframes menuSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== Gradient Accent Bar (matching dashboard/login) ========================================================================== */ .menu-reskin .left-side::before, .menu-reskin .main-sidebar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--menu-primary) 0%, var(--menu-primary-light) 50%, var(--menu-gray-light) 100%); z-index: 10; } /* ========================================================================== Dropdown Menus in Navbar ========================================================================== */ .menu-reskin .navbar-nav > .user-menu > .dropdown-menu, .menu-reskin .navbar-nav > .notifications-menu > .dropdown-menu, .menu-reskin .navbar-nav > .messages-menu > .dropdown-menu, .menu-reskin .navbar-nav > .tasks-menu > .dropdown-menu { border: 1px solid var(--menu-border) !important; border-radius: var(--menu-border-radius) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important; overflow: hidden; } /* ========================================================================== User Profile Dropdown - Modern Styling ========================================================================== */ /* Dropdown container styling */ .menu-reskin .user-menu > .dropdown-menu, .menu-reskin .navbar-nav > .user-menu > .dropdown-menu, body.menu-reskin .user-menu > .dropdown-menu { width: 300px !important; border: 1px solid var(--menu-border) !important; border-radius: var(--menu-border-radius) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important; padding: 0 !important; margin-top: 0 !important; overflow: hidden !important; } /* User header - light background with accent bar */ .menu-reskin .user-menu .user-header, .menu-reskin .navbar-nav > .user-menu > .dropdown-menu > li.user-header, body.menu-reskin .user-menu .user-header, body.menu-reskin .dropdown-menu .user-header { background: var(--menu-bg-card) !important; padding: 25px 20px 20px !important; text-align: center !important; border-bottom: 1px solid var(--menu-border) !important; position: relative !important; } /* Green accent bar at top of dropdown */ .menu-reskin .user-menu .user-header::before, .menu-reskin .navbar-nav > .user-menu > .dropdown-menu > li.user-header::before, body.menu-reskin .user-menu .user-header::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 4px !important; background: linear-gradient(90deg, var(--menu-primary) 0%, var(--menu-primary-light) 50%, var(--menu-gray-light) 100%) !important; } /* Remove old bg-light-blue class styling */ .menu-reskin .user-menu .user-header.bg-light-blue, body.menu-reskin .user-header.bg-light-blue { background: var(--menu-bg-card) !important; } /* Avatar image in header */ .menu-reskin .user-menu .user-header img, .menu-reskin .navbar-nav > .user-menu > .dropdown-menu > li.user-header img, body.menu-reskin .user-header img.img-circle { width: 75px !important; height: 75px !important; border: 3px solid var(--menu-primary) !important; box-shadow: 0 3px 12px rgba(122, 162, 57, 0.25) !important; margin-bottom: 12px !important; border-radius: 50% !important; display: block !important; margin-left: auto !important; margin-right: auto !important; } /* User name text */ .menu-reskin .user-menu .user-header p, .menu-reskin .navbar-nav > .user-menu > .dropdown-menu > li.user-header p, body.menu-reskin .user-header p { color: var(--menu-text) !important; font-size: 15px !important; font-weight: 600 !important; margin: 0 !important; text-shadow: none !important; line-height: 1.4 !important; } /* Member since / Mandant text */ .menu-reskin .user-menu .user-header small, .menu-reskin .navbar-nav > .user-menu > .dropdown-menu > li.user-header small, body.menu-reskin .user-header small { color: var(--menu-text-muted) !important; font-size: 12px !important; display: block !important; margin-top: 5px !important; font-weight: 400 !important; } /* User footer - action buttons area */ .menu-reskin .user-menu .user-footer, .menu-reskin .navbar-nav > .user-menu > .dropdown-menu > li.user-footer, body.menu-reskin .user-footer { background: var(--menu-bg) !important; padding: 15px 20px !important; border-top: 1px solid var(--menu-border) !important; overflow: hidden !important; } /* Buttons in user footer */ .menu-reskin .user-menu .user-footer .btn, .menu-reskin .user-footer .btn, body.menu-reskin .user-footer .btn, body.menu-reskin .user-footer .btn-default, body.menu-reskin .user-footer .btn-flat { border: 1px solid var(--menu-border) !important; background: var(--menu-bg-card) !important; color: var(--menu-text) !important; border-radius: var(--menu-border-radius) !important; padding: 10px 18px !important; font-size: 13px !important; font-weight: 500 !important; transition: var(--menu-transition) !important; text-transform: none !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important; } .menu-reskin .user-menu .user-footer .btn:hover, .menu-reskin .user-footer .btn:hover, body.menu-reskin .user-footer .btn:hover { background: var(--menu-primary) !important; border-color: var(--menu-primary) !important; color: white !important; box-shadow: 0 2px 8px rgba(122, 162, 57, 0.3) !important; transform: translateY(-1px); } /* Profile button - primary style */ .menu-reskin .user-footer .pull-left .btn, body.menu-reskin .user-footer .pull-left .btn { background: var(--menu-primary) !important; border-color: var(--menu-primary) !important; color: white !important; } .menu-reskin .user-footer .pull-left .btn:hover, body.menu-reskin .user-footer .pull-left .btn:hover { background: var(--menu-primary-dark) !important; border-color: var(--menu-primary-dark) !important; } /* Sign out button - secondary style */ .menu-reskin .user-footer .pull-right .btn, body.menu-reskin .user-footer .pull-right .btn { background: var(--menu-bg-card) !important; border-color: var(--menu-border) !important; color: var(--menu-text) !important; } .menu-reskin .user-footer .pull-right .btn:hover, body.menu-reskin .user-footer .pull-right .btn:hover { background: var(--color-danger) !important; border-color: var(--color-danger) !important; color: white !important; } /* User menu dropdown toggle */ .menu-reskin .navbar-nav > .user-menu > a, .menu-reskin .user-menu > a.dropdown-toggle { padding: 10px 15px !important; display: flex !important; align-items: center !important; height: 50px !important; } .menu-reskin .navbar-nav > .user-menu > a > .glyphicon-user, .menu-reskin .user-menu > a > .glyphicon-user, .menu-reskin .user-menu > a > i { font-size: 14px !important; margin-right: 8px !important; color: var(--menu-text) !important; } .menu-reskin .user-menu > a:hover > .glyphicon-user, .menu-reskin .user-menu > a:hover > i { color: var(--menu-primary) !important; } .menu-reskin .navbar-nav > .user-menu > a > span, .menu-reskin .user-menu > a > span { font-weight: 500 !important; font-size: 13px !important; color: var(--menu-text) !important; } .menu-reskin .user-menu > a:hover > span { color: var(--menu-primary) !important; } .menu-reskin .navbar-nav > .user-menu > a .caret, .menu-reskin .user-menu > a .caret { margin-left: 6px !important; border-top-color: var(--menu-text) !important; } .menu-reskin .navbar-nav > .user-menu > a:hover .caret, .menu-reskin .user-menu > a:hover .caret { border-top-color: var(--menu-primary) !important; } /* PIN Change and Mandant forms in user menu */ .menu-reskin .user-footer form, body.menu-reskin .user-footer form { margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid var(--menu-border) !important; clear: both !important; } .menu-reskin .user-footer form:first-of-type { margin-top: 15px !important; } .menu-reskin .user-footer input.form-control, .menu-reskin .user-footer select.form-control, body.menu-reskin .user-footer input.form-control, body.menu-reskin .user-footer select.form-control { border: 1px solid var(--menu-border) !important; border-radius: var(--menu-border-radius) !important; padding: 8px 12px !important; font-size: 13px !important; height: auto !important; background: var(--menu-bg-card) !important; color: var(--menu-text) !important; transition: var(--menu-transition) !important; } .menu-reskin .user-footer input.form-control:focus, .menu-reskin .user-footer select.form-control:focus, body.menu-reskin .user-footer input.form-control:focus, body.menu-reskin .user-footer select.form-control:focus { border-color: var(--menu-primary) !important; box-shadow: 0 0 0 3px rgba(122, 162, 57, 0.15) !important; outline: none !important; } /* Clearfix helper */ .menu-reskin .user-footer .clearfix { clear: both !important; margin-bottom: 10px !important; } /* ========================================================================== Footer ========================================================================== */ .menu-reskin .main-footer { background: var(--menu-bg-card) !important; border-top: 1px solid var(--menu-border) !important; color: var(--menu-text-muted) !important; } .menu-reskin .main-footer a { color: var(--menu-primary) !important; } /* ========================================================================== Content Area ========================================================================== */ .menu-reskin .content-wrapper, .menu-reskin.skin-black .content-wrapper { background: var(--menu-bg-hover) !important; min-height: 100vh !important; } .menu-reskin .content-header { background: transparent !important; } .menu-reskin .content-header > h1 { color: var(--menu-text) !important; } /* ========================================================================== BREADCRUMBS - Modern Clean Design with Color Labels (like isearch) ========================================================================== */ .menu-reskin .breadcrumb { background: transparent !important; padding: 8px 0 !important; margin: 0 !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 13px !important; display: flex !important; align-items: center !important; flex-wrap: wrap !important; } .menu-reskin .breadcrumb > li { display: inline-flex !important; align-items: center !important; } /* Default breadcrumb links - no background */ .menu-reskin .breadcrumb > li > a, .menu-reskin .breadcrumb > li > span { text-decoration: none !important; padding: 4px 10px !important; border-radius: 4px !important; transition: all 0.2s ease !important; font-weight: 500 !important; border: none !important; color: var(--menu-text-muted) !important; background: transparent !important; } /* Hover state for links */ .menu-reskin .breadcrumb > li > a:hover { background: #f3f4f6 !important; color: var(--menu-text) !important; text-decoration: none !important; } /* Active/current page */ .menu-reskin .breadcrumb > .active, .menu-reskin .breadcrumb > .active > span { color: var(--menu-text) !important; font-weight: 600 !important; background: transparent !important; } /* Separator styling */ .menu-reskin .breadcrumb > li + li::before { content: "›" !important; color: #9ca3af !important; padding: 0 6px !important; font-size: 16px !important; font-weight: 400 !important; } /* Home icon styling */ .menu-reskin .breadcrumb > li:first-child > a { color: var(--color-primary) !important; } .menu-reskin .breadcrumb > li:first-child > a:hover { color: var(--color-primary-dark) !important; background: #f0fdf4 !important; } /* ========================================================================== BREADCRUMB COLOR LABELS - Styled like isearch (subtle background + left border) Actual classes from getLabelAsText(): "label label-success", "label label-warning", etc. ========================================================================== */ /* Success/Green - Pet names with success label */ .menu-reskin .breadcrumb > li > a.label-success { background: #f0fdf4 !important; color: #15803d !important; border-left: 3px solid var(--color-success) !important; padding-left: 8px !important; border-radius: 4px !important; } .menu-reskin .breadcrumb > li > a.label-success:hover { background: #dcfce7 !important; color: #166534 !important; } /* Warning/Orange - Warning states */ .menu-reskin .breadcrumb > li > a.label-warning { background: #fffbeb !important; color: #b45309 !important; border-left: 3px solid var(--color-warning) !important; padding-left: 8px !important; border-radius: 4px !important; } .menu-reskin .breadcrumb > li > a.label-warning:hover { background: #fef3c7 !important; color: #92400e !important; } /* Danger/Red - Danger states, bad payer */ .menu-reskin .breadcrumb > li > a.label-danger { background: #fef2f2 !important; color: #b91c1c !important; border-left: 3px solid var(--color-danger) !important; padding-left: 8px !important; border-radius: 4px !important; } .menu-reskin .breadcrumb > li > a.label-danger:hover { background: #fee2e2 !important; color: #991b1b !important; } /* Info/Light Blue - Info states */ .menu-reskin .breadcrumb > li > a.label-info { background: #ecfeff !important; color: var(--color-info-dark) !important; border-left: 3px solid var(--color-info) !important; padding-left: 8px !important; border-radius: 4px !important; } .menu-reskin .breadcrumb > li > a.label-info:hover { background: #cffafe !important; color: #0e7490 !important; } /* Primary/Blue - Primary label */ .menu-reskin .breadcrumb > li > a.label-primary { background: #eff6ff !important; color: #1d4ed8 !important; border-left: 3px solid var(--color-secondary) !important; padding-left: 8px !important; border-radius: 4px !important; } .menu-reskin .breadcrumb > li > a.label-primary:hover { background: #dbeafe !important; color: #1e40af !important; } /* ========================================================================== Responsive Adjustments ========================================================================== */ @media (max-width: 767px) { .menu-reskin .sidebar-menu > li { margin: 1px 6px !important; } .menu-reskin .sidebar-menu > li > a { padding: 12px 10px !important; } } /* ========================================================================== DASHBOARD - Modern Box Styling ========================================================================== */ /* Main box container - applies to all AdminLTE boxes */ .menu-reskin .box { border-radius: 12px !important; border: none !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important; background: var(--menu-bg-card) !important; margin-bottom: 20px !important; overflow: visible !important; transition: var(--menu-transition) !important; position: relative !important; } .menu-reskin .box:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important; transform: translateY(-1px); } /* Box header styling */ .menu-reskin .box-header { background: var(--menu-bg-card) !important; border-bottom: 1px solid var(--menu-border) !important; padding: 15px 20px 15px 25px !important; position: relative !important; border-radius: 12px 12px 0 0 !important; } /* Top accent bar removed - using left border accent instead */ /* Box titles */ .menu-reskin .box-title, .menu-reskin .box-header > h3.box-title { font-size: 15px !important; font-weight: 600 !important; color: var(--menu-text) !important; margin: 0 !important; line-height: 1.4 !important; } /* Box header with border - remove old border styles */ .menu-reskin .box-header.with-border { border-bottom: 1px solid var(--menu-border) !important; } /* Box tools (collapse, close buttons) */ .menu-reskin .box-tools { position: absolute !important; right: 15px !important; top: 50% !important; transform: translateY(-50%) !important; } .menu-reskin .box-tools .btn-box-tool, .menu-reskin .btn-box-tool { color: var(--menu-text-muted) !important; background: transparent !important; border: none !important; padding: 5px 8px !important; border-radius: 4px !important; transition: var(--menu-transition) !important; } .menu-reskin .box-tools .btn-box-tool:hover, .menu-reskin .btn-box-tool:hover { color: var(--menu-primary) !important; background: var(--menu-bg-hover) !important; } /* Box body */ .menu-reskin .box-body { padding: 20px 20px 20px 25px !important; background: var(--menu-bg-card) !important; } /* Box without header - round top corners of body */ .menu-reskin .box > .box-body:first-child { border-radius: 12px 12px 0 0 !important; } /* Box footer */ .menu-reskin .box-footer { padding: 12px 20px 12px 25px !important; background: var(--menu-bg) !important; border-top: 1px solid var(--menu-border) !important; border-radius: 0 0 12px 12px !important; } /* ========================================================================== DASHBOARD - Box Color Variants with Top Border Accent ========================================================================== */ /* Top accent bar - thin colored line at top */ .menu-reskin .box::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--menu-primary); border-radius: 12px 12px 0 0; z-index: 1; } /* Primary box - VET7well green */ .menu-reskin .box-primary::before { background: linear-gradient(90deg, var(--menu-primary) 0%, var(--menu-primary-light) 100%); } /* Info box (aqua/cyan) */ .menu-reskin .box-info::before { background: linear-gradient(90deg, var(--color-info) 0%, var(--color-info-light) 100%); } /* Success box (green) */ .menu-reskin .box-success::before { background: linear-gradient(90deg, var(--color-success) 0%, var(--color-success-light) 100%); } /* Warning box (yellow/orange) */ .menu-reskin .box-warning::before { background: linear-gradient(90deg, var(--color-warning) 0%, var(--color-warning-light) 100%); } /* Danger box (red) */ .menu-reskin .box-danger::before { background: linear-gradient(90deg, var(--color-danger) 0%, var(--color-danger-light) 100%); } /* Default box without specific color - use VET7well green gradient */ .menu-reskin .box-default::before, .menu-reskin .box:not(.box-primary):not(.box-info):not(.box-success):not(.box-warning):not(.box-danger)::before { background: linear-gradient(90deg, var(--menu-primary) 0%, var(--menu-primary-light) 50%, var(--menu-gray-light) 100%); } /* Solid variant boxes - keep accent bar but white header */ .menu-reskin .box-solid > .box-header { background: var(--menu-bg-card) !important; color: var(--menu-text) !important; } .menu-reskin .box-solid > .box-header > .box-title { color: var(--menu-text) !important; } /* ========================================================================== DASHBOARD - Small Box Widgets (Stats) ========================================================================== */ .menu-reskin .small-box { border-radius: 10px !important; overflow: hidden !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important; transition: var(--menu-transition) !important; position: relative !important; margin-bottom: 20px !important; } .menu-reskin .small-box:hover { transform: translateY(-3px) !important; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12) !important; } /* Small box backgrounds - modern gradients */ .menu-reskin .small-box.bg-aqua, .menu-reskin .small-box.bg-teal { background: var(--color-info-gradient) !important; } .menu-reskin .small-box.bg-green { background: linear-gradient(135deg, var(--menu-primary) 0%, var(--menu-primary-dark) 100%) !important; } .menu-reskin .small-box.bg-yellow, .menu-reskin .small-box.bg-orange { background: var(--color-warning-gradient) !important; } .menu-reskin .small-box.bg-red { background: var(--color-danger-gradient) !important; } .menu-reskin .small-box.bg-blue, .menu-reskin .small-box.bg-primary { background: var(--color-secondary-gradient) !important; } .menu-reskin .small-box.bg-purple { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important; } /* Small box inner content */ .menu-reskin .small-box > .inner { padding: 15px 15px 10px !important; } .menu-reskin .small-box > .inner h3 { font-size: 32px !important; font-weight: 700 !important; margin: 0 0 5px 0 !important; color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,0.15) !important; } .menu-reskin .small-box > .inner p { font-size: 13px !important; margin: 0 !important; color: rgba(255, 255, 255, 0.9) !important; font-weight: 500 !important; } /* Small box icon */ .menu-reskin .small-box > .icon { position: absolute !important; top: 0 !important; right: 0 !important; font-size: 65px !important; color: rgba(255, 255, 255, 0.2) !important; padding: 10px 15px !important; transition: var(--menu-transition) !important; } .menu-reskin .small-box:hover > .icon { font-size: 70px !important; color: rgba(255, 255, 255, 0.3) !important; } /* Small box footer/link */ .menu-reskin .small-box > .small-box-footer { background: rgba(0, 0, 0, 0.15) !important; color: rgba(255, 255, 255, 0.95) !important; padding: 8px 15px !important; display: block !important; text-decoration: none !important; font-size: 13px !important; font-weight: 500 !important; transition: var(--menu-transition) !important; } .menu-reskin .small-box > .small-box-footer:hover { background: rgba(0, 0, 0, 0.25) !important; color: #fff !important; } /* ========================================================================== DASHBOARD - Info Box Widgets ========================================================================== */ .menu-reskin .info-box { border-radius: 10px !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important; background: var(--menu-bg-card) !important; margin-bottom: 20px !important; min-height: 90px !important; transition: var(--menu-transition) !important; overflow: hidden !important; } .menu-reskin .info-box:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important; } .menu-reskin .info-box-icon { border-radius: 10px 0 0 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 36px !important; width: 80px !important; } /* Info box icon colors */ .menu-reskin .info-box-icon.bg-aqua { background: var(--color-info-gradient) !important; } .menu-reskin .info-box-icon.bg-green { background: linear-gradient(135deg, var(--menu-primary) 0%, var(--menu-primary-dark) 100%) !important; } .menu-reskin .info-box-icon.bg-yellow { background: var(--color-warning-gradient) !important; } .menu-reskin .info-box-icon.bg-red { background: var(--color-danger-gradient) !important; } .menu-reskin .info-box-content { padding: 15px 15px !important; } .menu-reskin .info-box-text { color: var(--menu-text-muted) !important; font-size: 13px !important; font-weight: 500 !important; text-transform: none !important; } .menu-reskin .info-box-number { color: var(--menu-text) !important; font-size: 22px !important; font-weight: 700 !important; } /* ========================================================================== DASHBOARD - Tables in Boxes ========================================================================== */ .menu-reskin .box-body .table { margin-bottom: 0 !important; } .menu-reskin .box-body .table > thead > tr > th { border-bottom: 2px solid var(--menu-border) !important; color: var(--menu-text) !important; font-weight: 600 !important; font-size: 13px !important; padding: 12px 15px !important; background: var(--menu-bg) !important; } .menu-reskin .box-body .table > tbody > tr > td { border-top: 1px solid var(--menu-border-light) !important; padding: 12px 15px !important; color: var(--menu-text) !important; font-size: 13px !important; vertical-align: middle !important; } .menu-reskin .box-body .table > tbody > tr:hover > td { background: var(--menu-bg-hover) !important; } /* Table striped variant */ .menu-reskin .box-body .table-striped > tbody > tr:nth-of-type(odd) { background: var(--menu-bg) !important; } .menu-reskin .box-body .table-striped > tbody > tr:nth-of-type(even) { background: var(--menu-bg-card) !important; } /* Table bordered variant */ .menu-reskin .box-body .table-bordered { border: 1px solid var(--menu-border) !important; } .menu-reskin .box-body .table-bordered > thead > tr > th, .menu-reskin .box-body .table-bordered > tbody > tr > td { border: 1px solid var(--menu-border-light) !important; } /* Summary tables - specific styling */ .menu-reskin .summary-table > thead > tr > th, .menu-reskin .summary-table > tbody > tr > th { background: var(--menu-bg) !important; font-weight: 600 !important; } /* ========================================================================== DASHBOARD - Short Overview Widget ========================================================================== */ .menu-reskin #short-overview { padding: 0 !important; } /* Short overview table - 4 columns */ .menu-reskin .short-overview-table { width: 100% !important; border-collapse: collapse !important; table-layout: fixed !important; } .menu-reskin .short-overview-table td { padding: 7px 8px !important; border-bottom: 1px solid var(--menu-border-light) !important; font-size: 12px !important; vertical-align: middle !important; } .menu-reskin .short-overview-table tr:last-child td { border-bottom: none !important; } .menu-reskin .short-overview-table tr:hover td { background: var(--menu-bg-hover) !important; } /* Label columns (1st and 3rd) */ .menu-reskin .short-overview-table td:nth-child(1), .menu-reskin .short-overview-table td:nth-child(3) { width: 40% !important; } .menu-reskin .short-overview-table td:nth-child(1) a, .menu-reskin .short-overview-table td:nth-child(3) a { color: var(--menu-text) !important; text-decoration: none !important; font-weight: 500 !important; transition: var(--menu-transition) !important; } .menu-reskin .short-overview-table td:nth-child(1) a:hover, .menu-reskin .short-overview-table td:nth-child(3) a:hover { color: var(--menu-primary) !important; } /* Number columns */ .menu-reskin .short-overview-table .so-number { text-align: right !important; width: 10% !important; min-width: 45px !important; } /* Add separator between left and right sections */ .menu-reskin .short-overview-table td:nth-child(3) { border-left: 1px solid var(--menu-border-light) !important; padding-left: 12px !important; } .menu-reskin .short-overview-table .so-number a { color: var(--menu-primary) !important; font-weight: 600 !important; text-decoration: none !important; font-size: 13px !important; } .menu-reskin .short-overview-table .so-number a:hover { text-decoration: underline !important; } /* ========================================================================== DASHBOARD - Progress Bars in Boxes ========================================================================== */ .menu-reskin .progress { background: var(--menu-bg) !important; border-radius: 20px !important; height: 8px !important; overflow: hidden !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important; } .menu-reskin .progress-bar { border-radius: 20px !important; transition: width 0.4s ease !important; } .menu-reskin .progress-bar-success, .menu-reskin .progress-bar-green { background: linear-gradient(90deg, var(--menu-primary) 0%, var(--menu-primary-light) 100%) !important; } .menu-reskin .progress-bar-info, .menu-reskin .progress-bar-aqua { background: linear-gradient(90deg, var(--color-info) 0%, var(--color-info-light) 100%) !important; } .menu-reskin .progress-bar-warning, .menu-reskin .progress-bar-yellow { background: linear-gradient(90deg, var(--color-warning) 0%, var(--color-warning-light) 100%) !important; } .menu-reskin .progress-bar-danger, .menu-reskin .progress-bar-red { background: linear-gradient(90deg, var(--color-danger) 0%, var(--color-danger-light) 100%) !important; } /* ========================================================================== DASHBOARD - Collapsed Box State ========================================================================== */ .menu-reskin .box.collapsed-box > .box-body, .menu-reskin .box.collapsed-box > .box-footer { display: none !important; } .menu-reskin .box.collapsed-box > .box-header { border-bottom: none !important; } /* ========================================================================== DASHBOARD - Box Loading State ========================================================================== */ .menu-reskin .box > .overlay, .menu-reskin .box > .loading-img { background: rgba(255, 255, 255, 0.85) !important; border-radius: 10px !important; } .menu-reskin .box > .overlay > .fa { color: var(--menu-primary) !important; } /* ========================================================================== DASHBOARD - Direct Children Links (like in shortoverview) ========================================================================== */ .menu-reskin .box-body > a { color: var(--menu-text) !important; transition: var(--menu-transition) !important; } .menu-reskin .box-body > a:hover { color: var(--menu-primary) !important; } /* Dashboard wrapper */ .menu-reskin .dashboard { padding: 10px 0 !important; } /* ========================================================================== DASHBOARD - Form Styling (MedLog, etc.) ========================================================================== */ /* Form container in boxes */ .menu-reskin .box-body form, .menu-reskin .medlog-form { padding: 0 !important; } /* Form groups - consistent spacing */ .menu-reskin .box-body .form-group { margin-bottom: 18px !important; } /* Labels - modern styling */ .menu-reskin .box-body .control-label, .menu-reskin .box-body label { font-size: 13px !important; font-weight: 600 !important; color: var(--menu-text) !important; margin-bottom: 6px !important; } /* Text inputs, selects, textareas */ .menu-reskin .box-body .form-control { border: 1px solid var(--menu-border) !important; border-radius: var(--menu-border-radius) !important; padding: 10px 12px !important; font-size: 14px !important; color: var(--menu-text) !important; background: var(--menu-bg-card) !important; transition: var(--menu-transition) !important; height: auto !important; box-shadow: none !important; } .menu-reskin .box-body .form-control:focus { border-color: var(--menu-primary) !important; box-shadow: 0 0 0 3px rgba(122, 162, 57, 0.15) !important; outline: none !important; } .menu-reskin .box-body .form-control::placeholder { color: var(--menu-text-muted) !important; opacity: 0.7 !important; } /* Select dropdown styling */ .menu-reskin .box-body select.form-control { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important; background-position: right 10px center !important; background-repeat: no-repeat !important; background-size: 20px !important; padding-right: 40px !important; } /* Date and time inputs */ .menu-reskin .box-body input[type="date"], .menu-reskin .box-body input[type="time"], .menu-reskin .box-body input[type="datetime-local"] { padding: 8px 12px !important; } /* Number inputs */ .menu-reskin .box-body input[type="number"] { -moz-appearance: textfield !important; } .menu-reskin .box-body input[type="number"]::-webkit-outer-spin-button, .menu-reskin .box-body input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } /* Submit buttons in dashboard forms ONLY (medlog-form, etc.) Using specific form classes to avoid affecting action buttons elsewhere */ .menu-reskin .dashboard .box-body form .btn-success, .menu-reskin .medlog-form .btn-success { background: linear-gradient(135deg, var(--menu-primary) 0%, var(--menu-primary-dark) 100%) !important; border: none !important; border-radius: var(--menu-border-radius) !important; padding: 10px 24px !important; font-size: 14px !important; font-weight: 600 !important; color: #fff !important; transition: var(--menu-transition) !important; box-shadow: 0 2px 8px rgba(122, 162, 57, 0.3) !important; } .menu-reskin .dashboard .box-body form .btn-success:hover, .menu-reskin .medlog-form .btn-success:hover { background: linear-gradient(135deg, var(--menu-primary-light) 0%, var(--menu-primary) 100%) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(122, 162, 57, 0.4) !important; } /* Help text */ .menu-reskin .box-body .help-block { font-size: 12px !important; color: var(--menu-text-muted) !important; margin-top: 4px !important; } /* Error state */ .menu-reskin .box-body .has-error .form-control { border-color: var(--color-danger) !important; } .menu-reskin .box-body .has-error .help-block { color: var(--color-danger) !important; } /* Success state */ .menu-reskin .box-body .has-success .form-control { border-color: var(--menu-primary) !important; } /* Input groups */ .menu-reskin .box-body .input-group { border-radius: var(--menu-border-radius) !important; } .menu-reskin .box-body .input-group-addon { background: var(--menu-bg) !important; border: 1px solid var(--menu-border) !important; border-radius: var(--menu-border-radius) 0 0 var(--menu-border-radius) !important; color: var(--menu-text-muted) !important; padding: 10px 12px !important; } .menu-reskin .box-body .input-group .form-control { border-radius: 0 var(--menu-border-radius) var(--menu-border-radius) 0 !important; } /* Checkbox and radio */ .menu-reskin .box-body .checkbox label, .menu-reskin .box-body .radio label { font-weight: 400 !important; padding-left: 8px !important; } .menu-reskin .box-body input[type="checkbox"], .menu-reskin .box-body input[type="radio"] { accent-color: var(--menu-primary) !important; width: 16px !important; height: 16px !important; } /* ========================================================================== DASHBOARD - Activity Reports / Open Treatments Table ========================================================================== */ /* Modern table styling for dashboard summary tables */ .menu-reskin .dashboard .summary-table { border-collapse: separate !important; border-spacing: 0 !important; border: none !important; margin: 0 !important; } .menu-reskin .dashboard .summary-table > tbody > tr > th { background: var(--menu-bg) !important; border: none !important; border-bottom: 2px solid var(--menu-border) !important; font-family: var(--menu-font-heading) !important; font-size: 12px !important; font-weight: 600 !important; color: var(--menu-text-muted) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 10px 15px !important; } .menu-reskin .dashboard .summary-table > tbody > tr > td { border: none !important; border-bottom: 1px solid var(--menu-border-light) !important; padding: 12px 15px !important; font-size: 13px !important; color: var(--menu-text) !important; vertical-align: middle !important; background: var(--menu-bg-card) !important; } .menu-reskin .dashboard .summary-table > tbody > tr:last-child > td { border-bottom: none !important; } .menu-reskin .dashboard .summary-table > tbody > tr:hover > td { background: var(--menu-bg-hover) !important; } /* Nr. column - smaller width */ .menu-reskin .dashboard .summary-table > tbody > tr > td:first-child, .menu-reskin .dashboard .summary-table > tbody > tr > th:first-child { width: 50px !important; text-align: center !important; color: var(--menu-text-muted) !important; font-weight: 500 !important; } /* Date Pills - Fixed width for consistent appearance */ .menu-reskin .dashboard .summary-table .btn-sm.btn-info { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 130px !important; padding: 6px 12px !important; background: var(--color-info-gradient) !important; border: none !important; border-radius: 20px !important; font-family: var(--menu-font-body) !important; font-size: 12px !important; font-weight: 500 !important; color: #fff !important; text-decoration: none !important; transition: var(--menu-transition) !important; box-shadow: 0 2px 6px rgba(6, 182, 212, 0.3) !important; white-space: nowrap !important; } .menu-reskin .dashboard .summary-table .btn-sm.btn-info:hover { background: linear-gradient(135deg, var(--color-info-light) 0%, var(--color-info) 100%) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 10px rgba(6, 182, 212, 0.4) !important; text-decoration: none !important; color: #fff !important; } /* Customer name styling */ .menu-reskin .dashboard .summary-table > tbody > tr > td:nth-child(3) { font-weight: 500 !important; } /* Pet name styling */ .menu-reskin .dashboard .summary-table > tbody > tr > td:nth-child(4) { color: var(--menu-text-muted) !important; } /* ========================================================================== DASHBOARD - Appointments Action Buttons (View, Done, Treatment) ========================================================================== */ /* Base styling for all action buttons in dashboard tables */ .menu-reskin .dashboard .summary-table .btn-sm.btn-success, .menu-reskin .dashboard .summary-table .btn-sm.btn-warning { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; min-width: 34px !important; padding: 0 !important; border: none !important; border-radius: 6px !important; font-size: 14px !important; color: #fff !important; text-decoration: none !important; transition: all 0.2s ease !important; } /* Override the pill style for action buttons - make them square */ .menu-reskin .dashboard .summary-table td[style*="text-align: center"] .btn-sm.btn-info { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; min-width: 34px !important; padding: 0 !important; border-radius: 6px !important; background: var(--color-secondary-gradient) !important; box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3) !important; } .menu-reskin .dashboard .summary-table td[style*="text-align: center"] .btn-sm.btn-info:hover { background: linear-gradient(135deg, var(--color-secondary-light) 0%, var(--color-secondary) 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4) !important; } /* Done button (green checkmark) */ .menu-reskin .dashboard .summary-table .btn-sm.btn-success { background: var(--color-success-gradient) !important; box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3) !important; } .menu-reskin .dashboard .summary-table .btn-sm.btn-success:hover { background: linear-gradient(135deg, var(--color-success-light) 0%, var(--color-success) 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 10px rgba(34, 197, 94, 0.4) !important; color: #fff !important; text-decoration: none !important; } /* Treatment button (orange doctor) */ .menu-reskin .dashboard .summary-table .btn-sm.btn-warning { background: var(--color-warning-gradient) !important; box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3) !important; } .menu-reskin .dashboard .summary-table .btn-sm.btn-warning:hover { background: linear-gradient(135deg, var(--color-warning-light) 0%, var(--color-warning) 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 10px rgba(245, 158, 11, 0.4) !important; color: #fff !important; text-decoration: none !important; } /* Make the action columns narrower */ .menu-reskin .dashboard .summary-table th[colspan="3"], .menu-reskin .dashboard .summary-table td:nth-last-child(-n+3) { width: 50px !important; padding: 8px 5px !important; } /* ========================================================================== DASHBOARD - Finance Table (like Short Overview) ========================================================================== */ .menu-reskin .dashboard .finance-table { width: 100% !important; border-collapse: collapse !important; } .menu-reskin .dashboard .finance-table tr { border-bottom: 1px solid var(--menu-border-light) !important; transition: var(--menu-transition) !important; } .menu-reskin .dashboard .finance-table tr:last-child { border-bottom: none !important; } .menu-reskin .dashboard .finance-table tr:hover { background: var(--menu-bg-hover) !important; } .menu-reskin .dashboard .finance-table td { padding: 12px 15px !important; vertical-align: middle !important; } .menu-reskin .dashboard .finance-table .finance-label { font-family: var(--menu-font-body) !important; font-size: 13px !important; font-weight: 500 !important; color: var(--menu-text) !important; } .menu-reskin .dashboard .finance-table .finance-value { text-align: right !important; font-family: var(--menu-font-heading) !important; font-size: 15px !important; font-weight: 600 !important; color: var(--menu-primary) !important; } /* ========================================================================== DASHBOARD - ToDos Box ========================================================================== */ /* ToDo header with create button */ .menu-reskin .dashboard .todo-header { padding: 0 0 15px 0 !important; margin-bottom: 15px !important; border-bottom: 1px solid var(--menu-border-light) !important; } .menu-reskin .dashboard .btn-todo-create { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 10px 20px !important; background: linear-gradient(135deg, var(--menu-primary) 0%, var(--menu-primary-dark) 100%) !important; color: #fff !important; border: none !important; border-radius: 6px !important; font-family: var(--menu-font-body) !important; font-size: 14px !important; font-weight: 500 !important; text-decoration: none !important; transition: var(--menu-transition) !important; box-shadow: 0 2px 8px rgba(122, 162, 57, 0.3) !important; } .menu-reskin .dashboard .btn-todo-create:hover { background: linear-gradient(135deg, var(--menu-primary-light) 0%, var(--menu-primary) 100%) !important; color: #fff !important; text-decoration: none !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(122, 162, 57, 0.4) !important; } /* ToDo Nr. cell - structured layout */ .menu-reskin .dashboard .summary-table td.todo-nr-cell { white-space: nowrap !important; text-align: center !important; width: 80px !important; } .menu-reskin .dashboard .summary-table .todo-nr { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; background: var(--menu-bg) !important; border-radius: 50% !important; font-size: 12px !important; font-weight: 600 !important; color: var(--menu-text-muted) !important; margin-right: 6px !important; } .menu-reskin .dashboard .summary-table .todo-type { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; background: #eff6ff !important; border-radius: 4px !important; margin-right: 6px !important; } .menu-reskin .dashboard .summary-table .todo-type i { font-size: 11px !important; color: var(--color-secondary) !important; } .menu-reskin .dashboard .summary-table .todo-edit { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; background: #fff7ed !important; border-radius: 4px !important; color: var(--color-warning) !important; text-decoration: none !important; transition: var(--menu-transition) !important; } .menu-reskin .dashboard .summary-table .todo-edit:hover { background: #ffedd5 !important; color: var(--color-warning-dark) !important; } .menu-reskin .dashboard .summary-table .todo-edit i { font-size: 11px !important; } /* ToDo type icons (fallback) */ .menu-reskin .dashboard .summary-table td .fa-user, .menu-reskin .dashboard .summary-table td .fa-users { color: var(--menu-text-muted) !important; font-size: 12px !important; margin-right: 4px !important; } /* Checkbox icons in assigned column */ .menu-reskin .dashboard .summary-table td .fa-square, .menu-reskin .dashboard .summary-table td .fa-check-square { color: var(--menu-text-muted) !important; margin-right: 6px !important; } .menu-reskin .dashboard .summary-table td .fa-check-square { color: var(--menu-primary) !important; } /* ========================================================================== DASHBOARD - Partner Actions Buttons ========================================================================== */ /* Action buttons container */ .menu-reskin .dashboard .summary-table td.action-buttons { white-space: nowrap !important; text-align: center !important; } /* Base style for all action buttons */ .menu-reskin .dashboard .summary-table .btn-action { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; margin: 0 2px !important; border: none !important; border-radius: 6px !important; font-size: 13px !important; color: #fff !important; text-decoration: none !important; transition: all 0.2s ease !important; vertical-align: middle !important; } .menu-reskin .dashboard .summary-table .btn-action:hover { transform: translateY(-2px) !important; text-decoration: none !important; color: #fff !important; } /* Comment button (blue) */ .menu-reskin .dashboard .summary-table .btn-action.btn-comment { background: var(--color-secondary-gradient) !important; box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3) !important; } .menu-reskin .dashboard .summary-table .btn-action.btn-comment:hover { background: linear-gradient(135deg, var(--color-secondary-light) 0%, var(--color-secondary) 100%) !important; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4) !important; } /* Done button (green) */ .menu-reskin .dashboard .summary-table .btn-action.btn-done { background: var(--color-success-gradient) !important; box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3) !important; } .menu-reskin .dashboard .summary-table .btn-action.btn-done:hover { background: linear-gradient(135deg, var(--color-success-light) 0%, var(--color-success) 100%) !important; box-shadow: 0 4px 10px rgba(34, 197, 94, 0.4) !important; } /* Edit button (orange) */ .menu-reskin .dashboard .summary-table .btn-action.btn-edit { background: var(--color-warning-gradient) !important; box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3) !important; } .menu-reskin .dashboard .summary-table .btn-action.btn-edit:hover { background: linear-gradient(135deg, var(--color-warning-light) 0%, var(--color-warning) 100%) !important; box-shadow: 0 4px 10px rgba(245, 158, 11, 0.4) !important; } /* View button (info blue) */ .menu-reskin .dashboard .summary-table .btn-action.btn-view { background: var(--color-info-gradient) !important; box-shadow: 0 2px 6px rgba(6, 182, 212, 0.3) !important; } .menu-reskin .dashboard .summary-table .btn-action.btn-view:hover { background: linear-gradient(135deg, var(--color-info-light) 0%, var(--color-info) 100%) !important; box-shadow: 0 4px 10px rgba(6, 182, 212, 0.4) !important; } /* ========================================================================== DASHBOARD - Referrals Scrollable Container ========================================================================== */ .menu-reskin .dashboard .referrals-scroll-container { overflow-x: auto; border-radius: 8px; border: 1px solid #e2e8f0; } /* Custom scrollbar styling */ .menu-reskin .dashboard .referrals-scroll-container::-webkit-scrollbar { width: 8px; height: 8px; } .menu-reskin .dashboard .referrals-scroll-container::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; } .menu-reskin .dashboard .referrals-scroll-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } .menu-reskin .dashboard .referrals-scroll-container::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Table inside scrollable container */ .menu-reskin .dashboard .referrals-scroll-container .summary-table { margin-bottom: 0 !important; border: none !important; } /* Compact table cells for referrals */ .menu-reskin .dashboard .referrals-scroll-container .summary-table td, .menu-reskin .dashboard .referrals-scroll-container .summary-table th { padding: 10px 12px !important; font-size: 13px !important; vertical-align: middle !important; } /* ========================================================================== MODERN ALERT MESSAGES ========================================================================== */ /* Base alert styling - applied globally when menu-reskin is on body */ body.menu-reskin .alert, .menu-reskin .alert, .menu-reskin .content .alert { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; padding: 14px 20px 14px 48px !important; margin-bottom: 20px !important; border: none !important; border-radius: 10px !important; border-left: 4px solid transparent !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; position: relative !important; } /* Alert icon styling - using pseudo element */ body.menu-reskin .alert::before, .menu-reskin .alert::before, .menu-reskin .content .alert::before { font-family: 'Font Awesome 5 Free', 'FontAwesome' !important; font-weight: 900 !important; font-size: 16px !important; position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%) !important; } /* Close button */ body.menu-reskin .alert .close, body.menu-reskin .alert button.close, .menu-reskin .alert .close, .menu-reskin .alert button.close { position: absolute !important; right: 16px !important; top: 50% !important; transform: translateY(-50%) !important; opacity: 0.6 !important; font-size: 20px !important; font-weight: 300 !important; line-height: 1 !important; color: inherit !important; text-shadow: none !important; transition: opacity 0.2s ease !important; padding: 0 !important; background: transparent !important; border: none !important; } body.menu-reskin .alert .close:hover, body.menu-reskin .alert button.close:hover, .menu-reskin .alert .close:hover, .menu-reskin .alert button.close:hover { opacity: 1 !important; } /* Success Alert (Green) */ body.menu-reskin .alert-success, .menu-reskin .alert-success { background: linear-gradient(135deg, rgba(122, 162, 57, 0.15) 0%, rgba(122, 162, 57, 0.08) 100%) !important; border-left-color: var(--color-primary) !important; color: #4a6b2d !important; } body.menu-reskin .alert-success::before, .menu-reskin .alert-success::before { content: '\f058' !important; /* fa-check-circle */ color: var(--color-primary) !important; } /* Info Alert (Blue) */ body.menu-reskin .alert-info, .menu-reskin .alert-info { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%) !important; border-left-color: var(--color-secondary) !important; color: #1e40af !important; } body.menu-reskin .alert-info::before, .menu-reskin .alert-info::before { content: '\f05a' !important; /* fa-info-circle */ color: var(--color-secondary) !important; } /* Warning Alert (Orange/Yellow) */ body.menu-reskin .alert-warning, .menu-reskin .alert-warning { background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%) !important; border-left-color: var(--color-warning) !important; color: #92400e !important; } body.menu-reskin .alert-warning::before, .menu-reskin .alert-warning::before { content: '\f071' !important; /* fa-exclamation-triangle */ color: var(--color-warning) !important; } /* Danger/Error Alert (Red) */ body.menu-reskin .alert-danger, body.menu-reskin .alert-error, .menu-reskin .alert-danger, .menu-reskin .alert-error { background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.08) 100%) !important; border-left-color: var(--color-danger) !important; color: #991b1b !important; } body.menu-reskin .alert-danger::before, body.menu-reskin .alert-error::before, .menu-reskin .alert-danger::before, .menu-reskin .alert-error::before { content: '\f057' !important; /* fa-times-circle */ color: var(--color-danger) !important; } /* Alert links */ body.menu-reskin .alert a, .menu-reskin .alert a { color: inherit !important; font-weight: 600 !important; text-decoration: underline !important; } body.menu-reskin .alert a:hover, .menu-reskin .alert a:hover { text-decoration: none !important; } /* If alert already has an icon, hide the pseudo-element and style the existing icon */ body.menu-reskin .alert:has(i.icon)::before, body.menu-reskin .alert:has(i.fa)::before, .menu-reskin .alert:has(i.icon)::before, .menu-reskin .alert:has(i.fa)::before { display: none !important; } /* Style existing icons in alerts */ body.menu-reskin .alert i.icon, body.menu-reskin .alert > i.fa, body.menu-reskin .alert > i.fas, body.menu-reskin .alert > i.far, .menu-reskin .alert i.icon, .menu-reskin .alert > i.fa, .menu-reskin .alert > i.fas, .menu-reskin .alert > i.far { position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 16px !important; margin: 0 !important; } /* Icon colors based on alert type */ body.menu-reskin .alert-info i.icon, body.menu-reskin .alert-info > i.fa, .menu-reskin .alert-info i.icon, .menu-reskin .alert-info > i.fa { color: var(--color-secondary) !important; } body.menu-reskin .alert-success i.icon, body.menu-reskin .alert-success > i.fa, .menu-reskin .alert-success i.icon, .menu-reskin .alert-success > i.fa { color: var(--color-primary) !important; } body.menu-reskin .alert-warning i.icon, body.menu-reskin .alert-warning > i.fa, .menu-reskin .alert-warning i.icon, .menu-reskin .alert-warning > i.fa { color: var(--color-warning) !important; } body.menu-reskin .alert-danger i.icon, body.menu-reskin .alert-danger > i.fa, .menu-reskin .alert-danger i.icon, .menu-reskin .alert-danger > i.fa { color: var(--color-danger) !important; } /* ========================================================================== CASE VIEW PAGE - Modern Redesign ========================================================================== */ /* Main case view container */ .menu-reskin .case-view { margin-bottom: 20px; } /* Case header tabs and detail view */ .menu-reskin .case-view .box { border: none !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; overflow: hidden; } .menu-reskin .case-view .nav-tabs { background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 0 15px; } .menu-reskin .case-view .nav-tabs > li > a { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 500; color: #6b7280; border: none !important; border-radius: 0 !important; padding: 14px 20px; margin: 0; transition: all 0.2s ease; } .menu-reskin .case-view .nav-tabs > li > a:hover { background: transparent; color: var(--color-primary); } .menu-reskin .case-view .nav-tabs > li.active > a, .menu-reskin .case-view .nav-tabs > li.active > a:hover, .menu-reskin .case-view .nav-tabs > li.active > a:focus { background: transparent !important; color: var(--color-primary) !important; border: none !important; border-bottom: 3px solid var(--color-primary) !important; margin-bottom: -1px; } /* DetailView panel styling - Modern clean header (replaces blue info header) */ /* Target panels inside TabsX content AND direct kv-detail-view */ /* Using high specificity to override Bootstrap panel-info blue styling */ body.menu-reskin .case-view .panel, body.menu-reskin .case-view .panel-info, body.menu-reskin .case-view .panel-primary, body.menu-reskin .case-view .tab-content .panel, body.menu-reskin .case-view .tab-content .panel-info, body.menu-reskin .case-view .tab-content .panel-primary, body.menu-reskin .case-view .col-sm-9 .panel, body.menu-reskin .case-view .col-sm-9 .panel-info, body.menu-reskin .case-view .col-sm-9 .panel-primary { border: 1px solid #e5e7eb !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; margin-bottom: 0; background: #fff !important; background-color: #fff !important; border-radius: 8px !important; overflow: hidden; } /* Override Bootstrap panel-info blue header - HIGH SPECIFICITY */ /* Compact header with green accent */ body.menu-reskin .case-view .panel-heading, body.menu-reskin .case-view .panel-info > .panel-heading, body.menu-reskin .case-view .panel-primary > .panel-heading, body.menu-reskin .case-view .tab-content .panel-heading, body.menu-reskin .case-view .tab-content .panel-info > .panel-heading, body.menu-reskin .case-view .tab-content .panel-primary > .panel-heading, body.menu-reskin .case-view .col-sm-9 .panel-heading, body.menu-reskin .case-view .col-sm-9 .panel-info > .panel-heading, body.menu-reskin .case-view .col-sm-9 .panel-primary > .panel-heading, body.menu-reskin .case-view .col-sm-9 .box .panel-heading, body.menu-reskin .case-view .col-sm-9 .box .panel-info > .panel-heading { background: var(--color-primary-gradient) !important; background-color: var(--color-primary) !important; background-image: var(--color-primary-gradient) !important; border: none !important; border-color: transparent !important; border-bottom: none !important; border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; padding: 10px 15px !important; color: #fff !important; min-height: auto !important; } body.menu-reskin .case-view .panel-heading .panel-title, body.menu-reskin .case-view .panel-info > .panel-heading .panel-title, body.menu-reskin .case-view .panel-primary > .panel-heading .panel-title, body.menu-reskin .case-view .tab-content .panel-heading .panel-title, body.menu-reskin .case-view .tab-content .panel-info > .panel-heading .panel-title, body.menu-reskin .case-view .tab-content .panel-primary > .panel-heading .panel-title, body.menu-reskin .case-view .col-sm-9 .panel-heading .panel-title, body.menu-reskin .case-view .col-sm-9 .box .panel-heading .panel-title { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; color: #fff !important; margin: 0 !important; padding: 0 !important; line-height: 1.4 !important; } /* Action buttons in header (edit, delete) - white on green background */ body.menu-reskin .case-view .panel-heading .kv-action-btn, body.menu-reskin .case-view .panel-heading .btn, body.menu-reskin .case-view .tab-content .panel-heading .kv-action-btn, body.menu-reskin .case-view .tab-content .panel-heading .btn, body.menu-reskin .case-view .col-sm-9 .panel-heading .kv-action-btn, body.menu-reskin .case-view .col-sm-9 .panel-heading .btn { background: rgba(255, 255, 255, 0.15) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; color: #fff !important; padding: 4px 8px !important; border-radius: 4px !important; transition: all 0.2s ease !important; font-size: 12px !important; } body.menu-reskin .case-view .panel-heading .kv-action-btn:hover, body.menu-reskin .case-view .panel-heading .btn:hover, body.menu-reskin .case-view .tab-content .panel-heading .kv-action-btn:hover, body.menu-reskin .case-view .tab-content .panel-heading .btn:hover, body.menu-reskin .case-view .col-sm-9 .panel-heading .kv-action-btn:hover, body.menu-reskin .case-view .col-sm-9 .panel-heading .btn:hover { background: rgba(255, 255, 255, 0.25) !important; border-color: rgba(255, 255, 255, 0.5) !important; color: #fff !important; } body.menu-reskin .case-view .panel-body, body.menu-reskin .case-view .tab-content .panel-body, body.menu-reskin .case-view .col-sm-9 .panel-body { padding: 0 !important; } /* DetailView table - COMPACT structured layout with consistent columns */ body.menu-reskin .case-view .kv-detail-view table, body.menu-reskin .case-view .tab-content .kv-detail-view table, body.menu-reskin .case-view .panel-body table { margin-bottom: 0 !important; width: 100%; border-collapse: collapse; table-layout: fixed; } body.menu-reskin .case-view .kv-detail-view table tr, body.menu-reskin .case-view .tab-content .kv-detail-view table tr, body.menu-reskin .case-view .panel-body table tr { border-bottom: 1px solid #e5e7eb; } body.menu-reskin .case-view .kv-detail-view table tr:last-child, body.menu-reskin .case-view .tab-content .kv-detail-view table tr:last-child, body.menu-reskin .case-view .panel-body table tr:last-child { border-bottom: none; } body.menu-reskin .case-view .kv-detail-view table th, body.menu-reskin .case-view .kv-detail-view table td, body.menu-reskin .case-view .tab-content .kv-detail-view table th, body.menu-reskin .case-view .tab-content .kv-detail-view table td, body.menu-reskin .case-view .panel-body table th, body.menu-reskin .case-view .panel-body table td { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 12px !important; padding: 6px 8px !important; border: none !important; border-right: 1px solid #e5e7eb !important; vertical-align: middle !important; line-height: 1.4 !important; overflow: hidden !important; text-overflow: ellipsis !important; } body.menu-reskin .case-view .kv-detail-view table th:last-child, body.menu-reskin .case-view .kv-detail-view table td:last-child, body.menu-reskin .case-view .tab-content .kv-detail-view table th:last-child, body.menu-reskin .case-view .tab-content .kv-detail-view table td:last-child, body.menu-reskin .case-view .panel-body table th:last-child, body.menu-reskin .case-view .panel-body table td:last-child { border-right: none !important; } /* Labels (th) - consistent width */ body.menu-reskin .case-view .kv-detail-view table th, body.menu-reskin .case-view .tab-content .kv-detail-view table th, body.menu-reskin .case-view .panel-body table th { background: #f3f4f6 !important; color: var(--menu-text-muted) !important; font-weight: 600 !important; white-space: nowrap !important; width: 12% !important; } /* Values (td) - fill remaining space */ body.menu-reskin .case-view .kv-detail-view table td, body.menu-reskin .case-view .tab-content .kv-detail-view table td, body.menu-reskin .case-view .panel-body table td { color: var(--menu-text-hover) !important; font-weight: 500; background: #fff !important; } /* Red text for (nicht gesetzt) - handles inline style */ body.menu-reskin .case-view .kv-detail-view table td[style*="color: red"], body.menu-reskin .case-view .kv-detail-view table td[style*="color:red"], body.menu-reskin .case-view .tab-content .kv-detail-view table td[style*="color: red"], body.menu-reskin .case-view .tab-content .kv-detail-view table td[style*="color:red"], body.menu-reskin .case-view .panel-body table td[style*="color: red"], body.menu-reskin .case-view .panel-body table td[style*="color:red"] { font-style: italic !important; color: var(--color-warning) !important; font-weight: 400 !important; font-size: 11px !important; } /* Alternating row backgrounds - subtle striping for readability */ body.menu-reskin .case-view .kv-detail-view table tr:nth-child(even), body.menu-reskin .case-view .tab-content .kv-detail-view table tr:nth-child(even), body.menu-reskin .case-view .panel-body table tr:nth-child(even) { background: #f9fafb !important; } body.menu-reskin .case-view .kv-detail-view table tr:nth-child(even) th, body.menu-reskin .case-view .tab-content .kv-detail-view table tr:nth-child(even) th, body.menu-reskin .case-view .panel-body table tr:nth-child(even) th { background: #e5e7eb !important; } body.menu-reskin .case-view .kv-detail-view table tr:nth-child(even) td, body.menu-reskin .case-view .tab-content .kv-detail-view table tr:nth-child(even) td, body.menu-reskin .case-view .panel-body table tr:nth-child(even) td { background: #f9fafb !important; } /* Cost badge styling - compact pill badges */ body.menu-reskin .case-view .btn.bg-olive, body.menu-reskin .case-view .btn.bg-orange, body.menu-reskin .case-view .btn.bg-maroon { font-weight: 600 !important; padding: 3px 10px !important; border-radius: 12px !important; font-size: 11px !important; line-height: 1.4 !important; } body.menu-reskin .case-view .btn.bg-olive { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important; color: #fff !important; } body.menu-reskin .case-view .btn.bg-orange { background: var(--color-warning-gradient) !important; color: #fff !important; } body.menu-reskin .case-view .btn.bg-maroon { background: var(--color-danger-gradient) !important; color: #fff !important; } /* ========================================================================== CASE VIEW - Right Sidebar (Actions & Filter) ========================================================================== */ .menu-reskin .case-view .col-sm-3 { padding-left: 10px; } .menu-reskin .case-view .case-create-item-form { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); margin-bottom: 15px; } .menu-reskin .case-view .case-create-item-form h4, .menu-reskin .case-view h4 { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; color: var(--menu-text) !important; margin: 0 0 15px 0 !important; padding-bottom: 10px; border-bottom: 2px solid var(--color-primary); } .menu-reskin .case-view .case-create-item-form .form-group { margin-bottom: 12px; } .menu-reskin .case-view .case-create-item-form label { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 12px; font-weight: 500; color: #6b7280; margin-bottom: 4px; } .menu-reskin .case-view .case-create-item-form .form-control { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; transition: all 0.2s ease; } .menu-reskin .case-view .case-create-item-form .form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(122, 162, 57, 0.1); } .menu-reskin .case-view .case-create-item-form .btn-success { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important; border: none !important; border-radius: 8px !important; padding: 10px 20px !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 13px !important; font-weight: 500 !important; transition: all 0.2s ease !important; box-shadow: 0 2px 6px rgba(122, 162, 57, 0.3) !important; } .menu-reskin .case-view .case-create-item-form .btn-success:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(122, 162, 57, 0.4) !important; } /* Native HTML Select dropdowns in Case View sidebar - wider width */ body.menu-reskin .case-view .col-sm-3 select.form-control, body.menu-reskin .case-view .case-create-item-form select.form-control { width: 100% !important; min-width: 0 !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 12px !important; padding: 8px 28px 8px 10px !important; border: 1px solid var(--menu-border) !important; border-radius: 6px !important; background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") no-repeat right 8px center !important; background-size: 16px !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; cursor: pointer !important; color: var(--menu-text) !important; line-height: 1.4 !important; } body.menu-reskin .case-view .col-sm-3 select.form-control:focus, body.menu-reskin .case-view .case-create-item-form select.form-control:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(122, 162, 57, 0.1) !important; outline: none !important; } /* Select2 dropdowns in Case View sidebar - fix text cutoff */ body.menu-reskin .case-view .col-sm-3 .select2-container, body.menu-reskin .case-view .case-create-item-form .select2-container { width: 100% !important; } body.menu-reskin .case-view .col-sm-3 .select2-container .select2-choice, body.menu-reskin .case-view .case-create-item-form .select2-container .select2-choice, body.menu-reskin .case-view .col-sm-3 .select2-container--default .select2-selection--single, body.menu-reskin .case-view .case-create-item-form .select2-container--default .select2-selection--single { height: auto !important; min-height: 38px !important; padding: 6px 10px !important; border: 1px solid var(--menu-border) !important; border-radius: 8px !important; background: #fff !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 13px !important; } body.menu-reskin .case-view .col-sm-3 .select2-container .select2-choice .select2-chosen, body.menu-reskin .case-view .case-create-item-form .select2-container .select2-choice .select2-chosen, body.menu-reskin .case-view .col-sm-3 .select2-container--default .select2-selection--single .select2-selection__rendered, body.menu-reskin .case-view .case-create-item-form .select2-container--default .select2-selection--single .select2-selection__rendered { white-space: normal !important; word-wrap: break-word !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.4 !important; padding-right: 20px !important; color: var(--menu-text) !important; } body.menu-reskin .case-view .col-sm-3 .select2-container .select2-choice .select2-arrow, body.menu-reskin .case-view .case-create-item-form .select2-container .select2-choice .select2-arrow, body.menu-reskin .case-view .col-sm-3 .select2-container--default .select2-selection--single .select2-selection__arrow, body.menu-reskin .case-view .case-create-item-form .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50% !important; transform: translateY(-50%) !important; right: 8px !important; height: auto !important; background: transparent !important; border: none !important; } body.menu-reskin .case-view .col-sm-3 .select2-container:focus .select2-choice, body.menu-reskin .case-view .case-create-item-form .select2-container:focus .select2-choice, body.menu-reskin .case-view .col-sm-3 .select2-container--default.select2-container--focus .select2-selection--single, body.menu-reskin .case-view .case-create-item-form .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(122, 162, 57, 0.1) !important; } /* ========================================================================== CASE ITEMS VIEW - Modern Timeline Redesign ========================================================================== */ .menu-reskin .case-items-view .box { border: none !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; overflow: hidden; } .menu-reskin .case-items-view .box-header { background: #fff !important; border-bottom: 1px solid #e2e8f0 !important; padding: 16px 20px !important; } .menu-reskin .case-items-view .box-header .box-title { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; color: var(--menu-text) !important; } .menu-reskin .case-items-view .box-header i.fa-warning { display: none; } .menu-reskin .case-items-view .box-body { padding: 20px !important; background: #f8fafc; } /* Timeline container */ .menu-reskin .case-items-view .timeline { list-style: none; padding: 0; margin: 0; position: relative; } /* Timeline vertical line */ .menu-reskin .case-items-view .timeline::before { content: ''; position: absolute; left: 18px; top: 0; bottom: 0; width: 2px; background: #e2e8f0; } /* Date label */ .menu-reskin .case-items-view .timeline > li.time-label { position: relative; margin-bottom: 15px; } .menu-reskin .case-items-view .timeline > li.time-label > span { display: inline-block; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important; color: #fff !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 20px; margin-left: 0; box-shadow: 0 2px 6px rgba(122, 162, 57, 0.3); } /* Timeline items */ .menu-reskin .case-items-view .timeline > li:not(.time-label) { position: relative; margin-bottom: 12px; margin-left: 45px; } /* Timeline icon */ .menu-reskin .case-items-view .timeline > li > i:first-child { position: absolute; left: -45px; top: 12px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; z-index: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } /* Icon colors */ .menu-reskin .case-items-view .timeline > li > i.bg-orange { background: var(--color-warning-gradient) !important; } .menu-reskin .case-items-view .timeline > li > i.bg-blue { background: var(--color-secondary-gradient) !important; } .menu-reskin .case-items-view .timeline > li > i.bg-green { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important; } .menu-reskin .case-items-view .timeline > li > i.bg-teal { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important; } .menu-reskin .case-items-view .timeline > li > i.bg-red { background: var(--color-danger-gradient) !important; } .menu-reskin .case-items-view .timeline > li > i.bg-purple { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important; } .menu-reskin .case-items-view .timeline > li > i.bg-yellow { background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%) !important; } .menu-reskin .case-items-view .timeline > li > i.bg-aqua { background: var(--color-info-gradient) !important; } /* Timeline item card */ .menu-reskin .case-items-view .timeline-item { background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); border: 1px solid #e2e8f0; overflow: hidden; transition: all 0.2s ease; } .menu-reskin .case-items-view .timeline-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transform: translateY(-1px); } /* Timeline time badge */ .menu-reskin .case-items-view .timeline-item > .time { position: absolute; right: 0; top: 0; padding: 10px 15px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 11px; color: #9ca3af; background: transparent; } .menu-reskin .case-items-view .timeline-item > .time i { margin-right: 4px; } /* Timeline header */ .menu-reskin .case-items-view .timeline-header { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; color: var(--color-primary) !important; padding: 12px 15px !important; margin: 0 !important; border-bottom: 1px solid #f1f5f9; background: #fafbfc; } .menu-reskin .case-items-view .timeline-header a { color: var(--color-primary) !important; text-decoration: none; } .menu-reskin .case-items-view .timeline-header a:hover { color: var(--color-primary-dark) !important; text-decoration: underline; } /* Timeline body - collapsible/compact */ .menu-reskin .case-items-view .timeline-body { padding: 12px 15px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; color: #4b5563; line-height: 1.5; max-height: 150px; overflow: hidden; position: relative; } .menu-reskin .case-items-view .timeline-body.expanded { max-height: none; } /* Fade out effect for long content */ .menu-reskin .case-items-view .timeline-body:not(.expanded)::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(transparent, #fff); pointer-events: none; } .menu-reskin .case-items-view .timeline-body strong { color: var(--menu-text); font-weight: 600; } .menu-reskin .case-items-view .timeline-body hr { border: none; border-top: 1px solid #f1f5f9; margin: 10px 0; } /* Timeline footer */ .menu-reskin .case-items-view .timeline-footer { padding: 10px 15px; background: #fafbfc; border-top: 1px solid #f1f5f9; } .menu-reskin .case-items-view .timeline-footer .btn { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; padding: 6px 14px !important; border-radius: 6px !important; transition: all 0.2s ease !important; } .menu-reskin .case-items-view .timeline-footer .btn-primary { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important; border: none !important; color: #fff !important; box-shadow: 0 2px 4px rgba(122, 162, 57, 0.3) !important; } .menu-reskin .case-items-view .timeline-footer .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(122, 162, 57, 0.4) !important; } /* Expand button for timeline items */ .menu-reskin .case-items-view .timeline-body-wrapper { position: relative; } .menu-reskin .case-items-view .btn-expand { display: none; position: absolute; bottom: 8px; right: 8px; width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: #fff; font-size: 12px; cursor: pointer; z-index: 2; box-shadow: 0 2px 6px rgba(122, 162, 57, 0.4); transition: all 0.2s ease; } .menu-reskin .case-items-view .btn-expand:hover { transform: scale(1.1); box-shadow: 0 4px 10px rgba(122, 162, 57, 0.5); } .menu-reskin .case-items-view .btn-expand i { transition: transform 0.3s ease; } .menu-reskin .case-items-view .timeline-body.expanded + .btn-expand i, .menu-reskin .case-items-view .btn-expand.expanded i { transform: rotate(180deg); } /* Show expand button only when content overflows */ .menu-reskin .case-items-view .timeline-body.has-overflow + .btn-expand, .menu-reskin .case-items-view .btn-expand.visible { display: flex; align-items: center; justify-content: center; } /* Hide fade gradient when expanded */ .menu-reskin .case-items-view .timeline-body.expanded::after { display: none; } /* Alternative: Expand button in footer for cleaner look */ .menu-reskin .case-items-view .timeline-footer .btn-expand-footer { background: transparent; border: 1px solid #e2e8f0; color: #6b7280; padding: 4px 12px; font-size: 11px; border-radius: 4px; margin-right: 8px; transition: all 0.2s ease; } .menu-reskin .case-items-view .timeline-footer .btn-expand-footer:hover { background: #f1f5f9; border-color: var(--color-primary); color: var(--color-primary); } .menu-reskin .case-items-view .timeline-footer .btn-expand-footer i { margin-right: 4px; transition: transform 0.3s ease; } .menu-reskin .case-items-view .timeline-footer .btn-expand-footer.expanded i { transform: rotate(180deg); } /* ========================================================================== WARD/STATION - Modern Cage Cards Design ========================================================================== */ /* Container for ward overview */ .menu-reskin .ward-show { padding: 10px 0; } .menu-reskin .ward-show .row { margin-bottom: 0; } /* Modern cage card - replaces info-box */ .menu-reskin .ward-show .info-box { min-height: auto !important; background: #fff !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; border: 1px solid var(--menu-border) !important; margin-bottom: 16px !important; overflow: hidden !important; transition: all 0.2s ease !important; display: flex !important; flex-direction: row !important; } .menu-reskin .ward-show .info-box:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; transform: translateY(-2px); border-color: var(--color-primary) !important; } /* Left sidebar with stats - Priority indicator */ .menu-reskin .ward-show .info-box-icon { width: 90px !important; min-height: 100px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; padding: 12px !important; border-radius: 11px 0 0 11px !important; font-size: 11px !important; line-height: 1.4 !important; } .menu-reskin .ward-show .info-box-icon .info-box-text { font-size: 11px !important; font-weight: 500 !important; color: rgba(255, 255, 255, 0.9) !important; text-align: left !important; padding: 0 !important; margin: 2px 0 !important; white-space: nowrap !important; } /* Content area */ .menu-reskin .ward-show .info-box-content { padding: 14px 16px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; flex: 1 !important; min-width: 0 !important; } .menu-reskin .ward-show .info-box-content .info-box-text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 11px !important; font-weight: 500 !important; color: var(--menu-text-muted) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-bottom: 4px !important; } .menu-reskin .ward-show .info-box-content .info-box-number { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; color: var(--menu-text-hover) !important; line-height: 1.3 !important; margin-bottom: 4px !important; } .menu-reskin .ward-show .info-box-content .info-box-number small { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; color: var(--menu-text-muted) !important; } .menu-reskin .ward-show .info-box-content .progress-description { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 11px !important; color: #9ca3af !important; margin-top: 4px !important; } /* Priority colors for left sidebar - FREE (green) */ .menu-reskin .ward-show .info-box.bg-green .info-box-icon { background: var(--color-success-gradient) !important; } .menu-reskin .ward-show .info-box.bg-green { border-left: 4px solid var(--color-success) !important; } .menu-reskin .ward-show .info-box.bg-green .info-box-content .info-box-number { color: #15803d !important; } /* Priority colors - OCCUPIED NORMAL (aqua/cyan) */ .menu-reskin .ward-show .info-box.bg-aqua .info-box-icon { background: var(--color-info-gradient) !important; } .menu-reskin .ward-show .info-box.bg-aqua { border-left: 4px solid var(--color-info) !important; } /* Priority colors - HIGH (orange) */ .menu-reskin .ward-show .info-box.bg-orange .info-box-icon { background: var(--color-warning-gradient) !important; } .menu-reskin .ward-show .info-box.bg-orange { border-left: 4px solid var(--color-warning) !important; } .menu-reskin .ward-show .info-box.bg-orange .info-box-content .info-box-number { color: #b45309 !important; } /* Priority colors - CRITICAL (red) */ .menu-reskin .ward-show .info-box.bg-red .info-box-icon { background: var(--color-danger-gradient) !important; } .menu-reskin .ward-show .info-box.bg-red { border-left: 4px solid var(--color-danger) !important; } .menu-reskin .ward-show .info-box.bg-red .info-box-content .info-box-number { color: #b91c1c !important; } /* Hover link styling */ .menu-reskin .ward-show a { text-decoration: none !important; } .menu-reskin .ward-show a:hover { text-decoration: none !important; } /* Column spacing */ .menu-reskin .ward-show .col-xs-4 { padding: 0 10px !important; } /* Responsive: 2 columns on smaller screens */ @media (max-width: 991px) { .menu-reskin .ward-show .col-xs-4 { width: 50% !important; } } /* Responsive: 1 column on mobile */ @media (max-width: 575px) { .menu-reskin .ward-show .col-xs-4 { width: 100% !important; } } /* Cage stats container in left sidebar */ .menu-reskin .ward-show .cage-stats { padding: 8px 0; } /* Card link styling - entire card clickable */ .menu-reskin .ward-show .cage-card-link { display: block; text-decoration: none !important; color: inherit !important; } .menu-reskin .ward-show .cage-card-link:hover { text-decoration: none !important; } .menu-reskin .ward-show .cage-card-link:hover .info-box { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important; transform: translateY(-3px); } /* Free cage cards - lighter hover */ .menu-reskin .ward-show .info-box.bg-green { opacity: 0.85; } .menu-reskin .ward-show .info-box.bg-green:hover { opacity: 1; } /* Priority badge styling for critical cases */ .menu-reskin .ward-show .info-box.bg-red .info-box-icon { animation: pulse-red 2s infinite; } @keyframes pulse-red { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } } /* ========================================================================== WARD/STATION - Detail View (view.php) ========================================================================== */ /* Main container */ .menu-reskin .ward-view { margin-bottom: 20px; } /* Pet info header panel */ .menu-reskin .ward-view .panel { border: none !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; overflow: hidden !important; margin-bottom: 16px !important; } .menu-reskin .ward-view .panel-heading { background: var(--color-info-gradient) !important; border: none !important; padding: 14px 18px !important; border-radius: 12px 12px 0 0 !important; } .menu-reskin .ward-view .panel-heading .panel-title, .menu-reskin .ward-view .panel-heading h3 { color: #fff !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.5 !important; } .menu-reskin .ward-view .panel-heading .panel-title span, .menu-reskin .ward-view .panel-heading span { color: rgba(255, 255, 255, 0.9) !important; } /* Edit button in header */ .menu-reskin .ward-view .panel-heading .btn, .menu-reskin .ward-view .panel-heading .kv-btn-default { background: rgba(255, 255, 255, 0.15) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; color: #fff !important; border-radius: 6px !important; padding: 4px 10px !important; font-size: 12px !important; } .menu-reskin .ward-view .panel-heading .btn:hover { background: rgba(255, 255, 255, 0.25) !important; } /* Panel body / detail table */ .menu-reskin .ward-view .panel-body { padding: 0 !important; background: #fff !important; } .menu-reskin .ward-view .panel-body table { margin: 0 !important; border: none !important; } .menu-reskin .ward-view .panel-body table th, .menu-reskin .ward-view .panel-body table td { border: none !important; border-bottom: 1px solid var(--menu-border-light) !important; padding: 10px 14px !important; vertical-align: middle !important; } .menu-reskin .ward-view .panel-body table th { background: var(--menu-bg) !important; font-size: 12px !important; font-weight: 500 !important; color: var(--menu-text-muted) !important; white-space: nowrap !important; width: 12% !important; } .menu-reskin .ward-view .panel-body table td { background: #fff !important; font-size: 13px !important; color: var(--menu-text) !important; } /* Priority badge in detail view */ .menu-reskin .ward-view .panel-body .btn { font-size: 12px !important; padding: 4px 12px !important; border-radius: 6px !important; font-weight: 500 !important; border: none !important; } /* Action buttons section */ .menu-reskin .ward-view + .ward-todos { margin-top: 0; } /* Top action buttons (Station verlassen, Offene Stationsleistungen) */ .menu-reskin .ward-view > .btn { border-radius: 8px !important; padding: 8px 16px !important; font-size: 13px !important; font-weight: 500 !important; margin-right: 8px !important; margin-bottom: 12px !important; border: none !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; transition: all 0.2s ease !important; } .menu-reskin .ward-view > .btn:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; } .menu-reskin .ward-view > .btn-danger { background: var(--color-danger-gradient) !important; } .menu-reskin .ward-view > .btn-warning { background: var(--color-warning-gradient) !important; color: #fff !important; } /* ========================================================================== WARD/STATION - Todos Section ========================================================================== */ .menu-reskin .ward-todos { padding: 0; } /* Quick action buttons row */ .menu-reskin .ward-todos > .btn { border-radius: 8px !important; padding: 10px 16px !important; font-size: 13px !important; font-weight: 500 !important; margin-right: 8px !important; margin-bottom: 16px !important; border: none !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; transition: all 0.2s ease !important; } .menu-reskin .ward-todos > .btn:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; } .menu-reskin .ward-todos > .btn-primary { background: var(--color-primary-gradient) !important; } /* TabsX container */ .menu-reskin .ward-todos .tabs-x { border: none !important; background: transparent !important; } .menu-reskin .ward-todos .tabs-x .nav-tabs { background: #fff !important; border: none !important; border-radius: 10px 10px 0 0 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important; padding: 8px 8px 0 !important; margin-bottom: 0 !important; } .menu-reskin .ward-todos .tabs-x .nav-tabs > li { margin-bottom: 0 !important; } .menu-reskin .ward-todos .tabs-x .nav-tabs > li > a { border: none !important; border-radius: 8px 8px 0 0 !important; padding: 10px 18px !important; font-size: 13px !important; font-weight: 500 !important; color: var(--menu-text-muted) !important; background: transparent !important; margin-right: 4px !important; transition: all 0.2s ease !important; } .menu-reskin .ward-todos .tabs-x .nav-tabs > li > a:hover { color: var(--color-primary) !important; background: var(--menu-bg) !important; } .menu-reskin .ward-todos .tabs-x .nav-tabs > li.active > a, .menu-reskin .ward-todos .tabs-x .nav-tabs > li.active > a:hover, .menu-reskin .ward-todos .tabs-x .nav-tabs > li.active > a:focus { color: var(--color-primary) !important; background: var(--menu-bg) !important; border-bottom: 3px solid var(--color-primary) !important; } .menu-reskin .ward-todos .tabs-x .nav-tabs > li > a i { margin-right: 6px !important; opacity: 0.7 !important; } .menu-reskin .ward-todos .tabs-x .nav-tabs > li.active > a i { opacity: 1 !important; } /* Tab content */ .menu-reskin .ward-todos .tabs-x .tab-content { background: #fff !important; border: none !important; border-radius: 0 0 10px 10px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important; padding: 0 !important; } .menu-reskin .ward-todos .tabs-x .tab-pane { padding: 16px !important; } /* ========================================================================== WARD/STATION - Todos Table ========================================================================== */ .menu-reskin .ward-todos .ward-todos table { border: none !important; border-radius: 8px !important; overflow: hidden !important; box-shadow: none !important; } .menu-reskin .ward-todos table.table { margin-bottom: 0 !important; } .menu-reskin .ward-todos table.table thead tr, .menu-reskin .ward-todos table.table > tbody > tr:first-child { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important; } .menu-reskin .ward-todos table.table th { border: none !important; border-bottom: 2px solid var(--menu-border) !important; padding: 12px 14px !important; font-size: 12px !important; font-weight: 600 !important; color: var(--menu-text-muted) !important; text-transform: uppercase !important; letter-spacing: 0.3px !important; background: transparent !important; } .menu-reskin .ward-todos table.table td { border: none !important; border-bottom: 1px solid var(--menu-border-light) !important; padding: 12px 14px !important; font-size: 13px !important; color: var(--menu-text) !important; vertical-align: middle !important; background: #fff !important; } .menu-reskin .ward-todos table.table tbody tr:hover td { background: var(--menu-bg) !important; } .menu-reskin .ward-todos table.table tbody tr:last-child td { border-bottom: none !important; } /* Action buttons in table */ .menu-reskin .ward-todos table .btn-sm { width: 30px !important; height: 30px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 6px !important; font-size: 12px !important; border: none !important; margin-left: 4px !important; transition: all 0.2s ease !important; } .menu-reskin .ward-todos table .btn-sm:first-child { margin-left: 0 !important; } .menu-reskin .ward-todos table .btn-success { background: var(--color-success) !important; color: #fff !important; } .menu-reskin .ward-todos table .btn-success:hover { background: var(--color-success-dark) !important; transform: translateY(-1px) !important; } .menu-reskin .ward-todos table .btn-primary { background: var(--color-secondary) !important; color: #fff !important; } .menu-reskin .ward-todos table .btn-primary:hover { background: var(--color-secondary-dark) !important; transform: translateY(-1px) !important; } .menu-reskin .ward-todos table .btn-danger { background: var(--color-danger) !important; color: #fff !important; } .menu-reskin .ward-todos table .btn-danger:hover { background: var(--color-danger-dark) !important; transform: translateY(-1px) !important; } /* ========================================================================== WARD/STATION - Short Treatment / Kurzbehandlung Table ========================================================================== */ .menu-reskin .ward-short-treat table.table th { font-size: 11px !important; padding: 10px 8px !important; text-align: center !important; } .menu-reskin .ward-short-treat table.table td { font-size: 12px !important; padding: 10px 8px !important; text-align: center !important; } /* Expandable row indicator */ .menu-reskin .ward-short-treat table.table tr[data-toggle="collapse"] { cursor: pointer !important; } .menu-reskin .ward-short-treat table.table tr[data-toggle="collapse"]:hover td { background: #f0fdf4 !important; } .menu-reskin .ward-short-treat table.table tr[data-toggle="collapse"] td:first-child i { color: var(--color-primary) !important; font-size: 14px !important; } /* Collapsed detail rows */ .menu-reskin .ward-short-treat table.table tr.collapse td, .menu-reskin .ward-short-treat table.table tr.collapse th { background: #fafafa !important; font-size: 11px !important; padding: 8px 10px !important; } .menu-reskin .ward-short-treat table.table tr.collapse.in td, .menu-reskin .ward-short-treat table.table tr.collapse.show td { background: var(--menu-bg) !important; } /* Total amount display */ .menu-reskin .ward-short-treat > div h4 { background: linear-gradient(135deg, var(--color-success-bg) 0%, #dcfce7 100%) !important; border-radius: 8px !important; padding: 12px 16px !important; font-size: 15px !important; font-weight: 600 !important; color: var(--color-success-text) !important; margin-top: 16px !important; border-left: 4px solid var(--color-success) !important; } .menu-reskin .ward-short-treat > div h4 small { font-size: 11px !important; color: var(--menu-text-muted) !important; font-weight: 400 !important; } /* ========================================================================== WARD/STATION - History Tab ========================================================================== */ /* History link at bottom */ .menu-reskin .ward-todos + a, .menu-reskin a[href*="history"] { display: inline-flex !important; align-items: center !important; color: var(--color-primary) !important; font-size: 13px !important; font-weight: 500 !important; padding: 10px 0 !important; margin-top: 8px !important; } .menu-reskin .ward-todos + a i, .menu-reskin a[href*="history"] i { margin-right: 6px !important; } .menu-reskin .ward-todos + a:hover, .menu-reskin a[href*="history"]:hover { color: var(--color-primary-dark) !important; text-decoration: none !important; } /* Zeige Historie link styling */ .menu-reskin .box-footer a { color: var(--color-primary) !important; font-weight: 500 !important; } .menu-reskin .box-footer a:hover { color: var(--color-primary-dark) !important; } /* ========================================================================== WAITINGROOM / WARTEZIMMER - Modern Reskin ========================================================================== */ /* Main container */ .menu-reskin .waitingroom { padding: 0; } /* Header Menu - Navigation Pills */ .menu-reskin .waitingroom .navbar { background: #fff !important; border: none !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; margin-bottom: 20px !important; min-height: auto !important; padding: 8px !important; } .menu-reskin .waitingroom .navbar-collapse { padding: 0 !important; } .menu-reskin .waitingroom .navbar-nav { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin: 0 !important; float: none !important; } .menu-reskin .waitingroom .navbar-nav > li { float: none !important; margin: 0 !important; } .menu-reskin .waitingroom .navbar-nav > li > a { background: #f3f4f6 !important; border: none !important; border-radius: 8px !important; color: #4b5563 !important; font-size: 13px !important; font-weight: 500 !important; padding: 10px 14px !important; margin: 0 !important; transition: all 0.2s ease !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; white-space: nowrap !important; line-height: 1.4 !important; } .menu-reskin .waitingroom .navbar-nav > li > a:hover { background: var(--color-primary-bg) !important; color: var(--color-primary) !important; } .menu-reskin .waitingroom .navbar-nav > li.active > a, .menu-reskin .waitingroom .navbar-nav > li.active > a:hover, .menu-reskin .waitingroom .navbar-nav > li.active > a:focus { background: var(--color-primary-gradient) !important; color: #fff !important; box-shadow: 0 2px 6px rgba(122, 162, 57, 0.3) !important; } .menu-reskin .waitingroom .navbar-nav > li > a > i { font-size: 14px !important; opacity: 0.85 !important; } .menu-reskin .waitingroom .navbar-nav > li.active > a > i { opacity: 1 !important; } /* Badge labels in nav */ .menu-reskin .waitingroom .navbar-nav > li > a .label { font-size: 10px !important; font-weight: 600 !important; padding: 3px 6px !important; border-radius: 10px !important; margin-left: 4px !important; } .menu-reskin .waitingroom .navbar-nav > li > a .label-warning { background: var(--color-warning) !important; } .menu-reskin .waitingroom .navbar-nav > li > a .label-success { background: var(--color-success) !important; } .menu-reskin .waitingroom .navbar-nav > li > a .label-info { background: var(--color-info) !important; } .menu-reskin .waitingroom .navbar-nav > li.active > a .label { background: rgba(255, 255, 255, 0.25) !important; color: #fff !important; } /* Dropdown menus in header */ .menu-reskin .waitingroom .navbar-nav > li.dropdown > a::after { display: none !important; } .menu-reskin .waitingroom .navbar-nav > li.dropdown > a .caret { margin-left: 4px; border-top-color: var(--menu-text) !important; } .menu-reskin .waitingroom .navbar-nav .dropdown-menu { border: none !important; border-radius: 10px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important; padding: 8px !important; margin-top: 4px !important; } .menu-reskin .waitingroom .navbar-nav .dropdown-menu > li > a { border-radius: 6px !important; padding: 8px 12px !important; font-size: 13px !important; color: #374151 !important; } .menu-reskin .waitingroom .navbar-nav .dropdown-menu > li > a:hover { background: var(--color-primary-bg) !important; color: var(--color-primary) !important; } /* New Patient Button */ .menu-reskin .waitingroom > p > .btn-success { background: var(--color-success-gradient) !important; border: none !important; border-radius: 10px !important; padding: 12px 20px !important; font-weight: 600 !important; font-size: 14px !important; box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3) !important; transition: all 0.2s ease !important; } .menu-reskin .waitingroom > p > .btn-success:hover { transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4) !important; } /* Box Cards - Modern Style */ .menu-reskin .waitingroom .box { background: #fff !important; border: none !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; margin-bottom: 20px !important; overflow: hidden !important; } .menu-reskin .waitingroom .box.box-success { border-top: none !important; } .menu-reskin .waitingroom .box-header { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important; border-bottom: 1px solid #e5e7eb !important; padding: 16px 20px !important; display: flex !important; align-items: center !important; gap: 12px !important; } .menu-reskin .waitingroom .box-header > i { font-size: 18px !important; color: var(--color-primary) !important; background: var(--color-primary-bg) !important; width: 36px !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; } .menu-reskin .waitingroom .box-header .box-title { font-size: 15px !important; font-weight: 600 !important; color: #1f2937 !important; margin: 0 !important; flex: 1 !important; } .menu-reskin .waitingroom .box-header .box-title .btn-sm { font-size: 12px !important; padding: 5px 12px !important; border-radius: 6px !important; margin-left: 10px !important; } .menu-reskin .waitingroom .box-header .box-title .btn-success { background: var(--color-success-gradient) !important; border: none !important; color: #fff !important; } .menu-reskin .waitingroom .box-body { padding: 0 !important; } /* Tables in Waitingroom */ .menu-reskin .waitingroom table.table { margin: 0 !important; border: none !important; } .menu-reskin .waitingroom table.table thead tr { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important; } .menu-reskin .waitingroom table.table thead th { border: none !important; border-bottom: 2px solid #e5e7eb !important; padding: 12px 16px !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: #6b7280 !important; white-space: nowrap !important; } .menu-reskin .waitingroom table.table tbody tr { border-bottom: 1px solid #f3f4f6 !important; transition: background 0.15s ease !important; } .menu-reskin .waitingroom table.table tbody tr:hover { background: #fafafa !important; } .menu-reskin .waitingroom table.table tbody td { padding: 12px 16px !important; font-size: 13px !important; color: #374151 !important; border: none !important; vertical-align: middle !important; } /* Room/Section Headers in Tables */ .menu-reskin .waitingroom table.table tbody tr td[colspan] h4, .menu-reskin .waitingroom table.table tbody tr td h4 { font-size: 13px !important; font-weight: 600 !important; color: #4b5563 !important; margin: 0 !important; padding: 8px 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; } .menu-reskin .waitingroom table.table tbody tr td[colspan] h4::before { content: ''; width: 4px; height: 20px; background: var(--color-primary); border-radius: 2px; } /* Buttons in Table Cells */ .menu-reskin .waitingroom table.table .btn-sm { padding: 4px 10px !important; font-size: 12px !important; border-radius: 6px !important; font-weight: 500 !important; border: none !important; margin: 1px !important; } .menu-reskin .waitingroom table.table .btn-info, .menu-reskin .waitingroom table.table a.btn-info, .menu-reskin .waitingroom table.table td a.btn-sm.btn-info { background: var(--color-info-gradient) !important; color: #fff !important; box-shadow: 0 2px 4px rgba(6, 182, 212, 0.3) !important; } .menu-reskin .waitingroom table.table .btn-info i, .menu-reskin .waitingroom table.table a.btn-info i { color: #fff !important; } .menu-reskin .waitingroom table.table .btn-info:hover, .menu-reskin .waitingroom table.table a.btn-info:hover { background: var(--color-info-dark) !important; box-shadow: 0 4px 8px rgba(6, 182, 212, 0.4) !important; } .menu-reskin .waitingroom table.table .btn-success, .menu-reskin .waitingroom table.table a.btn-success { background: var(--color-success-gradient) !important; color: #fff !important; box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3) !important; } .menu-reskin .waitingroom table.table .btn-success i, .menu-reskin .waitingroom table.table a.btn-success i { color: #fff !important; } .menu-reskin .waitingroom table.table .btn-success:hover, .menu-reskin .waitingroom table.table a.btn-success:hover { background: var(--color-success-dark) !important; box-shadow: 0 4px 8px rgba(34, 197, 94, 0.4) !important; } .menu-reskin .waitingroom table.table .btn-warning, .menu-reskin .waitingroom table.table a.btn-warning, .menu-reskin .waitingroom table.table td a.btn-sm.btn-warning { background: var(--color-warning-gradient) !important; color: #fff !important; box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3) !important; } .menu-reskin .waitingroom table.table .btn-warning i, .menu-reskin .waitingroom table.table a.btn-warning i { color: #fff !important; } .menu-reskin .waitingroom table.table .btn-warning:hover, .menu-reskin .waitingroom table.table a.btn-warning:hover { background: var(--color-warning-dark) !important; box-shadow: 0 4px 8px rgba(245, 158, 11, 0.4) !important; } /* Action icons in tables */ .menu-reskin .waitingroom table.table td > a:not(.btn) { color: #6b7280 !important; padding: 4px 6px !important; border-radius: 4px !important; transition: all 0.15s ease !important; display: inline-block !important; } .menu-reskin .waitingroom table.table td > a:not(.btn):hover { color: var(--color-primary) !important; background: var(--color-primary-bg) !important; } .menu-reskin .waitingroom table.table td > a:not(.btn) i { font-size: 14px !important; } /* Kiosk Table Specific */ .menu-reskin .waitingroom .kiosk-table td { vertical-align: middle !important; } /* Responsive adjustments */ @media (max-width: 991px) { .menu-reskin .waitingroom .navbar-nav { flex-direction: row !important; flex-wrap: wrap !important; } .menu-reskin .waitingroom .navbar-nav > li > a { font-size: 12px !important; padding: 8px 10px !important; } } @media (max-width: 575px) { .menu-reskin .waitingroom .navbar-nav > li > a > span:not(.label) { display: none !important; } .menu-reskin .waitingroom .navbar-nav > li > a > i { margin-right: 0 !important; } } /* Callbacks Table - Action Buttons */ .menu-reskin .call-back a.btn-sm, .menu-reskin .waitingroom .call-back a.btn-sm, .menu-reskin .waitingroom .box .call-back a.btn-sm { padding: 6px 12px !important; font-size: 12px !important; border-radius: 6px !important; font-weight: 500 !important; border: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; transition: all 0.2s ease !important; margin-bottom: 2px !important; } /* Callback buttons - Warning (Edit, Done) */ .menu-reskin .call-back a.btn-warning, .menu-reskin .waitingroom .call-back a.btn-warning, .menu-reskin .waitingroom .box .call-back a.btn-warning, .menu-reskin .waitingroom a.btn-sm.btn-warning { background: var(--color-warning-gradient) !important; color: #fff !important; box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3) !important; } .menu-reskin .call-back a.btn-warning:hover, .menu-reskin .waitingroom a.btn-sm.btn-warning:hover { box-shadow: 0 4px 8px rgba(245, 158, 11, 0.4) !important; transform: translateY(-1px) !important; } /* Callback buttons - Danger (Delete) */ .menu-reskin .call-back a.btn-danger, .menu-reskin .waitingroom .call-back a.btn-danger, .menu-reskin .waitingroom .box .call-back a.btn-danger, .menu-reskin .waitingroom a.btn-sm.btn-danger { background: var(--color-danger-gradient) !important; color: #fff !important; box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3) !important; } .menu-reskin .call-back a.btn-danger:hover, .menu-reskin .waitingroom a.btn-sm.btn-danger:hover { box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4) !important; transform: translateY(-1px) !important; } /* Callback buttons - Success (Create) */ .menu-reskin .call-back a.btn-success, .menu-reskin .waitingroom .call-back a.btn-success, .menu-reskin .waitingroom .box .call-back a.btn-success, .menu-reskin .waitingroom a.btn-sm.btn-success { background: var(--color-success-gradient) !important; color: #fff !important; box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3) !important; } .menu-reskin .call-back a.btn-success:hover, .menu-reskin .waitingroom a.btn-sm.btn-success:hover { box-shadow: 0 4px 8px rgba(34, 197, 94, 0.4) !important; transform: translateY(-1px) !important; } /* Callback edit button specific styling */ .menu-reskin .call-back .callback-edit-btn { margin-top: 6px !important; } /* Icon-only buttons in callback table (done/delete) - square shape */ .menu-reskin .call-back td > a.btn-sm:not(.callback-edit-btn) { width: 32px !important; height: 32px !important; padding: 0 !important; margin: 2px !important; } /* Force button colors with high specificity for callback table */ .menu-reskin .waitingroom .box.box-success .call-back table a.btn-sm.btn-warning, .menu-reskin .box.box-success .call-back table a.btn-sm.btn-warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; color: #fff !important; border: none !important; } .menu-reskin .waitingroom .box.box-success .call-back table a.btn-sm.btn-warning i, .menu-reskin .box.box-success .call-back table a.btn-sm.btn-warning i { color: #fff !important; } .menu-reskin .waitingroom .box.box-success .call-back table a.btn-sm.btn-danger, .menu-reskin .box.box-success .call-back table a.btn-sm.btn-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; color: #fff !important; border: none !important; } .menu-reskin .waitingroom .box.box-success .call-back table a.btn-sm.btn-danger i, .menu-reskin .box.box-success .call-back table a.btn-sm.btn-danger i { color: #fff !important; } /* ========================================================================== WAITINGROOM - Station/Ward Cage Cards ========================================================================== */ .menu-reskin .ward-show { padding: 10px 0; } .menu-reskin .ward-show .row { display: flex; flex-wrap: wrap; margin: 0 -10px; } .menu-reskin .ward-show .col-xs-4 { padding: 10px; width: 33.333%; } @media (max-width: 991px) { .menu-reskin .ward-show .col-xs-4 { width: 50%; } } @media (max-width: 575px) { .menu-reskin .ward-show .col-xs-4 { width: 100%; } } /* Cage Card Base */ .menu-reskin .ward-show .info-box { min-height: 120px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border: none; transition: all 0.2s ease; overflow: hidden; display: flex; position: relative; } .menu-reskin .ward-show a { text-decoration: none; color: inherit; } .menu-reskin .ward-show a:hover .info-box { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } /* Free/Available Cage - Green */ .menu-reskin .ward-show .info-box.bg-green { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important; border-left: 4px solid var(--color-success); } .menu-reskin .ward-show .info-box.bg-green .info-box-icon { background: var(--color-success-gradient) !important; color: #fff !important; } .menu-reskin .ward-show .info-box.bg-green .info-box-icon .info-box-text { color: #fff !important; } .menu-reskin .ward-show .info-box.bg-green .info-box-content .info-box-text, .menu-reskin .ward-show .info-box.bg-green .info-box-content .info-box-number { color: var(--color-success-text) !important; } /* Occupied Cage - Yellow/Orange (Normal Priority) */ .menu-reskin .ward-show .info-box.bg-yellow { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important; border-left: 4px solid var(--color-warning); } .menu-reskin .ward-show .info-box.bg-yellow .info-box-icon { background: var(--color-warning-gradient) !important; color: #fff !important; } .menu-reskin .ward-show .info-box.bg-yellow .info-box-icon .info-box-text { color: #fff !important; } .menu-reskin .ward-show .info-box.bg-yellow .info-box-content .info-box-text, .menu-reskin .ward-show .info-box.bg-yellow .info-box-content .info-box-number { color: var(--color-warning-text) !important; } /* High Priority Cage - Orange */ .menu-reskin .ward-show .info-box.bg-orange { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important; border-left: 4px solid #ea580c; } .menu-reskin .ward-show .info-box.bg-orange .info-box-icon { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important; color: #fff !important; } .menu-reskin .ward-show .info-box.bg-orange .info-box-icon .info-box-text { color: #fff !important; } /* Critical Priority Cage - Red */ .menu-reskin .ward-show .info-box.bg-red { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important; border-left: 4px solid var(--color-danger); } .menu-reskin .ward-show .info-box.bg-red .info-box-icon { background: var(--color-danger-gradient) !important; color: #fff !important; } .menu-reskin .ward-show .info-box.bg-red .info-box-icon .info-box-text { color: #fff !important; } .menu-reskin .ward-show .info-box.bg-red .info-box-content .info-box-text, .menu-reskin .ward-show .info-box.bg-red .info-box-content .info-box-number { color: var(--color-danger-text) !important; } /* Info Cage - Aqua/Cyan */ .menu-reskin .ward-show .info-box.bg-aqua { background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%) !important; border-left: 4px solid var(--color-info); } .menu-reskin .ward-show .info-box.bg-aqua .info-box-icon { background: var(--color-info-gradient) !important; color: #fff !important; } .menu-reskin .ward-show .info-box.bg-aqua .info-box-icon .info-box-text { color: #fff !important; } /* Info Box Icon Area */ .menu-reskin .ward-show .info-box-icon { width: 90px; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; border-radius: 0; } .menu-reskin .ward-show .info-box-icon .info-box-text { font-size: 11px !important; font-weight: 500 !important; color: #fff !important; opacity: 0.95; text-align: left !important; width: 100%; line-height: 1.3 !important; margin-bottom: 2px; } /* Info Box Content Area */ .menu-reskin .ward-show .info-box-content { padding: 12px 15px; display: flex; flex-direction: column; justify-content: center; flex: 1; } .menu-reskin .ward-show .info-box-content .info-box-text { font-size: 13px !important; font-weight: 600 !important; text-transform: none !important; margin-bottom: 4px; } .menu-reskin .ward-show .info-box-content .info-box-number { font-size: 14px !important; font-weight: 500 !important; margin-bottom: 6px; } .menu-reskin .ward-show .info-box-content .info-box-number small { font-size: 11px !important; font-weight: 400 !important; opacity: 0.8; } .menu-reskin .ward-show .info-box-content .progress-description { font-size: 11px !important; opacity: 0.7; } /* ========================================================================== TREATMENT VIEW - Behandlungsmaske Styling ========================================================================== */ /* Treatment View Container */ .menu-reskin .treatment-view { font-family: var(--menu-font-body); } /* ------------------------------------------------------------------------- Alerts / Warnings (Orange & Red Info Boxes) ------------------------------------------------------------------------- */ .menu-reskin .treatment-view .alert { border: none !important; border-radius: 12px !important; padding: 16px 20px !important; margin-bottom: 15px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; } .menu-reskin .treatment-view .alert-warning { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important; border-left: 4px solid var(--color-warning) !important; color: #9a3412 !important; } .menu-reskin .treatment-view .alert-warning h4 { color: #c2410c !important; font-weight: 600 !important; font-size: 15px !important; margin-bottom: 8px !important; } .menu-reskin .treatment-view .alert-warning h4 i { color: var(--color-warning) !important; margin-right: 8px; } .menu-reskin .treatment-view .alert-danger { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important; border-left: 4px solid var(--color-danger) !important; color: #991b1b !important; } .menu-reskin .treatment-view .alert-danger h4 { color: #b91c1c !important; font-weight: 600 !important; } .menu-reskin .treatment-view .alert .close { opacity: 0.6; color: inherit; font-size: 20px; } .menu-reskin .treatment-view .alert .close:hover { opacity: 1; } /* ------------------------------------------------------------------------- Important Information Panel (Red Collapsible) ------------------------------------------------------------------------- */ .menu-reskin .treatment-view .panel-danger { border: none !important; border-radius: 12px !important; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; margin-bottom: 15px !important; } .menu-reskin .treatment-view .panel-danger .panel-heading { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important; border: none !important; padding: 12px 16px !important; border-left: 4px solid var(--color-danger) !important; } .menu-reskin .treatment-view .panel-danger .panel-title { font-size: 14px !important; font-weight: 600 !important; } .menu-reskin .treatment-view .panel-danger .panel-title a { color: #b91c1c !important; text-decoration: none !important; } .menu-reskin .treatment-view .panel-danger .panel-title a i { color: var(--color-danger) !important; margin-right: 8px; } .menu-reskin .treatment-view .panel-danger .panel-body { background: #fff !important; padding: 20px !important; } /* Important Info - Row spacing */ .menu-reskin .treatment-view .panel-danger .panel-body .row { margin-bottom: 12px !important; } .menu-reskin .treatment-view .panel-danger .panel-body .row:last-child { margin-bottom: 0 !important; } /* Important Info - Column styling */ .menu-reskin .treatment-view .panel-danger .panel-body .col-sm-6 { background: #fffbf5; border-radius: 8px; padding: 12px 14px !important; margin-bottom: 8px; border-left: 3px solid #f59e0b; } /* Important Info - Labels */ .menu-reskin .treatment-view .panel-danger .panel-body h4 { font-size: 11px !important; font-weight: 600 !important; color: #b45309 !important; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px !important; margin-top: 0 !important; } /* ------------------------------------------------------------------------- More Info View (_moreinfo.php) - Editable Info Boxes ------------------------------------------------------------------------- */ /* ALL boxes in treatment-view - reset to transparent by default */ .menu-reskin .treatment-view .box { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; margin-bottom: 0 !important; } /* Colored boxes - the actual styled info cards */ body.menu-reskin .treatment-view .box.box-warning { background: #fff !important; border-top: none !important; border-right: none !important; border-bottom: none !important; border-left: 4px solid #f59e0b !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; margin-bottom: 15px !important; overflow: hidden !important; } body.menu-reskin .treatment-view .box.box-info { background: #fff !important; border-top: none !important; border-right: none !important; border-bottom: none !important; border-left: 4px solid #06b6d4 !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; margin-bottom: 15px !important; overflow: hidden !important; } body.menu-reskin .treatment-view .box.box-danger { background: #fff !important; border-top: none !important; border-right: none !important; border-bottom: none !important; border-left: 4px solid #ef4444 !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; margin-bottom: 15px !important; overflow: hidden; } body.menu-reskin .treatment-view .box.box-success:not(.history-widget-box) { background: #fff !important; border-top: none !important; border-right: none !important; border-bottom: none !important; border-left: 4px solid #22c55e !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; margin-bottom: 15px !important; overflow: hidden !important; } body.menu-reskin .treatment-view .box.box-primary { background: #fff !important; border-top: none !important; border-right: none !important; border-bottom: none !important; border-left: 4px solid #7AA239 !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; margin-bottom: 15px !important; overflow: hidden !important; } /* Box Headers */ body.menu-reskin .treatment-view .box.box-warning .box-header { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important; padding: 12px 16px !important; border: none !important; border-top-left-radius: 8px !important; display: flex !important; align-items: center !important; gap: 10px; } body.menu-reskin .treatment-view .box.box-info .box-header { background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%) !important; padding: 12px 16px !important; border: none !important; border-top-left-radius: 8px !important; display: flex !important; align-items: center !important; gap: 10px; } body.menu-reskin .treatment-view .box.box-danger .box-header { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important; padding: 12px 16px !important; border: none !important; border-top-left-radius: 8px !important; display: flex !important; align-items: center !important; gap: 10px; } body.menu-reskin .treatment-view .box.box-success:not(.history-widget-box) .box-header { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important; padding: 12px 16px !important; border: none !important; border-top-left-radius: 8px !important; display: flex !important; align-items: center !important; gap: 10px; } body.menu-reskin .treatment-view .box.box-primary .box-header { background: linear-gradient(135deg, #f0f7ed 0%, #e0ecd3 100%) !important; padding: 12px 16px !important; border: none !important; border-top-left-radius: 8px !important; display: flex !important; align-items: center !important; gap: 10px; } /* Header Icons */ body.menu-reskin .treatment-view .box.box-warning .box-header > i { color: #f59e0b !important; font-size: 14px !important; } body.menu-reskin .treatment-view .box.box-info .box-header > i { color: #06b6d4 !important; font-size: 14px !important; } body.menu-reskin .treatment-view .box.box-danger .box-header > i { color: #ef4444 !important; font-size: 14px !important; } body.menu-reskin .treatment-view .box.box-success:not(.history-widget-box) .box-header > i { color: #22c55e !important; font-size: 14px !important; } body.menu-reskin .treatment-view .box.box-primary .box-header > i { color: #7AA239 !important; font-size: 14px !important; } /* Header Titles */ body.menu-reskin .treatment-view .box.box-warning .box-header .box-title { color: #b45309 !important; margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; } body.menu-reskin .treatment-view .box.box-info .box-header .box-title { color: #0e7490 !important; margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; } body.menu-reskin .treatment-view .box.box-danger .box-header .box-title { color: #b91c1c !important; margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; } body.menu-reskin .treatment-view .box.box-success:not(.history-widget-box) .box-header .box-title { color: #166534 !important; margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; } body.menu-reskin .treatment-view .box.box-primary .box-header .box-title { color: #5c7a2b !important; margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; } /* Box Body / Content */ body.menu-reskin .treatment-view .box.box-warning > div[style*="padding"], body.menu-reskin .treatment-view .box.box-info > div[style*="padding"], body.menu-reskin .treatment-view .box.box-danger > div[style*="padding"], body.menu-reskin .treatment-view .box.box-success:not(.history-widget-box) > div[style*="padding"], body.menu-reskin .treatment-view .box.box-primary > div[style*="padding"] { padding: 16px !important; background: #fff !important; border-bottom-left-radius: 8px !important; } /* Editable Widget Styling */ .menu-reskin .treatment-view .box .kv-editable-value { font-size: 14px !important; color: var(--menu-text) !important; line-height: 1.6 !important; } .menu-reskin .treatment-view .box .kv-editable-link { color: var(--color-primary) !important; text-decoration: none !important; } .menu-reskin .treatment-view .box .kv-editable-link:hover { color: var(--color-primary-dark) !important; } /* ------------------------------------------------------------------------- Action Buttons Container ------------------------------------------------------------------------- */ .menu-reskin .treatment-view .action-buttons-treatment { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; margin-bottom: 2px !important; margin-top: 0 !important; } .menu-reskin .treatment-view .action-buttons-treatment .btn { border: none !important; border-radius: 8px !important; padding: 8px 14px !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; transition: all 0.2s ease !important; white-space: nowrap; } .menu-reskin .treatment-view .action-buttons-treatment .btn:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; } .menu-reskin .treatment-view .action-buttons-treatment .btn-success { background: var(--color-success-gradient) !important; color: #fff !important; } .menu-reskin .treatment-view .action-buttons-treatment .btn-warning { background: var(--color-warning-gradient) !important; color: #fff !important; } .menu-reskin .treatment-view .action-buttons-treatment .btn-info { background: var(--color-info-gradient) !important; color: #fff !important; } .menu-reskin .treatment-view .action-buttons-treatment .btn-danger { background: var(--color-danger-gradient) !important; color: #fff !important; } .menu-reskin .treatment-view .action-buttons-treatment .btn-primary { background: var(--color-primary-gradient) !important; color: #fff !important; } /* ------------------------------------------------------------------------- Header Menu (Main Navigation Tabs) - Tab Bar Style ------------------------------------------------------------------------- */ .menu-reskin .treatment-view .navbar { background: #fff !important; border: 1px solid var(--menu-border) !important; border-radius: 12px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important; min-height: auto !important; margin-bottom: 8px !important; padding: 6px !important; } .menu-reskin .treatment-view .navbar-nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 !important; padding: 0 !important; } .menu-reskin .treatment-view .navbar-nav > li { float: none !important; } .menu-reskin .treatment-view .navbar-nav > li > a { background: transparent !important; border: none !important; border-radius: 8px !important; padding: 10px 14px !important; margin: 0 !important; color: var(--menu-text-muted) !important; font-size: 13px !important; font-weight: 500 !important; transition: all 0.2s ease !important; display: flex !important; align-items: center !important; gap: 6px; } .menu-reskin .treatment-view .navbar-nav > li > a:hover { background: var(--menu-bg) !important; color: var(--menu-text) !important; } .menu-reskin .treatment-view .navbar-nav > li.active > a, .menu-reskin .treatment-view .navbar-nav > li > a:focus { background: var(--color-primary-gradient) !important; color: #fff !important; box-shadow: 0 2px 6px rgba(122, 162, 57, 0.25) !important; } .menu-reskin .treatment-view .navbar-nav > li > a i { font-size: 14px; } .menu-reskin .treatment-view .navbar-nav > li.active > a i { color: #fff !important; } /* ------------------------------------------------------------------------- Sub Menu (TabsX - Bottom/Left/Right Tabs) ------------------------------------------------------------------------- */ .menu-reskin .treatment-view .tabs-x { border: none !important; } .menu-reskin .treatment-view .tabs-x .nav-tabs { border: none !important; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0; background: transparent !important; } .menu-reskin .treatment-view .tabs-x .nav-tabs > li { margin: 0 !important; float: none !important; } .menu-reskin .treatment-view .tabs-x .nav-tabs > li > a { background: #fff !important; border: 1px solid var(--menu-border) !important; border-radius: 10px !important; padding: 10px 16px !important; margin: 0 !important; color: var(--menu-text) !important; font-size: 13px !important; font-weight: 500 !important; transition: all 0.2s ease !important; } .menu-reskin .treatment-view .tabs-x .nav-tabs > li > a:hover { background: var(--color-primary-bg) !important; border-color: var(--color-primary) !important; color: var(--color-primary) !important; } .menu-reskin .treatment-view .tabs-x .nav-tabs > li.active > a { background: var(--color-primary-gradient) !important; border-color: var(--color-primary) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(122, 162, 57, 0.3) !important; } .menu-reskin .treatment-view .tabs-x .tab-content { border: none !important; background: #fff !important; border-radius: 12px !important; padding: 20px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; margin-top: 10px; } /* Left/Right positioned tabs */ .menu-reskin .treatment-view .tabs-x.tabs-left .nav-tabs, .menu-reskin .treatment-view .tabs-x.tabs-right .nav-tabs { flex-direction: column; width: auto; } /* ------------------------------------------------------------------------- Detail View / Main Content Area ------------------------------------------------------------------------- */ .menu-reskin .treatment-view .detail-view { background: #fff !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; overflow: hidden; } .menu-reskin .treatment-view .detail-view table { margin-bottom: 0 !important; } .menu-reskin .treatment-view .detail-view th { background: var(--menu-bg) !important; color: var(--menu-text-muted) !important; font-weight: 500 !important; font-size: 13px !important; padding: 12px 16px !important; border: none !important; border-bottom: 1px solid var(--menu-border) !important; width: 180px; } .menu-reskin .treatment-view .detail-view td { padding: 12px 16px !important; border: none !important; border-bottom: 1px solid var(--menu-border-light) !important; font-size: 14px !important; color: var(--menu-text) !important; } .menu-reskin .treatment-view .detail-view tr:last-child th, .menu-reskin .treatment-view .detail-view tr:last-child td { border-bottom: none !important; } /* Pet Info Header Line */ .menu-reskin .treatment-view .pet-info-line { background: linear-gradient(135deg, var(--menu-bg) 0%, #fff 100%) !important; border-radius: 12px !important; padding: 15px 20px !important; margin-bottom: 15px !important; border: 1px solid var(--menu-border) !important; } /* ------------------------------------------------------------------------- Form Elements in Treatment View ------------------------------------------------------------------------- */ .menu-reskin .treatment-view .form-control { border: 1px solid var(--menu-border) !important; border-radius: 8px !important; padding: 10px 14px !important; font-size: 14px !important; transition: all 0.2s ease !important; box-shadow: none !important; } .menu-reskin .treatment-view .form-control:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px var(--color-primary-bg) !important; } .menu-reskin .treatment-view textarea.form-control { min-height: 100px; resize: vertical; } .menu-reskin .treatment-view .form-group label { font-weight: 500 !important; color: var(--menu-text) !important; font-size: 13px !important; margin-bottom: 6px !important; } /* ------------------------------------------------------------------------- Tables in Treatment View ------------------------------------------------------------------------- */ .menu-reskin .treatment-view .table { background: #fff !important; border-radius: 12px !important; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; } .menu-reskin .treatment-view .table thead th { background: var(--menu-bg) !important; color: var(--menu-text) !important; font-weight: 600 !important; font-size: 13px !important; padding: 14px 16px !important; border: none !important; border-bottom: 2px solid var(--menu-border) !important; } .menu-reskin .treatment-view .table tbody td { padding: 12px 16px !important; border: none !important; border-bottom: 1px solid var(--menu-border-light) !important; font-size: 14px !important; vertical-align: middle !important; } .menu-reskin .treatment-view .table tbody tr:hover { background: var(--menu-bg-hover) !important; } .menu-reskin .treatment-view .table tbody tr:last-child td { border-bottom: none !important; } /* ------------------------------------------------------------------------- Kv Detail View (Kartik DetailView Widget) ------------------------------------------------------------------------- */ .menu-reskin .treatment-view .kv-view-mode, .menu-reskin .treatment-view .kv-edit-mode { background: #fff !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; overflow: hidden; } .menu-reskin .treatment-view .kv-attribute { border-bottom: 1px solid var(--menu-border-light) !important; } .menu-reskin .treatment-view .kv-attribute:last-child { border-bottom: none !important; } .menu-reskin .treatment-view .kv-label { background: var(--menu-bg) !important; font-weight: 500 !important; color: var(--menu-text-muted) !important; } /* ------------------------------------------------------------------------- Kartik Panel Heading (Pet Info Headline) ------------------------------------------------------------------------- */ .menu-reskin .treatment-view .panel { border: none !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; margin-bottom: 15px !important; overflow: hidden; } .menu-reskin .treatment-view .panel-heading, .menu-reskin .treatment-view .kv-heading { background: linear-gradient(135deg, #e8f4fc 0%, #f0f7fb 50%, #f8fbfd 100%) !important; border: none !important; border-left: 4px solid var(--color-info) !important; border-bottom: 1px solid #d4e8f2 !important; border-radius: 0 !important; padding: 12px 16px !important; font-size: 13px !important; font-weight: 500 !important; color: #0e7490 !important; } /* Panel Type Variants - Match the label color */ .menu-reskin .treatment-view .panel-info .panel-heading, .menu-reskin .treatment-view .panel-info .kv-heading { background: linear-gradient(135deg, #e8f4fc 0%, #f0f7fb 50%, #f8fbfd 100%) !important; border-left-color: var(--color-info) !important; border-bottom-color: #d4e8f2 !important; color: #0e7490 !important; } .menu-reskin .treatment-view .panel-danger .panel-heading, .menu-reskin .treatment-view .panel-danger .kv-heading { background: linear-gradient(135deg, #fef2f2 0%, #fef7f7 50%, #fffbfb 100%) !important; border-left-color: var(--color-danger) !important; border-bottom-color: #fecaca !important; color: #991b1b !important; } .menu-reskin .treatment-view .panel-success .panel-heading, .menu-reskin .treatment-view .panel-success .kv-heading { background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf7 50%, #f8fdfb 100%) !important; border-left-color: var(--color-success) !important; border-bottom-color: #a7f3d0 !important; color: #166534 !important; } .menu-reskin .treatment-view .panel-warning .panel-heading, .menu-reskin .treatment-view .panel-warning .kv-heading { background: linear-gradient(135deg, #fffbeb 0%, #fffcf0 50%, #fffef8 100%) !important; border-left-color: var(--color-warning) !important; border-bottom-color: #fde68a !important; color: #b45309 !important; } .menu-reskin .treatment-view .panel-primary .panel-heading, .menu-reskin .treatment-view .panel-primary .kv-heading { background: linear-gradient(135deg, #f0f7ed 0%, #f5faf2 50%, #fafcf9 100%) !important; border-left-color: var(--color-primary) !important; border-bottom-color: #c6ddb0 !important; color: #5c7a2b !important; } .menu-reskin .treatment-view .panel-heading small { color: var(--menu-text-muted) !important; font-size: 12px !important; } .menu-reskin .treatment-view .panel-heading i, .menu-reskin .treatment-view .kv-heading i { color: var(--menu-text-muted) !important; } .menu-reskin .treatment-view .panel-heading a, .menu-reskin .treatment-view .kv-heading a { color: var(--color-primary) !important; } .menu-reskin .treatment-view .panel-heading a:hover, .menu-reskin .treatment-view .kv-heading a:hover { color: var(--color-primary-dark) !important; } .menu-reskin .treatment-view .panel-body { padding: 0 !important; } /* ------------------------------------------------------------------------- Pet Info Badges (PM, CD, A) with Modern Tooltips ------------------------------------------------------------------------- */ .menu-reskin .pet-info-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 12px !important; font-weight: 600; cursor: help; position: relative; transition: all 0.2s ease; } .menu-reskin .pet-info-badge i { font-size: 13px !important; } /* Warning Badge (PM - Permanent Medication) */ .menu-reskin .pet-info-badge.pet-info-warning { background: #fef3c7 !important; color: #b45309 !important; border: 1px solid #fcd34d; } .menu-reskin .pet-info-badge.pet-info-warning i { color: #d97706 !important; } .menu-reskin .pet-info-badge.pet-info-warning:hover { background: #fde68a !important; box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25); } /* Danger Badge (CD - Chronic Disease, A - Allergy) */ .menu-reskin .pet-info-badge.pet-info-danger { background: #fee2e2 !important; color: #b91c1c !important; border: 1px solid #fca5a5; } .menu-reskin .pet-info-badge.pet-info-danger i { color: #dc2626 !important; } .menu-reskin .pet-info-badge.pet-info-danger:hover { background: #fecaca !important; box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25); } /* Modern Tooltip - appears below the badge */ .menu-reskin .pet-info-badge[data-tooltip]::before { content: attr(data-tooltip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 8px 12px; background: #1f2937; color: #fff; font-size: 12px; font-weight: 400; line-height: 1.4; border-radius: 8px; white-space: nowrap; max-width: 280px; white-space: normal; text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); opacity: 0; visibility: hidden; transition: all 0.2s ease; z-index: 1000; } /* Tooltip arrow - pointing up */ .menu-reskin .pet-info-badge[data-tooltip]::after { content: ''; position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: #1f2937; opacity: 0; visibility: hidden; transition: all 0.2s ease; z-index: 1000; } /* Show tooltip on hover */ .menu-reskin .pet-info-badge[data-tooltip]:hover::before, .menu-reskin .pet-info-badge[data-tooltip]:hover::after { opacity: 1; visibility: visible; } /* ------------------------------------------------------------------------- Modal Styling ------------------------------------------------------------------------- */ .menu-reskin .treatment-view .modal-content { border: none !important; border-radius: 16px !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important; } .menu-reskin .treatment-view .modal-header { background: var(--menu-bg) !important; border-bottom: 1px solid var(--menu-border) !important; border-radius: 16px 16px 0 0 !important; padding: 16px 20px !important; } .menu-reskin .treatment-view .modal-title { font-weight: 600 !important; color: var(--menu-text) !important; } .menu-reskin .treatment-view .modal-body { padding: 20px !important; } .menu-reskin .treatment-view .modal-footer { border-top: 1px solid var(--menu-border) !important; padding: 16px 20px !important; } /* ========================================================================== HISTORY WIDGET - Dezent / Subtle Styling ========================================================================== */ .menu-reskin .history-widget-box { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; margin-top: 15px !important; margin-bottom: 0 !important; } .menu-reskin .history-widget-box .box-header { background: transparent !important; border: none !important; padding: 8px 0 !important; display: flex !important; align-items: center !important; gap: 6px; } .menu-reskin .history-widget-box .box-header > i { font-size: 12px !important; color: var(--menu-text-muted) !important; } .menu-reskin .history-widget-box .box-header .box-title { margin: 0 !important; font-size: 12px !important; font-weight: 400 !important; } .menu-reskin .history-widget-box .box-header .box-title a { color: var(--menu-text-muted) !important; text-decoration: none !important; transition: all 0.2s ease; } .menu-reskin .history-widget-box .box-header .box-title a:hover { color: var(--color-primary) !important; text-decoration: underline !important; } /* ========================================================================== ACTIVITY RECORD (Leistungsaufzeichnung) - Modern Billing Form ========================================================================== */ /* Container for action buttons above the form */ .menu-reskin .treatment-view .activity-record-buttons { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px !important; background: var(--menu-bg) !important; border-radius: 12px !important; margin-bottom: 16px !important; border: 1px solid var(--menu-border) !important; } .menu-reskin .treatment-view .activity-record-buttons .btn-sm, .menu-reskin .treatment-view .activity-record-buttons .btn { border: none !important; border-radius: 8px !important; padding: 8px 14px !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important; transition: all 0.2s ease !important; } .menu-reskin .treatment-view .activity-record-buttons .btn-sm:hover, .menu-reskin .treatment-view .activity-record-buttons .btn:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important; } .menu-reskin .treatment-view .activity-record-buttons .btn-success { background: var(--color-success-gradient) !important; color: #fff !important; } .menu-reskin .treatment-view .activity-record-buttons .btn-info { background: var(--color-info-gradient) !important; color: #fff !important; } .menu-reskin .treatment-view .activity-record-buttons .btn-warning { background: var(--color-warning-gradient) !important; color: #fff !important; } .menu-reskin .treatment-view .activity-record-buttons .btn-danger { background: var(--color-danger-gradient) !important; color: #fff !important; } /* ------------------------------------------------------------------------- Activity Record Form - Card Style ------------------------------------------------------------------------- */ .menu-reskin .treatment-view .activityrecord-form { background: #fff !important; border-radius: 12px !important; padding: 20px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; border: 1px solid var(--menu-border) !important; margin-bottom: 16px !important; } /* Form row styling - better visual grouping */ .menu-reskin .treatment-view .activityrecord-form .row { margin-bottom: 12px !important; padding-bottom: 12px !important; border-bottom: 1px dashed var(--menu-border-light); } .menu-reskin .treatment-view .activityrecord-form .row:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: none; } /* Form labels - more compact */ .menu-reskin .treatment-view .activityrecord-form .form-group { margin-bottom: 8px !important; } .menu-reskin .treatment-view .activityrecord-form .form-group label { font-size: 11px !important; font-weight: 600 !important; color: var(--menu-text-muted) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-bottom: 4px !important; } /* Input fields in activity record form */ .menu-reskin .treatment-view .activityrecord-form .form-control { border: 1px solid var(--menu-border) !important; border-radius: 8px !important; padding: 8px 12px !important; font-size: 14px !important; height: auto !important; transition: all 0.2s ease !important; } .menu-reskin .treatment-view .activityrecord-form .form-control:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px var(--color-primary-bg) !important; } /* Barcode field - highlighted */ .menu-reskin .treatment-view .activityrecord-form input[style*="F3F781"], .menu-reskin .treatment-view .activityrecord-form #stockdeliverynotedetails-barcode { background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%) !important; border-color: #fde047 !important; } .menu-reskin .treatment-view .activityrecord-form #stockdeliverynotedetails-barcode:focus { border-color: #eab308 !important; box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important; } /* Checkbox styling - modern look */ .menu-reskin .treatment-view .activityrecord-form .checkbox { padding-top: 0 !important; } .menu-reskin .treatment-view .activityrecord-form .checkbox label { display: flex !important; align-items: center !important; gap: 6px !important; text-transform: none !important; font-weight: 500 !important; color: var(--menu-text) !important; } .menu-reskin .treatment-view .activityrecord-form .checkbox input[type="checkbox"] { width: 18px !important; height: 18px !important; margin: 0 !important; cursor: pointer !important; accent-color: var(--color-primary) !important; } /* Select2 styling within form */ .menu-reskin .treatment-view .activityrecord-form .select2-container--krajee-bs3 .select2-selection { border: 1px solid var(--menu-border) !important; border-radius: 8px !important; min-height: 38px !important; } .menu-reskin .treatment-view .activityrecord-form .select2-container--krajee-bs3.select2-container--focus .select2-selection, .menu-reskin .treatment-view .activityrecord-form .select2-container--krajee-bs3.select2-container--open .select2-selection { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px var(--color-primary-bg) !important; } /* Submit buttons at bottom of form */ .menu-reskin .treatment-view .activityrecord-form .btn-success, .menu-reskin .treatment-view .activityrecord-form .btn-primary { background: var(--color-primary-gradient) !important; border: none !important; border-radius: 8px !important; padding: 8px 16px !important; font-weight: 500 !important; box-shadow: 0 2px 4px rgba(122, 162, 57, 0.2) !important; transition: all 0.2s ease !important; } .menu-reskin .treatment-view .activityrecord-form .btn-success:hover, .menu-reskin .treatment-view .activityrecord-form .btn-primary:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 8px rgba(122, 162, 57, 0.3) !important; } /* ------------------------------------------------------------------------- Activity Record Details Table (Invoice Lines) ------------------------------------------------------------------------- */ .menu-reskin .treatment-view .activity-record-info { background: #fff !important; border-radius: 12px !important; padding: 16px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; border: 1px solid var(--menu-border) !important; } /* Totals display - prominent */ .menu-reskin .treatment-view .activity-record-info .totals { background: linear-gradient(135deg, #f0f7ed 0%, #f5faf2 100%) !important; border: 1px solid #c6ddb0 !important; border-radius: 10px !important; padding: 12px 16px !important; margin-bottom: 16px !important; } .menu-reskin .treatment-view .activity-record-info .totals table { background: transparent !important; box-shadow: none !important; border: none !important; margin: 0 !important; } .menu-reskin .treatment-view .activity-record-info .totals td { padding: 0 !important; border: none !important; background: transparent !important; font-size: 16px !important; color: var(--color-primary-dark) !important; } /* Invoice lines table */ .menu-reskin .treatment-view .activity-record-info #tblLocations { background: #fff !important; border-radius: 10px !important; overflow: hidden; border: 1px solid var(--menu-border) !important; box-shadow: none !important; } .menu-reskin .treatment-view .activity-record-info #tblLocations th { background: var(--menu-bg) !important; color: var(--menu-text) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 12px 10px !important; border: none !important; border-bottom: 2px solid var(--menu-border) !important; white-space: nowrap; } .menu-reskin .treatment-view .activity-record-info #tblLocations td { padding: 10px !important; border: none !important; border-bottom: 1px solid var(--menu-border-light) !important; font-size: 13px !important; vertical-align: middle !important; } .menu-reskin .treatment-view .activity-record-info #tblLocations tbody tr:hover { background: var(--menu-bg-hover) !important; } /* Group headline rows - make them stand out */ .menu-reskin .treatment-view .activity-record-info #tblLocations tbody tr td strong { color: var(--color-primary-dark) !important; } /* Info column badges (DM, AM, M, NP, AB, AV) */ .menu-reskin .treatment-view .activity-record-info #tblLocations td strong span, .menu-reskin .treatment-view .activity-record-info #tblLocations td strong a { display: inline-block; background: var(--menu-bg) !important; color: var(--menu-text) !important; padding: 2px 6px !important; border-radius: 4px !important; font-size: 10px !important; font-weight: 600 !important; margin-right: 2px !important; border: 1px solid var(--menu-border) !important; } /* Editable widgets in table */ .menu-reskin .treatment-view .activity-record-info .kv-editable-value { padding: 4px 8px !important; border-radius: 6px !important; background: var(--menu-bg) !important; border: 1px dashed var(--menu-border) !important; cursor: pointer !important; transition: all 0.2s ease !important; } .menu-reskin .treatment-view .activity-record-info .kv-editable-value:hover { background: var(--color-primary-bg) !important; border-color: var(--color-primary) !important; } /* Delete button in table */ .menu-reskin .treatment-view .activity-record-info #tblLocations td a .fa-trash { color: var(--color-danger) !important; font-size: 14px !important; opacity: 0.7; transition: all 0.2s ease; } .menu-reskin .treatment-view .activity-record-info #tblLocations td a:hover .fa-trash { opacity: 1; transform: scale(1.1); } /* Mass delete button */ .menu-reskin .treatment-view .activity-record-info #delmass { background: var(--color-danger-gradient) !important; border: none !important; border-radius: 6px !important; padding: 6px 12px !important; } /* Checkbox in table */ .menu-reskin .treatment-view .activity-record-info .delmassgroup { width: 16px !important; height: 16px !important; cursor: pointer !important; accent-color: var(--color-danger) !important; } /* Price columns - right align */ .menu-reskin .treatment-view .activity-record-info #tblLocations td:nth-last-child(-n+3) { text-align: right !important; } .menu-reskin .treatment-view .activity-record-info #tblLocations th:nth-last-child(-n+3) { text-align: right !important; } /* Hidden on print indicator */ .menu-reskin .treatment-view .activity-record-info #tblLocations tr.info { background: #f0f9ff !important; } .menu-reskin .treatment-view .activity-record-info #tblLocations tr.info td { color: var(--color-info-text) !important; } /* Total row at bottom */ .menu-reskin .treatment-view .activity-record-info #tblLocations tr:last-child td { background: var(--menu-bg) !important; font-weight: 600 !important; border-top: 2px solid var(--menu-border) !important; border-bottom: none !important; } /* ------------------------------------------------------------------------- Activity Record Form - New Dynamic Layout ------------------------------------------------------------------------- */ /* Row 1: Product Selection */ .menu-reskin .treatment-view .activityrecord-form .ar-row-basic { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-bottom: 8px !important; padding-bottom: 0 !important; border-bottom: none !important; } .menu-reskin .treatment-view .activityrecord-form .ar-row-basic .form-group { margin-bottom: 0 !important; } /* Row 2: Actions row */ .menu-reskin .treatment-view .activityrecord-form .ar-row-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: none !important; } .menu-reskin .treatment-view .activityrecord-form .ar-row-actions .form-group { margin-bottom: 0 !important; } /* Checkbox columns in actions row - Label above like text fields */ .menu-reskin .treatment-view .activityrecord-form .ar-checkbox-col { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 0; } .menu-reskin .treatment-view .activityrecord-form .ar-checkbox-col .form-group { margin-bottom: 0 !important; width: 100%; } .menu-reskin .treatment-view .activityrecord-form .ar-checkbox-col .form-group > label { font-size: 11px !important; font-weight: 600 !important; color: var(--menu-text-muted) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-bottom: 4px !important; display: block; } .menu-reskin .treatment-view .activityrecord-form .ar-checkbox-col .checkbox { margin: 0 !important; padding: 0 !important; } .menu-reskin .treatment-view .activityrecord-form .ar-checkbox-col .checkbox label { background: #fff !important; border: 1px solid var(--menu-border) !important; border-radius: 6px !important; padding: 8px 12px !important; font-weight: 600 !important; font-size: 13px !important; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; } .menu-reskin .treatment-view .activityrecord-form .ar-checkbox-col .checkbox:hover label { border-color: var(--color-primary) !important; background: var(--color-primary-bg) !important; } .menu-reskin .treatment-view .activityrecord-form .ar-checkbox-col .checkbox:has(input:checked) label { background: var(--color-primary-bg) !important; border-color: var(--color-primary) !important; color: var(--color-primary-dark) !important; } /* Buttons column */ .menu-reskin .treatment-view .activityrecord-form .ar-buttons-col { display: flex; align-items: flex-end; gap: 8px; padding-bottom: 0 !important; } .menu-reskin .treatment-view .activityrecord-form .btn-ar-submit { height: 38px; padding: 0 16px !important; font-size: 13px !important; white-space: nowrap; } /* Medication Fields Group - Collapsible */ .menu-reskin .treatment-view .activityrecord-form .ar-med-fields { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important; border: 1px solid #bae6fd !important; border-radius: 10px !important; padding: 12px 16px 16px 16px !important; margin: 12px 0 !important; } .menu-reskin .treatment-view .activityrecord-form .ar-med-fields-header { font-size: 12px !important; font-weight: 600 !important; color: var(--color-info-text) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-bottom: 12px !important; padding-bottom: 8px !important; border-bottom: 1px dashed #7dd3fc !important; } .menu-reskin .treatment-view .activityrecord-form .ar-med-fields-header i { margin-right: 6px; } .menu-reskin .treatment-view .activityrecord-form .ar-med-fields .row { margin-bottom: 8px !important; padding-bottom: 0 !important; border-bottom: none !important; } .menu-reskin .treatment-view .activityrecord-form .ar-med-fields .row:last-child { margin-bottom: 0 !important; } .menu-reskin .treatment-view .activityrecord-form .ar-med-fields .form-group { margin-bottom: 8px !important; } /* Checkbox Group - Horizontal Pills in own row */ .menu-reskin .treatment-view .activityrecord-form .ar-checkbox-group-label { font-size: 11px !important; font-weight: 600 !important; color: var(--menu-text-muted) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-bottom: 8px !important; display: block; } .menu-reskin .treatment-view .activityrecord-form .ar-checkbox-group { display: flex; flex-wrap: wrap; gap: 10px; } .menu-reskin .treatment-view .activityrecord-form .ar-checkbox { display: inline-flex; align-items: center; gap: 6px; background: #fff !important; border: 1px solid var(--menu-border) !important; border-radius: 8px !important; padding: 8px 14px !important; cursor: pointer; transition: all 0.2s ease; font-size: 13px !important; font-weight: 500 !important; color: var(--menu-text) !important; margin: 0 !important; } .menu-reskin .treatment-view .activityrecord-form .ar-checkbox:hover { border-color: var(--color-primary) !important; background: var(--color-primary-bg) !important; } .menu-reskin .treatment-view .activityrecord-form .ar-checkbox input[type="checkbox"] { width: 16px !important; height: 16px !important; margin: 0 !important; cursor: pointer !important; accent-color: var(--color-primary) !important; } .menu-reskin .treatment-view .activityrecord-form .ar-checkbox:has(input:checked) { background: var(--color-primary-bg) !important; border-color: var(--color-primary) !important; color: var(--color-primary-dark) !important; } /* Med Label inline in checkbox row */ .menu-reskin .treatment-view .activityrecord-form .ar-medlabel-inline { display: inline-flex; align-items: center; margin-left: auto; } .menu-reskin .treatment-view .activityrecord-form .ar-medlabel-inline .form-group { margin: 0 !important; } .menu-reskin .treatment-view .activityrecord-form .ar-medlabel-inline select.form-control { height: 38px !important; padding: 6px 12px !important; border: 1px solid var(--menu-border) !important; border-radius: 8px !important; font-size: 13px !important; min-width: 160px !important; background-color: #fff !important; cursor: pointer; } /* AV Checkbox special styling (yellow warning color) */ .menu-reskin .treatment-view .activityrecord-form .ar-checkbox-col .checkbox:has(input[name*="t_takeaway"]) label { background: #fef3c7 !important; border-color: #fcd34d !important; color: #b45309 !important; } .menu-reskin .treatment-view .activityrecord-form .ar-checkbox-col .checkbox:has(input[name*="t_takeaway"]):hover label { background: #fde68a !important; border-color: #f59e0b !important; } .menu-reskin .treatment-view .activityrecord-form .ar-checkbox-col .checkbox:has(input[name*="t_takeaway"]):has(input:checked) label { background: #fde68a !important; border-color: #f59e0b !important; } /* ========================================================================== Summernote WYSIWYG Editor - Reset button styles ========================================================================== */ /* Reset Summernote toolbar buttons to neutral appearance */ .menu-reskin .note-editor .note-toolbar .note-btn, .menu-reskin .note-editor .note-toolbar .btn, .menu-reskin .note-editor .note-toolbar .btn-default, .menu-reskin .note-editor .note-toolbar .note-btn-group .btn { background: #f8f9fa !important; background-image: none !important; border: 1px solid #ced4da !important; color: #495057 !important; box-shadow: none !important; } .menu-reskin .note-editor .note-toolbar .note-btn:hover, .menu-reskin .note-editor .note-toolbar .btn:hover, .menu-reskin .note-editor .note-toolbar .btn-default:hover, .menu-reskin .note-editor .note-toolbar .note-btn-group .btn:hover { background: #e9ecef !important; border-color: #adb5bd !important; color: #212529 !important; } .menu-reskin .note-editor .note-toolbar .note-btn.active, .menu-reskin .note-editor .note-toolbar .btn.active, .menu-reskin .note-editor .note-toolbar .note-btn-group .btn.active { background: #dee2e6 !important; border-color: #adb5bd !important; color: #212529 !important; } /* Summernote dropdown menus */ .menu-reskin .note-editor .dropdown-menu .dropdown-item, .menu-reskin .note-editor .note-dropdown-menu { background: #fff !important; color: #212529 !important; } .menu-reskin .note-editor .dropdown-menu .dropdown-item:hover { background: #f8f9fa !important; } /* Ensure proper border radius */ .menu-reskin .note-editor .note-toolbar .note-btn, .menu-reskin .note-editor .note-toolbar .btn { border-radius: 4px !important; } /* ========================================================================== Immunization List (ilist.php) - Modern Card Layout ========================================================================== */ .menu-reskin .petimmunization-index { padding: 0 !important; } /* Header with action button */ .menu-reskin .petimmunization-index .immu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding: 0 4px; } .menu-reskin .petimmunization-index .immu-header h4 { margin: 0; font-family: var(--menu-font-heading) !important; font-size: 16px; font-weight: 600; color: var(--menu-text); } .menu-reskin .petimmunization-index .immu-header .btn-new-immu { background: var(--color-success-gradient) !important; border: none !important; border-radius: 8px !important; padding: 8px 16px !important; font-size: 13px !important; font-weight: 500 !important; color: #fff !important; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .menu-reskin .petimmunization-index .immu-header .btn-new-immu:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); } /* Immunization cards container */ .menu-reskin .petimmunization-index .immu-cards { display: flex; flex-direction: column; gap: 12px; } /* Individual immunization card */ .menu-reskin .petimmunization-index .immu-card { background: #fff; border: 1px solid var(--menu-border); border-radius: 12px; padding: 16px; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .menu-reskin .petimmunization-index .immu-card:hover { border-color: var(--color-primary-light); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } /* Card header with immunization name and number */ .menu-reskin .petimmunization-index .immu-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--menu-border); } .menu-reskin .petimmunization-index .immu-card-title { display: flex; align-items: center; gap: 10px; } .menu-reskin .petimmunization-index .immu-card-number { background: var(--color-primary-bg); color: var(--color-primary); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; min-width: 28px; text-align: center; } .menu-reskin .petimmunization-index .immu-card-name { font-family: var(--menu-font-heading) !important; font-size: 15px; font-weight: 600; color: var(--menu-text); } .menu-reskin .petimmunization-index .immu-card-actions { display: flex; gap: 8px; flex-shrink: 0; } .menu-reskin .petimmunization-index .immu-card-actions .btn-sm { border-radius: 6px !important; padding: 6px 12px !important; font-size: 12px !important; font-weight: 500 !important; display: inline-flex; align-items: center; gap: 4px; border: none !important; transition: all 0.2s ease; } .menu-reskin .petimmunization-index .immu-card-actions .btn-success { background: var(--color-success-gradient) !important; color: #fff !important; } .menu-reskin .petimmunization-index .immu-card-actions .btn-success:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(122, 162, 57, 0.3); } .menu-reskin .petimmunization-index .immu-card-actions .btn-warning { background: var(--color-warning-gradient) !important; color: #fff !important; } .menu-reskin .petimmunization-index .immu-card-actions .btn-warning:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3); } /* Card body with details */ .menu-reskin .petimmunization-index .immu-card-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 768px) { .menu-reskin .petimmunization-index .immu-card-body { grid-template-columns: 1fr; gap: 12px; } } .menu-reskin .petimmunization-index .immu-card-detail { display: flex; flex-direction: column; gap: 4px; } .menu-reskin .petimmunization-index .immu-card-detail-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--menu-text-muted); } .menu-reskin .petimmunization-index .immu-card-detail-value { font-size: 14px; color: var(--menu-text); } .menu-reskin .petimmunization-index .immu-card-detail-value.date { font-weight: 500; color: var(--color-primary-dark); } .menu-reskin .petimmunization-index .immu-card-detail-value.reminder { font-weight: 600; color: var(--color-info-text); } /* Comment styling */ .menu-reskin .petimmunization-index .immu-card-detail-value.comment { font-style: italic; color: var(--menu-text-muted); } .menu-reskin .petimmunization-index .immu-card-detail-value.comment:empty::before { content: '-'; font-style: normal; } /* Inactive warning */ .menu-reskin .petimmunization-index .immu-inactive-warning { display: inline-flex; align-items: center; gap: 4px; background: #fef2f2; color: #dc2626; font-size: 11px; font-weight: 500; padding: 4px 8px; border-radius: 4px; margin-left: 8px; } /* Alt immunizations (sub-items) */ .menu-reskin .petimmunization-index .immu-alt-items { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--menu-border); } .menu-reskin .petimmunization-index .immu-alt-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #f8fafc; border-radius: 8px; margin-bottom: 8px; } .menu-reskin .petimmunization-index .immu-alt-item:last-child { margin-bottom: 0; } .menu-reskin .petimmunization-index .immu-alt-item-info { display: flex; align-items: center; gap: 16px; } .menu-reskin .petimmunization-index .immu-alt-item-name { font-size: 13px; color: var(--menu-text); } .menu-reskin .petimmunization-index .immu-alt-item-reminder { font-size: 13px; font-weight: 500; color: var(--color-info-text); } .menu-reskin .petimmunization-index .immu-alt-item-actions { display: flex; gap: 6px; } .menu-reskin .petimmunization-index .immu-alt-item-actions .btn-sm { padding: 4px 10px !important; font-size: 11px !important; } /* Empty state */ .menu-reskin .petimmunization-index .immu-empty { text-align: center; padding: 40px 20px; color: var(--menu-text-muted); } .menu-reskin .petimmunization-index .immu-empty i { font-size: 48px; margin-bottom: 12px; opacity: 0.3; } /* ========================================================================== Settings Page (configmanager) - Fix button styling ========================================================================== */ /* Container for settings buttons - align buttons in a row */ .menu-reskin .settings-index .col-sm-2, body.menu-reskin .col-sm-2:has(a.btn[style*="table-cell"]) { display: flex !important; align-items: flex-end !important; justify-content: flex-start !important; gap: 4px !important; padding-bottom: 10px !important; } /* Override inline styles on settings page buttons */ .menu-reskin .settings-index .btn, .menu-reskin .settings-index a.btn, .menu-reskin [class*="settings"] .col-sm-2 .btn, body.menu-reskin .col-sm-2 a.btn[style*="table-cell"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: auto !important; height: 34px !important; width: 34px !important; padding: 0 !important; vertical-align: middle !important; border-radius: 6px !important; margin: 0 !important; } .menu-reskin .settings-index .btn i, .menu-reskin [class*="settings"] .col-sm-2 .btn i, body.menu-reskin .col-sm-2 a.btn[style*="table-cell"] i { font-size: 14px !important; } /* ========================================================================== Syncfusion Scheduler - VET7well Theme Customization ========================================================================== */ /* Main scheduler container */ .menu-reskin .e-schedule { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); border: 1px solid #e5e7eb; } /* Header toolbar - navigation and view buttons */ .menu-reskin .e-schedule .e-schedule-toolbar { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important; border-bottom: 1px solid #e5e7eb !important; padding: 8px 12px !important; } .menu-reskin .e-schedule .e-schedule-toolbar .e-toolbar-items { background: transparent !important; } /* Navigation buttons (prev/next/today) */ .menu-reskin .e-schedule .e-schedule-toolbar .e-toolbar-item .e-tbar-btn { background: #ffffff !important; border: 1px solid #d1d5db !important; border-radius: 6px !important; color: #374151 !important; transition: all 0.2s ease !important; margin: 0 2px !important; } .menu-reskin .e-schedule .e-schedule-toolbar .e-toolbar-item .e-tbar-btn:hover { background: #f3f4f6 !important; border-color: #9ca3af !important; } .menu-reskin .e-schedule .e-schedule-toolbar .e-toolbar-item .e-tbar-btn.e-active, .menu-reskin .e-schedule .e-schedule-toolbar .e-toolbar-item .e-tbar-btn:focus { background: var(--color-primary, #7AA239) !important; border-color: var(--color-primary, #7AA239) !important; color: #ffffff !important; } /* Date range text */ .menu-reskin .e-schedule .e-schedule-toolbar .e-date-range .e-tbar-btn-text { font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; font-size: 15px !important; color: #1f2937 !important; } /* View switcher buttons (Day/Week/Month etc.) */ .menu-reskin .e-schedule .e-schedule-toolbar .e-views .e-tbar-btn { background: #ffffff !important; border: 1px solid #d1d5db !important; border-radius: 6px !important; color: #6b7280 !important; font-weight: 500 !important; padding: 6px 12px !important; } .menu-reskin .e-schedule .e-schedule-toolbar .e-views .e-tbar-btn:hover { background: #f9fafb !important; color: #374151 !important; } .menu-reskin .e-schedule .e-schedule-toolbar .e-views .e-tbar-btn.e-active-view { background: var(--color-primary, #7AA239) !important; border-color: var(--color-primary, #7AA239) !important; color: #ffffff !important; } /* Header cells (day names, dates) */ .menu-reskin .e-schedule .e-header-cells { background: #f8fafc !important; border-color: #e5e7eb !important; font-family: 'Inter', sans-serif !important; } .menu-reskin .e-schedule .e-header-cells .e-header-day { font-weight: 600 !important; color: #6b7280 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } .menu-reskin .e-schedule .e-header-cells .e-header-date { font-weight: 600 !important; color: #1f2937 !important; font-size: 18px !important; } /* Current day highlight */ .menu-reskin .e-schedule .e-header-cells.e-current-day { background: rgba(122, 162, 57, 0.08) !important; } .menu-reskin .e-schedule .e-header-cells.e-current-day .e-header-date { color: var(--color-primary, #7AA239) !important; } /* Time cells (left side time column) */ .menu-reskin .e-schedule .e-time-cells-wrap .e-time-cells { border-color: #e5e7eb !important; } .menu-reskin .e-schedule .e-time-slots { font-size: 11px !important; color: #6b7280 !important; font-weight: 500 !important; } /* Work cells (main grid) */ .menu-reskin .e-schedule .e-work-cells { border-color: #f1f5f9 !important; background: #ffffff !important; } .menu-reskin .e-schedule .e-work-cells:hover { background: rgba(122, 162, 57, 0.04) !important; } .menu-reskin .e-schedule .e-work-cells.e-current-day { background: rgba(122, 162, 57, 0.03) !important; } /* Current time indicator */ .menu-reskin .e-schedule .e-current-timeline { border-top: 2px solid var(--color-primary, #7AA239) !important; } .menu-reskin .e-schedule .e-current-time { color: var(--color-primary, #7AA239) !important; font-weight: 600 !important; } /* Appointments / Events */ .menu-reskin .e-schedule .e-appointment { border-radius: 6px !important; border: none !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important; transition: transform 0.15s ease, box-shadow 0.15s ease !important; font-family: 'Inter', sans-serif !important; } .menu-reskin .e-schedule .e-appointment:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; } .menu-reskin .e-schedule .e-appointment .e-subject { font-weight: 500 !important; font-size: 12px !important; } .menu-reskin .e-schedule .e-appointment .e-time { font-size: 10px !important; opacity: 0.9 !important; } /* More events indicator */ .menu-reskin .e-schedule .e-more-indicator { color: var(--color-primary, #7AA239) !important; font-weight: 600 !important; } /* Quick info popup */ .menu-reskin .e-schedule .e-quick-popup-wrapper { border-radius: 10px !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important; border: 1px solid #e5e7eb !important; overflow: hidden !important; } .menu-reskin .e-schedule .e-quick-popup-wrapper .e-event-popup { border-radius: 10px !important; } .menu-reskin .e-schedule .e-quick-popup-wrapper .e-popup-header { background: linear-gradient(135deg, var(--color-primary, #7AA239) 0%, #6b8f2f 100%) !important; padding: 12px 16px !important; } .menu-reskin .e-schedule .e-quick-popup-wrapper .e-subject-wrap .e-subject { font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; font-size: 16px !important; } .menu-reskin .e-schedule .e-quick-popup-wrapper .e-popup-content { padding: 16px !important; } .menu-reskin .e-schedule .e-quick-popup-wrapper .e-popup-footer { padding: 12px 16px !important; background: #f8fafc !important; border-top: 1px solid #e5e7eb !important; } /* Quick popup buttons */ .menu-reskin .e-schedule .e-quick-popup-wrapper .e-event-edit, .menu-reskin .e-schedule .e-quick-popup-wrapper .e-event-delete { border-radius: 6px !important; font-weight: 500 !important; padding: 8px 16px !important; transition: all 0.2s ease !important; } .menu-reskin .e-schedule .e-quick-popup-wrapper .e-event-edit { background: var(--color-primary, #7AA239) !important; border-color: var(--color-primary, #7AA239) !important; color: #ffffff !important; } .menu-reskin .e-schedule .e-quick-popup-wrapper .e-event-edit:hover { background: #6b8f2f !important; } .menu-reskin .e-schedule .e-quick-popup-wrapper .e-event-delete { background: #ffffff !important; border: 1px solid #ef4444 !important; color: #ef4444 !important; } .menu-reskin .e-schedule .e-quick-popup-wrapper .e-event-delete:hover { background: #fef2f2 !important; } /* Editor dialog */ .menu-reskin .e-schedule-dialog { border-radius: 12px !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important; } .menu-reskin .e-schedule-dialog .e-dlg-header-content { background: linear-gradient(135deg, var(--color-primary, #7AA239) 0%, #6b8f2f 100%) !important; padding: 16px 20px !important; } .menu-reskin .e-schedule-dialog .e-dlg-header { font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; color: #ffffff !important; } .menu-reskin .e-schedule-dialog .e-footer-content .e-btn { border-radius: 6px !important; font-weight: 500 !important; padding: 8px 20px !important; } .menu-reskin .e-schedule-dialog .e-footer-content .e-primary { background: var(--color-primary, #7AA239) !important; border-color: var(--color-primary, #7AA239) !important; } /* Resource header (left sidebar with resource names) */ .menu-reskin .e-schedule .e-resource-cells { background: #f8fafc !important; border-color: #e5e7eb !important; font-weight: 600 !important; color: #374151 !important; } /* Resource color indicators */ .menu-reskin .e-schedule .e-resource-cells .e-resource-text { font-family: 'Inter', sans-serif !important; font-size: 12px !important; } /* Month view specific */ .menu-reskin .e-schedule .e-month-view .e-work-cells { border-color: #e5e7eb !important; } .menu-reskin .e-schedule .e-month-view .e-date-header { font-weight: 600 !important; color: #374151 !important; } .menu-reskin .e-schedule .e-month-view .e-current-date .e-date-header { background: var(--color-primary, #7AA239) !important; color: #ffffff !important; border-radius: 50% !important; width: 28px !important; height: 28px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Tooltip styling */ .menu-reskin .e-schedule .e-schedule-event-tooltip { background: #1f2937 !important; border-radius: 8px !important; padding: 12px 16px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important; } .menu-reskin .e-schedule .tooltip-wrap { font-family: 'Inter', sans-serif !important; } .menu-reskin .e-schedule .tooltip-wrap .name { font-weight: 600 !important; font-size: 14px !important; margin-bottom: 8px !important; color: #ffffff !important; } .menu-reskin .e-schedule .tooltip-wrap .time, .menu-reskin .e-schedule .tooltip-wrap .city { font-size: 12px !important; color: #d1d5db !important; margin-bottom: 4px !important; } /* Resource filter checkboxes at bottom */ .menu-reskin .e-schedule-resource-toolbar, .menu-reskin .resource-filter-container { background: #ffffff !important; border-top: 1px solid #e5e7eb !important; padding: 12px 16px !important; display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } .menu-reskin .resource-checkbox-wrapper { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 12px !important; background: #f3f4f6 !important; border-radius: 20px !important; cursor: pointer !important; transition: all 0.2s ease !important; font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 500 !important; color: #374151 !important; } .menu-reskin .resource-checkbox-wrapper:hover { background: #e5e7eb !important; } .menu-reskin .resource-checkbox-wrapper.active { background: rgba(122, 162, 57, 0.15) !important; color: var(--color-primary, #7AA239) !important; } .menu-reskin .resource-checkbox-wrapper input[type="checkbox"] { width: 16px !important; height: 16px !important; accent-color: var(--color-primary, #7AA239) !important; } .menu-reskin .resource-checkbox-wrapper .resource-color-dot { width: 10px !important; height: 10px !important; border-radius: 50% !important; display: inline-block !important; } /* All-day row */ .menu-reskin .e-schedule .e-all-day-cells { background: #fafafa !important; border-color: #e5e7eb !important; } .menu-reskin .e-schedule .e-all-day-appointment-wrapper .e-appointment { border-radius: 4px !important; } /* Agenda view */ .menu-reskin .e-schedule .e-agenda-view .e-agenda-item { border-radius: 8px !important; margin: 4px 8px !important; border-left: 4px solid !important; } .menu-reskin .e-schedule .e-agenda-view .e-agenda-item:hover { background: #f9fafb !important; } /* Resize and drag handles */ .menu-reskin .e-schedule .e-appointment .e-appointment-resize { background: rgba(255, 255, 255, 0.8) !important; } /* Blocked time slots */ .menu-reskin .e-schedule .e-block-appointment { background: repeating-linear-gradient( 45deg, #f3f4f6, #f3f4f6 5px, #e5e7eb 5px, #e5e7eb 10px ) !important; } /* ========================================================================== ZITADEL Login Integration ========================================================================== */ /* ZITADEL Login Button */ .btn-zitadel { width: 100%; height: 50px; font-size: 16px; font-weight: 600; border: none; border-radius: 8px; background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); color: #ffffff !important; box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.35); transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; text-decoration: none !important; } .btn-zitadel:hover, .btn-zitadel:focus { background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%); box-shadow: 0 6px 20px 0 rgba(99, 102, 241, 0.45); transform: translateY(-2px); color: #ffffff !important; text-decoration: none !important; } .btn-zitadel:active { transform: translateY(0); box-shadow: 0 2px 8px 0 rgba(99, 102, 241, 0.3); } .btn-zitadel i { font-size: 18px; } /* Login Divider (or) */ .login-divider { display: flex; align-items: center; margin: 25px 0; } .login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; } .login-divider span { padding: 0 15px; color: #94a3b8; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } /* ========================================================================== WAITING / LOADING PAGE - Status Pages ========================================================================== */ .menu-reskin .waiting-container { display: flex; justify-content: center; align-items: center; min-height: 60vh; padding: 20px; } .menu-reskin .waiting-card { background: var(--menu-bg-card); border-radius: 12px; box-shadow: var(--menu-shadow-lg); padding: 40px 50px; text-align: center; max-width: 500px; width: 100%; border-top: 4px solid var(--color-primary); } .menu-reskin .waiting-spinner { width: 60px; height: 60px; border: 4px solid var(--menu-border); border-top-color: var(--color-primary); border-radius: 50%; animation: waitingSpinner 1s linear infinite; margin: 0 auto 24px; } @keyframes waitingSpinner { to { transform: rotate(360deg); } } .menu-reskin .waiting-icon { font-size: 48px; color: var(--color-primary); margin-bottom: 16px; } .menu-reskin .waiting-title { font-family: var(--menu-font-heading); font-size: 20px; font-weight: 600; color: var(--menu-text); margin: 0 0 12px 0; } .menu-reskin .waiting-message { font-family: var(--menu-font-body); font-size: 14px; color: var(--menu-text-muted); line-height: 1.6; margin: 0 0 8px 0; } .menu-reskin .waiting-message i { color: var(--color-primary); margin-right: 6px; } .menu-reskin .waiting-hint { font-family: var(--menu-font-body); font-size: 12px; color: #9ca3af; margin: 16px 0 0 0; padding-top: 16px; border-top: 1px solid var(--menu-border-light); } .menu-reskin .waiting-hint i { margin-right: 4px; } /* Animated dots for waiting title */ .menu-reskin .waiting-dots::after { content: ''; animation: waitingDots 1.5s steps(4, end) infinite; } @keyframes waitingDots { 0%, 20% { content: ''; } 40% { content: '.'; } 60% { content: '..'; } 80%, 100% { content: '...'; } } /* ========================================================================== INVOICE PAGE - Modern Invoice View ========================================================================== */ /* Invoice Header Container */ .menu-reskin .invoice-createinvoice { font-family: var(--menu-font-body); } /* Compact row spacing in invoice header */ .menu-reskin .invoice-createinvoice > .row { margin-bottom: 8px; } .menu-reskin .invoice-createinvoice > .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; } /* Invoice Header Form - Minimal line spacing */ .menu-reskin .invoice-createinvoice .form-horizontal .form-group { margin-bottom: 0 !important; margin-top: 0 !important; padding-top: 2px !important; padding-bottom: 2px !important; } .menu-reskin .invoice-createinvoice .form-horizontal .control-label { font-weight: 500; color: var(--menu-text-muted); font-size: 12px; padding-top: 2px !important; padding-bottom: 0 !important; margin-bottom: 0 !important; line-height: 1.3; } .menu-reskin .invoice-createinvoice .form-control-static { font-weight: 500; color: var(--menu-text); padding-top: 2px !important; padding-bottom: 2px !important; min-height: auto !important; line-height: 1.3; margin-bottom: 0 !important; } /* Compact form inputs */ .menu-reskin .invoice-createinvoice .form-control { height: 24px !important; padding: 2px 6px !important; font-size: 12px; } /* Kartik Select2 compact */ .menu-reskin .invoice-createinvoice .select2-container--krajee .select2-selection--single { height: 24px !important; min-height: 24px !important; } .menu-reskin .invoice-createinvoice .select2-container--krajee .select2-selection--single .select2-selection__rendered { padding: 1px 6px !important; line-height: 20px !important; } .menu-reskin .invoice-createinvoice .select2-container--krajee .select2-selection--single .select2-selection__arrow { height: 22px !important; } /* Kartik DateControl compact */ .menu-reskin .invoice-createinvoice .input-group { margin-bottom: 0 !important; } .menu-reskin .invoice-createinvoice .input-group .input-group-addon { padding: 2px 6px !important; line-height: 1.2; } /* Row containers in form - minimal spacing */ .menu-reskin .invoice-createinvoice .kv-fieldset-inline { margin-bottom: 0 !important; } .menu-reskin .invoice-createinvoice .form-horizontal .row { margin-bottom: 0 !important; } /* Hide empty columns to save space */ .menu-reskin .invoice-createinvoice .form-horizontal .col-sm-3:empty, .menu-reskin .invoice-createinvoice .form-horizontal .col-md-3:empty { display: none; } /* Invoice Action Buttons Container - Compact */ .menu-reskin .invoice-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; background: var(--menu-bg-card); border-radius: 8px; box-shadow: var(--menu-shadow); margin-bottom: 10px; } .menu-reskin .invoice-actions-group { display: flex; flex-wrap: wrap; gap: 4px; } .menu-reskin .invoice-actions-group + .invoice-actions-group { padding-top: 6px; border-top: 1px solid var(--menu-border-light); width: 100%; } /* Unified Invoice Buttons - Compact */ .menu-reskin .invoice-createinvoice .btn, .menu-reskin .invoice-button-table .btn { font-family: var(--menu-font-body); font-size: 11px; font-weight: 500; padding: 5px 10px; border-radius: 5px; border: none; transition: all 0.2s ease; min-width: 110px; text-align: center; } /* Primary Action - VET7well Green */ .menu-reskin .invoice-createinvoice .btn-primary, .menu-reskin .invoice-button-table .btn-primary { background: var(--color-primary-gradient) !important; color: #fff !important; box-shadow: 0 2px 4px rgba(122, 162, 57, 0.3); } .menu-reskin .invoice-createinvoice .btn-primary:hover, .menu-reskin .invoice-button-table .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(122, 162, 57, 0.4); } /* Success - Green (PDF, Send, etc) */ .menu-reskin .invoice-createinvoice .btn-success, .menu-reskin .invoice-button-table .btn-success { background: var(--color-success-gradient) !important; color: #fff !important; box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3); } .menu-reskin .invoice-createinvoice .btn-success:hover, .menu-reskin .invoice-button-table .btn-success:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(34, 197, 94, 0.4); } /* Warning - Orange (Finish, Account, Cash) */ .menu-reskin .invoice-createinvoice .btn-warning, .menu-reskin .invoice-button-table .btn-warning { background: var(--color-warning-gradient) !important; color: #fff !important; box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3); } .menu-reskin .invoice-createinvoice .btn-warning:hover, .menu-reskin .invoice-button-table .btn-warning:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(245, 158, 11, 0.4); } /* Danger - Red (Cancel, Reset, etc) */ .menu-reskin .invoice-createinvoice .btn-danger, .menu-reskin .invoice-button-table .btn-danger { background: var(--color-danger-gradient) !important; color: #fff !important; box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3); } .menu-reskin .invoice-createinvoice .btn-danger:hover, .menu-reskin .invoice-button-table .btn-danger:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4); } /* Info - Cyan (Duplicate, Surcharges, etc) */ .menu-reskin .invoice-createinvoice .btn-info, .menu-reskin .invoice-button-table .btn-info { background: var(--color-info-gradient) !important; color: #fff !important; box-shadow: 0 2px 4px rgba(6, 182, 212, 0.3); } .menu-reskin .invoice-createinvoice .btn-info:hover, .menu-reskin .invoice-button-table .btn-info:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(6, 182, 212, 0.4); } /* Invoice Button Table - Compact layout */ .menu-reskin .invoice-button-table { border-collapse: separate; border-spacing: 2px; } .menu-reskin .invoice-button-table td { padding: 1px !important; } .menu-reskin .invoice-button-table tr { line-height: 1.2; } /* Invoice Summary Card */ .menu-reskin .invoice-summary-card { background: var(--menu-bg-card); border-radius: 10px; box-shadow: var(--menu-shadow); border-left: 4px solid var(--color-primary); overflow: hidden; } .menu-reskin .invoice-summary-card .box-body, .menu-reskin .invoice-createinvoice .col-xs-3 > .box .box-body { padding: 10px 12px; } .menu-reskin .invoice-summary-card table, .menu-reskin .invoice-createinvoice .col-xs-3 > .box table { width: 100%; } .menu-reskin .invoice-summary-card td, .menu-reskin .invoice-createinvoice .col-xs-3 > .box table td { padding: 3px 0; font-size: 13px; } .menu-reskin .invoice-summary-card td:first-child, .menu-reskin .invoice-createinvoice .col-xs-3 > .box table td:first-child { color: var(--menu-text-muted); font-weight: 500; } .menu-reskin .invoice-summary-card td:last-child, .menu-reskin .invoice-createinvoice .col-xs-3 > .box table td:last-child { text-align: right; font-weight: 500; color: var(--menu-text); } /* Total row emphasis */ .menu-reskin .invoice-summary-card tr:has(strong) td, .menu-reskin .invoice-createinvoice .col-xs-3 > .box table tr:has(strong) td { font-size: 16px; padding-top: 10px; border-top: 1px solid var(--menu-border-light); } /* Outstanding amount */ .menu-reskin .invoice-summary-card td i, .menu-reskin .invoice-createinvoice .col-xs-3 > .box table td i { color: var(--menu-text-muted); } /* Barcode Scanner Input */ .menu-reskin .invoice-createinvoice #invoice-barcode { background-color: #fef9c3 !important; border: 2px solid var(--color-warning); border-radius: 6px; padding: 8px 12px; font-size: 14px; min-width: 200px; } .menu-reskin .invoice-createinvoice #invoice-barcode:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(122, 162, 57, 0.2); outline: none; } .menu-reskin .invoice-createinvoice #invoice-barqty { border: 1px solid var(--menu-border); border-radius: 6px; padding: 8px; width: 60px !important; text-align: center; } /* Invoice Tabs styling */ .menu-reskin .invoice-createinvoice .tabs-x { margin-top: 20px; } .menu-reskin .invoice-createinvoice .tabs-x .nav-tabs { border-bottom: 2px solid var(--menu-border-light); } .menu-reskin .invoice-createinvoice .tabs-x .nav-tabs > li > a { font-family: var(--menu-font-body); font-weight: 500; color: var(--menu-text-muted); border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 10px 16px; transition: all 0.2s ease; } .menu-reskin .invoice-createinvoice .tabs-x .nav-tabs > li > a:hover { background: transparent; color: var(--color-primary); border-bottom-color: var(--color-primary-light); } .menu-reskin .invoice-createinvoice .tabs-x .nav-tabs > li.active > a { color: var(--color-primary); border-bottom-color: var(--color-primary); background: transparent; } .menu-reskin .invoice-createinvoice .tabs-x .tab-content { padding: 20px 0; border: none; } /* Invoice Grid/Table */ .menu-reskin .invoice-createinvoice .table { border-radius: 8px; overflow: hidden; box-shadow: var(--menu-shadow); } .menu-reskin .invoice-createinvoice .table thead tr { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); } .menu-reskin .invoice-createinvoice .table thead th { font-weight: 600; color: var(--menu-text); border-bottom: 2px solid var(--menu-border); padding: 12px 10px; font-size: 13px; } .menu-reskin .invoice-createinvoice .table tbody td { padding: 10px; vertical-align: middle; border-color: var(--menu-border-light); } .menu-reskin .invoice-createinvoice .table tbody tr:hover { background-color: var(--menu-bg-hover); } /* Invoice Notes Section */ .menu-reskin .invoice-createinvoice + form + .row, .menu-reskin .invoice-createinvoice ~ .row:last-child { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--menu-border-light); } /* ============================================================ APPOINTMENT CREATE/EDIT - Modern Reskin ============================================================ */ /* Container */ .menu-reskin .appointments-create { padding: 0; } /* Header Menu - Navbar as modern tabs */ .menu-reskin .appointments-create .navbar, .menu-reskin .appointments-form .navbar { background: transparent !important; border: none !important; box-shadow: none !important; margin-bottom: 20px !important; min-height: auto !important; padding: 0 !important; } .menu-reskin .appointments-create .navbar .container-left, .menu-reskin .appointments-form .navbar .container-left { padding: 0 !important; margin: 0 !important; width: 100% !important; } .menu-reskin .appointments-create .navbar-collapse, .menu-reskin .appointments-form .navbar-collapse { padding: 0 !important; } .menu-reskin .appointments-create .navbar-nav, .menu-reskin .appointments-form .navbar-nav { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; float: none !important; margin: 0 !important; } .menu-reskin .appointments-create .navbar-nav > li, .menu-reskin .appointments-form .navbar-nav > li { float: none !important; display: inline-block !important; } .menu-reskin .appointments-create .navbar-nav > li > a, .menu-reskin .appointments-form .navbar-nav > li > a { background: var(--menu-bg-card) !important; border: 1px solid var(--menu-border) !important; border-radius: 10px !important; padding: 10px 18px !important; color: var(--menu-text) !important; font-size: 13px !important; font-weight: 500 !important; transition: all 0.2s ease !important; line-height: 1.4 !important; } .menu-reskin .appointments-create .navbar-nav > li > a:hover, .menu-reskin .appointments-form .navbar-nav > li > a:hover { background: var(--menu-bg-hover) !important; border-color: var(--color-primary-light) !important; color: var(--color-primary-dark) !important; transform: translateY(-1px) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important; } .menu-reskin .appointments-create .navbar-nav > li.active > a, .menu-reskin .appointments-form .navbar-nav > li.active > a { background: var(--color-primary-gradient) !important; border-color: var(--color-primary) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(122, 162, 57, 0.3) !important; } .menu-reskin .appointments-create .navbar-nav > li.active > a i, .menu-reskin .appointments-form .navbar-nav > li.active > a i { color: #fff !important; } /* Form Card */ .menu-reskin .appointments-create .appointments-form, .menu-reskin .appointments-form { background: var(--menu-bg-card) !important; border-radius: 12px !important; box-shadow: var(--menu-shadow) !important; padding: 24px !important; border: 1px solid var(--menu-border-light) !important; } /* Form Rows */ .menu-reskin .appointments-create .row, .menu-reskin .appointments-form .row { margin-bottom: 8px; } /* Form Fields */ .menu-reskin .appointments-create .form-group, .menu-reskin .appointments-form .form-group { margin-bottom: 16px; } .menu-reskin .appointments-create .control-label, .menu-reskin .appointments-form .control-label { font-weight: 600 !important; color: var(--menu-text) !important; font-size: 13px !important; margin-bottom: 6px !important; } .menu-reskin .appointments-create .form-control, .menu-reskin .appointments-form .form-control { border: 1px solid var(--menu-border) !important; border-radius: 8px !important; padding: 10px 14px !important; font-size: 14px !important; color: var(--menu-text) !important; background: #fff !important; transition: all 0.2s ease !important; height: auto !important; } .menu-reskin .appointments-create .form-control:focus, .menu-reskin .appointments-form .form-control:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px var(--color-primary-bg) !important; outline: none !important; } /* Textarea */ .menu-reskin .appointments-create textarea.form-control, .menu-reskin .appointments-form textarea.form-control { min-height: 100px; resize: vertical; } /* Select2 styling */ .menu-reskin .appointments-create .select2-container--krajee-bs3 .select2-selection, .menu-reskin .appointments-form .select2-container--krajee-bs3 .select2-selection { border: 1px solid var(--menu-border) !important; border-radius: 8px !important; min-height: 40px !important; padding: 4px 8px !important; } .menu-reskin .appointments-create .select2-container--krajee-bs3.select2-container--focus .select2-selection, .menu-reskin .appointments-form .select2-container--krajee-bs3.select2-container--focus .select2-selection { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px var(--color-primary-bg) !important; } /* Checkboxes */ .menu-reskin .appointments-create .checkbox label, .menu-reskin .appointments-form .checkbox label { font-weight: 500 !important; color: var(--menu-text) !important; font-size: 13px !important; padding-left: 5px !important; } /* DateTimePicker */ .menu-reskin .appointments-create .input-group, .menu-reskin .appointments-form .input-group { border-radius: 8px; overflow: hidden; } .menu-reskin .appointments-create .input-group .input-group-addon, .menu-reskin .appointments-form .input-group .input-group-addon { background: var(--menu-bg) !important; border-color: var(--menu-border) !important; color: var(--menu-text-muted) !important; } /* Color Picker */ .menu-reskin .appointments-create .sp-replacer, .menu-reskin .appointments-form .sp-replacer { border: 1px solid var(--menu-border) !important; border-radius: 8px !important; padding: 6px !important; } /* Submit Buttons */ .menu-reskin .appointments-create .form-group > .btn, .menu-reskin .appointments-form > div > .form-group > .btn { border: none !important; border-radius: 10px !important; padding: 12px 24px !important; font-size: 14px !important; font-weight: 600 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important; transition: all 0.2s ease !important; letter-spacing: 0.3px !important; } .menu-reskin .appointments-create .form-group > .btn:hover, .menu-reskin .appointments-form > div > .form-group > .btn:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important; } .menu-reskin .appointments-create .btn-success, .menu-reskin .appointments-form .btn-success { background: var(--color-success-gradient) !important; color: #fff !important; } .menu-reskin .appointments-create .btn-primary, .menu-reskin .appointments-form .btn-primary { background: var(--color-primary-gradient) !important; color: #fff !important; } /* Upgrade Info Box */ .menu-reskin .appointments-create .btn-info, .menu-reskin .appointments-form .btn-info { background: var(--color-info-gradient) !important; color: #fff !important; border: none !important; border-radius: 8px !important; } /* Responsive spacer - hide unnecessary breaks */ .menu-reskin .appointments-create .responsive-br { display: none !important; } /* Form Sections */ .menu-reskin .appointments-create .form-section, .menu-reskin .appointments-form .form-section { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--menu-border-light); } .menu-reskin .appointments-create .form-section:last-of-type, .menu-reskin .appointments-form .form-section:last-of-type { border-bottom: none; margin-bottom: 0; } .menu-reskin .appointments-create .form-section-title, .menu-reskin .appointments-form .form-section-title { font-size: 14px; font-weight: 600; color: var(--color-primary-dark); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .menu-reskin .appointments-create .form-section-title i, .menu-reskin .appointments-form .form-section-title i { color: var(--color-primary); font-size: 15px; } /* Form Actions (Submit buttons area) */ .menu-reskin .appointments-create .form-actions, .menu-reskin .appointments-form .form-actions { display: flex; gap: 10px; padding-top: 20px !important; padding-bottom: 0 !important; border-top: 2px solid var(--menu-border-light) !important; border-bottom: none !important; } /* Upgrade Notice */ .menu-reskin .appointments-create .upgrade-notice, .menu-reskin .appointments-form .upgrade-notice { background: var(--color-info-bg); border-left: 3px solid var(--color-info); border-radius: 0 8px 8px 0; padding: 12px 16px; color: var(--color-info-text); font-size: 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .menu-reskin .appointments-create .upgrade-notice i:first-child, .menu-reskin .appointments-form .upgrade-notice i:first-child { color: var(--color-info); font-size: 16px; } /* Appointment Form Card */ .menu-reskin .appointment-form-card { background: var(--menu-bg-card); border-radius: 12px; box-shadow: var(--menu-shadow); padding: 24px; border: 1px solid var(--menu-border-light); } /* Loading spinner area */ .menu-reskin .appointments-create #genloadform { text-align: center; padding: 10px; } .menu-reskin .appointments-create #genloadform .fa-spinner { color: var(--color-primary); font-size: 24px; }