:root {
    --color-app-background: #ffffff;
    --color-theme: #f97316;
    --color-white: #ffffff;
    --color-theme-bg: #f1f5f9;
    --color-text-primary: #222222;
    --color-text-secondary: #6D6D6D;
    --color-thema-text: #f97316;
    --color-orange-button-background: #f97316;
    --color-blue-button-text: #F2F1F9;
    --color-border: #efefef;
    --toolbar: #f97316;
    --color-navbar-icon: #28272e;
    --color-box-background: #F9F9F9;
    --color-box-subtitle: #F1692B;
    --color-swipe-handler: #848484;
    --success-color: #00751b;
    --success-background: #28a74514;
    --danger-color: #c40303;
    --danger-background: #ffaeae42;
    --claret-red-color: #922F2F;
    --dark-orange-color: #292874;
    --dark-orange-color: #D06D17;
    --dark-green-color: #18836D;
    --transparent-orange-bg: #fff5f0;
    --navbar-height-2: 80px;

    --box-bg: #fafaf9;
    font-family: 'Inter', sans-serif;
}

.md .page-content {
    padding-top: var(--navbar-height-2) !important;
}

.ios,
.md {
    background-color: var(--color-app-background) !important;
}

.page,
.navbars,
.navbar-inner,
.toolbar {
    background-color: var(--color-app-background) !important;
}

body {
    font-family: 'Inter', sans-serif !important;
}

.toolbar,
.toolbar .toolbar-inner,
.toolbar .tabbar-label {
    font-family: 'Inter', sans-serif !important;
}

#main-toolbar .menu-selected {
    color: var(--toolbar);
}

.navbar {
    height: var(--navbar-height-2) !important;
    line-height: var(--navbar-height-2) !important;
    color: var(--color-navbar-icon) !important;
}

.navbar-inner {
    padding: 1rem !important;
}

.navbar-inner,
.navbar-bg {
    height: 80px;
}

.navbar a {
    color: var(--color-text-primary) !important;
}

.page-content {
    padding: 1rem;
    padding-bottom: 100px !important;
    overflow-x: hidden;
}

.page[data-name="individual_permit_info"] .page-content {
    overflow-x: hidden !important;
    /* Gerekirse, box-sizing ve width ayarları da eklenebilir: */
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.sheet-modal-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.sheet-backdrop {
    z-index: 11001;
}

.w-100 {
    width: 100%;
}

.swipe-handler {
    height: 20px;
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    background: var(--color-app-background);
    cursor: pointer;
    z-index: 10;
}

.swipe-handler:after {
    content: '';
    width: 100px;
    height: 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 3px;
    background: var(--color-swipe-handler);
}

.sheet-modal-inner .block {
    flex: 1 1 auto;
    overflow-y: auto;
}

.sheet-modal-inner {
    max-height: 80vh;
    overflow-y: auto;
}

.sheet-modal-inner .block .list {
    margin-top: 0;
}

.messages-content {
    padding-bottom: 130px !important;
}

.success-color {
    color: var(--success-color);
}

.danger-color {
    color: var(--danger-color);
}

.claret-red-color {
    color: var(--claret-red-color);
}

.dark-orange-color {
    color: var(--dark-orange-color);
}

.dark-green-color {
    color: var(--dark-green-color);
}

.icon-size-20 {
    font-size: 20px;
    color: var(--color-text-primary);
}

.text-xs {
    font-size: 0.75rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.font-bold {
    font-weight: 700;
}

.font-medium {
    font-weight: 500;
}

.font-normal {
    font-weight: 400 !important;
}

.font-semibold {
    font-weight: 600;
}

.gap-1 {
    gap: 1rem;
}

.flex-1 {
    flex: 1;
}

.warning-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    background-color: var(--transparent-orange-bg);
    color: var(--color-thema-text);
    font-weight: 400;
    border-radius: 1rem;
    font-size: 12px;
}

/* login.php css kodları*/
.page[data-name="login"] .login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    box-sizing: border-box;
    padding: 1rem;
}

.page[data-name="login"] .form-box {
    width: 100%;
    max-width: 400px;
}

.page[data-name="login"] .login-title,
.page[data-name="login"] .login-sub-title {
    text-align: left;
    margin: 0;
    font-size: 15px;
}

.page[data-name="login"] .login-title {
    margin-bottom: 1rem;
    font-size: 35px;
}

.page[data-name="login"] .login-sub-title {
    margin-bottom: 2rem;
    color: var(--color-text-secondary);
}

