@config "../../tailwind.frontend.config.js";

@tailwind base;
/*
 * Element defaults the old Bootstrap 3 theme used to provide, so pages keep
 * their look now that it is gone. Only element selectors here; colours and
 * spacing on components come from utilities.
 */
@layer base {
    body {
        font-family: Montserrat, sans-serif;
        font-size: 14px;
        line-height: 24px;
        color: theme('colors.body');
        background-color: #fff;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: inherit;
        font-weight: 500;
        line-height: 1.1;
        color: theme('colors.heading');
    }

    /* Bootstrap 3 sizes; the theme enlarged h1-h4 from 993px up */
    h1, h2, h3 { margin-top: 20px; }
    h4, h5, h6 { margin-top: 10px; }
    h1, h2, h3, h4, h5, h6 { margin-bottom: .25em; }

    h1 { font-size: 36px; }
    h2 { font-size: 30px; }
    h3 { font-size: 24px; }
    h4 { font-size: 18px; }
    h5 { font-size: 14px; }
    h6 { font-size: 12px; }

    @media (min-width: 993px) {
        h1 { font-size: 46px; }
        h2 { font-size: 36px; }
        h3 { font-size: 27px; }
        h4 { font-size: 20px; }
    }

    p {
        margin: 0 0 10px;
        line-height: 1.8;
        text-transform: capitalize;
    }

    p a {
        color: theme('colors.theme');
    }

    a {
        color: theme('colors.heading');
        text-decoration: none;
        transition: all .3s ease-in-out;
    }

    b, strong {
        font-weight: 600;
    }

    small {
        font-size: .875em;
    }

    label {
        display: inline-block;
        max-width: 100%;
        margin-bottom: 5px;
        font-weight: 500;
    }

    ul, ol {
        margin: 0 0 10px;
        padding-left: 40px;
    }

    ul { list-style: disc; }
    ol { list-style: decimal; }

    img {
        display: inline;
        max-width: none;
        vertical-align: middle;
    }

    iframe {
        display: inline;
        vertical-align: baseline;
    }

    input[type="checkbox"],
    input[type="radio"] {
        margin: 4px 0 0;
        line-height: normal;
    }
}

@tailwind components;
@tailwind utilities;

@layer components {
    /* Same widths as the old Bootstrap 3 .container */
    .site-container {
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
    }

    @media (min-width: 768px) {
        .site-container { width: 750px; }
    }

    @media (min-width: 992px) {
        .site-container { width: 970px; }
    }

    @media (min-width: 1200px) {
        .site-container { width: 1170px; }
    }
}

@layer components {
    /* Same look as the old theme's .form-control */
    .site-input {
        display: block;
        width: 100%;
        height: 35px;
        margin-bottom: 10px;
        padding: 6px 12px;
        font-size: 15px;
        line-height: 1.42857;
        font-weight: 400;
        color: #6b7c8a;
        background-color: #fbfdff;
        border: 1px solid theme('colors.line');
        border-radius: 0;
        box-shadow: none;
    }

    .site-input:hover,
    .site-input:focus {
        border-color: theme('colors.theme');
        box-shadow: 0 1px 1px rgba(7, 177, 7, .075);
        outline: 0;
    }

    .site-input::placeholder {
        color: #8995a2;
        opacity: 1;
    }

    textarea.site-input {
        height: auto;
    }

    /* Same look as the old theme's .btn */
    .site-btn {
        display: inline-block;
        padding: 10px 15px;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        white-space: nowrap;
        border: 1px solid transparent;
        border-radius: 2px;
        cursor: pointer;
        text-decoration: none;
    }

    .site-btn:disabled {
        cursor: not-allowed;
        opacity: .65;
    }

    .site-btn-theme {
        color: #fff;
        background-color: theme('colors.theme');
        border-color: theme('colors.theme');
    }

    .site-btn-success {
        color: #fff;
        background-color: theme('colors.success');
        border-color: theme('colors.success');
    }

    .site-btn-default {
        color: #677897;
        background-color: #fff;
        border-color: theme('colors.card');
    }

    .site-btn-theme:hover,
    .site-btn-theme:focus,
    .site-btn-success:hover,
    .site-btn-success:focus {
        color: #fff;
        opacity: .9;
    }
}

