/*=========================================================
 ERP UI FRAMEWORK
 File        : erp_core.css
 Version     : 1.0
 Purpose     : Core Variables & Global ERP Standards
=========================================================*/

/*=========================================================
 ROOT VARIABLES
=========================================================*/

:root{

    /* Typography */
    --erp-font-family:"Segoe UI",Tahoma,Arial,sans-serif;
    --erp-font-size:12px;
    --erp-font-size-small:11px;
    --erp-font-size-large:14px;
    --erp-page-title-size:16px;

    --erp-h1-size:24px;
    --erp-h2-size:20px;
    --erp-h3-size:18px;
    --erp-h4-size:16px;
    --erp-h5-size:14px;
    --erp-h6-size:13px;

    /* Font Weight */
    --erp-font-normal:400;
    --erp-font-medium:500;
    --erp-font-bold:600;

    /* Form Controls */
    --erp-control-height:30px;
    --erp-control-padding:3px 8px;
    --erp-control-font-size:12px;
    --erp-label-margin:2px;

    /* Buttons */
    --erp-button-height:30px;
    --erp-action-button-size:28px;

    /* Grid */
    --erp-grid-header-height:30px;
    --erp-grid-row-height:28px;
    --erp-grid-cell-padding:4px 8px;

    /* Border */
    --erp-border-radius:4px;
    --erp-border-color:#d9d9d9;
    --erp-border-hover:#bfbfbf;
    --erp-border-focus:#86b7fe;

    /* Shadows */
    --erp-shadow-sm:0 1px 2px rgba(0,0,0,.05);
    --erp-shadow-md:0 2px 6px rgba(0,0,0,.08);
    --erp-shadow-lg:0 6px 12px rgba(0,0,0,.12);

    /* Spacing */
    --erp-row-gap:6px;
    --erp-section-gap:12px;
    --erp-card-padding:12px;

    /* Transition */
    --erp-transition-fast:all .15s ease;
    --erp-transition:all .2s ease;
    --erp-transition-slow:all .3s ease;

    /* Colors */
    --erp-primary:#0d6efd;
    --erp-success:#198754;
    --erp-danger:#dc3545;
    --erp-warning:#ffc107;
    --erp-info:#0dcaf0;
    --erp-secondary:#6c757d;
    --erp-dark:#212529;
    --erp-light:#f8f9fa;

    --erp-text-color:#212529;
    --erp-bg-color:#ffffff;

    --erp-border-light:#e5e5e5;
    --erp-border-dark:#d0d0d0;

    --erp-grid-hover:#f5f9ff;
    --erp-grid-header:#f3f4f6;

    --erp-disabled-bg:#f5f5f5;
    --erp-disabled-text:#6c757d;

    --erp-required:#dc3545;
    
    /* Z-Index */
    --erp-z-dropdown:1000;
    --erp-z-sticky:1020;
    --erp-z-modal:1050;
    --erp-z-tooltip:1080;
}


/*=========================================================
 GLOBAL SETTINGS
=========================================================*/

*{
    box-sizing:border-box;
}

html{
    font-size:var(--erp-font-size);
}

body{
    margin:0;
    padding:0;
    font-family:var(--erp-font-family);
    font-size:var(--erp-font-size);
    font-weight:var(--erp-font-normal);
    color:var(--erp-text-color);
    background:var(--erp-bg-color);
    
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}


/*=========================================================
 TYPOGRAPHY GROUP
=========================================================*/

h1,h2,h3,h4,h5,h6{
    margin:0;
    font-weight:var(--erp-font-bold);
}

h1{font-size:var(--erp-h1-size);}
h2{font-size:var(--erp-h2-size);}
h3{font-size:var(--erp-h3-size);}
h4{font-size:var(--erp-h4-size);}
h5{font-size:var(--erp-h5-size);}
h6{font-size:var(--erp-h6-size);}

small{
    font-size:var(--erp-font-size-small);
}


/*=========================================================
 LINK GROUP
=========================================================*/

a{
    text-decoration:none;
    transition:var(--erp-transition);
}

a:hover{
    text-decoration:none;
}


/*=========================================================
 COMMON UTILITY GROUP
=========================================================*/