.page[data-name="login"] .login-button {
    width: 100%;
    max-width: 400px;
    padding: 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(to right, #f97316, #d15802);
    color: var(--color-white);
    border: none;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    text-transform: capitalize;
}

.page[data-name="login"] .login-button:active {
    background: linear-gradient(to right, #863902, #d15802);
}


.input-with-icon,
.input-with-company {
    display: flex;
    align-items: center;
    height: 3rem;
    padding: 0 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
    box-sizing: border-box;
}

.input-with-icon input {
    flex: 1;
    border: none;
    outline: none;
    height: 100%;
    padding: 0;
}

.input-with-icon .icon,
.input-with-company .icon {
    margin-left: 0.5rem;
    font-size: 1.5rem;
    cursor: pointer;
}

.list.no-hairlines.form-box label {
    color: var(--color-text-secondary);
}

.list.no-hairlines.form-box .item-input input::placeholder {
    color: var(--color-text-secondary);
    opacity: 1;
}

.forgot-password {
    font-size: 15px;
}

/* */

/* Homepage.php css başlangıç */

.homepage-story-swiper {
    position: relative;
    padding: .7rem;
    border-radius: 50%;
    background-color: var(--box-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 500;
    border: 3px solid var(--color-border);
    height: 80px;
    width: 80px;
}

.homepage-story-swiper img {
    width: 40px;
    height: 40px;
}

.demo-swiper-multiple .story-container {
    display: grid;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-align: center;
}

.story-container div {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.homepage-story-swiper.tab-link-active {
    border: 3px solid var(--color-orange-button-background);

}

/* Navbar'daki logo için temel stil */
.navbar .logo {
    max-height: 40px;
    margin-left: 8px;
    margin-right: 8px;
    height: auto;
    width: auto;
}

.md .navbar .right {
    min-width: 48px;
    justify-content: center;
}

.navbar-inner .left {
    display: flex;
    align-items: center;
    margin: 0 !important;
}

.popup.story-popup .page-content {
    height: 100vh;
    margin: 0;
    padding: 0;
    background: var(--color-app-background);
    position: relative;
}

.popup.story-popup .page {
    width: 100vw;
    height: 100vh;
    background: var(--color-app-background);
    position: relative;
    overflow: hidden;
}

.main-story-swiper {
    width: 100%;
    height: 100%;
}

.main-story-swiper .swiper-slide {
    display: flex;
    flex-direction: column;
    position: relative;
}

.sub-swiper {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100%;
}

.sub-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-app-background);
}

.sub-swiper .swiper-slide img {
    max-width: 100%;
    object-fit: cover;
    height: 100vh;
}

.sub-story-progress-container {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 9999;
    display: flex;
    gap: 5px;
}

.sub-story-progress-bar {
    position: relative;
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
    border-radius: 2px;
}

.sub-story-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    background: #6a6a6a;
    transition: width 0.3s linear;
}


.title-container,
.information-box-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.main-title {
    font-weight: 500;
    font-size: 20px;
    color: var(--color-text-primary);
    padding-left: 1rem;
}

.main-title-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--box-bg);
    width: 50px;
    height: 50px;
    border-radius: 30% !important;
    color: var(--color-text-primary);
}

.main-title-icon i {
    font-size: 20px;
}

.information-box-container {
    background-color: var(--color-app-background);
    border-radius: 1rem;
    padding: 1rem;
    display: grid;
    gap: .5rem;
}

.information-box-number {
    font-weight: 500;
    font-size: 20px;
    color: var(--color-text-primary);
    line-height: 1;
}

.information-box-number span {
    font-weight: 300;
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-left: 4px;
}

.information-box-title div {
    font-size: 14px;
    color: var(--color-text-primary);
}


.homepage-story-swiper::before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 4px solid #ffffff;
    border-radius: 50%;
}

.future-date {
    font-size: 10px;
    margin: 0;
}

.infobox-outer-layer {
    display: grid;
    gap: 1rem;
}

.request-button {
    padding: 7px;
    border-radius: .5rem;
    background-color: var(--warning-box-background-color);
    color: var(--warning-box-text-color) !important;
    white-space: nowrap;
    cursor: pointer;
    font-weight: 500;
}

.infobox {
    background-color: var(--box-bg);
    padding: 1rem;
    border-radius: 1rem;
    display: grid;
    gap: 1rem;
}

.in-use,
.idle,
.perm-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: .5rem;
    font-size: 14px;
}

