/* Smart Hospital UI refresh for KD Hospital e-Payslip
   Scope: web interface only. PDF generator files are not modified. */
* {
   box-sizing: border-box
}

html {
   min-height: 100%;
   font-size: 16px
}

body {
   margin: 0;
   min-height: 100%;
   font-family: Tahoma, 'Noto Sans Thai', 'Sarabun', Arial, sans-serif;
   color: #16323f;
   background: radial-gradient(circle at 12% 18%, rgba(64, 196, 168, .32), transparent 34%), radial-gradient(circle at 88% 10%, rgba(0, 112, 173, .26), transparent 32%), linear-gradient(135deg, #e8f7f4 0%, #dff3f6 42%, #f7fbff 100%) !important;
   line-height: 1.55
}

body:before {
   content: "";
   position: fixed;
   inset: 0;
   background: linear-gradient(135deg, rgba(0, 117, 143, .08), rgba(22, 160, 133, .10));
   z-index: -1
}

.page-shell {
   width: min(1180px, 94vw);
   margin: 28px auto
}

.smart-card,
.radi {
   border-radius: 28px !important;
   background: rgba(255, 255, 255, .92) !important;
   box-shadow: 0 24px 65px rgba(0, 42, 66, .22);
   backdrop-filter: blur(12px);
   overflow: hidden
}

.smart-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   padding: 22px 32px;
   background: linear-gradient(135deg, #006a7d, #11a05d);
   color: #fff
}

.smart-brand {
   display: flex;
   align-items: center;
   gap: 16px
}

.brand-logo {
   width: 78px;
   height: 78px;
   object-fit: contain;
   background: #fff;
   border-radius: 50%;
   padding: 6px;
   box-shadow: 0 12px 28px rgba(0, 0, 0, .18)
}

.brand-logo.small {
   width: 58px;
   height: 58px
}

.brand-title {
   font-size: 32px;
   font-weight: 700;
   letter-spacing: .2px;
   margin: 0
}

.brand-subtitle {
   font-size: 18px;
   color: #fff7b2;
   font-weight: 700;
   margin-top: 3px
}

.system-badge {
   background: rgba(255, 255, 255, .16);
   border: 1px solid rgba(255, 255, 255, .35);
   border-radius: 999px;
   padding: 8px 14px;
   font-weight: 700
}

.smart-body {
   padding: 30px
}

.login-grid {
   display: grid;
   grid-template-columns: minmax(270px, 1fr) minmax(360px, 420px) minmax(270px, 1fr);
   gap: 24px;
   align-items: stretch
}

.info-box {
   background: #f7fbff;
   border: 1px solid #dbeef5;
   border-radius: 20px;
   padding: 20px
}

.info-box.warning {
   background: #fff7f4;
   border-color: #ffd6c7;
   color: #b82121
}

.info-title {
   font-weight: 700;
   font-size: 18px;
   margin-bottom: 10px;
   color: #006a7d
}

.warning .info-title {
   color: #d93025
}

.login-panel {
   background: #fff;
   border-radius: 22px;
   padding: 28px 32px;
   box-shadow: 0 14px 38px rgba(0, 60, 80, .12);
   border: 1px solid #e6f2f5;
   display: flex;
   flex-direction: column;
   justify-content: center
}

.login-panel form {
   width: 100%;
   max-width: 320px;
   margin: 0 auto
}

.login-panel .form-control {
   display: block;
   width: 100%;
   margin: 0 0 12px
}

.login-panel br {
   display: none
}

.login-panel input[type=submit] {
   min-width: 140px;
   margin-top: 4px
}

.login-title {
   text-align: center;
   color: #006a7d;
   font-size: 22px;
   font-weight: 700;
   margin-bottom: 20px
}

.form-control {
   height: 46px !important;
   border-radius: 12px !important;
   border: 1px solid #d1e4ea !important;
   box-shadow: none !important;
   font-size: 16px !important
}

.form-control:focus {
   border-color: #16a085 !important;
   box-shadow: 0 0 0 4px rgba(22, 160, 133, .12) !important
}

.btn,
.smart-btn,
input[type=submit],
input[type=button] {
   border: 0 !important;
   border-radius: 12px !important;
   padding: 10px 18px !important;
   font-weight: 700 !important;
   box-shadow: 0 8px 22px rgba(0, 0, 0, .10);
   transition: .18s ease
}

.btn-success,
.smart-btn.primary,
input[type=submit] {
   background: linear-gradient(135deg, #0a8f5a, #13b979) !important;
   color: #fff !important
}

.btn-primary {
   background: linear-gradient(135deg, #006a9e, #1186c7) !important;
   color: #fff !important
}

.btn-info {
   background: linear-gradient(135deg, #0c7890, #22a7bd) !important;
   color: #fff !important
}

.btn-warning {
   background: linear-gradient(135deg, #f2a51a, #ffcb4c) !important;
   color: #3d2a00 !important
}

.btn-danger {
   background: linear-gradient(135deg, #d93b3b, #f36a6a) !important;
   color: #fff !important
}

.btn:hover {
   transform: translateY(-1px);
   filter: brightness(1.03)
}

.smart-footer {
   padding: 20px 32px;
   background: #f0faf7;
   border-top: 1px solid #dbeee8;
   text-align: center;
   color: #58707b
}

.stats-line {
   margin: 22px 0 10px;
   text-align: center;
   color: #55707c
}

.quick-links {
   display: flex;
   justify-content: center;
   gap: 14px;
   flex-wrap: wrap;
   margin-top: 18px
}

.quick-links a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: #fff;
   border: 1px solid #d8eaee;
   border-radius: 14px;
   padding: 10px 14px;
   color: #18506a;
   text-decoration: none !important
}

.quick-links img {
   width: 34px;
   height: 34px;
   object-fit: contain
}

.profile-box {
   background: #fff;
   border: 1px solid #dceff2;
   border-radius: 20px;
   padding: 20px;
   text-align: center;
   box-shadow: 0 10px 28px rgba(0, 60, 80, .08)
}

.profile-name {
   font-size: 24px;
   color: #006a7d;
   font-weight: 700
}

.action-bar {
   display: flex;
   justify-content: center;
   gap: 10px;
   flex-wrap: wrap;
   margin: 20px 0
}

.table-modern,
table.smart-table {
   width: 100%;
   border-collapse: separate !important;
   border-spacing: 0 !important;
   background: #fff;
   border-radius: 18px;
   overflow: hidden;
   box-shadow: 0 10px 30px rgba(0, 60, 80, .08);
   border: 1px solid #dceff2 !important
}

.table-modern th,
.table-modern td,
table.smart-table th,
table.smart-table td {
   padding: 12px 14px !important;
   border-bottom: 1px solid #eaf3f5 !important
}

.table-modern th,
table.smart-table th {
   background: #e9f8f3 !important;
   color: #006a7d !important;
   text-align: center;
   font-weight: 700
}

.table-modern tr:last-child td {
   border-bottom: 0 !important
}

.table-modern a {
   font-weight: 700;
   color: #007a9e;
   text-decoration: none
}

.alert-modern {
   background: #fff4f2;
   border: 1px solid #ffccc5;
   color: #b42318;
   border-radius: 16px;
   padding: 16px;
   text-align: center;
   font-weight: 700;
   margin-bottom: 18px
}

@media(max-width:900px) {
   .login-grid {
      grid-template-columns: 1fr
   }

   .smart-header {
      flex-direction: column;
      text-align: center
   }

   .brand-title {
      font-size: 26px
   }

   .smart-body {
      padding: 20px
   }

   .page-shell {
      margin: 14px auto
   }
}

@media print {
   body {
      background: #fff !important
   }

   .page-shell,
   .smart-card,
   .radi {
      width: 100% !important;
      margin: 0 !important;
      box-shadow: none !important;
      border-radius: 0 !important
   }

   .smart-header,
   .smart-footer,
   .action-bar,
   .quick-links {
      display: none !important
   }
}

/* allmonth.php refinement */
.profile-box-enhanced {
   padding: 24px 28px !important;
   background: linear-gradient(135deg, #ffffff 0%, #f6fcff 100%) !important;
   border: 1px solid #d5eef3 !important
}

.welcome-label {
   display: inline-block;
   margin-bottom: 6px;
   padding: 4px 14px;
   border-radius: 999px;
   background: #e8f8f3;
   color: #08795d;
   font-size: 15px;
   font-weight: 700;
   letter-spacing: .2px
}

.profile-box-enhanced .profile-name {
   display: block;
   font-size: 30px;
   line-height: 1.25;
   color: #005f78;
   font-weight: 800;
   margin: 2px 0 8px;
   text-shadow: 0 1px 0 rgba(255, 255, 255, .9)
}

.profile-meta {
   display: flex;
   justify-content: center;
   gap: 10px;
   flex-wrap: wrap;
   color: #31505e;
   font-size: 15px
}

.profile-meta span {
   background: #f3fafc;
   border: 1px solid #dceff3;
   border-radius: 999px;
   padding: 6px 12px
}

.table-modern {
   table-layout: fixed
}

.table-modern th:nth-child(1),
.table-modern td:nth-child(1) {
   width: 36%
}

.table-modern th:nth-child(2),
.table-modern td:nth-child(2) {
   width: 38%
}

.table-modern th:nth-child(3),
.table-modern td:nth-child(3) {
   width: 26%
}

.table-modern td {
   vertical-align: middle;
   font-size: 16px
}

.table-modern tbody tr:nth-child(even) {
   background: #fbfdfe
}

.table-modern tbody tr:hover {
   background: #f1fbf8
}

.month-cell{
    width:40%;
    text-align:center;
}

.date-cell{
    width:60%;
    text-align:center;
}

.month-cell a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: #006f91 !important
}

.month-badge{
    display:inline-block;
    font-size:1.25rem;
    font-weight:700;
    color:#006b8f;
}

.year-text {
   color: #006a7d;
   font-weight: 800
}

.date-cell {
   text-align: center !important;
   color: #17384a;
   font-variant-numeric: tabular-nums
}

.note-cell {
   text-align: center !important;
   color: #526b75
}

@media(max-width:700px) {
   .profile-box-enhanced .profile-name {
      font-size: 24px
   }

   .profile-meta {
      display: block
   }

   .profile-meta span {
      display: block;
      margin: 6px auto
   }

   .table-modern {
      table-layout: auto
   }

   .month-cell {
      padding-left: 14px !important
   }

   .month-badge {
      min-width: 86px
   }
}