/* =========================================================
   ABIOLA COMPUTER PLAZA
   FINAL GLOBAL DESIGN SYSTEM
   PHASE 19
========================================================= */

:root{

    --primary:#061b3a;
    --secondary:#0369a1;
    --accent:#00a8e8;

    --success:#15803d;
    --danger:#dc2626;
    --warning:#d97706;

    --white:#ffffff;
    --bg:#f1f5f9;
    --card:#ffffff;

    --text:#172033;
    --muted:#64748b;
    --border:#e2e8f0;

    --radius:10px;

    --shadow:
        0 4px 18px
        rgba(15,23,42,.07);

    --transition:
        .2s ease;

}


/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:
    Arial,
    Helvetica,
    sans-serif;

    background:var(--bg);

    color:var(--text);

    line-height:1.5;

    -webkit-font-smoothing:
    antialiased;

}


/* =========================================================
   LINKS
========================================================= */

a{

    color:inherit;

    text-decoration:none;

}


/* =========================================================
   BUTTONS
========================================================= */

button,
input,
select,
textarea{

    font-family:inherit;

}

button{

    cursor:pointer;

}

.btn{

    border:none;

    border-radius:
    var(--radius);

    padding:
    11px 16px;

    font-size:11px;

    font-weight:bold;

    transition:
    var(--transition);

}

.btn:hover{

    transform:
    translateY(-1px);

    box-shadow:
    0 5px 14px
    rgba(0,0,0,.12);

}

.btn-primary{

    background:
    var(--secondary);

    color:white;

}

.btn-dark{

    background:
    var(--primary);

    color:white;

}

.btn-success{

    background:
    var(--success);

    color:white;

}

.btn-danger{

    background:
    var(--danger);

    color:white;

}

.btn-warning{

    background:
    var(--warning);

    color:white;

}

.btn-light{

    background:
    #e2e8f0;

    color:
    #334155;

}


/* =========================================================
   INPUTS
========================================================= */

input,
select,
textarea{

    width:100%;

    border:
    1px solid
    #cbd5e1;

    border-radius:
    8px;

    padding:
    11px 12px;

    background:white;

    color:var(--text);

    font-size:11px;

    outline:none;

    transition:
    var(--transition);

}

input:focus,
select:focus,
textarea:focus{

    border-color:
    var(--secondary);

    box-shadow:
    0 0 0 3px
    rgba(3,105,161,.10);

}

textarea{

    min-height:110px;

    resize:vertical;

}


/* =========================================================
   FORM
========================================================= */

.form-grid{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:14px;

}

.form-group{

    display:flex;

    flex-direction:column;

    gap:6px;

}

.form-group.full{

    grid-column:
    1 / -1;

}

.form-group label{

    color:
    #475569;

    font-size:9px;

    font-weight:bold;

}


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

.card{

    background:
    var(--card);

    border:
    1px solid
    var(--border);

    border-radius:
    var(--radius);

    padding:18px;

    box-shadow:
    var(--shadow);

}

.card-title{

    display:flex;

    justify-content:
    space-between;

    align-items:center;

    gap:12px;

    margin-bottom:15px;

}

.card-title h3{

    color:
    var(--primary);

    font-size:14px;

}

.card-title p{

    color:
    var(--muted);

    font-size:9px;

    margin-top:4px;

}


/* =========================================================
   BADGES
========================================================= */

.badge{

    display:inline-block;

    padding:
    5px 9px;

    border-radius:
    20px;

    font-size:8px;

    font-weight:bold;

}

.badge-success{

    background:
    #dcfce7;

    color:
    #15803d;

}

.badge-danger{

    background:
    #fee2e2;

    color:
    #b91c1c;

}

.badge-warning{

    background:
    #fef3c7;

    color:
    #a16207;

}

.badge-info{

    background:
    #dbeafe;

    color:
    #1d4ed8;

}

.badge-gray{

    background:
    #e2e8f0;

    color:
    #475569;

}


/* =========================================================
   LOADING SCREEN
========================================================= */

#acpLoader{

    position:fixed;

    inset:0;

    z-index:99999;

    background:
    var(--primary);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    color:white;

    transition:
    opacity .35s ease,
    visibility .35s ease;

}

#acpLoader.hide{

    opacity:0;

    visibility:hidden;

}

.acp-loader-logo{

    width:75px;

    height:75px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #0077b6,
        #00a8e8
    );

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    font-weight:bold;

    margin-bottom:15px;

}

.acp-loader-title{

    font-size:17px;

    font-weight:bold;

}

.acp-loader-text{

    font-size:9px;

    color:#b8ddf2;

    margin-top:5px;

}

.acp-loader-spinner{

    width:25px;

    height:25px;

    border:
    3px solid
    rgba(255,255,255,.2);

    border-top-color:
    white;

    border-radius:50%;

    animation:
    acpSpin .8s linear infinite;

    margin-top:18px;

}

@keyframes acpSpin{

    to{

        transform:
        rotate(360deg);

    }

}


/* =========================================================
   TOAST
========================================================= */

#acpToastContainer{

    position:fixed;

    right:15px;

    bottom:15px;

    z-index:99998;

    display:flex;

    flex-direction:column;

    gap:8px;

    max-width:
    calc(100vw - 30px);

}

.acp-toast{

    min-width:250px;

    max-width:340px;

    background:white;

    border:
    1px solid
    var(--border);

    border-left:
    4px solid
    var(--secondary);

    box-shadow:
    0 8px 25px
    rgba(15,23,42,.15);

    border-radius:8px;

    padding:12px;

    animation:
    acpToastIn .25s ease;

}

.acp-toast strong{

    display:block;

    font-size:10px;

    margin-bottom:3px;

}