.in-use {
    color: var(--danger-color);
    font-size: 14px;
}

.idle {
    color: var(--success-color);
}


.fab-right-bottom {
    position: fixed !important;
    right: 20px !important;
    bottom: calc(56px + 20px) !important;
    z-index: 2000 !important;
}

.overflow-hidden {
    overflow: hidden;
}


/* fab ile ilgili değiştirilebilecek alan */
.fab-sub-menu {
    position: relative;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.fab-sub-menu.fab-sub-menu-open {
    max-height: 500px;
    opacity: 1;
}

#fabMainMenu {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#fabMainMenu.fab-sub-menu-active {
    transform: translateY(-40px);
    opacity: 0.3;
}

/* bitiş */

.employee-container {
    display: grid;
    gap: 1rem;
}

.company-name,
.mail-name {
    color: var(--color-text-primary);
    font-size: 15px;
    font-weight: 400;
}

.employee-name {
    color: var(--color-text-primary);
    font-weight: 800;
    margin-bottom: .5rem;
    font-size: 18px;
}

.employee-sum-cont {
    background-color: var(--box-bg);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    text-align: center;

}

.employee-short-name {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: var(--color-thema-text);
    background-color: var(--color-app-background);
    border: 2px solid var(--color-thema-text);
    font-size: 20px;
    margin-bottom: .5rem;
}

.profile-container {
    background-color: var(--box-bg);
    padding: 1rem;
    border-radius: 1rem;
    display: grid;
    gap: 1rem;
}

.profile-box {
    background-color: var(--color-app-background);
    border-radius: 1rem;
    padding: 1rem;
    display: grid;
    gap: .5rem;
}

.profile-box-text {
    text-align: left;
}

.profile-box-contents {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: left;
    gap: .5rem;
    color: var(--color-text-primary);
    font-size: 13px;
}

.permission-titles {
    flex-shrink: 0;
    width: auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.permission-titles a.button {
    white-space: nowrap;
    width: auto;
    height: auto;
    text-align: center;
    box-sizing: border-box;
    padding: 5px 10px;
    text-transform: capitalize;
    font-size: 12px;
    border: 1px solid var(--color-theme);
    border-radius: .8rem;
    color: var(--color-text-primary);
}

.button-active,
.button.tab-link-active {
    background-color: var(--color-theme);
    color: var(--color-app-background) !important;
    border: 1px solid var(--color-theme);
}

.ios .list-outline-ios ul:before,
.list-outline ul:before,
.md .list-outline-md ul:before {
    content: none;
}

.ios .list-outline-ios ul:after,
.list-outline ul:after,
.md .list-outline-md ul:after {
    content: none;
}

.swipeout-actions-right>a {
    padding: 0 10px;
}

.custom-swipeout-delete {
    background-color: var(--danger-color) !important;
    color: var(--color-app-background) !important;
}

.add-new-btn {
    position: fixed;
    bottom: 90px;
    right: 1rem;
    z-index: 9999;
    background-color: var(--success-color);
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-new-btn a {
    color: var(--color-app-background) !important;
}

.select-permission-type {
    border: 1px solid var(--color-border);
    padding: .5rem;
    border-radius: 1rem;
}

.select-permission-info {
    display: flex !important;
    align-items: center !important;
    height: 3rem !important;
    padding: 0 1rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid var(--color-border) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    justify-content: space-between !important;
}


.select-permission-info input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    height: 100%;
    padding: 0;
    font-size: 1rem;
}

.select-permission-info i.icon-permission-icon {
    margin-left: 0.5rem;
    font-size: 20px;
    color: var(--color-thema-text);
}


#start-date-sheet,
#end-date-sheet,
#reason-for-leave-filter,
#permission-type-filter,
#request-date-filter,
#end-date-filter,
#start-date-filter,
#trial-period-end-date-sheet,
#starting-work-sheet,
#deleteCategorySheet {
    border-radius: 2rem 2rem 0 0;
    height: 60%;
}

#permission-info-sum {
    border-radius: 2rem 2rem 0 0;
    height: 90%;
}

#reason-textarea-filter {
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 1rem;
    width: 100%;
}

.calendar.calendar-inline {
    margin-top: 2rem;
}

#start-date-sheet .toolbar-inner {
    padding: 1rem;
}

#end-date-sheet .toolbar-inner {
    padding: 1rem;
}

.two-cols-picker .picker-columns {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: stretch;
}

