/* ============================================================
   FINANCE ONLINE SEKOLAH
   SHARED UI THEME
   Version: 1.0
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {

    /* --------------------------------------------------------
       BRAND
       -------------------------------------------------------- */

    --finance-primary: #164a7d;
    --finance-primary-dark: #10385f;
    --finance-primary-light: #e8f1f8;

    --finance-accent: #ef3e68;
    --finance-accent-dark: #cf3156;
    --finance-accent-light: #fde9ee;


    /* --------------------------------------------------------
       STATUS
       -------------------------------------------------------- */

    --finance-success: #2e7d55;
    --finance-success-light: #e7f5ed;

    --finance-warning: #b7791f;
    --finance-warning-light: #fff4d5;

    --finance-danger: #c63d4c;
    --finance-danger-light: #fdecee;

    --finance-info: #3178a8;
    --finance-info-light: #e6f2fa;


    /* --------------------------------------------------------
       BACKGROUND
       -------------------------------------------------------- */

    --finance-bg-app: #eef1f5;
    --finance-bg-panel: #ffffff;
    --finance-bg-soft: #f7f9fb;
    --finance-bg-muted: #edf1f5;

    --finance-bg-selected: #dceaf6;
    --finance-bg-hover: #f3f6f9;


    /* --------------------------------------------------------
       TEXT
       -------------------------------------------------------- */

    --finance-text-primary: #29313a;
    --finance-text-secondary: #69737e;
    --finance-text-muted: #89929c;
    --finance-text-inverse: #ffffff;


    /* --------------------------------------------------------
       BORDER
       -------------------------------------------------------- */

    --finance-border: #d7dde4;
    --finance-border-dark: #c3cad2;
    --finance-border-focus: #3473a6;


    /* --------------------------------------------------------
       TYPOGRAPHY
       -------------------------------------------------------- */

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

    --finance-font-size-xs: 11px;
    --finance-font-size-sm: 12px;
    --finance-font-size-md: 13px;
    --finance-font-size-lg: 15px;
    --finance-font-size-xl: 20px;

    --finance-font-weight-normal: 400;
    --finance-font-weight-medium: 500;
    --finance-font-weight-semibold: 600;
    --finance-font-weight-bold: 700;


    /* --------------------------------------------------------
       FORM DIMENSIONS
       -------------------------------------------------------- */

    --finance-control-height: 36px;

    --finance-control-height-small: 30px;

    --finance-control-height-large: 42px;


    /* --------------------------------------------------------
       SPACING
       -------------------------------------------------------- */

    --finance-space-1: 4px;
    --finance-space-2: 6px;
    --finance-space-3: 8px;
    --finance-space-4: 12px;
    --finance-space-5: 16px;
    --finance-space-6: 20px;
    --finance-space-7: 24px;


    /* --------------------------------------------------------
       BORDER RADIUS
       -------------------------------------------------------- */

    --finance-radius-sm: 3px;
    --finance-radius-md: 5px;
    --finance-radius-lg: 8px;


    /* --------------------------------------------------------
       SHADOW
       -------------------------------------------------------- */

    --finance-shadow-sm:
        0 1px 3px rgba(0, 0, 0, .08);

    --finance-shadow-md:
        0 5px 18px rgba(0, 0, 0, .11);

    --finance-shadow-lg:
        0 18px 50px rgba(0, 0, 0, .24);


    /* --------------------------------------------------------
       LAYOUT
       -------------------------------------------------------- */

    --finance-header-height: 64px;

    --finance-sidebar-width: 54px;

    --finance-tabbar-height: 42px;

    --finance-toolbar-height: 52px;


    /* --------------------------------------------------------
       TRANSITION
       -------------------------------------------------------- */

    --finance-transition:
        120ms ease;
}


/* ============================================================
   2. GLOBAL RESET
   ============================================================ */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;

    width: 100%;
    min-height: 100%;

    font-family:
        var(--finance-font-family);

    font-size:
        var(--finance-font-size-md);

    color:
        var(--finance-text-primary);

    background:
        var(--finance-bg-app);
}

button,
input,
select,
textarea {
    font: inherit;
}


/* ============================================================
   3. STANDARD FORM CONTROL
   ============================================================ */

.finance-control {

    width: 100%;

    min-height:
        var(--finance-control-height);

    padding:
        0 var(--finance-space-4);

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

    border-radius:
        var(--finance-radius-md);

    background:
        var(--finance-bg-panel);

    color:
        var(--finance-text-primary);

    outline: none;

    transition:
        border-color var(--finance-transition),
        box-shadow var(--finance-transition);
}


.finance-control:hover {

    border-color:
        #aeb7c1;
}


.finance-control:focus {

    border-color:
        var(--finance-border-focus);

    box-shadow:
        0 0 0 2px rgba(52, 115, 166, .13);
}


.finance-control:disabled,
.finance-control[readonly] {

    background:
        var(--finance-bg-muted);

    color:
        var(--finance-text-muted);

    cursor:
        not-allowed;
}


/* ============================================================
   4. LABEL
   ============================================================ */

.finance-label {

    display: block;

    margin-bottom:
        var(--finance-space-2);

    font-size:
        var(--finance-font-size-sm);

    font-weight:
        var(--finance-font-weight-semibold);

    color:
        var(--finance-text-secondary);
}


/* ============================================================
   5. FORM GROUP
   ============================================================ */

.finance-form-group {

    display: flex;

    flex-direction: column;

    min-width: 0;
}


/* ============================================================
   6. STANDARD PANEL
   ============================================================ */

.finance-panel {

    background:
        var(--finance-bg-panel);

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

    border-radius:
        var(--finance-radius-md);

    box-shadow:
        var(--finance-shadow-sm);
}


.finance-panel-header {

    min-height: 46px;

    display: flex;

    align-items: center;

    padding:
        0 var(--finance-space-5);

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


.finance-panel-body {

    padding:
        var(--finance-space-5);
}


/* ============================================================
   7. MODULE PAGE
   ============================================================ */

.finance-module-page {

    display: flex;

    flex-direction: column;

    gap:
        var(--finance-space-4);

    min-width: 0;
}


.finance-module-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        var(--finance-space-4);
}


.finance-module-title {

    margin: 0;

    font-size:
        var(--finance-font-size-xl);

    font-weight:
        var(--finance-font-weight-semibold);
}


.finance-module-subtitle {

    margin-top:
        var(--finance-space-1);

    font-size:
        var(--finance-font-size-sm);

    color:
        var(--finance-text-secondary);
}


/* ============================================================
   8. UTILITY
   ============================================================ */

.finance-text-right {

    text-align: right !important;
}


.finance-text-center {

    text-align: center !important;
}


.finance-hidden {

    display: none !important;
}


.finance-flex {

    display: flex;
}


.finance-flex-between {

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.finance-gap {

    gap:
        var(--finance-space-3);
}


/* ============================================================
   9. STATUS COLORS
   ============================================================ */

.finance-status-success {

    color:
        var(--finance-success);

    background:
        var(--finance-success-light);
}


.finance-status-warning {

    color:
        var(--finance-warning);

    background:
        var(--finance-warning-light);
}


.finance-status-danger {

    color:
        var(--finance-danger);

    background:
        var(--finance-danger-light);
}


.finance-status-info {

    color:
        var(--finance-info);

    background:
        var(--finance-info-light);
}


/* ============================================================
   10. RESPONSIVE BASELINE
   ============================================================ */

@media (max-width: 900px) {

    :root {

        --finance-sidebar-width: 48px;
    }


    .finance-module-header {

        align-items:
            flex-start;

        flex-direction:
            column;
    }

}