.erp-hidden{
    display:none !important;
}

.erp-nowrap{
    white-space:nowrap;
}

.erp-text-left{
    text-align:left;
}

.erp-text-center{
    text-align:center;
}

.erp-text-right{
    text-align:right;
}

.erp-uppercase{
    text-transform:uppercase;
}

.erp-lowercase{
    text-transform:lowercase;
}

.erp-capitalize{
    text-transform:capitalize;
}

/*=========================================================
 NUMBER SERIES
=========================================================*/
.erp-number-series{
	width:100%;
	display:block;
}

.erp-ns-row-1{
	width:100%;
	display:grid !important;
	grid-template-columns:125px 95px 105px 115px 140px minmax(420px,1fr) !important;
	gap:10px !important;
	align-items:end !important;
}

.erp-ns-field{
	width:100%;
	min-width:0;
}

.erp-ns-field .erp-form-label{
	display:block;
	white-space:nowrap;
	margin-bottom:4px;
}

.erp-ns-field .erp-input,
.erp-ns-field .erp-select{
	width:100%;
}

.erp-ns-year-month{
	width:100%;
	display:grid !important;
	grid-template-columns:145px minmax(220px,1fr) !important;
	gap:10px !important;
	align-items:end !important;
}

.erp-ns-year-month-switches{
	width:145px;
	display:flex;
	flex-direction:column;
	gap:1px;
	padding-bottom:1px;
}

.erp-ns-switch-row{
	height:27px;
	display:flex;
	align-items:center;
	justify-content:space-between;
}

.erp-ns-switch-row label{
	margin:0;
	font-size:12px;
	font-weight:var(--erp-font-medium);
	white-space:nowrap;
}

.erp-ns-switch-row .form-check{
	margin:0;
	padding-left:2.5em;
}

.erp-ns-year-month-format{
	width:100%;
	min-width:0;
}

.erp-ns-year-month-format .erp-form-label{
	display:block;
	white-space:nowrap;
	margin-bottom:4px;
}

.erp-ns-year-month-format .erp-select{
	width:100%;
}

/*=========================================================
 NUMBER SERIES ROW 2
=========================================================*/
.erp-ns-row-2{
	width:100%;
	display:grid !important;
	grid-template-columns:minmax(520px,1fr) minmax(520px,1fr) 220px !important;
	gap:10px !important;
	align-items:end !important;
	margin-top:8px;
}

.erp-ns-heading{
	font-size:12px;
	font-weight:var(--erp-font-bold);
	line-height:20px;
	white-space:nowrap;
}

.erp-ns-heading span{
	font-weight:var(--erp-font-medium);
}

/*=========================================================
 NUMBER SERIES ROW 3
=========================================================*/
.erp-ns-row-3{
	width:100%;
	display:grid !important;
	grid-template-columns:minmax(520px,1fr) minmax(520px,1fr) 220px !important;
	gap:10px !important;
	align-items:start !important;
}

.erp-ns-components{
	min-height:38px;
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:4px 16px;
}

.erp-ns-components label{
	display:flex;
	align-items:center;
	gap:4px;
	margin:0;
	font-size:12px;
	font-weight:var(--erp-font-medium);
	white-space:nowrap;
}

.erp-ns-components input{
	margin:0;
}

.erp-ns-sequence{
	width:100%;
	min-width:0;
}

.erp-ns-sequence-box{
	width:100%;
	min-height:38px;
	height:38px;
	display:flex;
	align-items:center;
	gap:4px;
	padding:4px 6px;
	border:1px solid var(--erp-border-color);
	background:var(--erp-disabled-bg);
	overflow-x:auto;
	overflow-y:hidden;
	white-space:nowrap;
}

.erp-ns-sequence-item{
	height:27px;
	display:flex;
	align-items:center;
	gap:4px;
	padding:3px 7px;
	border:1px solid var(--erp-border-color);
	border-radius:3px;
	background:#ffffff;
	font-size:12px;
	font-weight:var(--erp-font-medium);
	cursor:grab;
	user-select:none;
	white-space:nowrap;
	flex:0 0 auto;
}

.erp-ns-sequence-item:active{
	cursor:grabbing;
}