.two-cols-picker .picker-column {
    flex: none;
    width: auto;
    min-width: 70px;
    text-align: center;
}

.icon-permission-icon {
    color: var(--color-thema-text);
    font-size: 20px;
}

.searchbar {
    padding: 0 10px;
    border: 2px solid var(--color-border);
    border-radius: 1rem !important;
    background-color: var(--color-app-background) !important;
    display: flex;
    align-items: center;
    margin-top: 1rem !important;
}

.searchbar .searchbar-inner {
    flex: 1;
    display: flex;
    align-items: center;
    height: 40px;
    background-color: transparent;
}

.searchbar-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
}

.searchbar-input-wrap input[type="search"] {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    color: var(--color-text-primary);
}

.searchbar-input-wrap input::placeholder {
    color: var(--color-text-secondary);
    font-style: normal;
}

.searchbar .input-clear-button {
    display: none;
    margin-left: 6px;
    color: var(--color-thema-text) !important;
}

.searchbar-input-wrap:focus-within .input-clear-button {
    display: inline-block;
}

.searchbar-disable-button {
    font-size: 14px !important;
    color: var(--color-thema-text) !important;
    margin-left: 8px !important;
    cursor: pointer;
}

.searchbar:after {
    content: none;
}

.page[data-name="individual_permit_info"] .list .item-link .item-inner:before {
    content: none;
}

.permission-type-label {
    color: var(--color-text-primary) !important;
    font-size: 18px !important;
}

.permission-info-external-container {
    display: block;
}

.permission-info-external-container>* {
    margin-bottom: 1rem;
}

.permission-info-external-container>*:not(:last-child) {
    margin-bottom: 1rem;
}

/* .view:has(.page.page-current[data-name="homepage"]),
.page.page-current[data-name="homepage"],
.page.page-current[data-name="homepage"]>.page-content {
    z-index: unset;
} */

/* Hızlı Menu İle İlgili İşlemler başlangıç*/

.quick-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10000;
}

.quick-menu {
    position: fixed;
    bottom: 90px;
    left: 1rem;
    z-index: 10010;
    background-color: var(--color-theme);
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-menu a.link.icon-only {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: var(--color-theme);
    border-radius: 50%;
    color: var(--color-app-background);
    font-size: 24px;
}

.quick-menu a.link.icon-only .icon-fab-state {
    font-size: 28px;
}

.quick-menu-content {
    position: fixed;
    bottom: 170px;
    left: 1rem;
    z-index: 10011;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.quick-menu-content.open {
    opacity: 1;
    pointer-events: auto;
}

.quick-menu-heading {
    position: relative;
    min-width: 100px;
    padding: 10px 15px;
    border-radius: 20px;
    color: var(--color-app-background);
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: .5rem;
}

.heading-modules {
    background-color: #fda03b;
}

.heading-actions {
    background-color: #1a40af;
}

.quick-submenu {
    position: relative;
    background-color: transparent;
    border-radius: 12px;
    padding: 8px 12px;
    width: 180px;
    display: none;
    flex-direction: column;
    gap: .5rem;
}

.quick-submenu.submenu-open {
    display: flex;
}

.submenu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--box-bg);
    border-radius: 20px;
    padding: 6px 12px;
    cursor: pointer;
}

.submenu-text {
    font-size: 14px;
    color: var(--color-text-primary);
}

.submenu-icon i {
    font-size: 20px;
    color: var(--color-text-primary);
}

.display-none {
    display: none !important;
}

/* Hızlı Menu İle İlgili İşlemler bitiş*/

.filter-container {
    display: grid;
    gap: 1rem;
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.filter-container li {
    border-radius: 1rem;
    color: var(--color-text-primary);
    background-color: var(--box-bg);
}

.filter-container li div div i {
    font-size: 20px;
    color: var(--color-text-primary);
}

.revoke-permission-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 40px;
    padding: 1rem;
    border: none;
    font-weight: 600;
    font-size: 15px;
    border-radius: .5rem;
    background-color: var(--danger-color);
    color: var(--color-blue-button-text);
    margin-left: auto;
    margin-top: 1rem;
}

.custom-list {
    padding: 1rem !important;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-sizing: border-box;
}

.list .item-content {
    padding-left: 0;
}

select.select-permission-info {
    height: auto;
}

textarea.select-permission-info {
    min-height: 4rem;
    resize: vertical;
}

.list .item-inner {
    padding-right: 0;
    /* padding-bottom: 0; */
    /* padding-top: 0; */
}

