html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{margin:0;font-family:Tahoma,Arial,sans-serif;background:#f4f7fb;direction:rtl;color:#263238;font-size:12px}body.lang-en{direction:ltr}.en{display:none}body.lang-en .ar{display:none}body.lang-en .en{display:inline}body.lang-en .hint-en{display:none}a{color:inherit}.page-head{background:#174a7c;color:white;padding:14px 18px;box-shadow:0 2px 8px #ccd;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.brand{font-size:15px;font-weight:bold}.brand small{display:block;font-size:11px;opacity:.88;margin-top:3px}.head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.lang-switch button{border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);color:#fff;border-radius:6px;padding:7px 10px;cursor:pointer}.logout{background:#c0392b;border:0;border-radius:6px;padding:9px 13px;color:#fff;cursor:pointer;text-decoration:none}.wrap{padding:16px;max-width:1280px;margin:0 auto}.panel{background:white;border:1px solid #d9e1e8;border-radius:10px;padding:12px;margin-bottom:12px;box-shadow:0 2px 8px rgba(0,0,0,.04)}h2,h3{margin-top:0;color:#174a7c}.subtitle{color:#607d8b;margin-top:-8px}.form-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}.field{flex:1 1 220px;min-width:210px}.field.full{flex-basis:100%}.field label,.label{display:block;margin-bottom:5px;font-weight:bold}.hint-en{display:block;color:#607d8b;font-size:12px;font-weight:normal;margin-top:2px}.txt,select,textarea{width:100%;border:1px solid #b9c7d3;border-radius:6px;padding:7px 9px;font-family:Tahoma,Arial,sans-serif;min-height:34px;background:#fff;font-size:12px}.btn{border:0;border-radius:6px;padding:9px 16px;margin:4px;cursor:pointer;font-weight:bold;text-decoration:none;display:inline-block}.btn-save{background:#27ae60;color:white}.btn-edit{background:#2980b9;color:white}.btn-delete{background:#c0392b;color:white}.btn-new{background:#f1c40f;color:#111}.btn-back{background:#f1c40f;color:#111}.msg{display:block;margin-top:10px;color:#c0392b;font-weight:bold}.table-wrap{width:100%;overflow-x:auto}.grid{width:100%;min-width:760px;border-collapse:collapse;background:white}.grid th{background:#174a7c;color:white;padding:7px;white-space:nowrap;font-size:12px}.grid td{border:1px solid #ddd;padding:6px;white-space:nowrap;font-size:12px}.grid tr:nth-child(even){background:#f8fbff}.menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}.menu a{display:block;background:#174a7c;color:#fff;text-decoration:none;padding:9px 10px;border-radius:8px;text-align:center;font-size:12px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:8px}.card{background:white;border:1px solid #d9e1e8;border-radius:10px;padding:12px;box-shadow:0 2px 8px rgba(0,0,0,.05)}.card b{display:block;color:#174a7c}.card .hint-en{margin-top:4px}.card span{display:block;font-size:22px;font-weight:bold;margin-top:8px}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px}.login-box{width:100%;max-width:430px;background:white;border:1px solid #d9e1e8;border-radius:14px;padding:26px;box-shadow:0 8px 24px rgba(23,74,124,.18)}.login-box h2{text-align:center;margin-bottom:5px}.login-logo{text-align:center;color:#174a7c;margin-bottom:22px}.small-note{color:#607d8b;font-size:12px;text-align:center}.toolbar{margin:10px 0}.search-box{max-width:360px;display:inline-block;vertical-align:middle}.ltr{direction:ltr;text-align:left}.mobile-title{display:none}@media(max-width:700px){body{font-size:12px}.page-head{padding:12px}.brand{font-size:14px}.wrap{padding:10px}.panel{padding:10px;border-radius:8px}.field{flex-basis:100%;min-width:100%}.btn{width:100%;text-align:center;margin:5px 0}.head-actions{width:100%;justify-content:space-between}.logout{flex:1;text-align:center}.lang-switch{display:flex;gap:6px;flex:1}.lang-switch button{flex:1}.card span{font-size:20px}.search-box{max-width:100%;width:100%}.grid{font-size:12px}.login-box{padding:22px 18px}.mobile-title{display:block}}
.dashboard-title{font-weight:bold;color:#174a7c;margin:6px 2px 8px;font-size:13px}.welcome-line{font-size:12px}
/* Phase 2 public website */
.public-body{background:#eef5fb;font-size:13px}.public-head{background:linear-gradient(135deg,#123d66,#1f6f9f);color:#fff;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;box-shadow:0 3px 14px rgba(0,0,0,.12)}.public-brand{font-weight:bold;font-size:18px}.public-brand small{display:block;font-size:11px;font-weight:normal;opacity:.9;margin-top:4px}.public-nav{display:flex;gap:7px;flex-wrap:wrap;align-items:center}.public-nav a,.public-nav button{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:white;text-decoration:none;border-radius:20px;padding:7px 11px;font-size:12px;cursor:pointer}.public-hero{min-height:280px;background:linear-gradient(135deg,#174a7c,#35a6bd);color:white;display:flex;align-items:center;justify-content:center;text-align:center;padding:32px 18px}.public-hero h1{color:white;font-size:30px;margin:0 0 10px}.public-hero p{max-width:760px;margin:0 auto 18px;line-height:1.8}.hero-btn{display:inline-block;background:#f1c40f;color:#102a43;text-decoration:none;border-radius:30px;padding:11px 24px;font-weight:bold}.public-wrap{padding:18px;max-width:1180px;margin:0 auto}.public-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:14px}.public-card{background:white;border:1px solid #d9e1e8;border-radius:14px;padding:18px;box-shadow:0 4px 15px rgba(0,0,0,.06)}.public-card b{color:#35a6bd;font-size:22px}.public-card h3{margin:8px 0;color:#174a7c}@media(max-width:700px){.public-head{padding:12px}.public-nav{width:100%}.public-nav a,.public-nav button{flex:1;text-align:center;border-radius:8px}.public-hero{min-height:220px}.public-hero h1{font-size:22px}.public-wrap{padding:10px}.public-card{padding:14px}}
/* PART5: Restore professional login screen + smaller dashboard font */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px;background:linear-gradient(135deg,#eef6ff 0%,#f8fbff 45%,#eaf3f8 100%);font-size:12px}.login-shell{width:100%;max-width:920px;display:flex;min-height:480px;background:#fff;border:1px solid #d8e5ef;border-radius:22px;overflow:hidden;box-shadow:0 18px 45px rgba(23,74,124,.18)}.login-info{flex:1;background:linear-gradient(145deg,#174a7c,#1f7ca8);color:#fff;padding:44px 38px;position:relative;overflow:hidden}.login-info:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.08);right:-80px;top:-70px}.login-info:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08);left:-50px;bottom:-50px}.login-badge{width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:18px;letter-spacing:1px;margin-bottom:24px}.login-info h1{color:#fff;font-size:25px;line-height:1.6;margin:0 0 14px;position:relative}.login-info p{font-size:13px;line-height:1.9;opacity:.94;max-width:390px;position:relative}.login-features{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px;position:relative}.login-features span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:8px 11px;border-radius:999px;font-size:11px}.login-card{width:390px;padding:28px 30px;display:flex;flex-direction:column;justify-content:center;background:#fff}.login-lang{display:flex;justify-content:center;gap:7px;margin-bottom:14px}.login-lang button{background:#eef5fb;color:#174a7c;border:1px solid #cdddea;border-radius:999px;padding:7px 14px}.login-icon{width:54px;height:54px;margin:0 auto 12px;border-radius:18px;background:#eef6ff;color:#174a7c;display:flex;align-items:center;justify-content:center;font-size:26px;border:1px solid #d9e8f5}.login-card h2{text-align:center;margin:0;color:#174a7c;font-size:21px}.login-subtitle{text-align:center;color:#607d8b;margin:8px 0 22px;font-size:12px}.login-field{margin-bottom:13px}.login-field label{font-size:12px;color:#263238}.login-input{height:40px;border-radius:10px;border:1px solid #c8d7e2;background:#fbfdff}.login-input:focus{outline:none;border-color:#2980b9;box-shadow:0 0 0 3px rgba(41,128,185,.12)}.login-btn{width:100%;height:42px;border-radius:11px;background:#1f7ca8;color:#fff;margin:4px 0 0;font-size:13px;box-shadow:0 8px 16px rgba(31,124,168,.22)}.login-btn:hover{background:#174a7c}.login-msg{text-align:center}.small-note{color:#607d8b;font-size:11px;text-align:center;margin-top:18px}.login-box{max-width:none;background:transparent;border:0;box-shadow:none;padding:0}
.dashboard-page{font-size:10.5px}.dashboard-page .page-head{padding:9px 14px}.dashboard-page .brand{font-size:13px}.dashboard-page .brand small{font-size:9px}.dashboard-page .wrap{padding:10px}.dashboard-page .panel{padding:8px;margin-bottom:8px;border-radius:8px}.dashboard-page .welcome-line{font-size:10.5px}.dashboard-page .menu{grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:6px}.dashboard-page .menu a{font-size:10px;padding:7px 6px;border-radius:6px}.dashboard-page .dashboard-title{font-size:11px;margin:4px 2px 6px}.dashboard-page .cards{grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:7px}.dashboard-page .card{padding:7px 8px;border-radius:7px}.dashboard-page .card b{font-size:10px}.dashboard-page .card span{font-size:15px;margin-top:4px}.dashboard-page .logout{padding:6px 9px;font-size:10px}.dashboard-page .lang-switch button{padding:5px 8px;font-size:10px}
@media(max-width:760px){.login-page{padding:12px;align-items:flex-start}.login-shell{display:block;min-height:0;border-radius:18px}.login-info{padding:24px 20px}.login-info h1{font-size:18px}.login-info p{font-size:12px}.login-badge{width:50px;height:50px;border-radius:14px;margin-bottom:12px}.login-card{width:100%;padding:22px 18px}.login-card h2{font-size:19px}.login-input{height:39px}.login-btn{height:41px}.dashboard-page .menu{grid-template-columns:repeat(2,1fr)}.dashboard-page .menu a{font-size:9.5px;padding:7px 5px}.dashboard-page .cards{grid-template-columns:repeat(2,1fr)}.dashboard-page .card{padding:7px}.dashboard-page .card span{font-size:14px}.dashboard-page .page-head{padding:9px}.dashboard-page .wrap{padding:7px}}
@media(max-width:420px){.dashboard-page .menu{grid-template-columns:1fr}.dashboard-page .cards{grid-template-columns:1fr}.login-features span{font-size:10.5px}}
/* =========================================================
PART6: Professional compact forms across all pages
هدف التعديل: تصغير الحقول + وضع عنوان الحقل بجوار الحقل
Applied globally without breaking previous page structure.
========================================================= */
body{
font-size:11px !important;
background:#f3f6fa;
}
.wrap{
max-width:1360px;
padding:10px 12px !important;
}
.panel{
padding:10px !important;
margin-bottom:10px !important;
border-radius:9px !important;
}
h2,h3{
font-size:14px !important;
margin:0 0 10px 0 !important;
text-align:center;
color:#123d66 !important;
}
.subtitle,.welcome-line,.small-note{
font-size:11px !important;
}
.form-row{
display:flex !important;
align-items:center !important;
gap:8px 10px !important;
flex-wrap:wrap !important;
margin-bottom:7px !important;
}
.field{
flex:0 1 300px !important;
min-width:260px !important;
display:flex !important;
align-items:center !important;
gap:6px !important;
margin-bottom:6px !important;
}
.field.full{
flex:1 1 100% !important;
min-width:100% !important;
}
.field label,.label{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
flex:0 0 92px !important;
max-width:112px !important;
min-width:92px !important;
margin:0 !important;
font-size:11px !important;
font-weight:bold !important;
color:#334155 !important;
line-height:1.35 !important;
}
body.lang-en .field label,
body.lang-en .label{
justify-content:flex-start !important;
}
.hint-en{
display:none !important;
}
.txt,select,textarea,
input[type="text"],input[type="password"],input[type="number"],input[type="date"],input[type="email"]{
min-height:28px !important;
height:28px !important;
padding:3px 7px !important;
font-size:11px !important;
border-radius:5px !important;
border:1px solid #bdcbd8 !important;
box-shadow:none !important;
}
textarea,
.txt[rows]{
height:auto !important;
min-height:48px !important;
}
.field .txt,
.field select,
.field textarea{
flex:1 1 auto !important;
width:auto !important;
max-width:190px !important;
}
.field.full .txt,
.field.full textarea,
.field.full select{
max-width:620px !important;
}
.toolbar{
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex-wrap:wrap !important;
gap:6px !important;
margin:8px 0 !important;
}
.btn,input[type="submit"],button{
min-height:28px !important;
padding:5px 11px !important;
font-size:11px !important;
border-radius:6px !important;
line-height:1.3 !important;
}
.page-head{
padding:10px 14px !important;
}
.brand{
font-size:13px !important;
}
.brand small{
font-size:9.5px !important;
}
.head-actions{
gap:6px !important;
}
.lang-switch button{
padding:5px 9px !important;
font-size:10.5px !important;
}
.logout,.btn-back{
padding:6px 11px !important;
font-size:10.5px !important;
}
.search-box{
width:240px !important;
max-width:240px !important;
display:inline-block !important;
vertical-align:middle !important;
}
.msg{
font-size:11px !important;
margin-top:6px !important;
}
.table-wrap{
margin-top:8px !important;
}
.grid{
min-width:720px !important;
font-size:10.5px !important;
}
.grid th{
padding:5px 6px !important;
font-size:10.5px !important;
}
.grid td{
padding:4px 5px !important;
font-size:10.5px !important;
}
.grid input[type="submit"],
.grid a{
font-size:10.5px !important;
}
.cards{
gap:8px !important;
}
.card{
padding:8px 9px !important;
border-radius:8px !important;
}
.card b{
font-size:10.5px !important;
}
.card span{
font-size:16px !important;
margin-top:5px !important;
}
.menu{
grid-template-columns:repeat(auto-fit,minmax(135px,1fr)) !important;
gap:6px !important;
}
.menu a{
font-size:10.5px !important;
padding:7px 8px !important;
border-radius:7px !important;
}
/* Keep login screen elegant and readable */
.login-page{
font-size:12px !important;
}
.login-card .field,
.login-field{
display:block !important;
min-width:100% !important;
flex:1 1 100% !important;
}
.login-card .field label,
.login-field label{
display:block !important;
max-width:none !important;
min-width:0 !important;
margin-bottom:5px !important;
font-size:12px !important;
}
.login-input{
width:100% !important;
max-width:100% !important;
height:40px !important;
min-height:40px !important;
font-size:12px !important;
}
.login-btn{
height:42px !important;
font-size:13px !important;
}
@media(max-width:900px){
.field{
flex:1 1 100% !important;
min-width:100% !important;
}
.field .txt,.field select,.field textarea,
.field.full .txt,.field.full textarea,.field.full select{
max-width:none !important;
}
}
@media(max-width:700px){
.wrap{padding:8px !important;}
.panel{padding:9px !important;}
.form-row{gap:5px !important;}
.field{
display:block !important;
min-width:100% !important;
margin-bottom:7px !important;
}
.field label,.label{
display:block !important;
max-width:none !important;
min-width:0 !important;
margin-bottom:3px !important;
font-size:11px !important;
}
.field .txt,.field select,.field textarea,
.field.full .txt,.field.full textarea,.field.full select,
.search-box{
width:100% !important;
max-width:100% !important;
}
.btn,input[type="submit"],button{
width:100%;
margin:4px 0 !important;
}
.lang-switch button{
width:auto !important;
margin:0 !important;
}
.grid{min-width:680px !important;}
}
/* PART7: Patient number + date calendar button */
.patient-code{
background:#eef6ff !important;
color:#123d66 !important;
font-weight:bold !important;
text-align:center !important;
}
.date-input{
max-width:150px !important;
}
.calendar-btn{
width:30px !important;
min-width:30px !important;
height:28px !important;
min-height:28px !important;
padding:0 !important;
margin:0 3px !important;
border:1px solid #bdcbd8 !important;
border-radius:5px !important;
background:#eef6ff !important;
color:#174a7c !important;
cursor:pointer !important;
line-height:26px !important;
text-align:center !important;
font-size:14px !important;
}
.field .calendar-btn{
flex:0 0 30px !important;
}
body.lang-en .calendar-btn{margin-left:3px !important;margin-right:3px !important;}
@media(max-width:700px){
.date-input{max-width:calc(100% - 38px) !important;width:calc(100% - 38px) !important;display:inline-block !important;}
.calendar-btn{width:32px !important;min-width:32px !important;display:inline-block !important;vertical-align:middle !important;}
}
/* PART8: Professional compact login + inline labels */
.login-shell-compact{
max-width:470px !important;
min-height:0 !important;
display:block !important;
border-radius:22px !important;
overflow:visible !important;
background:linear-gradient(180deg,#ffffff,#f8fbff) !important;
}
.login-card-pro{
width:100% !important;
padding:24px 30px 26px !important;
justify-content:flex-start !important;
border-radius:22px !important;
box-shadow:0 18px 45px rgba(23,74,124,.18) !important;
}
.login-brand-title{
text-align:center !important;
margin:3px 0 14px !important;
padding-bottom:13px !important;
border-bottom:1px solid #e3edf5 !important;
}
.login-brand-title h1{
margin:8px 0 0 !important;
color:#174a7c !important;
font-size:18px !important;
line-height:1.55 !important;
}
.login-badge-top{
margin:0 auto 6px !important;
width:54px !important;
height:54px !important;
border-radius:17px !important;
background:linear-gradient(145deg,#174a7c,#1f7ca8) !important;
color:#fff !important;
box-shadow:0 8px 20px rgba(23,74,124,.22) !important;
}
.login-subtitle,.login-info,.login-features{
display:none !important;
}
.login-inline-field,
.login-card .login-inline-field{
display:flex !important;
align-items:center !important;
gap:10px !important;
min-width:100% !important;
margin-bottom:11px !important;
}
.login-card .login-inline-field label,
.login-inline-field label{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
flex:0 0 105px !important;
min-width:105px !important;
max-width:105px !important;
margin:0 !important;
color:#174a7c !important;
font-weight:bold !important;
font-size:12px !important;
}
.login-inline-field .login-input,
.login-card .login-inline-field .login-input{
flex:1 1 auto !important;
width:auto !important;
max-width:none !important;
height:38px !important;
min-height:38px !important;
border-radius:10px !important;
}
.login-card-pro .login-icon{
margin-bottom:8px !important;
}
.login-card-pro h2{
margin-bottom:16px !important;
}
.login-card-pro .small-note{
margin-top:13px !important;
}
body.lang-en .login-inline-field label{
justify-content:flex-start !important;
}
@media(max-width:520px){
.login-card-pro{padding:20px 16px 22px !important;}
.login-inline-field,.login-card .login-inline-field{display:block !important;}
.login-card .login-inline-field label,.login-inline-field label{
min-width:0 !important;max-width:none !important;display:block !important;margin-bottom:5px !important;
}
.login-inline-field .login-input,.login-card .login-inline-field .login-input{width:100% !important;}
}
/* PART8: Better field/date compact alignment */
.form-row.compact-row{align-items:center !important;}
.field .date-input{display:inline-block !important;vertical-align:middle !important;}
.calendar-btn:hover{background:#dff0ff !important;border-color:#8fb8d8 !important;}
/* PART7: Alerts + printable sample labels */
.alert-card{border-right:4px solid #d97706 !important;background:#fff7ed !important;}
.label-sheet{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;}
.sample-label{width:310px;min-height:150px;background:#fff;border:1px dashed #1f2937;border-radius:8px;padding:10px;font-size:11px;line-height:1.65;box-shadow:0 2px 8px rgba(15,23,42,.08);page-break-inside:avoid;}
.label-title{text-align:center;font-weight:bold;color:#123d66;font-size:13px;margin-bottom:6px;}
.fake-barcode{font-family:'Courier New',monospace;letter-spacing:3px;text-align:center;background:repeating-linear-gradient(90deg,#111 0,#111 2px,#fff 2px,#fff 5px,#111 5px,#111 6px,#fff 6px,#fff 9px);height:38px;color:transparent;border-radius:3px;margin-bottom:5px;overflow:hidden;}
.label-code{text-align:center;font-family:'Courier New',monospace;font-weight:bold;margin-bottom:5px;}
@media print{.no-print,.page-head,.head-actions{display:none !important;}body{background:#fff !important}.wrap{padding:0 !important}.panel{box-shadow:none !important;border:0 !important}.sample-label{box-shadow:none;margin:4px}.label-sheet{gap:6px}}
/* PART7: Advanced modules */
.check-list{margin:8px 20px;line-height:2;color:#334155;font-size:11px}.check-list li{margin-bottom:4px}.cards .card.alert-card{border-color:#f5c6cb;background:#fff8f8}.cards .card.alert-card b{color:#c0392b}
/* =========================================================
Public website completion
========================================================= */
.public-body{background:#eef4f8;color:#203040;min-height:100vh}.public-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;background:rgba(255,255,255,.96);border-bottom:1px solid #d8e5ef;box-shadow:0 8px 24px rgba(28,68,105,.07)}.public-brand{font-weight:800;color:#123d66;font-size:15px;line-height:1.4}.public-brand small{display:block;font-weight:500;color:#607d8b;font-size:10.5px}.public-nav{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.public-nav a,.public-nav button{border:1px solid #cbddea;background:#fff;color:#174a7c;border-radius:999px;padding:7px 10px;text-decoration:none;font-size:10.5px;min-height:0!important}.public-nav a:hover,.public-nav button:hover{background:#174a7c;color:#fff}.public-wrap{max-width:1180px;margin:0 auto;padding:18px 12px}.public-hero{min-height:330px;display:flex;align-items:center;background:linear-gradient(135deg,#123d66,#1f7ca8);color:#fff;border-radius:0 0 34px 34px;padding:48px 28px;position:relative;overflow:hidden}.public-hero:before{content:"";position:absolute;right:-120px;top:-120px;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.08)}.public-hero:after{content:"DNA";position:absolute;left:35px;bottom:18px;font-size:82px;font-weight:900;letter-spacing:8px;color:rgba(255,255,255,.08)}.public-hero h1{font-size:30px!important;text-align:inherit!important;color:#fff!important;margin-bottom:14px!important}.public-hero p{font-size:14px;line-height:1.9;max-width:660px}.hero-btn{display:inline-block;background:#fff;color:#174a7c!important;text-decoration:none;border-radius:999px;padding:12px 22px;font-weight:bold;margin-top:15px;box-shadow:0 10px 20px rgba(0,0,0,.12)}.public-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:16px 0}.public-card{background:#fff;border:1px solid #dce8f2;border-radius:16px;padding:17px;box-shadow:0 8px 24px rgba(20,65,105,.06)}.public-card b{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:12px;background:#eef6ff;color:#174a7c;margin-bottom:8px}.public-card h3{font-size:15px!important;text-align:inherit!important;margin-bottom:7px!important}.public-card p{line-height:1.8;color:#526979}.public-section-title{text-align:center;margin:22px 0 10px}.service-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}.service-pill{background:#fff;border:1px solid #dce8f2;border-radius:14px;padding:13px;text-align:center;font-weight:bold;color:#174a7c}.site-footer{margin-top:26px;padding:18px;text-align:center;color:#607d8b;border-top:1px solid #d8e5ef}.test-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.test-card{background:#fff;border:1px solid #dce8f2;border-radius:15px;padding:15px;box-shadow:0 8px 20px rgba(20,65,105,.05)}.test-meta{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0}.test-meta span{background:#f0f6fb;border:1px solid #d9e8f5;border-radius:999px;padding:5px 9px;color:#36556b}.price-tag{font-size:17px;font-weight:800;color:#174a7c}.faq-item{background:#fff;border:1px solid #dce8f2;border-radius:14px;padding:14px;margin-bottom:10px}.faq-item h3{text-align:inherit!important}.public-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}.public-actions a{text-decoration:none}.portal-box{background:#f7fbff;border:1px dashed #bcd5e8;border-radius:12px;padding:12px;margin:10px 0}.ar{display:inline}.en{display:none}body.lang-en .ar{display:none}body.lang-en .en{display:inline}body.lang-en{direction:ltr;text-align:left}body.lang-ar{direction:rtl;text-align:right}.ltr{direction:ltr;text-align:left}@media(max-width:820px){.public-head{display:block}.public-nav{margin-top:10px}.public-nav a,.public-nav button{width:auto!important}.public-hero{min-height:260px;padding:34px 18px}.public-hero h1{font-size:22px!important}.public-wrap{padding:12px 8px}.public-card{padding:13px}.public-actions .btn,.public-actions a{width:100%!important;text-align:center}}
/* PART Admin Menu: sectioned professional dashboard menu */
.menu-sectioned{
background:linear-gradient(180deg,#ffffff,#f8fbff) !important;
border:1px solid #d7e4ef !important;
}
.menu-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:2px 2px 10px;
border-bottom:1px solid #e3edf5;
margin-bottom:10px;
}
.menu-header b{
display:block;
color:#123d66;
font-size:13px;
}
.menu-header small{
display:block;
color:#607d8b;
margin-top:3px;
font-size:10.5px;
}
.menu-groups{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
gap:10px;
}
.menu-group{
background:#fff;
border:1px solid #dce8f2;
border-radius:12px;
overflow:hidden;
box-shadow:0 4px 14px rgba(15,65,105,.045);
}
.menu-group-title{
display:flex;
align-items:center;
gap:7px;
min-height:34px;
padding:8px 10px;
font-weight:bold;
color:#123d66;
background:#eef6ff;
border-bottom:1px solid #dce8f2;
font-size:11.5px;
}
.menu-group-title .ico{
display:inline-flex;
align-items:center;
justify-content:center;
width:24px;
height:24px;
border-radius:8px;
background:#fff;
box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.menu-links{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:6px;
padding:9px;
}
.menu-sectioned .menu-links a{
display:flex !important;
align-items:center;
justify-content:center;
min-height:30px;
background:#174a7c !important;
color:#fff !important;
text-decoration:none !important;
padding:6px 7px !important;
border-radius:7px !important;
text-align:center !important;
font-size:10.5px !important;
line-height:1.35 !important;
transition:all .15s ease-in-out;
}
.menu-sectioned .menu-links a:hover{
background:#1f7ca8 !important;
transform:translateY(-1px);
box-shadow:0 4px 10px rgba(31,124,168,.18);
}
.master-data .menu-group-title{background:#eef6ff;color:#174a7c;}
.daily-work .menu-group-title{background:#ecfdf5;color:#166534;}
.stored-data .menu-group-title{background:#f5f3ff;color:#5b21b6;}
.finance-data .menu-group-title{background:#fff7ed;color:#9a3412;}
.website-data .menu-group-title{background:#eff6ff;color:#1d4ed8;}
.admin-data .menu-group-title{background:#f8fafc;color:#334155;}
body.lang-en .menu-group-title{justify-content:flex-start;}
@media(max-width:900px){
.menu-groups{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.menu-links{grid-template-columns:1fr;}
}
@media(max-width:520px){
.menu-groups{grid-template-columns:1fr;}
.menu-header{display:block;}
.menu-sectioned .menu-links a{min-height:32px;}
}
/* Dashboard section keys update */
.dashboard-section-keys{margin-top:14px;}
.section-key-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:14px;}
.section-key{display:flex;flex-direction:column;gap:7px;text-decoration:none;color:#10223b;background:#fff;border:1px solid #e4ebf5;border-radius:18px;padding:18px;box-shadow:0 10px 24px rgba(15,35,70,.07);transition:.18s ease;min-height:118px;position:relative;overflow:hidden;}
.section-key:before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:#2f80ed;opacity:.85;}
.section-key:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(15,35,70,.12);border-color:#bcd3f4;}
.section-key .key-icon{font-size:28px;line-height:1;}
.section-key b{font-size:17px;}
.section-key small{color:#66758a;font-size:12px;direction:ltr;text-align:left;}
.section-key.master-data:before{background:#2f80ed;}.section-key.daily-work:before{background:#27ae60;}.section-key.stored-data:before{background:#9b51e0;}.section-key.finance-data:before{background:#f2994a;}.section-key.website-data:before{background:#00a6a6;}.section-key.admin-data:before{background:#4f4f4f;}
.section-page .section-wrap{max-width:1250px;}
.section-hero{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#ffffff,#f4f8ff);}
.section-hero h2{margin:0 0 5px;font-size:24px;color:#10223b;}.section-hero p{margin:0;color:#5c6b80;}
.section-icon{width:62px;height:62px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:#eef5ff;font-size:32px;box-shadow:inset 0 0 0 1px #dbe8fb;}
.section-layout{display:grid;grid-template-columns:270px 1fr;gap:16px;margin-top:16px;align-items:start;}
.section-side{position:sticky;top:12px;padding:14px;}.section-side h3{margin-top:0;font-size:17px;}
.side-link{display:block;text-decoration:none;background:#f7f9fc;color:#13233a;border:1px solid #e4ebf3;border-radius:13px;padding:12px;margin-bottom:9px;transition:.15s ease;}
.side-link:hover{background:#eef5ff;border-color:#bcd3f4;transform:translateX(-3px);}.side-link b{display:block;font-size:14px;}.side-link small{display:block;color:#6b788b;font-size:12px;margin-top:3px;direction:ltr;text-align:left;}
.section-main h3{margin-top:0;}.section-option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.section-option{display:block;text-decoration:none;color:#12223a;border:1px solid #e2eaf4;background:#fff;border-radius:15px;padding:15px;min-height:92px;box-shadow:0 8px 18px rgba(20,42,70,.06);transition:.15s ease;}
.section-option:hover{border-color:#bcd3f4;box-shadow:0 12px 24px rgba(20,42,70,.1);transform:translateY(-2px);}.section-option b{display:block;margin-bottom:8px;font-size:15px;}.section-option span{display:block;color:#65758a;font-size:13px;line-height:1.6;}
.btn-back{background:#ffc83d!important;color:#101828!important;border:0!important;border-radius:12px!important;padding:10px 16px!important;text-decoration:none!important;font-weight:700!important;box-shadow:0 6px 14px rgba(255,200,61,.25)!important;}
.btn-back:hover{filter:brightness(.98);transform:translateY(-1px);}
@media(max-width:820px){.section-layout{grid-template-columns:1fr}.section-side{position:static}.section-hero{align-items:flex-start}.section-key-grid{grid-template-columns:1fr}.page-head{gap:10px}.head-actions{flex-wrap:wrap}}
/* =========================================================
PART: Professional colored section keys + section side menus
الهدف: مفاتيح أقسام بألوان متنوعة + منيو جانبي لكل قسم بلون واضح
========================================================= */
.dashboard-section-keys{
background:linear-gradient(180deg,#ffffff,#f7fbff) !important;
border:1px solid #d8e6f2 !important;
box-shadow:0 10px 28px rgba(15,45,80,.06) !important;
}
.section-key-grid{
grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) !important;
gap:16px !important;
}
.section-key{
color:#fff !important;
border:0 !important;
min-height:132px !important;
padding:20px 18px !important;
border-radius:22px !important;
box-shadow:0 14px 28px rgba(15,35,70,.16) !important;
isolation:isolate;
}
.section-key:before{
content:"" !important;
position:absolute !important;
inset:auto -40px -55px auto !important;
width:145px !important;
height:145px !important;
border-radius:50% !important;
background:rgba(255,255,255,.16) !important;
opacity:1 !important;
}
.section-key:after{
content:"";
position:absolute;
inset:12px 12px auto auto;
width:46px;
height:46px;
border-radius:16px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.28);
z-index:-1;
}
.section-key:hover{
transform:translateY(-5px) !important;
box-shadow:0 18px 34px rgba(15,35,70,.24) !important;
filter:saturate(1.05);
}
.section-key .key-icon{
width:46px;
height:46px;
display:flex;
align-items:center;
justify-content:center;
border-radius:15px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.25);
font-size:25px !important;
}
.section-key b{font-size:17px !important;color:#fff !important;line-height:1.45;}
.section-key small{color:rgba(255,255,255,.86) !important;font-size:11.5px !important;}
.section-key.master-data{background:linear-gradient(135deg,#155e9f,#2196d3) !important;}
.section-key.daily-work{background:linear-gradient(135deg,#0f766e,#22a06b) !important;}
.section-key.stored-data{background:linear-gradient(135deg,#5b21b6,#8b5cf6) !important;}
.section-key.finance-data{background:linear-gradient(135deg,#b45309,#f59e0b) !important;}
.section-key.website-data{background:linear-gradient(135deg,#0369a1,#06b6d4) !important;}
.section-key.admin-data{background:linear-gradient(135deg,#334155,#64748b) !important;}
.section-page .section-side{
overflow:hidden;
padding:0 !important;
border:0 !important;
border-radius:20px !important;
box-shadow:0 14px 30px rgba(15,35,70,.12) !important;
}
.side-title-box{
min-height:86px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:7px;
text-align:center;
padding:16px 12px;
color:#fff;
border-bottom:1px solid rgba(255,255,255,.18);
}
.side-title-box b{
display:block;
font-size:15.5px;
color:#fff;
line-height:1.45;
}
.side-title-box small{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:4px;
min-width:128px;
padding:5px 12px;
border-radius:999px;
background:rgba(255,255,255,.18);
color:rgba(255,255,255,.92);
font-size:10.5px;
font-weight:700;
}
.side-title-icon{
width:42px;
height:42px;
border-radius:15px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.28);
font-size:24px;
}
.section-side .side-link{
margin:9px 11px !important;
border-radius:13px !important;
color:#fff !important;
border:1px solid rgba(255,255,255,.18) !important;
background:rgba(255,255,255,.10) !important;
box-shadow:none !important;
}
.section-side .side-link:hover{
background:rgba(255,255,255,.20) !important;
border-color:rgba(255,255,255,.36) !important;
transform:translateX(-4px);
}
body.lang-en .section-side .side-link:hover{transform:translateX(4px);}
.section-side .side-link b{color:#fff !important;font-size:13px !important;}
.section-side .side-link small{color:rgba(255,255,255,.76) !important;text-align:center !important;direction:ltr;}
.master-section .section-side{background:linear-gradient(180deg,#155e9f,#0f4779) !important;}
.daily-section .section-side{background:linear-gradient(180deg,#0f766e,#14532d) !important;}
.stored-section .section-side{background:linear-gradient(180deg,#6d28d9,#4c1d95) !important;}
.finance-section .section-side{background:linear-gradient(180deg,#b45309,#7c2d12) !important;}
.website-section .section-side{background:linear-gradient(180deg,#0369a1,#155e75) !important;}
.admin-section .section-side{background:linear-gradient(180deg,#334155,#111827) !important;}
.master-section .section-hero{background:linear-gradient(135deg,#ffffff,#edf7ff) !important;}
.daily-section .section-hero{background:linear-gradient(135deg,#ffffff,#ecfdf5) !important;}
.stored-section .section-hero{background:linear-gradient(135deg,#ffffff,#f5f3ff) !important;}
.finance-section .section-hero{background:linear-gradient(135deg,#ffffff,#fff7ed) !important;}
.website-section .section-hero{background:linear-gradient(135deg,#ffffff,#ecfeff) !important;}
.admin-section .section-hero{background:linear-gradient(135deg,#ffffff,#f8fafc) !important;}
.master-section .section-icon{background:#e0f2fe;color:#155e9f;}
.daily-section .section-icon{background:#dcfce7;color:#166534;}
.stored-section .section-icon{background:#ede9fe;color:#6d28d9;}
.finance-section .section-icon{background:#ffedd5;color:#b45309;}
.website-section .section-icon{background:#cffafe;color:#0369a1;}
.admin-section .section-icon{background:#e2e8f0;color:#334155;}
@media(max-width:820px){
.side-title-box{min-height:74px;padding:13px 10px;}
.section-side .side-link{margin:8px 10px !important;}
.section-key{min-height:118px !important;}
}
/* --- Professional first page enhancements for CODE LAB --- */
.home-head{background:rgba(255,255,255,.98)!important}
.brand-with-logo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand-logo-box{width:66px;height:66px;border-radius:16px;background:linear-gradient(135deg,#ffffff,#f7fbff);border:1px solid #d9e6f2;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(18,61,102,.08);padding:5px}
.brand-logo-img{max-width:100%;max-height:100%;border-radius:10px;display:block}
.brand-text{display:flex;flex-direction:column;gap:2px}
.brand-text .ar,.brand-text .en{font-weight:800;color:#123d66;font-size:18px}
.brand-text small .ar,.brand-text small .en{font-size:11.5px;color:#6a8091;font-weight:500}
.hero-professional{background:linear-gradient(135deg,#123d66 0%,#1f6f9f 55%,#2ea3b8 100%)!important;padding:42px 28px 38px!important}
.hero-layout{display:grid;grid-template-columns:1.4fr .9fr;gap:26px;align-items:center;width:100%}
.hero-copy{position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:8px 14px;border-radius:999px;margin-bottom:14px;font-size:12px;font-weight:700;backdrop-filter:blur(4px)}
.title-accent{color:#ffd54f}
.hero-btn-alt{background:#ffd54f!important;color:#163955!important}
.hero-kpis{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hero-kpi{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:11px 14px;min-width:145px;backdrop-filter:blur(5px)}
.hero-kpi strong{display:block;font-size:18px;color:#ffd54f;margin-bottom:3px}
.hero-kpi .ar,.hero-kpi .en{font-size:12px;color:#fff;font-weight:700}
.hero-visual{display:flex;justify-content:center;align-items:center}
.hero-logo-card{background:rgba(255,255,255,.97);border-radius:26px;padding:18px 18px 16px;box-shadow:0 18px 40px rgba(0,0,0,.16);text-align:center;max-width:330px;width:100%;border:1px solid rgba(255,255,255,.8)}
.hero-logo-img{width:100%;max-width:255px;border-radius:18px;display:block;margin:0 auto 14px;border:1px solid #e3edf5}
.hero-logo-card h3{margin:0 0 8px!important;color:#123d66!important;font-size:24px!important;text-align:center!important}
.hero-logo-card p{color:#5d7284;line-height:1.8;margin:0!important}
.stylish-title h2{display:inline-block;margin:0 auto 8px!important;padding:10px 22px;border-radius:999px;background:linear-gradient(135deg,#123d66,#1f6f9f);color:#fff!important;box-shadow:0 8px 20px rgba(18,61,102,.10)}
.stylish-title p{max-width:760px;margin:0 auto 10px;color:#607d8b;line-height:1.8}
.feature-card{transition:transform .2s ease, box-shadow .2s ease}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(20,65,105,.10)}
.highlight-strip{margin-top:8px;margin-bottom:16px}
.highlight-strip .service-pill{background:linear-gradient(180deg,#ffffff,#f5fbff);box-shadow:0 8px 20px rgba(20,65,105,.05)}
.home-panel{padding:24px!important;border-radius:20px;background:linear-gradient(180deg,#ffffff,#f7fbff);border:1px solid #dce8f2;box-shadow:0 10px 28px rgba(20,65,105,.06)}
.home-panel h2{color:#123d66!important;margin-bottom:10px!important}
.home-panel p{line-height:1.9;color:#4f6779}
@media(max-width:980px){
.hero-layout{grid-template-columns:1fr;gap:18px}
.hero-copy,.hero-visual{text-align:center}
.hero-kpis{justify-content:center}
}
@media(max-width:820px){
.brand-logo-box{width:54px;height:54px;border-radius:14px}
.brand-text .ar,.brand-text .en{font-size:16px}
.hero-professional{padding:30px 16px 26px!important}
.hero-badge{font-size:11px;padding:7px 11px}
.hero-kpi{min-width:110px;padding:10px 11px}
.hero-logo-card{padding:14px}
}
/* --- Enhanced separate navigation bar for first page --- */
.home-head{display:block!important;padding:14px 18px 10px!important}
.home-head .brand-with-logo{justify-content:space-between;align-items:center}
.home-head .public-nav{
width:100%;
margin-top:14px;
display:flex;
justify-content:center;
align-items:center;
gap:10px;
flex-wrap:wrap;
background:linear-gradient(135deg,#123d66,#1e77a8);
border:1px solid #d3e2ef;
border-radius:18px;
padding:14px 16px;
box-shadow:0 12px 28px rgba(20,65,105,.10);
}
.home-head .public-nav a,
.home-head .public-nav button{
background:rgba(255,255,255,.14)!important;
border:1px solid rgba(255,255,255,.28)!important;
color:#fff!important;
font-size:15px!important;
font-weight:700!important;
padding:10px 16px!important;
border-radius:14px!important;
min-width:90px;
text-align:center;
box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.home-head .public-nav a:hover,
.home-head .public-nav button:hover{
background:#ffffff!important;
color:#123d66!important;
transform:translateY(-1px);
}
.home-head .public-nav button{cursor:pointer}
@media(max-width:980px){
.home-head .brand-with-logo{justify-content:center}
}
@media(max-width:820px){
.home-head{padding:12px 10px 8px!important}
.home-head .public-nav{padding:10px;gap:8px;border-radius:14px}
.home-head .public-nav a,
.home-head .public-nav button{
flex:1 1 calc(50% - 8px);
min-width:120px;
font-size:14px!important;
padding:10px 12px!important;
border-radius:12px!important;
}
}
@media(max-width:520px){
.home-head .public-nav a,
.home-head .public-nav button{
flex:1 1 100%;
min-width:100%;
}
}
/* --- Clean first page and fixed public menu --- */
.public-head{
position:sticky!important;
top:0!important;
z-index:999!important;
}
.home-head{
position:sticky!important;
top:0!important;
z-index:1000!important;
display:block!important;
padding:12px 18px 10px!important;
background:rgba(255,255,255,.98)!important;
border-bottom:1px solid #d8e5ef!important;
box-shadow:0 10px 24px rgba(18,61,102,.09)!important;
}
.home-head .brand-with-logo{justify-content:center!important;text-align:center!important;margin-bottom:10px!important}
.home-head .public-nav,
.public-head .public-nav{
width:100%;
display:flex;
justify-content:center;
align-items:center;
gap:10px;
flex-wrap:wrap;
background:linear-gradient(135deg,#123d66,#1e77a8);
border:1px solid #d3e2ef;
border-radius:18px;
padding:13px 15px;
box-shadow:0 12px 28px rgba(20,65,105,.12);
}
.home-head .public-nav a,
.home-head .public-nav button,
.public-head .public-nav a,
.public-head .public-nav button{
background:rgba(255,255,255,.14)!important;
border:1px solid rgba(255,255,255,.28)!important;
color:#fff!important;
font-size:15px!important;
font-weight:700!important;
padding:10px 16px!important;
border-radius:14px!important;
min-width:90px;
text-align:center;
box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.home-head .public-nav a:hover,
.home-head .public-nav button:hover,
.public-head .public-nav a:hover,
.public-head .public-nav button:hover{
background:#ffffff!important;
color:#123d66!important;
transform:translateY(-1px);
}
.home-clean-page{
min-height:calc(100vh - 150px);
display:flex;
align-items:center;
justify-content:center;
padding:34px 16px;
background:linear-gradient(180deg,#f4f9fd,#edf5fb);
}
.home-logo-only-card{
background:#fff;
border:1px solid #dce8f2;
border-radius:26px;
padding:28px;
text-align:center;
box-shadow:0 18px 42px rgba(20,65,105,.09);
max-width:520px;
width:100%;
}
.home-clean-logo{
max-width:360px;
width:100%;
border-radius:18px;
border:1px solid #e2edf5;
display:block;
margin:0 auto 16px;
}
.home-logo-only-card h1{margin:0!important;color:#123d66!important;text-align:center!important;font-size:30px!important;letter-spacing:1px}
@media(max-width:820px){
.home-head{padding:10px!important}
.home-head .brand-with-logo{margin-bottom:8px!important}
.home-head .public-nav,.public-head .public-nav{padding:10px;gap:8px;border-radius:14px}
.home-head .public-nav a,.home-head .public-nav button,.public-head .public-nav a,.public-head .public-nav button{
flex:1 1 calc(50% - 8px);
min-width:120px;
font-size:14px!important;
padding:10px 12px!important;
}
.home-logo-only-card{padding:18px;border-radius:20px}
}
@media(max-width:520px){
.home-head .public-nav a,.home-head .public-nav button,.public-head .public-nav a,.public-head .public-nav button{flex:1 1 100%;min-width:100%}
}
/* --- Safe language toggle + professional field labels update --- */
.lang-toggle{
position:fixed !important;
top:10px !important;
left:14px !important;
z-index:9999 !important;
width:auto !important;
min-width:82px !important;
height:auto !important;
min-height:30px !important;
padding:7px 14px !important;
border-radius:999px !important;
border:1px solid #b9d3e8 !important;
background:linear-gradient(135deg,#ffffff,#eef6ff) !important;
color:#123d66 !important;
font-size:13px !important;
font-weight:800 !important;
box-shadow:0 8px 18px rgba(18,61,102,.12) !important;
cursor:pointer !important;
}
body.lang-ar .lang-to-ar{display:none !important;}
body.lang-en .lang-to-en{display:none !important;}
body.lang-ar .lang-to-en,body.lang-en .lang-to-ar{display:inline-block !important;}
.public-nav .lang-toggle,.lang-switch .lang-toggle{margin:0 !important;}
body.lang-ar .public-nav .en,body.lang-ar .menu .en{display:none !important;}
body.lang-en .public-nav .ar,body.lang-en .menu .ar{display:none !important;}
body.lang-ar .public-nav .ar,body.lang-ar .menu .ar{display:inline !important;}
body.lang-en .public-nav .en,body.lang-en .menu .en{display:inline !important;}
/* Field captions are highlighted while inputs remain clean */
.field label,.label,.login-field label{
background:linear-gradient(135deg,#dceeff,#c9e2f7) !important;
color:#123d66 !important;
border:1px solid #b8d4ea !important;
border-radius:8px !important;
padding:6px 9px !important;
min-height:30px !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.65) !important;
}
.field{
background:#fbfdff !important;
border:1px solid #d7e5f1 !important;
border-radius:11px !important;
padding:7px !important;
box-shadow:0 4px 12px rgba(18,61,102,.035) !important;
}
.form-row{
background:#ffffff !important;
border:1px solid #e0ebf4 !important;
border-radius:14px !important;
padding:8px !important;
box-shadow:0 6px 16px rgba(18,61,102,.035) !important;
}
.panel h2,.panel h3{
color:#123d66 !important;
}
.txt,select,textarea,
input[type="text"],input[type="password"],input[type="number"],input[type="date"],input[type="email"]{
background:#ffffff !important;
border-color:#b8cad9 !important;
}
.txt:focus,select:focus,textarea:focus,
input[type="text"]:focus,input[type="password"]:focus,input[type="number"]:focus,input[type="date"]:focus,input[type="email"]:focus{
border-color:#1f7ca8 !important;
box-shadow:0 0 0 3px rgba(31,124,168,.12) !important;
outline:none !important;
}
@media(max-width:700px){
.lang-toggle{top:8px !important;left:8px !important;font-size:12px !important;min-width:74px !important;padding:6px 11px !important;}
.form-row{padding:7px !important;}
.field{padding:6px !important;}
.field label,.label,.login-field label{width:100% !important;max-width:100% !important;margin-bottom:5px !important;}
}
/* --- Update: first page language button + compact Request Test form --- */
.top-language-switch{
position:fixed !important;
top:10px !important;
left:14px !important;
z-index:10050 !important;
}
.top-language-switch .lang-toggle,
.lang-toggle{
position:fixed !important;
top:10px !important;
left:14px !important;
z-index:10050 !important;
width:auto !important;
min-width:88px !important;
min-height:32px !important;
padding:7px 15px !important;
border-radius:999px !important;
border:1px solid #b9d3e8 !important;
background:linear-gradient(135deg,#ffffff,#eef6ff) !important;
color:#123d66 !important;
font-size:13px !important;
font-weight:800 !important;
box-shadow:0 8px 18px rgba(18,61,102,.16) !important;
cursor:pointer !important;
}
body.lang-ar .lang-to-ar{display:none !important;}
body.lang-en .lang-to-en{display:none !important;}
body.lang-ar .lang-to-en,body.lang-en .lang-to-ar{display:inline-block !important;}
.first-entry-page{min-height:100vh !important;padding-top:58px !important;}
.first-entry-actions{margin-top:18px !important;text-align:center !important;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.request-test-page .public-wrap{
max-width:1180px !important;
padding:10px 14px !important;
}
.request-test-page .panel{
padding:10px 12px !important;
margin-bottom:8px !important;
}
.request-test-page .panel h2{
margin:0 0 8px !important;
font-size:18px !important;
text-align:center !important;
}
.request-test-page .form-row{
margin:0 0 6px !important;
padding:5px !important;
gap:6px !important;
border-radius:10px !important;
box-shadow:none !important;
}
.request-test-page .field{
flex:1 1 calc(33.333% - 8px) !important;
min-width:245px !important;
margin:0 !important;
padding:5px 6px !important;
border-radius:9px !important;
display:flex !important;
align-items:center !important;
gap:6px !important;
box-shadow:none !important;
}
.request-test-page .field.full{
flex:1 1 100% !important;
min-width:100% !important;
}
.request-test-page .field label{
flex:0 0 125px !important;
min-width:125px !important;
max-width:125px !important;
margin:0 !important;
padding:5px 7px !important;
min-height:28px !important;
font-size:11px !important;
line-height:1.35 !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
white-space:normal !important;
}
.request-test-page .field.full label{
flex:0 0 125px !important;
}
.request-test-page .field .txt,
.request-test-page .field select,
.request-test-page .field textarea,
.request-test-page input[type="text"],
.request-test-page input[type="email"],
.request-test-page input[type="date"],
.request-test-page input[type="file"]{
flex:1 1 auto !important;
width:100% !important;
max-width:none !important;
min-height:28px !important;
height:28px !important;
padding:3px 7px !important;
font-size:11px !important;
}
.request-test-page textarea,
.request-test-page .field.full textarea{
min-height:42px !important;
height:42px !important;
}
.request-test-page .calendar-btn{
flex:0 0 30px !important;
width:30px !important;
min-width:30px !important;
height:28px !important;
min-height:28px !important;
padding:0 !important;
margin:0 !important;
}
.request-test-page .btn-save{
display:block !important;
margin:8px auto 2px !important;
min-width:180px !important;
}
.request-test-page .msg{
text-align:center !important;
margin-top:6px !important;
}
@media(max-width:900px){
.request-test-page .field{flex:1 1 calc(50% - 8px) !important;min-width:310px !important;}
}
@media(max-width:700px){
.top-language-switch .lang-toggle,.lang-toggle{top:8px !important;left:8px !important;font-size:12px !important;min-width:78px !important;padding:6px 12px !important;}
.request-test-page .public-wrap{padding:8px !important;}
.request-test-page .field{display:block !important;min-width:100% !important;padding:6px !important;}
.request-test-page .field label{display:block !important;width:100% !important;min-width:100% !important;max-width:100% !important;margin-bottom:4px !important;}
.request-test-page .field .txt,.request-test-page .field select,.request-test-page .field textarea{width:100% !important;max-width:100% !important;}
}
/* --- Fix: admin/public navigation language button must not cover Back/Previous buttons --- */
.head-actions{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:7px !important;
flex-wrap:wrap !important;
}
.lang-switch{
position:static !important;
display:flex !important;
align-items:center !important;
gap:5px !important;
flex:0 0 auto !important;
width:auto !important;
}
.lang-switch .lang-toggle,
.public-nav .lang-toggle{
position:static !important;
top:auto !important;
left:auto !important;
z-index:auto !important;
width:auto !important;
min-width:66px !important;
min-height:28px !important;
padding:5px 10px !important;
margin:0 !important;
border-radius:7px !important;
box-shadow:none !important;
}
.page-head .btn-back,
.page-head .logout,
.page-head .btn{
position:relative !important;
z-index:1 !important;
white-space:nowrap !important;
}
@media(max-width:700px){
.head-actions{width:100% !important;justify-content:flex-start !important;}
.lang-switch{flex:0 0 auto !important;width:auto !important;}
.lang-switch .lang-toggle,
.public-nav .lang-toggle{width:auto !important;min-width:72px !important;padding:6px 10px !important;}
}
/* --- Global professional grid formatting: language-safe headers and compact cells --- */
.table-wrap{overflow-x:auto !important;-webkit-overflow-scrolling:touch !important;max-width:100% !important;}
table.grid, .grid{width:100% !important;border-collapse:separate !important;border-spacing:0 !important;table-layout:auto !important;font-size:14px !important;background:#fff !important;border:1px solid #d7e5ef !important;border-radius:12px !important;overflow:hidden !important;box-shadow:0 8px 22px rgba(20,65,105,.06) !important;}
.grid th{background:linear-gradient(135deg,#123d66,#1f6f9f) !important;color:#fff !important;font-weight:700 !important;text-align:center !important;padding:9px 8px !important;white-space:nowrap !important;border:0 !important;border-left:1px solid rgba(255,255,255,.16) !important;}
.grid td{padding:7px 8px !important;border-bottom:1px solid #edf3f8 !important;border-left:1px solid #edf3f8 !important;vertical-align:middle !important;white-space:nowrap !important;max-width:260px !important;overflow:hidden !important;text-overflow:ellipsis !important;line-height:1.45 !important;color:#22384a !important;}
.grid tr:nth-child(even) td{background:#f8fbfe !important;}
.grid tr:hover td{background:#eef7ff !important;}
.grid .grid-action-cell{width:72px !important;min-width:72px !important;max-width:72px !important;text-align:center !important;padding:5px 4px !important;overflow:visible !important;text-overflow:clip !important;}
.grid .grid-action-head{width:72px !important;min-width:72px !important;max-width:72px !important;text-align:center !important;}
.grid .grid-action-btn{display:inline-block !important;width:auto !important;min-width:54px !important;max-width:64px !important;padding:5px 8px !important;border-radius:7px !important;text-align:center !important;text-decoration:none !important;color:#fff !important;border:0 !important;font-weight:700 !important;font-size:13px !important;line-height:1.3 !important;cursor:pointer !important;box-sizing:border-box !important;}
.grid .grid-select-btn{background:#1976d2 !important;}
.grid .grid-delete-btn{background:#d32f2f !important;}
.grid .grid-select-btn:hover{background:#0d47a1 !important;}
.grid .grid-delete-btn:hover{background:#b71c1c !important;}
@media(max-width:800px){
table.grid,.grid{font-size:13.5px !important;min-width:720px !important;}
.grid th{padding:8px 7px !important;}
.grid td{padding:7px 7px !important;max-width:210px !important;}
.grid .grid-action-cell,.grid .grid-action-head{width:68px !important;min-width:68px !important;max-width:68px !important;}
}
/* --- Section pages cleanup: remove repeated top section title and style side menu title --- */
.section-hero{display:none !important;}
.section-layout{margin-top:0 !important;}
.section-page .side-title-box{
background:#ffd84d !important;
color:#111827 !important;
border-bottom:1px solid rgba(0,0,0,.10) !important;
text-align:center !important;
align-items:center !important;
justify-content:center !important;
box-shadow:inset 0 -1px 0 rgba(0,0,0,.08) !important;
}
.section-page .side-title-box b,
.section-page .side-title-box b span,
.section-page .side-title-box small,
.section-page .side-title-box small span{
color:#111827 !important;
text-align:center !important;
}
.section-page .side-title-box b{
width:100% !important;
font-size:16px !important;
font-weight:800 !important;
}
.section-page .side-title-box small{
background:rgba(255,255,255,.45) !important;
color:#111827 !important;
border:1px solid rgba(0,0,0,.10) !important;
}
.section-page .side-title-icon{
background:rgba(255,255,255,.50) !important;
border:1px solid rgba(0,0,0,.12) !important;
color:#111827 !important;
}
/* --- Fixed system title and centered user in all admin section headers --- */
.page-head{
position:relative;
min-height:52px;
}
.page-head .system-title{
font-size:18px!important;
font-weight:900!important;
line-height:1.25!important;
}
.page-head .system-title small{
font-size:11px!important;
font-weight:700!important;
opacity:.9;
margin-top:3px;
}
.page-head .top-user{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.28);
color:#fff;
border-radius:999px;
padding:8px 18px;
font-size:15px;
font-weight:800;
min-width:230px;
text-align:center;
box-shadow:0 4px 12px rgba(0,0,0,.08);
white-space:nowrap;
}
.page-head .top-user b{
color:#ffe07a;
font-weight:900;
}
@media(max-width:820px){
.page-head{display:block!important;text-align:center;min-height:0;padding-bottom:12px!important}
.page-head .system-title{font-size:16px!important;margin-bottom:8px}
.page-head .top-user{position:static;transform:none;margin:8px auto;display:inline-block;min-width:0;width:auto;font-size:13px;padding:7px 14px}
.page-head .head-actions{justify-content:center!important;width:100%;margin-top:8px}
}
/* --- Side menu language cleanup and centered selected section title --- */
.section-side .side-link b{display:block!important;font-size:15px!important;font-weight:800!important;line-height:1.35!important;white-space:normal!important;}
.section-side .side-link small{display:none!important;}
body.lang-ar .section-side .side-link .en,
body.lang-ar .section-option .en{display:none!important;}
body.lang-ar .section-side .side-link .ar,
body.lang-ar .section-option .ar{display:inline!important;}
body.lang-en .section-side .side-link .ar,
body.lang-en .section-option .ar{display:none!important;}
body.lang-en .section-side .side-link .en,
body.lang-en .section-option .en{display:inline!important;}
.section-current-title{
display:block;
width:100%;
box-sizing:border-box;
text-align:center!important;
margin:0 0 16px 0!important;
padding:13px 18px!important;
border-radius:16px!important;
background:linear-gradient(135deg,#ffd84d,#fff1a6)!important;
color:#111827!important;
font-size:21px!important;
font-weight:900!important;
border:1px solid rgba(0,0,0,.12)!important;
box-shadow:0 8px 22px rgba(20,65,105,.08)!important;
}
.section-current-title span{color:#111827!important;}
.section-main>h3{margin-top:0!important;}
.section-option b{font-size:15px!important;}
.section-option span{line-height:1.7!important;}
@media(max-width:820px){
.section-current-title{font-size:17px!important;padding:11px 14px!important;border-radius:13px!important;}
.section-side .side-link b{font-size:14px!important;}
}
/* Nationalities and Jobs compact professional layout */
.master-entry-panel{border:2px solid #d7e7f5;border-top:5px solid #f7c948;border-radius:16px;background:#ffffff;box-shadow:0 8px 22px rgba(18,61,102,.07)}
.master-entry-panel h2{display:inline-block;background:#f7c948;color:#111;padding:8px 18px;border-radius:12px;margin:0 0 14px!important;font-size:16px!important;text-align:center!important}
.master-two-fields{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.master-two-fields .code-field{flex:0 0 190px;max-width:190px}
.master-two-fields .name-field{flex:0 0 360px;max-width:360px}
.master-grid{max-width:760px;font-size:14px!important}
.master-grid th,.master-grid td{padding:7px 8px!important;white-space:nowrap}
.master-grid .grid-action-cell{width:86px!important;max-width:86px!important;text-align:center!important}
@media(max-width:700px){.master-two-fields .code-field,.master-two-fields .name-field{flex:1 1 100%;max-width:100%}.master-grid{min-width:520px}}
/* --- Partner labs professional frame and global page frames/buttons --- */
.colored-entry-frame,.panel.colored-entry-frame{
border:2px solid #cfe2f3!important;
border-top:6px solid #f7c948!important;
border-radius:18px!important;
background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
box-shadow:0 10px 28px rgba(18,61,102,.08)!important;
padding:18px!important;
}
.colored-list-frame,.panel.colored-list-frame{
border:1px solid #d6e6f2!important;
border-radius:16px!important;
box-shadow:0 8px 22px rgba(18,61,102,.06)!important;
}
.form-section-title{
display:inline-block!important;
background:linear-gradient(135deg,#ffd84d,#fff2a8)!important;
color:#111827!important;
border:1px solid rgba(0,0,0,.12)!important;
border-radius:14px!important;
padding:9px 20px!important;
margin:0 0 15px!important;
font-size:17px!important;
font-weight:900!important;
text-align:center!important;
}
.partner-form-row{gap:10px!important;align-items:flex-end!important}
.partner-small{flex:0 0 170px!important;max-width:170px!important}
.partner-medium{flex:0 0 250px!important;max-width:250px!important}
.partner-wide{flex:0 0 360px!important;max-width:360px!important}
.partner-entry-panel .txt{height:34px!important;font-size:14px!important}
.partner-entry-panel textarea.txt{height:auto!important;min-height:70px!important}
.partner-entry-panel label,
.field label{
background:linear-gradient(135deg,#eaf4ff,#cfe8ff)!important;
color:#123d66!important;
border:1px solid #b8d8ef!important;
border-radius:10px!important;
padding:7px 10px!important;
font-weight:800!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-width:115px!important;
text-align:center!important;
}
.form-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.iconized-btn{font-weight:800!important;letter-spacing:.1px!important}
.panel:not(.section-hero){border-radius:16px!important;box-shadow:0 8px 22px rgba(18,61,102,.05)}
.btn-save{background:#198754!important;color:#fff!important;border:0!important}
.btn-new{background:#0d6efd!important;color:#fff!important;border:0!important}
.btn-delete,.grid-delete-btn{background:#d32f2f!important;color:#fff!important}
.btn-back{background:#f7c948!important;color:#111827!important;border:0!important}
@media(max-width:850px){
.partner-small,.partner-medium,.partner-wide{flex:1 1 100%!important;max-width:100%!important}
.partner-entry-panel label,.field label{width:100%!important;box-sizing:border-box!important;min-width:0!important}
}
/* Partner Labs Google Maps link selector */
.map-link-field{min-width:420px}
.map-link-row{display:flex;gap:8px;align-items:center;width:100%}
.map-link-row .txt{flex:1;min-width:220px}
.btn-map{background:#f4c542!important;color:#111!important;border:1px solid #d6a900!important;font-weight:700!important;white-space:nowrap;padding:8px 12px!important;border-radius:10px!important}
.btn-map:hover{background:#ffd966!important;color:#000!important}
.map-help{display:block;margin-top:5px;color:#5d6d7e;font-size:12px;line-height:1.5}
@media(max-width:760px){.map-link-field{min-width:100%}.map-link-row{display:block}.map-link-row .txt{width:100%;min-width:0}.btn-map{width:100%;margin-top:7px}}
/* --- Partner Labs Google Maps button single-line fix --- */
.map-link-field > label{
background:inherit !important;
color:inherit !important;
border:inherit !important;
box-shadow:none !important;
white-space:nowrap !important;
width:auto !important;
padding:inherit !important;
margin-bottom:6px !important;
font-size:inherit !important;
font-weight:inherit !important;
line-height:inherit !important;
display:block !important;
text-align:inherit !important;
}
.map-link-row{
display:flex !important;
flex-wrap:nowrap !important;
align-items:center !important;
gap:8px !important;
}
.map-link-row .txt{
flex:1 1 auto !important;
min-width:260px !important;
}
.btn-map,
.map-link-row .btn-map{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:auto !important;
min-width:165px !important;
white-space:nowrap !important;
word-break:keep-all !important;
overflow-wrap:normal !important;
line-height:1.2 !important;
padding:8px 14px !important;
flex:0 0 auto !important;
}
.btn-map .ar,
.btn-map .en{
white-space:nowrap !important;
word-break:keep-all !important;
}
@media(max-width:720px){
.map-link-field > label{white-space:normal !important;}
.map-link-row{display:block !important;}
.map-link-row .txt{width:100% !important;min-width:0 !important;}
.map-link-row .btn-map{width:100% !important;min-width:0 !important;margin-top:8px !important;}
}
/* --- Final strict fix: Google Maps button text must stay in one line --- */
.map-link-row{
display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
align-items:center !important;
gap:8px !important;
}
.map-link-row .txt{
flex:1 1 auto !important;
min-width:280px !important;
}
.map-button-one-line,
.btn-map.map-button-one-line,
.map-link-row .map-button-one-line{
display:inline-flex !important;
flex:0 0 210px !important;
width:210px !important;
min-width:210px !important;
max-width:210px !important;
height:38px !important;
align-items:center !important;
justify-content:center !important;
white-space:nowrap !important;
word-break:normal !important;
overflow-wrap:normal !important;
line-height:1 !important;
padding:8px 12px !important;
text-align:center !important;
direction:rtl !important;
}
body.lang-en .map-button-one-line{direction:ltr !important;}
.map-button-one-line .map-btn-text,
.map-button-one-line .ar,
.map-button-one-line .en{
display:inline-block !important;
white-space:nowrap !important;
word-break:normal !important;
overflow-wrap:normal !important;
line-height:1 !important;
width:auto !important;
min-width:auto !important;
max-width:none !important;
}
@media(max-width:760px){
.map-link-row{display:block !important;}
.map-link-row .txt{width:100% !important;min-width:0 !important;}
.map-button-one-line,.btn-map.map-button-one-line,.map-link-row .map-button-one-line{
width:100% !important;
min-width:100% !important;
max-width:100% !important;
margin-top:8px !important;
flex:none !important;
}
}
/* --- Final fix: map help text must stay in one line --- */
.map-help{
display:block !important;
width:max-content !important;
max-width:none !important;
white-space:nowrap !important;
word-break:normal !important;
overflow-wrap:normal !important;
line-height:1.5 !important;
}
.map-link-field{overflow-x:visible !important;}
/* --- Partner Labs map field final no-overlap fix --- */
.partner-entry-panel .map-link-field > label,
.map-link-field > label{
background:linear-gradient(135deg,#eaf4ff,#cfe8ff) !important;
color:#123d66 !important;
border:1px solid #b8d8ef !important;
border-radius:10px !important;
padding:7px 10px !important;
font-weight:800 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-width:150px !important;
text-align:center !important;
white-space:nowrap !important;
box-sizing:border-box !important;
margin-bottom:6px !important;
}
.map-link-field{
flex:0 0 560px !important;
max-width:560px !important;
min-width:560px !important;
overflow:visible !important;
}
.map-link-row{
display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
align-items:center !important;
gap:8px !important;
width:100% !important;
}
.map-link-row .txt{
flex:1 1 auto !important;
min-width:300px !important;
}
.map-button-one-line,
.btn-map.map-button-one-line,
.map-link-row .map-button-one-line{
flex:0 0 auto !important;
width:auto !important;
min-width:185px !important;
max-width:none !important;
white-space:nowrap !important;
position:static !important;
z-index:auto !important;
}
.map-help{
display:block !important;
clear:both !important;
margin-top:7px !important;
padding:0 !important;
width:auto !important;
max-width:100% !important;
color:#5d6d7e !important;
font-size:12px !important;
line-height:1.7 !important;
white-space:nowrap !important;
word-break:normal !important;
overflow-wrap:normal !important;
position:relative !important;
z-index:0 !important;
background:transparent !important;
}
@media(max-width:900px){
.map-link-field{flex:1 1 100% !important;max-width:100% !important;min-width:0 !important;}
.map-link-row{display:block !important;}
.map-link-row .txt{width:100% !important;min-width:0 !important;box-sizing:border-box !important;}
.map-button-one-line,.btn-map.map-button-one-line,.map-link-row .map-button-one-line{width:100% !important;min-width:0 !important;margin-top:8px !important;}
.map-help{white-space:normal !important;}
}
/* Branches master data page - safe addition */
.branch-entry-panel{border:2px solid #b8d8ef!important;border-radius:18px!important;background:linear-gradient(180deg,#ffffff,#f7fbff)!important;box-shadow:0 10px 28px rgba(18,61,102,.07)!important}
.branch-form-row{gap:10px!important;align-items:flex-end!important}
.branch-code{flex:0 0 145px!important;max-width:145px!important}
.branch-name{flex:0 0 260px!important;max-width:260px!important}
.branch-small{flex:0 0 170px!important;max-width:170px!important}
.branch-medium{flex:0 0 210px!important;max-width:210px!important}
.branch-wide{flex:0 0 360px!important;max-width:360px!important}
.branch-map{flex:1 1 520px!important;min-width:520px!important}
.branch-entry-panel .txt{height:34px!important;font-size:14px!important}
.branch-entry-panel label{min-width:120px!important}
@media(max-width:900px){
.branch-code,.branch-name,.branch-small,.branch-medium,.branch-wide,.branch-map{flex:1 1 100%!important;max-width:100%!important;min-width:0!important}
.branch-entry-panel label{width:100%!important;box-sizing:border-box!important}
}
/* --- 2026-06-08: Branches / Partner Labs nationality dropdown and field overlap fix --- */
.branch-entry-panel .field,
.partner-entry-panel .field{
box-sizing:border-box !important;
align-items:center !important;
overflow:visible !important;
}
.branch-entry-panel .field label,
.partner-entry-panel .field label{
flex:0 0 130px !important;
min-width:130px !important;
max-width:130px !important;
white-space:normal !important;
line-height:1.35 !important;
}
.branch-entry-panel .field .txt,
.branch-entry-panel .field select,
.partner-entry-panel .field .txt,
.partner-entry-panel .field select{
flex:1 1 auto !important;
width:100% !important;
max-width:none !important;
min-width:0 !important;
height:34px !important;
}
.branch-code{flex:0 0 285px!important;max-width:285px!important}
.branch-name{flex:0 0 430px!important;max-width:430px!important}
.branch-small{flex:0 0 310px!important;max-width:310px!important}
.branch-medium{flex:0 0 390px!important;max-width:390px!important}
.branch-wide{flex:0 0 520px!important;max-width:520px!important}
.branch-map{flex:1 1 680px!important;min-width:680px!important;max-width:100%!important}
.partner-small{flex:0 0 310px!important;max-width:310px!important}
.partner-medium{flex:0 0 410px!important;max-width:410px!important}
.partner-wide{flex:0 0 580px!important;max-width:580px!important}
.nationality-select{
direction:rtl !important;
text-align:right !important;
background:#fff !important;
}
body.lang-en .nationality-select{direction:ltr !important;text-align:left !important;}
@media(max-width:900px){
.branch-code,.branch-name,.branch-small,.branch-medium,.branch-wide,.branch-map,
.partner-small,.partner-medium,.partner-wide{flex:1 1 100%!important;max-width:100%!important;min-width:0!important}
.branch-entry-panel .field,.partner-entry-panel .field{display:block!important}
.branch-entry-panel .field label,.partner-entry-panel .field label{display:flex!important;width:100%!important;max-width:100%!important;min-width:0!important;margin-bottom:6px!important}
.branch-entry-panel .field .txt,.branch-entry-panel .field select,.partner-entry-panel .field .txt,.partner-entry-panel .field select{width:100%!important;max-width:100%!important}
}
/* =========================================================
UPDATE: First public screen navigation refinement
حذف الرئيسية والتحاليل من أول شاشة + تنسيق احترافي لباقي الاختيارات
This affects ClientHome.aspx header only and keeps previous changes intact.
========================================================= */
.home-head{
background:linear-gradient(135deg,#092f4f 0%,#14577f 52%,#1b7896 100%) !important;
border-bottom:1px solid rgba(255,255,255,.16);
box-shadow:0 6px 18px rgba(9,47,79,.18) !important;
}
.home-head .public-nav{
gap:10px !important;
align-items:center !important;
justify-content:flex-start !important;
}
.home-head .public-nav a{
background:rgba(255,255,255,.15) !important;
border:1px solid rgba(255,255,255,.34) !important;
color:#ffffff !important;
border-radius:11px !important;
padding:9px 17px !important;
min-width:92px !important;
text-align:center !important;
font-size:12.5px !important;
font-weight:bold !important;
letter-spacing:.1px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 3px 8px rgba(0,0,0,.10) !important;
transition:background .18s ease,transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.home-head .public-nav a:hover{
background:#ffffff !important;
color:#14577f !important;
border-color:#ffffff !important;
transform:translateY(-1px);
box-shadow:0 7px 16px rgba(0,0,0,.16) !important;
}
.home-head .public-nav a[href="RequestTest.aspx"]{
background:#f4c542 !important;
border-color:#f8d76b !important;
color:#123d66 !important;
}
.home-head .public-nav a[href="RequestTest.aspx"]:hover{
background:#ffe08a !important;
color:#0f304f !important;
}
.home-head .public-brand{
color:#ffffff !important;
}
.home-head .public-brand small{
color:rgba(255,255,255,.88) !important;
}
@media(max-width:700px){
.home-head .public-nav{width:100% !important;gap:7px !important;}
.home-head .public-nav a{flex:1 1 42% !important;min-width:0 !important;padding:8px 9px !important;border-radius:9px !important;}
}
/* PART10: Header visibility + universal back buttons + public nav cleanup */
.page-head,
.page-head .brand,
.page-head .system-title,
.page-head .system-title span,
.page-head .system-title small,
.page-head .top-user,
.page-head .top-user span,
.page-head .top-user b{
color:#ffffff !important;
}
.page-head .system-title small{
color:#dbeafe !important;
opacity:1 !important;
}
.public-head{
background:#ffffff !important;
}
.public-head .public-brand,
.public-head .public-brand span{
color:#123d66 !important;
}
.public-head .public-brand small,
.public-head .public-brand small span{
color:#64748b !important;
}
.public-back{
border:1px solid #f59e0b !important;
background:#fbbf24 !important;
color:#102a43 !important;
font-weight:bold !important;
}
.public-back:hover{
background:#f59e0b !important;
color:#102a43 !important;
}
.btn-back{
background:#fbbf24 !important;
color:#102a43 !important;
border:1px solid #f59e0b !important;
font-weight:bold !important;
}
.btn-back:hover{
background:#f59e0b !important;
color:#102a43 !important;
}
.side-title-box b,
.section-current-title,
.menu-header b,
.dashboard-title,
.panel h2,
.panel h3{
color:#123d66 !important;
}
.menu-group-title,
.side-title-box{
color:#123d66 !important;
}
/* --- Request Test page professional frame, title, price preview and selected tests grid --- */
.request-test-page{
background:linear-gradient(135deg,#eef7fb 0%,#f7fbff 48%,#eaf4f8 100%) !important;
}
.request-test-page .public-wrap{
max-width:1220px !important;
padding:18px 18px 24px !important;
}
.request-test-page .panel{
position:relative !important;
overflow:hidden !important;
padding:0 18px 18px !important;
border:1px solid #b9d8e7 !important;
border-radius:22px !important;
background:linear-gradient(180deg,#ffffff 0%,#f9fdff 100%) !important;
box-shadow:0 18px 40px rgba(17,84,119,.18) !important;
}
.request-test-page .panel:before{
content:"" !important;
display:block !important;
height:7px !important;
margin:0 -18px 14px !important;
background:linear-gradient(90deg,#0b4f71,#1882a8,#63c5d2) !important;
}
.request-test-page .panel h2{
margin:0 0 16px !important;
padding:12px 18px !important;
border-radius:16px !important;
background:linear-gradient(135deg,#0b4f71,#167da4) !important;
color:#ffffff !important;
font-size:20px !important;
line-height:1.5 !important;
text-align:center !important;
letter-spacing:.2px !important;
box-shadow:0 10px 22px rgba(11,79,113,.22) !important;
}
.request-test-page .form-row{
margin:0 0 10px !important;
padding:8px !important;
gap:8px !important;
border:1px solid #e0eef5 !important;
border-radius:14px !important;
background:#f8fcfe !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.75) !important;
}
.request-test-page .field{
flex:1 1 calc(33.333% - 10px) !important;
min-width:260px !important;
padding:7px 8px !important;
border:1px solid #dcebf2 !important;
border-radius:12px !important;
background:#ffffff !important;
box-shadow:0 4px 12px rgba(23,98,130,.06) !important;
}
.request-test-page .field label{
flex:0 0 138px !important;
min-width:138px !important;
max-width:138px !important;
padding:6px 9px !important;
border-radius:9px !important;
background:#e6f4f8 !important;
color:#10445f !important;
font-size:12px !important;
font-weight:800 !important;
white-space:normal !important;
}
.request-test-page .field .txt,
.request-test-page .field select,
.request-test-page .field textarea,
.request-test-page input[type="text"],
.request-test-page input[type="email"],
.request-test-page input[type="date"],
.request-test-page input[type="file"]{
min-height:34px !important;
height:34px !important;
padding:6px 9px !important;
border:1px solid #bfd7e4 !important;
border-radius:9px !important;
background:#ffffff !important;
color:#12384a !important;
font-size:12px !important;
}
.request-test-page textarea,
.request-test-page .field.full textarea{
min-height:62px !important;
height:62px !important;
}
.request-test-page .price-field{
flex:0 1 280px !important;
min-width:280px !important;
}
.request-test-page .add-test-field{
flex:0 1 210px !important;
min-width:210px !important;
justify-content:center !important;
}
.request-test-page .price-badge{
display:block !important;
width:100% !important;
min-height:34px !important;
line-height:34px !important;
padding:0 12px !important;
border-radius:999px !important;
background:#fff7df !important;
border:1px solid #f0cf72 !important;
color:#7a4b00 !important;
font-weight:900 !important;
text-align:center !important;
}
.request-test-page .btn-add-test{
width:100% !important;
min-height:34px !important;
border:0 !important;
border-radius:999px !important;
background:linear-gradient(135deg,#1682a6,#0f5b78) !important;
color:#ffffff !important;
font-weight:900 !important;
cursor:pointer !important;
box-shadow:0 8px 18px rgba(15,91,120,.22) !important;
}
.request-test-page .selected-tests-window{
margin:12px 0 !important;
padding:12px !important;
border:1px solid #c8dfe9 !important;
border-radius:18px !important;
background:linear-gradient(180deg,#ffffff,#f3fafe) !important;
box-shadow:0 10px 24px rgba(17,84,119,.12) !important;
}
.request-test-page .selected-tests-head{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:10px !important;
margin-bottom:10px !important;
padding:9px 12px !important;
border-radius:13px !important;
background:#0f5b78 !important;
color:#ffffff !important;
font-size:14px !important;
font-weight:900 !important;
}
.request-test-page .selected-total{
padding:5px 12px !important;
border-radius:999px !important;
background:#ffffff !important;
color:#0f5b78 !important;
font-size:12px !important;
font-weight:900 !important;
}
.request-test-page .selected-tests-grid{
width:100% !important;
border-collapse:separate !important;
border-spacing:0 !important;
overflow:hidden !important;
border:1px solid #d6e9f0 !important;
border-radius:12px !important;
background:#ffffff !important;
}
.request-test-page .selected-tests-grid th{
padding:9px 10px !important;
background:#e8f5f9 !important;
color:#0f4b67 !important;
font-weight:900 !important;
border-bottom:1px solid #d6e9f0 !important;
text-align:center !important;
}
.request-test-page .selected-tests-grid td{
padding:8px 10px !important;
color:#183b4c !important;
border-bottom:1px solid #eef5f8 !important;
text-align:center !important;
}
.request-test-page .remove-test-link{
display:inline-block !important;
padding:5px 12px !important;
border-radius:999px !important;
background:#fff0f0 !important;
color:#b32121 !important;
font-weight:900 !important;
text-decoration:none !important;
border:1px solid #ffd0d0 !important;
}
.request-test-page .btn-save{
min-width:240px !important;
min-height:40px !important;
border-radius:999px !important;
font-size:14px !important;
font-weight:900 !important;
}
@media(max-width:900px){
.request-test-page .field{flex:1 1 calc(50% - 8px) !important;min-width:300px !important;}
.request-test-page .price-field,.request-test-page .add-test-field{flex:1 1 calc(50% - 8px) !important;min-width:300px !important;}
}
@media(max-width:700px){
.request-test-page .panel{padding:0 10px 12px !important;border-radius:16px !important;}
.request-test-page .panel:before{margin:0 -10px 12px !important;}
.request-test-page .field,.request-test-page .price-field,.request-test-page .add-test-field{display:block !important;min-width:100% !important;}
.request-test-page .field label{display:block !important;width:100% !important;max-width:100% !important;min-width:100% !important;margin-bottom:6px !important;}
.request-test-page .selected-tests-head{display:block !important;text-align:center !important;}
.request-test-page .selected-total{display:block !important;margin-top:6px !important;}
}
/* Orders page selected order tests details */
.orders-page .order-tests-details{
border:1px solid #c7dde8 !important;
border-radius:18px !important;
background:linear-gradient(180deg,#ffffff,#f4fbff) !important;
box-shadow:0 10px 24px rgba(17,84,119,.12) !important;
}
.orders-page .order-tests-title{
margin-bottom:10px !important;
padding:10px 14px !important;
border-radius:14px !important;
background:#0f5b78 !important;
color:#ffffff !important;
font-weight:900 !important;
text-align:center !important;
}
.orders-page .order-tests-details .grid th{
background:#e8f5f9 !important;
color:#0f4b67 !important;
font-weight:900 !important;
}
.orders-page .order-tests-details .grid td{
text-align:center !important;
}
/* =========================================================
Client Portal professional UI + language clean labels
تعديل بوابة العميل: عناوين عربية/إنجليزية حسب اللغة + إطار احترافي + منع التكرار بصرياً
========================================================= */
.client-portal-page{
background:linear-gradient(180deg,#edf6fb 0%,#f7fbfd 45%,#eef4f8 100%) !important;
}
.client-portal-wrap{
max-width:1220px !important;
padding:22px 14px !important;
}
.client-portal-card{
background:#fff;
border:1px solid #d5e6f1;
border-radius:18px;
padding:16px;
box-shadow:0 14px 34px rgba(18,61,102,.12);
position:relative;
overflow:hidden;
}
.client-portal-card:before{
content:"";
position:absolute;
width:230px;
height:230px;
border-radius:50%;
background:rgba(31,124,168,.07);
top:-115px;
right:-80px;
pointer-events:none;
}
.client-portal-card:after{
content:"";
position:absolute;
width:170px;
height:170px;
border-radius:50%;
background:rgba(39,174,96,.06);
bottom:-90px;
left:-70px;
pointer-events:none;
}
.client-portal-title{
position:relative;
z-index:1;
background:linear-gradient(135deg,#123d66,#1f7ca8);
color:#fff;
border-radius:14px;
padding:13px 16px;
text-align:center;
font-size:16px;
font-weight:800;
box-shadow:0 10px 24px rgba(31,124,168,.20);
}
.client-portal-subtitle{
position:relative;
z-index:1;
color:#607d8b;
text-align:center;
margin:10px 0 14px;
font-size:12px;
}
.client-search-box{
position:relative;
z-index:1;
background:#f8fbfe;
border:1px solid #dceaf3;
border-radius:14px;
padding:12px;
margin-bottom:14px;
}
.portal-fields-row{
align-items:flex-end !important;
justify-content:center !important;
margin-bottom:0 !important;
}
.client-portal-page .portal-field{
flex:0 1 330px !important;
min-width:260px !important;
}
.client-portal-page .wide-field{
flex-basis:430px !important;
}
.client-portal-page .portal-action-field{
flex:0 0 auto !important;
min-width:145px !important;
}
.client-portal-page .field label{
color:#123d66 !important;
flex-basis:128px !important;
min-width:128px !important;
max-width:155px !important;
}
.client-portal-page .wide-field label{
flex-basis:175px !important;
min-width:175px !important;
max-width:190px !important;
}
.client-portal-page .field .txt{
max-width:240px !important;
height:32px !important;
min-height:32px !important;
border-color:#bfd3e2 !important;
border-radius:8px !important;
background:#fff !important;
}
.client-portal-page .wide-field .txt{
max-width:245px !important;
}
.portal-track-btn{
background:linear-gradient(135deg,#1f7ca8,#27ae60) !important;
color:#fff !important;
border-radius:9px !important;
min-width:130px;
box-shadow:0 8px 17px rgba(31,124,168,.20);
}
.portal-msg{
text-align:center;
color:#c0392b !important;
}
.client-grid-frame{
position:relative;
z-index:1;
border:1px solid #d8e8f2;
border-radius:15px;
padding:10px;
background:#ffffff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 22px rgba(18,61,102,.06);
}
.grid-title-line{
display:inline-block;
background:#eef7fc;
color:#123d66;
border:1px solid #d4e8f4;
border-radius:999px;
padding:7px 14px;
font-weight:800;
margin-bottom:9px;
}
.client-table-wrap{
border-radius:12px;
overflow:auto;
border:1px solid #e1edf5;
margin-top:0 !important;
}
.client-grid{
min-width:860px !important;
border-collapse:separate !important;
border-spacing:0 !important;
}
.client-grid th{
background:linear-gradient(135deg,#123d66,#1f7ca8) !important;
color:#fff !important;
padding:8px 9px !important;
border:0 !important;
text-align:center !important;
}
.client-grid td{
padding:7px 8px !important;
border:0 !important;
border-bottom:1px solid #e8f0f5 !important;
text-align:center !important;
color:#263238;
}
.client-grid tr:nth-child(even) td{
background:#f8fcff !important;
}
.client-grid tr:hover td{
background:#eef8ff !important;
}
.report-wait{
display:inline-block;
background:#fff4e5;
color:#8a5a00;
border:1px solid #f4d4a1;
border-radius:999px;
padding:5px 10px;
font-weight:bold;
}
.active-public-link{
background:#174a7c !important;
color:#fff !important;
border-color:#174a7c !important;
}
body.lang-en .client-portal-page,
body.lang-en.client-portal-page{
direction:ltr;
}
@media(max-width:900px){
.client-portal-page .portal-field,
.client-portal-page .wide-field,
.client-portal-page .portal-action-field{
flex:1 1 100% !important;
min-width:100% !important;
}
.client-portal-page .field label,
.client-portal-page .wide-field label{
flex-basis:150px !important;
min-width:150px !important;
max-width:190px !important;
}
.client-portal-page .field .txt,
.client-portal-page .wide-field .txt{
max-width:none !important;
width:100% !important;
}
}
@media(max-width:700px){
.client-portal-title{font-size:14px;padding:11px 12px;}
.client-search-box,.client-grid-frame{padding:9px;}
.client-portal-page .field label,
.client-portal-page .wide-field label{
min-width:0 !important;
max-width:none !important;
}
.portal-track-btn{width:100%;}
}
/* UPDATE: Lab logo visible in system header and print documents */
.brand.has-lab-logo,.public-brand.has-lab-logo{display:flex!important;align-items:center!important;gap:10px!important;line-height:1.35!important}
.lab-system-logo{width:46px!important;height:46px!important;object-fit:contain!important;background:#fff!important;border-radius:10px!important;padding:3px!important;box-shadow:0 2px 8px rgba(0,0,0,.12)!important;flex:0 0 auto!important}
.logo-text-wrap{display:inline-block!important}
@media print{.print-doc-head img,.receipt-logo,.label-head img{display:block!important}}
@media(max-width:700px){.lab-system-logo{width:38px!important;height:38px!important}}
/* =========================================================
PART7: Site Map page with notes and PDF-friendly printing
========================================================= */
.only-print{display:none}.sitemap-page{background:#f3f6fa}.sitemap-wrap{max-width:1320px}.sitemap-hero{display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(135deg,#ffffff,#eef7ff);border-right:5px solid #174a7c}.sitemap-hero h2{margin:0 0 5px 0 !important;text-align:inherit;font-size:18px !important}.sitemap-hero p{margin:0;color:#52677a;line-height:1.8}.sitemap-actions{display:flex;gap:7px;flex-wrap:wrap}.btn-print{background:#16a085;color:#fff}.sitemap-root{text-align:center;position:relative}.root-node{display:inline-flex;align-items:center;gap:9px;background:#174a7c;color:#fff;border-radius:999px;padding:10px 20px;box-shadow:0 5px 14px rgba(23,74,124,.22)}.root-node span{font-size:19px}.root-node a{background:rgba(255,255,255,.14);padding:4px 9px;border-radius:999px;text-decoration:none;font-size:10.5px}.sitemap-line{height:28px;width:2px;background:#b9c7d3;margin:9px auto -8px}.sitemap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(315px,1fr));gap:12px}.sitemap-section{background:#fff;border:1px solid #d9e1e8;border-radius:12px;padding:12px;box-shadow:0 2px 9px rgba(0,0,0,.04);break-inside:avoid}.sitemap-section h3{font-size:14px !important;text-align:inherit;margin:0 0 8px 0 !important;border-bottom:1px solid #e6edf3;padding-bottom:7px}.sitemap-section .section-note{font-size:11px;color:#5b6f80;line-height:1.8;min-height:42px;margin:0 0 8px}.sitemap-section ul{list-style:none;margin:0;padding:0}.sitemap-section li{display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px dashed #e1e8ee;padding:7px 0}.sitemap-section li:last-child{border-bottom:0}.sitemap-section li a{font-weight:bold;text-decoration:none;color:#174a7c;direction:ltr;text-align:left}.sitemap-section li span{color:#465a69;font-size:10.5px;text-align:end}.sitemap-section.master{border-top:4px solid #27ae60}.sitemap-section.daily{border-top:4px solid #2980b9}.sitemap-section.stored{border-top:4px solid #8e44ad}.sitemap-section.finance{border-top:4px solid #f39c12}.sitemap-section.settings{border-top:4px solid #34495e}.sitemap-section.public{border-top:4px solid #16a085}.sitemap-section.advanced{border-top:4px solid #c0392b}.sitemap-notes h3{text-align:inherit}.note-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}.note-grid div{background:#f8fbff;border:1px solid #d9e1e8;border-radius:10px;padding:10px;break-inside:avoid}.note-grid b{color:#174a7c}.note-grid p{margin:6px 0 0;color:#52677a;line-height:1.8}.lab-system-logo{width:34px;height:34px;border-radius:8px;object-fit:cover;margin-inline-end:8px;vertical-align:middle}.has-lab-logo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.has-lab-logo small{width:100%}
@media(max-width:760px){.sitemap-hero{display:block}.sitemap-actions{margin-top:10px}.sitemap-grid{grid-template-columns:1fr}.sitemap-section li{display:block}.sitemap-section li span{display:block;text-align:inherit;margin-top:3px}.root-node{display:flex;flex-wrap:wrap;justify-content:center;border-radius:14px}.sitemap-line{display:none}.lab-system-logo{width:30px;height:30px}}
@media print{body{background:#fff !important;color:#000 !important;font-size:10px !important}.no-print,.page-head,.head-actions,.sitemap-actions,script{display:none !important}.only-print{display:block !important;text-align:center;margin-bottom:10px}.wrap,.sitemap-wrap{max-width:none !important;padding:0 !important}.panel,.sitemap-section,.note-grid div{box-shadow:none !important;border-color:#999 !important}.sitemap-hero{border:1px solid #999 !important;background:#fff !important}.sitemap-grid{grid-template-columns:repeat(2,1fr) !important;gap:8px !important}.sitemap-section{padding:8px !important;page-break-inside:avoid}.sitemap-section h3{font-size:12px !important;color:#000 !important}.sitemap-section .section-note,.sitemap-section li span,.note-grid p{font-size:9px !important;color:#111 !important}.sitemap-section li{padding:4px 0}.sitemap-section li a{color:#000 !important;text-decoration:none}.sitemap-notes{page-break-inside:avoid}.note-grid{grid-template-columns:repeat(2,1fr) !important;gap:6px !important}a:after{content:"" !important}}
/* =========================================================
PART8: Global Professional Visual Redesign - 18/06
إطار احترافي عام لكل صفحات النظام + تحسين الحقول والجداول
Central CSS only: no database or save logic changes.
========================================================= */
:root{
--lab-navy:#102f4f;
--lab-blue:#176b9b;
--lab-cyan:#1fb7c9;
--lab-green:#19a974;
--lab-gold:#f2b84b;
--lab-red:#c0392b;
--lab-slate:#52677a;
--lab-line:#d9e7f1;
--lab-soft:#f5f9fc;
--lab-white:#ffffff;
--lab-shadow:0 18px 45px rgba(16,47,79,.13);
--lab-soft-shadow:0 8px 22px rgba(16,47,79,.08);
}
html{scroll-behavior:smooth;}
body:not(.login-page){
background:
radial-gradient(circle at 8% 10%, rgba(31,183,201,.13), transparent 28%),
radial-gradient(circle at 92% 12%, rgba(25,169,116,.10), transparent 26%),
linear-gradient(180deg,#eef6fb 0%,#f7fbfe 44%,#eef4f8 100%) !important;
color:#203142 !important;
min-height:100vh;
}
body:not(.login-page):not(.public-body)::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
background-image:
linear-gradient(135deg, rgba(255,255,255,.50) 0 25%, transparent 25% 50%, rgba(255,255,255,.35) 50% 75%, transparent 75%),
radial-gradient(circle, rgba(23,107,155,.055) 1px, transparent 1px);
background-size:42px 42px,18px 18px;
opacity:.45;
z-index:-1;
}
.page-head{
background:linear-gradient(135deg,#0f2d4b 0%,#176b9b 58%,#1fb7c9 100%) !important;
border-bottom:1px solid rgba(255,255,255,.22) !important;
box-shadow:0 14px 34px rgba(16,47,79,.22) !important;
padding:12px 20px !important;
position:relative;
overflow:hidden;
}
.page-head::after{
content:"";
position:absolute;
width:290px;height:290px;border-radius:50%;
background:rgba(255,255,255,.09);
left:-120px;top:-165px;
pointer-events:none;
}
.brand,.system-title{
letter-spacing:.1px;
text-shadow:0 1px 1px rgba(0,0,0,.12);
}
.top-user{
background:rgba(255,255,255,.13);
border:1px solid rgba(255,255,255,.20);
color:#fff;
padding:7px 12px;
border-radius:999px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.lang-switch button,.lang-toggle{
background:rgba(255,255,255,.16) !important;
color:#fff !important;
border:1px solid rgba(255,255,255,.30) !important;
border-radius:999px !important;
transition:.18s ease;
}
.lang-switch button:hover,.lang-toggle:hover{
background:#fff !important;
color:var(--lab-navy) !important;
transform:translateY(-1px);
}
.wrap:not(.client-portal-wrap),.public-wrap{
position:relative;
background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.72)) !important;
border:1px solid rgba(217,231,241,.92) !important;
border-radius:22px !important;
box-shadow:var(--lab-shadow) !important;
margin-top:16px !important;
margin-bottom:18px !important;
overflow:hidden;
}
.wrap:not(.client-portal-wrap)::before,.public-wrap::before{
content:"";
position:absolute;
inset:0 0 auto 0;
height:5px;
background:linear-gradient(90deg,var(--lab-cyan),var(--lab-blue),var(--lab-green),var(--lab-gold));
z-index:1;
}
.public-wrap{max-width:1260px;margin-left:auto;margin-right:auto;padding:16px !important;}
.panel{
position:relative;
background:rgba(255,255,255,.96) !important;
border:1px solid #dcebf4 !important;
border-radius:16px !important;
box-shadow:var(--lab-soft-shadow) !important;
padding:14px !important;
overflow:hidden;
}
.panel::before{
content:"";
position:absolute;
top:0;bottom:0;right:0;
width:4px;
background:linear-gradient(180deg,var(--lab-blue),var(--lab-cyan));
opacity:.95;
}
body.lang-en .panel::before{right:auto;left:0;}
.panel h2,.panel h3,.section-current-title,.dashboard-title{
background:linear-gradient(135deg,#f0f8fd,#ffffff) !important;
border:1px solid #dcebf4 !important;
color:var(--lab-navy) !important;
border-radius:12px !important;
padding:9px 13px !important;
margin:0 0 12px 0 !important;
text-align:inherit !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.panel h2::before,.panel h3::before,.dashboard-title::before{
content:"✦";
color:var(--lab-cyan);
margin-left:6px;
}
body.lang-en .panel h2::before,body.lang-en .panel h3::before,body.lang-en .dashboard-title::before{margin-left:0;margin-right:6px;}
.form-row{
background:linear-gradient(135deg,#fbfdff,#f5f9fc) !important;
border:1px solid #e1edf5 !important;
border-radius:14px !important;
padding:9px 10px !important;
}
.field{
background:#fff !important;
border:1px solid #e4eef5 !important;
border-radius:12px !important;
padding:6px 8px !important;
box-shadow:0 3px 10px rgba(16,47,79,.035) !important;
transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.field:focus-within{
border-color:#9fd5e0 !important;
box-shadow:0 0 0 3px rgba(31,183,201,.10),0 6px 15px rgba(16,47,79,.06) !important;
transform:translateY(-1px);
}
.field label,.label{
color:#24435f !important;
font-weight:800 !important;
}
.txt,select,textarea,
input[type="text"],input[type="password"],input[type="number"],input[type="date"],input[type="email"]{
background:linear-gradient(180deg,#fff,#fbfdff) !important;
border:1px solid #c6d7e4 !important;
border-radius:9px !important;
color:#203142 !important;
height:31px !important;
min-height:31px !important;
padding:5px 8px !important;
box-shadow:inset 0 1px 2px rgba(16,47,79,.035) !important;
}
.txt:focus,select:focus,textarea:focus,
input[type="text"]:focus,input[type="password"]:focus,input[type="number"]:focus,input[type="date"]:focus,input[type="email"]:focus{
outline:none !important;
border-color:var(--lab-cyan) !important;
box-shadow:0 0 0 3px rgba(31,183,201,.12) !important;
}
textarea,.txt[rows]{min-height:66px !important;line-height:1.7 !important;}
.field .txt,.field select,.field textarea{max-width:250px !important;}
.field.field-short{flex:0 1 220px !important;min-width:205px !important;}
.field.field-short .txt,.field.field-short select,.field.field-short textarea{max-width:135px !important;}
.field.field-date{flex:0 1 245px !important;min-width:225px !important;}
.field.field-date .txt,.field.field-date input{max-width:145px !important;}
.field.field-number{flex:0 1 250px !important;min-width:225px !important;}
.field.field-number .txt,.field.field-number input{max-width:150px !important;}
.field.field-money{flex:0 1 265px !important;min-width:240px !important;}
.field.field-money .txt,.field.field-money input{max-width:160px !important;}
.field.field-code{flex:0 1 270px !important;min-width:240px !important;}
.field.field-code .txt,.field.field-code input{max-width:170px !important;}
.field.field-wide{flex:0 1 420px !important;min-width:330px !important;}
.field.field-wide .txt,.field.field-wide select{max-width:300px !important;}
.field.field-notes,.field.full.field-notes{
flex:1 1 100% !important;
min-width:100% !important;
align-items:flex-start !important;
}
.field.field-notes label{padding-top:7px !important;}
.field.field-notes textarea,.field.field-notes .txt[rows]{max-width:900px !important;width:100% !important;min-height:76px !important;}
.field.full .txt,.field.full textarea,.field.full select{max-width:900px !important;}
.btn,input[type="submit"],button,a.btn{
border:0 !important;
border-radius:10px !important;
font-weight:800 !important;
box-shadow:0 7px 16px rgba(16,47,79,.12) !important;
transition:.18s ease !important;
}
.btn:hover,input[type="submit"]:hover,button:hover,a.btn:hover{
transform:translateY(-1px);
box-shadow:0 10px 22px rgba(16,47,79,.18) !important;
}
.btn-save{background:linear-gradient(135deg,#18a66f,#22c58a) !important;color:#fff !important;}
.btn-edit{background:linear-gradient(135deg,#176b9b,#1fb7c9) !important;color:#fff !important;}
.btn-delete{background:linear-gradient(135deg,#b83232,#df5148) !important;color:#fff !important;}
.btn-new,.btn-back{background:linear-gradient(135deg,#f2b84b,#ffe08a) !important;color:#28313a !important;}
.toolbar{
background:rgba(240,248,253,.75) !important;
border:1px dashed #cfe2ef !important;
border-radius:12px !important;
padding:8px !important;
}
.table-wrap{
border:1px solid #dceaf3 !important;
border-radius:14px !important;
background:#fff !important;
padding:8px !important;
box-shadow:0 8px 18px rgba(16,47,79,.06) !important;
}
.grid,.grid-professional{
border-collapse:separate !important;
border-spacing:0 !important;
overflow:hidden !important;
border-radius:11px !important;
min-width:760px !important;
}
.grid th,.grid-professional th{
background:linear-gradient(135deg,var(--lab-navy),var(--lab-blue)) !important;
color:#fff !important;
border:0 !important;
padding:8px 9px !important;
text-align:center !important;
vertical-align:middle !important;
}
.grid td,.grid-professional td{
border:0 !important;
border-bottom:1px solid #e7eff5 !important;
padding:7px 8px !important;
text-align:center !important;
vertical-align:middle !important;
}
.grid tr:nth-child(even) td{background:#f8fcff !important;}
.grid tr:hover td{background:#eefdff !important;}
.grid-action-cell,.grid-action-head{width:88px !important;min-width:88px !important;max-width:96px !important;}
.grid-select-btn,.grid-action-select input,.grid-action-select a{
background:linear-gradient(135deg,#176b9b,#1fb7c9) !important;
color:#fff !important;
border-radius:999px !important;
padding:5px 12px !important;
display:inline-block !important;
text-decoration:none !important;
}
.grid-delete-btn,.grid-action-delete input,.grid-action-delete a{
background:linear-gradient(135deg,#b83232,#df5148) !important;
color:#fff !important;
border-radius:999px !important;
padding:5px 12px !important;
display:inline-block !important;
text-decoration:none !important;
}
.grid tr:last-child table,.grid .pager table{
margin:6px auto !important;
}
.grid tr:last-child table td,.grid .pager td{
border:0 !important;
padding:2px 4px !important;
}
.grid tr:last-child table a,.grid tr:last-child table span,
.grid .pager a,.grid .pager span{
display:inline-block !important;
min-width:28px !important;
padding:5px 9px !important;
margin:1px !important;
border-radius:8px !important;
border:1px solid #bfd7e8 !important;
background:#f3f9fd !important;
color:var(--lab-blue) !important;
text-decoration:none !important;
font-weight:800 !important;
}
.grid tr:last-child table span,.grid .pager span{
background:linear-gradient(135deg,var(--lab-blue),var(--lab-cyan)) !important;
color:#fff !important;
border-color:var(--lab-blue) !important;
}
.card{
background:linear-gradient(180deg,#ffffff,#f8fcff) !important;
border:1px solid #dceaf3 !important;
border-radius:16px !important;
box-shadow:var(--lab-soft-shadow) !important;
overflow:hidden;
position:relative;
}
.card::after{
content:"";
position:absolute;
inset:auto -35px -45px auto;
width:110px;height:110px;border-radius:50%;
background:rgba(31,183,201,.08);
}
.menu a,.side-link,.section-option,.section-key{
box-shadow:0 8px 18px rgba(16,47,79,.10) !important;
border:1px solid rgba(255,255,255,.18) !important;
transition:.18s ease !important;
}
.menu a:hover,.side-link:hover,.section-option:hover,.section-key:hover{
transform:translateY(-2px);
box-shadow:0 12px 24px rgba(16,47,79,.16) !important;
}
.section-side.panel::before{background:linear-gradient(180deg,var(--lab-green),var(--lab-cyan));}
.section-main.panel::before{background:linear-gradient(180deg,var(--lab-blue),var(--lab-cyan));}
.public-head{
background:linear-gradient(135deg,#0f2d4b,#176b9b 62%,#1fb7c9) !important;
box-shadow:0 14px 34px rgba(16,47,79,.22) !important;
border-bottom:1px solid rgba(255,255,255,.2) !important;
}
.public-nav a,.public-back{
border-radius:999px !important;
background:rgba(255,255,255,.12) !important;
border:1px solid rgba(255,255,255,.22) !important;
transition:.18s ease;
}
.public-nav a:hover,.public-back:hover{
background:#fff !important;
color:var(--lab-navy) !important;
transform:translateY(-1px);
}
.home-clean-page{
min-height:calc(100vh - 110px) !important;
background:
radial-gradient(circle at 18% 22%,rgba(31,183,201,.20),transparent 25%),
radial-gradient(circle at 80% 10%,rgba(25,169,116,.14),transparent 25%),
linear-gradient(135deg,#eef8fc,#ffffff) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:28px !important;
}
.home-logo-only-card{
background:rgba(255,255,255,.88) !important;
border:1px solid rgba(217,231,241,.95) !important;
border-radius:28px !important;
box-shadow:0 24px 60px rgba(16,47,79,.17) !important;
padding:28px 34px !important;
position:relative;
overflow:hidden;
}
.home-logo-only-card::before{
content:"";
position:absolute;inset:0 0 auto 0;height:6px;
background:linear-gradient(90deg,var(--lab-cyan),var(--lab-green),var(--lab-gold));
}
.login-page{
background:
radial-gradient(circle at 15% 20%,rgba(31,183,201,.22),transparent 24%),
radial-gradient(circle at 85% 12%,rgba(25,169,116,.16),transparent 26%),
linear-gradient(135deg,#0f2d4b,#176b9b 58%,#eef8fc 58%,#ffffff) !important;
}
.login-card-pro,.login-card{
border:1px solid rgba(217,231,241,.98) !important;
border-radius:24px !important;
box-shadow:0 22px 55px rgba(16,47,79,.24) !important;
}
.calendar-btn{
background:linear-gradient(135deg,#eaf7ff,#ffffff) !important;
color:var(--lab-blue) !important;
border:1px solid #cde5f3 !important;
box-shadow:none !important;
margin-inline-start:4px !important;
min-width:31px !important;
height:31px !important;
padding:0 !important;
}
.msg{
background:#fff6f6;
border:1px solid #f3d0d0;
border-radius:10px;
padding:7px 10px;
color:#b83232 !important;
display:inline-block !important;
}
@media(max-width:900px){
.wrap:not(.client-portal-wrap),.public-wrap{border-radius:16px !important;margin-top:10px !important;}
.field,.field.field-short,.field.field-date,.field.field-number,.field.field-money,.field.field-code,.field.field-wide{
flex:1 1 100% !important;min-width:100% !important;
}
.field .txt,.field select,.field textarea,.field.field-short .txt,.field.field-date .txt,.field.field-number .txt,.field.field-money .txt,.field.field-code .txt,.field.field-wide .txt{
max-width:none !important;width:100% !important;
}
}
@media(max-width:700px){
.page-head{border-radius:0 !important;padding:10px !important;}
.top-user{width:100%;text-align:center;border-radius:12px;}
.panel{border-radius:13px !important;}
.form-row{padding:7px !important;}
.field{display:block !important;}
.field label,.label{display:block !important;max-width:none !important;min-width:0 !important;margin-bottom:5px !important;}
.toolbar{display:block !important;}
}
/* USER REQUEST: Compact master fields, user-permission modal, and professional login refinements */
.compact-code-field{flex:0 0 170px !important;min-width:150px !important;max-width:180px !important;}
.compact-name-field{flex:0 1 420px !important;min-width:300px !important;max-width:460px !important;}
.code-short{max-width:115px !important;width:115px !important;text-align:center !important;font-weight:bold !important;letter-spacing:.4px;}
.name-medium{max-width:360px !important;}
.grid .grid-code-cell{width:90px !important;max-width:90px !important;text-align:center !important;font-weight:bold;color:#0f4c81;background:#f7fbff;}
.grid .grid-name-cell{min-width:180px !important;max-width:320px !important;}
.master-grid .grid-action-cell{width:86px !important;text-align:center !important;}
.users-wrap{max-width:1320px !important;}
.user-form-panel::before,.users-grid-panel::before{background:linear-gradient(180deg,#176b9b,#1fb7c9) !important;}
.users-form-row{align-items:flex-end !important;gap:10px !important;}
.user-name-field{flex:1 1 280px !important;min-width:260px !important;}
.user-login-field,.user-pass-field{flex:0 0 210px !important;min-width:200px !important;}
.user-role-field{flex:0 0 220px !important;min-width:210px !important;}
.user-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px !important;}
.active-check{background:#f5fbff;border:1px solid #d5e8f4;border-radius:999px;padding:7px 12px;color:#174a7c;font-weight:bold;}
.users-grid .grid-id-cell,.users-grid .grid-active-cell{text-align:center !important;}
.user-permission-open,.grid-select-btn{background:linear-gradient(135deg,#176b9b,#1fb7c9) !important;color:#fff !important;border-radius:999px !important;padding:6px 11px !important;text-decoration:none !important;display:inline-block !important;font-weight:bold !important;}
.permission-modal-overlay{position:fixed;inset:0;z-index:9999;background:rgba(9,30,52,.62);display:flex;align-items:center;justify-content:center;padding:18px;}
.permission-modal-card{width:min(1100px,96vw);max-height:92vh;overflow:auto;background:linear-gradient(180deg,#ffffff,#f8fcff);border:1px solid #d7eaf5;border-radius:24px;box-shadow:0 28px 75px rgba(0,0,0,.28);padding:0 18px 18px;position:relative;}
.permission-modal-card::before{content:"";display:block;height:7px;margin:0 -18px 14px;border-radius:24px 24px 0 0;background:linear-gradient(90deg,#176b9b,#1fb7c9,#19a974,#f6c85f);}
.permission-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:4px 0 12px;border-bottom:1px solid #e3edf5;}
.permission-modal-head h2{margin:0;color:#0f2d4b;font-size:18px;}
.permission-modal-head small{display:block;margin-top:5px;color:#607d8b;line-height:1.8;}
.permission-close{border:0;background:#fbe9e9;color:#b83232;border-radius:50%;width:34px;height:34px;font-size:20px;font-weight:bold;cursor:pointer;}
.permission-user-name{background:#eef8fc;border:1px solid #cde5f3;color:#0f4c81;border-radius:12px;padding:9px 12px;margin:12px 0;font-weight:bold;}
.permission-table-wrap{max-height:54vh;overflow:auto;border-radius:14px;border:1px solid #d8e8f2;background:#fff;}
.permission-grid{min-width:860px !important;}
.permission-grid th{position:sticky;top:0;z-index:2;background:linear-gradient(135deg,#0f2d4b,#176b9b) !important;}
.permission-section-cell{background:#f1f8fc;color:#174a7c;font-weight:bold;min-width:130px;}
.permission-en{display:block;color:#78909c;font-size:11px;margin-top:3px;}
.perm-check-cell{text-align:center !important;width:75px !important;}
.perm-check-cell input{transform:scale(1.15);accent-color:#176b9b;}
.permission-modal-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding-top:14px;}
.empty-permission-note{padding:18px;border:1px dashed #b9d7e7;border-radius:14px;background:#f7fbff;color:#174a7c;text-align:center;font-weight:bold;grid-column:1/-1;}
.login-shell-compact{max-width:430px !important;border-radius:28px !important;background:rgba(255,255,255,.94) !important;box-shadow:0 26px 70px rgba(15,45,75,.30) !important;}
.login-card-pro{padding:20px 28px 22px !important;border-radius:28px !important;}
.login-brand-title{margin:0 0 10px !important;padding-bottom:10px !important;}
.login-brand-title h1{font-size:16px !important;line-height:1.45 !important;margin-top:6px !important;}
.login-badge-top{width:48px !important;height:48px !important;border-radius:16px !important;margin-bottom:4px !important;}
.login-card-pro .login-icon{width:46px !important;height:46px !important;border-radius:15px !important;font-size:22px !important;margin-bottom:6px !important;}
.login-card-pro h2{font-size:19px !important;margin-bottom:12px !important;}
.login-inline-field,.login-card .login-inline-field{margin-bottom:8px !important;gap:8px !important;background:#f8fcff;border:1px solid #e0edf5;border-radius:14px;padding:7px 9px !important;}
.login-inline-field label,.login-card .login-inline-field label{flex:0 0 96px !important;min-width:96px !important;max-width:96px !important;color:#0f4c81 !important;}
.login-inline-field .login-input,.login-card .login-inline-field .login-input{height:35px !important;min-height:35px !important;border-radius:10px !important;background:#fff !important;}
.login-btn{height:39px !important;border-radius:13px !important;margin-top:8px !important;background:linear-gradient(135deg,#176b9b,#1fb7c9) !important;}
.login-card-pro .small-note{margin-top:10px !important;}
@media(max-width:700px){.compact-code-field,.compact-name-field,.user-login-field,.user-pass-field,.user-role-field{flex:1 1 100% !important;min-width:100% !important;max-width:none !important}.code-short,.name-medium{width:100% !important;max-width:none !important}.permission-modal-card{width:98vw;padding:0 10px 12px}.permission-modal-card::before{margin:0 -10px 12px}.permission-modal-head{align-items:center}.permission-table-wrap{max-height:58vh}.user-toolbar{display:block}.active-check{display:block;margin-bottom:8px}}
/* USER REQUEST FIX: login compact spacing + single page-access permission only */
.login-page .login-shell,
.login-shell-compact{
min-height:0 !important;
max-width:430px !important;
width:100% !important;
display:block !important;
overflow:visible !important;
}
.login-page .login-card,
.login-card-pro{
display:block !important;
width:100% !important;
padding:18px 26px 20px !important;
justify-content:flex-start !important;
}
.login-page .login-brand-title{margin-bottom:8px !important;padding-bottom:8px !important;}
.login-page .login-brand-title h1{font-size:15px !important;line-height:1.35 !important;margin-top:5px !important;}
.login-page .login-icon{width:42px !important;height:42px !important;margin:4px auto 6px !important;font-size:20px !important;}
.login-page .login-card h2{font-size:18px !important;margin:0 0 10px !important;}
.login-page .login-card .field,
.login-page .login-card .field.full,
.login-page .login-card .login-field,
.login-page .login-card .login-inline-field{
flex:0 0 auto !important;
min-height:0 !important;
height:auto !important;
display:flex !important;
align-items:center !important;
gap:8px !important;
margin:0 0 8px !important;
padding:6px 8px !important;
border:1px solid #dceaf3 !important;
border-radius:13px !important;
background:#f8fcff !important;
}
.login-page .login-card .login-inline-field label,
.login-page .login-card .field label{
flex:0 0 94px !important;
min-width:94px !important;
max-width:94px !important;
margin:0 !important;
color:#0f4c81 !important;
font-weight:800 !important;
font-size:12px !important;
line-height:1.45 !important;
}
.login-page .login-card .login-input,
.login-page .login-card input[type="text"],
.login-page .login-card input[type="password"]{
flex:1 1 auto !important;
width:auto !important;
max-width:none !important;
height:34px !important;
min-height:34px !important;
margin:0 !important;
border-radius:10px !important;
background:#fff !important;
}
.login-page .login-btn{height:38px !important;margin:8px 0 0 !important;border-radius:13px !important;display:block !important;width:100% !important;}
.login-page .small-note{margin-top:9px !important;margin-bottom:0 !important;}
.permission-modal-card{width:min(980px,96vw) !important;}
.permission-grid{min-width:680px !important;}
.permission-grid th:nth-child(3),.permission-grid td:nth-child(3){width:160px !important;max-width:160px !important;text-align:center !important;}
.perm-use-cell{width:160px !important;max-width:160px !important;text-align:center !important;}
.page-use-check label{font-weight:800 !important;color:#176b9b !important;margin-inline-start:6px !important;}
.page-use-check input{transform:scale(1.18);accent-color:#176b9b;}
.user-permissions-note{color:#607d8b;font-size:11px;line-height:1.7;}
@media(max-width:520px){
.login-page .login-card .field,
.login-page .login-card .field.full,
.login-page .login-card .login-field,
.login-page .login-card .login-inline-field{display:block !important;}
.login-page .login-card .login-inline-field label,
.login-page .login-card .field label{display:block !important;max-width:none !important;min-width:0 !important;margin-bottom:5px !important;}
.login-page .login-card .login-input,
.login-page .login-card input[type="text"],
.login-page .login-card input[type="password"]{width:100% !important;}
}
/* =========================================================
USER REQUEST 21-06: Professional colored Start Here cards
+ first public entry menu in a distinct blue palette
========================================================= */
.section-main.panel{
background:linear-gradient(180deg,#ffffff 0%,#f8fcff 100%) !important;
}
.section-main .section-current-title,
.section-main h3{
border-color:#d9eaf5 !important;
}
.section-option-grid{
gap:16px !important;
}
.section-main .section-option{
position:relative !important;
overflow:hidden !important;
color:#fff !important;
border:1px solid rgba(255,255,255,.28) !important;
border-radius:20px !important;
padding:18px 18px 17px !important;
min-height:112px !important;
box-shadow:0 16px 30px rgba(16,47,79,.17) !important;
transform:translateY(0);
}
.section-main .section-option::before{
content:"";
position:absolute;
inset:-48px auto auto -44px;
width:128px;
height:128px;
border-radius:50%;
background:rgba(255,255,255,.14);
pointer-events:none;
}
.section-main .section-option::after{
content:"";
position:absolute;
inset:auto 14px 13px auto;
width:38px;
height:38px;
border-radius:14px;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.20);
pointer-events:none;
}
body.lang-en .section-main .section-option::after{inset:auto auto 13px 14px;}
.section-main .section-option:hover{
transform:translateY(-5px) !important;
box-shadow:0 22px 42px rgba(16,47,79,.25) !important;
filter:saturate(1.08) brightness(1.02);
}
.section-main .section-option b{
color:#fff !important;
font-size:16px !important;
line-height:1.55 !important;
margin-bottom:8px !important;
position:relative;
z-index:1;
}
.section-main .section-option > span{
color:rgba(255,255,255,.88) !important;
font-size:12.5px !important;
line-height:1.8 !important;
position:relative;
z-index:1;
max-width:calc(100% - 42px);
}
body.lang-en .section-main .section-option > span{max-width:calc(100% - 42px);}
.master-section .section-main .section-option{background:linear-gradient(135deg,#155e9f 0%,#1d8fd0 100%) !important;}
.master-section .section-main .section-option:nth-child(2n){background:linear-gradient(135deg,#0f4c81 0%,#22a6d5 100%) !important;}
.master-section .section-main .section-option:nth-child(3n){background:linear-gradient(135deg,#176b9b 0%,#38bdf8 100%) !important;}
.daily-section .section-main .section-option{background:linear-gradient(135deg,#0f766e 0%,#20b486 100%) !important;}
.daily-section .section-main .section-option:nth-child(2n){background:linear-gradient(135deg,#166534 0%,#22c55e 100%) !important;}
.daily-section .section-main .section-option:nth-child(3n){background:linear-gradient(135deg,#0d9488 0%,#2dd4bf 100%) !important;}
.stored-section .section-main .section-option{background:linear-gradient(135deg,#5b21b6 0%,#8b5cf6 100%) !important;}
.stored-section .section-main .section-option:nth-child(2n){background:linear-gradient(135deg,#6d28d9 0%,#a78bfa 100%) !important;}
.stored-section .section-main .section-option:nth-child(3n){background:linear-gradient(135deg,#4c1d95 0%,#7c3aed 100%) !important;}
.finance-section .section-main .section-option{background:linear-gradient(135deg,#b45309 0%,#f59e0b 100%) !important;}
.finance-section .section-main .section-option:nth-child(2n){background:linear-gradient(135deg,#92400e 0%,#fbbf24 100%) !important;}
.finance-section .section-main .section-option:nth-child(3n){background:linear-gradient(135deg,#c2410c 0%,#fb923c 100%) !important;}
.website-section .section-main .section-option{background:linear-gradient(135deg,#0369a1 0%,#06b6d4 100%) !important;}
.website-section .section-main .section-option:nth-child(2n){background:linear-gradient(135deg,#155e75 0%,#22d3ee 100%) !important;}
.website-section .section-main .section-option:nth-child(3n){background:linear-gradient(135deg,#075985 0%,#38bdf8 100%) !important;}
.admin-section .section-main .section-option{background:linear-gradient(135deg,#334155 0%,#64748b 100%) !important;}
.admin-section .section-main .section-option:nth-child(2n){background:linear-gradient(135deg,#1e3a5f 0%,#3b82f6 100%) !important;}
.admin-section .section-main .section-option:nth-child(3n){background:linear-gradient(135deg,#475569 0%,#94a3b8 100%) !important;}
/* First website entry/public navigation: title teal, buttons blue */
.public-head,
.home-head{
background:linear-gradient(135deg,#0d5f73 0%,#0ea5b7 58%,#20c7d4 100%) !important;
border-bottom:1px solid rgba(255,255,255,.25) !important;
box-shadow:0 16px 36px rgba(8,67,85,.24) !important;
}
.public-head .public-brand,
.home-head .public-brand,
.home-head .brand-text .ar,
.home-head .brand-text .en,
.public-head .public-brand small,
.home-head .brand-text small .ar,
.home-head .brand-text small .en{
color:#ffffff !important;
text-shadow:0 1px 2px rgba(0,0,0,.16);
}
.home-head .brand-logo-box{
background:rgba(255,255,255,.96) !important;
border:1px solid rgba(255,255,255,.86) !important;
box-shadow:0 12px 24px rgba(7,67,86,.18) !important;
}
.home-head .public-nav,
.public-head .public-nav{
background:linear-gradient(135deg,#0b3f78 0%,#075aa8 56%,#0b72c7 100%) !important;
border:1px solid rgba(191,221,247,.90) !important;
border-radius:20px !important;
box-shadow:0 16px 34px rgba(5,48,93,.26), inset 0 1px 0 rgba(255,255,255,.20) !important;
}
.home-head .public-nav a,
.home-head .public-nav button,
.public-head .public-nav a,
.public-head .public-nav button,
.public-nav a,
.public-nav button,
.public-back{
background:linear-gradient(135deg,#1266b3 0%,#0b4d93 100%) !important;
color:#ffffff !important;
border:1px solid rgba(180,218,248,.55) !important;
border-radius:14px !important;
box-shadow:0 8px 18px rgba(3,41,82,.26), inset 0 1px 0 rgba(255,255,255,.20) !important;
}
.home-head .public-nav a:hover,
.home-head .public-nav button:hover,
.public-head .public-nav a:hover,
.public-head .public-nav button:hover,
.public-nav a:hover,
.public-nav button:hover,
.public-back:hover{
background:linear-gradient(135deg,#1d83d4 0%,#0b61b5 100%) !important;
color:#ffffff !important;
transform:translateY(-2px) !important;
box-shadow:0 12px 24px rgba(3,41,82,.34), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.public-nav a.active-public-link,
.public-head .public-nav a.active-public-link,
.home-head .public-nav a.active-public-link{
background:linear-gradient(135deg,#2f9cf4 0%,#075aa8 100%) !important;
border-color:#bfe2ff !important;
box-shadow:0 12px 26px rgba(47,156,244,.34), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
@media(max-width:820px){
.section-main .section-option{min-height:98px !important;padding:16px 15px !important;}
.section-main .section-option > span{max-width:100%;}
}
/* =========================================================
FINAL UI REFINEMENT 21-06
الهدف:
1) تحسين كروت "ابدأ من هنا" بخلفيات فاتحة ونص واضح
2) إعادة تصميم المنيو الأولى بشكل احترافي مع فصل لون العنوان عن لون الأزرار
========================================================= */
/* ---------- Start Here cards: light professional cards with readable text ---------- */
.section-main.panel{
background:linear-gradient(180deg,#ffffff 0%,#f8fbfe 100%) !important;
border:1px solid #d9e6ef !important;
box-shadow:0 12px 28px rgba(16,43,71,.06) !important;
}
.section-main .section-current-title,
.section-main h3{
color:#123b63 !important;
}
.section-option-grid{
gap:14px !important;
}
.section-main .section-option,
.master-section .section-main .section-option,
.master-section .section-main .section-option:nth-child(2n),
.master-section .section-main .section-option:nth-child(3n),
.daily-section .section-main .section-option,
.daily-section .section-main .section-option:nth-child(2n),
.daily-section .section-main .section-option:nth-child(3n),
.stored-section .section-main .section-option,
.stored-section .section-main .section-option:nth-child(2n),
.stored-section .section-main .section-option:nth-child(3n),
.finance-section .section-main .section-option,
.finance-section .section-main .section-option:nth-child(2n),
.finance-section .section-main .section-option:nth-child(3n),
.website-section .section-main .section-option,
.website-section .section-main .section-option:nth-child(2n),
.website-section .section-main .section-option:nth-child(3n),
.admin-section .section-main .section-option,
.admin-section .section-main .section-option:nth-child(2n),
.admin-section .section-main .section-option:nth-child(3n){
background:linear-gradient(180deg,#ffffff 0%,#f9fbfd 100%) !important;
color:#16324d !important;
border:1px solid #dbe6ee !important;
border-radius:18px !important;
min-height:108px !important;
padding:18px 18px 16px !important;
box-shadow:0 10px 22px rgba(16,43,71,.08) !important;
position:relative !important;
overflow:hidden !important;
}
.section-main .section-option::before{
content:"" !important;
position:absolute !important;
inset:0 auto 0 0 !important;
width:6px !important;
height:100% !important;
border-radius:0 !important;
background:#2f80ed !important;
opacity:1 !important;
}
.section-main .section-option::after{
content:"" !important;
position:absolute !important;
inset:-22px -22px auto auto !important;
width:78px !important;
height:78px !important;
border-radius:50% !important;
background:rgba(18,59,99,.05) !important;
border:none !important;
}
body.lang-en .section-main .section-option::after{inset:-22px auto auto -22px !important;}
.section-main .section-option b{
color:#123b63 !important;
font-size:16px !important;
line-height:1.55 !important;
margin-bottom:8px !important;
position:relative !important;
z-index:1 !important;
}
.section-main .section-option > span{
color:#5d6f82 !important;
font-size:13px !important;
line-height:1.8 !important;
position:relative !important;
z-index:1 !important;
max-width:100% !important;
}
.section-main .section-option:hover{
transform:translateY(-4px) !important;
border-color:#c3d7e6 !important;
box-shadow:0 16px 32px rgba(16,43,71,.12) !important;
filter:none !important;
}
.master-section .section-main .section-option::before{background:#1d70b8 !important;}
.daily-section .section-main .section-option::before{background:#1f9d6c !important;}
.stored-section .section-main .section-option::before{background:#7a49d1 !important;}
.finance-section .section-main .section-option::before{background:#d48a18 !important;}
.website-section .section-main .section-option::before{background:#1198b4 !important;}
.admin-section .section-main .section-option::before{background:#5d6b7a !important;}
.master-section .section-main .section-option::after{background:rgba(29,112,184,.06) !important;}
.daily-section .section-main .section-option::after{background:rgba(31,157,108,.06) !important;}
.stored-section .section-main .section-option::after{background:rgba(122,73,209,.06) !important;}
.finance-section .section-main .section-option::after{background:rgba(212,138,24,.07) !important;}
.website-section .section-main .section-option::after{background:rgba(17,152,180,.07) !important;}
.admin-section .section-main .section-option::after{background:rgba(93,107,122,.07) !important;}
/* ---------- First public menu: separate title style and buttons style ---------- */
.public-head,
.home-head{
background:#ffffff !important;
border-bottom:1px solid #d8e5ef !important;
box-shadow:0 10px 28px rgba(16,43,71,.08) !important;
}
.public-head .public-brand,
.home-head .public-brand,
.home-head .brand-with-logo{
background:linear-gradient(135deg,#0d6d83 0%,#12a2b9 100%) !important;
border:1px solid rgba(18,162,185,.16) !important;
border-radius:20px !important;
padding:14px 20px !important;
box-shadow:0 10px 22px rgba(13,109,131,.12) !important;
}
.public-head .public-brand,
.home-head .public-brand{
justify-content:center !important;
}
.public-head .public-brand > span,
.public-head .public-brand small,
.home-head .brand-text .ar,
.home-head .brand-text .en,
.home-head .brand-text small .ar,
.home-head .brand-text small .en{
color:#ffffff !important;
text-shadow:none !important;
}
.home-head .brand-logo-box,
.public-head .has-lab-logo .lab-system-logo{
background:#ffffff !important;
border-color:rgba(255,255,255,.7) !important;
}
.public-head .public-nav,
.home-head .public-nav{
background:linear-gradient(180deg,#f7fbff 0%,#eef5fb 100%) !important;
border:1px solid #d7e4ef !important;
border-radius:20px !important;
padding:14px 16px !important;
box-shadow:0 12px 24px rgba(16,43,71,.06) !important;
}
.public-head .public-nav a,
.public-head .public-nav button,
.home-head .public-nav a,
.home-head .public-nav button,
.public-nav a,
.public-nav button,
.public-back{
background:linear-gradient(180deg,#1e6fb2 0%,#165994 100%) !important;
color:#ffffff !important;
border:1px solid #b8d5eb !important;
border-radius:14px !important;
box-shadow:0 8px 18px rgba(22,89,148,.18), inset 0 1px 0 rgba(255,255,255,.18) !important;
min-width:100px !important;
}
.public-head .public-nav a:hover,
.public-head .public-nav button:hover,
.home-head .public-nav a:hover,
.home-head .public-nav button:hover,
.public-nav a:hover,
.public-nav button:hover,
.public-back:hover{
background:linear-gradient(180deg,#2683cc 0%,#1b68a8 100%) !important;
color:#ffffff !important;
transform:translateY(-2px) !important;
box-shadow:0 12px 22px rgba(22,89,148,.24), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.public-nav a.active-public-link,
.public-head .public-nav a.active-public-link,
.home-head .public-nav a.active-public-link{
background:linear-gradient(180deg,#f4c95d 0%,#e7b83c 100%) !important;
color:#21364d !important;
border-color:#f1d98c !important;
box-shadow:0 10px 20px rgba(231,184,60,.28) !important;
}
.public-head .lang-toggle,
.home-head .lang-toggle,
.public-nav .lang-toggle{
position:static !important;
top:auto !important;
left:auto !important;
min-width:92px !important;
background:linear-gradient(180deg,#ffffff 0%,#f4f8fb 100%) !important;
color:#12466f !important;
border:1px solid #c8dae8 !important;
box-shadow:0 6px 14px rgba(16,43,71,.08) !important;
}
.public-head .lang-toggle:hover,
.home-head .lang-toggle:hover,
.public-nav .lang-toggle:hover{
background:#ffffff !important;
color:#0f5d91 !important;
}
@media(max-width:820px){
.section-main .section-option,
.master-section .section-main .section-option,
.daily-section .section-main .section-option,
.stored-section .section-main .section-option,
.finance-section .section-main .section-option,
.website-section .section-main .section-option,
.admin-section .section-main .section-option{
min-height:96px !important;
padding:16px 15px !important;
}
.public-head .public-brand,
.home-head .brand-with-logo{
border-radius:16px !important;
padding:12px 14px !important;
}
.public-head .public-nav,
.home-head .public-nav{
padding:10px !important;
gap:8px !important;
}
}
/* =========================================================
CODE LAB BRAND UPDATE 21-06
إظهار لوجو CODE LAB في الصفحات والتقارير بدون قص أو تشويه
========================================================= */
.brand.has-lab-logo,
.public-brand.has-lab-logo,
.brand-with-logo{
align-items:center !important;
}
.lab-system-logo,
.brand-logo-img,
.home-clean-logo,
.receipt-logo,
.print-doc-head img,
.label-head img{
object-fit:contain !important;
background:#ffffff !important;
border-radius:12px !important;
padding:4px !important;
border:1px solid #dbe6ef !important;
box-shadow:0 6px 14px rgba(16,43,71,.10) !important;
}
.lab-system-logo{width:64px !important;height:52px !important;}
.public-brand .lab-system-logo{width:76px !important;height:58px !important;}
.brand-logo-img{max-width:210px !important;width:210px !important;height:auto !important;}
.home-clean-logo{max-width:390px !important;width:100% !important;height:auto !important;}
.receipt-logo{width:155px !important;height:auto !important;}
.label-head img{width:92px !important;height:auto !important;}
.system-title .ar,
.system-title .en,
.public-brand > span,
.brand-text .ar,
.brand-text .en{
letter-spacing:.5px !important;
font-weight:900 !important;
}
@media print{
.lab-system-logo,
.receipt-logo,
.print-doc-head img,
.label-head img{
display:block !important;
object-fit:contain !important;
background:#fff !important;
box-shadow:none !important;
}
}
@media(max-width:700px){
.lab-system-logo{width:54px !important;height:44px !important;}
.public-brand .lab-system-logo{width:62px !important;height:48px !important;}
}
/* =========================================================
FINAL CODE LAB LOGO UPDATE
استخدام اللوجو النهائي المرسل وعرضه بدون قص أو تشويه
========================================================= */
.brand.has-lab-logo,
.public-brand.has-lab-logo{
align-items:center !important;
}
.lab-system-logo{
width:94px !important;
height:62px !important;
object-fit:contain !important;
background:#ffffff !important;
border-radius:12px !important;
padding:4px !important;
box-shadow:0 4px 12px rgba(12,42,70,.12) !important;
flex:0 0 auto !important;
}
.public-brand.has-lab-logo .lab-system-logo{
width:118px !important;
height:76px !important;
}
.brand-logo-img,
.home-clean-logo,
.hero-logo-img,
.print-doc-head img,
.receipt-logo,
.label-head img{
content:url('../Images/Code_Lab_Logo.png');
object-fit:contain !important;
background:#ffffff !important;
}
.brand-logo-img{
width:135px !important;
max-width:135px !important;
height:auto !important;
}
.home-clean-logo{
max-width:410px !important;
width:100% !important;
height:auto !important;
}
.print-doc-head img{
width:190px !important;
height:auto !important;
border-radius:8px !important;
}
.receipt-logo{
width:170px !important;
height:auto !important;
}
.label-head img{
width:120px !important;
height:auto !important;
}
@media print{
.print-doc-head img,
.receipt-logo,
.label-head img{
display:block !important;
object-fit:contain !important;
}
}
@media(max-width:700px){
.lab-system-logo{
width:78px !important;
height:52px !important;
}
.public-brand.has-lab-logo .lab-system-logo{
width:96px !important;
height:64px !important;
}
}
/* --- First page NIPT intro image --- */
.home-nipt-page{
align-items:flex-start !important;
padding:28px 16px 42px !important;
background:linear-gradient(180deg,#f7fbff,#eef6fb) !important;
}
.home-nipt-card{
max-width:760px;
width:100%;
margin:0 auto;
background:#ffffff;
border:1px solid #dce8f2;
border-radius:22px;
padding:14px;
box-shadow:0 18px 42px rgba(20,65,105,.10);
}
.home-nipt-image{
display:block;
width:100%;
height:auto;
border-radius:16px;
}
@media(max-width:820px){
.home-nipt-page{padding:16px 8px 28px !important;}
.home-nipt-card{padding:8px;border-radius:16px;}
.home-nipt-image{border-radius:12px;}
}
/* About page image-only section */
.about-media-wrap{
max-width:920px !important;
}
.about-media-panel{
padding:18px !important;
border-radius:14px !important;
}
.about-media-panel h2{
text-align:center !important;
margin-bottom:18px !important;
}
.about-image-gallery{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:18px !important;
}
.about-lab-image{
display:block !important;
width:100% !important;
max-width:720px !important;
height:auto !important;
background:#fff !important;
border-radius:10px !important;
box-shadow:0 8px 24px rgba(23,74,124,.12) !important;
border:1px solid #e3edf5 !important;
}
.about-lab-image-square{
max-width:760px !important;
}
@media(max-width:700px){
.about-media-wrap{padding:10px !important;}
.about-media-panel{padding:10px !important;}
.about-image-gallery{gap:12px !important;}
.about-lab-image{border-radius:7px !important;}
}
/* =========================================================
FINAL FIX: make subtitle under logo readable + yellow language buttons
========================================================= */
.home-head .brand-text small,
.home-head .brand-text small .ar,
.home-head .brand-text small .en,
.public-head .public-brand small,
.public-head .public-brand small .ar,
.public-head .public-brand small .en,
.public-brand.has-lab-logo small,
.public-brand.has-lab-logo small span,
.brand-with-logo .brand-text small,
.brand-with-logo .brand-text small span{
color:#fff9d9 !important;
font-weight:700 !important;
opacity:1 !important;
text-shadow:0 1px 2px rgba(0,0,0,.35) !important;
}
.top-language-switch .lang-toggle,
.lang-toggle,
.lang-switch button,
.lang-switch .lang-toggle,
.public-head .lang-toggle,
.home-head .lang-toggle,
.public-nav .lang-toggle{
background:linear-gradient(180deg,#ffe88a 0%,#f4c542 100%) !important;
color:#3a2b00 !important;
border:1px solid #d6a92e !important;
box-shadow:0 8px 18px rgba(170,127,12,.22), inset 0 1px 0 rgba(255,255,255,.45) !important;
font-weight:800 !important;
}
.top-language-switch .lang-toggle:hover,
.lang-toggle:hover,
.lang-switch button:hover,
.lang-switch .lang-toggle:hover,
.public-head .lang-toggle:hover,
.home-head .lang-toggle:hover,
.public-nav .lang-toggle:hover{
background:linear-gradient(180deg,#ffef9d 0%,#f1be2f 100%) !important;
color:#2f2200 !important;
}
/* =========================================================
Login password change + password strength indicator
========================================================= */
.login-success-panel,
.change-password-panel{
margin-top:12px !important;
padding:12px !important;
border-radius:14px !important;
border:1px solid #dbe6ef !important;
background:#f8fbff !important;
box-shadow:0 6px 16px rgba(16,43,71,.07) !important;
}
.login-success-text{
color:#0f6f4f !important;
font-weight:800 !important;
text-align:center !important;
margin-bottom:8px !important;
}
.login-action-row{
display:flex !important;
gap:8px !important;
justify-content:center !important;
flex-wrap:wrap !important;
}
.change-password-panel h3{
margin:0 0 10px !important;
color:#174a7c !important;
text-align:center !important;
font-size:16px !important;
}
.password-strength-wrap{
width:100% !important;
height:9px !important;
background:#e5edf5 !important;
border-radius:999px !important;
overflow:hidden !important;
margin:8px 0 5px !important;
border:1px solid #d3e1ee !important;
}
.password-strength-bar{
height:100% !important;
width:0%;
border-radius:999px !important;
transition:width .25s ease, background .25s ease !important;
}
.password-strength-bar.empty{background:transparent !important;}
.password-strength-bar.weak{background:#d9534f !important;}
.password-strength-bar.medium{background:#f0ad4e !important;}
.password-strength-bar.strong{background:#27ae60 !important;}
.password-strength-text{
font-size:11.5px !important;
font-weight:800 !important;
color:#52677a !important;
margin-bottom:7px !important;
}
.password-rules{
margin:6px 0 0 !important;
padding-inline-start:18px !important;
color:#52677a !important;
line-height:1.8 !important;
font-size:11.5px !important;
}
.password-rules li::marker{color:#174a7c !important;}
.change-pass-toggle{
background:linear-gradient(180deg,#ffe88a 0%,#f4c542 100%) !important;
color:#3a2b00 !important;
}
@media(max-width:700px){
.login-action-row .btn{width:100% !important;}
}
/* =========================================================
FINAL LOGIN FLOW: login + change password side by side, modal after verification
========================================================= */
.login-main-action-row{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
margin-top:12px !important;
flex-wrap:nowrap !important;
}
.login-main-action-row .btn{
flex:1 1 0 !important;
width:auto !important;
min-width:0 !important;
margin:0 !important;
text-align:center !important;
white-space:normal !important;
}
.change-password-overlay{
position:fixed !important;
inset:0 !important;
z-index:20000 !important;
background:rgba(10,28,45,.55) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:18px !important;
}
.change-password-window{
width:100% !important;
max-width:520px !important;
background:#ffffff !important;
border-radius:18px !important;
border:1px solid #dbe6ef !important;
box-shadow:0 24px 60px rgba(0,0,0,.28) !important;
padding:18px !important;
direction:rtl !important;
}
body.lang-en .change-password-window{
direction:ltr !important;
text-align:left !important;
}
.change-password-window h3{
margin:0 0 6px !important;
color:#174a7c !important;
text-align:center !important;
font-size:18px !important;
font-weight:900 !important;
}
.change-password-note{
margin:0 0 12px !important;
text-align:center !important;
color:#52677a !important;
font-weight:700 !important;
line-height:1.7 !important;
}
.change-password-actions{
display:flex !important;
justify-content:center !important;
gap:10px !important;
margin-top:10px !important;
flex-wrap:nowrap !important;
}
.change-password-actions .btn{
flex:1 1 0 !important;
margin:0 !important;
width:auto !important;
}
@media(max-width:700px){
.login-main-action-row,
.change-password-actions{
flex-direction:column !important;
flex-wrap:wrap !important;
}
.login-main-action-row .btn,
.change-password-actions .btn{
width:100% !important;
}
.change-password-window{
max-height:92vh !important;
overflow:auto !important;
padding:14px !important;
}
}
.change-password-msg{
display:block !important;
text-align:center !important;
margin:8px 0 !important;
color:#c0392b !important;
font-weight:900 !important;
}
/* =========================================================
FINAL FIX: professional change-password modal layout
========================================================= */
.change-password-overlay{
position:fixed !important;
inset:0 !important;
z-index:20000 !important;
background:rgba(7,24,39,.60) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:20px !important;
}
.change-password-window{
width:min(720px,96vw) !important;
max-width:720px !important;
max-height:92vh !important;
overflow:auto !important;
background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
border:1px solid #d6e4ef !important;
border-radius:24px !important;
box-shadow:0 30px 80px rgba(0,0,0,.25) !important;
padding:0 !important;
direction:rtl !important;
}
body.lang-en .change-password-window{
direction:ltr !important;
text-align:left !important;
}
.change-password-header{
padding:22px 26px 16px !important;
border-bottom:1px solid #e4edf4 !important;
background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%) !important;
border-radius:24px 24px 0 0 !important;
}
.change-password-window h3{
margin:0 0 8px !important;
text-align:center !important;
color:#174a7c !important;
font-size:28px !important;
font-weight:900 !important;
}
.change-password-note{
margin:0 !important;
text-align:center !important;
color:#607283 !important;
font-size:14px !important;
line-height:1.8 !important;
font-weight:700 !important;
}
.change-password-body{
display:grid !important;
grid-template-columns:260px 1fr !important;
gap:18px !important;
padding:20px 24px 12px !important;
align-items:start !important;
}
body.lang-en .change-password-body{
grid-template-columns:1fr 260px !important;
}
.change-password-guidelines{
background:#f7fbff !important;
border:1px solid #dce8f2 !important;
border-radius:18px !important;
padding:16px 18px !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.75) !important;
}
.change-password-guidelines-title{
color:#174a7c !important;
font-weight:900 !important;
font-size:15px !important;
margin-bottom:10px !important;
padding-bottom:8px !important;
border-bottom:1px solid #e1ebf3 !important;
}
.change-password-form{
display:flex !important;
flex-direction:column !important;
gap:16px !important;
}
.cp-field{
background:#ffffff !important;
border:1px solid #dce8f2 !important;
border-radius:18px !important;
padding:16px 18px !important;
box-shadow:0 8px 20px rgba(17,67,105,.05) !important;
}
.cp-field label{
display:block !important;
margin:0 0 8px !important;
color:#174a7c !important;
font-size:13px !important;
font-weight:900 !important;
}
.cp-input,
.change-password-window .cp-input,
.change-password-window input[type="password"]{
width:100% !important;
height:42px !important;
min-height:42px !important;
margin:0 !important;
border:1px solid #c9d9e5 !important;
border-radius:12px !important;
background:#ffffff !important;
box-shadow:none !important;
}
.cp-input:focus,
.change-password-window input[type="password"]:focus{
border-color:#1d78b5 !important;
box-shadow:0 0 0 3px rgba(29,120,181,.12) !important;
outline:none !important;
}
.password-strength-wrap{
width:100% !important;
height:10px !important;
background:#e8eef4 !important;
border-radius:999px !important;
overflow:hidden !important;
margin:12px 0 6px !important;
border:0 !important;
}
.password-strength-bar{
height:100% !important;
width:0 !important;
border-radius:999px !important;
transition:width .25s ease, background .25s ease !important;
}
.password-strength-text{
font-size:12px !important;
font-weight:800 !important;
color:#5d7183 !important;
margin:0 !important;
}
.password-rules{
margin:0 !important;
padding-inline-start:20px !important;
color:#4f6476 !important;
font-size:12.5px !important;
line-height:2 !important;
}
.password-rules li{
margin:0 !important;
}
.password-rules li::marker{
color:#174a7c !important;
}
.change-password-msg{
display:block !important;
margin:0 24px 12px !important;
padding:10px 12px !important;
text-align:center !important;
border-radius:12px !important;
background:#fff7f7 !important;
border:1px solid #f2cccc !important;
color:#c0392b !important;
font-weight:800 !important;
min-height:20px !important;
}
.change-password-msg:empty{
display:none !important;
}
.change-password-actions{
display:flex !important;
justify-content:space-between !important;
gap:12px !important;
padding:0 24px 24px !important;
margin-top:0 !important;
flex-wrap:nowrap !important;
}
.change-password-actions .btn{
flex:1 1 0 !important;
margin:0 !important;
min-height:44px !important;
border-radius:14px !important;
font-size:13px !important;
font-weight:900 !important;
}
.change-password-actions .btn-back{
background:linear-gradient(180deg,#f7d77a 0%,#efc14a 100%) !important;
color:#2f2a18 !important;
}
.change-password-actions .btn-save{
background:linear-gradient(180deg,#27c58a 0%,#1ea86f 100%) !important;
color:#ffffff !important;
}
@media(max-width:760px){
.change-password-window{width:96vw !important;}
.change-password-header{padding:18px 16px 14px !important;}
.change-password-window h3{font-size:22px !important;}
.change-password-body{grid-template-columns:1fr !important; padding:14px 14px 10px !important; gap:12px !important;}
body.lang-en .change-password-body{grid-template-columns:1fr !important;}
.cp-field,.change-password-guidelines{padding:14px !important;}
.change-password-msg{margin:0 14px 10px !important;}
.change-password-actions{padding:0 14px 16px !important; flex-direction:column !important;}
.change-password-actions .btn{width:100% !important;}
}
/* =========================================================
FINAL FIX: remove strength text line + colored professional frame
========================================================= */
.change-password-window{
position:relative !important;
border:2px solid transparent !important;
background:
linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) padding-box,
linear-gradient(135deg,#0d6d83 0%,#16b6c8 38%,#f4c542 72%,#1ea86f 100%) border-box !important;
box-shadow:0 30px 85px rgba(0,0,0,.28), 0 0 0 7px rgba(255,255,255,.22) !important;
}
.change-password-window::before{
content:"" !important;
display:block !important;
height:7px !important;
background:linear-gradient(90deg,#0d6d83 0%,#16b6c8 38%,#f4c542 72%,#1ea86f 100%) !important;
border-radius:22px 22px 0 0 !important;
}
.change-password-header{
padding-top:18px !important;
}
.password-strength-text,
#pwdStrengthText{
display:none !important;
}
.password-strength-wrap{
margin:12px 0 0 !important;
}
.change-password-body{
border-left:4px solid rgba(22,182,200,.18) !important;
border-right:4px solid rgba(244,197,66,.20) !important;
margin:0 18px !important;
padding-left:18px !important;
padding-right:18px !important;
border-radius:18px !important;
background:linear-gradient(180deg,rgba(247,251,255,.70),rgba(255,255,255,.92)) !important;
}
.cp-field{
border-top:3px solid #16b6c8 !important;
}
.cp-field:nth-child(2){
border-top-color:#f4c542 !important;
}
.change-password-guidelines{
border-top:3px solid #1ea86f !important;
}
@media(max-width:760px){
.change-password-body{
margin:0 12px !important;
padding-left:12px !important;
padding-right:12px !important;
}
}
/* =====================================================================
USER REQUEST 2026-06-24: Request Test page field sizing/spacing polish
Scope is intentionally limited to .request-test-page so previous system
styles, fonts and other page updates remain untouched.
===================================================================== */
.request-test-page .public-wrap{
max-width:1180px !important;
}
.request-test-page .panel{
padding:0 20px 22px !important;
}
.request-test-page .panel:before{
margin:0 -20px 16px !important;
}
.request-test-page .panel h2{
margin-bottom:18px !important;
}
.request-test-page .form-row{
display:flex !important;
align-items:stretch !important;
gap:12px !important;
margin:0 0 14px !important;
padding:12px !important;
border-radius:16px !important;
}
.request-test-page .field,
.request-test-page .price-field,
.request-test-page .add-test-field{
display:flex !important;
flex-direction:column !important;
justify-content:flex-start !important;
gap:6px !important;
padding:10px 11px !important;
min-width:0 !important;
box-sizing:border-box !important;
}
.request-test-page .field label,
.request-test-page .price-field label{
display:block !important;
width:100% !important;
min-width:0 !important;
max-width:none !important;
height:auto !important;
min-height:32px !important;
margin:0 !important;
padding:7px 10px !important;
line-height:1.45 !important;
text-align:inherit !important;
box-sizing:border-box !important;
}
.request-test-page .field .txt,
.request-test-page .field select,
.request-test-page .field textarea,
.request-test-page input[type="text"],
.request-test-page input[type="email"],
.request-test-page input[type="date"],
.request-test-page input[type="file"]{
width:100% !important;
max-width:none !important;
min-width:0 !important;
height:38px !important;
min-height:38px !important;
padding:7px 10px !important;
line-height:1.45 !important;
box-sizing:border-box !important;
}
.request-test-page select.txt,
.request-test-page .field select{
padding-top:6px !important;
padding-bottom:6px !important;
}
.request-test-page textarea,
.request-test-page .field.full textarea,
.request-test-page #txtNotes{
width:100% !important;
max-width:none !important;
min-height:92px !important;
height:92px !important;
line-height:1.7 !important;
resize:vertical !important;
}
.request-test-page .field.full{
flex:1 1 100% !important;
max-width:100% !important;
}
.request-test-page .field.full .txt,
.request-test-page .field.full textarea,
.request-test-page .field.full select{
max-width:none !important;
}
/* Balanced row widths */
.request-test-page #txtName,
.request-test-page #txtEmail,
.request-test-page #txtAddress{
min-width:0 !important;
}
.request-test-page #txtPhone,
.request-test-page #txtNational{
direction:ltr !important;
text-align:left !important;
}
.request-test-page #txtBirthDate,
.request-test-page #txtPreferredDate{
max-width:190px !important;
}
.request-test-page .field:has(#txtBirthDate),
.request-test-page .field:has(#txtPreferredDate){
flex:0 1 230px !important;
}
.request-test-page .field:has(#ddlGender){
flex:0 1 210px !important;
}
.request-test-page .field:has(#ddlTest){
flex:2 1 360px !important;
}
.request-test-page .field:has(#txtAddress){
flex:2 1 460px !important;
}
.request-test-page .field:has(#fuDoc){
flex:1 1 280px !important;
}
.request-test-page .price-field{
flex:0 1 210px !important;
min-width:190px !important;
}
.request-test-page .add-test-field{
flex:0 1 220px !important;
min-width:200px !important;
justify-content:flex-end !important;
}
.request-test-page .price-badge{
width:100% !important;
min-height:38px !important;
line-height:38px !important;
margin:0 !important;
box-sizing:border-box !important;
}
.request-test-page .btn-add-test{
width:100% !important;
min-height:38px !important;
margin:0 !important;
padding:8px 12px !important;
line-height:1.45 !important;
}
.request-test-page .calendar-btn{
position:absolute !important;
top:auto !important;
bottom:11px !important;
left:14px !important;
width:30px !important;
height:30px !important;
line-height:28px !important;
padding:0 !important;
margin:0 !important;
border-radius:8px !important;
}
body.lang-en .request-test-page .calendar-btn{
left:auto !important;
right:14px !important;
}
.request-test-page .field:has(.date-input){
position:relative !important;
}
.request-test-page .field:has(.date-input) .date-input{
padding-left:42px !important;
}
body.lang-en .request-test-page .field:has(.date-input) .date-input{
padding-left:10px !important;
padding-right:42px !important;
}
.request-test-page .selected-tests-window{
margin:16px 0 !important;
}
.request-test-page .selected-tests-grid th,
.request-test-page .selected-tests-grid td{
line-height:1.55 !important;
}
.request-test-page .btn-save{
display:block !important;
margin:14px auto 4px !important;
min-width:260px !important;
padding:11px 22px !important;
}
.request-test-page .msg{
text-align:center !important;
line-height:1.7 !important;
}
@media(max-width:900px){
.request-test-page .field,
.request-test-page .price-field,
.request-test-page .add-test-field,
.request-test-page .field:has(#txtBirthDate),
.request-test-page .field:has(#txtPreferredDate),
.request-test-page .field:has(#ddlGender),
.request-test-page .field:has(#ddlTest),
.request-test-page .field:has(#txtAddress),
.request-test-page .field:has(#fuDoc){
flex:1 1 calc(50% - 12px) !important;
min-width:280px !important;
}
.request-test-page #txtBirthDate,
.request-test-page #txtPreferredDate{
max-width:none !important;
}
}
@media(max-width:700px){
.request-test-page .public-wrap{padding:8px !important;}
.request-test-page .panel{padding:0 10px 14px !important;}
.request-test-page .panel:before{margin:0 -10px 12px !important;}
.request-test-page .form-row{gap:8px !important;padding:8px !important;margin-bottom:10px !important;}
.request-test-page .field,
.request-test-page .price-field,
.request-test-page .add-test-field,
.request-test-page .field:has(#txtBirthDate),
.request-test-page .field:has(#txtPreferredDate),
.request-test-page .field:has(#ddlGender),
.request-test-page .field:has(#ddlTest),
.request-test-page .field:has(#txtAddress),
.request-test-page .field:has(#fuDoc){
flex:1 1 100% !important;
min-width:100% !important;
padding:8px !important;
}
.request-test-page .field label,
.request-test-page .price-field label{
min-height:0 !important;
margin-bottom:0 !important;
}
.request-test-page .btn-save{width:100% !important;min-width:0 !important;}
}
/* Final class-based widths for RequestTest.aspx (works without relying on :has support) */
.request-test-page .req-wide{flex:1.35 1 300px !important;}
.request-test-page .req-phone{flex:0 1 230px !important;}
.request-test-page .req-id{flex:1 1 280px !important;}
.request-test-page .req-date{flex:0 1 230px !important;}
.request-test-page .req-small{flex:0 1 210px !important;}
.request-test-page .req-test{flex:2 1 380px !important;}
.request-test-page .req-collection{flex:1 1 260px !important;}
.request-test-page .req-address{flex:2 1 460px !important;}
.request-test-page .req-file{flex:1 1 280px !important;}
.request-test-page .req-notes{flex:1 1 100% !important;}
.request-test-page .req-date .txt{max-width:190px !important;}
@media(max-width:900px){
.request-test-page .req-wide,
.request-test-page .req-phone,
.request-test-page .req-id,
.request-test-page .req-date,
.request-test-page .req-small,
.request-test-page .req-test,
.request-test-page .req-collection,
.request-test-page .req-address,
.request-test-page .req-file{
flex:1 1 calc(50% - 12px) !important;
min-width:280px !important;
}
.request-test-page .req-date .txt{max-width:none !important;}
}
@media(max-width:700px){
.request-test-page .req-wide,
.request-test-page .req-phone,
.request-test-page .req-id,
.request-test-page .req-date,
.request-test-page .req-small,
.request-test-page .req-test,
.request-test-page .req-collection,
.request-test-page .req-address,
.request-test-page .req-file,
.request-test-page .req-notes{
flex:1 1 100% !important;
min-width:100% !important;
}
}
/* =========================================================
FINAL FIX 24-06: RequestTest professional inline fields
- labels beside controls, not large blocks above
- keeps original font family and previous page work intact
========================================================= */
.request-test-page .public-wrap{
max-width:1180px !important;
padding:8px 12px 18px !important;
}
.request-test-page .panel{
padding:10px 12px 16px !important;
border-radius:16px !important;
}
.request-test-page .panel h2{
margin:0 0 16px !important;
padding:12px 18px !important;
border-radius:15px !important;
background:linear-gradient(135deg,#0b5879,#1583a8) !important;
color:#fff !important;
font-size:20px !important;
line-height:1.4 !important;
text-align:center !important;
}
.request-test-page .form-row{
display:flex !important;
flex-wrap:wrap !important;
align-items:stretch !important;
gap:10px !important;
margin:0 0 12px !important;
padding:10px 12px !important;
border:1px solid #dbeef7 !important;
border-radius:16px !important;
background:linear-gradient(135deg,#fbfeff,#f4fbfe) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.request-test-page .field,
.request-test-page .price-field,
.request-test-page .add-test-field{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:8px !important;
min-height:52px !important;
margin:0 !important;
padding:8px 9px !important;
border:1px solid #e1eef5 !important;
border-radius:14px !important;
background:#ffffff !important;
box-shadow:0 4px 12px rgba(16,91,121,.055) !important;
}
.request-test-page .field label,
.request-test-page .price-field label{
display:flex !important;
flex:0 0 126px !important;
min-width:126px !important;
max-width:126px !important;
width:126px !important;
min-height:34px !important;
height:auto !important;
margin:0 !important;
padding:7px 9px !important;
align-items:center !important;
justify-content:flex-start !important;
color:#0c405b !important;
background:linear-gradient(135deg,#eaf8fb,#dff1f7) !important;
border:1px solid #cce7f0 !important;
border-right:4px solid #1aa4bd !important;
border-radius:10px !important;
font-family:Tahoma,Arial,sans-serif !important;
font-size:12px !important;
font-weight:800 !important;
line-height:1.45 !important;
white-space:normal !important;
text-align:right !important;
box-sizing:border-box !important;
}
body.lang-en .request-test-page .field label,
body.lang-en .request-test-page .price-field label{
text-align:left !important;
border-right:1px solid #cce7f0 !important;
border-left:4px solid #1aa4bd !important;
}
.request-test-page .field .txt,
.request-test-page .field select,
.request-test-page .field textarea,
.request-test-page input[type="text"],
.request-test-page input[type="email"],
.request-test-page input[type="date"],
.request-test-page input[type="file"]{
display:block !important;
flex:1 1 auto !important;
width:100% !important;
max-width:none !important;
min-width:0 !important;
min-height:34px !important;
height:34px !important;
margin:0 !important;
padding:6px 10px !important;
border:1px solid #bfd8e5 !important;
border-radius:10px !important;
background:#fff !important;
font-family:Tahoma,Arial,sans-serif !important;
font-size:12px !important;
line-height:1.45 !important;
color:#1f3c4d !important;
box-sizing:border-box !important;
}
.request-test-page .field select{
padding-top:5px !important;
padding-bottom:5px !important;
}
.request-test-page .req-notes,
.request-test-page .field.full{
flex:1 1 100% !important;
max-width:100% !important;
align-items:flex-start !important;
}
.request-test-page .req-notes label,
.request-test-page .field.full label{
flex:0 0 126px !important;
min-width:126px !important;
max-width:126px !important;
}
.request-test-page textarea,
.request-test-page .field.full textarea,
.request-test-page #txtNotes{
flex:1 1 auto !important;
width:100% !important;
max-width:none !important;
min-height:74px !important;
height:74px !important;
resize:vertical !important;
line-height:1.7 !important;
}
.request-test-page .price-badge{
flex:1 1 auto !important;
width:100% !important;
min-height:34px !important;
line-height:32px !important;
margin:0 !important;
padding:0 12px !important;
border-radius:10px !important;
box-sizing:border-box !important;
}
.request-test-page .add-test-field{
justify-content:center !important;
}
.request-test-page .btn-add-test{
width:100% !important;
min-height:36px !important;
margin:0 !important;
padding:8px 12px !important;
border-radius:10px !important;
}
.request-test-page .calendar-btn{
position:static !important;
flex:0 0 32px !important;
width:32px !important;
height:34px !important;
min-width:32px !important;
margin:0 !important;
padding:0 !important;
line-height:32px !important;
border-radius:10px !important;
}
.request-test-page .field:has(.date-input) .date-input,
body.lang-en .request-test-page .field:has(.date-input) .date-input{
padding-left:10px !important;
padding-right:10px !important;
}
.request-test-page .req-wide{flex:1.35 1 330px !important;}
.request-test-page .req-phone{flex:0 1 270px !important;}
.request-test-page .req-id{flex:1.1 1 380px !important;}
.request-test-page .req-date{flex:0 1 285px !important;}
.request-test-page .req-small{flex:0 1 250px !important;}
.request-test-page .req-test{flex:1.5 1 410px !important;}
.request-test-page .req-collection{flex:1 1 315px !important;}
.request-test-page .req-address{flex:1.6 1 500px !important;}
.request-test-page .req-file{flex:1 1 340px !important;}
.request-test-page .price-field{flex:0 1 285px !important;min-width:285px !important;}
.request-test-page .add-test-field{flex:0 1 230px !important;min-width:230px !important;}
.request-test-page .req-date .txt{
max-width:none !important;
}
@media(max-width:900px){
.request-test-page .field,
.request-test-page .price-field,
.request-test-page .add-test-field,
.request-test-page .req-wide,
.request-test-page .req-phone,
.request-test-page .req-id,
.request-test-page .req-date,
.request-test-page .req-small,
.request-test-page .req-test,
.request-test-page .req-collection,
.request-test-page .req-address,
.request-test-page .req-file{
flex:1 1 calc(50% - 10px) !important;
min-width:320px !important;
}
}
@media(max-width:700px){
.request-test-page .form-row{padding:8px !important;gap:8px !important;}
.request-test-page .field,
.request-test-page .price-field,
.request-test-page .add-test-field,
.request-test-page .req-wide,
.request-test-page .req-phone,
.request-test-page .req-id,
.request-test-page .req-date,
.request-test-page .req-small,
.request-test-page .req-test,
.request-test-page .req-collection,
.request-test-page .req-address,
.request-test-page .req-file,
.request-test-page .req-notes{
flex:1 1 100% !important;
min-width:100% !important;
display:flex !important;
}
.request-test-page .field label,
.request-test-page .price-field label{
flex:0 0 112px !important;
min-width:112px !important;
max-width:112px !important;
width:112px !important;
font-size:11px !important;
padding:6px 7px !important;
}
}
/* =========================================================
FINAL ADJUSTMENT 24-06: RequestTest field proportions
- national/passport and collection option reduced
- date fields widened so full date is visible
- keeps the same font and all previous edits
========================================================= */
.request-test-page .req-id{
flex:0 1 330px !important;
min-width:330px !important;
max-width:350px !important;
}
.request-test-page .req-date{
flex:0 1 360px !important;
min-width:350px !important;
max-width:380px !important;
}
.request-test-page .req-date .txt,
.request-test-page .req-date .date-input,
.request-test-page #txtBirthDate,
.request-test-page #txtPreferredDate{
min-width:190px !important;
width:100% !important;
max-width:none !important;
letter-spacing:.2px !important;
}
.request-test-page .req-collection{
flex:0 1 275px !important;
min-width:275px !important;
max-width:295px !important;
}
.request-test-page .req-test{
flex:1.35 1 365px !important;
min-width:365px !important;
}
.request-test-page .price-field{
flex:0 1 250px !important;
min-width:250px !important;
}
.request-test-page .add-test-field{
flex:0 1 215px !important;
min-width:215px !important;
}
@media(max-width:900px){
.request-test-page .req-id,
.request-test-page .req-date,
.request-test-page .req-collection,
.request-test-page .req-test,
.request-test-page .price-field,
.request-test-page .add-test-field{
flex:1 1 calc(50% - 10px) !important;
min-width:320px !important;
max-width:none !important;
}
.request-test-page .req-date .txt,
.request-test-page .req-date .date-input{
min-width:0 !important;
}
}
@media(max-width:700px){
.request-test-page .req-id,
.request-test-page .req-date,
.request-test-page .req-collection,
.request-test-page .req-test,
.request-test-page .price-field,
.request-test-page .add-test-field{
flex:1 1 100% !important;
min-width:100% !important;
max-width:none !important;
}
}
/* =========================================================
FINAL ADJUSTMENT 24-06: Current page title beside user
Shows selected page title in all admin headers with a
different visible background from the user badge.
========================================================= */
.page-head .current-page-title{
position:absolute !important;
left:calc(50% + 145px) !important;
top:50% !important;
transform:translateY(-50%) !important;
display:flex !important;
align-items:center !important;
gap:7px !important;
max-width:360px !important;
min-height:34px !important;
padding:7px 15px !important;
border-radius:999px !important;
background:linear-gradient(135deg,#ffe08a,#fff5c4) !important;
color:#14314d !important;
border:1px solid rgba(255,255,255,.75) !important;
box-shadow:0 7px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.65) !important;
font-size:12px !important;
font-weight:900 !important;
line-height:1.3 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
z-index:5 !important;
}
.page-head .current-page-title .page-title-label{
color:#7a4d00 !important;
font-weight:900 !important;
flex:0 0 auto !important;
}
.page-head .current-page-title b{
color:#0f2d4b !important;
font-weight:900 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
display:block !important;
}
.page-head .top-user{
z-index:6 !important;
}
body.lang-en .page-head .current-page-title{
left:auto !important;
right:calc(50% + 145px) !important;
}
@media(max-width:1100px){
.page-head .current-page-title{
position:static !important;
transform:none !important;
left:auto !important;
right:auto !important;
margin:6px auto 0 auto !important;
max-width:92% !important;
justify-content:center !important;
}
}
@media(max-width:820px){
.page-head .current-page-title{
display:inline-flex !important;
width:auto !important;
max-width:100% !important;
font-size:11.5px !important;
padding:6px 12px !important;
margin:6px auto !important;
}
}
@media print{
.current-page-title{display:none !important;}
}
/* USER REQUEST 24-06: green version bar under login buttons */
.login-version-line{
display:block !important;
width:100% !important;
box-sizing:border-box !important;
margin:10px 0 0 !important;
padding:7px 12px !important;
border-radius:10px !important;
background:linear-gradient(180deg,#8ee6a3 0%,#45c767 100%) !important;
border:1px solid #2fa84f !important;
color:#000 !important;
font-weight:900 !important;
font-size:13px !important;
line-height:1.4 !important;
text-align:center !important;
letter-spacing:.4px !important;
box-shadow:0 5px 14px rgba(47,168,79,.22) !important;
}
/* Users page password rules - same policy as login change password */
.users-page .user-password-rules-field .user-password-strength{
margin-top:7px;
width:100%;
height:7px;
border-radius:999px;
background:#edf6fb;
border:1px solid #cfe6f2;
overflow:hidden;
}
.users-page .user-password-rules-field .password-strength-bar{
display:block;
height:100%;
width:0%;
border-radius:999px;
transition:width .2s ease;
}
.users-page .user-password-rules{
display:block;
margin-top:6px;
padding:7px 9px;
background:#f3fbf7;
border:1px solid #bfe8d0;
border-radius:10px;
color:#111;
font-size:12px;
line-height:1.6;
text-align:center;
font-weight:700;
}
/* USER REQUEST 24-06: professional layout for Users & Permissions page */
.users-page{
background:linear-gradient(135deg,#eef8fc 0%,#ffffff 54%,#f3fbff 100%) !important;
}
.users-page .users-wrap{
max-width:1280px !important;
margin:18px auto 28px !important;
padding:0 16px !important;
}
.users-page .section-current-title{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
margin:0 0 14px !important;
padding:13px 18px !important;
border-radius:18px !important;
background:linear-gradient(135deg,#0f2d4b,#176b9b 62%,#1fb7c9) !important;
color:#fff !important;
font-weight:900 !important;
font-size:19px !important;
box-shadow:0 14px 34px rgba(15,45,75,.18) !important;
}
.users-page .section-current-title:before{
content:"🔐";
font-size:18px;
}
.users-page .panel.user-form-panel,
.users-page .panel.users-grid-panel{
border-radius:22px !important;
border:1px solid #d8eaf4 !important;
background:linear-gradient(180deg,#ffffff,#f8fcff) !important;
box-shadow:0 16px 38px rgba(16,47,79,.10) !important;
padding:18px !important;
overflow:hidden !important;
}
.users-page .panel.user-form-panel h2,
.users-page .panel.users-grid-panel h2{
margin:0 0 14px !important;
padding:11px 14px !important;
border-radius:15px !important;
background:#eef8fc !important;
border:1px solid #d2e7f3 !important;
color:#0f2d4b !important;
font-size:17px !important;
font-weight:900 !important;
}
.users-page .users-form-row{
display:grid !important;
grid-template-columns:repeat(2,minmax(360px,1fr)) !important;
gap:12px 14px !important;
padding:12px !important;
margin:0 !important;
border-radius:18px !important;
background:#f6fbff !important;
border:1px solid #e0edf5 !important;
align-items:start !important;
}
.users-page .users-form-row .field,
.users-page .users-form-row .user-name-field,
.users-page .users-form-row .user-login-field,
.users-page .users-form-row .user-pass-field,
.users-page .users-form-row .user-role-field{
flex:none !important;
min-width:0 !important;
max-width:none !important;
width:100% !important;
box-sizing:border-box !important;
margin:0 !important;
border:1px solid #cfe4f0 !important;
border-radius:16px !important;
background:#ffffff !important;
box-shadow:0 8px 18px rgba(16,47,79,.06) !important;
padding:9px 10px !important;
}
.users-page .users-form-row .field{
display:grid !important;
grid-template-columns:132px minmax(0,1fr) !important;
column-gap:10px !important;
row-gap:7px !important;
align-items:center !important;
}
.users-page .users-form-row .field label{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:auto !important;
min-width:0 !important;
max-width:none !important;
height:38px !important;
margin:0 !important;
padding:0 10px !important;
border-radius:12px !important;
background:linear-gradient(135deg,#e8f5ff,#d8eef8) !important;
border:1px solid #c2dfef !important;
color:#0f2d4b !important;
font-weight:900 !important;
font-size:13px !important;
text-align:center !important;
line-height:1.35 !important;
}
.users-page .users-form-row .field .txt,
.users-page .users-form-row .field input[type="text"],
.users-page .users-form-row .field input[type="password"],
.users-page .users-form-row .field select{
width:100% !important;
max-width:none !important;
height:38px !important;
min-height:38px !important;
box-sizing:border-box !important;
border-radius:12px !important;
border:1px solid #bfd8e8 !important;
background:#fff !important;
color:#111 !important;
padding:7px 10px !important;
}
.users-page .users-form-row .user-password-rules-field label{
grid-row:1 / span 3 !important;
height:100% !important;
min-height:82px !important;
}
.users-page .user-password-rules-field .user-password-strength,
.users-page .user-password-rules-field .user-password-rules{
grid-column:2 !important;
width:100% !important;
box-sizing:border-box !important;
}
.users-page .user-password-rules-field .user-password-strength{
margin-top:0 !important;
}
.users-page .user-password-rules{
margin-top:0 !important;
text-align:center !important;
font-size:11.5px !important;
padding:6px 8px !important;
}
.users-page .user-toolbar{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
padding:12px !important;
margin:12px 0 0 !important;
border-radius:18px !important;
background:#fbfdff !important;
border:1px solid #e0edf5 !important;
}
.users-page .active-check{
display:inline-flex !important;
align-items:center !important;
min-height:38px !important;
padding:8px 14px !important;
border-radius:999px !important;
background:#edf9f2 !important;
border:1px solid #bfe8d0 !important;
color:#111 !important;
}
.users-page .user-toolbar .btn{
min-width:150px !important;
height:40px !important;
border-radius:13px !important;
}
.users-page .users-grid-panel{
margin-top:16px !important;
}
.users-page .users-grid-panel .table-wrap{
border-radius:16px !important;
border:1px solid #d5e8f4 !important;
background:#fff !important;
overflow:auto !important;
}
.users-page .users-grid{
min-width:900px !important;
}
.users-page .users-grid th{
background:linear-gradient(135deg,#0f2d4b,#176b9b) !important;
color:#fff !important;
padding:11px 9px !important;
font-size:13px !important;
}
.users-page .users-grid td{
padding:9px !important;
vertical-align:middle !important;
}
.users-page .permission-modal-card{
border-radius:24px !important;
padding:0 20px 20px !important;
}
.users-page .permission-modal-head{
background:#f8fcff !important;
border:1px solid #e1edf5 !important;
border-radius:16px !important;
margin-bottom:10px !important;
padding:12px !important;
}
.users-page .permission-user-name{
color:#111 !important;
background:#eaf7ff !important;
border-color:#c9e4f3 !important;
}
.users-page .permission-grid th{
padding:10px !important;
}
.users-page .permission-grid td{
padding:9px 10px !important;
}
.users-page .perm-use-cell,
.users-page .page-use-check{
text-align:center !important;
font-weight:900 !important;
}
.users-page .page-use-check input{
transform:scale(1.18) !important;
accent-color:#176b9b !important;
margin-inline-end:6px !important;
}
/* Legacy RolePermissions page professional polish, in case it is opened directly */
.role-permissions-page .wrap{max-width:1180px !important;margin:18px auto !important;padding:0 16px !important;}
.role-permissions-page .panel{border-radius:20px !important;border:1px solid #d8eaf4 !important;background:#fff !important;box-shadow:0 16px 38px rgba(16,47,79,.10) !important;padding:16px !important;}
.role-permissions-page .form-row{background:#f6fbff !important;border:1px solid #e0edf5 !important;border-radius:16px !important;padding:12px !important;}
.role-permissions-page .field{display:grid !important;grid-template-columns:130px minmax(0,360px) !important;gap:10px !important;align-items:center !important;}
.role-permissions-page .field label{margin:0 !important;height:38px !important;display:flex !important;align-items:center !important;justify-content:center !important;background:linear-gradient(135deg,#e8f5ff,#d8eef8) !important;border:1px solid #c2dfef !important;border-radius:12px !important;color:#0f2d4b !important;font-weight:900 !important;}
.role-permissions-page .field .txt{height:38px !important;border-radius:12px !important;}
.role-permissions-page .grid th{background:linear-gradient(135deg,#0f2d4b,#176b9b) !important;color:#fff !important;}
@media(max-width:900px){
.users-page .users-form-row{grid-template-columns:1fr !important;}
}
@media(max-width:650px){
.users-page .users-form-row .field,
.role-permissions-page .field{display:block !important;}
.users-page .users-form-row .field label,
.role-permissions-page .field label{height:auto !important;min-height:36px !important;margin-bottom:7px !important;}
.users-page .users-form-row .user-password-rules-field label{min-height:36px !important;}
.users-page .user-toolbar{display:block !important;text-align:center !important;}
.users-page .user-toolbar .btn,.users-page .active-check{width:100% !important;justify-content:center !important;margin:6px 0 !important;}
}