.erp-ns-sequence-item i{
	font-size:10px;
	color:var(--erp-secondary);
}

.erp-ns-preview{
	width:100%;
}

.erp-ns-preview .erp-input{
	width:100%;
	height:38px;
	font-weight:var(--erp-font-bold);
}

/*=========================================================
 NUMBER SERIES REMARKS
=========================================================*/
.erp-ns-remarks{
	width:100%;
	margin-top:8px;
}

.erp-ns-remarks .erp-form-label{
	display:block;
	margin-bottom:4px;
}

.erp-ns-remarks .erp-textarea{
	width:100%;
	height:42px;
	min-height:42px;
}

/*=========================================================
NUMBER SERIES LAYOUT
=========================================================*/
.number-series-layout{
	width:100%;
	padding:4px 8px 8px 8px;
	box-sizing:border-box;
}
.number-series-top{
	display:flex;
	align-items:flex-end;
	width:100%;
	gap:10px;
}
.number-series-field{
	flex:0 0 auto;
}
.number-series-field label,
.number-series-arrange label,
.number-series-enable label,
.number-series-preview label,
.number-series-expression label,
.number-series-remarks label{
	display:block;
	margin:0 0 4px 0;
	font-size:12px;
	font-weight:600;
	line-height:15px;
}
.number-series-field input,
.number-series-field select,
.number-series-preview input,
.number-series-expression input{
	height:30px;
	padding:4px 8px;
	font-size:12px;
	border:1px solid #ced4da;
	border-radius:4px;
	box-sizing:border-box;
}
.prefix-field{
	width:125px;
}
.separator-field{
	width:95px;
}
.length-field{
	width:105px;
}
.start-field{
	width:115px;
}
.reset-field{
	width:145px;
}
.date-format-field{
	width:145px;
}
.number-series-field input,
.number-series-field select{
	width:100%;
}
.number-series-arrange{
	flex:1 1 auto;
	min-width:0;
	border-left:3px solid #111;
	padding-left:10px;
}
.number-series-arrange label span{
	font-weight:400;
}
.number-series-sequence{
	display:flex;
	align-items:center;
	gap:4px;
	width:100%;
	height:38px;
	padding:3px 5px;
	border:1px solid #ced4da;
	background:#f8f9fa;
	box-sizing:border-box;
	overflow:hidden;
}
.number-series-item{
	flex:0 0 auto;
	height:30px;
	display:flex;
	align-items:center;
	padding:0 8px;
	border:1px solid #ced4da;
	border-radius:4px;
	background:#fff;
	font-size:12px;
	white-space:nowrap;
	cursor:move;
	box-sizing:border-box;
}
.number-series-second{
	display:flex;
	align-items:stretch;
	width:100%;
	margin-top:10px;
	gap:10px;
}
.number-series-enable{
	flex:0 0 51%;
	min-width:0;
	border-top:1px solid #111;
	border-right:3px solid #111;
	padding:0 8px 5px 8px;
	box-sizing:border-box;
}
.number-series-checkboxes{
	display:flex;
	align-items:center;
	flex-wrap:nowrap;
	gap:14px;
	height:38px;
	white-space:nowrap;
}
.number-series-checkboxes label{
	display:flex;
	align-items:center;
	gap:4px;
	margin:0;
	font-size:12px;
	font-weight:600;
	white-space:nowrap;
}
.number-series-checkboxes input{
	margin:0;
	width:13px;
	height:13px;
}
.number-series-preview{
	flex:1 1 0;
	min-width:0;
}
.number-series-expression{
	flex:1 1 0;
	min-width:0;
}
.number-series-preview input,
.number-series-expression input{
	width:100%;
}
.number-series-remarks{
	width:100%;
	margin-top:0;
	padding:0 8px;
	box-sizing:border-box;
}
.number-series-remarks textarea{
	width:100%;
	min-height:42px;
	padding:6px 8px;
	font-size:12px;
	border:1px solid #ced4da;
	border-radius:4px;
	resize:vertical;
	box-sizing:border-box;
}

.number-series-arrange{
	border-left:none !important;
	padding-left:10px;
}
.number-series-preview{
	border-left:none !important;
}
.number-series-enable{
	border-top:none !important;
	border-right:none !important;
}