.ios .toggle input[type=checkbox]:checked+.toggle-icon {
    background: var(--color-theme);
}

.block-title {
    color: var(--color-text-primary);
}

.save-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 40px;
    padding: 1rem;
    border: none;
    border-radius: .5rem;
    background-color: var(--color-orange-button-background);
    color: var(--color-app-background);
    margin-left: auto;
    margin-top: 1rem;
}

.calendar-day-selected .calendar-day-number {
    background-color: var(--color-orange-button-background);
}

.calendar-inline .toolbar .toolbar-inner .calendar-month-selector a,
.calendar-inline .toolbar .toolbar-inner .calendar-year-selector a {
    color: var(--color-thema-text);
}

.chip {
    background-color: transparent !important;
    border: 1px solid var(--color-border);
    border-radius: .5rem !important;
}

.list input[type=date],
.list input[type=datetime-local],
.list input[type=email],
.list input[type=month],
.list input[type=number],
.list input[type=password],
.list input[type=search],
.list input[type=tel],
.list input[type=text],
.list input[type=time],
.list input[type=url],
.list select {
    font-size: 15px !important;
}

.personnel-info-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    border-radius: 1rem;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    word-wrap: break-word;
    white-space: normal;
}

.personnel-info-box-detail li div:last-child {
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    text-align: right;
    line-height: 1rem;
    font-size: .9rem;
}

.personnel-info-editing {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.personnel-info-editing-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-border);
    width: 50px;
    height: 50px;
    border-radius: 30% !important;
    color: var(--color-text-primary);
}

.personnel-info-editing-btn i {
    font-size: 20px;
}

.md .item-input:not(.item-input-outline) .item-content:after,
.md .item-input:not(.item-input-outline).item-content:after {
    content: none !important;
}

.md .item-input:not(.item-input-outline) .item-content::before,
.md .item-input:not(.item-input-outline).item-content::before {
    content: none !important;
}

.md .item-input .item-content,
.md .item-input.item-content {
    padding: 0;
}

.md .item-input .item-content,
.md .item-input.item-content {
    margin: 0;
}

.md .toggle input[type=checkbox]:checked+.toggle-icon {
    background: var(--color-theme);
    border: var(--color-theme);
}

.ios .list-strong-ios ul,
.list-strong ul,
.md .list-strong-md ul {
    background: transparent !important;
}

.md .navbar .right {
    margin: 0;
}

.md .navbar-inner {
    justify-content: space-between;
}

.menu-list .item-link {
    background-color: transparent;
}

.clear-content {
    display: grid;
    gap: 1rem;
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.clear-content li {
    background-color: var(--color-box-background) !important;
    border-radius: 1rem;
}

.clear-content li div {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.clear-content li div div i {
    font-size: 20px;
    color: var(--color-text-primary);
}

.calendar-block {
    background-color: var(--box-bg);
    padding: 1rem;
    border-radius: 1rem;
    display: grid;
    gap: 1rem;
    color: var(--color-text-primary) !important;
}

.calendar-header {
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;

}

.calendar-header button {
    border: transparent;
    background-color: var(--color-app-background);
    color: var(--color-text-primary);
    padding: 6px 10px;
    font-size: 25px;
    cursor: pointer;
    border-radius: 2rem;
}

.calendar-month-year {
    font-weight: bold;
    color: var(--color-text-primary) !important;
    font-size: 16px;
}

.month-events-container {
    display: grid;
    gap: 1rem;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.calendar-day-box {
    background-color: var(--color-white);
    border: 1px solid var(--color-app-background);
    border-radius: 0.5rem;
    padding: 6px;
    text-align: center;
    min-height: 60px;
    position: relative;
    cursor: pointer;
}

.day-number {
    font-weight: bold;
    margin-bottom: 4px;
}

.event-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 2px auto;
}

/* Legend */
.legend-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1rem;
}

.legend-item {
    display: flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 16px;
    font-size: 14px;
}

.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
}


.page[data-name="homepage"] .ios .navbar .left a+a,
.ios .navbar .right a+a {
    margin: 0 !important;
}


.user-transactions {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 1rem;
}

.user-transactions a {
    background-color: var(--box-bg);
    width: 50px;
    height: 50px;
    border-radius: 30% !important;
    color: var(--color-text-primary);
}

.user-transactions a i {
    font-size: 20px;
    color: var(--color-theme);

}



