/* =========================================================================
   Machine Maintenance System — PT Unicharm
   Design: industrial control-panel. Graphite + signal amber, hazard-stripe
   accents borrowed from shop-floor caution tape, monospace for machine/
   part/case codes so operators can scan IDs fast.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  /* ---- palette --------------------------------------------------------- */
  --ink:        #14181D;   /* sidebar / darkest */
  --ink-2:      #1E2530;   /* sidebar hover surface */
  --steel:      #2A313C;   /* borders on dark */
  --canvas:     #F1F3F6;   /* page background */
  --paper:      #FFFFFF;   /* cards */
  --line:       #E4E8EE;   /* hairline borders on light */
  --text:       #1B1F26;
  --text-muted: #6B7480;
  --text-dim:   #9AA2AD;

  --amber:      #F2A33C;   /* signal amber — primary accent */
  --amber-dark: #D9871E;
  --amber-ink:  #4A2F0A;
  --red:        #D64545;
  --green:      #2F9E6E;
  --blue:       #3E7CB1;
  --slate:      #5B6472;
  --dark-badge: #14181D;

  --radius:     10px;
  --radius-sm:  7px;
  --shadow-sm:  0 1px 2px rgba(20,24,29,.06);
  --shadow-md:  0 6px 20px rgba(20,24,29,.08);

  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  /* ---- retheme bootstrap (5.3 reads these at component level) --------- */
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--text);
  --bs-body-bg: var(--canvas);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: var(--radius);
  --bs-link-color: var(--amber-dark);
  --bs-link-hover-color: var(--ink);

  --bs-primary: var(--amber);
  --bs-primary-rgb: 242,163,60;
  --bs-secondary: var(--slate);
  --bs-secondary-rgb: 91,100,114;
  --bs-success: var(--green);
  --bs-success-rgb: 47,158,110;
  --bs-danger: var(--red);
  --bs-danger-rgb: 214,69,69;
  --bs-warning: var(--amber);
  --bs-warning-rgb: 242,163,60;
  --bs-info: var(--blue);
  --bs-info-rgb: 62,124,177;
  --bs-dark: var(--ink);
  --bs-dark-rgb: 20,24,29;
  --bs-light: var(--canvas);
  --bs-light-rgb: 241,243,246;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-body);
  font-feature-settings: "cv02","cv03","cv04","cv11";
  min-height: 100vh;
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}

p{ color: var(--text); }
small, .small{ color: var(--text-muted); }
.text-muted{ color: var(--text-muted) !important; }

code, .font-mono{ font-family: var(--font-mono); }

::selection{ background: rgba(242,163,60,.35); }

