/* Custom ERP Management System Theme Stylesheet */
/* Custom Typography & Font Selection */
:root {
--primary: #4f46e5;
--primary-hover: #4338ca;
--primary-light: #e0e7ff;
--success: #10b981;
--success-hover: #059669;
--success-light: #d1fae5;
--danger: #ef4444;
--danger-hover: #dc2626;
--danger-light: #fee2e2;
--warning: #f59e0b;
--warning-hover: #d97706;
--warning-light: #fef3c7;
--info: #06b6d4;
--info-hover: #0891b2;
--info-light: #ecfeff;
--bg-main: #f8fafc;
--bg-card: #ffffff;
--bg-sidebar: #0f172a;
--text-main: #1e293b;
--text-muted: #64748b;
--text-light: #94a3b8;
--text-on-dark: #f8fafc;
--border-color: #e2e8f0;
--border-focus: #818cf8;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 18px;
--radius-xl: 24px;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-main);
color: var(--text-main);
margin: 0;
padding: 0;
min-height: 100vh;
font-size: 0.72rem;
/* Even smaller base font size */
}
/* Prevent all flickering on page load */
.erp-content {
opacity: 0;
transition: none !important;
}
.select2-enable {
opacity: 0;
transition: none !important;
}
.select2-container {
transition: none !important;
}
/* Master Layout Framework */
.erp-wrapper {
display: flex;
min-height: 100vh;
overflow-x: hidden;
}
.erp-sidebar {
width: 200px;
background-color: #ffffff;
color: var(--text-main);
display: flex;
flex-direction: column;
flex-shrink: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 100;
border-right: 1px solid #e2e8f0;
}
.sidebar-brand {
padding: 0.25rem 0.75rem;
color: var(--text-main);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-bottom: 1px solid #e2e8f0;
background: #ffffff;
height: 56px;
max-height: 56px;
min-height: 56px;
overflow: hidden;
box-sizing: border-box;
}
.sidebar-brand-logo-img {
max-width: 100%;
max-height: 40px !important;
height: auto !important;
width: auto !important;
object-fit: contain;
transition: all 0.3s ease;
display: block;
}
.erp-wrapper.sidebar-collapsed .sidebar-brand-logo-img {
max-width: 32px;
max-height: 32px !important;
}
.sidebar-brand-icon {
font-size: 1rem;
margin-bottom: 0.25rem;
}
.sidebar-brand-text {
font-size: 1.1rem;
font-weight: 800;
letter-spacing: -0.025em;
width: 100%;
word-wrap: break-word;
color: var(--text-main);
}
.sidebar-menu {
list-style: none;
padding: 1rem 0.75rem;
margin: 0;
overflow-y: auto;
flex-grow: 1;
}
.sidebar-item {
margin-bottom: 0. 15rem;
position: relative;
}
.sidebar-link {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.6rem;
color: var(--text-muted);
text-decoration: none;
border-radius: var(--radius-sm);
font-size: 0.72rem;
font-weight: 500;
transition: all 0.2s ease;
cursor: pointer;
}
/* Standardized List Page Components */
.search-section-erp {
padding: 1rem 1.5rem;
background-color: #ffffff;
border-bottom: 1px solid var(--border-color);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
}
.search-field-wrapper {
position: relative;
flex-grow: 1;
max-width: 400px;
}
.search-field-wrapper i {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--text-light);
font-size: 0.85rem;
pointer-events: none;
}
.search-field-wrapper .form-control-erp {
padding-left: 2.25rem;
}
/* Medium width search field variant */
.search-field-md {
max-width: 300px;
}
.btn-erp {
border-radius: 8px;
font-weight: 600;
padding: 0.55rem 1.25rem;
transition: all 0.2s ease;
border: 2px solid transparent;
}
.btn-erp-success {
background-color: var(--success);
color: #ffffff;
border-color: var(--success);
box-shadow: 0 1px 2px rgba(16, 185, 129, 0.2);
}
.btn-erp-success:hover {
background-color: var(--success-hover);
border-color: var(--success-hover);
box-shadow: 0 4px 10px -2px rgba(16, 185, 129, 0.3);
transform: translateY(-1px);
}
.btn-erp-primary {
background-color: var(--primary);
color: #ffffff;
border-color: var(--primary);
box-shadow: 0 1px 2px rgba(79, 70, 229, 0.2);
}
.btn-erp-primary:hover {
background-color: var(--primary-hover);
border-color: var(--primary-hover);
box-shadow: 0 4px 10px -2px rgba(79, 70, 229, 0.3);
transform: translateY(-1px);
}
.btn-erp-secondary {
background-color: #f8fafc;
color: #475569;
border-color: #e2e8f0;
}
.btn-erp-secondary:hover {
background-color: #f1f5f9;
color: #1f2937;
border-color: #cbd5e1;
transform: translateY(-1px);
}
.btn-erp-back {
background-color: var(--primary-light);
color: var(--primary);
border-color: var(--primary-light);
font-weight: 600;
}
.btn-erp-back:hover {
background-color: var(--primary);
color: #ffffff;
border-color: var(--primary);
box-shadow: 0 4px 10px -2px rgba(79, 70, 229, 0.3);
transform: translateY(-1px);
}
.btn-erp-danger {
background-color: var(--danger);
color: #ffffff;
border-color: var(--danger);
box-shadow: 0 1px 2px rgba(239, 68, 68, 0.2);
}
.btn-erp-danger:hover {
background-color: var(--danger-hover);
border-color: var(--danger-hover);
box-shadow: 0 4px 10px -2px rgba(239, 68, 68, 0.3);
transform: translateY(-1px);
}
.btn-erp-warning {
background-color: var(--warning);
color: #ffffff;
border-color: var(--warning);
box-shadow: 0 1px 2px rgba(245, 158, 11, 0.2);
}
.btn-erp-warning:hover {
background-color: var(--warning-hover);
border-color: var(--warning-hover);
box-shadow: 0 4px 10px -2px rgba(245, 158, 11, 0.3);
transform: translateY(-1px);
}
/* List Page Header Actions */
.list-header-actions {
display: flex;
align-items: center;
gap: 0.75rem;
margin-left: auto;
}
.sidebar-link:hover {
color: var(--primary);
background-color: #f1f5f9;
}
.sidebar-link.active {
color: var(--primary);
background-color: var(--primary-light);
font-weight: 600;
}
.sidebar-link i {
width: 14px;
font-size: 0.75rem;
text-align: center;
color: var(--text-light);
transition: color 0.2s ease;
}
.sidebar-link:hover i,
.sidebar-link.active i {
color: var(--primary);
}
.sidebar-section-title {
font-size: 0.55rem;
text-transform: uppercase;
font-weight: 800;
color: var(--text-light);
padding: 0.75rem 0.75rem 0.25rem 0.75rem;
letter-spacing: 0.05em;
}
/* Sidebar Dropdown Menu Styles */
.sidebar-dropdown {
list-style: none;
padding: 0.15rem 0 0.15rem 1.25rem;
margin: 0;
display: none;
}
.sidebar-item.open .sidebar-dropdown {
display: block;
}
.sidebar-dropdown-item {
margin-bottom: 0.1rem;
}
.sidebar-dropdown-link {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.3rem 0.5rem;
color: var(--text-muted);
text-decoration: none;
font-size: 0.68rem;
font-weight: 500;
border-radius: var(--radius-sm);
transition: all 0.2s ease;
}
.sidebar-dropdown-link:hover {
color: var(--primary);
background-color: #f1f5f9;
}
.sidebar-dropdown-link.active {
color: var(--primary);
background-color: var(--primary-light);
font-weight: 600;
}
.sidebar-dropdown-link i {
font-size: 0.45rem;
color: var(--text-light);
}
.sidebar-dropdown-link.active i {
color: var(--primary);
}
.sidebar-link .arrow-icon {
margin-left: auto;
font-size: 0.7rem;
color: var(--text-light);
transition: transform 0.2s ease;
}
.sidebar-link:hover .arrow-icon,
.sidebar-link.active .arrow-icon {
color: var(--primary);
}
.sidebar-item.open .sidebar-link .arrow-icon {
transform: rotate(90deg);
}
/* Main Content Area */
.erp-main {
flex-grow: 1;
display: flex;
flex-direction: column;
min-width: 0;
/* Prevents flex items from breaking layout on narrow screens */
}
.erp-header {
background-color: var(--bg-card);
border-bottom: 1px solid var(--border-color);
padding: 0.5rem 1.25rem 0.5rem 0.75rem;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: var(--shadow-sm);
z-index: 90;
}
.header-meta {
display: flex;
flex-direction: column;
}
.header-title {
margin: 0;
font-size: 1rem;
/* Smaller header */
font-weight: 800;
color: var(--text-main);
letter-spacing: -0.025em;
}
.header-subtitle {
margin: 0.1rem 0 0 0;
font-size: 0.7rem;
/* Smaller subtitle */
color: var(--text-muted);
}
.header-actions {
display: flex;
align-items: center;
gap: 1rem;
}
.user-profile-menu {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
color: var(--text-main);
}
.user-avatar-placeholder {
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, #6366f1, #a855f7);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.95rem;
border: 2px solid #fff;
box-shadow: var(--shadow-sm);
}
.date-filter-input {
max-width: 140px;
height: 32px;
}
.dashboard-chart-container {
flex: 1 1 auto;
position: relative;
height: 100%;
min-height: 280px;
}
.image-upload-input {
display: none;
}
.image-upload-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
border: 2px dashed var(--border-color);
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s;
}
.image-upload-wrapper:hover {
border-color: var(--primary);
background-color: var(--primary-light);
}
.variations-search {
width: 240px;
}
#image_preview {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
#warranty_policy_section {
display: none;
}
.product-form-group {
border: 1px solid rgba(226, 232, 240, 0.6);
border-radius: 8px;
padding: 0.6rem 0.85rem;
background: linear-gradient(180deg, #ffffff 0%, rgba(248, 250, 252, 0.4) 100%);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.015);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(4px);
}
.product-form-group:hover {
box-shadow: 0 3px 8px rgba(79, 70, 229, 0.05);
border-color: rgba(165, 180, 252, 0.5);
}
.product-form-group-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.4rem;
padding-bottom: 0.3rem;
border-bottom: 1px dashed rgba(226, 232, 240, 0.6);
}
.product-form-group-title {
margin: 0;
font-size: 0.75rem;
font-weight: 700;
color: #3730a3;
letter-spacing: 0.2px;
display: flex;
align-items: center;
}
.product-form-grid {
display: grid;
grid-template-columns: minmax(0, 7.5fr) minmax(0, 2.5fr);
gap: 0.75rem;
align-items: start;
}
.product-form-main-column {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.product-form-sidebar-column {
display: flex;
flex-direction: column;
gap: 0.75rem;
position: sticky;
top: 0.5rem;
}
/* Responsive Design for Product Form */
@media (max-width: 1024px) {
.product-form-grid {
grid-template-columns: 1fr;
}
.product-form-sidebar-column {
width: 100%;
position: static;
}
}
/* Additional Utility Classes */
.flex-col {
flex-direction: column;
}
.gap-2 {
gap: 0.5rem;
}
.w-full {
width: 100%;
}
.text-center {
text-align: center;
}
.flex-1 {
flex: 1;
}
.image-upload-wrapper {
width: 100%;
max-width: 100%;
height: 120px;
border: 2px dashed rgba(165, 180, 252, 0.6);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
background: rgba(238, 242, 255, 0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.image-upload-wrapper:hover {
border-color: #818cf8;
background: rgba(238, 242, 255, 0.8);
transform: scale(1.02);
}
#upload_icon {
color: #818cf8;
font-size: 2rem;
transition: all 0.3s ease;
}
.image-upload-wrapper:hover #upload_icon {
transform: translateY(-4px);
color: #6366f1;
}
.form-control-erp {
background-color: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
color: #1e293b;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.01);
}
.form-control-erp:focus {
background-color: #ffffff;
border-color: #818cf8;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.01);
outline: none;
}
.form-control-erp-sm {
padding: 0.35rem 0.6rem;
font-size: 0.75rem;
}
.form-control-erp-lg {
padding: 0.65rem 0.85rem;
font-size: 0.85rem;
font-weight: 500;
}
.form-label-erp {
font-size: 0.75rem;
font-weight: 600;
color: #475569;
margin-bottom: 0.3rem;
display: block;
letter-spacing: 0.2px;
}
.location-popup-btn {
padding: 0.5rem 1rem;
background-color: #f3f4f6;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
}
.location-popup-btn:hover {
background-color: #e5e7eb;
border-color: var(--primary);
}
.location-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
z-index: 1000;
align-items: center;
justify-content: center;
}
.location-popup {
background-color: white;
border-radius: var(--radius-md);
width: 90%;
max-width: 500px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.location-popup-header {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
}
.location-popup-title {
font-size: 1.125rem;
font-weight: 600;
margin: 0;
}
.location-popup-close {
font-size: 1.5rem;
cursor: pointer;
color: #6b7280;
}
.location-popup-close:hover {
color: #1f2937;
}
.location-popup-body {
padding: 1.5rem;
}
.location-field-row {
margin-bottom: 1rem;
}
.location-field-label {
display: block;
font-weight: 500;
margin-bottom: 0.5rem;
color: #374151;
}
.location-field-input {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
}
.location-popup-footer {
padding: 1rem 1.5rem;
border-top: 1px solid var(--border-color);
display: flex;
justify-content: flex-end;
}
.btn-location-save {
padding: 0.5rem 1.5rem;
background-color: var(--primary);
color: white;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
font-weight: 500;
}
.btn-location-save:hover {
background-color: #4338ca;
}
.attribute-picker-box {
background-color: white;
border: 1px solid var(--border-color);
border-radius: 3px;
padding: 0.35rem;
margin-bottom: 0.35rem;
}
.smart-attr-select-wrapper {
width: 100%;
}
.smart-attr-select {
width: 100%;
padding: 0.25rem 0.35rem;
border: 1px solid var(--border-color);
border-radius: 3px;
font-size: 0.68rem;
}
.selected-attributes-list {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-bottom: 0.35rem;
}
.attr-tag-card {
background-color: white;
border: 1px solid var(--border-color);
border-radius: 3px;
padding: 0.35rem;
min-width: 160px;
}
.attr-tag-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.25rem;
}
.attr-tag-name {
font-weight: 700;
color: #1f2937;
font-size: 0.68rem;
}
.attr-tag-remove {
color: #ef4444;
cursor: pointer;
font-size: 0.75rem;
}
.attr-values-flex {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.attr-val-pill {
padding: 0.1rem 0.35rem;
background-color: #f3f4f6;
border-radius: 9999px;
cursor: pointer;
font-size: 0.65rem;
user-select: none;
transition: all 0.2s;
}
.attr-val-pill:hover {
background-color: #e5e7eb;
}
.attr-val-pill.active {
background-color: var(--primary-light);
color: var(--primary);
font-weight: 700;
}
.smart-comb-table-wrapper {
background-color: white;
border: 1px solid var(--border-color);
border-radius: 3px;
overflow: hidden;
}
.attributes-filter-row {
padding: 0.35rem;
display: flex;
justify-content: flex-end;
}
.attributes-filter-group-right {
display: flex;
gap: 0.35rem;
}
.variations-search-input {
padding: 0.2rem 0.35rem;
border: 1px solid var(--border-color);
border-radius: 3px;
width: 180px;
font-size: 0.68rem;
}
.smart-comb-table {
width: 100%;
border-collapse: collapse;
}
.smart-comb-table th,
.smart-comb-table td {
padding: 0.25rem 0.35rem;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
.smart-comb-table th {
background-color: #f9fafb;
font-weight: 700;
font-size: 0.65rem;
}
.comb-config-text {
font-size: 0.65rem;
color: #374151;
}
.smart-comb-input {
padding: 0.15rem 0.25rem;
border: 1px solid var(--border-color);
border-radius: 3px;
width: 100%;
font-size: 0.65rem;
}
.tax-rule-select-smart {
padding: 0.15rem 0.25rem;
border: 1px solid var(--border-color);
border-radius: 3px;
width: 100%;
font-size: 0.65rem;
}
.var-delete-btn-smart {
background: none;
border: none;
color: #ef4444;
cursor: pointer;
padding: 0.1rem;
font-size: 0.75rem;
}
.stock-badge-blue {
display: inline-block;
padding: 0.05rem 0.25rem;
background-color: #dbeafe;
color: #1e40af;
border-radius: 9999px;
font-size: 0.6rem;
font-weight: 700;
}
.smart-pagination {
padding: 0 0.35rem 0.35rem;
}
.product-form-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 0.35rem;
}
.product-form-main-column {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.product-form-sidebar-column {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
@media (max-width: 991px) {
.product-form-grid {
grid-template-columns: 1fr;
}
}
.user-info-text {
display: flex;
flex-direction: column;
}
.user-name {
font-size: 0.85rem;
font-weight: 600;
}
.user-role {
font-size: 0.7rem;
color: var(--text-muted);
text-transform: capitalize;
}
/* Page Content Body */
.erp-container {
padding: 1rem;
background-color: #f8fafc;
min-height: 100vh;
}
/* Dashboard Statistics KPI Cards */
.dashboard-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
/* Compact variant: no bottom margin, used when grid sits directly inside a card with no extra padding needed */
.dashboard-stats-grid-compact {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
margin-bottom: 0;
padding: 1rem 1.25rem;
}
.stat-card {
background-color: var(--bg-card);
border-radius: var(--radius-md);
padding: 1.5rem;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-sm);
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.2s ease;
}
.dashboard-stats-grid-sm {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.stat-card-sm {
background-color: var(--bg-card);
border-radius: var(--radius-md);
padding: 1rem;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-sm);
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.2s ease;
}
.stat-card-sm .stat-card-title {
font-size: 0.70rem;
color: var(--text-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.25rem;
}
.stat-card-sm .stat-card-value {
font-size: 1.15rem;
font-weight: 800;
color: var(--text-primary);
}
.stat-card-sm .stat-card-icon {
width: 32px;
height: 32px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
}
.stat-card-sm:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.stat-card-details {
display: flex;
flex-direction: column;
}
.stat-card-title {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
.stat-card-value {
font-size: 1.6rem;
font-weight: 900;
color: var(--text-main);
line-height: 1;
}
.stat-card-desc {
margin-top: 0.4rem;
font-size: 0.75rem;
color: var(--text-muted);
}
.stat-card-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
}
.stat-card-icon.primary {
background-color: var(--primary-light);
color: var(--primary);
}
.stat-card-icon.success {
background-color: var(--success-light);
color: var(--success);
}
.stat-card-icon.danger {
background-color: var(--danger-light);
color: var(--danger);
}
.stat-card-icon.warning {
background-color: var(--warning-light);
color: var(--warning);
}
/* General ERP Card Structure */
.erp-card {
background-color: var(--bg-card);
border-radius: 12px;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
margin-bottom: 0.75rem;
}
.erp-card-header {
padding: 1rem 1.25rem;
border-bottom: 1px solid #f1f5f9;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.erp-card-title {
margin: 0;
font-size: 0.9rem;
font-weight: 800;
color: #1f2937;
display: flex;
align-items: center;
gap: 0.5rem;
letter-spacing: -0.2px;
}
.erp-card-body {
padding: 1.25rem;
}
.erp-card-footer {
padding: 0.85rem 1.25rem;
background-color: #fafbfe;
border-top: 1px solid #f1f5f9;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
/* Dashboard Chart Grid */
.dashboard-charts-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1.5rem;
margin-bottom: 2rem;
}
@media (max-width: 1200px) {
.dashboard-charts-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.dashboard-charts-grid {
grid-template-columns: 1fr;
}
}
.chart-wrapper {
position: relative;
width: 100%;
height: 190px;
}
/* Tables Styling */
.table-erp-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}
/* Responsive table wrapper for mobile only */
@media (max-width: 768px) {
.table-erp-wrapper {
overflow-x: auto;
}
}
/* Smaller table All Containers text */
.table-erp {
width: 100%;
border-collapse: collapse;
font-size: 0.72rem;
text-align: left;
border: 1px solid #e2e8f0;
}
.table-erp th {
background-color: #f1f5f9;
color: #0f172a;
font-weight: 800;
padding: 0.20rem 0.25rem;
text-transform: uppercase;
font-size: 0.58rem;
letter-spacing: 0.05em;
border: 1px solid #cbd5e1;
border-bottom: 2px solid #cbd5e1;
text-align: left;
}
.table-erp tr {
position: relative;
transition: background-color 0.15s ease;
}
.table-erp td {
padding: 0.1rem 0.15rem;
color: #334155;
border: 1px solid #e2e8f0;
vertical-align: middle;
font-size: 0.70rem;
}
.table-erp tbody tr:nth-of-type(odd) {
background-color: rgba(241, 245, 249, 0.45);
}
.table-erp tbody tr:hover td {
background-color: #f1f5f9 !important;
}
/* ERP Wide Table Row Hover Color & Smooth Transitions */
.table-erp tr,
.invoice-table tr,
.smart-comb-table tr,
.movement-table tr,
.pos-cart-table tr {
transition: background-color 0.15s ease;
}
.table-erp tbody tr:hover,
.invoice-table tbody tr:hover,
.smart-comb-table tbody tr:hover,
.movement-table tbody tr:hover,
.pos-cart-table tbody tr:hover {
background-color: #f8fafc !important;
/* Soft hover color matching IMEI tracking */
}
/* Tabs Styling Improvements */
.product-tabs-wrapper {
margin-top: 1.5rem;
background: #fff;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
overflow: hidden;
}
.tabs-nav {
display: flex;
background: #f8fafc;
border-bottom: 1px solid var(--border-color);
padding: 0.5rem 0.75rem;
gap: 0.5rem;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.tabs-nav::-webkit-scrollbar {
display: none;
}
.tab-btn {
padding: 0.5rem 1.25rem;
font-size: 0.72rem;
font-weight: 700;
color: #64748b;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
}
.tab-btn i {
font-size: 0.8rem;
color: #94a3b8;
transition: color 0.2s;
}
.tab-btn:hover {
color: var(--primary);
background-color: var(--primary-light);
}
.tab-btn:hover i {
color: var(--primary);
}
.tab-btn.active {
color: #ffffff;
background-color: var(--primary);
border-color: var(--primary);
box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2);
}
.tab-btn.active i {
color: #ffffff;
}
.tabs-content-area {
background: #ffffff;
padding: 1rem;
border-radius: 0 0 12px 12px;
min-height: 300px;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.2s ease;
}
.table-controls-row {
margin-bottom: 0.75rem;
}
.erp-input-sm {
padding: 0.25rem 0.5rem;
font-size: 0.7rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
}
.table-search-box {
padding: 0.25rem 0.75rem;
font-size: 0.7rem;
}
.search-input-wrapper {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.search-input-wrapper .search-icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
font-size: 0.8rem;
pointer-events: none;
z-index: 10;
}
.search-input-wrapper .form-control-erp {
padding-left: 2.25rem !important;
}
/* Standardized Table Action Buttons */
.table-action-buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
}
.action-btn {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-size: 0.8rem;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid transparent;
cursor: pointer;
background: #f8fafc;
color: #64748b;
text-decoration: none !important;
}
.action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
/* Color Coding for Action Buttons */
.btn-view {
color: #10b981;
border-color: #d1fae5;
}
.btn-view:hover {
background: #10b981;
color: #fff;
border-color: #10b981;
}
.btn-edit {
color: #3b82f6;
border-color: #dbeafe;
}
.btn-edit:hover {
background: #3b82f6;
color: #fff;
border-color: #3b82f6;
}
.btn-delete {
color: #ef4444;
border-color: #fee2e2;
}
.btn-delete:hover {
background: #ef4444;
color: #fff;
border-color: #ef4444;
}
.btn-print,
.btn-voucher,
.btn-pdf {
color: #6366f1;
border-color: #e0e7ff;
}
.btn-print:hover,
.btn-voucher:hover,
.btn-pdf:hover {
background: #6366f1;
color: #fff;
border-color: #6366f1;
}
.btn-payment {
color: #f59e0b;
border-color: #fef3c7;
}
.btn-payment:hover {
background: #f59e0b;
color: #fff;
border-color: #f59e0b;
}
/*
* English: Styles for POS Print Action Button
* Bangla: পিওএস (POS) প্রিন্ট অ্যাকশন বাটনের স্টাইল
*/
.btn-pos-print {
color: #14b8a6;
border-color: #ccfbf1;
}
.btn-pos-print:hover {
background: #14b8a6;
color: #fff;
border-color: #14b8a6;
}
.btn-barcode {
color: #8b5cf6;
border-color: #ede9fe;
}
.btn-barcode:hover {
background: #8b5cf6;
color: #fff;
border-color: #8b5cf6;
}
.btn-ledger {
color: #0ea5e9;
border-color: #e0f2fe;
}
.btn-ledger:hover {
background: #0ea5e9;
color: #fff;
border-color: #0ea5e9;
}
.btn-location-save:hover {
background-color: var(--primary-hover);
}
.location-popup-btn {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 6px;
color: var(--primary);
cursor: pointer;
transition: all 0.2s;
}
.location-popup-btn:hover {
background-color: var(--primary-light);
border-color: var(--primary);
}
.location-summary-text {
font-size: 0.72rem;
color: var(--text-muted);
font-weight: 600;
font-style: italic;
}
/* Product Show Page Elegant Styles */
.product-show-grid {
display: grid;
grid-template-columns: 140px repeat(3, 1fr);
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.details-column.image-card {
background: transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.4rem;
border: none;
box-shadow: none;
}
.product-image-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 100px;
}
.product-show-image-placeholder {
width: 90px;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f1f5f9;
color: #94a3b8;
border-radius: 4px;
}
.product-show-image {
width: auto;
max-width: 90px;
max-height: 90px;
object-fit: contain;
border-radius: 0;
background: transparent;
padding: 0;
border: none;
box-shadow: none;
}
.details-column {
background: #ffffff;
padding: 0.6rem;
border-radius: 8px;
border: 1px solid #e2e8f0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.details-column:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
border-color: #6366f1;
}
.details-column.image-card:hover {
transform: none;
box-shadow: none;
border-color: transparent;
}
.details-section-title {
font-size: 0.6rem;
font-weight: 800;
color: #4f46e5;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.6rem;
padding-bottom: 0.3rem;
border-bottom: 1px solid #eef2ff;
display: flex;
align-items: center;
gap: 0.3rem;
}
.details-list {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.details-item {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 0.25rem;
border-bottom: 1px dashed #f1f5f9;
}
.details-item:last-child {
border-bottom: none;
}
.details-label {
font-size: 0.62rem;
font-weight: 600;
color: #64748b;
}
.details-value {
font-size: 0.68rem;
font-weight: 700;
color: #1e293b;
text-align: right;
}
.description-box {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid #f1f5f9;
}
.description-text {
font-size: 0.65rem;
line-height: 1.4;
color: #475569;
margin: 0;
}
/* Tabs Navigation Enhanced */
.product-tabs-container {
margin-top: 1rem;
}
/* .tabs-content-area override removed - uses shared styles from line ~597 */
/* Stock Movement Table */
.movement-summary-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.movement-summary-card {
border: 1px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
}
.movement-summary-header {
padding: 0.35rem 0.6rem;
font-size: 0.6rem;
font-weight: 800;
}
.movement-summary-header.in {
background: #f0fdf4;
color: #16a34a;
border-bottom: 1px solid #dcfce7;
}
.movement-summary-header.out {
background: #fef2f2;
color: #dc2626;
border-bottom: 1px solid #fee2e2;
}
.movement-summary-header.summary {
background: #f5f3ff;
color: #7c3aed;
border-bottom: 1px solid #ede9fe;
}
.movement-table th {
padding: 0.25rem 0.10rem;
font-size: 0.58rem;
}
.movement-table td {
padding: 0.2rem 0.20rem;
font-size: 0.62rem;
}
.closing-stock-card {
background: #f8fafc;
padding: 0.75rem;
border-radius: 6px;
text-align: center;
border: 1px solid #e2e8f0;
}
.closing-stock-label {
display: block;
font-size: 0.6rem;
text-transform: uppercase;
color: #64748b;
font-weight: 800;
}
.closing-stock-value {
display: block;
font-size: 1.25rem;
font-weight: 900;
}
.closing-stock-unit {
font-size: 0.65rem;
color: #94a3b8;
}
/* Summary Section Improvements */
.summary-kpi-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.summary-kpi-item {
padding: 0.6rem;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid transparent;
}
.summary-kpi-item.in {
background: #f0fdf4;
border-color: #dcfce7;
color: #16a34a;
}
.summary-kpi-item.out {
background: #fef2f2;
border-color: #fee2e2;
color: #dc2626;
}
.kpi-label {
font-size: 0.58rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.025em;
margin-bottom: 0.2rem;
opacity: 0.8;
}
.kpi-value {
font-size: 0.9rem;
font-weight: 900;
}
.summary-description-box {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 1rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
/* Print Page Styles */
@media print {
.no-print {
display: none !important;
}
/* English: Override master layout heights to prevent empty second page during A4 print */
/* Bangla: এ৪ প্রিন্টের সময় খালি দ্বিতীয় পৃষ্ঠা হওয়া প্রতিরোধ করতে লেআউট হাইট অটো করা হলো */
html,
body,
.erp-wrapper,
.erp-main,
.erp-content {
height: auto !important;
min-height: auto !important;
overflow: visible !important;
}
body {
background: #f8fafc !important;
/* Soft preview background style */
margin: 0 !important;
padding: 0 !important;
}
#printable-area {
border: 1px solid #cbd5e1 !important;
border-radius: 8px !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
margin: 15mm auto !important;
width: 82% !important;
max-width: 82% !important;
padding: 10mm 15mm !important;
background: #fff !important;
min-height: auto !important;
display: flex;
flex-direction: column;
}
.invoice-items-container {
flex-grow: 1;
}
.invoice-footer-section {
margin-top: auto;
padding-bottom: 2mm;
}
.print-header {
padding-bottom: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
.invoice-print-title {
font-size: 0.75rem !important;
padding: 0.15rem 0.75rem !important;
}
.invoice-company-name {
font-size: 0.9rem !important;
text-transform: capitalize !important;
}
.invoice-details-row {
margin-bottom: 0.75rem !important;
padding: 0.15rem 0.75rem !important;
}
.invoice-details-item {
font-size: 0.5rem !important;
}
}
.note-section-title {
font-size: 0.55rem !important;
font-weight: 900 !important;
color: #64748b !important;
margin-bottom: 0.25rem !important;
}
.note-title {
font-size: 0.45rem !important;
font-weight: 800;
text-transform: uppercase;
color: #94a3b8;
}
.note-content {
font-size: 0.55rem !important;
text-align: justify;
line-height: 1.3;
}
.summary-row-text {
font-size: 8.5px !important;
font-weight: 500 !important;
}
.summary-row-bold {
font-size: 8.5px !important;
font-weight: 800 !important;
}
.signature-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-top: 5rem;
padding-top: 0.5rem;
}
.signature-item {
text-align: center;
}
.signature-line {
border-top: 1px solid #cbd5e1;
padding-top: 0.2rem;
font-size: 0.45rem !important;
font-weight: 800;
text-transform: uppercase;
color: #64748b;
letter-spacing: 0.05em;
font-style: italic;
color: #94a3b8;
text-align: center;
margin-top: 0.2rem;
}
/* Action Dropdown Menu */
.action-dropdown {
position: relative;
display: inline-block;
}
.action-menu {
position: absolute;
right: 0;
top: 100%;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
z-index: 1000;
min-width: 220px;
display: none;
padding: 0.5rem 0;
margin-top: 2px;
}
.action-menu::before {
content: '';
position: absolute;
top: -6px;
left: 0;
right: 0;
height: 6px;
background: transparent;
}
.action-dropdown:hover .action-menu,
.action-dropdown.active .action-menu {
display: block;
}
.action-menu-header {
padding: 0.5rem 1rem;
font-size: 0.65rem;
font-weight: 800;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.05em;
background: #f8fafc;
}
.action-menu-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 1rem;
color: #334155;
text-decoration: none !important;
font-size: 0.75rem;
font-weight: 500;
transition: all 0.2s;
}
.action-menu-item:hover {
background: #f1f5f9;
color: var(--primary) !important;
}
.action-menu-item i {
width: 16px;
text-align: center;
color: #64748b;
}
.action-menu-divider {
height: 1px;
background: #f1f5f9;
margin: 0.5rem 0;
}
.summary-section-subtitle {
font-size: 0.7rem;
font-weight: 800;
color: #4f46e5;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.4rem;
border-bottom: 1px solid #f1f5f9;
padding-bottom: 0.4rem;
}
.summary-description-content {
font-size: 0.72rem;
line-height: 1.6;
color: #475569;
white-space: pre-line;
}
.closing-stock-card {
margin-top: 0.25rem;
padding: 1rem;
border-radius: 10px;
background: #f8fafc;
border: 2px dashed #e2e8f0;
display: flex;
flex-direction: column;
align-items: center;
transition: all 0.3s ease;
}
.closing-stock-card:hover {
background: #ffffff;
border-color: #6366f1;
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.closing-stock-label {
font-size: 0.62rem;
font-weight: 800;
color: #64748b;
text-transform: uppercase;
margin-bottom: 0.35rem;
}
.closing-stock-value {
font-size: 1.75rem;
font-weight: 900;
line-height: 1;
}
.closing-stock-unit {
font-size: 0.6rem;
color: #94a3b8;
margin-top: 0.25rem;
font-weight: 600;
}
/* Compact Pagination & Controls */
.table-controls-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
padding: 0 0.15rem;
}
.table-show-entries {
font-size: 0.6rem;
color: #64748b;
font-weight: 600;
}
.per-page-select {
padding: 0.1rem 0.25rem;
font-size: 0.6rem;
border: 1px solid #e2e8f0;
border-radius: 4px;
background: #fff;
cursor: pointer;
}
.pagination {
display: flex;
gap: 2px;
}
.pagination .page-link {
padding: 0.15rem 0.4rem;
font-size: 0.6rem;
border-radius: 4px;
}
.tab-loading {
opacity: 0.4;
pointer-events: none;
transition: opacity 0.3s ease;
position: relative;
}
.tab-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid #6366f1;
border-top-color: transparent;
border-radius: 50%;
animation: tab-spin 0.6s linear infinite;
}
@keyframes tab-spin {
to {
transform: rotate(360deg);
}
}
.per-page-select {
padding: 2px 4px;
font-size: 10px;
}
.movement-section-header {
background: #f1f5f9;
font-weight: 800;
font-size: 0.65rem;
color: var(--primary);
text-transform: uppercase;
}
/* Invoice Specific Styles */
.invoice-section {
margin-bottom: 0.75rem;
background: #fff;
padding: 0.75rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
box-shadow: var(--shadow-sm);
}
.invoice-section-header {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.65rem;
font-weight: 800;
text-transform: uppercase;
color: #1e293b;
margin-bottom: 0.75rem;
padding-bottom: 0.35rem;
border-bottom: 1px solid #f1f5f9;
}
.invoice-section-header i {
color: var(--primary);
font-size: 0.9rem;
}
.invoice-form-group {
margin-bottom: 0.75rem;
}
.invoice-form-label {
display: block;
font-size: 0.65rem;
font-weight: 800;
text-transform: uppercase;
color: #64748b;
margin-bottom: 0.35rem;
letter-spacing: 0.025em;
}
.invoice-form-label span.required {
color: #ef4444;
margin-left: 0.15rem;
}
.invoice-form-control {
width: 100%;
padding: 0.45rem 0.75rem;
font-size: 0.78rem;
font-weight: 500;
border: 1px solid #e2e8f0;
border-radius: 6px;
background-color: #f8fafc;
transition: all 0.2s ease;
color: #1e293b;
}
.invoice-form-control:focus {
outline: none;
border-color: var(--primary);
background-color: #fff;
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}
.invoice-form-control::placeholder {
color: #94a3b8;
font-weight: 400;
}
.invoice-form-control:disabled,
.invoice-form-control[readonly] {
background-color: #f1f5f9;
color: #4f46e5;
/* Match the PO number color in image */
cursor: not-allowed;
font-weight: 700;
}
.invoice-search-wrapper {
position: relative;
margin-bottom: 1.25rem;
}
.invoice-search-icon {
position: absolute;
left: 1.25rem;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
font-size: 1.1rem;
}
.invoice-search-input.invoice-form-control-sm {
height: 2.5rem;
padding-left: 2.5rem !important;
font-size: 0.8rem !important;
}
.invoice-search-wrapper .invoice-search-icon {
left: 1rem;
font-size: 0.9rem;
}
.invoice-table-container {
overflow-x: auto;
margin-top: 1rem;
}
.invoice-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.invoice-table th {
background-color: #fff;
padding: 0.5rem 0.6rem;
font-size: 0.58rem;
font-weight: 800;
text-transform: uppercase;
color: #64748b;
border-bottom: 1px solid #f1f5f9;
text-align: left;
letter-spacing: 0.05em;
}
.invoice-table td {
padding: 0.45rem 0.6rem;
font-size: 0.72rem;
border-bottom: 1px solid #f1f5f9;
vertical-align: middle;
color: #334155;
}
.invoice-empty-state {
padding: 4rem 2rem;
text-align: center;
color: #94a3b8;
}
.invoice-empty-state i {
font-size: 3rem;
display: block;
margin-bottom: 1.25rem;
color: #e2e8f0;
}
.invoice-search-results {
position: absolute;
left: 0;
right: 0;
top: 100%;
background: #fff;
border: 1px solid var(--border-color);
border-radius: 0 0 12px 12px;
box-shadow: var(--shadow-xl);
z-index: 1000;
max-height: 300px;
overflow-y: auto;
}
.search-result-group {
border-bottom: 1px solid #f1f5f9;
}
.search-result-group-header {
background: #f8fafc;
padding: 0.35rem 0.75rem;
font-size: 0.6rem;
font-weight: 800;
text-transform: uppercase;
color: #64748b;
letter-spacing: 0.05em;
}
.search-result-item {
padding: 0.5rem 0.75rem;
cursor: pointer;
transition: all 0.2s ease;
border-left: 3px solid transparent;
}
/* Product Variations Config Section - Compact Print-Style Styling */
.attribute-picker-box {
padding: 0.1rem 0.2rem !important;
font-size: 0.6rem !important;
margin-bottom: 0.15rem !important;
}
.smart-attr-select-wrapper,
.smart-attr-select {
font-size: 0.6rem !important;
padding: 0.1rem 0.25rem !important;
}
.selected-attributes-list {
gap: 0.15rem !important;
margin-bottom: 0.15rem !important;
}
.attr-tag-card {
padding: 0.15rem 0.2rem !important;
min-width: auto !important;
font-size: 0.6rem !important;
}
.attr-tag-header {
margin-bottom: 0.05rem !important;
}
.attr-tag-name {
font-size: 0.6rem !important;
}
.attr-tag-remove {
font-size: 0.7rem !important;
}
.attr-values-flex {
gap: 0.1rem !important;
}
.attr-val-pill {
padding: 0.05rem 0.15rem !important;
font-size: 0.6rem !important;
}
.smart-comb-table-wrapper {
font-size: 0.6rem !important;
}
.smart-comb-table th,
.smart-comb-table td {
padding: 0.1rem 0.15rem !important;
}
.comb-config-text {
font-size: 0.7rem !important;
}
.smart-comb-input {
padding: 0.05rem 0.1rem !important;
font-size: 0.55rem !important;
line-height: 1 !important;
}
.tax-rule-select-smart {
padding: 0.05rem 0.1rem !important;
font-size: 0.55rem !important;
line-height: 1 !important;
}
.var-delete-btn-smart {
font-size: 0.55rem !important;
padding: 0 !important;
width: 1.2rem !important;
height: 1.2rem !important;
line-height: 1 !important;
}
.stock-badge-blue {
padding: 0.05rem 0.15rem !important;
font-size: 0.6rem !important;
}
.smart-pagination {
padding: 0 0.15rem 0.15rem !important;
font-size: 0.6rem !important;
}
.attributes-filter-row {
padding: 0.15rem !important;
}
.attributes-filter-group-right {
gap: 0.15rem !important;
}
.search-result-item:hover {
background-color: #f1f5f9;
border-left-color: var(--primary);
}
.search-result-item .item-title {
font-size: 0.78rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 0.15rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
.search-result-item .item-title::before {
content: '';
width: 5px;
height: 5px;
background: var(--primary);
border-radius: 50%;
}
.search-result-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.search-result-badge {
font-size: 0.6rem;
font-weight: 700;
padding: 0.1rem 0.4rem;
border-radius: 4px;
background: #f1f5f9;
color: #64748b;
}
.search-result-badge.sku {
background: #eef2ff;
color: #4f46e5;
}
.search-result-badge.vat {
background: #fff7ed;
color: #c2410c;
}
.search-result-badge.stock {
background: #f0fdf4;
color: #15803d;
}
.search-result-badge.cost {
background: #fff;
color: #1e293b;
border: 1px solid #e2e8f0;
}
.search-result-price {
margin-left: auto;
font-size: 0.85rem;
font-weight: 800;
color: #1e293b;
}
.search-result-price s {
font-size: 0.75rem;
color: #94a3b8;
margin-right: 0.25rem;
}
/* Enhanced Summary Section */
.summary-card {
background: #f8fafc;
border-radius: var(--radius-sm);
border: 1px solid #e2e8f0;
padding: 0.5rem 0.75rem;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}
.summary-title {
font-size: 0.62rem;
font-weight: 800;
text-transform: uppercase;
color: #1e293b;
margin-bottom: 0.4rem;
padding-bottom: 0.25rem;
border-bottom: 1px solid #e2e8f0;
display: flex;
align-items: center;
gap: 0.35rem;
}
.summary-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.2rem 0;
font-size: 0.62rem;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.summary-card .invoice-form-control-sm {
width: 90px !important;
padding: 0.2rem 0.35rem;
font-size: 0.72rem;
height: 1.8rem;
}
.summary-card #paid_amount {
width: 110px !important;
font-size: 0.78rem;
padding: 0.25rem 0.35rem;
height: 2rem;
}
.summary-row.grand-total {
margin-top: 0.4rem;
padding-top: 0.4rem;
border-top: 1px dashed #cbd5e1;
font-size: 0.78rem;
color: var(--primary);
}
.summary-row.due-amount {
color: #ef4444;
}
.summary-row span:last-child {
color: #1e293b;
}
.summary-row.grand-total span:last-child {
color: var(--primary);
font-size: 1.1rem;
font-weight: 900;
}
.invoice-form-control-sm {
padding: 0.35rem 0.6rem;
font-size: 0.72rem;
}
.movement-section-header.out {
color: var(--danger);
}
.total-row td {
font-weight: 700;
background: #fafbfc;
}
.grand-total-row td {
font-size: 0.85rem;
font-weight: 900;
background: #f8fafc;
border-top: 2px solid var(--border-color);
}
.text-in {
color: var(--success);
}
.text-out {
color: var(--danger);
}
/* Custom Badges */
.badge-erp {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.6rem;
font-size: 0.6rem;
font-weight: 800;
line-height: 1;
text-align: center;
white-space: nowrap;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: all 0.2s ease;
border: 1px solid transparent;
}
.badge-erp i {
font-size: 0.7rem;
}
.badge-erp-primary {
background-color: #eef2ff;
color: #4f46e5;
border-color: #e0e7ff;
}
.badge-erp-success {
background-color: #f0fdf4;
color: #16a34a;
border-color: #dcfce7;
}
.badge-erp-danger {
background-color: #fef2f2;
color: #dc2626;
border-color: #fee2e2;
}
.badge-erp-warning {
background-color: #fffbeb;
color: #d97706;
border-color: #fef3c7;
}
.badge-erp-info {
background-color: #f0f9ff;
color: #0284c7;
border-color: #e0f2fe;
}
.badge-erp-secondary {
background-color: #f8fafc;
color: #64748b;
border-color: #e2e8f0;
}
/* Buttons Custom Styles */
.btn-erp {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
font-size: 0.72rem;
font-weight: 700;
padding: 0.35rem 0.75rem;
border-radius: var(--radius-sm);
border: 1px solid transparent;
transition: all 0.2s ease;
cursor: pointer;
text-decoration: none;
outline: none;
}
.btn-erp-sm {
padding: 0.35rem 0.75rem;
font-size: 0.72rem;
border-radius: 6px;
gap: 0.35rem;
box-shadow: var(--shadow-sm);
}
.btn-erp-sm:hover {
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.btn-erp-xs {
padding: 0.15rem 0.35rem;
font-size: 0.65rem;
border-radius: 4px;
gap: 0.15rem;
}
.form-grid-erp {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.form-group-erp {
display: flex;
flex-direction: column;
gap: 0.15rem;
margin-bottom: 0.35rem;
}
.form-label-erp {
font-size: 0.68rem;
font-weight: 700;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.025em;
margin-bottom: 0.15rem;
}
.form-control-erp {
font-size: 0.68rem;
padding: 0.25rem 0.45rem;
border-radius: 3px;
border: 1px solid #cbd5e1;
color: #1e293b;
background-color: #ffffff;
outline: none;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
box-sizing: border-box;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.form-control-erp-lg {
font-size: 0.80rem;
padding: 0.4rem 0.65rem;
}
.form-control-erp-sm {
font-size: 0.62rem;
padding: 0.18rem 0.35rem;
}
.form-control-erp:focus {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
background-color: #fff;
}
.form-control-erp::placeholder {
color: #94a3b8;
font-weight: 400;
}
.form-control-erp:disabled {
background-color: #f1f5f9;
color: var(--text-light);
cursor: not-allowed;
}
/* Modals Overlay and Box */
.modal-backdrop-erp {
position: fixed;
inset: 0;
background-color: rgba(15, 23, 42, 0.4);
backdrop-filter: blur(4px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
animation: fadeInModal 0.2s ease-out forwards;
}
.modal-erp {
background-color: var(--bg-card);
width: 95%;
max-width: 600px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
overflow: hidden;
animation: slideUpModal 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
border: 1px solid var(--border-color);
}
.modal-header-erp {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fafbfc;
}
.modal-title-erp {
margin: 0;
font-size: 1rem;
font-weight: 800;
color: var(--text-main);
}
.modal-close-erp {
background: none;
border: none;
font-size: 1.5rem;
color: var(--text-muted);
cursor: pointer;
line-height: 1;
padding: 0;
}
.modal-close-erp:hover {
color: var(--text-main);
}
.modal-body-erp {
padding: 1.5rem;
max-height: 70vh;
overflow-y: auto;
}
.modal-footer-erp {
padding: 1rem 1.5rem;
border-top: 1px solid var(--border-color);
background-color: #fafbfc;
display: flex;
justify-content: flex-end;
gap: 0.75rem;
}
@keyframes fadeInModal {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUpModal {
from {
opacity: 0;
transform: translateY(20px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* POS Interface Styling */
.pos-main-container {
height: calc(100vh - 120px);
display: flex;
flex-direction: column;
}
#pos_checkout_form {
height: 100%;
display: flex;
flex-direction: column;
}
.pos-wrapper {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 1.5rem;
flex: 1;
min-height: 0;
}
@media (max-width: 1024px) {
.pos-wrapper {
grid-template-columns: 1fr;
height: auto;
}
}
.pos-products-pane {
display: flex;
flex-direction: column;
gap: 1rem;
overflow-y: auto;
}
.pos-search-bar {
display: flex;
gap: 0.5rem;
}
.pos-products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 0.5rem;
overflow-y: auto;
padding: 0.25rem;
}
.pos-product-card {
background-color: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 0.4rem 0.5rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 95px;
}
.pos-product-card:hover {
border-color: var(--primary);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.pos-product-name {
font-size: 9px;
font-weight: 700;
color: var(--text-main);
margin-bottom: 0.15rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.2;
}
.pos-product-sku {
font-size: 8px;
color: var(--text-muted);
margin-bottom: 0.15rem;
line-height: 1;
}
.pos-product-bottom {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: auto;
border-top: 1px dashed var(--border-color);
padding-top: 4px;
}
.pos-product-price-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.pos-product-price {
font-size: 9px;
font-weight: 800;
color: var(--primary);
}
.pos-product-vat {
font-size: 8px;
color: var(--text-muted);
}
.pos-product-stock-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 8px;
color: var(--text-muted);
}
.pos-product-stock {
font-size: 8px;
font-weight: 600;
color: var(--text-muted);
}
.pos-product-stock.out {
color: var(--danger);
}
.pos-cart-pane {
background-color: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
}
.pos-cart-header {
padding: 1rem;
border-bottom: 1px solid var(--border-color);
background-color: #fafbfc;
font-weight: 700;
display: flex;
justify-content: space-between;
align-items: center;
}
.pos-cart-items-wrapper {
flex-grow: 1;
overflow-y: auto;
padding: 0.5rem;
}
.pos-cart-item {
display: grid;
grid-template-columns: 2fr 1fr 1fr auto;
align-items: center;
padding: 0.5rem;
border-bottom: 1px solid var(--border-color);
gap: 0.5rem;
}
.pos-cart-item-name {
font-size: 0.75rem;
font-weight: 600;
word-break: break-all;
}
.pos-cart-item-qty {
display: flex;
align-items: center;
gap: 0.25rem;
}
.pos-qty-input {
width: 40px;
text-align: center;
font-size: 0.75rem;
padding: 0.2rem;
border: 1px solid var(--border-color);
border-radius: 4px;
}
.pos-cart-item-subtotal {
font-size: 0.85rem;
font-weight: 700;
text-align: right;
}
.pos-cart-summary {
padding: 1rem;
border-top: 1px solid var(--border-color);
background-color: #fafbfc;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pos-summary-row {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: var(--text-muted);
}
.pos-summary-row.total {
border-top: 1px dashed var(--border-color);
padding-top: 0.5rem;
font-size: 1.1rem;
font-weight: 900;
color: var(--text-main);
}
.pos-cart-actions {
padding: 1rem;
border-top: 1px solid var(--border-color);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
/* Barcode Print Styling */
.barcode-print-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.barcode-card {
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 0.75rem;
text-align: center;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
}
.barcode-card-text {
font-size: 0.65rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.barcode-svg-wrapper {
margin: 0.5rem 0;
}
.barcode-card-price {
font-size: 0.75rem;
font-weight: 800;
}
/* Print Layouts */
@media print {
body {
background-color: #fff;
color: #000;
font-size: 12pt;
}
.erp-sidebar,
.erp-header,
.btn-erp,
.no-print,
header,
footer,
.sidebar,
.navbar {
display: none !important;
}
.erp-main,
.erp-content {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
overflow: visible !important;
}
/* Print Invoice Receipt */
.print-receipt-container {
width: 80mm;
margin: 0 auto;
padding: 2mm;
font-family: monospace;
font-size: 9pt;
line-height: 1.2;
}
.print-receipt-header {
text-align: center;
margin-bottom: 4mm;
}
.print-receipt-logo {
font-size: 12pt;
font-weight: bold;
}
.print-receipt-divider {
border-top: 1px dashed #000;
margin: 2mm 0;
}
.print-receipt-table {
width: 100%;
border-collapse: collapse;
}
.print-receipt-table th {
text-align: left;
border-bottom: 1px dashed #000;
font-size: 8pt;
}
.print-receipt-table td {
padding: 1mm 0;
font-size: 8pt;
}
.print-receipt-right {
text-align: right;
}
.print-receipt-total-block {
margin-top: 2mm;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.print-receipt-total-row {
width: 100%;
display: flex;
justify-content: space-between;
font-size: 8pt;
}
.print-receipt-total-row.grand {
font-weight: bold;
font-size: 9pt;
}
.print-receipt-footer {
text-align: center;
margin-top: 6mm;
font-size: 8pt;
}
/* Print Barcodes Sheet */
.print-barcode-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15mm 10mm;
padding: 10mm;
width: 100%;
box-sizing: border-box;
}
.print-barcode-item {
border: none !important;
text-align: center;
page-break-inside: avoid;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Print Salary Receipt Slip */
.salary-slip-container {
max-width: 600px;
margin: 20mm auto;
padding: 10mm;
border: 1px solid #000;
}
.salary-slip-header {
text-align: center;
margin-bottom: 8mm;
}
.salary-slip-title {
font-size: 16pt;
font-weight: bold;
}
.salary-slip-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4mm;
margin-bottom: 6mm;
}
.salary-slip-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 8mm;
}
.salary-slip-table th,
.salary-slip-table td {
border: 1px solid #000;
padding: 2.5mm;
text-align: left;
}
.salary-slip-signatures {
display: flex;
justify-content: space-between;
margin-top: 20mm;
}
.signature-line {
border-top: 1px solid #000;
width: 120px;
text-align: center;
padding-top: 2mm;
font-size: 9pt;
}
#printable-area,
#payment-slip {
box-shadow: none !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
}
/* Audit Logs Diff Table Styles */
.erp-audit-old {
background-color: var(--danger-light);
color: var(--danger);
font-family: monospace;
}
.erp-audit-new {
background-color: var(--success-light);
color: var(--success);
font-family: monospace;
}
/* ============================================
LOGIN PAGE STYLES (ELEGANT & SMART)
============================================ */
@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
@keyframes pulse-glow {
0%,
100% {
box-shadow: 0 4px 15px rgba(5, 150, 105, 0.35);
}
50% {
box-shadow: 0 4px 25px rgba(8, 145, 178, 0.55);
}
}
@keyframes gradient-shift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.erp-login-body {
margin: 0;
padding: 0;
min-height: 100vh;
background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 30%, #4c1d95 70%, #0f172a 100%);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Inter', sans-serif;
overflow: hidden;
}
/* লগইন কার্ডের সামগ্রিক আকার — পেইজের মাঝখানে কেন্দ্রীভূত */
.erp-login-wrapper {
display: flex;
width: 100%;
max-width: 900px;
min-height: 400px;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 50px 120px rgba(15, 23, 42, 0.8);
margin: 20px auto;
animation: float 6s ease-in-out infinite;
}
/* Left Brand Panel */
.erp-login-brand {
flex: 1.1;
background: linear-gradient(145deg, #059669 0%, #0891b2 35%, #7c3aed 70%, #db2777 100%);
padding: 60px 50px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.erp-login-brand::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
animation: float 8s ease-in-out infinite;
}
.erp-login-brand::after {
content: '';
position: absolute;
bottom: -80px;
left: -80px;
width: 260px;
height: 260px;
background: rgba(255, 255, 255, 0.06);
border-radius: 50%;
animation: float 7s ease-in-out infinite reverse;
}
.erp-login-brand-inner {
position: relative;
z-index: 1;
}
.erp-login-logo {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.18);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 28px;
font-size: 34px;
color: #fff;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.erp-login-brand-title {
font-size: 2.1rem;
font-weight: 800;
color: #fff;
margin: 0 0 10px 0;
line-height: 1.15;
letter-spacing: -0.02em;
}
.erp-login-brand-subtitle {
font-size: 0.98rem;
color: rgba(255, 255, 255, 0.85);
margin: 0 0 40px 0;
}
.erp-login-features {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 48px;
}
.erp-login-feature-item {
display: flex;
align-items: center;
gap: 14px;
color: rgba(255, 255, 255, 0.95);
font-size: 0.9rem;
padding: 12px;
background: rgba(255, 255, 255, 0.08);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.erp-login-feature-item i {
color: #a5f3fc;
font-size: 1rem;
flex-shrink: 0;
}
.erp-login-brand-footer {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.6);
border-top: 1px solid rgba(255, 255, 255, 0.18);
padding-top: 18px;
}
/* Right Form Panel */
.erp-login-form-panel {
flex: 1;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
}
/* ফর্মের ভেতরের কন্টেন্ট এলাকার সর্বোচ্চ প্রস্থ বৃদ্ধি */
.erp-login-form-inner {
width: 100%;
max-width: 350px;
}
.erp-login-form-header {
margin-bottom: 32px;
}
.erp-login-form-title {
font-size: 1.8rem;
font-weight: 800;
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0 0 8px 0;
}
.erp-login-form-subtitle {
font-size: 0.92rem;
color: #64748b;
margin: 0;
}
/* Login form fields */
.erp-login-field {
margin-bottom: 20px;
}
.erp-login-label {
display: block;
font-size: 0.83rem;
font-weight: 700;
color: #374151;
margin-bottom: 8px;
letter-spacing: 0.02em;
}
.erp-login-label i {
color: #1d4ed8;
margin-right: 6px;
}
.erp-login-input {
width: 100%;
padding: 14px 16px;
border: 2px solid #e2e8f0;
border-radius: 14px;
font-size: 0.95rem;
font-family: 'Inter', sans-serif;
color: #1e293b;
background: #ffffff;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-sizing: border-box;
outline: none;
}
.erp-login-input:focus {
border-color: #1d4ed8;
background: #ffffff;
box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.1), 0 8px 24px rgba(30, 64, 175, 0.08);
transform: translateY(-2px);
}
.erp-login-input.is-invalid {
border-color: #ef4444;
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}
.erp-login-input-group {
position: relative;
}
.erp-login-input-group .erp-login-input {
padding-right: 50px;
}
.erp-login-eye-btn {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
background: #f8fafc;
border: none;
cursor: pointer;
color: #64748b;
font-size: 1rem;
padding: 6px;
border-radius: 8px;
transition: all 0.2s ease;
}
.erp-login-eye-btn:hover {
color: #1d4ed8;
background: #e0f2fe;
}
/* Remember me */
.erp-login-remember {
margin-bottom: 26px;
}
.erp-login-checkbox-label {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.85rem;
color: #64748b;
cursor: pointer;
user-select: none;
padding: 4px 0;
}
.erp-login-checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #1d4ed8;
cursor: pointer;
}
/* Submit button */
.erp-login-submit-btn {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #059669, #0891b2, #7c3aed);
background-size: 200% 200%;
color: #fff;
border: none;
border-radius: 14px;
font-size: 1rem;
font-weight: 700;
font-family: 'Inter', sans-serif;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
letter-spacing: 0.01em;
box-shadow: 0 8px 20px rgba(5, 150, 105, 0.35);
animation: pulse-glow 3s ease-in-out infinite, gradient-shift 4s ease infinite;
}
.erp-login-submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(30, 64, 175, 0.45);
}
.erp-login-submit-btn:active {
transform: translateY(-1px);
}
.erp-login-submit-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
animation: none;
}
/* Alerts */
.erp-alert {
padding: 11px 14px;
border-radius: 10px;
font-size: 0.85rem;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.erp-alert-danger {
background: #fee2e2;
color: #dc2626;
border: 1px solid #fecaca;
}
.erp-alert-success {
background: #d1fae5;
color: #059669;
border: 1px solid #a7f3d0;
}
/* Credentials hint box */
.erp-login-credentials-hint {
margin-top: 28px;
background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
border: 2px solid #e2e8f0;
border-radius: 16px;
padding: 18px 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.erp-login-hint-title {
font-size: 0.8rem;
font-weight: 800;
background: linear-gradient(135deg, #1d4ed8 0%, #7c3aed 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0 0 12px 0;
letter-spacing: 0.03em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 6px;
}
.erp-login-hint-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
padding: 8px 0;
}
.erp-login-hint-row:last-child {
margin-bottom: 0;
}
.erp-login-hint-role {
font-size: 0.72rem;
font-weight: 800;
padding: 4px 12px;
border-radius: 20px;
min-width: 70px;
text-align: center;
letter-spacing: 0.02em;
}
.erp-login-hint-role.admin {
background: linear-gradient(135deg, #ede9fe 0%, #e0e7ff 100%);
color: #7c3aed;
}
.erp-login-hint-role.manager {
background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
color: #0369a1;
}
.erp-login-hint-role.employee {
background: linear-gradient(135deg, #d1fae5 0%, #dcfce7 100%);
color: #065f46;
}
.erp-login-hint-cred {
font-size: 0.8rem;
color: #475569;
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
}
.erp-login-footer-text {
text-align: center;
font-size: 0.75rem;
color: #94a3b8;
margin: 20px 0 0 0;
padding-top: 12px;
border-top: 1px dashed #e2e8f0;
}
/* Responsive */
@media (max-width: 680px) {
.erp-login-brand {
display: none;
}
.erp-login-wrapper {
max-width: 440px;
border-radius: 16px;
}
.erp-login-form-panel {
padding: 32px 24px;
}
}
/* ====================================================
নতুন লগইন পেইজ ডিজাইন v2 — Glassmorphism Dark Theme
==================================================== */
/* লগইন পেইজের মূল বডি — ডার্ক ব্যাকগ্রাউন্ড */
.login-v2-body {
margin: 0;
padding: 0;
min-height: 100vh;
background: #080c18;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Inter', sans-serif;
position: relative;
overflow: hidden;
}
/* ব্যাকগ্রাউন্ড গ্লোয়িং অর্ব — অ্যানিমেটেড ডেকোরেটিভ সার্কেল */
.login-v2-orb {
position: fixed;
border-radius: 50%;
filter: blur(90px);
opacity: 0.3;
pointer-events: none;
}
.login-v2-orb-1 {
width: 550px;
height: 550px;
background: radial-gradient(circle, #4f46e5, transparent);
top: -180px;
right: -120px;
animation: orb-float-1 9s ease-in-out infinite;
}
.login-v2-orb-2 {
width: 450px;
height: 450px;
background: radial-gradient(circle, #0891b2, transparent);
bottom: -120px;
left: -120px;
animation: orb-float-2 11s ease-in-out infinite;
}
.login-v2-orb-3 {
width: 380px;
height: 380px;
background: radial-gradient(circle, #db2777, transparent);
top: 40%;
left: 60%;
animation: orb-float-3 7s ease-in-out infinite;
}
@keyframes orb-float-1 {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-30px);
}
}
@keyframes orb-float-2 {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(25px);
}
}
@keyframes orb-float-3 {
0%,
100% {
transform: translate(0, 0);
}
50% {
transform: translate(-20px, -20px);
}
}
/* মূল কন্টেইনার — উল্লম্বভাবে কেন্দ্রীভূত */
.login-v2-container {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 460px;
padding: 24px 20px 40px;
}
/* কোম্পানি ব্র্যান্ড সেকশন */
.login-v2-brand {
text-align: center;
margin-bottom: 24px;
}
/* লোগো আইকন বক্স */
.login-v2-logo {
width: 68px;
height: 68px;
border-radius: 20px;
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.9rem;
color: #ffffff;
margin: 0 auto 14px;
box-shadow: 0 8px 36px rgba(79, 70, 229, 0.55);
animation: logo-pulse 3s ease-in-out infinite;
}
@keyframes logo-pulse {
0%,
100% {
box-shadow: 0 8px 36px rgba(79, 70, 229, 0.55);
}
50% {
box-shadow: 0 12px 50px rgba(79, 70, 229, 0.85);
}
}
/* কোম্পানির নাম */
.login-v2-company-name {
font-size: 1.55rem;
font-weight: 800;
color: #ffffff;
margin: 0 0 6px;
letter-spacing: -0.02em;
}
/* সাবটাইটেল / ট্যাগলাইন */
.login-v2-tagline {
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.45);
margin: 0;
line-height: 1.5;
}
/* গ্লাস কার্ড */
.login-v2-card {
width: 100%;
background: rgba(255, 255, 255, 0.055);
backdrop-filter: blur(28px);
-webkit-backdrop-filter: blur(28px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 36px 38px;
box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* কার্ড হেডার */
.login-v2-card-header {
text-align: center;
margin-bottom: 28px;
padding-bottom: 22px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* কার্ড টাইটেল */
.login-v2-title {
font-size: 1.45rem;
font-weight: 700;
color: #ffffff;
margin: 0 0 6px;
letter-spacing: -0.01em;
}
/* কার্ড সাবটাইটেল */
.login-v2-subtitle {
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.45);
margin: 0;
}
/* অ্যালার্ট বক্স — এরর এবং সাকসেস */
.login-v2-alert {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 15px;
border-radius: 12px;
margin-bottom: 20px;
font-size: 0.865rem;
font-weight: 500;
line-height: 1.4;
}
.login-v2-alert-error {
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #fca5a5;
}
.login-v2-alert-success {
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(16, 185, 129, 0.3);
color: #6ee7b7;
}
/* ফর্ম ফিল্ড র্যাপার */
.login-v2-field {
margin-bottom: 18px;
}
/* ইনপুট লেবেল */
.login-v2-label {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.75rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ইনপুট ফিল্ড */
.login-v2-input {
width: 100%;
padding: 13px 15px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 12px;
color: #ffffff;
font-size: 0.925rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
outline: none;
box-sizing: border-box;
font-family: inherit;
}
/* ইনপুট প্লেসহোল্ডার */
.login-v2-input::placeholder {
color: rgba(255, 255, 255, 0.25);
}
/* ফোকাস অবস্থায় ইনপুট */
.login-v2-input:focus {
border-color: #4f46e5;
background: rgba(79, 70, 229, 0.1);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}
/* ইনভ্যালিড ইনপুট */
.login-v2-input.is-invalid {
border-color: rgba(239, 68, 68, 0.6);
background: rgba(239, 68, 68, 0.06);
}
/* পাসওয়ার্ড ইনপুট র্যাপার */
.login-v2-input-wrap {
position: relative;
}
.login-v2-input-wrap .login-v2-input {
padding-right: 46px;
}
/* চোখ দেখানো/লুকানো বাটন */
.login-v2-eye-btn {
position: absolute;
right: 13px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: rgba(255, 255, 255, 0.35);
cursor: pointer;
font-size: 0.95rem;
padding: 4px;
transition: color 0.2s;
line-height: 1;
}
.login-v2-eye-btn:hover {
color: rgba(255, 255, 255, 0.75);
}
/* অপশন সারি — রিমেম্বার মি */
.login-v2-options {
display: flex;
align-items: center;
margin-bottom: 22px;
}
/* চেকবক্স লেবেল */
.login-v2-checkbox-label {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
user-select: none;
}
.login-v2-checkbox-label input[type="checkbox"] {
display: none;
}
/* কাস্টম চেকবক্স বক্স */
.login-v2-checkbox-box {
width: 18px;
height: 18px;
min-width: 18px;
border-radius: 5px;
border: 1.5px solid rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.login-v2-checkbox-label input:checked+.login-v2-checkbox-box {
background: #4f46e5;
border-color: #4f46e5;
}
.login-v2-checkbox-label input:checked+.login-v2-checkbox-box::after {
content: '✓';
font-size: 11px;
color: #ffffff;
font-weight: 800;
}
/* সাবমিট বাটন */
.login-v2-submit {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
border: none;
border-radius: 12px;
color: #ffffff;
font-size: 0.975rem;
font-weight: 700;
cursor: pointer;
transition: all 0.25s ease;
letter-spacing: 0.01em;
box-shadow: 0 8px 28px rgba(79, 70, 229, 0.45);
font-family: inherit;
}
.login-v2-submit:hover {
background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
box-shadow: 0 12px 36px rgba(79, 70, 229, 0.65);
transform: translateY(-1px);
}
.login-v2-submit:active {
transform: translateY(0);
}
.login-v2-submit:disabled {
opacity: 0.65;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* ডেমো ক্রেডেনশিয়াল সেকশন */
.login-v2-hint {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* হিন্ট সেকশন টাইটেল */
.login-v2-hint-title {
font-size: 0.72rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.35);
text-transform: uppercase;
letter-spacing: 0.07em;
margin: 0 0 10px;
text-align: center;
}
/* হিন্ট আইটেম গ্রিড */
.login-v2-hint-grid {
display: flex;
flex-direction: column;
gap: 6px;
}
/* একটি ক্রেডেনশিয়াল আইটেম */
.login-v2-hint-item {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 11px;
background: rgba(255, 255, 255, 0.04);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.06);
}
/* রোল ব্যাজ */
.login-v2-hint-role {
font-size: 0.68rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.05em;
flex-shrink: 0;
min-width: 60px;
text-align: center;
}
.login-v2-hint-role.admin {
background: rgba(79, 70, 229, 0.22);
color: #a5b4fc;
}
.login-v2-hint-role.manager {
background: rgba(8, 145, 178, 0.22);
color: #67e8f9;
}
.login-v2-hint-role.employee {
background: rgba(16, 185, 129, 0.2);
color: #6ee7b7;
}
/* ক্রেডেনশিয়াল কোড টেক্সট */
.login-v2-hint-cred {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.45);
font-family: 'Courier New', monospace;
background: none;
border: none;
padding: 0;
}
/* ফুটার কপিরাইট */
.login-v2-footer {
text-align: center;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.25);
margin-top: 18px;
line-height: 1.5;
}
/* রেসপন্সিভ — ছোট স্ক্রিন */
@media (max-width: 520px) {
.login-v2-container {
padding: 16px 14px 32px;
}
.login-v2-card {
padding: 28px 22px;
}
.login-v2-logo {
width: 58px;
height: 58px;
font-size: 1.6rem;
}
}
/* ====================================================
লগইন পেইজ ডিজাইন v3 — Split-Screen Corporate Theme
বাম: ডার্ক ব্র্যান্ড প্যানেল | ডান: হোয়াইট ফর্ম
==================================================== */
/* মূল বডি — হালকা গ্রে ব্যাকগ্রাউন্ড */
.login-v3-body {
margin: 0;
padding: 0;
min-height: 100vh;
background: linear-gradient(-45deg, #ee7752, #095e24, #0877a0, #23d5ab), linear-gradient(160deg, #0a2540 0%, #0e4d7b 40%, #065f5f 100%), linear-gradient(160deg, #950768 0%, #659108dd 40%, #065f5f 100%), linear-gradient(135deg, #0538af 0%, #1e3a8a 30%, #4c1d95 70%, #0f172a 100%);
background-size: 400% 400%;
animation: gradient-multi-color 15s ease infinite;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Inter', sans-serif;
overflow: hidden;
}
@keyframes gradient-multi-color {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* মূল র্যাপার কার্ড — দুই কলামে বিভক্ত */
.login-v3-wrapper {
display: flex;
width: 100%;
max-width: 1050px;
min-height: 620px;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 30px 90px rgba(10, 22, 40, 0.22), 0 4px 20px rgba(10, 22, 40, 0.1);
margin: 24px;
}
/* ===== বাম পাশ: ব্র্যান্ড প্যানেল ===== */
.login-v3-brand-side {
flex: 1.1;
background: linear-gradient(160deg, #0a2540 0%, #0e4d7b 40%, #065f5f 100%);
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: 56px 48px;
overflow: hidden;
}
/* CSS ডট প্যাটার্ন ওভারলে — সাজসজ্জার জন্য */
.login-v3-dot-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
}
/* ব্র্যান্ড কন্টেন্ট র্যাপার */
.login-v3-brand-content {
position: relative;
z-index: 2;
}
/* ব্র্যান্ড লোগো আইকন */
.login-v3-brand-logo {
width: 62px;
height: 62px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.7rem;
color: #ffffff;
margin-bottom: 24px;
backdrop-filter: blur(8px);
animation: brand-logo-glow 4s ease-in-out infinite;
}
@keyframes brand-logo-glow {
0%,
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1);
}
50% {
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.05);
}
}
/* কোম্পানির নাম টাইটেল */
.login-v3-brand-title {
font-size: 1.75rem;
font-weight: 800;
color: #ffffff;
margin: 0 0 8px;
line-height: 1.2;
letter-spacing: -0.02em;
}
/* ব্র্যান্ড ডেসক্রিপশন */
.login-v3-brand-desc {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.58);
margin: 0 0 36px;
line-height: 1.6;
}
/* ফিচার লিস্ট */
.login-v3-features {
display: flex;
flex-direction: column;
gap: 18px;
margin-bottom: 36px;
}
/* একটি ফিচার আইটেম */
.login-v3-feature {
display: flex;
align-items: flex-start;
gap: 14px;
}
/* ফিচার আইকন বক্স */
.login-v3-feature-icon {
width: 38px;
height: 38px;
min-width: 38px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.18);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
color: #7dd3fc;
}
/* ফিচার টেক্সট গ্রুপ */
.login-v3-feature-text {
display: flex;
flex-direction: column;
gap: 2px;
padding-top: 2px;
}
.login-v3-feature-text strong {
font-size: 0.875rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.92);
}
.login-v3-feature-text span {
font-size: 0.775rem;
color: rgba(255, 255, 255, 0.5);
line-height: 1.4;
}
/* ব্র্যান্ড ফুটার */
.login-v3-brand-footer {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.3);
margin: 0;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* ===== ডান পাশ: লগইন ফর্ম প্যানেল ===== */
.login-v3-form-side {
flex: 1;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
padding: 48px 44px;
overflow-y: auto;
}
/* ফর্মের ভেতরের কন্টেইনার */
.login-v3-form-inner {
width: 100%;
max-width: 380px;
}
/* ফর্ম হেডার */
.login-v3-form-header {
margin-bottom: 28px;
}
/* "Secure Login" ব্যাজ */
.login-v3-form-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #0e7490;
background: #ecfeff;
border: 1px solid #a5f3fc;
padding: 4px 12px;
border-radius: 50px;
margin-bottom: 14px;
}
/* ফর্ম মূল টাইটেল */
.login-v3-form-title {
font-size: 1.65rem;
font-weight: 800;
color: #0f172a;
margin: 0 0 6px;
letter-spacing: -0.02em;
}
/* ফর্ম সাবটাইটেল */
.login-v3-form-subtitle {
font-size: 0.85rem;
color: #64748b;
margin: 0;
}
/* অ্যালার্ট — এরর এবং সাকসেস */
.login-v3-alert {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 10px;
margin-bottom: 20px;
font-size: 0.855rem;
font-weight: 500;
}
.login-v3-alert-error {
background: #fef2f2;
border: 1px solid #fecaca;
color: #dc2626;
}
.login-v3-alert-success {
background: #f0fdf4;
border: 1px solid #bbf7d0;
color: #16a34a;
}
/* ইনপুট ফিল্ড র্যাপার */
.login-v3-field {
margin-bottom: 18px;
}
/* ইনপুট লেবেল */
.login-v3-label {
display: block;
font-size: 0.8rem;
font-weight: 650;
color: #374151;
margin-bottom: 7px;
letter-spacing: 0.01em;
}
/* ইনপুট আইকন র্যাপার */
.login-v3-input-wrap {
position: relative;
}
/* ইনপুটের বাম আইকন */
.login-v3-input-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
font-size: 0.875rem;
pointer-events: none;
}
/* মূল ইনপুট ফিল্ড */
.login-v3-input {
width: 100%;
padding: 12px 14px 12px 40px;
background: #f8fafc;
border: 1.5px solid #e2e8f0;
border-radius: 10px;
color: #0f172a;
font-size: 0.91rem;
font-family: inherit;
outline: none;
box-sizing: border-box;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.login-v3-input::placeholder {
color: #b0b8c4;
}
/* ফোকাস অবস্থায় ইনপুট */
.login-v3-input:focus {
border-color: #0e7490;
background: #f0fdff;
box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.12);
}
/* ইনভ্যালিড ইনপুট */
.login-v3-input.is-invalid {
border-color: #ef4444;
background: #fff5f5;
}
/* পাসওয়ার্ড দেখানো/লুকানো বাটন */
.login-v3-eye-btn {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #9ca3af;
cursor: pointer;
font-size: 0.9rem;
padding: 4px;
transition: color 0.2s;
line-height: 1;
}
.login-v3-eye-btn:hover {
color: #0e7490;
}
/* মনে রাখো অপশন সারি */
.login-v3-options {
display: flex;
align-items: center;
margin-bottom: 22px;
}
/* চেকবক্স লেবেল */
.login-v3-checkbox-label {
display: flex;
align-items: center;
gap: 9px;
font-size: 0.845rem;
color: #4b5563;
cursor: pointer;
user-select: none;
}
.login-v3-checkbox-label input[type="checkbox"] {
display: none;
}
/* কাস্টম চেকবক্স ডিজাইন */
.login-v3-checkbox-box {
width: 18px;
height: 18px;
min-width: 18px;
border-radius: 5px;
border: 1.5px solid #cbd5e1;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.login-v3-checkbox-label input:checked+.login-v3-checkbox-box {
background: #0e7490;
border-color: #0e7490;
}
.login-v3-checkbox-label input:checked+.login-v3-checkbox-box::after {
content: '✓';
font-size: 11px;
color: #ffffff;
font-weight: 800;
line-height: 1;
}
/* সাবমিট বাটন */
.login-v3-submit {
width: 100%;
padding: 13.5px;
background: linear-gradient(135deg, #0a2540 0%, #0e4d7b 50%, #0891b2 100%);
border: none;
border-radius: 10px;
color: #ffffff;
font-size: 0.96rem;
font-weight: 700;
cursor: pointer;
font-family: inherit;
letter-spacing: 0.01em;
transition: all 0.25s ease;
box-shadow: 0 6px 22px rgba(10, 37, 64, 0.35);
}
.login-v3-submit:hover {
background: linear-gradient(135deg, #0a1f36 0%, #093d63 50%, #0780a0 100%);
box-shadow: 0 10px 30px rgba(10, 37, 64, 0.5);
transform: translateY(-1px);
}
.login-v3-submit:active {
transform: translateY(0);
}
.login-v3-submit:disabled {
opacity: 0.65;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* ডেমো ক্রেডেনশিয়াল সেকশন */
.login-v3-hint {
margin-top: 22px;
border-radius: 10px;
background: #f8fafc;
border: 1px solid #e2e8f0;
overflow: hidden;
}
/* হিন্ট সেকশন হেডার */
.login-v3-hint-header {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: #64748b;
padding: 9px 14px;
background: #f1f5f9;
border-bottom: 1px solid #e2e8f0;
}
/* ক্রেডেনশিয়াল লিস্ট */
.login-v3-hint-list {
padding: 8px 14px 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
/* একটি ক্রেডেনশিয়াল সারি */
.login-v3-hint-row {
display: flex;
align-items: center;
gap: 10px;
}
/* রোল ব্যাজ */
.login-v3-badge {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 2px 8px;
border-radius: 50px;
min-width: 58px;
text-align: center;
}
.login-v3-badge.admin {
background: #ede9fe;
color: #5b21b6;
}
.login-v3-badge.manager {
background: #e0f2fe;
color: #0369a1;
}
.login-v3-badge.employee {
background: #dcfce7;
color: #15803d;
}
/* ক্রেডেনশিয়াল টেক্সট */
.login-v3-hint-cred {
font-size: 0.775rem;
color: #64748b;
font-family: 'Courier New', monospace;
}
/* ফুটার */
.login-v3-footer {
text-align: center;
font-size: 0.73rem;
color: #94a3b8;
margin-top: 20px;
padding-top: 14px;
border-top: 1px solid #f1f5f9;
line-height: 1.5;
}
/* রেসপন্সিভ — মোবাইল স্ক্রিন */
@media (max-width: 700px) {
.login-v3-brand-side {
display: none;
}
.login-v3-wrapper {
max-width: 420px;
border-radius: 16px;
}
.login-v3-form-side {
padding: 36px 28px;
}
}
/* Header logout button size */
.btn-erp-sm {
padding: 0.35rem 0.85rem;
font-size: 0.78rem;
}
/* Premium In-page Form Highlight Pulse Effect */
@keyframes pulse-highlight {
0% {
box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.5);
border-color: #4f46e5;
}
50% {
box-shadow: 0 0 0 15px rgba(79, 70, 229, 0.15);
border-color: #4f46e5;
}
100% {
box-shadow: var(--shadow-sm);
border-color: var(--border-color);
}
}
.pulse-highlight {
animation: pulse-highlight 1.8s ease-in-out;
}
/* Custom utility classes to eliminate inline styling tags from HTML/Blade files */
.claim-status-select {
width: auto;
padding: 0.25rem 0.5rem;
font-size: 0.7rem;
}
.cat-input {
height: 32px;
font-size: 0.85rem;
}
.cat-btn {
height: 32px;
padding: 0 10px;
font-size: 0.85rem;
}
.cat-list {
max-height: 180px;
overflow-y: auto;
}
.user-avatar-xs {
width: 28px;
height: 28px;
font-size: 0.75rem;
}
.hr-pill-btn {
background: transparent !important;
color: var(--text-main) !important;
}
.hr-scroll-list {
max-height: 300px;
overflow-y: auto;
}
.w-100px {
width: 100px;
}
.w-150px {
width: 150px;
}
.w-50px {
width: 50px;
}
.qty-input-small {
padding: 0.25rem;
font-size: 0.8rem;
}
.d-none {
display: none !important;
}
/* ─── Tax Rules Module ─────────────────────────────────────── */
/* Form card editing highlight */
.tax-rule-form-editing {
border: 2px solid var(--warning);
box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12);
transition: border-color 0.3s, box-shadow 0.3s;
}
/* Badge variants used across the app */
.erp-badge {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.5rem;
/* Tighter padding */
border-radius: 999px;
font-size: 0.68rem;
/* Smaller badge text */
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
}
.erp-badge-primary {
background: var(--primary-light);
color: var(--primary);
}
.erp-badge-success {
background: var(--success-light);
color: var(--success);
}
.erp-badge-danger {
background: var(--danger-light);
color: var(--danger);
}
.erp-badge-warning {
background: var(--warning-light);
color: var(--warning-hover);
}
.erp-badge-info {
background: var(--info-light);
color: var(--info-hover);
}
/* Tax summary breakdown rows */
.erp-tax-summary {
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
overflow: hidden;
}
.erp-tax-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.55rem 0.85rem;
font-size: 0.875rem;
border-bottom: 1px solid var(--border-color);
}
.erp-tax-summary-row:last-child {
border-bottom: none;
}
.erp-tax-summary-grand {
background: var(--bg-main);
font-weight: 700;
font-size: 0.95rem;
}
/* Inline tax totals row in trading forms */
.erp-totals-card {
background: linear-gradient(135deg, #f8fafc, #eef2ff);
border: 1px solid #c7d2fe;
border-radius: var(--radius-md);
padding: 1rem 1.25rem;
}
.erp-totals-row {
display: flex;
justify-content: space-between;
padding: 0.3rem 0;
font-size: 0.875rem;
color: var(--text-muted);
}
.erp-totals-row.grand {
border-top: 1px solid #c7d2fe;
margin-top: 0.4rem;
padding-top: 0.6rem;
font-size: 1rem;
font-weight: 700;
color: var(--text-main);
}
/* VAT calculator card on expenses/incomes */
.erp-vat-calc-card {
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
border: 1px solid #bbf7d0;
border-radius: var(--radius-md);
padding: 1.1rem 1.25rem;
}
.erp-vat-calc-title {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--success);
margin-bottom: 0.75rem;
}
/* Opacity helper for inactive items */
.opacity-60 {
opacity: 0.6;
}
/* Smart Variations & Attributes UI (Exact Image Match) */
.variants-card {
background: #ffffff;
border: 1px solid #edf2f7;
border-radius: 12px;
margin-top: 2rem;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.variants-card-header {
padding: 1rem 1.25rem;
/* Tighter */
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f8fafc;
}
.variants-card-title {
display: flex;
align-items: center;
gap: 0.65rem;
font-weight: 800;
color: #1a202c;
font-size: 0.95rem;
/* Smaller */
letter-spacing: -0.01em;
}
.variants-card-title i {
color: #4f46e5;
font-size: 1.2rem;
}
.attribute-picker-box {
background: #f1f5f9;
padding: 1rem 1rem;
/* Reduced padding */
border-radius: 8px;
margin: 0.5rem 1rem;
border: 1px solid #e2e8f0;
}
.smart-attr-select-wrapper {
max-width: 280px;
}
.smart-attr-select {
width: 100%;
padding: 0.55rem 1rem;
/* Tighter */
border: 1.5px solid #d1d5db;
border-radius: 10px;
font-size: 0.85rem;
/* Smaller */
font-weight: 700;
color: #374151;
background: #ffffff;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
outline: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.smart-attr-select:hover {
border-color: #4f46e5;
}
.smart-attr-select:focus {
border-color: #4f46e5;
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}
.selected-attributes-list {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
padding: 0 1.75rem 1.75rem 1.75rem;
}
.attr-tag-card {
background: #ffffff;
border-radius: 8px;
padding: 0.5rem 0.75rem;
/* Tighter */
display: flex;
flex-direction: column;
gap: 0.4rem;
min-width: 160px;
/* Even smaller */
border: 1.5px solid #e2e8f0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
transition: transform 0.2s;
}
.attr-tag-card:hover {
transform: translateY(-2px);
}
.attr-tag-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f1f5f9;
padding-bottom: 0.5rem;
}
.attr-tag-name {
font-weight: 800;
font-size: 0.9rem;
color: #1f2937;
text-transform: capitalize;
}
.attr-tag-remove {
color: #9ca3af;
cursor: pointer;
font-size: 0.9rem;
transition: color 0.2s;
padding: 0.25rem;
}
.attr-tag-remove:hover {
color: #dc2626;
}
.attr-values-flex {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.attr-val-pill {
background: #f9fafb;
border: 1px solid #e5e7eb;
padding: 0.2rem 0.5rem;
/* Tighter */
border-radius: 4px;
font-size: 0.68rem;
/* Smaller */
font-weight: 700;
color: #4b5563;
cursor: pointer;
user-select: none;
transition: all 0.2s;
}
.attr-val-pill:hover {
border-color: #4f46e5;
background: #f5f3ff;
}
.attr-val-pill.active {
background: #4f46e5;
border-color: #4f46e5;
color: #ffffff;
box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2);
}
/* Smart Combinations Table */
.smart-comb-table-wrapper {
padding: 0 1.75rem 1.75rem 1.75rem;
}
.smart-comb-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.smart-comb-table th {
text-align: left;
padding: 0.85rem 0.75rem;
/* Tighter */
font-size: 0.68rem;
/* Smaller */
font-weight: 900;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.075em;
border-bottom: 2px solid #f1f5f9;
background: #ffffff;
}
.smart-comb-table td {
padding: 0.75rem 0.5rem;
/* Tighter */
border-bottom: 1px solid #f1f5f9;
vertical-align: middle;
}
.comb-config-text {
font-weight: 800;
color: #4f46e5;
font-size: 0.85rem;
/* Smaller */
letter-spacing: -0.01em;
}
.smart-comb-input {
width: 100%;
padding: 0.35rem 0.55rem;
/* Tighter */
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #ffffff;
font-size: 0.72rem;
/* Smaller */
font-weight: 700;
color: #334155;
outline: none;
transition: all 0.2s;
}
.smart-comb-input:focus {
border-color: #4f46e5;
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.05);
}
.stock-badge-blue {
background: #eef2ff;
color: #4f46e5;
padding: 0.2rem 0.5rem;
border-radius: 8px;
font-weight: 800;
font-size: 0.7rem;
display: inline-block;
}
.tax-rule-select-smart {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 10px;
padding: 0.5rem 1rem;
font-size: 0.85rem;
font-weight: 700;
color: #475569;
cursor: pointer;
outline: none;
transition: border-color 0.2s;
}
.tax-rule-select-smart:focus {
border-color: #4f46e5;
}
.var-delete-btn-smart {
color: #ef4444;
background: #ffffff;
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
border: 1.5px solid #fee2e2;
}
.var-delete-btn-smart:hover {
background: #fee2e2;
border-color: #ef4444;
transform: scale(1.05);
}
.var-delete-btn-smart i {
font-size: 0.9rem;
}
/* Beautiful ERP Pagination Styles */
.erp-pagination {
padding: 1rem 0;
margin-top: 1rem;
}
.erp-pagination-item {
display: inline-flex;
align-items: center;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 600;
color: #475569;
background-color: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
transition: all 0.2s ease;
text-decoration: none !important;
}
.erp-pagination-item:hover:not(.disabled) {
background-color: #f8fafc;
border-color: #cbd5e1;
color: #1e293b;
transform: translateY(-1px);
}
.erp-pagination-item.disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: #f1f5f9;
}
.erp-pagination-li {
list-style: none;
}
.erp-pagination-btn {
display: flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 8px;
font-size: 0.875rem;
font-weight: 600;
color: #64748b;
background-color: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
text-decoration: none !important;
}
.erp-pagination-li:not(.active):not(.disabled) .erp-pagination-btn:hover {
color: #4f46e5;
border-color: #6366f1;
background-color: #f5f3ff;
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1), 0 2px 4px -1px rgba(99, 102, 241, 0.06);
}
.erp-pagination-li.active .erp-pagination-btn {
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
color: #fff;
border-color: transparent;
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}
.erp-pagination-li.disabled .erp-pagination-btn {
opacity: 0.4;
cursor: not-allowed;
background-color: #f8fafc;
}
.erp-pagination-btn.dots {
border: none;
background: transparent;
cursor: default;
}
.erp-pagination nav>div:first-child {
display: none !important;
}
/* Left Menu Toggle Systems */
.erp-wrapper.sidebar-collapsed .erp-sidebar {
width: 80px;
}
.erp-wrapper.sidebar-collapsed .sidebar-brand span,
.erp-wrapper.sidebar-collapsed .sidebar-link span,
.erp-wrapper.sidebar-collapsed .sidebar-section-title,
.erp-wrapper.sidebar-collapsed .arrow-icon,
.erp-wrapper.sidebar-collapsed .sidebar-dropdown {
display: none !important;
}
.erp-wrapper.sidebar-collapsed .sidebar-link {
justify-content: center;
padding: 0.75rem;
}
.erp-wrapper.sidebar-collapsed .sidebar-link i {
font-size: 1.25rem;
margin: 0;
}
.sidebar-toggle-btn {
background: none;
border: none;
color: var(--text-muted);
font-size: 1.2rem;
cursor: pointer;
padding: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s;
}
.sidebar-toggle-btn:hover {
color: var(--primary);
}
/* Small and Smart Input Fields */
.form-control-erp-sm {
font-size: 0.7rem;
padding: 0.3rem 0.5rem;
border-radius: 4px;
height: 28px;
}
.form-label-erp-sm {
font-size: 0.62rem;
margin-bottom: 0.15rem;
}
.select2-container--default .select2-selection--single {
height: 32px !important;
font-size: 0.8rem !important;
border-radius: 6px !important;
border: 1px solid var(--border-color) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 30px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 30px !important;
}
/* Underline and link style for product names */
.product-name-link {
color: var(--primary);
text-decoration: underline;
font-weight: 600;
transition: color 0.2s;
}
.product-name-link:hover {
color: var(--primary-hover);
text-decoration: none;
}
/* Image preview styles */
.product-image-preview {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 4px;
border: 1px solid #e2e8f0;
}
/* Proper size classes for customer/supplier logos (high specificity) */
.table-erp td .w-10 {
width: 40px !important;
min-width: 40px;
max-width: 40px;
}
.table-erp td .h-10 {
height: 40px !important;
min-height: 40px;
max-height: 40px;
}
.w-10 {
width: 40px !important;
}
.h-10 {
height: 40px !important;
}
.image-upload-wrapper {
position: relative;
width: 110px;
height: 110px;
border: 2px dashed #cbd5e1;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
cursor: pointer;
background: #f8fafc;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.image-upload-wrapper:hover {
border-color: var(--primary);
background: #f1f5f9;
}
.product-image-upload-col {
flex: 0 0 auto;
width: 140px;
}
.image-upload-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
.variations-search-input {
max-width: 280px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 0.75rem center;
background-size: 1rem;
padding-left: 2.25rem !important;
}
.smart-comb-table input.form-control-erp {
padding: 0.35rem 0.65rem;
font-size: 0.7rem;
border-radius: 6px;
min-width: 80px;
}
.form-group-erp select.form-control-erp {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
padding-right: 2.5rem;
}
.attributes-filter-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.image-upload-wrapper i {
font-size: 1.25rem;
color: #94a3b8;
}
.image-upload-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
/* Product Table Enhancements */
.product-info-cell {
display: flex;
align-items: center;
gap: 0.75rem;
}
.product-details-box {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.product-name-link {
color: var(--primary);
text-decoration: underline;
font-weight: 700;
font-size: 0.75rem;
transition: color 0.2s;
}
/* Status Badges */
.status-badge {
padding: 0.15rem 0.5rem;
border-radius: 9999px;
font-size: 0.62rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.status-active {
background: #dcfce7;
color: #166534;
}
.status-inactive {
background: #fee2e2;
color: #991b1b;
}
/* Product Details Page - unique supplemental styles (shared styles defined earlier ~line 784-899) */
.image-placeholder-lg {
width: 180px;
height: 180px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f1f5f9;
border: 1px dashed #cbd5e1;
border-radius: 12px;
color: #94a3b8;
}
.image-placeholder-lg i {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.meta-info-list {
margin-top: 1rem;
font-size: 0.65rem;
color: #64748b;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.meta-info-item b {
color: #334155;
}
/* Tabs UI - uses shared .tab-btn / .tab-content defined earlier */
/* Stock Movement Table */
.movement-table {
width: 100%;
border-collapse: collapse;
}
.movement-table th {
background: #f8fafc;
padding: 0.75rem 1rem;
font-size: 0.65rem;
font-weight: 800;
color: #64748b;
text-transform: uppercase;
text-align: left;
border-bottom: 2px solid #f1f5f9;
}
.movement-table td {
padding: 0.75rem 1rem;
font-size: 0.72rem;
color: #334155;
border-bottom: 1px solid #f1f5f9;
}
.movement-section-header {
background: #f0fdf4;
font-weight: 800;
color: #166534;
font-size: 0.65rem;
padding: 0.4rem 1rem !important;
}
.movement-section-header.out {
background: #fef2f2;
color: #991b1b;
}
/* Employee Show Grid and Profile styling */
.employee-show-grid {
display: grid;
grid-template-columns: 200px repeat(3, 1fr);
gap: 1rem;
margin-bottom: 1.5rem;
}
@media (max-width: 1024px) {
.employee-show-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.employee-show-grid {
grid-template-columns: 1fr;
}
}
/* English: Employee profile image container — centers the photo/avatar in the column. */
/* Bangla: কর্মচারীর প্রোফাইল ছবি বা অ্যাভাটার কলামের মধ্যে কেন্দ্র করে প্রদর্শন করে। */
.employee-image-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0.5rem 0;
}
/* English: Profile photo wrapper — same style as product/customer list thumbnail box. */
/* Bangla: প্রোফাইল ফটো র্যাপার — প্রোডাক্ট ও কাস্টমার লিস্টের থাম্বনেইল বক্সের মতো স্টাইল। */
.employee-profile-image-wrapper {
width: 120px;
height: 120px;
border-radius: 16px;
overflow: hidden;
border: 2px solid #e2e8f0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.employee-profile-image-wrapper:hover {
box-shadow: 0 8px 24px rgba(79, 70, 229, 0.15);
transform: translateY(-2px);
}
/* English: The actual ![]()
tag inside the wrapper — fills container with contain fit and 4px padding. */
/* Bangla: র্যাপারের ভেতরের ![]()
ট্যাগ — কন্টেইনার পূরণ করে contain ফিট এবং ৪px প্যাডিং সহ। */
.employee-profile-image {
width: 100%;
height: 100%;
object-fit: contain;
padding: 4px;
}
/* English: Placeholder avatar shown when no photo is uploaded — gradient with initials. */
/* Bangla: কোনো ছবি আপলোড না থাকলে দেখানো প্লেসহোল্ডার অ্যাভাটার — গ্র্যাডিয়েন্ট ও ইনিশিয়াল সহ। */
.employee-profile-placeholder {
width: 120px;
height: 120px;
border-radius: 16px;
background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
border: 2px solid rgba(255, 255, 255, 0.6);
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.employee-profile-placeholder:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(79, 70, 229, 0.3);
}
.badge-attachment {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.5rem;
font-size: 0.62rem;
font-weight: 700;
border-radius: 6px;
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
}
.badge-attachment.badge-image {
background-color: var(--success-light);
color: var(--success-hover);
border: 1px solid var(--success-light);
}
.badge-attachment.badge-image:hover {
background-color: var(--success);
color: #ffffff;
border-color: var(--success);
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}
.badge-attachment.badge-pdf {
background-color: var(--danger-light);
color: var(--danger-hover);
border: 1px solid var(--danger-light);
}
.badge-attachment.badge-pdf:hover {
background-color: var(--danger);
color: #ffffff;
border-color: var(--danger);
box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}
.badge-attachment.badge-download {
background-color: var(--primary-light);
color: var(--primary);
border: 1px solid var(--primary-light);
}
.badge-attachment.badge-download:hover {
background-color: var(--primary);
color: #ffffff;
border-color: var(--primary);
box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2);
}
/* Smart Location Pop-up UI */
.location-popup-btn {
width: 28px;
height: 28px;
background: #f8fafc;
border: 1.5px solid #e2e8f0;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #64748b;
transition: all 0.2s;
}
.location-popup-btn:hover {
background: #f1f5f9;
color: var(--primary);
border-color: var(--primary);
}
.location-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 23, 42, 0.3);
backdrop-filter: blur(2px);
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
}
.location-popup {
background: #ffffff;
width: 320px;
border-radius: 12px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
border: 1px solid #e2e8f0;
overflow: hidden;
animation: popupScale 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes popupScale {
from {
opacity: 0;
transform: scale(0.95) translateY(10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.location-popup-header {
padding: 0.75rem 1rem;
background: #fafbfc;
border-bottom: 1px solid #f1f5f9;
display: flex;
justify-content: space-between;
align-items: center;
}
.location-popup-title {
font-size: 0.75rem;
font-weight: 800;
color: #334155;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.location-popup-body {
padding: 1rem;
}
.location-popup-footer {
padding: 0.75rem 1rem;
background: #fafbfc;
border-top: 1px solid #f1f5f9;
display: flex;
justify-content: flex-end;
}
/* ─────────────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════ */
/* Custom SweetAlert2 Premium ERP Styling */
/* ══════════════════════════════════════════════════════════ */
/* Popup container */
.swal2-erp-popup {
font-family: 'Inter', sans-serif !important;
border-radius: var(--radius-md) !important;
padding: 2rem 2.25rem !important;
border: 1px solid var(--border-color) !important;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.18) !important;
background-color: #ffffff !important;
min-width: 360px !important;
max-width: 480px !important;
}
/* Title row */
.swal2-erp-title {
font-size: 1.15rem !important;
font-weight: 700 !important;
color: var(--text-main) !important;
margin-top: 0.75rem !important;
margin-bottom: 0.25rem !important;
letter-spacing: -0.01em !important;
}
/* HTML container wrapping name + message */
.swal2-erp-html {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0.35rem !important;
padding: 0.25rem 0 1rem !important;
text-align: center !important;
}
/* Item name (bold, prominent) */
.swal2-erp-body-name {
display: block !important;
font-size: 1rem !important;
font-weight: 700 !important;
color: var(--text-main) !important;
background-color: var(--danger-light) !important;
border-radius: var(--radius-sm) !important;
padding: 0.3rem 0.85rem !important;
max-width: 100% !important;
word-break: break-word !important;
}
/* Subtitle / detail message */
.swal2-erp-body-msg {
display: block !important;
font-size: 0.85rem !important;
color: var(--text-muted) !important;
line-height: 1.55 !important;
}
/* Shared button base — applies to all three button types */
.swal2-erp-confirm-btn,
.swal2-erp-action-confirm-btn,
.swal2-erp-cancel-btn {
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
font-size: 0.875rem !important;
padding: 0.6rem 1.35rem !important;
border-radius: var(--radius-sm) !important;
transition: all 0.2s ease !important;
margin: 0.25rem !important;
border: none !important;
outline: none !important;
cursor: pointer !important;
letter-spacing: 0.01em !important;
}
/* Delete / danger confirm button */
.swal2-erp-confirm-btn {
background-color: var(--danger) !important;
color: #ffffff !important;
}
.swal2-erp-confirm-btn:hover {
background-color: var(--danger-hover) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
}
/* Non-danger action confirm button (primary indigo) */
.swal2-erp-action-confirm-btn {
background-color: var(--primary) !important;
color: #ffffff !important;
}
.swal2-erp-action-confirm-btn:hover {
background-color: var(--primary-hover) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35) !important;
}
/* Cancel button */
.swal2-erp-cancel-btn {
background-color: #f1f5f9 !important;
color: var(--text-muted) !important;
border: 1px solid var(--border-color) !important;
}
.swal2-erp-cancel-btn:hover {
background-color: var(--border-color) !important;
color: var(--text-main) !important;
}
/* ── Toast notifications ──────────────────────────────────── */
.swal2-erp-toast {
font-family: 'Inter', sans-serif !important;
border-radius: var(--radius-sm) !important;
box-shadow: var(--shadow-md) !important;
border: 1px solid var(--border-color) !important;
padding: 0.65rem 1rem !important;
background: #ffffff !important;
}
.swal2-erp-toast-title {
font-size: 0.875rem !important;
font-weight: 600 !important;
color: var(--text-main) !important;
}
/* ═══════════════════════════════════════════════════════════════════
Generate Payroll Page (gp-*) — all styling for generate_salaries
═══════════════════════════════════════════════════════════════════ */
/* Info banner */
.gp-info-banner {
background: #eff6ff;
border-bottom: 1px solid #bfdbfe;
}
.gp-info-icon {
color: #3b82f6;
font-size: 1rem;
flex-shrink: 0;
}
.gp-info-text {
margin: 0;
font-size: 0.72rem;
color: #1d4ed8;
flex: 1;
}
/* Toolbar / filter row */
.gp-filter-row {
flex-wrap: wrap;
gap: 8px;
}
.gp-section-label {
font-size: 0.68rem;
font-weight: 800;
color: #374151;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.gp-filter-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.gp-search-wrapper {
min-width: 180px;
max-width: 220px;
}
.gp-search-input {
font-size: 0.68rem;
}
.gp-per-page {
width: 80px;
font-size: 0.68rem;
}
.gp-select-all-label {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.68rem;
font-weight: 700;
color: #475569;
cursor: pointer;
margin: 0;
white-space: nowrap;
}
.gp-cursor {
cursor: pointer;
}
/* Month / Year row */
.gp-month-row {
border-bottom: 1px solid #e2e8f0;
border-top: 1px solid #e2e8f0;
flex-wrap: wrap;
}
.gp-month-field {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 200px;
}
.gp-field-label {
margin: 0;
font-size: 0.68rem;
font-weight: 800;
color: #374151;
}
.gp-required {
color: #ef4444;
}
.gp-month-input {
font-weight: 700;
font-size: 0.8rem;
}
.gp-badge-wrapper {
margin-left: auto;
}
.gp-selection-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 0.68rem;
font-weight: 800;
color: #475569;
}
/* Alert box */
.gp-alert-box {
display: none;
margin: 8px 12px;
padding: 8px 12px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 8px;
font-size: 0.68rem;
font-weight: 700;
color: #b91c1c;
}
/* Table overrides */
.gp-table-wrapper {
border-top: none;
border-radius: 0;
}
.gp-th-check {
width: 38px;
text-align: center;
}
.gp-th-sn {
width: 42px;
text-align: center;
}
.gp-th-right {
text-align: right;
}
.gp-td-center {
text-align: center;
vertical-align: middle;
}
.gp-td-sn {
text-align: center;
vertical-align: middle;
color: #64748b;
font-weight: 700;
}
.gp-td-mid {
vertical-align: middle;
}
.gp-td-salary {
vertical-align: middle;
text-align: right;
}
.gp-emp-name {
cursor: pointer;
display: block;
margin: 0;
font-weight: 700;
color: #1e293b;
font-size: 0.72rem;
}
.gp-emp-phone {
color: #94a3b8;
font-size: 0.62rem;
}
.gp-badge-gap {
margin-left: 3px;
}
.gp-salary-input {
width: 110px;
text-align: right;
font-weight: 700;
color: #4f46e5;
font-size: 0.7rem;
display: inline-block;
}
/* Empty state */
.gp-empty-state {
text-align: center;
color: #94a3b8;
padding: 2.5rem;
font-size: 0.72rem;
}
.gp-empty-icon {
font-size: 2rem;
display: block;
margin-bottom: 0.5rem;
opacity: 0.2;
}
/* Pagination bar */
.gp-pagination-bar {
padding: 10px 16px;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
.gp-page-info {
font-size: 0.65rem;
font-weight: 700;
color: #64748b;
letter-spacing: 0.04em;
}
.gp-page-info .gp-accent {
color: #4f46e5;
}
.gp-page-info .gp-total {
color: #1e293b;
}
/* Action footer */
.gp-action-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
/* Generate Payroll — unified toolbar layout */
.gp-toolbar-row {
flex-wrap: wrap;
gap: 10px;
align-items: flex-end;
}
.gp-toolbar-left {
display: flex;
align-items: flex-end;
gap: 12px;
flex-wrap: wrap;
}
/* Precise text alignment utilities to override generic table properties */
.text-right {
text-align: right !important;
}
.text-end {
text-align: right !important;
}
.text-left {
text-align: left !important;
}
.text-center {
text-align: center !important;
}
/* Premium Method Badge Design */
.badge-method {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.2rem 0.45rem;
font-size: 0.6rem;
font-weight: 800;
border-radius: 6px;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.badge-method.method-cash {
background-color: #f0fdf4;
color: #166534;
border: 1px solid #bbf7d0;
}
.badge-method.method-bank {
background-color: #eff6ff;
color: #1d4ed8;
border: 1px solid #bfdbfe;
}
.badge-method.method-mobile {
background-color: #fdf2f8;
color: #9d174d;
border: 1px solid #fbcfe8;
}
.badge-method.method-other {
background-color: #fffbeb;
color: #92400e;
border: 1px solid #fde68a;
}
/* Custom styling for purchase return serial details page */
.serial-details-page {
font-size: 10px !important;
}
.serial-details-page h4,
.serial-details-page .text-base,
.serial-details-page .text-sm {
font-size: 11px !important;
}
.serial-details-page .text-xs,
.serial-details-page .badge-erp {
font-size: 8px !important;
}
/* 8-column grid on large screens */
.serial-grid {
display: grid !important;
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
gap: 4px !important;
}
@media (min-width: 576px) {
.serial-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (min-width: 768px) {
.serial-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}
@media (min-width: 1024px) {
.serial-grid {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
}
@media (min-width: 1280px) {
.serial-grid {
grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
}
}
/* Tiny serial card styles */
.serial-card-tiny {
padding: 4px !important;
border: 1px solid #cbd5e1 !important;
border-radius: 4px !important;
background-color: #ffffff !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
min-height: 48px !important;
font-size: 8px !important;
}
.serial-card-tiny .serial-number {
font-size: 8px !important;
font-family: monospace !important;
font-weight: 700 !important;
color: #1e293b !important;
word-break: break-all !important;
}
.serial-card-tiny .badge-erp {
font-size: 8px !important;
padding: 1px 3px !important;
line-height: 1 !important;
display: inline-block !important;
border-radius: 2px !important;
}
.serial-card-tiny .restock-link {
color: #22c55e !important;
/* green-500 */
font-weight: 700 !important;
text-decoration: underline !important;
}
.serial-card-tiny .restock-link:hover {
color: #16a34a !important;
/* green-600 */
}
/* Metric cards for IMEI tracking */
.metric-card-grid {
display: grid !important;
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
gap: 0.75rem !important;
margin-bottom: 1.5rem !important;
}
@media (min-width: 640px) {
.metric-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (min-width: 1024px) {
.metric-card-grid {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
}
.metric-card-erp {
background: #ffffff !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px !important;
padding: 0.75rem 1rem !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
display: flex !important;
flex-direction: column !important;
position: relative !important;
overflow: hidden !important;
}
.metric-card-erp .metric-title {
font-size: 9px !important;
text-transform: uppercase !important;
font-weight: 800 !important;
color: #64748b !important;
letter-spacing: 0.05em !important;
margin-bottom: 0.25rem !important;
}
.metric-card-erp .metric-value {
font-size: 1.25rem !important;
font-weight: 900 !important;
color: #1e293b !important;
line-height: 1.2 !important;
}
.metric-card-erp::before {
content: '' !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: 4px !important;
}
.metric-card-erp.purchased::before {
background-color: #4f46e5 !important;
}
.metric-card-erp.returned::before {
background-color: #d97706 !important;
}
.metric-card-erp.sold::before {
background-color: #dc2626 !important;
}
.metric-card-erp.sale-returned::before {
background-color: #10b981 !important;
}
.metric-card-erp.available::before {
background-color: #06b6d4 !important;
}
.metric-card-erp.restocked::before {
background-color: #8b5cf6 !important;
}
/* POS Terminal Enhancements */
.pos-top-bar {
display: grid;
grid-template-columns: 1.5fr 1.2fr 1fr 1fr 1fr;
gap: 0.75rem;
background-color: #ffffff;
border: 1px solid var(--border-color);
padding: 0.75rem 1rem;
border-radius: var(--radius-md);
margin-bottom: 1rem;
align-items: center;
box-shadow: var(--shadow-sm);
}
.pos-top-bar .form-group-erp {
margin-bottom: 0 !important;
}
.pos-top-bar .form-label-erp {
font-size: 9px;
text-transform: uppercase;
font-weight: 800;
color: var(--text-muted);
margin-bottom: 3px;
display: block;
letter-spacing: 0.05em;
}
.pos-top-bar .form-control-erp {
height: 32px;
padding: 0.25rem 0.5rem;
font-size: 11px;
}
.pos-cart-table {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
.pos-cart-table th {
background-color: #f8fafc;
color: var(--text-muted);
font-weight: 700;
padding: 6px 8px;
text-align: left;
border-bottom: 1px solid var(--border-color);
text-transform: uppercase;
font-size: 9px;
letter-spacing: 0.03em;
}
.pos-cart-table td {
padding: 6px 8px;
border-bottom: 1px solid var(--border-color);
vertical-align: middle;
}
.pos-cart-item-title {
font-weight: 700;
color: var(--text-main);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.2;
}
.pos-cart-item-sku {
font-size: 8px;
color: var(--text-muted);
display: block;
margin-top: 1px;
}
.pos-cart-item-qty-input {
width: 48px;
padding: 2px 4px;
font-size: 10px;
text-align: center;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
height: 24px;
}
.variation-list-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.5rem;
}
.variation-item-btn {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.6rem 0.75rem;
border: 1px solid var(--border-color);
background-color: var(--bg-card);
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.15s ease;
text-align: left;
width: 100%;
}
.variation-item-btn:hover {
border-color: var(--primary);
background-color: #f8fafc;
}
.variation-item-title {
font-size: 11px;
font-weight: 700;
color: var(--text-main);
}
.variation-item-details {
font-size: 10px;
color: var(--text-muted);
}
.pos-cart-item-action-btn {
padding: 0.2rem 0.4rem;
font-size: 9px;
}
.hidden {
display: none !important;
}
/* POS Bottom Bar Styling */
.pos-bottom-bar {
background-color: #ffffff;
border: 1px solid var(--border-color);
padding: 0.75rem 1.25rem;
border-radius: var(--radius-md);
margin-top: 1rem;
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
gap: 0.75rem;
flex-shrink: 0;
}
.pos-bottom-row-1 {
display: block;
}
.payment-row .payment-method-select,
.payment-row .payment-account-select,
.payment-row .payment-amount-input {
flex: 1;
min-width: 0;
}
.pos-bottom-payment-group {
display: flex;
flex-direction: column;
}
.pos-bottom-row-2 {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px dashed var(--border-color);
padding-top: 0.75rem;
}
.pos-bottom-summary {
display: flex;
align-items: center;
gap: 2rem;
}
.pos-bottom-summary-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 11px;
font-weight: 700;
}
.pos-bottom-summary-item .label {
color: var(--text-muted);
}
.pos-bottom-summary-item .value {
color: var(--primary);
}
.pos-summary-input {
width: 80px !important;
height: 24px !important;
padding: 2px 4px !important;
font-size: 10px !important;
margin-left: 4px;
font-weight: bold;
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-sm);
}
.pos-cart-header-grand-total {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
background: linear-gradient(135deg, var(--primary-light) 0%, var(--success-light) 100%);
padding: 0.35rem 0.8rem;
border-radius: var(--radius-xl);
border: 1px solid rgba(79, 70, 229, 0.15);
box-shadow: 0 2px 4px rgba(79, 70, 229, 0.08);
}
.pos-cart-header-grand-total .label {
color: var(--primary-hover);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.pos-cart-header-grand-total .value {
color: var(--success-hover);
font-size: 14px;
font-weight: 800;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.pos-bottom-actions {
display: flex;
gap: 0.5rem;
}
/* === Restaurant POS Bottom Bar Compact Card Summary Styles === */
/* Bangla: রেস্টুরেন্ট POS নিচের বারের কমপ্যাক্ট কার্ড সামারি স্টাইল */
.pos-rpos-summary-cards {
display: flex;
align-items: stretch;
gap: 0.5rem;
flex-wrap: wrap;
}
.pos-rpos-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--bg-secondary, #f8fafc);
border: 1px solid var(--border-color, #e2e8f0);
border-radius: var(--radius-md, 8px);
padding: 0.35rem 0.75rem;
min-width: 80px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
transition: box-shadow 0.15s ease;
}
.pos-rpos-card:hover {
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.1);
}
.pos-rpos-card-input {
min-width: 90px;
}
.pos-rpos-card-label {
font-size: 9px;
font-weight: 700;
color: var(--text-muted, #94a3b8);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2px;
white-space: nowrap;
}
.pos-rpos-card-value {
font-size: 12px;
font-weight: 800;
color: var(--primary, #4f46e5);
white-space: nowrap;
}
.pos-rpos-input {
width: 78px !important;
height: 22px !important;
padding: 2px 5px !important;
font-size: 11px !important;
font-weight: 700;
border: 1px solid var(--border-color, #e2e8f0) !important;
border-radius: var(--radius-sm, 4px);
text-align: center;
background: #fff;
outline: none;
color: var(--text-primary, #1e293b);
transition: border-color 0.15s ease;
}
.pos-rpos-input:focus {
border-color: var(--primary, #4f46e5) !important;
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}
/* Grand Total card - highlighted accent style */
.pos-rpos-card-total {
background: linear-gradient(135deg, rgba(79, 70, 229, 0.08) 0%, rgba(16, 185, 129, 0.08) 100%);
border-color: rgba(79, 70, 229, 0.2);
min-width: 100px;
}
.pos-rpos-card-value-total {
font-size: 13px;
font-weight: 900;
color: var(--primary, #4f46e5);
white-space: nowrap;
}
/* === Payment Modal Three-Column Summary Card Styles === */
/* Bangla: পেমেন্ট মডালের তিন-কলাম সামারি কার্ড স্টাইল */
.pos-modal-summary-card {
display: flex;
align-items: stretch;
gap: 0;
background: var(--bg-secondary, #f8fafc);
border: 1px solid var(--border-color, #e2e8f0);
border-radius: var(--radius-lg, 10px);
overflow: hidden;
margin-bottom: 0.6rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
}
.pos-modal-summary-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
padding: 0.55rem 0.5rem;
text-align: center;
}
/* Grand Total segment - indigo accent */
.pos-modal-summary-item:first-child {
background: linear-gradient(135deg, rgba(79, 70, 229, 0.08) 0%, rgba(79, 70, 229, 0.04) 100%);
}
.pos-modal-summary-divider {
width: 1px;
background: var(--border-color, #e2e8f0);
flex-shrink: 0;
}
.pos-modal-summary-label {
font-size: 9px;
font-weight: 700;
color: var(--text-muted, #94a3b8);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 3px;
white-space: nowrap;
}
.pos-modal-summary-amount {
font-size: 16px;
font-weight: 900;
white-space: nowrap;
transition: color 0.2s ease;
}
/* Grand Total value - indigo */
.pos-modal-summary-total {
color: #3730a3;
font-size: 18px;
}
/* Remaining Due value - rose when positive */
.pos-modal-summary-due {
color: #e11d48;
}
/* Change value - emerald green when positive */
.pos-modal-summary-change {
color: #94a3b8;
}
.pos-modal-summary-change-active {
color: #059669;
}
/* Zero state - muted grey */
.pos-modal-summary-zero {
color: #94a3b8;
opacity: 0.75;
}
/* Single payment row styling */
.payment-row .payment-method-select,
.payment-row .payment-account-select {
font-size: 10px !important;
height: 28px !important;
padding: 0.2rem 0.4rem !important;
}
/* Dynamically styled multi payment rows */
.multi-payment-row {
display: flex !important;
align-items: center !important;
gap: 0.25rem !important;
width: 100% !important;
}
.multi-payment-row .payment-method-select,
.multi-payment-row .payment-account-select,
.multi-payment-row .payment-amount-input {
font-size: 9px !important;
height: 26px !important;
padding: 0.15rem 0.35rem !important;
border-radius: var(--radius-sm) !important;
}
.multi-payment-row .payment-method-select {
flex: 1 !important;
max-width: 100px !important;
}
.multi-payment-row .payment-account-select {
flex: 1.5 !important;
max-width: 150px !important;
}
.multi-payment-row .payment-amount-input {
flex: 0.8 !important;
max-width: 75px !important;
}
.multi-payment-row .btn-erp-danger {
padding: 0.15rem 0.35rem !important;
height: 26px !important;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px !important;
width: 26px !important;
}
/* Paid amount input highlighted and enlarged */
.pos-paid-amount-highlighted {
width: 110px !important;
height: 36px !important;
padding: 0.3rem 0.6rem !important;
font-size: 15px !important;
font-weight: 800 !important;
color: #059669 !important;
/* Emerald-600 */
background-color: #ecfdf5 !important;
/* Emerald-50 */
border: 1px solid #10b981 !important;
/* Emerald-500 */
border-radius: var(--radius-sm) !important;
text-align: right !important;
}
.pos-paid-amount-highlighted:focus {
outline: none !important;
border-color: #059669 !important;
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
}
/* Button Confirm State */
.btn-confirm-active {
background-color: var(--danger) !important;
border-color: var(--danger-hover) !important;
color: #ffffff !important;
animation: posPulse 1.2s infinite alternate;
}
@keyframes posPulse {
0% {
transform: scale(1);
}
100% {
transform: scale(1.03);
}
}
/* Compact private note input */
.pos-payment-note-compact {
width: 140px !important;
height: 36px !important;
padding: 0.3rem 0.6rem !important;
font-size: 11px !important;
font-weight: 500 !important;
color: #475569 !important;
/* Slate-600 */
background-color: #f8fafc !important;
/* Slate-50 */
border: 1px solid #cbd5e1 !important;
/* Slate-300 */
border-radius: var(--radius-sm) !important;
}
.pos-payment-note-compact:focus {
outline: none !important;
border-color: #6366f1 !important;
/* Indigo-500 */
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
}
/* Clean, Compact and Beautiful Table for IMEI Tracking */
.imei-table-clean {
width: 100%;
border-collapse: collapse;
}
.imei-table-clean th {
background-color: #f8fafc !important;
/* Soft slate bg */
color: #475569 !important;
/* Cool slate text */
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
padding: 10px 14px !important;
border-bottom: 2px solid #e2e8f0 !important;
}
.imei-table-clean td {
padding: 8px 14px !important;
font-size: 11px !important;
color: #334155 !important;
border-bottom: 1px solid #f1f5f9 !important;
vertical-align: middle !important;
}
.imei-table-clean tbody tr:hover {
background-color: #f8fafc !important;
/* Soft hover effect */
}
/* Compact status labels inside IMEI tracking table */
.imei-status-badge {
display: inline-flex;
align-items: center;
padding: 2px 6px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
border-radius: 4px;
border: 1px solid transparent;
}
.imei-status-badge.purchased {
background-color: #dcfce7;
color: #15803d;
border-color: #bbf7d0;
}
.imei-status-badge.restocked {
background-color: #dcfce7;
color: #15803d;
border-color: #bbf7d0;
}
.imei-status-badge.returned {
background-color: #fee2e2;
color: #b91c1c;
border-color: #fecaca;
}
.imei-status-badge.sold {
background-color: #fee2e2;
color: #b91c1c;
border-color: #fecaca;
}
.imei-status-badge.salereturntransit {
background-color: #dcfce7;
color: #15803d;
border-color: #bbf7d0;
}
/* Reusable status classes for printable/detail views */
.tracking-status-text {
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}
.tracking-status-text.available {
color: #15803d !important;
}
.tracking-status-text.unavailable {
color: #b91c1c !important;
}
/* Small SKU Pill */
.imei-sku-pill {
font-family: monospace;
font-size: 9px;
font-weight: 700;
color: #475569;
background-color: #f1f5f9;
padding: 1px 4px;
border-radius: 3px;
border: 1px solid #cbd5e1;
display: inline-block;
}
/* Merged IMEI + Product Info Cell */
.imei-serial-product-cell {
display: flex;
flex-direction: column;
gap: 3px;
}
.imei-product-sub {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
padding-left: 18px;
}
.imei-product-name {
font-size: 10px;
font-weight: 600;
color: #334155;
line-height: 1.2;
}
.imei-variation-tag {
font-size: 9px;
font-weight: 600;
color: #6366f1;
background-color: #eef2ff;
padding: 1px 5px;
border-radius: 3px;
border: 1px solid #c7d2fe;
display: inline-block;
line-height: 1.3;
}
/* Supplier / Customer sub-name under invoice links */
.imei-invoice-subname {
font-size: 9px;
font-weight: 600;
color: #64748b;
margin-top: 2px;
display: flex;
align-items: center;
gap: 3px;
line-height: 1.3;
}
.imei-purchase-date {
font-size: 9px;
font-weight: 600;
color: #475569;
margin-top: 2px;
display: flex;
align-items: center;
gap: 3px;
line-height: 1.3;
}
/* ═══════════════════════════════════════════════ */
/* Visual POS Styles */
/* ═══════════════════════════════════════════════ */
.vpos-products-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 0.4rem;
overflow-y: auto;
padding: 0.25rem;
}
.vpos-product-card {
background-color: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 0.3rem;
cursor: pointer;
transition: all 0.2s ease-in-out;
display: flex;
flex-direction: column;
height: auto;
position: relative;
box-shadow: var(--shadow-sm);
}
.vpos-product-card:hover {
border-color: var(--primary);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.vpos-product-image {
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f8fafc;
border-radius: var(--radius-sm);
overflow: hidden;
margin-bottom: 0.2rem;
border: 1px solid #f1f5f9;
}
.vpos-product-image img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.vpos-placeholder-svg {
width: 32px;
height: 32px;
color: #cbd5e1;
}
.vpos-product-info {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: flex-start;
gap: 2px;
}
.vpos-product-name {
font-size: 10px;
font-weight: 700;
color: var(--text-main);
margin-bottom: 0.15rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
}
.vpos-product-sku {
font-size: 9px;
color: var(--text-muted);
margin-bottom: 0.1rem;
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vpos-product-bottom {
display: flex;
flex-direction: column;
gap: 1px;
margin-top: 0;
border-top: none;
padding-top: 0;
}
.vpos-product-price-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.vpos-product-price {
font-size: 10px;
font-weight: 800;
color: var(--primary);
}
.vpos-product-vat {
font-size: 9px;
color: var(--text-muted);
}
.vpos-product-stock-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 9px;
}
.vpos-product-incl-tax {
color: var(--text-muted);
font-size: 8px;
}
.vpos-product-stock {
font-size: 9px;
font-weight: 600;
color: var(--text-muted);
}
.vpos-product-stock.out {
color: var(--danger);
}
.vpos-serial-textarea {
resize: none;
}
.vpos-hidden-metadata {
display: none !important;
}
.vpos-customer-col .select2-container--default .select2-selection--single,
.vpos-customer-col select.form-control-erp {
border: 1.5px solid #6366f1 !important;
box-shadow: 0 0 4px rgba(99, 102, 241, 0.2) !important;
background-color: #f5f3ff !important;
font-weight: 600 !important;
color: #4f46e5 !important;
transition: all 0.2s ease-in-out;
}
.vpos-customer-col .select2-container--default .select2-selection--single:focus,
.vpos-customer-col select.form-control-erp:focus {
border-color: #4f46e5 !important;
box-shadow: 0 0 6px rgba(79, 70, 229, 0.35) !important;
background-color: #ffffff !important;
}
.vpos-customer-col .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #4f46e5 !important;
font-weight: 600 !important;
}
/* ═══════════════════════════════════════════════ */
/* Visual POS Fullscreen Viewport Mode */
/* ═══════════════════════════════════════════════ */
body.vpos-fullscreen-mode {
overflow: hidden !important;
}
body.vpos-fullscreen-mode .erp-wrapper {
height: 100vh !important;
max-height: 100vh !important;
min-height: 100vh !important;
overflow: hidden !important;
}
body.vpos-fullscreen-mode .erp-sidebar {
display: none !important;
}
body.vpos-fullscreen-mode .erp-main {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: 100vh !important;
min-height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important;
}
body.vpos-fullscreen-mode .erp-header {
display: none !important;
}
body.vpos-fullscreen-mode .erp-content {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: 100vh !important;
min-height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
body.vpos-fullscreen-mode .erp-content footer {
display: none !important;
}
body.vpos-fullscreen-mode .pos-main-container {
height: 100vh !important;
max-height: 100vh !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
body.vpos-fullscreen-mode #pos_checkout_form {
height: 100% !important;
max-height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
body.vpos-fullscreen-mode .pos-wrapper {
flex: 1 !important;
min-height: 0 !important;
padding: 8px 8px 0 8px !important;
gap: 8px !important;
margin: 0 !important;
overflow: hidden !important;
}
body.vpos-fullscreen-mode .pos-products-pane {
height: 100% !important;
overflow-y: auto !important;
}
body.vpos-fullscreen-mode .pos-cart-pane {
height: 100% !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
body.vpos-fullscreen-mode .pos-cart-items-wrapper {
flex-grow: 1 !important;
overflow-y: auto !important;
}
body.vpos-fullscreen-mode .pos-bottom-bar {
margin: 0 !important;
border-radius: 0 !important;
border-left: none !important;
border-right: none !important;
border-bottom: none !important;
padding: 8px 12px !important;
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05) !important;
background-color: #ffffff !important;
flex-shrink: 0 !important;
}
/* Scoped overrides for the Back Button styling */
body.vpos-fullscreen-mode #vpos_back_btn {
background-color: #f8fafc !important;
border: 1.5px solid #cbd5e1 !important;
color: #64748b !important;
font-size: 10px !important;
font-weight: 700 !important;
padding: 3px 12px !important;
border-radius: 6px !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
body.vpos-fullscreen-mode #vpos_back_btn:hover {
background-color: #fef2f2 !important;
border-color: #fca5a5 !important;
color: #ef4444 !important;
box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.12), 0 2px 4px -2px rgba(239, 68, 68, 0.12) !important;
transform: translateY(-1px) !important;
}
/* Premium Top-Right Toast Notifications styling */
.vpos-custom-toast {
position: fixed;
top: 24px;
right: 24px;
padding: 10px 18px;
border-radius: 12px;
z-index: 9990;
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.vpos-custom-toast.toast-error {
background-color: #fff1f2 !important;
border: 1.5px solid #fca5a5 !important;
color: #e11d48 !important;
}
.vpos-custom-toast.toast-warning {
background-color: #fffbeb !important;
border: 1.5px solid #fcd34d !important;
color: #d97706 !important;
}
.vpos-custom-toast i {
font-size: 13px;
}
/* Scoped styling for the Fullscreen Toggle Button */
body.vpos-fullscreen-mode #vpos_fullscreen_btn {
background-color: #065f46 !important;
/* Dark Green */
border: 1px solid #047857 !important;
color: #ffffff !important;
padding: 2px 8px !important;
font-size: 9px !important;
font-weight: 700 !important;
border-radius: 4px !important;
transition: all 0.2s ease-in-out !important;
}
body.vpos-fullscreen-mode #vpos_fullscreen_btn:hover {
background-color: #047857 !important;
border-color: #059669 !important;
box-shadow: 0 2px 4px rgba(4, 120, 87, 0.2) !important;
transform: translateY(-1px) !important;
}
/* Active Exit Full Screen state (Dark Red) */
body.vpos-fullscreen-mode #vpos_fullscreen_btn.vpos-btn-fullscreen-active {
background-color: #991b1b !important;
/* Dark Red */
border: 1px solid #b91c1c !important;
color: #ffffff !important;
}
body.vpos-fullscreen-mode #vpos_fullscreen_btn.vpos-btn-fullscreen-active:hover {
background-color: #b91c1c !important;
border-color: #dc2626 !important;
box-shadow: 0 2px 4px rgba(185, 28, 28, 0.2) !important;
transform: translateY(-1px) !important;
}
/* Scoped styling for the All Clear Button (Primary Indigo color) */
#clear_cart_btn {
background-color: var(--primary) !important;
border-color: var(--primary) !important;
color: #ffffff !important;
font-weight: 700 !important;
transition: all 0.2s ease-in-out !important;
}
#clear_cart_btn:hover {
background-color: var(--primary-hover) !important;
border-color: var(--primary-hover) !important;
color: #ffffff !important;
box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2) !important;
transform: translateY(-1px) !important;
}
#clear_cart_btn.btn-confirm-active {
background-color: var(--danger) !important;
border-color: var(--danger-hover) !important;
color: #ffffff !important;
}
/* Disable double-tap zoom delay for all interactive controls inside Visual POS */
.pos-main-container button,
.pos-main-container a,
.pos-main-container input,
.pos-main-container select,
.pos-main-container textarea,
.vpos-product-card {
touch-action: manipulation;
}
/* Touchscreen & Mobile/Tablet viewport Enhancements for Visual POS */
@media (pointer: coarse),
(max-width: 1024px) {
/* Increase product card padding for easier touching */
.vpos-product-card {
padding: 0.5rem !important;
}
body.vpos-fullscreen-mode .pos-cart-item-qty-input {
width: 82px !important;
height: 34px !important;
font-size: 13px !important;
}
/* Bottom bar actions height & font size adjustments */
.pos-bottom-actions button {
padding: 0.55rem 0.95rem !important;
font-size: 12px !important;
min-height: 40px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Customer drop-down and related inputs */
.vpos-customer-col select.form-control-erp,
.vpos-customer-col .select2-container--default .select2-selection--single {
height: 38px !important;
font-size: 12px !important;
display: flex !important;
align-items: center !important;
}
.vpos-customer-col .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 36px !important;
}
/* Bottom summary inputs height */
.pos-summary-input {
height: 34px !important;
font-size: 11px !important;
}
/* Search input padding & height */
#pos_search_input {
height: 38px !important;
font-size: 12px !important;
}
}
/* Scoped overrides to enforce specific Qty and VAT column widths for Visual POS only */
body.vpos-fullscreen-mode .pos-cart-table th.vpos-th-qty,
body.vpos-fullscreen-mode .pos-cart-table td:nth-child(2) {
width: 80px !important;
min-width: 80px !important;
}
body.vpos-fullscreen-mode .pos-cart-table th.vpos-th-vat,
body.vpos-fullscreen-mode .pos-cart-table td:nth-child(4) {
width: 65px !important;
min-width: 65px !important;
}
/* Enlarge default Qty input in Visual POS since minus/plus buttons are removed */
body.vpos-fullscreen-mode .pos-cart-item-qty-input {
width: 76px !important;
height: 28px !important;
font-size: 11px !important;
padding: 3px 6px !important;
}
/* Force product name in Visual POS cart to exactly 12px */
body.vpos-fullscreen-mode .pos-cart-item-title {
font-size: 12px !important;
}
/* POS cart item list remove (cross) button styling (dark red text with light red background) - Scoped to Visual POS only */
body.vpos-fullscreen-mode .pos-cart-table .remove-cart-item {
color: #991b1b !important;
/* Dark Red */
background-color: var(--danger-light) !important;
/* Light Red/Rose Background */
border: 1px solid rgba(153, 27, 27, 0.15) !important;
border-radius: var(--radius-sm) !important;
/* Rounded corners */
width: 22px !important;
height: 22px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
transition: all 0.2s ease-in-out !important;
}
body.vpos-fullscreen-mode .pos-cart-table .remove-cart-item:hover {
color: #ffffff !important;
/* White on hover */
background-color: #991b1b !important;
/* Dark Red background on hover */
border-color: #991b1b !important;
box-shadow: 0 2px 4px rgba(153, 27, 27, 0.2) !important;
transform: scale(1.08) !important;
}
/* Premium Minimal SweetAlert2 Popup layout overrides */
.vpos-minimal-swal-popup {
width: 300px !important;
padding: 1.25rem !important;
border-radius: var(--radius-lg) !important;
box-shadow: var(--shadow-xl) !important;
}
.vpos-minimal-swal-popup .swal2-icon {
width: 48px !important;
height: 48px !important;
margin: 0.5rem auto 0.75rem auto !important;
}
.vpos-minimal-swal-popup .swal2-icon .swal2-icon-content {
font-size: 24px !important;
}
.vpos-minimal-swal-popup .swal2-title {
font-size: 14px !important;
font-weight: 700 !important;
color: var(--text-main) !important;
margin: 0 0 0.25rem 0 !important;
padding: 0 !important;
}
.vpos-minimal-swal-popup .swal2-html-container {
font-size: 11px !important;
color: var(--text-muted) !important;
margin: 0 0 1rem 0 !important;
padding: 0 !important;
line-height: 1.4 !important;
}
.vpos-minimal-swal-popup .swal2-actions {
margin: 0 !important;
gap: 0.5rem !important;
width: 100% !important;
display: flex !important;
justify-content: center !important;
}
.vpos-minimal-swal-popup .swal2-actions button.swal2-confirm,
.vpos-minimal-swal-popup .swal2-actions button.swal2-cancel {
margin: 0 !important;
padding: 0.4rem 1.25rem !important;
font-size: 11px !important;
font-weight: 700 !important;
border-radius: var(--radius-sm) !important;
box-shadow: none !important;
min-height: 32px !important;
}
/* Category Filter Dropdown in Visual POS */
.pos-category-select-wrapper {
min-width: 170px;
max-width: 220px;
display: flex;
align-items: center;
}
.pos-category-select-wrapper .select2-container--default .select2-selection--single {
height: 40px !important;
border-radius: var(--radius-sm, 6px) !important;
border: 1.5px solid #cbd5e1 !important;
background-color: #f8fafc !important;
font-weight: 600 !important;
color: #334155 !important;
transition: all 0.2s ease-in-out;
display: flex !important;
align-items: center !important;
}
.pos-category-select-wrapper .select2-container--default .select2-selection--single:focus-within {
border-color: #6366f1 !important;
box-shadow: 0 0 4px rgba(99, 102, 241, 0.2) !important;
background-color: #ffffff !important;
}
.pos-category-select-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #334155 !important;
font-size: 12px !important;
line-height: 38px !important;
padding-left: 10px !important;
}
.pos-category-select-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 38px !important;
}
/* POS Price Edit Input */
.pos-cart-price-edit-input {
width: 75px !important;
height: 28px !important;
font-size: 11px !important;
padding: 0.15rem 0.3rem !important;
border: 1px solid #cbd5e1 !important;
border-radius: 4px !important;
text-align: left;
background-color: #ffffff !important;
color: #334155 !important;
font-weight: 600 !important;
}
.pos-cart-price-edit-input:focus {
border-color: #6366f1 !important;
outline: none !important;
box-shadow: 0 0 3px rgba(99, 102, 241, 0.3) !important;
}
/* Enhanced Audit Trail Styles */
.erp-filter-form {
padding: 1.25rem 1.5rem;
background-color: #ffffff;
border-bottom: 1px solid var(--border-color);
}
.erp-filter-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 1.25rem;
}
.erp-filter-group {
flex: 1 1 200px;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.erp-filter-actions {
flex: 0 0 auto;
display: flex;
gap: 0.75rem;
}
.erp-text-link {
color: var(--primary);
text-decoration: none;
font-weight: 600;
transition: color 0.15s ease;
}
.erp-text-link:hover {
color: var(--primary-hover);
text-decoration: underline;
}
.erp-badge-success {
background-color: var(--success-light);
color: var(--success-hover);
border: 1px solid rgba(16, 185, 129, 0.2);
}
.erp-badge-warning {
background-color: var(--warning-light);
color: var(--warning-hover);
border: 1px solid rgba(245, 158, 11, 0.2);
}
.erp-badge-danger {
background-color: var(--danger-light);
color: var(--danger-hover);
border: 1px solid rgba(239, 68, 68, 0.2);
}
.erp-badge-secondary {
background-color: #f1f5f9;
color: var(--text-muted);
border: 1px solid var(--border-color);
}
.highlight-modified-cell {
background-color: #faf5ff;
font-weight: 600;
color: #5b21b6;
}
.table-erp tbody tr:hover td.highlight-modified-cell {
background-color: #f3e8ff;
}
.erp-audit-old {
color: var(--danger-hover);
background-color: #fff1f2;
padding: 0.15rem 0.35rem;
border-radius: 4px;
font-family: var(--font-mono, monospace);
font-size: 0.85em;
display: inline-block;
word-break: break-all;
}
.erp-audit-new {
color: var(--success-hover);
background-color: #f0fdf4;
padding: 0.15rem 0.35rem;
border-radius: 4px;
font-family: var(--font-mono, monospace);
font-size: 0.85em;
display: inline-block;
word-break: break-all;
}
/* Single-row Filter Layout for Audit Trail */
.audit-filter-row {
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
gap: 0.75rem;
width: 100%;
}
.audit-filter-row .erp-filter-group {
flex: 1 1 auto;
min-width: 130px;
}
.audit-filter-row .erp-filter-group:first-child {
flex: 2 1 auto;
min-width: 180px;
}
.audit-filter-row .erp-filter-actions {
flex: 0 0 auto;
display: flex;
gap: 0.5rem;
}
@media (max-width: 1200px) {
.audit-filter-row {
flex-wrap: wrap;
}
.audit-filter-row .erp-filter-group {
flex: 1 1 calc(33.33% - 0.75rem);
}
}
@media (max-width: 768px) {
.audit-filter-row .erp-filter-group {
flex: 1 1 100%;
}
}
/* Select2 alignments inside Audit Filter Row */
.audit-filter-row .select2-container {
width: 100% !important;
}
.audit-filter-row .select2-container--default .select2-selection--single {
background-color: #fafbfe;
border: 1px solid #e0e7ff;
border-radius: 6px;
height: 38px;
font-size: 0.8rem;
display: flex;
align-items: center;
}
.audit-filter-row .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 36px;
right: 8px;
}
.audit-filter-row .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #374151;
padding-left: 4px;
line-height: normal;
}
/* Diff visual row highlights & custom styling */
.diff-row-added {
background-color: #e8f5e9 !important;
border-left: 5px solid #2e7d32 !important;
}
.diff-row-deleted {
background-color: #ffebee !important;
border-left: 5px solid #c62828 !important;
}
.diff-row-modified {
background-color: #fffde7 !important;
border-left: 5px solid #f57f17 !important;
}
.diff-row-unchanged {
border-left: 5px solid #9e9e9e !important;
}
/* Diff badges */
.diff-badge-added {
background-color: #2e7d32;
color: #ffffff;
font-size: 0.7rem;
font-weight: 600;
padding: 0.15rem 0.4rem;
border-radius: 4px;
text-transform: uppercase;
}
.diff-badge-deleted {
background-color: #c62828;
color: #ffffff;
font-size: 0.7rem;
font-weight: 600;
padding: 0.15rem 0.4rem;
border-radius: 4px;
text-transform: uppercase;
}
.diff-badge-modified {
background-color: #f57f17;
color: #ffffff;
font-size: 0.7rem;
font-weight: 600;
padding: 0.15rem 0.4rem;
border-radius: 4px;
text-transform: uppercase;
}
.diff-badge-unchanged {
background-color: #757575;
color: #ffffff;
font-size: 0.7rem;
font-weight: 600;
padding: 0.15rem 0.4rem;
border-radius: 4px;
text-transform: uppercase;
}
/* Account Ledger and Transactions Color Styling */
.amount-credit-label {
color: #059669 !important;
font-weight: 700;
}
.amount-debit-label {
color: #e11d48 !important;
font-weight: 700;
}
.amount-balance-positive-label {
color: #047857 !important;
font-weight: 800;
}
.amount-balance-negative-label {
color: #be123c !important;
font-weight: 800;
}
/* Underline Clickable Navigation Links for Ledger */
.ledger-link {
color: #4f46e5 !important;
text-decoration: underline !important;
font-weight: 600;
transition: color 0.15s ease-in-out;
}
.ledger-link:hover {
color: #3730a3 !important;
text-decoration: underline !important;
}
/* Common Details View Grid System */
.erp-grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}
@media (max-width: 991px) {
.erp-grid-2 {
grid-template-columns: 1fr;
}
}
/* ERP Detail Lists for Metadata card groups */
.erp-detail-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.5rem 1rem;
}
.erp-detail-row {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f1f5f9;
padding-bottom: 0.5rem;
}
.erp-detail-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.erp-detail-label {
font-size: 0.8rem;
font-weight: 600;
color: #64748b;
}
.erp-detail-value {
font-size: 0.85rem;
font-weight: 700;
color: #1e293b;
text-align: right;
}
/* Custom 4-Column Layout and Service Header for Warranty Integration */
.movement-summary-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.movement-summary-header.service {
background: #e0f2fe;
color: #0369a1;
border-bottom: 1px solid #bae6fd;
}
@media (max-width: 1024px) {
.movement-summary-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.movement-summary-grid-4 {
grid-template-columns: 1fr;
}
}
/* ─────────────────────────────────────────────────────────────────────────
Inline-style replacement helpers
These replace scattered inline style="" attributes in blade templates
───────────────────────────────────────────────────────────────────────── */
/* Vertical detail row for multi-line content (e.g. Notes/Description field) */
.erp-detail-row-notes {
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
border-bottom: none;
padding-bottom: 0;
}
/* Full-width italic description/notes box inside a detail card */
.erp-notes-box {
width: 100%;
text-align: left;
font-style: italic;
line-height: 1.4;
padding: 0.5rem;
margin-top: 0.15rem;
font-size: 0.75rem;
color: #475569;
background: #f8fafc;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
/* Narrow date input for compact filter bars */
.form-control-date-sm {
width: 120px;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 0.75rem;
}
/* Amber download/document action button */
.btn-action-download {
background-color: #f59e0b;
}
.btn-action-download:hover {
background-color: #d97706;
}
/* ─────────────────────────────────────────────────────────────────────────
IMEI Tracking – Timeline Card Status Colors
Extended Warranty status cards and Warranty Claim status cards
───────────────────────────────────────────────────────────────────────── */
/* Extended Warranty: Approved */
.timeline-card-ext-approved {
background-color: #f0fdf4;
border-color: #bbf7d0;
}
.timeline-dot-ext-approved {
background-color: #16a34a;
}
.timeline-ring-ext-approved {
--tw-ring-color: #dcfce7;
}
.timeline-label-ext-approved {
color: #15803d;
}
/* Extended Warranty: Pending */
.timeline-card-ext-pending {
background-color: #fffbeb;
border-color: #fde68a;
}
.timeline-dot-ext-pending {
background-color: #d97706;
}
.timeline-label-ext-pending {
color: #b45309;
}
/* Extended Warranty: Rejected / Cancelled / Expired */
.timeline-card-ext-rejected {
background-color: #fef2f2;
border-color: #fecaca;
}
.timeline-dot-ext-rejected {
background-color: #dc2626;
}
.timeline-label-ext-rejected {
color: #dc2626;
}
/* Extended Warranty: Default (new / unknown) */
.timeline-card-ext-default {
background-color: #f5f3ff;
border-color: #ddd6fe;
}
.timeline-dot-ext-default {
background-color: #7c3aed;
}
.timeline-label-ext-default {
color: #6d28d9;
}
/* Warranty Claim: Pending */
.timeline-card-claim-pending {
background-color: #fffbeb;
border-color: #fde68a;
}
.timeline-dot-claim-pending {
background-color: #d97706;
}
.timeline-label-claim-pending {
color: #b45309;
}
/* Warranty Claim: Processing / In Progress */
.timeline-card-claim-processing {
background-color: #eff6ff;
border-color: #bfdbfe;
}
.timeline-dot-claim-processing {
background-color: #2563eb;
}
.timeline-label-claim-processing {
color: #1d4ed8;
}
/* Warranty Claim: Resolved / Closed (success) */
.timeline-card-claim-resolved {
background-color: #f0fdf4;
border-color: #bbf7d0;
}
.timeline-dot-claim-resolved {
background-color: #16a34a;
}
.timeline-label-claim-resolved {
color: #15803d;
}
/* Warranty Claim: Rejected */
.timeline-card-claim-rejected {
background-color: #fef2f2;
border-color: #fecaca;
}
.timeline-dot-claim-rejected {
background-color: #dc2626;
}
.timeline-label-claim-rejected {
color: #dc2626;
}
/* Warranty Claim: Default / Other */
.timeline-card-claim-default {
background-color: #fff7ed;
border-color: #fed7aa;
}
.timeline-dot-claim-default {
background-color: #ea580c;
}
.timeline-label-claim-default {
color: #c2410c;
}
/* Compact Product Settings UI */
.compact-settings-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.6rem;
}
.compact-settings-item {
display: flex;
align-items: flex-start;
padding: 0.45rem 0.6rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
background-color: var(--bg-card);
transition: all 0.2s ease;
cursor: pointer;
margin-bottom: 0;
}
.compact-settings-item:hover {
background-color: #f1f5f9;
border-color: var(--primary-light);
}
.compact-settings-checkbox {
width: 0.85rem;
height: 0.85rem;
color: var(--primary);
border-radius: 3px;
border-color: var(--border-color);
cursor: pointer;
margin-top: 0.1rem;
flex-shrink: 0;
}
.compact-settings-label {
margin-left: 0.45rem;
font-size: 0.72rem;
font-weight: 600;
color: var(--text-main);
user-select: none;
line-height: 1.25;
}
.compact-settings-badge {
font-size: 0.58rem;
padding: 0.05rem 0.2rem;
border-radius: 3px;
background-color: var(--primary-light);
color: var(--primary);
margin-left: 0.2rem;
display: inline-block;
vertical-align: middle;
}
.compact-settings-desc {
display: block;
font-size: 0.62rem;
color: var(--text-muted);
font-weight: normal;
margin-top: 0.08rem;
}
/* Invoice Settings Custom Tab Styles */
.tab-btn {
padding: 0.75rem 1.25rem;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 700;
color: #64748b;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
}
.tab-btn:hover {
color: #4f46e5;
background: rgba(79, 70, 229, 0.05);
transform: translateY(-1px);
}
.tab-btn.active {
background: #ffffff;
color: #4f46e5;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.tab-content.hidden {
display: none;
}
/* Enhanced Invoice Settings Tab Gradients */
/* --- INVOICE SETTINGS TABS (SPECIFIC ONLY TO invoice-settings-tabs CLASS) --- */
.invoice-settings-tabs .tab-btn {
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
border: none !important;
color: #64748b !important;
background: transparent !important;
}
.invoice-settings-tabs .tab-btn i {
color: #94a3b8 !important;
}
.invoice-settings-tabs .tab-btn:hover {
color: #4f46e5 !important;
background: rgba(79, 70, 229, 0.1) !important;
transform: translateY(-1px) !important;
}
.invoice-settings-tabs .tab-btn:hover i {
color: #4f46e5 !important;
}
.invoice-settings-tabs .tab-btn.active {
color: #ffffff !important;
}
.invoice-settings-tabs .tab-btn.active i {
color: #ffffff !important;
}
.invoice-settings-tabs .tab-btn[data-tab="print_fields"].active {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4) !important;
}
.invoice-settings-tabs .tab-btn[data-tab="pos"].active {
background: linear-gradient(135deg, #ec4899 0%, #be185d 100%) !important;
box-shadow: 0 4px 14px rgba(236, 72, 153, 0.4) !important;
}
.invoice-settings-tabs .tab-btn[data-tab="terms"].active {
background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4) !important;
}
/* Print Invoice Footer Styles */
.print-invoice-footer {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--border-color);
text-align: center;
width: 100%;
}
.print-terms-conditions {
font-size: 0.65rem;
color: var(--text-muted);
margin-bottom: 0.25rem;
line-height: 1.4;
white-space: pre-wrap;
}
.print-thank-you-message {
font-size: 0.75rem;
font-weight: 700;
color: var(--text-main);
text-transform: uppercase;
letter-spacing: 0.05em;
}
@media print {
.print-invoice-footer {
border-top: 1px dashed #000 !important;
margin-top: 5mm !important;
padding-top: 3mm !important;
}
.print-terms-conditions {
color: #000000 !important;
font-size: 8pt !important;
}
.print-thank-you-message {
color: #000000 !important;
font-size: 9pt !important;
}
}
/* ERP Custom Reporting Module Styles */
.reports-dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 0.75rem;
padding: 1rem 0;
}
.report-category-group {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 1rem;
box-shadow: var(--shadow-sm);
}
.report-category-title {
font-size: 0.82rem;
font-weight: 800;
color: #4f46e5;
margin-bottom: 0.75rem;
border-bottom: 2px solid #f1f5f9;
padding-bottom: 0.35rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.report-item-link {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.5rem;
border-radius: 6px;
color: #334155;
text-decoration: none;
transition: all 0.2s ease;
border: 1px solid transparent;
}
.report-item-link:hover {
background: #f8fafc;
color: #4f46e5;
border-color: #e2e8f0;
transform: translateX(4px);
}
.report-item-icon {
width: 26px;
height: 26px;
border-radius: 6px;
background: #e0e7ff;
color: #4f46e5;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
}
.report-item-text {
display: flex;
flex-direction: column;
}
.report-item-name {
font-size: 0.73rem;
font-weight: 700;
}
.report-item-desc {
display: none;
}
.report-pin-btn {
margin-left: auto;
color: #94a3b8;
background: transparent;
border: none;
cursor: pointer;
padding: 0.2rem;
font-size: 0.7rem;
transition: all 0.2s ease;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.report-pin-btn:hover {
color: #4f46e5;
background: #e0e7ff;
transform: scale(1.1);
}
.report-pin-btn.pinned {
color: #ef4444;
}
.report-pin-btn.pinned:hover {
background: #fee2e2;
color: #dc2626;
}
.report-pin-btn i {
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.report-pin-btn:hover i {
transform: rotate(-45deg);
}
/* Financial Analytics KPI Deck */
.kpi-deck {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.5rem;
}
.kpi-card {
flex: 1;
min-width: 180px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 1rem;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.kpi-title {
font-size: 0.7rem;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.kpi-value {
font-size: 1.25rem;
font-weight: 800;
color: #0f172a;
}
.kpi-status-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.75rem;
border-radius: 9999px;
font-size: 0.72rem;
font-weight: 700;
}
.kpi-status-success {
background: #d1fae5;
color: #065f46;
border: 1px solid #a7f3d0;
}
.kpi-status-warning {
background: #fef3c7;
color: #92400e;
border: 1px solid #fde68a;
}
/* Report Detail Styling */
.report-filter-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 0.35rem 1rem;
margin-bottom: 0.5rem;
box-shadow: var(--shadow-sm);
}
.report-results-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 0.5rem 1rem;
box-shadow: var(--shadow-md);
}
.report-table-container {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}
.report-data-table {
width: 100%;
border-collapse: collapse;
margin-top: 0;
}
.report-data-table th {
background: #f1f5f9;
border-bottom: 1px solid #cbd5e1;
color: #0f172a;
font-weight: 400;
font-size: 0.68rem;
text-transform: none;
padding: 6px 6px;
text-align: left;
}
.report-data-table td {
padding: 3px 3px;
border-bottom: 1px solid #e2e8f0;
font-size: 0.7rem;
color: #334155;
vertical-align: middle;
}
.report-data-table tbody tr {
transition: background-color 0.15s ease-in-out;
}
.report-data-table tbody tr:hover td {
background-color: #f1f5f9 !important;
}
.report-data-table tfoot tr {
background: #f1f5f9;
font-weight: 800;
border-top: 2px solid #cbd5e1;
}
.report-data-table tfoot td {
padding: 8px 8px;
font-size: 0.74rem;
color: #0f172a;
}
.report-action-buttons {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
/* Financial Statements Formatting */
.financial-statement-box {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 1.25rem 1.5rem;
max-width: 800px;
margin: 0 auto;
box-shadow: var(--shadow-lg);
}
.financial-statement-header {
text-align: center;
margin-bottom: 2rem;
border-bottom: 2px solid #e2e8f0;
padding-bottom: 1rem;
}
.financial-statement-company {
font-size: 1.25rem;
font-weight: 800;
color: #0f172a;
}
.financial-statement-title {
font-size: 1rem;
font-weight: 700;
color: #4f46e5;
margin-top: 0.25rem;
}
.financial-statement-date {
font-size: 0.75rem;
color: #64748b;
margin-top: 0.25rem;
}
.financial-table {
width: 100%;
border-collapse: collapse;
}
.financial-row-header {
font-size: 0.78rem;
font-weight: 800;
color: #0f172a;
background: #f8fafc;
padding: 5px 8px;
border-top: 1px solid #cbd5e1;
border-bottom: 1px solid #cbd5e1;
}
.financial-row-header th,
.financial-row-header td {
padding: 6px 8px;
text-align: left;
}
/* English: SL# column narrow sizing — scoped to Trial Balance table only; must NOT affect Balance Sheet */
/* Bangla: SL# কলামের সংকীর্ণ প্রস্থ — শুধুমাত্র ট্রায়াল ব্যালেন্স টেবিলের জন্য; ব্যালেন্স শিটে প্রভাব ফেলবে না */
.trial-balance-table th:first-child,
.trial-balance-table td:first-child {
width: 50px !important;
text-align: center !important;
padding-left: 2px !important;
padding-right: 2px !important;
}
.financial-row-item {
font-size: 0.74rem;
color: #334155;
}
.financial-row-item td {
padding: 5px 8px;
border-bottom: 1px solid #f1f5f9;
}
.financial-row-item.indented td:first-child,
.indented-cell {
padding-left: 24px !important;
}
.financial-row-total {
font-size: 0.78rem;
font-weight: 800;
color: #0f172a;
border-top: 1px solid #cbd5e1;
border-bottom: 2px double #0f172a;
}
.financial-row-total td {
padding: 6px 8px;
}
/* English: Subtotal row — used for section sub-totals (e.g. Total Current Assets) in Balance Sheet */
/* Bangla: সাব-টোটাল সারি — ব্যালেন্স শিটে বিভাগীয় মোট (যেমন: মোট চলতি সম্পদ) প্রদর্শনে ব্যবহৃত */
.financial-row-subtotal {
font-size: 0.76rem;
font-weight: 700;
color: #1e3a5f;
background-color: #f0f4ff;
border-top: 1px solid #bfdbfe;
border-bottom: 1px solid #93c5fd;
}
.financial-row-subtotal td {
padding: 6px 8px;
}
.text-right {
text-align: right !important;
}
.text-success {
color: #10b981 !important;
}
.text-danger {
color: #ef4444 !important;
}
@media print {
.no-print {
display: none !important;
}
.financial-statement-box {
border: none !important;
box-shadow: none !important;
padding: 0 !important;
max-width: 100% !important;
}
body {
background: #ffffff !important;
}
}
/* Custom size helper utilities for report templates */
.w-150 {
width: 150px !important;
}
.w-200 {
width: 200px !important;
}
.h-10 {
height: 10px !important;
}
.h-15 {
height: 15px !important;
}
.h-20 {
height: 20px !important;
}
/* Custom report helper classes */
.btn-report-back {
padding: 0.5rem 1rem !important;
height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.5rem !important;
white-space: nowrap !important;
}
.w-min-200 {
min-width: 200px !important;
}
.w-160 {
width: 160px !important;
}
.w-90 {
width: 90px !important;
}
.w-sl-col {
width: 40px !important;
max-width: 40px !important;
}
.w-method-col {
width: 120px !important;
max-width: 100px !important;
}
.w-ref-col {
width: 150px !important;
min-width: 130px !important;
}
.w-investor-col {
width: 160px !important;
min-width: 170px !important;
}
.w-date-col {
width: 140px !important;
min-width: 110px !important;
}
.w-account-col {
width: 140px !important;
min-width: 130px !important;
}
/* Compact styling for report filter section */
.report-container {
padding-top: 0.25rem !important;
padding-bottom: 0.25rem !important;
}
.report-filter-card .form-label-erp {
font-size: 0.7rem !important;
font-weight: 700;
margin-bottom: 0.2rem;
}
.report-filter-card .form-control-erp {
font-size: 0.72rem !important;
padding: 0.3rem 0.5rem !important;
height: 30px !important;
}
.report-filter-card .btn-erp {
font-size: 0.72rem !important;
padding: 0.3rem 0.6rem !important;
height: 30px !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
}
.report-filter-card .btn-report-back {
height: 30px !important;
padding: 0.3rem 0.6rem !important;
font-size: 0.72rem !important;
}
.report-results-header {
border-bottom: 1px solid #cbd5e1;
padding-bottom: 0.25rem;
margin-bottom: 0.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.report-title-container {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.report-title-text {
font-size: 0.85rem !important;
font-weight: 900;
color: #1e293b;
text-transform: uppercase;
letter-spacing: -0.025em;
margin: 0 !important;
}
.report-date-range-text {
font-size: 0.7rem;
color: #64748b;
border-left: 1px solid #cbd5e1;
padding-left: 0.5rem;
}
.report-ledger-meta {
font-size: 0.7rem;
color: #4f46e5;
border-left: 1px solid #cbd5e1;
padding-left: 0.5rem;
}
.report-gen-time {
font-size: 0.68rem;
color: #94a3b8;
text-align: right;
}
/* Compact Select2 styling inside report filters */
.report-filter-card .select2-container {
width: 100% !important;
min-width: 200px !important;
}
.report-filter-card .select2-container--default .select2-selection--single {
background-color: #fff !important;
border: 1px solid #d1d5db !important;
border-radius: 0.375rem !important;
height: 30px !important;
font-size: 0.72rem !important;
display: flex !important;
align-items: center !important;
}
.report-filter-card .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 28px !important;
right: 6px !important;
}
.report-filter-card .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #374151 !important;
padding-left: 0.5rem !important;
padding-right: 1.5rem !important;
line-height: normal !important;
}
/* Print button color overrides to match Filter button (btn-erp-primary) system-wide */
.btn-erp-secondary:has(.fa-print),
.btn-erp-success:has(.fa-print),
.btn-erp-danger:has(.fa-print),
button:has(.fa-print),
a.btn-erp:has(.fa-print),
a.btn:has(.fa-print),
.btn-secondary:has(.fa-print),
.btn-success:has(.fa-print),
.btn-danger:has(.fa-print) {
background-color: var(--primary) !important;
border-color: var(--primary) !important;
color: #ffffff !important;
}
.btn-erp-secondary:has(.fa-print):hover,
.btn-erp-success:has(.fa-print):hover,
.btn-erp-danger:has(.fa-print):hover,
button:has(.fa-print):hover,
a.btn-erp:has(.fa-print):hover,
a.btn:has(.fa-print):hover,
.btn-secondary:has(.fa-print):hover,
.btn-success:has(.fa-print):hover,
.btn-danger:has(.fa-print):hover {
background-color: var(--primary-hover) !important;
border-color: var(--primary-hover) !important;
color: #ffffff !important;
}
/* Orange helper buttons */
.btn-erp-orange {
background-color: #f97316 !important;
border-color: #f97316 !important;
color: #ffffff !important;
}
.btn-erp-orange:hover {
background-color: #ea580c !important;
border-color: #ea580c !important;
color: #ffffff !important;
}
/*
English: Dark Charcoal helper button class for prominent back/secondary actions (#1e293b).
Bangla: ব্যাক/সেকেন্ডারি একশনের জন্য ডার্ক চারকোল হেলপার বাটন ক্লাস (#1e293b)।
*/
.btn-erp-Sky-600{
background-color: #0284c7 !important;
border-color: #06b6d4 !important;
color: #ffffff !important;
}
.btn-erp-Sky-600:hover {
background-color: #0369a1 !important;
border-color: #059669 !important;
color: #ffffff !important;
}
/* Report header actions inline styling */
.report-header-actions {
display: flex !important;
align-items: center !important;
gap: 0.75rem !important;
}
.report-toolbar {
display: flex !important;
align-items: center !important;
gap: 0.35rem !important;
}
/* ============================================================
Sales Group Report Tab Navigation — Enhanced Design
============================================================ */
.report-tab-nav {
display: flex;
align-items: stretch;
gap: 0.25rem;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 1px solid #e2e8f0;
border-radius: 12px 12px 0 0;
border-bottom: 2px solid #e2e8f0;
padding: 0.45rem 0.6rem 0;
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
margin-bottom: 0;
}
.report-tab-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 1.2rem 0.6rem;
font-size: 0.73rem;
font-weight: 700;
color: #64748b;
text-decoration: none;
border: 1px solid transparent;
border-bottom: 3px solid transparent;
border-radius: 8px 8px 0 0;
transition: all 0.2s ease;
letter-spacing: 0.01em;
white-space: nowrap;
background: transparent;
position: relative;
bottom: -2px;
}
.report-tab-link i {
font-size: 0.7rem;
opacity: 0.75;
transition: opacity 0.2s;
}
.report-tab-link:hover {
color: #1e293b;
background: rgba(255, 255, 255, 0.9);
border-color: #e2e8f0 #e2e8f0 transparent;
text-decoration: none;
}
.report-tab-link:hover i {
opacity: 1;
}
/* Active tab — vibrant green */
.report-tab-link.active {
color: #059669;
background: #ffffff;
border-color: #a7f3d0 #a7f3d0 #ffffff;
border-bottom-color: #ffffff;
box-shadow: 0 -2px 8px rgba(5, 150, 105, 0.08), 2px 0 6px rgba(0, 0, 0, 0.04);
}
.report-tab-link.active i {
opacity: 1;
color: #10b981;
}
/* Active indicator stripe at top of active tab */
.report-tab-link.active::before {
content: '';
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #10b981, #059669);
border-radius: 4px 4px 0 0;
}
/* When tab nav is present, attach filter card flush below */
.report-tab-nav+.report-filter-card {
border-radius: 0 12px 12px 12px;
border-top: none;
margin-top: 0;
}
/* Sub-label in dashboard report item (e.g. "Includes Return & Exchange tabs") */
.report-item-sub {
display: block;
font-size: 0.6rem;
color: #94a3b8;
font-weight: 500;
margin-top: 1px;
}
/* Description viewer styling in customer payment reports */
.btn-desc-view {
background: none;
border: none;
padding: 0;
cursor: pointer;
color: var(--primary);
display: inline-flex;
align-items: center;
font-size: 0.75rem;
font-weight: 600;
}
.btn-desc-view:hover {
color: var(--primary-hover);
text-decoration: underline;
}
.desc-content {
display: none;
font-size: 0.7rem;
margin-top: 4px;
color: var(--text-muted);
word-break: break-all;
white-space: normal;
text-align: left;
max-width: 200px;
}
/* Customer Details / Product Tabs Container Specific Styling */
/* English: Style the customer details tab nav and buttons to make active tab green, with smaller text and icons spaced properly */
/* Bangla: কাস্টমার ডিটেলস ট্যাবের ডিজাইন হাইলাইট করা, সিলেক্টেড ট্যাব সবুজ করা, সাইজ ছোট করা এবং আইকন স্পেসিং ঠিক করা */
.product-tabs-container .tab-btn {
padding: 0.5rem 0.85rem !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
color: #64748b !important;
background: #f1f5f9 !important;
border: 1px solid #cbd5e1 !important;
border-radius: 6px !important;
cursor: pointer !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.4rem !important;
white-space: nowrap !important;
}
.product-tabs-container .tab-btn i {
font-size: 0.78rem !important;
color: #94a3b8 !important;
display: inline-block !important;
transition: color 0.2s !important;
}
.product-tabs-container .tab-btn:hover {
color: #059669 !important;
background-color: #f0fdf4 !important;
border-color: #a7f3d0 !important;
}
.product-tabs-container .tab-btn:hover i {
color: #10b981 !important;
}
.product-tabs-container .tab-btn.active {
color: #ffffff !important;
background-color: #10b981 !important;
border-color: #10b981 !important;
box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25) !important;
}
.product-tabs-container .tab-btn.active i {
color: #ffffff !important;
}
/* English: Badge styling for product variation name displayed below the product name */
/* Bangla: প্রোডাক্ট নামের নিচে ভ্যারিয়েশন নাম প্রদর্শনের জন্য ব্যাজ স্টাইলিং */
.badge-erp-variation {
display: inline-block;
font-size: 0.50rem;
font-weight: 400;
color: #4f46e5;
background-color: #f5f3ff;
border: 0.5px solid #ddd6fe;
padding: 0.1rem 0.35rem;
border-radius: 4px;
margin-top: 0.2rem;
line-height: 1.2;
}
/* English: Category theme specific selectors to override default title text & border colors
Bangla: ডিফল্ট টাইটেল টেক্সট ও বর্ডার কালার ওভাররাইড করতে ক্যাটাগরি থিম নির্দিষ্ট সিলেক্টরসমূহ */
.report-category-group.theme-indigo .report-category-title {
color: #4f46e5 !important;
border-bottom-color: #e0e7ff !important;
}
.report-category-group.theme-emerald .report-category-title {
color: #059669 !important;
border-bottom-color: #d1fae5 !important;
}
.report-category-group.theme-rose .report-category-title {
color: #e11d48 !important;
border-bottom-color: #ffe4e6 !important;
}
.report-category-group.theme-amber .report-category-title {
color: #d97706 !important;
border-bottom-color: #fef3c7 !important;
}
/* ================================================================ */
/* English: Asset Summary Cards — Fixed Assets list page top section */
/* Bangla: অ্যাসেট সারসংক্ষেপ কার্ড — ফিক্সড অ্যাসেট লিস্ট পেইজের শীর্ষ অংশ */
/* ================================================================ */
.asset-summary-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-bottom: 1.25rem;
}
@media (max-width: 1200px) {
.asset-summary-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.asset-summary-cards {
grid-template-columns: 1fr;
}
}
/* English: Base summary card style */
/* Bangla: সারসংক্ষেপ কার্ডের বেস স্টাইল */
.asset-summary-cards .summary-card {
display: flex;
align-items: flex-start;
gap: 0.85rem;
border-radius: 0.75rem;
padding: 1rem 1.1rem;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
border: 1px solid transparent;
transition: box-shadow 0.2s ease, transform 0.15s ease;
background: #fff;
}
.asset-summary-cards .summary-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
transform: translateY(-2px);
}
/* English: Icon box */
/* Bangla: আইকন বক্স */
.asset-summary-cards .summary-card-icon {
width: 44px;
height: 44px;
border-radius: 0.6rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}
/* English: Card body text styles */
/* Bangla: কার্ড বডির টেক্সট স্টাইল */
.asset-summary-cards .summary-card-value {
font-size: 1.2rem;
font-weight: 900;
line-height: 1.2;
color: #1e293b;
}
.asset-summary-cards .summary-card-label {
font-size: 0.63rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
margin-top: 0.15rem;
}
.asset-summary-cards .summary-card-sub {
margin-top: 0.5rem;
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.asset-summary-cards .summary-badge {
display: inline-flex;
align-items: center;
padding: 0.15rem 0.5rem;
border-radius: 9999px;
font-size: 0.6rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.asset-summary-cards .summary-badge.badge-active {
background: #dcfce7;
color: #15803d;
}
.asset-summary-cards .summary-badge.badge-warning {
background: #fef9c3;
color: #a16207;
}
.asset-summary-cards .summary-badge.badge-danger {
background: #fee2e2;
color: #b91c1c;
}
.asset-summary-cards .summary-badge.badge-success {
background: #dcfce7;
color: #15803d;
}
.asset-summary-cards .summary-badge.badge-secondary {
background: #f1f5f9;
color: #475569;
}
/* English: Indigo color variant */
/* Bangla: ইন্ডিগো রঙের ভেরিয়েন্ট */
.asset-summary-cards .summary-card-indigo {
border-color: #e0e7ff;
background: linear-gradient(135deg, #f5f3ff 0%, #eef2ff 100%);
}
.asset-summary-cards .summary-card-indigo .summary-card-icon {
background: #6366f1;
color: #fff;
}
.asset-summary-cards .summary-card-indigo .summary-card-value {
color: #4338ca;
}
/* English: Blue color variant */
/* Bangla: নীল রঙের ভেরিয়েন্ট */
.asset-summary-cards .summary-card-blue {
border-color: #dbeafe;
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}
.asset-summary-cards .summary-card-blue .summary-card-icon {
background: #3b82f6;
color: #fff;
}
.asset-summary-cards .summary-card-blue .summary-card-value {
color: #1d4ed8;
}
/* English: Amber color variant */
/* Bangla: অ্যাম্বার রঙের ভেরিয়েন্ট */
.asset-summary-cards .summary-card-amber {
border-color: #fde68a;
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}
.asset-summary-cards .summary-card-amber .summary-card-icon {
background: #f59e0b;
color: #fff;
}
.asset-summary-cards .summary-card-amber .summary-card-value {
color: #b45309;
}
/* English: Rose color variant — used for disposal stats */
/* Bangla: রোজ রঙের ভেরিয়েন্ট — ডিসপোজাল পরিসংখ্যানের জন্য */
.asset-summary-cards .summary-card-rose {
border-color: #fecdd3;
background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
}
.asset-summary-cards .summary-card-rose .summary-card-icon {
background: #f43f5e;
color: #fff;
}
.asset-summary-cards .summary-card-rose .summary-card-value {
color: #be123c;
}
/* English: Green color variant — used for gain/profit stats in disposal cards */
/* Bangla: সবুজ রঙের ভেরিয়েন্ট — ডিসপোজালে মুনাফার কার্ডের জন্য */
.asset-summary-cards .summary-card-green {
border-color: #bbf7d0;
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}
.asset-summary-cards .summary-card-green .summary-card-icon {
background: #22c55e;
color: #fff;
}
.asset-summary-cards .summary-card-green .summary-card-value {
color: #15803d;
}
/* =============================================================================
English: Utility CSS classes to replace inline styles across blade templates.
These utility classes are used in admin views to avoid inline style= attributes.
Bangla: ইনলাইন স্টাইল প্রতিস্থাপনের জন্য ইউটিলিটি CSS ক্লাস।
এই ক্লাসগুলো অ্যাডমিন ভিউতে style= অ্যাট্রিবিউট এড়াতে ব্যবহৃত হয়।
============================================================================= */
/* English: Fixed width utility classes for filter/select inputs */
/* Bangla: ফিল্টার/সিলেক্ট ইনপুটের জন্য ফিক্সড-প্রস্থ ইউটিলিটি ক্লাস */
.w-100px {
width: 100px;
}
.w-130px {
width: 130px;
}
.w-140px {
width: 140px;
}
.w-180px {
width: 180px;
}
.w-250px {
width: 250px;
}
/* English: Max-width utility classes for thumbnail images and search wrappers */
/* Bangla: থাম্বনেইল ছবি ও সার্চ র্যাপারের জন্য সর্বোচ্চ-প্রস্থ ইউটিলিটি ক্লাস */
.mw-40px {
max-width: 40px;
height: auto;
}
.mw-95px {
max-width: 95px;
height: auto;
}
.mw-120px {
max-width: 120px;
}
.mw-130px {
max-width: 130px;
}
.mw-150-200 {
min-width: 150px;
max-width: 200px;
}
.mw-200px {
max-width: 200px;
}
.mw-250px {
max-width: 250px;
}
.mw-300px {
max-width: 300px;
}
/* English: Search field with 250px max-width variant */
/* Bangla: ২৫০px সর্বোচ্চ-প্রস্থের সার্চ ফিল্ড ভেরিয়েন্ট */
.search-field-sm {
max-width: 250px;
}
/* English: Hidden element utility (used for JS-toggled elements) */
/* Bangla: জাভাস্ক্রিপ্ট দ্বারা টগল করা উপাদানের জন্য লুকানো ইউটিলিটি */
.hidden {
display: none;
}
/* English: Thumbnail image constraints for table/list displays */
/* Bangla: টেবিল/তালিকায় থাম্বনেইল ছবির সীমাবদ্ধতা */
.thumb-sm {
max-width: 40px;
max-height: 40px;
object-fit: cover;
}
.thumb-med {
max-width: 95px;
height: auto;
}
/* English: Font size utility for small labels and hints */
/* Bangla: ছোট লেবেল ও হিন্টের ফন্ট সাইজ ইউটিলিটি */
.fs-11 {
font-size: 11px;
}
.fs-12 {
font-size: 12px;
}
/* English: Code snippet display style (used in audit logs) */
/* Bangla: কোড স্নিপেট প্রদর্শনের স্টাইল (অডিট লগে ব্যবহৃত) */
.code-snippet {
font-size: 0.75rem;
color: #4b5563;
word-break: break-all;
background: #f3f4f6;
padding: 0.5rem;
border-radius: 4px;
width: 100%;
}
/* English: Resize-none for textareas that should not be resizable */
/* Bangla: যে টেক্সটএরিয়া রিসাইজ করা উচিত নয় তার জন্য */
.no-resize {
resize: none;
}
/* English: Flex grow utility for flexible form elements */
/* Bangla: নমনীয় ফর্ম উপাদানের জন্য flex-grow ইউটিলিটি */
.flex-1-5 {
flex: 1.5;
}
/* English: Padding right utility */
/* Bangla: ডানদিকে প্যাডিং ইউটিলিটি */
.pr-1 {
padding-right: 0.25rem;
}
/* English: Table column width utilities for consistent IMEI/audit table column sizing */
/* Bangla: IMEI/অডিট টেবিল কলাম সাইজিংয়ের জন্য কলাম প্রস্থ ইউটিলিটি */
.col-4pct {
width: 4%;
}
.col-5pct {
width: 5%;
}
.col-10pct {
width: 10%;
}
.col-12pct {
width: 12%;
}
.col-13pct {
width: 13%;
}
.col-30pct {
width: 30%;
}
/* English: Width variants for specific column sizes */
/* Bangla: নির্দিষ্ট কলাম আকারের জন্য প্রস্থ ভেরিয়েন্ট */
.w-60px {
width: 60px;
}
.w-100px {
width: 100px;
}
/* English: Inline-flex helper for buttons needing center alignment */
/* Bangla: কেন্দ্রীভূত বাটনের জন্য inline-flex হেল্পার */
.btn-inline-flex {
display: inline-flex;
align-items: center;
}
/* English: Primary colored span text utility */
/* Bangla: প্রাইমারি রঙের span টেক্সট ইউটিলিটি */
.text-primary-bold {
color: var(--primary);
font-weight: 600;
}
/* English: Detail row column layout for audit log show page */
/* Bangla: অডিট লগ শো পেইজের ডিটেইল রো কলাম লেআউট */
.detail-row-col {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
/* English: Dropdown min-width for HR actions menu */
/* Bangla: HR অ্যাকশন মেনুর ন্যূনতম প্রস্থ */
.dropdown-menu-lg {
min-width: 240px;
}
/* English: Income/Expense date filter wrapper sizing */
/* Bangla: আয়/ব্যয় তারিখ ফিল্টার র্যাপারের আকার */
.filter-date-wrapper {
min-width: 150px;
max-width: 200px;
}
/* English: Max-width for date inputs in filter bars */
/* Bangla: ফিল্টার বারে তারিখ ইনপুটের সর্বোচ্চ প্রস্থ */
.mw-130px {
max-width: 130px;
}
.mw-180px {
max-width: 180px;
}
/* English: Export button color variants for Excel (green) and PDF (red) download links */
/* Bangla: এক্সেল (সবুজ) ও PDF (লাল) ডাউনলোড লিংকের জন্য এক্সপোর্ট বাটন রঙ ভেরিয়েন্ট */
.btn-export-excel {
background: #16a34a;
color: #fff;
}
.btn-export-excel:hover {
background: #15803d;
color: #fff;
}
.btn-export-pdf {
background: #dc2626;
color: #fff;
}
.btn-export-pdf:hover {
background: #b91c1c;
color: #fff;
}
/* English: Compact file input padding for file upload controls */
/* Bangla: ফাইল আপলোড কন্ট্রোলের জন্য সংক্ষিপ্ত প্যাডিং */
.file-input-compact {
padding: 3px;
}
/* English: Download button as green with white text for secondary export actions */
/* Bangla: গৌণ এক্সপোর্টের জন্য সবুজ ডাউনলোড বাটন */
.btn-download-green {
background: #16a34a;
color: #fff;
}
/* Web Net Profit & Loss Results Row */
tr.web-net-profit-row {
background-color: #f0fdf4 !important;
border: 2px solid #10b981 !important;
}
tr.web-net-profit-row td {
color: #15803d !important;
font-weight: 800 !important;
padding: 12px !important;
font-size: 1.05rem !important;
}
tr.web-net-loss-row {
background-color: #fdf2f2 !important;
border: 2px solid #ef4444 !important;
}
tr.web-net-loss-row td {
color: #b91c1c !important;
font-weight: 800 !important;
padding: 12px !important;
font-size: 1.05rem !important;
}
/* Print Optimization for Profit & Loss page to fit on a single A4 page and disable browser print header/footer */
@media print {
@page {
margin: 0 !important;
/* Disables default browser print header and footer (site title, URL, date, page number) */
}
body {
padding: 1.0cm !important;
/* Leaves margin on paper edge */
background-color: #fff !important;
font-size: 12.5pt !important;
}
/* Hide all elements that are not part of the statement */
.erp-sidebar,
.erp-header,
.report-filter-card,
.kpi-deck:not(.trial-balance-kpi-deck),
.btn-erp,
.no-print {
display: none !important;
}
/* English: Trial Balance KPI Deck side-by-side print layout */
/* Bangla: প্রিন্ট মোডে ট্রায়াল ব্যালেন্সের ৩টি KPI কার্ড এক লাইনে পাশাপাশি প্রদর্শনের স্টাইল */
.trial-balance-kpi-deck {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
gap: 8px !important;
margin-top: 8px !important;
margin-bottom: 12px !important;
page-break-inside: avoid !important;
}
.trial-balance-kpi-deck .kpi-card {
flex: 1 1 0% !important;
border: 1px solid #cbd5e1 !important;
background-color: #f8fafc !important;
padding: 6px 8px !important;
text-align: center !important;
box-shadow: none !important;
}
.erp-main {
margin: 0 !important;
padding: 0 !important;
}
.financial-statement-box {
border: none !important;
box-shadow: none !important;
padding: 0 !important;
max-width: 100% !important;
margin: 0 !important;
}
.financial-table th,
.financial-table td {
padding: 2px 3px !important;
/* Make cells extremely compact to fit in a single A4 page */
font-size: 8.5pt !important;
}
.financial-statement-header {
margin-bottom: 8px !important;
}
.h-15,
.h-10,
.h-20 {
height: 6px !important;
}
}
tr.financial-row-item.indented-double td:first-child {
padding-left: 2.5rem !important;
color: #64748b !important;
font-style: italic !important;
}
/*
* English: Swap layout columns for Restaurant POS only (Cart Pane on Left, Products Pane on Right) for desktop screens
* Bangla: শুধুমাত্র রেস্টুরেন্ট পসের জন্য ডেস্কটপে লেআউট কলাম সোয়াপ করা (বাম পাশে কার্ট সেকশন, ডান পাশে প্রোডাক্ট ক্যাটালগ)
* Note: Using CSS order property to visually swap columns without changing DOM order
*/
@media (min-width: 1025px) {
/* English: Restaurant POS: Cart narrower on Left, Products wider on Right */
/* Bangla: রেস্টুরেন্ট পস: বাম পাশে কার্ট (সরু), ডান পাশে প্রোডাক্ট (চওড়া) */
.pos-wrapper-smart,
.pos-wrapper-restaurant {
grid-template-columns: 1fr 1.4fr !important;
}
/* English: Move Cart pane visually to the left (order: 1 = first column) and force full-height */
/* Bangla: কার্ট সেকশনকে বাম পাশে স্থানান্তর করা হচ্ছে এবং ফুল-হাইট নিশ্চিত করা হচ্ছে */
.pos-wrapper-smart .pos-cart-pane,
.pos-wrapper-restaurant .pos-cart-pane {
order: 1 !important;
height: calc(100vh - 210px) !important;
min-height: 480px !important;
}
/* English: Move Products pane visually to the right (order: 2 = second column) and force full-height */
/* Bangla: প্রোডাক্ট সেকশনকে ডান পাশে স্থানান্তর করা হচ্ছে এবং ফুল-হাইট নিশ্চিত করা হচ্ছে */
.pos-wrapper-smart .pos-products-pane,
.pos-wrapper-restaurant .pos-products-pane {
order: 2 !important;
height: calc(100vh - 210px) !important;
overflow: hidden !important;
}
/* English: Ensure cart items scroll container fills the available height on desktop */
/* Bangla: কার্ট আইটেম স্ক্রল কন্টেইনার যেন পর্যাপ্ত উচ্চতা পায় তা নিশ্চিত করা */
.pos-wrapper-smart .pos-cart-items-wrapper,
.pos-wrapper-restaurant .pos-cart-items-wrapper {
flex-grow: 1 !important;
height: calc(100vh - 330px) !important;
min-height: 350px !important;
overflow-y: auto !important;
}
}
/*
* English: Vertical categories sidebar and product grid layout inside the products pane for Smart POS
* Bangla: স্মার্ট পসের প্রোডাক্ট প্যানের ভেতরের গ্রিড এবং ভার্টিকাল ক্যাটাগরি সাইডবারের লেআউট
*/
.pos-products-layout-container {
display: flex;
gap: 0.65rem;
height: 100%;
width: 100%;
min-height: 0;
}
.pos-products-grid-col {
flex: 1;
min-width: 0;
height: 100%;
overflow-y: auto;
}
.pos-categories-sidebar {
width: 155px;
flex-shrink: 0;
background-color: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.4rem;
overflow-y: auto;
height: 100%;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}
/*
* English: Unique, smart, light category items design with responsive hover micro-animations
* Bangla: স্মার্ট পসের ক্যাটাগরি আইটেমগুলোর আকর্ষণীয় এবং লাইট ডিজাইন ও হোভার মাইক্রো-অ্যানিমেশন
*/
.pos-category-item {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.5rem 0.65rem;
background-color: #f8fafc;
border: 1px solid #f1f5f9;
border-radius: 6px;
color: #64748b;
font-size: 10.5px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
}
.pos-category-item:hover {
background-color: #f1f5f9;
border-color: #cbd5e1;
color: #1e293b;
transform: translateX(-2px);
}
.pos-category-item.active {
background-color: #e0e7ff;
border-color: #6366f1;
color: #4f46e5;
box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.08);
}
.pos-category-item i {
font-size: 11px;
color: #94a3b8;
transition: transform 0.2s ease, color 0.2s ease;
}
.pos-category-item.active i {
color: #4f46e5;
transform: scale(1.1);
}
/*
* English: Hide the standard dropdown category select in the bottom bar on Smart POS
* Bangla: স্মার্ট পসে নিচের বারের রেগুলার ড্রপডাউন ক্যাটাগরি সিলেক্ট কন্টেইনার হাইড করার স্টাইল
*/
.pos-wrapper-smart~.pos-bottom-bar .pos-category-select-wrapper,
.pos-wrapper-restaurant~.pos-bottom-bar .pos-category-select-wrapper {
display: none !important;
}
@media (max-width: 1024px) {
/* English: Responsive layout for category list on mobile/tablet viewports (horizontal scrollable bar) */
/* Bangla: মোবাইল ও ট্যাবলেটের জন্য ক্যাটাগরি লিস্টকে আনুভূমিকভাবে স্ক্রল করার লেআউট */
.pos-products-layout-container {
flex-direction: column !important;
height: auto !important;
}
.pos-products-grid-col {
height: auto !important;
overflow: visible !important;
}
.pos-categories-sidebar {
width: 100% !important;
height: auto !important;
flex-direction: row !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding: 0.4rem !important;
gap: 0.4rem !important;
margin-top: 0.5rem !important;
}
.pos-category-item {
flex-shrink: 0 !important;
padding: 0.45rem 0.6rem !important;
}
}
/*
* English: Styles for the new modern popup payment modal and number pad (Numpad) in Restaurant POS
* Bangla: রেস্টুরেন্ট পসের পেমেন্ট পপ-আপ মডাল এবং নাম্বার প্যাডের জন্য সিএসএস স্টাইলসমূহ
*/
.pos-payment-modal-container {
display: flex;
gap: 1.25rem;
min-height: 380px;
}
.pos-payment-inputs-col {
flex: 1.2;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.pos-payment-numpad-col {
flex: 0.8;
background-color: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 0.85rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
justify-content: center;
}
.pos-numpad-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.45rem;
}
.pos-numpad-btn {
background-color: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 6px;
color: #334155;
font-size: 15px;
font-weight: 700;
padding: 0.65rem 0;
text-align: center;
cursor: pointer;
user-select: none;
transition: all 0.15s ease-in-out;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.pos-numpad-btn:hover {
background-color: #f1f5f9;
border-color: #94a3b8;
color: #0f172a;
}
.pos-numpad-btn:active {
transform: scale(0.95);
}
.pos-numpad-btn-action {
background-color: #f1f5f9;
color: #475569;
}
.pos-numpad-btn-action:hover {
background-color: #e2e8f0;
}
.pos-numpad-btn-exact {
background-color: #e0e7ff;
border-color: #a5b4fc;
color: #4f46e5;
}
.pos-numpad-btn-exact:hover {
background-color: #c7d2fe;
border-color: #818cf8;
}
/* Medium size payment modal width override */
.modal-payment-medium {
max-width: 720px !important;
width: 90% !important;
}
@media (max-width: 768px) {
.pos-payment-modal-container {
flex-direction: column;
gap: 1rem;
}
.pos-payment-numpad-col {
width: 100% !important;
margin-top: 0.5rem;
}
}
/*
* English: Styles for paid amount wrapper, dynamic currency icon placement, and cancel/confirm buttons in Restaurant POS payment modal
* Bangla: রেস্টুরেন্ট পসের পেমেন্ট মডালে পেইড অ্যামাউন্ট ইনপুট, কারেন্সি আইকন পজিশনিং এবং ক্যান্সেল/কনফার্ম বাটনের জন্য স্টাইলসমূহ
*/
.pos-paid-amount-wrapper {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-top: 0.5rem;
}
.pos-paid-amount-label {
font-size: 10px;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.pos-paid-amount-inner {
position: relative;
display: flex;
align-items: center;
}
.pos-paid-currency-icon {
position: absolute;
left: 0.75rem;
color: #4f46e5;
font-weight: 700;
font-size: 16px;
pointer-events: none;
}
.pos-paid-amount-input {
width: 100%;
padding: 0.5rem 0.75rem 0.5rem 2rem !important;
font-size: 20px !important;
font-weight: 900 !important;
color: #4338ca !important;
background-color: #f5f3ff !important;
border: 1.5px solid #c7d2fe !important;
border-radius: 6px !important;
outline: none;
transition: all 0.15s ease-in-out;
}
.pos-paid-amount-input:focus {
background-color: #ffffff !important;
border-color: #6366f1 !important;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.pos-modal-cancel-btn {
background-color: #ef4444 !important;
border-color: #ef4444 !important;
color: #ffffff !important;
padding: 0.65rem 1.75rem !important;
font-size: 14px !important;
font-weight: 800 !important;
border-radius: 8px !important;
height: 44px !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
transition: all 0.15s ease-in-out;
}
.pos-modal-cancel-btn:hover {
background-color: #dc2626 !important;
border-color: #dc2626 !important;
transform: translateY(-1px);
}
.pos-modal-confirm-btn {
padding: 0.65rem 1.75rem !important;
font-size: 14px !important;
font-weight: 800 !important;
border-radius: 8px !important;
height: 44px !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
}
/*
* English: Left-padding override when currency symbol display is disabled from General Settings
* Bangla: জেনারেল সেটিংস থেকে কারেন্সি সিম্বল বন্ধ থাকলে ইনপুটে বামে প্যাডিং কম করার স্টাইল
*/
.pos-paid-amount-input-no-symbol {
padding-left: 0.75rem !important;
}
/*
* English: Premium styles for the POS Print Modal options and copy elements
* Bangla: পস প্রিন্ট মডাল কপির সংখ্যা সিলেক্টর এবং প্রিন্ট বাটন সমূহের প্রিমিয়াম স্টাইল
*/
.pos-print-options-card {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 0.75rem 1rem;
gap: 1rem;
}
.pos-print-copies-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
}
.pos-print-copies-label {
font-size: 11px;
font-weight: 700;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0;
}
.pos-print-copies-input {
width: 65px !important;
text-align: center;
font-size: 14px !important;
font-weight: 800 !important;
color: #4f46e5 !important;
background-color: #ffffff !important;
border: 1.5px solid #cbd5e1 !important;
border-radius: 6px !important;
padding: 0.35rem 0.5rem !important;
outline: none;
transition: all 0.15s ease-in-out;
}
.pos-print-copies-input:focus {
border-color: #6366f1 !important;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.pos-print-trigger-btn {
background-color: #4f46e5 !important;
border: 1px solid #4f46e5 !important;
color: #ffffff !important;
padding: 0.45rem 1.25rem !important;
font-size: 12px !important;
font-weight: 700 !important;
border-radius: 6px !important;
display: flex;
align-items: center;
gap: 0.4rem;
cursor: pointer;
transition: all 0.15s ease-in-out;
box-shadow: 0 2px 4px rgba(79, 70, 229, 0.15);
}
.pos-print-trigger-btn:hover {
background-color: #4338ca !important;
border-color: #4338ca !important;
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(79, 70, 229, 0.25);
}
.pos-print-trigger-btn:active {
transform: translateY(0);
}
.pos-modal-new-order-btn {
background-color: #0d9488 !important;
border: 1px solid #0d9488 !important;
color: #ffffff !important;
padding: 0.5rem 1.5rem !important;
font-size: 12px !important;
font-weight: 700 !important;
border-radius: 6px !important;
transition: all 0.15s ease-in-out;
box-shadow: 0 2px 4px rgba(13, 148, 136, 0.15);
}
.pos-modal-new-order-btn:hover {
background-color: #0f766e !important;
border-color: #0f766e !important;
box-shadow: 0 4px 6px rgba(13, 148, 136, 0.25);
}
/*
* English: Premium large action buttons style rules for POS bottom panel
* Bangla: পস এর নিচের প্যানেলের বড় অ্যাকশন বাটন সমূহের প্রিমিয়াম স্টাইল
*/
.pos-action-btn-large {
padding: 0.65rem 1.75rem !important;
font-size: 13px !important;
font-weight: 800 !important;
border-radius: 8px !important;
text-transform: uppercase;
letter-spacing: 0.5px;
display: inline-flex;
align-items: center;
gap: 0.4rem;
height: 44px !important;
transition: all 0.2s ease-in-out !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.pos-action-btn-large:hover {
transform: translateY(-1.5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}
.pos-action-btn-large:active {
transform: translateY(0);
}
.pos-clear-btn {
background-color: #64748b !important;
border-color: #64748b !important;
color: #ffffff !important;
}
.pos-clear-btn:hover {
background-color: #475569 !important;
border-color: #475569 !important;
}
.pos-draft-btn {
background-color: #f59e0b !important;
border-color: #f59e0b !important;
color: #ffffff !important;
}
.pos-draft-btn:hover {
background-color: #d97706 !important;
border-color: #d97706 !important;
}
.pos-place-order-btn {
background-color: #10b981 !important;
border-color: #10b981 !important;
color: #ffffff !important;
box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
}
.pos-place-order-btn:hover {
background-color: #059669 !important;
border-color: #059669 !important;
box-shadow: 0 6px 15px rgba(16, 185, 129, 0.35);
}
/*
* English: Style rules for POS Payment Terminal modal footer with customer info input and button layouts
* Bangla: কাস্টমার ডিটেইলস ইনপুট এবং বাটন সম্বলিত পস পেমেন্ট মডালের ফুটারে আকর্ষণীয় লেআউট
*/
.pos-payment-modal-footer {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 1rem 1.5rem !important;
gap: 1.5rem !important;
}
.pos-modal-cust-details-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
flex-grow: 1;
max-width: 360px;
}
.pos-modal-cust-details-input {
width: 100% !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #334155 !important;
background-color: #ffffff !important;
border: 1.5px solid #cbd5e1 !important;
border-radius: 6px !important;
padding: 0.55rem 0.75rem !important;
outline: none;
transition: all 0.15s ease-in-out;
}
.pos-modal-cust-details-input::placeholder {
color: #94a3b8;
font-weight: 500;
}
.pos-modal-cust-details-input:focus {
border-color: #6366f1 !important;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.pos-modal-footer-actions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}
/*
* English: Receipt modal size override to match thermal printing paper size and prevent scrollbar leaks
* Bangla: থার্মাল প্রিন্ট পেপারের সাথে ম্যাচ করতে এবং অপ্রয়োজনীয় স্ক্রলবার বন্ধ করতে রসিদ মডালের নির্দিষ্ট সাইজ
*/
.modal-receipt-size {
max-width: 385px !important;
width: 100% !important;
}
.modal-receipt-size .pos-print-options-card {
flex-direction: column !important;
align-items: stretch !important;
gap: 0.75rem !important;
padding: 0.75rem !important;
}
.modal-receipt-size .pos-print-copies-wrapper {
justify-content: space-between !important;
}
.modal-receipt-size .pos-print-trigger-btn {
justify-content: center !important;
width: 100% !important;
}
.pos-print-iframe-container {
height: 310px !important;
}
/*
* English: Styles for POS Payment Terminal header stats block containing Subtotal, VAT, Discount, and Shipping
* Bangla: পস পেমেন্ট মডাল হেডারে সাবটোটাল, ভ্যাট, ডিসকাউন্ট এবং শিপিং সুন্দরভাবে সাজানোর সিএসএস রুলস
*/
.pos-payment-header-stats {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-size: 11px;
font-weight: 700;
color: #475569;
background-color: #f1f5f9;
padding: 0.35rem 0.85rem;
border-radius: 9999px;
border: 1px solid #cbd5e1;
margin-right: 1rem;
margin-left: auto;
}
@media (max-width: 640px) {
.pos-payment-header-stats {
display: none !important;
/* Hide stats in header on mobile to prevent squishing */
}
}
/*
* English: Styles for Sidebar Menu Live Search Box matching the mockup photo
* Bangla: মকআপ ফটো অনুযায়ী সাইডবার মেনু লাইভ সার্চ বক্সের ডিজাইন
*/
.sidebar-search-container {
padding: 0.75rem 0.85rem 0.5rem 0.85rem !important;
}
.sidebar-search-box {
position: relative !important;
display: flex !important;
align-items: center !important;
width: 100% !important;
}
.sidebar-search-box input {
width: 100% !important;
height: 40px !important;
padding: 0.5rem 2.25rem 0.5rem 2.5rem !important;
border: 1px solid #cbd5e1 !important;
border-radius: 14px !important;
background-color: #f8fafc !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #334155 !important;
outline: none !important;
transition: all 0.2s ease-in-out !important;
}
.sidebar-search-box input::placeholder {
color: #94a3b8 !important;
}
.sidebar-search-box input:focus {
border-color: #a78bfa !important;
background-color: #ffffff !important;
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
}
.sidebar-search-box .search-icon {
position: absolute !important;
left: 14px !important;
color: #94a3b8 !important;
font-size: 14px !important;
pointer-events: none !important;
}
.sidebar-search-box .clear-icon {
position: absolute !important;
right: 14px !important;
color: #94a3b8 !important;
font-size: 11px !important;
cursor: pointer !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity 0.2s ease-in-out !important;
}
.sidebar-search-box .clear-icon.visible {
opacity: 1 !important;
pointer-events: auto !important;
}
.sidebar-search-box .clear-icon:hover {
color: #64748b !important;
}
/* Collapsed layout overrides */
.erp-wrapper.sidebar-collapsed .sidebar-search-container {
display: none !important;
}
/*
* English: Mobile & Tablet Responsiveness Overrides for Layout & Navigation
* Bangla: মোবাইল এবং ট্যাবলেটের জন্য লেআউট ও নেভিগেশন রেসপন্সিভ ওভাররাইড স্টাইল
*/
/* Backdrop overlay styling */
.sidebar-backdrop {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(15, 23, 42, 0.5) !important;
backdrop-filter: blur(4px) !important;
z-index: 999 !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity 0.3s ease-in-out !important;
}
@media (max-width: 991px) {
/* Enable mobile sidebar drawer styling */
.erp-sidebar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
bottom: 0 !important;
height: 100vh !important;
width: 260px !important;
transform: translateX(-100%) !important;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
z-index: 1000 !important;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
border-right: none !important;
}
/* Active state when drawer is opened on mobile */
.erp-wrapper.mobile-sidebar-open .erp-sidebar {
transform: translateX(0) !important;
}
.erp-wrapper.mobile-sidebar-open .sidebar-backdrop {
opacity: 1 !important;
pointer-events: auto !important;
}
/* Header styling on mobile */
.erp-header {
position: sticky !important;
top: 0 !important;
z-index: 900 !important;
background-color: #ffffff !important;
padding: 0.65rem 1rem !important;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}
.header-title {
font-size: 1rem !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 150px !important;
}
.header-subtitle {
display: none !important;
}
.user-info-text {
display: none !important;
}
/* Wrap header actions properly */
.header-actions {
gap: 0.35rem !important;
}
/* Clear cache button and session indicators */
.header-actions button,
.header-actions a {
padding: 0.35rem 0.65rem !important;
font-size: 11px !important;
}
/* Main body padding adjustments */
.erp-content {
padding: 1rem !important;
overflow-x: hidden !important;
}
/* Table responsiveness for all index listings */
.table-erp-wrapper {
width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* Card wrappers layout adjustments */
.erp-card-body {
padding: 1rem !important;
}
}
@media (max-width: 768px) {
/* Stack form row elements nicely */
.row {
margin-left: -0.5rem !important;
margin-right: -0.5rem !important;
}
.col-lg-12,
.col-lg-6,
.col-md-6,
.col-sm-12,
.col-12 {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
/* Print settings or POS view overrides */
.pos-bottom-bar {
padding: 0.5rem !important;
}
}
/* 4. Modern Glass Capsule Theme (Special Theme) */
/* English: Background uses a modern light-indigo gradient, with menu items formatted as floating rounded capsule pills, and glassmorphic hovers */
/* Bangla: ব্যাকগ্রাউন্ডে মডার্ন লাইট-ইন্ডিগো গ্রেডিয়েন্ট এবং মেনু আইটেমগুলোকে ভাসমান রাউন্ডেড ক্যাপসুল পিল ও গ্লাসমরফিক হোভার ইফেক্ট দিয়ে স্টাইল করা হয়েছে */
.erp-sidebar.theme-night {
background: linear-gradient(180deg, #f8fafc 0%, #e0e7ff 100%) !important;
border-right: 1px solid #cbd5e1 !important;
}
.erp-sidebar.theme-night .sidebar-brand {
background: rgba(255, 255, 255, 0.8) !important;
backdrop-filter: blur(8px) !important;
color: var(--text-main) !important;
border-bottom: 1px solid #cbd5e1 !important;
}
.erp-sidebar.theme-night .sidebar-brand span {
color: var(--text-main) !important;
}
.erp-sidebar.theme-night .sidebar-section-title {
color: #4f46e5 !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
margin-left: 0.75rem !important;
}
.erp-sidebar.theme-night .sidebar-link {
color: #475569 !important;
margin: 0.25rem 0.65rem !important;
border-radius: 24px !important;
/* Premium Pill capsule shape */
border: 1px solid transparent !important;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
padding: 0.5rem 0.75rem !important;
}
.erp-sidebar.theme-night .sidebar-link:hover {
color: var(--primary) !important;
background-color: rgba(79, 70, 229, 0.08) !important;
/* Frosted indigo glass */
border-color: rgba(79, 70, 229, 0.15) !important;
transform: translateX(3px) !important;
}
.erp-sidebar.theme-night .sidebar-link.active {
color: #ffffff !important;
background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
/* Floating gradient capsule */
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
border: 1px solid #4f46e5 !important;
}
.erp-sidebar.theme-night .sidebar-link i {
color: #64748b !important;
transition: color 0.2s ease, transform 0.2s ease;
}
.erp-sidebar.theme-night .sidebar-link:hover i {
color: var(--primary) !important;
transform: scale(1.1) !important;
}
.erp-sidebar.theme-night .sidebar-link.active i {
color: #ffffff !important;
}
.erp-sidebar.theme-night .sidebar-dropdown {
padding-left: 1.5rem !important;
}
.erp-sidebar.theme-night .sidebar-dropdown-link {
color: #475569 !important;
margin: 0.15rem 0.45rem !important;
border-radius: 18px !important;
/* Inner capsule pills */
border: 1px solid transparent !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
padding: 0.35rem 0.65rem !important;
}
.erp-sidebar.theme-night .sidebar-dropdown-link:hover {
color: var(--primary) !important;
background-color: rgba(79, 70, 229, 0.08) !important;
border-color: rgba(79, 70, 229, 0.15) !important;
}
.erp-sidebar.theme-night .sidebar-dropdown-link.active {
color: var(--primary) !important;
background-color: rgba(79, 70, 229, 0.12) !important;
border: 1px solid rgba(79, 70, 229, 0.2) !important;
font-weight: 600 !important;
}
.erp-sidebar.theme-night .sidebar-dropdown-link i {
color: #94a3b8 !important;
}
.erp-sidebar.theme-night .sidebar-dropdown-link:hover i,
.erp-sidebar.theme-night .sidebar-dropdown-link.active i {
color: var(--primary) !important;
}
.erp-sidebar.theme-night .sidebar-link .arrow-icon {
color: #64748b !important;
}
.erp-sidebar.theme-night .sidebar-link:hover .arrow-icon {
color: var(--primary) !important;
}
.erp-sidebar.theme-night .sidebar-link.active .arrow-icon {
color: #ffffff !important;
}
.erp-sidebar.theme-night .sidebar-search-box input {
background-color: rgba(255, 255, 255, 0.9) !important;
border-color: #cbd5e1 !important;
color: var(--text-main) !important;
border-radius: 20px !important;
}
.erp-sidebar.theme-night .sidebar-search-box input:focus {
border-color: var(--primary) !important;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
}
/*
* English: Minimal & Compact Styles for Tabbed General Settings Page
* Bangla: ট্যাবড জেনারেল সেটিংস পেজের জন্য মিনিমাল এবং কম্প্যাক্ট সিএসএস স্টাইল
*/
.settings-tabs-container {
display: flex !important;
gap: 0.35rem !important;
margin-bottom: 1.25rem !important;
background-color: #ffffff !important;
padding: 0.35rem !important;
border-radius: 10px !important;
border: 1px solid var(--border-color) !important;
width: fit-content !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
.settings-tab-btn {
background: transparent !important;
border: none !important;
padding: 0.45rem 1rem !important;
font-size: 11px !important;
font-weight: 600 !important;
color: var(--text-muted) !important;
border-radius: 6px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
gap: 0.4rem !important;
transition: all 0.2s ease !important;
}
.settings-tab-btn:hover {
color: var(--primary) !important;
background-color: #f8fafc !important;
}
.settings-tab-btn.active {
color: #ffffff !important;
background: linear-gradient(135deg, var(--primary), var(--primary-hover)) !important;
box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.15) !important;
}
.settings-tab-content {
display: none !important;
}
.settings-tab-content.active {
display: block !important;
}
/* Minimal Card Overrides */
/* Minimal Card Overrides */
.card-minimal {
border-radius: 12px !important;
border: 1px solid var(--border-color) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
background-color: #ffffff !important;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.card-minimal:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 16px rgba(99, 102, 241, 0.05) !important;
}
.card-minimal .erp-card-header {
padding: 0.75rem 1rem !important;
border-bottom: 1px solid var(--border-color) !important;
background-color: #f8fafc !important;
border-top-left-radius: 11px !important;
border-top-right-radius: 11px !important;
}
.card-minimal .erp-card-title {
font-size: 0.78rem !important;
font-weight: 700 !important;
color: var(--text-main) !important;
}
.card-minimal .erp-card-body {
padding: 1.25rem 1rem !important;
}
.card-minimal .form-group-erp {
margin-bottom: 0.9rem !important;
}
.card-minimal .form-label-erp {
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
color: var(--text-muted) !important;
margin-bottom: 0.35rem !important;
}
.card-minimal .form-control-erp {
padding: 0.5rem 0.75rem !important;
font-size: 12px !important;
height: auto !important;
background-color: #f8fafc !important;
border: 1px solid var(--border-color) !important;
border-radius: 6px !important;
transition: all 0.2s ease !important;
}
.card-minimal .form-control-erp:focus {
background-color: #ffffff !important;
border-color: var(--primary) !important;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}
/*
* English: Three-column Grid Layout for Minimal Settings Panel with load animations
* Bangla: লোড অ্যানিমেশনসহ মিনিমাল সেটিংস প্যানেলের জন্য ৩-কলাম বিশিষ্ট গ্রিড লেআউট
*/
.settings-grid-three-col {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 1.25rem !important;
align-items: start !important;
}
@media (max-width: 1200px) {
.settings-grid-three-col {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 768px) {
.settings-grid-three-col {
grid-template-columns: 1fr !important;
}
}
.settings-grid-col {
display: flex !important;
flex-direction: column !important;
gap: 1.25rem !important;
animation: slideUpFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.settings-grid-col:nth-child(1) {
animation-delay: 0.05s !important;
}
.settings-grid-col:nth-child(2) {
animation-delay: 0.1s !important;
}
.settings-grid-col:nth-child(3) {
animation-delay: 0.15s !important;
}
@keyframes slideUpFadeIn {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ═══════════════════════════════════════════════════════
IMEI / Serial Lifecycle Show Page — Compact Timeline
═══════════════════════════════════════════════════════ */
.imei-serial-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: linear-gradient(135deg, #312e81 0%, #4338ca 100%);
color: #fff;
font-family: 'JetBrains Mono', 'Fira Mono', monospace;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.12em;
padding: 0.25rem 0.7rem;
border-radius: 999px;
}
.imei-specs-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.65rem;
background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%);
border: 1px solid #e0e7ff;
border-radius: 10px;
padding: 0.7rem 1rem;
margin-bottom: 1rem;
}
@media (max-width: 640px) {
.imei-specs-bar {
grid-template-columns: 1fr 1fr;
}
}
.imei-specs-label {
display: block;
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #94a3b8;
margin-bottom: 0.1rem;
}
.imei-specs-value {
font-size: 0.68rem;
font-weight: 700;
color: #1e293b;
display: block;
}
.imei-timeline {
position: relative;
padding-left: 1.4rem;
}
.imei-timeline::before {
content: '';
position: absolute;
left: 0.3rem;
top: 0.5rem;
bottom: 0.5rem;
width: 2px;
background: linear-gradient(to bottom, #c7d2fe 0%, #e2e8f0 80%, transparent 100%);
border-radius: 2px;
}
.imei-timeline-entry {
position: relative;
margin-bottom: 0.65rem;
}
.imei-timeline-entry:last-child {
margin-bottom: 0;
}
.imei-timeline-dot {
position: absolute;
left: -1.15rem;
top: 0.55rem;
width: 0.6rem;
height: 0.6rem;
border-radius: 50%;
border: 2px solid #fff;
z-index: 1;
}
.imei-dot-purchase {
background: #6366f1;
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}
.imei-dot-pret {
background: #f59e0b;
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}
.imei-dot-sale {
background: #ef4444;
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);
}
.imei-dot-sret {
background: #10b981;
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
}
.imei-dot-warranty {
background: #0ea5e9;
box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.3);
}
.imei-dot-claim {
background: #d946ef;
box-shadow: 0 0 0 2px rgba(217, 70, 239, 0.3);
}
.imei-timeline-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 0.55rem 0.8rem;
transition: box-shadow 0.2s ease;
}
.imei-timeline-card:hover {
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08);
}
.imei-card-purchase {
border-left: 3px solid #6366f1;
}
.imei-card-pret {
border-left: 3px solid #f59e0b;
}
.imei-card-sale {
border-left: 3px solid #ef4444;
}
.imei-card-sret {
border-left: 3px solid #10b981;
}
.imei-card-warranty {
border-left: 3px solid #0ea5e9;
}
.imei-card-claim {
border-left: 3px solid #d946ef;
}
.imei-card-step-label {
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.imei-card-title {
font-size: 0.7rem;
font-weight: 700;
color: #1e293b;
margin: 0.2rem 0 0.35rem;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem;
}
.imei-card-meta {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
gap: 0.45rem;
}
.imei-meta-label {
display: block;
font-size: 0.55rem;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
color: #94a3b8;
margin-bottom: 0.08rem;
}
.imei-meta-value {
font-size: 0.67rem;
font-weight: 700;
color: #334155;
}
.imei-meta-link {
font-size: 0.67rem;
font-weight: 700;
text-underline-offset: 2px;
text-decoration: underline;
}
.imei-meta-link-indigo {
color: #4f46e5;
}
.imei-meta-link-amber {
color: #d97706;
}
.imei-meta-link-rose {
color: #dc2626;
}
.imei-meta-link-emerald {
color: #059669;
}
.imei-step-label-indigo {
color: #6366f1;
}
.imei-step-label-amber {
color: #f59e0b;
}
.imei-step-label-rose {
color: #ef4444;
}
.imei-step-label-emerald {
color: #10b981;
}
.imei-step-label-sky {
color: #0ea5e9;
}
.imei-step-label-fuchsia {
color: #d946ef;
}
/* Custom ERP Multi-File Upload & Document View styles */
/* ERP মাল্টি-ফাইল আপলোড এবং ডকুমেন্ট ভিউ স্টাইল */
.product-gallery-img {
max-height: 200px;
width: 100%;
object-fit: contain;
}
/* Progress bar driven by JS data-width attribute */
/* JS data-width অ্যাট্রিবিউট দ্বারা নিয়ন্ত্রিত প্রগ্রেস বার */
.erp-progress-bar {
width: 0%;
transition: width 0.6s ease;
}
/* Attachment badge view/download button shared base */
/* অ্যাটাচমেন্ট ব্যাজ ভিউ/ডাউনলোড বাটন শেয়ার্ড বেস */
.badge-attachment {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.625rem;
font-weight: 700;
padding: 0.125rem 0.5rem;
border-radius: 0.375rem;
text-decoration: none;
transition: opacity 0.2s;
}
.badge-attachment:hover {
opacity: 0.8;
}
.badge-view {
background-color: #eff6ff;
color: #4f46e5;
border: 1px solid #c7d2fe;
}
.badge-download {
background-color: #ecfdf5;
color: #059669;
border: 1px solid #6ee7b7;
}
/* IMEI timeline badge small size */
/* আইএমইআই টাইমলাইন ব্যাজ ছোট সাইজ */
.imei-badge-sm {
font-size: 0.58rem;
}
/* IMEI card meta grid full-width span */
/* আইএমইআই কার্ড মেটা গ্রিড পূর্ণ-প্রস্থ স্প্যান */
.imei-meta-span-2 {
grid-column: span 2;
}
/* Sales edit change amount row hidden by default */
/* সেলস এডিট চেঞ্জ আমাউন্ট রো ডিফল্টে লুকানো */
.change-amount-row-hidden {
display: none;
}
.change-amount-row-visible {
display: flex;
}
/* ═══════════════════════════════════════════════════════════════════════════════
Investor Profile Page — Colored Tab Navigation Container
English: The tab navigation bar itself gets a gradient background and
a bottom border to visually separate it from the content area.
Bangla: ট্যাব navigation bar নিজেই gradient background এবং নিচে border
পায় — এটি content area থেকে দৃশ্যত আলাদা করে।
═══════════════════════════════════════════════════════════════════════════════ */
/* English: Investor tab nav container — gradient background, padding, shadow */
/* Bangla: ইনভেস্টর ট্যাব nav container — gradient background, padding, shadow */
.investor-tabs-nav {
background: linear-gradient(to right, #f8faff, #fdf8ff, #fff8f0) !important;
border-bottom: 2px solid #e2e8f0 !important;
padding: 10px 16px !important;
gap: 8px !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
flex-wrap: wrap;
}
/* English: Shared base for all three investor tab buttons */
/* Bangla: তিনটি ইনভেস্টর ট্যাব বাটনের জন্য shared base style */
.investor-tabs-nav .tab-btn {
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
border-width: 1.5px !important;
border-style: solid !important;
border-radius: 10px !important;
font-weight: 700;
font-size: 0.72rem;
padding: 0.55rem 1.1rem;
}
/* ═══════════════════════════════════════════
Tab 1: Capital Investments — Indigo Theme
═══════════════════════════════════════════ */
/* English: Default (inactive) state — light indigo background + indigo border + indigo text/icon */
/* Bangla: Default (নিষ্ক্রিয়) অবস্থা — হালকা indigo background + indigo border + indigo text/icon */
.investor-tab-investments {
color: #4f46e5;
background-color: #eef2ff;
border-color: #c7d2fe !important;
}
.investor-tab-investments i {
color: #6366f1;
transition: color 0.2s;
}
/* English: Hover state — deeper indigo background, darker text */
/* Bangla: Hover অবস্থা — গাঢ় indigo background, গাঢ় text */
.investor-tab-investments:hover {
color: #3730a3;
background-color: #e0e7ff;
border-color: #a5b4fc !important;
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.18);
}
.investor-tab-investments:hover i {
color: #4338ca;
}
/* English: Active/selected state — strong indigo gradient, white text */
/* Bangla: Active/নির্বাচিত অবস্থা — শক্তিশালী indigo gradient, সাদা text */
.investor-tab-investments.active {
color: #ffffff;
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
border-color: #4338ca !important;
box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}
.investor-tab-investments.active i {
color: #ffffff;
}
/* ═══════════════════════════════════════════
Tab 2: Capital Withdrawals — Rose Theme
═══════════════════════════════════════════ */
/* English: Default (inactive) state — light rose background + rose border + rose text/icon */
/* Bangla: Default (নিষ্ক্রিয়) অবস্থা — হালকা rose background + rose border + rose text/icon */
.investor-tab-returns {
color: #e11d48;
background-color: #fff1f2;
border-color: #fecdd3 !important;
}
.investor-tab-returns i {
color: #f43f5e;
transition: color 0.2s;
}
/* English: Hover state — deeper rose background, richer color */
/* Bangla: Hover অবস্থা — গাঢ় rose background, আরও উজ্জ্বল রঙ */
.investor-tab-returns:hover {
color: #9f1239;
background-color: #ffe4e6;
border-color: #fca5a5 !important;
box-shadow: 0 2px 8px rgba(225, 29, 72, 0.18);
}
.investor-tab-returns:hover i {
color: #be123c;
}
/* English: Active/selected state — strong rose gradient, white text */
/* Bangla: Active/নির্বাচিত অবস্থা — শক্তিশালী rose gradient, সাদা text */
.investor-tab-returns.active {
color: #ffffff;
background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
border-color: #be123c !important;
box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35);
}
.investor-tab-returns.active i {
color: #ffffff;
}
/* ═══════════════════════════════════════════
Tab 3: Profit Payouts — Amber Theme
═══════════════════════════════════════════ */
/* English: Default (inactive) state — light amber background + amber border + amber text/icon */
/* Bangla: Default (নিষ্ক্রিয়) অবস্থা — হালকা amber background + amber border + amber text/icon */
.investor-tab-profits {
color: #d97706;
background-color: #fffbeb;
border-color: #fde68a !important;
}
.investor-tab-profits i {
color: #f59e0b;
transition: color 0.2s;
}
/* English: Hover state — deeper amber background, richer warm color */
/* Bangla: Hover অবস্থা — গাঢ় amber background, আরও উষ্ণ উজ্জ্বল রঙ */
.investor-tab-profits:hover {
color: #92400e;
background-color: #fef3c7;
border-color: #fcd34d !important;
box-shadow: 0 2px 8px rgba(217, 119, 6, 0.18);
}
.investor-tab-profits:hover i {
color: #b45309;
}
/* English: Active/selected state — warm amber gradient, white text */
/* Bangla: Active/নির্বাচিত অবস্থা — উষ্ণ amber gradient, সাদা text */
.investor-tab-profits.active {
color: #ffffff;
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
border-color: #b45309 !important;
box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35);
}
.investor-tab-profits.active i {
color: #ffffff;
}
/* Fix extra scrollbars when printing tables */
@media print {
html,
body,
.erp-wrapper,
.erp-main,
.main-content,
.page-content,
.container-fluid,
.table-responsive,
.financial-statement-box {
display: block !important;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
height: auto !important;
max-height: none !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
::-webkit-scrollbar {
display: none !important;
}
}
/* ==========================================================================
English: BUTTON LOADING STATE + DOUBLE-CLICK PROTECTION STYLES
(Attached automatically to ALL forms via form-submit-protect.js).
These styles define the spinner look, disabled button opacity,
cursor behavior for busy buttons, and a pure-CSS rotating loader
that works WITHOUT any CDN or external font dependency beyond
what is already bundled locally. When Font Awesome is available
the fa-spin class is used; otherwise the CSS-only fallback below.
Bangla: বাটন লোডিং স্টেট + ডাবল ক্লিক প্রোটেকশন স্টাইল
(form-submit-protect.js দিয়ে সব ফর্মে স্বয়ংক্রিয়ভাবে লাগানো হয়েছে)।
এই স্টাইলগুলো স্পিনারের লুক, ডিজেবল বাটনের অপ্যাসিটি, ব্যাজি বাটনের
কার্সর বিহেভিয়ার নির্ধারণ করে এবং শুধুমাত্র CSS দিয়ে ঘূর্ণায়মান লোডার
তৈরি করে — কোনো বাহ্যিক CDN বা ফন্ট ছাড়াই। Font Awesome উপলব্ধ থাকলে
fa-spin ক্লাস ব্যবহৃত হয়; না থাকলে নিচের CSS-only fallback কাজ করে।
========================================================================== */
/* English: Base disabled-busy state — any submit button that is actively processing */
/* Bangla: ডিজেবল-ব্যাজি বেস স্টেট — যেকোনো সাবমিট বাটন যখন প্রক্রিয়াধীন থাকে */
.btn-is-loading,
button[data-btn-busy="true"],
input[type="submit"][data-btn-busy="true"] {
position: relative !important;
pointer-events: none !important;
/* English: 100% effective double-click block | Bangla: ১০০% কার্যকর ডাবল-ক্লিক ব্লক */
cursor: progress !important;
/* English: Visual cue that work is happening | Bangla: কাজ চলছে বুঝানোর ভিজ্যুয়াল কিউ */
opacity: 0.78 !important;
/* English: Slight dimming — readable but clearly disabled | Bangla: হালকা অন্ধকার — পাঠযোগ্য কিন্তু স্পষ্টভাবে নিষ্ক্রিয় */
user-select: none !important;
-webkit-user-select: none !important;
transition: opacity 0.15s ease-out !important;
}
/* English: Guard for already-submitted forms — invisible but prevents further submit() calls */
/* Bangla: ইতিমধ্যে সাবমিটেড ফর্মের গার্ড — অদৃশ্য কিন্তু পরবর্তী submit() কল আটকে দেয় */
form[data-form-submitted="true"] {
pointer-events: none;
}
/* English: Spinner wrapper — inline-flex aligns icon + text nicely */
/* Bangla: স্পিনার র্যাপার — inline-flex আইকন ও টেক্সট সুন্দর করে সারিবদ্ধ করে */
.btn-loading-content {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
width: 100%;
white-space: nowrap;
}
/* English: Pure-CSS rotating spinner (no FA dependency) — a classic 2px border ring */
/* Bangla: শুধুমাত্র CSS দিয়ে তৈরি ঘূর্ণায়মান স্পিনার (FA ডিপেন্ডেন্সি নেই) — ক্লাসিক ২px বার্ডার রিং */
.btn-spinner-ring {
width: 1.1em;
height: 1.1em;
border: 2px solid rgba(255, 255, 255, 0.45);
/* English: Transparent ring background | Bangla: ট্রান্সপারেন্ট রিং ব্যাকগ্রাউন্ড */
border-top-color: #ffffff !important;
/* English: Solid white top arc = spinning indicator | Bangla: সাদা টপ আর্ক = ঘূর্ণায়মান ইন্ডিকেটর */
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
animation: btn-spin 0.75s linear infinite;
-webkit-animation: btn-spin 0.75s linear infinite;
vertical-align: middle;
box-sizing: border-box;
}
/* English: Dark variant for light-colored buttons (white bg, dark spinner arc) */
/* Bangla: হালকা রঙের বাটনের জন্য ডার্ক ভেরিয়েন্ট (সাদা ব্যাকগ্রাউন্ডে গাঢ় স্পিনার আর্ক) */
.btn-spinner-ring.btn-spinner-dark {
border-color: rgba(33, 37, 41, 0.2);
border-top-color: #212529 !important;
}
/* English: Animation keyframes — pure CSS 360deg rotation loop */
/* Bangla: অ্যানিমেশন কীফ্রেম — শুধুমাত্র CSS দিয়ে ৩৬০° ঘূর্ণন লুপ */
@keyframes btn-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes btn-spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
/* English: Loading button text label — kept on same baseline row as spinner */
/* Bangla: লোডিং বাটনের টেক্সট লেবেল — স্পিনারের সাথে একই বেসলাইনে রাখা হয় */
.btn-loading-text {
display: inline-block;
vertical-align: middle;
font-weight: 600;
letter-spacing: 0.01em;
}
/* English: Safety — form-level submitted flag truly blocks all click events inside */
/* Bangla: সেফটি — ফর্ম লেভেলে সাবমিটেড ফ্ল্যাগ থাকলে ভেতরের সব ক্লিক ইভেন্ট আটকে যায় */
form[data-form-submitted="true"] button,
form[data-form-submitted="true"] input[type="submit"] {
pointer-events: none !important;
}
/* English: Login-page submit button compatibility — keeps gradient + shadow during busy state */
/* Bangla: লগইন পেজ সাবমিট বাটনের সামঞ্জস্য — ব্যাজি স্টেটেও গ্র্যাডিয়েন্ট + শ্যাডো বজায় রাখে */
.login-v3-submit[data-btn-busy="true"] {
background-image: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
box-shadow: 0 10px 20px -10px rgba(99, 102, 241, 0.35) !important;
}
/* ============================================================
VAT / Tax Report Page Styles
------------------------------------------
English: All selectors used exclusively by resources/views/admin/tax_report/index.blade.php.
No inline style or CDN — everything lives here and is loaded locally via asset().
Bangla: সব সিলেক্টর শুধুমাত্র resources/views/admin/tax_report/index.blade.php দ্বারা
ব্যবহৃত হয়। কোনো inline স্টাইল বা CDN নেই — সবকিছু এখানে আছে এবং
asset() মাধ্যমে লোকালি লোড হয়।
============================================================ */
/* ----------------------------------------------------------------
1. Filter Card (date-range filter form at the very top)
---------------------------------------------------------------- */
/* English: Outer filter wrapper — soft indigo-50 background, rounded card, subtle border */
/* Bangla: আউটার ফিল্টার র্যাপার — হালকা indigo-50 ব্যাকগ্রাউন্ড, রাউন্ড কার্ড, কোমল বর্ডার */
.vat-report-filter-card {
background-color: #eef2ff;
border: 1px solid #c7d2fe;
border-radius: 12px;
padding: 10px 16px;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.05);
}
/* English: Inner flex layout for filter inputs/buttons — wraps on small screens */
/* Bangla: ফিল্টার ইনপুট/বাটনের জন্য ইনার ফ্লেক্স লেআউট — ছোট স্ক্রিনে নিচে চলে যায় */
.vat-filter-inner {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
justify-content: flex-start;
}
/* English: Each filter field grows proportional to available space (min 220px width) */
/* Bangla: প্রতিটি ফিল্টার ফিল্ড উপলব্ধ স্পেস অনুযায়ী প্রস্থ বাড়ায় (সর্বনিম্ন ২২০px প্রস্থ) */
.vat-filter-field {
flex: 1 1 220px;
min-width: 220px;
}
.vat-filter-date-field {
flex: 1 1 auto;
min-width: 170px;
}
.vat-filter-search-field {
flex: 2 1 auto;
min-width: 190px;
}
/* English: Label style — small uppercase, indigo-600 semi-bold */
/* Bangla: লেবেলের স্টাইল — ছোট uppercase, indigo-600 semi-bold */
.vat-filter-label {
display: block;
font-size: 11px;
font-weight: 600;
color: #4f46e5;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 6px;
}
/* English: Button group inside filter — flex nowrap with inter-button gap */
/* Bangla: ফিল্টারের ভেতরের বাটন গ্রুপ — ফ্লেক্স nowrap, বাটনের মধ্যে গ্যাপ */
.vat-filter-actions {
display: flex;
flex-wrap: nowrap;
gap: 10px;
flex: 0 0 auto;
}
/* ----------------------------------------------------------------
2. Summary Cards (Top-level 3 cards: Output VAT / Input VAT / Net VAT)
---------------------------------------------------------------- */
/* English: 3-column responsive grid — 1 col on mobile, 2 col on tablet, 3 col on desktop */
/* Bangla: ৩-কলাম রেসপন্সিভ গ্রিড — মোবাইলে ১ কলাম, ট্যাবলেটে ২ কলাম, ডেস্কটপে ৩ কলাম */
.vat-summary-grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 18px;
}
@media (min-width: 640px) {
.vat-summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 992px) {
.vat-summary-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* English: Generic summary card base — white bg, thick left border accent, rounded shadow */
/* Bangla: জেনেরিক সারাংশ কার্ড বেস — সাদা ব্যাকগ্রাউন্ড, পুরু বাম বার্ডার অ্যাক্সেন্ট, রাউন্ড শ্যাডো */
.vat-summary-card {
background-color: #ffffff;
border-radius: 10px;
padding: 12px 16px;
border-left: 4px solid #6366f1;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.vat-summary-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}
/* English: Indigo-tinted variant — VAT Output card (collected from customers) */
/* Bangla: ইন্ডিগো টিন্টেড ভেরিয়েন্ট — VAT Output কার্ড (ক্রেতাদের নিকট থেকে সংগৃহীত) */
.vat-summary-card.vat-summary-output {
border-left-color: #4f46e5;
background: linear-gradient(135deg, #ffffff 0%, #eef2ff 100%);
}
/* English: Emerald-tinted variant — VAT Input card (paid to suppliers) */
/* Bangla: এমারাল্ড টিন্টেড ভেরিয়েন্ট — VAT Input কার্ড (সাপ্লায়ারকে পরিশোধিত) */
.vat-summary-card.vat-summary-input {
border-left-color: #059669;
background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%);
}
/* English: Red-tinted variant — Net VAT Payable (we owe the authority) */
/* Bangla: লাল টিন্টেড ভেরিয়েন্ট — Net VAT Payable (আমরা কর্তৃপক্ষকে বকেয়া আছে) */
.vat-summary-card.vat-summary-payable {
border-left-color: #dc2626;
background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
}
/* English: Amber-tinted variant — Net VAT Credit (authority owes us) */
/* Bangla: অ্যাম্বার টিন্টেড ভেরিয়েন্ট — Net VAT Credit (কর্তৃপক্ষ আমাদেরকে বকেয়া আছে) */
.vat-summary-card.vat-summary-refund {
border-left-color: #d97706;
background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
}
/* English: Summary card label row — icon + caption text, indigo */
/* Bangla: সারাংশ কার্ডের লেবেল রো — আইকন + ক্যাপশন টেক্সট, ইন্ডিগো রঙ */
.vat-summary-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #4338ca;
margin-bottom: 6px;
}
.vat-summary-input .vat-summary-label {
color: #047857;
}
.vat-summary-payable .vat-summary-label {
color: #b91c1c;
}
.vat-summary-refund .vat-summary-label {
color: #b45309;
}
/* English: Summary meta row (invoice count / line items) */
/* Bangla: সারাংশ মেটা রো (চালান সংখ্যা / লাইন আইটেম সংখ্যা) */
.vat-summary-meta {
font-size: 11px;
color: #64748b;
margin-bottom: 8px;
}
/* English: Large amount display — 26px font, bold, dark slate */
/* Bangla: বড় অ্যামাউন্ট ডিসপ্লে — ২৬px ফন্ট, বোল্ড, গাঢ় স্লেট */
.vat-summary-amount {
font-size: 20px;
font-weight: 800;
color: #0f172a;
letter-spacing: 0.01em;
line-height: 1.1;
}
/* English: Clickable link styling for invoice numbers */
/* Bangla: ইনভয়েস নাম্বারের জন্য ক্লিকেবল লিংক স্টাইলিং */
.vat-invoice-link {
text-decoration: underline;
color: #4f46e5;
font-weight: 600;
transition: color 0.15s ease-in-out;
}
.vat-invoice-link:hover {
color: #312e81;
}
.vat-summary-payable .vat-summary-amount {
color: #991b1b;
}
.vat-summary-refund .vat-summary-amount {
color: #92400e;
}
/* ----------------------------------------------------------------
3. Tab Navigation (2 buttons: VAT Output = indigo / VAT Input = emerald)
---------------------------------------------------------------- */
/* English: Row holding the tab switch buttons — flex wrap with gap, no border */
/* Bangla: ট্যাব সুইচ বাটন ধারণকারী রো — ফ্লেক্স র্যাপ, গ্যাপ সহ, কোনো বর্ডার নেই */
.vat-tabs-nav {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
padding: 10px;
background: #f8fafc;
border-radius: 12px;
border: 1px solid #e2e8f0;
}
/* English: Base tab button — pill-like rounded, semi-bold, cursor pointer */
/* Bangla: বেস ট্যাব বাটন — পিল-এর মতো রাউন্ড, সেমি-বোল্ড, কার্সর পয়েন্টার */
.vat-tab-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
font-size: 14px;
font-weight: 600;
color: #334155;
background-color: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 999px;
cursor: pointer;
transition: all 0.18s ease;
white-space: nowrap;
line-height: 1.2;
user-select: none;
-webkit-user-select: none;
}
.vat-tab-btn:hover {
background-color: #f1f5f9;
border-color: #94a3b8;
color: #0f172a;
}
/* English: Indigo tab — "VAT Output - Sales Invoices" */
/* Bangla: ইন্ডিগো ট্যাব — "VAT Output - Sales Invoices" */
.vat-tab-btn.vat-tab-output {
border-color: #c7d2fe;
color: #4338ca;
background-color: #eef2ff;
}
.vat-tab-btn.vat-tab-output:hover {
border-color: #818cf8;
background-color: #e0e7ff;
}
/* English: Emerald tab — "VAT Input - Purchase Invoices" */
/* Bangla: এমারাল্ড ট্যাব — "VAT Input - Purchase Invoices" */
.vat-tab-btn.vat-tab-input {
border-color: #a7f3d0;
color: #047857;
background-color: #ecfdf5;
}
.vat-tab-btn.vat-tab-input:hover {
border-color: #34d399;
background-color: #d1fae5;
}
/* English: Active tab state — solid gradient, white text, drop shadow */
/* Bangla: সক্রিয় ট্যাবের স্টেট — সলিড গ্র্যাডিয়েন্ট, সাদা টেক্সট, ড্রপ শ্যাডো */
.vat-tab-btn.active {
color: #ffffff !important;
border-color: transparent !important;
box-shadow: 0 8px 18px -6px rgba(30, 41, 59, 0.2);
}
.vat-tab-btn.vat-tab-output.active {
background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%) !important;
}
.vat-tab-btn.vat-tab-input.active {
background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
}
/* English: Count badge inside each tab button (pill, right-aligned, translucent) */
/* Bangla: প্রতিটি ট্যাব বাটনের ভেতরের কাউন্ট ব্যাজ (পিল, ডান-পাশ, ট্রান্সলুসেন্ট) */
.vat-tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 20px;
padding: 0 8px;
font-size: 11px;
font-weight: 700;
border-radius: 999px;
background-color: rgba(255, 255, 255, 0.22);
color: inherit;
margin-left: 2px;
}
.vat-tab-btn:not(.active) .vat-tab-badge.vat-tab-output-badge {
background-color: #c7d2fe;
}
.vat-tab-btn:not(.active) .vat-tab-badge.vat-tab-input-badge {
background-color: #a7f3d0;
}
/* ----------------------------------------------------------------
4. Tab Panels (hide inactive; show only active)
---------------------------------------------------------------- */
/* English: By default all panels are hidden; .active makes it visible */
/* Bangla: ডিফল্টে সব প্যানেল লুকোচুরি; .active দিলে দেখা যায় */
.vat-tab-panel {
display: none;
}
.vat-tab-panel.active {
display: block;
animation: vat-tab-fadein 0.22s ease-out;
-webkit-animation: vat-tab-fadein 0.22s ease-out;
}
@keyframes vat-tab-fadein {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@-webkit-keyframes vat-tab-fadein {
from {
opacity: 0;
-webkit-transform: translateY(4px);
}
to {
opacity: 1;
-webkit-transform: translateY(0);
}
}
/* ----------------------------------------------------------------
5. Subtotals Row — inside each tab: 7 summary items in horizontal flex
---------------------------------------------------------------- */
/* English: Horizontal flex wrap row for the 7 subtotal chips (per tab) */
/* Bangla: ৭টি সাবটোটাল চিপের (প্রতি ট্যাবে) জন্য অনুভূমিক ফ্লেক্স র্যাপ রো */
.vat-subtotals-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 14px 16px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
}
/* English: Single subtotal chip — label (small cap) on top, value bold below */
/* Bangla: একক সাবটোটাল চিপ — উপর ছোট ক্যাপ লেবেল, নিচে বোল্ড ভ্যালু */
.vat-subtotals-item {
display: flex;
flex-direction: column;
gap: 3px;
padding: 8px 14px;
background-color: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
min-width: 130px;
flex: 1 1 130px;
}
.vat-subtotals-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #64748b;
}
.vat-subtotals-value {
font-size: 15px;
font-weight: 700;
color: #0f172a;
line-height: 1.2;
}
.vat-subtotals-value.vat-subtotals-vat {
color: #4338ca;
}
.vat-subtotals-value.vat-subtotals-grand {
color: #0f172a;
font-weight: 800;
font-size: 16px;
}
/* ----------------------------------------------------------------
6. Report Table — consistent styling for both sales/purchase tables
---------------------------------------------------------------- */
/* English: Wrap table to add slight border-radius + shadow to the entire table block */
/* Bangla: পুরো টেবিল ব্লকে হালকা রাউন্ড + শ্যাডো যোগ করতে টেবিল র্যাপ */
.erp-table-wrap {
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* English: VAT-report specific table — compact row padding for dense data */
/* Bangla: VAT রিপোর্ট-নির্দিষ্ট টেবিল — ঘন ডেটার জন্য কম্প্যাক্ট রো প্যাডিং */
.vat-report-table thead th {
background-color: #f1f5f9;
color: #0f172a;
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 2px solid #cbd5e1;
padding: 12px 10px;
}
.vat-report-table tbody td {
padding: 6px 10px;
font-size: 13px;
vertical-align: middle;
}
/* English: Hover effect for table rows to clearly indicate cursor position */
/* Bangla: কার্সার কোথায় আছে তা সহজে বুঝতে টেবিল রো-এর জন্য হোভার ইফেক্ট */
.vat-report-table tbody tr {
transition: background-color 0.15s ease-in-out;
}
.vat-report-table tbody tr:hover td {
background-color: #f1f5f9 !important;
}
/* English: Column highlight for VAT output/input amounts — indigo text, bold */
/* Bangla: VAT আউটপুট/ইনপুট পরিমাণের জন্য কলাম হাইলাইট — ইন্ডিগো টেক্সট, বোল্ড */
.vat-report-col-vat {
color: #4338ca;
font-weight: 700;
}
/* English: Small muted text row beneath invoice no / customer (e.g. Ref: no, phone) */
/* Bangla: চালান নং / কাস্টমারের নিচে ছোট muted টেক্সট রো (যেমন Ref: নং, ফোন) */
.vat-report-muted {
font-size: 11px;
color: #94a3b8;
margin-top: 2px;
line-height: 1.3;
}
/* English: Item chips row — inline-flex wraps item names + qty badges */
/* Bangla: আইটেম চিপস রো — inline-flex দিয়ে আইটেম নাম + পরিমাণ ব্যাজ */
.vat-report-items {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 4px;
margin-top: 4px;
}
.vat-report-item-chip {
display: inline-block;
padding: 2px 8px;
font-size: 10px;
font-weight: 500;
background: #eef2ff;
color: #4338ca;
border-radius: 999px;
border: 1px solid #c7d2fe;
line-height: 1.5;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vat-report-item-chip.vat-report-more {
background: #f1f5f9;
border-color: #cbd5e1;
color: #475569;
font-weight: 600;
}
/* English: Paid / Due columns — green paid, red due */
/* Bangla: Paid / Due কলাম — Paid সবুজ, Due লাল */
.vat-status-paid {
color: #047857;
font-weight: 700;
}
.vat-status-due {
color: #b91c1c;
font-weight: 700;
margin-top: 2px;
font-size: 12px;
}
/* English: Payment status pill badge — Paid/Partial/Unpaid colours */
/* Bangla: পেমেন্ট স্ট্যাটাস পিল ব্যাজ — Paid/Partial/Unpaid রঙ অনুযায়ী */
.vat-status-badge {
display: inline-block;
padding: 4px 10px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
border-radius: 999px;
line-height: 1.2;
}
.vat-status-badge.vat-status-paid {
background-color: #d1fae5;
color: #047857;
border: 1px solid #a7f3d0;
}
.vat-status-badge.vat-status-partial,
.vat-status-badge.vat-status-partially-paid {
background-color: #fef3c7;
color: #b45309;
border: 1px solid #fde68a;
}
.vat-status-badge.vat-status-unpaid,
.vat-status-badge.vat-status-due {
background-color: #fee2e2;
color: #b91c1c;
border: 1px solid #fecaca;
}
.vat-status-badge.vat-status-returned {
background-color: #e0e7ff;
color: #3730a3;
border: 1px solid #c7d2fe;
}
/* English: Empty state — centered icon + message when no rows exist */
/* Bangla: এম্পটি স্টেট — কোনো রো না থাকলে সেন্টার আইকন + মেসেজ */
.vat-report-empty {
padding: 60px 20px !important;
color: #64748b;
background-color: #f8fafc;
}
.vat-report-empty-icon {
display: inline-block;
font-size: 48px;
margin-bottom: 12px;
color: #cbd5e1;
}
/*
* English: Ensure invoice product list has no extra background during print, maintaining plain white background
* Bangla: ইনভয়েস প্রোডাক্ট লিস্ট প্রিন্ট করার সময় কোনো অতিরিক্ত ব্যাকগ্রাউন্ড যেন না থাকে, শুধুমাত্র সাদা ব্যাকগ্রাউন্ড থাকে
*/
@media print {
#printable-area .table-erp,
#printable-area .table-erp tbody tr,
#printable-area .table-erp tbody tr:nth-child(odd),
#printable-area .table-erp tbody tr:nth-child(even),
#printable-area .table-erp tbody tr:hover,
#printable-area .table-erp td,
#printable-area .table-erp th,
.invoice-items-container .table-erp,
.invoice-items-container .table-erp tbody tr,
.invoice-items-container .table-erp tbody tr:nth-child(odd),
.invoice-items-container .table-erp tbody tr:nth-child(even),
.invoice-items-container .table-erp tbody tr:hover,
.invoice-items-container .table-erp td,
.invoice-items-container .table-erp th {
background-color: #ffffff !important;
background: none !important;
}
}
.delivery-slip .text-right { display: none !important; }
.delivery-slip .totals .total-row { display: none !important; }
.delivery-slip .totals .grand-total-row { display: flex !important; }
/* English: Pop-in modal scaling animation for confirmation dialogues */
/* Bangla: কনফার্মেশন ডায়ালগের জন্য পপ-ইন স্কেলিং এনিমেশন */
@keyframes popIn {
0% { transform: scale(0.9); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.animate-pop {
animation: popIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/*
English: Dedicated high-contrast button styling classes for Asset Details page (Back, PDF, Revert Disposal, Download).
Bangla: এসেট ডিটেইলস পেইজের জন্য পৃথক হাই-কনট্রাস্ট বাটন স্টাইলিং ক্লাস (ব্যাক, পিডিএফ, রিভার্ট ডিসপোজাল, ডাউনলোড)।
*/
.btn-asset-back {
background-color: #0369a1 !important;
border-color: #0369a1 !important;
color: #ffffff !important;
}
.btn-asset-back:hover {
background-color: #0284c7 !important;
border-color: #0284c7 !important;
color: #ffffff !important;
}
.btn-asset-pdf {
background-color: #e11d48 !important;
border-color: #e11d48 !important;
color: #ffffff !important;
}
.btn-asset-pdf:hover {
background-color: #be123c !important;
border-color: #be123c !important;
color: #ffffff !important;
}
.btn-asset-revert {
background-color: #d97706 !important;
border-color: #d97706 !important;
color: #ffffff !important;
}
.btn-asset-revert:hover {
background-color: #b45309 !important;
border-color: #b45309 !important;
color: #ffffff !important;
}
.btn-asset-download {
background-color: #059669 !important;
border-color: #059669 !important;
color: #ffffff !important;
}
.btn-asset-download:hover {
background-color: #047857 !important;
border-color: #047857 !important;
color: #ffffff !important;
}