/* .user-info-editing {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.user-info-editing-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-border);
    width: 50px;
    height: 50px;
    border-radius: 30% !important;
    color: var(--color-text-primary);
}

.user-info-editing-btn i {
    font-size: 20px;
} */


.module-box {
    background-color: var(--box-bg);
    border-radius: 1rem;
    padding: 2rem;
    align-items: center;
    justify-content: center;
    display: flex;
    gap: 1rem;
    flex-direction: column;
    text-align: center;
    height: 90px;
}

.module-box-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.module-box i {
    font-size: 25px !important;
    color: var(--color-theme);
}

.user-info-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    border-radius: 1rem;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    color: var(--color-text-primary);
    background-color: var(--box-bg);
    word-wrap: break-word;
    white-space: normal;
}

.custom-flex-list li {
    display: flex;
}

.custom-flex-list li>div:first-child {
    flex: 0 0 150px;
    font-weight: 600;
    line-height: 1rem;
}

.custom-flex-list li>div:last-child {
    flex: 1;
    text-align: right;
    line-height: 1rem;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}


.user-info-box.legal-exit {
    overflow: visible !important;
}

.user-info-box.legal-exit .custom-flex-list li {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.user-info-box.legal-exit .custom-flex-list li>div {
    display: table-cell;
    vertical-align: middle;
    padding: 0.5rem 0;
}

.user-info-box.legal-exit .custom-flex-list li>div:first-child {
    width: 150px;
    font-weight: 600;
}

.user-info-box.legal-exit .custom-flex-list li>div:last-child {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    text-align: right;
}

.address {
    overflow-wrap: break-word;
    height: 80px !important;
}

.page[data-name="users_embezzlement"] #embezzlement-categories .custom-flex-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page[data-name="users_embezzlement"] #embezzlement-categories .custom-flex-list li>div:first-child {
    flex: 0 0 130px;
    font-weight: normal;
}

.page[data-name="users_embezzlement"] #embezzlement-categories .custom-flex-list li>div:last-child {
    flex: 1;
    text-align: left;
    line-height: 1rem;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    margin: 0;
}

.category-edit-input {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
}


.category-add-input {
    padding: 1rem;
    border: 1px solid var(--color-border);
}

.edit-category-label,
.add-category-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}


.edit-category-input input,
.add-category-input input {
    width: 100%;
    padding: .5rem;
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    font-size: 14px;
}

.edit-category-actions,
.add-category-actions {
    display: flex;
    justify-content: center;
}

.edit-category-actions .save-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    padding: 1rem;
    border: none;
    border-radius: .5rem;
    background-color: var(--color-orange-button-background);
    color: var(--color-app-background);
    margin-left: auto;
    text-transform: capitalize;
}

.category-delete-btn .delete-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    padding: 1rem;
    border: none;
    border-radius: .5rem;
    background-color: var(--danger-color);
    color: var(--color-app-background);
    margin-left: auto;

}

.embezzlement-category-icon i {
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 20px;
    padding: .5rem;
    border: 1px solid var(--color-app-background);
}

.category-icon-container {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.embezzlement-category-icon:hover {
    color: #111;
}

.user-transactions-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 1rem;
    border: none;
    border-radius: 2rem;
    background-color: var(--color-orange-button-background);
    color: var(--color-app-background);
    margin-left: auto;
    margin-top: 1rem;
}

.user-transactions-btn i {
    font-size: 20px;
}

.user-transactions-detail {
    background-color: var(--color-app-background) !important;
    font-family: 'Inter', sans-serif !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: center !important;
    justify-content: center !important;
}

.user-transactions-detail i {
    font-size: 20px;
    color: var(--color-theme);
}

.user-transactions-detail div {
    font-size: 15px;
    color: var(--color-text-primary);
}

.danger-btn {
    color: var(--color-app-background);
    background-color: var(--danger-color);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 40px;
    padding: 1rem;
    border: none;
    border-radius: .5rem;
    margin-left: auto;
    margin-top: 1rem;
    font-size: 10px;
}

.danger-btn i {
    font-size: 15px;
}

.users-advances-info,
.users-embezzlement-definitions,
.users-embezzlement-categories,
.users-embezzlement-tracking,
.users-leave-info {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 1rem;
}


.users-advances-refusal,
.users-advances-approval,
.users-definitions-editing,
.users-definitions-delete,
.users-categories-editing,
.users-categories-delete,
.users-tracking-refusal,
.users-tracking-approval,
.users-leave-approval,
.users-leave-refusal,
.users-leave-detail,
.companies-edit,
.companies-trash,
.working-hours,
.reports-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 30% !important;
}