@layer components {
    /* Same look as the old Bootstrap label */
    .site-label {
        display: inline-block;
        max-width: 100%;
        margin-bottom: 5px;
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
        color: theme('colors.body');
    }

    /* Replaces the old .cf-input/.custom-file widget; also shows the chosen file name */
    .site-file {
        display: block;
        width: 100%;
        height: 50px;
        margin-bottom: 10px;
        font-size: 14px;
        line-height: 48px;
        color: #495057;
        background-color: #fff;
        border: 1px solid #ced4da;
        border-radius: 4px;
        cursor: pointer;
    }

    .site-file::file-selector-button {
        height: 48px;
        margin-right: 12px;
        padding: 0 28px;
        color: #495057;
        background-color: #e9ecef;
        border: 0;
        border-right: 1px solid #ced4da;
        cursor: pointer;
    }

    /* Same look as the old theme's .table.table-bordered(.table-striped) */
    .site-table-wrap {
        width: 100%;
        overflow-x: auto;
    }

    .site-table {
        width: 100%;
        max-width: 100%;
        margin-bottom: 10px;
        border: 1px solid #ddd;
        border-collapse: collapse;
    }

    .site-table th {
        padding: 15px 12px;
        font-weight: 700;
        line-height: 20px;
        text-align: left;
        vertical-align: top;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
    }

    .site-table td {
        padding: 15px;
        font-size: 13.5px;
        line-height: 1.42857;
        vertical-align: middle;
        border: 1px solid theme('colors.card');
    }

    .site-table-striped tbody tr:nth-of-type(odd) {
        background-color: #fcfcfc;
    }
}

/* Khmer fonts (moved from the old theme stylesheet) */
@font-face {
    font-family: 'Khmer OS Battambang';
    src: url('@/assets/fonts/Khmer-OS-Battambang-Regular.ttf') format('ttf'), url('@/assets/fonts/Khmer-OS-Battambang-Regular.ttf') format('ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Khmer OS Battambang Bold';
    src: url('@/assets/fonts/Khmer OS Battambang-Bold_Version 6.0.ttf') format('ttf'), url('@/assets/fonts/Khmer OS Battambang-Bold_Version 6.0.ttf') format('ttf');
    font-weight: 900;
    font-style: bold;
}

@font-face {
    font-family: 'Khmer OS Muol Light';
    src: url('@/assets/fonts/Khmer OS Muol Light Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Khmer OS Muol';
    src: url('@/assets/fonts/Khmer-OS-Muol-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Khmer OS Siemreap';
    src: url('@/assets/fonts/Khmer OS Siemreap Regular.ttf') format('ttf'), url('@/assets/fonts/Khmer OS Siemreap Regular.ttf') format('ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Khmer OS Fasthand';
    src: url('@/assets/fonts/Khmer OS Fasthand Regular.ttf') format('ttf'), url('@/assets/fonts/Khmer OS Fasthand Regular.ttf') format('ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Tacteing';
    src: url('@/assets/fonts/Tacteing.TTF') format('ttf'), url('@/assets/fonts/Tacteing.TTF') format('ttf');
    font-weight: 400;
    font-style: normal;
}

/* Printable certificate (Frontend/Certificate/Show) — moved as-is from the old theme stylesheet */
.container-certificate {
    background-image: url("@/assets/images/certificate/1.jpg");
    min-height: 904px;
}

.container-level-1 {
    background-image: url("@/assets/images/certificate/1.png");
    min-height: 904px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.container-level-2 {
    background-image: url("@/assets/images/certificate/2.png");
    min-height: 904px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.container-level-3 {
    background-image: url("@/assets/images/certificate/3.png");
    min-height: 904px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}


.text-color-certificate {
    color: #232560 !important;

}

.certificate-font-size span {
    font-size: 18px !important;
}

.certificate-font-size-3 span {
    font-size: 16.5px !important;
}

#wrapper-date {
    position: relative;
}

#start-month {
    position: absolute;
    left: 50px;
}

#date-month {
    position: absolute;
    left: 110px;
}

#date-day {
    position: absolute;
    left: 155px;
}

#date-year {
    position: absolute;
    left: 230px;
}

#do-month {
    position: absolute;
    left: 220px;
}

#do-day {
    position: absolute;
    left: 150px;
}

