:root{
--green:#0D2B20;
--green2:#005A46;
--gold:#C79A45;
--ivory:#F5F0E7;
--bg:#f5f7f5;
--white:#fff;
--ink:#17211c;
--muted:#6b756f;
--line:#e1e7e3;
--shadow:0 10px 30px rgba(13,43,32,.07);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
font-family:Tahoma,Arial,sans-serif;
background:var(--bg);
color:var(--ink);
direction:rtl;
line-height:1.6
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}

/* SHELL */
.app-shell{
min-height:100vh;
display:flex;
direction:rtl
}
.sidebar{
width:275px;
min-width:275px;
min-height:100vh;
height:100vh;
position:sticky;
top:0;
padding:26px 20px;
display:flex;
flex-direction:column;
color:#fff;
background:
radial-gradient(circle at top right,rgba(199,154,69,.16),transparent 30%),
linear-gradient(180deg,#0D2B20,#071711)
}
.brand-block{
display:flex;
align-items:center;
gap:13px
}
.brand-symbol{
width:48px;
height:48px;
border-radius:14px;
display:grid;
place-items:center;
font-size:24px;
font-weight:800;
background:linear-gradient(145deg,#C79A45,#ead49b);
color:#0D2B20
}
.brand-copy strong{
display:block;
font-size:22px
}
.brand-copy span{
display:block;
font-size:11px;
letter-spacing:2px;
color:#d7c79e
}
.current-org{
margin-top:25px;
padding:13px 14px;
border-radius:14px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.06)
}
.current-org span{
display:block;
font-size:11px;
color:#aebbb4
}
.current-org strong{
display:block;
margin-top:2px;
font-size:14px
}
.sidebar-nav{
display:flex;
flex-direction:column;
gap:6px;
margin-top:27px
}
.sidebar-nav a{
display:flex;
align-items:center;
gap:11px;
padding:11px 14px;
border-radius:12px;
color:#d5dfda;
transition:.2s
}
.sidebar-nav a:hover{
background:rgba(255,255,255,.07);
color:#fff
}
.sidebar-nav a.active{
background:linear-gradient(90deg,rgba(199,154,69,.2),rgba(255,255,255,.07));
box-shadow:inset -3px 0 #C79A45;
color:#fff
}
.nav-icon{
width:24px;
text-align:center;
color:#C79A45
}
.sidebar-footer{
margin-top:auto;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.1)
}
.user-chip{
display:flex;
align-items:center;
gap:10px;
margin-bottom:14px
}
.user-avatar{
width:38px;
height:38px;
border-radius:50%;
display:grid;
place-items:center;
background:#C79A45;
color:#0D2B20;
font-weight:800
}
.user-chip strong,.user-chip span{display:block}
.user-chip strong{font-size:13px}
.user-chip span{font-size:11px;color:#aebbb4}
.logout-button{
width:100%;
padding:10px;
border-radius:10px;
border:1px solid rgba(255,255,255,.15);
background:transparent;
color:#fff;
cursor:pointer
}

/* MAIN */
.app-main{flex:1;min-width:0}
.app-topbar{
height:76px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 34px;
background:rgba(255,255,255,.95);
border-bottom:1px solid var(--line);
position:sticky;
top:0;
z-index:10
}
.app-topbar strong{
color:var(--green);
letter-spacing:1px
}
.topbar-label{
font-size:12px;
color:var(--muted);
margin-left:10px
}
.environment-badge{
direction:ltr;
font-size:10px;
font-weight:800;
letter-spacing:1px;
padding:5px 10px;
border-radius:999px;
background:#f6ecda;
color:#866022;
border:1px solid #e9d5af
}
.page-container{
max-width:1500px;
margin:auto;
padding:38px 38px 70px
}

/* PAGE HEADER */
.page-header{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:20px;
margin-bottom:27px
}
.page-header h1{
font-size:31px;
line-height:1.2;
margin:4px 0 0;
color:var(--green)
}
.page-eyebrow{
font-size:11px;
font-weight:800;
letter-spacing:1px;
color:var(--gold)
}
.page-description{
max-width:760px;
margin:8px 0 0;
color:var(--muted)
}

/* CARDS */
.grid{display:grid;gap:18px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.metrics-grid{
grid-template-columns:repeat(5,minmax(0,1fr));
margin-bottom:25px
}
.card,.metric-card{
background:#fff;
border:1px solid var(--line);
border-radius:18px;
box-shadow:var(--shadow)
}
.card{
padding:25px;
margin-bottom:20px
}
.section-card{padding:28px}
.metric-card{
min-height:150px;
padding:23px;
position:relative;
overflow:hidden
}
.metric-card:after{
content:"";
position:absolute;
width:90px;
height:90px;
border-radius:50%;
left:-35px;
bottom:-38px;
background:#e7f2ee
}
.metric-card.gold:after{background:#f6ecda}
.metric-value{
font-size:36px;
font-weight:800;
line-height:1;
color:var(--green);
margin-bottom:15px
}
.metric-label{
font-weight:700;
font-size:14px
}
.metric-note{
display:block;
font-size:11px;
color:var(--muted);
margin-top:5px
}

/* SECTION */
.form-section{
margin-bottom:32px
}
.form-section-title{
padding-bottom:13px;
margin-bottom:18px;
border-bottom:1px solid var(--line)
}
.form-section-title h2{
margin:0;
font-size:19px;
color:var(--green)
}
.form-section-title p{
margin:4px 0 0;
font-size:12px;
color:var(--muted)
}

/* FORMS */
label{
display:block;
font-size:13px;
font-weight:700;
color:var(--green)
}
input,select,textarea{
width:100%;
margin-top:7px;
padding:12px 14px;
border:1px solid #cdd7d1;
border-radius:11px;
background:#fff;
color:var(--ink);
outline:none
}
input:focus,select:focus,textarea:focus{
border-color:var(--green2);
box-shadow:0 0 0 3px rgba(0,90,70,.08)
}
textarea{
min-height:110px;
resize:vertical
}
input[type=color]{
height:52px;
padding:6px
}
input[type=file]{
background:#fafbf9;
border-style:dashed
}
.form-help{
display:block;
font-size:11px;
font-weight:400;
color:var(--muted);
margin-top:5px
}
.form-actions{
margin-top:24px;
padding-top:20px;
border-top:1px solid var(--line)
}

/* BUTTONS */
button,.button{
border:0;
border-radius:11px;
padding:11px 18px;
min-height:44px;
display:inline-flex;
align-items:center;
justify-content:center;
background:var(--green);
color:#fff;
font-weight:700;
cursor:pointer
}
button:hover,.button:hover{
background:var(--green2)
}
.button.gold{
background:var(--gold);
color:var(--green)
}
.button.secondary{
background:#edf1ee;
color:var(--green)
}

/* TABLE */
.table-wrap{overflow:auto}
table{
width:100%;
border-collapse:collapse
}
th,td{
padding:15px 14px;
text-align:right;
vertical-align:middle;
border-bottom:1px solid var(--line)
}
th{
font-size:12px;
color:var(--muted);
background:#fafbfa
}
tr:last-child td{border-bottom:0}
.table-link{
color:var(--green2);
font-weight:700
}
.badge{
display:inline-flex;
padding:5px 10px;
border-radius:999px;
background:#e7f2ee;
color:var(--green2);
font-size:11px;
font-weight:700
}
.badge.gold{
background:#f6ecda;
color:#856020
}

/* EMPTY */
.empty-state{
text-align:center;
padding:55px 20px
}
.empty-icon{
width:58px;
height:58px;
margin:0 auto 15px;
border-radius:17px;
display:grid;
place-items:center;
background:#e7f2ee;
color:var(--green2);
font-size:26px
}
.empty-state h3{
margin:0 0 5px;
color:var(--green)
}
.empty-state p{
max-width:540px;
margin:0 auto 18px;
color:var(--muted)
}

/* ORGANIZATION */
.organization-card-top{
display:flex;
justify-content:space-between;
gap:15px
}
.organization-monogram{
width:50px;
height:50px;
border-radius:14px;
display:grid;
place-items:center;
background:#e7f2ee;
color:var(--green2);
font-size:20px;
font-weight:800
}
.organization-meta{
font-size:13px;
color:var(--muted);
margin:10px 0 18px
}

/* ALERT */
.alert{
padding:14px 17px;
border-radius:12px;
margin-bottom:20px
}
.alert.success{
background:#eaf7f1;
color:#176b4c
}
.alert.danger{
background:#fff1f0;
color:#b42318
}
.alert ul{margin:0}

/* FALLBACK EXISTING VIEWS */
.split{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px
}
.muted{color:var(--muted)}
.metric{
font-size:30px;
font-weight:800;
color:var(--green)
}
.metric.small{font-size:22px}
.json{
direction:ltr;
text-align:left;
background:#101c17;
color:#dce6e0;
padding:16px;
border-radius:12px;
overflow:auto
}
.passport{
max-width:780px;
margin:40px auto;
text-align:center
}

/* GUEST */
.guest-shell{
min-height:100vh;
background:
radial-gradient(circle at 80% 8%,rgba(199,154,69,.18),transparent 25%),
var(--ivory)
}
.guest-header{
height:85px;
display:flex;
align-items:center;
padding:0 7vw
}
.guest-brand{
display:flex;
align-items:center;
gap:12px;
color:var(--green)
}
.guest-brand strong{display:block;font-size:21px}
.guest-brand span{
display:block;
font-size:11px;
letter-spacing:2px;
color:#896a35
}
.guest-main{
padding:30px 20px 70px
}
.narrow{
max-width:520px;
margin:30px auto;
padding:34px
}
.narrow h1{
margin-top:0;
color:var(--green)
}

/* RESPONSIVE */
@media(max-width:1200px){
.metrics-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:950px){
.app-shell{display:block}
.sidebar{
width:100%;
min-width:0;
height:auto;
min-height:0;
position:relative
}
.current-org,.sidebar-footer{display:none}
.sidebar-nav{
flex-direction:row;
overflow:auto;
margin-top:17px
}
.sidebar-nav a{white-space:nowrap}
.app-topbar{position:relative}
.page-container{padding:25px 18px 55px}
}
@media(max-width:760px){
.grid.two,.grid.three,.metrics-grid{
grid-template-columns:1fr
}
.page-header,.split{
flex-direction:column;
align-items:stretch
}
.page-header h1{font-size:26px}
.app-topbar{padding:0 18px}
.topbar-label{display:none}
}

/* ===== SIJMAR PHASE 2 OPERATIONAL UI ===== */

.project-hero{
background:linear-gradient(135deg,#0D2B20,#123d2e);
color:#fff;
border-radius:22px;
padding:28px;
margin-bottom:24px;
position:relative;
overflow:hidden
}
.project-hero:after{
content:"";
position:absolute;
width:180px;
height:180px;
border-radius:50%;
background:rgba(199,154,69,.14);
left:-55px;
bottom:-85px
}
.project-hero h1{
margin:0 0 7px;
font-size:31px
}
.project-hero .muted{
color:#c2d0c8
}
.project-hero-actions{
display:flex;
gap:10px;
margin-top:20px
}

.module-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
margin-bottom:24px
}
.module-card{
background:#fff;
border:1px solid var(--line);
border-radius:17px;
padding:20px;
min-height:125px;
box-shadow:var(--shadow);
display:flex;
flex-direction:column;
justify-content:space-between;
transition:.18s ease
}
.module-card:hover{
transform:translateY(-2px);
border-color:#bfcec6
}
.module-card strong{
font-size:16px;
color:var(--green)
}
.module-card span{
font-size:12px;
color:var(--muted)
}
.module-value{
font-size:23px!important;
font-weight:800;
color:var(--gold)!important
}

.status-pill{
display:inline-flex;
align-items:center;
padding:5px 10px;
border-radius:999px;
font-size:11px;
font-weight:700;
background:#eef2ef;
color:#53615a
}
.status-pill.pass,
.status-pill.approved,
.status-pill.accepted,
.status-pill.completed{
background:#e5f4ed;
color:#176b4c
}
.status-pill.fail,
.status-pill.rejected,
.status-pill.critical{
background:#fff0ef;
color:#a92a20
}
.status-pill.warning,
.status-pill.waived,
.status-pill.handover{
background:#f8eedc;
color:#89611f
}

.form-card{
background:#fff;
border:1px solid var(--line);
border-radius:20px;
padding:28px;
box-shadow:var(--shadow)
}
.form-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px
}
.form-grid.four{
grid-template-columns:repeat(4,minmax(0,1fr))
}

.checkbox-card{
display:flex;
align-items:center;
gap:10px;
padding:12px 14px;
border:1px solid var(--line);
border-radius:11px;
background:#fafbfa
}
.checkbox-card input{
width:auto;
margin:0
}

fieldset{
border:1px solid var(--line);
border-radius:14px;
padding:18px;
margin:20px 0
}
legend{
padding:0 8px;
font-weight:700;
color:var(--green)
}

.inline-form{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap
}
.inline-form input,
.inline-form select{
width:auto;
min-width:140px;
margin-top:0
}

.gate-strip{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px;
margin-bottom:24px
}
.gate-card{
background:#fff;
border:1px solid var(--line);
border-radius:17px;
padding:20px;
box-shadow:var(--shadow-soft)
}
.gate-card .value{
font-size:30px;
font-weight:800;
color:var(--green)
}
.gate-card .label{
font-size:12px;
color:var(--muted)
}

.passport-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:20px;
margin-bottom:24px
}
.passport-number{
direction:ltr;
display:inline-block;
font-family:monospace;
background:#eef3f0;
padding:7px 11px;
border-radius:9px;
color:var(--green)
}

.data-panel{
background:#101c17;
color:#dce6e0;
border-radius:15px;
padding:18px;
overflow:auto;
direction:ltr;
text-align:left;
font-size:12px
}

@media(max-width:1100px){
.module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid.four,.gate-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
.module-grid,.form-grid,.form-grid.four,.gate-strip{grid-template-columns:1fr}
.project-hero-actions,.passport-header{flex-direction:column}
.inline-form{align-items:stretch}
.inline-form input,.inline-form select{width:100%}
}

/* ===== SIJMAR PHASE 2B ===== */

.stat-row{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
margin-bottom:24px
}
.stat-box{
background:#fff;
border:1px solid var(--line);
border-radius:17px;
padding:21px;
box-shadow:var(--shadow-soft)
}
.stat-box strong{
display:block;
font-size:30px;
color:var(--green);
line-height:1
}
.stat-box span{
display:block;
margin-top:10px;
font-size:12px;
color:var(--muted)
}

.building-card{
background:#fff;
border:1px solid var(--line);
border-radius:20px;
padding:26px;
margin-bottom:22px;
box-shadow:var(--shadow)
}
.building-title{
display:flex;
justify-content:space-between;
gap:20px;
align-items:flex-start;
margin-bottom:20px
}
.building-title h2{
margin:0;
color:var(--green)
}

details{
border:1px solid var(--line);
border-radius:12px;
padding:12px 14px;
background:#fbfcfb
}
details+details{margin-top:10px}
summary{
cursor:pointer;
font-weight:700;
color:var(--green)
}

.maintenance-item{
border:1px solid var(--line);
border-radius:15px;
padding:18px;
margin-bottom:13px;
background:#fff
}
.maintenance-item>strong{
font-size:15px;
color:var(--green)
}

.owner-property{
position:relative;
overflow:hidden
}
.owner-property:after{
content:"";
position:absolute;
width:110px;
height:110px;
border-radius:50%;
left:-50px;
bottom:-50px;
background:#e7f2ee
}

.regulatory-warning{
background:#fff8ea;
border:1px solid #eed6a8;
color:#76521c;
border-radius:14px;
padding:15px 18px;
margin-bottom:22px
}

.sha{
direction:ltr;
text-align:left;
font-family:monospace;
font-size:11px;
word-break:break-all
}

.auth-card{
max-width:520px;
margin:35px auto;
background:rgba(255,255,255,.96);
border:1px solid rgba(13,43,32,.10);
border-radius:24px;
padding:38px;
box-shadow:0 25px 70px rgba(13,43,32,.12)
}
.auth-card h1{
margin:0 0 8px;
color:var(--green);
font-size:29px
}
.auth-intro{
color:var(--muted);
margin:0 0 25px
}
.auth-footer{
margin-top:22px;
padding-top:18px;
border-top:1px solid var(--line);
text-align:center;
font-size:13px
}
.auth-footer a{
color:var(--green2);
font-weight:700
}

.portal-hero{
background:linear-gradient(135deg,#0D2B20,#005A46);
border-radius:22px;
padding:28px;
color:#fff;
margin-bottom:24px
}
.portal-hero h1{margin:0}
.portal-hero p{color:#d1ded8;margin-bottom:0}

@media(max-width:760px){
.stat-row{grid-template-columns:1fr}
.building-title{flex-direction:column}
.auth-card{padding:25px}
}

/* SIJMAR BACK BUTTON LOCATION */
.app-back-row{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    margin:4px 0 24px;
}

.app-back-row .app-back-button{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    min-width:105px !important;
    min-height:44px !important;
    padding:10px 17px !important;
    border:1px solid rgba(13,43,32,.18) !important;
    border-radius:11px !important;
    background:#fff !important;
    color:#0D2B20 !important;
    -webkit-text-fill-color:#0D2B20 !important;
    font-size:15px !important;
    font-weight:700 !important;
    cursor:pointer !important;
}

.app-back-row .app-back-button:hover{
    background:#F5F0E7 !important;
}