.users-advances-approval i,
.users-advances-refusal i,
.users-definitions-editing i,
.users-definitions-delete i,
.users-categories-editing i,
.users-categories-delete i,
.users-tracking-refusal i,
.users-tracking-approval i,
.users-leave-approval i,
.users-leave-refusal i,
.users-leave-detail i,
.companies-edit i,
.companies-trash i,
.working-hours i,
.reports-detail i,
.role-edit i,
.role-trash i,
.license-edit i,
.license-trash i,
.work-edit i,
.work-trash i,
.task-edit i,
.task-trash i,
.status-edit i,
.status-trash i,
.gender-edit i,
.gender-trash i,
.marital-edit i,
.marital-trash i,
.blood-edit i,
.blood-trash i,
.payment-edit i,
.payment-trash i,
.currency-edit i,
.currency-trash i,
.education-edit i,
.education-trash i,
.graduation-edit i,
.graduation-trash i,
.nationality-trash i,
.nationality-edit i,
.period-trash i,
.period-edit i,
.proficiency-edit i,
.proficiency-trash i,
.relation-edit i,
.relation-trash i,
.approval-mechanism i {
    font-size: 20px;
}

.users-definitions-editing,
.users-categories-editing,
.users-leave-detail,
.companies-edit,
.reports-detail,
.role-edit,
.license-edit,
.work-edit,
.task-edit,
.status-edit,
.gender-edit,
.marital-edit,
.blood-edit,
.payment-edit,
.currency-edit,
.education-edit,
.graduation-edit,
.nationality-edit,
.period-edit,
.proficiency-edit,
.relation-edit {
    background-color: #ffa66847;
    color: var(--color-theme);
}

.users-advances-refusal,
.users-definitions-delete,
.users-categories-delete,
.users-tracking-refusal,
.users-leave-refusal,
.companies-trash,
.role-trash,
.license-trash,
.work-trash,
.task-trash,
.status-trash,
.gender-trash,
.marital-trash,
.blood-trash,
.payment-trash,
.currency-trash,
.education-trash,
.graduation-trash,
.nationality-trash,
.period-trash,
.proficiency-trash,
.relation-trash {
    background-color: #ff000029;
    color: var(--danger-color);
}

.role-edit,
.role-trash,
.license-edit,
.license-trash,
.work-edit,
.work-trash,
.task-edit,
.task-trash,
.status-edit,
.status-trash,
.gender-edit,
.gender-trash,
.marital-edit,
.marital-trash,
.blood-edit,
.blood-trash,
.payment-edit,
.payment-trash,
.currency-edit,
.currency-trash,
.education-edit,
.education-trash,
.graduation-edit,
.graduation-trash,
.nationality-trash,
.nationality-edit,
.period-edit,
.period-trash,
.proficiency-edit,
.proficiency-trash,
.relation-edit,
.relation-trash,
.approval-mechanism {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 30% !important;
}


.users-advances-approval,
.users-tracking-approval,
.users-leave-approval {
    background-color: #00cd0026;
    color: var(--success-color);
}

.working-hours,
.approval-mechanism {
    background-color: #68c9ff47;
    color: #166ff9;
}

.page[data-name="users_advances"] .approved {
    color: var(--success-color);
    font-weight: 700;
}

.page[data-name="users_leave_informations"] .file-open {
    color: var(--color-theme);
    font-weight: 700;
}

.file-open-detail {
    display: flex !important;
    align-items: center !important;
    height: 3rem !important;
    padding: 1rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid var(--color-border) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    justify-content: space-between !important;
    height: 10% !important;
}

.page[data-name="companies"] .custom-flex-list>li:nth-child(3) {
    height: 100px !important;
}

.page[data-name="companies"] .company-status {
    color: var(--success-color);
    font-weight: 700;
}

.page[data-name="branches"] .list .item-floating-label,
.list .item-label {
    color: black;
}


.vertical-margin-sm {
    margin: 0.5rem 0;
}

.display-inline-block {
    display: inline-block;
}

.width-auto {
    width: auto;
}

.padding-top-sm {
    padding-top: 0.5rem;
}

.btn-orange-rounded {
    background-color: #f97316;
    border-color: #f97316;
    border-radius: 1rem;
    padding: 0.5rem;
}

.page-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 1rem;
}

