/* =========== Google Fonts ============ */
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap");

/* =============== Globals ============== */
* {
 font-family: "Ubuntu", sans-serif;
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

:root {
 --blue: #009B8A;
 --white: #fff;
 --gray: #f5f5f5;
 --black1: #222;
 --black2: #999;
}

body {
 min-height: 100vh;
 overflow-x: hidden;
}

.container {
 position: relative;
 width: 100%;
}

/* =============== Navigation ================ */
.navigation {
 position: fixed;
 width: 300px;
 height: 100%;
 background: var(--blue);
 border-left: 10px solid var(--blue);
 transition: 0.5s;
 overflow: hidden;
}
.navigation.active {
 width: 80px;
}

.navigation ul {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
}

.navigation ul li {
 position: relative;
 width: 100%;
 list-style: none;
 border-top-left-radius: 30px;
 border-bottom-left-radius: 30px;
}

.navigation ul li:hover,
.navigation ul li.hovered {
 background-color: var(--white);
}

/* Header BKK MERAUKE */
.navigation ul li:nth-child(1) {
 margin-bottom: 40px;
 pointer-events: none;
 padding: 10px 0;
}

.navigation ul li:nth-child(1) .title {
 font-weight: bold;
 font-size: 1.2em;
 letter-spacing: 1px;
}

.navigation ul li:nth-child(1)::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 10%;
 width: 80%;
 height: 1px;
 background: rgba(255, 255, 255, 0.1);
}

.navigation ul li a {
 position: relative;
 display: block;
 width: 100%;
 display: flex;
 text-decoration: none;
 color: var(--white);
}

.navigation ul li:hover a,
.navigation ul li.hovered a {
 color: var(--blue);
}

.navigation ul li a .icon {
 position: relative;
 display: block;
 min-width: 60px;
 height: 60px;
 line-height: 75px;
 text-align: center;
}
.navigation ul li a .icon ion-icon {
 font-size: 1.75rem;
}

.navigation ul li a .title {
 position: relative;
 display: block;
 padding: 0 10px;
 height: 60px;
 line-height: 60px;
 text-align: start;
 white-space: nowrap;
}

