@font-face {
    font-family: 'Graphik Condensed Web';
    src: url('../fonts/GraphikCondensed-Bold-Web.woff2') format('woff2'),
    url('../fonts/GraphikCondensed-Bold-Web.woff') format('woff'),
    url('../fonts/GraphikCondensed-Bold-Web.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}


@font-face {
    font-family: 'MatterMonoBold';
    src: url('../fonts/MatterMonoBold.woff2') format('woff2'),
    url('../fonts/MatterMonoBold.woff') format('woff'),
    url('../fonts/MatterMonoBold.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'MatterMonoMedium';
    src: url('../fonts/MatterMonoMedium.woff2') format('woff2'),
    url('../fonts/MatterMonoMedium.woff') format('woff'),
    url('../fonts/MatterMonoMedium.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'MatterMonoRegular';
    src: url('../fonts/MatterMonoRegular.woff2') format('woff2'),
    url('../fonts/MatterMonoRegular.woff') format('woff'),
    url('../fonts/MatterMonoRegular.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'MatterRegular';
    src: url('../fonts/MatterRegular.woff2') format('woff2'),
    url('../fonts/MatterRegular.woff') format('woff'),
    url('../fonts/MatterRegular.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'MatterRegularItalic';
    src: url('../fonts/MatterRegularItalic.woff2') format('woff2'),
    url('../fonts/MatterRegularItalic.woff') format('woff'),
    url('../fonts/MatterRegularItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'MatterSemiBold';
    src: url('../fonts/MatterSemiBold.woff2') format('woff2'),
    url('../fonts/MatterSemiBold.woff') format('woff'),
    url('../fonts/MatterSemiBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'MatterSemiBoldItalic';
    src: url('../fonts/MatterSemiBoldItalic.woff2') format('woff2'),
    url('../fonts/MatterSemiBoldItalic.woff') format('woff'),
    url('../fonts/MatterSemiBoldItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

.black {color: #1c1c1c;}
.white {color: #fff;}
.sand {color: #F8F5F0;}
.cactus {color: #7F8236;}
.sky {color: #CCE2EC;}
.rock {color: #AA8765;}
.greydark {color: #262626;}
.greymedium {color: #3B3B3A;}
.greylight {color: #7A7977;}
.error {color: #AA3619;}
.lightgreytext { color: #424242; }

body {
    background: #1c1c1c;
}

/* Remove focus outline from all inputs */
input:focus,
textarea:focus,
select:focus,
button:focus,
.fi-input-wrapper input:focus,
.fi-input-wrapper textarea:focus {
    outline: none !important;
    box-shadow: none !important;
    ring: none !important;
    --tw-ring-shadow: none !important;
    --tw-text-opacity: none !important;
}

/* Change placeholder text color */
input::placeholder,
textarea::placeholder,
select::placeholder {
    color:  #1c1c1c !important;
    opacity: 1; /* Firefox needs this */
}

/* For different browsers */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #1c1c1c !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #1c1c1c !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #1c1c1c !important;
}

body button.fi-btn-color-primary,
body a.btncreate,
body a.btnedit,
body button.fi-btn-color-primary {
    background: #AA8765;
    color: #1c1c1c !important;
    text-transform: uppercase;
    padding: 16px 64px;
    border-radius: 100px;
    cursor: pointer;
    font-family: 'MatterMonoMedium', serif;
    font-size: 16px;
    border: none;
}

body button.fi-btn-color-primary:hover,
body a.btncreate:hover,
body a.btnedit:hover {
    background: #F8F5F0;
}

body button.btnpdf {
    background: #7F8236;
    color: #1c1c1c !important;
    text-transform: uppercase;
    padding: 16px 64px;
    border-radius: 100px;
    cursor: pointer;
    font-family: 'MatterMonoMedium', serif;
    font-size: 16px;
}

body button.btnpdf:hover {
    background: #F8F5F0;
}

body.adminPanel a.btncreateuser {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='18' viewBox='0 0 21 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1755_3761)'%3E%3Cpath d='M18.2339 5.625H17.1289V12.375H18.2339V5.625Z' fill='%231C1C1C'/%3E%3Cpath d='M20.9972 8.4375H14.3672V9.5625H20.9972V8.4375Z' fill='%231C1C1C'/%3E%3Cpath d='M7.73815 10.125C4.99774 10.125 2.76562 7.8525 2.76562 5.0625C2.76562 2.2725 4.99774 0 7.73815 0C10.4786 0 12.7107 2.2725 12.7107 5.0625C12.7107 7.8525 10.4786 10.125 7.73815 10.125ZM7.73815 1.125C5.60549 1.125 3.87063 2.89125 3.87063 5.0625C3.87063 7.23375 5.60549 9 7.73815 9C9.87081 9 11.6057 7.23375 11.6057 5.0625C11.6057 2.89125 9.87081 1.125 7.73815 1.125Z' fill='%231C1C1C'/%3E%3Cpath d='M14.9215 18H0.556409C0.252533 18 0.00390625 17.7469 0.00390625 17.4375V16.875C0.00390625 12.9769 3.61727 9.5625 7.73895 9.5625C11.8606 9.5625 15.474 12.9769 15.474 16.875V17.4375C15.474 17.7469 15.2254 18 14.9215 18ZM1.10891 16.875H14.369C14.369 13.5787 11.2694 10.6875 7.73895 10.6875C4.20845 10.6875 1.10891 13.5787 1.10891 16.875Z' fill='%231C1C1C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1755_3761'%3E%3Crect width='21' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: 13px center;
    padding-left: 40px;
    padding-right: 30px;
}

body button.alternative,
body a.fi-btn-color-gray,
body button.fi-btn-color-gray {
    background: #F8F5F0;
    color: #1c1c1c !important;
    text-transform: uppercase;
    padding: 16px 64px;
    border-radius: 100px;
    cursor: pointer;
    font-family: 'MatterMonoMedium', serif;
    font-size: 16px;
    border: none;
}

body button.alternative:hover,
body a.fi-btn-color-gray:hover,
body button.fi-btn-color-gray:hover {
    background: #AA8765;
}

body button.btndelete,
body button#retrieve-autosave-button {
    background: #AA3619;
    color: #1c1c1c !important;
    text-transform: uppercase;
    padding: 16px 64px;
    border-radius: 100px;
    cursor: pointer;
    font-family: 'MatterMonoMedium', serif;
    font-size: 16px;
}

body button.btndelete:hover,
body button#retrieve-autosave-button:hover {
    background: #F8F5F0;
}

body input[type='text'], body textarea, body select, body input[type='number'], span.select2,
body input[type='email'],body input[type='tel'],body input[type='password'], body input[type='date'] {
    border: 1px solid  #1c1c1c;
    border-color: #1c1c1c !important;
    padding: 16px;
    background: #F8F5F0;
    font-family: 'MatterRegular', serif;
    font-size: 14px;
    line-height: 16px;
    border-radius: 4px;
}

button.bg-custom-600[role='switch'] {
    background: #AA8765;
}

input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    align-content: center;
    justify-content: center;
    font-size: 22px;
    padding: 0.1rem;
    border: 2px solid #1c1c1c;
    border-radius: 50px;
    width: 22px !important;
    height: 22px;
    display: inline-block;
    cursor: pointer;
    position: relative;
    top: 0;
    color: #AA8765;
}

input[type="checkbox"]::before {

}

input[type="checkbox"]:checked {
    border: 2px solid #1c1c1c;
    background: #AA8765;
}

input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
    content: "";
    width: 6px;
    height: 10px;
    transform: rotate(45deg);
    border-bottom: 2px solid #1c1c1c;
    border-right: 2px solid #1c1c1c;
    display: block;
    left: 4px;
    position: relative;
    top: -1px;
}

input[type="checkbox"]:hover {
    color: #AA8765;
    background: #AA8765;
}

div.logo {
    text-align: center;
    justify-content: center;
}

.logincontent {
    max-width: 500px;
    display: flex;
    margin: auto;
    flex-direction: column;
    padding: 48px;
    justify-content: space-between;
    height: 50vh;
    width: 100%;
}

.logincontent .logo img {
    width: 100%;
    max-width: 420px;
}

h2.logintitle {
    font-family: 'Graphik Condensed Web', sans-serif;
    font-size: 40px;
    font-weight: bold;
    text-align: left;
    color: #AA8765;
    text-transform: uppercase;
    margin: 0;
}

.loginsubtitle {
    font-family: 'MatterRegular';
    font-size: 14px;
    margin: 8px 0 14px 0;
    text-align: left;
}

.loginform button,
button.resetbutton,
.loginform input
{
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

.loginform button {
    margin-top: 12px;
}

/* ================== Dashboard Styles ================== */
.dashboard-container {
    min-height: 100vh;
    background-color: #1c1c1c;
    color: #f8f5f0;
    padding: 2rem;
    font-family: 'MatterRegular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Header */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #333;
}

.logo {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.logo img {
    max-width: 300px;
}

.logo-regroup {
    color: #f8f5f0;
}

.logo-fit {
    background-color: #f8f5f0;
    color: #1c1c1c;
    padding: 0.25rem 0.75rem;
    font-weight: 700;
}

.header-info {
    text-align: right;
    font-size: 0.875rem;
    font-family: 'MatterSemiBold', serif;
}

.datetime {
    margin-bottom: 0.25rem;
    font-family: 'MatterSemiBold', serif;
}

.account-status {
    color: #999;
}

.status-active {
    color: #f8f5f0;
    font-weight: 600;
}

/* Welcome Section */
.welcome-section {
    margin-bottom: 3rem;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

.welcome-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.02em;
    font-family: 'Graphik Condensed Web', sans-serif;
}

.welcome-name {
    font-size: 1.5rem;
    margin: 0.5rem 0 0 0;
    color: #ccc;
    font-family: 'MatterMonoRegular', monospace;
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

.dashboard-box {
    background-color: transparent;
    border: 1px solid #3a3a3a;
    border-radius: 0.375rem;
    padding: 2rem;
}

.dashboard-box.editmode {
    background: #424242;
}

.dashboard-box.editmode input {
    border-color: #f8f5f0 !important;
    background: transparent !important;
}

.box-title {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin: 0 0 1.5rem 0;
    color: #f8f5f0;
    font-family: 'MatterMonoMedium', monospace;
}

/* Profile Content */
.profile-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.profile-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.profile-field label {
    font-weight: 600;
    color: #f8f5f0;
    font-size: 0.875rem;
    font-family: 'MatterSemiBold', sans-serif;
}

.profile-field span {
    color: #999;
    font-family: 'MatterMonoRegular', monospace;
}

.profile-input {
    background-color: #1c1c1c !important;
    border: 1px solid #444 !important;
    border-radius: 0.25rem !important;
    padding: 0.75rem !important;
    color: #f8f5f0 !important;
    font-size: 0.875rem !important;
    font-family: 'MatterMonoRegular', monospace !important;
}

.profile-input:focus {
    outline: none !important;
    border-color: #AA8765 !important;
}

.profile-input:read-only {
    background-color: #2a2a2a !important;
    cursor: not-allowed;
    opacity: 0.6;
}

.profile-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

/* Buttons */
.btn-edit {
    background-color: #AA8765;
    color: #1c1c1c;
    border: none;
    border-radius: 50px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-family: 'MatterMonoMedium', monospace;
    text-transform: uppercase;
    justify-content: center;
}

.btn-edit:hover {
    background-color: #c09a76;
    transform: translateY(-1px);
}

.btn-logout {
    background: transparent;
    border: 1px solid #424242;
    background-image: url("data:image/svg+xml,%3Csvg width='63' height='63' viewBox='0 0 63 63' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.75' y='0.75' width='61.5' height='61.5' rx='30.75' stroke='%2391785F' stroke-width='1.5'/%3E%3Cg clip-path='url(%23clip0_1773_11941)'%3E%3Cpath d='M44.6278 46.4892H28.6703C27.6378 46.4892 26.793 45.6459 26.793 44.6152V37.1191C26.793 36.6038 27.2154 36.1821 27.7316 36.1821C28.2479 36.1821 28.6703 36.6038 28.6703 37.1191V44.6152H44.6278V18.3789H28.6703V25.875C28.6703 26.3903 28.2479 26.812 27.7316 26.812C27.2154 26.812 26.793 26.3903 26.793 25.875V18.3789C26.793 17.3482 27.6378 16.5049 28.6703 16.5049H44.6278C45.6603 16.5049 46.5051 17.3482 46.5051 18.3789V44.6152C46.5051 45.6459 45.6603 46.4892 44.6278 46.4892Z' fill='%23F8F5F0'/%3E%3Cpath d='M38.0895 32.4365H17.4387C16.9224 32.4365 16.5 32.0149 16.5 31.4995C16.5 30.9842 16.9224 30.5625 17.4387 30.5625H38.0895C38.6058 30.5625 39.0282 30.9842 39.0282 31.4995C39.0282 32.0149 38.6058 32.4365 38.0895 32.4365Z' fill='%23F8F5F0'/%3E%3Cpath d='M23.1121 38.0603C22.8681 38.0603 22.6334 37.9666 22.4457 37.7886L16.8136 32.1665C16.4475 31.8011 16.4475 31.2108 16.8136 30.8454L22.4457 25.2233C22.8117 24.8579 23.4031 24.8579 23.7692 25.2233C24.1353 25.5887 24.1353 26.179 23.7692 26.5445L18.8036 31.5013L23.7692 36.4581C24.1353 36.8235 24.1353 37.4138 23.7692 37.7792C23.5815 37.9666 23.3468 38.051 23.1027 38.051L23.1121 38.0603Z' fill='%23F8F5F0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1773_11941'%3E%3Crect width='30' height='30' fill='white' transform='translate(16.5 16.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: 20px center;
    background-size: 24px;
    color: #f8f5f0;
    padding: 20px 40px 20px 60px;
    border-radius: 2px;
    cursor: pointer;
}

.btn-logout:hover {
    opacity: 0.8;
}

.btn-primary {
    background-color: #AA8765;
    color: #1c1c1c;
    border: none;
    border-radius: 50px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'MatterMonoMedium', monospace;
    text-transform: uppercase;
}

.btn-primary:hover {
    background-color: #c09a76;
}

.icon-edit,
.icon-logout {
    width: 1.25rem;
    height: 1.25rem;
}

/* Fits Content */
.fits-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.fits-summary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fits-count {
    font-size: 0.875rem;
    margin: 0;
    color: #999;
    font-family: 'MatterMonoRegular', monospace;
}

.evaluations-info,
.latest-evaluation {
    font-size: 0.875rem;
    margin: 0;
    color: #999;
    font-family: 'MatterMonoRegular', monospace;
}

.fits-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fit-item {
    display: flex;
    justify-content: left;
    align-items: center;
    background-color: #3a3a3a;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    text-decoration: none;
    color: #f8f5f0;
    transition: background-color 0.2s;
    gap: 36px;
}

.fit-item:hover {
    background-color: #444;
}

.fit-date {
    font-size: 0.875rem;
    font-family: 'MatterMonoRegular', monospace;
    flex-basis: 15%;
}

.fit-type, .fit-model {
    font-size: 0.875rem;
    color: #999;
    font-family: 'MatterMonoRegular', monospace;
    flex-basis: 20%;
    flex: 1;
}

.fit-download {
    margin-left: auto;
    flex-basis: 10%;
}

.fit-download svg {
    color: #999;
    width: 16px;
}

.no-fits {
    color: #666;
    font-size: 0.875rem;
    text-align: center;
    padding: 2rem 0;
    font-family: 'MatterMonoRegular', monospace;
}

/* Logout Section */
.logout-section {
    max-width: 20rem;
}

@media (max-width: 620px) {
    section.welcome-section {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

    .fit-type {
        display: none;
    }
}