/* PDF butonu */
.btn-pdf-create {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    background-color: #fff;
    color: #333;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color .2s, box-shadow .2s;
}

.btn-pdf-create .icon {
    font-size: 1.2rem;
    margin-right: 0.5rem;
}


.input-button-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.custom-permission-input {
    flex: 3;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    min-height: 2.5rem !important;
    padding: 0.25rem 1rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid var(--color-border) !important;
    box-sizing: border-box !important;
    background-color: white;
}

.custom-permission-input .chip {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Aralarındaki boşluk: */
    margin: 2px 4px;
    padding: 0 8px;
    height: 1.75rem;
    /* Chip’in dikey boyu (örnek) */
    line-height: 1.75rem;
    border-radius: 0.75rem;
    background-color: #f0f0f0;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
}

/* Chip içindeki “×” işareti: */
/* .custom-permission-input .chip i.chip-delete {
    margin-left: 4px;
    font-size: 1rem;
    cursor: pointer;
} */

/* +N (chip-more) stili: */
.custom-permission-input .chip-more {
    background-color: #e0e0e0;
    cursor: pointer;
    align-items: center;
}

/* readonly input’un stili (son satırda görünen “Şirket Seçiniz” metni) */
.custom-permission-input input[readonly] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.875rem;
    color: #666;
    /* Flex properties: kendisi küçülsün, sığacak kadar yer kaplasın: */
    flex-shrink: 0;
    margin: 2px 0;
}

.more-companies {
    font-size: 15px;
    margin-left: .5rem;
}

.ios .chip-delete:after {
    color: var(--danger-color);
}

.custom-permission-input .icon-permission-icon {
    font-size: 1.2rem;
    margin-right: 0.5rem;
    color: var(--color-thema-text);
}

.custom-permission-input input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    height: 100%;
    padding: 0;
    font-size: 1rem;
}

.save-settings-btn {
    flex: 1;
    height: 2.5rem;
    padding: 0;
    margin: 0;
    border: none;
    font-weight: 600;
    font-size: 15px;
    border-radius: 0.5rem;
    background-color: var(--color-theme);
    color: var(--color-blue-button-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


.save-settings-btn:active {
    opacity: 0.8;
}

.item-title.item-label {
    white-space: normal;
    word-wrap: break-word;
    hyphens: auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}



/* Chip'lerin container'ı flex-wrap ile sarılsın, 
   çok uzun metin varsa kelime bazında bölünsün */
#company-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

/* Chip içerisindeki metin uzunsa kelime bazında kır */
#company-chips .chip {
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-title .parenthesis {
    color: var(--color-thema-text) !important;
}

/* Checkbox grubu içindeki kolon ayarları */
.checkbox-group .col-33 {
    display: flex;
    justify-content: flex-start;
}

.checkbox-group .item-checkbox {
    margin: 0;
}

.checkbox-group .item-title {
    font-size: 0.9rem;
    line-height: 1.2rem;
}

label.item-checkbox input[type=checkbox]:checked~.icon-checkbox {
    border-color: var(--color-theme);
    background-color: var(--color-theme);
}


.role-info {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.role-info-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    border-radius: 1rem;
    padding: .5rem;
    position: relative;
    overflow: hidden;
    color: var(--color-text-primary);
    background-color: var(--box-bg);
    word-wrap: break-word;
    white-space: normal;
}


/* Güncellenmiş CSS */
.definitions {
    background-color: var(--box-bg);
    padding: 1rem;
    border-radius: 1rem;
}

.definitions__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.definitions__item {
    background-color: var(--color-app-background);
    border-radius: 1rem;
    padding: 1rem;
    display: grid;
    gap: 0.5rem;
}

.definitions__link {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--color-text-primary);
    font-size: 13px;
    text-decoration: none;
}

.definitions__label {
    text-align: left;
}

.definitions__icon {
    color: var(--dark-orange-color);
    font-size: 20px;
}

.item-input-wrap textarea.resizable {
    display: block !important;
    width: 100% !important;
    max-height: 200px;
    min-height: 4em;
    overflow-y: auto !important;
    resize: vertical !important;
    padding: 1rem !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0.5rem !important;
    box-sizing: border-box !important;
}

.add-file-btn {
    padding: 1.3rem;
    border-radius: .5rem;
    text-transform: capitalize;
    font-size: 16px;
    background-color: var(--success-background);
    color: var(--success-color);
}

.save-settings-btn {
    text-transform: capitalize;
    background-color: var(--color-theme);
    color: var(--box-bg);
}