#do-year {
    position: absolute;
    left: 310px;
}

#end-day {
    position: absolute;
    left: 155px;
}

#end-month {
    position: absolute;
    left: 205px;
}

#end-year {
    position: absolute;
    left: 280px;
}

#education-place {
    position: absolute;
    left: 380px;
}

#anno-domini-date {
    position: absolute;
    left: 375px;
}

#certificate {
    position: relative;
}

#certificate-profile {
    position: absolute;
    top: 615px;
    left: 555px;
}

#certificate-qrcode {
    position: absolute;
    top: 705px;
    left: 700px;
}

#certificate-qrcode-3 {
    position: absolute;
    top: 715px;
    right: 115px;
}

#party {
    position: absolute;
    top: 185px;
    left: 108px;
    width: 450px;
}

#party-committee-2 {
    position: absolute;
    top: 569.9px;
    right: 150px;
    text-align: center;
}

#party-committee-3 {
    position: absolute;
    top: 569.9px;
    right: 150px;
    text-align: center;
}

#party-committee-3 p, #party-committee-2 p {
    line-height: 1.2 !important;
}

#do-place {
    position: absolute;
    top: 503px;
    right: 660px;
}

@media print {

    * {
        -webkit-print-color-adjust: exact;
    }

    #party {
        position: absolute;
        top: 185px;
        left: 108px;
        width: 450px;
    }

    #party-committee {
        position: absolute;
        top: 558.9px;
        left: 993.5px;
    }

    #do-place {
        position: absolute;
        top: 503px;
        right: 660px;
    }

    .text-color-certificate {
        color: #232560 !important;
    }

    .certificate-font-size span {
        font-size: 22px !important;
        color: #232560 !important;
        font-weight: 700;
    }

    .text-color-certificate-3 {
        color: #000000 !important;
    }

    .certificate-font-size-3 span {
        font-size: 16.5px !important;
        color: #000000 !important;
    }


    .container-certificate {
        background-image: url("@/assets/images/certificate/1.jpg") !important;
        min-height: 904px;
    }

    .container-level-1 {
        background-image: url("@/assets/images/certificate/1.png") !important;
        min-height: 904px;
        background-repeat: no-repeat;
        background-size: 100% 100% !important;

    }

    .container-level-2 {
        background-image: url("@/assets/images/certificate/2.png") !important;
        min-height: 904px;
        background-repeat: no-repeat;
        background-size: 100% 100% !important;
    }

    .container-level-3 {
        background-image: url("@/assets/images/certificate/3.png") !important;
        min-height: 904px;
        background-repeat: no-repeat;
        background-size: 100% 100% !important;
    }
}

.container-wraper {
    width: 1280px !important;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.font-muol-light {
    font-family: 'Khmer OS Muol Light';
}

.qrcode-show {
    vertical-align: middle
}

/*
 * PrimeVue's theme injects `.pi { font-size: var(--p-icon-size) }` at runtime.
 * Icons inherit the surrounding text size instead (like the old Font Awesome
 * icons); explicit sizes use the important modifier, e.g. `!text-sm`.
 */
i.pi {
    font-size: inherit;
}