.acp-toast p{

    color:
    var(--muted);

    font-size:9px;

}

.acp-toast.success{

    border-left-color:
    var(--success);

}

.acp-toast.error{

    border-left-color:
    var(--danger);

}

.acp-toast.warning{

    border-left-color:
    var(--warning);

}

@keyframes acpToastIn{

    from{

        transform:
        translateX(30px);

        opacity:0;

    }

    to{

        transform:
        translateX(0);

        opacity:1;

    }

}


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

.acp-mobile-menu{

    display:none;

    position:fixed;

    inset:0;

    z-index:5000;

}

.acp-mobile-overlay{

    position:absolute;

    inset:0;

    background:
    rgba(2,8,23,.65);

}

.acp-mobile-panel{

    position:absolute;

    left:0;

    top:0;

    bottom:0;

    width:280px;

    max-width:85vw;

    background:white;

    padding:20px;

    overflow-y:auto;

    box-shadow:
    10px 0 30px
    rgba(0,0,0,.15);

}

.acp-mobile-menu.show{

    display:block;

}

.acp-mobile-close{

    position:absolute;

    right:12px;

    top:12px;

    border:none;

    background:
    #f1f5f9;

    width:34px;

    height:34px;

    border-radius:7px;

    font-size:18px;

}

.acp-mobile-brand{

    padding:
    10px 5px 25px;

    border-bottom:
    1px solid
    var(--border);

    margin-bottom:15px;

}

.acp-mobile-brand strong{

    display:block;

    color:
    var(--primary);

    font-size:15px;

}

.acp-mobile-brand small{

    color:
    var(--muted);

    font-size:9px;

}

.acp-mobile-links{

    display:flex;

    flex-direction:column;

    gap:5px;

}

.acp-mobile-links button{

    border:none;

    background:transparent;

    text-align:left;

    padding:12px;

    border-radius:7px;

    color:#475569;

    font-size:11px;

}

.acp-mobile-links button:hover{

    background:#e0f2fe;

    color:#0369a1;

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.acp-menu-button{

    display:none;

    border:none;

    background:
    rgba(255,255,255,.1);

    color:white;

    width:38px;

    height:38px;

    border-radius:7px;

    font-size:18px;

}


/* =========================================================
   TABLE RESPONSIVENESS
========================================================= */

.acp-table-wrap{

    width:100%;

    overflow-x:auto;

    -webkit-overflow-scrolling:
    touch;

}

.acp-table-wrap table{

    min-width:700px;

}


/* =========================================================
   MODAL
========================================================= */

.acp-modal{

    display:none;

    position:fixed;

    inset:0;

    background:
    rgba(2,8,23,.75);

    z-index:6000;

    padding:15px;

    overflow-y:auto;

}

.acp-modal.show{

    display:block;

}

.acp-modal-box{

    background:white;

    width:100%;

    max-width:650px;

    margin:
    30px auto;

    border-radius:
    12px;

    overflow:hidden;

}

.acp-modal-header{

    background:
    var(--primary);

    color:white;

    padding:15px;

    display:flex;

    align-items:center;

    justify-content:
    space-between;

}

.acp-modal-header h3{

    font-size:13px;

}

.acp-modal-close{

    width:32px;

    height:32px;

    border:none;

    border-radius:6px;

    background:
    rgba(255,255,255,.1);

    color:white;

    font-size:18px;

}

.acp-modal-body{

    padding:18px;

}


/* =========================================================
   EMPTY STATE
========================================================= */

.acp-empty{

    text-align:center;

    padding:45px 20px;

    color:#94a3b8;

}

.acp-empty-icon{

    font-size:38px;

    margin-bottom:10px;

}

.acp-empty strong{

    display:block;

    color:#64748b;

    font-size:12px;

    margin-bottom:5px;

}

.acp-empty p{

    font-size:9px;

}


/* =========================================================
   ERROR MESSAGE
========================================================= */

.acp-error{

    display:none;

    background:#fee2e2;

    color:#b91c1c;

    border:
    1px solid
    #fecaca;

    padding:10px;

    border-radius:7px;

    font-size:9px;

    margin-bottom:12px;

}

.acp-error.show{

    display:block;

}


/* =========================================================
   SUCCESS MESSAGE
========================================================= */

.acp-success{

    background:#dcfce7;

    color:#15803d;

    border:
    1px solid
    #bbf7d0;

    padding:10px;

    border-radius:7px;

    font-size:9px;

}


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

@media(max-width:900px){

    .form-grid{

        grid-template-columns:1fr;

    }

    .form-group.full{

        grid-column:auto;

    }

    .acp-menu-button{

        display:block;

    }

}


@media(max-width:700px){

    .card{

        padding:14px;

    }

    .card-title{

        align-items:flex-start;

        flex-direction:column;

    }

    .acp-toast{

        min-width:
        0;

        width:
        calc(100vw - 30px);

    }

}


@media(max-width:500px){

    body{

        font-size:14px;

    }

    .btn{

        width:100%;

        padding:11px;

    }

    .header-buttons{

        width:100%;

        flex-direction:column;

    }

}


/* =========================================================
   PRINT
========================================================= */

@media print{

    #acpLoader,
    #acpToastContainer,
    .acp-menu-button,
    .acp-mobile-menu,
    button{

        display:none !important;

    }

    body{

        background:white;

    }

    .card{

        box-shadow:none;

        border:
        1px solid #ddd;

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible{

    outline:
    3px solid
    rgba(3,105,161,.3);

    outline-offset:2px;

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(
    prefers-reduced-motion:reduce
){

    *{

        scroll-behavior:auto !important;

        animation-duration:
        .01ms !important;

        animation-iteration-count:
        1 !important;

        transition-duration:
        .01ms !important;

    }

}