/* Modern Vanilla CSS for Web CRM */
:root {
    --primary: #4F46E5;
    --primary-hover: #4338CA;
    --background: #fafafe;
	--table-background:rgb(242, 242, 246);
    --text-main: #111827;
    --text-muted: rgba(105, 105, 129, 0.75);
    --text-secondary: #77778b;
    --border: #EEEEF3;
    --error-color: #EF4444;
    --success: #009966;
	--radius:6px;
	--big-radius:0.625rem;
	--xs-spacer:8px;
	--s-spacer:16px;
	--m-spacer:24px;
	--l-spacer:32px;
	--xl-spacer:48px;
	--xs-text:12px;
	--s-text:14px;
	--m-text:18px;
	--l-text:32px;
    --shadow: 0px 5px 10px rgba(2, 2, 76, 0.02);
    --transition: all 0.2s ease-in-out;
	--box:250px;
	--indigo:#7008E7;
	--error:#f00;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background-color:var(--background);line-height:1.5;min-height:100vh;padding:0;margin:0;overflow-x:hidden;font-size:15px}
body:not(.login){padding-left:var(--box);padding-top:50px}
input,select,button{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.welcome{font-weight:500}
.s-12{width:12px;height:12px}
.s-14{width:14px;height:14px}
.s-16{width:16px;height:16px}
.s-18{width:18px;height:18px}
.s-36{width:36px;height:36px}
.s-48{width:48px;height:48px}
.flex{display:flex}
.acenter{align-items:center}
.astart{align-items:flex-start}
.fcenter{justify-content:center}
.fspace{justify-content:space-between}
.fend{justify-content:flex-end}
.fwrap{flex-wrap:wrap}
.flex1{flex:1}
.fgap-xs{gap:var(--xs-spacer)}
.fgap-s{gap:var(--s-spacer)}
.fgap-m{gap:var(--m-spacer)}
.fgap-l{gap:var(--l-spacer)}
.logo img{width:100%;height:auto;margin:var(--s-spacer) 0}
.sidebar{padding:0 30px;background-color:#FFF;border-right:1px solid var(--border);margin-top:0;z-index:1001;position:fixed;top:0;bottom:0;left:0;-webkit-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease;width:var(--box)}
h1,h2,h3{font-weight:500}
.userMenu button{background:transparent;border:none;outline:none}
nav a,.userMenu button,.userMenu a{line-height:var(--l-spacer);display:flex;cursor:pointer;align-items:center;gap:var(--xs-spacer);font-weight:600;color:var(--text-main);text-decoration:none;width:100%;border-radius:var(--radius);padding:0 var(--xs-spacer);margin-bottom:var(--xs-spacer);font-size:var(--s-text);-webkit-transition:var(--transition);-ms-transition:var(--transition);transition:var(--transition)}
.userMenu button,.userMenu a{margin-bottom:0}
header{padding:0 20px;height:50px;z-index:999;background:#FFF;position:fixed;top:0;right:0;left:var(--box);-webkit-transition:var(--transition);-ms-transition:var(--transition);transition:var(--transition);border-bottom:1px solid var(--border)}
svg{fill:var(--text-main);-webkit-transition:var(--transition);-ms-transition:var(--transition);transition:var(--transition)}
.selected{color:var(--primary)!important;background:var(--background)!important}
.selected svg{fill:var(--primary)}
.container{width:100%;padding:var(--s-spacer) var(--m-spacer);max-width:100%!important}
.breadcrumbs{margin:10px 0 0;font-size:var(--xs-text);opacity:.6}
.iconLink{display:block;line-height:1}
h1{line-height:1;font-size:2rem!important;font-weight:500}
.card{padding:1.25rem;background-color:#FFF;transition:var(--transition);position:relative;border-radius:var(--big-radius);border:1px solid var(--border);box-shadow:var(--shadow);color:inherit}
.dashDetails{line-height:1.25}
.iconDashboard{display:block;position:relative;width:50px;height:50px;border-radius:50%;background:#f5f5fc}
.iconDashboard svg{width:20px;height:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);fill:var(--primary)}
.iconDashboard.green{background:#f0f9f6}
.iconDashboard.green svg{fill:var(--success)}
.iconDashboard.orange{background:#fefaf0}
.iconDashboard.orange svg{fill:#F5A70D}
.iconDashboard.purple{background:#f6f0fe}
.iconDashboard.purple svg{fill:#7008E7}
.smallTitle{display:block;font-size:var(--s-text);font-weight:600;color:var(--text-muted)}
.dashData{font-size:var(--l-text);font-weight:600}
.form-control{display:block;width:100%;padding:.532rem 1.2rem;font-size:.875rem;font-weight:500;line-height:1.6;color:var(--text-main);appearance:none;background-color:#fff;background-clip:padding-box;border:1px solid var(--border);border-radius:var(--radius);transition:var(--transition)}
.form-control:focus{border-color:var(--primary);outline:0;box-shadow: 0 0 0 1px var(--primary)}
select.form-control{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 8px center;background-size:16px 12px;padding-right:26px}
.btn,.callto{white-space:nowrap;height:42px;line-height:1;border:1px solid;border-color:inherit;border-radius:var(--radius);background:var(--primary);color:#fff;font-weight:500;padding:0 var(--s-spacer);transition:var(--transition);font-size:var(--s-text);display:inline-flex;gap:var(--xs-spacer);align-items:center;text-align:center;justify-content:center}
.btn svg{fill:#fff}
.inverted svg{fill:var(--primary)}
.btn-small{height:30px;padding:0 var(--xs-spacer);font-size:var(--xs-text)}
.inverted{background:#fff;color:var(--primary)}
.mb-s{margin-bottom:var(--s-spacer)}
.mt-l{margin-top:var(--l-spacer)}
table{width:100%;border-collapse:collapse}
table th{background:var(--table-background);font-weight:600;font-size:var(--s-text)}
table th:first-child{border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius)}
table th:last-child{border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius)}
table th,table td{text-align:left;padding:var(--xs-spacer)}
.productList img{width:80px;height:80px;border-radius:var(--radius)}
button:disabled{color:var(--text-muted)!important;background:var(--border)!important;border-color:var(--border)}
label{margin-bottom:4px;font-size:var(--xs-text);display:block;text-align:left;font-weight:600}
.allowScroll{width:100%;max-height:80vh;overflow-y:auto;position:relative;padding-right:10px;padding-left:6px}
.allowScroll::-webkit-scrollbar{width:6px}
.allowScroll::-webkit-scrollbar-track{background:var(--background)}
.allowScroll::-webkit-scrollbar-thumb{background:var(--border)}
.popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;align-items:center;justify-content:center;z-index:10000}
.popup .card{max-width:800px}
.popupHeader{padding-bottom:var(--s-spacer);margin-bottom:var(--s-spacer);border-bottom:1px solid var(--border)}
.popupArea{padding-top:var(--s-spacer);margin-top:var(--s-spacer);border-top:1px solid var(--border);margin-bottom:var(--xs-spacer)}
.closeButton{background:none;border:none;outline:none;width:40px;height:40px;font-size:24px;line-height:24px;text-align:center;cursor:pointer}
.full{width:100%}
.half-gs{width:calc((100% - var(--s-spacer))/2)}
.three-gs{width:calc((100% - 2*var(--s-spacer))/3)}
.four-gs{width:calc((100% - 3*var(--s-spacer))/4)}
.half-gl{width:calc((100% - var(--l-spacer))/2)}
.three-gl{width:calc((100% - 2*var(--l-spacer))/3)}
.four-gl{width:calc((100% - 3*var(--l-spacer))/4)}
.half-gm{width:calc((100% - var(--m-spacer))/2)}
.three-gm{width:calc((100% - 2*var(--m-spacer))/3)}
.four-gm{width:calc((100% - 3*var(--m-spacer))/4)}
input[type=file]{cursor:pointer;position:relative;overflow:hidden;padding-left:140px}
input::file-selector-button{background:var(--background);pointer-events:none;border-color:inherit;opacity:0;border-style:solid;border-width:0;margin:-.532rem -1.2rem;transition:var(--transition);text-indent:-9999px;overflow:hidden;position:relative}
input[type=file]:before{content:"Alege fisier";display:block;position:absolute;left:0;top:0;z-index:2;background:var(--background);height:100%;padding:0;line-height:40px;width:110px;text-align:center}
.view-product-link strong{font-weight:600;max-width:480px;display:block;text-wrap-style:pretty}
.btn-white svg{fill:var(--text-main)}
.loginContainer{width:90%;max-width:400px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center}
.relative{position:relative}
.loginPage{height:100vh}
.loginContainer img{max-width:200px;margin:0 auto var(--m-spacer);display:block}
.smallText{font-size:var(--s-text)}
.loginContainer p{opacity:.7;line-height:1.2;margin:0 0 var(--s-spacer)}

.whiteIcon{fill:#fff}
.jobActive{color:var(--text-secondary);font-size:var(--s-text);
    padding: var(--s-spacer) 0;
    display: block;
    border-bottom: 1px solid var(--border);}
	.jobActive:first-child{border-top: 1px solid var(--border);}
.loggedTime{    font-size: var(--xs-text);
color:var(--text-secondary);
    text-align: center;}
.jobName{ color: var(--text-main);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--s-text);}
	.jobInside{    padding-left: var(--xs-spacer);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius);}
	
.specialCard{background:#f5f5fc;border-radius:var(--radius)}	
.workingTasks{background:#f6f0fe}
.completedTasks{background:#f0f9f6}
.taskBlock{    margin: var(--s-spacer);
    border-radius: var(--radius);
    background: #fff;
    padding: var(--s-spacer);}
.statusPill{background:#f5f5fc;color:var(--primary);border-raiuds:4px;padding:2px 8px;font-weight:500;font-size:var(--s-text)}	
.statusPill.in_progress{background:#f6f0fe;color:var(--indigo)}	
.statusPill.completed{background:#f0f9f6;color:var(--success);}	
	
	
	.callto.error{background:var(--error);border-color:var(--error)}
@media (min-width: 1080px) {
.btn,.callto{cursor:pointer}
.btn:hover,.callto:hover{background:var(--primary-hover);color:#fff}
.inverted:hover{border-color:var(--primary)}
nav a:hover,.userMenu button:hover,.userMenu a:hover{color:var(--primary);background:var(--background)}
nav a:hover svg,.userMenu button:hover svg,.userMenu a:hover svg{fill:var(--primary)}
.inverted:hover svg{fill:#fff}
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(2px);
}
.modal {
    background: #fff;
    padding: 1.5rem;
    border-radius: var(--big-radius);
    width: 100%;
    max-width: 500px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.modal-header { border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 15px; }
.close-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; }
.hidden { display: none !important; }
.input-full { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); margin-top: 5px; }
.btn-block { width: 100%; display: block; }
.m-b-15 { margin-bottom: 15px; }
.m-b-20 { margin-bottom: 20px; }
.m-t-15 { margin-top: 15px; }
.m-t-20 { margin-top: 20px; }
.bg-grey { background: #f3f4f6; }
.bg-red { background: var(--error-color); color: white; }
.bg-green { background: var(--success); color: white; }
.badge { padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: 600; }
.text-right { text-align: right; }
.c-red { color: var(--error-color); }
.c-grey { color: var(--text-muted); }