*:focus-visible{
  outline: 2px solid var(--amber-dark);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* thin custom scrollbar (webkit) */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: #C6CCD6; border-radius: 10px; border:2px solid var(--canvas); }
.sidebar::-webkit-scrollbar-thumb{ background:#3A4250; border-color: var(--ink); }

/* signature: hazard-stripe hairline, used sparingly as a structural accent */
.hazard-edge{
  height: 4px;
  background-image: repeating-linear-gradient(
    -45deg, var(--amber) 0 10px, var(--ink) 10px 20px
  );
}

/* =========================================================================
   APP SHELL
   ========================================================================= */
.app-shell{
  display: flex;
  min-height: 100vh;
}

/* ---- sidebar ----------------------------------------------------------- */
.sidebar{
  width: 264px;
  flex: 0 0 264px;
  background: var(--ink);
  color: #C9CED6;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 1040;
  border-right: 1px solid var(--steel);
}

.sidebar-brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding: 1.35rem 1.25rem 1.1rem;
  border-bottom: 1px solid var(--steel);
}
.sidebar-brand div:last-child{ line-height:1.2; }
.sidebar-brand b{
  display:block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: #fff;
}
.sidebar-brand small{
  display:block;
  color:#8B93A0;
  font-size:.72rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.brand-icon{
  width: 42px; height: 42px;
  min-width:42px;
  border-radius: 9px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  color: var(--ink);
  background: repeating-linear-gradient(
    -45deg, var(--amber) 0 6px, var(--amber-dark) 6px 12px
  );
  box-shadow: var(--shadow-sm);
}

.sidebar .nav{ padding: .75rem .65rem; flex:1; }
.sidebar .nav-caption{
  margin: 1.15rem .6rem .4rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #6E7684;
}

.sidebar .nav-link{
  display:flex;
  align-items:center;
  gap:.65rem;
  color:#B6BCC6;
  font-size:.92rem;
  font-weight:500;
  padding:.6rem .75rem;
  border-radius: var(--radius-sm);
  margin-bottom:.15rem;
  border-left: 3px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sidebar .nav-link:hover{
  background: var(--ink-2);
  color:#fff;
}
.sidebar .nav-link.active{
  background: linear-gradient(90deg, rgba(242,163,60,.16), rgba(242,163,60,.04));
  color:#fff;
  border-left-color: var(--amber);
  font-weight:600;
}

/* ---- main / topbar ------------------------------------------------------ */
.main-content{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.topbar{
  position: sticky;
  top:0;
  z-index: 1020;
  display:flex;
  align-items:center;
  gap:1rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: .85rem 1.25rem;
}
.topbar > div:not(.ms-auto){ min-width:0; }
.topbar > div:not(.ms-auto) > div{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .fw-semibold{ font-family: var(--font-display); color:var(--ink); }
.topbar .dropdown-toggle{ font-weight:600; flex-shrink:0; }

@media (max-width: 575.98px){
  .topbar{ padding:.7rem .85rem; gap:.5rem; }
  .topbar small{ display:none; }
  .topbar .dropdown-toggle{ font-size:.82rem; padding:.4rem .6rem; }
  .topbar > div:not(.ms-auto){ max-width: 40vw; }
}

.app-footer{
  margin-top:auto;
  padding: 1.1rem 1.5rem;
  text-align:center;
  font-size:.8rem;
  color: var(--text-dim);
  border-top: 1px solid var(--line);
}

/* mobile sidebar drawer -------------------------------------------------- */
@media (max-width: 991.98px){
  .sidebar{
    position: fixed;
    left: -280px;
    top:0; bottom:0;
    height: 100vh;
    transition: left .25s ease;
    box-shadow: var(--shadow-md);
  }
  body.sidebar-open .sidebar{ left:0; }
  body.sidebar-open{ overflow:hidden; }
  body.sidebar-open .main-content::before{
    content:"";
    position:fixed; inset:0;
    background: rgba(20,24,29,.5);
    z-index:1030;
  }
  .main-content{ width:100%; }
}

/* =========================================================================
   CARDS / STATS
   ========================================================================= */
.card{
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.card-header{ font-family: var(--font-display); border-color: var(--line) !important; }

.stat-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  height:100%;
}
.stat-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--amber);
}
.stat-title{
  font-size:.74rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color: var(--text-muted);
  margin-bottom:.35rem;
}
.stat-value{
  font-family: var(--font-display);
  font-size:2rem;
  font-weight:700;
  color: var(--ink);
  line-height:1.1;
}
.stat-card small{ color: var(--text-dim); }

.stock-big{
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight:700;
  color: var(--ink);
}
.stock-big small{ font-size:1rem; font-weight:500; color:var(--text-muted); }

.case-photo{ max-height: 420px; object-fit: cover; border:1px solid var(--line); }

.pm-checklist{
  font-family: var(--font-mono);
  font-size:.85rem;
  background: var(--canvas);
  border:1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem;
  white-space: pre-wrap;
  color: var(--text);
}

/* =========================================================================
   TABLES
   ========================================================================= */
.table{ --bs-table-color: var(--text); margin-bottom:0; }
.table > :not(caption) > * > *{ padding: .75rem .9rem; }
.table thead th{
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color: var(--text-muted);
  background: #F7F8FA;
  border-bottom: 1px solid var(--line);
}
.table td, .table th{ border-color: var(--line); vertical-align:middle; }
.table tbody tr:hover{ background: #FBFAF7; }
.table a{ font-weight:600; text-decoration:none; }
.table a:hover{ text-decoration:underline; }

/* case/part/pm identifiers read as data */
.table td b, .table td a b{ font-family: var(--font-mono); font-size:.88rem; letter-spacing:-.01em; }

/* =========================================================================
   BUTTONS / FORMS / BADGES
   ========================================================================= */
/* Bootstrap's compiled CSS hardcodes hex per .btn-* variant instead of
   reading the root palette variables, so buttons need explicit overrides
   (badges/alerts above are fine — those do reference the root vars). */
.btn{ font-weight:600; letter-spacing:.01em; }

.btn-primary{
  --bs-btn-color:#3A2508; --bs-btn-bg: var(--amber); --bs-btn-border-color: var(--amber);
  --bs-btn-hover-color:#3A2508; --bs-btn-hover-bg:#EE9B27; --bs-btn-hover-border-color:#EE9B27;
  --bs-btn-active-color:#3A2508; --bs-btn-active-bg: var(--amber-dark); --bs-btn-active-border-color: var(--amber-dark);
  --bs-btn-disabled-bg: var(--amber); --bs-btn-disabled-border-color: var(--amber);
  --bs-btn-focus-shadow-rgb: 242,163,60;
}
.btn-outline-primary{
  --bs-btn-color: var(--amber-dark); --bs-btn-border-color: var(--amber);
  --bs-btn-hover-color:#3A2508; --bs-btn-hover-bg: var(--amber); --bs-btn-hover-border-color: var(--amber);
  --bs-btn-active-color:#3A2508; --bs-btn-active-bg: var(--amber); --bs-btn-active-border-color: var(--amber);
  --bs-btn-disabled-color: var(--amber-dark); --bs-btn-disabled-border-color: var(--amber);
  --bs-btn-focus-shadow-rgb: 242,163,60;
}
.btn-danger{
  --bs-btn-color:#fff; --bs-btn-bg: var(--red); --bs-btn-border-color: var(--red);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#C13939; --bs-btn-hover-border-color:#C13939;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#B33232; --bs-btn-active-border-color:#B33232;
  --bs-btn-disabled-bg: var(--red); --bs-btn-disabled-border-color: var(--red);
  --bs-btn-focus-shadow-rgb: 214,69,69;
}
.btn-outline-danger{
  --bs-btn-color: var(--red); --bs-btn-border-color: var(--red);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg: var(--red); --bs-btn-hover-border-color: var(--red);
  --bs-btn-active-color:#fff; --bs-btn-active-bg: var(--red); --bs-btn-active-border-color: var(--red);
  --bs-btn-focus-shadow-rgb: 214,69,69;
}
.btn-success{
  --bs-btn-color:#fff; --bs-btn-bg: var(--green); --bs-btn-border-color: var(--green);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#268A5F; --bs-btn-hover-border-color:#268A5F;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#227A54; --bs-btn-active-border-color:#227A54;
  --bs-btn-disabled-bg: var(--green); --bs-btn-disabled-border-color: var(--green);
  --bs-btn-focus-shadow-rgb: 47,158,110;
}
.btn-outline-success{
  --bs-btn-color: var(--green); --bs-btn-border-color: var(--green);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg: var(--green); --bs-btn-hover-border-color: var(--green);
  --bs-btn-active-color:#fff; --bs-btn-active-bg: var(--green); --bs-btn-active-border-color: var(--green);
  --bs-btn-focus-shadow-rgb: 47,158,110;
}
.btn-secondary{
  --bs-btn-color:#fff; --bs-btn-bg: var(--slate); --bs-btn-border-color: var(--slate);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#4A5361; --bs-btn-hover-border-color:#4A5361;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#414954; --bs-btn-active-border-color:#414954;
  --bs-btn-disabled-bg: var(--slate); --bs-btn-disabled-border-color: var(--slate);
}
.btn-outline-secondary{
  --bs-btn-color: var(--slate); --bs-btn-border-color: #C7CCD3;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg: var(--slate); --bs-btn-hover-border-color: var(--slate);
  --bs-btn-active-color:#fff; --bs-btn-active-bg: var(--slate); --bs-btn-active-border-color: var(--slate);
}
.btn-warning{
  --bs-btn-color:#3A2508; --bs-btn-bg: var(--amber); --bs-btn-border-color: var(--amber);
  --bs-btn-hover-color:#3A2508; --bs-btn-hover-bg:#EE9B27; --bs-btn-hover-border-color:#EE9B27;
}
.btn-info{
  --bs-btn-color:#fff; --bs-btn-bg: var(--blue); --bs-btn-border-color: var(--blue);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#356C99; --bs-btn-hover-border-color:#356C99;
}
.btn-light{
  --bs-btn-color: var(--ink); --bs-btn-bg:#fff; --bs-btn-border-color: var(--line);
  --bs-btn-hover-bg: var(--canvas); --bs-btn-hover-border-color: var(--line);
}

.form-label{ font-size:.82rem; font-weight:600; color:var(--ink); margin-bottom:.35rem; }
.form-control, .form-select{
  border-color: var(--line);
  font-size:.92rem;
}
.form-control:focus, .form-select:focus{
  border-color: var(--amber);
  box-shadow: 0 0 0 .2rem rgba(242,163,60,.18);
}

.badge{ font-weight:600; letter-spacing:.02em; font-size:.72rem; padding:.4em .6em; }
.text-bg-dark{ background-color: var(--ink) !important; }

.progress{ background: var(--line); height: .6rem; border-radius: 999px; }
.progress-bar{ background: var(--amber); }

.alert{ border:none; border-left: 4px solid transparent; border-radius: var(--radius-sm); }
.alert-success{ border-left-color: var(--green); background:#EAF7F1; color:#1E6B4C; }
.alert-danger{ border-left-color: var(--red); background:#FBEBEC; color:#9A2F2F; }
.alert-warning{ border-left-color: var(--amber); background:#FDF2E0; color:#8A5A16; }

.dropdown-menu{ border-color: var(--line); box-shadow: var(--shadow-md); }

/* row highlight for low-stock parts */
.table-danger, .table-danger > *{
  --bs-table-bg: #FCEDEE;
  --bs-table-color: #8A2E2E;
}

/* =========================================================================
   LOGIN
   ========================================================================= */
.login-body{
  min-height:100vh;
  background:
    radial-gradient(1100px 500px at 15% -10%, rgba(242,163,60,.18), transparent 60%),
    var(--ink);
  position: relative;
}
.login-body::before{
  content:"";
  position:fixed; top:0; left:0; right:0; height:6px;
  background-image: repeating-linear-gradient(
    -45deg, var(--amber) 0 12px, var(--ink-2) 12px 24px
  );
}
.login-body .card{
  border-radius: var(--radius);
  border:1px solid var(--steel);
}
.login-body .brand-icon{ width:56px; height:56px; font-size:1.4rem; }
.login-body h4{ font-family: var(--font-display); }

/* =========================================================================
   MISC
   ========================================================================= */
.part-row{ align-items:center; }
.container-fluid{ max-width: 1440px; }

h3{ font-size:1.4rem; }
@media (max-width: 575.98px){
  .stat-value{ font-size:1.6rem; }
  .stock-big{ font-size:2rem; }
  h3{ font-size:1.2rem; }
  .container-fluid.p-3{ padding:1rem !important; }
}