/*
 * SGC Infoways Grievance System — layout framework
 * Replaces bootstrap.min.css. Implements the grid, form, button, table
 * and utility classes this app's pages already use, so page markup did
 * not need to change. Structural only — visual skin lives in theme-sgc.css.
 */

*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; }

img { max-width: 100%; }

/* ---------- Containers ---------- */
.container, .container-fluid {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}
.container-fluid { width: 100%; }
.container { width: 100%; }
@media (min-width: 768px)  { .container { width: 750px; } }
@media (min-width: 992px)  { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }

/* ---------- Grid ---------- */
.row, .row-fluid, .form-row {
    margin-left: -15px;
    margin-right: -15px;
}
.row::after, .row-fluid::after, .form-row::after { content: ""; display: table; clear: both; }

[class*="col-"] {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
.span12, .col-12 { float: left; }

.col-xs-1  { width: 8.3333%; }
.col-xs-2  { width: 16.6667%; }
.col-xs-3  { width: 25%; }
.col-xs-4  { width: 33.3333%; }
.col-xs-5  { width: 41.6667%; }
.col-xs-6  { width: 50%; }
.col-xs-7  { width: 58.3333%; }
.col-xs-8  { width: 66.6667%; }
.col-xs-9  { width: 75%; }
.col-xs-10 { width: 83.3333%; }
.col-xs-11 { width: 91.6667%; }
.col-xs-12, .span12, .col-12 { width: 100%; }

@media (min-width: 768px) {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
    .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; }
    .col-sm-1  { width: 8.3333%; }
    .col-sm-2  { width: 16.6667%; }
    .col-sm-3  { width: 25%; }
    .col-sm-4  { width: 33.3333%; }
    .col-sm-5  { width: 41.6667%; }
    .col-sm-6  { width: 50%; }
    .col-sm-7  { width: 58.3333%; }
    .col-sm-8  { width: 66.6667%; }
    .col-sm-9  { width: 75%; }
    .col-sm-10 { width: 83.3333%; }
    .col-sm-11 { width: 91.6667%; }
    .col-sm-12 { width: 100%; }
    .col-sm-offset-1, .offset-sm-1 { margin-left: 8.3333%; }
    .col-sm-offset-2, .offset-sm-2 { margin-left: 16.6667%; }
    .col-sm-offset-3, .offset-sm-3 { margin-left: 25%; }
    .col-sm-offset-4, .offset-sm-4 { margin-left: 33.3333%; }
    .col-sm-offset-5, .offset-sm-5 { margin-left: 41.6667%; }
    .col-sm-offset-6, .offset-sm-6 { margin-left: 50%; }
}

@media (min-width: 992px) {
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
    .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; }
    .col-md-1  { width: 8.3333%; }
    .col-md-2  { width: 16.6667%; }
    .col-md-3  { width: 25%; }
    .col-md-4  { width: 33.3333%; }
    .col-md-5  { width: 41.6667%; }
    .col-md-6  { width: 50%; }
    .col-md-7  { width: 58.3333%; }
    .col-md-8  { width: 66.6667%; }
    .col-md-9  { width: 75%; }
    .col-md-10 { width: 83.3333%; }
    .col-md-11 { width: 91.6667%; }
    .col-md-12 { width: 100%; }
    .col-md-offset-3 { margin-left: 25%; }
    .col-md-offset-4 { margin-left: 33.3333%; }
}

@media (min-width: 1200px) {
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
    .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; }
    .col-lg-1  { width: 8.3333%; }
    .col-lg-2  { width: 16.6667%; }
    .col-lg-3  { width: 25%; }
    .col-lg-4  { width: 33.3333%; }
    .col-lg-5  { width: 41.6667%; }
    .col-lg-6  { width: 50%; }
    .col-lg-7  { width: 58.3333%; }
    .col-lg-8  { width: 66.6667%; }
    .col-lg-9  { width: 75%; }
    .col-lg-10 { width: 83.3333%; }
    .col-lg-11 { width: 91.6667%; }
    .col-lg-12 { width: 100%; }
}

/* ---------- Utilities ---------- */
.pull-left  { float: left; }
.pull-right { float: right; }
.clearfix::after, .clearfix1::after { content: ""; display: table; clear: both; }

.d-flex  { display: flex; }
.d-none  { display: none; }
.d-md-block { display: none; }
@media (min-width: 768px) {
    .d-md-block { display: block; }
}
.align-items-center { align-items: center; }
.text-center { text-align: center; }
.text-right, .text-lg-end { text-align: right; }
.text-muted { color: #6B7280; }
.gap-2 { gap: 0.5rem; }
.w-100 { width: 100%; }

.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: 1rem; }
.mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; } .mb-5 { margin-bottom: 3rem; }
.p-1 { padding: .25rem; } .p-2 { padding: .5rem; } .p-3 { padding: 1rem; } .p-4 { padding: 1.5rem; }

@media (min-width: 768px) {
    .hidden-mobile { display: block; }
}
@media (max-width: 767px) {
    .hidden-mobile { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 6px;
    background: #E5E7EB;
    color: #1E2433;
    text-decoration: none;
}
.btn:hover { opacity: 0.92; text-decoration: none; }
.btn:disabled, .btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.btn-lg { padding: 12px 22px; font-size: 16px; }
.btn-block { display: block; width: 100%; }
.btn-secondary { background: #F3F4F6; color: #1E2433; border-color: #D1D5DB; }
.btn-primary { background: #2554E2; border-color: #2554E2; color: #fff; }
.btn-info    { background: #0EA5E9; border-color: #0EA5E9; color: #fff; }
.btn-success { background: #10B981; border-color: #10B981; color: #fff; }
.btn-danger  { background: #E11D48; border-color: #E11D48; color: #fff; }
.btn-warning { background: #F59E0B; border-color: #F59E0B; color: #fff; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 1rem; }
.form-label, .control-label, .col-form-label {
    display: inline-block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #374151;
}
.col-form-label { padding-top: 7px; margin-bottom: 0; }

.form-control {
    display: block;
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #1E2433;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
}
.form-control:focus { outline: none; border-color: #2554E2; }
.form-text { display: block; margin-top: 4px; font-size: 12px; color: #6B7280; }

.form-check {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: .5rem;
    padding-left: 0;
}
.form-check-input { width: 16px; height: 16px; }
.form-check-label { margin: 0; font-weight: 400; }

.form-horizontal .control-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
}
.form-horizontal .control-label { flex: 0 0 200px; max-width: 200px; }
.form-horizontal .controls { flex: 1 1 auto; }

.input-group {
    display: flex;
    width: 100%;
}
.input-group .form-control {
    flex: 1 1 auto;
    width: 1%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group-btn { display: flex; }
.input-group-btn .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    white-space: nowrap;
    border-color: #D1D5DB;
}

/* ---------- Tables ---------- */
.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}
.table th, .table td {
    padding: 10px 12px;
    border-bottom: 1px solid #E4E8F0;
    text-align: left;
    vertical-align: middle;
}
.table-responsive {
    width: 100%;
    overflow-x: auto;
}

/* ---------- Alerts ---------- */
.alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}
.alert-danger { background: #FDECEA; color: #B42318; border-color: #F5C2C0; }