/* =========================================
   MORZO SocietyOS
   Page Layout Styles
========================================= */


/* =========================================
   HERO SECTION
========================================= */


.hero {


    min-height:

    80vh;


    display:

    flex;


    align-items:

    center;


    background:

    linear-gradient(

        135deg,

        var(--morzo-primary),

        var(--morzo-primary-dark)

    );


    color:

    var(--morzo-white);


    position:

    relative;


    overflow:

    hidden;


}



.hero::after {


    content:

    "";


    position:

    absolute;


    width:

    500px;


    height:

    500px;


    right:

    -150px;


    top:

    -150px;


    border-radius:

    50%;


    background:

    rgba(255,237,168,0.12);


}




.hero-content {

    position:relative;

    z-index:2;

    max-width:800px;

    margin-left:60px;

}


.hero-title {

    font-size:72px;

    line-height:1.08;

    letter-spacing:-2px;

    margin-bottom:24px;

}

.hero-subtitle {

    font-size:22px;

    line-height:1.7;

    max-width:680px;

}




.hero .hero-title {

    color:var(--morzo-white);

    font-size:72px;

    line-height:1.08;

    letter-spacing:-2px;

    margin-bottom:24px;

}



.hero .hero-subtitle {

    color:
    rgba(252,250,245,0.85);

    font-size:22px;

    line-height:1.7;

    max-width:680px;

    margin-bottom:40px;

}

.hero-actions {

    display:flex;

    gap:16px;

    margin-top:32px;

}




/* =========================================
   PAGE HEADER
========================================= */

.page-header{

    background:var(--morzo-primary);

    color:var(--morzo-white);

    padding:80px 0 70px;

	margin-bottom:20px;

}

.page-header .container{

    max-width:1200px;

    margin:0 auto;

}

.page-header h1{

    color:var(--morzo-white);

    font-size:64px;

    font-weight:800;

    line-height:1.1;

    letter-spacing:-2px;

    margin:0 0 18px;

	max-width:1000px;

}

.page-header p{

    max-width:1000px;

    font-size:22px;

    line-height:1.7;

    color:rgba(252,250,245,.85);

    margin:0;

}




/* =========================================
   ABOUT SECTION
========================================= */


.about-grid {


    display:

    grid;


    grid-template-columns:

    repeat(2,1fr);


    gap:

    var(--space-10);


    align-items:

    center;


}





.about-image {


    border-radius:

    var(--radius-xl);


    overflow:

    hidden;


    box-shadow:

    var(--shadow-md);


}





.about-content {


    display:

    flex;


    flex-direction:

    column;


    gap:

    var(--space-5);


}





/* =========================================
   FACILITY CARDS
========================================= */


.facility-grid {


    display:

    grid;


    grid-template-columns:

    repeat(
        auto-fit,
        minmax(
            250px,
            1fr
        )
    );


    gap:

    var(--space-6);


}





.facility-card {


    text-align:

    center;


}




.facility-icon {


    width:

    64px;


    height:

    64px;


    margin:

    0 auto var(--space-4);


    border-radius:

    var(--radius-lg);


    background:

    var(--morzo-primary);


    color:

    var(--morzo-accent);


    display:

    flex;


    align-items:

    center;


    justify-content:

    center;


    font-size:

    24px;


}





/* =========================================
   GALLERY PAGE
========================================= */


.gallery-grid {


    display:

    grid;


    grid-template-columns:

    repeat(
        auto-fit,
        minmax(
            280px,
            1fr
        )
    );


    gap:

    var(--space-5);


}




.gallery-item {


    border-radius:

    var(--radius-lg);


    overflow:

    hidden;


    aspect-ratio:

    4 / 3;


}



.gallery-item img {


    width:

    100%;


    height:

    100%;


    object-fit:

    cover;


    transition:

    var(--transition-normal);


}



.gallery-item:hover img {


    transform:

    scale(1.05);


}





/* =========================================
   NOTICE BOARD
========================================= */


.notice-list {


    display:

    flex;


    flex-direction:

    column;


    gap:

    var(--space-4);


}




.notice-item {


    padding:

    var(--space-5);


    background:

    var(--bg-card);


    border-left:

    4px solid var(--morzo-primary);


    border-radius:

    var(--radius-md);


    box-shadow:

    var(--shadow-sm);


}





.notice-date {


    color:

    var(--text-muted);


    font-size:

    var(--font-size-sm);


}





/* =========================================
   EVENT PAGE
========================================= */


