:root{--green:#174c3a;--green2:#236b50;--gold:#e8b931;--bg:#f5f7f5;--text:#17231e;--muted:#6d7973;--border:#dfe6e1;--white:#fff;--danger:#a73c3c}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);background:var(--bg)}button,input,select,textarea{font:inherit}.hidden{display:none!important}.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#f7faf8,#edf4ef)}.login-card{width:min(420px,100%);background:#fff;border:1px solid var(--border);border-radius:24px;padding:38px;box-shadow:0 20px 60px #174c3a18}.brandmark{width:52px;height:52px;border-radius:16px;background:#fff6d9;color:#b78300;display:grid;place-items:center;font-size:27px}.login h1{margin:18px 0 5px}.login p{color:var(--muted);margin:0 0 26px}label{display:grid;gap:7px;font-size:13px;font-weight:650;margin:13px 0}input,select,textarea{width:100%;padding:12px 13px;border:1px solid var(--border);border-radius:11px;background:#fff;outline:none;min-height:45px}input:focus,select:focus,textarea:focus{border-color:var(--green2);box-shadow:0 0 0 3px #236b5018}button{border:0;cursor:pointer}.login button,.primary{background:var(--green);color:#fff;padding:12px 18px;border-radius:11px;font-weight:700}.login button{width:100%;margin-top:10px}.error{color:var(--danger);font-size:13px;margin-top:10px}.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}aside{background:#123d30;color:#fff;padding:22px 14px;display:flex;flex-direction:column}.brand{font-size:20px;padding:6px 10px 26px;display:flex;gap:10px;align-items:center}.brand span{color:var(--gold)}nav{display:grid;gap:7px}nav button,.aside-foot button{background:transparent;color:#d8e5df;text-align:left;padding:12px;border-radius:10px}nav button.active,nav button:hover{background:#ffffff15;color:#fff}.aside-foot{margin-top:auto}main{min-width:0}header{height:76px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 28px;gap:14px}header h2{margin:0;font-size:19px}header small{color:var(--muted)}.avatar{margin-left:auto;background:#e5efe9;color:var(--green);font-weight:800;border-radius:50%;width:38px;height:38px;display:grid;place-items:center}#menu{display:none;background:transparent;font-size:22px}#content{padding:26px;max-width:1500px;margin:auto}.hero{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}.hero h1{font-size:28px;margin:0 0 5px}.hero p{margin:0;color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px}.stat .k{color:var(--muted);font-size:13px}.stat .v{font-size:28px;font-weight:800;margin-top:7px}.stat.gold{border-top:3px solid var(--gold)}.panel{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;margin-top:16px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}.panel h3{margin:0}.search{max-width:360px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;padding:13px 10px;border-bottom:1px solid #edf0ee;font-size:14px}th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.badge{display:inline-block;padding:5px 9px;border-radius:999px;background:#edf3ef;color:var(--green);font-size:12px;font-weight:700}.rowbtn{background:#eef4f0;color:var(--green);padding:8px 10px;border-radius:9px;font-weight:700}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.check{display:flex;gap:8px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:10px;font-size:14px}.check input{width:auto;min-height:auto}.section-title{font-size:15px;margin:22px 0 8px}.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.secondary{background:#eef2ef;color:var(--text);padding:12px 16px;border-radius:10px}.modal{position:fixed;inset:0;background:#10251d99;display:grid;place-items:center;padding:18px;z-index:20}.modal-card{background:#fff;border-radius:20px;padding:24px;width:min(760px,100%);max-height:90vh;overflow:auto;position:relative}.close{position:absolute;right:16px;top:12px;background:transparent;font-size:28px}.photos{display:flex;flex-wrap:wrap;gap:8px}.photos img{width:110px;height:90px;object-fit:cover;border-radius:10px}.empty{text-align:center;padding:45px;color:var(--muted)}.progress{height:8px;background:#edf0ee;border-radius:99px;overflow:hidden}.progress i{display:block;height:100%;background:var(--green)}@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}.app{grid-template-columns:1fr}aside{position:fixed;z-index:30;inset:0 auto 0 0;width:230px;transform:translateX(-100%);transition:.2s}aside.open{transform:none}#menu{display:block}.grid2{grid-template-columns:1fr}#content{padding:18px}header{padding:0 18px}}@media(max-width:520px){.stats{grid-template-columns:1fr 1fr;gap:9px}.stat{padding:14px}.stat .v{font-size:23px}.hero{align-items:stretch;flex-direction:column}.hero .primary{width:100%}.checks{grid-template-columns:1fr}.modal{padding:0;align-items:end}.modal-card{border-radius:20px 20px 0 0;max-height:94vh}.actions{position:sticky;bottom:0;background:#fff;padding-top:12px}.actions button{flex:1}}


/* ==========================================================
   DELETE / COMPLETION BUTTONS
   ========================================================== */

.danger {
    background: #b42318;
    color: #fff;
    border: none;
    padding: 12px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
}

.danger:hover {
    background: #912018;
}

.complete-btn {
    background: #157347;
    color: #fff;
    border: none;
    padding: 12px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
}

.complete-btn:hover {
    background: #11633c;
}

.completed-label {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 10px;
    background: #e8f5ee;
    color: #157347;
    font-weight: 700;
}



/* ==========================================================
   SEBHEL SOLAROPS - GREEN HEADER / NAVIGATION
   ========================================================== */

header,
.header,
.topbar,
.navbar {
    background: #157347 !important;
    color: #ffffff !important;
}

header h1,
header h2,
header .logo,
header .brand,
.header h1,
.header h2,
.header .logo,
.header .brand,
.topbar h1,
.topbar .brand,
.navbar .brand {
    color: #ffffff !important;
}

header nav button,
.header nav button,
.topbar nav button,
.navbar button {
    color: #ffffff !important;
}

header nav button:hover,
.header nav button:hover,
.topbar nav button:hover,
.navbar button:hover {
    background: rgba(255,255,255,0.15) !important;
}

header nav button.active,
.header nav button.active,
.topbar nav button.active,
.navbar button.active {
    background: rgba(255,255,255,0.22) !important;
    color: #ffffff !important;
}


/* Sebhel Login Branding */

.login-village {
    color: #157347;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.login-card h1,
.login-card h2 {
    color: #157347;
}



/* ==========================================================
   SEBHEL SOLAR OPERATIONS
   COMPLETE MOBILE RESPONSIVE LAYER
   ========================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

input,
select,
textarea,
button {
    max-width: 100%;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    main,
    .content,
    .container,
    #content {
        width: 100%;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .grid,
    .stats,
    .stat-grid,
    .dashboard-grid,
    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

    html {
        font-size: 15px;
    }

    body {
        margin: 0;
        width: 100%;
        min-width: 0;
    }


    /* ------------------------------------------------------
       HEADER / NAVIGATION
       ------------------------------------------------------ */

    header,
    .header,
    .topbar,
    .navbar {
        width: 100%;
        padding: 12px 14px !important;
    }

    header .brand,
    .header .brand,
    .topbar .brand,
    .navbar .brand {
        font-size: 18px !important;
    }

    header nav,
    .header nav,
    .topbar nav,
    .navbar nav,
    nav {
        width: 100%;
        display: flex;
        gap: 6px;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    nav::-webkit-scrollbar {
        display: none;
    }

    nav button,
    nav a {
        flex: 0 0 auto;
        min-height: 42px;
        padding: 9px 12px !important;
        font-size: 14px !important;
    }


    /* ------------------------------------------------------
       PAGE CONTENT
       ------------------------------------------------------ */

    main,
    .content,
    .container,
    #content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px !important;
        margin: 0 !important;
    }

    h1 {
        font-size: 25px !important;
        line-height: 1.2;
    }

    h2 {
        font-size: 21px !important;
        line-height: 1.25;
    }

    h3 {
        font-size: 17px !important;
    }


    /* ------------------------------------------------------
       DASHBOARD
       ------------------------------------------------------ */

    .grid,
    .stats,
    .stat-grid,
    .dashboard-grid,
    .cards {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .stat,
    .stat-card,
    .card {
        min-width: 0 !important;
        padding: 14px !important;
    }

    .stat .value,
    .stat-card .value {
        font-size: 24px !important;
    }


    /* ------------------------------------------------------
       FORMS
       ------------------------------------------------------ */

    form,
    .form-grid,
    .form-row {
        width: 100%;
    }

    .form-grid,
    .form-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    label {
        display: block;
        width: 100%;
    }

    input,
    select,
    textarea {
        display: block;
        width: 100% !important;
        min-width: 0 !important;

        /*
         * 16px prevents iPhone Safari from automatically
         * zooming when an input is selected.
         */
        font-size: 16px !important;
    }

    input,
    select {
        min-height: 48px;
    }

    textarea {
        min-height: 100px;
        resize: vertical;
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: 22px !important;
        height: 22px !important;
        min-height: auto;
        display: inline-block;
    }


    /* ------------------------------------------------------
       BUTTONS
       ------------------------------------------------------ */

    button,
    .button,
    .btn {
        min-height: 46px;
        font-size: 15px;
        touch-action: manipulation;
    }

    .actions {
        width: 100%;
        display: flex !important;
        flex-direction: column !important;
        gap: 9px !important;
    }

    .actions button,
    .actions .button,
    .actions .btn {
        width: 100% !important;
        margin: 0 !important;
    }


    /* ------------------------------------------------------
       HOUSE LIST / TABLES
       ------------------------------------------------------ */

    .table-wrap,
    .table-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        width: 100%;
    }

    th,
    td {
        padding: 10px 8px !important;
    }


    /* ------------------------------------------------------
       MODALS
       House / Survey / Installation
       ------------------------------------------------------ */

    .modal {
        padding: 8px !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    .modal-content,
    .modal-card,
    .dialog {
        width: calc(100vw - 16px) !important;
        max-width: none !important;
        max-height: calc(100vh - 16px) !important;
        overflow-y: auto !important;
        margin: 8px auto !important;
        border-radius: 14px !important;
        padding: 16px !important;
    }


    /* ------------------------------------------------------
       PHOTOS
       ------------------------------------------------------ */

    .photos,
    .photo-grid,
    .gallery {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .photos img,
    .photo-grid img,
    .gallery img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 10px;
    }

    input[type="file"] {
        width: 100% !important;
        padding: 10px !important;
    }


    /* ------------------------------------------------------
       LOGIN PAGE
       ------------------------------------------------------ */

    .login,
    .login-page,
    .login-container {
        width: 100% !important;
        min-height: 100vh;
        padding: 16px !important;
    }

    .login-card {
        width: 100% !important;
        max-width: 460px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 24px 20px !important;
    }

    .login-card h1 {
        font-size: 28px !important;
    }


    /* ------------------------------------------------------
       BADGES
       ------------------------------------------------------ */

    .badge,
    .status {
        display: inline-flex;
        max-width: 100%;
        white-space: normal;
    }
}


/* ==========================================================
   SMALL PHONES
   ========================================================== */

@media (max-width: 390px) {

    main,
    .content,
    .container,
    #content {
        padding: 10px !important;
    }

    .grid,
    .stats,
    .stat-grid,
    .dashboard-grid,
    .cards {
        grid-template-columns: 1fr !important;
    }

    .photos,
    .photo-grid,
    .gallery {
        grid-template-columns: 1fr !important;
    }

    .login-card {
        padding: 20px 16px !important;
    }

    .login-card h1 {
        font-size: 24px !important;
    }
}


/* ==========================================================
   SAFE AREA - MODERN PHONES
   ========================================================== */

@supports (padding: env(safe-area-inset-bottom)) {

    body {
        padding-bottom: env(safe-area-inset-bottom);
    }

}



/* ==========================================================
   DASHBOARD CARDS - KEEP IN HORIZONTAL ROW ON MOBILE
   ========================================================== */

@media (max-width: 600px) {

    .stats,
    .stat-grid,
    .dashboard-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;

        gap: 10px !important;
        padding-bottom: 8px !important;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .stats::-webkit-scrollbar,
    .stat-grid::-webkit-scrollbar,
    .dashboard-grid::-webkit-scrollbar {
        display: none;
    }

    .stats .stat,
    .stats .stat-card,
    .stat-grid .stat,
    .stat-grid .stat-card,
    .dashboard-grid .stat,
    .dashboard-grid .stat-card {
        flex: 0 0 155px !important;
        width: 155px !important;
        min-width: 155px !important;
    }

}


/* Keep dashboard row even on very small phones */
@media (max-width: 390px) {

    .stats,
    .stat-grid,
    .dashboard-grid {
        display: flex !important;
        grid-template-columns: none !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    .stats .stat,
    .stats .stat-card,
    .stat-grid .stat,
    .stat-grid .stat-card,
    .dashboard-grid .stat,
    .dashboard-grid .stat-card {
        flex: 0 0 145px !important;
        width: 145px !important;
        min-width: 145px !important;
    }

}


/* ==========================================================
   SEBHEL SOLAR OPERATIONS - MOBILE COLUMN LAYOUT
   ========================================================== */

@media (max-width: 600px) {

    /* TOP NAVIGATION IN COLUMN */
    header nav,
    .header nav,
    .topbar nav,
    .navbar nav,
    nav {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        gap: 6px !important;
        overflow: visible !important;
    }

    header nav button,
    .header nav button,
    .topbar nav button,
    .navbar nav button,
    nav button,
    nav a {
        width: 100% !important;
        flex: none !important;
        text-align: left !important;
        min-height: 44px !important;
        padding: 10px 14px !important;
    }

    /* DASHBOARD CARDS IN COLUMN */
    .stats,
    .stat-grid,
    .dashboard-grid,
    .cards,
    .grid {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        width: 100% !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    .stats .stat,
    .stats .stat-card,
    .stat-grid .stat,
    .stat-grid .stat-card,
    .dashboard-grid .stat,
    .dashboard-grid .stat-card,
    .cards .card,
    .grid .card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: none !important;
        margin: 0 !important;
    }
}