@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    @apply scroll-smooth;
  }

  body {
    @apply bg-white text-dark-200 min-h-screen;
  }

  /* Remove scrollbar */
  .remove-scrollbar::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    border-radius: 0px;
  }

  .remove-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }

  .remove-scrollbar::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 0px;
  }

  .remove-scrollbar::-webkit-scrollbar-thumb:hover {
    /* background: #1e2238; */
    background: transparent;
  }

  .recharts-responsive-container {
    height: initial !important;
  }
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer utilities {
  /* ===== TYPOGRAPHY */
  .h1 {
    @apply text-[34px] leading-[42px] font-bold;
  }
  .h2 {
    @apply text-[24px] leading-[36px] font-bold;
  }
  .h3 {
    @apply text-[20px] leading-[28px] font-semibold;
  }
  .h4 {
    @apply text-[18px] leading-[20px] font-medium;
  }
  .h5 {
    @apply text-[16px] leading-[24px] font-semibold;
  }
  .subtitle-1 {
    @apply text-[16px] leading-[24px] font-medium;
  }
  .subtitle-2 {
    @apply text-[14px] leading-[20px] font-semibold;
  }
  .body-1 {
    @apply text-[16px] leading-[24px] font-normal;
  }
  .body-2 {
    @apply text-[14px] leading-[20px] font-normal;
  }
  .button {
    @apply text-[14px] leading-[20px] font-medium;
  }
  .caption {
    @apply text-[12px] leading-[16px] font-normal;
  }
  .overline {
    @apply text-[10px] leading-[14px] font-normal;
  }

  /* ===== HELPER CLASSES */
  .container {
    @apply mx-auto max-w-7xl px-5;
  }
  .primary-btn {
    @apply bg-brand hover:bg-brand-200 transition-all rounded-2xl button !important;
  }
  .primary-btn:disabled {
    @apply bg-gray-900 cursor-not-allowed  !important;
  }
  .flex-center {
    @apply flex items-center justify-center;
  }

  .main-border {
    @apply border border-r-4 border-b-4 border-brand
  }

  /* =====  SHADCN OVERRIDES */
  .shad-no-focus {
    @apply outline-none ring-offset-transparent focus:ring-transparent focus:ring-offset-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 !important;
  }
  .form-input {
    @apply border-none shadow-none p-0 shad-no-focus placeholder:text-gray-500 body-2 !important;
  }

  .form-input:active {
    @apply bg-transparent !important;
  }

  .form-input:-webkit-autofill {
    @apply bg-white shadow-none;
    -webkit-box-shadow: 0 0 0 1000px white inset;
    transition: background-color 5000s ease-in-out 0s;
  }

  .form-item {
    @apply flex h-[78px] flex-col justify-center rounded-2xl border border-gray-700 px-4 shadow-drop-1;
  }
  .form-label {
    @apply text-light-100 pt-2 body-2 w-full !important;
  }
  .form-message {
    @apply text-red body-2 ml-4 !important;
  }
  .alert-dialog {
    @apply space-y-4 max-w-[95%]  sm:w-fit rounded-2xl lg:rounded-2xl  px-4 md:px-8 py-10 bg-white outline-none !important;
  }
  .otp-submit-btn {
    @apply bg-brand button hover:bg-brand-100 transition-all rounded-lg !important;
  }
  .shad-otp {
    @apply w-full flex gap-1 sm:gap-2 justify-between !important;
  }
  .shad-otp-slot {
    @apply text-[40px] font-medium rounded-2xl ring-brand shadow text-brand-100 justify-center flex border-2 border-gray-200 size-12 md:size-16 gap-5 !important;
  }

  .sheet-drawer {
    @apply pt-0 flex flex-col justify-between bg-brand text-white remove-scrollbar border-transparent max-w-[260px] !important;
  }
  .sheet-drawer button,
  .shad-dialog button {
    @apply focus:ring-0 focus:ring-offset-0 focus-visible:border-none outline-none focus-visible:outline-none focus-visible:ring-transparent focus-visible:ring-offset-0 !important;
  }
  .shad-dropdown-item {
    @apply cursor-pointer !important;
  }
  .shad-dialog {
    @apply rounded-[20px] w-[90%] max-w-[400px] px-6 py-8   !important;
  }
  .shad-chart-title {
    @apply text-white !important;
  }
  .shad-select-item {
    @apply cursor-pointer !important;
  }

  /* Sidebar & MobileNavigation */
  .nav-icon {
    @apply w-6 filter !important;
  }
  .nav-icon-active {
    @apply invert opacity-90 !important;
  }

  /* =====  STYLE CLASSES */

  /* Root Layout */
  .main-content {
    @apply remove-scrollbar h-full flex-1 overflow-auto bg-offWhite px-5 pt-7 pb-5 sm:mx-4 xl:mx-8 sm:rounded-2xl md:mb-5 md:px-4 border border-brand/20  !important;
  }

  /* Dashboard */
  .dashboard-container {
    @apply container mx-auto grid  grid-cols-1 gap-6 md:grid-cols-2 xl:gap-10 !important;
  }
  .dashboard-summary-list {
    @apply mt-6 grid grid-cols-1 gap-4 xl:mt-10 xl:grid-cols-2 xl:gap-9 !important;
  }
  .dashboard-summary-card {
    @apply relative mt-6 rounded-[20px] bg-white main-border p-5 transition-all hover:scale-105 !important;
  }
  .summary-type-icon {
    @apply absolute -left-3 top-[-25px] z-10 w-[190px] object-contain !important;
  }
  .summary-type-size {
    @apply h4 relative z-20 w-full text-right !important;
  }
  .summary-type-title {
    @apply h5 relative z-20 text-center !important;
  }
  .dashboard-recent-files {
    @apply h-full rounded-[20px] bg-white p-5 xl:p-8 !important;
  }
  .recent-file-details {
    @apply flex w-full flex-col xl:flex-row xl:justify-between !important;
  }
  .recent-file-name {
    @apply subtitle-2 line-clamp-1 w-full text-light-100 sm:max-w-[200px] lg:max-w-[250px] !important;
  }
  .recent-file-date {
    @apply body-2 text-light-100/80 !important;
  }
  .empty-list {
    @apply body-1 mt-10 text-center text-light-200 !important;
  }

  /* Type page */
  .page-container {
    @apply mx-auto flex w-full max-w-7xl flex-col items-center gap-8 !important;
  }
  .total-size-section {
    @apply flex mt-2 flex-col justify-between sm:flex-row sm:items-center !important;
  }
  .file-list {
    @apply grid w-full gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 !important;
  }
  .sort-container {
    @apply mt-5 flex items-center sm:mt-0 sm:gap-3 !important;
  }

  /* ActionsDropdown */
  .rename-input-field {
    @apply body-2 shad-no-focus h-[52px] w-full rounded-2xl border px-4 shadow-drop-1 !important;
  }
  .delete-confirmation {
    @apply text-center text-light-100 !important;
  }
  .delete-file-name {
    @apply font-semibold text-brand-200  !important;
  }
  .modal-cancel-button {
    @apply h-[52px] flex-1 rounded-2xl bg-white text-light-100 hover:bg-transparent !important;
  }
  .modal-submit-button {
    @apply primary-btn !mx-0 h-[52px] w-full flex-1 !important;
  }

  /* ActionsModalContent */
  .file-details-thumbnail {
    @apply !mb-1 flex items-center gap-3 rounded-2xl border border-light-200/40 bg-light-400/50 p-3 !important;
  }
  .file-details-label {
    @apply body-2 w-[30%] text-light-100 !important;
  }
  .file-details-value {
    @apply subtitle-2 flex-1 !important;
  }

  .share-wrapper {
    @apply !mt-2 space-y-2 !important;
  }
  .share-input-field {
    @apply body-2 shad-no-focus h-[52px] w-full rounded-2xl border px-4 shadow-drop-1 !important;
  }
  .share-remove-user {
    @apply rounded-2xl bg-transparent text-light-100 shadow-none hover:bg-transparent !important;
  }
  .remove-icon {
    @apply aspect-square rounded-2xl !important;
  }

  /* AuthForm */
  .auth-form {
    @apply flex max-h-[800px] w-full max-w-[580px] flex-col justify-center space-y-6 transition-all lg:h-full lg:space-y-8 !important;
  }
  .form-title {
    @apply h1 text-center text-light-100 md:text-left !important;
  }
  .form-submit-button {
    @apply primary-btn h-[60px] !important;
  }
  .error-message {
    @apply body-2 mx-auto w-fit rounded-2xl bg-error/5 px-8 py-4 text-center text-error !important;
  }

  /* Card */
  .file-card {
    @apply flex cursor-pointer flex-col gap-6 rounded-[18px]  border border-brand bg-white p-5 shadow-sm transition-all hover:shadow-drop-3 !important;
  }
  .file-card-details {
    @apply flex flex-col gap-2 text-light-100 !important;
  }

  /* Chart */
  .chart {
    @apply flex items-center justify-between rounded-2xl bg-white main-border p-5 md:flex-col xl:flex-row !important;
  }
  .chart-container {
    @apply mx-auto aspect-square w-[180px] text-black xl:w-[250px] !important;
  }
  .polar-grid {
    @apply first:fill-white/20 last:fill-brand !important;
  }
  .chart-details {
    @apply flex-1 items-start px-3 py-0 sm:px-5 lg:p-3 xl:pr-5 !important;
  }
  .chart-total-percentage {
    @apply fill-white text-4xl font-bold !important;
  }
  .chart-title {
    @apply h2 font-bold md:text-center lg:text-left !important;
  }
  .chart-description {
    @apply h4 mt-2 w-full md:text-center lg:text-left !important;
  }

  /* FileUploader */
  .uploader-button {
    @apply rounded-2xl bg-brand-100 hover:bg-brand-200 text-white  h-[52px] gap-4 px-10 shadow-drop-1 !important;
  }
  .uploader-preview-list {
    @apply fixed bottom-10 right-10 z-50 flex size-full h-fit max-w-[480px] flex-col gap-3 rounded-[20px] bg-white p-7 shadow-drop-3 !important;
  }
  .uploader-preview-item {
    @apply flex items-center justify-between  gap-3 rounded-2xl p-3 shadow-drop-3 !important;
  }
  .preview-item-name {
    @apply subtitle-2 flex flex-col gap-1 mb-2 line-clamp-1 max-w-[300px] !important;
  }

  .error-toast {
    @apply bg-red !rounded-[10px] p-4 !important;
  }
  .success-toast {
    @apply bg-brand !rounded-[10px] p-4 !important;
  }

  /* Header */
  .header {
    @apply hidden items-center justify-between py-5 px-3 lg:px-1 sm:flex gap-12 lg:py-7 !important;
  }
  .header-wrapper {
    @apply flex-center min-w-fit  py-2 gap-4 lg:gap-1  !important;
  }
  .sign-out-button {
    @apply flex-center h-[52px] min-w-[60px] items-center rounded-2xl bg-brand/10 p-0 text-brand shadow-none transition-all hover:bg-brand/20 !important;
  }

  /* Mobile Navigation */
  .mobile-header {
    @apply flex h-[65px] justify-between px-5 bg-brand sm:hidden !important;
  }
  .header-user {
    @apply my-3 flex items-center gap-2 rounded-2xl p-1 text-white sm:justify-center sm:bg-brand/10 lg:justify-start lg:p-3 !important;
  }
  .header-user-avatar {
    @apply aspect-square w-10 rounded-2xl object-cover !important;
  }
  .mobile-nav {
    @apply h5 flex-1 gap-1 text-white !important;
  }
  .mobile-nav-list {
    @apply flex flex-1 flex-col gap-4 !important;
  }
  .mobile-nav-item {
    @apply flex text-white gap-4 w-full justify-start items-center h5 px-6 h-[52px] rounded-2xl !important;
  }
  .mobile-sign-out-button {
    @apply h5 flex h-[52px] w-full items-center gap-4 rounded-2xl bg-light-400 px-6 text-coral hover:bg-light-200 shadow-none transition-all !important;
  }

  /* OTP Modal */
  .otp-close-button {
    @apply absolute -right-4 -top-10 size-8 md:-right-8 flex-center cursor-pointer border-2  border-coral text-coral text-lg rounded-2xl  !important;
  }

  /* Search */
  .search {
    @apply relative w-full sm:max-w-[300px] lg:max-w-[350px] xl:max-w-[480px] !important;
  }
  .search-input-wrapper {
    @apply flex h-[52px] flex-1 items-center lg:ml-2 gap-3 bg-white rounded-2xl px-4 shadow-drop-3 !important;
  }
  .search-input {
    @apply body-2 shad-no-focus  placeholder:body-1 w-full border-none p-0 shadow-none placeholder:text-gray-500 !important;
  }
  .search-result {
    @apply absolute left-0 top-16 z-50 flex w-full flex-col gap-3 rounded-[20px] bg-white border border-b-4 border-r-4  p-4 max-h-[80vh] overflow-y-auto shadow-drop-3 !important;
  }
  .empty-result {
    @apply body-2 text-center text-light-100 !important;
  }

  /* Sidebar */
  .sidebar {
    @apply bg-brand remove-scrollbar hidden h-screen w-[90px] flex-col overflow-auto px-5 py-7 sm:flex lg:w-[280px] xl:w-[325px] !important;
  }
  .sidebar-nav {
    @apply h5 mt-9 flex-1 gap-1 text-brand !important;
  }
  .sidebar-nav-item {
    @apply flex text-white gap-4 rounded-2xl lg:w-full justify-center lg:justify-start items-center h5 lg:px-[30px] h-[52px] lg:rounded-2xl !important;
  }
  .sidebar-user-info {
    @apply mt-4 flex items-center justify-center gap-2 rounded-2xl bg-brand/10 p-1 text-light-100 lg:justify-start lg:p-3 !important;
  }
  .sidebar-user-avatar {
    @apply aspect-square w-10 rounded-2xl object-cover !important;
  }

  .nav-active {
    @apply bg-white text-black shadow-drop-2 !important;
  }

  /* Sort */
  .sort-select {
    @apply shad-no-focus h-11 w-full rounded-[8px] border bg-white !shadow-sm sm:w-[210px] !important;
  }

  .sort-select::placeholder {
    @apply text-gray-800 !important;
  }

  .sort-select-content {
    @apply !shadow-drop-3 !important;
  }

  /* Thumbnail */
  .thumbnail {
    @apply flex-center size-[50px] min-w-[50px] overflow-hidden rounded-full bg-brand/10;
  }
  .thumbnail-image {
    @apply size-full object-cover object-center !important;
  }

  @media (min-width: 768px) {
    .header {
      @apply mx-1;
    }
    .uploader-button {
      @apply primary-btn h-[52px] gap-4 px-10 shadow-drop-1 !important;
    }
  }

  @media (min-width: 1024px) {
    .header-wrapper {
      @apply mx-2;
    }
    
  }

  @media (min-width: 1280px) {
    .header {
      @apply mx-5;
    }
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