.event-grid {


    display:

    grid;


    grid-template-columns:

    repeat(
        auto-fit,
        minmax(
            300px,
            1fr
        )
    );


    gap:

    var(--space-6);


}




.event-card {


    overflow:

    hidden;


}





.event-card-header {


    background:

    var(--morzo-primary);


    color:

    white;


    padding:

    var(--space-5);


}





.event-date {


    color:

    var(--morzo-accent);


    font-weight:

    var(--font-weight-semibold);


}





/* =========================================
   CONTACT PAGE
========================================= */


.contact-grid {


    display:

    grid;


    grid-template-columns:

    repeat(2,1fr);


    gap:

    var(--space-8);


}





.contact-info {


    display:

    flex;


    flex-direction:

    column;


    gap:

    var(--space-4);


}





/* =========================================
   DASHBOARD PAGE
========================================= */


.dashboard-page {


    background:

    var(--bg-secondary);


    min-height:

    100vh;


}




.dashboard-header {


    display:

    flex;


    justify-content:

    space-between;


    align-items:

    center;


    margin-bottom:

    var(--space-8);


}





.dashboard-section {


    margin-bottom:

    var(--space-10);


}





/* =========================================
   ADMIN PAGE
========================================= */


.admin-panel {


    background:

    white;


    border-radius:

    var(--radius-lg);


    padding:

    var(--space-8);


}





.admin-stat {


    display:

    flex;


    justify-content:

    space-between;


    align-items:

    center;


}





/* =========================================
   MARKETPLACE PAGE
========================================= */


.marketplace-grid {


    display:

    grid;


    grid-template-columns:

    repeat(
        auto-fit,
        minmax(
            280px,
            1fr
        )
    );


    gap:

    var(--space-6);


}





.marketplace-item {


    overflow:

    hidden;


}




/* =========================================
   RESPONSIVE
========================================= */