/* Copyright */
.copyright {
 position: fixed;
 bottom: 0;
 left: 0;
 width: 300px;
 padding: 15px;
 color: var(--white);
 text-align: center;
 font-size: 12px;
 transition: 0.5s;
 z-index: 1000;
 border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright p {
 margin: 5px 0;
}

.navigation.active .copyright {
 width: 80px;
 font-size: 10px;
}

/* --------- curve outside ---------- */
.navigation ul li:hover a::before,
.navigation ul li.hovered a::before {
 content: "";
 position: absolute;
 right: 0;
 top: -50px;
 width: 50px;
 height: 50px;
 background-color: transparent;
 border-radius: 50%;
 box-shadow: 35px 35px 0 10px var(--white);
 pointer-events: none;
}
.navigation ul li:hover a::after,
.navigation ul li.hovered a::after {
 content: "";
 position: absolute;
 right: 0;
 bottom: -50px;
 width: 50px;
 height: 50px;
 background-color: transparent;
 border-radius: 50%;
 box-shadow: 35px -35px 0 10px var(--white);
 pointer-events: none;
}

/* ===================== Main ===================== */
.main {
 position: absolute;
 width: calc(100% - 300px);
 left: 300px;
 min-height: 100vh;
 background: var(--white);
 transition: 0.5s;
}
.main.active {
 width: calc(100% - 80px);
 left: 80px;
}

.topbar {
 width: 100%;
 height: 60px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0 10px;
}

.toggle {
 position: relative;
 width: 60px;
 height: 60px;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 2.5rem;
 cursor: pointer;
}

.search {
 position: relative;
 width: 400px;
 margin: 0 10px;
}

.search label {
 position: relative;
 width: 100%;
}

.search label input {
 width: 100%;
 height: 40px;
 border-radius: 40px;
 padding: 5px 20px;
 padding-left: 35px;
 font-size: 18px;
 outline: none;
 border: 1px solid var(--black2);
}

.search label ion-icon {
 position: absolute;
 top: 0;
 left: 10px;
 font-size: 1.2rem;
}

/* ======================= Cards ====================== */
.cardBox {
 position: relative;
 width: 100%;
 padding: 20px;
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-gap: 30px;
}

.cardBox .card {
 position: relative;
 background: var(--white);
 padding: 30px;
 border-radius: 20px;
 display: flex;
 justify-content: space-between;
 cursor: pointer;
 box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
}

.cardBox .card .numbers {
 position: relative;
 font-weight: 500;
 font-size: 2.5rem;
 color: var(--blue);
}

.cardBox .card .cardName {
 color: var(--black2);
 font-size: 1.1rem;
 margin-top: 5px;
}

.cardBox .card .iconBx {
 font-size: 3.5rem;
 color: var(--black2);
}

.cardBox .card:hover {
 background: var(--blue);
}
.cardBox .card:hover .numbers,
.cardBox .card:hover .cardName,
.cardBox .card:hover .iconBx {
 color: var(--white);
}

/* ================== Details List ============== */
.details {
 position: relative;
 width: 100%;
 padding: 20px;
 display: grid;
 grid-template-columns: 2fr 1fr;
 grid-gap: 30px;
}

.cardHeader {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 margin-bottom: 20px;
}

.cardHeader h2 {
 font-weight: 600;
 color: var(--blue);
}

/* ================== HUMAS AI Styles ============== */
.ai-content {
 padding: 20px;
 display: flex;
 flex-direction: column;
 gap: 20px;
}

.upload-section, 
.result-section {
 text-align: center;
}

.upload-section img,
.result-section img {
 width: 100%;
 max-width: 400px;
 height: 300px;
 object-fit: contain;
 border-radius: 10px;
 margin-bottom: 20px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 border: 1px solid #eee;
 background: #f8f8f8;
 padding: 10px;
}

.button-group {
 display: flex;
 gap: 10px;
 justify-content: center;
 margin-top: 15px;
}

.btn {
 padding: 10px 20px;
 border: none;
 border-radius: 5px;
 background: var(--blue);
 color: var(--white);
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: 5px;
 transition: all 0.3s ease;
}

.btn:hover {
 background: #007f71;
 transform: translateY(-2px);
}

.btn.generate {
 background: #2a9d8f;
}

.btn.download {
 background: #264653;
}

.btn[disabled] {
 background: var(--black2);
 cursor: not-allowed;
 opacity: 0.7;
 transform: none;
}

.btn ion-icon {
 font-size: 1.2em;
}

.recentOrders {
 position: relative;
 background: var(--white);
 padding: 20px;
 box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
 border-radius: 20px;
}

/* Loading state */
.loading {
 position: relative;
}

.loading::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(255, 255, 255, 0.8);
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 14px;
}

/* ====================== Responsive Design ========================== */
@media (max-width: 991px) {
 .navigation {
   left: -300px;
 }
 .navigation.active {
   width: 300px;
   left: 0;
 }
 .main {
   width: 100%;
   left: 0;
 }
 .main.active {
   left: 300px;
 }
 .cardBox {
   grid-template-columns: repeat(2, 1fr);
 }
 .navigation .copyright {
   left: -300px;
 }
 .navigation.active .copyright {
   left: 0;
   width: 300px;
   font-size: 12px;
 }
}

@media (max-width: 768px) {
 .details {
   grid-template-columns: 1fr;
 }
 .cardBox {
   grid-template-columns: 1fr;
 }
 .upload-section img,
 .result-section img {
   height: 200px;
 }
 .search {
   width: 100%;
 }
 .button-group {
   flex-direction: column;
 }
 .btn {
   width: 100%;
   justify-content: center;
 }
}

@media (max-width: 480px) {
 .cardBox {
   grid-template-columns: 1fr;
 }
 .cardHeader h2 {
   font-size: 20px;
 }
 .navigation {
   width: 100%;
   left: -100%;
   z-index: 1000;
 }
 .navigation.active {
   width: 100%;
   left: 0;
 }
 .toggle {
   z-index: 10001;
 }
 .main.active .toggle {
   position: fixed;
   right: 0;
   left: initial;
   color: var(--white);
 }
 .btn {
   padding: 8px 15px;
   font-size: 14px;
 }
}