/* ==========================================================================
   Carbon Design System — Hook Brand Theme Overrides
   ========================================================================== */

/* --- FOUC Prevention (login page only) ---
   Hide undefined Carbon elements until the browser registers them */
.login-page cds-text-input:not(:defined),
.login-page cds-button:not(:defined),
.login-page cds-icon-button:not(:defined),
.login-page cds-inline-notification:not(:defined),
.login-page cds-link:not(:defined),
.login-page cds-stack:not(:defined),
.login-page cds-tile:not(:defined),
.login-page cds-clickable-tile:not(:defined) {
  visibility: hidden;
}

/* --- Google Sans Font --- */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap');

/* --- Brand CSS Variables --- */
:root {
  --hook-dark: #33322E;
  --hook-orange: #F15A2E;
  --hook-teal: #00897B;
  --hook-gray: #505050;
  --hook-light-gray: #EFF0F2;
  --hook-white: #FFFFFF;
}

/* --- Carbon Design Token Overrides --- */
:root,
html {
  /* Typography */
  --cds-font-family-sans: 'Google Sans', 'Helvetica Neue', Arial, sans-serif;
  --cds-body-compact-01-font-family: 'Google Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Interactive / Primary */
  --cds-interactive: var(--hook-orange);
  --cds-link-primary: var(--hook-orange);
  --cds-link-primary-hover: #D94E25;
  --cds-button-primary: var(--hook-orange);
  --cds-button-primary-hover: #D94E25;
  --cds-button-primary-active: #C04520;

  /* Text */
  --cds-text-primary: var(--hook-dark);
  --cds-text-secondary: var(--hook-gray);

  /* Focus */
  --cds-focus: var(--hook-orange);

  /* Border */
  --cds-border-strong: var(--hook-dark);
  --cds-border-subtle: #C6C6C6;

  /* Background */
  --cds-background: var(--hook-white);
  --cds-layer-01: var(--hook-white);

  /* Notification */
  --cds-support-error: #DA1E28;

  /* Timesheet spacing tokens */
  --ts-spacing-xs: 4px;
  --ts-spacing-sm: 8px;
  --ts-spacing-md: 16px;
  --ts-spacing-lg: 24px;
  --ts-spacing-xl: 48px;
  --ts-card-radius: 6px;
  --ts-card-border: 1px solid #C6C6C6;
  --ts-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* --- Shadow DOM Font Override ---
   ::part() selectors to push Google Sans into Shadow DOM internals */
cds-text-input::part(input),
cds-button::part(button),
cds-link::part(link),
cds-inline-notification::part(title),
cds-inline-notification::part(subtitle) {
  font-family: 'Google Sans', 'Helvetica Neue', Arial, sans-serif !important;
}

/* --- Login Page Layout --- */
.login-page {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 5%;
  font-family: 'Google Sans', 'Helvetica Neue', Arial, sans-serif;
}

.login-container {
  width: 100%;
  max-width: 720px;
  background-color: var(--hook-white);
}

/* --- Header Section --- */
.login-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--hook-dark);
  border-bottom: none;
  padding: 12px 16px 8px 16px;
  min-height: 72px;
  box-sizing: border-box;
}

.login-header__title {
  color: var(--hook-dark);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
}

.login-header__subtitle {
  color: var(--hook-dark);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.login-header__logo {
  width: 170px;
  height: 70px;
  background-image: url('../asset/image/hook_logo_black.png');
  background-repeat: no-repeat;
  background-size: 170px 70px;
  flex-shrink: 0;
}

/* --- Body Section --- */
.login-body {
  border: 1px solid var(--hook-dark);
}

.login-body__tagline {
  border-top: 1px solid var(--hook-dark);
  padding: 16px;
  line-height: 12px;
}

.login-body__tagline-text {
  color: var(--hook-dark);
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
}

.login-body__vision {
  padding: 0 16px 16px 16px;
  line-height: 16px;
}

.login-body__vision-text {
  color: var(--hook-dark);
  font-size: 13px;
  font-weight: 400;
}

/* --- Useful Links Section --- */
.login-links {
  border-top: 1px solid var(--hook-dark);
  padding: 16px;
  line-height: 18px;
}

.login-links__label {
  color: var(--hook-dark);
  font-size: 14px;
  font-weight: 400;
}

/* --- Form Fields Section --- */
.login-form-fields {
  border-top: 1px solid var(--hook-dark);
  padding: 16px;
}

.login-form-fields__row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.login-form-fields__input {
  flex: 1;
}

.login-form-fields__submit {
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 4px;
}

/* --- Error Notification --- */
.login-error {
  padding: 0 16px 8px 16px;
}

.login-error cds-inline-notification {
  width: 100%;
}

/* --- Google Sign-In --- */
.login-google {
  border-top: 1px solid var(--hook-dark);
  border-bottom: 2px solid var(--hook-dark);
}

.login-google cds-clickable-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--hook-light-gray);
  min-height: 51px;
  --cds-layer-01: var(--hook-light-gray);
}

.login-google__icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.login-google__text {
  font-size: 14px;
  font-weight: 400;
}

/* --- Footer Section --- */
.login-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid var(--hook-dark);
  padding: 16px;
}

.login-footer__info {
  line-height: 18px;
  flex: 1;
}

.login-footer__company {
  color: var(--hook-gray);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.login-footer__address {
  color: var(--hook-gray);
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
}

.login-footer__tel {
  color: #606060;
  text-decoration: none;
}

.login-footer__website {
  color: var(--hook-dark);
  text-decoration: none;
}

.login-footer__badge {
  flex-shrink: 0;
}

.login-footer__badge img {
  width: 150px;
  height: 72px;
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .login-page {
    padding-top: 0;
  }

  .login-container {
    max-width: 100%;
  }

  .login-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .login-header__logo {
    align-self: flex-end;
  }

  .login-form-fields__row {
    flex-direction: column;
    gap: 8px;
  }

  .login-form-fields__submit {
    align-self: flex-end;
  }

  .login-footer {
    flex-direction: column;
    gap: 16px;
  }

  .login-footer__badge {
    align-self: flex-end;
  }

  .login-body__vision-text br {
    display: none;
  }
}