@media(max-width:768px){


    .hero {


        min-height:

        70vh;


    }




    .about-grid,
    .contact-grid {


        grid-template-columns:

        1fr;


    }



}
/* v82 Member Notice Board pagination and metadata */
.notice-member-list-meta{display:flex;align-items:center;gap:10px;margin-bottom:5px;font-size:.82rem;color:var(--text-muted,#6b7280);}
.notice-member-list-number{font-weight:700;}
.notice-member-list-date{white-space:nowrap;}
.notice-member-list-subject{display:block;font-weight:600;line-height:1.35;}
.notice-member-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px;flex-wrap:wrap;}
.notice-member-pagination-pages{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.notice-member-pagination-info{text-align:center;margin-top:8px;font-size:.82rem;color:var(--text-muted,#6b7280);}
.notice-member-pagination button[disabled]{opacity:.5;cursor:not-allowed;}
@media (max-width:600px){.notice-member-pagination{gap:8px}.notice-member-pagination-pages{max-width:220px}.notice-member-list-meta{gap:7px;font-size:.76rem;}}

/* =========================================
   V132 DIGITAL MONTHLY PARKING REGISTER
========================================= */
.parking-register-toolbar{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;flex-wrap:wrap;}
.parking-register-controls{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.parking-register-controls .input{min-width:170px;}
.parking-register-scroll{overflow-x:auto;overflow-y:visible;border:1px solid var(--color-border,#d9e2df);border-radius:12px;}
.parking-register-table{table-layout:fixed;width:max-content;min-width:100%;}
.parking-register-table th,.parking-register-table td{white-space:nowrap;padding:9px 7px;}
.parking-register-table .parking-register-fixed{position:sticky;background:var(--color-surface,#fff);z-index:2;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;}
.parking-register-table th.parking-register-fixed{z-index:3;}
.parking-register-day-head{min-width:34px;width:34px;text-align:center;}
.parking-register-cell{width:30px;height:30px;border-radius:7px;border:1px solid transparent;background:transparent;font:inherit;font-weight:700;cursor:pointer;padding:0;line-height:28px;}
.parking-register-cell:hover{outline:2px solid rgba(0,78,70,.18);}
.parking-register-parked{background:#e8f5ef;color:#005a4f;}
.parking-register-not_parked{background:#f5f5f3;color:#65716e;}
.parking-register-unverified{background:#fff;color:#9aa5a2;border-color:#dfe6e3;}
.parking-register-manual{box-shadow:inset 0 0 0 2px #005a4f;}
.parking-register-total{text-align:center;font-weight:700;min-width:62px;}
.parking-register-total-head{min-width:72px;width:72px;text-align:center;padding-left:10px!important;padding-right:10px!important;border-left:1px solid var(--color-border,#d9e2df);}
.parking-register-total-head + .parking-register-total-head{min-width:86px;width:86px;}
.parking-register-total-head + .parking-register-total-head + .parking-register-total-head{min-width:82px;width:82px;}
.parking-register-table th:nth-child(1),.parking-register-table td:nth-child(1){left:0;width:96px;min-width:96px;}
.parking-register-table th:nth-child(2),.parking-register-table td:nth-child(2){left:96px;width:70px;min-width:70px;}
.parking-register-table th:nth-child(3),.parking-register-table td:nth-child(3){left:166px;width:180px;min-width:180px;}
.parking-register-table th:nth-child(4),.parking-register-table td:nth-child(4){left:346px;width:140px;min-width:140px;}
.parking-register-table th:nth-child(5),.parking-register-table td:nth-child(5){left:486px;width:150px;min-width:150px;box-shadow:3px 0 0 rgba(0,54,49,.08);}
@media(max-width:900px){
  .parking-register-toolbar{align-items:stretch;}
  .parking-register-controls{width:100%;}
  .parking-register-controls .input{flex:1;min-width:150px;}
}

/* V162.3.7 Data Management history pagination (retained) */
.morzo-history-pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;}
.morzo-history-pagination-buttons{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.morzo-history-pagination button[disabled]{opacity:.48;cursor:not-allowed;}
.morzo-backup-location-card{border:1px solid var(--border-color,#d9e4df);}
@media(max-width:640px){.morzo-history-pagination{align-items:flex-start;flex-direction:column}.morzo-history-pagination-buttons{max-width:100%;}}

/* V162.3.8: compact rows in Recent Reset Activity only. */
#morzo-reset-history .admin-report-table th,
#morzo-reset-history .admin-report-table td{padding:10px 12px;vertical-align:middle;line-height:1.35;}
#morzo-reset-history .admin-report-table tbody tr{height:auto;min-height:0;}
#morzo-reset-history .admin-report-table td{white-space:normal;overflow-wrap:anywhere;}
#morzo-reset-history .admin-table-wrap{margin-bottom:0;}


/* V162.3.10: compact embedded reset-history table; keep pagination close to records. */
.morzo-service-console #morzo-reset-history .morzo-reset-history-wrap{display:block!important;width:100%;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;overflow-x:auto!important;overflow-y:visible!important;}
.morzo-service-console #morzo-reset-history table.morzo-reset-history-table{display:table!important;width:100%!important;min-width:760px!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;border-collapse:collapse!important;border-spacing:0!important;table-layout:fixed!important;}
.morzo-service-console #morzo-reset-history table.morzo-reset-history-table thead{display:table-header-group!important;height:auto!important;}
.morzo-service-console #morzo-reset-history table.morzo-reset-history-table tbody{display:table-row-group!important;height:auto!important;min-height:0!important;max-height:none!important;}
.morzo-service-console #morzo-reset-history table.morzo-reset-history-table tr{display:table-row!important;height:auto!important;min-height:0!important;max-height:none!important;}
.morzo-service-console #morzo-reset-history table.morzo-reset-history-table th,.morzo-service-console #morzo-reset-history table.morzo-reset-history-table td{display:table-cell!important;height:auto!important;min-height:0!important;max-height:none!important;padding:7px 10px!important;margin:0!important;line-height:1.25!important;vertical-align:middle!important;white-space:normal!important;overflow-wrap:anywhere!important;}
.morzo-service-console #morzo-reset-history table.morzo-reset-history-table col.reset-col-date{width:22%}
.morzo-service-console #morzo-reset-history table.morzo-reset-history-table col.reset-col-actor{width:16%}
.morzo-service-console #morzo-reset-history table.morzo-reset-history-table col.reset-col-modules{width:23%}
.morzo-service-console #morzo-reset-history table.morzo-reset-history-table col.reset-col-count{width:12%}
.morzo-service-console #morzo-reset-history table.morzo-reset-history-table col.reset-col-file{width:27%}
.morzo-service-console #morzo-reset-history .morzo-reset-backup-name{font-size:.78rem;line-height:1.25;overflow-wrap:anywhere;word-break:break-word;}
.morzo-service-console #morzo-reset-history .morzo-history-pagination{margin-top:8px!important;padding-top:0!important;}
.morzo-service-console #morzo-reset-history .morzo-history-pagination-buttons{gap:5px;}